dumili: Scroll to page in gallery view when changing page

apps/dumili/src/components/Entry.vue

@@ -232,6 +232,11 @@ const getStoryKind = (storyKind: storyKind) => storyKinds[storyKind];
 :deep(.btn-group .btn),
 :deep(.dropdown-item) {
   color: black;
+
+  &:hover {
+    background: #ddd;
+  }
+
   &.kind-c {
     @include storyKindBackground(#ffcc33);
   }

apps/dumili/src/components/Gallery.vue

@@ -10,7 +10,8 @@
       class="overflow-y-auto"
     >
       <b-col
-        v-for="{ url, id } of images"
+        v-for="({ url, id }, idx) of images"
+        :id="`page-image-${idx}`"
         :key="id"
         class="position-relative d-flex justify-content-center align-items-center p-3 pb-5 border"
         :class="{ selectable, selected: selectedId === id }"
@@ -34,6 +35,7 @@ import {
 } from "@vueuse/integrations/useSortable";
 
 import { dumiliSocketInjectionKey } from "~/composables/useDumiliSocket";
+import { ui } from "~/stores/ui";
 
 const { indexationSocket } = inject(dumiliSocketInjectionKey)!;
 
@@ -74,6 +76,13 @@ watch(selectedId, (id) => {
     emit("selected", id);
   }
 });
+
+watch(
+  () => ui().currentPage,
+  (currentPage) => {
+    document.getElementById(`page-image-${currentPage}`)?.scrollIntoView();
+  },
+);
 </script>
 <style scoped lang="scss">
 .col {

apps/dumili/src/components/SuggestionList.vue

@@ -23,6 +23,10 @@
           'justify-content-between',
           'align-items-center',
           ...((itemClass && itemClass(suggestion)) || []),
+          ...((current?.id === suggestion.id &&
+            selectedItemClass &&
+            selectedItemClass(suggestion)) ||
+            []),
         ]"
         @click="
           current = suggestion;
@@ -79,10 +83,12 @@ const { suggestions, isAiSource } = withDefaults(
     suggestions: S[];
     isAiSource: (suggestion: S) => boolean;
     itemClass?: (suggestion: S) => string[];
+    selectedItemClass?: (suggestion: S) => string[];
     showCustomizeForm?: boolean;
   }>(),
   {
-    itemClass: undefined,
+    itemClass: () => [],
+    selectedItemClass: () => ["selected"],
     showCustomizeForm: false,
   },
 );
