Settings Interface

Relevant source files

The following files were used as context for generating this wiki page:

• src/features/settings/SettingsDialog.tsx
• src/stores/settingsStore.ts
• plans/migration.md
• src/App.tsx
• src/test/stores/settings.test.ts
• src/lib/tauri/shim.ts

The Settings Interface in Augenblick provides users with the ability to configure application behavior, including visual themes, note expiry duration, and trash retention periods. It acts as a bridge between the frontend React UI and the persistent storage backend, ensuring that user preferences are applied immediately and synchronized across app restarts.

Architecturally, the system is divided into a React-based presentation layer (SettingsDialog.tsx), a state management layer using Zustand (settingsStore.ts), and an IPC layer that communicates with the Tauri Rust backend or a web-based localStorage shim. This structure ensures that settings like "Dark Mode" or "Auto-expiry" are not only stored but also trigger real-time side effects, such as updating the document's DOM classes or rescheduling background cleanup tasks.

Sources: plans/migration.md:57-58, src/stores/settingsStore.ts:1-10, src/App.tsx:291-300

Architecture and Data Flow

The settings system follows a unidirectional data flow where the UI triggers store actions, which then update local state and call backend API commands.

The diagram above illustrates how a user preference travels from the dialog to the persistence layer while simultaneously updating the application's live environment.
Sources: src/stores/settingsStore.ts:46-70, src/lib/tauri/shim.ts:241-255

The Settings Store

The useSettingsStore manages the AppSettings state. It is responsible for initializing settings from the backend and applying the appropriate visual theme.

Property	Type	Default	Description
expiryMinutes	number	10_080 (7 days)	Time before an inactive note is moved to trash.
trashRetentionDays	number	30	Time before a note is permanently deleted from trash.
theme	string	"dark"	Visual appearance mode (light, dark, or system).

Sources: src/stores/settingsStore.ts:5-10, src/lib/tauri/shim.ts:11-15

Theme Management

Augenblick supports three theme modes: Light, Dark, and System. The implementation uses a systemWatcher to observe OS-level changes when the "System" preference is selected.

Theme Application Logic

When a theme is applied, the system modifies the classList of document.documentElement.

• Manual Mode: Directly adds .light or .dark and stops any active system observers.
• System Mode: Uses window.matchMedia("(prefers-color-scheme: dark)") to listen for OS changes and updates the root class accordingly.

UI Implementation: SettingsDialog

The SettingsDialog component is built using Radix UI primitives and styled with Tailwind CSS. It provides segmented controls for theme selection and dropdown menus for duration-based settings.

Configuration Options

The interface exposes specific valid ranges for expiry and retention.

Category	Options	Default
Note Expiry	6h, 12h, 1d, 3d, 7d, 14d, 30d	7 days
Trash Retention	7, 14, 30, 60, 90 days	30 days
Appearance	Light, Dark, System	Dark

Sources: src/features/settings/SettingsDialog.tsx:24-34, src/lib/tauri/shim.ts:245-253

Update Checking

The settings interface also hosts the application update system. It utilizes the @tauri-apps/plugin-updater to check for new versions. When a check is initiated:

1. The UI enters a isCheckingUpdates state.
2. The App.tsx logic calls the check() function.
3. If an update is found, it is downloaded/installed, and a notification (via Sonner) prompts the user to restart.

Sources: src/App.tsx:107-142, src/features/settings/SettingsDialog.tsx:106-111

Persistence Layer

Settings are persisted via the settingsSet IPC command.

Web Shim Implementation

In environments where Tauri is unavailable (e.g., development web view), a shim handles persistence using localStorage under the key augenblick:webdb:v1.

// src/lib/tauri/shim.ts:241-255
case "settings_set": {
  const key = String(args?.key ?? "");
  const value = String(args?.value ?? "");
  const next: AppSettings = { ...DEFAULT_SETTINGS, ...(db.settings ?? {}) };
  if (key === "theme" && (value === "dark" || value === "light" || value === "system")) {
    next.theme = value;
  } else if (key === "expiry_minutes") {
    next.expiryMinutes = Number(value) || next.expiryMinutes;
  } else if (key === "trash_retention_days") {
    next.trashRetentionDays = Number(value) || next.trashRetentionDays;
  }
  db.settings = next;
  saveDb(db);
  return;
}

Sources: src/lib/tauri/shim.ts:241-255, src/stores/settingsStore.ts:60-72

Summary

The Settings Interface provides a centralized hub for user customization in Augenblick. By utilizing a Zustand store synchronized with a backend persistence layer, the application ensures that settings like theme and note lifecycle parameters are consistently applied and reactive to both user input and system environment changes.