The clock stops being a side effect of the region

Whether a time read as 13.45 or 01.45 pm was decided by the region
picker, which also sets the decimal separator and the currency layout —
so a Dane who wanted a 12-hour clock had to move their numbers to get
one. Time format is its own setting now, beside the date format it is
the other half of.

It defaults to "auto", the region's own convention, which is what every
timestamp in the app already said: nothing moves until somebody picks
something. The 24-hour setting asks for hourCycle h23 rather than
hour12:false, because with hour12 the en-US formatter prints midnight as
24:00.

One helper, so it reaches everywhere at once: formatDateTime now calls
formatTime, and every clock the app draws goes through it — the
charger's telemetry and settings, a session's start, when a charger was
linked, the provider panel's own timestamp.

The users collection gains a time_format select in both places the
schema is declared; it is in reconcileOrder, so a restart adds the field
and nothing has to be migrated by hand.

The native time inputs in the charger's settings card are left alone:
the browser renders those in the OS convention whatever this says, and a
text box that respected the setting would be the worse control.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Web App/web/src/i18n/da.json

@@ -520,6 +520,11 @@
       "regionHint": "Tal- og valutaformat.",
       "dateFormat": "Datoformat",
       "dateExample": "Eksempel: {example}",
+      "timeFormat": "Tidsformat",
+      "timeAuto": "Følg regionen",
+      "time24": "24-timers",
+      "time12": "12-timers",
+      "timeExample": "Eksempel: {example}",
       "currency": "Valuta",
       "currencyExample": "Eksempel: {example} — kun visning, ingen beløb omregnes.",
       "fontSize": "Skriftstørrelse",

Web App/web/src/i18n/en.json

@@ -519,6 +519,11 @@
       "regionHint": "Number and currency layout.",
       "dateFormat": "Date format",
       "dateExample": "Example: {example}",
+      "timeFormat": "Time format",
+      "timeAuto": "Follow the region",
+      "time24": "24-hour",
+      "time12": "12-hour",
+      "timeExample": "Example: {example}",
       "currency": "Currency",
       "currencyExample": "Example: {example} — display only, no amounts are converted.",
       "fontSize": "Font size",

Web App/web/src/i18n/pl.json

@@ -524,6 +524,11 @@
       "regionHint": "Format liczb i waluty.",
       "dateFormat": "Format daty",
       "dateExample": "Przykład: {example}",
+      "timeFormat": "Format godziny",
+      "timeAuto": "Jak w regionie",
+      "time24": "24-godzinny",
+      "time12": "12-godzinny",
+      "timeExample": "Przykład: {example}",
       "currency": "Waluta",
       "currencyExample": "Przykład: {example} — tylko wyświetlanie, kwoty nie są przeliczane.",
       "fontSize": "Rozmiar czcionki",

Web App/web/src/lib/format.js

@@ -76,8 +76,25 @@ export function formatDateTime(value) {
   if (!value) return "—";
   const d = new Date(value);
   if (isNaN(d)) return "—";
-  const time = d.toLocaleTimeString(prefs.locale || undefined, { hour: "2-digit", minute: "2-digit" });
-  return `${formatDate(value)} ${time}`;
+  return `${formatDate(value)} ${formatTime(d)}`;
+}
+
+// The clock alone. "auto" leaves the reading to the region, which is what every
+// time in the app said before there was a setting; the other two are for the
+// people whose region and habit disagree — plenty of Poles read 12-hour clocks
+// and plenty of Americans read 24-hour ones, and the region picker also decides
+// how money and numbers are grouped, so it is the wrong lever to reach for.
+//
+// hourCycle rather than hour12: with hour12:false the en-US formatter prints
+// midnight as 24:00.
+export function formatTime(value) {
+  if (!value) return "—";
+  const d = value instanceof Date ? value : new Date(value);
+  if (isNaN(d)) return "—";
+  const opts = { hour: "2-digit", minute: "2-digit" };
+  if (prefs.timeFormat === "24") opts.hourCycle = "h23";
+  else if (prefs.timeFormat === "12") opts.hourCycle = "h12";
+  return d.toLocaleTimeString(prefs.locale || undefined, opts);
 }
 
 // Every number we render goes through here so the grouping separator follows

Web App/web/src/prefs.js

@@ -6,6 +6,7 @@ export const prefs = reactive({
   theme: "system", // light | dark | system
   locale: "en-US",
   dateFormat: "YMD", // YMD | DMY | MDY
+  timeFormat: "auto", // auto (the region's own convention) | 24 | 12
   currency: "USD", // ISO 4217 code
   fontSize: "medium", // small | medium | large
   // Holds every arrangement still: the garage, a car's tabs, its Information
@@ -56,6 +57,7 @@ export function applyProfilePrefs(profile) {
   prefs.theme = profile.theme || "system";
   prefs.locale = profile.locale || "en-US";
   prefs.dateFormat = profile.dateFormat || "YMD";
+  prefs.timeFormat = profile.timeFormat || "auto";
   prefs.currency = profile.currency || "USD";
   prefs.fontSize = profile.fontSize || "medium";
   prefs.dragLocked = !!profile.dragLocked;

Web App/web/src/views/Settings.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from "vue-router";
 import { api } from "../api";
 import { state, isAdmin, logout, refreshProfile } from "../auth";
 import { prefs, applyProfilePrefs } from "../prefs";
-import { formatDate, formatMoney } from "../lib/format.js";
+import { formatDate, formatMoney, formatTime } from "../lib/format.js";
 import { t, tSplit, TRANSLATED_LANGUAGES } from "../i18n";
 import { TAB_SURFACES, SETTINGS_TABS, defaultTabFor } from "../lib/tabs.js";
 import { askConfirm } from "../lib/confirm.js";
@@ -189,6 +189,13 @@ function saveDefaultTab(surface, key) {
 }
 
 const dateFormatExample = computed(() => formatDate(new Date().toISOString()));
+// Thirteen-something rather than now: an example at 09:00 reads the same in
+// both conventions, which is the one time of day that cannot show the choice.
+const timeFormatExample = computed(() => {
+  const d = new Date();
+  d.setHours(13, 45, 0, 0);
+  return formatTime(d);
+});
 const currencyExample = computed(() => formatMoney(1234.5));
 
 // Language and region are two controls over the one stored BCP-47 locale, so
@@ -1127,6 +1134,18 @@ onBeforeUnmount(() => {
             <p class="mt-1 text-xs text-muted">{{ t("settings.appearance.dateExample", { example: dateFormatExample }) }}</p>
           </div>
 
+          <!-- Beside the date rather than under the region, because it is the
+               same question asked about the other half of a timestamp. -->
+          <div>
+            <label class="dh-label">{{ t("settings.appearance.timeFormat") }}</label>
+            <select :value="prefs.timeFormat" class="dh-input" @change="saveAppearance({ timeFormat: $event.target.value })">
+              <option value="auto">{{ t("settings.appearance.timeAuto") }}</option>
+              <option value="24">{{ t("settings.appearance.time24") }}</option>
+              <option value="12">{{ t("settings.appearance.time12") }}</option>
+            </select>
+            <p class="mt-1 text-xs text-muted">{{ t("settings.appearance.timeExample", { example: timeFormatExample }) }}</p>
+          </div>
+
           <div>
             <label class="dh-label">{{ t("settings.appearance.currency") }}</label>
             <select :value="prefs.currency" class="dh-input" @change="saveAppearance({ currency: $event.target.value })">