From 9778ce203713e715a7d877e3bc109a77e39bbbca Mon Sep 17 00:00:00 2001
From: Huajin <114134574+xhuajin@users.noreply.github.com>
Date: Thu, 24 Oct 2024 08:50:23 +0800
Subject: [PATCH] feat: add horizontal scroll functionality to TimelineTabs
 (#1081)

Co-authored-by: xhuajin <xhuajin@users.noreply.github.com>
Co-authored-by: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
---
 .../modules/entry-column/layouts/TimelineTabs.tsx  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/renderer/src/modules/entry-column/layouts/TimelineTabs.tsx b/apps/renderer/src/modules/entry-column/layouts/TimelineTabs.tsx
index 33bcc3d77..07d4edc58 100644
--- a/apps/renderer/src/modules/entry-column/layouts/TimelineTabs.tsx
+++ b/apps/renderer/src/modules/entry-column/layouts/TimelineTabs.tsx
@@ -20,9 +20,15 @@ export const TimelineTabs = () => {
 
   const navigate = useNavigateEntry()
   if (!hasData) return null
+
+  const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.currentTarget.scrollLeft += e.deltaY
+  }
+
   return (
     <Tabs
-      className="-ml-3 -mr-4 mt-1 overflow-x-auto scrollbar-none"
+      className="-ml-3 -mr-4 mt-1 flex overflow-x-auto scrollbar-none"
       value={timeline}
       onValueChange={(val) => {
         if (!val) {
@@ -34,7 +40,7 @@ export const TimelineTabs = () => {
         }
       }}
     >
-      <TabsList className="h-10 border-b-0">
+      <TabsList className="h-10 justify-start overflow-hidden border-b-0" onWheel={handleWheel}>
         <TabsTrigger variant={"rounded"} className="p-0" value="">
           Yours
         </TabsTrigger>
@@ -44,7 +50,7 @@ export const TimelineTabs = () => {
               listId={s.listId!}
               view={view}
               iconSize={16}
-              className="h-5 !bg-transparent p-0 leading-none"
+              className="h-5 !bg-transparent p-0"
             />
           </TabsTrigger>
         ))}
@@ -54,7 +60,7 @@ export const TimelineTabs = () => {
               inboxId={s.inboxId!}
               view={view}
               iconSize={16}
-              className="h-5 !bg-transparent p-0 leading-none"
+              className="h-5 !bg-transparent p-0"
             />
           </TabsTrigger>
         ))}