feat(user-pref): revert view mode as user-prefs serverside

previous change is breaking playwright tests, need to check later changes

frontend/src/lib/components/ListToolbar.svelte

@@ -12,6 +12,7 @@
 	import type { Snippet } from 'svelte';
 	import Icon from '$lib/icons/Icon.svelte';
 	import { t } from '$lib/i18n/index.svelte';
+	import { files as filesStore } from '$lib/stores/files.svelte';
 	import { preferences } from '$lib/stores/preferences.svelte';
 
 	interface Props {
@@ -126,19 +127,19 @@
 			{#if showViewToggle}
 				<button
 					class="toggle-btn"
-					class:active={preferences.viewMode === 'grid'}
+					class:active={filesStore.viewMode === 'grid'}
 					title={t('view.grid', 'Grid view')}
-					aria-pressed={preferences.viewMode === 'grid'}
+					aria-pressed={filesStore.viewMode === 'grid'}
 					data-testid="list-toolbar-view-grid-btn"
-					onclick={() => preferences.setViewMode('grid')}><Icon name="th" /></button
+					onclick={() => filesStore.setViewMode('grid')}><Icon name="th" /></button
 				>
 				<button
 					class="toggle-btn"
-					class:active={preferences.viewMode === 'list'}
+					class:active={filesStore.viewMode === 'list'}
 					title={t('view.list', 'List view')}
-					aria-pressed={preferences.viewMode === 'list'}
+					aria-pressed={filesStore.viewMode === 'list'}
 					data-testid="list-toolbar-view-list-btn"
-					onclick={() => preferences.setViewMode('list')}><Icon name="list" /></button
+					onclick={() => filesStore.setViewMode('list')}><Icon name="list" /></button
 				>
 			{/if}
 			{#if showDotfileToggle}

frontend/src/lib/components/ResourceList.svelte

@@ -58,7 +58,7 @@
 	import UserVignette from '$lib/components/UserVignette.svelte';
 	import VirtualList from '$lib/components/VirtualList.svelte';
 	import { t } from '$lib/i18n/index.svelte';
-	import { preferences } from '$lib/stores/preferences.svelte';
+	import { files as filesStore } from '$lib/stores/files.svelte';
 	import { formatBytes } from '$lib/utils/format';
 	import { formatDate, iconNameFromClass, fileIconKindClass } from '$lib/utils/display';
 	import { gridColumns } from '$lib/utils/grid';
@@ -164,7 +164,7 @@
 
 	const isEmpty = $derived(items.length === 0);
 	const viewClass = $derived(
-		preferences.viewMode === 'grid' ? 'files-grid-view' : 'files-list-view'
+		filesStore.viewMode === 'grid' ? 'files-grid-view' : 'files-list-view'
 	);
 	/** Content width, for computing the grid's column count to match auto-fill. */
 	let gridWidth = $state(0);
@@ -458,7 +458,7 @@
 							</span>
 						{/if}
 					</div>
-					{#if preferences.viewMode === 'list'}
+					{#if filesStore.viewMode === 'list'}
 						<!-- Window each section's rows so a large grouped list (e.g. a big
 						     trash, grouped by remaining days) doesn't mount every row. The
 						     grid-grouped branch stays un-windowed: `files-grid-view` is itself
@@ -471,7 +471,7 @@
 					{/if}
 				{/each}
 			</div>
-		{:else if preferences.viewMode === 'list'}
+		{: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}">

frontend/src/lib/components/SkeletonList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { preferences } from '$lib/stores/preferences.svelte';
+	import { files as filesStore } from '$lib/stores/files.svelte';
 
 	interface Props {
 		/** Number of placeholder cards/rows to render (default 6). */
@@ -12,11 +12,9 @@
 </script>
 
 <div class="files-container">
-	<div
-		class={preferences.viewMode === 'grid' ? 'files-grid-view files-skeleton' : 'files-skeleton'}
-	>
+	<div class={filesStore.viewMode === 'grid' ? 'files-grid-view files-skeleton' : 'files-skeleton'}>
 		{#each placeholders as i (i)}
-			{#if preferences.viewMode === 'grid'}
+			{#if filesStore.viewMode === 'grid'}
 				<div class="skeleton-card">
 					<div class="skeleton skeleton-thumb"></div>
 					<div class="skeleton skeleton-line skeleton-line--medium"></div>