@dyyz1993/create-agent 1.9.0

package/templates/chat/src/mainview/__tests__/components/ChatPanel.test.tsx

@@ -0,0 +1,76 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ChatPanel } from "../../components/chat/ChatPanel";
+import { useChatStore } from "../../stores/use-chat-store";
+import { act } from "@testing-library/react";
+
+vi.mock("../../lib/api-client", () => ({
+  apiClient: {
+    call: vi.fn().mockResolvedValue({ ok: true }),
+  },
+}));
+
+vi.mock("../../stores/use-log-store", () => ({
+  useLogStore: {
+    getState: () => ({ addLog: vi.fn() }),
+  },
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const map: Record<string, string> = {
+        "chat.title": "Chat",
+        "chat.empty": "No messages yet",
+        "chat.placeholder": "Type a message...",
+        "chat.send": "Send",
+      };
+      return map[key] ?? key;
+    },
+    i18n: { language: "en" },
+  }),
+}));
+
+describe("ChatPanel", () => {
+  beforeEach(() => {
+    act(() => {
+      useChatStore.setState({ messages: [], inputText: "" });
+    });
+  });
+
+  it("renders chat title", () => {
+    render(<ChatPanel />);
+    expect(screen.getByText("Chat")).toBeInTheDocument();
+  });
+
+  it("shows empty state when no messages", () => {
+    render(<ChatPanel />);
+    expect(screen.getByText("No messages yet")).toBeInTheDocument();
+  });
+
+  it("renders input and send button", () => {
+    render(<ChatPanel />);
+    expect(screen.getByPlaceholderText("Type a message...")).toBeInTheDocument();
+    expect(screen.getByText("Send")).toBeInTheDocument();
+  });
+
+  it("updates input value on typing", () => {
+    render(<ChatPanel />);
+    const input = screen.getByPlaceholderText("Type a message...");
+    fireEvent.change(input, { target: { value: "hello" } });
+    expect(useChatStore.getState().inputText).toBe("hello");
+  });
+
+  it("displays messages when present", () => {
+    act(() => {
+      useChatStore.setState({
+        messages: [
+          { id: "1", role: "user", content: "Hi there", timestamp: Date.now() },
+        ],
+      });
+    });
+    render(<ChatPanel />);
+    expect(screen.getByText("Hi there")).toBeInTheDocument();
+    expect(screen.queryByText("No messages yet")).not.toBeInTheDocument();
+  });
+});

package/templates/chat/src/mainview/__tests__/components/MessageBubble.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MessageBubble } from "../../components/chat/MessageBubble";
+import type { ChatMessage } from "../../types";
+
+function makeMessage(overrides: Partial<ChatMessage> = {}): ChatMessage {
+  return {
+    id: "1",
+    role: "user",
+    content: "Hello world",
+    timestamp: new Date("2025-01-15T10:30:00").getTime(),
+    ...overrides,
+  };
+}
+
+describe("MessageBubble", () => {
+  it("renders user message content", () => {
+    render(<MessageBubble message={makeMessage({ role: "user", content: "Hi" })} />);
+    expect(screen.getByText("Hi")).toBeInTheDocument();
+  });
+
+  it("renders assistant message with markdown", () => {
+    render(<MessageBubble message={makeMessage({ role: "assistant", content: "Hello **bold**" })} />);
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+  });
+
+  it("shows timestamp when provided", () => {
+    const ts = new Date("2025-06-15T14:05:00").getTime();
+    render(<MessageBubble message={makeMessage({ timestamp: ts })} />);
+    expect(screen.getByText("14:05")).toBeInTheDocument();
+  });
+
+  it("shows bot icon for assistant messages", () => {
+    const { container } = render(
+      <MessageBubble message={makeMessage({ role: "assistant" })} />
+    );
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  it("does not show bot icon for user messages", () => {
+    const { container } = render(
+      <MessageBubble message={makeMessage({ role: "user" })} />
+    );
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs.length).toBe(0);
+  });
+});

package/templates/chat/src/mainview/__tests__/i18n/i18n.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+describe("i18n configuration", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+  });
+
+  it("should export configured i18n instance", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(i18n.default).toBeDefined();
+    expect(i18n.default.isInitialized).toBe(true);
+  });
+
+  it("should have English translations", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(
+      i18n.default.getResource("en", "translation", "app.title")
+    ).toBeDefined();
+  });
+
+  it("should have Chinese translations", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(
+      i18n.default.getResource("zh", "translation", "app.title")
+    ).toBeDefined();
+  });
+
+  it("should change language", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("zh");
+    expect(i18n.default.language).toBe("zh");
+
+    await i18n.default.changeLanguage("en");
+    expect(i18n.default.language).toBe("en");
+  });
+
+  it("should translate keys correctly in English", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("en");
+    expect(i18n.default.t("app.title")).toBe("Pi Chat");
+  });
+
+  it("should translate keys correctly in Chinese", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("zh");
+    expect(i18n.default.t("app.title")).toBe("Pi Chat");
+  });
+});

