Fix: An issue that would cause Matugen colors to not apply. (#929)

* Eslint updates

* linter fixes

* Type fixes

* More type fixes

* Fix isvis

* More type fixes

* Type Fixes

* Consolidate logic to manage options

* Linter fixes

* Package lock update

* Update configs

* Version checker

* Debug pipeline

* Package lock update

* Update ci

* Strict check

* Revert ci

* Eslint

* Remove rule since it causes issues in CI

* Actual matugen fix

src/components/bar/modules/media/index.tsx

@@ -4,10 +4,10 @@ import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/util
 import { generateMediaLabel } from './helpers/index.js';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
 import { bind, Variable } from 'astal';
-import { BarBoxChild } from 'src/lib/types/bar.js';
 import { Astal } from 'astal/gtk3';
-import { activePlayer, mediaAlbum, mediaArtist, mediaTitle } from 'src/globals/media.js';
+import { activePlayer, mediaAlbum, mediaArtist, mediaTitle } from 'src/shared/media.js';
 import AstalMpris from 'gi://AstalMpris?version=0.1';
+import { BarBoxChild } from 'src/lib/types/bar.types.js';
 
 const mprisService = AstalMpris.get_default();
 const {
@@ -49,15 +49,18 @@ const Media = (): BarBoxChild => {
         },
     );
 
-    const componentClassName = Variable.derive([options.theme.bar.buttons.style, show_label], (style: string) => {
-        const styleMap: Record<string, string> = {
-            default: 'style1',
-            split: 'style2',
-            wave: 'style3',
-            wave2: 'style3',
-        };
-        return `media-container ${styleMap[style]}`;
-    });
+    const componentClassName = Variable.derive(
+        [options.theme.bar.buttons.style, show_label],
+        (style: string) => {
+            const styleMap: Record<string, string> = {
+                default: 'style1',
+                split: 'style2',
+                wave: 'style3',
+                wave2: 'style3',
+            };
+            return `media-container ${styleMap[style]}`;
+        },
+    );
 
     const component = (
         <box
@@ -68,14 +71,17 @@ const Media = (): BarBoxChild => {
                 componentClassName.drop();
             }}
         >
-            <label className={'bar-button-icon media txt-icon bar'} label={bind(songIcon).as((icn) => icn || '󰝚')} />
+            <label
+                className={'bar-button-icon media txt-icon bar'}
+                label={bind(songIcon).as((icn) => icn || '󰝚')}
+            />
             <label className={'bar-button-label media'} label={mediaLabel()} />
         </box>
     );
 
     return {
         component,
-        isVis,
+        isVis: bind(isVis),
         boxClass: 'media',
         props: {
             setup: (self: Astal.Button): void => {
@@ -113,7 +119,9 @@ const Media = (): BarBoxChild => {
                             }),
                         );
 
-                        disconnectFunctions.push(onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()));
+                        disconnectFunctions.push(
+                            onScroll(self, throttledHandler, scrollUp.get(), scrollDown.get()),
+                        );
                     },
                 );
             },