@checkstack/auth-frontend 0.5.32 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @checkstack/auth-frontend
 
+## 0.6.0
+
+### Minor Changes
+
+- 950d6ec: Fix mobile UserMenu items rendering at zero height, group menu items by
+  section, and unstack cramped card headers on small viewports.
+
+  - **UserMenu mobile bug**: On mobile, the user-menu Sheet rendered every
+    menu item as a grid row, which combined with `flex-shrink: 1` on each
+    item collapsed the buttons whose internal layout uses `display: flex`
+    (the items registered with `useNavigate` rather than `<Link>`) to zero
+    content height. Switched the mobile container to a flex column with
+    `[&>*]:shrink-0` and added `min-h-0` so the sheet scrolls correctly
+    when the list overflows.
+
+  - **UserMenu grouping**: Slot extensions now accept an optional `group`
+    field. The user menu buckets `UserMenuItemsSlot` extensions by `group`
+    and renders each group under a labeled header (`Workspace`,
+    `Reliability`, `Configuration`, `Documentation`, `Account`). Existing
+    core plugins are tagged with the appropriate group; third-party plugins
+    can pick any of these or supply their own label. Untagged extensions
+    render last with no header. `UserMenuItemsBottomSlot` is unaffected.
+
+  - **Card header responsiveness**: `CardHeaderRow` (the primitive shared by
+    Incident, Maintenance, Auth, Catalog, GitOps and other config cards) now
+    stacks vertically on narrow viewports and only switches to a single row
+    at the `sm` breakpoint, so titles and adjacent filter controls (e.g.
+    status `Select`, "Show resolved" checkbox) no longer cram together on
+    mobile. Refactored the Incident and Maintenance config pages to use the
+    primitive instead of a hand-rolled `flex items-center justify-between`
+    row, and made their `Select` triggers full-width on mobile.
+
+### Patch Changes
+
+- Updated dependencies [42abfff]
+- Updated dependencies [3547670]
+- Updated dependencies [1ef2e79]
+- Updated dependencies [aa89bc5]
+- Updated dependencies [950d6ec]
+- Updated dependencies [3547670]
+  - @checkstack/common@0.9.0
+  - @checkstack/ui@1.8.0
+  - @checkstack/frontend-api@0.5.0
+  - @checkstack/auth-common@0.6.6
+
+## 0.5.33
+
+### Patch Changes
+
+- Updated dependencies [50e5f5f]
+  - @checkstack/auth-common@0.6.5
+  - @checkstack/common@0.8.0
+  - @checkstack/ui@1.7.1
+  - @checkstack/frontend-api@0.4.2
+
 ## 0.5.32
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.5.32",
+  "version": "0.6.0",
+  "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -11,27 +12,27 @@
     "./api": "./src/api.ts"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsgo -b",
     "lint": "bun run lint:code",
     "lint:code": "eslint . --max-warnings 0",
     "test:e2e": "bunx playwright test"
   },
   "dependencies": {
-    "@checkstack/frontend-api": "0.4.0",
-    "@checkstack/common": "0.7.0",
-    "@checkstack/ui": "1.6.1",
+    "@checkstack/frontend-api": "0.4.2",
+    "@checkstack/common": "0.8.0",
+    "@checkstack/ui": "1.7.1",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "lucide-react": "^0.344.0",
     "better-auth": "^1.1.8",
-    "@checkstack/auth-common": "0.6.3"
+    "@checkstack/auth-common": "0.6.5"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
     "@playwright/test": "^1.49.0",
-    "@checkstack/test-utils-frontend": "0.0.4",
-    "@checkstack/tsconfig": "0.0.5",
-    "@checkstack/scripts": "0.1.2"
+    "@checkstack/test-utils-frontend": "0.0.5",
+    "@checkstack/tsconfig": "0.0.7",
+    "@checkstack/scripts": "0.3.0"
   }
 }

package/src/components/LoginPage.tsx

@@ -9,6 +9,7 @@ import {
   UserMenuItemsSlot,
   UserMenuItemsBottomSlot,
   UserMenuItemsContext,
+  Extension,
 } from "@checkstack/frontend-api";
 import { AuthApi, authRoutes } from "@checkstack/auth-common";
 import { resolveRoute } from "@checkstack/common";
@@ -24,6 +25,7 @@ import {
   CardFooter,
   UserMenu,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   Alert,
   AlertIcon,
@@ -416,6 +418,62 @@ export const LogoutMenuItem = (_props: UserMenuItemsContext) => {
   );
 };
 
