From 42bc84b2782952432224728891aa3490bf4b74b1 Mon Sep 17 00:00:00 2001
From: M1ngdaXie <156019134+M1ngdaXie@users.noreply.github.com>
Date: Thu, 26 Mar 2026 14:29:35 -0700
Subject: [PATCH] feat: add desktop component wiring menubar, dock, icons,
 windows

---
 src/components/Desktop/Desktop.css | 21 +++++++++
 src/components/Desktop/Desktop.tsx | 73 +++++++++++++++++++++++++++++-
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Desktop/Desktop.css

diff --git a/src/components/Desktop/Desktop.css b/src/components/Desktop/Desktop.css
new file mode 100644
index 0000000..6876378
--- /dev/null
+++ b/src/components/Desktop/Desktop.css
@@ -0,0 +1,21 @@
+.desktop {
+  position: fixed;
+  inset: 0;
+  background-size: cover;
+  overflow: hidden;
+}
+
+.desktop-icons {
+  position: absolute;
+  top: calc(var(--menubar-height) + 16px);
+  right: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 80px);
+  gap: 8px;
+}
+
+.desktop-icon-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/Desktop/Desktop.tsx b/src/components/Desktop/Desktop.tsx
index a915dc7..1bbede8 100644
--- a/src/components/Desktop/Desktop.tsx
+++ b/src/components/Desktop/Desktop.tsx
@@ -1 +1,72 @@
-export default function Desktop() { return <div>Desktop</div>; }
+import { useState, useCallback } from 'react';
+import MenuBar from '../MenuBar/MenuBar';
+import Dock from '../Dock/Dock';
+import DesktopIcon from '../DesktopIcon/DesktopIcon';
+import Window from '../Window/Window';
+import ContextMenu from '../ContextMenu/ContextMenu';
+import { useOS } from '../../context/WindowContext';
+import { APPS, WALLPAPERS } from '../../config/apps';
+import './Desktop.css';
+
+interface CtxMenu { x: number; y: number }
+
+export default function Desktop() {
+  const { state, openWindow, setWallpaper } = useOS();
+  const [ctxMenu, setCtxMenu] = useState<CtxMenu | null>(null);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setCtxMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const handleChangeWallpaper = useCallback(() => {
+    const next = (state.wallpaper + 1) % WALLPAPERS.length;
+    setWallpaper(next);
+  }, [state.wallpaper, setWallpaper]);
+
+  const handleAboutThisMac = useCallback(() => {
+    openWindow('about');
+  }, [openWindow]);
+
+  return (
+    <div
+      className="desktop"
+      style={{ background: WALLPAPERS[state.wallpaper] }}
+      onContextMenu={handleContextMenu}
+      onClick={() => setCtxMenu(null)}
+    >
+      <MenuBar />
+
+      <div className="desktop-icons">
+        {APPS.map(app => (
+          <div
+            key={app.id}
+            className="desktop-icon-cell"
+            style={{
+              gridColumn: app.desktopPosition.col + 1,
+              gridRow: app.desktopPosition.row + 1,
+            }}
+          >
+            <DesktopIcon app={app} onOpen={() => openWindow(app.id)} />
+          </div>
+        ))}
+      </div>
+
+      {APPS.map(app => (
+        <Window key={app.id} app={app} />
+      ))}
+
+      <Dock />
+
+      {ctxMenu && (
+        <ContextMenu
+          x={ctxMenu.x}
+          y={ctxMenu.y}
+          onClose={() => setCtxMenu(null)}
+          onChangeWallpaper={handleChangeWallpaper}
+          onAboutThisMac={handleAboutThisMac}
+        />
+      )}
+    </div>
+  );
+}