59 lines
3.0 KiB
Markdown
59 lines
3.0 KiB
Markdown
# 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. |