Unmount the command palette while closed

Author: RhysSullivan

packages/app/src/web/shell.tsx

@@ -152,7 +152,12 @@ function IntegrationList(props: { pathname: string; onNavigate?: () => void }) {
 
 // ── SidebarContent ───────────────────────────────────────────────────────
 
-function SidebarContent(props: { pathname: string; onNavigate?: () => void; showBrand?: boolean }) {
+function SidebarContent(props: {
+  pathname: string;
+  onNavigate?: () => void;
+  showBrand?: boolean;
+  onOpenCommands: () => void;
+}) {
   const isHome = props.pathname === "/";
   const isSecrets = props.pathname === "/secrets";
   const isPolicies = props.pathname === "/policies";
@@ -212,6 +217,14 @@ function SidebarContent(props: { pathname: string; onNavigate?: () => void; show
       {/* Footer */}
       <div className="shrink-0 border-t border-sidebar-border px-4 py-2.5">
         <div className="flex flex-col gap-1.5 text-xs leading-none">
+          <button
+            type="button"
+            onClick={props.onOpenCommands}
+            className="flex items-center justify-between text-left text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <span>Commands</span>
+            <span className="font-mono text-[11px]">⌘K</span>
+          </button>
           <a
             href="https://executor.sh/docs"
             target="_blank"
@@ -254,6 +267,7 @@ export function Shell() {
   const refreshTools = useAtomRefresh(toolsAllAtom);
   const lastPathname = useRef(pathname);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
   if (lastPathname.current !== pathname) {
     lastPathname.current = pathname;
     if (mobileSidebarOpen) setMobileSidebarOpen(false);
@@ -288,10 +302,10 @@ export function Shell() {
 
   return (
     <div className="flex h-screen overflow-hidden">
-      <CommandPalette />
+      <CommandPalette open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen} />
       {/* Desktop sidebar */}
       <aside className="desktop-macos-sidebar hidden w-52 shrink-0 border-r border-sidebar-border bg-sidebar md:flex md:flex-col lg:w-56">
-        <SidebarContent pathname={pathname} />
+        <SidebarContent pathname={pathname} onOpenCommands={() => setCommandPaletteOpen(true)} />
       </aside>
 
       {/* Mobile sidebar overlay */}
@@ -330,6 +344,10 @@ export function Shell() {
               pathname={pathname}
               onNavigate={() => setMobileSidebarOpen(false)}
               showBrand={false}
+              onOpenCommands={() => {
+                setMobileSidebarOpen(false);
+                setCommandPaletteOpen(true);
+              }}
             />
           </div>
         </div>

packages/react/src/components/command-palette.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useNavigate } from "@tanstack/react-router";
 import { useAtomValue } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
@@ -28,9 +28,9 @@ import {
 //   3. Popular integrations (plugin presets)
 // ---------------------------------------------------------------------------
 
-export function CommandPalette() {
+export function CommandPalette(props: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const { open, onOpenChange } = props;
   const integrationPlugins = useIntegrationPlugins();
-  const [open, setOpen] = useState(false);
   const navigate = useNavigate();
   const integrationsResult = useAtomValue(integrationsOptimisticAtom);
 
@@ -39,12 +39,12 @@ export function CommandPalette() {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
-        setOpen((o) => !o);
+        onOpenChange(!open);
       }
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
-  }, []);
+  }, [onOpenChange, open]);
 
   const connectedSources = useMemo(
     () =>
@@ -88,7 +88,7 @@ export function CommandPalette() {
     return entries;
   }, [integrationPlugins]);
 
-  const close = useCallback(() => setOpen(false), []);
+  const close = useCallback(() => onOpenChange(false), [onOpenChange]);
 
   const goToIntegration = useCallback(
     (id: string) => {
@@ -132,8 +132,10 @@ export function CommandPalette() {
     [close, navigate],
   );
 
+  if (!open) return null;
+
   return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
       <CommandInput placeholder="Search integrations or jump to add…" />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>

packages/react/src/multiplayer/shell.tsx

@@ -2,7 +2,7 @@ import { Link, Outlet, useLocation, useParams } from "@tanstack/react-router";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { useAtomValue } from "@effect/atom-react";
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import { BookOpen, ExternalLink } from "lucide-react";
+import { BookOpen, Command, ExternalLink } from "lucide-react";
 import type { Integration } from "@executor-js/sdk/shared";
 import { integrationsOptimisticAtom } from "../api/atoms";
 import { trackEvent } from "../api/analytics";
@@ -163,6 +163,20 @@ function DocsLink(props: { href: string; onNavigate?: () => void }) {
   );
 }
 
+function CommandsButton(props: { onOpen: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={props.onOpen}
+      className="group flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm text-sidebar-foreground transition-colors hover:bg-sidebar-active/60 hover:text-foreground"
+    >
+      <Command className="size-4 shrink-0" />
+      <span className="flex-1 text-left">Commands</span>
+      <span className="font-mono text-[11px] text-muted-foreground">⌘K</span>
+    </button>
+  );
+}
+
 // ── IntegrationList ───────────────────────────────────────────────────────────
 
 // `pathname` is scope-relative (org-slug prefix already stripped).
@@ -326,7 +340,12 @@ function UserFooter(props: Pick<ShellProps, "onSignOut" | "orgMenuSlot">) {
 // ── SidebarContent ───────────────────────────────────────────────────────
 
 function SidebarContent(
-  props: ShellProps & { pathname: string; onNavigate?: () => void; showBrand?: boolean },
+  props: ShellProps & {
+    pathname: string;
+    onNavigate?: () => void;
+    showBrand?: boolean;
+    onOpenCommands: () => void;
+  },
 ) {
   const plugins = useClientPlugins();
   const pluginNavItems = plugins.flatMap((plugin) =>
@@ -371,6 +390,7 @@ function SidebarContent(
       <SidebarUpdateCard />
 
       <div className="shrink-0 border-t border-sidebar-border p-2">
+        <CommandsButton onOpen={props.onOpenCommands} />
         <DocsLink href={props.docsUrl ?? DEFAULT_DOCS_URL} onNavigate={props.onNavigate} />
         {APP_VERSION && (
           <p className="px-2.5 pt-1.5 font-mono text-[11px] text-muted-foreground tabular-nums">
@@ -392,6 +412,7 @@ export function Shell(props: ShellProps) {
   const pathname = useScopeRelativePathname();
   const lastPathname = useRef(pathname);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
   if (lastPathname.current !== pathname) {
     lastPathname.current = pathname;
     if (mobileSidebarOpen) setMobileSidebarOpen(false);
@@ -408,10 +429,14 @@ export function Shell(props: ShellProps) {
 
   return (
     <div className="flex h-screen overflow-hidden">
-      <CommandPalette />
+      <CommandPalette open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen} />
       {/* Desktop sidebar */}
       <aside className="hidden w-52 shrink-0 border-r border-sidebar-border bg-sidebar md:flex md:flex-col lg:w-56">
-        <SidebarContent {...props} pathname={pathname} />
+        <SidebarContent
+          {...props}
+          pathname={pathname}
+          onOpenCommands={() => setCommandPaletteOpen(true)}
+        />
       </aside>
 
       {/* Mobile sidebar overlay */}
@@ -450,6 +475,10 @@ export function Shell(props: ShellProps) {
               pathname={pathname}
               onNavigate={() => setMobileSidebarOpen(false)}
               showBrand={false}
+              onOpenCommands={() => {
+                setMobileSidebarOpen(false);
+                setCommandPaletteOpen(true);
+              }}
             />
           </div>
         </div>