Fix anonymous UX

.env

@@ -1,6 +1,6 @@
 VITE_THEME=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-dark:#8D8581,gray-light:#A8A5A4,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1
-VITE_DEFAULT_FOLLOWS=97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,6e468422dfb74a5738702a8823b9b28168abab8655faacb6853cd0ee15deee93
-VITE_DUFFLEPUD_URL=
+VITE_DEFAULT_FOLLOWS=1739d937dc8c0c7370aa27585938c119e25c41f6c441a5d34c6d38503e3136ef,fa984bd7dbb282f07e16e7ae87b26a2a7b9b90b7246a44771f0cf5ae58018f52,cc8d072efdcc676fcbac14f6cd6825edc3576e55eb786a2a975ee034a6a026cb,d91191e30e00444b942c0e82cad470b32af171764c2275bee0bd99377efd4075,3335d373e6c1b5bc669b4b1220c08728ea8ce622e5a7cfeeb4c0001d91ded1de,0b118e40d6f3dfabb17f21a94a647701f140d8b063a9e84fe6e483644edc09cb,b83a28b7e4e5d20bd960c5faeb6625f95529166b8bdb045d42634a2f35919450,958b754a1d3de5b5eca0fe31d2d555f451325f8498a83da1997b7fcd5c39e88c,a4cb51f4618cfcd16b2d3171c466179bed8e197c43b8598823b04de266cef110,e56e7b4326618f3d626c0e398f5082c3b16732e469e0a048b7ddb544c2be294a,011c1b374c12fbd3633e98957d3c46bed67983abecef50706c73a77c171d0d2c,b9e76546ba06456ed301d9e52bc49fa48e70a6bf2282be7a1ae72947612023dc,b708f7392f588406212c3882e7b3bc0d9b08d62f95fa170d099127ece2770e5e,5c508c34f58866ec7341aaf10cc1af52e9232bb9f859c8103ca5ecf2aa93bf78,baf27a4cc4da49913e7fdecc951fd3b971c9279959af62b02b761a043c33384c,2edbcea694d164629854a52583458fd6d965b161e3c48b57d3aff01940558884,0fecf65daa26faf3f668e8143325a4c199a040b6345ed40a08614d7dd85b1823,1bc70a0148b3f316da33fe3c89f23e3e71ac4ff998027ec712b905cd24f6a411,f783ba3b12b91e375aba6594015b90bd95f7e132b03cc8c4c52ce0a7c36aab52,3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,ee11a5dff40c19a555f41fe42b48f00e618c91225622ae37b6c2bb67b76c4e49,97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322
+VITE_DUFFLEPUD_URL=http://localhost:8000
 VITE_ENABLE_ZAPS=true
 VITE_FORCE_RELAYS=
 VITE_LOGO_URL=

CHANGELOG.md

@@ -5,6 +5,7 @@
 - [x] Add note preview when composing
 - [x] Merge advanced search, feed options, and lists
 - [x] Fix loading lists on login
+- [x] Improve anonymous user UX
 
 # 0.2.31
 

ROADMAP.md

@@ -1,5 +1,6 @@
 # Current
 
+- [ ] Feeds load forever if a modal is open
 - [ ] Support other list types
 - [ ] Use vida to stream development
 - [ ] Fix connection management stuff. Have GPT help
@@ -14,7 +15,6 @@
 - [ ] Image classification
   - https://github.com/bhky/opennsfw2
 - [ ] Private groups
-- [ ] Fix unauthenticated experience. Going to an npub just spins
 - [ ] Convert app store to nip 89
 - [ ] Put search icon in header or hover button, open in modal
 - [ ] Hide muted quoted events

src/agent/social.ts

@@ -3,9 +3,9 @@ import {Tags} from "src/util/nostr"
 import {getPersonWithFallback} from "src/agent/db"
 import user from "src/agent/user"
 
-export const defaultFollows = (import.meta.env.VITE_DEFAULT_FOLLOWS || "")
-  .split(",")
-  .filter(identity)
+const {VITE_DEFAULT_FOLLOWS} = import.meta.env
+
+export const defaultFollows = (VITE_DEFAULT_FOLLOWS || "").split(",").filter(identity)
 
 export const getFollows = pubkey =>
   Tags.wrap(getPersonWithFallback(pubkey).petnames).type("p").values().all()

src/app/EnsureData.svelte

