Animate chat jump control and restore last chat

Author: code4bones

pwa/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4bones/branch-pwa",
-  "version": "0.1.0-beta.73",
+  "version": "0.1.0-beta.74",
   "private": true,
   "type": "module",
   "scripts": {

pwa/package.json

@@ -783,6 +783,16 @@ body {
   border-color: #0a4354 !important;
   font-size: 20px;
   box-shadow: 0 4px 12px rgb(0 0 0 / 28%);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.72);
+  transition: opacity 160ms ease-out, transform 160ms ease-out;
+}
+
+.pwa-chat-latest-button.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
 }
 
 .pwa-chat-latest-button:hover,
@@ -791,6 +801,12 @@ body {
   border-color: #125b70 !important;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .pwa-chat-latest-button {
+    transition: none;
+  }
+}
+
 .pwa-chat-error {
   padding: 8px 16px;
   color: #eb7770;

pwa/public/pwa.css

@@ -15,9 +15,10 @@ import { DiscoveryPage } from "../pages/DiscoveryPage.js";
 import { OnboardingPage } from "../pages/OnboardingPage.js";
 import { MessageRequestsPage } from "../pages/MessageRequestsPage.js";
 import { SettingsPage } from "../pages/SettingsPage.js";
-import { useThemeControls } from "../state/hooks.js";
+import { useContacts, useThemeControls } from "../state/hooks.js";
 import { AppStoreProvider, useAppStoreApi } from "../state/StoreProvider.js";
 import { useConversationsBootstrap } from "../storage/use-conversations-bootstrap.js";
+import { chatPath } from "./paths.js";
 
 export function PwaApp(): React.JSX.Element {
   return (
@@ -93,7 +94,7 @@ function ThemedApp(): React.JSX.Element {
             )}
           >
             <Route index element={<Navigate replace to="chats" />} />
-            <Route path="chats" element={<EmptyChatPane />} />
+            <Route path="chats" element={<LastOpenedChatOrEmptyPane />} />
             <Route path="chats/:contactId" element={<ChatPage />} />
             <Route path="requests" element={<MessageRequestsPage />} />
             <Route path="settings" element={<SettingsPage />} />
@@ -104,3 +105,13 @@ function ThemedApp(): React.JSX.Element {
     </ConfigProvider>
   );
 }
+
+function LastOpenedChatOrEmptyPane(): React.JSX.Element {
+  const { contacts, selectedContactId } = useContacts();
+  const selectedContact = selectedContactId === null
+    ? null
+    : contacts.find((contact) => contact.contactId === selectedContactId) ?? null;
+  return selectedContact === null
+    ? <EmptyChatPane />
+    : <Navigate replace to={chatPath(selectedContact.contactId)} />;
+}

pwa/src/app/App.tsx

@@ -88,19 +88,19 @@ export function MessageLog({ contactId, messages, emptyDescription, onIncomingMe
           ))
         )}
       </div>
-      {showScrollToBottom && (
-        <Tooltip title="Scroll to bottom">
-          <Button
-            aria-label="Scroll to bottom"
-            className="pwa-chat-latest-button"
-            icon={<VerticalAlignBottomOutlined />}
-            onClick={scrollToLatest}
-            shape="circle"
-            size="middle"
-            type="primary"
-          />
-        </Tooltip>
-      )}
+      <Tooltip title="Scroll to bottom">
+        <Button
+          aria-hidden={!showScrollToBottom}
+          aria-label="Scroll to bottom"
+          className={`pwa-chat-latest-button${showScrollToBottom ? " is-visible" : ""}`}
+          icon={<VerticalAlignBottomOutlined />}
+          onClick={scrollToLatest}
+          shape="circle"
+          size="middle"
+          tabIndex={showScrollToBottom ? 0 : -1}
+          type="primary"
+        />
+      </Tooltip>
     </div>
   );
 }

pwa/src/app/MessageLog.tsx

