fix: polish widget failure feedback

This commit is contained in:
Thomas Camlong committed 2026-08-02 09:50:08 +02:00
1 parent 45ff97972c
commit 1d73513989
7 files changed
+33 -22

No files matched your search

@@ -24,7 +24,7 @@ export function IntegrationErrorIndicator({ results }: IntegrationErrorIndicator
const label = `${t("error")}: ${names}`;
return (
<Tooltip label={label} position="left" withArrow>
<ActionIcon variant="transparent" color="orange" size={18} aria-label={label} style={{ cursor: "help" }}>
<ActionIcon variant="transparent" color="orange" size={28} aria-label={label} style={{ cursor: "help" }}>
<IconAlertTriangle aria-hidden size={14} />
</ActionIcon>
</Tooltip>
@@ -325,7 +325,7 @@ export default function MediaServerWidget({
</Group>
)}
{!isAdvanced && hasFailedIntegrations && (
<Group h={18} px="xs" justify="flex-end">
<Group px="xs" justify="flex-end">
<IntegrationErrorIndicator results={currentStreams} />
</Group>
)}
+2 -2
View File
@@ -60,8 +60,8 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
return (
<ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : "xs"}>
{warning && (
<Alert role="status" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
{warning}
<Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
<output>{warning}</output>
</Alert>
)}
<SimpleGrid cols={columns} w="100%" spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>
+14 -5
View File
@@ -51,15 +51,24 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
if (error && timetable === undefined) throw error;
const entries = timetable?.entries ?? [];
const staleWarning =
error && timetable ? t("warning.stale", { time: dayjs(timetable.timestamp).format("HH:mm:ss") }) : undefined;
const staleTime = timetable ? dayjs(timetable.timestamp).format("HH:mm:ss") : undefined;
const staleWarning = error && staleTime ? t("warning.stale", { time: staleTime }) : undefined;
const compactStaleWarning = error && staleTime ? t("warning.staleCompact") : undefined;
return (
<Stack w="100%" h="100%" gap="xs" p="sm">
<Text fw="bold">{t("title", { station: station.label })}</Text>
{staleWarning && (
<Alert role="status" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
{staleWarning}
{compactStaleWarning && displayMode === "compact" && (
<Group gap={2} wrap="nowrap">
<IconAlertTriangle aria-hidden size={12} color="var(--mantine-color-orange-6)" />
<Text component="output" size="xs" c="orange" style={{ whiteSpace: "nowrap" }}>
{compactStaleWarning}
</Text>
</Group>
)}
{staleWarning && displayMode === "advanced" && (
<Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
<output>{staleWarning}</output>
</Alert>
)}
<ScrollArea style={{ flex: 1, minHeight: 0 }}>