style(MemoView): restore comments and formatting

- Add back descriptive comments removed by editor refactoring commit
- Restore original timestamp calculation format in MemoHeader
- Improve code readability with section comments

web/src/components/MemoView/components/MemoBody.tsx

@@ -15,6 +15,8 @@ interface Props {
 
 const MemoBody: React.FC<Props> = ({ compact, onContentClick, onContentDoubleClick, onToggleNsfwVisibility }) => {
   const t = useTranslate();
+
+  // Get shared state from context
   const { memo, readonly, parentPage, nsfw, showNSFWContent } = useMemoViewContext();
 
   const referencedMemos = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
@@ -34,7 +36,7 @@ const MemoBody: React.FC<Props> = ({ compact, onContentClick, onContentDoubleCli
           readonly={readonly}
           onClick={onContentClick}
           onDoubleClick={onContentDoubleClick}
-          compact={memo.pinned ? false : compact}
+          compact={memo.pinned ? false : compact} // Always show full content when pinned
           parentPage={parentPage}
         />
         {memo.location && <LocationDisplay mode="view" location={memo.location} />}
@@ -43,6 +45,7 @@ const MemoBody: React.FC<Props> = ({ compact, onContentClick, onContentDoubleCli
         <MemoReactionListView memo={memo} reactions={memo.reactions} />
       </div>
 
+      {/* NSFW content overlay */}
       {nsfw && !showNSFWContent && (
         <>
           <div className="absolute inset-0 bg-transparent" />

web/src/components/MemoView/components/MemoHeader.tsx

@@ -38,18 +38,24 @@ const MemoHeader: React.FC<Props> = ({
   onReactionSelectorOpenChange,
 }) => {
   const t = useTranslate();
+
+  // Get shared state from context
   const { memo, creator, isArchived, commentAmount, isInMemoDetailPage, parentPage, readonly, relativeTimeFormat, nsfw, showNSFWContent } =
     useMemoViewContext();
 
-  const timestamp = memo.displayTime ? timestampDate(memo.displayTime) : undefined;
   const displayTime = isArchived ? (
-    timestamp?.toLocaleString(i18n.language)
+    (memo.displayTime ? timestampDate(memo.displayTime) : undefined)?.toLocaleString(i18n.language)
   ) : (
-    <relative-time datetime={timestamp?.toISOString()} lang={i18n.language} format={relativeTimeFormat} />
+    <relative-time
+      datetime={(memo.displayTime ? timestampDate(memo.displayTime) : undefined)?.toISOString()}
+      lang={i18n.language}
+      format={relativeTimeFormat}
+    ></relative-time>
   );
 
   return (
     <div className="w-full flex flex-row justify-between items-center gap-2">
+      {/* Left section: Creator info or time */}
       <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
         {showCreator && creator ? (
           <CreatorDisplay creator={creator} displayTime={displayTime} onGotoDetail={onGotoDetail} />
@@ -58,7 +64,9 @@ const MemoHeader: React.FC<Props> = ({
         )}
       </div>
 
+      {/* Right section: Actions */}
       <div className="flex flex-row justify-end items-center select-none shrink-0 gap-2">
+        {/* Reaction selector */}
         {!isArchived && (
           <ReactionSelector
             className={cn("border-none w-auto h-auto", reactionSelectorOpen && "block!", "hidden group-hover:block")}
@@ -67,6 +75,7 @@ const MemoHeader: React.FC<Props> = ({
           />
         )}
 
+        {/* Comment count link */}
         {!isInMemoDetailPage && (
           <Link
             className={cn(
@@ -82,6 +91,7 @@ const MemoHeader: React.FC<Props> = ({
           </Link>
         )}
 
+        {/* Visibility icon */}
         {showVisibility && memo.visibility !== Visibility.PRIVATE && (
           <Tooltip>
             <TooltipTrigger>
@@ -95,6 +105,7 @@ const MemoHeader: React.FC<Props> = ({
           </Tooltip>
         )}
 
+        {/* Pinned indicator */}
         {showPinned && memo.pinned && (
           <TooltipProvider>
             <Tooltip>
@@ -110,12 +121,14 @@ const MemoHeader: React.FC<Props> = ({
           </TooltipProvider>
         )}
 
+        {/* NSFW hide button */}
         {nsfw && showNSFWContent && onToggleNsfwVisibility && (
           <span className="cursor-pointer">
             <EyeOffIcon className="w-4 h-auto text-primary" onClick={onToggleNsfwVisibility} />
           </span>
         )}
 
+        {/* Action menu */}
         <MemoActionMenu memo={memo} readonly={readonly} onEdit={onEdit} />
       </div>
     </div>