From f3d05c0fefaa7447bee65807fb1c20d2388a8b8f Mon Sep 17 00:00:00 2001
From: mebtte <hi@mebtte.com>
Date: Mon, 14 Aug 2023 23:00:02 +0800
Subject: [PATCH] feat: improve component select

---
 apps/pwa/src/components/file_select.tsx       |   2 +-
 apps/pwa/src/components/input.tsx             |  36 +-
 apps/pwa/src/components/label.tsx             |  37 +-
 .../multiple_select/multiple_select.tsx       |   2 +-
 apps/pwa/src/components/select/constants.ts   |   7 +-
 apps/pwa/src/components/select/index.ts       |   4 +-
 apps/pwa/src/components/select/options.tsx    |  86 ---
 apps/pwa/src/components/select/select.tsx     | 158 ++---
 apps/pwa/src/components/select/style.scss     |  15 +
 apps/pwa/src/components/textarea.tsx          |  36 +-
 .../login/email_panel/setting_dialog.tsx      |  33 +-
 apps/pwa/src/pages/player/header/search.tsx   |   2 +-
 .../my_music/create_music_dialog/index.tsx    |  24 +-
 .../pages/player/pages/setting/language.tsx   |  25 +-
 apps/pwa/webpack/base.js                      |   4 +-
 package-lock.json                             | 550 ++++++++++++++++++
 package.json                                  |   3 +
 17 files changed, 701 insertions(+), 323 deletions(-)
 delete mode 100644 apps/pwa/src/components/select/options.tsx
 create mode 100644 apps/pwa/src/components/select/style.scss

diff --git a/apps/pwa/src/components/file_select.tsx b/apps/pwa/src/components/file_select.tsx
index 5caa780c..709e6b18 100644
--- a/apps/pwa/src/components/file_select.tsx
+++ b/apps/pwa/src/components/file_select.tsx
@@ -60,7 +60,7 @@ function FileSelect({
   });
 
   return (
-    <Label label={label} disabled={disabled}>
+    <Label label={label}>
       <Style onClick={onSelectFile} disabled={disabled}>
         {value ? value.name : placeholder}
       </Style>
diff --git a/apps/pwa/src/components/input.tsx b/apps/pwa/src/components/input.tsx
index 269fd9d7..4eb7b75e 100644
--- a/apps/pwa/src/components/input.tsx
+++ b/apps/pwa/src/components/input.tsx
@@ -1,5 +1,4 @@
 import {
-  FocusEventHandler,
   ForwardedRef,
   forwardRef,
   HtmlHTMLAttributes,
@@ -7,12 +6,10 @@ import {
   ReactNode,
   useImperativeHandle,
   useRef,
-  useState,
 } from 'react';
 import styled from 'styled-components';
 import { ComponentSize } from '../constants/style';
 import { CSSVariable } from '../global_style';
-import useEvent from '../utils/use_event';
 import Label from './label';
 
 const Input = styled.input`
@@ -42,7 +39,7 @@ const Input = styled.input`
 `;
 
 type Ref = {
-  root: HTMLDivElement;
+  root: HTMLLabelElement;
   input: HTMLInputElement;
 };
 type Props = {
@@ -50,46 +47,23 @@ type Props = {
   inputProps: InputHTMLAttributes<HTMLInputElement>;
   disabled?: boolean;
   addon?: ReactNode;
-} & HtmlHTMLAttributes<HTMLDivElement>;
+} & HtmlHTMLAttributes<HTMLLabelElement>;
 
 function Wrapper(
   { label, inputProps, disabled = false, addon, ...props }: Props,
   ref: ForwardedRef<Ref>,
 ) {
-  const rootRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLLabelElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const [active, setActive] = useState(false);
-  const onFocus: FocusEventHandler<HTMLInputElement> = useEvent((e) => {
-    setActive(true);
-    return inputProps.onFocus && inputProps.onFocus(e);
-  });
-  const onBlur: FocusEventHandler<HTMLInputElement> = useEvent((e) => {
-    setActive(false);
-    return inputProps.onBlur && inputProps.onBlur(e);
-  });
-
   useImperativeHandle(ref, () => ({
     root: rootRef.current!,
     input: inputRef.current!,
   }));
 
   return (
-    <Label
-      {...props}
-      ref={rootRef}
-      active={active}
-      disabled={disabled}
-      label={label}
-      addon={addon}
-    >
-      <Input
-        {...inputProps}
-        disabled={disabled}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        ref={inputRef}
-      />
+    <Label {...props} ref={rootRef} label={label} addon={addon}>
+      <Input {...inputProps} disabled={disabled} ref={inputRef} />
     </Label>
   );
 }
diff --git a/apps/pwa/src/components/label.tsx b/apps/pwa/src/components/label.tsx
index cc3bfa56..8a86f806 100644
--- a/apps/pwa/src/components/label.tsx
+++ b/apps/pwa/src/components/label.tsx
@@ -1,11 +1,9 @@
 import upperCaseFirstLetter from '@/style/capitalize';
 import { ForwardedRef, forwardRef, HtmlHTMLAttributes, ReactNode } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { CSSVariable } from '../global_style';
 
-const Style = styled.div<{ active: boolean; disabled: boolean }>`
-  transition: 300ms ease-in-out;
-
+const Style = styled.label`
   > .top {
     margin-bottom: 5px;
 
@@ -23,37 +21,40 @@ const Style = styled.div<{ active: boolean; disabled: boolean }>`
       flex: 1;
       min-width: 0;
 
+      color: ${CSSVariable.TEXT_COLOR_PRIMARY};
       font-size: 12px;
       transition: inherit;
       ${upperCaseFirstLetter}
     }
   }
 
