From 627306a5c5dbab4da6ab54e53aa3de6ae3ae93ae Mon Sep 17 00:00:00 2001
From: Alexey Bagno <alexey.bagno@gmail.com>
Date: Wed, 2 Sep 2026 20:03:28 +0500
Subject: [PATCH] chore: factor out dashboard

---
 web/src/App.tsx | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index a616279..dcf4018 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -134,6 +134,27 @@ function Nav({
   );
 }
 
+function Dashboard({
+  links,
+  monitors,
+}: {
+  links: Link[];
+  monitors: Monitor[];
+}) {
+  return (
+    <div class="flex flex-col gap-2 mt-4">
+      <DashboardCatName name="Links" />
+      <LinkList links={links} />
+      <DashboardCatName name="Monitors" />
+      <div class="flex flex-col gap-2">
+        {monitors.map((it) => (
+          <MonitorCard s={it} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function MobileTopBar({ category }: { category: Category }) {
   const label = CATEGORIES.find((c) => c.id === category)?.label ?? "";
   return (
@@ -198,20 +219,7 @@ function MainScreen({
       }`}
     >
       {category === "dashboard" && (
-        <div class="flex flex-col md:flex-row gap-2 justify-center mt-4">
-          <div>
-            <DashboardCatName name="Links" />
-            <LinkList links={content.links} />
-          </div>
-          <div>
-            <DashboardCatName name="Monitors" />
-            <div class="flex flex-col gap-2">
-              {content.monitors.map((it) => (
-                <MonitorCard s={it} />
-              ))}
-            </div>
-          </div>
-        </div>
+        <Dashboard links={content.links} monitors={content.monitors} />
       )}
       {category === "exec" && (
         <div class="flex flex-col gap-3 mt-4">