Rough out calendar

src/routes/discover/+page.svelte

@@ -3,7 +3,7 @@
   import Masonry from "svelte-bricks"
   import {displayRelayUrl} from "@welshman/util"
   import {relaySearch} from "@welshman/app"
-  import {createScroller} from '@lib/html'
+  import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import {makeSpacePath} from "@app/routes"
   import {userMembership, discoverRelays} from "@app/state"

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
+  import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {sort, now} from "@welshman/lib"
   import {displayRelayUrl, EVENT_DATE, EVENT_TIME, CLASSIFIED} from "@welshman/util"
@@ -103,15 +103,10 @@
         </SecondaryNavItem>
       </div>
       <div in:fly|local={{delay: getDelay()}}>
-        <SecondaryNavItem href={makeSpacePath(url, "events")}>
+        <SecondaryNavItem href={makeSpacePath(url, "calendar")}>
           <Icon icon="calendar-minimalistic" /> Calendar
         </SecondaryNavItem>
       </div>
-      <div in:fly|local={{delay: getDelay()}}>
-        <SecondaryNavItem href={makeSpacePath(url, "listings")}>
-          <Icon icon="shop-minimalistic" /> Market
-        </SecondaryNavItem>
-      </div>
       {#if rooms.length > 0}
         <div transition:slide|local={{delay: getDelay()}}>
           <div class="h-2" />

src/routes/spaces/[nrelay]/[[topic]]/+page.svelte

@@ -8,17 +8,16 @@
 </script>
 
 <script lang="ts">
-  import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy, now} from "@welshman/lib"
-  import type {TrustedEvent, Filter} from "@welshman/util"
+  import {sortBy} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
   import {formatTimestampAsDate} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
-  import {userMembership, decodeNRelay, makeChatId, deriveChat, MESSAGE, REPLY} from "@app/state"
+  import {userMembership, decodeNRelay, makeChatId, deriveChat} from "@app/state"
   import {addRoomMembership, removeRoomMembership} from "@app/commands"
 
   const {nrelay, topic = ""} = $page.params
@@ -67,19 +66,20 @@
 
 <div class="relative flex h-screen flex-col">
   <div class="relative z-feature mx-2 rounded-xl pt-4">
-    <div class="flex min-h-12 justify-between items-center gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+    <div
+      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
       <div class="flex items-center gap-2">
         <Icon icon="hashtag" />
-        <strong>{topic || 'General'}</strong>
+        <strong>{topic || "General"}</strong>
       </div>
       {#if topic}
         {#if membership.includes(topic)}
-          <Button class="btn btn-sm btn-neutral" on:click={() => removeRoomMembership(url, topic)}>
+          <Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, topic)}>
             <Icon icon="arrows-a-logout-2" />
             Leave Room
           </Button>
         {:else}
-          <Button class="btn btn-sm btn-neutral" on:click={() => addRoomMembership(url, topic)}>
+          <Button class="btn btn-neutral btn-sm" on:click={() => addRoomMembership(url, topic)}>
             <Icon icon="login-2" />
             Join Room
           </Button>

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import {page} from "$app/stores"
+  import type {TrustedEvent} from '@welshman/util'
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import EventCreate from "@app/components/EventCreate.svelte"
+  import {pushModal} from "@app/modal"
+  import {eventsByUrl, decodeNRelay} from "@app/state"
+
+  const url = decodeNRelay($page.params.nrelay)
+
+  const createEvent = () => pushModal(EventCreate)
+
+  const getDateDisplay = (event: TrustedEvent, reset: boolean) => {
+    if (reset) {
+      prevEvent = undefined
+    }
+
+    return "hi"
+  }
+
+  let prevEvent
+  let loading = true
+
+  $: events = $eventsByUrl.get(url) || []
+
+  setTimeout(() => {
+    loading = false
+  }, 3000)
+</script>
+
+<div class="relative flex h-screen flex-col">
+  <div class="relative z-feature mx-2 rounded-xl pt-4">
+    <div
+      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+      <div class="flex items-center gap-2">
+        <Icon icon="calendar-minimalistic" />
+        <strong>Calendar</strong>
+      </div>
+    </div>
+  </div>
+  <div class="-mt-2 flex flex-grow flex-col overflow-auto py-2">
+    {#each events as event, i (event.id)}
+      {@const dateDisplay = getDateDisplay(event, i === 0)}
+      {#if dateDisplay}
+        <div>{dateDisplay}</div>
+      {/if}
+      <div>{event.id}</div>
+    {/each}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner {loading}>
+        {#if loading}
+          Looking for events...
+        {:else if events.length === 0}
+          No events found.
+        {/if}
+      </Spinner>
+    </p>
+  </div>
+  <Button class="fixed bottom-4 right-4 tooltip tooltip-left p-1" data-tip="Create an Event" on:click={createEvent}>
+    <div class="w-12 h-12 flex items-center justify-center btn btn-primary btn-circle">
+      <Icon icon="widget-add" />
+    </div>
+  </Button>
+</div>