From 8d7ddd46bee17566c1311fe6fc76c7ddb6058d34 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Tue, 7 Oct 2025 23:05:34 +0800
Subject: [PATCH] chore: make Preferences' lint happy

---
 client/ui/preference/Preference.tsx          | 17 +++++-----
 client/ui/preference/PreferenceHeader.tsx    |  4 ++-
 client/ui/preference/PreferenceLayout.tsx    |  2 +-
 client/ui/preference/PreferenceStore.ts      |  5 ++-
 client/ui/preference/SelectPreference.tsx    | 33 +++++++++++---------
 client/ui/preference/SwitchPreference.tsx    | 19 ++++++++---
 client/ui/preference/TextFieldPreference.tsx | 19 ++++++-----
 7 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/client/ui/preference/Preference.tsx b/client/ui/preference/Preference.tsx
index b3811d7..009c718 100644
--- a/client/ui/preference/Preference.tsx
+++ b/client/ui/preference/Preference.tsx
@@ -1,11 +1,14 @@
-import { $ } from 'mdui/jq'
-import { Switch } from 'mdui'
-import React from 'react'
-import useEventListener from '../useEventListener.ts'
+import { ListItem } from "mdui"
 
-export default function Preference({ title, icon, disabled, description, ...props } = {
-    disabled: false,
-}) {
+interface Args extends React.HTMLAttributes<ListItem> {
+    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>}
diff --git a/client/ui/preference/PreferenceHeader.tsx b/client/ui/preference/PreferenceHeader.tsx
index c6ca694..d1e0959 100644
--- a/client/ui/preference/PreferenceHeader.tsx
+++ b/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>
 }
\ No newline at end of file
diff --git a/client/ui/preference/PreferenceLayout.tsx b/client/ui/preference/PreferenceLayout.tsx
index a34a5ad..4698f61 100644
--- a/client/ui/preference/PreferenceLayout.tsx
+++ b/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',
diff --git a/client/ui/preference/PreferenceStore.ts b/client/ui/preference/PreferenceStore.ts
index 5f2a8b5..963a07f 100644
--- a/client/ui/preference/PreferenceStore.ts
+++ b/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
     }
 }
diff --git a/client/ui/preference/SelectPreference.tsx b/client/ui/preference/SelectPreference.tsx
index f01a2be..5cdb36a 100644
--- a/client/ui/preference/SelectPreference.tsx
+++ b/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 }
-export default function SelectPreference({ title, icon, updater, selections, defaultCheckedId, disabled } = {
-    disabled: false,
-}) {
-    const [ checkedId, setCheckedId ] = React.useState(defaultCheckedId)
-    
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    title: string
+    icon: string
+    disabled?: boolean
+    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={() => {
+                    Object.keys(selections).map((id) =>
+                        // @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>
 }
\ No newline at end of file
diff --git a/client/ui/preference/SwitchPreference.tsx b/client/ui/preference/SwitchPreference.tsx
index 69bb271..98d0002 100644
--- a/client/ui/preference/SwitchPreference.tsx
+++ b/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 } = {
-    disabled: false,
-}) {
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    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)
diff --git a/client/ui/preference/TextFieldPreference.tsx b/client/ui/preference/TextFieldPreference.tsx
index ac96e5d..d01fb1d 100644
--- a/client/ui/preference/TextFieldPreference.tsx
+++ b/client/ui/preference/TextFieldPreference.tsx
@@ -1,12 +1,17 @@
-import { $ } from 'mdui/jq'
 import React from 'react'
-import { TextField, prompt } from 'mdui'
-import useEventListener from '../useEventListener.ts'
+import { prompt } from 'mdui'
 
-export default function TextFieldPreference({ title, icon, description, updater, defaultValue, disabled } = {
-    disabled: false,
-}) {
-    const [ text, setText ] = React.useState(defaultValue)
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    title: string
+    description?: string
+    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({