UI Components

This page documents shared, reusable UI components used across modules.

Shell and Structural Components

components/Layout.tsx

Global authenticated shell.

Responsibilities:

• render navigation from module registry

• host settings modal and all profile/system controls

• open/close command palette

• host AI Scout panel

• dispatch katanos:escape propagation for nested modals/pages

• mediate external link confirmation before opening browser

components/ModalPortal.tsx

Minimal portal wrapper:

• renders modal content into document.body

• used by page-level dialogs and overlays

components/WindowControls.tsx

Desktop titlebar buttons:

• minimize (window.katanos.minimize)

• fullscreen toggle (window.katanos.setFullScreen/DOM fallback)

• close request (katanos:openExitPrompt custom event)

Date and Time Inputs

components/DatePicker.tsx

Localized date selector used in planning forms.

components/DateTimePicker.tsx

Combined date + time selector returning local datetime strings.

components/dateUtils.ts

Utility exports:

• getLocaleFromLang

• formatDateValue

• parseDateValue

• parseDateTimeValue

• formatDateTimeValue

• getMonthLabel

• getWeekdayLabels

• buildCalendarDays

• isSameDay

Supported language mapping: it, en, fr, es, de.

Form and Input Components

components/Select.tsx

Custom dropdown used across settings/forms.

components/RequiredInput.tsx

Text input wrapper with explicit error state integration.

components/RequiredNumberInput.tsx

Number input wrapper with required/error behavior.

components/NumberInput.tsx

Numeric input with increment/decrement controls and min/max handling.

components/ColorPicker.tsx

Color swatch picker with optional manual hex input.

Display Components

components/FlipClock.tsx

Animated clock display used on dashboard.

components/ChartWrapper.tsx

Chart.js lifecycle wrapper.

Behavior:

• creates chart instance from props

• updates/reacts to data/options changes

• destroys chart on unmount

components/SeasonalEffects.tsx

Fullscreen decorative overlays.

Supported effect ids:

• none

• snow

• leaves

• blossom

• fireflies

components/SplashScreen.tsx

Animated splash component for renderer-side loading states.

Emoji Components

components/EmojiGlyph.tsx

Renders one emoji through sprite mapping from services/emojiSprite.ts. Falls back to plain emoji text if mapping is unavailable.

components/EmojiPicker.tsx

Searchable emoji picker.

Features:

• category tabs

• search

• recent list persistence (katanos_emoji_recent)

Utility Layout Submodule

components/layout/types.ts

Type definitions extracted for layout/settings behavior, including:

• settings tab ids

• backup history/status types

• developer info payload shape

components/layout/utils.ts

Utility functions used by settings/system screens:

• formatTime

• normalizeCategoryName

• normalizePin

• formatFileSize

• formatRelativeTime

• clampToScreen

• getBackupIntervalLabel

Security-Facing UI Component

components/LockScreen.tsx

PIN lock overlay shown when user lock mode is enabled.

Behavior:

• numeric keypad + masked input

• submit PIN to async verifier (onUnlock)

• error feedback and clear/backspace controls

• logout action from lock state