svelte refactor

frontend/src/routes/favorites/+page.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import Button from '$lib/components/Button.svelte';
+	import { useOwnerCache } from '$lib/composables/useOwnerCache.svelte';
+	import { errorToast } from '$lib/utils/errors';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import {
@@ -14,7 +17,6 @@
 	import { renameFile, deleteFile } from '$lib/api/endpoints/files';
 	import { renameFolder, deleteFolder } from '$lib/api/endpoints/folders';
 	import type { FileItem } from '$lib/api/types';
-	import Icon from '$lib/icons/Icon.svelte';
 	import FileViewer from '$lib/components/FileViewer.svelte';
 	import MoveDialog from '$lib/components/MoveDialog.svelte';
 	import ShareDialog from '$lib/components/ShareDialog.svelte';
@@ -25,7 +27,6 @@
 	} from '$lib/components/ResourceList.svelte';
 	import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
 	import { t } from '$lib/i18n/index.svelte';
-	import { ui } from '$lib/stores/ui.svelte';
 
 	let raw = $state<FavoritesResourceItem[]>([]);
 	let cursor = $state<string | undefined>(undefined);
@@ -33,7 +34,7 @@
 	let error = $state<string | null>(null);
 	let groupBy = $state('');
 	let reversed = $state(false);
-	let ownerNames = $state<Record<string, string>>({});
+	const owners = useOwnerCache(resolveOwnerName);
 
 	const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
 
@@ -50,7 +51,7 @@
 				size: isFile ? (it.resource as FileItem).size : null,
 				date: it.favorited_at,
 				ownerId,
-				ownerName: ownerId ? (ownerNames[ownerId] ?? null) : null,
+				ownerName: owners.name(ownerId),
 				isFavorite: true,
 				category: isFile ? it.resource.category : 'Folder',
 				modifiedAt: it.resource.modified_at
@@ -65,7 +66,7 @@
 			label: t('groupby.owner', 'Owner'),
 			orderBy: 'owner',
 			bucketOf: (e) => e.ownerId ?? null,
-			labelOf: (id) => ownerNames[id] ?? id
+			labelOf: (id) => owners.label(id)
 		},
 		{
 			key: 'type',
@@ -94,19 +95,6 @@
 		}
 	];
 
-	async function resolveOwners(items: FavoritesResourceItem[]) {
-		const ids = [
-			...new Set(items.map((i) => i.resource.owner_id).filter((id): id is string => !!id))
-		];
-		await Promise.all(
-			ids.map(async (id) => {
-				if (ownerNames[id]) return;
-				const name = await resolveOwnerName(id);
-				ownerNames = { ...ownerNames, [id]: name };
-			})
-		);
-	}
-
 	async function load(reset = false, orderBy = 'name', rev = reversed) {
 		loading = true;
 		error = null;
@@ -119,7 +107,7 @@
 			});
 			raw = reset ? page.items : [...raw, ...page.items];
 			cursor = page.next_cursor;
-			void resolveOwners(page.items);
+			void owners.resolve(page.items.map((i) => i.resource.owner_id));
 		} catch (e) {
 			console.error('favorites: load error', e);
 			error = t('errors_loadFailed', 'Failed to load items');
@@ -152,7 +140,7 @@
 			await removeFavorite(entry.kind, entry.id);
 			raw = raw.filter((i) => i.resource.id !== entry.id);
 		} catch (e) {
-			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+			errorToast(e);
 		}
 	}
 
@@ -175,7 +163,7 @@
 			else await renameFolder(entry.id, name);
 			await load(true, orderByForGroup());
 		} catch (e) {
-			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+			errorToast(e);
 		}
 	}
 
@@ -192,7 +180,7 @@
 			else await deleteFolder(entry.id);
 			raw = raw.filter((i) => i.resource.id !== entry.id);
 		} catch (e) {
-			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+			errorToast(e);
 		}
 	}
 
@@ -268,7 +256,7 @@
 			raw = raw.filter((i) => !removed.has(i.resource.id));
 			selectedIds = new Set();
 		} catch (e) {
-			ui.notify(e instanceof Error ? e.message : String(e), 'error');
+			errorToast(e);
 		}
 	}
 
@@ -302,22 +290,18 @@
 	onselectionchange={(ids) => (selectedIds = ids)}
 >
 	{#snippet batchToolbar()}
-		<button class="btn btn-secondary" onclick={batchDownload}>
-			<Icon name="download" />
-			{t('common.download', 'Download')}
-		</button>
-		<button
-			class="btn btn-secondary"
+		<Button icon="download" onclick={batchDownload}>{t('common.download', 'Download')}</Button>
+		<Button
+			icon="arrows-alt"
 			onclick={() => {
 				moveTarget = null;
 				moveItems = batchTargets();
 				moveOpen = true;
-			}}><Icon name="arrows-alt" /> {t('files.move', 'Move')}</button
+			}}>{t('files.move', 'Move')}</Button
+		>
+		<Button variant="danger" icon="trash" onclick={batchDelete}
+			>{t('common.delete', 'Delete')}</Button
 		>
-		<button class="btn btn-danger" onclick={batchDelete}>
-			<Icon name="trash" />
-			{t('common.delete', 'Delete')}
-		</button>
 	{/snippet}
 </ResourceList>