🐛 fix: global-nav styles

extension/src/app.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Main from '@/components/Main';
 import { logToConsole } from '@/utils/logUtils';
 import { showError } from '@/components/error/ErrorBoundary';
+import { getIsGlobalNav } from '@/utils/platformUtils';
 
 async function main() {
   try {

extension/src/components/Main.tsx

@@ -8,20 +8,23 @@ import GrainManager from '@/components/grain/GrainManager';
 import PlaybarManager from '@/components/playbar/PlaybarManager';
 import UnderMainViewManager from '@/components/underMainView/UnderMainViewManager';
 import { useLucidStore } from '@/store/useLucidStore';
-import ArtworkManager from './artworkManager/ArtworkManager';
-import WindowControlsManager from './windowControls/WindowControlsManager';
+import ArtworkManager from '@/components/artworkManager/ArtworkManager';
+import WindowControlsManager from '@/components/windowControls/WindowControlsManager';
 import { manageBackgroundZIndex } from '@/utils/backgroundUtils';
 import { replaceIcons } from '@/utils/replaceIcons';
 import { usePathManagement } from '@/utils/pathUtils';
-import ColorManager from './colors/ColorManager';
+import ColorManager from '@/components/colors/ColorManager';
+import { checkForGlobalNav } from '@/utils/navUtils';
 
 const Main = () => {
   const underMainViewRef = React.useRef<HTMLElement | null>(null);
   const [previousPath, setPreviousPath] = React.useState<string | null>(null);
-  const { pageCategory, setPageCategory } = useLucidStore();
+  const { pageCategory, setPageCategory, isGlobalNav } = useLucidStore();
 
   usePathManagement();
 
+  checkForGlobalNav();
+
   React.useEffect(() => {
     const setUnderMainView = () => {
       if (document.getElementById('lucid-under-main-view')) {
@@ -79,7 +82,6 @@ const Main = () => {
         <PlaybarManager />
         <ArtworkManager />
         <UnderMainViewManager />
-        <WindowControlsManager />
       </div>
       <div
         id='background-container'
@@ -97,6 +99,7 @@ const Main = () => {
           <SettingsManager />
         </ModalContextProvider>
       </div>
+      <WindowControlsManager />
     </>
   );
 };

extension/src/components/settings/sections/BackgroundSettingsSection.tsx

@@ -8,7 +8,7 @@ import type {
   BackgroundStyleSettings,
 } from '@/types/settingTypes';
 import CustomInput from '@/components/ui/CustomInput';
-import SettingsCardWrapper from '../SettingsCardWrapper';
+import SettingsCardWrapper from '@/components/settings/SettingsCardWrapper';
 
 const BackgroundSettingsSection: React.FC = React.memo(() => {
   const {

extension/src/components/settings/ui/SettingSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SettingSectionProps } from '@/types/settingTypes';
-import SettingsCardWrapper from '../SettingsCardWrapper';
+import SettingsCardWrapper from '@/components/settings/SettingsCardWrapper';
 
 const SettingSection = ({
   title,

extension/src/components/windowControls/WindowControlsManager.tsx

@@ -5,7 +5,7 @@ import {
   calculateInverseBrowserZoom,
   calculateScaledPx,
 } from '@/utils/zoomUtils';
-import TransparentWindowControl from './TransparentWindowControl';
+import TransparentWindowControl from '@/components/windowControls/TransparentWindowControl';
 import { setWindowControlsHeight } from '@/utils/windowControlUtils';
 
 const WindowControlsManager = React.memo(() => {
@@ -44,7 +44,7 @@ const WindowControlsManager = React.memo(() => {
       }
     }
 
-    setTopBarStyles();
+    setTimeout(setTopBarStyles, 1000);
     window.addEventListener('resize', setTopBarStyles);
 
     return () => {

extension/src/utils/navUtils.ts

@@ -0,0 +1,17 @@
+import { useLucidStore } from '@/store/useLucidStore';
+import React from 'react';
+
+export const setGlobalNav = (value: boolean) => {
+  const rootElement = document.querySelector('.Root');
+  if (rootElement) {
+    rootElement.classList.add(`${value ? 'global-nav' : 'control-nav'}`);
+  }
+};
+
+export const checkForGlobalNav = () => {
+  const { isGlobalNav } = useLucidStore();
+
+  React.useEffect(() => {
+    setGlobalNav(isGlobalNav);
+  }, [isGlobalNav]);
+};

src/user.css

@@ -301,6 +301,15 @@ option {
   background-color: var(--spice-card) !important;
 }
 
+/* Main container */
+.spotify__container--is-desktop .Root__top-container {
+  padding-top: calc(48px + var(--panel-gap) * 2);
+}
+
+.spotify__container--is-desktop .global-nav .Root__top-container {
+  padding-top: var(--panel-gap) !important;
+}
+
 /* Button styles */
 .ap8U6ZVS8BqMxUdinBis
 /* ADD: card close button */