feat: frontend supports `Show comments` display setting

pull/5091/head
dangjinghao 1 month ago
parent 49754ef2e8
commit 77524b7871

@ -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>

@ -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(() => {

@ -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",

@ -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}
/>
);

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

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

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

@ -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
}

@ -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;
},
};

Loading…
Cancel
Save