From e0b13d49628154b9ef95cd5053b5d1224a95a29d Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 16 Apr 2025 23:48:16 +0100
Subject: [PATCH] feat(*): Add quality of life buttons

---
 src/lib/components/AssessmentHistory.svelte |  6 +++++
 src/routes/results/+page.svelte             | 28 +++++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/AssessmentHistory.svelte b/src/lib/components/AssessmentHistory.svelte
index 3cf930a..e678cef 100644
--- a/src/lib/components/AssessmentHistory.svelte
+++ b/src/lib/components/AssessmentHistory.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
   export let history: any[] = [];
   export let hideIfEmpty: boolean = false;
 </script>
@@ -18,6 +20,7 @@
             <th class="py-2 px-3 border-b text-left">Task/Assignment</th>
             <th class="py-2 px-3 border-b text-left">Grade</th>
             <th class="py-2 px-3 border-b text-left">Actions</th>
+            <th class="py-2 px-3 border-b text-left">Delete</th>
           </tr>
         </thead>
         <tbody>
@@ -43,6 +46,9 @@
                   </div>
                 </details>
               </td>
+              <td class="py-1 px-3 text-center">
+                <button class="bg-red-100 text-red-700 px-2 py-1 rounded hover:bg-red-200 transition text-xs" on:click={() => dispatch('delete', entry.timestamp)}>Delete</button>
+              </td>
             </tr>
           {/each}
         </tbody>
diff --git a/src/routes/results/+page.svelte b/src/routes/results/+page.svelte
index cf61422..92e2d68 100644
--- a/src/routes/results/+page.svelte
+++ b/src/routes/results/+page.svelte
@@ -31,7 +31,10 @@ onMount(() => {
 </script>
 
 <section class="max-w-xl mx-auto py-12">
-  <h1 class="text-2xl font-bold mb-4">Assessment Results</h1>
+  <div class="flex justify-between items-center mb-4">
+    <h1 class="text-2xl font-bold">Assessment Results</h1>
+    <a href="/upload" class="bg-blue-100 text-blue-700 px-3 py-1 rounded hover:bg-blue-200 transition">Back to Upload</a>
+  </div>
   <p class="mb-6">View detailed feedback and recommendations for each student submission.</p>
   {#if feedback}
     <AssessmentFeedback {...feedback} />
@@ -39,5 +42,26 @@ onMount(() => {
   {#if !feedback && (!history || history.length === 0)}
     <div class="border rounded p-6 text-gray-500">No results yet. Upload submissions to see feedback here.</div>
   {/if}
-  <AssessmentHistory {history} hideIfEmpty={true} />
+  <div class="flex justify-end mt-6">
+    <button class="bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200 transition" on:click={clearHistory} disabled={history.length === 0}>Clear History</button>
+  </div>
+  <AssessmentHistory {history} hideIfEmpty={true} on:delete={deleteEntry} />
 </section>
+
+<script lang="ts" context="module">
+export function clearHistory() {
+  localStorage.removeItem('assessmentHistory');
+  window.location.reload();
+}
+export function deleteEntry(event: CustomEvent) {
+  const timestamp = event.detail;
+  let prev = [];
+  try {
+    prev = JSON.parse(localStorage.getItem('assessmentHistory') || '[]');
+  } catch {}
+
+  prev = prev.filter((entry: any) => entry.timestamp !== timestamp);
+  localStorage.setItem('assessmentHistory', JSON.stringify(prev));
+  window.location.reload();
+}
+</script>