Merge pull request #543 from danditomaso/issue-542-add-reboot-to-command-menu

added reboot to command menu

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 => {

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,9 +27,13 @@ import {
   SmartphoneIcon,
   TrashIcon,
   UsersIcon,
-  XCircleIcon,
+  Pin,
+  type LucideIcon,
 } from "lucide-react";
 import { useEffect } from "react";
+import { Avatar } from "@components/UI/Avatar.tsx";
+import { cn } from "@core/utils/cn.ts";
+import { usePinnedItems } from "@core/hooks/usePinnedItems.ts";
 
 export interface Group {
   label: string;
@@ -45,7 +47,6 @@ export interface Command {
   subItems?: SubItem[];
   tags?: string[];
 }
-
 export interface SubItem {
   label: string;
   icon: React.ReactNode;
@@ -57,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[] = [
     {
@@ -113,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",
@@ -163,15 +163,6 @@ export const CommandPalette = () => {
             },
           ],
         },
-        {
-          label: "Disconnect",
-          icon: XCircleIcon,
-          action() {
-            void connection?.disconnect();
-            setSelectedDevice(0);
-            removeDevice(selectedDevice ?? 0);
-          },
-        },
         {
           label: "Schedule Shutdown",
           icon: PowerIcon,
@@ -186,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,
@@ -231,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)) {
@@ -244,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

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);
+        }}
+      />
     </>
   );
 };

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 };
+  });
+
+});

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>
+  );
+};
+

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}

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"]);
+  });
+});

src/core/hooks/usePinnedItems.ts

@@ -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,
+  };
+}

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: "",

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'),
     },
   },