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>