Tablet System Overview

The wtf_group tablet is a full desktop-style operating system UI rendered as a FiveM NUI overlay. It provides a windowed app environment with a taskbar, start menu, draggable/resizable windows, system tray, and an app store.

Features

• Desktop OS Metaphor — Taskbar, start menu, desktop icons, system tray, notification center
• Window Manager — Draggable, resizable, minimizable, maximizable windows with z-index management
• App System — 13 built-in apps + downloadable apps via App Store
• Settings Panel — Inline settings with color pickers, font selector, UI scale, theme selection
• Database Sync — All settings, installed apps, and app data persisted to MySQL
• Sound System — Web Audio API synthetic sounds for all interactions
• SVG Icons — No font-awesome dependency, all icons are inline SVG components
• Context Menu — Right-click desktop for quick actions

Built-in Apps

App	Category	Description
Groups	System	Full group management (members, tasks, dashboard)
Calculator	Tools	Basic calculator with memory
Clock	Tools	Clock, timer, stopwatch with lap tracking
Calendar	Tools	Month view calendar with date picker
App Store	System	Browse, install, uninstall downloadable apps

Downloadable Apps

App	Category	Description
Browser	Internet	Web browser with speed dial, bookmarks, history
Notes	Productivity	Text editor with sidebar note list
Weather	Info	Weather display with forecast
Files	System	Mock file browser
Terminal	Developer	CLI with basic commands
Music	Media	Music player with playlist
Gallery	Media	Image gallery

Opening the Tablet

• Command: /tablet
• Keybind: F7 (configurable in config/tablet.lua)
• Export: exports['wtf_group']:OpenTablet()

File Structure

ui/src/
├── shell/              # Tablet shell components
│   ├── TabletShell.jsx # Main container, settings panel
│   ├── Desktop.jsx     # Desktop with app icons
│   ├── Taskbar.jsx     # Bottom bar with start button, running apps, system tray
│   ├── StartMenu.jsx   # App launcher with search and categories
│   ├── SystemTray.jsx  # Bell, volume, WiFi, clock, calendar popup
│   ├── WindowManager.jsx # Renders all open windows
│   ├── Window.jsx      # Individual draggable/resizable window
│   └── ContextMenu.jsx # Right-click desktop menu
├── apps/               # Tablet applications
│   ├── GroupManager/   # Full group UI in tablet window
│   ├── Calculator/     # Calculator app
│   ├── Clock/          # Clock/timer/stopwatch
│   ├── Calendar/       # Month view calendar
│   ├── AppStore/       # App install/uninstall
│   ├── Browser/        # Web browser
│   ├── Notes/          # Text editor
│   ├── Weather/        # Weather display
│   ├── FileManager/    # Mock file browser
│   ├── Terminal/       # CLI
│   ├── Music/          # Music player
│   └── Gallery/        # Image gallery
├── context/            # React context providers
│   ├── TabletContext.jsx  # Settings, theme, open/close state
│   ├── AppContext.jsx     # App registry, window management
│   └── GroupContext.jsx   # Group state (legacy)
├── lib/                # Shared libraries
│   ├── settings.js     # Settings defaults, load/save, apply to DOM
│   ├── dbStorage.js    # NUI → Server → MySQL bridge
│   ├── appRegistry.js  # App definitions, categories, store flags
│   ├── icons.jsx       # 14 SVG icon components
│   ├── sounds.js       # Web Audio API sound system
│   └── installedApps.js # Installed apps DB sync
├── styles/
│   └── tablet.css      # Resize handles, scrollbars, animations
└── App.jsx             # Root component, NUI message handler

Tech Stack

• Frontend: React 18 + Vite
• State: React Context + useReducer
• Styling: Inline styles + CSS custom properties
• Sounds: Web Audio API (synthetic, no files)
• Icons: Inline SVG components
• Persistence: localStorage (instant) + MySQL via NUI callbacks (durable)