ywana-core8 0.2.8 → 0.2.9

package/src/desktop/desktop-windows.css

@@ -185,15 +185,12 @@
 
 .desktop--windows .application-menu__category {
     background: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 16px;
     font-family: 'Segoe UI', sans-serif;
     font-size: 13px;
 }
 
 .desktop--windows .application-menu__category:hover {
     background: #f5f5f5;
-    border-color: #d0d0d0;
 }
 
 .desktop--windows .application-menu__category.active {

package/src/desktop/desktop.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState, createContext, useContext } from 'r
 import { WindowProvider, useWindows } from './WindowContext'
 import { Window } from './window'
 import { ApplicationMenu } from './ApplicationMenu'
-import { defaultAppManager } from './AppManager'
+import { AppManager, AppLoader, defaultDesktopConfig } from './AppManager'
 import { ToggleButton } from '../html/selector'
 import { Icon } from '../html/icon'
 import './desktop.css'
@@ -34,9 +34,22 @@ export const useAppManager = () => {
 /**
  * AppProvider - Provides Application state and AppManager to React components
  */
-export const AppProvider = ({ children, appManager = defaultAppManager }) => {
+export const AppProvider = ({
+    children,
+    desktopConfig = defaultDesktopConfig
+}) => {
+    // Create a new AppManager instance if none provided
+    const appManager = new AppManager()
     const [isApplicationMenuOpen, setIsApplicationMenuOpen] = useState(false)
 
+    // Load configuration on mount
+    useEffect(() => {
+        // Only load if the appManager is empty (no apps registered)
+        if (appManager.getAllApps().length === 0 && desktopConfig) {
+            AppLoader.load(appManager, desktopConfig)
+        }
+    }, [appManager, desktopConfig])
+
     const value = {
         // Application Menu state
         applicationMenu: {
@@ -46,7 +59,7 @@ export const AppProvider = ({ children, appManager = defaultAppManager }) => {
             toggle: () => setIsApplicationMenuOpen(!isApplicationMenuOpen)
         },
         // App Manager instance
-        appManager: appManager
+        appManager
     }
 
     return (
@@ -243,24 +256,24 @@ export const DesktopTaskbar = () => {
 
     return (
         <div className='desktop-taskbar' style={{
-                height: '50px',
-                background: 'rgba(0,0,0,0.8)',
-                display: 'flex',
-                alignItems: 'center',
-                padding: '0 16px',
-                gap: '8px'
-            }}>
-                {/* Start button */}
-                <ToggleButton
-                    checked={isOpen}
-                    onToggle={() => {
-                        console.log('Start button toggled, current state:', isOpen)
-                        toggle()
-                    }}
-                    icon="start"
-                    label="Start"
-                >
-                </ToggleButton>
+            height: '50px',
+            background: 'rgba(0,0,0,0.8)',
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 16px',
+            gap: '8px'
+        }}>
+            {/* Start button */}
+            <ToggleButton
+                checked={isOpen}
+                onToggle={() => {
+                    console.log('Start button toggled, current state:', isOpen)
+                    toggle()
+                }}
+                icon="start"
+                label="Start"
+            >
+            </ToggleButton>
 
             {/* Separator */}
             <div style={{
@@ -429,9 +442,16 @@ const DesktopInternal = ({ desktopSize, children, ...props }) => {
 /**
  * Main Desktop component with AppProvider wrapper
  */
-export const Desktop = ({ desktopSize, children, ...props }) => {
+export const Desktop = ({
+    desktopSize,
+    children,
+    desktopConfig,
+    ...props
+}) => {
     return (
-        <AppProvider>
+        <AppProvider
+            desktopConfig={desktopConfig}
+        >
             <DesktopInternal desktopSize={desktopSize} {...props}>
                 {children}
             </DesktopInternal>

package/src/desktop.backup/desktop.css

@@ -1,6 +0,0 @@
-.desktop {
-     height: 100vh;
-     width: 100vw;
-     background-color: rgb(113, 102, 226);
-     position: relative;
-}

package/src/desktop.backup/desktop.js

@@ -1,13 +0,0 @@
-import React from 'react'
-import './desktop.css'
-
-export const Desktop = (props) => {
-
-    const { children } = props
-
-    return (
-        <div className='desktop'>
-            { children }
-        </div>
-    )
-}

package/src/desktop.backup/window.css

@@ -1,58 +0,0 @@
-.window {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-    min-width: 20rem;
-    min-height: 15rem;
-    resize: both;
-    background-color: rgb(227, 227, 227);
-    display: grid;
-    overflow: hidden;
-    resize: both;
-}
-
-.window.normal {
-    grid-template-areas: 
-        "header header header"
-        "nav nav nav"
-        "menu main aside"
-        "footer footer footer";
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: 2rem auto 1fr auto;
-}
-
-.window>header {
-    grid-area: header;
-    padding: .3rem .3rem 0 0;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-}
-
-.window>header>label {
-    flex: 1;
-}
-
-.window>nav {
-    grid-area: nav;
-}
-
-.window>menu {
-    grid-area: menu;
-    padding: 0;
-}
-
-.window>main {
-    grid-area: main;
-    padding: .5rem;
-    overflow: hidden;
-    border: solid 1px var(--divider-color);
-}
-
-.window>aside {
-    grid-area: aside;
-}
-
-.window>footer {
-    grid-area: footer;
-}

package/src/desktop.backup/window.js

@@ -1,27 +0,0 @@
-import React from 'react'
-import { Button, Icon } from '../html'
-import './window.css'
-
-export const Window = (props) => {
-
-    const { id, icon, title, children } = props
-
-    return (
-        <div className="window normal" draggable>
-            <header>
-                <Icon icon={icon} size="small" />
-                <label>{title}</label>
-                <Icon icon="close" clickable size="small" />
-            </header>
-            <nav>
-
-            </nav>
-            <menu></menu>
-            <main>
-                {children}x
-            </main>
-            <aside></aside>
-            <footer>x</footer>
-        </div>
-    )
-}