diff --git a/packages/pl-fe/src/columns/notifications.tsx b/packages/pl-fe/src/columns/notifications.tsx index 6a8a146c2..f6a257195 100644 --- a/packages/pl-fe/src/columns/notifications.tsx +++ b/packages/pl-fe/src/columns/notifications.tsx @@ -189,7 +189,7 @@ const NotificationsColumn = () => { const handleMoveDown = (id: string) => { const elementIndex = displayedNotifications.findIndex(item => item !== null && item.group_key === id) + 1; - selectChild(elementIndex, node); + selectChild(elementIndex, node, undefined, displayedNotifications.length); }; const handleDequeueNotifications = useCallback(() => { diff --git a/packages/pl-fe/src/columns/search.tsx b/packages/pl-fe/src/columns/search.tsx index 18decbeab..9b4f3f84b 100644 --- a/packages/pl-fe/src/columns/search.tsx +++ b/packages/pl-fe/src/columns/search.tsx @@ -54,7 +54,7 @@ const SearchColumn: React.FC = ({ type, query, accountId, multiCo if (!resultsIds) return; const elementIndex = getCurrentIndex(id) + 1; - selectChild(elementIndex, node, document.getElementById('search-results') || undefined); + selectChild(elementIndex, node, document.getElementById('search-results') || undefined, resultsIds.length); }; const handleLoadMore = () => activeQuery.fetchNextPage({ cancelRefetch: false }); diff --git a/packages/pl-fe/src/components/load-more.tsx b/packages/pl-fe/src/components/load-more.tsx index 14944eee8..4172a47b8 100644 --- a/packages/pl-fe/src/components/load-more.tsx +++ b/packages/pl-fe/src/components/load-more.tsx @@ -1,8 +1,7 @@ +import { clsx } from 'clsx'; import React from 'react'; import { FormattedMessage } from 'react-intl'; -import Button from 'pl-fe/components/ui/button'; - interface ILoadMore { onClick: React.MouseEventHandler; disabled?: boolean; @@ -16,9 +15,9 @@ const LoadMore: React.FC = ({ onClick, disabled, visible = true, clas } return ( - + ); }; diff --git a/packages/pl-fe/src/components/status-list.tsx b/packages/pl-fe/src/components/status-list.tsx index 6bae23a42..d418122a8 100644 --- a/packages/pl-fe/src/components/status-list.tsx +++ b/packages/pl-fe/src/components/status-list.tsx @@ -71,7 +71,7 @@ const StatusList: React.FC = ({ const handleMoveDown = (id: string, featured: boolean = false) => { const elementIndex = getCurrentStatusIndex(id, featured) + 1; - selectChild(elementIndex, node, document.getElementById('status-list') || undefined); + selectChild(elementIndex, node, document.getElementById('status-list') || undefined, scrollableContent.length); }; const handleLoadOlder = useCallback(debounce(() => { diff --git a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx index 64ef8be56..9ef86b1ea 100644 --- a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx +++ b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx @@ -29,7 +29,7 @@ const ConversationsList: React.FC = () => { const handleMoveDown = (id: string) => { const elementIndex = getCurrentIndex(id) + 1; - selectChild(elementIndex, ref, document.getElementById('direct-list') || undefined); + selectChild(elementIndex, ref, document.getElementById('direct-list') || undefined, conversations.length); }; const handleLoadOlder = debounce(() => { diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx index 952a5abd5..e8fd7abe5 100644 --- a/packages/pl-fe/src/features/status/components/thread.tsx +++ b/packages/pl-fe/src/features/status/components/thread.tsx @@ -254,15 +254,15 @@ const Thread = ({ const handleMoveDown = (id: string) => { const modalOffset = isModal ? 1 : 0; if (id === status.id) { - selectChild(statusIndex + 1 + modalOffset, scroller, node.current || undefined); + selectChild(statusIndex + 1 + modalOffset, scroller, node.current || undefined, thread.length + modalOffset); } else { let index = thread.indexOf(id); if (index === -1) { index = thread.indexOf(id); - selectChild(index + modalOffset, scroller, node.current || undefined); + selectChild(index + modalOffset, scroller, node.current || undefined, thread.length + modalOffset); } else { - selectChild(index + 1 + modalOffset, scroller, node.current || undefined); + selectChild(index + 1 + modalOffset, scroller, node.current || undefined, thread.length + modalOffset); } } }; diff --git a/packages/pl-fe/src/layouts/home-layout.tsx b/packages/pl-fe/src/layouts/home-layout.tsx index e0b002754..70c05e0de 100644 --- a/packages/pl-fe/src/layouts/home-layout.tsx +++ b/packages/pl-fe/src/layouts/home-layout.tsx @@ -3,7 +3,6 @@ import React, { useRef } from 'react'; import { useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import 'pl-fe/styles/new/timelines.scss'; import { uploadCompose } from 'pl-fe/actions/compose'; import Avatar from 'pl-fe/components/ui/avatar'; import Layout from 'pl-fe/components/ui/layout'; diff --git a/packages/pl-fe/src/pages/statuses/event-discussion.tsx b/packages/pl-fe/src/pages/statuses/event-discussion.tsx index 00be06399..0cd1a724b 100644 --- a/packages/pl-fe/src/pages/statuses/event-discussion.tsx +++ b/packages/pl-fe/src/pages/statuses/event-discussion.tsx @@ -66,7 +66,7 @@ const EventDiscussionPage: React.FC = ({ params: { statusId: s const handleMoveDown = (id: string) => { const index = descendantsIds.indexOf(id); - selectChild(index + 1, scroller, node.current || undefined); + selectChild(index + 1, scroller, node.current || undefined, descendantsIds.length); }; const renderTombstone = (id: string) => ( diff --git a/packages/pl-fe/src/styles/new/index.scss b/packages/pl-fe/src/styles/new/index.scss index dfee73307..25fe3c789 100644 --- a/packages/pl-fe/src/styles/new/index.scss +++ b/packages/pl-fe/src/styles/new/index.scss @@ -2,3 +2,4 @@ @use 'layout'; @use 'accounts'; @use 'statuses'; +@use 'timelines'; diff --git a/packages/pl-fe/src/styles/new/timelines.scss b/packages/pl-fe/src/styles/new/timelines.scss index 81ab913ff..f7a19d5f3 100644 --- a/packages/pl-fe/src/styles/new/timelines.scss +++ b/packages/pl-fe/src/styles/new/timelines.scss @@ -23,4 +23,8 @@ &__form { @apply w-full translate-y-0.5; } +} + +.⁂-load-more { + @include mixins.button($theme: primary, $block: true); } \ No newline at end of file diff --git a/packages/pl-fe/src/utils/scroll-utils.ts b/packages/pl-fe/src/utils/scroll-utils.ts index 9a302d0a4..752a5b523 100644 --- a/packages/pl-fe/src/utils/scroll-utils.ts +++ b/packages/pl-fe/src/utils/scroll-utils.ts @@ -1,7 +1,15 @@ import type React from 'react'; import type { VirtuosoHandle } from 'react-virtuoso'; -const selectChild = (index: number, handle: React.RefObject, node: ParentNode = document) => { +const selectChild = (index: number, handle: React.RefObject, node: ParentNode = document, count?: number) => { + if (count !== undefined && index === count) { + const loadMoreButton = node.querySelector('.⁂-load-more'); + if (loadMoreButton) { + loadMoreButton.focus({ preventScroll: false }); + return; + } + } + const selector = `[data-index="${index}"] .focusable`; const element = node.querySelector(selector);