Show lock icon for closed channels

src/app/components/MenuSpace.svelte

@@ -14,7 +14,6 @@
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import ProfileList from "@app/components/ProfileList.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
   import MenuSpaceRoomItem from "@app/components/MenuSpaceRoomItem.svelte"
   import {
     getMembershipUrls,
@@ -121,7 +120,7 @@
       <div class="h-2" />
       <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
       {#each $userRooms as room, i (room)}
-        <MenuSpaceRoomItem {url} {room} />
+        <MenuSpaceRoomItem notify {url} {room} />
       {/each}
       {#if $otherRooms.length > 0}
         <div class="h-2" />
@@ -134,12 +133,7 @@
         </SecondaryNavHeader>
       {/if}
       {#each $otherRooms as room, i (room)}
-        <SecondaryNavItem href={makeSpacePath(url, room)}>
+        <MenuSpaceRoomItem {url} {room} />
-          <Icon icon="hashtag" />
-          <div class="min-w-0 overflow-hidden text-ellipsis">
-            <ChannelName {url} {room} />
-          </div>
-        </SecondaryNavItem>
       {/each}
       <SecondaryNavItem on:click={addRoom}>
         <Icon icon="add-circle" />

src/app/components/MenuSpaceRoomItem.svelte

@@ -1,19 +1,29 @@
 <script lang="ts">
+  import {readable} from "svelte/store"
   import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import ChannelName from "@app/components/ChannelName.svelte"
   import {makeSpacePath} from "@app/routes"
+  import {deriveChannel, channelIsLocked} from "@app/state"
   import {deriveNotification, getRoomFilters} from "@app/notifications"
 
   export let url
   export let room
+  export let notify = false
 
   const path = makeSpacePath(url, room)
-  const notification = deriveNotification(path, getRoomFilters(room), url)
+  const channel = deriveChannel(url, room)
+  const notification = notify
+    ? deriveNotification(path, getRoomFilters(room), url)
+    : readable(false)
 </script>
 
 <SecondaryNavItem href={path} notification={$notification}>
-  <Icon icon="hashtag" />
+  {#if channelIsLocked($channel)}
+    <Icon icon="lock" size={4} />
+  {:else}
+    <Icon icon="hashtag" />
+  {/if}
   <div class="min-w-0 overflow-hidden text-ellipsis">
     <ChannelName {url} {room} />
   </div>

src/app/components/ThunkStatus.svelte

@@ -50,9 +50,9 @@
       component={ThunkStatusDetail}
       props={{url, message, status, retry}}
       params={{interactive: true}}>
-      <span class="flex cursor-pointer items-center gap-1">
+      <span class="flex cursor-pointer items-center gap-1 text-error">
         <Icon icon="danger" size={3} />
-        <span class="opacity-50">Failed to send!</span>
+        <span>Failed to send!</span>
       </span>
     </Tippy>
   {:else if canCancel || isPending}

src/app/notifications.ts

@@ -12,6 +12,8 @@ import {LEGACY_THREAD, deriveEventsForUrl, getMembershipUrls, userMembership} fr
 
 export const checked = writable<Record<string, number>>({})
 
+checked.subscribe(v => console.trace("======", v))
+
 export const deriveChecked = (key: string) => derived(checked, prop(key))
 
 export const setChecked = (key: string, ts = now()) =>

src/app/state.ts

@@ -561,8 +561,8 @@ export const channelsById = withGetter(
             }
 
             channel.meta = {
-              access: meta.public ? "public" : "private",
+              access: meta.private ? "private" : "public",
-              membership: meta.open ? "open" : "closed",
+              membership: meta.closed ? "closed" : "open",
               picture: meta.picture,
               about: meta.about,
             }
@@ -604,6 +604,9 @@ export const displayChannel = (url: string, room: string) => {
 export const roomComparator = (url: string) => (room: string) =>
   displayChannel(url, room).toLowerCase()
 
+export const channelIsLocked = (channel?: Channel) =>
+  channel?.meta?.access === "private" && channel?.meta?.membership === "closed"
+
 // User stuff
 
 export const userSettings = withGetter(

src/assets/icons/Lock.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="M2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.75736 10 5.17157 10 8 10H16C18.8284 10 20.2426 10 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M6 10V8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8V10" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/lib/components/Icon.svelte

@@ -51,6 +51,7 @@
   import KeyMinimalisticSquare3 from "@assets/icons/Key Minimalistic Square 3.svg?dataurl"
   import Letter from "@assets/icons/Letter.svg?dataurl"
   import LinkRound from "@assets/icons/Link Round.svg?dataurl"
+  import Lock from "@assets/icons/Lock.svg?dataurl"
   import Login from "@assets/icons/Login.svg?dataurl"
   import Login2 from "@assets/icons/Login 2.svg?dataurl"
   import Magnifer from "@assets/icons/Magnifer.svg?dataurl"
@@ -133,6 +134,7 @@
     letter: Letter,
     "link-round": LinkRound,
     login: Login,
+    lock: Lock,
     "login-2": Login2,
     magnifer: Magnifer,
     mailbox: Mailbox,

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

@@ -10,7 +10,14 @@
   import ChannelName from "@app/components/ChannelName.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
-  import {decodeRelay, deriveUserRooms, deriveOtherRooms} from "@app/state"
+  import {
+    decodeRelay,
+    channelIsLocked,
+    makeChannelId,
+    channelsById,
+    deriveUserRooms,
+    deriveOtherRooms,
+  } from "@app/state"
   import {makeChatPath, makeRoomPath, makeSpacePath} from "@app/routes"
 
   const url = decodeRelay($page.params.relay)
@@ -98,7 +105,11 @@
         <Link
           href={makeRoomPath(url, room)}
           class="btn btn-neutral flex-nowrap justify-start whitespace-nowrap border-none">
-          <Icon icon="hashtag" />
+          {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
+            <Icon icon="lock" size={4} />
+          {:else}
+            <Icon icon="hashtag" />
+          {/if}
           <div class="min-w-0 overflow-hidden text-ellipsis">
             <ChannelName {url} {room} />
           </div>
@@ -108,7 +119,11 @@
         <Link
           href={makeRoomPath(url, room)}
           class="bg-alt btn btn-neutral flex-nowrap justify-start whitespace-nowrap border-none">
-          <Icon icon="hashtag" />
+          {#if channelIsLocked($channelsById.get(makeChannelId(url, room)))}
+            <Icon icon="lock" size={4} />
+          {:else}
+            <Icon icon="hashtag" />
+          {/if}
           <div class="min-w-0 overflow-hidden text-ellipsis">
             <ChannelName {url} {room} />
           </div>