updated

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

client/ui/App.tsx

@@ -38,16 +38,16 @@ 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({
+    const [contactsList, setContactsList] = React.useState({
         所有: [
             {
-                id: '0',
+                id: '1',
                 avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
                 nickname: "麻油衣酱",
             },
@@ -57,7 +57,19 @@ export default function App() {
                 nickname: "Maya Fey",
             },
         ],
-    } as unknown as { [key: string]: User[] })
+        所2有: [
+            {
+                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 unknown as User[])
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
     const navigationRailRef: React.MutableRefObject<NavigationRail | null> = React.useRef(null)
@@ -140,8 +152,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="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
-                <mdui-navigation-rail-item icon="contacts--outlined" value="Contacts"></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>
@@ -157,7 +169,8 @@ export default function App() {
 
                         }}
                         display={navigationItemSelected == "Recents"}
-                        recentsList={recentsList} />
+                        recentsList={recentsList}
+                        setRecentsList={setRecentsList} />
                 }
                 {
                     // 联系人列表
@@ -166,7 +179,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-list-item rounded style={{
-        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
+            width: '100%',
-            <mdui-list-item rounded style={{
+        }} icon="person_add">添加聯絡人</mdui-list-item>
-                width: '100%',
+        {
-            }} icon="person_add">添加聯絡人</mdui-list-item>
+            contactsList.map((v2) =>
-            {
+                <ContactsListItem
-                Object.keys(contactsMap).map((v) =>
+                    openChatFragment={openChatFragment}
-                    <mdui-collapse-item key={v} value={v}>
+                    key={v2.id}
-                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
+                    contact={v2} />
-                        {
+            )
-                            contactsMap[v].map((v2) =>
+        }
-                                <ContactsListItem
-                                    openChatFragment={openChatFragment}
-                                    key={v2.id}
-                                    contact={v2} />
-                            )
-                        }
-                    </mdui-collapse-item>
-                )
-            }
-        </mdui-collapse>
     </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 {
+            return [
-                默認: [
+                this.bean.id
-                    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