From 7e79201f12daabd1bbb85cb68b7eab0f3943c867 Mon Sep 17 00:00:00 2001
From: tomholford <tomholford@users.noreply.github.com>
Date: Thu, 17 Nov 2022 22:11:59 -0800
Subject: [PATCH 1/9] unreads: reuse getFirstUnread hook

This hook was originally extracted from the Unread banner and then reused in the Scroller; now pulling it back in to the Banner
---
 ui/src/chat/ChatUnreadAlerts.tsx | 30 +++++++++---------------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/ui/src/chat/ChatUnreadAlerts.tsx b/ui/src/chat/ChatUnreadAlerts.tsx
index 9270b0339f..55df6ac1bd 100644
--- a/ui/src/chat/ChatUnreadAlerts.tsx
+++ b/ui/src/chat/ChatUnreadAlerts.tsx
@@ -1,11 +1,9 @@
 import React, { useCallback } from 'react';
 import { format, isToday } from 'date-fns';
 import { useLocation, useNavigate } from 'react-router';
-import bigInt from 'big-integer';
 import XIcon from '@/components/icons/XIcon';
-import { ChatBrief } from '@/types/chat';
 import { pluralize } from '../logic/utils';
-import { useChatKeys, useChatState } from '../state/chat';
+import { useChatState, useGetFirstUnreadID } from '../state/chat';
 import { useChatInfo } from './useChatStore';
 
 interface ChatUnreadAlertsProps {
@@ -21,23 +19,13 @@ export default function ChatUnreadAlerts({ whom }: ChatUnreadAlertsProps) {
   const navigate = useNavigate();
   const location = useLocation();
   // TODO: how to handle replies?
-  const chatKeys = useChatKeys({ replying: false });
-  const goToFirstUnread = useCallback(
-    (b: ChatBrief) => {
-      const { 'read-id': lastRead } = b;
-      if (!lastRead) {
-        return;
-      }
-      // lastRead is formatted like: ~zod/123.456.789...
-      const lastReadBN = bigInt(lastRead.split('/')[1].replaceAll('.', ''));
-      const firstUnread = chatKeys.find((key) => key.gt(lastReadBN));
-      if (!firstUnread) {
-        return;
-      }
-      navigate(`${location.pathname}?msg=${firstUnread.toString()}`);
-    },
-    [chatKeys, location.pathname, navigate]
-  );
+  const firstUnreadID = useGetFirstUnreadID(whom);
+  const goToFirstUnread = useCallback(() => {
+    if (!firstUnreadID) {
+      return;
+    }
+    navigate(`${location.pathname}?msg=${firstUnreadID.toString()}`);
+  }, [firstUnreadID, location.pathname, navigate]);
 
   if (!chatInfo.unread || chatInfo.unread.seen) {
     return null;
@@ -62,7 +50,7 @@ export default function ChatUnreadAlerts({ whom }: ChatUnreadAlertsProps) {
       <div className="absolute top-2 left-1/2 z-20 flex w-full -translate-x-1/2 flex-wrap items-center justify-center gap-2">
         <button
           className="button whitespace-nowrap bg-blue-soft text-sm text-blue dark:bg-blue-900 lg:text-base"
-          onClick={() => goToFirstUnread(brief)}
+          onClick={goToFirstUnread}
         >
           <span className="whitespace-nowrap font-normal">
             {unreadMessage}&nbsp;&mdash;&nbsp;Click to View

From 549bfea3991690c0a00d68edf9874886d52b0b69 Mon Sep 17 00:00:00 2001
From: tomholford <tomholford@users.noreply.github.com>
Date: Thu, 17 Nov 2022 22:20:06 -0800
Subject: [PATCH 2/9] notice: consistent localStorage keys

This changes the localStorage key used to persist the banner notification dimissal to be consistent with the rest of the values we track.
---
 ui/src/components/ButterBar.tsx        | 6 +++++-
 ui/src/components/PrereleaseNotice.tsx | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/ButterBar.tsx b/ui/src/components/ButterBar.tsx
index 0e10962e6f..63321430ef 100644
--- a/ui/src/components/ButterBar.tsx
+++ b/ui/src/components/ButterBar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useLocalStorage } from 'usehooks-ts';
+import { createStorageKey } from '@/logic/utils';
 import AsteriskIcon from './icons/Asterisk16Icon';
 
 interface ButterBarProps {
@@ -8,7 +9,10 @@ interface ButterBarProps {
 }
 
 function ButterBar({ dismissKey, message }: ButterBarProps) {
-  const [isDismissed, setIsDismissed] = useLocalStorage(dismissKey, false);
+  const [isDismissed, setIsDismissed] = useLocalStorage(
+    createStorageKey(dismissKey),
+    false
+  );
 
   function onClick() {
     setIsDismissed(true);
diff --git a/ui/src/components/PrereleaseNotice.tsx b/ui/src/components/PrereleaseNotice.tsx
index 7e1a649d38..8a02631d3a 100644
--- a/ui/src/components/PrereleaseNotice.tsx
+++ b/ui/src/components/PrereleaseNotice.tsx
@@ -7,7 +7,7 @@ export default function PrereleaseNotice() {
 
   return (
     <ButterBar
-      dismissKey={`${app}-prerelease-notice-dismissed`}
+      dismissKey={`prerelease-notice-dismissed`}
       message={`Reminder: you are using a Beta version of ${app}. Everything you write or create, including groups and messages, will be deleted prior to official launch.`}
     />
   );

From 46c157fddfd747252175ce9ffd744c99d78d4069 Mon Sep 17 00:00:00 2001
From: tomholford <tomholford@users.noreply.github.com>
Date: Fri, 18 Nov 2022 00:56:34 -0800
Subject: [PATCH 3/9] channels: refactor pre-fetching behavior

First, prioritize the most recently viewed channel; then batch fetch the remaining channels.

Also, consolidate recentChannel tracking into a hook.
---
 ui/src/chat/ChatChannel.tsx         | 12 ++++--------
 ui/src/constants.ts                 |  3 ++-
 ui/src/diary/DiaryChannel.tsx       | 12 ++++--------
 ui/src/groups/Groups.tsx            | 11 ++++-------
 ui/src/heap/HeapChannel.tsx         | 14 +++++---------
 ui/src/logic/usePrefetchChannels.ts | 22 +++++++++++++++++++---
 ui/src/logic/useRecentChannel.ts    | 15 +++++++++++++++
 ui/src/state/chat/chat.ts           |  2 +-
 ui/src/state/chat/writs.ts          |  3 ++-
 ui/src/state/diary/notes.ts         | 11 ++++++-----
 ui/src/state/heap/curios.ts         |  9 ++++++---
 11 files changed, 68 insertions(+), 46 deletions(-)
 create mode 100644 ui/src/logic/useRecentChannel.ts

diff --git a/ui/src/chat/ChatChannel.tsx b/ui/src/chat/ChatChannel.tsx
index 1deb2d98e8..01e2a38cfa 100644
--- a/ui/src/chat/ChatChannel.tsx
+++ b/ui/src/chat/ChatChannel.tsx
@@ -15,23 +15,19 @@ import {
   useChannel,
 } from '@/state/groups/groups';
 import ChannelHeader from '@/channels/ChannelHeader';
-import { createStorageKey } from '@/logic/utils';
-import { useLocalStorage } from 'usehooks-ts';
+import useRecentChannel from '@/logic/useRecentChannel';
 
 function ChatChannel({ title }: ViewProps) {
   const { chShip, chName } = useParams();
   const chFlag = `${chShip}/${chName}`;
   const nest = `chat/${chFlag}`;
   const flag = useRouteGroup();
-  const [, setRecent] = useLocalStorage(
-    createStorageKey(`recent-chan:${flag}`),
-    ''
-  );
+  const { setRecentChannel } = useRecentChannel(flag);
 
   useEffect(() => {
     useChatState.getState().initialize(chFlag);
-    setRecent(nest);
-  }, [chFlag, nest, setRecent]);
+    setRecentChannel(nest);
+  }, [chFlag, nest, setRecentChannel]);
 
   const messages = useMessagesForChat(chFlag);
   const perms = useChatPerms(chFlag);
diff --git a/ui/src/constants.ts b/ui/src/constants.ts
index 44eb96143a..8d399dd025 100644
--- a/ui/src/constants.ts
+++ b/ui/src/constants.ts
@@ -1,5 +1,6 @@
 // eslint-disable-next-line import/prefer-default-export
-export const MESSAGE_FETCH_PAGE_SIZE = 100;
+export const MESSAGE_FETCH_PAGE_SIZE = 200;
+export const FETCH_BATCH_SIZE = 3;
 export const MAX_DISPLAYED_OPTIONS = 40;
 
 export const AUTHORS = [
diff --git a/ui/src/diary/DiaryChannel.tsx b/ui/src/diary/DiaryChannel.tsx
index 4e6d5fd394..735f48edab 100644
--- a/ui/src/diary/DiaryChannel.tsx
+++ b/ui/src/diary/DiaryChannel.tsx
@@ -21,9 +21,8 @@ import useDismissChannelNotifications from '@/logic/useDismissChannelNotificatio
 import { DiaryDisplayMode } from '@/types/diary';
 import DiaryGridView from '@/diary/DiaryList/DiaryGridView';
 import { Link } from 'react-router-dom';
-import { useLocalStorage } from 'usehooks-ts';
 import * as Toast from '@radix-ui/react-toast';
-import { createStorageKey } from '@/logic/utils';
+import useRecentChannel from '@/logic/useRecentChannel';
 import DiaryListItem from './DiaryList/DiaryListItem';
 import useDiaryActions from './useDiaryActions';
 
@@ -36,10 +35,7 @@ function DiaryChannel() {
   const letters = useNotesForDiary(chFlag);
   const location = useLocation();
   const navigate = useNavigate();
-  const [, setRecent] = useLocalStorage(
-    createStorageKey(`recent-chan:${flag}`),
-    ''
-  );
+  const { setRecentChannel } = useRecentChannel(flag);
   const newNote = new URLSearchParams(location.search).get('new');
   const [showToast, setShowToast] = useState(false);
   const { didCopy, onCopy } = useDiaryActions({
@@ -78,8 +74,8 @@ function DiaryChannel() {
 
   useEffect(() => {
     useDiaryState.getState().initialize(chFlag);
-    setRecent(nest);
-  }, [chFlag, nest, setRecent]);
+    setRecentChannel(nest);
+  }, [chFlag, nest, setRecentChannel]);
 
   useEffect(() => {
     let timeout: any;
diff --git a/ui/src/groups/Groups.tsx b/ui/src/groups/Groups.tsx
index 4ce19cd477..c00fed34ea 100644
--- a/ui/src/groups/Groups.tsx
+++ b/ui/src/groups/Groups.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Outlet, useLocation, useMatch, useNavigate } from 'react-router';
+import { Outlet, useMatch, useNavigate } from 'react-router';
 import {
   useGang,
   useGroup,
@@ -11,9 +11,9 @@ import api from '@/api';
 import { useChatState } from '@/state/chat';
 import { useHeapState } from '@/state/heap/heap';
 import { useDiaryState } from '@/state/diary';
-import { createStorageKey, nestToFlag } from '@/logic/utils';
-import { useLocalStorage } from 'usehooks-ts';
+import { nestToFlag } from '@/logic/utils';
 import { useIsMobile } from '@/logic/useMedia';
+import useRecentChannel from '@/logic/useRecentChannel';
 
 function Groups() {
   const navigate = useNavigate();
@@ -26,10 +26,7 @@ function Groups() {
     path: '/groups/:ship/:name',
     end: true,
   });
-  const [recentChannel] = useLocalStorage(
-    createStorageKey(`recent-chan:${flag}`),
-    ''
-  );
+  const { recentChannel } = useRecentChannel(flag);
 
   useEffect(() => {
     if (initialized && !group && !gang) {
diff --git a/ui/src/heap/HeapChannel.tsx b/ui/src/heap/HeapChannel.tsx
index 2254f576b9..16a688114f 100644
--- a/ui/src/heap/HeapChannel.tsx
+++ b/ui/src/heap/HeapChannel.tsx
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import cn from 'classnames';
 import { Outlet, useParams, useNavigate } from 'react-router';
 import { Helmet } from 'react-helmet';
-import { useLocalStorage } from 'usehooks-ts';
+import bigInt from 'big-integer';
 import { ViewProps } from '@/types/groups';
 import Layout from '@/components/Layout/Layout';
 import {
@@ -29,9 +29,8 @@ import {
 import HeapBlock from '@/heap/HeapBlock';
 import HeapRow from '@/heap/HeapRow';
 import useDismissChannelNotifications from '@/logic/useDismissChannelNotifications';
-import { createStorageKey } from '@/logic/utils';
 import { GRID, HeapCurio, HeapDisplayMode, HeapSortMode } from '@/types/heap';
-import bigInt from 'big-integer';
+import useRecentChannel from '@/logic/useRecentChannel';
 import NewCurioForm from './NewCurioForm';
 
 function HeapChannel({ title }: ViewProps) {
@@ -41,10 +40,7 @@ function HeapChannel({ title }: ViewProps) {
   const flag = useRouteGroup();
   const channel = useChannel(flag, nest);
   const group = useGroup(flag);
-  const [, setRecent] = useLocalStorage(
-    createStorageKey(`recent-chan:${flag}`),
-    ''
-  );
+  const { setRecentChannel } = useRecentChannel(flag);
 
   const navigate = useNavigate();
   const displayMode = useHeapDisplayMode(chFlag);
@@ -90,8 +86,8 @@ function HeapChannel({ title }: ViewProps) {
 
   useEffect(() => {
     useHeapState.getState().initialize(chFlag);
-    setRecent(nest);
-  }, [chFlag, nest, setRecent]);
+    setRecentChannel(nest);
+  }, [chFlag, nest, setRecentChannel]);
 
   useDismissChannelNotifications({
     nest,
diff --git a/ui/src/logic/usePrefetchChannels.ts b/ui/src/logic/usePrefetchChannels.ts
index a1f4a89e76..c220d305be 100644
--- a/ui/src/logic/usePrefetchChannels.ts
+++ b/ui/src/logic/usePrefetchChannels.ts
@@ -1,10 +1,13 @@
 import { useCallback, useEffect } from 'react';
+import { chunk } from 'lodash';
 import { useGroup } from '@/state/groups';
 import { useChatState } from '@/state/chat';
 import { asyncForEach } from '@/lib';
 import { useHeapState } from '@/state/heap/heap';
 import { useDiaryState } from '@/state/diary';
+import { FETCH_BATCH_SIZE } from '@/constants';
 import { nestToFlag } from './utils';
+import useRecentChannel from './useRecentChannel';
 
 /**
  * On load, prefetches the messages for the group that the user is currently in.
@@ -14,6 +17,7 @@ import { nestToFlag } from './utils';
  */
 export default function usePrefetchChannels(flag: string) {
   const group = useGroup(flag);
+  const { recentChannel } = useRecentChannel(flag);
   const { initialize: initializeChat } = useChatState.getState();
   const { initialize: initializeDiary } = useDiaryState.getState();
   const { initialize: initializeHeap } = useHeapState.getState();
@@ -23,7 +27,7 @@ export default function usePrefetchChannels(flag: string) {
       const [chType, chFlag] = nestToFlag(channel);
       switch (chType) {
         case 'chat':
-          initializeChat(chFlag);
+          await initializeChat(chFlag);
           break;
         case 'diary':
           initializeDiary(chFlag);
@@ -39,8 +43,20 @@ export default function usePrefetchChannels(flag: string) {
   );
 
   const fetchAll = useCallback(async () => {
-    await asyncForEach(Object.keys(group?.channels ?? {}), fetchChannel);
-  }, [fetchChannel, group]);
+    // first, prioritize the recent channel
+    if (recentChannel && recentChannel !== '') {
+      await fetchChannel(recentChannel);
+    }
+
+    // defer the rest, in batches
+    const channels = Object.keys(group?.channels ?? {}).filter(
+      (c) => c !== recentChannel
+    );
+    const batched = chunk(channels, FETCH_BATCH_SIZE);
+    batched.forEach(async (batch) => {
+      await asyncForEach(batch, fetchChannel);
+    });
+  }, [fetchChannel, group, recentChannel]);
 
   useEffect(() => {
     if (!group) {
diff --git a/ui/src/logic/useRecentChannel.ts b/ui/src/logic/useRecentChannel.ts
new file mode 100644
index 0000000000..365c6ba804
--- /dev/null
+++ b/ui/src/logic/useRecentChannel.ts
@@ -0,0 +1,15 @@
+import { useLocalStorage } from 'usehooks-ts';
+import { createStorageKey } from './utils';
+
+/**
+ * Tracks which channel was most recently visited
+ * @param flag The group flag
+ */
+export default function useRecentChannel(flag: string) {
+  const [recentChannel, setRecentChannel] = useLocalStorage(
+    createStorageKey(`recent-chan:${flag}`),
+    ''
+  );
+
+  return { recentChannel, setRecentChannel };
+}
diff --git a/ui/src/state/chat/chat.ts b/ui/src/state/chat/chat.ts
index 7c11d95b9f..1868b07811 100644
--- a/ui/src/state/chat/chat.ts
+++ b/ui/src/state/chat/chat.ts
@@ -598,7 +598,7 @@ export const useChatState = createState<ChatState>(
         draft.chatSubs.push(whom);
       });
 
-      await makeWritsStore(
+      makeWritsStore(
         whom,
         get,
         `/chat/${whom}/writs`,
diff --git a/ui/src/state/chat/writs.ts b/ui/src/state/chat/writs.ts
index 15e4c54aca..6778bd26a4 100644
--- a/ui/src/state/chat/writs.ts
+++ b/ui/src/state/chat/writs.ts
@@ -1,5 +1,6 @@
 import { BigIntOrderedMap, decToUd, udToDec, unixToDa } from '@urbit/api';
 import bigInt from 'big-integer';
+import { MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
 import api from '../../api';
 import {
   ChatWrit,
@@ -112,7 +113,7 @@ export default function makeWritsStore(
     });
   return {
     initialize: async () => {
-      const writs = await scry<ChatWrits>(`/newest/100`);
+      const writs = await scry<ChatWrits>(`/newest/${MESSAGE_FETCH_PAGE_SIZE}`);
       const sta = get();
       sta.batchSet((draft) => {
         const pact: Pact = {
diff --git a/ui/src/state/diary/notes.ts b/ui/src/state/diary/notes.ts
index ed2957b2fc..c8c41b1eff 100644
--- a/ui/src/state/diary/notes.ts
+++ b/ui/src/state/diary/notes.ts
@@ -1,17 +1,16 @@
+import bigInt from 'big-integer';
+import { BigIntOrderedMap, decToUd, udToDec } from '@urbit/api';
+import { MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
 import {
-  NoteDiff,
   NoteSeal,
   DiaryNote,
   DiaryNotes,
   DiaryFlag,
-  DiaryDiff,
   DiaryUpdate,
   DiaryOutlines,
   DiaryLetter,
   DiaryQuip,
 } from '@/types/diary';
-import { BigIntOrderedMap, decToUd, udToDec } from '@urbit/api';
-import bigInt from 'big-integer';
 import api from '../../api';
 import { DiaryState } from './type';
 
@@ -75,7 +74,9 @@ export default function makeNotesStore(
 
   return {
     initialize: async () => {
-      const notes = await scry<DiaryOutlines>(`/newest/100/outline`);
+      const notes = await scry<DiaryOutlines>(
+        `/newest/${MESSAGE_FETCH_PAGE_SIZE}/outline`
+      );
       const sta = get();
       sta.batchSet((draft) => {
         let noteMap = new BigIntOrderedMap<DiaryLetter>();
diff --git a/ui/src/state/heap/curios.ts b/ui/src/state/heap/curios.ts
index 379e671fbf..4ef8a8c9f6 100644
--- a/ui/src/state/heap/curios.ts
+++ b/ui/src/state/heap/curios.ts
@@ -1,3 +1,6 @@
+import { BigIntOrderedMap, decToUd, udToDec } from '@urbit/api';
+import bigInt from 'big-integer';
+import { MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
 import {
   CurioDiff,
   CurioSeal,
@@ -5,8 +8,6 @@ import {
   HeapCurios,
   HeapFlag,
 } from '@/types/heap';
-import { BigIntOrderedMap, decToUd, udToDec } from '@urbit/api';
-import bigInt from 'big-integer';
 import api from '../../api';
 import { HeapState } from './type';
 
@@ -70,7 +71,9 @@ export default function makeCuriosStore(
 
   return {
     initialize: async () => {
-      const curios = await scry<HeapCurios>(`/newest/100`);
+      const curios = await scry<HeapCurios>(
+        `/newest/${MESSAGE_FETCH_PAGE_SIZE}`
+      );
       const sta = get();
       sta.batchSet((draft) => {
         let curioMap = new BigIntOrderedMap<HeapCurio>();

From 21f0a9137f56f5e32da0a9a666af21538f932852 Mon Sep 17 00:00:00 2001
From: tomholford <tomholford@users.noreply.github.com>
Date: Fri, 18 Nov 2022 06:16:59 -0800
Subject: [PATCH 4/9] perf: dynamic scroller page fetching

Since we pre-fetch all messages from all channels, this change decreases the initial page fetch size to reduce load on the backend, and to render the page sooner.

Then for future page fetches, it uses a much higher number, to reduce subsequent fetches as the user backscrolls.

In a future commit, we will hook into the virtuoso scroll seek configuration; if the user is scrolling above a certain threshold velocity, we will fetch even more messages in anticipation of them going deep in the backscroll.
---
 ui/src/chat/ChatScroller/ChatScroller.tsx | 11 +++++++----
 ui/src/constants.ts                       |  4 +++-
 ui/src/state/chat/writs.ts                |  6 ++++--
 ui/src/state/diary/notes.ts               |  4 ++--
 ui/src/state/heap/curios.ts               |  4 ++--
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/ui/src/chat/ChatScroller/ChatScroller.tsx b/ui/src/chat/ChatScroller/ChatScroller.tsx
index 04e141a5c7..20f538b257 100644
--- a/ui/src/chat/ChatScroller/ChatScroller.tsx
+++ b/ui/src/chat/ChatScroller/ChatScroller.tsx
@@ -19,7 +19,10 @@ import {
   useGetFirstUnreadID,
   useLoadedWrits,
 } from '@/state/chat/chat';
-import { MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
+import {
+  INITIAL_MESSAGE_FETCH_PAGE_SIZE,
+  STANDARD_MESSAGE_FETCH_PAGE_SIZE,
+} from '@/constants';
 import { ChatBrief, ChatWrit } from '@/types/chat';
 import { useIsMobile } from '@/logic/useMedia';
 import { IChatScroller } from './IChatScroller';
@@ -182,7 +185,7 @@ export default function ChatScroller({
   );
 
   const fetchMessages = useCallback(
-    async (newer: boolean, pageSize = MESSAGE_FETCH_PAGE_SIZE) => {
+    async (newer: boolean, pageSize = STANDARD_MESSAGE_FETCH_PAGE_SIZE) => {
       const newest = messages.peekLargest();
       const seenNewest = newer && newest && loaded.newest.geq(newest[0]);
       const oldest = messages.peekSmallest();
@@ -242,7 +245,7 @@ export default function ChatScroller({
   }, [scrollTo, virtuoso]);
 
   /**
-   * By default, 100 messages are fetched on initial load. If there are more
+   * By default, 50 messages are fetched on initial load. If there are more
    * unreads per the brief, fetch those as well. That way, the user can click
    * the unread banner and see the unread messages.
    */
@@ -250,7 +253,7 @@ export default function ChatScroller({
     if (
       fetching === 'initial' &&
       brief &&
-      brief.count > MESSAGE_FETCH_PAGE_SIZE &&
+      brief.count > INITIAL_MESSAGE_FETCH_PAGE_SIZE &&
       firstUnreadID &&
       !keys.includes(firstUnreadID)
     ) {
diff --git a/ui/src/constants.ts b/ui/src/constants.ts
index 8d399dd025..5f3563f8cb 100644
--- a/ui/src/constants.ts
+++ b/ui/src/constants.ts
@@ -1,5 +1,7 @@
 // eslint-disable-next-line import/prefer-default-export
-export const MESSAGE_FETCH_PAGE_SIZE = 200;
+export const INITIAL_MESSAGE_FETCH_PAGE_SIZE = 50;
+export const STANDARD_MESSAGE_FETCH_PAGE_SIZE = 200;
+export const LARGE_MESSAGE_FETCH_PAGE_SIZE = 400;
 export const FETCH_BATCH_SIZE = 3;
 export const MAX_DISPLAYED_OPTIONS = 40;
 
diff --git a/ui/src/state/chat/writs.ts b/ui/src/state/chat/writs.ts
index 6778bd26a4..07fa00ea71 100644
--- a/ui/src/state/chat/writs.ts
+++ b/ui/src/state/chat/writs.ts
@@ -1,6 +1,6 @@
 import { BigIntOrderedMap, decToUd, udToDec, unixToDa } from '@urbit/api';
 import bigInt from 'big-integer';
-import { MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
+import { INITIAL_MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
 import api from '../../api';
 import {
   ChatWrit,
@@ -113,7 +113,9 @@ export default function makeWritsStore(
     });
   return {
     initialize: async () => {
-      const writs = await scry<ChatWrits>(`/newest/${MESSAGE_FETCH_PAGE_SIZE}`);
+      const writs = await scry<ChatWrits>(
+        `/newest/${INITIAL_MESSAGE_FETCH_PAGE_SIZE}`
+      );
       const sta = get();
       sta.batchSet((draft) => {
         const pact: Pact = {
diff --git a/ui/src/state/diary/notes.ts b/ui/src/state/diary/notes.ts
index c8c41b1eff..3c48743712 100644
--- a/ui/src/state/diary/notes.ts
+++ b/ui/src/state/diary/notes.ts
@@ -1,6 +1,6 @@
 import bigInt from 'big-integer';
 import { BigIntOrderedMap, decToUd, udToDec } from '@urbit/api';
-import { MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
+import { INITIAL_MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
 import {
   NoteSeal,
   DiaryNote,
@@ -75,7 +75,7 @@ export default function makeNotesStore(
   return {
     initialize: async () => {
       const notes = await scry<DiaryOutlines>(
-        `/newest/${MESSAGE_FETCH_PAGE_SIZE}/outline`
+        `/newest/${INITIAL_MESSAGE_FETCH_PAGE_SIZE}/outline`
       );
       const sta = get();
       sta.batchSet((draft) => {
diff --git a/ui/src/state/heap/curios.ts b/ui/src/state/heap/curios.ts
index 4ef8a8c9f6..671db87614 100644
--- a/ui/src/state/heap/curios.ts
+++ b/ui/src/state/heap/curios.ts
@@ -1,6 +1,6 @@
 import { BigIntOrderedMap, decToUd, udToDec } from '@urbit/api';
 import bigInt from 'big-integer';
-import { MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
+import { INITIAL_MESSAGE_FETCH_PAGE_SIZE } from '@/constants';
 import {
   CurioDiff,
   CurioSeal,
@@ -72,7 +72,7 @@ export default function makeCuriosStore(
   return {
     initialize: async () => {
       const curios = await scry<HeapCurios>(
-        `/newest/${MESSAGE_FETCH_PAGE_SIZE}`
+        `/newest/${INITIAL_MESSAGE_FETCH_PAGE_SIZE}`
       );
       const sta = get();
       sta.batchSet((draft) => {

From 170c3f213a80536fbe6c23d55720c0901ef15950 Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@hmiller.dev>
Date: Fri, 18 Nov 2022 17:39:14 -0600
Subject: [PATCH 5/9] sidebar-sort: go back to briefs which was correct, ensure
 they work for all channels

---
 desk/app/chat.hoon                         |  3 +--
 desk/app/diary.hoon                        |  1 +
 desk/app/heap.hoon                         |  1 +
 ui/src/chat/ChatUnreadAlerts.tsx           | 12 +++++++++---
 ui/src/groups/GroupSidebar/ChannelList.tsx |  2 --
 ui/src/logic/useChannelSort.ts             |  3 ++-
 ui/src/logic/useGroupSort.ts               |  6 +++++-
 ui/src/logic/useSidebarSort.ts             | 18 +++++++++---------
 ui/src/state/settings.ts                   |  4 ++--
 9 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/desk/app/chat.hoon b/desk/app/chat.hoon
index 4524edc493..c11ab4b86c 100644
--- a/desk/app/chat.hoon
+++ b/desk/app/chat.hoon
@@ -1112,8 +1112,6 @@
       (put:log-on:c log.chat time d)
     =.  ca-core
       (ca-give-updates time d)
-    =.  cor
-      (give-brief flag/flag ca-brief)
     ?-    -.d
         %add-sects
       =*  p  perm.chat
@@ -1131,6 +1129,7 @@
     ::
         %writs
       =.  pact.chat  (reduce:ca-pact time p.d)
+      =.  cor  (give-brief flag/flag ca-brief)
       ?-  -.q.p.d  
           ?(%del %add-feel %del-feel)  ca-core
           %add
diff --git a/desk/app/diary.hoon b/desk/app/diary.hoon
index 1f2a755b0f..98978a7526 100644
--- a/desk/app/diary.hoon
+++ b/desk/app/diary.hoon
@@ -600,6 +600,7 @@
     ?-    -.dif
         %notes
       =.  notes.diary  (reduce:di-notes time p.dif)
+      =.  cor  (give-brief flag di-brief)
       =/  cons=(list (list content:ha))
         (hark:di-notes our.bowl p.dif)
       =.  cor
diff --git a/desk/app/heap.hoon b/desk/app/heap.hoon
index b734dd557a..ddc16f1e4a 100644
--- a/desk/app/heap.hoon
+++ b/desk/app/heap.hoon
@@ -540,6 +540,7 @@
     ?-    -.d
         %curios
       =.  curios.heap  (reduce:he-curios time q.p.d)
+      =.  cor  (give-brief flag he-brief)
       ?-  -.q.p.d
           ?(%edit %del %add-feel %del-feel)  he-core
           %add
diff --git a/ui/src/chat/ChatUnreadAlerts.tsx b/ui/src/chat/ChatUnreadAlerts.tsx
index 55df6ac1bd..cf44c2fc7d 100644
--- a/ui/src/chat/ChatUnreadAlerts.tsx
+++ b/ui/src/chat/ChatUnreadAlerts.tsx
@@ -1,9 +1,11 @@
 import React, { useCallback } from 'react';
 import { format, isToday } from 'date-fns';
 import { useLocation, useNavigate } from 'react-router';
+import { daToUnix, udToDec } from '@urbit/api';
+import bigInt from 'big-integer';
 import XIcon from '@/components/icons/XIcon';
-import { pluralize } from '../logic/utils';
-import { useChatState, useGetFirstUnreadID } from '../state/chat';
+import { pluralize } from '@/logic/utils';
+import { useChatState, useGetFirstUnreadID } from '@/state/chat';
 import { useChatInfo } from './useChatStore';
 
 interface ChatUnreadAlertsProps {
@@ -32,7 +34,11 @@ export default function ChatUnreadAlerts({ whom }: ChatUnreadAlertsProps) {
   }
 
   const { brief } = chatInfo.unread;
-  const date = brief ? new Date(brief.last) : new Date();
+  const readId = brief['read-id'];
+  const udTime = readId
+    ? daToUnix(bigInt(udToDec(readId.split('/')[1])))
+    : null;
+  const date = udTime ? new Date(udTime) : new Date();
   const since = isToday(date)
     ? `${format(date, 'HH:mm')} today`
     : format(date, 'LLLL d');
diff --git a/ui/src/groups/GroupSidebar/ChannelList.tsx b/ui/src/groups/GroupSidebar/ChannelList.tsx
index f4411bb799..dc3f874f45 100644
--- a/ui/src/groups/GroupSidebar/ChannelList.tsx
+++ b/ui/src/groups/GroupSidebar/ChannelList.tsx
@@ -69,8 +69,6 @@ export default function ChannelList({ flag, className }: ChannelListProps) {
   const isMobile = useIsMobile();
   const { isChannelUnread } = useIsChannelUnread();
 
-  usePrefetchChannels(flag);
-
   if (!group) {
     return null;
   }
diff --git a/ui/src/logic/useChannelSort.ts b/ui/src/logic/useChannelSort.ts
index 7ebbc55210..cdb207a863 100644
--- a/ui/src/logic/useChannelSort.ts
+++ b/ui/src/logic/useChannelSort.ts
@@ -12,6 +12,7 @@ import useSidebarSort, {
   RECENT,
   sortAlphabetical,
   Sorter,
+  useRecentSort,
 } from './useSidebarSort';
 import { nestToFlag } from './utils';
 
@@ -66,7 +67,7 @@ function useRecentChannelSort() {
 export default function useChannelSort() {
   const groupFlag = useRouteGroup();
   const group = useGroup(groupFlag);
-  const sortRecent = useRecentChannelSort();
+  const sortRecent = useRecentSort();
 
   const sortDefault = (a: Zone, b: Zone) => {
     if (!group) {
diff --git a/ui/src/logic/useGroupSort.ts b/ui/src/logic/useGroupSort.ts
index bbae6aa8bc..8932b31608 100644
--- a/ui/src/logic/useGroupSort.ts
+++ b/ui/src/logic/useGroupSort.ts
@@ -32,7 +32,11 @@ export default function useGroupSort() {
       },
     };
 
-    return sortRecordsBy(groups, accessors[sortFn], sortFn === RECENT);
+    return sortRecordsBy(
+      groups,
+      accessors[sortFn] || accessors[ALPHABETICAL],
+      sortFn === RECENT
+    );
   }
 
   return {
diff --git a/ui/src/logic/useSidebarSort.ts b/ui/src/logic/useSidebarSort.ts
index b77a299a93..deb87e0a19 100644
--- a/ui/src/logic/useSidebarSort.ts
+++ b/ui/src/logic/useSidebarSort.ts
@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
-import { useBriefs } from '@/state/chat';
-import { ChatWhom } from '@/types/chat';
 import {
   SettingsState,
   useSettingsState,
   useGroupSideBarSort,
 } from '@/state/settings';
+import useAllBriefs from './useAllBriefs';
 
 export const ALPHABETICAL = 'A → Z';
 export const DEFAULT = 'Arranged';
@@ -21,19 +20,19 @@ interface UseSidebarSort {
   flag?: string;
 }
 
-export const sortAlphabetical = (a: ChatWhom, b: ChatWhom) =>
-  a.localeCompare(b);
+export const sortAlphabetical = (aNest: string, bNest: string) =>
+  aNest.localeCompare(bNest);
 
 const selSideBarSort = (s: SettingsState) => ({
   sideBarSort: s.groups.sideBarSort,
 });
 
 export function useRecentSort() {
-  const briefs = useBriefs();
+  const briefs = useAllBriefs();
   const sortRecent = useCallback(
-    (a: ChatWhom, b: ChatWhom) => {
-      const aLast = briefs[a]?.last ?? Number.NEGATIVE_INFINITY;
-      const bLast = briefs[b]?.last ?? Number.NEGATIVE_INFINITY;
+    (aNest: string, bNest: string) => {
+      const aLast = briefs[aNest]?.last ?? Number.NEGATIVE_INFINITY;
+      const bLast = briefs[bNest]?.last ?? Number.NEGATIVE_INFINITY;
       if (aLast < bLast) {
         return -1;
       }
@@ -89,7 +88,8 @@ export default function useSidebarSort({
       const aVal = accessor(aKey, aObj);
       const bVal = accessor(bKey, bObj);
 
-      return sortOptions[sortFn ?? 'A → Z'](aVal, bVal);
+      const sorter = sortOptions[sortFn] ?? sortOptions[ALPHABETICAL];
+      return sorter(aVal, bVal);
     });
 
     return reverse ? entries.reverse() : entries;
diff --git a/ui/src/state/settings.ts b/ui/src/state/settings.ts
index da95b19b61..2ad31c8cfd 100644
--- a/ui/src/state/settings.ts
+++ b/ui/src/state/settings.ts
@@ -141,7 +141,7 @@ export const useSettingsState = createState<BaseSettingsState>(
     },
     groups: {
       orderedGroupPins: [],
-      sideBarSort: ALPHABETICAL,
+      sideBarSort: DEFAULT,
       groupSideBarSort: '{"~": "A → Z"}' as Stringified<GroupSideBarSort>,
     },
     talk: {
@@ -243,7 +243,7 @@ export function useHeapSortMode(flag: string): HeapSortMode {
 export function useHeapDisplayMode(flag: string): HeapDisplayMode {
   const settings = useHeapSettings();
   const heapSetting = getSetting(settings, flag);
-  return heapSetting?.displayMode ?? 'list';
+  return heapSetting?.displayMode ?? 'grid';
 }
 
 const selDiarySettings = (s: SettingsState) => s.diary.settings;

From 1de822ed2bf95f51fc415eb7d624d56e7a3e34c8 Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@hmiller.dev>
Date: Fri, 18 Nov 2022 17:40:40 -0600
Subject: [PATCH 6/9] lint: fix snapshot

---
 .../GroupSidebar/__snapshots__/ChannelList.test.tsx.snap  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/groups/GroupSidebar/__snapshots__/ChannelList.test.tsx.snap b/ui/src/groups/GroupSidebar/__snapshots__/ChannelList.test.tsx.snap
index b58d02f0af..fd52cd3916 100644
--- a/ui/src/groups/GroupSidebar/__snapshots__/ChannelList.test.tsx.snap
+++ b/ui/src/groups/GroupSidebar/__snapshots__/ChannelList.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`ChannelList > renders as expected 1`] = `
           <span
             class="mr-2 pl-1"
           >
-            Sort: A → Z
+            Sort: Arranged
           </span>
         </span>
         <svg
@@ -54,7 +54,11 @@ exports[`ChannelList > renders as expected 1`] = `
     </div>
     <ul
       class="space-y-1"
-    />
+    >
+      <div
+        class="space-y-1"
+      />
+    </ul>
   </div>
 </DocumentFragment>
 `;

From 98d153b42ef56dec853c059e96cc14be91f17ad2 Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@hmiller.dev>
Date: Fri, 18 Nov 2022 17:49:42 -0600
Subject: [PATCH 7/9] channel-sort: ripping out incorrect sort

---
 ui/src/logic/useChannelSort.ts | 52 ----------------------------------
 1 file changed, 52 deletions(-)

diff --git a/ui/src/logic/useChannelSort.ts b/ui/src/logic/useChannelSort.ts
index cdb207a863..fc76bcdd49 100644
--- a/ui/src/logic/useChannelSort.ts
+++ b/ui/src/logic/useChannelSort.ts
@@ -1,11 +1,6 @@
 import { get } from 'lodash';
-import { useCallback } from 'react';
 import { useGroup, useRouteGroup } from '@/state/groups';
 import { GroupChannel, Channels, Zone } from '@/types/groups';
-import { useGetLatestChat } from '@/state/chat';
-import { ChatWhom } from '@/types/chat';
-import { useGetLatestNote } from '@/state/diary';
-import { useGetLatestCurio } from '@/state/heap/heap';
 import useSidebarSort, {
   ALPHABETICAL,
   DEFAULT,
@@ -14,56 +9,9 @@ import useSidebarSort, {
   Sorter,
   useRecentSort,
 } from './useSidebarSort';
-import { nestToFlag } from './utils';
 
 const UNZONED = 'default';
 
-function useGetLatestPost() {
-  const getLatestChat = useGetLatestChat();
-  const getLatestCurio = useGetLatestCurio();
-  const getLatestNote = useGetLatestNote();
-
-  return (flag: string) => {
-    const [chType, _chFlag] = nestToFlag(flag);
-
-    switch (chType) {
-      case 'chat':
-        return (getLatestChat(flag)[0] ?? Number.NEGATIVE_INFINITY).toString();
-
-      case 'diary':
-        return (getLatestNote(flag)[0] ?? Number.NEGATIVE_INFINITY).toString();
-
-      case 'heap':
-        return (getLatestCurio(flag)[0] ?? Number.NEGATIVE_INFINITY).toString();
-
-      default:
-        return Number.NEGATIVE_INFINITY.toString();
-    }
-  };
-}
-
-function useRecentChannelSort() {
-  const getLatestPost = useGetLatestPost();
-
-  const sortRecent = useCallback(
-    (a: ChatWhom, b: ChatWhom) => {
-      const aLast = getLatestPost(a);
-      const bLast = getLatestPost(b);
-
-      if (aLast < bLast) {
-        return -1;
-      }
-      if (aLast > bLast) {
-        return 1;
-      }
-      return 0;
-    },
-    [getLatestPost]
-  );
-
-  return sortRecent;
-}
-
 export default function useChannelSort() {
   const groupFlag = useRouteGroup();
   const group = useGroup(groupFlag);

From ba1efcb8e52705ae4216423b63420c70073791ad Mon Sep 17 00:00:00 2001
From: tomholford <tomholford@users.noreply.github.com>
Date: Sun, 20 Nov 2022 23:01:48 -0800
Subject: [PATCH 8/9] deps: upgrade react-virtuoso 2.19.0 --> 3.1.4

As luck would have it, an issue that I was struggling with on mobile has been fixed in a recent update:

https://github.com/petyosi/react-virtuoso/issues/788

Went through the list of breaking changes and confirmed we are not affected.
---
 ui/package-lock.json | 22 +++++++++++-----------
 ui/package.json      |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 04073af045..a347b804e9 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "homestead",
-  "version": "0.0.0",
+  "name": "landscape-apps",
+  "version": "0.9.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "homestead",
-      "version": "0.0.0",
+      "name": "landscape-apps",
+      "version": "0.9.1",
       "hasInstallScript": true,
       "dependencies": {
         "@aws-sdk/client-s3": "^3.190.0",
@@ -84,7 +84,7 @@
         "react-router": "^6.3.0",
         "react-router-dom": "^6.3.0",
         "react-select": "^5.3.2",
-        "react-virtuoso": "^2.19.0",
+        "react-virtuoso": "^3.1.4",
         "refractor": "^4.8.0",
         "tailwindcss-scoped-groups": "^2.0.0",
         "tippy.js": "^6.3.7",
@@ -23281,9 +23281,9 @@
       }
     },
     "node_modules/react-virtuoso": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.19.0.tgz",
-      "integrity": "sha512-GeCleV9cmpYGh1Ldfgdu+4gADLzdWJ48qc4tWguFzYz7FvUSAoELe8268rR8zfIb5FcV3tqpsdvFS5i51c8jyA==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-3.1.4.tgz",
+      "integrity": "sha512-oZt22JrSi/yLkp3HWa8teo0wqUg8zOA3i7y4dhHoM12njr5B8qGbVrq2fKGp3sbiZ9xiwX44KH5EEBo2GN2S4Q==",
       "dependencies": {
         "@virtuoso.dev/react-urx": "^0.2.12",
         "@virtuoso.dev/urx": "^0.2.12"
@@ -46440,9 +46440,9 @@
       }
     },
     "react-virtuoso": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.19.0.tgz",
-      "integrity": "sha512-GeCleV9cmpYGh1Ldfgdu+4gADLzdWJ48qc4tWguFzYz7FvUSAoELe8268rR8zfIb5FcV3tqpsdvFS5i51c8jyA==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-3.1.4.tgz",
+      "integrity": "sha512-oZt22JrSi/yLkp3HWa8teo0wqUg8zOA3i7y4dhHoM12njr5B8qGbVrq2fKGp3sbiZ9xiwX44KH5EEBo2GN2S4Q==",
       "requires": {
         "@virtuoso.dev/react-urx": "^0.2.12",
         "@virtuoso.dev/urx": "^0.2.12"
diff --git a/ui/package.json b/ui/package.json
index 28f57d4368..432b081bbd 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -114,7 +114,7 @@
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-select": "^5.3.2",
-    "react-virtuoso": "^2.19.0",
+    "react-virtuoso": "^3.1.4",
     "refractor": "^4.8.0",
     "tailwindcss-scoped-groups": "^2.0.0",
     "tippy.js": "^6.3.7",

From bb216ad030dae8e9aeaac6f7103725425318735d Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@hmiller.dev>
Date: Mon, 21 Nov 2022 14:48:25 -0600
Subject: [PATCH 9/9] chat: changing back fetch size

---
 ui/src/constants.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/constants.ts b/ui/src/constants.ts
index 5f3563f8cb..9e566e73b2 100644
--- a/ui/src/constants.ts
+++ b/ui/src/constants.ts
@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/prefer-default-export
 export const INITIAL_MESSAGE_FETCH_PAGE_SIZE = 50;
-export const STANDARD_MESSAGE_FETCH_PAGE_SIZE = 200;
-export const LARGE_MESSAGE_FETCH_PAGE_SIZE = 400;
+export const STANDARD_MESSAGE_FETCH_PAGE_SIZE = 100;
+export const LARGE_MESSAGE_FETCH_PAGE_SIZE = 200;
 export const FETCH_BATCH_SIZE = 3;
 export const MAX_DISPLAYED_OPTIONS = 40;