-  ${({ active, disabled }) => css`
+  &:focus-within {
+    > .top {
+      > .label {
+        color: ${CSSVariable.COLOR_PRIMARY};
+      }
+    }
+  }
+
+  &:disabled {
     > .top {
       > .label {
-        color: ${disabled
-          ? CSSVariable.TEXT_COLOR_DISABLED
-          : active
-          ? CSSVariable.COLOR_PRIMARY
-          : CSSVariable.TEXT_COLOR_PRIMARY};
+        color: ${CSSVariable.TEXT_COLOR_DISABLED} !important;
       }
     }
-  `}
+  }
 `;
-type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+type Props = HtmlHTMLAttributes<HTMLLabelElement> & {
   label?: string;
-  disabled?: boolean;
-  active?: boolean;
   addon?: ReactNode;
 };
 
 function Label(
-  { label, active = false, disabled = false, addon, children, ...props }: Props,
-  ref: ForwardedRef<HTMLDivElement>,
+  { label, addon, children, ...props }: Props,
+  ref: ForwardedRef<HTMLLabelElement>,
 ) {
   return (
-    <Style {...props} active={active} disabled={disabled} ref={ref}>
+    <Style {...props} ref={ref}>
       <div className="top">
         {label ? <div className="label">{label}</div> : null}
         {addon}
@@ -63,4 +64,4 @@ function Label(
   );
 }
 
-export default forwardRef<HTMLDivElement, Props>(Label);
+export default forwardRef<HTMLLabelElement, Props>(Label);
diff --git a/apps/pwa/src/components/multiple_select/multiple_select.tsx b/apps/pwa/src/components/multiple_select/multiple_select.tsx
index e8401d91..de043db5 100644
--- a/apps/pwa/src/components/multiple_select/multiple_select.tsx
+++ b/apps/pwa/src/components/multiple_select/multiple_select.tsx
@@ -90,7 +90,7 @@ function MultipleSelect<Value>({
 
   const selectedKeys = value.map((i) => i.key);
   return (
-    <Label label={label} active={active} disabled={disabled} addon={addon}>
+    <Label label={label} addon={addon}>
       <Input active={active} disabled={disabled}>
         {value.map((option) => (
           <ValueItem
diff --git a/apps/pwa/src/components/select/constants.ts b/apps/pwa/src/components/select/constants.ts
index edf4c379..6cbe8c17 100644
--- a/apps/pwa/src/components/select/constants.ts
+++ b/apps/pwa/src/components/select/constants.ts
@@ -1,5 +1,4 @@
-export interface Option<Value> {
-  key: string | number;
-  label: string;
+export type Option<Value> = {
   value: Value;
-}
+  label: string;
+};
diff --git a/apps/pwa/src/components/select/index.ts b/apps/pwa/src/components/select/index.ts
index dff0512c..b8c7c7ee 100644
--- a/apps/pwa/src/components/select/index.ts
+++ b/apps/pwa/src/components/select/index.ts
@@ -1,5 +1,5 @@
 import Select from './select';
-import type { Option } from './constants';
 
-export { Option };
+export type { Option } from './constants';
+
 export default Select;
diff --git a/apps/pwa/src/components/select/options.tsx b/apps/pwa/src/components/select/options.tsx
deleted file mode 100644
index a570af11..00000000
--- a/apps/pwa/src/components/select/options.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import capitalize from '@/style/capitalize';
-import { animated, useTransition } from 'react-spring';
-import styled, { css } from 'styled-components';
-import { CSSVariable } from '../../global_style';
-import { Option as OptionType } from './constants';
-
-const Style = styled(animated.div)`
-  z-index: 1;
-
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  width: 100%;
-
-  transform-origin: top;
-  background-color: #fff;
-  box-shadow: rgb(0 0 0 / 20%) 0px 5px 5px -3px,
-    rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px;
-`;
-const Option = styled.div<{ active: boolean }>`
-  padding: 5px 10px;
-
-  cursor: pointer;
-  transition: 300ms;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-
-  &:active {
-    background-color: rgba(0, 0, 0, 0.15);
-  }
-
-  ${capitalize}
-
-  ${({ active }) => css`
-    color: ${active ? '#fff !important' : CSSVariable.TEXT_COLOR_PRIMARY};
-    background-color: ${active
-      ? `${CSSVariable.COLOR_PRIMARY} !important`
-      : 'transparent'};
-  `}
-`;
-
-function Options<Value>({
-  open,
-  data,
-  selected,
-  onChange,
-}: {
-  open: boolean;
-  data: OptionType<Value>[];
-  selected?: OptionType<Value>;
-  onChange: (option: OptionType<Value>) => void;
-}) {
-  const transitions = useTransition(open, {
-    from: {
-      opacity: 0,
-      transform: 'scaleY(0)',
-    },
-    enter: {
-      opacity: 1,
-      transform: 'scaleY(1)',
-    },
-    leave: {
-      opacity: 0,
-      transform: 'scaleY(0)',
-    },
-  });
-  return transitions((style, o) =>
-    o ? (
-      <Style style={style}>
-        {data.map((option) => (
-          <Option
-            key={option.key}
-            active={option.key === selected?.key}
-            onClick={() => onChange(option)}
-          >
-            {option.label}
-          </Option>
-        ))}
-      </Style>
-    ) : null,
-  );
-}
-
-export default Options;
diff --git a/apps/pwa/src/components/select/select.tsx b/apps/pwa/src/components/select/select.tsx
index abd4fd1d..4677d953 100644
--- a/apps/pwa/src/components/select/select.tsx
+++ b/apps/pwa/src/components/select/select.tsx
@@ -1,118 +1,68 @@
-import { HtmlHTMLAttributes, ReactNode, useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
-import capitalize from '@/style/capitalize';
-import { ComponentSize } from '../../constants/style';
-import { CSSVariable } from '../../global_style';
-import Label from '../label';
-import ellipsis from '../../style/ellipsis';
-import Options from './options';
+import { CSSVariable } from '@/global_style';
+import { ComponentProps, CSSProperties } from 'react';
+import Select from 'react-select';
 import { Option } from './constants';
-import useEvent from '../../utils/use_event';
+import './style.scss';
 
-const Style = styled.div`
-  position: relative;
+const classNames: ComponentProps<Select>['classNames'] = {
+  control: () => 'react-select-single-control',
+  option: () => 'react-select-single-option',
+};
 
