Command close and hide empty sites (#213)

Author: waiscodes

web/src/gui/command/CommandPalette.tsx

@@ -1,6 +1,6 @@
 import { useNavigate, useParams } from '@tanstack/react-router';
 import { Command } from 'cmdk';
-import { FC, useEffect, useState } from 'react';
+import { createContext, FC, useContext, useEffect, useState } from 'react';
 import { FiArrowRight, FiChevronRight } from 'react-icons/fi';
 
 import { useMe, useSite, useTeam } from '@/api';
@@ -17,6 +17,18 @@ import {
 import { SiteEntries } from './entries/SiteEntry';
 import { TeamEntries } from './entries/TeamEntry';
 
+interface CommandContextType {
+    requestClose: () => void;
+}
+
+const CommandContext = createContext<CommandContextType>({
+    requestClose: () => {},
+});
+
+export const useCommand = () => {
+    return useContext(CommandContext);
+};
+
 export const CommandPalette = () => {
     const [open, setOpen] = useState(false);
 
@@ -34,28 +46,33 @@ export const CommandPalette = () => {
         return () => window.removeEventListener('keydown', down);
     }, []);
 
+    const value = {
+        requestClose: () => setOpen(false),
+    };
+
     return (
-        <ModalRoot open={open} onOpenChange={setOpen}>
-            <ModalContent
-                noPadding
-                noCloseButton
-                // frosted glass effect
-                // noBg
-                // className="dark:text-default bg-white/90 text-neutral-700 backdrop-blur-sm dark:bg-black/30"
-                className=""
-            >
-                <CommandPaletteInternal requestClose={() => setOpen(false)} />
-            </ModalContent>
-        </ModalRoot>
+        <CommandContext.Provider value={value}>
+            <ModalRoot open={open} onOpenChange={setOpen}>
+                <ModalContent
+                    noPadding
+                    noCloseButton
+                    // frosted glass effect
+                    // noBg
+                    // className="dark:text-default bg-white/90 text-neutral-700 backdrop-blur-sm dark:bg-black/30"
+                    className=""
+                >
+                    <CommandPaletteInternal />
+                </ModalContent>
+            </ModalRoot>
+        </CommandContext.Provider>
     );
 };
 
-const CommandPaletteInternal: FC<{ requestClose: () => void }> = ({
-    requestClose,
-}) => {
+const CommandPaletteInternal: FC = () => {
     const routeParameters = useParams({ from: undefined as any });
     const { data: site } = useSite(routeParameters['siteId']);
     const { data: team } = useTeam(routeParameters['teamId'] || site?.team_id);
+    const { requestClose } = useCommand();
     const { data: user } = useMe();
     const navigate = useNavigate();
 

web/src/gui/command/entries/SiteEntry.tsx

@@ -12,6 +12,8 @@ import {
     useTeamSites,
 } from '@/api';
 
+import { useCommand } from '../CommandPalette';
+
 export const SiteEntry: FC<{ site_id: string }> = ({ site_id }) => {
     const { data: site } = useSite(site_id);
     const { data: deployments } = useSiteDeployments(site_id);
@@ -20,6 +22,7 @@ export const SiteEntry: FC<{ site_id: string }> = ({ site_id }) => {
         deployments?.[0]?.deployment_id ?? ''
     );
     const navigate = useNavigate();
+    const { requestClose } = useCommand();
 
     if (!site) return <></>;
 
@@ -34,6 +37,7 @@ export const SiteEntry: FC<{ site_id: string }> = ({ site_id }) => {
                         siteId: site_id,
                     },
                 });
+                requestClose();
             }}
         >
             <div className="flex items-center gap-2">
@@ -48,7 +52,7 @@ export const SiteEntry: FC<{ site_id: string }> = ({ site_id }) => {
                 )}
                 <div>{site.name}</div>
             </div>
-            <div className="text-muted flex items-center gap-1">
+            <div className="flex items-center gap-1 text-muted">
                 <FiGlobe className="text-sm" />
                 <span>site</span>
             </div>
@@ -60,7 +64,7 @@ export const TeamSiteEntries: FC<{ team_id: string }> = ({ team_id }) => {
     const { data: team } = useTeam(team_id);
     const { data: sites } = useTeamSites(team_id);
 
-    if (!team || !sites) return <></>;
+    if (!team || !sites || sites.length === 0) return <></>;
 
     return (
         <Command.Group heading={team.name}>

web/src/gui/command/entries/TeamEntry.tsx

@@ -6,9 +6,12 @@ import { FiUsers } from 'react-icons/fi';
 import { useTeam, useTeams } from '@/api';
 import { Avatar } from '@/components';
 
+import { useCommand } from '../CommandPalette';
+
 export const TeamEntry: FC<{ team_id: string }> = ({ team_id }) => {
     const { data: team } = useTeam(team_id);
     const navigate = useNavigate();
+    const { requestClose } = useCommand();
 
     if (!team) return <></>;
 
@@ -23,6 +26,7 @@ export const TeamEntry: FC<{ team_id: string }> = ({ team_id }) => {
                         teamId: team_id,
                     },
                 });
+                requestClose();
             }}
         >
             <div className="flex w-full items-center gap-2">
@@ -32,7 +36,7 @@ export const TeamEntry: FC<{ team_id: string }> = ({ team_id }) => {
 
                 <div>{team.name}</div>
             </div>
-            <div className="text-muted flex items-center gap-1">
+            <div className="flex items-center gap-1 text-muted">
                 <FiUsers className="text-sm" />
                 <span>team</span>
             </div>