This is my content! #hashtag
', ['hashtag'], diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 18a31cba244..265c68697ba 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -106,7 +106,7 @@ const Account = ({ size = 46, account, onFollow, onBlock, onMute, onMuteNotifica ); } else if (defaultAction === 'mute') { - buttons = ; + buttons = ; } else if (defaultAction === 'block') { buttons = ; } else if (!account.get('suspended') && !account.get('moved') || following) { @@ -131,7 +131,7 @@ const Account = ({ size = 46, account, onFollow, onBlock, onMute, onMuteNotifica return (
-
+
+
{rules.map(rule =>
diff --git a/app/javascript/mastodon/components/avatar.tsx b/app/javascript/mastodon/components/avatar.tsx
index 8f866a3c656..8b16296c2c0 100644
--- a/app/javascript/mastodon/components/avatar.tsx
+++ b/app/javascript/mastodon/components/avatar.tsx
@@ -11,6 +11,8 @@ interface Props {
style?: React.CSSProperties;
inline?: boolean;
animate?: boolean;
+ counter?: number | string;
+ counterBorderColor?: string;
}
export const Avatar: React.FC
+ {fields.take(limit).map((pair, i) => (
+
+ );
+};
diff --git a/app/javascript/mastodon/components/admin/ReportReasonSelector.jsx b/app/javascript/mastodon/components/admin/ReportReasonSelector.jsx
index cc05e5c163c..351f1c949ed 100644
--- a/app/javascript/mastodon/components/admin/ReportReasonSelector.jsx
+++ b/app/javascript/mastodon/components/admin/ReportReasonSelector.jsx
@@ -153,7 +153,7 @@ class ReportReasonSelector extends PureComponent {
-
+
+
+
-
+ {pair.get('verified_at') && (
+
+ )} + +
+
+ {counter}
+
+ )}
- {children}
-
- );
- }
-
- if (multiColumn && pinned) {
- pinButton = ;
-
- moveButtons = (
-
-
-
-
- );
- } else if (multiColumn && this.props.onPin) {
- pinButton = ;
- }
-
- if (history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
- backButton =
- {pinButton}
- {moveButtons}
-
- );
- }
-
- if (this.props.identity.signedIn && (children || (multiColumn && this.props.onPin))) {
- collapseButton = (
-
- );
- }
-
- const hasTitle = (icon || iconComponent) && title;
-
- const component = (
-
-
- {hasTitle && (
- <>
- {backButton}
-
-
-
- )}
-
- {!hasTitle && backButton}
-
-
-
-
- );
-
- if (placeholder) {
- return component;
- } else {
- return (
- {hasTitle && (
- <>
- {backButton}
-
-
-
- )}
-
- {!hasTitle && backButton}
-
-
- {extraButton}
- {collapseButton}
-
-
-
-
-
-
- {appendContent}
-
- {(!collapsed || animating) && collapsedContent}
-
-
+ {children}
+
+ );
+ }
+
+ if (multiColumn && pinned) {
+ pinButton = (
+
+ );
+
+ moveButtons = (
+
+
+
+
+ );
+ } else if (multiColumn && onPin) {
+ pinButton = (
+
+ );
+ }
+
+ if (
+ !pinned &&
+ ((multiColumn && history.location.state?.fromMastodon) || showBackButton)
+ ) {
+ backButton =
+ {pinButton}
+ {moveButtons}
+
,
+ );
+ }
+
+ if (signedIn && (children || (multiColumn && onPin))) {
+ collapseButton = (
+
+ );
+ }
+
+ const hasIcon = icon && iconComponent;
+ const hasTitle = hasIcon && title;
+
+ const component = (
+
+
+ {hasTitle && (
+ <>
+ {backButton}
+
+
+
+ )}
+
+ {!hasTitle && backButton}
+
+
+
+
+ );
+
+ if (placeholder) {
+ return component;
+ } else {
+ return
+ {hasTitle && (
+ <>
+ {backButton}
+
+
+
+ )}
+
+ {!hasTitle && backButton}
+
+
+ {extraButton}
+ {collapseButton}
+
+
+
+
+
+
+ {appendContent}
+
+ {(!collapsed || animating) && collapsedContent}
+
+
+
+
+
+
+ );
+};
diff --git a/app/javascript/mastodon/components/domain.tsx b/app/javascript/mastodon/components/domain.tsx
index ed5e8e7e4c2..aa64f0f8c3d 100644
--- a/app/javascript/mastodon/components/domain.tsx
+++ b/app/javascript/mastodon/components/domain.tsx
@@ -3,6 +3,8 @@ import { useCallback } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import LockOpenIcon from '@/material-icons/400-24px/lock_open.svg?react';
+import { unblockDomain } from 'mastodon/actions/domain_blocks';
+import { useAppDispatch } from 'mastodon/store';
import { IconButton } from './icon_button';
@@ -13,17 +15,15 @@ const messages = defineMessages({
},
});
-interface Props {
+export const Domain: React.FC<{
domain: string;
- onUnblockDomain: (domain: string) => void;
-}
-
-export const Domain: React.FC
diff --git a/app/javascript/mastodon/components/dropdown_menu.jsx b/app/javascript/mastodon/components/dropdown_menu.jsx
index 524dbb927b4..d731a8e2d1f 100644
--- a/app/javascript/mastodon/components/dropdown_menu.jsx
+++ b/app/javascript/mastodon/components/dropdown_menu.jsx
@@ -20,7 +20,7 @@ let id = 0;
class DropdownMenu extends PureComponent {
static propTypes = {
- items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
+ items: PropTypes.array.isRequired,
loading: PropTypes.bool,
scrollable: PropTypes.bool,
onClose: PropTypes.func.isRequired,
@@ -39,6 +39,7 @@ class DropdownMenu extends PureComponent {
if (this.node && !this.node.contains(e.target)) {
this.props.onClose();
e.stopPropagation();
+ e.preventDefault();
}
};
@@ -164,7 +165,7 @@ class Dropdown extends PureComponent {
children: PropTypes.node,
icon: PropTypes.string,
iconComponent: PropTypes.func,
- items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]),
+ items: PropTypes.array.isRequired,
loading: PropTypes.bool,
size: PropTypes.number,
title: PropTypes.string,
diff --git a/app/javascript/mastodon/components/dropdown_selector.tsx b/app/javascript/mastodon/components/dropdown_selector.tsx
new file mode 100644
index 00000000000..b86d2d0f808
--- /dev/null
+++ b/app/javascript/mastodon/components/dropdown_selector.tsx
@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { supportsPassiveEvents } from 'detect-passive-events';
+
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+
+import type { IconProp } from './icon';
+import { Icon } from './icon';
+
+const listenerOptions = supportsPassiveEvents
+ ? { passive: true, capture: true }
+ : true;
+
+export interface SelectItem {
+ value: string;
+ icon?: string;
+ iconComponent?: IconProp;
+ text: string;
+ meta: string;
+ extra?: string;
+}
+
+interface Props {
+ value: string;
+ classNamePrefix: string;
+ style?: React.CSSProperties;
+ items: SelectItem[];
+ onChange: (value: string) => void;
+ onClose: () => void;
+}
+
+export const DropdownSelector: React.FC = ({
+ style,
+ items,
+ value,
+ classNamePrefix = 'privacy-dropdown',
+ onClose,
+ onChange,
+}) => {
+ const nodeRef = useRef(null);
+ const focusedItemRef = useRef(null);
+ const [currentValue, setCurrentValue] = useState(value);
+
+ const handleDocumentClick = useCallback(
+ (e: MouseEvent | TouchEvent) => {
+ if (
+ nodeRef.current &&
+ e.target instanceof Node &&
+ !nodeRef.current.contains(e.target)
+ ) {
+ onClose();
+ e.stopPropagation();
+ }
+ },
+ [nodeRef, onClose],
+ );
+
+ const handleClick = useCallback(
+ (
+ e: React.MouseEvent | React.KeyboardEvent,
+ ) => {
+ const value = e.currentTarget.getAttribute('data-index');
+
+ e.preventDefault();
+
+ onClose();
+ if (value) onChange(value);
+ },
+ [onClose, onChange],
+ );
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ const value = e.currentTarget.getAttribute('data-index');
+ const index = items.findIndex((item) => item.value === value);
+
+ let element: Element | null | undefined = null;
+
+ switch (e.key) {
+ case 'Escape':
+ onClose();
+ break;
+ case ' ':
+ case 'Enter':
+ handleClick(e);
+ break;
+ case 'ArrowDown':
+ element =
+ nodeRef.current?.children[index + 1] ??
+ nodeRef.current?.firstElementChild;
+ break;
+ case 'ArrowUp':
+ element =
+ nodeRef.current?.children[index - 1] ??
+ nodeRef.current?.lastElementChild;
+ break;
+ case 'Tab':
+ if (e.shiftKey) {
+ element =
+ nodeRef.current?.children[index + 1] ??
+ nodeRef.current?.firstElementChild;
+ } else {
+ element =
+ nodeRef.current?.children[index - 1] ??
+ nodeRef.current?.lastElementChild;
+ }
+ break;
+ case 'Home':
+ element = nodeRef.current?.firstElementChild;
+ break;
+ case 'End':
+ element = nodeRef.current?.lastElementChild;
+ break;
+ }
+
+ if (element && element instanceof HTMLElement) {
+ const selectedValue = element.getAttribute('data-index');
+ element.focus();
+ if (selectedValue) setCurrentValue(selectedValue);
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ },
+ [nodeRef, items, onClose, handleClick, setCurrentValue],
+ );
+
+ useEffect(() => {
+ document.addEventListener('click', handleDocumentClick, { capture: true });
+ document.addEventListener('touchend', handleDocumentClick, listenerOptions);
+ focusedItemRef.current?.focus({ preventScroll: true });
+
+ return () => {
+ document.removeEventListener('click', handleDocumentClick, {
+ capture: true,
+ });
+ document.removeEventListener(
+ 'touchend',
+ handleDocumentClick,
+ listenerOptions,
+ );
+ };
+ }, [handleDocumentClick]);
+
+ return (
+
+
+);
diff --git a/app/javascript/mastodon/components/follow_button.tsx b/app/javascript/mastodon/components/follow_button.tsx
new file mode 100644
index 00000000000..46314af309f
--- /dev/null
+++ b/app/javascript/mastodon/components/follow_button.tsx
@@ -0,0 +1,109 @@
+import { useCallback, useEffect } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import { useIdentity } from '@/mastodon/identity_context';
+import { fetchRelationships, followAccount } from 'mastodon/actions/accounts';
+import { openModal } from 'mastodon/actions/modal';
+import { Button } from 'mastodon/components/button';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { me } from 'mastodon/initial_state';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+const messages = defineMessages({
+ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+ follow: { id: 'account.follow', defaultMessage: 'Follow' },
+ followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
+ mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
+ edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+});
+
+export const FollowButton: React.FC<{
+ accountId?: string;
+}> = ({ accountId }) => {
+ const intl = useIntl();
+ const dispatch = useAppDispatch();
+ const { signedIn } = useIdentity();
+ const account = useAppSelector((state) =>
+ accountId ? state.accounts.get(accountId) : undefined,
+ );
+ const relationship = useAppSelector((state) =>
+ accountId ? state.relationships.get(accountId) : undefined,
+ );
+ const following = relationship?.following || relationship?.requested;
+
+ useEffect(() => {
+ if (accountId && signedIn) {
+ dispatch(fetchRelationships([accountId]));
+ }
+ }, [dispatch, accountId, signedIn]);
+
+ const handleClick = useCallback(() => {
+ if (!signedIn) {
+ dispatch(
+ openModal({
+ modalType: 'INTERACTION',
+ modalProps: {
+ type: 'follow',
+ accountId: accountId,
+ url: account?.url,
+ },
+ }),
+ );
+ }
+
+ if (!relationship) return;
+
+ if (accountId === me) {
+ return;
+ } else if (account && (relationship.following || relationship.requested)) {
+ dispatch(
+ openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),
+ );
+ } else {
+ dispatch(followAccount(accountId));
+ }
+ }, [dispatch, accountId, relationship, account, signedIn]);
+
+ let label;
+
+ if (!signedIn) {
+ label = intl.formatMessage(messages.follow);
+ } else if (accountId === me) {
+ label = intl.formatMessage(messages.edit_profile);
+ } else if (!relationship) {
+ label = ();
+ const [anchor, setAnchor] = useState(null);
+ const cardRef = useRef(null);
+ const [setLeaveTimeout, cancelLeaveTimeout] = useTimeout();
+ const [setEnterTimeout, cancelEnterTimeout, delayEnterTimeout] = useTimeout();
+ const [setScrollTimeout] = useTimeout();
+ const location = useLocation();
+
+ const handleClose = useCallback(() => {
+ cancelEnterTimeout();
+ cancelLeaveTimeout();
+ setOpen(false);
+ setAnchor(null);
+ }, [cancelEnterTimeout, cancelLeaveTimeout, setOpen, setAnchor]);
+
+ useEffect(() => {
+ handleClose();
+ }, [handleClose, location]);
+
+ useEffect(() => {
+ let isScrolling = false;
+ let currentAnchor: HTMLElement | null = null;
+ let currentTitle: string | null = null;
+
+ const open = (target: HTMLElement) => {
+ target.setAttribute('aria-describedby', 'hover-card');
+ setOpen(true);
+ setAnchor(target);
+ setAccountId(target.getAttribute('data-hover-card-account') ?? undefined);
+ };
+
+ const close = () => {
+ currentAnchor?.removeAttribute('aria-describedby');
+ currentAnchor = null;
+ setOpen(false);
+ setAnchor(null);
+ setAccountId(undefined);
+ };
+
+ const handleMouseEnter = (e: MouseEvent) => {
+ const { target } = e;
+
+ // We've exited the window
+ if (!(target instanceof HTMLElement)) {
+ close();
+ return;
+ }
+
+ // We've entered an anchor
+ if (!isScrolling && isHoverCardAnchor(target)) {
+ cancelLeaveTimeout();
+
+ currentAnchor?.removeAttribute('aria-describedby');
+ currentAnchor = target;
+
+ currentTitle = target.getAttribute('title');
+ target.removeAttribute('title');
+
+ setEnterTimeout(() => {
+ open(target);
+ }, enterDelay);
+ }
+
+ // We've entered the hover card
+ if (
+ !isScrolling &&
+ (target === currentAnchor || target === cardRef.current)
+ ) {
+ cancelLeaveTimeout();
+ }
+ };
+
+ const handleMouseLeave = (e: MouseEvent) => {
+ const { target } = e;
+
+ if (!currentAnchor) {
+ return;
+ }
+
+ if (
+ currentTitle &&
+ target instanceof HTMLElement &&
+ target === currentAnchor
+ )
+ target.setAttribute('title', currentTitle);
+
+ if (target === currentAnchor || target === cardRef.current) {
+ cancelEnterTimeout();
+
+ setLeaveTimeout(() => {
+ close();
+ }, leaveDelay);
+ }
+ };
+
+ const handleScrollEnd = () => {
+ isScrolling = false;
+ };
+
+ const handleScroll = () => {
+ isScrolling = true;
+ cancelEnterTimeout();
+ setScrollTimeout(handleScrollEnd, 100);
+ };
+
+ const handleMouseMove = () => {
+ delayEnterTimeout(enterDelay);
+ };
+
+ document.body.addEventListener('mouseenter', handleMouseEnter, {
+ passive: true,
+ capture: true,
+ });
+
+ document.body.addEventListener('mousemove', handleMouseMove, {
+ passive: true,
+ capture: false,
+ });
+
+ document.body.addEventListener('mouseleave', handleMouseLeave, {
+ passive: true,
+ capture: true,
+ });
+
+ document.addEventListener('scroll', handleScroll, {
+ passive: true,
+ capture: true,
+ });
+
+ return () => {
+ document.body.removeEventListener('mouseenter', handleMouseEnter);
+ document.body.removeEventListener('mousemove', handleMouseMove);
+ document.body.removeEventListener('mouseleave', handleMouseLeave);
+ document.removeEventListener('scroll', handleScroll);
+ };
+ }, [
+ setEnterTimeout,
+ setLeaveTimeout,
+ setScrollTimeout,
+ cancelEnterTimeout,
+ cancelLeaveTimeout,
+ delayEnterTimeout,
+ setOpen,
+ setAccountId,
+ setAnchor,
+ ]);
+
+ return (
+
+ {({ props }) => (
+
+ );
+};
diff --git a/app/javascript/mastodon/components/load_gap.tsx b/app/javascript/mastodon/components/load_gap.tsx
index 1d4193a3595..544b5e1461b 100644
--- a/app/javascript/mastodon/components/load_gap.tsx
+++ b/app/javascript/mastodon/components/load_gap.tsx
@@ -9,18 +9,18 @@ const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
});
-interface Props {
+interface Props {
disabled: boolean;
- maxId: string;
- onClick: (maxId: string) => void;
+ param: T;
+ onClick: (params: T) => void;
}
-export const LoadGap: React.FC = ({ disabled, maxId, onClick }) => {
+export const LoadGap = ({ disabled, param, onClick }: Props) => {
const intl = useIntl();
const handleClick = useCallback(() => {
- onClick(maxId);
- }, [maxId, onClick]);
+ onClick(param);
+ }, [param, onClick]);
return (
);
- } else if (visible) {
- spoilerButton =
-
+ {items.map((item) => (
+
-
+ {item.icon && item.iconComponent && (
+ ++ )} + +
+ + {item.text} + {item.meta} ++ + {item.extra && ( +++ )} ++
+ ))}
+
+
+ {account ? (
+ <>
+
+
+ );
+});
+
+HoverCardAccount.displayName = 'HoverCardAccount';
diff --git a/app/javascript/mastodon/components/hover_card_controller.tsx b/app/javascript/mastodon/components/hover_card_controller.tsx
new file mode 100644
index 00000000000..057ef1aaed4
--- /dev/null
+++ b/app/javascript/mastodon/components/hover_card_controller.tsx
@@ -0,0 +1,189 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+import { useLocation } from 'react-router-dom';
+
+import Overlay from 'react-overlays/Overlay';
+import type {
+ OffsetValue,
+ UsePopperOptions,
+} from 'react-overlays/esm/usePopper';
+
+import { useTimeout } from 'mastodon/../hooks/useTimeout';
+import { HoverCardAccount } from 'mastodon/components/hover_card_account';
+
+const offset = [-12, 4] as OffsetValue;
+const enterDelay = 750;
+const leaveDelay = 150;
+const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
+
+const isHoverCardAnchor = (element: HTMLElement) =>
+ element.matches('[data-hover-card-account]');
+
+export const HoverCardController: React.FC = () => {
+ const [open, setOpen] = useState(false);
+ const [accountId, setAccountId] = useState
+
+
+ -
+
-
+
+
+ - {note} +
+
+
+
+
+ )}
+