From 41fb6f95b2d2121c8482cf8f61e93729a72f2552 Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Fri, 3 Apr 2026 20:41:08 +0530
Subject: [PATCH 1/3] feat: show space name on hover in primary nav (#129)

---
 src/app/components/PrimaryNavItemSpace.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/PrimaryNavItemSpace.svelte b/src/app/components/PrimaryNavItemSpace.svelte
index 2b675972..d1ef13b4 100644
--- a/src/app/components/PrimaryNavItemSpace.svelte
+++ b/src/app/components/PrimaryNavItemSpace.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {displayRelayUrl} from "@welshman/util"
+  import {deriveRelayDisplay} from "@welshman/app"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import RelayIcon from "@app/components/RelayIcon.svelte"
   import {makeSpacePath, goToSpace} from "@app/util/routes"
@@ -12,11 +12,13 @@
   const {url}: Props = $props()
 
   const onClick = () => goToSpace(url)
+
+  const display = $derived(deriveRelayDisplay(url))
 </script>
 
 <PrimaryNavItem
   onclick={onClick}
-  title={displayRelayUrl(url)}
+  title={$display}
   class="tooltip-right"
   notification={$notifications.has(makeSpacePath(url))}>
   <RelayIcon {url} size={10} class="rounded-full" />
-- 
2.52.0


From 503c2bbd40b2c90ced72ffe5d9150abfd556ccce Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Sat, 4 Apr 2026 03:55:58 +0530
Subject: [PATCH 2/3] feat: robust navigation tooltips for Firefox/Zen
 compatibility (#129)

---
 src/app.css                              |  6 ++++
 src/lib/components/PrimaryNavItem.svelte | 41 +++++++++++++-----------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/app.css b/src/app.css
index e283ad25..ac7f8dfd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -219,6 +219,12 @@
 
 [data-tip]::before {
   @apply ellipsize;
+  background-color: #1f2937 !important;
+  color: #f9fafb !important;
+}
+
+[data-tip]::after {
+  border-right-color: #1f2937 !important;
 }
 
 .content-padding-x {
diff --git a/src/lib/components/PrimaryNavItem.svelte b/src/lib/components/PrimaryNavItem.svelte
index 534bb404..9af5cd72 100644
--- a/src/lib/components/PrimaryNavItem.svelte
+++ b/src/lib/components/PrimaryNavItem.svelte
@@ -13,32 +13,35 @@
   } = $props()
 
   const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
+
+  const wrapperClass = $derived(
+    ["relative h-14 w-14 p-1", title ? "tooltip tooltip-right" : ""].filter(Boolean).join(" "),
+  )
+
+  const innerClass = $derived(
+    [
+      "flex h-full w-full cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-base-300",
+      restProps.class,
+    ]
+      .filter(Boolean)
+      .join(" "),
+  )
 </script>
 
-{#if onclick}
-  <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      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}>
+<div class={wrapperClass} data-tip={title}>
+  {#if onclick}
+    <Button {onclick} class={innerClass}>
       {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
-    </div>
-  </Button>
-{:else}
-  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      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}>
+    </Button>
+  {:else}
+    <a {href} class={innerClass}>
       {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
-    </div>
-  </a>
-{/if}
+    </a>
+  {/if}
+</div>
-- 
2.52.0


From 9ae3c8290a1644e690165cccd2cda7b8b66c183b Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Sat, 4 Apr 2026 23:31:11 +0530
Subject: [PATCH 3/3] style: Navigation tooltip improvements and Firefox fix

- Refactor PrimaryNavItem and SecondaryNavItem to use 'cx' utility.
- Add tooltip support to SecondaryNavItem and SpaceMenu room items.
- Remove hardcoded tooltip colors from app.css.
- Fix Firefox PrimaryNav tooltip visibility by increasing z-index and adding isolation: isolate.
---
 src/app.css                                 |  6 ----
 src/app/components/PrimaryNav.svelte        | 13 +++-----
 src/app/components/PrimaryNavSpaces.svelte  |  3 +-
 src/app/components/SpaceMenu.svelte         |  7 ++--
 src/app/components/SpaceMenuRoomItem.svelte |  3 +-
 src/lib/components/PrimaryNavItem.svelte    | 11 +++---
 src/lib/components/SecondaryNavItem.svelte  | 37 +++++++++++----------
 7 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/src/app.css b/src/app.css
index ac7f8dfd..e283ad25 100644
--- a/src/app.css
+++ b/src/app.css
@@ -219,12 +219,6 @@
 
 [data-tip]::before {
   @apply ellipsize;
-  background-color: #1f2937 !important;
-  color: #f9fafb !important;
-}
-
-[data-tip]::after {
-  border-right-color: #1f2937 !important;
 }
 
 .content-padding-x {
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 32638e94..b199b951 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -32,18 +32,14 @@
 </script>
 
 <div
-  class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-2 md:block">
+  class="ml-sai mt-sai mb-sai relative z-popover isolate hidden w-14 flex-shrink-0 bg-base-200 pt-2 md:block">
   <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
     <PrimaryNavSpaces />
     {#if PLATFORM_RELAYS.length > 0}
       <Divider />
     {/if}
-    <div>
-      <PrimaryNavItem
-        title="Settings"
-        href="/settings/profile"
-        prefix="/settings"
-        class="tooltip-right">
+    <div class="flex flex-col">
+      <PrimaryNavItem title="Settings" href="/settings/profile" prefix="/settings">
         {#if $userProfile?.picture}
           <ImageIcon alt="Settings" src={$userProfile?.picture} class="rounded-full" size={10} />
         {:else}
@@ -53,11 +49,10 @@
       <PrimaryNavItem
         title="Messages"
         onclick={chatHandler}
-        class="tooltip-right"
         notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
+      <PrimaryNavItem title="Search" href="/people">
         <ImageIcon alt="Search" src={Magnifier} size={8} />
       </PrimaryNavItem>
     </div>
diff --git a/src/app/components/PrimaryNavSpaces.svelte b/src/app/components/PrimaryNavSpaces.svelte
index 8f692ca8..60390360 100644
--- a/src/app/components/PrimaryNavSpaces.svelte
+++ b/src/app/components/PrimaryNavSpaces.svelte
@@ -23,7 +23,7 @@
   {#each PLATFORM_RELAYS as url (url)}
     <PrimaryNavItemSpace {url} />
   {:else}
-    <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
+    <PrimaryNavItem title="Home" href="/home">
       <ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" size={10} />
     </PrimaryNavItem>
     <Divider />
@@ -33,7 +33,6 @@
     <PrimaryNavItem
       href="/spaces"
       title="All Spaces"
-      class="tooltip-right"
       prefix="no-highlight"
       notification={otherSpaceNotifications}>
       <ImageIcon alt="All Spaces" src={Widget} size={8} />
diff --git a/src/app/components/SpaceMenu.svelte b/src/app/components/SpaceMenu.svelte
index fd8d8a5d..78a03fef 100644
--- a/src/app/components/SpaceMenu.svelte
+++ b/src/app/components/SpaceMenu.svelte
@@ -2,7 +2,7 @@
   import {derived} from "svelte/store"
   import {displayRelayUrl, EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED} from "@welshman/util"
   import {Poll} from "nostr-tools/kinds"
-  import {deriveRelay, createSearch, pubkey} from "@welshman/app"
+  import {deriveRelay, deriveRelayDisplay, createSearch, pubkey} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
@@ -66,6 +66,7 @@
   const {url} = $props()
 
   const relay = deriveRelay(url)
+  const display = deriveRelayDisplay(url)
   const chatPath = makeSpacePath(url, "chat")
   const goalsPath = makeSpacePath(url, "goals")
   const threadsPath = makeSpacePath(url, "threads")
@@ -144,7 +145,9 @@
         class="relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-base-100"
         onclick={openMenu}>
         <div class="flex items-center justify-between">
-          <strong class="flex items-center gap-1 relative">
+          <strong
+            class="flex items-center gap-1 relative tooltip tooltip-right"
+            data-tip={$display}>
             <RelayName {url} class="ellipsize" />
             <div
               class="absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary transition-all opacity-0"
diff --git a/src/app/components/SpaceMenuRoomItem.svelte b/src/app/components/SpaceMenuRoomItem.svelte
index a850329f..96a88c3c 100644
--- a/src/app/components/SpaceMenuRoomItem.svelte
+++ b/src/app/components/SpaceMenuRoomItem.svelte
@@ -24,12 +24,13 @@
   const shouldNotifyForRoom = deriveShouldNotify(url, h)
   const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
   const notification = $derived($shouldNotifyForRoom ? $notifications.has(path) : false)
+  const roomName = $derived($room?.name || h)
 </script>
 
 {#if roomType === RoomType.Voice}
   <VoiceRoomItem {url} {h} {replaceState} {notification} />
 {:else}
-  <SecondaryNavItem href={path} {replaceState} {notification}>
+  <SecondaryNavItem href={path} title={roomName} {replaceState} {notification}>
     <RoomNameWithImage {url} {h} />
     {#if showDifferenceIcon}
       <Icon icon={$shouldNotifyForRoom ? Bell : BellOff} size={4} class="opacity-50" />
diff --git a/src/lib/components/PrimaryNavItem.svelte b/src/lib/components/PrimaryNavItem.svelte
index 9af5cd72..ef17c631 100644
--- a/src/lib/components/PrimaryNavItem.svelte
+++ b/src/lib/components/PrimaryNavItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import {page} from "$app/stores"
   import Button from "@lib/components/Button.svelte"
 
@@ -15,16 +16,16 @@
   const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
 
   const wrapperClass = $derived(
-    ["relative h-14 w-14 p-1", title ? "tooltip tooltip-right" : ""].filter(Boolean).join(" "),
+    cx("relative h-14 w-14 p-1", {
+      "tooltip tooltip-right": title,
+    }),
   )
 
   const innerClass = $derived(
-    [
+    cx(
       "flex h-full w-full cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-base-300",
       restProps.class,
-    ]
-      .filter(Boolean)
-      .join(" "),
+    ),
   )
 </script>
 
diff --git a/src/lib/components/SecondaryNavItem.svelte b/src/lib/components/SecondaryNavItem.svelte
index f3416331..ea4544c6 100644
--- a/src/lib/components/SecondaryNavItem.svelte
+++ b/src/lib/components/SecondaryNavItem.svelte
@@ -21,37 +21,40 @@
 </style>
 
 <script lang="ts">
+  import cx from "classnames"
   import {fade} from "@lib/transition"
   import {page} from "$app/stores"
 
-  const {children, href = "", notification = false, replaceState = false, ...restProps} = $props()
+  const {
+    children,
+    href = "",
+    title = "",
+    notification = false,
+    replaceState = false,
+    ...restProps
+  } = $props()
 
   const active = $derived($page.url.pathname === href)
+  const wrapperClass = $derived(
+    cx(restProps.class, "relative flex flex-shrink-0 items-center gap-3 text-left transition-all", {
+      "hover:bg-base-100 hover:text-base-content": true,
+      "text-base-content bg-base-100": active,
+      "tooltip tooltip-right": title,
+    }),
+  )
 </script>
 
 {#if href}
-  <a
-    {href}
-    {...restProps}
-    data-sveltekit-replacestate={replaceState}
-    class="{restProps.class} relative flex flex-shrink-0 items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
-    class:text-base-content={active}
-    class:bg-base-100={active}>
+  <a {href} {...restProps} data-tip={title} data-sveltekit-replacestate={replaceState} class={wrapperClass}>
     {@render children?.()}
     {#if notification}
-      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
-      </div>
+      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
   </a>
 {:else}
-  <button
-    {...restProps}
-    class="{restProps.class} relative flex flex-shrink-0 w-full items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
-    class:text-base-content={active}
-    class:bg-base-100={active}>
+  <button {...restProps} data-tip={title} class={wrapperClass}>
     {#if notification}
-      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
-      </div>
+      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
     {@render children?.()}
   </button>
-- 
2.52.0