Provide a button to clear session data (#231)

Fixes #214

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

src/components/preview_panel/PreviewPanel.tsx

@@ -5,6 +5,7 @@ import {
   previewPanelKeyAtom,
   selectedAppIdAtom,
 } from "../../atoms/appAtoms";
+import { IpcClient } from "@/ipc/ipc_client";
 
 import { CodeView } from "./CodeView";
 import { PreviewIframe } from "./PreviewIframe";
@@ -17,6 +18,7 @@ import {
   MoreVertical,
   Cog,
   Power,
+  Trash2,
 } from "lucide-react";
 import { motion } from "framer-motion";
 import { useEffect, useRef, useState, useCallback } from "react";
@@ -29,6 +31,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { showError, showSuccess } from "@/lib/toast";
+import { useMutation } from "@tanstack/react-query";
 
 type PreviewMode = "preview" | "code";
 
@@ -37,6 +41,7 @@ interface PreviewHeaderProps {
   setPreviewMode: (mode: PreviewMode) => void;
   onRestart: () => void;
   onCleanRestart: () => void;
+  onClearSessionData: () => void;
 }
 
 interface ConsoleHeaderProps {
@@ -51,6 +56,7 @@ const PreviewHeader = ({
   setPreviewMode,
   onRestart,
   onCleanRestart,
+  onClearSessionData,
 }: PreviewHeaderProps) => (
   <div className="flex items-center justify-between px-4 py-2 border-b border-border">
     <div className="relative flex space-x-2 bg-[var(--background-darkest)] rounded-md p-0.5">
@@ -111,6 +117,15 @@ const PreviewHeader = ({
               </span>
             </div>
           </DropdownMenuItem>
+          <DropdownMenuItem onClick={onClearSessionData}>
+            <Trash2 size={16} />
+            <div className="flex flex-col">
+              <span>Clear Preview Data</span>
+              <span className="text-xs text-muted-foreground">
+                Clears cookies and local storage for the app preview
+              </span>
+            </div>
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
@@ -146,7 +161,8 @@ export function PreviewPanel() {
   const [previewMode, setPreviewMode] = useAtom(previewModeAtom);
   const selectedAppId = useAtomValue(selectedAppIdAtom);
   const [isConsoleOpen, setIsConsoleOpen] = useState(false);
-  const { runApp, stopApp, restartApp, loading, app } = useRunApp();
+  const { runApp, stopApp, restartApp, loading, app, refreshAppIframe } =
+    useRunApp();
   const runningAppIdRef = useRef<number | null>(null);
   const key = useAtomValue(previewPanelKeyAtom);
   const appOutput = useAtomValue(appOutputAtom);
@@ -163,6 +179,29 @@ export function PreviewPanel() {
     restartApp({ removeNodeModules: true });
   }, [restartApp]);
 
+  const useClearSessionData = () => {
+    return useMutation({
+      mutationFn: () => {
+        const ipcClient = IpcClient.getInstance();
+        return ipcClient.clearSessionData();
+      },
+      onSuccess: async () => {
+        await refreshAppIframe();
+        showSuccess("Preview data cleared");
+        // Optionally invalidate relevant queries
+      },
+      onError: (error) => {
+        showError(`Error clearing preview data: ${error}`);
+      },
+    });
+  };
+
+  const { mutate: clearSessionData } = useClearSessionData();
+
+  const handleClearSessionData = useCallback(() => {
+    clearSessionData();
+  }, [selectedAppId, clearSessionData]);
+
   useEffect(() => {
     const previousAppId = runningAppIdRef.current;
 
@@ -214,6 +253,7 @@ export function PreviewPanel() {
         setPreviewMode={setPreviewMode}
         onRestart={handleRestart}
         onCleanRestart={handleCleanRestart}
+        onClearSessionData={handleClearSessionData}
       />
       <div className="flex-1 overflow-hidden">
         <PanelGroup direction="vertical">

src/ipc/handlers/session_handlers.ts

@@ -0,0 +1,12 @@
+import { ipcMain, session } from "electron";
+
+export const registerSessionHandlers = () => {
+  ipcMain.handle("clear-session-data", async (_event) => {
+    const defaultAppSession = session.defaultSession;
+
+    await defaultAppSession.clearStorageData({
+      storages: ["cookies", "localstorage"],
+    });
+    console.info(`[IPC] All session data cleared for default session`);
+  });
+};

src/ipc/ipc_client.ts

@@ -821,4 +821,8 @@ export class IpcClient {
   public async renameBranch(params: RenameBranchParams): Promise<void> {
     await this.ipcRenderer.invoke("rename-branch", params);
   }
+
+  async clearSessionData(): Promise<void> {
+    return this.ipcRenderer.invoke("clear-session-data");
+  }
 }

src/ipc/ipc_host.ts

@@ -17,6 +17,7 @@ import { registerVersionHandlers } from "./handlers/version_handlers";
 import { registerLanguageModelHandlers } from "./handlers/language_model_handlers";
 import { registerReleaseNoteHandlers } from "./handlers/release_note_handlers";
 import { registerImportHandlers } from "./handlers/import_handlers";
+import { registerSessionHandlers } from "./handlers/session_handlers";
 
 export function registerIpcHandlers() {
   // Register all IPC handlers by category
@@ -39,4 +40,5 @@ export function registerIpcHandlers() {
   registerLanguageModelHandlers();
   registerReleaseNoteHandlers();
   registerImportHandlers();
+  registerSessionHandlers();
 }

src/preload.ts

@@ -74,6 +74,7 @@ const validInvokeChannels = [
   "select-app-folder",
   "check-app-name",
   "rename-branch",
+  "clear-session-data",
 ] as const;
 
 // Add valid receive channels