desktop: fix usability papercuts (#84)

* waybar: imrprove margins and padding

* hyprland: add groupbar theming and bind

* hyprland: update README.md

* waybar: add nwg-drawer config

* waybar: add nwg-drawer button even out of tablet mode

* waybar: increase margin/padding on submap/modes

homeManagerModules/desktop/hyprland/README.md

@@ -74,6 +74,7 @@ ______________________________________________________________________
 - SUPER + TAB: Open Window list.
 - SUPER + V: Toggle floating window.
 - SUPER SHIFT + Backslash: Toggle vertical/horizontal splits.
+- SUPER SHIFT + G: Toggle groupbar.
 - SUPER SHIFT + W: Toggle fullscreen.
 
 #### Focus

homeManagerModules/desktop/hyprland/settings.nix

@@ -28,6 +28,7 @@ in {
   bind =
     [
       "$mod CTRL,L,exec,${lib.getExe pkgs.swaylock}"
+      "$mod SHIFT,G,togglegroup"
       "$mod SHIFT,R,exec,${lib.getExe config.programs.rofi.package} -show run"
       "$mod SHIFT,S,movetoworkspace,special:magic"
       "$mod SHIFT,V,togglefloating"
@@ -160,15 +161,35 @@ in {
     workspace_swipe_touch = true;
   };
 
+  group = {
+    "col.border_active" = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.secondary}CC) rgba(${lib.strings.removePrefix "#" cfg.theme.colors.primary}CC) 45deg";
+    "col.border_inactive" = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.inactive}99)";
+    "col.border_locked_active" = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.secondary}CC) rgba(${lib.strings.removePrefix "#" cfg.theme.colors.primary}CC) 45deg";
+    "col.border_locked_inactive" = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.inactive}99)";
+
+    groupbar = {
+      "col.active" = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.primary}CC)";
+      "col.inactive" = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.inactive}CC)";
+      "col.locked_active" = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.primary}CC)";
+      "col.locked_inactive" = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.inactive}CC)";
+      font_family = cfg.theme.sansFont.name;
+      font_size = cfg.theme.sansFont.size;
+      height = 24;
+      text_color = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.text}FF)";
+    };
+  };
+
   master = {
     always_center_master = true;
     new_status = false;
   };
 
   misc = {
+    background_color = "rgba(${lib.strings.removePrefix "#" cfg.theme.colors.background}FF)";
     disable_hyprland_logo = true;
     disable_splash_rendering = true;
     focus_on_activate = true;
+    font_family = cfg.theme.sansFont.name;
     vfr = true;
   };
 

homeManagerModules/services/waybar/default.nix

@@ -17,7 +17,6 @@ in {
           output = ["*"];
           position = "bottom";
           modules-left =
-            lib.optionals (cfg.desktop.hyprland.tabletMode.enable)
             ["group/tablet"]
             ++ lib.optionals (cfg.desktop.hyprland.enable)
             ["hyprland/submap"]
@@ -42,8 +41,9 @@ in {
             format = "{icon} {name}";
 
             format-icons = {
-              default = "󰝥";
               active = "󰪥";
+              default = "󰝥";
+              urgent = "";
             };
 
             sort-by = "id";
@@ -61,6 +61,7 @@ in {
             format-icons = {
               default = "󰝥";
               focused = "󰪥";
+              urgent = "";
             };
 
             sort-by = "id";
@@ -223,7 +224,7 @@ in {
 
           "custom/menu" = {
             format = "󰀻";
-            on-click = "${lib.getExe pkgs.nwg-drawer} -mt 5";
+            on-click = "${lib.getExe pkgs.nwg-drawer}";
             tooltip-format = "Touch-friendly application menu.";
           };
 
@@ -245,18 +246,22 @@ in {
           };
 
           "group/tablet" = {
+            modules =
+              ["custom/menu"]
+              ++ lib.optional (cfg.desktop.hyprland.tabletMode.enable)
+              "custom/hyprland-close";
+
             orientation = "horizontal";
-            modules = ["custom/menu" "custom/hyprland-close"];
           };
 
           "group/hardware" = {
-            orientation = "horizontal";
             modules = ["pulseaudio" "bluetooth" "network" "power-profiles-daemon" "battery"];
+            orientation = "horizontal";
           };
 
           "group/session" = {
-            orientation = "horizontal";
             modules = ["custom/dnd" "idle_inhibitor" "custom/logout"];
+            orientation = "horizontal";
           };
         };
       };
@@ -292,21 +297,23 @@ in {
           color: ${cfg.theme.colors.secondary};
         }
 
-        #clock,
         #battery,
         #bluetooth,
+        #clock,
+        #custom-dnd,
+        #custom-hyprland-close,
+        #custom-logout,
+        #custom-menu,
+        #idle_inhibitor,
+        #mode,
         #network,
         #power-profiles-daemon,
         #pulseaudio,
-        #wireplumber,
-        #idle_inhibitor,
-        #custom-dnd,
-        #custom-logout,
-        #custom-menu,
-        #custom-hyprland-close,
-        #tray {
+        #submap,
+        #tray,
+        #wireplumber {
           margin: 0px 5px;
-          padding: 0px 7.5px;
+          padding: 0px 5px;
         }
 
         #battery.charging,
@@ -333,8 +340,8 @@ in {
         #submap,
         #tray,
         #workspaces {
-          margin: 5px 6px 5px 6px;
-          padding: 0px 5px 0px 5px;
+          margin: 5px 5px;
+          padding: 0px 2.5px;
         }
 
         #submap,
@@ -355,5 +362,48 @@ in {
         RestartSec = 5;
       };
     };
+
+    xdg.configFile."nwg-drawer/drawer.css".text = ''
+      window {
+        background-color: alpha (${cfg.theme.colors.background}, 0.8);
+        color: ${cfg.theme.colors.text}
+      }
+
+      /* search entry */
+      entry {
+        background-color: rgba (0, 0, 0, 0.2);
+        border: 4px solid ${cfg.theme.colors.primary};
+        border-radius: ${toString cfg.theme.borderRadius}px
+      }
+
+      button, image {
+        background: none;
+        border: none;
+        border-radius: ${toString cfg.theme.borderRadius}px
+      }
+
+      button:active, button:hover, button:focused {
+        background-color: alpha (${cfg.theme.colors.text}, 0.2);
+        border: none;
+        border-radius: ${toString cfg.theme.borderRadius}px;
+        color: ${cfg.theme.colors.secondary}
+      }
+
+      #category-button {
+        margin: 0 10px 0 10px;
+        border-radius: ${toString cfg.theme.borderRadius}px
+      }
+
+      #pinned-box {
+        padding-bottom: 5px;
+        border-bottom: 1px dotted gray
+      }
+
+      #files-box {
+        padding: 5px;
+        border: 1px dotted gray;
+        border-radius: ${toString cfg.theme.borderRadius}px
+      }
+    '';
   };
 }