From fc95876617bef4544f280885c11182c1c468401b Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 9 Apr 2024 09:05:34 +0800
Subject: [PATCH] chore: update memo creator display

---
 web/src/components/MemoView.tsx | 7 ++++++-
 web/src/pages/Explore.tsx       | 2 +-
 web/src/pages/MemoDetail.tsx    | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index cb6f57ba..008c4ec5 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -24,6 +24,7 @@ import VisibilityIcon from "./VisibilityIcon";
 interface Props {
   memo: Memo;
   compact?: boolean;
+  showCreator?: boolean;
   showVisibility?: boolean;
   showPinned?: boolean;
   className?: string;
@@ -85,7 +86,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
     >
       <div className="w-full flex flex-row justify-between items-center gap-2">
         <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
-          {creator && (
+          {props.showCreator && creator ? (
             <div className="w-full flex flex-row justify-start items-center">
               <Link className="w-auto hover:opacity-80" to={`/u/${encodeURIComponent(creator.username)}`} unstable_viewTransition>
                 <UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} />
@@ -106,6 +107,10 @@ const MemoView: React.FC<Props> = (props: Props) => {
                 </div>
               </div>
             </div>
+          ) : (
+            <div className="w-full text-sm leading-tight text-gray-400 dark:text-gray-500 select-none" onClick={handleGotoMemoDetailPage}>
+              <relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
+            </div>
           )}
         </div>
         <div className="flex flex-row justify-end items-center select-none shrink-0 gap-2">
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index fa945a86..f5cea64d 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -66,7 +66,7 @@ const Explore = () => {
           <div className="flex flex-col justify-start items-start w-full max-w-full">
             <MemoFilter className="px-2 pb-2" />
             {sortedMemos.map((memo) => (
-              <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility showPinned />
+              <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility showPinned />
             ))}
             {isRequesting ? (
               <div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 695dd34d..e5c4014a 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -86,6 +86,7 @@ const MemoDetail = () => {
           className="shadow hover:shadow-xl transition-all"
           memo={memo}
           compact={false}
+          showCreator
           showVisibility
           showPinned
         />
@@ -107,7 +108,7 @@ const MemoDetail = () => {
                   <span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
                 </div>
                 {comments.map((comment) => (
-                  <MemoView key={`${memo.name}-${memo.displayTime}`} memo={comment} />
+                  <MemoView key={`${memo.name}-${memo.displayTime}`} memo={comment} showCreator />
                 ))}
               </>
             )}