dashboard Svelte Themes

Dashboard

A Svelte / Rust dashboard

Dashboard App

This is a Tauri desktop application built with Svelte 5 and Bun. It was converted from a React source codebase into a modern Svelte 5 implementation.

Getting Started

Prerequisites

Installation

Install the dependencies:

bun install

Development

To start the development server with Tauri:

bun x tauri dev

Building for Production

To build the application:

bun x tauri build

Project Structure

  • src-tauri: Contains the Rust core of the Tauri application.
  • src/routes: SvelteKit routes defining the application pages.
  • src/lib/components: Reusable UI components.
    • dashboard: specialized components for the main dashboard view.
    • ui: Generic UI components (likely from shadcn-svelte).
  • src/lib/hooks: Reactive hooks, including is-mobile.svelte.ts.

Code Review & Recommendations

The following recommendations are based on a review of the dashboard_app/src directory.

Resizing and Responsive Logic

You asked about code handling resizing. There are a few key areas handling this:

  1. src/lib/hooks/is-mobile.svelte.ts: This hook uses window.matchMedia (via svelte/reactivity's MediaQuery) to track if the viewport width is below a certain breakpoint (default 768px).
  2. src/lib/components/ui/sidebar/context.svelte.ts: This uses the IsMobile hook to automatically collapse the sidebar on smaller screens.
  3. src/lib/components/ui/sidebar/sidebar-rail.svelte: This component renders a grab handle for manually resizing the sidebar. It contains logic for mouse interactions to adjust width.

Recommendation: While this is a desktop app, keeping this logic is generally recommended unless you plan to lock the application window to a fixed size. Users expect desktop apps to be responsive when resized.

  • If you strictly want a fixed layout that never adapts to small windows, you can remove the IsMobile usage and hardcode the sidebar state.
  • If you feel the manual resizing of the sidebar (the "rail") is unnecessary, you can remove sidebar-rail.svelte usage from your layout, but the responsive collapsing behavior is usually good UX even on desktop.

State Persistence

  • src/lib/components/ui/sidebar/sidebar-provider.svelte: Currently uses document.cookie to persist the sidebar's open/collapsed state.
    • Recommendation: In a Tauri context, document.cookie works, but using localStorage or tauri-plugin-plugin-store is often cleaner for persisting UI state in a desktop application.

General

  • The codebase uses Svelte 5 runes ($state, $derived, $props), which is excellent and future-proof.
  • Ensure all lucide-svelte icons are imported correctly as the library has updated recently (it seems you are using the correct named imports).

Top categories

Loading Svelte Themes