添加设置页面

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed, ref, watch, onMounted, onUnmounted} from "vue";
-import {listen} from "@tauri-apps/api/event";
+import {listen, type EventCallback, type EventName} from "@tauri-apps/api/event";
-import {invoke} from "@tauri-apps/api/core";
+import {invoke, isTauri} from "@tauri-apps/api/core";
 import MarkdownEditor from "./components/MarkdownEditor.vue";
 import DirectorySidebar from "./components/DirectorySidebar.vue";
 import OutlinePanel from "./components/OutlinePanel.vue";
@@ -11,6 +11,27 @@ const wordCount = ref(0);
 const charCount = ref(0);
 
 type DocumentMode = "preview" | "edit" | "mixed";
+const DEFAULT_DOCUMENT_MODE_KEY = "yurou:default-document-mode";
+
+function isDocumentMode(value: string | null): value is DocumentMode {
+  return value === "preview" || value === "edit" || value === "mixed";
+}
+
+function loadDefaultDocumentMode(): DocumentMode {
+  try {
+    const stored = localStorage.getItem(DEFAULT_DOCUMENT_MODE_KEY);
+    if (isDocumentMode(stored)) return stored;
+  } catch { /* localStorage unavailable */
+  }
+  return "edit";
+}
+
+function saveDefaultDocumentMode(mode: DocumentMode) {
+  try {
+    localStorage.setItem(DEFAULT_DOCUMENT_MODE_KEY, mode);
+  } catch { /* noop */
+  }
+}
 
 // File state
 const currentFilePath = ref<string | null>(null);
