From ffe0865b97349490ddaf5b45de37ac0990393c28 Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Thu, 19 Dec 2024 02:26:11 +0100
Subject: [PATCH] Update build details update available

---
 web/src/components/settings/BuildDetails.tsx | 69 ++++++++++++++++----
 1 file changed, 55 insertions(+), 14 deletions(-)

diff --git a/web/src/components/settings/BuildDetails.tsx b/web/src/components/settings/BuildDetails.tsx
index 6edcbe3..e0228c7 100644
--- a/web/src/components/settings/BuildDetails.tsx
+++ b/web/src/components/settings/BuildDetails.tsx
@@ -1,3 +1,5 @@
+import { match } from 'ts-pattern';
+
 import {
     useInstanceSettings,
     useInstanceVersion,
@@ -12,22 +14,61 @@ export const BuildDetails = () => {
         'https://github.com/v3xlabs/v3x-property/commit/' +
             instanceSettings.build_info.git_hash;
 
+    const isAlpha = instanceSettings?.build_info.version.includes('alpha');
+    const update_available = instanceVersion?.update_available;
+
     return (
         <div className="card space-y-2">
-            {instanceVersion?.update_available ? (
-                <div className="card bg-primary-foreground">
-                    <div className="font-bold">Update available</div>
-                    <div className="">
-                        You are running{' '}
-                        <code className="code">{instanceVersion?.version}</code>{' '}
-                        but{' '}
-                        <code className="code">{instanceVersion?.latest}</code>{' '}
-                        is available!
-                    </div>
-                </div>
-            ) : (
-                <div>You are on the latest</div>
-            )}
+            {match({
+                update_available,
+                isAlpha,
+            })
+                .with(
+                    {
+                        update_available: true,
+                        isAlpha: false,
+                    },
+                    () => (
+                        <div className="card bg-yellow-100">
+                            <div className="font-bold">Update available</div>
+                            <div className="">
+                                You are running{' '}
+                                <code className="code border border-yellow-500 rounded-md !bg-yellow-50">
+                                    {instanceVersion?.version}
+                                </code>{' '}
+                                but{' '}
+                                <code className="code border border-yellow-500 rounded-md !bg-yellow-50">
+                                    {instanceVersion?.latest}
+                                </code>{' '}
+                                is available!
+                            </div>
+                        </div>
+                    )
+                )
+                .with(
+                    {
+                        isAlpha: true,
+                    },
+                    () => (
+                        <div className="bg-yellow-100/50 p-2 px-3 border border-yellow-500 rounded-md">
+                            <div>You're running an alpha build</div>
+                        </div>
+                    )
+                )
+                .with(
+                    {
+                        update_available: false,
+                        isAlpha: false,
+                    },
+                    () => (
+                        <div className="bg-green-100/50 p-2 px-3 border border-green-500 rounded-md">
+                            <div>You are on the latest</div>
+                        </div>
+                    )
+                )
+                .otherwise(() => (
+                    <></>
+                ))}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                 <div>
                     <a href={github_link} className="link" target="_blank">