feat!: release v2 (#6545)

Co-authored-by: Artur <145776561+arturict@users.noreply.github.com> Co-authored-by: arturict <arturict@users.noreply.github.com> Co-authored-by: Thomas <thomas@ajnart.fr> Co-authored-by: Afonso Jorge Ramos <afonsojorgeramos@gmail.com> Co-authored-by: Danura30082 <danura30082+github@gmail.com> Co-authored-by: Kushie <122986913+kushiemoon-dev@users.noreply.github.com> Co-authored-by: ajnart <thomas@ajnart.fr> Co-authored-by: ajnart <thomas@ajnart.dev> Co-authored-by: chenjun <chenjun@foxmail.com> Co-authored-by: Wikibear <wikibear@users.noreply.github.com> Co-authored-by: Bergasha <bergasha@gmail.com> Co-authored-by: leafyelin <43306196+leafyelin@users.noreply.github.com> Co-authored-by: Lucas Araujo <lucas.lra@gmail.com> Co-authored-by: GreenMonito <86085570+GreenMonito@users.noreply.github.com> Co-authored-by: Nerdy-Technician <roffo@nerdy-technician.social> Co-authored-by: Jun <34545896+jcstrong@users.noreply.github.com> Co-authored-by: Edmond Abraham <54119952+gitedmond@users.noreply.github.com> Co-authored-by: thrawnx <tight.bulb9384@fastmail.com> Co-authored-by: Chris <58918656+nordada@users.noreply.github.com> Co-authored-by: yi111 <153097222+Yi-111-a@users.noreply.github.com> Co-authored-by: Yanis <naamaneyanis@gmail.com> Co-authored-by: Wikibear <me@sej.de> Co-authored-by: alessiottavo <93441886+alessiottavo@users.noreply.github.com>
2026-10-02 21:00:14 +02:00
1 parent 3a53bb77aa
commit fcd7c979df
@@ -1,72 +1,182 @@
-import { Badge, Center, Group, Stack, Text } from "@mantine/core";
-import dayjs from "dayjs";
+import { Alert, Badge, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";

 import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";

 import type { DynamicSelectOption } from "../_inputs/widget-dynamic-select-input";
+import { formatLocalizedTime } from "../common/locale";
 import type { WidgetComponentProps } from "../definition";

-export default function TimetableWidget({ options }: WidgetComponentProps<"timetable">) {
-  const t = useScopedI18n("widget.timetable");
+export default function TimetableWidget({
+  options,
+  displayMode = "compact",
+  width,
+  height,
+  itemId,
+}: WidgetComponentProps<"timetable">) {
+  const t = useI18n("widget.timetable");

  if (!options.station) {
    return <Center h="100%">{t("noStation")}</Center>;
  }

-  return <TimetableWidgetInner station={options.station} baseUrl={options.baseUrl} />;
+  return (
+    <TimetableWidgetInner
+      station={options.station}
+      baseUrl={options.baseUrl}
+      itemId={itemId}
+      displayMode={displayMode}
+      width={width}
+      height={height}
+    />
+  );
 }

 interface TimetableWidgetInnerProps {
  station: DynamicSelectOption;
  baseUrl: string;
+  itemId?: string;
+  displayMode: "compact" | "advanced";
+  width: number;
+  height: number;
 }

-const TimetableWidgetInner = ({ station, baseUrl }: TimetableWidgetInnerProps) => {
-  const { data: timetable } = 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: 10,
+    limit: displayMode === "advanced" ? 50 : 10,
  });
-  const t = useScopedI18n("widget.timetable");
+  const t = useI18n("widget.timetable");
+  const tCommon = useI18n("common");
+  const locale = useCurrentIntlLocale();
+
+  if (error && timetable === undefined) throw error;
+
+  const entries = timetable?.entries ?? [];
+  const staleTime = timetable ? formatLocalizedTime(timetable.timestamp, locale, { includeSeconds: true }) : 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);

  return (
-    <Stack w="100%" gap="xs" p="sm">
-      <Text fw="bold">{t("title", { station: station.label })}</Text>
-      {(timetable?.entries ?? []).map((entry) => (
-        <Group key={`${entry.timestamp.toISOString()}-${entry.location}`} justify="space-between" w="100%">
-          <Group gap="sm">
-            {entry.line && (
-              <Badge
-                size="sm"
-                color={entry.line.color ?? undefined}
-                variant={entry.line.color ? "filled" : "default"}
-                w={32}
-                p={0}
-                radius={0}
-              >
-                {entry.line.name}
-              </Badge>
-            )}
-            <Text size="sm">
-              {dayjs(entry.timestamp).format("HH:mm")}{" "}
-              {entry.delay >= 1 && (
-                <Text size="sm" span c="red">
-                  +{entry.delay}&apos;
-                </Text>
-              )}
-            </Text>
-
-            <Text size="sm">{entry.location}</Text>
-          </Group>
-
-          {entry.platform && (
-            <Text size="sm" c={entry.platform.hasChanged ? "red" : undefined}>
-              {entry.platform.name}
-            </Text>
-          )}
+    <Stack w="100%" h="100%" gap={isDense ? 4 : "xs"} p={isDense ? "xs" : "sm"}>
+      <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="var(--mantine-font-size-xs)"
+            color="var(--mantine-color-orange-light-color)"
+            style={{ flexShrink: 0 }}
+          />
+          <Text component="output" size="xs" c="var(--mantine-color-text)" style={{ whiteSpace: "nowrap" }}>
+            {compactStaleWarning}
+          </Text>
        </Group>
-      ))}
+      )}
+      {staleWarning && displayMode === "advanced" && (
+        <Alert
+          role="presentation"
+          color="orange"
+          icon={<IconAlertTriangle aria-hidden size="var(--mantine-font-size-md)" />}
+          p="xs"
+        >
+          <output>{staleWarning}</output>
+        </Alert>
+      )}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        <SimpleGrid cols={displayMode === "advanced" && width >= 760 ? 2 : 1} spacing="xs">
+          {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}
+                locale={locale}
+              />
+            ))
+          ) : (
+            <Center mih={64} style={{ gridColumn: "1 / -1" }}>
+              <Text size="sm" c="dimmed">
+                —
+              </Text>
+            </Center>
+          )}
+        </SimpleGrid>
+      </ScrollArea>
+      {displayMode === "advanced" && timetable && (
+        <Text size="xs" c="dimmed" ta="right">
+          {formatLocalizedTime(timetable.timestamp, locale, { includeSeconds: true })}
+        </Text>
+      )}
    </Stack>
  );
 };
