Fix transient props for styled-components v6

src/renderer/features/albums/components/album-detail-content.tsx

@@ -66,8 +66,6 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
     const handlePlayQueueAdd = usePlayQueueAdd();
     const tableConfig = useTableSettings('albumDetail');
 
-    console.log('tableConfig :>> ', tableConfig);
-
     const columnDefs = useMemo(() => getColumnDefs(tableConfig.columns), [tableConfig.columns]);
 
     const getRowHeight = useCallback((params: RowHeightParams) => {
@@ -266,7 +264,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
 
     return (
         <ContentContainer>
-            <LibraryBackgroundOverlay backgroundColor={background} />
+            <LibraryBackgroundOverlay $backgroundColor={background} />
             <DetailContainer>
                 <Box component="section">
                     <Group

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -333,7 +333,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
 
     return (
         <ContentContainer ref={cq.ref}>
-            <LibraryBackgroundOverlay backgroundColor={background} />
+            <LibraryBackgroundOverlay $backgroundColor={background} />
             <DetailContainer>
                 <Stack spacing="lg">
                     <Group spacing="md">

src/renderer/features/player/components/center-controls.tsx

@@ -55,7 +55,7 @@ const SliderContainer = styled.div`
     height: 20px;
 `;
 
-const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
+const SliderValueWrapper = styled.div<{ $position: 'left' | 'right' }>`
     display: flex;
     flex: 1;
     align-self: center;
@@ -281,7 +281,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                 </ButtonsContainer>
             </ControlsContainer>
             <SliderContainer>
-                <SliderValueWrapper position="left">
+                <SliderValueWrapper $position="left">
                     <Text
                         $noSelect
                         $secondary
@@ -309,7 +309,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         }}
                     />
                 </SliderWrapper>
-                <SliderValueWrapper position="right">
+                <SliderValueWrapper $position="right">
                     <Text
                         $noSelect
                         $secondary

src/renderer/features/shared/components/library-background-overlay.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>`
+export const LibraryBackgroundOverlay = styled.div<{ $backgroundColor?: string }>`
     position: absolute;
     z-index: -1;
     width: 100%;
@@ -8,7 +8,7 @@ export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>
     min-height: 200px;
     pointer-events: none;
     user-select: none;
-    background: ${(props) => props.backgroundColor};
+    background: ${(props) => props.$backgroundColor};
     background-image: var(--bg-subheader-overlay);
     opacity: 0.3;
 `;

src/renderer/features/shared/components/resize-handle.tsx

@@ -1,19 +1,19 @@
 import styled from 'styled-components';
 
 export const ResizeHandle = styled.div<{
-    isResizing: boolean;
-    placement: 'top' | 'left' | 'bottom' | 'right';
+    $isResizing: boolean;
+    $placement: 'top' | 'left' | 'bottom' | 'right';
 }>`
     position: absolute;
-    top: ${(props) => props.placement === 'top' && 0};
-    right: ${(props) => props.placement === 'right' && 0};
-    bottom: ${(props) => props.placement === 'bottom' && 0};
-    left: ${(props) => props.placement === 'left' && 0};
+    top: ${(props) => props.$placement === 'top' && 0};
+    right: ${(props) => props.$placement === 'right' && 0};
+    bottom: ${(props) => props.$placement === 'bottom' && 0};
+    left: ${(props) => props.$placement === 'left' && 0};
     z-index: 90;
     width: 4px;
     height: 100%;
     cursor: ew-resize;
-    opacity: ${(props) => (props.isResizing ? 1 : 0)};
+    opacity: ${(props) => (props.$isResizing ? 1 : 0)};
 
     &:hover {
         opacity: 0.7;
@@ -21,10 +21,10 @@ export const ResizeHandle = styled.div<{
 
     &::before {
         position: absolute;
-        top: ${(props) => props.placement === 'top' && 0};
-        right: ${(props) => props.placement === 'right' && 0};
-        bottom: ${(props) => props.placement === 'bottom' && 0};
-        left: ${(props) => props.placement === 'left' && 0};
+        top: ${(props) => props.$placement === 'top' && 0};
+        right: ${(props) => props.$placement === 'right' && 0};
+        bottom: ${(props) => props.$placement === 'bottom' && 0};
+        left: ${(props) => props.$placement === 'left' && 0};
         width: 1px;
         height: 100%;
         content: '';

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -35,12 +35,12 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { SidebarItemType, useGeneralSettings, useWindowSettings } from '/@/renderer/store';
 import { Platform } from '/@/renderer/types';
 
-const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
+const SidebarContainer = styled(motion.div)<{ $windowBarStyle: Platform }>`
     display: flex;
     flex-direction: column;
     height: 100%;
     max-height: ${(props) =>
-        props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
+        props.$windowBarStyle === Platform.WEB || props.$windowBarStyle === Platform.LINUX
             ? 'calc(100vh - 149px)'
             : 'calc(100vh - 119px)'};
     user-select: none;
@@ -110,7 +110,7 @@ export const CollapsedSidebar = () => {
     }, [sidebarItems]);
 
     return (
-        <SidebarContainer windowBarStyle={windowBarStyle}>
+        <SidebarContainer $windowBarStyle={windowBarStyle}>
             <ScrollArea
                 scrollHideDelay={0}
                 scrollbarSize={8}

src/renderer/features/sidebar/components/sidebar.tsx

@@ -55,11 +55,11 @@ import {
 import { fadeIn } from '/@/renderer/styles';
 import { Platform } from '/@/renderer/types';
 
-const SidebarContainer = styled.div<{ windowBarStyle: Platform }>`
+const SidebarContainer = styled.div<{ $windowBarStyle: Platform }>`
     height: 100%;
     max-height: ${
         (props) =>
-            props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
+            props.$windowBarStyle === Platform.WEB || props.$windowBarStyle === Platform.LINUX
                 ? 'calc(100vh - 160px)' // Playerbar (90px) & ActionBar (70px)
                 : 'calc(100vh - 190px)' // plus windowbar (30px) if the windowBarStyle is Windows/Mac
         // We use the height of the SidebarContainer to keep the Stack below the ActionBar at the correct height
@@ -199,7 +199,7 @@ export const Sidebar = () => {
     return (
         <SidebarContainer
             ref={cq.ref}
-            windowBarStyle={windowBarStyle}
+            $windowBarStyle={windowBarStyle}
         >
             <ActionBar />
             <Stack