{"id":31681313,"url":"https://github.com/romanslack/vos_frontend","last_synced_at":"2025-10-08T07:48:10.753Z","repository":{"id":315801967,"uuid":"1060862952","full_name":"RomanSlack/VOS_frontend","owner":"RomanSlack","description":"Flutter frontend for the VOS project","archived":false,"fork":false,"pushed_at":"2025-09-20T19:17:19.000Z","size":91,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-20T21:17:17.239Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RomanSlack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-20T18:41:28.000Z","updated_at":"2025-09-20T19:17:23.000Z","dependencies_parsed_at":"2025-09-20T21:17:30.577Z","dependency_job_id":"f21e33f9-7aab-4da9-b329-f303486232b6","html_url":"https://github.com/RomanSlack/VOS_frontend","commit_stats":null,"previous_names":["romanslack/vos_frontend"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/RomanSlack/VOS_frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomanSlack%2FVOS_frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomanSlack%2FVOS_frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomanSlack%2FVOS_frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomanSlack%2FVOS_frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RomanSlack","download_url":"https://codeload.github.com/RomanSlack/VOS_frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RomanSlack%2FVOS_frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278909712,"owners_count":26066887,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-08T07:47:53.811Z","updated_at":"2025-10-08T07:48:10.748Z","avatar_url":"https://github.com/RomanSlack.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VOS Frontend\n\n[![Flutter](https://img.shields.io/badge/Flutter-3.0+-02569B?style=for-the-badge\u0026logo=flutter\u0026logoColor=white)](https://flutter.dev)\n[![Dart](https://img.shields.io/badge/Dart-3.0+-0175C2?style=for-the-badge\u0026logo=dart\u0026logoColor=white)](https://dart.dev)\n[![AI Powered](https://img.shields.io/badge/AI-Powered-FF6B6B?style=for-the-badge\u0026logo=openai\u0026logoColor=white)](https://openai.com)\n[![Built with Claude Code](https://img.shields.io/badge/Built%20with-Claude%20Code-8B5CF6?style=for-the-badge\u0026logo=anthropic\u0026logoColor=white)](https://claude.ai/code)\n\nA modern **Virtual Operating System** interface built with Flutter, featuring a sleek dark theme, AI-powered workspace, and elegant modal window management.\n\n![VOS Frontend](readme_images/vos_frontend_intro.png)\n\n## 🌟 What is VOS?\n\nVOS (Virtual Operating System) is a cutting-edge Flutter web application that simulates a modern operating system interface within your browser. It features:\n\n- **🎨 Dark Modern Design** - Elegant UI with subtle bevels, shadows, and VOS design system\n- **📱 Modal App Management** - Up to 4 concurrent apps with drag, resize, minimize, and fullscreen\n- **🎯 Smart App Rail** - Interactive launcher with visual state indicators\n- **⚡ High Performance** - Optimized animations and efficient state management\n- **🖥️ Responsive Workspace** - Grid-based workspace with smooth fade effects\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Flutter SDK 3.0+\n- Modern web browser (Firefox recommended for best performance)\n\n### Installation \u0026 Launch\n\n1. **Clone the repository:**\n```bash\ngit clone https://github.com/yourusername/VOS_frontend.git\ncd VOS_frontend\n```\n\n2. **Install dependencies:**\n```bash\nflutter pub get\n```\n\n3. **🎯 Launch VOS (Recommended):**\n```bash\nflutter run -d web-server --web-port=8080\n```\n\n4. **Open in your browser:**\nNavigate to **http://localhost:8080** in Firefox or Chrome\n\n\u003e **💡 Pro Tip:** Use Firefox for optimal performance, or try `--profile` mode for faster Chrome experience.\n\n## 🏗️ Architecture \u0026 Components\n\n### Core Components\n\n- **🎛️ AppRail** - Left navigation with 9 app launchers (Phone, Calendar, Tasks, Notes, Browser, Analytics, Shop, Chat, Notifications)\n- **🖼️ VosModal** - Draggable, resizable modal windows with window controls\n- **🌐 Workspace** - Grid background with edge fade effects\n- **🔔 Smart Notifications** - Elegant 4-modal limit warnings\n- **⚡ Modal Manager** - Production-grade state management system\n\n### Design System\n\n- **Colors**: Dark theme (`#212121` background, `#303030` surfaces, `#EDEDED` text)\n- **Typography**: Clean, consistent text hierarchy\n- **Shadows**: Dual-layer shadow system for depth\n- **Icons**: Material Design outlined icons with circular backgrounds\n- **Animations**: Smooth 150ms transitions with proper easing\n\n## 🎮 Features\n\n### ✨ Modal Window System\n- **4 Concurrent Apps** - Maximum productivity without clutter\n- **Drag \u0026 Drop** - Smooth repositioning within workspace bounds\n- **Resize Controls** - Bottom-right corner resize handles\n- **Window States** - Normal, minimized, fullscreen modes\n- **Smart Positioning** - Auto-cascading placement for new windows\n\n### 🎯 App Management\n- **Visual Indicators** - Green dots (open), orange pulsing dots (minimized)\n- **One-Click Launch** - Instant app opening from rail\n- **State Persistence** - Remembers window positions and states\n- **Limit Protection** - Elegant notifications prevent system overload\n\n### 🎨 Performance Optimizations\n- **Efficient Rebuilds** - Strategic widget isolation and caching\n- **Controlled Animations** - Managed animation lifecycles\n- **Smart State Management** - Change detection and minimal notifications\n- **Memory Management** - Proper disposal and cleanup\n\n## 🛠️ Development\n\n### Project Structure\n```\nlib/\n├── core/\n│   ├── modal_manager.dart     # State management for modals\n│   └── themes/               # VOS design system\n├── presentation/\n│   ├── widgets/\n│   │   ├── app_rail.dart     # Left navigation rail\n│   │   ├── vos_modal.dart    # Modal window component\n│   │   ├── workspace.dart    # Grid background workspace\n│   │   └── app_icon.dart     # Enhanced app launcher icons\n│   └── pages/\n│       └── home/             # Main application layout\n```\n\n### Key Technologies\n- **Flutter Web** - Cross-platform UI framework\n- **Custom State Management** - Optimized ChangeNotifier pattern\n- **Custom Painting** - Grid backgrounds and resize handles\n- **Gesture Detection** - Advanced drag, resize, and hover handling\n\n## 🧪 Testing \u0026 Performance\n\n### Launch Options\n```bash\n# Development (slower but with hot reload)\nflutter run -d web-server --web-port=8080\n\n# Profile mode (faster performance)\nflutter run -d web-server --web-port=8080 --profile\n\n# Different renderers\nflutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true   # CanvasKit\nflutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=false  # HTML\n```\n\n### Performance Tips\n- **Use Firefox** for best Flutter web performance\n- **Close browser DevTools** during testing\n- **Try Profile Mode** for production-like performance\n- **Disable browser extensions** that might interfere\n\n## 📱 Browser Compatibility\n\n| Browser | Performance | Features | Recommended |\n|---------|-------------|----------|-------------|\n| Firefox | ⭐⭐⭐⭐⭐ | Full | ✅ Yes |\n| Chrome | ⭐⭐⭐ | Full | ⚠️ Use --profile |\n| Safari | ⭐⭐⭐ | Full | ✅ Good |\n| Edge | ⭐⭐⭐⭐ | Full | ✅ Good |\n\n---\n\n**Built with Flutter** | **Experience the future of virtual operating systems**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromanslack%2Fvos_frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromanslack%2Fvos_frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromanslack%2Fvos_frontend/lists"}