UI Libraries

Directory: ui/src/lib/

Shared utility libraries used across all apps and components.

settings.js

Centralized settings management.

// Defaults
DEFAULT_SETTINGS = { theme: 'dark', accentColor: '#00ff88', ... }

// Load/Save
loadSettings() → settings           // Sync from localStorage
saveSettings(settings)               // Save to localStorage + DB
loadSettingsFromDBAsync() → settings // Async from DB

// Apply to DOM
applySettings(settings)              // Sets CSS vars, data attributes

// Helpers
hexToRgb(hex) → {r, g, b}
rgbAlpha(hex, alpha) → 'rgba(...)'

// Constants
THEMES = { dark: {...}, light: {...}, cyberpunk: {...} }
FONT_OPTIONS = [ ... ]
PRESET_COLORS = [ ... ]
PROGRESS_STYLES = [ ... ]
CIRCULAR_STYLES = [ ... ]
NOTIFICATION_STYLES = [ ... ]

dbStorage.js

Bridge between React UI and MySQL database.

// Settings
loadSettingsFromDB() → settings|null
saveSettingsToDB(settings)

// Installed Apps
loadInstalledAppsFromDB() → apps|null
saveInstalledAppsToDB(apps)

// App Data (generic key-value)
loadAppDataFromDB(appId, key) → value|null
saveAppDataToDB(appId, key, value)
loadAllAppDataFromDB(appId) → { key: value, ... }
deleteAppDataFromDB(appId, key)

Mechanism: fetch() NUI callback → Client Lua → Server event → MySQL

appRegistry.js

App definitions and categories.

APP_REGISTRY = {
    group_manager: { id, name, iconComponent, color, category, builtin, ... },
    calculator: { ... },
    // ... 13 total apps
}

APP_CATEGORIES = [
    { id: 'all', label: 'All Apps', icon: '📱' },
    { id: 'system', label: 'System', icon: '⚙' },
    // ... 8 categories
]

getDownloadableApps() → array
getBuiltInApps() → array
getAppById(id) → app|nil

icons.jsx

14 SVG icon components.

GroupsIcon, CalculatorIcon, ClockIcon, CalendarIcon,
SettingsIcon, BellIcon, VolumeIcon, WifiIcon,
GridIcon, MinimizeIcon, MaximizeIcon, CloseIcon

Each accepts { size, color } props.

sounds.js

Web Audio API sound system.

Sounds.click()
Sounds.hover()
Sounds.open()
Sounds.close()
Sounds.minimize()
Sounds.maximize()
Sounds.notify()
Sounds.error()
Sounds.success()
Sounds.tick()
Sounds.type()

setMuted(muted)    // Global mute toggle
isMuted() → boolean

installedApps.js

Installed apps management with DB sync.

loadInstalledApps() → array           // From localStorage
saveInstalledApps(list)               // To localStorage + DB
loadInstalledAppsFromDBAsync() → array // Async from DB