♻️ reorganize command bar items

messages/en-US.json

@@ -1590,6 +1590,42 @@
     "sidebarManagement": "Management",
     "sidebarBillingAndLicenses": "Billing & Licenses",
     "sidebarLogsAnalytics": "Analytics",
+    "commandSites": "Sites",
+    "commandActionModeInfo": "Type \">\" to open action mode",
+    "commandResources": "Resources",
+    "commandProxyResources": "Public Resources",
+    "commandClientResources": "Private Resources",
+    "commandClients": "Clients",
+    "commandUserDevices": "User Devices",
+    "commandMachineClients": "Machine Clients",
+    "commandDomains": "Domains",
+    "commandRemoteExitNodes": "Remote Nodes",
+    "commandTeam": "Team",
+    "commandUsers": "Users",
+    "commandRoles": "Roles",
+    "commandInvitations": "Invitations",
+    "commandPolicies": "Shared Policies",
+    "commandResourcePolicies": "Public Resources Policies",
+    "commandIdentityProviders": "Identity Providers",
+    "commandApprovals": "Approval Requests",
+    "commandShareableLinks": "Shareable Links",
+    "commandOrganization": "Organization",
+    "commandLogsAndAnalytics": "Logs & Analytics",
+    "commandLogsAnalytics": "Analytics",
+    "commandLogsRequest": "HTTP Request Logs",
+    "commandLogsAccess": "Authentication Logs",
+    "commandLogsAction": "Admin Action Logs",
+    "commandLogsConnection": "Network Logs",
+    "commandLogsStreaming": "Event Streaming",
+    "commandManagement": "Management",
+    "commandAlerting": "Alerting",
+    "commandProvisioning": "Provisioning",
+    "commandBluePrints": "Blueprints",
+    "commandApiKeys": "API Keys",
+    "commandBillingAndLicenses": "Billing & Licenses",
+    "commandBilling": "Billing",
+    "commandEnterpriseLicenses": "Licenses",
+    "commandSettings": "Settings",
     "alertingTitle": "Alerting",
     "alertingDescription": "Define sources, triggers, and actions for notifications",
     "alertingRules": "Alert rules",

src/app/navigation.tsx

@@ -341,59 +341,56 @@ export const adminNavSections = (env?: Env): SidebarNavSection[] => [
     }
 ];
 
