feat: refine widget interactions

packages/widgets/src/timetable/component.tsx

@@ -12,6 +12,7 @@ export default function TimetableWidget({
   options,
   displayMode = "compact",
   width,
+  height,
   itemId,
 }: WidgetComponentProps<"timetable">) {
   const t = useScopedI18n("widget.timetable");
@@ -27,6 +28,7 @@ export default function TimetableWidget({
       itemId={itemId}
       displayMode={displayMode}
       width={width}
+      height={height}
     />
   );
 }
@@ -37,16 +39,22 @@ interface TimetableWidgetInnerProps {
   itemId?: string;
   displayMode: "compact" | "advanced";
   width: number;
+  height: number;
 }
 
-const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }: TimetableWidgetInnerProps) => {
-  const { data: timetable, error } = clientApi.widget.timetable.getTimetable.useQuery({
+const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width, height }: TimetableWidgetInnerProps) => {
+  const {
+    data: timetable,
+    error,
+    isPending,
+  } = clientApi.widget.timetable.getTimetable.useQuery({
     baseUrl,
     itemId,
     stationId: station.value,
     limit: displayMode === "advanced" ? 50 : 10,
   });
   const t = useScopedI18n("widget.timetable");
+  const tCommon = useScopedI18n("common");
 
   if (error && timetable === undefined) throw error;
 
@@ -54,10 +62,19 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
   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;
+  const isAdvanced = displayMode === "advanced";
+  const isDense = !isAdvanced && (width < 300 || height < 160);
+  const showTitle = isAdvanced || height >= 112;
+  const showLine = isAdvanced || width >= 200;
+  const showPlatform = isAdvanced || width >= 320;
 
   return (
-    <Stack w="100%" h="100%" gap="xs" p="sm">
-      <Text fw="bold">{t("title", { station: station.label })}</Text>
+    <Stack w="100%" h="100%" gap={isDense ? 4 : "xs"} p={isDense ? "xs" : "sm"}>
+      {showTitle && (
+        <Text fw={600} size={isDense ? "sm" : undefined} truncate="end">
+          {t("title", { station: station.label })}
+        </Text>
+      )}
       {compactStaleWarning && displayMode === "compact" && (
         <Group gap={2} wrap="nowrap">
           <IconAlertTriangle aria-hidden size={12} color="var(--mantine-color-orange-light-color)" />
@@ -73,9 +90,29 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
       )}
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>
         <SimpleGrid cols={displayMode === "advanced" && width >= 760 ? 2 : 1} spacing="xs">
-          {entries.map((entry) => (
-            <DepartureRow key={`${entry.timestamp.toISOString()}-${entry.location}`} entry={entry} />
-          ))}
+          {isPending ? (
+            <Center mih={64} style={{ gridColumn: "1 / -1" }}>
+              <Text size="sm" c="dimmed">
+                {tCommon("action.loading")}
+              </Text>
+            </Center>
+          ) : entries.length > 0 ? (
+            entries.map((entry) => (
+              <DepartureRow
+                key={`${entry.timestamp.toISOString()}-${entry.location}`}
+                entry={entry}
+                dense={isDense}
+                showLine={showLine}
+                showPlatform={showPlatform}
+              />
+            ))
+          ) : (
+            <Center mih={64} style={{ gridColumn: "1 / -1" }}>
+              <Text size="sm" c="dimmed">
+                —
+              </Text>
+            </Center>
+          )}
         </SimpleGrid>
       </ScrollArea>
       {displayMode === "advanced" && timetable && (
@@ -95,11 +132,21 @@ interface TimetableEntryView {
   platform: { name: string; hasChanged: boolean } | null;
 }
 
-function DepartureRow({ entry }: { entry: TimetableEntryView }) {
+function DepartureRow({
+  entry,
+  dense,
+  showLine,
+  showPlatform,
+}: {
+  entry: TimetableEntryView;
+  dense: boolean;
+  showLine: boolean;
+  showPlatform: boolean;
+}) {
   return (
     <Group justify="space-between" w="100%" wrap="nowrap">
-      <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-        {entry.line && (
+      <Group gap={dense ? 6 : "sm"} wrap="nowrap" style={{ minWidth: 0 }}>
+        {showLine && entry.line && (
           <Badge
             size="sm"
             color={entry.line.color ?? undefined}
@@ -111,21 +158,21 @@ function DepartureRow({ entry }: { entry: TimetableEntryView }) {
             {entry.line.name}
           </Badge>
         )}
-        <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+        <Text size={dense ? "xs" : "sm"} fw={dense ? 600 : undefined} style={{ whiteSpace: "nowrap" }}>
           {dayjs(entry.timestamp).format("HH:mm")}{" "}
           {entry.delay >= 1 && (
-            <Text size="sm" span c="red">
+            <Text size={dense ? "xs" : "sm"} span c="red">
               +{entry.delay}&apos;
             </Text>
           )}
         </Text>
-        <Text size="sm" truncate>
+        <Text size={dense ? "xs" : "sm"} truncate>
           {entry.location}
         </Text>
       </Group>
 
-      {entry.platform && (
-        <Text size="sm" c={entry.platform.hasChanged ? "red" : undefined} style={{ flexShrink: 0 }}>
+      {showPlatform && entry.platform && (
+        <Text size={dense ? "xs" : "sm"} c={entry.platform.hasChanged ? "red" : undefined} style={{ flexShrink: 0 }}>
           {entry.platform.name}
         </Text>
       )}