cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source 
previous change is breaking playwright tests, need to check later changes
This commit is contained in:
Edouard Vanbelle
2026-07-13 23:16:04 +02:00
parent b18f0dc74a
commit b9d6fa39c0
8 changed files with 57 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/ListToolbar.svelte
+7 -6
View File
@@ -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
+4 -4
View File
@@ -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
+3 -5
View File
@@ -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>
frontend/src/lib/stores/files.svelte.ts
+19 -7
View File
@@ -72,23 +72,35 @@ export type Section =
| 'photos'
| 'music';
// `viewMode` used to live here (localStorage `oxi-view-mode`), but
// moved to the server-side `ui_preferences` bag so the choice
// follows the user across devices. Read via
// `preferences.viewMode` and mutate via `preferences.setViewMode`
// (`lib/stores/preferences.svelte.ts`). Kept `ViewMode` as an
// exported type because template code still needs it for prop
// annotations without pulling in the whole preferences module.
const VIEW_KEY = 'oxi-view-mode';
function readViewMode(): ViewMode {
if (typeof localStorage === 'undefined') return 'grid';
return localStorage.getItem(VIEW_KEY) === 'list' ? 'list' : 'grid';
}
class FilesStore {
currentFolder = $state<string | null>(null);
currentFolderInfo = $state<FolderItem | null>(null);
breadcrumbPath = $state<Array<{ id: string; name: string }>>([]);
// View mode INTENTIONALLY lives here (localStorage) rather than in
// the server-side `preferences` bag. See the note in
// `preferences.svelte.ts::UiPreferences` for the full rationale —
// short version: server persistence broke Playwright test
// isolation (favorites.spec's list-view click leaked into every
// downstream test's context), and view mode isn't a preference
// users have asked to sync across devices.
viewMode = $state<ViewMode>(readViewMode());
section = $state<Section>('files');
isSearchMode = $state(false);
// Reactive set: in-place mutations below drive template/$derived reads.
selection = new SvelteSet<string>();
setViewMode(mode: ViewMode): void {
this.viewMode = mode;
if (typeof localStorage !== 'undefined') localStorage.setItem(VIEW_KEY, mode);
}
clearSelection(): void {
this.selection.clear();
}
frontend/src/lib/stores/files.test.ts
+7 -5
View File
@@ -27,11 +27,13 @@ it('shows the owner as "Me" for the current user and a short id otherwise', () =
expect(ownerLabel('abcdef123456', 'someone-else')).toBe('abcdef12');
});
// View-mode assertions moved to `preferences.svelte.test.ts` — the
// setting now lives on the server-side `ui_preferences` bag via the
// `preferences` store, not on `FilesStore`. What remains of `FilesStore`
// is navigation + selection state, exercised below.
it('toggles selection', () => {
it('persists the view mode and toggles selection', () => {
files.setViewMode('list');
expect(files.viewMode).toBe('list');
expect(localStorage.getItem('oxi-view-mode')).toBe('list');
files.setViewMode('grid');
expect(files.viewMode).toBe('grid');
files.clearSelection();
expect(files.selection.size).toBe(0);
files.toggleSelected('a');
frontend/src/lib/stores/preferences.svelte.ts
+13 -18
View File
@@ -41,22 +41,23 @@ export interface UiPreferences {
* preserved on upload, matching Nextcloud / ownCloud / Seafile.
*/
hide_dotfiles?: boolean;
/**
* App-wide file list view: grid tiles or list rows. Default
* `'grid'`. Migrated from the localStorage `oxi-view-mode` key
* so the choice follows the user across devices — muscle memory
* for "I use list on my laptop, grid on my tablet" is rare;
* consistency across devices is the common case. Public-share
* viewers still use `oxi-share-view` (localStorage) because
* anonymous consumers have no server preferences.
*/
view_mode?: 'grid' | 'list';
// NOTE: view_mode (grid/list) DELIBERATELY stays in localStorage
// (`oxi-view-mode` on `filesStore`). Making it server-persistent
// caused a real Playwright regression: `favorites.spec.ts` clicks
// the list-view toggle, and on the server-backed store that
// preference would then leak into every downstream test's fresh
// browser context — Playwright's default context isolation
// relies on localStorage being fresh per test, which the server
// bag can't provide. Result: files-extra's `Zip-*` folder fell
// outside list view's smaller virtualisation window (~25 vs ~75
// grid items) and `getByTestId` timed out. Google Drive / Finder
// / Dropbox also keep view mode per-device — the sync-across-
// devices UX isn't a strongly-requested pattern.
}
/** Reasonable default for an empty bag or a missing key. */
const DEFAULTS: Required<UiPreferences> = {
hide_dotfiles: false,
view_mode: 'grid'
hide_dotfiles: false
};
/**
@@ -84,8 +85,6 @@ class PreferencesStore {
: DEFAULTS.hide_dotfiles
);
viewMode = $derived<'grid' | 'list'>(this.bag.view_mode === 'list' ? 'list' : DEFAULTS.view_mode);
// ── Mutations ─────────────────────────────────────────────────
private patchTimer: ReturnType<typeof setTimeout> | null = null;
@@ -158,10 +157,6 @@ class PreferencesStore {
toggleHideDotfiles(): void {
this.setHideDotfiles(!this.hideDotfiles);
}
setViewMode(mode: 'grid' | 'list'): void {
this.set({ view_mode: mode });
}
}
export const preferences = new PreferencesStore();