chore: make code looks happy

浪費了半天時間, 索性移除了聯絡人分組的支援

client/Data.ts

@@ -21,6 +21,7 @@ const _data_cached = JSON.parse(_dec)
 declare global {
     interface Window {
         data: {
+            split_sizes: number[];
             apply(): void
             access_token?: string
         }

client/ui/App.tsx

@@ -38,44 +38,43 @@ export default function App() {
             content: "成步堂君, 我又坐牢了（"
         },
         {
-            id: '0',
+            id: '1',
             avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
             title: "Maya Fey",
             content: "我是绫里真宵, 是一名灵媒师~"
         },
     ] as RecentChat[])
-    const [contactsMap, setContactsMap] = React.useState({
-        所有: [
-            {
-                id: '0',
-                avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-                nickname: "麻油衣酱",
-            },
-            {
-                id: '0',
-                avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-                nickname: "Maya Fey",
-            },
-        ],
-    } as unknown as { [key: string]: User[] })
+    const [contactsList, setContactsList] = React.useState([
+        {
+            id: '1',
+            avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
+            nickname: "麻油衣酱",
+        },
+        {
+            id: '0',
+            avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
+            nickname: "Maya Fey",
+        },
+    ] as User[])
+    
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
-    const navigationRailRef: React.MutableRefObject<NavigationRail | null> = React.useRef(null)
+    const navigationRailRef = React.useRef<NavigationRail>(null)
     useEventListener(navigationRailRef, 'change', (event) => {
         setNavigationItemSelected((event.target as HTMLElement as NavigationRail).value as string)
     })
 
-    const loginDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
-    const loginInputAccountRef: React.MutableRefObject<TextField | null> = React.useRef(null)
-    const loginInputPasswordRef: React.MutableRefObject<TextField | null> = React.useRef(null)
+    const loginDialogRef = React.useRef<Dialog>(null)
+    const loginInputAccountRef = React.useRef<TextField>(null)
+    const loginInputPasswordRef = React.useRef<TextField>(null)
 
-    const registerDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
-    const registerInputUserNameRef: React.MutableRefObject<TextField | null> = React.useRef(null)
-    const registerInputNickNameRef: React.MutableRefObject<TextField | null> = React.useRef(null)
-    const registerInputPasswordRef: React.MutableRefObject<TextField | null> = React.useRef(null)
+    const registerDialogRef = React.useRef<Dialog>(null)
+    const registerInputUserNameRef = React.useRef<TextField>(null)
+    const registerInputNickNameRef = React.useRef<TextField>(null)
+    const registerInputPasswordRef = React.useRef<TextField>(null)
 
-    const userProfileDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
-    const openMyUserProfileDialogButtonRef: React.MutableRefObject<HTMLElement | null> = React.useRef(null)
+    const userProfileDialogRef = React.useRef<Dialog>(null)
+    const openMyUserProfileDialogButtonRef = React.useRef<HTMLElement>(null)
     useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
         userProfileDialogRef.current!.open = true
     })
