Experiment: Create alternative Slint-based GUI

[brainless]

Overview

Create a separate experimental GUI for Indistocks using the Slint framework as an alternative to the existing egui-based interface. This is an experiment to evaluate Slint's capabilities - the current egui GUI will remain as-is.

Motivation

• Evaluate declarative UI approach vs. immediate mode (egui)
• Explore better separation between UI markup and business logic
• Test Slint's performance and developer experience for stock data visualization
• Compare cross-platform capabilities and binary sizes

References

Slint Resources

• Main Repository: https://github.com/slint-ui/slint
• Rust Template: https://github.com/slint-ui/slint-rust-template
• Documentation: https://slint.dev/docs
• Rust API Docs: https://docs.slint.dev/latest/docs/rust/slint/

Local References

• Plotter example: /home/nocodo/Projects/slint/examples/plotter - demonstrates chart integration with Plotters library
• Gallery example: /home/nocodo/Projects/slint/examples/gallery - shows widget usage

Technical Approach

Project Structure

Indistocks/
├── indistocks-gui/      # EXISTING: Keep egui GUI as-is
├── indistocks-db/       # EXISTING: Shared backend (no changes)
└── indistocks-slint/    # NEW: Slint experiment
    ├── src/
    │   └── main.rs
    └── ui/
        └── *.slint      # Declarative UI markup

Setup Command

cd /home/nocodo/Projects/Indistocks
cargo generate --git https://github.com/slint-ui/slint-rust-template --name indistocks-slint

Then add to workspace in root Cargo.toml:

[workspace]
members = ["indistocks-gui", "indistocks-db", "indistocks-slint"]

Dependencies

• slint = "1.13" (or latest)
• slint-build = "1.13" (build dependency)
• plotters = "0.3" (for chart rendering, following Slint's plotter example)
• indistocks-db (existing shared backend)

Features to Replicate

All features from the existing GUI:

1. Top Navigation

• App title
• Search bar with real-time symbol lookup
• Navigation buttons (Stocks, Settings, Notifications)

2. Sidebar

• Recently viewed stocks list
• Clickable symbols with company names

3. Main Content - Stock Charts

• Historical price visualization using Plotters → Image buffer
• Interactive pan/zoom with TouchArea
• Time range filters (5D, 1M, 3M, 6M, 1Y, 5Y, All)
• Lazy loading for large datasets
• Adaptive date formatting

4. Stocks Grid

• Virtual scrolling table (using ListView)
• Display: Symbol, Name, LTP, % Change, Volume, High/Low
• Price range filters
• Time range selector
• Color-coded gains/losses
• Efficient rendering for thousands of rows

5. Settings Page

• NSE equity list download
• BhavCopy data download with progress tracking
• Status messages and date range display

Implementation Phases

• Phase 1: Basic setup with cargo-generate template
• Phase 2: Main window layout and navigation structure
• Phase 3: Search functionality and sidebar
• Phase 4: Stock chart viewer with Plotters integration
• Phase 5: Stocks data grid with virtual scrolling
• Phase 6: Settings and download progress
• Phase 7: Polish, testing, and documentation

Key Technical Challenges

1. Charting: Slint has no native plotting - use Plotters to render to SharedPixelBuffer then display as Image (see plotter example)
2. State Management: Convert egui's immediate mode to Slint's property bindings and callbacks
3. Virtual Scrolling: Use ListView component with efficient data models
4. Async Operations: Handle downloads with callbacks and property updates

Success Criteria

• Feature parity with egui version
• Comparable or better performance
• Cleaner separation of UI and logic
• Documentation of pros/cons vs. egui
• Recommendation on which approach to continue

Non-Goals

• Do NOT modify or remove the existing egui GUI
• Do NOT change the indistocks-db backend
• This is purely an experiment to evaluate alternatives

---

Labels: enhancement, experiment, ui