package/templates/chat/src/mainview/__tests__/setup-verify.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+
+describe("vitest setup", () => {
+  it("runs in happy-dom environment", () => {
+    expect(typeof window).toBe("object");
+    expect(typeof document).toBe("object");
+  });
+});

package/templates/chat/src/mainview/__tests__/setup.ts

@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom/vitest";
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = String(value);
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      store = {};
+    },
+    get length() {
+      return Object.keys(store).length;
+    },
+    key: (i: number) => Object.keys(store)[i] ?? null,
+  };
+})();
+
+Object.defineProperty(window, "localStorage", { value: localStorageMock });

package/templates/chat/src/mainview/__tests__/stores/use-app-store.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useAppStore } from "../../stores/use-app-store";
+import { act } from "@testing-library/react";
+
+vi.mock("../../lib/api-client", () => ({
+  apiClient: {
+    call: vi.fn().mockResolvedValue({ pong: true, timestamp: Date.now(), platform: "web" }),
+  },
+}));
+
+vi.mock("../../stores/use-log-store", () => ({
+  useLogStore: {
+    getState: () => ({ addLog: vi.fn() }),
+  },
+}));
+
+describe("useAppStore", () => {
+  beforeEach(() => {
+    act(() => {
+      useAppStore.setState({
+        method: "system.ping",
+        result: null,
+      });
+    });
+  });
+
+  it("initial state", () => {
+    const state = useAppStore.getState();
+    expect(state.method).toBe("system.ping");
+    expect(state.result).toBeNull();
+  });
+
+  it("setMethod", () => {
+    act(() => {
+      useAppStore.getState().setMethod("system.hello");
+    });
+    expect(useAppStore.getState().method).toBe("system.hello");
+  });
+
+  it("callRPC should set result on success", async () => {
+    await act(async () => {
+      await useAppStore.getState().callRPC("");
+    });
+    expect(useAppStore.getState().result).not.toBeNull();
+  });
+});

package/templates/chat/src/mainview/__tests__/stores/use-chat-store.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useChatStore } from "../../stores/use-chat-store";
+import { act } from "@testing-library/react";
+
+vi.mock("../../lib/api-client", () => ({
+  apiClient: {
+    call: vi.fn().mockResolvedValue({ ok: true }),
+  },
+}));
+
+vi.mock("../../stores/use-log-store", () => ({
+  useLogStore: {
+    getState: () => ({ addLog: vi.fn() }),
+  },
+}));
+
+describe("useChatStore", () => {
+  beforeEach(() => {
+    act(() => {
+      useChatStore.setState({
+        messages: [],
+        inputText: "",
+      });
+    });
+  });
+
+  it("initial state", () => {
+    const state = useChatStore.getState();
+    expect(state.messages).toEqual([]);
+    expect(state.inputText).toBe("");
+  });
+
+  it("setInputText", () => {
+    act(() => {
+      useChatStore.getState().setInputText("hello");
+    });
+    expect(useChatStore.getState().inputText).toBe("hello");
+  });
+
+  it("addMessage", () => {
+    const msg = {
+      id: "1",
+      role: "user" as const,
+      content: "hi",
+      timestamp: Date.now(),
+    };
+    act(() => {
+      useChatStore.getState().addMessage(msg);
+    });
+    expect(useChatStore.getState().messages).toHaveLength(1);
+    expect(useChatStore.getState().messages[0].content).toBe("hi");
+  });
+
+  it("setMessages", () => {
+    const msgs = [
+      { id: "1", role: "user" as const, content: "a", timestamp: 1000 },
+      { id: "2", role: "assistant" as const, content: "b", timestamp: 2000 },
+    ];
+    act(() => {
+      useChatStore.getState().setMessages(msgs);
+    });
+    expect(useChatStore.getState().messages).toHaveLength(2);
+  });
+
+  it("addMessage appends to existing", () => {
+    act(() => {
+      useChatStore.getState().setMessages([
+        { id: "1", role: "user", content: "a", timestamp: 1000 },
+      ]);
+    });
+    act(() => {
+      useChatStore.getState().addMessage({
+        id: "2",
+        role: "assistant",
+        content: "b",
+        timestamp: 2000,
+      });
+    });
+    const msgs = useChatStore.getState().messages;
+    expect(msgs).toHaveLength(2);
+    expect(msgs[1].content).toBe("b");
+  });
+
+  it("sendMessage clears inputText after sending", async () => {
+    act(() => {
+      useChatStore.getState().setInputText("hello world");
+    });
+    await act(async () => {
+      await useChatStore.getState().sendMessage();
+    });
+    expect(useChatStore.getState().inputText).toBe("");
+  });
+
+  it("sendMessage does nothing with empty input", async () => {
+    act(() => {
+      useChatStore.getState().setInputText("   ");
+    });
+    const { apiClient } = await import("../../lib/api-client");
+    const callSpy = vi.mocked(apiClient.call);
+    callSpy.mockClear();
+    await useChatStore.getState().sendMessage();
+    expect(callSpy).not.toHaveBeenCalled();
+  });
+});

