Add prototype UI clients

client/ui-electron/QUICKSTART.md

@@ -0,0 +1,157 @@
+# Quick Start Guide
+
+## Getting Started in 3 Steps
+
+### 1. Install Dependencies
+
+```bash
+cd /home/pascal/Git/Netbird/netbird/client/ui-electron
+npm install
+```
+
+This will install all required packages including:
+- Electron 28
+- React 18
+- TypeScript 5
+- Tailwind CSS
+- Framer Motion
+- gRPC libraries
+
+### 2. Start Development Server
+
+```bash
+npm run dev
+```
+
+This command:
+- Starts Vite dev server on `http://localhost:5173`
+- Compiles Electron TypeScript code
+- Launches Electron window
+- Enables hot reload for React components
+
+### 3. Start Using the App
+
+The app will open with:
+- Modern glass-themed interface
+- System tray icon
+- Real-time connection status
+- Full feature access
+
+## What You'll See
+
+### Dashboard Page
+- Connection status with animated icon
+- Connect/Disconnect button
+- Quick feature overview
+- Configuration summary
+
+### Networks Page
+- List of available networks
+- Select/deselect networks
+- View domains and IPs
+- Filter by type
+
+### Settings Page
+- Connection configuration
+- Feature toggles (SSH, Rosenpass, etc.)
+- Advanced settings
+- Save changes instantly
+
+### Profiles Page
+- View all profiles
+- Switch between profiles
+- Active profile indicator
+
+### Debug Page
+- Create debug bundles
+- Anonymization option
+- Export diagnostics
+
+## Development Tips
+
+### File Structure
+```
+src/
+├── App.tsx           # Main app with routing
+├── store/            # Zustand state management
+└── pages/            # Individual page components
+```
+
+### Making Changes
+
+1. **UI Changes**: Edit files in `src/pages/` - auto-reloads
+2. **State Logic**: Modify `src/store/useStore.ts`
+3. **Electron Main**: Edit `electron/main.ts` - requires restart
+4. **gRPC Client**: Update `electron/grpc/client.ts`
+5. **Styles**: Customize `tailwind.config.js`
+
+### Testing Connection
+
+Ensure NetBird daemon is running:
+
+```bash
+netbird status
+```
+
+Should show daemon is operational.
+
+## Building for Production
+
+### Quick Build
+
+```bash
+npm run build
+npm run build:linux
+```
+
+Creates distributable packages in `release/` directory.
+
+### Packages Created
+
+- **AppImage**: Portable Linux application
+- **.deb**: Debian/Ubuntu package
+- **Unpacked**: Direct executable
+
+## Troubleshooting
+
+### Port 5173 already in use
+```bash
+kill $(lsof -t -i:5173)
+npm run dev
+```
+
+### Cannot connect to daemon
+```bash
+systemctl status netbird
+netbird service start  # if not running
+```
+
+### Build errors
+```bash
+rm -rf node_modules package-lock.json dist
+npm install
+npm run build
+```
+
+## Next Steps
+
+1. **Customize Theme**: Edit `tailwind.config.js` colors
+2. **Add Features**: Extend pages in `src/pages/`
+3. **Add Icons**: Place PNGs in `assets/` directory
+4. **Test Build**: Run `npm run build:linux`
+
+## Resources
+
+- **NetBird Docs**: https://docs.netbird.io
+- **Electron Docs**: https://electronjs.org/docs
+- **React Docs**: https://react.dev
+- **Tailwind Docs**: https://tailwindcss.com
+
+## Support
+
+- GitHub Issues: https://github.com/netbirdio/netbird/issues
+- NetBird Slack: Join via netbird.io
+
+---
+
+Happy coding! Enjoy the modern NetBird UI.