From 6e45851892f980cdcfad1a05fc80611981bde75b Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Thu, 5 Jun 2025 17:01:03 +0100
Subject: [PATCH] feat: carousel image display

---
 src/lib/assets/arrow_right.svg     |   3 +
 src/lib/components/Carousel.svelte | 134 +++++++++++++++++++++++++++++
 src/lib/components/Navbar.svelte   |   1 +
 src/routes/space/[id]/+page.svelte |  18 ++--
 4 files changed, 149 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/assets/arrow_right.svg
 create mode 100644 src/lib/components/Carousel.svelte

diff --git a/src/lib/assets/arrow_right.svg b/src/lib/assets/arrow_right.svg
new file mode 100644
index 0000000..874ecb6
--- /dev/null
+++ b/src/lib/assets/arrow_right.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 24H38M38 24L24 10M38 24L24 38" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
new file mode 100644
index 0000000..b26229c
--- /dev/null
+++ b/src/lib/components/Carousel.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+    import arrowRightUrl from "$lib/assets/arrow_right.svg";
+    import crossUrl from "$lib/assets/cross.svg";
+    import { onMount } from "svelte";
+
+    interface Props {
+        urls?: string[];
+        ondelete?: (idx: number) => void;
+    }
+
+    const { urls = [], ondelete }: Props = $props();
+    let carousel = $state<HTMLDivElement>();
+    let scrollPosition = $state(0);
+    let scrollWidth = $state(0);
+    let clientWidth = $state(0);
+    function updateScroll() {
+        scrollPosition = carousel?.scrollLeft || 0;
+        scrollWidth = carousel?.scrollWidth || 0;
+        clientWidth = carousel?.clientWidth || 0;
+    }
+    onMount(updateScroll);
+</script>
+
+<div class="controls">
+    <div class="carousel" bind:this={carousel} onscroll={updateScroll} onscrollend={updateScroll}>
+        {#each urls as url, idx (`${idx}|${url}`)}
+            <div class="item">
+                <img src={url} alt="carousel item" />
+                {#if ondelete}
+                    <button class="delete" onclick={() => ondelete(idx)}>
+                        <img src={crossUrl} alt="delete item" />
+                    </button>
+                {/if}
+            </div>
+        {/each}
+    </div>
+    {#if scrollPosition > clientWidth / 2}
+        <button
+            class="arrow left"
+            onclick={() => {
+                if (carousel) carousel.scrollLeft -= carousel.clientWidth;
+            }}
+        >
+            <img src={arrowRightUrl} alt="go to previous" />
+        </button>
+    {/if}
+    {#if scrollPosition < scrollWidth - clientWidth * 1.5}
+        <button
+            class="arrow right"
+            onclick={() => {
+                if (carousel) carousel.scrollLeft += carousel.clientWidth;
+            }}
+        >
+            <img src={arrowRightUrl} alt="go to next" />
+        </button>
+    {/if}
+    <span class="position">
+        {Math.round(scrollPosition / clientWidth) + 1} / {urls.length}
+    </span>
+</div>
+
+<style>
+    .carousel {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+    }
+    .controls {
+        position: relative;
+    }
+
+    .item {
+        position: relative;
+        min-width: 100%;
+        max-width: 100%;
+        scroll-snap-align: center;
+    }
+    .item img {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+    }
+    .delete,
+    .position,
+    .arrow {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        z-index: 10;
+        border: none;
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 9999px;
+    }
+    .arrow {
+        cursor: pointer;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+    .arrow img {
+        width: 1.4rem;
+    }
+    .arrow:hover {
+        opacity: 0.8;
+    }
+    .arrow.left {
+        left: 0.2rem;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .arrow.left img {
+        transform: rotate(180deg);
+    }
+    .arrow.right {
+        right: 0.2rem;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .delete {
+        top: 0.1rem;
+        right: 0.1rem;
+    }
+    .position {
+        font-size: 0.8rem;
+        bottom: 0.7rem;
+        border-radius: 1rem;
+        right: 0.2rem;
+        padding: 0.3rem 0.5rem;
+        background-color: rgba(0, 0, 0, 0.7);
+    }
+</style>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index ff8bd72..7cb89ea 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -29,6 +29,7 @@
         box-shadow: 0rem 0rem 0.5rem #182125;
         align-items: center;
         overflow: hidden;
+        z-index: 100;
     }
 
     .logo {
diff --git a/src/routes/space/[id]/+page.svelte b/src/routes/space/[id]/+page.svelte
index fde6d34..b8121e6 100644
--- a/src/routes/space/[id]/+page.svelte
+++ b/src/routes/space/[id]/+page.svelte
@@ -2,16 +2,19 @@
     import Navbar from "$lib/components/Navbar.svelte";
     import crossUrl from "$lib/assets/cross.svg";
     import placeholder from "$lib/assets/study_space.png";
+    import Carousel from "$lib/components/Carousel.svelte";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
 
-    const imgUrl = $derived(
-        space.study_space_images.length > 0
-            ? supabase.storage
-                  .from("files_bucket")
-                  .getPublicUrl(space.study_space_images[0].image_path).data.publicUrl
-            : placeholder
+    const imgUrls = $derived(
+        space.study_space_images.length === 0
+            ? [placeholder]
+            : space.study_space_images.map(
+                  (img) =>
+                      supabase.storage.from("files_bucket").getPublicUrl(img.image_path).data
+                          .publicUrl
+              )
     );
 </script>
 
@@ -22,7 +25,7 @@
 </Navbar>
 
 <main>
-    <img src={imgUrl} alt="the study space" />
+    <Carousel urls={imgUrls} />
     <div class="nameContainer">
         {space.location}
     </div>
@@ -61,6 +64,7 @@
         margin: 0 auto;
     }
     .nameContainer {
+        z-index: 10;
         display: block;
         width: 100%;
         padding: 0.6rem;