From 13ba7219c0cbf98b1ede11be317cf0dd111e49fb Mon Sep 17 00:00:00 2001
From: oratis <wangharp@gmail.com>
Date: Thu, 18 Jun 2026 22:17:47 +0800
Subject: [PATCH] feat(settings): redesign settings panel as a tabbed/sidebar
 layout

Restructure the single overflowing column into a macOS-style dialog with a
left category nav (Appearance / Editor / Files / Shortcuts / Advanced) and a
scrollable content pane.

- Fix the dialog overflowing the viewport: sticky header + scrollable body +
  sticky footer, capped at max-h-[88vh].
- Group the 12 settings into five labelled categories.
- Replace raw checkboxes + "On/Off" text with accessible toggle switches
  (role="switch"); move each hint to a description subtitle under the label.
- Wire the panel through new .mk-settings-* / .mk-toggle classes using --mk-*
  tokens so it tracks light/dark/sepia (the old dark: utilities silently
  missed sepia). Primary "Done" is now an accent button.
- Refit ShortcutsEditor to live inside its own tab (drop standalone title and
  top border, token-style the filter, give the list more height).
- Add catAppearance/catEditor/catFiles/catAdvanced/close i18n keys (en + zh).

Inactive tabs stay mounted (hidden) so drafted state and existing tests hold.
1005/1005 unit tests pass; tsc -b and biome clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/SettingsDialog.tsx  | 451 +++++++++++++++++++----------
 src/components/ShortcutsEditor.tsx |  14 +-
 src/index.css                      | 138 +++++++++
 src/lib/locales/en.ts              |   5 +
 src/lib/locales/zh.ts              |   5 +
 5 files changed, 448 insertions(+), 165 deletions(-)

diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index adb03ef..81f46b2 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -7,9 +7,13 @@ interface Props {
   onClose: () => void;
 }
 
