dumili: Highlight hovered entry in book

apps/dumili/src/components/Book.vue

@@ -30,6 +30,10 @@
                   marginLeft: 0,
                 }"
               >
+                <div
+                  v-if="hoveredEntry"
+                  :class="`position-absolute start-0 w-100 h-100 striped kind-${acceptedStoryKinds[hoveredEntry.id]?.kind}`"
+                ></div>
                 <template v-if="displayRatioCropped && naturalToDisplayRatio">
                   <div
                     v-for="(shownPage, idx) in shownPages.map(
@@ -138,6 +142,7 @@
 import { PageFlip } from "page-flip";
 
 import { suggestions } from "~/stores/suggestions";
+import { ui } from "~/stores/ui";
 
 let book = ref<PageFlip | null>(null);
 const coverWidth = ref<number | null>(null);
@@ -146,7 +151,8 @@ const currentPage = ref(0);
 
 defineProps<{ indexationId: string }>();
 
-const { indexation } = storeToRefs(suggestions());
+const { indexation, acceptedStoryKinds } = storeToRefs(suggestions());
+const { hoveredEntry } = storeToRefs(ui());
 
 const isSinglePage = computed(() => indexation.value?.pages.length === 1);
 const displayedWidth = computed(() => book.value?.getSettings().width);

apps/dumili/src/components/Entry.vue

@@ -1,7 +1,7 @@
 <template>
   <b-row class="d-flex w-100 align-items-center">
     <template v-if="editable">
-      <b-col cols="3">
+      <b-col col cols="3">
         <suggestion-list
           :suggestions="entry.storyKindSuggestions"
           :is-ai-source="(suggestion) => suggestion.aiSourcePageId !== null"
@@ -14,14 +14,14 @@
           </template>
           <template #unknown-text>{{ $t("Type inconnu") }}</template>
         </suggestion-list> </b-col
-      ><b-col cols="3"><StorySuggestionList :entry="entry" /></b-col>
-      <b-col cols="3">
+      ><b-col col cols="3"><StorySuggestionList :entry="entry" /></b-col>
+      <b-col col cols="3">
         <b-form-input
           placeholder="Titre de l'histoire"
           type="text"
           class="w-100"
           :value="entry.title || ''" /></b-col
-      ><b-col cols="3">
+      ><b-col col cols="3">
         <b-button
           class="d-flex w-100 justify-content-between"
           :disabled="!(storyAiSuggestions.length || storyKindAiSuggestion)"
@@ -35,7 +35,7 @@
         </b-button>
       </b-col>
       <template v-if="showAiDetectionsOn">
