5a83e86bc9
Initialize complete Wails (Go + React) database management tool
## Project Structure
- Frontend: React 18 + TypeScript + Vite
- Backend: Go 1.23 + Gin + GORM + SQLite + Zap
- Desktop: Wails v2
## Features Implemented
### UI/UX Design
- Complete design system with colors, typography, spacing
- Wireframes for all major screens
- User flows and interaction specifications
- Layout design with 3-panel architecture
### Frontend Components
- ConnectionPanel: Database connection sidebar with status indicators
- AppLayout: Resizable main layout framework
- MenuBar & ToolBar: Navigation and quick actions
- QueryEditor: SQL editor with syntax highlighting support
- DataGrid: Sortable, filterable, editable data table
- TableStructure: Table metadata viewer
- StatusBar: Connection info and query statistics
- StatusIndicator: Animated connection status component
### Backend Services
- Wails bindings: 15+ methods exposed to frontend
- Connection management: CRUD operations with connection pooling
- Query execution: SQL execution with result handling
- Table metadata: Schema introspection
- Encryption service: AES-256-GCM password encryption
- HTTP API: RESTful endpoints for debugging/integration
### Documentation
- Design system specification
- Feature requirements document
- Wireframes and user flows
- API testing guide
- Project README
## Technical Details
- Password encryption using AES-256-GCM
- Thread-safe connection manager with sync.RWMutex
- Unified error handling and logging
- Clean architecture with dependency injection
- SQLite for storing user data (connections, history)
🤖 Generated with Qoder
17 KiB
17 KiB
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