From b72685f6a38b1cfc558072757a7e3580e30f8072 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Thu, 20 Jun 2024 19:25:52 +0700
Subject: [PATCH] gradient at bottom of sideright scrollables

---
 .../sideright/centermodules/bluetooth.js      | 38 +++++++++++--------
 .../sideright/centermodules/wifinetworks.js   | 16 +++++---
 .config/ags/scss/_sidebars.scss               |  4 ++
 3 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/.config/ags/modules/sideright/centermodules/bluetooth.js b/.config/ags/modules/sideright/centermodules/bluetooth.js
index a39957779..b9ec738d3 100644
--- a/.config/ags/modules/sideright/centermodules/bluetooth.js
+++ b/.config/ags/modules/sideright/centermodules/bluetooth.js
@@ -1,7 +1,7 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
-const { Box, Button, Icon, Label, Scrollable, Slider, Stack } = Widget;
+const { Box, Button, Icon, Label, Scrollable, Slider, Stack, Overlay } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
 import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
@@ -103,22 +103,28 @@ export default (props) => {
             ]
         })]
     });
-    const deviceList = Scrollable({
-        vexpand: true,
-        child: Box({
-            attribute: {
-                'updateDevices': (self) => {
-                    const devices = Bluetooth.devices;
-                    self.children = devices.map(d => BluetoothDevice(d));
+    const deviceList = Overlay({
+        passThrough: true,
+        child: Scrollable({
+            vexpand: true,
+            child: Box({
+                attribute: {
+                    'updateDevices': (self) => {
+                        const devices = Bluetooth.devices;
+                        self.children = devices.map(d => BluetoothDevice(d));
+                    },
                 },
-            },
-            vertical: true,
-            className: 'spacing-v-5',
-            setup: (self) => self
-                .hook(Bluetooth, self.attribute.updateDevices, 'device-added')
-                .hook(Bluetooth, self.attribute.updateDevices, 'device-removed')
-            ,
-        })
+                vertical: true,
+                className: 'spacing-v-5 margin-bottom-15',
+                setup: (self) => self
+                    .hook(Bluetooth, self.attribute.updateDevices, 'device-added')
+                    .hook(Bluetooth, self.attribute.updateDevices, 'device-removed')
+                ,
+            })
+        }),
+        overlays: [Box({
+            className: 'sidebar-centermodules-scrollgradient-bottom'
+        })]
     });
     const mainContent = Stack({
         children: {
diff --git a/.config/ags/modules/sideright/centermodules/wifinetworks.js b/.config/ags/modules/sideright/centermodules/wifinetworks.js
index 19d1c34d0..4a68c91a9 100644
--- a/.config/ags/modules/sideright/centermodules/wifinetworks.js
+++ b/.config/ags/modules/sideright/centermodules/wifinetworks.js
@@ -1,7 +1,7 @@
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import Network from "resource:///com/github/Aylur/ags/service/network.js";
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
-const { Box, Button, Entry, Icon, Label, Revealer, Scrollable, Slider, Stack } = Widget;
+const { Box, Button, Entry, Icon, Label, Revealer, Scrollable, Slider, Stack, Overlay } = Widget;
 const { execAsync, exec } = Utils;
 import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
 import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
@@ -161,8 +161,9 @@ export default (props) => {
     const networkList = Box({
         vertical: true,
         className: 'spacing-v-10',
-        children: [
-            Scrollable({
+        children: [Overlay({
+            passThrough: true,
+            child: Scrollable({
                 vexpand: true,
                 child: Box({
                     attribute: {
@@ -180,11 +181,14 @@ export default (props) => {
                         },
                     },
                     vertical: true,
-                    className: 'spacing-v-5',
+                    className: 'spacing-v-5 margin-bottom-15',
                     setup: (self) => self.hook(Network, self.attribute.updateNetworks),
                 })
-            })
-        ]
+            }),
+            overlays: [Box({
+                className: 'sidebar-centermodules-scrollgradient-bottom'
+            })]
+        })]
     });
     const bottomBar = Box({
         homogeneous: true,
diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss
index f6c25b795..599a7a336 100644
--- a/.config/ags/scss/_sidebars.scss
+++ b/.config/ags/scss/_sidebars.scss
@@ -992,4 +992,8 @@ $waifu_image_overlay_transparency: 0.7;
 
 .sidebar-centermodules-bottombar-button:active {
     background-color: $layer2Active;
+}
+
+.sidebar-centermodules-scrollgradient-bottom {
+    background: linear-gradient(to top, $layer1 0%, transparentize($layer1, 1) 1.023rem);
 }
\ No newline at end of file