✨ feat(panel): add workspace indicator to panel

main.py

@@ -1,8 +1,21 @@
 import gi
+import setproctitle
+from fabric import Application
+from fabric.core import widgets
+from fabric.utils import get_relative_path, monitor_file
+from loguru import logger
+
+from config.data import APP_NAME
+from modules.dock import Dock
+from modules.launcher.main import Launcher
+from modules.notification.notification import ModusNoti
+from modules.osd import OSD
+from modules.panel.main import Panel
+from modules.switcher import ApplicationSwitcher
+from modules.widget import Deskwidgets
 
 gi.require_version("Gtk", "3.0")
 gi.require_version("Gdk", "3.0")
-from gi.repository import Gtk, Gdk
 
 # Initialize fontconfig early to prevent warnings
 try:
@@ -13,22 +26,8 @@ try:
 except:
     pass
 
-from fabric.core import widgets
-import setproctitle
-from loguru import logger
-
-from config.data import APP_NAME
-from fabric import Application
-from fabric.utils import get_relative_path, monitor_file
-from modules.dock import Dock
-from modules.launcher.main import Launcher
-from modules.notification.notification import ModusNoti
-from modules.widget import Deskwidgets
-from modules.osd import OSD
 
 # from modules.corners import Corners
-from modules.panel.main import Panel
-from modules.switcher import ApplicationSwitcher
 
 for log in [
     "fabric.hyprland.widgets",

modules/panel/components/workspace.py

@@ -0,0 +1,25 @@
+from fabric.hyprland.widgets import HyprlandWorkspaces, WorkspaceButton
+from fabric.widgets.box import Box
+
+# TODO: Support Multi Monitor
+
+class WorkspaceIndicator(Box):
+    def __init__(self, **kwargs):
+        super().__init__(
+            name="workspace-indicator",
+            orientation="h",
+            spacing=4,
+            **kwargs
+        )
+        
+        self.workspaces = HyprlandWorkspaces(
+            name="workspaces",
+            spacing=4,
+            buttons_factory=lambda ws_id: WorkspaceButton(
+                id=ws_id, 
+                label=str(ws_id)
+            ),
+        )
+        
+        self.add(self.workspaces)
+        self.show_all()

modules/panel/main.py

@@ -16,6 +16,7 @@ from modules.panel.components.indicators import (
 )
 from modules.panel.components.menubar import MenuBar
 from modules.panel.components.recording_indicator import RecordingIndicator
+from modules.panel.components.workspace import WorkspaceIndicator
 from utils.roam import modus_service
 from widgets.mousecapture import MouseCapture
 from widgets.wayland import WaylandWindow as Window
@@ -133,6 +134,9 @@ class Panel(Window):
 
         self.recording_indicator = RecordingIndicator()
 
+        # Workspace indicator
+        self.workspace_indicator = WorkspaceIndicator()
+
         self.children = CenterBox(
             name="panel",
             start_children=Box(
@@ -151,6 +155,7 @@ class Panel(Window):
                 spacing=4,
                 orientation="h",
                 children=[
+                    self.workspace_indicator,
                     self.dnd_indicator,
                     self.tray_revealer,
                     self.chevron_button,

services/modus.py

@@ -1,11 +1,9 @@
 import json
-from typing import List
-
-from loguru import logger
 
 from fabric.core.service import Property, Service, Signal
 from fabric.hyprland.service import Hyprland
-from fabric.notifications import Notification
+from loguru import logger
+
 from services.custom_notification import CachedNotifications
 
 notification_service = CachedNotifications()

styles/panel.css

@@ -97,3 +97,32 @@
   font-size: 17px;
   margin: 0 10px;
 }
+
+#workspace-indicator {
+  margin: 0 4px;
+}
+
+#workspaces > button {
+  padding: 0px 8px;
+  margin: 4px 0px;
+  min-width: 12px;
+  border: 1px solid var(--outline);
+  border-radius: 8px;
+}
+
+#workspaces > button:hover {
+  background-color: var(--surface-bright);
+}
+
+#workspaces > button.active {
+  background-color: var(--on-tertiary);
+  font-weight: bold;
+}
+
+#workspaces > button.urgent {
+  background-color: var(--on-error);
+}
+
+#workspaces > button.empty {
+  background-color: var(--outline);
+}