From 79bac62b0904de200436969a2a59223d0e0d3968 Mon Sep 17 00:00:00 2001
From: biersoeckli <meow@biersoeckli.ch>
Date: Thu, 16 Jan 2025 18:10:29 +0000
Subject: [PATCH] feat: update QuickStack version info component layout

---
 .../settings/maintenance/qs-version-info.tsx  | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/app/settings/maintenance/qs-version-info.tsx b/src/app/settings/maintenance/qs-version-info.tsx
index f76d250..2cd23a5 100644
--- a/src/app/settings/maintenance/qs-version-info.tsx
+++ b/src/app/settings/maintenance/qs-version-info.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { purgeRegistryImages, setCanaryChannel, updateQuickstack, updateRegistry } from "../server/actions";
 import { Button } from "@/components/ui/button";
 import { Toast } from "@/frontend/utils/toast.utils";
@@ -17,7 +17,7 @@ export default function QuickStackVersionInfo({
     currentVersion
 }: {
     useCanaryChannel: boolean;
-    currentVersion: string;
+    currentVersion?: string;
 }) {
 
     const useConfirm = useConfirmDialog();
@@ -31,6 +31,7 @@ export default function QuickStackVersionInfo({
             </CardHeader>
             <CardContent className="space-y-6">
 
+
                 <div className="flex items-center space-x-2 pl-1">
                     <Switch id="canary-channel-mode" disabled={loading} checked={useCanaryChannel} onCheckedChange={(checked) => {
                         try {
@@ -43,15 +44,19 @@ export default function QuickStackVersionInfo({
                     <Label htmlFor="canary-channel-mode">Use Canary Channel for Updates</Label>
                 </div>
 
-                <Button variant="secondary" disabled={loading} onClick={async () => {
-                    if (await useConfirm.openConfirmDialog({
-                        title: 'Update QuickStack',
-                        description: 'This action will restart the QuickStack service and installs the lastest version. It may take a few minutes to complete.',
-                        okButton: "Update QuickStack",
-                    })) {
-                        Toast.fromAction(() => updateQuickstack());
-                    }
-                }}><Rocket /> Update QuickStack</Button>
+                <div className="flex items-center gap-4">
+                    <Button variant="secondary" disabled={loading} onClick={async () => {
+                        if (await useConfirm.openConfirmDialog({
+                            title: 'Update QuickStack',
+                            description: 'This action will restart the QuickStack service and installs the lastest version. It may take a few minutes to complete.',
+                            okButton: "Update QuickStack",
+                        })) {
+                            Toast.fromAction(() => updateQuickstack());
+                        }
+                    }}><Rocket /> Update QuickStack</Button>
+                    <p className="text-slate-500 text-sm flex-1 text-right">Installed: {currentVersion ?? 'unknown'}</p>
+
+                </div>
             </CardContent>
         </Card >
     </>;