LiteRequest/spec/rest-client-doc.md

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.