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 {
-  data: Project[];
-}
-
-export const SearchCommand = ({ data }: Props) => {
+export const SearchCommand = () => {
   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,72 +11,74 @@ 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"] });
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
-	getLayout?: (page: ReactElement) => ReactNode;
-	// session: Session | null;
-	theme?: string;
+  getLayout?: (page: ReactElement) => ReactNode;
+  // session: Session | null;
+  theme?: string;
 };
 
 type AppPropsWithLayout = AppProps & {
-	Component: NextPageWithLayout;
+  Component: NextPageWithLayout;
 };
 
 const MyApp = ({
-	Component,
-	pageProps: { ...pageProps },
+  Component,
+  pageProps: { ...pageProps },
 }: AppPropsWithLayout) => {
-	const getLayout = Component.getLayout ?? ((page) => page);
+  const getLayout = Component.getLayout ?? ((page) => page);
 
-	return (
-		<>
-			<style jsx global>{`
-                :root {
-                    --font-inter: ${inter.style.fontFamily};
-                }
-            `}</style>
-			<Head>
-				<title>Dokploy</title>
-			</Head>
-			{process.env.NEXT_PUBLIC_UMAMI_HOST &&
-				process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
-					<Script
-						src={process.env.NEXT_PUBLIC_UMAMI_HOST}
-						data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-					/>
-				)}
+  return (
+    <>
+      <style jsx global>{`
+        :root {
+          --font-inter: ${inter.style.fontFamily};
+        }
+      `}</style>
+      <Head>
+        <title>Dokploy</title>
+      </Head>
+      {process.env.NEXT_PUBLIC_UMAMI_HOST &&
+        process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
+          <Script
+            src={process.env.NEXT_PUBLIC_UMAMI_HOST}
+            data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+          />
+        )}
 
-			<ThemeProvider
-				attribute="class"
-				defaultTheme="system"
-				enableSystem
-				disableTransitionOnChange
-				forcedTheme={Component.theme}
-			>
-				<Toaster richColors />
-				{getLayout(<Component {...pageProps} />)}
-			</ThemeProvider>
-		</>
-	);
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+        forcedTheme={Component.theme}
+      >
+        <Toaster richColors />
+        <SearchCommand />
+        {getLayout(<Component {...pageProps} />)}
+      </ThemeProvider>
+    </>
+  );
 };
 
 export default api.withTRPC(
-	appWithTranslation(
-		MyApp,
-		// keep this in sync with next-i18next.config.js
-		// if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM.
-		// Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259
-		// if one day every page is translated, we can safely remove this config.
-		{
-			i18n: {
-				defaultLocale: "en",
-				locales: Object.values(Languages),
-				localeDetection: false,
-			},
-			fallbackLng: "en",
-			keySeparator: false,
-		},
-	),
+  appWithTranslation(
+    MyApp,
+    // keep this in sync with next-i18next.config.js
+    // if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM.
+    // Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259
+    // if one day every page is translated, we can safely remove this config.
+    {
+      i18n: {
+        defaultLocale: "en",
+        locales: Object.values(Languages),
+        localeDetection: false,
+      },
+      fallbackLng: "en",
+      keySeparator: false,
+    }
+  )
 );