core: support customizable monograph title

Signed-off-by: 01zulfi <[email protected]>

Author: 01zulfi

apps/web/src/components/publish-view/index.tsx

@@ -56,6 +56,7 @@ function PublishView(props: PublishViewProps) {
     current: number;
   }>();
   const passwordInput = useRef<HTMLInputElement>(null);
+  const titleInput = useRef<HTMLInputElement>(null);
   const publishNote = useStore((store) => store.publish);
   const unpublishNote = useStore((store) => store.unpublish);
   const [monograph, setMonograph] = useState(props.monograph);
@@ -125,6 +126,26 @@ function PublishView(props: PublishViewProps) {
           borderRadius: "default"
         }}
       >
+        <Flex
+          sx={{
+            alignItems: "center",
+            justifyContent: "space-between",
+            px: 1,
+            height: 30,
+
+            "& label": { width: "auto", flexShrink: 0 }
+          }}
+        >
+          <Text variant="body">{strings.title()} *</Text>
+          <Input
+            ref={titleInput}
+            type="text"
+            variant="clean"
+            placeholder={strings.enterTitle()}
+            defaultValue={monograph ? monograph.title : note.title}
+            sx={{ textAlign: "right", p: 0 }}
+          />
+        </Flex>
         {monograph?.publishedAt ? (
           <Flex
             sx={{
@@ -286,8 +307,14 @@ function PublishView(props: PublishViewProps) {
             try {
               setStatus({ action: "publish" });
               const password = passwordInput.current?.value;
+              const title = titleInput.current?.value;
+
+              if (!title || title.trim().length === 0) {
+                showToast("error", "Title cannot be empty.");
+                return;
+              }
 
-              await publishNote(note.id, {
+              await publishNote(note.id, title, {
                 selfDestruct,
                 password
               });
@@ -425,6 +452,7 @@ type ResolvedMonograph = {
   selfDestruct: boolean;
   publishedAt?: number;
   password?: string;
+  title: string;
 };
 
 async function resolveMonograph(
@@ -436,6 +464,7 @@ async function resolveMonograph(
     id: monographId,
     selfDestruct: !!monograph.selfDestruct,
     publishedAt: monograph.datePublished,
+    title: monograph.title,
     password: monograph.password
       ? await db.monographs.decryptPassword(monograph.password)
       : undefined

apps/web/src/stores/monograph-store.ts

@@ -33,8 +33,8 @@ class MonographStore extends BaseStore<MonographStore> {
     this.set({ monographs: grouping });
   };
 
-  publish = async (noteId: string, opts: PublishOptions) => {
-    const publishId = await db.monographs.publish(noteId, opts);
+  publish = async (noteId: string, title: string, opts: PublishOptions) => {
+    const publishId = await db.monographs.publish(noteId, title, opts);
     await this.get().refresh();
     await noteStore.refreshContext();
     return publishId;

packages/core/__e2e__/monographs.test.js

@@ -51,14 +51,14 @@ test(
       await login(db);
       await db.monographs.refresh();
 
-      const monographId = await db.monographs.publish(id);
+      const title = "mono";
+      const monographId = await db.monographs.publish(id, title);
 
       expect(await db.monographs.all.has(id)).toBeTruthy();
 
       const monograph = await db.monographs.get(monographId);
-      const note = await db.notes.note(id);
       expect(monograph.id).toBe(monographId);
-      expect(monograph.title).toBe(note.title);
+      expect(monograph.title).toBe(title);
 
       await logout(db);
     }),
@@ -72,14 +72,13 @@ test(
       await login(db);
       await db.monographs.refresh();
 
-      const monographId = await db.monographs.publish(id);
+      const title = "mono";
+      const monographId = await db.monographs.publish(id, title);
       let monograph = await db.monographs.get(monographId);
-      const note = await db.notes.note(id);
-      expect(monograph.title).toBe(note.title);
+      expect(monograph.title).toBe(title);
 
-      const editedTitle = "EDITED TITLE OF MY NOTE!";
-      await db.notes.add({ id, title: editedTitle });
-      await db.monographs.publish(id);
+      const editedTitle = "monograph";
+      await db.monographs.publish(id, editedTitle);
       monograph = await db.monographs.get(monographId);
       expect(monograph.title).toBe(editedTitle);
 

packages/core/src/api/monographs.ts

@@ -41,7 +41,10 @@ export type MonographAnalytics = {
   totalViews: number;
 };
 
-export type PublishOptions = { password?: string; selfDestruct?: boolean };
+export type PublishOptions = {
+  password?: string;
+  selfDestruct?: boolean;
+};
 export class Monographs {
   monographs: string[] = [];
   constructor(private readonly db: Database) {}
@@ -73,7 +76,9 @@ export class Monographs {
   /**
    * Publish a note as a monograph
    */
-  async publish(noteId: string, opts: PublishOptions = {}) {
+  async publish(noteId: string, title: string, opts: PublishOptions = {}) {
+    if (title === "") throw new Error("Title cannot be empty.");
+
     if (!this.monographs.length) await this.refresh();
 
     const update = !!this.isPublished(noteId);
@@ -102,7 +107,7 @@ export class Monographs {
     const monographPasswordsKey = await this.db.user.getMonographPasswordsKey();
     const monograph: MonographApiRequest = {
       id: noteId,
-      title: note.title,
+      title,
       userId: user.id,
       selfDestruct: opts.selfDestruct || false,
       ...(opts.password

packages/intl/locale/en.po

@@ -2576,6 +2576,10 @@ msgstr "Enter the gift code to redeem your subscription."
 msgid "Enter the recovery code to continue logging in"
 msgstr "Enter the recovery code to continue logging in"
 
+#: src/strings.ts:2613
+msgid "Enter title"
+msgstr "Enter title"
+
 #: src/strings.ts:1492
 msgid "Enter verification code sent to your new email"
 msgstr "Enter verification code sent to your new email"

packages/intl/locale/pseudo-LOCALE.po

@@ -2565,6 +2565,10 @@ msgstr ""
 msgid "Enter the recovery code to continue logging in"
 msgstr ""
 
+#: src/strings.ts:2613
+msgid "Enter title"
+msgstr ""
+
 #: src/strings.ts:1492
 msgid "Enter verification code sent to your new email"
 msgstr ""

packages/intl/src/strings.ts

@@ -2609,5 +2609,6 @@ Use this if changes from other devices are not appearing on this device. This wi
   views: () => t`Views`,
   clickToUpdate: () => t`Click to update`,
   noPassword: () => t`No password`,
-  publishToTheWeb: () => t`Publish to the web`
+  publishToTheWeb: () => t`Publish to the web`,
+  enterTitle: () => t`Enter title`
 };