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

package/src/svelte/lib/components/PomodoroCard.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import {
+    acquirePomodoro,
+    dismissAlarm,
+    formatRemaining,
+    pomodoro,
+    pomodoroProgress,
+    resetPomodoro,
+    switchPomodoroPhase,
+    togglePomodoro,
+  } from '../pomodoro.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 Timer from '@lucide/svelte/icons/timer';
+
+  // Every page is rendered twice (infinite-loop clones), so the engine is
+  // reference-counted and shared instead of running once per card instance.
+  onMount(() => acquirePomodoro());
+
+  const phaseLabel = $derived(
+    pomodoro.finished
+      ? pomodoro.phase === 'focus'
+        ? t('focusDone')
+        : t('breakDone')
+      : pomodoro.phase === 'focus'
+        ? t('focus')
+        : t('rest'),
+  );
+  const primaryLabel = $derived(
+    pomodoro.alarmActive
+      ? t('stopAlarm')
+      : pomodoro.finished
+        ? pomodoro.phase === 'focus'
+          ? t('startBreak')
+          : t('startFocus')
+        : pomodoro.running
+          ? t('pause')
+          : t('start'),
+  );
+  const time = $derived(formatRemaining(pomodoro.remainingMs));
+  const percent = $derived(pomodoroProgress());
+
+  function handlePrimary(): void {
+    if (pomodoro.alarmActive) {
+      dismissAlarm();
+      return;
+    }
+    togglePomodoro();
+  }
+</script>
+
+<div
+  class="pomodoro"
+  class:is-break={pomodoro.phase === 'break'}
+  class:is-finished={pomodoro.finished}
+  class:is-alarm={pomodoro.alarmActive}
+  data-phase={pomodoro.phase}
+  data-running={pomodoro.running ? 'true' : 'false'}
+>
+  <div class="flex min-w-0 flex-1 flex-col justify-center">
+    <div class="flex items-center gap-2.5">
+      <Timer class="size-[18px] text-brand" strokeWidth={1.8} />
+      <span class="text-[16px] font-medium text-muted-foreground">{t('pomodoro')}</span>
+      <button
+        class="phase-button"
+        type="button"
+        disabled={pomodoro.running}
+        title={t('switchPhase')}
+        onclick={switchPomodoroPhase}
+      >
+        {phaseLabel}
+      </button>
+      {#if pomodoro.rounds > 0}
+        <Badge
+          variant="outline"
+          class="h-6 border-border bg-secondary px-2 text-[12px] font-medium text-muted-foreground"
+        >
+          {t('roundCount', { count: pomodoro.rounds })}
+        </Badge>
+      {/if}
+    </div>
+
+    <div class="pomodoro-main-row">
+      <span class="pomodoro-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',
+            pomodoro.finished && !pomodoro.alarmActive && 'bg-success text-[#041b14] hover:bg-success/90',
+            pomodoro.alarmActive && 'bg-danger text-white hover:bg-danger/90',
+          )}
+          type="button"
+          title={primaryLabel}
+          onclick={handlePrimary}
+        >
+          {#if pomodoro.alarmActive}
+            <BellRing class="size-[19px]" strokeWidth={1.9} />
+          {:else if pomodoro.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"
+          onclick={resetPomodoro}
+          aria-label={t('resetPomodoro')}
+          title={t('reset')}
+        >
+          <RotateCcw class="size-[20px]" strokeWidth={1.8} />
+        </Button>
+      </div>
+    </div>
+  </div>
+
+  <Progress
+    value={percent}
+    class={cn(
+      'mt-3 h-1.5 bg-secondary',
+      pomodoro.finished ? '[&>[data-slot=progress-indicator]]:bg-success' : '[&>[data-slot=progress-indicator]]:bg-brand',
+    )}
+  />
+</div>
+
+<style>
+  .pomodoro {
+    display: flex;
+    min-height: 142px;
+    max-height: 230px;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    margin: clamp(20px, 3.5vh, 32px) 0;
+    padding: 16px 18px 14px;
+    border: 1px solid var(--border);
+    border-radius: 19px;
+    background: color-mix(in srgb, var(--secondary) 46%, transparent);
+  }
+
+  .phase-button {
+    min-width: 0;
+    padding: 3px 8px;
+    border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
+    border-radius: 999px;
+    background: var(--brand-soft);
+    color: var(--brand);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.2;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  .phase-button:disabled {
+    cursor: default;
+    color: var(--foreground);
+    background: var(--secondary);
+    border-color: var(--border);
+  }
+
+  .pomodoro-main-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 7px;
+  }
+
+  .pomodoro-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;
+  }
+
+  .pomodoro.is-finished .pomodoro-time {
+    color: var(--success);
+  }
+
+  .pomodoro.is-alarm {
+    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
+    background: var(--danger-soft);
+  }
+
+  @media (max-height: 760px) {
+    .pomodoro {
+      min-height: 118px;
+      max-height: 180px;
+      margin: 14px 0;
+      padding: 11px 13px 10px;
+      border-radius: 17px;
+    }
+
+    .pomodoro-main-row {
+      margin-top: 5px;
+    }
+
+    .pomodoro-time {
+      font-size: clamp(44px, 8vh, 58px);
+    }
+  }
+
+  @media (max-height: 620px) {
+    .pomodoro {
+      min-height: 104px;
+      max-height: 160px;
+      margin: 10px 0;
+      padding: 9px 12px 8px;
+    }
+
+    .pomodoro-time {
+      font-size: 42px;
+    }
+
+    .phase-button {
+      padding: 2px 7px;
+      font-size: 12px;
+    }
+  }
+
+  @container (max-width: 360px) {
+    .pomodoro-main-row {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .pomodoro-main-row > .flex {
+      width: 100%;
+    }
+
+    .pomodoro-main-row :global(button[data-slot='button']:first-child) {
+      flex: 1;
+    }
+  }
+</style>

package/src/svelte/lib/components/QuestionSheet.svelte

@@ -0,0 +1,354 @@
+<script lang="ts">
+  import { app, closeQuestion, submitQuestionAnswer, toast } from '../state.svelte';
+  import type { SessionQuestion } from '../types';
+  import { t } from '../i18n.svelte';
+  import { Badge } from '$lib/components/ui/badge/index.js';
+  import { Button } from '$lib/components/ui/button/index.js';
+  import { Card } from '$lib/components/ui/card/index.js';
+  import { Input } from '$lib/components/ui/input/index.js';
+  import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+  import * as Dialog from '$lib/components/ui/dialog/index.js';
+  import { cn } from '$lib/utils.js';
+  import X from '@lucide/svelte/icons/x';
+  import MessageCircle from '@lucide/svelte/icons/message-circle';
+  import Check from '@lucide/svelte/icons/check';
+  import PencilLine from '@lucide/svelte/icons/pencil-line';
+  import ArrowUp from '@lucide/svelte/icons/arrow-up';
+  import SkipForward from '@lucide/svelte/icons/skip-forward';
+
+  interface Draft {
+    selected: string[];
+    custom: string;
+    skipped: boolean;
+  }
+
+  interface DisplayLabel {
+    text: string;
+    recommended: boolean;
+  }
+
+  const session = $derived(app.sessions.find((item) => item.id === app.answerSessionId) ?? null);
+  const pending = $derived(session?.pending ?? null);
+  const questions = $derived<SessionQuestion[]>(pending?.questions ?? []);
+  const opened = $derived(Boolean(session && pending && questions.length > 0));
+  const needsSubmit = $derived(questions.length > 1 || questions.some((question) => question.multiSelect === true));
+  const complete = $derived(questions.every((_, index) => isComplete(index)));
+
+  let drafts = $state<Draft[]>([]);
+  let busy = $state(false);
+  let error = $state('');
+  let activeKey = '';
+
+  function isComplete(index: number): boolean {
+    const draft = drafts[index];
+    if (!draft) return false;
+    return draft.skipped || draft.selected.length > 0 || draft.custom.trim() !== '';
+  }
+
+  $effect(() => {
+    const key = `${session?.id ?? ''}\u0000${pending?.requestId ?? ''}\u0000${questions.length}`;
+    if (key === activeKey) return;
+    activeKey = key;
+    drafts = questions.map(() => ({ selected: [], custom: '', skipped: false }));
+    busy = false;
+    error = '';
+  });
+
+  $effect(() => {
+    if (!app.answerSessionId) return;
+    if (!app.pushQuestions || !session || pending?.answerable === false || questions.length === 0) closeQuestion();
+  });
+
+  function close(): void {
+    if (busy) return;
+    closeQuestion();
+  }
+
+  function choose(question: SessionQuestion, index: number, label: string): void {
+    if (busy) return;
+    const draft = drafts[index];
+    if (!draft) return;
+    if (question.multiSelect === true) {
+      const selected = draft.selected.includes(label)
+        ? draft.selected.filter((item) => item !== label)
+        : [...draft.selected, label];
+      drafts[index] = { ...draft, selected, skipped: false };
+      error = '';
+      return;
+    }
+    drafts[index] = { selected: [label], custom: '', skipped: false };
+    error = '';
+    if (questions.length === 1) void submit();
+  }
+
+  function updateCustom(index: number, value: string): void {
+    if (busy) return;
+    const draft = drafts[index];
+    if (!draft) return;
+    drafts[index] = {
+      ...draft,
+      custom: value,
+      selected: questions[index]?.multiSelect === true ? draft.selected : [],
+      skipped: false,
+    };
+    error = '';
+  }
+
+  function skip(index: number): void {
+    if (busy) return;
+    drafts[index] = { selected: [], custom: '', skipped: true };
+    error = '';
+    if (questions.length === 1) void submit();
+  }
+
+  function answerFor(question: SessionQuestion, index: number): { id: string; selected: string[]; custom?: string } {
+    const draft = drafts[index];
+    if (!draft || draft.skipped) return { id: question.id, selected: [] };
+    const custom = draft.custom.trim();
+    if (custom) {
+      return {
+        id: question.id,
+        selected: question.multiSelect === true ? [...draft.selected] : [],
+        custom,
+      };
+    }
+    return { id: question.id, selected: [...draft.selected] };
+  }
+
+  async function submit(): Promise<void> {
+    if (busy) return;
+    if (!session?.id || !pending?.requestId) {
+      error = t('questionEnded');
+      return;
+    }
+    if (!complete) {
+      error = t('answerEveryQuestion');
+      return;
+    }
+    busy = true;
+    error = '';
+    try {
+      await submitQuestionAnswer(
+        session.id,
+        pending.requestId,
+        questions.map((question, index) => answerFor(question, index)),
+      );
+      toast(t('answered'));
+      closeQuestion();
+    } catch (cause) {
+      error = cause instanceof Error ? cause.message : String(cause);
+      toast(error);
+    } finally {
+      busy = false;
+    }
+  }
+
+  function customKey(event: KeyboardEvent): void {
+    if (event.key !== 'Enter' || event.shiftKey || event.isComposing || event.keyCode === 229) return;
+    event.preventDefault();
+    void submit();
+  }
+
+  function displayLabel(label: string): DisplayLabel {
+    const suffix = /\s*(?:\((?:recommended|推荐)\)|（(?:recommended|推荐)）)\s*$/i;
+    return suffix.test(label)
+      ? { text: label.replace(suffix, ''), recommended: true }
+      : { text: label, recommended: false };
+  }
+</script>
+
+<Dialog.Root open={opened} onOpenChange={(value) => { if (!value) close(); }}>
+  <Dialog.Content
+    showCloseButton={false}
+    interactOutsideBehavior="ignore"
+    escapeKeydownBehavior="ignore"
+    class="flex h-[calc(100dvh-20px)] max-h-[620px] w-[min(780px,calc(100vw-20px))] max-w-[780px] flex-col gap-0 overflow-hidden rounded-[24px] border border-border bg-card p-0 shadow-2xl sm:max-w-[780px]"
+  >
+    <div class="flex shrink-0 items-start justify-between gap-4 border-b border-border p-3.5">
+      <div class="flex min-w-0 items-start gap-3">
+        <span class="grid size-11 shrink-0 place-items-center rounded-[13px] border border-warn/20 bg-warn-soft text-warn">
+          <MessageCircle class="size-[24px]" strokeWidth={1.7} />
+        </span>
+        <div class="min-w-0">
+          <p class="eyebrow text-warn">WAITING FOR ANSWER</p>
+          <Dialog.Title class="mt-1 truncate text-[24px] font-semibold tracking-[-0.03em]">
+            {session?.title || t('sessionQuestion')}
+          </Dialog.Title>
+          <Dialog.Description class="mt-1 text-[14px] leading-relaxed">
+            {questions.length > 1 ? t('questionCount', { count: questions.length }) : t('chooseOption')}
+          </Dialog.Description>
+        </div>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        class="size-11 shrink-0 rounded-[13px] text-muted-foreground hover:bg-secondary hover:text-foreground"
+        type="button"
+        aria-label={t('close')}
+        disabled={busy}
+        onclick={close}
+      >
+        <X class="size-[22px]" strokeWidth={1.8} />
+      </Button>
+    </div>
+
+    <ScrollArea class="min-h-0 flex-1">
+      <div class="flex flex-col gap-2.5 p-3.5">
+        {#each questions as question, index (question.id)}
+          <Card class="gap-0 rounded-[16px] border border-border bg-surface-2/55 p-3.5 shadow-none ring-0 [--card-spacing:0px]">
+            {#if question.header}
+              <Badge
+                variant="outline"
+                class="mb-2 h-7 self-start border-warn/20 bg-warn-soft px-3 text-[13px] font-medium text-warn"
+              >
+                {question.header}
+              </Badge>
+            {/if}
+
+            <div class="flex items-start gap-2.5">
+              {#if questions.length > 1}
+                <span class="grid size-7 shrink-0 place-items-center rounded-[9px] bg-brand-soft text-[14px] font-semibold text-brand">
+                  {index + 1}
+                </span>
+              {/if}
+              <h3 class="text-[19px] leading-snug font-semibold text-foreground">{question.question}</h3>
+            </div>
+
+            {#if question.detail}
+              <p class="mt-2.5 max-h-36 overflow-y-auto rounded-[11px] border border-border bg-card px-3 py-2.5 text-[15px] leading-relaxed whitespace-pre-wrap text-muted-foreground">
+                {question.detail}
+              </p>
+            {/if}
+
+            {#if (question.options?.length ?? 0) > 0}
+              <div
+                class="mt-3 flex flex-col gap-2"
+                role={question.multiSelect === true ? 'group' : 'radiogroup'}
+              >
+                {#each question.options ?? [] as option, optionIndex (`${option.label}-${optionIndex}`)}
+                  {@const label = displayLabel(option.label)}
+                  {@const selected = drafts[index]?.selected.includes(option.label) === true}
+                  <Button
+                    variant="outline"
+                    class={cn(
+                      'h-auto min-h-[54px] w-full justify-start gap-3 rounded-[12px] border-border bg-card px-3 py-2.5 text-left whitespace-normal shadow-none hover:bg-secondary',
+                      selected && 'border-brand/50 bg-brand-soft hover:bg-brand-soft',
+                    )}
+                    type="button"
+                    role={question.multiSelect === true ? 'checkbox' : 'radio'}
+                    aria-checked={selected}
+                    disabled={busy}
+                    onclick={() => choose(question, index, option.label)}
+                  >
+                    <span
+                      class={cn(
+                        'grid size-7 shrink-0 place-items-center rounded-[8px] border border-border text-[13px] font-semibold text-muted-foreground',
+                        selected && 'border-brand bg-primary text-primary-foreground',
+                      )}
+                    >
+                      {#if selected}
+                        <Check class="size-4" strokeWidth={2.2} />
+                      {:else}
+                        {question.multiSelect === true ? '' : optionIndex + 1}
+                      {/if}
+                    </span>
+                    <span class="min-w-0 flex-1">
+                      <span class="flex flex-wrap items-center gap-2 text-[16px] leading-snug font-medium text-foreground">
+                        {label.text}
+                        {#if label.recommended}
+                          <span class="rounded-full bg-success-soft px-2 py-0.5 text-[12px] font-semibold text-success">{t('recommended')}</span>
+                        {/if}
+                      </span>
+                      {#if option.description}
+                        <span class="mt-0.5 block text-[13px] leading-snug text-muted-foreground">{option.description}</span>
+                      {/if}
+                    </span>
+                  </Button>
+                {/each}
+              </div>
+            {/if}
+
+            <div class="relative mt-3">
+              <PencilLine class="pointer-events-none absolute top-1/2 left-3.5 size-[18px] -translate-y-1/2 text-muted-foreground" strokeWidth={1.7} />
+              <Input
+                type="text"
+                value={drafts[index]?.custom ?? ''}
+                placeholder={question.options?.length ? t('otherAnswer') : t('typeAnswer')}
+                aria-label={t('customReply')}
+                class="h-12 rounded-[11px] border-border bg-card pl-11 text-[16px] shadow-none placeholder:text-muted-foreground"
+                disabled={busy}
+                oninput={(event) => updateCustom(index, event.currentTarget.value)}
+                onkeydown={customKey}
+              />
+              {#if questions.length === 1}
+                <Button
+                  size="icon"
+                  class="absolute top-1/2 right-1.5 size-10 -translate-y-1/2 rounded-[10px] bg-primary text-primary-foreground shadow-none hover:bg-primary/90"
+                  type="button"
+                  disabled={busy || !isComplete(index)}
+                  onclick={() => void submit()}
+                  aria-label={t('sendAnswer')}
+                >
+                  <ArrowUp class="size-[20px]" strokeWidth={2} />
+                </Button>
+              {/if}
+            </div>
+
+            <div class="mt-1.5 flex min-h-9 items-center gap-2">
+              <Button
+                variant="ghost"
+                class="h-9 gap-2 px-0 text-[14px] text-muted-foreground hover:bg-transparent hover:text-foreground"
+                type="button"
+                disabled={busy}
+                onclick={() => skip(index)}
+              >
+                <SkipForward class="size-[18px]" strokeWidth={1.7} />
+                {t('skipQuestion')}
+              </Button>
+              {#if drafts[index]?.skipped}
+                <span class="text-[13px] text-warn">{t('skippedNote')}</span>
+              {/if}
+            </div>
+          </Card>
+        {/each}
+
+        {#if error}
+          <p
+            class="rounded-[11px] border border-danger/25 bg-danger-soft px-3 py-2.5 text-[15px] leading-relaxed text-danger"
+            role="alert"
+          >
+            {error}
+          </p>
+        {/if}
+      </div>
+    </ScrollArea>
+
+    {#if needsSubmit}
+      <div class="mt-0 flex shrink-0 flex-col gap-2.5 border-t border-border bg-card p-4">
+        <p class="text-[13px] text-muted-foreground">
+          {busy ? t('sendingEllipsis') : t('canMultiAnswer')}
+        </p>
+        <div class="flex w-full gap-2.5">
+          <Button
+            variant="outline"
+            class="h-12 flex-1 rounded-[13px] border-border bg-transparent text-[16px] shadow-none hover:bg-secondary"
+            type="button"
+            disabled={busy}
+            onclick={close}
+          >
+            {t('cancel')}
+          </Button>
+          <Button
+            class="h-12 flex-1 rounded-[13px] bg-primary text-[16px] text-primary-foreground shadow-none hover:bg-primary/90"
+            type="button"
+            disabled={busy || !complete}
+            onclick={() => void submit()}
+          >
+            {busy ? t('sending') : t('sendAnswer')}
+          </Button>
+        </div>
+      </div>
+    {/if}
+  </Dialog.Content>
+</Dialog.Root>

package/src/svelte/lib/components/RadialGauge.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { cn } from '$lib/utils.js';
+
+  let {
+    value = 0,
+    color = 'var(--brand)',
+    size = 'clamp(92px, 14vh, 112px)',
+    class: className = '',
+  }: {
+    value?: number;
+    color?: string;
+    size?: string;
+    class?: string;
+  } = $props();
+
+  const clamped = $derived(Math.max(0, Math.min(100, Number(value) || 0)));
+  const display = $derived(Math.round(clamped));
+  const radius = 43;
+  const circumference = 2 * Math.PI * radius;
+  const offset = $derived(circumference * (1 - clamped / 100));
+</script>
+
+<div
+  class={cn('radial-gauge', className)}
+  style={`--meter-color:${color}; width:${size}; height:${size};`}
+  role="meter"
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-valuenow={display}
+>
+  <svg viewBox="0 0 100 100" aria-hidden="true">
+    <circle class="radial-track" cx="50" cy="50" r={radius} />
+    <circle
+      class="radial-value"
+      cx="50"
+      cy="50"
+      r={radius}
+      stroke-dasharray={circumference}
+      stroke-dashoffset={offset}
+      transform="rotate(-90 50 50)"
+    />
+  </svg>
+  <div class="radial-copy">
+    <span class="radial-number numeric">{display}</span>
+    <span class="radial-unit">%</span>
+  </div>
+</div>
+
+<style>
+  .radial-gauge {
+    position: relative;
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+  }
+
+  .radial-gauge svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .radial-track {
+    fill: none;
+    stroke: color-mix(in srgb, var(--foreground) 8%, transparent);
+    stroke-width: 7;
+  }
+
+  .radial-value {
+    fill: none;
+    stroke: var(--meter-color);
+    stroke-width: 7;
+    stroke-linecap: round;
+  }
+
+  .radial-copy {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: flex-start;
+    gap: 1px;
+    color: var(--foreground);
+  }
+
+  .radial-number {
+    font-size: clamp(30px, 4vw, 42px);
+    font-weight: 560;
+    line-height: 1;
+    letter-spacing: -0.05em;
+  }
+
+  .radial-unit {
+    margin-top: 3px;
+    color: var(--muted-foreground);
+    font-size: clamp(13px, 1.5vw, 16px);
+    font-weight: 550;
+  }
+</style>