From 6274865750fbf045b614b43432fbd80f90629b1b Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sun, 31 Aug 2025 03:45:41 +0000
Subject: [PATCH] Update web/templates/settings/home.html

---
 web/templates/settings/home.html | 43 ++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/web/templates/settings/home.html b/web/templates/settings/home.html
index 742d100..f239a18 100644
--- a/web/templates/settings/home.html
+++ b/web/templates/settings/home.html
@@ -8,6 +8,49 @@
   <!-- Blank Settings box -->
   <div class="card" style="padding:20px; margin-bottom:20px;">
     <p class="muted small">Add your settings here when you’re ready.</p>
+    +<div class="card" style="margin-top:18px; padding:20px;">
+  <h2 class="page-title">Privacy · Clear My History</h2>
+  <p class="muted" style="margin:-6px 0 12px;">
+    Remove your Recent Searches and Recently Viewed illustrations from the Search page.
+  </p>
+  <button id="clear-history-btn" class="btn btn-danger">Clear History</button>
+</div>
+
+<!-- toast -->
+<div id="toast-clear-history"
+     style="position:fixed; right:16px; bottom:16px; padding:10px 14px; border-radius:10px;
+            background:#111827; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.25);
+            opacity:0; pointer-events:none; transition:opacity .25s;">
+  History cleared.
+</div>
+
+<script>
+(function(){
+  function getCookie(name) {
+    var value = "; " + document.cookie;
+    var parts = value.split("; " + name + "=");
+    if (parts.length === 2) return parts.pop().split(";").shift();
+  }
+  var btn = document.getElementById("clear-history-btn");
+  var toast = document.getElementById("toast-clear-history");
+  if (!btn) return;
+  btn.addEventListener("click", function(){
+    fetch("{% url 'clear_history' %}", {
+      method: "POST",
+      headers: { "X-CSRFToken": getCookie("csrftoken") }
+    })
+    .then(function(r){ return r.ok ? r.json() : Promise.reject(); })
+    .then(function(){
+      if (toast){
+        toast.style.opacity = "1";
+        setTimeout(function(){ toast.style.opacity = "0"; }, 1500);
+      }
+    })
+    .catch(function(){ /* silent per spec */ });
+  });
+})();
+</script>
+
     <!-- Your future settings content goes here -->
     <div class="card" style="padding:20px; margin-bottom:20px;">
     <button id="darkToggle" class="btn btn-secondary">Toggle Dark Mode</button>