refactor: make command globally available

apps/dokploy/components/dashboard/projects/show.tsx

@@ -36,7 +36,6 @@ import { Fragment } from "react";
 import { toast } from "sonner";
 import { ProjectEnviroment } from "./project-enviroment";
 import { UpdateProject } from "./update";
-import { SearchCommand } from "@/components/dashboard/search-command";
 
 export const ShowProjects = () => {
   const utils = api.useUtils();
@@ -54,9 +53,6 @@ export const ShowProjects = () => {
 
   return (
     <>
-      {/*@ts-expect-error Type mismatch*/}
-      <SearchCommand data={data} />
-
       {data?.length === 0 && (
         <div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
           <FolderInput className="size-10 md:size-28 text-muted-foreground" />

apps/dokploy/components/dashboard/search-command.tsx

@@ -25,17 +25,17 @@ import {
   PostgresqlIcon,
   RedisIcon,
 } from "@/components/icons/data-tools-icons";
+import { api } from "@/utils/api";
+import { truncate } from "lodash";
 
 type Project = Awaited<ReturnType<typeof findProjectById>>;
 
-interface Props {
+export const SearchCommand = () => {
-  data: Project[];
-}
-
-export const SearchCommand = ({ data }: Props) => {
   const router = useRouter();
   const [open, setOpen] = React.useState(false);
 
+  const { data } = api.project.all.useQuery();
+
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
@@ -53,61 +53,11 @@ export const SearchCommand = ({ data }: Props) => {
   return (
     <div>
       <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder={"Search projects"} />
+        <CommandInput placeholder={"Search projects or settings"} />
         <CommandList>
           <CommandEmpty>
             No projects added yet. Click on Create project.
           </CommandEmpty>
-          <CommandGroup heading={"Application"}>
-            <CommandItem
-              onSelect={() => {
-                router.push("/dashboard/projects");
-                setOpen(false);
-              }}
-            >
-              Projects
-            </CommandItem>
-            <CommandItem
-              onSelect={() => {
-                router.push("/dashboard/monitoring");
-                setOpen(false);
-              }}
-            >
-              Monitoring
-            </CommandItem>
-            <CommandItem
-              onSelect={() => {
-                router.push("/dashboard/traefik");
-                setOpen(false);
-              }}
-            >
-              Treafik
-            </CommandItem>
-            <CommandItem
-              onSelect={() => {
-                router.push("/dashboard/docker");
-                setOpen(false);
-              }}
-            >
-              Docker
-            </CommandItem>
-            <CommandItem
-              onSelect={() => {
-                router.push("/dashboard/requests");
-                setOpen(false);
-              }}
-            >
-              Requests
-            </CommandItem>
-            <CommandItem
-              onSelect={() => {
-                router.push("/dashboard/profile");
-                setOpen(false);
-              }}
-            >
-              Settings
-            </CommandItem>
-          </CommandGroup>
           <CommandGroup heading={"Projects"}>
             <CommandList>
               {data?.map((project) => (
@@ -162,6 +112,57 @@ export const SearchCommand = ({ data }: Props) => {
               })}
             </CommandList>
           </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading={"Application"} hidden={true}>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/projects");
+                setOpen(false);
+              }}
+            >
+              Projects
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/monitoring");
+                setOpen(false);
+              }}
+            >
+              Monitoring
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/traefik");
+                setOpen(false);
+              }}
+            >
+              Traefik
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/docker");
+                setOpen(false);
+              }}
+            >
+              Docker
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/requests");
+                setOpen(false);
+              }}
+            >
+              Requests
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                router.push("/dashboard/profile");
+                setOpen(false);
+              }}
+            >
+              Settings
+            </CommandItem>
+          </CommandGroup>
         </CommandList>
       </CommandDialog>
     </div>

apps/dokploy/pages/_app.tsx

@@ -11,6 +11,7 @@ import { Inter } from "next/font/google";
 import Head from "next/head";
 import Script from "next/script";
 import type { ReactElement, ReactNode } from "react";
+import { SearchCommand } from "@/components/dashboard/search-command";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -56,6 +57,7 @@ const MyApp = ({
         forcedTheme={Component.theme}
       >
         <Toaster richColors />
+        <SearchCommand />
         {getLayout(<Component {...pageProps} />)}
       </ThemeProvider>
     </>
@@ -77,6 +79,6 @@ export default api.withTRPC(
       },
       fallbackLng: "en",
       keySeparator: false,
-		},
+    }
-	),
+  )
 );