@@ -81,13 +102,31 @@ function onEditorWheel(e: WheelEvent) {
 
 // ---- toolbar state ----
 const showOutline = ref(false);
-const documentMode = ref<DocumentMode>("edit");
+const defaultDocumentMode = ref<DocumentMode>(loadDefaultDocumentMode());
+const documentMode = ref<DocumentMode>(defaultDocumentMode.value);
 const showMoreMenu = ref(false);
+const settingsRequest = ref(0);
+const settingsInitialPage = ref<"about" | "editor">("about");
 const markdownEditorRef = ref<{ flushPendingChanges: () => string | undefined } | null>(null);
 const showStartActions = computed(() => {
   return !folderPath.value && !currentFilePath.value && !hasDraftDocument.value;
 });
 
+function openSettings(page: "about" | "editor" = "about") {
+  settingsInitialPage.value = page;
+  settingsRequest.value += 1;
+}
+
+function setDocumentMode(mode: DocumentMode) {
+  documentMode.value = mode;
+}
+
+function updateDefaultDocumentMode(mode: DocumentMode) {
+  defaultDocumentMode.value = mode;
+  documentMode.value = mode;
+  saveDefaultDocumentMode(mode);
+}
+
 function handleExportPdf() {
   showMoreMenu.value = false;
   // TODO: implement PDF export
@@ -162,7 +201,7 @@ function resetMarkdownEditorState() {
   hasDraftDocument.value = false;
   saveStatus.value = "";
   showOutline.value = false;
-  documentMode.value = "edit";
+  documentMode.value = defaultDocumentMode.value;
   showMoreMenu.value = false;
   editorResetKey.value += 1;
 }
@@ -345,27 +384,40 @@ function doNew() {
   currentFilePath.value = null;
   hasDraftDocument.value = true;
   saveStatus.value = "";
+  documentMode.value = defaultDocumentMode.value;
   editorResetKey.value += 1;
 }
 
+function registerTauriListener<T>(eventName: EventName, handler: EventCallback<T>) {
+  if (!isTauri()) return;
+
+  void listen<T>(eventName, handler).catch((error) => {
+    console.error(`Failed to listen for ${eventName}:`, error);
+  });
+}
+
 // Listen for menu events from Rust
-listen<string>("folder-opened", (event) => {
+registerTauriListener<string>("folder-opened", (event) => {
   void switchWorkspace(event.payload);
 });
 
-listen("menu-save", () => {
+registerTauriListener("menu-save", () => {
   doSave();
 });
 
-listen("menu-save-as", () => {
+registerTauriListener("menu-save-as", () => {
   doSaveAs();
 });
 
-listen("menu-new", () => {
+registerTauriListener("menu-new", () => {
   doNew();
 });
 
-listen("menu-event", (event) => {
+registerTauriListener("show-about", () => {
+  openSettings("about");
+});
+
+registerTauriListener("menu-event", (event) => {
   console.log("Menu event:", event.payload);
 });
 </script>
@@ -379,9 +431,13 @@ listen("menu-event", (event) => {
           :folder-path="folderPath"
           :entries="dirEntries"
           :current-file-path="currentFilePath"
+          :settings-request="settingsRequest"
+          :settings-initial-page="settingsInitialPage"
+          :default-document-mode="defaultDocumentMode"
           @open-folder="onOpenFolder"
           @toggle-folder="onToggleFolder"
           @open-file="onOpenFile"
+          @update-default-document-mode="updateDefaultDocumentMode"
       />
 
       <!-- Right: Editor area -->
@@ -414,7 +470,7 @@ listen("menu-event", (event) => {
                   class="mode-toggle-btn"
                   :class="{ 'mode-toggle-btn-active': documentMode === 'preview' }"
                   title="预览模式"
-                  @click="documentMode = 'preview'"
+                  @click="setDocumentMode('preview')"
               >
                 预览
               </button>
@@ -422,7 +478,7 @@ listen("menu-event", (event) => {
                   class="mode-toggle-btn"
                   :class="{ 'mode-toggle-btn-active': documentMode === 'edit' }"
                   title="编辑模式"
-                  @click="documentMode = 'edit'"
+                  @click="setDocumentMode('edit')"
               >
                 编辑
               </button>
@@ -430,7 +486,7 @@ listen("menu-event", (event) => {
                   class="mode-toggle-btn"
                   :class="{ 'mode-toggle-btn-active': documentMode === 'mixed' }"
                   title="混合模式"
-                  @click="documentMode = 'mixed'"
+                  @click="setDocumentMode('mixed')"
               >
                 混合
               </button>
@@ -481,7 +537,7 @@ listen("menu-event", (event) => {
               ref="markdownEditorRef"
               :model-value="content"
               :document-mode="documentMode"
-              placeholder="输入 Markdown 内容... 支持标题、粗体、斜体、代码块等 ✨"
+              placeholder="输入 Markdown 内容... 支持标题、粗体、斜体、代码块等"
               @update:model-value="onUpdate"
               @save-shortcut="doSave"
               class="flex-1 w-full min-w-0"

src/components/DirectorySidebar.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import {ref, computed} from "vue";
+import {ref, computed, watch} from "vue";
+import SettingsModal from "./SettingsModal.vue";
 import TreeEntry from "./TreeEntry.vue";
 
+type SettingsPage = "about" | "editor";
+type DocumentMode = "preview" | "edit" | "mixed";
+
 interface DirEntry {
   name: string;
   path: string;
@@ -14,9 +18,15 @@ const props = withDefaults(
       folderPath: string;
       entries: DirEntry[];
       currentFilePath?: string | null;
+      settingsRequest?: number;
+      settingsInitialPage?: SettingsPage;
+      defaultDocumentMode?: DocumentMode;
     }>(),
     {
       currentFilePath: null,
+      settingsRequest: 0,
+      settingsInitialPage: "about",
+      defaultDocumentMode: "edit",
     },
 );
 
@@ -26,6 +36,7 @@ const emit = defineEmits<{
   openFile: [path: string];
   createFile: [];
   createFolder: [];
+  updateDefaultDocumentMode: [mode: DocumentMode];
 }>();
 
 // Wrap the workspace root as a top-level tree node
@@ -56,6 +67,17 @@ function switchView(view: ViewMode) {
 
 // ---- settings modal ----
 const showSettings = ref(false);
+const settingsPage = ref<SettingsPage>("about");
+
+watch(() => props.settingsRequest, (request) => {
+  if (request <= 0) return;
+  openSettings(props.settingsInitialPage);
+});
+
+function openSettings(page: SettingsPage) {
+  settingsPage.value = page;
+  showSettings.value = true;
+}
 </script>
 
 <template>
@@ -85,9 +107,9 @@ const showSettings = ref(false);
       <!-- ===== Settings ===== -->
       <button
           class="px-2 py-1 cursor-pointer rounded-md transition-colors mt-auto"
-          :class="activeView === 'setting' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
+          :class="showSettings ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
           title="设置"
-          @click="showSettings = true"
+          @click="openSettings('about')"
       >
         <i class="ri-settings-line text-sm"></i>
       </button>
@@ -147,26 +169,10 @@ const showSettings = ref(false);
     </div>
   </aside>
 
-  <!-- ===== SETTINGS MODAL ===== -->
+  <SettingsModal
-  <Teleport to="body">
+      v-model:show="showSettings"
-    <div
+      :initial-page="settingsPage"
-        v-if="showSettings"
+      :default-document-mode="defaultDocumentMode"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-[#38342e]/25 backdrop-blur-sm"
+      @update-default-document-mode="(mode: DocumentMode) => emit('updateDefaultDocumentMode', mode)"
-        @click.self="showSettings = false"
+  />
-    >
-      <div class="bg-white border border-[#e0dbcf] rounded-xl shadow-2xl w-80 max-h-[70vh] overflow-y-auto">
-        <div class="flex items-center justify-between px-4 py-3 border-b border-[#e8e4da]">
-          <span class="text-sm font-semibold text-[#38342e]">设置</span>
-          <button
-              class="p-1 rounded-md text-[#8c877d] hover:text-[#38342e] hover:bg-[#e0dbcf] transition-colors"
-              @click="showSettings = false"
-          >
-            <i class="ri-close-line text-base"></i>
-          </button>
-        </div>
-        <div class="px-4 py-6 space-y-5">
-        </div>
-      </div>
-    </div>
-  </Teleport>
 </template>

src/components/SettingsModal.vue

@@ -0,0 +1,632 @@
+<script setup lang="ts">
+import { getVersion } from "@tauri-apps/api/app";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+
+type SettingsPage = "about" | "editor";
+type DocumentMode = "preview" | "edit" | "mixed";
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean;
+    initialPage?: SettingsPage;
+    defaultDocumentMode?: DocumentMode;
+  }>(),
+  {
+    initialPage: "about",
+    defaultDocumentMode: "edit",
+  },
+);
+
+const emit = defineEmits<{
+  "update:show": [value: boolean];
+  updateDefaultDocumentMode: [mode: DocumentMode];
+}>();
+
+const APP_NAME = "yurou";
+const FALLBACK_VERSION = "0.1.0";
+const AUTO_UPDATE_KEY = "yurou:auto-update";
+const LANGUAGE_KEY = "yurou:language";
+
+const activePage = ref<SettingsPage>(props.initialPage);
+const appVersion = ref(FALLBACK_VERSION);
+const autoUpdate = ref(loadBooleanPref(AUTO_UPDATE_KEY, true));
+const language = ref(loadStringPref(LANGUAGE_KEY, "zh-Hans"));
+const updateStatus = ref("");
+let updateStatusTimer: ReturnType<typeof setTimeout> | null = null;
+
+const pageTitle = computed(() => (activePage.value === "about" ? "关于" : "编辑器"));
+
+const menuItems: Array<{
+  id: SettingsPage;
+  label: string;
+  icon: string;
+}> = [
+  { id: "about", label: "关于", icon: "ri-information-line" },
+  { id: "editor", label: "编辑器", icon: "ri-edit-2-line" },
+];
+
+const documentModeOptions: Array<{
+  value: DocumentMode;
+  label: string;
+}> = [
+  { value: "preview", label: "预览" },
+  { value: "edit", label: "编辑" },
+  { value: "mixed", label: "混合" },
+];
+
+function loadBooleanPref(key: string, fallback: boolean) {
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored === "true") return true;
+    if (stored === "false") return false;
+  } catch {
+    // localStorage may be unavailable in restricted environments.
+  }
+  return fallback;
+}
+
+function loadStringPref(key: string, fallback: string) {
+  try {
+    return localStorage.getItem(key) || fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function savePref(key: string, value: string) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // noop
+  }
+}
+
+function close() {
+  emit("update:show", false);
+}
+
+function onOverlayKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") close();
+}
+
+async function loadAppVersion() {
+  try {
+    appVersion.value = await getVersion();
+  } catch {
+    appVersion.value = FALLBACK_VERSION;
+  }
+}
+
+function checkForUpdates() {
+  updateStatus.value = "当前已是最新版本";
+  if (updateStatusTimer) clearTimeout(updateStatusTimer);
+  updateStatusTimer = setTimeout(() => {
+    updateStatus.value = "";
+  }, 2400);
+}
+
+function openReleaseNotes() {
+  window.open("https://gitea.cirry.cn/cirry/yurou/releases", "_blank", "noopener,noreferrer");
+}
+
+function openHelp() {
+  window.open("https://gitea.cirry.cn/cirry/yurou", "_blank", "noopener,noreferrer");
+}
+
+function onDefaultDocumentModeChange(event: Event) {
+  const mode = (event.target as HTMLSelectElement).value as DocumentMode;
+  emit("updateDefaultDocumentMode", mode);
+}
+
+watch(
+  () => props.show,
+  (show) => {
+    if (!show) return;
+    activePage.value = props.initialPage;
+    updateStatus.value = "";
+    void loadAppVersion();
+  },
+);
+
+watch(
+  () => props.initialPage,
+  (page) => {
+    if (props.show) activePage.value = page;
+  },
+);
+
+watch(autoUpdate, (value) => {
+  savePref(AUTO_UPDATE_KEY, String(value));
+});
+
+watch(language, (value) => {
+  savePref(LANGUAGE_KEY, value);
+});
+
+onBeforeUnmount(() => {
+  if (updateStatusTimer) clearTimeout(updateStatusTimer);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="settings-overlay"
+      role="presentation"
+      @click.self="close"
+      @keydown="onOverlayKeydown"
+    >
+      <section
+        class="settings-shell"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="`设置 - ${pageTitle}`"
+      >
+        <aside class="settings-menu" aria-label="设置菜单">
+          <div class="settings-menu-title">设置</div>
+          <button
+            v-for="item in menuItems"
+            :key="item.id"
+            class="settings-menu-item"
+            :class="{ 'settings-menu-item-active': activePage === item.id }"
+            type="button"
+            @click="activePage = item.id"
+          >
+            <i :class="[item.icon, 'text-base']"></i>
+            <span>{{ item.label }}</span>
+          </button>
+        </aside>
+
+        <div class="settings-main">
+          <header class="settings-header">
+            <h2>{{ pageTitle }}</h2>
+            <button class="settings-close-btn" type="button" title="关闭设置" @click="close">
+              <i class="ri-close-line text-lg"></i>
+            </button>
+          </header>
+
+          <div v-if="activePage === 'about'" class="settings-content">
+            <section class="settings-about-card" aria-label="关于 yurou">
+              <div class="settings-row settings-row-top">
+                <div class="settings-copy">
+                  <h3>版本 {{ appVersion }}</h3>
+                  <p>安装程序版本: {{ appVersion }}</p>
+                  <button class="settings-link" type="button" @click="openReleaseNotes">
+                    阅读更新日志
+                  </button>
+                </div>
+                <div class="settings-action-stack">
+                  <button class="settings-primary-btn" type="button" @click="checkForUpdates">
+                    检查更新
+                  </button>
+                  <span v-if="updateStatus" class="settings-status">{{ updateStatus }}</span>
+                </div>
+              </div>
+
+              <div class="settings-row">
+                <div class="settings-copy">
+                  <h3>自动更新</h3>
+                  <p>关闭后 {{ APP_NAME }} 将不会自动更新。</p>
+                </div>
+                <label class="settings-switch" title="自动更新">
+                  <input v-model="autoUpdate" type="checkbox" />
+                  <span></span>
+                </label>
+              </div>
+
+              <div class="settings-row">
+                <div class="settings-copy">
+                  <h3>语言</h3>
+                  <p>更改界面语言。</p>
+                  <button class="settings-link" type="button">
+                    显示如何给 {{ APP_NAME }} 添加你的母语
+                  </button>
+                </div>
+                <select v-model="language" class="settings-select" aria-label="界面语言">
+                  <option value="zh-Hans">简体中文</option>
+                  <option value="zh-Hant">繁体中文</option>
+                  <option value="en">English</option>
+                </select>
+              </div>
+
+              <div class="settings-row">
+                <div class="settings-copy">
+                  <h3>获取帮助</h3>
+                  <p>获取关于使用 {{ APP_NAME }} 的帮助。</p>
+                </div>
+                <button class="settings-secondary-btn" type="button" @click="openHelp">
+                  打开
+                </button>
+              </div>
+            </section>
+          </div>
+
+          <div v-else class="settings-content">
+            <section class="settings-about-card" aria-label="编辑器设置">
+              <div class="settings-row settings-row-top">
+                <div class="settings-copy">
+                  <h3>默认编辑模式</h3>
+                  <p>在编辑视图下，新标签页默认采用的编辑模式。</p>
+                </div>
+                <select
+                  class="settings-select"
+                  aria-label="默认编辑模式"
+                  :value="defaultDocumentMode"
+                  @change="onDefaultDocumentModeChange"
+                >
+                  <option
+                    v-for="option in documentModeOptions"
+                    :key="option.value"
+                    :value="option.value"
+                  >
+                    {{ option.label }}
+                  </option>
+                </select>
+              </div>
+            </section>
+          </div>
+        </div>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.settings-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  background: rgba(56, 52, 46, 0.22);
+  backdrop-filter: blur(8px);
+}
+
+.settings-shell {
+  display: grid;
+  grid-template-columns: 176px minmax(0, 1fr);
+  width: min(820px, calc(100vw - 48px));
+  min-height: 430px;
+  max-height: min(680px, calc(100vh - 48px));
+  overflow: hidden;
+  border: 1px solid #e0dbcf;
+  border-radius: 12px;
+  background: #fffdfa;
+  box-shadow:
+    0 24px 70px rgba(56, 52, 46, 0.2),
+    0 2px 10px rgba(56, 52, 46, 0.08);
+}
+
+.settings-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 10px;
+  border-right: 1px solid #e8e4da;
+  background: #f4f1eb;
+}
+
+.settings-menu-title {
+  padding: 0 10px 8px;
+  color: #8c877d;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.settings-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  min-height: 34px;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: #5c574e;
+  font-size: 13px;
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.settings-menu-item:hover {
+  background: #ede8dd;
+  color: #38342e;
+}
+
+.settings-menu-item-active {
+  background: #fdf0e5;
+  color: #bf6a3b;
+  font-weight: 600;
+}
+
+.settings-main {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  background: #faf9f6;
+}
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 54px;
+  padding: 0 20px;
+  border-bottom: 1px solid #e8e4da;
+  background: rgba(255, 253, 250, 0.72);
+}
+
+.settings-header h2 {
+  margin: 0;
+  color: #38342e;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.settings-close-btn {
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #8c877d;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.settings-close-btn:hover {
+  background: #ede8dd;
+  color: #38342e;
+}
+
+.settings-content {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 22px;
+}
+
+.settings-about-card {
+  overflow: hidden;
+  border-radius: 10px;
+  background: #fffdfa;
+  box-shadow: inset 0 0 0 1px #eee9de;
+}
+
+.settings-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 20px;
+  align-items: center;
+  min-height: 78px;
+  padding: 16px 20px;
+  border-top: 1px solid #e0dbcf;
+}
+
+.settings-row-top {
+  border-top: none;
+}
+
+.settings-copy {
+  min-width: 0;
+}
+
+.settings-copy h3,
+.settings-empty-page h3 {
+  margin: 0 0 6px;
+  color: #2d2a26;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.settings-copy p,
+.settings-empty-page p {
+  margin: 0;
+  color: #5c574e;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.settings-link {
+  display: inline;
+  margin: 2px 0 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #7a55d9;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.settings-link:hover {
+  color: #6342bd;
+}
+
+.settings-action-stack {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.settings-primary-btn,
+.settings-secondary-btn {
+  display: inline-flex;
+  min-height: 30px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    box-shadow 0.15s ease,
+    color 0.15s ease;
+}
+
+.settings-primary-btn {
+  min-width: 78px;
+  border: none;
+  background: #8c6be8;
+  color: #fff;
+  box-shadow: 0 2px 7px rgba(100, 65, 190, 0.26);
+}
+
+.settings-primary-btn:hover {
+  background: #7a55d9;
+}
+
+.settings-secondary-btn {
+  min-width: 50px;
+  border: 1px solid #e0dbcf;
+  background: #fff;
+  color: #38342e;
+  box-shadow: 0 1px 4px rgba(56, 52, 46, 0.1);
+}
+
+.settings-secondary-btn:hover {
+  background: #f4f1ea;
+}
+
+.settings-status {
+  color: #6f6a60;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.settings-switch {
+  position: relative;
+  display: inline-flex;
+  width: 40px;
+  height: 22px;
+  cursor: pointer;
+}
+
+.settings-switch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.settings-switch span {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: #d4cfc4;
+  transition: background-color 0.16s ease;
+}
+
+.settings-switch span::after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(56, 52, 46, 0.24);
+  content: "";
+  transition: transform 0.16s ease;
+}
+
+.settings-switch input:checked + span {
+  background: #8c6be8;
+}
+
+.settings-switch input:checked + span::after {
+  transform: translateX(18px);
+}
+
+.settings-switch input:focus-visible + span {
+  outline: 2px solid #d6aa8e;
+  outline-offset: 2px;
+}
+
+.settings-select {
+  width: 158px;
+  height: 30px;
+  border: 1px solid #e0dbcf;
+  border-radius: 6px;
+  background: #fff;
+  color: #38342e;
+  font-size: 13px;
+  line-height: 1;
+  padding: 0 10px;
+  box-shadow: 0 1px 4px rgba(56, 52, 46, 0.1);
+  outline: none;
+}
+
+.settings-select:focus {
+  border-color: #d6aa8e;
+  box-shadow: 0 0 0 3px rgba(191, 106, 59, 0.1);
+}
+
+.settings-empty-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8c877d;
+  text-align: center;
+}
+
+.settings-empty-page > div {
+  max-width: 320px;
+}
+
+@media (max-width: 680px) {
+  .settings-overlay {
+    align-items: stretch;
+    padding: 14px;
+  }
+
+  .settings-shell {
+    grid-template-columns: 1fr;
+    width: 100%;
+    max-height: none;
+  }
+
+  .settings-menu {
+    flex-direction: row;
+    align-items: center;
+    border-right: none;
+    border-bottom: 1px solid #e8e4da;
+  }
+
+  .settings-menu-title {
+    padding: 0 8px;
+  }
+
+  .settings-menu-item {
+    width: auto;
+  }
+
+  .settings-row {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .settings-action-stack {
+    align-items: flex-start;
+  }
+}
+</style>