feat: improve command display in options page (#35)

## Summary
- Fix command display order: `_execute_action` → `open-popup` →
`move-tab-left` → `move-tab-right`
- Use i18n (`t()`) for command descriptions instead of Chrome API values
- Reorganize layout: Mode selection now appears to the right of command
name

## Test plan
- [ ] Open options page and verify command order is correct
- [ ] Verify `_execute_action` description displays properly
- [ ] Verify Mode selection appears to the right of command name for
popup commands
- [ ] Verify "Select on re-press" appears below the key settings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: whatasoda

src/options/components/ShortcutsSection.tsx

@@ -3,9 +3,24 @@ import { css } from "../../../styled-system/css";
 import type { CommandName, Settings } from "../../core/settings/settings-types";
 import { getCommands, openShortcutsPage } from "../../infrastructure/chrome/messaging";
 import { t } from "../../shared/i18n/index.ts";
-import { MSG } from "../../shared/i18n/message-keys.ts";
+import { type MessageKey, MSG } from "../../shared/i18n/message-keys.ts";
 import { Button, Checkbox, RadioGroup, Section } from "../../shared/ui";
 
+/**
+ * Fixed display order for commands in the options page.
+ */
+const COMMAND_ORDER = ["_execute_action", "open-popup", "move-tab-left", "move-tab-right"];
+
+/**
+ * Mapping from command names to i18n message keys for descriptions.
+ */
+const COMMAND_DESCRIPTION_KEYS: Record<string, MessageKey> = {
+  _execute_action: MSG.MANIFEST_COMMAND_EXECUTE_ACTION,
+  "open-popup": MSG.MANIFEST_COMMAND_OPEN_POPUP,
+  "move-tab-left": MSG.MANIFEST_COMMAND_MOVE_TAB_LEFT,
+  "move-tab-right": MSG.MANIFEST_COMMAND_MOVE_TAB_RIGHT,
+};
+
 const styles = {
   shortcutList: css({
     display: "flex",
@@ -26,6 +41,12 @@ const styles = {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
+    gap: "md",
+  }),
+  shortcutHeaderLeft: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "md",
   }),
   shortcutName: css({
     fontSize: "lg",
@@ -40,16 +61,8 @@ const styles = {
     textAlign: "center",
   }),
   shortcutSettings: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "sm",
     paddingLeft: "sm",
   }),
-  settingRow: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "md",
-  }),
   note: css({
     fontSize: "12px",
     color: "text.secondary",
@@ -73,6 +86,11 @@ interface ShortcutsSectionProps {
 export function ShortcutsSection(props: ShortcutsSectionProps) {
   const [shortcuts] = createResource(getCommands);
 
+  const sortedShortcuts = () => {
+    const list = shortcuts() ?? [];
+    return [...list].sort((a, b) => COMMAND_ORDER.indexOf(a.name) - COMMAND_ORDER.indexOf(b.name));
+  };
+
   const modeOptions = [
     { value: "all", label: t(MSG.OPTIONS_MODE_ALL) },
     { value: "currentWindow", label: t(MSG.OPTIONS_MODE_CURRENT) },
@@ -81,34 +99,15 @@ export function ShortcutsSection(props: ShortcutsSectionProps) {
   return (
     <Section title={t(MSG.OPTIONS_GLOBAL_SHORTCUTS)}>
       <div class={styles.shortcutList}>
-        <For each={shortcuts()}>
+        <For each={sortedShortcuts()}>
           {(shortcut) => (
             <div class={styles.shortcutItem}>
               <div class={styles.shortcutHeader}>
-                <span class={styles.shortcutName}>{shortcut.description}</span>
-                <span class={styles.shortcutKey}>{shortcut.shortcut}</span>
-              </div>
-              <Show when={isPopupCommand(shortcut.name ?? "")}>
-                <div class={styles.shortcutSettings}>
-                  <div class={styles.settingRow}>
-                    <Checkbox
-                      checked={
-                        props.settings.commandSettings[shortcut.name as CommandName]
-                          ?.selectOnClose ?? true
-                      }
-                      onChange={(checked) =>
-                        props.onUpdateCommandSetting(
-                          shortcut.name as CommandName,
-                          "selectOnClose",
-                          checked,
-                        )
-                      }
-                    >
-                      {t(MSG.OPTIONS_SELECT_ON_REPRESS)}
-                    </Checkbox>
-                  </div>
-                  <div class={styles.settingRow}>
-                    <span>{t(MSG.OPTIONS_POPUP_MODE)}:</span>
+                <div class={styles.shortcutHeaderLeft}>
+                  <span class={styles.shortcutName}>
+                    {t(COMMAND_DESCRIPTION_KEYS[shortcut.name] ?? shortcut.name)}
+                  </span>
+                  <Show when={isPopupCommand(shortcut.name ?? "")}>
                     <RadioGroup
                       name={`mode-${shortcut.name}`}
                       options={modeOptions}
@@ -123,7 +122,27 @@ export function ShortcutsSection(props: ShortcutsSectionProps) {
                         )
                       }
                     />
-                  </div>
+                  </Show>
+                </div>
+                <span class={styles.shortcutKey}>{shortcut.shortcut}</span>
+              </div>
+              <Show when={isPopupCommand(shortcut.name ?? "")}>
+                <div class={styles.shortcutSettings}>
+                  <Checkbox
+                    checked={
+                      props.settings.commandSettings[shortcut.name as CommandName]?.selectOnClose ??
+                      true
+                    }
+                    onChange={(checked) =>
+                      props.onUpdateCommandSetting(
+                        shortcut.name as CommandName,
+                        "selectOnClose",
+                        checked,
+                      )
+                    }
+                  >
+                    {t(MSG.OPTIONS_SELECT_ON_REPRESS)}
+                  </Checkbox>
                 </div>
               </Show>
             </div>