feat: modernize dashboard widgets

packages/widgets/src/clock/component.tsx

@@ -1,32 +1,39 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, Stack, Text, Title } from "@mantine/core";
+import { Box, Group, Loader, Stack, Text, Title } from "@mantine/core";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import timezones from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
 import { clientApi } from "@homarr/api/client";
+import { metricToImperial } from "@homarr/common";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
+import { isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { AnimatedWeatherIcon } from "../weather/animated-icon";
+import { WeatherDescription } from "../weather/icon";
 
 dayjs.extend(advancedFormat);
 dayjs.extend(utc);
 dayjs.extend(timezones);
 
-export default function ClockWidget({ options, width }: WidgetComponentProps<"clock">) {
-  const secondsFormat = options.showSeconds ? ":ss" : "";
+export default function ClockWidget({ options, width, height, displayMode }: WidgetComponentProps<"clock">) {
+  const isAdvanced = displayMode === "advanced";
+  const secondsFormat = options.showSeconds || isAdvanced ? ":ss" : "";
   const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `hh:mm${secondsFormat} A`;
   const dateFormat = options.dateFormat;
   const customTimeFormat = options.customTimeFormat;
   const customDateFormat = options.customDateFormat;
   const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const time = useCurrentTime(options);
+  const time = useCurrentTime({ showSeconds: options.showSeconds || isAdvanced });
   const zonedTime = time === null ? null : dayjs(time).tz(timezone);
 
-  const sizing = width < 128 ? "xs" : width < 196 ? "sm" : "md";
+  const minimumAxis = Math.min(width, height * 1.5);
+  const sizing = minimumAxis < 128 ? "xs" : minimumAxis < 196 ? "sm" : "md";
   const showWeatherCorner = options.showWeather && sizing !== "xs";
 
   return (
@@ -35,7 +42,9 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
         <ClockWeatherCorner
           latitude={options.weatherLocation.latitude}
           longitude={options.weatherLocation.longitude}
+          locationName={options.weatherLocation.name}
           isFahrenheit={options.isWeatherFormatFahrenheit}
+          showDetails={isAdvanced}
         />
       )}
       <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap={sizing}>
@@ -45,13 +54,20 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
           </Text>
         )}
         <Title className="clock-time-text" fw={700} order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6} lh="1">
-          {zonedTime === null ? "--:--" : zonedTime.format(options.customTimeFormat ? customTimeFormat : timeFormat)}
+          <time dateTime={zonedTime?.toISOString()}>
+            {zonedTime === null ? "--:--" : zonedTime.format(options.customTimeFormat ? customTimeFormat : timeFormat)}
+          </time>
         </Title>
-        {options.showDate && (
+        {(isAdvanced || options.showDate) && (
           <Text className="clock-date-text" size={sizing} lineClamp={1}>
             {zonedTime?.format(options.customDateFormat ? customDateFormat : dateFormat)}
           </Text>
         )}
+        {isAdvanced && (
+          <Text size="xs" c="dimmed" lineClamp={1}>
+            {zonedTime === null ? null : `${timezone} · UTC${zonedTime.format("Z")}`}
+          </Text>
+        )}
       </Stack>
     </Box>
   );
@@ -60,28 +76,86 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
 interface ClockWeatherCornerProps {
   latitude: number;
   longitude: number;
+  locationName: string;
   isFahrenheit: boolean;
+  showDetails: boolean;
 }
 
-const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit }: ClockWeatherCornerProps) => {
-  const { data: weather } = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
+const ClockWeatherCorner = ({
+  latitude,
+  longitude,
+  locationName,
+  isFahrenheit,
+  showDetails,
+}: ClockWeatherCornerProps) => {
+  const t = useI18n();
+  const tCommon = useScopedI18n("common");
+  const weatherQuery = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
+  const weather = weatherQuery.data;
 
-  if (!weather) return null;
+  if (!weather) {
+    return (
+      <Box pos="absolute" top={4} left={4}>
+        {isInitialWidgetQueryPending(weatherQuery) ? (
+          <Loader size="xs" aria-label={tCommon("action.loading")} />
+        ) : (
+          <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
+        )}
+      </Box>
+    );
+  }
 
   const temp = isFahrenheit ? weather.current.temperature * (9 / 5) + 32 : weather.current.temperature;
   const unit = isFahrenheit ? "°F" : "°C";
+  const today = weather.daily[0];
+  const formatTemperature = (value: number | undefined) => {
+    if (value === undefined) return "—";
+    const preferred = isFahrenheit ? value * (9 / 5) + 32 : value;
+    return `${Math.round(preferred)}${unit}`;
+  };
 
   return (
-    <Stack className="clock-weather-corner" pos="absolute" top={4} left={4} gap={0} align="center">
-      <AnimatedWeatherIcon code={weather.current.weathercode} size={22} />
-      <Text className="clock-weather-corner-temp" size="xs" c="dimmed">
-        {Math.round(temp)}
-        {unit}
-      </Text>
+    <Stack
+      className="clock-weather-corner"
+      pos="absolute"
+      top={4}
+      left={4}
+      gap={showDetails ? 4 : 0}
+      align="flex-start"
+    >
+      <Group gap={4} wrap="nowrap">
+        <AnimatedWeatherIcon code={weather.current.weathercode} size={22} />
+        <Text className="clock-weather-corner-temp" size="xs" c="dimmed">
+          {Math.round(temp)}
+          {unit}
+        </Text>
+        {showDetails && <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />}
+      </Group>
+      {showDetails && (
+        <Stack gap={1}>
+          <Text size="xs" fw={600}>
+            {locationName}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {formatTemperature(today?.maxTemp)} / {formatTemperature(today?.minTemp)} · {today?.humidity ?? "—"}%
+          </Text>
+          <Text size="xs" c="dimmed">
+            {Math.round(isFahrenheit ? metricToImperial(weather.current.windspeed) : weather.current.windspeed)}{" "}
+            {isFahrenheit ? tCommon("unit.speed.milesPerHour") : tCommon("unit.speed.kilometersPerHour")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {t("widget.weather.dailyForecast.sunrise")}: {formatClockWeatherTime(today?.sunrise)} ·{" "}
+            {t("widget.weather.dailyForecast.sunset")}: {formatClockWeatherTime(today?.sunset)}
+          </Text>
+        </Stack>
+      )}
+      <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
     </Stack>
   );
 };
 
+const formatClockWeatherTime = (value: string | undefined) => value?.split("T")[1] ?? "—";
+
 interface UseCurrentTimeProps {
   showSeconds: boolean;
 }