-  transition: inherit;
-`;
-const Selected = styled.div<{ active: boolean; disabled: boolean }>`
-  height: ${ComponentSize.NORMAL}px;
-  padding: 0 10px;
-
-  display: flex;
-  align-items: center;
-
-  border-width: 1px;
-  border-style: solid;
-  color: ${CSSVariable.TEXT_COLOR_PRIMARY};
-  outline: none;
-  transition: inherit;
-
-  > .label {
-    flex: 1;
-    min-height: 0;
-
-    font-size: 14px;
-    ${ellipsis}
-    ${capitalize}
-  }
-
-  ${({ active, disabled }) => css`
-    border-color: ${disabled
-      ? CSSVariable.TEXT_COLOR_DISABLED
-      : active
-      ? CSSVariable.COLOR_PRIMARY
-      : CSSVariable.COLOR_BORDER};
-    cursor: ${disabled ? 'not-allowed' : 'poiter'};
-    color: ${disabled
-      ? CSSVariable.TEXT_COLOR_SECONDARY
-      : CSSVariable.TEXT_COLOR_PRIMARY};
-    background-color: ${disabled
-      ? CSSVariable.BACKGROUND_DISABLED
-      : 'transparent'};
-  `}
-`;
-
-function Select<Value>({
-  addon,
-  label,
-  data,
+function Wrapper<Value>({
   value,
+  options,
   onChange,
-  placeholder = '',
   disabled = false,
-  ...props
-}: Omit<HtmlHTMLAttributes<HTMLDivElement>, 'onChange'> & {
-  addon?: ReactNode;
-  label: string;
-  data: Option<Value>[];
+  style,
+  menuPortalTarget,
+}: {
   value: Option<Value>;
+  options: Option<Value>[];
   onChange: (option: Option<Value>) => void;
-  placeholder?: string;
   disabled?: boolean;
+  style?: CSSProperties;
+  menuPortalTarget?: HTMLElement;
 }) {
-  const [open, setOpen] = useState(false);
-  const onOpen = useEvent(() => {
-    if (disabled) {
-      return;
-    }
-    return setOpen(true);
-  });
-
-  useEffect(() => {
-    if (open) {
-      const onClose = () => setOpen(false);
-      document.addEventListener('click', onClose, { capture: true });
-      return () =>
-        document.removeEventListener('click', onClose, { capture: true });
-    }
-  }, [open]);
-
-  const selected = value
-    ? data.find((option) => option.key === value.key)
-    : undefined;
   return (
-    <Label
-      disabled={disabled}
-      label={label}
-      active={open}
-      addon={addon}
-      {...props}
-    >
-      <Style>
-        <Selected active={open} disabled={disabled} onClick={onOpen}>
-          <div className="label">{selected ? selected.label : placeholder}</div>
-          {open ? <MdKeyboardArrowUp /> : <MdKeyboardArrowDown />}
-        </Selected>
-        <Options<Value>
-          open={open}
-          data={data}
-          selected={selected}
-          onChange={onChange}
-        />
-      </Style>
-    </Label>
+    <Select
+      isSearchable={false}
+      isDisabled={disabled}
+      value={value}
+      options={options}
+      onChange={onChange}
+      menuPortalTarget={menuPortalTarget}
+      classNames={classNames}
+      styles={{
+        container: (baseStyles) => ({
+          ...baseStyles,
+          ...style,
+        }),
+        control: (baseStyles, { menuIsOpen, isFocused }) => ({
+          ...baseStyles,
+          color: CSSVariable.TEXT_COLOR_PRIMARY,
+          borderColor:
+            menuIsOpen || isFocused
+              ? `${CSSVariable.COLOR_PRIMARY} !important`
+              : `${CSSVariable.COLOR_BORDER} !important`,
+        }),
+        menu: (baseStyles) => ({
+          ...baseStyles,
+          fontSize: 14,
+          borderRadius: 0,
+        }),
+        option: (baseStyles, { isSelected, isFocused }) => ({
+          ...baseStyles,
+          color: isSelected ? '#fff' : CSSVariable.TEXT_COLOR_PRIMARY,
+          background: isSelected
+            ? CSSVariable.COLOR_PRIMARY
+            : isFocused
+            ? CSSVariable.BACKGROUND_COLOR_LEVEL_ONE
+            : '#fff',
+        }),
+      }}
+    />
   );
 }
 
-export default Select;
+export default Wrapper;
diff --git a/apps/pwa/src/components/select/style.scss b/apps/pwa/src/components/select/style.scss
new file mode 100644
index 00000000..abacfc7d
--- /dev/null
+++ b/apps/pwa/src/components/select/style.scss
@@ -0,0 +1,15 @@
+.react-select-single-control {
+  font-size: 14px;
+  border-radius: 0 !important;
+  cursor: pointer !important;
+  min-height: initial !important;
+  box-shadow: none !important;
+}
+
+.react-select-single-option {
+  cursor: pointer !important;
+
+  &:active {
+    background: initial !important;
+  }
+}
diff --git a/apps/pwa/src/components/textarea.tsx b/apps/pwa/src/components/textarea.tsx
index 2cdab721..31629ad2 100644
--- a/apps/pwa/src/components/textarea.tsx
+++ b/apps/pwa/src/components/textarea.tsx
@@ -1,5 +1,4 @@
 import {
-  FocusEventHandler,
   ForwardedRef,
   forwardRef,
   HtmlHTMLAttributes,
@@ -7,11 +6,9 @@ import {
   TextareaHTMLAttributes,
   useImperativeHandle,
   useRef,
-  useState,
 } from 'react';
 import styled from 'styled-components';
 import { CSSVariable } from '../global_style';
-import useEvent from '../utils/use_event';
 import Label from './label';
 
 const Textarea = styled.textarea`
