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, ratings,
canEdit, canEdit,
}: GifMoodBoardProps) { }: GifMoodBoardProps) {
const [cols, setCols] = useState(4); const [cols, setCols] = useState<number>(() => {
const [masonry, setMasonry] = useState(false); 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 [, startReorderTransition] = useTransition();
const [, startHiddenTransition] = useTransition(); const [, startHiddenTransition] = useTransition();
@@ -374,7 +380,7 @@ export function GifMoodBoard({
{[4, 5, 6].map((n) => ( {[4, 5, 6].map((n) => (
<button <button
key={n} 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 ${ className={`flex items-center justify-center rounded-lg px-2.5 py-1.5 transition-all ${
!masonry && cols === n !masonry && cols === n
? 'bg-primary text-primary-foreground shadow-sm' ? '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" /> <div className="w-px h-5 bg-border mx-0.5" />
<button <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 ${ className={`flex items-center justify-center rounded-lg px-2.5 py-1.5 transition-all ${
masonry masonry
? 'bg-primary text-primary-foreground shadow-sm' ? 'bg-primary text-primary-foreground shadow-sm'