feat(ui): Scroll notes into view on first time

source/ui/src/lib/Notes.svelte

@@ -4,6 +4,8 @@ import { fade } from 'svelte/transition';
 import { audioBlob, notesImage, style } from './stores';
 import { styles } from './config.json';
 
+let section: HTMLElement;
+
 let currentTime: number;
 let duration: number;
 let paused = true;
@@ -29,6 +31,8 @@ onMount(() => {
       currentTime = 0;
     });
   }
+
+  section.scrollIntoView({ behavior: 'smooth', block: 'start' });
 });
 
 afterUpdate((): void => {
@@ -57,46 +61,44 @@ const touchMove = (event: TouchEvent): void => {
   currentTime = (duration * (event.touches[0].clientX - left)) / (right - left);
 };
 
-const keyDown = (e: KeyboardEvent): void => {
-  e.preventDefault();
+const keyDown = (event: KeyboardEvent): void => {
+  event.preventDefault();
 
-  if (e.code === 'Space') {
+  if (event.code === 'Space') {
     paused = !paused;
   }
-  if (e.code === 'ArrowLeft') {
+  if (event.code === 'ArrowLeft') {
     currentTime = currentTime >= 1 ? currentTime - 1 : 0;
   }
-  if (e.code === 'ArrowRight') {
+  if (event.code === 'ArrowRight') {
     currentTime = currentTime <= duration - 1 ? currentTime + 1 : duration;
   }
 };
 </script>
 
-{#if $audioBlob}
-  <section transition:fade>
-    <img class="notes" src={$notesImage} alt="" bind:this={visualisation} />
-    <div
-      bind:this={player}
-      class="player"
-      style:width={imageWidth + 'px'}
-      style:height={imageHeight + 'px'}
-      on:mousemove={mouseMove}
-      on:touchmove|preventDefault={touchMove}
-      on:keydown={keyDown}
-      on:click={() => (paused = !paused)}
-      tabindex="0"
-    >
-      <audio bind:currentTime bind:duration bind:paused src={$audioBlob} />
-      <div class="handle" style:transform="translate({imageWidth * (currentTime / duration)}px, -2%)" />
-      {#if paused}
-        <img class="play-button" src="static/play.svg" alt="Play button" draggable="false" transition:fade />
-      {/if}
-    </div>
-    <a href={$audioBlob} download={`${styles[$style]} Composition - AI Guru ft. Hugging Face.wav`} class="download"
-      >Download</a
-    >
-  </section>
-{/if}
+<section bind:this={section} transition:fade>
+  <img class="notes" src={$notesImage} alt="" bind:this={visualisation} />
+  <div
+    bind:this={player}
+    class="player"
+    style:width={imageWidth + 'px'}
+    style:height={imageHeight + 'px'}
+    on:mousemove={mouseMove}
+    on:touchmove|preventDefault={touchMove}
+    on:keydown={keyDown}
+    on:click={() => (paused = !paused)}
+    tabindex="0"
+  >
+    <audio bind:currentTime bind:duration bind:paused src={$audioBlob} />
+    <div class="handle" style:transform="translate({imageWidth * (currentTime / duration)}px, -2%)" />
+    {#if paused}
+      <img class="play-button" src="static/play.svg" alt="Play button" draggable="false" transition:fade />
+    {/if}
+  </div>
+  <a href={$audioBlob} download={`${styles[$style]} Composition - AI Guru ft. Hugging Face.wav`} class="download"
+    >Download</a
+  >
+</section>
 
 <style>
 section {

source/ui/src/routes/index.svelte

@@ -5,6 +5,7 @@ import TemperatureOptions from '$lib/TemperatureOptions.svelte';
 import ComposeButton from '$lib/ComposeButton.svelte';
 import Notes from '$lib/Notes.svelte';
 import Tokens from '$lib/Tokens.svelte';
+import { audioBlob } from '$lib/stores';
 </script>
 
 <main>
@@ -25,8 +26,10 @@ import Tokens from '$lib/Tokens.svelte';
     <TemperatureOptions />
   </section>
   <ComposeButton />
-  <Notes />
-  <Tokens />
+  {#if $audioBlob}
+    <Notes />
+    <Tokens />
+  {/if}
 </main>
 
 <style>