feat(gif-mood): persist layout mode in localStorage
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m33s

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-25 17:21:46 +01:00
parent ce2eef1b65
commit f5f852648e

View File

@@ -264,8 +264,14 @@ export function GifMoodBoard({
ratings,
canEdit,
}: GifMoodBoardProps) {
const [cols, setCols] = useState(4);
const [masonry, setMasonry] = useState(false);
const [cols, setCols] = useState<number>(() => {
if (typeof window === 'undefined') return 4;
return Number(localStorage.getItem('gif-mood-cols')) || 4;
});
const [masonry, setMasonry] = useState<boolean>(() => {
if (typeof window === 'undefined') return false;
return localStorage.getItem('gif-mood-masonry') === 'true';
});
const [, startReorderTransition] = useTransition();
const [, startHiddenTransition] = useTransition();
@@ -374,7 +380,7 @@ export function GifMoodBoard({
{[4, 5, 6].map((n) => (
<button
key={n}
onClick={() => setCols(n)}
onClick={() => { setCols(n); localStorage.setItem('gif-mood-cols', String(n)); }}
className={`flex items-center justify-center rounded-lg px-2.5 py-1.5 transition-all ${
!masonry && cols === n
? 'bg-primary text-primary-foreground shadow-sm'
@@ -387,7 +393,7 @@ export function GifMoodBoard({
))}
<div className="w-px h-5 bg-border mx-0.5" />
<button
onClick={() => setMasonry((m) => !m)}
onClick={() => setMasonry((m) => { localStorage.setItem('gif-mood-masonry', String(!m)); return !m; })}
className={`flex items-center justify-center rounded-lg px-2.5 py-1.5 transition-all ${
masonry
? 'bg-primary text-primary-foreground shadow-sm'