@paris-ias/list 1.0.185 → 1.0.187

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@paris-ias/list",
   "configKey": "list",
-  "version": "1.0.185",
+  "version": "1.0.187",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/events/DenseItem.vue

@@ -6,19 +6,24 @@
         :loading
         :date-start="item.start"
         :date-stop="item.stop"
-        class="pr-4 mt-md-2"
+        class="pr-4"
       />
     </v-col>
-    <v-col v-if="mdAndUp" cols="1">
-      <MiscAtomsImageContainer
-        cover
-        :loading
-        :src="
-          item && item.image && item.image.url ? item.image.url : '/default.png'
-        "
-        :ratio="1 / 1"
-        :width="70"
-      />
+    <v-col v-if="mdAndUp" cols="auto">
+      <div style="width: 80px; height: 80px; flex-shrink: 0">
+        <MiscAtomsImageContainer
+          cover
+          :loading
+          :src="
+            item && item.image && item.image.url
+              ? item.image.url
+              : '/default.png'
+          "
+          :ratio="1 / 1"
+          :width="80"
+          style="width: 80px; height: 80px"
+        />
+      </div>
     </v-col>
 
     <v-col align-self="start" class="px-2">
@@ -61,8 +66,8 @@
         v-else
         class="text-h5 dense paragraph mt-2"
         v-html="
-          $rootStore.search.length
-            ? highlightAndTruncate(300, item.name, $rootStore.search.split(' '))
+          searchQuery.length
+            ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
             : item.name
         "
       />
@@ -73,7 +78,7 @@
         :value="`${highlightAndTruncate(
           85,
           item.summary,
