frontend/src/lib/components/AlbumPanel.svelte

@@ -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,7 +115,8 @@
 
 {#if photoId}
 	{#if photo}
-		<div class="space-y-4 p-4">
+		<div>
+			<div class="p-4">
 				{#if editingName}
 					<form class="relative" onsubmit={saveName}>
 						<input
@@ -132,7 +146,7 @@
 							</button>
 						</div>
 					</form>
-				{#if nameError}<p class="text-danger text-xs">{nameError}</p>{/if}
+					{#if nameError}<p class="text-danger mt-1 text-xs">{nameError}</p>{/if}
 				{:else if canRename}
 					<button
 						type="button"
@@ -145,33 +159,44 @@
 				{:else}
 					<h2 class="text-text truncate text-sm font-semibold">{photo.original_filename}</h2>
 				{/if}
-			<div>
+			</div>
+
+			<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>Координаты</span>
-					<span class="text-text">{photo.width}×{photo.height}</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>
-			<div>
+				</dl>
-				<span class="text-text-muted mb-1 block text-xs font-semibold tracking-wide uppercase">
+			</PanelSection>
-					Комментарии
+
-				</span>
+			<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">
+		<PanelSection id="album-cover" title="Обложка">
-				Обложка
-			</span>
 			<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,17 +227,18 @@
 					{/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>
 
+		<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" />
@@ -229,6 +255,7 @@
 					</a>
 				{/if}
 			</nav>
+		</PanelSection>
 	</div>
 
 	{#if picking}

frontend/src/lib/components/PanelSection.svelte

@@ -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>