Desktop Configuration: Wallpaper, Icons, and Virtual Desktops

import { useSettings } from '../context/SettingsContext';

const { wallpaper, setWallpaper } = useSettings();

// Set a custom wallpaper
setWallpaper('https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1974');

// Or any other URL
setWallpaper('https://example.com/my-wallpaper.jpg');

import { useDesktop } from '../context/DesktopContext';

const {
  desktopIcons,
  addDesktopIcon,
  updateDesktopIcon,
  removeDesktopIcon,
  sortDesktopIcons,
} = useDesktop();

interface DesktopIcon {
  id: string;
  title: string;
  icon: ReactNode;           // Fluent UI icon component
  type: 'file' | 'folder' | 'system';
  appId?: string;            // Links to a registered app in APPS constant
  appProps?: AppProps;       // Optional props passed to the app on launch
  x: number;                 // Absolute pixel X position
  y: number;                 // Absolute pixel Y position
}

import { useDesktop } from '../context/DesktopContext';

const { virtualDesktops, currentDesktopId, switchDesktop, addDesktop } = useDesktop();

// Switch to a specific desktop by ID
switchDesktop('desktop-2');

// Create a new empty virtual desktop
addDesktop(); // Appends 'desktop-N' and switches to it automatically

import { useWindowManager } from '../context/WindowManager';

const { snapWindow, maximizeWindow } = useWindowManager();

// Snap a window to the left half
snapWindow('my-app-id', 'left');

// Maximize — automatically saves the pre-maximize size to savedSize
maximizeWindow('my-app-id', { width: 800, height: 600, x: 100, y: 50 });

interface AppWindow {
  // ...
  snap?: 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
  /** Saved dimensions before maximize/snap, for precise restore */
  savedSize?: { width: number; height: number; x: number; y: number };
}

import { useUI } from '../context/UIContext';

const { isWidgetsOpen, toggleWidgets, closeWidgets } = useUI();

toggleWidgets(); // Opens or closes the panel

import { useSettings } from '../context/SettingsContext';

const {
  isWifiEnabled, setIsWifiEnabled,
  isBluetoothEnabled, setIsBluetoothEnabled,
  isNightLightEnabled, setIsNightLightEnabled,
  volume, setVolume,
  brightness, setBrightness,
} = useSettings();

// Toggle night light
setIsNightLightEnabled(!isNightLightEnabled);