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,6 +8,7 @@ export default function CommandBarResults() {
   const { results, rootActionId } = useMatches();
 
   return (
+    <Container>
       <KBarResults
         items={results}
         maxHeight={400}
@@ -23,9 +24,17 @@ export default function CommandBarResults() {
           )
         }
       />
+    </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"],