- setRevealState("revealed")}
diff --git a/frontend/src/utils/dateFormat.test.ts b/frontend/src/utils/dateFormat.test.ts
index 3eedd91..98f8198 100644
--- a/frontend/src/utils/dateFormat.test.ts
+++ b/frontend/src/utils/dateFormat.test.ts
@@ -1,4 +1,5 @@
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { formatDate } from "../../../../../../../../../home/atom/Documents/code/pi_ku/frontend/src/utils/dateFormat";
import { formatRelativeDate } from "./dateFormat";
describe("formatRelativeDate", () => {
@@ -35,3 +36,11 @@ describe("formatRelativeDate", () => {
expect(result).toBe("Apr 1, 2026, 6:45 PM");
});
});
+
+describe("formatDate", () => {
+ it("should format a new date as mmm dd, yyyy", () => {
+ const result = formatDate("2026-04-01T10:15:00Z");
+
+ expect(result).toBe("April 1, 2026");
+ });
+});
diff --git a/frontend/src/utils/dateFormat.ts b/frontend/src/utils/dateFormat.ts
index 65b1779..fc72e4a 100644
--- a/frontend/src/utils/dateFormat.ts
+++ b/frontend/src/utils/dateFormat.ts
@@ -7,6 +7,10 @@ const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short",
});
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+ dateStyle: "long",
+});
+
const rtf = new Intl.RelativeTimeFormat("en-US", {
numeric: "auto",
});
@@ -50,3 +54,10 @@ export function formateRelativeDateWithoutTime(input: Date | string | number) {
return date.toDateString();
}
+
+export function formatDate(input: Date | string | number) {
+ if (!input) return "";
+ const date = new Date(input);
+
+ return dateFormatter.format(date);
+}
+
);
}
diff --git a/frontend/src/pages/Reader.tsx b/frontend/src/pages/Reader.tsx
index 0d7545d..a99f573 100644
--- a/frontend/src/pages/Reader.tsx
+++ b/frontend/src/pages/Reader.tsx
@@ -12,7 +12,7 @@ import { LogModal } from "../components/ui/LogModal";
import { endpoints } from "../config/endpoints";
import { useKeyStore } from "../store/useKeyStore";
import { CryptoUtils } from "../utils/crypto";
-import { formatRelativeDate } from "../utils/dateFormat";
+import { formatDate } from "../utils/dateFormat";
import {
decryptCanvasImages,
decryptCanvasImagesWithSharingKey,
@@ -215,10 +215,10 @@ export default function Reader() {
className={`transition-all duration-1000 relative ${revealState === "revealed" ? "opacity-0 w-0 h-0" : "opacity-100"}`}
>
+
+
-
-
-
+
+ 
flapCheckbox.current?.click()}
+ />
+
-
-
-
+
+
+
+
+
+
+
+
+ setIsFlipped((prev) => !prev)}
+ >
+
+ to
+
+ 
+
+ + {recipient} +
+{date}
+