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

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);
 </script>
 
 <template>
@@ -52,6 +55,16 @@ const store = useRequestStore();
           </button>
         </div>
       </div>
+
+      <!-- Settings -->
+      <div class="p-2 border-t border-slate-800">
+        <button 
+          @click="showSettings = true"
+          class="w-full flex items-center gap-2 px-3 py-2 text-xs font-medium text-slate-400 hover:text-slate-200 hover:bg-slate-900 rounded transition-colors"
+        >
+          <Settings class="w-4 h-4" /> Settings
+        </button>
+      </div>
     </aside>
 
     <!-- Main Workspace -->
@@ -63,5 +76,7 @@ const store = useRequestStore();
         <ResponsePanel />
       </div>
     </main>
+
+    <SettingsModal v-if="showSettings" @close="showSettings = false" />
   </div>
 </template>

src/components/RequestPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRequestStore } from '../stores/requestStore';
+import { useSettingsStore } from '../stores/settingsStore';
 import KeyValueEditor from './KeyValueEditor.vue';
 import { invoke } from '@tauri-apps/api/core';
 import { Codemirror } from 'vue-codemirror';
@@ -9,6 +10,7 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { Play, Loader2 } from 'lucide-vue-next';
 
 const store = useRequestStore();
+const settings = useSettingsStore();
 const activeTab = ref('params');
 const isLoading = ref(false);
 
@@ -121,7 +123,11 @@ const executeRequest = async () => {
             <Codemirror
                 v-model="store.activeRequest.body"
                 placeholder="Request Body (JSON)"
-                :style="{ height: '100%' }"
+                :style="{ 
+                  height: '100%', 
+                  fontSize: settings.editorFontSize + 'px', 
+                  fontFamily: settings.editorFontFamily 
+                }"
                 :autofocus="true"
                 :indent-with-tab="true"
                 :tab-size="2"

src/components/ResponsePanel.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRequestStore } from '../stores/requestStore';
+import { useSettingsStore } from '../stores/settingsStore';
 import { Codemirror } from 'vue-codemirror';
 import { json } from '@codemirror/lang-json';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { EditorView } from '@codemirror/view';
 
 const store = useRequestStore();
+const settings = useSettingsStore();
 
 const extensions = [json(), oneDark, EditorView.editable.of(false)];
 
@@ -48,7 +50,11 @@ const statusColor = computed(() => {
         <div class="flex-1 overflow-hidden">
             <Codemirror
                 :model-value="formattedBody"
-                :style="{ height: '100%' }"
+                :style="{ 
+                  height: '100%',
+                  fontSize: settings.editorFontSize + 'px', 
+                  fontFamily: settings.editorFontFamily 
+                }"
                 :extensions="extensions"
             />
         </div>

src/components/SettingsModal.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useSettingsStore } from '../stores/settingsStore';
+import { X } from 'lucide-vue-next';
+
+const emit = defineEmits(['close']);
+const settings = useSettingsStore();
+
+const fontOptions = [
+  "Fira Code, Consolas, monospace",
+  "Consolas, 'Courier New', monospace",
+  "'Courier New', Courier, monospace",
+  "Monaco, Menlo, 'Ubuntu Mono', monospace",
+  "Arial, sans-serif"
+];
+</script>
+
+<template>
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="emit('close')">
+    <div class="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50">
+        <h2 class="text-lg font-semibold text-slate-100">Editor Settings</h2>
+        <button 
+          @click="emit('close')" 
+          class="text-slate-400 hover:text-white transition-colors p-1 hover:bg-slate-800 rounded-md"
+        >
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="p-6 space-y-6">
+        <!-- Font Size -->
+        <div class="space-y-3">
+          <div class="flex justify-between items-center">
+            <label class="text-sm font-medium text-slate-300">Font Size</label>
+            <span class="text-xs font-mono text-slate-500 bg-slate-950 px-2 py-1 rounded border border-slate-800">
+              {{ settings.editorFontSize }}px
+            </span>
+          </div>
+          <input 
+            type="range" 
+            v-model.number="settings.editorFontSize" 
+            min="10" 
+            max="24" 
+            step="1"
+            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500 hover:accent-indigo-400"
+          >
+        </div>
+
+        <!-- Font Family -->
+        <div class="space-y-3">
+          <label class="text-sm font-medium text-slate-300">Font Family</label>
+          <div class="space-y-2">
+             <select 
+              v-model="settings.editorFontFamily"
+              class="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5"
+            >
+              <option v-for="font in fontOptions" :key="font" :value="font">
+                {{ font.split(',')[0].replace(/['"]/g, '') }}
+              </option>
+              <option value="custom">Custom...</option>
+            </select>
+
+            <input 
+              v-if="settings.editorFontFamily === 'custom' || !fontOptions.includes(settings.editorFontFamily)"
+              type="text" 
+              v-model="settings.editorFontFamily" 
+              placeholder="e.g. 'JetBrains Mono', monospace"
+              class="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5 font-mono"
+            >
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="px-6 py-4 bg-slate-950/50 border-t border-slate-800 flex justify-end">
+        <button 
+          @click="emit('close')" 
+          class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 text-sm font-medium rounded-lg transition-colors border border-slate-700"
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

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>(
+    Number(localStorage.getItem('editorFontSize')) || 14
+  );
+  
+  const editorFontFamily = ref<string>(
+    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,
+  };
+});