feat(gif-mood): persist layout mode in localStorage
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m33s
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:
@@ -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'
|
||||||
|
|||||||
Reference in New Issue
Block a user