UI tweaks, fix some calendar stuff

src/app/components/MenuSpaces.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
+  import {displayRelayUrl} from '@welshman/util'
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -27,6 +28,8 @@
   let space = $page.params?.nrelay ? decodeNRelay($page.params?.nrelay) : undefined
   let showSettings = false
 
+  const assertNotNil = <T>(x: T) => x!
+
   const resetSpace = () => {
     space = ""
   }
@@ -60,10 +63,9 @@
 
 <div class="column menu gap-2">
   {#if showSettings}
-    <Button on:click={closeSettings} class="mb-4 flex items-center gap-2 text-lg">
-      <Icon icon="alt-arrow-left" size={7} />
-      Go Back
-    </Button>
+    <p class="mb-4 text-2xl text-center">
+      Settings for <span class="text-primary">{displayRelayUrl(assertNotNil(space))}</span>
+    </p>
     {#if getMembershipUrls($userMembership).includes(space || "")}
       <Button on:click={leaveSpace} class="btn btn-error">
         <Icon icon="exit" />
@@ -75,11 +77,14 @@
         Join Space
       </Button>
     {/if}
-  {:else if space}
-    <Button on:click={resetSpace} class="mb-4 flex items-center gap-2 text-lg">
+    <Button on:click={closeSettings} class="mt-4 flex items-center gap-2 text-lg">
       <Icon icon="alt-arrow-left" size={7} />
-      Back to Spaces
+      Go Back
     </Button>
+  {:else if space}
+    <p class="mb-4 text-2xl text-center">
+      Actions for <span class="text-primary">{displayRelayUrl(space)}</span>
+    </p>
     <div class="grid grid-cols-3 gap-2">
       <Link href={makeSpacePath(space)} class="btn btn-neutral">
         <Icon icon="chat-round" /> Chat
@@ -112,6 +117,10 @@
         <Icon icon="settings" /> Space Settings
       </Button>
     </div>
+    <Button on:click={resetSpace} class="mt-4 flex items-center gap-2 text-lg">
+      <Icon icon="alt-arrow-left" size={7} />
+      Back to Spaces
+    </Button>
   {:else}
     {#each getMembershipUrls($userMembership) as url (url)}
       <Button on:click={() => setSpace(url)}>

src/app/components/PeopleItem.svelte

@@ -44,7 +44,7 @@
   })
 </script>
 
-<Button class="card2 bg-alt shadow-xl" on:click={onClick}>
+<Button class="card2 bg-alt shadow-xl flex flex-col" on:click={onClick}>
   <Profile {pubkey} />
   <ProfileInfo {pubkey} />
   {#if roots.length > 0}
@@ -53,7 +53,7 @@
     {@const nevent = nip19.neventEncode({id: event.id, relays})}
     {@const following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
     <div class="divider" />
-    <button type="button" class="chat chat-start cursor-default" on:click|stopPropagation>
+    <button type="button" class="chat chat-start cursor-default flex" on:click|stopPropagation>
       <div class="bg-alt col-4 chat-bubble text-left">
         <Content showEntire hideMedia={!following} {event} />
         <Link external href={entityLink(nevent)} class="row-2 group justify-end whitespace-nowrap">

src/app/components/ThreadItem.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {nip19} from "nostr-tools"
   import {ctx} from "@welshman/lib"
   import {repository} from "@welshman/app"
   import {getReplyFilters} from "@welshman/util"
@@ -11,10 +10,6 @@
   import {entityLink} from "@app/state"
 
   export let event
-
-  const replies = deriveEvents(repository, {filters: getReplyFilters([event], {})})
-  const relays = ctx.app.router.Event(event).getUrls()
-  const nevent = nip19.neventEncode({...event, relays})
 </script>
 
 <div class="flex flex-col items-end">
@@ -23,10 +18,4 @@
       <Content {event} />
     </div>
   </NoteCard>
-  <Link
-    href={entityLink(nevent)}
-    class="btn btn-neutral z-feature -mt-6 mr-4 flex items-center gap-2 rounded-full">
-    <Icon icon="chat-round" />
-    <span>{$replies.length}</span>
-  </Link>
 </div>

src/lib/components/Page.svelte

@@ -1,3 +1,3 @@
-<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 sm:pb-0">
+<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0">
   <slot />
 </div>

src/routes/home/chats/+page.svelte

@@ -5,11 +5,16 @@
   import {pubkey, subscribe} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import ChatItem from "@app/components/ChatItem.svelte"
+  import ChatStart from "@app/components/ChatStart.svelte"
   import {chatSearch, pullConservatively} from "@app/state"
+  import {pushModal} from "@app/modal"
 
   let term = ""
 
+  const startChat = () => pushModal(ChatStart)
+
   $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
 
   onMount(() => {
@@ -26,13 +31,26 @@
 </script>
 
 <div class="content column gap-2">
-  <label class="input input-bordered mb-2 flex items-center gap-2" in:fly={{delay: 250}}>
-    <Icon icon="magnifer" />
-    <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
-  </label>
+  <div class="row-2 min-w-0 items-center">
+    <label class="input input-bordered flex flex-grow items-center gap-2" in:fly={{delay: 250}}>
+      <Icon icon="magnifer" />
+      <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
+    </label>
+    <Button class="btn btn-primary" on:click={startChat}>
+      <Icon icon="add-circle" />
+    </Button>
+  </div>
   <div class="column gap-2 overflow-auto">
     {#each chats as { id, pubkeys, messages } (id)}
       <ChatItem {id} {pubkeys} {messages} />
+    {:else}
+      <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
+        <p>No chats found! Try starting one up.</p>
+        <Button class="btn btn-primary" on:click={startChat}>
+          <Icon icon="add-circle" />
+          Start a Chat
+        </Button>
+      </div>
     {/each}
   </div>
 </div>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy, last, ago} from "@welshman/lib"
+  import {sortBy, tryCatch, last, ago} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {EVENT_DATE, EVENT_TIME} from "@welshman/util"
   import {subscribe, formatTimestampAsDate} from "@welshman/app"
@@ -21,9 +21,13 @@
 
   const createEvent = () => pushModal(EventCreate, {url})
 
-  const getStart = (event: TrustedEvent) =>
-    parseInt(event.tags.find(t => t[0] === "start")?.[1] || "0")
+  const getEnd = (event: TrustedEvent) =>
+    parseInt(event.tags.find(t => t[0] === "end")?.[1] || "")
 
+  const getStart = (event: TrustedEvent) =>
+    parseInt(event.tags.find(t => t[0] === "start")?.[1] || "")
+
+  let limit = 5
   let loading = true
 
   type Item = {
@@ -31,14 +35,19 @@
     dateDisplay?: string
   }
 
-  $: items = sortBy(getStart, $events).reduce<Item[]>((r, event) => {
+  $: items = sortBy(e => -getStart(e), $events).reduce<Item[]>((r, event) => {
+    const end = getEnd(event)
+    const start = getStart(event)
+
+    if (isNaN(start) || isNaN(end)) return r
+
     const prevDateDisplay =
       r.length > 0 ? formatTimestampAsDate(getStart(last(r).event)) : undefined
-    const newDateDisplay = formatTimestampAsDate(getStart(event))
+    const newDateDisplay = formatTimestampAsDate(start)
     const dateDisplay = prevDateDisplay === newDateDisplay ? undefined : newDateDisplay
 
     return [...r, {event, dateDisplay}]
-  }, [])
+  }, []).slice(0, limit)
 
   onMount(() => {
     const sub = subscribe({filters: [{kinds, since: ago(30)}]})
@@ -78,7 +87,7 @@
     </p>
   </div>
   <Button
-    class="tooltip tooltip-left fixed bottom-16 right-2 z-feature p-1 sm:bottom-4 sm:right-4"
+    class="tooltip tooltip-left fixed bottom-16 right-2 z-feature p-1 md:bottom-4 md:right-4"
     data-tip="Create an Event"
     on:click={createEvent}>
     <div class="btn btn-circle btn-primary flex h-12 w-12 items-center justify-center">

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

@@ -69,7 +69,7 @@
     </p>
   </div>
   <Button
-    class="tooltip tooltip-left fixed bottom-16 right-2 z-feature p-1 sm:bottom-4 sm:right-4"
+    class="tooltip tooltip-left fixed bottom-16 right-2 z-feature p-1 md:bottom-4 md:right-4"
     data-tip="Create an Event"
     on:click={createThread}>
     <div class="btn btn-circle btn-primary flex h-12 w-12 items-center justify-center">