package/templates/chat/src/mainview/__tests__/stores/use-connection-store.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect, beforeEach } from "vitest";
+
+describe("useConnectionStore", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+  });
+
+  it("should have initial state", async () => {
+    const { useConnectionStore } = await import("../../stores/use-connection-store");
+    const state = useConnectionStore.getState();
+    expect(state.mode).toBe("web");
+    expect(state.ready).toBe(false);
+  });
+
+  it("should set ready state", async () => {
+    const { useConnectionStore } = await import("../../stores/use-connection-store");
+    useConnectionStore.getState().setReady(true);
+    expect(useConnectionStore.getState().ready).toBe(true);
+  });
+
+  it("should set mode", async () => {
+    const { useConnectionStore } = await import("../../stores/use-connection-store");
+    useConnectionStore.getState().setMode("desktop");
+    expect(useConnectionStore.getState().mode).toBe("desktop");
+  });
+
+  it("should toggle mode between web and desktop", async () => {
+    const { useConnectionStore } = await import("../../stores/use-connection-store");
+    expect(useConnectionStore.getState().mode).toBe("web");
+    useConnectionStore.getState().setMode("desktop");
+    expect(useConnectionStore.getState().mode).toBe("desktop");
+    useConnectionStore.getState().setMode("web");
+    expect(useConnectionStore.getState().mode).toBe("web");
+  });
+});

package/templates/chat/src/mainview/__tests__/stores/use-log-store.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach } from "vitest";
+
+describe("useLogStore", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+  });
+
+  it("should start with empty logs", async () => {
+    const { useLogStore } = await import("../../stores/use-log-store");
+    expect(useLogStore.getState().logs).toEqual([]);
+  });
+
+  it("should add log entries", async () => {
+    const { useLogStore } = await import("../../stores/use-log-store");
+    useLogStore.getState().addLog("test message");
+    const logs = useLogStore.getState().logs;
+    expect(logs).toHaveLength(1);
+    expect(logs[0]).toContain("test message");
+  });
+
+  it("should prepend timestamp to log entries", async () => {
+    const { useLogStore } = await import("../../stores/use-log-store");
+    useLogStore.getState().addLog("hello");
+    const log = useLogStore.getState().logs[0];
+    expect(log).toMatch(/^\[\d{2}:\d{2}:\d{2}\] hello$/);
+  });
+
+  it("should limit log entries to MAX_LOGS", async () => {
+    const { useLogStore } = await import("../../stores/use-log-store");
+    for (let i = 0; i < 200; i++) {
+      useLogStore.getState().addLog(`log ${i}`);
+    }
+    expect(useLogStore.getState().logs.length).toBeLessThanOrEqual(100);
+  });
+
+  it("should keep most recent logs when exceeding limit", async () => {
+    const { useLogStore } = await import("../../stores/use-log-store");
+    for (let i = 0; i < 150; i++) {
+      useLogStore.getState().addLog(`log ${i}`);
+    }
+    const logs = useLogStore.getState().logs;
+    expect(logs.length).toBeLessThanOrEqual(100);
+    expect(logs[logs.length - 1]).toContain("log 149");
+  });
+});

