feat: edit page

src/lib/components/Carousel.svelte

@@ -4,20 +4,27 @@
     import { onMount } from "svelte";
 
     interface Props {
+        scrollPosition?: number;
         urls?: string[];
         ondelete?: (idx: number) => void;
     }
 
-    const { urls = [], ondelete }: Props = $props();
+    let { scrollPosition = $bindable(0), urls = [], ondelete }: Props = $props();
     let carousel = $state<HTMLDivElement>();
-    let scrollPosition = $state(0);
+    let currentPosition = $state(0);
     let scrollWidth = $state(0);
     let clientWidth = $state(1);
     function updateScroll() {
-        scrollPosition = carousel?.scrollLeft || 0;
+        currentPosition = carousel?.scrollLeft || 0;
         scrollWidth = carousel?.scrollWidth || 0;
         clientWidth = carousel?.clientWidth || 1;
     }
+    $effect(() => {
+        carousel?.scrollTo({
+            left: scrollPosition * clientWidth,
+            behavior: "smooth"
+        });
+    });
     onMount(() => {
         const id = setInterval(() => {
             if (carousel) {
@@ -41,7 +48,7 @@
             </div>
         {/each}
     </div>
-    {#if scrollPosition > clientWidth / 2}
+    {#if currentPosition > clientWidth / 2}
         <button
             class="arrow left"
             onclick={(e) => {
@@ -52,7 +59,7 @@
             <img src={arrowRightUrl} alt="go to previous" />
         </button>
     {/if}
-    {#if scrollPosition < scrollWidth - clientWidth * 1.5}
+    {#if currentPosition < scrollWidth - clientWidth * 1.5}
         <button
             class="arrow right"
             onclick={(e) => {
@@ -64,7 +71,7 @@
         </button>
     {/if}
     <span class="position">
-        {Math.round(scrollPosition / clientWidth) + 1} / {urls.length}
+        {Math.round(currentPosition / clientWidth) + 1} / {urls.length}
     </span>
 </div>
 

src/lib/components/inputs/Images.svelte

@@ -8,9 +8,17 @@
         minHeight?: string;
         files?: FileList;
         required?: boolean;
+        scrollPosition?: number;
     }
 
-    let { name, height, minHeight, files = $bindable(), ...rest }: Props = $props();
+    let {
+        name,
+        height,
+        minHeight,
+        files = $bindable(),
+        scrollPosition = $bindable(),
+        ...rest
+    }: Props = $props();
 </script>
 
 <label
@@ -34,6 +42,7 @@
                 }
                 files = dt.files;
             }}
+            bind:scrollPosition
         />
     {:else}
         <div class="message">