chore: improved auto scroll when switching posts 02dd2a04
Steve · 2025-11-01 22:00 2 file(s) · +14 −2
TODO.md +2 −1
6 6 
- [x] Order posts by newest first
7 7 
- [x] Instead of "by author" if Author is unavailable, use blog/feed name
8 8 
- [x] Add auto-find RSS feed when adding a feed
9 - 
- [ ] When scrolling through one feed and then selecting another, make the content scroll back to the top
9 + 
- [x] When scrolling through one feed and then selecting another, make the content scroll back to the top
10 10 
- [ ] Can't open add feed dialog when on mobile
11 11 
- [ ] Add error handling and checks for adding a feed
12 12 
- [ ] Add loading states for new feed
13 13 
- [ ] Find a way to paginate through feeds and get more posts if they only return a few
14 14 
- [ ] Collapse both side bars if desired?
15 15 
- [x] Update logo in top left
16 + 
- [ ] Marking Read and Unread
src/components/dashboard.tsx +12 −1
32 32 
	const [selectedPostId, setSelectedPostId] = React.useState<string | null>(
33 33 
		null,
34 34 
	);
35 + 
	const mainContentRef = React.useRef<HTMLDivElement>(null);
35 36 

            

            
            

                36
                37
                 
                
	const allFeeds = useQuery(allFeedsQuery);

            

            
            

                37
                38
                 
                
	const allPosts = useQuery(allPostsQuery);

            

            
        
            

            
            

                44
                45
                 
                
	const selectedPost = selectedPostId

            

            
            

                45
                46
                 
                
		? allPosts.find((p) => p.id === selectedPostId)

            

            
            

                46
                47
                 
                
		: null;

            

            
            

                
                48
                +
                

            

            
            

                
                49
                +
                
	// Scroll to top when a new post is selected

            

            
            

                
                50
                +
                
	React.useEffect(() => {

            

            
            

                
                51
                +
                
		if (selectedPostId && mainContentRef.current) {

            

            
            

                
                52
                +
                
			mainContentRef.current.scrollTo({ top: 0, behavior: "smooth" });

            

            
            

                
                53
                +
                
		}

            

            
            

                
                54
                +
                
	}, [selectedPostId]);

            

            
            

                47
                55
                 
                

            

            
            

                48
                56
                 
                
	// Get base URL from the post link to fix relative image paths

            

            
            

                49
                57
                 
                
	const getBaseUrl = React.useCallback((link: string | null) => {

            

            
        
            

            
            

                123
                131
                 
                
							</BreadcrumbList>

            

            
            

                124
                132
                 
                
						</Breadcrumb>

            

            
            

                125
                133
                 
                
					</header>

            

            
            

                126
                
                -
                
					<div className="h-full flex flex-1 flex-col gap-4 p-4 pb-12 overflow-y-auto">

            

            
            

                
                134
                +
                
					<div

            

            
            

                
                135
                +
                
						ref={mainContentRef}

            

            
            

                
                136
                +
                
						className="h-full flex flex-1 flex-col gap-4 p-4 pb-12 overflow-y-auto"

            

            
            

                
                137
                +
                
					>

            

            
            

                127
                138
                 
                
						{selectedPost ? (

            

            
            

                128
                139
                 
                
							<div className="flex flex-col gap-6 max-w-4xl mx-auto w-full pb-8">

            

            
            

                129
                140
                 
                
								<div className="flex flex-col gap-3">