MacOS Dock Implementation
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The MacOS Dock Implementation serves as the primary application launcher and task switcher within the portfolio's desktop environment. It provides a persistent, glass-morphic interface at the bottom of the screen where users can trigger the opening of various applications like "About Me", "Projects", and "Contact".
The Dock is tightly integrated with a centralized window management system, allowing it to reflect the current state of open applications through visual indicators. It utilizes a "Liquid Glass" design system to achieve a high-fidelity macOS aesthetic, including backdrop blurs and specific inner-highlight effects.
Sources: features/desktop/components/Dock.tsx, features/desktop/components/Desktop.tsx:18-28, app/globals.css:127-134
Architecture and Components
Component Structure
The Dock is a functional React component that maps over a centralized configuration of applications. Each application entry in the Dock consists of an icon button, a hover-activated tooltip (chip), and an active state indicator.
The Dock relies on the WindowManagerContext to execute actions and determine which applications are currently active in the workspace.
Sources: features/desktop/components/Dock.tsx:9-14, context/WindowManagerContext.tsx:34-45
Visual Styling (Liquid Glass)
The Dock uses a specific CSS utility class lg-panel to emulate the macOS Tahoe surface system. This involves a combination of transparency, high-intensity backdrop blur, and specific shadow values.
| Layer Property | Value / Description |
|---|---|
| Background | rgb(255 255 255 / 0.28) |
| Backdrop Blur | 34px |
| Saturation | 190% |
| Border | 1px solid rgb(255 255 255 / 0.4) |
| Inner Highlight | inset 0 1px 0 0 rgb(255 255 255 / 0.6) |
Sources: app/globals.css:136-144
Interaction Logic
Application Launching
When a user clicks a Dock icon, the open function from the useWindowManager hook is invoked. This function requires the application ID and its defaultGeometry (initial position and size).
Active Indicators and Tooltips
The Dock provides immediate feedback through two primary mechanisms:
- Tooltips: A
.lg-chipspan appears above the icon on hover, displaying the localized application name retrieved vianext-intl. - Status Dots: A small dot appears below the icon if the application is currently open in the
WindowManager. This is determined by theisOpen(app.id)check.
<span
className={`mt-1 size-1 rounded-full bg-slate-700/80 transition-opacity ${
isOpen(app.id) ? "opacity-100" : "opacity-0"
}`}
/>
Sources: features/desktop/components/Dock.tsx:21-25, features/desktop/components/Dock.tsx:36-40
Data Structures and Configuration
App Configuration
The Dock is populated using the apps array defined in the application configuration. This ensures that the Dock, Desktop Icons, and Window Manager all reference a single source of truth for application metadata.
| Field | Type | Description |
|---|---|---|
id | AppId | Unique identifier (e.g., 'about', 'projects') |
titleKey | AppId | Key for internationalization in en.json/fa.json |
icon | LucideIcon | The Lucide-React component for the icon |
tile | string | Tailwind gradient classes for the icon background |
defaultGeometry | Geometry | Initial x, y, width, and height for the window |
Sources: lib/apps.config.tsx:5-14, messages/en.json:2-6
Summary
The MacOS Dock Implementation provides a highly interactive and visually polished navigation system for the portfolio. By leveraging the WindowManagerContext, it maintains a real-time sync with the desktop state, while the "Liquid Glass" CSS system ensures a modern macOS aesthetic. Its modular design allows for easy addition of new applications by simply updating the centralized apps.config.tsx.