@mostrom/app-shell 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostrom/app-shell",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": false,
   "type": "module",
   "exports": {
@@ -29,7 +29,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/dom": "^1.7.5",
     "@hookform/resolvers": "^5.2.2",
-    "@platform/service-catalog": "npm:@mostrom/service-catalog@^0.1.4",
+    "@platform/service-catalog": "npm:@mostrom/service-catalog@^0.1.5",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",

package/src/AppShell.tsx

@@ -157,12 +157,6 @@ export interface AppShellProps {
    */
   appsMenuItems?: MenuDropdownItems;
 
-  /**
-   * Menu items for the Categories button.
-   * Displays the available service categories.
-   */
-  categoriesMenuItems?: MenuDropdownItems;
-
   /**
    * Menu items for the Settings dropdown.
    * Contains user preferences, notifications settings, and integrations.
@@ -178,9 +172,6 @@ export interface AppShellProps {
   /** Callback when an item in the All Services menu is clicked */
   onAppsMenuItemClick?: MenuItemClickHandler;
 
-  /** Callback when an item in the Categories menu is clicked */
-  onCategoriesMenuItemClick?: MenuItemClickHandler;
-
   /** Callback when an item in the Settings menu is clicked */
   onSettingsMenuItemClick?: MenuItemClickHandler;
 
@@ -315,11 +306,9 @@ export function AppShell({
   searchValue,
   searchPlaceholder,
   appsMenuItems,
-  categoriesMenuItems,
   settingsMenuItems,
   userMenuItems,
   onAppsMenuItemClick,
-  onCategoriesMenuItemClick,
   onSettingsMenuItemClick,
   onUserMenuItemClick,
   onThemeToggle,
@@ -562,31 +551,6 @@ export function AppShell({
     }));
   }, [serviceCatalog, serviceGroups]);
 
-  const catalogCategoryMenuItems = React.useMemo<MenuDropdownItems>(() => {
-    if (!serviceCatalog) {
-      return [{ id: "loading", text: "Loading categories", disabled: true }];
-    }
-
-    const categoryHrefById = new Map<string, string>();
-
-    for (const group of serviceGroups) {
-      const serviceHref = group.services[0]?.href;
-      if (serviceHref && serviceHref.startsWith("/")) {
-        const rootSegment = serviceHref.split("/").filter(Boolean)[0];
-        if (rootSegment) {
-          categoryHrefById.set(group.category.id, `/${rootSegment}/`);
-        }
-      }
-    }
-
-    return serviceCatalog.categories.map((category) => ({
-      id: category.id,
-      text: category.label,
-      description: category.description,
-      href: categoryHrefById.get(category.id),
-    }));
-  }, [serviceCatalog, serviceGroups]);
-
   const hasSearchQuery = searchInputValue.trim().length > 0;
 
   const searchResults = React.useMemo(() => {
@@ -667,8 +631,6 @@ export function AppShell({
   ) : undefined;
 
   const resolvedAppsMenuItems = appsMenuItems ?? catalogMenuItems ?? EMPTY_MENU_ITEMS;
-  const resolvedCategoriesMenuItems =
-    categoriesMenuItems ?? catalogCategoryMenuItems ?? EMPTY_MENU_ITEMS;
   const resolvedIdentity =
     identity ?? {
       logo: {
@@ -724,8 +686,6 @@ export function AppShell({
     <GlobalHeaderSearch
       appsMenuItems={resolvedAppsMenuItems}
       onAppsMenuItemClick={onAppsMenuItemClick}
-      categoriesMenuItems={resolvedCategoriesMenuItems}
-      onCategoriesMenuItemClick={onCategoriesMenuItemClick}
       searchValue={searchInputValue}
       onSearchChange={handleSearchValueChange}
       onSearchSelect={handleSearchSelect}

package/src/components/global-header/GlobalHeaderSearch.tsx

@@ -10,8 +10,6 @@ import {
 export type GlobalHeaderSearchProps = {
   appsMenuItems: MenuDropdownItems;
   onAppsMenuItemClick?: MenuItemClickHandler;
-  categoriesMenuItems: MenuDropdownItems;
-  onCategoriesMenuItemClick?: MenuItemClickHandler;
   searchValue: string;
   onSearchChange: (value: string) => void;
   onSearchSelect: (option: SearchOption) => void;
@@ -24,8 +22,6 @@ export type GlobalHeaderSearchProps = {
 export function GlobalHeaderSearch({
   appsMenuItems,
   onAppsMenuItemClick,
-  categoriesMenuItems,
-  onCategoriesMenuItemClick,
   searchValue,
   onSearchChange,
   onSearchSelect,
@@ -39,9 +35,7 @@ export function GlobalHeaderSearch({
       <span className="app-shell-separator">|</span>
       <ServicesMenu
         appsMenuItems={appsMenuItems}
-        categoriesMenuItems={categoriesMenuItems}
         onAppsMenuItemClick={onAppsMenuItemClick}
-        onCategoriesMenuItemClick={onCategoriesMenuItemClick}
       />
       <GlobalSearch
         value={searchValue}

package/src/components/global-header/ServicesMenu.tsx

@@ -1,6 +1,13 @@
-import { useState, useMemo, type MouseEvent } from "react";
+import { useMemo, type MouseEvent } from "react";
 
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
 
 // Menu dropdown types
 export interface MenuDropdownItem {
@@ -31,9 +38,7 @@ export type MenuItemClickHandler = (detail: MenuItemClickDetail) => void;
 
 export type ServicesMenuProps = {
   appsMenuItems: MenuDropdownItems;
-  categoriesMenuItems: MenuDropdownItems;
   onAppsMenuItemClick?: MenuItemClickHandler;
-  onCategoriesMenuItemClick?: MenuItemClickHandler;
 };
 
 type MenuItem = MenuDropdownItemOrGroup;
@@ -71,32 +76,11 @@ const flattenItems = (items: MenuDropdownItems): MenuDropdownItem[] => {
   return result;
 };
 
-const normalizeGroups = (
-  items: MenuDropdownItems,
-): Array<{ title?: string; items: MenuDropdownItem[] }> =>
-  items.map((item) => {
-    if (isGroup(item)) {
-      return { title: item.text, items: flattenItems(item.items) };
-    }
-
-    return { title: undefined, items: [item as MenuDropdownItem] };
-  });
-
 export function ServicesMenu({
   appsMenuItems,
-  categoriesMenuItems,
   onAppsMenuItemClick,
-  onCategoriesMenuItemClick,
 }: ServicesMenuProps) {
-  const [open, setOpen] = useState(false);
-  const categories = useMemo(
-    () => flattenItems(categoriesMenuItems),
-    [categoriesMenuItems],
-  );
-  const groups = useMemo(
-    () => normalizeGroups(appsMenuItems),
-    [appsMenuItems],
-  );
+  const items = useMemo(() => flattenItems(appsMenuItems), [appsMenuItems]);
 
   const handleItemClick =
     (item: MenuDropdownItem) => (event: MouseEvent<HTMLElement>) => {
@@ -111,136 +95,48 @@ export function ServicesMenu({
         href: item.href,
         external: item.external,
       });
-
-      setOpen(false);
-    };
-
-  const handleCategoryClick =
-    (item: MenuDropdownItem) => (event: MouseEvent<HTMLElement>) => {
-      if (item.disabled) {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-
-      if (onCategoriesMenuItemClick) {
-        event.preventDefault();
-        onCategoriesMenuItemClick({
-          id: item.id,
-          href: item.href,
-          external: item.external,
-        });
-      }
-
-      setOpen(false);
     };
 
   return (
-    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
-      <DropdownMenu.Trigger asChild>
-        <button type="button" aria-label="All services" className="app-shell-apps-button">
-          <span className="app-shell-apps-icon">
-            <DotsNineIcon />
-          </span>
-        </button>
-      </DropdownMenu.Trigger>
-
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          className="app-shell-services-dropdown"
-          sideOffset={8}
-          align="start"
-          avoidCollisions={false}
-        >
-          <div className="app-shell-services-menu" role="menu">
-            <div className="app-shell-services-categories" role="presentation">
-              <div className="app-shell-services-categories-title">Categories</div>
-              <ul>
-                {categories.map((category) => (
-                  <li key={category.id}>
-                    {category.href ? (
-                      <a
-                        className="app-shell-services-category"
-                        href={category.href}
-                        target={category.external ? "_blank" : undefined}
-                        rel={category.external ? "noopener noreferrer" : undefined}
-                        aria-disabled={category.disabled || undefined}
-                        onClick={handleCategoryClick(category)}
-                      >
-                        {category.text}
-                      </a>
-                    ) : (
-                      <button
-                        type="button"
-                        className="app-shell-services-category"
-                        disabled={category.disabled}
-                        onClick={handleCategoryClick(category)}
-                      >
-                        {category.text}
-                      </button>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </div>
-            <div className="app-shell-services-divider" aria-hidden="true" />
-            <div className="app-shell-services-list" role="presentation">
-              {groups.map((group, groupIndex) => (
-                <div className="app-shell-services-group" key={`${group.title}-${groupIndex}`}>
-                  {group.title ? (
-                    <div className="app-shell-services-group-title">{group.title}</div>
-                  ) : null}
-                  <ul>
-                    {group.items.map((item) => {
-                      const isDisabled = Boolean(item.disabled);
-                      const content = (
-                        <>
-                          <span className="app-shell-services-item-text">{item.text}</span>
-                          {item.description ? (
-                            <span className="app-shell-services-item-description">
-                              {item.description}
-                            </span>
-                          ) : null}
-                        </>
-                      );
-
-                      if (item.href) {
-                        return (
-                          <li key={item.id}>
-                            <a
-                              className="app-shell-services-item"
-                              href={item.href}
-                              target={item.external ? "_blank" : undefined}
-                              rel={item.external ? "noopener noreferrer" : undefined}
-                              aria-disabled={isDisabled || undefined}
-                              onClick={handleItemClick(item)}
-                            >
-                              {content}
-                            </a>
-                          </li>
-                        );
-                      }
-
-                      return (
-                        <li key={item.id}>
-                          <button
-                            type="button"
-                            className="app-shell-services-item"
-                            disabled={isDisabled}
-                            onClick={handleItemClick(item)}
-                          >
-                            {content}
-                          </button>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger className="app-shell-apps-button h-9 w-9 p-0 bg-transparent hover:bg-transparent data-[state=open]:bg-transparent">
+            <span className="app-shell-apps-icon">
+              <DotsNineIcon />
+            </span>
+          </NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-2 p-2 md:w-[500px] md:grid-cols-2">
+              {items.map((item) => (
+                <li key={item.id}>
+                  <NavigationMenuLink
+                    asChild
+                    className="flex flex-col items-start gap-1 p-3 rounded-md hover:bg-accent"
+                  >
+                    <a
+                      href={item.href || "#"}
+                      target={item.external ? "_blank" : undefined}
+                      rel={item.external ? "noopener noreferrer" : undefined}
+                      aria-disabled={item.disabled || undefined}
+                      onClick={handleItemClick(item)}
+                    >
+                      <div className="text-sm leading-none font-medium">
+                        {item.text}
+                      </div>
+                      {item.description && (
+                        <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                          {item.description}
+                        </p>
+                      )}
+                    </a>
+                  </NavigationMenuLink>
+                </li>
               ))}
-            </div>
-          </div>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
   );
 }

package/src/components/global-header/AllServicesButton.tsx

@@ -1,127 +0,0 @@
-"use client";
-
-import React from "react";
-import { Button } from "../ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import type {
-  MenuDropdownItems,
-  MenuDropdownItem,
-  MenuDropdownItemGroup,
-  MenuItemClickHandler,
-} from "./ServicesMenu";
-
-type AllServicesButtonProps = {
-  items: MenuDropdownItems;
-  onItemClick?: MenuItemClickHandler;
-};
-
-const DotsNineIcon = () => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    {([5, 12, 19] as const).flatMap((cx) =>
-      ([5, 12, 19] as const).map((cy) => (
-        <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.6} fill="currentColor" />
-      )),
-    )}
-  </svg>
-);
-
-const isGroup = (item: MenuDropdownItem | MenuDropdownItemGroup): item is MenuDropdownItemGroup =>
-  typeof (item as MenuDropdownItemGroup).items !== "undefined";
-
-export function AllServicesButton({ items, onItemClick }: AllServicesButtonProps) {
-  const handleItemClick = (item: MenuDropdownItem) => {
-    if (item.disabled) return;
-    onItemClick?.({
-      id: item.id,
-      href: item.href,
-      external: item.external,
-    });
-  };
-
-  const renderItem = (item: MenuDropdownItem) => {
-    const content = (
-      <>
-        <span>{item.text}</span>
-        {item.description && (
-          <span className="text-xs text-muted-foreground ml-2">{item.description}</span>
-        )}
-      </>
-    );
-
-    if (item.href) {
-      return (
-        <DropdownMenuItem key={item.id} asChild disabled={item.disabled}>
-          <a
-            href={item.href}
-            target={item.external ? "_blank" : undefined}
-            rel={item.external ? "noopener noreferrer" : undefined}
-            onClick={() => handleItemClick(item)}
-          >
-            {content}
-          </a>
-        </DropdownMenuItem>
-      );
-    }
-
-    return (
-      <DropdownMenuItem
-        key={item.id}
-        disabled={item.disabled}
-        onSelect={() => handleItemClick(item)}
-      >
-        {content}
-      </DropdownMenuItem>
-    );
-  };
-
-  return (
-    <div className="app-shell-apps-button">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Apps"
-            className="h-9 w-9 hover:bg-transparent"
-          >
-            <span className="app-shell-apps-icon">
-              <DotsNineIcon />
-            </span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" sideOffset={8} className="w-64 max-h-96 overflow-y-auto">
-          {items.map((item, index) => {
-            if (isGroup(item)) {
-              return (
-                <React.Fragment key={item.text || `group-${index}`}>
-                  {index > 0 && <DropdownMenuSeparator />}
-                  <DropdownMenuGroup>
-                    {item.text && (
-                      <DropdownMenuLabel>{item.text}</DropdownMenuLabel>
-                    )}
-                    {item.items.map((subItem) => renderItem(subItem as MenuDropdownItem))}
-                  </DropdownMenuGroup>
-                </React.Fragment>
-              );
-            }
-            return renderItem(item as MenuDropdownItem);
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}

package/src/components/global-header/CategoriesButton.tsx

@@ -1,119 +0,0 @@
-"use client";
-
-import { Button } from "../ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-import type {
-  MenuDropdownItems,
-  MenuDropdownItem,
-  MenuDropdownItemGroup,
-  MenuItemClickHandler,
-} from "./ServicesMenu";
-
-type CategoriesButtonProps = {
-  items: MenuDropdownItems;
-  onItemClick?: MenuItemClickHandler;
-};
-
-const SquaresFourIcon = () => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    width="22"
-    height="22"
-    viewBox="0 0 24 24"
-  >
-    <rect x="4" y="4" width="7" height="7" rx="1.4" fill="currentColor" />
-    <rect x="13" y="4" width="7" height="7" rx="1.4" fill="currentColor" />
-    <rect x="4" y="13" width="7" height="7" rx="1.4" fill="currentColor" />
-    <rect x="13" y="13" width="7" height="7" rx="1.4" fill="currentColor" />
-  </svg>
-);
-
-const isGroup = (item: MenuDropdownItem | MenuDropdownItemGroup): item is MenuDropdownItemGroup =>
-  typeof (item as MenuDropdownItemGroup).items !== "undefined";
-
-const flattenItems = (items: MenuDropdownItems): MenuDropdownItem[] => {
-  const result: MenuDropdownItem[] = [];
-  items.forEach((item) => {
-    if (isGroup(item)) {
-      result.push(...flattenItems(item.items));
-    } else {
-      result.push(item as MenuDropdownItem);
-    }
-  });
-  return result;
-};
-
-export function CategoriesButton({ items, onItemClick }: CategoriesButtonProps) {
-  const flatItems = flattenItems(items);
-
-  const handleItemClick = (item: MenuDropdownItem) => {
-    if (item.disabled) return;
-    onItemClick?.({
-      id: item.id,
-      href: item.href,
-      external: item.external,
-    });
-  };
-
-  return (
-    <div className="app-shell-categories-button">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Categories"
-            className="h-9 w-9 hover:bg-transparent"
-          >
-            <span className="app-shell-categories-icon">
-              <SquaresFourIcon />
-            </span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" sideOffset={8} className="w-56">
-          {flatItems.map((item) => {
-            const content = (
-              <>
-                <span>{item.text}</span>
-                {item.description && (
-                  <span className="text-xs text-muted-foreground ml-2">{item.description}</span>
-                )}
-              </>
-            );
-
-            if (item.href) {
-              return (
-                <DropdownMenuItem key={item.id} asChild disabled={item.disabled}>
-                  <a
-                    href={item.href}
-                    target={item.external ? "_blank" : undefined}
-                    rel={item.external ? "noopener noreferrer" : undefined}
-                    onClick={() => handleItemClick(item)}
-                  >
-                    {content}
-                  </a>
-                </DropdownMenuItem>
-              );
-            }
-
-            return (
-              <DropdownMenuItem
-                key={item.id}
-                disabled={item.disabled}
-                onSelect={() => handleItemClick(item)}
-              >
-                {content}
-              </DropdownMenuItem>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}