@@ -40,7 +37,7 @@ const Textarea = styled.textarea`
 `;
 
 type Ref = {
-  root: HTMLDivElement;
+  root: HTMLLabelElement;
   textarea: HTMLTextAreaElement;
 };
 type Props = {
@@ -48,46 +45,23 @@ type Props = {
   textareaProps: TextareaHTMLAttributes<HTMLTextAreaElement>;
   disabled?: boolean;
   addon?: ReactNode;
-} & HtmlHTMLAttributes<HTMLDivElement>;
+} & HtmlHTMLAttributes<HTMLLabelElement>;
 
 function Wrapper(
   { label, textareaProps, disabled = false, addon, ...props }: Props,
   ref: ForwardedRef<Ref>,
 ) {
-  const rootRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLLabelElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const [active, setActive] = useState(false);
-  const onFocus: FocusEventHandler<HTMLTextAreaElement> = useEvent((e) => {
-    setActive(true);
-    return textareaProps.onFocus && textareaProps.onFocus(e);
-  });
-  const onBlur: FocusEventHandler<HTMLTextAreaElement> = useEvent((e) => {
-    setActive(false);
-    return textareaProps.onBlur && textareaProps.onBlur(e);
-  });
-
   useImperativeHandle(ref, () => ({
     root: rootRef.current!,
     textarea: textareaRef.current!,
   }));
 
   return (
-    <Label
-      {...props}
-      ref={rootRef}
-      active={active}
-      disabled={disabled}
-      label={label}
-      addon={addon}
-    >
-      <Textarea
-        {...textareaProps}
-        disabled={disabled}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        ref={textareaRef}
-      />
+    <Label {...props} ref={rootRef} label={label} addon={addon}>
+      <Textarea {...textareaProps} disabled={disabled} ref={textareaRef} />
     </Label>
   );
 }
