# 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.