diff --git a/.commitlintrc.js b/.commitlintrc.js
index 3347cb96..5073c20d 100644
--- a/.commitlintrc.js
+++ b/.commitlintrc.js
@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']};
+module.exports = { extends: ["@commitlint/config-conventional"] };
diff --git a/.prettierrc.json b/.prettierrc
similarity index 89%
rename from .prettierrc.json
rename to .prettierrc
index e1627383..6c1d94bd 100644
--- a/.prettierrc.json
+++ b/.prettierrc
@@ -3,7 +3,7 @@
   "singleQuote": false,
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
-  "tabWidth": 1,
+  "tabWidth": 2,
   "semi": true,
   "trailingComma": "none"
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index c02ad941..8ec9748c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,7 +5,7 @@
     "comments": false,
     "strings": true
   },
-  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "eslint.alwaysShowStatus": true,
   "editor.codeActionsOnSave": {
@@ -13,14 +13,17 @@
   },
   "eslint.validate": ["javascript"],
   "[json]": {
-    "editor.defaultFormatter": "svipas.prettier-plus",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
   },
   "[jsonc]": {
-    "editor.defaultFormatter": "svipas.prettier-plus"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascriptreact]": {
-    "editor.defaultFormatter": "svipas.prettier-plus"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "emmet.triggerExpansionOnTab": true
+  "emmet.triggerExpansionOnTab": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/README.md b/README.md
index 214208fd..9f70e66c 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,19 @@
+## Refs
+
 - preview demo: https://privoce.rustchat.com/
 - design: https://www.figma.com/file/EHnNr53kNmDWgUT86It6CH/UI
 - backend APIs: https://dev.rustchat.com/api/swagger
 - text editor: https://plate.udecode.io/docs/installation
 - markdown editor: https://nhn.github.io/tui.editor/latest/
-- redux:  [@reduxjs/toolkit](https://redux-toolkit.js.org/introduction/getting-started)
-- indexDB wrapper: https://github.com/localForage/localForage
\ No newline at end of file
+- redux: [@reduxjs/toolkit](https://redux-toolkit.js.org/introduction/getting-started)
+- indexDB wrapper: https://github.com/localForage/localForage
+
+## Local Development
+
+- [VS Code](https://code.visualstudio.com/) Editor Recommended
+- VS Code plugins:
+  - dbaeumer.vscode-eslint: ESLint
+  - esbenp.prettier-vscode: Prettier
+  - components.vscode-styled-components: Syntax highlighting for styled-components
+  - jonkwheeler.styled-components-snippets: Styled-Components Snippets for VSCode
+  - dsznajder.es7-react-js-snippets:Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax
diff --git a/config/env.js b/config/env.js
index 89ca60d8..3e6d56e4 100644
--- a/config/env.js
+++ b/config/env.js
@@ -9,9 +9,7 @@ delete require.cache[require.resolve("./paths")];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
-  throw new Error(
-    "The NODE_ENV environment variable is required but was not specified."
-  );
+  throw new Error("The NODE_ENV environment variable is required but was not specified.");
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
@@ -22,7 +20,7 @@ const dotenvFiles = [
   // results for everyone
   NODE_ENV !== "test" && `${paths.dotenv}.local`,
   `${paths.dotenv}.${NODE_ENV}`,
-  paths.dotenv,
+  paths.dotenv
 ].filter(Boolean);
 
 // Load environment variables from .env* files. Suppress warnings using silent
@@ -34,7 +32,7 @@ dotenvFiles.forEach((dotenvFile) => {
   if (fs.existsSync(dotenvFile)) {
     require("dotenv-expand")(
       require("dotenv").config({
-        path: dotenvFile,
+        path: dotenvFile
       })
     );
   }
@@ -88,7 +86,7 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
         // Whether or not react-refresh is enabled.
         // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== "false",
+        FAST_REFRESH: process.env.FAST_REFRESH !== "false"
       }
     );
   // Stringify all values so we can feed into webpack DefinePlugin
@@ -96,7 +94,7 @@ function getClientEnvironment(publicUrl) {
     "process.env": Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
       return env;
-    }, {}),
+    }, {})
   };
 
   return { raw, stringified };
diff --git a/config/getHttpsConfig.js b/config/getHttpsConfig.js
index 013d493c..828a7828 100644
--- a/config/getHttpsConfig.js
+++ b/config/getHttpsConfig.js
@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
-const chalk = require('react-dev-utils/chalk');
-const paths = require('./paths');
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+const chalk = require("react-dev-utils/chalk");
+const paths = require("./paths");
 
 // Ensure the certificate and key provided are valid and if not
 // throw an easy to debug error
@@ -12,22 +12,16 @@ function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
   let encrypted;
   try {
     // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+    encrypted = crypto.publicEncrypt(cert, Buffer.from("test"));
   } catch (err) {
-    throw new Error(
-      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
-    );
+    throw new Error(`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`);
   }
 
   try {
     // privateDecrypt will throw an error with an invalid key
     crypto.privateDecrypt(key, encrypted);
   } catch (err) {
-    throw new Error(
-      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
-        err.message
-      }`
-    );
+    throw new Error(`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${err.message}`);
   }
 }
 
@@ -35,9 +29,9 @@ function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
 function readEnvFile(file, type) {
   if (!fs.existsSync(file)) {
     throw new Error(
-      `You specified ${chalk.cyan(
-        type
-      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+      `You specified ${chalk.cyan(type)} in your env, but the file "${chalk.yellow(
+        file
+      )}" can't be found.`
     );
   }
   return fs.readFileSync(file);
@@ -47,14 +41,14 @@ function readEnvFile(file, type) {
 // Return cert files if provided in env, otherwise just true or false
 function getHttpsConfig() {
   const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === 'true';
+  const isHttps = HTTPS === "true";
 
   if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
     const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
     const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
     const config = {
-      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+      cert: readEnvFile(crtFile, "SSL_CRT_FILE"),
+      key: readEnvFile(keyFile, "SSL_KEY_FILE")
     };
 
     validateKeyAndCerts({ ...config, keyFile, crtFile });
diff --git a/config/modules.js b/config/modules.js
index e58bce0a..c1709df5 100644
--- a/config/modules.js
+++ b/config/modules.js
@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-const chalk = require('react-dev-utils/chalk');
-const resolve = require('resolve');
+const fs = require("fs");
+const path = require("path");
+const paths = require("./paths");
+const chalk = require("react-dev-utils/chalk");
+const resolve = require("resolve");
 
 /**
  * Get additional module paths based on the baseUrl of a compilerOptions object.
@@ -15,19 +15,19 @@ function getAdditionalModulePaths(options = {}) {
   const baseUrl = options.baseUrl;
 
   if (!baseUrl) {
-    return '';
+    return "";
   }
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 
   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
   // the default behavior.
-  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === "") {
     return null;
   }
 
   // Allow the user set the `baseUrl` to `appSrc`.
-  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+  if (path.relative(paths.appSrc, baseUrlResolved) === "") {
     return [paths.appSrc];
   }
 
@@ -36,7 +36,7 @@ function getAdditionalModulePaths(options = {}) {
   // not transpiled outside of `src`. We do allow importing them with the
   // absolute path (e.g. `src/Components/Button.js`) but we set that up with
   // an alias.
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+  if (path.relative(paths.appPath, baseUrlResolved) === "") {
     return null;
   }
 
@@ -44,7 +44,7 @@ function getAdditionalModulePaths(options = {}) {
   throw new Error(
     chalk.red.bold(
       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
-      ' Create React App does not support other values at this time.'
+        " Create React App does not support other values at this time."
     )
   );
 }
@@ -63,14 +63,13 @@ function getWebpackAliases(options = {}) {
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+  if (path.relative(paths.appPath, baseUrlResolved) === "") {
     return {
-      src: paths.appSrc,
+      src: paths.appSrc
     };
   }
 }
 
-
 function getModules() {
   // Check if TypeScript is setup
   const hasTsConfig = fs.existsSync(paths.appTsConfig);
@@ -78,7 +77,7 @@ function getModules() {
 
   if (hasTsConfig && hasJsConfig) {
     throw new Error(
-      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+      "You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file."
     );
   }
 
@@ -88,8 +87,8 @@ function getModules() {
   // TypeScript project and set up the config
   // based on tsconfig.json
   if (hasTsConfig) {
-    const ts = require(resolve.sync('typescript', {
-      basedir: paths.appNodeModules,
+    const ts = require(resolve.sync("typescript", {
+      basedir: paths.appNodeModules
     }));
     config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
     // Otherwise we'll check if there is jsconfig.json
@@ -106,7 +105,7 @@ function getModules() {
   return {
     additionalModulePaths: additionalModulePaths,
     webpackAliases: getWebpackAliases(options),
-    hasTsConfig,
+    hasTsConfig
   };
 }
 
diff --git a/config/paths.js b/config/paths.js
index f0a6cd9c..3d008e9f 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -1,13 +1,13 @@
-'use strict';
+"use strict";
 
-const path = require('path');
-const fs = require('fs');
-const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+const path = require("path");
+const fs = require("fs");
+const getPublicUrlOrPath = require("react-dev-utils/getPublicUrlOrPath");
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 
 // We use `PUBLIC_URL` environment variable or "homepage" field to infer
 // "public path" at which the app is served.
@@ -16,30 +16,30 @@ const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 // We can't use a relative path in HTML because we don't want to load something
 // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 const publicUrlOrPath = getPublicUrlOrPath(
-  process.env.NODE_ENV === 'development',
-  require(resolveApp('package.json')).homepage,
+  process.env.NODE_ENV === "development",
+  require(resolveApp("package.json")).homepage,
   process.env.PUBLIC_URL
 );
 
-const buildPath = process.env.BUILD_PATH || 'build';
+const buildPath = process.env.BUILD_PATH || "build";
 
 const moduleFileExtensions = [
-  'web.mjs',
-  'mjs',
-  'web.js',
-  'js',
-  'web.ts',
-  'ts',
-  'web.tsx',
-  'tsx',
-  'json',
-  'web.jsx',
-  'jsx',
+  "web.mjs",
+  "mjs",
+  "web.js",
+  "js",
+  "web.ts",
+  "ts",
+  "web.tsx",
+  "tsx",
+  "json",
+  "web.jsx",
+  "jsx"
 ];
 
 // Resolve file paths in the same order as webpack
 const resolveModule = (resolveFn, filePath) => {
-  const extension = moduleFileExtensions.find(extension =>
+  const extension = moduleFileExtensions.find((extension) =>
     fs.existsSync(resolveFn(`${filePath}.${extension}`))
   );
 
@@ -52,26 +52,24 @@ const resolveModule = (resolveFn, filePath) => {
 
 // config after eject: we're in ./config/
 module.exports = {
-  dotenv: resolveApp('.env'),
-  appPath: resolveApp('.'),
+  dotenv: resolveApp(".env"),
+  appPath: resolveApp("."),
   appBuild: resolveApp(buildPath),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
-  appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
-  appTsConfig: resolveApp('tsconfig.json'),
-  appJsConfig: resolveApp('jsconfig.json'),
-  yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
-  appNodeModules: resolveApp('node_modules'),
-  appWebpackCache: resolveApp('node_modules/.cache'),
-  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
-  swSrc: resolveModule(resolveApp, 'src/service-worker'),
-  publicUrlOrPath,
+  appPublic: resolveApp("public"),
+  appHtml: resolveApp("public/index.html"),
+  appIndexJs: resolveModule(resolveApp, "src/index"),
+  appPackageJson: resolveApp("package.json"),
+  appSrc: resolveApp("src"),
+  appTsConfig: resolveApp("tsconfig.json"),
+  appJsConfig: resolveApp("jsconfig.json"),
+  yarnLockFile: resolveApp("yarn.lock"),
+  testsSetup: resolveModule(resolveApp, "src/setupTests"),
+  proxySetup: resolveApp("src/setupProxy.js"),
+  appNodeModules: resolveApp("node_modules"),
+  appWebpackCache: resolveApp("node_modules/.cache"),
+  appTsBuildInfoFile: resolveApp("node_modules/.cache/tsconfig.tsbuildinfo"),
+  swSrc: resolveModule(resolveApp, "src/service-worker"),
+  publicUrlOrPath
 };
 
-
-
 module.exports.moduleFileExtensions = moduleFileExtensions;
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 94331ff3..4af9f123 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -33,16 +33,14 @@ const babelRuntimeEntryHelpers = require.resolve(
   { paths: [babelRuntimeEntry] }
 );
 const babelRuntimeRegenerator = require.resolve("@babel/runtime/regenerator", {
-  paths: [babelRuntimeEntry],
+  paths: [babelRuntimeEntry]
 });
 
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
 
-const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || "10000"
-);
+const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || "10000");
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
@@ -75,8 +73,7 @@ module.exports = function (webpackEnv) {
 
   // Variable used for enabling profiling in Production
   // passed into alias object. Uses a flag if passed into the build command
-  const isEnvProductionProfile =
-    isEnvProduction && process.argv.includes("--profile");
+  const isEnvProductionProfile = isEnvProduction && process.argv.includes("--profile");
 
   // We will provide `paths.publicUrlOrPath` to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
@@ -94,14 +91,12 @@ module.exports = function (webpackEnv) {
         loader: MiniCssExtractPlugin.loader,
         // css is located in `static/css`, use '../../' to locate index.html folder
         // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith(".")
-          ? { publicPath: "../../" }
-          : {},
+        options: paths.publicUrlOrPath.startsWith(".") ? { publicPath: "../../" } : {}
       },
       {
         loader: require.resolve("css-loader"),
-        options: cssOptions,
-      },
+        options: cssOptions
+      }
     ].filter(Boolean);
     return loaders;
   };
@@ -140,13 +135,9 @@ module.exports = function (webpackEnv) {
       publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
-        ? (info) =>
-            path
-              .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, "/")
+        ? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/")
         : isEnvDevelopment &&
-          ((info) =>
-            path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
+          ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/"))
     },
     cache: {
       type: "filesystem",
@@ -156,13 +147,11 @@ module.exports = function (webpackEnv) {
       buildDependencies: {
         defaultWebpack: ["webpack/lib/"],
         config: [__filename],
-        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) =>
-          fs.existsSync(f)
-        ),
-      },
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) => fs.existsSync(f))
+      }
     },
     infrastructureLogging: {
-      level: "none",
+      level: "none"
     },
     optimization: {
       minimize: isEnvProduction,
@@ -176,7 +165,7 @@ module.exports = function (webpackEnv) {
               // into invalid ecma 5 code. This is why the 'compress' and 'output'
               // sections only apply transformations that are ecma 5 safe
               // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
+              ecma: 8
             },
             compress: {
               drop_console: true,
@@ -191,10 +180,10 @@ module.exports = function (webpackEnv) {
               // https://github.com/facebook/create-react-app/issues/5250
               // Pending further investigation:
               // https://github.com/terser-js/terser/issues/120
-              inline: 2,
+              inline: 2
             },
             mangle: {
-              safari10: true,
+              safari10: true
             },
             // Added for profiling in devtools
             keep_classnames: isEnvProductionProfile,
@@ -204,22 +193,20 @@ module.exports = function (webpackEnv) {
               comments: false,
               // Turned on because emoji and regex is not minified properly using default
               // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
+              ascii_only: true
+            }
+          }
         }),
         // This is only used in production mode
-        new CssMinimizerPlugin(),
-      ],
+        new CssMinimizerPlugin()
+      ]
     },
     resolve: {
       // This allows you to set a fallback for where webpack should look for modules.
       // We placed these paths second because we want `node_modules` to "win"
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
-      modules: ["node_modules", paths.appNodeModules].concat(
-        modules.additionalModulePaths || []
-      ),
+      modules: ["node_modules", paths.appNodeModules].concat(modules.additionalModulePaths || []),
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
       // some tools, although we do not recommend using it, see:
@@ -233,9 +220,9 @@ module.exports = function (webpackEnv) {
         // Allows for better profiling with ReactDevTools
         ...(isEnvProductionProfile && {
           "react-dom$": "react-dom/profiling",
-          "scheduler/tracing": "scheduler/tracing-profiling",
+          "scheduler/tracing": "scheduler/tracing-profiling"
         }),
-        ...(modules.webpackAliases || {}),
+        ...(modules.webpackAliases || {})
       },
       plugins: [
         // Prevents users from importing files from outside of src/ (or node_modules/).
@@ -249,9 +236,9 @@ module.exports = function (webpackEnv) {
           reactRefreshWebpackPluginRuntimeEntry,
           babelRuntimeEntry,
           babelRuntimeEntryHelpers,
-          babelRuntimeRegenerator,
-        ]),
-      ],
+          babelRuntimeRegenerator
+        ])
+      ]
     },
     module: {
       strictExportPresence: true,
@@ -261,7 +248,7 @@ module.exports = function (webpackEnv) {
           enforce: "pre",
           exclude: /@babel(?:\/|\\{1,2})runtime/,
           test: /\.(js|mjs|jsx|ts|tsx|css)$/,
-          loader: require.resolve("source-map-loader"),
+          loader: require.resolve("source-map-loader")
         },
         {
           // "oneOf" will traverse all following loaders until one will
@@ -276,9 +263,9 @@ module.exports = function (webpackEnv) {
               mimetype: "image/avif",
               parser: {
                 dataUrlCondition: {
-                  maxSize: imageInlineSizeLimit,
-                },
-              },
+                  maxSize: imageInlineSizeLimit
+                }
+              }
             },
             // "url" loader works like "file" loader except that it embeds assets
             // smaller than specified limit in bytes as data URLs to avoid requests.
@@ -288,9 +275,9 @@ module.exports = function (webpackEnv) {
               type: "asset",
               parser: {
                 dataUrlCondition: {
-                  maxSize: imageInlineSizeLimit,
-                },
-              },
+                  maxSize: imageInlineSizeLimit
+                }
+              }
             },
             {
               test: /\.svg$/,
@@ -301,17 +288,17 @@ module.exports = function (webpackEnv) {
                     prettier: false,
                     svgo: false,
                     svgoConfig: {
-                      plugins: [{ removeViewBox: false }],
+                      plugins: [{ removeViewBox: false }]
                     },
                     titleProp: true,
-                    ref: true,
-                  },
-                },
+                    ref: true
+                  }
+                }
               ],
               issuer: {
-                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+                and: [/\.(ts|tsx|js|jsx|md|mdx)$/]
               },
-              resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+              resourceQuery: { not: [/url/] } // exclude react component if *.svg?url
             },
             // Process application JS with Babel.
             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
@@ -320,22 +307,20 @@ module.exports = function (webpackEnv) {
               include: paths.appSrc,
               loader: require.resolve("babel-loader"),
               options: {
-                customize: require.resolve(
-                  "babel-preset-react-app/webpack-overrides"
-                ),
+                customize: require.resolve("babel-preset-react-app/webpack-overrides"),
                 presets: [
                   [
                     require.resolve("babel-preset-react-app"),
                     {
-                      runtime: hasJsxRuntime ? "automatic" : "classic",
-                    },
-                  ],
+                      runtime: hasJsxRuntime ? "automatic" : "classic"
+                    }
+                  ]
                 ],
 
                 plugins: [
                   isEnvDevelopment &&
                     shouldUseReactRefresh &&
-                    require.resolve("react-refresh/babel"),
+                    require.resolve("react-refresh/babel")
                 ].filter(Boolean),
                 // This is a feature of `babel-loader` for webpack (not Babel itself).
                 // It enables caching results in ./node_modules/.cache/babel-loader/
@@ -343,8 +328,8 @@ module.exports = function (webpackEnv) {
                 cacheDirectory: true,
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
-                compact: isEnvProduction,
-              },
+                compact: isEnvProduction
+              }
             },
             // Process any JS outside of the app with Babel.
             // Unlike the application JS, we only compile the standard ES features.
@@ -357,10 +342,7 @@ module.exports = function (webpackEnv) {
                 configFile: false,
                 compact: false,
                 presets: [
-                  [
-                    require.resolve("babel-preset-react-app/dependencies"),
-                    { helpers: true },
-                  ],
+                  [require.resolve("babel-preset-react-app/dependencies"), { helpers: true }]
                 ],
                 cacheDirectory: true,
                 // See #6846 for context on why cacheCompression is disabled
@@ -370,8 +352,8 @@ module.exports = function (webpackEnv) {
                 // code.  Without the options below, debuggers like VSCode
                 // show incorrect code and set breakpoints on the wrong lines.
                 sourceMaps: shouldUseSourceMap,
-                inputSourceMap: shouldUseSourceMap,
-              },
+                inputSourceMap: shouldUseSourceMap
+              }
             },
             // "css" loader resolves paths in CSS and adds assets as dependencies.
             // "style" loader turns CSS into JS modules that inject <style> tags.
@@ -384,18 +366,16 @@ module.exports = function (webpackEnv) {
               exclude: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction
-                  ? shouldUseSourceMap
-                  : isEnvDevelopment,
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
                 modules: {
-                  mode: "icss",
-                },
+                  mode: "icss"
+                }
               }),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
               // Remove this when webpack adds a warning or an error for this.
               // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
+              sideEffects: true
             },
             // "file" loader makes sure those assets get served by WebpackDevServer.
             // When you `import` an asset, you get its (virtual) filename.
@@ -408,13 +388,13 @@ module.exports = function (webpackEnv) {
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
               exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              type: "asset/resource",
-            },
+              type: "asset/resource"
+            }
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before the "file" loader.
-          ],
-        },
-      ].filter(Boolean),
+          ]
+        }
+      ].filter(Boolean)
     },
     plugins: [
       // Generates an `index.html` file with the <script> injected.
@@ -423,7 +403,7 @@ module.exports = function (webpackEnv) {
           {},
           {
             inject: true,
-            template: paths.appHtml,
+            template: paths.appHtml
           },
           isEnvProduction
             ? {
@@ -437,8 +417,8 @@ module.exports = function (webpackEnv) {
                   keepClosingSlash: true,
                   minifyJS: true,
                   minifyCSS: true,
-                  minifyURLs: true,
-                },
+                  minifyURLs: true
+                }
               }
             : undefined
         )
@@ -469,7 +449,7 @@ module.exports = function (webpackEnv) {
       isEnvDevelopment &&
         shouldUseReactRefresh &&
         new ReactRefreshWebpackPlugin({
-          overlay: false,
+          overlay: false
         }),
       // Watcher doesn't work well if you mistype casing in a path so we use
       // a plugin that prints an error when you attempt to do this.
@@ -480,7 +460,7 @@ module.exports = function (webpackEnv) {
           // Options similar to the same options in webpackOptions.output
           // both options are optional
           filename: "static/css/[name].[contenthash:8].css",
-          chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
+          chunkFilename: "static/css/[name].[contenthash:8].chunk.css"
         }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding
@@ -496,15 +476,13 @@ module.exports = function (webpackEnv) {
             manifest[file.name] = file.path;
             return manifest;
           }, seed);
-          const entrypointFiles = entrypoints.main.filter(
-            (fileName) => !fileName.endsWith(".map")
-          );
+          const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith(".map"));
 
           return {
             files: manifestFiles,
-            entrypoints: entrypointFiles,
+            entrypoints: entrypointFiles
           };
-        },
+        }
       }),
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the webpack build.
@@ -517,11 +495,11 @@ module.exports = function (webpackEnv) {
           // Bump up the default maximum size (2mb) that's precached,
           // to make lazy-loading failure scenarios less likely.
           // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
-          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
-        }),
+          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024
+        })
     ].filter(Boolean),
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
-    performance: false,
+    performance: false
   };
 };
diff --git a/config/webpack/persistentCache/createEnvironmentHash.js b/config/webpack/persistentCache/createEnvironmentHash.js
index 4487e853..3cd9fe0d 100644
--- a/config/webpack/persistentCache/createEnvironmentHash.js
+++ b/config/webpack/persistentCache/createEnvironmentHash.js
@@ -1,9 +1,8 @@
-'use strict';
-const { createHash } = require('crypto');
+"use strict";
+const { createHash } = require("crypto");
 
-module.exports = env => {
-  const hash = createHash('md5');
+module.exports = (env) => {
+  const hash = createHash("md5");
   hash.update(JSON.stringify(env));
-
-  return hash.digest('hex');
+  return hash.digest("hex");
 };
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
index 52f4edf3..a6778b58 100644
--- a/config/webpackDevServer.config.js
+++ b/config/webpackDevServer.config.js
@@ -1,21 +1,20 @@
-'use strict';
+"use strict";
 
-const fs = require('fs');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
-const paths = require('./paths');
-const getHttpsConfig = require('./getHttpsConfig');
+const fs = require("fs");
+const evalSourceMapMiddleware = require("react-dev-utils/evalSourceMapMiddleware");
+const noopServiceWorkerMiddleware = require("react-dev-utils/noopServiceWorkerMiddleware");
+const ignoredFiles = require("react-dev-utils/ignoredFiles");
+const redirectServedPath = require("react-dev-utils/redirectServedPathMiddleware");
+const paths = require("./paths");
+const getHttpsConfig = require("./getHttpsConfig");
 
-const host = process.env.HOST || '0.0.0.0';
+const host = process.env.HOST || "0.0.0.0";
 const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function (proxy, allowedHost) {
-  const disableFirewall =
-    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+  const disableFirewall = !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === "true";
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -35,11 +34,11 @@ module.exports = function (proxy, allowedHost) {
     // really know what you're doing with a special environment variable.
     // Note: ["localhost", ".localhost"] will support subdomains - but we might
     // want to allow setting the allowedHosts manually for more complex setups
-    allowedHosts: disableFirewall ? 'all' : [allowedHost],
+    allowedHosts: disableFirewall ? "all" : [allowedHost],
     headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': '*',
-      'Access-Control-Allow-Headers': '*',
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "*",
+      "Access-Control-Allow-Headers": "*"
     },
     // Enable gzip compression of generated files.
     compress: true,
@@ -66,8 +65,8 @@ module.exports = function (proxy, allowedHost) {
         // https://github.com/facebook/create-react-app/issues/293
         // src/node_modules is not ignored to support absolute imports
         // https://github.com/facebook/create-react-app/issues/1065
-        ignored: ignoredFiles(paths.appSrc),
-      },
+        ignored: ignoredFiles(paths.appSrc)
+      }
     },
     client: {
       webSocketURL: {
@@ -76,19 +75,19 @@ module.exports = function (proxy, allowedHost) {
         // to hot reloading server.
         hostname: sockHost,
         pathname: sockPath,
-        port: sockPort,
+        port: sockPort
       },
       overlay: {
         errors: true,
-        warnings: false,
-      },
+        warnings: false
+      }
     },
     devMiddleware: {
       // It is important to tell WebpackDevServer to use the same "publicPath" path as
       // we specified in the webpack config. When homepage is '.', default to serving
       // from the root.
       // remove last slash so user can land on `/test` instead of `/test/`
-      publicPath: paths.publicUrlOrPath.slice(0, -1),
+      publicPath: paths.publicUrlOrPath.slice(0, -1)
     },
 
     https: getHttpsConfig(),
@@ -97,7 +96,7 @@ module.exports = function (proxy, allowedHost) {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
-      index: paths.publicUrlOrPath,
+      index: paths.publicUrlOrPath
     },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
@@ -122,6 +121,6 @@ module.exports = function (proxy, allowedHost) {
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
       devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
-    },
+    }
   };
 };
diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
index 8eeb0ce1..c5697e7b 100644
--- a/public/firebase-messaging-sw.js
+++ b/public/firebase-messaging-sw.js
@@ -6,7 +6,7 @@ self.addEventListener("notificationclick", function (event) {
   event.waitUntil(
     (async function () {
       const allClients = await clients.matchAll({
-        includeUncontrolled: true,
+        includeUncontrolled: true
       });
       const [firstClient] = allClients;
       // 没有数据
@@ -15,12 +15,7 @@ self.addEventListener("notificationclick", function (event) {
         firstClient.focus();
         return;
       }
-      const {
-        rustchat_from_uid,
-        rustchat_to_uid,
-        rustchat_to_gid,
-      } = customData;
-
+      const { rustchat_from_uid, rustchat_to_uid, rustchat_to_gid } = customData;
       let chatClient;
       let redirectPath = rustchat_to_uid
         ? `/chat/dm/${rustchat_from_uid}`
@@ -47,9 +42,7 @@ self.addEventListener("notificationclick", function (event) {
 // importScripts(
 //   "https://www.gstatic.com/firebasejs/9.8.1/firebase-messaging-compat.js"
 // );
-importScripts(
-  "https://cdnjs.cloudflare.com/ajax/libs/firebase/9.8.1/firebase-app-compat.min.js"
-);
+importScripts("https://cdnjs.cloudflare.com/ajax/libs/firebase/9.8.1/firebase-app-compat.min.js");
 importScripts(
   "https://cdnjs.cloudflare.com/ajax/libs/firebase/9.8.1/firebase-messaging-compat.min.js"
 );
@@ -62,7 +55,7 @@ const firebaseConfig = {
   storageBucket: "rustchat-develop.appspot.com",
   messagingSenderId: "418687074928",
   appId: "1:418687074928:web:753286adbf239f5af9eab5",
-  measurementId: "G-XV476KEC8P",
+  measurementId: "G-XV476KEC8P"
 };
 
 firebase.initializeApp(firebaseConfig);
diff --git a/scripts/build.js b/scripts/build.js
index d2e10ac3..bf566ed4 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -27,8 +27,7 @@ const printHostingInstructions = require("react-dev-utils/printHostingInstructio
 const FileSizeReporter = require("react-dev-utils/FileSizeReporter");
 const printBuildError = require("react-dev-utils/printBuildError");
 
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild;
+const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 const useYarn = fs.existsSync(paths.yarnLockFile);
 
@@ -78,9 +77,7 @@ checkBrowsers(paths.appPath, isInteractive)
             " to learn more about each warning."
         );
         console.log(
-          "To ignore, add " +
-            chalk.cyan("// eslint-disable-next-line") +
-            " to the line before.\n"
+          "To ignore, add " + chalk.cyan("// eslint-disable-next-line") + " to the line before.\n"
         );
       } else {
         console.log(chalk.green("Compiled successfully.\n"));
@@ -98,18 +95,9 @@ checkBrowsers(paths.appPath, isInteractive)
       const publicUrl = paths.publicUrlOrPath;
       const publicPath = config.output.publicPath;
       const buildFolder = path.relative(process.cwd(), paths.appBuild);
-      printHostingInstructions(
-        appPackage,
-        publicUrl,
-        publicPath,
-        buildFolder,
-        useYarn
-      );
+      printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn);
       // version and md5 files
-      fs.writeFileSync(
-        `${buildFolder}/VERSION`,
-        require("../package.json").version
-      );
+      fs.writeFileSync(`${buildFolder}/VERSION`, require("../package.json").version);
       const hash = md5File.sync(`${buildFolder}/VERSION`);
       fs.writeFileSync(`${buildFolder}/web.rustchat.md5`, hash);
     },
@@ -153,7 +141,7 @@ function build(previousFileSizes) {
 
         messages = formatWebpackMessages({
           errors: [errMessage],
-          warnings: [],
+          warnings: []
         });
       } else {
         messages = formatWebpackMessages(
@@ -170,8 +158,7 @@ function build(previousFileSizes) {
       }
       if (
         process.env.CI &&
-        (typeof process.env.CI !== "string" ||
-          process.env.CI.toLowerCase() !== "false") &&
+        (typeof process.env.CI !== "string" || process.env.CI.toLowerCase() !== "false") &&
         messages.warnings.length
       ) {
         // Ignore sourcemap warnings in CI builds. See #8227 for more info.
@@ -192,7 +179,7 @@ function build(previousFileSizes) {
       const resolveArgs = {
         stats,
         previousFileSizes,
-        warnings: messages.warnings,
+        warnings: messages.warnings
       };
 
       if (writeStatsJson) {
@@ -210,6 +197,6 @@ function build(previousFileSizes) {
 function copyPublicFolder() {
   fs.copySync(paths.appPublic, paths.appBuild, {
     dereference: true,
-    filter: (file) => file !== paths.appHtml,
+    filter: (file) => file !== paths.appHtml
   });
 }
diff --git a/scripts/start.js b/scripts/start.js
index 9425fb0e..626c3401 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -1,38 +1,37 @@
-'use strict';
+"use strict";
 
 // Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = "development";
+process.env.NODE_ENV = "development";
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', (err) => {
- throw err;
+process.on("unhandledRejection", (err) => {
+  throw err;
 });
 
 // Ensure environment variables are read.
-require('../config/env');
-
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+require("../config/env");
+const fs = require("fs");
+const chalk = require("react-dev-utils/chalk");
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const clearConsole = require("react-dev-utils/clearConsole");
+const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
 const {
- choosePort,
- createCompiler,
- prepareProxy,
- prepareUrls
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const semver = require('semver');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-const getClientEnvironment = require('../config/env');
-const react = require(require.resolve('react', { paths: [paths.appPath] }));
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls
+} = require("react-dev-utils/WebpackDevServerUtils");
+const openBrowser = require("react-dev-utils/openBrowser");
+const semver = require("semver");
+const paths = require("../config/paths");
+const configFactory = require("../config/webpack.config");
+const createDevServerConfig = require("../config/webpackDevServer.config");
+const getClientEnvironment = require("../config/env");
+const react = require(require.resolve("react", { paths: [paths.appPath] }));
 
 const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 const useYarn = fs.existsSync(paths.yarnLockFile);
@@ -40,100 +39,102 @@ const isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
- process.exit(1);
+  process.exit(1);
 }
 
 // Tools like Cloud9 rely on this.
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3009;
-const HOST = process.env.HOST || '0.0.0.0';
+const HOST = process.env.HOST || "0.0.0.0";
 
 if (process.env.HOST) {
- console.log(
-  chalk.cyan(
-   `Attempting to bind to HOST environment variable: ${chalk.yellow(chalk.bold(process.env.HOST))}`
-  )
- );
- console.log(`If this was unintentional, check that you haven't mistakenly set it in your shell.`);
- console.log(`Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`);
- console.log();
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(`If this was unintentional, check that you haven't mistakenly set it in your shell.`);
+  console.log(`Learn more here: ${chalk.yellow("https://cra.link/advanced-config")}`);
+  console.log();
 }
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+const { checkBrowsers } = require("react-dev-utils/browsersHelper");
 checkBrowsers(paths.appPath, isInteractive)
- .then(() => {
-  // We attempt to use the default port but if it is busy, we offer the user to
-  // run on a different port. `choosePort()` Promise resolves to the next free port.
-  return choosePort(HOST, DEFAULT_PORT);
- })
- .then((port) => {
-  if (port == null) {
-   // We have not found a port.
-   return;
-  }
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then((port) => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
 
-  const config = configFactory('development');
-  const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-  const appName = require(paths.appPackageJson).name;
+    const config = configFactory("development");
+    const protocol = process.env.HTTPS === "true" ? "https" : "http";
+    const appName = require(paths.appPackageJson).name;
 
-  const useTypeScript = fs.existsSync(paths.appTsConfig);
-  const urls = prepareUrls(protocol, HOST, port, paths.publicUrlOrPath.slice(0, -1));
-  // Create a webpack compiler that is configured with custom messages.
-  const compiler = createCompiler({
-   appName,
-   config,
-   urls,
-   useYarn,
-   useTypeScript,
-   webpack
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const urls = prepareUrls(protocol, HOST, port, paths.publicUrlOrPath.slice(0, -1));
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler({
+      appName,
+      config,
+      urls,
+      useYarn,
+      useTypeScript,
+      webpack
+    });
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic, paths.publicUrlOrPath);
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = {
+      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+      host: HOST,
+      port
+    };
+    const devServer = new WebpackDevServer(serverConfig, compiler);
+    // Launch WebpackDevServer.
+    devServer.startCallback(() => {
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) {
+        console.log(
+          chalk.yellow(
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
+          )
+        );
+      }
+
+      console.log(chalk.cyan("Starting the development server...\n"));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ["SIGINT", "SIGTERM"].forEach(function (sig) {
+      process.on(sig, function () {
+        devServer.close();
+        process.exit();
+      });
+    });
+
+    if (process.env.CI !== "true") {
+      // Gracefully exit when stdin ends
+      process.stdin.on("end", function () {
+        devServer.close();
+        process.exit();
+      });
+    }
+  })
+  .catch((err) => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
   });
-  // Load proxy config
-  const proxySetting = require(paths.appPackageJson).proxy;
-  const proxyConfig = prepareProxy(proxySetting, paths.appPublic, paths.publicUrlOrPath);
-  // Serve webpack assets generated by the compiler over a web server.
-  const serverConfig = {
-   ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
-   host: HOST,
-   port
-  };
-  const devServer = new WebpackDevServer(serverConfig, compiler);
-  // Launch WebpackDevServer.
-  devServer.startCallback(() => {
-   if (isInteractive) {
-    clearConsole();
-   }
-
-   if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
-    console.log(
-     chalk.yellow(
-      `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
-     )
-    );
-   }
-
-   console.log(chalk.cyan('Starting the development server...\n'));
-   openBrowser(urls.localUrlForBrowser);
-  });
-
-  ['SIGINT', 'SIGTERM'].forEach(function (sig) {
-   process.on(sig, function () {
-    devServer.close();
-    process.exit();
-   });
-  });
-
-  if (process.env.CI !== 'true') {
-   // Gracefully exit when stdin ends
-   process.stdin.on('end', function () {
-    devServer.close();
-    process.exit();
-   });
-  }
- })
- .catch((err) => {
-  if (err && err.message) {
-   console.log(err.message);
-  }
-  process.exit(1);
- });
diff --git a/src/app/cache/index.js b/src/app/cache/index.js
index 26f2f5e7..93c4d703 100644
--- a/src/app/cache/index.js
+++ b/src/app/cache/index.js
@@ -4,44 +4,44 @@ import { KEY_UID, CACHE_VERSION } from "../config";
 const tables = [
   {
     storeName: "channels",
-    description: "store channel list",
+    description: "store channel list"
   },
   {
     storeName: "contacts",
-    description: "store contact list",
+    description: "store contact list"
   },
   {
     storeName: "messageDM",
-    description: "store DM message with IDs",
+    description: "store DM message with IDs"
   },
   {
     storeName: "messageChannel",
-    description: "store channel message with IDs",
+    description: "store channel message with IDs"
   },
   {
     storeName: "message",
-    description: "store message with key-val full data",
+    description: "store message with key-val full data"
   },
   {
     storeName: "messageFile",
-    description: "store file message list refs",
+    description: "store file message list refs"
   },
   {
     storeName: "messageReaction",
-    description: "store message reaction with key-val full data",
+    description: "store message reaction with key-val full data"
   },
   {
     storeName: "footprint",
-    description: "store user visit data",
+    description: "store user visit data"
   },
   {
     storeName: "server",
-    description: "store server data",
+    description: "store server data"
   },
   {
     storeName: "ui",
-    description: "store UI state",
-  },
+    description: "store UI state"
+  }
   // {
   //   storeName: "message",
   //   description: "store message with key-val full data",
@@ -55,7 +55,7 @@ const initCache = () => {
     window.CACHE[storeName] = localforage.createInstance({
       name,
       storeName,
-      description,
+      description
     });
   });
 };
diff --git a/src/app/cache/useRehydrate.js b/src/app/cache/useRehydrate.js
index da8c1a7a..05f8fc07 100644
--- a/src/app/cache/useRehydrate.js
+++ b/src/app/cache/useRehydrate.js
@@ -25,7 +25,7 @@ const useRehydrate = () => {
       message: { replying: {} },
       footprint: {},
       ui: {},
-      server: {},
+      server: {}
     };
     const tables = Object.keys(window.CACHE);
     const results = await Promise.all(
diff --git a/src/app/config.js b/src/app/config.js
index 6229eaa7..449fc5b2 100644
--- a/src/app/config.js
+++ b/src/app/config.js
@@ -7,7 +7,7 @@ export const ContentTypes = {
   file: "rustchat/file",
   formData: "multipart/form-data",
   json: "application/json",
-  archive: "rustchat/archive",
+  archive: "rustchat/archive"
 };
 export const firebaseConfig = {
   apiKey: "AIzaSyDyJ6B1Ouenoha_gdGkBwIkBNStlwhlbO0",
@@ -16,11 +16,11 @@ export const firebaseConfig = {
   storageBucket: "rustchat-develop.appspot.com",
   messagingSenderId: "418687074928",
   appId: "1:418687074928:web:753286adbf239f5af9eab5",
-  measurementId: "G-XV476KEC8P",
+  measurementId: "G-XV476KEC8P"
 };
 export const ChatPrefixs = {
   channel: "#",
-  user: "@",
+  user: "@"
 };
 export const vapidKey = `BGXCn-5YRXSFw38Q9lUKJ5bibL212-yIQn1pCvthGhp6_KwA29FO1Ax_d_7if1vfC2a5wTSVO8AcZrc-Hm1aS0Y`;
 // "840319286941-6ds7lbvk55eq8mjortf68cb2ll65lprt.apps.googleusercontent.com";
@@ -38,6 +38,6 @@ export const KEY_PWA_INSTALLED = "RUSTCHAT_PWA_INSTALLED";
 export const Emojis = ["👍", "❤️", "😄", "👀", "👎", "🎉", "🙁", "🚀"];
 export const Views = {
   item: "item",
-  grid: "grid",
+  grid: "grid"
 };
 export default BASE_URL;
diff --git a/src/app/listener.middleware/index.js b/src/app/listener.middleware/index.js
index af6a3e29..38a98aef 100644
--- a/src/app/listener.middleware/index.js
+++ b/src/app/listener.middleware/index.js
@@ -21,7 +21,7 @@ const operations = [
   "message",
   "ui",
   "footprint",
-  "server",
+  "server"
 ];
 
 // Create the middleware instance and methods
@@ -51,7 +51,7 @@ listenerMiddleware.startListening({
           rtkqHandler({
             operation,
             payload,
-            dispatch: listenerApi.dispatch,
+            dispatch: listenerApi.dispatch
           });
         }
         break;
@@ -60,7 +60,7 @@ listenerMiddleware.startListening({
           await channelsHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -69,7 +69,7 @@ listenerMiddleware.startListening({
           await contactsHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -78,7 +78,7 @@ listenerMiddleware.startListening({
           await channelMsgHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -87,7 +87,7 @@ listenerMiddleware.startListening({
           await dmMsgHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -96,7 +96,7 @@ listenerMiddleware.startListening({
           await fileMessageHandler({
             operation,
             // payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -105,7 +105,7 @@ listenerMiddleware.startListening({
           await messageHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -114,7 +114,7 @@ listenerMiddleware.startListening({
           await reactionHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -123,7 +123,7 @@ listenerMiddleware.startListening({
           await footprintHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -132,7 +132,7 @@ listenerMiddleware.startListening({
           await UIHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -141,7 +141,7 @@ listenerMiddleware.startListening({
           await serverHandler({
             operation,
             payload,
-            data: state,
+            data: state
           });
         }
         break;
@@ -149,7 +149,7 @@ listenerMiddleware.startListening({
       default:
         break;
     }
-  },
+  }
 });
 
 export default listenerMiddleware;
diff --git a/src/app/services/auth.js b/src/app/services/auth.js
index 49d3e23c..648c8512 100644
--- a/src/app/services/auth.js
+++ b/src/app/services/auth.js
@@ -4,157 +4,157 @@ import baseQuery from "./base.query";
 import { setAuthData, updateToken, resetAuthData, updateInitialized } from "../slices/auth.data";
 import BASE_URL, { KEY_DEVICE_KEY } from "../config";
 const getDeviceId = () => {
- let d = localStorage.getItem(KEY_DEVICE_KEY);
- if (!d) {
-  d = `web:${nanoid()}`;
-  localStorage.setItem(KEY_DEVICE_KEY, d);
- }
- return d;
+  let d = localStorage.getItem(KEY_DEVICE_KEY);
+  if (!d) {
+    d = `web:${nanoid()}`;
+    localStorage.setItem(KEY_DEVICE_KEY, d);
+  }
+  return d;
 };
 export const authApi = createApi({
- reducerPath: "authApi",
- baseQuery,
- endpoints: (builder) => ({
-  login: builder.mutation({
-   query: (credentials) => ({
-    url: "token/login",
-    method: "POST",
-    body: {
-     credential: credentials,
-     device: getDeviceId(),
-     device_token: "test"
-    }
-   }),
-   transformResponse: (data) => {
-    const { avatar_updated_at } = data.user;
-    data.user.avatar =
-     avatar_updated_at == 0
-      ? ""
-      : `${BASE_URL}/resource/avatar?uid=${data.user.uid}&t=${avatar_updated_at}`;
-    return data;
-   },
-   async onQueryStarted(params, { dispatch, queryFulfilled }) {
-    try {
-     const { data } = await queryFulfilled;
-     if (data) {
-      console.log("login resp", data);
-      dispatch(setAuthData(data));
-     }
-    } catch {
-     console.log("login error");
-    }
-   }
-  }),
-  // 更新token
-  renew: builder.mutation({
-   query: ({ token, refreshToken }) => ({
-    url: "/token/renew",
-    method: "POST",
-    body: {
-     token,
-     refresh_token: refreshToken
-    }
-   }),
-   async onQueryStarted(params, { dispatch, queryFulfilled }) {
-    try {
-     const { data } = await queryFulfilled;
-     dispatch(updateToken(data));
-    } catch {
-     dispatch(resetAuthData());
-     console.log("renew token error");
-    }
-   }
-  }),
-  // 更新 device token
-  updateDeviceToken: builder.mutation({
-   query: (device_token) => ({
-    url: "/token/device_token",
-    method: "PUT",
-    body: {
-     device_token
-    }
-   })
-  }),
-  //   获取openid
-  getOpenid: builder.mutation({
-   query: ({ issuer, redirect_uri }) => ({
-    url: "/token/openid/authorize",
-    method: "POST",
-    body: {
-     issuer,
-     redirect_uri
-    }
-   })
-  }),
+  reducerPath: "authApi",
+  baseQuery,
+  endpoints: (builder) => ({
+    login: builder.mutation({
+      query: (credentials) => ({
+        url: "token/login",
+        method: "POST",
+        body: {
+          credential: credentials,
+          device: getDeviceId(),
+          device_token: "test"
+        }
+      }),
+      transformResponse: (data) => {
+        const { avatar_updated_at } = data.user;
+        data.user.avatar =
+          avatar_updated_at == 0
+            ? ""
+            : `${BASE_URL}/resource/avatar?uid=${data.user.uid}&t=${avatar_updated_at}`;
+        return data;
+      },
+      async onQueryStarted(params, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+          if (data) {
+            console.log("login resp", data);
+            dispatch(setAuthData(data));
+          }
+        } catch {
+          console.log("login error");
+        }
+      }
+    }),
+    // 更新token
+    renew: builder.mutation({
+      query: ({ token, refreshToken }) => ({
+        url: "/token/renew",
+        method: "POST",
+        body: {
+          token,
+          refresh_token: refreshToken
+        }
+      }),
+      async onQueryStarted(params, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+          dispatch(updateToken(data));
+        } catch {
+          dispatch(resetAuthData());
+          console.log("renew token error");
+        }
+      }
+    }),
+    // 更新 device token
+    updateDeviceToken: builder.mutation({
+      query: (device_token) => ({
+        url: "/token/device_token",
+        method: "PUT",
+        body: {
+          device_token
+        }
+      })
+    }),
+    //   获取openid
+    getOpenid: builder.mutation({
+      query: ({ issuer, redirect_uri }) => ({
+        url: "/token/openid/authorize",
+        method: "POST",
+        body: {
+          issuer,
+          redirect_uri
+        }
+      })
+    }),
 
-  checkInviteTokenValid: builder.mutation({
-   query: (token) => ({
-    url: "user/check_invite_magic_token",
-    method: "POST",
-    body: { magic_token: token }
-   })
-  }),
-  updatePassword: builder.mutation({
-   query: ({ old_password, new_password }) => ({
-    url: "user/change_password",
-    method: "POST",
-    body: { old_password, new_password }
-   })
-  }),
-  sendMagicLink: builder.mutation({
-   query: (email) => ({
-    url: "token/send_magic_link",
-    method: "POST",
-    body: { email }
-   })
-  }),
-  getMetamaskNonce: builder.query({
-   query: (address) => ({
-    url: `/token/metamask/nonce?public_address=${address}`
-   })
-  }),
-  getCredentials: builder.query({
-   query: () => ({
-    url: `/token/credentials`
-   })
-  }),
-  logout: builder.query({
-   query: () => ({ url: `token/logout` }),
-   async onQueryStarted(params, { dispatch, queryFulfilled }) {
-    try {
-     await queryFulfilled;
-     dispatch(resetAuthData());
-    } catch {
-     console.log("logout error");
-    }
-   }
-  }),
-  getInitialized: builder.query({
-   query: () => ({
-    url: `/admin/system/initialized`
-   }),
-   async onQueryStarted(params, { dispatch, queryFulfilled }) {
-    try {
-     const { data: isInitialized } = await queryFulfilled;
-     dispatch(updateInitialized(isInitialized));
-    } catch {
-     console.log("api initialized error");
-    }
-   }
+    checkInviteTokenValid: builder.mutation({
+      query: (token) => ({
+        url: "user/check_invite_magic_token",
+        method: "POST",
+        body: { magic_token: token }
+      })
+    }),
+    updatePassword: builder.mutation({
+      query: ({ old_password, new_password }) => ({
+        url: "user/change_password",
+        method: "POST",
+        body: { old_password, new_password }
+      })
+    }),
+    sendMagicLink: builder.mutation({
+      query: (email) => ({
+        url: "token/send_magic_link",
+        method: "POST",
+        body: { email }
+      })
+    }),
+    getMetamaskNonce: builder.query({
+      query: (address) => ({
+        url: `/token/metamask/nonce?public_address=${address}`
+      })
+    }),
+    getCredentials: builder.query({
+      query: () => ({
+        url: `/token/credentials`
+      })
+    }),
+    logout: builder.query({
+      query: () => ({ url: `token/logout` }),
+      async onQueryStarted(params, { dispatch, queryFulfilled }) {
+        try {
+          await queryFulfilled;
+          dispatch(resetAuthData());
+        } catch {
+          console.log("logout error");
+        }
+      }
+    }),
+    getInitialized: builder.query({
+      query: () => ({
+        url: `/admin/system/initialized`
+      }),
+      async onQueryStarted(params, { dispatch, queryFulfilled }) {
+        try {
+          const { data: isInitialized } = await queryFulfilled;
+          dispatch(updateInitialized(isInitialized));
+        } catch {
+          console.log("api initialized error");
+        }
+      }
+    })
   })
- })
 });
 
 export const {
- useGetInitializedQuery,
- useSendMagicLinkMutation,
- useGetCredentialsQuery,
- useUpdateDeviceTokenMutation,
- useGetOpenidMutation,
- useRenewMutation,
- useLazyGetMetamaskNonceQuery,
- useLoginMutation,
- useLazyLogoutQuery,
- useCheckInviteTokenValidMutation,
- useUpdatePasswordMutation
+  useGetInitializedQuery,
+  useSendMagicLinkMutation,
+  useGetCredentialsQuery,
+  useUpdateDeviceTokenMutation,
+  useGetOpenidMutation,
+  useRenewMutation,
+  useLazyGetMetamaskNonceQuery,
+  useLoginMutation,
+  useLazyLogoutQuery,
+  useCheckInviteTokenValidMutation,
+  useUpdatePasswordMutation
 } = authApi;
diff --git a/src/app/services/base.query.js b/src/app/services/base.query.js
index 15c5a6c6..b416d323 100644
--- a/src/app/services/base.query.js
+++ b/src/app/services/base.query.js
@@ -18,7 +18,7 @@ const whiteList = [
   "getMetamaskNonce",
   "renew",
   "getInitialized",
-  "createAdmin",
+  "createAdmin"
 ];
 const baseQuery = fetchBaseQuery({
   baseUrl: BASE_URL,
@@ -29,7 +29,7 @@ const baseQuery = fetchBaseQuery({
       headers.set(tokenHeader, token);
     }
     return headers;
-  },
+  }
 });
 let waitingForRenew = null;
 const baseQueryWithTokenCheck = async (args, api, extraOptions) => {
@@ -37,16 +37,9 @@ const baseQueryWithTokenCheck = async (args, api, extraOptions) => {
     await waitingForRenew;
   }
   // 先检查token是否过期，过期则renew
-  const {
-    token,
-    refreshToken,
-    expireTime = +new Date(),
-  } = api.getState().authData;
+  const { token, refreshToken, expireTime = +new Date() } = api.getState().authData;
   let result = null;
-  if (
-    !whiteList.includes(api.endpoint) &&
-    dayjs().isAfter(new Date(expireTime - 20 * 1000))
-  ) {
+  if (!whiteList.includes(api.endpoint) && dayjs().isAfter(new Date(expireTime - 20 * 1000))) {
     // 快过期了，renew
     waitingForRenew = baseQuery(
       {
@@ -54,8 +47,8 @@ const baseQueryWithTokenCheck = async (args, api, extraOptions) => {
         method: "POST",
         body: {
           token,
-          refresh_token: refreshToken,
-        },
+          refresh_token: refreshToken
+        }
       },
       api,
       extraOptions
diff --git a/src/app/services/channel.js b/src/app/services/channel.js
index e0b9f16e..0e24848d 100644
--- a/src/app/services/channel.js
+++ b/src/app/services/channel.js
@@ -15,10 +15,10 @@ export const channelApi = createApi({
   refetchOnFocus: true,
   endpoints: (builder) => ({
     getChannels: builder.query({
-      query: () => ({ url: `group` }),
+      query: () => ({ url: `group` })
     }),
     getChannel: builder.query({
-      query: (id) => ({ url: `group/${id}` }),
+      query: (id) => ({ url: `group/${id}` })
     }),
     leaveChannel: builder.query({
       query: (id) => ({ url: `group/${id}/leave` }),
@@ -29,25 +29,22 @@ export const channelApi = createApi({
         } catch {
           console.log("channel update failed");
         }
-      },
+      }
     }),
     createChannel: builder.mutation({
       query: (data) => ({
         url: "group",
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     updateChannel: builder.mutation({
       query: ({ id, ...data }) => ({
         url: `group/${id}`,
         method: "PUT",
-        body: data,
+        body: data
       }),
-      async onQueryStarted(
-        { id, name, description },
-        { dispatch, queryFulfilled }
-      ) {
+      async onQueryStarted({ id, name, description }, { dispatch, queryFulfilled }) {
         // id: who send to ,from_uid: who sent
         const patchResult = dispatch(updateChannel({ id, name, description }));
         try {
@@ -56,13 +53,13 @@ export const channelApi = createApi({
           console.log("channel update failed");
           patchResult.undo();
         }
-      },
+      }
     }),
     getHistoryMessages: builder.query({
       query: ({ id, mid = null, limit = 100 }) => ({
         url: mid
           ? `/group/${id}/history?before=${mid}&limit=${limit}`
-          : `/group/${id}/history?limit=${limit}`,
+          : `/group/${id}/history?limit=${limit}`
       }),
       async onQueryStarted(params, { dispatch, getState, queryFulfilled }) {
         const { data: messages } = await queryFulfilled;
@@ -71,34 +68,34 @@ export const channelApi = createApi({
             handleChatMessage(msg, dispatch, getState());
           });
         }
-      },
+      }
     }),
     createInviteLink: builder.query({
       query: (gid) => ({
         headers: {
           "content-type": "text/plain",
-          accept: "text/plain",
+          accept: "text/plain"
         },
         url: `/group/${gid}/create_invite_link`,
-        responseHandler: (response) => response.text(),
+        responseHandler: (response) => response.text()
       }),
       transformResponse: (link) => {
         // 替换掉域名
         const invite = new URL(link);
         return `${location.origin}${invite.pathname}${invite.search}${invite.hash}`;
-      },
+      }
     }),
     removeChannel: builder.query({
       query: (id) => ({
         url: `group/${id}`,
-        method: "DELETE",
+        method: "DELETE"
       }),
       async onQueryStarted(id, { dispatch, getState, queryFulfilled }) {
         const {
           channelMessage,
           ui: {
-            remeberedNavs: { chat: remeberedPath },
-          },
+            remeberedNavs: { chat: remeberedPath }
+          }
         } = getState();
         try {
           await queryFulfilled;
@@ -115,7 +112,7 @@ export const channelApi = createApi({
         } catch {
           console.log("remove channel error");
         }
-      },
+      }
     }),
     sendChannelMsg: builder.mutation({
       query: ({ id, content, type = "text", properties = "" }) => ({
@@ -123,38 +120,38 @@ export const channelApi = createApi({
           "content-type": ContentTypes[type],
           "X-Properties": properties
             ? btoa(unescape(encodeURIComponent(JSON.stringify(properties))))
-            : "",
+            : ""
         },
         url: `group/${id}/send`,
         method: "POST",
-        body: type == "file" ? JSON.stringify(content) : content,
+        body: type == "file" ? JSON.stringify(content) : content
       }),
       async onQueryStarted(param1, param2) {
         await onMessageSendStarted.call(this, param1, param2, "channel");
-      },
+      }
     }),
     addMembers: builder.mutation({
       query: ({ id, members }) => ({
         url: `group/${id}/members/add`,
         method: "POST",
-        body: members,
-      }),
+        body: members
+      })
     }),
     removeMembers: builder.mutation({
       query: ({ id, members }) => ({
         url: `group/${id}/members/remove`,
         method: "POST",
-        body: members,
-      }),
+        body: members
+      })
     }),
     updateIcon: builder.mutation({
       query: ({ gid, image }) => ({
         headers: {
-          "content-type": "image/png",
+          "content-type": "image/png"
         },
         url: `/group/${gid}/avatar`,
         method: "POST",
-        body: image,
+        body: image
       }),
       async onQueryStarted({ gid }, { dispatch, queryFulfilled }) {
         try {
@@ -162,15 +159,15 @@ export const channelApi = createApi({
           dispatch(
             updateChannel({
               id: gid,
-              icon: `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${+new Date()}`,
+              icon: `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${+new Date()}`
             })
           );
         } catch (error) {
           console.log("err", error);
         }
-      },
-    }),
-  }),
+      }
+    })
+  })
 });
 
 export const {
@@ -186,5 +183,5 @@ export const {
   useSendChannelMsgMutation,
   useAddMembersMutation,
   useRemoveMembersMutation,
-  useUpdateIconMutation,
+  useUpdateIconMutation
 } = channelApi;
diff --git a/src/app/services/contact.js b/src/app/services/contact.js
index b0ba2206..21d1c2d7 100644
--- a/src/app/services/contact.js
+++ b/src/app/services/contact.js
@@ -45,23 +45,23 @@ export const contactApi = createApi({
         } catch {
           console.log("get contact list error");
         }
-      },
+      }
     }),
     deleteContact: builder.query({
-      query: (uid) => ({ url: `/admin/user/${uid}`, method: "DELETE" }),
+      query: (uid) => ({ url: `/admin/user/${uid}`, method: "DELETE" })
     }),
     updateContact: builder.mutation({
       query: ({ id, ...rest }) => ({
         url: `/admin/user/${id}`,
         body: rest,
-        method: "PUT",
-      }),
+        method: "PUT"
+      })
     }),
     updateMuteSetting: builder.mutation({
       query: (data) => ({
         url: `/user/mute`,
         method: "POST",
-        body: data,
+        body: data
       }),
       async onQueryStarted(data, { dispatch, queryFulfilled }) {
         try {
@@ -70,31 +70,31 @@ export const contactApi = createApi({
         } catch (error) {
           console.log("update mute failed", error);
         }
-      },
+      }
     }),
     updateAvatar: builder.mutation({
       query: (data) => ({
         headers: {
-          "content-type": "image/png",
+          "content-type": "image/png"
         },
         url: `user/avatar`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     updateInfo: builder.mutation({
       query: (data) => ({
         url: `user`,
         method: "PUT",
-        body: data,
-      }),
+        body: data
+      })
     }),
     register: builder.mutation({
       query: (data) => ({
         url: `user/register`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     sendMsg: builder.mutation({
       query: ({ id, content, type = "text", properties = "" }) => ({
@@ -102,21 +102,21 @@ export const contactApi = createApi({
           "content-type": ContentTypes[type],
           "X-Properties": properties
             ? btoa(unescape(encodeURIComponent(JSON.stringify(properties))))
-            : "",
+            : ""
         },
         url: `user/${id}/send`,
         method: "POST",
-        body: type == "file" ? JSON.stringify(content) : content,
+        body: type == "file" ? JSON.stringify(content) : content
       }),
       async onQueryStarted(param1, param2) {
         await onMessageSendStarted.call(this, param1, param2, "user");
-      },
+      }
     }),
     getHistoryMessages: builder.query({
       query: ({ id, mid = null, limit = 100 }) => ({
         url: mid
           ? `/user/${id}/history?before=${mid}&limit=${limit}`
-          : `/user/${id}/history?limit=${limit}`,
+          : `/user/${id}/history?limit=${limit}`
       }),
       async onQueryStarted(params, { dispatch, getState, queryFulfilled }) {
         const { data: messages } = await queryFulfilled;
@@ -125,9 +125,9 @@ export const contactApi = createApi({
             handleChatMessage(msg, dispatch, getState());
           });
         }
-      },
-    }),
-  }),
+      }
+    })
+  })
 });
 
 export const {
@@ -140,5 +140,5 @@ export const {
   useGetContactsQuery,
   useLazyGetContactsQuery,
   useSendMsgMutation,
-  useRegisterMutation,
+  useRegisterMutation
 } = contactApi;
diff --git a/src/app/services/handlers.js b/src/app/services/handlers.js
index f0180bd9..5bcaf509 100644
--- a/src/app/services/handlers.js
+++ b/src/app/services/handlers.js
@@ -12,7 +12,7 @@ export const onMessageSendStarted = async (
     type = "text",
     from_uid,
     reply_mid = null,
-    properties = { local_id: +new Date() },
+    properties = { local_id: +new Date() }
   },
   { dispatch, queryFulfilled },
   from = "channel"
@@ -42,11 +42,10 @@ export const onMessageSendStarted = async (
     properties,
     from_uid,
     reply_mid,
-    sending: true,
+    sending: true
   };
   const addContextMessage = from == "channel" ? addChannelMsg : addUserMsg;
-  const removeContextMessage =
-    from == "channel" ? removeChannelMsg : removeUserMsg;
+  const removeContextMessage = from == "channel" ? removeChannelMsg : removeUserMsg;
   if (!ignoreLocal) {
     batch(() => {
       dispatch(addMessage({ mid: ts, ...tmpMsg }));
diff --git a/src/app/services/message.js b/src/app/services/message.js
index 05c4d2bc..9a5d44d4 100644
--- a/src/app/services/message.js
+++ b/src/app/services/message.js
@@ -1,214 +1,214 @@
-import { createApi } from '@reduxjs/toolkit/query/react';
-import { ContentTypes } from '../config';
-import { updateReadChannels, updateReadUsers } from '../slices/footprint';
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { ContentTypes } from "../config";
+import { updateReadChannels, updateReadUsers } from "../slices/footprint";
 import {
- fullfillFavorites,
- populateFavorite,
- addFavorite,
- deleteFavorite
-} from '../slices/favorites';
-import { onMessageSendStarted } from './handlers';
-import { normalizeArchiveData } from '../../common/utils';
+  fullfillFavorites,
+  populateFavorite,
+  addFavorite,
+  deleteFavorite
+} from "../slices/favorites";
+import { onMessageSendStarted } from "./handlers";
+import { normalizeArchiveData } from "../../common/utils";
 // import { updateMessage } from "../slices/message";
-import baseQuery from './base.query';
+import baseQuery from "./base.query";
 
 export const messageApi = createApi({
- reducerPath: 'messageApi',
- baseQuery,
- endpoints: (builder) => ({
-  editMessage: builder.mutation({
-   query: ({ mid, content, type = 'text' }) => ({
-    headers: {
-     'content-type': ContentTypes[type]
-    },
-    url: `/message/${mid}/edit`,
-    method: 'PUT',
-    body: content
-   })
-   // async onQueryStarted({mid,content},{dispatch}){
-   //   dispatch()
-   // }
-  }),
-  reactMessage: builder.mutation({
-   query: ({ mid, action }) => ({
-    url: `/message/${mid}/like`,
-    method: 'PUT',
-    body: { action }
-   })
-  }),
-  deleteMessage: builder.query({
-   query: (mid) => ({
-    url: `/message/${mid}`,
-    method: 'DELETE'
-   })
-  }),
-  prepareUploadFile: builder.mutation({
-   query: (meta = {}) => ({
-    url: `/resource/file/prepare`,
-    method: 'POST',
-    body: meta
-   })
-  }),
-  createArchive: builder.mutation({
-   query: (mids = []) => ({
-    url: `/resource/archive`,
-    method: 'POST',
-    body: { mid_list: mids }
-   })
-  }),
-  uploadFile: builder.mutation({
-   query: (formData) => ({
-    // headers: {
-    //   "content-type": ContentTypes.formData,
-    // },
-    url: `/resource/file/upload`,
-    method: 'POST',
-    body: formData
-   }),
-   transformResponse: (data) => {
-    console.log('upload file response', data);
-    return data ? data : {};
-   }
-  }),
-  getOGInfo: builder.query({
-   query: (url) => ({
-    url: `/resource/open_graphic_parse?url=${encodeURIComponent(url)}`
-   })
-  }),
-  getArchiveMessage: builder.query({
-   query: (file_path) => ({
-    url: `/resource/archive?file_path=${encodeURIComponent(file_path)}`
-   })
-  }),
-  pinMessage: builder.mutation({
-   query: ({ gid, mid }) => ({
-    url: `/group/${gid}/pin`,
-    method: 'POST',
-    body: { mid }
-   })
-  }),
-  unpinMessage: builder.mutation({
-   query: ({ gid, mid }) => ({
-    url: `/group/${gid}/unpin`,
-    method: 'POST',
-    body: { mid }
-   })
-  }),
-  favoriteMessage: builder.mutation({
-   query: (mids) => ({
-    url: `/favorite`,
-    method: 'POST',
-    body: { mid_list: mids }
-   }),
-   async onQueryStarted(mids, { dispatch, queryFulfilled }) {
-    try {
-     const { data } = await queryFulfilled;
-     const { created_at, id } = data;
-     dispatch(addFavorite({ id, created_at }));
-     dispatch(messageApi.endpoints.getFavoriteDetails.initiate(id));
-    } catch (err) {
-     console.log('get favorite list error', err);
-    }
-   }
-  }),
-  removeFavorite: builder.query({
-   query: (id) => ({
-    url: `/favorite/${id}`,
-    method: 'DELETE'
-   }),
-   async onQueryStarted(id, { dispatch, queryFulfilled }) {
-    try {
-     await queryFulfilled;
-     dispatch(deleteFavorite(id));
-    } catch (err) {
-     console.log('get favorite list error', err);
-    }
-   }
-  }),
-  getFavoriteDetails: builder.query({
-   query: (id) => ({
-    url: `/favorite/${id}`
-   }),
-   async onQueryStarted(id, { dispatch, queryFulfilled, getState }) {
-    try {
-     const { data } = await queryFulfilled;
-     const loginUid = getState().authData.uid;
-     const messages = normalizeArchiveData(data, id, loginUid);
-     dispatch(populateFavorite({ id, messages }));
-    } catch (err) {
-     console.log('get favorite list error', err);
-    }
-   }
-  }),
-  getFavorites: builder.query({
-   query: () => ({
-    url: `/favorite`
-   }),
-   async onQueryStarted(data, { dispatch, queryFulfilled }) {
-    try {
-     const { data: favorites } = await queryFulfilled;
-     dispatch(fullfillFavorites(favorites));
-     for (const fav of favorites) {
-      const { id } = fav;
-      dispatch(messageApi.endpoints.getFavoriteDetails.initiate(id));
-     }
-    } catch (err) {
-     console.log('get favorite list error', err);
-    }
-   }
-  }),
-  replyMessage: builder.mutation({
-   query: ({ reply_mid, content, type = 'text' }) => ({
-    headers: {
-     'content-type': ContentTypes[type]
-    },
-    url: `/message/${reply_mid}/reply`,
-    method: 'POST',
-    body: content
-   }),
-   async onQueryStarted(param1, param2) {
-    await onMessageSendStarted.call(this, param1, param2, param1.context);
-   }
-  }),
-  readMessage: builder.mutation({
-   query: (data) => ({
-    url: `/user/read-index`,
-    method: 'POST',
-    body: data
-   }),
-   async onQueryStarted(data, { dispatch, queryFulfilled }) {
-    const { users = null, groups = null } = data;
-    if (users) {
-     dispatch(updateReadUsers(users));
-    }
-    if (groups) {
-     dispatch(updateReadChannels(groups));
-    }
-    try {
-     await queryFulfilled;
-    } catch {
-     // todo
-    }
-   }
+  reducerPath: "messageApi",
+  baseQuery,
+  endpoints: (builder) => ({
+    editMessage: builder.mutation({
+      query: ({ mid, content, type = "text" }) => ({
+        headers: {
+          "content-type": ContentTypes[type]
+        },
+        url: `/message/${mid}/edit`,
+        method: "PUT",
+        body: content
+      })
+      // async onQueryStarted({mid,content},{dispatch}){
+      //   dispatch()
+      // }
+    }),
+    reactMessage: builder.mutation({
+      query: ({ mid, action }) => ({
+        url: `/message/${mid}/like`,
+        method: "PUT",
+        body: { action }
+      })
+    }),
+    deleteMessage: builder.query({
+      query: (mid) => ({
+        url: `/message/${mid}`,
+        method: "DELETE"
+      })
+    }),
+    prepareUploadFile: builder.mutation({
+      query: (meta = {}) => ({
+        url: `/resource/file/prepare`,
+        method: "POST",
+        body: meta
+      })
+    }),
+    createArchive: builder.mutation({
+      query: (mids = []) => ({
+        url: `/resource/archive`,
+        method: "POST",
+        body: { mid_list: mids }
+      })
+    }),
+    uploadFile: builder.mutation({
+      query: (formData) => ({
+        // headers: {
+        //   "content-type": ContentTypes.formData,
+        // },
+        url: `/resource/file/upload`,
+        method: "POST",
+        body: formData
+      }),
+      transformResponse: (data) => {
+        console.log("upload file response", data);
+        return data ? data : {};
+      }
+    }),
+    getOGInfo: builder.query({
+      query: (url) => ({
+        url: `/resource/open_graphic_parse?url=${encodeURIComponent(url)}`
+      })
+    }),
+    getArchiveMessage: builder.query({
+      query: (file_path) => ({
+        url: `/resource/archive?file_path=${encodeURIComponent(file_path)}`
+      })
+    }),
+    pinMessage: builder.mutation({
+      query: ({ gid, mid }) => ({
+        url: `/group/${gid}/pin`,
+        method: "POST",
+        body: { mid }
+      })
+    }),
+    unpinMessage: builder.mutation({
+      query: ({ gid, mid }) => ({
+        url: `/group/${gid}/unpin`,
+        method: "POST",
+        body: { mid }
+      })
+    }),
+    favoriteMessage: builder.mutation({
+      query: (mids) => ({
+        url: `/favorite`,
+        method: "POST",
+        body: { mid_list: mids }
+      }),
+      async onQueryStarted(mids, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+          const { created_at, id } = data;
+          dispatch(addFavorite({ id, created_at }));
+          dispatch(messageApi.endpoints.getFavoriteDetails.initiate(id));
+        } catch (err) {
+          console.log("get favorite list error", err);
+        }
+      }
+    }),
+    removeFavorite: builder.query({
+      query: (id) => ({
+        url: `/favorite/${id}`,
+        method: "DELETE"
+      }),
+      async onQueryStarted(id, { dispatch, queryFulfilled }) {
+        try {
+          await queryFulfilled;
+          dispatch(deleteFavorite(id));
+        } catch (err) {
+          console.log("get favorite list error", err);
+        }
+      }
+    }),
+    getFavoriteDetails: builder.query({
+      query: (id) => ({
+        url: `/favorite/${id}`
+      }),
+      async onQueryStarted(id, { dispatch, queryFulfilled, getState }) {
+        try {
+          const { data } = await queryFulfilled;
+          const loginUid = getState().authData.uid;
+          const messages = normalizeArchiveData(data, id, loginUid);
+          dispatch(populateFavorite({ id, messages }));
+        } catch (err) {
+          console.log("get favorite list error", err);
+        }
+      }
+    }),
+    getFavorites: builder.query({
+      query: () => ({
+        url: `/favorite`
+      }),
+      async onQueryStarted(data, { dispatch, queryFulfilled }) {
+        try {
+          const { data: favorites } = await queryFulfilled;
+          dispatch(fullfillFavorites(favorites));
+          for (const fav of favorites) {
+            const { id } = fav;
+            dispatch(messageApi.endpoints.getFavoriteDetails.initiate(id));
+          }
+        } catch (err) {
+          console.log("get favorite list error", err);
+        }
+      }
+    }),
+    replyMessage: builder.mutation({
+      query: ({ reply_mid, content, type = "text" }) => ({
+        headers: {
+          "content-type": ContentTypes[type]
+        },
+        url: `/message/${reply_mid}/reply`,
+        method: "POST",
+        body: content
+      }),
+      async onQueryStarted(param1, param2) {
+        await onMessageSendStarted.call(this, param1, param2, param1.context);
+      }
+    }),
+    readMessage: builder.mutation({
+      query: (data) => ({
+        url: `/user/read-index`,
+        method: "POST",
+        body: data
+      }),
+      async onQueryStarted(data, { dispatch, queryFulfilled }) {
+        const { users = null, groups = null } = data;
+        if (users) {
+          dispatch(updateReadUsers(users));
+        }
+        if (groups) {
+          dispatch(updateReadChannels(groups));
+        }
+        try {
+          await queryFulfilled;
+        } catch {
+          // todo
+        }
+      }
+    })
   })
- })
 });
 
 export const {
- useLazyRemoveFavoriteQuery,
- useUnpinMessageMutation,
- useLazyGetFavoritesQuery,
- useFavoriteMessageMutation,
- usePinMessageMutation,
- useLazyGetArchiveMessageQuery,
- useGetArchiveMessageQuery,
- useLazyGetOGInfoQuery,
- usePrepareUploadFileMutation,
- useUploadFileMutation,
- useEditMessageMutation,
- useReactMessageMutation,
- useReplyMessageMutation,
- useLazyDeleteMessageQuery,
- useReadMessageMutation,
- useCreateArchiveMutation
+  useLazyRemoveFavoriteQuery,
+  useUnpinMessageMutation,
+  useLazyGetFavoritesQuery,
+  useFavoriteMessageMutation,
+  usePinMessageMutation,
+  useLazyGetArchiveMessageQuery,
+  useGetArchiveMessageQuery,
+  useLazyGetOGInfoQuery,
+  usePrepareUploadFileMutation,
+  useUploadFileMutation,
+  useEditMessageMutation,
+  useReactMessageMutation,
+  useReplyMessageMutation,
+  useLazyDeleteMessageQuery,
+  useReadMessageMutation,
+  useCreateArchiveMutation
 } = messageApi;
diff --git a/src/app/services/server.js b/src/app/services/server.js
index 3a5c03ee..58dc201c 100644
--- a/src/app/services/server.js
+++ b/src/app/services/server.js
@@ -20,7 +20,7 @@ export const serverApi = createApi({
         } catch {
           console.log("get server info error");
         }
-      },
+      }
     }),
     getThirdPartySecret: builder.query({
       query: () => ({
@@ -29,142 +29,142 @@ export const serverApi = createApi({
         //   accept: "text/plain",
         // },
         url: `/admin/system/third_party_secret`,
-        responseHandler: (response) => response.text(),
+        responseHandler: (response) => response.text()
       }),
-      keepUnusedDataFor: 0,
+      keepUnusedDataFor: 0
     }),
     updateThirdPartySecret: builder.mutation({
       query: () => ({
         url: `/admin/system/third_party_secret`,
         method: "POST",
-        responseHandler: (response) => response.text(),
-      }),
+        responseHandler: (response) => response.text()
+      })
     }),
     getMetrics: builder.query({
-      query: () => ({ url: `/admin/system/metrics` }),
+      query: () => ({ url: `/admin/system/metrics` })
     }),
     getServerVersion: builder.query({
       query: () => ({
         headers: {
           // "content-type": "text/plain",
-          accept: "text/plain",
+          accept: "text/plain"
         },
         url: `/admin/system/version`,
-        responseHandler: (response) => response.text(),
-      }),
+        responseHandler: (response) => response.text()
+      })
     }),
     getFirebaseConfig: builder.query({
-      query: () => ({ url: `admin/fcm/config` }),
+      query: () => ({ url: `admin/fcm/config` })
     }),
     getGoogleAuthConfig: builder.query({
-      query: () => ({ url: `admin/google_auth/config` }),
+      query: () => ({ url: `admin/google_auth/config` })
     }),
     updateGoogleAuthConfig: builder.mutation({
       query: (data) => ({
         url: `admin/google_auth/config`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     getGithubAuthConfig: builder.query({
-      query: () => ({ url: `admin/github_auth/config` }),
+      query: () => ({ url: `admin/github_auth/config` })
     }),
     updateGithubAuthConfig: builder.mutation({
       query: (data) => ({
         url: `admin/github_auth/config`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     sendTestEmail: builder.mutation({
       query: (data) => ({
         url: `/admin/system/send_mail`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     updateFirebaseConfig: builder.mutation({
       query: (data) => ({
         url: `admin/fcm/config`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     getAgoraConfig: builder.query({
-      query: () => ({ url: `admin/agora/config` }),
+      query: () => ({ url: `admin/agora/config` })
     }),
     updateAgoraConfig: builder.mutation({
       query: (data) => ({
         url: `admin/agora/config`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     getSMTPConfig: builder.query({
-      query: () => ({ url: `admin/smtp/config` }),
+      query: () => ({ url: `admin/smtp/config` })
     }),
     getSMTPStatus: builder.query({
-      query: () => ({ url: `/admin/smtp/enabled` }),
+      query: () => ({ url: `/admin/smtp/enabled` })
     }),
     updateSMTPConfig: builder.mutation({
       query: (data) => ({
         url: `admin/smtp/config`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     getLoginConfig: builder.query({
-      query: () => ({ url: `admin/login/config` }),
+      query: () => ({ url: `admin/login/config` })
     }),
     updateLoginConfig: builder.mutation({
       query: (data) => ({
         url: `admin/login/config`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     updateLogo: builder.mutation({
       query: (data) => ({
         headers: {
-          "content-type": "image/png",
+          "content-type": "image/png"
         },
         url: `admin/system/organization/logo`,
         method: "POST",
-        body: data,
+        body: data
       }),
       async onQueryStarted(data, { dispatch, queryFulfilled }) {
         try {
           await queryFulfilled;
           dispatch(
             updateInfo({
-              logo: `${BASE_URL}/resource/organization/logo?t=${+new Date()}`,
+              logo: `${BASE_URL}/resource/organization/logo?t=${+new Date()}`
             })
           );
         } catch {
           console.log("update server logo error");
         }
-      },
+      }
     }),
     createInviteLink: builder.query({
       query: (expired_in = defaultExpireDuration) => ({
         headers: {
           "content-type": "text/plain",
-          accept: "text/plain",
+          accept: "text/plain"
         },
         url: `/admin/system/create_invite_link?expired_in=${expired_in}`,
-        responseHandler: (response) => response.text(),
+        responseHandler: (response) => response.text()
       }),
       transformResponse: (link) => {
         // 替换掉域名
         const invite = new URL(link);
         return `${location.origin}${invite.pathname}${invite.search}${invite.hash}`;
-      },
+      }
     }),
     updateServer: builder.mutation({
       query: (data) => ({
         url: `admin/system/organization`,
         method: "POST",
-        body: data,
+        body: data
       }),
       async onQueryStarted(data, { dispatch, queryFulfilled, getState }) {
         const { name: prevName, description: prevDesc } = getState().server;
@@ -174,21 +174,21 @@ export const serverApi = createApi({
         } catch {
           dispatch(updateInfo({ name: prevName, description: prevDesc }));
         }
-      },
+      }
     }),
     createAdmin: builder.mutation({
       query: (data) => ({
         url: `/admin/system/create_admin`,
         method: "POST",
-        body: data,
-      }),
+        body: data
+      })
     }),
     getInitialized: builder.query({
       query: () => ({
-        url: `/admin/system/initialized`,
-      }),
-    }),
-  }),
+        url: `/admin/system/initialized`
+      })
+    })
+  })
 });
 
 export const {
@@ -217,5 +217,5 @@ export const {
   useGetThirdPartySecretQuery,
   useUpdateThirdPartySecretMutation,
   useCreateAdminMutation,
-  useGetInitializedQuery,
+  useGetInitializedQuery
 } = serverApi;
diff --git a/src/app/slices/auth.data.js b/src/app/slices/auth.data.js
index e732269d..f4606260 100644
--- a/src/app/slices/auth.data.js
+++ b/src/app/slices/auth.data.js
@@ -1,24 +1,18 @@
 import { createSlice } from "@reduxjs/toolkit";
-import {
-  KEY_PWA_INSTALLED,
-  KEY_REFRESH_TOKEN,
-  KEY_TOKEN,
-  KEY_UID,
-  KEY_EXPIRE,
-} from "../config";
+import { KEY_PWA_INSTALLED, KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID, KEY_EXPIRE } from "../config";
 const initialState = {
   initialized: true,
   uid: null,
   token: localStorage.getItem(KEY_TOKEN),
   expireTime: localStorage.getItem(KEY_EXPIRE) || +new Date(),
-  refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN),
+  refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN)
 };
 const emptyState = {
   initialized: true,
   uid: null,
   token: null,
   expireTime: +new Date(),
-  refreshToken: null,
+  refreshToken: null
 };
 const authDataSlice = createSlice({
   name: "authData",
@@ -30,7 +24,7 @@ const authDataSlice = createSlice({
         user: { uid },
         token,
         refresh_token,
-        expired_in = 0,
+        expired_in = 0
       } = action.payload;
       state.initialized = initialized;
       state.uid = uid;
@@ -76,14 +70,9 @@ const authDataSlice = createSlice({
       localStorage.setItem(KEY_EXPIRE, et);
       localStorage.setItem(KEY_TOKEN, token);
       localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
-    },
-  },
+    }
+  }
 });
-export const {
-  updateInitialized,
-  setAuthData,
-  resetAuthData,
-  setUid,
-  updateToken,
-} = authDataSlice.actions;
+export const { updateInitialized, setAuthData, resetAuthData, setUid, updateToken } =
+  authDataSlice.actions;
 export default authDataSlice.reducer;
diff --git a/src/app/slices/channels.js b/src/app/slices/channels.js
index 845a909f..e05bc6d3 100644
--- a/src/app/slices/channels.js
+++ b/src/app/slices/channels.js
@@ -3,7 +3,7 @@ import BASE_URL from "../config";
 import { getNonNullValues } from "../../common/utils";
 const initialState = {
   ids: [],
-  byId: {},
+  byId: {}
 };
 const channelsSlice = createSlice({
   name: `channels`,
@@ -36,18 +36,14 @@ const channelsSlice = createSlice({
         icon:
           avatar_updated_at == 0
             ? ""
-            : `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`,
+            : `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`
       };
     },
     updateChannel(state, action) {
       const ignoreInPublic = ["add_member", "remove_member"];
       const { id, operation, members = [], ...rest } = action.payload;
       const currChannel = state.byId[id];
-      if (
-        !currChannel ||
-        (currChannel.is_public && ignoreInPublic.includes(operation))
-      )
-        return;
+      if (!currChannel || (currChannel.is_public && ignoreInPublic.includes(operation))) return;
       switch (operation) {
         case "remove_member":
           {
@@ -99,8 +95,8 @@ const channelsSlice = createSlice({
         state.ids.splice(idx, 1);
         delete state.byId[gid];
       }
-    },
-  },
+    }
+  }
 });
 export const {
   updatePinMessage,
@@ -108,6 +104,6 @@ export const {
   fullfillChannels,
   addChannel,
   updateChannel,
-  removeChannel,
+  removeChannel
 } = channelsSlice.actions;
 export default channelsSlice.reducer;
diff --git a/src/app/slices/contacts.js b/src/app/slices/contacts.js
index d3d85562..a1d62491 100644
--- a/src/app/slices/contacts.js
+++ b/src/app/slices/contacts.js
@@ -3,7 +3,7 @@ import { getNonNullValues } from "../../common/utils";
 import BASE_URL from "../config";
 const initialState = {
   ids: [],
-  byId: {},
+  byId: {}
 };
 const contactsSlice = createSlice({
   name: `contacts`,
@@ -39,9 +39,7 @@ const contactsSlice = createSlice({
                 Object.keys(vals).forEach((k) => {
                   state.byId[uid][k] = vals[k];
                   if (k == "avatar_updated_at") {
-                    state.byId[
-                      uid
-                    ].avatar = `${BASE_URL}/resource/avatar?uid=${uid}&t=${vals[k]}`;
+                    state.byId[uid].avatar = `${BASE_URL}/resource/avatar?uid=${uid}&t=${vals[k]}`;
                   }
                 });
               }
@@ -80,13 +78,9 @@ const contactsSlice = createSlice({
           state.byId[uid].online = online;
         }
       });
-    },
-  },
+    }
+  }
 });
-export const {
-  resetContacts,
-  fullfillContacts,
-  updateUsersByLogs,
-  updateUsersStatus,
-} = contactsSlice.actions;
+export const { resetContacts, fullfillContacts, updateUsersByLogs, updateUsersStatus } =
+  contactsSlice.actions;
 export default contactsSlice.reducer;
diff --git a/src/app/slices/favorites.js b/src/app/slices/favorites.js
index f11e88d6..a26ea57e 100644
--- a/src/app/slices/favorites.js
+++ b/src/app/slices/favorites.js
@@ -24,13 +24,9 @@ const favoritesSlice = createSlice({
       if (idx > -1) {
         state[idx].messages = messages;
       }
-    },
-  },
+    }
+  }
 });
-export const {
-  addFavorite,
-  deleteFavorite,
-  fullfillFavorites,
-  populateFavorite,
-} = favoritesSlice.actions;
+export const { addFavorite, deleteFavorite, fullfillFavorites, populateFavorite } =
+  favoritesSlice.actions;
 export default favoritesSlice.reducer;
diff --git a/src/app/slices/footprint.js b/src/app/slices/footprint.js
index 3a57c3aa..188285b7 100644
--- a/src/app/slices/footprint.js
+++ b/src/app/slices/footprint.js
@@ -5,7 +5,7 @@ const initialState = {
   readUsers: {},
   readChannels: {},
   muteUsers: {},
-  muteChannels: {},
+  muteChannels: {}
 };
 const footprintSlice = createSlice({
   name: "footprint",
@@ -21,7 +21,7 @@ const footprintSlice = createSlice({
         readUsers = {},
         readChannels = {},
         muteUsers = {},
-        muteChannels = {},
+        muteChannels = {}
       } = action.payload;
       return {
         usersVersion,
@@ -29,7 +29,7 @@ const footprintSlice = createSlice({
         readUsers,
         readChannels,
         muteUsers,
-        muteChannels,
+        muteChannels
       };
     },
     updateUsersVersion(state, action) {
@@ -94,8 +94,8 @@ const footprintSlice = createSlice({
       reads.forEach(({ gid, mid }) => {
         state.readChannels[gid] = mid;
       });
-    },
-  },
+    }
+  }
 });
 export const {
   resetFootprint,
@@ -104,6 +104,6 @@ export const {
   updateUsersVersion,
   updateReadChannels,
   updateReadUsers,
-  updateMute,
+  updateMute
 } = footprintSlice.actions;
 export default footprintSlice.reducer;
diff --git a/src/app/slices/message.channel.js b/src/app/slices/message.channel.js
index 2e444a44..241758ae 100644
--- a/src/app/slices/message.channel.js
+++ b/src/app/slices/message.channel.js
@@ -15,8 +15,7 @@ const channelMsgSlice = createSlice({
       const { id, mid, local_id = null } = action.payload;
       if (state[id]) {
         const midExsited = state[id].findIndex((id) => id == mid) > -1;
-        const localMsgExsited =
-          state[id].findIndex((id) => id == local_id) > -1;
+        const localMsgExsited = state[id].findIndex((id) => id == local_id) > -1;
         if (midExsited || localMsgExsited) return;
         state[id].push(+mid);
       } else {
@@ -44,14 +43,12 @@ const channelMsgSlice = createSlice({
       }
     },
     removeChannelSession(state, action) {
-      const ids = Array.isArray(action.payload)
-        ? action.payload
-        : [action.payload];
+      const ids = Array.isArray(action.payload) ? action.payload : [action.payload];
       ids.forEach((id) => {
         delete state[id];
       });
-    },
-  },
+    }
+  }
 });
 export const {
   removeChannelSession,
@@ -59,6 +56,6 @@ export const {
   fullfillChannelMsg,
   addChannelMsg,
   removeChannelMsg,
-  replaceChannelMsg,
+  replaceChannelMsg
 } = channelMsgSlice.actions;
 export default channelMsgSlice.reducer;
diff --git a/src/app/slices/message.file.js b/src/app/slices/message.file.js
index 37060366..01d5515e 100644
--- a/src/app/slices/message.file.js
+++ b/src/app/slices/message.file.js
@@ -20,9 +20,7 @@ const fileMessageSlice = createSlice({
       }
     },
     removeFileMessage(state, action) {
-      const mids = Array.isArray(action.payload)
-        ? action.payload
-        : [action.payload];
+      const mids = Array.isArray(action.payload) ? action.payload : [action.payload];
       mids.forEach((id) => {
         // 从file message 列表删掉
         const fidIdx = state.findIndex((fid) => fid == id);
@@ -30,13 +28,9 @@ const fileMessageSlice = createSlice({
           state.splice(fidIdx, 1);
         }
       });
-    },
-  },
+    }
+  }
 });
-export const {
-  removeFileMessage,
-  resetFileMessage,
-  fullfillFileMessage,
-  addFileMessage,
-} = fileMessageSlice.actions;
+export const { removeFileMessage, resetFileMessage, fullfillFileMessage, addFileMessage } =
+  fileMessageSlice.actions;
 export default fileMessageSlice.reducer;
diff --git a/src/app/slices/message.js b/src/app/slices/message.js
index 79b8ba5e..c92f6efa 100644
--- a/src/app/slices/message.js
+++ b/src/app/slices/message.js
@@ -2,7 +2,7 @@ import { createSlice } from "@reduxjs/toolkit";
 import BASE_URL, { ContentTypes } from "../config";
 import { isImage } from "../../common/utils";
 const initialState = {
-  replying: {},
+  replying: {}
 };
 const messageSlice = createSlice({
   name: "message",
@@ -48,9 +48,7 @@ const messageSlice = createSlice({
       state[mid] = data;
     },
     removeMessage(state, action) {
-      const mids = Array.isArray(action.payload)
-        ? action.payload
-        : [action.payload];
+      const mids = Array.isArray(action.payload) ? action.payload : [action.payload];
       mids.forEach((id) => {
         delete state[id];
       });
@@ -65,8 +63,8 @@ const messageSlice = createSlice({
       if (state.replying[key]) {
         delete state.replying[key];
       }
-    },
-  },
+    }
+  }
 });
 export const {
   resetMessage,
@@ -76,6 +74,6 @@ export const {
   addMessage,
   removeMessage,
   addReplyingMessage,
-  removeReplyingMessage,
+  removeReplyingMessage
 } = messageSlice.actions;
 export default messageSlice.reducer;
diff --git a/src/app/slices/message.reaction.js b/src/app/slices/message.reaction.js
index 9482c0fd..44d40b46 100644
--- a/src/app/slices/message.reaction.js
+++ b/src/app/slices/message.reaction.js
@@ -12,9 +12,7 @@ const reactionMessageSlice = createSlice({
       return action.payload;
     },
     removeReactionMessage(state, action) {
-      const mids = Array.isArray(action.payload)
-        ? action.payload
-        : [action.payload];
+      const mids = Array.isArray(action.payload) ? action.payload : [action.payload];
       mids.forEach((id) => {
         delete state[id];
       });
@@ -48,13 +46,13 @@ const reactionMessageSlice = createSlice({
         state[mid][reaction] = [from_uid];
       }
       state[rid] = true;
-    },
-  },
+    }
+  }
 });
 export const {
   removeReactionMessage,
   resetReactionMessage,
   fullfillReactionMessage,
-  toggleReactionMessage,
+  toggleReactionMessage
 } = reactionMessageSlice.actions;
 export default reactionMessageSlice.reducer;
diff --git a/src/app/slices/message.user.js b/src/app/slices/message.user.js
index 7f8a7966..cc925d1b 100644
--- a/src/app/slices/message.user.js
+++ b/src/app/slices/message.user.js
@@ -1,7 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 const initialState = {
   ids: [],
-  byId: {},
+  byId: {}
 };
 const userMsgSlice = createSlice({
   name: "userMessage",
@@ -18,8 +18,7 @@ const userMsgSlice = createSlice({
       const { id, mid, local_id } = action.payload;
       if (state.byId[id]) {
         const midExsited = state.byId[id].findIndex((id) => id == mid) > -1;
-        const localMsgExsited =
-          state.byId[id].findIndex((id) => id == local_id) > -1;
+        const localMsgExsited = state.byId[id].findIndex((id) => id == local_id) > -1;
         if (midExsited || localMsgExsited) return;
 
         state.byId[id].push(+mid);
@@ -53,15 +52,13 @@ const userMsgSlice = createSlice({
       }
     },
     removeUserSession(state, action) {
-      const ids = Array.isArray(action.payload)
-        ? action.payload
-        : [action.payload];
+      const ids = Array.isArray(action.payload) ? action.payload : [action.payload];
       state.ids = state.ids.filter((id) => ids.findIndex((i) => i == id) == -1);
       // ids.forEach((id) => {
       //   delete state.byId[id];
       // });
-    },
-  },
+    }
+  }
 });
 export const {
   removeUserSession,
@@ -69,6 +66,6 @@ export const {
   fullfillUserMsg,
   addUserMsg,
   removeUserMsg,
-  replaceUserMsg,
+  replaceUserMsg
 } = userMsgSlice.actions;
 export default userMsgSlice.reducer;
diff --git a/src/app/slices/readme.md b/src/app/slices/readme.md
index 096881d3..8bc69ca1 100644
--- a/src/app/slices/readme.md
+++ b/src/app/slices/readme.md
@@ -4,4 +4,4 @@ set
 add
 update
 remove
-toggle
\ No newline at end of file
+toggle
diff --git a/src/app/slices/server.js b/src/app/slices/server.js
index 6a6efee0..e85e6460 100644
--- a/src/app/slices/server.js
+++ b/src/app/slices/server.js
@@ -5,8 +5,8 @@ const initialState = {
   logo: "",
   inviteLink: {
     link: "",
-    expire: 0,
-  },
+    expire: 0
+  }
 };
 const serverSlice = createSlice({
   name: "server",
@@ -19,10 +19,10 @@ const serverSlice = createSlice({
       const {
         inviteLink = {
           link: "",
-          expire: 0,
+          expire: 0
         },
         name = "",
-        description = "",
+        description = ""
       } = action.payload || {};
       return { name, description, inviteLink };
     },
@@ -31,8 +31,8 @@ const serverSlice = createSlice({
       Object.keys(values).forEach((_key) => {
         state[_key] = values[_key];
       });
-    },
-  },
+    }
+  }
 });
 export const { updateInfo, resetServer, fullfillServer } = serverSlice.actions;
 export default serverSlice.reducer;
diff --git a/src/app/slices/ui.js b/src/app/slices/ui.js
index 7695dac2..f1302672 100644
--- a/src/app/slices/ui.js
+++ b/src/app/slices/ui.js
@@ -5,7 +5,7 @@ const initialState = {
   ready: false,
   userGuide: {
     visible: false,
-    step: 1,
+    step: 1
   },
   inputMode: "text",
   menuExpand: false,
@@ -16,8 +16,8 @@ const initialState = {
   draftMixedText: {},
   remeberedNavs: {
     chat: null,
-    contact: null,
-  },
+    contact: null
+  }
 };
 const uiSlice = createSlice({
   name: "ui",
@@ -61,12 +61,7 @@ const uiSlice = createSlice({
     },
 
     updateUploadFiles(state, action) {
-      const {
-        context = "channel",
-        id = null,
-        operation = "add",
-        ...rest
-      } = action.payload;
+      const { context = "channel", id = null, operation = "add", ...rest } = action.payload;
       if (!id || !context) return;
       const _key = `${context}_${id}`;
       let files = state.uploadFiles[_key];
@@ -126,12 +121,7 @@ const uiSlice = createSlice({
       }
     },
     updateSelectMessages(state, action) {
-      const {
-        context = "channel",
-        id = null,
-        operation = "add",
-        data = null,
-      } = action.payload;
+      const { context = "channel", id = null, operation = "add", data = null } = action.payload;
       let currData = state.selectMessages[`${context}_${id}`];
       switch (operation) {
         case "add": {
@@ -151,8 +141,8 @@ const uiSlice = createSlice({
           break;
       }
       state.selectMessages[`${context}_${id}`] = currData;
-    },
-  },
+    }
+  }
 });
 export const {
   fullfillUI,
@@ -166,6 +156,6 @@ export const {
   updateUserGuide,
   updateDraftMarkdown,
   updateDraftMixedText,
-  updateRemeberedNavs,
+  updateRemeberedNavs
 } = uiSlice.actions;
 export default uiSlice.reducer;
diff --git a/src/app/store.js b/src/app/store.js
index 89974d3f..3139d107 100644
--- a/src/app/store.js
+++ b/src/app/store.js
@@ -36,7 +36,7 @@ const reducer = combineReducers({
   [messageApi.reducerPath]: messageApi.reducer,
   [contactApi.reducerPath]: contactApi.reducer,
   [channelApi.reducerPath]: channelApi.reducer,
-  [serverApi.reducerPath]: serverApi.reducer,
+  [serverApi.reducerPath]: serverApi.reducer
 });
 
 const store = configureStore({
@@ -50,48 +50,41 @@ const store = configureStore({
         serverApi.middleware,
         messageApi.middleware
       )
-      .prepend(listenerMiddleware.middleware),
+      .prepend(listenerMiddleware.middleware)
 });
 let initialized = false;
-setupListeners(
-  store.dispatch,
-  (dispatch, { onOnline, onOffline, onFocus, onFocusLost }) => {
-    const handleFocus = () => dispatch(onFocus());
-    const handleFocusLost = () => dispatch(onFocusLost());
-    const handleOnline = () => dispatch(onOnline());
-    const handleOffline = () => dispatch(onOffline());
-    const handleVisibilityChange = () => {
-      if (window.document.visibilityState === "visible") {
-        handleFocus();
-      } else {
-        handleFocusLost();
-      }
-    };
-
-    if (!initialized) {
-      if (typeof window !== "undefined" && window.addEventListener) {
-        // Handle focus events
-        window.addEventListener(
-          "visibilitychange",
-          handleVisibilityChange,
-          false
-        );
-        window.addEventListener("focus", handleFocus, false);
-
-        // Handle connection events
-        window.addEventListener("online", handleOnline, false);
-        window.addEventListener("offline", handleOffline, false);
-        initialized = true;
-      }
+setupListeners(store.dispatch, (dispatch, { onOnline, onOffline, onFocus, onFocusLost }) => {
+  const handleFocus = () => dispatch(onFocus());
+  const handleFocusLost = () => dispatch(onFocusLost());
+  const handleOnline = () => dispatch(onOnline());
+  const handleOffline = () => dispatch(onOffline());
+  const handleVisibilityChange = () => {
+    if (window.document.visibilityState === "visible") {
+      handleFocus();
+    } else {
+      handleFocusLost();
+    }
+  };
+
+  if (!initialized) {
+    if (typeof window !== "undefined" && window.addEventListener) {
+      // Handle focus events
+      window.addEventListener("visibilitychange", handleVisibilityChange, false);
+      window.addEventListener("focus", handleFocus, false);
+
+      // Handle connection events
+      window.addEventListener("online", handleOnline, false);
+      window.addEventListener("offline", handleOffline, false);
+      initialized = true;
     }
-    const unsubscribe = () => {
-      window.removeEventListener("focus", handleFocus);
-      window.removeEventListener("visibilitychange", handleVisibilityChange);
-      window.removeEventListener("online", handleOnline);
-      window.removeEventListener("offline", handleOffline);
-      initialized = false;
-    };
-    return unsubscribe;
   }
-);
+  const unsubscribe = () => {
+    window.removeEventListener("focus", handleFocus);
+    window.removeEventListener("visibilitychange", handleVisibilityChange);
+    window.removeEventListener("online", handleOnline);
+    window.removeEventListener("offline", handleOffline);
+    initialized = false;
+  };
+  return unsubscribe;
+});
 export default store;
diff --git a/src/assets/base.css b/src/assets/base.css
index 248fcecd..b5eda80c 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,20 +1,20 @@
 ::-webkit-scrollbar-thumb {
-    background: #ddd;
-    border-radius: 4px;
+  background: #ddd;
+  border-radius: 4px;
 }
 ::-webkit-scrollbar {
-    background: transparent;
-    width: 5px;
-    height: 5px;
+  background: transparent;
+  width: 5px;
+  height: 5px;
 }
-:root{
-    /* border radius */
-    --br:8px;
-    --rustchat-navs-bg:#E5E7EB;
-    --rustchat-body-bg:#F5F6F7;
-    --rustchat-chat-bg:#fff;
-    --rustchat-channel-text-color:#1C1C1E;
-    --rustchat-msg-text-color:#374151;
+:root {
+  /* border radius */
+  --br: 8px;
+  --rustchat-navs-bg: #e5e7eb;
+  --rustchat-body-bg: #f5f6f7;
+  --rustchat-chat-bg: #fff;
+  --rustchat-channel-text-color: #1c1c1e;
+  --rustchat-msg-text-color: #374151;
 }
 /* @media (prefers-color-scheme: dark) {
     :root{
@@ -25,4 +25,4 @@
         --rustchat-channel-text-color:#fff;
         --rustchat-msg-text-color:#fff;
     }
-  } */
\ No newline at end of file
+  } */
diff --git a/src/assets/emojis.native.json b/src/assets/emojis.native.json
index 5c8d6d25..c505ff57 100644
--- a/src/assets/emojis.native.json
+++ b/src/assets/emojis.native.json
@@ -1894,17 +1894,7 @@
     "100": {
       "id": "100",
       "name": "Hundred Points",
-      "keywords": [
-        "100",
-        "score",
-        "perfect",
-        "numbers",
-        "century",
-        "exam",
-        "quiz",
-        "test",
-        "pass"
-      ],
+      "keywords": ["100", "score", "perfect", "numbers", "century", "exam", "quiz", "test", "pass"],
       "skins": [{ "unified": "1f4af", "native": "💯" }],
       "version": 1
     },
@@ -1927,16 +1917,7 @@
       "id": "smiley",
       "name": "Grinning Face with Big Eyes",
       "emoticons": [":)", "=)", "=-)"],
-      "keywords": [
-        "smiley",
-        "happy",
-        "joy",
-        "haha",
-        ":D",
-        ":)",
-        "smile",
-        "funny"
-      ],
+      "keywords": ["smiley", "happy", "joy", "haha", ":D", ":)", "smile", "funny"],
       "skins": [{ "unified": "1f603", "native": "😃" }],
       "version": 1
     },
@@ -1944,17 +1925,7 @@
       "id": "smile",
       "name": "Grinning Face with Smiling Eyes",
       "emoticons": [":)", "C:", "c:", ":D", ":-D"],
-      "keywords": [
-        "smile",
-        "happy",
-        "joy",
-        "funny",
-        "haha",
-        "laugh",
-        "like",
-        ":D",
-        ":)"
-      ],
+      "keywords": ["smile", "happy", "joy", "funny", "haha", "laugh", "like", ":D", ":)"],
       "skins": [{ "unified": "1f604", "native": "😄" }],
       "version": 1
     },
@@ -1969,17 +1940,7 @@
       "id": "laughing",
       "name": "Grinning Squinting Face",
       "emoticons": [":>", ":->"],
-      "keywords": [
-        "laughing",
-        "satisfied",
-        "happy",
-        "joy",
-        "lol",
-        "haha",
-        "glad",
-        "XD",
-        "laugh"
-      ],
+      "keywords": ["laughing", "satisfied", "happy", "joy", "lol", "haha", "glad", "XD", "laugh"],
       "skins": [{ "unified": "1f606", "native": "😆" }],
       "version": 1
     },
@@ -2038,16 +1999,7 @@
       "id": "blush",
       "name": "Smiling Face with Smiling Eyes",
       "emoticons": [":)"],
-      "keywords": [
-        "blush",
-        "smile",
-        "happy",
-        "flushed",
-        "crush",
-        "embarrassed",
-        "shy",
-        "joy"
-      ],
+      "keywords": ["blush", "smile", "happy", "flushed", "crush", "embarrassed", "shy", "joy"],
       "skins": [{ "unified": "1f60a", "native": "😊" }],
       "version": 1
     },
@@ -2061,30 +2013,14 @@
     "smiling_face_with_3_hearts": {
       "id": "smiling_face_with_3_hearts",
       "name": "Smiling Face with Hearts",
-      "keywords": [
-        "3",
-        "love",
-        "like",
-        "affection",
-        "valentines",
-        "infatuation",
-        "crush",
-        "adore"
-      ],
+      "keywords": ["3", "love", "like", "affection", "valentines", "infatuation", "crush", "adore"],
       "skins": [{ "unified": "1f970", "native": "🥰" }],
       "version": 11
     },
     "heart_eyes": {
       "id": "heart_eyes",
       "name": "Smiling Face with Heart-Eyes",
-      "keywords": [
-        "love",
-        "like",
-        "affection",
-        "valentines",
-        "infatuation",
-        "crush"
-      ],
+      "keywords": ["love", "like", "affection", "valentines", "infatuation", "crush"],
       "skins": [{ "unified": "1f60d", "native": "😍" }],
       "version": 1
     },
@@ -2099,15 +2035,7 @@
       "id": "kissing_heart",
       "name": "Face Blowing a Kiss",
       "emoticons": [":*", ":-*"],
-      "keywords": [
-        "kissing",
-        "heart",
-        "love",
-        "like",
-        "affection",
-        "valentines",
-        "infatuation"
-      ],
+      "keywords": ["kissing", "heart", "love", "like", "affection", "valentines", "infatuation"],
       "skins": [{ "unified": "1f618", "native": "😘" }],
       "version": 1
     },
@@ -2168,15 +2096,7 @@
       "id": "stuck_out_tongue",
       "name": "Face with Tongue",
       "emoticons": [":p", ":-p", ":P", ":-P", ":b", ":-b"],
-      "keywords": [
-        "stuck",
-        "out",
-        "prank",
-        "childish",
-        "playful",
-        "mischievous",
-        "smile"
-      ],
+      "keywords": ["stuck", "out", "prank", "childish", "playful", "mischievous", "smile"],
       "skins": [{ "unified": "1f61b", "native": "😛" }],
       "version": 1
     },
@@ -2184,49 +2104,21 @@
       "id": "stuck_out_tongue_winking_eye",
       "name": "Winking Face with Tongue",
       "emoticons": [";p", ";-p", ";b", ";-b", ";P", ";-P"],
-      "keywords": [
-        "stuck",
-        "out",
-        "eye",
-        "prank",
-        "childish",
-        "playful",
-        "mischievous",
-        "smile"
-      ],
+      "keywords": ["stuck", "out", "eye", "prank", "childish", "playful", "mischievous", "smile"],
       "skins": [{ "unified": "1f61c", "native": "😜" }],
       "version": 1
     },
     "zany_face": {
       "id": "zany_face",
       "name": "Zany Face",
-      "keywords": [
-        "grinning",
-        "with",
-        "one",
-        "large",
-        "and",
-        "small",
-        "eye",
-        "goofy",
-        "crazy"
-      ],
+      "keywords": ["grinning", "with", "one", "large", "and", "small", "eye", "goofy", "crazy"],
       "skins": [{ "unified": "1f92a", "native": "🤪" }],
       "version": 5
     },
     "stuck_out_tongue_closed_eyes": {
       "id": "stuck_out_tongue_closed_eyes",
       "name": "Squinting Face with Tongue",
-      "keywords": [
-        "stuck",
-        "out",
-        "closed",
-        "eyes",
-        "prank",
-        "playful",
-        "mischievous",
-        "smile"
-      ],
+      "keywords": ["stuck", "out", "closed", "eyes", "prank", "playful", "mischievous", "smile"],
       "skins": [{ "unified": "1f61d", "native": "😝" }],
       "version": 1
     },
@@ -2247,14 +2139,7 @@
     "face_with_hand_over_mouth": {
       "id": "face_with_hand_over_mouth",
       "name": "Face with Hand over Mouth",
-      "keywords": [
-        "smiling",
-        "eyes",
-        "covering",
-        "whoops",
-        "shock",
-        "surprise"
-      ],
+      "keywords": ["smiling", "eyes", "covering", "whoops", "shock", "surprise"],
       "skins": [{ "unified": "1f92d", "native": "🤭" }],
       "version": 5
     },
@@ -2275,15 +2160,7 @@
     "shushing_face": {
       "id": "shushing_face",
       "name": "Shushing Face",
-      "keywords": [
-        "with",
-        "finger",
-        "covering",
-        "closed",
-        "lips",
-        "quiet",
-        "shhh"
-      ],
+      "keywords": ["with", "finger", "covering", "closed", "lips", "quiet", "shhh"],
       "skins": [{ "unified": "1f92b", "native": "🤫" }],
       "version": 5
     },
@@ -2311,14 +2188,7 @@
     "face_with_raised_eyebrow": {
       "id": "face_with_raised_eyebrow",
       "name": "Face with Raised Eyebrow",
-      "keywords": [
-        "one",
-        "distrust",
-        "scepticism",
-        "disapproval",
-        "disbelief",
-        "surprise"
-      ],
+      "keywords": ["one", "distrust", "scepticism", "disapproval", "disbelief", "surprise"],
       "skins": [{ "unified": "1f928", "native": "🤨" }],
       "version": 5
     },
@@ -2824,15 +2694,7 @@
     "skull_and_crossbones": {
       "id": "skull_and_crossbones",
       "name": "Skull and Crossbones",
-      "keywords": [
-        "poison",
-        "danger",
-        "deadly",
-        "scary",
-        "death",
-        "pirate",
-        "evil"
-      ],
+      "keywords": ["poison", "danger", "deadly", "scary", "death", "pirate", "evil"],
       "skins": [{ "unified": "2620-fe0f", "native": "☠️" }],
       "version": 1
     },
@@ -2870,15 +2732,7 @@
     "japanese_goblin": {
       "id": "japanese_goblin",
       "name": "Goblin",
-      "keywords": [
-        "japanese",
-        "red",
-        "evil",
-        "mask",
-        "monster",
-        "scary",
-        "creepy"
-      ],
+      "keywords": ["japanese", "red", "evil", "mask", "monster", "scary", "creepy"],
       "skins": [{ "unified": "1f47a", "native": "👺" }],
       "version": 1
     },
@@ -3032,28 +2886,14 @@
     "heartpulse": {
       "id": "heartpulse",
       "name": "Growing Heart",
-      "keywords": [
-        "heartpulse",
-        "like",
-        "love",
-        "affection",
-        "valentines",
-        "pink"
-      ],
+      "keywords": ["heartpulse", "like", "love", "affection", "valentines", "pink"],
       "skins": [{ "unified": "1f497", "native": "💗" }],
       "version": 1
     },
     "heartbeat": {
       "id": "heartbeat",
       "name": "Beating Heart",
-      "keywords": [
-        "heartbeat",
-        "love",
-        "like",
-        "affection",
-        "valentines",
-        "pink"
-      ],
+      "keywords": ["heartbeat", "love", "like", "affection", "valentines", "pink"],
       "skins": [{ "unified": "1f493", "native": "💓" }],
       "version": 1
     },
@@ -3206,17 +3046,7 @@
     "dash": {
       "id": "dash",
       "name": "Dash Symbol",
-      "keywords": [
-        "dashing",
-        "away",
-        "wind",
-        "air",
-        "fast",
-        "shoo",
-        "fart",
-        "smoke",
-        "puff"
-      ],
+      "keywords": ["dashing", "away", "wind", "air", "fast", "shoo", "fart", "smoke", "puff"],
       "skins": [{ "unified": "1f4a8", "native": "💨" }],
       "version": 1
     },
@@ -3331,15 +3161,7 @@
     "hand": {
       "id": "hand",
       "name": "Raised Hand",
-      "keywords": [
-        "fingers",
-        "stop",
-        "highfive",
-        "high",
-        "five",
-        "palm",
-        "ban"
-      ],
+      "keywords": ["fingers", "stop", "highfive", "high", "five", "palm", "ban"],
       "skins": [
         { "unified": "270b", "native": "✋" },
         { "unified": "270b-1f3fb", "native": "✋🏻" },
@@ -3591,15 +3413,7 @@
     "middle_finger": {
       "id": "middle_finger",
       "name": "Middle Finger",
-      "keywords": [
-        "reversed",
-        "hand",
-        "with",
-        "extended",
-        "fingers",
-        "rude",
-        "flipping"
-      ],
+      "keywords": ["reversed", "hand", "with", "extended", "fingers", "rude", "flipping"],
       "skins": [
         { "unified": "1f595", "native": "🖕" },
         { "unified": "1f595-1f3fb", "native": "🖕🏻" },
@@ -3708,15 +3522,7 @@
     "facepunch": {
       "id": "facepunch",
       "name": "Oncoming Fist",
-      "keywords": [
-        "facepunch",
-        "punch",
-        "angry",
-        "violence",
-        "hit",
-        "attack",
-        "hand"
-      ],
+      "keywords": ["facepunch", "punch", "angry", "violence", "hit", "attack", "hand"],
       "skins": [
         { "unified": "1f44a", "native": "👊" },
         { "unified": "1f44a-1f3fb", "native": "👊🏻" },
@@ -3842,16 +3648,7 @@
     "pray": {
       "id": "pray",
       "name": "Folded Hands",
-      "keywords": [
-        "pray",
-        "please",
-        "hope",
-        "wish",
-        "namaste",
-        "highfive",
-        "high",
-        "five"
-      ],
+      "keywords": ["pray", "please", "hope", "wish", "namaste", "highfive", "high", "five"],
       "skins": [
         { "unified": "1f64f", "native": "🙏" },
         { "unified": "1f64f-1f3fb", "native": "🙏🏻" },
@@ -3865,15 +3662,7 @@
     "writing_hand": {
       "id": "writing_hand",
       "name": "Writing Hand",
-      "keywords": [
-        "lower",
-        "left",
-        "ballpoint",
-        "pen",
-        "stationery",
-        "write",
-        "compose"
-      ],
+      "keywords": ["lower", "left", "ballpoint", "pen", "stationery", "write", "compose"],
       "skins": [
         { "unified": "270d-fe0f", "native": "✍️" },
         { "unified": "270d-1f3fb", "native": "✍🏻" },
@@ -4167,15 +3956,7 @@
     "man": {
       "id": "man",
       "name": "Man",
-      "keywords": [
-        "mustache",
-        "father",
-        "dad",
-        "guy",
-        "classy",
-        "sir",
-        "moustache"
-      ],
+      "keywords": ["mustache", "father", "dad", "guy", "classy", "sir", "moustache"],
       "skins": [
         { "unified": "1f468", "native": "👨" },
         { "unified": "1f468-1f3fb", "native": "👨🏻" },
@@ -4469,15 +4250,7 @@
     "older_woman": {
       "id": "older_woman",
       "name": "Old Woman",
-      "keywords": [
-        "older",
-        "human",
-        "female",
-        "women",
-        "lady",
-        "elder",
-        "senior"
-      ],
+      "keywords": ["older", "human", "female", "women", "lady", "elder", "senior"],
       "skins": [
         { "unified": "1f475", "native": "👵" },
         { "unified": "1f475-1f3fb", "native": "👵🏻" },
@@ -4519,14 +4292,7 @@
     "woman-frowning": {
       "id": "woman-frowning",
       "name": "Woman Frowning",
-      "keywords": [
-        "female",
-        "girl",
-        "sad",
-        "depressed",
-        "discouraged",
-        "unhappy"
-      ],
+      "keywords": ["female", "girl", "sad", "depressed", "discouraged", "unhappy"],
       "skins": [
         { "unified": "1f64d-200d-2640-fe0f", "native": "🙍‍♀️" },
         { "unified": "1f64d-1f3fb-200d-2640-fe0f", "native": "🙍🏻‍♀️" },
@@ -4932,14 +4698,7 @@
     "male-doctor": {
       "id": "male-doctor",
       "name": "Man Health Worker",
-      "keywords": [
-        "male",
-        "doctor",
-        "nurse",
-        "therapist",
-        "healthcare",
-        "human"
-      ],
+      "keywords": ["male", "doctor", "nurse", "therapist", "healthcare", "human"],
       "skins": [
         { "unified": "1f468-200d-2695-fe0f", "native": "👨‍⚕️" },
         { "unified": "1f468-1f3fb-200d-2695-fe0f", "native": "👨🏻‍⚕️" },
@@ -4953,14 +4712,7 @@
     "female-doctor": {
       "id": "female-doctor",
       "name": "Woman Health Worker",
-      "keywords": [
-        "female",
-        "doctor",
-        "nurse",
-        "therapist",
-        "healthcare",
-        "human"
-      ],
+      "keywords": ["female", "doctor", "nurse", "therapist", "healthcare", "human"],
       "skins": [
         { "unified": "1f469-200d-2695-fe0f", "native": "👩‍⚕️" },
         { "unified": "1f469-1f3fb-200d-2695-fe0f", "native": "👩🏻‍⚕️" },
@@ -5254,13 +5006,7 @@
     "female-factory-worker": {
       "id": "female-factory-worker",
       "name": "Woman Factory Worker",
-      "keywords": [
-        "female",
-        "factory-worker",
-        "assembly",
-        "industrial",
-        "human"
-      ],
+      "keywords": ["female", "factory-worker", "assembly", "industrial", "human"],
       "skins": [
         { "unified": "1f469-200d-1f3ed", "native": "👩‍🏭" },
         { "unified": "1f469-1f3fb-200d-1f3ed", "native": "👩🏻‍🏭" },
@@ -5330,14 +5076,7 @@
     "male-scientist": {
       "id": "male-scientist",
       "name": "Man Scientist",
-      "keywords": [
-        "male",
-        "biologist",
-        "chemist",
-        "engineer",
-        "physicist",
-        "human"
-      ],
+      "keywords": ["male", "biologist", "chemist", "engineer", "physicist", "human"],
       "skins": [
         { "unified": "1f468-200d-1f52c", "native": "👨‍🔬" },
         { "unified": "1f468-1f3fb-200d-1f52c", "native": "👨🏻‍🔬" },
@@ -5351,14 +5090,7 @@
     "female-scientist": {
       "id": "female-scientist",
       "name": "Woman Scientist",
-      "keywords": [
-        "female",
-        "biologist",
-        "chemist",
-        "engineer",
-        "physicist",
-        "human"
-      ],
+      "keywords": ["female", "biologist", "chemist", "engineer", "physicist", "human"],
       "skins": [
         { "unified": "1f469-200d-1f52c", "native": "👩‍🔬" },
         { "unified": "1f469-1f3fb-200d-1f52c", "native": "👩🏻‍🔬" },
@@ -5658,15 +5390,7 @@
     "male-police-officer": {
       "id": "male-police-officer",
       "name": "Man Police Officer",
-      "keywords": [
-        "male",
-        "police-officer",
-        "law",
-        "legal",
-        "enforcement",
-        "arrest",
-        "911"
-      ],
+      "keywords": ["male", "police-officer", "law", "legal", "enforcement", "arrest", "911"],
       "skins": [
         { "unified": "1f46e-200d-2642-fe0f", "native": "👮‍♂️" },
         { "unified": "1f46e-1f3fb-200d-2642-fe0f", "native": "👮🏻‍♂️" },
@@ -5680,15 +5404,7 @@
     "female-police-officer": {
       "id": "female-police-officer",
       "name": "Woman Police Officer",
-      "keywords": [
-        "female",
-        "police-officer",
-        "law",
-        "legal",
-        "enforcement",
-        "arrest",
-        "911"
-      ],
+      "keywords": ["female", "police-officer", "law", "legal", "enforcement", "arrest", "911"],
       "skins": [
         { "unified": "1f46e-200d-2640-fe0f", "native": "👮‍♀️" },
         { "unified": "1f46e-1f3fb-200d-2640-fe0f", "native": "👮🏻‍♀️" },
@@ -5814,15 +5530,7 @@
     "male-construction-worker": {
       "id": "male-construction-worker",
       "name": "Man Construction Worker",
-      "keywords": [
-        "male",
-        "construction-worker",
-        "human",
-        "wip",
-        "guy",
-        "build",
-        "labor"
-      ],
+      "keywords": ["male", "construction-worker", "human", "wip", "guy", "build", "labor"],
       "skins": [
         { "unified": "1f477-200d-2642-fe0f", "native": "👷‍♂️" },
         { "unified": "1f477-1f3fb-200d-2642-fe0f", "native": "👷🏻‍♂️" },
@@ -5836,14 +5544,7 @@
     "female-construction-worker": {
       "id": "female-construction-worker",
       "name": "Woman Construction Worker",
-      "keywords": [
-        "female",
-        "construction-worker",
-        "human",
-        "wip",
-        "build",
-        "labor"
-      ],
+      "keywords": ["female", "construction-worker", "human", "wip", "build", "labor"],
       "skins": [
         { "unified": "1f477-200d-2640-fe0f", "native": "👷‍♀️" },
         { "unified": "1f477-1f3fb-200d-2640-fe0f", "native": "👷🏻‍♀️" },
@@ -5885,15 +5586,7 @@
     "princess": {
       "id": "princess",
       "name": "Princess",
-      "keywords": [
-        "girl",
-        "woman",
-        "female",
-        "blond",
-        "crown",
-        "royal",
-        "queen"
-      ],
+      "keywords": ["girl", "woman", "female", "blond", "crown", "royal", "queen"],
       "skins": [
         { "unified": "1f478", "native": "👸" },
         { "unified": "1f478-1f3fb", "native": "👸🏻" },
@@ -6285,14 +5978,7 @@
     "female_supervillain": {
       "id": "female_supervillain",
       "name": "Woman Supervillain",
-      "keywords": [
-        "female",
-        "evil",
-        "bad",
-        "criminal",
-        "heroine",
-        "superpowers"
-      ],
+      "keywords": ["female", "evil", "bad", "criminal", "heroine", "superpowers"],
       "skins": [
         { "unified": "1f9b9-200d-2640-fe0f", "native": "🦹‍♀️" },
         { "unified": "1f9b9-1f3fb-200d-2640-fe0f", "native": "🦹🏻‍♀️" },
@@ -7286,15 +6972,7 @@
     "woman-swimming": {
       "id": "woman-swimming",
       "name": "Woman Swimming",
-      "keywords": [
-        "sports",
-        "exercise",
-        "human",
-        "athlete",
-        "water",
-        "summer",
-        "female"
-      ],
+      "keywords": ["sports", "exercise", "human", "athlete", "water", "summer", "female"],
       "skins": [
         { "unified": "1f3ca-200d-2640-fe0f", "native": "🏊‍♀️" },
         { "unified": "1f3ca-1f3fb-200d-2640-fe0f", "native": "🏊🏻‍♀️" },
@@ -7378,13 +7056,7 @@
     "woman-lifting-weights": {
       "id": "woman-lifting-weights",
       "name": "Woman Lifting Weights",
-      "keywords": [
-        "lifting-weights",
-        "sports",
-        "training",
-        "exercise",
-        "female"
-      ],
+      "keywords": ["lifting-weights", "sports", "training", "exercise", "female"],
       "skins": [
         { "unified": "1f3cb-fe0f-200d-2640-fe0f", "native": "🏋️‍♀️" },
         { "unified": "1f3cb-1f3fb-200d-2640-fe0f", "native": "🏋🏻‍♀️" },
@@ -7454,14 +7126,7 @@
     "man-mountain-biking": {
       "id": "man-mountain-biking",
       "name": "Man Mountain Biking",
-      "keywords": [
-        "mountain-biking",
-        "transportation",
-        "sports",
-        "human",
-        "race",
-        "bike"
-      ],
+      "keywords": ["mountain-biking", "transportation", "sports", "human", "race", "bike"],
       "skins": [
         { "unified": "1f6b5-200d-2642-fe0f", "native": "🚵‍♂️" },
         { "unified": "1f6b5-1f3fb-200d-2642-fe0f", "native": "🚵🏻‍♂️" },
@@ -7700,14 +7365,7 @@
     "man_in_lotus_position": {
       "id": "man_in_lotus_position",
       "name": "Man in Lotus Position",
-      "keywords": [
-        "male",
-        "meditation",
-        "yoga",
-        "serenity",
-        "zen",
-        "mindfulness"
-      ],
+      "keywords": ["male", "meditation", "yoga", "serenity", "zen", "mindfulness"],
       "skins": [
         { "unified": "1f9d8-200d-2642-fe0f", "native": "🧘‍♂️" },
         { "unified": "1f9d8-1f3fb-200d-2642-fe0f", "native": "🧘🏻‍♂️" },
@@ -7721,14 +7379,7 @@
     "woman_in_lotus_position": {
       "id": "woman_in_lotus_position",
       "name": "Woman in Lotus Position",
-      "keywords": [
-        "female",
-        "meditation",
-        "yoga",
-        "serenity",
-        "zen",
-        "mindfulness"
-      ],
+      "keywords": ["female", "meditation", "yoga", "serenity", "zen", "mindfulness"],
       "skins": [
         { "unified": "1f9d8-200d-2640-fe0f", "native": "🧘‍♀️" },
         { "unified": "1f9d8-1f3fb-200d-2640-fe0f", "native": "🧘🏻‍♀️" },
@@ -7870,15 +7521,7 @@
     "couplekiss": {
       "id": "couplekiss",
       "name": "Kiss",
-      "keywords": [
-        "couplekiss",
-        "pair",
-        "valentines",
-        "love",
-        "like",
-        "dating",
-        "marriage"
-      ],
+      "keywords": ["couplekiss", "pair", "valentines", "love", "like", "dating", "marriage"],
       "skins": [
         { "unified": "1f48f", "native": "💏" },
         { "unified": "1f48f-1f3fb", "native": "💏🏻" },
@@ -7924,15 +7567,7 @@
     "man-kiss-man": {
       "id": "man-kiss-man",
       "name": "Kiss: Man, Man",
-      "keywords": [
-        "kiss-man",
-        "pair",
-        "valentines",
-        "love",
-        "like",
-        "dating",
-        "marriage"
-      ],
+      "keywords": ["kiss-man", "pair", "valentines", "love", "like", "dating", "marriage"],
       "skins": [
         {
           "unified": "1f468-200d-2764-fe0f-200d-1f48b-200d-1f468",
@@ -7964,15 +7599,7 @@
     "woman-kiss-woman": {
       "id": "woman-kiss-woman",
       "name": "Kiss: Woman, Woman",
-      "keywords": [
-        "kiss-woman",
-        "pair",
-        "valentines",
-        "love",
-        "like",
-        "dating",
-        "marriage"
-      ],
+      "keywords": ["kiss-woman", "pair", "valentines", "love", "like", "dating", "marriage"],
       "skins": [
         {
           "unified": "1f469-200d-2764-fe0f-200d-1f48b-200d-1f469",
@@ -8134,17 +7761,7 @@
     "family": {
       "id": "family",
       "name": "Family",
-      "keywords": [
-        "home",
-        "parents",
-        "child",
-        "mom",
-        "dad",
-        "father",
-        "mother",
-        "people",
-        "human"
-      ],
+      "keywords": ["home", "parents", "child", "mom", "dad", "father", "mother", "people", "human"],
       "skins": [{ "unified": "1f46a", "native": "👪" }],
       "version": 1
     },
@@ -8165,49 +7782,22 @@
     "man-woman-girl-boy": {
       "id": "man-woman-girl-boy",
       "name": "Family: Man, Woman, Girl, Boy",
-      "keywords": [
-        "woman-girl-boy",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f468-200d-1f469-200d-1f467-200d-1f466", "native": "👨‍👩‍👧‍👦" }
-      ],
+      "keywords": ["woman-girl-boy", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f468-200d-1f469-200d-1f467-200d-1f466", "native": "👨‍👩‍👧‍👦" }],
       "version": 2
     },
     "man-woman-boy-boy": {
       "id": "man-woman-boy-boy",
       "name": "Family: Man, Woman, Boy, Boy",
-      "keywords": [
-        "woman-boy-boy",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f468-200d-1f469-200d-1f466-200d-1f466", "native": "👨‍👩‍👦‍👦" }
-      ],
+      "keywords": ["woman-boy-boy", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f468-200d-1f469-200d-1f466-200d-1f466", "native": "👨‍👩‍👦‍👦" }],
       "version": 2
     },
     "man-woman-girl-girl": {
       "id": "man-woman-girl-girl",
       "name": "Family: Man, Woman, Girl, Girl",
-      "keywords": [
-        "woman-girl-girl",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f468-200d-1f469-200d-1f467-200d-1f467", "native": "👨‍👩‍👧‍👧" }
-      ],
+      "keywords": ["woman-girl-girl", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f468-200d-1f469-200d-1f467-200d-1f467", "native": "👨‍👩‍👧‍👧" }],
       "version": 2
     },
     "man-man-boy": {
@@ -8220,139 +7810,64 @@
     "man-man-girl": {
       "id": "man-man-girl",
       "name": "Family: Man, Man, Girl",
-      "keywords": [
-        "man-girl",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
+      "keywords": ["man-girl", "home", "parents", "people", "human", "children"],
       "skins": [{ "unified": "1f468-200d-1f468-200d-1f467", "native": "👨‍👨‍👧" }],
       "version": 2
     },
     "man-man-girl-boy": {
       "id": "man-man-girl-boy",
       "name": "Family: Man, Man, Girl, Boy",
-      "keywords": [
-        "man-girl-boy",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f468-200d-1f468-200d-1f467-200d-1f466", "native": "👨‍👨‍👧‍👦" }
-      ],
+      "keywords": ["man-girl-boy", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f468-200d-1f468-200d-1f467-200d-1f466", "native": "👨‍👨‍👧‍👦" }],
       "version": 2
     },
     "man-man-boy-boy": {
       "id": "man-man-boy-boy",
       "name": "Family: Man, Man, Boy, Boy",
-      "keywords": [
-        "man-boy-boy",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f468-200d-1f468-200d-1f466-200d-1f466", "native": "👨‍👨‍👦‍👦" }
-      ],
+      "keywords": ["man-boy-boy", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f468-200d-1f468-200d-1f466-200d-1f466", "native": "👨‍👨‍👦‍👦" }],
       "version": 2
     },
     "man-man-girl-girl": {
       "id": "man-man-girl-girl",
       "name": "Family: Man, Man, Girl, Girl",
-      "keywords": [
-        "man-girl-girl",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f468-200d-1f468-200d-1f467-200d-1f467", "native": "👨‍👨‍👧‍👧" }
-      ],
+      "keywords": ["man-girl-girl", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f468-200d-1f468-200d-1f467-200d-1f467", "native": "👨‍👨‍👧‍👧" }],
       "version": 2
     },
     "woman-woman-boy": {
       "id": "woman-woman-boy",
       "name": "Family: Woman, Woman, Boy",
-      "keywords": [
-        "woman-boy",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
+      "keywords": ["woman-boy", "home", "parents", "people", "human", "children"],
       "skins": [{ "unified": "1f469-200d-1f469-200d-1f466", "native": "👩‍👩‍👦" }],
       "version": 2
     },
     "woman-woman-girl": {
       "id": "woman-woman-girl",
       "name": "Family: Woman, Woman, Girl",
-      "keywords": [
-        "woman-girl",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
+      "keywords": ["woman-girl", "home", "parents", "people", "human", "children"],
       "skins": [{ "unified": "1f469-200d-1f469-200d-1f467", "native": "👩‍👩‍👧" }],
       "version": 2
     },
     "woman-woman-girl-boy": {
       "id": "woman-woman-girl-boy",
       "name": "Family: Woman, Woman, Girl, Boy",
-      "keywords": [
-        "woman-girl-boy",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f469-200d-1f469-200d-1f467-200d-1f466", "native": "👩‍👩‍👧‍👦" }
-      ],
+      "keywords": ["woman-girl-boy", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f469-200d-1f469-200d-1f467-200d-1f466", "native": "👩‍👩‍👧‍👦" }],
       "version": 2
     },
     "woman-woman-boy-boy": {
       "id": "woman-woman-boy-boy",
       "name": "Family: Woman, Woman, Boy, Boy",
-      "keywords": [
-        "woman-boy-boy",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f469-200d-1f469-200d-1f466-200d-1f466", "native": "👩‍👩‍👦‍👦" }
-      ],
+      "keywords": ["woman-boy-boy", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f469-200d-1f469-200d-1f466-200d-1f466", "native": "👩‍👩‍👦‍👦" }],
       "version": 2
     },
     "woman-woman-girl-girl": {
       "id": "woman-woman-girl-girl",
       "name": "Family: Woman, Woman, Girl, Girl",
-      "keywords": [
-        "woman-girl-girl",
-        "home",
-        "parents",
-        "people",
-        "human",
-        "children"
-      ],
-      "skins": [
-        { "unified": "1f469-200d-1f469-200d-1f467-200d-1f467", "native": "👩‍👩‍👧‍👧" }
-      ],
+      "keywords": ["woman-girl-girl", "home", "parents", "people", "human", "children"],
+      "skins": [{ "unified": "1f469-200d-1f469-200d-1f467-200d-1f467", "native": "👩‍👩‍👧‍👧" }],
       "version": 2
     },
     "man-boy": {
@@ -8386,14 +7901,7 @@
     "man-girl-girl": {
       "id": "man-girl-girl",
       "name": "Family: Man, Girl, Girl",
-      "keywords": [
-        "girl-girl",
-        "home",
-        "parent",
-        "people",
-        "human",
-        "children"
-      ],
+      "keywords": ["girl-girl", "home", "parent", "people", "human", "children"],
       "skins": [{ "unified": "1f468-200d-1f467-200d-1f467", "native": "👨‍👧‍👧" }],
       "version": 4
     },
@@ -8428,29 +7936,14 @@
     "woman-girl-girl": {
       "id": "woman-girl-girl",
       "name": "Family: Woman, Girl, Girl",
-      "keywords": [
-        "girl-girl",
-        "home",
-        "parent",
-        "people",
-        "human",
-        "children"
-      ],
+      "keywords": ["girl-girl", "home", "parent", "people", "human", "children"],
       "skins": [{ "unified": "1f469-200d-1f467-200d-1f467", "native": "👩‍👧‍👧" }],
       "version": 4
     },
     "speaking_head_in_silhouette": {
       "id": "speaking_head_in_silhouette",
       "name": "Speaking Head",
-      "keywords": [
-        "silhouette",
-        "user",
-        "person",
-        "human",
-        "sing",
-        "say",
-        "talk"
-      ],
+      "keywords": ["silhouette", "user", "person", "human", "sing", "say", "talk"],
       "skins": [{ "unified": "1f5e3-fe0f", "native": "🗣️" }],
       "version": 1
     },
@@ -8514,30 +8007,14 @@
     "dog": {
       "id": "dog",
       "name": "Dog Face",
-      "keywords": [
-        "animal",
-        "friend",
-        "nature",
-        "woof",
-        "puppy",
-        "pet",
-        "faithful"
-      ],
+      "keywords": ["animal", "friend", "nature", "woof", "puppy", "pet", "faithful"],
       "skins": [{ "unified": "1f436", "native": "🐶" }],
       "version": 1
     },
     "dog2": {
       "id": "dog2",
       "name": "Dog",
-      "keywords": [
-        "dog2",
-        "animal",
-        "nature",
-        "friend",
-        "doge",
-        "pet",
-        "faithful"
-      ],
+      "keywords": ["dog2", "animal", "nature", "friend", "doge", "pet", "faithful"],
       "skins": [{ "unified": "1f415", "native": "🐕" }],
       "version": 1
     },
@@ -8943,15 +8420,7 @@
     "feet": {
       "id": "feet",
       "name": "Paw Prints",
-      "keywords": [
-        "feet",
-        "animal",
-        "tracking",
-        "footprints",
-        "dog",
-        "cat",
-        "pet"
-      ],
+      "keywords": ["feet", "animal", "tracking", "footprints", "dog", "cat", "pet"],
       "skins": [{ "unified": "1f43e", "native": "🐾" }],
       "version": 1
     },
@@ -9169,16 +8638,7 @@
     "dolphin": {
       "id": "dolphin",
       "name": "Dolphin",
-      "keywords": [
-        "flipper",
-        "animal",
-        "nature",
-        "fish",
-        "sea",
-        "ocean",
-        "fins",
-        "beach"
-      ],
+      "keywords": ["flipper", "animal", "nature", "fish", "sea", "ocean", "fins", "beach"],
       "skins": [{ "unified": "1f42c", "native": "🐬" }],
       "version": 1
     },
@@ -9213,16 +8673,7 @@
     "shark": {
       "id": "shark",
       "name": "Shark",
-      "keywords": [
-        "animal",
-        "nature",
-        "fish",
-        "sea",
-        "ocean",
-        "jaws",
-        "fins",
-        "beach"
-      ],
+      "keywords": ["animal", "nature", "fish", "sea", "ocean", "jaws", "fins", "beach"],
       "skins": [{ "unified": "1f988", "native": "🦈" }],
       "version": 3
     },
@@ -9467,15 +8918,7 @@
     "palm_tree": {
       "id": "palm_tree",
       "name": "Palm Tree",
-      "keywords": [
-        "plant",
-        "vegetable",
-        "nature",
-        "summer",
-        "beach",
-        "mojito",
-        "tropical"
-      ],
+      "keywords": ["plant", "vegetable", "nature", "summer", "beach", "mojito", "tropical"],
       "skins": [{ "unified": "1f334", "native": "🌴" }],
       "version": 1
     },
@@ -9531,16 +8974,7 @@
     "leaves": {
       "id": "leaves",
       "name": "Leaf Fluttering in Wind",
-      "keywords": [
-        "leaves",
-        "nature",
-        "plant",
-        "tree",
-        "vegetable",
-        "grass",
-        "lawn",
-        "spring"
-      ],
+      "keywords": ["leaves", "nature", "plant", "tree", "vegetable", "grass", "lawn", "spring"],
       "skins": [{ "unified": "1f343", "native": "🍃" }],
       "version": 1
     },
@@ -9750,16 +9184,7 @@
     "leafy_green": {
       "id": "leafy_green",
       "name": "Leafy Green",
-      "keywords": [
-        "food",
-        "vegetable",
-        "plant",
-        "bok",
-        "choy",
-        "cabbage",
-        "kale",
-        "lettuce"
-      ],
+      "keywords": ["food", "vegetable", "plant", "bok", "choy", "cabbage", "kale", "lettuce"],
       "skins": [{ "unified": "1f96c", "native": "🥬" }],
       "version": 11
     },
@@ -9906,15 +9331,7 @@
     "hamburger": {
       "id": "hamburger",
       "name": "Hamburger",
-      "keywords": [
-        "meat",
-        "fast",
-        "food",
-        "beef",
-        "cheeseburger",
-        "mcdonalds",
-        "king"
-      ],
+      "keywords": ["meat", "fast", "food", "beef", "cheeseburger", "mcdonalds", "king"],
       "skins": [{ "unified": "1f354", "native": "🍔" }],
       "version": 1
     },
@@ -10358,15 +9775,7 @@
     "sake": {
       "id": "sake",
       "name": "Sake",
-      "keywords": [
-        "wine",
-        "drink",
-        "drunk",
-        "beverage",
-        "japanese",
-        "alcohol",
-        "booze"
-      ],
+      "keywords": ["wine", "drink", "drunk", "beverage", "japanese", "alcohol", "booze"],
       "skins": [{ "unified": "1f376", "native": "🍶" }],
       "version": 1
     },
@@ -10394,15 +9803,7 @@
     "tropical_drink": {
       "id": "tropical_drink",
       "name": "Tropical Drink",
-      "keywords": [
-        "beverage",
-        "cocktail",
-        "summer",
-        "beach",
-        "alcohol",
-        "booze",
-        "mojito"
-      ],
+      "keywords": ["beverage", "cocktail", "summer", "beach", "alcohol", "booze", "mojito"],
       "skins": [{ "unified": "1f379", "native": "🍹" }],
       "version": 1
     },
@@ -10591,14 +9992,7 @@
     "globe_with_meridians": {
       "id": "globe_with_meridians",
       "name": "Globe with Meridians",
-      "keywords": [
-        "earth",
-        "international",
-        "world",
-        "internet",
-        "interweb",
-        "i18n"
-      ],
+      "keywords": ["earth", "international", "world", "internet", "interweb", "i18n"],
       "skins": [{ "unified": "1f310", "native": "🌐" }],
       "version": 1
     },
@@ -10794,14 +10188,7 @@
     "bank": {
       "id": "bank",
       "name": "Bank",
-      "keywords": [
-        "building",
-        "money",
-        "sales",
-        "cash",
-        "business",
-        "enterprise"
-      ],
+      "keywords": ["building", "money", "sales", "cash", "business", "enterprise"],
       "skins": [{ "unified": "1f3e6", "native": "🏦" }],
       "version": 1
     },
@@ -10864,15 +10251,7 @@
     "wedding": {
       "id": "wedding",
       "name": "Wedding",
-      "keywords": [
-        "love",
-        "like",
-        "affection",
-        "couple",
-        "marriage",
-        "bride",
-        "groom"
-      ],
+      "keywords": ["love", "like", "affection", "couple", "marriage", "bride", "groom"],
       "skins": [{ "unified": "1f492", "native": "💒" }],
       "version": 1
     },
@@ -11098,14 +10477,7 @@
     "metro": {
       "id": "metro",
       "name": "Metro",
-      "keywords": [
-        "transportation",
-        "blue",
-        "square",
-        "mrt",
-        "underground",
-        "tube"
-      ],
+      "keywords": ["transportation", "blue", "square", "mrt", "underground", "tube"],
       "skins": [{ "unified": "1f687", "native": "🚇" }],
       "version": 1
     },
@@ -11147,14 +10519,7 @@
     "train": {
       "id": "train",
       "name": "Tram Car",
-      "keywords": [
-        "train",
-        "transportation",
-        "vehicle",
-        "carriage",
-        "public",
-        "travel"
-      ],
+      "keywords": ["train", "transportation", "vehicle", "carriage", "public", "travel"],
       "skins": [{ "unified": "1f68b", "native": "🚋" }],
       "version": 1
     },
@@ -11203,14 +10568,7 @@
     "police_car": {
       "id": "police_car",
       "name": "Police Car",
-      "keywords": [
-        "vehicle",
-        "cars",
-        "transportation",
-        "law",
-        "legal",
-        "enforcement"
-      ],
+      "keywords": ["vehicle", "cars", "transportation", "law", "legal", "enforcement"],
       "skins": [{ "unified": "1f693", "native": "🚓" }],
       "version": 1
     },
@@ -11577,29 +10935,14 @@
     "satellite": {
       "id": "satellite",
       "name": "Satellite",
-      "keywords": [
-        "communication",
-        "gps",
-        "orbit",
-        "spaceflight",
-        "NASA",
-        "ISS"
-      ],
+      "keywords": ["communication", "gps", "orbit", "spaceflight", "NASA", "ISS"],
       "skins": [{ "unified": "1f6f0-fe0f", "native": "🛰️" }],
       "version": 1
     },
     "rocket": {
       "id": "rocket",
       "name": "Rocket",
-      "keywords": [
-        "launch",
-        "ship",
-        "staffmode",
-        "NASA",
-        "outer",
-        "space",
-        "fly"
-      ],
+      "keywords": ["launch", "ship", "staffmode", "NASA", "outer", "space", "fly"],
       "skins": [{ "unified": "1f680", "native": "🚀" }],
       "version": 1
     },
@@ -11627,16 +10970,7 @@
     "hourglass": {
       "id": "hourglass",
       "name": "Hourglass",
-      "keywords": [
-        "done",
-        "time",
-        "clock",
-        "oldschool",
-        "limit",
-        "exam",
-        "quiz",
-        "test"
-      ],
+      "keywords": ["done", "time", "clock", "oldschool", "limit", "exam", "quiz", "test"],
       "skins": [{ "unified": "231b", "native": "⌛" }],
       "version": 1
     },
@@ -11685,16 +11019,7 @@
     "clock12": {
       "id": "clock12",
       "name": "Twelve O’clock",
-      "keywords": [
-        "clock12",
-        "time",
-        "noon",
-        "midnight",
-        "midday",
-        "late",
-        "early",
-        "schedule"
-      ],
+      "keywords": ["clock12", "time", "noon", "midnight", "midday", "late", "early", "schedule"],
       "skins": [{ "unified": "1f55b", "native": "🕛" }],
       "version": 1
     },
@@ -11778,15 +11103,7 @@
     "clock6": {
       "id": "clock6",
       "name": "Six O’clock",
-      "keywords": [
-        "clock6",
-        "time",
-        "late",
-        "early",
-        "schedule",
-        "dawn",
-        "dusk"
-      ],
+      "keywords": ["clock6", "time", "late", "early", "schedule", "dawn", "dusk"],
       "skins": [{ "unified": "1f555", "native": "🕕" }],
       "version": 1
     },
@@ -11870,45 +11187,21 @@
     "new_moon": {
       "id": "new_moon",
       "name": "New Moon",
-      "keywords": [
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f311", "native": "🌑" }],
       "version": 1
     },
     "waxing_crescent_moon": {
       "id": "waxing_crescent_moon",
       "name": "Waxing Crescent Moon",
-      "keywords": [
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f312", "native": "🌒" }],
       "version": 1
     },
     "first_quarter_moon": {
       "id": "first_quarter_moon",
       "name": "First Quarter Moon",
-      "keywords": [
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f313", "native": "🌓" }],
       "version": 1
     },
@@ -11932,62 +11225,28 @@
     "full_moon": {
       "id": "full_moon",
       "name": "Full Moon",
-      "keywords": [
-        "nature",
-        "yellow",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["nature", "yellow", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f315", "native": "🌕" }],
       "version": 1
     },
     "waning_gibbous_moon": {
       "id": "waning_gibbous_moon",
       "name": "Waning Gibbous Moon",
-      "keywords": [
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep",
-        "waxing"
-      ],
+      "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep", "waxing"],
       "skins": [{ "unified": "1f316", "native": "🌖" }],
       "version": 1
     },
     "last_quarter_moon": {
       "id": "last_quarter_moon",
       "name": "Last Quarter Moon",
-      "keywords": [
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f317", "native": "🌗" }],
       "version": 1
     },
     "waning_crescent_moon": {
       "id": "waning_crescent_moon",
       "name": "Waning Crescent Moon",
-      "keywords": [
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f318", "native": "🌘" }],
       "version": 1
     },
@@ -12001,48 +11260,21 @@
     "new_moon_with_face": {
       "id": "new_moon_with_face",
       "name": "New Moon Face",
-      "keywords": [
-        "with",
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["with", "nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f31a", "native": "🌚" }],
       "version": 1
     },
     "first_quarter_moon_with_face": {
       "id": "first_quarter_moon_with_face",
       "name": "First Quarter Moon Face",
-      "keywords": [
-        "with",
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["with", "nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f31b", "native": "🌛" }],
       "version": 1
     },
     "last_quarter_moon_with_face": {
       "id": "last_quarter_moon_with_face",
       "name": "Last Quarter Moon Face",
-      "keywords": [
-        "with",
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["with", "nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f31c", "native": "🌜" }],
       "version": 1
     },
@@ -12056,31 +11288,14 @@
     "sunny": {
       "id": "sunny",
       "name": "Sun",
-      "keywords": [
-        "sunny",
-        "weather",
-        "nature",
-        "brightness",
-        "summer",
-        "beach",
-        "spring"
-      ],
+      "keywords": ["sunny", "weather", "nature", "brightness", "summer", "beach", "spring"],
       "skins": [{ "unified": "2600-fe0f", "native": "☀️" }],
       "version": 1
     },
     "full_moon_with_face": {
       "id": "full_moon_with_face",
       "name": "Full Moon Face",
-      "keywords": [
-        "with",
-        "nature",
-        "twilight",
-        "planet",
-        "space",
-        "night",
-        "evening",
-        "sleep"
-      ],
+      "keywords": ["with", "nature", "twilight", "planet", "space", "night", "evening", "sleep"],
       "skins": [{ "unified": "1f31d", "native": "🌝" }],
       "version": 1
     },
@@ -12136,16 +11351,7 @@
     "partly_sunny": {
       "id": "partly_sunny",
       "name": "Sun Behind Cloud",
-      "keywords": [
-        "partly",
-        "sunny",
-        "weather",
-        "nature",
-        "cloudy",
-        "morning",
-        "fall",
-        "spring"
-      ],
+      "keywords": ["partly", "sunny", "weather", "nature", "cloudy", "morning", "fall", "spring"],
       "skins": [{ "unified": "26c5", "native": "⛅" }],
       "version": 1
     },
@@ -12241,15 +11447,7 @@
     "rainbow": {
       "id": "rainbow",
       "name": "Rainbow",
-      "keywords": [
-        "nature",
-        "happy",
-        "unicorn",
-        "face",
-        "photo",
-        "sky",
-        "spring"
-      ],
+      "keywords": ["nature", "happy", "unicorn", "face", "photo", "sky", "spring"],
       "skins": [{ "unified": "1f308", "native": "🌈" }],
       "version": 1
     },
@@ -12298,30 +11496,14 @@
     "snowman": {
       "id": "snowman",
       "name": "Snowman",
-      "keywords": [
-        "winter",
-        "season",
-        "cold",
-        "weather",
-        "christmas",
-        "xmas",
-        "frozen"
-      ],
+      "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas", "frozen"],
       "skins": [{ "unified": "2603-fe0f", "native": "☃️" }],
       "version": 1
     },
     "snowman_without_snow": {
       "id": "snowman_without_snow",
       "name": "Snowman Without Snow",
-      "keywords": [
-        "winter",
-        "season",
-        "cold",
-        "weather",
-        "christmas",
-        "xmas",
-        "frozen"
-      ],
+      "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas", "frozen"],
       "skins": [{ "unified": "26c4", "native": "⛄" }],
       "version": 1
     },
@@ -12391,15 +11573,7 @@
     "sparkles": {
       "id": "sparkles",
       "name": "Sparkles",
-      "keywords": [
-        "stars",
-        "shine",
-        "shiny",
-        "cool",
-        "awesome",
-        "good",
-        "magic"
-      ],
+      "keywords": ["stars", "shine", "shiny", "cool", "awesome", "good", "magic"],
       "skins": [{ "unified": "2728", "native": "✨" }],
       "version": 1
     },
@@ -12413,14 +11587,7 @@
     "tada": {
       "id": "tada",
       "name": "Party Popper",
-      "keywords": [
-        "tada",
-        "congratulations",
-        "birthday",
-        "magic",
-        "circus",
-        "celebration"
-      ],
+      "keywords": ["tada", "congratulations", "birthday", "magic", "circus", "celebration"],
       "skins": [{ "unified": "1f389", "native": "🎉" }],
       "version": 1
     },
@@ -12658,15 +11825,7 @@
     "table_tennis_paddle_and_ball": {
       "id": "table_tennis_paddle_and_ball",
       "name": "Ping Pong",
-      "keywords": [
-        "table",
-        "tennis",
-        "paddle",
-        "and",
-        "ball",
-        "sports",
-        "pingpong"
-      ],
+      "keywords": ["table", "tennis", "paddle", "and", "ball", "sports", "pingpong"],
       "skins": [{ "unified": "1f3d3", "native": "🏓" }],
       "version": 1
     },
@@ -12778,16 +11937,7 @@
     "8ball": {
       "id": "8ball",
       "name": "Billiards",
-      "keywords": [
-        "8ball",
-        "pool",
-        "8",
-        "ball",
-        "hobby",
-        "game",
-        "luck",
-        "magic"
-      ],
+      "keywords": ["8ball", "pool", "8", "ball", "hobby", "game", "luck", "magic"],
       "skins": [{ "unified": "1f3b1", "native": "🎱" }],
       "version": 1
     },
@@ -12990,15 +12140,7 @@
     "eyeglasses": {
       "id": "eyeglasses",
       "name": "Glasses",
-      "keywords": [
-        "eyeglasses",
-        "fashion",
-        "accessories",
-        "eyesight",
-        "nerdy",
-        "dork",
-        "geek"
-      ],
+      "keywords": ["eyeglasses", "fashion", "accessories", "eyesight", "nerdy", "dork", "geek"],
       "skins": [{ "unified": "1f453", "native": "👓" }],
       "version": 1
     },
@@ -13124,15 +12266,7 @@
     "bikini": {
       "id": "bikini",
       "name": "Bikini",
-      "keywords": [
-        "swimming",
-        "female",
-        "woman",
-        "girl",
-        "fashion",
-        "beach",
-        "summer"
-      ],
+      "keywords": ["swimming", "female", "woman", "girl", "fashion", "beach", "summer"],
       "skins": [{ "unified": "1f459", "native": "👙" }],
       "version": 1
     },
@@ -13797,14 +12931,7 @@
     "book": {
       "id": "book",
       "name": "Open Book",
-      "keywords": [
-        "read",
-        "library",
-        "knowledge",
-        "literature",
-        "learn",
-        "study"
-      ],
+      "keywords": ["read", "library", "knowledge", "literature", "learn", "study"],
       "skins": [{ "unified": "1f4d6", "native": "📖" }],
       "version": 1
     },
@@ -13944,16 +13071,7 @@
     "pound": {
       "id": "pound",
       "name": "Pound Banknote",
-      "keywords": [
-        "british",
-        "sterling",
-        "money",
-        "sales",
-        "bills",
-        "uk",
-        "england",
-        "currency"
-      ],
+      "keywords": ["british", "sterling", "money", "sales", "bills", "uk", "england", "currency"],
       "skins": [{ "unified": "1f4b7", "native": "💷" }],
       "version": 1
     },
@@ -14079,15 +13197,7 @@
     "pencil2": {
       "id": "pencil2",
       "name": "Pencil",
-      "keywords": [
-        "pencil2",
-        "stationery",
-        "write",
-        "paper",
-        "writing",
-        "school",
-        "study"
-      ],
+      "keywords": ["pencil2", "stationery", "write", "paper", "writing", "school", "study"],
       "skins": [{ "unified": "270f-fe0f", "native": "✏️" }],
       "version": 1
     },
@@ -14108,14 +13218,7 @@
     "lower_left_ballpoint_pen": {
       "id": "lower_left_ballpoint_pen",
       "name": "Pen",
-      "keywords": [
-        "lower",
-        "left",
-        "ballpoint",
-        "stationery",
-        "writing",
-        "write"
-      ],
+      "keywords": ["lower", "left", "ballpoint", "stationery", "writing", "write"],
       "skins": [{ "unified": "1f58a-fe0f", "native": "🖊️" }],
       "version": 1
     },
@@ -14156,15 +13259,7 @@
     "briefcase": {
       "id": "briefcase",
       "name": "Briefcase",
-      "keywords": [
-        "business",
-        "documents",
-        "work",
-        "law",
-        "legal",
-        "job",
-        "career"
-      ],
+      "keywords": ["business", "documents", "work", "law", "legal", "job", "career"],
       "skins": [{ "unified": "1f4bc", "native": "💼" }],
       "version": 1
     },
@@ -14628,16 +13723,7 @@
     "syringe": {
       "id": "syringe",
       "name": "Syringe",
-      "keywords": [
-        "health",
-        "hospital",
-        "drugs",
-        "blood",
-        "medicine",
-        "needle",
-        "doctor",
-        "nurse"
-      ],
+      "keywords": ["health", "hospital", "drugs", "blood", "medicine", "needle", "doctor", "nurse"],
       "skins": [{ "unified": "1f489", "native": "💉" }],
       "version": 1
     },
@@ -14921,15 +14007,7 @@
     "atm": {
       "id": "atm",
       "name": "Atm Sign",
-      "keywords": [
-        "money",
-        "sales",
-        "cash",
-        "blue",
-        "square",
-        "payment",
-        "bank"
-      ],
+      "keywords": ["money", "sales", "cash", "blue", "square", "payment", "bank"],
       "skins": [{ "unified": "1f3e7", "native": "🏧" }],
       "version": 1
     },
@@ -14943,14 +14021,7 @@
     "potable_water": {
       "id": "potable_water",
       "name": "Potable Water",
-      "keywords": [
-        "blue",
-        "square",
-        "liquid",
-        "restroom",
-        "cleaning",
-        "faucet"
-      ],
+      "keywords": ["blue", "square", "liquid", "restroom", "cleaning", "faucet"],
       "skins": [{ "unified": "1f6b0", "native": "🚰" }],
       "version": 1
     },
@@ -14964,16 +14035,7 @@
     "mens": {
       "id": "mens",
       "name": "Men’s Room",
-      "keywords": [
-        "mens",
-        "toilet",
-        "restroom",
-        "wc",
-        "blue",
-        "square",
-        "gender",
-        "male"
-      ],
+      "keywords": ["mens", "toilet", "restroom", "wc", "blue", "square", "gender", "male"],
       "skins": [{ "unified": "1f6b9", "native": "🚹" }],
       "version": 1
     },
@@ -15053,30 +14115,14 @@
     "children_crossing": {
       "id": "children_crossing",
       "name": "Children Crossing",
-      "keywords": [
-        "school",
-        "warning",
-        "danger",
-        "sign",
-        "driving",
-        "yellow",
-        "diamond"
-      ],
+      "keywords": ["school", "warning", "danger", "sign", "driving", "yellow", "diamond"],
       "skins": [{ "unified": "1f6b8", "native": "🚸" }],
       "version": 1
     },
     "no_entry": {
       "id": "no_entry",
       "name": "No Entry",
-      "keywords": [
-        "limit",
-        "security",
-        "privacy",
-        "bad",
-        "denied",
-        "stop",
-        "circle"
-      ],
+      "keywords": ["limit", "security", "privacy", "bad", "denied", "stop", "circle"],
       "skins": [{ "unified": "26d4", "native": "⛔" }],
       "version": 1
     },
@@ -15142,15 +14188,7 @@
     "underage": {
       "id": "underage",
       "name": "No One Under Eighteen",
-      "keywords": [
-        "underage",
-        "18",
-        "drink",
-        "pub",
-        "night",
-        "minor",
-        "circle"
-      ],
+      "keywords": ["underage", "18", "drink", "pub", "night", "minor", "circle"],
       "skins": [{ "unified": "1f51e", "native": "🔞" }],
       "version": 1
     },
@@ -15178,15 +14216,7 @@
     "arrow_upper_right": {
       "id": "arrow_upper_right",
       "name": "Up-Right Arrow",
-      "keywords": [
-        "upper",
-        "blue",
-        "square",
-        "point",
-        "direction",
-        "diagonal",
-        "northeast"
-      ],
+      "keywords": ["upper", "blue", "square", "point", "direction", "diagonal", "northeast"],
       "skins": [{ "unified": "2197-fe0f", "native": "↗️" }],
       "version": 1
     },
@@ -15223,14 +14253,7 @@
     "arrow_lower_left": {
       "id": "arrow_lower_left",
       "name": "Down-Left Arrow",
-      "keywords": [
-        "lower",
-        "blue",
-        "square",
-        "direction",
-        "diagonal",
-        "southwest"
-      ],
+      "keywords": ["lower", "blue", "square", "direction", "diagonal", "southwest"],
       "skins": [{ "unified": "2199-fe0f", "native": "↙️" }],
       "version": 1
     },
@@ -15244,15 +14267,7 @@
     "arrow_upper_left": {
       "id": "arrow_upper_left",
       "name": "Up-Left Arrow",
-      "keywords": [
-        "upper",
-        "blue",
-        "square",
-        "point",
-        "direction",
-        "diagonal",
-        "northwest"
-      ],
+      "keywords": ["upper", "blue", "square", "point", "direction", "diagonal", "northwest"],
       "skins": [{ "unified": "2196-fe0f", "native": "↖️" }],
       "version": 1
     },
@@ -15493,14 +14508,7 @@
     "scorpius": {
       "id": "scorpius",
       "name": "Scorpio",
-      "keywords": [
-        "scorpius",
-        "sign",
-        "zodiac",
-        "purple",
-        "square",
-        "astrology"
-      ],
+      "keywords": ["scorpius", "sign", "zodiac", "purple", "square", "astrology"],
       "skins": [{ "unified": "264f", "native": "♏" }],
       "version": 1
     },
@@ -15542,15 +14550,7 @@
     "twisted_rightwards_arrows": {
       "id": "twisted_rightwards_arrows",
       "name": "Shuffle Tracks Button",
-      "keywords": [
-        "twisted",
-        "rightwards",
-        "arrows",
-        "blue",
-        "square",
-        "music",
-        "random"
-      ],
+      "keywords": ["twisted", "rightwards", "arrows", "blue", "square", "music", "random"],
       "skins": [{ "unified": "1f500", "native": "🔀" }],
       "version": 1
     },
@@ -15719,16 +14719,7 @@
     "cinema": {
       "id": "cinema",
       "name": "Cinema",
-      "keywords": [
-        "blue",
-        "square",
-        "record",
-        "film",
-        "movie",
-        "curtain",
-        "stage",
-        "theater"
-      ],
+      "keywords": ["blue", "square", "record", "film", "movie", "curtain", "stage", "theater"],
       "skins": [{ "unified": "1f3a6", "native": "🎦" }],
       "version": 1
     },
@@ -15802,29 +14793,14 @@
     "heavy_multiplication_x": {
       "id": "heavy_multiplication_x",
       "name": "Multiply",
-      "keywords": [
-        "heavy",
-        "multiplication",
-        "x",
-        "sign",
-        "math",
-        "calculation"
-      ],
+      "keywords": ["heavy", "multiplication", "x", "sign", "math", "calculation"],
       "skins": [{ "unified": "2716-fe0f", "native": "✖️" }],
       "version": 1
     },
     "heavy_plus_sign": {
       "id": "heavy_plus_sign",
       "name": "Plus",
-      "keywords": [
-        "heavy",
-        "sign",
-        "math",
-        "calculation",
-        "addition",
-        "more",
-        "increase"
-      ],
+      "keywords": ["heavy", "sign", "math", "calculation", "addition", "more", "increase"],
       "skins": [{ "unified": "2795", "native": "➕" }],
       "version": 1
     },
@@ -15894,28 +14870,14 @@
     "exclamation": {
       "id": "exclamation",
       "name": "Red Exclamation Mark",
-      "keywords": [
-        "heavy",
-        "danger",
-        "surprise",
-        "punctuation",
-        "wow",
-        "warning"
-      ],
+      "keywords": ["heavy", "danger", "surprise", "punctuation", "wow", "warning"],
       "skins": [{ "unified": "2757", "native": "❗" }],
       "version": 1
     },
     "wavy_dash": {
       "id": "wavy_dash",
       "name": "Wavy Dash",
-      "keywords": [
-        "draw",
-        "line",
-        "moustache",
-        "mustache",
-        "squiggle",
-        "scribble"
-      ],
+      "keywords": ["draw", "line", "moustache", "mustache", "squiggle", "scribble"],
       "skins": [{ "unified": "3030-fe0f", "native": "〰️" }],
       "version": 1
     },
@@ -15985,17 +14947,7 @@
     "white_check_mark": {
       "id": "white_check_mark",
       "name": "Check Mark Button",
-      "keywords": [
-        "white",
-        "green",
-        "square",
-        "ok",
-        "agree",
-        "vote",
-        "election",
-        "answer",
-        "tick"
-      ],
+      "keywords": ["white", "green", "square", "ok", "agree", "vote", "election", "answer", "tick"],
       "skins": [{ "unified": "2705", "native": "✅" }],
       "version": 1
     },
@@ -16055,14 +15007,7 @@
     "part_alternation_mark": {
       "id": "part_alternation_mark",
       "name": "Part Alternation Mark",
-      "keywords": [
-        "graph",
-        "presentation",
-        "stats",
-        "business",
-        "economics",
-        "bad"
-      ],
+      "keywords": ["graph", "presentation", "stats", "business", "economics", "bad"],
       "skins": [{ "unified": "303d-fe0f", "native": "〽️" }],
       "version": 1
     },
@@ -16405,30 +15350,14 @@
     "ideograph_advantage": {
       "id": "ideograph_advantage",
       "name": "Japanese “bargain” Button",
-      "keywords": [
-        "ideograph",
-        "advantage",
-        "chinese",
-        "kanji",
-        "obtain",
-        "get",
-        "circle"
-      ],
+      "keywords": ["ideograph", "advantage", "chinese", "kanji", "obtain", "get", "circle"],
       "skins": [{ "unified": "1f250", "native": "🉐" }],
       "version": 1
     },
     "u5272": {
       "id": "u5272",
       "name": "Japanese “discount” Button",
-      "keywords": [
-        "u5272",
-        "cut",
-        "divide",
-        "chinese",
-        "kanji",
-        "pink",
-        "square"
-      ],
+      "keywords": ["u5272", "cut", "divide", "chinese", "kanji", "pink", "square"],
       "skins": [{ "unified": "1f239", "native": "🈹" }],
       "version": 1
     },
@@ -16490,44 +15419,21 @@
     "u7a7a": {
       "id": "u7a7a",
       "name": "Japanese “vacancy” Button",
-      "keywords": [
-        "u7a7a",
-        "kanji",
-        "chinese",
-        "empty",
-        "sky",
-        "blue",
-        "square"
-      ],
+      "keywords": ["u7a7a", "kanji", "chinese", "empty", "sky", "blue", "square"],
       "skins": [{ "unified": "1f233", "native": "🈳" }],
       "version": 1
     },
     "congratulations": {
       "id": "congratulations",
       "name": "Circled Ideograph Congratulation",
-      "keywords": [
-        "congratulations",
-        "japanese",
-        "button",
-        "chinese",
-        "kanji",
-        "red"
-      ],
+      "keywords": ["congratulations", "japanese", "button", "chinese", "kanji", "red"],
       "skins": [{ "unified": "3297-fe0f", "native": "㊗️" }],
       "version": 1
     },
     "secret": {
       "id": "secret",
       "name": "Circled Ideograph Secret",
-      "keywords": [
-        "japanese",
-        "button",
-        "privacy",
-        "chinese",
-        "sshh",
-        "kanji",
-        "red"
-      ],
+      "keywords": ["japanese", "button", "privacy", "chinese", "sshh", "kanji", "red"],
       "skins": [{ "unified": "3299-fe0f", "native": "㊙️" }],
       "version": 1
     },
@@ -16768,15 +15674,7 @@
     "diamond_shape_with_a_dot_inside": {
       "id": "diamond_shape_with_a_dot_inside",
       "name": "Diamond with a Dot",
-      "keywords": [
-        "shape",
-        "inside",
-        "jewel",
-        "blue",
-        "gem",
-        "crystal",
-        "fancy"
-      ],
+      "keywords": ["shape", "inside", "jewel", "blue", "gem", "crystal", "fancy"],
       "skins": [{ "unified": "1f4a0", "native": "💠" }],
       "version": 1
     },
@@ -16832,16 +15730,7 @@
     "waving_white_flag": {
       "id": "waving_white_flag",
       "name": "White Flag",
-      "keywords": [
-        "waving",
-        "losing",
-        "loser",
-        "lost",
-        "surrender",
-        "give",
-        "up",
-        "fail"
-      ],
+      "keywords": ["waving", "losing", "loser", "lost", "surrender", "give", "up", "fail"],
       "skins": [{ "unified": "1f3f3-fe0f", "native": "🏳️" }],
       "version": 1
     },
@@ -17159,14 +16048,7 @@
     "flag-cd": {
       "id": "flag-cd",
       "name": "Congo - Kinshasa Flag",
-      "keywords": [
-        "cd",
-        "democratic",
-        "republic",
-        "nation",
-        "country",
-        "banner"
-      ],
+      "keywords": ["cd", "democratic", "republic", "nation", "country", "banner"],
       "skins": [{ "unified": "1f1e8-1f1e9", "native": "🇨🇩" }],
       "version": 2
     },
@@ -17194,15 +16076,7 @@
     "flag-ci": {
       "id": "flag-ci",
       "name": "Côte D’ivoire Flag",
-      "keywords": [
-        "ci",
-        "cote",
-        "ivory",
-        "coast",
-        "nation",
-        "country",
-        "banner"
-      ],
+      "keywords": ["ci", "cote", "ivory", "coast", "nation", "country", "banner"],
       "skins": [{ "unified": "1f1e8-1f1ee", "native": "🇨🇮" }],
       "version": 2
     },
@@ -18338,16 +17212,7 @@
     "flag-sh": {
       "id": "flag-sh",
       "name": "St. Helena Flag",
-      "keywords": [
-        "sh",
-        "saint",
-        "ascension",
-        "tristan",
-        "cunha",
-        "nation",
-        "country",
-        "banner"
-      ],
+      "keywords": ["sh", "saint", "ascension", "tristan", "cunha", "nation", "country", "banner"],
       "skins": [{ "unified": "1f1f8-1f1ed", "native": "🇸🇭" }],
       "version": 2
     },
@@ -18417,15 +17282,7 @@
     "flag-st": {
       "id": "flag-st",
       "name": "São Tomé & Príncipe Flag",
-      "keywords": [
-        "st",
-        "sao",
-        "tome",
-        "principe",
-        "nation",
-        "country",
-        "banner"
-      ],
+      "keywords": ["st", "sao", "tome", "principe", "nation", "country", "banner"],
       "skins": [{ "unified": "1f1f8-1f1f9", "native": "🇸🇹" }],
       "version": 2
     },
diff --git a/src/common/component/AddEntriesMenu.js b/src/common/component/AddEntriesMenu.js
index cbb6a9a0..8dec4d95 100644
--- a/src/common/component/AddEntriesMenu.js
+++ b/src/common/component/AddEntriesMenu.js
@@ -42,9 +42,7 @@ const Styled = styled.ul`
   }
 `;
 export default function AddEntriesMenu() {
-  const currentUser = useSelector(
-    (store) => store.contacts.byId[store.authData.uid]
-  );
+  const currentUser = useSelector((store) => store.contacts.byId[store.authData.uid]);
   const [isPrivate, setIsPrivate] = useState(false);
   const [inviteModalVisible, setInviteModalVisible] = useState(false);
 
@@ -78,10 +76,7 @@ export default function AddEntriesMenu() {
     <>
       <Styled>
         {currentUser?.is_admin && (
-          <li
-            className="item"
-            onClick={handleOpenChannelModal.bind(null, false)}
-          >
+          <li className="item" onClick={handleOpenChannelModal.bind(null, false)}>
             <ChannelIcon className="icon" />
             New Channel
           </li>
@@ -99,15 +94,9 @@ export default function AddEntriesMenu() {
           Invite People
         </li>
       </Styled>
-      {channelModalVisible && (
-        <ChannelModal personal={isPrivate} closeModal={handleCloseModal} />
-      )}
-      {contactsModalVisible && (
-        <ContactsModal closeModal={toggleContactsModalVisible} />
-      )}
-      {inviteModalVisible && (
-        <InviteModal closeModal={toggleInviteModalVisible} />
-      )}
+      {channelModalVisible && <ChannelModal personal={isPrivate} closeModal={handleCloseModal} />}
+      {contactsModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
+      {inviteModalVisible && <InviteModal closeModal={toggleInviteModalVisible} />}
     </>
   );
 }
diff --git a/src/common/component/Avatar.js b/src/common/component/Avatar.js
index 1db9b63b..889715ac 100644
--- a/src/common/component/Avatar.js
+++ b/src/common/component/Avatar.js
@@ -8,7 +8,7 @@ const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
     const tmp = getInitialsAvatar({
       initials: getInitials(name),
       background: type == "channel" ? "#EAECF0" : undefined,
-      foreground: type == "channel" ? "#475467" : undefined,
+      foreground: type == "channel" ? "#475467" : undefined
     });
     setSrc(tmp);
   };
@@ -17,7 +17,7 @@ const Avatar = ({ url = "", name = "unkonw name", type = "user", ...rest }) => {
       const tmp = getInitialsAvatar({
         initials: getInitials(name),
         background: type == "channel" ? "#EAECF0" : undefined,
-        foreground: type == "channel" ? "#475467" : undefined,
+        foreground: type == "channel" ? "#475467" : undefined
       });
       setSrc(tmp);
     } else {
diff --git a/src/common/component/AvatarUploader.js b/src/common/component/AvatarUploader.js
index 48ac5875..923691d5 100644
--- a/src/common/component/AvatarUploader.js
+++ b/src/common/component/AvatarUploader.js
@@ -64,7 +64,7 @@ export default function AvatarUploader({
   name = "",
   type = "user",
   uploadImage,
-  disabled = false,
+  disabled = false
 }) {
   const [uploading, setUploading] = useState(false);
   const handleUpload = async (evt) => {
@@ -80,9 +80,7 @@ export default function AvatarUploader({
         <Avatar type={type} url={url} name={name} />
         {!disabled && (
           <>
-            <div className="tip">
-              {uploading ? `Uploading` : `Change Avatar`}
-            </div>
+            <div className="tip">{uploading ? `Uploading` : `Change Avatar`}</div>
             <input
               multiple={false}
               onChange={handleUpload}
diff --git a/src/common/component/BlankPlaceholder.js b/src/common/component/BlankPlaceholder.js
index a4ce4947..cb92dbdc 100644
--- a/src/common/component/BlankPlaceholder.js
+++ b/src/common/component/BlankPlaceholder.js
@@ -80,19 +80,16 @@ export default function BlankPlaceholder({ type = "chat" }) {
     setInviteModalVisible((prev) => !prev);
   };
   const chatTip =
-    type == "chat"
-      ? "Create a Channel to Start a Conversation"
-      : "Send a Direct Message";
-  const chatHanlder =
-    type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
+    type == "chat" ? "Create a Channel to Start a Conversation" : "Send a Direct Message";
+  const chatHanlder = type == "chat" ? toggleChannelModalVisible : toggleContactListVisible;
   return (
     <>
       <Styled>
         <div className="head">
           <h2 className="title">Welcome to {server.name} server</h2>
           <p className="desc">
-            Here are some steps to help you get started. For more, check out our
-            Getting Started guide
+            Here are some steps to help you get started. For more, check out our Getting Started
+            guide
           </p>
         </div>
         <div className="boxes">
@@ -117,12 +114,8 @@ export default function BlankPlaceholder({ type = "chat" }) {
       {createChannelVisible && (
         <ChannelModal personal={true} closeModal={toggleChannelModalVisible} />
       )}
-      {contactListVisible && (
-        <ContactsModal closeModal={toggleContactListVisible} />
-      )}
-      {inviteModalVisible && (
-        <InviteModal closeModal={toggleInviteModalVisible} />
-      )}
+      {contactListVisible && <ContactsModal closeModal={toggleContactListVisible} />}
+      {inviteModalVisible && <InviteModal closeModal={toggleInviteModalVisible} />}
     </>
   );
 }
diff --git a/src/common/component/Channel.js b/src/common/component/Channel.js
index 2a28c56a..467c0402 100644
--- a/src/common/component/Channel.js
+++ b/src/common/component/Channel.js
@@ -47,16 +47,11 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-export default function Channel({
-  interactive = true,
-  id = "",
-  compact = false,
-  avatarSize = 32,
-}) {
+export default function Channel({ interactive = true, id = "", compact = false, avatarSize = 32 }) {
   const { channel, totalMemberCount } = useSelector((store) => {
     return {
       channel: store.channels.byId[id],
-      totalMemberCount: store.contacts.ids.length,
+      totalMemberCount: store.contacts.ids.length
     };
   });
   console.log("channel item", id, channel);
@@ -65,17 +60,14 @@ export default function Channel({
   return (
     <StyledWrapper
       size={avatarSize}
-      className={`${interactive ? "interactive" : ""} ${
-        compact ? "compact" : ""
-      }`}
+      className={`${interactive ? "interactive" : ""} ${compact ? "compact" : ""}`}
     >
       <div className="avatar">
         <Avatar type="channel" url={avatar} name={"#"} alt="avatar" />
       </div>
       {!compact && (
         <div className="name">
-          <span className="txt">{name}</span> (
-          {is_public ? totalMemberCount : members.length})
+          <span className="txt">{name}</span> ({is_public ? totalMemberCount : members.length})
         </div>
       )}
     </StyledWrapper>
diff --git a/src/common/component/ChannelIcon.js b/src/common/component/ChannelIcon.js
index 8f2e29bc..fcb1b8d6 100644
--- a/src/common/component/ChannelIcon.js
+++ b/src/common/component/ChannelIcon.js
@@ -8,11 +8,7 @@ const Styled = styled.div`
     fill: #d0d5dd;
   }
 `;
-export default function ChannelIcon({
-  personal = false,
-  muted = false,
-  className,
-}) {
+export default function ChannelIcon({ personal = false, muted = false, className }) {
   return (
     <Styled className={`${muted ? "muted" : ""} ${className}`}>
       {personal ? <LockHashIcon /> : <HashIcon />}
diff --git a/src/common/component/ChannelModal/index.js b/src/common/component/ChannelModal/index.js
index 620ec681..6edaa7d0 100644
--- a/src/common/component/ChannelModal/index.js
+++ b/src/common/component/ChannelModal/index.js
@@ -22,13 +22,11 @@ export default function ChannelModal({ personal = false, closeModal }) {
     name: "",
     dsecription: "",
     members: [loginUid],
-    is_public: !personal,
+    is_public: !personal
   });
   const { contacts, input, updateInput } = useFilteredUsers();
-  const [
-    createChannel,
-    { isSuccess, isError, isLoading, data: newChannelId },
-  ] = useCreateChannelMutation();
+  const [createChannel, { isSuccess, isError, isLoading, data: newChannelId }] =
+    useCreateChannelMutation();
 
   const handleToggle = () => {
     const { is_public } = data;
@@ -72,9 +70,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
   const toggleCheckMember = ({ currentTarget }) => {
     const { members } = data;
     const { uid } = currentTarget.dataset;
-    let tmp = members.includes(+uid)
-      ? members.filter((m) => m != uid)
-      : [...members, +uid];
+    let tmp = members.includes(+uid) ? members.filter((m) => m != uid) : [...members, +uid];
     console.log(uid, currentTarget);
     setData((prev) => {
       return { ...prev, members: tmp };
@@ -135,11 +131,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
           <div className="name">
             <span className="label normal">Channel Name</span>
             <div className="input">
-              <input
-                onChange={handleNameInput}
-                value={name}
-                placeholder="new channel"
-              />
+              <input onChange={handleNameInput} value={name} placeholder="new channel" />
               <ChannelIcon personal={!is_public} className="icon" />
             </div>
           </div>
@@ -155,11 +147,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
             <Button onClick={closeModal} className="normal cancel">
               Cancel
             </Button>
-            <Button
-              disabled={isLoading}
-              onClick={handleCreate}
-              className="normal"
-            >
+            <Button disabled={isLoading} onClick={handleCreate} className="normal">
               Create
             </Button>
           </div>
diff --git a/src/common/component/Contact/ContextMenu.js b/src/common/component/Contact/ContextMenu.js
index cb06c3d5..cd70ed15 100644
--- a/src/common/component/Contact/ContextMenu.js
+++ b/src/common/component/Contact/ContextMenu.js
@@ -4,14 +4,7 @@ import Tippy from "@tippyjs/react";
 import useContactOperation from "../../hook/useContactOperation";
 import ContextMenu from "../ContextMenu";
 
-export default function ContactContextMenu({
-  enable = false,
-  uid,
-  cid,
-  visible,
-  hide,
-  children,
-}) {
+export default function ContactContextMenu({ enable = false, uid, cid, visible, hide, children }) {
   const {
     canCall,
     call,
@@ -21,10 +14,10 @@ export default function ContactContextMenu({
     canRemove,
     canRemoveFromChannel,
     removeFromChannel,
-    removeUser,
+    removeUser
   } = useContactOperation({
     uid,
-    cid,
+    cid
   });
   return (
     <>
@@ -43,26 +36,26 @@ export default function ContactContextMenu({
             items={[
               {
                 title: "Message",
-                handler: startChat,
+                handler: startChat
               },
               canCall && {
                 title: "Call",
-                handler: call,
+                handler: call
               },
               canCopyEmail && {
                 title: "Copy Email",
-                handler: copyEmail,
+                handler: copyEmail
               },
               canRemoveFromChannel && {
                 danger: true,
                 title: "Remove From Channel",
-                handler: removeFromChannel,
+                handler: removeFromChannel
               },
               canRemove && {
                 danger: true,
                 title: "Remove From Server",
-                handler: removeUser,
-              },
+                handler: removeUser
+              }
             ]}
           />
         }
diff --git a/src/common/component/Contact/index.js b/src/common/component/Contact/index.js
index fdc26378..63c98f5b 100644
--- a/src/common/component/Contact/index.js
+++ b/src/common/component/Contact/index.js
@@ -17,14 +17,10 @@ export default function Contact({
   popover = false,
   compact = false,
   avatarSize = 32,
-  enableContextMenu = false,
+  enableContextMenu = false
 }) {
   const navigate = useNavigate();
-  const {
-    visible: contextMenuVisible,
-    handleContextMenuEvent,
-    hideContextMenu,
-  } = useContextMenu();
+  const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
   const curr = useSelector((store) => store.contacts.byId[uid]);
   const handleDoubleClick = () => {
     navigate(`/chat/dm/${uid}`);
@@ -50,15 +46,11 @@ export default function Contact({
           onContextMenu={enableContextMenu ? handleContextMenuEvent : null}
           size={avatarSize}
           onDoubleClick={dm ? handleDoubleClick : null}
-          className={`${interactive ? "interactive" : ""} ${
-            compact ? "compact" : ""
-          }`}
+          className={`${interactive ? "interactive" : ""} ${compact ? "compact" : ""}`}
         >
           <div className="avatar">
             <Avatar url={curr.avatar} name={curr.name} alt="avatar" />
-            <div
-              className={`status ${curr.online ? "online" : "offline"}`}
-            ></div>
+            <div className={`status ${curr.online ? "online" : "offline"}`}></div>
           </div>
           {!compact && <span className="name">{curr?.name}</span>}
           {owner && <IconOwner />}
diff --git a/src/common/component/ContactsModal.js b/src/common/component/ContactsModal.js
index 9cb553b4..85a064f7 100644
--- a/src/common/component/ContactsModal.js
+++ b/src/common/component/ContactsModal.js
@@ -64,11 +64,7 @@ export default function ContactsModal({ closeModal }) {
     <Modal>
       <StyledWrapper ref={wrapperRef}>
         <div className="search">
-          <input
-            value={input}
-            onChange={handleSearch}
-            placeholder="Type Username to search"
-          />
+          <input value={input} onChange={handleSearch} placeholder="Type Username to search" />
         </div>
         {contacts && (
           <ul className="users">
diff --git a/src/common/component/ContextMenu.js b/src/common/component/ContextMenu.js
index 69f2b5fd..279c26f2 100644
--- a/src/common/component/ContextMenu.js
+++ b/src/common/component/ContextMenu.js
@@ -16,13 +16,11 @@ export default function ContextMenu({ items = [], hideMenu = null }) {
             }
           },
           underline = false,
-          danger = false,
+          danger = false
         } = item;
         return (
           <li
-            className={`item ${underline ? "underline" : ""} ${
-              danger ? "danger" : ""
-            }`}
+            className={`item ${underline ? "underline" : ""} ${danger ? "danger" : ""}`}
             key={title}
             onClick={(evt) => {
               evt.stopPropagation();
diff --git a/src/common/component/DeleteMessageConfirm.js b/src/common/component/DeleteMessageConfirm.js
index 0cf04e10..37d7dae0 100644
--- a/src/common/component/DeleteMessageConfirm.js
+++ b/src/common/component/DeleteMessageConfirm.js
@@ -25,11 +25,7 @@ export default function DeleteMessageConfirmModal({ closeModal, mids = [] }) {
             <Button className="cancel" onClick={closeModal.bind(null, false)}>
               Cancel
             </Button>
-            <Button
-              disabled={isDeleting}
-              onClick={handleDelete}
-              className="danger"
-            >
+            <Button disabled={isDeleting} onClick={handleDelete} className="danger">
               {isDeleting ? "Deleting" : `Delete`}
             </Button>
           </>
diff --git a/src/common/component/FAQ.js b/src/common/component/FAQ.js
index e5bfefc9..941a569d 100644
--- a/src/common/component/FAQ.js
+++ b/src/common/component/FAQ.js
@@ -13,9 +13,7 @@ export default function FAQ() {
     <Styled>
       <div className="item">Client Version: {process.env.VERSION}</div>
       <div className="item">Server Version: {serverVersion}</div>
-      <div className="item">
-        Build Timestamp: {process.env.REACT_APP_BUILD_TIME}
-      </div>
+      <div className="item">Build Timestamp: {process.env.REACT_APP_BUILD_TIME}</div>
     </Styled>
   );
 }
diff --git a/src/common/component/FileBox/index.js b/src/common/component/FileBox/index.js
index 868e38ce..053cd4b0 100644
--- a/src/common/component/FileBox/index.js
+++ b/src/common/component/FileBox/index.js
@@ -9,7 +9,7 @@ import {
   ImagePreview,
   PdfPreview,
   CodePreview,
-  DocPreview,
+  DocPreview
 } from "./preview";
 import { getFileIcon, formatBytes } from "../../utils";
 import IconDownload from "../../../assets/icons/download.svg";
@@ -24,7 +24,7 @@ const renderPreview = (data) => {
     video: /^video/gi,
     code: /(json|javascript|java|rb|c|php|xml|css|html)$/gi,
     doc: /^text/gi,
-    pdf: /\/pdf$/gi,
+    pdf: /\/pdf$/gi
   };
   const _arr = name.split(".");
   const _type = file_type || _arr[_arr.length - 1];
@@ -65,7 +65,7 @@ export default function FileBox({
   size,
   created_at,
   from_uid,
-  content,
+  content
 }) {
   const fromUser = useSelector((store) => store.contacts.byId[from_uid]);
   const icon = getFileIcon(file_type, name);
@@ -75,9 +75,9 @@ export default function FileBox({
   const withPreview = preview && previewContent;
   return (
     <Styled
-      className={`file_box ${flex ? "flex" : ""} ${
-        withPreview ? "preview" : ""
-      } ${file_type.startsWith("audio") ? "audio" : ""}`}
+      className={`file_box ${flex ? "flex" : ""} ${withPreview ? "preview" : ""} ${
+        file_type.startsWith("audio") ? "audio" : ""
+      }`}
     >
       <div className="basic">
         {icon}
@@ -91,11 +91,7 @@ export default function FileBox({
             </i>
           </span>
         </div>
-        <a
-          className="download"
-          download={name}
-          href={`${content}&download=true`}
-        >
+        <a className="download" download={name} href={`${content}&download=true`}>
           <IconDownload />
         </a>
       </div>
diff --git a/src/common/component/FileBox/preview/index.js b/src/common/component/FileBox/preview/index.js
index b3798e34..cbefb81a 100644
--- a/src/common/component/FileBox/preview/index.js
+++ b/src/common/component/FileBox/preview/index.js
@@ -5,11 +5,4 @@ import PdfPreview from "./Pdf";
 import CodePreview from "./Code";
 import DocPreview from "./Doc";
 
-export {
-  VideoPreview,
-  AudioPreview,
-  ImagePreview,
-  PdfPreview,
-  CodePreview,
-  DocPreview,
-};
+export { VideoPreview, AudioPreview, ImagePreview, PdfPreview, CodePreview, DocPreview };
diff --git a/src/common/component/FileMessage/ImageMessage.js b/src/common/component/FileMessage/ImageMessage.js
index 002d5615..120a49d6 100644
--- a/src/common/component/FileMessage/ImageMessage.js
+++ b/src/common/component/FileMessage/ImageMessage.js
@@ -37,7 +37,7 @@ export default function ImageMessage({
   thumbnail,
   download,
   content,
-  properties = {},
+  properties = {}
 }) {
   const [url, setUrl] = useState(thumbnail);
   const { width = 0, height = 0 } = getDefaultSize(properties);
@@ -64,7 +64,7 @@ export default function ImageMessage({
               strokeWidth={50}
               styles={buildStyles({
                 storke: "#000",
-                strokeLinecap: "butt",
+                strokeLinecap: "butt"
               })}
             />
           </div>
@@ -74,7 +74,7 @@ export default function ImageMessage({
         className="img preview"
         style={{
           width: width ? `${width}px` : "",
-          height: height ? `${height}px` : "",
+          height: height ? `${height}px` : ""
         }}
         data-meta={JSON.stringify(properties)}
         data-origin={content}
diff --git a/src/common/component/FileMessage/index.js b/src/common/component/FileMessage/index.js
index f31b2c98..e2a67045 100644
--- a/src/common/component/FileMessage/index.js
+++ b/src/common/component/FileMessage/index.js
@@ -23,7 +23,7 @@ export default function FileMessage({
   content = "",
   download = "",
   thumbnail = "",
-  properties = { local_id: 0, name: "", size: 0, content_type: "" },
+  properties = { local_id: 0, name: "", size: 0, content_type: "" }
 }) {
   const [imageSize, setImageSize] = useState(null);
   const [uploadingFile, setUploadingFile] = useState(false);
@@ -31,19 +31,13 @@ export default function FileMessage({
   const {
     sendMessage,
     isSuccess: sendMessageSuccess,
-    isSending,
+    isSending
   } = useSendMessage({
     context,
     from: from_uid,
-    to,
+    to
   });
-  const {
-    stopUploading,
-    data,
-    uploadFile,
-    progress,
-    isSuccess: uploadSuccess,
-  } = useUploadFile();
+  const { stopUploading, data, uploadFile, progress, isSuccess: uploadSuccess } = useUploadFile();
   const fromUser = useSelector((store) => store.contacts.byId[from_uid]);
   const { size, name, content_type } = properties ?? {};
   useEffect(() => {
@@ -75,20 +69,14 @@ export default function FileMessage({
     const propsV2 = imageSize ? { ...props, ...imageSize } : props;
     // 本地文件 并且上传成功
     if (uploadSuccess && isLocalFile(content)) {
-      console.log(
-        "send local file message",
-        uploadSuccess,
-        propsV2,
-        data,
-        content
-      );
+      console.log("send local file message", uploadSuccess, propsV2, data, content);
       // 把已经上传的东西当做消息发出去
       const { path } = data;
       sendMessage({
         ignoreLocal: true,
         type: "file",
         content: { path },
-        properties: propsV2,
+        properties: propsV2
       });
     }
   }, [uploadSuccess, data, properties, content]);
@@ -151,11 +139,7 @@ export default function FileMessage({
         {sending ? (
           <IconClose className="cancel" onClick={handleCancel} />
         ) : (
-          <a
-            className="download"
-            download={name}
-            href={`${content}&download=true`}
-          >
+          <a className="download" download={name} href={`${content}&download=true`}>
             <IconDownload />
           </a>
         )}
diff --git a/src/common/component/ForwardModal/index.js b/src/common/component/ForwardModal/index.js
index 0edadc89..66f71559 100644
--- a/src/common/component/ForwardModal/index.js
+++ b/src/common/component/ForwardModal/index.js
@@ -25,7 +25,7 @@ export default function ForwardModal({ mids, closeModal }) {
   const {
     channels,
     // input: channelInput,
-    updateInput: updateChannelInput,
+    updateInput: updateChannelInput
   } = useFilteredChannels();
   const { contacts, input, updateInput } = useFilteredUsers();
   // const { conactsData, loginUid } = useSelector((store) => {
@@ -34,8 +34,7 @@ export default function ForwardModal({ mids, closeModal }) {
   const toggleCheck = ({ currentTarget }) => {
     const { id, type = "user" } = currentTarget.dataset;
     const ids = type == "user" ? selectedMembers : selectedChannels;
-    const updateState =
-      type == "user" ? setSelectedMembers : setSelectedChannels;
+    const updateState = type == "user" ? setSelectedMembers : setSelectedChannels;
     let tmp = ids.includes(+id) ? ids.filter((m) => m != id) : [...ids, +id];
     console.log(id, currentTarget);
     updateState(tmp);
@@ -47,13 +46,13 @@ export default function ForwardModal({ mids, closeModal }) {
     await forwardMessage({
       mids: mids.map((mid) => +mid),
       users: selectedMembers,
-      channels: selectedChannels,
+      channels: selectedChannels
     });
     if (appendText.trim()) {
       await sendMessages({
         content: appendText,
         users: selectedMembers,
-        channels: selectedChannels,
+        channels: selectedChannels
       });
     }
     toast.success("Forward Message Successfully");
@@ -99,12 +98,7 @@ export default function ForwardModal({ mids, closeModal }) {
                     className="user channel"
                     onClick={toggleCheck}
                   >
-                    <StyledCheckbox
-                      readOnly
-                      checked={checked}
-                      name="cb"
-                      id="cb"
-                    />
+                    <StyledCheckbox readOnly checked={checked} name="cb" id="cb" />
                     <Channel id={gid} interactive={false} />
                   </li>
                 );
@@ -122,12 +116,7 @@ export default function ForwardModal({ mids, closeModal }) {
                     className="user"
                     onClick={toggleCheck}
                   >
-                    <StyledCheckbox
-                      readOnly
-                      checked={checked}
-                      name="cb"
-                      id="cb"
-                    />
+                    <StyledCheckbox readOnly checked={checked} name="cb" id="cb" />
                     <Contact uid={uid} interactive={false} />
                   </li>
                 );
@@ -162,10 +151,7 @@ export default function ForwardModal({ mids, closeModal }) {
                     interactive={false}
                     // avatarSize={40}
                   />
-                  <CloseIcon
-                    className="remove"
-                    onClick={removeSelected.bind(null, uid, "user")}
-                  />
+                  <CloseIcon className="remove" onClick={removeSelected.bind(null, uid, "user")} />
                 </li>
               );
             })}
@@ -185,11 +171,7 @@ export default function ForwardModal({ mids, closeModal }) {
             <Button onClick={closeModal} className="normal cancel">
               Cancel
             </Button>
-            <Button
-              className="normal"
-              disabled={sendButtonDisabled}
-              onClick={handleForward}
-            >
+            <Button className="normal" disabled={sendButtonDisabled} onClick={handleForward}>
               Send To {selectedCount == 0 ? null : `(${selectedCount})`}
             </Button>
           </div>
diff --git a/src/common/component/ImagePreviewModal.js b/src/common/component/ImagePreviewModal.js
index b04a5213..415ca87b 100644
--- a/src/common/component/ImagePreviewModal.js
+++ b/src/common/component/ImagePreviewModal.js
@@ -58,11 +58,7 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-export default function ImagePreviewModal({
-  download = true,
-  data,
-  closeModal,
-}) {
+export default function ImagePreviewModal({ download = true, data, closeModal }) {
   const [url, setUrl] = useState(data?.thumbnail);
   const [loading, setLoading] = useState(true);
   const wrapperRef = useRef();
diff --git a/src/common/component/InviteLink.js b/src/common/component/InviteLink.js
index cc6593f6..bfe239d3 100644
--- a/src/common/component/InviteLink.js
+++ b/src/common/component/InviteLink.js
@@ -38,28 +38,15 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function InviteLink() {
-  const {
-    generating,
-    link,
-    linkCopied,
-    copyLink,
-    generateNewLink,
-  } = useInviteLink();
+  const { generating, link, linkCopied, copyLink, generateNewLink } = useInviteLink();
   const handleNewLink = () => {
     generateNewLink();
   };
   return (
     <StyledWrapper>
-      <span className="tip">
-        Share this link to invite people to this server.
-      </span>
+      <span className="tip">Share this link to invite people to this server.</span>
       <div className="link">
-        <Input
-          readOnly
-          className={"large"}
-          placeholder="Generating"
-          value={link}
-        />
+        <Input readOnly className={"large"} placeholder="Generating" value={link} />
         <Button onClick={copyLink} className="ghost small border_less">
           {linkCopied ? "Copied" : `Copy`}
         </Button>
diff --git a/src/common/component/InviteModal/AddMembers.js b/src/common/component/InviteModal/AddMembers.js
index 402a788d..1aab1359 100644
--- a/src/common/component/InviteModal/AddMembers.js
+++ b/src/common/component/InviteModal/AddMembers.js
@@ -97,15 +97,12 @@ const Styled = styled.div`
   }
 `;
 export default function AddMembers({ cid = null, closeModal }) {
-  const [
-    addMembers,
-    { isLoading: isAdding, isSuccess },
-  ] = useAddMembersMutation();
+  const [addMembers, { isLoading: isAdding, isSuccess }] = useAddMembersMutation();
   const [selects, setSelects] = useState([]);
   const { channel, contactData } = useSelector((store) => {
     return {
       channel: store.channels.byId[cid],
-      contactData: store.contacts.byId,
+      contactData: store.contacts.byId
     };
   });
   useEffect(() => {
@@ -145,11 +142,7 @@ export default function AddMembers({ cid = null, closeModal }) {
             return (
               <li className="select" key={uid}>
                 {contactData[uid].name}
-                <CloseIcon
-                  data-uid={uid}
-                  onClick={toggleCheckMember}
-                  className="close"
-                />
+                <CloseIcon data-uid={uid} onClick={toggleCheckMember} className="close" />
               </li>
             );
           })}
@@ -185,11 +178,7 @@ export default function AddMembers({ cid = null, closeModal }) {
           );
         })}
       </ul>
-      <Button
-        disabled={selects.length == 0 || isAdding}
-        className="btn"
-        onClick={handleAddMembers}
-      >
+      <Button disabled={selects.length == 0 || isAdding} className="btn" onClick={handleAddMembers}>
         {isAdding ? `Adding` : "Add"} to #{channel.name}
       </Button>
     </Styled>
diff --git a/src/common/component/InviteModal/InviteByEmail.js b/src/common/component/InviteModal/InviteByEmail.js
index 4a55b9e9..054691cc 100644
--- a/src/common/component/InviteModal/InviteByEmail.js
+++ b/src/common/component/InviteModal/InviteByEmail.js
@@ -68,14 +68,8 @@ import Button from "../styled/Button";
 import Input from "../styled/Input";
 export default function InviteByEmail({ cid = null }) {
   const [email, setEmail] = useState("");
-  const {
-    enableSMTP,
-    linkCopied,
-    link,
-    copyLink,
-    generateNewLink,
-    generating,
-  } = useInviteLink(cid);
+  const { enableSMTP, linkCopied, link, copyLink, generateNewLink, generating } =
+    useInviteLink(cid);
   useEffect(() => {
     if (linkCopied) {
       toast.success("Invite Link Copied!");
@@ -104,12 +98,7 @@ export default function InviteByEmail({ cid = null }) {
       <div className="link">
         <label htmlFor="">Or Send invite link to your friends</label>
         <div className="input">
-          <Input
-            readOnly
-            className="invite"
-            placeholder="Generating"
-            value={link}
-          />
+          <Input readOnly className="invite" placeholder="Generating" value={link} />
           <button className="copy" onClick={copyLink}>
             Copy
           </button>
diff --git a/src/common/component/InviteModal/index.js b/src/common/component/InviteModal/index.js
index 344709cd..d7dd1142 100644
--- a/src/common/component/InviteModal/index.js
+++ b/src/common/component/InviteModal/index.js
@@ -28,20 +28,14 @@ const Styled = styled.div`
 `;
 import Modal from "../Modal";
 // type: server,channel
-export default function InviteModal({
-  type = "server",
-  cid = null,
-  title = "",
-  closeModal,
-}) {
+export default function InviteModal({ type = "server", cid = null, title = "", closeModal }) {
   const { channel, server } = useSelector((store) => {
     return {
       channel: store.channels.byId[cid],
-      server: store.server,
+      server: store.server
     };
   });
-  const finalTitle =
-    type == "server" ? server.name : `#${title || channel?.name}`;
+  const finalTitle = type == "server" ? server.name : `#${title || channel?.name}`;
   return (
     <Modal>
       <Styled>
@@ -49,9 +43,7 @@ export default function InviteModal({
           Add friends to {finalTitle}
           <CloseIcon className="close" onClick={closeModal} />
         </h2>
-        {!channel?.is_public && (
-          <AddMembers cid={cid} closeModal={closeModal} />
-        )}
+        {!channel?.is_public && <AddMembers cid={cid} closeModal={closeModal} />}
         <InviteByEmail cid={channel?.is_public ? null : cid} />
       </Styled>
     </Modal>
diff --git a/src/common/component/LeaveChannel/LeaveConfirmModal.js b/src/common/component/LeaveChannel/LeaveConfirmModal.js
index b4c493be..d6d71d4d 100644
--- a/src/common/component/LeaveChannel/LeaveConfirmModal.js
+++ b/src/common/component/LeaveChannel/LeaveConfirmModal.js
@@ -30,10 +30,7 @@ export default function LeaveConfirmModal({ id, closeModal, handleNextStep }) {
         }
         buttons={
           <>
-            <Button
-              onClick={closeModal.bind(null, undefined)}
-              className="cancel"
-            >
+            <Button onClick={closeModal.bind(null, undefined)} className="cancel">
               Cancel
             </Button>
             {isOwner ? (
diff --git a/src/common/component/LeaveChannel/TransferOwnerModal.js b/src/common/component/LeaveChannel/TransferOwnerModal.js
index b12aca30..871e4254 100644
--- a/src/common/component/LeaveChannel/TransferOwnerModal.js
+++ b/src/common/component/LeaveChannel/TransferOwnerModal.js
@@ -28,11 +28,7 @@ const UserList = styled.ul`
     }
   }
 `;
-export default function TransferOwnerModal({
-  id,
-  closeModal,
-  withLeave = true,
-}) {
+export default function TransferOwnerModal({ id, closeModal, withLeave = true }) {
   const {
     transferOwner,
     otherMembers,
@@ -40,7 +36,7 @@ export default function TransferOwnerModal({
     leaveChannel,
     leaveSuccess,
     transferSuccess,
-    transfering,
+    transfering
   } = useLeaveChannel(id);
 
   const [uid, setUid] = useState(null);
@@ -75,17 +71,10 @@ export default function TransferOwnerModal({
         description={"This cannot be undone."}
         buttons={
           <>
-            <Button
-              onClick={closeModal.bind(null, undefined)}
-              className="cancel"
-            >
+            <Button onClick={closeModal.bind(null, undefined)} className="cancel">
               Cancel
             </Button>
-            <Button
-              disabled={!uid}
-              onClick={handleTransferAndLeave}
-              className="danger"
-            >
+            <Button disabled={!uid} onClick={handleTransferAndLeave} className="danger">
               {operating ? "Assigning" : `Assign and Leave`}
             </Button>
           </>
diff --git a/src/common/component/LeaveChannel/index.js b/src/common/component/LeaveChannel/index.js
index d193d62d..07caa255 100644
--- a/src/common/component/LeaveChannel/index.js
+++ b/src/common/component/LeaveChannel/index.js
@@ -2,22 +2,11 @@ import { useState } from "react";
 // import styled from "styled-components";
 import TransferOwnerModal from "./TransferOwnerModal";
 import LeaveConfirmModal from "./LeaveConfirmModal";
-export default function LeaveChannel({
-  id = null,
-  isOwner = false,
-  closeModal,
-}) {
+export default function LeaveChannel({ id = null, isOwner = false, closeModal }) {
   const [transferOwner, setTransferOwner] = useState(isOwner);
   const handleNextStep = () => {
     setTransferOwner(true);
   };
-  if (transferOwner)
-    return <TransferOwnerModal id={id} closeModal={closeModal} />;
-  return (
-    <LeaveConfirmModal
-      id={id}
-      closeModal={closeModal}
-      handleNextStep={handleNextStep}
-    />
-  );
+  if (transferOwner) return <TransferOwnerModal id={id} closeModal={closeModal} />;
+  return <LeaveConfirmModal id={id} closeModal={closeModal} handleNextStep={handleNextStep} />;
 }
diff --git a/src/common/component/Loading.js b/src/common/component/Loading.js
index 781eb52e..58c0ccf9 100644
--- a/src/common/component/Loading.js
+++ b/src/common/component/Loading.js
@@ -45,17 +45,8 @@ export default function Loading({ reload = false, fullscreen = false }) {
   };
   return (
     <StyledWrapper className={fullscreen ? "fullscreen" : ""}>
-      <Ring
-        className="loading"
-        size={40}
-        lineWeight={5}
-        speed={2}
-        color="black"
-      />
-      <Button
-        className={`reload danger ${reload ? "visible" : ""}`}
-        onClick={handleReload}
-      >
+      <Ring className="loading" size={40} lineWeight={5} speed={2} color="black" />
+      <Button className={`reload danger ${reload ? "visible" : ""}`} onClick={handleReload}>
         Reload
       </Button>
     </StyledWrapper>
diff --git a/src/common/component/ManageMembers.js b/src/common/component/ManageMembers.js
index 2e0a5387..46d04d9f 100644
--- a/src/common/component/ManageMembers.js
+++ b/src/common/component/ManageMembers.js
@@ -119,20 +119,12 @@ export default function ManageMembers({ cid = null }) {
     return {
       contacts: store.contacts,
       channels: store.channels,
-      loginUser: store.contacts.byId[store.authData.uid],
+      loginUser: store.contacts.byId[store.authData.uid]
     };
   });
-  const {
-    copyEmail,
-    removeFromChannel,
-    removeUser,
-    canRemove,
-    canRemoveFromChannel,
-  } = useContactOperation({ cid });
-  const [
-    updateContact,
-    { isSuccess: updateSuccess },
-  ] = useUpdateContactMutation();
+  const { copyEmail, removeFromChannel, removeUser, canRemove, canRemoveFromChannel } =
+    useContactOperation({ cid });
+  const [updateContact, { isSuccess: updateSuccess }] = useUpdateContactMutation();
 
   useEffect(() => {
     if (updateSuccess) {
@@ -146,11 +138,7 @@ export default function ManageMembers({ cid = null }) {
     updateContact({ id: uid, is_admin: isAdmin });
   };
   const channel = channels.byId[cid] ?? null;
-  const uids = channel
-    ? channel.is_public
-      ? contacts.ids
-      : channel.members
-    : contacts.ids;
+  const uids = channel ? (channel.is_public ? contacts.ids : channel.members) : contacts.ids;
 
   return (
     <StyledWrapper>
@@ -158,8 +146,7 @@ export default function ManageMembers({ cid = null }) {
       <div className="intro">
         <h4 className="title">Manage Members</h4>
         <p className="desc">
-          Disabling your account means you can recover it at any time after
-          taking this action.
+          Disabling your account means you can recover it at any time after taking this action.
         </p>
       </div>
       <ul className="members">
@@ -194,7 +181,7 @@ export default function ManageMembers({ cid = null }) {
                             onClick={handleToggleRole.bind(null, {
                               ignore: is_admin,
                               uid,
-                              isAdmin: true,
+                              isAdmin: true
                             })}
                           >
                             Admin
@@ -205,7 +192,7 @@ export default function ManageMembers({ cid = null }) {
                             onClick={handleToggleRole.bind(null, {
                               ignore: !is_admin,
                               uid,
-                              isAdmin: false,
+                              isAdmin: false
                             })}
                           >
                             User
@@ -226,10 +213,7 @@ export default function ManageMembers({ cid = null }) {
                     content={
                       <StyledMenu className="menu">
                         {email && (
-                          <li
-                            className="item"
-                            onClick={copyEmail.bind(null, email)}
-                          >
+                          <li className="item" onClick={copyEmail.bind(null, email)}>
                             Copy Email
                           </li>
                         )}
@@ -237,18 +221,12 @@ export default function ManageMembers({ cid = null }) {
                         {/* <li className="item underline">Change Nickname</li> */}
                         {/* <li className="item danger">Ban</li> */}
                         {canRemoveFromChannel && (
-                          <li
-                            className="item danger"
-                            onClick={removeFromChannel.bind(null, uid)}
-                          >
+                          <li className="item danger" onClick={removeFromChannel.bind(null, uid)}>
                             Remove From Channel
                           </li>
                         )}
                         {canRemove && !cid && (
-                          <li
-                            className="item danger"
-                            onClick={removeUser.bind(null, uid)}
-                          >
+                          <li className="item danger" onClick={removeUser.bind(null, uid)}>
                             Remove From Server
                           </li>
                         )}
diff --git a/src/common/component/Manifest/usePrompt.js b/src/common/component/Manifest/usePrompt.js
index a763c5c4..90ec78e1 100644
--- a/src/common/component/Manifest/usePrompt.js
+++ b/src/common/component/Manifest/usePrompt.js
@@ -11,6 +11,6 @@ export default function usePrompt() {
   return {
     setCanneled: setPrompt,
     prompted: !!localStorage.getItem(KEY_PWA_INSTALLED),
-    resetPrompt,
+    resetPrompt
   };
 }
diff --git a/src/common/component/MarkdownEditor/index.js b/src/common/component/MarkdownEditor/index.js
index 75413d8d..4b992aa5 100644
--- a/src/common/component/MarkdownEditor/index.js
+++ b/src/common/component/MarkdownEditor/index.js
@@ -16,7 +16,7 @@ function MarkdownEditor({
   height = "50vh",
   placeholder,
   sendMarkdown,
-  setEditorInstance,
+  setEditorInstance
 }) {
   const editorRef = useRef(undefined);
   const { uploadFile } = useUploadFile();
diff --git a/src/common/component/Message/Commands.js b/src/common/component/Message/Commands.js
index 79558822..2b2816d4 100644
--- a/src/common/component/Message/Commands.js
+++ b/src/common/component/Message/Commands.js
@@ -62,12 +62,7 @@ const StyledCmds = styled.ul`
     transform: translateX(-100%);
   }
 `;
-export default function Commands({
-  context = "user",
-  contextId = 0,
-  mid = 0,
-  toggleEditMessage,
-}) {
+export default function Commands({ context = "user", contextId = 0, mid = 0, toggleEditMessage }) {
   const {
     canDelete,
     canReply,
@@ -80,11 +75,11 @@ export default function Commands({
     togglePinModal,
     PinModal,
     DeleteModal,
-    ForwardModal,
+    ForwardModal
   } = useMessageOperation({ mid, context, contextId });
   const { setReplying } = useSendMessage({ context, to: contextId });
   const { addFavorite, isFavorited } = useFavMessage({
-    cid: context == "channel" ? contextId : null,
+    cid: context == "channel" ? contextId : null
   });
   const dispatch = useDispatch();
   const [tippyVisible, setTippyVisible] = useState(false);
@@ -126,10 +121,7 @@ export default function Commands({
 
   return (
     <>
-      <StyledCmds
-        ref={cmdsRef}
-        className={`cmds ${tippyVisible ? "visible" : ""}`}
-      >
+      <StyledCmds ref={cmdsRef} className={`cmds ${tippyVisible ? "visible" : ""}`}>
         <Tippy
           onShow={handleTippyVisible.bind(null, true)}
           onHide={handleTippyVisible.bind(null, false)}
@@ -175,25 +167,25 @@ export default function Commands({
                 canPin && {
                   title: pinned ? `Unpin Message` : `Pin Message`,
                   icon: <IconPin className="icon" />,
-                  handler: pinned ? handleUnpin : togglePinModal,
+                  handler: pinned ? handleUnpin : togglePinModal
                 },
                 {
                   title: "Forward",
                   icon: <IconForward className="icon" />,
-                  handler: toggleForwardModal,
+                  handler: toggleForwardModal
                 },
                 {
                   title: "Select",
                   icon: <IconSelect className="icon" />,
-                  handler: handleSelect.bind(null, mid),
+                  handler: handleSelect.bind(null, mid)
                 },
 
                 canDelete && {
                   title: " Delete",
                   danger: true,
                   icon: <IconDelete className="icon" />,
-                  handler: toggleDeleteModal,
-                },
+                  handler: toggleDeleteModal
+                }
               ]}
             />
           }
diff --git a/src/common/component/Message/ContextMenu.js b/src/common/component/Message/ContextMenu.js
index e4d14753..bea96344 100644
--- a/src/common/component/Message/ContextMenu.js
+++ b/src/common/component/Message/ContextMenu.js
@@ -20,7 +20,7 @@ export default function MessageContextMenu({
   visible,
   hide,
   editMessage,
-  children,
+  children
 }) {
   const {
     copyContent,
@@ -37,7 +37,7 @@ export default function MessageContextMenu({
     togglePinModal,
     PinModal,
     ForwardModal,
-    DeleteModal,
+    DeleteModal
   } = useMessageOperation({ mid, contextId, context });
   const dispatch = useDispatch();
   const { setReplying } = useSendMessage({ context, to: contextId });
@@ -71,39 +71,39 @@ export default function MessageContextMenu({
               canEdit && {
                 title: "Edit Message",
                 icon: <IconEdit className="icon" />,
-                handler: editMessage,
+                handler: editMessage
               },
               canReply && {
                 title: "Reply",
                 icon: <IconReply className="icon" />,
-                handler: handleReply,
+                handler: handleReply
               },
               canCopy && {
                 title: "Copy",
                 icon: <IconCopy className="icon" />,
-                handler: copyContent,
+                handler: copyContent
               },
               canPin && {
                 title: pinned ? "Unpin" : "Pin",
                 icon: <IconPin className="icon" />,
-                handler: pinned ? unPin.bind(null, mid) : togglePinModal,
+                handler: pinned ? unPin.bind(null, mid) : togglePinModal
               },
               {
                 title: "Forward",
                 icon: <IconForward className="icon" />,
-                handler: toggleForwardModal,
+                handler: toggleForwardModal
               },
               {
                 title: "Select",
                 icon: <IconSelect className="icon" />,
-                handler: handleSelect,
+                handler: handleSelect
               },
               canDelete && {
                 title: "Delete",
                 danger: true,
                 icon: <IconDelete className="icon" />,
-                handler: toggleDeleteModal,
-              },
+                handler: toggleDeleteModal
+              }
             ]}
           />
         }
diff --git a/src/common/component/Message/EditMessage.js b/src/common/component/Message/EditMessage.js
index a9af0b39..020a1e87 100644
--- a/src/common/component/Message/EditMessage.js
+++ b/src/common/component/Message/EditMessage.js
@@ -91,7 +91,7 @@ export default function EditMessage({ mid, cancelEdit }) {
     edit({
       mid,
       content: currMsg,
-      type: msg.content_type == ContentTypes.markdown ? "markdown" : "text",
+      type: msg.content_type == ContentTypes.markdown ? "markdown" : "text"
     });
   };
   if (!msg) return null;
@@ -121,8 +121,7 @@ export default function EditMessage({ mid, cancelEdit }) {
           esc to <button onClick={cancelEdit}>cancel</button>
         </span>
         <span className="opt">
-          enter to{" "}
-          <button onClick={handleSave}>{isEditing ? "saving" : `save`}</button>
+          enter to <button onClick={handleSave}>{isEditing ? "saving" : `save`}</button>
         </span>
       </div>
     </StyledWrapper>
diff --git a/src/common/component/Message/FavoritedMessage.js b/src/common/component/Message/FavoritedMessage.js
index 99f9cd93..899c5713 100644
--- a/src/common/component/Message/FavoritedMessage.js
+++ b/src/common/component/Message/FavoritedMessage.js
@@ -23,20 +23,10 @@ const FavoritedMessage = ({ id }) => {
       const favorite_mids = messages.map(({ from_mid }) => from_mid) || [];
 
       setMsgs(
-        <StyledFav
-          data-favorite-mids={favorite_mids.join(",")}
-          className="favorite"
-        >
+        <StyledFav data-favorite-mids={favorite_mids.join(",")} className="favorite">
           <div className="list">
             {messages.map((msg, idx) => {
-              const {
-                user = {},
-                download,
-                content,
-                content_type,
-                properties,
-                thumbnail,
-              } = msg;
+              const { user = {}, download, content, content_type, properties, thumbnail } = msg;
               return (
                 <StyledMsg className="archive" key={idx}>
                   {user && (
@@ -54,7 +44,7 @@ const FavoritedMessage = ({ id }) => {
                         content,
                         content_type,
                         properties,
-                        thumbnail,
+                        thumbnail
                       })}
                     </div>
                   </div>
diff --git a/src/common/component/Message/ForwardedMessage.js b/src/common/component/Message/ForwardedMessage.js
index 73bc87e9..73dc04b4 100644
--- a/src/common/component/Message/ForwardedMessage.js
+++ b/src/common/component/Message/ForwardedMessage.js
@@ -56,7 +56,7 @@ const ForwardedMessage = ({ context, to, from_uid, id }) => {
                 content,
                 content_type,
                 properties,
-                thumbnail,
+                thumbnail
               } = msg;
               return (
                 <StyledMsg className="archive" key={idx}>
@@ -78,7 +78,7 @@ const ForwardedMessage = ({ context, to, from_uid, id }) => {
                         content,
                         content_type,
                         properties,
-                        thumbnail,
+                        thumbnail
                       })}
                     </div>
                   </div>
diff --git a/src/common/component/Message/PreviewMessage.js b/src/common/component/Message/PreviewMessage.js
index 80995f80..9ccaff95 100644
--- a/src/common/component/Message/PreviewMessage.js
+++ b/src/common/component/Message/PreviewMessage.js
@@ -9,14 +9,7 @@ export default function PreviewMessage({ mid = 0 }) {
     return { msg: store.message[mid], contactsData: store.contacts.byId };
   });
   if (!msg) return null;
-  const {
-    from_uid,
-    created_at,
-    content_type,
-    content,
-    thumbnail,
-    properties,
-  } = msg;
+  const { from_uid, created_at, content_type, content, thumbnail, properties } = msg;
   const { name, avatar } = contactsData[from_uid];
   return (
     <StyledWrapper className={`preview`}>
@@ -26,9 +19,7 @@ export default function PreviewMessage({ mid = 0 }) {
       <div className="details">
         <div className="up">
           <span className="name">{name}</span>
-          <i className="time">
-            {dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
-          </i>
+          <i className="time">{dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}</i>
         </div>
         <div className={`down`}>
           {renderContent({
@@ -36,7 +27,7 @@ export default function PreviewMessage({ mid = 0 }) {
             content,
             thumbnail,
             from_uid,
-            properties,
+            properties
           })}
         </div>
       </div>
diff --git a/src/common/component/Message/Reaction.js b/src/common/component/Message/Reaction.js
index cd8cfa40..854b5060 100644
--- a/src/common/component/Message/Reaction.js
+++ b/src/common/component/Message/Reaction.js
@@ -70,8 +70,7 @@ const StyledDetails = styled.div`
   position: relative;
   background: #ffffff;
   border-radius: var(--br);
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
   display: flex;
   align-items: flex-start;
   gap: 8px;
@@ -132,7 +131,7 @@ export default function Reaction({ mid, reactions = null }) {
   const [reactWithEmoji] = useReactMessageMutation();
   const { currUid } = useSelector((store) => {
     return {
-      currUid: store.authData.uid,
+      currUid: store.authData.uid
     };
   });
   const handleReact = (emoji) => {
@@ -156,18 +155,14 @@ export default function Reaction({ mid, reactions = null }) {
               // visible={true}
               interactive
               placement="top"
-              content={
-                <ReactionDetails uids={uids} emoji={reaction} index={idx} />
-              }
+              content={<ReactionDetails uids={uids} emoji={reaction} index={idx} />}
             >
               <i className="emoji">
                 <ReactionItem native={reaction} />
               </i>
             </Tippy>
 
-            {uids.length > 1 ? (
-              <em className="count">{`${uids.length}`} </em>
-            ) : null}
+            {uids.length > 1 ? <em className="count">{`${uids.length}`} </em> : null}
           </span>
         ) : null;
       })}
diff --git a/src/common/component/Message/ReactionPicker.js b/src/common/component/Message/ReactionPicker.js
index 956d2b36..146e7cd5 100644
--- a/src/common/component/Message/ReactionPicker.js
+++ b/src/common/component/Message/ReactionPicker.js
@@ -41,7 +41,7 @@ export default function ReactionPicker({ mid, hidePicker }) {
   const { reactionData, currUid } = useSelector((store) => {
     return {
       reactionData: store.reactionMessage[mid] || {},
-      currUid: store.authData.uid,
+      currUid: store.authData.uid
     };
   });
   // useOutsideClick(wrapperRef, hidePicker);
@@ -55,8 +55,7 @@ export default function ReactionPicker({ mid, hidePicker }) {
       <ul className={`emojis ${isLoading ? "reacting" : ""}`}>
         {Emojis.map((emoji) => {
           let reacted =
-            reactionData[emoji] &&
-            reactionData[emoji].findIndex((id) => id == currUid) > -1;
+            reactionData[emoji] && reactionData[emoji].findIndex((id) => id == currUid) > -1;
 
           return (
             <li
diff --git a/src/common/component/Message/Reply.js b/src/common/component/Message/Reply.js
index d4b3ca63..ad3e6859 100644
--- a/src/common/component/Message/Reply.js
+++ b/src/common/component/Message/Reply.js
@@ -66,11 +66,7 @@ const Styled = styled.div`
         width: 100%;
         height: 100%;
         content: "";
-        background: linear-gradient(
-          180deg,
-          rgba(255, 255, 255, 0) 63.54%,
-          #e5e7eb 93.09%
-        );
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 63.54%, #e5e7eb 93.09%);
       }
     }
     .pic {
diff --git a/src/common/component/Message/index.js b/src/common/component/Message/index.js
index 73fc4c75..0b65f81d 100644
--- a/src/common/component/Message/index.js
+++ b/src/common/component/Message/index.js
@@ -26,26 +26,24 @@ function Message({
   mid = "",
   context = "user",
   updateReadIndex,
-  read = true,
+  read = true
 }) {
-  const {
-    visible: contextMenuVisible,
-    handleContextMenuEvent,
-    hideContextMenu,
-  } = useContextMenu();
+  const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
   const inviewRef = useInView();
   const [edit, setEdit] = useState(false);
   const avatarRef = useRef(null);
   const { getPinInfo } = usePinMessage(context == "channel" ? contextId : null);
-  const { message = {}, reactionMessageData, contactsData } = useSelector(
-    (store) => {
-      return {
-        reactionMessageData: store.reactionMessage,
-        message: store.message[mid] || {},
-        contactsData: store.contacts.byId,
-      };
-    }
-  );
+  const {
+    message = {},
+    reactionMessageData,
+    contactsData
+  } = useSelector((store) => {
+    return {
+      reactionMessageData: store.reactionMessage,
+      message: store.message[mid] || {},
+      contactsData: store.contacts.byId
+    };
+  });
 
   const toggleEditMessage = () => {
     setEdit((prev) => !prev);
@@ -61,7 +59,7 @@ function Message({
     download,
     content_type = "text/plain",
     edited,
-    properties,
+    properties
   } = message;
 
   useEffect(() => {
@@ -79,11 +77,7 @@ function Message({
   // if (!message) return null;
   let timePrefix = null;
   const dayjsTime = dayjs(time);
-  timePrefix = dayjsTime.isToday()
-    ? "Today"
-    : dayjsTime.isYesterday()
-    ? "Yesterday"
-    : null;
+  timePrefix = dayjsTime.isToday() ? "Today" : dayjsTime.isYesterday() ? "Yesterday" : null;
 
   const pinInfo = getPinInfo(mid);
   // return null;
@@ -94,9 +88,9 @@ function Message({
       onContextMenu={handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inviewRef}
-      className={`message ${readOnly ? "readonly" : ""} ${
-        pinInfo ? "pinned" : ""
-      } ${contextMenuVisible ? "contextVisible" : ""} `}
+      className={`message ${readOnly ? "readonly" : ""} ${pinInfo ? "pinned" : ""} ${
+        contextMenuVisible ? "contextVisible" : ""
+      } `}
     >
       <Tippy
         key={_key}
@@ -153,7 +147,7 @@ function Message({
                 content,
                 thumbnail,
                 download,
-                edited,
+                edited
               })
             )}
             {reactions && <Reaction mid={mid} reactions={reactions} />}
diff --git a/src/common/component/Message/renderContent.js b/src/common/component/Message/renderContent.js
index da797ef9..c3b17c81 100644
--- a/src/common/component/Message/renderContent.js
+++ b/src/common/component/Message/renderContent.js
@@ -20,7 +20,7 @@ const renderContent = ({
   content,
   download,
   thumbnail,
-  edited = false,
+  edited = false
 }) => {
   let ctn = null;
   switch (content_type) {
@@ -30,38 +30,23 @@ const renderContent = ({
           <Linkit
             componentDecorator={(decoratedHref, decoratedText, key) => (
               <React.Fragment key={key}>
-                <a
-                  className="link"
-                  target="_blank"
-                  href={decoratedHref}
-                  key={key}
-                  rel="noreferrer"
-                >
+                <a className="link" target="_blank" href={decoratedHref} key={key} rel="noreferrer">
                   {decoratedText}
                 </a>
-                {!decoratedHref.startsWith("mailto") && (
-                  <URLPreview url={decoratedHref} />
-                )}
+                {!decoratedHref.startsWith("mailto") && <URLPreview url={decoratedHref} />}
               </React.Fragment>
             )}
           >
-            {reactStringReplace(
-              content,
-              /(\s{1}@[0-9]+\s{1})/g,
-              (match, idx) => {
-                console.log("match", match);
-                const uid = match.trim().slice(1);
-                return <Mention key={idx} uid={uid} cid={to} />;
-              }
-            )}
+            {reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
+              console.log("match", match);
+              const uid = match.trim().slice(1);
+              return <Mention key={idx} uid={uid} cid={to} />;
+            })}
             {/* {content.replace(/\s{1}\@[1-9]+\s{1}/g,)} */}
             {/* {new RegExp(/\s{1}\@[1-9]+\s{1}/g).exec(content)} */}
           </Linkit>
           {edited && (
-            <span
-              className="edited"
-              title={dayjs(edited).format("YYYY-MM-DD h:mm:ss A")}
-            >
+            <span className="edited" title={dayjs(edited).format("YYYY-MM-DD h:mm:ss A")}>
               (edited)
             </span>
           )}
diff --git a/src/common/component/Message/useMessageOperation.js b/src/common/component/Message/useMessageOperation.js
index b9ee9c7f..c2984ab6 100644
--- a/src/common/component/Message/useMessageOperation.js
+++ b/src/common/component/Message/useMessageOperation.js
@@ -10,17 +10,15 @@ import usePinMessage from "../../hook/usePinMessage";
 
 export default function useMessageOperation({ mid, context, contextId }) {
   const { copy } = useCopy();
-  const { content_type, properties, currUid, from_uid, content } = useSelector(
-    (store) => {
-      return {
-        content: store.message[mid]?.content,
-        from_uid: store.message[mid]?.from_uid,
-        content_type: store.message[mid]?.content_type,
-        properties: store.message[mid]?.properties,
-        currUid: store.authData.uid,
-      };
-    }
-  );
+  const { content_type, properties, currUid, from_uid, content } = useSelector((store) => {
+    return {
+      content: store.message[mid]?.content,
+      from_uid: store.message[mid]?.from_uid,
+      content_type: store.message[mid]?.content_type,
+      properties: store.message[mid]?.properties,
+      currUid: store.authData.uid
+    };
+  });
   const { canPin, pins, unpinMessage, isUnpinSuccess } = usePinMessage(
     context == "channel" ? contextId : undefined
   );
@@ -71,16 +69,11 @@ export default function useMessageOperation({ mid, context, contextId }) {
     properties?.content_type &&
     properties?.content_type.startsWith("image");
   const enableEdit =
-    currUid == from_uid &&
-    [ContentTypes.text, ContentTypes.markdown].includes(content_type);
+    currUid == from_uid && [ContentTypes.text, ContentTypes.markdown].includes(content_type);
   const canDelete = currUid == from_uid;
-  const canCopy =
-    [ContentTypes.text, ContentTypes.markdown].includes(content_type) ||
-    isImage;
+  const canCopy = [ContentTypes.text, ContentTypes.markdown].includes(content_type) || isImage;
   return {
-    copyContent: isImage
-      ? copyContent.bind(null, true)
-      : copyContent.bind(null, false),
+    copyContent: isImage ? copyContent.bind(null, true) : copyContent.bind(null, false),
     canCopy,
     isImage,
     isMarkdown: content_type == ContentTypes.markdown,
@@ -101,6 +94,6 @@ export default function useMessageOperation({ mid, context, contextId }) {
     ) : null,
     PinModal: pinModalVisible ? (
       <PinMessageModal mid={mid} gid={contextId} closeModal={togglePinModal} />
-    ) : null,
+    ) : null
   };
 }
diff --git a/src/common/component/MixedInput/config.js b/src/common/component/MixedInput/config.js
index 085ce483..32192bce 100644
--- a/src/common/component/MixedInput/config.js
+++ b/src/common/component/MixedInput/config.js
@@ -4,7 +4,7 @@ export const CONFIG = {
   editableProps: {
     spellCheck: false,
     autoFocus: true,
-    placeholder: "Type…",
+    placeholder: "Type…"
   },
   trailingBlock: { type: ELEMENT_PARAGRAPH },
   softBreak: {
@@ -13,11 +13,11 @@ export const CONFIG = {
         {
           hotkey: "shift+enter",
           query: {
-            allow: [ELEMENT_IMAGE, ELEMENT_PARAGRAPH],
-          },
-        },
-      ],
-    },
+            allow: [ELEMENT_IMAGE, ELEMENT_PARAGRAPH]
+          }
+        }
+      ]
+    }
   },
   exitBreak: {
     options: {
@@ -25,9 +25,9 @@ export const CONFIG = {
         {
           hotkey: "mod+enter",
           query: {
-            allow: [ELEMENT_IMAGE, ELEMENT_PARAGRAPH],
-          },
-        },
+            allow: [ELEMENT_IMAGE, ELEMENT_PARAGRAPH]
+          }
+        }
         // {
         //   hotkey: "mod+shift+enter",
         //   before: true,
@@ -40,14 +40,14 @@ export const CONFIG = {
         //     allow: KEYS_HEADING,
         //   },
         // },
-      ],
-    },
+      ]
+    }
   },
   selectOnBackspace: {
     options: {
       query: {
-        allow: [ELEMENT_IMAGE],
-      },
-    },
-  },
+        allow: [ELEMENT_IMAGE]
+      }
+    }
+  }
 };
diff --git a/src/common/component/MixedInput/index.js b/src/common/component/MixedInput/index.js
index e37e2b29..d8501404 100644
--- a/src/common/component/MixedInput/index.js
+++ b/src/common/component/MixedInput/index.js
@@ -23,7 +23,7 @@ import {
   // usePlateEditorRef,
   // ELEMENT_IMAGE,
   // useComboboxControls,
-  MentionCombobox,
+  MentionCombobox
 } from "@udecode/plate";
 import { createComboboxPlugin } from "@udecode/plate-combobox";
 import { ReactEditor } from "slate-react";
@@ -44,7 +44,7 @@ const Plugins = ({
   id = "",
   placeholder = "Write some markdown...",
   sendMessages,
-  members = [],
+  members = []
 }) => {
   // const { getMenuProps, getItemProps } = useComboboxControls();
   const [context, to] = id.split("_");
@@ -57,7 +57,7 @@ const Plugins = ({
   const initialProps = {
     ...CONFIG.editableProps,
     className: "box",
-    placeholder,
+    placeholder
   };
   const plateEditor = getPlateEditorRef(`${TEXT_EDITOR_PREFIX}_${id}`);
   useEffect(() => {
@@ -91,13 +91,7 @@ const Plugins = ({
     (evt) => {
       // 是否在at操作
       const mentionInputs = findMentionInput(plateEditor);
-      if (
-        mentionInputs ||
-        evt.shiftKey ||
-        evt.ctrlKey ||
-        evt.altKey ||
-        evt.isComposing
-      ) {
+      if (mentionInputs || evt.shiftKey || evt.ctrlKey || evt.altKey || evt.isComposing) {
         return true;
       }
       evt.preventDefault();
@@ -107,14 +101,14 @@ const Plugins = ({
       Transforms.delete(plateEditor, {
         at: {
           anchor: Editor.start(plateEditor, []),
-          focus: Editor.end(plateEditor, []),
-        },
+          focus: Editor.end(plateEditor, [])
+        }
       });
     },
     {
       // eventTypes: ["keydown"],
       target: editableRef,
-      when: !cmdKey,
+      when: !cmdKey
     }
   );
   useKey(
@@ -125,7 +119,7 @@ const Plugins = ({
     },
     {
       eventTypes: ["keydown", "keyup"],
-      target: editableRef,
+      target: editableRef
     }
   );
   const pluginArr = [
@@ -133,7 +127,7 @@ const Plugins = ({
     createNodeIdPlugin(),
     createSoftBreakPlugin(CONFIG.softBreak),
     createTrailingBlockPlugin(CONFIG.trailingBlock),
-    createExitBreakPlugin(CONFIG.exitBreak),
+    createExitBreakPlugin(CONFIG.exitBreak)
   ];
   const plugins = createPlugins(
     enableMentions
@@ -145,17 +139,17 @@ const Plugins = ({
                 console.log("mention", item);
                 const {
                   text,
-                  data: { uid },
+                  data: { uid }
                 } = item;
                 return { value: `@${text}`, uid };
               },
-              insertSpaceAfterMention: true,
-            },
-          }),
+              insertSpaceAfterMention: true
+            }
+          })
         ])
       : pluginArr,
     {
-      components,
+      components
     }
   );
 
@@ -179,20 +173,16 @@ const Plugins = ({
         const { value, mentions } = getMixedText(v.children);
         const prev = tmps[tmps.length - 1];
         if (!prev) {
-          tmps.push([
-            { type: "text", content: value, properties: { mentions } },
-          ]);
+          tmps.push([{ type: "text", content: value, properties: { mentions } }]);
         } else {
           if (Array.isArray(prev)) {
             tmps[tmps.length - 1].push({
               type: "text",
               content: value,
-              properties: { mentions },
+              properties: { mentions }
             });
           } else {
-            tmps.push([
-              { type: "text", content: value, properties: { mentions } },
-            ]);
+            tmps.push([{ type: "text", content: value, properties: { mentions } }]);
           }
         }
       }
@@ -202,8 +192,8 @@ const Plugins = ({
               type: "text",
               content: tmp.map((t) => t.content).join("\n"),
               properties: {
-                mentions: tmp.map((t) => t.properties?.mentions || []).flat(),
-              },
+                mentions: tmp.map((t) => t.properties?.mentions || []).flat()
+              }
             }
           : tmp;
       });
@@ -229,13 +219,7 @@ const Plugins = ({
             // component={StyledCombobox}
             onRenderItem={({ item }) => {
               console.log("wtf", item);
-              return (
-                <Contact
-                  key={item.data.uid}
-                  uid={item.data.uid}
-                  interactive={false}
-                />
-              );
+              return <Contact key={item.data.uid} uid={item.data.uid} interactive={false} />;
             }}
             items={members.map((id) => {
               const data = contactData[id];
@@ -246,8 +230,8 @@ const Plugins = ({
                 text: name,
                 data: {
                   uid,
-                  ...rest,
-                },
+                  ...rest
+                }
               };
             })}
           />
@@ -273,7 +257,7 @@ export const useMixedEditor = (key) => {
   };
   return {
     focus,
-    insertText,
+    insertText
   };
 };
 export default Plugins;
diff --git a/src/common/component/MixedInput/plugins.js b/src/common/component/MixedInput/plugins.js
index 1d116c80..88cfac86 100644
--- a/src/common/component/MixedInput/plugins.js
+++ b/src/common/component/MixedInput/plugins.js
@@ -2,12 +2,12 @@ import {
   createBasicElementsPlugin,
   createImagePlugin,
   createParagraphPlugin,
-  createSelectOnBackspacePlugin,
+  createSelectOnBackspacePlugin
 } from "@udecode/plate";
 import { CONFIG } from "./config";
 
 const basicElements = [
-  createParagraphPlugin(), // paragraph element
+  createParagraphPlugin() // paragraph element
 ];
 
 export const PLUGINS = {
@@ -16,6 +16,6 @@ export const PLUGINS = {
   image: [
     createBasicElementsPlugin(),
     createImagePlugin(),
-    createSelectOnBackspacePlugin(CONFIG.selectOnBackspace),
-  ],
+    createSelectOnBackspacePlugin(CONFIG.selectOnBackspace)
+  ]
 };
diff --git a/src/common/component/MixedInput/values/nodeTypes.js b/src/common/component/MixedInput/values/nodeTypes.js
index b8c3eb9b..8ed30f6b 100644
--- a/src/common/component/MixedInput/values/nodeTypes.js
+++ b/src/common/component/MixedInput/values/nodeTypes.js
@@ -1,6 +1,6 @@
 const nodeTypes = {
   paragraph: "p",
-  image: "img",
+  image: "img"
 };
 
 export default nodeTypes;
diff --git a/src/common/component/MixedInput/values/utils.js b/src/common/component/MixedInput/values/utils.js
index 4151d65f..8e68d495 100644
--- a/src/common/component/MixedInput/values/utils.js
+++ b/src/common/component/MixedInput/values/utils.js
@@ -1,13 +1,10 @@
 import {
-  ELEMENT_PARAGRAPH,
+  ELEMENT_PARAGRAPH
   // TElement,
 } from "@udecode/plate";
 //   import { Text } from 'slate'
 
-export const createElement = (
-  text = "",
-  { type = ELEMENT_PARAGRAPH, mark } = {}
-) => {
+export const createElement = (text = "", { type = ELEMENT_PARAGRAPH, mark } = {}) => {
   const leaf = { text };
   if (mark) {
     leaf[mark] = true;
@@ -15,7 +12,7 @@ export const createElement = (
 
   return {
     type,
-    children: [leaf],
+    children: [leaf]
   };
 };
 
diff --git a/src/common/component/MrakdownRender.js b/src/common/component/MrakdownRender.js
index 31bdcdd1..4d5ed2ad 100644
--- a/src/common/component/MrakdownRender.js
+++ b/src/common/component/MrakdownRender.js
@@ -24,11 +24,11 @@ const Styled = styled.div`
   }
 `;
 export default function MrakdownRender({ content }) {
-  const mdContainer = useRef(null);
+  const mdContainer = useRef(undefined);
   const [previewImage, setPreviewImage] = useState(null);
   useEffect(() => {
-    if (mdContainer) {
-      const container = mdContainer.current;
+    const container = mdContainer?.current;
+    if (container) {
       // 点击查看大图
       container.addEventListener(
         "click",
@@ -56,11 +56,7 @@ export default function MrakdownRender({ content }) {
   return (
     <>
       {previewImage && (
-        <ImagePreviewModal
-          download={false}
-          data={previewImage}
-          closeModal={closePreviewModal}
-        />
+        <ImagePreviewModal download={false} data={previewImage} closeModal={closePreviewModal} />
       )}
       <Styled ref={mdContainer}>
         <Viewer
diff --git a/src/common/component/Notification/index.js b/src/common/component/Notification/index.js
index 407cabe4..f2760ff4 100644
--- a/src/common/component/Notification/index.js
+++ b/src/common/component/Notification/index.js
@@ -21,15 +21,9 @@ const Notification = () => {
       navigateTo(newPath);
     };
     // https only
-    navigator.serviceWorker?.addEventListener(
-      "message",
-      handleServiceworkerMessage
-    );
+    navigator.serviceWorker?.addEventListener("message", handleServiceworkerMessage);
     return () => {
-      navigator.serviceWorker?.removeEventListener(
-        "message",
-        handleServiceworkerMessage
-      );
+      navigator.serviceWorker?.removeEventListener("message", handleServiceworkerMessage);
     };
   }, []);
 
diff --git a/src/common/component/Notification/useDeviceToken.js b/src/common/component/Notification/useDeviceToken.js
index 7bc70f0d..ed631ba0 100644
--- a/src/common/component/Notification/useDeviceToken.js
+++ b/src/common/component/Notification/useDeviceToken.js
@@ -9,7 +9,7 @@ const useDeviceToken = (vapidKey) => {
     const messaging = getMessaging(initializeApp(firebaseConfig));
 
     getToken(messaging, {
-      vapidKey,
+      vapidKey
     })
       .then((currentToken) => {
         if (currentToken) {
@@ -19,9 +19,7 @@ const useDeviceToken = (vapidKey) => {
           // Perform any other neccessary action with the token
         } else {
           // Show permission request UI
-          console.log(
-            "No registration token available. Request permission to generate one."
-          );
+          console.log("No registration token available. Request permission to generate one.");
         }
       })
       .catch((err) => {
diff --git a/src/common/component/Profile/index.js b/src/common/component/Profile/index.js
index 126dc4d1..a68b2718 100644
--- a/src/common/component/Profile/index.js
+++ b/src/common/component/Profile/index.js
@@ -21,12 +21,12 @@ export default function Profile({ uid = null, type = "embed", cid = null }) {
     removeFromChannel,
     canRemoveFromChannel,
     canRemove,
-    removeUser,
+    removeUser
   } = useContactOperation({ uid, cid });
 
   const { data } = useSelector((store) => {
     return {
-      data: store.contacts.byId[uid],
+      data: store.contacts.byId[uid]
     };
   });
 
@@ -35,13 +35,12 @@ export default function Profile({ uid = null, type = "embed", cid = null }) {
   const {
     name,
     email,
-    avatar,
+    avatar
     // introduction = "This guy has nothing to introduce",
   } = data;
   const enableCall = type == "card" && canCall;
   const canRemoveFromServer = type == "embed" && canRemove;
-  const hasMore =
-    enableCall || email || canRemoveFromChannel || canRemoveFromServer;
+  const hasMore = enableCall || email || canRemoveFromChannel || canRemoveFromServer;
   return (
     <StyledWrapper className={type}>
       <Avatar className="avatar" url={avatar} name={name} />
diff --git a/src/common/component/Profile/styled.js b/src/common/component/Profile/styled.js
index 7801beb3..2f1855ee 100644
--- a/src/common/component/Profile/styled.js
+++ b/src/common/component/Profile/styled.js
@@ -86,8 +86,7 @@ const StyledWrapper = styled.div`
     padding: 16px;
     width: 280px;
     background: #ffffff;
-    box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
-      0px 10px 10px rgba(31, 41, 55, 0.04);
+    box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1), 0px 10px 10px rgba(31, 41, 55, 0.04);
     border-radius: 6px;
     .icons {
       padding-bottom: 2px;
diff --git a/src/common/component/ReactionItem.js b/src/common/component/ReactionItem.js
index 91b3034b..ee063385 100644
--- a/src/common/component/ReactionItem.js
+++ b/src/common/component/ReactionItem.js
@@ -15,7 +15,7 @@ const Emojis = {
   "🚀": <EmojiRocket className="emoji" />,
   "❤️": <EmojiHeart className="emoji" />,
   "🙁": <EmojiUnhappy className="emoji" />,
-  "🎉": <EmojiCelebrate className="emoji" />,
+  "🎉": <EmojiCelebrate className="emoji" />
 };
 
 export default function ReactionItem({ native = "" }) {
diff --git a/src/common/component/SaveTip.js b/src/common/component/SaveTip.js
index 73d35646..9532b8f1 100644
--- a/src/common/component/SaveTip.js
+++ b/src/common/component/SaveTip.js
@@ -13,8 +13,7 @@ const StyledWrapper = styled.div`
   background: #fff;
   /* gap: 20px; */
   border: 1px solid #e5e7eb;
-  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
   border-radius: 25px;
   .txt {
     padding: 8px;
diff --git a/src/common/component/Search.js b/src/common/component/Search.js
index 8f840e03..62f55c96 100644
--- a/src/common/component/Search.js
+++ b/src/common/component/Search.js
@@ -44,12 +44,7 @@ export default function Search() {
         <input placeholder="Search..." className="input" />
       </div>
       <Tooltip tip="More" placement="bottom">
-        <Tippy
-          interactive
-          placement="bottom-end"
-          trigger="click"
-          content={<AddEntriesMenu />}
-        >
+        <Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
           <img src={addIcon} alt="add icon" className="add" />
         </Tippy>
       </Tooltip>
diff --git a/src/common/component/Send/EmojiPicker.js b/src/common/component/Send/EmojiPicker.js
index ae92ad5d..5f321bd7 100644
--- a/src/common/component/Send/EmojiPicker.js
+++ b/src/common/component/Send/EmojiPicker.js
@@ -45,8 +45,7 @@ export default function EmojiPicker({ selectEmoji }) {
       const clickEle = evt.target;
       const ignore =
         (clickEle.nodeName == "svg" && clickEle.dataset.emoji == "toggler") ||
-        (clickEle.nodeName == "path" &&
-          clickEle.parentElement.dataset.emoji == "toggler");
+        (clickEle.nodeName == "path" && clickEle.parentElement.dataset.emoji == "toggler");
       // console.log("outside click", clickEle, clickEle.parentElement, ignore);
       if (ignore) return;
       // if(clickEle)
@@ -60,11 +59,7 @@ export default function EmojiPicker({ selectEmoji }) {
         <div ref={ref} className={`picker ${visible ? "visible" : ""}`}>
           <Picker onSelect={handleSelect} />
         </div>
-        <SmileIcon
-          data-emoji="toggler"
-          className="emoji"
-          onClick={togglePickerVisible}
-        />
+        <SmileIcon data-emoji="toggler" className="emoji" onClick={togglePickerVisible} />
       </Styled>
     </Tooltip>
   );
diff --git a/src/common/component/Send/Replying.js b/src/common/component/Send/Replying.js
index 30a1fd54..5fc84451 100644
--- a/src/common/component/Send/Replying.js
+++ b/src/common/component/Send/Replying.js
@@ -57,11 +57,7 @@ const Styled = styled.div`
         width: 100%;
         height: 100%;
         content: "";
-        background: linear-gradient(
-          180deg,
-          rgba(255, 255, 255, 0) 63.54%,
-          #f3f4f6 93.09%
-        );
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 63.54%, #f3f4f6 93.09%);
       }
     }
     .icon {
@@ -87,15 +83,11 @@ const renderContent = (data) => {
   let res = null;
   switch (content_type) {
     case ContentTypes.text:
-      res = reactStringReplace(
-        content,
-        /(\s{1}@[0-9]+\s{1})/g,
-        (match, idx) => {
-          console.log("match", match);
-          const uid = match.trim().slice(1);
-          return <Mention popover={false} key={idx} uid={uid} />;
-        }
-      );
+      res = reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
+        console.log("match", match);
+        const uid = match.trim().slice(1);
+        return <Mention popover={false} key={idx} uid={uid} />;
+      });
       break;
     case ContentTypes.markdown:
       res = (
diff --git a/src/common/component/Send/Toolbar.js b/src/common/component/Send/Toolbar.js
index adb46fcc..aac89443 100644
--- a/src/common/component/Send/Toolbar.js
+++ b/src/common/component/Send/Toolbar.js
@@ -47,7 +47,7 @@ export default function Toolbar({
   toggleMode,
   mode,
   to,
-  context,
+  context
 }) {
   const { addStageFile } = useUploadFile({ context, id: to });
   const fileInputRef = useRef(null);
diff --git a/src/common/component/Send/UploadFileList/index.js b/src/common/component/Send/UploadFileList/index.js
index 176cedda..6c93e3e5 100644
--- a/src/common/component/Send/UploadFileList/index.js
+++ b/src/common/component/Send/UploadFileList/index.js
@@ -13,7 +13,7 @@ export default function UploadFileList({ context = "", id = null }) {
   const [editInfo, setEditInfo] = useState(null);
   const { stageFiles, updateStageFile, removeStageFile } = useUploadFile({
     context,
-    id,
+    id
   });
   const toggleModalVisible = (info) => {
     setEditInfo((prev) => (prev ? null : info));
@@ -50,19 +50,12 @@ export default function UploadFileList({ context = "", id = null }) {
           return (
             <li className="file" key={url}>
               <div className="preview">
-                {type.startsWith("image") ? (
-                  <img src={url} alt="image" />
-                ) : (
-                  getFileIcon(type, name)
-                )}
+                {type.startsWith("image") ? <img src={url} alt="image" /> : getFileIcon(type, name)}
               </div>
               <h4 className="name">{name}</h4>
               <span className="size">{formatBytes(size)}</span>
               <ul className="opts">
-                <li
-                  className="opt edit"
-                  onClick={handleOpenEditModal.bind(null, idx)}
-                >
+                <li className="opt edit" onClick={handleOpenEditModal.bind(null, idx)}>
                   <EditIcon />
                 </li>
                 <li
diff --git a/src/common/component/Send/index.js b/src/common/component/Send/index.js
index 1f9453b6..534963cb 100644
--- a/src/common/component/Send/index.js
+++ b/src/common/component/Send/index.js
@@ -18,12 +18,12 @@ import useUploadFile from "../../hook/useUploadFile";
 
 const Modes = {
   text: "text",
-  markdown: "markdown",
+  markdown: "markdown"
 };
 function Send({
   // 发给谁，或者是channel，或者是user
   context = "channel",
-  id = "",
+  id = ""
 }) {
   const { resetStageFiles } = useUploadFile({ context, id });
   const { getDraft, getUpdateDraft } = useDraft({ context, id });
@@ -40,7 +40,7 @@ function Send({
     uploadFiles,
     channelsData,
     contactsData,
-    uids,
+    uids
   } = useSelector((store) => {
     return {
       channelsData: store.channels.byId,
@@ -49,7 +49,7 @@ function Send({
       mode: store.ui.inputMode,
       from_uid: store.authData.uid,
       replying_mid: store.message.replying[`${context}_${id}`],
-      uploadFiles: store.ui.uploadFiles[`${context}_${id}`],
+      uploadFiles: store.ui.uploadFiles[`${context}_${id}`]
     };
   });
   const { sendMessage } = useSendMessage({ context, from: from_uid, to: id });
@@ -83,7 +83,7 @@ function Send({
           type: content_type,
           content,
           from_uid,
-          properties,
+          properties
         });
       }
     }
@@ -101,10 +101,10 @@ function Send({
             content_type: type,
             name,
             size,
-            local_id: ts,
+            local_id: ts
           },
           from_uid,
-          sending: true,
+          sending: true
         };
         addLocalFileMesage(tmpMsg);
       });
@@ -118,7 +118,7 @@ function Send({
       type: "markdown",
       content,
       from_uid,
-      properties: { local_id: +new Date() },
+      properties: { local_id: +new Date() }
     });
   };
   const toggleMode = () => {
@@ -127,24 +127,17 @@ function Send({
   const toggleMarkdownFullscreen = () => {
     setMarkdownFullscreen((prev) => !prev);
   };
-  const name =
-    context == "channel" ? channelsData[id]?.name : contactsData[id]?.name;
+  const name = context == "channel" ? channelsData[id]?.name : contactsData[id]?.name;
   const placeholder = `Send to ${ChatPrefixs[context]}${name} `;
   const members =
-    context == "channel"
-      ? channelsData[id]?.is_public
-        ? uids
-        : channelsData[id]?.members
-      : [];
+    context == "channel" ? (channelsData[id]?.is_public ? uids : channelsData[id]?.members) : [];
   return (
     <StyledSend
       className={`send ${mode} ${markdownFullscreen ? "fullscreen" : ""} ${
         replying_mid ? "reply" : ""
       } ${context}`}
     >
-      {replying_mid && (
-        <Replying context={context} mid={replying_mid} id={id} />
-      )}
+      {replying_mid && <Replying context={context} mid={replying_mid} id={id} />}
       {mode == Modes.text && <UploadFileList context={context} id={id} />}
 
       <div className={`send_box ${mode}`}>
diff --git a/src/common/component/Send/useFiles.js b/src/common/component/Send/useFiles.js
index abd1f672..6c501e62 100644
--- a/src/common/component/Send/useFiles.js
+++ b/src/common/component/Send/useFiles.js
@@ -8,6 +8,6 @@ export default function useFiles(initialFiles = []) {
   return {
     files,
     setFiles,
-    resetFiles,
+    resetFiles
   };
 }
diff --git a/src/common/component/Server.js b/src/common/component/Server.js
index ac6f95a5..a4f61dae 100644
--- a/src/common/component/Server.js
+++ b/src/common/component/Server.js
@@ -57,7 +57,7 @@ export default function Server() {
   const { server, userCount } = useSelector((store) => {
     return {
       userCount: store.contacts.ids.length,
-      server: store.server,
+      server: store.server
     };
   });
   // console.log("server info", server);
@@ -78,12 +78,7 @@ export default function Server() {
         </div>
       </NavLink>
       <Tooltip tip="More" placement="bottom">
-        <Tippy
-          interactive
-          placement="bottom-end"
-          trigger="click"
-          content={<AddEntriesMenu />}
-        >
+        <Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
           <img src={addIcon} alt="add icon" className="add" />
         </Tippy>
       </Tooltip>
diff --git a/src/common/component/StyledSettingContainer.js b/src/common/component/StyledSettingContainer.js
index 7b04eee1..5439097b 100644
--- a/src/common/component/StyledSettingContainer.js
+++ b/src/common/component/StyledSettingContainer.js
@@ -87,7 +87,7 @@ export default function StyledSettingContainer({
   navs = [],
   dangers = [],
   nav,
-  children,
+  children
 }) {
   const { pathname } = useLocation();
   return (
@@ -101,10 +101,7 @@ export default function StyledSettingContainer({
             <ul key={title} data-title={title} className="items">
               {items.map(({ name, title }) => {
                 return (
-                  <li
-                    key={name}
-                    className={`item ${name == nav?.name ? "curr" : ""}`}
-                  >
+                  <li key={name} className={`item ${name == nav?.name ? "curr" : ""}`}>
                     <NavLink to={`${pathname}?nav=${name}`}>{title}</NavLink>
                   </li>
                 );
diff --git a/src/common/component/TippyDefault.js b/src/common/component/TippyDefault.js
index d25b2533..d551a0d3 100644
--- a/src/common/component/TippyDefault.js
+++ b/src/common/component/TippyDefault.js
@@ -4,7 +4,7 @@ export default function TippyDefault() {
   tippy.setDefaultProps({
     duration: 0,
     delay: [0, 0],
-    plugins: [followCursor],
+    plugins: [followCursor]
   });
   return null;
 }
diff --git a/src/common/component/Tooltip.js b/src/common/component/Tooltip.js
index 7e5c9866..0e796469 100644
--- a/src/common/component/Tooltip.js
+++ b/src/common/component/Tooltip.js
@@ -10,8 +10,7 @@ const StyledTip = styled.div`
   line-height: 18px;
   color: #1d2939;
   border-radius: var(--br);
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
   &::after {
     background-color: inherit;
     position: absolute;
diff --git a/src/common/component/UploadModal/FileItem.js b/src/common/component/UploadModal/FileItem.js
index 43f4cd2a..f645e8b0 100644
--- a/src/common/component/UploadModal/FileItem.js
+++ b/src/common/component/UploadModal/FileItem.js
@@ -7,9 +7,7 @@ export default function FileItem({ file = null }) {
     if (file) {
       const { type, name } = file;
       if (isTreatAsImage(file)) {
-        setIcon(
-          <img src={URL.createObjectURL(file)} alt="thumb" className="thumb" />
-        );
+        setIcon(<img src={URL.createObjectURL(file)} alt="thumb" className="thumb" />);
         return;
       }
       console.log("file type", type, name);
diff --git a/src/common/component/UploadModal/index.js b/src/common/component/UploadModal/index.js
index 820aa0fe..b07f5c72 100644
--- a/src/common/component/UploadModal/index.js
+++ b/src/common/component/UploadModal/index.js
@@ -8,29 +8,18 @@ import Button from "../styled/Button";
 import StyledWrapper from "./styled";
 import useSendMessage from "../../hook/useSendMessage";
 
-export default function UploadModal({
-  context = "user",
-  sendTo = 0,
-  files = [],
-  closeModal,
-}) {
+export default function UploadModal({ context = "user", sendTo = 0, files = [], closeModal }) {
   const from_uid = useSelector((store) => store.authData.uid);
   const {
     sendMessage,
     isSuccess: sendMessageSuccess,
-    isSending,
+    isSending
   } = useSendMessage({
     context,
     from: from_uid,
-    to: sendTo,
+    to: sendTo
   });
-  const {
-    data,
-    uploadFile,
-    progress,
-    isUploading,
-    isSuccess: uploadSuccess,
-  } = useUploadFile();
+  const { data, uploadFile, progress, isUploading, isSuccess: uploadSuccess } = useUploadFile();
   const handleUpload = () => {
     const file = files[0];
     uploadFile(file);
@@ -42,7 +31,7 @@ export default function UploadModal({
       sendMessage({
         type: "file",
         content: { path },
-        properties: rest,
+        properties: rest
       });
     }
   }, [uploadSuccess, data]);
@@ -65,11 +54,7 @@ export default function UploadModal({
             <Button className="cancel" onClick={closeModal}>
               Cancel
             </Button>
-            <Button
-              className="upload"
-              disabled={sending}
-              onClick={handleUpload}
-            >
+            <Button className="upload" disabled={sending} onClick={handleUpload}>
               {sending ? `Uploading (${progress}%)` : `Upload`}
             </Button>
           </>
diff --git a/src/common/component/UserGuide/index.js b/src/common/component/UserGuide/index.js
index 95db3489..7554921d 100644
--- a/src/common/component/UserGuide/index.js
+++ b/src/common/component/UserGuide/index.js
@@ -11,8 +11,7 @@ const Styled = styled.div`
   padding: 24px;
   background: #06aed4;
   border-radius: var(--br);
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
   color: #ffffff;
   min-width: 362px;
   .title {
@@ -57,16 +56,9 @@ const OverrideTippyArrowColor = createGlobalStyle`
 }
 `;
 import steps from "./steps";
-export default function UserGuide({
-  step = 1,
-  placement = "right-start",
-  delay = null,
-  children,
-}) {
+export default function UserGuide({ step = 1, placement = "right-start", delay = null, children }) {
   const dispatch = useDispatch();
-  const { visible, step: reduxStep } = useSelector(
-    (store) => store.ui.userGuide
-  );
+  const { visible, step: reduxStep } = useSelector((store) => store.ui.userGuide);
   const currStep = steps[step - 1];
   const isLastStep = steps.length == step;
   //   if (!visible) return children;
diff --git a/src/common/component/UserGuide/steps.js b/src/common/component/UserGuide/steps.js
index 66b59791..a3a62ba2 100644
--- a/src/common/component/UserGuide/steps.js
+++ b/src/common/component/UserGuide/steps.js
@@ -1,23 +1,23 @@
 const steps = [
   {
     title: "Step 1",
-    description: "hello world 1",
+    description: "hello world 1"
   },
   {
     title: "Step 2",
-    description: "hello world 1",
+    description: "hello world 1"
   },
   {
     title: "Step 3",
-    description: "hello world 1",
+    description: "hello world 1"
   },
   {
     title: "Step 4",
-    description: "hello world 1",
+    description: "hello world 1"
   },
   {
     title: "Step 5",
-    description: "hello world 1",
-  },
+    description: "hello world 1"
+  }
 ];
 export default steps;
diff --git a/src/common/component/styled/Input.js b/src/common/component/styled/Input.js
index 481d9f9a..943015a2 100644
--- a/src/common/component/styled/Input.js
+++ b/src/common/component/styled/Input.js
@@ -65,39 +65,22 @@ const StyledInput = styled.input`
   }
 `;
 
-export default function Input({
-  type = "text",
-  prefix = "",
-  className,
-  ...rest
-}) {
+export default function Input({ type = "text", prefix = "", className, ...rest }) {
   const [inputType, setInputType] = useState(type);
   const togglePasswordVisible = () => {
     setInputType((prev) => (prev == "password" ? "text" : "password"));
   };
   return type == "password" ? (
     <StyledWrapper className={className}>
-      <StyledInput
-        type={inputType}
-        className={`inner ${className}`}
-        {...rest}
-      />
+      <StyledInput type={inputType} className={`inner ${className}`} {...rest} />
       <div className="view" onClick={togglePasswordVisible}>
-        {inputType == "password" ? (
-          <HiEyeOff color="#78787c" />
-        ) : (
-          <HiEye color="#78787c" />
-        )}
+        {inputType == "password" ? <HiEyeOff color="#78787c" /> : <HiEye color="#78787c" />}
       </div>
     </StyledWrapper>
   ) : prefix ? (
     <StyledWrapper className={className}>
       <span className="prefix">{prefix}</span>
-      <StyledInput
-        className={`inner ${className}`}
-        type={inputType}
-        {...rest}
-      />
+      <StyledInput className={`inner ${className}`} type={inputType} {...rest} />
     </StyledWrapper>
   ) : (
     <StyledInput type={inputType} className={className} {...rest} />
diff --git a/src/common/component/styled/Menu.js b/src/common/component/styled/Menu.js
index 3037bfac..6bbd2868 100644
--- a/src/common/component/styled/Menu.js
+++ b/src/common/component/styled/Menu.js
@@ -5,8 +5,7 @@ const StyledMenu = styled.ul`
   gap: 2px;
   padding: 4px;
   background-color: #fff;
-  box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
-    0px 10px 10px rgba(31, 41, 55, 0.04);
+  box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1), 0px 10px 10px rgba(31, 41, 55, 0.04);
   border-radius: 12px;
   min-width: 200px;
   .item {
diff --git a/src/common/component/styled/Radio.js b/src/common/component/styled/Radio.js
index ef03f715..4dc67797 100644
--- a/src/common/component/styled/Radio.js
+++ b/src/common/component/styled/Radio.js
@@ -3,89 +3,89 @@ import styled from "styled-components";
 import { nanoid } from "@reduxjs/toolkit";
 
 const StyledForm = styled.form`
- > .option {
-  &:not(:last-child) {
-   margin-bottom: 8px;
-  }
-
-  > input[type="radio"] {
-   display: none;
-
-   & + .box {
-    width: 512px;
-    background: #ffffff;
-    border: 1px solid #d0d5dd;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-    border-radius: 8px;
-    transition: all ease-in-out 250ms;
-
-    & > label {
-     display: flex;
-     flex-direction: row;
-     align-items: center;
-     font-weight: 400;
-     font-size: 16px;
-     line-height: 24px;
-     color: #667085;
-     cursor: pointer;
-     user-select: none;
-     transition: all ease-in-out 250ms;
-
-     &:before {
-      content: "";
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      border-radius: 8px;
-      background: #ffffff;
-      box-shadow: inset 0 0 0 4px #ffffff;
-      border: 1px solid #d0d5dd;
-      margin: 14px 8px 14px 14px;
-      transition: all ease-in-out 500ms;
-     }
+  > .option {
+    &:not(:last-child) {
+      margin-bottom: 8px;
     }
-   }
 
-   &:checked + .box {
-    background: #22ccee;
-    border: 1px solid #d0d5dd;
+    > input[type="radio"] {
+      display: none;
 
-    & > label {
-     color: #ffffff;
+      & + .box {
+        width: 512px;
+        background: #ffffff;
+        border: 1px solid #d0d5dd;
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+        transition: all ease-in-out 250ms;
 
-     &:before {
-      background: #ffffff;
-      box-shadow: inset 0 0 0 4px #22ccee;
-      border: 1px solid #ffffff;
-     }
+        & > label {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 24px;
+          color: #667085;
+          cursor: pointer;
+          user-select: none;
+          transition: all ease-in-out 250ms;
+
+          &:before {
+            content: "";
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            border-radius: 8px;
+            background: #ffffff;
+            box-shadow: inset 0 0 0 4px #ffffff;
+            border: 1px solid #d0d5dd;
+            margin: 14px 8px 14px 14px;
+            transition: all ease-in-out 500ms;
+          }
+        }
+      }
+
+      &:checked + .box {
+        background: #22ccee;
+        border: 1px solid #d0d5dd;
+
+        & > label {
+          color: #ffffff;
+
+          &:before {
+            background: #ffffff;
+            box-shadow: inset 0 0 0 4px #22ccee;
+            border: 1px solid #ffffff;
+          }
+        }
+      }
     }
-   }
   }
- }
 `;
 
 export default function Radio({ options, value = undefined, onChange = undefined }) {
- const [innerValue, setInnerValue] = useState(0);
- const id = useRef(nanoid());
+  const [innerValue, setInnerValue] = useState(0);
+  const id = useRef(nanoid());
 
- return (
-  <StyledForm>
-   {options.map((item, index) => (
-    <div className="option" key={index}>
-     <input
-      type="radio"
-      checked={(value !== undefined ? value : innerValue) === index}
-      onChange={() => {
-       value === undefined && setInnerValue(index);
-       onChange !== null && onChange(index);
-      }}
-      id={`${id.current}-${index}`}
-     />
-     <div className="box">
-      <label htmlFor={`${id.current}-${index}`}>{item}</label>
-     </div>
-    </div>
-   ))}
-  </StyledForm>
- );
+  return (
+    <StyledForm>
+      {options.map((item, index) => (
+        <div className="option" key={index}>
+          <input
+            type="radio"
+            checked={(value !== undefined ? value : innerValue) === index}
+            onChange={() => {
+              value === undefined && setInnerValue(index);
+              onChange !== null && onChange(index);
+            }}
+            id={`${id.current}-${index}`}
+          />
+          <div className="box">
+            <label htmlFor={`${id.current}-${index}`}>{item}</label>
+          </div>
+        </div>
+      ))}
+    </StyledForm>
+  );
 }
diff --git a/src/common/component/styled/Select.js b/src/common/component/styled/Select.js
index 3a599591..51ca93ee 100644
--- a/src/common/component/styled/Select.js
+++ b/src/common/component/styled/Select.js
@@ -48,9 +48,7 @@ export default function Select({ options = [], updateSelect = null }) {
           {options.map(({ title, value, selected, underline }) => {
             return (
               <li
-                onClick={
-                  selected ? null : handleSelect.bind(null, { title, value })
-                }
+                onClick={selected ? null : handleSelect.bind(null, { title, value })}
                 className={`item sb ${underline ? "underline" : ""}`}
                 data-disabled={selected}
                 key={value}
diff --git a/src/common/hook/useConfig.js b/src/common/hook/useConfig.js
index 88c22e71..fc6a4fbb 100644
--- a/src/common/hook/useConfig.js
+++ b/src/common/hook/useConfig.js
@@ -9,58 +9,43 @@ import {
   useUpdateLoginConfigMutation,
   useUpdateSMTPConfigMutation,
   useUpdateAgoraConfigMutation,
-  useUpdateFirebaseConfigMutation,
+  useUpdateFirebaseConfigMutation
 } from "../../app/services/server";
 export default function useConfig(config = "smtp") {
   const [changed, setChanged] = useState(false);
   const [values, setValues] = useState({});
   const { data: Login, refetch: refetchLogin } = useGetLoginConfigQuery();
-  const [
-    updateLoginConfig,
-    { isSuccess: LoginUpdated },
-  ] = useUpdateLoginConfigMutation();
+  const [updateLoginConfig, { isSuccess: LoginUpdated }] = useUpdateLoginConfigMutation();
   const { data: SMTP, refetch: refetchSMTP } = useGetSMTPConfigQuery();
-  const [
-    updateSMTPConfig,
-    { isSuccess: SMTPUpdated },
-  ] = useUpdateSMTPConfigMutation();
+  const [updateSMTPConfig, { isSuccess: SMTPUpdated }] = useUpdateSMTPConfigMutation();
   const { data: Agora, refetch: refetchAgora } = useGetAgoraConfigQuery();
-  const [
-    updateAgoraConfig,
-    { isSuccess: AgoraUpdated },
-  ] = useUpdateAgoraConfigMutation();
-  const {
-    data: Firebase,
-    refetch: refetchFirebase,
-  } = useGetFirebaseConfigQuery();
-  const [
-    updateFirebaseConfig,
-    { isSuccess: FirebaseUpdated },
-  ] = useUpdateFirebaseConfigMutation();
+  const [updateAgoraConfig, { isSuccess: AgoraUpdated }] = useUpdateAgoraConfigMutation();
+  const { data: Firebase, refetch: refetchFirebase } = useGetFirebaseConfigQuery();
+  const [updateFirebaseConfig, { isSuccess: FirebaseUpdated }] = useUpdateFirebaseConfigMutation();
 
   const datas = {
     login: Login,
     smtp: SMTP,
     agora: Agora,
-    firebase: Firebase,
+    firebase: Firebase
   };
   const updateFns = {
     login: updateLoginConfig,
     smtp: updateSMTPConfig,
     agora: updateAgoraConfig,
-    firebase: updateFirebaseConfig,
+    firebase: updateFirebaseConfig
   };
   const refetchs = {
     smtp: refetchSMTP,
     agora: refetchAgora,
     firebase: refetchFirebase,
-    login: refetchLogin,
+    login: refetchLogin
   };
   const updateds = {
     login: LoginUpdated,
     smtp: SMTPUpdated,
     agora: AgoraUpdated,
-    firebase: FirebaseUpdated,
+    firebase: FirebaseUpdated
   };
   const data = datas[config];
   const updateConfig = updateFns[config];
@@ -102,6 +87,6 @@ export default function useConfig(config = "smtp") {
     updateConfig,
     values,
     setValues,
-    toggleEnable,
+    toggleEnable
   };
 }
diff --git a/src/common/hook/useContactOperation.js b/src/common/hook/useContactOperation.js
index b3171282..85ac6130 100644
--- a/src/common/hook/useContactOperation.js
+++ b/src/common/hook/useContactOperation.js
@@ -13,14 +13,8 @@ export default function useContactOperation({ uid, cid }) {
   const [passedUid, setPassedUid] = useState(undefined);
   const { values: agoraConfig } = useConfig("agora");
   const isUserDetailPath = useMatch(`/contacts/${uid}`);
-  const [
-    removeUser,
-    { isSuccess: removeUserSuccess },
-  ] = useLazyDeleteContactQuery();
-  const [
-    removeInChannel,
-    { isSuccess: removeSuccess },
-  ] = useRemoveMembersMutation();
+  const [removeUser, { isSuccess: removeUserSuccess }] = useLazyDeleteContactQuery();
+  const [removeInChannel, { isSuccess: removeSuccess }] = useRemoveMembersMutation();
   const navigateTo = useNavigate();
   const { copy } = useCopy();
   const { user, channel, loginUid, isAdmin } = useSelector((store) => {
@@ -28,7 +22,7 @@ export default function useContactOperation({ uid, cid }) {
       user: store.contacts.byId[uid],
       channel: store.channels.byId[cid],
       loginUid: store.authData.uid,
-      isAdmin: store.contacts.byId[store.authData.uid]?.is_admin,
+      isAdmin: store.contacts.byId[store.authData.uid]?.is_admin
     };
   });
   useEffect(() => {
@@ -81,6 +75,6 @@ export default function useContactOperation({ uid, cid }) {
     canCopyEmail: !!user?.email,
     copyEmail,
     canCall,
-    call,
+    call
   };
 }
diff --git a/src/common/hook/useContextMenu.js b/src/common/hook/useContextMenu.js
index 7830ab38..9beceb80 100644
--- a/src/common/hook/useContextMenu.js
+++ b/src/common/hook/useContextMenu.js
@@ -49,6 +49,6 @@ export default function useContextMenu(placement = "right-start") {
     offset,
     visible,
     hideContextMenu,
-    handleContextMenuEvent,
+    handleContextMenuEvent
   };
 }
diff --git a/src/common/hook/useCopy.js b/src/common/hook/useCopy.js
index ee1168da..999c76e7 100644
--- a/src/common/hook/useCopy.js
+++ b/src/common/hook/useCopy.js
@@ -20,9 +20,7 @@ const useCopy = (config) => {
     el.style.left = "-9999px";
     document.body.appendChild(el);
     const selected =
-      document.getSelection().rangeCount > 0
-        ? document.getSelection().getRangeAt(0)
-        : false;
+      document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
     el.select();
     const success = document.execCommand("copy");
     document.body.removeChild(el);
diff --git a/src/common/hook/useDeleteMessage.js b/src/common/hook/useDeleteMessage.js
index 3542ba53..1ac5b33f 100644
--- a/src/common/hook/useDeleteMessage.js
+++ b/src/common/hook/useDeleteMessage.js
@@ -6,11 +6,11 @@ export default function useDeleteMessage() {
   const { loginUser, messageData } = useSelector((store) => {
     return {
       messageData: store.message,
-      loginUser: store.contacts.byId[store.authData.uid],
+      loginUser: store.contacts.byId[store.authData.uid]
     };
   });
   const [
-    remove,
+    remove
     // { isError, isLoading, isSuccess },
   ] = useLazyDeleteMessageQuery();
   const deleteMessage = async (mids) => {
@@ -40,6 +40,6 @@ export default function useDeleteMessage() {
   return {
     canDelete,
     isDeleting: deleting,
-    deleteMessage,
+    deleteMessage
   };
 }
diff --git a/src/common/hook/useDraft.js b/src/common/hook/useDraft.js
index 0c3b0049..c17d7bf0 100644
--- a/src/common/hook/useDraft.js
+++ b/src/common/hook/useDraft.js
@@ -7,7 +7,7 @@ export default function useDraft({ context = "", id = "" }) {
   const { draftMarkdown, draftMixedText } = useSelector((store) => {
     return {
       draftMarkdown: store.ui.draftMarkdown,
-      draftMixedText: store.ui.draftMixedText,
+      draftMixedText: store.ui.draftMixedText
     };
   });
 
diff --git a/src/common/hook/useFavMessage.js b/src/common/hook/useFavMessage.js
index 60429b6b..dea8ce9f 100644
--- a/src/common/hook/useFavMessage.js
+++ b/src/common/hook/useFavMessage.js
@@ -1,16 +1,13 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import {
-  useLazyRemoveFavoriteQuery,
-  useFavoriteMessageMutation,
-} from "../../app/services/message";
+import { useLazyRemoveFavoriteQuery, useFavoriteMessageMutation } from "../../app/services/message";
 export default function useFavMessage({ cid = null, uid = null }) {
   const [removeFav] = useLazyRemoveFavoriteQuery();
   const [addFav] = useFavoriteMessageMutation();
   const [favorites, setFavorites] = useState([]);
   const { favs = [] } = useSelector((store) => {
     return {
-      favs: store.favorites,
+      favs: store.favorites
     };
   });
   const addFavorite = async (mid = []) => {
@@ -56,6 +53,6 @@ export default function useFavMessage({ cid = null, uid = null }) {
     isFavorited,
     addFavorite,
     removeFavorite,
-    favorites,
+    favorites
   };
 }
diff --git a/src/common/hook/useFilteredChannels.js b/src/common/hook/useFilteredChannels.js
index 88014b0b..f941294f 100644
--- a/src/common/hook/useFilteredChannels.js
+++ b/src/common/hook/useFilteredChannels.js
@@ -23,6 +23,6 @@ export default function useFilteredChannels() {
   return {
     input,
     channels: filteredChannels,
-    updateInput,
+    updateInput
   };
 }
diff --git a/src/common/hook/useFilteredUsers.js b/src/common/hook/useFilteredUsers.js
index 8a24decf..731042c6 100644
--- a/src/common/hook/useFilteredUsers.js
+++ b/src/common/hook/useFilteredUsers.js
@@ -23,6 +23,6 @@ export default function useFilteredUsers() {
   return {
     input,
     contacts: filteredUsers,
-    updateInput,
+    updateInput
   };
 }
diff --git a/src/common/hook/useForwardMessage.js b/src/common/hook/useForwardMessage.js
index 44ce22f1..1bf443d3 100644
--- a/src/common/hook/useForwardMessage.js
+++ b/src/common/hook/useForwardMessage.js
@@ -6,24 +6,14 @@ export default function useForwardMessage() {
   const [forwarding, setForwarding] = useState(false);
   const [
     createArchive,
-    {
-      isError: createArchiveError,
-      isLoading: creatingArchive,
-      isSuccess: createArchiveSuccess,
-    },
+    { isError: createArchiveError, isLoading: creatingArchive, isSuccess: createArchiveSuccess }
   ] = useCreateArchiveMutation();
   const [
     sendChannelMsg,
-    {
-      isLoading: channelSending,
-      isSuccess: channelSuccess,
-      isError: channelError,
-    },
+    { isLoading: channelSending, isSuccess: channelSuccess, isError: channelError }
   ] = useSendChannelMsgMutation();
-  const [
-    sendUserMsg,
-    { isLoading: userSending, isSuccess: userSuccess, isError: userError },
-  ] = useSendMsgMutation();
+  const [sendUserMsg, { isLoading: userSending, isSuccess: userSuccess, isError: userError }] =
+    useSendMsgMutation();
   const forwardMessage = async ({ mids = [], users = [], channels = [] }) => {
     setForwarding(true);
     const { data: archive_id } = await createArchive(mids);
@@ -32,7 +22,7 @@ export default function useForwardMessage() {
         await sendUserMsg({
           type: "archive",
           id: uid,
-          content: archive_id,
+          content: archive_id
           // from_uid: from,
         });
       }
@@ -42,7 +32,7 @@ export default function useForwardMessage() {
         await sendChannelMsg({
           type: "archive",
           id: cid,
-          content: archive_id,
+          content: archive_id
           // from_uid: from,
         });
       }
@@ -54,6 +44,6 @@ export default function useForwardMessage() {
     forwarding,
     isError: channelError || userError || createArchiveError,
     isSending: userSending || channelSending || creatingArchive,
-    isSuccess: channelSuccess || userSuccess || createArchiveSuccess,
+    isSuccess: channelSuccess || userSuccess || createArchiveSuccess
   };
 }
diff --git a/src/common/hook/useGithubAuthConfig.js b/src/common/hook/useGithubAuthConfig.js
index dc891153..ac2173ef 100644
--- a/src/common/hook/useGithubAuthConfig.js
+++ b/src/common/hook/useGithubAuthConfig.js
@@ -2,13 +2,13 @@ import { useState, useEffect } from "react";
 // import toast from "react-hot-toast";
 import {
   useGetGithubAuthConfigQuery,
-  useUpdateGithubAuthConfigMutation,
+  useUpdateGithubAuthConfigMutation
 } from "../../app/services/server";
 export default function useGithubAuthConfig() {
   const [changed, setChanged] = useState(false);
   const [config, setConfig] = useState({});
   const { data } = useGetGithubAuthConfigQuery(undefined, {
-    refetchOnMountOrArgChange: true,
+    refetchOnMountOrArgChange: true
   });
   const [updateAuthConfig, { isSuccess }] = useUpdateGithubAuthConfigMutation();
   useEffect(() => {
@@ -18,9 +18,7 @@ export default function useGithubAuthConfig() {
   }, [data]);
 
   useEffect(() => {
-    setChanged(
-      isSuccess ? false : JSON.stringify(data) !== JSON.stringify(config)
-    );
+    setChanged(isSuccess ? false : JSON.stringify(data) !== JSON.stringify(config));
   }, [data, config, isSuccess]);
   const updateGithubAuthConfig = (obj) => {
     setConfig((prev) => {
@@ -35,6 +33,6 @@ export default function useGithubAuthConfig() {
     changed,
     updateGithubAuthConfig,
     updateGithubAuthConfigToServer,
-    isSuccess,
+    isSuccess
   };
 }
diff --git a/src/common/hook/useGoogleAuthConfig.js b/src/common/hook/useGoogleAuthConfig.js
index 70aebfd8..a2361221 100644
--- a/src/common/hook/useGoogleAuthConfig.js
+++ b/src/common/hook/useGoogleAuthConfig.js
@@ -2,18 +2,15 @@ import { useState, useEffect } from "react";
 // import toast from "react-hot-toast";
 import {
   useGetGoogleAuthConfigQuery,
-  useUpdateGoogleAuthConfigMutation,
+  useUpdateGoogleAuthConfigMutation
 } from "../../app/services/server";
 export default function useGoogleAuthConfig() {
   const [changed, setChanged] = useState(false);
   const [clientId, setClientId] = useState("");
   const { data } = useGetGoogleAuthConfigQuery(undefined, {
-    refetchOnMountOrArgChange: true,
+    refetchOnMountOrArgChange: true
   });
-  const [
-    updateGoogleAuthConfig,
-    { isSuccess },
-  ] = useUpdateGoogleAuthConfigMutation();
+  const [updateGoogleAuthConfig, { isSuccess }] = useUpdateGoogleAuthConfigMutation();
   useEffect(() => {
     if (data) {
       setClientId(data.client_id);
@@ -36,6 +33,6 @@ export default function useGoogleAuthConfig() {
     updateClientId: setClientId,
     updateClientIdToServer,
     updateGoogleAuthConfig,
-    isSuccess,
+    isSuccess
   };
 }
diff --git a/src/common/hook/useInviteLink.js b/src/common/hook/useInviteLink.js
index 46998a9f..e43379b0 100644
--- a/src/common/hook/useInviteLink.js
+++ b/src/common/hook/useInviteLink.js
@@ -2,23 +2,16 @@ import { useState, useEffect } from "react";
 import useCopy from "./useCopy";
 import {
   useLazyCreateInviteLinkQuery as useCreateServerInviteLinkQuery,
-  useGetSMTPStatusQuery,
+  useGetSMTPStatusQuery
 } from "../../app/services/server";
 import { useLazyCreateInviteLinkQuery as useCreateChannelInviteLinkQuery } from "../../app/services/channel";
 export default function useInviteLink(cid = null) {
   const [finalLink, setFinalLink] = useState("");
-  const {
-    data: SMTPEnabled,
-    isSuccess: smtpStatusFetchSuccess,
-  } = useGetSMTPStatusQuery();
-  const [
-    generateChannelInviteLink,
-    { data: channelInviteLink, isLoading: generatingChannelLink },
-  ] = useCreateChannelInviteLinkQuery();
-  const [
-    generateServerInviteLink,
-    { data: serverInviteLink, isLoading: generatingServerLink },
-  ] = useCreateServerInviteLinkQuery();
+  const { data: SMTPEnabled, isSuccess: smtpStatusFetchSuccess } = useGetSMTPStatusQuery();
+  const [generateChannelInviteLink, { data: channelInviteLink, isLoading: generatingChannelLink }] =
+    useCreateChannelInviteLinkQuery();
+  const [generateServerInviteLink, { data: serverInviteLink, isLoading: generatingServerLink }] =
+    useCreateServerInviteLinkQuery();
   const { copied, copy } = useCopy({ enableToast: false });
   const copyLink = () => {
     copy(finalLink);
@@ -46,11 +39,9 @@ export default function useInviteLink(cid = null) {
   return {
     enableSMTP: SMTPEnabled,
     generating: cid ? generatingChannelLink : generatingServerLink,
-    generateNewLink: cid
-      ? generateChannelInviteLink.bind(null, cid)
-      : genServerLink,
+    generateNewLink: cid ? generateChannelInviteLink.bind(null, cid) : genServerLink,
     link: finalLink,
     linkCopied: copied,
-    copyLink,
+    copyLink
   };
 }
diff --git a/src/common/hook/useLeaveChannel.js b/src/common/hook/useLeaveChannel.js
index 388a629d..294961ce 100644
--- a/src/common/hook/useLeaveChannel.js
+++ b/src/common/hook/useLeaveChannel.js
@@ -1,21 +1,13 @@
 // import React from 'react'
 import { useSelector } from "react-redux";
-import {
-  useUpdateChannelMutation,
-  useLazyLeaveChannelQuery,
-} from "../../app/services/channel";
+import { useUpdateChannelMutation, useLazyLeaveChannelQuery } from "../../app/services/channel";
 export default function useLeaveChannel(cid = null) {
   const { channel, loginUid } = useSelector((store) => {
     return { channel: store.channels.byId[cid], loginUid: store.authData.uid };
   });
-  const [
-    update,
-    { isLoading: transfering, isSuccess: transferSuccess },
-  ] = useUpdateChannelMutation();
-  const [
-    leave,
-    { isLoading: leaving, isSuccess: leaveSuccess },
-  ] = useLazyLeaveChannelQuery();
+  const [update, { isLoading: transfering, isSuccess: transferSuccess }] =
+    useUpdateChannelMutation();
+  const [leave, { isLoading: leaving, isSuccess: leaveSuccess }] = useLazyLeaveChannelQuery();
   const transferOwner = (uid = null) => {
     if (!uid) return;
     update({ id: cid, owner: uid });
@@ -34,6 +26,6 @@ export default function useLeaveChannel(cid = null) {
     leaveSuccess,
     isOwner,
     transfering,
-    transferSuccess,
+    transferSuccess
   };
 }
diff --git a/src/common/hook/useMessageFeed.js b/src/common/hook/useMessageFeed.js
index c5dd80cd..c8eba7b9 100644
--- a/src/common/hook/useMessageFeed.js
+++ b/src/common/hook/useMessageFeed.js
@@ -4,8 +4,7 @@ import { useLazyGetHistoryMessagesQuery } from "../../app/services/channel";
 import { useLazyGetHistoryMessagesQuery as useLazyGetDMHistoryMsg } from "../../app/services/contact";
 
 const getFeedWithPagination = (config) => {
-  const { pageNumber = 1, pageSize = 40, mids = [], isLast = false } =
-    config || {};
+  const { pageNumber = 1, pageSize = 40, mids = [], isLast = false } = config || {};
   const shadowMids = mids.slice(0);
 
   if (shadowMids.length == 0)
@@ -15,7 +14,7 @@ const getFeedWithPagination = (config) => {
       pageCount: 0,
       pageSize,
       pageNumber: 1,
-      ids: [],
+      ids: []
     };
   shadowMids.sort((a, b) => {
     return Number(a) - Number(b);
@@ -34,7 +33,7 @@ const getFeedWithPagination = (config) => {
     pageCount,
     pageSize,
     pageNumber: computedPageNumber,
-    ids,
+    ids
   };
 };
 let curScrollPos = 0;
@@ -48,16 +47,13 @@ export default function useMessageFeed({ context = "channel", id = null }) {
   const [hasMore, setHasMore] = useState(true);
   const [appends, setAppends] = useState([]);
   const [items, setItems] = useState([]);
-  const loadMoreMsgsFromServer =
-    context == "channel" ? loadMoreChannelMsgs : loadMoreDmMsgs;
+  const loadMoreMsgsFromServer = context == "channel" ? loadMoreChannelMsgs : loadMoreDmMsgs;
   const { mids, messageData, loginUid } = useSelector((store) => {
     return {
       loginUid: store.authData.uid,
       mids:
-        context == "channel"
-          ? store.channelMessage[id] || []
-          : store.userMessage.byId[id] || [],
-      messageData: store.message,
+        context == "channel" ? store.channelMessage[id] || [] : store.userMessage.byId[id] || [],
+      messageData: store.message
     };
   });
   useEffect(() => {
@@ -69,12 +65,9 @@ export default function useMessageFeed({ context = "channel", id = null }) {
   }, [context, id]);
   useEffect(() => {
     if (items.length) {
-      containerRef.current = document.querySelector(
-        `#RUSTCHAT_FEED_${context}_${id}`
-      );
+      containerRef.current = document.querySelector(`#RUSTCHAT_FEED_${context}_${id}`);
       if (containerRef.current) {
-        const newScroll =
-          containerRef.current.scrollHeight - containerRef.current.clientHeight;
+        const newScroll = containerRef.current.scrollHeight - containerRef.current.clientHeight;
         containerRef.current.scrollTop = curScrollPos + (newScroll - oldScroll);
       }
     }
@@ -88,7 +81,7 @@ export default function useMessageFeed({ context = "channel", id = null }) {
       //   初次
       const pageInfo = getFeedWithPagination({
         mids: serverMids,
-        isLast: true,
+        isLast: true
       });
       console.log("pull up 2", pageInfo);
       pageRef.current = pageInfo;
@@ -111,8 +104,7 @@ export default function useMessageFeed({ context = "channel", id = null }) {
         if (container) {
           const msgFromSelf = loginUid == messageData[newestMsgId]?.from_uid;
           const scrollDistance =
-            container.scrollHeight -
-            (container.offsetHeight + container.scrollTop);
+            container.scrollHeight - (container.offsetHeight + container.scrollTop);
           console.log("scrollDistance", msgFromSelf, scrollDistance);
           if (msgFromSelf) {
             container.scrollTop = container.scrollHeight;
@@ -133,7 +125,7 @@ export default function useMessageFeed({ context = "channel", id = null }) {
       const [firstMid] = currPageInfo.ids;
       const { data: newList } = await loadMoreMsgsFromServer({
         mid: firstMid,
-        id,
+        id
       });
       if (newList.length == 0) {
         setHasMore(false);
@@ -145,13 +137,13 @@ export default function useMessageFeed({ context = "channel", id = null }) {
       // 初始化
       pageInfo = getFeedWithPagination({
         mids,
-        isLast: true,
+        isLast: true
       });
     } else {
       const prevPageNumber = currPageInfo.pageNumber - 1;
       pageInfo = getFeedWithPagination({
         mids,
-        pageNumber: prevPageNumber,
+        pageNumber: prevPageNumber
       });
     }
     pageRef.current = pageInfo;
@@ -177,6 +169,6 @@ export default function useMessageFeed({ context = "channel", id = null }) {
     hasMore,
     pullUp,
     pullDown,
-    list: items,
+    list: items
   };
 }
diff --git a/src/common/hook/useNormalizeMessage.js b/src/common/hook/useNormalizeMessage.js
index 690cc303..4d091ab6 100644
--- a/src/common/hook/useNormalizeMessage.js
+++ b/src/common/hook/useNormalizeMessage.js
@@ -4,10 +4,8 @@ import { useLazyGetArchiveMessageQuery } from "../../app/services/message";
 export default function useNormalizeMessage() {
   const [filePath, setFilePath] = useState(null);
   const [normalizedMessages, setNormalizedMessages] = useState(null);
-  const [
-    getArchiveMessage,
-    { data, isError, isLoading, isSuccess },
-  ] = useLazyGetArchiveMessageQuery();
+  const [getArchiveMessage, { data, isError, isLoading, isSuccess }] =
+    useLazyGetArchiveMessageQuery();
   useEffect(() => {
     if (data && isSuccess) {
       const msgs = normalizeArchiveData(data, filePath);
@@ -28,6 +26,6 @@ export default function useNormalizeMessage() {
     messages: normalizedMessages,
     isError,
     isLoading,
-    isSuccess,
+    isSuccess
   };
 }
diff --git a/src/common/hook/useNotification.js b/src/common/hook/useNotification.js
index efaffe10..9a70d85a 100644
--- a/src/common/hook/useNotification.js
+++ b/src/common/hook/useNotification.js
@@ -1,8 +1,7 @@
 import { useEffect, useState } from "react";
 // import { useNavigate } from "react-router-dom";
 const isSafariBrowser = () =>
-  navigator.userAgent.indexOf("Safari") > -1 &&
-  navigator.userAgent.indexOf("Chrome") <= -1;
+  navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") <= -1;
 export default function useNotification() {
   // const navigate = useNavigate();
   // granted default denied  /
@@ -17,18 +16,13 @@ export default function useNotification() {
     };
     document.addEventListener("visibilitychange", visibleChangeHandler);
     if (!isSafariBrowser) {
-      navigator.permissions
-        .query({ name: "notifications" })
-        .then(function (permissionStatus) {
-          console.log(
-            "notifications permission status is ",
-            permissionStatus.state
-          );
-          permissionStatus.onchange = notifyPermissionChangeHandler.bind(
-            null,
-            permissionStatus.state
-          );
-        });
+      navigator.permissions.query({ name: "notifications" }).then(function (permissionStatus) {
+        console.log("notifications permission status is ", permissionStatus.state);
+        permissionStatus.onchange = notifyPermissionChangeHandler.bind(
+          null,
+          permissionStatus.state
+        );
+      });
     }
     return () => {
       document.removeEventListener("visibilitychange", visibleChangeHandler);
@@ -48,7 +42,7 @@ export default function useNotification() {
     const {
       title = "New Message",
       body = "You have one new message",
-      icon = "https://static.nicegoodthings.com/project/ext/webrowse.logo.png",
+      icon = "https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
     } = payload;
     new Notification(title, { body, icon });
     // const n = new Notification(title, { body, icon });
diff --git a/src/common/hook/usePWABadge.js b/src/common/hook/usePWABadge.js
index 4ee6d01f..a6fd8b15 100644
--- a/src/common/hook/usePWABadge.js
+++ b/src/common/hook/usePWABadge.js
@@ -12,6 +12,6 @@ export default function usePWABadge() {
   }, []);
 
   return {
-    isSupported: badge.isSupported(),
+    isSupported: badge.isSupported()
   };
 }
diff --git a/src/common/hook/usePinMessage.js b/src/common/hook/usePinMessage.js
index fe5cbcf8..65dbc13a 100644
--- a/src/common/hook/usePinMessage.js
+++ b/src/common/hook/usePinMessage.js
@@ -1,22 +1,17 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import {
-  usePinMessageMutation,
-  useUnpinMessageMutation,
-} from "../../app/services/message";
+import { usePinMessageMutation, useUnpinMessageMutation } from "../../app/services/message";
 export default function usePinMessage(cid = null) {
   const [pins, setPins] = useState([]);
   const { channel, loginUser } = useSelector((store) => {
     return {
       channel: store.channels.byId[cid],
-      loginUser: store.contacts.byId[store.authData.uid],
+      loginUser: store.contacts.byId[store.authData.uid]
     };
   });
   const [pin, { isError, isLoading, isSuccess }] = usePinMessageMutation();
-  const [
-    unpin,
-    { isError: isUnpinError, isLoading: isUnpining, isSuccess: isUnpinSuccess },
-  ] = useUnpinMessageMutation();
+  const [unpin, { isError: isUnpinError, isLoading: isUnpining, isSuccess: isUnpinSuccess }] =
+    useUnpinMessageMutation();
   const pinMessage = (mid) => {
     if (!mid || !cid) return;
     pin({ mid, gid: +cid });
@@ -50,6 +45,6 @@ export default function usePinMessage(cid = null) {
     isSuccess,
     isUnpinError,
     isUnpining,
-    isUnpinSuccess,
+    isUnpinSuccess
   };
 }
diff --git a/src/common/hook/useRemoveLocalMessage.js b/src/common/hook/useRemoveLocalMessage.js
index 9e01b8bb..1668395e 100644
--- a/src/common/hook/useRemoveLocalMessage.js
+++ b/src/common/hook/useRemoveLocalMessage.js
@@ -5,8 +5,7 @@ import { removeChannelMsg } from "../../app/slices/message.channel";
 import { removeUserMsg } from "../../app/slices/message.user";
 export default function useRemoveLocalMessage({ context = "user", id = 0 }) {
   const dispatch = useDispatch();
-  const removeContextMessage =
-    context == "channel" ? removeChannelMsg : removeUserMsg;
+  const removeContextMessage = context == "channel" ? removeChannelMsg : removeUserMsg;
   const removeLocalMessage = (mid) => {
     dispatch(removeContextMessage({ id, mid }));
     dispatch(removeMessage(mid));
diff --git a/src/common/hook/useSendMessage.js b/src/common/hook/useSendMessage.js
index e0d786f5..73e29b0f 100644
--- a/src/common/hook/useSendMessage.js
+++ b/src/common/hook/useSendMessage.js
@@ -1,8 +1,5 @@
 // import second from 'first'
-import {
-  removeReplyingMessage,
-  addReplyingMessage,
-} from "../../app/slices/message";
+import { removeReplyingMessage, addReplyingMessage } from "../../app/slices/message";
 import { useSendChannelMsgMutation } from "../../app/services/channel";
 import { useSendMsgMutation } from "../../app/services/contact";
 import { useReplyMessageMutation } from "../../app/services/message";
@@ -11,38 +8,23 @@ import toast from "react-hot-toast";
 export default function useSendMessage(props) {
   const { context = "user", from = null, to = null } = props || {};
   const dispatch = useDispatch();
-  const stageFiles = useSelector(
-    (store) => store.ui.uploadFiles[`${context}_${to}`] || []
-  );
-  const [
-    replyMessage,
-    { isError: replyErr, isLoading: replying, isSuccess: replySuccess },
-  ] = useReplyMessageMutation();
+  const stageFiles = useSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
+  const [replyMessage, { isError: replyErr, isLoading: replying, isSuccess: replySuccess }] =
+    useReplyMessageMutation();
   const [
     sendChannelMsg,
-    {
-      isLoading: channelSending,
-      isSuccess: channelSuccess,
-      isError: channelError,
-    },
+    { isLoading: channelSending, isSuccess: channelSuccess, isError: channelError }
   ] = useSendChannelMsgMutation();
-  const [
-    sendUserMsg,
-    { isLoading: userSending, isSuccess: userSuccess, isError: userError },
-  ] = useSendMsgMutation();
+  const [sendUserMsg, { isLoading: userSending, isSuccess: userSuccess, isError: userError }] =
+    useSendMsgMutation();
   const sendFn = context == "user" ? sendUserMsg : sendChannelMsg;
-  const sendMessages = async ({
-    type = "text",
-    content,
-    users = [],
-    channels = [],
-  }) => {
+  const sendMessages = async ({ type = "text", content, users = [], channels = [] }) => {
     if (users.length) {
       for await (const uid of users) {
         await sendUserMsg({
           type,
           id: uid,
-          content,
+          content
         });
       }
     }
@@ -51,7 +33,7 @@ export default function useSendMessage(props) {
         await sendChannelMsg({
           type,
           id: cid,
-          content,
+          content
         });
       }
     }
@@ -71,7 +53,7 @@ export default function useSendMessage(props) {
         type,
         content,
         context,
-        from_uid: from,
+        from_uid: from
       });
     } else {
       await sendFn({
@@ -80,7 +62,7 @@ export default function useSendMessage(props) {
         properties: { ...properties },
         type,
         from_uid: from,
-        ...rest,
+        ...rest
       });
     }
   };
@@ -101,6 +83,6 @@ export default function useSendMessage(props) {
     sendMessage,
     isError: channelError || userError || replyErr,
     isSending: userSending || channelSending || replying,
-    isSuccess: channelSuccess || userSuccess || replySuccess,
+    isSuccess: channelSuccess || userSuccess || replySuccess
   };
 }
diff --git a/src/common/hook/useStreaming/chat.handler.js b/src/common/hook/useStreaming/chat.handler.js
index 36b89c02..b8ef985e 100644
--- a/src/common/hook/useStreaming/chat.handler.js
+++ b/src/common/hook/useStreaming/chat.handler.js
@@ -1,18 +1,8 @@
 import { batch } from "react-redux";
-import {
-  addChannelMsg,
-  removeChannelMsg,
-} from "../../../app/slices/message.channel";
-import {
-  addMessage,
-  removeMessage,
-  updateMessage,
-} from "../../../app/slices/message";
+import { addChannelMsg, removeChannelMsg } from "../../../app/slices/message.channel";
+import { addMessage, removeMessage, updateMessage } from "../../../app/slices/message";
 import { toggleReactionMessage } from "../../../app/slices/message.reaction";
-import {
-  addFileMessage,
-  removeFileMessage,
-} from "../../../app/slices/message.file";
+import { addFileMessage, removeFileMessage } from "../../../app/slices/message.file";
 import { addUserMsg, removeUserMsg } from "../../../app/slices/message.user";
 import { updateAfterMid } from "../../../app/slices/footprint";
 import { ContentTypes } from "../../../app/config";
@@ -29,8 +19,8 @@ const handler = (data, dispatch, currState) => {
       type,
       properties,
       expires_in,
-      detail: innerDetail,
-    },
+      detail: innerDetail
+    }
   } = data;
   const common = {
     from_uid,
@@ -38,7 +28,7 @@ const handler = (data, dispatch, currState) => {
     content,
     content_type,
     properties,
-    expires_in,
+    expires_in
   };
   switch (type) {
     case "normal":
@@ -64,7 +54,7 @@ const handler = (data, dispatch, currState) => {
               mid,
               // 如果是自己发的消息，就是已读
               read,
-              ...common,
+              ...common
             })
           );
           // 未推送完  or  不是自己发的消息
@@ -74,7 +64,7 @@ const handler = (data, dispatch, currState) => {
             appendMessage({
               id,
               mid,
-              local_id: properties ? properties.local_id : null,
+              local_id: properties ? properties.local_id : null
             })
           );
           // 加到file message 列表
@@ -94,7 +84,7 @@ const handler = (data, dispatch, currState) => {
               reply_mid: detailMid,
               // 如果是自己发的消息，就是已读
               read,
-              ...common,
+              ...common
             })
           );
           // 未推送完  or  不是自己发的消息
@@ -103,7 +93,7 @@ const handler = (data, dispatch, currState) => {
             appendMessage({
               id,
               mid,
-              local_id: properties ? properties.local_id : null,
+              local_id: properties ? properties.local_id : null
             })
           );
           // }
@@ -112,8 +102,7 @@ const handler = (data, dispatch, currState) => {
       break;
     case "reaction":
       {
-        const removeContextMessage =
-          to == "user" ? removeUserMsg : removeChannelMsg;
+        const removeContextMessage = to == "user" ? removeUserMsg : removeChannelMsg;
         const { type, action, content, content_type, properties } = innerDetail;
         switch (type) {
           case "like":
@@ -124,7 +113,7 @@ const handler = (data, dispatch, currState) => {
                   from_uid,
                   mid: detailMid,
                   rid: mid,
-                  action,
+                  action
                 })
               );
             }
@@ -150,7 +139,7 @@ const handler = (data, dispatch, currState) => {
                   content,
                   content_type,
                   properties,
-                  edited: true,
+                  edited: true
                 })
               );
             }
diff --git a/src/common/hook/useStreaming/index.js b/src/common/hook/useStreaming/index.js
index f64278c3..20a13d3a 100644
--- a/src/common/hook/useStreaming/index.js
+++ b/src/common/hook/useStreaming/index.js
@@ -1,8 +1,5 @@
 import { useEffect, useState } from "react";
-import {
-  fetchEventSource,
-  EventStreamContentType,
-} from "@microsoft/fetch-event-source";
+import { fetchEventSource, EventStreamContentType } from "@microsoft/fetch-event-source";
 import toast from "react-hot-toast";
 import dayjs from "dayjs";
 
@@ -14,18 +11,15 @@ import {
   addChannel,
   removeChannel,
   updateChannel,
-  updatePinMessage,
+  updatePinMessage
 } from "../../../app/slices/channels";
 import {
   updateUsersVersion,
   updateReadChannels,
   updateReadUsers,
-  updateMute,
+  updateMute
 } from "../../../app/slices/footprint";
-import {
-  updateUsersByLogs,
-  updateUsersStatus,
-} from "../../../app/slices/contacts";
+import { updateUsersByLogs, updateUsersStatus } from "../../../app/slices/contacts";
 import { resetAuthData } from "../../../app/slices/auth.data";
 import chatMessageHandler from "./chat.handler";
 import store from "../../../app/store";
@@ -52,7 +46,7 @@ export default function useStreaming() {
   const {
     authData: { uid: loginUid },
     ui: { ready, online },
-    footprint: { afterMid, usersVersion, readUsers, readChannels },
+    footprint: { afterMid, usersVersion, readUsers, readChannels }
   } = useSelector((store) => store);
   const [renewToken] = useRenewMutation();
   const dispatch = useDispatch();
@@ -64,7 +58,7 @@ export default function useStreaming() {
     if (initialized || initializing) return;
     // 如果token快要过期，先renew
     const {
-      authData: { token, expireTime = +new Date(), refreshToken },
+      authData: { token, expireTime = +new Date(), refreshToken }
     } = store.getState();
     let api_token = token;
     const tokenAlmostExpire = dayjs().isAfter(new Date(expireTime - 20 * 1000));
@@ -72,10 +66,10 @@ export default function useStreaming() {
     if (tokenAlmostExpire) {
       const {
         data: { token: newToken },
-        isError,
+        isError
       } = await renewToken({
         token,
-        refreshToken,
+        refreshToken
       });
       if (isError) return;
       api_token = newToken;
@@ -87,25 +81,18 @@ export default function useStreaming() {
       `${BASE_URL}/user/events?${getQueryString({
         "api-key": api_token,
         users_version: usersVersion,
-        after_mid: afterMid,
+        after_mid: afterMid
       })}`,
       {
         openWhenHidden: true,
         signal: controller.signal,
         async onopen(response) {
           initializing = false;
-          if (
-            response.ok &&
-            response.headers.get("content-type") === EventStreamContentType
-          ) {
+          if (response.ok && response.headers.get("content-type") === EventStreamContentType) {
             console.log("sse everything ok");
             initialized = true;
             return; // everything's good
-          } else if (
-            response.status >= 400 &&
-            response.status < 500 &&
-            response.status !== 429
-          ) {
+          } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {
             // 重新登录
             // client-side errors are usually non-retriable:
             console.log("sse debug: open fatal");
@@ -168,9 +155,7 @@ export default function useStreaming() {
                       {
                         const arr = data[key];
                         if (arr && arr.length) {
-                          const _key = key.endsWith("users")
-                            ? "add_users"
-                            : "add_groups";
+                          const _key = key.endsWith("users") ? "add_users" : "add_groups";
                           dispatch(updateMute({ [_key]: arr }));
                         }
                       }
@@ -180,9 +165,7 @@ export default function useStreaming() {
                       {
                         const arr = data[key];
                         if (arr && arr.length) {
-                          const _key = key.endsWith("users")
-                            ? "remove_users"
-                            : "remove_groups";
+                          const _key = key.endsWith("users") ? "remove_users" : "remove_groups";
                           dispatch(updateMute({ [_key]: arr }));
                         }
                       }
@@ -198,8 +181,7 @@ export default function useStreaming() {
             case "users_state_changed":
               {
                 let { type, ...rest } = data;
-                const onlines =
-                  type == "users_state_changed" ? [rest] : rest.users;
+                const onlines = type == "users_state_changed" ? [rest] : rest.users;
                 dispatch(updateUsersStatus(onlines));
               }
               break;
@@ -234,7 +216,7 @@ export default function useStreaming() {
                 dispatch(
                   updateChannel({
                     id: gid,
-                    ...rest,
+                    ...rest
                   })
                 );
               }
@@ -248,7 +230,7 @@ export default function useStreaming() {
                   updateChannel({
                     operation: "add_member",
                     id: gid,
-                    members: uids,
+                    members: uids
                   })
                 );
               }
@@ -263,7 +245,7 @@ export default function useStreaming() {
                     updateChannel({
                       operation: "remove_member",
                       id: gid,
-                      members: uids,
+                      members: uids
                     })
                   );
                 }
@@ -285,7 +267,7 @@ export default function useStreaming() {
                   ready,
                   loginUid,
                   readUsers,
-                  readChannels,
+                  readChannels
                 });
               }
               break;
@@ -321,7 +303,7 @@ export default function useStreaming() {
             // do nothing to automatically retry. You can also
             // return a specific retry interval here.
           }
-        },
+        }
       }
     );
     initializing = false;
@@ -354,6 +336,6 @@ export default function useStreaming() {
   return {
     setStreamingReady,
     startStreaming,
-    stopStreaming,
+    stopStreaming
   };
 }
diff --git a/src/common/hook/useUploadFile.js b/src/common/hook/useUploadFile.js
index a984aeaa..a79ba031 100644
--- a/src/common/hook/useUploadFile.js
+++ b/src/common/hook/useUploadFile.js
@@ -3,10 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 // import { ContentTypes } from "../../app/config";
 import { updateUploadFiles } from "../../app/slices/ui";
 import BASE_URL, { FILE_SLICE_SIZE } from "../../app/config";
-import {
-  usePrepareUploadFileMutation,
-  useUploadFileMutation,
-} from "../../app/services/message";
+import { usePrepareUploadFileMutation, useUploadFileMutation } from "../../app/services/message";
 import toast from "react-hot-toast";
 
 export default function useUploadFile(props = {}) {
@@ -15,7 +12,7 @@ export default function useUploadFile(props = {}) {
   const { stageFiles, replying } = useSelector((store) => {
     return {
       stageFiles: store.ui.uploadFiles[`${context}_${id}`] || [],
-      replying: store.message.replying[`${context}_${id}`],
+      replying: store.message.replying[`${context}_${id}`]
     };
   });
   const [data, setData] = useState(null);
@@ -23,13 +20,11 @@ export default function useUploadFile(props = {}) {
   const canneledRef = useRef(false);
   const sliceUploadedCountRef = useRef(0);
   const totalSliceCountRef = useRef(1);
-  const [
-    prepareUploadFile,
-    { isLoading: isPreparing, isSuccess: isPrepared },
-  ] = usePrepareUploadFileMutation();
+  const [prepareUploadFile, { isLoading: isPreparing, isSuccess: isPrepared }] =
+    usePrepareUploadFileMutation();
   const [
     uploadFileFn,
-    { isLoading: isUploading, isSuccess: isUploaded, isError: uploadFileError },
+    { isLoading: isUploading, isSuccess: isUploaded, isError: uploadFileError }
   ] = useUploadFileMutation();
 
   const uploadChunk = (data) => {
@@ -46,12 +41,12 @@ export default function useUploadFile(props = {}) {
     const {
       name = `rustchat-${+new Date()}.${file.type.split("/")[1]}`,
       type: file_type,
-      size: file_size,
+      size: file_size
     } = file;
     // 拿file id
     const { data: file_id } = await prepareUploadFile({
       content_type: file_type,
-      filename: name,
+      filename: name
     });
     console.log("file id", file_id);
 
@@ -76,17 +71,13 @@ export default function useUploadFile(props = {}) {
         // 退出循环
         if (canneledRef.current) break;
         try {
-          const chunk = file.slice(
-            FILE_SLICE_SIZE * idx,
-            FILE_SLICE_SIZE * (idx + 1),
-            file_type
-          );
+          const chunk = file.slice(FILE_SLICE_SIZE * idx, FILE_SLICE_SIZE * (idx + 1), file_type);
 
           uploadResult = await uploadChunk({
             file_id,
             chunk,
             // 如果是最后一个chunk，标记下
-            is_last: idx == _arr.length - 1,
+            is_last: idx == _arr.length - 1
           });
           sliceUploadedCountRef.current++;
         } catch (error) {
@@ -98,7 +89,7 @@ export default function useUploadFile(props = {}) {
     }
     // setUploadingFile(false);
     const {
-      data: { path, size, hash },
+      data: { path, size, hash }
     } = uploadResult;
     const encodedPath = encodeURIComponent(path);
     const res = {
@@ -111,7 +102,7 @@ export default function useUploadFile(props = {}) {
       thumbnail: file_type.startsWith("image")
         ? `${BASE_URL}/resource/file?file_path=${encodedPath}&thumbnail=true`
         : "",
-      download: `${BASE_URL}/resource/file?file_path=${encodedPath}&download=true`,
+      download: `${BASE_URL}/resource/file?file_path=${encodedPath}&download=true`
     };
     setData(res);
     return res;
@@ -120,9 +111,7 @@ export default function useUploadFile(props = {}) {
     canneledRef.current = true;
   };
   const removeStageFile = (idx) => {
-    dispatch(
-      updateUploadFiles({ context, id, operation: "remove", index: idx })
-    );
+    dispatch(updateUploadFiles({ context, id, operation: "remove", index: idx }));
   };
   const addStageFile = (fileData = {}) => {
     if (replying) {
@@ -141,7 +130,7 @@ export default function useUploadFile(props = {}) {
         id,
         operation: "update",
         index: idx,
-        ...data,
+        ...data
       })
     );
   };
@@ -149,9 +138,7 @@ export default function useUploadFile(props = {}) {
     stopUploading,
     data,
     isUploading: isPreparing || isUploading,
-    progress: Number(
-      (sliceUploadedCountRef.current / totalSliceCountRef.current) * 100
-    ).toFixed(2),
+    progress: Number((sliceUploadedCountRef.current / totalSliceCountRef.current) * 100).toFixed(2),
     uploadFile,
     isError: uploadFileError,
     isSuccess: !!data,
@@ -159,6 +146,6 @@ export default function useUploadFile(props = {}) {
     addStageFile,
     resetStageFiles,
     removeStageFile,
-    updateStageFile,
+    updateStageFile
   };
 }
diff --git a/src/common/utils.js b/src/common/utils.js
index 23ff26e5..1eb08b50 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -98,7 +98,7 @@ export const getInitialsAvatar = ({
   foreground = "#fff",
   background = "#4c99e9",
   weight = 400,
-  fontFamily = "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+  fontFamily = "'Lato', 'Lato-Regular', 'Helvetica Neue'"
 }) => {
   const canvas = document.createElement("canvas");
   const width = size;
@@ -154,7 +154,7 @@ export const getFileIcon = (type, name = "") => {
     video: /^video/gi,
     code: /(json|javascript|java|rb|c|php|xml|css|html)$/gi,
     doc: /^text/gi,
-    pdf: /\/pdf$/gi,
+    pdf: /\/pdf$/gi
   };
   const _arr = name.split(".");
   const _type = type || _arr[_arr.length - 1];
@@ -187,56 +187,35 @@ export const getFileIcon = (type, name = "") => {
   }
   return icon;
 };
-export const normalizeArchiveData = (
-  data = null,
-  filePath = null,
-  uid = null
-) => {
+export const normalizeArchiveData = (data = null, filePath = null, uid = null) => {
   if (!data || !filePath) return [];
   const { messages, users } = data;
-  const getUrls = (
-    uid,
-    { content, content_type, file_id, thumbnail_id, filePath, avatar }
-  ) => {
+  const getUrls = (uid, { content, content_type, file_id, thumbnail_id, filePath, avatar }) => {
     // uid存在，则favorite，否则archive
     const prefix = uid
       ? `${BASE_URL}/favorite/attachment/${uid}/${filePath}/`
       : `${BASE_URL}/resource/archive/attachment?file_path=${filePath}&attachment_id=`;
     return {
-      transformedContent:
-        content_type == ContentTypes.file ? `${prefix}${file_id}` : content,
-      thumbnail:
-        content_type == ContentTypes.file ? `${prefix}${thumbnail_id}` : "",
+      transformedContent: content_type == ContentTypes.file ? `${prefix}${file_id}` : content,
+      thumbnail: content_type == ContentTypes.file ? `${prefix}${thumbnail_id}` : "",
       download:
         content_type == ContentTypes.file
           ? `${prefix}${file_id}${uid ? "?" : "&"}download=true`
           : "",
-      avatarUrl: avatar !== null ? `${prefix}${avatar}` : "",
+      avatarUrl: avatar !== null ? `${prefix}${avatar}` : ""
     };
   };
   return messages.map(
-    ({
-      source,
-      mid,
-      content,
-      file_id,
-      thumbnail_id,
-      content_type,
-      properties,
-      from_user,
-    }) => {
+    ({ source, mid, content, file_id, thumbnail_id, content_type, properties, from_user }) => {
       let user = { ...(users[from_user] || {}) };
-      const { transformedContent, thumbnail, download, avatarUrl } = getUrls(
-        uid,
-        {
-          content,
-          content_type,
-          filePath,
-          file_id,
-          thumbnail_id,
-          avatar: user.avatar,
-        }
-      );
+      const { transformedContent, thumbnail, download, avatarUrl } = getUrls(uid, {
+        content,
+        content_type,
+        filePath,
+        file_id,
+        thumbnail_id,
+        avatar: user.avatar
+      });
 
       user.avatar = avatarUrl;
 
@@ -249,7 +228,7 @@ export const normalizeArchiveData = (
         content_type,
         properties,
         download,
-        thumbnail,
+        thumbnail
       };
     }
   );
diff --git a/src/index.js b/src/index.js
index f7103d66..e3de6627 100644
--- a/src/index.js
+++ b/src/index.js
@@ -35,7 +35,7 @@ serviceWorkerRegistration.register({
     };
     toast((t) => <NewVersion id={t.id} handleUpdate={handleUpdate} />, {
       duration: Infinity,
-      position: "top-right",
+      position: "top-right"
     });
-  },
+  }
 });
diff --git a/src/routes/404/styled.js b/src/routes/404/styled.js
index 4b974261..ccbe2286 100644
--- a/src/routes/404/styled.js
+++ b/src/routes/404/styled.js
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 const StyledWrapper = styled.div`
- display: flex;
+  display: flex;
 `;
 
 export default StyledWrapper;
diff --git a/src/routes/chat/ChannelChat/PinList.js b/src/routes/chat/ChannelChat/PinList.js
index c9faffe5..7cd07c1f 100644
--- a/src/routes/chat/ChannelChat/PinList.js
+++ b/src/routes/chat/ChannelChat/PinList.js
@@ -96,9 +96,7 @@ export default function PinList({ id }) {
       {noPins ? (
         <div className="none">
           <IconSurprise />
-          <div className="tip">
-            This channel doesn’t have any pinned message yet.
-          </div>
+          <div className="tip">This channel doesn’t have any pinned message yet.</div>
         </div>
       ) : (
         <ul className="list">
@@ -115,11 +113,7 @@ export default function PinList({ id }) {
                     <IconForward />
                   </button> */}
                   {canPin && (
-                    <button
-                      className="btn"
-                      data-mid={mid}
-                      onClick={handleUnpin}
-                    >
+                    <button className="btn" data-mid={mid} onClick={handleUnpin}>
                       <IconClose />
                     </button>
                   )}
diff --git a/src/routes/chat/ChannelChat/index.js b/src/routes/chat/ChannelChat/index.js
index 94f97a69..6e4cf829 100644
--- a/src/routes/chat/ChannelChat/index.js
+++ b/src/routes/chat/ChannelChat/index.js
@@ -28,7 +28,7 @@ import {
   // StyledNotification,
   StyledContacts,
   StyledChannelChat,
-  StyledHeader,
+  StyledHeader
 } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
 import LoadMore from "../LoadMore";
@@ -36,9 +36,14 @@ import LoadMore from "../LoadMore";
 
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const { values: agoraConfig } = useConfig("agora");
-  const { list: msgIds, appends, hasMore, pullUp } = useMessageFeed({
+  const {
+    list: msgIds,
+    appends,
+    hasMore,
+    pullUp
+  } = useMessageFeed({
     context: "channel",
-    id: cid,
+    id: cid
   });
   // const scrollObserveRef = useChatScroll([msgIds, appends]);
   const [toolVisible, setToolVisible] = useState("");
@@ -56,7 +61,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
     messageData,
     loginUid,
     loginUser,
-    footprint,
+    footprint
   } = useSelector((store) => {
     return {
       selects: store.ui.selectMessages[`channel_${cid}`],
@@ -66,7 +71,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
       // msgIds: store.channelMessage[cid] || [],
       userIds: store.contacts.ids,
       data: store.channels.byId[cid] || {},
-      messageData: store.message || {},
+      messageData: store.message || {}
     };
   });
   // const ref = useChatScroll(msgIds);
@@ -88,9 +93,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   };
   if (!data) return null;
   const { name, description, is_public, members = [], owner } = data;
-  const memberIds = is_public
-    ? userIds
-    : members.slice(0).sort((n) => (n == owner ? -1 : 0));
+  const memberIds = is_public ? userIds : members.slice(0).sort((n) => (n == owner ? -1 : 0));
   const addVisible = loginUser?.is_admin || owner == loginUid;
   console.log("channel message list", msgIds);
   const readIndex = footprint.readChannels[cid];
@@ -98,9 +101,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const feeds = [...msgIds, ...appends];
   return (
     <>
-      {addMemberModalVisible && (
-        <InviteModal cid={cid} closeModal={toggleAddVisible} />
-      )}
+      {addMemberModalVisible && <InviteModal cid={cid} closeModal={toggleAddVisible} />}
       <Layout
         to={cid}
         context="channel"
@@ -116,11 +117,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   </Tooltip>
                 </li>
               )}
-              <Tooltip
-                tip="Pin"
-                placement="left"
-                disabled={toolVisible == "pin"}
-              >
+              <Tooltip tip="Pin" placement="left" disabled={toolVisible == "pin"}>
                 <Tippy
                   onShow={() => {
                     setToolVisible("pin");
@@ -145,11 +142,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   </li>
                 </Tippy>
               </Tooltip>
-              <Tooltip
-                tip="Favorite"
-                placement="left"
-                disabled={toolVisible == "favorite"}
-              >
+              <Tooltip tip="Favorite" placement="left" disabled={toolVisible == "favorite"}>
                 <Tippy
                   onShow={() => {
                     setToolVisible("favorite");
@@ -165,9 +158,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   content={<FavList cid={cid} />}
                 >
                   <li
-                    className={`tool fav ${
-                      toolVisible == "favorite" ? "active" : ""
-                    } `}
+                    className={`tool fav ${toolVisible == "favorite" ? "active" : ""} `}
                     data-count={pinCount}
                   >
                     <IconFav />
@@ -246,10 +237,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
             <div className="info">
               <h2 className="title">Welcome to #{name} !</h2>
               <p className="desc">This is the start of the #{name} channel. </p>
-              <NavLink
-                to={`/setting/channel/${cid}?f=${pathname}`}
-                className="edit"
-              >
+              <NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="edit">
                 <EditIcon className="icon" />
                 Edit Channel
               </NavLink>
@@ -270,7 +258,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
               prev,
               curr,
               contextId: cid,
-              context: "channel",
+              context: "channel"
             });
           })}
 
diff --git a/src/routes/chat/ChannelList/NavItem.js b/src/routes/chat/ChannelList/NavItem.js
index 1ae3af82..ed42d553 100644
--- a/src/routes/chat/ChannelList/NavItem.js
+++ b/src/routes/chat/ChannelList/NavItem.js
@@ -29,7 +29,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     visible: contextMenuVisible,
     offset,
     handleContextMenuEvent,
-    hideContextMenu,
+    hideContextMenu
   } = useContextMenu();
   const {
     channel,
@@ -37,7 +37,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     messageData,
     readIndex,
     muted,
-    loginUid,
+    loginUid
     //  loginUser,
   } = useSelector((store) => {
     return {
@@ -47,7 +47,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
       messageData: store.message,
       loginUid: store.authData.uid,
       readIndex: store.footprint.readChannels[id],
-      muted: store.footprint.muteChannels[id],
+      muted: store.footprint.muteChannels[id]
     };
   });
   const handleChannelSetting = (evt) => {
@@ -72,8 +72,8 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
       }
     },
     collect: (monitor) => ({
-      isActive: monitor.canDrop() && monitor.isOver(),
-    }),
+      isActive: monitor.canDrop() && monitor.isOver()
+    })
   }));
   const handleReadAll = () => {
     const lastMid = mids[mids.length - 1];
@@ -91,9 +91,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     setInviteModalVisible((prev) => !prev);
   };
   const handleMute = () => {
-    const data = muted
-      ? { remove_groups: [id] }
-      : { add_groups: [{ gid: id }] };
+    const data = muted ? { remove_groups: [id] } : { add_groups: [{ gid: id }] };
     muteChannel(data);
   };
   const { is_public, name, owner } = channel;
@@ -101,7 +99,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
     mids,
     messageData,
     readIndex,
-    loginUid,
+    loginUid
   });
   const isMentions = mentions.length !== 0;
   const inviteIconVisible = is_public || owner == loginUid;
@@ -122,11 +120,11 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
               {
                 title: "Mark As Read",
                 underline: true,
-                handler: handleReadAll,
+                handler: handleReadAll
               },
               {
                 title: muted ? "Unmute" : "Mute",
-                handler: handleMute,
+                handler: handleMute
               },
               // {
               //   title: "Notification Settings",
@@ -134,13 +132,13 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
               // },
               {
                 title: "Invite People",
-                handler: toggleInviteModalVisible,
+                handler: toggleInviteModalVisible
               },
               {
                 title: "Delete Channel",
                 danger: true,
-                handler: toggleRemoveConfirm.bind(null, id),
-              },
+                handler: toggleRemoveConfirm.bind(null, id)
+              }
             ]}
           />
         }
@@ -150,9 +148,7 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
           onContextMenu={handleContextMenuEvent}
           ref={drop}
           key={id}
-          className={`link ${isActive ? "drop_over" : ""} ${
-            muted ? "muted" : ""
-          }`}
+          className={`link ${isActive ? "drop_over" : ""} ${muted ? "muted" : ""}`}
           activeclassname="link_active"
           to={`/chat/channel/${id}`}
         >
diff --git a/src/routes/chat/DMChat/index.js b/src/routes/chat/DMChat/index.js
index cc2e8886..4f07e9ed 100644
--- a/src/routes/chat/DMChat/index.js
+++ b/src/routes/chat/DMChat/index.js
@@ -20,25 +20,28 @@ import LoadMore from "../LoadMore";
 import { renderMessageFragment } from "../utils";
 import useMessageFeed from "../../../common/hook/useMessageFeed";
 export default function DMChat({ uid = "", dropFiles = [] }) {
-  const { list: msgIds, appends, hasMore, pullUp } = useMessageFeed({
+  const {
+    list: msgIds,
+    appends,
+    hasMore,
+    pullUp
+  } = useMessageFeed({
     context: "user",
-    id: uid,
+    id: uid
   });
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   console.log("dm files", dropFiles);
   // const [mids, setMids] = useState([]);
-  const { currUser, messageData, footprint, loginUid, selects } = useSelector(
-    (store) => {
-      return {
-        selects: store.ui.selectMessages[`user_${uid}`],
-        loginUid: store.authData.uid,
-        footprint: store.footprint,
-        currUser: store.contacts.byId[uid],
-        messageData: store.message,
-      };
-    }
-  );
+  const { currUser, messageData, footprint, loginUid, selects } = useSelector((store) => {
+    return {
+      selects: store.ui.selectMessages[`user_${uid}`],
+      loginUid: store.authData.uid,
+      footprint: store.footprint,
+      currUser: store.contacts.byId[uid],
+      messageData: store.message
+    };
+  });
   // const ref = useChatScroll(msgIds);
 
   if (!currUser) return null;
@@ -111,7 +114,7 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
             prev,
             curr,
             contextId: uid,
-            context: "user",
+            context: "user"
           });
         })}
       </StyledDMChat>
diff --git a/src/routes/chat/DMList/NavItem.js b/src/routes/chat/DMList/NavItem.js
index bc12dbae..d4c91990 100644
--- a/src/routes/chat/DMList/NavItem.js
+++ b/src/routes/chat/DMList/NavItem.js
@@ -18,25 +18,18 @@ import Contact from "../../../common/component/Contact";
 import { ContentTypes } from "../../../app/config";
 const NavItem = ({ uid, mid, unreads, setFiles }) => {
   const [previewMsg, setPreviewMsg] = useState(null);
-  const {
-    messages: normalizedMessages,
-    normalizeMessage,
-  } = useNormalizeMessage();
+  const { messages: normalizedMessages, normalizeMessage } = useNormalizeMessage();
   const dispatch = useDispatch();
   const pathMatched = useMatch(`/chat/dm/${uid}`);
   const [updateReadIndex] = useReadMessageMutation();
   const { currMsg, currUser } = useSelector((store) => {
     return {
       currUser: store.contacts.byId[uid],
-      currMsg: store.message[mid],
+      currMsg: store.message[mid]
     };
   });
   const navigate = useNavigate();
-  const {
-    visible: contextMenuVisible,
-    handleContextMenuEvent,
-    hideContextMenu,
-  } = useContextMenu();
+  const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
   const [{ isActive }, drop] = useDrop(() => ({
     accept: [NativeTypes.FILE],
     drop({ dataTransfer }) {
@@ -51,8 +44,8 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
       }
     },
     collect: (monitor) => ({
-      isActive: monitor.canDrop() && monitor.isOver(),
-    }),
+      isActive: monitor.canDrop() && monitor.isOver()
+    })
   }));
   useEffect(() => {
     if (currMsg) {
@@ -96,13 +89,13 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
           items={[
             {
               title: "Mark As Read",
-              handler: handleReadAll,
+              handler: handleReadAll
             },
             {
               title: "Hide Session",
               danger: true,
-              handler: handleRemoveSession,
-            },
+              handler: handleRemoveSession
+            }
           ]}
         />
       }
@@ -118,9 +111,7 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
         <div className="details">
           <div className="up">
             <span className="name">{currUser.name}</span>
-            {previewMsg && (
-              <time>{dayjs(previewMsg.created_at).fromNow()}</time>
-            )}
+            {previewMsg && <time>{dayjs(previewMsg.created_at).fromNow()}</time>}
           </div>
 
           <div className="down">
diff --git a/src/routes/chat/DMList/index.js b/src/routes/chat/DMList/index.js
index 76d96271..4e280184 100644
--- a/src/routes/chat/DMList/index.js
+++ b/src/routes/chat/DMList/index.js
@@ -5,17 +5,15 @@ import { getUnreadCount } from "../utils";
 
 import NavItem from "./NavItem";
 export default function DMList({ uids, setDropFiles }) {
-  const { userMessage, messageData, readUsers, loginUid } = useSelector(
-    (store) => {
-      return {
-        loginUid: store.authData.uid,
-        readUsers: store.footprint.readUsers,
-        contactData: store.contacts.byId,
-        userMessage: store.userMessage.byId,
-        messageData: store.message,
-      };
-    }
-  );
+  const { userMessage, messageData, readUsers, loginUid } = useSelector((store) => {
+    return {
+      loginUid: store.authData.uid,
+      readUsers: store.footprint.readUsers,
+      contactData: store.contacts.byId,
+      userMessage: store.userMessage.byId,
+      messageData: store.message
+    };
+  });
   const sessions = uids.map((uid) => {
     const mids = userMessage[uid] || [];
     if (mids.length == 0) {
@@ -27,7 +25,7 @@ export default function DMList({ uids, setDropFiles }) {
       mids,
       readIndex,
       messageData,
-      loginUid,
+      loginUid
     });
 
     return { lastMid, unreads, uid };
@@ -40,13 +38,7 @@ export default function DMList({ uids, setDropFiles }) {
     })
     .map(({ lastMid, uid, unreads }) => {
       return (
-        <NavItem
-          key={uid}
-          uid={uid}
-          mid={lastMid}
-          unreads={unreads}
-          setFiles={setDropFiles}
-        />
+        <NavItem key={uid} uid={uid} mid={lastMid} unreads={unreads} setFiles={setDropFiles} />
       );
     });
 }
diff --git a/src/routes/chat/FavList.js b/src/routes/chat/FavList.js
index b8aaa3ad..5391de82 100644
--- a/src/routes/chat/FavList.js
+++ b/src/routes/chat/FavList.js
@@ -97,9 +97,7 @@ export default function FavList({ cid = null, uid = null }) {
       {noFavs ? (
         <div className="none">
           <IconSurprise />
-          <div className="tip">
-            This channel doesn’t have any saved message yet.
-          </div>
+          <div className="tip">This channel doesn’t have any saved message yet.</div>
         </div>
       ) : (
         <ul className="list">
diff --git a/src/routes/chat/Layout/Operations.js b/src/routes/chat/Layout/Operations.js
index ef1fde47..31b9a7ae 100644
--- a/src/routes/chat/Layout/Operations.js
+++ b/src/routes/chat/Layout/Operations.js
@@ -44,9 +44,7 @@ export default function Operations({ context, id }) {
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const { canDelete } = useDeleteMessage();
   const { addFavorite } = useFavMessage({});
-  const mids = useSelector(
-    (store) => store.ui.selectMessages[`${context}_${id}`]
-  );
+  const mids = useSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
   const [forwardModalVisible, setForwardModalVisible] = useState(false);
   const dispatch = useDispatch();
   const handleClose = () => {
@@ -86,18 +84,12 @@ export default function Operations({ context, id }) {
         <button className="opt" onClick={handleFav}>
           <IconBookmark />
         </button>
-        <button
-          className="opt"
-          disabled={!canDel}
-          onClick={toggleDeleteModal.bind(null, false)}
-        >
+        <button className="opt" disabled={!canDel} onClick={toggleDeleteModal.bind(null, false)}>
           <IconDelete />
         </button>
         <IconClose className="close" onClick={handleClose} />
       </Styled>
-      {forwardModalVisible && (
-        <ForwardModal mids={mids} closeModal={toggleForwardModal} />
-      )}
+      {forwardModalVisible && <ForwardModal mids={mids} closeModal={toggleForwardModal} />}
       {deleteModalVisible && (
         <DeleteMessageConfirmModal mids={mids} closeModal={toggleDeleteModal} />
       )}
diff --git a/src/routes/chat/Layout/index.js b/src/routes/chat/Layout/index.js
index 017c730d..56cd5684 100644
--- a/src/routes/chat/Layout/index.js
+++ b/src/routes/chat/Layout/index.js
@@ -17,7 +17,7 @@ export default function Layout({
   contacts = null,
   dropFiles = [],
   context = "channel",
-  to = null,
+  to = null
 }) {
   const { addStageFile } = useUploadFile({ context, id: to });
   const messagesContainer = useRef(undefined);
@@ -26,7 +26,7 @@ export default function Layout({
     return {
       selects: store.ui.selectMessages[`${context}_${to}`],
       channelsData: store.channels.byId,
-      contactsData: store.contacts.byId,
+      contactsData: store.contacts.byId
     };
   });
   const [{ isActive }, drop] = useDrop(
@@ -44,8 +44,8 @@ export default function Layout({
         }
       },
       collect: (monitor) => ({
-        isActive: monitor.canDrop() && monitor.isOver(),
-      }),
+        isActive: monitor.canDrop() && monitor.isOver()
+      })
     }),
     [context, to]
   );
@@ -72,10 +72,7 @@ export default function Layout({
         (evt) => {
           console.log(evt);
           const { target } = evt;
-          if (
-            target.nodeName == "IMG" &&
-            target.classList.contains("preview")
-          ) {
+          if (target.nodeName == "IMG" && target.classList.contains("preview")) {
             const thumbnail = target.src;
             const originUrl = target.dataset.origin || target.src;
             const downloadLink = target.dataset.download || target.src;
@@ -87,13 +84,10 @@ export default function Layout({
       );
     }
   }, []);
-  const name =
-    context == "channel" ? channelsData[to]?.name : contactsData[to]?.name;
+  const name = context == "channel" ? channelsData[to]?.name : contactsData[to]?.name;
   return (
     <>
-      {previewImage && (
-        <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />
-      )}
+      {previewImage && <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />}
       <Styled ref={drop}>
         {header}
         <main className="main" ref={messagesContainer}>
@@ -107,21 +101,11 @@ export default function Layout({
           {contacts && <div className="members">{contacts}</div>}
           {aside && <div className="aside">{aside}</div>}
         </main>
-        <div
-          className={`drag_tip ${
-            isActive ? "visible animate__animated animate__fadeIn" : ""
-          }`}
-        >
-          <div
-            className={`box ${
-              isActive ? "animate__animated animate__bounceIn" : ""
-            }`}
-          >
+        <div className={`drag_tip ${isActive ? "visible animate__animated animate__fadeIn" : ""}`}>
+          <div className={`box ${isActive ? "animate__animated animate__bounceIn" : ""}`}>
             <div className="inner">
               <h4 className="head">{`Send to ${ChatPrefixs[context]}${name}`}</h4>
-              <span className="intro">
-                Photos accept jpg, png, max size limit to 10M.
-              </span>
+              <span className="intro">Photos accept jpg, png, max size limit to 10M.</span>
             </div>
           </div>
         </div>
diff --git a/src/routes/chat/LoadMore.js b/src/routes/chat/LoadMore.js
index a1ae9ba6..f297fbe7 100644
--- a/src/routes/chat/LoadMore.js
+++ b/src/routes/chat/LoadMore.js
@@ -40,13 +40,7 @@ export default function LoadMore({ pullUp = null }) {
   }, [ref, pullUp]);
   return (
     <Styled ref={ref}>
-      <Waveform
-        className="loading"
-        size={24}
-        lineWeight={5}
-        speed={1}
-        color="#ccc"
-      />
+      <Waveform className="loading" size={24} lineWeight={5} speed={1} color="#ccc" />
     </Styled>
   );
 }
diff --git a/src/routes/chat/index.js b/src/routes/chat/index.js
index 80a1af2b..1eac1a96 100644
--- a/src/routes/chat/index.js
+++ b/src/routes/chat/index.js
@@ -24,7 +24,7 @@ export default function ChatPage() {
   const [userDropFiles, setUserDropFiles] = useState([]);
   const { sessionUids } = useSelector((store) => {
     return {
-      sessionUids: store.userMessage.ids,
+      sessionUids: store.userMessage.ids
     };
   });
   const [channelModalVisible, setChannelModalVisible] = useState(false);
@@ -41,8 +41,7 @@ export default function ChatPage() {
     const listEle = currentTarget.parentElement.parentElement;
     listEle.classList.toggle("collapse");
   };
-  const tmpUid =
-    sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id;
+  const tmpUid = sessionUids.findIndex((i) => i == user_id) > -1 ? null : user_id;
   // console.log("temp uid", tmpUid);
   const placeholderVisible = !channel_id && !user_id;
   return (
@@ -50,27 +49,18 @@ export default function ChatPage() {
       {channelModalVisible && (
         <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
       )}
-      {contactsModalVisible && (
-        <ContactsModal closeModal={toggleContactsModalVisible} />
-      )}
+      {contactsModalVisible && <ContactsModal closeModal={toggleContactsModalVisible} />}
       <StyledWrapper>
         <div className="left">
           <Server />
           <div className="list channels">
             <h3 className="title">
               <span className="txt" onClick={handleToggleExpand}>
-                <AiOutlineCaretDown
-                  className="icon"
-                  size={18}
-                  color="#78787C"
-                />
+                <AiOutlineCaretDown className="icon" size={18} color="#78787C" />
                 CHANNELS
               </span>
               <Tooltip tip="New Channel" placement="bottom">
-                <AddIcon
-                  className="add_icon"
-                  onClick={toggleChannelModalVisible}
-                />
+                <AddIcon className="add_icon" onClick={toggleChannelModalVisible} />
               </Tooltip>
             </h3>
             <nav className="nav">
@@ -80,18 +70,11 @@ export default function ChatPage() {
           <div className="list dms">
             <h3 className="title">
               <span className="txt" onClick={handleToggleExpand}>
-                <AiOutlineCaretDown
-                  className="icon"
-                  size={18}
-                  color="#78787C"
-                />
+                <AiOutlineCaretDown className="icon" size={18} color="#78787C" />
                 DIRECT MESSAGE
               </span>
               <Tooltip tip="New DM" placement="bottom">
-                <AddIcon
-                  className="add_icon"
-                  onClick={toggleContactsModalVisible}
-                />
+                <AddIcon className="add_icon" onClick={toggleContactsModalVisible} />
               </Tooltip>
             </h3>
             <nav className="nav">
@@ -105,9 +88,7 @@ export default function ChatPage() {
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && <BlankPlaceholder />}
-          {channel_id && (
-            <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />
-          )}
+          {channel_id && <ChannelChat cid={channel_id} dropFiles={channelDropFiles} />}
           {user_id && <DMChat uid={user_id} dropFiles={userDropFiles} />}
         </div>
       </StyledWrapper>
diff --git a/src/routes/chat/utils.js b/src/routes/chat/utils.js
index 52394d18..0d8c77bd 100644
--- a/src/routes/chat/utils.js
+++ b/src/routes/chat/utils.js
@@ -20,12 +20,7 @@ import { updateSelectMessages } from "../../app/slices/ui";
 //     }
 //   };
 // }
-export function getUnreadCount({
-  mids = [],
-  messageData = {},
-  loginUid = 0,
-  readIndex = 0,
-}) {
+export function getUnreadCount({ mids = [], messageData = {}, loginUid = 0, readIndex = 0 }) {
   // console.log({ mids, loginUid, readIndex });
   // 先过滤掉空信息和from自己的
   const others = mids.filter((mid) => {
@@ -123,19 +118,10 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-const MessageWrapper = ({
-  selectMode = false,
-  context,
-  id,
-  mid,
-  children,
-  ...rest
-}) => {
+const MessageWrapper = ({ selectMode = false, context, id, mid, children, ...rest }) => {
   const dispatch = useDispatch();
 
-  const selects = useSelector(
-    (store) => store.ui.selectMessages[`${context}_${id}`]
-  );
+  const selects = useSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
   const selected = !!(selects && selects.find((s) => s == mid));
   const toggleSelect = () => {
     const operation = selected ? "remove" : "add";
@@ -146,12 +132,7 @@ const MessageWrapper = ({
       <Checkbox className="check" checked={selected} />
       {/* {React.cloneElement(children, { readOnly: selected })} */}
       {children}
-      {selectMode && (
-        <div
-          className="overlay"
-          onClick={selectMode ? toggleSelect : null}
-        ></div>
-      )}
+      {selectMode && <div className="overlay" onClick={selectMode ? toggleSelect : null}></div>}
     </StyledWrapper>
   );
 };
@@ -163,7 +144,7 @@ export const renderMessageFragment = ({
   prev = null,
   curr = null,
   contextId = 0,
-  context = "user",
+  context = "user"
 }) => {
   if (!curr) return null;
   let { created_at, mid } = curr;
diff --git a/src/routes/favs/index.js b/src/routes/favs/index.js
index 61cbe605..8f2597be 100644
--- a/src/routes/favs/index.js
+++ b/src/routes/favs/index.js
@@ -14,12 +14,12 @@ const Filters = [
   {
     icon: <IconUnkown className="icon" />,
     title: "All Items",
-    filter: "",
+    filter: ""
   },
   {
     icon: <IconImage className="icon" />,
     title: "Images",
-    filter: "image",
+    filter: "image"
   },
   // {
   //   icon: <IconDoc className="icon" />,
@@ -29,13 +29,13 @@ const Filters = [
   {
     icon: <IconVideo className="icon" />,
     title: "Videos",
-    filter: "video",
+    filter: "video"
   },
   {
     icon: <IconAudio className="icon" />,
     title: "Audios",
-    filter: "audio",
-  },
+    filter: "audio"
+  }
 ];
 function FavsPage() {
   const [filter, setFilter] = useState("");
@@ -45,7 +45,7 @@ function FavsPage() {
     return {
       favorites: store.favorites,
       userData: store.contacts.byId,
-      channelData: store.channels.byId,
+      channelData: store.channels.byId
     };
   });
   const handleFilter = (ftr) => {
@@ -64,10 +64,7 @@ function FavsPage() {
                 const msgs = f.messages || [];
                 return msgs.every((m) => {
                   const file_type = m.properties?.content_type;
-                  return (
-                    m.content_type == ContentTypes.file &&
-                    file_type.startsWith("audio")
-                  );
+                  return m.content_type == ContentTypes.file && file_type.startsWith("audio");
                 });
               })
             );
@@ -80,10 +77,7 @@ function FavsPage() {
                 const msgs = f.messages || [];
                 return msgs.every((m) => {
                   const file_type = m.properties?.content_type;
-                  return (
-                    m.content_type == ContentTypes.file &&
-                    file_type.startsWith("video")
-                  );
+                  return m.content_type == ContentTypes.file && file_type.startsWith("video");
                 });
               })
             );
@@ -106,10 +100,7 @@ function FavsPage() {
               const msgs = f.messages || [];
               return msgs.every((m) => {
                 const file_type = m.properties?.content_type;
-                return (
-                  m.content_type == ContentTypes.file &&
-                  file_type.startsWith("image")
-                );
+                return m.content_type == ContentTypes.file && file_type.startsWith("image");
               });
             });
             setFavs(tmps);
@@ -144,8 +135,8 @@ function FavsPage() {
         {favs.map(({ id, created_at, messages }) => {
           const [
             {
-              source: { gid, uid },
-            },
+              source: { gid, uid }
+            }
           ] = messages;
           const tip = gid ? (
             <span className="from channel">
diff --git a/src/routes/home/ServerDropList.js b/src/routes/home/ServerDropList.js
index 3d8c1556..648b7da0 100644
--- a/src/routes/home/ServerDropList.js
+++ b/src/routes/home/ServerDropList.js
@@ -48,9 +48,7 @@ export default function ServerDropList({ data, memberCount, expand = true }) {
         <img className="logo" src={data.logo} alt="logo" />
         {expand && (
           <div className="info">
-            <h2 className="title animate__animated animate__fadeIn">
-              {data.name}
-            </h2>
+            <h2 className="title animate__animated animate__fadeIn">{data.name}</h2>
             <span className="count">{memberCount} members</span>
           </div>
         )}
diff --git a/src/routes/home/Tools.js b/src/routes/home/Tools.js
index 457b65f8..a6e66288 100644
--- a/src/routes/home/Tools.js
+++ b/src/routes/home/Tools.js
@@ -73,29 +73,19 @@ export default function Tools({ expand = true }) {
               alt="logo"
             />
           </div>
-          {expand && (
-            <h2 className="title animate__animated animate__fadeIn">
-              Webrowse
-            </h2>
-          )}
+          {expand && <h2 className="title animate__animated animate__fadeIn">Webrowse</h2>}
         </li>
         <li className="tool">
           <div className="logo">
             <IoLogoGithub size={40} className="icon" />
           </div>
-          {expand && (
-            <h2 className="title animate__animated animate__fadeIn">Github</h2>
-          )}
+          {expand && <h2 className="title animate__animated animate__fadeIn">Github</h2>}
         </li>
         <li className="tool add">
           <div className="logo">
             <RiAddFill className="icon" size={40} color="#4B5563" />
           </div>
-          {expand && (
-            <h2 className="title animate__animated animate__fadeIn">
-              Add new app
-            </h2>
-          )}
+          {expand && <h2 className="title animate__animated animate__fadeIn">Add new app</h2>}
         </li>
       </ul>
     </StyledWrapper>
diff --git a/src/routes/home/index.js b/src/routes/home/index.js
index a372551e..df83e3a5 100644
--- a/src/routes/home/index.js
+++ b/src/routes/home/index.js
@@ -27,12 +27,12 @@ export default function HomePage() {
     loginUid,
     ui: {
       ready,
-      remeberedNavs: { chat: chatPath, contact: contactPath },
-    },
+      remeberedNavs: { chat: chatPath, contact: contactPath }
+    }
   } = useSelector((store) => {
     return {
       ui: store.ui,
-      loginUid: store.authData.uid,
+      loginUid: store.authData.uid
     };
   });
   const { loading } = usePreload();
@@ -61,10 +61,7 @@ export default function HomePage() {
         <div className={`col left`}>
           <User uid={loginUid} />
           <nav className="link_navs">
-            <NavLink
-              className={`link ${isHomePath ? "active" : ""}`}
-              to={chatNav}
-            >
+            <NavLink className={`link ${isHomePath ? "active" : ""}`} to={chatNav}>
               <Tooltip tip="Chat">
                 <ChatIcon />
               </Tooltip>
diff --git a/src/routes/home/usePreload.js b/src/routes/home/usePreload.js
index 79a0372f..d8f1893a 100644
--- a/src/routes/home/usePreload.js
+++ b/src/routes/home/usePreload.js
@@ -22,8 +22,8 @@ export default function usePreload() {
       isLoading: favoritesLoading,
       isSuccess: favoritesSuccess,
       isError: favoritesError,
-      data: favorites,
-    },
+      data: favorites
+    }
   ] = useLazyGetFavoritesQuery();
   const [
     getContacts,
@@ -31,17 +31,12 @@ export default function usePreload() {
       isLoading: contactsLoading,
       isSuccess: contactsSuccess,
       isError: contactsError,
-      data: contacts,
-    },
+      data: contacts
+    }
   ] = useLazyGetContactsQuery();
   const [
     getServer,
-    {
-      isLoading: serverLoading,
-      isSuccess: serverSuccess,
-      isError: serverError,
-      data: server,
-    },
+    { isLoading: serverLoading, isSuccess: serverSuccess, isError: serverError, data: server }
   ] = useLazyGetServerQuery();
   useEffect(() => {
     initCache();
@@ -64,14 +59,13 @@ export default function usePreload() {
   }, [canStreaming]);
 
   return {
-    loading:
-      contactsLoading || serverLoading || favoritesLoading || !rehydrated,
+    loading: contactsLoading || serverLoading || favoritesLoading || !rehydrated,
     error: contactsError && serverError && favoritesError,
     success: contactsSuccess && serverSuccess && favoritesSuccess,
     data: {
       contacts,
       server,
-      favorites,
-    },
+      favorites
+    }
   };
 }
diff --git a/src/routes/index.js b/src/routes/index.js
index 6bc6045a..9400ae6f 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -29,7 +29,7 @@ import store from "../app/store";
 const PageRoutes = () => {
   const {
     ui: { online },
-    fileMessages,
+    fileMessages
   } = useSelector((store) => {
     return { ui: store.ui, fileMessages: store.fileMessage };
   });
diff --git a/src/routes/invite/index.js b/src/routes/invite/index.js
index c380f2d9..10f86ad6 100644
--- a/src/routes/invite/index.js
+++ b/src/routes/invite/index.js
@@ -15,14 +15,9 @@ export default function InvitePage() {
   const [valid, setValid] = useState(false);
   // const [sp] = useSearchParams();
   // const navigateTo = useNavigate();
-  const [
-    register,
-    { data, isLoading, isSuccess, isError, error },
-  ] = useRegisterMutation();
-  const [
-    checkToken,
-    { data: isValid, isLoading: checkLoading, isSuccess: checkSuccess },
-  ] = useCheckInviteTokenValidMutation();
+  const [register, { data, isLoading, isSuccess, isError, error }] = useRegisterMutation();
+  const [checkToken, { data: isValid, isLoading: checkLoading, isSuccess: checkSuccess }] =
+    useCheckInviteTokenValidMutation();
   useEffect(() => {
     // console.log(search);
     const query = new URLSearchParams(location.search);
@@ -45,7 +40,7 @@ export default function InvitePage() {
   const [input, setInput] = useState({
     name: "",
     email: "",
-    password: "",
+    password: ""
   });
 
   const handleReg = (evt) => {
@@ -58,7 +53,7 @@ export default function InvitePage() {
     register({
       ...input,
       magic_token: token,
-      gender: 1,
+      gender: 1
     });
   };
   const handleInput = (evt) => {
@@ -105,7 +100,7 @@ export default function InvitePage() {
         case 409: {
           const tips = {
             email_conflict: "email conflict",
-            name_conflict: "name conflict",
+            name_conflict: "name conflict"
           };
           toast.error(`Register Failed: ${tips[error.data?.reason]}`);
           break;
@@ -126,11 +121,7 @@ export default function InvitePage() {
     <StyledWrapper>
       <div className="form animate__animated animate__fadeInDown animate__faster">
         <div className="tips">
-          <img
-            src={`${BASE_URL}/resource/organization/logo`}
-            alt="logo"
-            className="logo"
-          />
+          <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
           <h2 className="title">Sign Up to Rustchat</h2>
           <span className="desc">Please enter your details.</span>
         </div>
@@ -170,11 +161,7 @@ export default function InvitePage() {
             onChange={handleSecondPwdInput}
             placeholder="Enter your password again"
           />
-          <button
-            disabled={isLoading || isSuccess}
-            className="btn"
-            type="submit"
-          >
+          <button disabled={isLoading || isSuccess} className="btn" type="submit">
             Sign Up
           </button>
         </form>
diff --git a/src/routes/invite/styled.js b/src/routes/invite/styled.js
index e31c9563..c4b5e936 100644
--- a/src/routes/invite/styled.js
+++ b/src/routes/invite/styled.js
@@ -1,75 +1,75 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 const StyledWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- .form {
-  padding: 36px 40px 32px 40px;
-  /* border: 1px solid #eee; */
-  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-  border-radius: 12px;
-  .tips {
-   display: flex;
-   flex-direction: column;
-   align-items: center;
-   padding-bottom: 24px;
-   .logo {
-    width: 56px;
-    height: 56px;
-    margin-bottom: 28px;
-   }
-   .title {
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 32px;
-    color: #101828;
-    margin-bottom: 8px;
-   }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  .form {
+    padding: 36px 40px 32px 40px;
+    /* border: 1px solid #eee; */
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    border-radius: 12px;
+    .tips {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 24px;
+      .logo {
+        width: 56px;
+        height: 56px;
+        margin-bottom: 28px;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+        color: #101828;
+        margin-bottom: 8px;
+      }
+    }
+    .desc {
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: #667085;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      input {
+        width: 360px;
+        background: #ffffff;
+        border: 1px solid #d0d5dd;
+        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+        padding: 10px 14px;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 24px;
+        color: #667085;
+      }
+    }
+    .btn {
+      display: inline-block;
+      text-align: center;
+      width: 100%;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: #ffffff;
+      padding: 10px;
+      background: #1fe1f9;
+      border: 1px solid #1fe1f9;
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      border-radius: 8px;
+      &.google {
+        color: #344054;
+        border-color: #d0d5dd;
+        background: none;
+      }
+    }
   }
-  .desc {
-   font-weight: normal;
-   font-size: 16px;
-   line-height: 24px;
-   color: #667085;
-  }
-  form {
-   display: flex;
-   flex-direction: column;
-   gap: 20px;
-   input {
-    width: 360px;
-    background: #ffffff;
-    border: 1px solid #d0d5dd;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-    border-radius: 8px;
-    padding: 10px 14px;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 24px;
-    color: #667085;
-   }
-  }
-  .btn {
-   display: inline-block;
-   text-align: center;
-   width: 100%;
-   font-weight: 500;
-   font-size: 16px;
-   line-height: 24px;
-   color: #ffffff;
-   padding: 10px;
-   background: #1fe1f9;
-   border: 1px solid #1fe1f9;
-   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-   border-radius: 8px;
-   &.google {
-    color: #344054;
-    border-color: #d0d5dd;
-    background: none;
-   }
-  }
- }
 `;
 
 export default StyledWrapper;
diff --git a/src/routes/login/GoogleLoginButton.js b/src/routes/login/GoogleLoginButton.js
index bd7d1d59..99ddcc26 100644
--- a/src/routes/login/GoogleLoginButton.js
+++ b/src/routes/login/GoogleLoginButton.js
@@ -13,12 +13,12 @@ export default function GoogleLoginButton({ login, clientId }) {
       console.info("google oauth success", tokenId, rest);
       login({
         id_token: tokenId,
-        type: "google",
+        type: "google"
       });
     },
     onFailure: (wtf) => {
       console.error("google login failure", wtf);
-    },
+    }
   });
   const handleGoogleLogin = () => {
     signIn();
diff --git a/src/routes/login/MagicLinkLogin.js b/src/routes/login/MagicLinkLogin.js
index b08bf5c2..b26f57cc 100644
--- a/src/routes/login/MagicLinkLogin.js
+++ b/src/routes/login/MagicLinkLogin.js
@@ -12,9 +12,5 @@ export default function MagicLinkLogin() {
     navigate("/send_magic_link");
     // signIn();
   };
-  return (
-    <StyledMagicButton onClick={handleGoogleLogin}>
-      Sign in with Magic Link
-    </StyledMagicButton>
-  );
+  return <StyledMagicButton onClick={handleGoogleLogin}>Sign in with Magic Link</StyledMagicButton>;
 }
diff --git a/src/routes/login/MetamaskLoginButton.js b/src/routes/login/MetamaskLoginButton.js
index f20a706f..ece863ee 100644
--- a/src/routes/login/MetamaskLoginButton.js
+++ b/src/routes/login/MetamaskLoginButton.js
@@ -37,7 +37,7 @@ export default function MetamaskLoginButton({ login }) {
           public_address: address,
           nonce,
           signature,
-          type: "metamask",
+          type: "metamask"
         });
       }
     };
@@ -58,7 +58,7 @@ export default function MetamaskLoginButton({ login }) {
     console.log("get sn");
     const signature = await ethereum.request({
       method: "personal_sign",
-      params: [nonce, address, "hello from rustchat"],
+      params: [nonce, address, "hello from rustchat"]
     });
     return signature;
   };
@@ -68,14 +68,14 @@ export default function MetamaskLoginButton({ login }) {
       setRequesting(true);
       try {
         const tmps = await ethereum.request({
-          method: "eth_requestAccounts",
+          method: "eth_requestAccounts"
         });
         setAccounts(tmps);
       } catch (error) {
         // toast.error(error.message);
         ethereum.request({
           method: "wallet_requestPermissions",
-          params: [{ eth_accounts: {} }],
+          params: [{ eth_accounts: {} }]
         });
         // setRequesting(false);
       }
diff --git a/src/routes/login/SolidLoginButton.js b/src/routes/login/SolidLoginButton.js
index ba86cff3..8dada153 100644
--- a/src/routes/login/SolidLoginButton.js
+++ b/src/routes/login/SolidLoginButton.js
@@ -11,7 +11,7 @@ export default function SolidLoginButton({ issuers }) {
     getOpenId({
       // issuer: "solidweb.org",
       issuer: issuers[0],
-      redirect_uri: `${location.origin}/#/login`,
+      redirect_uri: `${location.origin}/#/login`
     });
   };
   useEffect(() => {
diff --git a/src/routes/login/index.js b/src/routes/login/index.js
index 35e6a8b7..f4695636 100644
--- a/src/routes/login/index.js
+++ b/src/routes/login/index.js
@@ -11,10 +11,7 @@ import Button from "../../common/component/styled/Button";
 import GoogleLoginButton from "./GoogleLoginButton";
 import MagicLinkLogin from "./MagicLinkLogin";
 import { useLoginMutation } from "../../app/services/auth";
-import {
-  useGetLoginConfigQuery,
-  useGetSMTPStatusQuery,
-} from "../../app/services/server";
+import { useGetLoginConfigQuery, useGetSMTPStatusQuery } from "../../app/services/server";
 import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
 import GithubLoginButton from "./GithubLoginButton";
 import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
@@ -23,13 +20,10 @@ export default function LoginPage() {
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   const { clientId } = useGoogleAuthConfig();
   const { config: githubAuthConfig } = useGithubAuthConfig();
-  const {
-    data: loginConfig,
-    isSuccess: loginConfigSuccess,
-  } = useGetLoginConfigQuery();
+  const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
   const [input, setInput] = useState({
     email: "",
-    password: "",
+    password: ""
   });
   useEffect(() => {
     const query = new URLSearchParams(location.search);
@@ -45,7 +39,7 @@ export default function LoginPage() {
           if (code) {
             login({
               code: code,
-              type: "github",
+              type: "github"
             });
           }
           break;
@@ -54,7 +48,7 @@ export default function LoginPage() {
             login({
               code,
               state,
-              type: "oidc",
+              type: "oidc"
             });
           }
           break;
@@ -70,7 +64,7 @@ export default function LoginPage() {
         // login
         login({
           token,
-          type: "magiclink",
+          type: "magiclink"
         });
       } else {
         // reg
@@ -111,7 +105,7 @@ export default function LoginPage() {
     console.log("wtf", input);
     login({
       ...input,
-      type: "password",
+      type: "password"
     });
   };
 
@@ -131,25 +125,17 @@ export default function LoginPage() {
     github: enableGithubLogin,
     google: enableGoogleLogin,
     metamask: enableMetamaskLogin,
-    oidc = [],
+    oidc = []
   } = loginConfig;
   const enableMagicLink = enableSMTP && magic_link;
   const googleLogin = enableGoogleLogin && clientId;
   const hasDivider =
-    enableMagicLink ||
-    googleLogin ||
-    enableMetamaskLogin ||
-    oidc.length > 0 ||
-    enableGithubLogin;
+    enableMagicLink || googleLogin || enableMetamaskLogin || oidc.length > 0 || enableGithubLogin;
   return (
     <StyledWrapper>
       <div className="form">
         <div className="tips">
-          <img
-            src={`${BASE_URL}/resource/organization/logo`}
-            alt="logo"
-            className="logo"
-          />
+          <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
           <h2 className="title">Login to Rustchat</h2>
           <span className="desc">Please enter your details.</span>
         </div>
diff --git a/src/routes/login/styled.js b/src/routes/login/styled.js
index 796168d3..8c32ae0a 100644
--- a/src/routes/login/styled.js
+++ b/src/routes/login/styled.js
@@ -23,8 +23,7 @@ const StyledWrapper = styled.div`
   .form {
     padding: 36px 40px 32px 40px;
     /* border: 1px solid #eee; */
-    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
     border-radius: 12px;
     .tips {
       display: flex;
diff --git a/src/routes/oauth/index.js b/src/routes/oauth/index.js
index 1a2d9d09..4a428e96 100644
--- a/src/routes/oauth/index.js
+++ b/src/routes/oauth/index.js
@@ -8,10 +8,7 @@ import toast from "react-hot-toast";
 import { setAuthData } from "../../app/slices/auth.data";
 
 export default function OAuthPage() {
-  const [
-    login,
-    { data, isSuccess, isError, error: loginError },
-  ] = useLoginMutation();
+  const [login, { data, isSuccess, isError, error: loginError }] = useLoginMutation();
   const { token } = useParams();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
diff --git a/src/routes/oauth/styled.js b/src/routes/oauth/styled.js
index e31c9563..c4b5e936 100644
--- a/src/routes/oauth/styled.js
+++ b/src/routes/oauth/styled.js
@@ -1,75 +1,75 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 const StyledWrapper = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- .form {
-  padding: 36px 40px 32px 40px;
-  /* border: 1px solid #eee; */
-  box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-  border-radius: 12px;
-  .tips {
-   display: flex;
-   flex-direction: column;
-   align-items: center;
-   padding-bottom: 24px;
-   .logo {
-    width: 56px;
-    height: 56px;
-    margin-bottom: 28px;
-   }
-   .title {
-    font-weight: 600;
-    font-size: 24px;
-    line-height: 32px;
-    color: #101828;
-    margin-bottom: 8px;
-   }
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  .form {
+    padding: 36px 40px 32px 40px;
+    /* border: 1px solid #eee; */
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    border-radius: 12px;
+    .tips {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-bottom: 24px;
+      .logo {
+        width: 56px;
+        height: 56px;
+        margin-bottom: 28px;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+        color: #101828;
+        margin-bottom: 8px;
+      }
+    }
+    .desc {
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 24px;
+      color: #667085;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      input {
+        width: 360px;
+        background: #ffffff;
+        border: 1px solid #d0d5dd;
+        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+        border-radius: 8px;
+        padding: 10px 14px;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 24px;
+        color: #667085;
+      }
+    }
+    .btn {
+      display: inline-block;
+      text-align: center;
+      width: 100%;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: #ffffff;
+      padding: 10px;
+      background: #1fe1f9;
+      border: 1px solid #1fe1f9;
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      border-radius: 8px;
+      &.google {
+        color: #344054;
+        border-color: #d0d5dd;
+        background: none;
+      }
+    }
   }
-  .desc {
-   font-weight: normal;
-   font-size: 16px;
-   line-height: 24px;
-   color: #667085;
-  }
-  form {
-   display: flex;
-   flex-direction: column;
-   gap: 20px;
-   input {
-    width: 360px;
-    background: #ffffff;
-    border: 1px solid #d0d5dd;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-    border-radius: 8px;
-    padding: 10px 14px;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 24px;
-    color: #667085;
-   }
-  }
-  .btn {
-   display: inline-block;
-   text-align: center;
-   width: 100%;
-   font-weight: 500;
-   font-size: 16px;
-   line-height: 24px;
-   color: #ffffff;
-   padding: 10px;
-   background: #1fe1f9;
-   border: 1px solid #1fe1f9;
-   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-   border-radius: 8px;
-   &.google {
-    color: #344054;
-    border-color: #d0d5dd;
-    background: none;
-   }
-  }
- }
 `;
 
 export default StyledWrapper;
diff --git a/src/routes/onboarding/index.js b/src/routes/onboarding/index.js
index f530cba3..7ccd131a 100644
--- a/src/routes/onboarding/index.js
+++ b/src/routes/onboarding/index.js
@@ -10,26 +10,26 @@ import CompletedStep from "./steps/6-completed";
 import StyledOnboardingPage from "./styled";
 
 export default function OnboardingPage() {
- const [step, setStep] = useState(0);
- const [data, setData] = useState({
-  serverName: ""
- });
- const props = { setStep, data, setData };
+  const [step, setStep] = useState(0);
+  const [data, setData] = useState({
+    serverName: ""
+  });
+  const props = { setStep, data, setData };
 
- return (
-  <>
-   <Helmet>
-    <title>Rustchat Setup</title>
-   </Helmet>
-   <StyledOnboardingPage>
-    {step === 0 && <WelcomeStep {...props} />}
-    {step === 1 && <ServerNameStep {...props} />}
-    {step === 2 && <AdminCredentialsStep {...props} />}
-    {step === 3 && <InviteRuleStep {...props} />}
-    {step === 4 && <InviteLinkStep {...props} />}
-    {step === 5 && <CompletedStep {...props} />}
-    {step === 6 && <Navigate replace to="/" />}
-   </StyledOnboardingPage>
-  </>
- );
+  return (
+    <>
+      <Helmet>
+        <title>Rustchat Setup</title>
+      </Helmet>
+      <StyledOnboardingPage>
+        {step === 0 && <WelcomeStep {...props} />}
+        {step === 1 && <ServerNameStep {...props} />}
+        {step === 2 && <AdminCredentialsStep {...props} />}
+        {step === 3 && <InviteRuleStep {...props} />}
+        {step === 4 && <InviteLinkStep {...props} />}
+        {step === 5 && <CompletedStep {...props} />}
+        {step === 6 && <Navigate replace to="/" />}
+      </StyledOnboardingPage>
+    </>
+  );
 }
diff --git a/src/routes/onboarding/steps/1-welcome.js b/src/routes/onboarding/steps/1-welcome.js
index 6d274acc..36e699b5 100644
--- a/src/routes/onboarding/steps/1-welcome.js
+++ b/src/routes/onboarding/steps/1-welcome.js
@@ -3,24 +3,24 @@ import StyledButton from "../../../common/component/styled/Button";
 import PlayIcon from "../../../assets/icons/play.svg?url";
 
 const StyledFirstStep = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 `;
 
 export default function WelcomeStep({ setStep }) {
- return (
-  <StyledFirstStep>
-   <span className="primaryText">Welcome to your Rustchat!</span>
-   <span className="secondaryText">
-    Everything in this space is owned by you. Let’s set up your space!
-   </span>
-   <StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
-    <img src={PlayIcon} alt="play icon" />
-    <span>Start</span>
-   </StyledButton>
-  </StyledFirstStep>
- );
+  return (
+    <StyledFirstStep>
+      <span className="primaryText">Welcome to your Rustchat!</span>
+      <span className="secondaryText">
+        Everything in this space is owned by you. Let’s set up your space!
+      </span>
+      <StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
+        <img src={PlayIcon} alt="play icon" />
+        <span>Start</span>
+      </StyledButton>
+    </StyledFirstStep>
+  );
 }
diff --git a/src/routes/onboarding/steps/2-serverName.js b/src/routes/onboarding/steps/2-serverName.js
index 8fe3d849..45b9db07 100644
--- a/src/routes/onboarding/steps/2-serverName.js
+++ b/src/routes/onboarding/steps/2-serverName.js
@@ -4,52 +4,52 @@ import StyledInput from "../../../common/component/styled/Input";
 import StyledButton from "../../../common/component/styled/Button";
 
 const StyledSpaceNameStep = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
- > .secondaryText {
-  color: #667085;
- }
+  > .secondaryText {
+    color: #667085;
+  }
 
- > .button {
-  margin-top: 24px;
- }
+  > .button {
+    margin-top: 24px;
+  }
 `;
 
 export default function ServerNameStep({ setStep, data, setData }) {
- return (
-  <StyledSpaceNameStep>
-   <span className="primaryText">Create a new server</span>
-   <span className="secondaryText">
-    Servers are shared environments where teams can work on projects and chat.
-   </span>
-   <StyledInput
-    className="input"
-    placeholder="Enter server name"
-    value={data.serverName}
-    onChange={(e) =>
-     setData({
-      ...data,
-      serverName: e.target.value
-     })
-    }
-   />
-   <StyledButton
-    className="button"
-    onClick={() => {
-     // Verification for space name
-     if (data.serverName === "") {
-      toast.error("Please enter server name!");
-      return;
-     }
-     setStep((prev) => prev + 1);
-    }}
-   >
-    Create Server
-   </StyledButton>
-  </StyledSpaceNameStep>
- );
+  return (
+    <StyledSpaceNameStep>
+      <span className="primaryText">Create a new server</span>
+      <span className="secondaryText">
+        Servers are shared environments where teams can work on projects and chat.
+      </span>
+      <StyledInput
+        className="input"
+        placeholder="Enter server name"
+        value={data.serverName}
+        onChange={(e) =>
+          setData({
+            ...data,
+            serverName: e.target.value
+          })
+        }
+      />
+      <StyledButton
+        className="button"
+        onClick={() => {
+          // Verification for space name
+          if (data.serverName === "") {
+            toast.error("Please enter server name!");
+            return;
+          }
+          setStep((prev) => prev + 1);
+        }}
+      >
+        Create Server
+      </StyledButton>
+    </StyledSpaceNameStep>
+  );
 }
diff --git a/src/routes/onboarding/steps/3-adminCredentials.js b/src/routes/onboarding/steps/3-adminCredentials.js
index f0b507fd..49e73a61 100644
--- a/src/routes/onboarding/steps/3-adminCredentials.js
+++ b/src/routes/onboarding/steps/3-adminCredentials.js
@@ -5,127 +5,127 @@ import { useDispatch } from "react-redux";
 import StyledInput from "../../../common/component/styled/Input";
 import StyledButton from "../../../common/component/styled/Button";
 import {
- useCreateAdminMutation,
- useGetServerQuery,
- useUpdateServerMutation
+  useCreateAdminMutation,
+  useGetServerQuery,
+  useUpdateServerMutation
 } from "../../../app/services/server";
 import { useLoginMutation } from "../../../app/services/auth";
 import { updateInitialized } from "../../../app/slices/auth.data";
 
 const StyledAdminCredentialsStep = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
- > .input:not(:nth-last-child(2)) {
-  margin-bottom: 20px;
- }
+  > .input:not(:nth-last-child(2)) {
+    margin-bottom: 20px;
+  }
 
- > .button {
-  margin-top: 24px;
- }
+  > .button {
+    margin-top: 24px;
+  }
 `;
 
 export default function AdminCredentialsStep({ data, setStep }) {
- const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
- const [createAdmin, { isLoading: isSigningUp, error: signUpError }] = useCreateAdminMutation();
- const [login, { isLoading: isLoggingIn, isSuccess: isLoggedIn, error: loginError }] =
-  useLoginMutation();
- const { data: serverData } = useGetServerQuery();
- const [updateServer, { isLoading: isUpdatingServer, isSuccess: isUpdatedServer }] =
-  useUpdateServerMutation();
+  const [createAdmin, { isLoading: isSigningUp, error: signUpError }] = useCreateAdminMutation();
+  const [login, { isLoading: isLoggingIn, isSuccess: isLoggedIn, error: loginError }] =
+    useLoginMutation();
+  const { data: serverData } = useGetServerQuery();
+  const [updateServer, { isLoading: isUpdatingServer, isSuccess: isUpdatedServer }] =
+    useUpdateServerMutation();
 
- const [email, setEmail] = useState("");
- const [password, setPassword] = useState("");
- const [confirm, setConfirm] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
 
- // Display error
- useEffect(() => {
-  if (signUpError === undefined) return;
-  toast.error(`Failed to sign up: ${signUpError.data}`);
- }, [signUpError]);
- useEffect(() => {
-  if (loginError === undefined) return;
-  toast.error(`Login failed: ${loginError.data}`);
- }, [loginError]);
+  // Display error
+  useEffect(() => {
+    if (signUpError === undefined) return;
+    toast.error(`Failed to sign up: ${signUpError.data}`);
+  }, [signUpError]);
+  useEffect(() => {
+    if (loginError === undefined) return;
+    toast.error(`Login failed: ${loginError.data}`);
+  }, [loginError]);
 
- // After logged in
- useEffect(() => {
-  if (isLoggedIn) {
-   dispatch(updateInitialized(true));
-   setTimeout(() => {
-    // Set server name
-    updateServer({
-     ...serverData,
-     name: data.serverName
-    });
-   }, 0);
-  }
- }, [isLoggedIn]);
+  // After logged in
+  useEffect(() => {
+    if (isLoggedIn) {
+      dispatch(updateInitialized(true));
+      setTimeout(() => {
+        // Set server name
+        updateServer({
+          ...serverData,
+          name: data.serverName
+        });
+      }, 0);
+    }
+  }, [isLoggedIn]);
 
- // After updated server
- useEffect(() => {
-  if (isUpdatedServer) {
-   setStep((prev) => prev + 1);
-  }
- }, [isUpdatedServer]);
+  // After updated server
+  useEffect(() => {
+    if (isUpdatedServer) {
+      setStep((prev) => prev + 1);
+    }
+  }, [isUpdatedServer]);
 
- return (
-  <StyledAdminCredentialsStep>
-   <span className="primaryText">Now let’s set up your admin account</span>
-   <span className="secondaryText">You are the 1st user and admin of your space!</span>
-   <StyledInput
-    className="input"
-    placeholder="Enter your email"
-    value={email}
-    onChange={(e) => setEmail(e.target.value)}
-   />
-   <StyledInput
-    className="input"
-    type="password"
-    placeholder="Enter your password"
-    value={password}
-    onChange={(e) => setPassword(e.target.value)}
-   />
-   <StyledInput
-    className="input"
-    type="password"
-    placeholder="Confirm your password"
-    value={confirm}
-    onChange={(e) => setConfirm(e.target.value)}
-   />
-   <StyledButton
-    className="button"
-    onClick={async () => {
-     // Verification for admin credentials
-     if (email === "") {
-      toast.error("Please enter admin email!");
-      return;
-     } else if (password === "") {
-      toast.error("Please enter admin password!");
-      return;
-     } else if (password !== confirm) {
-      toast.error("Two passwords do not match!");
-      return;
-     }
-     await createAdmin({
-      email,
-      name: "Admin",
-      password,
-      gender: 0
-     });
-     await login({
-      email,
-      password,
-      type: "password"
-     });
-    }}
-   >
-    {!(isSigningUp || isLoggingIn || isUpdatingServer) ? "Sign Up" : "..."}
-   </StyledButton>
-  </StyledAdminCredentialsStep>
- );
+  return (
+    <StyledAdminCredentialsStep>
+      <span className="primaryText">Now let’s set up your admin account</span>
+      <span className="secondaryText">You are the 1st user and admin of your space!</span>
+      <StyledInput
+        className="input"
+        placeholder="Enter your email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <StyledInput
+        className="input"
+        type="password"
+        placeholder="Enter your password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <StyledInput
+        className="input"
+        type="password"
+        placeholder="Confirm your password"
+        value={confirm}
+        onChange={(e) => setConfirm(e.target.value)}
+      />
+      <StyledButton
+        className="button"
+        onClick={async () => {
+          // Verification for admin credentials
+          if (email === "") {
+            toast.error("Please enter admin email!");
+            return;
+          } else if (password === "") {
+            toast.error("Please enter admin password!");
+            return;
+          } else if (password !== confirm) {
+            toast.error("Two passwords do not match!");
+            return;
+          }
+          await createAdmin({
+            email,
+            name: "Admin",
+            password,
+            gender: 0
+          });
+          await login({
+            email,
+            password,
+            type: "password"
+          });
+        }}
+      >
+        {!(isSigningUp || isLoggingIn || isUpdatingServer) ? "Sign Up" : "..."}
+      </StyledButton>
+    </StyledAdminCredentialsStep>
+  );
 }
diff --git a/src/routes/onboarding/steps/4-inviteRule.js b/src/routes/onboarding/steps/4-inviteRule.js
index 0945e9a0..33cdae9f 100644
--- a/src/routes/onboarding/steps/4-inviteRule.js
+++ b/src/routes/onboarding/steps/4-inviteRule.js
@@ -6,55 +6,58 @@ import StyledButton from "../../../common/component/styled/Button";
 import { useGetLoginConfigQuery, useUpdateLoginConfigMutation } from "../../../app/services/server";
 
 const StyledInviteRuleStep = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
- > .input:not(:nth-last-child(2)) {
-  margin-bottom: 20px;
- }
+  > .input:not(:nth-last-child(2)) {
+    margin-bottom: 20px;
+  }
 `;
 
 export default function InviteRuleStep({ setStep }) {
- const { data: loginConfig } = useGetLoginConfigQuery();
- const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
+  const { data: loginConfig } = useGetLoginConfigQuery();
+  const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
 
- const [value, setValue] = useState(0);
+  const [value, setValue] = useState(0);
 
- // Display error
- useEffect(() => {
-  if (error === undefined) return;
-  toast.error(`Failed to update invitation rule: ${error.data}`);
- }, [error]);
+  // Display error
+  useEffect(() => {
+    if (error === undefined) return;
+    toast.error(`Failed to update invitation rule: ${error.data}`);
+  }, [error]);
 
- // Increment `step` when updating has completed
- useEffect(() => {
-  if (isSuccess) setStep((prev) => prev + 1);
- }, [isSuccess]);
+  // Increment `step` when updating has completed
+  useEffect(() => {
+    if (isSuccess) setStep((prev) => prev + 1);
+  }, [isSuccess]);
 
- return (
-  <StyledInviteRuleStep>
-   <span className="primaryText">Last step: invite others!</span>
-   <span className="secondaryText">Firstly, who can sign up to this server?</span>
-   <StyledRadio
-    options={["Everyone", "Invitation link only"]}
-    value={value}
-    onChange={async (v) => {
-     setValue(v);
-     if (loginConfig !== undefined) {
-      const whoCanSignUp = ["EveryOne", "InvitationOnly"][v];
-      await updateLoginConfig({
-       ...loginConfig,
-       who_can_sign_up: whoCanSignUp
-      });
-     }
-    }}
-   />
-   <StyledButton className="button border_less ghost" onClick={() => setStep((prev) => prev + 1)}>
-    Skip
-   </StyledButton>
-  </StyledInviteRuleStep>
- );
+  return (
+    <StyledInviteRuleStep>
+      <span className="primaryText">Last step: invite others!</span>
+      <span className="secondaryText">Firstly, who can sign up to this server?</span>
+      <StyledRadio
+        options={["Everyone", "Invitation link only"]}
+        value={value}
+        onChange={async (v) => {
+          setValue(v);
+          if (loginConfig !== undefined) {
+            const whoCanSignUp = ["EveryOne", "InvitationOnly"][v];
+            await updateLoginConfig({
+              ...loginConfig,
+              who_can_sign_up: whoCanSignUp
+            });
+          }
+        }}
+      />
+      <StyledButton
+        className="button border_less ghost"
+        onClick={() => setStep((prev) => prev + 1)}
+      >
+        Skip
+      </StyledButton>
+    </StyledInviteRuleStep>
+  );
 }
diff --git a/src/routes/onboarding/steps/5-inviteLink.js b/src/routes/onboarding/steps/5-inviteLink.js
index 14e79c85..488e51ef 100644
--- a/src/routes/onboarding/steps/5-inviteLink.js
+++ b/src/routes/onboarding/steps/5-inviteLink.js
@@ -4,70 +4,73 @@ import StyledButton from "../../../common/component/styled/Button";
 import useInviteLink from "../../../common/hook/useInviteLink";
 
 const StyledInviteLinkStep = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- > .secondaryText {
-  margin-bottom: 40px;
- }
-
- > .tip {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  color: #475467;
-  margin-bottom: 8px;
- }
-
- > .link {
-  position: relative;
-  background: #ffffff;
-  border: 1px solid #f4f4f5;
-  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
-  border-radius: 4px;
-  width: 374px;
+  height: 100%;
   display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
-  > input {
-   border: none;
-   box-shadow: none;
-   padding: 11px 0 11px 8px;
-   font-weight: 400;
-   font-size: 14px;
-   line-height: 20px;
-   color: #78787c;
+  > .secondaryText {
+    margin-bottom: 40px;
   }
 
-  > button {
-   padding: 0 8px;
-   font-weight: 500;
-   font-size: 14px;
-   line-height: 20px;
-   color: #22ccee;
+  > .tip {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #475467;
+    margin-bottom: 8px;
+  }
+
+  > .link {
+    position: relative;
+    background: #ffffff;
+    border: 1px solid #f4f4f5;
+    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
+    border-radius: 4px;
+    width: 374px;
+    display: flex;
+
+    > input {
+      border: none;
+      box-shadow: none;
+      padding: 11px 0 11px 8px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: #78787c;
+    }
+
+    > button {
+      padding: 0 8px;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      color: #22ccee;
+    }
   }
- }
 `;
 
 export default function InviteLinkStep({ setStep }) {
- const { link, linkCopied, copyLink } = useInviteLink();
+  const { link, linkCopied, copyLink } = useInviteLink();
 
- return (
-  <StyledInviteLinkStep>
-   <span className="primaryText">Last step: invite others!</span>
-   <span className="secondaryText">Now let’s invite others!</span>
-   <span className="tip">Send invitation link to your future community members:</span>
-   <div className="link">
-    <StyledInput className="large" readOnly placeholder="Generating" value={link} />
-    <StyledButton onClick={copyLink} className="ghost small border_less">
-     {linkCopied ? "Copied" : `Copy`}
-    </StyledButton>
-   </div>
-   <StyledButton className="button border_less ghost" onClick={() => setStep((prev) => prev + 1)}>
-    Skip
-   </StyledButton>
-  </StyledInviteLinkStep>
- );
+  return (
+    <StyledInviteLinkStep>
+      <span className="primaryText">Last step: invite others!</span>
+      <span className="secondaryText">Now let’s invite others!</span>
+      <span className="tip">Send invitation link to your future community members:</span>
+      <div className="link">
+        <StyledInput className="large" readOnly placeholder="Generating" value={link} />
+        <StyledButton onClick={copyLink} className="ghost small border_less">
+          {linkCopied ? "Copied" : `Copy`}
+        </StyledButton>
+      </div>
+      <StyledButton
+        className="button border_less ghost"
+        onClick={() => setStep((prev) => prev + 1)}
+      >
+        Skip
+      </StyledButton>
+    </StyledInviteLinkStep>
+  );
 }
diff --git a/src/routes/onboarding/steps/6-completed.js b/src/routes/onboarding/steps/6-completed.js
index 616b23b7..9a18a675 100644
--- a/src/routes/onboarding/steps/6-completed.js
+++ b/src/routes/onboarding/steps/6-completed.js
@@ -3,42 +3,42 @@ import StyledButton from "../../../common/component/styled/Button";
 import PlayIcon from "../../../assets/icons/play.svg?url";
 
 const StyledLastStep = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
- > .secondaryText {
-  margin-bottom: 48px;
- }
-
- > .tip {
-  width: 560px;
-  font-size: 20px;
-  line-height: 24px;
-  text-align: center;
-  margin-bottom: 96px;
-
-  > .strong {
-   font-weight: 700;
+  > .secondaryText {
+    margin-bottom: 48px;
+  }
+
+  > .tip {
+    width: 560px;
+    font-size: 20px;
+    line-height: 24px;
+    text-align: center;
+    margin-bottom: 96px;
+
+    > .strong {
+      font-weight: 700;
+    }
   }
- }
 `;
 
 export default function CompletedStep({ data, setStep }) {
- return (
-  <StyledLastStep>
-   <span className="primaryText">Welcome to {data.serverName}</span>
-   <span className="secondaryText">Proudly presented by Rustchat</span>
-   <span className="tip">
-    More settings, including domain resolution, privileges, securities, and invites are available in{" "}
-    <span className="strong">Settings</span>
-   </span>
-   <StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
-    <img src={PlayIcon} alt="play icon" />
-    <span>Enter</span>
-   </StyledButton>
-  </StyledLastStep>
- );
+  return (
+    <StyledLastStep>
+      <span className="primaryText">Welcome to {data.serverName}</span>
+      <span className="secondaryText">Proudly presented by Rustchat</span>
+      <span className="tip">
+        More settings, including domain resolution, privileges, securities, and invites are
+        available in <span className="strong">Settings</span>
+      </span>
+      <StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
+        <img src={PlayIcon} alt="play icon" />
+        <span>Enter</span>
+      </StyledButton>
+    </StyledLastStep>
+  );
 }
diff --git a/src/routes/onboarding/styled.js b/src/routes/onboarding/styled.js
index bcf409ad..f6333910 100644
--- a/src/routes/onboarding/styled.js
+++ b/src/routes/onboarding/styled.js
@@ -1,75 +1,75 @@
 import styled from "styled-components";
 
 const StyledOnboardingPage = styled.div`
- height: 100vh;
- overflow-y: auto;
+  height: 100vh;
+  overflow-y: auto;
 
- // shared with child components
- .primaryText,
- .secondaryText {
-  text-align: center;
- }
-
- .primaryText {
-  font-weight: 700;
-  font-size: 24px;
-  line-height: 30px;
-  margin-bottom: 8px;
- }
-
- .secondaryText {
-  font-size: 14px;
-  line-height: 20px;
-  margin-bottom: 24px;
- }
-
- .startButton {
-  width: 128px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 15px 0 12px;
-
-  > img {
-   margin-bottom: 7px;
+  // shared with child components
+  .primaryText,
+  .secondaryText {
+    text-align: center;
   }
 
-  > span {
-   font-weight: 500;
-   font-size: 14px;
-   line-height: 20px;
+  .primaryText {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 30px;
+    margin-bottom: 8px;
   }
- }
 
- .input {
-  width: 360px;
-  height: 44px;
-  border: none;
-  box-shadow: none;
- }
-
- input.input {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  padding: 10px 14px;
-  border: 1px solid #d0d5dd;
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
- }
-
- .button {
-  width: 360px;
-
-  &.ghost.border_less {
-   width: fit-content;
-   font-weight: 500;
-   font-size: 16px;
-   line-height: 24px;
-   color: #98a2b3;
-   margin-top: 14px;
+  .secondaryText {
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 24px;
+  }
+
+  .startButton {
+    width: 128px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 15px 0 12px;
+
+    > img {
+      margin-bottom: 7px;
+    }
+
+    > span {
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  .input {
+    width: 360px;
+    height: 44px;
+    border: none;
+    box-shadow: none;
+  }
+
+  input.input {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    padding: 10px 14px;
+    border: 1px solid #d0d5dd;
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+  }
+
+  .button {
+    width: 360px;
+
+    &.ghost.border_less {
+      width: fit-content;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      color: #98a2b3;
+      margin-top: 14px;
+    }
   }
- }
 `;
 
 export default StyledOnboardingPage;
diff --git a/src/routes/reg/ExpiredTip.js b/src/routes/reg/ExpiredTip.js
index e590ba09..7a6f44c1 100644
--- a/src/routes/reg/ExpiredTip.js
+++ b/src/routes/reg/ExpiredTip.js
@@ -26,9 +26,7 @@ export default function ExpiredTip() {
   return (
     <Styled>
       <div className="title">Magic link expired</div>
-      <p className="desc">
-        Go back to your original Rustchat tab and request a new magic link.
-      </p>
+      <p className="desc">Go back to your original Rustchat tab and request a new magic link.</p>
       <p className="desc">You can close this window now.</p>
     </Styled>
   );
diff --git a/src/routes/reg/RegWithUsername.js b/src/routes/reg/RegWithUsername.js
index 3851d48a..14ad4fa7 100644
--- a/src/routes/reg/RegWithUsername.js
+++ b/src/routes/reg/RegWithUsername.js
@@ -8,19 +8,14 @@ import { setAuthData } from "../../app/slices/auth.data";
 
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
-import {
-  useLoginMutation,
-  useCheckInviteTokenValidMutation,
-} from "../../app/services/auth";
+import { useLoginMutation, useCheckInviteTokenValidMutation } from "../../app/services/auth";
 import toast from "react-hot-toast";
 import ExpiredTip from "./ExpiredTip";
 
 export default function RegWithUsername() {
   const { token } = useParams();
-  const [
-    checkTokenInvalid,
-    { data: isTokenValid, isLoading: checkingToken },
-  ] = useCheckInviteTokenValidMutation();
+  const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
+    useCheckInviteTokenValidMutation();
   const [login, { isLoading, error, isSuccess, data }] = useLoginMutation();
   // const navigateTo = useNavigate();
   const dispatch = useDispatch();
@@ -57,7 +52,7 @@ export default function RegWithUsername() {
     login({
       token,
       username,
-      type: "magiclink",
+      type: "magiclink"
     });
     // sendMagicLink(email);
   };
@@ -74,8 +69,8 @@ export default function RegWithUsername() {
       <div className="tips">
         <h2 className="title">What’s your name</h2>
         <span className="desc">
-          Enter a name or handle so people know how you’d like to be called.
-          Your name will only be visible to others in spaces you joined.
+          Enter a name or handle so people know how you’d like to be called. Your name will only be
+          visible to others in spaces you joined.
         </span>
       </div>
       <form onSubmit={handleLogin}>
diff --git a/src/routes/reg/styled.js b/src/routes/reg/styled.js
index 915d9423..e7d03a46 100644
--- a/src/routes/reg/styled.js
+++ b/src/routes/reg/styled.js
@@ -7,8 +7,7 @@ const StyledWrapper = styled.div`
   .form {
     max-width: 440px;
     padding: 36px 40px 32px 40px;
-    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
     border-radius: 12px;
     .tips {
       display: flex;
diff --git a/src/routes/resources/Filter/Channel.js b/src/routes/resources/Filter/Channel.js
index 812b1307..8303152a 100644
--- a/src/routes/resources/Filter/Channel.js
+++ b/src/routes/resources/Filter/Channel.js
@@ -70,11 +70,7 @@ export default function Channel({ select = "", updateFilter }) {
         </li>
         {channels.map(({ gid, is_public, name }) => {
           return (
-            <li
-              key={gid}
-              className="channel"
-              onClick={handleClick.bind(null, gid)}
-            >
+            <li key={gid} className="channel" onClick={handleClick.bind(null, gid)}>
               <ChannelIcon personal={!is_public} />
               <span className="name">{name}</span>
               {select == gid && <CheckSign className="check" />}
diff --git a/src/routes/resources/Filter/Date.js b/src/routes/resources/Filter/Date.js
index b33e2282..797f375a 100644
--- a/src/routes/resources/Filter/Date.js
+++ b/src/routes/resources/Filter/Date.js
@@ -42,20 +42,20 @@ const Styled = styled.div`
 export const Dates = {
   today: {
     title: "Today",
-    duration: 2222,
+    duration: 2222
   },
   in7d: {
-    title: "Last 7 Days",
+    title: "Last 7 Days"
   },
   in30d: {
-    title: "Last 30 Days",
+    title: "Last 30 Days"
   },
   in3m: {
-    title: "Last 3 months",
+    title: "Last 3 months"
   },
   in12m: {
-    title: "Last 12 months",
-  },
+    title: "Last 12 months"
+  }
 };
 export default function Date({ select = "", updateFilter }) {
   // const { input, updateInput, contacts } = useFilteredUsers();
@@ -75,11 +75,7 @@ export default function Date({ select = "", updateFilter }) {
         </li>
         {Object.entries(Dates).map(([_key, { title }]) => {
           return (
-            <li
-              key={title}
-              className="date"
-              onClick={handleClick.bind(null, _key)}
-            >
+            <li key={title} className="date" onClick={handleClick.bind(null, _key)}>
               {title}
               {select == _key && <CheckSign className="check" />}
             </li>
diff --git a/src/routes/resources/Filter/From.js b/src/routes/resources/Filter/From.js
index f38afd24..5e65f181 100644
--- a/src/routes/resources/Filter/From.js
+++ b/src/routes/resources/Filter/From.js
@@ -64,20 +64,13 @@ export default function From({ select = "", updateFilter }) {
         <Search embed={true} value={input} updateSearchValue={updateInput} />
       </div>
       <ul className="list">
-        <li
-          className="contact none"
-          onClick={handleClick.bind(null, undefined)}
-        >
+        <li className="contact none" onClick={handleClick.bind(null, undefined)}>
           Anyone
           {!select && <CheckSign className="check" />}
         </li>
         {contacts.map(({ uid }) => {
           return (
-            <li
-              key={uid}
-              className="contact"
-              onClick={handleClick.bind(null, uid)}
-            >
+            <li key={uid} className="contact" onClick={handleClick.bind(null, uid)}>
               <Contact uid={uid} interactive={true} />
               {select == uid && <CheckSign className="check" />}
             </li>
diff --git a/src/routes/resources/Filter/Type.js b/src/routes/resources/Filter/Type.js
index 7999cfc8..292b314a 100644
--- a/src/routes/resources/Filter/Type.js
+++ b/src/routes/resources/Filter/Type.js
@@ -54,32 +54,32 @@ const Styled = styled.div`
 export const FileTypes = {
   doc: {
     title: "Documents",
-    icon: <IconDoc className="icon" />,
+    icon: <IconDoc className="icon" />
   },
   pdf: {
     title: "PDFs",
-    icon: <IconPdf className="icon" />,
+    icon: <IconPdf className="icon" />
   },
   image: {
     title: "Images",
-    icon: <IconImage className="icon" />,
+    icon: <IconImage className="icon" />
   },
   audio: {
     title: "Audio",
-    icon: <IconAudio className="icon" />,
+    icon: <IconAudio className="icon" />
   },
   video: {
     title: "Videos",
-    icon: <IconVideo className="icon" />,
+    icon: <IconVideo className="icon" />
   },
   code: {
     title: "Code Snippets",
-    icon: <IconCode className="icon" />,
+    icon: <IconCode className="icon" />
   },
   unkown: {
     title: "Unkown Files",
-    icon: <IconUnkown className="icon" />,
-  },
+    icon: <IconUnkown className="icon" />
+  }
 };
 export default function Type({ select = "", updateFilter }) {
   // const { input, updateInput, contacts } = useFilteredUsers();
@@ -99,11 +99,7 @@ export default function Type({ select = "", updateFilter }) {
         </li>
         {Object.entries(FileTypes).map(([type, { title, icon }]) => {
           return (
-            <li
-              key={title}
-              className="type"
-              onClick={handleClick.bind(null, type)}
-            >
+            <li key={title} className="type" onClick={handleClick.bind(null, type)}>
               {icon} {title}
               {select == type && <CheckSign className="check" />}
             </li>
diff --git a/src/routes/resources/Filter/index.js b/src/routes/resources/Filter/index.js
index 077b6c35..68e2de5a 100644
--- a/src/routes/resources/Filter/index.js
+++ b/src/routes/resources/Filter/index.js
@@ -47,7 +47,7 @@ export default function Filter({ filter, updateFilter }) {
     channel: false,
     date: false,
     from: false,
-    type: false,
+    type: false
   });
   const toggleFilterVisible = (obj) => {
     setFiltersVisible((prev) => {
@@ -58,7 +58,7 @@ export default function Filter({ filter, updateFilter }) {
     updateFilter(data);
     let _key = Object.keys(data)[0];
     let tmp = {
-      [_key]: false,
+      [_key]: false
     };
     console.log("wtffff", tmp);
     toggleFilterVisible(tmp);
@@ -72,7 +72,7 @@ export default function Filter({ filter, updateFilter }) {
     channel: channelVisible,
     date: dateVisible,
     type: typeVisible,
-    from: fromVisible,
+    from: fromVisible
   } = filtersVisible;
   return (
     <Styled>
@@ -81,20 +81,14 @@ export default function Filter({ filter, updateFilter }) {
         onClickOutside={toggleFilterVisible.bind(null, { from: false })}
         visible={fromVisible}
         placement="bottom-start"
-        content={
-          <FilterFrom select={filter.from} updateFilter={handleUpdateFilter} />
-        }
+        content={<FilterFrom select={filter.from} updateFilter={handleUpdateFilter} />}
       >
         <div
           className={`filter ${from && "selected"}`}
           onClick={toggleFilterVisible.bind(null, { from: true })}
         >
           {from && (
-            <Avatar
-              className="avatar"
-              name={contactMap[from].name}
-              url={contactMap[from].avatar}
-            />
+            <Avatar className="avatar" name={contactMap[from].name} url={contactMap[from].avatar} />
           )}
           <span className="txt">From {from && contactMap[from].name}</span>
           <ArrowDown className="arrow" />
@@ -105,20 +99,13 @@ export default function Filter({ filter, updateFilter }) {
         onClickOutside={toggleFilterVisible.bind(null, { channel: false })}
         visible={channelVisible}
         placement="bottom-start"
-        content={
-          <FilterChannel
-            select={filter.channel}
-            updateFilter={handleUpdateFilter}
-          />
-        }
+        content={<FilterChannel select={filter.channel} updateFilter={handleUpdateFilter} />}
       >
         <div
           className={`filter ${channel && "selected"}`}
           onClick={toggleFilterVisible.bind(null, { channel: true })}
         >
-          <span className="txt">
-            {channel ? `In ${channelMap[channel].name}` : `Channel`}
-          </span>
+          <span className="txt">{channel ? `In ${channelMap[channel].name}` : `Channel`}</span>
           <ArrowDown className="arrow" />
         </div>
       </Tippy>
@@ -127,9 +114,7 @@ export default function Filter({ filter, updateFilter }) {
         onClickOutside={toggleFilterVisible.bind(null, { type: false })}
         visible={typeVisible}
         placement="bottom-start"
-        content={
-          <FilterType select={filter.type} updateFilter={handleUpdateFilter} />
-        }
+        content={<FilterType select={filter.type} updateFilter={handleUpdateFilter} />}
       >
         <div
           className={`filter ${type && "selected"}`}
@@ -144,9 +129,7 @@ export default function Filter({ filter, updateFilter }) {
         onClickOutside={toggleFilterVisible.bind(null, { date: false })}
         visible={dateVisible}
         placement="bottom-start"
-        content={
-          <FilterDate select={filter.date} updateFilter={handleUpdateFilter} />
-        }
+        content={<FilterDate select={filter.date} updateFilter={handleUpdateFilter} />}
       >
         <div
           className={`filter ${date && "selected"}`}
diff --git a/src/routes/resources/Search.js b/src/routes/resources/Search.js
index 5ae4d1d9..4b4d19c8 100644
--- a/src/routes/resources/Search.js
+++ b/src/routes/resources/Search.js
@@ -23,11 +23,7 @@ const Styled = styled.div`
     background-position: 8px center;
   }
 `;
-export default function Search({
-  value = "",
-  updateSearchValue = null,
-  embed = false,
-}) {
+export default function Search({ value = "", updateSearchValue = null, embed = false }) {
   const handleChange = (evt) => {
     if (updateSearchValue) {
       updateSearchValue(evt.target.value);
@@ -35,12 +31,7 @@ export default function Search({
   };
   return (
     <Styled className={embed ? "embed" : ""}>
-      <input
-        value={value}
-        onChange={handleChange}
-        className="search"
-        placeholder="Search..."
-      />
+      <input value={value} onChange={handleChange} className="search" placeholder="Search..." />
     </Styled>
   );
 }
diff --git a/src/routes/resources/View.js b/src/routes/resources/View.js
index 55860675..a554e916 100644
--- a/src/routes/resources/View.js
+++ b/src/routes/resources/View.js
@@ -43,18 +43,10 @@ export default function View({ view = Views.item }) {
   };
   return (
     <Styled className={view}>
-      <li
-        className="view item"
-        data-view={Views.item}
-        onClick={handleChangeView}
-      >
+      <li className="view item" data-view={Views.item} onClick={handleChangeView}>
         <IconList />
       </li>
-      <li
-        className="view grid"
-        data-view={Views.grid}
-        onClick={handleChangeView}
-      >
+      <li className="view grid" data-view={Views.grid} onClick={handleChangeView}>
         <IconGrid />
       </li>
     </Styled>
diff --git a/src/routes/resources/index.js b/src/routes/resources/index.js
index d11b44a9..196ba48a 100644
--- a/src/routes/resources/index.js
+++ b/src/routes/resources/index.js
@@ -17,16 +17,13 @@ const checkFilter = (data, filter, channelMessage) => {
     type: typeFilter,
     date: timeFilter,
     from: fromFilter,
-    channel: channelFilter,
+    channel: channelFilter
   } = filter;
   const name = properties ? properties.name : "";
   if (fromFilter && fromFilter != from_uid) {
     selected = false;
   }
-  if (
-    channelFilter &&
-    channelMessage[channelFilter].findIndex((id) => id == mid) == -1
-  ) {
+  if (channelFilter && channelMessage[channelFilter].findIndex((id) => id == mid) == -1) {
     selected = false;
   }
   if (nameFilter) {
@@ -46,7 +43,7 @@ function ResourceManagement({ fileMessages }) {
     return {
       message: store.message,
       channelMessage: store.channelMessage,
-      view: store.ui.fileListView,
+      view: store.ui.fileListView
     };
   });
 
@@ -72,7 +69,7 @@ function ResourceManagement({ fileMessages }) {
         // options
         fitWidth: true,
         gutter,
-        itemSelector: ".file_box",
+        itemSelector: ".file_box"
         // columnWidth: 200
       });
     } else {
diff --git a/src/routes/sendMagicLink/index.js b/src/routes/sendMagicLink/index.js
index 05c42963..2f22385c 100644
--- a/src/routes/sendMagicLink/index.js
+++ b/src/routes/sendMagicLink/index.js
@@ -12,10 +12,7 @@ import SentTip from "./SentTip";
 
 export default function SendMagicLinkPage() {
   const [sent, setSent] = useState(false);
-  const [
-    sendMagicLink,
-    { isSuccess, isLoading, error },
-  ] = useSendMagicLinkMutation();
+  const [sendMagicLink, { isSuccess, isLoading, error }] = useSendMagicLinkMutation();
 
   const navigateTo = useNavigate();
   // const dispatch = useDispatch();
@@ -73,11 +70,7 @@ export default function SendMagicLinkPage() {
         ) : (
           <>
             <div className="tips">
-              <img
-                src={`${BASE_URL}/resource/organization/logo`}
-                alt="logo"
-                className="logo"
-              />
+              <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
               <h2 className="title">Login to Rustchat</h2>
               <span className="desc">Please enter your Email</span>
             </div>
diff --git a/src/routes/sendMagicLink/styled.js b/src/routes/sendMagicLink/styled.js
index 824b5137..cd232fbd 100644
--- a/src/routes/sendMagicLink/styled.js
+++ b/src/routes/sendMagicLink/styled.js
@@ -8,8 +8,7 @@ const StyledWrapper = styled.div`
     max-width: 440px;
     padding: 32px 40px 32px 40px;
     /* border: 1px solid #eee; */
-    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
     border-radius: 12px;
     .tips {
       display: flex;
diff --git a/src/routes/setting/APIConfig.js b/src/routes/setting/APIConfig.js
index 63ae0c5c..78413d95 100644
--- a/src/routes/setting/APIConfig.js
+++ b/src/routes/setting/APIConfig.js
@@ -52,16 +52,14 @@ import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
 import {
   useGetThirdPartySecretQuery,
-  useUpdateThirdPartySecretMutation,
+  useUpdateThirdPartySecretMutation
 } from "../../app/services/server";
 import Tippy from "@tippyjs/react";
 import toast from "react-hot-toast";
 export default function APIConfig() {
   const { data } = useGetThirdPartySecretQuery();
-  const [
-    updateSecret,
-    { data: updatedSecret, isSuccess, isLoading },
-  ] = useUpdateThirdPartySecretMutation();
+  const [updateSecret, { data: updatedSecret, isSuccess, isLoading }] =
+    useUpdateThirdPartySecretMutation();
   console.log("secret", data);
   useEffect(() => {
     if (isSuccess) {
@@ -83,18 +81,13 @@ export default function APIConfig() {
         content={
           <StyledConfirm>
             <div className="tip">
-              Are you sure to update API secret? Previous secret will be
-              invalided
+              Are you sure to update API secret? Previous secret will be invalided
             </div>
             <div className="btns">
               <Button onClick={hideAll} className="cancel small">
                 Cancel
               </Button>
-              <Button
-                disabled={isLoading}
-                className="small danger"
-                onClick={updateSecret}
-              >
+              <Button disabled={isLoading} className="small danger" onClick={updateSecret}>
                 Yes
               </Button>
             </div>
@@ -104,8 +97,8 @@ export default function APIConfig() {
         <Button>Update Secret</Button>
       </Tippy>
       <div className="tip">
-        Tip: The security key agreed between the rustchat server and the
-        third-party app is used to encrypt the communication data.{" "}
+        Tip: The security key agreed between the rustchat server and the third-party app is used to
+        encrypt the communication data.{" "}
       </div>
     </Styled>
   );
diff --git a/src/routes/setting/LogoutConfirmModal.js b/src/routes/setting/LogoutConfirmModal.js
index fbf989ce..aa165059 100644
--- a/src/routes/setting/LogoutConfirmModal.js
+++ b/src/routes/setting/LogoutConfirmModal.js
@@ -69,11 +69,7 @@ export default function LogoutConfirmModal({ closeModal }) {
           <label htmlFor="clear_cb" className="txt">
             Clear local data
           </label>
-          <Checkbox
-            name="clear_cb"
-            checked={clearLocal}
-            onChange={handleCheck}
-          />
+          <Checkbox name="clear_cb" checked={clearLocal} onChange={handleCheck} />
         </div>
       </StyledConfirm>
     </Modal>
diff --git a/src/routes/setting/MyAccount.js b/src/routes/setting/MyAccount.js
index 1bbaee83..cbc93c8d 100644
--- a/src/routes/setting/MyAccount.js
+++ b/src/routes/setting/MyAccount.js
@@ -101,21 +101,18 @@ const EditModalInfo = {
   name: {
     label: "Username",
     title: "Change your username",
-    intro: "Enter a new username.",
+    intro: "Enter a new username."
   },
   email: {
     label: "Email",
     title: "Change your email",
-    intro: "Enter a new email.",
-  },
+    intro: "Enter a new email."
+  }
 };
 export default function MyAccount() {
   const [passwordModal, setPasswordModal] = useState(false);
   const [editModal, setEditModal] = useState(null);
-  const [
-    uploadAvatar,
-    { isSuccess: uploadSuccess },
-  ] = useUpdateAvatarMutation();
+  const [uploadAvatar, { isSuccess: uploadSuccess }] = useUpdateAvatarMutation();
   const loginUser = useSelector((store) => {
     return store.contacts.byId[store.authData.uid];
   });
@@ -177,8 +174,7 @@ export default function MyAccount() {
         <div className="danger">
           <h4 className="head">Account Removal</h4>
           <div className="desc">
-            Disabling your account means you can recover it at any time after
-            taking this action.
+            Disabling your account means you can recover it at any time after taking this action.
           </div>
           <button className="btn">Delete Account</button>
         </div>
@@ -191,9 +187,7 @@ export default function MyAccount() {
           closeModal={closeBasicEditModal}
         />
       )}
-      {passwordModal && (
-        <UpdatePasswordModal closeModal={togglePasswordModal} />
-      )}
+      {passwordModal && <UpdatePasswordModal closeModal={togglePasswordModal} />}
     </>
   );
 }
diff --git a/src/routes/setting/Notifications.js b/src/routes/setting/Notifications.js
index b0ac66ce..76ad81cf 100644
--- a/src/routes/setting/Notifications.js
+++ b/src/routes/setting/Notifications.js
@@ -17,10 +17,7 @@ export default function Notifications() {
   return (
     <StyledWrapper>
       <Label>Notification Setting:</Label>
-      <StyledToggle
-        data-checked={status == "granted"}
-        onClick={handleEnableNotify}
-      />
+      <StyledToggle data-checked={status == "granted"} onClick={handleEnableNotify} />
     </StyledWrapper>
   );
 }
diff --git a/src/routes/setting/Overview.js b/src/routes/setting/Overview.js
index 6ddbf70c..3c4fab9a 100644
--- a/src/routes/setting/Overview.js
+++ b/src/routes/setting/Overview.js
@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import {
   useGetServerQuery,
   useUpdateServerMutation,
-  useUpdateLogoMutation,
+  useUpdateLogoMutation
 } from "../../app/services/server";
 import LogoUploader from "../../common/component/AvatarUploader";
 import Input from "../../common/component/styled/Input";
@@ -136,8 +136,8 @@ export default function Overview() {
         {isAdmin && (
           <div className="upload">
             <div className="tip">
-              Minimum size is 128x128, We recommend at least 512x512 for the
-              server. Max size limited to 5M.
+              Minimum size is 128x128, We recommend at least 512x512 for the server. Max size
+              limited to 5M.
             </div>
             {/* <button className="btn">Upload Image</button> */}
           </div>
@@ -170,9 +170,7 @@ export default function Overview() {
           />
         </div>
       </div>
-      {changed && (
-        <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />
-      )}
+      {changed && <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />}
       {/* <button onClick={handleUpdate} className="btn">update</button> */}
     </StyledWrapper>
   );
diff --git a/src/routes/setting/ProfileBasicEditModal.js b/src/routes/setting/ProfileBasicEditModal.js
index 0e7b1f25..13b26786 100644
--- a/src/routes/setting/ProfileBasicEditModal.js
+++ b/src/routes/setting/ProfileBasicEditModal.js
@@ -28,7 +28,7 @@ export default function ProfileBasicEditModal({
   value = "",
   title = "Change your username",
   intro = "Enter a new username and your existing password.",
-  closeModal,
+  closeModal
 }) {
   const [input, setInput] = useState(value);
   // const dispatch = useDispatch();
@@ -56,9 +56,7 @@ export default function ProfileBasicEditModal({
             <Button className="cancel" onClick={closeModal}>
               Cancel
             </Button>
-            <Button onClick={handleUpdate}>
-              {isLoading ? "Updating" : `Done`}
-            </Button>
+            <Button onClick={handleUpdate}>{isLoading ? "Updating" : `Done`}</Button>
           </>
         }
       >
diff --git a/src/routes/setting/UpdatePasswordModal.js b/src/routes/setting/UpdatePasswordModal.js
index c5888ab5..5db9ec87 100644
--- a/src/routes/setting/UpdatePasswordModal.js
+++ b/src/routes/setting/UpdatePasswordModal.js
@@ -2,10 +2,7 @@
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import Input from "../../common/component/styled/Input";
-import {
-  useUpdatePasswordMutation,
-  useGetCredentialsQuery,
-} from "../../app/services/auth";
+import { useUpdatePasswordMutation, useGetCredentialsQuery } from "../../app/services/auth";
 import StyledModal from "../../common/component/styled/Modal";
 import Button from "../../common/component/styled/Button";
 const StyledEdit = styled(StyledModal)`
@@ -30,13 +27,10 @@ export default function ProfileBasicEditModal({ closeModal }) {
   const [input, setInput] = useState({
     current: "",
     newPassword: "",
-    confirmPassword: "",
+    confirmPassword: ""
   });
   // const dispatch = useDispatch();
-  const [
-    updatePassword,
-    { isLoading, isSuccess },
-  ] = useUpdatePasswordMutation();
+  const [updatePassword, { isLoading, isSuccess }] = useUpdatePasswordMutation();
   const handleChange = (evt) => {
     const { type } = evt.target.dataset;
     setInput((prev) => {
diff --git a/src/routes/setting/config/Agora.js b/src/routes/setting/config/Agora.js
index 7c70a7ab..1dd49056 100644
--- a/src/routes/setting/config/Agora.js
+++ b/src/routes/setting/config/Agora.js
@@ -7,14 +7,7 @@ import Toggle from "../../../common/component/styled/Toggle";
 import SaveTip from "../../../common/component/SaveTip";
 import useConfig from "../../../common/hook/useConfig";
 export default function ConfigAgora() {
-  const {
-    changed,
-    reset,
-    values,
-    setValues,
-    toggleEnable,
-    updateConfig,
-  } = useConfig("agora");
+  const { changed, reset, values, setValues, toggleEnable, updateConfig } = useConfig("agora");
   const handleUpdate = () => {
     // const { token_url, description } = values;
     updateConfig(values);
@@ -34,7 +27,7 @@ export default function ConfigAgora() {
     app_certificate,
     rtm_key,
     rtm_secret,
-    enabled = false,
+    enabled = false
   } = values ?? {};
   return (
     <StyledContainer>
diff --git a/src/routes/setting/config/Firebase.js b/src/routes/setting/config/Firebase.js
index 3e2a92b8..6ee6c4f2 100644
--- a/src/routes/setting/config/Firebase.js
+++ b/src/routes/setting/config/Firebase.js
@@ -8,14 +8,7 @@ import SaveTip from "../../../common/component/SaveTip";
 import useConfig from "../../../common/hook/useConfig";
 
 export default function ConfigFirebase() {
-  const {
-    values,
-    toggleEnable,
-    updateConfig,
-    setValues,
-    reset,
-    changed,
-  } = useConfig("firebase");
+  const { values, toggleEnable, updateConfig, setValues, reset, changed } = useConfig("firebase");
   const handleUpdate = () => {
     // const { token_url, description } = values;
     updateConfig(values);
@@ -28,8 +21,7 @@ export default function ConfigFirebase() {
     });
   };
   //   if (!values) return null;
-  const { token_url, project_id, private_key, client_email, enabled = false } =
-    values ?? {};
+  const { token_url, project_id, private_key, client_email, enabled = false } = values ?? {};
   return (
     <StyledContainer>
       <div className="inputs">
diff --git a/src/routes/setting/config/Logins.js b/src/routes/setting/config/Logins.js
index 2500f0d1..7fb3f737 100644
--- a/src/routes/setting/config/Logins.js
+++ b/src/routes/setting/config/Logins.js
@@ -15,17 +15,15 @@ export default function Logins() {
     changed: clientIdChanged,
     clientId,
     updateClientId,
-    updateClientIdToServer,
+    updateClientIdToServer
   } = useGoogleAuthConfig();
   const {
     config: githubAuthConfig,
     changed: githubChanged,
     updateGithubAuthConfigToServer,
-    updateGithubAuthConfig,
+    updateGithubAuthConfig
   } = useGithubAuthConfig();
-  const { values, updateConfig, setValues, reset, changed } = useConfig(
-    "login"
-  );
+  const { values, updateConfig, setValues, reset, changed } = useConfig("login");
   const handleUpdate = async () => {
     const { google } = values;
     if (changed) {
@@ -70,8 +68,7 @@ export default function Logins() {
     });
   };
   if (!values) return null;
-  const { google, magic_link, github, metamask, password, oidc = [] } =
-    values ?? {};
+  const { google, magic_link, github, metamask, password, oidc = [] } = values ?? {};
   const valuesChanged = clientIdChanged || changed || githubChanged;
 
   return (
@@ -97,9 +94,7 @@ export default function Logins() {
               <div className="txt">
                 <Label>Magic Link</Label>
               </div>
-              <span className="desc">
-                Allows members login with Magic Link.
-              </span>
+              <span className="desc">Allows members login with Magic Link.</span>
             </div>
             <Toggle
               onClick={handleToggle.bind(null, { magic_link: !magic_link })}
@@ -191,9 +186,7 @@ export default function Logins() {
           </div>
         </div>
       </div>
-      {valuesChanged && (
-        <SaveTip saveHandler={handleUpdate} resetHandler={reset} />
-      )}
+      {valuesChanged && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
     </StyledContainer>
   );
 }
diff --git a/src/routes/setting/config/SMTP.js b/src/routes/setting/config/SMTP.js
index 633d080b..77128789 100644
--- a/src/routes/setting/config/SMTP.js
+++ b/src/routes/setting/config/SMTP.js
@@ -20,14 +20,7 @@ import toast from "react-hot-toast";
 export default function ConfigSMTP() {
   const [testEmail, setTestEmail] = useState("");
   const [sendTestEmail, { isSuccess, isError }] = useSendTestEmailMutation();
-  const {
-    reset,
-    updateConfig,
-    values,
-    setValues,
-    changed,
-    toggleEnable,
-  } = useConfig("smtp");
+  const { reset, updateConfig, values, setValues, changed, toggleEnable } = useConfig("smtp");
 
   const handleUpdate = () => {
     // const { token_url, description } = values;
@@ -49,7 +42,7 @@ export default function ConfigSMTP() {
     sendTestEmail({
       to: testEmail,
       subject: "test title",
-      content: "test content",
+      content: "test content"
     });
   };
   useEffect(() => {
@@ -62,8 +55,7 @@ export default function ConfigSMTP() {
   }, [isSuccess, isError]);
 
   //   if (!values) return null;
-  const { host, port, from, username, password, enabled = false } =
-    values ?? {};
+  const { host, port, from, username, password, enabled = false } = values ?? {};
   console.log("values", values);
   return (
     <StyledContainer>
diff --git a/src/routes/setting/navs.js b/src/routes/setting/navs.js
index 904585ec..ed6aacbe 100644
--- a/src/routes/setting/navs.js
+++ b/src/routes/setting/navs.js
@@ -16,20 +16,20 @@ const navs = [
       {
         name: "overview",
         title: "Overview",
-        component: <Overview />,
+        component: <Overview />
       },
       {
         name: "members",
         title: "Members",
         component: <ManageMembers />,
-        admin: true,
-      },
+        admin: true
+      }
       // {
       //   name: "notification",
       //   title: "Notification",
       //   component: <Notifications />,
       // },
-    ],
+    ]
   },
   {
     title: "User",
@@ -37,9 +37,9 @@ const navs = [
       {
         name: "my_account",
         title: "My Account",
-        component: <MyAccount />,
-      },
-    ],
+        component: <MyAccount />
+      }
+    ]
   },
   {
     title: "Configuration",
@@ -47,30 +47,30 @@ const navs = [
       {
         name: "firebase",
         title: "Firebase",
-        component: <ConfigFirebase />,
+        component: <ConfigFirebase />
       },
       {
         name: "agora",
         title: "Agora",
-        component: <ConfigAgora />,
+        component: <ConfigAgora />
       },
       {
         name: "smtp",
         title: "SMTP",
-        component: <ConfigSMTP />,
+        component: <ConfigSMTP />
       },
       {
         name: "social_login",
         title: "Login Methods",
-        component: <Logins />,
+        component: <Logins />
       },
       {
         name: "api",
         title: "Third-party APP",
-        component: <APIConfig />,
-      },
+        component: <APIConfig />
+      }
     ],
-    admin: true,
+    admin: true
   },
   {
     title: "About",
@@ -78,20 +78,20 @@ const navs = [
       {
         name: "faq",
         title: "FAQ",
-        component: <FAQ />,
+        component: <FAQ />
       },
       {
         name: "terms",
         title: "Terms & Privacy",
-        component: "Terms & Privacy",
+        component: "Terms & Privacy"
       },
       {
         name: "feedback",
         title: "Feedback",
-        component: "feedback",
-      },
-    ],
-  },
+        component: "feedback"
+      }
+    ]
+  }
 ];
 const useNavs = () => {
   const loginUser = useSelector((store) => {
diff --git a/src/routes/settingChannel/DeleteConfirmModal.js b/src/routes/settingChannel/DeleteConfirmModal.js
index b742b161..63f5603d 100644
--- a/src/routes/settingChannel/DeleteConfirmModal.js
+++ b/src/routes/settingChannel/DeleteConfirmModal.js
@@ -30,10 +30,7 @@ export default function DeleteConfirmModal({ id, closeModal }) {
         description="Are you sure want to delete this channel?"
         buttons={
           <>
-            <Button
-              onClick={closeModal.bind(null, undefined)}
-              className="cancel"
-            >
+            <Button onClick={closeModal.bind(null, undefined)} className="cancel">
               Cancel
             </Button>
             <Button onClick={handleDelete} className="danger">
diff --git a/src/routes/settingChannel/Overview.js b/src/routes/settingChannel/Overview.js
index f61d44b5..2a2e725f 100644
--- a/src/routes/settingChannel/Overview.js
+++ b/src/routes/settingChannel/Overview.js
@@ -4,7 +4,7 @@ import toast from "react-hot-toast";
 import {
   useGetChannelQuery,
   useUpdateChannelMutation,
-  useUpdateIconMutation,
+  useUpdateIconMutation
 } from "../../app/services/channel";
 import AvatarUploader from "../../common/component/AvatarUploader";
 import Input from "../../common/component/styled/Input";
@@ -46,7 +46,7 @@ export default function Overview({ id = 0 }) {
   const { loginUser, channel } = useSelector((store) => {
     return {
       loginUser: store.contacts.byId[store.authData.uid],
-      channel: store.channels.byId[id],
+      channel: store.channels.byId[id]
     };
   });
   const { data, refetch } = useGetChannelQuery(id);
@@ -102,12 +102,7 @@ export default function Overview({ id = 0 }) {
   console.log("channel icon", channel);
   return (
     <StyledWrapper>
-      <AvatarUploader
-        type="channel"
-        url={channel?.icon}
-        name={name}
-        uploadImage={updateIcon}
-      />
+      <AvatarUploader type="channel" url={channel?.icon} name={name} uploadImage={updateIcon} />
       <div className="inputs">
         <div className="input">
           <Label htmlFor="name">Channel Name</Label>
@@ -136,9 +131,7 @@ export default function Overview({ id = 0 }) {
           />
         </div>
       </div>
-      {changed && (
-        <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />
-      )}
+      {changed && <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />}
       {/* <button onClick={handleUpdate} className="btn">update</button> */}
     </StyledWrapper>
   );
diff --git a/src/routes/settingChannel/index.js b/src/routes/settingChannel/index.js
index 7e106083..01cfc02f 100644
--- a/src/routes/settingChannel/index.js
+++ b/src/routes/settingChannel/index.js
@@ -12,7 +12,7 @@ export default function ChannelSetting() {
     return {
       loginUid: store.authData.uid,
       isAdmin: store.contacts.byId[store.authData.uid]?.is_admin,
-      channel: store.channels.byId[cid],
+      channel: store.channels.byId[cid]
     };
   });
   const navigate = useNavigate();
@@ -52,22 +52,18 @@ export default function ChannelSetting() {
         dangers={[
           canLeave && {
             title: "Leave Channel",
-            handler: toggleLeaveConfrim,
+            handler: toggleLeaveConfrim
           },
           canDelete && {
             title: "Delete Channel",
-            handler: toggleDeleteConfrim,
-          },
+            handler: toggleDeleteConfrim
+          }
         ]}
       >
         {currNav.component}
       </StyledSettingContainer>
-      {deleteConfirm && (
-        <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={cid} />
-      )}
-      {leaveConfirm && (
-        <LeaveChannel closeModal={toggleLeaveConfrim} id={cid} />
-      )}
+      {deleteConfirm && <DeleteConfirmModal closeModal={toggleDeleteConfrim} id={cid} />}
+      {leaveConfirm && <LeaveChannel closeModal={toggleLeaveConfrim} id={cid} />}
     </>
   );
 }
diff --git a/src/routes/settingChannel/navs.js b/src/routes/settingChannel/navs.js
index 855d4a6b..77b108ee 100644
--- a/src/routes/settingChannel/navs.js
+++ b/src/routes/settingChannel/navs.js
@@ -8,13 +8,13 @@ const useNavs = (channelId) => {
         {
           name: "overview",
           title: "Overview",
-          component: <Overview id={channelId} />,
+          component: <Overview id={channelId} />
         },
         {
           name: "members",
           title: "Members",
-          component: <ManageMembers cid={channelId} />,
-        },
+          component: <ManageMembers cid={channelId} />
+        }
         // {
         //   name: "permissions",
         //   title: "Permissions",
@@ -27,8 +27,8 @@ const useNavs = (channelId) => {
         //   name: "integrations",
         //   title: "Integrations",
         // },
-      ],
-    },
+      ]
+    }
     // {
     //   title: "User Management",
     //   items: [
diff --git a/src/service-worker.js b/src/service-worker.js
index 0f1e0ce0..d1c6d952 100644
--- a/src/service-worker.js
+++ b/src/service-worker.js
@@ -7,11 +7,11 @@
 // You can also remove this file if you'd prefer not to use a
 // service worker, and the Workbox build step will be skipped.
 
-import { clientsClaim } from 'workbox-core';
-import { ExpirationPlugin } from 'workbox-expiration';
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
-import { registerRoute } from 'workbox-routing';
-import { StaleWhileRevalidate } from 'workbox-strategies';
+import { clientsClaim } from "workbox-core";
+import { ExpirationPlugin } from "workbox-expiration";
+import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
+import { registerRoute } from "workbox-routing";
+import { StaleWhileRevalidate } from "workbox-strategies";
 
 clientsClaim();
 
@@ -24,16 +24,16 @@ precacheAndRoute(self.__WB_MANIFEST);
 // Set up App Shell-style routing, so that all navigation requests
 // are fulfilled with your index.html shell. Learn more at
 // https://developers.google.com/web/fundamentals/architecture/app-shell
-const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+const fileExtensionRegexp = new RegExp("/[^/?]+\\.[^/]+$");
 registerRoute(
   // Return false to exempt requests from being fulfilled by index.html.
   ({ request, url }) => {
     // If this isn't a navigation, skip.
-    if (request.mode !== 'navigate') {
+    if (request.mode !== "navigate") {
       return false;
     } // If this is a URL that starts with /_, skip.
 
-    if (url.pathname.startsWith('/_')) {
+    if (url.pathname.startsWith("/_")) {
       return false;
     } // If this looks like a URL for a resource, because it contains // a file extension, skip.
 
@@ -43,28 +43,28 @@ registerRoute(
 
     return true;
   },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+  createHandlerBoundToURL(process.env.PUBLIC_URL + "/index.html")
 );
 
 // An example runtime caching route for requests that aren't handled by the
 // precache, in this case same-origin .png requests like those from in public/
 registerRoute(
   // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith(".png"), // Customize this strategy as needed, e.g., by changing to CacheFirst.
   new StaleWhileRevalidate({
-    cacheName: 'images',
+    cacheName: "images",
     plugins: [
       // Ensure that once this runtime cache reaches a maximum size the
       // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: 50 }),
-    ],
+      new ExpirationPlugin({ maxEntries: 50 })
+    ]
   })
 );
 
 // This allows the web app to trigger skipWaiting via
 // registration.waiting.postMessage({type: 'SKIP_WAITING'})
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
     self.skipWaiting();
   }
 });
diff --git a/src/serviceWorkerRegistration.js b/src/serviceWorkerRegistration.js
index 332db576..8dcfbae9 100644
--- a/src/serviceWorkerRegistration.js
+++ b/src/serviceWorkerRegistration.js
@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === "[::1]" ||
     // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
 );
 
 export function register(config) {
@@ -102,7 +100,7 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { "Service-Worker": "script" },
+    headers: { "Service-Worker": "script" }
   })
     .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
@@ -123,9 +121,7 @@ function checkValidServiceWorker(swUrl, config) {
       }
     })
     .catch(() => {
-      console.log(
-        "No internet connection found. App is running in offline mode."
-      );
+      console.log("No internet connection found. App is running in offline mode.");
     });
 }
 
diff --git a/tmp.json b/tmp.json
deleted file mode 100644
index ae9c5189..00000000
--- a/tmp.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "groups": [
-    {
-      "description": null,
-      "gid": 1,
-      "is_public": true,
-      "members": [],
-      "name": "hello",
-      "owner": null
-    },
-    {
-      "description": null,
-      "gid": 11,
-      "is_public": false,
-      "members": [1, 2, 8],
-      "name": "23ssss",
-      "owner": 2
-    }
-  ],
-  "type": "related_groups"
-}