fix: Fixed favourites to not show up when a user hasn't been logged in

Co-Authored-By: Tadios Temesgen <tt2022@ic.ac.uk>

src/lib/components/SpaceCard.svelte

@@ -11,7 +11,8 @@
         imgSrc: string;
         href?: string;
         isFavourite: boolean;
-        onToggleFavourite: () => void;
+
+        onToggleFavourite?: () => void;
     }
 
     const { space, hours, alt, imgSrc, href, isFavourite, onToggleFavourite }: Props = $props();
@@ -21,9 +22,11 @@
     <!-- <img src={imgSrc} {alt} /> -->
     <div class="image-container">
         <img src={imgSrc} {alt} />
+        {#if onToggleFavourite}
             <div class="fav-button">
                 <Favourite {isFavourite} {onToggleFavourite} />
             </div>
+        {/if}
     </div>
     <div class="description">
         <h1>{space.location}</h1>

src/routes/+page.svelte

@@ -232,7 +232,7 @@
             space={studySpace}
             hours={studySpace.study_space_hours}
             isFavourite={favouriteIds.includes(studySpace.id)}
-            onToggleFavourite={() => handleToggleFavourite(studySpace.id)}
+            onToggleFavourite={session ? () => handleToggleFavourite(studySpace.id) : undefined}
         />
     {/each}
 </main>

src/routes/space/[id]/+page.svelte

@@ -122,11 +122,15 @@
 {/if}
 <main>
     <Carousel urls={imgUrls} />
-    <div class="titleContainer">
+    <div class="nameContainer">
-        <div class="nameContainer">{space.location}</div>
+        <div class="locationContainer">{space.location}</div>
+        {#await supabase.auth.getSession() then resp}
+            {#if resp.data.session}
                 <div class="title-fav">
                     <Favourite {isFavourite} onToggleFavourite={handleToggleFavourite} />
                 </div>
+            {/if}
+        {/await}
     </div>
     {#if space.description != null && space.description.length > 0}
         <p class="descContainer">
@@ -223,12 +227,13 @@
     }
 
     .nameContainer {
-        z-index: 10;
+        display: flex;
-        display: block;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
         width: 100%;
         padding: 0.6rem;
         margin-top: -0.5rem;
-        object-position: center;
         background-color: #49bd85;
         border-radius: 8px;
         font-size: 2.8rem;
@@ -338,12 +343,12 @@
         font-family: monospace;
         color: #eaffeb;
     }
-    .titleContainer {
+    /* .titleContainer {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin: -0.5rem 0 1rem;
-    }
+    } */
     .title-fav {
         font-size: 2rem;
         background: rgba(0, 0, 0, 0.4);