@ohmykreee/dsh-remote-control 0.0.0-stage → 1.0.2

package/src/svelte/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) bg-foreground text-background",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<!-- Like Radix: the wrapper takes the popper transforms, only the inner square rotates. -->
+				<div {...props}>
+					<div
+						class={cn(
+							"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] z-50 translate-y-[calc(-50%_-_2px)] bg-foreground fill-foreground",
+							arrowClasses
+						)}
+						data-side={props["data-side"]}
+					></div>
+				</div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>

package/src/svelte/lib/components/ui/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/src/svelte/lib/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />

package/src/svelte/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps<T> = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/src/svelte/lib/components/ui/tooltip/tooltip.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" generics="T = never">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps<T> = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

package/src/svelte/lib/countdown.svelte.ts

@@ -0,0 +1,252 @@
+import {
+  cancelScheduledAlarm,
+  claimScheduledAlarm,
+  primeAudio,
+  scheduleAlarm,
+  setTabAlert,
+  startLoopingAlarm,
+  stopAlarmSound,
+} from './timer-alarm.svelte';
+import { app } from './state.svelte';
+import type { CountdownSettings } from './types';
+
+/**
+ * Countdown timer that lives entirely in the controller's browser.
+ *
+ * The DSH panel only persists the enabled flag and the preset list; this module
+ * owns the run. Timing derives from an absolute `endsAt`, so switching console
+ * pages never loses time. There is no loop option: once the time is up the
+ * alarm keeps ringing until the console user confirms it.
+ */
+
+export const COUNTDOWN_MAX_SECONDS = 86_400;
+
+export interface CountdownRuntime {
+  /** Index into the configured preset list. */
+  presetIndex: number;
+  /** Duration of the current run, kept stable while the timer advances. */
+  durationMs: number;
+  running: boolean;
+  remainingMs: number;
+  endsAt: number;
+  /** Time is up and the alarm is waiting for confirmation. */
+  finished: boolean;
+  alarmActive: boolean;
+}
+
+export const countdown = $state<CountdownRuntime>({
+  presetIndex: 0,
+  durationMs: 60_000,
+  running: false,
+  remainingMs: 60_000,
+  endsAt: 0,
+  finished: false,
+  alarmActive: false,
+});
+
+let refs = 0;
+let timer: ReturnType<typeof setInterval> | null = null;
+let presetSignature = '';
+
+function settings(): CountdownSettings {
+  return app.countdown;
+}
+
+function clampPresetIndex(index: number): number {
+  const count = settings().presets.length;
+  if (count <= 0) return 0;
+  const value = Math.round(Number(index));
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(count - 1, value));
+}
+
+/** Seconds configured for one preset, clamped to the accepted range. */
+export function presetSeconds(index: number = countdown.presetIndex): number {
+  const value = Number(settings().presets[clampPresetIndex(index)]);
+  const seconds = Number.isFinite(value) ? Math.round(value) : 60;
+  return Math.max(1, Math.min(COUNTDOWN_MAX_SECONDS, seconds));
+}
+
+export function presetDurationMs(index: number = countdown.presetIndex): number {
+  return presetSeconds(index) * 1000;
+}
+
+/** `m:ss`, or `h:mm:ss` once the duration reaches an hour. */
+export function formatSeconds(totalSeconds: number): string {
+  const value = Math.max(0, Math.round(totalSeconds));
+  const hours = Math.floor(value / 3600);
+  const minutes = Math.floor((value % 3600) / 60);
+  const seconds = value % 60;
+  const pad = (part: number): string => String(part).padStart(2, '0');
+  if (hours > 0) return `${hours}:${pad(minutes)}:${pad(seconds)}`;
+  return `${pad(minutes)}:${pad(seconds)}`;
+}
+
+export function formatCountdown(ms: number): string {
+  return formatSeconds(Math.ceil(Math.max(0, ms) / 1000));
+}
+
+export function countdownProgress(): number {
+  const duration = countdown.durationMs;
+  if (duration <= 0) return 0;
+  return Math.max(0, Math.min(100, ((duration - countdown.remainingMs) / duration) * 100));
+}
+
+function syncPresets(): void {
+  const presets = settings().presets;
+  const signature = presets.join('/');
+  if (signature === presetSignature) return;
+  presetSignature = signature;
+  countdown.presetIndex = clampPresetIndex(countdown.presetIndex);
+  if (!countdown.running && !countdown.finished) {
+    countdown.durationMs = presetDurationMs();
+    countdown.remainingMs = countdown.durationMs;
+  }
+}
+
+function resetRuntime(): void {
+  countdown.presetIndex = clampPresetIndex(countdown.presetIndex);
+  countdown.running = false;
+  countdown.endsAt = 0;
+  countdown.finished = false;
+  countdown.durationMs = presetDurationMs();
+  countdown.remainingMs = countdown.durationMs;
+  countdown.alarmActive = false;
+  stopAlarmSound();
+}
+
+function startEngine(): void {
+  presetSignature = settings().presets.join('/');
+  countdown.presetIndex = clampPresetIndex(countdown.presetIndex);
+  if (!countdown.running && !countdown.finished) {
+    countdown.durationMs = presetDurationMs();
+    countdown.remainingMs = countdown.durationMs;
+  }
+  if (timer) return;
+  timer = setInterval(tick, 250);
+  document.addEventListener('visibilitychange', handleVisibility);
+  (window as unknown as { __DSH_COUNTDOWN__?: CountdownRuntime }).__DSH_COUNTDOWN__ = countdown;
+}
+
+function stopEngine(): void {
+  if (timer) clearInterval(timer);
+  timer = null;
+  document.removeEventListener('visibilitychange', handleVisibility);
+  cancelScheduledAlarm();
+  resetRuntime();
+}
+
+function handleVisibility(): void {
+  if (!document.hidden) tick();
+}
+
+function tick(): void {
+  if (!settings().enabled) {
+    resetRuntime();
+    return;
+  }
+  syncPresets();
+  if (!countdown.running) return;
+  const remaining = countdown.endsAt - Date.now();
+  if (remaining <= 0) {
+    countdown.remainingMs = 0;
+    finish();
+    return;
+  }
+  countdown.remainingMs = remaining;
+}
+
+/** Reference-counted lifecycle; the card (and its clone) both acquire it. */
+export function acquireCountdown(): () => void {
+  refs += 1;
+  if (refs === 1) startEngine();
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    refs = Math.max(0, refs - 1);
+    if (refs === 0) stopEngine();
+  };
+}
+
+/** Quick-select one preset while the timer is idle or paused. */
+export function selectCountdownPreset(index: number): void {
+  if (!settings().enabled || countdown.running || countdown.alarmActive) return;
+  countdown.presetIndex = clampPresetIndex(index);
+  countdown.finished = false;
+  countdown.running = false;
+  countdown.endsAt = 0;
+  countdown.durationMs = presetDurationMs();
+  countdown.remainingMs = countdown.durationMs;
+  stopAlarmSound();
+}
+
+export function startCountdown(): void {
+  if (!settings().enabled || countdown.alarmActive) return;
+  primeAudio();
+  if (countdown.finished) {
+    countdown.finished = false;
+    countdown.durationMs = presetDurationMs();
+    countdown.remainingMs = countdown.durationMs;
+  }
+  if (countdown.remainingMs <= 0) countdown.remainingMs = countdown.durationMs;
+  countdown.running = true;
+  countdown.endsAt = Date.now() + countdown.remainingMs;
+  stopAlarmSound();
+  if (!app.pomodoro.soundPath.trim()) {
+    scheduleAlarm(Math.max(0.06, (countdown.endsAt - Date.now()) / 1000), countdown.endsAt);
+  }
+}
+
+export function pauseCountdown(): void {
+  if (!countdown.running) return;
+  countdown.remainingMs = Math.max(0, countdown.endsAt - Date.now());
+  countdown.running = false;
+  countdown.endsAt = 0;
+  cancelScheduledAlarm();
+}
+
+export function toggleCountdown(): void {
+  if (countdown.running) pauseCountdown();
+  else startCountdown();
+}
+
+export function resetCountdown(): void {
+  countdown.running = false;
+  countdown.finished = false;
+  countdown.endsAt = 0;
+  countdown.durationMs = presetDurationMs();
+  countdown.remainingMs = countdown.durationMs;
+  countdown.alarmActive = false;
+  stopAlarmSound();
+}
+
+/**
+ * Acknowledge the finished countdown. The alarm never stops on its own: this
+ * is the confirmation the phone user has to give.
+ */
+export function confirmCountdown(): void {
+  if (!countdown.alarmActive && !countdown.finished) return;
+  stopAlarmSound();
+  countdown.alarmActive = false;
+  countdown.finished = false;
+  countdown.running = false;
+  countdown.endsAt = 0;
+  countdown.durationMs = presetDurationMs();
+  countdown.remainingMs = countdown.durationMs;
+}
+
+function finish(): void {
+  countdown.running = false;
+  countdown.remainingMs = 0;
+  countdown.finished = true;
+  countdown.alarmActive = true;
+  const hasScheduledChime = claimScheduledAlarm(countdown.endsAt);
+  startLoopingAlarm(app.pomodoro.soundPath, hasScheduledChime);
+  setTabAlert(true);
+  try {
+    navigator.vibrate?.([140, 90, 180]);
+  } catch {
+    /* vibration is optional */
+  }
+}

