diff --git a/client/ClientCache.ts b/client/ClientCache.ts
index dd10628..9e17def 100644
--- a/client/ClientCache.ts
+++ b/client/ClientCache.ts
@@ -1,5 +1,5 @@
 import { Chat, User, UserMySelf } from "lingchair-client-protocol"
-import getClient from "./getClient"
+import getClient from "./getClient.ts"
 
 type CouldCached = User | Chat | null
 export default class ClientCache {
diff --git a/client/getClient.ts b/client/getClient.ts
index de2d692..68a9f6d 100644
--- a/client/getClient.ts
+++ b/client/getClient.ts
@@ -2,7 +2,6 @@ import { LingChairClient } from 'lingchair-client-protocol'
 import data from "./data.ts"
 import { UAParser } from 'ua-parser-js'
 import { randomUUID } from 'lingchair-internal-shared'
-import performAuth from './performAuth.ts'
 
 if (!data.device_id) {
     const ua = new UAParser(navigator.userAgent)
diff --git a/client/ui/MainSharedContext.ts b/client/ui/MainSharedContext.ts
index 8a649f9..2fdb959 100644
--- a/client/ui/MainSharedContext.ts
+++ b/client/ui/MainSharedContext.ts
@@ -1,6 +1,6 @@
-import { Chat, UserMySelf } from "lingchair-client-protocol"
+import { Chat } from "lingchair-client-protocol"
 import { createContext } from "use-context-selector"
-import { SharedState } from "./MainSharedReducer"
+import { SharedState } from "./MainSharedReducer.ts"
 
 type Shared = {
     functions_lazy: React.MutableRefObject<{
diff --git a/client/ui/MainSharedReducer.ts b/client/ui/MainSharedReducer.ts
index 045f9be..b2c8ff0 100644
--- a/client/ui/MainSharedReducer.ts
+++ b/client/ui/MainSharedReducer.ts
@@ -1,4 +1,4 @@
-import { Chat, UserMySelf } from "lingchair-client-protocol"
+import { Chat } from "lingchair-client-protocol"
 
 export interface SharedState {
     favouriteChats: Chat[]
diff --git a/client/ui/ProgressDialogFallback.tsx b/client/ui/ProgressDialogFallback.tsx
index 0f0336f..b3cf711 100644
--- a/client/ui/ProgressDialogFallback.tsx
+++ b/client/ui/ProgressDialogFallback.tsx
@@ -1,5 +1,5 @@
-import EffectOnly from "./EffectOnly"
-import showCircleProgressDialog from "./showCircleProgressDialog"
+import EffectOnly from "./EffectOnly.tsx"
+import showCircleProgressDialog from "./showCircleProgressDialog.ts"
 
 export default function ProgressDialogFallback({ text }: { text: string }) {
     return <EffectOnly effect={() => {
diff --git a/client/ui/app-state/AddFavourtieChatDialog.tsx b/client/ui/app-state/AddFavourtieChatDialog.tsx
index 9372655..c3d2558 100644
--- a/client/ui/app-state/AddFavourtieChatDialog.tsx
+++ b/client/ui/app-state/AddFavourtieChatDialog.tsx
@@ -1,13 +1,9 @@
 import * as React from 'react'
-import { Button, Dialog, snackbar, TextField } from "mdui"
-import { data, useNavigate } from 'react-router'
-import { useContextSelector } from 'use-context-selector'
-import MainSharedContext, { Shared } from '../MainSharedContext'
-import showSnackbar from '../../utils/showSnackbar'
+import { Dialog, TextField } from "mdui"
+import showSnackbar from '../../utils/showSnackbar.ts'
 import { CallbackError } from 'lingchair-client-protocol'
-import useEventListener from '../../utils/useEventListener'
-import ClientCache from '../../ClientCache'
-import AppStateContext from './AppStateContext'
+import useEventListener from '../../utils/useEventListener.ts'
+import ClientCache from '../../ClientCache.ts'
 
 export default function AddFavourtieChatDialog({ useRef }: { useRef: React.MutableRefObject<Dialog | undefined> }) {
     const inputTargetRef = React.useRef<TextField>(null)
diff --git a/client/ui/app-state/AppStateContext.ts b/client/ui/app-state/AppStateContext.ts
index 079c58e..94c2e10 100644
--- a/client/ui/app-state/AppStateContext.ts
+++ b/client/ui/app-state/AppStateContext.ts
@@ -1,5 +1,4 @@
 import { Chat, User } from 'lingchair-client-protocol'
-import { Dialog } from 'mdui'
 import * as React from 'react'
 
 type AppState = {
diff --git a/client/ui/app-state/AppStateContextWrapper.tsx b/client/ui/app-state/AppStateContextWrapper.tsx
index cc35c56..d466c49 100644
--- a/client/ui/app-state/AppStateContextWrapper.tsx
+++ b/client/ui/app-state/AppStateContextWrapper.tsx
@@ -1,18 +1,17 @@
 import { $, Dialog } from "mdui"
-import AppStateContext, { AppState } from "./AppStateContext"
+import AppStateContext, { AppState } from "./AppStateContext.ts"
 import { Chat, User } from "lingchair-client-protocol"
-import getClient from "../../getClient"
-import UserOrChatInfoDialog from "./UserOrChatInfoDialog"
-import useEffectRef from "../../utils/useEffectRef"
-import EditMyProfileDialog from "./EditMyProfileDialog"
-import AddFavourtieChatDialog from "./AddFavourtieChatDialog"
+import getClient from "../../getClient.ts"
+import UserOrChatInfoDialog from "./UserOrChatInfoDialog.tsx"
+import useEffectRef from "../../utils/useEffectRef.ts"
+import EditMyProfileDialog from "./EditMyProfileDialog.tsx"
+import AddFavourtieChatDialog from "./AddFavourtieChatDialog.tsx"
 import * as React from 'react'
 import { useContextSelector } from "use-context-selector"
-import MainSharedContext, { Shared } from "../MainSharedContext"
-import ChatFragmentDialog from "./ChatFragmentDialog"
-import useAsyncEffect from "../../utils/useAsyncEffect"
-import ClientCache from "../../ClientCache"
-import isMobileUI from "../../utils/isMobileUI"
+import MainSharedContext, { Shared } from "../MainSharedContext.ts"
+import ChatFragmentDialog from "./ChatFragmentDialog.tsx"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import ClientCache from "../../ClientCache.ts"
 
 const config = await fetch('/config.json').then((re) => re.json())
 
diff --git a/client/ui/app-state/ChatFragmentDialog.tsx b/client/ui/app-state/ChatFragmentDialog.tsx
index 636004c..e9121d8 100644
--- a/client/ui/app-state/ChatFragmentDialog.tsx
+++ b/client/ui/app-state/ChatFragmentDialog.tsx
@@ -1,7 +1,7 @@
 import { Dialog } from "mdui"
 import * as React from 'react'
-import LazyChatFragment from "../chat-fragment/LazyChatFragment"
-import useEventListener from "../../utils/useEventListener"
+import LazyChatFragment from "../chat-fragment/LazyChatFragment.tsx"
+import useEventListener from "../../utils/useEventListener.ts"
 
 export default function ChatFragmentDialog({ chatId, useRef }: { chatId: string, useRef: React.MutableRefObject<Dialog | undefined> }) {
     useEventListener(useRef, 'open', () => {
diff --git a/client/ui/app-state/CreateGroupDialog.tsx b/client/ui/app-state/CreateGroupDialog.tsx
new file mode 100644
index 0000000..98970cd
--- /dev/null
+++ b/client/ui/app-state/CreateGroupDialog.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { Dialog, TextField } from "mdui"
+import showSnackbar from '../../utils/showSnackbar'
+import { CallbackError } from 'lingchair-client-protocol'
+import useEventListener from '../../utils/useEventListener.ts'
+import ClientCache from '../../ClientCache.ts'
+
+export default function CreateGroupDialog({ useRef }: { useRef: React.MutableRefObject<Dialog | undefined> }) {
+    const inputTargetRef = React.useRef<TextField>(null)
+
+    useEventListener(useRef, 'closed', () => {
+        inputTargetRef.current!.value = ''
+    })
+
+    async function addFavouriteChat() {
+        try {
+            await (await ClientCache.getMySelf())!.addFavouriteChatsOrThrow([inputTargetRef.current!.value])
+            inputTargetRef.current!.value = ''
+            showSnackbar({
+                message: '添加成功!'
+            })
+        } catch (e) {
+            if (e instanceof CallbackError)
+                showSnackbar({
+                    message: '添加收藏对话失败: ' + e.message
+                })
+        }
+    }
+
+    return (
+        <mdui-dialog close-on-overlay-click close-on-esc headline="添加收藏对话" ref={useRef}>
+            <mdui-text-field clearable label="对话 / 用户 (ID 或 别名)" ref={inputTargetRef} onKeyDown={(event: KeyboardEvent) => {
+                if (event.key == 'Enter')
+                    addFavouriteChat()
+            }}></mdui-text-field>
+            <mdui-button slot="action" variant="text" onClick={() => useRef.current!.open = false}>取消</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={() => addFavouriteChat()}>添加</mdui-button>
+        </mdui-dialog>
+    )
+}
diff --git a/client/ui/app-state/EditMyProfileDialog.tsx b/client/ui/app-state/EditMyProfileDialog.tsx
index 5c738e5..fe864c1 100644
--- a/client/ui/app-state/EditMyProfileDialog.tsx
+++ b/client/ui/app-state/EditMyProfileDialog.tsx
@@ -1,11 +1,10 @@
 import { CallbackError, UserMySelf } from "lingchair-client-protocol"
-import ClientCache from "../../ClientCache"
-import AvatarMySelf from "../AvatarMySelf"
-import useAsyncEffect from "../../utils/useAsyncEffect"
-import getClient from "../../getClient"
-import { useNavigate } from "react-router"
-import showSnackbar from "../../utils/showSnackbar"
-import useEventListener from "../../utils/useEventListener"
+import ClientCache from "../../ClientCache.ts"
+import AvatarMySelf from "../AvatarMySelf.tsx"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import getClient from "../../getClient.ts"
+import showSnackbar from "../../utils/showSnackbar.ts"
+import useEventListener from "../../utils/useEventListener.ts"
 import { Dialog, TextField } from "mdui"
 import * as React from 'react'
 
diff --git a/client/ui/app-state/UserOrChatInfoDialog.tsx b/client/ui/app-state/UserOrChatInfoDialog.tsx
index 25dac11..3c4c742 100644
--- a/client/ui/app-state/UserOrChatInfoDialog.tsx
+++ b/client/ui/app-state/UserOrChatInfoDialog.tsx
@@ -1,28 +1,22 @@
 import { Dialog, dialog } from "mdui"
-import { useLoaderData, useNavigate } from "react-router"
 import { CallbackError, Chat } from "lingchair-client-protocol"
-import showSnackbar from "../../utils/showSnackbar"
-import Avatar from "../Avatar"
+import showSnackbar from "../../utils/showSnackbar.ts"
+import Avatar from "../Avatar.tsx"
 import { useContextSelector } from "use-context-selector"
-import MainSharedContext, { Shared } from "../MainSharedContext"
+import MainSharedContext, { Shared } from "../MainSharedContext.ts"
 import * as React from 'react'
-import ClientCache from "../../ClientCache"
-import getClient from "../../getClient"
-import isMobileUI from "../../utils/isMobileUI"
-import useEffectRef from "../../utils/useEffectRef"
-import useAsyncEffect from "../../utils/useAsyncEffect"
-import AppStateContext from "./AppStateContext"
+import ClientCache from "../../ClientCache.ts"
+import getClient from "../../getClient.ts"
+import isMobileUI from "../../utils/isMobileUI.ts"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import AppStateContext from "./AppStateContext.ts"
 
 export default function UserOrChatInfoDialog({ chat, useRef }: { chat?: Chat, useRef: React.MutableRefObject<Dialog | undefined> }) {
     const favouriteChats = useContextSelector(
         MainSharedContext,
         (context: Shared) => context.state.favouriteChats
     )
-    const setCurrentSelectedChatId = useContextSelector(
-        MainSharedContext,
-        (context: Shared) => context.setCurrentSelectedChatId
-    )
-
+    
     const AppState = React.useContext(AppStateContext)
 
     const [isMySelf, setIsMySelf] = React.useState(false)
diff --git a/client/ui/chat-fragment/ChatFragment.tsx b/client/ui/chat-fragment/ChatFragment.tsx
index b99fab4..70899b2 100644
--- a/client/ui/chat-fragment/ChatFragment.tsx
+++ b/client/ui/chat-fragment/ChatFragment.tsx
@@ -1,18 +1,18 @@
 import { $, Tab, TextField } from "mdui"
-import useEventListener from "../../utils/useEventListener"
-import useEffectRef from "../../utils/useEffectRef"
-import isMobileUI from "../../utils/isMobileUI"
+import useEventListener from "../../utils/useEventListener.ts"
+import useEffectRef from "../../utils/useEffectRef.ts"
+import isMobileUI from "../../utils/isMobileUI.ts"
 import { Chat } from "lingchair-client-protocol"
-import Preference from "../preference/Preference"
-import PreferenceHeader from "../preference/PreferenceHeader"
-import PreferenceLayout from "../preference/PreferenceLayout"
-import PreferenceUpdater from "../preference/PreferenceUpdater"
-import SwitchPreference from "../preference/SwitchPreference"
-import TextFieldPreference from "../preference/TextFieldPreference"
+import Preference from "../preference/Preference.tsx"
+import PreferenceHeader from "../preference/PreferenceHeader.tsx"
+import PreferenceLayout from "../preference/PreferenceLayout.tsx"
+import PreferenceUpdater from "../preference/PreferenceUpdater.tsx"
+import SwitchPreference from "../preference/SwitchPreference.tsx"
+import TextFieldPreference from "../preference/TextFieldPreference.tsx"
 import * as React from 'react'
 import ChatMessageContainer from "./ChatMessageContainer"
-import AppStateContext from "../app-state/AppStateContext"
-import ChatPanel, { ChatPanelRef } from "./ChatPanel"
+import AppStateContext from "../app-state/AppStateContext.ts"
+import ChatPanel, { ChatPanelRef } from "./ChatPanel.tsx"
 
 interface MduiTabFitSizeArgs extends React.HTMLAttributes<HTMLElement & Tab> {
     value: string
diff --git a/client/ui/chat-fragment/ChatMessage.tsx b/client/ui/chat-fragment/ChatMessage.tsx
index fb78316..1f2ec4d 100644
--- a/client/ui/chat-fragment/ChatMessage.tsx
+++ b/client/ui/chat-fragment/ChatMessage.tsx
@@ -1,15 +1,15 @@
 import { ChatParserTransformers, Message } from "lingchair-client-protocol"
-import isMobileUI from "../../utils/isMobileUI"
-import useAsyncEffect from "../../utils/useAsyncEffect"
-import ClientCache from "../../ClientCache"
-import getClient from "../../getClient"
-import Avatar from "../Avatar"
-import AppStateContext from "../app-state/AppStateContext"
-import { $, dialog, Dropdown } from "mdui"
-import useEventListener from "../../utils/useEventListener"
+import isMobileUI from "../../utils/isMobileUI.ts"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import ClientCache from "../../ClientCache.ts"
+import getClient from "../../getClient.ts"
+import Avatar from "../Avatar.tsx"
+import AppStateContext from "../app-state/AppStateContext.ts"
+import { Dropdown } from "mdui"
+import useEventListener from "../../utils/useEventListener.ts"
 import DOMPurify from 'dompurify'
 import * as React from 'react'
-import ChatMentionElement from "../chat-elements/chat-mention"
+import ChatMentionElement from "../chat-elements/chat-mention.ts"
 
 function escapeHTML(str: string) {
     const div = document.createElement('div')
diff --git a/client/ui/chat-fragment/ChatMessageContainer.tsx b/client/ui/chat-fragment/ChatMessageContainer.tsx
index 89814bc..2536edf 100644
--- a/client/ui/chat-fragment/ChatMessageContainer.tsx
+++ b/client/ui/chat-fragment/ChatMessageContainer.tsx
@@ -1,6 +1,6 @@
-import { Chat, Message } from 'lingchair-client-protocol'
+import { Message } from 'lingchair-client-protocol'
 import * as React from 'react'
-import ChatMessage from './ChatMessage'
+import ChatMessage from './ChatMessage.tsx'
 
 export default function ChatMessageContainer({ messages }: { messages: Message[] }) {
     return (
diff --git a/client/ui/chat-fragment/ChatPanel.tsx b/client/ui/chat-fragment/ChatPanel.tsx
index 7837eb7..fca8605 100644
--- a/client/ui/chat-fragment/ChatPanel.tsx
+++ b/client/ui/chat-fragment/ChatPanel.tsx
@@ -1,6 +1,6 @@
 import { Chat, Message } from "lingchair-client-protocol"
-import ChatMessageContainer from "./ChatMessageContainer"
-import useAsyncEffect from "../../utils/useAsyncEffect"
+import ChatMessageContainer from "./ChatMessageContainer.tsx"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
 import * as React from 'react'
 
 function ChatPanelInner({ chat }: { chat: Chat }, ref: React.ForwardedRef<any>) {
diff --git a/client/ui/chat-fragment/LazyChatFragment.tsx b/client/ui/chat-fragment/LazyChatFragment.tsx
index 6408b32..02f7b30 100644
--- a/client/ui/chat-fragment/LazyChatFragment.tsx
+++ b/client/ui/chat-fragment/LazyChatFragment.tsx
@@ -1,8 +1,8 @@
 import { Chat } from "lingchair-client-protocol"
-import getClient from "../../getClient"
-import ChatFragment from "./ChatFragment"
+import getClient from "../../getClient.ts"
+import ChatFragment from "./ChatFragment.tsx"
 import * as React from 'react'
-import useAsyncEffect from "../../utils/useAsyncEffect"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
 
 export default function LazyChatFragment({ chatId, openedInDialog }: { chatId: string, openedInDialog: boolean }) {
     const [child, setChild] = React.useState<React.ReactNode>()
diff --git a/client/ui/main-page/FavouriteChatsList.tsx b/client/ui/main-page/FavouriteChatsList.tsx
index 80fcc55..e9e3d5c 100644
--- a/client/ui/main-page/FavouriteChatsList.tsx
+++ b/client/ui/main-page/FavouriteChatsList.tsx
@@ -9,7 +9,6 @@ import { useContextSelector } from "use-context-selector"
 import MainSharedContext, { Shared } from "../MainSharedContext.ts"
 import isMobileUI from "../../utils/isMobileUI.ts"
 import ClientCache from "../../ClientCache.ts"
-import { useNavigate } from "react-router"
 import AppStateContext from "../app-state/AppStateContext.ts"
 
 export default function FavouriteChatsList({ ...props }: React.HTMLAttributes<HTMLElement>) {
diff --git a/client/ui/main-page/RecentChatsList.tsx b/client/ui/main-page/RecentChatsList.tsx
index 168c09a..b7ed83c 100644
--- a/client/ui/main-page/RecentChatsList.tsx
+++ b/client/ui/main-page/RecentChatsList.tsx
@@ -2,7 +2,6 @@ import { TextField } from "mdui"
 import RecentsListItem from "./RecentsListItem.tsx"
 import React from "react"
 import RecentChat from "lingchair-client-protocol/RecentChat.ts"
-import { data } from "react-router"
 import isMobileUI from "../../utils/isMobileUI.ts"
 import useAsyncEffect from "../../utils/useAsyncEffect.ts"
 import useEventListener from "../../utils/useEventListener.ts"
diff --git a/client/ui/main-page/RegisterDialog.tsx b/client/ui/main-page/RegisterDialog.tsx
index 884ab79..68633da 100644
--- a/client/ui/main-page/RegisterDialog.tsx
+++ b/client/ui/main-page/RegisterDialog.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { Button, Dialog, TextField } from "mdui"
-import MainSharedContext, { Shared } from '../MainSharedContext'
-import showSnackbar from '../../utils/showSnackbar'
-import showCircleProgressDialog from '../showCircleProgressDialog'
-import getClient from '../../getClient'
-import performAuth from '../../performAuth'
+import {  Dialog, TextField } from "mdui"
+import MainSharedContext, { Shared } from '../MainSharedContext.ts'
+import showSnackbar from '../../utils/showSnackbar.ts'
+import showCircleProgressDialog from '../showCircleProgressDialog.ts'
+import getClient from '../../getClient.ts'
+import performAuth from '../../performAuth.ts'
 import { useContextSelector } from 'use-context-selector'
-import useEventListener from '../../utils/useEventListener'
+import useEventListener from '../../utils/useEventListener.ts'
 
 export default function RegisterDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
     const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
diff --git a/client/utils/isMobileUI.ts b/client/utils/isMobileUI.ts
index bf63608..e02cbf0 100644
--- a/client/utils/isMobileUI.ts
+++ b/client/utils/isMobileUI.ts
@@ -1,4 +1,4 @@
-import data from "../data"
+import data from "../data.ts"
 
 const searchParams = new URL(location.href).searchParams
 
diff --git a/client/utils/useEffectRef.ts b/client/utils/useEffectRef.ts
index 533b79e..77438ed 100644
--- a/client/utils/useEffectRef.ts
+++ b/client/utils/useEffectRef.ts
@@ -1,5 +1,3 @@
-import { Dialog } from "mdui"
-import { BlockerFunction, useBlocker, useNavigate } from "react-router"
 import * as React from 'react'
 
 export default function useEffectRef<T = undefined>(effect: (ref: React.MutableRefObject<T | undefined>) => void | (() => void), deps?: React.DependencyList) {