diff --git a/apps/nextjs/src/components/board/sections/category-section.tsx b/apps/nextjs/src/components/board/sections/category-section.tsx index df204998b..592b39c68 100644 --- a/apps/nextjs/src/components/board/sections/category-section.tsx +++ b/apps/nextjs/src/components/board/sections/category-section.tsx @@ -3,6 +3,7 @@ import { useDisclosure } from "@mantine/hooks"; import { IconChevronDown, IconChevronUp } from "@tabler/icons-react"; import { clientApi } from "@homarr/api/client"; +import { useSession } from "@homarr/auth/client"; import { useRequiredBoard } from "@homarr/boards/context"; import type { CategorySection } from "~/app/[locale]/boards/_types"; @@ -10,19 +11,36 @@ import { CategoryMenu } from "./category/category-menu"; import { GridStack } from "./gridstack/gridstack"; import classes from "./item.module.css"; +const localStorageKey = (sectionId: string) => `homarr-section-collapsed-${sectionId}`; + interface Props { section: CategorySection; } export const BoardCategorySection = ({ section }: Props) => { + const { status } = useSession(); const { mutate } = clientApi.section.changeCollapsed.useMutation(); const board = useRequiredBoard(); - const [opened, { toggle }] = useDisclosure(section.collapsed, { + + const initialCollapsed = + typeof window !== "undefined" + ? (localStorage.getItem(localStorageKey(section.id)) ?? String(section.collapsed)) === "true" + : section.collapsed; + + const [opened, { toggle }] = useDisclosure(initialCollapsed, { onOpen() { - mutate({ sectionId: section.id, collapsed: true }); + if (status === "authenticated") { + mutate({ sectionId: section.id, collapsed: true }); + } else if (status === "unauthenticated") { + localStorage.setItem(localStorageKey(section.id), "true"); + } }, onClose() { - mutate({ sectionId: section.id, collapsed: false }); + if (status === "authenticated") { + mutate({ sectionId: section.id, collapsed: false }); + } else if (status === "unauthenticated") { + localStorage.setItem(localStorageKey(section.id), "false"); + } }, });