From ff9058e2221f792f22257a5582df6a163831ab4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Wed, 14 Aug 2024 16:52:11 +0200 Subject: [PATCH 1/7] Replace FAB with plus button in thumb nav, I need to remove one element to move the plus button to the center MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- src/actions/admin.ts | 1 - src/actions/compose.ts | 2 +- src/actions/groups.ts | 1 - src/actions/tags.ts | 1 - src/components/sidebar-menu.tsx | 12 +++++++ src/components/thumb-navigation.tsx | 36 +++++++++++++------ src/features/admin/announcements.tsx | 1 - src/features/bookmark-folders/index.tsx | 1 - .../compose/components/language-dropdown.tsx | 1 - .../compose/components/privacy-dropdown.tsx | 1 - src/features/mutes/index.tsx | 1 - .../manage-group-modal/steps/details-step.tsx | 1 - .../ui/components/panels/sign-up-panel.tsx | 1 - src/features/ui/index.tsx | 12 ------- src/pages/search-page.tsx | 1 - src/schemas/instance.ts | 1 - src/selectors/index.ts | 1 - 17 files changed, 39 insertions(+), 36 deletions(-) diff --git a/src/actions/admin.ts b/src/actions/admin.ts index 8017daa88..cddae896f 100644 --- a/src/actions/admin.ts +++ b/src/actions/admin.ts @@ -546,7 +546,6 @@ const expandUserIndex = () => }); }; - export { ADMIN_CONFIG_FETCH_REQUEST, ADMIN_CONFIG_FETCH_SUCCESS, diff --git a/src/actions/compose.ts b/src/actions/compose.ts index 5808dc345..15794b5fb 100644 --- a/src/actions/compose.ts +++ b/src/actions/compose.ts @@ -221,7 +221,7 @@ const cancelQuoteCompose = (composeId: string) => ({ id: composeId, }); -const groupComposeModal = (group: Group) => +const groupComposeModal = (group: Pick) => (dispatch: AppDispatch, getState: () => RootState) => { const composeId = `group:${group.id}`; diff --git a/src/actions/groups.ts b/src/actions/groups.ts index 9dc582b6b..f13fe1860 100644 --- a/src/actions/groups.ts +++ b/src/actions/groups.ts @@ -85,7 +85,6 @@ const groupUnblockFail = (groupId: string, accountId: string, error: unknown) => error, }); - export { GROUP_BLOCKS_FETCH_REQUEST, GROUP_BLOCKS_FETCH_SUCCESS, diff --git a/src/actions/tags.ts b/src/actions/tags.ts index 4cc4a1c96..196f939e6 100644 --- a/src/actions/tags.ts +++ b/src/actions/tags.ts @@ -160,7 +160,6 @@ const expandFollowedHashtagsFail = (error: unknown) => ({ error, }); - export { HASHTAG_FETCH_REQUEST, HASHTAG_FETCH_SUCCESS, diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx index 4ad63d01d..aecde264f 100644 --- a/src/components/sidebar-menu.tsx +++ b/src/components/sidebar-menu.tsx @@ -28,6 +28,7 @@ const messages = defineMessages({ groups: { id: 'column.groups', defaultMessage: 'Groups' }, events: { id: 'column.events', defaultMessage: 'Events' }, developers: { id: 'navigation.developers', defaultMessage: 'Developers' }, + dashboard: { id: 'navigation.dashboard', defaultMessage: 'Dashboard' }, drafts: { id: 'navigation.drafts', defaultMessage: 'Drafts' }, addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' }, followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, @@ -83,6 +84,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { const settings = useAppSelector((state) => getSettings(state)); const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count()); const draftCount = useAppSelector((state) => state.draft_statuses.size); + // const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count()); const [sidebarVisible, setSidebarVisible] = useState(sidebarOpen); const [touchStart, setTouchStart] = useState(0); const [touchEnd, setTouchEnd] = useState(0); @@ -338,6 +340,16 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { /> )} + {account.staff && ( + + )} + { const { account } = useOwnAccount(); const features = useFeatures(); + const match = useRouteMatch<{ groupId: string }>('/groups/:groupId'); + const { unreadChatsCount } = useStatContext(); const notificationCount = useAppSelector((state) => state.notifications.unread); - const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count()); - const onOpenSidebar = () => dispatch(openSidebar()); + const handleOpenSidebar = () => dispatch(openSidebar()); + + const handleOpenComposeModal = () => { + if (match?.params.groupId) { + dispatch((_, getState) => { + const group = getState().entities[Entities.GROUPS]?.store[match.params.groupId]; + if (group) dispatch(groupComposeModal(group)); + }); + } else { + dispatch(openModal('COMPOSE')); + } + }; /** Conditionally render the supported messages link */ const renderMessagesLink = (): React.ReactNode => { @@ -52,7 +68,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => { return (
- )}
); diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx index 92267ee07..aa1b71f7a 100644 --- a/src/features/admin/announcements.tsx +++ b/src/features/admin/announcements.tsx @@ -91,7 +91,6 @@ const Announcements: React.FC = () => { const { data: announcements, isLoading } = useAnnouncements(); - const handleCreateAnnouncement = () => { dispatch(openModal('EDIT_ANNOUNCEMENT')); }; diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx index 41defaa78..8dbf537e8 100644 --- a/src/features/bookmark-folders/index.tsx +++ b/src/features/bookmark-folders/index.tsx @@ -9,7 +9,6 @@ import { useFeatures } from 'soapbox/hooks'; import NewFolderForm from './components/new-folder-form'; - const messages = defineMessages({ heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' }, }); diff --git a/src/features/compose/components/language-dropdown.tsx b/src/features/compose/components/language-dropdown.tsx index f5f0e34df..2e650fa92 100644 --- a/src/features/compose/components/language-dropdown.tsx +++ b/src/features/compose/components/language-dropdown.tsx @@ -51,7 +51,6 @@ const LanguageDropdown: React.FC = ({ composeId }) => { const [isOpen, setIsOpen] = useState(false); const [searchValue, setSearchValue] = useState(''); - const { x, y, strategy, refs, middlewareData, placement } = useFloating({ placement: 'top', middleware: [ diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx index 19a0e3637..a194aac21 100644 --- a/src/features/compose/components/privacy-dropdown.tsx +++ b/src/features/compose/components/privacy-dropdown.tsx @@ -135,7 +135,6 @@ const PrivacyDropdownMenu: React.FC = ({ }; }, []); - return ( {({ opacity, scaleX, scaleY }) => ( diff --git a/src/features/mutes/index.tsx b/src/features/mutes/index.tsx index 4b5fb63fa..0a6e29e36 100644 --- a/src/features/mutes/index.tsx +++ b/src/features/mutes/index.tsx @@ -10,7 +10,6 @@ const messages = defineMessages({ heading: { id: 'column.mutes', defaultMessage: 'Mutes' }, }); - const Mutes: React.FC = () => { const intl = useIntl(); diff --git a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx index 2f5c1376e..99e4740cc 100644 --- a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx +++ b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx @@ -54,7 +54,6 @@ const DetailsStep: React.FC = ({ params, onChange }) => { const handleImageClear = (property: keyof CreateGroupParams) => () => onChange({ [property]: undefined }); - return (
diff --git a/src/features/ui/components/panels/sign-up-panel.tsx b/src/features/ui/components/panels/sign-up-panel.tsx index 8fac82c95..c7bb536cd 100644 --- a/src/features/ui/components/panels/sign-up-panel.tsx +++ b/src/features/ui/components/panels/sign-up-panel.tsx @@ -14,7 +14,6 @@ import { isStandalone } from 'soapbox/utils/state'; import type { PlfeResponse } from 'soapbox/api'; - const SignUpPanel = () => { const dispatch = useAppDispatch(); const instance = useInstance(); diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx index 7cbd68495..8b09cd6ec 100644 --- a/src/features/ui/index.tsx +++ b/src/features/ui/index.tsx @@ -39,7 +39,6 @@ import { getVapidKey } from 'soapbox/utils/auth'; import { isStandalone } from 'soapbox/utils/state'; import BackgroundShapes from './components/background-shapes'; -import FloatingActionButton from './components/floating-action-button'; import { Status, CommunityTimeline, @@ -450,11 +449,6 @@ const UI: React.FC = ({ children }) => { dispatch(registerPushNotifications()); }, [vapidKey]); - const shouldHideFAB = (): boolean => { - const path = location.pathname; - return Boolean(path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/)); - }; - // Wait for login to succeed or fail if (me === null) return null; @@ -484,12 +478,6 @@ const UI: React.FC = ({ children }) => { - {(me && !shouldHideFAB()) && ( -
- -
- )} - diff --git a/src/pages/search-page.tsx b/src/pages/search-page.tsx index 3b19e5761..362f3656c 100644 --- a/src/pages/search-page.tsx +++ b/src/pages/search-page.tsx @@ -42,7 +42,6 @@ const SearchPage: React.FC = ({ children }) => { )} - diff --git a/src/schemas/instance.ts b/src/schemas/instance.ts index a64b6c103..2800d80f9 100644 --- a/src/schemas/instance.ts +++ b/src/schemas/instance.ts @@ -80,7 +80,6 @@ const contactSchema = coerceObject({ email: z.string().email().catch(''), }); - const pleromaSchema = coerceObject({ metadata: coerceObject({ account_activation_required: z.boolean().catch(false), diff --git a/src/selectors/index.ts b/src/selectors/index.ts index a64df8773..50c6a213d 100644 --- a/src/selectors/index.ts +++ b/src/selectors/index.ts @@ -291,7 +291,6 @@ const getRemoteInstanceFederation = (state: RootState, host: string): HostFedera ) as HostFederation; }; - const makeGetHosts = () => createSelector([getSimplePolicy], (simplePolicy) => { const { accept, reject_deletes, report_removal, ...rest } = simplePolicy; From eae3465c21a59d000881587fa4e69c07ec24780c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Fri, 16 Aug 2024 09:21:34 +0200 Subject: [PATCH 2/7] Restyle sidebar menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- src/components/sidebar-menu.tsx | 23 +++-------------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx index aecde264f..d5de9b45e 100644 --- a/src/components/sidebar-menu.tsx +++ b/src/components/sidebar-menu.tsx @@ -9,7 +9,7 @@ import { getSettings } from 'soapbox/actions/settings'; import { closeSidebar } from 'soapbox/actions/sidebar'; import { useAccount } from 'soapbox/api/hooks'; import Account from 'soapbox/components/account'; -import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui'; +import { Stack, Divider, HStack, Icon, Text } from 'soapbox/components/ui'; import ProfileStats from 'soapbox/features/ui/components/profile-stats'; import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks'; import { makeGetOtherAccounts } from 'soapbox/selectors'; @@ -93,7 +93,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { const restrictUnauth = instance.pleroma.metadata.restrict_unauthenticated; const containerRef = React.useRef(null); - const closeButtonRef = React.useRef(null); const [switcher, setSwitcher] = React.useState(false); @@ -171,7 +170,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{
- -
{account ? ( @@ -439,13 +429,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
- - {/* Dummy element to keep Close Icon visible */} -
); From 0a1232f460762acfd51e2f88430a8843dfeba056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Fri, 16 Aug 2024 09:33:04 +0200 Subject: [PATCH 3/7] Change sidebar menu transition MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- src/components/sidebar-menu.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx index d5de9b45e..641412c20 100644 --- a/src/components/sidebar-menu.tsx +++ b/src/components/sidebar-menu.tsx @@ -149,6 +149,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { }, []); useEffect(() => { + if (sidebarOpen) containerRef.current?.querySelector('a')?.focus(); setTimeout(() => setSidebarVisible(sidebarOpen), sidebarOpen ? 0 : 150); }, [sidebarOpen]); @@ -183,8 +184,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
From d977b1539771fa1a13ae58f716565509745a1d48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Fri, 16 Aug 2024 09:34:50 +0200 Subject: [PATCH 4/7] SidebarMenu: support RTL MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- src/components/sidebar-menu.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx index 641412c20..35b74ef83 100644 --- a/src/components/sidebar-menu.tsx +++ b/src/components/sidebar-menu.tsx @@ -183,8 +183,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { >
Date: Fri, 16 Aug 2024 09:47:21 +0200 Subject: [PATCH 5/7] SidebarMenu: use dvh for menu height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- src/components/sidebar-menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx index 35b74ef83..0fd14418f 100644 --- a/src/components/sidebar-menu.tsx +++ b/src/components/sidebar-menu.tsx @@ -183,7 +183,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { >
Date: Fri, 16 Aug 2024 12:12:00 +0200 Subject: [PATCH 6/7] Animate dropdown menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../dropdown-menu/dropdown-menu.tsx | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx index 3268cb106..50f5c1de8 100644 --- a/src/components/dropdown-menu/dropdown-menu.tsx +++ b/src/components/dropdown-menu/dropdown-menu.tsx @@ -50,6 +50,7 @@ const DropdownMenu = (props: IDropdownMenu) => { const history = useHistory(); const [isOpen, setIsOpen] = useState(false); + const [isDisplayed, setIsDisplayed] = useState(false); const arrowRef = useRef(null); @@ -254,12 +255,18 @@ const DropdownMenu = (props: IDropdownMenu) => { } }, [isOpen, refs.floating.current]); + useEffect(() => { + setTimeout(() => setIsDisplayed(isOpen), isOpen ? 0 : 150); + }, [isOpen]); + if (items.length === 0) { return null; } const autoFocus = !items.some((item) => item?.active); + console.log(placement); + return ( <> {children ? ( @@ -284,14 +291,23 @@ const DropdownMenu = (props: IDropdownMenu) => { /> )} - {isOpen ? ( + {isOpen || isDisplayed ? (
Date: Fri, 16 Aug 2024 12:14:11 +0200 Subject: [PATCH 7/7] Style improvement MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- src/components/dropdown-menu/dropdown-menu.tsx | 2 -- src/components/status-action-button.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx index 50f5c1de8..528044066 100644 --- a/src/components/dropdown-menu/dropdown-menu.tsx +++ b/src/components/dropdown-menu/dropdown-menu.tsx @@ -265,8 +265,6 @@ const DropdownMenu = (props: IDropdownMenu) => { const autoFocus = !items.some((item) => item?.active); - console.log(placement); - return ( <> {children ? ( diff --git a/src/components/status-action-button.tsx b/src/components/status-action-button.tsx index fdb25db3e..c1fe7df02 100644 --- a/src/components/status-action-button.tsx +++ b/src/components/status-action-button.tsx @@ -89,7 +89,7 @@ const StatusActionButton = React.forwardRef