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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user