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,44 +6,40 @@ 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",
-          !isEqual(value, originalValue) && "border-gray-300 dark:border-zinc-700",
-          "border",
-        )}
-        defaultValue={toLocalDateTimeString(value)}
-        onBlur={(e) => {
-          const inputValue = e.target.value;
-          if (inputValue) {
-            const date = new Date(inputValue);
-            if (!isNaN(date.getTime())) {
-              onChange(date);
-            } else {
-              toast.error("Invalid datetime format. Use format: 2023-12-31T23:59:59");
-              e.target.value = toLocalDateTimeString(value);
-            }
+    <input
+      type="text"
+      className={cn(
+        "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",
+      )}
+      defaultValue={toLocalDateTimeString(value)}
+      onBlur={(e) => {
+        const inputValue = e.target.value;
+        if (inputValue) {
+          const date = new Date(inputValue);
+          if (!isNaN(date.getTime())) {
+            onChange(date);
+          } else {
+            toast.error("Invalid datetime format. Use format: 2023-12-31T23:59:59");
+            e.target.value = toLocalDateTimeString(value);
           }
-        }}
-        placeholder="YYYY-MM-DDTHH:mm:ss"
-      />
-    </div>
+        }
+      }}
+      placeholder="YYYY-MM-DDTHH:mm:ss"
+    />
   );
 };
 

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">
-          {!isEqual(createTime, updateTime) && (
-            <DateTimeInput label="Updated" 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>
+          <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 items-center">
+            {!isEqual(createTime, updateTime) && (
+              <>
+                <span className="text-left">Updated</span>
+                <DateTimeInput value={updateTime} originalValue={originalUpdateTime} onChange={setUpdateTime} />
+              </>
+            )}
+            <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">