feat: add version check (#922)

* Add version endpoint

* version indicator

* refetch

* * Translate strings
* Handle error

apps/client/src/components/settings/app-version.tsx

@@ -0,0 +1,53 @@
+import { useAppVersion } from "@/features/workspace/queries/workspace-query.ts";
+import { isCloud } from "@/lib/config.ts";
+import classes from "@/components/settings/settings.module.css";
+import { Indicator, Text, Tooltip } from "@mantine/core";
+import React from "react";
+import semverGt from "semver/functions/gt";
+import { useTranslation } from "react-i18next";
+
+export default function AppVersion() {
+  const { t } = useTranslation();
+  const { data: appVersion } = useAppVersion(!isCloud());
+  let hasUpdate = false;
+  try {
+    hasUpdate =
+      appVersion &&
+      parseFloat(appVersion.latestVersion) > 0 &&
+      semverGt(appVersion.latestVersion, appVersion.currentVersion);
+  } catch (err) {
+    console.error(err);
+  }
+
+  return (
+    <div className={classes.text}>
+      <Tooltip
+        label={t("{{latestVersion}} is available", {
+          latestVersion: `v${appVersion?.latestVersion}`,
+        })}
+        disabled={!hasUpdate}
+      >
+        <Indicator
+          label={t("New update")}
+          color="gray"
+          inline
+          size={16}
+          position="middle-end"
+          style={{ cursor: "pointer" }}
+          disabled={!hasUpdate}
+        >
+          <Text
+            size="sm"
+            c="dimmed"
+            component="a"
+            mr={45}
+            href="https://github.com/docmost/docmost/releases"
+            target="_blank"
+          >
+            v{APP_VERSION}
+          </Text>
+        </Indicator>
+      </Tooltip>
+    </div>
+  );
+}

apps/client/src/components/settings/settings-sidebar.tsx

@@ -27,6 +27,7 @@ import {
   prefetchSsoProviders,
   prefetchWorkspaceMembers,
 } from "@/components/settings/settings-queries.tsx";
+import AppVersion from "@/components/settings/app-version.tsx";
 
 interface DataItem {
   label: string;
@@ -205,19 +206,8 @@ export default function SettingsSidebar() {
       </Group>
 
       <ScrollArea w="100%">{menuItems}</ScrollArea>
-      {!isCloud() && (
-        <div className={classes.text}>
-          <Text
-            size="sm"
-            c="dimmed"
-            component="a"
-            href="https://github.com/docmost/docmost/releases"
-            target="_blank"
-          >
-            v{APP_VERSION}
-          </Text>
-        </div>
-      )}
+
+      {!isCloud() && <AppVersion />}
 
       {isCloud() && (
         <div className={classes.text}>