added dialog to warn before clearing all messages

src/components/CommandPalette.tsx

@@ -9,7 +9,6 @@ import {
 } from "@components/UI/Command.tsx";
 import { useAppStore } from "@core/stores/appStore.ts";
 import { useDevice, useDeviceStore } from "@core/stores/deviceStore.ts";
-import { use } from "chai";
 import { useCommandState } from "cmdk";
 import {
   ArrowLeftRightIcon,
@@ -33,8 +32,6 @@ import {
   XCircleIcon,
 } from "lucide-react";
 import { useEffect } from "react";
-import { useMap } from "react-map-gl/maplibre";
-import { useMessageStore } from "@core/stores/messageStore.ts";
 
 export interface Group {
   label: string;
@@ -64,7 +61,6 @@ export const CommandPalette = () => {
     selectedDevice,
   } = useAppStore();
   const { getDevices } = useDeviceStore();
-  const { clearAllMessages } = useMessageStore();
   const { setDialogOpen, setActivePage, connection } = useDevice();
 
   const groups: Group[] = [
@@ -228,7 +224,7 @@ export const CommandPalette = () => {
           label: "Clear All Stored Message",
           icon: EraserIcon,
           action() {
-            void clearAllMessages();
+            setDialogOpen("clearMessages", true);
           },
         },
       ],

src/components/Dialog/ClearMessagesDialog/ClearMessagesDialog.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useMessageStore } from "@core/stores/messageStore.ts";
+import { ClearMessagesDialog } from "@components/Dialog/ClearMessagesDialog/ClearMessagesDialog.tsx";
+
+vi.mock('@core/stores/messageStore.ts', () => ({
+  useMessageStore: vi.fn(() => ({
+    clearAllMessages: vi.fn(),
+  })),
+}));
+
+describe('ClearMessagesDialog', () => {
+  const mockOnOpenChange = vi.fn();
+  const mockClearAllMessages = vi.fn();
+
+  beforeEach(() => {
+    vi.mocked(useMessageStore).mockReturnValue({ clearAllMessages: mockClearAllMessages });
+    mockOnOpenChange.mockClear();
+    mockClearAllMessages.mockClear();
+  });
+
+  it('renders the dialog when open is true', () => {
+    render(<ClearMessagesDialog open={true} onOpenChange={mockOnOpenChange} />);
+    expect(screen.getByText('Clear All Messages')).toBeVisible();
+    expect(screen.getByText(/This action will clear all message history./)).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Dismiss' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Clear Messages' })).toBeVisible();
+  });
+
+  it('does not render the dialog when open is false', () => {
+    render(<ClearMessagesDialog open={false} onOpenChange={mockOnOpenChange} />);
+    expect(screen.queryByText('Clear All Messages')).toBeNull();
+  });
+
+  it('calls onOpenChange with false when the close button is clicked', () => {
+    render(<ClearMessagesDialog open={true} onOpenChange={mockOnOpenChange} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('calls onOpenChange with false when the dismiss button is clicked', () => {
+    render(<ClearMessagesDialog open={true} onOpenChange={mockOnOpenChange} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss' }));
+    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('calls clearAllMessages and onOpenChange with false when the clear messages button is clicked', () => {
+    render(<ClearMessagesDialog open={true} onOpenChange={mockOnOpenChange} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Clear Messages' }));
+    expect(mockClearAllMessages).toHaveBeenCalledTimes(1);
+    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
+  });
+});

src/components/Dialog/ClearMessagesDialog/ClearMessagesDialog.tsx

@@ -0,0 +1,63 @@
+
+import { Button } from "@components/UI/Button.tsx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@components/UI/Dialog.tsx";
+import { AlertTriangleIcon } from "lucide-react";
+import { useMessageStore } from "@core/stores/messageStore.ts";
+
+export interface ClearMessagesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const ClearMessagesDialog = ({
+  open,
+  onOpenChange,
+}: ClearMessagesDialogProps) => {
+  const { clearAllMessages } = useMessageStore();
+  const handleCloseDialog = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogClose onClick={handleCloseDialog} />
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangleIcon className="h-5 w-5 text-warning" />
+            Clear All Messages
+          </DialogTitle>
+          <DialogDescription>
+            This action will clear all message history. This cannot be undone.
+            Are you sure you want to continue?
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="mt-4">
+          <Button
+            variant="outline"
+            onClick={handleCloseDialog}
+          >
+            Dismiss
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => {
+              clearAllMessages();
+              handleCloseDialog();
+            }}
+          >
+            Clear Messages
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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 { ClearMessagesDialog } from "@components/Dialog/ClearMessagesDialog/ClearMessagesDialog.tsx";
 
 export const DialogManager = () => {
   const { channels, config, dialog, setDialogOpen } = useDevice();
@@ -77,6 +78,12 @@ export const DialogManager = () => {
           setDialogOpen("refreshKeys", open);
         }}
       />
+      <ClearMessagesDialog
+        open={dialog.clearMessages}
+        onOpenChange={(open) => {
+          setDialogOpen("clearMessages", open);
+        }}
+      />
     </>
   );
 };

src/core/stores/deviceStore.ts

@@ -28,7 +28,8 @@ export type DialogVariant =
   | "pkiBackup"
   | "nodeDetails"
   | "unsafeRoles"
-  | "refreshKeys";
+  | "refreshKeys"
+  | "clearMessages";
 
 type NodeError = {
   node: number;
@@ -69,6 +70,7 @@ export interface Device {
     nodeDetails: boolean;
     unsafeRoles: boolean;
     refreshKeys: boolean;
+    clearMessages: boolean;
   };