From 50b9983be43eada6a44709b87220d0258bbc82bd Mon Sep 17 00:00:00 2001
From: Iu <iu@prhub.ru>
Date: Tue, 20 Oct 2026 21:38:02 +0300
Subject: [PATCH] =?UTF-8?q?feat(web):=20=D1=81=D0=BE=D1=85=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D1=8F=D1=82=D1=8C=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80?=
 =?UTF-8?q?=20=D0=BC=D0=B8=D0=BD=D0=B8=D0=B0=D1=82=D1=8E=D1=80=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B8=20=D1=81=D0=BA=D1=80=D1=8B=D1=82=D1=8B=D1=85=20?=
 =?UTF-8?q?=D0=B1=D0=BE=D0=BA=D0=BE=D0=B2=D1=8B=D1=85=20=D0=BF=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8F=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

В скрытом режиме панели больше не растягивают плитки: сетка пересчитывает
число колонок так, чтобы размер миниатюры остался прежним, а в строке
помещалось больше фото. Каркас публикует ширину, которую занимают панели в
текущей раскладке (рейл на широких экранах, панель на сверхшироких), сетка
использует её для пересчёта, а навигация курсора стрелками учитывает
реальное число колонок.
---
 frontend/src/lib/components/AppShell.svelte   | 32 ++++++++++++++++++-
 frontend/src/lib/components/PhotoGrid.svelte  | 10 ++++--
 frontend/src/lib/stores/grid.svelte.ts        | 20 ++++++++++++
 frontend/src/lib/stores/panels.svelte.ts      |  2 ++
 .../src/routes/(app)/albums/[id]/+page.svelte |  4 +--
 openspec/specs/ui-workspace/spec.md           |  8 ++++-
 6 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/stores/grid.svelte.ts

diff --git a/frontend/src/lib/components/AppShell.svelte b/frontend/src/lib/components/AppShell.svelte
index 5210464..402bf97 100644
--- a/frontend/src/lib/components/AppShell.svelte
+++ b/frontend/src/lib/components/AppShell.svelte
@@ -27,17 +27,32 @@
 
 	const RAIL = { min: 176, max: 480, key: 'rail-width', def: 240 };
 	const PANEL = { min: 220, max: 560, key: 'panel-width', def: 288 };
+	// Ширина разделителя (w-1) между панелью и содержимым.
+	const HANDLE_PX = 4;
 
 	let railWidth = $state(RAIL.def);
 	let panelWidth = $state(PANEL.def);
 
 	let isFullscreen = $state(false);
+	let isWide = $state(false);
+	let isExtraWide = $state(false);
+
+	// Ширина, которую занимают панели в текущей раскладке: рейл и панель
+	// встают рядом с содержимым на широких экранах, на узких — поверх него.
+	const reserved = $derived(
+		(isWide ? railWidth + HANDLE_PX : 0) +
+			(isExtraWide && panel && panelVisible ? panelWidth + HANDLE_PX : 0)
+	);
 
 	$effect(() => {
 		// Режим скрытия действует только там, где он доступен (просмотр альбома).
 		if (!panelsToggle) panels.reset();
 	});
 
