netdesk/native/ui/README.md

NetDesk UI (Flutter)

The premium cross-platform front-end for NetDesk by Akronlogic — a self-hosted remote-desktop client targeting Windows, macOS, Linux, iOS and Android from one Flutter codebase.

This package is the presentation layer only. The heavy lifting — signaling, NAT traversal, the encrypted transport, capture/encode, decode and input injection — lives in the Rust crate netdesk-core. The two are joined in Phase 3 via flutter_rust_bridge.

---

Layout

ui/
├─ pubspec.yaml            # package + deps (flutter_rust_bridge/ffi land in Phase 3)
├─ lib/
│  ├─ main.dart            # NetDeskApp root, dark theme, home = ConnectScreen
│  ├─ theme.dart           # color tokens (#0B0F15 bg, #22C55E accent) + ThemeData
│  ├─ connect_screen.dart  # wordmark, Partner ID + password, Connect, "this device" ID
│  └─ session_screen.dart  # AppBar "NetDesk — <id>" + toolbar; hosts remote texture later
└─ README.md

Design language

• Background #0B0F15 (deep near-black), surface #121821, hairline borders #1E2733.
• Accent #22C55E green for the primary action, the brand mark and the "connected" indicator.
• Rounded cards, generous spacing, TeamViewer / RustDesk-grade information hierarchy. Dark-only for now.

All values are tokens in lib/theme.dart (NetDeskColors, NetDeskRadius, NetDeskSpacing) — no hardcoded hex elsewhere in the app.

---

How this binds to netdesk-core (Phase 3)

1. Add the bridge deps. Uncomment flutter_rust_bridge and ffi in pubspec.yaml, then flutter pub get.
2. Expose a Rust API. In ../core, add a #[frb]-annotated API module (e.g. src/api/session.rs) with the calls the UI needs: local_id(), connect(partner_id, password), disconnect(), list_monitors(), a frame/event stream, etc.
3. Generate the glue. Run flutter_rust_bridge_codegen generate, which emits typed Dart bindings under lib/src/rust/ and the matching Rust frb_generated.rs. The core is compiled as a C-ABI dylib/staticlib and linked per platform.
4. Wire the screens.
   • ConnectScreen — the Connect button calls connect(...); the "This device's ID" area shows local_id() instead of the current placeholder.
   • SessionScreen — the central placeholder becomes a Texture whose frames are pushed from the core's decoder; pointer/keyboard events are forwarded back for injection; the toolbar actions (disconnect, fullscreen, monitors, file transfer, settings) call their core counterparts.

Until then every control is a styled, non-functional placeholder so the UX can be reviewed and polished independently of the core.

---

Running (once Flutter is installed)

Flutter is not required to author these files, and was not run to create them. Install the Flutter SDK (>= 3.22) to build.

cd ui
flutter pub get

# Desktop
flutter run -d windows
flutter run -d macos
flutter run -d linux

# Mobile (device/emulator attached)
flutter run -d android
flutter run -d ios

Enable the desktop targets once with flutter config --enable-windows-desktop (and the --enable-macos-desktop / --enable-linux-desktop equivalents) if they are not already on.