As a senior full-stack developer and AI assistant, your task is to generate a complete, single-page React SPA (Single Page Application) for 'Ekran Kontrol ve Optimizasyon Merkezi'. This application aims to provide a user-friendly, TV-optimized interface and remote control capabilities for various Linux-based devices, inspired by the concept of Plasma Bigscreen. The application should be built with React and styled using Tailwind CSS.
**PROJECT OVERVIEW:**
'Ekran Kontrol ve Optimizasyon Merkezi' (Screen Control and Optimization Hub) is a SaaS platform designed to offer a seamless, couch-friendly interface for Linux-based media centers, smart TVs, and single-board computers. It addresses the problem of managing and interacting with Linux systems on a big screen, which is often cumbersome with traditional desktop interfaces. The core value proposition is to provide an intuitive, remote-controllable, and customizable TV experience for Linux, making it accessible to both tech enthusiasts and general users. The MVP focuses on device discovery, basic remote control, application launching, and essential system settings management.
**TECH STACK:**
- **Frontend Framework:** React (v18+)
- **Styling:** Tailwind CSS (v3+)
- **State Management:** Zustand (for global state management like connection status, device list) and React Context API (for localized state if needed).
- **Routing:** React Router DOM (for potential future expansion, though MVP is single-page).
- **UI Components:** Headless UI for accessible and reusable components (like modals, dropdowns).
- **Icons:** Heroicons or similar.
- **API Communication:** Axios or Fetch API for potential future backend integration (though MVP will rely heavily on local storage and in-browser communication logic if possible, or simulated backend for demonstration).
- **Build Tool:** Vite (for speed and modern features).
**CORE FEATURES:**
1. **Device Discovery & Connection:**
* **User Flow:** Upon launching the app, the user is prompted to scan their local network for compatible devices running a companion service (or simulated presence). The app displays a list of discovered devices (e.g., 'Living Room HTPC', 'Bedroom TV'). The user selects a device to connect to. The connection status (Connected, Disconnected, Connecting) is clearly indicated.
* **Details:** This involves network scanning logic (simulated in MVP with mock data). Once a device is selected, its information (name, IP address, status) is stored in Zustand state. A visual indicator shows the active connection.
2. **Basic Remote Control:**
* **User Flow:** Once connected to a device, the main interface transforms into a remote control panel. It features directional buttons (Up, Down, Left, Right), an 'OK/Select' button, a 'Back' button, and buttons to launch pre-defined common applications (e.g., 'Home', 'Apps', 'Settings', 'Power').
* **Details:** Each button press triggers a function that would ideally send a command to the target device via a protocol like WebSockets or simulated API calls in the MVP. The UI should provide visual feedback on button press (e.g., subtle animation, color change).
3. **Application Launcher:**
* **User Flow:** A dedicated section or screen accessible from the remote control displays a grid or list of popular Linux applications (Kodi, Jellyfin, Steam, Browser, etc.). Users can click an application icon to launch it on the connected TV.
* **Details:** This section displays mock application data. Clicking an icon simulates the 'launch command' being sent to the device. The application list should be visually appealing and easy to navigate with the directional controls.
4. **Basic System Settings:**
* **User Flow:** A 'Settings' button on the remote control navigates the user to a simplified settings screen. Here, they can adjust basic options like screen brightness (simulated), volume (simulated), and perhaps network status display.
* **Details:** This screen will use modals or dedicated view components. Input fields and sliders will be styled with Tailwind CSS. Changes are reflected visually but are simulated in the MVP.
**UI/UX DESIGN:**
- **Layout:** Single-page application with a responsive design. The primary view is the remote control. Navigation between 'Remote', 'Apps', and 'Settings' is handled within the page, possibly using state to show/hide sections or simple transitions. Mobile view should be optimized for touch, while desktop view can be used for management.
- **Color Palette:** A dark, modern theme suitable for TV viewing. Primary colors: Dark slate gray (`#2d3748`), Deep blue (`#2b6cb1`), and accent colors like a vibrant teal (`#4299e1`) or orange (`#ed8936`) for interactive elements and status indicators. White/light gray (`#f7fafc`) for text.
- **Typography:** Clean, legible sans-serif font like Inter or Roboto. Clear hierarchy using font weights and sizes.
- **Responsive Design:** Mobile-first approach. On larger screens, the layout might become two-column (e.g., device list on the left, remote on the right) or simply scale up. Ensure usability on various aspect ratios.
- **Interactivity:** Focus on large, easily tappable buttons for the remote control. Visual feedback for all interactions.
**COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component. Sets up Zustand store, potentially routing (if used). Renders main layout.
- **`DeviceList.jsx`:** Displays discovered devices. Fetches/receives device data. Renders `DeviceListItem`. Handles device selection.
* Props: `devices` (array), `onSelectDevice` (function), `isLoading` (boolean), `connectionStatus` (string).
- **`DeviceListItem.jsx`:** Represents a single device in the list. Shows device name and status indicator.
* Props: `device` (object), `isSelected` (boolean), `onClick` (function).
- **`RemoteControl.jsx`:** The main TV interface. Contains directional pad, action buttons, and app launcher shortcut.
* Props: `connectedDevice` (object), `onCommand` (function).
- **`Dpad.jsx`:** Component for the directional pad (Up, Down, Left, Right, OK).
* Props: `onDirection` (function), `onSelect` (function).
- **`ActionButtons.jsx`:** Component for other remote buttons (Back, Home, Settings, Power).
* Props: `onAction` (function).
- **`AppLauncher.jsx`:** Displays the grid/list of applications.
* Props: `apps` (array), `onLaunchApp` (function).
- **`SettingsPanel.jsx`:** Contains settings controls.
* Props: `settings` (object), `onChangeSetting` (function).
- **`StatusBar.jsx`:** Displays connection status and potentially other system info.
* Props: `status` (string).
- **`ZustandStore.js`:** Configuration for Zustand store (e.g., `useConnectionStore` for connection status and active device, `useDeviceStore` for the list of devices).
**DATA MODEL:**
- **`devices` (in Zustand store):**
```json
[
{
"id": "uuid-1",
"name": "Living Room HTPC",
"ipAddress": "192.168.1.101",
"status": "connected" // "disconnected", "connecting", "available"
},
{
"id": "uuid-2",
"name": "Bedroom TV",
"ipAddress": "192.168.1.102",
"status": "disconnected"
}
]
```
- **`activeDevice` (in Zustand store):**
```json
{
"id": "uuid-1",
"name": "Living Room HTPC",
"ipAddress": "192.168.1.101",
"status": "connected"
}
```
- **`apps` (mock data array):
```json
[
{ "id": "kodi", "name": "Kodi", "icon": "path/to/kodi.png" },
{ "id": "jellyfin", "name": "Jellyfin", "icon": "path/to/jellyfin.png" },
{ "id": "steam", "name": "Steam", "icon": "path/to/steam.png" },
{ "id": "firefox", "name": "Web Browser", "icon": "path/to/browser.png" },
{ "id": "vacuumtube", "name": "YouTube", "icon": "path/to/youtube.png" },
{ "id": "settings", "name": "System Settings", "icon": "path/to/settings.png" } // Special app for settings
]
```
- **`settings` (local state or store):**
```json
{
"brightness": 80,
"volume": 50,
"theme": "dark"
}
```
**ANIMATIONS & INTERACTIONS:**
- **Hover Effects:** Subtle background color changes or slight scaling on buttons when hovered/focused.
- **Button Press Feedback:** Immediate visual change on button click (e.g., `scale-95`, background color change) that quickly returns to normal.
- **Screen Transitions:** Smooth fading or sliding transitions when switching between 'Remote', 'Apps', and 'Settings' views using CSS classes triggered by state changes.
- **Loading States:** Use spinners or pulsing animations when discovering devices or attempting to connect. Disable interactive elements during loading.
- **Connection Status:** Animated indicators (e.g., blinking dot, color change) for connection status.
**EDGE CASES:**
- **No Devices Found:** Display a clear message and guidance on how to make devices discoverable. Provide a manual IP entry option if scanning fails.
- **Connection Failed:** Inform the user with a specific error message (e.g., 'Device unreachable', 'Connection refused'). Offer to retry or select another device.
- **Device Disconnected:** Automatically detect disconnection and update the UI. Prompt the user to reconnect.
- **Empty States:** If the app list is empty or settings are not yet loaded, display appropriate placeholders.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure keyboard navigability (tabbing, arrow keys for D-pad). Use ARIA attributes where necessary, especially for custom controls like the D-pad. Ensure sufficient color contrast.
- **Validation:** If manual IP entry is implemented, validate the IP address format.
**SAMPLE DATA (for initial testing and demonstration):**
```json
// In DeviceList component, used for initial render or simulation
[
{
"id": "mock-uuid-1",
"name": "Living Room PC",
"ipAddress": "192.168.1.150",
"status": "available"
},
{
"id": "mock-uuid-2",
"name": "Office Server",
"ipAddress": "192.168.1.151",
"status": "available"
},
{
"id": "mock-uuid-3",
"name": "Old Laptop",
"ipAddress": "192.168.1.152",
"status": "disconnected"
}
]
// In AppLauncher component
[
{ "id": "kodi_player", "name": "Kodi Media Center", "icon": "https://img.icons8.com/ios-filled/50/000000/kodi.png" },
{ "id": "jellyfin_stream", "name": "Jellyfin Media", "icon": "https://img.icons8.com/ios-filled/50/000000/jellyfin.png" },
{ "id": "steam_games", "name": "Steam", "icon": "https://img.icons8.com/ios-filled/50/000000/steam.png" },
{ "id": "firefox_web", "name": "Web Browser", "icon": "https://img.icons8.com/ios-filled/50/000000/firefox.png" },
{ "id": "qbittorrent_dl", "name": "qBittorrent", "icon": "https://img.icons8.com/external-tal-revive-bold-tal-revive/24/000000/external-qbittorrent-logo-internet-and-networking-external-tal-revive-bold-tal-revive.png" },
{ "id": "settings_sys", "name": "System Settings", "icon": "https://img.icons8.com/ios-filled/50/000000/settings.png" },
{ "id": "terminal_cmd", "name": "Terminal", "icon": "https://img.icons8.com/ios-filled/50/000000/mac-terminal.png" }
]
```
**DEPLOYMENT NOTES:**
- **Build:** Use Vite's build command (`npm run build` or `yarn build`). The output will be in the `dist` folder.
- **Environment Variables:** For MVP, primarily use environment variables for configuration if needed (e.g., `VITE_API_BASE_URL` if a backend were present). For local development, `.env` files can be used.
- **Performance Optimizations:** Vite offers built-in optimizations. Ensure code splitting (handled by Vite by default for React components), lazy loading of components where appropriate (especially for different views/sections), and image optimization.
- **Hosting:** The static build can be hosted on any static hosting provider (Netlify, Vercel, GitHub Pages). Ensure HTTPS is used if any sensitive data were involved.
- **Service Worker:** Consider adding a basic service worker for PWA capabilities (offline access to the UI, caching) in future iterations.
- **Development Server:** Use `npm run dev` or `yarn dev` for local development with hot module replacement.