feat(ags): add background gradient

hosts/wim/config/ags/config.js

@@ -2,7 +2,7 @@ import { App, Utils } from './imports.js';
 
 import Closer         from './js/misc/closer.js';
 import Powermenu      from './js/powermenu.js';
-import { Bar }        from './js/bar/main.js';
+import * as Bar       from './js/bar/main.js';
 import NotifCenter    from './js/notifications/center.js';
 import NotifPopups    from './js/notifications/popup.js';
 import Calendar       from './js/date.js';
@@ -34,7 +34,8 @@ export default {
     },
     windows: [
         Powermenu(),
-        Bar(),
+        Bar.Bar(),
+        Bar.BgGradient(),
         Closer(),
         NotifCenter(),
         NotifPopups(),

hosts/wim/config/ags/js/bar/fullscreen.js

@@ -1,12 +1,13 @@
-import { Widget, Hyprland, Utils, Variable } from '../../imports.js';
+import { App, Widget, Hyprland, Utils, Variable } from '../../imports.js';
 const { Box, EventBox, Overlay } = Widget;
 
-const Revealed = Variable(true);
-const Hovering = Variable(false);
-
 import { RoundedCorner } from '../screen-corners.js';
 import Gesture           from './gesture.js';
 
+const Revealed = Variable(true);
+const Hovering = Variable(false);
+const wStyle = 'background: rgba(0, 0, 0, 0.5);';
+
 
 Hyprland.connect('changed', () => {
     Revealed.value = Hyprland.getWorkspace(Hyprland.active.workspace.id)
@@ -31,6 +32,12 @@ export default props => Overlay({
 
                 properties: [['timeouts', []]],
                 connections: [[Revealed, self => {
+                    const Bar = App.getWindow('bar');
+                    Bar.setStyle(Revealed.value ? '' : wStyle);
+
+                    const BgGradient = App.getWindow('bg-gradient');
+                    BgGradient.visible = !Revealed.value;
+
                     if (Revealed.value) {
                         Utils.timeout(2000, () => {
                             if (Revealed.value)

hosts/wim/config/ags/js/bar/main.js

@@ -17,6 +17,15 @@ import Revealer       from './fullscreen.js';
 //import KeyboardLayout from './keyboard-layout.js';
 
 
+export const BgGradient = () => Window({
+    name: 'bg-gradient',
+    layer: 'background',
+    anchor: ['top', 'bottom', 'left', 'right'],
+    style: `background-image: -gtk-gradient (linear,
+                                left top, left bottom,
+                                from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));`,
+});
+
 export const Bar = () => Window({
     name: 'bar',
     layer: 'overlay',

hosts/wim/config/ags/js/misc/closer.js

@@ -6,6 +6,7 @@ import Pointers from '../../services/pointers.js';
 const ALWAYS_OPEN = [
     'closer',
     'bar',
+    'bg-gradient',
     'notifications',
     'cornertl',
     'cornertr',