fix history restore

improve response panel
modify sidebar
2025-12-01 11:10:08 -04:00 · 2025-12-01 11:03:12 -04:00 · 2025-12-01 10:39:35 -04:00 · 2025-12-01 09:49:56 -04:00 · 2025-12-01 09:35:42 -04:00 · 2025-12-01 09:28:35 -04:00
68 changed files with 530 additions and 138 deletions
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
-# Tauri + Vue + TypeScript
+# LiteRequest

-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+A simple REST API client.

-## Recommended IDE Setup
+Generated by Gemini CLI.

- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
+App icon from https://iconarchive.com
--- a/app-icon.png
+++ b/app-icon.png
--- a/index.html
+++ b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + Vue + Typescript App</title>
+    <title>LiteRequest</title>
  </head>

  <body>
--- a/public/tauri.svg
+++ b/public/tauri.svg
@@ -1,6 +0,0 @@
-<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
-<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
-</svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/spec/feat-history-ui.md
+++ b/spec/feat-history-ui.md
@@ -0,0 +1,67 @@
+# Feature Upgrade: History UI Overhaul
+
+**Context:**
+We are polishing the "Sidebar" component of the "LiteRequest" application.
+**Goal:** Improve the information density of the History list and add management features (Delete/Clear All).
+
+## 1. UI/UX Changes
+
+### 1.1 History Item Layout (Sidebar.vue)
+* **Current State:** Shows Method, URL, and Timestamp.
+* **New Layout:**
+    * **Remove:** Completely remove the Date/Time display to save space.
+    * **Flex Row:** The item should be a flex container (`flex items-center justify-between`).
+    * **Left Side (Info):**
+        * **Method Badge:** (Existing) e.g., "GET".
+        * **Status Badge (New):** Add a badge immediately after the Method.
+            * *Content:* The HTTP Status Code (e.g., 200, 404, 500).
+            * *Style:* Small, pill-shaped, lighter opacity background.
+            * *Color Logic:*
+                * 2xx: Text Green / Bg Green-500/20
+                * 3xx: Text Blue / Bg Blue-500/20
+                * 4xx: Text Orange / Bg Orange-500/20
+                * 5xx: Text Red / Bg Red-500/20
+        * **URL:** Truncate text if it's too long (`truncate` class).
+    * **Right Side (Actions):**
+        * **Delete Button (New):** A small "Trash" icon (`Trash2` from lucide-vue-next).
+        * *Behavior:* Visible on hover (group-hover) or always visible with low opacity.
+        * *Interaction:* Clicking this **must not** trigger the "Load Request" action of the list item (use `.stop` modifier).
+
+### 1.2 "Clear All" Functionality
+* **Location:** Add a "Clear" or "Trash" icon button in the **Header** of the Sidebar (next to the "History" tab label or the "LiteRequest" title).
+* **Style:** Subtle button, turns red on hover.
+* **Tooltip (Optional):** "Clear All History".
+
+## 2. Logic & State Management
+
+### 2.1 Store Updates (`stores/requestStore.ts`)
+* Add two new actions:
+    1.  `deleteHistoryItem(id: string)`: Removes a specific item from the `history` array by ID.
+    2.  `clearHistory()`: Empties the `history` array completely.
+* **Persistence:** Ensure `localStorage` is updated immediately after these actions.
+
+## 3. Implementation Details
+
+### A. Sidebar Component (`Sidebar.vue`)
+* **Status Badge Implementation:**
+    * Create a helper function `getStatusColor(code)` inside the component to return the correct Tailwind classes.
+* **Event Handling:**
+    * `<button @click.stop="store.deleteHistoryItem(item.id)">`
+    * The `.stop` modifier is critical to prevent opening the request while trying to delete it.
+
+### B. Icons
+* Import `Trash2` (for single item) and `Trash` (for clear all) from `lucide-vue-next`.
+
+## 4. Implementation Steps for AI
+
+Please generate the code updates in the following order:
+
+1.  **Store:** Add the `deleteHistoryItem` and `clearHistory` actions to `requestStore.ts`.
+2.  **Sidebar (Script):** Update the `<script setup>` to include the new icons and the status color helper function.
+3.  **Sidebar (Template):**
+    * Show the updated **Header** section (with "Clear All" button).
+    * Show the updated **History List Item** structure (Method + Status + URL + Delete Button).
+
+---
+**Instruction to AI:**
+Generate the code to apply these UI improvements and functional additions to the History module.
--- a/spec/fix-response-panel.md
+++ b/spec/fix-response-panel.md
@@ -0,0 +1,59 @@
+# UI Improvement: Resizable Panels & Copy Action
+
+**Context:**
+We are polishing the "Main Workspace" area of the LiteRequest application.
+**Goal:**
+1.  Add a **"Copy Body" button** to the Response Panel for quick access to the result.
+2.  Make the vertical split between the **Request Panel** (top) and **Response Panel** (bottom) resizable by the user.
+
+## 1. Feature: Response Copy Button
+
+### 1.1 UI Changes
+* **Location:** Inside the `ResponsePanel.vue`, in the **Meta Bar / Header** (the row displaying Status Code and Time), aligned to the right.
+* **Icon:** Use the `Clipboard` icon from `lucide-vue-next`.
+* **Interaction:**
+    * **Default:** Shows the `Clipboard` icon.
+    * **On Click:** Copies the content of the Response Body to the system clipboard.
+    * **Feedback:** After clicking, change the icon to `Check` (Checkmark) for 2 seconds to indicate success, then revert to `Clipboard`.
+* **Style:** Small, ghost-style button (transparent background, changing color on hover).
+
+### 1.2 Logic Implementation
+* Use the browser API: `navigator.clipboard.writeText(props.body)`.
+* Use a local ref `isCopied` (boolean) to handle the icon toggle state.
+* Use `setTimeout` to reset `isCopied` back to `false` after 2000ms.
+
+## 2. Feature: Resizable Split Pane
+
+### 2.1 UI Changes
+* **Location:** The parent component that contains `<RequestPanel />` and `<ResponsePanel />` (likely `App.vue` or `MainWorkspace.vue`).
+* **Visuals:** Insert a **Resizer Handle** (a thin horizontal bar) between the two panels.
+    * *Height:* 4px - 6px.
+    * *Color:* `bg-slate-800` (hover: `bg-indigo-500`).
+    * *Cursor:* `cursor-row-resize`.
+
+### 2.2 Logic Implementation
+* **State:** Use a `ref` for `topPanelHeight` (initially `50%` or `50vh`).
+* **Drag Logic:**
+    1.  **`onMouseDown`** (on the Resizer): Set a `isDragging` flag to true. Add `mousemove` and `mouseup` event listeners to the `window` (global).
+    2.  **`onMouseMove`** (on Window): Calculate the new percentage or pixel height based on `e.clientY` relative to the window height. Update `topPanelHeight`.
+    3.  **`onMouseUp`** (on Window): Set `isDragging` to false. Remove the window event listeners.
+* **Layout Application:**
+    * Apply `:style="{ height: topPanelHeight }"` to the **Request Panel** container.
+    * Apply `flex-1` (or calculated remaining height) to the **Response Panel** container.
+    * Ensure `min-height` is set (e.g., 200px) on both panels to prevent them from collapsing completely.
+
+## 3. Implementation Steps for AI
+
+Please generate the code updates in the following order:
+
+1.  **ResponsePanel.vue:**
+    * Update the template to include the Copy Button in the header.
+    * Add the script logic for `copyToClipboard`.
+2.  **Main Layout (App.vue or similar):**
+    * Refactor the template to wrap RequestPanel and ResponsePanel in the resizable structure.
+    * Implement the `useDraggable` logic (or manual event handlers) in `<script setup>`.
+    * Add the `<div class="resizer ...">` element styles.
+
+---
+**Instruction to AI:**
+Generate the specific code to add the copy functionality and the resizable split view logic.
--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/64x64.png
+++ b/src-tauri/icons/64x64.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
+++ b/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/values/ic_launcher_background.xml
+++ b/src-tauri/icons/android/values/ic_launcher_background.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/icons/ios/AppIcon-20x20@1x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@1x.png
--- a/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-20x20@2x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@2x.png
--- a/src-tauri/icons/ios/AppIcon-20x20@3x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@3x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@1x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@1x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-29x29@2x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@2x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@3x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@3x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@1x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@1x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-40x40@2x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@2x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@3x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@3x.png
--- a/src-tauri/icons/ios/AppIcon-512@2x.png
+++ b/src-tauri/icons/ios/AppIcon-512@2x.png
--- a/src-tauri/icons/ios/AppIcon-60x60@2x.png
+++ b/src-tauri/icons/ios/AppIcon-60x60@2x.png
--- a/src-tauri/icons/ios/AppIcon-60x60@3x.png
+++ b/src-tauri/icons/ios/AppIcon-60x60@3x.png
--- a/src-tauri/icons/ios/AppIcon-76x76@1x.png
+++ b/src-tauri/icons/ios/AppIcon-76x76@1x.png
--- a/src-tauri/icons/ios/AppIcon-76x76@2x.png
+++ b/src-tauri/icons/ios/AppIcon-76x76@2x.png
--- a/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
+++ b/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,78 +1,65 @@
 <script setup lang="ts">
