Fix transient props for styled-components v6

src/renderer/layouts/default-layout.tsx

@@ -24,14 +24,14 @@ if (!isElectron()) {
     });
 }
 
-const Layout = styled.div<{ windowBarStyle: Platform }>`
+const Layout = styled.div<{ $windowBarStyle: Platform }>`
     display: grid;
     grid-template-areas:
         'window-bar'
         'main-content'
         'player';
     grid-template-rows: ${(props) =>
-        props.windowBarStyle === Platform.WINDOWS || props.windowBarStyle === Platform.MACOS
+        props.$windowBarStyle === Platform.WINDOWS || props.$windowBarStyle === Platform.MACOS
             ? '30px calc(100vh - 120px) 90px'
             : '0px calc(100vh - 90px) 90px'};
     grid-template-columns: 1fr;
@@ -84,8 +84,8 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
     return (
         <>
             <Layout
+                $windowBarStyle={windowBarStyle}
                 id="default-layout"
-                windowBarStyle={windowBarStyle}
             >
                 {windowBarStyle !== Platform.WEB && <WindowBar />}
                 <MainContent shell={shell} />

src/renderer/layouts/default-layout/left-sidebar.tsx

@@ -25,8 +25,8 @@ export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) =>
         <SidebarContainer id="sidebar">
             <ResizeHandle
                 ref={sidebarRef}
-                isResizing={isResizing}
-                placement="right"
+                $isResizing={isResizing}
+                $placement="right"
                 onMouseDown={(e) => {
                     e.preventDefault();
                     startResizing('left');

src/renderer/layouts/default-layout/main-content.tsx

@@ -20,20 +20,20 @@ const SideDrawerQueue = lazy(() =>
 const MINIMUM_SIDEBAR_WIDTH = 260;
 
 const MainContentContainer = styled.div<{
-    leftSidebarWidth: string;
-    rightExpanded?: boolean;
-    rightSidebarWidth?: string;
-    shell?: boolean;
-    sidebarCollapsed?: boolean;
+    $leftSidebarWidth: string;
+    $rightExpanded?: boolean;
+    $rightSidebarWidth?: string;
+    $shell?: boolean;
+    $sidebarCollapsed?: boolean;
 }>`
     position: relative;
-    display: ${(props) => (props.shell ? 'flex' : 'grid')};
+    display: ${(props) => (props.$shell ? 'flex' : 'grid')};
     grid-area: main-content;
     grid-template-areas: 'sidebar . right-sidebar';
     grid-template-rows: 1fr;
-    grid-template-columns: ${(props) => (props.sidebarCollapsed ? '80px' : props.leftSidebarWidth)} 1fr ${(
-            props,
-        ) => props.rightExpanded && props.rightSidebarWidth};
+    grid-template-columns: ${(props) =>
+            props.$sidebarCollapsed ? '80px' : props.$leftSidebarWidth} 1fr ${(props) =>
+            props.$rightExpanded && props.$rightSidebarWidth};
 
     gap: 0;
     background: var(--main-bg);
@@ -96,12 +96,12 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
 
     return (
         <MainContentContainer
+            $leftSidebarWidth={leftWidth}
+            $rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
+            $rightSidebarWidth={rightWidth}
+            $shell={shell}
+            $sidebarCollapsed={collapsed}
             id="main-content"
-            leftSidebarWidth={leftWidth}
-            rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
-            rightSidebarWidth={rightWidth}
-            shell={shell}
-            sidebarCollapsed={collapsed}
         >
             {!shell && (
                 <>

src/renderer/layouts/default-layout/right-sidebar.tsx

@@ -115,8 +115,8 @@ export const RightSidebar = forwardRef(
                             >
                                 <ResizeHandle
                                     ref={ref}
-                                    isResizing={isResizingRight}
-                                    placement="left"
+                                    $isResizing={isResizingRight}
+                                    $placement="left"
                                     onMouseDown={(e) => {
                                         e.preventDefault();
                                         startResizing('right');

src/renderer/layouts/window-bar.tsx

@@ -135,13 +135,13 @@ const MacOsButtonGroup = styled.div`
 `;
 
 export const MacOsButton = styled.div<{
-    maxButton?: boolean;
-    minButton?: boolean;
-    restoreButton?: boolean;
+    $maxButton?: boolean;
+    $minButton?: boolean;
+    $restoreButton?: boolean;
 }>`
     grid-row: 1 / span 1;
     grid-column: ${(props) =>
-        props.minButton ? 2 : props.maxButton || props.restoreButton ? 3 : 1};
+        props.$minButton ? 2 : props.$maxButton || props.$restoreButton ? 3 : 1};
     align-items: center;
     justify-content: center;
     width: 100%;
@@ -165,7 +165,7 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
         <MacOsContainer>
             <MacOsButtonGroup>
                 <MacOsButton
-                    minButton
+                    $minButton
                     className="button"
                     id="min-button"
                     onClick={handleMinimize}
@@ -180,7 +180,7 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
                     />
                 </MacOsButton>
                 <MacOsButton
-                    maxButton
+                    $maxButton
                     className="button"
                     id="max-button"
                     onClick={handleMaximize}