From 30bcd2d747ebbea20c184601d5e7dce6d689da58 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 24 Jul 2026 18:05:05 +0800
Subject: [PATCH] extract into composable

---
 next-ui/src/components/OverviewSection.vue    | 107 +-----------------
 next-ui/src/composables/section.ts            | 107 ++++++++++++++++++
 .../libraries/[id]/overview/[section].vue     |  15 +--
 3 files changed, 112 insertions(+), 117 deletions(-)
 create mode 100644 next-ui/src/composables/section.ts

diff --git a/next-ui/src/components/OverviewSection.vue b/next-ui/src/components/OverviewSection.vue
index b4f159eb..f832374e 100644
--- a/next-ui/src/components/OverviewSection.vue
+++ b/next-ui/src/components/OverviewSection.vue
@@ -36,19 +36,9 @@
 
 <script setup lang="ts">
 import { type LibraryViewId } from '@/types/libraries'
-import { bookListQueryInfinite, booksOnDeckQueryInfinite } from '@/colada/books'
-import { valuesToConditions } from '@/functions/filter'
 import { useGetLibrariesByViewId } from '@/composables/libraries'
-import { ReadStatus } from '@/types/ReadStatus'
-import type {
-  BookDto,
-  PageBookDto,
-  PageSeriesDto,
-  SearchConditionBook,
-  SearchConditionSeries,
-  SeriesDto,
-} from '@/generated/openapi'
-import { seriesListQueryInfinite, seriesUpdatedQueryInfinite } from '@/colada/series'
+import { useOverviewSection } from '@/composables/section'
+import type { BookDto, PageBookDto, PageSeriesDto, SeriesDto } from '@/generated/openapi'
 import { useInfiniteQuery } from '@pinia/colada'
 import { overviewSectionMessages } from '@/types/OverviewSection'
 import { useAppStore } from '@/stores/app'
@@ -67,98 +57,9 @@ const { libraryIds } = useGetLibrariesByViewId(props.libraryViewId)
 
 const cardWidth = computed(() => (display.smAndUp.value ? appStore.gridCardWidth : 130))
 
-const kind = computed(() => {
-  switch (props.section.section) {
-    case 'keep_reading':
-    case 'on_deck':
-    case 'recently_released_books':
-    case 'recently_added_books':
-    case 'recently_read_books':
-      return 'book'
-    case 'recently_added_series':
-    case 'recently_updated_series':
-      return 'series'
-  }
-})
+const { queryOptions, kind } = useOverviewSection(props.section.section, libraryIds)
 
