Menu

Settings and Configuration UI

Relevant source files

Purpose and Scope

This document describes the settings and configuration UI in Hyprnote, including the onboarding flow, permission requests, and user configuration interface. The system guides new users through initial setup via a dedicated onboarding window, then provides ongoing access to settings through the main application. The configuration system manages general preferences (language, jargons, templates), notification settings, and AI enhancement parameters. For the underlying configuration data model and persistence, see page 7.2. For model management UI, see pages 5.2 and 4.4.

Onboarding Flow

The onboarding process guides new users through initial setup in a dedicated window. The flow is controlled by the OnboardingNeeded2 flag stored in the desktop store.

Diagram: Onboarding Flow Architecture

Sources: apps/desktop/src/routes/app/onboarding/index.tsx1-98 apps/desktop/src-tauri/src/ext.rs1-33 apps/desktop/src-tauri/src/commands.rs45-60

Onboarding State Management

The OnboardingNeeded2 flag is stored in the persistent desktop store via tauri-plugin-store2. The AppExt trait apps/desktop/src-tauri/src/ext.rs3-32 provides helper methods:

  • desktop_store(): Retrieves the scoped store for desktop settings
  • get_onboarding_needed(): Reads the OnboardingNeeded2 flag (defaults to true)
  • set_onboarding_needed(v): Updates the flag to persist onboarding completion

The StoreKey enum apps/desktop/src-tauri/src/store.rs4-6 defines the typed key:

Onboarding Route Structure

The onboarding route apps/desktop/src/routes/app/onboarding/index.tsx22-25 is defined at /app/onboarding with step-based navigation:

The STEPS constant apps/desktop/src/routes/app/onboarding/index.tsx13 defines the flow: ["welcome", "permissions"].

The useOnboarding hook apps/desktop/src/routes/app/onboarding/index.tsx51-97 manages navigation:

PropertyTypePurpose
step"welcome" | "permissions"Current step in flow
localbooleanWhether onboarding is local-only (no cloud sync)
previousstring | undefinedPrevious step for back navigation
nextstring | undefinedNext step, or undefined if complete
goNextOnboardingNextAdvances to next step or completes onboarding
goPrevious() => voidReturns to previous step

When the flow completes apps/desktop/src/routes/app/onboarding/index.tsx71-79:

  1. Calls commands.setOnboardingNeeded(false) to persist completion
  2. Shows the main window via windowsCommands.windowShow({ type: "main" })
  3. Destroys the onboarding window via windowsCommands.windowDestroy({ type: "onboarding" })

Sources: apps/desktop/src/routes/app/onboarding/index.tsx1-98 apps/desktop/src-tauri/src/ext.rs16-31 apps/desktop/src-tauri/src/store.rs3-9

Permissions Request UI

The permissions step apps/desktop/src/components/onboarding/permissions.tsx1-138 requests three system permissions required for audio capture and meeting detection.

Diagram: Permission Request Flow

Sources: apps/desktop/src/components/onboarding/permissions.tsx1-138

PermissionBlock Component

The PermissionBlock component apps/desktop/src/components/onboarding/permissions.tsx9-65 renders individual permission requests:

Each block displays:

  • Permission name with alert icon if unauthorized
  • Context-sensitive description (changes based on authorization state)
  • Action button (arrow icon when requesting, check icon when granted)
  • Visual feedback via className conditional styling

Permission Types

The component requests three permissions apps/desktop/src/components/onboarding/permissions.tsx92-124:

PermissionPurposeAuthorized MessageUnauthorized Message
MicrophoneCapture user's voice"Good to go :)""To capture your voice"
System AudioCapture speaker output"Good to go :)""To capture what other people are saying"
AccessibilitySync mic inputs & mute detection"Good to go :)""To sync mic inputs & mute from meetings"

Continue Button State

The continue button apps/desktop/src/components/onboarding/permissions.tsx126-135 is only enabled when all three permissions are granted:

The button text changes based on state:

  • All granted: "Continue"
  • Any denied: "Need all permissions to continue"

Sources: apps/desktop/src/components/onboarding/permissions.tsx71-137

Configuration Data Model Overview

The configuration system uses three structures persisted in the user database. For detailed configuration model documentation, see page 7.2.

Diagram: Configuration Structure

Sources: crates/db-user/src/config_types.rs1-108

Key Configuration Categories

The Config struct crates/db-user/src/config_types.rs4-11 organizes settings into three categories:

  1. ConfigGeneral crates/db-user/src/config_types.rs35-53: Application behavior (autostart, languages, jargons, templates)
  2. ConfigNotification crates/db-user/src/config_types.rs71-77: Meeting notifications (pre-meeting alerts, auto-recording)
  3. ConfigAI crates/db-user/src/config_types.rs90-96: AI enhancement (API endpoints, specificity, timing)

Sources: crates/db-user/src/config_types.rs4-96

Settings UI Structure and Views