-import { useRequestStore } from './stores/requestStore';
 import RequestPanel from './components/RequestPanel.vue';
 import ResponsePanel from './components/ResponsePanel.vue';
-import MethodBadge from './components/MethodBadge.vue';
+import Sidebar from './components/Sidebar.vue';
 import SettingsModal from './components/SettingsModal.vue';
-import { History, Layers, Zap, Settings } from 'lucide-vue-next';
-import { ref } from 'vue';
+import { ref, onUnmounted } from 'vue';

-const store = useRequestStore();
 const showSettings = ref(false);
+const topPanelHeight = ref(50); // Percentage
+const isDragging = ref(false);
+
+const startDrag = () => {
+  isDragging.value = true;
+  window.addEventListener('mousemove', onDrag);
+  window.addEventListener('mouseup', stopDrag);
+};
+
+const onDrag = (e: MouseEvent) => {
+  if (!isDragging.value) return;
+  
+  const containerHeight = window.innerHeight;
+  let newPercentage = (e.clientY / containerHeight) * 100;
+  
+  // Clamp between 20% and 80%
+  if (newPercentage < 20) newPercentage = 20;
+  if (newPercentage > 80) newPercentage = 80;
+  
+  topPanelHeight.value = newPercentage;
+};
+
+const stopDrag = () => {
+  isDragging.value = false;
+  window.removeEventListener('mousemove', onDrag);
+  window.removeEventListener('mouseup', stopDrag);
+};
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onDrag);
+  window.removeEventListener('mouseup', stopDrag);
+});
 </script>

 <template>
  <div class="flex h-screen w-full bg-slate-950 text-slate-200 font-sans overflow-hidden">
    <!-- Sidebar -->