+/**
+ * Canonical user-menu group labels and their display order. Extensions tag
+ * themselves via `group` on their slot registration; anything that doesn't
+ * match a known group falls into a trailing label-less bucket.
+ */
+const USER_MENU_GROUP_ORDER: readonly string[] = [
+  "Workspace",
+  "Reliability",
+  "Configuration",
+  "Documentation",
+  "Account",
+];
+
+type UserMenuExtension = Extension<typeof UserMenuItemsSlot>;
+
+function groupTopExtensions(
+  extensions: UserMenuExtension[],
+): Array<{ label: string | undefined; items: UserMenuExtension[] }> {
+  const buckets = new Map<string, UserMenuExtension[]>();
+  const ungrouped: UserMenuExtension[] = [];
+
+  for (const ext of extensions) {
+    const groupName = ext.metadata?.group;
+    if (!groupName) {
+      ungrouped.push(ext);
+      continue;
+    }
+    const list = buckets.get(groupName);
+    if (list) {
+      list.push(ext);
+    } else {
+      buckets.set(groupName, [ext]);
+    }
+  }
+
+  const result: Array<{ label: string | undefined; items: UserMenuExtension[] }> = [];
+  // Known groups in canonical order.
+  for (const name of USER_MENU_GROUP_ORDER) {
+    const items = buckets.get(name);
+    if (items) {
+      result.push({ label: name, items });
+      buckets.delete(name);
+    }
+  }
+  // Any extra groups plugins introduced — render in encounter order, alphabetised.
+  const extras = [...buckets.entries()].toSorted(([a], [b]) => a.localeCompare(b));
+  for (const [name, items] of extras) {
+    result.push({ label: name, items });
+  }
+  // Untagged extensions go last with no header.
+  if (ungrouped.length > 0) {
+    result.push({ label: undefined, items: ungrouped });
+  }
+  return result;
+}
+
 export const LoginNavbarAction = () => {
   const authApi = useApi(authApiRef);
   const { data: session, isPending } = authApi.useSession();
@@ -445,7 +503,9 @@ export const LoginNavbarAction = () => {
   }
 
   if (session?.user) {
-    // Check if we have any bottom items to decide if we need a separator
+    const topExtensions = pluginRegistry.getExtensions(
+      UserMenuItemsSlot.id,
+    ) as UserMenuExtension[];
     const bottomExtensions = pluginRegistry.getExtensions(
       UserMenuItemsBottomSlot.id,
     );
@@ -454,10 +514,20 @@ export const LoginNavbarAction = () => {
       accessRules,
       hasCredentialAccount,
     };
+    const groups = groupTopExtensions(topExtensions);
 
     return (
       <UserMenu user={session.user}>
-        <ExtensionSlot slot={UserMenuItemsSlot} context={menuContext} />
+        {groups.map(({ label, items }, groupIndex) => (
+          <React.Fragment key={label ?? `__group-${groupIndex}`}>
+            {groupIndex > 0 && <DropdownMenuSeparator />}
+            {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
+            {items.map((ext) => {
+              const Component = ext.component as React.ComponentType<UserMenuItemsContext>;
+              return <Component key={ext.id} {...menuContext} />;
+            })}
+          </React.Fragment>
+        ))}
         {hasBottomItems && <DropdownMenuSeparator />}
         <ExtensionSlot slot={UserMenuItemsBottomSlot} context={menuContext} />
       </UserMenu>

package/src/index.tsx

@@ -178,6 +178,7 @@ export const authPlugin = createFrontendPlugin({
     },
     createSlotExtension(UserMenuItemsSlot, {
       id: "auth.user-menu.settings",
+      metadata: { group: "Configuration" },
       component: ({ accessRules: userPerms }: UserMenuItemsContext) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks -- Inline component used via createSlotExtension
         const navigate = useNavigate();
@@ -199,6 +200,7 @@ export const authPlugin = createFrontendPlugin({
     }),
     createSlotExtension(UserMenuItemsSlot, {
       id: "auth.user-menu.profile",
+      metadata: { group: "Account" },
       component: () => {
         // eslint-disable-next-line react-hooks/rules-of-hooks -- Inline component used via createSlotExtension
         const navigate = useNavigate();

package/tsconfig.json

@@ -2,5 +2,22 @@
   "extends": "@checkstack/tsconfig/frontend.json",
   "include": [
     "src"
+  ],
+  "references": [
+    {
+      "path": "../auth-common"
+    },
+    {
+      "path": "../common"
+    },
+    {
+      "path": "../frontend-api"
+    },
+    {
+      "path": "../test-utils-frontend"
+    },
+    {
+      "path": "../ui"
+    }
   ]
-}
+}