From 8e7855f2e70d5a13eeb01b39a3ac553f7e7a24c9 Mon Sep 17 00:00:00 2001 From: Christopher David Date: Tue, 27 Aug 2024 20:48:23 -0500 Subject: [PATCH] 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 --- app/layout.tsx | 4 +++ components/ResetHUDButton.tsx | 28 ++++++++++++++++++ store/pane.ts | 53 ++++++++++++++++++----------------- 3 files changed, 60 insertions(+), 25 deletions(-) create mode 100644 components/ResetHUDButton.tsx diff --git a/app/layout.tsx b/app/layout.tsx index afce4045..3d4a149a 100644 --- 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({ +
+ +
{children} diff --git a/components/ResetHUDButton.tsx b/components/ResetHUDButton.tsx new file mode 100644 index 00000000..04a70dc4 --- /dev/null +++ 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 ( + + ); +}; + +export default ResetHUDButton; \ No newline at end of file diff --git a/store/pane.ts b/store/pane.ts index 2978b20b..d31e3d4a 100644 --- 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()( 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()( 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()( ) ) -export { calculatePanePosition } +export { calculatePanePosition } \ No newline at end of file