chore: make Preferences' lint happy

client/ui/preference/Preference.tsx

@@ -1,11 +1,14 @@
-import { $ } from 'mdui/jq'
+import { ListItem } from "mdui"
-import { Switch } from 'mdui'
-import React from 'react'
-import useEventListener from '../useEventListener.ts'
 
-export default function Preference({ title, icon, disabled, description, ...props } = {
+interface Args extends React.HTMLAttributes<ListItem> {
-    disabled: false,
+    title: string
-}) {
+    description?: string
+    icon: string
+    disabled?: boolean
+}
+
+export default function Preference({ title, icon, disabled, description, ...props }: Args) {
+    // @ts-ignore: 为什么 ...props 要说参数不兼容呢?
     return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} {...props}>
         {title}
         {description && <span slot="description">{description}</span>}

client/ui/preference/PreferenceHeader.tsx

@@ -1,3 +1,5 @@
-export default function PreferenceHeader({ title }) {
+export default function PreferenceHeader({ title }: {
+    title: string
+}) {
     return <mdui-list-subheader>{title}</mdui-list-subheader>
 }

client/ui/preference/PreferenceLayout.tsx

@@ -1,4 +1,4 @@
-export default function PreferenceLayout({ children, ...props }) {
+export default function PreferenceLayout({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
     return <mdui-list style={{
         marginLeft: '15px',
         marginRight: '15px',

client/ui/preference/PreferenceStore.ts

@@ -1,6 +1,9 @@
 import React from 'react'
 
 export default class PreferenceStore {
+    declare value: { [key: string]: unknown }
+    declare setter: React.Dispatch<React.SetStateAction<{ [key: string]: unknown }>>
+    declare onUpdate: (value: unknown) => void
     constructor() {
         const _ = React.useState<{ [key: string]: unknown }>({})
         this.value = _[0]
@@ -17,7 +20,7 @@ export default class PreferenceStore {
             this.onUpdate?.(newValue)
         }
     }
-    setOnUpdate(onUpdate) {
+    setOnUpdate(onUpdate: (value: unknown) => void) {
         this.onUpdate = onUpdate
     }
 }

client/ui/preference/SelectPreference.tsx

@@ -1,31 +1,36 @@
-import { $ } from 'mdui/jq'
 import React from 'react'
 import { Dropdown } from 'mdui'
 import useEventListener from '../useEventListener.ts'
 
-// value as { [id: string]: string }
+interface Args extends React.HTMLAttributes<HTMLElement> {
-export default function SelectPreference({ title, icon, updater, selections, defaultCheckedId, disabled } = {
+    title: string
-    disabled: false,
+    icon: string
-}) {
+    disabled?: boolean
-    const [ checkedId, setCheckedId ] = React.useState(defaultCheckedId)
+    updater: (value: unknown) => void
+    selections: { [id: string]: string }
+    defaultCheckedId: string
+}
+
+export default function SelectPreference({ title, icon, updater, selections, defaultCheckedId, disabled }: Args) {
+    const [checkedId, setCheckedId] = React.useState(defaultCheckedId)
 
     const dropDownRef = React.useRef<Dropdown>(null)
     const [isDropDownOpen, setDropDownOpen] = React.useState(false)
 
-    useEventListener(dropDownRef, 'closed', (e) => {
+    useEventListener(dropDownRef, 'closed', () => {
         setDropDownOpen(false)
     })
-    
     return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => setDropDownOpen(!isDropDownOpen)}>
         <mdui-dropdown ref={dropDownRef} trigger="manual" open={isDropDownOpen}>
-            <span slot="trigger">{ title }</span>
+            <span slot="trigger">{title}</span>
             <mdui-menu onClick={(e) => {
                 e.stopPropagation()
                 setDropDownOpen(false)
             }}>
                 {
                     Object.keys(selections).map((id) =>
-                        <mdui-menu-item selected={checkedId == id ? true : undefined} onClick={() => {
+                        // @ts-ignore: selected 确实存在, 但是并不对外公开使用
+                        <mdui-menu-item key={id} selected={checkedId == id ? true : undefined} onClick={() => {
                             setCheckedId(id)
                             updater(id)
                         }}>{selections[id]}</mdui-menu-item>
@@ -33,6 +38,6 @@ export default function SelectPreference({ title, icon, updater, selections, def
                 }
             </mdui-menu>
         </mdui-dropdown>
-        <span slot="description">{ selections[checkedId] }</span>
+        <span slot="description">{selections[checkedId]}</span>
     </mdui-list-item>
 }

client/ui/preference/SwitchPreference.tsx

@@ -1,13 +1,22 @@
-import { $ } from 'mdui/jq'
 import { Switch } from 'mdui'
 import React from 'react'
-import useEventListener from '../useEventListener.ts'
 
-export default function SwitchPreference({ title, icon, updater, disabled, description } = {
+interface Args extends React.HTMLAttributes<HTMLElement> {
-    disabled: false,
+    title: string
-}) {
+    description?: string
+    icon: string
+    updater: (value: unknown) => void
+    defaultState: boolean
+    disabled?: boolean
+}
+
+export default function SwitchPreference({ title, icon, updater, disabled, description, defaultState }: Args) {
     const switchRef = React.useRef<Switch>(null)
     
+    React.useEffect(() => {
+        switchRef.current!.checked = defaultState
+    }, [defaultState])
+
     return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} onClick={() => {
         switchRef.current!.checked = !switchRef.current!.checked
         updater(switchRef.current!.checked)

client/ui/preference/TextFieldPreference.tsx

@@ -1,12 +1,17 @@
-import { $ } from 'mdui/jq'
 import React from 'react'
-import { TextField, prompt } from 'mdui'
+import { prompt } from 'mdui'
-import useEventListener from '../useEventListener.ts'
 
-export default function TextFieldPreference({ title, icon, description, updater, defaultValue, disabled } = {
+interface Args extends React.HTMLAttributes<HTMLElement> {
-    disabled: false,
+    title: string
-}) {
+    description?: string
-    const [ text, setText ] = React.useState(defaultValue)
+    icon: string
+    updater: (value: unknown) => void
+    defaultState: string
+    disabled?: boolean
+}
+
+export default function TextFieldPreference({ title, icon, description, updater, defaultState, disabled }: Args) {
+    const [ text, setText ] = React.useState(defaultState)
     
     return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => {
         prompt({