Fix merge conflicts and rename usage based on above BP

STYLEGUIDE.md

@@ -69,6 +69,30 @@ const emit = defineEmits(["routeToName"]);
 useRouteToName(emit);
 ```
 
+### Breakpoints
+
+activist uses Tailwind for CSS, and some parts of components will be conditionally rendered based on Tailwind breakpoints, but we want to avoid using it to show and hide whole components. The reason for this is that using CSS in this way means that unneeded TypeScript for the hidden components will still run on page load. Please use `useBreakpoint` for all conditional rendering of full components.
+
+- ✅ No TS ran:
+
+   ```vue
+    <template>
+      <MyComponent v-if="aboveMediumBP" />
+    </template>
+
+   <script setup lang="ts">
+   import useBreakpoint from "~/composables/useBreakpoint";
+   const aboveMediumBP = useBreakpoint("md");
+   </script>
+   ```
+- ❌ TS still ran:
+
+    ```vue
+    <template>
+      <MyComponent class="hidden md:block" />
+    </template>
+    ```
+
 <a id="typescript"></a>
 
 ## TypeScript [`⇧`](#contents)

frontend/components/card/CardTextEntry.vue → frontend/components/card/CardTextArea.vue

@@ -8,19 +8,19 @@
         {{ description }}
       </p>
       <div v-if="multiline">
-        <!-- Mobile -->
+        <!-- MARK: Mobile -->
         <textarea
-          v-if="!medium"
+          v-if="!aboveMediumBP"
           id="feedback"
           class="block w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:resize-y md:overflow-hidden"
           type="text"
           rows="5"
           :placeholder="placeholder"
           :aria-label="textAreaAriaLabel"
         ></textarea>
-        <!-- Desktop -->
+        <!-- MARK: Desktop -->
         <textarea
-          v-if="medium"
+          v-if="aboveMediumBP"
           id="feedback"
           class="block w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:resize-y md:overflow-hidden"
           type="text"
@@ -43,7 +43,6 @@
 
 <script setup lang="ts">
 import useBreakpoint from "~/composables/useBreakpoint";
-const medium = useBreakpoint("md");
 
 defineProps<{
   header: string;
@@ -52,4 +51,6 @@ defineProps<{
   multiline: boolean;
   textAreaAriaLabel: string;
 }>();
+
+const aboveMediumBP = useBreakpoint("md");
 </script>

frontend/components/card/discussion/CardDiscussion.vue

@@ -3,7 +3,7 @@
     class="card-style flex w-full flex-col px-3 py-4 md:grow md:flex-row md:py-3 lg:px-5"
   >
     <BtnAction
-      v-if="medium"
+      v-if="aboveMediumBP"
       class="mt-1 flex h-min"
       :cta="true"
       :counter="discussion.upVoters.length"
@@ -19,7 +19,10 @@
             <h2 class="responsive-h3 w-full font-bold">
               {{ discussion.title }}
             </h2>
-            <div v-if="!medium" class="flex items-center space-x-3 md:w-fit">
+            <div
+              v-if="!aboveMediumBP"
+              class="flex items-center space-x-3 md:w-fit"
+            >
               <MetaTagMembers :members="discussion.participants.length" />
               <MetaTag
                 :iconName="IconMap.CHAT"
@@ -29,7 +32,7 @@
           </div>
           <div class="flex space-x-2">
             <BtnAction
-              v-if="!medium"
+              v-if="!aboveMediumBP"
               class="mt-1 flex"
               :cta="true"
               :label="`${discussion.upVoters}`"
@@ -49,7 +52,7 @@
           </div>
         </div>
         <div
-          v-if="medium"
+          v-if="aboveMediumBP"
           class="flex w-full items-center space-x-3 md:w-fit lg:space-x-5"
         >
           <MetaTagMembers :members="discussion.participants.length" />
@@ -83,12 +86,13 @@
 <script setup lang="ts">
 import useBreakpoint from "~/composables/useBreakpoint";
 import type { Discussion } from "~/types/discussion";
+// import type { Discussion } from "~/types/content/discussion";
 import { IconMap } from "~/types/icon-map";
 
-const medium = useBreakpoint("md");
-
 defineProps<{
   isPrivate?: boolean;
   discussion: Discussion;
 }>();
+
+const aboveMediumBP = useBreakpoint("md");
 </script>

frontend/components/card/search-result/CardSearchResult.vue

@@ -159,19 +159,22 @@
               :user="user"
             />
           </div>
-          <div v-if="medium" class="flex items-center space-x-3 lg:space-x-5">
+          <div
+            v-if="aboveMediumBP"
+            class="flex items-center space-x-3 lg:space-x-5"
+          >
             <MetaTagLocation v-if="location" :location="location" />
             <MetaTagVideo
               v-if="onlineLocation"
               :link="onlineLocation"
               label="components.meta-tag-video.view-video"
             />
-            <MetaTagDate :date="date" />
+            <MetaTagDate v-if="event && event.id != ''" :date="date" />
           </div>
         </div>
         <div class="flex flex-col space-y-3 md:flex-row md:space-y-0">
           <div
-            v-if="!medium"
+            v-if="!aboveMediumBP"
             class="flex items-center justify-center space-x-4"
           >
             <MetaTagLocation v-if="location" :location="location" />
@@ -180,7 +183,7 @@
               :link="onlineLocation"
               label="components.meta-tag-video.view-video"
             />
-            <MetaTagDate :date="date" />
+            <MetaTagDate v-if="event && event.id != ''" :date="date" />
           </div>
           <div
             class="flex justify-center space-x-3 md:justify-start lg:space-x-4"
@@ -218,16 +221,20 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { useLinkURL } from "~/composables/useLinkURL";
 import type { Event } from "~/types/event";
 import type { Group } from "~/types/group";
 import { IconMap } from "~/types/icon-map";
 import type { Organization } from "~/types/organization";
 import type { Resource } from "~/types/resource";
 import type { User } from "~/types/user";
-import useBreakpoint from "~/composables/useBreakpoint";
 
-const medium = useBreakpoint("md");
+// import type { User } from "~/types/auth/user";
+// import type { Resource } from "~/types/content/resource";
+// import type { Group } from "~/types/entities/group";
+// import type { Organization } from "~/types/entities/organization";
+// import type { Event } from "~/types/events/event";
 
 const props = defineProps<{
   organization?: Organization;
@@ -239,6 +246,8 @@ const props = defineProps<{
   isPrivate?: boolean;
 }>();
 
+const aboveMediumBP = useBreakpoint("md");
+
 const i18n = useI18n();
 const localePath = useLocalePath();
 const { linkURL } = useLinkURL(props);

frontend/components/header/HeaderMobile.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-    v-if="!medium"
+    v-if="!aboveMediumBP"
     ref="header"
     class="sticky top-0 z-50 h-12 w-full bg-light-layer-2 drop-shadow-md duration-500 dark:bg-dark-layer-2"
   >
@@ -49,10 +49,10 @@
 </template>
 
 <script setup lang="ts">
-import { DropdownLocation, SearchBarLocation } from "~/types/location";
 import useBreakpoint from "~/composables/useBreakpoint";
+import { DropdownLocation, SearchBarLocation } from "~/types/location";
 
-const medium = useBreakpoint("md");
+const aboveMediumBP = useBreakpoint("md");
 
 const userIsSignedIn = false;
 const isSearchExpanded = ref(false);

frontend/components/header/HeaderWebsite.vue

@@ -1,15 +1,16 @@
 <template>
   <header
     ref="header"
+    id="header"
     class="sticky top-0 z-10 drop-shadow-md duration-500"
     :class="{
       'bg-light-layer-2 dark:bg-dark-layer-2': headerOpacity == 1,
       'bg-light-layer-2/80 dark:bg-dark-layer-2/80': headerOpacity == 0.8,
       'invisible opacity-0': headerOpacity == 0,
     }"
   >
-    <!-- Note: Mobile header including SidebarRight. -->
-    <div v-if="!medium" class="flex px-4 py-3">
+    <!-- MARK: Mobile Header -->
+    <div v-if="!aboveMediumBP" class="flex px-4 py-3">
       <div class="z-0 mx-auto">
         <div
           class="absolute left-0 top-0 z-0 flex h-full w-full items-center justify-center"
@@ -35,8 +36,8 @@
         </div>
       </SidebarRight>
     </div>
-    <!-- Note: Desktop header. -->
-    <div v-if="medium" class="mx-auto py-3">
+    <!-- MARK: Desktop Header -->
+    <div v-if="aboveMediumBP" id="desktop-header" class="mx-auto py-3">
       <div class="responsive-px-5 flex items-center justify-between">
         <div class="flex items-center md:space-x-4 lg:space-x-6 xl:space-x-8">
           <div class="relative z-0 h-10 w-36">
@@ -51,7 +52,8 @@
             <DropdownTheme />
             <DropdownLanguage />
             <BtnRouteInternal
-              v-if="large"
+              v-if="aboveLargeBP"
+              id="btn-get-in-touch-large"
               class="block"
               :cta="true"
               label="components.btn-route-internal.get-in-touch"
@@ -60,7 +62,8 @@
               ariaLabel="components.btn-route-internal.get-in-touch-aria-label"
             />
             <BtnRouteInternal
-              v-else-if="medium"
+              v-else-if="aboveMediumBP"
+              id="btn-get-in-touch-medium"
               class="block"
               :cta="true"
               label="components.btn-route-internal.get-in-touch"
@@ -76,11 +79,11 @@
 </template>
 
 <script setup lang="ts">
-import { DropdownLocation } from "~/types/location";
 import useBreakpoint from "~/composables/useBreakpoint";
+import { DropdownLocation } from "~/types/location";
 
-const medium = useBreakpoint("md");
-const large = useBreakpoint("lg");
+const aboveMediumBP = useBreakpoint("md");
+const aboveLargeBP = useBreakpoint("lg");
 
 const headerOpacity: Ref<number> = ref(1);
 const prevScrollY: Ref<number> = ref(0);

frontend/components/landing/LandingSplash.vue

@@ -14,7 +14,7 @@
       <div
         class="w-10/12 text-center text-base sm:text-xl md:w-3/4 md:text-lg xl:text-2xl"
       >
-        <div v-if="medium" class="block flex-col space-y-1 xl:space-y-2">
+        <div v-if="aboveMediumBP" class="block flex-col space-y-1 xl:space-y-2">
           <p>{{ $t("components.landing-splash.message-1") }}</p>
           <p>{{ $t("components.landing-splash.message-2") }}</p>
         </div>
@@ -40,5 +40,6 @@
 
 <script setup lang="ts">
 import useBreakpoint from "~/composables/useBreakpoint";
-const medium = useBreakpoint("md");
+
+const aboveMediumBP = useBreakpoint("md");
 </script>

frontend/components/menu/MenuSubPageSelector.vue

@@ -13,14 +13,14 @@
             }"
             :to="localePath(selector.routeURL)"
           >
-            <div v-if="!medium">
+            <div v-if="!aboveMediumBP">
               <Icon
                 v-if="selector.iconName"
                 :name="selector.iconName"
                 size="1em"
               />
             </div>
-            <p v-if="!selector.iconName || medium">
+            <p v-if="!selector.iconName || aboveMediumBP">
               {{ selector.label }}
             </p>
           </NuxtLink>
@@ -32,16 +32,16 @@
 
 <script setup lang="ts">
 import { Tab, TabGroup, TabList } from "@headlessui/vue";
-import type { SubPageSelector } from "~/types/sub-page-selector";
 import useBreakpoint from "~/composables/useBreakpoint";
-
-const medium = useBreakpoint("md");
+import type { SubPageSelector } from "~/types/sub-page-selector";
 
 const props = defineProps<{
   selectors: SubPageSelector[];
   selectedRoute: number;
 }>();
 
+const aboveMediumBP = useBreakpoint("md");
+
 const localePath = useLocalePath();
 const nuxtApp = useNuxtApp();
 const router = useRouter();