diff --git a/spec/feature-editor-settings.md b/spec/feature-editor-settings.md new file mode 100644 index 0000000..2ee0bc5 --- /dev/null +++ b/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 `
` and ensure the CodeMirror theme uses those variables, or simply apply inline styles to the wrapper which CodeMirror usually inherits. + * Example: `
` + +## 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. \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 28870a2..4c42b62 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,9 +3,12 @@ import { useRequestStore } from './stores/requestStore'; import RequestPanel from './components/RequestPanel.vue'; import ResponsePanel from './components/ResponsePanel.vue'; import MethodBadge from './components/MethodBadge.vue'; -import { History, Layers, Zap } from 'lucide-vue-next'; +import SettingsModal from './components/SettingsModal.vue'; +import { History, Layers, Zap, Settings } from 'lucide-vue-next'; +import { ref } from 'vue'; const store = useRequestStore(); +const showSettings = ref(false); diff --git a/src/components/RequestPanel.vue b/src/components/RequestPanel.vue index e28c434..f17c8bb 100644 --- a/src/components/RequestPanel.vue +++ b/src/components/RequestPanel.vue @@ -1,6 +1,7 @@ + + diff --git a/src/stores/settingsStore.ts b/src/stores/settingsStore.ts new file mode 100644 index 0000000..4fff41d --- /dev/null +++ b/src/stores/settingsStore.ts @@ -0,0 +1,27 @@ +import { defineStore } from 'pinia'; +import { ref, watch } from 'vue'; + +export const useSettingsStore = defineStore('settings', () => { + // Initialize from localStorage or defaults + const editorFontSize = ref( + Number(localStorage.getItem('editorFontSize')) || 14 + ); + + const editorFontFamily = ref( + localStorage.getItem('editorFontFamily') || 'Fira Code, Consolas, monospace' + ); + + // Watchers for persistence + watch(editorFontSize, (val) => { + localStorage.setItem('editorFontSize', val.toString()); + }); + + watch(editorFontFamily, (val) => { + localStorage.setItem('editorFontFamily', val); + }); + + return { + editorFontSize, + editorFontFamily, + }; +});