Replace @emotion/styled with styled-components

src/renderer/features/albums/routes/album-list-route.tsx

@@ -173,7 +173,7 @@ export const AlbumListRoute = () => {
       <VirtualGridContainer>
         <Group m={10} position="apart">
           <Group>
-            <Text noSelect size="lg">
+            <Text $noSelect size="lg">
               Albums
             </Text>
             <DropdownMenu position="bottom-start">
@@ -189,7 +189,7 @@ export const AlbumListRoute = () => {
                 {FILTERS.map((filter) => (
                   <DropdownMenu.Item
                     key={`filter-${filter.value}`}
-                    isActive={filter.value === filters.sortBy}
+                    $isActive={filter.value === filters.sortBy}
                     onClick={() => setFilters({ sortBy: filter.value })}
                   >
                     {filter.name}
@@ -197,7 +197,7 @@ export const AlbumListRoute = () => {
                 ))}
                 <DropdownMenu.Divider />
                 <DropdownMenu.Item
-                  isActive={isAdvFilter}
+                  $isActive={isAdvFilter}
                   onClick={() => toggleAdvFilter()}
                 >
                   Advanced Filters
@@ -217,7 +217,7 @@ export const AlbumListRoute = () => {
                 {ORDER.map((sort) => (
                   <DropdownMenu.Item
                     key={`sort-${sort.value}`}
-                    isActive={sort.value === filters.orderBy}
+                    $isActive={sort.value === filters.orderBy}
                     onClick={() => setFilters({ orderBy: sort.value })}
                   >
                     {sort.name}
@@ -237,8 +237,8 @@ export const AlbumListRoute = () => {
                 {serverFolders?.map((folder) => (
                   <DropdownMenu.Item
                     key={folder.id}
+                    $isActive={filters.serverFolderId.includes(folder.id)}
                     closeMenuOnClick={false}
-                    isActive={filters.serverFolderId.includes(folder.id)}
                     onClick={() => {
                       if (filters.serverFolderId.includes(folder.id)) {
                         setFilters({
@@ -279,7 +279,7 @@ export const AlbumListRoute = () => {
                 </DropdownMenu.Item>
                 <DropdownMenu.Divider />
                 <DropdownMenu.Item
-                  isActive={
+                  $isActive={
                     page.list.type === 'grid' &&
                     page.list.display === CardDisplayType.CARD
                   }
@@ -297,7 +297,7 @@ export const AlbumListRoute = () => {
                   Card
                 </DropdownMenu.Item>
                 <DropdownMenu.Item
-                  isActive={
+                  $isActive={
                     page.list.type === 'grid' &&
                     page.list.display === CardDisplayType.POSTER
                   }
@@ -316,7 +316,7 @@ export const AlbumListRoute = () => {
                 </DropdownMenu.Item>
                 <DropdownMenu.Item
                   disabled
-                  isActive={page.list.type === 'list'}
+                  $isActive={page.list.type === 'list'}
                   onClick={() =>
                     setPage('albums', {
                       ...page,
@@ -366,7 +366,7 @@ export const AlbumListRoute = () => {
                     }}
                   >
                     <Group>
-                      <Text noSelect>Advanced Filters</Text>
+                      <Text $noSelect>Advanced Filters</Text>
                       <NumberInput
                         disabled
                         min={1}

src/renderer/features/auth/routes/login-route.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import styled from '@emotion/styled';
 import {
   TextInput,
   PasswordInput,
@@ -14,6 +13,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
 import { RiCheckboxCircleFill } from 'react-icons/ri';
 import { useSearchParams } from 'react-router-dom';
+import styled from 'styled-components';
 import { useLogin } from '@/renderer/features/auth/queries/use-login';
 import { usePingServer } from '@/renderer/features/auth/queries/use-ping-server';
 import { normalizeServerUrl } from '@/renderer/utils';

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

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
 import format from 'format-duration';
 import isElectron from 'is-electron';
 import { IoIosPause } from 'react-icons/io';
@@ -10,6 +9,7 @@ import {
   RiSkipBackFill,
   RiSkipForwardFill,
 } from 'react-icons/ri';
+import styled from 'styled-components';
 import { Text } from '@/renderer/components';
 import { usePlayerStore } from '@/renderer/store';
 import { Font } from '@/renderer/styles';
@@ -137,7 +137,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
       </ControlsContainer>
       <SliderContainer>
         <SliderValueWrapper position="left">
-          <Text noSelect secondary font={Font.POPPINS} size="xs" weight={600}>
+          <Text $noSelect $secondary font={Font.POPPINS} size="xs" weight={600}>
             {formattedTime}
           </Text>
         </SliderValueWrapper>
@@ -155,7 +155,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
           />
         </SliderWrapper>
         <SliderValueWrapper position="right">
-          <Text noSelect secondary font={Font.POPPINS} size="xs" weight={600}>
+          <Text $noSelect $secondary font={Font.POPPINS} size="xs" weight={600}>
             {duration}
           </Text>
         </SliderValueWrapper>

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

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled';
 import { Center, Group } from '@mantine/core';
 import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
 import { RiArrowUpSLine, RiDiscLine } from 'react-icons/ri';
 import { generatePath, Link } from 'react-router-dom';
+import styled from 'styled-components';
 import { Button, Text } from '@/renderer/components';
 import { AppRoute } from '@/renderer/router/routes';
 import { useAppStore, usePlayerStore } from '@/renderer/store';
@@ -56,17 +56,17 @@ const PlayerbarImage = styled.img`
   background-size: cover;
 `;
 
-const LineItem = styled.div<{ secondary?: boolean }>`
+const LineItem = styled.div<{ $secondary?: boolean }>`
   display: inline-block;
   width: 95%;
   max-width: 30vw;
   overflow: hidden;
-  color: ${(props) => props.secondary && 'var(--main-fg-secondary)'};
+  color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
   white-space: nowrap;
   text-overflow: ellipsis;
 
   a {
-    color: ${(props) => props.secondary && 'var(--text-secondary)'};
+    color: ${(props) => props.$secondary && 'var(--text-secondary)'};
   }
 `;
 
@@ -129,7 +129,7 @@ export const LeftControls = () => {
         <MetadataStack layout>
           <LineItem>
             <Text
-              link
+              $link
               component={Link}
               overflow="hidden"
               size="sm"
@@ -140,16 +140,16 @@ export const LeftControls = () => {
               {title || '—'}
             </Text>
           </LineItem>
-          <LineItem secondary>
+          <LineItem $secondary>
             {artists?.map((artist, index) => (
               <>
                 {index > 0 && (
-                  <Text secondary style={{ display: 'inline-block' }}>
+                  <Text $secondary style={{ display: 'inline-block' }}>
                     ,
                   </Text>
                 )}{' '}
                 <Text
-                  link
+                  $link
                   component={Link}
                   overflow="hidden"
                   size="sm"
@@ -167,9 +167,9 @@ export const LeftControls = () => {
               </>
             ))}
           </LineItem>
-          <LineItem secondary>
+          <LineItem $secondary>
             <Text
-              link
+              $link
               component={Link}
               overflow="hidden"
               size="sm"

src/renderer/features/player/components/player-button.tsx

@@ -1,13 +1,12 @@
 /* stylelint-disable no-descending-specificity */
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
 import {
   TooltipProps,
   UnstyledButton,
   UnstyledButtonProps,
 } from '@mantine/core';
 import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
 import { Tooltip } from '@/renderer/components';
 
 type MantineButtonProps = UnstyledButtonProps &

src/renderer/features/player/components/playerbar.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
-import styled from '@emotion/styled';
 import isElectron from 'is-electron';
+import styled from 'styled-components';
 import { PlaybackType } from '@/renderer/types';
 import { AudioPlayer } from '../../../components';
 import { usePlayerStore } from '../../../store';

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

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled';
 import { Group } from '@mantine/core';
 import {
   RiVolumeUpFill,
   RiVolumeMuteFill,
   RiPlayListFill,
 } from 'react-icons/ri';
+import styled from 'styled-components';
 import { usePlayerStore, useAppStore } from '@/renderer/store';
 import { useRightControls } from '../hooks/use-right-controls';
 import { PlayerButton } from './player-button';

src/renderer/features/player/components/slider.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
-import styled from '@emotion/styled';
 import format from 'format-duration';
 import ReactSlider, { ReactSliderProps } from 'react-slider';
+import styled from 'styled-components';
 
 interface SliderProps extends ReactSliderProps {
   hasTooltip?: boolean;

src/renderer/features/servers/components/server-section.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 import { Text } from '@/renderer/components';
 import { Font } from '@/renderer/styles';
 

src/renderer/features/shared/components/animated-page.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 import { motion } from 'framer-motion';
 
 interface AnimatedPageProps {

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

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
 import { Link, LinkProps } from 'react-router-dom';
+import styled, { css } from 'styled-components';
 
 interface ListItemProps {
   children: ReactNode;

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

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { Stack, Group, Grid, Accordion, Center } from '@mantine/core';
 import { SpotlightProvider } from '@mantine/spotlight';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -18,6 +17,7 @@ import {
   RiUserVoiceLine,
 } from 'react-icons/ri';
 import { useNavigate, Link } from 'react-router-dom';
+import styled from 'styled-components';
 import { Button, TextInput } from '@/renderer/components';
 import { AppRoute } from '@/renderer/router/routes';
 import { useAppStore, usePlayerStore } from '@/renderer/store';

src/renderer/features/titlebar/components/activity-menu.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
 import { Group } from '@mantine/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { FiActivity } from 'react-icons/fi';
 import { RiRefreshLine } from 'react-icons/ri';
+import styled from 'styled-components';
 import { socket } from '@/renderer/api';
 import { queryKeys } from '@/renderer/api/query-keys';
 import { Button, Popover, Text } from '@/renderer/components';

src/renderer/features/titlebar/components/app-menu.tsx

@@ -10,6 +10,7 @@ import {
   ServerList,
   useServerList,
 } from '@/renderer/features/servers';
+import { Settings } from '@/renderer/features/settings';
 import { usePermissions } from '@/renderer/features/shared';
 import { useAuthStore } from '@/renderer/store';
 
@@ -51,6 +52,15 @@ export const AppMenu = () => {
     });
   };
 
+  const handleSettingsModal = () => {
+    openModal({
+      centered: true,
+      children: <Settings />,
+      size: 'xl',
+      title: 'Settings',
+    });
+  };
+
   const handleSetCurrentServer = (serverId: string) => {
     const server = servers?.data.find((s) => s.id === serverId);
     if (!server) return;
@@ -80,8 +90,8 @@ export const AppMenu = () => {
           return (
             <DropdownMenu.Item
               key={`server-${s.id}`}
+              $isActive={s.id === currentServer?.id}
               disabled={requiresCredential}
-              isActive={s.id === currentServer?.id}
               onClick={() => handleSetCurrentServer(s.id)}
             >
               <Group>
@@ -95,7 +105,9 @@ export const AppMenu = () => {
         })}
         <DropdownMenu.Divider />
         <DropdownMenu.Item disabled>Search</DropdownMenu.Item>
-        <DropdownMenu.Item>Settings</DropdownMenu.Item>
+        <DropdownMenu.Item onClick={handleSettingsModal}>
+          Settings
+        </DropdownMenu.Item>
         <DropdownMenu.Divider />
         {permissions.createServer && (
           <DropdownMenu.Item onClick={handleAddServerModal}>

src/renderer/features/titlebar/components/titlebar.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
 import { Group } from '@mantine/core';
+import styled from 'styled-components';
 import { Text } from '@/renderer/components';
 import { ActivityMenu } from '@/renderer/features/titlebar/components/activity-menu';
 import { AppMenu } from '@/renderer/features/titlebar/components/app-menu';

src/renderer/features/window-controls/components/window-controls.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import styled from '@emotion/styled';
 import isElectron from 'is-electron';
 import {
   RiCheckboxBlankLine,
   RiCloseLine,
   RiSubtractLine,
 } from 'react-icons/ri';
+import styled from 'styled-components';
 
 interface WindowControlsProps {
   style?: 'macos' | 'windows' | 'linux';