From 882a0a104055f96328bfe0e3391099437cc28e42 Mon Sep 17 00:00:00 2001 From: diondiondion Date: Mon, 15 Sep 2025 17:38:11 +0200 Subject: [PATCH] [Glitch] Fix logged-out quote menu UX, simplify Interaction dialog copy Port 38fa0102c111f1c0cff5a42eba6882ffae4ca109 to glitch-soc Signed-off-by: Claire --- .../glitch/components/follow_button.tsx | 1 - .../flavours/glitch/components/poll.tsx | 1 - .../glitch/components/status/boost_button.tsx | 46 +++++--- .../components/status/boost_button_utils.ts | 4 +- .../components/status_action_bar/index.jsx | 4 +- .../glitch/containers/status_container.js | 3 +- .../features/interaction_modal/index.tsx | 109 ++---------------- .../picture_in_picture/components/footer.tsx | 3 - .../flavours/glitch/features/status/index.jsx | 3 - .../flavours/glitch/styles/components.scss | 7 -- 10 files changed, 49 insertions(+), 132 deletions(-) diff --git a/app/javascript/flavours/glitch/components/follow_button.tsx b/app/javascript/flavours/glitch/components/follow_button.tsx index a7d6573bfa..e574b43b25 100644 --- a/app/javascript/flavours/glitch/components/follow_button.tsx +++ b/app/javascript/flavours/glitch/components/follow_button.tsx @@ -49,7 +49,6 @@ export const FollowButton: React.FC<{ openModal({ modalType: 'INTERACTION', modalProps: { - type: 'follow', accountId: accountId, url: account?.url, }, diff --git a/app/javascript/flavours/glitch/components/poll.tsx b/app/javascript/flavours/glitch/components/poll.tsx index c7de102a12..851d0f02f9 100644 --- a/app/javascript/flavours/glitch/components/poll.tsx +++ b/app/javascript/flavours/glitch/components/poll.tsx @@ -109,7 +109,6 @@ export const Poll: React.FC = ({ pollId, disabled, status }) => { openModal({ modalType: 'INTERACTION', modalProps: { - type: 'vote', accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, diff --git a/app/javascript/flavours/glitch/components/status/boost_button.tsx b/app/javascript/flavours/glitch/components/status/boost_button.tsx index 934d737015..7c3296e654 100644 --- a/app/javascript/flavours/glitch/components/status/boost_button.tsx +++ b/app/javascript/flavours/glitch/components/status/boost_button.tsx @@ -72,6 +72,18 @@ export const StatusBoostButton: FC = ({ const statusId = status.get('id') as string; const wasBoosted = !!status.get('reblogged'); + const showLoginPrompt = useCallback(() => { + dispatch( + openModal({ + modalType: 'INTERACTION', + modalProps: { + accountId: status.getIn(['account', 'id']), + url: status.get('uri'), + }, + }), + ); + }, [dispatch, status]); + const items = useMemo(() => { const boostItem = boostItemState(statusState); const quoteItem = quoteItemState(statusState); @@ -87,6 +99,8 @@ export const StatusBoostButton: FC = ({ action: (event) => { if (isLoggedIn) { dispatch(toggleReblog(statusId, event.shiftKey)); + } else { + showLoginPrompt(); } }, }, @@ -100,34 +114,37 @@ export const StatusBoostButton: FC = ({ action: () => { if (isLoggedIn) { dispatch(quoteComposeById(statusId)); + } else { + showLoginPrompt(); } }, }, ] satisfies [ActionMenuItemWithIcon, ActionMenuItemWithIcon]; - }, [dispatch, intl, isLoggedIn, statusId, statusState, wasBoosted]); + }, [ + dispatch, + intl, + isLoggedIn, + showLoginPrompt, + statusId, + statusState, + wasBoosted, + ]); const boostIcon = items[0].icon; const handleDropdownOpen = useCallback( (event: MouseEvent | KeyboardEvent) => { - if (!isLoggedIn) { - dispatch( - openModal({ - modalType: 'INTERACTION', - modalProps: { - type: 'reblog', - accountId: status.getIn(['account', 'id']), - url: status.get('uri'), - }, - }), - ); - } else if (event.shiftKey) { + if (event.shiftKey) { + if (!isLoggedIn) { + showLoginPrompt(); + return false; + } dispatch(toggleReblog(status.get('id'), true)); return false; } return true; }, - [dispatch, isLoggedIn, status], + [dispatch, isLoggedIn, showLoginPrompt, status], ); return ( @@ -223,7 +240,6 @@ export const LegacyReblogButton: FC = ({ openModal({ modalType: 'INTERACTION', modalProps: { - type: 'reblog', accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, diff --git a/app/javascript/flavours/glitch/components/status/boost_button_utils.ts b/app/javascript/flavours/glitch/components/status/boost_button_utils.ts index c752915f00..78e47d36ec 100644 --- a/app/javascript/flavours/glitch/components/status/boost_button_utils.ts +++ b/app/javascript/flavours/glitch/components/status/boost_button_utils.ts @@ -129,6 +129,7 @@ export function boostItemState({ } export function quoteItemState({ + isLoggedIn, isMine, isQuoteAutomaticallyAccepted, isQuoteManuallyAccepted, @@ -149,7 +150,8 @@ export function quoteItemState({ } else if (isQuoteManuallyAccepted) { iconText.title = messages.request_quote; iconText.meta = messages.quote_manual_review; - } else { + // We don't show the disabled state when logged out + } else if (isLoggedIn) { iconText.disabled = true; iconText.iconComponent = FormatQuoteOff; iconText.meta = isQuoteFollowersOnly diff --git a/app/javascript/flavours/glitch/components/status_action_bar/index.jsx b/app/javascript/flavours/glitch/components/status_action_bar/index.jsx index 812b36ee34..04585cb835 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar/index.jsx +++ b/app/javascript/flavours/glitch/components/status_action_bar/index.jsx @@ -119,7 +119,7 @@ class StatusActionBar extends ImmutablePureComponent { if (signedIn) { this.props.onReply(this.props.status); } else { - this.props.onInteractionModal('reply', this.props.status); + this.props.onInteractionModal(this.props.status); } }; @@ -137,7 +137,7 @@ class StatusActionBar extends ImmutablePureComponent { if (signedIn) { this.props.onFavourite(this.props.status, e); } else { - this.props.onInteractionModal('favourite', this.props.status); + this.props.onInteractionModal(this.props.status); } }; diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js index ca7b8b5529..ba98d6ddf7 100644 --- a/app/javascript/flavours/glitch/containers/status_container.js +++ b/app/javascript/flavours/glitch/containers/status_container.js @@ -232,11 +232,10 @@ const mapDispatchToProps = (dispatch, { contextType }) => ({ }); }, - onInteractionModal (type, status) { + onInteractionModal (status) { dispatch(openModal({ modalType: 'INTERACTION', modalProps: { - type, accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, diff --git a/app/javascript/flavours/glitch/features/interaction_modal/index.tsx b/app/javascript/flavours/glitch/features/interaction_modal/index.tsx index c66147a1c8..67497b58a6 100644 --- a/app/javascript/flavours/glitch/features/interaction_modal/index.tsx +++ b/app/javascript/flavours/glitch/features/interaction_modal/index.tsx @@ -7,15 +7,9 @@ import classNames from 'classnames'; import { escapeRegExp } from 'lodash'; import { useDebouncedCallback } from 'use-debounce'; -import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react'; -import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react'; -import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; -import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; -import StarIcon from '@/material-icons/400-24px/star.svg?react'; import { openModal, closeModal } from 'flavours/glitch/actions/modal'; import { apiRequest } from 'flavours/glitch/api'; import { Button } from 'flavours/glitch/components/button'; -import { Icon } from 'flavours/glitch/components/icon'; import { domain as localDomain, registrationsOpen, @@ -408,8 +402,7 @@ const LoginForm: React.FC<{ const InteractionModal: React.FC<{ accountId: string; url: string; - type: 'reply' | 'reblog' | 'favourite' | 'follow' | 'vote'; -}> = ({ accountId, url, type }) => { +}> = ({ accountId, url }) => { const dispatch = useAppDispatch(); const displayNameHtml = useAppSelector( (state) => state.accounts.get(accountId)?.display_name_html ?? '', @@ -437,93 +430,6 @@ const InteractionModal: React.FC<{ ); }, [dispatch]); - let title: React.ReactNode, - icon: React.ReactNode, - actionPrompt: React.ReactNode; - - switch (type) { - case 'reply': - icon = ; - title = ( - - ); - actionPrompt = ( - - ); - break; - case 'reblog': - icon = ; - title = ( - - ); - actionPrompt = ( - - ); - break; - case 'favourite': - icon = ; - title = ( - - ); - actionPrompt = ( - - ); - break; - case 'follow': - icon = ; - title = ( - - ); - actionPrompt = ( - - ); - break; - case 'vote': - icon = ; - title = ( - - ); - actionPrompt = ( - - ); - break; - } - let signupButton; if (sso_redirect) { @@ -559,9 +465,18 @@ const InteractionModal: React.FC<{

- {icon} {title} +

-

{actionPrompt}

+

+ +

diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.tsx b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.tsx index 4dadcf361d..d2d0f5a6a1 100644 --- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.tsx +++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.tsx @@ -99,7 +99,6 @@ export const Footer: React.FC<{ openModal({ modalType: 'INTERACTION', modalProps: { - type: 'reply', accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, @@ -121,7 +120,6 @@ export const Footer: React.FC<{ openModal({ modalType: 'INTERACTION', modalProps: { - type: 'favourite', accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, @@ -145,7 +143,6 @@ export const Footer: React.FC<{ openModal({ modalType: 'INTERACTION', modalProps: { - type: 'reblog', accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx index 0e3a1c193a..0a4df3990c 100644 --- a/app/javascript/flavours/glitch/features/status/index.jsx +++ b/app/javascript/flavours/glitch/features/status/index.jsx @@ -216,7 +216,6 @@ class Status extends ImmutablePureComponent { dispatch(openModal({ modalType: 'INTERACTION', modalProps: { - type: 'favourite', accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, @@ -246,7 +245,6 @@ class Status extends ImmutablePureComponent { dispatch(openModal({ modalType: 'INTERACTION', modalProps: { - type: 'reply', accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, @@ -264,7 +262,6 @@ class Status extends ImmutablePureComponent { dispatch(openModal({ modalType: 'INTERACTION', modalProps: { - type: 'reblog', accountId: status.getIn(['account', 'id']), url: status.get('uri'), }, diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 3bc38b0d51..7e009583fb 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -9842,13 +9842,6 @@ noscript { font-size: 14px; } - &__icon { - color: $highlight-text-color; - display: flex; - align-items: center; - justify-content: center; - } - &__lead { margin-bottom: 20px;