feat: add prettier sort import plugin (#2058)

web/.prettierrc

@@ -2,5 +2,7 @@
   "printWidth": 140,
   "useTabs": false,
   "semi": true,
-  "singleQuote": false
+  "singleQuote": false,
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]", ".less$"]
 }

web/package.json

@@ -12,6 +12,8 @@
     "@emotion/styled": "^11.10.5",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@mui/joy": "^5.0.0-alpha.75",
+    "@mui/material": "^5.14.2",
+    "@mui/styled-engine-sc": "^5.12.0",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^0.27.2",
     "classnames": "^2.3.2",
@@ -30,12 +32,14 @@
     "react-router-dom": "^6.8.2",
     "react-use": "^17.4.0",
     "semver": "^7.3.8",
+    "styled-components": "^6.0.5",
     "tailwindcss": "^3.2.4",
     "textarea-caret": "^3.1.0",
     "uuid": "^9.0.0",
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^18.0.3",
     "@types/qs": "^6.9.7",

web/src/App.tsx

@@ -1,13 +1,13 @@
 import { useColorScheme } from "@mui/joy";
-import { useEffect, Suspense } from "react";
+import { Suspense, useEffect } from "react";
 import { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { RouterProvider } from "react-router-dom";
-import router from "./router";
-import { useGlobalStore } from "./store/module";
 import storage from "./helpers/storage";
 import { getSystemColorScheme } from "./helpers/utils";
 import Loading from "./pages/Loading";
+import router from "./router";
+import { useGlobalStore } from "./store/module";
 
 const App = () => {
   const { i18n } = useTranslation();

web/src/components/AboutSiteDialog.tsx

@@ -1,8 +1,8 @@
-import { useTranslate } from "@/utils/i18n";
 import { useGlobalStore } from "@/store/module";
-import Icon from "./Icon";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import GitHubBadge from "./GitHubBadge";
+import Icon from "./Icon";
 
 type Props = DialogProps;
 

web/src/components/ArchivedMemo.tsx

@@ -1,12 +1,12 @@
 import { Tooltip } from "@mui/joy";
 import { toast } from "react-hot-toast";
+import { getDateTimeString } from "@/helpers/datetime";
 import { useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
-import { getDateTimeString } from "@/helpers/datetime";
+import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
 import MemoContent from "./MemoContent";
 import MemoResourceListView from "./MemoResourceListView";
-import { showCommonDialog } from "./Dialog/CommonDialog";
 import "@/less/memo.less";
 
 interface Props {

web/src/components/ArchivedMemoDialog.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useMemoStore } from "@/store/module";
 import useLoading from "@/hooks/useLoading";
-import Icon from "./Icon";
-import { generateDialog } from "./Dialog";
+import { useMemoStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import ArchivedMemo from "./ArchivedMemo";
+import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 import "@/less/archived-memo-dialog.less";
 
 type Props = DialogProps;

web/src/components/ChangeMemberPasswordDialog.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { useUserStore } from "@/store/module";
-import Icon from "./Icon";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 
 interface Props extends DialogProps {
   user: User;

web/src/components/ChangeMemoCreatedTsDialog.tsx

@@ -1,10 +1,10 @@
-import { getNormalizedTimeString, getUnixTime } from "@/helpers/datetime";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
+import { getNormalizedTimeString, getUnixTime } from "@/helpers/datetime";
 import { useMemoStore } from "@/store/module";
-import Icon from "./Icon";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 
 interface Props extends DialogProps {
   memoId: MemoId;

web/src/components/ChangePasswordDialog.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { useGlobalStore, useUserStore } from "@/store/module";
-import Icon from "./Icon";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 
 type Props = DialogProps;
 

web/src/components/ChangeResourceFilenameDialog.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { useResourceStore } from "@/store/module";
-import Icon from "./Icon";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 import "@/less/change-resource-filename-dialog.less";
 
 interface Props extends DialogProps {

web/src/components/CreateIdentityProviderDialog.tsx

@@ -1,10 +1,10 @@
 import { Button, Divider, Input, Option, Select, Typography } from "@mui/joy";
 import { useEffect, useState } from "react";
-import { useTranslate } from "@/utils/i18n";
 import { toast } from "react-hot-toast";
 import * as api from "@/helpers/api";
 import { UNKNOWN_ID } from "@/helpers/consts";
 import { absolutifyLink } from "@/helpers/utils";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
 

web/src/components/CreateResourceDialog.tsx

@@ -1,10 +1,10 @@
-import { Button, Input, Select, Option, Typography, List, ListItem, Autocomplete } from "@mui/joy";
+import { Autocomplete, Button, Input, List, ListItem, Option, Select, Typography } from "@mui/joy";
 import React, { useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslate } from "@/utils/i18n";
 import { useResourceStore } from "../store/module";
-import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 
 const fileTypeAutocompleteOptions = ["image/*", "text/*", "audio/*", "video/*", "application/*"];
 

web/src/components/CreateShortcutDialog.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useShortcutStore, useTagStore } from "@/store/module";
-import { filterConsts, getDefaultFilter, relationConsts } from "@/helpers/filter";
 import { getNormalizedTimeString } from "@/helpers/datetime";
+import { filterConsts, getDefaultFilter, relationConsts } from "@/helpers/filter";
 import useLoading from "@/hooks/useLoading";
-import Icon from "./Icon";
+import { useShortcutStore, useTagStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 import Selector from "./kit/Selector";
 import "@/less/create-shortcut-dialog.less";
 

web/src/components/CreateStorageServiceDialog.tsx

@@ -1,12 +1,12 @@
 import { Button, Input, Typography } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import * as api from "@/helpers/api";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
-import RequiredBadge from "./RequiredBadge";
 import LearnMore from "./LearnMore";
+import RequiredBadge from "./RequiredBadge";
 
 interface Props extends DialogProps {
   storage?: ObjectStorage;

web/src/components/CreateTagDialog.tsx

@@ -1,13 +1,13 @@
 import { Button, Input } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useTagStore } from "@/store/module";
 import { getTagSuggestionList } from "@/helpers/api";
 import { matcher } from "@/labs/marked/matcher";
 import Tag from "@/labs/marked/parser/Tag";
-import Icon from "./Icon";
+import { useTagStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 
 type Props = DialogProps;
 

web/src/components/DisablePasswordLoginDialog.tsx

@@ -1,11 +1,11 @@
 import { Button } from "@mui/joy";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useGlobalStore } from "@/store/module";
 import * as api from "@/helpers/api";
-import Icon from "./Icon";
+import { useGlobalStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 
 type Props = DialogProps;
 

web/src/components/EmbedMemoDialog.tsx

@@ -2,8 +2,8 @@ import copy from "copy-to-clipboard";
 import React from "react";
 import { toast } from "react-hot-toast";
 import { useTranslate } from "@/utils/i18n";
-import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 
 interface Props extends DialogProps {
   memoId: MemoId;

web/src/components/Header.tsx

@@ -5,8 +5,8 @@ import { useGlobalStore, useLayoutStore, useUserStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import { resolution } from "@/utils/layout";
 import Icon from "./Icon";
-import UserBanner from "./UserBanner";
 import UpgradeVersionView from "./UpgradeVersionBanner";
+import UserBanner from "./UserBanner";
 
 const Header = () => {
   const t = useTranslate();

web/src/components/HomeSidebar.tsx

@@ -1,7 +1,7 @@
 import { useLayoutStore, useUserStore } from "../store/module";
+import SearchBar from "./SearchBar";
 import ShortcutList from "./ShortcutList";
 import TagList from "./TagList";
-import SearchBar from "./SearchBar";
 import UsageHeatMap from "./UsageHeatMap";
 
 const HomeSidebar = () => {

web/src/components/LearnMore.tsx

@@ -1,6 +1,7 @@
 import { Tooltip } from "@mui/joy";
-import Icon from "./Icon";
 import { useTranslate } from "@/utils/i18n";
+import Icon from "./Icon";
+
 interface Props {
   className?: string;
   url: string;

web/src/components/LocaleSelect.tsx

@@ -1,6 +1,6 @@
 import { Option, Select } from "@mui/joy";
-import { availableLocales } from "@/i18n";
 import { FC } from "react";
+import { availableLocales } from "@/i18n";
 import Icon from "./Icon";
 
 interface Props {

web/src/components/Memo.tsx

@@ -2,22 +2,22 @@ import { Divider, Tooltip } from "@mui/joy";
 import { isEqual, uniqWith } from "lodash-es";
 import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
 import { UNKNOWN_ID } from "@/helpers/consts";
 import { getRelativeTimeString } from "@/helpers/datetime";
+import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
 import { useMemoCacheStore, useUserV1Store } from "@/store/v1";
+import { useTranslate } from "@/utils/i18n";
+import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
 import MemoContent from "./MemoContent";
-import MemoResourceListView from "./MemoResourceListView";
-import MemoRelationListView from "./MemoRelationListView";
-import showShareMemo from "./ShareMemoDialog";
-import showPreviewImageDialog from "./PreviewImageDialog";
-import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
 import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
+import MemoRelationListView from "./MemoRelationListView";
+import MemoResourceListView from "./MemoResourceListView";
+import showPreviewImageDialog from "./PreviewImageDialog";
+import showShareMemo from "./ShareMemoDialog";
 import UserAvatar from "./UserAvatar";
 import "@/less/memo.less";
 

web/src/components/MemoChat/ChatInput.tsx

@@ -1,5 +1,5 @@
-import Icon from "@/components/Icon";
 import Textarea from "@mui/joy/Textarea/Textarea";
+import Icon from "@/components/Icon";
 import { useTranslate } from "@/utils/i18n";
 
 interface Props {

web/src/components/MemoChat/ChatMessage.tsx

@@ -1,10 +1,10 @@
-import { Message } from "@/store/v1/message";
-import { marked } from "@/labs/marked";
-import Icon from "@/components/Icon";
-import Dropdown from "../kit/Dropdown";
-import { useMemoStore } from "@/store/module";
 import toast from "react-hot-toast";
+import Icon from "@/components/Icon";
+import { marked } from "@/labs/marked";
+import { useMemoStore } from "@/store/module";
+import { Message } from "@/store/v1/message";
 import { useTranslate } from "@/utils/i18n";
+import Dropdown from "../kit/Dropdown";
 
 interface MessageProps {
   index: number;

web/src/components/MemoChat/ConversationTab.tsx

@@ -1,5 +1,5 @@
-import { Conversation } from "@/store/v1/conversation";
 import Icon from "@/components/Icon";
+import { Conversation } from "@/store/v1/conversation";
 
 interface ConversationTabProps {
   item: Conversation;

web/src/components/MemoContent.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
-import { useTranslate } from "@/utils/i18n";
 import { marked } from "@/labs/marked";
 import { useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
 import "@/less/memo-content.less";
 

web/src/components/MemoEditor/ActionButton/MemoVisibilitySelector.tsx

@@ -1,8 +1,8 @@
 import { toLower } from "lodash-es";
-import { useTranslate } from "@/utils/i18n";
+import Selector from "@/components/kit/Selector";
 import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
 import { useGlobalStore } from "@/store/module";
-import Selector from "@/components/kit/Selector";
+import { useTranslate } from "@/utils/i18n";
 
 interface Props {
   value: Visibility;

web/src/components/MemoEditor/ActionButton/TagSelector.tsx

@@ -1,5 +1,5 @@
-import { useTagStore } from "@/store/module";
 import Icon from "@/components/Icon";
+import { useTagStore } from "@/store/module";
 
 interface Props {
   onTagSelectorClick: (tag: string) => void;

web/src/components/MemoEditor/Editor/TagSuggestions.tsx

@@ -1,6 +1,6 @@
-import { useTagStore } from "@/store/module";
 import { useEffect, useRef, useState } from "react";
 import getCaretCoordinates from "textarea-caret";
+import { useTagStore } from "@/store/module";
 import { EditorRefActions } from ".";
 
 type Props = {
@@ -59,14 +59,14 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
   if (!position || !suggestions.length) return null;
   return (
     <div
-      className="z-2 absolute rounded font-mono bg-zinc-200 dark:bg-zinc-600"
+      className="z-2 p-1 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
       style={{ left: position.left - 6, top: position.top + position.height + 2 }}
     >
       {suggestions.map((tag) => (
         <div
           key={tag}
           onMouseDown={() => handleSelection(tag)}
-          className="rounded p-1 px-2 z-1000 text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-700"
+          className="rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-700"
         >
           #{tag}
         </div>

web/src/components/MemoEditor/MemoEditorDialog.tsx

@@ -1,7 +1,7 @@
+import { useTranslate } from "@/utils/i18n";
+import MemoEditor from ".";
 import { generateDialog } from "../Dialog";
 import Icon from "../Icon";
-import MemoEditor from ".";
-import { useTranslate } from "@/utils/i18n";
 
 interface Props extends DialogProps {
   memoId?: MemoId;

web/src/components/MemoEditor/index.tsx

@@ -1,20 +1,20 @@
 import { isNumber, last, uniq } from "lodash-es";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { useTranslation } from "react-i18next";
-import { getMatchedNodes } from "@/labs/marked";
 import { upsertMemoResource } from "@/helpers/api";
 import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "@/helpers/consts";
-import { useFilterStore, useGlobalStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "@/store/module";
 import { clearContentQueryParam } from "@/helpers/utils";
-import Icon from "../Icon";
-import Editor, { EditorRefActions } from "./Editor";
+import { getMatchedNodes } from "@/labs/marked";
+import { useFilterStore, useGlobalStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import showCreateResourceDialog from "../CreateResourceDialog";
-import TagSelector from "./ActionButton/TagSelector";
+import Icon from "../Icon";
 import MemoVisibilitySelector from "./ActionButton/MemoVisibilitySelector";
-import ResourceListView from "./ResourceListView";
+import TagSelector from "./ActionButton/TagSelector";
+import Editor, { EditorRefActions } from "./Editor";
 import RelationListView from "./RelationListView";
+import ResourceListView from "./ResourceListView";
 import "@/less/memo-editor.less";
 
 const listItemSymbolList = ["- [ ] ", "- [x] ", "- [X] ", "* ", "- "];

web/src/components/MemoFilter.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from "react";
-import { useTranslate } from "@/utils/i18n";
 import { useLocation } from "react-router-dom";
-import { useFilterStore, useShortcutStore } from "@/store/module";
 import { getDateString } from "@/helpers/datetime";
 import { getTextWithMemoType } from "@/helpers/filter";
+import { useFilterStore, useShortcutStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
 import "@/less/memo-filter.less";
 

web/src/components/MemoList.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useFilterStore, useMemoStore, useShortcutStore, useUserStore } from "@/store/module";
-import { TAG_REG, LINK_REG, PLAIN_LINK_REG } from "@/labs/marked/parser";
-import { getTimeStampByDate } from "@/helpers/datetime";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
+import { getTimeStampByDate } from "@/helpers/datetime";
 import { checkShouldShowMemoWithFilters } from "@/helpers/filter";
+import { LINK_REG, PLAIN_LINK_REG, TAG_REG } from "@/labs/marked/parser";
+import { useFilterStore, useMemoStore, useShortcutStore, useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import Empty from "./Empty";
 import Memo from "./Memo";
 import "@/less/memo-list.less";

web/src/components/MemoResourceListView.tsx

@@ -1,8 +1,9 @@
+import { ImageList, ImageListItem, useMediaQuery } from "@mui/material";
 import { absolutifyLink } from "@/helpers/utils";
 import { getResourceUrl } from "@/utils/resource";
 import SquareDiv from "./kit/SquareDiv";
-import showPreviewImageDialog from "./PreviewImageDialog";
 import MemoResource from "./MemoResource";
+import showPreviewImageDialog from "./PreviewImageDialog";
 import "@/less/memo-resources.less";
 
 interface Props {
@@ -22,10 +23,14 @@ const MemoResourceListView: React.FC<Props> = (props: Props) => {
     ...getDefaultProps(),
     ...props,
   };
-  const availableResourceList = resourceList.filter((resource) => resource.type.startsWith("image") || resource.type.startsWith("video"));
-  const otherResourceList = resourceList.filter((resource) => !availableResourceList.includes(resource));
+  const matches = useMediaQuery("(min-width:640px)");
+  const imageResourceList = resourceList.filter((resource) => resource.type.startsWith("image"));
+  const videoResourceList = resourceList.filter((resource) => resource.type.startsWith("video"));
+  const otherResourceList = resourceList.filter(
+    (resource) => !imageResourceList.includes(resource) && !videoResourceList.includes(resource)
+  );
 
-  const imgUrls = availableResourceList
+  const imgUrls = imageResourceList
     .filter((resource) => resource.type.startsWith("image"))
     .map((resource) => {
       return getResourceUrl(resource);
@@ -38,37 +43,38 @@ const MemoResourceListView: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className={`resource-wrapper ${className || ""}`}>
-        {availableResourceList.length > 0 && (
-          <div className="images-wrapper">
-            {availableResourceList.map((resource) => {
+      {imageResourceList.length > 0 && (
+        <div className="w-full mt-2">
+          <ImageList variant="masonry" cols={matches ? 3 : 2} gap={8}>
+            {imageResourceList.map((resource) => {
               const url = getResourceUrl(resource);
-              if (resource.type.startsWith("image")) {
-                return (
-                  <SquareDiv key={resource.id} className="memo-resource">
-                    <img
-                      src={resource.externalLink ? url : url + "?thumbnail=1"}
-                      onClick={() => handleImageClick(url)}
-                      decoding="async"
-                      loading="lazy"
-                    />
-                  </SquareDiv>
-                );
-              } else if (resource.type.startsWith("video")) {
-                return (
-                  <SquareDiv key={resource.id} className="memo-resource">
-                    <video preload="metadata" controls key={resource.id}>
-                      <source src={absolutifyLink(url)} type={resource.type} />
-                    </video>
-                  </SquareDiv>
-                );
-              } else {
-                return null;
-              }
+              return (
+                <ImageListItem onClick={() => handleImageClick(url)} key={resource.id}>
+                  <img className="shadow rounded" src={url} loading="lazy" />
+                </ImageListItem>
+              );
+            })}
+          </ImageList>
+        </div>
+      )}
+
+      <div className={`resource-wrapper ${className || ""}`}>
+        {videoResourceList.length > 0 && (
+          <div className="images-wrapper">
+            {videoResourceList.map((resource) => {
+              const url = getResourceUrl(resource);
+              return (
+                <SquareDiv key={resource.id} className="memo-resource">
+                  <video preload="metadata" controls key={resource.id}>
+                    <source src={absolutifyLink(url)} type={resource.type} />
+                  </video>
+                </SquareDiv>
+              );
             })}
           </div>
         )}
       </div>
+
       {otherResourceList.length > 0 && (
         <div className="w-full flex flex-row justify-start flex-wrap mt-2">
           {otherResourceList.map((resource) => {

web/src/components/MobileHeader.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useLayoutStore, useFilterStore, useShortcutStore } from "@/store/module";
+import { useFilterStore, useLayoutStore, useShortcutStore } from "@/store/module";
 import Icon from "./Icon";
 
 interface Props {

web/src/components/PreviewImageDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { getDateTimeString } from "@/helpers/datetime";
-import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 import "@/less/preview-image-dialog.less";
 
 const MIN_SCALE = 0.5;

web/src/components/ResourceCard.tsx

@@ -1,5 +1,5 @@
-import { getDateTimeString } from "@/helpers/datetime";
 import { useState } from "react";
+import { getDateTimeString } from "@/helpers/datetime";
 import Icon from "./Icon";
 import ResourceCover from "./ResourceCover";
 import ResourceItemDropdown from "./ResourceItemDropdown";

web/src/components/ResourceCover.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import Icon from "./Icon";
 import { getResourceUrl } from "@/utils/resource";
-import showPreviewImageDialog from "./PreviewImageDialog";
+import Icon from "./Icon";
 import SquareDiv from "./kit/SquareDiv";
+import showPreviewImageDialog from "./PreviewImageDialog";
 import "@/less/resource-cover.less";
 
 interface ResourceCoverProps {

web/src/components/ResourceItemDropdown.tsx

@@ -1,13 +1,13 @@
 import copy from "copy-to-clipboard";
 import React from "react";
 import toast from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { useResourceStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import { getResourceUrl } from "@/utils/resource";
-import Dropdown from "./kit/Dropdown";
-import Icon from "./Icon";
-import { showCommonDialog } from "./Dialog/CommonDialog";
 import showChangeResourceFilenameDialog from "./ChangeResourceFilenameDialog";
+import { showCommonDialog } from "./Dialog/CommonDialog";
+import Icon from "./Icon";
+import Dropdown from "./kit/Dropdown";
 import showPreviewImageDialog from "./PreviewImageDialog";
 
 interface Props {

web/src/components/ResourceSearchBar.tsx

@@ -1,7 +1,7 @@
-import { useState, useRef } from "react";
+import { useRef, useState } from "react";
+import useDebounce from "@/hooks/useDebounce";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
-import useDebounce from "@/hooks/useDebounce";
 
 interface ResourceSearchBarProps {
   setQuery: (queryText: string) => void;

web/src/components/SearchBar.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState, useRef } from "react";
-import { useTranslate } from "@/utils/i18n";
+import { useEffect, useRef, useState } from "react";
 import useDebounce from "@/hooks/useDebounce";
 import { useFilterStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
 
 const SearchBar = () => {

web/src/components/Settings/MemberSection.tsx

@@ -1,12 +1,12 @@
 import { Button, Input } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useUserStore } from "@/store/module";
 import * as api from "@/helpers/api";
-import Dropdown from "../kit/Dropdown";
-import { showCommonDialog } from "../Dialog/CommonDialog";
+import { useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
+import { showCommonDialog } from "../Dialog/CommonDialog";
+import Dropdown from "../kit/Dropdown";
 
 interface State {
   createUserUsername: string;

web/src/components/Settings/MyAccountSection.tsx

@@ -1,8 +1,8 @@
 import { Button, Input, Textarea } from "@mui/joy";
-import { useTranslate } from "@/utils/i18n";
 import { useUserStore } from "@/store/module";
-import { showCommonDialog } from "../Dialog/CommonDialog";
+import { useTranslate } from "@/utils/i18n";
 import showChangePasswordDialog from "../ChangePasswordDialog";
+import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
 import showUpdateAccountDialog from "../UpdateAccountDialog";
 import UserAvatar from "../UserAvatar";

web/src/components/Settings/OpenAISection.tsx

@@ -1,9 +1,9 @@
+import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { Button, Input } from "@mui/joy";
-import { useGlobalStore } from "@/store/module";
 import * as api from "@/helpers/api";
+import { useGlobalStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import LearnMore from "../LearnMore";
 import "@/less/settings/system-section.less";
 

web/src/components/Settings/PreferencesSection.tsx

@@ -1,13 +1,12 @@
-import { Input, Button, Divider, Switch, Option, Select } from "@mui/joy";
-import { useState } from "react";
+import { Button, Divider, Input, Option, Select, Switch } from "@mui/joy";
+import React, { useState } from "react";
 import { toast } from "react-hot-toast";
-import React from "react";
-import { useTranslate } from "@/utils/i18n";
-import { useGlobalStore, useUserStore } from "@/store/module";
 import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
+import { useGlobalStore, useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import AppearanceSelect from "../AppearanceSelect";
-import LocaleSelect from "../LocaleSelect";
 import LearnMore from "../LearnMore";
+import LocaleSelect from "../LocaleSelect";
 import "@/less/settings/preferences-section.less";
 
 const PreferencesSection = () => {

web/src/components/Settings/SSOSection.tsx

@@ -1,13 +1,13 @@
 import { Divider } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import * as api from "@/helpers/api";
-import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
-import Dropdown from "../kit/Dropdown";
-import { showCommonDialog } from "../Dialog/CommonDialog";
-import LearnMore from "../LearnMore";
 import { useGlobalStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
+import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
+import { showCommonDialog } from "../Dialog/CommonDialog";
+import Dropdown from "../kit/Dropdown";
+import LearnMore from "../LearnMore";
 
 interface State {
   disablePasswordLogin: boolean;

web/src/components/Settings/StorageSection.tsx

@@ -1,14 +1,14 @@
-import { Divider, Select, Option } from "@mui/joy";
+import { Divider, Option, Select } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useGlobalStore } from "@/store/module";
 import * as api from "@/helpers/api";
+import { useGlobalStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
-import showUpdateLocalStorageDialog from "../UpdateLocalStorageDialog";
-import Dropdown from "../kit/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
+import Dropdown from "../kit/Dropdown";
 import LearnMore from "../LearnMore";
+import showUpdateLocalStorageDialog from "../UpdateLocalStorageDialog";
 
 const StorageSection = () => {
   const t = useTranslate();

web/src/components/Settings/SystemSection.tsx

@@ -1,13 +1,13 @@
+import { Button, Divider, Input, Switch, Textarea, Tooltip } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { Button, Divider, Input, Switch, Textarea, Tooltip } from "@mui/joy";
+import * as api from "@/helpers/api";
 import { formatBytes } from "@/helpers/utils";
 import { useGlobalStore } from "@/store/module";
-import * as api from "@/helpers/api";
-import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog";
+import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import LearnMore from "../LearnMore";
+import showUpdateCustomizedProfileDialog from "../UpdateCustomizedProfileDialog";
 import "@/less/settings/system-section.less";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import showDisablePasswordLoginDialog from "../DisablePasswordLoginDialog";

web/src/components/ShareMemoDialog.tsx

@@ -1,21 +1,21 @@
-import { Select, Option } from "@mui/joy";
+import { Option, Select } from "@mui/joy";
+import copy from "copy-to-clipboard";
+import { toLower } from "lodash-es";
 import { QRCodeSVG } from "qrcode.react";
 import React, { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import copy from "copy-to-clipboard";
-import { toLower } from "lodash-es";
-import toImage from "@/labs/html2image";
-import { useGlobalStore, useMemoStore, useUserStore } from "@/store/module";
+import { getMemoStats } from "@/helpers/api";
 import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
 import { getDateTimeString, getTimeStampByDate } from "@/helpers/datetime";
-import { getMemoStats } from "@/helpers/api";
 import useLoading from "@/hooks/useLoading";
-import Icon from "./Icon";
+import toImage from "@/labs/html2image";
+import { useGlobalStore, useMemoStore, useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import showEmbedMemoDialog from "./EmbedMemoDialog";
+import Icon from "./Icon";
 import MemoContent from "./MemoContent";
 import MemoResourceListView from "./MemoResourceListView";
-import showEmbedMemoDialog from "./EmbedMemoDialog";
 import "@/less/share-memo-dialog.less";
 
 interface Props extends DialogProps {

web/src/components/ShortcutList.tsx

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useFilterStore, useShortcutStore } from "@/store/module";
 import { getTimeStampByDate } from "@/helpers/datetime";
-import useToggle from "@/hooks/useToggle";
 import useLoading from "@/hooks/useLoading";
-import Icon from "./Icon";
+import useToggle from "@/hooks/useToggle";
+import { useFilterStore, useShortcutStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
+import Icon from "./Icon";
 
 const ShortcutList = () => {
   const t = useTranslate();

web/src/components/TagList.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { useTranslate } from "@/utils/i18n";
-import { useFilterStore, useTagStore } from "@/store/module";
 import useToggle from "@/hooks/useToggle";
-import Icon from "./Icon";
+import { useFilterStore, useTagStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import showCreateTagDialog from "./CreateTagDialog";
+import Icon from "./Icon";
 
 interface Tag {
   key: string;

web/src/components/UpdateAccountDialog.tsx

@@ -1,11 +1,11 @@
 import { isEqual } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useUserStore } from "@/store/module";
 import { convertFileToBase64 } from "@/helpers/utils";
-import Icon from "./Icon";
+import { useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
 import UserAvatar from "./UserAvatar";
 
 type Props = DialogProps;

web/src/components/UpdateCustomizedProfileDialog.tsx

@@ -1,14 +1,14 @@
 import { Button, Input } from "@mui/joy";
-import { useState } from "react";
-import { useTranslate } from "@/utils/i18n";
-import { toast } from "react-hot-toast";
-import { useGlobalStore } from "@/store/module";
-import * as api from "@/helpers/api";
 import Textarea from "@mui/joy/Textarea/Textarea";
-import Icon from "./Icon";
-import { generateDialog } from "./Dialog";
-import LocaleSelect from "./LocaleSelect";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import * as api from "@/helpers/api";
+import { useGlobalStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import AppearanceSelect from "./AppearanceSelect";
+import { generateDialog } from "./Dialog";
+import Icon from "./Icon";
+import LocaleSelect from "./LocaleSelect";
 
 type Props = DialogProps;
 

web/src/components/UpdateLocalStorageDialog.tsx

@@ -1,9 +1,9 @@
 import { Button, Input } from "@mui/joy";
 import { useState } from "react";
-import { useTranslate } from "@/utils/i18n";
 import { toast } from "react-hot-toast";
-import { useGlobalStore } from "@/store/module";
 import * as api from "@/helpers/api";
+import { useGlobalStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import Icon from "./Icon";
 import LearnMore from "./LearnMore";

web/src/components/UsageHeatMap.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useFilterStore, useMemoStore, useUserStore } from "../store/module";
-import { useTranslate } from "@/utils/i18n";
 import { getMemoStats } from "@/helpers/api";
 import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, getDateString, getTimeStampByDate } from "@/helpers/datetime";
 import * as utils from "@/helpers/utils";
+import { useTranslate } from "@/utils/i18n";
+import { useFilterStore, useMemoStore, useUserStore } from "../store/module";
 import "@/less/usage-heat-map.less";
 
 const tableConfig = {

web/src/components/UserBanner.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
-import { useTranslate } from "@/utils/i18n";
 import { useNavigate } from "react-router-dom";
 import { useGlobalStore, useUserStore } from "@/store/module";
-import Dropdown from "./kit/Dropdown";
-import Icon from "./Icon";
-import UserAvatar from "./UserAvatar";
+import { useTranslate } from "@/utils/i18n";
 import showAboutSiteDialog from "./AboutSiteDialog";
+import Icon from "./Icon";
+import Dropdown from "./kit/Dropdown";
+import UserAvatar from "./UserAvatar";
 
 const UserBanner = () => {
   const t = useTranslate();

web/src/components/kit/DatePicker.tsx

@@ -1,11 +1,11 @@
 import { Badge, Button } from "@mui/joy";
+import classNames from "classnames";
 import { useEffect, useState } from "react";
-import { useTranslate } from "@/utils/i18n";
-import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getMemoStats } from "@/helpers/api";
+import { DAILY_TIMESTAMP } from "@/helpers/consts";
 import { getDateStampByDate, isFutureDate } from "@/helpers/datetime";
 import { useUserStore } from "@/store/module";
-import classNames from "classnames";
+import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import "@/less/common/date-picker.less";
 

web/src/components/kit/Selector.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from "@mui/joy";
 import { memo, useEffect, useRef } from "react";
-import { useTranslate } from "@/utils/i18n";
 import useToggle from "@/hooks/useToggle";
+import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 import "@/less/common/selector.less";
 

web/src/helpers/filter.ts

@@ -1,5 +1,5 @@
+import { LINK_REG, PLAIN_LINK_REG, TAG_REG } from "@/labs/marked/parser";
 import { getUnixTimeMillis } from "./datetime";
-import { TAG_REG, LINK_REG, PLAIN_LINK_REG } from "@/labs/marked/parser";
 
 export const relationConsts = [
   { text: "filter.and", value: "AND" },

web/src/hooks/useEvent.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, EffectCallback, DependencyList } from "react";
+import React, { DependencyList, EffectCallback, useEffect, useRef } from "react";
 
 const useIsoMorphicEffect = (effect: EffectCallback, deps?: DependencyList | undefined) => {
   useEffect(effect, deps);

web/src/i18n.ts

@@ -1,7 +1,7 @@
 import i18n, { FallbackLng, FallbackLngObjList } from "i18next";
-import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import toast from "react-hot-toast";
+import { initReactI18next } from "react-i18next";
 
 export const availableLocales = [
   "de",

web/src/labs/marked/parser/CodeBlock.tsx

@@ -1,8 +1,8 @@
 import copy from "copy-to-clipboard";
 import hljs from "highlight.js";
 import { toast } from "react-hot-toast";
-import { matcher } from "../matcher";
 import { useTranslate } from "@/utils/i18n";
+import { matcher } from "../matcher";
 
 export const CODE_BLOCK_REG = /^```(\S*?)\s([\s\S]*?)```/;
 

web/src/labs/marked/parser/Link.tsx

@@ -1,10 +1,10 @@
-import Emphasis from "./Emphasis";
-import Bold from "./Bold";
 import { marked } from "..";
-import InlineCode from "./InlineCode";
-import BoldEmphasis from "./BoldEmphasis";
-import PlainText from "./PlainText";
 import { matcher } from "../matcher";
+import Bold from "./Bold";
+import BoldEmphasis from "./BoldEmphasis";
+import Emphasis from "./Emphasis";
+import InlineCode from "./InlineCode";
+import PlainText from "./PlainText";
 
 export const LINK_REG = /\[([^\]]+)\]\(([^)]+)\)/;
 

web/src/labs/marked/parser/index.ts

@@ -1,23 +1,23 @@
-import CodeBlock from "./CodeBlock";
-import TodoList from "./TodoList";
-import DoneList from "./DoneList";
-import OrderedList from "./OrderedList";
-import UnorderedList from "./UnorderedList";
-import Paragraph from "./Paragraph";
-import Br from "./Br";
-import Tag from "./Tag";
-import Image from "./Image";
-import Link from "./Link";
-import Bold from "./Bold";
-import Emphasis from "./Emphasis";
-import PlainLink from "./PlainLink";
-import InlineCode from "./InlineCode";
-import PlainText from "./PlainText";
-import BoldEmphasis from "./BoldEmphasis";
 import Blockquote from "./Blockquote";
-import HorizontalRules from "./HorizontalRules";
-import Strikethrough from "./Strikethrough";
+import Bold from "./Bold";
+import BoldEmphasis from "./BoldEmphasis";
+import Br from "./Br";
+import CodeBlock from "./CodeBlock";
+import DoneList from "./DoneList";
+import Emphasis from "./Emphasis";
 import Heading from "./Heading";
+import HorizontalRules from "./HorizontalRules";
+import Image from "./Image";
+import InlineCode from "./InlineCode";
+import Link from "./Link";
+import OrderedList from "./OrderedList";
+import Paragraph from "./Paragraph";
+import PlainLink from "./PlainLink";
+import PlainText from "./PlainText";
+import Strikethrough from "./Strikethrough";
+import Tag from "./Tag";
+import TodoList from "./TodoList";
+import UnorderedList from "./UnorderedList";
 
 export { TAG_REG } from "./Tag";
 export { LINK_REG } from "./Link";

web/src/layouts/Root.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
-import Header from "@/components/Header";
 import DemoBanner from "@/components/DemoBanner";
+import Header from "@/components/Header";
 
 function Root() {
   return (

web/src/main.tsx

@@ -1,8 +1,8 @@
 import { CssVarsProvider } from "@mui/joy";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
-import store from "./store";
 import App from "./App";
+import store from "./store";
 import theme from "./theme";
 import "./helpers/polyfill";
 import "./i18n";

web/src/pages/Archived.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
-import { useTranslate } from "@/utils/i18n";
 import toast from "react-hot-toast";
-import { useFilterStore, useMemoStore } from "@/store/module";
-import useLoading from "@/hooks/useLoading";
 import ArchivedMemo from "@/components/ArchivedMemo";
-import MobileHeader from "@/components/MobileHeader";
 import Empty from "@/components/Empty";
-import SearchBar from "@/components/SearchBar";
 import MemoFilter from "@/components/MemoFilter";
+import MobileHeader from "@/components/MobileHeader";
+import SearchBar from "@/components/SearchBar";
+import useLoading from "@/hooks/useLoading";
+import { useFilterStore, useMemoStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import "@/less/archived.less";
 
 const Archived = () => {

web/src/pages/Auth.tsx

@@ -1,14 +1,14 @@
 import { Button, Divider, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useGlobalStore, useUserStore } from "@/store/module";
+import AppearanceSelect from "@/components/AppearanceSelect";
+import Icon from "@/components/Icon";
+import LocaleSelect from "@/components/LocaleSelect";
 import * as api from "@/helpers/api";
 import { absolutifyLink } from "@/helpers/utils";
 import useLoading from "@/hooks/useLoading";
-import Icon from "@/components/Icon";
-import AppearanceSelect from "@/components/AppearanceSelect";
-import LocaleSelect from "@/components/LocaleSelect";
+import { useGlobalStore, useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 
 const Auth = () => {
   const t = useTranslate();

web/src/pages/AuthCallback.tsx

@@ -1,12 +1,12 @@
 import { last } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { useSearchParams } from "react-router-dom";
+import Icon from "@/components/Icon";
 import * as api from "@/helpers/api";
 import { absolutifyLink } from "@/helpers/utils";
 import { useUserStore } from "@/store/module";
-import Icon from "@/components/Icon";
+import { useTranslate } from "@/utils/i18n";
 
 interface State {
   loading: boolean;

web/src/pages/DailyReview.tsx

@@ -1,21 +1,20 @@
+import classNames from "classnames";
 import { last } from "lodash-es";
 import { useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useMemoStore, useUserStore } from "@/store/module";
-import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
-import MobileHeader from "@/components/MobileHeader";
-import useToggle from "@/hooks/useToggle";
-import toImage from "@/labs/html2image";
-import showPreviewImageDialog from "@/components/PreviewImageDialog";
+import DailyMemo from "@/components/DailyMemo";
+import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
 import DatePicker from "@/components/kit/DatePicker";
-import DailyMemo from "@/components/DailyMemo";
-import i18n from "@/i18n";
-import { findNearestLanguageMatch } from "@/utils/i18n";
+import MobileHeader from "@/components/MobileHeader";
+import showPreviewImageDialog from "@/components/PreviewImageDialog";
+import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import { convertToMillis, getDateStampByDate, getNormalizedDateString, getTimeStampByDate, isFutureDate } from "@/helpers/datetime";
-import Empty from "@/components/Empty";
-import classNames from "classnames";
+import useToggle from "@/hooks/useToggle";
+import i18n from "@/i18n";
+import toImage from "@/labs/html2image";
+import { useMemoStore, useUserStore } from "@/store/module";
+import { findNearestLanguageMatch, useTranslate } from "@/utils/i18n";
 
 const DailyReview = () => {
   const t = useTranslate();

web/src/pages/EmbedMemo.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
-import { UNKNOWN_ID } from "@/helpers/consts";
-import { useMemoStore } from "@/store/module";
-import useLoading from "@/hooks/useLoading";
 import MemoContent from "@/components/MemoContent";
 import MemoResourceListView from "@/components/MemoResourceListView";
+import { UNKNOWN_ID } from "@/helpers/consts";
 import { getDateTimeString } from "@/helpers/datetime";
+import useLoading from "@/hooks/useLoading";
+import { useMemoStore } from "@/store/module";
 
 interface State {
   memo: Memo;

web/src/pages/Explore.tsx

@@ -1,16 +1,16 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { useLocation } from "react-router-dom";
-import { useFilterStore, useGlobalStore, useMemoStore } from "@/store/module";
-import { TAG_REG } from "@/labs/marked/parser";
+import Empty from "@/components/Empty";
+import Memo from "@/components/Memo";
+import MemoFilter from "@/components/MemoFilter";
+import MobileHeader from "@/components/MobileHeader";
+import SearchBar from "@/components/SearchBar";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
 import useLoading from "@/hooks/useLoading";
-import MemoFilter from "@/components/MemoFilter";
-import Memo from "@/components/Memo";
-import MobileHeader from "@/components/MobileHeader";
-import Empty from "@/components/Empty";
-import SearchBar from "@/components/SearchBar";
+import { TAG_REG } from "@/labs/marked/parser";
+import { useFilterStore, useGlobalStore, useMemoStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 
 const Explore = () => {
   const t = useTranslate();

web/src/pages/Home.tsx

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { useGlobalStore, useUserStore } from "@/store/module";
+import HomeSidebar from "@/components/HomeSidebar";
 import MemoEditor from "@/components/MemoEditor";
 import MemoFilter from "@/components/MemoFilter";
 import MemoList from "@/components/MemoList";
 import MobileHeader from "@/components/MobileHeader";
-import HomeSidebar from "@/components/HomeSidebar";
+import { useGlobalStore, useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 
 const Home = () => {
   const t = useTranslate();

web/src/pages/MemoChat.tsx

@@ -1,20 +1,20 @@
-import { Button, Stack } from "@mui/joy";
 import { fetchEventSource } from "@microsoft/fetch-event-source";
+import { Button, Stack } from "@mui/joy";
 import { head } from "lodash-es";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
+import Empty from "@/components/Empty";
+import Icon from "@/components/Icon";
+import ChatInput from "@/components/MemoChat/ChatInput";
+import ChatMessage from "@/components/MemoChat/ChatMessage";
+import ConversationTab from "@/components/MemoChat/ConversationTab";
+import MobileHeader from "@/components/MobileHeader";
 import * as api from "@/helpers/api";
 import useLoading from "@/hooks/useLoading";
-import { Message, useMessageStore } from "@/store/v1/message";
 import { Conversation, useConversationStore } from "@/store/v1/conversation";
-import Icon from "@/components/Icon";
+import { Message, useMessageStore } from "@/store/v1/message";
+import { useTranslate } from "@/utils/i18n";
 import { generateUUID } from "@/utils/uuid";
-import MobileHeader from "@/components/MobileHeader";
-import ChatMessage from "@/components/MemoChat/ChatMessage";
-import ChatInput from "@/components/MemoChat/ChatInput";
-import ConversationTab from "@/components/MemoChat/ConversationTab";
-import Empty from "@/components/Empty";
 
 const chatStreaming = async (messageList: Array<Message>, onmessage: any, onclose: any) => {
   await fetchEventSource("/api/v1/openai/chat-streaming", {

web/src/pages/MemoDetail.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
 import { Link, useLocation, useParams } from "react-router-dom";
-import { useGlobalStore, useMemoStore } from "@/store/module";
-import useLoading from "@/hooks/useLoading";
 import Icon from "@/components/Icon";
 import Memo from "@/components/Memo";
+import useLoading from "@/hooks/useLoading";
+import { useGlobalStore, useMemoStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 
 const MemoDetail = () => {
   const t = useTranslate();

web/src/pages/NotFound.tsx

@@ -1,5 +1,5 @@
-import { useTranslate } from "@/utils/i18n";
 import { Link } from "react-router-dom";
+import { useTranslate } from "@/utils/i18n";
 import "@/less/not-found.less";
 
 const NotFound = () => {

web/src/pages/ResourcesDashboard.tsx

@@ -1,20 +1,20 @@
 import { Button } from "@mui/joy";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
-import { useTranslate } from "@/utils/i18n";
-import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
-import useLoading from "@/hooks/useLoading";
-import useEvent from "@/hooks/useEvent";
-import { useResourceStore } from "@/store/module";
-import Icon from "@/components/Icon";
-import ResourceCard from "@/components/ResourceCard";
-import ResourceSearchBar from "@/components/ResourceSearchBar";
-import MobileHeader from "@/components/MobileHeader";
-import Dropdown from "@/components/kit/Dropdown";
-import ResourceItem from "@/components/ResourceItem";
-import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import showCreateResourceDialog from "@/components/CreateResourceDialog";
+import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import Empty from "@/components/Empty";
+import Icon from "@/components/Icon";
+import Dropdown from "@/components/kit/Dropdown";
+import MobileHeader from "@/components/MobileHeader";
+import ResourceCard from "@/components/ResourceCard";
+import ResourceItem from "@/components/ResourceItem";
+import ResourceSearchBar from "@/components/ResourceSearchBar";
+import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
+import useEvent from "@/hooks/useEvent";
+import useLoading from "@/hooks/useLoading";
+import { useResourceStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 
 const ResourcesDashboard = () => {
   const t = useTranslate();

web/src/pages/Setting.tsx

@@ -1,17 +1,17 @@
 import { Option, Select } from "@mui/joy";
 import { useState } from "react";
-import { useTranslate } from "@/utils/i18n";
-import { useGlobalStore, useUserStore } from "@/store/module";
-import Icon from "@/components/Icon";
 import BetaBadge from "@/components/BetaBadge";
-import MyAccountSection from "@/components/Settings/MyAccountSection";
-import PreferencesSection from "@/components/Settings/PreferencesSection";
-import MemberSection from "@/components/Settings/MemberSection";
-import SystemSection from "@/components/Settings/SystemSection";
-import OpenAISection from "@/components/Settings/OpenAISection";
-import StorageSection from "@/components/Settings/StorageSection";
-import SSOSection from "@/components/Settings/SSOSection";
+import Icon from "@/components/Icon";
 import MobileHeader from "@/components/MobileHeader";
+import MemberSection from "@/components/Settings/MemberSection";
+import MyAccountSection from "@/components/Settings/MyAccountSection";
+import OpenAISection from "@/components/Settings/OpenAISection";
+import PreferencesSection from "@/components/Settings/PreferencesSection";
+import SSOSection from "@/components/Settings/SSOSection";
+import StorageSection from "@/components/Settings/StorageSection";
+import SystemSection from "@/components/Settings/SystemSection";
+import { useGlobalStore, useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import "@/less/setting.less";
 
 type SettingSection = "my-account" | "preference" | "member" | "system" | "openai" | "storage" | "sso";

web/src/router/index.tsx

@@ -1,12 +1,12 @@
-import { createBrowserRouter, redirect } from "react-router-dom";
 import { lazy } from "react";
+import { createBrowserRouter, redirect } from "react-router-dom";
 import { isNullorUndefined } from "@/helpers/utils";
-import store from "@/store";
-import { initialGlobalState, initialUserState } from "@/store/module";
+import Archived from "@/pages/Archived";
 import DailyReview from "@/pages/DailyReview";
 import ResourcesDashboard from "@/pages/ResourcesDashboard";
 import Setting from "@/pages/Setting";
-import Archived from "@/pages/Archived";
+import store from "@/store";
+import { initialGlobalState, initialUserState } from "@/store/module";
 
 const Root = lazy(() => import("@/layouts/Root"));
 const Auth = lazy(() => import("@/pages/Auth"));

web/src/store/index.ts

@@ -1,14 +1,14 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
-import globalReducer from "./reducer/global";
-import userReducer from "./reducer/user";
-import memoReducer from "./reducer/memo";
-import shortcutReducer from "./reducer/shortcut";
-import filterReducer from "./reducer/filter";
-import resourceReducer from "./reducer/resource";
 import dialogReducer from "./reducer/dialog";
-import tagReducer from "./reducer/tag";
+import filterReducer from "./reducer/filter";
+import globalReducer from "./reducer/global";
 import layoutReducer from "./reducer/layout";
+import memoReducer from "./reducer/memo";
+import resourceReducer from "./reducer/resource";
+import shortcutReducer from "./reducer/shortcut";
+import tagReducer from "./reducer/tag";
+import userReducer from "./reducer/user";
 
 const store = configureStore({
   reducer: {

web/src/store/module/dialog.ts

@@ -1,6 +1,6 @@
 import { last } from "lodash-es";
 import store, { useAppSelector } from "..";
-import { pushDialogStack, popDialogStack, removeDialog } from "../reducer/dialog";
+import { popDialogStack, pushDialogStack, removeDialog } from "../reducer/dialog";
 
 export const useDialogStore = () => {
   const state = useAppSelector((state) => state.dialog);

web/src/store/module/filter.ts

@@ -1,5 +1,5 @@
 import store, { useAppSelector } from "..";
-import { setFilter, Filter } from "../reducer/filter";
+import { Filter, setFilter } from "../reducer/filter";
 
 export const useFilterStore = () => {
   const state = useAppSelector((state) => state.filter);

web/src/store/module/memo.ts

@@ -1,10 +1,10 @@
 import { omit } from "lodash-es";
 import * as api from "@/helpers/api";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
-import { useUserStore } from "./";
 import store, { useAppSelector } from "../";
 import { createMemo, deleteMemo, patchMemo, setIsFetching, upsertMemos } from "../reducer/memo";
 import { useMemoCacheStore } from "../v1";
+import { useUserStore } from "./";
 
 export const convertResponseModelMemo = (memo: Memo): Memo => {
   return {

web/src/store/module/resource.ts

@@ -1,9 +1,9 @@
 import * as api from "@/helpers/api";
 import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
-import store, { useAppSelector } from "../";
-import { patchResource, setResources, deleteResource, upsertResources } from "../reducer/resource";
-import { useGlobalStore } from "./global";
 import { useTranslate } from "@/utils/i18n";
+import store, { useAppSelector } from "../";
+import { deleteResource, patchResource, setResources, upsertResources } from "../reducer/resource";
+import { useGlobalStore } from "./global";
 
 const convertResponseModelResource = (resource: Resource): Resource => {
   return {

web/src/store/module/user.ts

@@ -1,11 +1,11 @@
 import { camelCase } from "lodash-es";
 import * as api from "@/helpers/api";
-import storage from "@/helpers/storage";
 import { UNKNOWN_USERNAME } from "@/helpers/consts";
+import storage from "@/helpers/storage";
 import { getSystemColorScheme } from "@/helpers/utils";
 import store, { useAppSelector } from "..";
 import { setAppearance, setLocale } from "../reducer/global";
-import { setUser, patchUser, setHost, setUserById } from "../reducer/user";
+import { patchUser, setHost, setUser, setUserById } from "../reducer/user";
 
 const defaultSetting: Setting = {
   locale: "en",

web/src/store/v1/conversation.ts

@@ -1,6 +1,6 @@
+import { t } from "i18next";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { t } from "i18next";
 
 export interface Conversation {
   name: string;

web/src/utils/i18n.ts

@@ -1,6 +1,6 @@
-import i18n, { TLocale, availableLocales } from "@/i18n";
 import { FallbackLngObjList } from "i18next";
 import { useTranslation } from "react-i18next";
+import i18n, { availableLocales, TLocale } from "@/i18n";
 import locales from "@/locales/en.json";
 import type { NestedKeyOf } from "@/types/utils/nestedKeyOf.types";