Overheard/src/routes/archive/+page.svelte

<script>
  // Archive page: lists every message this device (anonymous Firebase UID) has authored
  import { onMount } from 'svelte';
  import { getMyMessages } from '$lib/firebase/messages.js';
  import { getDecayInfo } from '$lib/utils/time.js';
  import { getStats } from '$lib/utils/stats.js';

  let messages = $state([]);
  let loading = $state(true);

  // personal engagement stats (read/echoed/letGo) - purely local to this
  // device (see stats.js), read once when the page mounts
  let stats = $state({ read: 0, echoed: 0, letGo: 0 });

  onMount(async () => {
    messages = await getMyMessages();
    loading = false;
    stats = getStats();
  });
</script>

<div class="archive">
  <div class="archive-header">
    <a href="/" class="back">← Back to map</a>
    <h1>Your messages</h1>
    <p class="subtitle">Everything you've left behind</p>
  </div>

  <!-- personal engagement stats summary - a private mirror of how this
       device has moved through the app, see stats.js -->
  <p class="stats-line">
    you've read {stats.read} messages, echoed {stats.echoed}, let {stats.letGo} fade.
  </p>

  {#if loading}
    <div class="loading">Loading your messages...</div>

  {:else if messages.length === 0}
    <div class="empty">
      <p>You haven't left any messages yet.</p>
      <a href="/" class="go-back">Go leave one →</a>
    </div>

  {:else}
    <div class="list">
      {#each messages as msg}
        <!-- fade-out timing for this message -->
        {@const decay = getDecayInfo(msg.createdAt, msg.lastEchoAt)}
        <div class="card" class:faded={decay.isExpired}>

          {#if msg.imageUrl}
            <img class="card-img" src={msg.imageUrl} alt="message" />
          {/if}

          <p class="card-text">{msg.text}</p>

          <div class="card-meta">
            {#if decay.isExpired}
              <span class="status faded">🌫️ Faded</span>
            {:else}
              <span class="status alive">✦ Alive</span>
            {/if}
            <span>•</span>
            <span>left {decay.daysAgo} days ago</span>
            <span>•</span>
            <span>{decay.daysLeft} days left</span>
            <span>•</span>
            <span>echoed {msg.echoCount} times</span>
          </div>

        </div>
      {/each}
    </div>
  {/if}
</div>

<style>
  .archive {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    font-family: sans-serif;
  }

  .archive-header {
    margin-bottom: 2rem;
  }

  .back {
    font-size: 0.85rem;
    color: #999;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1rem;
  }

  .back:hover { color: #111; }

  h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 0.3rem;
  }

  .subtitle {
    font-size: 0.85rem;
    color: #aaa;
  }

  /* personal engagement stats - calm/muted like .subtitle, with a slight
     contemplative italic to set it apart as a private aside rather than
     part of the page's structural header */
  .stats-line {
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
    margin: -0.5rem 0 2rem;
  }

  .loading {
    text-align: center;
    color: #aaa;
    padding: 3rem 0;
    font-size: 0.9rem;
  }

  .empty {
    text-align: center;
    padding: 3rem 0;
    color: #aaa;
  }

  .go-back {
    display: inline-block;
    margin-top: 0.75rem;
    color: #c4a8f5;
    text-decoration: none;
    font-size: 0.9rem;
  }

  .list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .card {
    background: white;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 1.2rem;
    transition: opacity 0.2s;
  }

  .card.faded {
    opacity: 0.5;
  }

  .card-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 0.75rem;
  }

  .card-text {
    font-size: 0.95rem;
    color: #111;
    line-height: 1.6;
    margin-bottom: 0.75rem;
  }

  .card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #bbb;
    align-items: center;
  }

  .status {
    font-weight: 600;
    font-size: 0.75rem;
  }

  .status.alive { color: #c4a8f5; }
  .status.faded { color: #ccc; }
</style>