Nimbus-Focus-App Svelte Themes

Nimbus Focus App

🌿 A premium, ultra-lightweight system tray focus companion app "Nimbus 🌿" built with Tauri v2, Rust, SvelteKit, and Svelte 5. Features Pomodoro timers, native OS notifications, local persistence, and zero-asset programmatically synthesized audio alerts. Designed with sleek look and distraction-free auto-hide on blur.

🌿 NIMBUS

β€œWork smoothly. Rest intelligently.”

Nimbus is an ultra-lightweight, premium cross-platform desktop productivity and health companion that lives entirely in your system tray/menu bar. Designed with contemporary macOS and Apple-utility aesthetics in mind, Nimbus helps you maintain an optimal focus rhythm, prevent burnout, and manage your daily streaks using Pomodoro-based focus periods, native OS notifications, and zero-asset programmatically synthesized ambient audio alerts.


Nimbus App Logo

Productivity β€’ Wellness β€’ Pomodoro β€’ Desktop Utility

Tauri v2 SvelteKit Svelte 5 Rust TailwindCSS

Download for Windows   Download for macOS

View all releases & alternative formats


πŸ“₯ Download & Installation

To run Nimbus as a standalone desktop utility on your system:

  1. Navigate to the GitHub Releases page.
  2. Under the Assets section of the latest release, download the package matching your operating system:
    • Windows: Download nimbus_0.1.0_x64-setup.exe or .msi.
    • macOS (Intel): Download nimbus_0.1.0_x64.dmg.
    • macOS (Apple Silicon): Download nimbus_0.1.0_aarch64.dmg.
  3. Open the installer and follow the standard on-screen instructions.
  4. Once installation completes, launch Nimbus. It will run silently in your system tray/menu bar!

πŸ“Έ App Interface Previews

Nimbus is designed to look like a premium, integrated desktop utility, sitting seamlessly on top of other applications.

1. Main Focus Dashboard & Controls

The main panel utilizes a sharp rectangular metallic surface, customized with centered Lucide-style vector controls, today's statistics, and a linear gradient circular progress ring.

Nimbus Dashboard Interface

2. System Tray Minimization

Upon launch, Nimbus minimizes into the Windows system tray. The tray icon uses your custom leaf-cloud logo 🌿 and opens the dashboard on left-click.

Nimbus System Tray Minimization

3. Slide-Up Configuration Settings

Clicking the settings gear button slides in a modal overlay, featuring custom Web Audio-styled sliders, translucent thin scrollbars, and switches to toggle notifications and zen soundscapes.

Nimbus Settings Configuration Panel


πŸš€ Key Architecture Map

Nimbus bridges SvelteKit's static client views with a highly-secure Rust core using Tauri v2 capability permissions:

graph TD
    subgraph Frontend [SvelteKit + Svelte 5 + Tailwind v4]
        UI[Glassmorphic Tray Window]
        Store[Svelte Runes State Engine]
        Audio[Web Audio Calming Synthesizer]
    end

    subgraph Backend [Tauri v2 + Rust Core]
        Tray[System Tray Icon & Menu]
        WinMgr[Screen Position & Blur Hiding]
        StorePlg[Tauri Store Plugin]
        NotifPlg[Tauri Notification Plugin]
    end

    UI <--> Store
    Store <--> StorePlg
    Store <--> NotifPlg
    Tray --> WinMgr
    WinMgr --> UI

πŸ› οΈ Code Deep Dive & Implementation

1. Rust System Tray & Positioning (src-tauri/src/lib.rs)

The Rust backend tracks system tray events, handles window focus loss (blur), and calculates screen coordinates:

// Helper function to position the window at the bottom-right corner, just above the taskbar.
fn position_window(window: &tauri::WebviewWindow) {
    if let Ok(Some(monitor)) = window.primary_monitor() {
        let scale_factor = monitor.scale_factor();
        let monitor_size = monitor.size();
        let monitor_pos = monitor.position();

        let window_width = (360.0 * scale_factor) as u32;
        let window_height = (520.0 * scale_factor) as u32;

        let padding_x = (16.0 * scale_factor) as i32;
        let padding_y = (60.0 * scale_factor) as i32;

        let x = monitor_pos.x + (monitor_size.width as i32) - (window_width as i32) - padding_x;
        let y = monitor_pos.y + (monitor_size.height as i32) - (window_height as i32) - padding_y;

        let _ = window.set_position(tauri::PhysicalPosition::new(x, y));
    }
}

