@bygghammar/cms-platform 0.44.0 → 0.45.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.45.0
+
+- Version screen: added a live ticking "Current time" card showing the current date and time in UTC.
+
 ## 0.44.0
 
 - New `backoffice/routes/media-forms`: package-owned `MediaRoute`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,

package/src/backoffice/VersionView.tsx

@@ -1,4 +1,5 @@
 import { Package } from "lucide-react";
+import { useEffect, useState } from "react";
 
 /** Build metadata injected at compile time by the host. */
 export type PlatformBuildInfo = {
@@ -31,9 +32,25 @@ function fmt(value: string | null | undefined) {
   return d.toLocaleString("sv-SE", { timeZone: "UTC", hour12: false }) + " UTC";
 }
 
+function formatUtc(date: Date) {
+  return date.toLocaleString("sv-SE", { timeZone: "UTC", hour12: false }) + " UTC";
+}
+
+/** Ticking current UTC time, started after hydration to stay SSR-safe. */
+function useUtcClock() {
+  const [now, setNow] = useState<Date | null>(null);
+  useEffect(() => {
+    setNow(new Date());
+    const id = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  return now;
+}
+
 /** Host-agnostic CMS & platform version screen. */
 export function VersionView({ deps }: { deps: VersionDeps }) {
   const { build, releases, loading, packageName = "@bygghammar/cms-platform" } = deps;
+  const now = useUtcClock();
 
   return (
     <div className="p-8 md:p-12 w-full max-w-4xl">
@@ -56,6 +73,7 @@ export function VersionView({ deps }: { deps: VersionDeps }) {
               { label: "Built at", value: fmt(build?.buildTime) },
               { label: "Platform package", value: build?.platformVersion ?? "—" },
               { label: "Declared range", value: build?.platformRange ?? "—" },
+              { label: "Current time", value: now ? formatUtc(now) : "—" },
             ].map((row) => (
               <div key={row.label} className="border border-ink/10 bg-white p-5">
                 <dt className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/50">