- Merged KeyboardLayout in KeyboardLayoutService - Renamed TablerIcons -> IconsTabler
15 KiB
Noctalia Shell
A beautiful, minimal desktop shell for Wayland that actually gets out of your way.
Noctalia is a desktop shell built on Quickshell (Qt/QML framework) with a warm lavender aesthetic. It provides a complete desktop environment experience with panels, dock, notifications, lock screen, and extensive customization options.
AI Guidance
- After receiving tool results, carefully reflect on their quality and determine optimal next steps before proceeding. Use your thinking to plan and iterate based on this new information, and then take the best next action.
- For maximum efficiency, whenever you need to perform multiple independent operations, invoke all relevant tools simultaneously rather than sequentially.
- Before you finish, please verify your solution
- Do what has been asked; nothing more, nothing less.
- NEVER create files unless they're absolutely necessary for achieving your goal.
- ALWAYS prefer editing an existing file to creating a new one.
- NEVER proactively create documentation files (*.md) or README files. Only create documentation files if explicitly requested by the User.
Project Overview
- Primary Language: QML (Qt Quick)
- Framework: Quickshell (Wayland-native shell framework)
- Supported Compositors: Niri, Hyprland, Sway (with support for other Wayland compositors)
- License: MIT
- Design Philosophy: "quiet by design" - minimal, non-intrusive UI
Architecture
Core Entry Point
- shell.qml - Main shell root that orchestrates all components
- Initializes services in a specific order
- Manages screen-specific instances of bars and panels
- Uses lazy loading with QML Loaders for memory optimization
- Implements MainScreen for each screen to manage bar + panels
Directory Structure
/Modules/ - UI Components
Core visual modules and panels:
- Bar/ - Top/bottom bar with multiple widgets
- Bar.qml - Main bar component
- Widgets/ - Bar widget components
- Extras/ - Additional bar functionality
- Panels/ - Overlay panels (13 panel types)
- Audio/ - Audio device panel
- Battery/ - Battery status panel
- Bluetooth/ - Bluetooth device panel
- Calendar/ - Calendar panel
- ControlCenter/ - Quick settings panel
- Launcher/ - Application launcher/search
- NotificationHistory/ - Notification history panel
- SessionMenu/ - Power menu (logout, shutdown, etc.)
- Settings/ - Shell configuration UI
- SetupWizard/ - First-run setup experience
- Tray/ - System tray panel
- Wallpaper/ - Wallpaper management panel
- WiFi/ - WiFi network panel
- Background/ - Background/wallpaper rendering
- Dock/ - Application dock/launcher
- LockScreen/ - Screen locking functionality
- MainScreen/ - Main screen window management
- Notification/ - Notification system
- OSD/ - On-screen display for volume, brightness, etc.
- Toast/ - Toast notifications
- Tooltip/ - Tooltip system
/Services/ - Business Logic
Core services that power the shell (40+ services):
System Integration:
CompositorService.qml- Compositor-agnostic APIHyprlandService.qml- Hyprland-specific integrationNiriService.qml- Niri-specific integrationSwayService.qml- Sway-specific integrationIPCService.qml- Inter-process communication
Hardware & System:
AudioService.qml- Audio control and monitoringBatteryService.qml- Battery status and managementBluetoothService.qml- Bluetooth device managementBrightnessService.qml- Screen brightness controlNetworkService.qml- Network connection managementPowerProfileService.qml- Power profile managementSystemStatService.qml- System resource monitoring
UI & Theming:
AppThemeService.qml- Main theming facade/orchestratorColorPaletteGenerator.qml- Material Design 3 palette generationTemplateRegistry.qml- Template configurations (apps, terminals, Discord)TemplateProcessor.qml- Matugen CLI + sed script executionColorSchemeService.qml- Color scheme managementDarkModeService.qml- Dark/light mode switchingFontService.qml- Font managementWallpaperService.qml- Wallpaper handling (with Matugen integration)NightLightService.qml- Blue light filter
Features:
NotificationService.qml- Notification daemonMediaService.qml- Media player control (MPRIS)CalendarService.qml- Calendar integrationClipboardService.qml- Clipboard managementLocationService.qml- Geolocation for weather, etc.ScreenRecorderService.qml- Screen recording functionalityIdleInhibitorService.qml- Prevent screen idle/sleepKeyboardLayoutService.qml- Keyboard layout switchingLockKeysService.qml- Caps/Num lock status
Infrastructure:
BarService.qml- Bar visibility and state managementBarWidgetRegistry.qml- Registry for bar widgetsControlCenterWidgetRegistry.qml- Registry for control center widgetsPanelService.qml- Panel state managementToastService.qml- Toast notification serviceTooltipService.qml- Tooltip serviceHooksService.qml- Custom hook executionProgramCheckerService.qml- Check for installed programsDistroService.qml- Linux distribution detectionGitHubService.qml- GitHub API integrationUpdateService.qml- Update checkingCavaService.qml- Audio visualization (Cava integration)
/Commons/ - Shared Utilities
Common components used throughout the shell:
Settings.qml- Centralized settings managementI18n.qml- Internationalization/translationsColor.qml- Color utilities and helpersIcons.qml- Icon managementIconsTabler.qml- Tabler icon set (207KB icon definitions)ThemeIcons.qml- Theme-specific iconsLogger.qml- Logging utilityStyle.qml- Shared styling definitionsTime.qml- Time utilities
/Widgets/ - Reusable UI Components
40+ custom QML widgets with the "N" prefix (Noctalia):
- Layout: NBox, NPanel, NScrollView, NListView, NDivider
- Input: NButton, NIconButton, NIconButtonHot, NTextInput, NSlider, NSpinBox, NToggle, NCheckbox, NRadioButton, NComboBox, NSearchableComboBox
- Display: NLabel, NText, NIcon, NHeader, NImageCached, NImageCircled, NImageRounded
- Dialogs: NColorPickerDialog, NFilePicker
- Special: NContextMenu, NColorPicker, NIconPicker, NCircleStat, NCollapsible, NSectionEditor, NReorderCheckboxes, NDateTimeTokens, NBusyIndicator
- System: MainScreen, BarExclusionZone
/Helpers/ - JavaScript Utilities
Helper JavaScript modules:
AdvancedMath.js- Advanced mathematical functionsColorsConvert.js- Color conversion utilitiesFuzzySort.js- Fuzzy search implementationQtObj2JS.js- Qt object to JavaScript conversionsha256.js- SHA-256 hashingDebug.js- Debug utilities
/Assets/ - Resources
- Screenshots, icons, logos, themes
- Default wallpapers
- Theme resources
/Shaders/ - Graphics Shaders
Custom shader effects for visual polish
/Bin/ - Executable Scripts
Helper scripts and utilities
Key Features
1. Multi-Monitor Support
- Per-monitor bar configuration (TODO)
- Screen-specific panel instances
- Exclusion zones for proper compositor integration
2. Theming System
- Material You color generation (Matugen integration)
- Dark/light mode support
- Customizable color schemes
- Font customization
- Per-app theming capabilities
3. Compositor Integration
- Native support for Niri, Hyprland, Sway
- Compositor-agnostic service layer
- Workspace management
- Window control
4. Panel System
Advanced panel management via MainScreen (13 panel types):
- Audio panel
- Battery panel
- Bluetooth panel
- Calendar panel
- Control Center panel
- Launcher panel
- Notification history panel
- Session menu panel
- Settings panel
- Setup wizard panel
- Tray panel
- Wallpaper panel
- WiFi panel
All panels use z-index layering and component-based loading.
5. Customization
- Setup wizard for first-time users
- Extensive settings interface
- Widget registry system for adding custom widgets
- Hook system for custom scripts
- Reorderable UI elements
6. Audio Features
- Multiple visualization types (Mirrored, Wave, Linear spectrum)
- MPRIS media player integration
- Audio device switching
- Volume OSD
7. Notifications
- Custom notification daemon
- Notification history
- Do Not Disturb mode
- Per-app notification settings
Development Setup
# Run the shell (requires Quickshell to be installed)
qs -p .
# Run with verbose output for debugging
env NOCTALIA_DEBUG=1 qs -v -p .
# Code formatting and linting
qmlfmt -e -b 360 -t 2 -i 2 -w /path/to/file.qml # Format a QML file (requires qmlfmt, do not use qmlformat)
qmllint **/*.qml # Lint all QML files for syntax errors
Nix/NixOS (Recommended)
# Enter development shell
nix develop
# Or use the legacy shell
nix-shell
The dev shell includes:
- Quickshell with required features
- Development utilities
- Required environment variables
Package Structure
- Nix flake with NixOS and Home Manager modules
- Quickshell dependency (with X11 disabled, i3 enabled, hyprland enabled)
- App2unit integration for .desktop file management
Configuration
Settings are managed through Commons/Settings.qml:
- Persistent configuration storage
- Settings versioning
- Migration handling
- Type-safe settings access
Service Initialization Order
From shell.qml:150-164:
- WallpaperService
- AppThemeService
- ColorSchemeService
- BarWidgetRegistry
- LocationService
- NightLightService
- DarkModeService
- FontService
- HooksService
- BluetoothService
- BatteryService
- IdleInhibitorService
- PowerProfileService
- DistroService
This order is critical - services depend on previously initialized services.
Component Lifecycle
-
Shell Root Initialization
- Wait for I18n to load translations
- Wait for Settings to load configuration
-
Service Initialization
- Services initialize in dependency order
- Each service may depend on Settings, I18n, or other services
-
Screen Components
- MainScreen created per screen
- Bar and panel components loaded lazily
- Exclusion zones created after window loads
-
Background Components
- Background/wallpaper
- Overview (workspace overview)
- Screen corners
- Dock
- Notifications
- Lock screen
- Toast overlay
- OSD
Special Patterns
Lazy Loading
Components use QML Loaders extensively:
activeproperty controls when components loadasynchronousfor non-blocking loads- Memory optimization for unused screens/panels
Panel Management
MainScreen pattern:
- Single fullscreen window per screen
- Manages bar + all overlay panels
- Z-index based layering (panels at z-index 50)
- Component-based architecture for panels
Registry Pattern
BarWidgetRegistry and ControlCenterWidgetRegistry:
- Centralized widget registration
- Dynamic widget loading
- Easy extension point for custom widgets
Singleton Pattern (Quickshell)
Services in Quickshell use the pragma Singleton directive:
- Add
pragma Singletonat the top of the QML file (before imports) - No qmldir needed - Quickshell handles singleton resolution automatically
- Import with standard path:
import qs.Servicesorimport qs.Services.Theming - Access via singleton name:
AppThemeService.generate()
Example:
pragma Singleton
import QtQuick
import qs.Commons
Singleton {
id: root
function doSomething() {
// singleton logic
}
}
Theming Architecture
The theming system was refactored (Jan 2025) into 4 focused services in Services/:
AppThemeService.qml (~60 lines) - Main facade
- Public API:
init(),generate(),generateFromWallpaper(),generateFromPredefinedScheme() - Orchestrates theme generation based on wallpaper vs predefined schemes
- Maintains backward compatibility with existing code
ColorPaletteGenerator.qml (~100 lines) - Pure color logic
- Single function:
generatePalette(colors, isDarkMode, isStrict) - Generates complete Material Design 3 palette from base colors
- No dependencies on other services (pure computation)
TemplateRegistry.qml (~230 lines) - Configuration source of truth
- Defines all application templates (
applicationsarray) - Defines terminal templates (
terminalsarray) - Consolidated Discord clients (7 variants in single config)
- Provides
discordClientsarray for ProgramCheckerService - User template TOML generation
TemplateProcessor.qml (~370 lines) - Template execution
- Dual-path architecture:
- Wallpaper colors: Uses matugen CLI for color extraction + template processing
- Predefined schemes: Uses sed scripts to apply colors to templates
- Handles terminal themes (copies pre-rendered files for predefined schemes)
- User template support (matugen json/image subcommands)
Adding new application templates:
- Add entry to
TemplateRegistry.applicationsarray inServices/TemplateRegistry.qml - Create template file in
/Assets/MatugenTemplates/ - Add Settings toggle in
Commons/Settings.qml(templates.yourapp) - Template will automatically work for both wallpaper and predefined paths
Discord client handling:
All Discord clients use the same template (vesktop.css) but different output paths.
Auto-detected by ProgramCheckerService, enabled via single Settings.data.templates.discord toggle.
Git Hooks
Uses lefthook for git hooks (see lefthook.yml)
Community Resources
- Documentation: https://docs.noctalia.dev
- Discord: https://discord.noctalia.dev
- GitHub: https://github.com/noctalia-dev/noctalia-shell
Contributing
Notes for AI Assistants
Code Style
- QML component names use PascalCase
- Service names end with "Service.qml"
- Widget names start with "N" prefix (e.g., NButton, NPanel)
- JavaScript helpers in Helpers/ directory
Common Tasks
- Adding a new bar widget: Register in BarWidgetRegistry
- Adding a control center widget: Register in ControlCenterWidgetRegistry
- Creating a service: Follow the Service pattern, add to init order if needed
- Modifying theming: Check AppThemeService and ColorSchemeService
- Panel work: Edit in Modules/Panels/, ensure proper z-index in shell.qml
Important Files to Check
- Settings schema:
Commons/Settings.qml - Service initialization:
shell.qml(Component.onCompleted) - Panel registration:
shell.qml(panelComponents array) - Theme system:
Services/AppThemeService.qml - Template configurations:
Services/TemplateRegistry.qml - Palette generation:
Services/ColorPaletteGenerator.qml - Template processing:
Services/TemplateProcessor.qml
Testing
- Test on target compositors: Niri, Hyprland, Sway
- Check multi-monitor scenarios
- Verify lazy loading doesn't break functionality
- Test settings persistence across restarts
Debugging
- Use
Logger.qmlfor logging (Logger.i, Logger.d, Logger.w, Logger.e) - Check console output for service initialization messages
- Verify service initialization order if adding dependencies