Fix Window component TypeScript error - simplify bounds prop

app/components/Desktop.tsx

@@ -41,7 +41,7 @@ import {
 } from '@phosphor-icons/react'
 
 export function Desktop() {
-  const [fileManagerOpen, setFileManagerOpen] = useState(true)
+  const [fileManagerOpen, setFileManagerOpen] = useState(false)
   const [calendarOpen, setCalendarOpen] = useState(false)
   const [clockOpen, setClockOpen] = useState(false)
 
@@ -84,6 +84,7 @@ export function Desktop() {
   const [powerState, setPowerState] = useState<'active' | 'sleep' | 'restart' | 'shutdown'>('active')
 
   const openFileManager = (path: string) => {
+    console.log('Opening File Manager with path:', path)
     setCurrentPath(path)
     setFileManagerOpen(true)
     setFileManagerMinimized(false)
@@ -91,15 +92,18 @@ export function Desktop() {
 
   const closeFileManager = () => {
     setFileManagerOpen(false)
+    setFileManagerMinimized(false)
   }
 
   const openCalendar = () => {
+    console.log('Opening Calendar')
     setCalendarOpen(true)
     setCalendarMinimized(false)
   }
 
   const closeCalendar = () => {
     setCalendarOpen(false)
+    setCalendarMinimized(false)
   }
 
   const openClock = () => {
@@ -109,17 +113,20 @@ export function Desktop() {
 
   const closeClock = () => {
     setClockOpen(false)
+    setClockMinimized(false)
   }
 
 
 
   const openGeminiChat = () => {
+    console.log('Opening Gemini Chat')
     setGeminiChatOpen(true)
     setGeminiChatMinimized(false)
   }
 
   const closeGeminiChat = () => {
     setGeminiChatOpen(false)
+    setGeminiChatMinimized(false)
   }
 
 
@@ -131,6 +138,7 @@ export function Desktop() {
 
   const closeSessionManager = () => {
     setSessionManagerOpen(false)
+    setSessionManagerMinimized(false)
   }
 
   const openFlutterRunner = (appFile: any) => {
@@ -141,6 +149,7 @@ export function Desktop() {
 
   const closeFlutterRunner = () => {
     setFlutterRunnerOpen(false)
+    setFlutterRunnerMinimized(false)
     setActiveFlutterApp(null)
   }
 
@@ -151,6 +160,7 @@ export function Desktop() {
 
   const closeResearchBrowser = () => {
     setResearchBrowserOpen(false)
+    setResearchBrowserMinimized(false)
   }
 
   const openFlutterCodeEditor = () => {
@@ -160,6 +170,7 @@ export function Desktop() {
 
   const closeFlutterCodeEditor = () => {
     setFlutterCodeEditorOpen(false)
+    setFlutterCodeEditorMinimized(false)
   }
 
   const openLaTeXEditor = () => {
@@ -169,6 +180,7 @@ export function Desktop() {
 
   const closeLaTeXEditor = () => {
     setLaTeXEditorOpen(false)
+    setLaTeXEditorMinimized(false)
   }
 
   const handleOpenApp = (appId: string) => {
@@ -503,6 +515,20 @@ export function Desktop() {
     })
   }
 
+  // Debug info
+  useEffect(() => {
+    console.log('App States:', {
+      fileManagerOpen,
+      calendarOpen,
+      clockOpen,
+      geminiChatOpen,
+      fileManagerMinimized,
+      calendarMinimized,
+      clockMinimized,
+      geminiChatMinimized
+    })
+  }, [fileManagerOpen, calendarOpen, clockOpen, geminiChatOpen, fileManagerMinimized, calendarMinimized, clockMinimized, geminiChatMinimized])
+
   return (
     <div className="relative h-screen w-screen overflow-hidden flex touch-auto" onContextMenu={handleDesktopRightClick}>
       <div
@@ -539,7 +565,6 @@ export function Desktop() {
         onOpenFileManager={openFileManager}
         onOpenCalendar={openCalendar}
         onOpenClock={openClock}
-
         onOpenGeminiChat={openGeminiChat}
         openApps={{
           files: fileManagerOpen,
@@ -550,7 +575,7 @@ export function Desktop() {
         minimizedApps={minimizedApps}
       />
 
-      <div className="flex-1 z-10 relative">
+      <div className="flex-1 z-10 relative pointer-events-auto">
         {/* Desktop Icons - Positioned in a grid layout - Hidden on mobile (use dock instead) */}
         <div className="absolute top-16 left-6 grid grid-flow-col grid-rows-[repeat(auto-fill,100px)] gap-x-4 gap-y-2 h-[calc(100vh-140px)] w-full pointer-events-none hidden lg:grid">
           <div className="pointer-events-auto w-24 h-24">
@@ -648,20 +673,29 @@ export function Desktop() {
         </div>
 
         <AnimatePresence>
-          {fileManagerOpen && (
+          {fileManagerOpen && !fileManagerMinimized && (
             <motion.div
               key="file-manager"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: fileManagerMinimized ? 0.1 : 1,
-                opacity: fileManagerMinimized ? 0 : 1,
-                y: fileManagerMinimized ? 400 : 0,
-                x: fileManagerMinimized ? '-40%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: fileManagerMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <FileManager
                 currentPath={currentPath}
@@ -675,39 +709,57 @@ export function Desktop() {
             </motion.div>
           )}
 
-          {calendarOpen && (
+          {calendarOpen && !calendarMinimized && (
             <motion.div
               key="calendar"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: calendarMinimized ? 0.1 : 1,
-                opacity: calendarMinimized ? 0 : 1,
-                y: calendarMinimized ? 400 : 0,
-                x: calendarMinimized ? '20%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: calendarMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <Calendar onClose={closeCalendar} onMinimize={() => setCalendarMinimized(true)} />
             </motion.div>
           )}
 
-          {clockOpen && (
+          {clockOpen && !clockMinimized && (
             <motion.div
               key="clock"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: clockMinimized ? 0.1 : 1,
-                opacity: clockMinimized ? 0 : 1,
-                y: clockMinimized ? 400 : 0,
-                x: clockMinimized ? '10%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: clockMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <Clock onClose={closeClock} onMinimize={() => setClockMinimized(true)} />
             </motion.div>
@@ -717,20 +769,29 @@ export function Desktop() {
 
 
 
-          {sessionManagerOpen && sessionInitialized && (
+          {sessionManagerOpen && sessionInitialized && !sessionManagerMinimized && (
             <motion.div
               key="session-manager"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: sessionManagerMinimized ? 0.1 : 1,
-                opacity: sessionManagerMinimized ? 0 : 1,
-                y: sessionManagerMinimized ? 400 : 0,
-                x: sessionManagerMinimized ? '40%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: sessionManagerMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <SessionManagerWindow
                 onClose={closeSessionManager}
@@ -741,20 +802,29 @@ export function Desktop() {
             </motion.div>
           )}
 
-          {flutterRunnerOpen && activeFlutterApp && (
+          {flutterRunnerOpen && activeFlutterApp && !flutterRunnerMinimized && (
             <motion.div
               key="flutter-runner"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: flutterRunnerMinimized ? 0.1 : 1,
-                opacity: flutterRunnerMinimized ? 0 : 1,
-                y: flutterRunnerMinimized ? 400 : 0,
-                x: flutterRunnerMinimized ? '50%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: flutterRunnerMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <FlutterRunner
                 initialCode={activeFlutterApp?.dartCode}
@@ -768,20 +838,29 @@ export function Desktop() {
             </motion.div>
           )}
 
-          {researchBrowserOpen && (
+          {researchBrowserOpen && !researchBrowserMinimized && (
             <motion.div
               key="research-browser"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: researchBrowserMinimized ? 0.1 : 1,
-                opacity: researchBrowserMinimized ? 0 : 1,
-                y: researchBrowserMinimized ? 400 : 0,
-                x: researchBrowserMinimized ? '-30%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: researchBrowserMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <ResearchBrowser
                 onClose={closeResearchBrowser}
@@ -790,57 +869,84 @@ export function Desktop() {
             </motion.div>
           )}
 
-          {flutterCodeEditorOpen && (
+          {flutterCodeEditorOpen && !flutterCodeEditorMinimized && (
             <motion.div
               key="flutter-code-editor"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: flutterCodeEditorMinimized ? 0.1 : 1,
-                opacity: flutterCodeEditorMinimized ? 0 : 1,
-                y: flutterCodeEditorMinimized ? 400 : 0,
-                x: flutterCodeEditorMinimized ? '50%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: flutterCodeEditorMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <FlutterCodeEditor onClose={closeFlutterCodeEditor} onMinimize={() => setFlutterCodeEditorMinimized(true)} />
             </motion.div>
           )}
 
-          {latexEditorOpen && (
+          {latexEditorOpen && !latexEditorMinimized && (
             <motion.div
               key="latex-editor"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: latexEditorMinimized ? 0.1 : 1,
-                opacity: latexEditorMinimized ? 0 : 1,
-                y: latexEditorMinimized ? 400 : 0,
-                x: latexEditorMinimized ? '60%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: latexEditorMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <LaTeXEditor onClose={closeLaTeXEditor} sessionId={userSession} onMinimize={() => setLaTeXEditorMinimized(true)} />
             </motion.div>
           )}
-          {geminiChatOpen && (
+          {geminiChatOpen && !geminiChatMinimized && (
             <motion.div
               key="gemini"
-              initial={{ scale: 0.8, opacity: 0, y: 100 }}
+              initial={{ scale: 0.9, opacity: 0 }}
               animate={{
-                scale: geminiChatMinimized ? 0.1 : 1,
-                opacity: geminiChatMinimized ? 0 : 1,
-                y: geminiChatMinimized ? 400 : 0,
-                x: geminiChatMinimized ? '0%' : 0
+                scale: 1,
+                opacity: 1,
+                clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
+              }}
+              exit={{
+                scale: 0.2,
+                opacity: 0,
+                y: "80vh",
+                clipPath: "polygon(45% 100%, 55% 100%, 60% 0%, 40% 0%)",
+                transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] }
+              }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
+              className="absolute"
+              style={{
+                transformOrigin: 'bottom center',
+                pointerEvents: 'auto',
+                zIndex: 1000
               }}
-              exit={{ scale: 0.8, opacity: 0, y: 100 }}
-              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
-              className="absolute inset-0"
-              style={{ pointerEvents: geminiChatMinimized ? 'none' : 'auto', transformOrigin: 'bottom center' }}
             >
               <GeminiChat onClose={closeGeminiChat} onMinimize={() => setGeminiChatMinimized(true)} />
             </motion.div>

app/components/Dock.tsx

@@ -48,6 +48,13 @@ const DockItem: React.FC<DockItemProps> = ({ icon, label, onClick, isActive = fa
   const [isHovered, setIsHovered] = useState(false)
   const ref = React.useRef<HTMLDivElement>(null)
 
+  const handleClick = () => {
+    console.log('Dock item clicked:', label)
+    if (onClick) {
+      onClick()
+    }
+  }
+
   return (
     <div className="dock-item group" ref={ref}>
       <motion.button
@@ -55,7 +62,7 @@ const DockItem: React.FC<DockItemProps> = ({ icon, label, onClick, isActive = fa
         whileTap={{ scale: 0.95 }}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
-        onClick={onClick}
+        onClick={handleClick}
         className={`app-icon w-10 h-10 md:w-12 md:h-12 rounded-xl shadow-lg flex items-center justify-center cursor-pointer border transition-all ${className}`}
         title={label}
       >

app/components/Window.tsx

@@ -44,6 +44,7 @@ const Window: React.FC<WindowProps> = ({
   const [currentSize, setCurrentSize] = React.useState({ width, height });
   const [isMobile, setIsMobile] = React.useState(false);
   const [isDraggingOrResizing, setIsDraggingOrResizing] = React.useState(false);
+  const [zIndex, setZIndex] = React.useState(1000);
 
   // Detect mobile device
   useEffect(() => {
@@ -98,17 +99,24 @@ const Window: React.FC<WindowProps> = ({
     if (onMaximize) onMaximize();
   };
 
+  // Global z-index counter
+  const bringToFront = () => {
+    // Increment z-index when window is clicked or dragged
+    setZIndex(Date.now());
+  };
+
   // Calculate Rnd props based on state
   const rndProps = isMaximized ? {
-    position: { x: 0, y: 32 }, // 32px for TopBar offset
-    size: { width: '100%', height: 'calc(100vh - 32px)' },
+    position: { x: 0, y: 40 }, // 40px for TopBar offset
+    size: { width: typeof window !== 'undefined' ? window.innerWidth : '100vw',
+           height: typeof window !== 'undefined' ? window.innerHeight - 40 : 'calc(100vh - 40px)' },
     disableDragging: true,
     enableResizing: false
   } : {
     position: currentPosition,
     size: currentSize,
     disableDragging: false,
-    enableResizing: true
+    enableResizing: resizable
   };
 
   return (
@@ -120,12 +128,19 @@ const Window: React.FC<WindowProps> = ({
       dragHandleClassName="window-drag-handle"
       enableResizing={!isMaximized && resizable}
       disableDragging={isMaximized}
-      onDragStart={() => setIsDraggingOrResizing(true)}
+      onMouseDown={bringToFront}
+      onDragStart={() => {
+        setIsDraggingOrResizing(true);
+        bringToFront();
+      }}
       onDragStop={(e, d) => {
         setIsDraggingOrResizing(false);
         if (!isMaximized) setCurrentPosition({ x: d.x, y: d.y });
       }}
-      onResizeStart={() => setIsDraggingOrResizing(true)}
+      onResizeStart={() => {
+        setIsDraggingOrResizing(true);
+        bringToFront();
+      }}
       onResizeStop={(e, direction, ref, delta, position) => {
         setIsDraggingOrResizing(false);
         if (!isMaximized) {
@@ -136,8 +151,8 @@ const Window: React.FC<WindowProps> = ({
           setCurrentPosition(position);
         }
       }}
-      className={`pointer-events-auto ${!isDraggingOrResizing ? 'transition-all duration-300 ease-in-out' : ''}`}
-      style={{ zIndex: 50 }}
+      className="absolute"
+      style={{ zIndex }}
     >
       <div
         className={`h-full macos-window flex flex-col ${className} ${windowClass}`}

next.config.mjs

@@ -10,6 +10,7 @@ const nextConfig = {
   output: 'standalone',
 
   // Configure for Hugging Face Spaces deployment
+  
   experimental: {
     outputFileTracingRoot: undefined,
   },

postcss.config.mjs

@@ -4,4 +4,5 @@ const config = {
   },
 };
 
+
 export default config;

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,