-function getQueryOptions() {
-  switch (props.section.section) {
-    case 'keep_reading':
-      return bookListQueryInfinite({
-        search: {
-          condition: {
-            allOf: [
-              valuesToConditions(libraryIds.value, 'libraryId'),
-              { readStatus: { operator: 'is', value: ReadStatus.InProgress } },
-            ].filter(Boolean) as SearchConditionBook[],
-          },
-        },
-        sort: [{ key: 'readProgress.readDate', order: 'desc' }],
-      })
-    case 'on_deck':
-      return booksOnDeckQueryInfinite({
-        libraryIds: libraryIds.value,
-      })
-    case 'recently_released_books':
-      return bookListQueryInfinite({
-        search: {
-          condition: {
-            allOf: [
-              valuesToConditions(libraryIds.value, 'libraryId'),
-              {
-                releaseDate: {
-                  operator: 'after',
-                  dateTime: new Date(new Date().setMonth(new Date().getMonth() - 1)),
-                },
-              },
-            ].filter(Boolean) as SearchConditionBook[],
-          },
-        },
-        sort: [{ key: 'metadata.releaseDate', order: 'desc' }],
-      })
-    case 'recently_added_books':
-      return bookListQueryInfinite({
-        search: {
-          condition: {
-            allOf: [valuesToConditions(libraryIds.value, 'libraryId')].filter(
-              Boolean,
-            ) as SearchConditionBook[],
-          },
-        },
-        sort: [{ key: 'createdDate', order: 'desc' }],
-      })
-    case 'recently_read_books':
-      return bookListQueryInfinite({
-        search: {
-          condition: {
-            allOf: [
-              valuesToConditions(libraryIds.value, 'libraryId'),
-              { readStatus: { operator: 'is', value: ReadStatus.Read } },
-            ].filter(Boolean) as SearchConditionBook[],
-          },
-        },
-        sort: [{ key: 'readProgress.readDate', order: 'desc' }],
-      })
-    case 'recently_added_series':
-      return seriesListQueryInfinite({
-        search: {
-          condition: {
-            allOf: [
-              valuesToConditions(libraryIds.value, 'libraryId'),
-              { oneshot: { operator: 'isFalse' } },
-            ].filter(Boolean) as SearchConditionSeries[],
-          },
-        },
-        sort: [{ key: 'createdDate', order: 'desc' }],
-      })
-    case 'recently_updated_series':
-      return seriesUpdatedQueryInfinite({
-        libraryIds: libraryIds.value,
-      })
-  }
-}
-
-const { data, hasNextPage, loadNextPage } = useInfiniteQuery(() => getQueryOptions() as never)
+const { data, hasNextPage, loadNextPage } = useInfiniteQuery(() => queryOptions.value as never)
 
 const items = computed(() => {
   const pages = data.value?.pages as (PageBookDto | PageSeriesDto)[] | undefined
diff --git a/next-ui/src/composables/section.ts b/next-ui/src/composables/section.ts
new file mode 100644
index 00000000..25a6962e
--- /dev/null
+++ b/next-ui/src/composables/section.ts
@@ -0,0 +1,107 @@
+import { toValue, type MaybeRefOrGetter } from 'vue'
+import { bookListQueryInfinite, booksOnDeckQueryInfinite } from '@/colada/books'
+import { valuesToConditions } from '@/functions/filter'
+import { ReadStatus } from '@/types/ReadStatus'
+import type { SearchConditionBook, SearchConditionSeries } from '@/generated/openapi'
+import { seriesListQueryInfinite, seriesUpdatedQueryInfinite } from '@/colada/series'
+import type { OverviewSection } from '@/types/OverviewSection'
+
+export function useOverviewSection(
+  section: MaybeRefOrGetter<OverviewSection>,
+  libraryIds: MaybeRefOrGetter<string[] | undefined>,
+) {
+  const queryOptions = computed(() => {
+    const libIds = toValue(libraryIds)
+
+    switch (toValue(section)) {
+      case 'keep_reading':
+        return bookListQueryInfinite({
+          search: {
+            condition: {
+              allOf: [
+                valuesToConditions(libIds, 'libraryId'),
+                { readStatus: { operator: 'is', value: ReadStatus.InProgress } },
+              ].filter(Boolean) as SearchConditionBook[],
+            },
+          },
+          sort: [{ key: 'readProgress.readDate', order: 'desc' }],
+        })
+      case 'on_deck':
+        return booksOnDeckQueryInfinite({
+          libraryIds: libIds,
+        })
+      case 'recently_released_books':
+        return bookListQueryInfinite({
+          search: {
+            condition: {
+              allOf: [
+                valuesToConditions(libIds, 'libraryId'),
+                {
+                  releaseDate: {
+                    operator: 'after',
+                    dateTime: new Date(new Date().setMonth(new Date().getMonth() - 1)),
+                  },
+                },
+              ].filter(Boolean) as SearchConditionBook[],
+            },
+          },
+          sort: [{ key: 'metadata.releaseDate', order: 'desc' }],
+        })
+      case 'recently_added_books':
+        return bookListQueryInfinite({
+          search: {
+            condition: {
+              allOf: [valuesToConditions(libIds, 'libraryId')].filter(
+                Boolean,
+              ) as SearchConditionBook[],
+            },
+          },
+          sort: [{ key: 'createdDate', order: 'desc' }],
+        })
+      case 'recently_read_books':
+        return bookListQueryInfinite({
+          search: {
+            condition: {
+              allOf: [
+                valuesToConditions(libIds, 'libraryId'),
+                { readStatus: { operator: 'is', value: ReadStatus.Read } },
+              ].filter(Boolean) as SearchConditionBook[],
+            },
+          },
+          sort: [{ key: 'readProgress.readDate', order: 'desc' }],
+        })
+      case 'recently_added_series':
+        return seriesListQueryInfinite({
+          search: {
+            condition: {
+              allOf: [
+                valuesToConditions(libIds, 'libraryId'),
+                { oneshot: { operator: 'isFalse' } },
+              ].filter(Boolean) as SearchConditionSeries[],
+            },
+          },
+          sort: [{ key: 'createdDate', order: 'desc' }],
+        })
+      case 'recently_updated_series':
+        return seriesUpdatedQueryInfinite({
+          libraryIds: libIds,
+        })
+    }
+  })
+
+  const kind = computed(() => {
+    switch (toValue(section)) {
+      case 'keep_reading':
+      case 'on_deck':
+      case 'recently_released_books':
+      case 'recently_added_books':
+      case 'recently_read_books':
+        return 'book'
+      case 'recently_added_series':
+      case 'recently_updated_series':
+        return 'series'
+    }
+  })
+
+  return { queryOptions, kind }
+}
diff --git a/next-ui/src/pages/libraries/[id]/overview/[section].vue b/next-ui/src/pages/libraries/[id]/overview/[section].vue
index ff23542e..45689204 100644
--- a/next-ui/src/pages/libraries/[id]/overview/[section].vue
+++ b/next-ui/src/pages/libraries/[id]/overview/[section].vue
@@ -11,20 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { OverviewSectionsDefault, OverviewSectionValues } from '@/types/OverviewSection'
-import PosterSizeSlider from '@/components/PosterSizeSlider.vue'
-import { useClientSettingsUser, useUpdateClientSettingsUser } from '@/colada/client-settings'
-import {
-  ClientSettingUser,
-  type ClientSettingUserOverviewSection,
-} from '@/types/ClientSettingsUser'
-import { storeToRefs } from 'pinia'
-import { useDialogsStore } from '@/stores/dialogs'
-import { commonMessages } from '@/utils/i18n/common-messages'
-import { defineMessage, useIntl } from 'vue-intl'
-import { useDisplay } from 'vuetify'
-import ReorderOverviewSections from '@/components/ReorderOverviewSections.vue'
-import { useMessagesStore } from '@/stores/messages'
+import { OverviewSectionValues } from '@/types/OverviewSection'
 import type { RouteLocationRaw } from 'vue-router'
 
 const route = useRoute('/libraries/[id]/overview/[section]')