package/templates/chat/src/mainview/__tests__/stores/use-notification-store.test.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+describe("useNotificationStore", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should have correct initial state", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    const state = useNotificationStore.getState();
+    expect(state.notifications).toEqual([]);
+    expect(state.panelOpen).toBe(false);
+  });
+
+  it("should push a notification", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    useNotificationStore.getState().push({ message: "hello", level: "info" });
+    const state = useNotificationStore.getState();
+    expect(state.notifications).toHaveLength(1);
+    expect(state.notifications[0].message).toBe("hello");
+    expect(state.notifications[0].level).toBe("info");
+    expect(state.notifications[0].read).toBe(false);
+    expect(state.notifications[0].id).toMatch(/^notif-/);
+  });
+
+  it("should auto-dismiss info notifications after 5s", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    useNotificationStore.getState().push({ message: "temp", level: "info" });
+    expect(useNotificationStore.getState().notifications).toHaveLength(1);
+
+    vi.advanceTimersByTime(5000);
+    expect(useNotificationStore.getState().notifications).toHaveLength(0);
+  });
+
+  it("should not auto-dismiss warning/error notifications", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    useNotificationStore.getState().push({ message: "warn", level: "warning" });
+    useNotificationStore.getState().push({ message: "err", level: "error" });
+
+    vi.advanceTimersByTime(10000);
+    expect(useNotificationStore.getState().notifications).toHaveLength(2);
+  });
+
+  it("should mark a notification as read", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    useNotificationStore.getState().push({ message: "test", level: "warning" });
+    const id = useNotificationStore.getState().notifications[0].id;
+
+    useNotificationStore.getState().markRead(id);
+    expect(useNotificationStore.getState().notifications[0].read).toBe(true);
+  });
+
+  it("should mark all notifications as read", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    useNotificationStore.getState().push({ message: "a", level: "warning" });
+    useNotificationStore.getState().push({ message: "b", level: "error" });
+
+    useNotificationStore.getState().markAllRead();
+    const state = useNotificationStore.getState();
+    expect(state.notifications.every((n) => n.read)).toBe(true);
+  });
+
+  it("should dismiss a notification", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    useNotificationStore.getState().push({ message: "bye", level: "warning" });
+    const id = useNotificationStore.getState().notifications[0].id;
+
+    useNotificationStore.getState().dismiss(id);
+    expect(useNotificationStore.getState().notifications).toHaveLength(0);
+  });
+
+  it("should clear all notifications", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    useNotificationStore.getState().push({ message: "a", level: "error" });
+    useNotificationStore.getState().push({ message: "b", level: "error" });
+
+    useNotificationStore.getState().clearAll();
+    expect(useNotificationStore.getState().notifications).toHaveLength(0);
+  });
+
+  it("should toggle panel", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    expect(useNotificationStore.getState().panelOpen).toBe(false);
+    useNotificationStore.getState().togglePanel();
+    expect(useNotificationStore.getState().panelOpen).toBe(true);
+    useNotificationStore.getState().togglePanel();
+    expect(useNotificationStore.getState().panelOpen).toBe(false);
+  });
+
+  it("should set panel open explicitly", async () => {
+    const { useNotificationStore } = await import("../../stores/use-notification-store");
+    useNotificationStore.getState().setPanelOpen(true);
+    expect(useNotificationStore.getState().panelOpen).toBe(true);
+    useNotificationStore.getState().setPanelOpen(false);
+    expect(useNotificationStore.getState().panelOpen).toBe(false);
+  });
+});

