Fix transient props for styled-components v6

src/remote/components/wrapped-slider.tsx

@@ -10,7 +10,7 @@ const SliderContainer = styled.div`
     margin: 10px 0;
 `;
 
-const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
+const SliderValueWrapper = styled.div<{ $position: 'left' | 'right' }>`
     display: flex;
     flex: 1;
     align-self: flex-end;
@@ -38,7 +38,7 @@ export const WrapperSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
 
     return (
         <SliderContainer>
-            {leftLabel && <SliderValueWrapper position="left">{leftLabel}</SliderValueWrapper>}
+            {leftLabel && <SliderValueWrapper $position="left">{leftLabel}</SliderValueWrapper>}
             <SliderWrapper>
                 <PlayerbarSlider
                     {...props}
@@ -56,7 +56,7 @@ export const WrapperSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
                     }}
                 />
             </SliderWrapper>
-            {rightLabel && <SliderValueWrapper position="right">{rightLabel}</SliderValueWrapper>}
+            {rightLabel && <SliderValueWrapper $position="right">{rightLabel}</SliderValueWrapper>}
         </SliderContainer>
     );
 };

src/renderer/components/page-header/index.tsx

@@ -7,13 +7,13 @@ import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
 
 const Container = styled(motion(Flex))<{
-    height?: string;
+    $height?: string;
-    position?: string;
+    $position?: string;
 }>`
-    position: ${(props) => props.position || 'relative'};
+    position: ${(props) => props.$position || 'relative'};
     z-index: 200;
     width: 100%;
-    height: ${(props) => props.height || '65px'};
+    height: ${(props) => props.$height || '65px'};
     background: var(--titlebar-bg);
 `;
 
@@ -40,13 +40,13 @@ const Header = styled(motion.div)<{
     }
 `;
 
-const BackgroundImage = styled.div<{ background: string }>`
+const BackgroundImage = styled.div<{ $background: string }>`
     position: absolute;
     top: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
-    background: ${(props) => props.background || 'var(--titlebar-bg)'};
+    background: ${(props) => props.$background || 'var(--titlebar-bg)'};
 `;
 
 const BackgroundImageOverlay = styled.div<{ theme: 'light' | 'dark' }>`
