feat(wip): 多選聯絡人

client/ui/main/ContactsList.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import User from "../../api/client_data/User.ts"
 import ContactsListItem from "./ContactsListItem.tsx"
 import useEventListener from "../useEventListener.ts"
-import { TextField } from "mdui";
+import { ListItem, TextField } from "mdui"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     contactsList: User[]
@@ -19,6 +19,7 @@ export default function ContactsList({
     ...props
 }: Args) {
     const searchRef = React.useRef<HTMLElement>(null)
+    const [isMultiSelecting, setIsMultiSelecting] = React.useState(false)
     const [searchText, setSearchText] = React.useState('')
 
     useEventListener(searchRef, 'input', (e) => {
@@ -32,7 +33,7 @@ export default function ContactsList({
         display: display ? undefined : 'none',
         height: '100%',
     }} {...props}>
-        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" label="搜索..." style={{
+        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
             marginTop: '5px',
         }}></mdui-text-field>
 
@@ -41,6 +42,11 @@ export default function ContactsList({
             marginTop: '13px',
             marginBottom: '15px',
         }} icon="person_add">添加聯絡人</mdui-list-item>
+        {/* <mdui-list-item rounded style={{
+            width: '100%',
+            marginBottom: '15px',
+        }} icon={ isMultiSelecting ? "done" : "edit"} onClick={() => setIsMultiSelecting(!isMultiSelecting)}>{ isMultiSelecting ? "關閉多選" : "多選模式" }</mdui-list-item> */}
+
         {
             contactsList.filter((user) =>
                 searchText == '' || 
@@ -49,7 +55,14 @@ export default function ContactsList({
                 user.username?.includes(searchText)
             ).map((v) =>
                 <ContactsListItem
-                    openChatFragment={openChatFragment}
+                    /* active={!isMultiSelecting && false}
+                    onClick={(e) => {
+                        const self = (e.target as ListItem)
+                        if (isMultiSelecting)
+                            self.active = !self.active
+                        else
+                            void(0)
+                    }} */
                     key={v.id}
                     contact={v} />
             )

client/ui/main/ContactsListItem.tsx

@@ -1,13 +1,14 @@
+import { ListItem } from "mdui";
 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
-    openChatFragment: (id: string) => void
+    active?: boolean
 }
 
-export default function ContactsListItem({ contact, openChatFragment }: Args) {
+export default function ContactsListItem({ contact, ...prop }: Args) {
     const { id, nickname, avatar } = contact
     const ref = React.useRef<HTMLElement>(null)
 
@@ -16,7 +17,7 @@ export default function ContactsListItem({ contact, openChatFragment }: Args) {
             marginTop: '3px',
             marginBottom: '3px',
             width: '100%',
-        }} onClick={() => openChatFragment(id)}>
+        }} {...prop as any}>
             <span style={{
                 width: "100%",
             }}>{nickname}</span>