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

package/src/dsh/client/sections/notifications.ts

@@ -0,0 +1,43 @@
+/** Notifications section: remote answers, visible apps, and display limit. */
+
+import type * as React from 'react';
+import { Btn, Field, Row, Toggle, groupHead, h, sectionHead } from '../ui.js';
+import type { PanelApi } from '../types.js';
+
+export function renderNotifications(api: PanelApi): React.ReactElement {
+  const { t, data, settings, draft, setDraft, stage, selectedApps, toggleApp, selectAllApps } = api;
+  const apps = data.apps ?? [];
+  return h('div', { className: 'drc-section' },
+    sectionHead(t('notifications'), t('notificationsPageHint')),
+    h('div', { className: 'drc-group' },
+      groupHead(t('pushQuestions'), t('pushQuestionsHint')),
+      h(Row, { title: t('pushQuestionsToggle') },
+        h(Toggle, {
+          checked: Boolean(settings.notifications?.pushQuestions),
+          label: t('pushQuestions'),
+          onChange: (checked) => stage({ notifications: { pushQuestions: checked } }),
+        }),
+      ),
+    ),
+    h('div', { className: 'drc-group' },
+      groupHead(t('notificationApps'), t('notificationsHint')),
+      apps.length === 0
+        ? h('p', { className: 'drc-empty' }, t('noApps'))
+        : h('div', { className: 'drc-apps' }, apps.map((app) => h('button', {
+          key: app.key,
+          type: 'button',
+          className: `drc-app${selectedApps.includes(app.key) ? ' is-on' : ''}`,
+          onClick: () => toggleApp(app.key),
+        }, h('i'), app.name))),
+      h('div', { className: 'drc-actions' },
+        h(Btn, { onClick: selectAllApps }, t('allApps')),
+      ),
+    ),
+    h('div', { className: 'drc-group' },
+      groupHead(t('limitDisplay'), t('notificationLimitHint')),
+      h('div', { className: 'drc-fields' },
+        h(Field, { label: t('limitField'), value: draft.notificationLimit, placeholder: '5', inputMode: 'numeric', onChange: (value) => setDraft((current) => ({ ...current, notificationLimit: value })) }),
+      ),
+    ),
+  );
+}

package/src/dsh/client/sections/pomodoro.ts

