feat: modernize dashboard widgets

packages/widgets/src/network-controller/network-status/component.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
-import { Box } from "@mantine/core";
+import { Box, Card, SimpleGrid } from "@mantine/core";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import objectSupport from "dayjs/plugin/objectSupport";
@@ -20,26 +20,33 @@ dayjs.extend(duration);
 export default function NetworkControllerNetworkStatusWidget({
   options,
   integrationIds,
+  displayMode,
 }: WidgetComponentProps<"networkControllerStatus">) {
   const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
   });
 
   const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const isAdvanced = displayMode === "advanced";
+  const countWifiGuests = data.reduce((sum, summary) => sum + summary.wifi.guests, 0);
+  const countWifiUsers = data.reduce((sum, summary) => sum + summary.wifi.users, 0);
+  const countLanGuests = data.reduce((sum, summary) => sum + summary.lan.guests, 0);
+  const countLanUsers = data.reduce((sum, summary) => sum + summary.lan.users, 0);
 
   return (
-    <Box p={"sm"}>
-      {options.content === "wifi" ? (
-        <WifiVariant
-          countGuests={data.reduce((sum, summary) => sum + summary.wifi.guests, 0)}
-          countUsers={data.reduce((sum, summary) => sum + summary.wifi.users, 0)}
-        />
-      ) : (
-        <WiredVariant
-          countGuests={data.reduce((sum, summary) => sum + summary.lan.guests, 0)}
-          countUsers={data.reduce((sum, summary) => sum + summary.lan.users, 0)}
-        />
-      )}
+    <Box p={isAdvanced ? "md" : "sm"} h="100%">
+      <SimpleGrid cols={isAdvanced ? 2 : 1} h="100%" spacing="sm">
+        {(isAdvanced || options.content === "wifi") && (
+          <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
+            <WifiVariant countGuests={countWifiGuests} countUsers={countWifiUsers} compact={!isAdvanced} />
+          </Card>
+        )}
+        {(isAdvanced || options.content === "wired") && (
+          <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
+            <WiredVariant countGuests={countLanGuests} countUsers={countLanUsers} compact={!isAdvanced} />
+          </Card>
+        )}
+      </SimpleGrid>
     </Box>
   );
 }

packages/widgets/src/network-controller/network-status/variants/stat-row.tsx

@@ -1,12 +1,20 @@
 import { Stack, Text } from "@mantine/core";
 
-export const StatRow = ({ label, value }: { label: string; value: string | number }) => {
+export const StatRow = ({
+  label,
+  value,
+  compact = false,
+}: {
+  label: string;
+  value: string | number;
+  compact?: boolean;
+}) => {
   return (
     <Stack gap={0}>
-      <Text size={"2xl"} fw={900} lh={1}>
+      <Text size={compact ? "xl" : "2xl"} fw={800} lh={1}>
         {value}
       </Text>
-      <Text size={"md"} c={"dimmed"}>
+      <Text size={compact ? "sm" : "md"} c="dimmed">
         {label}
       </Text>
     </Stack>

packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx

@@ -5,19 +5,27 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { StatRow } from "./stat-row";
 
-export const WifiVariant = ({ countGuests, countUsers }: { countUsers: number; countGuests: number }) => {
+export const WifiVariant = ({
+  countGuests,
+  countUsers,
+  compact = false,
+}: {
+  countUsers: number;
+  countGuests: number;
+  compact?: boolean;
+}) => {
   const t = useScopedI18n("widget.networkControllerStatus.card");
   return (
     <>
-      <Group gap={"xs"} wrap={"nowrap"} mb={"md"}>
+      <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>
         <IconWifi size={24} />
         <Text size={"md"} fw={"bold"}>
           {t("variants.wifi.name")}
         </Text>
       </Group>
-      <Stack gap={"lg"}>
-        <StatRow label={t("users.label")} value={countUsers} />
-        <StatRow label={t("guests.label")} value={countGuests} />
+      <Stack gap={compact ? "sm" : "lg"}>
+        <StatRow label={t("users.label")} value={countUsers} compact={compact} />
+        <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
       </Stack>
     </>
   );

packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx

@@ -5,19 +5,27 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { StatRow } from "./stat-row";
 
-export const WiredVariant = ({ countGuests, countUsers }: { countUsers: number; countGuests: number }) => {
+export const WiredVariant = ({
+  countGuests,
+  countUsers,
+  compact = false,
+}: {
+  countUsers: number;
+  countGuests: number;
+  compact?: boolean;
+}) => {
   const t = useScopedI18n("widget.networkControllerStatus.card");
   return (
     <>
-      <Group gap={"xs"} wrap={"nowrap"} mb={"md"}>
+      <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>
         <IconNetwork size={24} />
         <Text size={"md"} fw={"bold"}>
           {t("variants.wired.name")}
         </Text>
       </Group>
-      <Stack gap={"lg"}>
-        <StatRow label={t("users.label")} value={countUsers} />
-        <StatRow label={t("guests.label")} value={countGuests} />
+      <Stack gap={compact ? "sm" : "lg"}>
+        <StatRow label={t("users.label")} value={countUsers} compact={compact} />
+        <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
       </Stack>
     </>
   );