feat(frontend): weather symbols in the forecast rows, fluid glowbox clocks

Show the condition per forecast slot instead of temperature alone: the
aamu/päivä/ilta/yö strip carries the icon for the hour it sampled (night
variant chosen from today's sunrise/sunset), and each day in the 7-day
drawer chart carries its daily symbol.

Chart.js draws x-tick labels on canvas and cannot render a Lucide icon, so
the day labels move to HTML: canvas ticks off, and a plotBounds plugin
reports chartArea so the label row can align to it. Each cell wraps, which
lets the icon drop under the day letter on a phone.

The glowbox clock faces were laid out in hard pixels (520-640 wide) and
overflowed a phone column. They now cap at their design width and scale
below it, holding aspect; the canvases redraw to their container, so the
faces stay sharp instead of being CSS-scaled. On mobile they span the whole
column, so they also drop below the wordmark and fullscreen button.

Author: eetu

frontend/src/components/CurrentTime.tsx

@@ -7,6 +7,7 @@ import React, { memo } from "react";
 import useCurrentTime from "../hooks/useCurrentTime";
 import useGlowboxTheme from "../hooks/useGlowboxTheme";
 import useLocal from "../hooks/useLocal";
+import { mq } from "../mq";
 
 type CurrentTimeProps = {} & React.HTMLAttributes<HTMLDivElement>;
 
@@ -28,6 +29,19 @@ const DISPLAY_FONTS = [
   { family: "Lcd" },
 ];
 
+// The glowbox faces are canvases that redraw to their container (ResizeObserver),
+// so the wrapper spans the column and each face caps itself at its design width.
+const DISPLAY_WRAPPER = {
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  cursor: "pointer",
+  userSelect: "none",
+  // On a phone these faces span the whole column, which is also where the
+  // wordmark and the fullscreen button sit — drop below them.
+  [mq[0]]: { marginTop: 26 },
+} as const;
+
 const CurrentTime: React.FC<CurrentTimeProps> = ({ className }) => {
   const theme = useTheme();
   const currentTime = useCurrentTime();
@@ -50,19 +64,19 @@ const CurrentTime: React.FC<CurrentTimeProps> = ({ className }) => {
       }}
     >
       {displayFont.family === "Nixie" ? (
-        <div onClick={cycleFont} css={{ cursor: "pointer", userSelect: "none" }}>
+        <div onClick={cycleFont} css={DISPLAY_WRAPPER}>
           <NixieClock hh={hh} mm={mm} ss={ss} />
         </div>
       ) : displayFont.family === "Vfd" ? (
-        <div onClick={cycleFont} css={{ cursor: "pointer", userSelect: "none" }}>
+        <div onClick={cycleFont} css={DISPLAY_WRAPPER}>
           <VfdClock hh={hh} mm={mm} ss={ss} />
         </div>
       ) : displayFont.family === "SplitFlap" ? (
-        <div onClick={cycleFont} css={{ cursor: "pointer", userSelect: "none" }}>
+        <div onClick={cycleFont} css={DISPLAY_WRAPPER}>
           <SplitFlapClock hh={hh} mm={mm} ss={ss} />
         </div>
       ) : displayFont.family === "Lcd" ? (
-        <div onClick={cycleFont} css={{ cursor: "pointer", userSelect: "none" }}>
+        <div onClick={cycleFont} css={DISPLAY_WRAPPER}>
           <LcdClock hh={hh} mm={mm} ss={ss} />
         </div>
       ) : (
@@ -141,10 +155,27 @@ const NixieClock: React.FC<NixieClockProps> = ({ hh, mm, ss }) => {
     ["s1", ss[1]],
   ];
 
+  // 520 = six 78px tubes + two 26px colons; below that width the row scales down
+  // as one and every tube keeps its share.
   return (
-    <div css={{ display: "flex", flexDirection: "row" }}>
+    <div
+      css={{
+        display: "flex",
+        flexDirection: "row",
+        width: "min(100%, 520px)",
+        aspectRatio: "520 / 120",
+      }}
+    >
       {tubes.map(([slot, value]) => (
-        <div key={slot} css={{ height: 120, width: ["c1", "c0"].includes(slot) ? 26 : 78 }}>
+        <div
+          key={slot}
+          css={{
+            flexGrow: ["c1", "c0"].includes(slot) ? 26 : 78,
+            flexBasis: 0,
+            minWidth: 0,
+            height: "100%",
+          }}
+        >
           <NixieTube value={value} theme={glowboxTheme} />
         </div>
       ))}
@@ -184,7 +215,7 @@ const VfdClock: React.FC<NixieClockProps> = ({ hh, mm, ss }) => {
   const glowboxTheme = useGlowboxTheme();
 
   return (
-    <div css={{ width: 640, height: 128 }}>
+    <div css={{ width: "min(100%, 640px)", aspectRatio: "640 / 128" }}>
       <VfdPanel
         frame={VFD_FRAME}
         layout={VFD_LAYOUT}
@@ -209,7 +240,7 @@ const SplitFlapClock: React.FC<NixieClockProps> = ({ hh, mm, ss }) => {
   const glowboxTheme = useGlowboxTheme();
 
   return (
-    <div css={{ width: 560, height: 100 }}>
+    <div css={{ width: "min(100%, 560px)", aspectRatio: "560 / 100" }}>
       <SplitFlap
         cols={8}
         rows={1}
@@ -229,7 +260,7 @@ const LcdClock: React.FC<NixieClockProps> = ({ hh, mm, ss }) => {
   const glowboxTheme = useGlowboxTheme();
 
   return (
-    <div css={{ width: 480, height: 128 }}>
+    <div css={{ width: "min(100%, 480px)", aspectRatio: "480 / 128" }}>
       <LcdModule
         cols={8}
         rows={1}

frontend/src/components/FmiWeatherBox.tsx

@@ -8,6 +8,7 @@ import useSWR from "swr";
 import { api, jsonFetcher } from "../api";
 import useLocationSettings from "../hooks/useLocationSettings";
 import useScreenshotMode from "../hooks/useScreenshotMode";
+import { mq } from "../mq";
 import { PvForecast } from "../types/pv";
 import { WeatherData } from "../types/weather/fmi";
 import { weatherBorderColor } from "../weather/asciiSky";
@@ -131,13 +132,18 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
         temp: d.temperatureMax,
         rain: d.precipitation,
         pvKwh: includePv ? pv.kwh : null,
+        weatherSymbol: d.weatherSymbol,
         label: `${format(new Date(d.date), "EEEEEE", {
           locale: fi,
         })}`,
       };
     });
 
   const segments = getFmiTemperatureSegments(hourly);
+  // Sunrise/sunset as plain hours: a segment sample outside them gets the night
+  // icon variant (moon for a clear sky).
+  const sunriseHour = new Date(today.sunrise).getHours();
+  const sunsetHour = new Date(today.sunset).getHours();
 
   const realIsNight = now < new Date(current.sunrise) || now > new Date(current.sunset);
   // In demo mode the test controls can override the rendered weather so every
@@ -166,9 +172,14 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
         <div
           css={{
             position: "relative",
+            display: "flex",
             backgroundColor: theme.colors.background.light,
-            height: "200px",
+            // Taller than the plot alone: the day labels moved out of the canvas
+            // and wrap to two lines on a phone.
+            height: "220px",
             padding: 10,
+            boxSizing: "border-box",
+            [mq[0]]: { height: "240px" },
           }}
         >
           <WeatherChart data={chartData} days={7} />
@@ -306,6 +317,7 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
               flexDirection: "column",
               borderRight: `1px ${borderColor ?? theme.colors.border} solid`,
               width: "25%",
+              minWidth: 0,
               textAlign: "center",
               "&:last-of-type": {
                 borderRight: "none",
@@ -322,14 +334,25 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
             >
               {s.title}
             </span>
-            <span
+            <div
               css={{
                 marginTop: 0.25,
-                fontVariantNumeric: "tabular-nums",
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: 6,
+                [mq[0]]: { flexWrap: "wrap", gap: 4 },
               }}
             >
-              {s.temp}°
-            </span>
+              <span css={{ fontVariantNumeric: "tabular-nums" }}>{s.temp}°</span>
+              <WeatherIcon
+                weatherSymbol={s.weatherSymbol}
+                isNight={s.hour < sunriseHour || s.hour >= sunsetHour}
+                size={16}
+                css={{ color: theme.colors.text.muted, flexShrink: 0 }}
+              />
+            </div>
           </div>
         ))}
       </div>

frontend/src/components/WeatherChart.tsx

@@ -12,10 +12,13 @@ import {
   PointElement,
 } from "chart.js";
 import ChartDataLabels, { Context } from "chartjs-plugin-datalabels";
-import React from "react";
+import React, { createElement, useMemo, useState } from "react";
 import { Chart } from "react-chartjs-2";
 import { useMediaQuery } from "usehooks-ts";
 
+import { mq } from "../mq";
+import { getFmiWeatherIcon } from "../weather/fmi/icons";
+
 ChartJS.register(
   BarController,
   BarElement,
@@ -30,9 +33,17 @@ type WeatherChartData = {
   temp: number;
   rain: number;
   pvKwh?: number | null;
+  weatherSymbol?: number;
   label: string;
 };
 
+// The plot box in canvas pixels. The day labels are HTML (chart.js can't draw a
+// Lucide icon), so they are laid out over this box instead of as x-axis ticks.
+type PlotBox = {
+  left: number;
+  width: number;
+};
+
 type WeatherChartProps = {
   data: Array<WeatherChartData>;
   days?: number;
@@ -53,6 +64,30 @@ const WeatherChart: React.FC<WeatherChartProps> = ({ data: unfilteredData, days
   const isMobile = useMediaQuery("(max-width: 600px)");
   const labelFontSize = isMobile ? 8 : 10;
   const labelCharPx = isMobile ? 5 : 6.5;
+  const [plot, setPlot] = useState<PlotBox | null>(null);
+
+  // Reports the plot box so the HTML day labels can be aligned to it. Guarded by
+  // a sub-pixel comparison: the state write re-renders, which updates the chart,
+  // which fires this again — identical numbers end the cycle after one pass.
+  const plugins = useMemo(
+    () => [
+      ChartDataLabels,
+      {
+        id: "plotBounds",
+        afterLayout: (chart: ChartJS) => {
+          const { left, right } = chart.chartArea;
+          const width = right - left;
+          if (width <= 0) return;
+          setPlot((prev) =>
+            prev && Math.abs(prev.left - left) < 0.5 && Math.abs(prev.width - width) < 0.5
+              ? prev
+              : { left, width },
+          );
+        },
+      },
+    ],
+    [],
+  );
 
   const data = days === undefined ? unfilteredData : unfilteredData.slice(0, days);
 
@@ -126,7 +161,8 @@ const WeatherChart: React.FC<WeatherChartProps> = ({ data: unfilteredData, days
         grid: {
           display: false,
         },
-        ticks: { color: theme.mode === "dark" ? "#d6d6d6" : "#525252" },
+        // Drawn as HTML below the canvas so each day can carry its weather icon.
+        ticks: { display: false },
       },
       yTemp: {
         position: "left",
@@ -163,7 +199,62 @@ const WeatherChart: React.FC<WeatherChartProps> = ({ data: unfilteredData, days
     },
   };
 
-  return <Chart type="bar" options={options} data={chartData} plugins={[ChartDataLabels]} />;
+  const tickColor = theme.mode === "dark" ? "#d6d6d6" : "#525252";
+  const iconSize = isMobile ? 12 : 14;
+
+  return (
+    <div
+      css={{
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+      }}
+    >
+      <div css={{ flex: 1, minHeight: 0 }}>
+        <Chart type="bar" options={options} data={chartData} plugins={plugins} />
+      </div>
+      <div
+        css={{
+          display: "flex",
+          flexDirection: "row",
+          marginLeft: plot?.left ?? 0,
+          width: plot?.width ?? "100%",
+          // The bar categories sit at even fractions of the plot box, so equal
+          // cells centre on their bars.
+          visibility: plot ? "visible" : "hidden",
+        }}
+      >
+        {data.map((d) => (
+          <div
+            key={d.label}
+            css={{
+              flex: 1,
+              minWidth: 0,
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 4,
+              color: tickColor,
+              fontSize: 12,
+              lineHeight: 1.2,
+              [mq[0]]: { fontSize: 11 },
+            }}
+          >
+            <span>{d.label}</span>
+            {d.weatherSymbol != null &&
+              createElement(getFmiWeatherIcon(d.weatherSymbol), {
+                size: iconSize,
+                strokeWidth: 1.75,
+              })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default WeatherChart;

frontend/src/weather/fmi/utils.ts

@@ -3,6 +3,10 @@ import { HourlyForecast } from "../../types/weather/fmi";
 type Segment = {
   title: "aamu" | "päivä" | "ilta" | "yö";
   temp: number;
+  weatherSymbol: number;
+  // Local hour of the sampled forecast — the caller pairs it with sunrise/sunset
+  // to pick the day or night icon variant.
+  hour: number;
 };
 
 export const getFmiTemperatureSegments = (forecasts: HourlyForecast[] = []) => {
@@ -18,18 +22,40 @@ export const getFmiTemperatureSegments = (forecasts: HourlyForecast[] = []) => {
     const time = new Date(forecast.time);
     const hour = time.getHours();
 
+    const symbol = forecast.weatherSymbol;
+
     if (result.morning === undefined && hour >= 5 && hour < 12) {
       result.morning = forecast.temperature;
-      segments.push({ title: "aamu", temp: Math.round(result.morning ?? 0) });
+      segments.push({
+        title: "aamu",
+        temp: Math.round(result.morning ?? 0),
+        weatherSymbol: symbol,
+        hour,
+      });
     } else if (result.day === undefined && hour >= 12 && hour < 17) {
       result.day = forecast.temperature;
-      segments.push({ title: "päivä", temp: Math.round(result.day ?? 0) });
+      segments.push({
+        title: "päivä",
+        temp: Math.round(result.day ?? 0),
+        weatherSymbol: symbol,
+        hour,
+      });
     } else if (result.evening === undefined && hour >= 17 && hour < 21) {
       result.evening = forecast.temperature;
-      segments.push({ title: "ilta", temp: Math.round(result.evening ?? 0) });
+      segments.push({
+        title: "ilta",
+        temp: Math.round(result.evening ?? 0),
+        weatherSymbol: symbol,
+        hour,
+      });
     } else if (result.night === undefined && (hour >= 21 || hour < 5)) {
       result.night = forecast.temperature;
-      segments.push({ title: "yö", temp: Math.round(result.night ?? 0) });
+      segments.push({
+        title: "yö",
+        temp: Math.round(result.night ?? 0),
+        weatherSymbol: symbol,
+        hour,
+      });
     }
 
     if (