Sign in with extension and update relays

src/lib/components/Login.svelte

@@ -0,0 +1,69 @@
+<script lang='ts'>
+  import { Avatar, Button, Popover } from 'flowbite-svelte';
+  import NDK, { NDKNip07Signer, type NDKUserProfile } from '@nostr-dev-kit/ndk';
+  import { ndk } from '$lib/ndk';
+
+  let signedIn: boolean = false;
+  let profile: NDKUserProfile | null = null;
+
+  const signInWithExtension = async () => {
+    const signer = new NDKNip07Signer();
+    const user = await signer.user();
+    
+    user.ndk = $ndk;
+    $ndk.signer = signer;
+    $ndk.activeUser = user;
+
+    const connectPromise = $ndk.connect();
+    const fetchProfilePromise = user.fetchProfile();
+
+    const [_, extensionUserProfile] = await Promise.all([connectPromise, fetchProfilePromise]);
+    profile = extensionUserProfile;
+
+    console.log('NDK signed in with extension and reconnected.');
+
+    signedIn = true;
+  };
+
+  const signInWithBunker = () => {
+    console.warn('Bunker sign-in not yet implemented.');
+  };
+</script>
+
+{#if signedIn}
+  <Avatar
+    rounded
+    class='h-6 w-6 m-4 cursor-pointer'
+    src={profile?.image}
+    alt={profile?.displayName}
+  />
+  <Popover
+    class='popover-leather w-fit'
+    placement='bottom'
+    target='avatar'
+  >
+    <h3 class='text-lg font-bold'>{profile?.displayName}</h3>
+    <h4 class='text-base'>@{profile?.name}</h4>
+</Popover>
+{:else}
+  <Avatar rounded class='h-6 w-6 m-4 cursor-pointer' id='avatar' />
+  <Popover
+    class='popover-leather w-fit'
+    placement='bottom'
+    target='avatar'
+  >
+    <div class='w-full flex space-x-2'>
+      <Button
+        on:click={signInWithExtension}
+      >
+        Extension Sign-In
+      </Button>
+      <Button
+        color='alternative'
+        on:click={signInWithBunker}
+      >
+        Bunker Sign-In
+      </Button>
+    </div>
+  </Popover>
+{/if}

src/lib/components/Navigation.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { DarkMode, Navbar, NavLi, NavUl, NavHamburger, NavBrand } from 'flowbite-svelte';
+    import Login from './Login.svelte';
 
   let className: string;
   export { className as class };
@@ -13,12 +14,14 @@
       <h1 class='font-serif'>Alexandria</h1>
     </NavBrand>
   </div>
-  <NavHamburger class='btn-leather' />
+  <div class='flex md:order-2'>
+    <Login />
+    <NavHamburger class='btn-leather' />
+  </div>
   <NavUl class='ul-leather'>
     <NavLi href='./about'>About</NavLi>
     <NavLi href='./new/edit'>New Note</NavLi>
     <NavLi href='./visualize'>Visualize</NavLi>
-    <NavLi href='./login'>Login</NavLi>
     <NavLi>
       <DarkMode btnClass='btn-leather p-0'/>
     </NavLi>

src/lib/ndk.ts

@@ -17,7 +17,12 @@ export function getStoredNdkConfig() {
 export function getNdkInstance() {
   const { relays, dexieAdapter } = getStoredNdkConfig();
 
-  const ndk = new NDK({ explicitRelayUrls: relays, cacheAdapter: dexieAdapter });
+  const ndk = new NDK({
+    autoConnectUserRelays: true,
+    cacheAdapter: dexieAdapter,
+    enableOutboxModel: true,
+    explicitRelayUrls: relays,
+  });
   ndk.connect().then(() => console.log('ndk connected'));
 
   return ndk;