@@ -45,6 +45,12 @@ export function ChatPage(): React.JSX.Element {
   const inboundAttachmentOffer = useInboundAttachmentOffer(contact?.peerId ?? null);
   const completedAttachment = useCompletedAttachment(contact?.peerId ?? null);
 
+  useEffect(() => {
+    if (contact !== null) {
+      contacts.selectContact(contact.contactId);
+    }
+  }, [contact?.contactId, contacts.selectContact]);
+
   useEffect(() => {
     const peerId = contact?.peerId ?? null;
     if (peerId === null) {

pwa/src/pages/ChatPage.tsx

@@ -4,6 +4,7 @@ import type { AppStore } from "../store.js";
 import { deleteStoredContact, saveStoredContact } from "../../storage/contacts-store.js";
 import { deleteStoredMessagesForContact } from "../../storage/messages-store.js";
 import { deleteStoredReadState } from "../../storage/read-state-store.js";
+import { clearStoredLastOpenedChat, saveStoredLastOpenedChat } from "../../storage/last-opened-chat-store.js";
 
 export interface ContactSummary {
   readonly contactId: string;
@@ -43,6 +44,7 @@ export const createContactsSlice: StateCreator<AppStore, [], [], ContactsSlice>
     if (peerId !== null) {
       get().clearCompletedAttachmentProjection(peerId);
     }
+    const wasSelected = get().selectedContactId === contactId;
     set((state) => {
       const { [contactId]: removedMessages, ...messagesByContactId } = state.messagesByContactId;
       const { [contactId]: removedReadState, ...lastReadAtByContactId } = state.lastReadAtByContactId;
@@ -66,6 +68,18 @@ export const createContactsSlice: StateCreator<AppStore, [], [], ContactsSlice>
       // Best-effort persistence; the contact and local conversation are
       // already absent from this session even when IndexedDB is unavailable.
     });
+    if (wasSelected) {
+      void clearStoredLastOpenedChat().catch(() => {
+        // Best-effort local preference cleanup follows the local removal.
+      });
+    }
   },
-  selectContact: (selectedContactId) => { set({ selectedContactId }); }
+  selectContact: (selectedContactId) => {
+    set({ selectedContactId });
+    if (selectedContactId !== null) {
+      void saveStoredLastOpenedChat(selectedContactId).catch(() => {
+        // The current local selection remains usable when IndexedDB is unavailable.
+      });
+    }
+  }
 });

pwa/src/state/slices/contacts-slice.ts

@@ -0,0 +1,46 @@
+import { RECEIPT_POLICY_STORE, openDatabase } from "./database.js";
+
+const lastOpenedChatKey = "last_opened_chat";
+
+// This is device-local UI state only. It identifies an already-local contact;
+// it is neither protocol state nor information a relay can read or restore.
+export async function loadStoredLastOpenedChat(): Promise<string | null> {
+  const db = await openDatabase();
+  try {
+    return await new Promise<string | null>((resolve, reject) => {
+      const request = db.transaction(RECEIPT_POLICY_STORE, "readonly").objectStore(RECEIPT_POLICY_STORE).get(lastOpenedChatKey);
+      request.onsuccess = () => {
+        const contactId: unknown = request.result;
+        resolve(typeof contactId === "string" && contactId.length > 0 && contactId.length <= 128 ? contactId : null);
+      };
+      request.onerror = () => { reject(request.error ?? new Error("failed to read last opened chat")); };
+    });
+  } finally { db.close(); }
+}
+
+export async function saveStoredLastOpenedChat(contactId: string): Promise<void> {
+  if (contactId.length === 0 || contactId.length > 128) {
+    return;
+  }
+  const db = await openDatabase();
+  try {
+    await new Promise<void>((resolve, reject) => {
+      const transaction = db.transaction(RECEIPT_POLICY_STORE, "readwrite");
+      transaction.objectStore(RECEIPT_POLICY_STORE).put(contactId, lastOpenedChatKey);
+      transaction.oncomplete = () => { resolve(); };
+      transaction.onerror = () => { reject(transaction.error ?? new Error("failed to save last opened chat")); };
+    });
+  } finally { db.close(); }
+}
+
+export async function clearStoredLastOpenedChat(): Promise<void> {
+  const db = await openDatabase();
+  try {
+    await new Promise<void>((resolve, reject) => {
+      const transaction = db.transaction(RECEIPT_POLICY_STORE, "readwrite");
+      transaction.objectStore(RECEIPT_POLICY_STORE).delete(lastOpenedChatKey);
+      transaction.oncomplete = () => { resolve(); };
+      transaction.onerror = () => { reject(transaction.error ?? new Error("failed to clear last opened chat")); };
+    });
+  } finally { db.close(); }
+}

pwa/src/storage/last-opened-chat-store.ts

@@ -8,6 +8,7 @@ import { loadStoredReadState } from "./read-state-store.js";
 import { loadStoredReadReceiptPolicy } from "./receipt-policy-store.js";
 import { loadStoredContactDiscoveries } from "./contact-discovery-store.js";
 import { loadStoredContactDiscoveryPolicy } from "./contact-discovery-policy-store.js";
+import { clearStoredLastOpenedChat, loadStoredLastOpenedChat } from "./last-opened-chat-store.js";
 import { groupMessagesByContactId } from "../state/slices/conversations-slice.js";
 import { useAppStoreApi } from "../state/StoreProvider.js";
 
@@ -21,18 +22,26 @@ export function useConversationsBootstrap(): void {
   useEffect(() => {
     void (async () => {
       await removeLegacyDemoState();
-      const [contacts, messages, readState, messageRequests, sendReadReceipts, contactDiscoveries, allowContactDiscovery] = await Promise.all([
+      const [contacts, messages, readState, messageRequests, sendReadReceipts, contactDiscoveries, allowContactDiscovery, lastOpenedChatId] = await Promise.all([
         loadStoredContacts(),
         loadStoredMessages(),
         loadStoredReadState(),
         loadStoredMessageRequests(),
         loadStoredReadReceiptPolicy(),
         loadStoredContactDiscoveries(),
-        loadStoredContactDiscoveryPolicy()
+        loadStoredContactDiscoveryPolicy(),
+        loadStoredLastOpenedChat()
       ]);
+      const selectedContactId = lastOpenedChatId !== null && contacts.some((contact) => contact.contactId === lastOpenedChatId)
+        ? lastOpenedChatId
+        : null;
+      if (lastOpenedChatId !== null && selectedContactId === null) {
+        void clearStoredLastOpenedChat();
+      }
 
       storeApi.setState({
         contacts,
+        selectedContactId,
         messagesByContactId: groupMessagesByContactId(messages),
         lastReadAtByContactId: readState,
         incomingMessageRequests: messageRequests,

pwa/src/storage/use-conversations-bootstrap.ts

@@ -95,6 +95,7 @@ const contactsStorePath = resolve(process.cwd(), "src/storage/contacts-store.ts"
 const messagesStorePath = resolve(process.cwd(), "src/storage/messages-store.ts");
 const readStateStorePath = resolve(process.cwd(), "src/storage/read-state-store.ts");
 const receiptPolicyStorePath = resolve(process.cwd(), "src/storage/receipt-policy-store.ts");
+const lastOpenedChatStorePath = resolve(process.cwd(), "src/storage/last-opened-chat-store.ts");
 const receiptPolicySlicePath = resolve(process.cwd(), "src/state/slices/receipt-policy-slice.ts");
 const conversationsBootstrapPath = resolve(process.cwd(), "src/storage/use-conversations-bootstrap.ts");
 const contactsSlicePath = resolve(process.cwd(), "src/state/slices/contacts-slice.ts");
@@ -786,6 +787,9 @@ void test("PWA chat log follows the reader only when they are already at the lat
   assert.match(messageLog, /setShowScrollToBottom\(!atBottom\)/);
   assert.match(messageLog, /Scroll to bottom/);
   assert.match(messageLog, /VerticalAlignBottomOutlined/);
+  assert.match(messageLog, /is-visible/);
+  assert.match(messageLog, /aria-hidden=\{!showScrollToBottom\}/);
+  assert.match(messageLog, /tabIndex=\{showScrollToBottom \? 0 : -1\}/);
   assert.match(messageLog, /ChatDayDivider/);
   assert.match(messageLog, /DeliveryStateIcon/);
   assert.match(messageLog, /LoadingOutlined spin/);
@@ -1210,6 +1214,8 @@ void test("contacts, messages, read state, and inbound requests persist through
   const readStateSlice = await readFile(readStateSlicePath, "utf8");
   const hydrationSlice = await readFile(hydrationSlicePath, "utf8");
   const requireIdentity = await readFile(requireIdentityPath, "utf8");
+  const lastOpenedChatStore = await readFile(lastOpenedChatStorePath, "utf8");
+  const app = await readFile(appPath, "utf8");
 
   assert.match(database, /const DATABASE_VERSION = 5/);
   assert.match(database, /IDENTITY_STORE/);
@@ -1228,12 +1234,23 @@ void test("contacts, messages, read state, and inbound requests persist through
   assert.match(bootstrap, /loadStoredReadState/);
   assert.match(bootstrap, /await removeLegacyDemoState\(\)/);
   assert.match(bootstrap, /loadStoredMessageRequests/);
+  assert.match(bootstrap, /loadStoredLastOpenedChat/);
+  assert.match(bootstrap, /contacts\.some\(\(contact\) => contact\.contactId === lastOpenedChatId\)/);
+  assert.match(bootstrap, /clearStoredLastOpenedChat/);
   assert.match(bootstrap, /setConversationsLoaded/);
+  assert.match(lastOpenedChatStore, /RECEIPT_POLICY_STORE/);
+  assert.match(lastOpenedChatStore, /loadStoredLastOpenedChat/);
+  assert.match(lastOpenedChatStore, /saveStoredLastOpenedChat/);
+  assert.match(lastOpenedChatStore, /clearStoredLastOpenedChat/);
+  assert.match(app, /LastOpenedChatOrEmptyPane/);
+  assert.match(app, /chatPath\(selectedContact\.contactId\)/);
   assert.match(contactsSlice, /saveStoredContact/);
   assert.match(contactsSlice, /deleteStoredContact/);
   assert.match(contactsSlice, /forgetContact/);
   assert.match(contactsSlice, /deleteStoredMessagesForContact/);
   assert.match(contactsSlice, /deleteStoredReadState/);
+  assert.match(contactsSlice, /saveStoredLastOpenedChat/);
+  assert.match(contactsSlice, /clearStoredLastOpenedChat/);
   assert.match(messagesStore, /index\("byContactId"\)\.openCursor\(IDBKeyRange\.only\(contactId\)\)/);
   assert.match(readStateStore, /deleteStoredReadState/);
   assert.match(await readFile(receiptPolicyStorePath, "utf8"), /openDatabase/);