Fix signer disconnection flash, nav icon sizes

src/app/components/LogOut.svelte

@@ -17,6 +17,7 @@
       await logout()
       window.location.href = "/"
     } catch (e) {
+      console.error(e)
       loading = false
     }
   }

src/app/components/PrimaryNav.svelte

@@ -62,7 +62,7 @@
         <PrimaryNavItemSpace {url} />
       {:else}
         <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
-          <ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" />
+          <ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" size={10} />
         </PrimaryNavItem>
         <Divider />
         {#each primarySpaceUrls as url (url)}
@@ -74,11 +74,11 @@
             class="tooltip-right"
             onclick={showOtherSpacesMenu}
             notification={otherSpaceNotifications}>
-            <ImageIcon alt="Other Spaces" src={Widget} />
+            <ImageIcon alt="Other Spaces" src={Widget} size={8} />
           </PrimaryNavItem>
         {/if}
         <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
-          <ImageIcon alt="Add a Space" src={Compass} size={7} />
+          <ImageIcon alt="Add a Space" src={Compass} size={8} />
         </PrimaryNavItem>
       {/each}
     </div>
@@ -91,17 +91,21 @@
         href="/settings/profile"
         prefix="/settings"
         class="tooltip-right">
-        <ImageIcon alt="Settings" src={$userProfile?.picture || UserRounded} class="rounded-full" />
+        {#if $userProfile?.picture}
+          <ImageIcon alt="Settings" src={$userProfile?.picture} class="rounded-full" size={10} />
+        {:else}
+          <ImageIcon alt="Settings" src={UserRounded} class="rounded-full" size={8} />
+        {/if}
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
         onclick={openChat}
         class="tooltip-right"
         notification={$notifications.has("/chat")}>
-        <ImageIcon alt="Messages" src={Letter} size={7} />
+        <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
       <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
-        <ImageIcon alt="Search" src={Magnifier} size={7} />
+        <ImageIcon alt="Search" src={Magnifier} size={8} />
       </PrimaryNavItem>
     </div>
   </div>
@@ -118,26 +122,26 @@
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-6">
       <PrimaryNavItem title="Home" href="/home">
-        <ImageIcon alt="Home" src={HomeSmile} size={7} />
+        <ImageIcon alt="Home" src={HomeSmile} size={8} />
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
         onclick={openChat}
         notification={$notifications.has("/chat")}>
-        <ImageIcon alt="Messages" src={Letter} size={7} />
+        <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
         <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
-          <ImageIcon alt="Spaces" src={SettingsMinimalistic} size={7} />
+          <ImageIcon alt="Spaces" src={SettingsMinimalistic} size={8} />
         </PrimaryNavItem>
       {/if}
     </div>
     <PrimaryNavItem title="Settings" onclick={showSettingsMenu}>
-      <ImageIcon
+      {#if $userProfile?.picture}
-        alt="Settings"
+        <ImageIcon alt="Settings" src={$userProfile?.picture} size={10} class="rounded-full" />
-        src={$userProfile?.picture || Settings}
+      {:else}
-        size={7}
+        <ImageIcon alt="Settings" src={Settings} size={8} class="rounded-full" />
-        class="rounded-full" />
+      {/if}
     </PrimaryNavItem>
   </div>
 </div>

src/app/components/PrimaryNavItemSpace.svelte

@@ -19,5 +19,5 @@
   title={displayRelayUrl(url)}
   class="tooltip-right"
   notification={$notifications.has(makeSpacePath(url))}>
-  <RelayIcon {url} size={7} class="rounded-full" />
+  <RelayIcon {url} size={10} class="rounded-full" />
 </PrimaryNavItem>

src/app/components/ProfileEject.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-  import {session} from "@welshman/app"
-  import {slideAndFade} from "@lib/transition"
-  import Link from "@lib/components/Link.svelte"
-  import Key from "@assets/icons/key-minimalistic.svg?dataurl"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import Field from "@lib/components/Field.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {PLATFORM_NAME} from "@app/core/state"
-
-  const email = $session?.email
-
-  const back = () => history.back()
-
-  const confirm = async () => {
-    loading = true
-
-    try {
-      // TODO: Implement export functionality
-    } finally {
-      loading = false
-    }
-  }
-
-  const success = $state(false)
-  let loading = $state(false)
-</script>
-
-<div class="column gap-4">
-  <ModalHeader>
-    {#snippet title()}
-      <div>Export your keys</div>
-    {/snippet}
-  </ModalHeader>
-  <p>Here's what the process looks like:</p>
-  <ul class="flex list-inside list-decimal flex-col gap-4">
-    <li>When you're ready, enter your account password below to continue.</li>
-    <li>
-      {PLATFORM_NAME} will send an email to "{email}" with your encrypted private key in it.
-    </li>
-    <li>
-      Store your "ncryptsec" in a password manager like
-      <Link class="link" external href="https://bitwarden.com/">Bitwarden</Link>. This is the key to
-      your social identity; keep it safe and secret.
-    </li>
-    <li>
-      Choose a <Link class="link" href="https://nostrapps.com/#signers">signer app</Link> and import
-      your private key into it. Don't forget your account password; you'll need it to decrypt your key.
-    </li>
-  </ul>
-  <p>
-    Once you export your key, you'll be <strong>logged out</strong> and won't be able to log in using
-    your email and password any more. Going forward, you'll need to use your signer app instead.
-  </p>
-  {#if !success}
-    <div out:slideAndFade>
-      <Field>
-        {#snippet label()}
-          <p>To confirm, please enter your password below:</p>
-        {/snippet}
-        {#snippet input()}
-          <label class="input input-bordered flex w-full items-center gap-2">
-            <Icon icon={Key} />
-            <input type="password" disabled={loading} class="grow" />
-          </label>
-        {/snippet}
-      </Field>
-    </div>
-  {/if}
-  <ModalFooter>
-    <Button class="btn btn-link" disabled={loading || success} onclick={back}>
-      <Icon icon={AltArrowLeft} />
-      Go back
-    </Button>
-    {#if success}
-      <Button class="btn btn-primary" disabled={loading}>
-        <Icon icon={CheckCircle} />
-        <Spinner {loading}>Refresh the page</Spinner>
-      </Button>
-    {:else}
-      <Button class="btn btn-error" disabled={loading} onclick={confirm}>
-        <Icon icon={CheckCircle} />
-        <Spinner {loading}>I understand, send me my private key</Spinner>
-      </Button>
-    {/if}
-  </ModalFooter>
-</div>

src/app/components/SignerStatus.svelte

@@ -15,7 +15,7 @@
   const pending = $derived($signerLog.filter(x => !x.finished_at))
   const failure = $derived(finished.filter(spec({ok: false})))
   const success = $derived(finished.filter(spec({ok: true})))
-  const recent = $derived($signerLog.slice(-10))
+  const recent = $derived($signerLog.filter(x => x.started_at < Date.now() - 5000).slice(-10))
   const recentFinished = $derived(recent.filter(x => x.finished_at))
   const recentPending = $derived(recent.filter(x => !x.finished_at))
   const recentAvg = $derived(avg(recentFinished.map(x => x.finished_at! - x.started_at)))

src/lib/components/PrimaryNavItem.svelte

@@ -16,9 +16,9 @@
 </script>
 
 {#if href}
-  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
     <div
-      class="avatar cursor-pointer rounded-full p-2 {restProps.class} transition-colors hover:bg-base-300"
+      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
       class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>
@@ -29,9 +29,9 @@
     </div>
   </a>
 {:else}
-  <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+  <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
     <div
-      class="avatar cursor-pointer rounded-full p-2 {restProps.class} transition-colors hover:bg-base-300"
+      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
       class:bg-base-300={active}
       class:tooltip={title}
       data-tip={title}>