fix: Various command bar fixes

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(),
   };
 }
 

app/components/CommandBarResults.tsx

@@ -8,24 +8,33 @@ export default function CommandBarResults() {
   const { results, rootActionId } = useMatches();
 
   return (
-    <KBarResults
+    <Container>
-      items={results}
+      <KBarResults
-      maxHeight={400}
+        items={results}
-      onRender={({ item, active }) =>
+        maxHeight={400}
-        typeof item === "string" ? (
+        onRender={({ item, active }) =>
-          <Header>{item}</Header>
+          typeof item === "string" ? (
-        ) : (
+            <Header>{item}</Header>
-          <CommandBarItem
+          ) : (
-            action={item}
+            <CommandBarItem
-            active={active}
+              action={item}
-            currentRootActionId={rootActionId}
+              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;

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"],