omotomo_site/src/routes/DeckReviews.svelte

<script>
  import { push } from 'svelte-spa-router';
  import { supabase } from '../lib/supabase.js';
  import { fetchDeckWithQuestions, getDeckReviews } from '../lib/api/decks.js';

  export let params = {};

  let deck = null;
  let reviews = [];
  let loading = true;
  let error = null;

  $: deckId = params?.id;
  let prevDeckId = null;
  $: if (deckId && deckId !== prevDeckId) {
    prevDeckId = deckId;
    load();
  }

  async function load() {
    if (!deckId) return;
    loading = true;
    error = null;
    try {
      const [deckData, reviewsData] = await Promise.all([
        fetchDeckWithQuestions(supabase, deckId),
        getDeckReviews(supabase, deckId),
      ]);
      if (!deckData.published) {
        error = 'This deck is not available.';
        deck = null;
        reviews = [];
      } else {
        deck = deckData;
        reviews = reviewsData;
      }
    } catch (e) {
      error = e?.message ?? 'Failed to load';
      deck = null;
      reviews = [];
    } finally {
      loading = false;
    }
  }

  function goBack() {
    push(`/decks/${deckId}/preview`);
  }

  function reviewerName(r) {
    return (r.display_name && r.display_name.trim()) || r.email || 'Anonymous';
  }
</script>

<div class="page">
  <header class="page-header">
    <button type="button" class="btn btn-back" onclick={goBack}>← Back to deck</button>
    <h1 class="page-title">Reviews</h1>
    {#if deck}
      <p class="deck-subtitle">{deck.title}</p>
    {/if}
  </header>

  {#if loading}
    <p class="muted">Loading…</p>
  {:else if error}
    <p class="error">{error}</p>
  {:else if reviews.length === 0}
    <p class="muted">No reviews yet.</p>
  {:else}
    <ul class="reviews-list">
      {#each reviews as review (review.user_id)}
        <li class="review-item">
          <div class="review-row">
            <div class="review-avatar-wrap">
              {#if review.avatar_url}
                <img src={review.avatar_url} alt="" class="review-avatar" width="40" height="40" />
              {:else}
                <div class="review-avatar-placeholder" aria-hidden="true">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                    <circle cx="12" cy="7" r="4" />
                  </svg>
                </div>
              {/if}
            </div>
            <div class="review-body">
              <div class="review-meta">
                <span class="reviewer-name">{reviewerName(review)}</span>
                <span class="review-stars" aria-label="{review.rating} out of 5 stars">
                  {['★', '★', '★', '★', '★'].map((_, i) => (i < review.rating ? '★' : '☆')).join('')}
                </span>
              </div>
              {#if review.comment}
                <p class="review-comment">{review.comment}</p>
              {/if}
            </div>
          </div>
        </li>
      {/each}
    </ul>
  {/if}
</div>

<style>
  .page {
    padding: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
  }

  .page-header {
    margin-bottom: 1.5rem;
  }

  .btn-back {
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #a0a0a0);
    cursor: pointer;
    margin-bottom: 0.75rem;
  }

  .btn-back:hover {
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-hover, #444);
  }

  .page-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #f0f0f0);
  }

  .deck-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted, #a0a0a0);
  }

  .muted,
  .error {
    margin: 0;
  }

  .error {
    color: #ef4444;
  }

  .muted {
    color: var(--text-muted, #a0a0a0);
  }

  .reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .review-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border, #333);
  }

  .review-item:last-child {
    border-bottom: none;
  }

  .review-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }

  .review-avatar-wrap {
    flex-shrink: 0;
  }

  .review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .review-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-bg, #1a1a1a);
    border: 1px solid var(--border, #333);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #888);
  }

  .review-body {
    flex: 1;
    min-width: 0;
  }

  .review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .reviewer-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #f0f0f0);
  }

  .review-stars {
    color: #eab308;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
  }

  .review-comment {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted, #a0a0a0);
    line-height: 1.5;
  }
</style>