-    <aside class="w-64 flex-shrink-0 border-r border-slate-800 flex flex-col bg-slate-950">
-      <!-- Header -->
-      <div class="h-14 flex items-center px-4 border-b border-slate-800 gap-2">
-        <div class="bg-indigo-500/20 p-1.5 rounded-lg">
-          <Zap class="w-5 h-5 text-indigo-400" />
-        </div>
-        <span class="font-bold text-slate-100 tracking-tight">LiteRequest</span>
-      </div>
-
-      <!-- Nav Tabs -->
-      <div class="flex p-2 gap-1">
-        <button class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium bg-slate-900 text-slate-200 rounded border border-slate-800 shadow-sm">
-          <History class="w-3.5 h-3.5" /> History
-        </button>
-        <button class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium text-slate-500 hover:bg-slate-900 hover:text-slate-300 rounded transition-colors">
-          <Layers class="w-3.5 h-3.5" /> Collections
-        </button>
-      </div>
-
-      <!-- History List -->
-      <div class="flex-1 overflow-y-auto">
-        <div v-if="store.history.length === 0" class="p-8 text-center text-slate-600 text-xs">
-          No history yet. Make a request!
-        </div>
-        <div v-else class="flex flex-col">
-          <button 
-            v-for="item in store.history" 
-            :key="item.timestamp"
-            @click="store.loadRequest(item)"
-            class="text-left px-3 py-3 border-b border-slate-800/50 hover:bg-slate-900 transition-colors group flex flex-col gap-1.5"
-          >
-            <div class="flex items-center gap-2 overflow-hidden w-full">
-              <MethodBadge :method="item.method" />
-              <span class="text-xs text-slate-400 truncate font-mono opacity-75">{{ new Date(item.timestamp).toLocaleTimeString() }}</span>
-            </div>
-            <div class="text-sm text-slate-300 truncate px-1 font-medium" :title="item.url">
-              {{ item.url || 'No URL' }}
-            </div>
-          </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>
+    <Sidebar @open-settings="showSettings = true" />

    <!-- Main Workspace -->