+
+interface TimetableEntryView {
+  timestamp: Date;
+  delay: number;
+  line: { name: string; color: string | null } | null;
+  location: string;
+  platform: { name: string; hasChanged: boolean } | null;
+}
+
+function DepartureRow({ entry, dense, locale }: { entry: TimetableEntryView; dense: boolean; locale: string }) {
+  return (
+    <Group justify="space-between" w="100%" wrap="nowrap">
+      <Group gap={dense ? 6 : "sm"} wrap="nowrap" style={{ minWidth: 0 }}>
+        {entry.line && (
+          <Badge
+            size="sm"
+            color={entry.line.color ?? undefined}
+            variant={entry.line.color ? "filled" : "default"}
+            w={32}
+            p={0}
+            radius={0}
+          >
+            {entry.line.name}
+          </Badge>
+        )}
+        <Text size={dense ? "xs" : "sm"} fw={dense ? 600 : undefined} style={{ whiteSpace: "nowrap" }}>
+          {formatLocalizedTime(entry.timestamp, locale)}{" "}
+          {entry.delay >= 1 && (
+            <Text size={dense ? "xs" : "sm"} span c="red">
+              +{entry.delay}&apos;
+            </Text>
+          )}
+        </Text>
+        <Text size={dense ? "xs" : "sm"} truncate>
+          {entry.location}
+        </Text>
+      </Group>
+
+      {entry.platform && (
+        <Text
+          size={dense ? "xs" : "sm"}
+          c={entry.platform.hasChanged ? "red" : undefined}
+          maw="35%"
+          truncate="end"
+          style={{ flexShrink: 1, minWidth: 0 }}
+        >
+          {entry.platform.name}
+        </Text>
+      )}
+    </Group>
+  );
+}
@@ -1,27 +1,45 @@
-import { IconBusStop } from "@tabler/icons-react";
+import { IconBusStop, IconWorldOff } from "@tabler/icons-react";
 import { z } from "zod/v4";

 import { clientApi } from "@homarr/api/client";
+import { useI18n } from "@homarr/translation/client";

 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";

 export const { componentLoader, definition } = createWidgetDefinition("timetable", {
  icon: IconBusStop,
+  supportsAdvancedFocus: true,
+  errors: {
+    BAD_REQUEST: {
+      icon: IconWorldOff,
+      message: (t) => t("widget.timetable.error.customSourceUnavailable"),
+      hideLogsLink: true,
+    },
+  },
  createOptions() {
    return optionsBuilder.from((factory) => ({
      baseUrl: factory.text({
        defaultValue: "https://search.ch",
        validate: z.string().url(),
+        withDescription: true,
      }),
      station: factory.dynamicSelect({
-        useOptions(query, _integrationIds, options) {
-          const { data: stations, isPending } = clientApi.widget.timetable.searchStations.useQuery({
+        useOptions(query, _integrationIds, options, itemId, boardId) {
+          const t = useI18n("widget.timetable");
+          const {
+            data: stations,
+            error,
+            isPending,
+          } = clientApi.widget.timetable.searchStations.useQuery({
            baseUrl: typeof options.baseUrl === "string" ? options.baseUrl : "https://search.ch",
+            itemId,
+            boardId,
            query,
          });

          return {
+            error: error ? t("error.stationSearch") : undefined,
            isPending,
            options:
              stations?.map((station) => ({