Add version updater feature

Added a version updater component that frequently checks for updates to the app and alerts the user if necessary. This requires a new route, config changes, and additional UI resources. A new feature flag 'enableVersionUpdater' has been added in the feature-flags.config.ts file to toggle this feature.

apps/web/app/version/route.ts

@@ -0,0 +1,38 @@
+/**
+ * We force it to static because we want to cache for as long as the build is live.
+ */
+export const dynamic = 'force-static';
+
+// please provide your own implementation
+// if you're not using Vercel or Cloudflare Pages
+const KNOWN_GIT_ENV_VARS = [
+  'CF_PAGES_COMMIT_SHA',
+  'VERCEL_GIT_COMMIT_SHA',
+  'GIT_HASH',
+];
+
+export const GET = async () => {
+  const currentGitHash = await getGitHash();
+
+  return new Response(currentGitHash, {
+    headers: {
+      'content-type': 'text/plain',
+    },
+  });
+};
+
+function getGitHash() {
+  for (const envVar of KNOWN_GIT_ENV_VARS) {
+    if (process.env[envVar]) {
+      return process.env[envVar];
+    }
+  }
+
+  return getHashFromProcess();
+}
+
+async function getHashFromProcess() {
+  const { execSync } = await import('child_process');
+
+  return execSync('git log --pretty=format:"%h" -n1').toString().trim();
+}

apps/web/components/root-providers.tsx

@@ -9,9 +9,12 @@ import { CaptchaProvider } from '@kit/auth/captcha/client';
 import { I18nProvider } from '@kit/i18n/provider';
 import { MonitoringProvider } from '@kit/monitoring/components';
 import { useAuthChangeListener } from '@kit/supabase/hooks/use-auth-change-listener';
+import { If } from '@kit/ui/if';
+import { VersionUpdater } from '@kit/ui/version-updater';
 
 import appConfig from '~/config/app.config';
 import authConfig from '~/config/auth.config';
+import featuresFlagConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
 import { i18nResolver } from '~/lib/i18n/i18n.resolver';
 import { getI18nSettings } from '~/lib/i18n/i18n.settings';
@@ -62,6 +65,10 @@ export function RootProviders({
                 </ThemeProvider>
               </AuthProvider>
             </CaptchaProvider>
+
+            <If condition={featuresFlagConfig.enableVersionUpdater}>
+              <VersionUpdater />
+            </If>
           </I18nProvider>
         </ReactQueryStreamedHydration>
       </ReactQueryProvider>

apps/web/config/feature-flags.config.ts

@@ -50,6 +50,10 @@ const FeatureFlagsSchema = z.object({
     description: 'Enable realtime for the notifications functionality',
     required_error: 'Provide the variable NEXT_PUBLIC_REALTIME_NOTIFICATIONS',
   }),
+  enableVersionUpdater: z.boolean({
+    description: 'Enable version updater',
+    required_error: 'Provide the variable NEXT_PUBLIC_ENABLE_VERSION_UPDATER',
+  }),
 });
 
 const featuresFlagConfig = FeatureFlagsSchema.parse({
@@ -91,6 +95,10 @@ const featuresFlagConfig = FeatureFlagsSchema.parse({
     process.env.NEXT_PUBLIC_REALTIME_NOTIFICATIONS,
     false,
   ),
+  enableVersionUpdater: getBoolean(
+    process.env.NEXT_PUBLIC_ENABLE_VERSION_UPDATER,
+    false,
+  ),
 } satisfies z.infer<typeof FeatureFlagsSchema>);
 
 export default featuresFlagConfig;

apps/web/public/locales/en/common.json

@@ -51,6 +51,10 @@
   "notifications": "Notifications",
   "noNotifications": "No notifications",
   "justNow": "Just now",
+  "newVersionAvailable": "New version available",
+  "newVersionAvailableDescription": "A new version of the app is available. It is recommended to refresh the page to get the latest updates and avoid any issues.",
+  "newVersionSubmitButton": "Reload and Update",
+  "back": "Back",
   "roles": {
     "owner": {
       "label": "Owner"