Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve lightbox rendering, hero styles, and config loading

Browse Source
This commit is contained in:
ralksta
2026-03-08 16:16:15 +01:00
parent 09f358559e
commit 01da5e1baa
7 changed files with 437 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
components/DevToolbar.tsx
View File

@@ -7,6 +7,9 @@
*
* Hero styles and grid layouts require server re-render, so
* those sections show a copyable YAML snippet instead.
*
* Layout: tabbed panel (Theme / Grid / Server) anchored bottom-right,
* away from Next.js debug toolbar which sits bottom-left.
*/
'use client';
@@ -17,6 +20,9 @@ const PRESETS = ['studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph
const FRAMES = ['none', 'passepartout', 'shadow'];
const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic'];
const GRID_LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow'];
const ASPECT_RATIOS = ['1', '3/2', '2/3', '4/3', '16/9', 'auto'];
type Tab = 'theme' | 'grid' | 'server';
// Font stacks for each preset (must match THEME_PRESETS in config.ts)
const PRESET_FONTS: Record<string, { heading: string; body: string; caption: string }> = {
@@ -53,13 +59,17 @@ function setVar(name: string, value: string) {
export function DevToolbar() {
const [open, setOpen] = useState(false);
const [tab, setTab] = useState<Tab>('theme');
const [preset, setPreset] = useState('');
const [frame, setFrame] = useState('');
const [theme, setTheme] = useState('');
const [grain, setGrain] = useState('');
const [exifOnHover, setExifOnHover] = useState(true);
const [copiedYaml, setCopiedYaml] = useState('');
const [gridCols, setGridCols] = useState(3);
const [gridGap, setGridGap] = useState(12);
const [aspectRatio, setAspectRatio] = useState('1');
const [gridLayout, setGridLayout] = useState('masonry');
// Read initial values from DOM
useLayoutEffect(() => {
@@ -71,8 +81,12 @@ export function DevToolbar() {
const style = getComputedStyle(document.documentElement);
const cols = parseInt(style.getPropertyValue('--grid-columns') || '3', 10);
const gap = parseInt(style.getPropertyValue('--grid-gap') || '12', 10);
const ar = style.getPropertyValue('--grid-aspect-ratio').trim() || '1';
const layout = getAttr('data-grid-layout') || 'masonry';
if (!isNaN(cols)) setGridCols(cols);
if (!isNaN(gap)) setGridGap(gap);
setAspectRatio(ar);
setGridLayout(layout);
}, []);
const switchPreset = useCallback((p: string) => {
@@ -140,6 +154,17 @@ export function DevToolbar() {
});
}, []);
const updateAspectRatio = useCallback((ar: string) => {
setAspectRatio(ar);
document.querySelectorAll<HTMLElement>('.photo-grid').forEach((el) => {
el.style.setProperty('--grid-aspect-ratio', ar);
});
}, []);
const toggleExifOnHover = useCallback(() => {
setExifOnHover((prev) => !prev);
}, []);
const copyYaml = useCallback((section: string, yaml: string) => {
navigator.clipboard.writeText(yaml);
setCopiedYaml(section);
@@ -147,9 +172,17 @@ export function DevToolbar() {
}, []);
const currentYaml = `theme:
preset: ${preset}
photoFrame: ${frame}
grain: ${grain === 'true'}`;
preset: "${preset}"
photoFrame: "${frame}"
grain: ${grain === 'true'}
grid:
columns: ${gridCols}
gap: ${gridGap}
aspectRatio: "${aspectRatio}"
layout: "${gridLayout}"
exifOnHover: ${exifOnHover}`;
// Keyboard shortcut: Ctrl/Cmd + Shift + T
useEffect(() => {
@@ -165,20 +198,20 @@ export function DevToolbar() {
return (
<>
{/* ── Floating Toggle Button ─────────────────────── */}
{/* ── Floating Toggle Button — bottom-right ── */}
<button
onClick={() => setOpen(!open)}
aria-label="Dev Toolbar"
style={{
position: 'fixed',
bottom: 20,
left: 20,
right: 20,
zIndex: 99999,
width: 44,
height: 44,
borderRadius: '50%',
border: '2px solid rgba(255,255,255,0.2)',
background: open ? 'linear-gradient(135deg, #f43f5e, #a855f7)' : 'rgba(30,30,30,0.9)',
background: 'rgba(24,24,27,0.95)',
backdropFilter: 'blur(12px)',
color: '#fff',
fontSize: 18,
@@ -193,18 +226,16 @@ export function DevToolbar() {
{open ? '✕' : '🎨'}
</button>
{/* ── Panel ──────────────────────────────────────── */}
{/* ── Panel — anchored bottom-right ────────── */}
{open && (
<div
style={{
position: 'fixed',
bottom: 76,
left: 20,
right: 20,
zIndex: 99998,
width: 300,
maxHeight: 'calc(100vh - 120px)',
overflowY: 'auto',
background: 'rgba(18,18,22,0.96)',
background: 'rgba(18,18,22,0.97)',
backdropFilter: 'blur(20px)',
borderRadius: 16,
border: '1px solid rgba(255,255,255,0.1)',
@@ -212,13 +243,13 @@ export function DevToolbar() {
color: '#e4e4e7',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
fontSize: 12,
padding: 0,
overflow: 'hidden',
}}
>
{/* ── Header ──────────────────────────── */}
<div
style={{
padding: '14px 16px 10px',
padding: '12px 16px 10px',
borderBottom: '1px solid rgba(255,255,255,0.08)',
display: 'flex',
alignItems: 'center',
@@ -241,100 +272,140 @@ export function DevToolbar() {
</span>
</div>
{/* ── Preset ──────────────────────────── */}
<Section title="Preset">
<PillGrid items={PRESETS} active={preset} onSelect={switchPreset} />
</Section>
{/* ── Tab Bar ─────────────────────────── */}
<div
style={{
display: 'flex',
borderBottom: '1px solid rgba(255,255,255,0.08)',
padding: '0 8px',
}}
>
{(['theme', 'grid', 'server'] as Tab[]).map((t) => (
<button
key={t}
onClick={() => setTab(t)}
style={{
flex: 1,
padding: '8px 4px',
background: 'none',
border: 'none',
borderBottom: tab === t ? '2px solid #e4e4e7' : '2px solid transparent',
color: tab === t ? '#fff' : '#52525b',
fontSize: 11,
fontWeight: tab === t ? 600 : 400,
cursor: 'pointer',
textTransform: 'capitalize',
letterSpacing: '0.04em',
transition: 'all 0.15s ease',
marginBottom: -1,
}}
>
{t}
</button>
))}
</div>
{/* ── Dark / Light ────────────────────── */}
<Section title="Mode">
<PillGrid items={['dark', 'light']} active={theme} onSelect={switchTheme} />
</Section>
{/* ── Tab Content ──────────────────────── */}
<div style={{ padding: '12px 16px' }}>
{/* ── Photo Frame ─────────────────────── */}
<Section title="Photo Frame">
<PillGrid items={FRAMES} active={frame} onSelect={switchFrame} />
</Section>
{/* ── THEME TAB ── */}
{tab === 'theme' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div>
<Label>Preset</Label>
<PillGrid items={PRESETS} active={preset} onSelect={switchPreset} />
</div>
<div>
<Label>Mode</Label>
<PillGrid items={['dark', 'light']} active={theme} onSelect={switchTheme} />
</div>
<div>
<Label>Photo Frame</Label>
<PillGrid items={FRAMES} active={frame} onSelect={switchFrame} />
</div>
<div>
<Label>Film Grain</Label>
<ToggleButton
on={grain === 'true'}
onClick={toggleGrain}
/>
</div>
<div>
<Label>EXIF on Hover</Label>
<ToggleButton on={exifOnHover} onClick={toggleExifOnHover} />
</div>
</div>
)}
{/* ── Grain ───────────────────────────── */}
<Section title="Film Grain">
<button
onClick={toggleGrain}
style={{
...pillStyle,
background:
grain === 'true'
? 'linear-gradient(135deg, #f43f5e, #a855f7)'
: 'rgba(255,255,255,0.06)',
color: grain === 'true' ? '#fff' : '#a1a1aa',
border:
grain === 'true'
? '1px solid rgba(255,255,255,0.2)'
: '1px solid rgba(255,255,255,0.06)',
}}
>
{grain === 'true' ? '● On' : '○ Off'}
</button>
</Section>
{/* ── GRID TAB ── */}
{tab === 'grid' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div>
<Label>Columns: {gridCols}</Label>
<input
type="range"
min={1}
max={6}
value={gridCols}
onChange={(e) => updateGridCols(Number(e.target.value))}
style={{ width: '100%', accentColor: '#e4e4e7', marginTop: 6 }}
/>
</div>
<div>
<Label>Gap: {gridGap}px</Label>
<input
type="range"
min={0}
max={32}
value={gridGap}
onChange={(e) => updateGridGap(Number(e.target.value))}
style={{ width: '100%', accentColor: '#e4e4e7', marginTop: 6 }}
/>
</div>
<div>
<Label>Aspect Ratio</Label>
<PillGrid items={ASPECT_RATIOS} active={aspectRatio} onSelect={updateAspectRatio} />
</div>
</div>
)}
{/* ── Grid Controls ───────────────────── */}
<Section title="Grid">
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
<label style={{ color: '#71717a', fontSize: 11, minWidth: 45 }}>
Cols: {gridCols}
</label>
<input
type="range"
min={1}
max={6}
value={gridCols}
onChange={(e) => updateGridCols(Number(e.target.value))}
style={{ flex: 1, accentColor: '#a855f7' }}
/>
</div>
<div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 8 }}>
<label style={{ color: '#71717a', fontSize: 11, minWidth: 45 }}>
Gap: {gridGap}px
</label>
<input
type="range"
min={0}
max={32}
value={gridGap}
onChange={(e) => updateGridGap(Number(e.target.value))}
style={{ flex: 1, accentColor: '#a855f7' }}
/>
</div>
</Section>
{/* ── Hero Style (info only) ──────────── */}
<Section title="Hero Style (server)">
<PillGrid
items={HERO_STYLES}
active=""
onSelect={(h) => {
copyYaml('hero', `theme:\n heroStyle: ${h}`);
}}
/>
{copiedYaml === 'hero' && <CopyBadge />}
</Section>
{/* ── Grid Layout (info only) ─────────── */}
<Section title="Grid Layout (server)">
<PillGrid
items={GRID_LAYOUTS}
active=""
onSelect={(l) => {
copyYaml('layout', `grid:\n layout: ${l}`);
}}
/>
{copiedYaml === 'layout' && <CopyBadge />}
</Section>
{/* ── SERVER TAB ── */}
{tab === 'server' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
<div>
<Label>Hero Style — click to copy YAML</Label>
<PillGrid
items={HERO_STYLES}
active=""
onSelect={(h) => copyYaml('hero', `theme:\n heroStyle: "${h}"`)}
/>
{copiedYaml === 'hero' && <CopyBadge />}
</div>
<div>
<Label>Grid Layout — click to apply & copy</Label>
<PillGrid
items={GRID_LAYOUTS}
active={gridLayout}
onSelect={(l) => {
setGridLayout(l);
document.documentElement.setAttribute('data-grid-layout', l);
copyYaml('layout', `grid:\n layout: "${l}"`);
}}
/>
{copiedYaml === 'layout' && <CopyBadge />}
</div>
<p style={{ color: '#52525b', fontSize: 10, margin: 0, lineHeight: 1.5 }}>
These settings require a server re-render. Click to copy the YAML snippet, then paste into{' '}
<code style={{ color: '#a1a1aa' }}>content/settings.yaml</code>.
</p>
</div>
)}
</div>
{/* ── Export YAML ──────────────────────── */}
<div
style={{
padding: '12px 16px 16px',
padding: '10px 16px 14px',
borderTop: '1px solid rgba(255,255,255,0.08)',
}}
>
@@ -342,12 +413,12 @@ export function DevToolbar() {
onClick={() => copyYaml('all', currentYaml)}
style={{
width: '100%',
padding: '10px 0',
padding: '9px 0',
borderRadius: 10,
border: 'none',
background:
copiedYaml === 'all' ? '#22c55e' : 'linear-gradient(135deg, #a855f7, #6366f1)',
color: '#fff',
copiedYaml === 'all' ? '#16a34a' : 'rgba(255,255,255,0.92)',
color: copiedYaml === 'all' ? '#fff' : '#111',
fontWeight: 600,
fontSize: 12,
cursor: 'pointer',
@@ -366,28 +437,50 @@ export function DevToolbar() {
/* ── Sub-components ───────────────────────────────── */
function Section({ title, children }: { title: string; children: React.ReactNode }) {
function Label({ children }: { children: React.ReactNode }) {
return (
<div style={{ padding: '12px 16px 8px' }}>
<div
style={{
fontSize: 10,
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.1em',
color: '#71717a',
marginBottom: 8,
}}
>
{title}
</div>
<div
style={{
fontSize: 10,
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: '0.1em',
color: '#71717a',
marginBottom: 6,
}}
>
{children}
</div>
);
}
function ToggleButton({ on, onClick }: { on: boolean; onClick: () => void }) {
return (
<button
onClick={onClick}
style={{
padding: '5px 14px',
borderRadius: 8,
fontSize: 11,
fontWeight: 500,
cursor: 'pointer',
transition: 'all 0.12s ease',
background: on
? '#166534'
: 'rgba(255,255,255,0.06)',
color: on ? '#86efac' : '#71717a',
border: on
? '1px solid #166534'
: '1px solid rgba(255,255,255,0.08)',
}}
>
{on ? '● On' : '○ Off'}
</button>
);
}
const pillStyle: React.CSSProperties = {
padding: '6px 12px',
padding: '5px 11px',
borderRadius: 8,
fontSize: 11,
fontWeight: 500,
@@ -406,7 +499,7 @@ function PillGrid({
onSelect: (item: string) => void;
}) {
return (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
{items.map((item) => (
<button
key={item}
@@ -415,13 +508,13 @@ function PillGrid({
...pillStyle,
background:
item === active
? 'linear-gradient(135deg, #a855f7, #6366f1)'
? 'rgba(255,255,255,0.9)'
: 'rgba(255,255,255,0.06)',
color: item === active ? '#fff' : '#a1a1aa',
color: item === active ? '#111' : '#71717a',
border:
item === active
? '1px solid rgba(255,255,255,0.2)'
: '1px solid rgba(255,255,255,0.06)',
? '1px solid rgba(255,255,255,0.7)'
: '1px solid rgba(255,255,255,0.08)',
}}
>
{item}
@@ -442,7 +535,7 @@ function CopyBadge() {
fontWeight: 500,
}}
>
✓ YAML copied — paste into gallery.yaml
✓ YAML copied — paste into settings.yaml
</span>
);
}

5
components/Lightbox.module.css
View File

@@ -53,7 +53,8 @@
border-radius: var(--radius-sm);
user-select: none;
-webkit-user-drag: none;
opacity: 1; /* Default to visible for robustness */
opacity: 1;
/* Default to visible for robustness */
transition: opacity var(--transition-normal);
}
@@ -252,4 +253,4 @@
.image {
border-radius: 0;
}
}

12
components/Lightbox.tsx
View File

@@ -12,6 +12,7 @@
'use client';
import { useState, useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';
import type { PhotoItem } from '@/app/[...path]/PhotoGrid';
import styles from './Lightbox.module.css';
@@ -45,6 +46,12 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
const touchStartY = useRef<number>(0);
const current = assets[currentIndex];
const [mounted, setMounted] = useState(false);
// Mount guard — createPortal needs document.body (client-only)
useEffect(() => {
setMounted(true);
}, []);
// Fetch EXIF data on demand
const fetchExif = useCallback((url: string) => {
@@ -118,7 +125,7 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
[onClose],
);
return (
const lightboxJsx = (
<div
className={styles.overlay}
ref={overlayRef}
@@ -277,4 +284,7 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
)}
</div>
);
if (!mounted) return null;
return createPortal(lightboxJsx, document.body);
}