dtourolle
ad48d89dfe
Formatting was configured but never enforced: `bun run format:check` reported 199 unformatted files and ran in no workflow and in no git hook, so .prettierrc (printWidth 100, trailing commas) described an intention rather than the tree. This is the one-time sweep that makes the check gateable. Whitespace and token-reflow only -- no behavioural change: `bun run check` reports 0 errors and all 1053 frontend tests pass before and after. Kept out of every other commit on purpose. A 199-file diff mixed with real changes is unreviewable, and the next commit turns format:check into a hard CI gate so this cannot silently accumulate again.
108 lines
3.3 KiB
Svelte
108 lines
3.3 KiB
Svelte
<!-- TRACES: UR-010 | JA-021 | DR-037 -->
|
|
<script lang="ts">
|
|
import { sessions, controllableSessions } from "$lib/stores";
|
|
import SessionCard from "./SessionCard.svelte";
|
|
|
|
interface Props {
|
|
onSelectSession?: (sessionId: string) => void;
|
|
}
|
|
|
|
let { onSelectSession }: Props = $props();
|
|
|
|
function handleSessionClick(sessionId: string) {
|
|
if (onSelectSession) {
|
|
onSelectSession(sessionId);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold text-white">
|
|
Active Sessions
|
|
{#if $controllableSessions.length > 0}
|
|
<span class="text-sm text-gray-400 font-normal">
|
|
({$controllableSessions.length})
|
|
</span>
|
|
{/if}
|
|
</h2>
|
|
|
|
<button
|
|
onclick={() => sessions.refresh()}
|
|
class="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
|
|
title="Refresh sessions"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading state -->
|
|
{#if $sessions.isLoading && $sessions.sessions.length === 0}
|
|
<div class="flex items-center justify-center py-12">
|
|
<div class="flex flex-col items-center gap-3">
|
|
<div
|
|
class="w-8 h-8 border-4 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"
|
|
></div>
|
|
<p class="text-sm text-gray-400">Loading sessions...</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Error state -->
|
|
{#if $sessions.error}
|
|
<div class="p-4 rounded-lg bg-red-500/10 border border-red-500/50">
|
|
<p class="text-sm text-red-400">{$sessions.error}</p>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Sessions list -->
|
|
{#if $controllableSessions.length > 0}
|
|
<div class="flex flex-col gap-2">
|
|
{#each $controllableSessions as session (session.id)}
|
|
<SessionCard
|
|
{session}
|
|
selected={$sessions.selectedSessionId === session.id}
|
|
onclick={() => handleSessionClick(session.id ?? "")}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{:else if !$sessions.isLoading}
|
|
<!-- Empty state -->
|
|
<div class="flex flex-col items-center justify-center py-12 text-center">
|
|
<svg
|
|
class="w-16 h-16 text-gray-600 mb-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<h3 class="text-lg font-medium text-gray-400 mb-2">No Active Sessions</h3>
|
|
<p class="text-sm text-gray-500 max-w-sm">
|
|
No controllable Jellyfin sessions found. Start playing media on another device to control it
|
|
from here.
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Last updated -->
|
|
{#if $sessions.lastUpdated && $controllableSessions.length > 0}
|
|
<p class="text-xs text-gray-500 text-center">
|
|
Last updated: {$sessions.lastUpdated.toLocaleTimeString()}
|
|
</p>
|
|
{/if}
|
|
</div>
|