Settings System¶

Every generated Crabyard app includes a settings system backed by tauri-plugin-store and Zustand.

Architecture¶

useSettings() hook
  ↓ reads/writes
Zustand store (appStore.ts)
  ↓ persists via
tauri-plugin-store (src-tauri)
  ↓ saves to
JSON file on disk

Usage in components¶

import { useSettings } from "@/hooks/useSettings";

function MyComponent() {
  const { settings, updateSettings, pickFolder } = useSettings();

  return (
    <div>
      <p>Workspace: {settings.workspaceRoot}</p>
      <button onClick={pickFolder}>Change folder</button>
      <button onClick={() => updateSettings({ theme: "light" })}>
        Light theme
      </button>
    </div>
  );
}

Available methods¶

Method	Description
`settings`	Current settings object
`settingsLoading`	`true` while settings are being loaded
`loadSettings()`	Reload settings from disk
`updateSettings(partial)`	Merge partial settings and persist; returns `false` and restores prior state if saving fails
`pickFolder()`	Open a native folder picker, save selection

Adding new settings¶

Add the field to AppSettings in src/lib/types.ts:

export interface AppSettings {
  workspaceRoot: string | null;
  theme: string | null;
  launchAtStartup: boolean;
  myNewSetting: boolean;
}

Add a default in the Rust settings model (src-tauri/src/models/settings.rs)
Use it via useSettings():

const { settings, updateSettings } = useSettings();
await updateSettings({ myNewSetting: true });

Settings are saved to a JSON file in the app's data directory (platform-specific, managed by Tauri).