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
12 KiB
12 KiB
uzdb User Flows
1. First-Time User Experience
┌─────────────────┐
│ Launch App │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Empty State: │
│ "No Connections"│
└────────┬────────┘
│
│ Click "New Connection"
▼
┌─────────────────┐
│ Connection │
│ Wizard │
│ 1. Select Type │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 2. Configure │
│ Connection │
│ (Host, Port, │
│ Credentials) │
└────────┬────────┘
│
│ Click "Test Connection"
▼
┌─────────────────┐
│ Test Result │
│ ✓ Success │
│ ✕ Error + Help │
└────────┬────────┘
│
│ Save & Connect
▼
┌─────────────────┐
│ Main Interface │
│ with Schema │
│ Explorer │
└─────────────────┘
2. Query Execution Flow
┌─────────────────┐
│ Open Query Tab │
│ (Ctrl+T) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Write/Edit SQL │
│ - Syntax │
│ highlighting │
│ - Autocomplete │
│ - Snippets │
└────────┬────────┘
│
│ Ctrl+Enter or Click Run
▼
┌─────────────────┐
│ Execute Query │
│ Show loading │
│ indicator │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Display Results │
│ - Data grid │
│ - Row count │
│ - Execution time│
│ - Status │
└────────┬────────┘
│
├──────────────┬──────────────┐
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Export Data │ │ Edit Cell │ │ Save Query │
│ (CSV, JSON) │ │ (Inline) │ │ (.sql file) │
└─────────────┘ └─────────────┘ └─────────────┘
3. Table Browsing Flow
┌─────────────────┐
│ Expand Database │
│ in Sidebar │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Expand Schema │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Click Table │
└────────┬────────┘
│
├─────────────────┬────────────────┐
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Preview Top │ │ View │ │ Open Table │
│ 100 Rows │ │ Structure │ │ Details │
│ (Double-click)│ │ (Right panel)│ │ Panel │
└─────────────┘ └─────────────┘ └─────────────┘
│
▼
┌─────────────────┐
│ Columns, Indexes│
│ Foreign Keys, │
│ Triggers │
└─────────────────┘
4. Connection Management Flow
Add New Connection
┌─────────────────┐
│ Click "+" │
│ or File > New │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Select DB Type │
│ ○ MySQL │
│ ○ PostgreSQL │
│ ○ SQLite │
│ ○ MariaDB │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Fill Form │
│ - Name │
│ - Host/Port │
│ - Auth │
│ - Advanced opts │
└────────┬────────┘
│
│ Test Connection
▼
┌─────────────────┐
│ Connection Test │
│ Result │
└────────┬────────┘
│
│ Success → Save
▼
┌─────────────────┐
│ Added to │
│ Connection List │
└─────────────────┘
Edit/Delete Connection
┌─────────────────┐
│ Right-click │
│ Connection │
└────────┬────────┘
│
├─────────────┬──────────────┐
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Edit │ │ Duplicate │ │ Delete │
│ Connection │ │ Connection │ │ Connection │
└─────────────┘ └─────────────┘ └──────┬──────┘
│
▼
┌─────────────────┐
│ Confirm Delete │
│ "Are you sure?" │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Connection │
│ Removed │
└─────────────────┘
5. Data Export Flow
┌─────────────────┐
│ Select Data │
│ (table/query │
│ results) │
└────────┬────────┘
│
│ Click Export button
▼
┌─────────────────┐
│ Export Dialog │
│ - Format: │
│ CSV/JSON/SQL │
│ - Options │
│ - Destination │
└────────┬────────┘
│
│ Configure options
▼
┌─────────────────┐
│ Review Settings │
│ - Preview │
│ - Row count │
│ - File size est.│
└────────┬────────┘
│
│ Click Export
▼
┌─────────────────┐
│ Export Progress │
│ [████████░░] 80%│
└────────┬────────┘
│
▼
┌─────────────────┐
│ Export Complete │
│ ✓ 1,234 rows │
│ exported to │
│ /path/file.csv│
│ │
│ [Open File] │
└─────────────────┘
6. Error Handling Flow
Connection Error
┌─────────────────┐
│ Attempt Connect │
└────────┬────────┘
│
│ Fails
▼
┌─────────────────┐
│ Error Dialog │
│ ┌─────────────┐ │
│ │ ⚠ Connection│ │
│ │ Failed │ │
│ │ │ │
│ │ ECONNREFUSED│ │
│ │ localhost: │ │
│ │ 3306 │ │
│ └─────────────┘ │
│ │
│ Common causes: │
│ • Server not │
│ running │
│ • Wrong port │
│ • Firewall │
│ │
│ [Retry] [Help] │
└─────────────────┘
Query Error
┌─────────────────┐
│ Execute Query │
└────────┬────────┘
│
│ Syntax Error
▼
┌─────────────────┐
│ Results Panel │
│ Shows error: │
│ ┌─────────────┐ │
│ │ ❌ Error │ │
│ │ Line 3: │ │
│ │ Unknown col │ │
│ │ 'emai' │ │
│ │ │ │
│ │ SELECT id, │ │
│ │ emai │ │
│ │ ^^^^ │ │
│ └─────────────┘ │
└─────────────────┘
7. Keyboard Navigation Flow
Global Shortcuts:
- Ctrl+N: New connection
- Ctrl+T: New query tab
- Ctrl+S: Save
- Ctrl+W: Close tab
- Ctrl+Enter: Run query
- Ctrl+F: Find in editor
- Ctrl+,: Settings
Within Data Grid:
- Arrow keys: Navigate cells
- Enter: Edit cell
- Esc: Cancel edit
- Ctrl+C: Copy selection
- Ctrl+F: Filter column
Within Query Editor:
- Ctrl+Space: Autocomplete
- Tab: Insert snippet
- Ctrl+/: Toggle comment
- Ctrl+D: Duplicate line
8. Settings/Preferences Flow
┌─────────────────┐
│ Tools > Settings│
│ or Ctrl+, │
└────────┬────────┘
│
▼
┌─────────────────┐
│ Settings Modal │
│ ┌─────────────┐ │
│ │ General │ │ ← Selected
│ │ Editor │ │
│ │ Data Grid │ │
│ │ Keybindings │ │
│ │ Themes │ │
│ └─────────────┘ │
│ │
│ ┌─────────────┐ │
│ │ Font size │ │
│ │ [14 ▼] │ │
│ │ │ │
│ │ Theme │ │
│ │ [Light ▼] │ │
│ │ │ │
│ │ Auto-save │ │
│ │ [✓] │ │
│ └─────────────┘ │
│ │
│ [Reset] [OK] │
└─────────────────┘
Edge Cases Handled
-
Lost Connection During Query
- Show error message
- Offer to reconnect
- Preserve query text
-
Large Result Sets (>10k rows)
- Warn user before loading all
- Offer to limit results
- Provide streaming option
-
Unsaved Changes on Close
- Prompt to save
- Auto-save to temp file
- Restore on relaunch
-
Multiple Tabs with Same Connection
- Share connection instance
- Independent transactions
- Clear tab indicators
-
Long-running Queries
- Show progress if available
- Provide cancel button
- Timeout configuration