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

feat: Lightroom-style workspace UI #2

Merged
iu merged 18 commits from feature/lightroom-workspace-ui into develop 2026-10-10 19:56:23 +00:00
Conversation 0 Commits 18 Files Changed 90
+155 -82
2 changed files with 155 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b901544dc5 - Show all commits
frontend/src/lib/components/AlbumPanel.svelte
+109 -82
View File
@@ -4,6 +4,7 @@
import Icon from './Icon.svelte';
import CoverPicker from './CoverPicker.svelte';
import Comments from './Comments.svelte';
import PanelSection from './PanelSection.svelte';
import { albums } from '$lib/stores/albums.svelte';
import { auth } from '$lib/stores/auth.svelte';
import type { Album, Photo } from '$lib/types';
@@ -86,6 +87,18 @@
node.select();
}
function formatSize(bytes: number): string {
if (!bytes) return '—';
const units = ['Б', 'КБ', 'МБ', 'ГБ'];
let v = bytes;
let i = 0;
while (v >= 1024 && i < units.length - 1) {
v /= 1024;
i++;
}
return `${i > 0 && v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`;
}
async function resetCover() {
if (!album) return;
try {
@@ -102,76 +115,88 @@
{#if photoId}
{#if photo}
<div class="space-y-4 p-4">
{#if editingName}
<form class="relative" onsubmit={saveName}>
<input
bind:value={nameDraft}
use:autofocus
aria-label="Имя файла"
class="border-border bg-bg text-text w-full rounded-lg border py-1 pr-16 pl-2 text-sm"
/>
<div class="absolute top-1/2 right-1 flex -translate-y-1/2 items-center gap-0.5">
<button
type="submit"
class="text-primary hover:bg-bg-muted inline-flex items-center justify-center rounded-md p-1 disabled:opacity-50"
aria-label="Сохранить"
title="Сохранить"
disabled={savingName || !nameDraft.trim()}
>
<Icon name="check" class="size-4" />
</button>
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
aria-label="Отмена"
title="Отмена"
onclick={() => (editingName = false)}
>
<Icon name="close" class="size-4" />
</button>
</div>
</form>
{#if nameError}<p class="text-danger text-xs">{nameError}</p>{/if}
{:else if canRename}
<button
type="button"
class="text-text hover:text-primary block w-full truncate text-left text-sm font-semibold"
title="Переименовать"
onclick={startEdit}
>
{photo.original_filename}
</button>
{:else}
<h2 class="text-text truncate text-sm font-semibold">{photo.original_filename}</h2>
{/if}
<div>
<div class={metaRow}><span>Автор</span><span class="text-text">{photo.uploader.name}</span></div>
{#if photo.taken_at}
<div class={metaRow}>
<span>Снято</span>
<span class="text-text">{new Date(photo.taken_at).toLocaleString()}</span>
</div>
<div>
<div class="p-4">
{#if editingName}
<form class="relative" onsubmit={saveName}>
<input
bind:value={nameDraft}
use:autofocus
aria-label="Имя файла"
class="border-border bg-bg text-text w-full rounded-lg border py-1 pr-16 pl-2 text-sm"
/>
<div class="absolute top-1/2 right-1 flex -translate-y-1/2 items-center gap-0.5">
<button
type="submit"
class="text-primary hover:bg-bg-muted inline-flex items-center justify-center rounded-md p-1 disabled:opacity-50"
aria-label="Сохранить"
title="Сохранить"
disabled={savingName || !nameDraft.trim()}
>
<Icon name="check" class="size-4" />
</button>
<button
type="button"
class="text-text-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
aria-label="Отмена"
title="Отмена"
onclick={() => (editingName = false)}
>
<Icon name="close" class="size-4" />
</button>
</div>
</form>
{#if nameError}<p class="text-danger mt-1 text-xs">{nameError}</p>{/if}
{:else if canRename}
<button
type="button"
class="text-text hover:text-primary block w-full truncate text-left text-sm font-semibold"
title="Переименовать"
onclick={startEdit}
>
{photo.original_filename}
</button>
{:else}
<h2 class="text-text truncate text-sm font-semibold">{photo.original_filename}</h2>
{/if}
<div class={metaRow}>
<span>Размер</span>
<span class="text-text">{photo.width}×{photo.height}</span>
</div>
</div>
<div>
<span class="text-text-muted mb-1 block text-xs font-semibold tracking-wide uppercase">
Комментарии
</span>
<PanelSection id="photo-info" title="Информация">
<dl class="space-y-1">
<div class={metaRow}><span>Автор</span><span class="text-text">{photo.uploader.name}</span></div>
<div class={metaRow}><span>Файл</span><span class="text-text">{formatSize(photo.size)}</span></div>
<div class={metaRow}><span>Тип</span><span class="text-text">{photo.mime_type}</span></div>
<div class={metaRow}>
<span>Разрешение</span>
<span class="text-text">{photo.width}×{photo.height}</span>
</div>
{#if photo.taken_at}
<div class={metaRow}>
<span>Снято</span>
<span class="text-text">{new Date(photo.taken_at).toLocaleString()}</span>
</div>
{/if}
{#if photo.latitude != null && photo.longitude != null}
<div class={metaRow}>
<span>Координаты</span>
<span class="text-text">{photo.latitude.toFixed(5)}, {photo.longitude.toFixed(5)}</span>
</div>
{/if}
<div class={metaRow}>
<span>Загружено</span>
<span class="text-text">{new Date(photo.created_at).toLocaleString()}</span>
</div>
</dl>
</PanelSection>
<PanelSection id="photo-comments" title="Комментарии">
<Comments photoId={photo.id} />
</div>
</PanelSection>
</div>
{/if}
{:else if album}
<div class="space-y-5 p-4">
<div>
<span class="text-text-muted mb-2 block text-xs font-semibold tracking-wide uppercase">
Обложка
</span>
<div>
<PanelSection id="album-cover" title="Обложка">
<div class="bg-bg-muted border-border aspect-video overflow-hidden rounded-lg border">
{#if album.cover_thumb_url}
<img src={album.cover_thumb_url} alt="" class="h-full w-full object-cover" />
@@ -202,33 +227,35 @@
{/if}
</div>
{/if}
</div>
</PanelSection>
<div>
<PanelSection id="album-info" title="Информация">
<h2 class="text-text text-lg font-semibold">{album.title}</h2>
{#if album.description}<p class="text-text-muted text-sm">{album.description}</p>{/if}
<p class="text-text-subtle mt-1 text-xs">
{album.photos_count ?? 0} фото · {album.members_count ?? 0} участников
</p>
{#if error}<p class="text-danger mt-2 text-sm">{error}</p>{/if}
</div>
</PanelSection>
<nav class="space-y-0.5" aria-label="Навигация по альбому">
<a class={navLink} href="/albums/{album.id}/members">
<Icon name="group" class="size-4" />
Участники
</a>
{#if canEdit}
<a class={navLink} href="/albums/{album.id}/settings">
<Icon name="settings" class="size-4" />
Настройки
<PanelSection id="album-nav" title="Навигация">
<nav class="space-y-0.5" aria-label="Навигация по альбому">
<a class={navLink} href="/albums/{album.id}/members">
<Icon name="group" class="size-4" />
Участники
</a>
<a class={navLink} href="/albums/{album.id}/settings#share">
<Icon name="add_link" class="size-4" />
Ссылки для просмотра
</a>
{/if}
</nav>
{#if canEdit}
<a class={navLink} href="/albums/{album.id}/settings">
<Icon name="settings" class="size-4" />
Настройки
</a>
<a class={navLink} href="/albums/{album.id}/settings#share">
<Icon name="add_link" class="size-4" />
Ссылки для просмотра
</a>
{/if}
</nav>
</PanelSection>
</div>
{#if picking}
frontend/src/lib/components/PanelSection.svelte
+46
View File
@@ -0,0 +1,46 @@
<script lang="ts">
import { onMount } from 'svelte';
import Icon from './Icon.svelte';
import type { Snippet } from 'svelte';
interface Props {
id: string;
title: string;
open?: boolean;
children: Snippet;
}
let { id, title, open = true, children }: Props = $props();
// svelte-ignore state_referenced_locally
let isOpen = $state(open);
onMount(() => {
const v = localStorage.getItem(`panel-section-${id}`);
if (v === '0') isOpen = false;
else if (v === '1') isOpen = true;
});
function toggle() {
isOpen = !isOpen;
localStorage.setItem(`panel-section-${id}`, isOpen ? '1' : '0');
}
</script>
<section class="border-border border-b">
<button
type="button"
class="text-text-muted hover:text-text flex w-full items-center justify-between gap-2 px-4 py-2.5 text-left"
aria-expanded={isOpen}
onclick={toggle}
>
<span class="text-xs font-semibold tracking-wide uppercase">{title}</span>
<Icon
name="expand_more"
class="size-4 shrink-0 transition-transform {isOpen ? 'rotate-180' : ''}"
/>
</button>
{#if isOpen}
<div class="px-4 pb-4">{@render children()}</div>
{/if}
</section>