vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Replace @emotion/styled with styled-components

Browse Source
This commit is contained in:
jeffvli
2022-11-06 01:53:31 -08:00
parent de91f75203
commit 6ac949bf88
38 changed files with 519 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+408 -315
View File
File diff suppressed because it is too large Load Diff
package.json
+17 -19
View File
@@ -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-dom": "^17.0.14",
"@types/react": "^18.0.25",
"@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/dates": "^5.6.0",
"@mantine/form": "^5.6.0",
"@mantine/hooks": "^5.6.0",
"@mantine/modals": "^5.6.0",
"@mantine/notifications": "^5.6.0",
"@mantine/spotlight": "^5.6.0",
"@tanstack/react-query": "^4.12.0",
"@tanstack/react-query-devtools": "^4.13.7",
"ag-grid-community": "^28.0.2",
"ag-grid-react": "^28.0.0",
"@mantine/core": "^5.7.1",
"@mantine/dates": "^5.7.1",
"@mantine/form": "^5.7.1",
"@mantine/hooks": "^5.7.1",
"@mantine/modals": "^5.7.1",
"@mantine/notifications": "^5.7.1",
"@mantine/spotlight": "^5.7.1",
"@tanstack/react-query": "^4.14.3",
"@tanstack/react-query-devtools": "^4.14.3",
"ag-grid-community": "^28.2.1",
"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 -1
View File
@@ -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 -1
View File
@@ -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
+6 -6
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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
+15 -15
View File
@@ -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 -1
View File
@@ -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
+5 -5
View File
@@ -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 }) =>
secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
color: ${({ $secondary }) =>
$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 -1
View File
@@ -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
+4 -4
View File
@@ -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 }) =>
secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
color: ${({ $secondary }) =>
$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 -1
View File
@@ -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
+9 -9
View File
@@ -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 -1
View File
@@ -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
+3 -3
View File
@@ -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
+10 -10
View File
@@ -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 -2
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -2
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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
+14 -2
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -1,4 +1,4 @@
import { css } from '@emotion/react';
import { css } from 'styled-components';
export const textEllipsis = css`
overflow: hidden;