Components Features

This page covers higher-level components that implement complete behaviors, not just UI primitives.

components/NotificationSystem.tsx

Global toast and reminder layer mounted in App.tsx.

Capabilities:

• listens for katanos:notify custom events

• renders stacked auto-dismiss notifications

• generates optional notification sounds via Web Audio

• polls upcoming events every 30 seconds

• sends event reminders based on user.notificationAdvance

• avoids duplicate reminder spam in the same session

  • stores notified event IDs in sessionStorage (chronos_notified_events)

Accepted internal notification types:

• info

• alert

• success

components/CommandPalette.tsx

Keyboard-driven quick action panel.

Behavior:

• opens from global shortcut (Ctrl/Cmd + K, handled in Layout)

• filters navigation commands by text

• includes contact lookup entries

• supports arrow navigation + enter execution + escape close

components/PomodoroWidget.tsx

UI front-end for PomodoroContext state engine.

Modes:

• focus

• short break

• long break

Features:

• start/pause/reset/skip

• duration tuning per mode

• auto-start toggle

• sound toggle and respect of global sound setting

• session progress indicators

services/PomodoroContext.tsx (feature backend)

Although in services/, this acts as a feature component backend:

• global pomodoro context provider

• per-user persistence in localStorage (katanos_pomodoro_<userId>)

• mode transition logic (focus -> short/long -> focus)

• session-target cycle (SESSION_TARGET = 4)

• completion beep synthesis

components/MapsAssistant.tsx

Natural-language location assistant panel.

Flow:

1. reads current user from db.auth.getCurrentUser()

2. resolves API key via resolveSecretValue

3. optionally captures geolocation coordinates

4. calls askGeminiPlaces

5. displays free-text answer + grounded place links

Also supports report action through mailto + openExternal.

components/GameModules.tsx

Container for all in-app games and their local persistence logic.

Implemented exports:

• SnakeGame

• ShooterGame

• BreakerGame

• ReflexGame

• TicTacToe

• MemoryGame

• MinerGame

Persistence model:

• user-scoped localStorage keys (katanos_game_*_<userId>)

• stores best scores and, for some games, full state snapshots

pages/Games.tsx (feature launcher)

• presents game catalog cards

• mounts selected game component

• handles Escape to return to game list

components/Layout.tsx (feature shell)

Layout is both a shell and a feature orchestrator.

Non-trivial feature responsibilities:

• profile/settings mutation staging (draftUser pattern)

• category and custom mood management

• module enable/disable toggles

• backup folder selection and backup-now execution

• restore from JSON file

• system diagnostics retrieval/copy (getAppInfo)

• bug/AI report email composition

• external URL confirmation gate for in-app links

pages/Vault.tsx + services/vault.ts (feature pair)

Vault feature is split intentionally:

• page controls interaction and session state

• service implements cryptography and wrapping/unwrapping primitives

Runtime pattern:

• encrypted vault remains persisted

• decrypted items + master key live only in component memory while unlocked

• lock action clears in-memory decrypted state