# Feature Request: Authentication Support

**Context:**
We are upgrading the "LiteRequest" Tauri + Vue application. Currently, it supports Headers, Params, and Body.
**Goal:** Add a dedicated **"Auth"** tab in the Request Configuration area to support common authentication methods.

## 1. Functional Requirements

### 1.1 Supported Auth Types
The user should be able to select one of the following from a dropdown:
1.  **No Auth** (Default)
2.  **Basic Auth**: Inputs for `Username` and `Password`.
3.  **Bearer Token**: Input for `Token` (e.g., JWT).
4.  **API Key**: Inputs for `Key`, `Value`, and a selection for `Add To` ("Header" or "Query Params").

### 1.2 State Management
* Update `stores/requestStore.ts` to include an `auth` state object.
* **Structure:**
    ```typescript
    state: {
      // ... existing state
      auth: {
        type: 'none', // 'none' | 'basic' | 'bearer' | 'api_key'
        basic: { username: '', password: '' },
        bearer: { token: '' },
        apiKey: { key: '', value: '', addTo: 'header' } // addTo: 'header' | 'query'
      }
    }
    ```
* **Persistence:** These values should be saved to `localStorage` along with the request history (careful note: in a real app we would encrypt this, but for this local MVP, plain text storage is acceptable).

## 2. UI/UX Design

### 2.1 Request Panel Update
* In `RequestPanel.vue`, add a new Tab labeled **"Auth"** (place it first, before "Params").
* **Layout:**
    * **Type Selector:** A styled `<select>` or dropdown menu at the top of the tab content.
    * **Dynamic Form:**
        * If **No Auth**: Show a subtle message "This request does not use any authentication."
        * If **Basic Auth**: Two fields (Username, Password). *Password field must use type="password" with a toggle to show/hide.*
        * If **Bearer Token**: One large text area or input for the Token. Prefix it visually with "Bearer ".
        * If **API Key**: Three inputs: Key (text), Value (text/password), Add To (Radio button or Select).

### 2.2 Aesthetic Guidelines
* Maintain the **Dark Mode** (Slate/Zinc) theme.
* Inputs should look identical to the existing inputs in the "Headers" tab (rounded, dark background, border-slate-700).
* Use `lucide-vue-next` icons (e.g., `ShieldCheck` icon for the Tab label).

## 3. Technical Implementation Details

### A. Frontend Logic (`requestStore.ts` & Component)
* The Frontend needs to package this Auth data and send it to the Rust backend.
* **Important:** Do *not* manually inject these into the `headers` list in the frontend UI (to avoid state sync issues). Pass the auth configuration as a separate object to the Rust command.

### B. Backend Logic (`main.rs`)
* Update the `execute_request` Tauri command signature to accept an `auth` argument.
* **Logic Update:**
    * Use `reqwest` built-in methods:
    * **Basic:** `.basic_auth(username, Some(password))`
    * **Bearer:** `.bearer_auth(token)`
    * **API Key:**
        * If `addTo == "header"`: Manually `.header(key, value)`
        * If `addTo == "query"`: Manually append to the query params.

## 4. Implementation Steps for AI

Please generate the code updates in the following order:

1.  **Store Update:** Modify `stores/requestStore.ts` to add the `auth` state structure.
2.  **UI Component:** Create a new component `components/AuthPanel.vue` (or code to be added inside `RequestPanel.vue`) that handles the form switching and inputs.
3.  **Rust Backend:** Update `main.rs`. Define the `Auth` struct (using `serde::Deserialize`) and update the `execute_request` logic to apply the auth.
4.  **Integration:** Show how to update the `execute_request` invocation in the frontend to pass this new data.

---
**Instruction to AI:**
Generate the code to implement these Authentication features. Ensure the UI matches the existing modern style (Tailwind CSS).