command palette tweaks

src/components/command-palette/CommandPaletteTrigger.tsx

@@ -6,11 +6,15 @@ import { cn } from "@app/lib/cn";
 import { Search } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
+import { ListUserOrgsResponse } from "@server/routers/org";
 import { useCommandPalette } from "./CommandPalette";
+import { useCanUseCommandPalette } from "./useCanUseCommandPalette";
 
 type CommandPaletteTriggerProps = {
     variant?: "header" | "mobile";
     className?: string;
+    orgId?: string;
+    orgs?: ListUserOrgsResponse["orgs"];
 };
 
 function useIsMac() {
@@ -25,11 +29,18 @@ function useIsMac() {
 
 export function CommandPaletteTrigger({
     variant = "header",
-    className
+    className,
+    orgId,
+    orgs
 }: CommandPaletteTriggerProps) {
     const t = useTranslations();
     const { setOpen } = useCommandPalette();
     const isMac = useIsMac();
+    const canUseCommandPalette = useCanUseCommandPalette(orgId, orgs);
+
+    if (!canUseCommandPalette) {
+        return null;
+    }
 
     if (variant === "mobile") {
         return (
@@ -49,13 +60,13 @@ export function CommandPaletteTrigger({
         <Button
             variant="outline"
             className={cn(
-                "hidden h-9 w-56 justify-start gap-2 px-3 text-muted-foreground md:flex lg:w-64",
+                "relative hidden h-9 w-56 justify-start pl-8 pr-3 text-muted-foreground md:flex lg:w-64",
                 className
             )}
             aria-label={t("commandPaletteTitle")}
             onClick={() => setOpen(true)}
         >
-            <Search className="size-4 shrink-0 opacity-50" />
+            <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <span className="flex-1 truncate text-left text-sm font-normal">
                 {t("commandPaletteSearchPlaceholder")}
             </span>