From 939565ce5ac95644ebb7c69b6925c70428358855 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 14 Apr 2026 13:55:14 -0400
Subject: [PATCH] feat: update StatusPage layout and functionality with
 enhanced system status display and activity log

---
 .gitignore                        |   1 +
 src/app/components/StatusPage.tsx | 214 +++++++++++++++---------------
 2 files changed, 109 insertions(+), 106 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2c62df0..9fccacb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 ?archives/*
+dist/*
 node_modules/*
diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index db4027a..be010e4 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -65,78 +65,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
 
   return (
     <div className="p-4 space-y-4">
-      <h2 className="text-sm text-neutral-500">System Status</h2>
-
-      <div className="bg-white border border-neutral-200 rounded-lg p-4">
-        {/* System Status Action Buttons at bottom */}
-        <div className="mb-4">
-          <div className="text-xs text-neutral-500 mb-1">Memory Utilization</div>
-          <div className="flex flex-col gap-2">
-            {/* Heap Graph */}
-            <div>
-              <div className="flex justify-between text-xs mb-0.5">
-                <span>Heap</span>
-                <span>{memory.heap.free} KB free / {memory.heap.total} KB</span>
-              </div>
-              <div className="w-full h-3 bg-neutral-200 rounded overflow-hidden">
-                <div
-                  className="h-3 bg-blue-500"
-                  style={{ width: `${((memory.heap.total - memory.heap.free) / memory.heap.total) * 100}%` }}
-                />
-              </div>
-            </div>
-            {/* PSRAM Graph */}
-            <div>
-              <div className="flex justify-between text-xs mb-0.5">
-                <span>PSRAM</span>
-                <span>{memory.psram.free} KB free / {memory.psram.total} KB</span>
-              </div>
-              <div className="w-full h-3 bg-neutral-200 rounded overflow-hidden">
-                <div
-                  className="h-3 bg-green-500"
-                  style={{ width: `${((memory.psram.total - memory.psram.free) / memory.psram.total) * 100}%` }}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <div className="text-xs text-neutral-500">WiFi</div>
-            <div className="flex items-center gap-1 text-sm">
-              <Wifi className="w-3 h-3 text-green-600" />
-              <span>Connected</span>
-            </div>
-            <div className="text-xs text-neutral-500 mt-1">IP Address</div>
-            <div className="text-sm text-neutral-700">192.168.1.100</div>
-            <div className="text-xs text-neutral-500 mt-1">MAC Address</div>
-            <div className="text-sm text-neutral-700">AA:BB:CC:DD:EE:FF</div>
-          </div>
-          <div>
-            <div className="text-xs text-neutral-500">Uptime</div>
-            <div className="flex items-center gap-1 text-sm">
-              <Clock className="w-3 h-3" />
-              <span>3h 24m</span>
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-col gap-2 mt-6">
-          <button
-            className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
-            onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
-          >
-            <RefreshCw className="w-5 h-5" /> Reset Meatloaf
-          </button>
-          <button
-            className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
-            onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
-          >
-            <RefreshCw className="w-5 h-5" /> Reset Host
-          </button>
-        </div>
-      </div>
 
       {activeDevice && (
         <>
@@ -352,40 +280,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
           </DialogDescription>
         </DialogContent>
       </Dialog>
-
-          <h2 className="text-sm text-neutral-500 pt-2 flex items-center gap-2">
-            <Activity className="w-4 h-4" />
-            Activity Log
-          </h2>
-
-          <div className="bg-white border border-neutral-200 rounded-lg overflow-hidden">
-            {activityLog.map((entry, index) => (
-              <div
-                key={index}
-                className="px-4 py-3 border-b border-neutral-100 last:border-b-0"
-              >
-                <div className="flex items-start gap-3">
-                  <div className="text-xs text-neutral-500 font-mono mt-0.5 w-16 flex-shrink-0">
-                    {entry.time}
-                  </div>
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <div
-                        className={`w-1.5 h-1.5 rounded-full ${
-                          entry.type === 'success'
-                            ? 'bg-green-500'
-                            : entry.type === 'warning'
-                            ? 'bg-yellow-500'
-                            : 'bg-blue-500'
-                        }`}
-                      />
-                      <span className="text-sm text-neutral-900">{entry.event}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
         </>
       )}
 
@@ -400,6 +294,114 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
           </div>
         </div>
       )}
+
+      <h2 className="text-sm text-neutral-500 pt-2 flex items-center gap-2">
+        <Activity className="w-4 h-4" />
+        Activity Log
+      </h2>
+
+      <div className="bg-white border border-neutral-200 rounded-lg overflow-hidden">
+        {activityLog.map((entry, index) => (
+          <div
+            key={index}
+            className="px-4 py-3 border-b border-neutral-100 last:border-b-0"
+          >
+            <div className="flex items-start gap-3">
+              <div className="text-xs text-neutral-500 font-mono mt-0.5 w-16 flex-shrink-0">
+                {entry.time}
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <div
+                    className={`w-1.5 h-1.5 rounded-full ${
+                      entry.type === 'success'
+                        ? 'bg-green-500'
+                        : entry.type === 'warning'
+                        ? 'bg-yellow-500'
+                        : 'bg-blue-500'
+                    }`}
+                  />
+                  <span className="text-sm text-neutral-900">{entry.event}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <h2 className="text-sm text-neutral-500">System Status</h2>
+
+      <div className="bg-white border border-neutral-200 rounded-lg p-4">
+        {/* System Status Action Buttons at bottom */}
+        <div className="mb-4">
+          <div className="text-xs text-neutral-500 mb-1">Memory Utilization</div>
+          <div className="flex flex-col gap-2">
+            {/* Heap Graph */}
+            <div>
+              <div className="flex justify-between text-xs mb-0.5">
+                <span>Heap</span>
+                <span>{memory.heap.free} KB free / {memory.heap.total} KB</span>
+              </div>
+              <div className="w-full h-3 bg-neutral-200 rounded overflow-hidden">
+                <div
+                  className="h-3 bg-blue-500"
+                  style={{ width: `${((memory.heap.total - memory.heap.free) / memory.heap.total) * 100}%` }}
+                />
+              </div>
+            </div>
+            {/* PSRAM Graph */}
+            <div>
+              <div className="flex justify-between text-xs mb-0.5">
+                <span>PSRAM</span>
+                <span>{memory.psram.free} KB free / {memory.psram.total} KB</span>
+              </div>
+              <div className="w-full h-3 bg-neutral-200 rounded overflow-hidden">
+                <div
+                  className="h-3 bg-green-500"
+                  style={{ width: `${((memory.psram.total - memory.psram.free) / memory.psram.total) * 100}%` }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <div className="text-xs text-neutral-500">WiFi</div>
+            <div className="flex items-center gap-1 text-sm">
+              <Wifi className="w-3 h-3 text-green-600" />
+              <span>Connected</span>
+            </div>
+            <div className="text-xs text-neutral-500 mt-1">IP Address</div>
+            <div className="text-sm text-neutral-700">192.168.1.100</div>
+            <div className="text-xs text-neutral-500 mt-1">MAC Address</div>
+            <div className="text-sm text-neutral-700">AA:BB:CC:DD:EE:FF</div>
+          </div>
+          <div>
+            <div className="text-xs text-neutral-500">Uptime</div>
+            <div className="flex items-center gap-1 text-sm">
+              <Clock className="w-3 h-3" />
+              <span>3h 24m</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2 mt-6">
+          <button
+            className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
+            onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
+          >
+            <RefreshCw className="w-5 h-5" /> Reset Meatloaf
+          </button>
+          <button
+            className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
+            onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
+          >
+            <RefreshCw className="w-5 h-5" /> Reset Host
+          </button>
+        </div>
+      </div>
+
     </div>
   );
 }