Compact Mode UI
Relevant source files
The following files were used as context for generating this wiki page:
The Compact Mode UI is a specialized theme and interface configuration within the Messenger Unleashed application designed to minimize the visual footprint of the chat interface. It allows users to maintain a streamlined workspace by reducing padding, resizing elements, and stripping away non-essential UI components.
This feature is part of the broader theme and customization engine, which leverages Electron's CSS injection capabilities to modify the appearance of the underlying Facebook Messenger web application. Compact Mode is particularly useful when the application is used in smaller window sizes or when utilized alongside other productivity tools.
Sources: CLAUDE.md:12-16, src/main/themes.ts:25
Architecture and Implementation
Compact Mode is implemented as a specific theme ID (compact) within the application's theme management system. Unlike general feature toggles, it is treated as a CSS-based theme variant that is injected into the renderer process at runtime.
Theme Management Flow
The themes.ts module handles the extraction and application of the Compact Mode styles. When a user selects Compact Mode from the menu or settings, the system searches the themes.css file for a specific block delimited by comments.
The application uses the insertCSS method with a specific cssKey: 'theme' to allow for hot-swapping themes without requiring a full page reload.
Sources: src/main/themes.ts:33-51, src/main/index.ts:741-750, CLAUDE.md:52-56
Key Components
The Compact Mode system interacts with several core application components:
| Component | Responsibility |
|---|---|
src/main/themes.ts | Logic for reading and applying theme CSS from the file system. |
themes.css | Contains the raw CSS definitions for the compact theme block. |
src/main/index.ts | Handles the menu selection and triggers the theme application. |
electron-store | Persists the user's selection of Compact Mode across sessions. |
Settings Modal | Provides a UI toggle for users to select the theme. |
Sources: src/main/themes.ts:7-27, src/main/index.ts:983-1000, src/preload/settings-modal.ts:241-263
Integration with Settings
Users can enable Compact Mode through the application's main menu or the specialized settings modal. The settings modal provides a "Theme" action row that allows users to pick from available themes, including Compact Mode.
Selection Sequence
The following diagram illustrates how the settings UI triggers a theme change:
Technical Specifications
The system identifies Compact Mode via a unique identifier and manages it through the standard theme registry.
Theme Definition
Compact Mode is registered alongside other visual styles like OLED Dark and Nord.
// src/main/themes.ts
export const THEME_OPTIONS = [
// ... other themes
{ id: "compact", label: "Compact Mode" },
];
Sources: src/main/themes.ts:7-27
Persistence and State
The current theme state, including whether Compact Mode is active, is stored in the electron-store configuration. This ensures that the UI remains in Compact Mode even after the application is restarted.
| Property | Type | Default | Description |
|---|---|---|---|
theme | string | default | The ID of the currently active theme (e.g., 'compact'). |
Sources: src/main/index.ts:744, CLAUDE.md:20-23
Visual and Promotional Representation
In the project's landing page, Compact Mode is highlighted as a productivity feature. It is categorized under "Customization" features alongside other UI modifications like "Glass" and "Modern" modes.
- Marketing Focus: Reduced visual clutter and desktop-first experience.
- Accessibility: Accessible via the "Appearance" section of the settings.
Sources: landing-page/src/app/HomeClient.tsx:325-333, landing-page/src/app/page.module.css:480-495
Summary
Compact Mode UI in Messenger Unleashed is a CSS-injected theme designed for spatial efficiency. It is managed by a centralized theme engine that parses themes.css and applies modifications to the Electron BrowserWindow without reloads. The feature is deeply integrated into the application's menu system, settings modal, and persistence layer, allowing for a seamless transition between standard and condensed views.