Small css tweak

Co-authored-by: nayan9617 <nayanp4925@gmail.com>
Co-committed-by: nayan9617 <nayanp4925@gmail.com>

src/app.css

@@ -364,6 +364,14 @@
 
 /* tippy popover */
 
+.tippy-target {
+  @apply pointer-events-none fixed inset-0 z-tooltip;
+}
+
+.tippy-target > * {
+  pointer-events: auto;
+}
+
 .tippy-box {
   @apply rounded-box shadow-xl;
 }

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>

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" />

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} />

src/app/components/RoomDetail.svelte

@@ -22,6 +22,7 @@
   import Button from "@lib/components/Button.svelte"
   import Popover from "@lib/components/Popover.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
+  import Tooltip from "@lib/components/Tooltip.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
@@ -206,39 +207,39 @@
       <strong class="text-lg">Room Permissions</strong>
       <div class="flex gap-2 flex-wrap">
         {#if $room?.isRestricted}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="Only members can send messages.">
-            <Icon size={4} icon={Microphone} /> Restricted
-          </Button>
+          <Tooltip content="Only members can send messages.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Microphone} /> Restricted
+            </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isPrivate}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="Only members can view messages.">
-            <Icon size={4} icon={Lock} /> Private
-          </Button>
+          <Tooltip content="Only members can view messages.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Lock} /> Private
+            </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isHidden}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="This room is not visible to non-members.">
-            <Icon size={4} icon={EyeClosed} /> Hidden
-          </Button>
+          <Tooltip content="This room is not visible to non-members.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={EyeClosed} /> Hidden
+            </Button>
+          </Tooltip>
         {/if}
         {#if $room?.isClosed}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="Requests to join this room will be ignored.">
-            <Icon size={4} icon={MinusCircle} /> Closed
-          </Button>
+          <Tooltip content="Requests to join this room will be ignored.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={MinusCircle} /> Closed
+            </Button>
+          </Tooltip>
         {/if}
         {#if !$room?.isRestricted && !$room?.isPrivate && !$room?.isHidden && !$room?.isClosed}
-          <Button
-            class="btn btn-neutral btn-xs rounded-full tooltip flex gap-2 items-center"
-            data-tip="This room has no additional access controls.">
-            <Icon size={4} icon={Eye} /> Public
-          </Button>
+          <Tooltip content="This room has no additional access controls.">
+            <Button class="btn btn-neutral btn-xs rounded-full flex gap-2 items-center">
+              <Icon size={4} icon={Eye} /> Public
+            </Button>
+          </Tooltip>
         {/if}
       </div>
     </div>

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"

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" />

src/app/components/Toast.svelte

@@ -88,9 +88,9 @@
         class:text-base-content={theme === "info"}
         class:alert-error={theme === "error"}>
         <Button
-          class="absolute -top-2 -right-2 btn btn-circle btn-neutral btn-xs hidden md:inline-flex"
+          class="absolute -top-2 -right-2 btn btn-circle btn-neutral btn-xs hidden md:inline-flex flex justify-center items-center"
           onclick={onClose}>
-          <Icon icon={Close} size={3} />
+          <Icon icon={Close} size={4} />
         </Button>
         <p class="md:pr-6" class:welshman-content-error={theme === "error"}>
           {#if $toast.message}

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"
 
@@ -13,32 +14,35 @@
   } = $props()
 
   const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
+
+  const wrapperClass = $derived(
+    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,
+    ),
+  )
 </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>

src/lib/components/SecondaryNavItem.svelte

@@ -21,22 +21,36 @@
 </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-tip={title}
     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}>
+    class={wrapperClass}>
     {@render children?.()}
     {#if notification}
       <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
@@ -44,11 +58,7 @@
     {/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>

src/routes/settings/profile/+page.svelte

@@ -84,7 +84,7 @@
           </div>
         </div>
       </div>
-      <Button class="center btn btn-circle btn-neutral -mr-4 -mt-4 h-12 w-12" onclick={startEdit}>
+      <Button class="center btn btn-circle btn-neutral -mr-2 -mt-2 h-12 w-12" onclick={startEdit}>
         <Icon icon={PenNewSquare} />
       </Button>
     </div>

tailwind.config.js

@@ -9,7 +9,7 @@ config({path: ".env"})
 export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
   darkMode: ["selector", '[data-theme="dark"]'],
-  safelist: ["bg-success", "bg-warning", 'w-4 h-4'],
+  safelist: ["bg-success", "bg-warning", "w-4 h-4"],
   theme: {
     extend: {},
     zIndex: {
@@ -21,7 +21,7 @@ export default {
       nav: 5,
       popover: 6,
       modal: 7,
-      "modal-feature": 8,
+      tooltip: 8,
       toast: 9,
     },
   },