feat(waybar): add menu module with Arch logo and circular workspace indicators

Add custom/menu module at far left of bar with Arch logo SVG background.
Left-click opens fuzzel, right-click opens wlogout. Workspace buttons now
use pixel-sized circles (34x32px with border-radius: 50%) instead of pill
shapes. Both dupre and hudson theme CSS files synced with new sizing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

6 files changed, 73 insertions, 15 deletions

diff --git a/dotfiles/hyprland/.config/themes/dupre/waybar.css b/dotfiles/hyprland/.config/themes/dupre/waybar.css
index 20d6a99..64ad36c 100644
--- a/dotfiles/hyprland/.config/themes/dupre/waybar.css
+++ b/dotfiles/hyprland/.config/themes/dupre/waybar.css
@@ -19,18 +19,32 @@ window#waybar {
 }
 
 #workspaces button {
-    padding: 0.5rem;
-    margin: 0.2rem;
+    min-width: 34px;
+    min-height: 32px;
+    padding: 0;
+    margin: 0.15rem;
     background-color: transparent;
     color: #969385;
-    border-radius: 1rem;
+    border-radius: 50%;
     transition: all 0.3s ease;
 }
 
 #workspaces button.active {
     background: #d7af5f;
     color: #151311;
+}
+
+#custom-menu {
+    background-image: url("/home/cjennings/.config/waybar/arch-logo.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: transparent;
     border-radius: 1rem;
+    min-width: 2.0rem;
+    padding: 0;
+    margin: 0.15rem;
+    transition: all 0.3s ease;
 }
 
 #workspaces button.urgent {
@@ -40,7 +54,7 @@ window#waybar {
 .modules-right, .modules-left {
     background-color: #151311;
     border-radius: 1rem;
-    padding: 0.2rem 0.6rem;
+    padding: 0.1rem 0.6rem;
     margin: 0.3rem;
     border: 0.095rem solid #d7af5f;
     box-shadow: 0rem 0.2rem 0.4rem rgba(0,0,0,0.5);
@@ -58,7 +72,7 @@ window#waybar {
 #clock,
 #custom-layout,
 #window {
-    padding: 0.4rem;
+    padding: 0.45rem;
     margin: 0.3rem;
     color: #969385;
     background-color: transparent;
diff --git a/dotfiles/hyprland/.config/themes/hudson/waybar.css b/dotfiles/hyprland/.config/themes/hudson/waybar.css
index 299f1c2..da1ad75 100644
--- a/dotfiles/hyprland/.config/themes/hudson/waybar.css
+++ b/dotfiles/hyprland/.config/themes/hudson/waybar.css
@@ -19,18 +19,32 @@ window#waybar {
 }
 
 #workspaces button {
-    padding: 0.5rem;
-    margin: 0.2rem;
+    min-width: 34px;
+    min-height: 32px;
+    padding: 0;
+    margin: 0.15rem;
     background-color: transparent;
     color: #bbbbbb;
-    border-radius: 1rem;
+    border-radius: 50%;
     transition: all 0.3s ease;
 }
 
 #workspaces button.active {
     background: #daa520;
     color: #222222;
+}
+
+#custom-menu {
+    background-image: url("/home/cjennings/.config/waybar/arch-logo-hudson.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: transparent;
     border-radius: 1rem;
+    min-width: 2.0rem;
+    padding: 0;
+    margin: 0.15rem;
+    transition: all 0.3s ease;
 }
 
 #workspaces button.urgent {
