Merge remote-tracking branch 'mastodon/main' into hota/master

Author: lindwurm

app/controllers/severed_relationships_controller.rb

@@ -13,13 +13,13 @@ def index
 
   def following
     respond_to do |format|
-      format.csv { send_data following_data, filename: "following-#{@event.target_name}-#{@event.created_at.to_date.iso8601}.csv" }
+      format.csv { send_data following_data, filename: }
     end
   end
 
   def followers
     respond_to do |format|
-      format.csv { send_data followers_data, filename: "followers-#{@event.target_name}-#{@event.created_at.to_date.iso8601}.csv" }
+      format.csv { send_data followers_data, filename: }
     end
   end
 
@@ -48,4 +48,8 @@ def followers_data
   def acct(account)
     account.local? ? account.local_username_and_domain : account.acct
   end
+
+  def filename
+    "#{action_name}-#{@event.identifier}.csv"
+  end
 end

app/javascript/mastodon/components/account/index.tsx

@@ -75,6 +75,7 @@ interface AccountProps {
   withMenu?: boolean;
   withBorder?: boolean;
   extraAccountInfo?: React.ReactNode;
+  className?: string;
   children?: React.ReactNode;
 }
 
@@ -88,6 +89,7 @@ export const Account: React.FC<AccountProps> = ({
   withMenu = true,
   withBorder = true,
   extraAccountInfo,
+  className,
   children,
 }) => {
   const intl = useIntl();
@@ -290,7 +292,7 @@ export const Account: React.FC<AccountProps> = ({
 
   return (
     <div
-      className={classNames('account', {
+      className={classNames('account', className, {
         'account--minimal': minimal,
         'account--without-border': !withBorder,
       })}

app/javascript/mastodon/components/callout/styles.module.css

@@ -6,6 +6,7 @@
   background-color: var(--color-bg-brand-softest);
   color: var(--color-text-primary);
   border-radius: 12px;
+  font-size: 15px;
 }
 
 .icon {

app/javascript/mastodon/components/callout_inline/index.tsx

@@ -7,15 +7,11 @@ import ErrorIcon from '@/material-icons/400-24px/error.svg?react';
 import InfoIcon from '@/material-icons/400-24px/info.svg?react';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
 
+import type { FieldStatus } from '../form_fields/form_field_wrapper';
 import { Icon } from '../icon';
 
 import classes from './styles.module.css';
 
-export interface FieldStatus {
-  variant: 'error' | 'warning' | 'info' | 'success';
-  message?: string;
-}
-
 const iconMap: Record<FieldStatus['variant'], React.FunctionComponent> = {
   error: ErrorIcon,
   warning: WarningIcon,

app/javascript/mastodon/components/character_counter/index.tsx

@@ -1,9 +1,9 @@
-import { useMemo } from 'react';
-
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
+import { length } from 'stringz';
+
 import { polymorphicForwardRef } from '@/types/polymorphic';
 
 import classes from './styles.module.scss';
@@ -14,8 +14,6 @@ interface CharacterCounterProps {
   recommended?: boolean;
 }
 
-const segmenter = new Intl.Segmenter();
-
 export const CharacterCounter = polymorphicForwardRef<
   'span',
   CharacterCounterProps
@@ -31,10 +29,7 @@ export const CharacterCounter = polymorphicForwardRef<
     },
     ref,
   ) => {
-    const currentLength = useMemo(
-      () => [...segmenter.segment(currentString)].length,
-      [currentString],
-    );
+    const currentLength = length(currentString);
     return (
       <Component
         {...props}

app/javascript/mastodon/components/counters.tsx

@@ -13,6 +13,7 @@ export const StatusesCounter = (
       count: pluralReady,
       counter: <strong>{displayNumber}</strong>,
     }}
+    tagName='span'
   />
 );
 
@@ -27,6 +28,7 @@ export const FollowingCounter = (
       count: pluralReady,
       counter: <strong>{displayNumber}</strong>,
     }}
+    tagName='span'
   />
 );
 
@@ -41,6 +43,7 @@ export const FollowersCounter = (
       count: pluralReady,
       counter: <strong>{displayNumber}</strong>,
     }}
+    tagName='span'
   />
 );
 
@@ -55,5 +58,6 @@ export const FollowersYouKnowCounter = (
       count: pluralReady,
       counter: <strong>{displayNumber}</strong>,
     }}
+    tagName='span'
   />
 );