-        <b-col cols="3" class="text-start white-space-normal">
+        <b-col col cols="3" class="text-start white-space-normal">
           <div>
             {{
               $t("{numberOfPanels} cases trouvées", {
@@ -53,7 +53,7 @@
             {{ getStoryKind(storyKindAiSuggestion.kind) }}
           </div>
         </b-col>
-        <b-col cols="3" class="text-start white-space-normal">
+        <b-col col cols="3" class="text-start white-space-normal">
           <div v-if="pages[0].aiOcrResults.length">
             {{
               $t("{textNumber} textes trouvés", {
@@ -108,7 +108,7 @@
       ></template
     >
     <template v-else>
-      <b-col cols="3">
+      <b-col col cols="3">
         <b-badge
           size="xl"
           :class="{ [`kind-${acceptedStoryKind?.kind}`]: true }"
@@ -125,7 +125,7 @@
         }}</template
         ><template v-else>{{ $t("Contenu inconnu") }}</template>
       </b-col>
-      <b-col cols="6"
+      <b-col col cols="6"
         >{{ title || $t("Sans titre") }}
         <template v-if="part"> - {{ $t("partie") }} {{ part }}</template>
         <br />
@@ -144,7 +144,7 @@
 <script setup lang="ts">
 import { dumiliSocketInjectionKey } from "~/composables/useDumiliSocket";
 import { suggestions } from "~/stores/suggestions";
-import { user } from "~/stores/ui";
+import { ui } from "~/stores/ui";
 import { FullEntry } from "~dumili-services/indexation/types";
 import { storyKinds } from "~dumili-types/storyKinds";
 import type {
@@ -175,7 +175,7 @@ const pages = computed(() => {
   );
 });
 
-const { showAiDetectionsOn } = storeToRefs(user());
+const { showAiDetectionsOn } = storeToRefs(ui());
 
 const acceptedStory = computed(() => acceptedStories.value[props.entry.id]);
 
@@ -218,7 +218,8 @@ const acceptStoryKindSuggestion = (
 @use "sass:color";
 
 .col {
-  text-align: left;
+  display: flex;
+  justify-content: center;
 }
 
 :deep(.dropdown-menu) {

apps/dumili/src/components/TableOfContents.vue

@@ -3,7 +3,7 @@
     no-body
     class="table-of-contents d-flex w-50 h-100 m-0 overflow-auto"
     body-class="flex-grow-1 w-100 h-100"
-    @mouseleave="showCreateEntryButtonAfter = null"
+    @mouseleave="hoveredEntry = null"
   >
     <template #header>
       <IssueSuggestionModal />
@@ -57,7 +57,7 @@
         >
           <div style="height: 1px" class="bg-black"></div>
           <vue-draggable-resizable
-            :active="showCreateEntryButtonAfter === entry"
+            :active="hoveredEntry === entry"
             prevent-deactivation
             w="auto"
             :h="tocPageHeight * pageIds.length - 1"
@@ -67,18 +67,19 @@
             :grid="[1, tocPageHeight]"
             :max-height="tocPageHeight * pageIds.length"
             :min-height="tocPageHeight - 1"
-            :class-name="`entry-pages col w-100 kind-${
+            :class-name="`entry col w-100 kind-${
               acceptedStoryKinds[entry.id]?.kind
             }`"
             :title="`${entry.title || 'Inconnu'} (${pageIds.length} pages)`"
-            @mouseover="showCreateEntryButtonAfter = entry"
+            @mouseover="hoveredEntry = entry"
+            @mouseout="hoveredEntry = null"
             @click="
               if (entry !== currentEntry)
                 currentPage = firstPageOfEntry(pageIds);
             "
           ></vue-draggable-resizable>
           <b-button
-            v-if="showCreateEntryButtonAfter?.id === entry.id"
+            v-if="hoveredEntry?.id === entry.id"
             class="create-entry fw-bold position-absolute w-100 mt-n1 d-flex justify-content-center align-items-center"
             title="Create an entry here"
             variant="info"
@@ -132,6 +133,7 @@
 import useAi from "~/composables/useAi";
 import { dumiliSocketInjectionKey } from "~/composables/useDumiliSocket";
 import { suggestions } from "~/stores/suggestions";
+import { ui } from "~/stores/ui";
 import { FullEntry, FullIndexation } from "~dumili-services/indexation/types";
 import { entry as entryModel } from "~prisma/client_dumili";
 
@@ -142,15 +144,14 @@ defineProps<{
 const { indexationSocket } = inject(dumiliSocketInjectionKey)!;
 
 const { acceptedStoryKinds } = storeToRefs(suggestions());
+const { hoveredEntry } = storeToRefs(ui());
 const indexation = storeToRefs(suggestions()).indexation as Ref<FullIndexation>;
 const currentPage = defineModel<number>();
 
 const { status: aiStatus, runKumiko } = useAi();
 
 const tocPageHeight = 50;
 
-const showCreateEntryButtonAfter = ref<entryModel | null>(null);
-
 const entryPages = ref<{ entry: entryModel; pageIds: number[] }[]>([]);
 
 const currentEntry = ref<FullEntry | null>(null);

apps/dumili/src/components/UploadWidget.vue

@@ -41,8 +41,8 @@ const uploadWidget = cloudinary.createUploadWidget(
     showPoweredBy: false,
     sources: ["local", "url"],
     multiple: true,
-    maxFileSize: 10_000_000,
-    maxImageFileSize: 5_000_000,
+    maxFileSize: 10 * 1024 * 1024,
+    maxImageFileSize: 5 * 1024 * 1024,
     context: {
       indexation: props.folderName,
       project: "dumili",

apps/dumili/src/stores/ui.ts

@@ -1,3 +1,6 @@
-export const user = defineStore("user", () => ({
+import { entry } from "~prisma/client_dumili";
+
+export const ui = defineStore("user", () => ({
   showAiDetectionsOn: ref<number | undefined>(undefined),
+  hoveredEntry: ref<entry | null>(null),
 }));

apps/dumili/src/style.scss

@@ -104,6 +104,11 @@ button:focus-visible {
 @mixin storyKindBackground($bg) {
   background-color: $bg !important;
   color: color.invert($bg);
+
+  &.striped {
+    background-color: transparent !important;
+    background: repeating-linear-gradient(-45deg, #ffcc33, #ffcc33 1px, transparent 1px, transparent 10px)
+  }
   &.btn:hover {
     background-color: color.adjust($bg, $lightness: 10%) !important;
   }