♻️ reorganize command bar items

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>