feat: implement Metro-style Windows Phone mobile responsive UI

algospaced-ui/src/App.tsx

@@ -31,6 +31,7 @@ export default function App() {
     mysql: { isOpen: false, isMinimized: false },
   });
   const [activeWindow, setActiveWindow] = useState<string>('queue');
+  const [isMobile, setIsMobile] = useState(false);
 
   // Start Menu and System info
   const [isStartOpen, setIsStartOpen] = useState(false);
@@ -105,6 +106,17 @@ export default function App() {
     };
   }, []);
 
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => {
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+
   useEffect(() => {
     if (user) {
       fetchStreak();
@@ -352,6 +364,7 @@ export default function App() {
   }
 
   const username = user.email ? user.email.split('@')[0] : 'Player_One';
+  const isAnyWindowOpen = Object.values(windows).some(w => w.isOpen && !w.isMinimized);
 
   return (
     <div 
@@ -367,111 +380,246 @@ export default function App() {
       />
 
       {/* Desktop Icons column */}
-      <nav className="fixed left-0 top-12 h-[calc(100vh-80px)] w-[140px] flex flex-col items-center py-gutter-md space-y-6 z-10 overflow-y-auto custom-scrollbar select-none">
-        
-        {/* Daily Queue Shortcut */}
-        <button 
-          onClick={() => toggleWindowMinimize('queue')}
-          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
-        >
-          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
-            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
-              view_list
+      {!isMobile && (
+        <nav className="fixed left-0 top-12 h-[calc(100vh-80px)] w-[140px] flex flex-col items-center py-gutter-md space-y-6 z-10 overflow-y-auto custom-scrollbar select-none">
+          
+          {/* Daily Queue Shortcut */}
+          <button 
+            onClick={() => toggleWindowMinimize('queue')}
+            className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+          >
+            <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
+              <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
+                view_list
+              </span>
+            </div>
+            <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+              DAILY<br/>QUEUE
             </span>
-          </div>
-          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
-            DAILY<br/>QUEUE
-          </span>
-        </button>
-
-        {/* Journey Path Shortcut */}
-        <button 
-          onClick={() => toggleWindowMinimize('journey')}
-          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
-        >
-          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
-            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
-              route
+          </button>
+
+          {/* Journey Path Shortcut */}
+          <button 
+            onClick={() => toggleWindowMinimize('journey')}
+            className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+          >
+            <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
+              <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
+                route
+              </span>
+            </div>
+            <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+              JOURNEY<br/>PATH
             </span>
-          </div>
-          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
-            JOURNEY<br/>PATH
-          </span>
-        </button>
-
-        {/* Drive Sync Shortcut */}
-        <button 
-          onClick={triggerSync}
-          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
-        >
-          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
-            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
-              cloud_sync
+          </button>
+
+          {/* Drive Sync Shortcut */}
+          <button 
+            onClick={triggerSync}
+            className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+          >
+            <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
+              <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
+                cloud_sync
+              </span>
+            </div>
+            <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+              DRIVE<br/>SYNC
             </span>
-          </div>
-          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
-            DRIVE<br/>SYNC
-          </span>
-        </button>
-
-        {/* My Computer Shortcut */}
-        <button 
-          onClick={() => toggleWindowMinimize('computer')}
-          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
-        >
-          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] p-1 overflow-hidden">
-            <img 
-              alt="My Computer" 
-              className="w-full h-full object-cover" 
-              src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2tUGA2d7QiNyajDAWYK183zhNTgtAZpOXK3E9wRvHGs-t6ykWt9uPScYe_fziWzQI0pREcY_ThI341WvGMusyYmnAkagfuwx6wubIs1ES68DO8CCNAlcHcb2zOUU4MJeYuhWDy1uYRqyGYjIaDUqfgNWk2vm4WzwRqoorn2dxtZ6QdJhEKbXjG8fG9chkkvr68qJf0fLUL6bIqBXZg2FJ30S7zS3oZ4IZsug-wLyRYuJ4Gu_86snNUo1whNrBdZm5OMREfc9sLbwJ"
-            />
-          </div>
-          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
-            MY<br/>COMP
-          </span>
-        </button>
-
-        {/* Terminal Shortcut */}
-        <button 
-          onClick={() => toggleWindowMinimize('terminal')}
-          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
-        >
-          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] p-1 overflow-hidden">
-            <img 
-              alt="Terminal" 
-              className="w-full h-full object-cover" 
-              src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2AvcQ2oKWP8AJ8yR5nF82LLDEH1FKySUK-npnqEjvJ6Cs9xp8joCwH7x43oTCAC5xhO2rQdYzka3B6u72FNbdxMnsv3WJLye3bKochu8AnnRlS3szfYSaj724sYsiZo4n8G-oWqvl7C0rOGaDaU2nRH1xXmW2PBi6L2NryTsUaTCVZQKTKBBNNEOig5kh7B52e-iIuj2PTzaSjF9ebp6gMuCnBtJT8Sxo5Qsmvfm-t2U5r_qQpRiYj--Ut41T7NTh-tHgs4S4kBvz"
-            />
-          </div>
-          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
-            TERMINAL
-          </span>
-        </button>
-      </nav>
+          </button>
+
+          {/* My Computer Shortcut */}
+          <button 
+            onClick={() => toggleWindowMinimize('computer')}
+            className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+          >
+            <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] p-1 overflow-hidden">
+              <img 
+                alt="My Computer" 
+                className="w-full h-full object-cover" 
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2tUGA2d7QiNyajDAWYK183zhNTgtAZpOXK3E9wRvHGs-t6ykWt9uPScYe_fziWzQI0pREcY_ThI341WvGMusyYmnAkagfuwx6wubIs1ES68DO8CCNAlcHcb2zOUU4MJeYuhWDy1uYRqyGYjIaDUqfgNWk2vm4WzwRqoorn2dxtZ6QdJhEKbXjG8fG9chkkvr68qJf0fLUL6bIqBXZg2FJ30S7zS3oZ4IZsug-wLyRYuJ4Gu_86snNUo1whNrBdZm5OMREfc9sLbwJ"
+              />
+            </div>
+            <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+              MY<br/>COMP
+            </span>
+          </button>
+
+          {/* Terminal Shortcut */}
+          <button 
+            onClick={() => toggleWindowMinimize('terminal')}
+            className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+          >
+            <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] p-1 overflow-hidden">
+              <img 
+                alt="Terminal" 
+                className="w-full h-full object-cover" 
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2AvcQ2oKWP8AJ8yR5nF82LLDEH1FKySUK-npnqEjvJ6Cs9xp8joCwH7x43oTCAC5xhO2rQdYzka3B6u72FNbdxMnsv3WJLye3bKochu8AnnRlS3szfYSaj724sYsiZo4n8G-oWqvl7C0rOGaDaU2nRH1xXmW2PBi6L2NryTsUaTCVZQKTKBBNNEOig5kh7B52e-iIuj2PTzaSjF9ebp6gMuCnBtJT8Sxo5Qsmvfm-t2U5r_qQpRiYj--Ut41T7NTh-tHgs4S4kBvz"
+              />
+            </div>
+            <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+              TERMINAL
+            </span>
+          </button>
+        </nav>
+      )}
 
       {/* System Gadget Widget (Top Right) */}
-      <div className="absolute top-desktop-margin right-desktop-margin w-64 bg-paper-white border-[3px] border-ink-black gadget-shadow z-20 overflow-hidden flex flex-col shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] select-none">
-        <div className="bg-[#0ea5e9] border-b-[3px] border-ink-black px-3 py-1 flex justify-between items-center text-white">
-          <span className="font-window-title text-xs font-bold tracking-wide">Profile.sys</span>
+      {!isMobile && (
+        <div className="absolute top-desktop-margin right-desktop-margin w-64 bg-paper-white border-[3px] border-ink-black gadget-shadow z-20 overflow-hidden flex flex-col shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] select-none">
+          <div className="bg-[#0ea5e9] border-b-[3px] border-ink-black px-3 py-1 flex justify-between items-center text-white">
+            <span className="font-window-title text-xs font-bold tracking-wide">Profile.sys</span>
+          </div>
+          <div className="p-3 flex items-center gap-3 bg-[#fdf8e1]">
+            <div className="w-12 h-12 border-[3px] border-ink-black overflow-hidden bg-primary-fixed-dim shadow-[2px_2px_0_0_#1E293B] shrink-0">
+              <img 
+                className="w-full h-full object-cover" 
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuBl1MnAmh_W_EWibibrGw1F1YSenuKlaIn3JymUnBKn1nPLjAaOBjoLzdT5krzVDmihFhXOk-DEtNTdM2Js1_Ttr--5WZohhyqD1QfpS6j_yU1_-4wweOmgWq2HLUYNMf0mzQDNLNu5KbACEJKL5sm1YaTLPePlO687X3VHYsUhWTpUQeBwFjushaBpyW8tEa2dJj5ZSRWq0qa5GhtE0zAAW741e2SIRtFOp7CvBYEEetymSiucK513lli1TUwgWIgXvlfxZoGbH00q"
+              />
+            </div>
+            <div className="overflow-hidden">
+              <div className="font-headline-md text-sm font-bold text-ink-black truncate">{username}</div>
+              <div className="flex items-center gap-1 text-red-500 mt-1 select-none font-bold">
+                <span className="material-symbols-outlined text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>
+                  local_fire_department
+                </span>
+                <span className="font-arcade text-[7px]">{streak?.current_streak ?? 0} DAY STREAK</span>
+              </div>
+            </div>
+          </div>
         </div>
-        <div className="p-3 flex items-center gap-3 bg-[#fdf8e1]">
-          <div className="w-12 h-12 border-[3px] border-ink-black overflow-hidden bg-primary-fixed-dim shadow-[2px_2px_0_0_#1E293B] shrink-0">
-            <img 
-              className="w-full h-full object-cover" 
-              src="https://lh3.googleusercontent.com/aida-public/AB6AXuBl1MnAmh_W_EWibibrGw1F1YSenuKlaIn3JymUnBKn1nPLjAaOBjoLzdT5krzVDmihFhXOk-DEtNTdM2Js1_Ttr--5WZohhyqD1QfpS6j_yU1_-4wweOmgWq2HLUYNMf0mzQDNLNu5KbACEJKL5sm1YaTLPePlO687X3VHYsUhWTpUQeBwFjushaBpyW8tEa2dJj5ZSRWq0qa5GhtE0zAAW741e2SIRtFOp7CvBYEEetymSiucK513lli1TUwgWIgXvlfxZoGbH00q"
-            />
+      )}
+
+      {/* Windows Phone Metro Start Screen (Mobile Home View) */}
+      {isMobile && !isAnyWindowOpen && (
+        <div className="w-full h-[calc(100vh-56px)] overflow-y-auto custom-scrollbar p-6 pb-24 flex flex-col gap-6 z-10 relative">
+          {/* Metro Header */}
+          <div className="flex flex-col select-none border-b-[3px] border-dashed border-ink-black pb-4">
+            <span className="text-[9px] font-arcade text-trash-gray font-bold uppercase tracking-wider">AlgoSpaced OS v1.0</span>
+            <h1 className="text-4xl font-extrabold font-headline-md text-ink-black uppercase tracking-tight mt-1">start</h1>
           </div>
-          <div className="overflow-hidden">
-            <div className="font-headline-md text-sm font-bold text-ink-black truncate">{username}</div>
-            <div className="flex items-center gap-1 text-red-500 mt-1 select-none font-bold">
-              <span className="material-symbols-outlined text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>
-                local_fire_department
-              </span>
-              <span className="font-arcade text-[7px]">{streak?.current_streak ?? 0} DAY STREAK</span>
+
+          {/* Tiles Grid */}
+          <div className="grid grid-cols-2 gap-4">
+            {/* Profile Tile (Wide - 2 cols) */}
+            <div className="col-span-2 bg-[#fdf8e1] border-[3px] border-ink-black p-4 flex items-center gap-4 gadget-shadow shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
+              <div className="w-12 h-12 border-[3px] border-ink-black overflow-hidden bg-primary-fixed-dim shadow-[2px_2px_0_0_#1E293B] shrink-0">
+                <img 
+                  className="w-full h-full object-cover" 
+                  src="https://lh3.googleusercontent.com/aida-public/AB6AXuBl1MnAmh_W_EWibibrGw1F1YSenuKlaIn3JymUnBKn1nPLjAaOBjoLzdT5krzVDmihFhXOk-DEtNTdM2Js1_Ttr--5WZohhyqD1QfpS6j_yU1_-4wweOmgWq2HLUYNMf0mzQDNLNu5KbACEJKL5sm1YaTLPePlO687X3VHYsUhWTpUQeBwFjushaBpyW8tEa2dJj5ZSRWq0qa5GhtE0zAAW741e2SIRtFOp7CvBYEEetymSiucK513lli1TUwgWIgXvlfxZoGbH00q"
+                />
+              </div>
+              <div className="overflow-hidden">
+                <div className="font-headline-md text-sm font-bold text-ink-black truncate">{username}</div>
+                <div className="flex items-center gap-1 text-red-500 mt-1 select-none font-bold">
+                  <span className="material-symbols-outlined text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>
+                    local_fire_department
+                  </span>
+                  <span className="font-arcade text-[7px]">{streak?.current_streak ?? 0} DAY STREAK</span>
+                </div>
+              </div>
             </div>
+
+            {/* Daily Queue Tile */}
+            <button 
+              onClick={() => toggleWindowMinimize('queue')}
+              className="bg-grass-green text-ink-black border-[3px] border-ink-black p-4 flex flex-col justify-between aspect-square gadget-shadow active:translate-y-1 active:translate-x-1 active:shadow-none select-none text-left cursor-pointer transition-all"
+            >
+              <span className="material-symbols-outlined text-3xl align-top" style={{ fontVariationSettings: "'FILL' 1" }}>
+                view_list
+              </span>
+              <span className="font-arcade text-[8px] font-bold tracking-tight uppercase leading-tight">
+                DAILY<br/>QUEUE
+              </span>
+            </button>
+
+            {/* Journey Path Tile */}
+            <button 
+              onClick={() => toggleWindowMinimize('journey')}
+              className="bg-[#0ea5e9] text-white border-[3px] border-ink-black p-4 flex flex-col justify-between aspect-square gadget-shadow active:translate-y-1 active:translate-x-1 active:shadow-none select-none text-left cursor-pointer transition-all"
+            >
+              <span className="material-symbols-outlined text-3xl align-top" style={{ fontVariationSettings: "'FILL' 1" }}>
+                route
+              </span>
+              <span className="font-arcade text-[8px] font-bold tracking-tight uppercase leading-tight">
+                JOURNEY<br/>PATH
+              </span>
+            </button>
+
+            {/* My Computer Tile */}
+            <button 
+              onClick={() => toggleWindowMinimize('computer')}
+              className="bg-paper-white text-ink-black border-[3px] border-ink-black p-4 flex flex-col justify-between aspect-square gadget-shadow active:translate-y-1 active:translate-x-1 active:shadow-none select-none text-left cursor-pointer transition-all"
+            >
+              <img 
+                alt="My Computer" 
+                className="w-10 h-10 object-cover border-2 border-ink-black bg-white" 
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2tUGA2d7QiNyajDAWYK183zhNTgtAZpOXK3E9wRvHGs-t6ykWt9uPScYe_fziWzQI0pREcY_ThI341WvGMusyYmnAkagfuwx6wubIs1ES68DO8CCNAlcHcb2zOUU4MJeYuhWDy1uYRqyGYjIaDUqfgNWk2vm4WzwRqoorn2dxtZ6QdJhEKbXjG8fG9chkkvr68qJf0fLUL6bIqBXZg2FJ30S7zS3oZ4IZsug-wLyRYuJ4Gu_86snNUo1whNrBdZm5OMREfc9sLbwJ"
+              />
+              <span className="font-arcade text-[8px] font-bold tracking-tight uppercase leading-tight">
+                MY COMP
+              </span>
+            </button>
+
+            {/* Terminal Tile */}
+            <button 
+              onClick={() => toggleWindowMinimize('terminal')}
+              className="bg-[#1e293b] text-[#39ff14] border-[3px] border-ink-black p-4 flex flex-col justify-between aspect-square gadget-shadow active:translate-y-1 active:translate-x-1 active:shadow-none select-none text-left cursor-pointer transition-all"
+            >
+              <img 
+                alt="Terminal" 
+                className="w-10 h-10 object-cover border-2 border-ink-black bg-white" 
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2AvcQ2oKWP8AJ8yR5nF82LLDEH1FKySUK-npnqEjvJ6Cs9xp8joCwH7x43oTCAC5xhO2rQdYzka3B6u72FNbdxMnsv3WJLye3bKochu8AnnRlS3szfYSaj724sYsiZo4n8G-oWqvl7C0rOGaDaU2nRH1xXmW2PBi6L2NryTsUaTCVZQKTKBBNNEOig5kh7B52e-iIuj2PTzaSjF9ebp6gMuCnBtJT8Sxo5Qsmvfm-t2U5r_qQpRiYj--Ut41T7NTh-tHgs4S4kBvz"
+              />
+              <span className="font-arcade text-[8px] text-[#39ff14] font-bold tracking-tight uppercase leading-tight">
+                TERMINAL
+              </span>
+            </button>
+
+            {/* Python Challenge Tile */}
+            <button 
+              onClick={() => toggleWindowMinimize('python')}
+              className="bg-[#9d4edd] text-white border-[3px] border-ink-black p-4 flex flex-col justify-between aspect-square gadget-shadow active:translate-y-1 active:translate-x-1 active:shadow-none select-none text-left cursor-pointer transition-all"
+            >
+              <span className="material-symbols-outlined text-3xl align-top" style={{ fontVariationSettings: "'FILL' 1" }}>
+                sports_esports
+              </span>
+              <span className="font-arcade text-[8px] font-bold tracking-tight uppercase leading-tight">
+                PYTHON<br/>PLAY
+              </span>
+            </button>
+
+            {/* MySQL Playground Tile */}
+            <button 
+              onClick={() => toggleWindowMinimize('mysql')}
+              className="bg-[#ffcc00] text-ink-black border-[3px] border-ink-black p-4 flex flex-col justify-between aspect-square gadget-shadow active:translate-y-1 active:translate-x-1 active:shadow-none select-none text-left cursor-pointer transition-all"
+            >
+              <span className="material-symbols-outlined text-3xl align-top" style={{ fontVariationSettings: "'FILL' 1" }}>
+                database
+              </span>
+              <span className="font-arcade text-[8px] font-bold tracking-tight uppercase leading-tight">
+                MYSQL<br/>PLAY
+              </span>
+            </button>
+
+            {/* Drive Sync Tile (Wide - 2 cols) */}
+            <button 
+              onClick={triggerSync}
+              className="col-span-2 bg-[#ffe24c] hover:bg-yellow-300 text-ink-black border-[3px] border-ink-black p-4 flex items-center justify-between gadget-shadow active:translate-y-1 active:translate-x-1 active:shadow-none select-none text-left cursor-pointer transition-all"
+            >
+              <div className="flex items-center gap-3">
+                <span className="material-symbols-outlined text-3xl" style={{ fontVariationSettings: "'FILL' 1" }}>
+                  cloud_sync
+                </span>
+                <span className="font-arcade text-[8px] font-bold tracking-tight uppercase">
+                  DRIVE NOTES SYNC
+                </span>
+              </div>
+              <span className="material-symbols-outlined text-lg">chevron_right</span>
+            </button>
           </div>
         </div>
-      </div>
+      )}
 
       {/* Floating Windows Shell Containers */}
       
@@ -488,6 +636,7 @@ export default function App() {
         setActiveWindow={setActiveWindow}
         defaultWidth="750px"
         defaultHeight="600px"
+        isMobile={isMobile}
       >
         <ReviewQueue 
           overrideProblemId={overrideProblemId} 
@@ -508,6 +657,7 @@ export default function App() {
         setActiveWindow={setActiveWindow}
         defaultWidth="700px"
         defaultHeight="560px"
+        isMobile={isMobile}
       >
         <JourneyPath 
           onSelectProblemForReview={handleSelectProblemForReview} 
@@ -528,6 +678,7 @@ export default function App() {
         defaultWidth="640px"
         defaultHeight="450px"
         titleBarColor="#1e293b"
+        isMobile={isMobile}
       >
         <TerminalEmulator 
           onOpenWindow={openWindow} 
@@ -549,6 +700,7 @@ export default function App() {
         defaultWidth="480px"
         defaultHeight="320px"
         titleBarColor="#855400"
+        isMobile={isMobile}
       >
         <div className="w-full h-full bg-[#fdf8e1] p-6 flex flex-col justify-between">
           <div className="space-y-4">
@@ -609,6 +761,7 @@ export default function App() {
         defaultWidth="640px"
         defaultHeight="480px"
         titleBarColor="#006686"
+        isMobile={isMobile}
       >
         <FileExplorer onSetWallpaper={setWallpaperUrl} activeWallpaperUrl={wallpaperUrl} />
       </WindowShell>
@@ -627,6 +780,7 @@ export default function App() {
         defaultWidth="620px"
         defaultHeight="580px"
         titleBarColor="#9d4edd"
+        isMobile={isMobile}
       >
         <PythonChallenge />
       </WindowShell>
@@ -645,6 +799,7 @@ export default function App() {
         defaultWidth="660px"
         defaultHeight="580px"
         titleBarColor="#0ea5e9"
+        isMobile={isMobile}
       >
         <MySQLPlayground />
       </WindowShell>
@@ -730,12 +885,12 @@ export default function App() {
               e.stopPropagation();
               setIsStartOpen(!isStartOpen);
             }}
-            className="h-full px-6 flex items-center gap-2 border-r-[4px] border-ink-black bg-[#39ff14] text-ink-black hover:bg-[#28e007] active:bg-[#1fb304] transition-colors shadow-[inset_-3px_-3px_0px_rgba(0,0,0,0.2),inset_3px_3px_0px_rgba(255,255,255,0.5)] font-bold cursor-pointer"
+            className={`h-full ${isMobile ? 'px-3' : 'px-6'} flex items-center gap-2 border-r-[4px] border-ink-black bg-[#39ff14] text-ink-black hover:bg-[#28e007] active:bg-[#1fb304] transition-colors shadow-[inset_-3px_-3px_0px_rgba(0,0,0,0.2),inset_3px_3px_0px_rgba(255,255,255,0.5)] font-bold cursor-pointer`}
           >
             <span className="material-symbols-outlined text-2xl font-bold" style={{ fontVariationSettings: "'FILL' 1" }}>
               sports_esports
             </span>
-            <span className="font-display-lg text-lg italic tracking-wide">Start</span>
+            <span className={`font-display-lg ${isMobile ? 'text-sm' : 'text-lg'} italic tracking-wide`}>Start</span>
           </button>
 
           {/* Windows tabs in taskbar */}
@@ -744,14 +899,14 @@ export default function App() {
           {windows.queue.isOpen && (
             <button 
               onClick={() => toggleWindowMinimize('queue')}
-              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+              className={`h-full ${isMobile ? 'px-2 text-[10px] gap-1' : 'px-4 text-xs gap-2'} border-r-[4px] border-ink-black font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
                 activeWindow === 'queue' && !windows.queue.isMinimized
                   ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
                   : 'bg-surface-variant text-trash-gray hover:bg-white/40'
               }`}
             >
               <span className="material-symbols-outlined text-sm font-bold">view_list</span>
-              <span>Daily Queue</span>
+              <span>{isMobile ? 'Queue' : 'Daily Queue'}</span>
             </button>
           )}
 
@@ -759,14 +914,14 @@ export default function App() {
           {windows.journey.isOpen && (
             <button 
               onClick={() => toggleWindowMinimize('journey')}
-              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+              className={`h-full ${isMobile ? 'px-2 text-[10px] gap-1' : 'px-4 text-xs gap-2'} border-r-[4px] border-ink-black font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
                 activeWindow === 'journey' && !windows.journey.isMinimized
                   ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
                   : 'bg-surface-variant text-trash-gray hover:bg-white/40'
               }`}
             >
               <span className="material-symbols-outlined text-sm font-bold">route</span>
-              <span>Journey Path</span>
+              <span>{isMobile ? 'Journey' : 'Journey Path'}</span>
             </button>
           )}
 
@@ -774,14 +929,14 @@ export default function App() {
           {windows.terminal.isOpen && (
             <button 
               onClick={() => toggleWindowMinimize('terminal')}
-              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+              className={`h-full ${isMobile ? 'px-2 text-[10px] gap-1' : 'px-4 text-xs gap-2'} border-r-[4px] border-ink-black font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
                 activeWindow === 'terminal' && !windows.terminal.isMinimized
                   ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
                   : 'bg-surface-variant text-trash-gray hover:bg-white/40'
               }`}
             >
               <span className="material-symbols-outlined text-sm font-bold">terminal</span>
-              <span>Terminal</span>
+              <span>{isMobile ? 'Terminal' : 'Terminal'}</span>
             </button>
           )}
 
@@ -789,14 +944,14 @@ export default function App() {
           {windows.sync.isOpen && (
             <button 
               onClick={() => toggleWindowMinimize('sync')}
-              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+              className={`h-full ${isMobile ? 'px-2 text-[10px] gap-1' : 'px-4 text-xs gap-2'} border-r-[4px] border-ink-black font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
                 activeWindow === 'sync' && !windows.sync.isMinimized
                   ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
                   : 'bg-surface-variant text-trash-gray hover:bg-white/40'
               }`}
             >
               <span className="material-symbols-outlined text-sm font-bold">cloud_sync</span>
-              <span>Drive Sync</span>
+              <span>{isMobile ? 'Sync' : 'Drive Sync'}</span>
             </button>
           )}
 
@@ -804,14 +959,14 @@ export default function App() {
           {windows.computer.isOpen && (
             <button 
               onClick={() => toggleWindowMinimize('computer')}
-              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+              className={`h-full ${isMobile ? 'px-2 text-[10px] gap-1' : 'px-4 text-xs gap-2'} border-r-[4px] border-ink-black font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
                 activeWindow === 'computer' && !windows.computer.isMinimized
                   ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
                   : 'bg-surface-variant text-trash-gray hover:bg-white/40'
               }`}
             >
               <span className="material-symbols-outlined text-sm font-bold">desktop_windows</span>
-              <span>My Computer</span>
+              <span>{isMobile ? 'Comp' : 'My Computer'}</span>
             </button>
           )}
 
@@ -819,14 +974,14 @@ export default function App() {
           {windows.python.isOpen && (
             <button 
               onClick={() => toggleWindowMinimize('python')}
-              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+              className={`h-full ${isMobile ? 'px-2 text-[10px] gap-1' : 'px-4 text-xs gap-2'} border-r-[4px] border-ink-black font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
                 activeWindow === 'python' && !windows.python.isMinimized
                   ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
                   : 'bg-surface-variant text-trash-gray hover:bg-white/40'
               }`}
             >
               <span className="material-symbols-outlined text-sm font-bold">sports_esports</span>
-              <span>Python Challenge</span>
+              <span>{isMobile ? 'Python' : 'Python Challenge'}</span>
             </button>
           )}
 
@@ -834,14 +989,14 @@ export default function App() {
           {windows.mysql.isOpen && (
             <button 
               onClick={() => toggleWindowMinimize('mysql')}
-              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+              className={`h-full ${isMobile ? 'px-2 text-[10px] gap-1' : 'px-4 text-xs gap-2'} border-r-[4px] border-ink-black font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
                 activeWindow === 'mysql' && !windows.mysql.isMinimized
                   ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
                   : 'bg-surface-variant text-trash-gray hover:bg-white/40'
               }`}
             >
               <span className="material-symbols-outlined text-sm font-bold">database</span>
-              <span>MySQL Playground</span>
+              <span>{isMobile ? 'SQL' : 'MySQL Playground'}</span>
             </button>
           )}
         </div>

algospaced-ui/src/components/WindowShell.tsx

@@ -16,6 +16,7 @@ interface WindowShellProps {
   defaultX?: number;
   defaultY?: number;
   titleBarColor?: string;
+  isMobile?: boolean;
 }
 
 export default function WindowShell({
@@ -34,6 +35,7 @@ export default function WindowShell({
   defaultX,
   defaultY,
   titleBarColor = '#0ea5e9',
+  isMobile = false,
 }: WindowShellProps) {
   // Helper to parse default dimensions (e.g. '700px') into integer values
   const parseDimension = (val: string): number => {
@@ -66,6 +68,7 @@ export default function WindowShell({
   }, [defaultX, defaultY]);
 
   const handleMouseDown = (e: React.MouseEvent) => {
+    if (isMobile) return;
     // Only drag on left click and not on control buttons or resize handles
     if (e.button !== 0) return;
     const target = e.target as HTMLElement;
@@ -81,6 +84,7 @@ export default function WindowShell({
   };
 
   const handleResizeMouseDown = (e: React.MouseEvent) => {
+    if (isMobile) return;
     if (e.button !== 0) return;
     e.stopPropagation();
     e.preventDefault();
@@ -129,7 +133,7 @@ export default function WindowShell({
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [isDragging, isResizing]);
+  }, [isDragging, isResizing, isMobile]);
 
   if (!isOpen || isMinimized) return null;
 
@@ -137,13 +141,19 @@ export default function WindowShell({
     <div
       ref={windowRef}
       onMouseDown={() => setActiveWindow(id)}
-      style={{
+      style={isMobile ? {
+        zIndex: isActive ? 40 : 30,
+      } : {
         width: `${dimensions.width}px`,
         height: `${dimensions.height}px`,
         transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
         zIndex: isActive ? 40 : 30,
       }}
-      className={`absolute top-1/2 left-1/2 max-w-[98vw] max-h-[90vh] bg-paper-white border-[4px] flex flex-col overflow-hidden window-shadow shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] transition-all ${
+      className={`absolute bg-paper-white border-[4px] flex flex-col overflow-hidden window-shadow transition-all ${
+        isMobile 
+          ? 'top-0 left-0 w-full h-[calc(100vh-56px)] max-w-none max-h-none border-t-0 border-x-0'
+          : 'top-1/2 left-1/2 max-w-[98vw] max-h-[90vh] border-ink-black'
+      } ${
         isActive ? 'border-ink-black shadow-[8px_8px_0px_0px_rgba(30,41,59,1)]' : 'border-ink-black opacity-95 shadow-[4px_4px_0px_0px_rgba(30,41,59,1)]'
       }`}
     >
@@ -162,15 +172,17 @@ export default function WindowShell({
           <span className="font-window-title text-sm md:text-base font-bold tracking-wide select-none">{title}</span>
         </div>
         <div className="flex gap-1.5">
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onMinimize();
-            }}
-            className="window-control-btn w-7 h-7 bg-white text-ink-black border-[3px] border-ink-black flex items-center justify-center hover:bg-yellow-300 active:translate-y-0.5 active:translate-x-0.5 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:shadow-none transition-all cursor-pointer"
-          >
-            <span className="material-symbols-outlined text-[14px] font-bold">minimize</span>
-          </button>
+          {!isMobile && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onMinimize();
+              }}
+              className="window-control-btn w-7 h-7 bg-white text-ink-black border-[3px] border-ink-black flex items-center justify-center hover:bg-yellow-300 active:translate-y-0.5 active:translate-x-0.5 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:shadow-none transition-all cursor-pointer"
+            >
+              <span className="material-symbols-outlined text-[14px] font-bold">minimize</span>
+            </button>
+          )}
           <button
             onClick={(e) => {
               e.stopPropagation();
@@ -189,15 +201,17 @@ export default function WindowShell({
       </div>
 
       {/* Resize Handle */}
-      <div
-        onMouseDown={handleResizeMouseDown}
-        className="window-resize-handle absolute bottom-0 right-0 w-4 h-4 cursor-se-resize flex items-end justify-end p-0.5 select-none z-[50]"
-      >
-        <svg width="10" height="10" viewBox="0 0 10 10" className="text-ink-black opacity-60">
-          <line x1="8" y1="2" x2="2" y2="8" stroke="currentColor" strokeWidth="1.5" />
-          <line x1="8" y1="5" x2="5" y2="8" stroke="currentColor" strokeWidth="1.5" />
-        </svg>
-      </div>
+      {!isMobile && (
+        <div
+          onMouseDown={handleResizeMouseDown}
+          className="window-resize-handle absolute bottom-0 right-0 w-4 h-4 cursor-se-resize flex items-end justify-end p-0.5 select-none z-[50]"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" className="text-ink-black opacity-60">
+            <line x1="8" y1="2" x2="2" y2="8" stroke="currentColor" strokeWidth="1.5" />
+            <line x1="8" y1="5" x2="5" y2="8" stroke="currentColor" strokeWidth="1.5" />
+          </svg>
+        </div>
+      )}
     </div>
   );
 }