+export type CommandBarNavSection = {
+    // Added from 'dev' branch
+    heading: string;
+    items: CommandBarNavItem[];
+};
+
+export type CommandBarNavItem = {
+    href?: string;
+    title: string;
+    icon?: React.ReactNode;
+    showEE?: boolean;
+    isBeta?: boolean;
+};
+
 export const commandBarNavSections = (
     env?: Env,
     options?: OrgNavSectionsOptions
-): SidebarNavSection[] => [
+): CommandBarNavSection[] => [
     {
         heading: "network",
         items: [
             {
-                title: "sidebarSites",
+                title: "commandSites",
                 href: "/{orgId}/settings/sites",
                 icon: <Plug className="size-4 flex-none" />
             },
             {
-                title: "sidebarResources",
+                title: "commandProxyResources",
-                icon: <Waypoints className="size-4 flex-none" />,
+                href: "/{orgId}/settings/resources/public",
-                items: [
-                    {
-                        title: "sidebarProxyResources",
-                        href: "/{orgId}/settings/resources/public",
-                        icon: <Globe className="size-4 flex-none" />
-                    },
-                    {
-                        title: "sidebarClientResources",
-                        href: "/{orgId}/settings/resources/private",
-                        icon: <GlobeLock className="size-4 flex-none" />
-                    }
-                ]
-            },
-            {
-                title: "sidebarClients",
-                icon: <MonitorUp className="size-4 flex-none" />,
-                items: [
-                    {
-                        href: "/{orgId}/settings/clients/user",
-                        title: "sidebarUserDevices",
-                        icon: <Laptop className="size-4 flex-none" />
-                    },
-                    {
-                        href: "/{orgId}/settings/clients/machine",
-                        title: "sidebarMachineClients",
-                        icon: <Server className="size-4 flex-none" />
-                    }
-                ]
-            },
-            {
-                title: "sidebarDomains",
-                href: "/{orgId}/settings/domains",
                 icon: <Globe className="size-4 flex-none" />
             },
+            {
+                title: "commandClientResources",
+                href: "/{orgId}/settings/resources/private",
+                icon: <GlobeLock className="size-4 flex-none" />
+            },
+            {
+                href: "/{orgId}/settings/clients/user",
+                title: "commandUserDevices",
+                icon: <Laptop className="size-4 flex-none" />
+            },
+            {
+                href: "/{orgId}/settings/clients/machine",
+                title: "commandMachineClients",
+                icon: <Server className="size-4 flex-none" />
+            },
             ...(build === "saas"
                 ? [
                       {
-                          title: "sidebarRemoteExitNodes",
+                          title: "commandRemoteExitNodes",
                           href: "/{orgId}/settings/remote-exit-nodes",
                           icon: <Server className="size-4 flex-none" />
                       }
@@ -402,44 +399,34 @@ export const commandBarNavSections = (
         ]
     },
     {
-        heading: "accessControl",
+        heading: "commandTeam",
         items: [
             {
-                title: "sidebarTeam",
+                title: "commandUsers",
-                icon: <Users className="size-4 flex-none" />,
+                href: "/{orgId}/settings/access/users",
-                items: [
+                icon: <User className="size-4 flex-none" />
-                    {
-                        title: "sidebarUsers",
-                        href: "/{orgId}/settings/access/users",
-                        icon: <User className="size-4 flex-none" />
-                    },
-                    {
-                        title: "sidebarRoles",
-                        href: "/{orgId}/settings/access/roles",
-                        icon: <Users className="size-4 flex-none" />
-                    },
-                    {
-                        title: "sidebarInvitations",
-                        href: "/{orgId}/settings/access/invitations",
-                        icon: <TicketCheck className="size-4 flex-none" />
-                    }
-                ]
             },
+            {
+                title: "commandRoles",
+                href: "/{orgId}/settings/access/roles",
+                icon: <Users className="size-4 flex-none" />
+            },
+            {
+                title: "commandInvitations",
+                href: "/{orgId}/settings/access/invitations",
+                icon: <TicketCheck className="size-4 flex-none" />
+            }
+        ]
+    },
+    {
+        heading: "accessControl",
+        items: [
             ...(!env?.flags.disableEnterpriseFeatures
                 ? [
                       {
-                          title: "sidebarPolicies",
+                          title: "commandResourcePolicies",
-
+                          href: "/{orgId}/settings/policies/resources/public",
-                          icon: <ShieldIcon className="size-4 flex-none" />,
+                          icon: <ShieldIcon className="size-4 flex-none" />
-                          items: [
-                              {
-                                  title: "sidebarResourcePolicies",
-                                  href: "/{orgId}/settings/policies/resources/public",
-                                  icon: (
-                                      <GlobeIcon className="size-4 flex-none" />
-                                  )
-                              }
-                          ]
                       }
                   ]
                 : []),
@@ -450,7 +437,7 @@ export const commandBarNavSections = (
             (env?.app.identityProviderMode === undefined && build !== "oss")
                 ? [
                       {
-                          title: "sidebarIdentityProviders",
+                          title: "commandIdentityProviders",
                           href: "/{orgId}/settings/idp",
                           icon: <Fingerprint className="size-4 flex-none" />
                       }
@@ -459,134 +446,129 @@ export const commandBarNavSections = (
             ...(!env?.flags.disableEnterpriseFeatures
                 ? [
                       {
-                          title: "sidebarApprovals",
+                          title: "commandApprovals",
                           href: "/{orgId}/settings/access/approvals",
                           icon: <UserCog className="size-4 flex-none" />
                       }
                   ]
                 : []),
             {
-                title: "sidebarShareableLinks",
+                title: "commandShareableLinks",
                 href: "/{orgId}/settings/share-links",
                 icon: <LinkIcon className="size-4 flex-none" />
             }
         ]
     },
     {
-        heading: "sidebarOrganization",
+        heading: "commandLogsAndAnalytics",
         items: [
             {
-                title: "sidebarLogsAndAnalytics",
+                title: "commandLogsAnalytics",
-                icon: <ChartLine className="size-4 flex-none" />,
+                href: "/{orgId}/settings/logs/analytics",
-                items: [
+                icon: <ChartLine className="size-4 flex-none" />
-                    {
-                        title: "sidebarLogsAnalytics",
-                        href: "/{orgId}/settings/logs/analytics",
-                        icon: <ChartLine className="size-4 flex-none" />
-                    },
-                    {
-                        title: "sidebarLogsRequest",
-                        href: "/{orgId}/settings/logs/request",
-                        icon: (
-                            <SquareMousePointer className="size-4 flex-none" />
-                        )
-                    },
-                    ...(!env?.flags.disableEnterpriseFeatures
-                        ? [
-                              {
-                                  title: "sidebarLogsAccess",
-                                  href: "/{orgId}/settings/logs/access",
-                                  icon: <ScanEye className="size-4 flex-none" />
-                              },
-                              {
-                                  title: "sidebarLogsAction",
-                                  href: "/{orgId}/settings/logs/action",
-                                  icon: <Logs className="size-4 flex-none" />
-                              },
-                              {
-                                  title: "sidebarLogsConnection",
-                                  href: "/{orgId}/settings/logs/connection",
-                                  icon: <Cable className="size-4 flex-none" />
-                              },
-                              {
-                                  title: "sidebarLogsStreaming",
-                                  href: "/{orgId}/settings/logs/streaming",
-                                  icon: <Unplug className="size-4 flex-none" />
-                              }
-                          ]
-                        : [])
-                ]
             },
             {
-                title: "sidebarManagement",
+                title: "commandLogsRequest",
-                icon: <Building2 className="size-4 flex-none" />,
+                href: "/{orgId}/settings/logs/request",
-                items: [
+                icon: <SquareMousePointer className="size-4 flex-none" />
-                    ...(!env?.flags.disableEnterpriseFeatures
-                        ? [
-                              {
-                                  title: "sidebarAlerting",
-                                  href: "/{orgId}/settings/alerting",
-                                  icon: (
-                                      <BellRing className="size-4 flex-none" />
-                                  )
-                              },
-                              {
-                                  title: "sidebarProvisioning",
-                                  href: "/{orgId}/settings/provisioning",
-                                  icon: <Boxes className="size-4 flex-none" />
-                              }
-                          ]
-                        : []),
-                    {
-                        title: "sidebarBluePrints",
-                        href: "/{orgId}/settings/blueprints",
-                        icon: <ReceiptText className="size-4 flex-none" />
-                    },
-                    {
-                        title: "sidebarApiKeys",
-                        href: "/{orgId}/settings/api-keys",
-                        icon: <KeyRound className="size-4 flex-none" />
-                    },
-                    ...(!env?.flags.disableEnterpriseFeatures
-                        ? [
-                              {
-                                  title: "labels",
-                                  href: "/{orgId}/settings/labels",
-                                  icon: <TagIcon className="size-4 flex-none" />
-                              }
-                          ]
-                        : [])
-                ]
             },
-            ...(build === "saas" && options?.isPrimaryOrg
+            ...(!env?.flags.disableEnterpriseFeatures
                 ? [
                       {
-                          title: "sidebarBillingAndLicenses",
+                          title: "commandLogsAccess",
-                          icon: <CreditCard className="size-4 flex-none" />,
+                          href: "/{orgId}/settings/logs/access",
-                          items: [
+                          icon: <ScanEye className="size-4 flex-none" />
-                              {
+                      },
-                                  title: "sidebarBilling",
+                      {
-                                  href: "/{orgId}/settings/billing",
+                          title: "commandLogsAction",
-                                  icon: (
+                          href: "/{orgId}/settings/logs/action",
-                                      <CreditCard className="size-4 flex-none" />
+                          icon: <Logs className="size-4 flex-none" />
-                                  )
+                      },
-                              },
+                      {
-                              {
+                          title: "commandLogsConnection",
-                                  title: "sidebarEnterpriseLicenses",
+                          href: "/{orgId}/settings/logs/connection",
-                                  href: "/{orgId}/settings/license",
+                          icon: <Cable className="size-4 flex-none" />
-                                  icon: (
+                      },
-                                      <TicketCheck className="size-4 flex-none" />
+                      {
-                                  )
+                          title: "commandLogsStreaming",
-                              }
+                          href: "/{orgId}/settings/logs/streaming",
-                          ]
+                          icon: <Unplug className="size-4 flex-none" />
+                      }
+                  ]
+                : [])
+        ]
+    },
+    {
+        heading: "commandManagement",
+        items: [
+            ...(!env?.flags.disableEnterpriseFeatures
+                ? [
+                      {
+                          title: "commandAlerting",
+                          href: "/{orgId}/settings/alerting",
+                          icon: <BellRing className="size-4 flex-none" />
+                      },
+                      {
+                          title: "commandProvisioning",
+                          href: "/{orgId}/settings/provisioning",
+                          icon: <Boxes className="size-4 flex-none" />
                       }
                   ]
                 : []),
             {
-                title: "sidebarSettings",
+                title: "commandBluePrints",
+                href: "/{orgId}/settings/blueprints",
+                icon: <ReceiptText className="size-4 flex-none" />
+            },
+            {
+                title: "commandApiKeys",
+                href: "/{orgId}/settings/api-keys",
+                icon: <KeyRound className="size-4 flex-none" />
+            },
+            ...(!env?.flags.disableEnterpriseFeatures
+                ? [
+                      {
+                          title: "labels",
+                          href: "/{orgId}/settings/labels",
+                          icon: <TagIcon className="size-4 flex-none" />
+                      }
+                  ]
+                : [])
+        ]
+    },
+
+    {
+        heading: "commandOrganization",
+        items: [
+            {
+                title: "commandSettings",
                 href: "/{orgId}/settings/general",
                 icon: <Settings className="size-4 flex-none" />
+            },
+            {
+                title: "commandDomains",
+                href: "/{orgId}/settings/domains",
+                icon: <Globe className="size-4 flex-none" />
             }
         ]
-    }
+    },
+    ...(build === "saas" && options?.isPrimaryOrg
+        ? [
+              {
+                  heading: "commandBillingAndLicenses",
+                  items: [
+                      {
+                          title: "commandBilling",
+                          href: "/{orgId}/settings/billing",
+                          icon: <CreditCard className="size-4 flex-none" />
+                      },
+                      {
+                          title: "commandEnterpriseLicenses",
+                          href: "/{orgId}/settings/license",
+                          icon: <TicketCheck className="size-4 flex-none" />
+                      }
+                  ]
+              }
+          ]
+        : [])
 ];

src/components/Layout.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { cn } from "@app/lib/cn";
 import { ListUserOrgsResponse } from "@server/routers/org";
-import type { SidebarNavSection } from "@app/app/navigation";
+import type {
+    CommandBarNavSection,
+    SidebarNavSection
+} from "@app/app/navigation";
 import { LayoutSidebar } from "@app/components/LayoutSidebar";
 import { LayoutHeader } from "@app/components/LayoutHeader";
 import { LayoutMobileMenu } from "@app/components/LayoutMobileMenu";
@@ -13,7 +16,7 @@ interface LayoutProps {
     orgId?: string;
     orgs?: ListUserOrgsResponse["orgs"];
     navItems?: SidebarNavSection[];
-    commandNavItems?: SidebarNavSection[];
+    commandNavItems?: CommandBarNavSection[];
     showSidebar?: boolean;
     showHeader?: boolean;
     showTopBar?: boolean;

src/components/command-palette/CommandPalette.tsx

@@ -9,7 +9,10 @@ import {
     CommandList,
     CommandSeparator
 } from "@app/components/ui/command";
-import type { SidebarNavSection } from "@app/app/navigation";
+import type {
+    CommandBarNavSection,
+    SidebarNavSection
+} from "@app/app/navigation";
 import { Badge } from "@app/components/ui/badge";
 import { ListUserOrgsResponse } from "@server/routers/org";
 import { Loader2 } from "lucide-react";
@@ -28,11 +31,12 @@ import { useCommandPaletteNavigation } from "./useCommandPaletteNavigation";
 import { useCommandPaletteOrganizations } from "./useCommandPaletteOrganizations";
 import { useCommandPaletteSearch } from "./useCommandPaletteSearch";
 import { useUserContext } from "@app/hooks/useUserContext";
+import { cn } from "@app/lib/cn";
 
 type CommandPaletteProps = {
     orgId?: string;
     orgs?: ListUserOrgsResponse["orgs"];
-    navItems: SidebarNavSection[];
+    navItems: CommandBarNavSection[];
 };
 
 /**
@@ -89,28 +93,35 @@ export function CommandPalette({ orgId, orgs, navItems }: CommandPaletteProps) {
             title={t("commandPaletteTitle")}
             description={t("commandPaletteDescription")}
             className="max-w-2xl **:data-[slot=command-input-wrapper]:h-15"
+            commandProps={{
+                loop: true
+            }}
         >
             <CommandInput
                 placeholder={t("commandPaletteSearchPlaceholder")}
                 value={search}
                 onValueChange={setSearch}
             />
-            <CommandList className="max-h-125 min-h-0 h-auto">
+            <CommandList className="max-h-118 min-h-0 h-auto scroll-pb-2.5 scroll-pt-2">
                 <CommandEmpty>{t("commandPaletteNoResults")}</CommandEmpty>
 
                 <CommandGroup
-                    heading='Type ">" to open action mode'
+                    heading={t("commandActionModeInfo")}
                     className="[&_[cmdk-group-heading]]:text-sm"
                 />
 
-                {navigationGroups.map((group, idx) => (
+                {navigationGroups.map((group, groupIndex) => (
                     <React.Fragment key={group.heading}>
-                        {idx > 0 && <CommandSeparator />}
+                        {groupIndex > 0 && <CommandSeparator />}
                         <CommandGroup
                             heading={group.heading}
-                            className="[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-sm pb-2.5"
+                            className={cn(
+                                "[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-sm pb-2.5",
+                                groupIndex > 0 &&
+                                    "[&_[cmdk-group-heading]]:pt-3"
+                            )}
                         >
-                            {group.items.map((item) => (
+                            {group.items.map((item, itemIndex) => (
                                 <CommandItem
                                     key={item.id}
                                     value={`${item.title} ${group.heading}`}

src/components/command-palette/useCommandPaletteNavigation.ts

@@ -1,14 +1,14 @@
 "use client";
 
-import type { SidebarNavSection } from "@app/components/SidebarNav";
+import type { CommandBarNavSection } from "@app/app/navigation";
 import { flattenNavSections } from "@app/lib/flattenNavItems";
 import {
     hydrateNavHref,
     navHrefParamsFromRoute
 } from "@app/lib/hydrateNavHref";
+import { useTranslations } from "next-intl";
 import { useParams } from "next/navigation";
 import { useMemo } from "react";
-import { useTranslations } from "next-intl";
 
 export type NavigationCommand = {
     id: string;
@@ -24,7 +24,7 @@ export type NavigationCommandGroup = {
 };
 
 export function useCommandPaletteNavigation(
-    navItems: SidebarNavSection[]
+    navItems: CommandBarNavSection[]
 ): NavigationCommandGroup[] {
     const params = useParams();
     const t = useTranslations();

src/components/ui/command.tsx

@@ -41,6 +41,7 @@ function CommandDialog({
     description?: string;
     className?: string;
     showCloseButton?: boolean;
+    commandProps?: React.ComponentProps<typeof Command>;
 }) {
     return (
         <Dialog {...props}>
@@ -49,7 +50,10 @@ function CommandDialog({
                 <DialogDescription>{description}</DialogDescription>
             </DialogHeader>
             <DialogContent className={cn("overflow-hidden p-0", className)}>
-                <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                <Command
+                    {...props.commandProps}
+                    className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+                >
                     {children}
                 </Command>
             </DialogContent>