feat(ui): version checker

ui/src/components/Version.tsx

@@ -1,8 +1,10 @@
+import { memo, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ReadOutlined as ReadOutlinedIcon } from "@ant-design/icons";
-import { Divider, Space, Typography } from "antd";
+import { Badge, Divider, Space, Typography } from "antd";
 
 import { version } from "@/domain/version";
+import { useVersionChecker } from "@/hooks";
 
 export type VersionProps = {
   className?: string;
@@ -12,6 +14,8 @@ export type VersionProps = {
 const Version = ({ className, style }: VersionProps) => {
   const { t } = useTranslation();
 
+  const { data: hasNewVersions } = useVersionChecker();
+
   return (
     <Space className={className} style={style} size={4}>
       <Typography.Link type="secondary" href="https://docs.certimate.me" target="_blank">
@@ -20,12 +24,16 @@ const Version = ({ className, style }: VersionProps) => {
           <span>{t("common.menu.document")}</span>
         </div>
       </Typography.Link>
+
       <Divider type="vertical" />
-      <Typography.Link type="secondary" href="https://github.com/usual2970/certimate/releases" target="_blank">
-        {version}
-      </Typography.Link>
+
+      <Badge styles={{ indicator: { transform: "scale(0.75) translate(50%, -50%)" } }} count={hasNewVersions ? "NEW" : 0}>
+        <Typography.Link type="secondary" href="https://github.com/usual2970/certimate/releases" target="_blank">
+          {version}
+        </Typography.Link>
+      </Badge>
     </Space>
   );
 };
 
-export default Version;
+export default memo(Version);