chore(release): 1.7.1 [skip ci]

## [1.7.1](https://github.com/molvqingtai/WebChat/compare/v1.7.0...v1.7.1) (2024-11-15) ### Bug Fixes * parse icon url error ([7763f34](7763f34d5d)) ### Performance Improvements * add number animation ([eb37dd2](eb37dd2833)) * compatible with rectangular icons ([b860b16](b860b16e90)) * optimize scrollbar ([c5185e4](c5185e419c))
Merge branch 'develop'
2024-11-15 01:10:44 +00:00 · 2024-11-15 09:09:12 +08:00 · 2024-11-15 09:07:13 +08:00 · 2024-11-15 08:55:02 +08:00 · 2024-11-14 22:55:29 +08:00 · 2024-11-14 22:44:03 +08:00
51 changed files with 2093 additions and 3395 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,247 @@
+## [1.7.1](https://github.com/molvqingtai/WebChat/compare/v1.7.0...v1.7.1) (2024-11-15)
+
+
+### Bug Fixes
+
+* parse icon url error ([7763f34](https://github.com/molvqingtai/WebChat/commit/7763f34d5d07a104f8a66e53b05a7f87a4e0da28))
+
+
+### Performance Improvements
+
+* add number animation ([eb37dd2](https://github.com/molvqingtai/WebChat/commit/eb37dd28338d9e5420c91fb3d25c318411bdfd31))
+* compatible with rectangular icons ([b860b16](https://github.com/molvqingtai/WebChat/commit/b860b16e908a744f615c8cea35a3dcd4ca008f1a))
+* optimize scrollbar ([c5185e4](https://github.com/molvqingtai/WebChat/commit/c5185e419c5e175b8bc30e3f2b2207c18b9503b2))
+
+# [1.7.0](https://github.com/molvqingtai/WebChat/compare/v1.6.6...v1.7.0) (2024-11-13)
+
+
+### Features
+
+* ranking of users supporting online websites Closes [#48](https://github.com/molvqingtai/WebChat/issues/48) ([d0fea9e](https://github.com/molvqingtai/WebChat/commit/d0fea9e42d52d0e56171c08ed780066d66ebe3f1))
+
+## [1.6.6](https://github.com/molvqingtai/WebChat/compare/v1.6.5...v1.6.6) (2024-11-09)
+
+
+### Bug Fixes
+
+* the number of online users is inaccurate ([c6301a8](https://github.com/molvqingtai/WebChat/commit/c6301a826ebcf38a34b93a02c8013dd1ef9e7abc))
+
+
+### Performance Improvements
+
+* optimize taost dark mode ([00f0bd0](https://github.com/molvqingtai/WebChat/commit/00f0bd08b04e49f83cee60bb5767acd460a1b5d0))
+* theme mode is compatible with website themes by default ([6222e3f](https://github.com/molvqingtai/WebChat/commit/6222e3f8af1bf4fad2466a9bf88c3b3159478a86))
+
+## [1.6.5](https://github.com/molvqingtai/WebChat/compare/v1.6.4...v1.6.5) (2024-11-07)
+
+
+### Performance Improvements
+
+* delete setup exit animation ([d325be4](https://github.com/molvqingtai/WebChat/commit/d325be4becf562d2232a1a1e9a4e1582e44869a2))
+
+## [1.6.4](https://github.com/molvqingtai/WebChat/compare/v1.6.3...v1.6.4) (2024-11-07)
+
+
+### Performance Improvements
+
+* check message format ([f6864e0](https://github.com/molvqingtai/WebChat/commit/f6864e06be01fd434136901ae85278ed4eab4c03))
+
+## [1.6.3](https://github.com/molvqingtai/WebChat/compare/v1.6.2...v1.6.3) (2024-11-06)
+
+
+### Performance Improvements
+
+* optimize image processing ([9438a31](https://github.com/molvqingtai/WebChat/commit/9438a3169dfda166776610ba6aac1ac168231636))
+
+## [1.6.2](https://github.com/molvqingtai/WebChat/compare/v1.6.1...v1.6.2) (2024-11-04)
+
+
+### Bug Fixes
+
+* incompatible with old data of userInfo, causing crash ([d5ced07](https://github.com/molvqingtai/WebChat/commit/d5ced0718f586ca156e80c56078ae1f3de4ee917))
+
+## [1.6.1](https://github.com/molvqingtai/WebChat/compare/v1.6.0...v1.6.1) (2024-11-03)
+
+
+### Bug Fixes
+
+* sooner style ([7e49ec2](https://github.com/molvqingtai/WebChat/commit/7e49ec210ed706a0ee94b3c2b7b17af719b604e1))
+
+# [1.6.0](https://github.com/molvqingtai/WebChat/compare/v1.5.4...v1.6.0) (2024-11-03)
+
+
+### Features
+
+* support offline message sync [#45](https://github.com/molvqingtai/WebChat/issues/45) ([7c4f655](https://github.com/molvqingtai/WebChat/commit/7c4f65573c591da2a8c8938e14066cee96d15b40))
+
+## [1.5.4](https://github.com/molvqingtai/WebChat/compare/v1.5.3...v1.5.4) (2024-10-31)
+
+
+### Performance Improvements
+
+* support reading image from the clipboard ([362d7db](https://github.com/molvqingtai/WebChat/commit/362d7db7386d978c6d053a3e7262adf844e24f55))
+
+## [1.5.3](https://github.com/molvqingtai/WebChat/compare/v1.5.2...v1.5.3) (2024-10-30)
+
+
+### Bug Fixes
+
+* insertion cursor position is incorrect ([2987c2d](https://github.com/molvqingtai/WebChat/commit/2987c2d85dd84639c06848ddc5cd4dc0b3288538))
+
+## [1.5.2](https://github.com/molvqingtai/WebChat/compare/v1.5.1...v1.5.2) (2024-10-30)
+
+
+### Performance Improvements
+
+* optimize theme style ([7b91944](https://github.com/molvqingtai/WebChat/commit/7b91944fbf60c27d21274ddb7f28f97344c89ef5))
+
+## [1.5.1](https://github.com/molvqingtai/WebChat/compare/v1.5.0...v1.5.1) (2024-10-29)
+
+
+### Bug Fixes
+
+* incompatibility with old data causes app to crash ([bd07bdc](https://github.com/molvqingtai/WebChat/commit/bd07bdc2c3df031d5a04d3eebade5d7fc7672600))
+
+# [1.5.0](https://github.com/molvqingtai/WebChat/compare/v1.4.0...v1.5.0) (2024-10-29)
+
+
+### Features
+
+* support send image button ([a01a93f](https://github.com/molvqingtai/WebChat/commit/a01a93f260c3fefadb1ad1ce0369af3ea8c6b3f0))
+
+# [1.4.0](https://github.com/molvqingtai/WebChat/compare/v1.3.1...v1.4.0) (2024-10-28)
+
+
+### Bug Fixes
+
+* delete bad z-index ([bcdd435](https://github.com/molvqingtai/WebChat/commit/bcdd435e45e0b39d2c3ac45fbe594609165bacd8))
+
+
+### Features
+
+* app button support drag ([4eba638](https://github.com/molvqingtai/WebChat/commit/4eba638a367d4be2dc3d0b3e378298fd98a9ff5d))
+* support [@user](https://github.com/user) syntax ([bef576a](https://github.com/molvqingtai/WebChat/commit/bef576a77bc995e8eaf57de212a233081be34727))
+* support dark mode ([010aa2f](https://github.com/molvqingtai/WebChat/commit/010aa2f45e8cf864ac54fed44668369b5ff8fd9e))
+
+
+### Performance Improvements
+
+* optimize danmuku theme styles ([4f6eb56](https://github.com/molvqingtai/WebChat/commit/4f6eb560fe88e5e7e5d5b920666ed5e19b952fe9))
+* optimize header theme styles ([025166e](https://github.com/molvqingtai/WebChat/commit/025166ead5529f66c26810e6b7ab6ba07dd874aa))
+* optimize theme styles ([2d051fe](https://github.com/molvqingtai/WebChat/commit/2d051fedd763427d10ac2c0c1a0bd74fe7788501))
+* reset app position when window resize ([eee1735](https://github.com/molvqingtai/WebChat/commit/eee17356545515905813f5937b4dbe183fb081ed))
+
+## [1.3.1](https://github.com/molvqingtai/WebChat/compare/v1.3.0...v1.3.1) (2024-10-16)
+
+
+### Bug Fixes
+
+* missing tabs permission ([3cfc16c](https://github.com/molvqingtai/WebChat/commit/3cfc16c9ee0f3f46c8b5692c02e5c569f40744c9))
+
+# [1.3.0](https://github.com/molvqingtai/WebChat/compare/v1.2.2...v1.3.0) (2024-10-12)
+
+
+### Bug Fixes
+
+* p2p use artico ([a0a8462](https://github.com/molvqingtai/WebChat/commit/a0a8462f5ff55a50511e335f70f5b814f2713358))
+
+
+### Features
+
+* support notification ([9898718](https://github.com/molvqingtai/WebChat/commit/9898718b1a14605d140852faca74b8af12f9b2a2))
+
+
+### Performance Improvements
+
+* notification supports clicking to open the source website ([653229c](https://github.com/molvqingtai/WebChat/commit/653229c8fa1ef748c84c4a5cec756a42f51933ab))
+
+## [1.2.2](https://github.com/molvqingtai/WebChat/compare/v1.2.1...v1.2.2) (2024-10-11)
+
+
+### Bug Fixes
+
+* danmuku message ellipsis ([e8e243e](https://github.com/molvqingtai/WebChat/commit/e8e243ee096a0fb22183170ef3c0005291b72870))
+* online text overflow ([d4e42c6](https://github.com/molvqingtai/WebChat/commit/d4e42c68caf8e2e080854f244328c1e519ed6338))
+
+## [1.2.1](https://github.com/molvqingtai/WebChat/compare/v1.2.0...v1.2.1) (2024-10-10)
+
+
+### Bug Fixes
+
+* avatar is not displayed completely ([de97d05](https://github.com/molvqingtai/WebChat/commit/de97d0552894a33f2b15dd232598c40335d941a4))
+* the text in the button is not visible in dark mode ([d6652cb](https://github.com/molvqingtai/WebChat/commit/d6652cb2a43116016af32697b52d5bba276e6d2c))
+* the text in the textarea is not visible in dark mode ([d75a191](https://github.com/molvqingtai/WebChat/commit/d75a191dedd40a02fc58707ac60cccd9ff020c5f))
+
+
+### Performance Improvements
+
+* change https://github.com/weizhenye/Danmaku to https://github.com/imtaotao/danmu ([05ee49e](https://github.com/molvqingtai/WebChat/commit/05ee49e7c4019f32c654f2f935b734ec2383bebc))
+* submit store flow ([5235a6e](https://github.com/molvqingtai/WebChat/commit/5235a6ee8703597df227942208b4075bff880c2d))
+
+# [1.2.0](https://github.com/molvqingtai/WebChat/compare/v1.1.6...v1.2.0) (2024-10-08)
+
+
+### Features
+
+* support display of online user list ([4c7137d](https://github.com/molvqingtai/WebChat/commit/4c7137d045a127bef6e8a3afe319f15a480b149c))
+
+## [1.1.6](https://github.com/molvqingtai/WebChat/compare/v1.1.5...v1.1.6) (2024-10-04)
+
+
+### Bug Fixes
+
+* it should not be sent when composing ([8ee9ed6](https://github.com/molvqingtai/WebChat/commit/8ee9ed6259f731fa43ef0d458a7e040ad1618d12))
+
+## [1.1.5](https://github.com/molvqingtai/WebChat/compare/v1.1.4...v1.1.5) (2024-10-02)
+
+
+### Bug Fixes
+
+* multiple tabs display duplicate online users ([8b843ac](https://github.com/molvqingtai/WebChat/commit/8b843ac45cc415676641b66dbfb21329c3f7c962))
+
+## [1.1.4](https://github.com/molvqingtai/WebChat/compare/v1.1.3...v1.1.4) (2024-10-02)
+
+
+### Bug Fixes
+
+* firfox requestAnimationFrame error ([65bf9b2](https://github.com/molvqingtai/WebChat/commit/65bf9b2419ec65b6c53355986df9a0e2eb593d6f))
+
+## [1.1.3](https://github.com/molvqingtai/WebChat/compare/v1.1.2...v1.1.3) (2024-10-02)
+
+
+### Performance Improvements
+
+* add version link ([4551ad2](https://github.com/molvqingtai/WebChat/commit/4551ad2964e21e1bf85866b79acd25bf556aa26d))
+
+## [1.1.2](https://github.com/molvqingtai/WebChat/compare/v1.1.1...v1.1.2) (2024-10-02)
+
+
+### Performance Improvements
+
+* support unread status ([1f44af8](https://github.com/molvqingtai/WebChat/commit/1f44af873c57aaed2eb3d845342ad427ce1d8a4f))
+
+## [1.1.1](https://github.com/molvqingtai/WebChat/compare/v1.1.0...v1.1.1) (2024-10-01)
+
+
+### Performance Improvements
+
+* a tag use Link component ([fce64b7](https://github.com/molvqingtai/WebChat/commit/fce64b744c2ada3532ff3d4b78d08559c718ca1a))
+
+# [1.1.0](https://github.com/molvqingtai/WebChat/compare/v1.0.29...v1.1.0) (2024-09-30)
+
+
+### Features
+
+* support danmaku ([999a55c](https://github.com/molvqingtai/WebChat/commit/999a55c65f78d0a1a0938c354a8453f2aa39fcd0))
+
+## [1.0.29](https://github.com/molvqingtai/WebChat/compare/v1.0.28...v1.0.29) (2024-09-29)
+
+
+### Bug Fixes
+
+* compile by environment ([52cd203](https://github.com/molvqingtai/WebChat/commit/52cd203a53ec10dda48572659d0e9959667575be))
+* error when leaving the room without joining ([8476595](https://github.com/molvqingtai/WebChat/commit/8476595011c0e38929e6ebaa44ab7d8d5292a8e3))
+
 ## [1.0.28](https://github.com/molvqingtai/WebChat/compare/v1.0.27...v1.0.28) (2024-09-28)


--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "web-chat",
  "displayName": "WebChat",
-  "version": "1.0.0",
+  "version": "1.7.1",
  "description": "Chat with anyone on any website.",
  "type": "module",
  "scripts": {
@ -45,38 +45,39 @@
  "homepage": "https://github.com/molvqingtai/WebChat",
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
-    "@lottiefiles/dotlottie-react": "^0.9.3",
+    "@number-flow/react": "^0.3.2",
    "@perfsee/jsonr": "^1.13.0",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-hover-card": "^1.1.2",
-    "@radix-ui/react-icons": "^1.3.1",
+    "@radix-ui/react-icons": "^1.3.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-popover": "^1.1.2",
    "@radix-ui/react-portal": "^1.1.2",
    "@radix-ui/react-presence": "^1.1.1",
    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.2.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.1",
    "@resreq/event-hub": "^1.6.0",
    "@resreq/timer": "^1.1.6",
    "@rtco/client": "^0.2.17",
    "@tailwindcss/typography": "^0.5.15",
-    "@webext-core/messaging": "^2.0.2",
+    "@webcomponents/custom-elements": "^1.6.0",
+    "@webext-core/messaging": "^2.1.0",
    "@webext-core/proxy-service": "^1.2.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "danmu": "^0.14.0",
    "date-fns": "^4.1.0",
-    "framer-motion": "^11.11.11",
+    "framer-motion": "^11.11.17",
    "idb-keyval": "^6.2.1",
-    "lucide-react": "^0.454.0",
+    "lucide-react": "^0.456.0",
    "nanoid": "^5.0.8",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.1",
+    "react-hook-form": "^7.53.2",
    "react-markdown": "^9.0.1",
    "react-use": "^17.5.1",
    "react-virtuoso": "^4.12.0",
@ -86,17 +87,16 @@
    "remesh-logger": "^4.1.0",
    "remesh-react": "^4.1.2",
    "rxjs": "^7.8.1",
-    "sonner": "^1.6.1",
+    "sonner": "^1.7.0",
    "tailwind-merge": "^2.5.4",
-    "trystero": "^0.20.0",
    "type-fest": "^4.26.1",
-    "unstorage": "1.12.0",
+    "unstorage": "^1.13.1",
    "valibot": "1.0.0-beta.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^19.5.0",
    "@commitlint/config-conventional": "^19.5.0",
-    "@eslint-react/eslint-plugin": "^1.15.2",
+    "@eslint-react/eslint-plugin": "^1.16.1",
    "@eslint/js": "^9.14.0",
    "@semantic-release/changelog": "^6.0.3",
    "@semantic-release/exec": "^6.0.3",
@ -104,10 +104,10 @@
    "@types/eslint": "^9.6.1",
    "@types/eslint__js": "^8.42.3",
    "@types/eslint-plugin-tailwindcss": "^3.17.0",
-    "@types/node": "^22.8.6",
+    "@types/node": "^22.9.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/parser": "^8.12.2",
+    "@typescript-eslint/parser": "^8.14.0",
    "@vitejs/plugin-react": "^4.3.3",
    "autoprefixer": "^10.4.20",
    "cross-env": "^7.0.3",
@ -115,23 +115,23 @@
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-tailwindcss": "^3.17.5",
-    "globals": "^15.11.0",
+    "globals": "^15.12.0",
    "husky": "^9.1.6",
    "jiti": "^2.4.0",
    "lint-staged": "^15.2.10",
    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
    "postcss-rem-to-responsive-pixel": "^6.0.2",
    "prettier": "^3.3.3",
    "rimraf": "^6.0.1",
    "semantic-release": "^24.2.0",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.15",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
+    "typescript-eslint": "^8.14.0",
    "vite-plugin-svgr": "^4.3.0",
    "webext-bridge": "^6.0.1",
-    "wxt": "^0.19.13"
+    "wxt": "^0.19.15"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --fix --flag unstable_ts_config"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/content/App.tsx
+++ b/src/app/content/App.tsx
@ -1,21 +1,22 @@
+import '@webcomponents/custom-elements'
 import Header from '@/app/content/views/Header'
 import Footer from '@/app/content/views/Footer'
 import Main from '@/app/content/views/Main'
 import AppButton from '@/app/content/views/AppButton'
 import AppMain from '@/app/content/views/AppMain'
 import { useRemeshDomain, useRemeshQuery, useRemeshSend } from 'remesh-react'
-import RoomDomain from '@/domain/Room'
+import ChatRoomDomain from '@/domain/ChatRoom'
 import UserInfoDomain from '@/domain/UserInfo'
 import Setup from '@/app/content/views/Setup'
 import MessageListDomain from '@/domain/MessageList'
 import { useEffect, useRef } from 'react'
 import { Toaster } from 'sonner'
-import { AnimatePresence, motion } from 'framer-motion'

 import DanmakuContainer from './components/DanmakuContainer'
 import DanmakuDomain from '@/domain/Danmaku'
 import AppStatusDomain from '@/domain/AppStatus'
-import { cn } from '@/utils'
+import { checkDarkMode, cn } from '@/utils'
+import VirtualRoomDomain from '@/domain/VirtualRoom'

 /**
 * Fix requestAnimationFrame error in jest
@ -28,7 +29,8 @@ if (import.meta.env.FIREFOX) {

 export default function App() {
  const send = useRemeshSend()
-  const roomDomain = useRemeshDomain(RoomDomain())
+  const chatRoomDomain = useRemeshDomain(ChatRoomDomain())
+  const virtualRoomDomain = useRemeshDomain(VirtualRoomDomain())
  const userInfoDomain = useRemeshDomain(UserInfoDomain())
  const messageListDomain = useRemeshDomain(MessageListDomain())
  const danmakuDomain = useRemeshDomain(DanmakuDomain())
@ -38,23 +40,34 @@ export default function App() {
  const userInfoLoadFinished = useRemeshQuery(userInfoDomain.query.UserInfoLoadIsFinishedQuery())
  const appStatusDomain = useRemeshDomain(AppStatusDomain())
  const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
+  const chatRoomJoinIsFinished = useRemeshQuery(chatRoomDomain.query.JoinIsFinishedQuery())
+  const virtualRoomJoinIsFinished = useRemeshQuery(virtualRoomDomain.query.JoinIsFinishedQuery())

  const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
  const notUserInfo = userInfoLoadFinished && !userInfoSetFinished

+  const joinRoom = () => {
+    send(chatRoomDomain.command.JoinRoomCommand())
+    send(virtualRoomDomain.command.JoinRoomCommand())
+  }
+
+  const leaveRoom = () => {
+    chatRoomJoinIsFinished && send(chatRoomDomain.command.LeaveRoomCommand())
+    virtualRoomJoinIsFinished && send(virtualRoomDomain.command.LeaveRoomCommand())
+  }
+
  useEffect(() => {
    if (messageListLoadFinished) {
      if (userInfoSetFinished) {
-        send(roomDomain.command.JoinRoomCommand())
+        joinRoom()
      } else {
        // Clear simulated data when refreshing on the setup page
        send(messageListDomain.command.ClearListCommand())
      }
    }
+    return () => leaveRoom()
  }, [userInfoSetFinished, messageListLoadFinished])

-  const danmakuContainerRef = useRef<HTMLDivElement>(null)
-
  useEffect(() => {
    danmakuIsEnabled && send(danmakuDomain.command.MountCommand(danmakuContainerRef.current!))
    return () => {
@ -62,31 +75,48 @@ export default function App() {
    }
  }, [danmakuIsEnabled])

-  return (
-    appStatusLoadIsFinished && (
-      <div id="app" className={cn('contents', userInfo?.themeMode)}>
-        <AppMain>
-          <Header />
-          <Main />
-          <Footer />
-          <AnimatePresence>
-            {notUserInfo && (
-              <motion.div
-                className="contents"
-                initial={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.3 }}
-              >
-                <Setup></Setup>
-              </motion.div>
-            )}
-          </AnimatePresence>
-          <Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster>
-        </AppMain>
-        <AppButton></AppButton>
+  useEffect(() => {
+    window.addEventListener('beforeunload', leaveRoom)
+    return () => {
+      window.removeEventListener('beforeunload', leaveRoom)
+    }
+  }, [])

-        <DanmakuContainer ref={danmakuContainerRef} />
-      </div>
-    )
+  const themeMode =
+    userInfo?.themeMode === 'system'
+      ? checkDarkMode()
+        ? 'dark'
+        : 'light'
+      : (userInfo?.themeMode ?? (checkDarkMode() ? 'dark' : 'light'))
+
+  const danmakuContainerRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div id="app" className={cn('contents', themeMode)}>
+      {appStatusLoadIsFinished && (
+        <>
+          <AppMain>
+            <Header />
+            <Main />
+            <Footer />
+            {notUserInfo && <Setup></Setup>}
+            <Toaster
+              richColors
+              theme={themeMode}
+              offset="70px"
+              visibleToasts={1}
+              toastOptions={{
+                classNames: {
+                  toast: 'dark:bg-slate-950 border dark:border-slate-600'
+                }
+              }}
+              position="top-center"
+            ></Toaster>
+          </AppMain>
+          <AppButton></AppButton>
+        </>
+      )}
+      <DanmakuContainer ref={danmakuContainerRef} />
+    </div>
  )
 }
--- a/src/app/content/components/DanmakuMessage.tsx
+++ b/src/app/content/components/DanmakuMessage.tsx
@ -1,6 +1,6 @@
 import { Avatar, AvatarFallback } from '@/components/ui/Avatar'
 import { Button } from '@/components/ui/Button'
-import { TextMessage } from '@/domain/Room'
+import { TextMessage } from '@/domain/ChatRoom'
 import { cn } from '@/utils'
 import { AvatarImage } from '@radix-ui/react-avatar'
 import { FC, MouseEvent } from 'react'
--- a/src/app/content/components/LikeButton.tsx
+++ b/src/app/content/components/LikeButton.tsx
@ -1,6 +1,7 @@
 import { type MouseEvent, type FC, type ReactElement } from 'react'
 import { Button } from '@/components/ui/Button'
 import { cn } from '@/utils'
+import NumberFlow from '@number-flow/react'

 export interface LikeButtonIconProps {
  children: JSX.Element
@ -40,7 +41,11 @@ const LikeButton: FC<LikeButtonProps> & { Icon: FC<LikeButtonIconProps> } = ({
      size="xs"
    >
      {children}
-      {!!count && <span className="min-w-0 text-xs">{count}</span>}
+      {!!count && (
+        <span className="min-w-0 text-xs">
+          {import.meta.env.FIREFOX ? <span className="tabular-nums">{count}</span> : <NumberFlow value={count} />}
+        </span>
+      )}
    </Button>
  )
 }
--- a/src/app/content/components/MessageItem.tsx
+++ b/src/app/content/components/MessageItem.tsx
@ -1,5 +1,5 @@
 import { type FC } from 'react'
-import { FrownIcon, ThumbsUpIcon } from 'lucide-react'
+import { FrownIcon, HeartIcon } from 'lucide-react'
 import LikeButton from './LikeButton'
 import FormatDate from './FormatDate'
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/Avatar'
@ -71,7 +71,7 @@ const MessageItem: FC<MessageItemProps> = (props) => {
              count={props.data.likeUsers.length}
            >
              <LikeButton.Icon>
-                <ThumbsUpIcon size={14}></ThumbsUpIcon>
+                <HeartIcon size={14}></HeartIcon>
              </LikeButton.Icon>
            </LikeButton>
            <LikeButton
--- a/src/app/content/index.tsx
+++ b/src/app/content/index.tsx
@ -11,10 +11,12 @@ import { LocalStorageImpl, IndexDBStorageImpl, BrowserSyncStorageImpl } from '@/
 import { DanmakuImpl } from '@/domain/impls/Danmaku'
 import { NotificationImpl } from '@/domain/impls/Notification'
 import { ToastImpl } from '@/domain/impls/Toast'
-// import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
-import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
-import '@/assets/styles/tailwind.css'
+import { ChatRoomImpl } from '@/domain/impls/ChatRoom'
+import { VirtualRoomImpl } from '@/domain/impls/VirtualRoom'
+// Remove import after merging: https://github.com/emilkowalski/sonner/pull/508
 import '@/assets/styles/sonner.css'
+import '@/assets/styles/overlay.css'
+import '@/assets/styles/tailwind.css'
 import NotificationDomain from '@/domain/Notification'
 import { createElement } from '@/utils'

@ -36,7 +38,8 @@ export default defineContentScript({
        LocalStorageImpl,
        IndexDBStorageImpl,
        BrowserSyncStorageImpl,
-        PeerRoomImpl,
+        ChatRoomImpl,
+        VirtualRoomImpl,
        ToastImpl,
        DanmakuImpl,
        NotificationImpl
@ -56,13 +59,13 @@ export default defineContentScript({
        container.append(app)
        const root = createRoot(app)
        root.render(
-          // <React.StrictMode>
-          <RemeshRoot store={store}>
-            <RemeshScope domains={[NotificationDomain()]}>
-              <App />
-            </RemeshScope>
-          </RemeshRoot>
-          // </React.StrictMode>
+          <React.StrictMode>
+            <RemeshRoot store={store}>
+              <RemeshScope domains={[NotificationDomain()]}>
+                <App />
+              </RemeshScope>
+            </RemeshRoot>
+          </React.StrictMode>
        )
        return root
      },
--- a/src/app/content/views/AppButton/index.tsx
+++ b/src/app/content/views/AppButton/index.tsx
@ -7,7 +7,7 @@ import { Button } from '@/components/ui/Button'
 import { EVENT } from '@/constants/event'
 import UserInfoDomain from '@/domain/UserInfo'
 import useTriggerAway from '@/hooks/useTriggerAway'
-import { checkSystemDarkMode, cn } from '@/utils'
+import { checkDarkMode, cn } from '@/utils'
 import LogoIcon0 from '@/assets/images/logo-0.svg'
 import LogoIcon1 from '@/assets/images/logo-1.svg'
 import LogoIcon2 from '@/assets/images/logo-2.svg'
@ -18,7 +18,7 @@ import LogoIcon6 from '@/assets/images/logo-6.svg'
 import AppStatusDomain from '@/domain/AppStatus'
 import { getDay } from 'date-fns'
 import { messenger } from '@/messenger'
-import useDarg from '@/hooks/useDarg'
+import useDraggable from '@/hooks/useDraggable'
 import useWindowResize from '@/hooks/useWindowResize'

 export interface AppButtonProps {
@ -36,8 +36,7 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {

  const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())]

-  const isDarkMode =
-    userInfo?.themeMode === 'dark' ? true : userInfo?.themeMode === 'light' ? false : checkSystemDarkMode()
+  const isDarkMode = userInfo?.themeMode === 'dark' ? true : userInfo?.themeMode === 'light' ? false : checkDarkMode()

  const [menuOpen, setMenuOpen] = useState(false)

@ -45,13 +44,13 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
    x,
    y,
    setRef: appButtonRef
-  } = useDarg({
+  } = useDraggable({
    initX: appPosition.x,
    initY: appPosition.y,
    minX: 50,
    maxX: window.innerWidth - 50,
    maxY: window.innerHeight - 22,
-    minY: window.innerHeight / 2
+    minY: 750
  })

  useWindowResize(({ width, height }) => {
@ -107,7 +106,7 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
            <Button
              onClick={handleSwitchTheme}
              variant="outline"
-              className="relative size-10 overflow-hidden rounded-full p-0 shadow"
+              className="relative size-10 overflow-hidden rounded-full p-0 shadow dark:border-slate-600"
            >
              <div
                className={cn(
@ -121,10 +120,18 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
              </div>
            </Button>

-            <Button onClick={handleOpenOptionsPage} variant="outline" className="size-10 rounded-full p-0 shadow">
+            <Button
+              onClick={handleOpenOptionsPage}
+              variant="outline"
+              className="size-10 rounded-full p-0 shadow dark:border-slate-600"
+            >
              <SettingsIcon size={20} />
            </Button>
-            <Button ref={appButtonRef} variant="outline" className="size-10 cursor-grab rounded-full p-0 shadow">
+            <Button
+              ref={appButtonRef}
+              variant="outline"
+              className="size-10 cursor-grab rounded-full p-0 shadow dark:border-slate-600"
+            >
              <HandIcon size={20} />
            </Button>
          </motion.div>
--- a/src/app/content/views/Footer/index.tsx
+++ b/src/app/content/views/Footer/index.tsx
@ -6,7 +6,7 @@ import EmojiButton from '../../components/EmojiButton'
 import { Button } from '@/components/ui/Button'
 import MessageInputDomain from '@/domain/MessageInput'
 import { MESSAGE_MAX_LENGTH, WEB_RTC_MAX_MESSAGE_SIZE } from '@/constants/config'
-import RoomDomain from '@/domain/Room'
+import ChatRoomDomain from '@/domain/ChatRoom'
 import useCursorPosition from '@/hooks/useCursorPosition'
 import useShareRef from '@/hooks/useShareRef'
 import { Presence } from '@radix-ui/react-presence'
@ -25,12 +25,12 @@ import { nanoid } from 'nanoid'
 const Footer: FC = () => {
  const send = useRemeshSend()
  const toastDomain = useRemeshDomain(ToastDomain())
-  const roomDomain = useRemeshDomain(RoomDomain())
+  const chatRoomDomain = useRemeshDomain(ChatRoomDomain())
  const messageInputDomain = useRemeshDomain(MessageInputDomain())
  const message = useRemeshQuery(messageInputDomain.query.MessageQuery())
  const userInfoDomain = useRemeshDomain(UserInfoDomain())
  const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
-  const userList = useRemeshQuery(roomDomain.query.UserListQuery())
+  const userList = useRemeshQuery(chatRoomDomain.query.UserListQuery())

  const inputRef = useRef<HTMLTextAreaElement>(null)
  const { x, y, selectionStart, selectionEnd, setRef } = useCursorPosition()
@ -143,7 +143,7 @@ const Footer: FC = () => {
      return send(toastDomain.command.WarningCommand('Message size cannot exceed 256KiB.'))
    }

-    send(roomDomain.command.SendTextMessageCommand({ body: transformedMessage, atUsers }))
+    send(chatRoomDomain.command.SendTextMessageCommand({ body: transformedMessage, atUsers }))
    send(messageInputDomain.command.ClearCommand())
  }

@ -250,7 +250,13 @@ const Footer: FC = () => {
  const handleInjectImage = async (file: File) => {
    try {
      setInputLoading(true)
-      const blob = await compressImage({ input: file, targetSize: 30 * 1024, outputType: 'image/webp' })
+
+      const blob = await compressImage({
+        input: file,
+        targetSize: 30 * 1024,
+        outputType: file.size > 30 * 1024 ? 'image/webp' : undefined
+      })
+
      const base64 = await blobToBase64(blob)
      const hash = nanoid()
      const newMessage = `${message.slice(0, selectionEnd)}![Image](hash:${hash})${message.slice(selectionEnd)}`
--- a/src/app/content/views/Header/index.tsx
+++ b/src/app/content/views/Header/index.tsx
@ -5,21 +5,44 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/H
 import { Button } from '@/components/ui/Button'
 import { cn, getSiteInfo } from '@/utils'
 import { useRemeshDomain, useRemeshQuery } from 'remesh-react'
-import RoomDomain from '@/domain/Room'
+import ChatRoomDomain from '@/domain/ChatRoom'
+import VirtualRoomDomain, { FromInfo, RoomUser } from '@/domain/VirtualRoom'
 import { ScrollArea } from '@/components/ui/ScrollArea'
 import { Virtuoso } from 'react-virtuoso'
+import AvatarCircles from '@/components/magicui/AvatarCircles'
+import Link from '@/components/Link'
+import NumberFlow from '@number-flow/react'

 const Header: FC = () => {
  const siteInfo = getSiteInfo()
-  const roomDomain = useRemeshDomain(RoomDomain())
-  const userList = useRemeshQuery(roomDomain.query.UserListQuery())
-  const onlineCount = userList.length
+  const chatRoomDomain = useRemeshDomain(ChatRoomDomain())
+  const virtualRoomDomain = useRemeshDomain(VirtualRoomDomain())
+  const chatUserList = useRemeshQuery(chatRoomDomain.query.UserListQuery())
+  const virtualUserList = useRemeshQuery(virtualRoomDomain.query.UserListQuery())
+  const chatOnlineCount = chatUserList.length

-  const [scrollParentRef, setScrollParentRef] = useState<HTMLDivElement | null>(null)
+  const virtualOnlineGroup = virtualUserList
+    .flatMap((user) => user.fromInfos.map((from) => ({ from, user })))
+    .reduce<(FromInfo & { users: RoomUser[] })[]>((acc, item) => {
+      const existSite = acc.find((group) => group.origin === item.from.origin)
+      if (existSite) {
+        const existUser = existSite.users.find((user) => user.userId === item.user.userId)
+        !existUser && existSite.users.push(item.user)
+      } else {
+        acc.push({ ...item.from, users: [item.user] })
+      }
+      return acc
+    }, [])
+    .sort((a, b) => b.users.length - a.users.length)
+
+  const [chatUserListScrollParentRef, setChatUserListScrollParentRef] = useState<HTMLDivElement | null>(null)
+  const [virtualOnlineGroupScrollParentRef, setVirtualOnlineGroupScrollParentRef] = useState<HTMLDivElement | null>(
+    null
+  )

  return (
    <div className="z-10 grid h-12 grid-flow-col grid-cols-[theme('spacing.20')_auto_theme('spacing.20')] items-center justify-between rounded-t-xl bg-white px-4 backdrop-blur-lg dark:bg-slate-950">
-      <Avatar className="size-8">
+      <Avatar className="size-8 rounded-sm">
        <AvatarImage src={siteInfo.icon} alt="favicon" />
        <AvatarFallback>
          <Globe2Icon size="100%" className="text-gray-400" />
@ -27,60 +50,111 @@ const Header: FC = () => {
      </Avatar>
      <HoverCard>
        <HoverCardTrigger asChild>
-          <Button className="overflow-hidden p-2" variant="link">
+          <Button className="overflow-hidden rounded-md p-2" variant="link">
            <span className="truncate text-lg font-semibold text-slate-600 dark:text-slate-50">
              {siteInfo.hostname.replace(/^www\./i, '')}
            </span>
          </Button>
        </HoverCardTrigger>
-        <HoverCardContent className="w-80 rounded-lg">
-          <div className="grid grid-cols-[auto_1fr] gap-x-4">
-            <Avatar className="size-14">
-              <AvatarImage src={siteInfo.icon} alt="favicon" />
-              <AvatarFallback>
-                <Globe2Icon size="100%" className="text-gray-400" />
-              </AvatarFallback>
-            </Avatar>
-            <div className="grid items-center">
-              <h4 className="truncate text-sm font-semibold">{siteInfo.title}</h4>
-              {siteInfo.description && (
-                <p className="line-clamp-2 max-h-8 text-xs text-slate-500 dark:text-slate-300">
-                  {siteInfo.description}
-                </p>
+        <HoverCardContent className="w-80 rounded-lg p-0">
+          <ScrollArea type="scroll" className="max-h-96 min-h-[72px] p-2" ref={setVirtualOnlineGroupScrollParentRef}>
+            <Virtuoso
+              data={virtualOnlineGroup}
+              defaultItemHeight={56}
+              customScrollParent={virtualOnlineGroupScrollParentRef!}
+              itemContent={(_index, site) => (
+                <Link
+                  underline={false}
+                  href={site.origin}
+                  className="grid cursor-pointer grid-cols-[auto_1fr] items-center gap-x-2 rounded-lg px-2 py-1.5 hover:bg-accent hover:text-accent-foreground"
+                >
+                  <Avatar className="size-10 rounded-sm">
+                    <AvatarImage src={site.icon} alt="favicon" />
+                    <AvatarFallback>
+                      <Globe2Icon size="100%" className="text-gray-400" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="grid items-center">
+                    <div className="flex items-center gap-x-1 overflow-hidden">
+                      <h4 className="flex-1 truncate text-sm font-semibold">{site.hostname.replace(/^www\./i, '')}</h4>
+                      <div className="shrink-0 text-sm">
+                        <div className="flex items-center gap-x-1 text-nowrap text-xs text-slate-500">
+                          <div className="flex items-center gap-x-1 pt-px">
+                            <span className="relative flex size-2">
+                              <span
+                                className={cn(
+                                  'absolute inline-flex size-full animate-ping rounded-full opacity-75',
+                                  site.users.length > 1 ? 'bg-green-400' : 'bg-orange-400'
+                                )}
+                              ></span>
+                              <span
+                                className={cn(
+                                  'relative inline-flex size-full rounded-full',
+                                  site.users.length > 1 ? 'bg-green-500' : 'bg-orange-500'
+                                )}
+                              ></span>
+                            </span>
+                            <span className="flex items-center leading-none dark:text-slate-50">
+                              <span className="py-[0.25em]">ONLINE</span>
+                            </span>
+                          </div>
+                          {import.meta.env.FIREFOX ? (
+                            <span className="tabular-nums">{site.users.length}</span>
+                          ) : (
+                            <NumberFlow className="tabular-nums" willChange value={site.users.length} />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <AvatarCircles max={9} size="xs" avatarUrls={site.users.map((user) => user.userAvatar)} />
+                  </div>
+                </Link>
              )}
-            </div>
-          </div>
+            ></Virtuoso>
+          </ScrollArea>
        </HoverCardContent>
      </HoverCard>
      <HoverCard>
        <HoverCardTrigger asChild>
-          <Button className="p-0" variant="link">
-            <div className="flex items-center gap-x-1 text-nowrap text-xs text-slate-500">
-              <span className="relative flex size-2">
-                <span
-                  className={cn(
-                    'absolute inline-flex size-full animate-ping rounded-full opacity-75',
-                    onlineCount > 1 ? 'bg-green-400' : 'bg-orange-400'
-                  )}
-                ></span>
-                <span
-                  className={cn(
-                    'relative inline-flex size-2 rounded-full',
-                    onlineCount > 1 ? 'bg-green-500' : 'bg-orange-500'
-                  )}
-                ></span>
-              </span>
-              <span className="dark:text-slate-50">ONLINE {onlineCount > 99 ? '99+' : onlineCount}</span>
+          <Button className=" rounded-md p-0  hover:no-underline" variant="link">
+            <div className="relative flex items-center gap-x-1 text-nowrap text-xs  text-slate-500 hover:after:absolute hover:after:bottom-0  hover:after:left-0 hover:after:h-px hover:after:w-full hover:after:bg-black">
+              <div className="flex items-center gap-x-1 pt-px">
+                <span className="relative flex size-2">
+                  <span
+                    className={cn(
+                      'absolute inline-flex size-full animate-ping rounded-full opacity-75',
+                      chatOnlineCount > 1 ? 'bg-green-400' : 'bg-orange-400'
+                    )}
+                  ></span>
+                  <span
+                    className={cn(
+                      'relative inline-flex size-full rounded-full',
+                      chatOnlineCount > 1 ? 'bg-green-500' : 'bg-orange-500'
+                    )}
+                  ></span>
+                </span>
+                <span className="flex items-center leading-none dark:text-slate-50">
+                  <span className="py-[0.25em]">ONLINE</span>
+                </span>
+              </div>
+              {import.meta.env.FIREFOX ? (
+                <span className="tabular-nums">{Math.min(chatUserList.length, 99)}</span>
+              ) : (
+                <span className="tabular-nums">
+                  <NumberFlow className="tabular-nums" willChange value={Math.min(chatUserList.length, 99)} />
+                  {chatUserList.length > 99 && <span className="text-xs">+</span>}
+                </span>
+              )}
            </div>
          </Button>
        </HoverCardTrigger>
        <HoverCardContent className="w-36 rounded-lg p-0">
-          <ScrollArea className="max-h-[204px] min-h-9 p-1" ref={setScrollParentRef}>
+          <ScrollArea type="scroll" className="max-h-[204px] min-h-9 p-1" ref={setChatUserListScrollParentRef}>
            <Virtuoso
-              data={userList}
+              data={chatUserList}
              defaultItemHeight={28}
-              customScrollParent={scrollParentRef!}
-              itemContent={(index, user) => (
+              customScrollParent={chatUserListScrollParentRef!}
+              itemContent={(_index, user) => (
                <div className={cn('flex  items-center gap-x-2 rounded-md px-2 py-1.5 outline-none')}>
                  <Avatar className="size-4 shrink-0">
                    <AvatarImage className="size-full" src={user.userAvatar} alt="avatar" />
--- a/src/app/content/views/Main/index.tsx
+++ b/src/app/content/views/Main/index.tsx
@ -5,13 +5,13 @@ import MessageList from '../../components/MessageList'
 import MessageItem from '../../components/MessageItem'
 import PromptItem from '../../components/PromptItem'
 import UserInfoDomain from '@/domain/UserInfo'
-import RoomDomain, { MessageType } from '@/domain/Room'
+import ChatRoomDomain, { MessageType } from '@/domain/ChatRoom'
 import MessageListDomain from '@/domain/MessageList'

 const Main: FC = () => {
  const send = useRemeshSend()
  const messageListDomain = useRemeshDomain(MessageListDomain())
-  const roomDomain = useRemeshDomain(RoomDomain())
+  const chatRoomDomain = useRemeshDomain(ChatRoomDomain())
  const userInfoDomain = useRemeshDomain(UserInfoDomain())
  const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
  const _messageList = useRemeshQuery(messageListDomain.query.ListQuery())
@ -29,11 +29,11 @@ const Main: FC = () => {
    .toSorted((a, b) => a.sendTime - b.sendTime)

  const handleLikeChange = (messageId: string) => {
-    send(roomDomain.command.SendLikeMessageCommand(messageId))
+    send(chatRoomDomain.command.SendLikeMessageCommand(messageId))
  }

  const handleHateChange = (messageId: string) => {
-    send(roomDomain.command.SendHateMessageCommand(messageId))
+    send(chatRoomDomain.command.SendHateMessageCommand(messageId))
  }

  return (
--- a/src/app/content/views/Setup/index.tsx
+++ b/src/app/content/views/Setup/index.tsx
@ -2,7 +2,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar'
 import { MAX_AVATAR_SIZE } from '@/constants/config'
 import MessageListDomain, { Message, MessageType } from '@/domain/MessageList'
 import UserInfoDomain, { UserInfo } from '@/domain/UserInfo'
-import { checkSystemDarkMode, generateRandomAvatar, generateRandomName } from '@/utils'
+import { generateRandomAvatar, generateRandomName } from '@/utils'
 import { UserIcon } from 'lucide-react'
 import { nanoid } from 'nanoid'
 import { FC, useEffect, useState } from 'react'
@ -39,7 +39,7 @@ const generateUserInfo = async (): Promise<UserInfo> => {
    name: generateRandomName(),
    avatar: await generateRandomAvatar(MAX_AVATAR_SIZE),
    createTime: Date.now(),
-    themeMode: checkSystemDarkMode() ? 'dark' : 'system',
+    themeMode: 'system',
    danmakuEnabled: true,
    notificationEnabled: true,
    notificationType: 'all'
@ -71,8 +71,8 @@ const Setup: FC = () => {
  const [userInfo, setUserInfo] = useState<UserInfo>()

  const handleSetup = () => {
-    send(userInfoDomain.command.UpdateUserInfoCommand(userInfo!))
    send(messageListDomain.command.ClearListCommand())
+    send(userInfoDomain.command.UpdateUserInfoCommand(userInfo!))
  }

  const refreshUserInfo = async () => {
--- a/src/app/options/App.tsx
+++ b/src/app/options/App.tsx
@ -16,7 +16,15 @@ function App() {
        <VersionLink></VersionLink>
        <Main>
          <ProfileForm></ProfileForm>
-          <Toaster richColors position="top-center" duration={1000000} />
+          <Toaster
+            richColors
+            position="top-center"
+            toastOptions={{
+              classNames: {
+                toast: 'dark:bg-slate-950 border dark:border-slate-600'
+              }
+            }}
+          />
        </Main>
        <BadgeList></BadgeList>
      </Layout>
--- a/src/app/options/components/ProfileForm.tsx
+++ b/src/app/options/components/ProfileForm.tsx
@ -9,7 +9,7 @@ import { Button } from '@/components/ui/Button'
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form'
 import { Input } from '@/components/ui/Input'
 import UserInfoDomain, { type UserInfo } from '@/domain/UserInfo'
-import { checkSystemDarkMode, cn, generateRandomAvatar } from '@/utils'
+import { cn, generateRandomAvatar } from '@/utils'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup'
 import { Label } from '@/components/ui/Label'
 import { RefreshCcwIcon } from 'lucide-react'
@ -24,7 +24,7 @@ const defaultUserInfo: UserInfo = {
  name: '',
  avatar: '',
  createTime: Date.now(),
-  themeMode: checkSystemDarkMode() ? 'dark' : 'system',
+  themeMode: 'system',
  danmakuEnabled: true,
  notificationEnabled: true,
  notificationType: 'all'
@ -32,9 +32,9 @@ const defaultUserInfo: UserInfo = {

 const formSchema = v.object({
  id: v.string(),
-  createTime: v.number(),
  // Pure numeric strings will be converted to number
  // Issues: https://github.com/unjs/unstorage/issues/277
+  createTime: v.number(),
  name: v.pipe(
    v.string(),
    v.trim(),
--- a/src/assets/styles/overlay.css
+++ b/src/assets/styles/overlay.css
@ -0,0 +1,17 @@
+section[aria-live='polite'] {
+  display: contents;
+}
+
+:where([data-sonner-toaster]) {
+  max-width: 300px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+}
+
+:where([data-sonner-toast][data-styled='true']) {
+  max-width: 300px;
+  padding: 6px 12px;
+  border-radius: 9999px;
+  width: fit-content;
+}
--- a/src/assets/styles/sonner.css
+++ b/src/assets/styles/sonner.css
@ -61,6 +61,17 @@
  list-style: none;
  outline: none;
  z-index: 999999999;
+  transition: transform 400ms ease;
+}
+
+:where([data-sonner-toaster][data-lifted='true']) {
+  transform: translateY(-10px);
+}
+
+@media (hover: none) and (pointer: coarse) {
+  :where([data-sonner-toaster][data-lifted='true']) {
+    transform: none;
+  }
 }

 :where([data-sonner-toaster][data-x-position='right']) {
@ -234,7 +245,6 @@
  justify-content: center;
  align-items: center;
  padding: 0;
-  background: var(--gray1);
  color: var(--gray12);
  border: 1px solid var(--gray4);
  transform: var(--toast-close-button-transform);
@ -247,6 +257,10 @@
    border-color 200ms;
 }

+[data-sonner-toast] [data-close-button] {
+  background: var(--gray1);
+}
+
 :where([data-sonner-toast]) :where([data-close-button]):focus-visible {
  box-shadow:
    0px 4px 12px rgba(0, 0, 0, 0.1),
@ -359,6 +373,10 @@
  transition: none;
 }

+[data-sonner-toast][data-swiped='true'] {
+  user-select: none;
+}
+
 [data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],
 [data-sonner-toast][data-swipe-out='true'][data-y-position='top'] {
  animation: swipe-out 200ms ease-out forwards;
@ -662,26 +680,7 @@
    transform 200ms;
 }

-section:has([data-sonner-toaster]) {
-  display: contents;
-}
-
 .sonner-loader[data-visible='false'] {
  opacity: 0;
  transform: scale(0.8) translate(-50%, -50%);
 }
-
-/* Custom styles */
-:where([data-sonner-toaster]) {
-  max-width: 300px;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-}
-
-:where([data-sonner-toast][data-styled='true']) {
-  max-width: 300px;
-  padding: 6px 12px;
-  border-radius: 9999px;
-  width: fit-content;
-}
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@ -73,6 +73,7 @@
  * {
    @apply border-border;
  }
+
  :host,
  :root {
    @apply !bg-background !text-foreground !text-base !visible;
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@ -5,11 +5,18 @@ export interface LinkProps {
  href: string
  className?: string
  children: ReactNode
+  underline?: boolean
 }

-const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ href, className, children }, ref) => {
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ href, className, children, underline = true }, ref) => {
  return (
-    <a href={href} target={href} rel="noopener noreferrer" className={cn('hover:underline', className)} ref={ref}>
+    <a
+      href={href}
+      target={href}
+      rel="noopener noreferrer"
+      className={cn(underline && 'hover:underline', className)}
+      ref={ref}
+    >
      {children}
    </a>
  )
--- a/src/components/magicui/AvatarCircles.tsx
+++ b/src/components/magicui/AvatarCircles.tsx
@ -0,0 +1,69 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import React from 'react'
+
+import { cn } from '@/utils/index'
+
+interface AvatarCirclesProps {
+  className?: string
+  avatarUrls: string[]
+  size?: VariantProps<typeof SizeVariants>['size']
+  max?: number
+}
+
+const SizeVariants = cva('z-10 flex -space-x-4 rtl:space-x-reverse', {
+  variants: {
+    size: {
+      default: 'h-10 min-w-10',
+      sm: 'h-8 min-w-8',
+      xs: 'h-6 min-w-6',
+      lg: 'h-12 min-w-12'
+    },
+    defaultVariants: {
+      size: 'default'
+    }
+  }
+})
+
+const spaceVariants = cva('flex -space-x-4 rtl:space-x-reverse', {
+  variants: {
+    size: {
+      default: '-space-x-4',
+      sm: '-space-x-3',
+      xs: '-space-x-2',
+      lg: '-space-x-5'
+    },
+    defaultVariants: {
+      size: 'default'
+    }
+  }
+})
+
+const AvatarCircles = ({ className, avatarUrls, size, max = 10 }: AvatarCirclesProps) => {
+  return (
+    <div className={cn(spaceVariants({ size }), className)}>
+      {avatarUrls.slice(0, max).map((url, index) => (
+        <img
+          key={index}
+          className={cn(
+            'rounded-full border-2 border-white dark:border-slate-800 aspect-square',
+            SizeVariants({ size })
+          )}
+          src={url}
+          alt={`Avatar ${index + 1}`}
+        />
+      ))}
+      <div
+        className={cn(
+          'flex items-center justify-center rounded-full border-2 border-white bg-slate-600 text-center text-xs font-medium text-white dark:border-slate-800 p-1',
+          SizeVariants({ size }),
+          size === 'xs' && 'text-2xs'
+        )}
+      >
+        +{avatarUrls.length}
+      </div>
+    </div>
+  )
+}
+
+export default AvatarCircles
--- a/src/constants/config.ts
+++ b/src/constants/config.ts
@ -207,3 +207,5 @@ export const SYNC_HISTORY_MAX_DAYS = 30 as const
 * Message max size is 256KiB; if the message is too large, it will cause the connection to drop.
 */
 export const WEB_RTC_MAX_MESSAGE_SIZE = 262144 as const
+
+export const VIRTUAL_ROOM_ID = 'WEB_CHAT_VIRTUAL_ROOM' as const
--- a/src/domain/AppStatus.ts
+++ b/src/domain/AppStatus.ts
@ -3,7 +3,7 @@ import StatusModule from './modules/Status'
 import { LocalStorageExtern } from './externs/Storage'
 import { APP_STATUS_STORAGE_KEY } from '@/constants/config'
 import StorageEffect from './modules/StorageEffect'
-import RoomDomain, { SendType } from './Room'
+import ChatRoomDomain, { SendType } from '@/domain/ChatRoom'
 import { map } from 'rxjs'

 export interface AppStatus {
@ -26,7 +26,7 @@ const AppStatusDomain = Remesh.domain({
      extern: LocalStorageExtern,
      key: APP_STATUS_STORAGE_KEY
    })
-    const roomDomain = domain.getDomain(RoomDomain())
+    const chatRoomDomain = domain.getDomain(ChatRoomDomain())

    const StatusLoadModule = StatusModule(domain, {
      name: 'AppStatus.LoadStatusModule'
@ -40,7 +40,7 @@ const AppStatusDomain = Remesh.domain({
    })

    const StatusState = domain.state<AppStatus>({
-      name: 'AppStatus.OpenState',
+      name: 'AppStatus.StatusState',
      default: defaultStatusState
    })

@ -131,7 +131,7 @@ const AppStatusDomain = Remesh.domain({
    domain.effect({
      name: 'OnMessageEffect',
      impl: ({ fromEvent, get }) => {
-        const onMessage$ = fromEvent(roomDomain.event.OnMessageEvent).pipe(
+        const onMessage$ = fromEvent(chatRoomDomain.event.OnMessageEvent).pipe(
          map((message) => {
            const status = get(StatusState())
            if (!status.open && message.type === SendType.Text) {
--- a/src/domain/ChatRoom.ts
+++ b/src/domain/ChatRoom.ts
@ -1,14 +1,14 @@
 import { Remesh } from 'remesh'
-import { map, merge, of, EMPTY, mergeMap, fromEvent, fromEventPattern } from 'rxjs'
+import { map, merge, of, EMPTY, mergeMap, fromEventPattern } from 'rxjs'
 import { AtUser, NormalMessage, type MessageUser } from './MessageList'
-import { PeerRoomExtern } from '@/domain/externs/PeerRoom'
+import { ChatRoomExtern } from '@/domain/externs/ChatRoom'
 import MessageListDomain, { MessageType } from '@/domain/MessageList'
 import UserInfoDomain from '@/domain/UserInfo'
 import { desert, getTextByteSize, upsert } from '@/utils'
 import { nanoid } from 'nanoid'
 import StatusModule from '@/domain/modules/Status'
-import { ToastExtern } from './externs/Toast'
 import { SYNC_HISTORY_MAX_DAYS, WEB_RTC_MAX_MESSAGE_SIZE } from '@/constants/config'
+import * as v from 'valibot'

 export { MessageType }

@ -58,19 +58,85 @@ export interface TextMessage extends MessageUser {

 export type RoomMessage = SyncUserMessage | SyncHistoryMessage | LikeMessage | HateMessage | TextMessage

-export type RoomUser = MessageUser & { peerId: string; joinTime: number }
+export type RoomUser = MessageUser & { peerIds: string[]; joinTime: number }

-const RoomDomain = Remesh.domain({
-  name: 'RoomDomain',
+const MessageUserSchema = {
+  userId: v.string(),
+  username: v.string(),
+  userAvatar: v.string()
+}
+
+const AtUserSchema = {
+  userId: v.string(),
+  username: v.string(),
+  userAvatar: v.string(),
+  positions: v.array(v.tuple([v.number(), v.number()]))
+}
+
+const NormalMessageSchema = {
+  id: v.string(),
+  type: v.literal(MessageType.Normal),
+  body: v.string(),
+  sendTime: v.number(),
+  receiveTime: v.number(),
+  likeUsers: v.array(v.object(MessageUserSchema)),
+  hateUsers: v.array(v.object(MessageUserSchema)),
+  atUsers: v.array(v.object(AtUserSchema))
+}
+
+const RoomMessageSchema = v.union([
+  v.object({
+    type: v.literal(SendType.Text),
+    id: v.string(),
+    body: v.string(),
+    sendTime: v.number(),
+    atUsers: v.array(v.object(AtUserSchema)),
+    ...MessageUserSchema
+  }),
+  v.object({
+    type: v.literal(SendType.Like),
+    id: v.string(),
+    sendTime: v.number(),
+    ...MessageUserSchema
+  }),
+  v.object({
+    type: v.literal(SendType.Hate),
+    id: v.string(),
+    sendTime: v.number(),
+    ...MessageUserSchema
+  }),
+  v.object({
+    type: v.literal(SendType.SyncUser),
+    id: v.string(),
+    peerId: v.string(),
+    joinTime: v.number(),
+    sendTime: v.number(),
+    lastMessageTime: v.number(),
+    ...MessageUserSchema
+  }),
+  v.object({
+    type: v.literal(SendType.SyncHistory),
+    id: v.string(),
+    sendTime: v.number(),
+    messages: v.array(v.object(NormalMessageSchema)),
+    ...MessageUserSchema
+  })
+])
+
+// Check if the message conforms to the format
+const checkMessageFormat = (message: v.InferInput<typeof RoomMessageSchema>) =>
+  v.safeParse(RoomMessageSchema, message).success
+
+const ChatRoomDomain = Remesh.domain({
+  name: 'ChatRoomDomain',
  impl: (domain) => {
    const messageListDomain = domain.getDomain(MessageListDomain())
    const userInfoDomain = domain.getDomain(UserInfoDomain())
-    const toast = domain.getExtern(ToastExtern)
-    const peerRoom = domain.getExtern(PeerRoomExtern)
+    const chatRoomExtern = domain.getExtern(ChatRoomExtern)

    const PeerIdState = domain.state<string>({
      name: 'Room.PeerIdState',
-      default: peerRoom.peerId
+      default: chatRoomExtern.peerId
    })

    const PeerIdQuery = domain.query({
@ -99,7 +165,7 @@ const RoomDomain = Remesh.domain({
    const SelfUserQuery = domain.query({
      name: 'Room.SelfUserQuery',
      impl: ({ get }) => {
-        return get(UserListQuery()).find((user) => user.peerId === get(PeerIdQuery()))!
+        return get(UserListQuery()).find((user) => user.peerIds.includes(chatRoomExtern.peerId))!
      }
    })

@ -119,13 +185,11 @@ const RoomDomain = Remesh.domain({
    const JoinRoomCommand = domain.command({
      name: 'Room.JoinRoomCommand',
      impl: ({ get }) => {
-        peerRoom.joinRoom()
        const { id: userId, name: username, avatar: userAvatar } = get(userInfoDomain.query.UserInfoQuery())!
-
        return [
          UpdateUserListCommand({
            type: 'create',
-            user: { peerId: peerRoom.peerId, joinTime: Date.now(), userId, username, userAvatar }
+            user: { peerId: chatRoomExtern.peerId, joinTime: Date.now(), userId, username, userAvatar }
          }),
          messageListDomain.command.CreateItemCommand({
            id: nanoid(),
@ -138,15 +202,20 @@ const RoomDomain = Remesh.domain({
            receiveTime: Date.now()
          }),
          JoinStatusModule.command.SetFinishedCommand(),
-          JoinRoomEvent(peerRoom.roomId)
+          JoinRoomEvent(chatRoomExtern.roomId),
+          SelfJoinRoomEvent(chatRoomExtern.roomId)
        ]
      }
    })

+    JoinRoomCommand.after(() => {
+      chatRoomExtern.joinRoom()
+      return null
+    })
+
    const LeaveRoomCommand = domain.command({
      name: 'Room.LeaveRoomCommand',
      impl: ({ get }) => {
-        peerRoom.leaveRoom()
        const { id: userId, name: username, avatar: userAvatar } = get(userInfoDomain.query.UserInfoQuery())!
        return [
          messageListDomain.command.CreateItemCommand({
@ -161,14 +230,20 @@ const RoomDomain = Remesh.domain({
          }),
          UpdateUserListCommand({
            type: 'delete',
-            user: { peerId: peerRoom.peerId, joinTime: Date.now(), userId, username, userAvatar }
+            user: { peerId: chatRoomExtern.peerId, joinTime: Date.now(), userId, username, userAvatar }
          }),
          JoinStatusModule.command.SetInitialCommand(),
-          LeaveRoomEvent(peerRoom.roomId)
+          LeaveRoomEvent(chatRoomExtern.roomId),
+          SelfLeaveRoomEvent(chatRoomExtern.roomId)
        ]
      }
    })

+    LeaveRoomCommand.after(() => {
+      chatRoomExtern.leaveRoom()
+      return null
+    })
+
    const SendTextMessageCommand = domain.command({
      name: 'Room.SendTextMessageCommand',
      impl: ({ get }, message: string | { body: string; atUsers: AtUser[] }) => {
@ -192,7 +267,7 @@ const RoomDomain = Remesh.domain({
          atUsers: typeof message === 'string' ? [] : message.atUsers
        }

-        peerRoom.sendMessage(textMessage)
+        chatRoomExtern.sendMessage(textMessage)
        return [messageListDomain.command.CreateItemCommand(listMessage), SendTextMessageEvent(textMessage)]
      }
    })
@ -213,7 +288,7 @@ const RoomDomain = Remesh.domain({
          ...localMessage,
          likeUsers: desert(localMessage.likeUsers, likeMessage, 'userId')
        }
-        peerRoom.sendMessage(likeMessage)
+        chatRoomExtern.sendMessage(likeMessage)
        return [messageListDomain.command.UpdateItemCommand(listMessage), SendLikeMessageEvent(likeMessage)]
      }
    })
@ -234,7 +309,7 @@ const RoomDomain = Remesh.domain({
          ...localMessage,
          hateUsers: desert(localMessage.hateUsers, hateMessage, 'userId')
        }
-        peerRoom.sendMessage(hateMessage)
+        chatRoomExtern.sendMessage(hateMessage)
        return [messageListDomain.command.UpdateItemCommand(listMessage), SendHateMessageEvent(hateMessage)]
      }
    })
@ -248,12 +323,13 @@ const RoomDomain = Remesh.domain({
        const syncUserMessage: SyncUserMessage = {
          ...self,
          id: nanoid(),
+          peerId: chatRoomExtern.peerId,
          sendTime: Date.now(),
          lastMessageTime,
          type: SendType.SyncUser
        }

-        peerRoom.sendMessage(syncUserMessage, peerId)
+        chatRoomExtern.sendMessage(syncUserMessage, peerId)
        return [SendSyncUserMessageEvent(syncUserMessage)]
      }
    })
@ -281,7 +357,6 @@ const RoomDomain = Remesh.domain({
      name: 'Room.SendSyncHistoryMessageCommand',
      impl: ({ get }, { peerId, lastMessageTime }: { peerId: string; lastMessageTime: number }) => {
        const self = get(SelfUserQuery())
-        console.log('SendSyncHistoryMessageCommand', peerId, peerRoom.peerId)

        const historyMessages = get(messageListDomain.query.ListQuery()).filter(
          (message) =>
@ -320,7 +395,7 @@ const RoomDomain = Remesh.domain({
        }, [])

        return pushHistoryMessageList.map((message) => {
-          peerRoom.sendMessage(message, peerId)
+          chatRoomExtern.sendMessage(message, peerId)
          return SendSyncHistoryMessageEvent(message)
        })
      }
@ -328,12 +403,32 @@ const RoomDomain = Remesh.domain({

    const UpdateUserListCommand = domain.command({
      name: 'Room.UpdateUserListCommand',
-      impl: ({ get }, action: { type: 'create' | 'delete'; user: RoomUser }) => {
+      impl: ({ get }, action: { type: 'create' | 'delete'; user: Omit<RoomUser, 'peerIds'> & { peerId: string } }) => {
        const userList = get(UserListState())
+        const existUser = userList.find((user) => user.userId === action.user.userId)
        if (action.type === 'create') {
-          return [UserListState().new(upsert(userList, action.user, 'userId'))]
+          return [
+            UserListState().new(
+              upsert(
+                userList,
+                { ...action.user, peerIds: [...new Set(existUser?.peerIds || []), action.user.peerId] },
+                'userId'
+              )
+            )
+          ]
        } else {
-          return [UserListState().new(userList.filter(({ userId }) => userId !== action.user.userId))]
+          return [
+            UserListState().new(
+              upsert(
+                userList,
+                {
+                  ...action.user,
+                  peerIds: existUser?.peerIds?.filter((peerId) => peerId !== action.user.peerId) || []
+                },
+                'userId'
+              ).filter((user) => user.peerIds.length)
+            )
+          ]
        }
      }
    })
@ -378,10 +473,18 @@ const RoomDomain = Remesh.domain({
      name: 'Room.OnJoinRoomEvent'
    })

+    const SelfJoinRoomEvent = domain.event<string>({
+      name: 'Room.SelfJoinRoomEvent'
+    })
+
    const OnLeaveRoomEvent = domain.event<string>({
      name: 'Room.OnLeaveRoomEvent'
    })

+    const SelfLeaveRoomEvent = domain.event<string>({
+      name: 'Room.SelfLeaveRoomEvent'
+    })
+
    const OnErrorEvent = domain.event<Error>({
      name: 'Room.OnErrorEvent'
    })
@ -389,10 +492,10 @@ const RoomDomain = Remesh.domain({
    domain.effect({
      name: 'Room.OnJoinRoomEffect',
      impl: () => {
-        const onJoinRoom$ = fromEventPattern<string>(peerRoom.onJoinRoom).pipe(
+        const onJoinRoom$ = fromEventPattern<string>(chatRoomExtern.onJoinRoom).pipe(
          mergeMap((peerId) => {
            // console.log('onJoinRoom', peerId)
-            if (peerRoom.peerId === peerId) {
+            if (chatRoomExtern.peerId === peerId) {
              return [OnJoinRoomEvent(peerId)]
            } else {
              return [SendSyncUserMessageCommand(peerId), OnJoinRoomEvent(peerId)]
@ -406,9 +509,13 @@ const RoomDomain = Remesh.domain({
    domain.effect({
      name: 'Room.OnMessageEffect',
      impl: ({ get }) => {
-        const onMessage$ = fromEventPattern<RoomMessage>(peerRoom.onMessage).pipe(
+        const onMessage$ = fromEventPattern<RoomMessage>(chatRoomExtern.onMessage).pipe(
          mergeMap((message) => {
-            // console.log('onMessage', message)
+            // Filter out messages that do not conform to the format
+            if (!checkMessageFormat(message)) {
+              console.warn('Invalid message format', message)
+              return EMPTY
+            }

            const messageEvent$ = of(OnMessageEvent(message))

@ -417,41 +524,36 @@ const RoomDomain = Remesh.domain({
            const messageCommand$ = (() => {
              switch (message.type) {
                case SendType.SyncUser: {
-                  const userList = get(UserListQuery())
                  const selfUser = get(SelfUserQuery())
-                  // If the browser has multiple tabs open, it can cause the same user to join multiple times with the same peerId but different userId
-                  const isRepeatJoin = userList.some((user) => user.userId === message.userId)
-                  // When a new user joins, it triggers join events for all users, i.e., newUser join event and oldUser join event
-                  // Use joinTime to determine if it's a new user
-                  const isNewJoinEvent = selfUser.joinTime < message.joinTime
+
+                  // If a new user joins after the current user has entered the room, a join log message needs to be created.
+                  const existUser = get(UserListQuery()).find((user) => user.userId === message.userId)
+                  const isNewJoinUser = !existUser && message.joinTime > selfUser.joinTime

                  const lastMessageTime = get(LastMessageTimeQuery())
                  const needSyncHistory = lastMessageTime > message.lastMessageTime

-                  return isRepeatJoin
-                    ? EMPTY
-                    : of(
-                        UpdateUserListCommand({ type: 'create', user: message }),
-                        isNewJoinEvent
-                          ? messageListDomain.command.CreateItemCommand({
-                              ...message,
-                              id: nanoid(),
-                              body: `"${message.username}" joined the chat`,
-                              type: MessageType.Prompt,
-                              receiveTime: Date.now()
-                            })
-                          : null,
-                        needSyncHistory
-                          ? SendSyncHistoryMessageCommand({
-                              peerId: message.peerId,
-                              lastMessageTime: message.lastMessageTime
-                            })
-                          : null
-                      )
+                  return of(
+                    UpdateUserListCommand({ type: 'create', user: message }),
+                    isNewJoinUser
+                      ? messageListDomain.command.CreateItemCommand({
+                          ...message,
+                          id: nanoid(),
+                          body: `"${message.username}" joined the chat`,
+                          type: MessageType.Prompt,
+                          receiveTime: Date.now()
+                        })
+                      : null,
+                    needSyncHistory
+                      ? SendSyncHistoryMessageCommand({
+                          peerId: message.peerId,
+                          lastMessageTime: message.lastMessageTime
+                        })
+                      : null
+                  )
                }

                case SendType.SyncHistory: {
-                  toast.success('Syncing history messages.')
                  return of(...message.messages.map((message) => messageListDomain.command.UpsertItemCommand(message)))
                }

@ -504,22 +606,28 @@ const RoomDomain = Remesh.domain({
    domain.effect({
      name: 'Room.OnLeaveRoomEffect',
      impl: ({ get }) => {
-        const onLeaveRoom$ = fromEventPattern<string>(peerRoom.onLeaveRoom).pipe(
+        const onLeaveRoom$ = fromEventPattern<string>(chatRoomExtern.onLeaveRoom).pipe(
          map((peerId) => {
-            console.log('onLeaveRoom', peerId, get(SelfUserQuery()).peerId)
-            const user = get(UserListQuery()).find((user) => user.peerId === peerId)
+            if (get(JoinStatusModule.query.IsInitialQuery())) {
+              return null
+            }
+            // console.log('onLeaveRoom', peerId)

-            if (user) {
+            const existUser = get(UserListQuery()).find((user) => user.peerIds.includes(peerId))
+
+            if (existUser) {
              return [
-                UpdateUserListCommand({ type: 'delete', user }),
-                messageListDomain.command.CreateItemCommand({
-                  ...user,
-                  id: nanoid(),
-                  body: `"${user.username}" left the chat`,
-                  type: MessageType.Prompt,
-                  sendTime: Date.now(),
-                  receiveTime: Date.now()
-                }),
+                UpdateUserListCommand({ type: 'delete', user: { ...existUser, peerId } }),
+                existUser.peerIds.length === 1
+                  ? messageListDomain.command.CreateItemCommand({
+                      ...existUser,
+                      id: nanoid(),
+                      body: `"${existUser.username}" left the chat`,
+                      type: MessageType.Prompt,
+                      sendTime: Date.now(),
+                      receiveTime: Date.now()
+                    })
+                  : null,
                OnLeaveRoomEvent(peerId)
              ]
            } else {
@ -534,7 +642,7 @@ const RoomDomain = Remesh.domain({
    domain.effect({
      name: 'Room.OnErrorEffect',
      impl: () => {
-        const onRoomError$ = fromEventPattern<Error>(peerRoom.onError).pipe(
+        const onRoomError$ = fromEventPattern<Error>(chatRoomExtern.onError).pipe(
          map((error) => {
            console.error(error)
            return OnErrorEvent(error)
@ -544,21 +652,6 @@ const RoomDomain = Remesh.domain({
      }
    })

-    // TODO: Move this to a service worker in the future, so we don't need to send a leave room message every time the page refreshes
-    domain.effect({
-      name: 'Room.OnUnloadEffect',
-      impl: ({ get }) => {
-        const beforeUnload$ = fromEvent(window, 'beforeunload').pipe(
-          map(() => {
-            console.log('beforeunload')
-
-            return get(JoinStatusModule.query.IsFinishedQuery()) ? LeaveRoomCommand() : null
-          })
-        )
-        return beforeUnload$
-      }
-    })
-
    return {
      query: {
        PeerIdQuery,
@ -581,7 +674,9 @@ const RoomDomain = Remesh.domain({
        SendSyncUserMessageEvent,
        SendSyncHistoryMessageEvent,
        JoinRoomEvent,
+        SelfJoinRoomEvent,
        LeaveRoomEvent,
+        SelfLeaveRoomEvent,
        OnMessageEvent,
        OnTextMessageEvent,
        OnJoinRoomEvent,
@ -592,4 +687,4 @@ const RoomDomain = Remesh.domain({
  }
 })

-export default RoomDomain
+export default ChatRoomDomain
--- a/src/domain/Danmaku.ts
+++ b/src/domain/Danmaku.ts
@ -1,15 +1,15 @@
 import { Remesh } from 'remesh'
 import { DanmakuExtern } from './externs/Danmaku'
-import RoomDomain, { TextMessage } from './Room'
+import ChatRoomDomain, { TextMessage } from '@/domain/ChatRoom'
 import UserInfoDomain from './UserInfo'
 import { map, merge } from 'rxjs'

 const DanmakuDomain = Remesh.domain({
  name: 'DanmakuDomain',
  impl: (domain) => {
-    const danmaku = domain.getExtern(DanmakuExtern)
+    const danmakuExtern = domain.getExtern(DanmakuExtern)
    const userInfoDomain = domain.getDomain(UserInfoDomain())
-    const roomDomain = domain.getDomain(RoomDomain())
+    const chatRoomDomain = domain.getDomain(ChatRoomDomain())

    const MountState = domain.state({
      name: 'Danmaku.MountState',
@ -49,7 +49,7 @@ const DanmakuDomain = Remesh.domain({
    const PushCommand = domain.command({
      name: 'Danmaku.PushCommand',
      impl: (_, message: TextMessage) => {
-        danmaku.push(message)
+        danmakuExtern.push(message)
        return [PushEvent(message)]
      }
    })
@ -57,7 +57,7 @@ const DanmakuDomain = Remesh.domain({
    const UnshiftCommand = domain.command({
      name: 'Danmaku.UnshiftCommand',
      impl: (_, message: TextMessage) => {
-        danmaku.unshift(message)
+        danmakuExtern.unshift(message)
        return [UnshiftEvent(message)]
      }
    })
@ -65,7 +65,7 @@ const DanmakuDomain = Remesh.domain({
    const ClearCommand = domain.command({
      name: 'Danmaku.ClearCommand',
      impl: () => {
-        danmaku.clear()
+        danmakuExtern.clear()
        return [ClearEvent()]
      }
    })
@ -73,7 +73,7 @@ const DanmakuDomain = Remesh.domain({
    const MountCommand = domain.command({
      name: 'Danmaku.ClearCommand',
      impl: (_, container: HTMLElement) => {
-        danmaku.mount(container)
+        danmakuExtern.mount(container)
        return [MountEvent(container)]
      }
    })
@ -81,7 +81,7 @@ const DanmakuDomain = Remesh.domain({
    const UnmountCommand = domain.command({
      name: 'Danmaku.UnmountCommand',
      impl: () => {
-        danmaku.unmount()
+        danmakuExtern.unmount()
        return [UnmountEvent()]
      }
    })
@ -121,8 +121,8 @@ const DanmakuDomain = Remesh.domain({
    domain.effect({
      name: 'Danmaku.OnRoomMessageEffect',
      impl: ({ fromEvent, get }) => {
-        const sendTextMessage$ = fromEvent(roomDomain.event.SendTextMessageEvent)
-        const onTextMessage$ = fromEvent(roomDomain.event.OnTextMessageEvent)
+        const sendTextMessage$ = fromEvent(chatRoomDomain.event.SendTextMessageEvent)
+        const onTextMessage$ = fromEvent(chatRoomDomain.event.OnTextMessageEvent)

        const onMessage$ = merge(sendTextMessage$, onTextMessage$).pipe(
          map((message) => {
--- a/src/domain/Notification.ts
+++ b/src/domain/Notification.ts
@ -1,15 +1,15 @@
 import { Remesh } from 'remesh'
 import { NotificationExtern } from './externs/Notification'
-import RoomDomain, { TextMessage } from './Room'
+import ChatRoomDomain, { TextMessage } from '@/domain/ChatRoom'
 import UserInfoDomain from './UserInfo'
 import { map, merge } from 'rxjs'

 const NotificationDomain = Remesh.domain({
  name: 'NotificationDomain',
  impl: (domain) => {
-    const notification = domain.getExtern(NotificationExtern)
+    const notificationExtern = domain.getExtern(NotificationExtern)
    const userInfoDomain = domain.getDomain(UserInfoDomain())
-    const roomDomain = domain.getDomain(RoomDomain())
+    const chatRoomDomain = domain.getDomain(ChatRoomDomain())

    const NotificationEnabledState = domain.state<boolean>({
      name: 'Notification.EnabledState',
@ -40,7 +40,7 @@ const NotificationDomain = Remesh.domain({
    const PushCommand = domain.command({
      name: 'Notification.PushCommand',
      impl: (_, message: TextMessage) => {
-        notification.push(message)
+        notificationExtern.push(message)
        return [PushEvent(message)]
      }
    })
@ -68,7 +68,7 @@ const NotificationDomain = Remesh.domain({
    domain.effect({
      name: 'Notification.OnRoomMessageEffect',
      impl: ({ fromEvent, get }) => {
-        const onTextMessage$ = fromEvent(roomDomain.event.OnTextMessageEvent)
+        const onTextMessage$ = fromEvent(chatRoomDomain.event.OnTextMessageEvent)
        const onMessage$ = merge(onTextMessage$).pipe(
          map((message) => {
            const notificationEnabled = get(IsEnabledQuery())
--- a/src/domain/Toast.ts
+++ b/src/domain/Toast.ts
@ -1,27 +1,55 @@
 import { Remesh } from 'remesh'
 import ToastModule from './modules/Toast'
-import RoomDomain from './Room'
-import { map, merge } from 'rxjs'
+import ChatRoomDomain, { SendType } from './ChatRoom'
+import VirtualRoomDomain from './VirtualRoom'
+import { filter, map, merge } from 'rxjs'

 const ToastDomain = Remesh.domain({
  name: 'ToastDomain',
  impl: (domain) => {
-    const roomDomain = domain.getDomain(RoomDomain())
+    const chatRoomDomain = domain.getDomain(ChatRoomDomain())
+    const virtualRoomDomain = domain.getDomain(VirtualRoomDomain())
    const toastModule = ToastModule(domain)
+
+    domain.effect({
+      name: 'Toast.OnRoomSelfJoinRoomEffect',
+      impl: ({ fromEvent }) => {
+        const onRoomJoin$ = fromEvent(chatRoomDomain.event.SelfJoinRoomEvent).pipe(
+          map(() => toastModule.command.LoadingCommand({ message: 'Connected to the chat.', duration: 3000 }))
+        )
+
+        return onRoomJoin$
+      }
+    })
+
    domain.effect({
      name: 'Toast.OnRoomErrorEffect',
      impl: ({ fromEvent }) => {
-        const onRoomError$ = fromEvent(roomDomain.event.OnErrorEvent)
-
-        const onError$ = merge(onRoomError$).pipe(
+        const onRoomError$ = merge(
+          fromEvent(chatRoomDomain.event.OnErrorEvent),
+          fromEvent(virtualRoomDomain.event.OnErrorEvent)
+        ).pipe(
          map((error) => {
            return toastModule.command.ErrorCommand(error.message)
          })
        )

-        return onError$
+        return onRoomError$
      }
    })
+
+    domain.effect({
+      name: 'Toast.OnSyncHistoryEffect',
+      impl: ({ fromEvent }) => {
+        const onSyncHistory$ = fromEvent(chatRoomDomain.event.OnMessageEvent).pipe(
+          filter((message) => message.type === SendType.SyncHistory),
+          map(() => toastModule.command.SuccessCommand('Syncing history messages.'))
+        )
+
+        return onSyncHistory$
+      }
+    })
+
    return toastModule
  }
 })
--- a/src/domain/VirtualRoom.ts
+++ b/src/domain/VirtualRoom.ts
@ -0,0 +1,381 @@
+import { Remesh } from 'remesh'
+import { map, merge, of, EMPTY, mergeMap, fromEventPattern } from 'rxjs'
+import { type MessageUser } from './MessageList'
+import { VirtualRoomExtern } from '@/domain/externs/VirtualRoom'
+import UserInfoDomain from '@/domain/UserInfo'
+import { upsert } from '@/utils'
+import { nanoid } from 'nanoid'
+import StatusModule from '@/domain/modules/Status'
+import * as v from 'valibot'
+import getSiteInfo, { SiteInfo } from '@/utils/getSiteInfo'
+
+export enum SendType {
+  SyncUser = 'SyncUser'
+}
+
+export interface FromInfo extends SiteInfo {
+  peerId: string
+}
+
+export interface SyncUserMessage extends MessageUser {
+  type: SendType.SyncUser
+  id: string
+  peerId: string
+  joinTime: number
+  sendTime: number
+  fromInfo: FromInfo
+}
+
+export type RoomMessage = SyncUserMessage
+
+export type RoomUser = MessageUser & { peerIds: string[]; fromInfos: FromInfo[]; joinTime: number }
+
+const MessageUserSchema = {
+  userId: v.string(),
+  username: v.string(),
+  userAvatar: v.string()
+}
+
+const FromInfoSchema = {
+  peerId: v.string(),
+  host: v.string(),
+  hostname: v.string(),
+  href: v.string(),
+  origin: v.string(),
+  title: v.string(),
+  icon: v.string(),
+  description: v.string()
+}
+
+const RoomMessageSchema = v.union([
+  v.object({
+    type: v.literal(SendType.SyncUser),
+    id: v.string(),
+    peerId: v.string(),
+    joinTime: v.number(),
+    sendTime: v.number(),
+    fromInfo: v.object(FromInfoSchema),
+    ...MessageUserSchema
+  })
+])
+
+// Check if the message conforms to the format
+const checkMessageFormat = (message: v.InferInput<typeof RoomMessageSchema>) =>
+  v.safeParse(RoomMessageSchema, message).success
+
+const VirtualRoomDomain = Remesh.domain({
+  name: 'VirtualRoomDomain',
+  impl: (domain) => {
+    const userInfoDomain = domain.getDomain(UserInfoDomain())
+    const virtualRoomExtern = domain.getExtern(VirtualRoomExtern)
+
+    const PeerIdState = domain.state<string>({
+      name: 'Room.PeerIdState',
+      default: virtualRoomExtern.peerId
+    })
+
+    const PeerIdQuery = domain.query({
+      name: 'Room.PeerIdQuery',
+      impl: ({ get }) => {
+        return get(PeerIdState())
+      }
+    })
+
+    const JoinStatusModule = StatusModule(domain, {
+      name: 'Room.JoinStatusModule'
+    })
+
+    const UserListState = domain.state<RoomUser[]>({
+      name: 'Room.UserListState',
+      default: []
+    })
+
+    const UserListQuery = domain.query({
+      name: 'Room.UserListQuery',
+      impl: ({ get }) => {
+        return get(UserListState())
+      }
+    })
+
+    const SelfUserQuery = domain.query({
+      name: 'Room.SelfUserQuery',
+      impl: ({ get }) => {
+        return get(UserListQuery()).find((user) => user.peerIds.includes(virtualRoomExtern.peerId))!
+      }
+    })
+
+    const JoinIsFinishedQuery = JoinStatusModule.query.IsFinishedQuery
+
+    const JoinRoomCommand = domain.command({
+      name: 'Room.JoinRoomCommand',
+      impl: ({ get }) => {
+        const { id: userId, name: username, avatar: userAvatar } = get(userInfoDomain.query.UserInfoQuery())!
+        return [
+          UpdateUserListCommand({
+            type: 'create',
+            user: {
+              peerId: virtualRoomExtern.peerId,
+              fromInfo: { ...getSiteInfo(), peerId: virtualRoomExtern.peerId },
+              joinTime: Date.now(),
+              userId,
+              username,
+              userAvatar
+            }
+          }),
+
+          JoinStatusModule.command.SetFinishedCommand(),
+          JoinRoomEvent(virtualRoomExtern.roomId),
+          SelfJoinRoomEvent(virtualRoomExtern.roomId)
+        ]
+      }
+    })
+
+    JoinRoomCommand.after(() => {
+      virtualRoomExtern.joinRoom()
+      return null
+    })
+
+    const LeaveRoomCommand = domain.command({
+      name: 'Room.LeaveRoomCommand',
+      impl: ({ get }) => {
+        const { id: userId, name: username, avatar: userAvatar } = get(userInfoDomain.query.UserInfoQuery())!
+        return [
+          UpdateUserListCommand({
+            type: 'delete',
+            user: {
+              peerId: virtualRoomExtern.peerId,
+              fromInfo: { ...getSiteInfo(), peerId: virtualRoomExtern.peerId },
+              joinTime: Date.now(),
+              userId,
+              username,
+              userAvatar
+            }
+          }),
+          JoinStatusModule.command.SetInitialCommand(),
+          LeaveRoomEvent(virtualRoomExtern.roomId),
+          SelfLeaveRoomEvent(virtualRoomExtern.roomId)
+        ]
+      }
+    })
+
+    LeaveRoomCommand.after(() => {
+      virtualRoomExtern.leaveRoom()
+      return null
+    })
+
+    const UpdateUserListCommand = domain.command({
+      name: 'Room.UpdateUserListCommand',
+      impl: (
+        { get },
+        action: {
+          type: 'create' | 'delete'
+          user: Omit<RoomUser, 'peerIds' | 'fromInfos'> & { peerId: string; fromInfo: FromInfo }
+        }
+      ) => {
+        const userList = get(UserListState())
+        const existUser = userList.find((user) => user.userId === action.user.userId)
+        if (action.type === 'create') {
+          return [
+            UserListState().new(
+              upsert(
+                userList,
+                {
+                  ...action.user,
+                  peerIds: [...new Set(existUser?.peerIds || []), action.user.peerId],
+                  fromInfos: upsert(existUser?.fromInfos || [], action.user.fromInfo, 'peerId')
+                },
+                'userId'
+              )
+            )
+          ]
+        } else {
+          return [
+            UserListState().new(
+              upsert(
+                userList,
+                {
+                  ...action.user,
+                  peerIds: existUser?.peerIds?.filter((peerId) => peerId !== action.user.peerId) || [],
+                  fromInfos: existUser?.fromInfos?.filter((fromInfo) => fromInfo.peerId !== action.user.peerId) || []
+                },
+                'userId'
+              ).filter((user) => user.peerIds.length)
+            )
+          ]
+        }
+      }
+    })
+
+    const SendSyncUserMessageCommand = domain.command({
+      name: 'Room.SendSyncUserMessageCommand',
+      impl: ({ get }, peerId: string) => {
+        const self = get(SelfUserQuery())
+
+        const syncUserMessage: SyncUserMessage = {
+          ...self,
+          id: nanoid(),
+          peerId: virtualRoomExtern.peerId,
+          sendTime: Date.now(),
+          fromInfo: { ...getSiteInfo(), peerId: virtualRoomExtern.peerId },
+          type: SendType.SyncUser
+        }
+
+        virtualRoomExtern.sendMessage(syncUserMessage, peerId)
+        return [SendSyncUserMessageEvent(syncUserMessage)]
+      }
+    })
+
+    const SendSyncUserMessageEvent = domain.event<SyncUserMessage>({
+      name: 'Room.SendSyncUserMessageEvent'
+    })
+
+    const JoinRoomEvent = domain.event<string>({
+      name: 'Room.JoinRoomEvent'
+    })
+
+    const LeaveRoomEvent = domain.event<string>({
+      name: 'Room.LeaveRoomEvent'
+    })
+
+    const OnMessageEvent = domain.event<RoomMessage>({
+      name: 'Room.OnMessageEvent'
+    })
+
+    const OnJoinRoomEvent = domain.event<string>({
+      name: 'Room.OnJoinRoomEvent'
+    })
+
+    const SelfJoinRoomEvent = domain.event<string>({
+      name: 'Room.SelfJoinRoomEvent'
+    })
+
+    const OnLeaveRoomEvent = domain.event<string>({
+      name: 'Room.OnLeaveRoomEvent'
+    })
+
+    const SelfLeaveRoomEvent = domain.event<string>({
+      name: 'Room.SelfLeaveRoomEvent'
+    })
+
+    const OnErrorEvent = domain.event<Error>({
+      name: 'Room.OnErrorEvent'
+    })
+
+    domain.effect({
+      name: 'Room.OnJoinRoomEffect',
+      impl: () => {
+        const onJoinRoom$ = fromEventPattern<string>(virtualRoomExtern.onJoinRoom).pipe(
+          mergeMap((peerId) => {
+            // console.log('onJoinRoom', peerId)
+            if (virtualRoomExtern.peerId === peerId) {
+              return [OnJoinRoomEvent(peerId)]
+            } else {
+              return [SendSyncUserMessageCommand(peerId), OnJoinRoomEvent(peerId)]
+            }
+          })
+        )
+        return onJoinRoom$
+      }
+    })
+
+    domain.effect({
+      name: 'Room.OnMessageEffect',
+      impl: () => {
+        const onMessage$ = fromEventPattern<RoomMessage>(virtualRoomExtern.onMessage).pipe(
+          mergeMap((message) => {
+            // Filter out messages that do not conform to the format
+            if (!checkMessageFormat(message)) {
+              console.warn('Invalid message format', message)
+              return EMPTY
+            }
+
+            const messageEvent$ = of(OnMessageEvent(message))
+
+            const messageCommand$ = (() => {
+              switch (message.type) {
+                case SendType.SyncUser: {
+                  return of(UpdateUserListCommand({ type: 'create', user: message }))
+                }
+
+                default:
+                  console.warn('Unsupported message type', message)
+                  return EMPTY
+              }
+            })()
+
+            return merge(messageEvent$, messageCommand$)
+          })
+        )
+        return onMessage$
+      }
+    })
+
+    domain.effect({
+      name: 'Room.OnLeaveRoomEffect',
+      impl: ({ get }) => {
+        const onLeaveRoom$ = fromEventPattern<string>(virtualRoomExtern.onLeaveRoom).pipe(
+          map((peerId) => {
+            if (get(JoinStatusModule.query.IsInitialQuery())) {
+              return null
+            }
+            // console.log('onLeaveRoom', peerId)
+
+            const existUser = get(UserListQuery()).find((user) => user.peerIds.includes(peerId))
+
+            if (existUser) {
+              return [
+                UpdateUserListCommand({
+                  type: 'delete',
+                  user: { ...existUser, peerId, fromInfo: { ...getSiteInfo(), peerId } }
+                }),
+                OnLeaveRoomEvent(peerId)
+              ]
+            } else {
+              return [OnLeaveRoomEvent(peerId)]
+            }
+          })
+        )
+        return onLeaveRoom$
+      }
+    })
+
+    domain.effect({
+      name: 'Room.OnErrorEffect',
+      impl: () => {
+        const onRoomError$ = fromEventPattern<Error>(virtualRoomExtern.onError).pipe(
+          map((error) => {
+            console.error(error)
+            return OnErrorEvent(error)
+          })
+        )
+        return onRoomError$
+      }
+    })
+
+    return {
+      query: {
+        PeerIdQuery,
+        UserListQuery,
+        JoinIsFinishedQuery
+      },
+      command: {
+        JoinRoomCommand,
+        LeaveRoomCommand,
+        SendSyncUserMessageCommand
+      },
+      event: {
+        SendSyncUserMessageEvent,
+        JoinRoomEvent,
+        SelfJoinRoomEvent,
+        LeaveRoomEvent,
+        SelfLeaveRoomEvent,
+        OnMessageEvent,
+        OnJoinRoomEvent,
+        OnLeaveRoomEvent,
+        OnErrorEvent
+      }
+    }
+  }
+})
+
+export default VirtualRoomDomain
--- a/src/domain/externs/ChatRoom.ts
+++ b/src/domain/externs/ChatRoom.ts
@ -1,19 +1,19 @@
 import { Remesh } from 'remesh'
-import { RoomMessage } from '../Room'
+import { RoomMessage } from '../ChatRoom'

-export interface PeerRoom {
+export interface ChatRoom {
  readonly peerId: string
  readonly roomId: string
-  joinRoom: () => PeerRoom
-  sendMessage: (message: RoomMessage, id?: string) => PeerRoom
-  onMessage: (callback: (message: RoomMessage) => void) => PeerRoom
-  leaveRoom: () => PeerRoom
-  onJoinRoom: (callback: (id: string) => void) => PeerRoom
-  onLeaveRoom: (callback: (id: string) => void) => PeerRoom
-  onError: (callback: (error: Error) => void) => PeerRoom
+  joinRoom: () => ChatRoom
+  sendMessage: (message: RoomMessage, id?: string | string[]) => ChatRoom
+  onMessage: (callback: (message: RoomMessage) => void) => ChatRoom
+  leaveRoom: () => ChatRoom
+  onJoinRoom: (callback: (id: string) => void) => ChatRoom
+  onLeaveRoom: (callback: (id: string) => void) => ChatRoom
+  onError: (callback: (error: Error) => void) => ChatRoom
 }

-export const PeerRoomExtern = Remesh.extern<PeerRoom>({
+export const ChatRoomExtern = Remesh.extern<ChatRoom>({
  default: {
    peerId: '',
    roomId: '',
--- a/src/domain/externs/Danmaku.ts
+++ b/src/domain/externs/Danmaku.ts
@ -1,5 +1,5 @@
 import { Remesh } from 'remesh'
-import { TextMessage } from '../Room'
+import { TextMessage } from '@/domain/ChatRoom'

 export interface Danmaku {
  push: (message: TextMessage) => void
--- a/src/domain/externs/Notification.ts
+++ b/src/domain/externs/Notification.ts
@ -1,5 +1,5 @@
 import { Remesh } from 'remesh'
-import { TextMessage } from '../Room'
+import { TextMessage } from '@/domain/ChatRoom'

 export interface Notification {
  push: (message: TextMessage) => Promise<string>
--- a/src/domain/externs/Toast.ts
+++ b/src/domain/externs/Toast.ts
@ -1,10 +1,12 @@
 import { Remesh } from 'remesh'

 export interface Toast {
-  success: (message: string) => void
-  error: (message: string) => void
-  info: (message: string) => void
-  warning: (message: string) => void
+  success: (message: string, duration?: number) => number | string
+  error: (message: string, duration?: number) => number | string
+  info: (message: string, duration?: number) => number | string
+  warning: (message: string, duration?: number) => number | string
+  loading: (message: string, duration?: number) => number | string
+  cancel: (id: number | string) => number | string
 }

 export const ToastExtern = Remesh.extern<Toast>({
@ -20,6 +22,12 @@ export const ToastExtern = Remesh.extern<Toast>({
    },
    warning: () => {
      throw new Error('"warning" not implemented.')
+    },
+    loading: () => {
+      throw new Error('"loading" not implemented.')
+    },
+    cancel: () => {
+      throw new Error('"cancel" not implemented.')
    }
  }
 })
--- a/src/domain/externs/VirtualRoom.ts
+++ b/src/domain/externs/VirtualRoom.ts
@ -0,0 +1,42 @@
+import { Remesh } from 'remesh'
+import { RoomMessage } from '@/domain/VirtualRoom'
+
+export interface VirtualRoom {
+  readonly peerId: string
+  readonly roomId: string
+  joinRoom: () => VirtualRoom
+  sendMessage: (message: RoomMessage, id?: string | string[]) => VirtualRoom
+  onMessage: (callback: (message: RoomMessage) => void) => VirtualRoom
+  leaveRoom: () => VirtualRoom
+  onJoinRoom: (callback: (id: string) => void) => VirtualRoom
+  onLeaveRoom: (callback: (id: string) => void) => VirtualRoom
+  onError: (callback: (error: Error) => void) => VirtualRoom
+}
+
+export const VirtualRoomExtern = Remesh.extern<VirtualRoom>({
+  default: {
+    peerId: '',
+    roomId: '',
+    joinRoom: () => {
+      throw new Error('"joinRoom" not implemented.')
+    },
+    sendMessage: () => {
+      throw new Error('"sendMessage" not implemented.')
+    },
+    onMessage: () => {
+      throw new Error('"onMessage" not implemented.')
+    },
+    leaveRoom: () => {
+      throw new Error('"leaveRoom" not implemented.')
+    },
+    onJoinRoom: () => {
+      throw new Error('"onJoinRoom" not implemented.')
+    },
+    onLeaveRoom: () => {
+      throw new Error('"onLeaveRoom" not implemented.')
+    },
+    onError: () => {
+      throw new Error('"onError" not implemented.')
+    }
+  }
+})
--- a/src/domain/impls/PeerRoom2.ts
+++ b/src/domain/impls/PeerRoom2.ts
@ -1,27 +1,28 @@
-import { Artico, Room } from '@rtco/client'
+import { Room } from '@rtco/client'

-import { PeerRoomExtern } from '@/domain/externs/PeerRoom'
+import { ChatRoomExtern } from '@/domain/externs/ChatRoom'
 import { stringToHex } from '@/utils'
-import { nanoid } from 'nanoid'
 import EventHub from '@resreq/event-hub'
-import { RoomMessage } from '../Room'
+import { RoomMessage } from '@/domain/ChatRoom'
 import { JSONR } from '@/utils'
+import Peer from './Peer'

 export interface Config {
-  peerId?: string
+  peer: Peer
  roomId: string
 }

-class PeerRoom extends EventHub {
+class ChatRoom extends EventHub {
+  readonly peer: Peer
  readonly roomId: string
-  private rtco?: Artico
  readonly peerId: string
  private room?: Room

  constructor(config: Config) {
    super()
+    this.peer = config.peer
    this.roomId = config.roomId
-    this.peerId = config.peerId || nanoid()
+    this.peerId = config.peer.id
    this.joinRoom = this.joinRoom.bind(this)
    this.sendMessage = this.sendMessage.bind(this)
    this.onMessage = this.onMessage.bind(this)
@ -32,21 +33,23 @@ class PeerRoom extends EventHub {
  }

  joinRoom() {
-    if (!this.rtco) {
-      this.rtco = new Artico({ id: this.peerId })
-    }
    if (this.room) {
-      this.room = this.rtco.join(this.roomId)
+      this.room = this.peer.join(this.roomId)
    } else {
-      this.rtco!.on('open', () => {
-        this.room = this.rtco!.join(this.roomId)
+      if (this.peer.state === 'ready') {
+        this.room = this.peer.join(this.roomId)
        this.emit('action')
-      })
+      } else {
+        this.peer!.on('open', () => {
+          this.room = this.peer.join(this.roomId)
+          this.emit('action')
+        })
+      }
    }
    return this
  }

-  sendMessage(message: RoomMessage, id?: string) {
+  sendMessage(message: RoomMessage, id?: string | string[]) {
    if (!this.room) {
      this.once('action', () => {
        if (!this.room) {
@ -123,7 +126,7 @@ class PeerRoom extends EventHub {
    return this
  }
  onError(callback: (error: Error) => void) {
-    this.rtco?.on('error', (error) => callback(error))
+    this.peer?.on('error', (error) => callback(error))
    this.on('error', (error: Error) => callback(error))
    return this
  }
@ -131,9 +134,9 @@ class PeerRoom extends EventHub {

 const hostRoomId = stringToHex(document.location.host)

-const peerRoom = new PeerRoom({ roomId: hostRoomId })
+const chatRoom = new ChatRoom({ roomId: hostRoomId, peer: Peer.createInstance() })

-export const PeerRoomImpl = PeerRoomExtern.impl(peerRoom)
+export const ChatRoomImpl = ChatRoomExtern.impl(chatRoom)

 // https://github.com/w3c/webextensions/issues/72
 // https://issues.chromium.org/issues/40251342
--- a/src/domain/impls/Danmaku.ts
+++ b/src/domain/impls/Danmaku.ts
@ -1,6 +1,6 @@
 import { DanmakuExtern } from '@/domain/externs/Danmaku'

-import { TextMessage } from '@/domain/Room'
+import { TextMessage } from '@/domain/ChatRoom'
 import { createElement } from 'react'
 import DanmakuMessage from '@/app/content/components/DanmakuMessage'
 import { createRoot } from 'react-dom/client'
--- a/src/domain/impls/Notification.ts
+++ b/src/domain/impls/Notification.ts
@ -1,5 +1,5 @@
 import { NotificationExtern } from '@/domain/externs/Notification'
-import { TextMessage } from '../Room'
+import { TextMessage } from '@/domain/ChatRoom'
 import { EVENT } from '@/constants/event'
 import { messenger } from '@/messenger'

--- a/src/domain/impls/Peer.ts
+++ b/src/domain/impls/Peer.ts
@ -0,0 +1,22 @@
+import { nanoid } from 'nanoid'
+import { Artico } from '@rtco/client'
+
+export interface Config {
+  peerId?: string
+}
+
+export default class Peer extends Artico {
+  private static instance: Peer | null = null
+  private constructor(config: Config = {}) {
+    const { peerId = nanoid() } = config
+    super({ id: peerId })
+  }
+
+  public static createInstance(config: Config = {}) {
+    return (this.instance ??= new Peer(config))
+  }
+
+  public static getInstance() {
+    return this.instance
+  }
+}
--- a/src/domain/impls/Storage.ts
+++ b/src/domain/impls/Storage.ts
@ -7,7 +7,11 @@ import { webExtensionDriver } from '@/utils/webExtensionDriver'

 import { Storage } from '@/domain/externs/Storage'
 import { EVENT } from '@/constants/event'
-import { JSONR } from '@/utils'
+
+/**
+ * Waiting to be resolved
+ * @see https://github.com/unjs/unstorage/issues/277
+ * */

 export const localStorage = createStorage({
  driver: localStorageDriver({ base: `${STORAGE_NAME}:` })
@ -23,8 +27,8 @@ export const browserSyncStorage = createStorage({

 export const LocalStorageImpl = LocalStorageExtern.impl({
  name: STORAGE_NAME,
-  get: async (key) => JSONR.parse(await localStorage.getItem(key)),
-  set: (key, value) => localStorage.setItem(key, JSONR.stringify(value)!),
+  get: localStorage.getItem,
+  set: localStorage.setItem,
  remove: localStorage.removeItem,
  clear: localStorage.clear,
  watch: async (callback) => {
@ -46,8 +50,8 @@ export const LocalStorageImpl = LocalStorageExtern.impl({

 export const IndexDBStorageImpl = IndexDBStorageExtern.impl({
  name: STORAGE_NAME,
-  get: async (key) => JSONR.parse(await indexDBStorage.getItem(key)),
-  set: (key, value) => indexDBStorage.setItem(key, JSONR.stringify(value)),
+  get: indexDBStorage.getItem,
+  set: indexDBStorage.setItem,
  remove: indexDBStorage.removeItem,
  clear: indexDBStorage.clear,
  watch: indexDBStorage.watch as Storage['watch'],
@ -56,8 +60,8 @@ export const IndexDBStorageImpl = IndexDBStorageExtern.impl({

 export const BrowserSyncStorageImpl = BrowserSyncStorageExtern.impl({
  name: STORAGE_NAME,
-  get: async (key) => JSONR.parse(await browserSyncStorage.getItem(key)),
-  set: (key, value) => browserSyncStorage.setItem(key, JSONR.stringify(value)),
+  get: browserSyncStorage.getItem,
+  set: browserSyncStorage.setItem,
  remove: browserSyncStorage.removeItem,
  clear: browserSyncStorage.clear,
  watch: browserSyncStorage.watch as Storage['watch'],
--- a/src/domain/impls/Toast.ts
+++ b/src/domain/impls/Toast.ts
@ -2,16 +2,24 @@ import { toast } from 'sonner'
 import { ToastExtern } from '@/domain/externs/Toast'

 export const ToastImpl = ToastExtern.impl({
-  success: (message: string) => {
-    toast.success(message)
+  success: (message: string, duration: number = 4000) => {
+    return toast.success(message, { duration })
  },
-  error: (message: string) => {
-    toast.error(message)
+  error: (message: string, duration: number = 4000) => {
+    return toast.error(message, { duration })
  },
-  info: (message: string) => {
-    toast.info(message)
+  info: (message: string, duration: number = 4000) => {
+    return toast.info(message, { duration })
  },
-  warning: (message: string) => {
-    toast.warning(message)
+  warning: (message: string, duration: number = 4000) => {
+    return toast.warning(message, { duration })
+  },
+  loading: (message: string, duration: number = 4000) => {
+    const id = toast.loading(message, { duration })
+    setTimeout(() => toast.dismiss(id), duration)
+    return id
+  },
+  cancel: (id: number | string) => {
+    return toast.dismiss(id)
  }
 })
--- a/src/domain/impls/VirtualRoom.ts
+++ b/src/domain/impls/VirtualRoom.ts
@ -1,27 +1,29 @@
-import { type DataPayload, type Room, joinRoom, selfId } from 'trystero'
+import { Room } from '@rtco/client'

-// import { joinRoom } from 'trystero/firebase'
-
-import { PeerRoomExtern } from '@/domain/externs/PeerRoom'
+import { VirtualRoomExtern } from '@/domain/externs/VirtualRoom'
 import { stringToHex } from '@/utils'
 import EventHub from '@resreq/event-hub'
-import { RoomMessage } from '../Room'
+import { RoomMessage } from '@/domain/VirtualRoom'
+import { JSONR } from '@/utils'
+import { VIRTUAL_ROOM_ID } from '@/constants/config'
+import Peer from './Peer'

 export interface Config {
-  peerId?: string
+  peer: Peer
  roomId: string
 }

-class PeerRoom extends EventHub {
-  readonly appId: string
-  private room?: Room
+class VirtualRoom extends EventHub {
+  readonly peer: Peer
  readonly roomId: string
  readonly peerId: string
+  private room?: Room
+
  constructor(config: Config) {
    super()
-    this.appId = __NAME__
+    this.peer = config.peer
    this.roomId = config.roomId
-    this.peerId = selfId
+    this.peerId = config.peer.id
    this.joinRoom = this.joinRoom.bind(this)
    this.sendMessage = this.sendMessage.bind(this)
    this.onMessage = this.onMessage.bind(this)
@ -32,34 +34,34 @@ class PeerRoom extends EventHub {
  }

  joinRoom() {
-    this.room = joinRoom({ appId: this.appId }, this.roomId)
-    /**
-     * If we wait to join, it will result in not being able to listen to our own join event.
-     * This might be related to the fact that:
-     * (If called more than once, only the latest callback registered is ever called.)
-     * Multiple listeners may overwrite each other.
-     * @see: https://github.com/dmotz/trystero?tab=readme-ov-file#onpeerjoincallback
-     */
-    // this.room.onPeerJoin(() => this.emit('action'))
-    this.emit('action')
+    if (this.room) {
+      this.room = this.peer.join(this.roomId)
+    } else {
+      if (this.peer.state === 'ready') {
+        this.room = this.peer.join(this.roomId)
+        this.emit('action')
+      } else {
+        this.peer!.on('open', () => {
+          this.room = this.peer.join(this.roomId)
+          this.emit('action')
+        })
+      }
+    }
    return this
  }

-  sendMessage(message: RoomMessage, id?: string) {
+  sendMessage(message: RoomMessage, id?: string | string[]) {
    if (!this.room) {
      this.once('action', () => {
        if (!this.room) {
          this.emit('error', new Error('Room not joined'))
        } else {
-          const [send] = this.room.makeAction('MESSAGE')
-          send(message as any as DataPayload, id)
+          this.room.send(JSONR.stringify(message)!, id)
        }
      })
    } else {
-      const [send] = this.room.makeAction('MESSAGE')
-      send(message as any as DataPayload, id)
+      this.room.send(JSONR.stringify(message)!, id)
    }
-
    return this
  }

@ -69,13 +71,11 @@ class PeerRoom extends EventHub {
        if (!this.room) {
          this.emit('error', new Error('Room not joined'))
        } else {
-          const [, on] = this.room.makeAction('MESSAGE')
-          on((message) => callback(message as any as RoomMessage))
+          this.room.on('message', (message) => callback(JSONR.parse(message) as RoomMessage))
        }
      })
    } else {
-      const [, on] = this.room.makeAction('MESSAGE')
-      on((message) => callback(message as any as RoomMessage))
+      this.room.on('message', (message) => callback(JSONR.parse(message) as RoomMessage))
    }
    return this
  }
@ -86,15 +86,11 @@ class PeerRoom extends EventHub {
        if (!this.room) {
          this.emit('error', new Error('Room not joined'))
        } else {
-          this.room.onPeerJoin((peerId) => {
-            callback(peerId)
-          })
+          this.room.on('join', (id) => callback(id))
        }
      })
    } else {
-      this.room.onPeerJoin((peerId) => {
-        callback(peerId)
-      })
+      this.room.on('join', (id) => callback(id))
    }
    return this
  }
@ -105,11 +101,11 @@ class PeerRoom extends EventHub {
        if (!this.room) {
          this.emit('error', new Error('Room not joined'))
        } else {
-          this.room.onPeerLeave((peerId) => callback(peerId))
+          this.room.on('leave', (id) => callback(id))
        }
      })
    } else {
-      this.room.onPeerLeave((peerId) => callback(peerId))
+      this.room.on('leave', (id) => callback(id))
    }
    return this
  }
@ -130,19 +126,15 @@ class PeerRoom extends EventHub {
    }
    return this
  }
-
  onError(callback: (error: Error) => void) {
+    this.peer?.on('error', (error) => callback(error))
    this.on('error', (error: Error) => callback(error))
    return this
  }
 }

-const hostRoomId = stringToHex(document.location.host)
-const peerRoom = new PeerRoom({ roomId: hostRoomId })
+const hostRoomId = stringToHex(VIRTUAL_ROOM_ID)

-export const PeerRoomImpl = PeerRoomExtern.impl(peerRoom)
+const virtualRoom = new VirtualRoom({ roomId: hostRoomId, peer: Peer.createInstance() })

-// https://github.com/w3c/webextensions/issues/72
-// https://issues.chromium.org/issues/40251342
-// https://github.com/w3c/webrtc-extensions/issues/77
-// https://github.com/aklinker1/webext-core/pull/70
+export const VirtualRoomImpl = VirtualRoomExtern.impl(virtualRoom)
--- a/src/domain/modules/Toast.ts
+++ b/src/domain/modules/Toast.ts
@ -6,53 +6,92 @@ export interface ToastOptions {
 }

 const ToastModule = (domain: RemeshDomainContext, options: ToastOptions = { name: 'MessageToastModule' }) => {
-  const toast = domain.getExtern(ToastExtern)
+  const toastExtern = domain.getExtern(ToastExtern)

-  const SuccessEvent = domain.event({
+  const SuccessEvent = domain.event<number | string>({
    name: `${options.name}.SuccessEvent`
  })

  const SuccessCommand = domain.command({
    name: `${options.name}.SuccessCommand`,
-    impl: (_, message: string) => {
-      toast.success(message)
-      return [SuccessEvent()]
+    impl: (_, message: string | { message: string; duration?: number }) => {
+      const id = toastExtern.success(
+        typeof message === 'string' ? message : message.message,
+        typeof message === 'string' ? undefined : message.duration
+      )
+      return [SuccessEvent(id)]
    }
  })

-  const ErrorEvent = domain.event({
+  const ErrorEvent = domain.event<number | string>({
    name: `${options.name}.ErrorEvent`
  })

  const ErrorCommand = domain.command({
    name: `${options.name}.ErrorCommand`,
-    impl: (_, message: string) => {
-      toast.error(message)
-      return [ErrorEvent()]
+    impl: (_, message: string | { message: string; duration?: number }) => {
+      const id = toastExtern.error(
+        typeof message === 'string' ? message : message.message,
+        typeof message === 'string' ? undefined : message.duration
+      )
+      return [ErrorEvent(id)]
    }
  })

-  const InfoEvent = domain.event({
+  const InfoEvent = domain.event<number | string>({
    name: `${options.name}.InfoEvent`
  })

  const InfoCommand = domain.command({
    name: `${options.name}.InfoCommand`,
-    impl: (_, message: string) => {
-      toast.info(message)
-      return [InfoEvent()]
+    impl: (_, message: string | { message: string; duration?: number }) => {
+      const id = toastExtern.info(
+        typeof message === 'string' ? message : message.message,
+        typeof message === 'string' ? undefined : message.duration
+      )
+      return [InfoEvent(id)]
    }
  })

-  const WarningEvent = domain.event({
+  const WarningEvent = domain.event<number | string>({
    name: `${options.name}.WarningEvent`
  })

  const WarningCommand = domain.command({
    name: `${options.name}.WarningCommand`,
-    impl: (_, message: string) => {
-      toast.warning(message)
-      return [WarningEvent()]
+    impl: (_, message: string | { message: string; duration?: number }) => {
+      const id = toastExtern.warning(
+        typeof message === 'string' ? message : message.message,
+        typeof message === 'string' ? undefined : message.duration
+      )
+      return [WarningEvent(id)]
+    }
+  })
+
+  const LoadingEvent = domain.event<number | string>({
+    name: `${options.name}.LoadingEvent`
+  })
+
+  const LoadingCommand = domain.command({
+    name: `${options.name}.LoadingCommand`,
+    impl: (_, message: string | { message: string; duration?: number }) => {
+      const id = toastExtern.loading(
+        typeof message === 'string' ? message : message.message,
+        typeof message === 'string' ? undefined : message.duration
+      )
+      return [LoadingEvent(id)]
+    }
+  })
+
+  const CancelEvent = domain.event<number | string>({
+    name: `${options.name}.CancelEvent`
+  })
+
+  const CancelCommand = domain.command({
+    name: `${options.name}.CancelCommand`,
+    impl: (_, id: number | string) => {
+      toastExtern.cancel(id)
+      return [CancelEvent(id)]
    }
  })

@ -61,13 +100,17 @@ const ToastModule = (domain: RemeshDomainContext, options: ToastOptions = { name
      SuccessEvent,
      ErrorEvent,
      InfoEvent,
-      WarningEvent
+      WarningEvent,
+      LoadingEvent,
+      CancelEvent
    },
    command: {
      SuccessCommand,
      ErrorCommand,
      InfoCommand,
-      WarningCommand
+      WarningCommand,
+      LoadingCommand,
+      CancelCommand
    }
  }
 }
--- a/src/hooks/useDraggable.ts
+++ b/src/hooks/useDraggable.ts
@ -10,7 +10,7 @@ export interface DargOptions {
  minY: number
 }

-const useDarg = (options: DargOptions) => {
+const useDraggable = (options: DargOptions) => {
  const { initX, initY, maxX = 0, minX = 0, maxY = 0, minY = 0 } = options

  const mousePosition = useRef({ x: 0, y: 0 })
@ -91,4 +91,4 @@ const useDarg = (options: DargOptions) => {
  return { setRef, ...position }
 }

-export default useDarg
+export default useDraggable
--- a/src/messenger/index.ts
+++ b/src/messenger/index.ts
@ -1,6 +1,6 @@
 import { EVENT } from '@/constants/event'
 import { defineExtensionMessaging } from '@webext-core/messaging'
-import { TextMessage } from '@/domain/Room'
+import { TextMessage } from '@/domain/ChatRoom'

 interface ProtocolMap {
  [EVENT.OPTIONS_PAGE_OPEN]: () => void
--- a/src/utils/checkDarkMode.ts
+++ b/src/utils/checkDarkMode.ts
@ -0,0 +1,11 @@
+const checkDarkMode = () => {
+  const colorScheme = document.documentElement.style.getPropertyValue('color-scheme').trim()
+
+  if (colorScheme === 'dark') {
+    return true // Prefer the website's color-scheme property value
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches // Otherwise, check the system theme
+}
+
+export default checkDarkMode
--- a/src/utils/checkSystemDarkMode.ts
+++ b/src/utils/checkSystemDarkMode.ts
@ -1,3 +0,0 @@
-const checkSystemDarkMode = () => window.matchMedia('(prefers-color-scheme: dark)').matches
-
-export default checkSystemDarkMode
--- a/src/utils/compressImage.ts
+++ b/src/utils/compressImage.ts
@ -59,15 +59,21 @@ const compress = async (

 const compressImage = async (options: Options) => {
  const { input, targetSize, toleranceSize = -1024 } = options
+
  if (!['image/jpeg', 'image/png', 'image/webp'].includes(input.type)) {
    throw new Error('Only PNG, JPEG and WebP image are supported.')
  }

-  if (input.size <= targetSize) {
-    return input
+  if (toleranceSize % 1024 !== 0) {
+    throw new Error('Tolerance size must be a multiple of 1024.')
  }

  const outputType = options.outputType || (input.type as ImageType)
+
+  if (input.size <= targetSize && input.type === outputType) {
+    return input
+  }
+
  const imageBitmap = await createImageBitmap(input)

  // Initialize quality range
--- a/src/utils/generateRandomAvatar.ts
+++ b/src/utils/generateRandomAvatar.ts
@ -1,7 +1,7 @@
 import generateUglyAvatar from '@/lib/uglyAvatar'
-import compressImage from './compressImage'
+import compressImage, { ImageType } from './compressImage'

-const generateRandomAvatar = async (targetSize: number) => {
+const generateRandomAvatar = async (targetSize: number, outputType: ImageType = 'image/webp') => {
  const svgBlob = generateUglyAvatar()

  // compressImage can't directly compress svg, need to convert to jpeg first
@ -11,13 +11,13 @@ const generateRandomAvatar = async (targetSize: number) => {
      const canvas = new OffscreenCanvas(image.width, image.height)
      const ctx = canvas.getContext('2d')
      ctx?.drawImage(image, 0, 0)
-      const blob = await canvas.convertToBlob({ type: 'image/jpeg' })
+      const blob = await canvas.convertToBlob({ type: outputType })
      resolve(blob)
    }
    image.onerror = () => reject(new Error('Failed to load SVG'))
    image.src = URL.createObjectURL(svgBlob)
  })
-  const miniAvatarBlob = await compressImage({ input: imageBlob, targetSize })
+  const miniAvatarBlob = await compressImage({ input: imageBlob, targetSize, outputType })
  const miniAvatarBase64 = await new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (e) => resolve(e.target?.result as string)
--- a/src/utils/getSiteInfo.ts
+++ b/src/utils/getSiteInfo.ts
@ -1,3 +1,5 @@
+import { buildFullURL } from '@/utils'
+
 export interface SiteInfo {
  host: string
  hostname: string
@ -8,6 +10,21 @@ export interface SiteInfo {
  description: string
 }

+const getIcon = (): string => {
+  const path =
+    document.querySelector('link[rel="icon" i]')?.getAttribute('href') ??
+    document.querySelector('link[rel="shortcut icon" i]')?.getAttribute('href') ??
+    document.querySelector('meta[property="og:image" i]')?.getAttribute('content') ??
+    document.querySelector('link[rel="apple-touch-icon" i]')?.getAttribute('href') ??
+    `/favicon.ico`
+
+  if (path.startsWith('data:') || path.startsWith('//')) {
+    return path
+  } else {
+    return buildFullURL(document.location.origin, path)
+  }
+}
+
 const getSiteInfo = (): SiteInfo => {
  return {
    host: document.location.host,
@ -15,15 +32,10 @@ const getSiteInfo = (): SiteInfo => {
    href: document.location.href,
    origin: document.location.origin,
    title:
-      document.querySelector('meta[rel="og:title i"]')?.getAttribute('content') ??
-      document.querySelector('meta[rel="og:title i"]')?.getAttribute('content') ??
-      document.querySelector('meta[rel="og:site_name i"]')?.getAttribute('content') ??
+      document.querySelector('meta[property="og:site_name" i]')?.getAttribute('content') ??
+      document.querySelector('meta[property="og:title" i]')?.getAttribute('content') ??
      document.title,
-    icon:
-      document.querySelector('meta[property="og:image" i]')?.getAttribute('href') ??
-      document.querySelector('link[rel="icon" i]')?.getAttribute('href') ??
-      document.querySelector('link[rel="shortcut icon" i]')?.getAttribute('href') ??
-      `${document.location.origin}/favicon.ico`,
+    icon: getIcon(),
    description:
      document.querySelector('meta[property="og:description i"]')?.getAttribute('content') ??
      document.querySelector('meta[name="description" i]')?.getAttribute('content') ??
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -4,7 +4,7 @@ export { default as createElement } from './createElement'
 export { default as getSiteInfo } from './getSiteInfo'
 export { default as compressImage } from './compressImage'
 export { default as isNullish } from './isNullish'
-export { default as checkSystemDarkMode } from './checkSystemDarkMode'
+export { default as checkDarkMode } from './checkDarkMode'
 export { default as stringToHex } from './stringToHex'
 export { default as debounce } from './debounce'
 export { default as throttle } from './throttle'
@ -17,3 +17,5 @@ export { default as getRootNode } from './getRootNode'
 export { default as blobToBase64 } from './blobToBase64'
 export * as JSONR from './jsonr'
 export { getTextByteSize } from './getTextByteSize'
+export { default as isEqual } from './isEqual'
+export { cleanURL, isAbsoluteURL, assembleURL, buildFullURL } from './url'
--- a/src/utils/isEqual.ts
+++ b/src/utils/isEqual.ts
@ -0,0 +1,5 @@
+const isEqual = (a: object, b: object) => {
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+export default isEqual
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@ -0,0 +1,36 @@
+export const cleanURL = (url: string) => url.replace(/([^:]\/)\/+/g, '$1').replace(/\/+$/, '')
+
+/**
+ * Determines whether the specified URL is absolute
+ * Reference: https://github.com/axios/axios/blob/v1.x/lib/helpers/isAbsoluteURL.js
+ */
+export const isAbsoluteURL = (url: string) => {
+  // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
+  // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
+  // by any combination of letters, digits, plus, period, or hyphen.
+  return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)
+}
+
+/**
+ * Add params to the URL
+ */
+export const assembleURL = (url: string, params: Record<string, string>) => {
+  return Object.entries(params)
+    .reduce((url, [key, value]) => {
+      url.searchParams.append(key, value)
+      return url
+    }, new URL(url))
+    .toString()
+}
+
+/**
+ * Creates a new URL by combining the baseURL with the requestedURL,
+ * only when the requestedURL is not already an absolute URL.
+ * If the requestURL is absolute, this function returns the requestedURL untouched.
+ *
+ * reference: https://github.com/axios/axios/blob/v1.x/lib/core/buildFullPath.js
+ */
+export const buildFullURL = (baseURL: string = '', pathURL: string = '', params: Record<string, any> = {}) => {
+  const url = cleanURL(isAbsoluteURL(pathURL) ? pathURL : `${baseURL}/${pathURL}`)
+  return assembleURL(url, params)
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -11,6 +11,9 @@ export default {
      padding: '2rem'
    },
    extend: {
+      fontSize: {
+        '2xs': '0.625rem'
+      },
      zIndex: {
        infinity: 'calc(infinity)'
      },
Author	SHA1	Message	Date
semantic-release-bot	ebd4e997bd	chore(release): 1.7.1 [skip ci] ## [1.7.1](https://github.com/molvqingtai/WebChat/compare/v1.7.0...v1.7.1) (2024-11-15) ### Bug Fixes * parse icon url error ([`7763f34`](`7763f34d5d`)) ### Performance Improvements * add number animation ([`eb37dd2`](`eb37dd2833`)) * compatible with rectangular icons ([`b860b16`](`b860b16e90`)) * optimize scrollbar ([`c5185e4`](`c5185e419c`))	2024-11-15 01:10:44 +00:00
molvqingtai	64f7f37288	Merge branch 'develop'	2024-11-15 09:09:12 +08:00
molvqingtai	c5185e419c	perf: optimize scrollbar	2024-11-15 09:07:13 +08:00
molvqingtai	eb37dd2833	perf: add number animation	2024-11-15 08:55:02 +08:00
molvqingtai	b860b16e90	perf: compatible with rectangular icons	2024-11-14 22:55:29 +08:00
molvqingtai	7763f34d5d	fix: parse icon url error	2024-11-14 22:44:03 +08:00
semantic-release-bot	efa44f86db	chore(release): 1.7.0 [skip ci] # [1.7.0](https://github.com/molvqingtai/WebChat/compare/v1.6.6...v1.7.0) (2024-11-13) ### Features * ranking of users supporting online websites Closes [#48](https://github.com/molvqingtai/WebChat/issues/48) ([`d0fea9e`](`d0fea9e42d`))	2024-11-13 11:27:13 +00:00
molvqingtai	e05ce9631c	Merge branch 'develop'	2024-11-13 19:25:34 +08:00
molvqingtai	d0fea9e42d	feat: ranking of users supporting online websites Closes #48	2024-11-13 19:24:16 +08:00
semantic-release-bot	1259b2f178	chore(release): 1.6.6 [skip ci] ## [1.6.6](https://github.com/molvqingtai/WebChat/compare/v1.6.5...v1.6.6) (2024-11-09) ### Bug Fixes * the number of online users is inaccurate ([`c6301a8`](`c6301a826e`)) ### Performance Improvements * optimize taost dark mode ([`00f0bd0`](`00f0bd08b0`)) * theme mode is compatible with website themes by default ([`6222e3f`](`6222e3f8af`))	2024-11-09 14:45:34 +00:00
molvqingtai	4f9c135fb9	Merge branch 'develop'	2024-11-09 22:44:01 +08:00
molvqingtai	00f0bd08b0	perf: optimize taost dark mode	2024-11-09 22:43:32 +08:00
molvqingtai	6222e3f8af	perf: theme mode is compatible with website themes by default	2024-11-09 05:57:00 +08:00
molvqingtai	c6301a826e	fix: the number of online users is inaccurate	2024-11-09 05:11:33 +08:00
semantic-release-bot	a42d90fd86	chore(release): 1.6.5 [skip ci] ## [1.6.5](https://github.com/molvqingtai/WebChat/compare/v1.6.4...v1.6.5) (2024-11-07) ### Performance Improvements * delete setup exit animation ([`d325be4`](`d325be4bec`))	2024-11-07 19:12:34 +00:00
molvqingtai	a71eca2913	Merge branch 'master' of github.com:molvqingtai/WebChat	2024-11-08 03:10:49 +08:00
molvqingtai	adc93b8040	Merge branch 'develop'	2024-11-08 03:10:28 +08:00
molvqingtai	d325be4bec	perf: delete setup exit animation	2024-11-08 03:09:28 +08:00
semantic-release-bot	43c9fb86b4	chore(release): 1.6.4 [skip ci] ## [1.6.4](https://github.com/molvqingtai/WebChat/compare/v1.6.3...v1.6.4) (2024-11-07) ### Performance Improvements * check message format ([`f6864e0`](`f6864e06be`))	2024-11-07 18:27:40 +00:00
molvqingtai	47d863b8a0	Merge branch 'develop'	2024-11-08 02:25:59 +08:00
molvqingtai	f6864e06be	perf: check message format	2024-11-08 02:24:48 +08:00
semantic-release-bot	de8940398e	chore(release): 1.6.3 [skip ci] ## [1.6.3](https://github.com/molvqingtai/WebChat/compare/v1.6.2...v1.6.3) (2024-11-06) ### Performance Improvements * optimize image processing ([`9438a31`](`9438a3169d`))	2024-11-06 10:27:03 +00:00
molvqingtai	5eba7700c8	Merge branch 'develop'	2024-11-06 18:25:17 +08:00
molvqingtai	9438a3169d	perf: optimize image processing	2024-11-06 18:24:43 +08:00
molvqingtai	7b1663fb9c	Merge branch 'develop'	2024-11-06 18:18:32 +08:00
molvqingtai	7681682445	chore: storage delete JSONR	2024-11-06 18:17:33 +08:00
molvqingtai	893342a317	chore: optimize some logic	2024-11-05 17:12:32 +08:00
molvqingtai	0f08860288	Merge branch 'master' of github.com:molvqingtai/WebChat	2024-11-04 21:36:16 +08:00
molvqingtai	0418e75ece	Merge branch 'develop'	2024-11-04 21:35:53 +08:00
molvqingtai	539508d1ab	chore: add comments	2024-11-04 21:35:08 +08:00
semantic-release-bot	0c670219ff	chore(release): 1.6.2 [skip ci] ## [1.6.2](https://github.com/molvqingtai/WebChat/compare/v1.6.1...v1.6.2) (2024-11-04) ### Bug Fixes * incompatible with old data of userInfo, causing crash ([`d5ced07`](`d5ced0718f`))	2024-11-04 13:34:10 +00:00
molvqingtai	fc32cc283a	Merge branch 'develop'	2024-11-04 21:32:27 +08:00
molvqingtai	d5ced0718f	fix: incompatible with old data of userInfo, causing crash	2024-11-04 21:31:45 +08:00
semantic-release-bot	daa55d7f58	chore(release): 1.6.1 [skip ci] ## [1.6.1](https://github.com/molvqingtai/WebChat/compare/v1.6.0...v1.6.1) (2024-11-03) ### Bug Fixes * sooner style ([`7e49ec2`](`7e49ec210e`))	2024-11-03 22:08:36 +00:00
molvqingtai	dfc0aaa8c2	Merge branch 'develop'	2024-11-04 06:07:02 +08:00
molvqingtai	7e49ec210e	fix: sooner style	2024-11-04 06:01:25 +08:00
semantic-release-bot	ff8e2c980d	chore(release): 1.6.0 [skip ci] # [1.6.0](https://github.com/molvqingtai/WebChat/compare/v1.5.4...v1.6.0) (2024-11-03) ### Features * support offline message sync [#45](https://github.com/molvqingtai/WebChat/issues/45) ([`7c4f655`](`7c4f65573c`))	2024-11-03 01:00:55 +00:00
molvqingtai	75b52d4003	Merge branch 'develop'	2024-11-03 08:59:11 +08:00
molvqingtai	331d5dd11d	Merge branch 'develop'	2024-11-01 07:10:23 +08:00
semantic-release-bot	abdb818cf2	chore(release): 1.5.4 [skip ci] ## [1.5.4](https://github.com/molvqingtai/WebChat/compare/v1.5.3...v1.5.4) (2024-10-31) ### Performance Improvements * support reading image from the clipboard ([`362d7db`](`362d7db738`))	2024-10-31 06:01:38 +00:00
molvqingtai	94c927c37f	Merge branch 'develop'	2024-10-31 14:00:12 +08:00
John Wu	78e1cd7361	docs: update README.md	2024-10-31 13:58:05 +08:00
semantic-release-bot	46134e0b37	chore(release): 1.5.3 [skip ci] ## [1.5.3](https://github.com/molvqingtai/WebChat/compare/v1.5.2...v1.5.3) (2024-10-30) ### Bug Fixes * insertion cursor position is incorrect ([`2987c2d`](`2987c2d85d`))	2024-10-30 16:17:07 +00:00
molvqingtai	2a8b2fa05b	Merge branch 'develop'	2024-10-31 00:15:27 +08:00
semantic-release-bot	14cf6a3996	chore(release): 1.5.2 [skip ci] ## [1.5.2](https://github.com/molvqingtai/WebChat/compare/v1.5.1...v1.5.2) (2024-10-30) ### Performance Improvements * optimize theme style ([`7b91944`](`7b91944fbf`))	2024-10-30 14:36:02 +00:00
molvqingtai	2bd5dde44e	Merge branch 'develop'	2024-10-30 22:34:25 +08:00
molvqingtai	2b78d506de	Merge branch 'develop'	2024-10-30 10:26:07 +08:00
semantic-release-bot	36750b7f17	chore(release): 1.5.1 [skip ci] ## [1.5.1](https://github.com/molvqingtai/WebChat/compare/v1.5.0...v1.5.1) (2024-10-29) ### Bug Fixes * incompatibility with old data causes app to crash ([`bd07bdc`](`bd07bdc2c3`))	2024-10-29 14:21:06 +00:00
molvqingtai	41591e8d05	Merge branch 'develop'	2024-10-29 22:19:20 +08:00
semantic-release-bot	e4d0a93016	chore(release): 1.5.0 [skip ci] # [1.5.0](https://github.com/molvqingtai/WebChat/compare/v1.4.0...v1.5.0) (2024-10-29) ### Features * support send image button ([`a01a93f`](`a01a93f260`))	2024-10-29 02:26:15 +00:00
molvqingtai	859a8f4a01	Merge branch 'develop'	2024-10-29 10:24:34 +08:00
molvqingtai	4cb74c9358	Merge branch 'develop'	2024-10-28 10:01:08 +08:00
semantic-release-bot	27d66e0c1f	chore(release): 1.4.0 [skip ci] # [1.4.0](https://github.com/molvqingtai/WebChat/compare/v1.3.1...v1.4.0) (2024-10-28) ### Bug Fixes * delete bad z-index ([`bcdd435`](`bcdd435e45`)) ### Features * app button support drag ([`4eba638`](`4eba638a36`)) * support [@user](https://github.com/user) syntax ([`bef576a`](`bef576a77b`)) * support dark mode ([`010aa2f`](`010aa2f45e`)) ### Performance Improvements * optimize danmuku theme styles ([`4f6eb56`](`4f6eb560fe`)) * optimize header theme styles ([`025166e`](`025166ead5`)) * optimize theme styles ([`2d051fe`](`2d051fedd7`)) * reset app position when window resize ([`eee1735`](`eee1735654`))	2024-10-28 01:50:14 +00:00
molvqingtai	44eac1c84f	Merge branch 'develop'	2024-10-28 09:48:46 +08:00
molvqingtai	b869efe6aa	Merge branch 'develop'	2024-10-28 09:39:36 +08:00
molvqingtai	165176b9a4	Merge branch 'develop'	2024-10-28 09:32:20 +08:00
semantic-release-bot	71856fed87	chore(release): 1.3.1 [skip ci] ## [1.3.1](https://github.com/molvqingtai/WebChat/compare/v1.3.0...v1.3.1) (2024-10-16) ### Bug Fixes * missing tabs permission ([`3cfc16c`](`3cfc16c9ee`))	2024-10-16 09:01:01 +00:00
molvqingtai	544f58ecde	Merge branch 'develop'	2024-10-16 16:41:01 +08:00
molvqingtai	e12f5e3d97	docs: update readme	2024-10-14 21:53:27 +08:00
semantic-release-bot	be56c1bf85	chore(release): 1.3.0 [skip ci] # [1.3.0](https://github.com/molvqingtai/WebChat/compare/v1.2.2...v1.3.0) (2024-10-12) ### Bug Fixes * p2p use artico ([`a0a8462`](`a0a8462f5f`)) ### Features * support notification ([`9898718`](`9898718b1a`)) ### Performance Improvements * notification supports clicking to open the source website ([`653229c`](`653229c8fa`))	2024-10-12 22:45:44 +00:00
molvqingtai	a3ac1092f9	Merge branch 'develop'	2024-10-13 06:38:09 +08:00
semantic-release-bot	d5ad87dc36	chore(release): 1.2.2 [skip ci] ## [1.2.2](https://github.com/molvqingtai/WebChat/compare/v1.2.1...v1.2.2) (2024-10-11) ### Bug Fixes * danmuku message ellipsis ([`e8e243e`](`e8e243ee09`)) * online text overflow ([`d4e42c6`](`d4e42c68ca`))	2024-10-11 07:52:34 +00:00
molvqingtai	509f18e737	Merge branch 'develop'	2024-10-11 15:50:57 +08:00
semantic-release-bot	08b23aade9	chore(release): 1.2.1 [skip ci] ## [1.2.1](https://github.com/molvqingtai/WebChat/compare/v1.2.0...v1.2.1) (2024-10-10) ### Bug Fixes * avatar is not displayed completely ([`de97d05`](`de97d05528`)) * the text in the button is not visible in dark mode ([`d6652cb`](`d6652cb2a4`)) * the text in the textarea is not visible in dark mode ([`d75a191`](`d75a191ded`)) ### Performance Improvements * change https://github.com/weizhenye/Danmaku to https://github.com/imtaotao/danmu ([`05ee49e`](`05ee49e7c4`)) * submit store flow ([`5235a6e`](`5235a6ee87`))	2024-10-10 08:47:25 +00:00
molvqingtai	62b96dcf10	Merge branch 'develop'	2024-10-10 16:45:46 +08:00
molvqingtai	3dde23eb15	Merge branch 'develop'	2024-10-09 19:28:06 +08:00
molvqingtai	43df901280	Merge branch 'develop'	2024-10-09 19:25:05 +08:00
molvqingtai	a4431c43c8	Merge branch 'develop'	2024-10-09 18:58:48 +08:00
semantic-release-bot	f3a9500f63	chore(release): 1.2.0 [skip ci] # [1.2.0](https://github.com/molvqingtai/WebChat/compare/v1.1.6...v1.2.0) (2024-10-08) ### Features * support display of online user list ([`4c7137d`](`4c7137d045`))	2024-10-08 11:40:22 +00:00
molvqingtai	d286188a3f	Merge branch 'develop'	2024-10-08 19:38:51 +08:00
semantic-release-bot	d171f509ce	chore(release): 1.1.6 [skip ci] ## [1.1.6](https://github.com/molvqingtai/WebChat/compare/v1.1.5...v1.1.6) (2024-10-04) ### Bug Fixes * it should not be sent when composing ([`8ee9ed6`](`8ee9ed6259`))	2024-10-04 18:46:56 +00:00
molvqingtai	56afb1f663	Merge branch 'develop'	2024-10-05 02:45:15 +08:00
semantic-release-bot	3cfef16e17	chore(release): 1.1.5 [skip ci] ## [1.1.5](https://github.com/molvqingtai/WebChat/compare/v1.1.4...v1.1.5) (2024-10-02) ### Bug Fixes * multiple tabs display duplicate online users ([`8b843ac`](`8b843ac45c`))	2024-10-02 15:42:23 +00:00
molvqingtai	c5bf19ba00	Merge branch 'master' of github.com:molvqingtai/WebChat	2024-10-02 23:40:47 +08:00
molvqingtai	c05f5d987e	Merge branch 'develop'	2024-10-02 23:40:32 +08:00
semantic-release-bot	90600794eb	chore(release): 1.1.4 [skip ci] ## [1.1.4](https://github.com/molvqingtai/WebChat/compare/v1.1.3...v1.1.4) (2024-10-02) ### Bug Fixes * firfox requestAnimationFrame error ([`65bf9b2`](`65bf9b2419`))	2024-10-02 11:52:09 +00:00
molvqingtai	74aa452df7	Merge branch 'master' of github.com:molvqingtai/WebChat	2024-10-02 19:50:37 +08:00
molvqingtai	8be6bd67bf	Merge branch 'develop'	2024-10-02 19:50:21 +08:00
semantic-release-bot	9b55e52439	chore(release): 1.1.3 [skip ci] ## [1.1.3](https://github.com/molvqingtai/WebChat/compare/v1.1.2...v1.1.3) (2024-10-02) ### Performance Improvements * add version link ([`4551ad2`](`4551ad2964`))	2024-10-02 10:26:20 +00:00
molvqingtai	0ac691a5c8	Merge branch 'develop'	2024-10-02 18:24:38 +08:00
semantic-release-bot	3a0a208c99	chore(release): 1.1.2 [skip ci] ## [1.1.2](https://github.com/molvqingtai/WebChat/compare/v1.1.1...v1.1.2) (2024-10-02) ### Performance Improvements * support unread status ([`1f44af8`](`1f44af873c`))	2024-10-02 09:59:30 +00:00
molvqingtai	7a9fcad960	Merge branch 'develop'	2024-10-02 17:57:57 +08:00
molvqingtai	078f5eae83	Merge branch 'master' of github.com:molvqingtai/WebChat	2024-10-02 00:32:27 +08:00
molvqingtai	8ada523124	Merge branch 'develop'	2024-10-02 00:32:16 +08:00
semantic-release-bot	3001b1f49c	chore(release): 1.1.1 [skip ci] ## [1.1.1](https://github.com/molvqingtai/WebChat/compare/v1.1.0...v1.1.1) (2024-10-01) ### Performance Improvements * a tag use Link component ([`fce64b7`](`fce64b744c`))	2024-10-01 16:20:35 +00:00
molvqingtai	7ba434c71d	Merge branch 'develop'	2024-10-02 00:18:58 +08:00
semantic-release-bot	323c9efbf5	chore(release): 1.1.0 [skip ci] # [1.1.0](https://github.com/molvqingtai/WebChat/compare/v1.0.29...v1.1.0) (2024-09-30) ### Features * support danmaku ([`999a55c`](`999a55c65f`))	2024-09-30 13:51:47 +00:00
molvqingtai	13fc98c66d	Merge branch 'develop'	2024-09-30 21:50:08 +08:00
molvqingtai	3f67d5ac90	Merge branch 'develop'	2024-09-30 21:43:42 +08:00
molvqingtai	2e2a4a7f90	Merge branch 'master' of github.com:molvqingtai/WebChat	2024-09-30 21:40:30 +08:00
semantic-release-bot	6413f2fa8e	chore(release): 1.0.29 [skip ci] ## [1.0.29](https://github.com/molvqingtai/WebChat/compare/v1.0.28...v1.0.29) (2024-09-29) ### Bug Fixes * compile by environment ([`52cd203`](`52cd203a53`)) * error when leaving the room without joining ([`8476595`](`8476595011`))	2024-09-29 07:45:54 +00:00