feat(web): show comment button on homepage when no cofeat(web): show comment button on homepage when no comments existmments exist

web/src/components/MemoView/MemoView.tsx

@@ -11,9 +11,9 @@ import MemoShareImageDialog from "../MemoActionMenu/MemoShareImageDialog";
 import MemoEditor from "../MemoEditor";
 import PreviewImageDialog from "../PreviewImageDialog";
 import { MemoBody, MemoCommentListView, MemoHeader } from "./components";
+import { MemoViewContext } from "./MemoViewContext";
 import { MEMO_CARD_BASE_CLASSES } from "./constants";
 import { useImagePreview } from "./hooks";
-import { computeCommentAmount, MemoViewContext } from "./MemoViewContext";
 import type { MemoViewProps } from "./types";
 
 const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
@@ -41,7 +41,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
 
   const location = useLocation();
   const isInMemoDetailPage = location.pathname.startsWith(`/${memoData.name}`) || location.pathname.startsWith("/memos/shares/");
-  const showCommentPreview = !isInMemoDetailPage && computeCommentAmount(memoData) > 0;
+  const showCommentPreview = !isInMemoDetailPage && currentUser;
 
   useEffect(() => {
     const card = cardRef.current;

web/src/components/MemoView/components/MemoCommentListView.tsx

@@ -1,36 +1,60 @@
-import { ArrowUpRightIcon } from "lucide-react";
+import { ArrowUpRightIcon, MessageCircleIcon } from "lucide-react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
+import MemoEditor from "@/components/MemoEditor";
 import { MemoPreview } from "@/components/MemoPreview";
+import { Button } from "@/components/ui/button";
 import { extractMemoIdFromName } from "@/helpers/resource-names";
+import useCurrentUser from "@/hooks/useCurrentUser";
 import { useMemoComments } from "@/hooks/useMemoQueries";
 import { useUsersByNames } from "@/hooks/useUserQueries";
+import { useTranslate } from "@/utils/i18n";
 import { useMemoViewContext, useMemoViewDerived } from "../MemoViewContext";
 
 const MemoCommentListView: React.FC = () => {
+  const t = useTranslate();
   const { memo } = useMemoViewContext();
   const { isInMemoDetailPage, commentAmount } = useMemoViewDerived();
+  const currentUser = useCurrentUser();
+  const [showEditor, setShowEditor] = useState(false);
 
   const { data } = useMemoComments(memo.name, { enabled: !isInMemoDetailPage && commentAmount > 0 });
   const comments = data?.memos ?? [];
   const displayedComments = comments.slice(0, 3);
   const { data: commentCreators } = useUsersByNames(displayedComments.map((comment) => comment.creator));
 
-  if (isInMemoDetailPage || commentAmount === 0) {
+  if (isInMemoDetailPage) {
     return null;
   }
 
+  const hasComments = commentAmount > 0;
+  const showCreateButton = currentUser && !showEditor;
+
+  const handleCommentCreated = async (_memoCommentName: string) => {
+    setShowEditor(false);
+  };
+
   return (
     <div className="border border-t-0 border-border rounded-b-lg px-4 pt-2 pb-3 flex flex-col gap-1">
       <div className="flex items-center justify-between mb-1">
-        <span className="text-xs text-muted-foreground">Comments{commentAmount > 1 ? ` (${commentAmount})` : ""}</span>
-        <Link
-          to={`/${memo.name}#comments`}
-          className="flex items-center gap-0.5 text-xs text-muted-foreground/80 hover:underline underline-offset-2 transition-colors"
-        >
-          View all
-          <ArrowUpRightIcon className="w-3 h-3" />
-        </Link>
+        <div className="flex items-center gap-1">
+          <MessageCircleIcon className="w-3.5 h-3.5 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">
+            {t("memo.comment.self")}
+            {commentAmount > 0 && ` (${commentAmount})`}
+          </span>
+        </div>
+        {hasComments && (
+          <Link
+            to={`/${memo.name}#comments`}
+            className="flex items-center gap-0.5 text-xs text-muted-foreground/80 hover:underline underline-offset-2 transition-colors"
+          >
+            {t("memo.comment.view-all")}
+            <ArrowUpRightIcon className="w-3 h-3" />
+          </Link>
+        )}
       </div>
+
       {displayedComments.map((comment) => {
         const uid = extractMemoIdFromName(comment.name);
         const creator = commentCreators?.get(comment.creator);
@@ -51,6 +75,26 @@ const MemoCommentListView: React.FC = () => {
           </Link>
         );
       })}
+
+      {showEditor && (
+        <div className="mt-2">
+          <MemoEditor
+            cacheKey={`${memo.name}-inline-comment`}
+            placeholder={t("editor.add-your-comment-here")}
+            parentMemoName={memo.name}
+            autoFocus
+            onConfirm={handleCommentCreated}
+            onCancel={() => setShowEditor(false)}
+          />
+        </div>
+      )}
+
+      {showCreateButton && !hasComments && (
+        <Button variant="ghost" size="sm" className="w-full mt-1 text-muted-foreground" onClick={() => setShowEditor(true)}>
+          <MessageCircleIcon className="w-4 h-4 mr-1" />
+          {t("memo.comment.write-a-comment")}
+        </Button>
+      )}
     </div>
   );
 };

web/src/locales/ar.json

@@ -175,7 +175,8 @@
     "code": "كود",
     "comment": {
       "self": "التعليقات",
-      "write-a-comment": "اكتب تعليقاً"
+      "write-a-comment": "اكتب تعليقاً",
+      "view-all": "View all"
     },
     "copy-content": "نسخ المحتوى",
     "copy-link": "نسخ الرابط",

web/src/locales/ca.json

@@ -175,7 +175,8 @@
     "code": "Codi",
     "comment": {
       "self": "Comentaris",
-      "write-a-comment": "Escriu un comentari"
+      "write-a-comment": "Escriu un comentari",
+      "view-all": "View all"
     },
     "copy-content": "Copia el contingut",
     "copy-link": "Copia l'enllaç",

web/src/locales/cs.json

@@ -175,7 +175,8 @@
     "code": "Kód",
     "comment": {
       "self": "Komentáře",
-      "write-a-comment": "Napsat komentář"
+      "write-a-comment": "Napsat komentář",
+      "view-all": "View all"
     },
     "copy-content": "Kopírovat obsah",
     "copy-link": "Kopírovat odkaz",

web/src/locales/de.json

@@ -175,7 +175,8 @@
     "code": "Code",
     "comment": {
       "self": "Kommentare",
-      "write-a-comment": "Schreibe einen Kommentar"
+      "write-a-comment": "Schreibe einen Kommentar",
+      "view-all": "View all"
     },
     "copy-content": "Inhalt kopieren",
     "copy-link": "Link kopieren",

web/src/locales/en-GB.json

@@ -224,7 +224,8 @@
     "code": "Code",
     "comment": {
       "self": "Comments",
-      "write-a-comment": "Write a comment"
+      "write-a-comment": "Write a comment",
+      "view-all": "View all"
     },
     "copy-content": "Copy Content",
     "copy-link": "Copy Link",

web/src/locales/en.json

@@ -224,7 +224,8 @@
     "code": "Code",
     "comment": {
       "self": "Comments",
-      "write-a-comment": "Write a comment"
+      "write-a-comment": "Write a comment",
+      "view-all": "View all"
     },
     "copy-content": "Copy Content",
     "copy-link": "Copy Link",

web/src/locales/es.json

@@ -175,7 +175,8 @@
     "code": "Código",
     "comment": {
       "self": "Comentarios",
-      "write-a-comment": "Escribe un comentario"
+      "write-a-comment": "Escribe un comentario",
+      "view-all": "View all"
     },
     "copy-content": "Copiar contenido",
     "copy-link": "Copiar enlace",

web/src/locales/fa.json

@@ -175,7 +175,8 @@
     "code": "کد",
     "comment": {
       "self": "نظرات",
-      "write-a-comment": "یک نظر بنویسید"
+      "write-a-comment": "یک نظر بنویسید",
+      "view-all": "View all"
     },
     "copy-content": "کپی محتوا",
     "copy-link": "کپی پیوند",

web/src/locales/fr.json

@@ -175,7 +175,8 @@
     "code": "Code",
     "comment": {
       "self": "Commentaires",
-      "write-a-comment": "Écrire un commentaire"
+      "write-a-comment": "Écrire un commentaire",
+      "view-all": "View all"
     },
     "copy-content": "Copier le contenu",
     "copy-link": "Copier le lien",

web/src/locales/gl.json

@@ -175,7 +175,8 @@
     "code": "Código",
     "comment": {
       "self": "Comentarios",
-      "write-a-comment": "Escribe un comentario"
+      "write-a-comment": "Escribe un comentario",
+      "view-all": "View all"
     },
     "copy-content": "Copiar contido",
     "copy-link": "Copiar ligazón",

web/src/locales/hi.json

@@ -175,7 +175,8 @@
     "code": "कोड",
     "comment": {
       "self": "टिप्पणियाँ",
-      "write-a-comment": "टिप्पणी लिखें"
+      "write-a-comment": "टिप्पणी लिखें",
+      "view-all": "View all"
     },
     "copy-content": "सामग्री कॉपी करें",
     "copy-link": "लिंक कॉपी करें",

web/src/locales/hr.json

@@ -175,7 +175,8 @@
     "code": "Kod",
     "comment": {
       "self": "Komentari",
-      "write-a-comment": "Napiši komentar"
+      "write-a-comment": "Napiši komentar",
+      "view-all": "View all"
     },
     "copy-content": "Kopiraj sadržaj",
     "copy-link": "Kopiraj link",

web/src/locales/hu.json

@@ -175,7 +175,8 @@
     "code": "Kód",
     "comment": {
       "self": "Hozzászólások",
-      "write-a-comment": "Írj hozzászólást"
+      "write-a-comment": "Írj hozzászólást",
+      "view-all": "View all"
     },
     "copy-content": "Tartalom másolása",
     "copy-link": "Hivatkozás másolása",

web/src/locales/id.json

@@ -175,7 +175,8 @@
     "code": "Kode",
     "comment": {
       "self": "Komentar",
-      "write-a-comment": "Tulis komentar"
+      "write-a-comment": "Tulis komentar",
+      "view-all": "View all"
     },
     "copy-content": "Salin Konten",
     "copy-link": "Salin Tautan",

web/src/locales/it.json

@@ -175,7 +175,8 @@
     "code": "Codice",
     "comment": {
       "self": "Commenti",
-      "write-a-comment": "Scrivi un commento"
+      "write-a-comment": "Scrivi un commento",
+      "view-all": "View all"
     },
     "copy-content": "Copia contenuto",
     "copy-link": "Copia link",

web/src/locales/ja.json

@@ -171,7 +171,8 @@
     "code": "コード",
     "comment": {
       "self": "コメント",
-      "write-a-comment": "コメントを書く"
+      "write-a-comment": "コメントを書く",
+      "view-all": "View all"
     },
     "copy-content": "コンテンツをコピー",
     "copy-link": "リンクをコピー",

web/src/locales/ka-GE.json

@@ -175,7 +175,8 @@
     "code": "კოდი",
     "comment": {
       "self": "კომენტარები",
-      "write-a-comment": "კომენტარის დაწერა"
+      "write-a-comment": "კომენტარის დაწერა",
+      "view-all": "View all"
     },
     "copy-content": "კონტენტის კოპირება",
     "copy-link": "ლინკის კოპირება",

web/src/locales/ko.json

@@ -175,7 +175,8 @@
     "code": "코드",
     "comment": {
       "self": "댓글",
-      "write-a-comment": "댓글 작성"
+      "write-a-comment": "댓글 작성",
+      "view-all": "View all"
     },
     "copy-content": "콘텐츠 복사",
     "copy-link": "링크 복사",

web/src/locales/mr.json

@@ -175,7 +175,8 @@
     "code": "कोड",
     "comment": {
       "self": "टिप्पण्या",
-      "write-a-comment": "टिप्पणी लिहा"
+      "write-a-comment": "टिप्पणी लिहा",
+      "view-all": "View all"
     },
     "copy-content": "सामग्रीची प्रत बनवा",
     "copy-link": "लिंकची प्रत बनवा",

web/src/locales/nb.json

@@ -175,7 +175,8 @@
     "code": "Kode",
     "comment": {
       "self": "Kommentarer",
-      "write-a-comment": "Skriv en kommentar"
+      "write-a-comment": "Skriv en kommentar",
+      "view-all": "View all"
     },
     "copy-content": "Kopier innhold",
     "copy-link": "Kopier link",

web/src/locales/nl.json

@@ -175,7 +175,8 @@
     "code": "Code",
     "comment": {
       "self": "Opmerkingen",
-      "write-a-comment": "Schrijf een opmerking"
+      "write-a-comment": "Schrijf een opmerking",
+      "view-all": "View all"
     },
     "copy-content": "Inhoud kopiëren",
     "copy-link": "Kopieer link",

web/src/locales/pl.json

@@ -176,7 +176,8 @@
     "code": "Kod",
     "comment": {
       "self": "Komentarze",
-      "write-a-comment": "Napisz komentarz"
+      "write-a-comment": "Napisz komentarz",
+      "view-all": "View all"
     },
     "copy-content": "Kopiuj treść",
     "copy-link": "Kopiuj link",

web/src/locales/pt-BR.json

@@ -175,7 +175,8 @@
     "code": "Código",
     "comment": {
       "self": "Comentários",
-      "write-a-comment": "Escreva um comentário"
+      "write-a-comment": "Escreva um comentário",
+      "view-all": "View all"
     },
     "copy-content": "Copiar conteúdo",
     "copy-link": "Copiar link",

web/src/locales/pt-PT.json

@@ -175,7 +175,8 @@
     "code": "Código",
     "comment": {
       "self": "Comentários",
-      "write-a-comment": "Escreva um comentário"
+      "write-a-comment": "Escreva um comentário",
+      "view-all": "View all"
     },
     "copy-content": "Copiar Conteúdo",
     "copy-link": "Copiar link",

web/src/locales/ru.json

@@ -175,7 +175,8 @@
     "code": "Код",
     "comment": {
       "self": "Комментарии",
-      "write-a-comment": "Добавить комментарий"
+      "write-a-comment": "Добавить комментарий",
+      "view-all": "View all"
     },
     "copy-content": "Копировать контент",
     "copy-link": "Скопировать ссылку",

web/src/locales/sl.json

@@ -176,7 +176,8 @@
     "code": "Koda",
     "comment": {
       "self": "Komentarji",
-      "write-a-comment": "Napiši komentar"
+      "write-a-comment": "Napiši komentar",
+      "view-all": "View all"
     },
     "copy-link": "Kopiraj povezavo",
     "copy-content": "Kopiraj vsebino",

web/src/locales/sv.json

@@ -175,7 +175,8 @@
     "code": "Kod",
     "comment": {
       "self": "Kommentarer",
-      "write-a-comment": "Skriv en kommentar"
+      "write-a-comment": "Skriv en kommentar",
+      "view-all": "View all"
     },
     "copy-content": "Kopiera innehåll",
     "copy-link": "Kopiera länk",

web/src/locales/th.json

@@ -175,7 +175,8 @@
     "code": "โค้ด",
     "comment": {
       "self": "ความคิดเห็น",
-      "write-a-comment": "เขียนความคิดเห็น"
+      "write-a-comment": "เขียนความคิดเห็น",
+      "view-all": "View all"
     },
     "copy-content": "คัดลอกเนื้อหา",
     "copy-link": "คัดลอกลิงก์",