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

package/src/svelte/lib/components/BalanceCard.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { app } from '../state.svelte';
+  import { currencySymbol, formatMoney } from '../format';
+  import { t } from '../i18n.svelte';
+  import { beijingYear, ensureHolidayYear, tariffPeriod } from '../billing.svelte';
+  import { Badge } from '$lib/components/ui/badge/index.js';
+  import Wallet from '@lucide/svelte/icons/wallet';
+  import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
+  import Mountain from '@lucide/svelte/icons/mountain';
+  import MoonStar from '@lucide/svelte/icons/moon-star';
+  import Panel from './Panel.svelte';
+  import SectionHeader from './SectionHeader.svelte';
+
+  const account = $derived(app.account);
+  const loaded = $derived(account !== null);
+  const signedIn = $derived(Boolean(account && account.available !== false && account.signedIn));
+  const balance = $derived(account?.balance);
+  const currency = $derived(balance?.currency || account?.usage?.currency || 'CNY');
+  const low = $derived(signedIn && Boolean(account?.lowBalance));
+  const value = $derived(
+    signedIn && balance?.balance != null && Number.isFinite(Number(balance.balance))
+      ? Number(balance.balance).toFixed(2)
+      : '—',
+  );
+  const caption = $derived(
+    !loaded
+      ? t('syncing')
+      : !signedIn
+        ? account?.balance?.error || t('signedOut')
+        : balance?.state === 'ready'
+          ? t('topUpBonus', {
+              paid: formatMoney(balance?.paid, currency),
+              bonus: formatMoney(balance?.bonus, currency),
+            })
+          : balance?.error || t('syncing'),
+  );
+
+  const tariff = $derived(tariffPeriod(new Date(app.clockNow)));
+  const showTariff = $derived(app.balanceDisplay.showPeakValley);
+
+  let loadedHolidayYear = 0;
+  $effect(() => {
+    const year = beijingYear(new Date(app.clockNow));
+    if (year === loadedHolidayYear) return;
+    loadedHolidayYear = year;
+    void ensureHolidayYear(year);
+  });
+</script>
+
+<Panel class="balance-card relative flex min-h-0 flex-col overflow-hidden p-4">
+  <div class="balance-glow" aria-hidden="true"></div>
+
+  <div class="relative z-10">
+    <SectionHeader icon={Wallet} eyebrow="ACCOUNT" title={t('accountBalance')}>
+      {#snippet children()}
+        {#if showTariff}
+          <Badge
+            variant="outline"
+            class="h-8 border-border bg-secondary px-3 text-[14px] font-medium text-muted-foreground"
+            title={tariff === 'peak' ? t('peakHours') : t('offpeakHours')}
+          >
+            {#if tariff === 'peak'}
+              <Mountain class="size-3.5 text-warn" strokeWidth={1.8} />
+              {t('peak')}
+            {:else}
+              <MoonStar class="size-3.5 text-brand" strokeWidth={1.8} />
+              {t('offpeak')}
+            {/if}
+          </Badge>
+        {/if}
+      {/snippet}
+    </SectionHeader>
+  </div>
+
+  <div class="relative z-10 flex flex-1 flex-col justify-center py-2.5">
+    <div class="balance-line numeric" class:is-low={low}>
+      <span class="balance-symbol">{currencySymbol(currency)}</span>
+      <span class="balance-value">{value}</span>
+    </div>
+    <p class="mt-1.5 line-clamp-2 text-[15px] leading-relaxed text-muted-foreground">{caption}</p>
+    {#if low}
+      <div class="mt-2 inline-flex items-center gap-1.5 self-start rounded-lg border border-danger/25 bg-danger-soft px-2 py-1 text-[14px] font-medium text-danger">
+        <TriangleAlert class="size-4" strokeWidth={1.8} />
+        {t('belowThreshold', { amount: formatMoney(account?.lowThreshold, currency) })}
+      </div>
+    {/if}
+  </div>
+</Panel>
+
+<style>
+  :global(.balance-card) {
+    background:
+      radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 62%),
+      var(--card);
+  }
+
+  .balance-glow {
+    position: absolute;
+    right: -80px;
+    bottom: -110px;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
+    box-shadow:
+      0 0 0 28px color-mix(in srgb, var(--brand) 4%, transparent),
+      0 0 0 64px color-mix(in srgb, var(--brand) 2.5%, transparent);
+    pointer-events: none;
+  }
+
+  .balance-line {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    letter-spacing: -0.055em;
+    line-height: 1;
+  }
+
+  .balance-symbol {
+    color: var(--brand);
+    font-size: 24px;
+    font-weight: 560;
+  }
+
+  .balance-value {
+    color: var(--foreground);
+    font-size: clamp(42px, 5.4vw, 62px);
+    font-weight: 560;
+  }
+
+  .balance-line.is-low .balance-symbol,
+  .balance-line.is-low .balance-value {
+    color: var(--danger);
+  }
+
+  /* Low state adds the alert capsule; shrink the amount so the whole card
+     still fits in the short landscape layout instead of clipping the pill. */
+  .balance-line.is-low .balance-value {
+    font-size: clamp(36px, 4.6vw, 48px);
+  }
+
+  .balance-line.is-low .balance-symbol {
+    font-size: 20px;
+  }
+
+  @media (max-height: 760px) {
+    :global(.balance-card) {
+      padding: 12px;
+    }
+
+    .balance-value {
+      font-size: clamp(42px, 6vw, 56px);
+    }
+
+    .balance-symbol {
+      font-size: 21px;
+    }
+
+    .balance-line.is-low .balance-value {
+      font-size: clamp(34px, 4.4vw, 40px);
+    }
+
+    .balance-line.is-low .balance-symbol {
+      font-size: 18px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    :global(.balance-card) {
+      min-height: 210px;
+    }
+  }
+</style>

package/src/svelte/lib/components/ClockCard.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { app } from '../state.svelte';
+  import { clockParts } from '../format';
+  import { Badge } from '$lib/components/ui/badge/index.js';
+  import CalendarDays from '@lucide/svelte/icons/calendar-days';
+  import Panel from './Panel.svelte';
+  import WeatherPanel from './WeatherPanel.svelte';
+  import PomodoroCard from './PomodoroCard.svelte';
+  import CountdownCard from './CountdownCard.svelte';
+  import WeatherIcon from './WeatherIcon.svelte';
+
+  const parts = $derived(clockParts(new Date(app.clockNow)));
+  const weather = $derived(app.weather);
+  const available = $derived(Boolean(weather && weather.ok !== false));
+  const current = $derived(weather?.current || {});
+</script>
+
+<Panel class="clock-card relative flex min-h-0 flex-col overflow-hidden">
+  <div class="clock-aura" aria-hidden="true"></div>
+  {#if available}
+    <div class="clock-graphic" aria-hidden="true">
+      <WeatherIcon code={current.code} isDay={current.isDay} class="size-full" strokeWidth={1.1} />
+    </div>
+  {/if}
+
+  <div class="clock-content relative z-10 flex min-h-0 flex-1 flex-col">
+    <header class="flex items-start justify-between gap-3">
+      <div class="flex min-w-0 items-center gap-3">
+        <span class="grid size-11 shrink-0 place-items-center rounded-[13px] border border-border bg-secondary text-brand">
+          <CalendarDays class="size-[22px]" strokeWidth={1.7} />
+        </span>
+        <div class="min-w-0">
+          <p class="truncate text-[16px] font-semibold tracking-[-0.01em] text-foreground">{parts.dateLabel}</p>
+          {#if parts.periodLabel}
+            <p class="mt-0.5 truncate text-[13px] text-muted-foreground">{parts.periodLabel}</p>
+          {/if}
+        </div>
+      </div>
+      <Badge
+        variant="outline"
+        class="h-8 shrink-0 border-border bg-secondary px-3 text-[15px] font-medium text-muted-foreground"
+      >
+        {parts.greeting}
+      </Badge>
+    </header>
+
+    <div class="clock-line flex items-baseline gap-3">
+      <span class="clock-time numeric">{parts.time}</span>
+      <span class="clock-seconds numeric">{parts.seconds}</span>
+    </div>
+
+    {#if app.pomodoro.enabled}
+      <PomodoroCard />
+    {:else if app.countdown.enabled}
+      <CountdownCard />
+    {/if}
+
+    <WeatherPanel {weather} />
+  </div>
+</Panel>
+
+<style>
+  :global(.clock-card) {
+    container-type: inline-size;
+    background:
+      radial-gradient(95% 82% at 100% 3%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 55%),
+      linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, #16213c), var(--card) 62%);
+  }
+
+  .clock-content {
+    padding: clamp(16px, 2.6vh, 26px);
+  }
+
+  .clock-aura {
+    position: absolute;
+    inset: auto -18% -48% 28%;
+    height: 62%;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--brand) 10%, transparent);
+    filter: blur(65px);
+    pointer-events: none;
+  }
+
+  .clock-graphic {
+    position: absolute;
+    right: -34px;
+    bottom: 118px;
+    width: 310px;
+    height: 310px;
+    color: var(--brand);
+    opacity: 0.05;
+    pointer-events: none;
+  }
+
+  .clock-line {
+    min-height: 0;
+    padding-top: clamp(16px, 3.8vh, 34px);
+    line-height: 0.82;
+  }
+
+  .clock-time {
+    color: var(--foreground);
+    font-size: clamp(82px, 10.7vw, 138px);
+    font-weight: 560;
+    letter-spacing: -0.075em;
+    line-height: 0.82;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .clock-seconds {
+    color: var(--brand);
+    font-size: clamp(28px, 3vw, 40px);
+    font-weight: 560;
+    letter-spacing: -0.02em;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  @media (max-height: 760px) {
+    .clock-content {
+      padding: 14px;
+    }
+
+    .clock-graphic {
+      width: 250px;
+      height: 250px;
+      bottom: 104px;
+    }
+
+    .clock-line {
+      padding-top: 10px;
+    }
+
+    .clock-time {
+      font-size: clamp(86px, 13.4vw, 123px);
+    }
+
+    .clock-seconds {
+      font-size: 29px;
+    }
+  }
+
+  @media (max-height: 620px) {
+    .clock-content {
+      padding: 12px;
+    }
+
+    .clock-line {
+      padding-top: 7px;
+      padding-bottom: 3px;
+    }
+
+    .clock-time {
+      font-size: clamp(76px, 10.7vw, 96px);
+      line-height: 0.9;
+    }
+
+    .clock-seconds {
+      font-size: 24px;
+    }
+
+    .clock-graphic {
+      width: 210px;
+      height: 210px;
+      bottom: 90px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    :global(.clock-card) {
+      min-height: 620px;
+    }
+
+    .clock-graphic {
+      display: none;
+    }
+
+    .clock-time {
+      font-size: clamp(84px, 22vw, 124px);
+    }
+  }
+</style>

package/src/svelte/lib/components/CountdownCard.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import {
+    acquireCountdown,
+    confirmCountdown,
+    countdown,
+    countdownProgress,
+    formatCountdown,
+    formatSeconds,
+    resetCountdown,
+    selectCountdownPreset,
+    toggleCountdown,
+  } from '../countdown.svelte';
+  import { app } from '../state.svelte';
+  import { Button } from '$lib/components/ui/button/index.js';
+  import { Progress } from '$lib/components/ui/progress/index.js';
+  import { Badge } from '$lib/components/ui/badge/index.js';
+  import { t } from '../i18n.svelte';
+  import { cn } from '$lib/utils.js';
+  import Play from '@lucide/svelte/icons/play';
+  import Pause from '@lucide/svelte/icons/pause';
+  import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+  import BellRing from '@lucide/svelte/icons/bell-ring';
+  import Hourglass from '@lucide/svelte/icons/hourglass';
+
+  // Every page is rendered twice (infinite-loop clones), so the engine is
+  // reference-counted and shared instead of running once per card instance.
+  onMount(() => acquireCountdown());
+
+  const presets = $derived(app.countdown.presets);
+  const time = $derived(formatCountdown(countdown.remainingMs));
+  const percent = $derived(countdownProgress());
+  const primaryLabel = $derived(
+    countdown.alarmActive
+      ? t('confirmEnd')
+      : countdown.running
+        ? t('pause')
+        : t('start'),
+  );
+
+  function handlePrimary(): void {
+    if (countdown.alarmActive) {
+      confirmCountdown();
+      return;
+    }
+    toggleCountdown();
+  }
+</script>
+
+<div
+  class="countdown"
+  class:is-alarm={countdown.alarmActive}
+  data-running={countdown.running ? 'true' : 'false'}
+>
+  <div class="flex min-w-0 flex-1 flex-col justify-center">
+    <div class="flex min-w-0 items-center gap-2.5">
+      <Hourglass class="size-[18px] shrink-0 text-brand" strokeWidth={1.8} />
+      <span class="text-[16px] font-medium text-muted-foreground">{t('countdown')}</span>
+      {#if countdown.alarmActive}
+        <Badge
+          variant="outline"
+          class="h-6 border-border bg-danger-soft px-2 text-[12px] font-medium text-danger"
+        >
+          {t('countdownFinished')}
+        </Badge>
+      {/if}
+    </div>
+
+    <div class="countdown-main-row">
+      <span class="countdown-time numeric" aria-live="off">{time}</span>
+
+      <div class="flex shrink-0 items-center gap-2.5">
+        <Button
+          class={cn(
+            'h-12 gap-2 rounded-[14px] px-5 text-[16px] font-semibold shadow-none',
+            countdown.alarmActive && 'bg-danger text-white hover:bg-danger/90',
+          )}
+          type="button"
+          title={primaryLabel}
+          onclick={handlePrimary}
+        >
+          {#if countdown.alarmActive}
+            <BellRing class="size-[19px]" strokeWidth={1.9} />
+          {:else if countdown.running}
+            <Pause class="size-[19px]" strokeWidth={1.9} />
+          {:else}
+            <Play class="size-[19px] fill-current" strokeWidth={1.9} />
+          {/if}
+          <span>{primaryLabel}</span>
+        </Button>
+        <Button
+          variant="outline"
+          size="icon"
+          class="size-12 rounded-[14px] border-border bg-transparent text-muted-foreground hover:bg-secondary hover:text-foreground"
+          type="button"
+          disabled={countdown.alarmActive}
+          onclick={resetCountdown}
+          aria-label={t('resetCountdown')}
+          title={t('reset')}
+        >
+          <RotateCcw class="size-[20px]" strokeWidth={1.8} />
+        </Button>
+      </div>
+    </div>
+
+    <Progress
+      value={percent}
+      class={cn(
+        'mt-3 h-1.5 bg-secondary',
+        countdown.alarmActive ? '[&>[data-slot=progress-indicator]]:bg-danger' : '[&>[data-slot=progress-indicator]]:bg-brand',
+      )}
+    />
+
+    <div class="preset-row" role="group" aria-label={t('countdownPresets')}>
+      {#each presets as preset, index (index)}
+        <button
+          class="preset-chip"
+          class:is-active={countdown.presetIndex === index}
+          type="button"
+          aria-pressed={countdown.presetIndex === index}
+          aria-label={formatSeconds(preset)}
+          disabled={countdown.running || countdown.alarmActive}
+          onclick={() => selectCountdownPreset(index)}
+        >
+          {formatSeconds(preset)}
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .countdown {
+    display: flex;
+    min-height: 174px;
+    max-height: 240px;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    margin: clamp(20px, 3.2vh, 30px) 0;
+    padding: 16px 18px 14px;
+    border: 1px solid var(--border);
+    border-radius: 19px;
+    background: color-mix(in srgb, var(--secondary) 46%, transparent);
+  }
+
+  .countdown-main-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 7px;
+  }
+
+  .countdown-time {
+    color: var(--foreground);
+    font-family: var(--font-mono);
+    font-size: clamp(48px, 7vh, 62px);
+    font-weight: 580;
+    line-height: 1;
+    letter-spacing: -0.05em;
+  }
+
+  .countdown.is-alarm {
+    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
+    background: var(--danger-soft);
+  }
+
+  .countdown.is-alarm .countdown-time {
+    color: var(--danger);
+  }
+
+  .preset-row {
+    display: flex;
+    gap: 6px;
+    margin-top: 9px;
+  }
+
+  .preset-chip {
+    flex: 1 1 0;
+    min-width: 0;
+    height: 28px;
+    padding: 0 4px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: var(--secondary);
+    color: var(--muted-foreground);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .preset-chip.is-active {
+    border-color: color-mix(in srgb, var(--brand) 38%, transparent);
+    background: var(--brand-soft);
+    color: var(--brand);
+  }
+
+  .preset-chip:disabled {
+    opacity: 0.55;
+  }
+
+  @media (max-height: 760px) {
+    .countdown {
+      min-height: 150px;
+      max-height: 200px;
+      margin: 13px 0;
+      padding: 11px 13px 10px;
+      border-radius: 17px;
+    }
+
+    .countdown-main-row {
+      margin-top: 5px;
+    }
+
+    .countdown-time {
+      font-size: clamp(44px, 8vh, 58px);
+    }
+
+    .preset-row {
+      margin-top: 7px;
+    }
+  }
+
+  @media (max-height: 620px) {
+    .countdown {
+      min-height: 132px;
+      max-height: 176px;
+      margin: 9px 0;
+      padding: 9px 12px 8px;
+    }
+
+    .countdown-time {
+      font-size: 42px;
+    }
+
+    .preset-chip {
+      height: 25px;
+      font-size: 11px;
+    }
+  }
+
+  @container (max-width: 360px) {
+    .countdown-main-row {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .countdown-main-row > .flex {
+      width: 100%;
+    }
+
+    .countdown-main-row :global(button[data-slot='button']:first-child) {
+      flex: 1;
+    }
+  }
+</style>