From eccddb11546862a471a9af6038031e7df6181c9a Mon Sep 17 00:00:00 2001
From: Johnny <yourselfhosted@gmail.com>
Date: Sun, 7 Jul 2024 23:09:48 +0800
Subject: [PATCH] chore: add create time to memo detail sidebar (#3657)

---
 .../MemoDetailSidebar/MemoDetailSidebar.tsx   | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx b/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
index 768d3739..3c860fb7 100644
--- a/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
+++ b/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { isEqual } from "lodash-es";
 import { Memo } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
@@ -22,8 +23,22 @@ const MemoDetailSidebar = ({ memo, className }: Props) => {
         className,
       )}
     >
-      <div className="flex flex-col justify-start items-start w-full mt-1 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
-        <div className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 select-none">
+      <div className="flex flex-col justify-start items-start w-full mt-1 px-1 gap-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
+        <div className="w-full flex flex-col">
+          <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none">
+            <span>Created at</span>
+          </p>
+          <p className="text-sm dark:text-gray-400">{memo.createTime?.toLocaleString()}</p>
+        </div>
+        {!isEqual(memo.createTime, memo.updateTime) && (
+          <div className="w-full flex flex-col">
+            <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none">
+              <span>Last updated at</span>
+            </p>
+            <p className="text-sm dark:text-gray-400">{memo.updateTime?.toLocaleString()}</p>
+          </div>
+        )}
+        <div className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none">
           <span>{t("common.tags")}</span>
           {memo.property.tags.length > 0 && <span className="shrink-0">({memo.property.tags.length})</span>}
         </div>