projects/shelled/plan-os-ui.md

# Shelled OS UI Development Specification for LLM Implementation

## Project Overview
Generate a complete Shelled OS UI implementation using HTML/CSS/JavaScript with Tauri 2.0 integration. The UI is a desktop environment that runs applications from Android, Windows, macOS, and Linux platforms.

## Technology Stack Requirements
- Frontend: HTML5, CSS3, JavaScript ES6+ modules
- Backend: Tauri 2.0 with Rust
- Rendering: WebView
- Icons: Google Material Icons
- Fonts: Outfit (primary), Noto Sans SC (secondary)
- Build System: Cargo (Rust) + npm

## Project Structure to Generate

shelled-os-ui/ ├── src/ │ ├── index.html │ ├── css/ │ │ ├── variables.css │ │ ├── main.css │ │ ├── taskbar.css │ │ ├── start-menu.css │ │ ├── file-explorer.css │ │ ├── browser.css │ │ └── settings.css │ ├── js/ │ │ ├── main.js │ │ └── components/ │ │ ├── Taskbar.js │ │ ├── StartMenu.js │ │ ├── FileExplorer.js │ │ ├── Browser.js │ │ └── Settings.js │ └── assets/ │ └── images/ │ └── conch-shell.png ├── src-tauri/ │ ├── src/ │ │ └── main.rs │ ├── Cargo.toml │ └── tauri.conf.json └── package.json

## HTML Structure Requirements

### Main Layout (index.html)
- Full-screen desktop environment container
- Gradient background (purple to blue gradient)
- Bottom taskbar component
- Popup windows for: Start Menu, File Explorer, Browser, Settings
- Include Material Icons and Google Fonts CDN links

### Taskbar Component
- Fixed at bottom of screen
- Height: 60px
- Background: Glassmorphism effect (semi-transparent white with blur)
- Contains 4 clickable icons: Shell (start), Folder, Browser, Settings
- System tray on right with WiFi, Volume, Battery icons
- All icons must have hover effects and click handlers

### Start Menu Component
- Position: Bottom-left, above taskbar
- Size: 650px × 540px
- Header with "All Applications" title
- Search input box with real-time filtering
- Two-column grid layout for apps
- Alphabetically organized with letter dividers (A, B, C, D, G, M, W, Y)
- Each app item contains: icon, name, description
- Selection state with blue left border indicator

### File Explorer Component
- Position: Bottom, offset from folder icon
- Size: 580px × 480px
- Header with "File Explorer" title and close button
- List of mock files and folders
- Click to select functionality

### Browser Component
- Position: Bottom, offset from browser icon
- Size: 520px × 420px
- Header with "Browser" title and close button
- Address bar with lock icon
- Content area with placeholder

### Settings Component
- Position: Bottom, offset from settings icon
- Size: 460px × 380px
- Header with "Settings" title and close button
- List of toggle switches for: Dark Mode, Notifications, Sound Effects, Bluetooth, Location Services
- Toggle switches must be clickable and change state

## CSS Requirements

