refactor: display doc.{updated,created} in local time (#1027)

* refactor: display doc.{updated,created} in local time

Previously, document created/updated times were displayed as raw
strings, and can be in UTC, which was not user-friendly.

This commit adds a helper function `formatDateToLocal()` that formats
date to a local time string, then uses it to unify the date formatting
in application and document details.

* chore: address review comments

src/components/Search/DocumentDetail.tsx

@@ -6,6 +6,7 @@ import { formatter } from "@/utils/index";
 import CommonIcon from "@/components/Common/Icons/CommonIcon";
 import defaultThumbnail from "@/assets/coconut-tree.png";
 import { RichCategories } from "./ListRight";
+import { formatDateToLocal } from "@/utils/date";
 
 interface DocumentDetailProps {
   document: any;
@@ -148,7 +149,7 @@ export const DocumentDetail: React.FC<DocumentDetailProps> = ({ document }) => {
         {document?.created && (
           <DetailItem
             label={t("search.document.createdAt")}
-            value={document.created}
+            value={formatDateToLocal(document.created)}
           />
         )}
 
@@ -180,7 +181,7 @@ export const DocumentDetail: React.FC<DocumentDetailProps> = ({ document }) => {
         {document?.updated && (
           <DetailItem
             label={t("search.document.updatedAt")}
-            value={document?.updated || "-"}
+            value={formatDateToLocal(document.updated)}
           />
         )}
 

src/components/Search/ExtensionDetail.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/button";
-import dayjs from "dayjs";
 import {
   CircleCheck,
   Download,
@@ -17,6 +16,7 @@ import { useSearchStore } from "@/stores/searchStore";
 import DeleteDialog from "../Common/DeleteDialog";
 import PreviewImage from "../Common/PreviewImage";
 import platformAdapter from "@/utils/platformAdapter";
+import { formatDateToLocal } from "@/utils/date";
 
 interface ExtensionDetailProps {
   onInstall: () => void;
@@ -226,7 +226,7 @@ const ExtensionDetail: FC<ExtensionDetailProps> = (props) => {
             {t("extensionDetail.label.lastUpdate")}
           </div>
           <p>
-            {dayjs(selectedExtension.updated).format("YYYY-MM-DD HH:mm:ss")}
+            {formatDateToLocal(selectedExtension.updated)}
           </p>
         </div>
 

src/components/Settings/Extensions/components/Details/Application/index.tsx

@@ -1,11 +1,11 @@
 import { useContext, useMemo, useState } from "react";
-import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import { useAsyncEffect } from "ahooks";
 
 import platformAdapter from "@/utils/platformAdapter";
 import { ExtensionsContext } from "../../../index";
 import { filesize } from "@/utils";
+import { formatDateToLocal } from "@/utils/date";
 
 interface Metadata {
   name: string;
@@ -62,15 +62,15 @@ const App = () => {
       },
       {
         label: t("settings.extensions.application.details.created"),
-        value: dayjs(created).format("YYYY/MM/DD HH:mm:ss"),
+        value: formatDateToLocal(created),
       },
       {
         label: t("settings.extensions.application.details.modified"),
-        value: dayjs(modified).format("YYYY/MM/DD HH:mm:ss"),
+        value: formatDateToLocal(modified),
       },
       {
         label: t("settings.extensions.application.details.lastOpened"),
-        value: dayjs(lastOpened).format("YYYY/MM/DD HH:mm:ss"),
+        value: formatDateToLocal(lastOpened),
       },
     ];
   }, [appMetadata]);

src/utils/date.ts

@@ -0,0 +1,19 @@
+import dayjs from "dayjs";
+import type { ConfigType } from "dayjs";
+
+// Format "date" to local time. Fall back to "-" if it is invalid.
+export const formatDateToLocal = (date?: ConfigType) => {
+  const fallback = "-";
+
+  // Fall back if it is null/undefined/emptystr
+  if (date === null || date === undefined || date === "") return fallback;
+
+  const d = dayjs(date);
+
+  // Fall back if it is invalid
+  if (!d.isValid()) {
+    return fallback;
+  }
+
+  return d.format("YYYY/MM/DD HH:mm:ss");
+};