Refactor watch history renderer

views/history.html

@@ -1,6 +1,77 @@
 <!-- views/history.html -->
 <section id="watchHistoryView" class="space-y-6">
-  <h2 class="text-xl mb-4 text-gray-700">Watch History</h2>
+  <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">
@@ -16,10 +87,21 @@
       </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>
-  <div id="watchHistorySentinel" class="h-1 w-full"></div>
+
+  <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>