bitvid/views/history.html

<!-- views/history.html -->
<section id="watchHistoryView" class="space-y-6">
  <div class="space-y-4">
    <div
      class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
    >
      <div>
        <h2 class="text-xl font-semibold text-gray-100">Watch History</h2>
        <p class="text-sm text-gray-400">
          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="rounded-full bg-gray-800 px-4 py-2 text-sm font-medium text-gray-100 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          Clear local cache
        </button>
        <button
          type="button"
          data-history-action="republish"
          class="rounded-full bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300"
        >
          Republish now
        </button>
      </div>
    </div>

    <div
      id="watchHistoryPrivacyBanner"
      class="hidden rounded-lg border border-blue-500/40 bg-blue-900/30 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-blue-100">
          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="rounded-full bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-200"
          >
            Share metadata
          </button>
          <button
            id="watchHistoryPrivacyDismiss"
            type="button"
            class="rounded-full bg-transparent px-3 py-2 text-sm font-medium text-blue-200 hover:bg-blue-800/40 focus:outline-none focus:ring-2 focus:ring-blue-300"
          >
            Dismiss
          </button>
        </div>
      </div>
    </div>

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

    <div
      id="watchHistoryError"
      class="hidden rounded-lg border border-red-500/50 bg-red-900/40 p-3 text-sm text-red-100"
      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="watch-history-grid hidden"></div>
  <p id="watchHistoryEmpty" class="hidden text-gray-400 text-center py-12">
    Your watch history is empty. Watch some videos to populate this list.
  </p>

  <button
    id="watchHistoryLoadMore"
    type="button"
    class="hidden w-full rounded-full bg-gray-800 px-4 py-2 text-sm font-medium text-gray-100 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
  >
    Load more
  </button>

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

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