Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Fixius50/WorlBuilding-Writting-App/llms.txt

Use this file to discover all available pages before exploring further.

The Settings module is the central control panel for your Chronos Atlas experience. All preferences — visual themes, typography, interface language, panel layout mode, and backup configuration — are adjusted here and persisted immediately to the local SQLite database via SettingsUseCase.saveSettings(). Settings are per-installation and apply across all projects on the device.

​
Accessing Settings

Click the gear icon (settings) in the footer of the left sidebar from any screen in the application. This navigates to the Settings route, which hosts two top-level tabs:
  • General / Sync — profile, backup, and synchronization options
  • Appearance & Editor — themes, fonts, panel layout, and language
Settings are stored as key-value pairs in the local SQLite configuraciones table using settingsService.set(key, value). They are loaded at application startup via SettingsUseCase.loadSettings() and applied globally. Each key is upserted — inserting on first save and updating on subsequent saves.

​
Language

Chronos Atlas ships with full localization support for English (en) and Spanish / Castellano (es). Language selection is managed by the LanguageContext, with locale files located in frontend/src/locales/. To switch languages:
1

Open Settings

Click the gear icon in the bottom of the left sidebar.
2

Go to Appearance & Editor

Select the Appearance & Editor tab in the Settings header navigation.
3

Scroll to Language Preference

Find the Preferencia de Idioma / Language section at the bottom of the Typography panel.
4

Select your language

Click 🇪🇸 Castellano or 🇺🇸 English. The interface updates immediately via changeLanguage(locale) without a page reload.
The default language is Spanish (es).

​
Font Selection

The Typography & Reading section of the Appearance tab provides a dynamic font picker for the application’s UI font. Your selection is applied immediately to the entire interface and persisted as settings.font. Available fonts:
FontLabelBest for
LexendLexend (UI Moderna)Clean modern interfaces
OutfitOutfit (Sleek)Default — sleek headlines
Cormorant GaramondCormorant (Legendaria)Long-form reading, lore documents
Playfair DisplayPlayfair (Elegante)Elegant editorial layouts
JetBrains MonoJetBrains Mono (Codex)Technical / data-dense views
The font is applied as an inline fontFamily style to the preview element, so you see the font rendered in its own face before committing. A font size slider (range 12px–24px, default 16px) lets you adjust the base reading size globally. The current value is displayed live next to the slider label.

​
AppSettings Interface

All preference fields are captured in the AppSettings interface and persisted together via SettingsUseCase.saveSettings(): 
// AppSettings interface — SettingsUseCase.ts
export interface AppSettings {
  theme: string;       // e.g. "deep_space", "nebula_light"
  font: string;        // e.g. "Outfit", "JetBrains Mono"
  fontSize: number;    // 12–24, default 16
  panelMode: string;   // "classic" | "binder" | "floating"
  autoBackup: boolean;
}
Settings are saved and loaded through: 
// Persist all settings to SQLite configuraciones table
await SettingsUseCase.saveSettings(settings);

// Load settings on startup — returns null if no keys exist yet
const saved = await SettingsUseCase.loadSettings();
The defaults applied when no stored settings are found are: theme: "deep_space", font: "Outfit", fontSize: 16, panelMode: "classic", autoBackup: false.

​
Theme

The Aesthetics of the System section lets you choose both a color theme and a dark/light mode variant. Three named themes are available:
Theme IDLabelCharacter
writerEscritorPure black-and-white, minimal
deep_spaceDeep SpaceNear-black background, indigo primary
nebulaNebulaDeep violet background, lavender primary
Each theme has a Dark and Light variant (e.g., deep_space / deep_space_light). The active variant is toggled via the Dark/Light button pair inside each theme card. The selected value is stored as settings.theme (e.g., "nebula_light"). For detailed information about CSS variables, color tokens, and the full token system used by themes, see the Themes and Color System page.

​
Panel Layout

The Panel Architecture section controls how the main content panels are arranged in the UI. Three modes are available:

Classic

Paneles Acoplados — traditional three-column layout with a left sidebar, main content area, and right detail panel docked side by side.

Binder

Pestañas Izquierdas — left panel organized as tabs, with the main content taking the full remaining width.

Floating

Modales Superiores — side panels appear as floating modals above the main content for maximum immersion.
The selected mode is stored as settings.panelMode and applied at the layout level on next navigation.

​
Backup and Sync

The Sync & Backup section (General tab) manages data persistence and export:
  • Import — upload a .db, .sqlite, .sqlite3, or .zip file to overwrite the local database. SQLite files are applied directly via sqlocal.overwriteDatabaseFile(file). ZIP imports are processed asynchronously by the Java backend and polled until completion. Handled by SettingsUseCase.importDatabase(file).
  • Export (ZIP) — packages the full OPFS database and all media assets into a ZIP archive for download. Calls SettingsUseCase.exportBackup(identifier), which delegates to syncService.exportToDisk().
  • Auto Sync — a toggle that enables automatic backup to the local server every 10 minutes when there are pending changes. Stored as settings.autoBackup.
  • Cloud Sync — shown in the UI but currently marked as coming soon. No cloud endpoint is active.

​
User Profile

The Architect Profile section (General tab) lets you set a display name and upload a local avatar image. Profile data is persisted as JSON in the configuraciones table under the "user" key via SettingsUseCase.saveUser(user). The UserData interface is: 
export interface UserData {
  displayName?: string;
  username?: string;
  avatarUrl?: string;
}

​
Project-level Settings

Some preferences are scoped to a specific project rather than the global application. Custom attribute templates — which add tailored fields to entity types — are configured per-project through the Archetype Manager. See Archetype Manager for details.

Build docs developers (and LLMs) love

Get started for freeTalk to us