package/src/svelte/lib/format.ts

@@ -0,0 +1,199 @@
+import type { TemperatureUnit } from './types';
+import { isChinese, localeTag, t, type MessageKey } from './i18n.svelte';
+
+/** Shared formatting helpers, ported from the original web/app.js. */
+
+export function pad(value: string | number): string {
+  return String(value).padStart(2, '0');
+}
+
+export function timeAgo(timestamp: number | undefined, now = Date.now()): string {
+  if (!Number.isFinite(timestamp)) return '';
+  const seconds = Math.max(0, Math.round((now - (timestamp as number)) / 1000));
+  if (seconds < 45) return t('justNow');
+  if (seconds < 3600) return t('minutesAgo', { count: Math.floor(seconds / 60) });
+  if (seconds < 86400) return t('hoursAgo', { count: Math.floor(seconds / 3600) });
+  return t('daysAgo', { count: Math.floor(seconds / 86400) });
+}
+
+const LUNAR_DAYS = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十', '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];
+
+const SOLAR_TERM_KEYS: readonly MessageKey[] = [
+  'termMinorCold', 'termMajorCold', 'termStartOfSpring', 'termRainWater', 'termAwakening', 'termSpringEquinox',
+  'termClearAndBright', 'termGrainRain', 'termStartOfSummer', 'termGrainFull', 'termGrainInEar', 'termSummerSolstice',
+  'termMinorHeat', 'termMajorHeat', 'termStartOfAutumn', 'termEndOfHeat', 'termWhiteDew', 'termAutumnEquinox',
+  'termColdDew', 'termFrostDescent', 'termStartOfWinter', 'termMinorSnow', 'termMajorSnow', 'termWinterSolstice',
+];
+
+const SOLAR_TERM_MINUTES = [0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758];
+
+let lunarFormatter: Intl.DateTimeFormat | null = null;
+function getLunarFormatter(): Intl.DateTimeFormat | null {
+  if (lunarFormatter) return lunarFormatter;
+  try {
+    lunarFormatter = new Intl.DateTimeFormat('zh-CN-u-ca-chinese', { month: 'long', day: 'numeric' });
+  } catch {
+    lunarFormatter = null;
+  }
+  return lunarFormatter;
+}
+
+/** Lunar month/day text; the Chinese calendar labels only make sense in zh. */
+export function lunarDateText(date: Date): string {
+  if (!isChinese()) return '';
+  const formatter = getLunarFormatter();
+  if (!formatter) return '';
+  try {
+    const parts = formatter.formatToParts(date);
+    const month = parts.find((part) => part.type === 'month')?.value || '';
+    const day = Number(parts.find((part) => part.type === 'day')?.value);
+    if (!month || !Number.isInteger(day) || day < 1 || day > 30) return '';
+    return `${month}${LUNAR_DAYS[day - 1]}`;
+  } catch {
+    return '';
+  }
+}
+
+/** Which of the 24 solar terms falls on the given date, if any. */
+export function solarTermForDate(date: Date): MessageKey | null {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+  for (let index = 0; index < SOLAR_TERM_KEYS.length; index += 1) {
+    const term = new Date(31556925974.7 * (year - 1900) + SOLAR_TERM_MINUTES[index] * 60000 + Date.UTC(1900, 0, 6, 2, 5));
+    if (term.getUTCFullYear() === year && term.getUTCMonth() === month && term.getUTCDate() === day) {
+      return SOLAR_TERM_KEYS[index];
+    }
+  }
+  return null;
+}
+
+export interface ClockParts {
+  time: string;
+  seconds: string;
+  greeting: string;
+  periodLabel: string;
+  dateLabel: string;
+}
+
+export function clockParts(date: Date): ClockParts {
+  const hour = date.getHours();
+  let greeting = 'greetingEvening';
+  let period = 'periodEvening';
+  if (hour >= 5 && hour < 11) {
+    greeting = 'greetingMorning';
+    period = 'periodMorning';
+  } else if (hour >= 11 && hour < 13) {
+    greeting = 'greetingNoon';
+    period = 'periodNoon';
+  } else if (hour >= 13 && hour < 18) {
+    greeting = 'greetingAfternoon';
+    period = 'periodAfternoon';
+  }
+  const lunar = lunarDateText(date);
+  const solarTerm = solarTermForDate(date);
+  // Chinese keeps lunar/solar-term detail with a period fallback; English shows
+  // the solar term when present and nothing otherwise, so the clock has no
+  // placeholder line like "Afternoon".
+  const periodLabel = isChinese()
+    ? ([lunar, solarTerm ? t(solarTerm) : ''].filter(Boolean).join(' · ') || t(period as MessageKey))
+    : (solarTerm ? t(solarTerm) : '');
+  return {
+    time: `${pad(hour)}:${pad(date.getMinutes())}`,
+    seconds: pad(date.getSeconds()),
+    greeting: t(greeting as MessageKey),
+    periodLabel,
+    dateLabel: new Intl.DateTimeFormat(localeTag(), { month: 'long', day: 'numeric', weekday: 'short' }).format(date),
+  };
+}
+
+export function formatMoney(value: unknown, currency = 'CNY'): string {
+  if (value === null || value === undefined || value === '' || !Number.isFinite(Number(value))) return '—';
+  const symbol = String(currency || '').toUpperCase() === 'USD' ? '$' : '¥';
+  const abs = Math.abs(Number(value));
+  const digits = abs > 0 && abs < 1 ? 4 : 2;
+  return `${symbol}${Number(value).toFixed(digits).replace(/\.?0+$/, '')}`;
+}
+
+export function currencySymbol(currency?: string): string {
+  return String(currency || '').toUpperCase() === 'USD' ? '$' : '¥';
+}
+
+export function formatDuration(seconds: unknown): string {
+  const total = Math.max(0, Math.round(Number(seconds) || 0));
+  return `${Math.floor(total / 60)}:${pad(total % 60)}`;
+}
+
+/** Elapsed time since the open DSH turn started (`h:mm:ss` past an hour). */
+export function runningDuration(since: number | null | undefined, now = Date.now()): string {
+  if (!Number.isFinite(since)) return '';
+  const total = Math.max(0, Math.floor((now - (since as number)) / 1000));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const seconds = total % 60;
+  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
+}
+
+export function formatBytes(value: unknown): string {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes <= 0) return '—';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let index = 0;
+  let size = bytes;
+  while (size >= 1024 && index < units.length - 1) {
+    size /= 1024;
+    index += 1;
+  }
+  return `${size >= 10 || index === 0 ? size.toFixed(0) : size.toFixed(1)} ${units[index]}`;
+}
+
+export function formatUptime(seconds: unknown): string {
+  const total = Math.max(0, Number(seconds) || 0);
+  const days = Math.floor(total / 86400);
+  const hours = Math.floor((total % 86400) / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  if (days > 0) return t('uptimeDays', { days, hours });
+  if (hours > 0) return t('uptimeHours', { hours, minutes });
+  return t('uptimeMinutes', { minutes });
+}
+
+export function appInitial(name?: string, title?: string): string {
+  return Array.from(String(name || title || '?').trim())[0]?.toUpperCase() || '?';
+}
+
+export function appGradient(key?: string): string {
+  let hash = 0;
+  for (const char of String(key || 'app')) hash = (hash * 31 + char.charCodeAt(0)) % 360;
+  return `linear-gradient(145deg, hsl(${hash} 45% 30%), hsl(${(hash + 46) % 360} 48% 20%))`;
+}
+
+export function sourceLabel(appId?: string): string {
+  const id = String(appId || '');
+  if (/bilibili/i.test(id)) return t('sourceBilibili');
+  if (/spotify/i.test(id)) return 'Spotify';
+  if (/msedge/i.test(id)) return 'Edge';
+  if (/brave/i.test(id)) return 'Brave';
+  if (/vivaldi/i.test(id)) return 'Vivaldi';
+  if (/firefox/i.test(id)) return 'Firefox';
+  if (/Music/i.test(id)) return t('musicSource');
+  if (/chrome/i.test(id)) return 'Chrome';
+  if (id === 'macOS') return 'macOS';
+  if (id.startsWith('org.mpris.MediaPlayer2.')) return id.replace('org.mpris.MediaPlayer2.', '').replace(/[._]/g, ' ');
+  return id.split('.').pop()?.replace(/[._-]/g, ' ') || t('mediaFallback');
+}
+
+export function temperatureUnitLabel(unit: TemperatureUnit): string {
+  return unit === 'fahrenheit' ? '°F' : '°C';
+}
+
+export function toDisplayTemperature(value: unknown, unit: TemperatureUnit): number | null {
+  const number = Number(value);
+  if (!Number.isFinite(number)) return null;
+  return unit === 'fahrenheit' ? (number * 9) / 5 + 32 : number;
+}
+
+export function formatTemperature(value: unknown, unit: TemperatureUnit, digits = 0): string {
+  const number = toDisplayTemperature(value, unit);
+  if (number === null) return '--';
+  return `${digits > 0 ? number.toFixed(digits) : Math.round(number)}${temperatureUnitLabel(unit)}`;
+}