From e449334e9e23e3385e44f163d64c677746301fa8 Mon Sep 17 00:00:00 2001
From: Nele <n.heindorf@campus.tu-berlin.de>
Date: Mon, 17 Mar 2025 13:00:24 +0100
Subject: [PATCH 1/9] Add share button (#21)

---
 src/routes/+page.svelte | 80 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5232d33..5a7690c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -72,6 +72,26 @@
       behavior: "smooth"
     })
   }
+
+  // track if url has been copied to clipboard
+  let urlCopied: boolean = $state(false)
+
+  // function to copy url including sequence to clipboard
+  async function copyUrlToClipboard(event: MouseEvent) {
+    try {
+      const url = window.location.href + "#" + sequence.join("")
+      console.log("URL: ", url)
+      await navigator.clipboard.writeText(url)
+      urlCopied = true
+
+      setTimeout(() => {
+        urlCopied = false
+        ;(event.target as HTMLButtonElement).blur() // remove focus ring from the clicked button
+      }, 3000)
+    } catch (err) {
+      console.error("Failed to copy URL to clipboard:", err)
+    }
+  }
 </script>
 
 <svelte:window bind:scrollY bind:innerHeight />
@@ -173,7 +193,7 @@
   <button
     onclick={scrollToTop}
     transition:fade={{ duration: 300 }}
-    class="fixed right-6 bottom-6 flex h-18 w-18 cursor-pointer items-center justify-center rounded-full bg-sky-800 text-white shadow-lg transition-all hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:outline-none"
+    class="fixed right-6 bottom-25 flex h-18 w-18 cursor-pointer items-center justify-center rounded-full bg-sky-800 text-white shadow-lg transition-all hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:outline-none"
     aria-label={$locale === "de" ? "Zurück nach oben" : "Back to top"}
     title={$locale === "de" ? "Zurück nach oben" : "Back to top"}
   >
@@ -187,6 +207,64 @@
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
     </svg>
   </button>