The settings interface organizes configuration options into multiple views accessible through a tabbed or sectioned navigation pattern.

Diagram: Settings UI Architecture

Sources: apps/desktop/src/routeTree.gen.ts38-80 crates/db-user/src/config_types.rs1-108 plugins/db/src/commands/calendars.rs1-78 crates/db-user/src/calendars_ops.rs121-141

Settings View Categories

Based on the configuration model and database operations, the settings UI organizes into these views:

General Settings View (ConfigGeneral):

  • Application Behavior
    • Autostart on login toggle
    • Telemetry consent toggle
    • Audio recording storage toggle
  • Languages
    • Display language dropdown (ISO 639 codes)
    • Spoken languages multi-select for STT
    • Summary output language for AI-generated notes
  • Customization
    • Custom jargons/vocabulary list editor
    • Default template selection dropdown
    • AI specificity slider (1-4 levels)

Calendar Settings View:

  • Calendar integration list with platform icons (Apple/Google/Outlook)
  • Toggle calendar selection via toggle_calendar_selected() crates/db-user/src/calendars_ops.rs121-141
  • Notification preferences:
    • Pre-meeting notification toggle (before field)
    • Auto-recording on meeting start (auto field)
    • Platform exclusions multi-select (ignored_platforms)

Feedback View:

  • User feedback submission form
  • Issue reporting

Help & Support View:

  • Documentation links
  • Support resources
  • Version information

Sources: crates/db-user/src/config_types.rs35-107 crates/db-user/src/calendars_ops.rs4-141 plugins/db/src/commands/calendars.rs1-78

Calendar Integration UI

The calendar settings interact with the calendar database operations through the DB plugin. The Calendar type crates/db-user/src/calendars_types.rs4-13 includes:

FieldTypePurpose
idStringUnique identifier
tracking_idStringPlatform-specific ID
user_idStringOwner user ID
platformPlatformApple, Google, or Outlook
nameStringCalendar display name
selectedboolWhether calendar is monitored
sourceOption<String>Calendar source metadata

The UI fetches calendars via list_calendars() plugins/db/src/commands/calendars.rs24-37 and toggles selection via toggle_calendar_selected() plugins/db/src/commands/calendars.rs62-77 which flips the selected boolean atomically crates/db-user/src/calendars_ops.rs121-141

Sources: crates/db-user/src/calendars_types.rs3-26 plugins/db/src/commands/calendars.rs1-78 crates/db-user/src/calendars_ops.rs121-141

Language Configuration

The system distinguishes between three language settings that control different aspects of the application:

Diagram: Language Settings Usage

Sources: crates/db-user/src/config_types.rs38-51

  1. Display Language (display_language): Controls UI text throughout the application
  2. Spoken Languages (spoken_languages): Array of languages for STT recognition during transcription
  3. Summary Language (summary_language): Target language for AI-generated enhanced notes

The hypr_language::Language type is serialized as a string with ISO 639 validation crates/db-user/src/config_types.rs38-39:

Jargon Management

The jargons field crates/db-user/src/config_types.rs44 stores custom vocabulary for transcription correction. During enhancement, jargons are injected into the LLM prompt to correct technical terms and proper nouns.

Sources: crates/db-user/src/config_types.rs35-68

AI Configuration Settings

The ConfigAI struct crates/db-user/src/config_types.rs90-96 controls AI enhancement behavior:

AI Specificity Levels

The ai_specificity field crates/db-user/src/config_types.rs93 controls LLM enhancement aggressiveness with four levels:

LevelCreativityBehavior
1LowMinimal changes, fix typos, preserve structure
2ModerateMinor enhancements, add relevant details
3High (default)Significant enhancement, incorporate transcript fully
4Very HighExtensive restructuring, professional polish

The setting is rendered as a slider in the UI and also controls header adherence when users provide custom note structures.

API Configuration

The AI settings also include crates/db-user/src/config_types.rs91-92:

  • api_base: Optional custom LLM endpoint URL (for using cloud providers instead of local inference)
  • api_key: Optional API key for authenticated cloud services (stored securely, masked in UI)

Redemption Time

The redemption_time_ms field crates/db-user/src/config_types.rs94 sets the grace period (in milliseconds) after transcription completion before automatic AI enhancement triggers. Default is 500ms, allowing users to quickly edit transcripts before enhancement.

Sources: crates/db-user/src/config_types.rs89-107

Settings Persistence via DB Plugin

The settings UI persists configuration through the DB plugin, which exposes user database operations as type-safe Tauri commands.

Diagram: Configuration Persistence Flow

Sources: plugins/db/src/lib.rs1-103 crates/db-user/src/config_types.rs1-108 crates/db-user/src/config_ops.rs1-145

DB Plugin Commands for Configuration

