fix(settings): clock format "auto" follows the app's UI language (#758)

Auto previously passed `undefined` to `toLocaleTimeString`, which falls
back to the JS engine's default locale. Inside WebKitGTK that resolves
to `en-US` for many users regardless of `LC_TIME`, so the queue ETA and
sleep-timer preview rendered 12h AM/PM even when the OS clock was 24h.

Pass `i18n.language` instead, matching the convention already used in
the theme-scheduler hour picker (AppearanceTab.tsx). Explicit 12h/24h
choices still override.

src/components/PlaybackDelayModal.tsx

@@ -46,7 +46,7 @@ export interface PlaybackDelayModalProps {
 }
 
 export default function PlaybackDelayModal({ open, onClose, anchorRef }: PlaybackDelayModalProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const {
     isPlaying,
     currentTrack,
@@ -157,7 +157,7 @@ export default function PlaybackDelayModal({ open, onClose, anchorRef }: Playbac
   const clockFormat = useAuthStore(s => s.clockFormat);
   const previewSeconds = hoverSeconds ?? customSeconds;
   const previewAtMs = previewSeconds != null ? nowTick + previewSeconds * 1000 : null;
-  const previewClock = previewAtMs != null ? formatClockTime(previewAtMs, clockFormat) : null;
+  const previewClock = previewAtMs != null ? formatClockTime(previewAtMs, clockFormat, i18n.language) : null;
 
   if (!open) return null;
 

src/components/queuePanel/QueueHeader.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { ChevronDown, ListMusic } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 import { usePlayerStore } from '../../store/playerStore';
 import { useAuthStore } from '../../store/authStore';
@@ -26,6 +27,7 @@ export function QueueHeader({
   const currentTime = usePlayerStore((s) => Math.floor(s.currentTime / 30) * 30);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const clockFormat = useAuthStore((s) => s.clockFormat);
+  const { i18n } = useTranslation();
 
   const totalSecs = useMemo(() =>
     queue.reduce((acc: number, track: Track) => acc + (track.duration || 0), 0),
@@ -42,7 +44,7 @@ export function QueueHeader({
   if (queue.length > 0) {
     if (durationMode === 'total') dur = formatLongDuration(Math.floor(totalSecs));
     else if (durationMode === 'remaining') dur = `-${formatLongDuration(Math.floor(remainingSecs))}`;
-    else dur = formatClockTime(Date.now() + remainingSecs * 1000, clockFormat);
+    else dur = formatClockTime(Date.now() + remainingSecs * 1000, clockFormat, i18n.language);
   }
 
   const nextMode: DurationMode =

src/utils/format/formatClockTime.ts

@@ -2,12 +2,14 @@ import type { ClockFormat } from '../../store/authStoreTypes';
 
 /**
  * Localized wall-clock `HH:MM` for a timestamp (sleep-timer / queue-ETA labels).
- * `clockFormat` overrides the system locale's `hour12` default — pass `'auto'`
+ * `clockFormat` overrides the locale's `hour12` default. `'auto'` (or omitted)
- * or omit to keep locale-driven behaviour.
+ * defers to `locale` — pass `i18n.language` so the App's UI language picks the
+ * 12h/24h convention; the JS engine's default locale is unreliable inside
+ * WebKitGTK and often resolves to `en-US` regardless of OS `LC_TIME`.
  */
-export function formatClockTime(timestampMs: number, clockFormat?: ClockFormat): string {
+export function formatClockTime(timestampMs: number, clockFormat?: ClockFormat, locale?: string): string {
   const hour12 = clockFormat === '24h' ? false : clockFormat === '12h' ? true : undefined;
-  return new Date(timestampMs).toLocaleTimeString(undefined, {
+  return new Date(timestampMs).toLocaleTimeString(locale, {
     hour: '2-digit',
     minute: '2-digit',
     hour12,