-    <main class="flex-1 flex flex-col min-w-0 bg-slate-900">
-      <div class="flex-1 min-h-0">
+    <main class="flex-1 flex flex-col min-w-0 bg-slate-900 h-full relative">
+      <!-- Request Panel (Top) -->
+      <div class="min-h-0" :style="{ height: topPanelHeight + '%' }">
        <RequestPanel />
      </div>
-      <div class="h-1/2 border-t border-slate-800 min-h-0">
+
+      <!-- Resizer Handle -->
+      <div 
+        class="h-1 bg-slate-800 hover:bg-indigo-500 cursor-row-resize transition-colors z-10 flex-shrink-0"
+        @mousedown="startDrag"
+      ></div>
+
+      <!-- Response Panel (Bottom) -->
+      <div class="flex-1 min-h-0 overflow-hidden">
        <ResponsePanel />
      </div>
    </main>
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/components/AuthPanel.vue
+++ b/src/components/AuthPanel.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useRequestStore } from '../stores/requestStore';
 import { ShieldCheck, Key, User, Lock, Fingerprint } from 'lucide-vue-next';
+import CustomSelect from './CustomSelect.vue';
 import { ref } from 'vue';

 const store = useRequestStore();
@@ -21,15 +22,11 @@ const showApiKey = ref(false);
    <!-- Type Selector -->
    <div class="flex flex-col gap-2">
      <label class="text-xs font-bold uppercase text-slate-500 tracking-wider">Authentication Type</label>
-      <div class="relative">
-        <select 
-          v-model="store.activeRequest.auth.type"
-          class="w-full bg-slate-950 border border-slate-800 rounded-lg px-4 py-2.5 text-sm text-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none appearance-none cursor-pointer"
-        >
-          <option v-for="t in authTypes" :key="t.value" :value="t.value">{{ t.label }}</option>
-        </select>
-        <ShieldCheck class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none" />
-      </div>
+      <CustomSelect 
+        v-model="store.activeRequest.auth.type"
+        :options="authTypes"
+        :full-width="true"
+      />
    </div>

    <!-- Dynamic Content -->
