SettingsPage

Overview

SettingsPage is a pre-built settings page component that includes:

General settings (language, theme)
About page (version info, update check)

Import

import { SettingsPage } from '@linch-tech/desktop-core';

Props

interface SettingsPageProps {
  /**
   * Custom footer content
   */
  footer?: ReactNode;
}

Basic Usage

import { SettingsPage } from '@linch-tech/desktop-core';

export function Settings() {
  return <SettingsPage />;
}

Use in routing:

<Route path="/settings" element={<Settings />} />

Page Structure

┌─────────────────────────────────────────────────┐
│  Settings                                       │
│  Manage app settings                            │
├────────────┬────────────────────────────────────┤
│            │                                    │
│  General   │     [Language Switcher]            │
│  About     │     [Theme Switcher]               │
│            │                                    │
└────────────┴────────────────────────────────────┘

General Tab

Contains the following settings:

Language Selection

Uses LanguageSwitcher component, displays all supported language options.

Theme Selection

Uses ThemeSwitcher component, displays light/dark/system options.

About Tab

Contains the following:

App Logo
App name
Current version number
Update check button

Update Status

Update button displays different content based on status:

Status	Display
`idle`	"Check for Updates" button
`checking`	Checking... (loading animation)
`available`	New version + "Download Update" button
`downloading`	Download progress bar
`ready`	"Restart Now" button
`up-to-date`	"Up to date" + "Check for Updates" button
`error`	Error message + "Retry" button

<SettingsPage
  footer={
    <div className="text-center text-sm text-muted-foreground">
      <p>Copyright © 2024 My Company</p>
      <p>All rights reserved.</p>
    </div>
  }
/>

Disabling Update Feature

If features.updater is set to false, the update button will show as disabled.

// src/config.ts
features: {
  updater: false,  // Disable update feature
},

Translation Keys

SettingsPage uses the following built-in translation keys:

settings.title
settings.description
settings.tabs.general
settings.tabs.about
settings.appearance
settings.language_select
settings.theme_select
settings.about.current_version
settings.about.check_updates
settings.about.checking
settings.about.new_version
settings.about.download_update
settings.about.ready_to_install
settings.about.restart_now
settings.about.up_to_date
settings.about.check_error
settings.about.retry
settings.about.footer_line1
settings.about.footer_line2

Complete Example

// src/pages/Settings.tsx
import { SettingsPage } from '@linch-tech/desktop-core';

export function Settings() {
  return (
    <SettingsPage
      footer={
        <div className="text-center text-sm text-muted-foreground pt-8 max-w-sm">
          <p>Built with Linch Desktop Core</p>
          <p>© 2024 My Company</p>
        </div>
      }
    />
  );
}

// src/App.tsx
import { Routes, Route } from 'react-router-dom';
import { Shell } from '@linch-tech/desktop-core';
import { Settings } from './pages/Settings';

function App() {
  return (
    <Routes>
      <Route element={<Shell />}>
        <Route path="/settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

Notes

SettingsPage is a complete page component that includes a header. Use it directly as a route component without additional wrapping.

The update feature requires proper updater endpoint configuration in tauri.conf.json to work.