From 4c5a283c55f287da8b65550912102faeb6d4e7f2 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Sun, 24 Mar 2024 22:14:55 +0700
Subject: [PATCH] update styles

---
 .../centermodules/notificationlist.js         |  2 +-
 .../sideright/centermodules/volumemixer.js    | 23 ++++++++++++++++++-
 .config/ags/scss/_lib_classes.scss            |  4 ++++
 .config/ags/scss/_sidebars.scss               |  6 +++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/.config/ags/modules/sideright/centermodules/notificationlist.js b/.config/ags/modules/sideright/centermodules/notificationlist.js
index 47e0cc88c..098c2de6b 100644
--- a/.config/ags/modules/sideright/centermodules/notificationlist.js
+++ b/.config/ags/modules/sideright/centermodules/notificationlist.js
@@ -108,7 +108,7 @@ export default (props) => {
     });
     const listTitle = Box({
         vpack: 'start',
-        className: 'sidebar-group-invisible txt spacing-h-5',
+        className: 'txt spacing-h-5',
         children: [
             notifCount,
             silenceButton,
diff --git a/.config/ags/modules/sideright/centermodules/volumemixer.js b/.config/ags/modules/sideright/centermodules/volumemixer.js
index 58c7f82f0..8d6faf37f 100644
--- a/.config/ags/modules/sideright/centermodules/volumemixer.js
+++ b/.config/ags/modules/sideright/centermodules/volumemixer.js
@@ -42,7 +42,7 @@ const appVolume = (stream) => {
                         className: 'sidebar-volmixer-stream-slider',
                         value: stream.volume,
                         min: 0, max: 1,
-                        onChange: ({value}) => {
+                        onChange: ({ value }) => {
                             stream.volume = value;
                         },
                         setup: (self) => {
@@ -83,12 +83,33 @@ export default (props) => {
             ,
         })
     })
+    const status = Box({
+        className: 'sidebar-volmixer-status spacing-h-5',
+        children: [
+            Label({
+                className: 'txt-small margin-top-5 margin-bottom-8',
+                attribute: { headphones: undefined },
+                setup: (self) => {
+                    const updateAudioDevice = (self) => {
+                        const usingHeadphones = (Audio.speaker?.stream?.port)?.toLowerCase().includes('headphone');
+                        if (self.attribute.headphones === undefined ||
+                            self.attribute.headphones !== usingHeadphones) {
+                            self.attribute.headphones = usingHeadphones;
+                            self.label = `Output: ${usingHeadphones ? 'Headphones' : 'Speakers'}`;
+                        }
+                    }
+                    self.hook(Audio, updateAudioDevice);
+                }
+            })
+        ]
+    });
     return Box({
         ...props,
         className: 'spacing-v-5',
         vertical: true,
         children: [
             appList,
+            status,
         ]
     });
 }
diff --git a/.config/ags/scss/_lib_classes.scss b/.config/ags/scss/_lib_classes.scss
index 7fb5a6512..0e1ae440c 100644
--- a/.config/ags/scss/_lib_classes.scss
+++ b/.config/ags/scss/_lib_classes.scss
@@ -420,6 +420,10 @@
     margin-bottom: 0.682rem;
 }
 
+.margin-bottom-8 { // wtf
+    margin-bottom: 0.545rem;
+}
+
 .margin-right-15 {
     margin-right: 1.023rem;
 }
diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss
index ca2313cb8..59210bd3b 100644
--- a/.config/ags/scss/_sidebars.scss
+++ b/.config/ags/scss/_sidebars.scss
@@ -852,6 +852,7 @@ $waifu_image_overlay_transparency: 0.7;
     // color: $onLayer2;
     border-bottom: 0.068rem solid $outlineVariant;
     padding: 0.682rem;
+    color: $onSurface;
 }
 
 .sidebar-volmixer-stream-appicon {
@@ -878,4 +879,9 @@ $waifu_image_overlay_transparency: 0.7;
         min-height: 1.364rem;
         min-width: 1.364rem;
     }
+}
+
+.sidebar-volmixer-status {
+    color: $onSurface;
+    margin: 0rem 0.682rem;
 }
\ No newline at end of file