visual continunity
This commit is contained in:
Bradley Nelson
@@ -1,39 +1,272 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import FileRow from '$lib/components/FileRow.svelte';
|
||||
import ResourceListShell from '$lib/components/ResourceListShell.svelte';
|
||||
import {
|
||||
dateBucket,
|
||||
fetchFavoritesPage,
|
||||
removeFavorite,
|
||||
resolveOwnerName,
|
||||
sizeBucket,
|
||||
typeLabel,
|
||||
type FavoritesResourceItem
|
||||
} from '$lib/api/endpoints/favorites';
|
||||
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 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';
|
||||
import ResourceList, {
|
||||
type ContextAction,
|
||||
type GroupByDef,
|
||||
type ResourceEntry
|
||||
} 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';
|
||||
import { formatDate } from '$lib/utils/display';
|
||||
|
||||
let items = $state<FavoritesResourceItem[]>([]);
|
||||
let raw = $state<FavoritesResourceItem[]>([]);
|
||||
let cursor = $state<string | undefined>(undefined);
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let groupBy = $state('');
|
||||
let reversed = $state(false);
|
||||
let ownerNames = $state<Record<string, string>>({});
|
||||
|
||||
async function load(reset = false) {
|
||||
const byId = $derived(new Map(raw.map((it) => [it.resource.id, it])));
|
||||
|
||||
const entries = $derived(
|
||||
raw.map((it): ResourceEntry => {
|
||||
const isFile = it.resource_type === 'file';
|
||||
const ownerId = it.resource.owner_id ?? 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: ownerId ? (ownerNames[ownerId] ?? null) : null,
|
||||
isFavorite: true,
|
||||
category: isFile ? it.resource.category : 'Folder',
|
||||
modifiedAt: it.resource.modified_at
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
const groupBys: GroupByDef[] = [
|
||||
{ key: '', label: t('files.name', 'Name'), orderBy: 'name' },
|
||||
{
|
||||
key: 'owner',
|
||||
label: t('groupby.owner', 'Owner'),
|
||||
orderBy: 'owner',
|
||||
bucketOf: (e) => e.ownerId ?? null,
|
||||
labelOf: (id) => ownerNames[id] ?? id
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: t('groupby.type', 'Type'),
|
||||
orderBy: 'type',
|
||||
bucketOf: (e) => e.category ?? 'other',
|
||||
labelOf: (k) => typeLabel(k)
|
||||
},
|
||||
{
|
||||
key: 'size',
|
||||
label: t('groupby.size', 'Size'),
|
||||
orderBy: 'size',
|
||||
bucketOf: (e) => sizeBucket(e.kind === 'folder' ? null : e.size)
|
||||
},
|
||||
{
|
||||
key: 'favoriteDate',
|
||||
label: t('groupby.favoriteDate', 'Favorite date'),
|
||||
orderBy: 'favorited_at',
|
||||
bucketOf: (e) => dateBucket(e.date)
|
||||
},
|
||||
{
|
||||
key: 'modifiedAt',
|
||||
label: t('groupby.modifiedAt', 'Modified date'),
|
||||
orderBy: 'modified_at',
|
||||
bucketOf: (e) => dateBucket(e.modifiedAt)
|
||||
}
|
||||
];
|
||||
|
||||
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;
|
||||
try {
|
||||
const page = await fetchFavoritesPage({ cursor: reset ? undefined : cursor });
|
||||
items = reset ? page.items : [...items, ...page.items];
|
||||
const page = await fetchFavoritesPage({
|
||||
cursor: reset ? undefined : cursor,
|
||||
orderBy,
|
||||
reverse: rev,
|
||||
resourceTypes: ['file', 'folder']
|
||||
});
|
||||
raw = reset ? page.items : [...raw, ...page.items];
|
||||
cursor = page.next_cursor;
|
||||
void resolveOwners(page.items);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : String(e);
|
||||
console.error('favorites: load error', e);
|
||||
error = t('errors_loadFailed', 'Failed to load items');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function unfavorite(item: FavoritesResourceItem) {
|
||||
function orderByForGroup(): string {
|
||||
return groupBys.find((g) => g.key === groupBy)?.orderBy ?? 'name';
|
||||
}
|
||||
|
||||
let viewerOpen = $state(false);
|
||||
let viewerFile = $state<FileItem | null>(null);
|
||||
|
||||
function open(entry: ResourceEntry) {
|
||||
if (entry.kind === 'folder') {
|
||||
goto(`/files/${entry.id}`);
|
||||
return;
|
||||
}
|
||||
const item = byId.get(entry.id);
|
||||
if (item) {
|
||||
viewerFile = item.resource as FileItem;
|
||||
viewerOpen = true;
|
||||
}
|
||||
}
|
||||
|
||||
async function unfavorite(entry: ResourceEntry) {
|
||||
try {
|
||||
await removeFavorite(item.resource_type, item.resource.id);
|
||||
items = items.filter((i) => i.resource.id !== item.resource.id);
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Context-menu actions ──────────────────────────────────────────────────
|
||||
let moveOpen = $state(false);
|
||||
let moveTarget = $state<{ id: string; name: string; kind: 'file' | 'folder' } | null>(null);
|
||||
let moveItems = $state<{ id: string; name: string; kind: 'file' | 'folder' }[] | null>(null);
|
||||
let shareOpen = $state(false);
|
||||
let shareTarget = $state<{ id: string; name: string; kind: 'file' | 'folder' } | null>(null);
|
||||
|
||||
async function rename(entry: ResourceEntry) {
|
||||
const name = await promptDialog({
|
||||
title: t('common.rename', 'Rename'),
|
||||
defaultValue: entry.name,
|
||||
confirmText: t('common.rename', 'Rename')
|
||||
});
|
||||
if (!name || name === entry.name) return;
|
||||
try {
|
||||
if (entry.kind === 'file') await renameFile(entry.id, name);
|
||||
else await renameFolder(entry.id, name);
|
||||
await load(true, orderByForGroup());
|
||||
} catch (e) {
|
||||
ui.notify(e instanceof Error ? e.message : String(e), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(entry: ResourceEntry) {
|
||||
const ok = await confirmDialog({
|
||||
title: t('common.delete', 'Delete'),
|
||||
message: t('files.confirm_delete', { name: entry.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);
|
||||
} catch (e) {
|
||||
ui.notify(e instanceof Error ? e.message : String(e), 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function downloadEntry(entry: ResourceEntry) {
|
||||
if (entry.kind !== 'file') return;
|
||||
const a = document.createElement('a');
|
||||
a.href = fileDownloadUrl(entry.id);
|
||||
a.download = entry.name;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
}
|
||||
|
||||
const contextActions: ContextAction[] = [
|
||||
{
|
||||
key: 'download',
|
||||
label: t('common.download', 'Download'),
|
||||
icon: 'download',
|
||||
run: downloadEntry
|
||||
},
|
||||
{
|
||||
key: 'share',
|
||||
label: t('files.share', 'Share'),
|
||||
icon: 'share-alt',
|
||||
run: (e) => {
|
||||
shareTarget = { id: e.id, name: e.name, kind: e.kind };
|
||||
shareOpen = true;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'move',
|
||||
label: t('files.move', 'Move'),
|
||||
icon: 'arrows-alt',
|
||||
run: (e) => {
|
||||
moveItems = null;
|
||||
moveTarget = { id: e.id, name: e.name, kind: e.kind };
|
||||
moveOpen = true;
|
||||
}
|
||||
},
|
||||
{ key: 'rename', label: t('common.rename', 'Rename'), icon: 'pen', run: rename },
|
||||
{ key: 'delete', label: t('common.delete', 'Delete'), icon: 'trash', danger: true, run: remove }
|
||||
];
|
||||
|
||||
// ── Selection + batch ─────────────────────────────────────────────────────
|
||||
let selectedIds = $state<Set<string>>(new Set());
|
||||
const selectedEntries = $derived(entries.filter((e) => selectedIds.has(e.id)));
|
||||
|
||||
function batchTargets() {
|
||||
return selectedEntries.map((e) => ({ id: e.id, name: e.name, kind: e.kind }));
|
||||
}
|
||||
|
||||
function batchDownload() {
|
||||
for (const e of selectedEntries) downloadEntry(e);
|
||||
}
|
||||
|
||||
async function batchDelete() {
|
||||
const ok = await confirmDialog({
|
||||
title: t('common.delete', 'Delete'),
|
||||
message: t(
|
||||
'files.confirm_delete_n',
|
||||
{ count: selectedEntries.length },
|
||||
'Delete {{count}} item(s)?'
|
||||
),
|
||||
confirmText: t('common.delete', 'Delete'),
|
||||
danger: true
|
||||
});
|
||||
if (!ok) return;
|
||||
try {
|
||||
await Promise.all(
|
||||
selectedEntries.map((e) => (e.kind === 'file' ? deleteFile(e.id) : deleteFolder(e.id)))
|
||||
);
|
||||
const removed = new Set(selectedEntries.map((e) => e.id));
|
||||
raw = raw.filter((i) => !removed.has(i.resource.id));
|
||||
selectedIds = new Set();
|
||||
} catch (e) {
|
||||
ui.notify(e instanceof Error ? e.message : String(e), 'error');
|
||||
}
|
||||
@@ -44,45 +277,58 @@
|
||||
|
||||
<svelte:head><title>{t('nav.favorites', 'Favorites')} · OxiCloud</title></svelte:head>
|
||||
|
||||
<h1 class="page-title">{t('nav.favorites', 'Favorites')}</h1>
|
||||
|
||||
<ResourceListShell
|
||||
<ResourceList
|
||||
title={t('nav.favorites', 'Favorites')}
|
||||
items={entries}
|
||||
{loading}
|
||||
{error}
|
||||
empty={items.length === 0}
|
||||
emptyText={t('favorites.empty', 'No favorites yet.')}
|
||||
emptyIcon="star"
|
||||
emptyText={t('favorites.empty_state', 'No favorites yet')}
|
||||
emptyHint={t('favorites.empty_hint', 'Star files and folders to find them here quickly')}
|
||||
hasMore={!!cursor}
|
||||
onloadmore={() => load(false)}
|
||||
onloadmore={() => load(false, orderByForGroup())}
|
||||
onopen={open}
|
||||
onfavorite={unfavorite}
|
||||
showOwner
|
||||
selectable
|
||||
{contextActions}
|
||||
{groupBys}
|
||||
bind:groupBy
|
||||
bind:reversed
|
||||
onreload={(orderBy, rev) => {
|
||||
cursor = undefined;
|
||||
load(true, orderBy, rev);
|
||||
}}
|
||||
onselectionchange={(ids) => (selectedIds = ids)}
|
||||
>
|
||||
{#each items as item (item.resource.id)}
|
||||
<FileRow
|
||||
name={item.resource.name}
|
||||
iconClass={item.resource.icon_class}
|
||||
subtitle={item.resource.path}
|
||||
date={formatDate(item.favorited_at)}
|
||||
{#snippet batchToolbar()}
|
||||
<button class="btn btn-secondary" onclick={batchDownload}>
|
||||
<Icon name="download" />
|
||||
{t('common.download', 'Download')}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
onclick={() => {
|
||||
moveTarget = null;
|
||||
moveItems = batchTargets();
|
||||
moveOpen = true;
|
||||
}}><Icon name="arrows-alt" /> {t('files.move', 'Move')}</button
|
||||
>
|
||||
{#snippet actions()}
|
||||
<button class="link-btn" onclick={() => unfavorite(item)}>
|
||||
{t('favorites.remove', 'Remove')}
|
||||
</button>
|
||||
{/snippet}
|
||||
</FileRow>
|
||||
{/each}
|
||||
</ResourceListShell>
|
||||
<button class="btn btn-danger" onclick={batchDelete}>
|
||||
<Icon name="trash" />
|
||||
{t('common.delete', 'Delete')}
|
||||
</button>
|
||||
{/snippet}
|
||||
</ResourceList>
|
||||
|
||||
<style>
|
||||
.page-title {
|
||||
margin: 0;
|
||||
padding: 1rem 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text-heading);
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
<FileViewer bind:open={viewerOpen} file={viewerFile} />
|
||||
<MoveDialog
|
||||
bind:open={moveOpen}
|
||||
item={moveTarget}
|
||||
items={moveItems}
|
||||
onmoved={() => {
|
||||
selectedIds = new Set();
|
||||
load(true, orderByForGroup());
|
||||
}}
|
||||
/>
|
||||
<ShareDialog bind:open={shareOpen} item={shareTarget} />
|
||||
|
||||
Reference in New Issue
Block a user