with a top border
+ const menu = screen.getByRole("menu");
+ const separators = menu.querySelectorAll("div.border-t");
+ expect(separators.length).toBeGreaterThanOrEqual(1);
+ });
+
+ it("renders disabled items and does not fire action on click", () => {
+ const action = vi.fn();
+ const items = [
+ { label: "Disabled Item", action, disabled: true },
+ { label: "Enabled Item", action: vi.fn() },
+ ];
+ render(
+
+ );
+
+ const disabledBtn = screen.getByRole("menuitem", { name: /disabled item/i });
+ expect(disabledBtn).toBeDisabled();
+
+ fireEvent.click(disabledBtn);
+ expect(action).not.toHaveBeenCalled();
+ });
+
+ it("fires action and onClose when an enabled item is clicked", () => {
+ const action = vi.fn();
+ const onClose = vi.fn();
+ const items = [{ label: "Save", action }];
+ render(
);
+
+ fireEvent.click(screen.getByRole("menuitem", { name: /save/i }));
+
+ expect(action).toHaveBeenCalledTimes(1);
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("calls onClose when Escape is pressed", () => {
+ const onClose = vi.fn();
+ const items = [{ label: "One", action: vi.fn() }];
+ render(
);
+
+ const menu = screen.getByRole("menu");
+ fireEvent.keyDown(menu, { key: "Escape" });
+
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("navigates to next item with ArrowDown", () => {
+ const items = [
+ { label: "First", action: vi.fn() },
+ { label: "Second", action: vi.fn() },
+ ];
+ render(
+
+ );
+
+ const menu = screen.getByRole("menu");
+ // First item gets auto-focused by the useEffect
+ const firstItem = screen.getByRole("menuitem", { name: /first/i });
+ expect(document.activeElement).toBe(firstItem);
+
+ fireEvent.keyDown(menu, { key: "ArrowDown" });
+
+ const secondItem = screen.getByRole("menuitem", { name: /second/i });
+ expect(document.activeElement).toBe(secondItem);
+ });
+
+ it("wraps around with ArrowDown at the last item", () => {
+ const items = [
+ { label: "First", action: vi.fn() },
+ { label: "Last", action: vi.fn() },
+ ];
+ render(
+
+ );
+
+ const menu = screen.getByRole("menu");
+ const firstItem = screen.getByRole("menuitem", { name: /first/i });
+ expect(document.activeElement).toBe(firstItem);
+
+ // Move to last
+ fireEvent.keyDown(menu, { key: "ArrowDown" });
+ expect(document.activeElement).toBe(screen.getByRole("menuitem", { name: /last/i }));
+
+ // Wrap to first
+ fireEvent.keyDown(menu, { key: "ArrowDown" });
+ expect(document.activeElement).toBe(firstItem);
+ });
+
+ it("renders items with icons", () => {
+ const items = [
+ { label: "Copy", icon:
C, action: vi.fn() },
+ ];
+ render(
+
+ );
+
+ expect(screen.getByTestId("copy-icon")).toBeInTheDocument();
+ expect(screen.getByText("Copy")).toBeInTheDocument();
+ });
+
+ it("renders an empty menu without crashing", () => {
+ const onClose = vi.fn();
+ render(
);
+
+ const menu = screen.getByRole("menu");
+ expect(menu).toBeInTheDocument();
+
+ // Pressing Escape with no items still calls onClose
+ fireEvent.keyDown(menu, { key: "Escape" });
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("has the correct aria-label on the menu", () => {
+ render(
+
+ );
+
+ expect(screen.getByRole("menu")).toHaveAttribute("aria-label", "Context menu");
+ });
+});
diff --git a/desktop/src/components/Dock.test.tsx b/desktop/src/components/Dock.test.tsx
new file mode 100644
index 000000000..f6ccd199a
--- /dev/null
+++ b/desktop/src/components/Dock.test.tsx
@@ -0,0 +1,168 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+let mockPinned = ["messages", "agents", "files", "store", "settings"];
+let mockWindows: Array<{
+ id: string;
+ appId: string;
+ minimized: boolean;
+ focused: boolean;
+ zIndex: number;
+ position: { x: number; y: number };
+ size: { w: number; h: number };
+ maximized: boolean;
+ snapped: null;
+ launchNonce: number;
+}> = [];
+let mockStructure: Record<
+ string,
+ { variant?: string } & Record
+> = {};
+
+const mockOpenWindow = vi.fn();
+const mockFocusWindow = vi.fn();
+const mockRestoreWindow = vi.fn();
+
+vi.mock("@/stores/dock-store", () => ({
+ useDockStore: (sel: (s: Record) => unknown) =>
+ sel({
+ pinned: mockPinned,
+ pin: vi.fn(),
+ unpin: vi.fn(),
+ }),
+}));
+
+vi.mock("@/stores/process-store", () => ({
+ useProcessStore: (
+ selOrUndefined?: ((s: Record) => unknown) | Record
+ ) => {
+ const state = {
+ windows: mockWindows,
+ openWindow: mockOpenWindow,
+ focusWindow: mockFocusWindow,
+ restoreWindow: mockRestoreWindow,
+ minimizeWindow: vi.fn(),
+ maximizeWindow: vi.fn(),
+ recenterWindow: vi.fn(),
+ closeWindow: vi.fn(),
+ };
+ if (typeof selOrUndefined === "function") {
+ return selOrUndefined(state);
+ }
+ return state;
+ },
+}));
+
+vi.mock("@/stores/theme-store", () => ({
+ useThemeStore: (sel: (s: Record) => unknown) =>
+ sel({
+ structure: mockStructure,
+ }),
+}));
+
+vi.mock("@/registry/app-registry", () => ({
+ getApp: (id: string) => ({
+ id,
+ name:
+ id === "messages"
+ ? "Messages"
+ : id === "agents"
+ ? "Agents"
+ : id === "files"
+ ? "Files"
+ : id === "store"
+ ? "Store"
+ : id === "settings"
+ ? "Settings"
+ : id === "browser"
+ ? "Browser"
+ : "Test App",
+ icon: "message-circle",
+ category: "platform",
+ defaultSize: { w: 900, h: 600 },
+ minSize: { w: 400, h: 300 },
+ singleton: true,
+ pinned: true,
+ launchpadOrder: 1,
+ }),
+}));
+
+vi.mock("@/hooks/use-is-mobile", () => ({
+ useIsMobile: () => false,
+}));
+
+import { Dock } from "./Dock";
+
+beforeEach(() => {
+ mockPinned = ["messages", "agents", "files", "store", "settings"];
+ mockWindows = [];
+ mockStructure = {};
+ vi.clearAllMocks();
+});
+
+describe("Dock", () => {
+ it("renders pinned apps and the Launchpad button", () => {
+ const onLaunchpadOpen = vi.fn();
+ render();
+
+ expect(
+ screen.getByRole("button", { name: /launchpad/i })
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: /open messages/i })
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: /open agents/i })
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: /open files/i })
+ ).toBeInTheDocument();
+ });
+
+ it("renders with empty pinned list shows only Launchpad", () => {
+ mockPinned = [];
+ const onLaunchpadOpen = vi.fn();
+ render();
+
+ expect(
+ screen.getByRole("button", { name: /launchpad/i })
+ ).toBeInTheDocument();
+ expect(
+ screen.queryByRole("button", { name: /open messages/i })
+ ).toBeNull();
+ });
+
+ it("calls onLaunchpadOpen when Launchpad button is clicked", () => {
+ const onLaunchpadOpen = vi.fn();
+ render();
+
+ fireEvent.click(screen.getByRole("button", { name: /launchpad/i }));
+ expect(onLaunchpadOpen).toHaveBeenCalledOnce();
+ });
+
+ it("renders running apps not in pinned after a separator", () => {
+ mockWindows = [
+ {
+ id: "win-1",
+ appId: "browser",
+ minimized: false,
+ focused: true,
+ zIndex: 1,
+ position: { x: 0, y: 0 },
+ size: { w: 1024, h: 700 },
+ maximized: false,
+ snapped: null,
+ launchNonce: 0,
+ },
+ ];
+ const onLaunchpadOpen = vi.fn();
+ render();
+
+ expect(
+ screen.getByRole("button", { name: /open browser/i })
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: /open agents/i })
+ ).toBeInTheDocument();
+ });
+});
diff --git a/desktop/src/components/EmojiPicker.test.tsx b/desktop/src/components/EmojiPicker.test.tsx
new file mode 100644
index 000000000..7c4bf146f
--- /dev/null
+++ b/desktop/src/components/EmojiPicker.test.tsx
@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { EmojiPickerField } from "./EmojiPicker";
+
+describe("EmojiPickerField", () => {
+ it("shows + when value is empty", () => {
+ render();
+ const btn = screen.getByRole("button", { name: "Open emoji picker" });
+ expect(btn).toHaveTextContent("+");
+ });
+
+ it("shows the current emoji value when provided", () => {
+ render();
+ const btn = screen.getByRole("button", { name: "Open emoji picker" });
+ expect(btn).toHaveTextContent("🦉");
+ });
+
+ it("is collapsed by default (aria-expanded false, no dialog)", () => {
+ render();
+ const btn = screen.getByRole("button", { name: "Open emoji picker" });
+ expect(btn).toHaveAttribute("aria-expanded", "false");
+ expect(screen.queryByRole("dialog", { name: "Emoji picker" })).toBeNull();
+ });
+
+ it("opens the picker dialog on click and sets aria-expanded", () => {
+ render();
+ const btn = screen.getByRole("button", { name: "Open emoji picker" });
+ fireEvent.click(btn);
+ expect(btn).toHaveAttribute("aria-expanded", "true");
+ expect(screen.getByRole("dialog", { name: "Emoji picker" })).toBeInTheDocument();
+ });
+
+ it("toggles the picker closed on a second click", () => {
+ render();
+ const btn = screen.getByRole("button", { name: "Open emoji picker" });
+ fireEvent.click(btn);
+ expect(screen.getByRole("dialog", { name: "Emoji picker" })).toBeInTheDocument();
+ fireEvent.click(btn);
+ expect(btn).toHaveAttribute("aria-expanded", "false");
+ expect(screen.queryByRole("dialog", { name: "Emoji picker" })).toBeNull();
+ });
+
+ it("calls onChange with the picked emoji and closes the picker", () => {
+ const onChange = vi.fn();
+ render();
+ const btn = screen.getByRole("button", { name: "Open emoji picker" });
+ fireEvent.click(btn);
+ expect(screen.getByRole("dialog", { name: "Emoji picker" })).toBeInTheDocument();
+
+ const picker = screen.getByRole("dialog", { name: "Emoji picker" });
+ const emojiButtons = picker.querySelectorAll("button");
+ if (emojiButtons.length > 0) {
+ fireEvent.click(emojiButtons[0]);
+ expect(onChange).toHaveBeenCalledTimes(1);
+ expect(btn).toHaveAttribute("aria-expanded", "false");
+ }
+ });
+});
diff --git a/desktop/src/components/Launchpad.test.tsx b/desktop/src/components/Launchpad.test.tsx
new file mode 100644
index 000000000..54fcf2cdd
--- /dev/null
+++ b/desktop/src/components/Launchpad.test.tsx
@@ -0,0 +1,140 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("@/stores/process-store", () => {
+ const store = { openWindow: vi.fn(() => "win-1") };
+ return {
+ useProcessStore: (sel?: (s: typeof store) => unknown) =>
+ sel ? sel(store) : store,
+ };
+});
+
+vi.mock("@/hooks/use-installed-services", () => ({
+ useInstalledServices: () => [],
+}));
+
+vi.mock("@/hooks/use-installed-optional-apps", () => ({
+ useInstalledOptionalApps: () => new Set(),
+}));
+
+vi.mock("@/hooks/use-installed-userspace-apps", () => ({
+ useInstalledUserspaceApps: () => [],
+}));
+
+vi.mock("@/hooks/use-shortcut-registry", () => ({
+ useShortcut: vi.fn(),
+}));
+
+vi.mock("@/registry/app-registry", () => ({
+ getLaunchableApps: (installedOptional: Set) => [
+ { id: "messages", name: "Messages", icon: "message-circle", category: "platform", defaultSize: { w: 900, h: 600 } },
+ { id: "mail", name: "Mail", icon: "mail", category: "platform", defaultSize: { w: 1200, h: 800 } },
+ { id: "weather", name: "Weather", icon: "cloud", category: "os", defaultSize: { w: 800, h: 600 } },
+ { id: "chess", name: "Chess", icon: "crown", category: "game", defaultSize: { w: 700, h: 700 } },
+ ].filter((a) => !a.id.startsWith("service:") && !a.id.startsWith("userspace:") && (a.id !== "reddit" || installedOptional.has("reddit"))),
+ getApp: (id: string) => {
+ const apps: Record = {
+ messages: { id: "messages", name: "Messages", defaultSize: { w: 900, h: 600 } },
+ mail: { id: "mail", name: "Mail", defaultSize: { w: 1200, h: 800 } },
+ weather: { id: "weather", name: "Weather", defaultSize: { w: 800, h: 600 } },
+ chess: { id: "chess", name: "Chess", defaultSize: { w: 700, h: 700 } },
+ };
+ return apps[id];
+ },
+ getOrRegisterServiceApp: (appId: string, displayName: string) => ({
+ id: `service:${appId}`,
+ name: displayName,
+ defaultSize: { w: 1100, h: 750 },
+ }),
+}));
+
+import { Launchpad } from "./Launchpad";
+
+describe("Launchpad", () => {
+ const onClose = vi.fn();
+ const onOpenApp = vi.fn();
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("returns null when open is false", () => {
+ const { container } = render();
+ expect(container.firstChild).toBeNull();
+ });
+
+ it("renders the dialog with aria-label when open is true", () => {
+ render();
+ expect(screen.getByRole("dialog", { name: /launchpad/i })).toBeInTheDocument();
+ });
+
+ it("renders the search input", () => {
+ render();
+ expect(screen.getByPlaceholderText("Search apps...")).toBeInTheDocument();
+ });
+
+ it("renders category headings for the built-in apps", () => {
+ render();
+ expect(screen.getByText("Platform")).toBeInTheDocument();
+ expect(screen.getByText("Utilities")).toBeInTheDocument();
+ expect(screen.getByText("Games")).toBeInTheDocument();
+ });
+
+ it("renders app names for built-in apps", () => {
+ render();
+ expect(screen.getByText("Messages")).toBeInTheDocument();
+ expect(screen.getByText("Mail")).toBeInTheDocument();
+ expect(screen.getByText("Weather")).toBeInTheDocument();
+ expect(screen.getByText("Chess")).toBeInTheDocument();
+ });
+
+ it("filters apps by search query", () => {
+ render();
+ const input = screen.getByPlaceholderText("Search apps...");
+ fireEvent.change(input, { target: { value: "chess" } });
+ expect(screen.getByText("Chess")).toBeInTheDocument();
+ expect(screen.queryByText("Messages")).not.toBeInTheDocument();
+ expect(screen.queryByText("Mail")).not.toBeInTheDocument();
+ });
+
+ it("shows clear button when query is non-empty and clears on click", () => {
+ render();
+ const input = screen.getByPlaceholderText("Search apps...");
+ fireEvent.change(input, { target: { value: "chess" } });
+ const clearBtn = screen.getByRole("button", { name: /clear search/i });
+ expect(clearBtn).toBeInTheDocument();
+ fireEvent.click(clearBtn);
+ expect(input).toHaveValue("");
+ });
+
+ it("does not show clear button when query is empty", () => {
+ render();
+ expect(screen.queryByRole("button", { name: /clear search/i })).not.toBeInTheDocument();
+ });
+
+ it("calls onClose when an app icon is clicked", () => {
+ render();
+ const btn = screen.getByRole("button", { name: /open messages/i });
+ fireEvent.click(btn);
+ // handleLaunch calls onClose, and the click bubbles to the overlay onClick
+ // which also calls onClose. Both fire as expected by the component design.
+ expect(onClose).toHaveBeenCalledTimes(2);
+ });
+
+ it("calls onOpenApp with the window id returned by openWindow when launching an app", () => {
+ render();
+ const btn = screen.getByRole("button", { name: /open messages/i });
+ fireEvent.click(btn);
+ expect(onOpenApp).toHaveBeenCalledWith("win-1");
+ });
+
+ it("does not render Services section when no services are installed", () => {
+ render();
+ expect(screen.queryByText("Services")).not.toBeInTheDocument();
+ });
+
+ it("does not render My Apps section when no userspace apps are installed", () => {
+ render();
+ expect(screen.queryByText("My Apps")).not.toBeInTheDocument();
+ });
+});
diff --git a/desktop/src/components/LoginScreen.test.tsx b/desktop/src/components/LoginScreen.test.tsx
new file mode 100644
index 000000000..250bda290
--- /dev/null
+++ b/desktop/src/components/LoginScreen.test.tsx
@@ -0,0 +1,109 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { LoginScreen } from "./LoginScreen";
+
+let originalUserAgent: string;
+let originalRequestFullscreen: typeof document.documentElement.requestFullscreen;
+
+describe("LoginScreen", () => {
+ beforeEach(() => {
+ originalUserAgent = navigator.userAgent;
+ originalRequestFullscreen = document.documentElement.requestFullscreen;
+ document.documentElement.requestFullscreen = vi.fn().mockResolvedValue(undefined);
+ });
+
+ afterEach(() => {
+ Object.defineProperty(navigator, "userAgent", {
+ value: originalUserAgent,
+ configurable: true,
+ });
+ document.documentElement.requestFullscreen = originalRequestFullscreen;
+ vi.restoreAllMocks();
+ });
+
+ function setUserAgent(ua: string) {
+ Object.defineProperty(navigator, "userAgent", {
+ value: ua,
+ configurable: true,
+ });
+ }
+
+ it("renders the Launch taOS button when not launching", () => {
+ setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/120.0.0.0");
+ const onLaunch = vi.fn();
+ render();
+ const btn = screen.getByRole("button", { name: /launch taos/i });
+ expect(btn).toBeInTheDocument();
+ expect(btn).not.toBeDisabled();
+ });
+
+ it("shows Launching... text and disables the button while launching", async () => {
+ setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/120.0.0.0");
+ const onLaunch = vi.fn();
+ render();
+ const btn = screen.getByRole("button", { name: /launch taos/i });
+ fireEvent.click(btn);
+ expect(btn).toBeDisabled();
+ expect(screen.getByText("Launching...")).toBeInTheDocument();
+ });
+
+ it("calls onLaunch after the launch delay", async () => {
+ vi.useFakeTimers();
+ setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/120.0.0.0");
+ const onLaunch = vi.fn();
+ render();
+ fireEvent.click(screen.getByRole("button", { name: /launch taos/i }));
+ expect(onLaunch).not.toHaveBeenCalled();
+ await vi.advanceTimersByTimeAsync(600);
+ expect(onLaunch).toHaveBeenCalledTimes(1);
+ vi.useRealTimers();
+ });
+
+ it("shows 'Full experience available' for Chrome user agent", () => {
+ setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Chrome/120.0.0.0");
+ const onLaunch = vi.fn();
+ render();
+ expect(screen.getByText("Full experience available")).toBeInTheDocument();
+ expect(screen.queryByText(/install taos as an app/i)).not.toBeInTheDocument();
+ expect(screen.queryByText(/full keyboard support/i)).not.toBeInTheDocument();
+ });
+
+ it("shows 'Install taOS as an app' for Safari user agent", () => {
+ setUserAgent(
+ "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) Version/17.0 Safari/604.1.34",
+ );
+ const onLaunch = vi.fn();
+ render();
+ expect(screen.getByText("Install taOS as an app for the best experience")).toBeInTheDocument();
+ expect(screen.queryByText(/full experience available/i)).not.toBeInTheDocument();
+ expect(screen.queryByText(/full keyboard support/i)).not.toBeInTheDocument();
+ });
+
+ it("shows 'use Chrome or Edge' for unknown browsers", () => {
+ setUserAgent("Mozilla/5.0 (compatible; SomeBot/1.0)");
+ const onLaunch = vi.fn();
+ render();
+ expect(
+ screen.getByText("For full keyboard support, use Chrome or Edge"),
+ ).toBeInTheDocument();
+ expect(screen.queryByText(/full experience available/i)).not.toBeInTheDocument();
+ expect(screen.queryByText(/install taos as an app/i)).not.toBeInTheDocument();
+ });
+
+ it("renders the taOS logo image", () => {
+ setUserAgent("Mozilla/5.0 Chrome/120.0.0.0");
+ const onLaunch = vi.fn();
+ render();
+ const img = screen.getByRole("img", { name: /taos/i });
+ expect(img).toBeInTheDocument();
+ expect(img).toHaveAttribute("src", "/static/taos-logo.png");
+ });
+
+ it("calls requestFullscreen when the launch button is clicked", () => {
+ setUserAgent("Mozilla/5.0 Chrome/120.0.0.0");
+ const onLaunch = vi.fn();
+ render();
+ fireEvent.click(screen.getByRole("button", { name: /launch taos/i }));
+ expect(document.documentElement.requestFullscreen).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/desktop/src/components/NotificationCentre.test.tsx b/desktop/src/components/NotificationCentre.test.tsx
index f2b04387c..7e797d38f 100644
--- a/desktop/src/components/NotificationCentre.test.tsx
+++ b/desktop/src/components/NotificationCentre.test.tsx
@@ -9,6 +9,8 @@ const closeCentre = vi.fn();
const markAllRead = vi.fn();
const clearAll = vi.fn();
const dismiss = vi.fn();
+const archivedNotifications = vi.fn(() => []);
+const clearArchived = vi.fn();
let notifications: Notification[] = [];
@@ -21,6 +23,8 @@ vi.mock("@/stores/notification-store", () => ({
markAllRead,
clearAll,
dismiss,
+ archivedNotifications,
+ clearArchived,
}),
}));
diff --git a/desktop/src/components/NotificationCentre.tsx b/desktop/src/components/NotificationCentre.tsx
index 65e316e71..a0cec2bb4 100644
--- a/desktop/src/components/NotificationCentre.tsx
+++ b/desktop/src/components/NotificationCentre.tsx
@@ -1,5 +1,5 @@
import { useState } from "react";
-import { X, Bell, CheckCheck, Trash2 } from "lucide-react";
+import { X, Bell, CheckCheck, Trash2, History } from "lucide-react";
import { useNotificationStore, type Notification } from "@/stores/notification-store";
import { useProcessStore } from "@/stores/process-store";
import { getApp } from "@/registry/app-registry";
@@ -16,10 +16,66 @@ function formatTime(ts: number): string {
return `${Math.floor(delta / 86400_000)}d ago`;
}
+function NotificationItem({
+ n,
+ onDismiss,
+ onItemClick,
+}: {
+ n: Notification;
+ onDismiss: (id: string) => void;
+ onItemClick: (n: Notification) => void;
+}) {
+ return (
+
+ );
+}
+
export function NotificationCentre() {
- const { notifications, centreOpen, closeCentre, markRead, markAllRead, clearAll, dismiss } = useNotificationStore();
+ const {
+ notifications,
+ centreOpen,
+ closeCentre,
+ markRead,
+ markAllRead,
+ clearAll,
+ dismiss,
+ archivedNotifications,
+ clearArchived,
+ } = useNotificationStore();
const openWindow = useProcessStore((s) => s.openWindow);
const [checklistDismissed, setChecklistDismissed] = useState(false);
+ const [tab, setTab] = useState<"inbox" | "history">("inbox");
+
+ const active = notifications.filter((n) => !n.archived);
+ const archived = archivedNotifications();
// Optimistic local mark-read, plus a best-effort backend write for server
// items so the read state persists across reloads. Network never blocks the UI.
@@ -87,7 +143,7 @@ export function NotificationCentre() {
Notifications
- {notifications.length > 0 && (
+ {tab === "inbox" && active.length > 0 && (
<>
)}
+ {tab === "history" && archived.length > 0 && (
+
+ )}
+ {/* Tabs */}
+