Fixed authentication issue and updated user interface in authenticati…

…on page

packages/svelte/src/lib/components/gun/account/AccountProfile.svelte

@@ -1,42 +1,33 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { get } from "svelte/store";
+    import { get, writable } from "svelte/store";
     import { useUser } from "$lib/gun/user";
     import AccountAvatar from "./AccountAvatar.svelte";
-    import { useAccount } from "$lib/gun/account";
 
-    let pub : string | undefined ;
     let { user } = useUser();
-    console.log("user pub", $user);
-    let { account } = useAccount($user?.pub);
+    let account = writable(null);
+    let lastPulse: any;
+    let isInitialized = false;
 
-    $: globalAccount = $account;
-    $: lastPulse = globalAccount?.pulse;
-
-    onMount(() => {
-        if (!pub && $user?.pub) {
-            pub = $user.pub;
-        }
-    });
-
-    $: pub = $user?.pub;
-
-    
+    $: console.log("user pub", $user?.pub);
 
 
-    if (globalAccount && globalAccount.pulse !== lastPulse) {
-        lastPulse = globalAccount.pulse;
-        console.log("Pulse updated:", globalAccount.pulse);
+    $: if ($account) {
+        console.log("Account data updated:", $account);
+        if ($account.pulse !== lastPulse) {
+            lastPulse = $account.pulse;
+            console.log("Pulse updated:", $account.pulse);
+        }
     }
     
     const accountFields = [
-        { key: 'color', label: 'Color' },
         { key: 'pulse', label: 'Pulse' },
         { key: 'blink', label: 'Blink' },
         { key: 'lastSeen', label: 'Last Seen' }
+        
     ];
 
-    $: profileFields = $user.profile ? 
+    $: profileFields = $user?.profile ? 
         Object.entries($user.profile)
             .filter(([key, value]) => 
                 key !== '#' && 
@@ -53,34 +44,32 @@
     <div class="card-body">
         <h2 class="card-title text-black font-medium text-2xl">Account Information</h2>
         <AccountAvatar pub={$user?.pub} />
-        {#if globalAccount}
+        {#if $user}
             {#each accountFields as { key, label }}
                 <div class="form-control gap-2">
-                    <label class="label ">
-                        <span class="label-text  text-black font-medium">{label}</span>
+                    <label class="label">
+                        <span class="label-text text-black font-medium">{label}</span>
                     </label>
                     {#if key === 'color'}
                         <div class="flex items-center">
-                            <div class="w-6 h-6 rounded-full " style="background-color: {globalAccount[key]};"></div>
-                            <span class="badge">{globalAccount[key]}</span>
+                            <div class="w-6 h-6 rounded-full" style="background-color: {$user[key] || 'transparent'};"></div>
+                            <span class="badge">{$account[key] || 'N/A'}</span>
                         </div>
                     {:else if key === 'blink'}
-                        <span class="badge badge-outline">{globalAccount[key] ? 'Yes' : 'No'}</span>
+                        <span class="badge badge-outline">{$user[key] === false ? 'No' : ($user[key] ? 'Yes' : 'N/A')}</span>
                     {:else if key === 'lastSeen'}
-                        <span class="badge badge-{typeof globalAccount[key] === 'number' ? 'success' : 'error'}">
-                            {typeof globalAccount[key] === 'number' ? `${globalAccount[key]}s ago` : get(globalAccount[key])}
+                        <span class="badge badge-{typeof $user[key] === 'number' ? 'success' : 'error'}">
+                            {typeof $user[key] === 'number' ? `${$user[key]}s ago` : ($user[key] || 'N/A')}
                         </span>
                     {:else if key === 'pulse'}
-                        <span class="badge badge-neutral">{globalAccount[key]}</span>
+                        <span class="badge badge-neutral">{$user[key] || 'N/A'}</span>
                     {:else}
-                        <span  readonly class="w-full text-left  text-xs" >{globalAccount[key]}</span>
+                        <span readonly class="w-full text-left text-xs">{$user[key] || 'N/A'}</span>
                     {/if}
                 </div>
             {/each}
         {:else}
-            <p class="text-center">Caricamento account...</p>
+            <p class="text-center">Caricamento account... (Pub: {$user?.pub})</p>
         {/if}
-
-
     </div>
 </div>

packages/svelte/src/lib/components/gun/graph/Graph.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { useGun } from '$lib/gun/gun';
+  import AccountAvatar from '../account/AccountAvatar.svelte';
+  import { useColor } from '$lib/gun/colors';
+  import { fade } from 'svelte/transition';
+
+  let colorDeep = useColor("deep");
+  let graph = {};
+  let gun = useGun();
+
+  function updateGraph() {
+    graph = { ...gun._.graph };
+  }
+
+  let timer;
+
+  onMount(() => {
+    updateGraph();
+    timer = setInterval(updateGraph, 1000);
+  });
+
+  onDestroy(() => {
+    if (timer) clearInterval(timer);
+  });
+
+  function toggleShow(node) {
+    node.show = !node.show;
+    graph = graph;
+  }
+
+  function formatValue(value) {
+    if (typeof value === 'object' && value !== null) {
+      return JSON.stringify(value, null, 2);
+    }
+    return value;
+  }
+</script>
+
+<article class="overflow-hidden bg-ableton-beige m-4 p-10 rounded-none break-all text-white">
+<h2 class="card-title font-medium text-2xl mb-4 text-black">User Graph</h2>
+
+{#each Object.entries(graph).filter(([id, _]) => !id.startsWith('undefined')) as [id, node]}
+  <div 
+    class="p-2 text-sm w-full text-white" 
+    style="background-color: {colorDeep.hex(id)};"
+  >
+    <div class="flex cursor-pointer" on:click={() => toggleShow(node)}>
+      {#if id[0] === '~'}
+        <AccountAvatar pub={id.slice(1, 88)} size={20} />
+      {/if}
+      <div class="item font-bold">{id[0] === '~' ? id.slice(88) : id}</div>
+    </div>
+    {#if node.show}
+      <section transition:fade>
+        {#each Object.entries(node) as [key, value]}
+          {#if key !== '_' && key !== 'show'}
+            <div class="p-2 border-t border-gray-700">
+              <div class="font-semibold text-blue-400">{key}</div>
+              <pre class="whitespace-pre-wrap break-words text-xs">{formatValue(value)}</pre>
+            </div>
+          {/if}
+        {/each}
+      </section>
+    {/if}
+  </div>
+{/each}
+</article>
+
+<style>
+pre {
+  max-height: 200px;
+  overflow-y: auto;
+}
+</style>