From 4ae54aa14c9c2ff9e4b6a437ac15be625c859068 Mon Sep 17 00:00:00 2001
From: Eclypsed <nicholas.tamassia@gmail.com>
Date: Mon, 29 Jan 2024 01:54:21 -0500
Subject: [PATCH] The behaviour of css overflow is so fucking stupid

---
 src/routes/(app)/+layout.svelte | 75 +++++++++++++++++----------------
 src/routes/(app)/+layout.ts     | 38 ++++++++++++++++-
 src/routes/(app)/+page.svelte   |  9 +++-
 3 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index fb63d67..cb745d1 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -59,46 +59,52 @@
 </script>
 
 {#if $pageWidth >= 768}
-    <div id="content-grid" class="grid h-full grid-rows-1 gap-8 overflow-hidden">
-        <div id="sidebar" class="relative grid h-full grid-cols-1 gap-6 overflow-clip p-3 pt-12" bind:this={tabList}>
-            {#each data.tabs.filter((tab) => tab.type === 'nav') as nav, index}
-                <button
-                    class="navTab grid aspect-square w-14 place-items-center transition-colors"
-                    bind:this={data.tabs[index].button}
-                    disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)}
-                    on:click={() => {
-                        calculateDirection(nav)
-                        goto(nav.pathname)
-                    }}
-                >
-                    <span class="pointer-events-none flex flex-col gap-2 text-xs">
-                        <i class="{nav.icon} text-xl" />
-                        {nav.name}
-                    </span>
-                </button>
-            {/each}
-            <section class="no-scrollbar flex flex-col gap-4 overflow-y-scroll px-1">
-                {#each data.tabs.filter((tab) => tab.type === 'playlist') as playlist}
+    <div class="grid h-full grid-rows-1 gap-8 overflow-hidden">
+        <div class="no-scrollbar fixed left-0 top-0 z-10 grid h-full grid-cols-1 grid-rows-[min-content_auto] gap-6 p-3 pt-12" bind:this={tabList}>
+            <div class="flex flex-col gap-6">
+                {#each data.tabs.filter((tab) => tab.type === 'nav') as nav, index}
                     <button
-                        title={playlist.name}
-                        disabled={new URLSearchParams(data.url.search).get('playlist') === new URLSearchParams(playlist.pathname.split('?')[1]).get('playlist')}
-                        class="playlistTab aspect-square w-full rounded-lg border-white bg-cover bg-center transition-all"
-                        style="background-image: url({playlist.icon});"
+                        class="navTab grid aspect-square w-14 place-items-center transition-colors"
+                        bind:this={data.tabs[index].button}
+                        disabled={inPathnameHeirarchy(data.url.pathname, nav.pathname)}
                         on:click={() => {
-                            calculateDirection(playlist)
-                            goto(playlist.pathname)
+                            calculateDirection(nav)
+                            goto(nav.pathname)
                         }}
-                    ></button>
+                    >
+                        <span class="pointer-events-none flex flex-col gap-2 text-xs">
+                            <i class="{nav.icon} text-xl" />
+                            {nav.name}
+                        </span>
+                    </button>
                 {/each}
-            </section>
-            <div bind:this={indicatorBar} class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
+                <div bind:this={indicatorBar} class="absolute left-0 w-[0.2rem] rounded-full bg-white transition-all duration-300 ease-in-out" />
+            </div>
+            <div class="no-scrollbar flex flex-col gap-6 overflow-y-scroll">
+                {#each data.tabs.filter((tab) => tab.type === 'playlist') as playlist}
+                    <div class="playlistTab-wrapper flex items-center gap-1">
+                        <button
+                            title={playlist.name}
+                            disabled={new URLSearchParams(data.url.search).get('playlist') === new URLSearchParams(playlist.pathname.split('?')[1]).get('playlist')}
+                            class="playlistTab relative aspect-square w-14 rounded-lg bg-cover bg-center transition-all"
+                            style="background-image: url({playlist.icon});"
+                            on:click={() => {
+                                calculateDirection(playlist)
+                                goto(playlist.pathname)
+                            }}
+                        >
+                        </button>
+                        <span class="translate-x-3 overflow-clip text-ellipsis whitespace-nowrap rounded-md bg-slate-600 px-2 py-1 text-sm">{playlist.name}</span>
+                    </div>
+                {/each}
+            </div>
         </div>
         <section class="no-scrollbar relative overflow-y-scroll">
             {#key data.url}
                 <div
                     in:fly={{ y: -50 * directionMultiplier, duration: pageTransitionTime, delay: pageTransitionTime }}
                     out:fly={{ y: 50 * directionMultiplier, duration: pageTransitionTime }}
-                    class="absolute w-full pr-[5vw] pt-16"
+                    class="absolute w-full px-[clamp(7rem,_5vw,_24rem)] pt-16"
                 >
                     <slot />
                 </div>
@@ -135,18 +141,15 @@
 {/if}
 
 <style>
-    #content-grid {
-        grid-template-columns: max-content auto;
-    }
-    #sidebar {
-        grid-template-rows: repeat(4, min-content) auto;
-    }
     .navTab:not(:disabled) {
         color: rgb(163 163, 163);
     }
     .navTab:not(:disabled):hover {
         color: var(--lazuli-primary);
     }
+    .playlistTab-wrapper:hover > span {
+        display: block;
+    }
     .playlistTab:not(:disabled):not(:hover) {
         filter: brightness(50%);
     }
diff --git a/src/routes/(app)/+layout.ts b/src/routes/(app)/+layout.ts
index 7e49a62..ec78f46 100644
--- a/src/routes/(app)/+layout.ts
+++ b/src/routes/(app)/+layout.ts
@@ -8,7 +8,7 @@ export interface Tab {
     button?: HTMLButtonElement
 }
 
-export const load: LayoutLoad = ({ url }) => {
+export const load: LayoutLoad = () => {
     const navTabs: Tab[] = [
         {
             type: 'nav',
@@ -49,6 +49,42 @@ export const load: LayoutLoad = ({ url }) => {
             name: 'Fionaredica',
             icon: 'https://f4.bcbits.com/img/a2436961975_10.jpg',
         },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=Machinate',
+            name: 'Machinate',
+            icon: 'https://f4.bcbits.com/img/a3587136348_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=MAGGOD',
+            name: 'MAGGOD',
+            icon: 'https://f4.bcbits.com/img/a3641603617_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=The Requiem',
+            name: 'The Requiem',
+            icon: 'https://f4.bcbits.com/img/a2458067285_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=IRREPARABLE HARDCORE IS BACK 2 -Horai Gekka-',
+            name: 'IRREPARABLE HARDCORE IS BACK 2 -Horai Gekka-',
+            icon: 'https://f4.bcbits.com/img/a1483629734_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=妄殺オタクティクス',
+            name: '妄殺オタクティクス',
+            icon: 'https://f4.bcbits.com/img/a1653481367_10.jpg',
+        },
+        {
+            type: 'playlist',
+            pathname: '/library?playlist=Collapse',
+            name: 'Collapse',
+            icon: 'https://f4.bcbits.com/img/a0524413952_10.jpg',
+        },
     ]
 
     return { tabs: navTabs.concat(playlistTabs) }
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 5982b0a..e83d2cc 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,2 +1,7 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<div id="test-box" class="h-[200vh]"></div>
+
+<style>
+    #test-box {
+        background: linear-gradient(to bottom, white, black);
+    }
+</style>