Upload 4 files

components/desktop/DesktopView.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { FeatureDock } from './FeatureDock.tsx';
+import { Window } from './Window.tsx';
+import { Taskbar } from './Taskbar.tsx';
+import { ALL_FEATURES } from '../features/index.ts';
+import type { Feature } from '../../types.ts';
+
+interface WindowState {
+  id: string;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  zIndex: number;
+  isMinimized: boolean;
+}
+
+const Z_INDEX_BASE = 10;
+
+export const DesktopView: React.FC<{ openFeatureId?: string }> = ({ openFeatureId }) => {
+    const [windows, setWindows] = useState<Record<string, WindowState>>({});
+    const [activeId, setActiveId] = useState<string | null>(null);
+    const [nextZIndex, setNextZIndex] = useState(Z_INDEX_BASE);
+    
+    const openWindow = useCallback((featureId: string) => {
+        const newZIndex = nextZIndex + 1;
+        setNextZIndex(newZIndex);
+        setActiveId(featureId);
+
+        setWindows(prev => {
+            const existingWindow = prev[featureId];
+            if (existingWindow) {
+                return {
+                    ...prev,
+                    [featureId]: {
+                        ...existingWindow,
+                        isMinimized: false,
+                        zIndex: newZIndex,
+                    }
+                };
+            }
+
+            const openWindowsCount = Object.values(prev).filter(w => !w.isMinimized).length;
+            const newWindow: WindowState = {
+                id: featureId,
+                position: { x: 50 + openWindowsCount * 30, y: 50 + openWindowsCount * 30 },
+                size: { width: 800, height: 600 },
+                zIndex: newZIndex,
+                isMinimized: false,
+            };
+            return { ...prev, [featureId]: newWindow };
+        });
+    }, [nextZIndex]);
+    
+    useEffect(() => {
+        if(openFeatureId) {
+            openWindow(openFeatureId);
+        }
+    }, [openFeatureId, openWindow])
+
+    const closeWindow = (id: string) => {
+        setWindows(prev => {
+            const newState = { ...prev };
+            delete newState[id];
+            return newState;
+        });
+    };
+
+    const minimizeWindow = (id: string) => {
+        setWindows(prev => ({
+            ...prev,
+            [id]: { ...prev[id], isMinimized: true }
+        }));
+        setActiveId(null);
+    };
+
+    const focusWindow = (id: string) => {
+        if (id === activeId) return;
+        const newZIndex = nextZIndex + 1;
+        setNextZIndex(newZIndex);
+        setActiveId(id);
+        setWindows(prev => ({
+            ...prev,
+            [id]: { ...prev[id], zIndex: newZIndex }
+        }));
+    };
+    
+    const updateWindowState = (id: string, updates: Partial<WindowState>) => {
+        setWindows(prev => ({
+            ...prev,
+            [id]: { ...prev[id], ...updates }
+        }));
+    }
+
+    const openWindows = Object.values(windows).filter(w => !w.isMinimized);
+    const minimizedWindows = Object.values(windows).filter(w => w.isMinimized);
+    const featuresMap = new Map(ALL_FEATURES.map(f => [f.id, f]));
+
+    return (
+        <div className="h-full flex flex-col bg-transparent">
+            <FeatureDock onOpen={openWindow} />
+            <div className="flex-grow relative overflow-hidden">
+                {openWindows.map(win => {
+                    const feature = featuresMap.get(win.id);
+                    if (!feature) return null;
+                    return (
+                        <Window
+                            key={win.id}
+                            feature={feature}
+                            state={win}
+                            isActive={win.id === activeId}
+                            onClose={() => closeWindow(win.id)}
+                            onMinimize={() => minimizeWindow(win.id)}
+                            onFocus={() => focusWindow(win.id)}
+                            onUpdate={updateWindowState}
+                        />
+                    );
+                })}
+            </div>
+            <Taskbar
+                minimizedWindows={minimizedWindows.map(w => featuresMap.get(w.id)).filter(Boolean) as Feature[]}
+                onRestore={openWindow}
+            />
+        </div>
+    );
+};

components/desktop/FeatureDock.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ALL_FEATURES } from '../features/index.ts';
+import type { Feature } from '../../types.ts';
+
+interface FeatureButtonProps {
+    feature: Feature;
+    onOpen: (id: string) => void;
+}
+
+const FeatureButton: React.FC<FeatureButtonProps> = ({ feature, onOpen }) => {
+    return (
+        <button
+            onClick={() => onOpen(feature.id)}
+            className="w-24 h-24 flex flex-col items-center justify-center p-2 rounded-lg bg-slate-800/50 hover:bg-slate-700/80 transition-colors group"
+            title={feature.name}
+        >
+            <div className="text-cyan-400 group-hover:scale-110 transition-transform">{feature.icon}</div>
+            <span className="text-xs text-slate-300 mt-2 text-center w-full break-words">{feature.name}</span>
+        </button>
+    );
+};
+
+interface FeatureDockProps {
+    onOpen: (id: string) => void;
+}
+
+export const FeatureDock: React.FC<FeatureDockProps> = ({ onOpen }) => {
+    return (
+        <div className="h-96 flex-shrink-0 bg-slate-900/50 backdrop-blur-sm border-b border-slate-800 p-3 overflow-y-auto">
+            <div className="flex flex-wrap gap-3 justify-center">
+                {ALL_FEATURES.map(feature => (
+                    <FeatureButton key={feature.id} feature={feature} onOpen={onOpen} />
+                ))}
+            </div>
+        </div>
+    );
+};

