Superadmin nav fixes

frontends/superadmin/src/components/Logo.svelte

@@ -6,8 +6,6 @@
 <div class="flex items-center justify-center gap-4">
   <img
     src="/images/pockethost-cloud-logo.jpg"
-    width="450"
-    height="450"
     class="mix-blend-lighten {logoWidth}"
     alt="PocketHost Logo"
   />

frontends/superadmin/src/routes/+layout.svelte

@@ -1,11 +1,24 @@
 <script>
+  import { page } from '$app/stores'
+  import Logo from '$components/Logo.svelte'
   import MediaQuery from '$components/MediaQuery.svelte'
   import MobileNavDrawer from '$components/MobileNavDrawer.svelte'
   import Navbar from '$components/Navbar.svelte'
   import AuthStateGuard from '$components/helpers/AuthStateGuard.svelte'
   import Meta from '$components/helpers/Meta.svelte'
   import UserLoggedIn from '$components/helpers/UserLoggedIn.svelte'
+  import { client } from '$src/pocketbase-client'
   import '../app.css'
+
+  const handleLogoutAndRedirect = async () => {
+    const { logOut } = client()
+
+    // Clear out the pocketbase information about the current user
+    logOut()
+
+    // Hard refresh to make sure any remaining data is cleared
+    window.location.href = '/'
+  }
 </script>
 
 <Meta />
@@ -16,7 +29,11 @@
       <MediaQuery query="(min-width: 1280px)" let:matches>
         {#if matches}
           <Navbar />
-        {:else}
+        {/if}
+      </MediaQuery>
+
+      <MediaQuery query="(max-width: 700px)" let:matches>
+        {#if matches}
           <MobileNavDrawer>
             <Navbar />
           </MobileNavDrawer>
@@ -24,8 +41,47 @@
       </MediaQuery>
     </UserLoggedIn>
 
-    <div class="lg:p-4 lg:pt-0 xl:pt-4 min-h-screen grow">
-      <div class="bg-base-300 border-base-300 border-[16px] lg:p-4 rounded-2xl">
+    <div class="p-0 lg:p-4 min-h-screen grow">
+      <div
+        class="bg-base-300 border-base-300 border-[16px] m-0 md:p-4 rounded-2xl"
+      >
+        <MediaQuery
+          query="(min-width: 701px) and (max-width: 1279px)"
+          let:matches
+        >
+          {#if matches}
+            <UserLoggedIn>
+              <div role="tablist" class="tabs tabs-boxed">
+                <a href="/" role="tab" class="tab">
+                  <Logo hideLogoText={true} logoWidth="h-8" />
+                </a>
+
+                <a
+                  role="tab"
+                  class="tab {$page.url.pathname === '/stats'
+                    ? `tab-active`
+                    : ``}"
+                  href="/stats">Stats</a
+                >
+                <a
+                  role="tab"
+                  class="tab {$page.url.pathname === '/plugins'
+                    ? `tab-active`
+                    : ``}"
+                  href="/plugins">Plugins</a
+                >
+
+                <button
+                  type="button"
+                  class="tab"
+                  on:click={handleLogoutAndRedirect}
+                  ><i class="fa-regular fa-arrow-up-left-from-circle mr-2"></i> Logout</button
+                >
+              </div>
+            </UserLoggedIn>
+          {/if}
+        </MediaQuery>
+
         <slot />
       </div>
     </div>

frontends/superadmin/src/routes/+page.svelte

@@ -3,7 +3,6 @@
   import UserLoggedIn from '$components/helpers/UserLoggedIn.svelte'
   import UserLoggedOut from '$components/helpers/UserLoggedOut.svelte'
   import LoginForm from '$components/login-register/LoginForm.svelte'
-  import Dashboard from './dashboard/Dashboard.svelte'
 </script>
 
 <svelte:head>
@@ -11,9 +10,7 @@
 </svelte:head>
 
 <div>
-  <UserLoggedIn>
-    <Dashboard />
-  </UserLoggedIn>
+  <UserLoggedIn>Welcome</UserLoggedIn>
 
   <UserLoggedOut>
     <div class="min-h-screen flex items-center justify-center">

frontends/superadmin/src/routes/dashboard/+layout.svelte

@@ -1,7 +0,0 @@
-<script>
-  import UserLoggedIn from '$components/helpers/UserLoggedIn.svelte'
-</script>
-
-<UserLoggedIn redirect>
-  <slot />
-</UserLoggedIn>

frontends/superadmin/src/routes/dashboard/Dashboard.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import AuthStateGuard from '$components/helpers/AuthStateGuard.svelte'
-  import { client } from '$src/pocketbase-client'
-  import { onMount } from 'svelte'
-  import { writable } from 'svelte/store'
-
-  type Plugin = {
-    slug: string
-    name: string
-    version: string
-    migration: number
-    enabled: boolean
-  }
-
-  const plugins = writable<Plugin[]>([])
-  const stats = writable({})
-
-  onMount(async () => {
-    plugins.set(await client().client.collection('plugins').getFullList())
-    stats.set(
-      ((await client().client.collection('stats').getFullList()) || []).pop() ||
-        {},
-    )
-  })
-</script>
-
-<svelte:head>
-  <title>Dashboard - PocketHost</title>
-</svelte:head>
-
-<AuthStateGuard>
-  <div>
-    {#each Object.entries($stats) as [key, idx]}
-      <div>{key}: {idx}</div>
-    {/each}
-  </div>
-  <div>
-    {#each $plugins as plugin}
-      <div>{plugin.name}</div>
-    {/each}
-  </div>
-</AuthStateGuard>

frontends/superadmin/src/routes/plugins/+page.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { client } from '$src/pocketbase-client'
+  import { onMount } from 'svelte'
+  import { writable } from 'svelte/store'
+
+  type Plugin = {
+    slug: string
+    name: string
+    version: string
+    migration: number
+    enabled: boolean
+  }
+
+  const plugins = writable<Plugin[]>([])
+
+  onMount(async () => {
+    try {
+      plugins.set(await client().client.collection('plugins').getFullList())
+    } catch (e) {
+      console.error(e)
+    }
+  })
+</script>
+
+<svelte:head>
+  <title>Stats - PocketHost</title>
+</svelte:head>
+
+<div>
+  {#each $plugins as plugin}
+    <div>{plugin.name}</div>
+  {/each}
+</div>

frontends/superadmin/src/routes/stats/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { client } from '$src/pocketbase-client'
+  import { onMount } from 'svelte'
+  import { writable } from 'svelte/store'
+
+  const stats = writable({})
+
+  onMount(async () => {
+    try {
+      stats.set(
+        (
+          (await client().client.collection('stats').getFullList()) || []
+        ).pop() || {},
+      )
+    } catch (e) {
+      console.error(e)
+    }
+  })
+</script>
+
+<svelte:head>
+  <title>Stats - PocketHost</title>
+</svelte:head>
+
+<div>
+  {#each Object.entries($stats) as [key, idx]}
+    <div>{key}: {idx}</div>
+  {/each}
+</div>