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

package/src/svelte/lib/components/MusicControls.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+  import { app, sendAction } from '../state.svelte';
+  import type { MediaInfo, MediaPayload } from '../types';
+  import { clampVolume, isPlaying } from '../media';
+  import { t } from '../i18n.svelte';
+  import { Slider } from '$lib/components/ui/slider/index.js';
+  import { Button } from '$lib/components/ui/button/index.js';
+  import { cn } from '$lib/utils.js';
+  import SeekBar from './SeekBar.svelte';
+  import SkipBack from '@lucide/svelte/icons/skip-back';
+  import SkipForward from '@lucide/svelte/icons/skip-forward';
+  import Play from '@lucide/svelte/icons/play';
+  import Pause from '@lucide/svelte/icons/pause';
+  import Heart from '@lucide/svelte/icons/heart';
+  import Volume2 from '@lucide/svelte/icons/volume-2';
+  import VolumeX from '@lucide/svelte/icons/volume-x';
+
+  let {
+    payload,
+    media,
+    volume,
+  }: {
+    payload: MediaPayload | null;
+    media: MediaInfo | null;
+    volume: { volume?: number; muted?: boolean } | null;
+  } = $props();
+
+  const playing = $derived(isPlaying(media));
+  const loaded = $derived(payload !== null);
+  const previousDisabled = $derived(media ? !media.canPrevious : loaded);
+  const nextDisabled = $derived(media ? !media.canNext : loaded);
+
+  const displayVolume = $derived.by(() => {
+    if (app.volumeDragging) return clampVolume(app.volumeInput);
+    if (Date.now() < app.volumeHoldUntil) return clampVolume(app.volumeTarget);
+    return volume ? clampVolume(volume.volume ?? 0.5) : 0.5;
+  });
+  const volumePercent = $derived(Math.round(displayVolume * 100));
+
+  function handleVolumeInput(value: number): void {
+    app.volumeDragging = true;
+    app.volumeInput = clampVolume(value / 100);
+  }
+
+  function handleVolumeCommit(value: number): void {
+    app.volumeDragging = false;
+    app.volumeTarget = clampVolume(value / 100);
+    app.volumeHoldUntil = Date.now() + 2200;
+    sendAction('volume', app.volumeTarget);
+  }
+
+  function handleLike(): void {
+    if (!media?.canSetLiked || typeof media.liked !== 'boolean') return;
+    sendAction('like', !media.liked);
+  }
+</script>
+
+<div class="music-controls">
+  <div class="flex items-start justify-between gap-4">
+    <div class="min-w-0">
+      <p class="eyebrow">{media?.album || 'NOW PLAYING'}</p>
+      <h1 class="track-title">{media?.title || t('nothingPlaying')}</h1>
+      <p class="track-artist">
+        {media ? media.artist || media.albumArtist || t('unknownArtist') : t('chooseSong')}
+      </p>
+    </div>
+
+    {#if typeof media?.liked === 'boolean'}
+      <Button
+        variant="outline"
+        size="icon"
+        class={cn(
+          'mt-1 size-12 shrink-0 rounded-full border-border bg-card/50 text-muted-foreground shadow-none backdrop-blur-md hover:bg-secondary hover:text-foreground',
+          media.liked && 'border-danger/25 bg-danger-soft text-danger hover:bg-danger-soft hover:text-danger',
+        )}
+        disabled={!media.canSetLiked}
+        title={media.liked ? t('unlike') : t('like')}
+        aria-label={media.liked ? t('unlike') : t('like')}
+        onclick={handleLike}
+      >
+        <Heart class={cn('size-[22px]', media.liked && 'fill-current')} strokeWidth={1.8} />
+      </Button>
+    {/if}
+  </div>
+
+  <SeekBar {media} onSeek={(value) => sendAction('seek', value)} />
+
+  <div class="transport">
+    <Button
+      variant="outline"
+      size="icon"
+      class="transport-button size-[58px] rounded-full border-border bg-card/50 text-foreground shadow-none backdrop-blur-md hover:bg-secondary"
+      type="button"
+      aria-label={t('previousTrack')}
+      disabled={previousDisabled}
+      onclick={() => sendAction('previous')}
+    >
+      <SkipBack class="size-[24px]" strokeWidth={1.7} />
+    </Button>
+
+    <Button
+      size="icon"
+      class="play-button size-[72px] rounded-full border border-brand/35 bg-primary text-primary-foreground shadow-none hover:bg-primary/90"
+      type="button"
+      aria-label={playing ? t('pause') : t('play')}
+      onclick={() => sendAction('playpause')}
+    >
+      {#if playing}
+        <Pause class="size-[30px] fill-current" strokeWidth={1.5} />
+      {:else}
+        <Play class="ml-1 size-[30px] fill-current" strokeWidth={1.5} />
+      {/if}
+    </Button>
+
+    <Button
+      variant="outline"
+      size="icon"
+      class="transport-button size-[58px] rounded-full border-border bg-card/50 text-foreground shadow-none backdrop-blur-md hover:bg-secondary"
+      type="button"
+      aria-label={t('nextTrack')}
+      disabled={nextDisabled}
+      onclick={() => sendAction('next')}
+    >
+      <SkipForward class="size-[24px]" strokeWidth={1.7} />
+    </Button>
+  </div>
+
+  <div class="volume-row">
+    <Button
+      variant="outline"
+      size="icon"
+      class="size-12 shrink-0 rounded-[14px] border-border bg-card/50 text-muted-foreground shadow-none backdrop-blur-md hover:bg-secondary hover:text-foreground"
+      type="button"
+      aria-label={t('mute')}
+      title={t('mute')}
+      onclick={() => sendAction('mute')}
+    >
+      {#if volume?.muted}
+        <VolumeX class="size-[22px]" strokeWidth={1.7} />
+      {:else}
+        <Volume2 class="size-[22px]" strokeWidth={1.7} />
+      {/if}
+    </Button>
+    <Slider
+      type="single"
+      min={0}
+      max={100}
+      step={1}
+      value={volumePercent}
+      aria-label={t('volume')}
+      class="volume-slider max-w-[280px]"
+      onValueChange={handleVolumeInput}
+      onValueCommit={handleVolumeCommit}
+    />
+    <span class="w-14 text-right text-[16px] text-muted-foreground numeric">{volumePercent}%</span>
+  </div>
+</div>
+
+<style>
+  .music-controls {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: clamp(16px, 2.8vh, 26px);
+    padding-right: clamp(0px, 2vw, 24px);
+  }
+
+  .track-title {
+    margin: 7px 0 0;
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--foreground);
+    font-size: clamp(34px, 4.7vw, 52px);
+    font-weight: 570;
+    line-height: 1.08;
+    letter-spacing: -0.05em;
+    overflow-wrap: anywhere;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .track-artist {
+    margin: 8px 0 0;
+    overflow: hidden;
+    color: var(--muted-foreground);
+    font-size: clamp(17px, 2vw, 21px);
+    line-height: 1.4;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+
+  .transport {
+    display: flex;
+    align-items: center;
+    gap: clamp(12px, 2vw, 20px);
+  }
+
+  :global(.transport-button:disabled) {
+    opacity: 0.35;
+  }
+
+  :global(.volume-slider [data-slot='slider-track']) {
+    height: 6px;
+    background: color-mix(in srgb, var(--foreground) 12%, transparent);
+  }
+
+  :global(.volume-slider [data-slot='slider-range']) {
+    background: var(--brand);
+  }
+
+  :global(.volume-slider [data-slot='slider-thumb']) {
+    width: 18px;
+    height: 18px;
+    border-width: 2px;
+    background: var(--background);
+    box-shadow: none;
+  }
+
+  .volume-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  @media (max-height: 760px) {
+    .music-controls {
+      gap: 14px;
+    }
+
+    .track-title {
+      font-size: clamp(30px, 4vw, 40px);
+    }
+
+    .track-artist {
+      font-size: 17px;
+    }
+
+    :global(.transport-button) {
+      width: 62px;
+      height: 62px;
+    }
+
+    :global(.play-button) {
+      width: 80px;
+      height: 80px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    .music-controls {
+      padding-right: 0;
+    }
+  }
+</style>

package/src/svelte/lib/components/MusicCover.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import type { MediaInfo } from '../types';
+  import { t } from '../i18n.svelte';
+  import Music2 from '@lucide/svelte/icons/music-2';
+
+  let { media }: { media: MediaInfo | null } = $props();
+
+  const thumbnail = $derived(media?.thumbnail || media?.thumbnailUrl || '');
+  const fallbackText = $derived(media ? t('nowPlaying') : t('nothingPlaying'));
+  let failed = $state(false);
+  const showArt = $derived(Boolean(thumbnail) && !failed);
+
+  $effect(() => {
+    void thumbnail;
+    failed = false;
+  });
+</script>
+
+<div class="cover-shell" class:has-art={showArt}>
+  <div class="cover-fallback">
+    <span class="cover-fallback-icon">
+      <Music2 class="size-6" strokeWidth={1.55} />
+    </span>
+    <span>{fallbackText}</span>
+  </div>
+  {#if showArt}
+    <img
+      class="cover-art"
+      src={thumbnail}
+      alt={t('albumCover')}
+      draggable="false"
+      referrerpolicy="no-referrer"
+      onerror={() => (failed = true)}
+    />
+  {/if}
+</div>
+
+<style>
+  .cover-shell {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--brand) 15%, var(--border));
+    border-radius: 22px;
+    background:
+      radial-gradient(90% 90% at 30% 18%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%),
+      var(--surface-2);
+    box-shadow: 0 24px 60px rgb(0 0 0 / 28%);
+  }
+
+  .cover-art {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .cover-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    color: var(--muted-foreground);
+    font-size: 10px;
+    letter-spacing: 0.02em;
+  }
+
+  .cover-shell.has-art .cover-fallback {
+    display: none;
+  }
+
+  .cover-fallback-icon {
+    display: grid;
+    width: 48px;
+    height: 48px;
+    place-items: center;
+    border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
+    border-radius: 15px;
+    background: var(--brand-soft);
+    color: var(--brand);
+  }
+</style>

package/src/svelte/lib/components/MusicPage.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { app } from '../state.svelte';
+  import { sourceLabel } from '../format';
+  import { t } from '../i18n.svelte';
+  import { Badge } from '$lib/components/ui/badge/index.js';
+  import Radio from '@lucide/svelte/icons/radio';
+  import MusicControls from './MusicControls.svelte';
+  import MusicCover from './MusicCover.svelte';
+
+  const payload = $derived(app.media);
+  const media = $derived(payload?.media?.media ?? null);
+  const volume = $derived(payload?.volume ?? null);
+  const thumbnail = $derived(media?.thumbnail || media?.thumbnailUrl || '');
+  const source = $derived(media ? String(media.appName || '').trim() || sourceLabel(media.appId) : t('mediaFallback'));
+</script>
+
+{#if thumbnail}
+  <img
+    class="music-backdrop"
+    src={thumbnail}
+    alt=""
+    aria-hidden="true"
+    draggable="false"
+    referrerpolicy="no-referrer"
+  />
+{/if}
+<div class="music-wash" aria-hidden="true"></div>
+
+<div class="music-layout">
+  <div class="music-visual">
+    <MusicCover {media} />
+    <div class="mt-4 flex max-w-full items-center gap-2">
+      <Badge
+        variant="outline"
+        class="h-9 max-w-full gap-2 border-border bg-card/55 px-3.5 text-[14px] font-medium text-muted-foreground backdrop-blur-md"
+      >
+        <Radio class="size-4 text-brand" strokeWidth={1.8} />
+        <span class="truncate">{source}</span>
+      </Badge>
+
+    </div>
+  </div>
+
+  <MusicControls {payload} {media} {volume} />
+</div>
+
+<style>
+  .music-backdrop {
+    position: absolute;
+    top: -80px;
+    left: -80px;
+    z-index: 0;
+    width: calc(100% + 160px);
+    height: calc(100% + 160px);
+    object-fit: cover;
+    filter: blur(55px) saturate(1.2);
+    opacity: 0.42;
+    pointer-events: none;
+  }
+
+  .music-wash {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background:
+      radial-gradient(85% 120% at 12% 50%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 58%),
+      linear-gradient(90deg, color-mix(in srgb, var(--background) 52%, transparent), color-mix(in srgb, var(--background) 82%, transparent) 58%, var(--background) 100%),
+      linear-gradient(0deg, var(--background), transparent 44%);
+    pointer-events: none;
+  }
+
+  .music-layout {
+    position: relative;
+    z-index: 2;
+    display: grid;
+    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
+    align-items: center;
+    gap: clamp(22px, 4vw, 52px);
+    width: 100%;
+    height: 100%;
+    padding: clamp(16px, 3vw, 34px) clamp(16px, 3.5vw, 42px);
+  }
+
+  .music-visual {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .music-visual :global(.cover-shell) {
+    width: min(100%, clamp(210px, 43vh, 330px));
+    border-radius: clamp(18px, 3vh, 28px);
+  }
+
+  @media (max-height: 760px) {
+    .music-layout {
+      gap: 24px;
+      padding: 14px 24px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    .music-layout {
+      grid-template-columns: 1fr;
+      height: auto;
+      min-height: 100%;
+      gap: 24px;
+      padding: 26px 20px;
+    }
+
+    .music-visual :global(.cover-shell) {
+      width: min(72vw, 320px);
+    }
+  }
+</style>

package/src/svelte/lib/components/NotificationsCard.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { app } from '../state.svelte';
+  import { appGradient, appInitial, timeAgo } from '../format';
+  import { t } from '../i18n.svelte';
+  import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+  } from '$lib/components/ui/avatar/index.js';
+  import { Badge } from '$lib/components/ui/badge/index.js';
+  import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+  import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+  import Bell from '@lucide/svelte/icons/bell';
+  import BellOff from '@lucide/svelte/icons/bell-off';
+  import Panel from './Panel.svelte';
+  import SectionHeader from './SectionHeader.svelte';
+  import EmptyState from './EmptyState.svelte';
+
+  const notifications = $derived(app.notifications);
+  const list = $derived(Array.isArray(notifications?.notifications) ? notifications.notifications : []);
+  const unavailable = $derived(notifications?.available === false);
+</script>
+
+<Panel class="notifications-card flex min-h-0 flex-col p-4">
+  <SectionHeader icon={Bell} eyebrow="ALERTS" title={t('notifications')} class="mb-3">
+    {#snippet children()}
+      <Badge
+        variant="outline"
+        class="h-7 min-w-7 justify-center border-border bg-secondary px-2.5 text-[14px] font-semibold text-muted-foreground"
+      >
+        {list.length}
+      </Badge>
+    {/snippet}
+  </SectionHeader>
+
+  <div class="hairline-top pt-2"></div>
+
+  {#if notifications === null}
+    <div class="flex flex-col gap-2 pt-1">
+      {#each Array(5) as _, index (index)}
+        <div class="flex items-center gap-3 rounded-[14px] p-2.5">
+          <Skeleton class="size-11 shrink-0 rounded-[13px]" />
+          <div class="flex-1 space-y-2">
+            <Skeleton class="h-3 w-20" />
+            <Skeleton class="h-4 w-4/5" />
+            <Skeleton class="h-3 w-3/5" />
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else if unavailable}
+    <div class="flex min-h-0 flex-1 items-center justify-center">
+      <EmptyState icon={BellOff} title={t('notificationsUnavailable')} text={t('tryLater')} />
+    </div>
+  {:else if list.length === 0}
+    <div class="flex min-h-0 flex-1 items-center justify-center">
+      <EmptyState icon={BellOff} title={t('noNotifications')} text={t('noNotificationsHint')} />
+    </div>
+  {:else}
+    <ScrollArea class="-mx-1 min-h-0 flex-1" scrollbarYClasses="mr-0.5 w-2">
+      <div class="flex flex-col gap-1 pb-1 pr-1">
+        {#each list as item, index (item.id || `${item.appKey}-${item.receivedAt}-${index}`)}
+          <div class="notification-row flex gap-3 rounded-[15px] px-2 py-2.5">
+            <Avatar class="mt-0.5 size-11 shrink-0 rounded-[13px] after:rounded-[13px]">
+              {#if item.avatar}
+                <AvatarImage src={item.avatar} alt="" class="rounded-[13px]" />
+              {/if}
+              <AvatarFallback
+                class="rounded-[13px] text-[16px] font-semibold text-white ring-1 ring-white/10 ring-inset"
+                style={`background:${appGradient(item.appKey)}`}
+              >
+                {appInitial(item.appName, item.title)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center justify-between gap-3">
+                <span class="truncate text-[14px] font-semibold tracking-[0.03em] text-brand">
+                  {item.appName || t('notificationFallback')}
+                </span>
+                <span class="shrink-0 text-[13px] text-muted-foreground">
+                  {timeAgo(item.receivedAt, app.clockNow)}
+                </span>
+              </div>
+              <p class="mt-0.5 line-clamp-2 text-[18px] leading-snug font-medium text-foreground">
+                {item.title || ''}
+              </p>
+              {#if item.body}
+                <p class="mt-1 line-clamp-2 text-[15px] leading-snug text-muted-foreground">{item.body}</p>
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </div>
+    </ScrollArea>
+  {/if}
+</Panel>
+
+<style>
+  .notification-row {
+    border: 1px solid transparent;
+  }
+
+  @media (orientation: portrait) {
+    :global(.notifications-card) {
+      min-height: 440px;
+    }
+  }
+</style>

package/src/svelte/lib/components/Panel.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Card } from '$lib/components/ui/card/index.js';
+  import { cn } from '$lib/utils.js';
+
+  let {
+    class: className = '',
+    children,
+  }: {
+    class?: string;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<Card
+  class={cn(
+    'gap-0 rounded-[26px] border border-border bg-card py-0 text-card-foreground shadow-none ring-0 [--card-spacing:0px]',
+    className,
+  )}
+>
+  {@render children?.()}
+</Card>

package/src/svelte/lib/components/PerformancePage.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import CpuMemoryCard from './CpuMemoryCard.svelte';
+  import GpuCard from './GpuCard.svelte';
+  import ThermalCard from './ThermalCard.svelte';
+</script>
+
+<div class="performance-grid">
+  <div class="performance-main">
+    <CpuMemoryCard />
+    <GpuCard />
+  </div>
+  <ThermalCard />
+</div>
+
+<style>
+  .performance-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) clamp(250px, 28%, 316px);
+    gap: 12px;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .performance-main {
+    display: grid;
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    min-height: 0;
+  }
+
+  @media (max-height: 760px) {
+    .performance-grid {
+      grid-template-columns: minmax(0, 1fr) clamp(238px, 30%, 280px);
+      gap: 10px;
+    }
+
+    .performance-main {
+      gap: 8px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    .performance-grid {
+      grid-template-columns: 1fr;
+      height: auto;
+      min-height: 100%;
+      gap: 10px;
+    }
+
+    .performance-main {
+      grid-template-rows: auto auto;
+      gap: 10px;
+    }
+  }
+</style>