# 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.