feat(canvas): improve collapsed sidebar scanability and branding

components/canvas/__tests__/canvas-sidebar.test.tsx

@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import CanvasSidebar from "@/components/canvas/canvas-sidebar";
+import type { Id } from "@/convex/_generated/dataModel";
+
+vi.mock("@/hooks/use-auth-query", () => ({
+  useAuthQuery: () => ({ name: "Demo Canvas" }),
+}));
+
+vi.mock("@/components/canvas/canvas-user-menu", () => ({
+  CanvasUserMenu: ({ compact }: { compact?: boolean }) => (
+    <div data-testid={compact ? "canvas-user-menu-compact" : "canvas-user-menu-full"} />
+  ),
+}));
+
+vi.mock("@/components/ui/progressive-blur", () => ({
+  ProgressiveBlur: () => <div data-testid="progressive-blur" />,
+}));
+
+vi.mock("next/image", () => ({
+  __esModule: true,
+  default: ({ alt }: { alt?: string }) => <span role="img" aria-label={alt ?? ""} />,
+}));
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("CanvasSidebar", () => {
+  let container: HTMLDivElement | null = null;
+  let root: Root | null = null;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    if (root) {
+      await act(async () => {
+        root?.unmount();
+      });
+    }
+    container?.remove();
+    container = null;
+    root = null;
+  });
+
+  it("shows divider-separated category sections with two-column grids in rail mode", async () => {
+    await act(async () => {
+      root?.render(
+        <CanvasSidebar canvasId={"canvas-1" as Id<"canvases">} railMode />,
+      );
+    });
+
+    const text = container?.textContent ?? "";
+    expect(text).not.toContain("QUELLE");
+    expect(text).not.toContain("KI-AUSGABE");
+
+    const sourceGrid = container?.querySelector(
+      '[data-testid="sidebar-rail-category-source-grid"]',
+    );
+    expect(sourceGrid).not.toBeNull();
+    expect(sourceGrid?.className).toContain("grid-cols-2");
+
+    const aiOutputDivider = container?.querySelector(
+      '[data-testid="sidebar-rail-category-ai-output-divider"]',
+    );
+    expect(aiOutputDivider).not.toBeNull();
+
+    const allCategoryGrids = container?.querySelectorAll('[data-testid$="-grid"]');
+    expect(allCategoryGrids?.length ?? 0).toBeGreaterThan(1);
+  });
+});