-          $rootStore.search.split(' '),
+          searchQuery.split(' '),
         )}`"
       />
     </v-col>
@@ -88,15 +93,21 @@
 </template>
 
 <script setup>
-import { useI18n, useNuxtApp, computed } from "#imports"
+import { useI18n, useNuxtApp, useRoute, computed } from "#imports"
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
 import { highlightAndTruncate } from "../../composables/useUtils"
-const { $rootStore } = useNuxtApp()
+const { $rootStore, $stores } = useNuxtApp()
 const { smAndDown, mdAndUp } = useDisplay()
 
 const { locale } = useI18n()
 const rootStore = useRootStore()
+const { name: routeName } = useRoute()
+const searchQuery = computed(() =>
+  routeName.startsWith("search")
+    ? $rootStore.search
+    : $stores["events"].search || "",
+)
 const props = defineProps({
   item: {
     type: Object,

package/dist/runtime/components/events/RowsItem.vue

@@ -29,9 +29,15 @@
           />
 
           <div v-else>
-            <div v-if="item.name" class="text-h4 text-black text-wrap mt-4">
-              {{ item.name }}
-            </div>
+            <div
+              v-if="item.name"
+              class="text-h4 text-black text-wrap mt-4"
+              v-html="
+                searchQuery.length
+                  ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
+                  : item.name
+              "
+            />
             <div class="mt-2 text-h6 text-overline font-weight-black">
               {{ $t("list.filters.events.category." + item.category) }}
             </div>
@@ -45,7 +51,7 @@
                 ]
               "
             >
-              <MDC v-if="item.summary" :value="item.summary" />
+              <MDC v-if="item.summary" :value="searchQuery.length ? highlightAndTruncate(500, item.summary, searchQuery.split(' ')) : item.summary" />
             </p>
 
             <div v-if="lgAndUp" class="d-flex flex-row align-center flex-wrap">
@@ -85,12 +91,17 @@
 <script setup>
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
-import { useNuxtApp, computed } from "#imports"
+import { useNuxtApp, useRoute, computed } from "#imports"
+import { highlightAndTruncate } from "../../composables/useUtils"
 
 const { name, mdAndDown, lgAndUp } = useDisplay()
 
 const rootStore = useRootStore()
 const { $stores } = useNuxtApp()
+const { name: routeName } = useRoute()
+const searchQuery = computed(() =>
+  routeName.startsWith('search') ? rootStore.search : ($stores['events'].search || '')
+)
 const props = defineProps({
   item: {
     type: Object,

package/dist/runtime/components/events/SlidingItem.vue

@@ -6,7 +6,7 @@
         :date-stop="item.stop"
         :loading="loading"
         class="mr-4 mb-6 mb-md-0"
-        style="min-width: 70px"
+        style="min-width: 80px"
       />
       <div
         class="d-flex flex-column"

package/dist/runtime/components/fellowships/DenseItem.vue

@@ -4,7 +4,12 @@
     no-gutters
     class="cursor-pointer highlight-on-hover pt-2 pl-2"
   >
-    <v-col align-self="center" cols="8" class="text-h5 dense">
+    <v-col
+      align-self="center"
+      cols="8"
+      class="text-h5 dense"
+      :offset="name.startsWith('search') ? 1 : 0"
+    >
       <v-skeleton-loader
         v-if="loading"
         type="heading"
@@ -14,14 +19,14 @@
       <div
         v-else
         v-html="
-          $rootStore.search.length
-            ? highlightAndTruncate(300, item.name, $rootStore.search.split(' '))
+          searchQuery.length
+            ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
             : item.name
         "
       />
       <FellowshipsBadges :item="item" :loading="loading" />
     </v-col>
-    <v-col align-self="center" cols="4">
+    <v-col align-self="center" cols="auto">
       <v-skeleton-loader v-if="loading" type="chip" width="260" class="mt-2" />
       <MiscMoleculesChipContainer
         v-else
@@ -38,10 +43,13 @@
 </template>
 
 <script setup>
-import { useNuxtApp } from "#imports"
+import { useNuxtApp, useRoute, computed } from "#imports"
 import { highlightAndTruncate } from "../../composables/useUtils"
-const { $rootStore } = useNuxtApp()
-
+const { $rootStore, $stores } = useNuxtApp()
+const { name } = useRoute()
+const searchQuery = computed(() =>
+  name.startsWith('search') ? $rootStore.search : ($stores['fellowships'].search || '')
+)
 const props = defineProps({
   item: {
     type: Object,

package/dist/runtime/components/fellowships/RowsItem.vue

@@ -13,9 +13,14 @@
         <template v-else>
           <FellowshipsBadges :item :loading="loading" />
 
-          <div class="text-h4 text-black text-wrap mt-4 pb-4">
-            {{ item.name }}
-          </div>
+          <div
+            class="text-h4 text-black text-wrap mt-4 pb-4"
+            v-html="
+              searchQuery.length
+                ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
+                : item.name
+            "
+          />
 
           <div
             v-if="item.summary"
@@ -27,7 +32,7 @@
               ]
             "
           >
-            <MDC :value="item.summary" />
+            <MDC :value="searchQuery.length ? highlightAndTruncate(500, item.summary, searchQuery.split(' ')) : item.summary" />
           </div>
 
           <MiscMoleculesChipContainer
@@ -50,8 +55,17 @@
 
 <script setup>
 import { useDisplay } from "vuetify"
+import { computed, useRoute, useNuxtApp } from "#imports"
+import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 
 const { name } = useDisplay()
+const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const { name: routeName } = useRoute()
+const searchQuery = computed(() =>
+  routeName.startsWith('search') ? rootStore.search : ($stores['fellowships'].search || '')
+)
 
 const props = defineProps({
   item: {

package/dist/runtime/components/fellowships/View.vue

@@ -33,7 +33,9 @@
           />
 
           <div v-else class="d-flex align-center flex-column mt-12">
-            <div class="d-flex text-center text-wrap text-h3 text-black">
+            <div
+              class="d-flex text-center text-wrap text-h4 text-md-h3 text-black"
+            >
               {{ item.name }}
             </div>
             <v-divider width="154px" class="mb-1 mt-6" />
@@ -57,7 +59,7 @@
               <FellowshipsBadges :item="item" :view="view" :loading="loading" />
             </div>
           </div>
-          <div class="mx-6">
+          <div>
             <!-- DIVIDERS -->
             <v-responsive class="mx-auto my-9" width="120">
               <v-divider class="mb-1" />

package/dist/runtime/components/list/molecules/GlobalSearchInput.vue

@@ -49,9 +49,13 @@
       :id="`global-search-input-${type}`"
       v-model.trim="search"
       :placeholder="
-        type === 'all'
-          ? t('search')
-          : $t('list.search-type', [$t('items.' + type, 2)])
+        routeName.startsWith('search')
+          ? mdAndUp
+            ? $t('type-a-search-term-to-find-results-across-all-categories')
+            : $t('search')
+          : type === 'all'
+            ? $t('search')
+            : $t('list.search-type', [$t('items.' + type, 2)])
       "
       single-line
       class="transition-swing flex-grow-1"
@@ -66,11 +70,18 @@
     >
       <template v-if="!search" #label>
         <div class="searchLabel">
-          {{ $t("search") }}
+          {{
+            routeName.startsWith("search")
+              ? mdAndUp
+                ? $t("type-a-search-term-to-find-results-across-all-categories")
+                : $t("search")
+              : type === "all"
+                ? $t("search")
+                : $t("list.search-type", [$t("items." + type, 2)])
+          }}
         </div>
       </template>
     </v-text-field>
-
     <v-btn
       :rounded="0"
       variant="outlined"
@@ -90,11 +101,21 @@
 <script setup>
 import { useDebounceFn } from "@vueuse/core"
 import { useRootStore } from "../../../stores/root"
-import { computed, useI18n, ref, useLocalePath, useRouter, navigateTo } from "#imports"
+import { useDisplay } from "vuetify"
+import {
+  computed,
+  useI18n,
+  ref,
+  useLocalePath,
+  useRoute,
+  useRouter,
+  navigateTo,
+} from "#imports"
+const { mdAndUp } = useDisplay()
 const localePath = useLocalePath()
 const { locale, t } = useI18n()
 const rootStore = useRootStore()
-
+const { name: routeName } = useRoute()
 // Utility function to capitalize first letter
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)
 const emit = defineEmits(["filter-change"])
@@ -151,7 +172,11 @@ const toggleFilter = (option) => {
 const textFieldRef = ref(null)
 
 const navigateToSearch = () => {
-  const term = (textFieldRef.value?.$el?.querySelector("input")?.value ?? rootStore.search ?? "").trim()
+  const term = (
+    textFieldRef.value?.$el?.querySelector("input")?.value ??
+    rootStore.search ??
+    ""
+  ).trim()
   rootStore.search = term
   navigateTo({
     path: localePath("/search"),

package/dist/runtime/components/list/molecules/ResultsContainer.vue

@@ -15,8 +15,7 @@
         class="d-flex flex-column cursor-pointer"
         @click="$emit('toggle', type)"
       >
-        <div
-          class="text-h5 font-weight-medium"
+        <h3
           :class="
             $rootStore.results[type] && $rootStore.results[type].total > 0
               ? 'black'
@@ -24,7 +23,7 @@
           "
         >
           {{ capitalize($t("items." + props.type, 2)) }}
-        </div>
+        </h3>
         <div class="text-overline">
           {{
             feminine

package/dist/runtime/components/list/organisms/Results.vue

@@ -11,10 +11,17 @@
     <ListAtomsLogoPlaceholder idle />
   </div>
   <template v-else>
-    <div v-if="loading" class="search-pending">
-      <ListAtomsLogoPlaceholder />
+    <div v-if="pending" class="search-pending">
+      <div class="search-pending__inner">
+        <ListAtomsLogoPlaceholder class="loader-logo loader-logo--active" />
+        <div class="search-pending__dots">
+          <span class="search-pending__dot" />
+          <span class="search-pending__dot" />
+          <span class="search-pending__dot" />
+        </div>
+      </div>
     </div>
-    <template v-else-if="!loading">
+    <template v-else>
       <ListMoleculesResultsContainer
         v-for="type in filteredSortedModules"
         :key="type"
@@ -48,7 +55,6 @@ import {
   useI18n,
   useAppConfig,
   useRoute,
-  ref,
   reactive,
   useAsyncQuery,
   computed,
@@ -64,8 +70,6 @@ if (route.query.search) {
   $rootStore.search = route.query.search
 }
 
-const loading = ref(true)
-
 const open = reactive(
   appConfig.list.modules.reduce((acc, type) => {
     acc[type] = false
@@ -73,10 +77,14 @@ const open = reactive(
   }, {}),
 )
 
-const selectedCategories = ref([...appConfig.list.modules])
+const selectedCategories = reactive([...appConfig.list.modules])
 
 const handleFilterChange = (filterData) => {
-  selectedCategories.value = filterData.categories
+  selectedCategories.splice(
+    0,
+    selectedCategories.length,
+    ...filterData.categories,
+  )
 }
 
 const sortedModules = computed(() => {
@@ -93,9 +101,7 @@ const sortedModules = computed(() => {
   })
 })
 const filteredSortedModules = computed(() => {
-  return sortedModules.value.filter((type) =>
-    selectedCategories.value.includes(type),
-  )
+  return sortedModules.value.filter((type) => selectedCategories.includes(type))
 })
 
 const searchTerm = computed(() => $rootStore.search || "")
@@ -113,13 +119,8 @@ const { data, pending, error } = useAsyncQuery(
     enabled: computed(() => searchTerm.value.length > 0),
   },
 )
-if (error.value) {
-  console.error("GraphQL query error: ", error.value)
-} else {
-  /*  console.log("Query result data: ", data.value.items?.length) */
-}
 
-const applyData = (newData) => {
+watch(data, (newData) => {
   if (!newData) return
   $rootStore.applyListResult("all", newData)
   appConfig.list.modules.forEach((type) => {
@@ -127,18 +128,364 @@ const applyData = (newData) => {
       open[type] = true
     }
   })
-  loading.value = false
-}
-
-watch(data, applyData, { immediate: true })
+})
 
 watch(error, (err) => {
-  if (err) {
-    console.error("GraphQL query error:", err)
-    loading.value = false
-  }
+  if (err) console.error("GraphQL query error:", err)
 })
 </script>
+
 <style scoped>
-.results-container{display:flex;flex-direction:column;gap:8px;margin-left:8px}.search-empty{min-height:100vh;opacity:.8}.search-empty,.search-pending{display:flex;justify-content:center}.search-pending{padding:48px 0}
+@charset "UTF-8";
+.results-container {
+  margin-left: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.search-empty {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  opacity: 0.8;
+}
+.search-empty svg {
+  width: min(32vh, 32vw);
+  height: min(32vh, 32vw);
+}
+
+.search-pending {
+  display: flex;
+  justify-content: center;
+  padding: 48px 0;
+}
+.search-pending svg {
+  width: min(32vh, 32vw);
+  height: min(32vh, 32vw);
+}
+
+.search-pending__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.loader-logo {
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
+  width: 200px;
+  height: auto;
+}
+
+/* Drawing animation — mirrors ListOrganismsLoader exactly */
+.loader-logo--active :deep([class^="IEA_"]) {
+  fill: transparent;
+  stroke: #000;
+  stroke-opacity: 1;
+  fill-opacity: 1;
+  fill-rule: nonzero;
+}
+
+.loader-logo--active :deep(.IEA_0) {
+  stroke-dasharray: 1223 1225;
+  stroke-dashoffset: 1224;
+  animation: IEA_draw_0 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_5) {
+  stroke-dasharray: 335 337;
+  stroke-dashoffset: 336;
+  animation: IEA_draw_5 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_1) {
+  stroke-dasharray: 1351 1353;
+  stroke-dashoffset: 1352;
+  animation: IEA_draw_1 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_2) {
+  stroke-dasharray: 1311 1313;
+  stroke-dashoffset: 1312;
+  animation: IEA_draw_2 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_3),
+.loader-logo--active :deep(.IEA_4) {
+  stroke-dasharray: 13 15;
+  stroke-dashoffset: 14;
+}
+
+.loader-logo--active :deep(.IEA_3) {
+  animation: IEA_draw_3 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_4) {
+  animation: IEA_draw_4 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_6),
+.loader-logo--active :deep(.IEA_7),
+.loader-logo--active :deep(.IEA_8) {
+  stroke-dasharray: 102 104;
+  stroke-dashoffset: 103;
+}
+
+.loader-logo--active :deep(.IEA_6) {
+  animation: IEA_draw_6 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_7) {
+  animation: IEA_draw_7 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_8) {
+  animation: IEA_draw_8 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_9) {
+  stroke-dasharray: 372 374;
+  stroke-dashoffset: 373;
+  animation: IEA_draw_9 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_10) {
+  stroke-dasharray: 96 98;
+  stroke-dashoffset: 97;
+  animation: IEA_draw_10 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_11) {
+  stroke-dasharray: 184 186;
+  stroke-dashoffset: 185;
+  animation: IEA_draw_11 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_12) {
+  stroke-dasharray: 169 171;
+  stroke-dashoffset: 170;
+  animation: IEA_draw_12 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_13) {
+  stroke-dasharray: 1020 1022;
+  stroke-dashoffset: 1021;
+  animation: IEA_draw_13 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-circles 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_14) {
+  stroke-dasharray: 939 941;
+  stroke-dashoffset: 940;
+  animation: IEA_draw_14 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-circles 3141ms ease 0ms infinite;
+}
+
+.loader-logo--active :deep(.IEA_15) {
+  stroke-dasharray: 326 328;
+  stroke-dashoffset: 327;
+  animation: IEA_draw_15 3141ms ease 0ms infinite, stroke-fade 3141ms linear 0ms infinite, fill-standard 3141ms ease 0ms infinite;
+}
+
+@keyframes fill-standard {
+  0%, 35% {
+    fill: transparent;
+  }
+  60% {
+    fill: rgba(0, 0, 0, 0.3);
+  }
+  80% {
+    fill: rgba(0, 0, 0, 0.7);
+  }
+  100% {
+    fill: #000;
+  }
+}
+@keyframes fill-circles {
+  0%, 35% {
+    fill: transparent;
+  }
+  60% {
+    fill: rgba(0, 0, 0, 0.2);
+  }
+  80% {
+    fill: rgba(0, 0, 0, 0.5);
+  }
+  100% {
+    fill: #000;
+  }
+}
+@keyframes stroke-fade {
+  0%, 65% {
+    stroke-opacity: 1;
+  }
+  80% {
+    stroke-opacity: 0.5;
+  }
+  95% {
+    stroke-opacity: 0.2;
+  }
+  100% {
+    stroke-opacity: 0;
+  }
+}
+@keyframes IEA_draw_0 {
+  5% {
+    stroke-dashoffset: 1224;
+  }
+  30%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_1 {
+  8% {
+    stroke-dashoffset: 1352;
+  }
+  35%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_2 {
+  10% {
+    stroke-dashoffset: 1312;
+  }
+  40%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_3 {
+  12% {
+    stroke-dashoffset: 14;
+  }
+  45%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_4 {
+  15% {
+    stroke-dashoffset: 14;
+  }
+  50%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_5 {
+  15.74% {
+    stroke-dashoffset: 336;
+  }
+  43.52%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_6 {
+  16.67% {
+    stroke-dashoffset: 103;
+  }
+  44.44%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_7 {
+  17.59% {
+    stroke-dashoffset: 103;
+  }
+  45.37%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_8 {
+  18.52% {
+    stroke-dashoffset: 103;
+  }
+  46.3%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_9 {
+  19.44% {
+    stroke-dashoffset: 373;
+  }
+  47.22%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_10 {
+  20.37% {
+    stroke-dashoffset: 97;
+  }
+  48.15%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_11 {
+  21.3% {
+    stroke-dashoffset: 185;
+  }
+  49.07%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_12 {
+  22.22% {
+    stroke-dashoffset: 170;
+  }
+  50%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_13 {
+  23.15% {
+    stroke-dashoffset: 1021;
+  }
+  50.93%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_14 {
+  24.07% {
+    stroke-dashoffset: 940;
+  }
+  51.85%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes IEA_draw_15 {
+  25% {
+    stroke-dashoffset: 327;
+  }
+  52.78%, 100% {
+    stroke-dashoffset: 0;
+  }
+}
+/* Minimalist three-dot indicator */
+.search-pending__dots {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.search-pending__dot {
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #000;
+  animation: dot-bounce 1.2s ease-in-out infinite;
+}
+.search-pending__dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.search-pending__dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes dot-bounce {
+  0%, 80%, 100% {
+    opacity: 0.15;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 0.7;
+    transform: translateY(-4px);
+  }
+}
 </style>

package/dist/runtime/components/misc/atoms/ImageContainer.vue

@@ -8,7 +8,10 @@
     <v-skeleton-loader v-if="loading" height="100%" type="image" />
 
     <template v-else>
-      <div class="overflow-hidden mw-100">
+      <div
+        class="overflow-hidden"
+        :style="width ? `width: ${width}px; height: ${Math.round(width / ratio)}px; max-width: 100%` : 'max-width: 100%'"
+      >
         <!--  TODO debug why the picture is not displaying/sizing properly -->
         <v-img
           v-if="src && computedSrc"

package/dist/runtime/components/news/DenseItem.vue

@@ -1,5 +1,13 @@
 <template>
   <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover pa-2">
+    <v-col v-if="mdAndUp" cols="1">
+      <MiscAtomsDateStamp
+        v-if="item.date"
+        :loading
+        :date-start="item.date"
+        class="pr-4"
+      />
+    </v-col>
     <v-col v-if="mdAndUp" align-self="center" cols="1">
       <MiscAtomsImageContainer
         cover
@@ -8,7 +16,7 @@
           item && item.image && item.image.url ? item.image.url : '/default.png'
         "
         :ratio="1 / 1"
-        :width="70"
+        :width="80"
       />
     </v-col>
     <v-col align-self="start" class="text-h5 dense mx-2 paragraph">
@@ -36,12 +44,8 @@
         </template>
         <div
           v-html="
-            rootStore.search.length
-              ? highlightAndTruncate(
-                  300,
-                  item.name,
-                  rootStore.search.split(' '),
-                )
+            searchQuery.length
+              ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
               : item.name
           "
         />
@@ -54,10 +58,17 @@
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
 import { highlightAndTruncate } from "../../composables/useUtils"
-import { computed } from "#imports"
+import { computed, useRoute, useNuxtApp } from "#imports"
 
 const { name, mdAndUp } = useDisplay()
 const rootStore = useRootStore()
+const { name: routeName } = useRoute()
+const { $stores } = useNuxtApp()
+const searchQuery = computed(() =>
+  routeName.startsWith("search")
+    ? rootStore.search
+    : $stores["news"].search || "",
+)
 
 const props = defineProps({
   item: {

package/dist/runtime/components/news/RowsItem.vue

@@ -36,9 +36,14 @@
           <br />
         </template>
 
-        <div class="text-wrap text-h5 text-md-h4 text-black">
-          {{ item.name }}
-        </div>
+        <div
+          class="text-wrap text-h5 text-md-h4 text-black"
+          v-html="
+            searchQuery.length
+              ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
+              : item.name
+          "
+        />
         <div class="tex-overline mt-3">
           {{ formatDateValue(item.date, locale) }}
         </div>
@@ -104,11 +109,19 @@
 <script setup>
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
-import { useI18n, computed } from "#imports"
+import { useI18n, computed, useRoute, useNuxtApp } from "#imports"
+import { highlightAndTruncate } from "../../composables/useUtils"
 
 const { locale } = useI18n()
 const rootStore = useRootStore()
 const { name, smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay()
+const { $stores } = useNuxtApp()
+const { name: routeName } = useRoute()
+const searchQuery = computed(() =>
+  routeName.startsWith("search")
+    ? rootStore.search
+    : $stores["news"].search || "",
+)
 const eventCategory = computed(() => {
   if (props.item.category) {
     return "list.filters.news.category." + props.item.category
@@ -138,8 +151,10 @@ const props = defineProps({
 
 const processedSummary = computed(() => {
   const raw = props.item.summary || ""
-
-  return replaceMarkdownLinksWithSlug(raw, props.path)
+  const linked = replaceMarkdownLinksWithSlug(raw, props.path)
+  return searchQuery.value.length
+    ? highlightAndTruncate(500, linked, searchQuery.value.split(" "))
+    : linked
 })
 
 function replaceMarkdownLinksWithSlug(markdownText, slugPath) {

package/dist/runtime/components/people/Badges.vue

@@ -11,7 +11,7 @@
             v-for="(vintage, index2) in item.groups.vintage"
             :key="index2"
             size="small"
-            class="mt-3 mr-3"
+            class="mt-3 mr-1 mr-md-3"
             variant="outlined"
             tile
             style="background-color: white; color: black"

package/dist/runtime/components/people/DenseItem.vue

@@ -1,6 +1,6 @@
 <template>
   <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover">
-    <v-col v-if="mdAndUp" cols="1">
+    <v-col v-if="mdAndUp" cols="1" :offset="name.startsWith('search') ? 1 : 0">
       <MiscAtomsImageContainer
         cover
         :loading="loading"
@@ -8,20 +8,23 @@
           item && item.image && item.image.url ? item.image.url : '/default.png'
         "
         :ratio="1 / 1"
-        :width="70"
+        :width="80"
         class="ma-1"
       />
     </v-col>
-    <v-col align-self="start" class="text-h6 dense px-2">
+    <v-col align-self="start" class="text-sm-h6 dense">
       <v-skeleton-loader v-if="loading" type="heading" />
-      <div v-else class="d-flex text-h5 align-center">
+      <div
+        v-else
+        class="d-flex justify-space-between text-title text-md-h5 align-center"
+      >
         <span
           v-html="
-            rootStore.search.length
+            searchQuery.length
               ? highlightAndTruncate(
                   300,
                   item.firstname + ' ' + item.lastname,
-                  rootStore.search.split(' '),
+                  searchQuery.split(' '),
                 )
               : item.firstname + ' ' + item.lastname
           "
@@ -33,15 +36,30 @@
         v-if="item.group && item.groups.vintage && item.groups.vintage[0].theme"
         class="text-body-1 font-weight-light paragraph"
         v-html="
-          rootStore.search.length
+          searchQuery.length
             ? highlightAndTruncate(
                 300,
                 item.groups.vintage[0].theme,
-                rootStore.search.split(' '),
+                searchQuery.split(' '),
               )
             : item.groups.vintage[0].theme
         "
       />
+      <div
+        v-if="item.summary && mdAndUp"
+        class="text-body-1 font-weight-light paragraph"
+        :style="
+          '-webkit-line-clamp:' +
+          [1, 1, 1, 2, 3, 3][
+            ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(displayName || 'md')
+          ]
+        "
+        v-html="
+          searchQuery.length
+            ? highlightAndTruncate(100, item.summary, searchQuery.split(' '))
+            : item.summary
+        "
+      />
     </v-col>
   </v-row>
 </template>
@@ -49,11 +67,16 @@
 <script setup>
 import { useRootStore } from "../../stores/root"
 import { highlightAndTruncate } from "../../composables/useUtils"
-import { computed } from "#imports"
+import { computed, useRoute, useNuxtApp } from "#imports"
 import { useDisplay } from "vuetify"
+const { name } = useRoute()
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, name: displayName } = useDisplay()
 const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const searchQuery = computed(() =>
+  name.startsWith("search") ? rootStore.search : $stores["people"].search || "",
+)
 const props = defineProps({
   item: {
     type: Object,
@@ -72,5 +95,5 @@ const props = defineProps({
 })
 </script>
 <style>
-.paragraph{max-width:83ch!important}
+.paragraph{display:-webkit-box;max-width:83ch!important;-webkit-box-orient:vertical;overflow:hidden}
 </style>

package/dist/runtime/components/people/RowsItem.vue

@@ -26,17 +26,22 @@
       />
 
       <div v-else class="ml-md-8">
-        <div class="text-wrap text-h5 text-md-h4 text-black">
-          {{ item.firstname + " " + item.lastname }}
-        </div>
+        <div
+          class="text-wrap text-h5 text-md-h4 text-black"
+          v-html="
+            searchQuery.length
+              ? highlightAndTruncate(300, item.firstname + ' ' + item.lastname, searchQuery.split(' '))
+              : item.firstname + ' ' + item.lastname
+          "
+        />
         <MiscAtomsSocials v-if="item.socials" :socials="item.socials" />
         <PeoplepBadges :item="item" />
         <div
-          v-if="item.biography && item.biography.length > 0"
+          v-if="item.summary && item.summary.length > 0"
           class="text-wrap clamped-text text-black"
           :style="'-webkit-line-clamp:' + lineClamp"
         >
-          <MDC :value="item.biography" />
+          <MDC :value="searchQuery.length ? highlightAndTruncate(500, item.summary, searchQuery.split(' ')) : item.summary" />
         </div>
 
         <div v-else class="text-body-2">
@@ -49,9 +54,17 @@
 
 <script setup>
 import { useDisplay } from "vuetify"
-import { computed } from "#imports"
+import { computed, useRoute, useNuxtApp } from "#imports"
+import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 
 const { name, mdAndUp } = useDisplay()
+const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const { name: routeName } = useRoute()
+const searchQuery = computed(() =>
+  routeName.startsWith('search') ? rootStore.search : ($stores['people'].search || '')
+)
 
 const props = defineProps({
   item: {

package/dist/runtime/components/projects/DenseItem.vue

@@ -1,6 +1,11 @@
 <template>
-  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover px-4">
-    <v-col v-if="mdAndUp" align-self="center" cols="1">
+  <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover">
+    <v-col
+      v-if="mdAndUp"
+      align-self="center"
+      cols="1"
+      :offset="name.startsWith('search') ? 1 : 0"
+    >
       <MiscAtomsImageContainer
         cover
         :loading="loading"
@@ -8,16 +13,16 @@
           item && item.image && item.image.url ? item.image.url : '/default.png'
         "
         :ratio="1 / 1"
-        :width="70"
+        :width="80"
       />
     </v-col>
-    <v-col align-self="center" class="text-h5 dense pl-4 pt-2">
+    <v-col align-self="center" class="text-h5 dense pt-2">
       <v-skeleton-loader v-if="loading" type="heading" width="50%" />
       <span
         v-else
         v-html="
-          rootStore.search.length
-            ? highlightAndTruncate(300, item.name, rootStore.search.split(' '))
+          searchQuery.length
+            ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
             : item.name
         "
       />
@@ -36,7 +41,7 @@
         :value="`${highlightAndTruncate(
           150,
           item.summary,
-          rootStore.search.split(' '),
+          searchQuery.split(' '),
         )}`"
       />
     </v-col>
@@ -47,10 +52,17 @@
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
 import { highlightAndTruncate } from "../../composables/useUtils"
-
+import { useRoute, useNuxtApp, computed } from "#imports"
 const { mdAndUp } = useDisplay()
+const { name } = useRoute()
 
 const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const searchQuery = computed(() =>
+  name.startsWith("search")
+    ? rootStore.search
+    : $stores["projects"].search || "",
+)
 const props = defineProps({
   item: {
     type: Object,

package/dist/runtime/components/projects/RowsItem.vue

@@ -23,9 +23,14 @@
       />
 
       <template v-else>
-        <div class="text-h5 text-sm-h3 text-md-h4 text-md-h4 my-6">
-          {{ item.name }}
-        </div>
+        <div
+          class="text-h5 text-sm-h3 text-md-h4 text-md-h4 my-6"
+          v-html="
+            searchQuery.length
+              ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
+              : item.name
+          "
+        />
         <div
           v-if="item.summary"
           class="mt-n3 text-wrap clamped-text"
@@ -36,7 +41,17 @@
             ]
           "
         >
-          <MDC :value="item.summary" />
+          <MDC
+            :value="
+              searchQuery.length
+                ? highlightAndTruncate(
+                    500,
+                    item.summary,
+                    searchQuery.split(' '),
+                  )
+                : item.summary
+            "
+          />
         </div>
 
         <v-btn
@@ -54,7 +69,7 @@
         <v-btn
           variant="outlined"
           tile
-          class="mt-4 ml-4"
+          class="mt-4 ml-0 ml-md-4"
           prepend-icon="mdi-web"
           :size="
             ['small', 'small', 'small', 'default', 'default', 'large'][
@@ -67,13 +82,24 @@
       </template>
     </v-col>
   </v-row>
-  <v-divider />
+  <v-divider class="my-6" />
 </template>
 
 <script setup>
 import { useDisplay } from "vuetify"
+import { computed, useRoute, useNuxtApp } from "#imports"
+import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 
 const { name } = useDisplay()
+const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const { name: routeName } = useRoute()
+const searchQuery = computed(() =>
+  routeName.startsWith("search")
+    ? rootStore.search
+    : $stores["projects"].search || "",
+)
 
 const props = defineProps({
   item: {

package/dist/runtime/components/projects/View.vue

@@ -80,7 +80,7 @@
           ]
         "
       />
-      <div v-if="item && item.description" class="mt-md-n2 mx-10 mx-md-0">
+      <div v-if="item && item.description" class="mt-md-n2">
         <MDC :value="item.description" />
       </div>
     </v-col>

package/dist/runtime/components/publications/DenseItem.vue

@@ -1,6 +1,11 @@
 <template>
   <v-row v-ripple no-gutters class="cursor-pointer highlight-on-hover my-2">
-    <v-col v-if="mdAndUp" cols="1" class="align-center">
+    <v-col
+      v-if="mdAndUp"
+      cols="1"
+      class="align-center"
+      :offset="name.startsWith('search') ? 1 : 0"
+    >
       <MiscAtomsImageContainer
         cover
         :loading="loading"
@@ -8,7 +13,7 @@
           item && item.image && item.image.url ? item.image.url : '/default.png'
         "
         :ratio="1 / 1"
-        :width="70"
+        :width="80"
       />
     </v-col>
     <v-col class="pl-2">
@@ -44,12 +49,8 @@
           v-else
           class="text-h5 dense paragraph"
           v-html="
-            rootStore.search.length
-              ? highlightAndTruncate(
-                  300,
-                  item.name,
-                  rootStore.search.split(' '),
-                )
+            searchQuery.length
+              ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
               : item.name
           "
         />
@@ -61,7 +62,7 @@
           :value="`${highlightAndTruncate(
             150,
             item.summary,
-            rootStore.search.split(' '),
+            searchQuery.split(' '),
           )}`"
         />
       </div> </v-col
@@ -72,9 +73,15 @@
 import { useDisplay } from "vuetify"
 import { useRootStore } from "../../stores/root"
 import { highlightAndTruncate } from "../../composables/useUtils"
-import { computed } from "#imports"
+import { computed, useRoute, useNuxtApp } from "#imports"
 const rootStore = useRootStore()
-
+const { name } = useRoute()
+const { $stores } = useNuxtApp()
+const searchQuery = computed(() =>
+  name.startsWith("search")
+    ? rootStore.search
+    : $stores["publications"].search || "",
+)
 const { mdAndUp } = useDisplay()
 const props = defineProps({
   item: {

package/dist/runtime/components/publications/RowsItem.vue

@@ -25,9 +25,14 @@
 
         <template v-else>
           <div v-if="item.type" class="text-overline">{{ $t(item.type) }}</div>
-          <div class="text-h5 text-sm-h3 text-md-h4 text-md-h4 my-6">
-            {{ item.name }}
-          </div>
+          <div
+            class="text-h5 text-sm-h3 text-md-h4 text-md-h4 my-6"
+            v-html="
+              searchQuery.length
+                ? highlightAndTruncate(300, item.name, searchQuery.split(' '))
+                : item.name
+            "
+          />
           <div
             v-if="item.summary"
             class="text-wrap clamped-text"
@@ -38,7 +43,7 @@
               ]
             "
           >
-            <MDC :value="item.summary" />
+            <MDC :value="searchQuery.length ? highlightAndTruncate(500, item.summary, searchQuery.split(' ')) : item.summary" />
           </div>
           <v-btn
             class="mt-4"
@@ -77,8 +82,17 @@
 
 <script setup>
 import { useDisplay } from "vuetify"
+import { computed, useRoute, useNuxtApp } from "#imports"
+import { useRootStore } from "../../stores/root"
+import { highlightAndTruncate } from "../../composables/useUtils"
 
 const { name } = useDisplay()
+const rootStore = useRootStore()
+const { $stores } = useNuxtApp()
+const { name: routeName } = useRoute()
+const searchQuery = computed(() =>
+  routeName.startsWith('search') ? rootStore.search : ($stores['publications'].search || '')
+)
 
 const props = defineProps({
   item: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "AGPL-3.0-only",
   "main": "./dist/module.mjs",
-  "version": "1.0.185",
+  "version": "1.0.187",
   "name": "@paris-ias/list",
   "repository": {
     "url": "git+https://github.com/IEA-Paris/list.git",