WIP SSR for frontend

frontend/app/components/SearchBar.vue

@@ -110,11 +110,11 @@ const props = withDefaults(defineProps<Props>(), {
   expanded: false,
 });
 
-const localValue = ref(props.modelValue || "");
+const localValue = ref(props?.modelValue || "");
 watch(
   props,
   (newVal) => {
-    localValue.value = newVal.modelValue || "";
+    localValue.value = newVal?.modelValue || "";
   },
   { immediate: true }
 );

frontend/app/components/card/search-result-entity/CardSearchResultEntity.vue

@@ -4,9 +4,15 @@
     class="card-style flex flex-col justify-center px-3 py-4 md:grow md:flex-row md:justify-start md:py-3 lg:px-5"
   >
     <div class="relative flex w-full flex-col md:flex-row">
-      <div class="flex w-full justify-center md:w-fit">
-        <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)">
-          <div class="h-min w-max rounded-md border border-section-div">
+      <div class="flex w-full shrink-0 justify-center md:w-fit">
+        <NuxtLink
+          :aria-label="$t(ariaLabel)"
+          class="block"
+          :to="localePath(linkUrl)"
+        >
+          <div
+            class="h-fit w-fit overflow-hidden rounded-md border border-section-div"
+          >
             <slot :imageAlt="imageAlt" :imageUrl="imageUrl" name="image">
               <img
                 v-if="imageUrl"
@@ -26,7 +32,9 @@
           </div>
         </NuxtLink>
       </div>
-      <div class="flex-col space-y-2 pt-3 md:grow md:pl-4 md:pt-0 lg:pl-6">
+      <div
+        class="min-w-0 flex-col space-y-2 pt-3 md:grow md:pl-4 md:pt-0 lg:pl-6"
+      >
         <div class="-mb-2 flex flex-col justify-between md:flex-row">
           <div class="flex items-center justify-center space-x-2 md:space-x-4">
             <NuxtLink :aria-label="$t(ariaLabel)" :to="localePath(linkUrl)">
@@ -39,17 +47,13 @@
               name="menu"
             />
           </div>
-          <div
-            v-if="aboveMediumBP"
-            class="flex items-center space-x-3 lg:space-x-5"
-          >
+          <div class="hidden items-center space-x-3 md:flex lg:space-x-5">
             <slot name="desktop-meta-tags" />
           </div>
         </div>
         <div class="flex flex-col space-y-3 md:flex-row md:space-y-0">
           <div
-            v-if="!aboveMediumBP"
-            class="flex flex-col items-center justify-center space-y-1.5 pt-4"
+            class="flex flex-col items-center justify-center space-y-1.5 pt-4 md:hidden"
           >
             <slot name="mobile-meta-tags" />
           </div>
@@ -97,7 +101,6 @@ const props = defineProps<{
   isReduced?: boolean;
 }>();
 
