Adding configuration options to change spacing between icons and labels inside the buttons in the bar. (#30)

* Branch protection check.

* Move button spacing config into the Configuration section instead of Theming.

* Partially Resolves #26 - Added the ability to configure outer spacing on the bar.

* Renamed all class names for buttons so they can be styled with margins.

* Added configurable spacing to buttons.

* Fixed styling for network module when using wifi.

* Fixed ghost margins that occur when labels are disabled in the bar buttons.

* Change the default page of the settings dialog to configuration.

modules/bar/window_title/index.ts

@@ -3,31 +3,42 @@ import { ActiveClient } from 'types/service/hyprland'
 
 const filterTitle = (windowtitle: ActiveClient) => {
     const windowTitleMap = [
-        ["kitty", "󰄛   Kitty Terminal"],
-        ["firefox", "󰈹   Firefox"],
-        ["microsoft-edge", "󰇩   Edge"],
-        ["discord", "    Discord"],
-        ["org.kde.dolphin", "   Dolphin"],
-        ["plex", "󰚺   Plex"],
-        ["steam", "   Steam"],
-        ["spotify", "󰓇   Spotify"],
-        ["obsidian", "󱓧   Obsidian"],
-        ["^$", "󰇄   Desktop"],
-        ["(.+)", `󰣆   ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
+        ["kitty", "󰄛", "Kitty Terminal"],
+        ["firefox", "󰈹", "Firefox"],
+        ["microsoft-edge", "󰇩", "Edge"],
+        ["discord", "", "Discord"],
+        ["org.kde.dolphin", "", "Dolphin"],
+        ["plex", "󰚺", "Plex"],
+        ["steam", "", "Steam"],
+        ["spotify", "󰓇", "Spotify"],
+        ["obsidian", "󱓧", "Obsidian"],
+        ["^$", "󰇄", "Desktop"],
+        ["(.+)", "󰣆", `${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
     ];
 
     const foundMatch = windowTitleMap.find((wt) =>
         RegExp(wt[0]).test(windowtitle.class.toLowerCase()),
     );
 
-    return foundMatch ? foundMatch[1] : windowtitle.class;
+    return {
+        icon: foundMatch ? foundMatch[1] : windowTitleMap[windowTitleMap.length - 1][1],
+        label: foundMatch ? foundMatch[2] : windowTitleMap[windowTitleMap.length - 1][2]
+    }
 };
 
 const ClientTitle = () => {
     return {
-        component: Widget.Label({
-            class_name: "window_title",
-            label: hyprland.active.bind("client").as((v) => filterTitle(v)),
+        component: Widget.Box({
+            children: [
+                Widget.Label({
+                    class_name: "bar-button-icon windowtitle",
+                    label: hyprland.active.bind("client").as((v) => filterTitle(v).icon),
+                }),
+                Widget.Label({
+                    class_name: "bar-button-label windowtitle",
+                    label: hyprland.active.bind("client").as((v) => filterTitle(v).label),
+                })
+            ]
         }),
         isVisible: true,
         boxClass: "windowtitle",