feat: add prettier sort import plugin (#2058)

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";