@@ -1,99 +0,0 @@
-<script>
-  import Anchor from "src/partials/Anchor.svelte"
-  import Content from "src/partials/Content.svelte"
-  import Modal from "src/partials/Modal.svelte"
-  import PersonInfo from "src/app/shared/PersonInfo.svelte"
-  import RelaySearch from "src/app/shared/RelaySearch.svelte"
-  import RelayCard from "src/app/shared/RelayCard.svelte"
-  import PersonSearch from "src/app/shared/PersonSearch.svelte"
-  import {getPersonWithFallback} from "src/agent/db"
-  import user from "src/agent/user"
-  import pool from "src/agent/pool"
-
-  export let enforceRelays = pool.forceUrls.length === 0
-  export let enforcePeople = true
-
-  const {petnamePubkeys, relays} = user
-  const needsRelays = () => $relays.length === 0 && enforceRelays
-  const needsPeople = () => $petnamePubkeys.length === 0 && enforcePeople
-
-  let modal = needsRelays() ? "relays" : needsPeople() ? "people" : null
-
-  const closeModal = () => {
-    modal = null
-  }
-</script>
-
-{#if modal === "relays"}
-  <Modal onEscape={closeModal}>
-    <Content>
-      {#if $relays.length > 0}
-        <h1 class="text-2xl">Your Relays</h1>
-      {/if}
-      <div class="flex flex-col gap-2">
-        {#each $relays as relay (relay.url)}
-          <RelayCard {relay} />
-        {:else}
-          <div class="flex flex-col items-center gap-4 my-8">
-            <div class="text-xl flex gap-2 items-center">
-              <i class="fa fa-triangle-exclamation fa-light" />
-              You aren't yet connected to any relays.
-            </div>
-            <div>Search below to find one to join.</div>
-          </div>
-        {/each}
-      </div>
-      <RelaySearch>
-        <div slot="item" let:relay>
-          <RelayCard {relay} />
-        </div>
-      </RelaySearch>
-    </Content>
-  </Modal>
-{:else if needsRelays()}
-  <Content size="lg">
-    <div class="mt-12 flex flex-col items-center gap-4">
-      <div class="flex items-center gap-2 text-xl">
-        <i class="fa fa-triangle-exclamation fa-light" />
-        You aren't yet connected to any relays.
-      </div>
-      <div>
-        Click <Anchor href="/relays">here</Anchor> to find one to join.
-      </div>
-    </div>
-  </Content>
-{:else if modal === "people"}
-  <Modal onEscape={closeModal}>
-    <Content>
-      {#if $petnamePubkeys.length > 0}
-        <h1 class="text-2xl">Your Follows</h1>
-      {/if}
-      {#each $petnamePubkeys as pubkey (pubkey)}
-        <PersonInfo person={getPersonWithFallback(pubkey)} />
-      {:else}
-        <div class="flex flex-col items-center gap-4 my-8">
-          <div class="text-xl flex gap-2 items-center">
-            <i class="fa fa-triangle-exclamation fa-light" />
-            You aren't yet following anyone.
-          </div>
-          <div>Search below to find some interesting people.</div>
-        </div>
-      {/each}
-      <PersonSearch hideFollows />
-    </Content>
-  </Modal>
-{:else if needsPeople()}
-  <Content size="lg">
-    <div class="mt-12 flex flex-col items-center gap-4">
-      <div class="flex items-center gap-2 text-xl">
-        <i class="fa fa-triangle-exclamation fa-light" />
-        You aren't yet following anyone.
-      </div>
-      <div>
-        Click <Anchor href="/search">here</Anchor> to find some interesting people.
-      </div>
-    </div>
-  </Content>
-{:else}
-  <slot />
-{/if}

src/app/ForegroundButtons.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {nip19} from "nostr-tools"
+  import {navigate} from "svelte-routing"
   import {fade} from "svelte/transition"
   import user from "src/agent/user"
   import {modal, location} from "src/partials/state"
@@ -7,6 +8,7 @@
   let scrollY = 0
 
   $: showCreateNote = $location.pathname.match(/messages|chat|relays$|keys|settings|logout$/)
+  $: showLogin = !$location.pathname.match(/login$/)
 
   const {canPublish} = user
 
@@ -33,7 +35,7 @@
           border border-gray-8 bg-gray-7 text-gray-1 shadow-2xl
           transition-all hover:scale-105 hover:bg-gray-6"
       on:click={scrollToTop}>
-      <span class="fa fa-arrow-up" />
+      <i class="fa fa-arrow-up" />
     </button>
   {/if}
   {#if $canPublish && !showCreateNote}
@@ -42,7 +44,16 @@
             border border-accent-light bg-accent text-white shadow-2xl
             transition-all hover:scale-105 hover:bg-accent-light"
       on:click={createNote}>
-      <span class="fa-plus fa-2xl" />
+      <i class="fa fa-plus" />
+    </button>
+  {/if}
+  {#if !$canPublish && showLogin}
+    <button
+      class="color-white flex h-16 w-16 items-center justify-center rounded-full
+            border border-accent-light bg-accent text-white shadow-2xl
+            transition-all hover:scale-105 hover:bg-accent-light"
+      on:click={() => navigate("/login")}>
+      <i class="fa fa-right-to-bracket" />
     </button>
   {/if}
 </div>

src/app/Routes.svelte

@@ -2,7 +2,6 @@
   import {Route} from "svelte-routing"
   import {onReady} from "src/agent/db"
   import {base64DecodeOrPlainWebSocketURL} from "src/util/misc"
-  import EnsureData from "src/app/EnsureData.svelte"
   import Notifications from "src/app/views/Notifications.svelte"
   import Bech32Entity from "src/app/views/Bech32Entity.svelte"
   import ChatDetail from "src/app/views/ChatDetail.svelte"
@@ -34,14 +33,10 @@
     <Route path="/notifications" component={Notifications} />
     <Route path="/notifications/:activeTab" component={Notifications} />
     <Route path="/search">
-      <EnsureData enforcePeople={false}>
-        <Search />
-      </EnsureData>
+      <Search />
     </Route>
     <Route path="/notes" let:params>
-      <EnsureData>
-        <Feeds />
-      </EnsureData>
+      <Feeds />
     </Route>
     <Route path="/people/:npub/:activeTab" let:params>
       {#key params.npub}

src/app/SideNav.svelte

@@ -107,11 +107,13 @@
         <i class="fa fa-gear mr-2" /> Settings
       </a>
     </li>
-    <li
-      class="block cursor-pointer px-4 py-2 transition-all hover:bg-accent hover:text-white"
-      on:click={toggleTheme}>
-      <i class="fa fa-lightbulb mr-2" /> Theme
-    </li>
+  {/if}
+  <li
+    class="block cursor-pointer px-4 py-2 transition-all hover:bg-accent hover:text-white"
+    on:click={toggleTheme}>
+    <i class="fa fa-lightbulb mr-2" /> Theme
+  </li>
+  {#if $profile.pubkey}
     <li class="cursor-pointer">
       <a class="block px-4 py-2 transition-all hover:bg-accent hover:text-white" href="/logout">
         <i class="fa fa-right-from-bracket mr-2" /> Logout

src/app/shared/FeedAdvanced.svelte

@@ -11,6 +11,7 @@
   import MultiSelect from "src/partials/MultiSelect.svelte"
   import PersonBadge from "src/app/shared/PersonBadge.svelte"
   import {searchTopics, searchPeople, getPersonWithFallback} from "src/agent/db"
+  import {getUserFollows} from "src/agent/social"
 
   export let filter
   export let onChange
@@ -73,6 +74,7 @@
   }
 
   let modal = null
+  let scopeOptions = []
   let _filter = {
     since: filter.since,
     until: filter.since,
@@ -83,6 +85,13 @@
     "#t": (filter["#t"] || []).map(objOf("name")),
     "#p": (filter["#p"] || []).map(getPersonWithFallback),
   }
+
+  $: {
+    scopeOptions =
+      getUserFollows().length > 0
+        ? ["follows", "network", "global", "custom"]
+        : ["network", "global", "custom"]
+  }
 </script>
 
 <div class="flex justify-end gap-1">
@@ -122,7 +131,7 @@
             <SelectButton
               onChange={onScopeChange}
               value={typeof _filter.authors === "string" ? _filter.authors : "custom"}
-              options={["follows", "network", "global", "custom"]} />
+              options={scopeOptions} />
             {#if Array.isArray(_filter.authors)}
               <MultiSelect search={$searchPeople} bind:value={_filter.authors}>
                 <div slot="item" let:item>

src/app/shared/PersonInfo.svelte

@@ -31,7 +31,7 @@
   <Anchor
     type="unstyled"
     on:click={() => modal.push({type: "person/feed", pubkey: person.pubkey})}
-    class="flex gap-4 overflow-hidden border-l-2 border-solid border-gray-7 py-3 px-4
+    class="flex gap-4 overflow-hidden border-l-2 border-solid border-gray-7 py-3 pl-4
            transition-all hover:border-accent hover:bg-gray-8">
     <PersonCircle {person} size={12} />
     <div class="flex min-w-0 flex-grow flex-col gap-4">

src/app/state.ts

@@ -19,7 +19,7 @@ import keys from "src/agent/keys"
 import network from "src/agent/network"
 import pool from "src/agent/pool"
 import {getUserReadRelays, getUserRelays} from "src/agent/relays"
-import {getUserFollows, getUserNetwork} from "src/agent/social"
+import {getUserFollows, getUserNetwork, defaultFollows} from "src/agent/social"
 import user from "src/agent/user"
 
 // Routing
@@ -290,12 +290,14 @@ export const publishWithToast = (relays, thunk) =>
 // Feeds
 
 export const compileFilter = (filter: DynamicFilter): Filter => {
+  const getAuthors = pubkeys => shuffle(pubkeys.length > 0 ? pubkeys : defaultFollows).slice(0, 256)
+
   if (filter.authors === "global") {
     filter = omit(["authors"], filter)
   } else if (filter.authors === "follows") {
-    filter = {...filter, authors: shuffle(getUserFollows()).slice(0, 256)}
+    filter = {...filter, authors: getAuthors(getUserFollows())}
   } else if (filter.authors === "network") {
-    filter = {...filter, authors: shuffle(getUserNetwork()).slice(0, 256)}
+    filter = {...filter, authors: getAuthors(getUserNetwork())}
   }
 
   return filter

src/app/views/ChatList.svelte

@@ -10,14 +10,14 @@
   import {watch} from "src/agent/db"
   import user from "src/agent/user"
   import network from "src/agent/network"
-  import {getUserReadRelays} from "src/agent/relays"
+  import {getUserReadRelays, sampleRelays} from "src/agent/relays"
   import {modal} from "src/partials/state"
 
   let q = ""
   let search
   let results = []
 
-  const {roomsJoined} = user
+  const {roomsJoined, canPublish} = user
   const rooms = derived([watch("rooms", t => t.all()), roomsJoined], ([_rooms, _joined]) => {
     const ids = new Set(_joined)
     const [joined, other] = partition(r => ids.has(r.id), _rooms)
@@ -32,7 +32,7 @@
 
   onMount(() => {
     const sub = network.listen({
-      relays: getUserReadRelays(),
+      relays: sampleRelays(getUserReadRelays()),
       filter: [{kinds: [40, 41]}],
     })
 
@@ -43,25 +43,27 @@
 </script>
 
 <Content>
-  <div class="flex justify-between">
-    <div class="flex items-center gap-2">
-      <i class="fa fa-server fa-lg" />
-      <h2 class="staatliches text-2xl">Your rooms</h2>
+  {#if $canPublish}
+    <div class="flex justify-between">
+      <div class="flex items-center gap-2">
+        <i class="fa fa-server fa-lg" />
+        <h2 class="staatliches text-2xl">Your rooms</h2>
+      </div>
+      <Anchor type="button-accent" on:click={() => modal.push({type: "room/edit"})}>
+        <i class="fa-solid fa-plus" /> Create Room
+      </Anchor>
     </div>
-    <Anchor type="button-accent" on:click={() => modal.push({type: "room/edit"})}>
-      <i class="fa-solid fa-plus" /> Create Room
-    </Anchor>
-  </div>
-  {#each $rooms.joined as room (room.id)}
-    <ChatListItem {room} />
-  {:else}
-    <p class="text-center py-8">You haven't yet joined any rooms.</p>
-  {/each}
-  <div class="mb-2 border-b border-solid border-gray-6 pt-2" />
-  <div class="flex items-center gap-2">
-    <i class="fa fa-earth-asia fa-lg" />
-    <h2 class="staatliches text-2xl">Other rooms</h2>
-  </div>
+    {#each $rooms.joined as room (room.id)}
+      <ChatListItem {room} />
+    {:else}
+      <p class="text-center py-8">You haven't yet joined any rooms.</p>
+    {/each}
+    <div class="mb-2 border-b border-solid border-gray-6 pt-2" />
+    <div class="flex items-center gap-2">
+      <i class="fa fa-earth-asia fa-lg" />
+      <h2 class="staatliches text-2xl">Other rooms</h2>
+    </div>
+  {/if}
   <div class="flex-grow">
     <Input bind:value={q} type="text" placeholder="Search rooms">
       <i slot="before" class="fa-solid fa-search" />

src/app/views/ChatListItem.svelte

@@ -8,7 +8,7 @@
 
   export let room
 
-  const {roomsJoined} = user
+  const {roomsJoined, canPublish} = user
   const enter = () => navigate(`/chat/${nip19.noteEncode(room.id)}`)
   const join = () => user.joinRoom(room.id)
   const leave = () => user.leaveRoom(room.id)
@@ -34,7 +34,7 @@
           <i class="fa fa-right-from-bracket" />
           <span>Leave</span>
         </Anchor>
-      {:else}
+      {:else if $canPublish}
         <Anchor type="button" killEvent class="flex items-center gap-2" on:click={join}>
           <i class="fa fa-right-to-bracket" />
           <span>Join</span>

src/app/views/Feeds.svelte

@@ -9,12 +9,16 @@
   import Popover from "src/partials/Popover.svelte"
   import Feed from "src/app/shared/Feed.svelte"
   import user from "src/agent/user"
+  import {getUserFollows} from "src/agent/social"
 
-  const {lists} = user
+  const {lists, canPublish} = user
 
   let relays = null
-  let filter = {kinds: [1, 1985], authors: "follows"} as DynamicFilter
   let key = Math.random()
+  let filter = {
+    kinds: [1, 1985],
+    authors: getUserFollows().length > 0 ? "follows" : "network",
+  } as DynamicFilter
 
   $: listsByName = indexBy(l => Tags.from(l).getMeta("d"), $lists)
 
@@ -60,36 +64,38 @@
   {#key key}
     <Feed {filter} {relays}>
       <div slot="controls">
-        {#if $lists.length > 0}
-          <Popover placement="bottom" opts={{hideOnClick: true}} theme="transparent">
-            <i slot="trigger" class="fa fa-ellipsis-v cursor-pointer p-2" />
-            <div
-              slot="tooltip"
-              class="flex flex-col items-start overflow-hidden rounded border border-solid border-gray-8 bg-black">
-              {#each $lists as e (e.id)}
-                {@const meta = Tags.from(e).asMeta()}
+        {#if $canPublish}
+          {#if $lists.length > 0}
+            <Popover placement="bottom" opts={{hideOnClick: true}} theme="transparent">
+              <i slot="trigger" class="fa fa-ellipsis-v cursor-pointer p-2" />
+              <div
+                slot="tooltip"
+                class="flex flex-col items-start overflow-hidden rounded border border-solid border-gray-8 bg-black">
+                {#each $lists as e (e.id)}
+                  {@const meta = Tags.from(e).asMeta()}
+                  <button
+                    class={cx("w-full py-2 px-3 text-left transition-colors", {
+                      "hover:bg-gray-7": $theme === "dark",
+                      "hover:bg-gray-1": $theme === "light",
+                    })}
+                    on:click={() => loadListFeed(meta.d)}>
+                    <i class="fa fa-scroll fa-sm mr-1" />
+                    {meta.d}
+                  </button>
+                {/each}
                 <button
+                  on:click={showLists}
                   class={cx("w-full py-2 px-3 text-left transition-colors", {
                     "hover:bg-gray-7": $theme === "dark",
                     "hover:bg-gray-1": $theme === "light",
-                  })}
-                  on:click={() => loadListFeed(meta.d)}>
-                  <i class="fa fa-scroll fa-sm mr-1" />
-                  {meta.d}
+                  })}>
+                  <i class="fa fa-cog fa-sm mr-1" /> Customize
                 </button>
-              {/each}
-              <button
-                on:click={showLists}
-                class={cx("w-full py-2 px-3 text-left transition-colors", {
-                  "hover:bg-gray-7": $theme === "dark",
-                  "hover:bg-gray-1": $theme === "light",
-                })}>
-                <i class="fa fa-cog fa-sm mr-1" /> Customize
-              </button>
-            </div>
-          </Popover>
-        {:else}
-          <i class="fa fa-ellipsis-v cursor-pointer p-1" on:click={showLists} />
+              </div>
+            </Popover>
+          {:else}
+            <i class="fa fa-ellipsis-v cursor-pointer p-2" on:click={showLists} />
+          {/if}
         {/if}
       </div>
     </Feed>

src/app/views/NotFound.svelte

@@ -1,7 +1,6 @@
 <script>
   import {onMount} from "svelte"
   import {navigate} from "svelte-routing"
-  import user from "src/agent/user"
 
-  onMount(() => navigate(user.getPubkey() ? "/notes" : "/login"))
+  onMount(() => navigate("/notes"))
 </script>

src/app/views/UserSettings.svelte

@@ -1,7 +1,5 @@
 <script>
-  import {onMount} from "svelte"
   import {fly} from "svelte/transition"
-  import {navigate} from "svelte-routing"
   import {toast, appName} from "src/partials/state"
   import Toggle from "src/partials/Toggle.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -14,12 +12,6 @@
 
   let values = {...user.getSettings()}
 
-  onMount(async () => {
-    if (!user.getProfile()) {
-      return navigate("/login")
-    }
-  })
-
   const submit = () => {
     user.setSettings(values)
 

src/partials/Channel.svelte

@@ -1,18 +1,19 @@
 <script>
   import {onMount} from "svelte"
   import {fly} from "svelte/transition"
-  import {navigate} from "svelte-routing"
   import {prop, max, path as getPath, reverse, pluck, uniqBy, sortBy, last} from "ramda"
   import {sleep, createScroller} from "src/util/misc"
   import Spinner from "src/partials/Spinner.svelte"
-  import user from "src/agent/user"
   import {getPersonWithFallback} from "src/agent/db"
   import network from "src/agent/network"
+  import user from "src/agent/user"
 
   export let loadMessages
   export let listenForMessages
   export let sendMessage
 
+  const {canPublish} = user
+
   let textarea
   let messages = []
   let loading = sleep(30_000)
@@ -53,10 +54,6 @@
   }
 
   onMount(() => {
-    if (!user.getPubkey()) {
-      return navigate("/login")
-    }
-
     const sub = listenForMessages(newMessages =>
       stickToBottom(() => {
         loading = sleep(30_000)
@@ -113,7 +110,7 @@
 
 <div class="flex h-full gap-4">
   <div class="relative w-full">
-    <div class="py-18 flex h-screen flex-col pb-20">
+    <div class="py-18 flex h-screen flex-col" class:pb-20={$canPublish}>
       <ul
         class="channel-messages flex flex-grow flex-col-reverse justify-start overflow-auto p-4 pb-6">
         {#each annotatedMessages as m (m.id)}
@@ -131,23 +128,25 @@
     <div class="fixed top-0 z-20 w-full border-b border-solid border-gray-6 bg-gray-7">
       <slot name="header" />
     </div>
-    <div
-      class="fixed bottom-0 z-10 flex w-full border-t border-solid border-gray-6 border-gray-7 bg-gray-6 lg:-ml-56 lg:pl-56">
-      <textarea
-        rows="3"
-        autofocus
-        placeholder="Type something..."
-        bind:this={textarea}
-        on:keypress={onKeyPress}
-        class="w-full resize-none bg-gray-6 p-2
+    {#if $canPublish}
+      <div
+        class="fixed bottom-0 z-10 flex w-full border-t border-solid border-gray-6 border-gray-7 bg-gray-6 lg:-ml-56 lg:pl-56">
+        <textarea
+          rows="3"
+          autofocus
+          placeholder="Type something..."
+          bind:this={textarea}
+          on:keypress={onKeyPress}
+          class="w-full resize-none bg-gray-6 p-2
                text-gray-2 outline-0 placeholder:text-gray-1" />
-      <button
-        on:click={send}
-        class="flex cursor-pointer flex-col justify-center gap-2 border-l border-solid border-gray-7 p-4
+        <button
+          on:click={send}
+          class="flex cursor-pointer flex-col justify-center gap-2 border-l border-solid border-gray-7 p-4
                py-8 text-gray-2 transition-all hover:bg-accent ">
-        <i class="fa-solid fa-paper-plane fa-xl" />
-      </button>
-    </div>
+          <i class="fa-solid fa-paper-plane fa-xl" />
+        </button>
+      </div>
+    {/if}
   </div>
   {#if showNewMessages}
     <div