Replace @emotion/styled with styled-components

package.json

@@ -165,16 +165,17 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
     "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.182",
+    "@types/lodash": "^4.14.188",
     "@types/md5": "^2.3.2",
     "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
+    "@types/react": "^18.0.25",
-    "@types/react-dom": "^17.0.14",
+    "@types/react-dom": "^18.0.8",
     "@types/react-slider": "^1.3.1",
     "@types/react-test-renderer": "^17.0.1",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",
+    "@types/styled-components": "^5.1.26",
     "@types/terser-webpack-plugin": "^5.0.4",
     "@types/webpack-bundle-analyzer": "^4.4.1",
     "@types/webpack-env": "^1.16.3",
@@ -247,24 +248,21 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.0.5",
-    "@dnd-kit/modifiers": "^6.0.0",
     "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
     "@jellyfin/client-axios": "^10.7.8",
-    "@mantine/core": "^5.6.0",
+    "@mantine/core": "^5.7.1",
-    "@mantine/dates": "^5.6.0",
+    "@mantine/dates": "^5.7.1",
-    "@mantine/form": "^5.6.0",
+    "@mantine/form": "^5.7.1",
-    "@mantine/hooks": "^5.6.0",
+    "@mantine/hooks": "^5.7.1",
-    "@mantine/modals": "^5.6.0",
+    "@mantine/modals": "^5.7.1",
-    "@mantine/notifications": "^5.6.0",
+    "@mantine/notifications": "^5.7.1",
-    "@mantine/spotlight": "^5.6.0",
+    "@mantine/spotlight": "^5.7.1",
-    "@tanstack/react-query": "^4.12.0",
+    "@tanstack/react-query": "^4.14.3",
-    "@tanstack/react-query-devtools": "^4.13.7",
+    "@tanstack/react-query-devtools": "^4.14.3",
-    "ag-grid-community": "^28.0.2",
+    "ag-grid-community": "^28.2.1",
-    "ag-grid-react": "^28.0.0",
+    "ag-grid-react": "^28.2.1",
     "axios": "^0.26.1",
-    "dayjs": "^1.11.5",
+    "dayjs": "^1.11.6",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.6",
     "electron-store": "^8.1.0",
@@ -288,11 +286,11 @@
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-slider": "^2.0.0",
-    "react-spaces": "^0.3.4",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.7",
     "react-window-infinite-loader": "^1.0.8",
     "socket.io-client": "^4.5.3",
+    "styled-components": "^5.3.6",
     "zod": "^3.19.1",
     "zustand": "^4.0.0-rc.1"
   },

