feat(tazjin/dotfiles): configure wlr/taskbar for waybar r/8733

I think that's the last module I was missing for this to be "feature-complete".

I think ideally the things displayed by the taskbar would have the same order as
the current Niri layout, but I can tackle this later. This might require a patch
in Niri.

Change-Id: I67cc2366b6c510830021954372e29ce0be7d8363
Reviewed-on: https://cl.tvl.fyi/c/depot/+/12543
Reviewed-by: tazjin <tazjin@tvl.su>
Tested-by: BuildkiteCI

2 files changed, 39 insertions, 1 deletions

diff --git a/users/tazjin/dotfiles/waybar/config.nix b/users/tazjin/dotfiles/waybar/config.nix
index aeac4f4c1963..ba5281f02e07 100644
--- a/users/tazjin/dotfiles/waybar/config.nix
+++ b/users/tazjin/dotfiles/waybar/config.nix
@@ -7,7 +7,7 @@ in
   mainBar = {
     layer = "top";
     position = "bottom";
-    modules-left = [ "custom/start" ];
+    modules-left = [ "custom/start" "wlr/taskbar" ];
 
     "custom/start" = {
       format = " Start";
@@ -51,5 +51,14 @@ in
       icon-size = 20;
       spacing = 10;
     };
+
+    "wlr/taskbar" = {
+      format = "{icon} {title}";
+      on-click = "activate";
+      rewrite = {
+        # Truncate any format over 16 characters.
+        "^(.{16}).+$" = "$1…";
+      };
+    };
   };
 }
diff --git a/users/tazjin/dotfiles/waybar/style.css b/users/tazjin/dotfiles/waybar/style.css
index e1bc652b89af..52f5759cc796 100644
--- a/users/tazjin/dotfiles/waybar/style.css
+++ b/users/tazjin/dotfiles/waybar/style.css
@@ -223,3 +223,32 @@ label:focus {
     background-color: #ecf0f1;
     color: #2d3436;
 }
+
+#taskbar {
+    color: @button_text_color;
+    margin: 0.2em;
+    margin-top: 0.35em;
+}
+
+#taskbar button {
+    padding: 0.2em;
+    margin-right: 0.3em;
+    border: 0.1em solid;
+    border-radius: 0em;
+    color: @button_text_color;
+    outline-color: @outline_color;
+    border-top-color: @border_bright;
+    border-right-color: @border_dark;
+    border-left-color: @border_bright;
+    border-bottom-color: @border_dark;
+    background-color: @button_bg_color;
+    box-shadow: inset -0.1em -0.1em @border_shade, inset 0.1em 0.1em @border_light;
+}
+
+#taskbar button.active {
+    border-top-color: @border_dark;
+    border-right-color: @border_bright;
+    border-left-color: @border_dark;
+    border-bottom-color: @border_bright;
+    box-shadow: inset 1px 1px @border_shade;
+}