package/templates/chat/src/mainview/__tests__/stores/use-sidebar-store.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => { store[key] = value; },
+    removeItem: (key: string) => { delete store[key]; },
+    clear: () => { store = {}; },
+  };
+})();
+
+Object.defineProperty(globalThis, "localStorage", { value: localStorageMock });
+
+describe("useSidebarStore", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+    localStorageMock.clear();
+  });
+
+  it("should have correct initial state", async () => {
+    const { useSidebarStore } = await import("../../stores/use-sidebar-store");
+    const state = useSidebarStore.getState();
+    expect(state.activePanel).toBeNull();
+    expect(state.drawerOpen).toBe(false);
+  });
+
+  it("should set active panel", async () => {
+    const { useSidebarStore } = await import("../../stores/use-sidebar-store");
+    useSidebarStore.getState().setActivePanel(null);
+    expect(useSidebarStore.getState().activePanel).toBeNull();
+  });
+
+  it("should set pinned state", async () => {
+    const { useSidebarStore } = await import("../../stores/use-sidebar-store");
+    useSidebarStore.getState().setPinned(true);
+    expect(useSidebarStore.getState().isPinned).toBe(true);
+    expect(localStorageMock.getItem("sidebar-pinned")).toBe("true");
+  });
+
+  it("should unpin and close drawer", async () => {
+    const { useSidebarStore } = await import("../../stores/use-sidebar-store");
+    useSidebarStore.getState().setPinned(true);
+    useSidebarStore.getState().setPinned(false);
+    expect(useSidebarStore.getState().isPinned).toBe(false);
+    expect(useSidebarStore.getState().drawerOpen).toBe(false);
+  });
+
+  it("should set drawer open", async () => {
+    const { useSidebarStore } = await import("../../stores/use-sidebar-store");
+    useSidebarStore.getState().setDrawerOpen(true);
+    expect(useSidebarStore.getState().drawerOpen).toBe(true);
+  });
+
+  it("should close drawer and clear panel when unpinned", async () => {
+    const { useSidebarStore } = await import("../../stores/use-sidebar-store");
+    useSidebarStore.getState().setPinned(false);
+    useSidebarStore.getState().setDrawerOpen(true);
+    useSidebarStore.getState().setDrawerOpen(false);
+    expect(useSidebarStore.getState().drawerOpen).toBe(false);
+    expect(useSidebarStore.getState().activePanel).toBeNull();
+  });
+
+  it("should clamp sidebar width within bounds", async () => {
+    const { useSidebarStore, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH } = await import("../../stores/use-sidebar-store");
+    useSidebarStore.getState().setSidebarWidth(50);
+    expect(useSidebarStore.getState().sidebarWidth).toBe(SIDEBAR_MIN_WIDTH);
+
+    useSidebarStore.getState().setSidebarWidth(999);
+    expect(useSidebarStore.getState().sidebarWidth).toBe(SIDEBAR_MAX_WIDTH);
+
+    useSidebarStore.getState().setSidebarWidth(300);
+    expect(useSidebarStore.getState().sidebarWidth).toBe(300);
+  });
+
+  it("should persist sidebar width to localStorage", async () => {
+    const { useSidebarStore } = await import("../../stores/use-sidebar-store");
+    useSidebarStore.getState().setSidebarWidth(300);
+    expect(localStorageMock.getItem("sidebar-width")).toBe("300");
+  });
+
+  it("should set breakpoint", async () => {
+    const { useSidebarStore } = await import("../../stores/use-sidebar-store");
+    useSidebarStore.getState()._setBreakpoint("mobile");
+    expect(useSidebarStore.getState().breakpoint).toBe("mobile");
+    useSidebarStore.getState()._setBreakpoint("desktop");
+    expect(useSidebarStore.getState().breakpoint).toBe("desktop");
+  });
+});

package/templates/chat/src/mainview/components/activity-bar/ActivityBar.tsx

@@ -0,0 +1,26 @@
+import { MessageSquare } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+const items: { id: string; icon: typeof MessageSquare; labelKey: string }[] = [
+  { id: "chat", icon: MessageSquare, labelKey: "tabs.chat" },
+];
+
+export function ActivityBar() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="w-12 bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col items-center py-2 gap-1 flex-shrink-0">
+      {items.map(({ id, icon: Icon, labelKey }) => (
+        <button
+          key={id}
+          title={t(labelKey)}
+          className="w-10 h-10 flex items-center justify-center rounded transition-colors text-[var(--color-text-accent)] bg-[var(--color-bg-tertiary)] border-l-2 border-[var(--color-text-primary)]"
+        >
+          <Icon className="w-5 h-5" />
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export { items };