# uzdb UI Wireframes ## Main Application Window ### 1. Connection Manager (Startup Screen) ``` ┌─────────────────────────────────────────────────────────────┐ │ uzdb - Connect │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ + New Connection │ │ │ ├──────────────────────────────────────────────────────┤ │ │ │ 🗄️ Local MySQL │ │ │ │ localhost:3306 • mysql │ │ │ ├──────────────────────────────────────────────────────┤ │ │ │ 🐘 Production PostgreSQL │ │ │ │ prod-db.example.com:5432 • postgres │ │ │ ├──────────────────────────────────────────────────────┤ │ │ │ ◪ Local SQLite │ │ │ │ ~/data/app.db │ │ │ └──────────────────────────────────────────────────────┘ │ │ │ │ [New Connection] [Edit] [Delete] [Connect] │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### 2. Main Application Layout ``` ┌────────────────────────────────────────────────────────────────────┐ │ File Edit View Query Tools Help │ ├────────────────────────────────────────────────────────────────────┤ │ [▶ Run] [💾 Save] [📤 Export] [🔍 Find] [Connection: ▼] │ ├─────────────┬──────────────────────────────────────────────────────┤ │ │ ┌─ Query Editor ──────────────────────────────┐ │ │ 🗄️ Database │ │ │ │ │ ├─ 🗄️ MySQL │ │ SELECT * FROM users │ │ │ │ ├─ 📊 public │ WHERE active = 1; │ │ │ │ │ ├─ 📋 users │ │ │ │ │ │ ├─ 📋 products │ │ │ │ │ │ └─ 📋 orders │ │ │ │ │ └─ 📊 information_schema │ │ │ │ ├─ 🐘 PostgreSQL│ └─────────────────────────────────────────┘ │ │ │ └─ 📊 public │ 127 rows │ 0.045s │ │ └─ ◪ SQLite ├──────────────────────────────────────────────────┤ │ │ Results │ │ Connections │ ┌─────────────────────────────────────────────┐ │ │ (drag to add) │ │ id │ name │ email │ active │ │ │ │ ├────┼──────────┼────────────────┼───────────┤ │ │ │ │ 1 │ Alice │ alice@mail.com │ ✓ │ │ │ │ │ 2 │ Bob │ bob@mail.com │ ✓ │ │ │ │ │ 3 │ Charlie │ charlie@mail.c │ ✗ │ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ │ │ [<] [1] [2] [3] [...] [10] [>] Per page: [25▼] │ ├─────────────┴───────────────────────────────────────────────────┤ │ ✓ Connected to MySQL@localhost:3306 │ UTF-8 │ LF │ ins │ └──────────────────────────────────────────────────────────────────┘ ``` ### 3. Query Editor Tab ``` ┌─ Untitled.sql ───────────────────────────────────────────────────┐ │ 1 │ SELECT u.id, u.name, COUNT(o.id) as order_count │ │ 2 │ FROM users u │ │ 3 │ LEFT JOIN orders o ON u.id = o.user_id │ │ 4 │ WHERE u.created_at > '2024-01-01' │ │ 5 │ GROUP BY u.id, u.name │ │ 6 │ HAVING COUNT(o.id) > 5 │ │ 7 │ ORDER BY order_count DESC │ │ 8 │ LIMIT 100; │ └──────────────────────────────────────────────────────────────────┘ ▶ Run (Ctrl+Enter) │ Explain │ Format │ History │ Snippets ``` ### 4. Table Data View ``` ┌─ public.users ───────────────────────────────────────────────────┐ │ [Filters] [Sort] [Group By] [Refresh] [Export] [Import] │ ├──────────────────────────────────────────────────────────────────┤ │ ☑ │ id │ name │ email │ created_at │ [actions] │ ├───┼─────┼─────────┼─────────────────┼─────────────┼───────────┤ │ ✓ │ 1 │ Alice │ alice@mail.com │ 2024-01-15 │ ✏️ 🗑️ │ │ ✓ │ 2 │ Bob │ bob@mail.com │ 2024-01-16 │ ✏️ 🗑️ │ │ ✓ │ 3 │ Charlie │ charlie@mail.co │ 2024-01-17 │ ✏️ 🗑️ │ │ ✓ │ 4 │ Diana │ diana@mail.com │ 2024-01-18 │ ✏️ 🗑️ │ └──────────────────────────────────────────────────────────────────┘ │ Showing 1-25 of 1,247 rows [First] [Prev] [1] [2] [Next] [Last]│ └───────────────────────────────────────────────────────────────────┘ ``` ### 5. Table Details Panel (Right Sidebar) ``` ┌─ Table Info ─────────────────────────────────┐ │ 📋 users │ ├──────────────────────────────────────────────┤ │ Columns (5) │ │ ┌──────────────────────────────────────────┐ │ │ │ name │ type │ null │ key │ │ │ ├──────────────────────────────────────────┤ │ │ │ id │ int │ ❌ │ PK │ │ │ │ name │ varchar │ ❌ │ │ │ │ │ email │ varchar │ ❌ │ UK │ │ │ │ created_at │ timestamp │ ✓ │ │ │ │ │ active │ boolean │ ❌ │ │ │ │ └──────────────────────────────────────────┘ │ │ │ │ Indexes (2) │ │ ├─ PRIMARY (id) │ │ └─ idx_email (email) │ │ │ │ Foreign Keys (0) │ │ │ │ Triggers (1) │ │ └─ update_timestamp │ └──────────────────────────────────────────────┘ ``` ### 6. New Connection Dialog ``` ┌─────────────────────────────────────────────────────────────┐ │ New Connection [✕] │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Database Type: [MySQL ▼] │ │ │ │ ┌─ Connection ──────────────────────────────────────────┐ │ │ │ Name: [Local Development ] │ │ │ │ Host: [localhost ] │ │ │ │ Port: [3306 ] │ │ │ │ Username: [root ] │ │ │ │ Password: [••••••••••••••••• ] 👁 │ │ │ │ Database: [ ] │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ ┌─ Advanced ────────────────────────────────────────────┐ │ │ │ SSL: [▼] │ │ │ │ Timeout: [30] seconds │ │ │ │ Max connections: [10] │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ [Test Connection] [Cancel] [Save & Connect] │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### 7. Export Data Dialog ``` ┌─────────────────────────────────────────────────────────────┐ │ Export Data [✕] │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Source: [✓ users (entire table) ▼] │ │ │ │ Format: [CSV Comma-separated (.) ▼] │ │ │ │ ┌─ Options ────────────────────────────────────────────┐ │ │ │ ☑ Include column headers │ │ │ │ ☐ Quote all fields │ │ │ │ Encoding: [UTF-8 ] │ │ │ │ Line endings: [Unix (LF) ▼] │ │ │ └──────────────────────────────────────────────────────┘ │ │ │ │ Output: (○) Copy to clipboard │ │ (●) Save to file │ │ [ /home/user/exports/users.csv ] [...] │ │ │ │ [Cancel] [Export] │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### 8. Empty State - No Connections ``` ┌─────────────────────────────────────────────────────────────┐ │ │ │ │ │ 🗄️ │ │ │ │ No Database Connections │ │ │ │ Get started by connecting to your first database │ │ │ │ │ │ [+ New Connection] │ │ │ │ Supported: MySQL, PostgreSQL, SQLite, MariaDB │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ## Responsive Considerations ### Small Screens (< 768px) - Sidebar becomes collapsible drawer - Tabs stack vertically - Toolbar items move to overflow menu - Data grid shows horizontal scroll ### Medium Screens (768px - 1024px) - Sidebar can be collapsed - Single query editor tab visible - Reduced panel padding --- ## Component States ### Button States - **Default**: Primary color background - **Hover**: Darken 10% - **Active**: Darken 20%, slight inset shadow - **Disabled**: 50% opacity, not clickable - **Loading**: Spinner replaces icon/text ### Input States - **Default**: Light border - **Focus**: Primary color ring - **Error**: Red border + error message - **Disabled**: Gray background, not editable - **Read-only**: Subtle background, copyable ### Connection Status - **Connected**: Green dot + "Connected" - **Connecting**: Spinning loader - **Disconnected**: Gray dot + "Disconnected" - **Error**: Red dot + error tooltip