From 8cdc66274596f5fd06a6a59ab9e95e4a16de28c0 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Fri, 7 Apr 2023 08:53:20 +0800
Subject: [PATCH] chore: update memo visibility display (#1485)

---
 web/src/components/Memo.tsx            | 10 +--
 web/src/components/SearchBar.tsx       | 12 +---
 web/src/components/ShareMemoDialog.tsx | 84 ++++++++++++++------------
 web/src/less/memo-editor.less          |  4 +-
 web/src/less/memo.less                 |  2 +-
 web/src/less/share-memo-dialog.less    | 79 ------------------------
 web/src/locales/en.json                |  7 +--
 web/src/store/module/global.ts         | 37 +++++-------
 8 files changed, 71 insertions(+), 164 deletions(-)

diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index 017a8bc6..19994c5a 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -60,11 +60,6 @@ const Memo: React.FC<Props> = (props: Props) => {
     showEmbedMemoDialog(memo.id);
   };
 
-  const handleCopyContent = () => {
-    copy(memo.content);
-    toast.success(t("message.succeed-copy-content"));
-  };
-
   const handleCopyLink = () => {
     copy(`${window.location.origin}/m/${memo.id}`);
     toast.success(t("message.succeed-copy-link"));
@@ -210,7 +205,7 @@ const Memo: React.FC<Props> = (props: Props) => {
               className={`status-text ${memo.visibility.toLocaleLowerCase()}`}
               onClick={() => handleMemoVisibilityClick(memo.visibility)}
             >
-              {t(`visibility.${memo.visibility}`)}
+              {t(`memo.visibility.${memo.visibility.toLowerCase()}`)}
             </span>
           )}
         </div>
@@ -235,9 +230,6 @@ const Memo: React.FC<Props> = (props: Props) => {
                     <span className="tip-text">{t("common.share")}</span>
                   </div>
                 </div>
-                <span className="btn" onClick={handleCopyContent}>
-                  {t("memo.copy")}
-                </span>
                 <span className="btn" onClick={handleCopyLink}>
                   {t("memo.copy-link")}
                 </span>
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index 8da6ce5f..604df843 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -1,15 +1,13 @@
 import { useEffect, useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import useDebounce from "@/hooks/useDebounce";
-import { useFilterStore, useDialogStore, useLayoutStore } from "@/store/module";
-import { resolution } from "@/utils/layout";
+import { useFilterStore, useDialogStore } from "@/store/module";
 import Icon from "./Icon";
 
 const SearchBar = () => {
   const { t } = useTranslation();
   const filterStore = useFilterStore();
   const dialogStore = useDialogStore();
-  const layoutStore = useLayoutStore();
   const [queryText, setQueryText] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -39,14 +37,6 @@ const SearchBar = () => {
     setQueryText(text === undefined ? "" : text);
   }, [filterStore.state.text]);
 
-  useEffect(() => {
-    if (layoutStore.state.showHomeSidebar) {
-      if (window.innerWidth < resolution.sm) {
-        inputRef.current?.focus();
-      }
-    }
-  }, [layoutStore.state.showHomeSidebar]);
-
   useDebounce(
     () => {
       filterStore.setTextFilter(queryText.length === 0 ? undefined : queryText);
diff --git a/web/src/components/ShareMemoDialog.tsx b/web/src/components/ShareMemoDialog.tsx
index 54b40064..77498941 100644
--- a/web/src/components/ShareMemoDialog.tsx
+++ b/web/src/components/ShareMemoDialog.tsx
@@ -23,7 +23,8 @@ interface Props extends DialogProps {
 
 interface State {
   memoAmount: number;
-  memoVisibility: string;
+  memoVisibility: Visibility;
+  showQRCode: boolean;
 }
 
 const ShareMemoDialog: React.FC<Props> = (props: Props) => {
@@ -37,6 +38,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
   const [state, setState] = useState<State>({
     memoAmount: 0,
     memoVisibility: propsMemo.visibility,
+    showQRCode: true,
   });
   const createLoadingState = useLoading(false);
   const loadingState = useLoading();
@@ -50,11 +52,8 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
   useEffect(() => {
     getMemoStats(user.id)
       .then(({ data: { data } }) => {
-        setState((state) => {
-          return {
-            ...state,
-            memoAmount: data.length,
-          };
+        setPartialState({
+          memoAmount: data.length,
         });
         loadingState.setFinish();
       })
@@ -63,6 +62,13 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
       });
   }, []);
 
+  const setPartialState = (partialState: Partial<State>) => {
+    setState({
+      ...state,
+      ...partialState,
+    });
+  };
+
   const handleCloseBtnClick = () => {
     destroy();
   };
@@ -104,8 +110,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
 
   const handleMemoVisibilityOptionChanged = async (value: string) => {
     const visibilityValue = value as Visibility;
-    setState({
-      ...state,
+    setPartialState({
       memoVisibility: visibilityValue,
     });
     await memoStore.patchMemo({
@@ -116,39 +121,14 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="dialog-header-container">
-        <p className="title-text">{t("common.share")} Memo</p>
+      <div className="dialog-header-container py-3 px-4 pl-6 !mb-0 rounded-t-lg">
+        <p className="">{t("common.share")} Memo</p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <Icon.X className="icon-img" />
         </button>
       </div>
-      <div className="dialog-content-container">
-        <div className="memo-container" ref={memoElRef}>
-          <span className="time-text">{memo.createdAtStr}</span>
-          <div className="memo-content-wrapper">
-            <MemoContent content={memo.content} showFull={true} />
-            <MemoResources resourceList={memo.resourceList} />
-          </div>
-          <div className="watermark-container">
-            <div className="logo-container">
-              <img className="h-10 w-auto rounded-lg" src={`${systemStatus.customizedProfile.logoUrl || "/logo.webp"}`} alt="" />
-            </div>
-            <div className="userinfo-container">
-              <span className="name-text">{user.nickname || user.username}</span>
-              <span className="usage-text">
-                {state.memoAmount} MEMOS / {createdDays} DAYS
-              </span>
-            </div>
-            <QRCodeSVG
-              value={`${window.location.origin}/m/${memo.id}`}
-              size={40}
-              bgColor={"#F3F4F6"}
-              fgColor={"#4B5563"}
-              includeMargin={false}
-            />
-          </div>
-        </div>
-        <div className="px-4 py-3 w-full flex flex-row justify-between items-center">
+      <div className="dialog-content-container w-full flex flex-col justify-start items-start relative">
+        <div className="px-4 pb-3 border-b w-full flex flex-row justify-between items-center">
           <Select
             className="!min-w-[10rem] w-auto text-sm"
             value={state.memoVisibility}
@@ -179,6 +159,36 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
             </button>
           </div>
         </div>
+        <div className="w-full rounded-lg overflow-clip">
+          <div
+            className="w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800"
+            ref={memoElRef}
+          >
+            <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{memo.createdAtStr}</span>
+            <div className="w-full px-6 text-base pb-4">
+              <MemoContent content={memo.content} showFull={true} />
+              <MemoResources className="!grid-cols-2" resourceList={memo.resourceList} />
+            </div>
+            <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
+              <div className="mr-2">
+                <img className="h-10 w-auto rounded-lg" src={`${systemStatus.customizedProfile.logoUrl || "/logo.webp"}`} alt="" />
+              </div>
+              <div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
+                <span className="w-full text-sm truncate font-bold text-gray-600 dark:text-gray-300">{user.nickname || user.username}</span>
+                <span className="text-xs text-gray-400">
+                  {state.memoAmount} MEMOS / {createdDays} DAYS
+                </span>
+              </div>
+              <QRCodeSVG
+                value={`${window.location.origin}/m/${memo.id}`}
+                size={40}
+                bgColor={"#F3F4F6"}
+                fgColor={"#4B5563"}
+                includeMargin={false}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index e2331545..8df73dec 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -121,10 +121,10 @@
       @apply h-8;
 
       > .current-value-container {
-        @apply rounded-full;
+        @apply rounded-full px-3;
 
         > .value-text {
-          @apply text-sm w-full;
+          @apply text-sm w-full mr-1;
         }
       }
     }
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index d9cc334f..86fa8bcd 100644
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@@ -34,7 +34,7 @@
       }
 
       > .status-text {
-        @apply text-sm cursor-pointer ml-2 rounded border px-1;
+        @apply text-xs cursor-pointer ml-2 rounded border px-1;
 
         &.public {
           @apply border-green-600 text-green-600;
diff --git a/web/src/less/share-memo-dialog.less b/web/src/less/share-memo-dialog.less
index 7b20dfca..ca0427b6 100644
--- a/web/src/less/share-memo-dialog.less
+++ b/web/src/less/share-memo-dialog.less
@@ -1,84 +1,5 @@
 .share-memo-dialog {
   > .dialog-container {
     @apply w-96 max-w-full p-0 bg-white dark:bg-zinc-800;
-
-    > .dialog-header-container {
-      @apply py-3 px-4 pl-6 mb-0 rounded-t-lg border-b dark:border-b-zinc-600;
-    }
-
-    > .dialog-content-container {
-      @apply w-full flex flex-col justify-start items-start relative;
-      min-height: 128px;
-
-      > .tip-words-container {
-        @apply w-full flex flex-col justify-center items-start border-b px-6 py-0 pb-2;
-
-        > .tip-text {
-          @apply text-sm text-gray-500;
-        }
-
-        &.loading {
-          > .tip-text {
-            animation: 1s linear 1s infinite alternate breathing;
-          }
-        }
-
-        @keyframes breathing {
-          from {
-            opacity: 1;
-          }
-
-          to {
-            opacity: 0.4;
-          }
-        }
-      }
-
-      > .memo-container {
-        @apply w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800;
-
-        > .memo-shortcut-img {
-          @apply absolute top-0 left-0 w-full h-auto z-10;
-        }
-
-        > .time-text {
-          @apply w-full px-6 pt-5 pb-2 text-sm text-gray-500;
-        }
-
-        > .memo-content-wrapper {
-          @apply w-full px-6 text-base pb-4;
-
-          > .resource-wrapper {
-            > .images-wrapper {
-              @apply !grid-cols-2;
-            }
-          }
-        }
-
-        > .watermark-container {
-          @apply flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-3 px-6;
-
-          > .userinfo-container {
-            @apply w-auto grow truncate flex mr-2 flex-col justify-center items-start;
-
-            > .name-text {
-              @apply w-full text-sm truncate font-bold text-gray-600 dark:text-gray-300;
-            }
-
-            > .usage-text {
-              @apply text-xs text-gray-400;
-            }
-          }
-
-          > .logo-container {
-            @apply mr-2;
-
-            > .logo-img {
-              @apply h-10 shrink-0 w-auto;
-            }
-          }
-        }
-      }
-    }
   }
 }
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index d2dc2806..217affed 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -75,8 +75,7 @@
   },
   "memo": {
     "view-detail": "View Detail",
-    "copy": "Copy",
-    "copy-link":"Copy Link",
+    "copy-link": "Copy Link",
     "embed": "Embed memo",
     "archived-memos": "Archived Memos",
     "no-archived-memos": "No archived memos.",
@@ -85,9 +84,9 @@
     "archived-at": "Archived at",
     "search-placeholder": "Search memos",
     "visibility": {
-      "private": "Only visible to you",
+      "private": "Private",
       "protected": "Visible to members",
-      "public": "Everyone can see",
+      "public": "Public to everyone",
       "disabled": "Public memos are disabled"
     }
   },
diff --git a/web/src/store/module/global.ts b/web/src/store/module/global.ts
index f36dab59..ed5f18ed 100644
--- a/web/src/store/module/global.ts
+++ b/web/src/store/module/global.ts
@@ -33,28 +33,23 @@ export const initialGlobalState = async () => {
     defaultGlobalState.appearance = storageAppearance;
   }
 
-  try {
-    const { data } = (await api.getSystemStatus()).data;
-    if (data) {
-      const customizedProfile = data.customizedProfile;
-      defaultGlobalState.systemStatus = {
-        ...data,
-        customizedProfile: {
-          name: customizedProfile.name || "memos",
-          logoUrl: customizedProfile.logoUrl || "/logo.webp",
-          description: customizedProfile.description,
-          locale: customizedProfile.locale || "en",
-          appearance: customizedProfile.appearance || "system",
-          externalUrl: "",
-        },
-      };
-      defaultGlobalState.locale = storageLocale || convertLanguageCodeToLocale(i18n.language);
-      defaultGlobalState.appearance = customizedProfile.appearance;
-    }
-  } catch (error) {
-    // do nth
+  const { data } = (await api.getSystemStatus()).data;
+  if (data) {
+    const customizedProfile = data.customizedProfile;
+    defaultGlobalState.systemStatus = {
+      ...data,
+      customizedProfile: {
+        name: customizedProfile.name || "memos",
+        logoUrl: customizedProfile.logoUrl || "/logo.webp",
+        description: customizedProfile.description,
+        locale: customizedProfile.locale || "en",
+        appearance: customizedProfile.appearance || "system",
+        externalUrl: "",
+      },
+    };
+    defaultGlobalState.locale = storageLocale || convertLanguageCodeToLocale(i18n.language);
+    defaultGlobalState.appearance = customizedProfile.appearance;
   }
-
   store.dispatch(setGlobalState(defaultGlobalState));
 };