feat: add version update inbox message

api/v2/activity_service .go

@@ -49,5 +49,10 @@ func convertActivityPayloadFromStore(payload *storepb.ActivityPayload) *apiv2pb.
 			RelatedMemoId: payload.MemoComment.RelatedMemoId,
 		}
 	}
+	if payload.VersionUpdate != nil {
+		v2Payload.VersionUpdate = &apiv2pb.ActivityVersionUpdatePayload{
+			Version: payload.VersionUpdate.Version,
+		}
+	}
 	return v2Payload
 }

proto/api/v2/activity_service.proto

@@ -32,8 +32,13 @@ message ActivityMemoCommentPayload {
   int32 related_memo_id = 2;
 }
 
+message ActivityVersionUpdatePayload {
+  string version = 1;
+}
+
 message ActivityPayload {
   ActivityMemoCommentPayload memo_comment = 1;
+  ActivityVersionUpdatePayload version_update = 2;
 }
 
 message GetActivityRequest {

proto/api/v2/inbox_service.proto

@@ -49,6 +49,7 @@ message Inbox {
   enum Type {
     TYPE_UNSPECIFIED = 0;
     TYPE_MEMO_COMMENT = 1;
+    TYPE_VERSION_UPDATE = 2;
   }
   Type type = 6;
 

proto/gen/api/v2/README.md

@@ -7,6 +7,7 @@
     - [Activity](#memos-api-v2-Activity)
     - [ActivityMemoCommentPayload](#memos-api-v2-ActivityMemoCommentPayload)
     - [ActivityPayload](#memos-api-v2-ActivityPayload)
+    - [ActivityVersionUpdatePayload](#memos-api-v2-ActivityVersionUpdatePayload)
     - [GetActivityRequest](#memos-api-v2-GetActivityRequest)
     - [GetActivityResponse](#memos-api-v2-GetActivityResponse)
   
@@ -155,6 +156,22 @@
 | Field | Type | Label | Description |
 | ----- | ---- | ----- | ----------- |
 | memo_comment | [ActivityMemoCommentPayload](#memos-api-v2-ActivityMemoCommentPayload) |  |  |
+| version_update | [ActivityVersionUpdatePayload](#memos-api-v2-ActivityVersionUpdatePayload) |  |  |
+
+
+
+
+
+
+<a name="memos-api-v2-ActivityVersionUpdatePayload"></a>
+
+### ActivityVersionUpdatePayload
+
+
+
+| Field | Type | Label | Description |
+| ----- | ---- | ----- | ----------- |
+| version | [string](#string) |  |  |
 
 
 
@@ -377,6 +394,7 @@
 | ---- | ------ | ----------- |
 | TYPE_UNSPECIFIED | 0 |  |
 | TYPE_MEMO_COMMENT | 1 |  |
+| TYPE_VERSION_UPDATE | 2 |  |
 
 
  

web/src/components/Inbox/VersionUpdateMessage.tsx

+import { Tooltip } from "@mui/joy";
+import classNames from "classnames";
+import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { activityServiceClient } from "@/grpcweb";
+import { useInboxStore } from "@/store/v1";
+import { Activity } from "@/types/proto/api/v2/activity_service";
+import { Inbox, Inbox_Status } from "@/types/proto/api/v2/inbox_service";
+import { useTranslate } from "@/utils/i18n";
+import Icon from "../Icon";
+
+interface Props {
+  inbox: Inbox;
+}
+
+const VersionUpdateMessage = ({ inbox }: Props) => {
+  const t = useTranslate();
+  const inboxStore = useInboxStore();
+  const [activity, setActivity] = useState<Activity | undefined>(undefined);
+
+  useEffect(() => {
+    if (!inbox.activityId) {
+      return;
+    }
+
+    activityServiceClient
+      .getActivity({
+        id: inbox.activityId,
+      })
+      .then(({ activity }) => {
+        console.log("activity", activity);
+        setActivity(activity);
+      });
+  }, [inbox.activityId]);
+
+  const handleNavigate = () => {
+    if (!activity?.payload?.versionUpdate?.version) {
+      return;
+    }
+    window.open(`https://github.com/usememos/memos/releases/tag/v${activity?.payload?.versionUpdate?.version}`);
+    if (inbox.status === Inbox_Status.UNREAD) {
+      handleArchiveMessage(true);
+    }
+  };
+
+  const handleArchiveMessage = async (silence = false) => {
+    await inboxStore.updateInbox(
+      {
+        name: inbox.name,
+        status: Inbox_Status.ARCHIVED,
+      },
+      ["status"]
+    );
+    if (!silence) {
+      toast.success("Archived");
+    }
+  };
+
+  return (
+    <div className="w-full flex flex-row justify-start items-start gap-3">
+      <div
+        className={classNames(
+          "shrink-0 mt-2 p-2 rounded-full border",
+          inbox.status === Inbox_Status.UNREAD
+            ? "border-green-600 text-green-600 bg-blue-50 dark:bg-zinc-800"
+            : "border-gray-400 text-gray-400 bg-gray-50 dark:bg-zinc-800"
+        )}
+      >
+        <Tooltip title={"Comment"} placement="bottom">
+          <Icon.ArrowUp className="w-4 sm:w-5 h-auto" />
+        </Tooltip>
+      </div>
+      <div
+        className={classNames(
+          "border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-800 hover:bg-gray-100 dark:hover:bg-zinc-800",
+          inbox.status !== Inbox_Status.UNREAD && "opacity-60"
+        )}
+      >
+        <div className="w-full flex flex-row justify-between items-center">
+          <span className="text-xs text-gray-500">{inbox.createTime?.toLocaleString()}</span>
+          <div>
+            {inbox.status === Inbox_Status.UNREAD && (
+              <Tooltip title={t("common.archive")} placement="top">
+                <Icon.Inbox
+                  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={handleNavigate}
+        >
+          {t("inbox.version-update", {
+            version: activity?.payload?.versionUpdate?.version,
+          })}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default VersionUpdateMessage;

web/src/locales/en.json

@@ -370,6 +370,7 @@
     "password-login-disabled": "Can't remove last identity provider when password login is disabled"
   },
   "inbox": {
-    "memo-comment": "{{user}} has a comment on your {{memo}}."
+    "memo-comment": "{{user}} has a comment on your {{memo}}.",
+    "version-update": "New version {{version}} is available now!"
   }
 }

web/src/pages/Inboxes.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
 import MemoCommentMessage from "@/components/Inbox/MemoCommentMessage";
+import VersionUpdateMessage from "@/components/Inbox/VersionUpdateMessage";
 import MobileHeader from "@/components/MobileHeader";
 import { useInboxStore } from "@/store/v1";
 import { Inbox_Type } from "@/types/proto/api/v2/inbox_service";
@@ -38,6 +39,8 @@ const Inboxes = () => {
             {inboxes.map((inbox) => {
               if (inbox.type === Inbox_Type.TYPE_MEMO_COMMENT) {
                 return <MemoCommentMessage key={`${inbox.name}-${inbox.status}`} inbox={inbox} />;
+              } else if (inbox.type === Inbox_Type.TYPE_VERSION_UPDATE) {
+                return <VersionUpdateMessage key={`${inbox.name}-${inbox.status}`} inbox={inbox} />;
               }
               return undefined;
             })}