bitvid/views/history.html

<!-- views/history.html -->
<section id="watchHistoryView" class="bv-stack">
  <div class="bv-stack bv-stack--tight">
    <div
      class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
    >
      <div>
        <h2 class="text-xl font-semibold text-text">Watch History</h2>
        <p class="text-sm text-muted">
          Review the videos you recently played, grouped by day.
        </p>
      </div>
      <div class="flex flex-wrap gap-2" id="watchHistoryActions">
        <button
          type="button"
          data-history-action="clear-cache"
          class="focus-ring rounded-full bg-panel px-4 py-2 text-sm font-medium text-text hover:bg-panel-hover"
        >
          Clear local cache
        </button>
        <button
          type="button"
          data-history-action="republish"
          class="focus-ring rounded-full bg-info px-4 py-2 text-sm font-medium text-text hover:bg-info-strong focus-visible:bg-info-pressed"
        >
          Republish now
        </button>
      </div>
    </div>

    <div
      id="watchHistoryPrivacyBanner"
      class="border-info/40 bg-info/10 hidden rounded-lg border p-4"
      role="status"
      aria-live="polite"
    >
      <div
        class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
      >
        <p id="watchHistoryPrivacyMessage" class="text-sm text-info">
          Your history stays encrypted. Share metadata with relays to sync
          thumbnails across devices?
        </p>
        <div class="flex flex-wrap gap-2">
          <button
            id="watchHistoryPrivacyToggle"
            type="button"
            class="focus-ring rounded-full bg-info px-4 py-2 text-sm font-medium text-text hover:bg-info-strong focus-visible:bg-info-pressed"
          >
            Share metadata
          </button>
          <button
            id="watchHistoryPrivacyDismiss"
            type="button"
            class="focus-ring hover:bg-info/10 rounded-full bg-transparent px-3 py-2 text-sm font-medium text-info"
          >
            Dismiss
          </button>
        </div>
      </div>
    </div>

    <div
      id="watchHistoryInfo"
      class="bg-panel/60 rounded-lg p-4 text-sm text-text"
    >
      Thumbnails and titles are hydrated locally from your device caches.
    </div>

    <div
      id="watchHistoryError"
      class="border-critical/50 bg-critical/40 hidden rounded-lg border p-3 text-sm text-critical"
      role="alert"
    ></div>
  </div>

  <div id="watchHistoryLoading">
    <div id="watchHistoryStatus">
      <div class="sidebar-loading-wrapper" role="status" aria-live="polite">
        <div class="sidebar-loading-indicator">
          <span
            class="status-spinner status-spinner--inline"
            aria-hidden="true"
          ></span>
          <span class="sidebar-loading-text"
            >Fetching watch history from relays…</span
          >
        </div>
      </div>
    </div>
  </div>

  <div
    id="watchHistoryGrid"
    class="grid-stack hidden"
    data-variant="cards"
    data-orientation="vertical"
  ></div>
  <p id="watchHistoryEmpty" class="hidden py-12 text-center text-muted">
    Your watch history is empty. Watch some videos to populate this list.
  </p>

  <button
    id="watchHistoryLoadMore"
    type="button"
    class="focus-ring hidden w-full rounded-full bg-panel px-4 py-2 text-sm font-medium text-text hover:bg-panel-hover"
  >
    Load more
  </button>

  <div id="watchHistorySentinel" class="hidden h-1 w-full"></div>

  <script type="module" src="js/historyView.js"></script>
</section>