Focus loss triggers automatic hiding in the background:

// Setup blur hiding (auto-hide when clicking outside)
let w = window.clone();
window.on_window_event(move |event| {
    if let tauri::WindowEvent::Focused(false) = event {
        let _ = w.hide();
    }
});

2. Svelte 5 Reactive Class Engine (src/lib/stores/timer.svelte.ts)

We use Svelte 5's $state and $derived inside a TypeScript class to govern our Pomodoro state machine:

export class TimerEngine {
    // Svelte 5 runes for premium reactive state
    state = $state<TimerState>('work');
    status = $state<'idle' | 'running' | 'paused'>('idle');
    timeLeft = $state<number>(25 * 60);
    durationWork = $state<number>(25);
    
    // Derived values are automatically calculated on state change
    totalDuration = $derived(
        this.state === 'work' ? this.durationWork * 60 :
        this.state === 'shortBreak' ? this.durationShortBreak * 60 :
        this.durationLongBreak * 60
    );
}

3. Programmatic Zen Audio Chime (Zero-Asset Web Audio)

On transition boundaries, Svelte synthesizes an arpeggiated A Major chord (A4, C#5, E5) programmatically, staggering notes to create a zither strum:

public playCalmingChime() {
    if (!this.soundEnabled) return;
    try {
        const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext;
        const ctx = new AudioContextClass();
        const now = ctx.currentTime;
        const frequencies = [440.00, 554.37, 659.25]; // A Major Chord
        
        frequencies.forEach((freq, idx) => {
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'sine';
            osc.frequency.setValueAtTime(freq, now + idx * 0.12); // Stagger notes
            
            // Envelope: Fast attack, slow exponential decay
            gain.gain.setValueAtTime(0, now + idx * 0.12);
            gain.gain.linearRampToValueAtTime(0.12, now + idx * 0.12 + 0.08);
            gain.gain.exponentialRampToValueAtTime(0.0001, now + idx * 0.12 + 2.4);
            
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start(now + idx * 0.12);
            osc.stop(now + idx * 0.12 + 2.6);
        });
    } catch (e) { console.error(e); }
}

4. Global Transparency Override (src/routes/layout.css)

To prevent the Webview2 layout container from displaying standard white background borders, custom overrides force transparency:

/* Force Webview transparency on all root containers to eliminate white corners */
html, body, #svelte, [style*="display: contents"] {
    background: transparent !important;
    background-color: transparent !important;
}

πŸ“¦ Exact Tech Stack Specifications

Below are the exact versions utilized in the development, compilation, and packaging of Nimbus:

βš™οΈ System Runtimes

  • Rust Compiler: v1.95.0 (Rust 2021 Edition)
  • Node.js: v24.14.1
  • npm: v11.11.0

πŸ¦€ Rust Backend Dependencies (src-tauri/Cargo.toml)

  • Tauri Core SDK: v2.11.2 (with tray-icon support)
  • Tauri Build Helper: v2.6.2
  • Tauri Plugins:
    • tauri-plugin-notification: v2 (Native OS Notifications)
    • tauri-plugin-store: v2 (Persistent State Storage)
    • tauri-plugin-shell: v2
    • tauri-plugin-process: v2
    • tauri-plugin-log: v2

🌐 Frontend Web Dependencies (package.json)

  • Svelte: v5.55.2 (Svelte 5 Runes)
  • SvelteKit: v2.57.0 (with static adapter v3.0.10)
  • Tailwind CSS: v4.2.2 (via @tailwindcss/vite compiler)
  • Vite: v8.0.7
  • TypeScript: v6.0.2

πŸ› οΈ Developer Setup & Commands

Ensure you have Node.js, npm, and the Rust toolchain installed.

