From 9912b21b3db838d4c06e5f17a7826caef62cb709 Mon Sep 17 00:00:00 2001
From: thephez <thephez@users.noreply.github.com>
Date: Sun, 24 May 2026 20:26:07 -0400
Subject: [PATCH 1/4] feat(dashnote): optimize workspace UI for mobile

Convert modals to bottom sheets, add mobile action sheet and info
drawer to the note editor, surface activity drawer from the mobile
nav, and enlarge tap targets across login and note list.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 example-apps/dashnote/src/App.tsx             |   1 +
 .../dashnote/src/components/AppShell.tsx      |  15 +
 .../dashnote/src/components/LoginModal.tsx    |   7 +-
 .../dashnote/src/components/Modal.tsx         |   4 +-
 .../dashnote/src/components/NoteEditor.tsx    | 235 ++++++--
 .../dashnote/src/components/NoteList.tsx      | 529 +++++++++++++++---
 .../src/components/NotesWorkspace.tsx         |  42 +-
 example-apps/dashnote/src/styles/globals.css  |   8 +
 example-apps/dashnote/test/App.test.tsx       |  19 +
 .../dashnote/test/LoginModal.test.tsx         |  10 +
 .../dashnote/test/NoteEditor.test.tsx         | 172 ++++--
 example-apps/dashnote/test/NoteList.test.tsx  | 228 +++++++-
 .../dashnote/test/NotesWorkspace.test.tsx     |  45 +-
 13 files changed, 1088 insertions(+), 227 deletions(-)

