-
+
+
{rules.map(rule =>
diff --git a/app/javascript/flavours/glitch/components/avatar.tsx b/app/javascript/flavours/glitch/components/avatar.tsx
index c45c26981f8089..c8bf388d268d9b 100644
--- a/app/javascript/flavours/glitch/components/avatar.tsx
+++ b/app/javascript/flavours/glitch/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
+ {counter}
+
+ )}
diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
index 26c828fd64f96c..051ae6299a6f32 100644
--- a/app/javascript/flavours/glitch/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/dropdown_selector.tsx b/app/javascript/flavours/glitch/components/dropdown_selector.tsx
new file mode 100644
index 00000000000000..b86d2d0f808392
--- /dev/null
+++ b/app/javascript/flavours/glitch/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 (
+ @{account?.acct} }}
- />
- ),
- confirm: intl.formatMessage(messages.unfollow),
- onConfirm: () => {
- dispatch(unfollowAccount(accountId));
- },
- },
- }),
+ openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),
);
} else {
dispatch(followAccount(accountId));
}
- }, [dispatch, intl, accountId, relationship, account, signedIn]);
+ }, [dispatch, accountId, relationship, account, signedIn]);
let label;
diff --git a/app/javascript/flavours/glitch/components/hover_card_account.tsx b/app/javascript/flavours/glitch/components/hover_card_account.tsx
index 56f431a7867156..caec1a84b013b6 100644
--- a/app/javascript/flavours/glitch/components/hover_card_account.tsx
+++ b/app/javascript/flavours/glitch/components/hover_card_account.tsx
@@ -1,5 +1,7 @@
import { useEffect, forwardRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+
import classNames from 'classnames';
import { fetchAccount } from 'flavours/glitch/actions/accounts';
@@ -25,6 +27,11 @@ export const HoverCardAccount = forwardRef<
accountId ? state.accounts.get(accountId) : undefined,
);
+ const note = useAppSelector(
+ (state) =>
+ state.relationships.getIn([accountId, 'note']) as string | undefined,
+ );
+
useEffect(() => {
if (accountId && !account) {
dispatch(fetchAccount(accountId));
@@ -57,6 +64,17 @@ export const HoverCardAccount = forwardRef<
className='hover-card__bio'
/>
-
+ {items.map((item) => (
+
-
+ {item.icon && item.iconComponent && (
+ ++ )} + +
+ + {item.text} + {item.meta} ++ + {item.extra && ( +++ )} ++
+ ))}
+
-
+
-
+
+
+ - {note} +
diff --git a/app/javascript/flavours/glitch/components/hover_card_controller.tsx b/app/javascript/flavours/glitch/components/hover_card_controller.tsx
index 347dcd4f2f99a4..d2a636e939ca4b 100644
--- a/app/javascript/flavours/glitch/components/hover_card_controller.tsx
+++ b/app/javascript/flavours/glitch/components/hover_card_controller.tsx
@@ -43,6 +43,7 @@ export const HoverCardController: React.FC = () => {
useEffect(() => {
let isScrolling = false;
let currentAnchor: HTMLElement | null = null;
+ let currentTitle: string | null = null;
const open = (target: HTMLElement) => {
target.setAttribute('aria-describedby', 'hover-card');
@@ -75,6 +76,9 @@ export const HoverCardController: React.FC = () => {
currentAnchor?.removeAttribute('aria-describedby');
currentAnchor = target;
+ currentTitle = target.getAttribute('title');
+ target.removeAttribute('title');
+
setEnterTimeout(() => {
open(target);
}, enterDelay);
@@ -90,11 +94,20 @@ export const HoverCardController: React.FC = () => {
};
const handleMouseLeave = (e: MouseEvent) => {
+ const { target } = e;
+
if (!currentAnchor) {
return;
}
- if (e.target === currentAnchor || e.target === cardRef.current) {
+ if (
+ currentTitle &&
+ target instanceof HTMLElement &&
+ target === currentAnchor
+ )
+ target.setAttribute('title', currentTitle);
+
+ if (target === currentAnchor || target === cardRef.current) {
cancelEnterTimeout();
setLeaveTimeout(() => {
diff --git a/app/javascript/flavours/glitch/components/load_gap.tsx b/app/javascript/flavours/glitch/components/load_gap.tsx
index f0d15d37761030..1870185c2914d9 100644
--- a/app/javascript/flavours/glitch/components/load_gap.tsx
+++ b/app/javascript/flavours/glitch/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 (