refactor: simpler timing inputs

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

@@ -7,8 +7,9 @@
     import Report from "$lib/components/Report.svelte";
     import Feedback from "$lib/components/Feedback.svelte";
     import { onMount } from "svelte";
-    import { gmapsLoader, daysOfWeek, formatTime } from "$lib";
+    import { gmapsLoader, daysOfWeek, formatTime, type Table } from "$lib";
     import Button from "$lib/components/Button.svelte";
+    import TagFilter from "$lib/components/inputs/TagFilter.svelte";
 
     const { data } = $props();
     const { space, supabase, adminMode } = $derived(data);
@@ -51,12 +52,20 @@
         });
     });
 
-    const hoursByDay = $derived(new Map(space.study_space_hours.map((h) => [h.day_of_week, h])));
+    // Collect all timing entries
+    let timingsPerDay: Record<number, Table<"study_space_hours">[]> = {
+        0: [],
+        1: [],
+        2: [],
+        3: [],
+        4: [],
+        5: [],
+        6: []
+    };
 
-    const openingEntries = daysOfWeek.map((day, idx) => ({
-        day,
-        entry: hoursByDay.get(idx)
-    }));
+    for (const entry of space.study_space_hours) {
+        timingsPerDay[entry.day_of_week].push(entry);
+    }
 </script>
 
 <Navbar>
@@ -100,20 +109,26 @@
     {/if}
     <hr />
     <div class="subtitle">Opening Times:</div>
-    {#each openingEntries as { day, entry } (entry)}
+    {#each Array(7) as _, idx (idx)}
+        {@const entries = timingsPerDay[idx]}
         <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)}`}
+            <span class="day">{daysOfWeek[idx]}</span>
+            <div class="times">
+                {#each entries as entry (entry)}
+                    <span class="time">
+                        {entry.open_today_status
+                            ? "Open All Day"
+                            : entry.open_today_status === false
+                              ? "Closed"
+                              : `${formatTime(entry.opens_at)} – ${formatTime(entry.closes_at)}`}
+                    </span>
                 {:else}
-                    Closed
-                {/if}
-            </span>
+                    <span class="time">Not known</span>
+                {/each}
+            </div>
         </div>
     {/each}
+    <hr />
 
     <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
@@ -167,7 +182,7 @@
         background-color: #2e3c42;
         width: 70%;
         border: none;
-        margin: 0 auto;
+        margin: 1rem auto 0;
     }
 
     .nameContainer {
@@ -260,22 +275,30 @@
     }
 
     .opening-entry {
-        display: grid;
-        grid-template-columns: auto 1fr;
+        display: flex;
         gap: 0.75rem;
         padding: 0.5rem 1.4rem;
         align-items: center;
+        background-color: #2e4653;
+        margin: 0.2rem;
+        border-radius: 0.5rem;
     }
     .opening-entry .day {
         font-weight: bold;
         color: #ffffff;
-        white-space: nowrap;
+        align-items: center;
+        justify-content: center;
     }
     .opening-entry .times {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 0.25rem 1.5rem;
+        flex: 1;
+        align-items: end;
+    }
+    .opening-entry .time {
         font-family: monospace;
-        background-color: rgba(255, 255, 255, 0.1);
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
         color: #eaffeb;
     }
 </style>