diff --git a/example-apps/dashnote/src/App.tsx b/example-apps/dashnote/src/App.tsx
index 68b27cd7..04c4e56e 100644
--- a/example-apps/dashnote/src/App.tsx
+++ b/example-apps/dashnote/src/App.tsx
@@ -68,6 +68,7 @@ function App() {
         dpnsName={session.dpnsName}
         contractId={session.contractId}
         onLoginOpen={() => setLoginOpen(true)}
+        onOpenActivity={() => setActivityOpen(true)}
         mobileFullBleed={mobileFullBleed}
       >
         {tab === "notes" ? (
diff --git a/example-apps/dashnote/src/components/AppShell.tsx b/example-apps/dashnote/src/components/AppShell.tsx
index 5ad9111b..d438d547 100644
--- a/example-apps/dashnote/src/components/AppShell.tsx
+++ b/example-apps/dashnote/src/components/AppShell.tsx
@@ -14,6 +14,7 @@ interface AppShellProps {
   dpnsName: string | null;
   contractId: string | null;
   onLoginOpen: () => void;
+  onOpenActivity?: () => void;
   children: ReactNode;
   mobileFullBleed?: boolean;
 }
@@ -97,6 +98,7 @@ export function AppShell({
   dpnsName,
   contractId,
   onLoginOpen,
+  onOpenActivity,
   children,
   mobileFullBleed = false,
 }: AppShellProps) {
@@ -132,6 +134,19 @@ export function AppShell({
           closeDrawer();
         }}
       />
+      {onOpenActivity && (
+        <div className="md:hidden">
+          <NavButton
+            label="Activity"
+            glyph="⌁"
+            active={false}
+            onClick={() => {
+              onOpenActivity();
+              closeDrawer();
+            }}
+          />
+        </div>
+      )}
       {status !== "authenticated" && status !== "browsing" && (
         <NavButton
           label="Sign in"
diff --git a/example-apps/dashnote/src/components/LoginModal.tsx b/example-apps/dashnote/src/components/LoginModal.tsx
index 094b88fc..46c1ba33 100644
--- a/example-apps/dashnote/src/components/LoginModal.tsx
+++ b/example-apps/dashnote/src/components/LoginModal.tsx
@@ -68,6 +68,7 @@ export function LoginModal({ open, onClose }: LoginModalProps) {
     <Modal
       open={open}
       onClose={onClose}
+      panelClassName="max-md:max-h-[calc(100dvh-1.5rem)] max-md:overflow-y-auto"
       title={
         <div className="flex items-center gap-2.5">
           <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-accent text-bg">
@@ -279,14 +280,14 @@ export function LoginModal({ open, onClose }: LoginModalProps) {
           <button
             type="submit"
             disabled={submitting || !secret.trim() || previewBlocksLogin}
-            className="flex-1 rounded-md bg-accent px-4 py-2 text-[13px] font-semibold text-bg transition hover:bg-accent-dim disabled:cursor-not-allowed disabled:bg-surface-2 disabled:text-ink-4"
+            className="min-h-11 flex-1 rounded-md bg-accent px-4 py-2 text-[13px] font-semibold text-bg transition hover:bg-accent-dim disabled:cursor-not-allowed disabled:bg-surface-2 disabled:text-ink-4"
           >
             {submitting ? "Connecting…" : "Sign in"}
           </button>
           <button
             type="button"
             onClick={onClose}
-            className="rounded-md border border-line bg-transparent px-4 py-2 text-[13px] font-semibold text-ink-3 transition hover:border-line-2 hover:text-ink-2"
+            className="min-h-11 rounded-md border border-line bg-transparent px-4 py-2 text-[13px] font-semibold text-ink-3 transition hover:border-line-2 hover:text-ink-2"
           >
             Cancel
           </button>
@@ -312,7 +313,7 @@ export function LoginModal({ open, onClose }: LoginModalProps) {
                 href="https://bridge.thepasta.org/"
                 target="_blank"
                 rel="noreferrer"
-                className="font-semibold text-accent underline-offset-2 hover:underline"
+                className="font-semibold text-accent underline-offset-2 hover:underline max-md:mt-2 max-md:inline-flex max-md:min-h-10 max-md:items-center max-md:rounded-full max-md:border max-md:border-line-2 max-md:px-3 max-md:no-underline"
               >
                 Create one on Dash Bridge →
               </a>
diff --git a/example-apps/dashnote/src/components/Modal.tsx b/example-apps/dashnote/src/components/Modal.tsx
index 14c31427..31e8bb49 100644
--- a/example-apps/dashnote/src/components/Modal.tsx
+++ b/example-apps/dashnote/src/components/Modal.tsx
@@ -42,7 +42,7 @@ export function Modal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm max-md:items-end max-md:p-0"
       onClick={onClose}
     >
       <div
@@ -51,7 +51,7 @@ export function Modal({
         aria-modal="true"
         aria-labelledby={titleId}
         tabIndex={-1}
-        className={`w-full max-w-md overflow-hidden rounded-xl border border-line bg-surface shadow-[0_24px_60px_-20px_rgba(0,0,0,0.7)] outline-none ${panelClassName ?? ""}`}
+        className={`w-full max-w-md overflow-hidden rounded-xl border border-line bg-surface shadow-[0_24px_60px_-20px_rgba(0,0,0,0.7)] outline-none max-md:max-w-none max-md:rounded-b-none max-md:border-x-0 max-md:border-b-0 ${panelClassName ?? ""}`}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between px-5 py-3">
diff --git a/example-apps/dashnote/src/components/NoteEditor.tsx b/example-apps/dashnote/src/components/NoteEditor.tsx
index 42b2305c..091bd63e 100644
--- a/example-apps/dashnote/src/components/NoteEditor.tsx
+++ b/example-apps/dashnote/src/components/NoteEditor.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 
 import type { NoteRecord } from "../dash/queries";
 import { FIELD_BYTE_LIMIT } from "../lib/fieldLimits";
@@ -65,6 +65,10 @@ export function NoteEditor({
   const isNew = selectedId === "new";
   const oversize = messageOversize;
   const [jsonOpen, setJsonOpen] = useState(false);
+  const [mobileActionsOpen, setMobileActionsOpen] = useState(false);
+  const [mobileInfoOpen, setMobileInfoOpen] = useState(false);
+  const showMobileSave =
+    !isDesktop && !isReadOnly && hasSelection && (dirty || saving);
 
   // Cmd/Ctrl-S triggers Save (matches the keyboard hint chip).
   useEffect(() => {
@@ -208,7 +212,7 @@ export function NoteEditor({
               </svg>
             </button>
           )}
-          {!isReadOnly && hasSelection && (
+          {!isReadOnly && hasSelection && (isDesktop || showMobileSave) && (
             <button
               type="button"
               onClick={onSave}
@@ -227,6 +231,30 @@ export function NoteEditor({
               )}
             </button>
           )}
+          {!isDesktop && hasSelection && (
+            <button
+              type="button"
+              onClick={() => setMobileActionsOpen(true)}
+              aria-label="Note actions"
+              className="flex h-10 w-10 items-center justify-center rounded-full text-ink-3 transition hover:bg-surface-2 hover:text-ink"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.25"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <circle cx="12" cy="12" r="1" />
+                <circle cx="19" cy="12" r="1" />
+                <circle cx="5" cy="12" r="1" />
+              </svg>
+            </button>
+          )}
         </div>
       </div>
 
@@ -314,7 +342,7 @@ export function NoteEditor({
                 onChange={(event) => onTitleChange(event.target.value)}
                 placeholder={isNew ? "New note title" : "Title"}
                 disabled={!canEdit}
-                className="w-full border-0 bg-transparent px-0 pt-0 pb-1 text-[28px] font-semibold leading-tight tracking-tight text-ink outline-none placeholder:text-ink-4 disabled:cursor-not-allowed disabled:text-ink-4"
+                className="mobile-note-editor-field w-full border-0 bg-transparent px-0 pt-0 pb-1 text-[28px] font-semibold leading-tight tracking-tight text-ink outline-none placeholder:text-ink-4 disabled:cursor-not-allowed disabled:text-ink-4"
               />
               <textarea
                 aria-label="Body"
@@ -323,70 +351,23 @@ export function NoteEditor({
                 placeholder="Start writing…"
                 disabled={!canEdit}
                 rows={16}
-                className="w-full min-h-0 flex-1 border-0 bg-transparent px-0 py-1 text-[15px] leading-6 text-ink outline-none placeholder:text-ink-4 disabled:cursor-not-allowed disabled:text-ink-4 md:min-h-[340px] xl:min-h-0"
+                className="mobile-note-editor-field w-full min-h-0 flex-1 border-0 bg-transparent px-0 py-1 text-[15px] leading-6 text-ink outline-none placeholder:text-ink-4 disabled:cursor-not-allowed disabled:text-ink-4 md:min-h-[340px] xl:min-h-0"
               />
               {(messageBytes / FIELD_BYTE_LIMIT >= 0.75 || messageOversize) && (
                 <div className="mt-2 md:hidden">
                   <FillBar bytes={messageBytes} limit={FIELD_BYTE_LIMIT} />
                 </div>
               )}
-              {isReadOnly && (
-                <button
-                  type="button"
-                  onClick={onOpenLogin}
-                  aria-label="Sign in to edit this note"
-                  className="absolute inset-0 z-10 cursor-pointer bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-accent"
-                />
-              )}
             </label>
 
-            <div className="flex items-center gap-1.5 text-[11px] text-ink-4 md:hidden">
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                aria-hidden="true"
-                className="shrink-0"
+            {isReadOnly && (
+              <button
+                type="button"
+                onClick={onOpenLogin}
+                className="inline-flex min-h-11 items-center justify-center rounded-full bg-accent px-4 py-2 text-[13px] font-semibold text-bg transition hover:bg-accent-dim md:hidden"
               >
-                <circle cx="12" cy="12" r="10" />
-                <path d="M12 16v-4M12 8h.01" />
-              </svg>
-              <span>
-                Notes are stored publicly on Dash Platform — not encrypted.
-              </span>
-            </div>
-
-            {canDelete && (
-              <div className="mt-2 flex justify-center md:hidden">
-                <button
-                  type="button"
-                  onClick={onDelete}
-                  disabled={deleting}
-                  className="inline-flex items-center gap-2 rounded-full px-4 py-2 text-[14px] font-medium text-[color:var(--color-danger)] transition hover:bg-surface-2 disabled:cursor-not-allowed disabled:text-ink-4"
-                >
-                  <svg
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
-                  >
-                    <path d="M3 6h18" />
-                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
-                  </svg>
-                  {deleting ? "Deleting…" : "Delete note"}
-                </button>
-              </div>
+                Sign in to edit
+              </button>
             )}
           </>
         )}
@@ -426,10 +407,148 @@ export function NoteEditor({
         contractId={contractId}
         onClose={() => setJsonOpen(false)}
       />
+      <MobileActionSheet
+        open={mobileActionsOpen}
+        title="Note actions"
+        onClose={() => setMobileActionsOpen(false)}
+      >
+        {note && (
+          <button
+            type="button"
+            aria-label="Info"
+            onClick={() => {
+              setMobileActionsOpen(false);
+              setMobileInfoOpen(true);
+            }}
+            className="flex min-h-12 w-full items-center justify-between rounded-xl px-4 py-3 text-left text-[15px] font-medium text-ink hover:bg-surface-2"
+          >
+            Info
+            <span className="font-mono text-[11px] text-ink-4">
+              Rev {note.revision}
+            </span>
+          </button>
+        )}
+        {note && (
+          <button
+            type="button"
+            onClick={() => {
+              setMobileActionsOpen(false);
+              setJsonOpen(true);
+            }}
+            className="flex min-h-12 w-full items-center rounded-xl px-4 py-3 text-left text-[15px] font-medium text-ink hover:bg-surface-2"
+          >
+            View JSON
+          </button>
+        )}
+        {isReadOnly && (
+          <button
+            type="button"
+            onClick={() => {
+              setMobileActionsOpen(false);
+              onOpenLogin();
+            }}
+            className="flex min-h-12 w-full items-center rounded-xl px-4 py-3 text-left text-[15px] font-semibold text-accent hover:bg-surface-2"
+          >
+            Sign in to edit
+          </button>
+        )}
+        {canDelete && (
+          <button
+            type="button"
+            onClick={() => {
+              setMobileActionsOpen(false);
+              onDelete();
+            }}
+            disabled={deleting}
+            className="flex min-h-12 w-full items-center rounded-xl px-4 py-3 text-left text-[15px] font-semibold text-[color:var(--color-danger)] hover:bg-surface-2 disabled:cursor-not-allowed disabled:text-ink-4"
+          >
+            {deleting ? "Deleting…" : "Delete"}
+          </button>
+        )}
+      </MobileActionSheet>
+      <MobileActionSheet
+        open={mobileInfoOpen}
+        title="Note info"
+        onClose={() => setMobileInfoOpen(false)}
+      >
+        {note ? (
+          <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 px-1 py-2 text-[13px]">
+            <dt className="text-ink-4">Revision</dt>
+            <dd className="text-right font-mono text-ink">{note.revision}</dd>
+            <dt className="text-ink-4">Created</dt>
+            <dd className="text-right text-ink">
+              {formatTimestamp(note.createdAt)}
+            </dd>
+            <dt className="text-ink-4">Updated</dt>
+            <dd className="text-right text-ink">
+              {formatTimestamp(note.updatedAt)}
+            </dd>
+            <dt className="text-ink-4">Body</dt>
+            <dd className="text-right font-mono text-ink">
+              {messageBytes.toLocaleString()} /{" "}
+              {FIELD_BYTE_LIMIT.toLocaleString()} B
+            </dd>
+          </dl>
+        ) : (
+          <div className="px-1 py-2 text-[13px] text-ink-3">
+            Platform metadata appears after the first save.
+          </div>
+        )}
+      </MobileActionSheet>
     </section>
   );
 }
 
+function MobileActionSheet({
+  open,
+  title,
+  children,
+  onClose,
+}: {
+  open: boolean;
+  title: string;
+  children: ReactNode;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end bg-black/40 px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:hidden"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        className="w-full rounded-2xl border border-line bg-surface p-2 shadow-[0_22px_60px_-24px_rgba(0,0,0,0.65)]"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="px-4 pb-1 pt-3 text-[12px] font-semibold uppercase tracking-[0.12em] text-ink-4">
+          {title}
+        </div>
+        <div className="py-1">{children}</div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="mt-1 flex min-h-12 w-full items-center justify-center rounded-xl bg-surface-2 px-4 py-3 text-[15px] font-semibold text-ink"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
 function FillBar({ bytes, limit }: { bytes: number; limit: number }) {
   const pct = Math.min(100, (bytes / limit) * 100);
   const over = bytes > limit;
diff --git a/example-apps/dashnote/src/components/NoteList.tsx b/example-apps/dashnote/src/components/NoteList.tsx
index 981076db..485e7bee 100644
--- a/example-apps/dashnote/src/components/NoteList.tsx
+++ b/example-apps/dashnote/src/components/NoteList.tsx
@@ -1,7 +1,16 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PointerEvent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
 
 import type { NoteRecord } from "../dash/queries";
 import {
+  formatTimestamp,
   formatRelativeTime,
   noteDisplayTitle,
   notePreview,
@@ -16,6 +25,11 @@ interface NoteListProps {
   onNew: () => void;
   canCreate: boolean;
   newButtonLabel?: string;
+  isDesktop?: boolean;
+  canDeleteNotes?: boolean;
+  isReadOnly?: boolean;
+  onDeleteNote?: (note: NoteRecord) => void;
+  onOpenLogin?: () => void;
 }
 
 export function NoteList({
@@ -27,8 +41,27 @@ export function NoteList({
   onNew,
   canCreate,
   newButtonLabel = "New note",
+  isDesktop = true,
+  canDeleteNotes = false,
+  isReadOnly = false,
+  onDeleteNote,
+  onOpenLogin,
 }: NoteListProps) {
   const [search, setSearch] = useState("");
+  const [actionsNote, setActionsNote] = useState<NoteRecord | null>(null);
+  const [infoNote, setInfoNote] = useState<NoteRecord | null>(null);
+  const [openSwipeId, setOpenSwipeId] = useState<string | null>(null);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [dragOffset, setDragOffset] = useState(0);
+  const gestureRef = useRef<{
+    noteId: string;
+    startX: number;
+    startY: number;
+    ignored: boolean;
+    vertical: boolean;
+    horizontal: boolean;
+    latestOffset: number;
+  } | null>(null);
   const searchRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -58,62 +91,171 @@ export function NoteList({
   }, [notes, search]);
 
   const searching = search.trim().length > 0;
+  const revealedWidth = 156;
+
+  function closeRowActions() {
+    setOpenSwipeId(null);
+    setDraggingId(null);
+    setDragOffset(0);
+    gestureRef.current = null;
+  }
+
+  function handlePointerDown(event: PointerEvent | MouseEvent, noteId: string) {
+    if (isDesktop || (event.button !== 0 && event.button !== undefined)) return;
+    gestureRef.current = {
+      noteId,
+      startX: event.clientX,
+      startY: event.clientY,
+      ignored: event.clientX < 20,
+      vertical: false,
+      horizontal: false,
+      latestOffset: 0,
+    };
+  }
+
+  function handlePointerMove(event: PointerEvent | MouseEvent) {
+    const gesture = gestureRef.current;
+    if (!gesture || gesture.ignored || isDesktop) return;
+    const dx = event.clientX - gesture.startX;
+    const dy = event.clientY - gesture.startY;
+    const absX = Math.abs(dx);
+    const absY = Math.abs(dy);
+    if (!gesture.horizontal && absY > 12 && absY > absX) {
+      gesture.vertical = true;
+      setDraggingId(null);
+      setDragOffset(0);
+      return;
+    }
+    if (gesture.vertical) return;
+    if (absX > 12 && absX > absY) gesture.horizontal = true;
+    if (!gesture.horizontal) return;
+    event.preventDefault();
+    const offset = Math.max(-revealedWidth, Math.min(0, dx));
+    gesture.latestOffset = offset;
+    setDraggingId(gesture.noteId);
+    setOpenSwipeId((current) =>
+      current && current !== gesture.noteId ? null : current,
+    );
+    setDragOffset(offset);
+  }
+
+  function handlePointerEnd() {
+    const gesture = gestureRef.current;
+    if (!gesture) return;
+    if (gesture.ignored || gesture.vertical || isDesktop) {
+      gestureRef.current = null;
+      setDraggingId(null);
+      setDragOffset(0);
+      return;
+    }
+    setOpenSwipeId(gesture.latestOffset <= -48 ? gesture.noteId : null);
+    setDraggingId(null);
+    setDragOffset(0);
+    gestureRef.current = null;
+  }
+
+  function openActions(note: NoteRecord) {
+    setActionsNote(note);
+    closeRowActions();
+  }
+
+  function deleteOrSignIn(note: NoteRecord) {
+    closeRowActions();
+    if (canDeleteNotes && onDeleteNote) {
+      onDeleteNote(note);
+      return;
+    }
+    onOpenLogin?.();
+  }
 
   return (
     <section className="flex min-h-0 flex-1 flex-col rounded-[24px] border border-line bg-surface shadow-[0_20px_60px_-36px_rgba(0,0,0,0.45)] max-md:rounded-none max-md:border-0 max-md:border-t max-md:border-t-line max-md:shadow-none md:h-full md:rounded-none md:border-0 md:bg-transparent md:shadow-none">
-      <div className="flex h-[61px] items-center justify-between border-b border-line px-4 py-3 max-md:h-auto">
-        <div>
-          <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-ink-4">
-            My notes
-          </div>
-          <div className="mt-1 flex items-center gap-2 text-[13px] text-ink-3">
-            <span>
-              {notes.length} {notes.length === 1 ? "note" : "notes"}
-            </span>
-            {revalidating && (
-              <span
-                className="inline-flex items-center gap-1 text-[11px] text-ink-4"
-                role="status"
-                aria-label="Refreshing notes"
-              >
-                <svg
-                  className="h-3 w-3 animate-spin"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  aria-hidden="true"
-                >
-                  <circle
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeOpacity="0.25"
-                    strokeWidth="3"
-                  />
-                  <path
-                    d="M22 12a10 10 0 0 1-10 10"
-                    stroke="currentColor"
-                    strokeWidth="3"
-                    strokeLinecap="round"
-                  />
-                </svg>
-                Refreshing…
+      {isDesktop && (
+        <div className="flex h-[61px] items-center justify-between border-b border-line px-4 py-3">
+          <div>
+            <div className="text-[10px] font-semibold uppercase tracking-[0.12em] text-ink-4">
+              My notes
+            </div>
+            <div className="mt-1 flex items-center gap-2 text-[13px] text-ink-3">
+              <span>
+                {notes.length} {notes.length === 1 ? "note" : "notes"}
               </span>
-            )}
+              {revalidating && (
+                <span
+                  className="inline-flex items-center gap-1 text-[11px] text-ink-4"
+                  role="status"
+                  aria-label="Refreshing notes"
+                >
+                  <svg
+                    className="h-3 w-3 animate-spin"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    aria-hidden="true"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeOpacity="0.25"
+                      strokeWidth="3"
+                    />
+                    <path
+                      d="M22 12a10 10 0 0 1-10 10"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                  Refreshing…
+                </span>
+              )}
+            </div>
           </div>
+          {canCreate && (
+            <button
+              type="button"
+              onClick={onNew}
+              className="rounded-full bg-accent px-3 py-1.5 text-[12px] font-semibold text-bg transition hover:bg-accent-dim"
+            >
+              {newButtonLabel}
+            </button>
+          )}
         </div>
-        {canCreate && (
-          <button
-            type="button"
-            onClick={onNew}
-            className="rounded-full bg-accent px-3 py-1.5 text-[12px] font-semibold text-bg transition hover:bg-accent-dim max-md:hidden"
+      )}
+      {!isDesktop && revalidating && (
+        <div className="flex justify-end px-4 pt-3">
+          <span
+            className="inline-flex items-center gap-1 text-[11px] text-ink-4"
+            role="status"
+            aria-label="Refreshing notes"
           >
-            {newButtonLabel}
-          </button>
-        )}
-      </div>
+            <svg
+              className="h-3 w-3 animate-spin"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeOpacity="0.25"
+                strokeWidth="3"
+              />
+              <path
+                d="M22 12a10 10 0 0 1-10 10"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeLinecap="round"
+              />
+            </svg>
+          </span>
+        </div>
+      )}
 
-      <div className="px-3 py-2.5">
+      <div className="px-3 py-2.5 max-md:sticky max-md:top-0 max-md:z-10 max-md:border-b max-md:border-line max-md:bg-surface max-md:pt-4">
         <label className="relative block">
           <span className="sr-only">Search notes</span>
           <svg
@@ -139,16 +281,23 @@ export function NoteList({
             placeholder="Search"
             className="w-full rounded-full border border-line bg-bg px-9 py-2 text-[13px] text-ink outline-none transition focus:border-accent-dim"
           />
-          <span
-            aria-hidden="true"
-            className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 rounded border border-line bg-bg px-1.5 py-px font-mono text-[10px] text-ink-4"
-          >
-            /
-          </span>
+          {isDesktop && (
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 rounded border border-line bg-bg px-1.5 py-px font-mono text-[10px] text-ink-4"
+            >
+              /
+            </span>
+          )}
         </label>
       </div>
 
-      <div className="max-h-[calc(100vh-270px)] min-h-0 flex-1 overflow-y-auto p-3 xl:max-h-none">
+      <div
+        className="max-h-[calc(100vh-270px)] min-h-0 flex-1 overflow-y-auto p-3 max-md:max-h-none xl:max-h-none"
+        onScroll={() => {
+          if (!isDesktop) closeRowActions();
+        }}
+      >
         {loading && notes.length === 0 ? (
           <div
             className="flex flex-1 items-center justify-center py-12"
@@ -185,41 +334,126 @@ export function NoteList({
           <div className="space-y-2">
             {filteredNotes.map((note) => {
               const active = selectedId === note.id;
+              const open = openSwipeId === note.id;
+              const dragging = draggingId === note.id;
+              const translate = dragging
+                ? dragOffset
+                : open
+                  ? -revealedWidth
+                  : 0;
               return (
-                <button
+                <div
                   key={note.id}
-                  type="button"
-                  onClick={() => onSelect(note.id)}
-                  className={`relative block w-full overflow-hidden rounded-lg px-3 py-3 text-left transition ${
-                    active
-                      ? "bg-surface-2"
-                      : "bg-transparent hover:bg-surface-2"
-                  }`}
+                  data-testid={`note-row-${note.id}`}
+                  className="relative overflow-hidden rounded-lg"
+                  onPointerDown={(event) => handlePointerDown(event, note.id)}
+                  onPointerMove={handlePointerMove}
+                  onPointerUp={handlePointerEnd}
+                  onPointerCancel={handlePointerEnd}
+                  onMouseDown={(event) => handlePointerDown(event, note.id)}
+                  onMouseMove={handlePointerMove}
+                  onMouseUp={handlePointerEnd}
                 >
-                  {active && (
-                    <span
-                      aria-hidden="true"
-                      className="absolute inset-y-3 left-0 w-0.5 rounded-r-sm bg-accent"
-                    />
-                  )}
-                  <div className="relative">
-                    <div className="flex items-baseline justify-between gap-3">
-                      <div
-                        className={`min-w-0 truncate text-[13.5px] font-semibold tracking-[-0.005em] text-ink ${
-                          note.title?.trim() ? "" : "italic text-ink-2"
+                  {!isDesktop && (
+                    <div className="absolute inset-y-0 right-0 flex w-[156px] items-stretch justify-end overflow-hidden rounded-lg bg-surface-2">
+                      <button
+                        type="button"
+                        onClick={() => openActions(note)}
+                        className="flex w-[78px] items-center justify-center text-[12px] font-semibold text-ink"
+                      >
+                        More
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => deleteOrSignIn(note)}
+                        className={`flex w-[78px] items-center justify-center text-[12px] font-semibold ${
+                          canDeleteNotes
+                            ? "bg-[color:var(--color-danger)] text-bg"
+                            : "bg-accent text-bg"
                         }`}
                       >
-                        {noteDisplayTitle(note)}
-                      </div>
-                      <div className="shrink-0 text-[10.5px] text-ink-4">
-                        {formatRelativeTime(note.updatedAt)}
-                      </div>
-                    </div>
-                    <div className="mt-1 line-clamp-2 text-[12px] leading-5 text-ink-3">
-                      {notePreview(note.message)}
+                        {canDeleteNotes ? "Delete" : "Sign in"}
+                      </button>
                     </div>
+                  )}
+                  <div
+                    data-testid={`note-row-foreground-${note.id}`}
+                    className={`relative max-md:bg-surface transition-transform ${dragging ? "" : "duration-150 ease-out"}`}
+                    style={
+                      !isDesktop
+                        ? { transform: `translateX(${translate}px)` }
+                        : undefined
+                    }
+                  >
+                    <button
+                      type="button"
+                      aria-label={`Open ${noteDisplayTitle(note)}`}
+                      onClick={() => {
+                        if (openSwipeId) {
+                          closeRowActions();
+                          return;
+                        }
+                        onSelect(note.id);
+                      }}
+                      className={`relative block w-full overflow-hidden rounded-lg px-3 py-3 text-left transition max-md:pr-12 ${
+                        active
+                          ? "bg-surface-2"
+                          : "bg-transparent hover:bg-surface-2"
+                      }`}
+                    >
+                      {active && (
+                        <span
+                          aria-hidden="true"
+                          className="absolute inset-y-3 left-0 w-0.5 rounded-r-sm bg-accent"
+                        />
+                      )}
+                      <div className="relative">
+                        <div className="flex items-baseline justify-between gap-3">
+                          <div
+                            className={`min-w-0 truncate text-[13.5px] font-semibold tracking-[-0.005em] text-ink ${
+                              note.title?.trim() ? "" : "italic text-ink-2"
+                            }`}
+                          >
+                            {noteDisplayTitle(note)}
+                          </div>
+                          <div className="shrink-0 text-[10.5px] text-ink-4">
+                            {formatRelativeTime(note.updatedAt)}
+                          </div>
+                        </div>
+                        <div className="mt-1 line-clamp-2 text-[12px] leading-5 text-ink-3">
+                          {notePreview(note.message)}
+                        </div>
+                      </div>
+                    </button>
+                    {!isDesktop && (
+                      <button
+                        type="button"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          openActions(note);
+                        }}
+                        aria-label={`Actions for ${noteDisplayTitle(note)}`}
+                        className="absolute right-1.5 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full text-ink-4 hover:bg-surface-2 hover:text-ink"
+                      >
+                        <svg
+                          width="18"
+                          height="18"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2.25"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          aria-hidden="true"
+                        >
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="19" cy="12" r="1" />
+                          <circle cx="5" cy="12" r="1" />
+                        </svg>
+                      </button>
+                    )}
                   </div>
-                </button>
+                </div>
               );
             })}
           </div>
@@ -249,6 +483,133 @@ export function NoteList({
           </svg>
         </button>
       )}
+      <MobileActionSheet
+        open={Boolean(actionsNote)}
+        title="Note actions"
+        onClose={() => setActionsNote(null)}
+      >
+        {actionsNote && (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                const noteId = actionsNote.id;
+                setActionsNote(null);
+                onSelect(noteId);
+              }}
+              className="flex min-h-12 w-full items-center rounded-xl px-4 py-3 text-left text-[15px] font-medium text-ink hover:bg-surface-2"
+            >
+              Open
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setInfoNote(actionsNote);
+                setActionsNote(null);
+              }}
+              className="flex min-h-12 w-full items-center rounded-xl px-4 py-3 text-left text-[15px] font-medium text-ink hover:bg-surface-2"
+            >
+              Info
+            </button>
+            {canDeleteNotes ? (
+              <button
+                type="button"
+                onClick={() => {
+                  const note = actionsNote;
+                  setActionsNote(null);
+                  onDeleteNote?.(note);
+                }}
+                className="flex min-h-12 w-full items-center rounded-xl px-4 py-3 text-left text-[15px] font-semibold text-[color:var(--color-danger)] hover:bg-surface-2"
+              >
+                Delete
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => {
+                  setActionsNote(null);
+                  onOpenLogin?.();
+                }}
+                className="flex min-h-12 w-full items-center rounded-xl px-4 py-3 text-left text-[15px] font-semibold text-accent hover:bg-surface-2"
+              >
+                {isReadOnly ? "Sign in to edit" : "Sign in"}
+              </button>
+            )}
+          </>
+        )}
+      </MobileActionSheet>
+      <MobileActionSheet
+        open={Boolean(infoNote)}
+        title="Note info"
+        onClose={() => setInfoNote(null)}
+      >
+        {infoNote && (
+          <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 px-1 py-2 text-[13px]">
+            <dt className="text-ink-4">Revision</dt>
+            <dd className="text-right font-mono text-ink">
+              {infoNote.revision}
+            </dd>
+            <dt className="text-ink-4">Created</dt>
+            <dd className="text-right text-ink">
+              {formatTimestamp(infoNote.createdAt)}
+            </dd>
+            <dt className="text-ink-4">Updated</dt>
+            <dd className="text-right text-ink">
+              {formatTimestamp(infoNote.updatedAt)}
+            </dd>
+          </dl>
+        )}
+      </MobileActionSheet>
     </section>
   );
 }
+
+function MobileActionSheet({
+  open,
+  title,
+  children,
+  onClose,
+}: {
+  open: boolean;
+  title: string;
+  children: ReactNode;
+  onClose: () => void;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end bg-black/40 px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:hidden"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        className="w-full rounded-2xl border border-line bg-surface p-2 shadow-[0_22px_60px_-24px_rgba(0,0,0,0.65)]"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="px-4 pb-1 pt-3 text-[12px] font-semibold uppercase tracking-[0.12em] text-ink-4">
+          {title}
+        </div>
+        <div className="py-1">{children}</div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="mt-1 flex min-h-12 w-full items-center justify-center rounded-xl bg-surface-2 px-4 py-3 text-[15px] font-semibold text-ink"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/example-apps/dashnote/src/components/NotesWorkspace.tsx b/example-apps/dashnote/src/components/NotesWorkspace.tsx
index 67d7eb27..bcc250f5 100644
--- a/example-apps/dashnote/src/components/NotesWorkspace.tsx
+++ b/example-apps/dashnote/src/components/NotesWorkspace.tsx
@@ -31,6 +31,7 @@ const STALE_EDIT_WARNING =
   "This note changed on the network. Your unsaved edits are still here — saving will overwrite the newer version.";
 
 type SelectedNoteId = string | "new" | null;
+type DeleteTarget = { id: string; title: string };
 
 // Wrap the session logger so `info` rows from src/dash/* helpers (which only
 // pass a string) pick up the activity-panel `detail` for the operation. The
@@ -83,6 +84,7 @@ export function NotesWorkspace({
   const [saving, setSaving] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [deleteRequested, setDeleteRequested] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<DeleteTarget | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [revalidating, setRevalidating] = useState(false);
   const [editsReady, setEditsReady] = useState(false);
@@ -577,12 +579,21 @@ export function NotesWorkspace({
       resetDraft();
       return;
     }
+    setDeleteTarget({ id: selectedId, title });
+    setDeleteRequested(true);
+  }
+
+  function requestDeleteNote(note: NoteRecord) {
+    if (!sdk || !keyManager || !contractId || !isAuthed) return;
+    setDeleteTarget({ id: note.id, title: note.title ?? "" });
     setDeleteRequested(true);
   }
 
   async function confirmDelete() {
-    if (!sdk || !keyManager || !contractId || !isAuthed || !selectedId) return;
-    if (selectedId === "new") return;
+    if (!sdk || !keyManager || !contractId || !isAuthed || !deleteTarget) {
+      return;
+    }
+    const noteId = deleteTarget.id;
 
     setDeleting(true);
     setError(null);
@@ -592,14 +603,25 @@ export function NotesWorkspace({
         sdk,
         keyManager,
         contractId,
-        noteId: selectedId,
+        noteId,
         log: withDetail(log, "documents.delete"),
       });
       log("Note deleted.", {
         level: "success",
-        detail: `id ${selectedId.slice(0, 8)}…`,
+        detail: `id ${noteId.slice(0, 8)}…`,
       });
       setDeleteRequested(false);
+      setDeleteTarget(null);
+      if (selectedIdRef.current === noteId) {
+        setSelectedId(null);
+        setSelectedNote(null);
+        setTitle("");
+        setMessage("");
+        setBaselineTitle("");
+        setBaselineMessage("");
+        setError(null);
+        setConflictWarning(null);
+      }
       await reloadNotes();
     } catch (err) {
       setError(errorMessage(err));
@@ -651,6 +673,11 @@ export function NotesWorkspace({
               onNew={handleNew}
               canCreate={canMutate || isBrowsing}
               newButtonLabel={canMutate ? "New note" : "Sign in to create"}
+              isDesktop={isDesktop}
+              canDeleteNotes={canMutate}
+              isReadOnly={isBrowsing}
+              onDeleteNote={requestDeleteNote}
+              onOpenLogin={onOpenLogin}
             />
           </div>
           <div
@@ -690,9 +717,12 @@ export function NotesWorkspace({
       )}
       <DeleteNoteModal
         open={deleteRequested}
-        noteTitle={title}
+        noteTitle={deleteTarget?.title ?? title}
         deleting={deleting}
-        onCancel={() => setDeleteRequested(false)}
+        onCancel={() => {
+          setDeleteRequested(false);
+          setDeleteTarget(null);
+        }}
         onConfirm={() => void confirmDelete()}
       />
     </div>
diff --git a/example-apps/dashnote/src/styles/globals.css b/example-apps/dashnote/src/styles/globals.css
index 810ff3f4..5527619b 100644
--- a/example-apps/dashnote/src/styles/globals.css
+++ b/example-apps/dashnote/src/styles/globals.css
@@ -92,3 +92,11 @@ code {
   outline: 2px solid var(--color-accent-dim);
   outline-offset: 2px;
 }
+
+@media (max-width: 767px) {
+  .mobile-note-editor-field:focus,
+  .mobile-note-editor-field:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+}
diff --git a/example-apps/dashnote/test/App.test.tsx b/example-apps/dashnote/test/App.test.tsx
index e9b2d2b4..0dcd0b36 100644
--- a/example-apps/dashnote/test/App.test.tsx
+++ b/example-apps/dashnote/test/App.test.tsx
@@ -37,15 +37,22 @@ vi.mock("../src/components/AppShell", () => ({
     children,
     onLoginOpen,
     onTabChange,
+    onOpenActivity,
   }: {
     children: ReactNode;
     onLoginOpen: () => void;
     onTabChange: (tab: "notes" | "how-it-works" | "settings") => void;
+    onOpenActivity?: () => void;
   }) => (
     <div>
       <button type="button" onClick={onLoginOpen}>
         Open settings
       </button>
+      {onOpenActivity && (
+        <button type="button" onClick={onOpenActivity}>
+          Open shell activity
+        </button>
+      )}
       <button type="button" onClick={() => onTabChange("how-it-works")}>
         How it works tab
       </button>
@@ -183,6 +190,18 @@ describe("App", () => {
     expect(screen.getByText("activity:true")).toBeTruthy();
   });
 
+  it("opens the activity panel from the shell activity action", () => {
+    mockUseSession.mockReturnValue(makeSession({ status: "readonly" }));
+
+    render(<App />);
+    expect(screen.getByText("activity:false")).toBeTruthy();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /open shell activity/i }),
+    );
+    expect(screen.getByText("activity:true")).toBeTruthy();
+  });
+
   it("renders SettingsPanel when the settings tab is selected", () => {
     mockUseSession.mockReturnValue(
       makeSession({
diff --git a/example-apps/dashnote/test/LoginModal.test.tsx b/example-apps/dashnote/test/LoginModal.test.tsx
index 6faf75c2..62417c4c 100644
--- a/example-apps/dashnote/test/LoginModal.test.tsx
+++ b/example-apps/dashnote/test/LoginModal.test.tsx
@@ -150,6 +150,16 @@ describe("LoginModal", () => {
     expect(button.disabled).toBe(true);
   });
 
+  it("presents primary Sign in and secondary Dash Bridge CTAs", () => {
+    mockUseSession.mockReturnValue(makeSession());
+
+    render(<LoginModal open onClose={vi.fn()} />);
+
+    expect(screen.getByRole("button", { name: /^sign in$/i })).toBeTruthy();
+    const bridge = screen.getByRole("link", { name: /dash bridge/i });
+    expect(bridge.getAttribute("href")).toBe("https://bridge.thepasta.org/");
+  });
+
   it("keeps the login button disabled for a whitespace-only secret", () => {
     mockUseSession.mockReturnValue(makeSession());
 
diff --git a/example-apps/dashnote/test/NoteEditor.test.tsx b/example-apps/dashnote/test/NoteEditor.test.tsx
index 2f2b1506..353601b4 100644
--- a/example-apps/dashnote/test/NoteEditor.test.tsx
+++ b/example-apps/dashnote/test/NoteEditor.test.tsx
@@ -1,6 +1,12 @@
 // @vitest-environment jsdom
 
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { NoteEditor } from "../src/components/NoteEditor";
@@ -14,7 +20,7 @@ function makeNote(overrides: Partial<NoteRecord> = {}): NoteRecord {
     ownerId: "identity-1",
     title: "Meeting agenda",
     message: "Read this in browsing mode.",
-    createdAt: NOW - 60_000,
+    createdAt: NOW - 120_000,
     updatedAt: NOW - 60_000,
     revision: 1,
     ...overrides,
@@ -40,7 +46,7 @@ function renderEditor(overrides: EditorOverrides = {}) {
     canEdit: false,
     canDelete: false,
     dirty: false,
-    messageBytes: 0,
+    messageBytes: 27,
     messageOversize: false,
     contractReady: true,
     contractId: "contract-1",
@@ -59,68 +65,140 @@ afterEach(() => {
   cleanup();
 });
 
-describe("NoteEditor read-only sign-in surface", () => {
-  it("renders a click-to-sign-in overlay over the editor body when read-only", () => {
-    const onOpenLogin = vi.fn();
-    renderEditor({ isReadOnly: true, onOpenLogin });
+describe("NoteEditor mobile refresh", () => {
+  it("shows mobile Back with no Save for a clean existing note", () => {
+    renderEditor({ isDesktop: false, canEdit: true, dirty: false });
 
-    const overlay = screen.getByRole("button", {
-      name: /sign in to edit this note/i,
+    expect(screen.getByRole("button", { name: /back to notes/i })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /^save$/i })).toBeNull();
+  });
+
+  it("shows and enables mobile Save only when dirty", () => {
+    const onSave = vi.fn();
+    renderEditor({
+      isDesktop: false,
+      canEdit: true,
+      dirty: true,
+      onSave,
     });
-    fireEvent.click(overlay);
-    expect(onOpenLogin).toHaveBeenCalledTimes(1);
+
+    const save = screen.getByRole("button", { name: /^save$/i });
+    expect((save as HTMLButtonElement).disabled).toBe(false);
+    fireEvent.click(save);
+    expect(onSave).toHaveBeenCalledTimes(1);
   });
 
-  it("does not render the click-to-sign-in overlay in edit mode", () => {
-    renderEditor({ isReadOnly: false, canEdit: true });
+  it("shows Saving and disables mobile Save while saving", () => {
+    renderEditor({
+      isDesktop: false,
+      canEdit: true,
+      dirty: true,
+      saving: true,
+    });
+
+    const save = screen.getByRole("button", { name: /saving/i });
+    expect((save as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("disables mobile Save when the body is oversize", () => {
+    renderEditor({
+      isDesktop: false,
+      canEdit: true,
+      dirty: true,
+      messageOversize: true,
+    });
+
+    const save = screen.getByRole("button", { name: /^save$/i });
+    expect((save as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("keeps the mobile body borderless when focused", () => {
+    renderEditor({ isDesktop: false, canEdit: true, dirty: true });
+
+    const body = screen.getByLabelText(/body/i) as HTMLTextAreaElement;
+    body.focus();
+
+    expect(body.className).toMatch(/\bmobile-note-editor-field\b/);
+    expect(body.className).toMatch(/\bborder-0\b/);
+    expect(body.className).toMatch(/\boutline-none\b/);
+    expect(body.className).not.toMatch(/\bring\b/);
+  });
+
+  it("does not render the per-note public-chain notice on mobile", () => {
+    renderEditor({ isDesktop: false, canEdit: true });
 
     expect(
-      screen.queryByRole("button", { name: /sign in to edit this note/i }),
+      screen.queryByText(/notes are stored publicly on dash platform/i),
     ).toBeNull();
   });
 
-  it("no longer renders the old 'Sign in to edit' toolbar button when read-only", () => {
-    renderEditor({ isReadOnly: true });
+  it("keeps desktop metadata footer behavior", () => {
+    renderEditor({ isDesktop: true, canEdit: true });
+
+    expect(screen.getByText("$createdAt")).toBeTruthy();
+    expect(screen.getByText("$updatedAt")).toBeTruthy();
+    expect(screen.getByRole("button", { name: /^save$/i })).toBeTruthy();
+  });
+
+  it("moves mobile delete into the note actions sheet", () => {
+    const onDelete = vi.fn();
+    renderEditor({
+      isDesktop: false,
+      canEdit: true,
+      canDelete: true,
+      onDelete,
+    });
+
+    expect(screen.queryByRole("button", { name: /delete note/i })).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /note actions/i }));
+    const sheet = screen.getByRole("dialog", { name: /note actions/i });
+    fireEvent.click(within(sheet).getByRole("button", { name: /^delete$/i }));
+
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides mobile Delete when canDelete is false", () => {
+    renderEditor({ isDesktop: false, canDelete: false });
+
+    fireEvent.click(screen.getByRole("button", { name: /note actions/i }));
+    const sheet = screen.getByRole("dialog", { name: /note actions/i });
 
-    // The old button name was "Sign in to edit"; the overlay's aria-label is
-    // "Sign in to edit this note". Anchor the regex to avoid a substring match.
     expect(
-      screen.queryByRole("button", { name: /^sign in to edit$/i }),
+      within(sheet).queryByRole("button", { name: /^delete$/i }),
     ).toBeNull();
   });
 
-  it("does not render the Save button when read-only", () => {
-    renderEditor({ isReadOnly: true });
+  it("shows mobile note metadata from the Info action", () => {
+    renderEditor({ isDesktop: false, note: makeNote({ revision: 4 }) });
 
-    expect(screen.queryByRole("button", { name: /^save$/i })).toBeNull();
-  });
+    fireEvent.click(screen.getByRole("button", { name: /note actions/i }));
+    fireEvent.click(screen.getByRole("button", { name: /^info$/i }));
 
-  it("positions the read-only overlay above the inputs (last sibling, absolute, z-10)", () => {
-    renderEditor({ isReadOnly: true });
+    const dialog = screen.getByRole("dialog", { name: /note info/i });
+    expect(within(dialog).getByText(/revision/i)).toBeTruthy();
+    expect(within(dialog).getByText("4")).toBeTruthy();
+    expect(within(dialog).getByText(/created/i)).toBeTruthy();
+    expect(within(dialog).getByText(/updated/i)).toBeTruthy();
+    expect(within(dialog).getByText(/5,120 B/i)).toBeTruthy();
+  });
 
-    const overlay = screen.getByRole("button", {
-      name: /sign in to edit this note/i,
+  it("uses a visible mobile read-only Sign in CTA instead of an invisible overlay", () => {
+    const onOpenLogin = vi.fn();
+    renderEditor({
+      isDesktop: false,
+      isReadOnly: true,
+      onOpenLogin,
     });
 
-    // Paint order: in a position:relative parent with two stacking-context
-    // peers at the same z-index, the later sibling wins. The overlay must be
-    // the last child of the label so clicks on the input region hit it.
-    const parent = overlay.parentElement;
-    expect(parent).not.toBeNull();
-    expect(parent?.lastElementChild).toBe(overlay);
-
-    // jsdom doesn't run layout, so we can't simulate hit-testing — verify the
-    // classes that drive stacking instead. Regressing any of these (z-index,
-    // absolute positioning, or inset) would break click capture in a browser.
-    expect(overlay.className).toMatch(/\babsolute\b/);
-    expect(overlay.className).toMatch(/\binset-0\b/);
-    expect(overlay.className).toMatch(/\bz-10\b/);
-
-    // And the disabled-input fallback: even if the overlay regresses, the
-    // underlying fields stay non-editable so clicks can't mutate state.
-    const titleInput = screen.getByLabelText(/title/i) as HTMLInputElement;
-    const bodyInput = screen.getByLabelText(/body/i) as HTMLTextAreaElement;
-    expect(titleInput.disabled).toBe(true);
-    expect(bodyInput.disabled).toBe(true);
+    const cta = screen.getByRole("button", { name: /^sign in to edit$/i });
+    expect(cta.className).not.toMatch(/\babsolute\b/);
+    expect(cta.className).not.toMatch(/\binset-0\b/);
+
+    fireEvent.click(cta);
+    expect(onOpenLogin).toHaveBeenCalledTimes(1);
+    expect(
+      screen.queryByRole("button", { name: /sign in to edit this note/i }),
+    ).toBeNull();
   });
 });
diff --git a/example-apps/dashnote/test/NoteList.test.tsx b/example-apps/dashnote/test/NoteList.test.tsx
index c928425b..abef7e57 100644
--- a/example-apps/dashnote/test/NoteList.test.tsx
+++ b/example-apps/dashnote/test/NoteList.test.tsx
@@ -1,6 +1,12 @@
 // @vitest-environment jsdom
 
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { NoteList } from "../src/components/NoteList";
@@ -14,41 +20,52 @@ function makeNote(overrides: Partial<NoteRecord> = {}): NoteRecord {
     ownerId: "identity-1",
     title: "Meeting agenda",
     message: "Draft notes for the kickoff meeting.",
-    createdAt: NOW - 60_000,
+    createdAt: NOW - 120_000,
     updatedAt: NOW - 60_000,
     revision: 1,
     ...overrides,
   };
 }
 
-function renderList(notes: NoteRecord[]) {
-  return render(
-    <NoteList
-      notes={notes}
-      loading={false}
-      selectedId={null}
-      onSelect={vi.fn()}
-      onNew={vi.fn()}
-      canCreate
-    />,
-  );
+function renderList(
+  notes: NoteRecord[],
+  overrides: Partial<React.ComponentProps<typeof NoteList>> = {},
+) {
+  const props: React.ComponentProps<typeof NoteList> = {
+    notes,
+    loading: false,
+    selectedId: null,
+    onSelect: vi.fn(),
+    onNew: vi.fn(),
+    canCreate: true,
+    isDesktop: true,
+    ...overrides,
+  };
+  return { props, ...render(<NoteList {...props} />) };
 }
 
 afterEach(() => {
   cleanup();
 });
 
-describe("NoteList P6 row layout", () => {
-  it("renders a single relative timestamp on the right (no second mono timestamp line)", () => {
+describe("NoteList desktop behavior", () => {
+  it("keeps the desktop header, count, create button, and shortcut hint", () => {
+    renderList([makeNote()]);
+
+    expect(screen.getByText(/my notes/i)).toBeTruthy();
+    expect(screen.getByText(/1 note/i)).toBeTruthy();
+    expect(screen.getByRole("button", { name: /new note/i })).toBeTruthy();
+    expect(screen.getByText("/")).toBeTruthy();
+  });
+
+  it("renders a single relative timestamp on the right", () => {
     renderList([makeNote()]);
 
     expect(screen.getByText(/ago|just now/i)).toBeTruthy();
-    // The old layout had a second timestamp line like "5/14/2026, 11:00 AM" —
-    // a numeric date pattern with slashes. Guard against it returning.
     expect(screen.queryByText(/\d+\/\d+\/\d+/)).toBeNull();
   });
 
-  it("italicizes the title when the note has no title (uses the fallback)", () => {
+  it("italicizes the title when the note has no title", () => {
     renderList([
       makeNote({
         id: "no-title",
@@ -62,8 +79,6 @@ describe("NoteList P6 row layout", () => {
       }),
     ]);
 
-    // The title is the .truncate element inside each row button; matching by
-    // text alone is ambiguous because the body preview repeats the fallback.
     const fallbackTitle = screen
       .getAllByText("Body of an untitled note")
       .find((el) => el.className.includes("truncate"));
@@ -96,8 +111,177 @@ describe("NoteList P6 row layout", () => {
     });
     search.dispatchEvent(event);
 
-    // Listener must bail when the event originates in a text field, so the
-    // default behavior (the "/" character reaching the input) is preserved.
     expect(event.defaultPrevented).toBe(false);
   });
 });
+
+describe("NoteList mobile refresh", () => {
+  it("uses a compact mobile header with no count row or shortcut hint", () => {
+    renderList([makeNote()], { isDesktop: false });
+
+    expect(screen.queryByRole("heading", { name: /^notes$/i })).toBeNull();
+    expect(screen.queryByText(/my notes/i)).toBeNull();
+    expect(screen.queryByText(/1 note/i)).toBeNull();
+    expect(screen.queryByText("/")).toBeNull();
+    expect(screen.getByPlaceholderText(/search/i)).toBeTruthy();
+  });
+
+  it("pins the mobile search row above the scrolling list", () => {
+    renderList([makeNote()], { isDesktop: false });
+
+    const searchRow = screen.getByPlaceholderText(/search/i).closest("div");
+
+    expect(searchRow?.className).toMatch(/max-md:sticky/);
+    expect(searchRow?.className).toMatch(/max-md:top-0/);
+    expect(searchRow?.className).toMatch(/max-md:z-10/);
+  });
+
+  it("opens a note when the mobile row is tapped", () => {
+    const onSelect = vi.fn();
+    renderList([makeNote()], { isDesktop: false, onSelect });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /open meeting agenda/i }),
+    );
+
+    expect(onSelect).toHaveBeenCalledWith("note-a");
+  });
+
+  it("opens the row action sheet from the ellipsis without selecting the note", () => {
+    const onSelect = vi.fn();
+    renderList([makeNote()], { isDesktop: false, onSelect });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /actions for meeting agenda/i }),
+    );
+
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(screen.getByRole("dialog", { name: /note actions/i })).toBeTruthy();
+  });
+
+  it("shows Open, Info, and Delete for authenticated mobile row actions", () => {
+    renderList([makeNote()], {
+      isDesktop: false,
+      canDeleteNotes: true,
+      onDeleteNote: vi.fn(),
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /actions for meeting agenda/i }),
+    );
+    const sheet = screen.getByRole("dialog", { name: /note actions/i });
+
+    expect(within(sheet).getByRole("button", { name: /^open$/i })).toBeTruthy();
+    expect(within(sheet).getByRole("button", { name: /^info$/i })).toBeTruthy();
+    expect(
+      within(sheet).getByRole("button", { name: /^delete$/i }),
+    ).toBeTruthy();
+  });
+
+  it("shows Open, Info, and Sign in for read-only mobile row actions", () => {
+    renderList([makeNote()], {
+      isDesktop: false,
+      canDeleteNotes: false,
+      isReadOnly: true,
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /actions for meeting agenda/i }),
+    );
+    const sheet = screen.getByRole("dialog", { name: /note actions/i });
+
+    expect(within(sheet).getByRole("button", { name: /^open$/i })).toBeTruthy();
+    expect(within(sheet).getByRole("button", { name: /^info$/i })).toBeTruthy();
+    expect(
+      within(sheet).getByRole("button", { name: /sign in to edit/i }),
+    ).toBeTruthy();
+  });
+
+  it("delete row action requests confirmation flow but does not select the note", () => {
+    const onSelect = vi.fn();
+    const onDeleteNote = vi.fn();
+    const note = makeNote();
+    renderList([note], {
+      isDesktop: false,
+      onSelect,
+      canDeleteNotes: true,
+      onDeleteNote,
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /actions for meeting agenda/i }),
+    );
+    const sheet = screen.getByRole("dialog", { name: /note actions/i });
+    fireEvent.click(within(sheet).getByRole("button", { name: /^delete$/i }));
+
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(onDeleteNote).toHaveBeenCalledWith(note);
+  });
+
+  it("swipe-left reveals mobile row actions after the horizontal threshold", () => {
+    renderList([makeNote()], { isDesktop: false });
+
+    const row = screen.getByTestId("note-row-note-a");
+    const foreground = screen.getByTestId("note-row-foreground-note-a");
+    fireEvent.mouseDown(row, { button: 0, clientX: 220, clientY: 20 });
+    fireEvent.mouseMove(row, { clientX: 140, clientY: 22 });
+    fireEvent.mouseUp(row);
+
+    expect(foreground.getAttribute("style")).toContain("translateX(-156px)");
+  });
+
+  it("vertical movement cancels mobile row swipe reveal", () => {
+    renderList([makeNote()], { isDesktop: false });
+
+    const row = screen.getByTestId("note-row-note-a");
+    const foreground = screen.getByTestId("note-row-foreground-note-a");
+    fireEvent.mouseDown(row, { button: 0, clientX: 220, clientY: 20 });
+    fireEvent.mouseMove(row, { clientX: 216, clientY: 60 });
+    fireEvent.mouseUp(row);
+
+    expect(foreground.getAttribute("style")).toContain("translateX(0px)");
+  });
+
+  it("ignores edge-start mobile swipe gestures", () => {
+    renderList([makeNote()], { isDesktop: false });
+
+    const row = screen.getByTestId("note-row-note-a");
+    const foreground = screen.getByTestId("note-row-foreground-note-a");
+    fireEvent.mouseDown(row, { button: 0, clientX: 12, clientY: 20 });
+    fireEvent.mouseMove(row, { clientX: 0, clientY: 20 });
+    fireEvent.mouseUp(row);
+
+    expect(foreground.getAttribute("style")).toContain("translateX(0px)");
+  });
+
+  it("opening one swiped row closes the previous row", () => {
+    renderList(
+      [
+        makeNote({ id: "note-a", title: "First" }),
+        makeNote({ id: "note-b", title: "Second" }),
+      ],
+      { isDesktop: false },
+    );
+
+    const first = screen.getByTestId("note-row-note-a");
+    const firstForeground = screen.getByTestId("note-row-foreground-note-a");
+    const second = screen.getByTestId("note-row-note-b");
+    const secondForeground = screen.getByTestId("note-row-foreground-note-b");
+
+    fireEvent.mouseDown(first, { button: 0, clientX: 220, clientY: 20 });
+    fireEvent.mouseMove(first, { clientX: 140, clientY: 22 });
+    fireEvent.mouseUp(first);
+    expect(firstForeground.getAttribute("style")).toContain(
+      "translateX(-156px)",
+    );
+
+    fireEvent.mouseDown(second, { button: 0, clientX: 220, clientY: 20 });
+    fireEvent.mouseMove(second, { clientX: 140, clientY: 22 });
+    fireEvent.mouseUp(second);
+
+    expect(firstForeground.getAttribute("style")).toContain("translateX(0px)");
+    expect(secondForeground.getAttribute("style")).toContain(
+      "translateX(-156px)",
+    );
+  });
+});
diff --git a/example-apps/dashnote/test/NotesWorkspace.test.tsx b/example-apps/dashnote/test/NotesWorkspace.test.tsx
index 65ae3226..a4624a19 100644
--- a/example-apps/dashnote/test/NotesWorkspace.test.tsx
+++ b/example-apps/dashnote/test/NotesWorkspace.test.tsx
@@ -670,7 +670,7 @@ describe("NotesWorkspace", () => {
       });
 
       fireEvent.click(screen.getByRole("button", { name: /compose note/i }));
-      expect(screen.getByRole("button", { name: /create note/i })).toBeTruthy();
+      expect(screen.queryByRole("button", { name: /create note/i })).toBeNull();
       expect(
         (screen.getByLabelText(/^title$/i) as HTMLInputElement).value,
       ).toBe("");
@@ -698,7 +698,7 @@ describe("NotesWorkspace", () => {
       fireEvent.click(screen.getByRole("button", { name: /back to notes/i }));
       // Editor body should no longer be rendered; list header stays.
       expect(screen.queryByLabelText(/^body$/i)).toBeNull();
-      expect(screen.getByText(/my notes/i)).toBeTruthy();
+      expect(screen.getByPlaceholderText(/search/i)).toBeTruthy();
     });
 
     it("blocks back navigation when discard is declined", async () => {
@@ -725,7 +725,7 @@ describe("NotesWorkspace", () => {
       ).toBe("Edited offline");
     });
 
-    it("deletes a note via the bottom 'Delete note' button after confirming the modal", async () => {
+    it("deletes a note via mobile note actions after confirming the modal", async () => {
       mockUseSession.mockReturnValue(makeSession());
       mockListMyNotes.mockResolvedValue([noteFixture]);
       mockGetNote.mockResolvedValue(noteFixture);
@@ -741,12 +741,47 @@ describe("NotesWorkspace", () => {
         expect(screen.getByLabelText(/^body$/i)).toBeTruthy();
       });
 
-      fireEvent.click(screen.getByRole("button", { name: /delete note/i }));
+      fireEvent.click(screen.getByRole("button", { name: /note actions/i }));
+      const sheet = screen.getByRole("dialog", { name: /note actions/i });
+      fireEvent.click(within(sheet).getByRole("button", { name: /^delete$/i }));
 
       // Trigger doesn't fire the delete directly anymore — the
       // confirmation modal must be acknowledged first.
       expect(mockDeleteNote).not.toHaveBeenCalled();
-      const dialog = screen.getByRole("dialog");
+      const dialog = screen.getByRole("dialog", { name: /delete note/i });
+      fireEvent.click(
+        within(dialog).getByRole("button", { name: /^delete$/i }),
+      );
+
+      await waitFor(() => {
+        expect(mockDeleteNote).toHaveBeenCalledWith(
+          expect.objectContaining({ noteId: "note-mobile" }),
+        );
+      });
+    });
+
+    it("opens the delete modal from list actions without opening the note", async () => {
+      mockUseSession.mockReturnValue(makeSession());
+      mockListMyNotes.mockResolvedValue([noteFixture]);
+      mockGetNote.mockResolvedValue(noteFixture);
+      mockDeleteNote.mockResolvedValue(undefined);
+
+      render(<NotesWorkspace onOpenLogin={vi.fn()} onOpenSettings={vi.fn()} />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/phone note/i)).toBeTruthy();
+      });
+
+      fireEvent.click(
+        screen.getByRole("button", { name: /actions for phone note/i }),
+      );
+      const sheet = screen.getByRole("dialog", { name: /note actions/i });
+      fireEvent.click(within(sheet).getByRole("button", { name: /^delete$/i }));
+
+      expect(screen.queryByLabelText(/^body$/i)).toBeNull();
+      expect(mockGetNote).not.toHaveBeenCalled();
+
+      const dialog = screen.getByRole("dialog", { name: /delete note/i });
       fireEvent.click(
         within(dialog).getByRole("button", { name: /^delete$/i }),
       );

From efd3cad63accfee5ba6e05ff30ef47e8a983c79b Mon Sep 17 00:00:00 2001
From: thephez <thephez@users.noreply.github.com>
Date: Sun, 24 May 2026 20:38:52 -0400
Subject: [PATCH 2/4] feat(dashnote): refine mobile editor status and sticky
 search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show "Edited" / "Updated …" status in the mobile editor header and
pin the note list search row below the workspace header with a
translucent backdrop.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../dashnote/src/components/NoteEditor.tsx       | 16 +++++++++++++++-
 .../dashnote/src/components/NoteList.tsx         |  8 ++++----
 example-apps/dashnote/test/NoteEditor.test.tsx   |  2 ++
 example-apps/dashnote/test/NoteList.test.tsx     | 13 ++++++++++---
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/example-apps/dashnote/src/components/NoteEditor.tsx b/example-apps/dashnote/src/components/NoteEditor.tsx
index 091bd63e..40b36469 100644
--- a/example-apps/dashnote/src/components/NoteEditor.tsx
+++ b/example-apps/dashnote/src/components/NoteEditor.tsx
@@ -69,6 +69,14 @@ export function NoteEditor({
   const [mobileInfoOpen, setMobileInfoOpen] = useState(false);
   const showMobileSave =
     !isDesktop && !isReadOnly && hasSelection && (dirty || saving);
+  const mobileHeaderStatus =
+    !isDesktop && hasSelection
+      ? dirty
+        ? "Edited"
+        : note && !isNew
+          ? `Updated ${formatRelativeTime(note.updatedAt)}`
+          : null
+      : null;
 
   // Cmd/Ctrl-S triggers Save (matches the keyboard hint chip).
   useEffect(() => {
@@ -164,7 +172,13 @@ export function NoteEditor({
             ) : null}
           </div>
         )}
-        <div className="flex-1 md:hidden" />
+        <div className="min-w-0 flex-1 text-center md:hidden">
+          {mobileHeaderStatus && (
+            <span className="block truncate text-[12px] font-medium text-ink-4">
+              {mobileHeaderStatus}
+            </span>
+          )}
+        </div>
 
         <div className="flex shrink-0 items-center gap-2">
           {isDesktop && note && (
diff --git a/example-apps/dashnote/src/components/NoteList.tsx b/example-apps/dashnote/src/components/NoteList.tsx
index 485e7bee..a634caac 100644
--- a/example-apps/dashnote/src/components/NoteList.tsx
+++ b/example-apps/dashnote/src/components/NoteList.tsx
@@ -169,7 +169,7 @@ export function NoteList({
   }
 
   return (
-    <section className="flex min-h-0 flex-1 flex-col rounded-[24px] border border-line bg-surface shadow-[0_20px_60px_-36px_rgba(0,0,0,0.45)] max-md:rounded-none max-md:border-0 max-md:border-t max-md:border-t-line max-md:shadow-none md:h-full md:rounded-none md:border-0 md:bg-transparent md:shadow-none">
+    <section className="flex min-h-0 flex-1 flex-col rounded-[24px] border border-line bg-surface shadow-[0_20px_60px_-36px_rgba(0,0,0,0.45)] max-md:rounded-none max-md:border-0 max-md:shadow-none md:h-full md:rounded-none md:border-0 md:bg-transparent md:shadow-none">
       {isDesktop && (
         <div className="flex h-[61px] items-center justify-between border-b border-line px-4 py-3">
           <div>
@@ -255,7 +255,7 @@ export function NoteList({
         </div>
       )}
 
-      <div className="px-3 py-2.5 max-md:sticky max-md:top-0 max-md:z-10 max-md:border-b max-md:border-line max-md:bg-surface max-md:pt-4">
+      <div className="px-3 py-2.5 max-md:sticky max-md:top-[53px] max-md:z-20 max-md:border-b max-md:border-[color:color-mix(in_oklab,var(--color-line)_58%,transparent)] max-md:bg-surface/95 max-md:py-2 max-md:backdrop-blur">
         <label className="relative block">
           <span className="sr-only">Search notes</span>
           <svg
@@ -279,7 +279,7 @@ export function NoteList({
             value={search}
             onChange={(event) => setSearch(event.target.value)}
             placeholder="Search"
-            className="w-full rounded-full border border-line bg-bg px-9 py-2 text-[13px] text-ink outline-none transition focus:border-accent-dim"
+            className="w-full rounded-full border border-line bg-bg px-9 py-2 text-[13px] text-ink outline-none transition focus:border-accent-dim max-md:py-1.5"
           />
           {isDesktop && (
             <span
@@ -293,7 +293,7 @@ export function NoteList({
       </div>
 
       <div
-        className="max-h-[calc(100vh-270px)] min-h-0 flex-1 overflow-y-auto p-3 max-md:max-h-none xl:max-h-none"
+        className="max-h-[calc(100vh-270px)] min-h-0 flex-1 overflow-y-auto p-3 max-md:max-h-none max-md:pt-4 xl:max-h-none"
         onScroll={() => {
           if (!isDesktop) closeRowActions();
         }}
diff --git a/example-apps/dashnote/test/NoteEditor.test.tsx b/example-apps/dashnote/test/NoteEditor.test.tsx
index 353601b4..51df26b3 100644
--- a/example-apps/dashnote/test/NoteEditor.test.tsx
+++ b/example-apps/dashnote/test/NoteEditor.test.tsx
@@ -71,6 +71,7 @@ describe("NoteEditor mobile refresh", () => {
 
     expect(screen.getByRole("button", { name: /back to notes/i })).toBeTruthy();
     expect(screen.queryByRole("button", { name: /^save$/i })).toBeNull();
+    expect(screen.getByText(/updated/i)).toBeTruthy();
   });
 
   it("shows and enables mobile Save only when dirty", () => {
@@ -84,6 +85,7 @@ describe("NoteEditor mobile refresh", () => {
 
     const save = screen.getByRole("button", { name: /^save$/i });
     expect((save as HTMLButtonElement).disabled).toBe(false);
+    expect(screen.getByText(/^edited$/i)).toBeTruthy();
     fireEvent.click(save);
     expect(onSave).toHaveBeenCalledTimes(1);
   });
diff --git a/example-apps/dashnote/test/NoteList.test.tsx b/example-apps/dashnote/test/NoteList.test.tsx
index abef7e57..a81656f1 100644
--- a/example-apps/dashnote/test/NoteList.test.tsx
+++ b/example-apps/dashnote/test/NoteList.test.tsx
@@ -117,13 +117,16 @@ describe("NoteList desktop behavior", () => {
 
 describe("NoteList mobile refresh", () => {
   it("uses a compact mobile header with no count row or shortcut hint", () => {
-    renderList([makeNote()], { isDesktop: false });
+    const { container } = renderList([makeNote()], { isDesktop: false });
 
     expect(screen.queryByRole("heading", { name: /^notes$/i })).toBeNull();
     expect(screen.queryByText(/my notes/i)).toBeNull();
     expect(screen.queryByText(/1 note/i)).toBeNull();
     expect(screen.queryByText("/")).toBeNull();
     expect(screen.getByPlaceholderText(/search/i)).toBeTruthy();
+    expect(container.querySelector("section")?.className).not.toMatch(
+      /max-md:border-t/,
+    );
   });
 
   it("pins the mobile search row above the scrolling list", () => {
@@ -132,8 +135,12 @@ describe("NoteList mobile refresh", () => {
     const searchRow = screen.getByPlaceholderText(/search/i).closest("div");
 
     expect(searchRow?.className).toMatch(/max-md:sticky/);
-    expect(searchRow?.className).toMatch(/max-md:top-0/);
-    expect(searchRow?.className).toMatch(/max-md:z-10/);
+    expect(searchRow?.className).toMatch(/max-md:top-\[53px\]/);
+    expect(searchRow?.className).toMatch(/max-md:z-20/);
+    expect(searchRow?.className).toMatch(/max-md:py-2/);
+    expect(searchRow?.className).toMatch(/max-md:bg-surface\/95/);
+    expect(searchRow?.className).toMatch(/max-md:backdrop-blur/);
+    expect(searchRow?.className).not.toMatch(/max-md:pt-4/);
   });
 
   it("opens a note when the mobile row is tapped", () => {

From 6a52b71a6b7cce0f6c8088d329ae01520748bf94 Mon Sep 17 00:00:00 2001
From: thephez <thephez@users.noreply.github.com>
Date: Tue, 26 May 2026 17:19:45 -0400
Subject: [PATCH 3/4] refactor(dashnote): extract MobileActionSheet and harden
 mobile swipe gestures

- Hoist MobileActionSheet into a shared component with a focus trap,
  aria-labelledby title, and focus restoration on close
- Split swipe handling into pointer vs mouse paths with pointer capture and touch-action: pan-y so vertical scroll stays smooth
- Show a "notes are public" hint in the mobile editor and move toasts
  to top-center on small screens
- Add MobileActionSheet tests and extend NoteList/NoteEditor/e2e coverage
---
 example-apps/dashnote/src/App.tsx             |   4 +-
 .../src/components/MobileActionSheet.tsx      | 115 +++++++++++++++
 .../dashnote/src/components/NoteEditor.tsx    |  74 +++-------
 .../dashnote/src/components/NoteList.tsx      | 125 ++++++++--------
 .../dashnote/test/MobileActionSheet.test.tsx  | 102 +++++++++++++
 .../dashnote/test/NoteEditor.test.tsx         |   6 +-
 example-apps/dashnote/test/NoteList.test.tsx  |  18 +++
 example-apps/dashnote/test/e2e/fixtures.ts    |  85 ++++++-----
 example-apps/dashnote/test/e2e/notes.spec.ts  | 137 ++++++++++++------
 9 files changed, 474 insertions(+), 192 deletions(-)
 create mode 100644 example-apps/dashnote/src/components/MobileActionSheet.tsx
 create mode 100644 example-apps/dashnote/test/MobileActionSheet.test.tsx

diff --git a/example-apps/dashnote/src/App.tsx b/example-apps/dashnote/src/App.tsx
index 04c4e56e..a1316815 100644
--- a/example-apps/dashnote/src/App.tsx
+++ b/example-apps/dashnote/src/App.tsx
@@ -10,6 +10,7 @@ import { NotesWorkspace } from "./components/NotesWorkspace";
 import { OperationResultNotice } from "./components/OperationResultNotice";
 import { SettingsPanel } from "./components/SettingsPanel";
 import type { TopTab } from "./components/Tabs";
+import { useMediaQuery } from "./hooks/useMediaQuery";
 import { useSession } from "./session/useSession";
 
 const screenCopy: Record<TopTab, { title: string; subtitle: string }> = {
@@ -36,6 +37,7 @@ function App() {
   const [tab, setTab] = useState<TopTab>("notes");
   const [loginOpen, setLoginOpen] = useState(false);
   const [activityOpen, setActivityOpen] = useState(false);
+  const isDesktop = useMediaQuery("(min-width: 768px)");
 
   const mobileFullBleed = tab === "notes";
 
@@ -59,7 +61,7 @@ function App() {
 
   return (
     <>
-      <Toaster position="bottom-center" />
+      <Toaster position={isDesktop ? "bottom-center" : "top-center"} />
       <AppShell
         tab={tab}
         onTabChange={setTab}
diff --git a/example-apps/dashnote/src/components/MobileActionSheet.tsx b/example-apps/dashnote/src/components/MobileActionSheet.tsx
new file mode 100644
index 00000000..4044c879
--- /dev/null
+++ b/example-apps/dashnote/src/components/MobileActionSheet.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useId, useRef, type ReactNode } from "react";
+
+interface MobileActionSheetProps {
+  open: boolean;
+  title: string;
+  children: ReactNode;
+  onClose: () => void;
+}
+
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not(:disabled)",
+  "input:not(:disabled)",
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
+  '[tabindex]:not([tabindex="-1"])',
+].join(",");
+
+export function MobileActionSheet({
+  open,
+  title,
+  children,
+  onClose,
+}: MobileActionSheetProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+
+    const previousFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const dialog = dialogRef.current;
+
+    function focusableElements() {
+      if (!dialog) return [];
+      return Array.from(
+        dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+      );
+    }
+
+    const firstFocusable = focusableElements()[0];
+    (firstFocusable ?? dialog)?.focus();
+
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab") return;
+
+      const focusable = focusableElements();
+      if (focusable.length === 0) {
+        event.preventDefault();
+        dialog?.focus();
+        return;
+      }
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      if (previousFocus && document.contains(previousFocus)) {
+        previousFocus.focus();
+      }
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end bg-black/40 px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:hidden"
+      onClick={onClose}
+      data-testid="mobile-action-sheet-backdrop"
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+        className="w-full rounded-2xl border border-line bg-surface p-2 shadow-[0_22px_60px_-24px_rgba(0,0,0,0.65)] outline-none"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <h2
+          id={titleId}
+          className="px-4 pb-1 pt-3 text-[12px] font-semibold uppercase tracking-[0.12em] text-ink-4"
+        >
+          {title}
+        </h2>
+        <div className="py-1">{children}</div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="mt-1 flex min-h-12 w-full items-center justify-center rounded-xl bg-surface-2 px-4 py-3 text-[15px] font-semibold text-ink"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/example-apps/dashnote/src/components/NoteEditor.tsx b/example-apps/dashnote/src/components/NoteEditor.tsx
index 40b36469..83a5ee86 100644
--- a/example-apps/dashnote/src/components/NoteEditor.tsx
+++ b/example-apps/dashnote/src/components/NoteEditor.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useState } from "react";
 
 import type { NoteRecord } from "../dash/queries";
 import { FIELD_BYTE_LIMIT } from "../lib/fieldLimits";
 import { formatRelativeTime, formatTimestamp } from "../lib/format";
+import { MobileActionSheet } from "./MobileActionSheet";
 import { NoteJsonDrawer } from "./NoteJsonDrawer";
 import { OperationResultNotice } from "./OperationResultNotice";
 
@@ -374,6 +375,27 @@ export function NoteEditor({
               )}
             </label>
 
+            <div className="flex items-center gap-1.5 text-[11px] text-ink-4 md:hidden">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+                className="shrink-0"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 16v-4M12 8h.01" />
+              </svg>
+              <span>
+                Notes are stored publicly on Dash Platform — not encrypted.
+              </span>
+            </div>
+
             {isReadOnly && (
               <button
                 type="button"
@@ -513,56 +535,6 @@ export function NoteEditor({
   );
 }
 
-function MobileActionSheet({
-  open,
-  title,
-  children,
-  onClose,
-}: {
-  open: boolean;
-  title: string;
-  children: ReactNode;
-  onClose: () => void;
-}) {
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-end bg-black/40 px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:hidden"
-      onClick={onClose}
-    >
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-label={title}
-        className="w-full rounded-2xl border border-line bg-surface p-2 shadow-[0_22px_60px_-24px_rgba(0,0,0,0.65)]"
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="px-4 pb-1 pt-3 text-[12px] font-semibold uppercase tracking-[0.12em] text-ink-4">
-          {title}
-        </div>
-        <div className="py-1">{children}</div>
-        <button
-          type="button"
-          onClick={onClose}
-          className="mt-1 flex min-h-12 w-full items-center justify-center rounded-xl bg-surface-2 px-4 py-3 text-[15px] font-semibold text-ink"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
-
 function FillBar({ bytes, limit }: { bytes: number; limit: number }) {
   const pct = Math.min(100, (bytes / limit) * 100);
   const over = bytes > limit;
diff --git a/example-apps/dashnote/src/components/NoteList.tsx b/example-apps/dashnote/src/components/NoteList.tsx
index a634caac..552bce22 100644
--- a/example-apps/dashnote/src/components/NoteList.tsx
+++ b/example-apps/dashnote/src/components/NoteList.tsx
@@ -3,9 +3,8 @@ import {
   useMemo,
   useRef,
   useState,
-  type PointerEvent,
   type MouseEvent,
-  type ReactNode,
+  type PointerEvent,
 } from "react";
 
 import type { NoteRecord } from "../dash/queries";
@@ -15,6 +14,7 @@ import {
   noteDisplayTitle,
   notePreview,
 } from "../lib/format";
+import { MobileActionSheet } from "./MobileActionSheet";
 
 interface NoteListProps {
   notes: NoteRecord[];
@@ -61,6 +61,7 @@ export function NoteList({
     vertical: boolean;
     horizontal: boolean;
     latestOffset: number;
+    pointerId?: number;
   } | null>(null);
   const searchRef = useRef<HTMLInputElement>(null);
 
@@ -100,8 +101,12 @@ export function NoteList({
     gestureRef.current = null;
   }
 
-  function handlePointerDown(event: PointerEvent | MouseEvent, noteId: string) {
-    if (isDesktop || (event.button !== 0 && event.button !== undefined)) return;
+  function startGesture(
+    event: PointerEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
+    noteId: string,
+    pointerId?: number,
+  ) {
+    if (isDesktop || event.button > 0) return;
     gestureRef.current = {
       noteId,
       startX: event.clientX,
@@ -110,10 +115,25 @@ export function NoteList({
       vertical: false,
       horizontal: false,
       latestOffset: 0,
+      pointerId,
     };
   }
 
-  function handlePointerMove(event: PointerEvent | MouseEvent) {
+  function handlePointerDown(
+    event: PointerEvent<HTMLDivElement>,
+    noteId: string,
+  ) {
+    startGesture(event, noteId, event.pointerId);
+  }
+
+  function handleMouseDown(event: MouseEvent<HTMLDivElement>, noteId: string) {
+    if ("PointerEvent" in window) return;
+    startGesture(event, noteId);
+  }
+
+  function moveGesture(
+    event: PointerEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
+  ) {
     const gesture = gestureRef.current;
     if (!gesture || gesture.ignored || isDesktop) return;
     const dx = event.clientX - gesture.startX;
@@ -127,7 +147,12 @@ export function NoteList({
       return;
     }
     if (gesture.vertical) return;
-    if (absX > 12 && absX > absY) gesture.horizontal = true;
+    if (absX > 12 && absX > absY) {
+      gesture.horizontal = true;
+      if ("pointerId" in event && gesture.pointerId !== undefined) {
+        event.currentTarget.setPointerCapture?.(gesture.pointerId);
+      }
+    }
     if (!gesture.horizontal) return;
     event.preventDefault();
     const offset = Math.max(-revealedWidth, Math.min(0, dx));
@@ -139,9 +164,21 @@ export function NoteList({
     setDragOffset(offset);
   }
 
-  function handlePointerEnd() {
+  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
+    moveGesture(event);
+  }
+
+  function handleMouseMove(event: MouseEvent<HTMLDivElement>) {
+    if ("PointerEvent" in window) return;
+    moveGesture(event);
+  }
+
+  function endGesture(event?: PointerEvent<HTMLDivElement>) {
     const gesture = gestureRef.current;
     if (!gesture) return;
+    if (gesture.pointerId !== undefined) {
+      event?.currentTarget.releasePointerCapture?.(gesture.pointerId);
+    }
     if (gesture.ignored || gesture.vertical || isDesktop) {
       gestureRef.current = null;
       setDraggingId(null);
@@ -154,6 +191,15 @@ export function NoteList({
     gestureRef.current = null;
   }
 
+  function handlePointerEnd(event?: PointerEvent<HTMLDivElement>) {
+    endGesture(event);
+  }
+
+  function handleMouseEnd() {
+    if ("PointerEvent" in window) return;
+    endGesture();
+  }
+
   function openActions(note: NoteRecord) {
     setActionsNote(note);
     closeRowActions();
@@ -345,19 +391,23 @@ export function NoteList({
                 <div
                   key={note.id}
                   data-testid={`note-row-${note.id}`}
-                  className="relative overflow-hidden rounded-lg"
+                  className="relative overflow-hidden rounded-lg [touch-action:pan-y]"
                   onPointerDown={(event) => handlePointerDown(event, note.id)}
                   onPointerMove={handlePointerMove}
                   onPointerUp={handlePointerEnd}
                   onPointerCancel={handlePointerEnd}
-                  onMouseDown={(event) => handlePointerDown(event, note.id)}
-                  onMouseMove={handlePointerMove}
-                  onMouseUp={handlePointerEnd}
+                  onMouseDown={(event) => handleMouseDown(event, note.id)}
+                  onMouseMove={handleMouseMove}
+                  onMouseUp={handleMouseEnd}
                 >
                   {!isDesktop && (
-                    <div className="absolute inset-y-0 right-0 flex w-[156px] items-stretch justify-end overflow-hidden rounded-lg bg-surface-2">
+                    <div
+                      className="absolute inset-y-0 right-0 flex w-[156px] items-stretch justify-end overflow-hidden rounded-lg bg-surface-2"
+                      aria-hidden={!open}
+                    >
                       <button
                         type="button"
+                        tabIndex={open ? 0 : -1}
                         onClick={() => openActions(note)}
                         className="flex w-[78px] items-center justify-center text-[12px] font-semibold text-ink"
                       >
@@ -365,6 +415,7 @@ export function NoteList({
                       </button>
                       <button
                         type="button"
+                        tabIndex={open ? 0 : -1}
                         onClick={() => deleteOrSignIn(note)}
                         className={`flex w-[78px] items-center justify-center text-[12px] font-semibold ${
                           canDeleteNotes
@@ -563,53 +614,3 @@ export function NoteList({
     </section>
   );
 }
-
-function MobileActionSheet({
-  open,
-  title,
-  children,
-  onClose,
-}: {
-  open: boolean;
-  title: string;
-  children: ReactNode;
-  onClose: () => void;
-}) {
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-end bg-black/40 px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:hidden"
-      onClick={onClose}
-    >
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-label={title}
-        className="w-full rounded-2xl border border-line bg-surface p-2 shadow-[0_22px_60px_-24px_rgba(0,0,0,0.65)]"
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="px-4 pb-1 pt-3 text-[12px] font-semibold uppercase tracking-[0.12em] text-ink-4">
-          {title}
-        </div>
-        <div className="py-1">{children}</div>
-        <button
-          type="button"
-          onClick={onClose}
-          className="mt-1 flex min-h-12 w-full items-center justify-center rounded-xl bg-surface-2 px-4 py-3 text-[15px] font-semibold text-ink"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/example-apps/dashnote/test/MobileActionSheet.test.tsx b/example-apps/dashnote/test/MobileActionSheet.test.tsx
new file mode 100644
index 00000000..9bf6cfb1
--- /dev/null
+++ b/example-apps/dashnote/test/MobileActionSheet.test.tsx
@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { MobileActionSheet } from "../src/components/MobileActionSheet";
+
+afterEach(() => {
+  cleanup();
+});
+
+function renderSheet(onClose = vi.fn()) {
+  return {
+    onClose,
+    ...render(
+      <MobileActionSheet open title="Note actions" onClose={onClose}>
+        <button type="button">First action</button>
+        <button type="button">Second action</button>
+      </MobileActionSheet>,
+    ),
+  };
+}
+
+describe("MobileActionSheet", () => {
+  it("labels the modal dialog from the visible sheet title", () => {
+    renderSheet();
+
+    expect(screen.getByRole("dialog", { name: /note actions/i })).toBeTruthy();
+  });
+
+  it("moves focus to the first action when opened", () => {
+    renderSheet();
+
+    expect(document.activeElement).toBe(
+      screen.getByRole("button", { name: /first action/i }),
+    );
+  });
+
+  it("calls onClose when Escape is pressed", () => {
+    const { onClose } = renderSheet();
+
+    fireEvent.keyDown(window, { key: "Escape" });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when the backdrop is clicked", () => {
+    const { onClose } = renderSheet();
+
+    fireEvent.click(screen.getByTestId("mobile-action-sheet-backdrop"));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("traps tab focus inside the sheet", () => {
+    renderSheet();
+
+    const first = screen.getByRole("button", { name: /first action/i });
+    const cancel = screen.getByRole("button", { name: /^cancel$/i });
+
+    cancel.focus();
+    fireEvent.keyDown(window, { key: "Tab" });
+    expect(document.activeElement).toBe(first);
+
+    first.focus();
+    fireEvent.keyDown(window, { key: "Tab", shiftKey: true });
+    expect(document.activeElement).toBe(cancel);
+  });
+
+  it("restores the previous focus target when closed", () => {
+    function Harness() {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setOpen(true)}>
+            Launcher
+          </button>
+          <MobileActionSheet
+            open={open}
+            title="Note actions"
+            onClose={() => setOpen(false)}
+          >
+            <button type="button">First action</button>
+          </MobileActionSheet>
+        </>
+      );
+    }
+
+    render(<Harness />);
+    const launcher = screen.getByRole("button", { name: /launcher/i });
+    launcher.focus();
+    fireEvent.click(launcher);
+    expect(document.activeElement).toBe(
+      screen.getByRole("button", { name: /first action/i }),
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /^cancel$/i }));
+
+    expect(document.activeElement).toBe(launcher);
+  });
+});
diff --git a/example-apps/dashnote/test/NoteEditor.test.tsx b/example-apps/dashnote/test/NoteEditor.test.tsx
index 51df26b3..1b668b61 100644
--- a/example-apps/dashnote/test/NoteEditor.test.tsx
+++ b/example-apps/dashnote/test/NoteEditor.test.tsx
@@ -126,12 +126,12 @@ describe("NoteEditor mobile refresh", () => {
     expect(body.className).not.toMatch(/\bring\b/);
   });
 
-  it("does not render the per-note public-chain notice on mobile", () => {
+  it("renders the mobile public-chain notice", () => {
     renderEditor({ isDesktop: false, canEdit: true });
 
     expect(
-      screen.queryByText(/notes are stored publicly on dash platform/i),
-    ).toBeNull();
+      screen.getByText(/notes are stored publicly on dash platform/i),
+    ).toBeTruthy();
   });
 
   it("keeps desktop metadata footer behavior", () => {
diff --git a/example-apps/dashnote/test/NoteList.test.tsx b/example-apps/dashnote/test/NoteList.test.tsx
index a81656f1..e663f741 100644
--- a/example-apps/dashnote/test/NoteList.test.tsx
+++ b/example-apps/dashnote/test/NoteList.test.tsx
@@ -225,6 +225,20 @@ describe("NoteList mobile refresh", () => {
     expect(onDeleteNote).toHaveBeenCalledWith(note);
   });
 
+  it("keeps hidden swipe actions out of tab order and the accessibility tree", () => {
+    renderList([makeNote()], { isDesktop: false });
+
+    const row = screen.getByTestId("note-row-note-a");
+    const actionRail = row.querySelector("[aria-hidden]");
+    const more = within(row).getByText("More").closest("button");
+    const signIn = within(row).getByText("Sign in").closest("button");
+
+    expect(actionRail?.getAttribute("aria-hidden")).toBe("true");
+    expect(more?.getAttribute("tabindex")).toBe("-1");
+    expect(signIn?.getAttribute("tabindex")).toBe("-1");
+    expect(screen.queryByRole("button", { name: /^more$/i })).toBeNull();
+  });
+
   it("swipe-left reveals mobile row actions after the horizontal threshold", () => {
     renderList([makeNote()], { isDesktop: false });
 
@@ -235,6 +249,10 @@ describe("NoteList mobile refresh", () => {
     fireEvent.mouseUp(row);
 
     expect(foreground.getAttribute("style")).toContain("translateX(-156px)");
+    expect(
+      row.querySelector("[aria-hidden]")?.getAttribute("aria-hidden"),
+    ).toBe("false");
+    expect(screen.getByRole("button", { name: /^more$/i })).toBeTruthy();
   });
 
   it("vertical movement cancels mobile row swipe reveal", () => {
diff --git a/example-apps/dashnote/test/e2e/fixtures.ts b/example-apps/dashnote/test/e2e/fixtures.ts
index 14581a8f..539cb9bc 100644
--- a/example-apps/dashnote/test/e2e/fixtures.ts
+++ b/example-apps/dashnote/test/e2e/fixtures.ts
@@ -51,6 +51,15 @@ function isMobile(page: Page): boolean {
   return size != null && size.width < 768;
 }
 
+async function openMobileDrawerIfNeeded(page: Page) {
+  if (!isMobile(page)) return;
+  const hamburger = page.locator('button[aria-expanded][aria-label*="menu" i]');
+  if ((await hamburger.getAttribute("aria-expanded")) !== "true") {
+    await hamburger.click();
+    await expect(hamburger).toHaveAttribute("aria-expanded", "true");
+  }
+}
+
 /**
  * Resolve a sidebar nav button (Notes / How it works / Sign in) by label.
  *
@@ -58,16 +67,7 @@ function isMobile(page: Page): boolean {
  * drawer first so the button is in the visible viewport.
  */
 export async function navButton(page: Page, label: RegExp | string) {
-  if (isMobile(page)) {
-    // Hamburger button carries aria-expanded="true|false" reflecting drawerOpen.
-    const hamburger = page.locator(
-      'button[aria-expanded][aria-label*="menu" i]',
-    );
-    if ((await hamburger.getAttribute("aria-expanded")) !== "true") {
-      await hamburger.click();
-      await expect(hamburger).toHaveAttribute("aria-expanded", "true");
-    }
-  }
+  await openMobileDrawerIfNeeded(page);
   return page
     .locator('aside[aria-label="Main navigation"]')
     .getByRole("button", { name: label });
@@ -84,15 +84,7 @@ export async function navButton(page: Page, label: RegExp | string) {
  * via the hamburger first.
  */
 export async function openIdentityMenu(page: Page) {
-  if (isMobile(page)) {
-    const hamburger = page.locator(
-      'button[aria-expanded][aria-label*="menu" i]',
-    );
-    if ((await hamburger.getAttribute("aria-expanded")) !== "true") {
-      await hamburger.click();
-      await expect(hamburger).toHaveAttribute("aria-expanded", "true");
-    }
-  }
+  await openMobileDrawerIfNeeded(page);
   // The IdentityCard menu trigger is the button with aria-haspopup="menu".
   // (The hamburger uses aria-haspopup absent; readonly card is a plain
   // button; only the authenticated/browsing IdentityCard exposes the menu.)
@@ -128,6 +120,8 @@ export async function loginViaModal(
     throw new Error("PLATFORM_MNEMONIC is required for loginViaModal");
   }
 
+  await openMobileDrawerIfNeeded(page);
+
   const browsing = await page
     .locator('aside[aria-label="Main navigation"]')
     .getByText("Read-only access", { exact: true })
@@ -235,6 +229,30 @@ export async function startNewNote(page: Page) {
   await expect(page.getByLabel("Title")).toBeVisible();
 }
 
+/**
+ * Wait until a save/create operation has completed and the editor is clean.
+ * Desktop keeps a disabled Save button visible; mobile hides Save when clean.
+ */
+export async function waitForSaveComplete(page: Page) {
+  if (isMobile(page)) {
+    await expect(page.getByText(/^Updated /i)).toBeVisible({
+      timeout: 60_000,
+    });
+    await expect(page.getByRole("button", { name: /^save$/i })).toBeHidden();
+    return;
+  }
+
+  await expect(page.getByRole("button", { name: /^save$/i })).toBeDisabled({
+    timeout: 60_000,
+  });
+}
+
+async function waitForToastsToClear(page: Page) {
+  await expect(page.locator("[data-sonner-toast]")).toHaveCount(0, {
+    timeout: 10_000,
+  });
+}
+
 /**
  * Create a note via the editor: opens the New-note draft, fills title +
  * body, clicks the create/save button, waits until the list contains an
@@ -249,14 +267,7 @@ export async function createNoteViaEditor(
   await page.getByLabel("Body").fill(message);
   // The save button reads "Create note" for new drafts.
   await page.getByRole("button", { name: /^create note$/i }).click();
-  // Post-save, the editor advances baselines, so the Save button flips
-  // from enabled ("Create note") to disabled (label becomes "Save" and
-  // dirty=false). That's a viewport-agnostic signal — much more reliable
-  // than asserting list-item visibility, which on mobile is hidden
-  // because the list pane gets `display: none` when a note is selected.
-  await expect(page.getByRole("button", { name: /^save$/i })).toBeDisabled({
-    timeout: 60_000,
-  });
+  await waitForSaveComplete(page);
 }
 
 /**
@@ -276,17 +287,23 @@ export async function deleteNoteByTitle(page: Page, title: string) {
     timeout: 30_000,
   });
 
-  // Desktop renders the "Delete" button in the editor header; mobile
-  // renders "Delete note" near the bottom. Match either label.
-  await page
-    .getByRole("button", { name: /^delete( note)?$/i })
-    .first()
-    .click();
+  if (isMobile(page)) {
+    await page.getByRole("button", { name: /note actions/i }).click();
+    const actions = page.getByRole("dialog", { name: /note actions/i });
+    await expect(actions).toBeVisible();
+    await actions.getByRole("button", { name: /^delete$/i }).click();
+  } else {
+    await page
+      .getByRole("button", { name: /^delete$/i })
+      .first()
+      .click();
+  }
 
   // DeleteNoteModal opens for confirmation; scope to its dialog so we
   // don't accidentally re-match the editor's Delete trigger.
-  const confirmDialog = page.getByRole("dialog");
+  const confirmDialog = page.getByRole("dialog", { name: /delete note/i });
   await expect(confirmDialog).toBeVisible();
+  await waitForToastsToClear(page);
   await confirmDialog.getByRole("button", { name: /^delete$/i }).click();
 
   // Item leaves the list after reloadNotes resolves.
diff --git a/example-apps/dashnote/test/e2e/notes.spec.ts b/example-apps/dashnote/test/e2e/notes.spec.ts
index 4993fdb4..a2cb7f9e 100644
--- a/example-apps/dashnote/test/e2e/notes.spec.ts
+++ b/example-apps/dashnote/test/e2e/notes.spec.ts
@@ -8,6 +8,7 @@ import {
   cleanupE2eNotes,
   returnToList,
   seedSearchFixtures,
+  waitForSaveComplete,
   e2eTitle,
   SEARCH_FIXTURE_ALPHA,
   SEARCH_FIXTURE_BETA,
@@ -59,8 +60,7 @@ test("create, edit, and delete a note round-trip", async ({ page }) => {
   await expect(page.getByLabel("Title")).toHaveValue(originalTitle);
   await page.getByLabel("Title").fill(newTitle);
   await page.getByRole("button", { name: /^save$/i }).click();
-  // Save completes when the button disables again (dirty=false).
-  await expect(page.getByRole("button", { name: /^save$/i })).toBeDisabled();
+  await waitForSaveComplete(page);
 
   // After save, hop back to the list to verify the title change is
   // reflected there (and the old title is gone).
@@ -156,33 +156,106 @@ test("mobile: tapping a note transitions list → editor; Back returns", async (
     "mobile-only viewport behavior",
   );
 
-  const title = e2eTitle("mobile");
-  await createNoteViaEditor(page, {
-    title,
-    message: "mobile list/editor transition",
-  });
-
-  // Returning to the list view: after createNoteViaEditor, the editor is
-  // showing the new note. Hit Back.
-  await page.getByRole("button", { name: /back to notes/i }).click();
-  // List visible again, editor hidden.
+  await returnToList(page);
+  await expect(
+    page.locator("button", { hasText: SEARCH_FIXTURE_ALPHA }).first(),
+  ).toBeVisible({ timeout: 60_000 });
   await expect(page.getByPlaceholder("Search")).toBeVisible();
   await expect(page.getByLabel("Title")).toBeHidden();
 
   // Tap the note → editor reappears.
-  await page.locator("button", { hasText: title }).first().click();
-  await expect(page.getByLabel("Title")).toHaveValue(title);
+  await page
+    .locator("button", { hasText: SEARCH_FIXTURE_ALPHA })
+    .first()
+    .click();
+  await expect(page.getByLabel("Title")).toHaveValue(SEARCH_FIXTURE_ALPHA);
   // Search bar is hidden once a note is selected on mobile.
   await expect(page.getByPlaceholder("Search")).toBeHidden();
+
+  await page.getByRole("button", { name: /back to notes/i }).click();
+  await expect(page.getByPlaceholder("Search")).toBeVisible();
+  await expect(page.getByLabel("Title")).toBeHidden();
+});
+
+test("mobile: swiping a note reveals row actions and opens note info", async ({
+  page,
+}, testInfo) => {
+  test.skip(
+    testInfo.project.name !== "chromium-mobile",
+    "mobile-only viewport behavior",
+  );
+
+  await returnToList(page);
+  await expect(
+    page.locator("button", { hasText: SEARCH_FIXTURE_ALPHA }).first(),
+  ).toBeVisible({ timeout: 60_000 });
+
+  const row = page.locator(
+    'div[data-testid^="note-row-"]:not([data-testid*="foreground"])',
+    { has: page.locator("button", { hasText: SEARCH_FIXTURE_ALPHA }) },
+  );
+  const box = await row.boundingBox();
+  expect(box).not.toBeNull();
+  if (!box) return;
+
+  await page.mouse.move(box.x + box.width - 24, box.y + box.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(box.x + box.width - 120, box.y + box.height / 2 + 2, {
+    steps: 5,
+  });
+  await page.mouse.up();
+
+  await expect(row.getByRole("button", { name: /^more$/i })).toBeVisible();
+  await row.getByRole("button", { name: /^more$/i }).click();
+  const actions = page.getByRole("dialog", { name: /note actions/i });
+  await expect(actions).toBeVisible();
+
+  await actions.getByRole("button", { name: /^info$/i }).click();
+  const info = page.getByRole("dialog", { name: /note info/i });
+  await expect(info).toBeVisible();
+  await expect(info.getByText(/revision/i)).toBeVisible();
+
+  await info.getByRole("button", { name: /^cancel$/i }).click();
+  await expect(info).toBeHidden();
+});
+
+test("mobile: editor note actions delete flow opens confirmation", async ({
+  page,
+}, testInfo) => {
+  test.skip(
+    testInfo.project.name !== "chromium-mobile",
+    "mobile-only viewport behavior",
+  );
+
+  await returnToList(page);
+  await expect(
+    page.locator("button", { hasText: SEARCH_FIXTURE_BETA }).first(),
+  ).toBeVisible({ timeout: 60_000 });
+  await page
+    .locator("button", { hasText: SEARCH_FIXTURE_BETA })
+    .first()
+    .click();
+  await expect(page.getByLabel("Title")).toHaveValue(SEARCH_FIXTURE_BETA);
+
+  await page.getByRole("button", { name: /note actions/i }).click();
+  const actions = page.getByRole("dialog", { name: /note actions/i });
+  await expect(actions).toBeVisible();
+  await actions.getByRole("button", { name: /^delete$/i }).click();
+
+  const confirmDialog = page.getByRole("dialog", { name: /delete note/i });
+  await expect(confirmDialog).toBeVisible();
+  await expect(confirmDialog.getByText(SEARCH_FIXTURE_BETA)).toBeVisible();
+  await confirmDialog.getByRole("button", { name: /^cancel$/i }).click();
+  await expect(confirmDialog).toBeHidden();
 });
 
 test("two contexts can sequentially save the same note without conflict", async ({
   browser,
 }) => {
   // This test does ~6 testnet round-trips (login×2, create, update×2,
-  // delete) across two browser contexts. The default 15s test budget
-  // isn't enough.
-  test.setTimeout(60_000);
+  // delete) across two browser contexts. Mobile emulation can be slower,
+  // so give this network-heavy serial case extra room.
+  test.setTimeout(120_000);
 
   // Spin up two contexts that share the same identity. Login with
   // rememberMe so reloads keep the identity hint and re-enter "browsing"
@@ -211,16 +284,9 @@ test("two contexts can sequentially save the same note without conflict", async
     });
 
     // Page2 needs to see the note created by page1. Reload to bypass
-    // the 30s background refresh and re-login (rememberMe means the
-    // login form pre-fills with the remembered identity hint). A
-    // remembered identity boots into browsing, so wait for that
-    // subtitle as the readiness gate.
+    // the 30s background refresh and re-login. Remembered identity boots
+    // into browsing, so loginViaModal uses the IdentityCard path.
     await page2.reload();
-    await expect(
-      page2
-        .locator('aside[aria-label="Main navigation"]')
-        .getByText("Read-only access", { exact: true }),
-    ).toBeVisible({ timeout: 60_000 });
     await loginViaModal(page2, { rememberMe: true });
     await expect(
       page2.locator("button", { hasText: title }).first(),
@@ -235,19 +301,11 @@ test("two contexts can sequentially save the same note without conflict", async
     });
     await page2.getByLabel("Body").fill("round 2 (from page2)");
     await page2.getByRole("button", { name: /^save$/i }).click();
-    await expect(page2.getByRole("button", { name: /^save$/i })).toBeDisabled({
-      timeout: 60_000,
-    });
+    await waitForSaveComplete(page2);
 
     // Page1 reloads + re-logs to see page2's edit, then makes its own
-    // change. Remembered identity → browsing on reload, so wait for
-    // the browsing subtitle as the readiness gate.
+    // change. Remembered identity boots into browsing after reload.
     await page1.reload();
-    await expect(
-      page1
-        .locator('aside[aria-label="Main navigation"]')
-        .getByText("Read-only access", { exact: true }),
-    ).toBeVisible({ timeout: 60_000 });
     await loginViaModal(page1, { rememberMe: true });
     await page1.locator("button", { hasText: title }).first().click();
     await expect(page1.getByLabel("Body")).toHaveValue("round 2 (from page2)", {
@@ -255,9 +313,7 @@ test("two contexts can sequentially save the same note without conflict", async
     });
     await page1.getByLabel("Body").fill("round 3 (from page1)");
     await page1.getByRole("button", { name: /^save$/i }).click();
-    await expect(page1.getByRole("button", { name: /^save$/i })).toBeDisabled({
-      timeout: 60_000,
-    });
+    await waitForSaveComplete(page1);
 
     // Cleanup from page1. afterEach runs against the base test `page`,
     // which is a different context that isn't logged in, so cleanup has
@@ -267,8 +323,7 @@ test("two contexts can sequentially save the same note without conflict", async
       /* best effort */
     });
   } finally {
-    await ctx1.close();
-    await ctx2.close();
+    await Promise.allSettled([ctx1.close(), ctx2.close()]);
   }
 });
 

From 42630e7651949141ae7b2c9bf8fa4601829d1656 Mon Sep 17 00:00:00 2001
From: thephez <thephez@users.noreply.github.com>
Date: Tue, 26 May 2026 17:29:32 -0400
Subject: [PATCH 4/4] fix(ui): keep mobile refresh from bumping down search bar

---
 .../dashnote/src/components/NoteList.tsx      | 63 +++++++++----------
 example-apps/dashnote/test/NoteList.test.tsx  | 14 +++++
 2 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/example-apps/dashnote/src/components/NoteList.tsx b/example-apps/dashnote/src/components/NoteList.tsx
index 552bce22..82525ca0 100644
--- a/example-apps/dashnote/src/components/NoteList.tsx
+++ b/example-apps/dashnote/src/components/NoteList.tsx
@@ -269,39 +269,7 @@ export function NoteList({
           )}
         </div>
       )}
-      {!isDesktop && revalidating && (
-        <div className="flex justify-end px-4 pt-3">
-          <span
-            className="inline-flex items-center gap-1 text-[11px] text-ink-4"
-            role="status"
-            aria-label="Refreshing notes"
-          >
-            <svg
-              className="h-3 w-3 animate-spin"
-              viewBox="0 0 24 24"
-              fill="none"
-              aria-hidden="true"
-            >
-              <circle
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeOpacity="0.25"
-                strokeWidth="3"
-              />
-              <path
-                d="M22 12a10 10 0 0 1-10 10"
-                stroke="currentColor"
-                strokeWidth="3"
-                strokeLinecap="round"
-              />
-            </svg>
-          </span>
-        </div>
-      )}
-
-      <div className="px-3 py-2.5 max-md:sticky max-md:top-[53px] max-md:z-20 max-md:border-b max-md:border-[color:color-mix(in_oklab,var(--color-line)_58%,transparent)] max-md:bg-surface/95 max-md:py-2 max-md:backdrop-blur">
+      <div className="relative px-3 py-2.5 max-md:sticky max-md:top-[53px] max-md:z-20 max-md:border-b max-md:border-[color:color-mix(in_oklab,var(--color-line)_58%,transparent)] max-md:bg-surface/95 max-md:py-2 max-md:backdrop-blur">
         <label className="relative block">
           <span className="sr-only">Search notes</span>
           <svg
@@ -336,6 +304,35 @@ export function NoteList({
             </span>
           )}
         </label>
+        {!isDesktop && revalidating && (
+          <span
+            className="pointer-events-none absolute right-6 top-1/2 inline-flex -translate-y-1/2 items-center text-ink-4"
+            role="status"
+            aria-label="Refreshing notes"
+          >
+            <svg
+              className="h-3 w-3 animate-spin"
+              viewBox="0 0 24 24"
+              fill="none"
+              aria-hidden="true"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeOpacity="0.25"
+                strokeWidth="3"
+              />
+              <path
+                d="M22 12a10 10 0 0 1-10 10"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeLinecap="round"
+              />
+            </svg>
+          </span>
+        )}
       </div>
 
       <div
diff --git a/example-apps/dashnote/test/NoteList.test.tsx b/example-apps/dashnote/test/NoteList.test.tsx
index e663f741..66b70844 100644
--- a/example-apps/dashnote/test/NoteList.test.tsx
+++ b/example-apps/dashnote/test/NoteList.test.tsx
@@ -143,6 +143,20 @@ describe("NoteList mobile refresh", () => {
     expect(searchRow?.className).not.toMatch(/max-md:pt-4/);
   });
 
+  it("keeps the mobile refresh indicator inside the search row", () => {
+    renderList([makeNote()], { isDesktop: false, revalidating: true });
+
+    const searchRow = screen.getByPlaceholderText(/search/i).closest("div");
+    const refreshStatus = screen.getByRole("status", {
+      name: /refreshing notes/i,
+    });
+
+    expect(searchRow?.contains(refreshStatus)).toBe(true);
+    expect(searchRow?.previousElementSibling).toBeNull();
+    expect(refreshStatus.className).toMatch(/absolute/);
+    expect(refreshStatus.className).toMatch(/right-6/);
+  });
+
   it("opens a note when the mobile row is tapped", () => {
     const onSelect = vi.fn();
     renderList([makeNote()], { isDesktop: false, onSelect });