From 2fda2a2732a618a62d728cf34526f01edcc20e72 Mon Sep 17 00:00:00 2001
From: Yuzu <yuzu@kirameki.cafe>
Date: Wed, 1 Jul 2026 00:38:15 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20persist=20favorite=20folder?=
 =?UTF-8?q?=20collapse=20state=20across=20navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ui/CollapsibleCard.tsx      | 11 +++++++++--
 .../features/world/MyFavoriteWorldsSection.tsx |  1 +
 src/renderer/src/store/ui.ts                   | 18 ++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/src/store/ui.ts

diff --git a/src/renderer/src/components/ui/CollapsibleCard.tsx b/src/renderer/src/components/ui/CollapsibleCard.tsx
index dd1bfc6..c128a93 100644
--- a/src/renderer/src/components/ui/CollapsibleCard.tsx
+++ b/src/renderer/src/components/ui/CollapsibleCard.tsx
@@ -1,26 +1,33 @@
 import { useState, type ReactNode } from "react";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { LABEL_HEADING } from "./styles";
+import { useCollapsed } from "../../store/ui";
 
 export function CollapsibleCard({
   title,
   count,
   action,
   defaultOpen = true,
+  persistKey,
   children,
 }: {
   title: string;
   count?: number | string;
   action?: ReactNode;
   defaultOpen?: boolean;
+  persistKey?: string;
   children: ReactNode;
 }) {
-  const [open, setOpen] = useState(defaultOpen);
+  const local = useState(defaultOpen);
+  const persisted = useCollapsed(persistKey ?? "", defaultOpen);
+  const [open, toggle] = persistKey
+    ? persisted
+    : [local[0], () => local[1]((v) => !v)];
   return (
     <section className="rounded-xl border border-border bg-surface-2 p-5 shadow-sm">
       <div className={`flex items-center gap-1.5 ${open ? "mb-3" : ""}`}>
         <button
-          onClick={() => setOpen((v) => !v)}
+          onClick={toggle}
           className={`flex flex-1 items-center gap-1.5 ${LABEL_HEADING}`}
         >
           <span className="text-faint">
diff --git a/src/renderer/src/features/world/MyFavoriteWorldsSection.tsx b/src/renderer/src/features/world/MyFavoriteWorldsSection.tsx
index 19776f9..2476c5e 100644
--- a/src/renderer/src/features/world/MyFavoriteWorldsSection.tsx
+++ b/src/renderer/src/features/world/MyFavoriteWorldsSection.tsx
@@ -174,6 +174,7 @@ export function MyFavoriteWorldsSection({ filter }: { filter?: WorldFilter }) {
       {shown.map((folder) => (
         <CollapsibleCard
           key={folder.name}
+          persistKey={`fav-worlds:${folder.name}`}
           title={folder.displayName}
           count={`${folder.count} / ${maxPerGroup}`}
           action={
diff --git a/src/renderer/src/store/ui.ts b/src/renderer/src/store/ui.ts
new file mode 100644
index 0000000..c992fb6
--- /dev/null
+++ b/src/renderer/src/store/ui.ts
@@ -0,0 +1,18 @@
+import { create } from "zustand";
+
+interface UiState {
+  collapsed: Record<string, boolean>;
+  toggleCollapsed: (key: string) => void;
+}
+
+export const useUi = create<UiState>((set) => ({
+  collapsed: {},
+  toggleCollapsed: (key) =>
+    set((st) => ({ collapsed: { ...st.collapsed, [key]: !st.collapsed[key] } })),
+}));
+
+export function useCollapsed(key: string, defaultOpen: boolean): [boolean, () => void] {
+  const open = useUi((s) => (key in s.collapsed ? !s.collapsed[key] : defaultOpen));
+  const toggle = useUi((s) => s.toggleCollapsed);
+  return [open, () => toggle(key)];
+}