Add room policy indicator

src/app/components/IconPicker.svelte

@@ -43,7 +43,7 @@
   }
 </script>
 
-<div class="w-96 rounded-box bg-base-100 p-4 shadow-lg">
+<div class="w-96 rounded-box bg-base-100 p-4 shadow-2xl">
   <label class="input input-bordered flex w-full items-center gap-2">
     <Icon icon={Magnifier} />
     <input bind:value={searchTerm} class="grow" type="text" placeholder="Search icons..." />

src/app/components/MenuSpace.svelte

@@ -8,6 +8,7 @@
   import RemoteControllerMinimalistic from "@assets/icons/remote-controller-minimalistic.svg?dataurl"
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
+  import SquareTopDown from "@assets/icons/square-top-down.svg?dataurl"
   import Exit from "@assets/icons/logout-3.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Login from "@assets/icons/login-3.svg?dataurl"
@@ -157,6 +158,7 @@
                 <Link external href="https://landlubber.coracle.social">
                   <Icon icon={Tuning2} />
                   Manage Space
+                  <Icon icon={SquareTopDown} size={4} class="opacity-50" />
                 </Link>
               </li>
             {:else if $relay?.pubkey}
@@ -184,7 +186,7 @@
         </Popover>
       {/if}
     </div>
-    <div class="flex max-h-[calc(100vh-150px)] min-h-0 flex-col gap-1 overflow-auto">
+    <div class="flex max-h-[calc(100vh-250px)] min-h-0 flex-col gap-1 overflow-auto">
       {#if hasNip29($relay)}
         <SecondaryNavItem {replaceState} href={makeSpacePath(url, "recent")}>
           <Icon icon={History} /> Recent Activity

src/app/components/RoomAccess.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import EyeClosed from "@assets/icons/eye-closed.svg?dataurl"
+  import Lock from "@assets/icons/lock.svg?dataurl"
+  import Microphone from "@assets/icons/microphone.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import {deriveRoom} from "@app/core/state"
+
+  interface Props {
+    h: any
+    url: any
+  }
+
+  const {url, h}: Props = $props()
+
+  const room = deriveRoom(url, h)
+</script>
+
+{#if $room.isHidden}
+  <Button
+    class="btn btn-neutral btn-sm tooltip tooltip-left"
+    data-tip="This room is not visible to non-members.">
+    <Icon size={4} icon={EyeClosed} />
+  </Button>
+{:else if $room.isPrivate}
+  <Button
+    class="btn btn-neutral btn-sm tooltip tooltip-left"
+    data-tip="Only members can view messages.">
+    <Icon size={4} icon={Lock} />
+  </Button>
+{:else if $room.isRestricted}
+  <Button
+    class="btn btn-neutral btn-sm tooltip tooltip-left"
+    data-tip="Only members can send messages.">
+    <Icon size={4} icon={Microphone} />
+  </Button>
+{/if}

src/app/components/RoomImage.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import Hashtag from "@assets/icons/hashtag.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import ImageIcon from "@lib/components/ImageIcon.svelte"
+  import {deriveRoom} from "@app/core/state"
+
+  interface Props {
+    h: any
+    url: any
+  }
+
+  const {url, h}: Props = $props()
+
+  const room = deriveRoom(url, h)
+</script>
+
+{#if $room.picture}
+  <ImageIcon src={$room.picture} alt="Room icon" />
+{:else}
+  <Icon icon={Hashtag} />
+{/if}

src/app/components/RoomName.svelte

@@ -4,4 +4,6 @@
   const {url, h} = $props()
 </script>
 
-{$roomsById.get(makeRoomId(url, h))?.name || h}
+<span class="ellipsize">
+  {$roomsById.get(makeRoomId(url, h))?.name || h}
+</span>

src/app/components/RoomNameWithImage.svelte

@@ -1,26 +1,20 @@
 <script lang="ts">
-  import Hashtag from "@assets/icons/hashtag.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import ImageIcon from "@lib/components/ImageIcon.svelte"
   import RoomName from "@app/components/RoomName.svelte"
-  import {deriveRoom} from "@app/core/state"
+  import RoomImage from "@app/components/RoomImage.svelte"
 
   interface Props {
-    url: any
     h: any
+    url: any
   }
 
   const {url, h}: Props = $props()
-
-  const room = deriveRoom(url, h)
 </script>
 
-{#if $room.picture}
-  {@const src = $room.picture}
-  <ImageIcon {src} alt="Room icon" />
-{:else}
-  <Icon icon={Hashtag} />
-{/if}
-<div class="min-w-0 overflow-hidden text-ellipsis">
-  <RoomName {url} {h} />
+<div class="flex flex-grow items-center justify-between gap-4">
+  <div class="flex items-center gap-3">
+    <RoomImage {url} {h} />
+    <div class="min-w-0 overflow-hidden text-ellipsis">
+      <RoomName {url} {h} />
+    </div>
+  </div>
 </div>

src/lib/components/Tooltip.svelte

@@ -0,0 +1,67 @@
+<style>
+  :global(.tippy-box[data-theme~="tooltip"]) {
+    background-color: var(--neutral);
+    color: var(--neutral-content);
+    border-radius: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+
+  :global(.tippy-box[data-theme~="tooltip"][data-placement^="top"] > .tippy-arrow::before) {
+    border-top-color: var(--neutral);
+  }
+
+  :global(.tippy-box[data-theme~="tooltip"][data-placement^="bottom"] > .tippy-arrow::before) {
+    border-bottom-color: var(--neutral);
+  }
+
+  :global(.tippy-box[data-theme~="tooltip"][data-placement^="left"] > .tippy-arrow::before) {
+    border-left-color: var(--neutral);
+  }
+
+  :global(.tippy-box[data-theme~="tooltip"][data-placement^="right"] > .tippy-arrow::before) {
+    border-right-color: var(--neutral);
+  }
+</style>
+
+<script lang="ts">
+  import "tippy.js/animations/shift-away.css"
+
+  import tippy from "tippy.js"
+  import {onMount} from "svelte"
+  import {isMobile} from "@lib/html"
+
+  let {
+    content,
+    arrow = true,
+    interactive = false,
+    children = undefined,
+    instance = $bindable(),
+    ...restProps
+  } = $props()
+
+  let element: Element
+
+  onMount(() => {
+    instance = tippy(element, {
+      content,
+      arrow,
+      interactive,
+      animation: "shift-away",
+      theme: "tooltip",
+      appendTo: document.querySelector(".tippy-target")!,
+      trigger: isMobile ? "click" : "mouseenter focus",
+    })
+
+    return () => {
+      instance?.destroy()
+    }
+  })
+</script>
+
+<div bind:this={element} class={restProps.class}>
+  {@render children?.()}
+</div>

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -16,7 +16,6 @@
   } from "@welshman/util"
   import {pubkey, publishThunk, waitForThunkError, joinRoom, leaveRoom} from "@welshman/app"
   import {slide, fade, fly} from "@lib/transition"
-  import Hashtag from "@assets/icons/hashtag.svg?dataurl"
   import Pen from "@assets/icons/pen.svg?dataurl"
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import Login2 from "@assets/icons/login-3.svg?dataurl"
@@ -33,6 +32,8 @@
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import RoomEdit from "@app/components/RoomEdit.svelte"
   import RoomName from "@app/components/RoomName.svelte"
+  import RoomAccess from "@app/components/RoomAccess.svelte"
+  import RoomImage from "@app/components/RoomImage.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
   import RoomItemRemoveMember from "@src/app/components/RoomItemRemoveMember.svelte"
@@ -334,17 +335,14 @@
 
 <PageBar>
   {#snippet icon()}
-    <div class="center">
-      <Icon icon={Hashtag} />
-    </div>
+    <RoomImage {url} {h} />
   {/snippet}
   {#snippet title()}
-    <strong class="ellipsize">
-      <RoomName {url} {h} />
-    </strong>
+    <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}
     <div class="row-2">
+      <RoomAccess {url} {h} />
       {#if $userIsAdmin}
         <Button
           class="btn btn-neutral btn-sm tooltip tooltip-left"