Fix chat layout

src/App.svelte

@@ -12,6 +12,7 @@
   import {store as toast} from "src/state/toast"
   import {modal, logout} from "src/state/app"
   import {user} from 'src/state/user'
+  import Anchor from 'src/partials/Anchor.svelte'
   import NoteDetail from "src/partials/NoteDetail.svelte"
   import NotFound from "src/routes/NotFound.svelte"
   import Notes from "src/routes/Notes.svelte"
@@ -129,7 +130,9 @@
                 border-b border-medium"
     >
       <i class="fa-solid fa-bars fa-2xl cursor-pointer" bind:this={menuIcon} on:click={toggleMenu} />
-      <h1 class="staatliches text-3xl">Coracle</h1>
+      <Anchor external type="unstyled" href="https://github.com/staab/coracle">
+        <h1 class="staatliches text-3xl">Coracle</h1>
+      </Anchor>
     </div>
 
     {#if $modal}
@@ -154,11 +157,11 @@
 
     {#if $toast}
       <div
-        class="fixed bottom-0 left-0 right-0 pointer-events-none"
-        transition:fly={{y: 50, duration: 300}}
+        class="fixed top-0 left-0 right-0 pointer-events-none"
+        transition:fly={{y: -50, duration: 300}}
       >
         <div
-          class="rounded bg-accent shadow-xl m-4 p-4 text-white text-center border border-dark"
+          class="rounded bg-accent shadow-xl mx-24 sm:mx-32 mt-2 p-3 text-white text-center border border-dark"
         >
           {$toast.message}
         </div>

src/partials/chat/RoomList.svelte

@@ -3,13 +3,13 @@
   import {navigate} from 'svelte-routing'
   import {fuzzy} from "src/util/misc"
   import {channels} from 'src/state/nostr'
-  import {rooms} from 'src/state/app'
   import Input from "src/partials/Input.svelte"
 
   let q = ""
+  let rooms = []
   let search
 
-  $: search = fuzzy(Object.values($rooms), {keys: ["name", "about"]})
+  $: search = fuzzy(Object.values(rooms), {keys: ["name", "about"]})
 
   const createRoom = () => navigate(`/chat/new`)
 
@@ -23,12 +23,12 @@
     events.forEach(e => {
       const id = e.kind === 40 ? e.id : e.tags[0][1]
 
-      $rooms[id] = {id, pubkey: e.pubkey, ...$rooms[id], ...JSON.parse(e.content)}
+      rooms[id] = {id, pubkey: e.pubkey, ...rooms[id], ...JSON.parse(e.content)}
     })
   })
 </script>
 
-<div class="hidden sm:flex flex-col bg-dark w-56 h-full fixed py-8 border-r border-solid border-r-medium">
+<div class="flex flex-col bg-dark w-full sm:w-56 h-full fixed py-8 border-r border-solid border-r-medium">
   <div class="m-4">
     <Input bind:value={q} type="text" placeholder="Search rooms">
       <i slot="before" class="fa-solid fa-search" />

src/routes/Chat.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div class="flex gap-4 h-full">
-  <div class="sm:ml-56 w-full">
+  <div class="sm:ml-56 w-full hidden sm:block">
     <div class="max-w-sm m-auto pt-24 text-center">
       Select a room to join the conversation!
     </div>

src/routes/ChatEdit.svelte

@@ -7,15 +7,21 @@
   import Textarea from "src/partials/Textarea.svelte"
   import Button from "src/partials/Button.svelte"
   import RoomList from "src/partials/chat/RoomList.svelte"
-  import {rooms} from "src/state/app"
   import {dispatch} from "src/state/dispatch"
+  import {channels} from "src/state/nostr"
   import toast from "src/state/toast"
 
   export let room
 