app/javascript/mastodon/components/form_fields/emoji_text_field.tsx

@@ -2,11 +2,9 @@ import type {
   ChangeEvent,
   ChangeEventHandler,
   ComponentPropsWithoutRef,
-  Dispatch,
   FC,
   ReactNode,
   RefObject,
-  SetStateAction,
 } from 'react';
 import { useCallback, useId, useRef } from 'react';
 
@@ -25,7 +23,7 @@ import { TextInput } from './text_input_field';
 
 export type EmojiInputProps = {
   value?: string;
-  onChange?: Dispatch<SetStateAction<string>>;
+  onChange?: (newValue: string) => void;
   counterMax?: number;
   recommended?: boolean;
 } & Omit<CommonFieldWrapperProps, 'wrapperClassName'>;
@@ -138,12 +136,15 @@ const EmojiFieldWrapper: FC<
 
   const handlePickEmoji = useCallback(
     (emoji: string) => {
-      onChange?.((prev) => {
-        const position = inputRef.current?.selectionStart ?? prev.length;
-        return insertEmojiAtPosition(prev, emoji, position);
-      });
+      if (!value) {
+        onChange?.('');
+        return;
+      }
+      const position = inputRef.current?.selectionStart ?? value.length;
+      const newValue = insertEmojiAtPosition(value, emoji, position);
+      onChange?.(newValue);
     },
-    [onChange, inputRef],
+    [inputRef, value, onChange],
   );
 
   const handleChange = useCallback(

app/javascript/mastodon/components/form_fields/fieldset.tsx

@@ -4,10 +4,10 @@ import type { ReactNode, FC } from 'react';
 import { createContext, useId } from 'react';
 
 import { A11yLiveRegion } from 'mastodon/components/a11y_live_region';
-import type { FieldStatus } from 'mastodon/components/callout_inline';
 import { CalloutInline } from 'mastodon/components/callout_inline';
 
 import classes from './fieldset.module.scss';
+import type { FieldStatus } from './form_field_wrapper';
 import { getFieldStatus } from './form_field_wrapper';
 import formFieldWrapperClasses from './form_field_wrapper.module.scss';
 

app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx

@@ -8,7 +8,6 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 
 import { A11yLiveRegion } from 'mastodon/components/a11y_live_region';
-import type { FieldStatus } from 'mastodon/components/callout_inline';
 import { CalloutInline } from 'mastodon/components/callout_inline';
 
 import { FieldsetNameContext } from './fieldset';
@@ -20,11 +19,16 @@ export interface InputProps {
   'aria-describedby'?: string;
 }
 
+export interface FieldStatus {
+  variant: 'error' | 'warning' | 'info' | 'success';
+  message?: string;
+}
+
 interface FieldWrapperProps {
   label: ReactNode;
   hint?: ReactNode;
   required?: boolean;
-  status?: FieldStatus['variant'] | FieldStatus;
+  status?: FieldStatus['variant'] | FieldStatus | null;
   inputId?: string;
   describedById?: string;
   inputPlacement?: 'inline-start' | 'inline-end';

app/javascript/mastodon/components/form_fields/index.ts

@@ -1,3 +1,4 @@
+export type { FieldStatus } from './form_field_wrapper';
 export { FormFieldWrapper } from './form_field_wrapper';
 export { FormStack } from './form_stack';
 export { Fieldset } from './fieldset';