Did a lot of screwing around with the layout, actually starting to look decent now

src/lib/components/media/miniPlayer.svelte

@@ -4,6 +4,7 @@
     import IconButton from '$lib/components/utility/iconButton.svelte'
     import VolumeSlider from '$lib/components/utility/volumeSlider.svelte'
     import Slider from '$lib/components/utility/slider.svelte'
+    import { formatDuration } from '$lib/utils/utils.js'
     import { currentlyPlaying } from '$lib/utils/stores.js'
     import { slide } from 'svelte/transition'
 
@@ -11,22 +12,12 @@
 
     let volume
     let songLiked = false,
-        songPlaying = false
+        songPlaying = false,
-
+        fullplayerOpen = false
-    const formatDuration = (timeMilliseconds) => {
-        const seconds = Math.floor((timeMilliseconds / 1000) % 60)
-        const minutes = Math.floor((timeMilliseconds / 1000 / 60) % 60)
-
-        return [minutes.toString(), seconds.toString().padStart(2, '0')].join(':')
-    }
 </script>
 
-{#if song}
+{#if song && displayMode === 'horizontal'}
-    <div id="player-wrapper" class="relative w-full" transition:slide={{ axis: 'y' }}>
+    <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' }}>
-        {#if displayMode === 'vertical'}
-            <h1>Vertical Mode</h1>
-        {:else}
-            <div class="grid h-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden bg-black px-6 text-lg">
         <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">
@@ -83,14 +74,33 @@
             <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>
+{: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">
+            <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">
+                    <span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
+                    <span class="overflow-hidden text-ellipsis text-neutral-400">{Array.from(song.artists, (artist) => artist.name).join(', ')}</span>
+                </div>
+            </section>
+            <section class="flex h-full justify-end gap-6 p-4 text-3xl">
+                <button class="grid aspect-square h-full place-items-center 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>
+                <IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
+                    <i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
+                </IconButton>
+            </section>
+        </div>
     </div>
 {/if}
-
-<style>
-    #player-wrapper {
-        height: 80px;
-    }
-</style>

src/lib/components/utility/footer.svelte

@@ -1,12 +0,0 @@
-<footer class="sticky bottom-0 flex flex-col-reverse">
-    <slot name="content" />
-</footer>
-
-<style>
-    footer {
-        padding-top: 16px;
-        padding-bottom: 16px;
-        font-size: 20px;
-        line-height: 28px;
-    }
-</style>

src/lib/components/utility/navbar.svelte

@@ -1,37 +1,25 @@
 <script>
     import IconButton from './iconButton.svelte'
+    import SearchBar from './searchBar.svelte'
     import { goto } from '$app/navigation'
     import { page } from '$app/stores'
 </script>
 
-<nav class="sticky top-0 z-10 grid grid-cols-[1fr_auto_1fr] items-center duration-300">
+<nav class="sticky top-0 z-10 flex items-center justify-between p-3 text-base duration-300" style="height: 4rem;">
-    <section class="flex h-full">
+    <SearchBar />
-        <IconButton on:click={() => goto('/settings')}>
+    <!-- <section class="flex h-14">
-            <i slot="icon" class="fa-solid fa-user-gear" />
+        <IconButton halo={false} on:click={() => goto('/settings')}>
+            <i slot="icon" class="fa-solid fa-user" />
         </IconButton>
         {#if $page.url.pathname !== '/'}
-            <IconButton on:click={() => history.back()}>
+            <IconButton halo={false} on:click={() => history.back()}>
                 <i slot="icon" class="fa-solid fa-arrow-left" />
             </IconButton>
-        {/if}
+            <IconButton halo={false}>
-    </section>
-    <section class="flex h-full justify-center">
-        <slot name="center-content" />
-    </section>
-    <section class="flex h-full justify-end">
-        <IconButton>
                 <i slot="icon" class="fa-solid fa-magnifying-glass" />
             </IconButton>
-    </section>
+        {/if}
+    </section> -->
 </nav>
 
-<style>
+<!-- New Idea: We're going to do a search button, but it will toggle a floating search bar that flys in from the top and autofocuses -->
-    nav {
-        padding: 18px 2rem;
-        font-size: 20px;
-        line-height: 28px;
-    }
-    section {
-        gap: 24px;
-    }
-</style>

src/lib/components/utility/searchBar.svelte

@@ -24,7 +24,7 @@
 <search
     role="search"
     bind:this={searchBar}
-    class="relative my-2.5 flex w-full 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 max-w-xl items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-1.5"
     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

src/lib/utils/utils.js

@@ -13,6 +13,13 @@ export const setVolume = (volume) => {
     if (Number.isFinite(volume)) localStorage.setItem('volume', Math.round(volume))
 }
 
+export const formatDuration = (timeMilliseconds) => {
+    const seconds = Math.floor((timeMilliseconds / 1000) % 60)
+    const minutes = Math.floor((timeMilliseconds / 1000 / 60) % 60)
+
+    return [minutes.toString(), seconds.toString().padStart(2, '0')].join(':')
+}
+
 export class JellyfinUtils {
     static #AUDIO_PRESETS = {
         default: {

src/routes/(app)/+layout.svelte

@@ -1,8 +1,8 @@
 <script>
     import Navbar from '$lib/components/utility/navbar.svelte'
-    import Footer from '$lib/components/utility/footer.svelte'
     import MiniPlayer from '$lib/components/media/miniPlayer.svelte'
     import { fly, fade } from 'svelte/transition'
+    import { goto } from '$app/navigation'
     import { pageWidth } from '$lib/utils/stores.js'
 
     export let data
@@ -26,6 +26,8 @@
         },
     }
 
+    const pageTransitionTime = 200
+
     let previousPage = data.url
     let direction = 1
     $: calculateDirection(data.url)
@@ -46,66 +48,82 @@
     $: calculateBar(activeTab)
 
     const calculateBar = (activeTab) => {
-        if (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`), 300)
+                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`), 300)
+                setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), pageTransitionTime)
             }
         }
     }
 </script>
 
