From d4d5979a35ba2192d3ed3e616d32b121de6727ed Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 7 May 2025 08:57:49 -0700
Subject: [PATCH] Fix missing room images and room overflow in nav

---
 src/app/commands.ts                       |  4 +--
 src/app/components/MenuOtherSpaces.svelte | 15 ++++++++
 src/app/components/PrimaryNav.svelte      | 37 +++++++++++++++----
 src/app/editor/index.ts                   | 43 +++++++++++++----------
 src/app/state.ts                          |  4 +--
 src/assets/icons/Menu Dots Circle.svg     |  4 +++
 src/lib/components/Icon.svelte            |  2 ++
 7 files changed, 80 insertions(+), 29 deletions(-)
 create mode 100644 src/app/components/MenuOtherSpaces.svelte
 create mode 100644 src/assets/icons/Menu Dots Circle.svg

diff --git a/src/app/commands.ts b/src/app/commands.ts
index 8cea264..136c126 100644
--- a/src/app/commands.ts
+++ b/src/app/commands.ts
@@ -259,7 +259,7 @@ export const setInboxRelayPolicy = (url: string, enabled: boolean) => {
 export const checkRelayAccess = async (url: string, claim = "") => {
   const socket = Pool.get().get(url)
 
-  await socket.auth.attemptAuth(signer.get().sign)
+  await socket.auth.attemptAuth(e => signer.get()?.sign(e))
 
   const thunk = publishThunk({
     event: createEvent(AUTH_JOIN, {tags: [["claim", claim]]}),
@@ -307,7 +307,7 @@ export const checkRelayAuth = async (url: string, timeout = 3000) => {
   const socket = Pool.get().get(url)
   const okStatuses = [AuthStatus.None, AuthStatus.Ok]
 
-  await socket.auth.attemptAuth(signer.get().sign)
+  await socket.auth.attemptAuth(e => signer.get()?.sign(e))
 
   // Only raise an error if it's not a timeout.
   // If it is, odds are the problem is with our signer, not the relay
diff --git a/src/app/components/MenuOtherSpaces.svelte b/src/app/components/MenuOtherSpaces.svelte
new file mode 100644
index 0000000..63a3185
--- /dev/null
+++ b/src/app/components/MenuOtherSpaces.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
+
+  type Props = {
+    urls: string[]
+  }
+
+  const {urls}: Props = $props()
+</script>
+
+<div class="column menu gap-2">
+  {#each urls as url (url)}
+    <MenuSpacesItem {url} />
+  {/each}
+</div>
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 1402a40..85dc24b 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
+  import {splitAt} from "@welshman/lib"
   import {userProfile} from "@welshman/app"
   import Avatar from "@lib/components/Avatar.svelte"
   import Divider from "@lib/components/Divider.svelte"
@@ -8,6 +9,7 @@
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import ChatEnable from "@app/components/ChatEnable.svelte"
   import MenuSpaces from "@app/components/MenuSpaces.svelte"
+  import MenuOtherSpaces from "@app/components/MenuOtherSpaces.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
   import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
   import {userRoomsByUrl, canDecrypt, PLATFORM_RELAY, PLATFORM_LOGO} from "@app/state"
@@ -22,19 +24,33 @@
 
   const addSpace = () => pushModal(SpaceAdd)
 
-  const showSpacesMenu = () => (spacePaths.length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd))
+  const showSpacesMenu = () => (spaceUrls.length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd))
+
+  const showOtherSpacesMenu = () => pushModal(MenuOtherSpaces, {urls: secondarySpaceUrls})
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 
   const openChat = () => ($canDecrypt ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
 
+  const hasNotification = (url: string) => {
+    const path = makeSpacePath(url)
+
+    return !$page.url.pathname.startsWith(path) && $notifications.has(path)
+  }
+
+  let windowHeight = $state(0)
+
+  const itemHeight = 56
+  const navPadding = 6 * itemHeight
+  const itemLimit = $derived((windowHeight - navPadding) / itemHeight)
   const spaceUrls = $derived(Array.from($userRoomsByUrl.keys()))
-  const spacePaths = $derived(spaceUrls.map(url => makeSpacePath(url)))
-  const anySpaceNotifications = $derived(
-    spacePaths.some(path => !$page.url.pathname.startsWith(path) && $notifications.has(path)),
-  )
+  const [primarySpaceUrls, secondarySpaceUrls] = $derived(splitAt(itemLimit, spaceUrls))
+  const anySpaceNotifications = $derived(spaceUrls.some(hasNotification))
+  const otherSpaceNotifications = $derived(secondarySpaceUrls.some(hasNotification))
 </script>
 
+<svelte:window bind:innerHeight={windowHeight} />
+
 <div class="sail sait saib relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
   <div class="flex h-full flex-col justify-between">
     <div>
@@ -45,9 +61,18 @@
           <Avatar src={PLATFORM_LOGO} class="!h-10 !w-10" />
         </PrimaryNavItem>
         <Divider />
-        {#each spaceUrls as url (url)}
+        {#each primarySpaceUrls as url (url)}
           <PrimaryNavItemSpace {url} />
         {/each}
+        {#if secondarySpaceUrls.length > 0}
+          <PrimaryNavItem
+            title="Other Spaces"
+            class="tooltip-right"
+            onclick={showOtherSpacesMenu}
+            notification={otherSpaceNotifications}>
+            <Avatar icon="widget" class="!h-10 !w-10" />
+          </PrimaryNavItem>
+        {/if}
         <PrimaryNavItem title="Add Space" onclick={addSpace} class="tooltip-right">
           <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
         </PrimaryNavItem>
diff --git a/src/app/editor/index.ts b/src/app/editor/index.ts
index 9b799b4..387c1ec 100644
--- a/src/app/editor/index.ts
+++ b/src/app/editor/index.ts
@@ -11,26 +11,29 @@ import {makeMentionNodeView} from "./MentionNodeView"
 import ProfileSuggestion from "./ProfileSuggestion.svelte"
 
 export const hasBlossomSupport = simpleCache(async ([url]: [string]) => {
-  try {
-    const event = await signer.get()!.sign(
-      makeEvent(BLOSSOM_AUTH, {
-        tags: [
-          ["t", "upload"],
-          ["server", url],
-          ["expiration", String(now() + 30)],
-        ],
-      }),
-    )
+  const $signer = signer.get()
+  const headers: Record<string, string> = {
+    "X-Content-Type": "text/plain",
+    "X-Content-Length": "1",
+    "X-SHA-256": "73cb3858a687a8494ca3323053016282f3dad39d42cf62ca4e79dda2aac7d9ac",
+  }
 
-    const res = await fetch(normalizeUrl(url) + "/upload", {
-      method: "head",
-      headers: {
-        Authorization: `Nostr ${btoa(JSON.stringify(event))}`,
-        "X-Content-Type": "text/plain",
-        "X-Content-Length": "1",
-        "X-SHA-256": "73cb3858a687a8494ca3323053016282f3dad39d42cf62ca4e79dda2aac7d9ac",
-      },
-    })
+  try {
+    if ($signer) {
+      const event = await signer.get().sign(
+        makeEvent(BLOSSOM_AUTH, {
+          tags: [
+            ["t", "upload"],
+            ["server", url],
+            ["expiration", String(now() + 30)],
+          ],
+        }),
+      )
+
+      headers.Authorization = `Nostr ${btoa(JSON.stringify(event))}`
+    }
+
+    const res = await fetch(normalizeUrl(url) + "/upload", {method: "head", headers})
 
     return res.status === 200
   } catch (e) {
@@ -38,6 +41,8 @@ export const hasBlossomSupport = simpleCache(async ([url]: [string]) => {
       console.error(e)
     }
   }
+
+  return false
 })
 
 export const getUploadUrl = async (spaceUrl?: string) => {
diff --git a/src/app/state.ts b/src/app/state.ts
index bb434cd..2016737 100644
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -629,11 +629,11 @@ export const userRoomsByUrl = withGetter(
     const $userRoomsByUrl = new Map<string, Set<string>>()
 
     for (const [_, room, url] of getGroupTags(tags)) {
-      addToMapKey($userRoomsByUrl, url, room)
+      addToMapKey($userRoomsByUrl, normalizeRelayUrl(url), room)
     }
 
     for (const url of getRelayTagValues(tags)) {
-      addToMapKey($userRoomsByUrl, url, GENERAL)
+      addToMapKey($userRoomsByUrl, normalizeRelayUrl(url), GENERAL)
     }
 
     return $userRoomsByUrl
diff --git a/src/assets/icons/Menu Dots Circle.svg b/src/assets/icons/Menu Dots Circle.svg
new file mode 100644
index 0000000..f76a4cc
--- /dev/null
+++ b/src/assets/icons/Menu Dots Circle.svg	
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99986 12H8.00887M12.0044 12H12.0134M15.9908 12H15.9999" stroke="#1C274C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/>
+</svg>
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index 9db7002..c49da66 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -58,6 +58,7 @@
   import Mailbox from "@assets/icons/Mailbox.svg?dataurl"
   import MapPoint from "@assets/icons/Map Point.svg?dataurl"
   import MenuDots from "@assets/icons/Menu Dots.svg?dataurl"
+  import MenuDotsCircle from "@assets/icons/Menu Dots Circle.svg?dataurl"
   import NotesMinimalistic from "@assets/icons/Notes Minimalistic.svg?dataurl"
   import Pallete2 from "@assets/icons/Pallete 2.svg?dataurl"
   import Paperclip from "@assets/icons/Paperclip.svg?dataurl"
@@ -149,6 +150,7 @@
     mailbox: Mailbox,
     "map-point": MapPoint,
     "menu-dots": MenuDots,
+    "menu-dots-circle": MenuDotsCircle,
     "notes-minimalistic": NotesMinimalistic,
     "pallete-2": Pallete2,
     paperclip: Paperclip,