Added support for archived past events

src/routes/private/events/+page.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
     import { onMount } from 'svelte';
+    import SingleEvent from './SingleEvent.svelte';
+
     let { data } = $props();
 
     let events: any[] = $state([]);
+    let archived_events: any[] = $state([]);
     let loading = $state(true);
 
     onMount(async () => {
       const { data: evs } = await data.supabase
         .from('events')
-        .select('*')
+        .select('id, name, date')
         .order('date', { ascending: false });
+
+      const { data: aevs } = await data.supabase
+        .from('events_archived')
+        .select('id, name, date')
+        .order('date', { ascending: false });    
+
       events = evs || [];
+      archived_events = aevs || [];        
       loading = false;
     });
 </script>
@@ -28,15 +38,10 @@
     {/each}
   {:else}
     {#each events as event}
-      <a
-        href={`/private/events/event?id=${event.id}`}
-        class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group min-h-[72px] h-full w-full"
-      >
-        <div class="flex flex-col gap-1">
-          <span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
-          <span class="text-gray-500 text-sm">{event.date}</span>
-        </div>
-      </a>
+      <SingleEvent id={event.id} name={event.name} date={event.date} archived={false} />
+    {/each}
+    {#each archived_events as event}
+      <SingleEvent id={event.id} name={event.name} date={event.date} archived={true} />
     {/each}
   {/if}
 </div>