@@ -0,0 +1,184 @@
+/** Pomodoro and countdown settings: enablement, durations, presets, and alert sound. */
+
+import type * as React from 'react';
+import { Btn, Field, Row, Toggle, groupHead, h, sectionHead } from '../ui.js';
+import {
+  COUNTDOWN_PRESET_LIMIT,
+  POMODORO_MAX_BREAK_MINUTES,
+  POMODORO_MAX_FOCUS_MINUTES,
+  POMODORO_MIN_MINUTES,
+  capMinuteInput,
+  capPresetDraft,
+  sanitizeMinuteInput,
+} from '../logic.js';
+import type { PanelApi, StagedSettings } from '../types.js';
+
+/** Minute fields accept up to two decimals and cap to the limits on blur. */
+function minuteField(
+  label: string,
+  value: string,
+  max: number,
+  onChange: (value: string) => void,
+): React.ReactElement {
+  return h(Field, {
+    label,
+    value,
+    placeholder: '25',
+    inputMode: 'decimal',
+    onChange: (next) => onChange(sanitizeMinuteInput(next)),
+    onBlur: () => onChange(capMinuteInput(value, POMODORO_MIN_MINUTES, max)),
+  });
+}
+
+function pomodoroGroup(api: PanelApi): React.ReactElement {
+  const { t, settings, draft, setDraft, stage } = api;
+  return h('div', { className: 'drc-group' },
+    h(Row, { title: t('pomodoroEnable'), description: t('pomodoroEnableHint') },
+      h(Toggle, {
+        checked: Boolean(settings.pomodoro?.enabled),
+        label: t('pomodoroEnable'),
+        onChange: (checked) => {
+          const patch: StagedSettings = { pomodoro: { enabled: checked } };
+          if (checked) patch.countdown = { enabled: false };
+          stage(patch);
+        },
+      }),
+    ),
+    h('div', { className: 'drc-divider' }),
+    groupHead(t('pomodoroDurations'), t('pomodoroDurationHint')),
+    h('div', { className: 'drc-fields' },
+      minuteField(t('pomodoroFocus'), draft.pomodoroFocus, POMODORO_MAX_FOCUS_MINUTES, (value) => setDraft((current) => ({ ...current, pomodoroFocus: value }))),
+      minuteField(t('pomodoroBreak'), draft.pomodoroBreak, POMODORO_MAX_BREAK_MINUTES, (value) => setDraft((current) => ({ ...current, pomodoroBreak: value }))),
+    ),
+    h('div', { className: 'drc-divider' }),
+    h(Row, { title: t('pomodoroLoop'), description: t('pomodoroLoopHint') },
+      h(Toggle, {
+        checked: Boolean(settings.pomodoro?.loopAlarm),
+        label: t('pomodoroLoop'),
+        onChange: (checked) => stage({ pomodoro: { loopAlarm: checked } }),
+      }),
+    ),
+  );
+}
+
+function countdownGroup(api: PanelApi): React.ReactElement {
+  const { t, settings, draft, setDraft, stage } = api;
+  const presets = draft.countdownPresets;
+
+  const updatePreset = (index: number, part: 'minutes' | 'seconds', value: string): void => {
+    setDraft((current) => ({
+      ...current,
+      countdownPresets: current.countdownPresets.map((preset, position) => position === index
+        ? { ...preset, [part]: value.replace(/[^\d]/g, '') }
+        : preset),
+    }));
+  };
+
+  /**
+   * Cap a preset row on blur: seconds carry into minutes and the total stays
+   * inside the supported 1–86400 second range.
+   */
+  const capPreset = (index: number): void => {
+    setDraft((current) => ({
+      ...current,
+      countdownPresets: current.countdownPresets.map((preset, position) => position === index ? capPresetDraft(preset) : preset),
+    }));
+  };
+
+  const removePreset = (index: number): void => {
+    setDraft((current) => {
+      if (current.countdownPresets.length <= 1) return current;
+      return {
+        ...current,
+        countdownPresets: current.countdownPresets.filter((_, position) => position !== index),
+      };
+    });
+  };
+
+  const addPreset = (): void => {
+    setDraft((current) => current.countdownPresets.length >= COUNTDOWN_PRESET_LIMIT
+      ? current
+      : { ...current, countdownPresets: [...current.countdownPresets, { minutes: '', seconds: '' }] });
+  };
+
+  return h('div', { className: 'drc-group' },
+    h(Row, { title: t('countdownEnable'), description: t('countdownEnableHint') },
+      h(Toggle, {
+        checked: Boolean(settings.countdown?.enabled),
+        label: t('countdownEnable'),
+        onChange: (checked) => {
+          const patch: StagedSettings = { countdown: { enabled: checked } };
+          if (checked) patch.pomodoro = { enabled: false };
+          stage(patch);
+        },
+      }),
+    ),
+    h('div', { className: 'drc-divider' }),
+    groupHead(t('countdownPresets'), t('countdownHint')),
+    h('div', { className: 'drc-list' }, presets.map((preset, index) => h('div', {
+      className: 'drc-preset-row',
+      key: `preset-${index}`,
+    },
+    h('label', { className: 'drc-preset-main' },
+      h('span', { className: 'drc-preset-label' }, t(`countdownPreset${index + 1}`)),
+      h('span', { className: 'drc-preset-duration' },
+        h('input', {
+          className: 'drc-map-input drc-preset-part',
+          value: preset.minutes,
+          placeholder: '0',
+          inputMode: 'numeric',
+          'aria-label': `${t(`countdownPreset${index + 1}`)} ${t('durationMinutes')}`,
+          onChange: (event: React.ChangeEvent<HTMLInputElement>) => updatePreset(index, 'minutes', event.target.value),
+          onBlur: () => capPreset(index),
+        }),
+        h('span', { className: 'drc-preset-unit' }, t('durationMinutes')),
+        h('input', {
+          className: 'drc-map-input drc-preset-part',
+          value: preset.seconds,
+          placeholder: '0',
+          inputMode: 'numeric',
+          'aria-label': `${t(`countdownPreset${index + 1}`)} ${t('durationSeconds')}`,
+          onChange: (event: React.ChangeEvent<HTMLInputElement>) => updatePreset(index, 'seconds', event.target.value),
+          onBlur: () => capPreset(index),
+        }),
+        h('span', { className: 'drc-preset-unit' }, t('durationSeconds')),
+      ),
+    ),
+    h(Btn, {
+      small: true,
+      danger: true,
+      disabled: presets.length <= 1,
+      title: t('removePreset'),
+      onClick: () => removePreset(index),
+    }, t('removePreset')),
+    ))),
+    h('div', { className: 'drc-actions' },
+      h(Btn, {
+        small: true,
+        onClick: addPreset,
+        disabled: presets.length >= COUNTDOWN_PRESET_LIMIT,
+      }, t('addPreset')),
+      h('span', { className: 'drc-preset-count' }, `${presets.length}/${COUNTDOWN_PRESET_LIMIT}`),
+      h('span', { className: 'drc-group-desc' }, t('countdownPresetLimitHint')),
+    ),
+  );
+}
+
+function soundGroup(api: PanelApi): React.ReactElement {
+  const { t, draft, setDraft } = api;
+  return h('div', { className: 'drc-group' },
+    groupHead(t('pomodoroSoundSection'), t('pomodoroSoundHint')),
+    h('div', { className: 'drc-fields' },
+      h(Field, { label: t('pomodoroSound'), value: draft.pomodoroSound, placeholder: t('pomodoroSoundPlaceholder'), onChange: (value) => setDraft((current) => ({ ...current, pomodoroSound: value })) }),
+    ),
+  );
+}
+
+export function renderPomodoro(api: PanelApi): React.ReactElement {
+  return h('div', { className: 'drc-section' },
+    sectionHead(api.t('pomodoro'), api.t('pomodoroHint')),
+    pomodoroGroup(api),
+    countdownGroup(api),
+    soundGroup(api),
+  );
+}

