@cosmicdrift/kumiko-renderer-web 0.130.1 → 0.130.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.130.1",
+  "version": "0.130.2",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.130.1",
-    "@cosmicdrift/kumiko-headless": "0.130.1",
-    "@cosmicdrift/kumiko-renderer": "0.130.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.130.2",
+    "@cosmicdrift/kumiko-headless": "0.130.2",
+    "@cosmicdrift/kumiko-renderer": "0.130.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/nav-tree.test.tsx

@@ -241,6 +241,30 @@ describe("NavTree", () => {
     expect(container.querySelectorAll("svg").length).toBe(2);
   });
 
+  test("server, mail, download, rocket lösen auf ein Icon auf (Config-/SMTP-Nav)", () => {
+    // Config-Settings-Hub leitet Child-Nav-Icons aus dem mask.icon der
+    // ConfigKey ab (smtp-host="server", from="mail", subscription="rocket");
+    // fehlten sie in NAV_ICONS, rendert das Nav blank statt Icon.
+    const schema = {
+      featureName: "app",
+      entities: {},
+      screens: [
+        { id: "a", type: "entityList", entity: "x", columns: [] },
+        { id: "b", type: "entityList", entity: "x", columns: [] },
+        { id: "c", type: "entityList", entity: "x", columns: [] },
+        { id: "d", type: "entityList", entity: "x", columns: [] },
+      ],
+      navs: [
+        { id: "a", label: "SMTP", screen: "a", order: 10, icon: "server" },
+        { id: "b", label: "From", screen: "b", order: 20, icon: "mail" },
+        { id: "c", label: "Export", screen: "c", order: 30, icon: "download" },
+        { id: "d", label: "Billing", screen: "d", order: 40, icon: "rocket" },
+      ],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    expect(container.querySelectorAll("svg").length).toBe(4);
+  });
+
   test("palette, link und share rendern Lucide-Icons (Share-/Branding-Nav)", () => {
     const schema = {
       featureName: "app",
@@ -542,3 +566,65 @@ describe("NavTree dynamic provider nodes", () => {
     expect(active()).toBe(0); // Unmount baut alles ab → kein Leak
   });
 });
+
+describe("NavTree Suchfeld", () => {
+  // Das Suchfeld ist das einzige <input> im Baum; über die Rolle statt den
+  // i18n-Placeholder gefunden (i18n-Bundle resolvt im Worktree gegen den
+  // Haupt-Checkout, wo der neue Key noch fehlt — in CI greift er).
+
+  test("Filter blendet Nicht-Treffer aus, hält Treffer + deren Ancestors", () => {
+    render(<NavTree schema={makeSchema()} />);
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "active" } });
+
+    // Treffer selbst sichtbar (case-insensitiv).
+    expect(screen.getByText("Active")).toBeTruthy();
+    // Nicht-Treffer-Geschwister weg.
+    expect(screen.queryByText("Backlog")).toBeNull();
+    // Ancestors bleiben, damit der Treffer erreichbar bleibt.
+    expect(screen.getByText("Items")).toBeTruthy();
+    expect(screen.getByText("Data")).toBeTruthy();
+  });
+
+  test("Filter ohne Treffer leert den Baum; Leeren stellt alles wieder her", () => {
+    render(<NavTree schema={makeSchema()} />);
+    const input = screen.getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "zzz-nichts" } });
+    expect(screen.queryByText("Items")).toBeNull();
+    expect(screen.queryByText("Data")).toBeNull();
+
+    fireEvent.change(input, { target: { value: "" } });
+    expect(screen.getByText("Backlog")).toBeTruthy();
+    expect(screen.getByText("Data")).toBeTruthy();
+  });
+});
+
+describe("NavTree folder-open Icon", () => {
+  test("Folder-Knoten zeigt folder-open wenn expanded, folder wenn collapsed", async () => {
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([{ label: "page", icon: "folder", children: [pageLeaf("hero")] }]);
+      return () => {};
+    };
+    let container: HTMLElement | undefined;
+    await act(async () => {
+      container = renderDynamic({
+        schema: dynamicSchema(),
+        providers: new Map([["cms:nav:content", provider]]),
+      }).container;
+    });
+    // Default-expanded → offener Ordner, kein geschlossener.
+    expect(container?.querySelector(".lucide-folder-open")).toBeTruthy();
+    expect(container?.querySelector(".lucide-folder")).toBeNull();
+
+    // Der einzige aria-gelabelte Chevron gehört dem "page"-Sub-Ordner
+    // (der Provider-Container toggelt inline, ohne aria-Label).
+    const chevron = screen.getByRole("button", { name: /Expand|Collapse/ });
+    await act(async () => {
+      fireEvent.click(chevron);
+    });
+    expect(container?.querySelector(".lucide-folder")).toBeTruthy();
+    expect(container?.querySelector(".lucide-folder-open")).toBeNull();
+  });
+});

