dumili: Improve calculation and display of story search result images

Author: bperel

apps/dumili/.eslintrc-auto-import.json

@@ -15,7 +15,6 @@
     "ComputedRef": true,
     "Condition": true,
     "CopyStateWithUndefined": true,
-    "CoverSearchResults": true,
     "DirectiveBinding": true,
     "EdgeWithStringCreationDate": true,
     "EditSubscription": true,
@@ -145,6 +144,7 @@
     "useDmSocket": true,
     "useI18n": true,
     "useId": true,
+    "useLayout": true,
     "useLink": true,
     "useMedal": true,
     "useModel": true,

apps/dumili/src/components/EntryStoryKindTooltip.vue

@@ -38,7 +38,7 @@
           })) || []
         "
         ><template #empty>{{ $t("Aucune case détectée") }}</template>
-        <template #cell(storyKindRows)="row">
+        <template #cell(kind)="row">
           <story-kind-badge
             :kind="row.item.storyKindRows?.kind" /></template></b-table
       ><br />

apps/dumili/src/components/suggestions/StorySuggestionList.vue

@@ -10,15 +10,16 @@
   >
     <template #default="{ suggestion, location }">
       <b-row class="w-100" style="height: 100px">
-        <b-col cols="6" class="d-flex justify-content-center">
-          <b-img
-            v-if="storyUrls[suggestion.storycode]"
-            class="w-75"
-            :src="
-              inducksCoverRoot.replace('f_auto', 'c_crop,h_0.5,x_0,w_1') +
-              storyUrls[suggestion.storycode]
-            "
-        /></b-col>
+        <b-col
+          cols="6"
+          class="d-flex justify-content-center story-first-page"
+          :style="{
+            backgroundImage: `url(${inducksCoverRoot.replace('f_auto', 'c_crop,h_0.5,x_0,w_1') + storyUrls[suggestion.storycode]})`,
+          }"
+          @mousemove="handleImageMouseMove"
+          @mouseleave="handleImageLeave"
+        >
+        </b-col>
         <b-col
           cols="6"
           class="d-flex flex-column justify-content-center text-wrap"
@@ -183,10 +184,37 @@ const acceptStory = async (storycode: storySuggestion["storycode"] | null) => {
   }
 };
 
+const handleImageMouseMove = (event: MouseEvent) => {
+  const target = event.currentTarget as HTMLElement;
+  const rect = target.getBoundingClientRect();
+  const mouseY = event.clientY - rect.top;
+  const elementHeight = rect.height;
+
+  // Calculate percentage from top (0 = top, 1 = bottom)
+  const percentage = Math.max(0, Math.min(1, mouseY / elementHeight));
+
+  // Convert percentage to background position (0% = top, 100% = bottom)
+  const backgroundPosition = `center ${percentage * 100}%`;
+  target.style.backgroundPosition = backgroundPosition;
+};
+
+const handleImageLeave = (event: Event) => {
+  const target = event.target as HTMLElement;
+  target.style.backgroundPosition = "top center";
+};
+
 watch(
   () => entry.value.acceptedStory?.storycode || null,
   (storycode) => {
     acceptStory(storycode);
   },
 );
-</script>
+</script>
+
+<style scoped lang="scss">
+.story-first-page {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: top center;
+}
+</style>

apps/web/src/components/menus/BookcaseMenu.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 const { t: $t } = useI18n();
 const items = [
-  { route: "/bookcase/show/[[username]]", text: $t("Ma bibliothèque") },
+  { route: "/bookcase/show/[username]", text: $t("Ma bibliothèque") },
   { route: "/bookcase/options", text: $t("Options de la bibliothèque") },
   { route: "/bookcase/contributors", text: $t("Contributeurs") },
 ] as const;

packages/api/services/coa/stories/index.ts

@@ -19,14 +19,16 @@ export default {
             },
           }),
           prismaCoa.$queryRaw<{ storycode: string; url: string }[]>`
-      select s.storycode, CONCAT('webusers/webusers/', url) AS url
-      from inducks_story s
-              inner join coa.inducks_storyversion sv on s.originalstoryversioncode = sv.storyversioncode
-              inner join coa.inducks_entry e using (storyversioncode)
-              inner join coa.inducks_entryurl eu using (entrycode)
-      where s.storycode IN (${Prisma.join(storycodes)})
-        and eu.sitecode = 'webusers'
-      group by s.storycode`,
+            SELECT s.storycode,
+                   MIN(CONCAT('webusers/webusers/', eu.url)) AS url
+            FROM inducks_story s
+                     INNER JOIN coa.inducks_storyversion sv ON s.storycode = sv.storycode
+                     INNER JOIN coa.inducks_entry e USING (storyversioncode)
+                     INNER JOIN coa.inducks_entryurl eu USING (entrycode)
+            WHERE sv.storycode = s.storycode
+              AND s.storycode IN (${Prisma.join(storycodes)})
+              AND eu.sitecode = 'webusers'
+            GROUP BY s.storycode`,
         ])
           .then(([stories, storyUrls]) => ({
             stories: stories.groupBy("storycode"),