Settings panel — six layout options

Click each option above to see how the same content reorganises. Each mockup uses identical copy and controls so you can compare information density and scan-ability.

Option 1 — Two-column groups, retighter labels

Closest to today; minimal change. Better at-a-glance scan once labels are sharper.
Right column still longer than left. Maintenance still scrolls within its section.
⚙ Settings
×

Appearance

Default sort
New library views start in this order.
Accent — Primary
Cyan highlights & active state.
Accent — Secondary
Tag pills & secondary chrome.

Display

Grid columns (Landscape)
Cover columns in L-mode.
3 per row
Grid columns (Portrait)
Cover columns in P-mode.
6 per row
Fade transitions
Soft cross-fade on navigation.
Fade duration
400ms

Library

Images
422
Tags
38
Collections
12

Storage

Library folder
D:/.../library
Database
D:/.../data/library.db

Trash & deletion

Use recycle bin
Soft-delete to bin instead of permanent.
Trash retention
Auto-purge after N days. 0 = never.
30 days
Delete files from disk
When emptying trash, unlink originals + thumbs.

Maintenance

Re-organize library
Move covers into letter buckets.
Regenerate thumbnails
Rebuild WebP previews. Migrates legacy filenames.
Find undersized covers
Flag covers under 750×500.
Purge orphan files
Remove on-disk files not referenced by DB.
Clear cache
Drop all server-side cached pages.

Backup

Export & import
JSON dump of all metadata. Image files copy separately.

Option 2 — Top tabs (General · Display · Trash · Maintenance · Backup · About)

Tightest visual: only one section visible at a time. No scroll for any single tab.
More clicks; can hide settings you forgot exist. Best when settings rarely-used overall.
⚙ Settings
×

Display

Grid columns (Landscape)
Cover columns in L-mode.
3 per row
Grid columns (Portrait)
Cover columns in P-mode.
6 per row
Fade transitions
Soft cross-fade on navigation.
Fade duration
How long the fade lasts.
400ms

(Showing one tab at a time — switch tabs above for the others.)

Option 3 — Accordion / collapsible sections

Skim all section names at once; expand only what you need. Section count stays visible.
Extra click per section. Scroll re-flows when sections open/close.
⚙ Settings
×

Defaults

Default sort

Theme

Display

Grid columns (Landscape)
3 per row
Grid columns (Portrait)
6 per row
Fade transitions

Trash & deletion

Maintenance 5

Backup

Library & storage

Option 4 — Three columns at full width

Almost everything visible without scrolling. Great on a wide monitor.
Drawer takes up more screen real estate. Awkward on smaller laptops.
⚙ Settings
×

Defaults & Theme

Default sort
Accent primary
Accent secondary

Display

Grid cols — Landscape
3
Grid cols — Portrait
6
Fade transitions
Fade duration
400ms

Trash & deletion

Use recycle bin
Retention
30d
Delete from disk

Library

Images
422
Tags
38
Collections
12

Storage

Library
D:/.../library
Database
D:/.../library.db

Maintenance

Re-organize
Letter buckets.
Regen thumbnails
Rebuild WebP.
Find undersized
Flag <750×500.
Purge orphans
Clear cache

Backup

JSON metadata dump
Image files copy separately.

Option 5 — Vertical sidebar nav inside the panel (macOS / VSCode style)

Beautiful focused single-section view. Sidebar count badges hint at activity.
More clicks. Padding-heavy at narrow drawer width — needs the wide drawer.
⚙ Settings
×

Display

Grid density, transitions, and the front-only portrait toggle.

Grid columns

Landscape (full cover)
L-mode card count.
3 per row
Portrait (front-only)
P-mode card count.
6 per row

Animations

Fade transitions
Soft cross-fade on navigation.
Fade duration
400ms

Option 6 — Pinned common settings, advanced collapsed by default

Surfaces 90% of what you use; hides the destructive/rarely-used 10%. Lowest cognitive load.
"Advanced" implies expert-only — folks who'd benefit from re-organize won't go looking.
⚙ Settings
×

Common

Default sort
Grid cols — Landscape
3
Grid cols — Portrait
6
Use recycle bin
Fade transitions
Accent — Primary

Advanced — Theme, accents, fade duration

Maintenance — Reorganize, regen, scans 5

Backup — Export & import

Library & storage info