* Add grouped element reordering to control center setting popup. Reorganize the control center widget menu into grouped rows and add drag handles for reordering. Introduce controlCenterGroups to drive the grouped popup layout, along with dynamic content width calculation. Disable dependent options when their parent icon is turned off, and refine DankToggle disabled colors to better distinguish checked and unchecked states. * Apply Control Center group order to live widget rendering. Apply persisted `controlCenterGroupOrder` to the actual control center button rendering path instead of only using it in the settings UI. This refactors `ControlCenterButton.qml` to derive a normalized effective group order, build a small render model from that order, and use model-driven rendering for both vertical and horizontal layouts. Highlights: - add a default control center group order and normalize saved order data - ignore unknown ids, deduplicate duplicates, and append missing known groups - add shared group visibility helpers and derive a render model from them - render both vertical and horizontal indicators from the effective order - preserve existing icon, color, percent text, and visibility behavior - keep the fallback settings icon outside persisted ordering - reconnect cached interaction refs for audio, mic, and brightness to the real rendered group containers so wheel and right-click behavior still work - clear and refresh interaction refs on orientation, visibility, and delegate lifecycle changes - tighten horizontal composite group sizing by measuring actual rendered content, fixing extra spacing around the audio indicator Also updates the settings widgets UI to persist and restore control center group ordering consistently with the live control center rendering.
DMS Quickshell Interface
QML-based desktop shell interface for DankMaterialShell providing panels, widgets, and overlays.
See root README for project overview and installation.
Architecture
Modular QML Structure
Modules/- UI components (panels, widgets, overlays)Services/- System integration singletons (audio, network, bluetooth)Widgets/- Reusable UI controlsCommon/- Shared resources and themes
Technology Stack
- Quickshell - QML-based shell framework
- Qt/QtQuick - UI rendering and controls
- Material Design 3 - Design system and theming
Development
Run the shell:
quickshell -p quickshell/
Code formatting:
qmlfmt -t 4 -i 4 -b 250 -w path/to/file.qml
make lint-qml # Run from repo root; requires quickshell/.qmlls.ini (generated by `qs -p quickshell/`)
# Uses Qt 6 qmllint. Override path with QMLLINT=/path/to/qmllint if needed.
# Auto-detects `qmllint6`, Fedora's `qmllint-qt6`, `/usr/lib/qt6/bin/qmllint`, then `qmllint`.
Components
Panels & Bars
Modules/TopBar/- Multi-monitor status bars with workspace switchingModules/DankBar/- Customizable widget bar with plugin supportModules/Dock/- Application dock with window management
System Controls
Modules/ControlCenter/- WiFi, Bluetooth, audio, display settingsModules/Notifications/- Notification center with popupsModules/Greetd/- Login greeter interface
Overlays
Modules/Spotlight/- Application and file launcherModules/Overview/- Workspace overviewModules/Lock/- Screen lock system
Utilities
Modules/ProcessList/- System monitoring and process managementModules/Calendar/- Calendar widget with event syncModules/Weather/- Weather display
Services
Singletons providing system integration:
Media & Audio
AudioService- PipeWire/PulseAudio volume and device controlMprisController- Media player integration
Network
NetworkService- NetworkManager WiFi controlBluetoothService- BlueZ Bluetooth management
Display
DisplayService- Brightness control and night modeWallpaperService- Wallpaper management and effects
System
BatteryService- Battery status and power profilesIdleService- Idle detection and inhibit locksClipboardService- Clipboard history with imagesDgopService- System metrics (CPU, RAM, GPU)
Integration
NiriService- Niri workspace integrationHyprlandService- Hyprland workspace integrationPluginService- Plugin discovery and lifecycle
Widgets
Reusable Material Design 3 components in Widgets/:
DankIcon- Icon component with Material fontDankSlider- Enhanced slider with animationsDankToggle- Toggle switch componentDankTabBar- Tab bar implementationDankGridView- Grid layout with adaptive columnsDankListView- Scrollable list viewDankTextField- Text input with validationDankDropdown- Dropdown selectionDankPopout- Base for overlay componentsStateLayer- Material interaction states
Theming
Dynamic Color Schemes
Wallpaper-based theming using matugen:
import qs.Common
Rectangle {
color: Theme.container
border.color: Theme.outline
}
Theme singleton provides Material Design 3 color system, spacing, fonts, and elevation.
Application Themes
Templates in scripts/templates/ generate themes for:
- GTK 3/4
- Qt5/Qt6
- Alacritty, Kitty, Ghostty, Foot, Wezterm terminals
- Neovim
- VSCode/VSCodium
- Firefox
Multi-Monitor Support
Per-monitor panel instances using Quickshell Variants:
Variants {
model: Quickshell.screens
PanelWindow {
screen: modelData
// Per-screen configuration
}
}
Workspace switchers adapt to compositor (Niri/Hyprland).
Plugin System
External plugins in ~/.config/DankMaterialShell/plugins/:
Widget plugins - UI components in DankBar Daemon plugins - Background processes without UI
Plugin manifest (plugin.json):
{
"id": "pluginId",
"name": "Plugin Name",
"version": "1.0.0",
"type": "widget",
"component": "./Widget.qml",
"settings": "./Settings.qml",
"permissions": ["settings_read", "settings_write"]
}
Plugins access pluginService for persistent data:
pluginService.savePluginData("pluginId", "key", value)
pluginService.loadPluginData("pluginId", "key", defaultValue)
IPC Integration
Backend IPC socket communication:
import Quickshell.Io
Process {
command: ["dms", "ipc", "call", "spotlight", "toggle"]
running: true
}
Common IPC commands exposed through services for reactive property bindings.
Code Conventions
Component Structure:
import QtQuick
import Quickshell
import qs.Common
import qs.Services
Item {
id: root
property type name: value
signal customSignal(type param)
Component { /* children */ }
}
Services (Singletons):
import QtQuick
import Quickshell
pragma Singleton
pragma ComponentBehavior: Bound
Singleton {
id: root
property bool featureAvailable: false
property type currentValue: defaultValue
function performAction(param) { /* implementation */ }
}
Guidelines:
- Use
Theme.propertyNamefor consistent styling - Bind directly to service properties for reactivity
- Use
DankIconfor all icons - Implement feature detection and graceful degradation
- 4-space indentation, no unnecessary comments
Translation
Internationalization using POEditor:
export POEDITOR_API_TOKEN="token"
export POEDITOR_PROJECT_ID="id"
python3 scripts/i18nsync.py sync
Pre-commit hook checks translation sync status.
License
MIT License - See LICENSE for details.