Improve data loading a bit

package.json

@@ -13,6 +13,9 @@
     "format": "prettier --write src",
     "prepare": "husky"
   },
+  "overrides": {
+    "@capacitor/core": "^7.0.1"
+  },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
     "@sentry/cli": "^2.40.0",

src/app/components/ChannelMessage.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import {hash} from "@welshman/lib"
+  import {now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {
     thunks,
+    pubkey,
     deriveProfile,
     deriveProfileDisplay,
+    formatTimestampAsDate,
     formatTimestampAsTime,
-    pubkey,
   } from "@welshman/app"
   import {isMobile} from "@lib/html"
   import LongPress from "@lib/components/LongPress.svelte"
@@ -31,6 +33,7 @@
   export let inert = false
 
   const thunk = $thunks[event.id]
+  const today = formatTimestampAsDate(now())
   const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
@@ -70,7 +73,14 @@
           <Button on:click={openProfile} class="text-sm font-bold" style="color: {colorValue}">
             {$profileDisplay}
           </Button>
-          <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
+          <span class="text-xs opacity-50">
+            {#if formatTimestampAsDate(event.created_at) === today}
+              Today
+            {:else}
+              {formatTimestampAsDate(event.created_at)}
+            {/if}
+            at {formatTimestampAsTime(event.created_at)}
+          </span>
         </div>
       {/if}
       <div class="text-sm">

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

@@ -1,9 +1,9 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {ago, WEEK} from "@welshman/lib"
+  import {ago, MONTH} from "@welshman/lib"
   import {GROUPS, THREAD, COMMENT, MESSAGE, DELETE} from "@welshman/util"
-  import {subscribe} from "@welshman/app"
+  import {subscribe, load} from "@welshman/app"
   import Page from "@lib/components/Page.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
@@ -47,23 +47,22 @@
     checkConnection()
 
     const relays = [url]
-    const since = ago(WEEK)
+    const since = ago(MONTH)
 
-    // Load all groups for this space to populate navigation
-    pullConservatively({relays, filters: [{kinds: [GROUPS]}]})
+    // Load all groups for this space to populate navigation. It would be nice to sync, but relay29
+    // is too picky about how requests are built.
+    load({relays, filters: [{kinds: [GROUPS]}], delay: 0})
 
-    // Load threads and comments
+    // Load threads, comments, and recent messages for user rooms to help with a quick page transition
     pullConservatively({
       relays,
       filters: [
         {kinds: [THREAD], since},
         {kinds: [COMMENT], "#K": [String(THREAD)], since},
+        ...rooms.map(r => ({kinds: [MESSAGE], "#h": [r], since})),
       ],
     })
 
-    // Load recent messages for user rooms to help with a quick page transition
-    pullConservatively({relays, filters: rooms.map(r => ({kinds: [MESSAGE], "#h": [r], since}))})
-
     // Listen for deletes that would apply to messages we already have, and new groups
     const sub = subscribe({relays, filters: [{kinds: [DELETE, GROUPS], since}]})
 

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

@@ -3,7 +3,7 @@
   import {onMount} from "svelte"
   import {derived} from "svelte/store"
   import {page} from "$app/stores"
-  import {sleep, now, ctx} from "@welshman/lib"
+  import {sleep, ago, MONTH, ctx} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {throttled} from "@welshman/store"
   import {feedsFromFilter, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
@@ -152,7 +152,7 @@
 
     const sub = subscribe({
       relays: [url],
-      filters: [{kinds: [DELETE, REACTION, MESSAGE], "#h": [room], since: now()}],
+      filters: [{kinds: [DELETE, REACTION, MESSAGE], "#h": [room], since: ago(MONTH)}],
     })
 
     return () => {
@@ -190,7 +190,7 @@
     </div>
   </PageBar>
   <div
-    class="scroll-container -mt-2 flex flex-grow flex-col-reverse overflow-auto py-2"
+    class="scroll-container -mt-2 flex flex-grow flex-col-reverse overflow-y-auto overflow-x-hidden py-2"
     bind:this={element}>
     {#each $elements.slice(0, limit) as { type, id, value, showPubkey } (id)}
       {#if type === "date"}