From 000e2898124b133afccd6f1291ff8f86d0c3a514 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 8 Mar 2024 21:15:56 +0900
Subject: [PATCH] refs #4655 Go to top when clicking timeline title

---
 renderer/components/timelines/Notifications.tsx | 9 ++++++++-
 renderer/components/timelines/Timeline.tsx      | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/renderer/components/timelines/Notifications.tsx b/renderer/components/timelines/Notifications.tsx
index 21c94b2d..2193091b 100644
--- a/renderer/components/timelines/Notifications.tsx
+++ b/renderer/components/timelines/Notifications.tsx
@@ -173,11 +173,18 @@ export default function Notifications(props: Props) {
     return 'timeline'
   }
 
+  const backToTop = () => {
+    scrollerRef.current.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
   return (
     <div className="flex timeline-wrapper">
       <section className={`h-full ${timelineClass()}`}>
         <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
-          <div className="text-lg font-bold">
+          <div className="text-lg font-bold cursor-pointer" onClick={() => backToTop()}>
             <FormattedMessage id="timeline.notifications" />
           </div>
           <div className="w-64 text-xs text-right">
diff --git a/renderer/components/timelines/Timeline.tsx b/renderer/components/timelines/Timeline.tsx
index 3f3d31f5..676a3b94 100644
--- a/renderer/components/timelines/Timeline.tsx
+++ b/renderer/components/timelines/Timeline.tsx
@@ -204,11 +204,18 @@ export default function Timeline(props: Props) {
     return 'timeline'
   }
 
+  const backToTop = () => {
+    scrollerRef.current.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
   return (
     <div className="flex timeline-wrapper">
       <section className={`h-full ${timelineClass()}`}>
         <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
-          <div className="text-lg font-bold">
+          <div className="text-lg font-bold cursor-pointer" onClick={() => backToTop()}>
             {props.timeline.match(/list_(\d+)/) ? <>{list && list.title}</> : <FormattedMessage id={`timeline.${props.timeline}`} />}
           </div>
           <div className="w-64 text-xs">