From 46a085f8dff34cfe726aa00a643f596743b9ef11 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 9 May 2024 20:31:37 +0800
Subject: [PATCH] chore: add datepicker to timeline

---
 web/src/components/HomeSidebar/TagsSection.tsx |  4 ++--
 web/src/pages/Timeline.tsx                     | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx
index ebb1b898..496d3567 100644
--- a/web/src/components/HomeSidebar/TagsSection.tsx
+++ b/web/src/components/HomeSidebar/TagsSection.tsx
@@ -44,9 +44,9 @@ 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-start items-center w-full gap-1 mb-1">
+      <div className="group 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>
+        <div className="hidden group-hover:block">
           <Tooltip title={"Rebuild"} placement="top">
             <Icon.RefreshCcw
               className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx
index 71ddbdf0..1f6db517 100644
--- a/web/src/pages/Timeline.tsx
+++ b/web/src/pages/Timeline.tsx
@@ -133,12 +133,19 @@ const Timeline = () => {
             <div className="w-full h-auto flex flex-col justify-start items-start">
               <MemoFilter className="p-2 my-2 rounded-lg dark:bg-zinc-900" />
 
-              <div className={clsx("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
-                <div className={clsx("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2")}>
-                  <div className={clsx("w-full flex flex-col")}>
-                    <span className="font-medium text-3xl sm:text-4xl">
+              <div className="flex flex-col justify-start items-start w-full mt-2">
+                <div className="w-full flex shrink-0 flex-row justify-between pl-1 mt-1 mb-3">
+                  <div className="w-auto flex flex-col">
+                    <div className="relative font-medium text-3xl sm:text-4xl">
                       {new Date(selectedDateString).toLocaleDateString(i18n.language, { month: "short", day: "numeric" })}
-                    </span>
+                      <input
+                        className="inset-0 absolute z-1 opacity-0"
+                        type="date"
+                        defaultValue={dayjs(selectedDateString).format("YYYY-MM-DD")}
+                        onFocus={(e) => e.target.showPicker()}
+                        onChange={(e) => setSelectedDateString(e.target.value)}
+                      />
+                    </div>
                     <span className="opacity-60 text-lg">{dayjs(monthString).year()}</span>
                   </div>
                   <ActivityCalendar