feat: persist page title changes to Postgres and enable live title editing

- Add drizzle-orm dependency to api-worker for DB updates
- Persist encrypted page titles to Postgres in UserRealtimeRoom when HSET broadcasts occur
- Add buildRealtimeHset helper to send title updates via WebSocket
- Implement updatePageTitle() to encrypt and broadcast title changes
- Add editedRelativeTitle/editedAbsoluteTitle refs for optimistic UI updates
- Split pageLabels into currentPageRelativeTitle and currentPageAbsoluteTitle comput

Author: gustavotoyota

new-deepnotes/apps/api-worker/package.json

@@ -22,6 +22,7 @@
     "@deepnotes/session": "workspace:*",
     "@deepnotes/session-core": "workspace:*",
     "@upstash/redis": "^1.34.8",
+    "drizzle-orm": "^0.41.0",
     "msgpackr": "^1.11.8",
     "hono": "^4.7.7",
     "stripe": "^17.7.0"

new-deepnotes/apps/api-worker/src/user-realtime-room.ts

@@ -1,4 +1,6 @@
 import { Redis } from "@upstash/redis";
+import { eq } from "drizzle-orm";
+import { pages } from "@deepnotes/db/schema";
 import {
   decodeRealtimeClientBinaryMessage,
   encodeRealtimeServerDataNotification,
@@ -417,6 +419,33 @@ export class UserRealtimeRoom {
         ws.send(out.subscribeNotifyBytes);
       }
 
+      // Persist page title changes to Postgres so they survive refresh.
+      if (hyper != null) {
+        const db = getDbForConnectionString(hyper.connectionString);
+        for (const item of out.hsetBroadcastItems) {
+          if (item.prefix !== "page") continue;
+          const pageId = item.suffix;
+          const b64 = typeof item.value === "string" ? item.value : "";
+          if (b64 === "") continue;
+          const bytes = Buffer.from(b64, "base64");
+          try {
+            if (item.field === "encrypted-relative-title") {
+              await db
+                .update(pages)
+                .set({ encryptedRelativeTitle: bytes })
+                .where(eq(pages.id, pageId));
+            } else if (item.field === "encrypted-absolute-title") {
+              await db
+                .update(pages)
+                .set({ encryptedAbsoluteTitle: bytes })
+                .where(eq(pages.id, pageId));
+            }
+          } catch {
+            // Best-effort DB persistence.
+          }
+        }
+      }
+
       for (const item of out.hsetBroadcastItems) {
         const subs = this._fieldSubs.get(item.fullKey);
         if (subs == null || subs.size === 0) {

new-deepnotes/apps/web/src/features/pages/PageEditorView.vue

@@ -27,9 +27,13 @@ import { createPageCollabDoc } from "./page-yjs-doc";
 import { usePageCollabEditor } from "./usePageCollabEditor";
 import { usePageManagement } from "./usePageManagement";
 import { usePagePathAndPrefs } from "./usePagePathAndPrefs";
-import { base64ToBytes } from "@deepnotes/e2ee";
-import { decryptPageRelativeTitle } from "./page-collab-crypto";
+import { base64ToBytes, bytesToBase64 } from "@deepnotes/e2ee";
+import {
+  decryptPageRelativeTitle,
+  decryptPageAbsoluteTitle,
+} from "./page-collab-crypto";
 import { usePagePathRealtimeTitles } from "./usePagePathRealtimeTitles";
+import { buildRealtimeHset, sendRealtimeRequestBatch } from "../realtime/realtime-user-ws";
 import { usePageSnapshots } from "./usePageSnapshots";
 import PageLayout from "@/layouts/PageLayout.vue";
 import PageStateScreens from "./screens/PageStateScreens.vue";
@@ -169,31 +173,71 @@ const { pathPageLabels } = usePagePathRealtimeTitles({
   cryptoError,
 });
 
-// Merge realtime labels with the current page's bootstrap-encrypted title.
-// usePagePathRealtimeTitles clears and refills pathPageLabels asynchronously,
-// so a simple watcher would be overwritten.  A computed always re-evaluates.
-const pageLabels = computed<Record<string, string>>(() => {
-  const labels = { ...pathPageLabels.value };
+// Separate reactive overrides so local edits reflect immediately without
+// waiting for the async realtime round-trip.
+const editedRelativeTitle = ref<string | null>(null);
+const editedAbsoluteTitle = ref<string | null>(null);
+
+watch(pageId, () => {
+  editedRelativeTitle.value = null;
+  editedAbsoluteTitle.value = null;
+});
+
+const currentPageRelativeTitle = computed(() => {
+  if (editedRelativeTitle.value != null) return editedRelativeTitle.value;
   const id = pageId.value;
-  if (labels[id] && labels[id].length > 0) {
-    return labels;
-  }
   const pk = pageKeyring.value;
   const b64 = pageEncRelTitleB64.value;
-  if (!id || !pk || !b64) {
-    return labels;
+  if (!id || !pk || !b64) return `[Page ${id}]`;
+  try {
+    const t = decryptPageRelativeTitle({
+      pageKeyring: pk,
+      pageId: id,
+      ciphertext: base64ToBytes(b64),
+    });
+    return t && t.length > 0 ? t : `[Page ${id}]`;
+  } catch {
+    return `[Page ${id}]`;
   }
+});
+
+const currentPageAbsoluteTitle = computed(() => {
+  if (editedAbsoluteTitle.value != null) return editedAbsoluteTitle.value;
+  const id = pageId.value;
+  const fromRealtime = pathPageLabels.value[id];
+  if (fromRealtime && fromRealtime.length > 0) return fromRealtime;
+  const pk = pageKeyring.value;
+  const b64 = pageEncAbsTitleB64.value;
+  if (!id || !pk || !b64) return `[Page ${id}]`;
   try {
-    const title = decryptPageRelativeTitle({
+    const t = decryptPageAbsoluteTitle({
       pageKeyring: pk,
       pageId: id,
       ciphertext: base64ToBytes(b64),
     });
-    if (title && title.length > 0) {
-      labels[id] = title;
-    }
+    return t && t.length > 0 ? t : `[Page ${id}]`;
+  } catch {
+    return `[Page ${id}]`;
+  }
+});
+
+// Breadcrumb labels: absolute title from realtime, fallback to decrypted bootstrap.
+const pageLabels = computed<Record<string, string>>(() => {
+  const labels = { ...pathPageLabels.value };
+  const id = pageId.value;
+  if (labels[id] && labels[id].length > 0) return labels;
+  const pk = pageKeyring.value;
+  const b64 = pageEncAbsTitleB64.value;
+  if (!id || !pk || !b64) return labels;
+  try {
+    const t = decryptPageAbsoluteTitle({
+      pageKeyring: pk,
+      pageId: id,
+      ciphertext: base64ToBytes(b64),
+    });
+    if (t && t.length > 0) labels[id] = t;
   } catch {
-    // ignore decrypt failures
+    // ignore
   }
   return labels;
 });
@@ -242,6 +286,42 @@ async function onUnlockWithPassword(password: string): Promise<boolean> {
   return ok;
 }
 
+async function updatePageTitle(type: "relative" | "absolute", value: string) {
+  const id = pageId.value;
+  const pk = pageKeyring.value;
+  if (!id || !pk) return;
+  try {
+    const ciphertext = pk.encrypt(new TextEncoder().encode(value), {
+      padding: true,
+      associatedData: {
+        context:
+          type === "relative" ? "PageRelativeTitle" : "PageAbsoluteTitle",
+        pageId: id,
+      },
+    });
+    void sendRealtimeRequestBatch([
+      buildRealtimeHset(
+        "page",
+        id,
+        type === "relative"
+          ? "encrypted-relative-title"
+          : "encrypted-absolute-title",
+        bytesToBase64(ciphertext),
+      ),
+    ]);
+    // Optimistic update so the input stays in sync immediately.
+    if (type === "relative") {
+      editedRelativeTitle.value = value;
+    } else {
+      editedAbsoluteTitle.value = value;
+      // Also update the shared labels map used by breadcrumb/cards.
+      pathPageLabels.value = { ...pathPageLabels.value, [id]: value };
+    }
+  } catch {
+    // ignore encrypt failures
+  }
+}
+
 onMounted(() => {
   if (!isAuthenticated.value) {
     void router.replace({
@@ -419,12 +499,12 @@ onMounted(() => {
         <PagePropertiesCard
           v-if="!selectedNoteId && !selectedArrowId"
           :page-id="pageId"
-          :relative-title="pageLabels[pageId]"
-          :absolute-title="pageLabels[pageId]"
+          :relative-title="currentPageRelativeTitle"
+          :absolute-title="currentPageAbsoluteTitle"
           :is-favorite="isFavorite"
           :read-only="cryptoError !== null"
-          @update:relative-title="() => {}"
-          @update:absolute-title="() => {}"
+          @update:relative-title="updatePageTitle('relative', $event)"
+          @update:absolute-title="updatePageTitle('absolute', $event)"
           @toggle-favorite="toggleFavorite()"
         />
 

new-deepnotes/apps/web/src/features/realtime/realtime-user-ws.ts

@@ -294,3 +294,15 @@ export function buildRealtimeUnsubscribe(
     args: [prefix, suffix, field],
   };
 }
+
+export function buildRealtimeHset(
+  prefix: string,
+  suffix: string,
+  field: string,
+  value: unknown,
+): RealtimeClientCommand {
+  return {
+    type: RealtimeCommandType.HSET,
+    args: [prefix, suffix, field, value],
+  };
+}