From 6c7c7a1a6f141e03444d4945a26753bd20b62894 Mon Sep 17 00:00:00 2001
From: Matt Edholm <football2801@me.com>
Date: Tue, 28 Apr 2026 00:50:46 -0400
Subject: [PATCH] feat(story-2.4): home screen device list with FrameCard
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FrameCard: large (single device, 5:3 preview + Add Photo CTA) and
  compact (52px thumb + name + count + icon pill) variants; WCAG-
  compliant offline/sync-fail status (color + text, never color alone)
- devices Pinia store: fetchDevices() → GET /api/devices
- HomeView: 0 devices → dashed empty-state card; 1 device → large
  FrameCard; 2+ → compact stack; add-photo wired (Epic 3 stub)
- Fix Device type: rotationInterval → rotationIntervalHours to match API

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/FrameCard.vue | 184 ++++++++++++++++++++++++++
 frontend/src/stores/devices.ts        |  25 ++++
 frontend/src/types/index.ts           |   2 +-
 frontend/src/views/HomeView.vue       | 123 ++++++++++++++++-
 4 files changed, 330 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/FrameCard.vue
 create mode 100644 frontend/src/stores/devices.ts

diff --git a/frontend/src/components/FrameCard.vue b/frontend/src/components/FrameCard.vue
new file mode 100644
index 0000000..5fd08a7
--- /dev/null
+++ b/frontend/src/components/FrameCard.vue
@@ -0,0 +1,184 @@
+<template>
+  <div
+    :class="[
+      'frame-card',
+      `frame-card--${size}`,
+      status !== 'ok' && `frame-card--${status}`,
+    ]"
+  >
+    <!-- Status badge (color + text — never color alone) -->
+    <div v-if="status !== 'ok'" class="frame-card__status-badge" aria-live="polite">
+      <span class="frame-card__status-dot" aria-hidden="true" />
+      {{ status === 'offline' ? 'Offline' : 'Sync issue' }}
+    </div>
+
+    <!-- Preview area -->
+    <div class="frame-card__preview">
+      <img
+        v-if="thumbnailUrl"
+        :src="thumbnailUrl"
+        :alt="`Current photo on ${name}`"
+        class="frame-card__img"
+      />
+      <div v-else class="frame-card__empty-preview" aria-hidden="true">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <circle cx="8.5" cy="8.5" r="1.5"/>
+          <polyline points="21,15 16,10 5,21"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="frame-card__body">
+      <p class="frame-card__name">{{ name }}</p>
+      <p v-if="size === 'compact'" class="frame-card__count">
+        {{ photoCount }} {{ photoCount === 1 ? 'photo' : 'photos' }}
+      </p>
+
+      <BaseButton
+        :variant="size === 'large' ? 'primary' : 'icon-pill'"
+        :aria-label="size === 'large' ? `Add photo to ${name}` : `Add photo to ${name}`"
+        class="frame-card__add-btn"
+        @click="$emit('add-photo', deviceId)"
+      >
+        <span v-if="size === 'large'">+ Add Photo</span>
+        <span v-else aria-hidden="true">+</span>
+      </BaseButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseButton from '@/components/BaseButton.vue'
+
+defineProps<{
+  deviceId: number
+  name: string
+  size: 'large' | 'compact'
+  status: 'ok' | 'offline' | 'sync-fail'
+  thumbnailUrl?: string
+  photoCount?: number
+}>()
+
+defineEmits<{ 'add-photo': [deviceId: number] }>()
+</script>
+
+<style scoped lang="scss">
+.frame-card {
+  background: var(--color-surface);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  transition: border-color var(--duration-fast);
+
+  &--offline  { border-color: #c0392b; }
+  &--sync-fail { border-color: #c49a20; }
+
+  &__status-badge {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    font-weight: 700;
+    background: var(--color-surface-2);
+
+    .frame-card--offline  & { color: #c0392b; }
+    .frame-card--sync-fail & { color: #8a6a00; }
+  }
+
+  &__status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+
+    .frame-card--offline  & { background: #c0392b; }
+    .frame-card--sync-fail & { background: #c49a20; }
+  }
+
+  // ── Large (single device) ────────────────────────────────────────────────
+  &--large &__preview {
+    aspect-ratio: 5/3;
+    background: var(--color-surface-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--large &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &--large &__empty-preview {
+    color: var(--color-text-muted);
+    opacity: 0.5;
+  }
+
+  &--large &__body {
+    padding: var(--space-4);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  &--large &__name {
+    font-size: var(--text-md);
+    font-weight: 700;
+  }
+
+  // ── Compact (multi device) ───────────────────────────────────────────────
+  &--compact {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+  }
+
+  &--compact &__preview {
+    width: 52px;
+    height: 52px;
+    border-radius: var(--radius-sm);
+    background: var(--color-surface-2);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &--compact &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &--compact &__empty-preview {
+    color: var(--color-text-muted);
+    opacity: 0.4;
+  }
+
+  &--compact &__body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  &--compact &__name {
+    font-size: var(--text-base);
+    font-weight: 700;
+  }
+
+  &--compact &__count {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+
+  &__add-btn { flex-shrink: 0; }
+}
+</style>
diff --git a/frontend/src/stores/devices.ts b/frontend/src/stores/devices.ts
new file mode 100644
index 0000000..796515f
--- /dev/null
+++ b/frontend/src/stores/devices.ts
@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { Device } from '@/types'
+
+export const useDevicesStore = defineStore('devices', () => {
+  const devices = ref<Device[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchDevices() {
+    loading.value = true
+    error.value = null
+    try {
+      const res = await fetch('/api/devices')
+      if (!res.ok) throw new Error('Failed to load devices')
+      devices.value = await res.json()
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'Unknown error'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { devices, loading, error, fetchDevices }
+})
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index dfe81d0..b0497ed 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -10,7 +10,7 @@ export interface Device {
   mac: string
   name: string
   orientation: 'landscape' | 'portrait'
-  rotationInterval: number
+  rotationIntervalHours: number
   uniquenessWindow: number
   linkedAt: string
 }
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 25c830f..069ede4 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,9 +1,126 @@
 <template>
-  <main class="view">
-    <h1>Home</h1>
+  <main class="home-view">
+    <!-- Loading -->
+    <div v-if="devicesStore.loading" class="home-view__loading" aria-live="polite">
+      Loading…
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="devicesStore.devices.length === 0" class="home-view__empty">
+      <div class="home-view__empty-card">
+        <svg class="home-view__empty-icon" width="48" height="48" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <circle cx="8.5" cy="8.5" r="1.5"/>
+          <polyline points="21,15 16,10 5,21"/>
+        </svg>
+        <p class="home-view__empty-title">Set up your first frame</p>
+        <p class="home-view__empty-sub">
+          Power on your pictureFrame device and scan the QR code it displays to get started.
+        </p>
+      </div>
+    </div>
+
+    <!-- Single device — large card -->
+    <div v-else-if="devicesStore.devices.length === 1" class="home-view__single">
+      <FrameCard
+        :deviceId="devicesStore.devices[0].id"
+        :name="devicesStore.devices[0].name"
+        size="large"
+        status="ok"
+        @add-photo="onAddPhoto"
+      />
+    </div>
+
+    <!-- Multiple devices — compact stack -->
+    <div v-else class="home-view__list">
+      <FrameCard
+        v-for="device in devicesStore.devices"
+        :key="device.id"
+        :deviceId="device.id"
+        :name="device.name"
+        size="compact"
+        status="ok"
+        @add-photo="onAddPhoto"
+      />
+    </div>
   </main>
 </template>
 
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useDevicesStore } from '@/stores/devices'
+import FrameCard from '@/components/FrameCard.vue'
+
+const devicesStore = useDevicesStore()
+
+onMounted(() => devicesStore.fetchDevices())
+
+function onAddPhoto(deviceId: number) {
+  // Photo upload flow — Epic 3
+  console.log('add-photo', deviceId)
+}
+</script>
+
 <style scoped lang="scss">
-.view { padding: var(--space-4); }
+.home-view {
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+
+  &__loading {
+    color: var(--color-text-muted);
+    font-size: var(--text-sm);
+    padding: var(--space-4) 0;
+    text-align: center;
+  }
+
+  &__empty {
+    display: flex;
+    justify-content: center;
+    padding-top: var(--space-6);
+  }
+
+  &__empty-card {
+    background: var(--color-surface);
+    border: 2px dashed var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--space-6) var(--space-5);
+    text-align: center;
+    max-width: 320px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  &__empty-icon {
+    color: var(--color-text-muted);
+    opacity: 0.5;
+  }
+
+  &__empty-title {
+    font-size: var(--text-md);
+    font-weight: 700;
+  }
+
+  &__empty-sub {
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    line-height: 1.5;
+  }
+
+  &__single {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+}
 </style>