feat: frontend supports `Show comments` display setting

web/src/components/MemoDisplaySettingMenu.tsx

@@ -1,5 +1,6 @@
 import { Settings2Icon } from "lucide-react";
 import { observer } from "mobx-react-lite";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 import { viewStore } from "@/store";
@@ -59,6 +60,18 @@ const MemoDisplaySettingMenu = observer(({ className }: Props) => {
               </SelectContent>
             </Select>
           </div>
+          <div className="w-full flex flex-row justify-between items-center">
+            <span className="text-sm shrink-0 mr-3 text-foreground">{t("common.show-comments")}</span>
+            <Checkbox
+              id="show-comments"
+              checked={viewStore.state.showComments}
+              onCheckedChange={(value) =>
+                viewStore.state.setPartial({
+                  showComments: Boolean(value),
+                })
+              }
+            />
+          </div>
         </div>
       </PopoverContent>
     </Popover>

web/src/components/PagedMemoList/PagedMemoList.tsx

@@ -20,6 +20,7 @@ interface Props {
   listSort?: (list: Memo[]) => Memo[];
   state?: State;
   orderBy?: string;
+  showComments?: boolean;
   filter?: string;
   pageSize?: number;
 }
@@ -49,6 +50,7 @@ const PagedMemoList = observer((props: Props) => {
       const response = await memoStore.fetchMemos({
         state: props.state || State.NORMAL,
         orderBy: props.orderBy || "display_time desc",
+        showComments: props.showComments,
         filter: props.filter,
         pageSize: props.pageSize || DEFAULT_LIST_MEMOS_PAGE_SIZE,
         pageToken,
@@ -99,7 +101,7 @@ const PagedMemoList = observer((props: Props) => {
   // Initial load and reload when props change
   useEffect(() => {
     refreshList();
-  }, [props.state, props.orderBy, props.filter, props.pageSize]);
+  }, [props.state, props.orderBy, props.filter, props.pageSize, props.showComments]);
 
   // Auto-fetch more content when list changes and page isn't full
   useEffect(() => {

web/src/locales/en.json

@@ -52,6 +52,7 @@
     "language": "Language",
     "last-updated-at": "Last updated at",
     "layout": "Layout",
+    "show-comments": "Show comments",
     "learn-more": "Learn more",
     "link": "Link",
     "mark": "Mark",

web/src/pages/Archived.tsx

@@ -39,6 +39,8 @@ const Archived = observer(() => {
       }
       state={State.ARCHIVED}
       orderBy={viewStore.state.orderByTimeAsc ? "display_time asc" : "display_time desc"}
+      // It does not support show comments now
+      // showComments={viewStore.state.showComments}
       filter={memoFitler}
     />
   );

web/src/pages/Explore.tsx

@@ -27,6 +27,7 @@ const Explore = observer(() => {
               )
           }
           orderBy={viewStore.state.orderByTimeAsc ? "display_time asc" : "display_time desc"}
+          showComments={viewStore.state.showComments}
         />
       </div>
     </section>

web/src/pages/Home.tsx

@@ -67,6 +67,7 @@ const Home = observer(() => {
             )
         }
         orderBy={viewStore.state.orderByTimeAsc ? "display_time asc" : "display_time desc"}
+        showComments={viewStore.state.showComments}
         filter={memoFilter}
       />
     </div>

web/src/pages/UserProfile.tsx

@@ -102,6 +102,7 @@ const UserProfile = observer(() => {
                     )
                 }
                 orderBy={viewStore.state.orderByTimeAsc ? "display_time asc" : "display_time desc"}
+                showComments={viewStore.state.showComments}
                 filter={memoFilter}
               />
             </>

web/src/store/view.ts

@@ -5,6 +5,7 @@ const LOCAL_STORAGE_KEY = "memos-view-setting";
 class LocalState {
   orderByTimeAsc: boolean = false;
   layout: "LIST" | "MASONRY" = "LIST";
+  showComments: boolean = false;
 
   constructor() {
     makeAutoObservable(this);
@@ -41,6 +42,9 @@ const viewStore = (() => {
         viewStore.state.setPartial({ layout: cache.layout });
       }
     }
+    if (Object.hasOwn(cache, "showComments")) {
+      viewStore.state.setPartial({ showComments: Boolean(cache.showComments) });
+    }
   } catch {
     // Do nothing
   }

web/src/types/proto/api/v1/memo_service.ts

@@ -206,6 +206,8 @@ export interface ListMemosRequest {
   filter: string;
   /** Optional. If true, show deleted memos in the response. */
   showDeleted: boolean;
+  /** Optional. If true, include comment memos in the response. */
+  showComments: boolean;
 }
 
 export interface ListMemosResponse {
@@ -1084,7 +1086,15 @@ export const CreateMemoRequest: MessageFns<CreateMemoRequest> = {
 };
 
 function createBaseListMemosRequest(): ListMemosRequest {
-  return { pageSize: 0, pageToken: "", state: State.STATE_UNSPECIFIED, orderBy: "", filter: "", showDeleted: false };
+  return {
+    pageSize: 0,
+    pageToken: "",
+    state: State.STATE_UNSPECIFIED,
+    orderBy: "",
+    filter: "",
+    showDeleted: false,
+    showComments: false,
+  };
 }
 
 export const ListMemosRequest: MessageFns<ListMemosRequest> = {
@@ -1107,6 +1117,9 @@ export const ListMemosRequest: MessageFns<ListMemosRequest> = {
     if (message.showDeleted !== false) {
       writer.uint32(48).bool(message.showDeleted);
     }
+    if (message.showComments !== false) {
+      writer.uint32(56).bool(message.showComments);
+    }
     return writer;
   },
 
@@ -1165,6 +1178,14 @@ export const ListMemosRequest: MessageFns<ListMemosRequest> = {
           message.showDeleted = reader.bool();
           continue;
         }
+        case 7: {
+          if (tag !== 56) {
+            break;
+          }
+
+          message.showComments = reader.bool();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -1185,6 +1206,7 @@ export const ListMemosRequest: MessageFns<ListMemosRequest> = {
     message.orderBy = object.orderBy ?? "";
     message.filter = object.filter ?? "";
     message.showDeleted = object.showDeleted ?? false;
+    message.showComments = object.showComments ?? false;
     return message;
   },
 };