Cmdk UI improvements (#176)

* better command titles * navigation using up/down arrow and enter * added a footer section at the bottom of dialog * added a footer section at the bottom of dialog * navigation using up/down arrow and enter * Removed bun.lockb file from pull request * Revert "added a footer section at the bottom of dialog" This reverts commit 69ba965. * fixed inconsistencies
tscircuit · Nov 11, 2024 · 97697b2 · 97697b2
1 parent 17256cb
commit 97697b2
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/src/components/CmdKMenu.tsx b/src/components/CmdKMenu.tsx
@@ -72,10 +72,10 @@ const CmdKMenu = () => {
   }, [])
 
   const blankTemplates: Template[] = [
-    { name: "Blank Circuit Board", type: "board" },
-    { name: "Blank Circuit Module", type: "package" },
-    { name: "Blank 3D Model", type: "model", disabled: true },
-    { name: "Blank Footprint", type: "footprint", disabled: true },
+    { name: "New Circuit Board", type: "board" },
+    { name: "New Circuit Module", type: "package" },
+    { name: "New 3D Model", type: "model", disabled: true },
+    { name: "New Footprint", type: "footprint", disabled: true },
   ]
 
   const templates: Template[] = [{ name: "Blinking LED Board", type: "board" }]
@@ -94,6 +94,7 @@ const CmdKMenu = () => {
         onOpenChange={setOpen}
         label="Command Menu"
         className="fixed top-32 left-1/2 -translate-x-1/2 max-w-2xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700"
+        loop
       >
         <div className="flex items-center border-b border-gray-200 dark:border-gray-700 px-3">
           <svg
@@ -137,7 +138,7 @@ const CmdKMenu = () => {
                         window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
                         setOpen(false)
                       }}
-                      className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                      className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                     >
                       <div className="flex flex-col">
                         <span className="text-gray-900 dark:text-gray-100">
@@ -168,7 +169,7 @@ const CmdKMenu = () => {
                         window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
                         setOpen(false)
                       }}
-                      className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                      className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                     >
                       <div className="flex flex-col">
                         <span className="text-gray-900 dark:text-gray-100">
@@ -200,7 +201,7 @@ const CmdKMenu = () => {
                         setOpen(false)
                       }
                     }}
-                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default disabled:opacity-50"
+                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default disabled:opacity-50 aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                   >
                     <span className="text-gray-900 dark:text-gray-100">
                       {template.name}
@@ -224,7 +225,7 @@ const CmdKMenu = () => {
                       window.location.href = `/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`
                       setOpen(false)
                     }}
-                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                   >
                     <span className="text-gray-900 dark:text-gray-100">
                       {template.name}
@@ -253,7 +254,7 @@ const CmdKMenu = () => {
                         toastNotImplemented(`${option.name} Import`)
                       }
                     }}
-                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                   >
                     <span className="text-gray-900 dark:text-gray-100">
                       Import {option.name}
@@ -271,6 +272,19 @@ const CmdKMenu = () => {
             </>
           )}
         </Command.List>
+
+        <div className="border-t border-gray-200 dark:border-gray-700 px-3 py-2">
+          <div className="flex justify-between text-xs text-gray-500">
+            <div className="flex space-x-4">
+              <span>↑↓ to navigate</span>
+              <span>↵ to select</span>
+              <span>esc to close</span>
+            </div>
+            <div>
+              <span>⌘K to toggle</span>
+            </div>
+          </div>
+        </div>
       </Command.Dialog>
 
       <JLCPCBImportDialog