✨ feat(dock): revamp dock with app pinning, instance management, and improved styling

README.md

@@ -50,8 +50,8 @@ pip install --no-deps git+https://github.com/Fabric-Development/fabric.git
 - [x] Desktop Widgets
 - [x] New Launcher (maybe like Spotlight)
 - [ ] Settings
-- [ ] New Dock with zoom effect on hover
-- [ ] New Application Switcher
+- [ ] Magnifier hover effect on Dock
+- [x] ~~New Application Switcher~~
 - [ ] Panel Widget
 - [x] Calendar Widget
 

modules/panel/components/menubar.py

@@ -387,22 +387,8 @@ class MenuBar(Box):
         # Create the dropdown system
         self.dropdown_system = MenuBarDropdowns(parent=parent_window)
 
-        # Create combined workspace and app label
-        self.workspace_label = Label(
-            label=f"{modus_service.current_workspace} -",
-            name="workspace-name",
-            style_classes="workspace-label",
-        )
-
-        # Connect to workspace changes
-        modus_service.connect(
-            "current-workspace-changed",
-            lambda _, value: self.workspace_label.set_label(f"{value} -"),
-        )
-
         # Add all the menu buttons to the menubar
         self.children = [
-            self.workspace_label,
             self.dropdown_system.global_menu_button_title,
             self.dropdown_system.global_menu_button_file,
             self.dropdown_system.global_menu_button_edit,

styles/dock.css

@@ -14,22 +14,10 @@
 #dock-separator {
   min-width: 3px;
   margin: 2px 0;
-  background-color: var(--surface-bright);
+  background-color: var(--shadow);
   border-radius: 8px;
 }
 
-#dock-app-button:hover {
-  margin-top: -55px;
-  margin-bottom: 4px;
-  transition: all 0.15s ease-out;
-}
-
-#dock-app-button.semi_hovered {
-  margin-top: -20px;
-  margin-bottom: 2px;
-  transition: all 0.15s ease-out;
-}
-
 #dock-app-overlay label {
   background-color: alpha(#000, 0.5);
   font-size: 12px;
@@ -37,3 +25,13 @@
   min-width: 15px;
   border-radius: 8px;
 }
+
+#dock-app-button:hover,
+#dock-app-button:hover.instance {
+  background-color: var(--surface-bright);
+}
+
+#dock-app-button:active,
+#dock-app-button:active.instance {
+  background-color: #89b4fa;
+}

styles/panel.css

@@ -24,6 +24,10 @@
   background-color: var(--surface-bright);
 }
 
+#menubar {
+  margin: 4px 0;
+}
+
 #menubar label {
   font-family: "SF Pro Rounded";
   font-size: 13px;