From b1e2ff0713b698de09ac45e61efc73045cbdbc79 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 18 May 2023 16:42:46 -0400
Subject: [PATCH] fix: Various command bar fixes

---
 app/actions/index.ts                 |  2 +-
 app/components/CommandBarResults.tsx | 39 +++++++++++++++++-----------
 app/hooks/useSettingsActions.tsx     |  1 +
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/actions/index.ts b/app/actions/index.ts
index e088c0026..82064dd1d 100644
--- a/app/actions/index.ts
+++ b/app/actions/index.ts
@@ -35,7 +35,7 @@ export function createAction(definition: Optional<Action, "id">): Action {
           return definition.perform?.(context);
         }
       : undefined,
-    id: uuidv4(),
+    id: definition.id ?? uuidv4(),
   };
 }
 
diff --git a/app/components/CommandBarResults.tsx b/app/components/CommandBarResults.tsx
index 1664b62f6..c69e53d94 100644
--- a/app/components/CommandBarResults.tsx
+++ b/app/components/CommandBarResults.tsx
@@ -8,24 +8,33 @@ export default function CommandBarResults() {
   const { results, rootActionId } = useMatches();
 
   return (
-    <KBarResults
-      items={results}
-      maxHeight={400}
-      onRender={({ item, active }) =>
-        typeof item === "string" ? (
-          <Header>{item}</Header>
-        ) : (
-          <CommandBarItem
-            action={item}
-            active={active}
-            currentRootActionId={rootActionId}
-          />
-        )
-      }
-    />
+    <Container>
+      <KBarResults
+        items={results}
+        maxHeight={400}
+        onRender={({ item, active }) =>
+          typeof item === "string" ? (
+            <Header>{item}</Header>
+          ) : (
+            <CommandBarItem
+              action={item}
+              active={active}
+              currentRootActionId={rootActionId}
+            />
+          )
+        }
+      />
+    </Container>
   );
 }
 
+// Cannot style KBarResults unfortunately, so we must wrap and target the inner
+const Container = styled.div`
+  > div {
+    padding-bottom: 8px;
+  }
+`;
+
 const Header = styled.h3`
   font-size: 13px;
   letter-spacing: 0.04em;
diff --git a/app/hooks/useSettingsActions.tsx b/app/hooks/useSettingsActions.tsx
index 75ef19c15..2cd777338 100644
--- a/app/hooks/useSettingsActions.tsx
+++ b/app/hooks/useSettingsActions.tsx
@@ -25,6 +25,7 @@ const useSettingsActions = () => {
   const navigateToSettings = React.useMemo(
     () =>
       createAction({
+        id: "settings",
         name: ({ t }) => t("Settings"),
         section: NavigationSection,
         shortcut: ["g", "s"],