merge: Resolved merge conflicts

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

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

@@ -7,7 +7,7 @@
     import Report from "$lib/components/Report.svelte";
     import Feedback from "$lib/components/Feedback.svelte";
     import { onMount } from "svelte";
-    import { gmapsLoader } from "$lib";
+    import { gmapsLoader, daysOfWeek, formatTime } from "$lib";
     import Button from "$lib/components/Button.svelte";
 
     const { data } = $props();
@@ -50,6 +50,13 @@
             map
         });
     });
+
+    const hoursByDay = $derived(new Map(space.study_space_hours.map((h) => [h.day_of_week, h])));
+
+    const openingEntries = daysOfWeek.map((day, idx) => ({
+        day,
+        entry: hoursByDay.get(idx)
+    }));
 </script>
 
 <Navbar>
@@ -92,6 +99,22 @@
         </div>
     {/if}
     <hr />
+    <div class="subtitle">Opening Times:</div>
+    {#each openingEntries as { day, entry } (entry)}
+        <div class="opening-entry">
+            <span class="day">{day}:</span>
+            <span class="times">
+                {#if entry}
+                    {entry.is_24_7
+                        ? "Open All Day"
+                        : `${formatTime(entry.opens_at)} – ${formatTime(entry.closes_at)}`}
+                {:else}
+                    Closed
+                {/if}
+            </span>
+        </div>
+    {/each}
+
     <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
         {#if place.name}
@@ -235,4 +258,24 @@
         flex-direction: column;
         padding-top: 1rem;
     }
+
+    .opening-entry {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.75rem;
+        padding: 0.5rem 1.4rem;
+        align-items: center;
+    }
+    .opening-entry .day {
+        font-weight: bold;
+        color: #ffffff;
+        white-space: nowrap;
+    }
+    .opening-entry .times {
+        font-family: monospace;
+        background-color: rgba(255, 255, 255, 0.1);
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        color: #eaffeb;
+    }
 </style>