Merge pull request #591 from arabcoders/dev

Fix pagination UI and refactor presets layout

API.md

@@ -1777,6 +1777,7 @@ Binary image data with appropriate headers
 - `per_page` (optional): Items per page. Default: `config.default_pagination`.
 - `sort` (optional): Comma-separated sort fields. Accepted values: `id`, `name`, `priority`, `default`, `created_at`, `updated_at`. Default: `priority,name`.
 - `order` (optional): Comma-separated sort directions matching `sort`, or a single direction applied to every requested sort field. Accepted values: `asc`, `desc`. Default: `desc,asc`.
+- `exclude_defaults` (optional): When `true`, excludes system presets from the results. Default: `false`.
 
 **Response**:
 ```json
@@ -1806,10 +1807,9 @@ Binary image data with appropriate headers
 
 **Notes**:
 - `default: true` indicates this is a system default preset (cannot be modified or deleted)
-- Default ordering remains `priority desc, name asc`
 
 **Error Responses**:
-- `400 Bad Request` - Invalid pagination or sorting query parameters
+- `400 Bad Request` - Invalid data was provided.
 
 ---
 

app/features/presets/repository.py

@@ -180,25 +180,32 @@ class PresetsRepository(metaclass=Singleton):
         per_page: int,
         sort: str | None = None,
         order: str | None = None,
+        exclude_defaults: bool = False,
     ) -> tuple[list[PresetModel], int, int, int]:
         order_by = self._build_order_by(sort, order)
 
         async with self.session() as session:
-            total: int = await self.count()
+            total: int = await self.count(exclude_defaults=exclude_defaults)
             total_pages: int = (total + per_page - 1) // per_page if total > 0 else 1
 
             if page > total_pages and total > 0:
                 page = total_pages
 
-            query: Select[tuple[PresetModel]] = (
-                select(PresetModel).order_by(*order_by).limit(per_page).offset((page - 1) * per_page)
-            )
+            query: Select[tuple[PresetModel]] = select(PresetModel)
+            if exclude_defaults:
+                query = query.where(PresetModel.default.is_(False))
+
+            query = query.order_by(*order_by).limit(per_page).offset((page - 1) * per_page)
             result: Result[tuple[PresetModel]] = await session.execute(query)
             return list(result.scalars().all()), total, page, total_pages
 
-    async def count(self) -> int:
+    async def count(self, exclude_defaults: bool = False) -> int:
         async with self.session() as session:
-            result: Result[tuple[int]] = await session.execute(select(func.count()).select_from(PresetModel))
+            query = select(func.count()).select_from(PresetModel)
+            if exclude_defaults:
+                query = query.where(PresetModel.default.is_(False))
+
+            result: Result[tuple[int]] = await session.execute(query)
             return int(result.scalar_one())
 
     async def get(self, identifier: int | str) -> PresetModel | None:

app/features/presets/router.py

@@ -26,10 +26,11 @@ async def presets_list(request: Request, encoder: Encoder, repo: PresetsReposito
     try:
         page, per_page = normalize_pagination(request)
         items, total, current_page, total_pages = await repo.list_paginated(
-            page,
-            per_page,
+            page=page,
+            per_page=per_page,
             sort=request.query.get("sort"),
             order=request.query.get("order"),
+            exclude_defaults=bool(request.query.get("exclude_defaults", False)),
         )
     except ValueError as exc:
         return web.json_response(data={"error": str(exc)}, status=web.HTTPBadRequest.status_code)

app/features/presets/tests/test_presets_repository.py

@@ -88,6 +88,18 @@ class TestPresetsRepository:
 
         assert [item.name for item in items] == ["gamma", "beta", "alpha"], "Should sort by requested field"
 
+    @pytest.mark.asyncio
+    async def test_list_paginated_excludes_defaults(self, repo):
+        await repo.create({"name": "System Default", "default": True, "priority": 10})
+        await repo.create({"name": "Custom Preset", "priority": 1})
+
+        items, total, page, total_pages = await repo.list_paginated(page=1, per_page=10, exclude_defaults=True)
+
+        assert [item.name for item in items] == ["custom_preset"], "Should exclude default presets"
+        assert total == 1, "Should count only custom presets"
+        assert page == 1, "Should keep current page when filtered results exist"
+        assert total_pages == 1, "Should compute pages from the filtered total"
+
     @pytest.mark.asyncio
     async def test_list_paginated_supports_multiple_sort_fields(self, repo):
         await repo.create({"name": "Charlie", "priority": 2})
@@ -153,3 +165,17 @@ class TestPresetRoutes:
 
         assert response.status == web.HTTPBadRequest.status_code, "Should reject unsupported sort direction"
         assert "order" in payload["error"], "Should explain invalid sort direction"
+
+    async def test_list_route_supports_excluding_defaults(self, repo):
+        await repo.create({"name": "System Default", "default": True, "priority": 10})
+        await repo.create({"name": "Custom Preset", "priority": 1})
+
+        request = MagicMock(spec=Request)
+        request.query = {"page": "1", "per_page": "10", "exclude_defaults": "true"}
+
+        response = await presets_list(request, Encoder(), repo)
+        payload = json.loads(response.text)
+
+        assert response.status == web.HTTPOk.status_code, "Should return 200 for valid default exclusion"
+        assert [item["name"] for item in payload["items"]] == ["custom_preset"], "Should exclude default presets"
+        assert payload["pagination"]["total"] == 1, "Should report filtered total"

ui/app/components/Dialog.vue

@@ -5,7 +5,7 @@
     :title="state.current?.opts.title ?? defaultTitle"
     :dismissible="true"
     :ui="{ content: 'max-w-lg', body: 'space-y-4', footer: 'justify-end gap-2' }"
-    @update:open="(open) => !open && onCancel()"
+    @update:open="(open) => !open && cancel()"
     @after:enter="focusInput"
   >
     <template #body>
@@ -63,7 +63,7 @@
           {{ state.current?.opts.confirmText ?? 'OK' }}
         </UButton>
 
-        <UButton color="neutral" variant="outline" @click="onCancel">
+        <UButton color="neutral" variant="outline" @click="cancel">
           {{ (state.current?.opts as PromptOptions | ConfirmOptions)?.cancelText ?? 'Cancel' }}
         </UButton>
       </template>
@@ -121,7 +121,6 @@ const focusInput = async () => {
   requestAnimationFrame(focusPrimary);
 };
 
-const onCancel = () => cancel();
 const onEnter = () =>
   confirm('confirm' === state.current?.type ? selected.value : localInput.value);
 

ui/app/components/NewDownload.vue

@@ -170,7 +170,7 @@
           </div>
 
           <div
-            v-if="show_description && !hasFormatInConfig && get_preset(form.preset)?.description"
+            v-if="show_description && !hasFormatInConfig && findPreset(form.preset)?.description"
             class="max-h-36 overflow-auto rounded-md border border-default bg-muted/30 px-3 py-2 text-sm text-toned"
           >
             <button
@@ -180,7 +180,7 @@
             >
               <span class="inline-flex items-start gap-2">
                 <UIcon name="i-lucide-info" class="mt-0.5 size-4 shrink-0 text-info" />
-                <span class="is-ellipsis">{{ get_preset(form.preset)?.description }}</span>
+                <span class="is-ellipsis">{{ findPreset(form.preset)?.description }}</span>
               </span>
             </button>
           </div>
@@ -1124,7 +1124,6 @@ const hasFormatInConfig = computed(
   (): boolean => !!form.value.cli?.match(/(?<!\S)(-f|--format)(=|\s)(\S+)/),
 );
 
-const get_preset = (name: string | undefined) => findPreset(name);
 const expand_description = (e: Event) =>
   toggleClass(e.target as HTMLElement, ['is-ellipsis', 'is-pre-wrap']);
 

ui/app/components/PresetForm.vue

@@ -367,13 +367,12 @@ const props = defineProps<{
   reference?: number | null;
   preset: Partial<Preset>;
   addInProgress?: boolean;
-  presets?: Preset[];
 }>();
 
 const config = useYtpConfig();
 const toast = useNotification();
 const dialog = useDialog();
-const { presets, findPreset, selectItems } = usePresetOptions(() => props.presets);
+const { presets, findPreset, selectItems } = usePresetOptions();
 
 const form = reactive<Preset>({
   name: '',

ui/app/composables/usePresets.ts

@@ -129,6 +129,7 @@ const removePreset = (id: number) => {
 const loadPresets = async (
   page: number = 1,
   perPage: number | undefined = undefined,
+  options: { excludeDefaults?: boolean } = {},
 ): Promise<void> => {
   isLoading.value = true;
   try {
@@ -136,6 +137,10 @@ const loadPresets = async (
     if (perPage !== undefined) {
       url += `&per_page=${perPage}`;
     }
+    if (options.excludeDefaults) {
+      url += '&exclude_defaults=true';
+    }
+
     const response = await request(url);
     await ensureSuccess(response);
 

ui/app/pages/conditions.vue

@@ -63,7 +63,7 @@
           icon="i-lucide-refresh-cw"
           :loading="isLoading"
           :disabled="isLoading"
-          @click="() => void reloadContent()"
+          @click="() => void loadContent(page)"
         >
           <span>Reload</span>
         </UButton>
@@ -122,7 +122,7 @@
         :disabled="isLoading"
         show-edges
         :sibling-count="0"
-        @update:page="navigatePage"
+        @update:page="loadContent"
         size="sm"
       />
     </div>
@@ -447,7 +447,7 @@
         :disabled="isLoading"
         show-edges
         :sibling-count="0"
-        @update:page="navigatePage"
+        @update:page="loadContent"
         size="sm"
       />
     </div>
@@ -648,14 +648,6 @@ const loadContent = async (pageNumber = 1): Promise<void> => {
   await syncPageQuery(pageNumber);
 };
 
-const reloadContent = async (): Promise<void> => {
-  await loadContent(page.value);
-};
-
-const navigatePage = async (newPage: number): Promise<void> => {
-  await loadContent(newPage);
-};
-
 const resetEditor = (): void => {
   item.value = {};
   itemRef.value = null;

ui/app/pages/dl_fields.vue

@@ -63,7 +63,7 @@
           icon="i-lucide-refresh-cw"
           :loading="isLoading"
           :disabled="isLoading"
-          @click="() => void reloadContent()"
+          @click="() => void loadContent(page)"
         >
           <span>Reload</span>
         </UButton>
@@ -122,7 +122,7 @@
         :disabled="isLoading"
         show-edges
         :sibling-count="0"
-        @update:page="navigatePage"
+        @update:page="loadContent"
         size="sm"
       />
     </div>
@@ -399,7 +399,7 @@
         :disabled="isLoading"
         show-edges
         :sibling-count="0"
-        @update:page="navigatePage"
+        @update:page="loadContent"
         size="sm"
       />
     </div>
@@ -567,14 +567,6 @@ const loadContent = async (pageNumber = 1): Promise<void> => {
   await syncPageQuery(pageNumber);
 };
 
-const reloadContent = async (): Promise<void> => {
-  await loadContent(page.value);
-};
-
-const navigatePage = async (newPage: number): Promise<void> => {
-  await loadContent(newPage);
-};
-
 const resetEditor = (): void => {
   item.value = {};
   itemRef.value = null;

ui/app/pages/notifications.vue

@@ -76,7 +76,7 @@
           icon="i-lucide-refresh-cw"
           :loading="isLoading"
           :disabled="isLoading"
-          @click="() => void reloadContent()"
+          @click="() => void loadContent(page)"
         >
           <span>Reload</span>
         </UButton>
@@ -135,7 +135,7 @@
         :disabled="isLoading"
         show-edges
         :sibling-count="0"
-        @update:page="navigatePage"
+        @update:page="loadContent"
         size="sm"
       />
     </div>
@@ -497,7 +497,7 @@
         :disabled="isLoading"
         show-edges
         :sibling-count="0"
-        @update:page="navigatePage"
+        @update:page="loadContent"
         size="sm"
       />
     </div>
@@ -706,14 +706,6 @@ const loadContent = async (pageNumber = page.value): Promise<void> => {
   await notificationsStore.loadNotifications(pageNumber);
 };
 
-const reloadContent = async (): Promise<void> => {
-  await loadContent(page.value);
-};
-
-const navigatePage = async (newPage: number): Promise<void> => {
-  await loadContent(newPage);
-};
-
 const resetEditor = (): void => {
   target.value = defaultState();
   targetRef.value = undefined;

ui/app/pages/presets.vue

@@ -23,7 +23,7 @@
 
       <div class="flex min-w-0 flex-wrap items-center gap-2 xl:justify-end">
         <UButton
-          v-if="presetsNoDefault.length > 0"
+          v-if="presets.length > 0"
           color="neutral"
           :variant="showFilter ? 'soft' : 'outline'"
           size="sm"
@@ -62,13 +62,13 @@
           icon="i-lucide-refresh-cw"
           :loading="isLoading"
           :disabled="isLoading"
-          @click="() => void reloadContent()"
+          @click="() => void loadContent(page)"
         >
           <span>Reload</span>
         </UButton>
 
         <UInput
-          v-if="showFilter && presetsNoDefault.length > 0"
+          v-if="showFilter && presets.length > 0"
           id="filter"
           ref="filterInput"
           v-model="query"
@@ -112,6 +112,18 @@
           </UButton>
         </UDropdownMenu>
       </div>
+
+      <UPagination
+        v-if="paging?.total_pages > 1"
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="loadContent"
+        size="sm"
+      />
     </div>
 
     <div
@@ -416,6 +428,22 @@
       description="There are no custom defined presets."
     />
 
+    <div
+      v-if="filteredPresets.length > 0 && !query && paging?.total_pages > 1"
+      class="flex justify-end"
+    >
+      <UPagination
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="loadContent"
+        size="sm"
+      />
+    </div>
+
     <UAlert v-if="!query && presets.length > 0" color="info" variant="soft">
       <template #description>
         <ul class="list-disc space-y-2 pl-5 text-sm text-default">
@@ -443,7 +471,6 @@
           :addInProgress="editor.addInProgress.value"
           :reference="editor.reference.value"
           :preset="editor.preset.value"
-          :presets="presets"
           @cancel="() => void editor.requestClose()"
           @dirty-change="(dirty) => (editor.dirty.value = dirty)"
           @submit="editor.submit"
@@ -470,6 +497,8 @@ const config = useYtpConfig();
 const box = useConfirm();
 const editor = usePresetEditor();
 const pageShell = requirePageShell('presets');
+const route = useRoute();
+const router = useRouter();
 const { confirmDialog } = useDialog();
 const { toggleExpand, expandClass } = useExpandableMeta();
 
@@ -481,21 +510,19 @@ const showFilter = ref(false);
 const filterInput = ref<{ inputRef?: { value?: HTMLInputElement | null } } | null>(null);
 const selectedIds = ref<number[]>([]);
 const massDelete = ref(false);
+const page = ref<number>(route.query.page ? parseInt(route.query.page as string, 10) : 1);
 
 const presets = computed(() => presetsStore.presets.value as PresetWithUI[]);
+const paging = presetsStore.pagination;
 const isLoading = presetsStore.isLoading;
 
-const presetsNoDefault = computed(() => presets.value.filter((item) => !item.default));
-
 const filteredPresets = computed<PresetWithUI[]>(() => {
   const normalizedQuery = query.value?.toLowerCase();
   if (!normalizedQuery) {
-    return presetsNoDefault.value;
+    return presets.value;
   }
 
-  return presetsNoDefault.value.filter((item) =>
-    deepIncludes(item, normalizedQuery, new WeakSet()),
-  );
+  return presets.value.filter((item) => deepIncludes(item, normalizedQuery, new WeakSet()));
 });
 
 const selectablePresetIds = computed(() =>
@@ -525,6 +552,19 @@ const bulkActionGroups = computed<DropdownMenuItem[][]>(() => [
   ],
 ]);
 
+const syncPageQuery = async (pageNumber: number): Promise<void> => {
+  const totalPages = paging.value.total_pages;
+  const nextQuery = { ...route.query };
+
+  if (totalPages > 1) {
+    nextQuery.page = String(pageNumber);
+  } else {
+    delete nextQuery.page;
+  }
+
+  await router.replace({ query: nextQuery });
+};
+
 watch(showFilter, (value) => {
   if (!value) {
     query.value = '';
@@ -553,8 +593,11 @@ const toggleFilterPanel = async (): Promise<void> => {
   filterInput.value?.inputRef?.value?.focus?.({ preventScroll: true });
 };
 
-const reloadContent = async (): Promise<void> => {
-  await presetsStore.loadPresets(1, 1000);
+const loadContent = async (pageNumber = 1): Promise<void> => {
+  page.value = pageNumber;
+  await presetsStore.loadPresets(pageNumber, undefined, { excludeDefaults: true });
+  await nextTick();
+  await syncPageQuery(pageNumber);
 };
 
 const toggleMasterSelection = (): void => {
@@ -600,15 +643,20 @@ const deleteSelected = async (): Promise<void> => {
 
   massDelete.value = true;
 
-  for (const item of itemsToDelete) {
-    if (!item.id) {
-      continue;
+  try {
+    for (const item of itemsToDelete) {
+      if (!item.id) {
+        continue;
+      }
+
+      await presetsStore.deletePreset(item.id);
     }
-    await presetsStore.deletePreset(item.id);
+  } finally {
+    selectedIds.value = [];
+    massDelete.value = false;
   }
 
-  selectedIds.value = [];
-  massDelete.value = false;
+  await loadContent(page.value);
 };
 
 const deleteItem = async (item: Preset): Promise<void> => {
@@ -644,5 +692,5 @@ const calcPath = (path?: string): string => {
   return path ? location + '/' + sTrim(path, '/') : location;
 };
 
-onMounted(async () => await reloadContent());
+onMounted(async () => await loadContent(page.value));
 </script>

ui/app/pages/task_definitions.vue

@@ -71,7 +71,7 @@
           icon="i-lucide-refresh-cw"
           :loading="isLoading"
           :disabled="isLoading"
-          @click="() => void reloadContent()"
+          @click="() => void loadDefinitions(1, 1000)"
         >
           <span>Reload</span>
         </UButton>
@@ -642,10 +642,6 @@ const toggleFilterPanel = async (): Promise<void> => {
   filterInput.value?.inputRef?.value?.focus?.({ preventScroll: true });
 };
 
-const reloadContent = async (): Promise<void> => {
-  await loadDefinitions(1, 1000);
-};
-
 const toggleDisplayStyle = (): void => {
   display_style.value = display_style.value === 'list' ? 'grid' : 'list';
 };
@@ -837,7 +833,7 @@ const exportDefinition = async (summary: TaskDefinitionSummary): Promise<void> =
 
 onMounted(async () => {
   if (!definitions.value.length) {
-    await reloadContent();
+    await loadDefinitions(1, 1000);
   }
 });
 </script>

ui/app/pages/tasks.vue

@@ -62,7 +62,7 @@
           icon="i-lucide-refresh-cw"
           :loading="isLoading"
           :disabled="isLoading"
-          @click="() => void reloadContent()"
+          @click="() => void loadContent(page)"
         >
           <span>Reload</span>
         </UButton>
@@ -113,7 +113,17 @@
         </UDropdownMenu>
       </div>
 
-      <div class="text-xs text-toned">{{ filteredTasks.length }} displayed</div>
+      <UPagination
+        v-if="paging?.total_pages > 1"
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="loadContent"
+        size="sm"
+      />
     </div>
 
     <div
@@ -628,6 +638,19 @@
       description="There are no tasks defined yet. Click the New Task button to create your first automated download task."
     />
 
+    <div v-if="filteredTasks.length > 0 && paging?.total_pages > 1" class="flex justify-end">
+      <UPagination
+        :page="paging.page"
+        :total="paging.total"
+        :items-per-page="paging.per_page"
+        :disabled="isLoading"
+        show-edges
+        :sibling-count="0"
+        @update:page="loadContent"
+        size="sm"
+      />
+    </div>
+
     <UAlert v-if="tasks.length > 0" color="info" variant="soft">
       <template #description>
         <ul class="list-disc space-y-2 pl-5 text-sm text-default">
@@ -722,6 +745,8 @@ const config = useYtpConfig();
 const socket = useAppSocket();
 const stateStore = useQueueState();
 const pageShell = requirePageShell('tasks');
+const route = useRoute();
+const router = useRouter();
 const { confirmDialog } = useDialog();
 const sessionCache = useSessionCache();
 const { toggleExpand, expandClass } = useExpandableMeta();
@@ -731,6 +756,7 @@ const isMobile = useMediaQuery({ maxWidth: 639 });
 const tasksComposable = useTasks();
 const {
   tasks,
+  pagination: paging,
   isLoading,
   addInProgress,
   isTaskInProgress,
@@ -762,6 +788,7 @@ const inspectTask = ref<Task | null>(null);
 const query = ref('');
 const showFilter = ref(false);
 const filterInput = ref<{ inputRef?: { value?: HTMLInputElement | null } } | null>(null);
+const page = ref<number>(route.query.page ? parseInt(route.query.page as string, 10) : 1);
 const CACHE_KEY = 'tasks:handler_support';
 const taskHandlerSupport = ref<Record<string, boolean>>(sessionCache.get(CACHE_KEY) || {});
 
@@ -861,6 +888,19 @@ watch(
   { immediate: true },
 );
 
+const syncPageQuery = async (pageNumber: number): Promise<void> => {
+  const totalPages = tasksComposable.pagination.value.total_pages;
+  const nextQuery = { ...route.query };
+
+  if (totalPages > 1) {
+    nextQuery.page = String(pageNumber);
+  } else {
+    delete nextQuery.page;
+  }
+
+  await router.replace({ query: nextQuery });
+};
+
 const toggleFilterPanel = async (): Promise<void> => {
   showFilter.value = !showFilter.value;
   if (!showFilter.value) {
@@ -941,9 +981,15 @@ const willTaskBeProcessed = (item: Task): boolean => {
   return hasTimer || hasHandler;
 };
 
-const reloadContent = async (fromMounted: boolean = false) => {
+const loadContent = async (pageNumber = page.value, fromMounted: boolean = false) => {
+  page.value = pageNumber;
+
   try {
-    await tasksComposable.loadTasks();
+    await tasksComposable.loadTasks(pageNumber);
+
+    page.value = tasksComposable.pagination.value.page;
+    await nextTick();
+    await syncPageQuery(page.value);
 
     if (tasks.value.length > 0) {
       cleanStaleCache(tasks.value);
@@ -1400,7 +1446,7 @@ const itemActionGroups = (item: Task): DropdownMenuItem[][] => [
 ];
 
 onMounted(async () => {
-  await reloadContent(true);
+  await loadContent(page.value, true);
 });
 
 onBeforeUnmount(() => socket.off('item_status', statusHandler));

ui/app/spa-loading-template.html

@@ -163,8 +163,14 @@
       }
 
       @media (max-width: 560px) {
+        body {
+          padding-top: calc(1rem + env(safe-area-inset-top));
+          padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+        }
+
         .loading-card {
           padding: 1.3rem;
+          transform: translateY(clamp(-2.75rem, -7vh, -1.5rem));
         }
 
         .brand {

ui/tests/composables/usePresets.test.ts

@@ -104,6 +104,26 @@ describe('usePresets', () => {
       requestSpy.mockRestore()
     })
 
+    it('requests custom presets without defaults when asked', async () => {
+      const requestSpy = spyOn(utils, 'request')
+      requestSpy.mockResolvedValueOnce(
+        createMockResponse({
+          ok: true,
+          status: 200,
+          jsonData: {
+            items: [mockPreset],
+            pagination: mockPagination,
+          },
+        }),
+      )
+
+      const presets = usePresets()
+      await presets.loadPresets(2, 25, { excludeDefaults: true })
+
+      expect(requestSpy).toHaveBeenCalledWith('/api/presets/?page=2&per_page=25&exclude_defaults=true')
+      requestSpy.mockRestore()
+    })
+
     it('sorts presets by priority then name', async () => {
       const items = [
         { ...mockPreset, id: 1, name: 'B', priority: 2 },
@@ -127,12 +147,12 @@ describe('usePresets', () => {
       await presets.loadPresets()
 
       const sorted = presets.presets.value
-      expect(sorted[0].priority).toBe(2)
-      expect(sorted[0].name).toBe('A')
-      expect(sorted[1].priority).toBe(2)
-      expect(sorted[1].name).toBe('B')
-      expect(sorted[2].priority).toBe(1)
-      expect(sorted[2].name).toBe('C')
+      expect(sorted[0]!.priority).toBe(2)
+      expect(sorted[0]!.name).toBe('A')
+      expect(sorted[1]!.priority).toBe(2)
+      expect(sorted[1]!.name).toBe('B')
+      expect(sorted[2]!.priority).toBe(1)
+      expect(sorted[2]!.name).toBe('C')
       requestSpy.mockRestore()
     })
 
@@ -219,7 +239,7 @@ describe('usePresets', () => {
       const presets = usePresets()
       await presets.updatePreset(1, { ...mockPreset, default: true })
 
-      const requestBody = JSON.parse((requestSpy.mock.calls[0][1] as any).body)
+      const requestBody = JSON.parse((requestSpy.mock.calls[0]![1] as any).body)
       expect(requestBody.id).toBeUndefined()
       expect(requestBody.default).toBe(false)
       requestSpy.mockRestore()
@@ -257,7 +277,7 @@ describe('usePresets', () => {
       const presets = usePresets()
       await presets.patchPreset(1, { id: 10, default: true })
 
-      const requestBody = JSON.parse((requestSpy.mock.calls[0][1] as any).body)
+      const requestBody = JSON.parse((requestSpy.mock.calls[0]![1] as any).body)
       expect(requestBody.id).toBeUndefined()
       expect(requestBody.default).toBe(false)
       requestSpy.mockRestore()

ui/tests/plugins/modal-opacity.client.test.ts

@@ -1,20 +1,18 @@
-import { afterEach, beforeAll, beforeEach, describe, expect, it, mock } from 'bun:test';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, mock, spyOn } from 'bun:test';
 
 const disableOpacityMock = mock(() => {});
 const enableOpacityMock = mock(() => {});
 const syncOpacityMock = mock(() => {});
 
-mock.module('~/utils', () => ({
-  disableOpacity: disableOpacityMock,
-  enableOpacity: enableOpacityMock,
-  syncOpacity: syncOpacityMock,
-}));
-
 (globalThis as typeof globalThis & { defineNuxtPlugin?: (setup: () => void) => () => void }).defineNuxtPlugin =
   (setup) => setup;
 
+let utils: Awaited<typeof import('~/utils/index')>;
 let plugin: Awaited<typeof import('../../app/plugins/modal-opacity.client.ts')>['default'];
 let started = false;
+let disableOpacitySpy: ReturnType<typeof spyOn>;
+let enableOpacitySpy: ReturnType<typeof spyOn>;
+let syncOpacitySpy: ReturnType<typeof spyOn>;
 
 const flushMutations = async (): Promise<void> => {
   await Promise.resolve();
@@ -38,9 +36,19 @@ const startPlugin = (): void => {
 };
 
 beforeAll(async () => {
+  utils = await import('~/utils/index');
+  disableOpacitySpy = spyOn(utils, 'disableOpacity').mockImplementation(disableOpacityMock);
+  enableOpacitySpy = spyOn(utils, 'enableOpacity').mockImplementation(enableOpacityMock);
+  syncOpacitySpy = spyOn(utils, 'syncOpacity').mockImplementation(syncOpacityMock);
   plugin = (await import('../../app/plugins/modal-opacity.client.ts')).default;
 });
 
+afterAll(() => {
+  disableOpacitySpy.mockRestore();
+  enableOpacitySpy.mockRestore();
+  syncOpacitySpy.mockRestore();
+});
+
 beforeEach(() => {
   globalThis.MutationObserver = window.MutationObserver;
   document.body.innerHTML = '';