From 569b67caacd2be953aec6deb0ff8cff1324ec66d Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Mon, 20 Jul 2026 12:28:54 +0200
Subject: [PATCH] refactor(front): apply formatter

---
 .../src/lib/components/ResourceList.svelte    | 286 +++++++++---------
 .../src/routes/files/[...path]/+page.svelte   |  71 +----
 2 files changed, 159 insertions(+), 198 deletions(-)

diff --git a/frontend/src/lib/components/ResourceList.svelte b/frontend/src/lib/components/ResourceList.svelte
index 1b38da25..0fa4ac7b 100644
--- a/frontend/src/lib/components/ResourceList.svelte
+++ b/frontend/src/lib/components/ResourceList.svelte
@@ -695,7 +695,12 @@
 		const bandBottom = bandTop + rubberband.h;
 
 		const rows = rlRoot.querySelectorAll<HTMLElement>('.file-item[data-item-id]');
-		const nextSelection = new Set(rubberband.baseline);
+		// Transient scratch set for computing the diff before mutating
+		// `selected`. `SvelteSet` (not plain `Set`) per the codebase's
+		// `svelte/prefer-svelte-reactivity` convention — the lint rule
+		// exists so a future refactor that stashes this in `$state`
+		// can't silently break reactivity.
+		const nextSelection = new SvelteSet(rubberband.baseline);
 		for (const row of rows) {
 			const id = row.dataset.itemId;
 			if (!id) continue;
@@ -1082,14 +1087,14 @@
 	ondragleave={onSystemDragLeave}
 	ondrop={onSystemDrop}
 >
-<div class="page-sticky-header">
-	<h1 class="page-title">{title}</h1>
-	{#if breadcrumb}
-		<div class="rl-breadcrumb">{@render breadcrumb()}</div>
-	{/if}
-	<ActionBar>
-		{#snippet start()}
-			<!--
+	<div class="page-sticky-header">
+		<h1 class="page-title">{title}</h1>
+		{#if breadcrumb}
+			<div class="rl-breadcrumb">{@render breadcrumb()}</div>
+		{/if}
+		<ActionBar>
+			{#snippet start()}
+				<!--
 				The action-bar left cluster has two states:
 				  1. `batchActions` — when the user has selected items, the
 				     page's batch buttons (Move / Delete / Restore / …)
@@ -1103,149 +1108,150 @@
 				  2. `actions` — the page's default cluster
 				     (Upload / New folder / Empty trash / Clear recent).
 			-->
-			<div
-				class="action-buttons"
-				class:batch-selection-bar={selectable && selected.size > 0 && batchActions}
-			>
-				{#if selectable && selected.size > 0 && batchActions}
-					<button
-						class="batch-bar-close"
-						title={t('common.clear', 'Clear selection')}
-						aria-label={t('common.clear', 'Clear selection')}
-						data-testid="resource-list-batch-close-btn"
-						onclick={clearSelection}
-					>
-						<Icon name="times" />
-					</button>
-					<span class="batch-bar-count"
-						>{t('files.selected_count', { count: selected.size }, '{{count}} selected')}</span
-					>
-					<div class="batch-bar-actions">
-						{@render batchActions(selectedItems)}
-					</div>
-				{:else if actions}
-					{@render actions()}
-				{/if}
-			</div>
-		{/snippet}
-		{#snippet end()}
-			<DisplayModeControls
-				groups={groupBys}
-				{groupBy}
-				{reversed}
-				ongroup={selectGroup}
-				ondirection={toggleDirection}
-				showViewMode={showViewToggle}
-				{showDotfileToggle}
-			/>
-		{/snippet}
-	</ActionBar>
-</div>
+				<div
+					class="action-buttons"
+					class:batch-selection-bar={selectable && selected.size > 0 && batchActions}
+				>
+					{#if selectable && selected.size > 0 && batchActions}
+						<button
+							class="batch-bar-close"
+							title={t('common.clear', 'Clear selection')}
+							aria-label={t('common.clear', 'Clear selection')}
+							data-testid="resource-list-batch-close-btn"
+							onclick={clearSelection}
+						>
+							<Icon name="times" />
+						</button>
+						<span class="batch-bar-count"
+							>{t('files.selected_count', { count: selected.size }, '{{count}} selected')}</span
+						>
+						<div class="batch-bar-actions">
+							{@render batchActions(selectedItems)}
+						</div>
+					{:else if actions}
+						{@render actions()}
+					{/if}
+				</div>
+			{/snippet}
+			{#snippet end()}
+				<DisplayModeControls
+					groups={groupBys}
+					{groupBy}
+					{reversed}
+					ongroup={selectGroup}
+					ondirection={toggleDirection}
+					showViewMode={showViewToggle}
+					{showDotfileToggle}
+				/>
+			{/snippet}
+		</ActionBar>
+	</div>
 
-{#if error}
-	<EmptyState icon="exclamation-circle" title={error} error />
-{:else if loading && isEmpty}
-	<SkeletonList count={SKELETON.length} />
-{:else if isEmpty}
-	<EmptyState
-		icon={emptyIcon}
-		title={emptyText ?? t('common.empty', 'Nothing here yet.')}
-		hint={emptyHint}
-	/>
-{:else}
-	<div class="files-container" bind:clientWidth={gridWidth}>
-		{#if grouped && filesStore.viewMode === 'list'}
-			<div class="files-list-view" style="--files-list-columns: {columns}">
-				{#if listHeaderOverride}{@render listHeaderOverride()}{:else}{@render listHeader()}{/if}
-				{#each sections as section (section.key)}
-					<div class="rl-swimlane-header" role="rowheader">
-						<span class="rl-swimlane-header__label">{section.label}</span>
-						{#if bucketAction}
-							<span class="rl-swimlane-header__action">
-								{@render bucketAction(section.key)}
-							</span>
-						{/if}
-					</div>
-					<!-- Window each section's rows so a large grouped list (e.g. a big
+	{#if error}
+		<EmptyState icon="exclamation-circle" title={error} error />
+	{:else if loading && isEmpty}
+		<SkeletonList count={SKELETON.length} />
+	{:else if isEmpty}
+		<EmptyState
+			icon={emptyIcon}
+			title={emptyText ?? t('common.empty', 'Nothing here yet.')}
+			hint={emptyHint}
+		/>
+	{:else}
+		<div class="files-container" bind:clientWidth={gridWidth}>
+			{#if grouped && filesStore.viewMode === 'list'}
+				<div class="files-list-view" style="--files-list-columns: {columns}">
+					{#if listHeaderOverride}{@render listHeaderOverride()}{:else}{@render listHeader()}{/if}
+					{#each sections as section (section.key)}
+						<div class="rl-swimlane-header" role="rowheader">
+							<span class="rl-swimlane-header__label">{section.label}</span>
+							{#if bucketAction}
+								<span class="rl-swimlane-header__action">
+									{@render bucketAction(section.key)}
+								</span>
+							{/if}
+						</div>
+						<!-- Window each section's rows so a large grouped list (e.g. a big
 					     trash, grouped by remaining days) doesn't mount every row. -->
-					<VirtualList items={section.rows} rowHeight={56} key={(e) => e.id} {row} />
-				{/each}
-			</div>
-		{:else if grouped}
-			<!-- Grouped GRID: a vertical stack of (header + its own windowed card
+						<VirtualList items={section.rows} rowHeight={56} key={(e) => e.id} {row} />
+					{/each}
+				</div>
+			{:else if grouped}
+				<!-- Grouped GRID: a vertical stack of (header + its own windowed card
 			     grid) per section. The outer is a flex column, NOT `.files-grid-view`
 			     (which is itself a grid and would place each header/VirtualList into a
 			     cell) — the grid lives on each VirtualList's inner window via
 			     `windowClass`, exactly like the flat-grid arm. This was the last
 			     unwindowed path: a grouped-by-default grid (trash) mounted every card
 			     (benches/ROUND13.md §V1). -->
-			<div class="rl-grouped-grid">
-				{#each sections as section (section.key)}
-					<div class="rl-swimlane-header rl-swimlane-header--grid" role="rowheader">
-						<span class="rl-swimlane-header__label">{section.label}</span>
-						{#if bucketAction}
-							<span class="rl-swimlane-header__action">
-								{@render bucketAction(section.key)}
-							</span>
-						{/if}
-					</div>
-					<VirtualList
-						items={section.rows}
-						columns={gridCols}
-						rowHeight={240}
-						windowClass="files-grid-view"
-						key={(e) => e.id}
-						{row}
-					/>
-				{/each}
-			</div>
-		{:else if filesStore.viewMode === 'list'}
-			<!-- Flat list view: only the visible rows are mounted. The spacer keeps the
+				<div class="rl-grouped-grid">
+					{#each sections as section (section.key)}
+						<div class="rl-swimlane-header rl-swimlane-header--grid" role="rowheader">
+							<span class="rl-swimlane-header__label">{section.label}</span>
+							{#if bucketAction}
+								<span class="rl-swimlane-header__action">
+									{@render bucketAction(section.key)}
+								</span>
+							{/if}
+						</div>
+						<VirtualList
+							items={section.rows}
+							columns={gridCols}
+							rowHeight={240}
+							windowClass="files-grid-view"
+							key={(e) => e.id}
+							{row}
+						/>
+					{/each}
+				</div>
+			{:else if filesStore.viewMode === 'list'}
+				<!-- Flat list view: only the visible rows are mounted. The spacer keeps the
 			     full scroll height so the end-of-list sentinel still fires. -->
-			<div class="files-list-view" style="--files-list-columns: {columns}">
-				{#if listHeaderOverride}{@render listHeaderOverride()}{:else}{@render listHeader()}{/if}
-				<VirtualList items={visibleItems} rowHeight={56} key={(e) => e.id} {row} />
-			</div>
-		{:else}
-			<!-- Grid view: the windowed list's inner element IS the card grid. -->
-			<VirtualList
-				items={visibleItems}
-				columns={gridCols}
-				rowHeight={240}
-				windowClass="files-grid-view"
-				key={(e) => e.id}
-				{row}
-			/>
-		{/if}
+				<div class="files-list-view" style="--files-list-columns: {columns}">
+					{#if listHeaderOverride}{@render listHeaderOverride()}{:else}{@render listHeader()}{/if}
+					<VirtualList items={visibleItems} rowHeight={56} key={(e) => e.id} {row} />
+				</div>
+			{:else}
+				<!-- Grid view: the windowed list's inner element IS the card grid. -->
+				<VirtualList
+					items={visibleItems}
+					columns={gridCols}
+					rowHeight={240}
+					windowClass="files-grid-view"
+					key={(e) => e.id}
+					{row}
+				/>
+			{/if}
 
-		{#if hasMore}
-			<button
-				class="btn btn-secondary rl-more"
-				data-testid="resource-list-load-more-btn"
-				onclick={onloadmore}
-				disabled={loading}
-			>
-				{loading ? t('common.loading', 'Loading…') : t('common.load_more', 'Load more')}
-			</button>
-		{/if}
-		<!-- Infinite-scroll sentinel: auto-loads the next page as it nears the viewport. -->
-		<div bind:this={sentinel} class="rl-sentinel" aria-hidden="true"></div>
-	</div>
-{/if}
-{#if rubberband}
-	<!-- Marquee selection rectangle. Positioned relative to `.rl-root`
+			{#if hasMore}
+				<button
+					class="btn btn-secondary rl-more"
+					data-testid="resource-list-load-more-btn"
+					onclick={onloadmore}
+					disabled={loading}
+				>
+					{loading ? t('common.loading', 'Loading…') : t('common.load_more', 'Load more')}
+				</button>
+			{/if}
+			<!-- Infinite-scroll sentinel: auto-loads the next page as it nears the viewport. -->
+			<div bind:this={sentinel} class="rl-sentinel" aria-hidden="true"></div>
+		</div>
+	{/if}
+	{#if rubberband}
+		<!-- Marquee selection rectangle. Positioned relative to `.rl-root`
 	     (which is `position: relative`); pointer-events off so the
 	     live pointermove handler on window still sees the drag. -->
-	<div
-		class="rl-rubberband"
-		style:left="{rubberband.x}px"
-		style:top="{rubberband.y}px"
-		style:width="{rubberband.w}px"
-		style:height="{rubberband.h}px"
-		aria-hidden="true"
-	></div>
-{/if}
-</div><!-- /.rl-root -->
+		<div
+			class="rl-rubberband"
+			style:left="{rubberband.x}px"
+			style:top="{rubberband.y}px"
+			style:width="{rubberband.w}px"
+			style:height="{rubberband.h}px"
+			aria-hidden="true"
+		></div>
+	{/if}
+</div>
+<!-- /.rl-root -->
 
 {#snippet listHeader()}
 	<div class="list-header">
diff --git a/frontend/src/routes/files/[...path]/+page.svelte b/frontend/src/routes/files/[...path]/+page.svelte
index dd1708ca..5d040664 100644
--- a/frontend/src/routes/files/[...path]/+page.svelte
+++ b/frontend/src/routes/files/[...path]/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import SkeletonList from '$lib/components/SkeletonList.svelte';
-	import EmptyState from '$lib/components/EmptyState.svelte';
 	import { errorMessage, errorToast } from '$lib/utils/errors';
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
@@ -25,10 +23,8 @@
 	import {
 		deleteFile,
 		fileDownloadUrl,
-		fileThumbnailUrl,
 		moveFile,
 		renameFile,
-		thumbSizeForView,
 		uploadFileWithProgress
 	} from '$lib/api/endpoints/files';
 	import { folderZipUrl } from '$lib/api/endpoints/folders';
@@ -850,23 +846,6 @@
 		});
 	});
 
-	/**
-	 * Whether the server can render a thumbnail preview for this file. Only images
-	 * and videos have server-side thumbnails (see `ThumbnailService::is_supported_image`
-	 * plus client-uploaded video frames); the backend does NOT rasterise PDFs or
-	 * documents, so claiming it could left their tiles blank (the doomed <img>
-	 * 404s and `onerror` hides it). Non-thumbnail files fall back to their colour
-	 * type icon, which renders underneath the <img> regardless.
-	 */
-	function canThumbnail(file: FileItem): boolean {
-		const m = file.mime_type ?? '';
-		// PDF joins image/video: the client-side generator ported from
-		// the legacy vanilla frontend renders PDFs via pdf.js on the
-		// `<img onerror>` fallback path. Without this the img never
-		// mounts for PDFs and the fallback never fires.
-		return m.startsWith('image/') || m.startsWith('video/') || m === 'application/pdf';
-	}
-
 	// ── Multi-select + batch ────────────────────────────────────────────────
 	// After the ResourceList migration the row-level selection UX (shift-
 	// range, ctrl-toggle, anchor tracking, header select-all) lives inside
@@ -1390,26 +1369,20 @@
 		input.value = '';
 	}
 
-	// Visual emptiness — reflects the filtered set, not the raw listing.
-	// When the folder contains only dotfiles that the user has chosen to
-	// hide, `visibleFolders + visibleFiles` is empty and the empty state
-	// renders; `hiddenCount` above lets the template surface a "you're
-	// hiding N items" hint so users aren't confused.
-	const isEmpty = $derived(visibleFolders.length === 0 && visibleFiles.length === 0);
-
 	// Client-side sort (flat, Drive-style). The listing endpoint returns the
 	// folder contents unsorted; sorting here avoids a refetch per column click.
+	//
+	// `reversed` is the single source of truth for direction — bound to
+	// ResourceList's `bind:reversed` below and read by the comparators.
+	// The legacy `sortDir: 1 | -1` value used by the comparators is a
+	// read-only `$derived` off `reversed` so we don't need two-way sync
+	// (the previous `$state` + two `$effect` mirror was fragile — a
+	// programmatic write to either side triggered an update on the
+	// other, and eslint's `prefer-writable-derived` rightly flagged it).
 	type SortField = 'name' | 'type' | 'size' | 'modified_at' | 'created_at';
 	let sortField = $state<SortField>('name');
-	let sortDir = $state<1 | -1>(1);
-
-	function toggleSort(field: SortField) {
-		if (sortField === field) sortDir = (sortDir * -1) as 1 | -1;
-		else {
-			sortField = field;
-			sortDir = 1;
-		}
-	}
+	let reversed = $state(false);
+	const sortDir = $derived<1 | -1>(reversed ? -1 : 1);
 
 	function cmpFolders(a: FolderItem, b: FolderItem): number {
 		let v: number;
@@ -1485,18 +1458,6 @@
 		}
 	]);
 
-	// ResourceList's `reversed` is a boolean; the legacy sort uses `1 | -1`.
-	// Two-way binding: setting `rlReversed` writes back into `sortDir`, and
-	// any programmatic sort direction change (e.g. group-by picking) mirrors
-	// out.
-	let rlReversed = $state(false);
-	$effect(() => {
-		rlReversed = sortDir === -1;
-	});
-	$effect(() => {
-		sortDir = rlReversed ? -1 : 1;
-	});
-
 	// Bridge for <ResourceList>'s callbacks — the row's open/favorite/drag
 	// props take one item; the legacy handlers take `(kind, id, name)`.
 	function rlOnOpen(item: FileItem | FolderItem) {
@@ -1547,8 +1508,6 @@
 		return () => window.removeEventListener('pointerdown', onDown);
 	});
 
-	const SKELETON = [0, 1, 2, 3, 4, 5, 6, 7];
-
 	// Reload whenever the route path changes.
 	//
 	// `load()` reads several reactive signals in its sync phase
@@ -1640,7 +1599,7 @@
 		onsystemdrop={onDrop}
 		groupBys={rlGroupBys}
 		bind:groupBy
-		bind:reversed={rlReversed}
+		bind:reversed
 		onreload={(orderBy) => {
 			sortField = orderBy as SortField;
 		}}
@@ -1735,17 +1694,13 @@
 					</div>
 				{/if}
 			</div>
-			<button
-				class="btn btn-secondary"
-				data-testid="files-new-folder-btn"
-				onclick={onNewFolder}
-			>
+			<button class="btn btn-secondary" data-testid="files-new-folder-btn" onclick={onNewFolder}>
 				<Icon name="folder-plus" class="icon-mr" />
 				<span>{t('actions.new_folder', 'New folder')}</span>
 			</button>
 		{/snippet}
 
-		{#snippet batchActions(sel)}
+		{#snippet batchActions(_sel)}
 			<button
 				class="batch-btn"
 				title={t('files.add_favorites', 'Add to favorites')}