Clean up login page

frontend/src/components/Navbar.tsx

@@ -1,23 +1,50 @@
+import { Show } from "solid-js"
 import { A } from "@solidjs/router"
-import { PLATFORM_NAME } from "../lib/nostr"
+import { PLATFORM_NAME, useActiveAccount, useProfilePicture } from "../lib/nostr"
 
 export default function Navbar() {
+  const account = useActiveAccount()
+  const picture = useProfilePicture(() => account()?.pubkey)
+
   return (
     <nav class="bg-white border-b border-gray-200">
-      <div class="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
-        <A href="/" class="font-bold text-gray-900 text-lg">
-          {PLATFORM_NAME}
+      <div class="max-w-4xl mx-auto px-4 h-14 flex items-center justify-between">
+        <A href="/" class="flex items-center gap-2">
+          <img src="/caravel.png" alt={PLATFORM_NAME} class="h-8 w-8 rounded-full object-cover" />
+          <span class="font-bold text-gray-900 text-lg">{PLATFORM_NAME}</span>
         </A>
         <div class="flex items-center gap-4">
           <A href="/relays" class="text-sm text-gray-600 hover:text-gray-900">
             Dashboard
           </A>
-          <A
-            href="/login"
-            class="text-sm py-1.5 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          <Show
+            when={account()}
+            fallback={
+              <A
+                href="/login"
+                class="text-sm py-1.5 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                Log In
+              </A>
+            }
           >
-            Log In
-          </A>
+            <A href="/account">
+              <Show
+                when={picture()}
+                fallback={
+                  <div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
+                    <svg class="w-4 h-4 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                  </div>
+                }
+              >
+                <img
+                  src={picture()}
+                  alt="Profile"
+                  class="h-8 w-8 rounded-full object-cover"
+                />
+              </Show>
+            </A>
+          </Show>
         </div>
       </div>
     </nav>