+
+  <!-- Share Button that copies url with current sequence -->
+  <div class="fixed right-6 bottom-6 flex items-center space-x-2">
+    {#if urlCopied}
+      <div class="rounded-full bg-sky-800 px-3 py-2 text-white shadow-lg">
+        {$locale === "de" ? "Link zum Teilen kopiert!" : "Link copied for sharing!"}
+      </div>
+    {/if}
+
+    <!-- Share Button -->
+    <button
+      onclick={copyUrlToClipboard}
+      transition:fade={{ duration: 300 }}
+      class="flex h-18 w-18 cursor-pointer items-center justify-center rounded-full bg-sky-800 text-white shadow-lg transition-all hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:outline-none"
+      aria-label={$locale === "de" ? "Link kopieren" : "Copy link"}
+      title={$locale === "de" ? "Link kopieren" : "Copy link"}
+    >
+      <!-- Share Icon -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-5 w-5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <!-- Left Dots and Right Dot -->
+        <circle
+          cx="3"
+          cy="4"
+          r="2"
+          fill="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <circle
+          cx="3"
+          cy="21"
+          r="2"
+          fill="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <circle
+          cx="21"
+          cy="12"
+          r="2"
+          fill="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+
+        <!-- Connecting Lines -->
+        <path d="M3 4L21 12" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M3 21L21 12" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </button>
+  </div>
 {/if}
 
 <style>

From da6c17159718f030e4fe6619b7279e9d0b88673d Mon Sep 17 00:00:00 2001
From: Nele <n.heindorf@campus.tu-berlin.de>
Date: Mon, 31 Mar 2025 16:01:03 +0200
Subject: [PATCH 2/9] Add share dialogue and scrolling to main section (#21)

---
 src/lib/assets/share-icon.svg         | 39 +++++++++++
 src/lib/components/ShareButton.svelte | 89 +++++++++++++++++++++++++
 src/routes/+page.svelte               | 94 +++++----------------------
 3 files changed, 144 insertions(+), 78 deletions(-)
 create mode 100644 src/lib/assets/share-icon.svg
 create mode 100644 src/lib/components/ShareButton.svelte

diff --git a/src/lib/assets/share-icon.svg b/src/lib/assets/share-icon.svg
new file mode 100644
index 0000000..20dac02
--- /dev/null
+++ b/src/lib/assets/share-icon.svg
@@ -0,0 +1,39 @@
+<!-- Share Icon -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="white"
+      stroke-width="2"
+    >
+      <!-- Left Dots and Right Dot -->
+      <circle
+        cx="3"
+        cy="4"
+        r="2"
+        fill="white"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle
+        cx="3"
+        cy="21"
+        r="2"
+        fill="white"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle
+        cx="21"
+        cy="12"
+        r="2"
+        fill="white"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+
+      <!-- Connecting Lines -->
+      <path d="M3 4L21 12" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M3 21L21 12" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
\ No newline at end of file
diff --git a/src/lib/components/ShareButton.svelte b/src/lib/components/ShareButton.svelte
new file mode 100644
index 0000000..7a1164c
--- /dev/null
+++ b/src/lib/components/ShareButton.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { locale } from "$lib/stores/locale"
+  import { fade } from "svelte/transition"
+
+  let { sequence } = $props<{ sequence: number[] }>()
+
+  // track if url has been copied to clipboard
+  let urlCopied: boolean = $state(false)
+
+  const getShareUrl = () => window.location.href + "?share=true" + "#" + sequence.join("")
+  // function to copy url including sequence to clipboard
+  async function copyUrlToClipboard(event: MouseEvent) {
+    try {
+      const url = getShareUrl()
+      console.log("URL: ", url)
+      await navigator.clipboard.writeText(url)
+      urlCopied = true
+
+      setTimeout(() => {
+        urlCopied = false
+        ;(event.target as HTMLButtonElement).blur() // remove focus ring from the clicked button
+      }, 3000)
+    } catch (err) {
+      console.error("Failed to copy URL to clipboard:", err)
+    }
+  }
+
+  let showDialogue: boolean = $state(false)
+  function toggleDialogue(event: MouseEvent) {
+    showDialogue = !showDialogue
+    ;(event.target as HTMLButtonElement).blur()
+  }
+</script>
+
+<!-- Share Button that opens dialogue for copying url with current sequence -->
+<div class="fixed right-6 bottom-6 flex items-center space-x-2">
+  <!-- {#if urlCopied}
+    <div class="rounded-full bg-sky-800 px-3 py-2 text-white shadow-lg">
+      {$locale === "de" ? "Link zum Teilen kopiert!" : "Link copied for sharing!"}
+    </div>
+  {/if} -->
+  {#if showDialogue}
+    <div
+      transition:fade={{ duration: 200 }}
+      class="absolute right-20 bottom-0 rounded-lg border border-gray-300 bg-white p-3 shadow-lg"
+    >
+      <button
+        class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 focus:outline-none"
+        onclick={toggleDialogue}
+      >
+        ✕
+      </button>
+      <p class="text-gray-700">
+        {$locale === "de"
+          ? "Teile deinen gewürfelten Einakter:"
+          : "Share your randomised one-act play:"}
+      </p>
+      <div
+        class="mt-2 flex flex-col items-center space-y-2 space-x-2 sm:flex-row sm:space-y-0 sm:space-x-2"
+      >
+        <input type="text" class="rounded border bg-gray-100 p-1" value={getShareUrl()} readonly />
+        <button
+          class="w-32 rounded bg-sky-800 p-1 text-white transition hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+          onclick={copyUrlToClipboard}
+        >
+          {urlCopied
+            ? $locale === "de"
+              ? "Link kopiert!"
+              : "Link copied!"
+            : $locale === "de"
+              ? "Link kopieren"
+              : "Copy link"}
+        </button>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Share Button -->
+  <button
+    onclick={toggleDialogue}
+    transition:fade={{ duration: 300 }}
+    class="flex h-18 w-18 cursor-pointer items-center justify-center rounded-full bg-sky-800 text-white shadow-lg transition-all hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:outline-none"
+    aria-label={$locale === "de" ? "Dialog zum Teilen öffnen" : "Open share dialogue"}
+    title={$locale === "de" ? "Dialog zum Teilen öffnen" : "Open share dialogue"}
+  >
+    <!-- Share Icon -->
+    <img src="/src/lib/assets/share-icon.svg" alt="Share" class="h-5 w-5" />
+  </button>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5a7690c..820356b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
   import { page } from "$app/state"
   import Carousel from "$lib/components/Carousel.svelte"
   import Dice3D from "$lib/components/Dice3D.svelte"
+  import ShareButton from "$lib/components/ShareButton.svelte"
   import { generateRandomSequence } from "$lib/dice"
   import { locale } from "$lib/stores/locale"
   import emblaCarouselSvelte from "embla-carousel-svelte"
@@ -50,10 +51,7 @@
   let scrollY = $state(0)
   let innerHeight = $state(0)
   let showBackToTop = $derived(scrollY > innerHeight)
-
-  onMount(() => {
-    sequence = initialiseSequence()
-  })
+  let showShareButton = $derived(scrollY > innerHeight * 0.1)
 
   // Add function to scroll back to top
   function scrollToTop() {
@@ -73,25 +71,19 @@
     })
   }
 
-  // track if url has been copied to clipboard
-  let urlCopied: boolean = $state(false)
-
-  // function to copy url including sequence to clipboard
-  async function copyUrlToClipboard(event: MouseEvent) {
-    try {
-      const url = window.location.href + "#" + sequence.join("")
-      console.log("URL: ", url)
-      await navigator.clipboard.writeText(url)
-      urlCopied = true
+  function getQueryParams() {
+    return new URLSearchParams(window.location.search)
+  }
 
+  onMount(() => {
+    sequence = initialiseSequence()
+    // if current url is share link, scroll to main section
+    if (getQueryParams().get("share")) {
       setTimeout(() => {
-        urlCopied = false
-        ;(event.target as HTMLButtonElement).blur() // remove focus ring from the clicked button
-      }, 3000)
-    } catch (err) {
-      console.error("Failed to copy URL to clipboard:", err)
+        scrollToMain()
+      }, 200) // small delay to ensure content is rendered
     }
-  }
+  })
 </script>
 
 <svelte:window bind:scrollY bind:innerHeight />
@@ -207,65 +199,11 @@
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
     </svg>
   </button>
-
-  <!-- Share Button that copies url with current sequence -->
-  <div class="fixed right-6 bottom-6 flex items-center space-x-2">
-    {#if urlCopied}
-      <div class="rounded-full bg-sky-800 px-3 py-2 text-white shadow-lg">
-        {$locale === "de" ? "Link zum Teilen kopiert!" : "Link copied for sharing!"}
-      </div>
-    {/if}
-
-    <!-- Share Button -->
-    <button
-      onclick={copyUrlToClipboard}
-      transition:fade={{ duration: 300 }}
-      class="flex h-18 w-18 cursor-pointer items-center justify-center rounded-full bg-sky-800 text-white shadow-lg transition-all hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:outline-none"
-      aria-label={$locale === "de" ? "Link kopieren" : "Copy link"}
-      title={$locale === "de" ? "Link kopieren" : "Copy link"}
-    >
-      <!-- Share Icon -->
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-width="2"
-      >
-        <!-- Left Dots and Right Dot -->
-        <circle
-          cx="3"
-          cy="4"
-          r="2"
-          fill="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <circle
-          cx="3"
-          cy="21"
-          r="2"
-          fill="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <circle
-          cx="21"
-          cy="12"
-          r="2"
-          fill="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-
-        <!-- Connecting Lines -->
-        <path d="M3 4L21 12" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M3 21L21 12" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-    </button>
-  </div>
 {/if}
+<div style="display: {showShareButton ? 'block' : 'none'};">
+  <!-- Share Button Component -->
+  <ShareButton {sequence} />
+</div>
 
 <style>
   @keyframes pulse {

From 4f5c860080a77668fdb0ce37508bbc9087ef5e05 Mon Sep 17 00:00:00 2001
From: Nele <n.heindorf@campus.tu-berlin.de>
Date: Tue, 8 Apr 2025 17:58:58 +0200
Subject: [PATCH 3/9] Fix share query parameter, extend config files for
 debugging

---
 .gitignore                            | 1 +
 src/lib/components/ShareButton.svelte | 3 ++-
 svelte.config.js                      | 5 +++++
 tsconfig.json                         | 3 ++-
 vite.config.ts                        | 5 ++++-
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6635cf5..ee1f68a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.vscode
diff --git a/src/lib/components/ShareButton.svelte b/src/lib/components/ShareButton.svelte
index 7a1164c..e6ad1d0 100644
--- a/src/lib/components/ShareButton.svelte
+++ b/src/lib/components/ShareButton.svelte
@@ -7,7 +7,8 @@
   // track if url has been copied to clipboard
   let urlCopied: boolean = $state(false)
 
-  const getShareUrl = () => window.location.href + "?share=true" + "#" + sequence.join("")
+  const getShareUrl = () =>
+    window.location.origin + window.location.pathname + "?share=true" + "#" + sequence.join("")
   // function to copy url including sequence to clipboard
   async function copyUrlToClipboard(event: MouseEvent) {
     try {
diff --git a/svelte.config.js b/svelte.config.js
index 275262c..57205d1 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -18,6 +18,11 @@ const config = {
       strict: true,
       path: {
         base: process.argv.includes("dev") ? "" : process.env.BASE_PATH
+      },
+      resolve: {
+        alias: {
+          $lib: "/src/lib" // Define your aliases here
+        }
       }
     })
   }
diff --git a/tsconfig.json b/tsconfig.json
index 34aadc0..ce834e8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,8 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "inlineSources": true
   }
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
   //
diff --git a/vite.config.ts b/vite.config.ts
index 44c44e7..81d6bd5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,5 +4,8 @@ import { defineConfig } from "vite"
 
 export default defineConfig({
   plugins: [tailwindcss(), sveltekit()],
-  assetsInclude: "src/lib/assets/**/*.xsl"
+  assetsInclude: "src/lib/assets/**/*.xsl",
+  build: {
+    sourcemap: true // enable sourcemaps for debugging
+  }
 })

From 18276dbc2b82023d2a71be43fca9d39026c1626c Mon Sep 17 00:00:00 2001
From: Viktor Illmer <1476338+v-ji@users.noreply.github.com>
Date: Fri, 22 Aug 2025 15:32:16 +0200
Subject: [PATCH 4/9] Remove share= URL parameter

---
 src/lib/components/ShareButton.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/ShareButton.svelte b/src/lib/components/ShareButton.svelte
index e6ad1d0..ebf4485 100644
--- a/src/lib/components/ShareButton.svelte
+++ b/src/lib/components/ShareButton.svelte
@@ -8,7 +8,7 @@
   let urlCopied: boolean = $state(false)
 
   const getShareUrl = () =>
-    window.location.origin + window.location.pathname + "?share=true" + "#" + sequence.join("")
+    window.location.origin + window.location.pathname + "#" + sequence.join("")
   // function to copy url including sequence to clipboard
   async function copyUrlToClipboard(event: MouseEvent) {
     try {

From 46e6063dfc20c4eaeedaa492c49080d573c65502 Mon Sep 17 00:00:00 2001
From: Viktor Illmer <1476338+v-ji@users.noreply.github.com>
Date: Tue, 26 Aug 2025 12:56:59 +0200
Subject: [PATCH 5/9] Fix scroll on load timing issues, wait for DOM to be
 ready

---
 src/routes/+page.svelte | 96 ++++++++++++++++++++++-------------------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 820356b..7e2b8d1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { replaceState } from "$app/navigation"
   import { page } from "$app/state"
   import Carousel from "$lib/components/Carousel.svelte"
   import Dice3D from "$lib/components/Dice3D.svelte"
@@ -14,39 +15,68 @@
     skipSnaps: true // Allow the carousel to skip scroll snaps if it's dragged vigorously
   }
 
-  let sequence: number[] = $state([])
-  let isRolling = $state(false)
-
   function toggleLanguage() {
     $locale = $locale === "de" ? "en" : "de"
   }
 
-  // On change to isRolling, set a new sequence
+  let sequence: number[] = $state([])
+  const sequenceLength = 200
+  const sequenceRegex = new RegExp(`^[1-6]{${sequenceLength}}$`)
+
+  // Mount gate
+  let mounted = $state(false)
+  onMount(() => {
+    mounted = true
+  })
+
+  // Deferred scroll flag
+  let wantsScroll = $state(false)
+
+  // Whenever the url hash changes, derive sequence
   $effect(() => {
-    if (isRolling) {
+    const hash = page.url.hash.slice(1)
+
+    if (hash && sequenceRegex.test(hash)) {
+      sequence = hash.split("").map(Number)
+
+      // Reset hash
+      requestAnimationFrame(() => {
+        const url = new URL(page.url)
+        url.hash = ""
+        replaceState(url, page.state)
+      })
+
+      wantsScroll = true
+    } else if (sequence.length === 0) {
+      // Only set once on init
       sequence = generateRandomSequence()
     }
   })
 
-  function initialiseSequence() {
-    // On load, check if there's a sequence in the URL hash
-    const hashString = page.url.hash.slice(1)
-    if (!hashString) return generateRandomSequence()
-
-    // Check if it’s a valid sequence
-    const sequenceLength = 200
-    const sequenceRegex = new RegExp(`^[1-6]{${sequenceLength}}$`)
-    if (!sequenceRegex.test(hashString)) {
-      return generateRandomSequence()
-    }
+  // Perform the scroll once everything exists
+  $effect(() => {
+    if (!mounted || !wantsScroll || !mainElement) return
+    // Wait for the next frame to ensure the DOM is ready
+    requestAnimationFrame(() => {
+      scrollToMain()
+      wantsScroll = false
+    })
+  })
 
-    // Valid, apply
-    const hashSequence = hashString.split("").map(Number)
-    // Reset hash
-    history.pushState("", document.title, window.location.pathname + window.location.search)
-    return hashSequence
+  // Reference to the main element
+  let mainElement: HTMLElement
+  function scrollToMain() {
+    mainElement?.scrollIntoView({ behavior: "smooth", block: "start" })
   }
 
+  let isRolling = $state(false)
+  // On change to isRolling, set a new sequence
+  $effect(() => {
+    if (isRolling) {
+      sequence = generateRandomSequence()
+    }
+  })
+
   // Track scroll position
   let scrollY = $state(0)
   let innerHeight = $state(0)
@@ -60,30 +90,6 @@
       behavior: "smooth"
     })
   }
-
-  // Reference to the main element
-  let mainElement: HTMLElement
-
-  // Add function to scroll to main content
-  function scrollToMain() {
-    mainElement?.scrollIntoView({
-      behavior: "smooth"
-    })
-  }
-
-  function getQueryParams() {
-    return new URLSearchParams(window.location.search)
-  }
-
-  onMount(() => {
-    sequence = initialiseSequence()
-    // if current url is share link, scroll to main section
-    if (getQueryParams().get("share")) {
-      setTimeout(() => {
-        scrollToMain()
-      }, 200) // small delay to ensure content is rendered
-    }
-  })
 </script>
 
 <svelte:window bind:scrollY bind:innerHeight />

From 34d37902c40a1c8e9dbf5bbdd77aaa85e1f77d39 Mon Sep 17 00:00:00 2001
From: Nele <n.heindorf@campus.tu-berlin.de>
Date: Mon, 8 Sep 2025 17:31:21 +0200
Subject: [PATCH 6/9] Use  for Sharing URL, use showShareButton

---
 src/lib/components/ShareButton.svelte | 9 +++++----
 src/routes/+page.svelte               | 8 +++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ShareButton.svelte b/src/lib/components/ShareButton.svelte
index ebf4485..a419059 100644
--- a/src/lib/components/ShareButton.svelte
+++ b/src/lib/components/ShareButton.svelte
@@ -7,13 +7,14 @@
   // track if url has been copied to clipboard
   let urlCopied: boolean = $state(false)
 
-  const getShareUrl = () =>
+  let sharingUrl = $derived(
     window.location.origin + window.location.pathname + "#" + sequence.join("")
+  )
+
   // function to copy url including sequence to clipboard
   async function copyUrlToClipboard(event: MouseEvent) {
     try {
-      const url = getShareUrl()
-      console.log("URL: ", url)
+      const url = sharingUrl
       await navigator.clipboard.writeText(url)
       urlCopied = true
 
@@ -59,7 +60,7 @@
       <div
         class="mt-2 flex flex-col items-center space-y-2 space-x-2 sm:flex-row sm:space-y-0 sm:space-x-2"
       >
-        <input type="text" class="rounded border bg-gray-100 p-1" value={getShareUrl()} readonly />
+        <input type="text" class="rounded border bg-gray-100 p-1" value={sharingUrl} readonly />
         <button
           class="w-32 rounded bg-sky-800 p-1 text-white transition hover:bg-sky-700 focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
           onclick={copyUrlToClipboard}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7e2b8d1..a778433 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -206,9 +206,11 @@
     </svg>
   </button>
 {/if}
-<div style="display: {showShareButton ? 'block' : 'none'};">
-  <!-- Share Button Component -->
-  <ShareButton {sequence} />
+<div>
+  {#if showShareButton}
+    <!-- Share Button Component -->
+    <ShareButton {sequence} />
+  {/if}
 </div>
 
 <style>

From 9b714754e6cff369ecc7b8aa4ec1e6300898f242 Mon Sep 17 00:00:00 2001
From: Nele <n.heindorf@campus.tu-berlin.de>
Date: Mon, 8 Sep 2025 17:37:26 +0200
Subject: [PATCH 7/9] Update config files

---
 svelte.config.js | 4 +---
 vite.config.ts   | 5 +----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/svelte.config.js b/svelte.config.js
index 57205d1..05dfd49 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -20,9 +20,7 @@ const config = {
         base: process.argv.includes("dev") ? "" : process.env.BASE_PATH
       },
       resolve: {
-        alias: {
-          $lib: "/src/lib" // Define your aliases here
-        }
+        alias: {}
       }
     })
   }
diff --git a/vite.config.ts b/vite.config.ts
index 81d6bd5..44c44e7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,8 +4,5 @@ import { defineConfig } from "vite"
 
 export default defineConfig({
   plugins: [tailwindcss(), sveltekit()],
-  assetsInclude: "src/lib/assets/**/*.xsl",
-  build: {
-    sourcemap: true // enable sourcemaps for debugging
-  }
+  assetsInclude: "src/lib/assets/**/*.xsl"
 })

From f5bdf433481f0440a19736befc80e06b6338b8eb Mon Sep 17 00:00:00 2001
From: Nele <n.heindorf@campus.tu-berlin.de>
Date: Mon, 8 Sep 2025 18:45:10 +0200
Subject: [PATCH 8/9] Bind sequence to Carousel component to keep URL updated

---
 src/lib/components/Carousel.svelte | 17 +++++++++++++++--
 src/routes/+page.svelte            |  1 +
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
index afee8a4..fc0dc98 100644
--- a/src/lib/components/Carousel.svelte
+++ b/src/lib/components/Carousel.svelte
@@ -8,11 +8,13 @@
   let {
     index,
     focusPips,
-    isRolling = false
+    isRolling = false,
+    sequence = $bindable()
   }: {
     index: number
     focusPips: number | null
     isRolling?: boolean
+    sequence: number[]
   } = $props()
 
   let emblaApi: EmblaCarouselType
@@ -26,8 +28,19 @@
 
     // Attach event listener for slide change
     // settle: Runs when the carousel has settled after scroll has been triggered.
+    // use event listener to update sequence if focusPips change in Carousel
     emblaApi.on("settle", () => {
-      focusPips = emblaApi.selectedScrollSnap() + 1
+      // focusPips = emblaApi.selectedScrollSnap() + 1
+      const newFocusPips = emblaApi.selectedScrollSnap() + 1
+      // only update if pips actually changed
+      if (focusPips !== newFocusPips) {
+        focusPips = newFocusPips
+
+        if (sequence) {
+          sequence[index - 1] = newFocusPips
+          sequence = [...sequence]
+        }
+      }
     })
   }
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a778433..364da72 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -178,6 +178,7 @@
         <!-- Only apply the rolling effect to the first ten carousels -->
         <Carousel
           {index}
+          bind:sequence
           focusPips={sequence ? sequence[index - 1] : null}
           isRolling={index <= 10 ? isRolling : false}
         />

From aa183ede6226ab9329f3112329e19c64a87a04c1 Mon Sep 17 00:00:00 2001
From: Viktor Illmer <1476338+v-ji@users.noreply.github.com>
Date: Tue, 9 Sep 2025 14:25:56 +0200
Subject: [PATCH 9/9] Remove comment

---
 src/lib/components/ShareButton.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/lib/components/ShareButton.svelte b/src/lib/components/ShareButton.svelte
index a419059..4445292 100644
--- a/src/lib/components/ShareButton.svelte
+++ b/src/lib/components/ShareButton.svelte
@@ -36,11 +36,6 @@
 
 <!-- Share Button that opens dialogue for copying url with current sequence -->
 <div class="fixed right-6 bottom-6 flex items-center space-x-2">
-  <!-- {#if urlCopied}
-    <div class="rounded-full bg-sky-800 px-3 py-2 text-white shadow-lg">
-      {$locale === "de" ? "Link zum Teilen kopiert!" : "Link copied for sharing!"}
-    </div>
-  {/if} -->
   {#if showDialogue}
     <div
       transition:fade={{ duration: 200 }}