ywana-core8 0.2.20 → 0.2.21

package/src/desktop/{ApplicationMenu.js → LaunchPad.js}

@@ -1,12 +1,15 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useWindows } from './WindowContext'
 import { useAppManager } from './desktop'
-import './ApplicationMenu.css'
+import './LaunchPad.css'
 
 /**
- * ApplicationMenu - Full-screen overlay menu for launching applications
+ * LaunchPad - Full-screen application launcher inspired by macOS
+ *
+ * Displays all available applications organized by categories,
+ * with search functionality and multiple view modes.
  */
-export const ApplicationMenu = ({ isOpen, onClose }) => {
+export const LaunchPad = ({ isOpen, onClose }) => {
     const appManager = useAppManager()
     const [searchTerm, setSearchTerm] = useState('')
     const [selectedCategory, setSelectedCategory] = useState('all')
@@ -109,34 +112,33 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
     if (!isOpen) return null
 
     return (
-        <div className="application-menu-overlay" onClick={onClose}>
-            <div className={`application-menu ${isCondensed ? 'application-menu--condensed' : ''}`} onClick={(e) => e.stopPropagation()}>
+        <div className={`launchpad ${isCondensed ? 'launchpad--condensed' : ''}`}>
                 {/* Header */}
-                <div className="application-menu__header">
-                    <div className="application-menu__header-controls">
+                <div className="launchpad__header">
+                    <div className="launchpad__header-controls">
                         <button
-                            className={`application-menu__view-toggle ${isCondensed ? 'active' : ''}`}
+                            className={`launchpad__view-toggle ${isCondensed ? 'active' : ''}`}
                             onClick={() => setIsCondensed(!isCondensed)}
                             title={isCondensed ? "Normal view" : "Condensed view"}
                         >
                             ⚏
                         </button>
                         <button
-                            className={`application-menu__view-toggle ${viewMode === 'grid' ? 'active' : ''}`}
+                            className={`launchpad__view-toggle ${viewMode === 'grid' ? 'active' : ''}`}
                             onClick={() => setViewMode('grid')}
                             title="Grid view"
                         >
                             ⊞
                         </button>
                         <button
-                            className={`application-menu__view-toggle ${viewMode === 'list' ? 'active' : ''}`}
+                            className={`launchpad__view-toggle ${viewMode === 'list' ? 'active' : ''}`}
                             onClick={() => setViewMode('list')}
                             title="List view"
                         >
                             ☰
                         </button>
                         <button
-                            className="application-menu__close"
+                            className="launchpad__close"
                             onClick={onClose}
                             title="Close menu"
                         >
@@ -146,24 +148,24 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
                 </div>
 
                 {/* Search */}
-                <div className="application-menu__search">
+                <div className="launchpad__search">
                     <input
                         ref={searchInputRef}
                         type="text"
                         placeholder="Search applications..."
                         value={searchTerm}
                         onChange={(e) => setSearchTerm(e.target.value)}
-                        className="application-menu__search-input"
+                        className="launchpad__search-input"
                     />
                 </div>
 
                 {/* Main Grid Layout */}
-                <div className="application-menu__main">
+                <div className="launchpad__main">
                     {/* Categories Sidebar */}
-                    <div className="application-menu__sidebar">
-                        <div className="application-menu__categories">
+                    <div className="launchpad__sidebar">
+                        <div className="launchpad__categories">
                             <button
-                                className={`application-menu__category ${selectedCategory === 'all' ? 'active' : ''}`}
+                                className={`launchpad__category ${selectedCategory === 'all' ? 'active' : ''}`}
                                 onClick={() => handleCategorySelect('all')}
                                 title="All Apps"
                             >
@@ -173,7 +175,7 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
                             {categories.map(category => (
                                 <button
                                     key={category.id}
-                                    className={`application-menu__category ${selectedCategory === category.id ? 'active' : ''}`}
+                                    className={`launchpad__category ${selectedCategory === category.id ? 'active' : ''}`}
                                     onClick={() => handleCategorySelect(category.id)}
                                     title={category.name}
                                 >
@@ -185,15 +187,15 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
                     </div>
 
                     {/* Applications Content */}
-                    <div className="application-menu__content">
+                    <div className="launchpad__content">
                         {searchTerm && (
-                            <div className="application-menu__search-results">
+                            <div className="launchpad__search-results">
                                 <h3>Search Results ({filteredApps.length})</h3>
-                                <div className={`application-menu__apps-${viewMode}`}>
+                                <div className={`launchpad__apps-${viewMode}`}>
                                     {filteredApps.map(app => (
                                         <div
                                             key={app.id}
-                                            className={`application-menu__app--${viewMode}`}
+                                            className={`launchpad__app--${viewMode}`}
                                             onClick={() => handleLaunchApp(app)}
                                             title={app.description}
                                         >
@@ -213,15 +215,15 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
                         )}
 
                         {!searchTerm && (
-                            <div className="application-menu__categories-content">
+                            <div className="launchpad__categories-content">
                                 {Object.entries(groupedApps).map(([categoryName, categoryApps]) => (
-                                    <div key={categoryName} className="application-menu__category-section">
+                                    <div key={categoryName} className="launchpad__category-section">
                                         <h3 className="category-title">{categoryName}</h3>
-                                        <div className={`application-menu__apps-${viewMode}`}>
+                                        <div className={`launchpad__apps-${viewMode}`}>
                                             {categoryApps.map(app => (
                                                 <div
                                                     key={app.id}
-                                                    className={`application-menu__app--${viewMode}`}
+                                                    className={`launchpad__app--${viewMode}`}
                                                     onClick={() => handleLaunchApp(app)}
                                                     title={app.description}
                                                 >
@@ -243,7 +245,7 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
                         )}
 
                         {filteredApps.length === 0 && (
-                            <div className="application-menu__no-results">
+                            <div className="launchpad__no-results">
                                 <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔍</div>
                                 <h3>No applications found</h3>
                                 <p>Try adjusting your search or category filter.</p>
@@ -252,8 +254,7 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
                     </div>
                 </div>
             </div>
-        </div>
     )
 }
 
-export default ApplicationMenu
+export default LaunchPad

package/src/desktop/WindowContext.js

@@ -76,6 +76,8 @@ export const WindowProvider = ({ children, desktopSize }) => {
         // Layout functions
         cascadeWindows: () => windowManagerRef.current.cascadeWindows(),
         tileWindows: () => windowManagerRef.current.tileWindows(),
+        arrangeWindowsInColumns: () => windowManagerRef.current.arrangeWindowsInColumns(),
+        arrangeWindowsInRows: () => windowManagerRef.current.arrangeWindowsInRows(),
         centerWindow: (id) => windowManagerRef.current.centerWindow(id),
         centerAllWindows: () => windowManagerRef.current.centerAllWindows(),
         

package/src/desktop/WindowManager.js

@@ -366,6 +366,60 @@ export class WindowManager {
         this.notifyListeners()
     }
 
+    /**
+     * Arrange windows in columns
+     */
+    arrangeWindowsInColumns() {
+        const visibleWindows = this.getVisibleWindows().filter(w => !w.maximized)
+        if (visibleWindows.length === 0) return
+
+        const cols = visibleWindows.length
+        const windowWidth = Math.floor(this.desktopSize.width / cols)
+        const windowHeight = this.desktopSize.height
+        const padding = 5
+
+        visibleWindows.forEach((window, index) => {
+            window.position = {
+                x: index * windowWidth + padding,
+                y: padding
+            }
+            window.size = {
+                width: windowWidth - (padding * 2),
+                height: windowHeight - (padding * 2)
+            }
+            window.maximized = false
+        })
+
+        this.notifyListeners()
+    }
+
+    /**
+     * Arrange windows in rows
+     */
+    arrangeWindowsInRows() {
+        const visibleWindows = this.getVisibleWindows().filter(w => !w.maximized)
+        if (visibleWindows.length === 0) return
+
+        const rows = visibleWindows.length
+        const windowWidth = this.desktopSize.width
+        const windowHeight = Math.floor(this.desktopSize.height / rows)
+        const padding = 5
+
+        visibleWindows.forEach((window, index) => {
+            window.position = {
+                x: padding,
+                y: index * windowHeight + padding
+            }
+            window.size = {
+                width: windowWidth - (padding * 2),
+                height: windowHeight - (padding * 2)
+            }
+            window.maximized = false
+        })
+
+        this.notifyListeners()
+    }
+
     /**
      * Get statistics
      */

package/src/desktop/{desktop-linux.css → desktop-gnome.css}

@@ -1,19 +1,19 @@
-/* Linux Desktop Theme (GNOME/Ubuntu inspired) */
+/* GNOME Desktop Theme (Ubuntu/Fedora inspired) */
 
-.desktop--linux {
+.desktop--gnome {
     background: linear-gradient(135deg, #2c001e 0%, #4c2c92 50%, #0e4b99 100%);
     font-family: 'Ubuntu', 'Cantarell', 'DejaVu Sans', sans-serif;
 }
 
-.desktop--linux .desktop__background {
-    background-image: 
+.desktop--gnome .desktop__background {
+    background-image:
         radial-gradient(circle at 30% 70%, rgba(233, 84, 32, 0.2) 0%, transparent 50%),
         radial-gradient(circle at 70% 30%, rgba(119, 41, 83, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 50% 50%, rgba(14, 75, 153, 0.2) 0%, transparent 50%);
 }
 
-/* Linux-style windows (GNOME) */
-.desktop--linux .window {
+/* GNOME-style windows */
+.desktop--gnome .window {
     border: 1px solid #2d2d2d;
     border-radius: 12px 12px 0 0;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
@@ -21,7 +21,7 @@
     overflow: hidden;
 }
 
-.desktop--linux .window__header {
+.desktop--gnome .window__header {
     background: linear-gradient(180deg, #f6f5f4 0%, #e6e5e4 100%);
     border-bottom: 1px solid #d0cfce;
     border-radius: 12px 12px 0 0;
@@ -29,13 +29,13 @@
     padding: 0 16px;
 }
 
-.desktop--linux .window__title {
+.desktop--gnome .window__title {
     font-size: 14px;
     font-weight: 500;
     color: #2e3436;
 }
 
-.desktop--linux .window__control {
+.desktop--gnome .window__control {
     width: 24px;
     height: 24px;
     border: none;
@@ -49,50 +49,59 @@
     margin-left: 8px;
 }
 
-.desktop--linux .window__control--minimize {
+.desktop--gnome .window__control--minimize {
     background: #f6d32d;
     border: 1px solid #f5c211;
 }
 
-.desktop--linux .window__control--maximize {
+.desktop--gnome .window__control--maximize {
     background: #33d17a;
     border: 1px solid #2ec27e;
 }
 
-.desktop--linux .window__control--close {
+.desktop--gnome .window__control--close {
     background: #e01b24;
     border: 1px solid #c01c28;
     color: white;
 }
 
-.desktop--linux .window__control:hover {
+.desktop--gnome .window__control:hover {
     transform: scale(1.1);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.desktop--linux .window__control--minimize::before {
+.desktop--gnome .window__control--minimize::before {
     content: '−';
     font-weight: bold;
 }
 
-.desktop--linux .window__control--maximize::before {
+.desktop--gnome .window__control--maximize::before {
     content: '□';
     font-weight: bold;
 }
 
-.desktop--linux .window__control--close::before {
+.desktop--gnome .window__control--close::before {
     content: '×';
     font-weight: bold;
 }
 
-/* Linux taskbar styling (GNOME Activities) */
-.desktop--linux .desktop-taskbar {
+/* GNOME taskbar styling (GNOME Activities) */
+.desktop--gnome .desktop-taskbar {
     background: rgba(0, 0, 0, 0.85);
     backdrop-filter: blur(10px);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.desktop--linux .taskbar-button {
+.desktop--gnome .desktop-taskbar .icon {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.desktop--gnome .desktop-taskbar .icon:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.12);
+}
+
+.desktop--gnome .taskbar-button {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.15);
     border-radius: 8px;
@@ -103,19 +112,19 @@
     transition: all 0.3s ease;
 }
 
-.desktop--linux .taskbar-button:hover {
+.desktop--gnome .taskbar-button:hover {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.25);
     transform: translateY(-1px);
 }
 
-.desktop--linux .taskbar-button--active {
+.desktop--gnome .taskbar-button--active {
     background: rgba(53, 132, 228, 0.3);
     border-color: rgba(53, 132, 228, 0.5);
 }
 
 /* Linux Start Button Styling (GNOME Activities) */
-.desktop--linux .toggle-button {
+.desktop--gnome .toggle-button {
     /* Reset selector styles and apply Linux button styling */
     position: relative;
     padding: 8px 16px;
@@ -141,26 +150,26 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.desktop--linux .toggle-button:hover:not(.toggle-button--disabled) {
+.desktop--gnome .toggle-button:hover:not(.toggle-button--disabled) {
     background: linear-gradient(180deg, rgba(53, 132, 228, 1) 0%, rgba(26, 95, 180, 1) 100%);
     border-color: rgba(255, 255, 255, 0.25);
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
 }
 
-.desktop--linux .toggle-button.selected {
+.desktop--gnome .toggle-button.selected {
     background: linear-gradient(180deg, rgba(26, 95, 180, 0.9) 0%, rgba(15, 70, 140, 0.9) 100%);
     color: #ffffff;
     border-color: rgba(255, 255, 255, 0.3);
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(53, 132, 228, 0.4);
 }
 
-.desktop--linux .toggle-button:focus {
+.desktop--gnome .toggle-button:focus {
     outline: 2px solid rgba(53, 132, 228, 0.6);
     outline-offset: 2px;
 }
 
-.desktop--linux .toggle-button--disabled {
+.desktop--gnome .toggle-button--disabled {
     background: rgba(255, 255, 255, 0.1) !important;
     color: rgba(255, 255, 255, 0.4) !important;
     border-color: rgba(255, 255, 255, 0.05) !important;
@@ -169,8 +178,8 @@
     box-shadow: none;
 }
 
-/* Linux Application Menu (Activities Overview) */
-.desktop--linux .application-menu {
+/* Linux LaunchPad (Activities Overview) */
+.desktop--gnome .launchpad {
     background: rgba(36, 31, 49, 0.95);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
@@ -179,29 +188,29 @@
     color: #ffffff;
 }
 
-.desktop--linux .application-menu__header {
+.desktop--gnome .launchpad__header {
     background: linear-gradient(180deg, rgba(46, 52, 54, 0.8) 0%, rgba(36, 31, 49, 0.8) 100%);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     color: #ffffff;
 }
 
-.desktop--linux .application-menu__header h2 {
+.desktop--gnome .launchpad__header h2 {
     color: #ffffff;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 500;
 }
 
-.desktop--linux .application-menu__close {
+.desktop--gnome .launchpad__close {
     color: #ffffff;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 6px;
 }
 
-.desktop--linux .application-menu__close:hover {
+.desktop--gnome .launchpad__close:hover {
     background: rgba(224, 27, 36, 0.8);
 }
 
-.desktop--linux .application-menu__search-input {
+.desktop--gnome .launchpad__search-input {
     background: rgba(255, 255, 255, 0.1);
     border: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
@@ -209,17 +218,26 @@
     font-family: 'Ubuntu', sans-serif;
 }
 
-.desktop--linux .application-menu__search-input::placeholder {
+.desktop--gnome .launchpad__search-input::placeholder {
     color: rgba(255, 255, 255, 0.6);
 }
 
-.desktop--linux .application-menu__search-input:focus {
+.desktop--gnome .launchpad__search-input:focus {
     border-color: rgba(53, 132, 228, 0.8);
     background: rgba(255, 255, 255, 0.15);
     outline: none;
 }
 
-.desktop--linux .application-menu__category {
+.desktop--gnome .launchpad__sidebar {
+    background: rgba(46, 52, 54, 0.8);
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.desktop--gnome .launchpad__categories {
+    background: rgba(46, 52, 54, 0.8);
+}
+
+.desktop--gnome .launchpad__category {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 20px;
@@ -229,59 +247,59 @@
     font-weight: 400;
 }
 
-.desktop--linux .application-menu__category:hover {
+.desktop--gnome .launchpad__category:hover {
     background: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.3);
 }
 
-.desktop--linux .application-menu__category.active {
+.desktop--gnome .launchpad__category.active {
     background: rgba(53, 132, 228, 0.8);
     border-color: rgba(53, 132, 228, 1);
     color: #ffffff;
 }
 
-.desktop--linux .application-menu__app {
+.desktop--gnome .launchpad__app {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid transparent;
     border-radius: 12px;
     transition: all 0.2s ease;
 }
 
-.desktop--linux .application-menu__app:hover {
+.desktop--gnome .launchpad__app:hover {
     background: rgba(255, 255, 255, 0.15);
     border-color: rgba(255, 255, 255, 0.2);
     transform: translateY(-2px);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 
-.desktop--linux .app-name {
+.desktop--gnome .app-name {
     font-family: 'Ubuntu', sans-serif;
     font-size: 13px;
     font-weight: 400;
     color: #ffffff;
 }
 
-.desktop--linux .category-title {
+.desktop--gnome .category-title {
     color: #ffffff;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 500;
 }
 
 /* Linux scrollbar */
-.desktop--linux .application-menu__content::-webkit-scrollbar {
+.desktop--gnome .launchpad__content::-webkit-scrollbar {
     width: 8px;
 }
 
-.desktop--linux .application-menu__content::-webkit-scrollbar-track {
+.desktop--gnome .launchpad__content::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
 }
 
-.desktop--linux .application-menu__content::-webkit-scrollbar-thumb {
+.desktop--gnome .launchpad__content::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.3);
     border-radius: 4px;
 }
 
-.desktop--linux .application-menu__content::-webkit-scrollbar-thumb:hover {
+.desktop--gnome .launchpad__content::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.5);
 }