Add ags launcher

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

users/configs/ags/config/src/widgets/bar/bar.ts

@@ -1,4 +1,6 @@
+import gap from './gap/gap';
 import date from './date/date';
+import launcher from './launcher/launcher';
 import workspace from './workspace/workspace';
 
 export default (monitor: number) => Widget.Window({
@@ -8,11 +10,13 @@ export default (monitor: number) => Widget.Window({
   exclusivity: 'exclusive',
   anchor: ['top', 'right', 'left'],
   child: Widget.CenterBox({
-    css: 'min-width: 2px; min-height: 2px; padding-top: 2px; padding-bottom: 2px;',
+    class_name: 'widgets',
     // eslint-disable-next-line @typescript-eslint/naming-convention
     startWidget: Widget.Box({
       hexpand: true,
       children: [
+        launcher(),
+        gap(),
         workspace(),
       ],
     }),

users/configs/ags/config/src/widgets/bar/date/date.ts

@@ -6,8 +6,13 @@ const clock = Variable(glib.DateTime.new_now_local(), {
 
 const time = Utils.derive([clock], (c) => c.format('%H:%M - %A, %d %B %Y') || '');
 
-export default () => Widget.Label({
+const label = () => Widget.Label({
   class_name: 'label',
   justification: 'center',
   label: time.bind(),
 });
+
+export default () => Widget.EventBox({
+  class_name: 'date',
+  child: label(),
+});

users/configs/ags/config/src/widgets/bar/gap/gap.ts

@@ -0,0 +1,3 @@
+export default () => Widget.Box({
+  class_name: 'gap',
+});

users/configs/ags/config/src/widgets/bar/launcher/launcher.ts

@@ -0,0 +1,10 @@
+const icon = () => Widget.Icon({
+  class_name: 'icon',
+  icon: "nix-snowflake-symbolic",
+});
+
+export default () => Widget.EventBox({
+  class_name: 'launcher',
+  on_primary_click: () => Utils.execAsync('bash -c "rofi -cache-dir $XDG_CACHE_HOME/rofi -show drun"'),
+  child: icon(),
+});

users/configs/ags/default.nix

@@ -23,6 +23,9 @@ in
       runtimeInputs = with pkgs; [
         ags
         sassc
+        hyprland
+        nixos-icons
+        rofi-wayland
       ];
       text = ''
         ags &> /tmp/ags.log

users/configs/ags/theme.sass

@@ -1,30 +1,62 @@
 .bar
   background-color: {{colors.surface.default.hex}}
 
-.label
+  @mixin interactive
-  color: {{colors.on_surface.default.hex}}
+    min-height: {{custom.font_size}}pt
-  font-size: {{custom.font_size}}pt;
+    border-radius: .5 * {{custom.font_size}}pt
+    transition: .25s
+
+    &:hover
+      background-color: {{colors.surface_container_high.default.hex}}
+
+    &:active
+      background-color: {{colors.surface_container_highest.default.hex}}
+
+  .widgets
+    padding: .2 * {{custom.padding}}pt
+
+    .gap
+      min-height: {{custom.font_size}}pt
+      min-width: .5 * {{custom.padding}}pt
+
+    .launcher
+      @include interactive
+
+      min-width: {{custom.font_size}}pt
+
+      .icon
+        font-size: {{custom.font_size}}pt
+        padding: 0 .3 * {{custom.padding}}pt
+        color: {{colors.primary.default.hex}}
 
     .workspace
-  min-height: {{custom.font_size}}pt;
+      @include interactive
 
       .button
-    font-size: 0;
+        font-size: 0
-    transition: .5s;
+        transition: .5s
-    margin: 0 .3 * {{custom.padding}}pt;
+        margin: 0 .3 * {{custom.padding}}pt
-    background-color: {{colors.surface_variant.default.hex}};
+        background-color: {{colors.outline_variant.default.hex}}
-    min-width: .4 * {{custom.font_size}}pt;
+        min-width: .4 * {{custom.font_size}}pt
-    min-height: .4 * {{custom.font_size}}pt;
+        min-height: .4 * {{custom.font_size}}pt
-    border-radius: .5 * {{custom.font_size}}pt;
+        border-radius: .5 * {{custom.font_size}}pt
 
         &.occupied
           background-color: {{colors.on_surface.default.hex}}
-      min-width: .6 * {{custom.font_size}}pt;
+          min-width: .6 * {{custom.font_size}}pt
-      min-height: .6 * {{custom.font_size}}pt;
+          min-height: .6 * {{custom.font_size}}pt
-      border-radius: .5 * {{custom.font_size}}pt;
+          border-radius: .5 * {{custom.font_size}}pt
 
         &.active
           background-color: {{colors.primary.default.hex}}
-      min-width: 1.67 * {{custom.font_size}}pt;
+          min-width: 1.67 * {{custom.font_size}}pt
-      min-height: {{custom.font_size}}pt;
+          min-height: {{custom.font_size}}pt
-      border-radius: .4 * {{custom.font_size}}pt;
+          border-radius: .4 * {{custom.font_size}}pt
+
+    .date
+      @include interactive
+
+      .label
+        color: {{colors.on_surface.default.hex}}
+        font-size: {{custom.font_size}}pt
+        margin: 0 .5 * {{custom.padding}}pt

users/configs/gtk/default.nix

@@ -18,6 +18,8 @@ in
       gtk4.extraCss = "@import './theme.css';";
     };
 
+    home.packages = with pkgs; [ nixos-icons ];
+
     programs.matugen.settings.templates = {
       gtk3 = {
         input_path = ./theme.css;