Skip to main content

​
Architecture

The Web XP desktop environment is built with React and uses a reducer-based state management pattern. The main WinXP component orchestrates all desktop interactions including windows, icons, taskbar, and power states.

​
Component Hierarchy

WinXP (Main Container)
├── Icons (Desktop icons with selection)
├── DashedBox (Rubber band selection)
├── Windows (Window manager)
├── Footer (Taskbar)
└── Modal (Power dialog)

​
Core State Structure

The desktop state is managed through a reducer with the following shape: 
export const initState = {
  apps: defaultAppState,           // Array of open windows
  nextAppID: defaultAppState.length,
  nextZIndex: defaultAppState.length,
  focusing: FOCUSING.WINDOW,       // Current focus context
  icons: defaultIconState,         // Desktop icon state
  selecting: null,                 // Rubber band selection
  powerState: POWER_STATE.START,   // Power state
};
Source: src/WinXP/reducer.js:18-26

​
Focus Management

The desktop supports three focus contexts: 
export const FOCUSING = {
  WINDOW: 'WINDOW',    // A window has focus
  ICON: 'ICON',        // An icon is selected
  DESKTOP: 'DESKTOP',  // Desktop background focused
};
Source: src/WinXP/index.jsx:68-74

​
State Management

​
Reducer Actions

All state changes go through centralized reducer actions: 
// Window Management
ADD_APP              // Launch new application
DEL_APP              // Close application
FOCUS_APP            // Bring window to front
MINIMIZE_APP         // Minimize to taskbar
TOGGLE_MAXIMIZE_APP  // Toggle maximize state

// Icon Selection
FOCUS_ICON           // Single icon focus
SELECT_ICONS         // Multiple icon selection
FOCUS_DESKTOP        // Clear all selections

// Rubber Band Selection
START_SELECT         // Begin drag selection
END_SELECT           // Complete selection

// Power Management
POWER_OFF            // Initiate shutdown/logoff
CANCEL_POWER_OFF     // Cancel power action
Source: src/WinXP/constants/actions.js

​
Z-Index Management

Windows use a sequential z-index system for stacking order: 
case FOCUS_APP: {
  const apps = state.apps.map(app =>
    app.id === action.payload
      ? { ...app, zIndex: state.nextZIndex, minimized: false }
      : app,
  );
  return {
    ...state,
    apps,
    nextZIndex: state.nextZIndex + 1,
    focusing: FOCUSING.WINDOW,
  };
}
Source: src/WinXP/reducer.js:78-89
Each time a window is focused, it receives the next sequential z-index value, ensuring proper stacking order.

​
Event Handling

The main container handles mouse events to manage focus: 
<Container
  ref={ref}
  onMouseUp={onMouseUpDesktop}
  onMouseDown={onMouseDownDesktop}
  state={state.powerState}
>

​
Desktop Click Handler

function onMouseDownDesktop(e) {
  if (e.target === e.currentTarget) {
    dispatch({ type: FOCUS_DESKTOP });
    dispatch({
      type: START_SELECT,
      payload: { x: mouse.docX, y: mouse.docY },
    });
  }
}
Source: src/WinXP/index.jsx:192-200

​
Power States

The desktop supports three power states: 
export const POWER_STATE = {
  START: 'START',        // Normal operation
  LOG_OFF: 'LOG_OFF',    // Log off dialog
  TURN_OFF: 'TURN_OFF',  // Shutdown dialog
};
When entering a power-off state, a visual animation is applied: 
const powerOffAnimation = keyframes`
  0% { filter: brightness(1) grayscale(0); }
  30% { filter: brightness(1) grayscale(0); }
  100% { filter: brightness(0.6) grayscale(1); }
`;
Source: src/WinXP/index.jsx:291-296

​
Application Configuration

Applications are configured with settings for window behavior: 
export const appSettings = {
  'Internet Explorer': {
    name: 'Internet Explorer',
    header: { icon: iePaper, title: 'InternetExplorer' },
    component: InternetExplorer,
    defaultSize: { width: 700, height: 500 },
    defaultOffset: getCenter(700, 500),
    resizable: true,
    minimized: false,
    maximized: shouldMaximize(700, 500, true),
    multiInstance: true,  // Allow multiple windows
  },
  // ... more apps
};
Source: src/WinXP/apps/index.jsx:234-245

​
Component Props

​
WinXP Component

interface WinXPProps {
  onLogoff?: () => void;      // Callback for log off
  onShutdown?: () => void;    // Callback for shutdown
  onRestart?: () => void;     // Callback for restart
  onSwitchUser?: () => void;  // Callback for switch user
}
Source: src/WinXP/index.jsx:54

​
Mobile Detection

The desktop detects mobile devices and shows a warning: 
const isMobile = () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  return (
    /android/i.test(userAgent) ||
    (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream)
  );
};

useEffect(() => {
  if (isMobile()) {
    dispatch({
      type: ADD_APP,
      payload: {
        ...appSettings.Error,
        injectProps: {
          message: 'Mobile Device Detected:\n\nThis application is designed for desktop use...',
          title: 'Compatibility Warning',
        },
        multiInstance: true,
      },
    });
  }
}, []);
Source: src/WinXP/index.jsx:46-93
The desktop environment is optimized for desktop browsers and may not function correctly on mobile devices.

​
Next Steps

Boot Sequence

Learn about the boot, login, and welcome screens

Windows

Understand window management and interactions

Icons

Explore desktop icon system and selection

Taskbar

Discover taskbar, start menu, and system tray

Build docs developers (and LLMs) love

Get started for freeTalk to us