From f6afec631b0881d264525ae5a0b7f7f791bea919 Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Tue, 18 Jun 2024 01:03:13 +0900
Subject: [PATCH] fix: use invisible marker to jump to top of column

Resolve #89
---
 src/components/column/LoadMore.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/column/LoadMore.tsx b/src/components/column/LoadMore.tsx
index c3d32da..2c832b7 100644
--- a/src/components/column/LoadMore.tsx
+++ b/src/components/column/LoadMore.tsx
@@ -26,7 +26,7 @@ export type UseLoadMore = {
   continuous: Accessor<boolean>;
   loadLatest: () => void;
   loadOld: () => void;
-  setLoadLatestRef: (el: HTMLButtonElement) => void;
+  setTopMarkerRef: (el: HTMLElement) => void;
 };
 
 export type LoadMoreProps = {
@@ -46,7 +46,7 @@ export const useLoadMore = (propsProvider: () => UseLoadMoreProps): UseLoadMore
   const [events, setEvents] = createSignal<NostrEvent[]>([]);
   const [since, setSince] = createSignal<number | undefined>(calcSince(epoch()));
   const [until, setUntil] = createSignal<number | undefined>();
-  const [loadLatestRef, setLoadLatestRef] = createSignal<HTMLButtonElement | undefined>();
+  const [topMarkerRef, setTopMarkerRef] = createSignal<HTMLElement | undefined>();
   const continuous = () => until() == null;
 
   const loadLatest = () => {
@@ -54,7 +54,7 @@ export const useLoadMore = (propsProvider: () => UseLoadMoreProps): UseLoadMore
       setUntil(undefined);
       setSince(calcSince(epoch()));
     });
-    loadLatestRef()?.scrollIntoView();
+    topMarkerRef()?.scrollIntoView();
   };
 
   const loadOld = () => {
@@ -64,7 +64,7 @@ export const useLoadMore = (propsProvider: () => UseLoadMoreProps): UseLoadMore
       setUntil(oldest.created_at);
       setSince(calcSince(oldest.created_at));
     });
-    loadLatestRef()?.scrollIntoView();
+    topMarkerRef()?.scrollIntoView();
   };
 
   return {
@@ -74,7 +74,7 @@ export const useLoadMore = (propsProvider: () => UseLoadMoreProps): UseLoadMore
     continuous,
     loadLatest,
     loadOld,
-    setLoadLatestRef,
+    setTopMarkerRef,
   };
 };
 
@@ -84,9 +84,9 @@ const LoadMore: Component<LoadMoreProps> = (props) => {
   return (
     <>
       <Show when={!props.loadMore.continuous()}>
+        <div class="none" ref={props.loadMore.setTopMarkerRef} />
         <ColumnItem>
           <button
-            ref={props.loadMore.setLoadLatestRef}
             class="flex h-12 w-full flex-col items-center justify-center hover:text-fg-secondary"
             onClick={() => props.loadMore.loadLatest()}
           >