feat(timesheet): add tags management and responsive time tracking flows

src/components/InfiniteScroll.tsx

@@ -18,15 +18,28 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   loader,
 }) => {
   const observerTarget = useRef<HTMLDivElement>(null);
+  const onLoadMoreRef = useRef(onLoadMore);
+  const hasMoreRef = useRef(hasMore);
+  const isLoadingRef = useRef(isLoading);
+
+  useEffect(() => {
+    onLoadMoreRef.current = onLoadMore;
+    hasMoreRef.current = hasMore;
+    isLoadingRef.current = isLoading;
+  }, [onLoadMore, hasMore, isLoading]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
-        if (entries[0].isIntersecting && hasMore && !isLoading) {
-          onLoadMore();
+        if (entries[0].isIntersecting && hasMoreRef.current && !isLoadingRef.current) {
+          onLoadMoreRef.current();
         }
       },
-      { threshold: 0.1 }
+      { 
+        root: null, 
+        rootMargin: "200px",
+        threshold: 0 
+      }
     );
 
     if (observerTarget.current) {
@@ -34,12 +47,13 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
     }
 
     return () => observer.disconnect();
-  }, [hasMore, isLoading, onLoadMore]);
+  }, []);
 
   return (
     <div className={className}>
       {children}
-      {hasMore && <div ref={observerTarget} className="h-2 w-full" />}
+      <div ref={observerTarget} className={`h-4 w-full ${!hasMore ? 'hidden' : ''}`} />
+      
       {isLoading && (
         loader || (
           <div className="py-2 text-center text-xs text-slate-500 dark:text-slate-400">