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

Merge pull request #612 from EdouardVanbelle/refactor/front-resource-list

Browse Source 
refactor(front): ResourceList component for all views
This commit is contained in:
Dionisio Pozo
2026-07-18 22:49:52 +02:00
committed by GitHub
parent ffabacbb5b 7fb14c3cae
commit 7ef130890e
9 changed files with 684 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/favorites/+page.svelte
+71 -76
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { SvelteSet } from 'svelte/reactivity';
import Button from '$lib/components/Button.svelte';
import { useOwnerCache } from '$lib/composables/useOwnerCache.svelte';
import { errorToast } from '$lib/utils/errors';
@@ -17,12 +18,13 @@
import { fileDownloadUrl } from '$lib/api/endpoints/files';
import { renameFile, deleteFile } from '$lib/api/endpoints/files';
import { renameFolder, deleteFolder } from '$lib/api/endpoints/folders';
import type { FileItem } from '$lib/api/types';
import type { FileItem, FolderItem } from '$lib/api/types';
import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
import ResourceList, {
isFile,
type ContextAction,
type GroupByDef,
type ResourceEntry
type ItemContext
} from '$lib/components/ResourceList.svelte';
import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
import { t } from '$lib/i18n/index.svelte';
@@ -35,39 +37,27 @@
let reversed = $state(false);
const owners = useOwnerCache(resolveOwnerName);
const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
// Favorites view DELIBERATELY ignores `preferences.hideDotfiles`.
// Rationale: favoriting is an explicit "I want to keep an eye on
// this" action by the user — hiding a starred item on a different
// listing page because it starts with `.` contradicts that intent.
// The hide preference is for reducing incidental clutter in
// algorithmic listings (files/recent/photos), not for overriding
// user-intentional pins. Trash follows the same principle for a
// safety-net reason; the general rule shaping up: explicit-action
// surfaces don't filter, algorithmic surfaces do.
const entries = $derived(
raw.map((it): ResourceEntry => {
const isFile = it.resource_type === 'file';
// §14 provenance: `created_by` names who put the item into
// the system (Files browser / Favorites / Shared semantic).
const ownerId = it.resource.created_by ?? null;
return {
id: it.resource.id,
name: it.resource.name,
kind: it.resource_type,
iconClass: it.resource.icon_class,
path: it.resource.path,
size: isFile ? (it.resource as FileItem).size : null,
date: it.favorited_at,
ownerId,
ownerName: owners.name(ownerId),
isFavorite: true,
category: isFile ? it.resource.category : 'Folder',
modifiedAt: it.resource.modified_at
};
})
// Favorites view DELIBERATELY doesn't set `showDotfileToggle` on
// the ResourceList below — favoriting is an explicit "I want to
// keep an eye on this" action by the user, and hiding a starred
// dotfile here would contradict that intent. The
// `preferences.hideDotfiles` toggle is for reducing incidental
// clutter in algorithmic listings (files / recent / photos), not
// for overriding user-intentional pins. Trash follows the same
// principle for a safety-net reason; the general rule: explicit-
// action surfaces don't filter, algorithmic surfaces do.
//
// ResourceList consumes raw `FileItem | FolderItem`; the favorites
// envelope contributes `favorited_at` via `date` in contextMap. All
// items on this page are favorites — pass every id in `favoriteIds`
// so the star widget lights up universally.
const items = $derived(raw.map((it) => it.resource as FileItem | FolderItem));
const contextMap = $derived(
new Map<string, ItemContext>(
raw.map((it) => [it.resource.id, { date: it.favorited_at } satisfies ItemContext])
)
);
const favoriteIds = $derived(new SvelteSet(items.map((i) => i.id)));
const groupBys: GroupByDef[] = [
{ key: '', label: t('files.name', 'Name'), orderBy: 'name', icon: 'arrow-up-a-z' },
@@ -75,33 +65,33 @@
key: 'owner',
label: t('groupby.owner', 'Owner'),
orderBy: 'owner',
bucketOf: (e) => e.ownerId ?? null,
bucketOf: (item) => item.created_by ?? null,
labelOf: (id) => owners.label(id)
},
{
key: 'type',
label: t('groupby.type', 'Type'),
orderBy: 'type',
bucketOf: (e) => e.category ?? 'other',
bucketOf: (item) => item.category ?? 'other',
labelOf: (k) => typeLabel(k)
},
{
key: 'size',
label: t('groupby.size', 'Size'),
orderBy: 'size',
bucketOf: (e) => sizeBucket(e.kind === 'folder' ? null : e.size)
bucketOf: (item) => sizeBucket(isFile(item) ? item.size : null)
},
{
key: 'favoriteDate',
label: t('groupby.favoriteDate', 'Favorite date'),
orderBy: 'favorited_at',
bucketOf: (e) => dateBucket(e.date)
bucketOf: (_item, ctx) => dateBucket(ctx?.date)
},
{
key: 'modifiedAt',
label: t('groupby.modifiedAt', 'Modified date'),
orderBy: 'modified_at',
bucketOf: (e) => dateBucket(e.modifiedAt)
bucketOf: (item) => dateBucket(item.modified_at)
}
];
@@ -144,22 +134,20 @@
if (shareOpen) void shareDialog.load();
});
function open(entry: ResourceEntry) {
if (entry.kind === 'folder') {
goto(resolve(`/files/${entry.id}`));
function open(item: FileItem | FolderItem) {
if (!isFile(item)) {
goto(resolve(`/files/${item.id}`));
return;
}
const item = byId.get(entry.id);
if (item) {
viewerFile = item.resource as FileItem;
viewerOpen = true;
}
viewerFile = item;
viewerOpen = true;
}
async function unfavorite(entry: ResourceEntry) {
async function unfavorite(item: FileItem | FolderItem) {
const kind = isFile(item) ? 'file' : 'folder';
try {
await removeFavorite(entry.kind, entry.id);
raw = raw.filter((i) => i.resource.id !== entry.id);
await removeFavorite(kind, item.id);
raw = raw.filter((i) => i.resource.id !== item.id);
} catch (e) {
errorToast(e);
}
@@ -172,44 +160,48 @@
let shareOpen = $state(false);
let shareTarget = $state<{ id: string; name: string; kind: 'file' | 'folder' } | null>(null);
async function rename(entry: ResourceEntry) {
function kindOf(item: FileItem | FolderItem): 'file' | 'folder' {
return isFile(item) ? 'file' : 'folder';
}
async function rename(item: FileItem | FolderItem) {
const name = await promptDialog({
title: t('common.rename', 'Rename'),
defaultValue: entry.name,
defaultValue: item.name,
confirmText: t('common.rename', 'Rename')
});
if (!name || name === entry.name) return;
if (!name || name === item.name) return;
try {
if (entry.kind === 'file') await renameFile(entry.id, name);
else await renameFolder(entry.id, name);
if (isFile(item)) await renameFile(item.id, name);
else await renameFolder(item.id, name);
await load(true, orderByForGroup());
} catch (e) {
errorToast(e);
}
}
async function remove(entry: ResourceEntry) {
async function remove(item: FileItem | FolderItem) {
const ok = await confirmDialog({
title: t('common.delete', 'Delete'),
message: t('files.confirm_delete', { name: entry.name }, 'Delete "{{name}}"?'),
message: t('files.confirm_delete', { name: item.name }, 'Delete "{{name}}"?'),
confirmText: t('common.delete', 'Delete'),
danger: true
});
if (!ok) return;
try {
if (entry.kind === 'file') await deleteFile(entry.id);
else await deleteFolder(entry.id);
raw = raw.filter((i) => i.resource.id !== entry.id);
if (isFile(item)) await deleteFile(item.id);
else await deleteFolder(item.id);
raw = raw.filter((i) => i.resource.id !== item.id);
} catch (e) {
errorToast(e);
}
}
function downloadEntry(entry: ResourceEntry) {
if (entry.kind !== 'file') return;
function downloadItem(item: FileItem | FolderItem) {
if (!isFile(item)) return;
const a = document.createElement('a');
a.href = fileDownloadUrl(entry.id);
a.download = entry.name;
a.href = fileDownloadUrl(item.id);
a.download = item.name;
document.body.appendChild(a);
a.click();
a.remove();
@@ -220,14 +212,14 @@
key: 'download',
label: t('common.download', 'Download'),
icon: 'download',
run: downloadEntry
run: downloadItem
},
{
key: 'share',
label: t('files.share', 'Share'),
icon: 'share-alt',
run: (e) => {
shareTarget = { id: e.id, name: e.name, kind: e.kind };
run: (item) => {
shareTarget = { id: item.id, name: item.name, kind: kindOf(item) };
shareOpen = true;
}
},
@@ -235,9 +227,9 @@
key: 'move',
label: t('files.move', 'Move'),
icon: 'arrows-alt',
run: (e) => {
run: (item) => {
moveItems = null;
moveTarget = { id: e.id, name: e.name, kind: e.kind };
moveTarget = { id: item.id, name: item.name, kind: kindOf(item) };
moveOpen = true;
}
},
@@ -247,14 +239,14 @@
// ── Selection + batch ─────────────────────────────────────────────────────
let selectedIds = $state<Set<string>>(new Set());
const selectedEntries = $derived(entries.filter((e) => selectedIds.has(e.id)));
const selectedItems = $derived(items.filter((i) => selectedIds.has(i.id)));
function batchTargets() {
return selectedEntries.map((e) => ({ id: e.id, name: e.name, kind: e.kind }));
return selectedItems.map((i) => ({ id: i.id, name: i.name, kind: kindOf(i) }));
}
function batchDownload() {
for (const e of selectedEntries) downloadEntry(e);
for (const i of selectedItems) downloadItem(i);
}
async function batchDelete() {
@@ -262,7 +254,7 @@
title: t('common.delete', 'Delete'),
message: t(
'files.confirm_delete_n',
{ count: selectedEntries.length },
{ count: selectedItems.length },
'Delete {{count}} item(s)?'
),
confirmText: t('common.delete', 'Delete'),
@@ -271,9 +263,9 @@
if (!ok) return;
try {
await Promise.all(
selectedEntries.map((e) => (e.kind === 'file' ? deleteFile(e.id) : deleteFolder(e.id)))
selectedItems.map((i) => (isFile(i) ? deleteFile(i.id) : deleteFolder(i.id)))
);
const removed = new Set(selectedEntries.map((e) => e.id));
const removed = new Set(selectedItems.map((i) => i.id));
raw = raw.filter((i) => !removed.has(i.resource.id));
selectedIds = new Set();
} catch (e) {
@@ -288,7 +280,10 @@
<ResourceList
title={t('nav.favorites', 'Favorites')}
items={entries}
{items}
{contextMap}
{favoriteIds}
resolveOwnerName={(id) => owners.name(id)}
{loading}
{error}
emptyIcon="star"
frontend/src/routes/favorites/page.test.ts
+4
View File
@@ -14,6 +14,10 @@ vi.mock('$lib/api/endpoints/favorites', () => ({
}));
vi.mock('$lib/api/endpoints/files', () => ({
fileDownloadUrl: () => '/dl',
// ResourceList uses this to build the `<img class="file-thumb">`
// src for the fallback path; tests don't render actual thumbnails
// but the module import needs to succeed.
fileThumbnailUrl: () => '/thumb.png',
renameFile: vi.fn(),
deleteFile: vi.fn()
}));
frontend/src/routes/recent/+page.svelte
+91 -82
View File
@@ -18,16 +18,22 @@
} from '$lib/api/endpoints/favorites';
import { fileDownloadUrl, renameFile, deleteFile } from '$lib/api/endpoints/files';
import { renameFolder, deleteFolder } from '$lib/api/endpoints/folders';
import type { FileItem, ItemType } from '$lib/api/types';
import type { FileItem, FolderItem, ItemType } from '$lib/api/types';
import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
import ResourceList, {
isFile,
type ContextAction,
type GroupByDef,
type ResourceEntry
type ItemContext
} from '$lib/components/ResourceList.svelte';
import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
// `preferences.hideDotfiles` + `isDotfile` are read here only to
// derive `hiddenCount` for the empty-state message — the actual
// filter is inside ResourceList (gated on `showDotfileToggle`).
// `replaceSet` is from perf-round-6: `loadFavoriteIds` mutates
// the reactive SvelteSet in place instead of re-creating it.
import { preferences } from '$lib/stores/preferences.svelte';
import { filterDotfiles } from '$lib/utils/dotfileFilter';
import { isDotfile } from '$lib/utils/dotfileFilter';
import { replaceSet } from '$lib/utils/sets';
import { t } from '$lib/i18n/index.svelte';
@@ -42,36 +48,28 @@
// spares the other favorited rows' readers.
const favoriteIds = new SvelteSet<string>();
const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
const allEntries = $derived(
raw.map((it): ResourceEntry => {
const isFile = it.resource_type === 'file';
// §14 provenance: Recent's mental model is "who touched this
// recently", so `updated_by` (the last mutator) is the right
// signal — distinct from Favorites/Files which use `created_by`.
const ownerId = it.resource.updated_by ?? null;
return {
id: it.resource.id,
name: it.resource.name,
kind: it.resource_type,
iconClass: it.resource.icon_class,
path: it.resource.path,
size: isFile ? (it.resource as FileItem).size : null,
date: it.accessed_at,
ownerId,
ownerName: owners.name(ownerId),
isFavorite: favoriteIds.has(it.resource.id),
category: isFile ? it.resource.category : 'Folder',
modifiedAt: it.resource.modified_at
};
})
// Envelope shape: `accessed_at` → `ctx.date`, `updated_by` → `ctx.ownerId`
// (Recent's provenance semantic — "who touched this recently" — differs
// from Favorites'/Files' `created_by`).
//
// Dotfile hiding is delegated to ResourceList via `showDotfileToggle`
// — the component reads `preferences.hideDotfiles` and drops matching
// rows from every downstream reader (bucketing, rendering, select-
// all). The `hiddenCount` here is derived independently via the
// shared `isDotfile` predicate purely for the empty-state message
// below (distinguishes "genuinely empty" from "everything filtered").
const items = $derived(raw.map((it) => it.resource as FileItem | FolderItem));
const contextMap = $derived(
new Map<string, ItemContext>(
raw.map((it) => [
it.resource.id,
{ date: it.accessed_at, ownerId: it.resource.updated_by ?? null } satisfies ItemContext
])
)
);
const hiddenCount = $derived(
preferences.hideDotfiles ? items.filter((i) => isDotfile(i.name)).length : 0
);
const entries = $derived(filterDotfiles(allEntries, preferences.hideDotfiles));
// Count of items suppressed by the dotfile filter — surfaced in
// the empty-state hint below so a `.eslintrc`-only Recent doesn't
// read as "nothing here yet".
const hiddenCount = $derived(preferences.hideDotfiles ? allEntries.length - entries.length : 0);
const groupBys: GroupByDef[] = [
{ key: '', label: t('files.name', 'Name'), orderBy: 'name', icon: 'arrow-up-a-z' },
@@ -79,33 +77,33 @@
key: 'owner',
label: t('groupby.owner', 'Owner'),
orderBy: 'owner',
bucketOf: (e) => e.ownerId ?? null,
bucketOf: (_item, ctx) => ctx?.ownerId ?? null,
labelOf: (id) => owners.label(id)
},
{
key: 'type',
label: t('groupby.type', 'Type'),
orderBy: 'type',
bucketOf: (e) => e.category ?? 'other',
bucketOf: (item) => item.category ?? 'other',
labelOf: (k) => typeLabel(k)
},
{
key: 'size',
label: t('groupby.size', 'Size'),
orderBy: 'size',
bucketOf: (e) => sizeBucket(e.kind === 'folder' ? null : e.size)
bucketOf: (item) => sizeBucket(isFile(item) ? item.size : null)
},
{
key: 'accessedAt',
label: t('groupby.accessedAt', 'Accessed date'),
orderBy: 'accessed_at',
bucketOf: (e) => dateBucket(e.date)
bucketOf: (_item, ctx) => dateBucket(ctx?.date)
},
{
key: 'modifiedAt',
label: t('groupby.modifiedAt', 'Modified date'),
orderBy: 'modified_at',
bucketOf: (e) => dateBucket(e.modifiedAt)
bucketOf: (item) => dateBucket(item.modified_at)
}
];
@@ -161,29 +159,37 @@
if (shareOpen) void shareDialog.load();
});
function open(entry: ResourceEntry) {
if (entry.kind === 'folder') {
goto(resolve(`/files/${entry.id}`));
return;
}
const item = byId.get(entry.id);
if (item) {
viewerFile = item.resource as FileItem;
viewerOpen = true;
}
function kindOf(item: FileItem | FolderItem): ItemType {
return isFile(item) ? 'file' : 'folder';
}
async function toggleFavorite(entry: ResourceEntry) {
const isFav = favoriteIds.has(entry.id);
function open(item: FileItem | FolderItem) {
if (!isFile(item)) {
goto(resolve(`/files/${item.id}`));
return;
}
viewerFile = item;
viewerOpen = true;
}
// Callback signature is `FileItem | FolderItem` (ResourceList
// hands raw items to `onfavorite` — the pre-migration
// `ResourceEntry` shape is gone). Set mutation is in-place per
// perf-round-6: 1 000 toggles @ N=5 000 dropped from 771.9 ms
// to 1.9 ms by skipping the full-set copy that every reader of
// `favoriteIds` used to see.
async function toggleFavorite(item: FileItem | FolderItem) {
const isFav = favoriteIds.has(item.id);
const kind = kindOf(item);
// Optimistic in-place toggle, reverted on failure.
if (isFav) favoriteIds.delete(entry.id);
else favoriteIds.add(entry.id);
if (isFav) favoriteIds.delete(item.id);
else favoriteIds.add(item.id);
try {
if (isFav) await removeFavorite(entry.kind, entry.id);
else await addFavorite(entry.kind, entry.id);
if (isFav) await removeFavorite(kind, item.id);
else await addFavorite(kind, item.id);
} catch (e) {
if (isFav) favoriteIds.add(entry.id);
else favoriteIds.delete(entry.id);
if (isFav) favoriteIds.add(item.id);
else favoriteIds.delete(item.id);
errorToast(e);
}
}
@@ -211,44 +217,44 @@
let shareOpen = $state(false);
let shareTarget = $state<{ id: string; name: string; kind: ItemType } | null>(null);
async function rename(entry: ResourceEntry) {
async function rename(item: FileItem | FolderItem) {
const name = await promptDialog({
title: t('common.rename', 'Rename'),
defaultValue: entry.name,
defaultValue: item.name,
confirmText: t('common.rename', 'Rename')
});
if (!name || name === entry.name) return;
if (!name || name === item.name) return;
try {
if (entry.kind === 'file') await renameFile(entry.id, name);
else await renameFolder(entry.id, name);
if (isFile(item)) await renameFile(item.id, name);
else await renameFolder(item.id, name);
await load(true, orderByForGroup());
} catch (e) {
errorToast(e);
}
}
async function remove(entry: ResourceEntry) {
async function remove(item: FileItem | FolderItem) {
const ok = await confirmDialog({
title: t('common.delete', 'Delete'),
message: t('files.confirm_delete', { name: entry.name }, 'Delete "{{name}}"?'),
message: t('files.confirm_delete', { name: item.name }, 'Delete "{{name}}"?'),
confirmText: t('common.delete', 'Delete'),
danger: true
});
if (!ok) return;
try {
if (entry.kind === 'file') await deleteFile(entry.id);
else await deleteFolder(entry.id);
raw = raw.filter((i) => i.resource.id !== entry.id);
if (isFile(item)) await deleteFile(item.id);
else await deleteFolder(item.id);
raw = raw.filter((i) => i.resource.id !== item.id);
} catch (e) {
errorToast(e);
}
}
function downloadEntry(entry: ResourceEntry) {
if (entry.kind !== 'file') return;
function downloadItem(item: FileItem | FolderItem) {
if (!isFile(item)) return;
const a = document.createElement('a');
a.href = fileDownloadUrl(entry.id);
a.download = entry.name;
a.href = fileDownloadUrl(item.id);
a.download = item.name;
document.body.appendChild(a);
a.click();
a.remove();
@@ -259,14 +265,14 @@
key: 'download',
label: t('common.download', 'Download'),
icon: 'download',
run: downloadEntry
run: downloadItem
},
{
key: 'share',
label: t('files.share', 'Share'),
icon: 'share-alt',
run: (e) => {
shareTarget = { id: e.id, name: e.name, kind: e.kind };
run: (item) => {
shareTarget = { id: item.id, name: item.name, kind: kindOf(item) };
shareOpen = true;
}
},
@@ -274,9 +280,9 @@
key: 'move',
label: t('files.move', 'Move'),
icon: 'arrows-alt',
run: (e) => {
run: (item) => {
moveItems = null;
moveTarget = { id: e.id, name: e.name, kind: e.kind };
moveTarget = { id: item.id, name: item.name, kind: kindOf(item) };
moveOpen = true;
}
},
@@ -286,14 +292,14 @@
// ── Selection + batch ─────────────────────────────────────────────────────
let selectedIds = $state<Set<string>>(new Set());
const selectedEntries = $derived(entries.filter((e) => selectedIds.has(e.id)));
const selectedItems = $derived(items.filter((i) => selectedIds.has(i.id)));
function batchTargets() {
return selectedEntries.map((e) => ({ id: e.id, name: e.name, kind: e.kind }));
return selectedItems.map((i) => ({ id: i.id, name: i.name, kind: kindOf(i) }));
}
function batchDownload() {
for (const e of selectedEntries) downloadEntry(e);
for (const i of selectedItems) downloadItem(i);
}
async function batchDelete() {
@@ -301,7 +307,7 @@
title: t('common.delete', 'Delete'),
message: t(
'files.confirm_delete_n',
{ count: selectedEntries.length },
{ count: selectedItems.length },
'Delete {{count}} item(s)?'
),
confirmText: t('common.delete', 'Delete'),
@@ -310,9 +316,9 @@
if (!ok) return;
try {
await Promise.all(
selectedEntries.map((e) => (e.kind === 'file' ? deleteFile(e.id) : deleteFolder(e.id)))
selectedItems.map((i) => (isFile(i) ? deleteFile(i.id) : deleteFolder(i.id)))
);
const removed = new Set(selectedEntries.map((e) => e.id));
const removed = new Set(selectedItems.map((i) => i.id));
raw = raw.filter((i) => !removed.has(i.resource.id));
selectedIds = new Set();
} catch (e) {
@@ -330,7 +336,10 @@
<ResourceList
title={t('nav.recent', 'Recent')}
items={entries}
{items}
{contextMap}
{favoriteIds}
resolveOwnerName={(id) => owners.name(id)}
{loading}
{error}
emptyIcon={hiddenCount > 0 ? 'eye-slash' : 'clock'}
@@ -362,7 +371,7 @@
onselectionchange={(ids) => (selectedIds = ids)}
>
{#snippet toolbar()}
{#if entries.length > 0}
{#if items.length > 0}
<Button icon="broom" data-testid="recent-clear-btn" onclick={clearAll}
>{t('recent.clear', 'Clear recent')}</Button
>
frontend/src/routes/shared-with-me/+page.svelte
+31 -43
View File
@@ -5,12 +5,13 @@
import { onMount } from 'svelte';
import { dateBucket, resolveOwnerName, typeLabel } from '$lib/api/endpoints/favorites';
import { fetchSharedWithMe, type IncomingGrantItem } from '$lib/api/endpoints/grants';
import type { FileItem } from '$lib/api/types';
import type { FileItem, FolderItem } from '$lib/api/types';
import { lazyComponent } from '$lib/composables/lazyComponent.svelte';
import { useOwnerCache } from '$lib/composables/useOwnerCache.svelte';
import ResourceList, {
isFile,
type GroupByDef,
type ResourceEntry
type ItemContext
} from '$lib/components/ResourceList.svelte';
import { t } from '$lib/i18n/index.svelte';
import { session } from '$lib/stores/session.svelte';
@@ -31,36 +32,24 @@
const sharers = useOwnerCache(resolveOwnerName);
const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
// Drive resources also surface in `/api/grants/incoming/resources`
// since the role_grants rewrite, but they don't belong in the
// file/folder ResourceList — they're reached through the drive
// picker / breadcrumb. Filter them out so the row UI keeps its
// file|folder type contract.
const fileFolderGrants = $derived(raw.filter((it) => it.resource_type !== 'drive'));
const entries = $derived(
// Drive resources also surface in `/api/grants/incoming/resources`
// since the role_grants rewrite, but they don't belong in the
// file/folder ResourceList — they're reached through the drive
// picker / breadcrumb. Filter them out here so the row UI keeps
// its file|folder type contract.
raw
.filter((it) => it.resource_type !== 'drive')
.map((it): ResourceEntry => {
const isFile = it.resource_type === 'file';
return {
id: it.resource.id,
name: it.resource.name,
kind: it.resource_type as 'file' | 'folder',
iconClass: it.resource.icon_class,
// The sharer becomes the "owner" surface — ResourceList renders
// `<UserVignette userId>` (avatar / name / external badge),
// resolved lazily via `/api/users/{id}`. `path` keeps the
// resource's real location so the row still shows where it
// lives, not a translated string.
ownerId: it.granted_by ?? null,
ownerName: sharers.name(it.granted_by),
path: it.resource.path,
size: isFile ? (it.resource as FileItem).size : null,
date: it.granted_at,
category: isFile ? it.resource.category : 'Folder'
};
})
// `granted_at` → `ctx.date`; `granted_by` overrides the owner column
// so the sharer shows up in the vignette (rather than the resource's
// intrinsic `created_by`, which is a stranger for grantees).
const items = $derived(fileFolderGrants.map((it) => it.resource as FileItem | FolderItem));
const contextMap = $derived(
new Map<string, ItemContext>(
fileFolderGrants.map((it) => [
it.resource.id,
{ date: it.granted_at, ownerId: it.granted_by ?? null } satisfies ItemContext
])
)
);
// Server-supported sort_by values (see grant_handler.rs:615):
@@ -75,21 +64,21 @@
key: 'sharedBy',
label: t('groupby.sharedBy', 'Shared by'),
orderBy: 'granted_by',
bucketOf: (e) => e.ownerId ?? null,
bucketOf: (_item, ctx) => ctx?.ownerId ?? null,
labelOf: (id) => sharers.label(id)
},
{
key: 'type',
label: t('groupby.type', 'Type'),
orderBy: 'type',
bucketOf: (e) => e.category ?? 'other',
bucketOf: (item) => item.category ?? 'other',
labelOf: (k) => typeLabel(k)
},
{
key: 'sharedAt',
label: t('groupby.sharedAt', 'Shared date'),
orderBy: 'granted_at',
bucketOf: (e) => dateBucket(e.date)
bucketOf: (_item, ctx) => dateBucket(ctx?.date)
}
];
@@ -128,16 +117,13 @@
if (viewerOpen) void fileViewer.load();
});
function open(entry: ResourceEntry) {
if (entry.kind === 'folder') {
goto(resolve(`/files/${entry.id}`));
function open(item: FileItem | FolderItem) {
if (!isFile(item)) {
goto(resolve(`/files/${item.id}`));
return;
}
const item = byId.get(entry.id);
if (item) {
viewerFile = item.resource as FileItem;
viewerOpen = true;
}
viewerFile = item;
viewerOpen = true;
}
onMount(() => load(true));
@@ -168,7 +154,9 @@
<ResourceList
title={t('nav.shared_with_me', 'Shared with me')}
items={entries}
{items}
{contextMap}
resolveOwnerName={(id) => sharers.name(id)}
{loading}
{error}
emptyText={t('shared_with_me.empty', 'Nothing has been shared with you yet.')}
frontend/src/routes/trash/+page.svelte
+54 -47
View File
@@ -11,11 +11,12 @@
restoreTrashItem
} from '$lib/api/endpoints/trash';
import { dateBucket, sizeBucket, typeLabel } from '$lib/api/endpoints/favorites';
import type { Drive, FileItem, TrashResourceItem } from '$lib/api/types';
import type { Drive, FileItem, FolderItem, TrashResourceItem } from '$lib/api/types';
import Icon from '$lib/icons/Icon.svelte';
import ResourceList, {
isFile,
type GroupByDef,
type ResourceEntry
type ItemContext
} from '$lib/components/ResourceList.svelte';
import { confirmDialog } from '$lib/stores/dialogs.svelte';
import { t } from '$lib/i18n/index.svelte';
@@ -30,33 +31,32 @@
let groupBy = $state('remainingDays');
let reversed = $state(false);
// Trash view DELIBERATELY ignores `preferences.hideDotfiles`.
// Rationale: trash is a safety net — hiding items here would let
// an accidentally-trashed dotfile ride the retention timer to
// permanent deletion without ever being visible for recovery.
// The hide preference is UI cosmetics elsewhere; here it would
// become a footgun. Same reasoning applies to any future
// "review before destructive action" surface.
const entries = $derived(
raw.map((it): ResourceEntry => {
const isFile = it.resource_type === 'file';
return {
id: it.resource.id,
name: it.resource.name,
kind: it.resource_type,
iconClass: it.resource.icon_class,
path: it.resource.path,
size: isFile ? (it.resource as FileItem).size : null,
// `date` carries the deletion date — rendered as an expiry chip.
date: it.deletion_date,
category: isFile ? it.resource.category : 'Folder',
modifiedAt: it.trashed_at,
// D2b: surface drive_id so the Drive group-by can bucket by it.
// Reuses the existing `ownerId` slot on ResourceEntry — both
// represent a UUID the listing pivots on; no new field needed.
ownerId: it.drive_id
};
})
// Trash view DELIBERATELY doesn't set `showDotfileToggle` on the
// ResourceList below. Trash is a safety net — hiding items here
// would let an accidentally-trashed dotfile ride the retention
// timer to permanent deletion without ever being visible for
// recovery. The `preferences.hideDotfiles` toggle is UI cosmetics
// elsewhere; here it would become a footgun. Same reasoning
// applies to any future "review before destructive action" surface.
//
// Items go to ResourceList as raw `FileItem | FolderItem`; the trash
// envelope's extra fields (`deletion_date`, `trashed_at`, `drive_id`)
// travel through `contextMap`, which page-provided group-by / render
// callbacks read via the `ctx` parameter.
const items = $derived(raw.map((it) => it.resource as FileItem | FolderItem));
const contextMap = $derived(
new Map<string, ItemContext>(
raw.map((it) => [
it.resource.id,
{
date: it.deletion_date,
extras: {
driveId: it.drive_id,
trashedAt: it.trashed_at
}
}
])
)
);
// "Drive" group rank: default-personal first, then secondary personal, then
@@ -89,33 +89,39 @@
key: 'drive',
label: t('trash.groupby.drive', 'Drive'),
orderBy: 'name',
bucketOf: (e) => (e.ownerId ? driveBucketKey(e.ownerId) : null),
bucketOf: (_item, ctx) => {
const driveId = ctx?.extras?.driveId;
return typeof driveId === 'string' ? driveBucketKey(driveId) : null;
},
labelOf: driveBucketLabel
},
{
key: 'remainingDays',
label: t('trash.groupby.remaining_days', 'Remaining days'),
orderBy: 'deletion_date',
bucketOf: (e) => remainingDaysBucket(e.date)
bucketOf: (_item, ctx) => remainingDaysBucket(ctx?.date)
},
{
key: 'type',
label: t('groupby.type', 'Type'),
orderBy: 'type',
bucketOf: (e) => e.category ?? 'other',
bucketOf: (item) => item.category ?? 'other',
labelOf: (k) => typeLabel(k)
},
{
key: 'size',
label: t('groupby.size', 'Size'),
orderBy: 'size',
bucketOf: (e) => sizeBucket(e.kind === 'folder' ? null : e.size)
bucketOf: (item) => sizeBucket(isFile(item) ? item.size : null)
},
{
key: 'trashedTime',
label: t('trash.groupby.trashed_time', 'Trashed time'),
orderBy: 'trashed_at',
bucketOf: (e) => dateBucket(e.modifiedAt)
bucketOf: (_item, ctx) => {
const t = ctx?.extras?.trashedAt;
return dateBucket(typeof t === 'number' ? t : null);
}
}
];
@@ -149,9 +155,9 @@
await load(true, orderByForGroup());
}
async function restore(entry: ResourceEntry) {
async function restore(item: FileItem | FolderItem) {
try {
await restoreTrashItem(entry.id);
await restoreTrashItem(item.id);
ui.notify(t('trash.restored', 'Restored'), 'success');
await reloadFromTop();
} catch (e) {
@@ -159,7 +165,7 @@
}
}
async function purge(entry: ResourceEntry) {
async function purge(item: FileItem | FolderItem) {
const ok = await confirmDialog({
title: t('trash.delete', 'Delete permanently'),
message: t('trash.confirm_delete', 'Permanently delete this item? This cannot be undone.'),
@@ -168,7 +174,7 @@
});
if (!ok) return;
try {
await deleteTrashItem(entry.id);
await deleteTrashItem(item.id);
await reloadFromTop();
} catch (e) {
errorToast(e);
@@ -258,7 +264,8 @@
<ResourceList
title={t('nav.trash', 'Trash')}
items={entries}
{items}
{contextMap}
{loading}
{error}
emptyIcon="trash"
@@ -276,15 +283,15 @@
}}
>
{#snippet toolbar()}
{#if entries.length > 0}
{#if items.length > 0}
<button class="btn btn-danger" data-testid="trash-empty-btn" onclick={purgeAll}>
<Icon name="trash" />
{t('trash.empty_action', 'Empty trash')}
</button>
{/if}
{/snippet}
{#snippet dateCell(entry)}
{@const chip = expiryChip(entry.date)}
{#snippet dateCell(_item, ctx)}
{@const chip = expiryChip(ctx?.date)}
<span class="expiry-chip expiry-chip--{chip.tier}">
<Icon name={chip.icon} class="expiry-chip__icon" />
{chip.label}
@@ -307,20 +314,20 @@
{/if}
{/if}
{/snippet}
{#snippet actions(entry)}
{#snippet actions(item)}
<button
class="btn-action"
data-testid={`trash-restore-btn-${entry.id}`}
data-testid={`trash-restore-btn-${item.id}`}
title={t('trash.restore', 'Restore')}
onclick={() => restore(entry)}
onclick={() => restore(item)}
>
<Icon name="undo" />
</button>
<button
class="btn-action btn-action--delete"
data-testid={`trash-delete-btn-${entry.id}`}
data-testid={`trash-delete-btn-${item.id}`}
title={t('trash.delete', 'Delete permanently')}
onclick={() => purge(entry)}
onclick={() => purge(item)}
>
<Icon name="trash" />
</button>