Add Reset HUD State Button (Updated Design) (#81)

* Add 2 lines in pane.ts * Create file components/ResetHUDButton.tsx * Add 4 lines in layout.tsx * Add 2 lines in ResetHUDButton.tsx * Add 5 lines in ResetHUDButton.tsx
OpenAgentsInc · Aug 28, 2024 · 8e7855f · 8e7855f
1 parent a7caa3b
commit 8e7855f
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 25 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { jetbrainsMono } from '@/lib/fonts'
 import "./globals.css"
 import { siteConfig } from "./siteConfig"
+import ResetHUDButton from "@/components/ResetHUDButton"
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://openagents.com"),
@@ -38,6 +39,9 @@ export default function RootLayout({
       <body
         className={`${jetbrainsMono.variable} min-h-screen scroll-auto antialiased selection:bg-white selection:text-black dark:bg-black font-mono`}
       >
+        <div className="fixed top-4 right-4 z-50">
+          <ResetHUDButton />
+        </div>
         {children}
       </body>
     </html>

diff --git a/components/ResetHUDButton.tsx b/components/ResetHUDButton.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import React from 'react';
+import { usePaneStore } from '@/store/pane';
+import { Button } from '@/components/ui/button';
+import { IconRefresh } from '@/components/ui/icons';
+
+const ResetHUDButton: React.FC = () => {
+  const resetHUDState = usePaneStore((state) => state.resetHUDState);
+
+  const handleReset = () => {
+    resetHUDState();
+  };
+
+  return (
+    <Button
+      onClick={handleReset}
+      variant="outline"
+      size="icon"
+      className="fixed bottom-4 left-4 z-50"
+    >
+      <IconRefresh className="h-4 w-4" />
+      <span className="sr-only">Reset HUD</span>
+    </Button>
+  );
+};
+
+export default ResetHUDButton;
diff --git a/store/pane.ts b/store/pane.ts
@@ -5,33 +5,35 @@ import { calculatePanePosition } from "./panes"
 import * as actions from "./panes/actions"
 import { PaneStore } from "./types"
 
+const initialPanes = [
+  {
+    id: '0',
+    type: 'chats',
+    title: 'Chats',
+    x: 90,
+    y: 170,
+    width: 260,
+    height: 450,
+    isOpen: true,
+    dismissable: false,
+  },
+  {
+    id: '1',
+    type: 'changelog',
+    title: 'Changelog',
+    x: 390,
+    y: 170,
+    width: 360,
+    height: 350,
+    isOpen: true,
+    dismissable: true,
+  },
+]
+
 export const usePaneStore = create<PaneStore>()(
   persist(
     (set) => ({
-      panes: [
-        {
-          id: '0',
-          type: 'chats',
-          title: 'Chats',
-          x: 90,
-          y: 170,
-          width: 260,
-          height: 450,
-          isOpen: true,
-          dismissable: false,
-        },
-        {
-          id: '1',
-          type: 'changelog',
-          title: 'Changelog',
-          x: 390,
-          y: 170,  // Positioned below the Chats pane
-          width: 360,
-          height: 350,  // Smaller height
-          isOpen: true,
-          dismissable: true,
-        },
-      ],
+      panes: initialPanes,
       isChatOpen: true,
       lastPanePosition: null,
       addPane: (newPane: PaneInput, shouldTile = false) => actions.addPane(set, newPane, shouldTile),
@@ -46,6 +48,7 @@ export const usePaneStore = create<PaneStore>()(
       openChatPane: (newPane: PaneInput, isCommandKeyHeld: boolean = false) => actions.openChatPane(set, newPane, isCommandKeyHeld),
       bringPaneToFront: (id: string) => actions.bringPaneToFront(set, id),
       setActivePane: (id: string) => actions.setActivePane(set, id),
+      resetHUDState: () => set({ panes: initialPanes, lastPanePosition: null }),
     }),
     {
       name: 'openagents-hud-storage-1293761231233x344a',
@@ -54,4 +57,4 @@ export const usePaneStore = create<PaneStore>()(
   )
 )
 
-export { calculatePanePosition }
+export { calculatePanePosition }