From 8baa5d84b9d46f62125a17825d68cb1dfe3fc313 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Fri, 28 Mar 2025 12:12:56 -0400
Subject: [PATCH 1/4] added reboot to command menu

---
 src/components/CommandPalette.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
index 54659fcb..a25d6dd7 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -32,6 +32,7 @@ import {
   XCircleIcon,
 } from "lucide-react";
 import { useEffect } from "react";
+import { RebootDialog } from "@components/Dialog/RebootDialog.tsx";
 
 export interface Group {
   label: string;
@@ -117,7 +118,7 @@ export const CommandPalette = () => {
             return {
               label:
                 device.nodes.get(device.hardware.myNodeNum)?.user?.longName ??
-                  device.hardware.myNodeNum.toString(),
+                device.hardware.myNodeNum.toString(),
               icon: (
                 <Avatar
                   text={device.nodes.get(device.hardware.myNodeNum)?.user
@@ -172,6 +173,13 @@ export const CommandPalette = () => {
             removeDevice(selectedDevice ?? 0);
           },
         },
+        {
+          label: "Reboot",
+          icon: PowerIcon,
+          action() {
+            connection?.reboot(0);
+          },
+        },
         {
           label: "Schedule Shutdown",
           icon: PowerIcon,

From 35aabdc90099e3604dd8575982d98f9b8af98456 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Fri, 28 Mar 2025 21:06:37 -0400
Subject: [PATCH 2/4] feat: added reboot to OTA in command menu

---
 .../index.tsx}                                | 116 +++++++++++-------
 src/components/Dialog/DialogManager.tsx       |   7 ++
 .../Dialog/RebootOTADialog.test.tsx           | 114 +++++++++++++++++
 src/components/Dialog/RebootOTADialog.tsx     | 104 ++++++++++++++++
 src/components/UI/Command.tsx                 |   2 +-
 src/core/hooks/usePinnedItems.tsx             |  19 +++
 src/core/stores/deviceStore.ts                |   3 +
 vitest.config.ts                              |   2 +-
 8 files changed, 320 insertions(+), 47 deletions(-)
 rename src/components/{CommandPalette.tsx => CommandPalette/index.tsx} (69%)
 create mode 100644 src/components/Dialog/RebootOTADialog.test.tsx
 create mode 100644 src/components/Dialog/RebootOTADialog.tsx
 create mode 100644 src/core/hooks/usePinnedItems.tsx

diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette/index.tsx
similarity index 69%
rename from src/components/CommandPalette.tsx
rename to src/components/CommandPalette/index.tsx
index a25d6dd7..185a1ee6 100644
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette/index.tsx
@@ -1,4 +1,3 @@
-import { Avatar } from "./UI/Avatar.tsx";
 import {
   CommandDialog,
   CommandEmpty,
@@ -18,7 +17,6 @@ import {
   FactoryIcon,
   LayersIcon,
   LinkIcon,
-  type LucideIcon,
   MapIcon,
   MessageSquareIcon,
   PlusIcon,
@@ -29,10 +27,13 @@ import {
   SmartphoneIcon,
   TrashIcon,
   UsersIcon,
-  XCircleIcon,
+  Pin,
+  type LucideIcon,
 } from "lucide-react";
 import { useEffect } from "react";
-import { RebootDialog } from "@components/Dialog/RebootDialog.tsx";
+import { Avatar } from "@components/UI/Avatar.tsx";
+import { cn } from "@core/utils/cn.ts";
+import { usePinnedItems } from "@core/hooks/usePinnedItems.tsx";
 
 export interface Group {
   label: string;
@@ -46,7 +47,6 @@ export interface Command {
   subItems?: SubItem[];
   tags?: string[];
 }
-
 export interface SubItem {
   label: string;
   icon: React.ReactNode;
@@ -58,11 +58,10 @@ export const CommandPalette = () => {
     commandPaletteOpen,
     setCommandPaletteOpen,
     setSelectedDevice,
-    removeDevice,
-    selectedDevice,
   } = useAppStore();
   const { getDevices } = useDeviceStore();
   const { setDialogOpen, setActivePage, connection } = useDevice();
+  const { pinnedItems, togglePinnedItem } = usePinnedItems({ storageName: 'pinnedCommandMenuGroups' });
 
   const groups: Group[] = [
     {
@@ -114,22 +113,22 @@ export const CommandPalette = () => {
         {
           label: "Switch Node",
           icon: ArrowLeftRightIcon,
-          subItems: getDevices().map((device) => {
-            return {
-              label:
-                device.nodes.get(device.hardware.myNodeNum)?.user?.longName ??
-                device.hardware.myNodeNum.toString(),
-              icon: (
-                <Avatar
-                  text={device.nodes.get(device.hardware.myNodeNum)?.user
-                    ?.shortName ?? device.hardware.myNodeNum.toString()}
-                />
-              ),
-              action() {
-                setSelectedDevice(device.id);
-              },
-            };
-          }),
+          subItems: getDevices().map((device) => ({
+            label:
+              device.nodes.get(device.hardware.myNodeNum)?.user?.longName ??
+              device.hardware.myNodeNum.toString(),
+            icon: (
+              <Avatar
+                text={
+                  device.nodes.get(device.hardware.myNodeNum)?.user?.shortName ??
+                  device.hardware.myNodeNum.toString()
+                }
+              />
+            ),
+            action() {
+              setSelectedDevice(device.id);
+            },
+          })),
         },
         {
           label: "Connect New Node",
@@ -164,22 +163,6 @@ export const CommandPalette = () => {
             },
           ],
         },
-        {
-          label: "Disconnect",
-          icon: XCircleIcon,
-          action() {
-            void connection?.disconnect();
-            setSelectedDevice(0);
-            removeDevice(selectedDevice ?? 0);
-          },
-        },
-        {
-          label: "Reboot",
-          icon: PowerIcon,
-          action() {
-            connection?.reboot(0);
-          },
-        },
         {
           label: "Schedule Shutdown",
           icon: PowerIcon,
@@ -194,6 +177,13 @@ export const CommandPalette = () => {
             setDialogOpen("reboot", true);
           },
         },
+        {
+          label: "Reboot To OTA Mode",
+          icon: RefreshCwIcon,
+          action() {
+            setDialogOpen("rebootOTA", true);
+          },
+        },
         {
           label: "Reset Nodes",
           icon: TrashIcon,
@@ -239,6 +229,12 @@ export const CommandPalette = () => {
     },
   ];
 
+  const sortedGroups = [...groups].sort((a, b) => {
+    const aPinned = pinnedItems.includes(a.label) ? 1 : 0;
+    const bPinned = pinnedItems.includes(b.label) ? 1 : 0;
+    return bPinned - aPinned;
+  });
+
   useEffect(() => {
     const handleKeydown = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -252,15 +248,45 @@ export const CommandPalette = () => {
   }, [setCommandPaletteOpen]);
 
   return (
-    <CommandDialog
-      open={commandPaletteOpen}
-      onOpenChange={setCommandPaletteOpen}
-    >
+    <CommandDialog open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen}>
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
-        {groups.map((group) => (
-          <CommandGroup key={group.label} heading={group.label}>
+        {sortedGroups.map((group) => (
+          <CommandGroup
+            key={group.label}
+            heading={
+              <div className="flex items-center justify-between">
+                <span>{group.label}</span>
+                <button
+                  type="button"
+                  onClick={() => togglePinnedItem(group.label)}
+                  className={cn(
+                    "transition-all duration-300 scale-100 cursor-pointer m-0.5 p-2 focus:*:data-label:opacity-100"
+                  )}
+                  aria-description={
+                    pinnedItems.includes(group.label)
+                      ? "Unpin command group"
+                      : "Pin command group"
+                  }
+                >
+                  <span
+                    data-label
+                    className="transition-all block absolute w-full mb-auto mt-auto ml-0 mr-0 text-xs left-0 -top-5 opacity-0 rounded-lg"
+                  />
+                  <Pin
+                    size={16}
+                    className={cn(
+                      "transition-opacity",
+                      pinnedItems.includes(group.label)
+                        ? "opacity-100 text-red-500"
+                        : "opacity-40 hover:opacity-70"
+                    )}
+                  />
+                </button>
+              </div>
+            }
+          >
             {group.commands.map((command) => (
               <div key={command.label}>
                 <CommandItem
diff --git a/src/components/Dialog/DialogManager.tsx b/src/components/Dialog/DialogManager.tsx
index 1cfbcb3e..38e8ff3d 100644
--- a/src/components/Dialog/DialogManager.tsx
+++ b/src/components/Dialog/DialogManager.tsx
@@ -9,6 +9,7 @@ import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.tsx";
 import { NodeDetailsDialog } from "@components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx";
 import { UnsafeRolesDialog } from "@components/Dialog/UnsafeRolesDialog/UnsafeRolesDialog.tsx";
 import { RefreshKeysDialog } from "@components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx";
+import { RebootOTADialog } from "@components/Dialog/RebootOTADialog.tsx";
 
 export const DialogManager = () => {
   const { channels, config, dialog, setDialogOpen } = useDevice();
@@ -77,6 +78,12 @@ export const DialogManager = () => {
           setDialogOpen("refreshKeys", open);
         }}
       />
+      <RebootOTADialog
+        open={dialog.rebootOTA}
+        onOpenChange={(open) => {
+          setDialogOpen("rebootOTA", open);
+        }}
+      />
     </>
   );
 };
diff --git a/src/components/Dialog/RebootOTADialog.test.tsx b/src/components/Dialog/RebootOTADialog.test.tsx
new file mode 100644
index 00000000..5dc3726f
--- /dev/null
+++ b/src/components/Dialog/RebootOTADialog.test.tsx
@@ -0,0 +1,114 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { RebootOTADialog } from './RebootOTADialog.tsx';
+import { ReactNode } from "react";
+
+const rebootOtaMock = vi.fn();
+let mockConnection: { rebootOta: (delay: number) => void } | undefined = {
+  rebootOta: rebootOtaMock,
+};
+
+vi.mock('@core/stores/deviceStore.ts', () => ({
+  useDevice: () => ({
+    connection: mockConnection,
+  }),
+}));
+
+vi.mock('@components/UI/Button.tsx', async () => {
+  const actual = await vi.importActual('@components/UI/Button.tsx');
+  return {
+    ...actual,
+    Button: (props: any) => <button {...props} />,
+  };
+});
+
+vi.mock('@components/UI/Input.tsx', async () => {
+  const actual = await vi.importActual('@components/UI/Input.tsx');
+  return {
+    ...actual,
+    Input: (props: any) => <input {...props} />,
+  };
+});
+
+vi.mock('@components/UI/Dialog.tsx', () => {
+  return {
+    Dialog: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    DialogContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    DialogHeader: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+    DialogTitle: ({ children }: { children: ReactNode }) => <h1>{children}</h1>,
+    DialogDescription: ({ children }: { children: ReactNode }) => <p>{children}</p>,
+    DialogClose: () => null,
+  };
+});
+
+
+describe('RebootOTADialog', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    rebootOtaMock.mockClear();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders dialog with default input value', () => {
+    render(<RebootOTADialog open={true} onOpenChange={() => { }} />);
+    expect(screen.getByPlaceholderText(/enter delay/i)).toHaveValue(5);
+    expect(screen.getByText(/schedule reboot/i)).toBeInTheDocument();
+    expect(screen.getByText(/reboot to ota mode now/i)).toBeInTheDocument();
+  });
+
+  it('schedules a reboot with delay and calls rebootOta', async () => {
+    const onOpenChangeMock = vi.fn();
+    render(<RebootOTADialog open={true} onOpenChange={onOpenChangeMock} />);
+
+    fireEvent.change(screen.getByPlaceholderText(/enter delay/i), {
+      target: { value: '3' },
+    });
+
+    fireEvent.click(screen.getByText(/schedule reboot/i));
+
+    expect(screen.getByText(/reboot has been scheduled/i)).toBeInTheDocument();
+
+    vi.advanceTimersByTime(3000);
+
+    await waitFor(() => {
+      expect(rebootOtaMock).toHaveBeenCalledWith(0);
+      expect(onOpenChangeMock).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it('triggers an instant reboot', async () => {
+    const onOpenChangeMock = vi.fn();
+    render(<RebootOTADialog open={true} onOpenChange={onOpenChangeMock} />);
+
+    fireEvent.click(screen.getByText(/reboot to ota mode now/i));
+
+    await waitFor(() => {
+      expect(rebootOtaMock).toHaveBeenCalledWith(5);
+      expect(onOpenChangeMock).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it('does not call reboot if connection is undefined', async () => {
+    const onOpenChangeMock = vi.fn();
+
+    // simulate no connection
+    mockConnection = undefined;
+
+    render(<RebootOTADialog open={true} onOpenChange={onOpenChangeMock} />);
+
+    fireEvent.click(screen.getByText(/schedule reboot/i));
+    vi.advanceTimersByTime(5000);
+
+    await waitFor(() => {
+      expect(rebootOtaMock).not.toHaveBeenCalled();
+      expect(onOpenChangeMock).not.toHaveBeenCalled();
+    });
+
+    // reset connection for other tests
+    mockConnection = { rebootOta: rebootOtaMock };
+  });
+
+});
diff --git a/src/components/Dialog/RebootOTADialog.tsx b/src/components/Dialog/RebootOTADialog.tsx
new file mode 100644
index 00000000..ddfd468b
--- /dev/null
+++ b/src/components/Dialog/RebootOTADialog.tsx
@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { ClockIcon, RefreshCwIcon } from "lucide-react";
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { Input } from "@components/UI/Input.tsx";
+import { useDevice } from "@core/stores/deviceStore.ts";
+
+export interface RebootOTADialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const DEFAULT_REBOOT_DELAY = 5; // seconds
+
+export const RebootOTADialog = ({ open, onOpenChange }: RebootOTADialogProps) => {
+  const { connection } = useDevice();
+  const [time, setTime] = useState<number>(DEFAULT_REBOOT_DELAY);
+  const [isScheduled, setIsScheduled] = useState(false);
+  const [inputValue, setInputValue] = useState(DEFAULT_REBOOT_DELAY.toString());
+
+  const handleSetTime = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.validity.valid) {
+      e.preventDefault();
+      return
+    };
+
+    const val = e.target.value;
+    setInputValue(val);
+
+    const parsed = Number(val);
+    if (!isNaN(parsed) && parsed > 0) {
+      setTime(parsed);
+    }
+  };
+
+  const handleRebootWithTimeout = async () => {
+    if (!connection) return;
+    setIsScheduled(true);
+
+    const delay = time > 0 ? time : DEFAULT_REBOOT_DELAY;
+
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        console.log("Rebooting...");
+        resolve();
+      }, delay * 1000);
+    }).finally(() => {
+      setIsScheduled(false);
+      onOpenChange(false);
+      setInputValue(DEFAULT_REBOOT_DELAY.toString());
+    });
+    connection.rebootOta(0);
+  };
+
+  const handleInstantReboot = async () => {
+    if (!connection) return;
+
+    await connection.rebootOta(DEFAULT_REBOOT_DELAY);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose />
+        <DialogHeader>
+          <DialogTitle>Reboot to OTA Mode</DialogTitle>
+          <DialogDescription>
+            Reboot the connected node after a delay into OTA (Over-the-Air) mode.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex gap-2 p-2 items-center relative">
+          <Input
+            type="number"
+            min={1}
+            max={86400}
+            className="dark:text-slate-900 appearance-none"
+            value={inputValue}
+            onChange={handleSetTime}
+            placeholder="Enter delay (sec)"
+          />
+          <Button onClick={() => handleRebootWithTimeout()} className="w-9/12">
+            <ClockIcon className="mr-2" size={18} />
+            {isScheduled ? 'Reboot has been scheduled' : 'Schedule Reboot'}
+          </Button>
+        </div>
+
+        <Button variant="destructive" onClick={() => handleInstantReboot()}>
+          <RefreshCwIcon className="mr-2" size={16} />
+          Reboot to OTA Mode Now
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
diff --git a/src/components/UI/Command.tsx b/src/components/UI/Command.tsx
index 3173179c..d230d326 100644
--- a/src/components/UI/Command.tsx
+++ b/src/components/UI/Command.tsx
@@ -116,7 +116,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-md py-1.5 px-2 text-sm font-medium outline-hidden aria-selected:bg-slate-100 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50 dark:aria-selected:bg-slate-700",
+      "relative flex cursor-default select-none items-center rounded-md py-1.5 px-2 text-sm font-medium outline-hidden aria-selected:bg-slate-100 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50 dark:aria-selected:bg-slate-700 dark:text-white ",
       className,
     )}
     {...props}
diff --git a/src/core/hooks/usePinnedItems.tsx b/src/core/hooks/usePinnedItems.tsx
new file mode 100644
index 00000000..cd80a17c
--- /dev/null
+++ b/src/core/hooks/usePinnedItems.tsx
@@ -0,0 +1,19 @@
+import useLocalStorage from "@core/hooks/useLocalStorage.ts";
+import { useCallback } from "react";
+
+export function usePinnedItems({ storageName }: { storageName: string }) {
+  const [pinnedItems, setPinnedItems] = useLocalStorage<string[]>(storageName, []);
+
+  const togglePinnedItem = useCallback((label: string) => {
+    setPinnedItems((prev) =>
+      prev.includes(label)
+        ? prev.filter((g) => g !== label)
+        : [...prev, label]
+    );
+  }, []);
+
+  return {
+    pinnedItems,
+    togglePinnedItem,
+  };
+}
diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts
index 266ff9c8..c6e74551 100644
--- a/src/core/stores/deviceStore.ts
+++ b/src/core/stores/deviceStore.ts
@@ -23,6 +23,7 @@ export type DialogVariant =
   | "QR"
   | "shutdown"
   | "reboot"
+  | "rebootOTA"
   | "deviceName"
   | "nodeRemoval"
   | "pkiBackup"
@@ -73,6 +74,7 @@ export interface Device {
     QR: boolean;
     shutdown: boolean;
     reboot: boolean;
+    rebootOTA: boolean;
     deviceName: boolean;
     nodeRemoval: boolean;
     pkiBackup: boolean;
@@ -175,6 +177,7 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
             nodeDetails: false,
             unsafeRoles: false,
             refreshKeys: false,
+            rebootOTA: false,
           },
           pendingSettingsChanges: false,
           messageDraft: "",
diff --git a/vitest.config.ts b/vitest.config.ts
index d4542ae3..cbf600bc 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,9 +9,9 @@ export default defineConfig({
   resolve: {
     alias: {
       '@app': path.resolve(process.cwd(), './src'),
+      '@core': path.resolve(process.cwd(), './src/core'),
       '@pages': path.resolve(process.cwd(), './src/pages'),
       '@components': path.resolve(process.cwd(), './src/components'),
-      '@core': path.resolve(process.cwd(), './src/core'),
       '@layouts': path.resolve(process.cwd(), './src/layouts'),
     },
   },

From 6d9a44a0e39a72026049d3c415eb8643da498033 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Fri, 28 Mar 2025 21:11:01 -0400
Subject: [PATCH 3/4] added tests

---
 src/components/CommandPalette/index.tsx       |  2 +-
 src/core/hooks/usePinnedItems.test.ts         | 65 +++++++++++++++++++
 .../{usePinnedItems.tsx => usePinnedItems.ts} |  0
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/core/hooks/usePinnedItems.test.ts
 rename src/core/hooks/{usePinnedItems.tsx => usePinnedItems.ts} (100%)

diff --git a/src/components/CommandPalette/index.tsx b/src/components/CommandPalette/index.tsx
index 185a1ee6..289f07fc 100644
--- a/src/components/CommandPalette/index.tsx
+++ b/src/components/CommandPalette/index.tsx
@@ -33,7 +33,7 @@ import {
 import { useEffect } from "react";
 import { Avatar } from "@components/UI/Avatar.tsx";
 import { cn } from "@core/utils/cn.ts";
-import { usePinnedItems } from "@core/hooks/usePinnedItems.tsx";
+import { usePinnedItems } from "@core/hooks/usePinnedItems.ts";
 
 export interface Group {
   label: string;
diff --git a/src/core/hooks/usePinnedItems.test.ts b/src/core/hooks/usePinnedItems.test.ts
new file mode 100644
index 00000000..d761fba1
--- /dev/null
+++ b/src/core/hooks/usePinnedItems.test.ts
@@ -0,0 +1,65 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { usePinnedItems } from "./usePinnedItems.ts";
+
+const mockSetPinnedItems = vi.fn();
+const mockUseLocalStorage = vi.fn();
+
+vi.mock("@core/hooks/useLocalStorage.ts", () => ({
+  default: (...args: any[]) => mockUseLocalStorage(...args),
+}));
+
+describe("usePinnedItems", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("returns default pinnedItems and togglePinnedItem", () => {
+    mockUseLocalStorage.mockReturnValue([[], mockSetPinnedItems]);
+
+    const { result } = renderHook(() =>
+      usePinnedItems({ storageName: "test-storage" })
+    );
+
+    expect(result.current.pinnedItems).toEqual([]);
+    expect(typeof result.current.togglePinnedItem).toBe("function");
+  });
+
+  it("adds an item if it's not already pinned", () => {
+    mockUseLocalStorage.mockReturnValue([["item1"], mockSetPinnedItems]);
+
+    const { result } = renderHook(() =>
+      usePinnedItems({ storageName: "test-storage" })
+    );
+
+    act(() => {
+      result.current.togglePinnedItem("item2");
+    });
+
+    expect(mockSetPinnedItems).toHaveBeenCalledWith(expect.any(Function));
+
+    const updater = mockSetPinnedItems.mock.calls[0][0];
+    const updated = updater(["item1"]);
+
+    expect(updated).toEqual(["item1", "item2"]);
+  });
+
+  it("removes an item if it's already pinned", () => {
+    mockUseLocalStorage.mockReturnValue([["item1", "item2"], mockSetPinnedItems]);
+
+    const { result } = renderHook(() =>
+      usePinnedItems({ storageName: "test-storage" })
+    );
+
+    act(() => {
+      result.current.togglePinnedItem("item1");
+    });
+
+    expect(mockSetPinnedItems).toHaveBeenCalledWith(expect.any(Function));
+
+    const updater = mockSetPinnedItems.mock.calls[0][0];
+    const updated = updater(["item1", "item2"]);
+
+    expect(updated).toEqual(["item2"]);
+  });
+});
diff --git a/src/core/hooks/usePinnedItems.tsx b/src/core/hooks/usePinnedItems.ts
similarity index 100%
rename from src/core/hooks/usePinnedItems.tsx
rename to src/core/hooks/usePinnedItems.ts

From bf9557040fc94faf538f1196d5d121229a9839d3 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Fri, 28 Mar 2025 21:12:13 -0400
Subject: [PATCH 4/4] fixed: import issue

---
 src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 29e80aa1..35152fd1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 import { DeviceWrapper } from "@app/DeviceWrapper.tsx";
 import { PageRouter } from "@app/PageRouter.tsx";
-import { CommandPalette } from "@components/CommandPalette.tsx";
 import { DeviceSelector } from "@components/DeviceSelector.tsx";
 import { DialogManager } from "@components/Dialog/DialogManager.tsx";
 import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.tsx";
@@ -14,6 +13,7 @@ import type { JSX } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { ErrorPage } from "@components/UI/ErrorPage.tsx";
 import { MapProvider } from "react-map-gl/maplibre";
+import { CommandPalette } from "@components/CommandPalette/index.tsx";
 
 
 export const App = (): JSX.Element => {