first functionable

spec/rest-client-doc.md

@@ -0,0 +1,98 @@
+# Project Specification: LiteRequest (Modern REST API Client)
+
+**Role:** You are an expert Full-Stack Developer specializing in Rust, Vue.js, and UI/UX Design.
+**Goal:** Generate a production-ready, visually stunning REST API Client using **Tauri 2.0** and **Vue 3**.
+
+## 1. Tech Stack Requirements
+
+* **Core Framework:** Tauri 2.0 (Rust)
+* **Frontend:**
+    * **Framework:** Vue 3 (Composition API, `<script setup>`, TypeScript).
+    * **Styling:** Tailwind CSS (v3 or v4).
+    * **Icons:** `lucide-vue-next` (for modern, clean SVG icons).
+    * **State Management:** Pinia (for managing request history and reactive state).
+    * **Editor:** `codemirror` (or `vue-codemirror`) with JSON language support and a dark theme (e.g., One Dark).
+* **Backend (Rust):**
+    * `reqwest` (Async, with `json` features).
+    * `serde` & `serde_json`.
+    * `tokio` (for async runtime).
+
+## 2. UI/UX Design Guidelines (Modern & Aesthetic)
+
+The application must look like a professional developer tool (similar to linear.app or Raycast).
+
+* **Theme:** **Dark Mode** by default. Use a neutral color palette (e.g., Tailwind's `slate` or `zinc`).
+    * *Background:* `bg-slate-950`
+    * *Panels/Cards:* `bg-slate-900`
+    * *Borders:* `border-slate-800`
+    * *Accents:* Use a primary color (e.g., `indigo-500` or `emerald-500`) for active states and primary buttons.
+* **Typography:** Clean sans-serif font (Inter or system font). Small, legible text sizes for data.
+* **Visual Details:**
+    * Use **rounded corners** (e.g., `rounded-lg`) for inputs and buttons.
+    * Use **subtle transitions** (`transition-all duration-200`) for hover states.
+    * Inputs should have no default borders but a subtle ring on focus.
+    * Scrollbars should be slim and styled to match the dark theme.
+
+## 3. Layout Structure (Two-Column)
+
+### A. Sidebar (Left - 250px Fixed Width)
+* **Style:** Darker background (`bg-slate-950`), border-r (`border-slate-800`).
+* **Content:**
+    * **Header:** App Title ("LiteRequest") with a modern logo/icon.
+    * **Navigation:** Tabs for "History" and "Collections".
+    * **History List:** A scrollable list of recent requests.
+        * Each item shows the HTTP Method badge (small, colored) and the URL path.
+        * *Hover Effect:* Lighten background on hover.
+
+### B. Main Workspace (Right - Flexible Width)
+* **Style:** Lighter background (`bg-slate-900`).
+* **Top Bar (Address Bar):**
+    * A cohesive container holding the Method Selector and URL Input.
+    * **Send Button:** A prominent, high-contrast button (e.g., `bg-indigo-600 hover:bg-indigo-500`) with a "Send" icon.
+* **Request Config (Tabs):**
+    * Tabs for: **Params**, **Headers**, **Body**.
+    * **Key-Value Inputs:** For Params/Headers, use a dynamic grid where users can add/remove rows.
+    * **JSON Editor:** A full-height CodeMirror instance for the Body.
+* **Response Area (Bottom or Split Pane):**
+    * **Meta Bar:** Status Code (Green for 2xx, Red for 4xx/5xx), Duration (ms), Size (KB).
+    * **Output:** Read-only CodeMirror editor with syntax highlighting for the JSON response.
+
+## 4. Functional Requirements
+
+### 4.1 Request Logic (Rust Backend)
+Create a Tauri Command `execute_request` that handles the heavy lifting:
+* **Inputs:** `method` (GET/POST/etc), `url`, `headers` (Map), `body` (String/JSON), `query_params` (Map).
+* **Logic:**
+    * Construct the request using `reqwest::Client`.
+    * Handle timeouts (default 30s).
+    * Capture precise timing (start/end).
+* **Outputs:** A struct containing `status`, `headers`, `body` (text), and `time_elapsed`.
+
+### 4.2 Frontend Logic
+* **Method Color Coding:**
+    * GET: Blue/Sky
+    * POST: Green/Emerald
+    * PUT: Orange/Amber
+    * DELETE: Red/Rose
+* **Persisted History:**
+    * Automatically save successful requests to `localStorage` via Pinia.
+    * Allow users to click a history item to repopulate the Main Workspace inputs.
+* **Formatting:**
+    * Automatically "Pretty Print" (indent) JSON responses in the viewer.
+
+## 5. Implementation Roadmap for Generation
+
+Please provide the code in the following logical chunks:
+
+1.  **Rust Backend:** `Cargo.toml` dependencies and the `main.rs` with the `execute_request` command.
+2.  **Frontend Setup:** `package.json`, `tailwind.config.js`, and `main.ts`.
+3.  **State Store:** `stores/requestStore.ts` (Pinia setup for managing request state and history).
+4.  **UI Components (The "Modern" Look):**
+    * `MethodBadge.vue` (Reusable component for colored badges).
+    * `KeyValueEditor.vue` (For editing Headers/Params).
+    * `RequestPanel.vue` (The main input area).
+    * `ResponsePanel.vue` (The results display).
+5.  **Main Layout:** `App.vue` bringing it all together.
+
+---
+**Instruction to AI:** Generate the code based on these modern design principles and functional requirements. Start with Part 1: Rust Backend.