refactor(admin): align admin ui with app design language

- dashboard: card grid replaced by status strip + nav-tile section + list
- nav-tile promoted to shared component
- stat tiles and usage screen de-carded, sections divided like settings
- hub run tournament back to a list row
- telemetry link restored in tools list

src/features/telemetry/components/usage-screen.tsx

@@ -2,7 +2,7 @@ import { Suspense, useMemo, useState } from "react";
 import { Trans, useLingui } from "@lingui/react/macro";
 import {
   Badge,
-  Card,
+  Divider,
   Group,
   SegmentedControl,
   SimpleGrid,
@@ -10,7 +10,7 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { CardSkeleton, StatTileSkeleton } from "@/components/skeletons";
+import { ListSkeleton, StatTileSkeleton } from "@/components/skeletons";
 import { useRollupRange } from "../queries";
 import { fillDailySeries, lastNDays, latestValue, listDays, sumByDim } from "../range";
 import { BarList, Sparkline, StatTile } from "./charts";
@@ -171,30 +171,30 @@ const UsageSections = ({ from, to }: { from: string; to: string }) => {
           />
           <StatTile label={<Trans>Sessions</Trans>} value={sessions.toLocaleString()} />
         </SimpleGrid>
-        <Card withBorder radius="md" p="md">
-          <Stack gap="xs">
-            <Text size="xs" c="dimmed">
-              <Trans>Page views by route</Trans>
-            </Text>
-            <BarList items={pageViewItems} />
-          </Stack>
-        </Card>
+        <Stack gap="xs">
+          <Text size="xs" c="dimmed">
+            <Trans>Page views by route</Trans>
+          </Text>
+          <BarList items={pageViewItems} />
+        </Stack>
       </Stack>
 
+      <Divider />
+
       <Stack gap="sm">
         <Title order={4}>
           <Trans>Server functions</Trans>
         </Title>
-        <Card withBorder radius="md" p="md">
-          <Stack gap="xs">
-            <Text size="xs" c="dimmed">
-              <Trans>Top functions by call count</Trans>
-            </Text>
-            <BarList items={serverFnItems} />
-          </Stack>
-        </Card>
+        <Stack gap="xs">
+          <Text size="xs" c="dimmed">
+            <Trans>Top functions by call count</Trans>
+          </Text>
+          <BarList items={serverFnItems} />
+        </Stack>
       </Stack>
 
+      <Divider />
+
       <Stack gap="sm">
         <Title order={4}>
           <Trans>Errors</Trans>
@@ -206,6 +206,8 @@ const UsageSections = ({ from, to }: { from: string; to: string }) => {
         />
       </Stack>
 
+      <Divider />
+
       <Stack gap="sm">
         <Title order={4}>
           <Trans>Vitals</Trans>
@@ -261,14 +263,13 @@ export const UsageScreen = () => {
       <Suspense
         fallback={
           <Stack gap="lg">
-            <StatTileSkeleton withCard align="row" />
+            <StatTileSkeleton align="row" />
             <SimpleGrid cols={3} spacing="sm">
-              <StatTileSkeleton withCard />
-              <StatTileSkeleton withCard />
-              <StatTileSkeleton withCard />
+              <StatTileSkeleton />
+              <StatTileSkeleton />
+              <StatTileSkeleton />
             </SimpleGrid>
-            <CardSkeleton withAvatar={false} withBadge={false} />
-            <CardSkeleton withAvatar={false} withBadge={false} />
+            <ListSkeleton rows={6} withTrailing="text" />
           </Stack>
         }
       >