+type Category = "appearance" | "editor" | "files" | "shortcuts" | "advanced";
+
 export function SettingsDialog({ onClose }: Props) {
   const t = useT();
   const [locale, setLocale] = useLocale();
+  const [tab, setTab] = useState<Category>("appearance");
+
   const fontSize = useAppStore((s) => s.fontSize);
   const proseMaxWidth = useAppStore((s) => s.proseMaxWidth);
   const autosaveMs = useAppStore((s) => s.autosaveMs);
@@ -61,6 +65,14 @@ export function SettingsDialog({ onClose }: Props) {
     setSettings(patch); // live-apply
   }
 
+  const categories: { id: Category; label: string }[] = [
+    { id: "appearance", label: t("settings.catAppearance") },
+    { id: "editor", label: t("settings.catEditor") },
+    { id: "files", label: t("settings.catFiles") },
+    { id: "shortcuts", label: t("settings.shortcuts") },
+    { id: "advanced", label: t("settings.catAdvanced") },
+  ];
+
   return (
     <div
       className="fixed inset-0 bg-black/40 flex items-center justify-center z-50"
@@ -68,182 +80,195 @@ export function SettingsDialog({ onClose }: Props) {
     >
       <div
         onClick={(e) => e.stopPropagation()}
-        className="w-[480px] max-w-[92vw] rounded-lg shadow-2xl bg-canvas-light dark:bg-canvas-dark border border-black/10 dark:border-white/15 p-5"
+        className="mk-settings w-[760px] max-w-[94vw] h-[560px] max-h-[88vh] rounded-xl overflow-hidden flex flex-col"
       >
-        <div className="text-base font-semibold mb-4">{t("settings.title")}</div>
-
-        <div className="space-y-4 text-[12px]">
-          <Row label={t("settings.fontSize")} hint={`${draft.fontSize}px`}>
-            <input
-              type="range"
-              min={11}
-              max={24}
-              value={draft.fontSize}
-              onChange={(e) => commit({ fontSize: Number(e.target.value) })}
-              className="flex-1"
-            />
-          </Row>
+        {/* Header */}
+        <div className="mk-settings-header flex items-center justify-between px-5 h-12 shrink-0">
+          <div className="mk-settings-title text-[15px] font-semibold">
+            {t("settings.title")}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t("settings.close")}
+            className="mk-icon-btn text-[13px]"
+          >
+            ✕
+          </button>
+        </div>
 
-          <Row label={t("settings.proseWidth")} hint={`${draft.proseMaxWidth}px`}>
-            <input
-              type="range"
-              min={480}
-              max={1200}
-              step={20}
-              value={draft.proseMaxWidth}
-              onChange={(e) => commit({ proseMaxWidth: Number(e.target.value) })}
-              className="flex-1"
-            />
-          </Row>
+        {/* Body: category nav + content pane */}
+        <div className="flex flex-1 min-h-0">
+          <nav className="mk-settings-nav w-[176px] shrink-0 p-2 space-y-0.5 overflow-y-auto no-scrollbar">
+            {categories.map((c) => (
+              <button
+                key={c.id}
+                type="button"
+                onClick={() => setTab(c.id)}
+                className={`mk-settings-navbtn w-full text-left px-3 py-1.5 rounded-md text-[13px] ${
+                  tab === c.id ? "is-active" : ""
+                }`}
+              >
+                {c.label}
+              </button>
+            ))}
+          </nav>
 
-          <Row
-            label={t("settings.autosaveDelay")}
-            hint={
-              draft.autosaveMs === 0
-                ? t("settings.autosaveDisabled")
-                : `${draft.autosaveMs}ms`
-            }
-          >
-            <input
-              type="range"
-              min={0}
-              max={2000}
-              step={50}
-              value={draft.autosaveMs}
-              onChange={(e) => commit({ autosaveMs: Number(e.target.value) })}
-              className="flex-1"
-            />
-          </Row>
+          <div className="flex-1 min-w-0 overflow-y-auto px-6 py-4">
+            <Panel active={tab === "appearance"} title={t("settings.catAppearance")}>
+              <SliderField label={t("settings.fontSize")} value={`${draft.fontSize}px`}>
+                <input
+                  type="range"
+                  min={11}
+                  max={24}
+                  value={draft.fontSize}
+                  onChange={(e) => commit({ fontSize: Number(e.target.value) })}
+                  className="w-full"
+                />
+              </SliderField>
 
-          <Row label={t("settings.imageDir")} hint={t("settings.imageDirHint")}>
-            <input
-              type="text"
-              value={draft.imagePasteDir}
-              onChange={(e) => commit({ imagePasteDir: e.target.value })}
-              placeholder="assets"
-              className="flex-1 px-2 py-1 rounded border border-black/10 dark:border-white/20 bg-transparent outline-none focus:border-blue-500"
-            />
-          </Row>
+              <SliderField
+                label={t("settings.proseWidth")}
+                value={`${draft.proseMaxWidth}px`}
+              >
+                <input
+                  type="range"
+                  min={480}
+                  max={1200}
+                  step={20}
+                  value={draft.proseMaxWidth}
+                  onChange={(e) => commit({ proseMaxWidth: Number(e.target.value) })}
+                  className="w-full"
+                />
+              </SliderField>
 
-          <Row label={t("settings.locale")}>
-            <select
-              value={locale}
-              onChange={(e) => setLocale(e.target.value as Locale)}
-              className="flex-1 px-2 py-1 rounded border border-black/10 dark:border-white/20 bg-transparent outline-none focus:border-blue-500"
-            >
-              <option value="auto">Auto (system)</option>
-              <option value="en">English</option>
-              <option value="zh">中文</option>
-            </select>
-          </Row>
+              <RowField label={t("settings.locale")}>
+                <select
+                  value={locale}
+                  onChange={(e) => setLocale(e.target.value as Locale)}
+                  className="mk-settings-select w-[180px] px-2 py-1 text-[12px]"
+                >
+                  <option value="auto">Auto (system)</option>
+                  <option value="en">English</option>
+                  <option value="zh">中文</option>
+                </select>
+              </RowField>
 
-          <Row label={t("settings.exportTheme")}>
-            <select
-              value={draft.exportTheme}
-              onChange={(e) =>
-                commit({
-                  exportTheme: e.target.value as Settings["exportTheme"],
-                })
-              }
-              className="flex-1 px-2 py-1 rounded border border-black/10 dark:border-white/20 bg-transparent outline-none focus:border-blue-500"
-            >
-              <option value="github">GitHub</option>
-              <option value="plain">Plain (serif)</option>
-              <option value="tufte">Tufte</option>
-            </select>
-          </Row>
+              <RowField label={t("settings.exportTheme")}>
+                <select
+                  value={draft.exportTheme}
+                  onChange={(e) =>
+                    commit({ exportTheme: e.target.value as Settings["exportTheme"] })
+                  }
+                  className="mk-settings-select w-[180px] px-2 py-1 text-[12px]"
+                >
+                  <option value="github">GitHub</option>
+                  <option value="plain">Plain (serif)</option>
+                  <option value="tufte">Tufte</option>
+                </select>
+              </RowField>
+            </Panel>
 
-          <Row label={t("settings.spellcheck")} hint={t("settings.spellcheckHint")}>
-            <label className="flex items-center gap-2 cursor-pointer select-none">
-              <input
-                type="checkbox"
+            <Panel active={tab === "editor"} title={t("settings.catEditor")}>
+              <ToggleField
+                label={t("settings.spellcheck")}
+                desc={t("settings.spellcheckHint")}
                 checked={draft.spellcheck}
-                onChange={(e) => commit({ spellcheck: e.target.checked })}
+                onChange={(v) => commit({ spellcheck: v })}
               />
-              <span className="opacity-70">
-                {draft.spellcheck ? t("settings.on") : t("settings.off")}
-              </span>
-            </label>
-          </Row>
-
-          <Row label={t("settings.lineWrap")} hint={t("settings.lineWrapHint")}>
-            <label className="flex items-center gap-2 cursor-pointer select-none">
-              <input
-                type="checkbox"
+              <ToggleField
+                label={t("settings.lineWrap")}
+                desc={t("settings.lineWrapHint")}
                 checked={draft.lineWrap}
-                onChange={(e) => commit({ lineWrap: e.target.checked })}
+                onChange={(v) => commit({ lineWrap: v })}
+              />
+              <ToggleField
+                label={t("settings.lineNumbers")}
+                desc={t("settings.lineNumbersHint")}
+                checked={draft.showLineNumbers}
+                onChange={(v) => commit({ showLineNumbers: v })}
               />
-              <span className="opacity-70">
-                {draft.lineWrap ? t("settings.on") : t("settings.off")}
-              </span>
-            </label>
-          </Row>
+            </Panel>
 
-          <Row label={t("settings.saveOnBlur")} hint={t("settings.saveOnBlurHint")}>
-            <label className="flex items-center gap-2 cursor-pointer select-none">
-              <input
-                type="checkbox"
+            <Panel active={tab === "files"} title={t("settings.catFiles")}>
+              <SliderField
+                label={t("settings.autosaveDelay")}
+                value={
+                  draft.autosaveMs === 0
+                    ? t("settings.autosaveDisabled")
+                    : `${draft.autosaveMs}ms`
+                }
+              >
+                <input
+                  type="range"
+                  min={0}
+                  max={2000}
+                  step={50}
+                  value={draft.autosaveMs}
+                  onChange={(e) => commit({ autosaveMs: Number(e.target.value) })}
+                  className="w-full"
+                />
+              </SliderField>
+
+              <ToggleField
+                label={t("settings.saveOnBlur")}
+                desc={t("settings.saveOnBlurHint")}
                 checked={draft.saveOnBlur}
-                onChange={(e) => commit({ saveOnBlur: e.target.checked })}
+                onChange={(v) => commit({ saveOnBlur: v })}
               />
-              <span className="opacity-70">
-                {draft.saveOnBlur ? t("settings.on") : t("settings.off")}
-              </span>
-            </label>
-          </Row>
-
-          <Row label={t("settings.trimOnSave")} hint={t("settings.trimOnSaveHint")}>
-            <label className="flex items-center gap-2 cursor-pointer select-none">
-              <input
-                type="checkbox"
+              <ToggleField
+                label={t("settings.trimOnSave")}
+                desc={t("settings.trimOnSaveHint")}
                 checked={draft.trimOnSave}
-                onChange={(e) => commit({ trimOnSave: e.target.checked })}
+                onChange={(v) => commit({ trimOnSave: v })}
               />
-              <span className="opacity-70">
-                {draft.trimOnSave ? t("settings.on") : t("settings.off")}
-              </span>
-            </label>
-          </Row>
 
-          <Row label={t("settings.lineNumbers")} hint={t("settings.lineNumbersHint")}>
-            <label className="flex items-center gap-2 cursor-pointer select-none">
-              <input
-                type="checkbox"
-                checked={draft.showLineNumbers}
-                onChange={(e) => commit({ showLineNumbers: e.target.checked })}
-              />
-              <span className="opacity-70">
-                {draft.showLineNumbers ? t("settings.on") : t("settings.off")}
-              </span>
-            </label>
-          </Row>
+              <RowField label={t("settings.imageDir")} desc={t("settings.imageDirHint")}>
+                <input
+                  type="text"
+                  value={draft.imagePasteDir}
+                  onChange={(e) => commit({ imagePasteDir: e.target.value })}
+                  placeholder="assets"
+                  className="mk-settings-input w-[180px] px-2 py-1 text-[12px]"
+                />
+              </RowField>
+            </Panel>
 
-          <Row label={t("settings.customCss")} hint={t("settings.customCssHint")}>
-            <textarea
-              value={draft.customCss}
-              onChange={(e) => commit({ customCss: e.target.value })}
-              placeholder=".milkdown .editor h1 { color: teal; }"
-              spellCheck={false}
-              rows={4}
-              className="flex-1 px-2 py-1 rounded border border-black/10 dark:border-white/20 bg-transparent outline-none focus:border-blue-500 font-mono text-[11px] resize-y"
-            />
-          </Row>
-        </div>
+            <Panel active={tab === "shortcuts"} title={t("settings.shortcuts")}>
+              <ShortcutsEditor />
+            </Panel>
 
-        <ShortcutsEditor />
+            <Panel active={tab === "advanced"} title={t("settings.catAdvanced")}>
+              <StackField
+                label={t("settings.customCss")}
+                desc={t("settings.customCssHint")}
+              >
+                <textarea
+                  value={draft.customCss}
+                  onChange={(e) => commit({ customCss: e.target.value })}
+                  placeholder=".milkdown .editor h1 { color: teal; }"
+                  spellCheck={false}
+                  rows={6}
+                  className="mk-settings-textarea w-full px-2 py-2 font-mono text-[11px] resize-y"
+                />
+              </StackField>
+            </Panel>
+          </div>
+        </div>
 
-        <div className="mt-6 flex items-center justify-between text-[11px]">
+        {/* Footer */}
+        <div className="mk-settings-footer flex items-center justify-between px-5 h-14 shrink-0">
           <button
-            onClick={() => {
-              commit(DEFAULT_SETTINGS);
-            }}
-            className="opacity-70 hover:opacity-100 underline"
+            type="button"
+            onClick={() => commit(DEFAULT_SETTINGS)}
+            className="mk-settings-desc text-[12px] hover:underline"
           >
             {t("settings.restore")}
           </button>
           <button
+            type="button"
             onClick={onClose}
-            className="px-3 py-1 rounded border border-black/10 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/10"
+            className="mk-settings-done px-4 py-1.5 rounded-md text-[13px] font-medium"
           >
             {t("settings.done")}
           </button>
@@ -253,22 +278,130 @@ export function SettingsDialog({ onClose }: Props) {
   );
 }
 
-function Row({
+/** A category's content. All panels stay mounted; inactive ones are hidden so
+ *  drafted state (and tests that query across categories) keep working. */
+function Panel({
+  active,
+  title,
+  children,
+}: {
+  active: boolean;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={active ? "" : "hidden"}>
+      <h2 className="mk-settings-title text-[14px] font-semibold mb-3">{title}</h2>
+      {children}
+    </div>
+  );
+}
+
+function LabelBlock({ label, desc }: { label: string; desc?: string }) {
+  return (
+    <div className="min-w-0 pr-4">
+      <div className="mk-settings-label text-[13px] leading-tight">{label}</div>
+      {desc && (
+        <div className="mk-settings-desc text-[11px] leading-snug mt-0.5">{desc}</div>
+      )}
+    </div>
+  );
+}
+
+/** Label (+ optional description) on the left, control on the right. */
+function RowField({
   label,
-  hint,
+  desc,
   children,
 }: {
   label: string;
-  hint?: string;
+  desc?: string;
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex items-center gap-3">
-      <div className="w-[120px] shrink-0 opacity-80">{label}</div>
-      <div className="flex-1 flex items-center gap-3">{children}</div>
-      {hint && (
-        <div className="shrink-0 text-[11px] opacity-60 w-[80px] text-right">{hint}</div>
-      )}
+    <div className="mk-settings-row flex items-center justify-between gap-3 py-3">
+      <LabelBlock label={label} desc={desc} />
+      <div className="shrink-0">{children}</div>
     </div>
   );
 }
+
+/** Label + live value header with a full-width slider beneath. */
+function SliderField({
+  label,
+  value,
+  children,
+}: {
+  label: string;
+  value: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="mk-settings-row py-3">
+      <div className="flex items-center justify-between gap-3 mb-2">
+        <div className="mk-settings-label text-[13px]">{label}</div>
+        <div className="mk-settings-desc text-[11px] tabular-nums">{value}</div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/** Label (+ optional description) stacked above a full-width control. */
+function StackField({
+  label,
+  desc,
+  children,
+}: {
+  label: string;
+  desc?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="mk-settings-row py-3">
+      <LabelBlock label={label} desc={desc} />
+      <div className="mt-2">{children}</div>
+    </div>
+  );
+}
+
+function ToggleField({
+  label,
+  desc,
+  checked,
+  onChange,
+}: {
+  label: string;
+  desc?: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <RowField label={label} desc={desc}>
+      <Toggle checked={checked} onChange={onChange} label={label} />
+    </RowField>
+  );
+}
+
+function Toggle({
+  checked,
+  onChange,
+  label,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      onClick={() => onChange(!checked)}
+      className={`mk-toggle ${checked ? "is-on" : ""}`}
+    >
+      <span className="mk-toggle-thumb" />
+    </button>
+  );
+}
diff --git a/src/components/ShortcutsEditor.tsx b/src/components/ShortcutsEditor.tsx
index ff72db7..f35272c 100644
--- a/src/components/ShortcutsEditor.tsx
+++ b/src/components/ShortcutsEditor.tsx
@@ -76,17 +76,18 @@ export function ShortcutsEditor() {
   }
 
   return (
-    <div className="border-t border-black/5 dark:border-white/10 pt-4 mt-4">
-      <div className="text-[12px] font-medium mb-1">{t("settings.shortcuts")}</div>
-      <div className="text-[10px] opacity-60 mb-2">{t("settings.shortcutsHint")}</div>
+    <div>
+      <div className="mk-settings-desc text-[11px] mb-2">
+        {t("settings.shortcutsHint")}
+      </div>
       <input
         type="text"
         value={filter}
         onChange={(e) => setFilter(e.target.value)}
         placeholder={t("settings.shortcutsFilter")}
-        className="w-full text-[12px] px-2 py-1 mb-2 rounded border border-black/10 dark:border-white/15 bg-transparent outline-none focus:border-blue-500"
+        className="mk-settings-input w-full text-[12px] px-2 py-1 mb-2"
       />
-      <div className="space-y-0.5 max-h-[260px] overflow-auto no-scrollbar text-[12px]">
+      <div className="space-y-0.5 max-h-[340px] overflow-auto no-scrollbar text-[12px]">
         {visibleIds.length === 0 && (
           <div className="text-[11px] opacity-50 py-1">
             {t("settings.shortcutsNoMatch")}
@@ -141,8 +142,9 @@ export function ShortcutsEditor() {
         })}
       </div>
       <button
+        type="button"
         onClick={resetAll}
-        className="mt-2 text-[11px] opacity-70 hover:opacity-100 underline"
+        className="mk-settings-desc mt-3 text-[11px] hover:underline"
       >
         {t("settings.shortcutsReset")}
       </button>
diff --git a/src/index.css b/src/index.css
index 4bd082a..532c01a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1110,3 +1110,141 @@ div.flex.items-stretch.border-b > .titlebar-no-drag.relative:hover {
 .mk-pager-arrow {
   opacity: 0.6;
 }
+
+/* ============================================================
+   Settings dialog — tabbed / sidebar layout
+   Surface, category nav, setting rows, controls, and the toggle
+   switch, all wired to --mk-* tokens so the panel tracks the
+   light / dark / sepia themes (not the Tailwind `dark:` class,
+   which never fires under `html.theme-sepia`).
+   ============================================================ */
+.mk-settings {
+  background: var(--mk-bg-app);
+  border: 1px solid var(--mk-border-strong);
+  box-shadow: var(--mk-shadow);
+  color: var(--mk-fg-default);
+}
+
+.mk-settings-header {
+  background: var(--mk-bg-sidebar);
+  border-bottom: 1px solid var(--mk-border);
+}
+.mk-settings-title {
+  color: var(--mk-fg-strong);
+  letter-spacing: -0.01em;
+}
+
+/* Category nav (left rail) */
+.mk-settings-nav {
+  background: var(--mk-bg-sidebar);
+  border-right: 1px solid var(--mk-border);
+}
+.mk-settings-navbtn {
+  background: transparent;
+  border: 0;
+  color: var(--mk-fg-muted);
+  cursor: pointer;
+  transition:
+    background 80ms,
+    color 80ms;
+}
+.mk-settings-navbtn:hover {
+  background: var(--mk-bg-hover);
+  color: var(--mk-fg-default);
+}
+.mk-settings-navbtn.is-active {
+  background: var(--mk-bg-selected);
+  color: var(--mk-fg-strong);
+  font-weight: 500;
+}
+
+/* Setting rows — hairline divider, last row flush */
+.mk-settings-row {
+  border-bottom: 1px solid var(--mk-border);
+}
+.mk-settings-row:last-child {
+  border-bottom: 0;
+}
+.mk-settings-label {
+  color: var(--mk-fg-strong);
+}
+.mk-settings-desc {
+  color: var(--mk-fg-muted);
+}
+
+/* Text / select / textarea controls */
+.mk-settings-input,
+.mk-settings-select,
+.mk-settings-textarea {
+  background: transparent;
+  border: 1px solid var(--mk-border-strong);
+  border-radius: 6px;
+  color: var(--mk-fg-default);
+  outline: none;
+  transition:
+    border-color 100ms,
+    box-shadow 100ms;
+}
+.mk-settings-input:focus,
+.mk-settings-select:focus,
+.mk-settings-textarea:focus {
+  border-color: var(--mk-accent);
+  box-shadow: 0 0 0 3px var(--mk-accent-soft);
+}
+.mk-settings input[type="range"] {
+  accent-color: var(--mk-accent);
+}
+
+/* Footer */
+.mk-settings-footer {
+  background: var(--mk-bg-sidebar);
+  border-top: 1px solid var(--mk-border);
+}
+.mk-settings-done {
+  background: var(--mk-accent);
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  transition: filter 100ms;
+}
+.mk-settings-done:hover {
+  filter: brightness(1.08);
+}
+.mk-settings-done:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+/* Toggle switch (replaces the old checkbox + "On/Off" label) */
+.mk-toggle {
+  position: relative;
+  width: 34px;
+  height: 20px;
+  flex: none;
+  border: 0;
+  border-radius: 999px;
+  background: var(--mk-border-strong);
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.mk-toggle.is-on {
+  background: var(--mk-accent);
+}
+.mk-toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  transition: transform 120ms ease;
+}
+.mk-toggle.is-on .mk-toggle-thumb {
+  transform: translateX(14px);
+}
+.mk-toggle:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
diff --git a/src/lib/locales/en.ts b/src/lib/locales/en.ts
index 84e975a..4177205 100644
--- a/src/lib/locales/en.ts
+++ b/src/lib/locales/en.ts
@@ -30,6 +30,11 @@ export const en = {
 
   // dialogs
   "settings.title": "Settings",
+  "settings.close": "Close",
+  "settings.catAppearance": "Appearance",
+  "settings.catEditor": "Editor",
+  "settings.catFiles": "Files",
+  "settings.catAdvanced": "Advanced",
   "settings.fontSize": "Font size",
   "settings.proseWidth": "Prose width",
   "settings.autosaveDelay": "Autosave delay",
diff --git a/src/lib/locales/zh.ts b/src/lib/locales/zh.ts
index f54c4e7..3f97872 100644
--- a/src/lib/locales/zh.ts
+++ b/src/lib/locales/zh.ts
@@ -32,6 +32,11 @@ export const zh: Strings = {
 
   // dialogs
   "settings.title": "设置",
+  "settings.close": "关闭",
+  "settings.catAppearance": "外观",
+  "settings.catEditor": "编辑器",
+  "settings.catFiles": "文件",
+  "settings.catAdvanced": "高级",
   "settings.fontSize": "字体大小",
   "settings.proseWidth": "正文宽度",
   "settings.autosaveDelay": "自动保存延迟",