--- a/src/components/CustomSelect.vue
+++ b/src/components/CustomSelect.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ChevronDown, Check } from 'lucide-vue-next';
+
+interface Option {
+  value: string;
+  label?: string;
+}
+
+const props = defineProps<{
+  modelValue: string;
+  options: (string | Option)[];
+  placeholder?: string;
+  fullWidth?: boolean;
+  triggerClass?: string;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const isOpen = ref(false);
+const containerRef = ref<HTMLElement | null>(null);
+
+const normalizedOptions = computed(() => {
+  return props.options.map(opt => {
+    if (typeof opt === 'string') {
+      return { value: opt, label: opt };
+    }
+    return opt;
+  });
+});
+
+const selectedLabel = computed(() => {
+  const found = normalizedOptions.value.find(o => o.value === props.modelValue);
+      return found ? (found.label || found.value) : (props.modelValue || props.placeholder || '');
+  });
+  
+  const toggle = () => {  isOpen.value = !isOpen.value;
+};
+
+const select = (value: string) => {
+  emit('update:modelValue', value);
+  isOpen.value = false;
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+    isOpen.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<template>
+  <div 
+    ref="containerRef" 
+    class="relative text-sm"
+    :class="{ 'w-full': fullWidth }"
+  >
+    <!-- Trigger -->
+    <button
+      type="button"
+      @click="toggle"
+      class="flex items-center justify-between gap-2 px-3 py-2 transition-colors text-slate-200 focus:outline-none"
+      :class="[
+        triggerClass ? triggerClass : 'bg-slate-950 border border-slate-800 rounded-lg hover:border-slate-700 focus:ring-1 focus:ring-indigo-500/50',
+        { 'w-full': fullWidth, 'border-indigo-500 ring-1 ring-indigo-500/50': isOpen && !triggerClass }
+      ]"
+    >
+      <span class="truncate font-bold">{{ selectedLabel }}</span>
+      <ChevronDown class="w-4 h-4 text-slate-500 transition-transform duration-200" :class="{ 'rotate-180': isOpen }" />
+    </button>
+
+    <!-- Dropdown Menu -->
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <div 
+        v-if="isOpen"
+        class="absolute top-full left-0 mt-1 w-full min-w-[120px] max-h-60 overflow-y-auto bg-slate-900 border border-slate-800 rounded-lg shadow-xl z-50 py-1"
+      >
+        <button
+          v-for="opt in normalizedOptions"
+          :key="opt.value"
+          @click="select(opt.value)"
+          class="w-full text-left px-3 py-2 text-sm flex items-center justify-between group hover:bg-slate-800 transition-colors"
+          :class="modelValue === opt.value ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-300'"
+        >
+          <span class="truncate font-medium">{{ opt.label || opt.value }}</span>
+          <Check v-if="modelValue === opt.value" class="w-3.5 h-3.5 text-indigo-500" />
+        </button>
+      </div>
+    </transition>
+  </div>
+</template>
--- a/src/components/RequestPanel.vue
+++ b/src/components/RequestPanel.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRequestStore } from '../stores/requestStore';
 import { useSettingsStore } from '../stores/settingsStore';
 import KeyValueEditor from './KeyValueEditor.vue';
 import AuthPanel from './AuthPanel.vue';
+import CustomSelect from './CustomSelect.vue';
 import { invoke } from '@tauri-apps/api/core';
 import { Codemirror } from 'vue-codemirror';
 import { json } from '@codemirror/lang-json';
@@ -16,18 +17,23 @@ const settings = useSettingsStore();
 const activeTab = ref('params');
 const isLoading = ref(false);

