diff --git a/frontend/src/lib/components/DensityControl.svelte b/frontend/src/lib/components/DensityControl.svelte
index d00ba10..6ee71a9 100644
--- a/frontend/src/lib/components/DensityControl.svelte
+++ b/frontend/src/lib/components/DensityControl.svelte
@@ -1,19 +1,34 @@
+ density.stepSize(-1)}
+ class="size-7"
+ />
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="Размер миниатюр"
/>
+ = DENSITY_MAX}
+ onclick={() => density.stepSize(1)}
+ class="size-7"
+ />
diff --git a/frontend/src/lib/icons/registry.ts b/frontend/src/lib/icons/registry.ts
index f8e6966..371686f 100644
--- a/frontend/src/lib/icons/registry.ts
+++ b/frontend/src/lib/icons/registry.ts
@@ -45,6 +45,8 @@ export const icons = {
label: { path: '' },
menu: { path: '' },
grid_view: { path: '' },
+ density_small: { path: '' },
+ density_large: { path: '' },
wallpaper: { path: '' },
fullscreen: { path: '' },
fullscreen_exit: { path: '' },
diff --git a/frontend/src/lib/stores/density.svelte.ts b/frontend/src/lib/stores/density.svelte.ts
index 1a7c555..22027e4 100644
--- a/frontend/src/lib/stores/density.svelte.ts
+++ b/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();
diff --git a/frontend/src/routes/(app)/albums/[id]/+page.svelte b/frontend/src/routes/(app)/albums/[id]/+page.svelte
index f2c0a35..04accee 100644
--- a/frontend/src/routes/(app)/albums/[id]/+page.svelte
+++ b/frontend/src/routes/(app)/albums/[id]/+page.svelte
@@ -472,6 +472,7 @@
{#if canUpload}
+