chore: factor out dashboard

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">