LiteRequest/spec/feature-editor-settings.md

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.