pictureFrame/frontend/src/components/FrameCard.vue

<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>