Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-os/llms.txt

Use this file to discover all available pages before exploring further.

Taskbar is the persistent control strip at the bottom of the DevOS screen. In addition to serving as a visual anchor point for the interface, it provides three functional areas: a Start-menu popover for navigation and system actions, a scrollable row of buttons representing every open window, and a live clock. All three areas are always visible regardless of what windows are open.

​
Layout

The Taskbar is a fixed-position bar that sits at the bottom of the viewport with a high stacking context to ensure it always appears above open windows: 
position: fixed (absolute in source, bottom-0 left-0 right-0)
height: 48px  (h-12)
z-index: 50   (z-50)
background: bg-gradient-to-r from-os-teal to-os-teal/90
border-top: border-t-2 border-os-cyan/30
The three sections are laid out as a flex row: the Start button on the left, the window buttons taking all remaining space in the centre (flex-1), and the system tray on the right.
The Taskbar is rendered at z-50. Open window zIndex values begin at 10 and grow from there via WindowManager, so the taskbar will always appear above all windows regardless of how many are open or how many times they have been focused.

​
Start menu button

The leftmost element is the DevOS button, rendered with a Terminal icon and bold white label: 
<button onClick={() => setMenuOpen(!menuOpen)}>
  <TerminalIcon size={18} className="text-os-cyan" />
  <span>DevOS</span>
</button>
Clicking toggles the menuOpen boolean in local state. When true, a Framer Motion popover renders above the button: 
// Framer Motion animated popover
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
The popover is wrapped in AnimatePresence so it animates in and out smoothly. Its contents are:
  1. User card — teal header with a circular “D” avatar, “Developer” username, and “Admin / Creator” role label
  2. About this developer — a User icon menu item (calls setMenuOpen(false) — extend to open the About window)
  3. System Preferences — a Settings icon menu item (same pattern — extend to open a preferences window)
  4. Shut down — a Power icon item in red; labelled “Shut down (just kidding)” — clicking simply closes the menu

​
Window buttons

The centre section maps over windows from useWindowManager() and renders one button per open window: 
{windows.map((win) => (
  <button
    key={win.id}
    onClick={() => handleWindowClick(win.id, win.isMinimized)}
    className={`flex items-center gap-2 px-3 py-1.5 rounded max-w-[160px] truncate transition-all border
      ${focusedWindowId === win.id && !win.isMinimized
        ? 'bg-white/20 border-white/40 text-white shadow-inner'
        : 'bg-black/10 border-transparent text-white/80 hover:bg-white/10'
      }`}
  >
    <win.icon size={14} className={focusedWindowId === win.id && !win.isMinimized ? 'text-os-cyan' : ''} />
    <span className="text-sm truncate">{win.title}</span>
  </button>
))}
Active window buttons (focused and not minimised) receive bg-white/20 border-white/40 shadow-inner for a pressed appearance; their icon picks up text-os-cyan. All other buttons use a subtle bg-black/10 style.

​
Click logic

The handleWindowClick function encodes the three-state click behaviour: 
const handleWindowClick = (id, isMinimized) => {
  if (isMinimized) {
    focusWindow(id);         // bring a minimised window back to the front
  } else if (focusedWindowId === id) {
    minimizeWindow(id);      // clicking the active window minimises it
  } else {
    focusWindow(id);         // clicking an unfocused window focuses it
  }
};
This mirrors the behaviour of a classic OS taskbar: a single click on the active window’s button acts as a toggle to hide it. Note that the Taskbar consumes only focusWindow and minimizeWindow from useWindowManager — it does not call openWindow directly. The button row sits inside a flex-1 overflow-x-auto no-scrollbar div, so if many windows are open the buttons scroll horizontally without a visible scrollbar.

​
Clock

The system tray on the right contains an info icon and a digital clock: 
// Clock state and effect
const [time, setTime] = useState(new Date());

useEffect(() => {
  const interval = setInterval(() => setTime(new Date()), 1000);
  return () => clearInterval(interval);
}, []);

// Rendered output
{time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
The clock displays hours and minutes in the locale’s preferred 12 h or 24 h format. The setInterval is cleaned up on unmount via the useEffect return function.

​
Info icon

An Info Lucide icon sits to the left of the clock. It carries a native title attribute tooltip: 
<InfoIcon size={14} className="cursor-help" title="DevOS v1.0.0" />
Hovering over it shows the version string DevOS v1.0.0 in the browser’s default tooltip.

Build docs developers (and LLMs) love

Get started for freeTalk to us