src/renderer/components/button/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef, Ref } from 'react';
-import styled from '@emotion/styled';
 import {
   Button as MantineButton,
   ButtonProps as MantineButtonProps,
   createPolymorphicComponent,
   TooltipProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 import { Tooltip } from '@/renderer/components/tooltip';
 
 interface ButtonProps extends MantineButtonProps {

src/renderer/components/date-picker/index.tsx

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled';
 import {
   DatePicker as MantineDatePicker,
   DatePickerProps as MantineDatePickerProps,
 } from '@mantine/dates';
+import styled from 'styled-components';
 
 interface DatePickerProps extends MantineDatePickerProps {
   maxWidth?: number | string;

src/renderer/components/dropdown-menu/index.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import {
   Menu as MantineMenu,
   MenuProps as MantineMenuProps,
@@ -9,12 +8,13 @@ import {
   createPolymorphicComponent,
 } from '@mantine/core';
 import { RiArrowLeftLine } from 'react-icons/ri';
+import styled from 'styled-components';
 
 type MenuProps = MantineMenuProps;
 type MenuLabelProps = MantineMenuLabelProps;
 interface MenuItemProps extends MantineMenuItemProps {
+  $isActive?: boolean;
   children: React.ReactNode;
-  isActive?: boolean;
 }
 type MenuDividerProps = MantineMenuDividerProps;
 type MenuDropdownProps = MantineMenuDropdownProps;
@@ -40,7 +40,7 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
   }
 
   & .mantine-Menu-itemLabel {
-    color: ${({ isActive }) => isActive && 'var(--primary-color)'};
+    color: ${({ $isActive }) => $isActive && 'var(--primary-color)'};
     font-weight: 500;
     font-size: 1em;
   }
@@ -70,12 +70,12 @@ const MenuLabel = ({ children, ...props }: MenuLabelProps) => {
   return <StyledMenuLabel {...props}>{children}</StyledMenuLabel>;
 };
 
-const pMenuItem = ({ isActive, children, ...props }: MenuItemProps) => {
+const pMenuItem = ({ $isActive, children, ...props }: MenuItemProps) => {
   return (
     <StyledMenuItem
-      isActive={isActive && isActive}
+      $isActive={$isActive}
       rightSection={
-        isActive && <RiArrowLeftLine color="var(--primary-color)" />
+        $isActive && <RiArrowLeftLine color="var(--primary-color)" />
       }
       {...props}
     >

src/renderer/components/input/index.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import styled from '@emotion/styled';
 import {
   TextInput as MantineTextInput,
   TextInputProps as MantineTextInputProps,
@@ -10,6 +9,7 @@ import {
   FileInput as MantineFileInput,
   FileInputProps as MantineFileInputProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 
 interface TextInputProps extends MantineTextInputProps {
   children?: React.ReactNode;

src/renderer/components/paper/index.tsx

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled';
 import {
   Paper as MantinePaper,
   PaperProps as MantinePaperProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 
 export interface PaperProps extends MantinePaperProps {
   children: React.ReactNode;

src/renderer/components/popover/index.tsx

@@ -1,9 +1,9 @@
-import styled from '@emotion/styled';
 import {
   Popover as MantinePopover,
   PopoverProps as MantinePopoverProps,
   PopoverDropdownProps as MantinePopoverDropdownProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 
 type PopoverProps = MantinePopoverProps;
 type PopoverDropdownProps = MantinePopoverDropdownProps;

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

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled';
 import {
   ScrollArea as MantineScrollArea,
   ScrollAreaProps as MantineScrollAreaProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 
 interface ScrollAreaProps extends MantineScrollAreaProps {
   children: React.ReactNode;

src/renderer/components/segmented-control/index.tsx

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
-import styled from '@emotion/styled';
 import {
   SegmentedControl as MantineSegmentedControl,
   SegmentedControlProps as MantineSegmentedControlProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 
 type SegmentedControlProps = MantineSegmentedControlProps;
 

src/renderer/components/select/index.tsx

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled';
 import {
   Select as MantineSelect,
   SelectProps as MantineSelectProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 
 interface SelectProps extends MantineSelectProps {
   maxWidth?: number | string;

src/renderer/components/switch/index.tsx

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled';
 import {
   Switch as MantineSwitch,
   SwitchProps as MantineSwitchProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 
 type SwitchProps = MantineSwitchProps;
 

src/renderer/components/text/index.tsx

@@ -1,34 +1,34 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import styled from '@emotion/styled';
 import {
   createPolymorphicComponent,
   Text as MantineText,
   TextProps as MantineTextProps,
 } from '@mantine/core';
+import styled from 'styled-components';
 import { Font, textEllipsis } from '@/renderer/styles';
 
 type MantineTextDivProps = MantineTextProps & ComponentPropsWithoutRef<'div'>;
 
 interface TextProps extends MantineTextDivProps {
+  $link?: boolean;
+  $noSelect?: boolean;
+  $secondary?: boolean;
   children: ReactNode;
   font?: Font;
-  link?: boolean;
-  noSelect?: boolean;
   overflow?: 'hidden' | 'visible';
-  secondary?: boolean;
   to?: string;
   weight?: number;
 }
 
-const BaseText = styled(MantineText)<any>`
+const BaseText = styled(MantineText)<TextProps>`
   color: ${(props) =>
-    props.secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
+    props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
   font-family: ${(props) => props.font};
-  user-select: ${(props) => (props.noSelect ? 'none' : 'auto')};
+  user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
   ${(props) => props.overflow === 'hidden' && textEllipsis}
 
   &:hover {
-    text-decoration: ${(props) => (props.link ? 'underline' : 'none')};
+    text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
   }
 `;
 
@@ -36,18 +36,18 @@ const StyledText = styled(BaseText)<TextProps>``;
 
 export const _Text = ({
   children,
-  secondary,
+  $secondary,
   overflow,
   font,
-  noSelect,
+  $noSelect,
   ...rest
 }: TextProps) => {
   return (
     <StyledText
+      $noSelect={$noSelect}
+      $secondary={$secondary}
       font={font}
-      noSelect={noSelect && noSelect}
       overflow={overflow}
-      secondary={secondary && secondary}
       {...rest}
     >
       {children}
@@ -58,11 +58,11 @@ export const _Text = ({
 export const Text = createPolymorphicComponent<'div', TextProps>(_Text);
 
 _Text.defaultProps = {
+  $link: false,
+  $noSelect: false,
+  $secondary: false,
   font: undefined,
-  link: false,
-  noSelect: false,
   overflow: 'visible',
-  secondary: false,
   to: '',
   weight: 500,
 };

src/renderer/components/tooltip/index.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled';
 import { Tooltip as MantineTooltip, TooltipProps } from '@mantine/core';
+import styled from 'styled-components';
 
 const StyledTooltip = styled(MantineTooltip)`
   & .mantine-Tooltip-tooltip {

src/renderer/components/virtual-grid/grid-card/default-card.tsx

@@ -117,14 +117,14 @@ const DetailSection = styled.div`
   flex-direction: column;
 `;
 
-const Row = styled.div<{ secondary?: boolean }>`
+const Row = styled.div<{ $secondary?: boolean }>`
   width: 100%;
   max-width: 100%;
   height: 25px;
   padding: 0 0.2rem;
   overflow: hidden;
-  color: ${({ secondary }) =>
+  color: ${({ $secondary }) =>
-    secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
+    $secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
@@ -216,7 +216,7 @@ export const DefaultCard = ({
                   return (
                     <Row
                       key={`row-${row.property}-${columnIndex}`}
-                      secondary={index > 0}
+                      $secondary={index > 0}
                     >
                       {data[row.property].map(
                         (item: any, itemIndex: number) => (
@@ -345,7 +345,7 @@ export const DefaultCard = ({
                 return (
                   <Row
                     key={`row-${row.property}-${columnIndex}`}
-                    secondary={index > 0}
+                    $secondary={index > 0}
                   >
                     {data[row.property].map((item: any, itemIndex: number) => (
                       <React.Fragment key={`${data.id}-${item.id}`}>

src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx

@@ -1,5 +1,4 @@
 import React, { MouseEvent } from 'react';
-import styled from '@emotion/styled';
 import { Group, UnstyledButtonProps } from '@mantine/core';
 import { motion } from 'framer-motion';
 import {
@@ -8,6 +7,7 @@ import {
   RiHeartFill,
   RiHeartLine,
 } from 'react-icons/ri';
+import styled from 'styled-components';
 import { Button } from '@/renderer/components/button';
 import { DropdownMenu } from '@/renderer/components/dropdown-menu';
 import { Play } from '@/renderer/types';

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -112,14 +112,14 @@ const DetailSection = styled.div`
   flex-direction: column;
 `;
 
-const Row = styled.div<{ secondary?: boolean }>`
+const Row = styled.div<{ $secondary?: boolean }>`
   width: 100%;
   max-width: 100%;
   height: 25px;
   padding: 0 0.2rem;
   overflow: hidden;
-  color: ${({ secondary }) =>
+  color: ${({ $secondary }) =>
-    secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
+    $secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
@@ -235,7 +235,7 @@ export const PosterCard = ({
                 return (
                   <Row
                     key={`row-${row.property}-${columnIndex}`}
-                    secondary={index > 0}
+                    $secondary={index > 0}
                   >
                     {data[row.property].map((item: any, itemIndex: number) => (
                       <React.Fragment key={`${data.id}-${item.id}`}>

src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx

@@ -1,6 +1,6 @@
 import { Ref, useMemo } from 'react';
-import styled from '@emotion/styled';
 import { FixedSizeList, FixedSizeListProps } from 'react-window';
+import styled from 'styled-components';
 import { GridCard } from '@/renderer/components/virtual-grid/grid-card';
 import { usePlayQueueHandler } from '@/renderer/features/player/hooks/use-playqueue-handler';
 import {

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';

src/renderer/layouts/auth-layout.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled';
 import { Outlet } from 'react-router-dom';
+import styled from 'styled-components';
 import { Titlebar } from '@/renderer/features/titlebar/components/titlebar';
 
 const WindowsTitlebarContainer = styled.div`

src/renderer/layouts/default-layout.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { Outlet } from 'react-router';
+import styled from 'styled-components';
 import { SideQueue } from '@/renderer/features/side-queue/components/side-queue';
 import { Titlebar } from '@/renderer/features/titlebar/components/titlebar';
 import { useAppStore } from '@/renderer/store';

src/renderer/styles/fonts.ts

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css } from 'styled-components';
 
 export enum Font {
   EPILOGUE = 'Epilogue',

src/renderer/styles/mixins.ts

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import { css } from 'styled-components';
 
 export const textEllipsis = css`
   overflow: hidden;