67 lines
3.2 KiB
Markdown
67 lines
3.2 KiB
Markdown
# 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. |