feat: initial logins

src/routes/+page.svelte

@@ -4,9 +4,10 @@
     import crossUrl from "$lib/assets/cross.svg";
     import Navbar from "$lib/components/Navbar.svelte";
     import { allTags, volumeTags, wifiTags, powerOutletTags } from "$lib";
+    import Button from "$lib/components/Button.svelte";
 
     const { data } = $props();
-    const { studySpaces, supabase } = $derived(data);
+    const { studySpaces, supabase, session, adminMode } = $derived(data);
 
     let selectedTags = $state<string[]>([]);
     let tagFilter = $state("");
@@ -66,13 +67,19 @@
 </script>
 
 <Navbar>
-    <a href="/space/new/edit">
-        <img src={crossUrl} alt="new" class="new-space" />
-    </a>
+    {#if session}
+        <a href="/space/new/edit">
+            <img src={crossUrl} alt="new" class="new-space" />
+        </a>
+    {/if}
 </Navbar>
 
 <main>
-    <a href="/space/reports" class="checkReports">Check Reports</a>
+    {#if adminMode}
+        <div class="checkReports">
+            <Button href="/space/reports" type="link" style="red">Check Reports</Button>
+        </div>
+    {/if}
     <div class="tag-filter-container">
         <form>
             <div class="tagDisplay">
@@ -141,6 +148,14 @@
     {/each}
 </main>
 
+<footer>
+    {#if session}
+        <Button onclick={() => supabase.auth.signOut()}>Signout</Button>
+    {:else}
+        <Button href="/auth" type="link">Login / Signup</Button>
+    {/if}
+</footer>
+
 <style>
     main {
         display: grid;
@@ -153,6 +168,15 @@
         margin: 0 auto;
     }
 
+    footer {
+        display: flex;
+        flex-direction: column;
+        max-width: 600px;
+        width: 100%;
+        padding: 1rem;
+        margin: 0 auto;
+    }
+
     .new-space {
         transform: rotate(45deg);
     }
@@ -161,16 +185,14 @@
         grid-column: 1 / -1;
         display: flex;
         justify-content: center;
-        margin-bottom: 1rem;
+        padding: 0.5rem;
     }
 
     form {
         display: flex;
         flex-direction: column;
-        padding: 1.5rem;
         gap: 0.5rem;
         max-width: 32rem;
-        margin: 0 auto;
     }
 
     .tagDisplay {
@@ -253,14 +275,9 @@
     }
     .checkReports {
         grid-column: 1 / -1;
-        display: block;
-        text-align: center;
-        color: #ffeaea;
+        display: flex;
+        flex-direction: column;
         font-size: 1.2rem;
-        text-decoration: none;
-        padding: 0.5rem;
-        background-color: #bd4949;
-        border-radius: 0.5rem;
     }
 
     @media (max-width: 20rem) {