From cce3f3d6da1da81de01b767f518f3b96dec86443 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 1 Feb 2024 14:37:04 +0100 Subject: [PATCH] [Glitch] Change onboarding prompt to follow suggestions carousel in web UI Port 9cdc60ecc6e5746b706bdcf19d0743d1c153105f to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/actions/suggestions.js | 9 +- .../flavours/glitch/actions/timelines.js | 21 ++ .../glitch/components/status_list.jsx | 51 +++-- .../components/explore_prompt.tsx | 46 ---- .../components/inline_follow_suggestions.jsx | 201 ++++++++++++++++++ .../glitch/features/home_timeline/index.jsx | 51 +---- .../ui/containers/status_list_container.js | 2 +- .../flavours/glitch/reducers/settings.js | 2 +- .../flavours/glitch/reducers/suggestions.js | 6 +- .../flavours/glitch/reducers/timelines.js | 31 ++- .../flavours/glitch/styles/components.scss | 196 +++++++++++++++++ .../glitch/styles/mastodon-light/diff.scss | 13 ++ 12 files changed, 496 insertions(+), 133 deletions(-) delete mode 100644 app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.tsx create mode 100644 app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx diff --git a/app/javascript/flavours/glitch/actions/suggestions.js b/app/javascript/flavours/glitch/actions/suggestions.js index 870a311024..8eafe38b21 100644 --- a/app/javascript/flavours/glitch/actions/suggestions.js +++ b/app/javascript/flavours/glitch/actions/suggestions.js @@ -54,12 +54,5 @@ export const dismissSuggestion = accountId => (dispatch, getState) => { id: accountId, }); - api(getState).delete(`/api/v1/suggestions/${accountId}`).then(() => { - dispatch(fetchSuggestionsRequest()); - - api(getState).get('/api/v2/suggestions').then(response => { - dispatch(importFetchedAccounts(response.data.map(x => x.account))); - dispatch(fetchSuggestionsSuccess(response.data)); - }).catch(error => dispatch(fetchSuggestionsFail(error))); - }).catch(() => {}); + api(getState).delete(`/api/v1/suggestions/${accountId}`).catch(() => {}); }; diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js index fa69bca985..980b4af66d 100644 --- a/app/javascript/flavours/glitch/actions/timelines.js +++ b/app/javascript/flavours/glitch/actions/timelines.js @@ -22,6 +22,10 @@ export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT'; export const TIMELINE_CONNECT = 'TIMELINE_CONNECT'; export const TIMELINE_MARK_AS_PARTIAL = 'TIMELINE_MARK_AS_PARTIAL'; +export const TIMELINE_INSERT = 'TIMELINE_INSERT'; + +export const TIMELINE_SUGGESTIONS = 'inline-follow-suggestions'; +export const TIMELINE_GAP = null; export const loadPending = timeline => ({ type: TIMELINE_LOAD_PENDING, @@ -123,9 +127,19 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) { api(getState).get(path, { params }).then(response => { const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedStatuses(response.data)); dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.status === 206, isLoadingRecent, isLoadingMore, isLoadingRecent && preferPendingItems)); + if (timelineId === 'home' && !isLoadingMore && !isLoadingRecent) { + const now = new Date(); + const fittingIndex = response.data.findIndex(status => now - (new Date(status.created_at)) > 4 * 3600 * 1000); + + if (fittingIndex !== -1) { + dispatch(insertIntoTimeline(timelineId, TIMELINE_SUGGESTIONS, Math.max(1, fittingIndex))); + } + } + if (timelineId === 'home') { dispatch(submitMarkers()); } @@ -233,3 +247,10 @@ export const markAsPartial = timeline => ({ type: TIMELINE_MARK_AS_PARTIAL, timeline, }); + +export const insertIntoTimeline = (timeline, key, index) => ({ + type: TIMELINE_INSERT, + timeline, + index, + key, +}); diff --git a/app/javascript/flavours/glitch/components/status_list.jsx b/app/javascript/flavours/glitch/components/status_list.jsx index 87825839e5..dde8bd9663 100644 --- a/app/javascript/flavours/glitch/components/status_list.jsx +++ b/app/javascript/flavours/glitch/components/status_list.jsx @@ -5,7 +5,9 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { debounce } from 'lodash'; +import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'flavours/glitch/actions/timelines'; import RegenerationIndicator from 'flavours/glitch/components/regeneration_indicator'; +import { InlineFollowSuggestions } from 'flavours/glitch/features/home_timeline/components/inline_follow_suggestions'; import StatusContainer from '../containers/status_container'; @@ -92,24 +94,37 @@ export default class StatusList extends ImmutablePureComponent { } let scrollableContent = (isLoading || statusIds.size > 0) ? ( - statusIds.map((statusId, index) => statusId === null ? ( - 0 ? statusIds.get(index - 1) : null} - onClick={onLoadMore} - /> - ) : ( - - )) + statusIds.map((statusId, index) => { + switch(statusId) { + case TIMELINE_SUGGESTIONS: + return ( + + ); + case TIMELINE_GAP: + return ( + 0 ? statusIds.get(index - 1) : null} + onClick={onLoadMore} + /> + ); + default: + return ( + + ); + } + }) ) : null; if (scrollableContent && featuredStatusIds) { diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.tsx b/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.tsx deleted file mode 100644 index 73ef8a5fe1..0000000000 --- a/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { FormattedMessage } from 'react-intl'; - -import { Link } from 'react-router-dom'; - -import background from '@/images/friends-cropped.png'; -import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner'; - -export const ExplorePrompt = () => ( - - - -

- -

-

- -

- -
-
- - - - - - -
-
- -); diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx new file mode 100644 index 0000000000..673b2d14d6 --- /dev/null +++ b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.jsx @@ -0,0 +1,201 @@ +import PropTypes from 'prop-types'; +import { useEffect, useCallback, useRef, useState } from 'react'; + +import { FormattedMessage, useIntl, defineMessages } from 'react-intl'; + +import { Link } from 'react-router-dom'; + +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { useDispatch, useSelector } from 'react-redux'; + +import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react'; +import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react'; +import CloseIcon from '@/material-icons/400-24px/close.svg?react'; +import InfoIcon from '@/material-icons/400-24px/info.svg?react'; +import { followAccount, unfollowAccount } from 'flavours/glitch/actions/accounts'; +import { changeSetting } from 'flavours/glitch/actions/settings'; +import { fetchSuggestions, dismissSuggestion } from 'flavours/glitch/actions/suggestions'; +import { Avatar } from 'flavours/glitch/components/avatar'; +import { Button } from 'flavours/glitch/components/button'; +import { DisplayName } from 'flavours/glitch/components/display_name'; +import { Icon } from 'flavours/glitch/components/icon'; +import { IconButton } from 'flavours/glitch/components/icon_button'; +import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; + +const messages = defineMessages({ + follow: { id: 'account.follow', defaultMessage: 'Follow' }, + unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, + previous: { id: 'lightbox.previous', defaultMessage: 'Previous' }, + next: { id: 'lightbox.next', defaultMessage: 'Next' }, + dismiss: { id: 'follow_suggestions.dismiss', defaultMessage: "Don't show again" }, +}); + +const Source = ({ id }) => { + let label; + + switch (id) { + case 'friends_of_friends': + case 'similar_to_recently_followed': + label = ; + break; + case 'featured': + label = ; + break; + case 'most_followed': + case 'most_interactions': + label = ; + break; + } + + return ( +
+ + {label} +
+ ); +}; + +Source.propTypes = { + id: PropTypes.oneOf(['friends_of_friends', 'similar_to_recently_followed', 'featured', 'most_followed', 'most_interactions']), +}; + +const Card = ({ id, source }) => { + const intl = useIntl(); + const account = useSelector(state => state.getIn(['accounts', id])); + const relationship = useSelector(state => state.getIn(['relationships', id])); + const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at')); + const dispatch = useDispatch(); + const following = relationship?.get('following') ?? relationship?.get('requested'); + + const handleFollow = useCallback(() => { + if (following) { + dispatch(unfollowAccount(id)); + } else { + dispatch(followAccount(id)); + } + }, [id, following, dispatch]); + + const handleDismiss = useCallback(() => { + dispatch(dismissSuggestion(id)); + }, [id, dispatch]); + + return ( +
+ + +
+ +
+ +
+ + {firstVerifiedField ? : } +
+ +
+ ); +}; + +Card.propTypes = { + id: PropTypes.string.isRequired, + source: ImmutablePropTypes.list, +}; + +const DISMISSIBLE_ID = 'home/follow-suggestions'; + +export const InlineFollowSuggestions = ({ hidden }) => { + const intl = useIntl(); + const dispatch = useDispatch(); + const suggestions = useSelector(state => state.getIn(['suggestions', 'items'])); + const isLoading = useSelector(state => state.getIn(['suggestions', 'isLoading'])); + const dismissed = useSelector(state => state.getIn(['settings', 'dismissed_banners', DISMISSIBLE_ID])); + const bodyRef = useRef(); + const [canScrollLeft, setCanScrollLeft] = useState(false); + const [canScrollRight, setCanScrollRight] = useState(true); + + useEffect(() => { + dispatch(fetchSuggestions()); + }, [dispatch]); + + useEffect(() => { + if (!bodyRef.current) { + return; + } + + setCanScrollLeft(bodyRef.current.scrollLeft > 0); + setCanScrollRight((bodyRef.current.scrollLeft + bodyRef.current.clientWidth) < bodyRef.current.scrollWidth); + }, [setCanScrollRight, setCanScrollLeft, bodyRef, suggestions]); + + const handleLeftNav = useCallback(() => { + bodyRef.current.scrollLeft -= 200; + }, [bodyRef]); + + const handleRightNav = useCallback(() => { + bodyRef.current.scrollLeft += 200; + }, [bodyRef]); + + const handleScroll = useCallback(() => { + if (!bodyRef.current) { + return; + } + + setCanScrollLeft(bodyRef.current.scrollLeft > 0); + setCanScrollRight((bodyRef.current.scrollLeft + bodyRef.current.clientWidth) < bodyRef.current.scrollWidth); + }, [setCanScrollRight, setCanScrollLeft, bodyRef]); + + const handleDismiss = useCallback(() => { + dispatch(changeSetting(['dismissed_banners', DISMISSIBLE_ID], true)); + }, [dispatch]); + + if (dismissed || (!isLoading && suggestions.isEmpty())) { + return null; + } + + if (hidden) { + return ( +
+ ); + } + + return ( +
+
+

+ +
+ + +
+
+ +
+
+ {suggestions.map(suggestion => ( + + ))} +
+ + {canScrollLeft && ( + + )} + + {canScrollRight && ( + + )} +
+
+ ); +}; + +InlineFollowSuggestions.propTypes = { + hidden: PropTypes.bool, +}; diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.jsx b/app/javascript/flavours/glitch/features/home_timeline/index.jsx index 093d8a7602..f383a6e48c 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/index.jsx +++ b/app/javascript/flavours/glitch/features/home_timeline/index.jsx @@ -6,8 +6,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { Helmet } from 'react-helmet'; -import { createSelector } from '@reduxjs/toolkit'; -import { List as ImmutableList } from 'immutable'; import { connect } from 'react-redux'; @@ -17,7 +15,7 @@ import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/act import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge'; import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator'; import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container'; -import { me, criticalUpdatesPending } from 'flavours/glitch/initial_state'; +import { criticalUpdatesPending } from 'flavours/glitch/initial_state'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import { expandHomeTimeline } from '../../actions/timelines'; @@ -27,7 +25,6 @@ import StatusListContainer from '../ui/containers/status_list_container'; import { ColumnSettings } from './components/column_settings'; import { CriticalUpdateBanner } from './components/critical_update_banner'; -import { ExplorePrompt } from './components/explore_prompt'; const messages = defineMessages({ title: { id: 'column.home', defaultMessage: 'Home' }, @@ -35,51 +32,12 @@ const messages = defineMessages({ hide_announcements: { id: 'home.hide_announcements', defaultMessage: 'Hide announcements' }, }); -const getHomeFeedSpeed = createSelector([ - state => state.getIn(['timelines', 'home', 'items'], ImmutableList()), - state => state.getIn(['timelines', 'home', 'pendingItems'], ImmutableList()), - state => state.get('statuses'), -], (statusIds, pendingStatusIds, statusMap) => { - const recentStatusIds = pendingStatusIds.concat(statusIds); - const statuses = recentStatusIds.filter(id => id !== null).map(id => statusMap.get(id)).filter(status => status?.get('account') !== me).take(20); - - if (statuses.isEmpty()) { - return { - gap: 0, - newest: new Date(0), - }; - } - - const datetimes = statuses.map(status => status.get('created_at', 0)); - const oldest = new Date(datetimes.min()); - const newest = new Date(datetimes.max()); - const averageGap = (newest - oldest) / (1000 * (statuses.size + 1)); // Average gap between posts on first page in seconds - - return { - gap: averageGap, - newest, - }; -}); - -const homeTooSlow = createSelector([ - state => state.getIn(['timelines', 'home', 'isLoading']), - state => state.getIn(['timelines', 'home', 'isPartial']), - getHomeFeedSpeed, -], (isLoading, isPartial, speed) => - !isLoading && !isPartial // Only if the home feed has finished loading - && ( - (speed.gap > (30 * 60) // If the average gap between posts is more than 30 minutes - || (Date.now() - speed.newest) > (1000 * 3600)) // If the most recent post is from over an hour ago - ) -); - const mapStateToProps = state => ({ hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0, isPartial: state.getIn(['timelines', 'home', 'isPartial']), hasAnnouncements: !state.getIn(['announcements', 'items']).isEmpty(), unreadAnnouncements: state.getIn(['announcements', 'items']).count(item => !item.get('read')), showAnnouncements: state.getIn(['announcements', 'show']), - tooSlow: homeTooSlow(state), regex: state.getIn(['settings', 'home', 'regex', 'body']), }); @@ -99,7 +57,6 @@ class HomeTimeline extends PureComponent { hasAnnouncements: PropTypes.bool, unreadAnnouncements: PropTypes.number, showAnnouncements: PropTypes.bool, - tooSlow: PropTypes.bool, regex: PropTypes.string, }; @@ -170,7 +127,7 @@ class HomeTimeline extends PureComponent { }; render () { - const { intl, hasUnread, columnId, multiColumn, tooSlow, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props; + const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props; const pinned = !!columnId; const { signedIn } = this.context.identity; const banners = []; @@ -194,10 +151,6 @@ class HomeTimeline extends PureComponent { banners.push(); } - if (tooSlow) { - banners.push(); - } - return ( createSelector([ getRegex, ], (columnSettings, statusIds, statuses, regex) => { return statusIds.filter(id => { - if (id === null) return true; + if (id === null || id === 'inline-follow-suggestions') return true; const statusForId = statuses.get(id); let showStatus = true; diff --git a/app/javascript/flavours/glitch/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js index a1b2434cdb..59b2e5dd40 100644 --- a/app/javascript/flavours/glitch/reducers/settings.js +++ b/app/javascript/flavours/glitch/reducers/settings.js @@ -114,7 +114,7 @@ const initialState = ImmutableMap({ dismissed_banners: ImmutableMap({ 'public_timeline': false, 'community_timeline': false, - 'home.explore_prompt': false, + 'home/follow-suggestions': false, 'explore/links': false, 'explore/statuses': false, 'explore/tags': false, diff --git a/app/javascript/flavours/glitch/reducers/suggestions.js b/app/javascript/flavours/glitch/reducers/suggestions.js index 03a7c80cf5..dc5dfc2455 100644 --- a/app/javascript/flavours/glitch/reducers/suggestions.js +++ b/app/javascript/flavours/glitch/reducers/suggestions.js @@ -28,12 +28,12 @@ export default function suggestionsReducer(state = initialState, action) { case SUGGESTIONS_FETCH_FAIL: return state.set('isLoading', false); case SUGGESTIONS_DISMISS: - return state.update('items', list => list.filterNot(x => x.account === action.id)); + return state.update('items', list => list.filterNot(x => x.get('account') === action.id)); case blockAccountSuccess.type: case muteAccountSuccess.type: - return state.update('items', list => list.filterNot(x => x.account === action.payload.relationship.id)); + return state.update('items', list => list.filterNot(x => x.get('account') === action.payload.relationship.id)); case blockDomainSuccess.type: - return state.update('items', list => list.filterNot(x => action.payload.accounts.includes(x.account))); + return state.update('items', list => list.filterNot(x => action.payload.accounts.includes(x.get('account')))); default: return state; } diff --git a/app/javascript/flavours/glitch/reducers/timelines.js b/app/javascript/flavours/glitch/reducers/timelines.js index 6ff83aa7f0..08c7a48336 100644 --- a/app/javascript/flavours/glitch/reducers/timelines.js +++ b/app/javascript/flavours/glitch/reducers/timelines.js @@ -17,6 +17,9 @@ import { TIMELINE_DISCONNECT, TIMELINE_LOAD_PENDING, TIMELINE_MARK_AS_PARTIAL, + TIMELINE_INSERT, + TIMELINE_GAP, + TIMELINE_SUGGESTIONS, } from '../actions/timelines'; import { compareId } from '../compare_id'; @@ -32,6 +35,8 @@ const initialTimeline = ImmutableMap({ items: ImmutableList(), }); +const isPlaceholder = value => value === TIMELINE_GAP || value === TIMELINE_SUGGESTIONS; + const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => { // This method is pretty tricky because: // - existing items in the timeline might be out of order @@ -63,20 +68,20 @@ const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, is // First, find the furthest (if properly sorted, oldest) item in the timeline that is // newer than the oldest fetched one, as it's most likely that it delimits the gap. // Start the gap *after* that item. - const lastIndex = oldIds.findLastIndex(id => id !== null && compareId(id, newIds.last()) >= 0) + 1; + const lastIndex = oldIds.findLastIndex(id => !isPlaceholder(id) && compareId(id, newIds.last()) >= 0) + 1; // Then, try to find the furthest (if properly sorted, oldest) item in the timeline that // is newer than the most recent fetched one, as it delimits a section comprised of only // items older or within `newIds` (or that were deleted from the server, so should be removed // anyway). // Stop the gap *after* that item. - const firstIndex = oldIds.take(lastIndex).findLastIndex(id => id !== null && compareId(id, newIds.first()) > 0) + 1; + const firstIndex = oldIds.take(lastIndex).findLastIndex(id => !isPlaceholder(id) && compareId(id, newIds.first()) > 0) + 1; let insertedIds = ImmutableOrderedSet(newIds).withMutations(insertedIds => { // It is possible, though unlikely, that the slice we are replacing contains items older // than the elements we got from the API. Get them and add them back at the back of the // slice. - const olderIds = oldIds.slice(firstIndex, lastIndex).filter(id => id !== null && compareId(id, newIds.last()) < 0); + const olderIds = oldIds.slice(firstIndex, lastIndex).filter(id => !isPlaceholder(id) && compareId(id, newIds.last()) < 0); insertedIds.union(olderIds); // Make sure we aren't inserting duplicates @@ -84,8 +89,8 @@ const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, is }).toList(); // Finally, insert a gap marker if the data is marked as partial by the server - if (isPartial && (firstIndex === 0 || oldIds.get(firstIndex - 1) !== null)) { - insertedIds = insertedIds.unshift(null); + if (isPartial && (firstIndex === 0 || oldIds.get(firstIndex - 1) !== TIMELINE_GAP)) { + insertedIds = insertedIds.unshift(TIMELINE_GAP); } return oldIds.take(firstIndex).concat( @@ -184,7 +189,7 @@ const reconnectTimeline = (state, usePendingItems) => { } return state.withMutations(mMap => { - mMap.update(usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items); + mMap.update(usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(TIMELINE_GAP) : items); mMap.set('online', true); }); }; @@ -219,7 +224,7 @@ export default function timelines(state = initialState, action) { return state.update( action.timeline, initialTimeline, - map => map.set('online', false).update(action.usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items), + map => map.set('online', false).update(action.usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(TIMELINE_GAP) : items), ); case TIMELINE_MARK_AS_PARTIAL: return state.update( @@ -227,6 +232,18 @@ export default function timelines(state = initialState, action) { initialTimeline, map => map.set('isPartial', true).set('items', ImmutableList()).set('pendingItems', ImmutableList()).set('unread', 0), ); + case TIMELINE_INSERT: + return state.update( + action.timeline, + initialTimeline, + map => map.update('items', ImmutableList(), list => { + if (!list.includes(action.key)) { + return list.insert(action.index, action.key); + } + + return list; + }) + ); default: return state; } diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index ac3e4c99e6..e9e78c9f6c 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -10048,3 +10048,199 @@ noscript { padding: 0; } } + +.inline-follow-suggestions { + display: flex; + flex-direction: column; + gap: 12px; + padding: 16px 0; + border-bottom: 1px solid mix($ui-base-color, $ui-highlight-color, 75%); + background: mix($ui-base-color, $ui-highlight-color, 95%); + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 16px; + + h3 { + font-size: 15px; + line-height: 22px; + font-weight: 500; + } + + &__actions { + display: flex; + align-items: center; + gap: 24px; + } + + .link-button { + font-size: 13px; + font-weight: 500; + } + } + + &__body { + position: relative; + + &__scroll-button { + position: absolute; + height: 100%; + background: transparent; + border: none; + cursor: pointer; + top: 0; + color: $primary-text-color; + + &.left { + left: 0; + } + + &.right { + right: 0; + } + + &__icon { + border-radius: 50%; + background: $ui-highlight-color; + display: flex; + align-items: center; + justify-content: center; + aspect-ratio: 1; + padding: 8px; + + .icon { + width: 24px; + height: 24px; + } + } + + &:hover, + &:focus, + &:active { + .inline-follow-suggestions__body__scroll-button__icon { + background: lighten($ui-highlight-color, 4%); + } + } + } + + &__scrollable { + display: flex; + flex-wrap: nowrap; + gap: 16px; + padding: 16px; + padding-bottom: 0; + scroll-snap-type: x mandatory; + scroll-padding: 16px; + scroll-behavior: smooth; + overflow-x: hidden; + + &__card { + background: darken($ui-base-color, 4%); + border: 1px solid lighten($ui-base-color, 8%); + border-radius: 4px; + display: flex; + flex-direction: column; + gap: 12px; + align-items: center; + padding: 12px; + scroll-snap-align: start; + flex: 0 0 auto; + width: 200px; + box-sizing: border-box; + position: relative; + + a { + text-decoration: none; + } + + & > .icon-button { + position: absolute; + inset-inline-end: 8px; + top: 8px; + } + + &__avatar { + height: 48px; + display: flex; + + a { + display: flex; + text-decoration: none; + } + } + + .account__avatar { + flex-shrink: 0; + align-self: flex-end; + border: 1px solid lighten($ui-base-color, 8%); + background-color: $ui-base-color; + } + + &__text-stack { + display: flex; + flex-direction: column; + gap: 4px; + align-items: center; + max-width: 100%; + + a { + max-width: 100%; + } + + &__source { + display: inline-flex; + align-items: center; + color: $dark-text-color; + gap: 4px; + overflow: hidden; + white-space: nowrap; + + > span { + overflow: hidden; + text-overflow: ellipsis; + } + + .icon { + width: 16px; + height: 16px; + } + } + } + + .display-name { + display: flex; + flex-direction: column; + gap: 4px; + align-items: center; + + & > * { + max-width: 100%; + } + + &__html { + font-size: 15px; + font-weight: 500; + color: $secondary-text-color; + } + + &__account { + font-size: 14px; + color: $darker-text-color; + } + } + + .verified-badge { + font-size: 14px; + max-width: 100%; + } + + .button { + display: block; + width: 100%; + } + } + } + } +} diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 1025a1bbaa..6bf4a1e488 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -648,3 +648,16 @@ html { .poll__option input[type='text'] { background: darken($ui-base-color, 10%); } + +.inline-follow-suggestions { + background-color: rgba($ui-highlight-color, 0.1); + border-bottom-color: rgba($ui-highlight-color, 0.3); +} + +.inline-follow-suggestions__body__scrollable__card { + background: $white; +} + +.inline-follow-suggestions__body__scroll-button__icon { + color: $white; +}