fix(widgets): restore compact v1 surfaces (#6710)
This commit is contained in:
Thomas authored and 
GitHub committed
1 parent
1b2f1bd720
commit
643ecf3df7
105 files changed
+1603
-1285
No files matched your search
@@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { Badge, Card, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
|
||||
import { Badge, Box, Card, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
|
||||
@@ -13,8 +12,7 @@ import { getNetworkControllerStatusLayout } from "./layout";
|
||||
import { WifiVariant } from "./variants/wifi-variant";
|
||||
import { WiredVariant } from "./variants/wired-variant";
|
||||
|
||||
const neutralBorderColor =
|
||||
"rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45))";
|
||||
const neutralBorderColor = "rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45))";
|
||||
|
||||
export default function NetworkControllerNetworkStatusWidget({
|
||||
options,
|
||||
@@ -22,17 +20,18 @@ export default function NetworkControllerNetworkStatusWidget({
|
||||
displayMode,
|
||||
width,
|
||||
height,
|
||||
displayScale = 1,
|
||||
}: WidgetComponentProps<"networkControllerStatus">) {
|
||||
const summaryQuery = clientApi.widget.networkController.summary.useQuery({
|
||||
integrationIds,
|
||||
});
|
||||
const results = getUsableWidgetQueryData(summaryQuery) ?? [];
|
||||
const summaries = useMemo(
|
||||
() =>
|
||||
results.filter(
|
||||
(result): result is typeof result & { summary: NonNullable<typeof result.summary> } => result.summary !== null,
|
||||
),
|
||||
[results],
|
||||
const isAdvanced = displayMode === "advanced";
|
||||
let results = summaryQuery.data ?? [];
|
||||
if (isAdvanced) {
|
||||
results = getUsableWidgetQueryData(summaryQuery) ?? [];
|
||||
}
|
||||
const summaries = results.filter(
|
||||
(result): result is typeof result & { summary: NonNullable<typeof result.summary> } => result.summary !== null,
|
||||
);
|
||||
const tWidgetCommon = useI18n("widget.common");
|
||||
const tCommon = useI18n("common");
|
||||
@@ -42,14 +41,55 @@ export default function NetworkControllerNetworkStatusWidget({
|
||||
const countWifiUsers = summaries.reduce((sum, { summary }) => sum + summary.wifi.users, 0);
|
||||
const countLanGuests = summaries.reduce((sum, { summary }) => sum + summary.lan.guests, 0);
|
||||
const countLanUsers = summaries.reduce((sum, { summary }) => sum + summary.lan.users, 0);
|
||||
const layout = getNetworkControllerStatusLayout({ width, height, displayMode, content: options.content });
|
||||
const isAdvanced = displayMode === "advanced";
|
||||
let responsiveWidth = width;
|
||||
let responsiveHeight = height;
|
||||
if (!isAdvanced && Number.isFinite(displayScale) && displayScale > 0) {
|
||||
responsiveWidth *= displayScale;
|
||||
responsiveHeight *= displayScale;
|
||||
}
|
||||
const layout = getNetworkControllerStatusLayout({
|
||||
width: responsiveWidth,
|
||||
height: responsiveHeight,
|
||||
displayMode,
|
||||
content: options.content,
|
||||
});
|
||||
const indicatorResults =
|
||||
results.length > 0 || !summaryQuery.error
|
||||
? results
|
||||
: integrationIds.map((integrationId) => ({ integrationId, error: "query" }));
|
||||
const queryIndicators = (
|
||||
<Group gap={0} justify="flex-end">
|
||||
<IntegrationErrorIndicator results={results} />
|
||||
<IntegrationErrorIndicator results={indicatorResults} />
|
||||
</Group>
|
||||
);
|
||||
|
||||
if (!isAdvanced) {
|
||||
return (
|
||||
<Box h="100%" p={layout.padding} pos="relative">
|
||||
<Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
|
||||
{queryIndicators}
|
||||
</Box>
|
||||
{options.content === "wifi" ? (
|
||||
<WifiVariant
|
||||
countGuests={countWifiGuests}
|
||||
countUsers={countWifiUsers}
|
||||
compact={layout.compact}
|
||||
horizontal={layout.horizontalStats}
|
||||
inline={layout.inlineStats}
|
||||
/>
|
||||
) : (
|
||||
<WiredVariant
|
||||
countGuests={countLanGuests}
|
||||
countUsers={countLanUsers}
|
||||
compact={layout.compact}
|
||||
horizontal={layout.horizontalStats}
|
||||
inline={layout.inlineStats}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (summaryQuery.isPending || summaries.length === 0) {
|
||||
return (
|
||||
<Stack h="100%" gap={0}>
|
||||
@@ -63,92 +103,40 @@ export default function NetworkControllerNetworkStatusWidget({
|
||||
);
|
||||
}
|
||||
|
||||
if (isAdvanced) {
|
||||
return (
|
||||
<ScrollArea h="100%" p={layout.padding}>
|
||||
{queryIndicators}
|
||||
<SimpleGrid cols={summaries.length > 1 ? layout.sourceColumns : 1} spacing="sm">
|
||||
{summaries.map(({ integration, summary, updatedAt }) => (
|
||||
<Card key={integration.id} withBorder p="sm" bg="transparent" style={{ borderColor: neutralBorderColor }}>
|
||||
<Stack gap="sm">
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Stack gap={0} miw={0}>
|
||||
<Text fw={600} size="sm" truncate="end">
|
||||
{integration.name}
|
||||
</Text>
|
||||
{updatedAt && (
|
||||
<Text size="xs" c="dimmed">
|
||||
{tWidgetCommon("updatedAt", { date: new Date(updatedAt).toLocaleString(locale) })}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
<Badge size="xs" variant="light">
|
||||
{integration.kind}
|
||||
</Badge>
|
||||
</Group>
|
||||
<SimpleGrid cols={layout.columns} spacing="sm">
|
||||
<Card
|
||||
p={layout.cardPadding}
|
||||
withBorder
|
||||
bg="transparent"
|
||||
style={{ borderColor: neutralBorderColor }}
|
||||
>
|
||||
<WifiVariant countGuests={summary.wifi.guests} countUsers={summary.wifi.users} />
|
||||
</Card>
|
||||
<Card
|
||||
p={layout.cardPadding}
|
||||
withBorder
|
||||
bg="transparent"
|
||||
style={{ borderColor: neutralBorderColor }}
|
||||
>
|
||||
<WiredVariant countGuests={summary.lan.guests} countUsers={summary.lan.users} />
|
||||
</Card>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack p={layout.padding} h="100%" gap={0}>
|
||||
<ScrollArea h="100%" p={layout.padding}>
|
||||
{queryIndicators}
|
||||
<SimpleGrid cols={layout.columns} spacing="sm" style={{ flex: 1, alignItems: "stretch" }}>
|
||||
{layout.showWifi && (
|
||||
<Card
|
||||
p={layout.cardPadding}
|
||||
withBorder={layout.withBorder}
|
||||
bg="transparent"
|
||||
h="100%"
|
||||
style={{ borderColor: neutralBorderColor }}
|
||||
>
|
||||
<WifiVariant
|
||||
countGuests={countWifiGuests}
|
||||
countUsers={countWifiUsers}
|
||||
compact={layout.compact}
|
||||
horizontal={layout.horizontalStats}
|
||||
/>
|
||||
<SimpleGrid cols={summaries.length > 1 ? layout.sourceColumns : 1} spacing="sm">
|
||||
{summaries.map(({ integration, summary, updatedAt }) => (
|
||||
<Card key={integration.id} withBorder p="sm" bg="transparent" style={{ borderColor: neutralBorderColor }}>
|
||||
<Stack gap="sm">
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Stack gap={0} miw={0}>
|
||||
<Text fw={600} size="sm" truncate="end">
|
||||
{integration.name}
|
||||
</Text>
|
||||
{updatedAt && (
|
||||
<Text size="xs" c="dimmed">
|
||||
{tWidgetCommon("updatedAt", { date: new Date(updatedAt).toLocaleString(locale) })}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
<Badge size="xs" variant="light">
|
||||
{integration.kind}
|
||||
</Badge>
|
||||
</Group>
|
||||
<SimpleGrid cols={layout.columns} spacing="sm">
|
||||
<Card p={layout.cardPadding} withBorder bg="transparent" style={{ borderColor: neutralBorderColor }}>
|
||||
<WifiVariant countGuests={summary.wifi.guests} countUsers={summary.wifi.users} advanced />
|
||||
</Card>
|
||||
<Card p={layout.cardPadding} withBorder bg="transparent" style={{ borderColor: neutralBorderColor }}>
|
||||
<WiredVariant countGuests={summary.lan.guests} countUsers={summary.lan.users} advanced />
|
||||
</Card>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Card>
|
||||
)}
|
||||
{layout.showWired && (
|
||||
<Card
|
||||
p={layout.cardPadding}
|
||||
withBorder={layout.withBorder}
|
||||
bg="transparent"
|
||||
h="100%"
|
||||
style={{ borderColor: neutralBorderColor }}
|
||||
>
|
||||
<WiredVariant
|
||||
countGuests={countLanGuests}
|
||||
countUsers={countLanUsers}
|
||||
compact={layout.compact}
|
||||
horizontal={layout.horizontalStats}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user