chore: tweak sidebar

web/src/components/DateTimeInput.tsx

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { isEqual } from "lodash-es";
 import toast from "react-hot-toast";
 import { cn } from "@/utils";
@@ -5,25 +6,22 @@ import { cn } from "@/utils";
 // Helper function to convert Date to local datetime string.
 const toLocalDateTimeString = (date: Date | undefined): string => {
   if (!date) return "";
-  return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -1);
+  return dayjs(date).format("YYYY-MM-DDTHH:mm:ss");
 };
 
 interface Props {
-  label: string;
   value: Date | undefined;
   originalValue: Date | undefined;
   onChange: (date: Date) => void;
 }
 
-const DateTimeInput: React.FC<Props> = ({ label, value, originalValue, onChange }) => {
+const DateTimeInput: React.FC<Props> = ({ value, originalValue, onChange }) => {
   return (
-    <div className="w-full flex items-center gap-2">
-      <span>{label}</span>
     <input
       type="text"
       className={cn(
-          "flex-1 px-1 bg-transparent rounded text-xs transition-all",
-          "border-transparent focus:border-gray-300 dark:focus:border-zinc-700",
+        "w-auto px-1 bg-transparent rounded text-xs transition-all",
+        "border-transparent outline-none focus:border-gray-300 dark:focus:border-zinc-700",
         !isEqual(value, originalValue) && "border-gray-300 dark:border-zinc-700",
         "border",
       )}
@@ -42,7 +40,6 @@ const DateTimeInput: React.FC<Props> = ({ label, value, originalValue, onChange
       }}
       placeholder="YYYY-MM-DDTHH:mm:ss"
     />
-    </div>
   );
 };
 

web/src/components/HomeSidebar/HomeSidebar.tsx

@@ -88,9 +88,9 @@ const HomeSidebar = observer((props: Props) => {
           </NavLink>
         ))}
       </div>
-      <MemoFilters />
       <div className="px-2 w-full">
         <StatisticsView />
+        <MemoFilters />
         {currentUser && <ShortcutsSection />}
         <TagsSection />
       </div>

web/src/components/MemoEditor/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@usememos/mui";
+import copy from "copy-to-clipboard";
 import { isEqual } from "lodash-es";
 import { LoaderIcon, SendIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
@@ -11,6 +12,7 @@ import { TAB_SPACE_WIDTH } from "@/helpers/consts";
 import { isValidUrl } from "@/helpers/utils";
 import useAsyncEffect from "@/hooks/useAsyncEffect";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import { extractMemoIdFromName } from "@/store/common";
 import { memoStore, resourceStore, userStore, workspaceStore } from "@/store/v2";
 import { Location, Memo, MemoRelation, MemoRelation_Type, Visibility } from "@/types/proto/api/v1/memo_service";
 import { Resource } from "@/types/proto/api/v1/resource_service";
@@ -547,13 +549,25 @@ const MemoEditor = observer((props: Props) => {
       {/* Show memo metadata if memoName is provided */}
       {memoName && (
         <div className="w-full mb-4 text-xs leading-5 px-4 opacity-60 font-mono text-gray-500 dark:text-zinc-500">
+          <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 items-center">
             {!isEqual(createTime, updateTime) && (
-            <DateTimeInput label="Updated" value={updateTime} originalValue={originalUpdateTime} onChange={setUpdateTime} />
+              <>
+                <span className="text-left">Updated</span>
+                <DateTimeInput value={updateTime} originalValue={originalUpdateTime} onChange={setUpdateTime} />
+              </>
             )}
-          <DateTimeInput label="Created" value={createTime} originalValue={originalCreateTime} onChange={setCreateTime} />
-          <div className="w-full flex items-center gap-2">
-            <span>ID:</span>
-            <span>{memoName}</span>
+            <span className="text-left">Created</span>
+            <DateTimeInput value={createTime} originalValue={originalCreateTime} onChange={setCreateTime} />
+            <span className="text-left">ID</span>
+            <span
+              className="px-1 border border-transparent cursor-default"
+              onClick={() => {
+                copy(extractMemoIdFromName(memoName));
+                toast.success(t("message.copied"));
+              }}
+            >
+              {extractMemoIdFromName(memoName)}
+            </span>
           </div>
         </div>
       )}

web/src/components/StatisticsView/MonthNavigator.tsx

@@ -17,7 +17,7 @@ export const MonthNavigator = ({ visibleMonth, onMonthChange }: MonthNavigatorPr
   return (
     <div className="w-full mb-1 flex flex-row justify-between items-center gap-1">
       <div className="relative text-sm inline-flex flex-row items-center w-auto gap-2 dark:text-gray-400">
-        <CalendarIcon className="w-4 h-4" />
+        <CalendarIcon className="w-4 h-auto opacity-70 ml-px" />
         {currentMonth.toLocaleString(i18n.language, { year: "numeric", month: "long" })}
       </div>
       <div className="flex justify-end items-center shrink-0 gap-1">

web/src/components/StatisticsView/StatisticsView.tsx

@@ -34,7 +34,7 @@ const StatisticsView = observer(() => {
   const hasPinnedMemos = currentUser && (userStore.state.currentUserStats?.pinnedMemos || []).length > 0;
 
   return (
-    <div className="group w-full mt-3 space-y-1 text-gray-500 dark:text-gray-400 animate-fade-in">
+    <div className="group w-full mt-2 space-y-1 text-zinc-600 dark:text-gray-400 animate-fade-in">
       <MonthNavigator visibleMonth={visibleMonthString} onMonthChange={setVisibleMonthString} />
 
       <div className="w-full animate-scale-in">