feat: polish mobile workspace and settings surfaces

Author: pallyoung

packages/web/src/components/ui/select/index.test.tsx

@@ -202,6 +202,7 @@ describe("Select", () => {
     expect(trigger).toHaveClass("input", "mobile-select-trigger");
     expect(trigger).toHaveAttribute("aria-describedby", "evaluator-helper");
     expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+    expect(trigger).not.toHaveAttribute("mobile");
 
     fireEvent.click(trigger);
     expect(onOpen).toHaveBeenCalledTimes(1);

packages/web/src/components/ui/select/index.tsx

@@ -230,6 +230,7 @@ export function Select<T extends string = string>(props: SelectProps<T>) {
       disabled,
       id,
       invalid,
+      mobile: _mobile,
       onClick,
       onOpen,
       options,

packages/web/src/features/settings/components/settings-page.tsx

@@ -125,6 +125,19 @@ function loadProviderAdditionalArgs(
   );
 }
 
+function getMobileSectionHintKey(section: SettingsSection) {
+  switch (section) {
+    case "general":
+      return "settings.notifications_channel_hint";
+    case "providers":
+      return "settings.provider.command_preview_hint";
+    case "appearance":
+      return "settings.theme.hint";
+    case "shortcuts":
+      return "settings.shortcuts.hint";
+  }
+}
+
 /**
  * Settings Page
  *
@@ -436,18 +449,28 @@ export function SettingsPage() {
 
   const renderMobileRoot = () => (
     <main className="settings-content settings-content--mobile-root">
+      <section className="settings-mobile-root-hero">
+        <div className="settings-mobile-root-hero__eyebrow">{t("settings.title")}</div>
+        <p className="settings-mobile-root-hero__body">{t("settings.autosave_hint")}</p>
+      </section>
       <div className="settings-mobile-list">
         {availableSections.map(({ id, labelKey, iconSemantic }) => (
           <button
             key={id}
             type="button"
             className="settings-mobile-item"
+            aria-label={t(labelKey)}
             onClick={() => setNavigationState({ kind: "detail", section: id })}
           >
-            <span className="settings-mobile-item__icon">
-              <ThemedIcon semantic={iconSemantic} size={18} />
+            <span className="settings-mobile-item__icon-shell" aria-hidden="true">
+              <span className="settings-mobile-item__icon">
+                <ThemedIcon semantic={iconSemantic} size={18} />
+              </span>
+            </span>
+            <span className="settings-mobile-item__copy">
+              <span className="settings-mobile-item__label">{t(labelKey)}</span>
+              <span className="settings-mobile-item__hint">{t(getMobileSectionHintKey(id))}</span>
             </span>
-            <span className="settings-mobile-item__label">{t(labelKey)}</span>
             <ChevronRight size={16} className="settings-mobile-item__arrow" />
           </button>
         ))}

packages/web/src/features/workspace/views/mobile/mobile-workspace-drawer.test.tsx

@@ -36,6 +36,8 @@ vi.mock("../../../../lib/i18n", () => ({
         return `Switch to ${params?.name ?? ""}`;
       case "mobile.workspace_drawer.close_workspace":
         return `Close ${params?.name ?? ""}`;
+      case "worktree.current":
+        return "Current";
       case "action.close":
         return "Close";
       case "tooltip.new_workspace":

packages/web/src/features/workspace/views/mobile/mobile-workspace-drawer.tsx

@@ -99,7 +99,7 @@ export function MobileWorkspaceDrawer({
                     {isActive ? (
                       <span className="mobile-workspace-drawer__item-state">
                         <Check size={12} />
-                        <span>Current</span>
+                        <span>{t("worktree.current")}</span>
                       </span>
                     ) : null}
                   </span>

packages/web/src/features/workspace/views/mobile/workspace-mobile-view.tsx

@@ -361,6 +361,7 @@ export function WorkspaceMobileView() {
           ) : (
             <section className="mobile-shell__agent-empty" data-testid="mobile-agent-empty">
               <div className="mobile-shell__empty-content">
+                <div className="mobile-shell__empty-panel" aria-hidden="true" />
                 <EmptyState
                   className="mobile-shell__empty-state"
                   style={{ minHeight: "auto" }}
@@ -373,6 +374,13 @@ export function WorkspaceMobileView() {
                   description={
                     <div className="mobile-shell__placeholder-copy">
                       <p>{t("mobile.empty.files_terminal_hint")}</p>
+                      <div className="mobile-shell__placeholder-pills" aria-hidden="true">
+                        <span className="mobile-shell__placeholder-pill">{t("label.agent")}</span>
+                        <span className="mobile-shell__placeholder-pill">{t("file.title")}</span>
+                        <span className="mobile-shell__placeholder-pill">
+                          {t("label.terminal")}
+                        </span>
+                      </div>
                     </div>
                   }
                   action={

packages/web/src/locales/en.json

@@ -598,6 +598,7 @@
     },
     "shortcuts": {
       "title": "Keyboard Shortcuts",
+      "hint": "Review and adjust common keyboard actions",
       "reset_all": "Reset All",
       "capture_hint": "Press new shortcut combination",
       "reset_hint": "Reset to default"

packages/web/src/locales/zh.json

@@ -598,6 +598,7 @@
     },
     "shortcuts": {
       "title": "快捷键",
+      "hint": "查看并调整常用键盘操作",
       "reset_all": "重置全部",
       "capture_hint": "按下新的快捷键组合",
       "reset_hint": "重置为默认"