Redoing account section

src/hooks.server.js

@@ -4,7 +4,7 @@ import jwt from 'jsonwebtoken'
 
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
-    const nonProtectedRoutes = ['/login']
+    const nonProtectedRoutes = ['/login', '/api']
     const urlpath = event.url.pathname
 
     if (urlpath.startsWith('/api') && event.request.headers.get('apikey') !== SECRET_INTERNAL_API_KEY && event.url.searchParams.get('apikey') !== SECRET_INTERNAL_API_KEY) {

src/lib/components/utility/navbar.svelte

@@ -1,25 +0,0 @@
-<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 flex items-center justify-between p-3 text-base duration-300" style="height: 4rem;">
-    <SearchBar />
-    <!-- <section class="flex h-14">
-        <IconButton halo={false} on:click={() => goto('/settings')}>
-            <i slot="icon" class="fa-solid fa-user" />
-        </IconButton>
-        {#if $page.url.pathname !== '/'}
-            <IconButton halo={false} on:click={() => history.back()}>
-                <i slot="icon" class="fa-solid fa-arrow-left" />
-            </IconButton>
-            <IconButton halo={false}>
-                <i slot="icon" class="fa-solid fa-magnifying-glass" />
-            </IconButton>
-        {/if}
-    </section> -->
-</nav>
-
-<!-- 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 -->

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

@@ -11,14 +11,18 @@
             header: 'Home',
             icon: 'fa-solid fa-house',
         },
-        '/library': {
-            header: 'Libray',
-            icon: 'fa-solid fa-bars-staggered',
+        '/account': {
+            header: data.username,
+            icon: 'fa-solid fa-user',
         },
         '/search': {
             header: 'Search',
             icon: 'fa-solid fa-search',
         },
+        '/library': {
+            header: 'Libray',
+            icon: 'fa-solid fa-bars-staggered',
+        },
     }
 
     const pageTransitionTime = 200
@@ -71,17 +75,21 @@
 
 {#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}>
+        <section class="relative mr-10 flex h-full flex-col gap-6 rounded-lg px-3 py-12" 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 bind:this={activeTab} class="pointer-events-none grid aspect-square w-14 place-items-center text-white transition-colors" disabled="true">
+                        <span class="text-xs">
+                            <i class="{tabData.icon} mb-2 text-xl" />
+                            {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 class="grid aspect-square w-14 place-items-center text-neutral-400 transition-colors hover:text-lazuli-primary" on:click={() => goto(page)}>
+                        <span class="text-xs">
+                            <i class="{tabData.icon} mb-2 text-xl" />
+                            {tabData.header}
+                        </span>
                     </button>
                 {/if}
             {/each}

src/routes/(app)/account/+page.svelte

@@ -0,0 +1,30 @@
+<script>
+    import IconButton from '$lib/components/utility/iconButton.svelte'
+
+    export let data
+</script>
+
+<main class="flex flex-col gap-8">
+    <section class="flex items-center justify-between text-xl">
+        <div class="flex items-center gap-4">
+            <div class="grid aspect-square h-36 place-items-center rounded-full bg-neutral-800">
+                <i class="fa-solid fa-user text-6xl text-neutral-400" />
+            </div>
+            <div>
+                <div>{data.username}</div>
+                <div class="text-base text-neutral-400">Other info about the user</div>
+            </div>
+        </div>
+        <div class="flex h-12 gap-4">
+            <IconButton>
+                <i slot="icon" class="fa-solid fa-gear" />
+            </IconButton>
+            <IconButton>
+                <i slot="icon" class="fa-solid fa-right-from-bracket" />
+            </IconButton>
+        </div>
+    </section>
+    <section>
+        <div>This is where things like history would go</div>
+    </section>
+</main>

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

@@ -1,68 +1,22 @@
 <script>
     import IconButton from '$lib/components/utility/iconButton.svelte'
-    import { goto } from '$app/navigation'
-    import { page } from '$app/stores'
-
-    const settingRoutes = {
-        connections: {
-            displayName: 'Connections',
-            uri: '/settings/connections',
-            icon: 'fa-solid fa-circle-nodes',
-        },
-        // devices: {
-        //     displayName: 'Devices',
-        //     uri: '/settings/devices',
-        //     icon: 'fa-solid fa-mobile-screen',
-        // },
-    }
 </script>
 
-<main class="mx-auto grid h-full max-w-screen-xl gap-8 p-8">
-    <nav class="h-full rounded-lg p-6">
-        <h1 class="flex h-6 justify-between text-neutral-400">
-            <span>
-                <i class="fa-solid fa-gear" />
-                Settings
-            </span>
-            {#if $page.url.pathname.split('/').at(-1) !== 'settings'}
-                <IconButton on:click={() => goto('/settings')}>
-                    <i slot="icon" class="fa-solid fa-caret-left" />
+<main class="h-full">
+    <h1 class="sticky top-0 grid grid-cols-[1fr_auto_1fr] grid-rows-1 items-center text-2xl">
+        <IconButton on:click={() => history.back()}>
+            <i slot="icon" class="fa-solid fa-arrow-left" />
         </IconButton>
-            {/if}
+        <span>Account</span>
     </h1>
-        <ol class="ml-2 mt-4 flex flex-col gap-3 border-2 border-transparent border-l-neutral-500 px-2">
-            {#each Object.values(settingRoutes) as route}
-                <li>
-                    {#if $page.url.pathname === route.uri}
-                        <div class="rounded-lg bg-neutral-500 px-3 py-1">
-                            <i class={route.icon} />
-                            {route.displayName}
-                        </div>
-                    {:else}
-                        <a href={route.uri} class="block rounded-lg px-3 py-1 opacity-50 hover:bg-neutral-700">
-                            <i class={route.icon} />
-                            {route.displayName}
-                        </a>
-                    {/if}
-                </li>
-            {/each}
-        </ol>
-    </nav>
-    <div class="relative h-full overflow-y-scroll rounded-lg">
+    <section class="px-[5vw]">
         <slot />
-    </div>
+    </section>
 </main>
 
 <style>
-    main {
-        grid-template-columns: 20rem auto;
-    }
-    nav {
-        background-color: rgba(82, 82, 82, 0.25);
-    }
-    i {
-        text-align: center;
-        width: 1rem;
-        margin-right: 0.2rem;
+    h1 {
+        height: 80px;
+        padding: 16px 5vw;
     }
 </style>

src/routes/(settings)/settings/+page.svelte

@@ -1,13 +1,50 @@
-<!-- This is template for reference -->
 <script>
+    import IconButton from '$lib/components/utility/iconButton.svelte'
+    import { goto } from '$app/navigation'
+
+    export let data
+
+    const settingRoutes = {
+        connections: {
+            displayName: 'Connections',
+            uri: '/settings/connections',
+            icon: 'fa-solid fa-circle-nodes',
+        },
+        // devices: {
+        //     displayName: 'Devices',
+        //     uri: '/settings/devices',
+        //     icon: 'fa-solid fa-mobile-screen',
+        // },
+    }
 </script>
 
-<section></section>
-
-<style>
-    section {
-        border-radius: 0.5rem;
-        background-color: rgba(82, 82, 82, 0.25);
-        height: 24rem;
-    }
-</style>
+<nav class="h-full rounded-lg bg-neutral-950 p-6">
+    <h1 class="flex h-6 justify-between text-neutral-400">
+        <span>
+            <i class="fa-solid fa-gear" />
+            Settings
+        </span>
+        {#if data.url.split('/').at(-1) !== 'settings'}
+            <IconButton on:click={() => goto('/settings')}>
+                <i slot="icon" class="fa-solid fa-caret-left" />
+            </IconButton>
+        {/if}
+    </h1>
+    <ol class="ml-2 mt-4 flex flex-col gap-3 border-2 border-transparent border-l-neutral-500 px-2">
+        {#each Object.values(settingRoutes) as route}
+            <li>
+                {#if data.url === route.uri}
+                    <div class="rounded-lg bg-neutral-500 px-3 py-1">
+                        <i class={route.icon} />
+                        {route.displayName}
+                    </div>
+                {:else}
+                    <a href={route.uri} class="block rounded-lg px-3 py-1 opacity-50 hover:bg-neutral-700">
+                        <i class={route.icon} />
+                        {route.displayName}
+                    </a>
+                {/if}
+            </li>
+        {/each}
+    </ol>
+</nav>

src/routes/+layout.server.js

@@ -0,0 +1,8 @@
+/** @type {import('./$types').LayoutLoad} */
+export const load = ({ url, locals }) => {
+    return {
+        url: url.pathname,
+        userId: locals.userId,
+        username: locals.username,
+    }
+}

src/routes/+layout.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <svelte:window bind:innerWidth={$pageWidth} />
-<div class="no-scrollbar h-screen font-notoSans text-white">
+<div class="no-scrollbar relative h-screen font-notoSans text-white">
     <div class="fixed isolate -z-10 h-full w-screen bg-black">
         <!-- This whole bg is a complete copy of ytmusic, design own at some point (Place for customization w/ album art etc?) (EDIT: Ok, it looks SICK with album art!) -->
         <div id="background-gradient" class="absolute z-10 h-1/2 w-full bg-cover" />