Refine settings IA with tabbed sections

Split Settings into tabbed sections while preserving draft state, improve mobile Settings nav/touch targets, and update dashboard UX coverage for the Codex tab.

apps/dashboard/src/SettingsPanelChrome.tsx

@@ -0,0 +1,140 @@
+import { LOCALES, languageNames, type Locale, type Messages } from './i18n';
+
+export const SETTINGS_NAV_ITEMS = [
+  { targetId: 'settings-general', title: '일반', detail: '표시 · 언어' },
+  {
+    targetId: 'settings-models',
+    title: '모델',
+    detail: 'owner · reviewer · arbiter',
+  },
+  { targetId: 'settings-moa', title: 'MoA', detail: '참조 모델 · 연결 테스트' },
+  { targetId: 'settings-codex', title: 'Codex', detail: 'fast mode · /goal' },
+  { targetId: 'settings-accounts', title: '계정', detail: 'Claude · Codex' },
+] as const;
+
+export type SettingsSectionId = (typeof SETTINGS_NAV_ITEMS)[number]['targetId'];
+
+export function SettingsNav({
+  activeSection,
+  onSelect,
+}: {
+  activeSection: SettingsSectionId;
+  onSelect: (section: SettingsSectionId) => void;
+}) {
+  return (
+    <div className="settings-nav" aria-label="설정 섹션" role="tablist">
+      {SETTINGS_NAV_ITEMS.map((item) => (
+        <button
+          aria-controls={item.targetId}
+          aria-selected={activeSection === item.targetId}
+          data-settings-target={item.targetId}
+          id={`${item.targetId}-tab`}
+          key={item.targetId}
+          onClick={() => onSelect(item.targetId)}
+          role="tab"
+          type="button"
+        >
+          <strong>{item.title}</strong>
+          <small>{item.detail}</small>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function GeneralSettings({
+  locale,
+  nickname,
+  onLocaleChange,
+  onNicknameChange,
+  t,
+}: {
+  locale: Locale;
+  nickname: string;
+  onLocaleChange: (locale: Locale) => void;
+  onNicknameChange: (next: string) => void;
+  t: Messages;
+}) {
+  return (
+    <section
+      aria-labelledby="settings-general-tab"
+      className="settings-section"
+      id="settings-general"
+      role="tabpanel"
+    >
+      <SettingsSectionHeading
+        detail="Dashboard identity"
+        title="일반"
+        description="브라우저에서 보이는 이름과 언어만 즉시 바뀝니다."
+      />
+      <div className="settings-form-grid">
+        <label className="settings-row">
+          <span className="settings-label">{t.settings.nicknameLabel}</span>
+          <input
+            maxLength={32}
+            onChange={(event) => onNicknameChange(event.target.value)}
+            placeholder={t.settings.nicknamePlaceholder}
+            type="text"
+            value={nickname}
+          />
+          <small className="settings-hint">{t.settings.nicknameHelp}</small>
+        </label>
+        <label className="settings-row">
+          <span className="settings-label">{t.settings.languageLabel}</span>
+          <select
+            aria-label={t.settings.languageLabel}
+            onChange={(event) => onLocaleChange(event.target.value as Locale)}
+            value={locale}
+          >
+            {LOCALES.map((item) => (
+              <option key={item} value={item}>
+                {languageNames[item]}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+    </section>
+  );
+}
+
+export function SettingsSectionHeading({
+  detail,
+  title,
+  description,
+}: {
+  detail: string;
+  title: string;
+  description: string;
+}) {
+  return (
+    <header className="settings-section-head">
+      <span>{detail}</span>
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </header>
+  );
+}
+
+export function SettingsApplyCard({
+  onRestartStack,
+}: {
+  onRestartStack: () => void;
+}) {
+  return (
+    <section className="settings-apply-card" aria-label="변경 적용">
+      <div>
+        <span className="settings-kicker">Apply</span>
+        <strong>저장 후 재시작</strong>
+        <small>모델, MoA, Codex, 계정 변경은 스택 재시작 후 반영됩니다.</small>
+      </div>
+      <button
+        className="settings-restart"
+        onClick={onRestartStack}
+        type="button"
+      >
+        스택 재시작
+      </button>
+    </section>
+  );
+}