feat: extract select input

src/components/SelectInput.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+export function SelectInput<T>({
+  value,
+  onChange,
+  options,
+  ...selectProps
+}: Override<
+  React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>,
+  IO<T> & {
+    options: Option<T>[]
+  }
+>) {
+  return (
+    <select
+      onChange={e => {
+        const key = e.target.value
+        const option = options.find(option => option.key === key)
+        onChange(option!?.value)
+      }}
+      value={options.find(option => option.value === value)?.key}
+      {...selectProps}
+    >
+      {options.map(option => (
+        <option key={option.key} value={option.key}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  )
+}
+export type Option<T> = {
+  key: string
+  label: string
+  value: T
+}

src/components/settings/FileTreeSettings.tsx

@@ -3,14 +3,11 @@ import { SimpleToggleField } from 'components/SimpleToggleField'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { Config } from 'utils/configHelper'
+import { Option, SelectInput } from '../SelectInput'
 import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
-const options: {
-  key: Config['icons']
-  value: Config['icons']
-  label: string
-}[] = [
+const options: Option<Config['icons']>[] = [
   {
     key: 'rich',
     value: 'rich',
@@ -35,21 +32,16 @@ export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
   return (
     <SettingsSection title={'File Tree'}>
       <Field title="Icons" id="file-tree-icons">
-        <select
+        <SelectInput<Config['icons']>
           id="file-tree-icons"
-          onChange={e => {
+          options={options}
+          onChange={v => {
             configContext.set({
-              icons: e.target.value as Config['icons'],
+              icons: v,
             })
           }}
           value={configContext.val.icons}
-        >
-          {options.map(option => (
-            <option key={option.key} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
+        />
       </Field>
       <SimpleToggleField
         field={{

src/global.d.ts

@@ -17,3 +17,11 @@ type TreeNode = {
   sha?: string
   accessDenied?: boolean
 }
+
+type IO<T> = {
+  value: T
+  onChange(value: T): void
+}
+
+// do not use with generics
+type Override<Original, Incoming> = Omit<Original, keyof Incoming> & Incoming