🚑 fix date formatting

packages/app/components/Lines/FlyingLabel.tsx

@@ -2,16 +2,24 @@ import { styled } from "@linaria/react";
 import React from "react";
 import { DateTime } from "luxon";
 import type { ILocation } from "@tzr/location-index";
+import { css } from "@linaria/core";
 
 type Props = { location: ILocation; t: number };
 export const FlyingLabel = () => (
   <Container>
     <span />
-    <span style={{ fontSize: "0.72em" }} />
+    <span />
+    <span />
+    <span />
+    <span />
     <span />
   </Container>
 );
 
+/**
+ * format the date as string
+ * split into date / time / literal blocks
+ */
 const formatDateTime = (timezone: string, t: number) => {
   const parts = DateTime.fromMillis(t, { zone: timezone }).toLocaleParts({
     minute: "numeric",
@@ -20,34 +28,63 @@ const formatDateTime = (timezone: string, t: number) => {
     day: "numeric",
   });
 
-  const values = parts.map((x) => x.value);
-
-  const a = parts.findIndex(
-    ({ type }) => type === "month" || type === "year" || type === "day"
-  );
-  const b =
-    parts.length -
-    parts
-      .reverse()
-      .findIndex(
-        ({ type }) => type === "month" || type === "year" || type === "day"
-      );
-
-  return [
-    values.slice(0, a).join(""),
-    values.slice(a, b).join(""),
-    values.slice(b).join(""),
-  ];
+  const getLooseType = (type: Intl.DateTimeFormatPart["type"]) =>
+    ((type === "day" || type === "month" || type === "year") && "date") ||
+    ((type === "hour" || type === "minute" || type === "dayPeriod") &&
+      "time") ||
+    "literal";
+
+  const looseParts: { type: "date" | "time" | "literal"; text: string }[] = [];
+
+  let i = 0;
+  while (i < parts.length) {
+    const type = getLooseType(parts[i].type);
+
+    let j = i;
+    for (; j < parts.length; j++) {
+      const t = getLooseType(parts[j].type);
+      if (t !== "literal" && t !== type) break;
+    }
+
+    j--;
+
+    if (type !== "literal")
+      while (parts[j] && getLooseType(parts[j].type) === "literal") j--;
+
+    let text = "";
+    for (let k = i; k <= j; k++) text += parts[k].value;
+
+    looseParts.push({ type, text });
+
+    i = j + 1;
+  }
+
+  return looseParts;
 };
 
 export const update = (domElement: Element, { location, t }: Props) => {
   const parts = formatDateTime(location.timezone, t);
 
-  parts.forEach((text, i) => {
-    (domElement.children[i] as HTMLElement).innerText = text;
-  });
+  for (let i = 0; i < domElement.children.length; i++) {
+    const el = domElement.children[i] as HTMLElement;
+    el.innerText = parts[i]?.text ?? "";
+
+    el.classList.remove(valueClassName);
+    el.classList.remove(literalClassName);
+
+    if (parts[i]?.type === "literal") el.classList.add(literalClassName);
+    else el.classList.add(valueClassName);
+  }
 };
 
+const valueClassName = css`
+  white-space: pre;
+`;
+const literalClassName = css`
+  font-size: 0.72em;
+  white-space: pre;
+`;
+
 const Container = styled.div`
   padding-left: 4px;
   white-space: nowrap;