From 31cab6efd249cffab0eff53b3ceb57c0ac3cbbee Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 3 Mar 2026 12:07:01 -0600
Subject: [PATCH] ui: persist issue properties pane visibility in localStorage

Store the open/closed state of the properties panel in localStorage
so it persists across navigations, issues, and companies.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/Layout.tsx          |  6 ++--
 ui/src/components/PropertiesPanel.tsx |  6 ++--
 ui/src/context/PanelContext.tsx       | 40 ++++++++++++++++++++++++++-
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 471d902b..9c272b64 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -29,7 +29,7 @@ import { Button } from "@/components/ui/button";
 export function Layout() {
   const { sidebarOpen, setSidebarOpen, toggleSidebar, isMobile } = useSidebar();
   const { openNewIssue, openOnboarding } = useDialog();
-  const { panelContent, closePanel } = usePanel();
+  const { togglePanelVisible } = usePanel();
   const { companies, loading: companiesLoading, selectedCompanyId, setSelectedCompanyId } = useCompany();
   const { theme, toggleTheme } = useTheme();
   const { companyPrefix } = useParams<{ companyPrefix: string }>();
@@ -88,9 +88,7 @@ export function Layout() {
     setSelectedCompanyId,
   ]);
 
-  const togglePanel = useCallback(() => {
-    if (panelContent) closePanel();
-  }, [panelContent, closePanel]);
+  const togglePanel = togglePanelVisible;
 
   // Cmd+1..9 to switch companies
   const switchCompany = useCallback(
diff --git a/ui/src/components/PropertiesPanel.tsx b/ui/src/components/PropertiesPanel.tsx
index bc0e9346..f6ff9b0c 100644
--- a/ui/src/components/PropertiesPanel.tsx
+++ b/ui/src/components/PropertiesPanel.tsx
@@ -4,15 +4,15 @@ import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 
 export function PropertiesPanel() {
-  const { panelContent, closePanel } = usePanel();
+  const { panelContent, panelVisible, setPanelVisible } = usePanel();
 
-  if (!panelContent) return null;
+  if (!panelContent || !panelVisible) return null;
 
   return (
     <aside className="hidden md:flex w-80 border-l border-border bg-card flex-col shrink-0">
       <div className="flex items-center justify-between px-4 py-2 border-b border-border">
         <span className="text-sm font-medium">Properties</span>
-        <Button variant="ghost" size="icon-xs" onClick={closePanel}>
+        <Button variant="ghost" size="icon-xs" onClick={() => setPanelVisible(false)}>
           <X className="h-4 w-4" />
         </Button>
       </div>
diff --git a/ui/src/context/PanelContext.tsx b/ui/src/context/PanelContext.tsx
index 96d4cd51..a29fbbb4 100644
--- a/ui/src/context/PanelContext.tsx
+++ b/ui/src/context/PanelContext.tsx
@@ -1,15 +1,38 @@
 import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
 
+const STORAGE_KEY = "paperclip:panel-visible";
+
 interface PanelContextValue {
   panelContent: ReactNode | null;
+  panelVisible: boolean;
   openPanel: (content: ReactNode) => void;
   closePanel: () => void;
+  setPanelVisible: (visible: boolean) => void;
+  togglePanelVisible: () => void;
 }
 
 const PanelContext = createContext<PanelContextValue | null>(null);
 
+function readPreference(): boolean {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw === null ? true : raw === "true";
+  } catch {
+    return true;
+  }
+}
+
+function writePreference(visible: boolean) {
+  try {
+    localStorage.setItem(STORAGE_KEY, String(visible));
+  } catch {
+    // Ignore storage failures.
+  }
+}
+
 export function PanelProvider({ children }: { children: ReactNode }) {
   const [panelContent, setPanelContent] = useState<ReactNode | null>(null);
+  const [panelVisible, setPanelVisibleState] = useState(readPreference);
 
   const openPanel = useCallback((content: ReactNode) => {
     setPanelContent(content);
@@ -19,8 +42,23 @@ export function PanelProvider({ children }: { children: ReactNode }) {
     setPanelContent(null);
   }, []);
 
+  const setPanelVisible = useCallback((visible: boolean) => {
+    setPanelVisibleState(visible);
+    writePreference(visible);
+  }, []);
+
+  const togglePanelVisible = useCallback(() => {
+    setPanelVisibleState((prev) => {
+      const next = !prev;
+      writePreference(next);
+      return next;
+    });
+  }, []);
+
   return (
-    <PanelContext.Provider value={{ panelContent, openPanel, closePanel }}>
+    <PanelContext.Provider
+      value={{ panelContent, panelVisible, openPanel, closePanel, setPanelVisible, togglePanelVisible }}
+    >
       {children}
     </PanelContext.Provider>
   );