-const aboveMediumBP = useBreakpoint("md");
 const localePath = useLocalePath();
 
 const imageSizeClass = computed(() => ({

frontend/app/components/card/search-result-entity/CardSearchResultEntityEvent.vue

@@ -14,10 +14,10 @@
   >
     <template #image="{ imageUrl: slotImageUrl }">
       <div
-        class="flex items-center justify-center"
+        class="flex shrink-0 items-center justify-center"
         :class="{
-          'h-[150px] w-[150px]': isReduced,
-          'h-[200px] w-[200px]': !isReduced,
+          'h-28 w-28 md:h-[150px] md:w-[150px]': isReduced,
+          'h-32 w-32 md:h-[200px] md:w-[200px]': !isReduced,
         }"
       >
         <ImageEvent

frontend/app/components/feed/Feed.vue

@@ -39,12 +39,12 @@ const feedItemUrls = computed<string[]>(() => {
   }
 });
 
-const currentWidth = ref(window.innerWidth);
+const currentWidth = ref(window?.innerWidth);
 const numberOfFeedItems = ref(1);
 let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
 const updateWidth = () => {
-  currentWidth.value = window.innerWidth;
+  currentWidth.value = window?.innerWidth;
   if (currentWidth.value < BreakpointMap.SMALL) {
     numberOfFeedItems.value = 1;
   } else if (currentWidth.value < BreakpointMap.LARGE) {
@@ -66,11 +66,11 @@ const handleResize = () => {
 };
 
 onMounted(() => {
-  window.addEventListener("resize", handleResize);
+  window?.addEventListener?.("resize", handleResize);
   updateWidth();
 });
 
 onBeforeUnmount(() => {
-  window.removeEventListener("resize", handleResize);
+  window?.removeEventListener?.("resize", handleResize);
 });
 </script>

frontend/app/components/footer/FooterWebsite.vue

@@ -171,13 +171,13 @@
 </template>
 
 <script setup lang="ts">
-const currentWidth = ref(window.innerWidth);
+const currentWidth = ref(window?.innerWidth);
 const isMobileDevice = ref(false);
 let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 const localePath = useLocalePath();
 
 const updateWidth = () => {
-  currentWidth.value = window.innerWidth;
+  currentWidth.value = window?.innerWidth || 0;
   if (currentWidth.value < BreakpointMap.LARGE) {
     isMobileDevice.value = true;
   } else {

frontend/app/components/header/HeaderMobile.vue

@@ -2,9 +2,8 @@
 <template>
   <header
     id="mobile-header"
-    v-if="!aboveMediumBP"
     ref="header"
-    class="sticky top-0 z-50 h-12 w-full bg-layer-2 drop-shadow-md duration-500"
+    class="sticky top-0 z-50 block h-12 w-full bg-layer-2 drop-shadow-md duration-500 md:hidden"
   >
     <div class="h-full">
       <div class="flex h-full justify-between gap-2 px-4">
@@ -54,7 +53,9 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
+import { ref } from "vue";
+
+// 1. Removed `useBreakpoint("md")` as CSS now handles this
 
 const { userIsSignedIn } = useUser();
 

frontend/app/components/header/HeaderWebsite.vue

@@ -10,8 +10,8 @@
       'invisible opacity-0': headerOpacity == 0,
     }"
   >
-    <!-- MARK: Mobile Header -->
-    <div id="mobile-header" v-if="!aboveMediumBP" class="flex px-4 py-3">
+    <!-- MARK: Mobile Header (Visible only on small screens) -->
+    <div id="mobile-header" class="flex px-4 py-3 md:hidden">
       <div class="z-0 mx-auto">
         <div
           class="absolute left-0 top-0 z-0 flex h-full w-full items-center justify-center"
@@ -56,8 +56,9 @@
         </div>
       </SidebarRight>
     </div>
-    <!-- MARK: Desktop Header -->
-    <div id="desktop-header" v-if="aboveMediumBP" class="mx-auto py-3">
+
+    <!-- MARK: Desktop Header (Visible only on md screens and up) -->
+    <div id="desktop-header" class="mx-auto hidden py-3 md:block">
       <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">
@@ -71,61 +72,67 @@
           <div class="flex items-center space-x-3 lg:space-x-4 xl:space-x-6">
             <DropdownTheme />
             <DropdownLanguage />
+
+            <!-- MARK: Desktop Buttons -->
+            <!-- Large Screens (lg and up) -->
             <BtnRouteInternal
               id="btn-sign-in-large"
-              v-if="aboveLargeBP && devMode.active"
+              v-if="devMode.active"
               ariaLabel="i18n._global.sign_in_aria_label"
-              class="block"
+              class="hidden lg:block"
               :cta="true"
               fontSize="sm"
               label="i18n._global.sign_in"
               linkTo="/auth/sign-in"
             />
+            <!-- Medium Screens (md only) -->
             <BtnRouteInternal
               id="btn-sign-in-medium"
-              v-else-if="aboveMediumBP && devMode.active"
+              v-if="devMode.active"
               ariaLabel="i18n._global.sign_in_aria_label"
-              class="block"
+              class="hidden md:block lg:hidden"
               :cta="true"
               fontSize="xs"
               label="i18n._global.sign_in"
               linkTo="/auth/sign-in"
             />
+
             <BtnRouteInternal
               id="btn-sign-up-large"
-              v-if="aboveLargeBP && devMode.active"
+              v-if="devMode.active"
               ariaLabel="i18n._global.sign_up_aria_label"
-              class="block"
+              class="hidden lg:block"
               :cta="true"
               fontSize="sm"
               label="i18n._global.sign_up"
               linkTo="/auth/sign-up"
             />
             <BtnRouteInternal
               id="btn-sign-up-medium"
-              v-else-if="aboveMediumBP && devMode.active"
+              v-if="devMode.active"
               ariaLabel="i18n._global.sign_up_aria_label"
-              class="block"
+              class="hidden md:block lg:hidden"
               :cta="true"
               fontSize="xs"
               label="i18n._global.sign_up"
               linkTo="/auth/sign-up"
             />
+
             <BtnRouteInternal
               id="btn-get-in-touch-large"
-              v-if="aboveLargeBP && !devMode.active"
+              v-if="!devMode.active"
               ariaLabel="i18n.components.header_website.support_aria_label"
-              class="block"
+              class="hidden lg:block"
               :cta="true"
               fontSize="sm"
               label="i18n._global.support"
               linkTo="https://docs.activist.org/activist/welcome/support-us"
             />
             <BtnRouteInternal
               id="btn-get-in-touch-medium"
-              v-else-if="aboveMediumBP && !devMode.active"
+              v-if="!devMode.active"
               ariaLabel="i18n.components.header_website.support_aria_label"
-              class="block"
+              class="hidden md:block lg:hidden"
               :cta="true"
               fontSize="xs"
               label="i18n._global.support"
@@ -139,16 +146,18 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
-const aboveLargeBP = useBreakpoint("lg");
+import { ref, onMounted, onUnmounted } from "vue";
 
+// REMOVED useBreakpoint as it is now handled by CSS
 const devMode = useDevMode();
-devMode.check();
-
 const { userIsSignedIn } = useUser();
 
-const headerOpacity: Ref<number> = ref(1);
-const prevScrollY: Ref<number> = ref(0);
+onMounted(() => {
+  devMode.check();
+});
+
+const headerOpacity = ref<number>(1);
+const prevScrollY = ref<number>(0);
 
 function handleScroll() {
   const scrollY = window.scrollY;

frontend/app/components/image/ImageEvent.vue

@@ -1,14 +1,14 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <!-- Note: We want event images to be centered within their parent div and change size based on their container. -->
-  <div class="flex h-full w-full justify-center rounded-md">
+  <div class="flex h-full w-full justify-center overflow-hidden rounded-md">
     <div
       class="h-full w-[20%] rounded-l-md"
       :class="{
         'bg-action-red': eventType === 'action',
         'bg-learn-blue': eventType === 'learn',
       }"
-    ></div>
+    />
     <img
       v-if="imgUrl && imgUrl !== ''"
       :alt="alt"

frontend/app/components/landing/LandingSplash.vue

@@ -13,11 +13,11 @@
     </div>
     <div class="flex justify-center">
       <div class="w-10/12 text-center">
-        <div v-if="aboveMediumBP" class="block flex-col space-y-1 xl:space-y-2">
+        <div class="hidden flex-col space-y-1 md:block xl:space-y-2">
           <h4>{{ $t("i18n.components.landing_splash.message_1") }}</h4>
           <h4>{{ $t("i18n.components.landing_splash.message_2") }}</h4>
         </div>
-        <h4 v-else>
+        <h4 class="block md:hidden">
           {{ $t("i18n.components.landing_splash.message_1") }}&nbsp;{{
             $t("i18n.components.landing_splash.message_2")
           }}
@@ -59,7 +59,8 @@
 </template>
 
 <script setup lang="ts">
-const aboveMediumBP = useBreakpoint("md");
 const devMode = useDevMode();
-devMode.check();
+onMounted(() => {
+  devMode.check();
+});
 </script>

frontend/app/components/media/image-carousel/MediaImageCarousel.vue

@@ -11,16 +11,18 @@
       :spaceBetween="0"
     >
       <swiper-slide
-        v-for="[idx, img] of imageUrls?.entries()"
+        v-for="[idx, img] of isMounted
+          ? imageUrls?.entries()
+          : imageUrls?.entries().take(1)"
         :key="idx"
         class="swiper-zoom-container flex items-center justify-center bg-layer-2"
       >
         <img
           :alt="$t('i18n.components.media_image_carousel.img_alt_text')"
           class="object-cover object-center"
           :class="{
-            'h-5/6 w-5/6': props.fullscreen,
-            'h-70': !props.fullscreen,
+            'h-5/6 w-5/6': fullscreen,
+            'h-70': !fullscreen,
           }"
           :src="img"
         />
@@ -57,6 +59,9 @@ const props = defineProps<Props>();
 
 register();
 
+// MARK: State to track when SSR hydration is complete
+const isMounted = ref(false);
+
 const uploadError = ref(false);
 const currentImageId = ref<string>("");
 const { openModal: openModalUploadImageOrganization } = useModalHandlers(
@@ -65,17 +70,20 @@ const { openModal: openModalUploadImageOrganization } = useModalHandlers(
 const { openModal: openModalUploadImageGroup } = useModalHandlers(
   "ModalUploadImageGroup"
 );
+
 const handleOpenModalUploadImage = () => {
   if (props.entityType === EntityType.GROUP) openModalUploadImageGroup();
   if (props.entityType === EntityType.ORGANIZATION)
     openModalUploadImageOrganization();
 };
-// Get the swiper instance. Use this instance to listen for the slideChange event.
+
 const swiperRef = ref<{ swiper?: SwiperInstance } | null>(null);
 
 onMounted(() => {
+  // MARK: Inform the template that JS has loaded
+  isMounted.value = true;
+
   const swiperEl = swiperRef.value;
-  // Now we assert swiperRef value is a Swiper instance.
   if (swiperEl?.swiper) {
     swiperEl.swiper.on("slideChange", () => {
       const activeIndex = swiperEl?.swiper?.realIndex ?? 1;

frontend/app/components/media/image-carousel/MediaImageCarouselFull.vue

@@ -43,7 +43,7 @@ const imageUrls = ref<string[]>([]);
 watch(
   props,
   (newValue) => {
-    if (newValue.images && newValue.images.length > 0) {
+    if (newValue?.images && newValue?.images?.length > 0) {
       imageUrls.value = newValue.images.map(
         (image: ContentImage) => `/api/${image.fileObject}`
       );