Merge upstream changes up to 079d681ac6f279f3a7a6be5c3734549f3be8f912

app/helpers/application_helper.rb

@@ -116,7 +116,7 @@ def fa_icon(icon, attributes = {})
   def material_symbol(icon, attributes = {})
     inline_svg_tag(
       "400-24px/#{icon}.svg",
-      class: %w(icon).concat(attributes[:class].to_s.split),
+      class: ['icon', "material-#{icon}"].concat(attributes[:class].to_s.split),
       role: :img
     )
   end
@@ -127,23 +127,23 @@ def check_icon
 
   def visibility_icon(status)
     if status.public_visibility?
-      fa_icon('globe', title: I18n.t('statuses.visibilities.public'))
+      material_symbol('globe', title: I18n.t('statuses.visibilities.public'))
     elsif status.unlisted_visibility?
-      fa_icon('unlock', title: I18n.t('statuses.visibilities.unlisted'))
+      material_symbol('lock_open', title: I18n.t('statuses.visibilities.unlisted'))
     elsif status.private_visibility? || status.limited_visibility?
-      fa_icon('lock', title: I18n.t('statuses.visibilities.private'))
+      material_symbol('lock', title: I18n.t('statuses.visibilities.private'))
     elsif status.direct_visibility?
-      fa_icon('at', title: I18n.t('statuses.visibilities.direct'))
+      material_symbol('alternate_email', title: I18n.t('statuses.visibilities.direct'))
     end
   end
 
   def interrelationships_icon(relationships, account_id)
     if relationships.following[account_id] && relationships.followed_by[account_id]
-      fa_icon('exchange', title: I18n.t('relationships.mutual'), class: 'fa-fw active passive')
+      material_symbol('sync_alt', title: I18n.t('relationships.mutual'), class: 'active passive')
     elsif relationships.following[account_id]
-      fa_icon(locale_direction == 'ltr' ? 'arrow-right' : 'arrow-left', title: I18n.t('relationships.following'), class: 'fa-fw active')
+      material_symbol(locale_direction == 'ltr' ? 'arrow_right_alt' : 'arrow_left_alt', title: I18n.t('relationships.following'), class: 'active')
     elsif relationships.followed_by[account_id]
-      fa_icon(locale_direction == 'ltr' ? 'arrow-left' : 'arrow-right', title: I18n.t('relationships.followers'), class: 'fa-fw passive')
+      material_symbol(locale_direction == 'ltr' ? 'arrow_left_alt' : 'arrow_right_alt', title: I18n.t('relationships.followers'), class: 'passive')
     end
   end
 

app/helpers/statuses_helper.rb

@@ -60,13 +60,13 @@ def stream_link_target
   def fa_visibility_icon(status)
     case status.visibility
     when 'public'
-      fa_icon 'globe fw'
+      material_symbol 'globe'
     when 'unlisted'
-      fa_icon 'unlock fw'
+      material_symbol 'lock_open'
     when 'private'
-      fa_icon 'lock fw'
+      material_symbol 'lock'
     when 'direct'
-      fa_icon 'at fw'
+      material_symbol 'alternate_email'
     end
   end
 

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;
+
+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<Props> = ({
+  style,
+  items,
+  value,
+  classNamePrefix = 'privacy-dropdown',
+  onClose,
+  onChange,
+}) => {
+  const nodeRef = useRef<HTMLUListElement>(null);
+  const focusedItemRef = useRef<HTMLLIElement>(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<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>,
+    ) => {
+      const value = e.currentTarget.getAttribute('data-index');
+
+      e.preventDefault();
+
+      onClose();
+      if (value) onChange(value);
+    },
+    [onClose, onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLLIElement>) => {
+      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 (
+    <ul style={style} role='listbox' ref={nodeRef}>
+      {items.map((item) => (
+        <li
+          role='option'
+          tabIndex={0}
+          key={item.value}
+          data-index={item.value}
+          onKeyDown={handleKeyDown}
+          onClick={handleClick}
+          className={classNames(`${classNamePrefix}__option`, {
+            active: item.value === currentValue,
+          })}
+          aria-selected={item.value === currentValue}
+          ref={item.value === currentValue ? focusedItemRef : null}
+        >
+          {item.icon && item.iconComponent && (
+            <div className={`${classNamePrefix}__option__icon`}>
+              <Icon id={item.icon} icon={item.iconComponent} />
+            </div>
+          )}
+
+          <div className={`${classNamePrefix}__option__content`}>
+            <strong>{item.text}</strong>
+            {item.meta}
+          </div>
+
+          {item.extra && (
+            <div
+              className={`${classNamePrefix}__option__additional`}
+              title={item.extra}
+            >
+              <Icon id='info-circle' icon={InfoIcon} />
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};

app/javascript/flavours/glitch/features/compose/components/dropdown_icon_button.jsx

@@ -3,10 +3,9 @@ import { useCallback, useState, useRef } from 'react';
 
 import Overlay from 'react-overlays/Overlay';
 
+import { DropdownSelector } from 'flavours/glitch/components/dropdown_selector';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 
-import { PrivacyDropdownMenu } from './privacy_dropdown_menu';
-
 export const DropdownIconButton = ({ value, disabled, icon, onChange, iconComponent, title, options }) => {
   const containerRef = useRef(null);
 
@@ -53,7 +52,7 @@ export const DropdownIconButton = ({ value, disabled, icon, onChange, iconCompon
         {({ props, placement }) => (
           <div {...props}>
             <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
-              <PrivacyDropdownMenu
+              <DropdownSelector
                 items={options}
                 value={value}
                 onClose={handleClose}

app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx

@@ -11,10 +11,9 @@ import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?re
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
 import QuietTimeIcon from '@/material-icons/400-24px/quiet_time.svg?react';
+import { DropdownSelector } from 'flavours/glitch/components/dropdown_selector';
 import { Icon }  from 'flavours/glitch/components/icon';
 
-import { PrivacyDropdownMenu } from './privacy_dropdown_menu';
-
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
   public_long: { id: 'privacy.public.long', defaultMessage: 'Anyone on and off Mastodon' },
@@ -143,7 +142,7 @@ class PrivacyDropdown extends PureComponent {
           {({ props, placement }) => (
             <div {...props}>
               <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}>
-                <PrivacyDropdownMenu
+                <DropdownSelector
                   items={this.options}
                   value={value}
                   onClose={this.handleClose}