+19 -11

src/components/CollectionsFeed/CollectionsFeed.js

Reviewed

··· 472 472 } else { 473 473 setSelectedCollections(prev => [...prev, collection]); 474 474 } 475 475 + // Reset display count when changing collections 476 476 + setDisplayCount(25); 475 477 // We don't need to manually refresh here since we added a useEffect hook 476 478 // that watches for changes to selectedCollections 477 479 }; ··· 479 481 // Select all collections 480 482 const selectAllCollections = () => { 481 483 setSelectedCollections([...collections]); 484 484 + // Reset display count when changing collections 485 485 + setDisplayCount(25); 482 486 // We don't need to manually refresh here since we added a useEffect hook 483 487 // that watches for changes to selectedCollections 484 488 }; ··· 486 490 // Deselect all collections 487 491 const deselectAllCollections = () => { 488 492 setSelectedCollections([]); 493 493 + // Reset display count 494 494 + setDisplayCount(25); 489 495 // No need to refresh as we'll show "no collections selected" message 490 496 }; 491 497 ··· 496 502 497 503 // Set a loading state but not for the chart 498 504 setLoading(true); 505 505 + 506 506 + // Reset display count to show only the first 25 records after refresh 507 507 + setDisplayCount(25); 499 508 500 509 try { 501 510 // Fetch just the most recent records for the feed display ··· 582 591 // First check if we already have more records locally that we can show 583 592 if (hasMoreRecordsLocally) { 584 593 console.log("Loading more records from local cache"); 585 585 - // Simply increase the number of displayed records 586 586 - const currentDisplayCount = filteredRecords.length; 594 594 + // Simply increase the display count by 25 more records 587 595 const nextBatchSize = 25; 588 588 - 589 589 - // Store the new count so our filteredRecords computation shows more records 590 590 - setRecords(prev => { 591 591 - // Create a dummy array of the right length to control how many records are shown 592 592 - return Array(currentDisplayCount + nextBatchSize).fill(null); 593 593 - }); 596 596 + setDisplayCount(prevCount => prevCount + nextBatchSize); 597 597 + console.log(`Increasing display count to ${displayCount + nextBatchSize}`); 594 598 595 599 setFetchingMore(false); 596 600 } ··· 602 606 603 607 if (collectionsToLoad.length > 0) { 604 608 await fetchCollectionRecords(did, serviceEndpoint, collectionsToLoad, true); 609 609 + // After fetching more, we can increase the display count to show them 610 610 + setDisplayCount(prevCount => prevCount + 25); 605 611 } else { 606 612 setFetchingMore(false); 607 613 } ··· 616 622 selectedCollections.includes(record.collection) 617 623 ); 618 624 619 619 - // For timeline display, directly use the chart records but limit to most recent 25 625 625 + // State to track how many records to display 626 626 + const [displayCount, setDisplayCount] = useState(25); 627 627 + 628 628 + // For timeline display, directly use the chart records but limit to the current displayCount 620 629 // This ensures we always show the most recent records for the selected collections 621 621 - // regardless of what was initially loaded in the records state 622 630 const filteredRecords = filteredChartRecords 623 631 .sort((a, b) => { 624 632 // Sort by timestamp (newest first) ··· 626 634 const bTime = useRkeyTimestamp ? b.rkeyTimestamp : b.contentTimestamp; 627 635 return new Date(bTime) - new Date(aTime); 628 636 }) 629 629 - .slice(0, fetchingMore ? records.length : 25); // Show 25 records initially, more when loading more 637 637 + .slice(0, displayCount); // Show based on displayCount state 630 638 631 639 // Check if more records can be loaded - either from API or from our existing dataset 632 640 const hasMoreRecordsLocally = filteredChartRecords.length > filteredRecords.length;

+21 -1

src/components/CollectionsFeed/FeedTimeline.css

Reviewed

··· 95 95 overflow: hidden; 96 96 text-overflow: ellipsis; 97 97 max-width: 100%; 98 98 + font-family: monospace; 99 99 + font-size: 0.8rem; 100 100 + background-color: var(--background); 101 101 + padding: 2px 6px; 102 102 + border-radius: 4px; 103 103 + color: var(--text); 104 104 + transition: background-color 0.2s, color 0.2s; 105 105 + } 106 106 + 107 107 + .compact-content:hover { 108 108 + background-color: var(--button-bg); 109 109 + color: white; 98 110 } 99 111 100 112 .compact-actions { ··· 631 643 632 644 .compact-content { 633 645 white-space: normal; 634 634 - word-break: break-word; 646 646 + word-break: break-all; 647 647 + display: inline-block; 648 648 + margin-top: 2px; 649 649 + } 650 650 + 651 651 + .compact-records-table td.content-col::before { 652 652 + content: "TID: "; 653 653 + font-weight: 600; 654 654 + opacity: 0.6; 635 655 } 636 656 }

+3 -12

src/components/CollectionsFeed/FeedTimeline.js

Reviewed

··· 254 254 <th className="collection-col">Collection</th> 255 255 <th className="time-col">Time</th> 256 256 <th className="type-col">Type</th> 257 257 - <th className="content-col">Content</th> 257 257 + <th className="content-col">TID/rkey</th> 258 258 <th className="actions-col">Actions</th> 259 259 </tr> 260 260 </thead> ··· 283 283 </span> 284 284 </td> 285 285 <td className="content-col"> 286 286 - <span className="compact-content" onClick={() => openModal(record)}> 287 287 - {content ? ( 288 288 - content.subjectUri ? ( 289 289 - <span className="record-link-compact" onClick={(e) => { 290 290 - e.stopPropagation(); 291 291 - fetchRelatedRecord(content.subjectUri); 292 292 - }}> 293 293 - {content.content} 294 294 - </span> 295 295 - ) : content.content 296 296 - ) : record.rkey} 286 286 + <span className="compact-content record-key-link" onClick={() => openModal(record)}> 287 287 + {record.rkey} 297 288 </span> 298 289 </td> 299 290 <td className="actions-col">