Window control fix

platformUtils.ts

export const detectWindows = () => {
  if (Spicetify.Platform && Spicetify.Platform.operatingSystem === 'Windows') {
    return true;
  }
  if (Spicetify.Platform?.PlatformData?.os_name) {
    return Spicetify.Platform.PlatformData.os_name
      .toLowerCase()
      .includes('win');
  }
  return false;
};

export const getIsLightMode = () =>
  Spicetify?.Config.color_scheme === 'light' || false;

export const getIsGlobalNav = () =>
  !!(
    document.querySelector('.globalNav') ||
    document.querySelector('.Root__globalNav')
  );

export const getRootStyle = () =>
  document.body.style || document.documentElement.style;

export const checkSpotifyVersion = (version: string): boolean =>
  Spicetify.Platform.version >= version;

TransperentWindowControl.tsx

import React from 'react';
import { setWindowControlsHeight } from '@/utils/windowControlUtils';
import {
  calculateBrowserZoom,
  calculateInverseBrowserZoom,
  calculateScaledPx,
} from '@/utils/zoomUtils';
import { useLucidStore } from '@/store/useLucidStore';

const TransparentWindowControl = React.memo(() => {
  const TransparentWindowControlRef = React.useRef<HTMLDivElement | null>(null);

  const {
    isCustomControls,
    rootStyle,
    isWindows,
    isLightMode,
    isSpotifyV16Above,
  } = useLucidStore(); // these come from zustand store
    /*
  from platformUtils.ts
  isLightMode: getIsLightMode(),
  isWindows: detectWindows(),
  isGlobalNav: getIsGlobalNav(),
  rootStyle: getRootStyle(),
    */

  React.useEffect(() => {
    async function setTopBarStyles() {
      if (!isCustomControls && isWindows) {
        const baseHeight = isSpotifyV16Above ? 32 : 64;
        const baseWidth = 135;

        const normalZoom = calculateBrowserZoom();
        const inverseZoom = calculateInverseBrowserZoom();

        const constant = 0.912872807;

        const finalControlHeight = Math.round(
          ((normalZoom * 100) ** constant * 100) / 100 -
            (isSpotifyV16Above ? 0 : 3)
        );

        await setWindowControlsHeight(finalControlHeight);

        const paddingStart = calculateScaledPx(64, inverseZoom, 1);
        const paddingEnd = calculateScaledPx(135, inverseZoom, 1);

        rootStyle.setProperty('--top-bar-padding-start', `${paddingStart}px`);
        rootStyle.setProperty('--top-bar-padding-end', `${paddingEnd}px`);

        if (isWindows && !isCustomControls && !isLightMode) {
          const controlHeight = isSpotifyV16Above
            ? calculateScaledPx(baseHeight, inverseZoom, 1)
            : baseHeight;
          const controlWidth = calculateScaledPx(baseWidth, inverseZoom, 1);

          if (TransparentWindowControlRef.current) {
            TransparentWindowControlRef.current.style.setProperty(
              '--transperent-controls-top-offset',
              `${isSpotifyV16Above ? finalControlHeight / 4 : 0}px`
            );

            TransparentWindowControlRef.current.style.height = `${controlHeight}px`;
            TransparentWindowControlRef.current.style.width = `${controlWidth}px`;
          }
        }
      }
    }

    setTimeout(setTopBarStyles, 1000);
    window.addEventListener('resize', setTopBarStyles);

    return () => {
      window.removeEventListener('resize', setTopBarStyles);
    };
  }, [isCustomControls, rootStyle, isLightMode, isWindows, isSpotifyV16Above]);

  return (
    <div
      ref={TransparentWindowControlRef}
      className='lucid-transperent-window-controls'
    />
  );
});

export default TransparentWindowControl;

windowControlUtils.ts

import { logError, logInfo } from '@/utils/logUtils';

export async function setWindowControlsHeight(height: number) {
  try {
    if (Spicetify?.CosmosAsync?.post)
      await Spicetify.CosmosAsync.post('sp://messages/v1/container/control', {
        type: 'update_titlebar',
        height: height,
      });

    logInfo(`Control height set to ${height}px`);
  } catch (error) {
    logError(`Error setting control height: ${height}`);
  }
}

export function getIsCustomControls(): boolean {
  if (document.getElementById('customControls')) {
    document.querySelector('.lucid-transperent-window-controls')?.remove();
    return true;
  }
  return false;
}

zoomUtils.ts

export const calculateBrowserZoom = (): number => {
  const viewportWidth: number = window.innerWidth;
  const windowWidth: number = window.outerWidth;
  const zoomLevel: number = windowWidth / viewportWidth;
  return zoomLevel;
};

export const calculateInverseBrowserZoom = (): number => {
  const viewportWidth: number = window.innerWidth;
  const windowWidth: number = window.outerWidth;
  const inverseZoomLevel: number = viewportWidth / windowWidth;
  return inverseZoomLevel;
};

export const calculateScaledPx = (
  baseWidth: number,
  inverseZoom: number,
  scalingFactorOut = 1,
  minWidth = 0,
  maxWidth: number = Number.POSITIVE_INFINITY
): number => {
  const scaledWidth = baseWidth * (inverseZoom + scalingFactorOut - 1);
  return Math.max(minWidth, Math.min(scaledWidth, maxWidth));
};

Styles for it

.lucid-transperent-window-controls {
  display: block;
  position: fixed;
  top: var(--transperent-controls-top-offset, 0);
  right: 0;
  pointer-events: none;
  height: 0;
  width: 0;
  -webkit-backdrop-filter: brightness(2.12);
  backdrop-filter: brightness(2.12);
  z-index: var(--above-main-and-now-playing-view-grid-area, 6);
}