Merge branch 'scanner_page'

frontend/src/lib/components/Room.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { type Room } from "$lib/types"
-    let { room }: { room: Room } = $props()
-</script>
-
-<div class="room flex flex-col items-start gap-2 rounded-lg bg-white p-6 shadow-md">
-    <h2 class="flex items-center gap-2 text-xl font-semibold">
-        {room.name}
-        {#if room.private}
-            <span class="text-gray-500">🔒</span>
-        {/if}
-    </h2>
-    <!-- <span class="text-sm text-gray-600"> -->
-    <!-- {participants} participant{participants === 1 ? "" : "s"} -->
-    <!-- </span> -->
-</div>

frontend/src/lib/components/RoomComponent.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { type Room } from "$lib/types"
+    let { room }: { room: Room } = $props()
+</script>
+
+<button
+    class="flex w-82 cursor-pointer flex-row items-center rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
+>
+    <div class="flex flex-row">
+        {room.name}
+        {room.private ? "🔒" : ""}
+    </div>
+    <div class="grow"></div>
+    <div class="flex flex-row items-center gap-2">
+        <div class="font-mono">64m</div>
+        <div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
+    </div>
+</button>