iu/ds-galo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

feat: photo multiselect, move/copy, trash and compact chrome

Browse Source 
- backend: soft delete + trash (photos.deleted_at, migration 000005), GET /trash, restore, permanent delete with storage-key refcount (S3 objects removed only when no other album references them); batch endpoints photo-batch/{delete,move,copy} - metadata only, copies clone rows sharing storage keys
- frontend: Ctrl/Shift multiselect; right-panel 'Действия' as icon text rows (Открыть (просмотр), Переместить, Копировать, Удалить); drag selected photos onto rail album -> TransferDialog; /trash route; trash entry as last item in the left rail; empty right panel hidden on overview
- frontend: compact top bars (app header and viewer), compact theme switcher
- openspec: sync lightroom-workspace-ui artifacts (photos/ui-workspace specs, design #20-24, tasks 9.11-9.17)
This commit is contained in:
iu
2026-10-10 22:13:17 +03:00
parent 78996bc053
commit 2d6a3fea1a
27 changed files with 1097 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/api.ts
+19 -1
View File
@@ -1,6 +1,6 @@
import { goto } from '$app/navigation';
import { auth, type Tokens, type User } from './stores/auth.svelte';
import type { Preferences } from './types';
import type { Photo, Preferences } from './types';
export class ApiError extends Error {
status: number;
@@ -105,3 +105,21 @@ export const authApi = {
body: preferences
})
};
export const photosApi = {
deleteBatch: (ids: string[]) =>
api<{ deleted: number }>('/photo-batch/delete', { method: 'POST', body: { ids } }),
moveBatch: (ids: string[], albumId: string) =>
api<{ moved: number }>('/photo-batch/move', {
method: 'POST',
body: { ids, album_id: albumId }
}),
copyBatch: (ids: string[], albumId: string) =>
api<{ photos: Photo[] }>('/photo-batch/copy', {
method: 'POST',
body: { ids, album_id: albumId }
}),
trash: () => api<{ photos: Photo[] }>('/trash'),
restore: (id: string) => api<{ photo: Photo }>(`/photos/${id}/restore`, { method: 'POST' }),
permanentDelete: (id: string) => api(`/photos/${id}/permanent`, { method: 'DELETE' })
};
frontend/src/lib/components/AlbumPanel.svelte
+78 -4
View File
@@ -1,14 +1,17 @@
<script lang="ts">
import { page } from '$app/stores';
import { api } from '$lib/api';
import { goto } from '$app/navigation';
import { api, photosApi } from '$lib/api';
import Icon from './Icon.svelte';
import CoverPicker from './CoverPicker.svelte';
import Comments from './Comments.svelte';
import ConfirmDialog from './ConfirmDialog.svelte';
import PanelSection from './PanelSection.svelte';
import PhotoInfoSettingsDialog from './PhotoInfoSettingsDialog.svelte';
import { albums } from '$lib/stores/albums.svelte';
import { auth } from '$lib/stores/auth.svelte';
import { selection } from '$lib/stores/selection.svelte';
import { transfer } from '$lib/stores/transfer.svelte';
import { buildExifRows, EXIF_BASE, EXIF_CATALOG, EXIF_LABELS } from '$lib/exif';
import type { Album, Photo, Preferences } from '$lib/types';
@@ -26,7 +29,8 @@
let savingName = $state(false);
let nameError = $state('');
const selectedPhoto = $derived(selection.albumId === albumId ? selection.photo : null);
const selectedItems = $derived(selection.albumId === albumId ? selection.items : []);
const selectedPhoto = $derived(selectedItems.length === 1 ? selectedItems[0] : null);
const panelPhoto = $derived(photoId ? photo : selectedPhoto);
const canEdit = $derived(role === 'owner' || role === 'admin');
@@ -54,6 +58,26 @@
let settingsOpen = $state(false);
let showAll = $state(false);
let savingPrefs = $state(false);
let pendingDeleteSelected = $state(false);
let deletingSelected = $state(false);
async function deleteSelected() {
deletingSelected = true;
try {
await photosApi.deleteBatch(selection.ids);
selection.clear();
pendingDeleteSelected = false;
} catch (e) {
error = (e as Error).message;
} finally {
deletingSelected = false;
}
}
function openSelected() {
const first = selectedItems[0];
if (first) goto(`/albums/${albumId}/photos/${first.id}`);
}
async function savePreferences(next: Preferences) {
savingPrefs = true;
@@ -105,7 +129,7 @@
$effect(() => {
// сброс временного состояния панели при выборе другого фото в сетке
selectedPhoto?.id;
selection.ids.join(',');
editingName = false;
nameError = '';
showAll = false;
@@ -129,7 +153,7 @@
body: { original_filename: nameDraft.trim() }
});
photo = data.photo;
if (selectedPhoto?.id === data.photo.id) selection.select(albumId, data.photo);
if (selectedItems.some((p) => p.id === data.photo.id)) selection.replace(data.photo);
editingName = false;
} catch (e) {
nameError = (e as Error).message;
@@ -169,8 +193,45 @@
const metaRow = 'text-text-muted flex justify-between gap-2 py-0.5 text-xs';
</script>
{#snippet selectionActions()}
<div class="border-border border-b p-4">
<p class="text-text-subtle mb-1 text-xs font-semibold tracking-wide uppercase">Действия</p>
<nav class="space-y-0.5">
<button type="button" class={navLink} onclick={openSelected}>
<Icon name="image" class="size-4" />
Открыть (просмотр)
</button>
<button
type="button"
class={navLink}
onclick={() => transfer.start(selection.ids, null, 'move')}
>
<Icon name="arrow_back" class="size-4" />
Переместить
</button>
<button
type="button"
class={navLink}
onclick={() => transfer.start(selection.ids, null, 'copy')}
>
<Icon name="content_copy" class="size-4" />
Копировать
</button>
<button
type="button"
class="text-danger hover:bg-bg-muted flex items-center gap-2 rounded-md px-2 py-1.5 text-sm"
onclick={() => (pendingDeleteSelected = true)}
>
<Icon name="delete" class="size-4" />
Удалить
</button>
</nav>
</div>
{/snippet}
{#if panelPhoto}
{@const p = panelPhoto}
{#if !photoId}{@render selectionActions()}{/if}
<div>
<div class="p-4">
{#if editingName}
@@ -293,6 +354,8 @@
onClose={() => (settingsOpen = false)}
/>
{/if}
{:else if !photoId && selectedItems.length > 1}
{@render selectionActions()}
{:else if album && !photoId}
<div>
<PanelSection id="album-cover" title="Обложка">
@@ -365,3 +428,14 @@
/>
{/if}
{/if}
{#if pendingDeleteSelected}
<ConfirmDialog
title="Удалить выбранные фото?"
message="{selectedItems.length} фото будут перемещены в корзину."
confirmLabel="Удалить"
busy={deletingSelected}
onConfirm={deleteSelected}
onClose={() => (pendingDeleteSelected = false)}
/>
{/if}
frontend/src/lib/components/AlbumRail.svelte
+53 -2
View File
@@ -5,9 +5,36 @@
import CreateAlbumDialog from './CreateAlbumDialog.svelte';
import { albums } from '$lib/stores/albums.svelte';
import { auth } from '$lib/stores/auth.svelte';
import { transfer } from '$lib/stores/transfer.svelte';
const activeId = $derived($page.params.id ?? '');
const onTrash = $derived($page.url.pathname === '/trash');
let creating = $state(false);
let dropId = $state<string | null>(null);
function onDragOver(ev: DragEvent, albumId: string) {
if (!ev.dataTransfer?.types.includes('application/x-galo-photos')) return;
ev.preventDefault();
ev.dataTransfer.dropEffect = 'move';
dropId = albumId;
}
function onDragLeave(albumId: string) {
if (dropId === albumId) dropId = null;
}
function onDrop(ev: DragEvent, albumId: string) {
dropId = null;
const raw = ev.dataTransfer?.getData('application/x-galo-photos');
if (!raw) return;
ev.preventDefault();
try {
const ids = JSON.parse(raw) as string[];
transfer.start(ids, albumId);
} catch {
/* ignore */
}
}
$effect(() => {
if (auth.isAuthenticated && !albums.loaded) albums.load();
@@ -42,11 +69,16 @@
<li>
<a
href="/albums/{album.id}"
class="flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors {album.id ===
class="flex items-center gap-2.5 rounded-md border px-2 py-1.5 text-sm transition-colors {album.id ===
activeId
? 'bg-bg-muted text-text'
: 'text-text-muted hover:bg-bg-muted hover:text-text'}"
: 'text-text-muted hover:bg-bg-muted hover:text-text'} {dropId === album.id
? 'border-primary ring-primary ring-2'
: 'border-transparent'}"
aria-current={album.id === activeId ? 'page' : undefined}
ondragover={(e) => onDragOver(e, album.id)}
ondragleave={() => onDragLeave(album.id)}
ondrop={(e) => onDrop(e, album.id)}
>
<span
class="bg-bg-muted border-border flex size-9 shrink-0 items-center justify-center overflow-hidden rounded border"
@@ -69,6 +101,25 @@
</ul>
{/if}
{#if auth.isAuthenticated}
<div class="border-border mt-auto border-t p-2">
<a
href="/trash"
class="flex items-center gap-2.5 rounded-md border px-2 py-1.5 text-sm transition-colors {onTrash
? 'bg-bg-muted text-text border-transparent'
: 'text-text-muted hover:bg-bg-muted hover:text-text border-transparent'}"
aria-current={onTrash ? 'page' : undefined}
>
<span
class="bg-bg-muted border-border flex size-9 shrink-0 items-center justify-center overflow-hidden rounded border"
>
<Icon name="delete" class="size-4 text-text-subtle" />
</span>
<span class="truncate">Корзина</span>
</a>
</div>
{/if}
{#if creating}
<CreateAlbumDialog
onClose={() => (creating = false)}
frontend/src/lib/components/AppShell.svelte
+21 -20
View File
@@ -11,9 +11,10 @@
children: Snippet;
rail?: Snippet;
panel?: Snippet;
panelVisible?: boolean;
}
let { children, rail, panel }: Props = $props();
let { children, rail, panel, panelVisible = true }: Props = $props();
let railOpen = $state(false);
let panelOpen = $state(false);
@@ -101,40 +102,40 @@
<div class="bg-canvas text-text flex h-screen flex-col overflow-hidden">
<header
class="border-border bg-chrome flex shrink-0 items-center justify-between gap-3 border-b px-3 py-2.5 sm:px-4"
class="border-border bg-chrome flex shrink-0 items-center justify-between gap-2 border-b px-2 py-0.5 sm:px-3"
>
<div class="flex min-w-0 items-center gap-2">
<div class="flex min-w-0 items-center gap-1">
<button
type="button"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5 lg:hidden"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1 lg:hidden"
aria-label="Альбомы"
title="Альбомы"
onclick={() => (railOpen = true)}
>
<Icon name="menu" />
<Icon name="menu" class="size-4" />
</button>
<a href="/" class="inline-flex items-center gap-2 truncate text-lg font-semibold">
<Icon name="photo_camera" />
<a href="/" class="inline-flex items-center gap-1.5 truncate text-sm font-semibold">
<Icon name="photo_camera" class="size-4" />
Galo
</a>
</div>
<div class="flex items-center gap-2 sm:gap-3">
{#if panel}
<div class="flex items-center gap-1 sm:gap-1.5">
{#if panel && panelVisible}
<button
type="button"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5 xl:hidden"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1 xl:hidden"
aria-label="Панель"
title="Панель"
onclick={() => (panelOpen = true)}
>
<Icon name="wallpaper" />
</button>
onclick={() => (panelOpen = true)}
>
<Icon name="wallpaper" class="size-4" />
</button>
{/if}
{#if auth.isAuthenticated}
<span class="text-text-muted hidden text-sm sm:inline">{auth.user?.name ?? ''}</span>
<span class="text-text-muted hidden text-xs sm:inline">{auth.user?.name ?? ''}</span>
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-sm"
class="text-text-muted hover:text-text inline-flex items-center gap-1 text-xs"
onclick={logout}
>
<Icon name="logout" class="size-4" />
@@ -143,7 +144,7 @@
{:else}
<a
href="/login"
class="text-text-muted hover:text-text inline-flex items-center gap-1.5 text-sm"
class="text-text-muted hover:text-text inline-flex items-center gap-1 text-xs"
>
<Icon name="login" class="size-4" />
<span class="hidden sm:inline">Войти</span>
@@ -152,13 +153,13 @@
<ThemeSwitcher />
<button
type="button"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1.5"
class="text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
aria-label={isFullscreen ? 'Выйти из полноэкранного режима' : 'На весь экран'}
title={isFullscreen ? 'Выйти из полноэкранного режима' : 'На весь экран'}
aria-pressed={isFullscreen}
onclick={toggleFullscreen}
>
<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} />
<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} class="size-4" />
</button>
</div>
</header>
@@ -195,7 +196,7 @@
{@render children()}
</main>
{#if panel}
{#if panel && panelVisible}
{#if panelOpen}
<button
type="button"
frontend/src/lib/components/PhotoGrid.svelte
+14 -8
View File
@@ -5,12 +5,15 @@
interface Props {
photos: Photo[];
selectedId?: string | null;
onSelect?: (index: number) => void;
selectedIds?: string[];
onSelect?: (index: number, event: MouseEvent) => void;
onOpen?: (index: number) => void;
onDragStart?: (index: number, event: DragEvent) => void;
}
let { photos, selectedId = null, onSelect, onOpen }: Props = $props();
let { photos, selectedIds = [], onSelect, onOpen, onDragStart }: Props = $props();
const isSelected = (id: string) => selectedIds.includes(id);
</script>
{#if photos.length === 0}
@@ -24,13 +27,16 @@
<li>
<button
type="button"
class="border-border bg-bg-muted group relative block aspect-square w-full overflow-hidden rounded-lg border {photo.id ===
selectedId
draggable={isSelected(photo.id)}
class="border-border bg-bg-muted group relative block aspect-square w-full overflow-hidden rounded-lg border {isSelected(
photo.id
)
? 'ring-primary ring-2'
: ''}"
aria-pressed={photo.id === selectedId}
onclick={() => onSelect?.(i)}
aria-pressed={isSelected(photo.id)}
onclick={(e) => onSelect?.(i, e)}
ondblclick={() => onOpen?.(i)}
ondragstart={(e) => onDragStart?.(i, e)}
>
{#if photo.thumb_url}
<img
@@ -38,7 +44,7 @@
alt={photo.original_filename}
loading="lazy"
decoding="async"
class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
class="pointer-events-none h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
/>
{:else}
<span class="text-text-subtle flex h-full w-full items-center justify-center text-xs">
frontend/src/lib/components/ThemeSwitcher.svelte
+14 -9
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import IconButton from './IconButton.svelte';
import Icon from './Icon.svelte';
import type { IconName } from '$lib/icons/registry';
import { theme, type Theme } from '$lib/stores/theme.svelte';
@@ -12,18 +12,23 @@
</script>
<div
class="border-border bg-bg-elevated inline-flex gap-1 rounded-lg border p-1"
class="border-border bg-bg-elevated inline-flex items-center gap-0 rounded-md border p-0.5"
role="group"
aria-label="Theme"
>
{#each options as option (option.value)}
<IconButton
name={option.icon}
label={option.label}
active={theme.current === option.value}
pressed={theme.current === option.value}
class="px-2 py-1 text-sm"
<button
type="button"
class="inline-flex items-center justify-center rounded p-0.5 transition-colors {theme.current ===
option.value
? 'bg-primary text-primary-fg'
: 'text-text-muted hover:bg-bg-muted hover:text-text'}"
aria-label={option.label}
title={option.label}
aria-pressed={theme.current === option.value}
onclick={() => theme.set(option.value)}
/>
>
<Icon name={option.icon} class="size-4" />
</button>
{/each}
</div>
frontend/src/lib/components/TransferDialog.svelte
+157
View File
@@ -0,0 +1,157 @@
<script lang="ts">
import Icon from './Icon.svelte';
import { portal } from '$lib/actions/portal';
import { api } from '$lib/api';
import { albums } from '$lib/stores/albums.svelte';
import { selection } from '$lib/stores/selection.svelte';
import { transfer, type TransferAction } from '$lib/stores/transfer.svelte';
let targetId = $state('');
let action = $state<TransferAction>('move');
let busy = $state(false);
let error = $state('');
$effect(() => {
if (transfer.open) {
targetId = transfer.targetId ?? '';
action = transfer.action ?? 'move';
error = '';
}
});
$effect(() => {
if (transfer.open) albums.load();
});
async function confirm() {
if (!targetId || busy) return;
busy = true;
error = '';
try {
const body = { ids: transfer.ids, album_id: targetId };
if (action === 'move') await api('/photo-batch/move', { method: 'POST', body });
else await api('/photo-batch/copy', { method: 'POST', body });
selection.clear();
transfer.close();
albums.load();
} catch (e) {
error = (e as Error).message;
} finally {
busy = false;
}
}
function onKey(ev: KeyboardEvent) {
if (ev.key === 'Escape' && !busy) transfer.close();
}
</script>
<svelte:window onkeydown={onKey} />
{#if transfer.open}
<div
use:portal
class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
role="dialog"
aria-modal="true"
aria-label="Перенос или копирование"
tabindex="-1"
onclick={(e) => {
if (e.target === e.currentTarget && !busy) transfer.close();
}}
onkeydown={onKey}
>
<div class="border-border bg-bg-elevated flex max-h-[85vh] w-full max-w-md flex-col rounded-xl border">
<div class="border-border flex items-center justify-between border-b px-5 py-3">
<h2 class="text-text text-base font-semibold">
{action === 'move' ? 'Переместить' : 'Копировать'} {transfer.ids.length} фото
</h2>
<button
type="button"
class="text-text-muted hover:text-text inline-flex size-7 items-center justify-center rounded"
aria-label="Закрыть"
onclick={() => transfer.close()}
>
<Icon name="close" class="size-4" />
</button>
</div>
<div class="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-4">
<div class="border-border inline-flex rounded-lg border p-0.5">
<button
type="button"
class="rounded-md px-3 py-1.5 text-sm {action === 'move'
? 'bg-primary text-primary-fg'
: 'text-text-muted hover:text-text'}"
onclick={() => (action = 'move')}
>
Переместить
</button>
<button
type="button"
class="rounded-md px-3 py-1.5 text-sm {action === 'copy'
? 'bg-primary text-primary-fg'
: 'text-text-muted hover:text-text'}"
onclick={() => (action = 'copy')}
>
Копировать
</button>
</div>
<div>
<p class="text-text-muted mb-1.5 text-xs">Альбом</p>
{#if albums.list.length === 0}
<p class="text-text-subtle text-sm">Нет доступных альбомов.</p>
{:else}
<ul class="max-h-56 space-y-1 overflow-y-auto">
{#each albums.list as album (album.id)}
<li>
<button
type="button"
class="flex w-full items-center gap-2 rounded-md border px-2 py-1.5 text-left text-sm {targetId ===
album.id
? 'border-primary bg-bg-muted text-text'
: 'border-border text-text-muted hover:bg-bg-muted hover:text-text'}"
aria-pressed={targetId === album.id}
onclick={() => (targetId = album.id)}
>
<span
class="bg-bg-muted border-border flex size-8 shrink-0 items-center justify-center overflow-hidden rounded border"
>
{#if album.cover_thumb_url}
<img src={album.cover_thumb_url} alt="" class="h-full w-full object-cover" />
{:else}
<Icon name="image" class="size-4 text-text-subtle" />
{/if}
</span>
<span class="truncate">{album.title}</span>
</button>
</li>
{/each}
</ul>
{/if}
</div>
{#if error}<p class="text-danger text-sm">{error}</p>{/if}
</div>
<div class="border-border flex justify-end gap-2 border-t px-5 py-3">
<button
type="button"
class="border-border text-text hover:bg-bg-muted rounded-lg border px-4 py-2 text-sm"
onclick={() => transfer.close()}
>
Отмена
</button>
<button
type="button"
disabled={busy || !targetId}
class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm disabled:opacity-50"
onclick={confirm}
>
{busy ? 'Обработка…' : action === 'move' ? 'Переместить' : 'Копировать'}
</button>
</div>
</div>
</div>
{/if}
frontend/src/lib/components/Viewer.svelte
+9 -10
View File
@@ -99,8 +99,8 @@
const topClass = $derived(
isFullscreen
? `border-border bg-chrome absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-2 border-b px-3 py-2 transition-transform duration-200 ${showTop ? 'translate-y-0' : '-translate-y-full'}`
: 'border-border bg-chrome flex shrink-0 items-center justify-between gap-2 border-b px-3 py-2'
? `border-border bg-chrome absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-1 border-b px-2 py-0.5 transition-transform duration-200 ${showTop ? 'translate-y-0' : '-translate-y-full'}`
: 'border-border bg-chrome flex shrink-0 items-center justify-between gap-1 border-b px-2 py-0.5'
);
const bottomClass = $derived(
isFullscreen
@@ -289,22 +289,21 @@
}
const btn =
'border-border text-text hover:bg-bg-muted inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm';
const dangerBtn =
'border-border text-danger hover:bg-bg-muted inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm';
'text-text-muted hover:bg-bg-muted hover:text-text inline-flex items-center justify-center rounded-md p-1';
const dangerBtn = 'text-danger hover:bg-bg-muted inline-flex items-center justify-center rounded-md p-1';
</script>
<svelte:window onkeydown={onKey} onmousemove={onWinMouseMove} />
<div bind:this={viewerEl} class="bg-canvas relative flex h-full flex-col overflow-hidden">
<div bind:this={topEl} class={topClass}>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1">
<button type="button" class={btn} aria-label="Назад" title="Назад" onclick={onClose}>
<Icon name="arrow_back" />
<Icon name="arrow_back" class="size-4" />
</button>
<span class="text-text-muted text-sm">{index + 1} / {photos.length}</span>
<span class="text-text-muted text-xs">{index + 1} / {photos.length}</span>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1">
<button
type="button"
class={btn}
@@ -315,7 +314,7 @@
aria-pressed={isFullscreen}
onclick={toggleViewerFullscreen}
>
<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} />
<Icon name={isFullscreen ? 'fullscreen_exit' : 'fullscreen'} class="size-4" />
</button>
{#if fresh?.download_url}
<a
frontend/src/lib/stores/selection.svelte.ts
+22 -4
View File
@@ -2,16 +2,34 @@ import type { Photo } from '$lib/types';
class SelectionStore {
albumId = $state('');
photo = $state<Photo | null>(null);
items = $state<Photo[]>([]);
anchorId = $state<string | null>(null);
select(albumId: string, photo: Photo) {
get ids(): string[] {
return this.items.map((p) => p.id);
}
get count(): number {
return this.items.length;
}
has(id: string): boolean {
return this.items.some((p) => p.id === id);
}
set(albumId: string, items: Photo[]) {
this.albumId = albumId;
this.photo = photo;
this.items = items;
}
replace(photo: Photo) {
this.items = this.items.map((p) => (p.id === photo.id ? photo : p));
}
clear() {
this.albumId = '';
this.photo = null;
this.items = [];
this.anchorId = null;
}
}
frontend/src/lib/stores/transfer.svelte.ts
+25
View File
@@ -0,0 +1,25 @@
export type TransferAction = 'move' | 'copy';
class TransferStore {
open = $state(false);
ids = $state<string[]>([]);
targetId = $state<string | null>(null);
action = $state<TransferAction | null>(null);
start(ids: string[], targetId: string | null = null, action: TransferAction | null = null) {
if (ids.length === 0) return;
this.ids = ids;
this.targetId = targetId;
this.action = action;
this.open = true;
}
close() {
this.open = false;
this.ids = [];
this.targetId = null;
this.action = null;
}
}
export const transfer = new TransferStore();
frontend/src/lib/types.ts
+2
View File
@@ -50,6 +50,8 @@ export interface Photo {
longitude?: number | null;
caption: string;
exif?: Record<string, unknown>;
deleted_at?: string | null;
album_title?: string;
created_at: string;
uploader: User;
likes_count: number;
frontend/src/routes/(app)/+layout.svelte
+7 -1
View File
@@ -1,12 +1,16 @@
<script lang="ts">
import { page } from '$app/stores';
import AppShell from '$lib/components/AppShell.svelte';
import AlbumRail from '$lib/components/AlbumRail.svelte';
import AlbumPanel from '$lib/components/AlbumPanel.svelte';
import TransferDialog from '$lib/components/TransferDialog.svelte';
let { children } = $props();
const showPanel = $derived($page.url.pathname !== '/');
</script>
<AppShell>
<AppShell panelVisible={showPanel}>
{#snippet rail()}
<AlbumRail />
{/snippet}
@@ -15,3 +19,5 @@
{/snippet}
{@render children()}
</AppShell>
<TransferDialog />
frontend/src/routes/(app)/+page.svelte
+6 -5
View File
@@ -31,12 +31,13 @@
{#if albums.loading && albums.list.length === 0}
<p class="text-text-muted">Загрузка…</p>
{:else if albums.list.length === 0}
<div class="text-text-muted flex flex-col items-center gap-3 py-16">
<Icon name="photo_library" class="size-16 text-text-subtle" />
<p>Альбомов пока нет. Создайте первый кнопкой <span class="text-text">+</span> в панели альбомов.</p>
</div>
{:else}
{#if albums.list.length === 0}
<div class="text-text-muted mb-4 flex flex-col items-center gap-3 py-10">
<Icon name="photo_library" class="size-16 text-text-subtle" />
<p>Альбомов пока нет. Создайте первый кнопкой <span class="text-text">+</span> в панели альбомов.</p>
</div>
{/if}
<ul
class="grid gap-3"
style="grid-template-columns: repeat({density.cols}, minmax(0, 1fr));"
frontend/src/routes/(app)/albums/[id]/+page.svelte
+43 -5
View File
@@ -131,6 +131,45 @@
}
}
function selectPhoto(i: number, e: MouseEvent) {
const photo = photos[i];
if (!photo) return;
const cur = selection.albumId === albumId ? selection.items : [];
if (e.shiftKey && selection.anchorId && selection.albumId === albumId) {
const a = photos.findIndex((p) => p.id === selection.anchorId);
if (a >= 0) {
const lo = Math.min(a, i);
const hi = Math.max(a, i);
selection.set(albumId, photos.slice(lo, hi + 1));
return;
}
}
if (e.ctrlKey || e.metaKey) {
const exists = cur.some((p) => p.id === photo.id);
selection.set(
albumId,
exists ? cur.filter((p) => p.id !== photo.id) : [...cur, photo]
);
selection.anchorId = photo.id;
return;
}
selection.set(albumId, [photo]);
selection.anchorId = photo.id;
}
function dragPhoto(i: number, e: DragEvent) {
const photo = photos[i];
if (!photo) return;
if (!(selection.albumId === albumId && selection.has(photo.id))) {
selection.set(albumId, [photo]);
selection.anchorId = photo.id;
}
const ids = selection.ids;
e.dataTransfer?.setData('application/x-galo-photos', JSON.stringify(ids));
e.dataTransfer?.setData('text/plain', `${ids.length} фото`);
if (e.dataTransfer) e.dataTransfer.effectAllowed = 'copyMove';
}
function onDrop(ev: DragEvent) {
ev.preventDefault();
dragging = false;
@@ -151,6 +190,7 @@
aria-label="Альбом"
ondragover={(e) => {
if (!canUpload) return;
if (!e.dataTransfer?.types.includes('Files')) return;
e.preventDefault();
dragging = true;
}}
@@ -202,11 +242,9 @@
{:else}
<PhotoGrid
{photos}
selectedId={selection.albumId === albumId ? (selection.photo?.id ?? null) : null}
onSelect={(i) => {
const p = photos[i];
if (p) selection.select(albumId, p);
}}
selectedIds={selection.albumId === albumId ? selection.ids : []}
onSelect={selectPhoto}
onDragStart={dragPhoto}
onOpen={(i) => {
const p = photos[i];
if (p) goto(`/albums/${albumId}/photos/${p.id}`);
frontend/src/routes/(app)/trash/+page.svelte
+121
View File
@@ -0,0 +1,121 @@
<script lang="ts">
import Icon from '$lib/components/Icon.svelte';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import { photosApi } from '$lib/api';
import type { Photo } from '$lib/types';
let photos = $state<Photo[]>([]);
let loading = $state(true);
let error = $state('');
let pending = $state<Photo | null>(null);
let busy = $state(false);
async function load() {
loading = true;
error = '';
try {
photos = (await photosApi.trash()).photos;
} catch (e) {
error = (e as Error).message;
} finally {
loading = false;
}
}
$effect(() => {
load();
});
async function restore(p: Photo) {
try {
await photosApi.restore(p.id);
photos = photos.filter((x) => x.id !== p.id);
} catch (e) {
error = (e as Error).message;
}
}
async function remove() {
if (!pending) return;
busy = true;
try {
await photosApi.permanentDelete(pending.id);
photos = photos.filter((x) => x.id !== pending?.id);
pending = null;
} catch (e) {
error = (e as Error).message;
} finally {
busy = false;
}
}
</script>
<div class="p-4 sm:p-6">
<div class="mb-4 flex items-center gap-2">
<Icon name="delete" class="size-5 text-text-muted" />
<h1 class="text-xl font-semibold">Корзина</h1>
</div>
{#if error}<p class="text-danger mb-3 text-sm">{error}</p>{/if}
{#if loading}
<p class="text-text-muted">Загрузка…</p>
{:else if photos.length === 0}
<div class="text-text-muted flex flex-col items-center gap-3 py-16">
<Icon name="delete" class="size-16 text-text-subtle" />
<p>Корзина пуста.</p>
</div>
{:else}
<ul class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{#each photos as photo (photo.id)}
<li class="border-border bg-bg-muted overflow-hidden rounded-lg border">
<div class="bg-bg-muted aspect-square overflow-hidden">
{#if photo.thumb_url}
<img src={photo.thumb_url} alt="" class="h-full w-full object-cover" loading="lazy" />
{:else}
<span class="flex h-full w-full items-center justify-center">
<Icon name="image" class="size-8 text-text-subtle" />
</span>
{/if}
</div>
<div class="space-y-1.5 p-2">
<p class="text-text truncate text-xs" title={photo.original_filename}>
{photo.original_filename}
</p>
<p class="text-text-subtle truncate text-xs">{photo.album_title ?? ''}</p>
<div class="flex gap-1">
<button
type="button"
class="border-border text-text hover:bg-bg-muted inline-flex flex-1 items-center justify-center gap-1 rounded-md border px-2 py-1 text-xs"
onclick={() => restore(photo)}
>
<Icon name="arrow_back" class="size-3.5" />
Вернуть
</button>
<button
type="button"
class="border-border text-danger hover:bg-bg-muted inline-flex items-center justify-center rounded-md border px-2 py-1"
aria-label="Удалить навсегда"
title="Удалить навсегда"
onclick={() => (pending = photo)}
>
<Icon name="delete_forever" class="size-3.5" />
</button>
</div>
</div>
</li>
{/each}
</ul>
{/if}
</div>
{#if pending}
<ConfirmDialog
title="Удалить навсегда?"
message="Фото будет удалено без возможности восстановления. Файлы хранилища удаляются, если на них нет ссылок в других альбомах."
confirmLabel="Удалить навсегда"
busy={busy}
onConfirm={remove}
onClose={() => (pending = null)}
/>
{/if}