LiteRequest/spec/fix-response-panel.md

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.