[WIP] Create GUI version of NVT transit tracking application

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Create a GUI Version of NVT (Next Vehicle TBM)

Objective

Transform the existing terminal-based TBM transit tracking application into a modern GUI application using the egui framework while maintaining all existing functionality and data models.

Background

The current application (NVT) is a well-structured Rust CLI application for tracking Bordeaux Métropole's public transportation network. It uses:

• MVC architecture (models, views, controllers)
• Real-time GTFS-RT data
• Caching system for performance
• Auto-refresh functionality

Requirements

1. Framework Selection

Use egui (with eframe) for the GUI:

• Pure Rust implementation
• Cross-platform (Windows, macOS, Linux)
• Excellent performance
• Modern look and feel
• Easy integration with existing code

2. Project Structure

Create a new binary target alongside the existing CLI:

src/
├── main.rs              # Existing CLI entry point
├── gui_main.rs          # NEW: GUI entry point
├── nvt_models.rs        # Keep unchanged
├── nvt_views.rs         # Keep for CLI
├── nvt_controllers.rs   # Adapt for shared logic
└── gui/
    ├── mod.rs           # GUI module root
    ├── app.rs           # Main GUI application state
    ├── views/
    │   ├── mod.rs
    │   ├── line_selector.rs
    │   ├── stop_selector.rs
    │   ├── arrivals_view.rs
    │   └── network_browser.rs
    └── components/
        ├── mod.rs
        ├── line_badge.rs
        ├── vehicle_card.rs
        └── alert_panel.rs

3. Core Features to Implement

Main Window Layout

• Top Bar: App title, refresh button, cache statistics
• Left Sidebar: Navigation menu with icons
  • Line Selector
  • Stop Selector
  • Real-Time Arrivals
  • Browse Network
  • Settings
• Main Content Area: Dynamic content based on selection
• Status Bar: Connection status, last update time

Line Selector View

• Search box with live filtering
• Scrollable list of lines with:
  • Color-coded badges (using actual TBM colors)
  • Line code and name
  • Number of stops served
• Selection highlights the line
• Shows line details panel:
  • Destinations with direction arrows
  • Active alerts
  • Real-time vehicle count

Stop Selector View

• Search box with autocomplete
• Filterable by selected line
• Map view option (bonus feature)
• List showing:
  • Stop name
  • Stop ID
  • Lines serving the stop (as colored badges)
  • Distance from center (optional)
• Click to select and view details

Real-Time Arrivals View

Auto-refreshing panel (30-second interval):

• Display selected stop name prominently
• If line filter active, show line badge
• Scrollable list of upcoming vehicles:
  • Line badge with color
  • Direction/destination
  • ETA with color coding:
    • 🔴 Red: ≤2 minutes
    • 🟡 Yellow: 3-5 minutes
    • 🟢 Green: 6-15 minutes
    • ⚪ Grey: >15 minutes
  • Delay status with icon
  • Vehicle ID (if real-time)
  • Data source indicator (GPS vs scheduled)
• "No vehicles" message with helpful suggestions
• Pause/Resume auto-refresh button
• Manual refresh button

Network Browser View

Tabbed interface:

• All Lines Tab:
  • Grouped by type (Tram/BRT, Buses)
  • Expandable sections
  • Click to select line
• All Stops Tab:
  • Paginated table (20 per page)
  • Sortable columns
  • Search filter
• Active Alerts Tab:
  • List of current alerts
  • Severity indicators
  • Affected lines/stops
  • Expandable details

Settings View

• Cache management:
  • Show cache age
  • Clear cache button
  • Force refresh button
• Display preferences:
  • Theme selection (light/dark)
  • Font size
  • Auto-refresh interval
• About section with version info

4. Visual Design

Color Scheme

Use TBM's official line colors from GTFS data:

// Example rendering
fn render_line_badge(ui: &mut Ui, line_code: &str, hex_color: &str) {
    let (r, g, b) = parse_hex_color(hex_color);
    let bg_color = Color32::from_rgb(r, g, b);
    let text_color = if is_dark_color(r, g, b) {
        Color32::WHITE
    } else {
        Color32::BLACK
    };
    
    ui.colored_label(bg_color, text_color, line_code);
}

Icons and Emojis

Use Unicode emojis for visual appeal:

• 🚊 Trams
• 🚌 Buses
• 📍 Stops
• 🎯 Destinations
• ⚠️ Alerts
• 🔄 Refresh
• ⏰ Time
• 📊 Statistics

5. Technical Implementation

Dependencies to Add

[dependencies]
# Existing dependencies remain...

# GUI dependencies
eframe = "0.28"
egui = "0.28"
egui_extras = { version = "0.28", features = ["image"] }

State Management

pub struct NvtGuiApp {
    // Network data
    cache: Arc<Mutex<CachedNetworkData>>,
    
    // UI state
    current_view: AppView,
    selected_line: Option<String>,
    selected_stop: Option<String>,
    
    // Search state
    line_search: String,
    stop_search: String,
    
    // Auto-refresh
    last_refresh: Instant,
    refresh_interval: Duration,
    auto_refresh_enabled: bool,
    