@@ -40,7 +54,7 @@ window#waybar {
 .modules-right, .modules-left {
     background-color: #222222;
     border-radius: 1rem;
-    padding: 0.2rem 0.6rem;
+    padding: 0.1rem 0.6rem;
     margin: 0.3rem;
     border: 0.095rem solid #daa520;
     box-shadow: 0rem 0.2rem 0.4rem rgba(0,0,0,0.5);
@@ -57,7 +71,7 @@ window#waybar {
 #clock,
 #custom-layout,
 #window {
-    padding: 0.4rem;
+    padding: 0.45rem;
     margin: 0.3rem;
     color: #bbbbbb;
     background-color: transparent;
diff --git a/dotfiles/hyprland/.config/waybar/arch-logo-hudson.svg b/dotfiles/hyprland/.config/waybar/arch-logo-hudson.svg
new file mode 100644
index 0000000..2ee808e
--- /dev/null
+++ b/dotfiles/hyprland/.config/waybar/arch-logo-hudson.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="4 4 56 56" version="1.1">
+ <circle style="fill:#81a2be" cx="32" cy="32" r="28"/>
+ <path style="fill:#ffffff" d="m 32.001272,8.2 c -1.781906,4.365386 -2.856728,7.224642 -4.83977,11.460214 1.217058,1.288514 2.708396,2.781644 5.13031,4.476314 C 29.687034,23.064586 27.913272,21.9961 26.584468,20.879242 24.04675,26.173342 20.066442,33.707228 11.999957,48.2 18.339392,44.540842 23.599636,42.287642 28.17934,41.4262 27.98224,40.580986 27.872528,39.662642 27.88066,38.707728 l 0.0058,-0.19708 c 0.09956,-4.061442 1.871392,-7.664814 4.374576,-7.453514 2.503192,0.2113 3.96354,4.160072 3.861952,8.2215 -0.0184,0.763944 -0.10356,1.4974 -0.253976,2.17803 4.528902,0.88787 9.8812,3.13497 16.131032,6.743328 -1.2333,-2.269444 -2.338612,-4.311344 -3.389064,-6.259772 -1.655914,-1.284056 -3.378888,-2.954142 -6.902038,-4.7624 2.419884,0.629844 4.1591,1.353144 5.510262,2.165844 C 36.531818,19.445258 35.664228,16.801558 32.000886,8.201214 Z"/>
+</svg>
diff --git a/dotfiles/hyprland/.config/waybar/arch-logo.svg b/dotfiles/hyprland/.config/waybar/arch-logo.svg
new file mode 100644
index 0000000..0c03976
--- /dev/null
+++ b/dotfiles/hyprland/.config/waybar/arch-logo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="4 4 56 56" version="1.1">
+ <circle style="fill:#67809c" cx="32" cy="32" r="28"/>
+ <path style="fill:#ffffff" d="m 32.001272,8.2 c -1.781906,4.365386 -2.856728,7.224642 -4.83977,11.460214 1.217058,1.288514 2.708396,2.781644 5.13031,4.476314 C 29.687034,23.064586 27.913272,21.9961 26.584468,20.879242 24.04675,26.173342 20.066442,33.707228 11.999957,48.2 18.339392,44.540842 23.599636,42.287642 28.17934,41.4262 27.98224,40.580986 27.872528,39.662642 27.88066,38.707728 l 0.0058,-0.19708 c 0.09956,-4.061442 1.871392,-7.664814 4.374576,-7.453514 2.503192,0.2113 3.96354,4.160072 3.861952,8.2215 -0.0184,0.763944 -0.10356,1.4974 -0.253976,2.17803 4.528902,0.88787 9.8812,3.13497 16.131032,6.743328 -1.2333,-2.269444 -2.338612,-4.311344 -3.389064,-6.259772 -1.655914,-1.284056 -3.378888,-2.954142 -6.902038,-4.7624 2.419884,0.629844 4.1591,1.353144 5.510262,2.165844 C 36.531818,19.445258 35.664228,16.801558 32.000886,8.201214 Z"/>
+</svg>
diff --git a/dotfiles/hyprland/.config/waybar/config b/dotfiles/hyprland/.config/waybar/config
index 422096f..5582dc6 100644
--- a/dotfiles/hyprland/.config/waybar/config
+++ b/dotfiles/hyprland/.config/waybar/config
@@ -7,6 +7,7 @@
     "margin-right": 10,
 
     "modules-left": [
+        "custom/menu",
         "hyprland/workspaces",
         "custom/layout",
         "hyprland/window"
@@ -33,6 +34,13 @@
         ]
     },
 
+    "custom/menu": {
+        "format": " ",
+        "tooltip": false,
+        "on-click": "fuzzel",
+        "on-click-right": "pgrep -x wlogout || wlogout -b 3 -T 600 -B 600 -L 1200 -R 1200 -c 20 -r 20"
+    },
+
     "hyprland/workspaces": {
         "disable-scroll": true,
         "all-outputs": true,
diff --git a/dotfiles/hyprland/.config/waybar/style.css b/dotfiles/hyprland/.config/waybar/style.css
index 6d67642..45ce837 100644
--- a/dotfiles/hyprland/.config/waybar/style.css
+++ b/dotfiles/hyprland/.config/waybar/style.css
@@ -19,18 +19,32 @@ window#waybar {
 }
 
 #workspaces button {
-    padding: 0.5rem;
-    margin: 0.2rem;
+    min-width: 34px;
+    min-height: 32px;
+    padding: 0;
+    margin: 0.15rem;
     background-color: transparent;
     color: #bbbbbb;
-    border-radius: 1rem;
+    border-radius: 50%;
     transition: all 0.3s ease;
 }
 
 #workspaces button.active {
     background: #daa520;
     color: #222222;
+}
+
+#custom-menu {
+    background-image: url("/home/cjennings/.config/waybar/arch-logo.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: transparent;
     border-radius: 1rem;
+    min-width: 2.0rem;
+    padding: 0;
+    margin: 0.15rem;
+    transition: all 0.3s ease;
 }
 
 #workspaces button.urgent {
@@ -40,7 +54,7 @@ window#waybar {
 .modules-right, .modules-left {
     background-color: #222222;
     border-radius: 1rem;
-    padding: 0.2rem 0.6rem;
+    padding: 0.1rem 0.6rem;
     margin: 0.3rem;
     border: 0.095rem solid #daa520;
     box-shadow: 0rem 0.2rem 0.4rem rgba(0,0,0,0.5);
@@ -58,7 +72,7 @@ window#waybar {
 #clock,
 #custom-layout,
 #window {
-    padding: 0.4rem;
+    padding: 0.45rem;
     margin: 0.3rem;
     color: #bbbbbb;
     background-color: transparent;