@@ -129,8 +129,8 @@ export const PageHeader = ({
             {!isHidden && (
                 <Container
                     ref={ref}
-                    height={height}
+                    $height={height}
-                    position={position}
+                    $position={position}
                     {...props}
                 >
                     <Header
@@ -151,7 +151,9 @@ export const PageHeader = ({
                     </Header>
                     {backgroundColor && (
                         <>
-                            <BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
+                            <BackgroundImage
+                                $background={backgroundColor || 'var(--titlebar-bg)'}
+                            />
                             <BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
                         </>
                     )}

src/renderer/components/scroll-area/index.tsx

@@ -29,7 +29,10 @@ const StyledScrollArea = styled(MantineScrollArea)`
     }
 `;
 
-const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string; windowBarStyle?: Platform }>`
+const StyledNativeScrollArea = styled.div<{
+    $scrollBarOffset?: string;
+    $windowBarStyle?: Platform;
+}>`
     height: 100%;
 `;
 
@@ -133,8 +136,8 @@ export const NativeScrollArea = forwardRef(
                 />
                 <StyledNativeScrollArea
                     ref={mergedRef}
-                    scrollBarOffset={scrollBarOffset}
+                    $scrollBarOffset={scrollBarOffset}
-                    windowBarStyle={windowBarStyle}
+                    $windowBarStyle={windowBarStyle}
                     {...props}
                 >
                     {children}

src/renderer/components/virtual-table/cells/actions-cell.tsx

@@ -5,7 +5,7 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
 
 export const ActionsCell = ({ context, api }: ICellRendererParams) => {
     return (
-        <CellContainer position="center">
+        <CellContainer $position="center">
             <Button
                 compact
                 variant="subtle"

src/renderer/components/virtual-table/cells/album-artist-cell.tsx

@@ -11,7 +11,7 @@ import { Skeleton } from '/@/renderer/components/skeleton';
 export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
     if (value === undefined) {
         return (
-            <CellContainer position="left">
+            <CellContainer $position="left">
                 <Skeleton
                     height="1rem"
                     width="80%"
@@ -21,7 +21,7 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
     }
 
     return (
-        <CellContainer position="left">
+        <CellContainer $position="left">
             <Text
                 $secondary
                 overflow="hidden"

src/renderer/components/virtual-table/cells/artist-cell.tsx

@@ -11,7 +11,7 @@ import { Skeleton } from '/@/renderer/components/skeleton';
 export const ArtistCell = ({ value, data }: ICellRendererParams) => {
     if (value === undefined) {
         return (
-            <CellContainer position="left">
+            <CellContainer $position="left">
                 <Skeleton
                     height="1rem"
                     width="80%"
@@ -21,7 +21,7 @@ export const ArtistCell = ({ value, data }: ICellRendererParams) => {
     }
 
     return (
-        <CellContainer position="left">
+        <CellContainer $position="left">
             <Text
                 $secondary
                 overflow="hidden"

src/renderer/components/virtual-table/cells/favorite-cell.tsx

@@ -46,7 +46,7 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
     };
 
     return (
-        <CellContainer position="center">
+        <CellContainer $position="center">
             <Button
                 compact
                 sx={{

src/renderer/components/virtual-table/cells/generic-cell.tsx

@@ -4,13 +4,13 @@ import styled from 'styled-components';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 
-export const CellContainer = styled.div<{ position?: 'left' | 'center' | 'right' }>`
+export const CellContainer = styled.div<{ $position?: 'left' | 'center' | 'right' }>`
     display: flex;
     align-items: center;
     justify-content: ${(props) =>
-        props.position === 'right'
+        props.$position === 'right'
             ? 'flex-end'
-            : props.position === 'center'
+            : props.$position === 'center'
             ? 'center'
             : 'flex-start'};
     width: 100%;
@@ -34,7 +34,7 @@ export const GenericCell = (
 
     if (value === undefined) {
         return (
-            <CellContainer position={position || 'left'}>
+            <CellContainer $position={position || 'left'}>
                 <Skeleton
                     height="1rem"
                     width="80%"
@@ -44,7 +44,7 @@ export const GenericCell = (
     }
 
     return (
-        <CellContainer position={position || 'left'}>
+        <CellContainer $position={position || 'left'}>
             {isLink ? (
                 <Text
                     $link={isLink}
@@ -58,6 +58,7 @@ export const GenericCell = (
                 </Text>
             ) : (
                 <Text
+                    $noSelect={false}
                     $secondary={!primary}
                     overflow="hidden"
                     size="md"

src/renderer/components/virtual-table/cells/genre-cell.tsx

@@ -8,7 +8,7 @@ import { AppRoute } from '/@/renderer/router/routes';
 
 export const GenreCell = ({ value, data }: ICellRendererParams) => {
     return (
-        <CellContainer position="left">
+        <CellContainer $position="left">
             <Text
                 $secondary
                 overflow="hidden"

src/renderer/components/virtual-table/cells/rating-cell.tsx

@@ -47,7 +47,7 @@ export const RatingCell = ({ value, node }: ICellRendererParams) => {
     };
 
     return (
-        <CellContainer position="center">
+        <CellContainer $position="center">
             <Rating
                 size="xs"
                 value={value?.userRating}

src/renderer/components/virtual-table/cells/title-cell.tsx

@@ -6,7 +6,7 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
 export const TitleCell = ({ value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
-            <CellContainer position="left">
+            <CellContainer $position="left">
                 <Skeleton
                     height="1rem"
                     width="80%"
@@ -16,7 +16,7 @@ export const TitleCell = ({ value }: ICellRendererParams) => {
     }
 
     return (
-        <CellContainer position="left">
+        <CellContainer $position="left">
             <Text
                 className="current-song-child"
                 overflow="hidden"

src/renderer/components/virtual-table/headers/generic-table-header.tsx

@@ -14,12 +14,12 @@ type Options = {
     preset?: Presets;
 };
 
-export const HeaderWrapper = styled.div<{ position: Options['position'] }>`
+export const HeaderWrapper = styled.div<{ $position: Options['position'] }>`
     display: flex;
     justify-content: ${(props) =>
-        props.position === 'right'
+        props.$position === 'right'
             ? 'flex-end'
-            : props.position === 'center'
+            : props.$position === 'center'
             ? 'center'
             : 'flex-start'};
     width: 100%;
@@ -27,16 +27,16 @@ export const HeaderWrapper = styled.div<{ position: Options['position'] }>`
     text-transform: uppercase;
 `;
 
-const HeaderText = styled(_Text)<{ position: Options['position'] }>`
+const HeaderText = styled(_Text)<{ $position: Options['position'] }>`
     width: 100%;
     height: 100%;
     font-weight: 500;
     line-height: inherit;
     color: var(--ag-header-foreground-color);
     text-align: ${(props) =>
-        props.position === 'right'
+        props.$position === 'right'
             ? 'flex-end'
-            : props.position === 'center'
+            : props.$position === 'center'
             ? 'center'
             : 'flex-start'};
     text-transform: uppercase;
@@ -80,14 +80,14 @@ export const GenericTableHeader = (
     { preset, children, position }: Options,
 ) => {
     if (preset) {
-        return <HeaderWrapper position={position}>{headerPresets[preset]}</HeaderWrapper>;
+        return <HeaderWrapper $position={position}>{headerPresets[preset]}</HeaderWrapper>;
     }
 
     return (
-        <HeaderWrapper position={position}>
+        <HeaderWrapper $position={position}>
             <HeaderText
+                $position={position}
                 overflow="hidden"
-                position={position}
                 weight={500}
             >
                 {children || displayName}

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;
+    $isResizing: boolean;
-    placement: 'top' | 'left' | 'bottom' | 'right';
+    $placement: 'top' | 'left' | 'bottom' | 'right';
 }>`
     position: absolute;
-    top: ${(props) => props.placement === 'top' && 0};
+    top: ${(props) => props.$placement === 'top' && 0};
-    right: ${(props) => props.placement === 'right' && 0};
+    right: ${(props) => props.$placement === 'right' && 0};
-    bottom: ${(props) => props.placement === 'bottom' && 0};
+    bottom: ${(props) => props.$placement === 'bottom' && 0};
-    left: ${(props) => props.placement === 'left' && 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};
+        top: ${(props) => props.$placement === 'top' && 0};
-        right: ${(props) => props.placement === 'right' && 0};
+        right: ${(props) => props.$placement === 'right' && 0};
-        bottom: ${(props) => props.placement === 'bottom' && 0};
+        bottom: ${(props) => props.$placement === 'bottom' && 0};
-        left: ${(props) => props.placement === 'left' && 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

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}
+                $isResizing={isResizing}
-                placement="right"
+                $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;
+    $leftSidebarWidth: string;
-    rightExpanded?: boolean;
+    $rightExpanded?: boolean;
-    rightSidebarWidth?: string;
+    $rightSidebarWidth?: string;
-    shell?: boolean;
+    $shell?: boolean;
-    sidebarCollapsed?: 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 ${(
+    grid-template-columns: ${(props) =>
-            props,
+            props.$sidebarCollapsed ? '80px' : props.$leftSidebarWidth} 1fr ${(props) =>
-        ) => props.rightExpanded && props.rightSidebarWidth};
+            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}
+                                    $isResizing={isResizingRight}
-                                    placement="left"
+                                    $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;
+    $maxButton?: boolean;
-    minButton?: boolean;
+    $minButton?: boolean;
-    restoreButton?: 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}