feat(ui): fix thumbnail size slider direction and add step buttons

frontend/src/lib/components/DensityControl.svelte

@@ -1,19 +1,34 @@
 <script lang="ts">
 	import Icon from './Icon.svelte';
-	import { density } from '$lib/stores/density.svelte';
+	import IconButton from './IconButton.svelte';
+	import { density, DENSITY_MIN, DENSITY_MAX } from '$lib/stores/density.svelte';
 </script>
 
 <div class="flex items-center gap-2">
 	<Icon name="grid_view" class="text-text-subtle size-4" />
+	<IconButton
+		name="density_small"
+		label="Уменьшить миниатюры"
+		disabled={density.size <= DENSITY_MIN}
+		onclick={() => density.stepSize(-1)}
+		class="size-7"
+	/>
 	<input
 		type="range"
-		min="2"
-		max="8"
+		min={DENSITY_MIN}
+		max={DENSITY_MAX}
 		step="1"
-		value={density.cols}
-		oninput={(e) => density.set(Number(e.currentTarget.value))}
+		value={density.size}
+		oninput={(e) => density.setSize(Number(e.currentTarget.value))}
 		class="accent-primary h-1 w-24 cursor-pointer"
 		aria-label="Размер миниатюр"
 		title="Размер миниатюр"
 	/>
+	<IconButton
+		name="density_large"
+		label="Увеличить миниатюры"
+		disabled={density.size >= DENSITY_MAX}
+		onclick={() => density.stepSize(1)}
+		class="size-7"
+	/>
 </div>

frontend/src/lib/icons/registry.ts

@@ -45,6 +45,8 @@ export const icons = {
 	label: { path: '<path fill="currentColor" d="M17.63 5.84C17.27 5.33 16.67 5 16 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h11c.67 0 1.27-.33 1.63-.84L22 12z"/>' },
 	menu: { path: '<path fill="currentColor" d="M3 18v-2h18v2zm0-5v-2h18v2zm0-5V6h18v2z"/>' },
 	grid_view: { path: '<path fill="currentColor" d="M3 3v8h8V3zm10 0v8h8V3zM3 13v8h8v-8zm10 0v8h8v-8z"/>' },
+	density_small: { path: '<path fill="currentColor" d="M3 22v-2h18v2zm0-6v-2h18v2zm0-6V8h18v2zm0-6V2h18v2z"/>' },
+	density_large: { path: '<path fill="currentColor" d="M3 21v-2h18v2zM3 5V3h18v2z"/>' },
 	wallpaper: { path: '<path fill="currentColor" d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2zm6 9l-4 5h12l-3-4l-2.03 2.71zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5M20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2m0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4z"/>' },
 	fullscreen: { path: '<path fill="currentColor" d="M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z"/>' },
 	fullscreen_exit: { path: '<path fill="currentColor" d="M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11v3h-2v2h5V5z"/>' },

frontend/src/lib/stores/density.svelte.ts

@@ -5,6 +5,11 @@ const MAX = 8;
 class DensityStore {
 	cols = $state(5);
 
+	/** Размер миниатюр: больше значение — крупнее плитки (меньше колонок). */
+	get size(): number {
+		return MIN + MAX - this.cols;
+	}
+
 	init() {
 		if (typeof window === 'undefined') return;
 		const v = parseInt(localStorage.getItem(KEY) ?? '', 10);
@@ -15,6 +20,17 @@ class DensityStore {
 		this.cols = Math.min(MAX, Math.max(MIN, Math.round(value)));
 		if (typeof window !== 'undefined') localStorage.setItem(KEY, String(this.cols));
 	}
+
+	setSize(value: number) {
+		const size = Math.min(MAX, Math.max(MIN, Math.round(value)));
+		this.set(MIN + MAX - size);
+	}
+
+	stepSize(delta: number) {
+		this.setSize(this.size + delta);
+	}
 }
 
+export { MIN as DENSITY_MIN, MAX as DENSITY_MAX };
+
 export const density = new DensityStore();

frontend/src/routes/(app)/albums/[id]/+page.svelte

@@ -472,6 +472,7 @@
 			<div class="flex items-center gap-3">
 				<DensityControl />
 				{#if canUpload}
+					<span class="bg-border h-5 w-px shrink-0" aria-hidden="true"></span>
 					<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"