@@ -107,4 +113,10 @@ const userSuggestions = computed(() =>
 .dropdown-divider {
   border-color: white;
 }
+
+.dropdown-item {
+  &.selected {
+    background: #eee;
+  }
+}
 </style>

apps/dumili/src/components/TableOfContents.vue

@@ -11,7 +11,7 @@
       <b-dropdown
         v-if="indexation.acceptedIssueSuggestion"
         variant="light"
-        class="position-absolute m-4 top-0 end-0"
+        class="position-absolute m-4 top-0 end-0 z-2"
       >
         <template #button-content>{{ $t("Méta-données") }}</template>
         <b-dropdown-item
@@ -93,7 +93,7 @@
             :grid="[1, pageHeight]"
             :h="entry.entirepages * pageHeight"
             :min-height="pageHeight - 1"
-            :class-name="`entry col w-100 kind-${entry.acceptedStoryKind?.kind} ${hoveredEntry === entry && 'striped'} ${currentEntry?.id === entry.id && 'current'}`"
+            :class-name="`entry col w-100 border kind-${entry.acceptedStoryKind?.kind} ${(hoveredEntry === entry && 'striped') || ''} ${(currentEntry?.id === entry.id && 'border-2') || 'border-1'}`"
             :title="`${entry.title || 'Inconnu'} (${getUserFriendlyPageCount(
               entry,
             )})`"
@@ -163,7 +163,7 @@ const { indexationSocket } = inject(dumiliSocketInjectionKey)!;
 const { loadIndexation } = suggestions();
 const { hoveredEntry, currentEntry, showAiDetectionsOn } = storeToRefs(ui());
 const indexation = storeToRefs(suggestions()).indexation as Ref<FullIndexation>;
-const currentPage = defineModel<number>();
+const { currentPage } = storeToRefs(ui());
 
 const { runKumikoOnPage, runKumiko } = useAi();
 
@@ -289,14 +289,9 @@ watch(
 }
 
 :deep(.entry) {
-  outline: 1px solid black;
   margin-top: 1px;
   cursor: pointer;
 
-  &.current {
-    outline-width: 2px;
-  }
-
   &:first-child {
     margin-top: 0;
   }

apps/dumili/src/pages/indexation/[id].vue

@@ -23,7 +23,7 @@
         v-else-if="activeTab === 'book' && coverRatio"
         ref="bookComponent"
         v-model:book="book"
-        v-model:current-page="bookCurrentPage"
+        v-model:current-page="currentPage"
         v-model:opened="isBookOpened"
         :cover-ratio="coverRatio"
         :pages="indexation.pages.filter(({ url }) => url)"
@@ -79,11 +79,7 @@
     </b-col>
 
     <b-col :cols="6" class="h-100">
-      <table-of-contents
-        v-model="bookCurrentPage"
-        :indexation="indexation"
-        :shown-pages="shownPages"
-      />
+      <table-of-contents :indexation="indexation" :shown-pages="shownPages" />
     </b-col>
   </b-row>
 </template>
@@ -93,14 +89,13 @@ import { components as webComponents, type PageFlip } from "~web";
 import { suggestions } from "~/stores/suggestions";
 import { tabs } from "~/stores/tabs";
 import { ui } from "~/stores/ui";
-import { FullIndexation } from "~dumili-services/indexation/types";
-import { aiKumikoResultPanel, aiOcrResult } from "~prisma/client_dumili";
+import type { FullIndexation } from "~dumili-services/indexation/types";
+import type { aiKumikoResultPanel, aiOcrResult } from "~prisma/client_dumili";
 import { getEntryPages } from "~dumili-utils/entryPages";
 
 const { Book } = webComponents;
 
 const book = ref<PageFlip | undefined>(undefined);
-const bookCurrentPage = ref(0);
 const isBookOpened = ref(true);
 const reRenderNumber = ref();
 
@@ -109,8 +104,12 @@ const route = useRoute();
 
 const { t: $t } = useI18n();
 
-const { hoveredEntry, hoveredEntryPageNumbers, showAiDetectionsOn } =
-  storeToRefs(ui());
+const {
+  hoveredEntry,
+  hoveredEntryPageNumbers,
+  currentPage,
+  showAiDetectionsOn,
+} = storeToRefs(ui());
 const { activeTab } = storeToRefs(tabs());
 const activeTabIndex = computed({
   get() {
@@ -161,7 +160,7 @@ const shownPages = computed(() =>
   book.value?.getPageCollection()
     ? [
         ...new Set([
-          bookCurrentPage.value,
+          currentPage.value,
           book.value!.getPageCollection().getCurrentSpreadIndex() * 2,
         ]),
       ]

apps/dumili/src/stores/ui.ts

@@ -7,6 +7,7 @@ export const ui = defineStore("ui", () => {
   const { indexation } = storeToRefs(suggestions());
   const hoveredEntry = ref<FullEntry | null>(null);
   const currentEntry = ref<FullEntry>();
+  const currentPage = ref(0);
 
   watch(
     indexation,
@@ -20,6 +21,7 @@ export const ui = defineStore("ui", () => {
     showAiDetectionsOn: ref<{ type: "page" | "entry"; id: number } | undefined>(
       undefined,
     ),
+    currentPage,
     currentEntry,
     hoveredEntry,
     hoveredEntryPageNumbers: computed(