YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update inbox messages style

Browse Source
This commit is contained in:
johnnyjoy
2024-10-19 21:01:02 +08:00
parent 435bd5c44f
commit 199d5680e6
2 changed files with 51 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
web/src/components/Inbox/MemoCommentMessage.tsx
View File

@ -1,9 +1,10 @@
import { Tooltip } from "@mui/joy"; import { Tooltip } from "@mui/joy";
import clsx from "clsx"; import clsx from "clsx";
import { InboxIcon, MessageCircleIcon } from "lucide-react"; import { InboxIcon, LoaderIcon, MessageCircleIcon } from "lucide-react";
import { useEffect, useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { activityServiceClient } from "@/grpcweb"; import { activityServiceClient } from "@/grpcweb";
import useAsyncEffect from "@/hooks/useAsyncEffect";
import useNavigateTo from "@/hooks/useNavigateTo"; import useNavigateTo from "@/hooks/useNavigateTo";
import { activityNamePrefix, memoNamePrefix, useInboxStore, useMemoStore, useUserStore } from "@/store/v1"; import { activityNamePrefix, memoNamePrefix, useInboxStore, useMemoStore, useUserStore } from "@/store/v1";
import { Inbox, Inbox_Status } from "@/types/proto/api/v1/inbox_service"; import { Inbox, Inbox_Status } from "@/types/proto/api/v1/inbox_service";
@ -23,27 +24,27 @@ const MemoCommentMessage = ({ inbox }: Props) => {
const userStore = useUserStore(); const userStore = useUserStore();
const [relatedMemo, setRelatedMemo] = useState<Memo | undefined>(undefined); const [relatedMemo, setRelatedMemo] = useState<Memo | undefined>(undefined);
const [sender, setSender] = useState<User | undefined>(undefined); const [sender, setSender] = useState<User | undefined>(undefined);
const [initialized, setInitialized] = useState<boolean>(false);
useEffect(() => { useAsyncEffect(async () => {
if (!inbox.activityId) { if (!inbox.activityId) {
return; return;
} }
(async () => { const activity = await activityServiceClient.getActivity({
const activity = await activityServiceClient.getActivity({ name: `${activityNamePrefix}${inbox.activityId}`,
name: `${activityNamePrefix}${inbox.activityId}`, });
if (activity.payload?.memoComment) {
const memoCommentPayload = activity.payload.memoComment;
const relatedMemoId = memoCommentPayload.relatedMemoId;
const memo = await memoStore.getOrFetchMemoByName(`${memoNamePrefix}${relatedMemoId}`, {
skipStore: true,
}); });
if (activity.payload?.memoComment) { setRelatedMemo(memo);
const memoCommentPayload = activity.payload.memoComment; const sender = await userStore.getOrFetchUserByName(inbox.sender);
const relatedMemoId = memoCommentPayload.relatedMemoId; setSender(sender);
const memo = await memoStore.getOrFetchMemoByName(`${memoNamePrefix}${relatedMemoId}`, { setInitialized(true);
skipStore: true, }
});
setRelatedMemo(memo);
const sender = await userStore.getOrFetchUserByName(inbox.sender);
setSender(sender);
}
})();
}, [inbox.activityId]); }, [inbox.activityId]);
const handleNavigateToMemo = async () => { const handleNavigateToMemo = async () => {
@ -86,30 +87,41 @@ const MemoCommentMessage = ({ inbox }: Props) => {
</div> </div>
<div <div
className={clsx( className={clsx(
"border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700", "border w-full p-2 px-3 rounded-lg flex flex-col justify-start items-start gap-1 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
inbox.status !== Inbox_Status.UNREAD && "opacity-60", inbox.status !== Inbox_Status.UNREAD && "opacity-60",
)} )}
> >
<div className="w-full flex flex-row justify-between items-center"> {initialized ? (
<span className="text-xs text-gray-500">{inbox.createTime?.toLocaleString()}</span> <>
<div> <div className="w-full flex flex-row justify-between items-center">
{inbox.status === Inbox_Status.UNREAD && ( <span className="text-sm text-gray-500">{inbox.createTime?.toLocaleString()}</span>
<Tooltip title={t("common.archive")} placement="top"> <div>
<InboxIcon className="w-4 h-auto cursor-pointer text-gray-400 hover:text-blue-600" onClick={() => handleArchiveMessage()} /> {inbox.status === Inbox_Status.UNREAD && (
</Tooltip> <Tooltip title={t("common.archive")} placement="top">
)} <InboxIcon
className="w-4 h-auto cursor-pointer text-gray-400 hover:text-blue-600"
onClick={() => handleArchiveMessage()}
/>
</Tooltip>
)}
</div>
</div>
<p
className="text-base leading-tight cursor-pointer text-gray-500 dark:text-gray-400 hover:underline hover:text-blue-600"
onClick={handleNavigateToMemo}
>
{t("inbox.memo-comment", {
user: sender?.nickname || sender?.username,
memo: `memos/${relatedMemo?.uid}`,
interpolation: { escapeValue: false },
})}
</p>
</>
) : (
<div className="w-full flex flex-row justify-center items-center my-2">
<LoaderIcon className="animate-spin text-zinc-500" />
</div> </div>
</div> )}
<p
className="text-base leading-tight cursor-pointer text-gray-500 dark:text-gray-400 hover:underline hover:text-blue-600"
onClick={handleNavigateToMemo}
>
{t("inbox.memo-comment", {
user: sender?.nickname || sender?.username,
memo: `memos/${relatedMemo?.uid}`,
interpolation: { escapeValue: false },
})}
</p>
</div> </div>
</div> </div>
); );

4
web/src/components/Inbox/VersionUpdateMessage.tsx
View File

@ -71,12 +71,12 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
</div> </div>
<div <div
className={clsx( className={clsx(
"border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700", "border w-full p-2 px-3 rounded-lg flex flex-col justify-start items-start gap-1 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
inbox.status !== Inbox_Status.UNREAD && "opacity-60", inbox.status !== Inbox_Status.UNREAD && "opacity-60",
)} )}
> >
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">
<span className="text-xs text-gray-500">{inbox.createTime?.toLocaleString()}</span> <span className="text-sm text-gray-500">{inbox.createTime?.toLocaleString()}</span>
<div> <div>
{inbox.status === Inbox_Status.UNREAD && ( {inbox.status === Inbox_Status.UNREAD && (
<Tooltip title={t("common.archive")} placement="top"> <Tooltip title={t("common.archive")} placement="top">