+	$effect(() => {
+		panels.reserved = reserved;
+	});
+
 	onMount(() => {
 		const r = parseInt(localStorage.getItem(RAIL.key) ?? '', 10);
 		if (r >= RAIL.min && r <= RAIL.max) railWidth = r;
@@ -47,7 +62,22 @@
 		const onFs = () => (isFullscreen = !!document.fullscreenElement);
 		document.addEventListener('fullscreenchange', onFs);
 		onFs();
-		return () => document.removeEventListener('fullscreenchange', onFs);
+
+		const mqLg = window.matchMedia('(min-width: 1024px)');
+		const mqXl = window.matchMedia('(min-width: 1280px)');
+		const sync = () => {
+			isWide = mqLg.matches;
+			isExtraWide = mqXl.matches;
+		};
+		sync();
+		mqLg.addEventListener('change', sync);
+		mqXl.addEventListener('change', sync);
+
+		return () => {
+			document.removeEventListener('fullscreenchange', onFs);
+			mqLg.removeEventListener('change', sync);
+			mqXl.removeEventListener('change', sync);
+		};
 	});
 
 	async function toggleFullscreen() {
diff --git a/frontend/src/lib/components/PhotoGrid.svelte b/frontend/src/lib/components/PhotoGrid.svelte
index 9b49089..62d743d 100644
--- a/frontend/src/lib/components/PhotoGrid.svelte
+++ b/frontend/src/lib/components/PhotoGrid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from './Icon.svelte';
-	import { density } from '$lib/stores/density.svelte';
+	import { grid } from '$lib/stores/grid.svelte';
 	import { isPanoTag } from '$lib/pano';
 	import type { Photo } from '$lib/types';
 
@@ -32,6 +32,10 @@
 	const GAP_PX = 8;
 	let gridWidth = $state(0);
 
+	$effect(() => {
+		grid.width = gridWidth;
+	});
+
 	// Offer every variant the photo actually has; the backend generates the
 	// medium variant asynchronously, so an incomplete set must still render.
 	function srcsetFor(photo: Photo): string {
@@ -44,7 +48,7 @@
 
 	const sizes = $derived(
 		gridWidth > 0
-			? `${Math.max(1, Math.round((gridWidth - (density.cols - 1) * GAP_PX) / density.cols))}px`
+			? `${Math.max(1, Math.round((gridWidth - (grid.cols - 1) * GAP_PX) / grid.cols))}px`
 			: undefined
 	);
 
@@ -76,7 +80,7 @@
 	<ul
 		class="grid gap-2"
 		bind:clientWidth={gridWidth}
-		style="grid-template-columns: repeat({density.cols}, minmax(0, 1fr));"
+		style="grid-template-columns: repeat({grid.cols}, minmax(0, 1fr));"
 	>
 		{#each photos as photo, i (photo.id)}
 			<li>
diff --git a/frontend/src/lib/stores/grid.svelte.ts b/frontend/src/lib/stores/grid.svelte.ts
new file mode 100644
index 0000000..7076205
--- /dev/null
+++ b/frontend/src/lib/stores/grid.svelte.ts
@@ -0,0 +1,20 @@
+import { density } from './density.svelte';
+import { panels } from './panels.svelte';
+
+class GridStore {
+	/** Ширина контейнера сетки (px). */
+	width = $state(0);
+
+	/**
+	 * Число колонок сетки. Когда боковые панели скрыты, сетка шире, поэтому
+	 * колонок становится больше, а плитки остаются того же размера, что и с
+	 * видимыми панелями.
+	 */
+	cols = $derived.by(() => {
+		const visible = this.width - panels.reserved;
+		if (!panels.hidden || this.width <= 0 || visible <= 0) return density.cols;
+		return Math.max(1, Math.round((density.cols * this.width) / visible));
+	});
+}
+
+export const grid = new GridStore();
diff --git a/frontend/src/lib/stores/panels.svelte.ts b/frontend/src/lib/stores/panels.svelte.ts
index ab90374..f3c9e55 100644
--- a/frontend/src/lib/stores/panels.svelte.ts
+++ b/frontend/src/lib/stores/panels.svelte.ts
@@ -5,6 +5,8 @@ class PanelsStore {
 	railPeek = $state(false);
 	/** Правая панель показана у кромки в скрытом режиме. */
 	panelPeek = $state(false);
+	/** Ширина (px), которую панели занимают в раскладке, — для пересчёта колонок сетки. */
+	reserved = $state(0);
 
 	toggle() {
 		this.hidden = !this.hidden;
diff --git a/frontend/src/routes/(app)/albums/[id]/+page.svelte b/frontend/src/routes/(app)/albums/[id]/+page.svelte
index c38fb36..48c280f 100644
--- a/frontend/src/routes/(app)/albums/[id]/+page.svelte
+++ b/frontend/src/routes/(app)/albums/[id]/+page.svelte
@@ -11,7 +11,7 @@
 	import { auth } from '$lib/stores/auth.svelte';
 	import { albums } from '$lib/stores/albums.svelte';
 	import { albumAccessLost } from '$lib/albums-events';
-	import { density } from '$lib/stores/density.svelte';
+	import { grid } from '$lib/stores/grid.svelte';
 	import { selection } from '$lib/stores/selection.svelte';
 	import { photoUpdates } from '$lib/stores/photo-updates.svelte';
 	import { trash } from '$lib/stores/trash.svelte';
@@ -408,7 +408,7 @@
 				return;
 			}
 			const origin = cursorIndex;
-			const cols = Math.max(1, density.cols);
+			const cols = Math.max(1, grid.cols);
 			let next = origin;
 			if (key === 'ArrowLeft') next = origin - 1;
 			else if (key === 'ArrowRight') next = origin + 1;
diff --git a/openspec/specs/ui-workspace/spec.md b/openspec/specs/ui-workspace/spec.md
index e450116..7900bc5 100644
--- a/openspec/specs/ui-workspace/spec.md
+++ b/openspec/specs/ui-workspace/spec.md
@@ -190,12 +190,18 @@ SHALL выдвигать правую панель поверх содержим
 панели SHALL не занимать место в раскладке, содержимое альбома SHALL занимать всю ширину,
 а панели SHALL показываться при наведении указателя на левую или правую кромку окна и
 скрываться после ухода указателя. Хоткей SHALL не срабатывать при вводе текста в поля и при
-открытых модальных диалогах или меню.
+открытых модальных диалогах или меню. Размер миниатюр в скрытом режиме SHALL сохраняться:
+вместо растянутых плиток сетка SHALL показывать больше фото в строке.
 
 #### Scenario: Переключение кнопкой
 - **WHEN** пользователь нажимает кнопку скрытия боковых панелей в альбоме
 - **THEN** обе панели уезжают за края, а сетка фото занимает всю ширину окна
 
+#### Scenario: Размер миниатюр при скрытых панелях
+- **WHEN** боковые панели скрыты
+- **THEN** плитки остаются того же размера, что и с видимыми панелями, а в строке помещается
+  больше фото
+
 #### Scenario: Переключение хоткеем
 - **WHEN** пользователь нажимает `Tab` в режиме просмотра альбома
 - **THEN** боковые панели скрываются или показываются