components/desktop/Taskbar.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { Feature } from '../../types.ts';
+
+interface TaskbarProps {
+  minimizedWindows: Feature[];
+  onRestore: (id: string) => void;
+}
+
+export const Taskbar: React.FC<TaskbarProps> = ({ minimizedWindows, onRestore }) => {
+  if (minimizedWindows.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="absolute bottom-0 left-20 right-0 h-10 bg-slate-900/80 backdrop-blur-sm border-t border-slate-700 flex items-center px-2 gap-2 z-[999]">
+      {minimizedWindows.map(feature => (
+        <button
+          key={feature.id}
+          onClick={() => onRestore(feature.id)}
+          className="h-8 px-3 flex items-center gap-2 rounded-md bg-slate-700 hover:bg-slate-600 text-slate-200 text-sm"
+          title={`Restore ${feature.name}`}
+        >
+          <div className="w-4 h-4">{feature.icon}</div>
+          <span>{feature.name}</span>
+        </button>
+      ))}
+    </div>
+  );
+};

components/desktop/Window.tsx

@@ -0,0 +1,90 @@
+import React, { Suspense, useRef, useState } from 'react';
+import type { Feature } from '../../types.ts';
+import { FEATURES_MAP } from '../features/index.ts';
+import { LoadingIndicator } from '../../App.tsx';
+import { MinimizeIcon, XMarkIcon } from '../icons/InterfaceIcons.tsx';
+
+interface WindowState {
+  id: string;
+  position: { x: number; y: number };
+  size: { width: number; height: number };
+  zIndex: number;
+  isMinimized: boolean;
+}
+
+interface WindowProps {
+  feature: Feature;
+  state: WindowState;
+  isActive: boolean;
+  onClose: (id: string) => void;
+  onMinimize: (id: string) => void;
+  onFocus: (id: string) => void;
+  onUpdate: (id: string, updates: Partial<WindowState>) => void;
+}
+
+export const Window: React.FC<WindowProps> = ({ feature, state, isActive, onClose, onMinimize, onFocus, onUpdate }) => {
+  const dragStartPos = useRef<{ x: number; y: number } | null>(null);
+  const initialPos = useRef<{ x: number; y: number } | null>(null);
+  
+  const FeatureComponent = FEATURES_MAP.get(feature.id)?.component;
+
+  const handleDragStart = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    onFocus(feature.id);
+    dragStartPos.current = { x: e.clientX, y: e.clientY };
+    initialPos.current = { x: state.position.x, y: state.position.y };
+    window.addEventListener('mousemove', handleDragMove);
+    window.addEventListener('mouseup', handleDragEnd);
+  };
+
+  const handleDragMove = (e: MouseEvent) => {
+    if (!dragStartPos.current || !initialPos.current) return;
+    const dx = e.clientX - dragStartPos.current.x;
+    const dy = e.clientY - dragStartPos.current.y;
+    onUpdate(feature.id, { position: { x: initialPos.current.x + dx, y: initialPos.current.y + dy }});
+  };
+
+  const handleDragEnd = () => {
+    dragStartPos.current = null;
+    initialPos.current = null;
+    window.removeEventListener('mousemove', handleDragMove);
+    window.removeEventListener('mouseup', handleDragEnd);
+  };
+  
+  return (
+    <div
+      className={`absolute bg-slate-800/70 backdrop-blur-md border rounded-lg shadow-2xl shadow-black/50 flex flex-col transition-all duration-100 ${isActive ? 'border-cyan-500/50' : 'border-slate-700/50'}`}
+      style={{
+        left: state.position.x,
+        top: state.position.y,
+        width: state.size.width,
+        height: state.size.height,
+        zIndex: state.zIndex
+      }}
+      onMouseDown={() => onFocus(feature.id)}
+    >
+      <header
+        className={`flex items-center justify-between h-8 px-2 border-b ${isActive ? 'bg-slate-700/50 border-slate-600' : 'bg-slate-800/50 border-slate-700'} rounded-t-lg cursor-move`}
+        onMouseDown={handleDragStart}
+      >
+        <div className="flex items-center gap-2 text-xs">
+           <div className="w-4 h-4">{feature.icon}</div>
+           <span>{feature.name}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button onClick={() => onMinimize(feature.id)} className="p-1 rounded hover:bg-slate-600"><MinimizeIcon /></button>
+          <button onClick={() => onClose(feature.id)} className="p-1 rounded hover:bg-red-500/50"><XMarkIcon className="w-4 h-4"/></button>
+        </div>
+      </header>
+      <main className="flex-1 overflow-auto bg-slate-800/50 rounded-b-lg">
+        {FeatureComponent ? (
+          <Suspense fallback={<LoadingIndicator/>}>
+            <FeatureComponent />
+          </Suspense>
+        ) : (
+            <div className="p-4 text-red-400">Error: Component not found for {feature.name}</div>
+        )}
+      </main>
+    </div>
+  );
+};