-  let values = $rooms[room] || {}
+  let values = {id: room}
 
   onMount(async () => {
+    const events = await channels.getter.all({kinds: [40, 41], ids: [room]})
+
+    events.forEach(({pubkey, content}) => {
+      values = {pubkey, ...values, ...JSON.parse(content)}
+    })
+
     document.querySelector('[name=picture]').addEventListener('change', async e => {
       const [file] = e.target.files
 

src/routes/ChatRoom.svelte

@@ -8,7 +8,7 @@
   import {toHtml} from 'src/util/html'
   import UserBadge from 'src/partials/UserBadge.svelte'
   import {channels} from 'src/state/nostr'
-  import {rooms, accounts, ensureAccounts} from 'src/state/app'
+  import {accounts, ensureAccounts} from 'src/state/app'
   import {dispatch} from 'src/state/dispatch'
   import {user} from 'src/state/user'
   import RoomList from "src/partials/chat/RoomList.svelte"
@@ -18,6 +18,7 @@
   let textarea
   let messages = []
   let annotatedMessages = []
+  let roomData = {id: room}
 
   $: {
     // Group messages so we're only showing the account once per chunk
@@ -40,11 +41,17 @@
     )
   }
 
-  onMount(() => {
+  onMount(async () => {
     if (!$user) {
-      navigate('/login')
+      return navigate('/login')
     }
 
+    const events = await channels.getter.all({kinds: [40, 41], ids: [room]})
+
+    events.forEach(({pubkey, content}) => {
+      roomData = {pubkey, ...roomData, ...JSON.parse(content)}
+    })
+
     const isVisible = $el => {
       const bodyRect = document.body.getBoundingClientRect()
       const {top, height} = $el.getBoundingClientRect()
@@ -123,25 +130,23 @@
           {/each}
         </ul>
       </div>
-      {#if $rooms[room]}
-      <div class="fixed top-0 pt-20 w-full -ml-56 pl-60 p-4 border-b border-solid border-medium bg-dark flex gap-4">
+      <div class="fixed top-0 pt-20 w-full sm:-ml-56 sm:pl-60 p-4 border-b border-solid border-medium bg-dark flex gap-4">
         <div
           class="overflow-hidden w-12 h-12 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
-          style="background-image: url({$rooms[room].picture})" />
+          style="background-image: url({roomData.picture})" />
         <div class="w-full">
           <div class="flex items-center justify-between w-full">
-            <div class="text-lg font-bold">{$rooms[room].name}</div>
-            {#if $rooms[room].pubkey === $user?.pubkey}
+            <div class="text-lg font-bold">{roomData.name || ''}</div>
+            {#if roomData.pubkey === $user?.pubkey}
             <small class="cursor-pointer" on:click={edit}>
               <i class="fa-solid fa-edit" /> Edit
             </small>
             {/if}
           </div>
-          <div>{$rooms[room].about || ''}</div>
+          <div>{roomData.about || ''}</div>
         </div>
       </div>
-      {/if}
-      <div class="fixed bottom-0 w-full -ml-56 pl-56 flex bg-medium border-medium border-t border-solid border-dark">
+      <div class="fixed bottom-0 w-full sm:-ml-56 sm:pl-56 flex bg-medium border-medium border-t border-solid border-dark">
         <textarea
           rows="4"
           autofocus
@@ -159,6 +164,8 @@
       </div>
     </div>
   </div>
-  <RoomList />
+  <div class="hidden sm:block">
+    <RoomList />
+  </div>
 </div>
 

src/state/app.js

@@ -9,12 +9,6 @@ import {channels, relays} from 'src/state/nostr'
 
 export const modal = writable(null)
 
-export const rooms = writable(getLocalJson("coracle/rooms") || {})
-
-rooms.subscribe($rooms => {
-  setLocalJson("coracle/rooms", $rooms)
-})
-
 export const accounts = writable(getLocalJson("coracle/accounts") || {})
 
 accounts.subscribe($accounts => {

src/state/nostr.js

@@ -95,6 +95,10 @@ nostr.event = (kind, content = '', tags = []) => {
 
 export const knownRelays = writable(getLocalJson("coracle/knownRelays") || [])
 
+knownRelays.subscribe($knownRelays => {
+  setLocalJson("coracle/knownRelays", $knownRelays)
+})
+
 export const registerRelay = async url => {
   let json
   try {