feat: Timeline top is back.

3 files changed, 8 insertions, 1 deletions

diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index 07ca2924..d40f8e94 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -12,6 +12,7 @@ import TimelinePostListView from "./TimelinePostListView";
 export interface TimelineProps {
   className?: string;
   style?: React.CSSProperties;
+  top?: string | number;
   timelineName: string;
   reloadKey: number;
   onReload: () => void;
@@ -24,6 +25,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
     timelineName,
     className,
     style,
+    top,
     reloadKey,
     onReload,
     additionalPosts,
@@ -110,6 +112,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
       return (
         <TimelinePostListView
           posts={[...posts, ...(additionalPosts ?? [])]}
+          top={top}
           onReload={onReload}
         />
       );
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
index 7fcf2d52..7319d84d 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx
@@ -136,6 +136,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
           }}
         >
           <Timeline
+            top={40}
             timelineName={timeline.name}
             reloadKey={timelineReloadKey}
             onReload={reloadTimeline}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
index 961b4667..fe12b806 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
@@ -5,6 +5,7 @@ import { HttpTimelinePostInfo } from "@/http/timeline";
 
 import TimelinePostView from "./TimelinePostView";
 import TimelineDateLabel from "./TimelineDateLabel";
+import TimelineTop from "./TimelineTop";
 
 function dateEqual(left: Date, right: Date): boolean {
   return (
@@ -17,12 +18,13 @@ function dateEqual(left: Date, right: Date): boolean {
 export interface TimelinePostListViewProps {
   className?: string;
   style?: React.CSSProperties;
+  top?: string | number;
   posts: HttpTimelinePostInfo[];
   onReload: () => void;
 }
 
 const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
-  const { className, style, posts, onReload } = props;
+  const { className, style, top, posts, onReload } = props;
 
   const groupedPosts = React.useMemo<
     { date: Date; posts: (HttpTimelinePostInfo & { index: number })[] }[]
@@ -51,6 +53,7 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
 
   return (
     <div style={style} className={clsx("timeline", className)}>
+      {top && <TimelineTop height={top} />}
       {groupedPosts.map((group) => {
         return (
           <Fragment key={group.date.toDateString()}>