chore: add properties to memo detail sidebar

web/package.json

@@ -70,6 +70,5 @@
     "protobufjs": "^7.3.2",
     "typescript": "^5.5.2",
     "vite": "^5.3.1"
-  },
-  "packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"
+  }
 }

web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx

 import clsx from "clsx";
 import { isEqual } from "lodash-es";
-import { Memo } from "@/types/proto/api/v1/memo_service";
+import { Memo, MemoProperty } from "@/types/proto/api/v1/memo_service";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 
@@ -11,10 +11,8 @@ interface Props {
 
 const MemoDetailSidebar = ({ memo, className }: Props) => {
   const t = useTranslate();
-
-  if (!memo.property) {
-    return;
-  }
+  const property = memo.property as MemoProperty;
+  const hasSpecialProperty = property.hasLink || property.hasTaskList || property.hasCode || property.hasIncompleteTasks;
 
   return (
     <aside
@@ -28,33 +26,70 @@ const MemoDetailSidebar = ({ memo, className }: Props) => {
           <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>
+          <p className="text-sm text-gray-500 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>
+            <p className="text-sm text-gray-500 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>
-        <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
-          {memo.property.tags.map((tag) => (
-            <div
-              key={tag}
-              className="shrink-0 w-auto max-w-full text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800"
-            >
-              <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" />
-              <div className={clsx("inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]")}>
-                <span className="truncate dark:opacity-80">{tag}</span>
-              </div>
+        {hasSpecialProperty && (
+          <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>Properties</span>
+            </p>
+            <div className="w-full flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap text-gray-500 dark:text-gray-400">
+              {property.hasLink && (
+                <div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
+                  <div className="w-auto flex justify-start items-center mr-1">
+                    <Icon.Link className="w-4 h-auto mr-1" />
+                    <span className="block text-sm">{t("memo.links")}</span>
+                  </div>
+                </div>
+              )}
+              {property.hasTaskList && (
+                <div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
+                  <div className="w-auto flex justify-start items-center mr-1">
+                    <Icon.CheckCircle className="w-4 h-auto mr-1" />
+                    <span className="block text-sm">{t("memo.to-do")}</span>
+                  </div>
+                </div>
+              )}
+              {property.hasCode && (
+                <div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
+                  <div className="w-auto flex justify-start items-center mr-1">
+                    <Icon.Code2 className="w-4 h-auto mr-1" />
+                    <span className="block text-sm">{t("memo.code")}</span>
+                  </div>
+                </div>
+              )}
             </div>
-          ))}
-        </div>
+          </div>
+        )}
+        {property.tags.length > 0 && (
+          <>
+            <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>
+              <span className="shrink-0">({property.tags.length})</span>
+            </div>
+            <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
+              {property.tags.map((tag) => (
+                <div
+                  key={tag}
+                  className="shrink-0 w-auto max-w-full text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800"
+                >
+                  <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" />
+                  <div className={clsx("inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]")}>
+                    <span className="truncate dark:opacity-80">{tag}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
       </div>
     </aside>
   );