While the specific get_config and update_config commands aren't shown in the provided files, the DB plugin follows the established pattern seen in calendar commands plugins/db/src/commands/calendars.rs1-78 Commands are:

  1. Decorated with #[tauri::command] and #[specta::specta] for type generation
  2. Accept state: tauri::State<'_, crate::ManagedState> for database access
  3. Return Result<T, String> for type-safe error handling
  4. Delegated to UserDatabase methods in the hypr-db-user crate

Configuration Database Operations

The Config struct crates/db-user/src/config_types.rs4-11 is persisted in the config table with JSON columns for each sub-configuration:

The from_row method crates/db-user/src/config_types.rs14-32 deserializes JSON columns:

This pattern allows atomic updates of configuration subsections while maintaining type safety through serde.

Sources: crates/db-user/src/config_types.rs1-108 plugins/db/src/commands/calendars.rs1-78

Tauri Command Type Safety

Settings and onboarding commands use tauri-specta for automatic TypeScript binding generation.

Diagram: Type-Safe Command Interface

Sources: plugins/windows/src/lib.rs41-59 apps/desktop/src/types/tauri.gen.ts1-108

Example: Onboarding Commands

The onboarding state commands apps/desktop/src-tauri/src/commands.rs45-60 demonstrate the pattern:

These generate TypeScript bindings with exhaustive error handling:

The frontend can safely discriminate success/error cases:

Sources: apps/desktop/src-tauri/src/commands.rs45-60 apps/desktop/src/types/tauri.gen.ts10-34

Settings Window Management

The Settings window is managed through the Windows plugin's AppWindow enum as AppWindow::Settings. The window lifecycle follows the standard pattern defined in the Windows plugin.

Diagram: Settings Window Lifecycle

Sources: plugins/windows/src/ext.rs72-110 plugins/windows/src/lib.rs22-39 apps/desktop/src/routeTree.gen.ts68-80

Opening the Settings Window

The Settings window is shown via the window_show command plugins/windows/src/commands.rs5-11:

From the frontend, this is called as plugins/windows/js/bindings.gen.ts10-17:

When the window doesn't exist, the WindowImpl trait's show() method plugins/windows/src/ext.rs72-110 creates it via build_window(), then shows and focuses it. If it already exists, it's simply brought to focus.

Sources: plugins/windows/src/commands.rs3-11 plugins/windows/src/ext.rs72-110 plugins/windows/js/bindings.gen.ts9-17

Settings Window Routes

The settings interface uses nested routing apps/desktop/src/routeTree.gen.ts38-80:

Route PathRoute IDPurpose
/app/settings/app/settingsParent route container
/app/settings/_layout/app/settings/_layoutLayout wrapper with navigation
/app/settings//app/settings/_layout/Default settings view (index)

The _layout pattern wraps the settings content with consistent navigation UI (tabs/sidebar) while the index route renders the default settings panel.

Sources: apps/desktop/src/routeTree.gen.ts38-80 apps/desktop/src/routeTree.gen.ts226-253

Default Values and Initialization

Each configuration struct implements the Default trait, providing sensible initial values:

ConfigGeneral Defaults

crates/db-user/src/config_types.rs55-68

  • autostart: false - User must opt-in to autostart
  • display_language: "en" - English UI
  • spoken_languages: ["en"] - English-only transcription
  • summary_language: "en" - English output
  • jargons: [] - No custom vocabulary
  • telemetry_consent: true - Analytics enabled by default
  • save_recordings: Some(false) - Audio not saved for privacy
  • selected_template_id: None - No default template

ConfigNotification Defaults

crates/db-user/src/config_types.rs79-87

  • before: true - Show pre-meeting notifications
  • auto: true - Auto-record enabled
  • ignored_platforms: None - Monitor all calendars

ConfigAI Defaults

crates/db-user/src/config_types.rs98-107

  • api_base: None - Use local LLM
  • api_key: None - No cloud API key
  • ai_specificity: Some(3) - Flexible/high creativity mode
  • redemption_time_ms: Some(500) - 500ms edit grace period

These defaults balance functionality with privacy, enabling core features while requiring explicit opt-in for more intrusive capabilities like autostart and audio recording storage.

Sources: crates/db-user/src/config_types.rs55-107

Type Safety and Schema Validation

The configuration system enforces type safety across language boundaries:

Specta Type Annotations

Fields with complex types use specta annotations for TypeScript generation crates/db-user/src/config_types.rs37-51:

This ensures:

  1. Rust enums serialize correctly to TypeScript
  2. Language codes validate against ISO 639 pattern
  3. Frontend receives accurate TypeScript types via tauri-specta

Serde Integration

The user_common_derives! macro crates/db-user/src/config_types.rs3 applies:

  • serde::Serialize and serde::Deserialize for JSON encoding
  • specta::Type for TypeScript type generation
  • schemars::JsonSchema for JSON schema validation

This tri-fold type safety ensures configuration remains consistent from database storage through IPC to frontend display.

For more on type safety infrastructure, see Type Safety and Code Generation.

Sources: crates/db-user/src/config_types.rs1-108