@@ -88,10 +87,14 @@ export default function App() {
 
     React.useEffect(() => {
         ; (async () => {
-            Split(['#SideBar', '#ChatFragment'], {
-                sizes: [25, 75],
+            const split = Split(['#SideBar', '#ChatFragment'], {
+                sizes: data.split_sizes ? data.split_sizes : [25, 75],
                 minSize: [200, 400],
                 gutterSize: 2,
+                onDragEnd: function () {
+                    data.split_sizes = split.getSizes()
+                    data.apply()
+                }
             })
 
             Client.connect()
@@ -136,8 +139,8 @@ export default function App() {
                     <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
                 </mdui-button-icon>
 
-                <mdui-navigation-rail-item icon="watch_later--outlined" value="Recents"></mdui-navigation-rail-item>
-                <mdui-navigation-rail-item icon="contacts--outlined" value="Contacts"></mdui-navigation-rail-item>
+                <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
+                <mdui-navigation-rail-item icon="contacts--outlined" active-icon="contacts--filled" value="Contacts"></mdui-navigation-rail-item>
 
                 <mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
             </mdui-navigation-rail>
@@ -153,7 +156,8 @@ export default function App() {
 
                         }}
                         display={navigationItemSelected == "Recents"}
-                        recentsList={recentsList} />
+                        recentsList={recentsList}
+                        setRecentsList={setRecentsList} />
                 }
                 {
                     // 联系人列表
@@ -162,7 +166,8 @@ export default function App() {
                             setIsShowChatFragment(true)
                         }}
                         display={navigationItemSelected == "Contacts"}
-                        contactsMap={contactsMap} />
+                        contactsList={contactsList}
+                        setContactsList={setContactsList} />
                 }
             </div>
             {

client/ui/main/ContactsList.tsx

@@ -1,14 +1,17 @@
+import React from "react"
 import User from "../../api/client_data/User.ts"
 import ContactsListItem from "./ContactsListItem.tsx"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
-    contactsMap: { [key: string]: User[] }
+    contactsList: User[]
+    setContactsList: React.Dispatch<React.SetStateAction<User[]>>
     display: boolean
     openChatFragment: (id: string) => void
 }
 
 export default function ContactsList({
-    contactsMap,
+    contactsList,
+    setContactsList,
     display,
     openChatFragment,
     ...props
@@ -17,28 +20,19 @@ export default function ContactsList({
         overflowY: 'auto',
         paddingLeft: '10px',
         paddingRight: '10px',
-        display: display ? undefined : 'none'
+        display: display ? undefined : 'none',
+        height: '100%',
     }} {...props}>
-
-        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
-            <mdui-list-item rounded style={{
-                width: '100%',
-            }} icon="person_add">添加聯絡人</mdui-list-item>
-            {
-                Object.keys(contactsMap).map((v) =>
-                    <mdui-collapse-item key={v} value={v}>
-                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
-                        {
-                            contactsMap[v].map((v2) =>
-                                <ContactsListItem
-                                    openChatFragment={openChatFragment}
-                                    key={v2.id}
-                                    contact={v2} />
-                            )
-                        }
-                    </mdui-collapse-item>
-                )
-            }
-        </mdui-collapse>
+        <mdui-list-item rounded style={{
+            width: '100%',
+        }} icon="person_add">添加聯絡人</mdui-list-item>
+        {
+            contactsList.map((v2) =>
+                <ContactsListItem
+                    openChatFragment={openChatFragment}
+                    key={v2.id}
+                    contact={v2} />
+            )
+        }
     </mdui-list>
 }

client/ui/main/ContactsListItem.tsx

@@ -1,5 +1,6 @@
 import User from "../../api/client_data/User.ts"
 import Avatar from "../Avatar.tsx"
+import React from 'react'
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     contact: User
@@ -8,8 +9,10 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
 
 export default function ContactsListItem({ contact, openChatFragment }: Args) {
     const { id, nickname, avatar } = contact
+    const ref = React.useRef<HTMLElement>(null)
+
     return (
-        <mdui-list-item rounded style={{
+        <mdui-list-item ref={ref} rounded style={{
             marginTop: '3px',
             marginBottom: '3px',
             width: '100%',

client/ui/main/RecentsList.tsx

@@ -3,12 +3,14 @@ import RecentsListItem from "./RecentsListItem.tsx"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     recentsList: RecentChat[]
+    setRecentsList: React.Dispatch<React.SetStateAction<RecentChat[]>>
     display: boolean
     openChatFragment: (id: string) => void
 }
 
 export default function RecentsList({
     recentsList,
+    setRecentsList,
     display,
     openChatFragment,
     ...props
@@ -16,7 +18,8 @@ export default function RecentsList({
     return <mdui-list style={{
         overflowY: 'auto',
         paddingRight: '10px',
-        display: display ? undefined : 'none'
+        display: display ? undefined : 'none',
+        height: '100%',
     }} {...props}>
         {
             recentsList.map((v) =>

client/ui/snackbar.ts

@@ -93,6 +93,6 @@ export function checkApiSuccessOrSncakbar(re: ApiCallbackMessage, msg_ahead: str
 }
 
 export function snackbar(opinions: SnackbarOptions) {
-    opinions.autoCloseDelay == null && (opinions.autoCloseDelay = 2500)
+    opinions.autoCloseDelay == null && (opinions.autoCloseDelay = 3500)
     return mduiSnackbar(opinions)
 }

server/data/User.ts

@@ -62,7 +62,7 @@ export default class User {
                     username,
                     nickname,
                     avatar_file_hash,
-                    contact_groups,
+                    contacts_list,
                     settings
                 ) VALUES (?, ?, ?, ?, ?, ?, ?, ?);`).run(
                     crypto.randomUUID(),
@@ -71,17 +71,12 @@ export default class User {
                     userName,
                     nickName,
                     null,
-                    '{}',
+                    '[]',
                     "{}"
                 ).lastInsertRowid
             )[0]
         )
         avatar && user.setAvatar(avatar)
-        user.setContactGroups({
-            默認: [
-                user.bean.id
-            ]
-        })
         return user
     }
 
@@ -120,21 +115,19 @@ export default class User {
     setUserName(userName: string) {
         this.setAttr("username", userName)
     }
-    getContactGroups() {
+    addContact(userId) {
+        
+    }
+    getContactsList() {
         try {
-            return JSON.parse(this.bean.contact_groups)
+            return JSON.parse(this.bean.contacts_list)
         } catch (e) {
             console.log(chalk.yellow(`警告: 聯絡人組解析失敗: ${(e as Error).message}`))
-            return {
-                默認: [
-                    this.bean.id
-                ]
-            }
+            return [
+                this.bean.id
+            ]
         }
     }
-    setContactGroups(contactGroups: { [key: string]: string[] }) {
-        this.setAttr("contact_groups", JSON.stringify(contactGroups))
-    }
     getNickName(): string {
         return this.bean.nickname
     }

server/data/UserBean.ts

@@ -6,7 +6,7 @@ export default class UserBean {
     declare registered_time: number
     declare nickname: string
     declare avatar_file_hash?: string
-    declare contact_groups: string
+    declare contacts_list: string
     declare settings: string
 
     [key: string]: unknown