refactor: wrap navbar component

so component can have ui tests

__snapshots__/navbar.test.js.snap

@@ -21,8 +21,78 @@ exports[`Navbar Default smoke-test 1`] = `
           </h4>
         </div>
         <div class="navbar-end gap-4">
-          <div class="btn normal-case btn-sm btn-ghost">
+          <div class="h-8 skeleton w-20">
-            Sign up
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Navbar Logged in smoke-test 1`] = `
+<div class="bg-base-400">
+  <div class="mx-auto lg:container">
+    <div class="px-3">
+      <div class="navbar">
+        <div class="navbar-start">
+        </div>
+        <div class="navbar-center">
+          <h4 class="align-middle text-sm font-mono">
+            <span class="text-primary">
+              git
+            </span>
+            <span class="text-primary">
+              workshop
+            </span>
+            <span class>
+              .net
+            </span>
+          </h4>
+        </div>
+        <div class="navbar-end gap-4">
+          <div class="flex my-2">
+            <div class="avatar flex-none">
+              <div class="w-8 h-8 rounded">
+                <img class="my-0"
+                     src="../test-profile-image.jpg"
+                     alt="DanConwayDev"
+                >
+              </div>
+            </div>
+            <div class="flex-auto pl-3 m-auto">
+              DanConwayDev
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Navbar NIP07 Loading smoke-test 1`] = `
+<div class="bg-base-400">
+  <div class="mx-auto lg:container">
+    <div class="px-3">
+      <div class="navbar">
+        <div class="navbar-start">
+        </div>
+        <div class="navbar-center">
+          <h4 class="align-middle text-sm font-mono">
+            <span class="text-primary">
+              git
+            </span>
+            <span class="text-primary">
+              workshop
+            </span>
+            <span class>
+              .net
+            </span>
+          </h4>
+        </div>
+        <div class="navbar-end gap-4">
+          <div class="h-8 skeleton w-20">
           </div>
         </div>
       </div>

src/lib/components/Navbar.stories.svelte

@@ -2,6 +2,7 @@
     import type { Meta } from "@storybook/svelte";
     import Navbar from "$lib/components/Navbar.svelte";
     import { Story, Template } from "@storybook/addon-svelte-csf";
+    import { UserVectors } from "$lib/components/users/vectors";
 
     export const meta: Meta<Navbar> = {
         title: "Navbar",
@@ -16,6 +17,16 @@
 
 <Story name="Default" />
 
-<Story name="NoNIP07" args={{ nip07plugin: false }} />
+<Story name="NIP07 Loading" args={{ nip07_plugin: undefined }} />
 
-<Story name="NIP07Exists" args={{ nip07plugin: true }} />
+<Story name="NoNIP07" args={{ nip07_plugin: false }} />
+
+<Story
+    name="NIP07Exists"
+    args={{ nip07_plugin: true, logged_in_user: undefined }}
+/>
+
+<Story
+    name="Logged in"
+    args={{ nip07_plugin: true, logged_in_user: { ...UserVectors.default } }}
+/>

src/lib/components/Navbar.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
-  import {
-    checkForNip07Plugin,
-    logged_in_user,
-    login,
-    nip07_plugin,
-  } from "$lib/stores/users";
-  import { onMount } from "svelte";
   import Container from "./Container.svelte";
   import UserHeader from "./users/UserHeader.svelte";
+  import type { User } from "./users/type";
 
-  onMount(checkForNip07Plugin);
+  export let logged_in_user: User | undefined = undefined;
+  export let nip07_plugin: boolean | undefined = undefined;
+  export let login_function: Function = () => {};
 </script>
 
 <div class="bg-base-400">
@@ -24,14 +20,14 @@
         </h4>
       </div>
       <div class="navbar-end gap-4">
-        {#if $logged_in_user}
+        {#if logged_in_user}
-          <UserHeader user={$logged_in_user} />
+          <UserHeader user={logged_in_user} />
-        {:else if $nip07_plugin === undefined}
+        {:else if nip07_plugin === undefined}
           <div class="h-8 skeleton w-20"></div>
-        {:else if $nip07_plugin}
+        {:else if nip07_plugin}
           <button
             on:click={() => {
-              login();
+              login_function();
             }}
             class="btn normal-case btn-sm btn-ghost">Login</button
           >

src/lib/wrappers/Navbar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import {
+        checkForNip07Plugin,
+        logged_in_user,
+        login,
+        nip07_plugin,
+    } from "$lib/stores/users";
+    import { onMount } from "svelte";
+    import Navbar from "$lib/components/Navbar.svelte";
+
+    onMount(checkForNip07Plugin);
+</script>
+
+<Navbar
+    logged_in_user={$logged_in_user}
+    nip07_plugin={$nip07_plugin}
+    login_function={login}
+/>

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
   import "../app.css";
-  import Navbar from "$lib/components/Navbar.svelte";
+  import Navbar from "$lib/wrappers/Navbar.svelte";
 </script>
 
 <Navbar />