diff --git a/apps/pwa/src/pages/login/email_panel/setting_dialog.tsx b/apps/pwa/src/pages/login/email_panel/setting_dialog.tsx
index 3f321e2e..c7102160 100644
--- a/apps/pwa/src/pages/login/email_panel/setting_dialog.tsx
+++ b/apps/pwa/src/pages/login/email_panel/setting_dialog.tsx
@@ -1,7 +1,8 @@
 import Dialog, { Container, Title, Content, Action } from '@/components/dialog';
 import Button, { Variant } from '@/components/button';
 import Input from '@/components/input';
-import Select from '@/components/select';
+import Label from '@/components/label';
+import Select, { Option } from '@/components/select';
 import s from '@/global_states/setting';
 import { useState } from 'react';
 import useEvent from '@/utils/use_event';
@@ -17,6 +18,11 @@ const StyledContent = styled(Content)`
   flex-direction: column;
   gap: 20px;
 `;
+const languageOptions: Option<Language>[] = LANGUAGES.map((l) => ({
+  key: l,
+  label: LANGUAGE_MAP[l].label,
+  value: l,
+}));
 
 function SettingDialog({
   open,
@@ -46,20 +52,17 @@ function SettingDialog({
       <Container>
         <Title>{t('setting')}</Title>
         <StyledContent>
-          <Select<Language>
-            label={t('language')}
-            value={{
-              key: language,
-              label: LANGUAGE_MAP[language].label,
-              value: language,
-            }}
-            onChange={(v) => setLanguage(v.value)}
-            data={LANGUAGES.map((l) => ({
-              key: l,
-              label: LANGUAGE_MAP[l].label,
-              value: l,
-            }))}
-          />
+          <Label label={t('language')}>
+            <Select<Language>
+              value={{
+                label: LANGUAGE_MAP[language].label,
+                value: language,
+              }}
+              onChange={(option) => setLanguage(option.value)}
+              options={languageOptions}
+              menuPortalTarget={document.body}
+            />
+          </Label>
           <Input
             label={t('server_origin')}
             inputProps={{
diff --git a/apps/pwa/src/pages/player/header/search.tsx b/apps/pwa/src/pages/player/header/search.tsx
index 643b2f9c..d6a5bfab 100644
--- a/apps/pwa/src/pages/player/header/search.tsx
+++ b/apps/pwa/src/pages/player/header/search.tsx
@@ -29,7 +29,7 @@ function Wrapper() {
   const location = useLocation();
   const { miniMode } = theme.useState();
 
-  const ref = useRef<{ root: HTMLDivElement; input: HTMLInputElement }>(null);
+  const ref = useRef<{ root: HTMLLabelElement; input: HTMLInputElement }>(null);
 
   const [keyword, setKeyword] = useState(
     () => parseSearch<Query.KEYWORD>(location.search)[Query.KEYWORD] || '',
diff --git a/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx b/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx
index 02e61c15..2e2e6926 100644
--- a/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx
+++ b/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx
@@ -9,6 +9,7 @@ import styled from 'styled-components';
 import Dialog, { Container, Title, Content, Action } from '@/components/dialog';
 import Button, { Variant } from '@/components/button';
 import Input from '@/components/input';
+import Label from '@/components/label';
 import Select, { Option as SelectOption } from '@/components/select';
 import {
   AllowUpdateKey,
@@ -45,7 +46,6 @@ const maskProps: { style: CSSProperties } = {
   style: { zIndex: ZIndex.DIALOG },
 };
 const MUSIC_TYPE_OPTIONS: SelectOption<MusicType>[] = MUSIC_TYPES.map((t) => ({
-  key: t,
   label: MUSIC_TYPE_MAP[t].label,
   value: t,
 }));
@@ -204,17 +204,17 @@ function CreateMusicDialog() {
       <Container>
         <Title>创建音乐</Title>
         <StyledContent>
-          <Select<MusicType>
-            label="类型"
-            data={MUSIC_TYPE_OPTIONS}
-            value={{
-              key: musicType,
-              label: MUSIC_TYPE_MAP[musicType].label,
-              value: musicType,
-            }}
-            onChange={onMusicTypeChange}
-            disabled={loading}
-          />
+          <Label label="类型">
+            <Select<MusicType>
+              value={{
+                label: MUSIC_TYPE_MAP[musicType].label,
+                value: musicType,
+              }}
+              onChange={onMusicTypeChange}
+              options={MUSIC_TYPE_OPTIONS}
+              disabled={loading}
+            />
+          </Label>
           <FileSelect
             label="标准音质文件"
             value={sq}
diff --git a/apps/pwa/src/pages/player/pages/setting/language.tsx b/apps/pwa/src/pages/player/pages/setting/language.tsx
index efe7b8cc..194f5e37 100644
--- a/apps/pwa/src/pages/player/pages/setting/language.tsx
+++ b/apps/pwa/src/pages/player/pages/setting/language.tsx
@@ -1,6 +1,6 @@
 import { memo, CSSProperties } from 'react';
 import setting from '@/global_states/setting';
-import Select from '@/components/select';
+import Select, { Option } from '@/components/select';
 import { LANGUAGE_MAP, t } from '@/i18n';
 import { Language } from '#/constants';
 import dialog from '@/utils/dialog';
@@ -11,37 +11,32 @@ const LANGUAGES = Object.values(Language);
 const style: CSSProperties = {
   width: 200,
 };
+const options: Option<Language>[] = LANGUAGES.map((l) => ({
+  label: LANGUAGE_MAP[l].label,
+  value: l,
+}));
 
 function Wrapper() {
   const { language } = setting.useState();
   return (
     <Item label={t('language')} style={itemStyle}>
       <Select<Language>
-        label=""
-        value={{
-          key: language,
-          label: LANGUAGE_MAP[language].label,
-          value: language,
-        }}
-        onChange={(v) => {
-          if (v.value !== language) {
+        value={{ value: language, label: LANGUAGE_MAP[language].label }}
+        onChange={(option) => {
+          if (option.value !== language) {
             dialog.confirm({
               content: t('change_language_question'),
               onConfirm: () => {
                 setting.set((prev) => ({
                   ...prev,
-                  language: v.value,
+                  language: option.value,
                 }));
                 window.setTimeout(() => window.location.reload(), 0);
               },
             });
           }
         }}
-        data={LANGUAGES.map((l) => ({
-          key: l,
-          label: LANGUAGE_MAP[l].label,
-          value: l,
-        }))}
+        options={options}
         style={style}
       />
     </Item>
diff --git a/apps/pwa/webpack/base.js b/apps/pwa/webpack/base.js
index 2b774b9b..06b7d5bf 100644
--- a/apps/pwa/webpack/base.js
+++ b/apps/pwa/webpack/base.js
@@ -67,8 +67,8 @@ const mainConfig = {
         exclude: [/node_modules/],
       },
       {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        test: /\.s?css$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
       },
       {
         test: /\.(jpe?g|png|svg|gif)$/,
diff --git a/package-lock.json b/package-lock.json
index dc7e3e5c..e05e8f57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -124,10 +124,13 @@
         "react-list": "^0.8.17",
         "react-lrc": "^3.0.2",
         "react-router-dom": "^6.3.0",
+        "react-select": "^5.7.4",
         "react-slider": "^1.1.4",
         "react-sortable-hoc": "^2.0.0",
         "react-spring": "^9.7.1",
         "rimraf": "^3.0.2",
+        "sass": "^1.65.1",
+        "sass-loader": "^13.3.2",
         "style-loader": "^3.3.1",
         "styled-components": "^5.3.5",
         "ts-jest": "^28.0.7",
@@ -2232,6 +2235,65 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==",
+      "dev": true
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@@ -2247,6 +2309,55 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
       "dev": true
     },
+    "node_modules/@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "dev": true
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==",
+      "dev": true
+    },
     "node_modules/@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmmirror.com/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -2259,6 +2370,27 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
       "dev": true
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "dev": true,
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==",
+      "dev": true
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==",
+      "dev": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2344,6 +2476,31 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
+      "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
+      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/core": "^1.4.1",
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
+      "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==",
+      "dev": true
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -6768,6 +6925,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/readdir-glob": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@types/readdir-glob/-/readdir-glob-1.1.1.tgz",
@@ -8173,6 +8339,21 @@
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
@@ -10269,6 +10450,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -11983,6 +12174,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz",
@@ -13187,6 +13384,12 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
       "dev": true
     },
+    "node_modules/immutable": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -21357,6 +21560,33 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.4.tgz",
+      "integrity": "sha512-NhuE56X+p9QDFh4BgeygHFIvJJszO1i1KSkg/JPcIJrbovyRtI+GuOEa4XzFCEpZRAEoEI8u/cAHK+jG/PgUzQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-select/node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "dev": true
+    },
     "node_modules/react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmmirror.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -21441,6 +21671,22 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/react-use-measure/-/react-use-measure-2.1.1.tgz",
@@ -22111,6 +22357,60 @@
         "truncate-utf8-bytes": "^1.0.0"
       }
     },
+    "node_modules/sass": {
+      "version": "1.65.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.65.1.tgz",
+      "integrity": "sha512-9DINwtHmA41SEd36eVPQ9BJKpn7eKDQmUHmpI0y5Zv2Rcorrh0zS+cFrt050hdNbmmCNKTW3hV5mWfuegNRsEA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz",
+      "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==",
+      "dev": true,
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
@@ -23431,6 +23731,12 @@
         "react-is": ">= 16.8.0"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "dev": true
+    },
     "node_modules/sudo-prompt": {
       "version": "9.2.1",
       "resolved": "https://registry.npmmirror.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz",
@@ -27346,6 +27652,58 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
+    "@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+          "dev": true
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dev": true,
+      "requires": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==",
+      "dev": true
+    },
     "@emotion/is-prop-valid": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@@ -27361,6 +27719,49 @@
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
       "dev": true
     },
+    "@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dev": true,
+      "requires": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "@emotion/unitless": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+          "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+          "dev": true
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==",
+      "dev": true
+    },
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmmirror.com/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -27373,6 +27774,25 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
       "dev": true
     },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==",
+      "dev": true
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==",
+      "dev": true
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -27436,6 +27856,31 @@
         "cross-spawn": "^7.0.3"
       }
     },
+    "@floating-ui/core": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
+      "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
+      "dev": true,
+      "requires": {
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz",
+      "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==",
+      "dev": true,
+      "requires": {
+        "@floating-ui/core": "^1.4.1",
+        "@floating-ui/utils": "^0.1.1"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz",
+      "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==",
+      "dev": true
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -31066,6 +31511,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/readdir-glob": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@types/readdir-glob/-/readdir-glob-1.1.1.tgz",
@@ -32214,6 +32668,17 @@
         "@types/babel__traverse": "^7.0.6"
       }
     },
+    "babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "resolved": "https://registry.npmmirror.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
@@ -33916,6 +34381,16 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -35328,6 +35803,12 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz",
@@ -36322,6 +36803,12 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz",
+      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -42939,6 +43426,31 @@
         "react-router": "6.11.2"
       }
     },
+    "react-select": {
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.4.tgz",
+      "integrity": "sha512-NhuE56X+p9QDFh4BgeygHFIvJJszO1i1KSkg/JPcIJrbovyRtI+GuOEa4XzFCEpZRAEoEI8u/cAHK+jG/PgUzQ==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "dependencies": {
+        "memoize-one": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+          "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+          "dev": true
+        }
+      }
+    },
     "react-shallow-renderer": {
       "version": "16.15.0",
       "resolved": "https://registry.npmmirror.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -43000,6 +43512,18 @@
         "use-latest": "^1.2.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/react-use-measure/-/react-use-measure-2.1.1.tgz",
@@ -43552,6 +44076,26 @@
         "truncate-utf8-bytes": "^1.0.0"
       }
     },
