From 54309d06cf6d4570116a1b361e5df05b2be8fc3c Mon Sep 17 00:00:00 2001
From: Eclypsed <nicholas.tamassia@gmail.com>
Date: Sat, 20 Jan 2024 16:41:53 -0500
Subject: [PATCH] Layout is looking pretty slick now!

---
 src/lib/components/media/miniPlayer.svelte  | 118 ++++++++---------
 src/lib/components/utility/searchBar.svelte |   8 +-
 src/routes/(app)/+layout.svelte             | 134 +++++++++++---------
 src/routes/(app)/search/+page.svelte        |   1 +
 4 files changed, 138 insertions(+), 123 deletions(-)
 create mode 100644 src/routes/(app)/search/+page.svelte

diff --git a/src/lib/components/media/miniPlayer.svelte b/src/lib/components/media/miniPlayer.svelte
index 38a2833..20cea9f 100644
--- a/src/lib/components/media/miniPlayer.svelte
+++ b/src/lib/components/media/miniPlayer.svelte
@@ -17,71 +17,73 @@
 </script>
 
 {#if song && displayMode === 'horizontal'}
-    <div class="grid w-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden bg-black px-6 text-lg" style="height: 80px;" transition:slide={{ axis: 'y' }}>
-        <section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm">
-            <img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
-            <div class="flex h-full flex-col justify-center gap-1 overflow-hidden">
-                <span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
-                <span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;">
-                    {#each song.artists as artist}
-                        {@const listIndex = song.artists.indexOf(artist)}
-                        <a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a>
-                        {#if listIndex === song.artists.length - 2}
-                            <span class="mx-0.5 text-xs">&</span>
-                        {:else if listIndex < song.artists.length - 2}
-                            <span class="mr-0.5 text-xs">,</span>
-                        {/if}
-                    {/each}
-                </span>
-            </div>
-            <button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}>
-                {#if songLiked}
-                    <i class="fa-solid fa-heart text-fuchsia-400" />
-                {:else}
-                    <i class="fa-regular fa-heart text-neutral-400 hover:text-white" />
-                {/if}
-            </button>
-        </section>
-        <section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center">
-            <div class="flex h-6 items-center justify-center gap-4">
+    <div class="w-full p-4">
+        <div class="grid w-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden rounded-xl bg-neutral-950 px-6 text-lg" style="height: 80px;" transition:slide={{ axis: 'y' }}>
+            <section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm">
+                <img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
+                <div class="flex h-full flex-col justify-center gap-1 overflow-hidden">
+                    <span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
+                    <span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;">
+                        {#each song.artists as artist}
+                            {@const listIndex = song.artists.indexOf(artist)}
+                            <a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a>
+                            {#if listIndex === song.artists.length - 2}
+                                <span class="mx-0.5 text-xs">&</span>
+                            {:else if listIndex < song.artists.length - 2}
+                                <span class="mr-0.5 text-xs">,</span>
+                            {/if}
+                        {/each}
+                    </span>
+                </div>
+                <button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}>
+                    {#if songLiked}
+                        <i class="fa-solid fa-heart text-fuchsia-400" />
+                    {:else}
+                        <i class="fa-regular fa-heart text-neutral-400 hover:text-white" />
+                    {/if}
+                </button>
+            </section>
+            <section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center">
+                <div class="flex h-6 items-center justify-center gap-4">
+                    <IconButton halo={false}>
+                        <i slot="icon" class="fa-solid fa-backward-step" />
+                    </IconButton>
+                    <IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
+                        <i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
+                    </IconButton>
+                    <IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
+                        <i slot="icon" class="fa-solid fa-stop" />
+                    </IconButton>
+                    <IconButton halo={false}>
+                        <i slot="icon" class="fa-solid fa-forward-step" />
+                    </IconButton>
+                </div>
+                <div class="flex items-center gap-2 text-sm text-neutral-400">
+                    <div class="whitespace-nowrap">0:00</div>
+                    <Slider />
+                    <div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
+                </div>
+            </section>
+            <section class="flex h-full items-center justify-end gap-1 py-5">
+                <VolumeSlider bind:volume />
                 <IconButton halo={false}>
-                    <i slot="icon" class="fa-solid fa-backward-step" />
-                </IconButton>
-                <IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
-                    <i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
-                </IconButton>
-                <IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
-                    <i slot="icon" class="fa-solid fa-stop" />
+                    <i slot="icon" class="fa-solid fa-shuffle" />
                 </IconButton>
                 <IconButton halo={false}>
-                    <i slot="icon" class="fa-solid fa-forward-step" />
+                    <i slot="icon" class="fa-solid fa-repeat" />
                 </IconButton>
-            </div>
-            <div class="flex items-center gap-2 text-sm text-neutral-400">
-                <div class="whitespace-nowrap">0:00</div>
-                <Slider />
-                <div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
-            </div>
-        </section>
-        <section class="flex h-full items-center justify-end gap-1 py-5">
-            <VolumeSlider bind:volume />
-            <IconButton halo={false}>
-                <i slot="icon" class="fa-solid fa-shuffle" />
-            </IconButton>
-            <IconButton halo={false}>
-                <i slot="icon" class="fa-solid fa-repeat" />
-            </IconButton>
-            <IconButton halo={false}>
-                <i slot="icon" class="fa-solid fa-ellipsis-vertical" />
-            </IconButton>
-            <IconButton halo={false} on:click={() => (fullplayerOpen = !fullplayerOpen)}>
-                <i slot="icon" class="fa-solid {fullplayerOpen ? 'fa-caret-down' : 'fa-caret-up'}" />
-            </IconButton>
-        </section>
+                <IconButton halo={false}>
+                    <i slot="icon" class="fa-solid fa-ellipsis-vertical" />
+                </IconButton>
+                <IconButton halo={false} on:click={() => (fullplayerOpen = !fullplayerOpen)}>
+                    <i slot="icon" class="fa-solid {fullplayerOpen ? 'fa-caret-down' : 'fa-caret-up'}" />
+                </IconButton>
+            </section>
+        </div>
     </div>
 {:else if song && displayMode === 'vertical'}
     <div class="w-full p-2" style="height: 80px;" transition:slide={{ axis: 'y' }}>
-        <div class="flex h-full justify-between rounded-xl bg-slate-900 p-2.5">
+        <div class="flex h-full justify-between rounded-xl bg-neutral-950 p-2.5">
             <section class="flex gap-4">
                 <img class="h-full rounded-xl object-contain" src={song.image} alt="{song.name} thumbnail" />
                 <div class="flex h-full flex-col justify-center gap-1 overflow-hidden text-lg">
diff --git a/src/lib/components/utility/searchBar.svelte b/src/lib/components/utility/searchBar.svelte
index 28c7b78..7d0d1a4 100644
--- a/src/lib/components/utility/searchBar.svelte
+++ b/src/lib/components/utility/searchBar.svelte
@@ -24,7 +24,7 @@
 <search
     role="search"
     bind:this={searchBar}
-    class="relative flex h-full w-full max-w-xl items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-1.5"
+    class="relative flex h-full w-full items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent bg-black px-4 py-2"
     on:focusout={() => {
         setTimeout(() => {
             // This is a completely stupid thing you have to do, if there is not timeout, the active element will be the body of the document and not the newly focused element
@@ -68,9 +68,3 @@
         </div>
     {/if}
 </search>
-
-<style>
-    search {
-        background-color: rgba(100, 100, 100, 0.25);
-    }
-</style>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index f1aece9..5680b7b 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,5 +1,4 @@
 <script>
-    import Navbar from '$lib/components/utility/navbar.svelte'
     import MiniPlayer from '$lib/components/media/miniPlayer.svelte'
     import { fly, fade } from 'svelte/transition'
     import { goto } from '$app/navigation'
@@ -12,17 +11,13 @@
             header: 'Home',
             icon: 'fa-solid fa-house',
         },
-        '/artist': {
-            header: 'Artists',
-            icon: 'fa-solid fa-guitar',
-        },
-        '/playlist': {
-            header: 'Playlists',
-            icon: 'fa-solid fa-bars-staggered',
-        },
         '/library': {
             header: 'Libray',
-            icon: 'fa-solid fa-book-open',
+            icon: 'fa-solid fa-bars-staggered',
+        },
+        '/search': {
+            header: 'Search',
+            icon: 'fa-solid fa-search',
         },
     }
 
@@ -49,66 +44,94 @@
 
     const calculateBar = (activeTab) => {
         if (activeTab && indicatorBar && tabList) {
-            const listRect = tabList.getBoundingClientRect()
-            const tabRec = activeTab.getBoundingClientRect()
-            indicatorBar.style.top = `${listRect.height}px`
-            if (direction === 1) {
-                indicatorBar.style.right = `${listRect.right - tabRec.right}px`
-                setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), pageTransitionTime)
+            if ($pageWidth >= 768) {
+                const listRect = tabList.getBoundingClientRect()
+                const tabRec = activeTab.getBoundingClientRect()
+                if (direction === 1) {
+                    indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`
+                    setTimeout(() => (indicatorBar.style.top = `${tabRec.top - listRect.top}px`), pageTransitionTime)
+                } else {
+                    indicatorBar.style.top = `${tabRec.top - listRect.top}px`
+                    setTimeout(() => (indicatorBar.style.bottom = `${listRect.bottom - tabRec.bottom}px`), pageTransitionTime)
+                }
             } else {
-                indicatorBar.style.left = `${tabRec.left - listRect.left}px`
-                setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), pageTransitionTime)
+                const listRect = tabList.getBoundingClientRect()
+                const tabRec = activeTab.getBoundingClientRect()
+                if (direction === 1) {
+                    indicatorBar.style.right = `${listRect.right - tabRec.right}px`
+                    setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), pageTransitionTime)
+                } else {
+                    indicatorBar.style.left = `${tabRec.left - listRect.left}px`
+                    setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), pageTransitionTime)
+                }
             }
         }
     }
 </script>
 
-<div id="main-grid" class="h-full">
-    <Navbar />
-    <section id="content-grid" class="overflow-hidden">
-        <section id="sidebar">
-            {#if $pageWidth >= 768}
-                <div class="mr-4 flex h-full flex-col gap-8 rounded-lg px-3 py-6">
-                    {#each Object.entries(contentTabs) as [page, tabData]}
-                        <button
-                            class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} aspect-square w-14 transition-colors"
-                            disabled={data.url === page}
-                            on:click={() => goto(page)}
-                        >
-                            <i class="{tabData.icon} text-xl" />
-                            <span class="text-xs">{tabData.header}</span>
-                        </button>
-                    {/each}
-                    <!-- {#if data.url in contentTabs}
-                            <div bind:this={indicatorBar} transition:fade class="absolute h-0.5 bg-lazuli-primary transition-all duration-300 ease-in-out" />
-                        {/if} -->
-                </div>
+{#if $pageWidth >= 768}
+    <div id="content-grid" class="h-full overflow-hidden">
+        <section class="relative mr-4 flex h-full flex-col gap-6 rounded-lg px-3 py-6" bind:this={tabList}>
+            {#each Object.entries(contentTabs) as [page, tabData]}
+                {#if data.url === page}
+                    <button bind:this={activeTab} class="pointer-events-none aspect-square w-14 text-white transition-colors" disabled="true">
+                        <i class="{tabData.icon} text-xl" />
+                        <span class="text-xs">{tabData.header}</span>
+                    </button>
+                {:else}
+                    <button class="aspect-square w-14 text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
+                        <i class="{tabData.icon} text-xl" />
+                        <span class="text-xs">{tabData.header}</span>
+                    </button>
+                {/if}
+            {/each}
+            {#if data.url in contentTabs}
+                <div bind:this={indicatorBar} transition:fade class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
             {/if}
         </section>
+        <section class="no-scrollbar relative overflow-y-scroll">
+            {#key previousPage}
+                <div in:fly={{ y: -50 * direction, duration: pageTransitionTime, delay: pageTransitionTime }} out:fly={{ y: 50 * direction, duration: pageTransitionTime }} class="absolute w-full pr-[5vw] pt-16">
+                    <slot />
+                </div>
+            {/key}
+        </section>
+        <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
+            <MiniPlayer displayMode={'horizontal'} />
+        </footer>
+    </div>
+{:else}
+    <div class="h-full overflow-hidden">
         {#key previousPage}
             <section
-                id="page"
                 in:fly={{ x: 200 * direction, duration: pageTransitionTime, delay: pageTransitionTime }}
                 out:fly={{ x: -200 * direction, duration: pageTransitionTime }}
-                class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-4 md:pl-[0rem]"
+                class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-16"
             >
                 <slot />
             </section>
         {/key}
-    </section>
-    <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
-        <MiniPlayer displayMode={$pageWidth > 768 ? 'horizontal' : 'vertical'} />
-        {#if $pageWidth < 768}
-            <h1 id="tabList" class="relative flex w-full items-center justify-around bg-black">
+        <footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
+            <MiniPlayer displayMode={'vertical'} />
+            <div bind:this={tabList} id="bottom-tab-list" class="relative flex w-full items-center justify-around bg-black">
                 {#each Object.entries(contentTabs) as [page, tabData]}
-                    <button class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} transition-colors" disabled={data.url === page} on:click={() => goto(page)}>
-                        <i class={tabData.icon} />
-                    </button>
+                    {#if data.url === page}
+                        <button bind:this={activeTab} class="pointer-events-none text-white transition-colors" disabled="true">
+                            <i class={tabData.icon} />
+                        </button>
+                    {:else}
+                        <button class="text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
+                            <i class={tabData.icon} />
+                        </button>
+                    {/if}
                 {/each}
-            </h1>
-        {/if}
-    </footer>
-</div>
+                {#if data.url in contentTabs}
+                    <div bind:this={indicatorBar} transition:fade class="absolute bottom-0 h-1 rounded-full bg-white transition-all duration-300 ease-in-out" />
+                {/if}
+            </div>
+        </footer>
+    </div>
+{/if}
 
 <style>
     #content-grid {
@@ -116,12 +139,7 @@
         grid-template-columns: max-content auto;
         grid-template-rows: 100%;
     }
-    #main-grid {
-        display: grid;
-        grid-template-rows: max-content auto;
-        grid-template-columns: 100%;
-    }
-    #tabList {
+    #bottom-tab-list {
         padding: 16px 0px;
         font-size: 20px;
         line-height: 28px;
diff --git a/src/routes/(app)/search/+page.svelte b/src/routes/(app)/search/+page.svelte
new file mode 100644
index 0000000..a16595c
--- /dev/null
+++ b/src/routes/(app)/search/+page.svelte
@@ -0,0 +1 @@
+<h1>Search Page</h1>