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

- 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
+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"