From ed7b30dc5f27988b803d9eabcaa07b2bf104b13f Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 09:50:08 +0200
Subject: [PATCH] fix: polish widget failure feedback

---
 apps/docs/docs/widgets/timetable/index.mdx    |  2 +-
 .../common/integration-error-indicator.tsx    |  2 +-
 packages/widgets/src/rssFeed/component.tsx    |  4 ++--
 packages/widgets/src/timetable/component.tsx  | 19 ++++++++++++++-----
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/docs/docs/widgets/timetable/index.mdx b/apps/docs/docs/widgets/timetable/index.mdx
index 37f5abf05..1aede99cd 100644
--- a/apps/docs/docs/widgets/timetable/index.mdx
+++ b/apps/docs/docs/widgets/timetable/index.mdx
@@ -37,4 +37,4 @@ import streetDepartures from "./img/street-departures.png";
 
 For security, all custom base URLs must resolve to a public IP address whenever Homarr uses them. Private and local hosts are rejected.
 
-If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them with their last update time.
+If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them as stale. The advanced view also shows their last update time.
diff --git a/packages/widgets/src/common/integration-error-indicator.tsx b/packages/widgets/src/common/integration-error-indicator.tsx
index 818937ef4..6e9f27dd4 100644
--- a/packages/widgets/src/common/integration-error-indicator.tsx
+++ b/packages/widgets/src/common/integration-error-indicator.tsx
@@ -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>
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index b09a94623..2fc2b9147 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -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"}>
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index d2c453777..c82f8b2e2 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -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 }}>