-<div class="flex h-full flex-col">
+<div id="main-grid" class="h-full">
-    {#if $pageWidth > 768}
-        <Navbar>
-            <h1 slot="center-content" bind:this={tabList} class="relative flex items-center gap-12 text-lg">
-                {#each Object.entries(contentTabs) as [page, tabData]}
-                    {#if data.url === page}
-                        <span bind:this={activeTab} class="pointer-events-none">{tabData.header}</span>
-                    {:else}
-                        <a class="text-neutral-400 hover:text-lazuli-primary" href={page}>{tabData.header}</a>
-                    {/if}
-                {/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}
-            </h1>
-        </Navbar>
-    {:else}
     <Navbar />
-    {/if}
+    <section id="content-grid" class="overflow-hidden">
-    <div class="relative flex-1 overflow-hidden">
+        <section id="sidebar">
-        {#key previousPage}
+            {#if $pageWidth >= 768}
-            <div in:fly={{ x: 200 * direction, duration: 300, delay: 300 }} out:fly={{ x: -200 * direction, duration: 300 }} class="no-scrollbar h-full overflow-y-scroll px-8 py-4 md:px-32">
+                <div class="mr-4 flex h-full flex-col gap-8 rounded-lg px-3 py-6">
-                <slot />
-            </div>
-        {/key}
-        <div class="absolute bottom-0 w-full">
-            <MiniPlayer displayMode={$pageWidth > 768 ? 'horizontal' : 'vertical'} />
-        </div>
-    </div>
-    {#if $pageWidth < 768}
-        <Footer>
-            <section slot="content" class="flex items-center justify-center" style="height: 32px;">
-                <h1 bind:this={tabList} class="relative flex w-full items-center justify-around">
                     {#each Object.entries(contentTabs) as [page, tabData]}
-                        {#if data.url === page}
+                        <button
-                            <span bind:this={activeTab} class="pointer-events-none"><i class={tabData.icon} /></span>
+                            class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} aspect-square w-14 transition-colors"
-                        {:else}
+                            disabled={data.url === page}
-                            <a class="text-neutral-400 hover:text-lazuli-primary" href={page}><i class={tabData.icon} /></a>
+                            on:click={() => goto(page)}
-                        {/if}
+                        >
+                            <i class="{tabData.icon} text-xl" />
+                            <span class="text-xs">{tabData.header}</span>
+                        </button>
                     {/each}
-                    {#if data.url in contentTabs}
+                    <!-- {#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}
+                        {/if} -->
-                </h1>
-            </section>
-        </Footer>
-    {/if}
                 </div>
+            {/if}
+        </section>
+        {#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]"
+            >
+                <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">
+                {#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>
+                {/each}
+            </h1>
+        {/if}
+    </footer>
+</div>
+
+<style>
+    #content-grid {
+        display: grid;
+        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 {
+        padding: 16px 0px;
+        font-size: 20px;
+        line-height: 28px;
+    }
+</style>

src/routes/+layout.svelte

@@ -37,7 +37,7 @@
 
 <style>
     #background-gradient {
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), black);
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), black);
     }
     #background-image {
         mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.3));