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