feat: add desktop icon and context menu components

src/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,33 @@
+.context-menu {
+  position: fixed;
+  background: rgba(40, 40, 52, 0.82);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--glass-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+  padding: 4px;
+  min-width: 200px;
+  z-index: 9000;
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 5px;
+  font-size: 13px;
+  color: rgba(255,255,255,0.9);
+  cursor: default;
+}
+
+.context-menu-item:hover {
+  background: var(--accent-blue);
+}
+
+.context-menu-separator {
+  height: 1px;
+  background: var(--glass-border);
+  margin: 3px 6px;
+}

src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react';
+import './ContextMenu.css';
+
+interface Props {
+  x: number;
+  y: number;
+  onClose: () => void;
+  onChangeWallpaper: () => void;
+  onAboutThisMac: () => void;
+}
+
+export default function ContextMenu({ x, y, onClose, onChangeWallpaper, onAboutThisMac }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [onClose]);
+
+  return (
+    <div ref={ref} className="context-menu" style={{ left: x, top: y }}>
+      <div className="context-menu-item" onClick={onClose}>
+        <span>📁</span> New Folder
+      </div>
+      <div className="context-menu-separator" />
+      <div className="context-menu-item" onClick={() => { onChangeWallpaper(); onClose(); }}>
+        <span>🖼️</span> Change Wallpaper
+      </div>
+      <div className="context-menu-separator" />
+      <div className="context-menu-item" onClick={() => { onAboutThisMac(); onClose(); }}>
+        <span>🍎</span> About This Mac
+      </div>
+    </div>
+  );
+}

src/components/DesktopIcon/DesktopIcon.css

@@ -0,0 +1,37 @@
+.desktop-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  cursor: default;
+  width: 72px;
+  padding: 6px;
+  border-radius: 8px;
+  transition: background 0.1s;
+}
+
+.desktop-icon:hover {
+  background: rgba(255,255,255,0.08);
+}
+
+.desktop-icon-img {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-icon);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+}
+
+.desktop-icon-label {
+  font-size: 11px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
+  max-width: 72px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/components/DesktopIcon/DesktopIcon.tsx

@@ -0,0 +1,18 @@
+import './DesktopIcon.css';
+import type { AppConfig } from '../../types';
+
+interface Props {
+  app: AppConfig;
+  onOpen: () => void;
+}
+
+export default function DesktopIcon({ app, onOpen }: Props) {
+  return (
+    <div className="desktop-icon" onDoubleClick={onOpen}>
+      <div className="desktop-icon-img" style={{ background: app.iconGradient }}>
+        <span>{app.emoji}</span>
+      </div>
+      <span className="desktop-icon-label">{app.title}</span>
+    </div>
+  );
+}