59 lines
3.2 KiB
Markdown
59 lines
3.2 KiB
Markdown
# 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. |