package/src/dsh/client/sections/preferences.ts

@@ -0,0 +1,138 @@
+/** Preferences section: plugin language, units, theme, page order, and navigation placement. */
+
+import type * as React from 'react';
+import { Seg, Toggle, groupHead, h, sectionHead } from '../ui.js';
+import type { PanelApi } from '../types.js';
+
+function languageGroup(api: PanelApi): React.ReactElement {
+  const { t, settings, stage } = api;
+  return h('div', { className: 'drc-group' },
+    groupHead(t('language'), t('languageHint')),
+    h('div', { className: 'drc-actions' },
+      h(Seg, {
+        options: [
+          { value: 'dsh', label: t('languageFollowDsh') },
+          { value: 'zh', label: '简体中文' },
+          { value: 'en', label: 'English' },
+        ],
+        value: settings.language ?? 'dsh',
+        onChange: (value) => stage({ language: value }),
+      }),
+    ),
+  );
+}
+
+function unitGroup(api: PanelApi): React.ReactElement {
+  const { t, settings, stage } = api;
+  return h('div', { className: 'drc-group' },
+    groupHead(t('temperatureUnit'), t('temperatureUnitHint')),
+    h('div', { className: 'drc-actions' },
+      h(Seg, {
+        options: [
+          { value: 'celsius', label: t('celsius') },
+          { value: 'fahrenheit', label: t('fahrenheit') },
+        ],
+        value: settings.temperatureUnit ?? 'celsius',
+        onChange: (value) => stage({ temperatureUnit: value }),
+      }),
+    ),
+  );
+}
+
+function themeGroup(api: PanelApi): React.ReactElement {
+  const { t, settings, stage } = api;
+  return h('div', { className: 'drc-group' },
+    groupHead(t('theme'), t('themeHint')),
+    h('div', { className: 'drc-actions' },
+      h(Seg, {
+        options: [
+          { value: 'dsh', label: t('followDsh') },
+          { value: 'light', label: t('light') },
+          { value: 'dark', label: t('dark') },
+        ],
+        value: settings.theme,
+        onChange: (value) => stage({ theme: value }),
+      }),
+    ),
+  );
+}
+
+function orderRows(api: PanelApi): React.ReactElement[] {
+  const { t, order, labels, draggingKey, dragIndex, settings, togglePage, startOrderDrag } = api;
+  const rows: React.ReactElement[] = [];
+  const remaining = draggingKey ? order.filter((key) => key !== draggingKey) : order;
+  const rawIndex = draggingKey ? (dragIndex == null ? order.indexOf(draggingKey) : dragIndex) : -1;
+  const insertAt = draggingKey ? Math.max(0, Math.min(rawIndex, remaining.length)) : -1;
+  let visualIndex = 0;
+  const placeholder = (): React.ReactElement => h('div', { className: 'drc-order-placeholder', key: 'order-placeholder' },
+    h('span', { className: 'drc-drag-handle', 'aria-hidden': 'true' }, '⋮⋮'),
+    h('span', { className: 'drc-order-placeholder-title' }, labels[draggingKey ?? ''] || ''),
+  );
+
+  for (const key of order) {
+    if (key === draggingKey) {
+      // Keep the dragged row mounted so its state survives, but take it out of
+      // layout; the dashed placeholder marks the insertion point.
+      rows.push(h('div', { className: 'drc-order-row is-dragging', key },
+        h('span', { className: 'drc-drag-handle', 'aria-hidden': 'true' }, '⋮⋮'),
+        h('b', null, ''),
+        h('span', { className: 'drc-order-label' }, labels[key]),
+        h(Toggle, { checked: settings.pageEnabled?.[key] !== false, label: labels[key], onChange: () => togglePage(key) }),
+      ));
+      continue;
+    }
+    if (draggingKey && remaining.indexOf(key) === insertAt) rows.push(placeholder());
+    visualIndex += 1;
+    rows.push(h('div', {
+      className: 'drc-order-row',
+      key,
+      onPointerDown: (event: React.PointerEvent<HTMLElement>) => startOrderDrag(key, event),
+    },
+    h('span', { className: 'drc-drag-handle', 'aria-hidden': 'true' }, '⋮⋮'),
+    h('b', null, String(visualIndex)),
+    h('span', { className: 'drc-order-label' }, labels[key]),
+    h(Toggle, { checked: settings.pageEnabled?.[key] !== false, label: labels[key], onChange: () => togglePage(key) }),
+    ));
+  }
+  if (draggingKey && insertAt >= remaining.length) rows.push(placeholder());
+  rows.push(h('div', { className: 'drc-order-end', key: 'order-end' }));
+  return rows;
+}
+
+function orderGroup(api: PanelApi): React.ReactElement {
+  const { t, orderListRef } = api;
+  return h('div', { className: 'drc-group' },
+    groupHead(t('pageOrder'), t('pageOrderHint')),
+    h('div', { className: 'drc-list', ref: orderListRef }, orderRows(api)),
+  );
+}
+
+function navGroup(api: PanelApi): React.ReactElement {
+  const { t, settings, stage } = api;
+  return h('div', { className: 'drc-group' },
+    groupHead(t('navPosition'), t('navPositionHint')),
+    h('div', { className: 'drc-actions' },
+      h(Seg, {
+        options: [
+          { value: 'left', label: t('navLeft') },
+          { value: 'right', label: t('navRight') },
+          { value: 'top', label: t('navTop') },
+          { value: 'bottom', label: t('navBottom') },
+        ],
+        value: settings.navPosition ?? 'left',
+        onChange: (value) => stage({ navPosition: value }),
+      }),
+    ),
+  );
+}
+
+export function renderPreferences(api: PanelApi): React.ReactElement {
+  return h('div', { className: 'drc-section' },
+    sectionHead(api.t('menuPlugin'), api.t('preferencesHint')),
+    languageGroup(api),
+    unitGroup(api),
+    themeGroup(api),
+    orderGroup(api),
+    navGroup(api),
+  );
+}