-const transparentTheme = EditorView.theme({
-  "&": { 
-    backgroundColor: "transparent !important", 
-    height: "100%" 
-  },
-  ".cm-gutters": { 
-    backgroundColor: "transparent !important" 
-  }
+const extensions = computed(() => {
+  const theme = EditorView.theme({
+    "&": { 
+      backgroundColor: "transparent !important", 
+      height: "100%",
+    },
+    ".cm-content, .cm-gutter": {
+      fontFamily: `${settings.editorFontFamily} !important`
+    },
+    ".cm-gutters": { 
+      backgroundColor: "transparent !important" 
+    }
+  });
+  
+  return [json(), oneDark, theme];
 });

-const extensions = [json(), oneDark, transparentTheme];
-
 const methods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'];

 const executeRequest = async () => {
@@ -79,18 +85,17 @@ const executeRequest = async () => {
  <div class="flex flex-col h-full bg-slate-900">
    <!-- Top Bar -->
    <div class="p-4 border-b border-slate-800 flex gap-2 items-center">
-      <div class="flex-1 flex items-center bg-slate-950 rounded-lg border border-slate-800 focus-within:border-indigo-500/50 focus-within:ring-1 focus-within:ring-indigo-500/50 transition-all overflow-hidden">
-        <select 
-            v-model="store.activeRequest.method" 
-            class="bg-slate-900 text-xs font-bold px-3 py-2 text-white border-r border-slate-800 focus:outline-none hover:bg-slate-800 cursor-pointer uppercase appearance-none"
-        >
-            <option v-for="m in methods" :key="m" :value="m" class="bg-slate-900 text-white">{{ m }}</option>
-        </select>
+      <div class="flex-1 flex items-center bg-slate-950 rounded-lg border border-slate-800 focus-within:border-indigo-500/50 focus-within:ring-1 focus-within:ring-indigo-500/50 transition-all overflow-visible z-20">
+        <CustomSelect
+            v-model="store.activeRequest.method"
+            :options="methods"
+            triggerClass="bg-transparent text-xs font-bold px-3 py-2 text-slate-200 border-r border-slate-800 focus:outline-none hover:bg-slate-900 cursor-pointer uppercase h-full min-w-[90px]"
+        />
        <input 
            type="text" 
            v-model="store.activeRequest.url"
            placeholder="https://api.example.com/v1/users"
-            class="flex-1 bg-transparent border-none focus:ring-0 text-sm text-slate-200 px-3 py-2 placeholder-slate-600"
+            class="flex-1 bg-transparent border-none focus:ring-0 text-sm text-slate-200 px-3 py-2 placeholder-slate-600 h-full"
            @keydown.enter="executeRequest"
        >
      </div>
--- a/src/components/ResponsePanel.vue
+++ b/src/components/ResponsePanel.vue
@@ -1,27 +1,34 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } 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'; // Import EditorView
+import { EditorView } from '@codemirror/view';
+import { Clipboard, Check } from 'lucide-vue-next';

 const store = useRequestStore();
 const settings = useSettingsStore();
+const isCopied = ref(false);

-const transparentTheme = EditorView.theme({
-  "&": {
-    backgroundColor: "transparent !important",
-    height: "100%"
-  },
-  ".cm-gutters": {
-    backgroundColor: "transparent !important"
-  }
+const extensions = computed(() => {
+  const theme = EditorView.theme({
+    "&": {
+      backgroundColor: "transparent !important",
+      height: "100%"
+    },
+    ".cm-content, .cm-gutter": {
+      fontFamily: `${settings.editorFontFamily} !important`
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent !important"
+    }
+  });
+
+  return [json(), oneDark, theme, EditorView.editable.of(false)];
 });

-const extensions = [json(), oneDark, transparentTheme, EditorView.editable.of(false)];
-
 const formattedBody = computed(() => {
    if (!store.activeRequest.response) return '';
    try {
@@ -38,22 +45,46 @@ const statusColor = computed(() => {
    if (s >= 400) return 'text-rose-400';
    return 'text-amber-400';
 });
+
+const copyToClipboard = async () => {
+  if (!formattedBody.value) return;
+  try {
+    await navigator.clipboard.writeText(formattedBody.value);
+    isCopied.value = true;
+    setTimeout(() => {
+      isCopied.value = false;
+    }, 2000);
+  } catch (err) {
+    console.error('Failed to copy:', err);
+  }
+};
 </script>

 <template>
  <div class="flex flex-col h-full border-t border-slate-800 bg-slate-900">
    <div v-if="store.activeRequest.response" class="flex flex-col h-full">
        <!-- Meta Bar -->
-        <div class="px-4 py-2 border-b border-slate-800 flex gap-4 text-xs items-center bg-slate-950/50">
-            <div class="font-mono">
-                Status: <span :class="['font-bold', statusColor]">{{ store.activeRequest.response.status }}</span>
-            </div>
-            <div class="text-slate-500">
-                Time: <span class="text-slate-300">{{ store.activeRequest.response.time }}ms</span>
-            </div>
-            <div class="text-slate-500">
-                Size: <span class="text-slate-300">{{ (store.activeRequest.response.size / 1024).toFixed(2) }} KB</span>
+        <div class="px-4 py-2 border-b border-slate-800 flex justify-between text-xs items-center bg-slate-950/50">
+            <div class="flex gap-4 items-center">
+                <div class="font-mono">
+                    Status: <span :class="['font-bold', statusColor]">{{ store.activeRequest.response.status }}</span>
+                </div>
+                <div class="text-slate-500">
+                    Time: <span class="text-slate-300">{{ store.activeRequest.response.time }}ms</span>
+                </div>
+                <div class="text-slate-500">
+                    Size: <span class="text-slate-300">{{ (store.activeRequest.response.size / 1024).toFixed(2) }} KB</span>
+                </div>
            </div>
+            
+            <button 
+              @click="copyToClipboard"
+              class="p-1.5 text-slate-400 hover:text-indigo-400 hover:bg-indigo-500/10 rounded transition-colors"
+              title="Copy Body"
+            >
+               <Check v-if="isCopied" class="w-3.5 h-3.5" />
+               <Clipboard v-else class="w-3.5 h-3.5" />
+            </button>
        </div>
        
        <!-- Output -->
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useSettingsStore } from '../stores/settingsStore';
+import CustomSelect from './CustomSelect.vue';
 import { X } from 'lucide-vue-next';
+import { computed } from 'vue';

 const emit = defineEmits(['close']);
 const settings = useSettingsStore();
@@ -12,13 +14,20 @@ const fontOptions = [
  "Monaco, Menlo, 'Ubuntu Mono', monospace",
  "Arial, sans-serif"
 ];
+
+const displayFontOptions = computed(() => {
+  return fontOptions.map(font => ({
+    value: font,
+    label: font.split(',')[0].replace(/['"]/g, '')
+  }));
+});
 </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">
+    <div class="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md 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">
+      <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50 rounded-t-xl">
        <h2 class="text-lg font-semibold text-slate-100">Editor Settings</h2>
        <button 
          @click="emit('close')" 
@@ -52,18 +61,14 @@ const fontOptions = [
        <div class="space-y-3">
          <label class="text-sm font-medium text-slate-300">Font Family</label>
          <div class="space-y-2">
-             <select 
+            <CustomSelect
              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>
-
+              :options="displayFontOptions"
+              :full-width="true"
+              placeholder="Select or enter font family"
+            />
            <input 
-              v-if="settings.editorFontFamily === 'custom' || !fontOptions.includes(settings.editorFontFamily)"
+              v-if="!fontOptions.includes(settings.editorFontFamily)"
              type="text" 
              v-model="settings.editorFontFamily" 
              placeholder="e.g. 'JetBrains Mono', monospace"
@@ -74,7 +79,7 @@ const fontOptions = [
      </div>

      <!-- Footer -->
-      <div class="px-6 py-4 bg-slate-950/50 border-t border-slate-800 flex justify-end">
+      <div class="px-6 py-4 bg-slate-950/50 border-t border-slate-800 flex justify-end rounded-b-xl">
        <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"
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { useRequestStore } from '../stores/requestStore';
+import MethodBadge from './MethodBadge.vue';
+import { Zap, Settings, Trash, Trash2, Plus } from 'lucide-vue-next';
+
+const emit = defineEmits(['open-settings']);
+const store = useRequestStore();
+
+const getStatusColor = (code?: number) => {
+    if (!code) return 'text-slate-500 bg-slate-800/50';
+    if (code >= 200 && code < 300) return 'text-emerald-400 bg-emerald-500/10';
+    if (code >= 300 && code < 400) return 'text-blue-400 bg-blue-500/10';
+    if (code >= 400 && code < 500) return 'text-amber-400 bg-amber-500/10';
+    if (code >= 500) return 'text-rose-400 bg-rose-500/10';
+    return 'text-slate-400 bg-slate-500/10';
+};
+</script>
+
+<template>
+    <aside class="w-64 flex-shrink-0 border-r border-slate-800 flex flex-col bg-slate-950">
+      <!-- Header -->
+      <div class="h-14 flex items-center justify-between px-4 border-b border-slate-800">
+        <div class="flex items-center gap-2">
+            <div class="bg-indigo-500/20 p-1.5 rounded-lg">
+            <Zap class="w-5 h-5 text-indigo-400" />
+            </div>
+            <span class="font-bold text-slate-100 tracking-tight">LiteRequest</span>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="flex p-2 gap-2 border-b border-slate-800/50">
+        <button 
+            @click="store.resetActiveRequest()"
+            class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium bg-indigo-600 hover:bg-indigo-500 text-white rounded transition-all shadow-lg shadow-indigo-900/20"
+        >
+          <Plus class="w-3.5 h-3.5" /> New Request
+        </button>
+        <button 
+            @click="store.clearHistory()"
+            class="flex-none flex items-center justify-center gap-2 px-3 py-1.5 text-xs font-medium bg-slate-800 hover:bg-red-500/10 hover:text-red-400 text-slate-400 rounded transition-all border border-slate-700 hover:border-red-500/50"
+            title="Clear History"
+        >
+          <Trash class="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <!-- History List -->
+      <div class="flex-1 overflow-y-auto">
+        <div v-if="store.history.length === 0" class="p-8 text-center text-slate-600 text-xs">
+          No history yet. Make a request!
+        </div>
+        <div v-else class="flex flex-col">
+          <button 
+            v-for="item in store.history" 
+            :key="item.id"
+            @click="store.loadRequest(item)"
+            class="group flex flex-col text-left px-3 py-2 border-b border-slate-800/50 hover:bg-slate-900 transition-colors w-full"
+          >
+            <!-- First Row: Method, Status, Delete Button -->
+            <div class="flex items-center justify-between w-full">
+                <div class="flex items-center gap-2">
+                    <MethodBadge :method="item.method" />
+                    
+                    <!-- Status Badge -->
+                    <span 
+                        v-if="item.response?.status" 
+                        class="text-[10px] font-mono font-bold px-1.5 py-0.5 rounded-full"
+                        :class="getStatusColor(item.response?.status)"
+                    >
+                        {{ item.response.status }}
+                    </span>
+                </div>
+
+                <!-- Delete Button -->
+                <button 
+                    @click.stop="store.deleteHistoryItem(item.id)"
+                    class="opacity-0 group-hover:opacity-100 transition-opacity p-1.5 text-slate-500 hover:text-red-400 hover:bg-slate-800 rounded-md cursor-pointer flex-shrink-0"
+                >
+                    <Trash2 class="w-3.5 h-3.5" />
+                </button>
+            </div>
+
+            <!-- Second Row: URL -->
+            <div class="mt-1">
+                <span class="text-xs text-slate-400 truncate font-medium block" :title="item.url">
+                    {{ item.url || '/' }}
+                </span>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <!-- Settings -->
+      <div class="p-2 border-t border-slate-800">
+        <button 
+          @click="emit('open-settings')"
+          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>
+</template>
--- a/src/stores/requestStore.ts
+++ b/src/stores/requestStore.ts
@@ -85,11 +85,40 @@ export const useRequestStore = defineStore('request', () => {
    history.value = [];
  };

+  const deleteHistoryItem = (id: string) => {
+    const index = history.value.findIndex(item => item.id === id);
+    if (index !== -1) {
+      history.value.splice(index, 1);
+    }
+  };
+
+  const resetActiveRequest = () => {
+    activeRequest.value = {
+        id: crypto.randomUUID(),
+        method: 'GET',
+        url: '',
+        params: [
+            { id: crypto.randomUUID(), key: '', value: '', enabled: true }
+        ],
+        headers: [
+            { id: crypto.randomUUID(), key: '', value: '', enabled: true }
+        ],
+        body: '',
+        auth: {
+            type: 'none',
+            basic: { username: '', password: '' },
+            bearer: { token: '' },
+            apiKey: { key: '', value: '', addTo: 'header' }
+        },
+        timestamp: Date.now(),
+    };
+  };
+
  const loadRequest = (req: RequestData) => {
    // Deep copy
    const loaded = JSON.parse(JSON.stringify(req));
    loaded.id = crypto.randomUUID();
-    loaded.response = undefined;
+    // loaded.response = undefined; // Keep response for history viewing
    
    // Ensure at least one empty row for editing
    if (loaded.params.length === 0) loaded.params.push({ id: crypto.randomUUID(), key: '', value: '', enabled: true });
@@ -118,6 +147,8 @@ export const useRequestStore = defineStore('request', () => {
    activeRequest,
    addToHistory,
    clearHistory,
-    loadRequest
+    deleteHistoryItem,
+    loadRequest,
+    resetActiveRequest
  };
 });
Author	SHA1	Message	Date
Julian Freeman	eb1d802f5b	fix history restore	2025-12-01 11:10:08 -04:00
Julian Freeman	4d20f2075f	improve response panel	2025-12-01 11:03:12 -04:00
Julian Freeman	8fc4dbbf93	modify sidebar	2025-12-01 10:39:35 -04:00
Julian Freeman	d6dda10d2f	fix settings select	2025-12-01 09:49:56 -04:00
Julian Freeman	c5d82a710d	custom select	2025-12-01 09:35:42 -04:00
Julian Freeman	4f6c9f87e7	change icon	2025-12-01 09:28:35 -04:00
Julian Freeman	c2cf6fd644	fix font family settings	2025-12-01 09:03:01 -04:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`