### Design System Variables
```css
:root {
    --primary-blue: #0078D7;
    --secondary-blue: #005A9E;
    --accent-cyan: #00BCF2;
    --bg-white: #FFFFFF;
    --text-dark: #1F1F1F;
    --text-grey: #605E5C;
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.2);
    --shadow-lg: 0 -8px 32px rgba(0, 0, 0, 0.3);
}

Animation Requirements

• Popup windows: Slide up with scale animation (0.95 to 1.0)
• Hover effects: scale(1.05) for buttons, translateX(4px) for list items
• Transition timing: 0.2-0.3s ease
• Use cubic-bezier(0.175, 0.885, 0.32, 1.275) for popup animations

Glassmorphism Effects

• Background: rgba(255, 255, 255, 0.15)
• Backdrop-filter: blur(20px)
• Border: 1px solid rgba(255, 255, 255, 0.2)

JavaScript Requirements

Main Controller (main.js)

• Initialize all component controllers
• Manage popup state (only one popup open at a time)
• Click outside to close popups
• Export application data (list of apps with icons, colors, descriptions)

Component Controllers

Each component should have:

• element property referencing the DOM element
• buttonElement property for the triggering button
• open() method to show popup
• close() method to hide popup
• render() method to populate content
• initialize() method to setup event listeners

App Data Structure

[
    { name: "Angry Birds", icon: "mood_bad", color: "red", desc: "Mobile Game", letter: "A" },
    { name: "Adobe Photoshop", icon: "edit", color: "green", desc: "Image Editor", letter: "A" },
    { name: "Brave Browser", icon: "language", color: "blue", desc: "Web Browser", letter: "B" },
    { name: "Books", icon: "book", color: "purple", desc: "Reading App", letter: "B" },
    { name: "Chrome", icon: "code", color: "orange", desc: "Web Browser", letter: "C" },
    { name: "Discord", icon: "chat", color: "blue", desc: "Communication", letter: "D" },
    { name: "GarageBand", icon: "music_note", color: "yellow", desc: "macOS Music App", letter: "G" },
    { name: "Movies & TV", icon: "movie", color: "purple", desc: "Media Player", letter: "M" },
    { name: "Music", icon: "music_note", color: "green", desc: "Audio Player", letter: "M" },
    { name: "Word", icon: "description", color: "default", desc: "Document Editor", letter: "W" },
    { name: "YouTube", icon: "theaters", color: "orange", desc: "Video Platform", letter: "Y" }
]

Search Functionality

• Real-time filtering as user types
• Filter by app name (case-insensitive)
• Show/hide letter dividers based on visible apps
• Clear search when popup closes

File Explorer Data

[
    { name: "Documents", type: "folder", icon: "folder", meta: "5 items • Modified today" },
    { name: "Downloads", type: "folder", icon: "folder", meta: "12 items • Modified yesterday" },
    { name: "Pictures", type: "folder", icon: "folder", meta: "28 items • Modified 2 days ago" },
    { name: "report.pdf", type: "file", icon: "insert_drive_file", meta: "PDF • 2.4 MB • Today" },
    { name: "photo_001.jpg", type: "image", icon: "image", meta: "JPEG • 3.8 MB • Today" },
    { name: "notes.txt", type: "document", icon: "description", meta: "Text • 1.2 KB • Yesterday" },
    { name: "Music", type: "folder", icon: "folder", meta: "45 items • Modified last week" }
]

Settings Data

[
    { label: "Dark Mode", icon: "dark_mode", active: false },
    { label: "Notifications", icon: "notifications", active: true },
    { label: "Sound Effects", icon: "volume_up", active: true },
    { label: "Bluetooth", icon: "bluetooth", active: false },
    { label: "Location Services", icon: "location_on", active: false }
]

Tauri Configuration Requirements

tauri.conf.json

• Product name: "shelled-os"
• Version: "0.1.0"
• Window configuration: fullscreen, resizable
• Identifier: "com.shelledos.app"
• Enable all Tauri features for development

Cargo.toml

• Package name: "shelled-os-ui"
• Tauri version: "2.0"
• Dependencies: tauri, serde, serde_json
• Edition: "2021"

main.rs

• Simple Tauri builder initialization
• Windows subsystem configuration for release builds

Interactive Behaviors

Click Interactions

1. Click Shell button → Toggle Start Menu
2. Click Folder button → Toggle File Explorer
3. Click Browser button → Toggle Browser popup
4. Click Settings button → Toggle Settings popup
5. Click app item → Select it (add blue left border)
6. Click file item → Select it
7. Click toggle switch → Toggle active state
8. Click close button (X) → Close respective popup
9. Click outside popup → Close all popups

Search Interactions

1. Type in search box → Filter apps in real-time
2. Empty search → Show all apps
3. Partial match → Show matching apps
4. No match → Show no apps (hide letter dividers)

Visual Feedback

1. Hover over button → Scale up (1.05)
2. Hover over list item → Slide right (4px) and change color
3. Active popup → Button shows indicator
4. Selected item → Blue left border appears
5. Toggle switch → Smooth transition of thumb position

Color Coding for App Icons

• red: linear-gradient(135deg, #e52e00 0%, #ff6b35 100%)
• green: linear-gradient(135deg, #11998e 0%, #38ef7d 100%)
• blue: linear-gradient(135deg, #0078D7 0%, #00BCF2 100%)
• orange: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
• purple: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)
• yellow: linear-gradient(135deg, #f7971e 0%, #ffd200 100%)
• default: linear-gradient(135deg, #667eea 0%, #764ba2 100%)

File Icon Colors

• folder: #ff9800
• file: #90caf9
• image: #66bb6a
• document: #42a5f5

Performance Requirements

• Startup time: < 3 seconds
• Menu open animation: < 200ms
• Search filtering: < 50ms response time
• All animations: 60fps
• Memory usage: < 150MB

Browser Compatibility

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Testing Checklist

After implementation, verify:

• Application opens fullscreen
• Taskbar displays at bottom
• All 4 icons are clickable
• Clicking Shell opens Start Menu
• Start Menu shows 11 apps alphabetically
• Search filters apps correctly
• Clicking apps selects them
• File Explorer opens with mock files
• Browser popup opens
• Settings popup opens with working toggles
• Close buttons work
• Click outside closes popups
• Animations are smooth
• No console errors

Implementation Notes

• Use ES6 modules for JavaScript
• All event listeners must use stopPropagation where appropriate
• Use document fragments for DOM manipulation
• Implement proper cleanup when closing popups
• Use CSS transitions, not JavaScript animations where possible
• Ensure z-index management prevents layering issues
• All text must use the Outfit font family

Critical Constraints

1. DO NOT use any external JavaScript libraries
2. DO NOT modify the specified color values
3. DO NOT change the layout dimensions
4. DO NOT alter the interaction behaviors
5. DO NOT add additional features beyond specification
6. MUST maintain exact animations as specified
7. MUST use glassmorphism effects as described
8. MUST implement all search functionality
9. MUST ensure all toggles are interactive
10. MUST follow the exact component architecture

---

End of Specification Document