LiteRequest/spec/feat-history-ui.md

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.