1. Install Dependencies

npm install

2. Launch Local Development

npx tauri dev

Vite compiles the frontend on custom port 5183 (preventing collisions with other local servers) while Cargo watches the Rust backend for changes.

3. Build Web Assets

npm run build

This compiles TypeScript and exports SvelteKit statically to /build using @sveltejs/adapter-static.

4. Package STANDALONE Application

Bundle, optimize, and compile a standalone production-ready Windows binary:

npx tauri build

Tauri compiles under the release profile, embedding static frontend assets directly inside the binary. The resulting standalone executable (app.exe) and OS installers (.exe/.msi) are compiled under src-tauri/target/release/ and are only ~10MB!


πŸ’‘ Troubleshooting & Diagnostics

1. Port Collisions (Port 5173 is in use)

If you have another Vite project (e.g. Voxely) running on the default port 5173, Vite will automatically shift your dev server to 5174. However, since Tauri looks for the frontend at 5173, it will render the wrong app!

  • Our Solution: Nimbus is hardlocked to port 5183 inside Svelte's vite.config.ts and set to strictPort: true. Tauri's tauri.conf.json is set to read from 5183. This guarantees isolated, clash-free execution.

2. File Lock Failures (Access is denied - os error 5)

If you try to run npx tauri build or npx tauri dev while an instance of Nimbus is running in your system tray, the Cargo compiler will fail to overwrite app.exe because the file is locked by Windows.

  • Solution: Terminate the active instance before compiling:
    Stop-Process -Name "app" -Force -ErrorAction SilentlyContinue
    

πŸ“ Directory Architecture

nimbus/
β”œβ”€β”€ src/                      # SvelteKit + Svelte 5 Frontend
β”‚   β”œβ”€β”€ lib/
β”‚   β”‚   β”œβ”€β”€ assets/           # SVG icons and visual assets
β”‚   β”‚   └── stores/
β”‚   β”‚       └── timer.svelte.ts # Svelte 5 Runes state machine
β”‚   β”œβ”€β”€ routes/
β”‚   β”‚   β”œβ”€β”€ +layout.svelte    # Root HTML layout renderer
β”‚   β”‚   β”œβ”€β”€ +layout.ts        # Disable SSR, enable SPA prerender
β”‚   β”‚   β”œβ”€β”€ +page.svelte      # Timer UI, sliders & settings
β”‚   β”‚   └── layout.css        # Tailwind v4 import & transparency overrides
β”‚   β”œβ”€β”€ app.d.ts              # TypeScript global definitions
β”‚   └── app.html              # Custom fonts, scrollbar styles & transparent wrapper
β”œβ”€β”€ src-tauri/                # Tauri Rust Backend
β”‚   β”œβ”€β”€ capabilities/
β”‚   β”‚   └── default.json      # Granular Svelte-to-Rust capability permissions
β”‚   β”œβ”€β”€ icons/                # System Tray & Application icon files
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ lib.rs            # Tray icons, blur-hide & dynamic coordinates
β”‚   β”‚   └── main.rs           # Core entry point
β”‚   β”œβ”€β”€ build.rs              # Tauri compiler build script
β”‚   β”œβ”€β”€ Cargo.toml            # Rust manifest declaring plugins & tray-icon feature
β”‚   └── tauri.conf.json       # App definitions, opaque overlays, and build paths
β”œβ”€β”€ static/                   # Global Static Web Assets
β”‚   β”œβ”€β”€ logo.png              # Generated holographic green leaf cloud logo
β”‚   β”œβ”€β”€ screenshot-dashboard.png # Copied user request dashboard screenshot
β”‚   β”œβ”€β”€ screenshot-settings.png  # Copied settings panel screenshot
β”‚   └── screenshot-tray.png      # Copied system tray placement screenshot
β”œβ”€β”€ package.json              # Svelte dependencies and Tauri CLI shortcommands
β”œβ”€β”€ vite.config.ts            # Vite custom port configuration (locked to 5183)
└── README.md                 # Project Walkthrough & Developer Documentation

Top categories

Loading Svelte Themes