+    "sass": {
+      "version": "1.65.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.65.1.tgz",
+      "integrity": "sha512-9DINwtHmA41SEd36eVPQ9BJKpn7eKDQmUHmpI0y5Zv2Rcorrh0zS+cFrt050hdNbmmCNKTW3hV5mWfuegNRsEA==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz",
+      "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==",
+      "dev": true,
+      "requires": {
+        "neo-async": "^2.6.2"
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
@@ -44656,6 +45200,12 @@
         "supports-color": "^5.5.0"
       }
     },
+    "stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "dev": true
+    },
     "sudo-prompt": {
       "version": "9.2.1",
       "resolved": "https://registry.npmmirror.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz",
diff --git a/package.json b/package.json
index 2ad3836f..19a30196 100644
--- a/package.json
+++ b/package.json
@@ -150,10 +150,13 @@
     "react-list": "^0.8.17",
     "react-lrc": "^3.0.2",
     "react-router-dom": "^6.3.0",
+    "react-select": "^5.7.4",
     "react-slider": "^1.1.4",
     "react-sortable-hoc": "^2.0.0",
     "react-spring": "^9.7.1",
     "rimraf": "^3.0.2",
+    "sass": "^1.65.1",
+    "sass-loader": "^13.3.2",
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.5",
     "ts-jest": "^28.0.7",