web: show monograph's view count

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

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

@@ -45,6 +45,7 @@ function PublishView(props: PublishViewProps) {
   );
   const [isPasswordProtected, setIsPasswordProtected] = useState(false);
   const [selfDestruct, setSelfDestruct] = useState(false);
+  const [viewCount, setViewCount] = useState<number | undefined>();
   const [isPublishing, setIsPublishing] = useState(false);
   const [processingStatus, setProcessingStatus] = useState<{
     total?: number;
@@ -64,6 +65,7 @@ function PublishView(props: PublishViewProps) {
         setPublishId(monographId);
         setIsPasswordProtected(!!monograph.password);
         setSelfDestruct(!!monograph.selfDestruct);
+        setViewCount(monograph.viewCount);
 
         if (monograph.password) {
           const password = await db.monographs.decryptPassword(
@@ -140,12 +142,38 @@ function PublishView(props: PublishViewProps) {
                   overflow: "hidden"
                 }}
               >
-                <Text
-                  variant="body"
-                  sx={{ fontWeight: "bold", color: "paragraph" }}
+                <Flex
+                  sx={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  }}
                 >
-                  {strings.publishedAt()}
-                </Text>
+                  <Text
+                    variant="body"
+                    sx={{ fontWeight: "bold", color: "paragraph" }}
+                  >
+                    {strings.publishedAt()}
+                  </Text>
+                  {typeof viewCount === "number" && (
+                    <Text
+                      variant="subBody"
+                      sx={{
+                        bg: "var(--background-secondary)",
+                        color: "accent",
+                        px: 1,
+                        py: 0.7,
+                        borderRadius: "default",
+                        fontSize: "subBody",
+                        fontWeight: "bold",
+                        border: "1px solid",
+                        borderColor: "accent"
+                      }}
+                    >
+                      {strings.views(viewCount)}
+                    </Text>
+                  )}
+                </Flex>
                 <Flex
                   sx={{
                     bg: "var(--background-secondary)",

packages/core/src/collections/monographs.ts

@@ -62,6 +62,7 @@ export class Monographs implements ICollection {
       datePublished: merged.datePublished,
       selfDestruct: merged.selfDestruct,
       password: merged.password,
+      viewCount: merged.viewCount || 0,
       type: "monograph"
     });
   }

packages/core/src/database/migrations.ts

@@ -404,6 +404,14 @@ export class NNMigrationProvider implements MigrationProvider {
             .addColumn("password", "text")
             .execute();
         }
+      },
+      "a-2025-11-05": {
+        async up(db) {
+          await db.schema
+            .alterTable("monographs")
+            .addColumn("viewCount", "integer")
+            .execute();
+        }
       }
     };
   }

packages/core/src/types.ts

@@ -498,6 +498,7 @@ export interface Monograph extends BaseItem<"monograph"> {
   datePublished: number;
   selfDestruct: boolean;
   password?: Cipher<"base64">;
+  viewCount?: number;
 }
 
 export type Match = {

packages/intl/locale/en.po

@@ -96,6 +96,10 @@ msgstr "{count, plural, one {1 minute} other {# minutes}}"
 msgid "{count, plural, one {1 result} other {# results}}"
 msgstr "{count, plural, one {1 result} other {# results}}"
 
+#: src/strings.ts:2610
+msgid "{count, plural, one {1 view} other {# views}}"
+msgstr "{count, plural, one {1 view} other {# views}}"
+
 #: generated/action-confirmations.ts:32
 msgid "{count, plural, one {Are you sure you want to delete this attachment?} other {Are you sure you to delete these attachments?}}"
 msgstr "{count, plural, one {Are you sure you want to delete this attachment?} other {Are you sure you to delete these attachments?}}"

packages/intl/locale/pseudo-LOCALE.po

@@ -96,6 +96,10 @@ msgstr ""
 msgid "{count, plural, one {1 result} other {# results}}"
 msgstr ""
 
+#: src/strings.ts:2610
+msgid "{count, plural, one {1 view} other {# views}}"
+msgstr ""
+
 #: generated/action-confirmations.ts:32
 msgid "{count, plural, one {Are you sure you want to delete this attachment?} other {Are you sure you to delete these attachments?}}"
 msgstr ""

packages/intl/src/strings.ts

@@ -2605,5 +2605,10 @@ Use this if changes from other devices are not appearing on this device. This wi
   clickToDirectlyClaimPromo: () =>
     t`Click here to directly claim the promotion.`,
   loginToUploadAttachments: () =>
-    t`Login to upload attachments. [Read more](https://help.notesnook.com/faqs/login-to-upload-attachments)`
+    t`Login to upload attachments. [Read more](https://help.notesnook.com/faqs/login-to-upload-attachments)`,
+  views: (count: number) =>
+    plural(count, {
+      one: `1 view`,
+      other: `# views`
+    })
 };