From 6561771c435f9d9bed1589b5ed13d17aee0b7873 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 11 Dec 2022 20:46:58 +0100
Subject: feat: Add frontpage

---
 code/app/src/routes/(main)/(app)/+layout.svelte | 210 ++++++++++++------------
 1 file changed, 107 insertions(+), 103 deletions(-)

(limited to 'code/app/src/routes/(main)/(app)/+layout.svelte')

diff --git a/code/app/src/routes/(main)/(app)/+layout.svelte b/code/app/src/routes/(main)/(app)/+layout.svelte
index 6cb70ef..e57bc3b 100644
--- a/code/app/src/routes/(main)/(app)/+layout.svelte
+++ b/code/app/src/routes/(main)/(app)/+layout.svelte
@@ -10,7 +10,7 @@
         QueueListIcon,
         CalendarIcon,
     } from "$components/icons";
-    import {AccountService} from "$services/account-service";
+    import { AccountService } from "$services/account-service";
     import {
         Dialog,
         Menu,
@@ -21,11 +21,11 @@
         TransitionChild,
         TransitionRoot,
     } from "@rgossiaux/svelte-headlessui";
-    import {DialogPanel} from "@developermuch/dev-svelte-headlessui";
-    import {Input} from "$components";
-    import {goto} from "$app/navigation";
-    import {page} from "$app/stores";
-    
+    import { DialogPanel } from "@developermuch/dev-svelte-headlessui";
+    import { Input } from "$components";
+    import { goto } from "$app/navigation";
+    import { page } from "$app/stores";
+
     const accountService = new AccountService();
 
     const session = {
@@ -76,45 +76,45 @@
     <TransitionRoot show={sidebarOpen}>
         <Dialog as="div" class="relative z-40 lg:hidden" on:close={() => (sidebarOpen = false)}>
             <TransitionChild
-                    as="div"
-                    enter="transition-opacity ease-linear duration-300"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="transition-opacity ease-linear duration-300"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
+                as="div"
+                enter="transition-opacity ease-linear duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="transition-opacity ease-linear duration-300"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
             >
-                <div class="fixed inset-0 bg-gray-600 bg-opacity-75"/>
+                <div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
             </TransitionChild>
 
             <div class="fixed inset-0 z-40 flex">
                 <TransitionChild
-                        as="div"
-                        enter="transition ease-in-out duration-300 transform"
-                        enterFrom="-translate-x-full"
-                        enterTo="translate-x-0"
-                        leave="transition ease-in-out duration-300 transform"
-                        leaveFrom="translate-x-0"
-                        leaveTo="-translate-x-full"
+                    as="div"
+                    enter="transition ease-in-out duration-300 transform"
+                    enterFrom="-translate-x-full"
+                    enterTo="translate-x-0"
+                    leave="transition ease-in-out duration-300 transform"
+                    leaveFrom="translate-x-0"
+                    leaveTo="-translate-x-full"
                 >
                     <DialogPanel class="relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4">
                         <TransitionChild
-                                as="div"
-                                enter="ease-in-out duration-300"
-                                enterFrom="opacity-0"
-                                enterTo="opacity-100"
-                                leave="ease-in-out duration-300"
-                                leaveFrom="opacity-100"
-                                leaveTo="opacity-0"
+                            as="div"
+                            enter="ease-in-out duration-300"
+                            enterFrom="opacity-0"
+                            enterTo="opacity-100"
+                            leave="ease-in-out duration-300"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
                         >
                             <div class="absolute top-0 right-0 -mr-12 pt-2">
                                 <button
-                                        type="button"
-                                        class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-                                        on:click={() => (sidebarOpen = false)}
+                                    type="button"
+                                    class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                                    on:click={() => (sidebarOpen = false)}
                                 >
                                     <span class="sr-only">Close sidebar</span>
-                                    <XMarkIcon class="text-white" aria-hidden="true"/>
+                                    <XMarkIcon class="text-white" aria-hidden="true" />
                                 </button>
                             </div>
                         </TransitionChild>
@@ -124,15 +124,17 @@
                                     {#each navigationItems as item}
                                         {@const current = $page.url.pathname.startsWith(item.href)}
                                         <a
-                                                href={item.href}
-                                                aria-current={current ? "page" : undefined}
-                                                class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md
+                                            href={item.href}
+                                            aria-current={current ? "page" : undefined}
+                                            class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md
                       {current ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}"
                                         >
                                             <svelte:component
-                                                    this={item.icon}
-                                                    class="mr-3 flex-shrink-0 h-6 w-6 {current ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500'}"
-                                                    aria-hidden="true"
+                                                this={item.icon}
+                                                class="mr-3 flex-shrink-0 h-6 w-6 {current
+                                                    ? 'text-gray-500'
+                                                    : 'text-gray-400 group-hover:text-gray-500'}"
+                                                aria-hidden="true"
                                             />
                                             {item.name}
                                         </a>
@@ -155,52 +157,52 @@
             <!-- User account dropdown -->
             <Menu class="relative inline-block text-left">
                 <MenuButton
-                        class="group w-full rounded-md bg-gray-100 px-3.5 py-2 text-left text-sm font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-gray-100"
+                    class="group w-full rounded-md bg-gray-100 px-3.5 py-2 text-left text-sm font-medium text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-gray-100"
                 >
-          <span class="flex w-full items-center justify-between">
-            <span class="flex min-w-0 items-center justify-between space-x-3">
-              <span class="flex min-w-0 flex-1 flex-col">
-                <span class="truncate text-sm font-medium text-gray-900">
-                  {session.profile.username}
-                </span>
-                <span class="truncate text-sm text-gray-500">{session.profile.displayName}</span>
-              </span>
-            </span>
-            <ChevronUpDownIcon class="flex-shrink-0 text-gray-400 group-hover:text-gray-500" aria-hidden="true"/>
-          </span>
+                    <span class="flex w-full items-center justify-between">
+                        <span class="flex min-w-0 items-center justify-between space-x-3">
+                            <span class="flex min-w-0 flex-1 flex-col">
+                                <span class="truncate text-sm font-medium text-gray-900">
+                                    {session.profile.username}
+                                </span>
+                                <span class="truncate text-sm text-gray-500">{session.profile.displayName}</span>
+                            </span>
+                        </span>
+                        <ChevronUpDownIcon class="flex-shrink-0 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
+                    </span>
                 </MenuButton>
                 <Transition
-                        leave="transition ease-in duration-75"
-                        enter="transition ease-out duration-100"
-                        enterFrom="transform opacity-0 scale-95"
-                        enterTo="transform opacity-100 scale-100"
-                        leaveFrom="transform opacity-100 scale-100"
-                        leaveTo="transform opacity-0 scale-95"
-                        as="div"
+                    leave="transition ease-in duration-75"
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                    as="div"
                 >
                     <MenuItems
-                            class="absolute right-0 left-0 z-10 mt-1 origin-top divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                        class="absolute right-0 left-0 z-10 mt-1 origin-top divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                     >
                         <div class="py-1">
                             <MenuItem>
-                                <a href="/profile"
-                                   class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100">
-                                    View profile </a>
+                                <a href="/profile" class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100">
+                                    View profile
+                                </a>
                             </MenuItem>
                             <MenuItem>
-                                <a href="/settings"
-                                   class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100">
-                                    Settings </a>
+                                <a href="/settings" class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100">
+                                    Settings
+                                </a>
                             </MenuItem>
                         </div>
                         <div class="py-1">
                             <MenuItem>
-                <span
-                        on:click={() => sign_out()}
-                        class="text-gray-700 block px-4 py-2 text-sm hover:bg-red-200 hover:text-red-900 cursor-pointer"
-                >
-                  Sign out
-                </span>
+                                <span
+                                    on:click={() => sign_out()}
+                                    class="text-gray-700 block px-4 py-2 text-sm hover:bg-red-200 hover:text-red-900 cursor-pointer"
+                                >
+                                    Sign out
+                                </span>
                             </MenuItem>
                         </div>
                     </MenuItems>
@@ -210,8 +212,7 @@
             <div class="mt-3 hidden">
                 <label for="search" class="sr-only">Search</label>
                 <div class="relative mt-1 rounded-md shadow-sm">
-                    <Input type="search" name="search" icon={MagnifyingGlassIcon} placeholder="Search"
-                           bind:value={sidebarSearchValue}/>
+                    <Input type="search" name="search" icon={MagnifyingGlassIcon} placeholder="Search" bind:value={sidebarSearchValue} />
                 </div>
             </div>
             <!-- Navigation -->
@@ -220,15 +221,15 @@
                     {#each navigationItems as item}
                         {@const current = $page.url.pathname.startsWith(item.href)}
                         <a
-                                href={item.href}
-                                aria-current={current ? "page" : undefined}
-                                class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md
+                            href={item.href}
+                            aria-current={current ? "page" : undefined}
+                            class="group flex items-center px-2 py-2 text-base leading-5 font-medium rounded-md
                       {current ? 'bg-gray-200 text-gray-900' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'}"
                         >
                             <svelte:component
-                                    this={item.icon}
-                                    class="mr-3 flex-shrink-0 h-6 w-6 {current ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500'}"
-                                    aria-hidden="true"
+                                this={item.icon}
+                                class="mr-3 flex-shrink-0 h-6 w-6 {current ? 'text-gray-500' : 'text-gray-400 group-hover:text-gray-500'}"
+                                aria-hidden="true"
                             />
                             {item.name}
                         </a>
@@ -243,12 +244,12 @@
         <!-- Search header -->
         <div class="sticky top-0 z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white lg:hidden">
             <button
-                    type="button"
-                    class="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 lg:hidden"
-                    on:click={() => (sidebarOpen = true)}
+                type="button"
+                class="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 lg:hidden"
+                on:click={() => (sidebarOpen = true)}
             >
                 <span class="sr-only">Open sidebar</span>
-                <Bars3CenterLeftIcon aria-hidden="true"/>
+                <Bars3CenterLeftIcon aria-hidden="true" />
             </button>
             <div class="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
                 <div class="flex flex-1">
@@ -256,12 +257,12 @@
                         <label for="search-field" class="sr-only">Search</label>
                         <div class="relative w-full text-gray-400 focus-within:text-gray-600">
                             <Input
-                                    bind:value={sidebarSearchValue}
-                                    icon={MagnifyingGlassIcon}
-                                    id="search-field"
-                                    name="search-field"
-                                    placeholder="Search"
-                                    type="search"
+                                bind:value={sidebarSearchValue}
+                                icon={MagnifyingGlassIcon}
+                                id="search-field"
+                                name="search-field"
+                                placeholder="Search"
+                                type="search"
                             />
                         </div>
                     </form>
@@ -271,35 +272,38 @@
                     <Menu as="div" class="relative ml-3">
                         <div>
                             <MenuButton
-                                    class="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2"
+                                class="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2"
                             >
                                 <span class="sr-only">Open user menu</span>
                             </MenuButton>
                         </div>
                         <Transition
-                                enterFrom="transform opacity-0 scale-95"
-                                enterTo="transform opacity-100 scale-100"
-                                leaveFrom="transform opacity-100 scale-100"
-                                leaveTo="transform opacity-0 scale-95"
-                                as="div"
+                            enterFrom="transform opacity-0 scale-95"
+                            enterTo="transform opacity-100 scale-100"
+                            leaveFrom="transform opacity-100 scale-100"
+                            leaveTo="transform opacity-0 scale-95"
+                            as="div"
                         >
                             <MenuItems
-                                    class="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                                class="absolute right-0 z-10 mt-2 w-48 origin-top-right divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                             >
                                 <div class="py-1">
                                     <MenuItem>
-                                        <a href="/profile" class="text-gray-700 block px-4 py-2 text-sm"> View
-                                            profile </a>
+                                        <a href="/profile" class="text-gray-700 block px-4 py-2 text-sm"> View profile </a>
                                     </MenuItem>
                                     <MenuItem>
-                                        <a href="/settings"
-                                           class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100">
-                                            Settings </a>
+                                        <a
+                                            href="/settings"
+                                            class="text-gray-700 block px-4 py-2 text-sm hover:text-gray-900 hover:bg-gray-100"
+                                        >
+                                            Settings
+                                        </a>
                                     </MenuItem>
                                     <div class="py-1">
                                         <MenuItem>
-                                            <span on:click={() => sign_out()}
-                                                  class="text-gray-700 block px-4 py-2 text-sm"> Sign out </span>
+                                            <span on:click={() => sign_out()} class="text-gray-700 block px-4 py-2 text-sm">
+                                                Sign out
+                                            </span>
                                         </MenuItem>
                                     </div>
                                 </div>
@@ -310,7 +314,7 @@
             </div>
         </div>
         <main class="flex-1 p-3">
-            <slot/>
+            <slot />
         </main>
     </div>
 </div>
-- 
cgit v1.3