chore: add dayjs to fix datetime format in safari

web/package.json

@@ -16,6 +16,7 @@
     "@reduxjs/toolkit": "^2.2.3",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
+    "dayjs": "^1.11.11",
     "fuse.js": "^7.0.0",
     "highlight.js": "^11.9.0",
     "i18next": "^23.11.3",

web/src/components/HomeSidebar/TagsSection.tsx

@@ -44,11 +44,14 @@ const TagsSection = () => {
 
   return (
     <div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
-      <div className="flex flex-row justify-between items-center w-full mb-1">
+      <div className="flex flex-row justify-start items-center w-full gap-1 mb-1">
         <span className="text-sm leading-6 font-mono text-gray-400 select-none">{t("common.tags")}</span>
         <div>
           <Tooltip title={"Rebuild"} placement="top">
-            <Icon.RefreshCcw className="text-gray-400 w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleRebuildMemoTags} />
+            <Icon.RefreshCcw
+              className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
+              onClick={handleRebuildMemoTags}
+            />
           </Tooltip>
         </div>
       </div>

web/src/components/MemoView.tsx

@@ -22,6 +22,7 @@ import VisibilityIcon from "./VisibilityIcon";
 
 interface Props {
   memo: Memo;
+  displayTimeFormat?: "auto" | "time";
   compact?: boolean;
   showCreator?: boolean;
   showVisibility?: boolean;
@@ -70,6 +71,13 @@ const MemoView: React.FC<Props> = (props: Props) => {
     }
   }, []);
 
+  const displayTime =
+    props.displayTimeFormat === "time" ? (
+      memo.displayTime?.toLocaleTimeString()
+    ) : (
+      <relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
+    );
+
   return (
     <div
       className={clsx(
@@ -98,13 +106,13 @@ const MemoView: React.FC<Props> = (props: Props) => {
                   className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none"
                   onClick={handleGotoMemoDetailPage}
                 >
-                  <relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
+                  {displayTime}
                 </div>
               </div>
             </div>
           ) : (
             <div className="w-full text-sm leading-tight text-gray-400 dark:text-gray-500 select-none" onClick={handleGotoMemoDetailPage}>
-              <relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
+              {displayTime}
             </div>
           )}
         </div>

web/src/pages/Timeline.tsx

@@ -1,5 +1,6 @@
 import { Button, IconButton } from "@mui/joy";
 import clsx from "clsx";
+import dayjs from "dayjs";
 import { useEffect, useRef, useState } from "react";
 import ActivityCalendar from "@/components/ActivityCalendar";
 import Empty from "@/components/Empty";
@@ -31,7 +32,7 @@ const Timeline = () => {
   const [isRequesting, setIsRequesting] = useState(true);
   const nextPageTokenRef = useRef<string | undefined>(undefined);
   const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.displayTime) - getTimeStampByDate(b.displayTime));
-  const monthString = new Date(selectedDateString).getFullYear() + "-" + (new Date(selectedDateString).getMonth() + 1);
+  const monthString = dayjs(selectedDateString).format("YYYY-MM");
 
   useEffect(() => {
     setIsRequesting(true);
@@ -66,8 +67,7 @@ const Timeline = () => {
       setActivityStats(
         Object.fromEntries(
           Object.entries(stats).filter(([date]) => {
-            const d = new Date(date);
-            return `${d.getFullYear()}-${d.getMonth() + 1}` === monthString;
+            return dayjs(date).format("YYYY-MM") === monthString;
           }),
         ),
       );
@@ -139,7 +139,7 @@ const Timeline = () => {
                     <span className="font-medium text-3xl sm:text-4xl">
                       {new Date(selectedDateString).toLocaleDateString(i18n.language, { month: "short", day: "numeric" })}
                     </span>
-                    <span className="opacity-60 text-lg">{new Date(monthString).getFullYear()}</span>
+                    <span className="opacity-60 text-lg">{dayjs(monthString).year()}</span>
                   </div>
                   <ActivityCalendar
                     month={monthString}
@@ -155,7 +155,11 @@ const Timeline = () => {
                       key={`${memo.name}-${memo.displayTime}`}
                       className={clsx("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
                     >
-                      <MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
+                      <MemoView
+                        className="!border max-w-full !border-gray-100 dark:!border-zinc-700"
+                        memo={memo}
+                        displayTimeFormat="time"
+                      />
                       <div className="absolute -left-2 sm:left-2 top-4 h-full">
                         {index !== sortedMemos.length - 1 && (
                           <div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-200 dark:bg-gray-700 block"></div>