chore: update detail styles

web/src/App.tsx

@@ -7,6 +7,7 @@ import * as storage from "./helpers/storage";
 
 function App() {
   const { setLocale } = useI18n();
+  const user = useAppSelector((state) => state.user.user);
   const global = useAppSelector((state) => state.global);
   const pathname = useAppSelector((state) => state.location.pathname);
   const [isLoading, setLoading] = useState(true);
@@ -21,12 +22,18 @@ function App() {
     });
   }, []);
 
+  useEffect(() => {
+    if (user?.setting.locale) {
+      globalService.setLocale(user.setting.locale);
+    }
+  }, [user?.setting.locale]);
+
   useEffect(() => {
     setLocale(global.locale);
     storage.set({
       locale: global.locale,
     });
-  }, [global]);
+  }, [global.locale]);
 
   return <>{isLoading ? null : appRouterSwitch(pathname)}</>;
 }

web/src/components/Memo.tsx

@@ -45,15 +45,16 @@ const Memo: React.FC<Props> = (props: Props) => {
   });
   const [createdAtStr, setCreatedAtStr] = useState<string>(getFormatedMemoCreatedAtStr(memo.createdTs, locale));
   const memoContainerRef = useRef<HTMLDivElement>(null);
+  const memoContentContainerRef = useRef<HTMLDivElement>(null);
   const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
   const isVisitorMode = userService.isVisitorMode();
 
   useEffect(() => {
-    if (!memoContainerRef) {
+    if (!memoContentContainerRef) {
       return;
     }
 
-    if (Number(memoContainerRef.current?.clientHeight) > MAX_MEMO_CONTAINER_HEIGHT) {
+    if (Number(memoContentContainerRef.current?.clientHeight) > MAX_MEMO_CONTAINER_HEIGHT) {
       setState({
         ...state,
         expandButtonStatus: 0,
@@ -143,7 +144,7 @@ const Memo: React.FC<Props> = (props: Props) => {
       }
 
       const status = targetEl.dataset?.value;
-      const todoElementList = [...(memoContainerRef.current?.querySelectorAll(`span.todo-block[data-value=${status}]`) ?? [])];
+      const todoElementList = [...(memoContentContainerRef.current?.querySelectorAll(`span.todo-block[data-value=${status}]`) ?? [])];
       for (const element of todoElementList) {
         if (element === targetEl) {
           const index = indexOf(todoElementList, element);
@@ -172,13 +173,18 @@ const Memo: React.FC<Props> = (props: Props) => {
   };
 
   const handleExpandBtnClick = () => {
+    const expandButtonStatus = Boolean(!state.expandButtonStatus);
+    if (!expandButtonStatus) {
+      memoContainerRef.current?.scrollIntoView();
+    }
+
     setState({
-      expandButtonStatus: Number(Boolean(!state.expandButtonStatus)) as ExpandButtonStatus,
+      expandButtonStatus: Number(expandButtonStatus) as ExpandButtonStatus,
     });
   };
 
   return (
-    <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`}>
+    <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`} ref={memoContainerRef}>
       <div className="memo-top-wrapper">
         <div className="status-text-container" onClick={handleShowMemoStoryDialog}>
           <span className="time-text">{createdAtStr}</span>
@@ -220,7 +226,7 @@ const Memo: React.FC<Props> = (props: Props) => {
         </div>
       </div>
       <div
-        ref={memoContainerRef}
+        ref={memoContentContainerRef}
         className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`}
         onClick={handleMemoContentClick}
         dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}

web/src/components/MemoList.tsx

@@ -1,19 +1,21 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { memoService, shortcutService } from "../services";
+import useI18n from "../hooks/useI18n";
 import { useAppSelector } from "../store";
 import { IMAGE_URL_REG, LINK_URL_REG, MEMO_LINK_REG, TAG_REG } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import { checkShouldShowMemoWithFilters } from "../helpers/filter";
 import toastHelper from "./Toast";
+import Only from "./common/OnlyWhen";
 import Memo from "./Memo";
 import "../less/memo-list.less";
 
 interface Props {}
 
 const MemoList: React.FC<Props> = () => {
+  const { t } = useI18n();
   const query = useAppSelector((state) => state.location.query);
-  const memos = useAppSelector((state) => state.memo.memos);
+  const { memos, isFetching } = useAppSelector((state) => state.memo);
-  const [isFetching, setFetchStatus] = useState(true);
   const wrapperElement = useRef<HTMLDivElement>(null);
 
   const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query ?? {};
@@ -82,7 +84,7 @@ const MemoList: React.FC<Props> = () => {
     memoService
       .fetchAllMemos()
       .then(() => {
-        setFetchStatus(false);
+        // do nth
       })
       .catch((error) => {
         console.error(error);
@@ -91,19 +93,26 @@ const MemoList: React.FC<Props> = () => {
   }, []);
 
   useEffect(() => {
-    wrapperElement.current?.scrollTo({ top: 0 });
+    wrapperElement.current?.scrollTo({
+      top: 0,
+    });
   }, [query]);
 
   return (
     <div className={`memo-list-container ${isFetching ? "" : "completed"}`} ref={wrapperElement}>
+      <Only when={isFetching}>
+        <div className="status-text-container fetching-tip">
+          <p className="status-text">{t("memo-list.fetching-data")}</p>
+        </div>
+      </Only>
       {sortedMemos.map((memo) => (
         <Memo key={`${memo.id}-${memo.createdTs}-${memo.updatedTs}`} memo={memo} />
       ))}
+      <Only when={!isFetching}>
         <div className="status-text-container">
-        <p className="status-text">
+          <p className="status-text">{sortedMemos.length === 0 ? "no memos 🌃" : showMemoFilter ? "" : "all memos are ready 🎉"}</p>
-          {isFetching ? "Fetching data..." : sortedMemos.length === 0 ? "No memos 🌃" : showMemoFilter ? "" : "All memos are ready 🎉"}
-        </p>
         </div>
+      </Only>
     </div>
   );
 };

web/src/components/MemosHeader.tsx

@@ -29,7 +29,7 @@ const MemosHeader: React.FC<Props> = () => {
 
   const handleTitleTextClick = useCallback(() => {
     const now = Date.now();
-    if (now - prevRequestTimestamp > 10 * 1000) {
+    if (now - prevRequestTimestamp > 1 * 1000) {
       prevRequestTimestamp = now;
       memoService.fetchAllMemos().catch(() => {
         // do nth

web/src/components/Settings/PreferencesSection.tsx

@@ -35,8 +35,8 @@ const PreferencesSection: React.FC<Props> = () => {
   const { setting } = useAppSelector((state) => state.user.user as User);
 
   const handleLocaleChanged = async (value: string) => {
-    globalService.setLocale(value as Locale);
     await userService.upsertUserSetting("locale", value);
+    globalService.setLocale(value as Locale);
   };
 
   const handleDefaultMemoVisibilityChanged = async (value: string) => {
@@ -49,16 +49,17 @@ const PreferencesSection: React.FC<Props> = () => {
 
   return (
     <div className="section-container preferences-section-container">
-      <p className="title-text">{t("common.language")}</p>
+      <p className="title-text">{t("common.basic")}</p>
       <label className="form-label selector">
         <span className="normal-text">
-          {t("common.language")}: <BetaBadge className="ml-2" />
+          {t("common.language")}
+          <BetaBadge className="ml-2" />
         </span>
-        <Selector className="ml-2 w-28" value={setting.locale} dataSource={localeSelectorItems} handleValueChanged={handleLocaleChanged} />
+        <Selector className="ml-2 w-32" value={setting.locale} dataSource={localeSelectorItems} handleValueChanged={handleLocaleChanged} />
       </label>
       <p className="title-text">{t("setting.preference")}</p>
       <label className="form-label selector">
-        <span className="normal-text">{t("setting.preference-section.default-memo-visibility")}:</span>
+        <span className="normal-text">{t("setting.preference-section.default-memo-visibility")}</span>
         <Selector
           className="ml-2 w-32"
           value={setting.memoVisibility}
@@ -67,7 +68,7 @@ const PreferencesSection: React.FC<Props> = () => {
         />
       </label>
       <label className="form-label selector">
-        <span className="normal-text">{t("setting.preference-section.editor-font-style")}:</span>
+        <span className="normal-text">{t("setting.preference-section.editor-font-style")}</span>
         <Selector
           className="ml-2 w-32"
           value={setting.editorFontStyle}

web/src/less/auth.less

@@ -77,7 +77,7 @@
         @apply w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap;
 
         &.host-tip {
-          @apply bg-blue-500 text-white px-2 py-1 rounded;
+          @apply text-blue-600;
         }
       }
     }

web/src/less/beta-badge.less

@@ -1,3 +1,3 @@
 .beta-badge {
-  @apply px-2 text-xs border rounded-lg text-gray-400;
+  @apply px-2 py-1 text-xs border rounded-full text-gray-500;
 }

web/src/less/common/selector.less

@@ -1,7 +1,7 @@
 @import "../mixin.less";
 
 .selector-wrapper {
-  @apply flex flex-col justify-start items-start relative h-7;
+  @apply flex flex-col justify-start items-start relative h-8;
 
   > .current-value-container {
     @apply flex flex-row justify-between items-center w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;

web/src/less/memo-list.less

@@ -7,8 +7,8 @@
   > .status-text-container {
     @apply flex flex-col justify-start items-center w-full my-6;
 
-    &.completed {
+    &.fetching-tip {
-      @apply mb-16;
+      @apply mt-2 mb-1;
     }
 
     > .status-text {

web/src/less/setting-dialog.less

@@ -18,7 +18,7 @@
         @apply w-full sm:w-44 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-none sm:rounded-l-lg p-4 border-r bg-gray-100 flex flex-col justify-start items-start;
 
         > .section-title {
-          @apply text-sm mt-2 sm:mt-4 first:mt-3 mb-1 font-mono text-gray-400;
+          @apply text-sm mt-2 sm:mt-4 first:mt-4 mb-1 font-mono text-gray-400;
         }
 
         > .section-items-container {
@@ -46,7 +46,7 @@
           @apply flex flex-col justify-start items-start w-full my-2;
 
           > .title-text {
-            @apply text-sm mb-3 font-mono text-gray-500;
+            @apply text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500;
           }
 
           > .form-label {

web/src/locales/en.json

@@ -46,6 +46,9 @@
   "memo": {
     "view-story": "View Story"
   },
+  "memo-list": {
+    "fetching-data": "fetching data..."
+  },
   "tag-list": {
     "tip-text": "Enter `#tag ` to create"
   },

web/src/locales/zh.json

@@ -46,6 +46,9 @@
   "memo": {
     "view-story": "查看详情"
   },
+  "memo-list": {
+    "fetching-data": "请求数据中..."
+  },
   "tag-list": {
     "tip-text": "输入`#tag `来创建标签"
   },

web/src/services/memoService.ts

@@ -1,5 +1,5 @@
 import * as api from "../helpers/api";
-import { createMemo, patchMemo, setMemos, setTags } from "../store/modules/memo";
+import { createMemo, patchMemo, setIsFetching, setMemos, setTags } from "../store/modules/memo";
 import store from "../store";
 import userService from "./userService";
 
@@ -17,6 +17,9 @@ const memoService = {
   },
 
   fetchAllMemos: async () => {
+    const timeoutIndex = setTimeout(() => {
+      store.dispatch(setIsFetching(true));
+    }, 1000);
     const memoFind: MemoFind = {};
     if (userService.isVisitorMode()) {
       memoFind.creatorId = userService.getUserIdFromPath();
@@ -24,6 +27,8 @@ const memoService = {
     const { data } = (await api.getMemoList(memoFind)).data;
     const memos = data.filter((m) => m.rowStatus !== "ARCHIVED").map((m) => convertResponseModelMemo(m));
     store.dispatch(setMemos(memos));
+    clearTimeout(timeoutIndex);
+    store.dispatch(setIsFetching(false));
 
     return memos;
   },

web/src/store/modules/memo.ts

@@ -3,6 +3,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 interface State {
   memos: Memo[];
   tags: string[];
+  isFetching: boolean;
 }
 
 const memoSlice = createSlice({
@@ -10,6 +11,7 @@ const memoSlice = createSlice({
   initialState: {
     memos: [],
     tags: [],
+    isFetching: false,
   } as State,
   reducers: {
     setMemos: (state, action: PayloadAction<Memo[]>) => {
@@ -47,9 +49,15 @@ const memoSlice = createSlice({
         tags: action.payload,
       };
     },
+    setIsFetching: (state, action: PayloadAction<boolean>) => {
+      return {
+        ...state,
+        isFetching: action.payload,
+      };
+    },
   },
 });
 
-export const { setMemos, setTags, createMemo, patchMemo } = memoSlice.actions;
+export const { setMemos, createMemo, patchMemo, setTags, setIsFetching } = memoSlice.actions;
 
 export default memoSlice.reducer;