add font settings (but font family doesn't work)

spec/feature-editor-settings.md

@@ -0,0 +1,59 @@
+# Feature Request: Editor Appearance Settings
+
+**Context:**
+We are continuing the development of the "LiteRequest" Tauri + Vue application. The application currently functions as a REST Client with a two-column layout.
+**Goal:** Implement a "Settings" feature that allows users to customize the **Font Size** and **Font Family** of the CodeMirror editors (both Request Body and Response Output).
+
+## 1. Functional Requirements
+
+### 1.1 Settings Persistence
+* Create a new Pinia store module (e.g., `stores/settingsStore.ts`) to manage application preferences.
+* **State fields:**
+    * `editorFontSize`: Number (Default: 14).
+    * `editorFontFamily`: String (Default: "Fira Code, Consolas, monospace").
+* **Persistence:** Use `localStorage` to save these preferences so they survive an app restart.
+
+### 1.2 User Interface (Settings Modal)
+* **Entry Point:** Add a "Settings" (Gear icon) button to the bottom of the **Sidebar**.
+* **Modal Design:**
+    * Create a `SettingsModal.vue` component.
+    * Style: Centered modal with a dark backdrop (backdrop-blur). Matches the existing Slate/Zinc dark theme.
+    * **Controls:**
+        * **Font Size:** A number input or a range slider (e.g., 10px to 24px).
+        * **Font Family:** A text input (allowing users to type their installed fonts) OR a simple dropdown with common coding fonts.
+    * **Actions:** "Close" button (Changes should apply reactively/immediately, no need for a "Save" button).
+
+### 1.3 Editor Integration
+* Update the existing `Editor.vue` component (the CodeMirror wrapper).
+* It must subscribe to the `settingsStore`.
+* Apply the `fontSize` and `fontFamily` dynamically to the editor container or the CodeMirror instance.
+
+## 2. Technical Implementation Details
+
+### A. Store (`stores/settingsStore.ts`)
+* Define the store using Pinia's Composition API.
+* Use `useLocalStorage` from `@vueuse/core` (if available) or manual `localStorage.setItem` within a watcher.
+
+### B. Sidebar Update (`Sidebar.vue`)
+* Import `SettingsIcon` from `lucide-vue-next`.
+* Add the button at the absolute bottom of the sidebar container.
+* Add logic to toggle the visibility of the `SettingsModal`.
+
+### C. Editor Update (`Editor.vue`)
+* Bind the styles dynamically.
+* *Hint for Implementation:* The easiest way to style CodeMirror 6 dynamically is to apply CSS variables to the wrapper `<div>` and ensure the CodeMirror theme uses those variables, or simply apply inline styles to the wrapper which CodeMirror usually inherits.
+    * Example: `<div :style="{ fontSize: settings.editorFontSize + 'px', fontFamily: settings.editorFontFamily }">`
+
+## 3. Implementation Steps for AI
+
+Please generate the code updates in the following order:
+
+1.  **Store:** Create `stores/settingsStore.ts`.
+2.  **Component (New):** Create `components/SettingsModal.vue`.
+3.  **Component (Update):** Show the modified code for `Sidebar.vue` (adding the button).
+4.  **Component (Update):** Show the modified code for `App.vue` (to include the Modal) or wherever the Modal should be placed.
+5.  **Component (Update):** Show the modified code for `Editor.vue` (applying the styles).
+
+---
+**Instruction to AI:**
+Please generate the necessary code to implement these features based on the existing "LiteRequest" project structure. Focus on maintaining the modern dark aesthetic.