diff --git a/packages/pl-fe/src/components/status-list.tsx b/packages/pl-fe/src/components/status-list.tsx index da1af54bf..bc2735048 100644 --- a/packages/pl-fe/src/components/status-list.tsx +++ b/packages/pl-fe/src/components/status-list.tsx @@ -12,8 +12,28 @@ import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder import PendingStatus from 'pl-fe/features/ui/components/pending-status'; import { selectChild } from 'pl-fe/utils/scroll-utils'; +import Icon from './ui/icon'; + import type { VirtuosoHandle } from 'react-virtuoso'; +const SkipPinned: React.FC> = ({ onClick }) => { + return ( + + ); +}; + interface IStatusList extends Omit { /** Unique key to preserve the scroll position when navigating back. */ scrollKey: string; @@ -81,6 +101,14 @@ const StatusList: React.FC = ({ } }, 300, { leading: true }), [onLoadMore, lastStatusId, statusIds.at(-1)]); + const handleSkipPinned = () => { + const skipPinned = () => selectChild(getFeaturedStatusCount(), node, document.getElementById('status-list') || undefined, scrollableContent.length, 'start'); + + skipPinned(); + + setTimeout(() => skipPinned, 0); + }; + const renderLoadGap = (index: number) => { const ids = statusIds; const nextId = ids[index + 1]; @@ -188,20 +216,25 @@ const StatusList: React.FC = ({ } return ( - } - placeholderCount={20} - ref={node} - listClassName={clsx('divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800', className)} - {...other} - > - {scrollableContent} - + <> + {featuredStatusIds && featuredStatusIds.length > 3 && statusIds.length > 0 && ( + + )} + } + placeholderCount={20} + ref={node} + listClassName={clsx('divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800', className)} + {...other} + > + {scrollableContent} + + ); }; diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 8fe91f999..cecdaac15 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -1744,6 +1744,7 @@ "status.show_less_all": "Show less for all", "status.show_more_all": "Show more for all", "status.show_original": "Show original", + "status.skip_pinned": "Skip pinned posts", "status.spoiler.collapse": "Collapse", "status.spoiler.expand": "Expand", "status.thread.expand_all": "Expand all posts", diff --git a/packages/pl-fe/src/utils/scroll-utils.ts b/packages/pl-fe/src/utils/scroll-utils.ts index 752a5b523..dfb8b6671 100644 --- a/packages/pl-fe/src/utils/scroll-utils.ts +++ b/packages/pl-fe/src/utils/scroll-utils.ts @@ -1,7 +1,7 @@ import type React from 'react'; import type { VirtuosoHandle } from 'react-virtuoso'; -const selectChild = (index: number, handle: React.RefObject, node: ParentNode = document, count?: number) => { +const selectChild = (index: number, handle: React.RefObject, node: ParentNode = document, count?: number, align?: 'start' | 'center' | 'end') => { if (count !== undefined && index === count) { const loadMoreButton = node.querySelector('.⁂-load-more'); if (loadMoreButton) { @@ -22,6 +22,7 @@ const selectChild = (index: number, handle: React.RefObject, nod done: () => { if (!element) document.querySelector(selector)?.focus(); }, + align, }); } };