    // Display state
    show_load...

</details>

*This pull request was created as a result of the following prompt from Copilot chat.*
> 
> # Create a GUI Version of NVT (Next Vehicle TBM)
> 
> ## Objective
> Transform the existing terminal-based TBM transit tracking application into a modern GUI application using the `egui` framework while maintaining all existing functionality and data models.
> 
> ## Background
> The current application (`NVT`) is a well-structured Rust CLI application for tracking Bordeaux Métropole's public transportation network. It uses:
> - MVC architecture (models, views, controllers)
> - Real-time GTFS-RT data
> - Caching system for performance
> - Auto-refresh functionality
> 
> ## Requirements
> 
> ### 1. Framework Selection
> Use **egui** (with eframe) for the GUI:
> - Pure Rust implementation
> - Cross-platform (Windows, macOS, Linux)
> - Excellent performance
> - Modern look and feel
> - Easy integration with existing code
> 
> ### 2. Project Structure
> Create a new binary target alongside the existing CLI:
> ```
> src/
> ├── main.rs              # Existing CLI entry point
> ├── gui_main.rs          # NEW: GUI entry point
> ├── nvt_models.rs        # Keep unchanged
> ├── nvt_views.rs         # Keep for CLI
> ├── nvt_controllers.rs   # Adapt for shared logic
> └── gui/
>     ├── mod.rs           # GUI module root
>     ├── app.rs           # Main GUI application state
>     ├── views/
>     │   ├── mod.rs
>     │   ├── line_selector.rs
>     │   ├── stop_selector.rs
>     │   ├── arrivals_view.rs
>     │   └── network_browser.rs
>     └── components/
>         ├── mod.rs
>         ├── line_badge.rs
>         ├── vehicle_card.rs
>         └── alert_panel.rs
> ```
> 
> ### 3. Core Features to Implement
> 
> #### Main Window Layout
> - **Top Bar**: App title, refresh button, cache statistics
> - **Left Sidebar**: Navigation menu with icons
>   - Line Selector
>   - Stop Selector
>   - Real-Time Arrivals
>   - Browse Network
>   - Settings
> - **Main Content Area**: Dynamic content based on selection
> - **Status Bar**: Connection status, last update time
> 
> #### Line Selector View
> - Search box with live filtering
> - Scrollable list of lines with:
>   - Color-coded badges (using actual TBM colors)
>   - Line code and name
>   - Number of stops served
> - Selection highlights the line
> - Shows line details panel:
>   - Destinations with direction arrows
>   - Active alerts
>   - Real-time vehicle count
> 
> #### Stop Selector View
> - Search box with autocomplete
> - Filterable by selected line
> - Map view option (bonus feature)
> - List showing:
>   - Stop name
>   - Stop ID
>   - Lines serving the stop (as colored badges)
>   - Distance from center (optional)
> - Click to select and view details
> 
> #### Real-Time Arrivals View
> **Auto-refreshing panel (30-second interval):**
> - Display selected stop name prominently
> - If line filter active, show line badge
> - Scrollable list of upcoming vehicles:
>   - Line badge with color
>   - Direction/destination
>   - ETA with color coding:
>     - 🔴 Red: ≤2 minutes
>     - 🟡 Yellow: 3-5 minutes
>     - 🟢 Green: 6-15 minutes
>     - ⚪ Grey: >15 minutes
>   - Delay status with icon
>   - Vehicle ID (if real-time)
>   - Data source indicator (GPS vs scheduled)
> - "No vehicles" message with helpful suggestions
> - Pause/Resume auto-refresh button
> - Manual refresh button
> 
> #### Network Browser View
> **Tabbed interface:**
> - **All Lines Tab**:
>   - Grouped by type (Tram/BRT, Buses)
>   - Expandable sections
>   - Click to select line
> - **All Stops Tab**:
>   - Paginated table (20 per page)
>   - Sortable columns
>   - Search filter
> - **Active Alerts Tab**:
>   - List of current alerts
>   - Severity indicators
>   - Affected lines/stops
>   - Expandable details
> 
> #### Settings View
> - Cache management:
>   - Show cache age
>   - Clear cache button
>   - Force refresh button
> - Display preferences:
>   - Theme selection (light/dark)
>   - Font size
>   - Auto-refresh interval
> - About section with version info
> 
> ### 4. Visual Design
> 
> #### Color Scheme
> Use TBM's official line colors from GTFS data:
> ```rust
> // Example rendering
> fn render_line_badge(ui: &mut Ui, line_code: &str, hex_color: &str) {
>     let (r, g, b) = parse_hex_color(hex_color);
>     let bg_color = Color32::from_rgb(r, g, b);
>     let text_color = if is_dark_color(r, g, b) {
>         Color32::WHITE
>     } else {
>         Color32::BLACK
>     };
>     
>     ui.colored_label(bg_color, text_color, line_code);
> }
> ```
> 
> #### Icons and Emojis
> Use Unicode emojis for visual appeal:
> - 🚊 Trams
> - 🚌 Buses
> - 📍 Stops
> - 🎯 Destinations
> - ⚠️ Alerts
> - 🔄 Refresh
> - ⏰ Time
> - 📊 Statistics
> 
> ### 5. Technical Implementation
> 
> #### Dependencies to Add
> ```toml
> [dependencies]
> # Existing dependencies remain...
> 
> # GUI dependencies
> eframe = "0.28"
> egui = "0.28"
> egui_extras = { version = "0.28", features = ["image"] }
> ```
> 
> #### State Management
> ```rust
> pub struct NvtGuiApp {
>     // Network data
>     cache: Arc<Mutex<CachedNetworkData>>,
>     
>     // UI state
>     current_view: AppView,
>     selected_line: Option<String>,
>     selected_stop: Option<String>,
>     
>     // Search state
>     line_search: String,
>     stop_search: String,
>     
>     // Auto-refresh
>     last_refresh: Instant,
>     refresh_interval: Duration,
>     auto_refresh_enabled: bool,
>     
>     // Display state
>     show_loading: bool,
>     error_message: Option<String>,
>     theme: Theme,
> }
> 
> enum AppView {
>     LineSelector,
>     StopSelector,
>     RealTimeArrivals,
>     NetworkBrowser,
>     Settings,
> }
> ```
> 
> #### Async Data Loading
> Use tokio with eframe's repaint mechanism:
> ```rust
> impl eframe::App for NvtGuiApp {
>     fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
>         // Check if auto-refresh needed
>         if self.auto_refresh_enabled && 
>            self.last_refresh.elapsed() > self.refresh_interval {
>             self.trigger_refresh(ctx);
>         }
>         
>         // Render UI
>         self.render_ui(ctx);
>         
>         // Request repaint for animations
>         ctx.request_repaint_after(Duration::from_millis(100));
>     }
> }
> 
> fn trigger_refresh(&mut self, ctx: &egui::Context) {
>     let cache = Arc::clone(&self.cache);
>     let ctx_clone = ctx.clone();
>     
>     tokio::spawn(async move {
>         if let Ok(mut cache_guard) = cache.lock() {
>             let _ = NVTModels::smart_refresh(&mut cache_guard).await;
>             ctx_clone.request_repaint();
>         }
>     });
>     
>     self.last_refresh = Instant::now();
> }
> ```
> 
> #### Error Handling
> - Display errors in a non-blocking toast notification
> - Fallback to cached data when network fails
> - Show connection status indicator
> 
> ### 6. Cargo Configuration
> 
> Update `Cargo.toml`:
> ```toml
> [[bin]]
> name = "nvt"
> path = "src/main.rs"
> 
> [[bin]]
> name = "nvt-gui"
> path = "src/gui_main.rs"
> ```
> 
> ### 7. Build and Run Commands
> 
> ```bash
> # Build CLI version
> cargo build --release --bin nvt
> 
> # Build GUI version
> cargo build --release --bin nvt-gui
> 
> # Run GUI version
> cargo run --release --bin nvt-gui
> ```
> 
> ### 8. Platform-Specific Considerations
> 
> #### Windows
> - Set app icon using `embed-resource`
> - Handle Windows-style paths for cache
> 
> #### macOS
> - Create app bundle with proper Info.plist
> - Handle macOS-specific permissions
> 
> #### Linux
> - Use system theme detection
> - Ensure compatibility with Wayland/X11
> 
> ### 9. Testing Requirements
> 
> - Ensure all existing CLI functionality works
> - Test auto-refresh mechanism
> - Verify cache system integration
> - Test error handling (network failures)
> - Cross-platform testing
> 
> ### 10. Future Enhancements (Optional)
> 
> - Interactive map using egui_plot or integration with mapping library
> - Export functionality (CSV, JSON)
> - Notifications system
> - Favorite stops/lines
> - Trip planning interface
> - Multi-language support
> 
> ## Implementation Priority
> 
> 1. **Phase 1**: Basic GUI skeleton with navigation
> 2. **Phase 2**: Line selector and stop selector views
> 3. **Phase 3**: Real-time arrivals view with auto-refresh
> 4. **Phase 4**: Network browser and settings
> 5. **Phase 5**: Polish, error handling, and optimization
> 
> ## Acceptance Criteria
> 
> - ✅ GUI application launches without errors
> - ✅ All views are navigable
> - ✅ Line and stop selection works correctly
> - ✅ Real-time arrivals display with proper formatting
> - ✅ Auto-refresh functionality works (30-second interval)
> - ✅ Line colors render correctly
> - ✅ Cache system integrates properly
> - ✅ Error messages display gracefully
> - ✅ Cross-platform compatibility (Windows, macOS, Linux)
> - ✅ Performance is smooth (60 FPS UI)
> 
> ## Notes
> 
> - Preserve all existing CLI functionality (don't modify existing code)
> - Reuse `nvt_models.rs` without changes
> - Make `nvt_controllers.rs` functions more modular for GUI reuse
> - Keep the GUI responsive during network operations
> - Follow egui best practices for immediate mode UI
> - Maintain the same data accuracy as CLI version
> 
> 

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey).

[Cycl0o0]

retry