feat: use primer select

src/components/SelectInput.tsx

@@ -1,18 +1,44 @@
+import { FormControl, Select, SelectProps } from '@primer/react'
 import * as React from 'react'
+
+export type Option<T> = {
+  key: string
+  label: string
+  value: T
+}
+
 export function SelectInput<T>({
   value,
   onChange,
+  label,
   options,
   ...selectProps
 }: Override<
-  React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>,
+  SelectProps,
   IO<T> & {
+    label: string
     options: Option<T>[]
   }
 >) {
   return (
-    <div className={'select-wrapper'}>
-      <select
+    <FormControl
+      sx={{
+        ':focus-within': {
+          '> span': {
+            // original boxShadow does not look right
+            borderWidth: '2px',
+            boxShadow: 'none',
+            '> select': {
+              paddingLeft: '11px',
+              paddingRight: '11px',
+            },
+          },
+        },
+      }}
+    >
+      <FormControl.Label>{label}</FormControl.Label>
+      <Select
+        block
         onChange={e => {
           const key = e.target.value
           const option = options.find(option => option.key === key)
@@ -22,17 +48,11 @@ export function SelectInput<T>({
         {...selectProps}
       >
         {options.map(option => (
-          <option key={option.key} value={option.key}>
+          <Select.Option key={option.key} value={option.key}>
             {option.label}
-          </option>
+          </Select.Option>
         ))}
-      </select>
-      <span className={'chevron'} />
-    </div>
+      </Select>
+    </FormControl>
   )
 }
-export type Option<T> = {
-  key: string
-  label: string
-  value: T
-}

src/components/settings/FileTreeSettings.tsx

@@ -4,7 +4,6 @@ import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { Config } from 'utils/config/helper'
 import { Option, SelectInput } from '../SelectInput'
-import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
 const iconOptions: Option<Config['icons']>[] = [
@@ -42,30 +41,27 @@ export function FileTreeSettings() {
   const configContext = useConfigs()
   return (
     <SettingsSection title={'File Tree'}>
-      <Field id="recursive-toggle-folder" title="Toggle folders recursively while holding">
-        <SelectInput
-          id="recursive-toggle-folder"
-          options={recursiveToggleFolderOptions}
-          onChange={v => {
-            configContext.onChange({
-              recursiveToggleFolder: v,
-            })
-          }}
-          value={configContext.value.recursiveToggleFolder}
-        />
-      </Field>
-      <Field title="Icons" id="file-tree-icons">
-        <SelectInput<Config['icons']>
-          id="file-tree-icons"
-          options={iconOptions}
-          onChange={v => {
-            configContext.onChange({
-              icons: v,
-            })
-          }}
-          value={configContext.value.icons}
-        />
-      </Field>
+      <SelectInput
+        label="Toggle folders recursively while holding"
+        options={recursiveToggleFolderOptions}
+        onChange={v => {
+          configContext.onChange({
+            recursiveToggleFolder: v,
+          })
+        }}
+        value={configContext.value.recursiveToggleFolder}
+      />
+
+      <SelectInput<Config['icons']>
+        label="Icons"
+        options={iconOptions}
+        onChange={v => {
+          configContext.onChange({
+            icons: v,
+          })
+        }}
+        value={configContext.value.icons}
+      />
       <SimpleToggleField
         field={{
           key: 'compressSingletonFolder',