package/src/layout/nav-tree.tsx

@@ -33,9 +33,12 @@ import {
   ChevronRight,
   Coins,
   CreditCard,
+  Download,
   FileText,
   Folder,
+  FolderOpen,
   Gauge,
+  Hash,
   Home,
   KeyRound,
   Layers,
@@ -43,11 +46,15 @@ import {
   LineChart,
   Link,
   List,
+  Lock,
+  Mail,
   Palette,
   PiggyBank,
   Plus,
   Receipt,
+  Rocket,
   Search,
+  Server,
   Settings,
   Share2,
   Shield,
@@ -76,6 +83,7 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
+  SidebarInput,
   SidebarMenu,
   SidebarMenuAction,
   SidebarMenuButton,
@@ -113,6 +121,7 @@ const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   calendar: CalendarDays,
   file: FileText,
   folder: Folder,
+  "folder-open": FolderOpen,
   home: Home,
   bell: Bell,
   shield: Shield,
@@ -125,6 +134,12 @@ const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   link: Link,
   palette: Palette,
   share: Share2,
+  server: Server,
+  mail: Mail,
+  lock: Lock,
+  hash: Hash,
+  download: Download,
+  rocket: Rocket,
 };
 
 export type NavTreeProps = {
@@ -149,6 +164,22 @@ export type NavTreeProps = {
 const EMPTY_BADGES: ReadonlyMap<string, ReactNode> = new Map();
 const NavBadgesContext = createContext<ReadonlyMap<string, ReactNode>>(EMPTY_BADGES);
 
+// Sidebar-Filter: `q` leer = inaktiv (matches akzeptiert alles). `matches`
+// bekommt das ROHE Label (i18n-Key oder Klartext) und übersetzt intern — so
+// filtert das Suchfeld auf den sichtbaren Text, nicht den Key.
+type NavFilter = { readonly q: string; readonly matches: (rawLabel: string) => boolean };
+const NavFilterContext = createContext<NavFilter>({ q: "", matches: () => true });
+
+// Ein Knoten überlebt den Filter, wenn er selbst oder ein Nachfahre matcht.
+// Provider-Kinder sind zur Filterzeit schon materialisiert (Provider-Knoten
+// sind default-expanded → eager geladen), darum reicht die statische
+// children-Rekursion. ponytail: ein zur Filterzeit noch NICHT geladener
+// (user-zugeklappter) Provider wird über den force-expand in useNavNodeState
+// aufgeklappt, lädt und filtert dann mit.
+function subtreeMatches(node: NavNode, matches: (rawLabel: string) => boolean): boolean {
+  return matches(node.label) || node.children.some((c) => subtreeMatches(c, matches));
+}
+
 export function NavTree({
   schema,
   user,
@@ -175,25 +206,47 @@ export function NavTree({
     });
   }, []);
 
+  const t = useTranslation();
+  const [filter, setFilter] = useState("");
+  const q = filter.trim().toLowerCase();
+  const matches = useCallback(
+    (raw: string): boolean => {
+      const label = raw.includes(".") ? t(raw) : raw;
+      return label.toLowerCase().includes(q);
+    },
+    [t, q],
+  );
+  const navFilter = useMemo<NavFilter>(() => ({ q, matches }), [q, matches]);
+
   return (
-    <NavBadgesContext.Provider value={navBadges ?? EMPTY_BADGES}>
-      <div data-testid={testId} data-kumiko-layout="nav-tree" className="flex w-full flex-col">
-        {tree.map((node) =>
-          isPureSection(node) ? (
-            <NavSection
-              key={node.qualifiedName}
-              node={node}
-              collapsed={collapsed}
-              onToggle={onToggle}
+    <NavFilterContext.Provider value={navFilter}>
+      <NavBadgesContext.Provider value={navBadges ?? EMPTY_BADGES}>
+        <div data-testid={testId} data-kumiko-layout="nav-tree" className="flex w-full flex-col">
+          <div className="px-2 pt-2 pb-1">
+            <SidebarInput
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              placeholder={t("kumiko.nav.search")}
+              aria-label={t("kumiko.nav.search")}
             />
-          ) : (
-            <SidebarMenu key={node.qualifiedName} className="px-2 py-1">
-              <NavMenuNode node={node} collapsed={collapsed} onToggle={onToggle} />
-            </SidebarMenu>
-          ),
-        )}
-      </div>
-    </NavBadgesContext.Provider>
+          </div>
+          {tree.map((node) =>
+            isPureSection(node) ? (
+              <NavSection
+                key={node.qualifiedName}
+                node={node}
+                collapsed={collapsed}
+                onToggle={onToggle}
+              />
+            ) : (
+              <SidebarMenu key={node.qualifiedName} className="px-2 py-1">
+                <NavMenuNode node={node} collapsed={collapsed} onToggle={onToggle} />
+              </SidebarMenu>
+            ),
+          )}
+        </div>
+      </NavBadgesContext.Provider>
+    </NavFilterContext.Provider>
   );
 }
 
@@ -245,8 +298,17 @@ function useLabel(node: NavNode): string {
 
 // Icon-or-Dot: bekannter icon-Key → Lucide-Icon, sonst ein dezenter Dot.
 // Aktiv = accent-foreground, inaktiv = gedimmt.
-function NavLeadingIcon({ node, active }: { node: NavNode; active: boolean }): ReactNode {
-  const NavIcon = node.icon !== undefined ? NAV_ICONS[node.icon] : undefined;
+function NavLeadingIcon({
+  node,
+  active,
+  expanded = false,
+}: {
+  node: NavNode;
+  active: boolean;
+  expanded?: boolean;
+}): ReactNode {
+  const iconKey = expanded && node.icon === "folder" ? "folder-open" : node.icon;
+  const NavIcon = iconKey !== undefined ? NAV_ICONS[iconKey] : undefined;
   if (NavIcon !== undefined) return <NavIcon aria-hidden="true" className="shrink-0" />;
   return (
     <span
@@ -366,6 +428,7 @@ type NavNodeState = {
   readonly isExpanded: boolean;
   readonly active: boolean;
   readonly childNodes: readonly NavNode[];
+  readonly hidden: boolean;
   readonly providerLoading: boolean;
   readonly providerError: string | null;
   readonly workspaceId: string | undefined;
@@ -377,10 +440,14 @@ type NavNodeState = {
 // in den shadcn-Primitives, nicht in dieser Logik.
 function useNavNodeState(node: NavNode, collapsed: ReadonlySet<string>): NavNodeState {
   const nav = useNav();
+  const { q: filterQ, matches } = useContext(NavFilterContext);
+  const filterActive = filterQ !== "";
   const displayLabel = useLabel(node);
   const isCollapsed = collapsed.has(node.qualifiedName);
   const expandable = node.children.length > 0 || node.provider === true;
-  const isExpanded = expandable && !isCollapsed;
+  // Aktiver Filter klappt jeden Container auf, damit Treffer unter zugeklappten
+  // Ordnern sichtbar werden (und Provider-Kinder nachladen).
+  const isExpanded = expandable && (!isCollapsed || filterActive);
   const { nodes: providerChildren, error: providerError } = useNavProviderChildren(
     node.qualifiedName,
     node.provider === true && isExpanded,
@@ -393,13 +460,19 @@ function useNavNodeState(node: NavNode, collapsed: ReadonlySet<string>): NavNode
     node.screen !== undefined && nav.route?.screenId === lastSegment(node.screen);
   const targetActive = node.target !== undefined && targetsEqual(node.target, activeTarget);
   const childNodes = node.provider === true ? (providerChildren ?? []) : node.children;
+  const visibleChildNodes = filterActive
+    ? childNodes.filter((c) => subtreeMatches(c, matches))
+    : childNodes;
   return {
     displayLabel,
     isCollapsed,
     expandable,
     isExpanded,
     active: screenActive || targetActive,
-    childNodes,
+    childNodes: visibleChildNodes,
+    // Ein gefilterter Knoten verschwindet nur, wenn weder er selbst noch ein
+    // sichtbar gebliebenes Kind matcht — sonst bliebe ein leerer Ordner-Header.
+    hidden: filterActive && !matches(node.label) && visibleChildNodes.length === 0,
     providerLoading: node.provider === true && isExpanded && providerChildren === null,
     providerError,
     workspaceId: nav.route?.workspaceId,
@@ -488,6 +561,16 @@ function ProviderStatus({
 // gehört auf Items MIT children, nicht auf die Section selbst.
 function NavSection({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const displayLabel = useLabel(node);
+  const { q, matches } = useContext(NavFilterContext);
+  // Provider-Kinder (statisch leer bis geladen) halten die Section offen — ihr
+  // Match lässt sich hier nicht statisch prüfen; der Knoten selbst self-hidet.
+  if (
+    q !== "" &&
+    !matches(node.label) &&
+    !node.children.some((c) => c.provider === true || subtreeMatches(c, matches))
+  ) {
+    return null;
+  }
   return (
     <SidebarGroup className="py-1">
       <SidebarGroupLabel>{displayLabel}</SidebarGroupLabel>
@@ -518,6 +601,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const t = useTranslation();
   const dispatch = useDispatchTarget();
   const s = useNavNodeState(node, collapsed);
+  if (s.hidden) return null;
 
   const sub = s.isExpanded ? (
     <SidebarMenuSub>
@@ -593,7 +677,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
         }}
         {...(s.expandable && { "aria-expanded": !s.isCollapsed })}
       >
-        <NavLeadingIcon node={node} active={false} />
+        <NavLeadingIcon node={node} active={false} expanded={s.isExpanded} />
         <span className="truncate">{s.displayLabel}</span>
         {s.expandable &&
           (s.isCollapsed ? (
@@ -617,9 +701,14 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const t = useTranslation();
   const dispatch = useDispatchTarget();
   const s = useNavNodeState(node, collapsed);
+  if (s.hidden) return null;
 
+  // Kinder in ein eigenes SidebarMenuSub (<ul>) — ein Sub-Item ist ein <li>,
+  // verschachtelte <li> ohne <ul> dazwischen sind invalides HTML (nested
+  // Content-Ordner: Marketing/ > Block). Der <ul> trägt zugleich die
+  // Einrück-/Border-Stufe pro Tiefe.
   const deeper = s.isExpanded ? (
-    <>
+    <SidebarMenuSub>
       <ProviderStatus loading={s.providerLoading} error={s.providerError} />
       {s.childNodes.map((child) => (
         <NavSubNode
@@ -629,7 +718,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
           onToggle={onToggle}
         />
       ))}
-    </>
+    </SidebarMenuSub>
   ) : null;
 
   const chevron = s.expandable ? (
@@ -695,7 +784,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             if (s.expandable) onToggle(node.qualifiedName);
           }}
         >
-          <NavLeadingIcon node={node} active={false} />
+          <NavLeadingIcon node={node} active={false} expanded={s.isExpanded} />
           <span className="truncate">{s.displayLabel}</span>
         </button>
       </SidebarMenuSubButton>