package/src/dsh/client/sections/system.ts

@@ -0,0 +1,120 @@
+/** System section: capabilities, connected devices, and diagnostics. */
+
+import type * as React from 'react';
+import { Btn, StatusRow, groupHead, h, sectionHead } from '../ui.js';
+import type { PanelApi, ProbeBackends } from '../types.js';
+import { formatBytes, formatDuration } from '../logic.js';
+
+function factRow(key: string, label: string, value: React.ReactNode, wide = false): React.ReactElement {
+  return h('div', { className: `drc-fact-row${wide ? ' is-wide' : ''}`, key },
+    h('span', { className: 'drc-fact-key' }, label),
+    h('span', { className: 'drc-fact-value' }, value),
+  );
+}
+
+function statusGroup(api: PanelApi): React.ReactElement {
+  const { t, data } = api;
+  const capabilities = data.capabilities ?? {};
+  const probe = capabilities.probe;
+  const node = capabilities.node;
+  const backends = probe?.backends;
+  const labels = { okLabel: t('healthy'), badLabel: t('unavailable'), pendingLabel: t('checking') };
+  const probeReady = probe ? probe.ok ?? probe.available : undefined;
+  const capabilityValue = (key: keyof ProbeBackends): boolean | undefined => {
+    if (!probe) return undefined;
+    if (!backends) return probeReady === false ? false : undefined;
+    return Boolean(backends[key]) && probeReady === true;
+  };
+  return h('div', { className: 'drc-group' },
+    groupHead(t('status'), t('statusHint')),
+    h(StatusRow, {
+      label: t('notificationsStatus'),
+      value: capabilities.notifications?.available,
+      detail: backends?.notifications,
+      ...labels,
+    }),
+    h(StatusRow, {
+      label: t('mediaStatus'),
+      value: capabilities.media?.available ?? capabilities.media?.ok,
+      detail: backends?.media,
+      ...labels,
+    }),
+    h(StatusRow, {
+      label: t('volumeStatus'),
+      value: capabilities.volume?.available ?? capabilities.volume?.ok,
+      detail: backends?.volume,
+      ...labels,
+    }),
+    h(StatusRow, {
+      label: t('performanceStatus'),
+      value: capabilityValue('performance'),
+      detail: backends?.performance,
+      ...labels,
+    }),
+    h(StatusRow, {
+      label: t('locationCapability'),
+      value: capabilityValue('location'),
+      detail: backends?.location,
+      ...labels,
+    }),
+    h(StatusRow, {
+      label: t('weatherStatus'),
+      value: capabilities.weather?.ok ?? undefined,
+      detail: node ? 'Node.js' : undefined,
+      ...labels,
+    }),
+  );
+}
+
+function diagnosticsGroup(api: PanelApi): React.ReactElement {
+  const { t, data, info } = api;
+  const diagnostics = data.diagnostics ?? {};
+  const probe = data.capabilities?.probe;
+  const node = data.capabilities?.node;
+  const left = [
+    factRow('protocol', t('protocol'), diagnostics.protocol || info.protocol || 'http'),
+    factRow('profile', t('profileName'), diagnostics.profile || '—'),
+    factRow('plugin-version', t('pluginVersion'), diagnostics.version || info.version || '—'),
+    factRow('probe-version', t('probeVersion'), probe?.version || (probe?.available ? '—' : t('probeMissing'))),
+  ];
+  const right = [
+    factRow('node-version', t('nodeVersion'), node?.version || '—'),
+    factRow('node-v8', t('nodeV8'), node?.v8 || '—'),
+    factRow('node-platform', t('nodePlatform'), node ? `${node.platform}/${node.arch}` : '—'),
+    factRow('node-memory', t('nodeMemory'), node?.memory ? `${formatBytes(node.memory.rss)} / ${formatBytes(node.memory.heapUsed)}` : '—'),
+  ];
+  return h('div', { className: 'drc-group' },
+    groupHead(t('diagnostics'), t('diagnosticsHint')),
+    h('div', { className: 'drc-fact-columns' },
+      h('div', { className: 'drc-fact-column' }, left),
+      h('div', { className: 'drc-fact-column' }, right),
+    ),
+    factRow('probe-binary', t('probeBinary'), probe?.binary || '—', true),
+    probe?.error ? factRow('probe-error', t('error'), probe.error, true) : null,
+  );
+}
+
+function clientsGroup(api: PanelApi): React.ReactElement {
+  const { t, clients, disconnect } = api;
+  return h('div', { className: 'drc-group' },
+    groupHead(t('clients'), t('clientsHint')),
+    clients.length === 0
+      ? h('p', { className: 'drc-empty' }, t('noClients'))
+      : h('div', { className: 'drc-list' }, clients.map((client) => h('div', { className: 'drc-client', key: client.id },
+        h('div', { className: 'drc-client-main' },
+          h('strong', null, client.label || t('device')),
+          h('small', null, `${client.ip} · ${formatDuration(Date.now() - client.connectedAt, t)}`),
+        ),
+        h(Btn, { small: true, danger: true, onClick: () => void disconnect(client.id) }, t('disconnect')),
+      ))),
+  );
+}
+
+export function renderSystem(api: PanelApi): React.ReactElement {
+  return h('div', { className: 'drc-section' },
+    sectionHead(api.t('menuSystem'), api.t('systemPageHint')),
+    statusGroup(api),
+    clientsGroup(api),
+    diagnosticsGroup(api),
+  );
+}