Tweaks to navigation

pwa-assets.config.js

@@ -1,8 +1,8 @@
-import dotenv from 'dotenv'
-import {defineConfig, minimalPreset as preset} from '@vite-pwa/assets-generator/config'
+import dotenv from "dotenv"
+import {defineConfig, minimalPreset as preset} from "@vite-pwa/assets-generator/config"
 
-dotenv.config({path: '.env.local'})
-dotenv.config({path: '.env'})
+dotenv.config({path: ".env.local"})
+dotenv.config({path: ".env"})
 
 export default defineConfig({
   preset,

src/app.d.ts

@@ -1,5 +1,5 @@
 import "@poppanator/sveltekit-svg/dist/svg"
-import 'vite-plugin-pwa/pwa-assets'
+import "vite-plugin-pwa/pwa-assets"
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces

src/app.html

@@ -14,7 +14,6 @@
     <meta name="twitter:title" content="{NAME}" />
     <meta name="twitter:description" content="{DESCRIPTION}" />
     <meta name="twitter:image" content="/maskable-icon-512x512.png" />
-    <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="icon" href="/favicon.ico" sizes="48x48" />
     <link rel="icon" href="/pwa-64x64.ico" sizes="any" type="image/png" />
     <link rel="icon" href="/pwa-192x192.ico" sizes="any" type="image/png" />

src/app/components/ChannelCompose.svelte

@@ -33,7 +33,7 @@
 <div class="relative z-feature flex gap-2 p-2">
   <Button
     data-tip="Add an image"
-    class="center tooltip h-10 w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
+    class="center tooltip h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
     on:click={() => addFile($editor)}>
     {#if $loading}
       <span class="loading loading-spinner loading-xs"></span>

src/app/components/Chat.svelte

@@ -0,0 +1,177 @@
+<script lang="ts" context="module">
+  type Element = {
+    id: string
+    type: "date" | "note"
+    value: string | TrustedEvent
+    showPubkey: boolean
+  }
+</script>
+
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {derived, writable} from "svelte/store"
+  import {assoc, sortBy, remove} from "@welshman/lib"
+  import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
+  import {
+    pubkey,
+    formatTimestampAsDate,
+    inboxRelaySelectionsByPubkey,
+    loadInboxRelaySelections,
+    tagPubkey,
+  } from "@welshman/app"
+  import type {MergedThunk} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import ProfileList from "@app/components/ProfileList.svelte"
+  import ChatMessage from "@app/components/ChatMessage.svelte"
+  import ChatCompose from "@app/components/ChannelCompose.svelte"
+  import {deriveChat, splitChatId, PLATFORM_NAME} from "@app/state"
+  import {pushModal} from "@app/modal"
+  import {sendWrapped} from "@app/commands"
+
+  export let id
+
+  const chat = deriveChat(id)
+  const pubkeys = splitChatId(id)
+  const others = remove($pubkey!, pubkeys)
+  const thunks = writable({} as Record<string, MergedThunk>)
+  const missingInboxes = derived(inboxRelaySelectionsByPubkey, $m =>
+    pubkeys.filter(pk => !$m.has(pk)),
+  )
+
+  const assertEvent = (e: any) => e as TrustedEvent
+
+  const assertNotNil = <T,>(x: T | undefined) => x!
+
+  const showMembers = () =>
+    pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
+
+  const onSubmit = async ({content, ...params}: EventContent) => {
+    const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
+    const template = createEvent(DIRECT_MESSAGE, {content, tags})
+    const thunk = await sendWrapped({template, pubkeys, delay: 2000})
+
+    thunks.update(assoc(thunk.thunks[0].event.id, thunk))
+  }
+
+  let loading = true
+  let elements: Element[] = []
+
+  $: {
+    elements = []
+
+    let previousDate
+    let previousPubkey
+
+    for (const event of sortBy(e => e.created_at, $chat?.messages || [])) {
+      const {id, pubkey, created_at} = event
+      const date = formatTimestampAsDate(created_at)
+
+      if (date !== previousDate) {
+        elements.push({type: "date", value: date, id: date, showPubkey: false})
+      }
+
+      elements.push({
+        id,
+        type: "note",
+        value: event,
+        showPubkey: date !== previousDate || previousPubkey !== pubkey,
+      })
+
+      previousDate = date
+      previousPubkey = pubkey
+    }
+
+    elements.reverse()
+  }
+
+  onMount(async () => {
+    await Promise.all(others.map(pk => loadInboxRelaySelections(pk)))
+  })
+
+  setTimeout(() => {
+    loading = false
+  }, 3000)
+</script>
+
+<div class="relative flex h-full w-full flex-col">
+  {#if others.length > 0}
+    <PageBar>
+      <div slot="title" class="row-2">
+        {#if others.length === 1}
+          {@const pubkey = others[0]}
+          {@const showProfile = () => pushModal(ProfileDetail, {pubkey}, {drawer: true})}
+          <Button on:click={showProfile} class="row-2">
+            <ProfileCircle {pubkey} size={5} />
+            <ProfileName {pubkey} />
+          </Button>
+        {:else}
+          <ProfileCircles pubkeys={others} size={5} />
+          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+            <ProfileName pubkey={others[0]} />
+            and {others.length - 1}
+            {others.length > 2 ? "others" : "other"}
+            <Button on:click={showMembers} class="btn btn-link">Show all members</Button>
+          </p>
+        {/if}
+      </div>
+      <div slot="action">
+        {#if remove($pubkey, $missingInboxes).length > 0}
+          {@const count = remove($pubkey, $missingInboxes).length}
+          {@const label = count > 1 ? "inboxes are" : "inbox is"}
+          <div
+            class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
+            data-tip="{count} {label} not configured.">
+            <Icon icon="danger" />
+            {count}
+          </div>
+        {/if}
+      </div>
+    </PageBar>
+  {/if}
+  <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
+    {#if $missingInboxes.includes(assertNotNil($pubkey))}
+      <div class="py-12">
+        <div class="card2 col-2 m-auto max-w-md items-center text-center">
+          <p class="row-2 text-lg text-error">
+            <Icon icon="danger" />
+            Your inbox is not configured.
+          </p>
+          <p>
+            In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
+            your <Link class="link" href="/settings/relays">relay settings page</Link> to set up your
+            inbox.
+          </p>
+        </div>
+      </div>
+    {/if}
+    {#each elements as { type, id, value, showPubkey } (id)}
+      {#if type === "date"}
+        <Divider>{value}</Divider>
+      {:else}
+        {@const event = assertEvent(value)}
+        {@const thunk = $thunks[event.id]}
+        <ChatMessage {event} {thunk} {pubkeys} {showPubkey} />
+      {/if}
+    {/each}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner {loading}>
+        {#if loading}
+          Looking for messages...
+        {:else}
+          End of message history
+        {/if}
+      </Spinner>
+    </p>
+  </div>
+  <ChatCompose {onSubmit} />
+</div>

src/app/components/ChatMessage.svelte

@@ -51,6 +51,9 @@
   let popoverIsVisible = false
 </script>
 
+{#if thunk}
+  <ThunkStatus {thunk} />
+{/if}
 <div
   class="group chat flex items-center justify-end gap-1 px-2"
   class:chat-start={event.pubkey !== $pubkey}
@@ -96,9 +99,6 @@
           {/if}
           <div class="text-sm">
             <Content showEntire {event} />
-            {#if thunk}
-              <ThunkStatus {thunk} />
-            {/if}
           </div>
         </div>
       </div>

src/app/components/MenuSettings.svelte

@@ -11,6 +11,13 @@
 </script>
 
 <div class="column menu gap-2">
+  <Link href="/settings/profile">
+    <CardButton>
+      <div slot="icon"><Icon icon="user-rounded" size={7} /></div>
+      <div slot="title">Profile</div>
+      <div slot="info">Customize your user profile</div>
+    </CardButton>
+  </Link>
   <Link href="/settings/relays">
     <CardButton>
       <div slot="icon"><Icon icon="server" size={7} /></div>

src/app/components/MenuSpaces.svelte

@@ -7,15 +7,12 @@
   import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
-  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
-  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
+  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import {userMembership, getMembershipUrls, PLATFORM_RELAY} from "@app/state"
   import {makeSpacePath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
-  const startCreate = () => pushModal(SpaceCreateExternal)
-
-  const startJoin = () => pushModal(SpaceInviteAccept)
+  const addSpace = () => pushModal(SpaceAdd)
 </script>
 
 <div class="column menu gap-2">
@@ -28,7 +25,7 @@
       </CardButton>
     </Link>
     <Divider />
-  {:else}
+  {:else if getMembershipUrls($userMembership).length > 0}
     {#each getMembershipUrls($userMembership) as url (url)}
       <Link href={makeSpacePath(url)}>
         <CardButton>
@@ -38,29 +35,13 @@
         </CardButton>
       </Link>
     {/each}
-    {#if getMembershipUrls($userMembership).length > 0}
-      <Divider />
-    {/if}
+    <Divider />
   {/if}
-  <Button on:click={startJoin}>
+  <Button on:click={addSpace}>
     <CardButton>
       <div slot="icon"><Icon icon="login-2" size={7} /></div>
-      <div slot="title">Join a space</div>
-      <div slot="info">Enter an invite code or url to join an existing space.</div>
-    </CardButton>
-  </Button>
-  <Link href="/discover">
-    <CardButton>
-      <div slot="icon"><Icon icon="compass" size={7} /></div>
-      <div slot="title">Find a space</div>
-      <div slot="info">Browse spaces on the discover page.</div>
-    </CardButton>
-  </Link>
-  <Button on:click={startCreate}>
-    <CardButton>
-      <div slot="icon"><Icon icon="add-circle" size={7} /></div>
-      <div slot="title">Create a space</div>
-      <div slot="info">Just a few questions and you'll be on your way.</div>
+      <div slot="title">Add a space</div>
+      <div slot="info">Join or create a new space</div>
     </CardButton>
   </Button>
 </div>

src/app/components/PrimaryNav.svelte

@@ -14,7 +14,8 @@
 
   const addSpace = () => pushModal(SpaceAdd)
 
-  const showSpacesMenu = () => pushModal(MenuSpaces)
+  const showSpacesMenu = () =>
+    getMembershipUrls($userMembership).length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd)
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 </script>
@@ -58,6 +59,9 @@
         class="tooltip-right">
         <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
       </PrimaryNavItem>
+      <PrimaryNavItem title="Notes" href="/notes" class="tooltip-right">
+        <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
+      </PrimaryNavItem>
       <PrimaryNavItem title="Messages" href="/chat" class="tooltip-right">
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
@@ -73,10 +77,13 @@
 <div
   class="border-top fixed bottom-0 left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
-    <div class="flex gap-4 sm:gap-8">
+    <div class="flex gap-2 sm:gap-8">
       <PrimaryNavItem title="Search" href="/people">
         <Avatar icon="magnifer" class="!h-10 !w-10" />
       </PrimaryNavItem>
+      <PrimaryNavItem title="Notes" href="/notes">
+        <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
+      </PrimaryNavItem>
       <PrimaryNavItem title="Messages" href="/chat">
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>

src/app/components/ThunkStatus.svelte

@@ -28,23 +28,25 @@
   $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
 </script>
 
-{#if canCancel || isPending}
-  <span class="mt-2 flex items-center gap-1">
-    <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
-    <span class="opacity-50">Sending...</span>
-    {#if canCancel}
-      <Button class="link" on:click={abort}>Cancel</Button>
-    {/if}
-  </span>
-{:else if isFailure && failure}
-  {@const [url, {message, status}] = failure}
-  <Tippy
-    component={ThunkStatusDetail}
-    props={{url, message, status, retry}}
-    params={{interactive: true}}>
-    <span class="tooltip mt-2 flex cursor-pointer items-center gap-1">
-      <Icon icon="danger" size={3} />
-      <span class="opacity-50">Failed to send!</span>
+<div class="flex justify-end text-xs">
+  {#if canCancel || isPending}
+    <span class="mt-2 flex items-center gap-1">
+      <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
+      <span class="opacity-50">Sending...</span>
+      {#if canCancel}
+        <Button class="link" on:click={abort}>Cancel</Button>
+      {/if}
     </span>
-  </Tippy>
-{/if}
+  {:else if isFailure && failure}
+    {@const [url, {message, status}] = failure}
+    <Tippy
+      component={ThunkStatusDetail}
+      props={{url, message, status, retry}}
+      params={{interactive: true}}>
+      <span class="tooltip mt-2 flex cursor-pointer items-center gap-1">
+        <Icon icon="danger" size={3} />
+        <span class="opacity-50">Failed to send!</span>
+      </span>
+    </Tippy>
+  {/if}
+</div>

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import "@src/app.css"
   import {onMount} from "svelte"
   import {get} from "svelte/store"
+  import {dev} from "$app/environment"
   import {sleep, take, sortBy, ago, now, HOUR} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {
@@ -38,7 +39,7 @@
   import AppContainer from "@app/components/AppContainer.svelte"
   import ModalContainer from "@app/components/ModalContainer.svelte"
   import {theme} from "@app/theme"
-  import {INDEXER_RELAYS, PLATFORM_LOGO, PLATFORM_ACCENT} from "@app/state"
+  import {INDEXER_RELAYS} from "@app/state"
   import {loadUserData} from "@app/commands"
   import * as state from "@app/state"
 
@@ -141,6 +142,12 @@
   })
 </script>
 
+<svelte:head>
+  {#if !dev}
+    <link rel="manifest" href="/manifest.webmanifest" />
+  {/if}
+</svelte:head>
+
 {#await ready}
   <div data-theme={$theme} />
 {:then}

src/routes/chat/+layout.svelte

@@ -8,13 +8,11 @@
   import Page from "@lib/components/Page.svelte"
   import Button from "@lib/components/Button.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
-  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
   import ChatItem from "@app/components/ChatItem.svelte"
   import {chatSearch, pullConservatively} from "@app/state"
-  import {makeChatPath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   const startChat = () => pushModal(ChatStart)
@@ -22,7 +20,6 @@
   let term = ""
 
   $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
-  $: notesPath = makeChatPath([$pubkey!])
 
   onMount(() => {
     const filter = {kinds: [WRAP], "#p": [$pubkey!]}
@@ -37,9 +34,6 @@
 
 <SecondaryNav>
   <SecondaryNavSection>
-    <SecondaryNavItem href={notesPath}>
-      <Icon icon="notes-minimalistic" /> Your Notes
-    </SecondaryNavItem>
     <SecondaryNavHeader>
       Chats
       <Button on:click={startChat}>

src/routes/chat/[chat]/+page.svelte

@@ -1,177 +1,6 @@
-<script lang="ts" context="module">
-  type Element = {
-    id: string
-    type: "date" | "note"
-    value: string | TrustedEvent
-    showPubkey: boolean
-  }
-</script>
-
 <script lang="ts">
-  import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {derived, writable} from "svelte/store"
-  import {assoc, sortBy, remove} from "@welshman/lib"
-  import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
-  import {
-    pubkey,
-    formatTimestampAsDate,
-    inboxRelaySelectionsByPubkey,
-    loadInboxRelaySelections,
-    tagPubkey,
-  } from "@welshman/app"
-  import type {MergedThunk} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import PageBar from "@lib/components/PageBar.svelte"
-  import Divider from "@lib/components/Divider.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import ProfileName from "@app/components/ProfileName.svelte"
-  import ProfileCircle from "@app/components/ProfileCircle.svelte"
-  import ProfileCircles from "@app/components/ProfileCircles.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import ProfileList from "@app/components/ProfileList.svelte"
-  import ChatMessage from "@app/components/ChatMessage.svelte"
-  import ChatCompose from "@app/components/ChannelCompose.svelte"
-  import {deriveChat, splitChatId, PLATFORM_NAME} from "@app/state"
-  import {pushModal} from "@app/modal"
-  import {sendWrapped} from "@app/commands"
-
-  const id = $page.params.chat === "notes" ? $pubkey! : $page.params.chat
-  const chat = deriveChat(id)
-  const pubkeys = splitChatId(id)
-  const others = remove($pubkey!, pubkeys)
-  const thunks = writable({} as Record<string, MergedThunk>)
-  const missingInboxes = derived(inboxRelaySelectionsByPubkey, $m =>
-    pubkeys.filter(pk => !$m.has(pk)),
-  )
-
-  const assertEvent = (e: any) => e as TrustedEvent
-
-  const assertNotNil = <T,>(x: T | undefined) => x!
-
-  const showMembers = () =>
-    pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
-
-  const onSubmit = async ({content, ...params}: EventContent) => {
-    const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
-    const template = createEvent(DIRECT_MESSAGE, {content, tags})
-    const thunk = await sendWrapped({template, pubkeys, delay: 2000})
-
-    thunks.update(assoc(thunk.thunks[0].event.id, thunk))
-  }
-
-  let loading = true
-  let elements: Element[] = []
-
-  $: {
-    elements = []
-
-    let previousDate
-    let previousPubkey
-
-    for (const event of sortBy(e => e.created_at, $chat?.messages || [])) {
-      const {id, pubkey, created_at} = event
-      const date = formatTimestampAsDate(created_at)
-
-      if (date !== previousDate) {
-        elements.push({type: "date", value: date, id: date, showPubkey: false})
-      }
-
-      elements.push({
-        id,
-        type: "note",
-        value: event,
-        showPubkey: date !== previousDate || previousPubkey !== pubkey,
-      })
-
-      previousDate = date
-      previousPubkey = pubkey
-    }
-
-    elements.reverse()
-  }
-
-  onMount(async () => {
-    await Promise.all(others.map(pk => loadInboxRelaySelections(pk)))
-  })
-
-  setTimeout(() => {
-    loading = false
-  }, 3000)
+  import Chat from "@app/components/Chat.svelte"
 </script>
 
-<div class="relative flex h-full flex-col">
-  {#if others.length > 0}
-    <PageBar>
-      <div slot="title" class="row-2">
-        {#if others.length === 1}
-          {@const pubkey = others[0]}
-          {@const showProfile = () => pushModal(ProfileDetail, {pubkey}, {drawer: true})}
-          <Button on:click={showProfile} class="row-2">
-            <ProfileCircle {pubkey} size={5} />
-            <ProfileName {pubkey} />
-          </Button>
-        {:else}
-          <ProfileCircles pubkeys={others} size={5} />
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-            <ProfileName pubkey={others[0]} />
-            and {others.length - 1}
-            {others.length > 2 ? "others" : "other"}
-            <Button on:click={showMembers} class="btn btn-link">Show all members</Button>
-          </p>
-        {/if}
-      </div>
-      <div slot="action">
-        {#if remove($pubkey, $missingInboxes).length > 0}
-          {@const count = remove($pubkey, $missingInboxes).length}
-          {@const label = count > 1 ? "inboxes are" : "inbox is"}
-          <div
-            class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
-            data-tip="{count} {label} not configured.">
-            <Icon icon="danger" />
-            {count}
-          </div>
-        {/if}
-      </div>
-    </PageBar>
-  {/if}
-  <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
-    {#if $missingInboxes.includes(assertNotNil($pubkey))}
-      <div class="py-12">
-        <div class="card2 col-2 m-auto max-w-md items-center text-center">
-          <p class="row-2 text-lg text-error">
-            <Icon icon="danger" />
-            Your inbox is not configured.
-          </p>
-          <p>
-            In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
-            your <Link class="link" href="/settings/relays">relay settings page</Link> to set up your
-            inbox.
-          </p>
-        </div>
-      </div>
-    {/if}
-    {#each elements as { type, id, value, showPubkey } (id)}
-      {#if type === "date"}
-        <Divider>{value}</Divider>
-      {:else}
-        {@const event = assertEvent(value)}
-        {@const thunk = $thunks[event.id]}
-        <ChatMessage {event} {thunk} {pubkeys} {showPubkey} />
-      {/if}
-    {/each}
-    <p class="flex h-10 items-center justify-center py-20">
-      <Spinner {loading}>
-        {#if loading}
-          Looking for messages...
-        {:else}
-          End of message history
-        {/if}
-      </Spinner>
-    </p>
-  </div>
-  <ChatCompose {onSubmit} />
-</div>
+<Chat id={$page.params.chat} />

src/routes/home/+page.svelte

@@ -36,13 +36,6 @@
               <div slot="info">Use an invite link, or create your own space.</div>
             </CardButton>
           </Button>
-          <Link href="/discover">
-            <CardButton>
-              <div slot="icon"><Icon icon="compass-big" size={7} /></div>
-              <div slot="title">Discover spaces</div>
-              <div slot="info">Find a community based on your hobbies or interests.</div>
-            </CardButton>
-          </Link>
           <Link href="/people">
             <CardButton>
               <div slot="icon"><Icon icon="plain" size={7} /></div>

src/routes/notes/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import {pubkey} from "@welshman/app"
+  import Chat from "@app/components/Chat.svelte"
+
+  $: id = $pubkey!
+</script>
+
+<Chat {id} />

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

@@ -2,16 +2,11 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {load} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Delay from "@lib/components/Delay.svelte"
-  import Button from "@lib/components/Button.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
   import {decodeRelay, MEMBERSHIPS} from "@app/state"
-  import {pushDrawer} from "@app/modal"
-
-  const openMenu = () => pushDrawer(MenuSpace, {url})
 
   $: url = decodeRelay($page.params.relay)
 
@@ -35,9 +30,3 @@
     </Page>
   </Delay>
 {/key}
-
-<div class="fixed right-7 top-7 z-feature md:hidden">
-  <Button on:click={openMenu}>
-    <Icon icon="menu-dots" />
-  </Button>
-</div>

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

@@ -22,6 +22,7 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
+  import MenuSpace from "@app/components/MenuSpace.svelte"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
   import {
@@ -35,12 +36,15 @@
     getMembershipRoomsByUrl,
   } from "@app/state"
   import {addRoomMembership, removeRoomMembership} from "@app/commands"
+  import {pushDrawer} from "@app/modal"
 
   const {room = GENERAL} = $page.params
   const url = decodeRelay($page.params.relay)
   const channel = deriveChannel(makeChannelId(url, room))
   const thunks = writable({} as Record<string, Thunk>)
 
+  const openMenu = () => pushDrawer(MenuSpace, {url})
+
   const assertEvent = (e: any) => e as TrustedEvent
 
   const onSubmit = ({content, tags}: EventContent) => {
@@ -96,7 +100,7 @@
       <Icon icon="hashtag" />
     </div>
     <strong slot="title">{room}</strong>
-    <div slot="action">
+    <div slot="action" class="row-2">
       {#if room !== GENERAL}
         {#if getMembershipRoomsByUrl(url, $userMembership).includes(room)}
           <Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, room)}>
@@ -110,6 +114,9 @@
           </Button>
         {/if}
       {/if}
+      <Button on:click={openMenu} class="btn btn-neutral btn-sm">
+        <Icon icon="menu-dots" />
+      </Button>
     </div>
   </PageBar>
   <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">

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

@@ -10,15 +10,18 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
+  import MenuSpace from "@app/components/MenuSpace.svelte"
   import EventItem from "@app/components/EventItem.svelte"
   import EventCreate from "@app/components/EventCreate.svelte"
-  import {pushModal} from "@app/modal"
+  import {pushModal, pushDrawer} from "@app/modal"
   import {deriveEventsForUrl, pullConservatively, decodeRelay} from "@app/state"
 
   const url = decodeRelay($page.params.relay)
   const kinds = [EVENT_DATE, EVENT_TIME]
   const events = deriveEventsForUrl(url, kinds)
 
+  const openMenu = () => pushDrawer(MenuSpace, {url})
+
   const createEvent = () => pushModal(EventCreate, {url})
 
   const getEnd = (event: TrustedEvent) => parseInt(event.tags.find(t => t[0] === "end")?.[1] || "")
@@ -69,6 +72,11 @@
       <Icon icon="calendar-minimalistic" />
     </div>
     <strong slot="title">Calendar</strong>
+    <div slot="action" class="md:hidden">
+      <Button on:click={openMenu} class="btn btn-neutral btn-sm">
+        <Icon icon="menu-dots" />
+      </Button>
+    </div>
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
     {#each items as { event, dateDisplay }, i (event.id)}

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

@@ -10,10 +10,11 @@
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import MenuSpace from "@app/components/MenuSpace.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
-  import {pushModal} from "@app/modal"
   import {deriveEventsForUrl, decodeRelay} from "@app/state"
+  import {pushModal, pushDrawer} from "@app/modal"
 
   const url = decodeRelay($page.params.relay)
   const kinds = [NOTE]
@@ -21,6 +22,8 @@
   const events = deriveEventsForUrl(url, kinds)
   const loader = feedLoader.getLoader(feed, {})
 
+  const openMenu = () => pushDrawer(MenuSpace, {url})
+
   const createThread = () => pushModal(ThreadCreate, {url})
 
   let limit = 5
@@ -52,6 +55,11 @@
       <Icon icon="notes-minimalistic" />
     </div>
     <strong slot="title">Threads</strong>
+    <div slot="action" class="md:hidden">
+      <Button on:click={openMenu} class="btn btn-neutral btn-sm">
+        <Icon icon="menu-dots" />
+      </Button>
+    </div>
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2" bind:this={element}>
     {#each $events.slice(0, limit) as event (event.id)}

svelte.config.js

@@ -16,12 +16,12 @@ export default {
     },
     csp: {
       directives: {
-        'script-src': ['self', 'plausible.io'],
-        'worker-src': ['self', 'blob:'],
-        'style-src': ['self', 'unsafe-inline'],
-        'frame-src': ['open.spotify.com', 'embed.tidal.com'],
-        'child-src': ['none'],
-        'form-action': ['none'],
+        "script-src": ["self", "plausible.io"],
+        "worker-src": ["self", "blob:"],
+        "style-src": ["self", "unsafe-inline"],
+        "frame-src": ["open.spotify.com", "embed.tidal.com"],
+        "child-src": ["none"],
+        "form-action": ["none"],
       },
     },
   },

vite.config.ts

@@ -1,8 +1,6 @@
-import fs from "fs"
 import dotenv from "dotenv"
-import * as path from "path"
 import {defineConfig} from "vite"
-import {SvelteKitPWA} from '@vite-pwa/sveltekit'
+import {SvelteKitPWA} from "@vite-pwa/sveltekit"
 import {sveltekit} from "@sveltejs/kit/vite"
 import svg from "@poppanator/sveltekit-svg"
 
@@ -29,6 +27,7 @@ export default defineConfig({
         short_name: process.env.VITE_PLATFORM_NAME,
         theme_color: process.env.VITE_PLATFORM_ACCENT,
         description: process.env.VITE_PLATFORM_DESCRIPTION,
+        // @ts-ignore
         permissions: ["clipboardRead", "clipboardWrite", "unlimitedStorage"],
         icons: [
           {src: "pwa-64x64.png", sizes: "64x64", type: "image/png"},