Change ESLint rules, lint

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

.eslintrc.cjs

@@ -260,12 +260,29 @@ module.exports = {
       },
     ],
     '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none',
+        },
+        singleline: {
+          delimiter: 'comma',
+        },
+      },
+    ],
 
     'promise/catch-or-return': 'error',
 
     'react-hooks/rules-of-hooks': 'error',
 
-    'tailwindcss/classnames-order': 'error',
+    'tailwindcss/classnames-order': [
+      'error',
+      {
+        classRegex: '^(base|container|icon|item|list|outer|wrapper)?[c|C]lass(Name)?$',
+        config: 'tailwind.config.cjs',
+      },
+    ],
     'tailwindcss/migration-from-tailwind-2': 'error',
   },
   overrides: [

app/soapbox/actions/accounts.ts

@@ -228,7 +228,7 @@ const fetchAccountFail = (id: string | null, error: AxiosError) => ({
 });
 
 type FollowAccountOpts = {
-  reblogs?: boolean,
+  reblogs?: boolean
   notify?: boolean
 };
 

app/soapbox/actions/export-data.ts

@@ -34,8 +34,8 @@ type ExportDataActions = {
   | typeof EXPORT_BLOCKS_FAIL
   | typeof EXPORT_MUTES_REQUEST
   | typeof EXPORT_MUTES_SUCCESS
-  | typeof EXPORT_MUTES_FAIL,
-  error?: any,
+  | typeof EXPORT_MUTES_FAIL
+  error?: any
 }
 
 function fileExport(content: string, fileName: string) {

app/soapbox/actions/familiar-followers.ts

@@ -11,25 +11,25 @@ export const FAMILIAR_FOLLOWERS_FETCH_SUCCESS = 'FAMILIAR_FOLLOWERS_FETCH_SUCCES
 export const FAMILIAR_FOLLOWERS_FETCH_FAIL    = 'FAMILIAR_FOLLOWERS_FETCH_FAIL';
 
 type FamiliarFollowersFetchRequestAction = {
-  type: typeof FAMILIAR_FOLLOWERS_FETCH_REQUEST,
-  id: string,
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_REQUEST
+  id: string
 }
 
 type FamiliarFollowersFetchRequestSuccessAction = {
-  type: typeof FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
-  id: string,
-  accounts: Array<APIEntity>,
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_SUCCESS
+  id: string
+  accounts: Array<APIEntity>
 }
 
 type FamiliarFollowersFetchRequestFailAction = {
-  type: typeof FAMILIAR_FOLLOWERS_FETCH_FAIL,
-  id: string,
-  error: any,
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_FAIL
+  id: string
+  error: any
 }
 
 type AccountsImportAction = {
-  type: typeof ACCOUNTS_IMPORT,
-  accounts: Array<APIEntity>,
+  type: typeof ACCOUNTS_IMPORT
+  accounts: Array<APIEntity>
 }
 
 export type FamiliarFollowersActions = FamiliarFollowersFetchRequestAction | FamiliarFollowersFetchRequestSuccessAction | FamiliarFollowersFetchRequestFailAction | AccountsImportAction

app/soapbox/actions/import-data.ts

@@ -27,8 +27,8 @@ type ImportDataActions = {
   | typeof IMPORT_BLOCKS_FAIL
   | typeof IMPORT_MUTES_REQUEST
   | typeof IMPORT_MUTES_SUCCESS
-  | typeof IMPORT_MUTES_FAIL,
-  error?: any,
+  | typeof IMPORT_MUTES_FAIL
+  error?: any
   config?: string
 }
 

app/soapbox/actions/push-notifications/registerer.ts

@@ -37,8 +37,8 @@ const subscribe = (registration: ServiceWorkerRegistration, getState: () => Root
   });
 
 const unsubscribe = ({ registration, subscription }: {
-  registration: ServiceWorkerRegistration,
-  subscription: PushSubscription | null,
+  registration: ServiceWorkerRegistration
+  subscription: PushSubscription | null
 }) =>
   subscription ? subscription.unsubscribe().then(() => registration) : new Promise<ServiceWorkerRegistration>(r => r(registration));
 
@@ -82,8 +82,8 @@ const register = () =>
       .then(getPushSubscription)
       // @ts-ignore
       .then(({ registration, subscription }: {
-        registration: ServiceWorkerRegistration,
-        subscription: PushSubscription | null,
+        registration: ServiceWorkerRegistration
+        subscription: PushSubscription | null
       }) => {
         if (subscription !== null) {
           // We have a subscription, check if it is still valid

app/soapbox/actions/reports.ts

@@ -21,7 +21,7 @@ const REPORT_BLOCK_CHANGE   = 'REPORT_BLOCK_CHANGE';
 const REPORT_RULE_CHANGE    = 'REPORT_RULE_CHANGE';
 
 type ReportedEntity = {
-  status?: Status,
+  status?: Status
   chatMessage?: ChatMessage
 }
 

app/soapbox/actions/settings.ts

@@ -18,7 +18,7 @@ const FE_NAME = 'soapbox_fe';
 /** Options when changing/saving settings. */
 type SettingOpts = {
   /** Whether to display an alert when settings are saved. */
-  showAlert?: boolean,
+  showAlert?: boolean
 }
 
 const messages = defineMessages({

app/soapbox/actions/streaming.ts

@@ -81,7 +81,7 @@ const updateChatQuery = (chat: IChat) => {
 };
 
 interface StreamOpts {
-  statContext?: IStatContext,
+  statContext?: IStatContext
 }
 
 const connectTimelineStream = (

app/soapbox/actions/verification.ts

@@ -31,14 +31,14 @@ const AGE: Challenge = 'age';
 export type Challenge = 'age' | 'sms' | 'email'
 
 type Challenges = {
-  email?: 0 | 1,
-  sms?: 0 | 1,
-  age?: 0 | 1,
+  email?: 0 | 1
+  sms?: 0 | 1
+  age?: 0 | 1
 }
 
 type Verification = {
-  token?: string,
-  challenges?: Challenges,
+  token?: string
+  challenges?: Challenges
   challengeTypes?: Array<'age' | 'sms' | 'email'>
 };
 

app/soapbox/components/__mocks__/react-inlinesvg.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface IInlineSVG {
-  loader?: JSX.Element,
+  loader?: JSX.Element
 }
 
 const InlineSVG: React.FC<IInlineSVG> = ({ loader }): JSX.Element => {

app/soapbox/components/account-search.tsx

@@ -12,9 +12,9 @@ const messages = defineMessages({
 
 interface IAccountSearch {
   /** Callback when a searched account is chosen. */
-  onSelected: (accountId: string) => void,
+  onSelected: (accountId: string) => void
   /** Override the default placeholder of the input. */
-  placeholder?: string,
+  placeholder?: string
 }
 
 /** Input to search for accounts. */

app/soapbox/components/account.tsx

@@ -17,8 +17,8 @@ import type { StatusApprovalStatus } from 'soapbox/normalizers/status';
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 interface IInstanceFavicon {
-  account: AccountEntity,
-  disabled?: boolean,
+  account: AccountEntity
+  disabled?: boolean
 }
 
 const messages = defineMessages({
@@ -53,7 +53,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
 };
 
 interface IProfilePopper {
-  condition: boolean,
+  condition: boolean
   wrapper: (children: React.ReactNode) => React.ReactNode
   children: React.ReactNode
 }
@@ -67,30 +67,30 @@ const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children
 };
 
 export interface IAccount {
-  account: AccountEntity,
-  action?: React.ReactElement,
-  actionAlignment?: 'center' | 'top',
-  actionIcon?: string,
-  actionTitle?: string,
+  account: AccountEntity
+  action?: React.ReactElement
+  actionAlignment?: 'center' | 'top'
+  actionIcon?: string
+  actionTitle?: string
   /** Override other actions for specificity like mute/unmute.  */
-  actionType?: 'muting' | 'blocking' | 'follow_request',
-  avatarSize?: number,
-  hidden?: boolean,
-  hideActions?: boolean,
-  id?: string,
-  onActionClick?: (account: any) => void,
-  showProfileHoverCard?: boolean,
-  timestamp?: string,
-  timestampUrl?: string,
-  futureTimestamp?: boolean,
-  withAccountNote?: boolean,
-  withDate?: boolean,
-  withLinkToProfile?: boolean,
-  withRelationship?: boolean,
-  showEdit?: boolean,
-  approvalStatus?: StatusApprovalStatus,
-  emoji?: string,
-  note?: string,
+  actionType?: 'muting' | 'blocking' | 'follow_request'
+  avatarSize?: number
+  hidden?: boolean
+  hideActions?: boolean
+  id?: string
+  onActionClick?: (account: any) => void
+  showProfileHoverCard?: boolean
+  timestamp?: string
+  timestampUrl?: string
+  futureTimestamp?: boolean
+  withAccountNote?: boolean
+  withDate?: boolean
+  withLinkToProfile?: boolean
+  withRelationship?: boolean
+  showEdit?: boolean
+  approvalStatus?: StatusApprovalStatus
+  emoji?: string
+  note?: string
 }
 
 const Account = ({
@@ -143,7 +143,7 @@ const Account = ({
           title={actionTitle}
           onClick={handleAction}
           className='bg-transparent text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
-          iconClassName='w-4 h-4'
+          iconClassName='h-4 w-4'
         />
       );
     }

app/soapbox/components/animated-number.tsx

@@ -15,8 +15,8 @@ const obfuscatedCount = (count: number) => {
 };
 
 interface IAnimatedNumber {
-  value: number;
-  obfuscate?: boolean;
+  value: number
+  obfuscate?: boolean
 }
 
 const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate }) => {

app/soapbox/components/announcements/announcement-content.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/types/entities';
 
 interface IAnnouncementContent {
-  announcement: AnnouncementEntity;
+  announcement: AnnouncementEntity
 }
 
 const AnnouncementContent: React.FC<IAnnouncementContent> = ({ announcement }) => {

app/soapbox/components/announcements/announcement.tsx

@@ -11,10 +11,10 @@ import type { Map as ImmutableMap } from 'immutable';
 import type { Announcement as AnnouncementEntity } from 'soapbox/types/entities';
 
 interface IAnnouncement {
-  announcement: AnnouncementEntity;
-  addReaction: (id: string, name: string) => void;
-  removeReaction: (id: string, name: string) => void;
-  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
+  announcement: AnnouncementEntity
+  addReaction: (id: string, name: string) => void
+  removeReaction: (id: string, name: string) => void
+  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
 }
 
 const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, removeReaction, emojiMap }) => {

app/soapbox/components/announcements/emoji.tsx

@@ -7,9 +7,9 @@ import { joinPublicPath } from 'soapbox/utils/static';
 import type { Map as ImmutableMap } from 'immutable';
 
 interface IEmoji {
-  emoji: string;
-  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
-  hovered: boolean;
+  emoji: string
+  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
+  hovered: boolean
 }
 
 const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {

app/soapbox/components/announcements/reaction.tsx

@@ -10,12 +10,12 @@ import type { Map as ImmutableMap } from 'immutable';
 import type { AnnouncementReaction } from 'soapbox/types/entities';
 
 interface IReaction {
-  announcementId: string;
-  reaction: AnnouncementReaction;
-  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
-  addReaction: (id: string, name: string) => void;
-  removeReaction: (id: string, name: string) => void;
-  style: React.CSSProperties;
+  announcementId: string
+  reaction: AnnouncementReaction
+  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
+  addReaction: (id: string, name: string) => void
+  removeReaction: (id: string, name: string) => void
+  style: React.CSSProperties
 }
 
 const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction, removeReaction, emojiMap, style }) => {

app/soapbox/components/announcements/reactions-bar.tsx

@@ -13,11 +13,11 @@ import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 import type { AnnouncementReaction } from 'soapbox/types/entities';
 
 interface IReactionsBar {
-  announcementId: string;
-  reactions: ImmutableList<AnnouncementReaction>;
-  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
-  addReaction: (id: string, name: string) => void;
-  removeReaction: (id: string, name: string) => void;
+  announcementId: string
+  reactions: ImmutableList<AnnouncementReaction>
+  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
+  addReaction: (id: string, name: string) => void
+  removeReaction: (id: string, name: string) => void
 }
 
 const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addReaction, removeReaction, emojiMap }) => {

app/soapbox/components/autosuggest-account-input.tsx

@@ -12,16 +12,16 @@ import type { InputThemes } from 'soapbox/components/ui/input/input';
 const noOp = () => { };
 
 interface IAutosuggestAccountInput {
-  onChange: React.ChangeEventHandler<HTMLInputElement>,
-  onSelected: (accountId: string) => void,
-  autoFocus?: boolean,
-  value: string,
-  limit?: number,
-  className?: string,
-  autoSelect?: boolean,
-  menu?: Menu,
-  onKeyDown?: React.KeyboardEventHandler,
-  theme?: InputThemes,
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  onSelected: (accountId: string) => void
+  autoFocus?: boolean
+  value: string
+  limit?: number
+  className?: string
+  autoSelect?: boolean
+  menu?: Menu
+  onKeyDown?: React.KeyboardEventHandler
+  theme?: InputThemes
 }
 
 const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({

app/soapbox/components/autosuggest-emoji.tsx

@@ -4,19 +4,19 @@ import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
 import { joinPublicPath } from 'soapbox/utils/static';
 
 export type Emoji = {
-  id: string,
-  custom: boolean,
-  imageUrl: string,
-  native: string,
-  colons: string,
+  id: string
+  custom: boolean
+  imageUrl: string
+  native: string
+  colons: string
 }
 
 type UnicodeMapping = {
-  filename: string,
+  filename: string
 }
 
 interface IAutosuggestEmoji {
-  emoji: Emoji,
+  emoji: Emoji
 }
 
 const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {

app/soapbox/components/autosuggest-input.tsx

@@ -16,23 +16,23 @@ import type { InputThemes } from 'soapbox/components/ui/input/input';
 export type AutoSuggestion = string | Emoji;
 
 export interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyUp' | 'onKeyDown'> {
-  value: string,
-  suggestions: ImmutableList<any>,
-  disabled?: boolean,
-  placeholder?: string,
-  onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void,
-  onSuggestionsClearRequested: () => void,
-  onSuggestionsFetchRequested: (token: string) => void,
-  autoFocus: boolean,
-  autoSelect: boolean,
-  className?: string,
-  id?: string,
-  searchTokens: string[],
-  maxLength?: number,
-  menu?: Menu,
-  renderSuggestion?: React.FC<{ id: string }>,
-  hidePortal?: boolean,
-  theme?: InputThemes,
+  value: string
+  suggestions: ImmutableList<any>
+  disabled?: boolean
+  placeholder?: string
+  onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void
+  onSuggestionsClearRequested: () => void
+  onSuggestionsFetchRequested: (token: string) => void
+  autoFocus: boolean
+  autoSelect: boolean
+  className?: string
+  id?: string
+  searchTokens: string[]
+  maxLength?: number
+  menu?: Menu
+  renderSuggestion?: React.FC<{ id: string }>
+  hidePortal?: boolean
+  theme?: InputThemes
 }
 
 export default class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {

app/soapbox/components/autosuggest-location.tsx

@@ -19,7 +19,7 @@ export const ADDRESS_ICONS: Record<string, string> = {
 };
 
 interface IAutosuggestLocation {
-  id: string,
+  id: string
 }
 
 const AutosuggestLocation: React.FC<IAutosuggestLocation> = ({ id }) => {

app/soapbox/components/autosuggest-textarea.tsx

@@ -14,23 +14,23 @@ import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
 import type { List as ImmutableList } from 'immutable';
 
 interface IAutosuggesteTextarea {
-  id?: string,
-  value: string,
-  suggestions: ImmutableList<string>,
-  disabled: boolean,
-  placeholder: string,
-  onSuggestionSelected: (tokenStart: number, token: string | null, value: string | undefined) => void,
-  onSuggestionsClearRequested: () => void,
-  onSuggestionsFetchRequested: (token: string | number) => void,
-  onChange: React.ChangeEventHandler<HTMLTextAreaElement>,
-  onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>,
-  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>,
-  onPaste: (files: FileList) => void,
-  autoFocus: boolean,
-  onFocus: () => void,
-  onBlur?: () => void,
-  condensed?: boolean,
-  children: React.ReactNode,
+  id?: string
+  value: string
+  suggestions: ImmutableList<string>
+  disabled: boolean
+  placeholder: string
+  onSuggestionSelected: (tokenStart: number, token: string | null, value: string | undefined) => void
+  onSuggestionsClearRequested: () => void
+  onSuggestionsFetchRequested: (token: string | number) => void
+  onChange: React.ChangeEventHandler<HTMLTextAreaElement>
+  onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>
+  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>
+  onPaste: (files: FileList) => void
+  autoFocus: boolean
+  onFocus: () => void
+  onBlur?: () => void
+  condensed?: boolean
+  children: React.ReactNode
 }
 
 class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea> {

app/soapbox/components/badge.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface IBadge {
-  title: React.ReactNode,
-  slug: string,
+  title: React.ReactNode
+  slug: string
 }
 /** Badge to display on a user's profile. */
 const Badge: React.FC<IBadge> = ({ title, slug }) => {

app/soapbox/components/birthday-input.tsx

@@ -15,9 +15,9 @@ const messages = defineMessages({
 });
 
 interface IBirthdayInput {
-  value?: string,
-  onChange: (value: string) => void,
-  required?: boolean,
+  value?: string
+  onChange: (value: string) => void
+  required?: boolean
 }
 
 const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required }) => {
@@ -56,15 +56,15 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
     nextYearButtonDisabled,
     date,
   }: {
-    decreaseMonth(): void,
-    increaseMonth(): void,
-    prevMonthButtonDisabled: boolean,
-    nextMonthButtonDisabled: boolean,
-    decreaseYear(): void,
-    increaseYear(): void,
-    prevYearButtonDisabled: boolean,
-    nextYearButtonDisabled: boolean,
-    date: Date,
+    decreaseMonth(): void
+    increaseMonth(): void
+    prevMonthButtonDisabled: boolean
+    nextMonthButtonDisabled: boolean
+    decreaseYear(): void
+    increaseYear(): void
+    prevYearButtonDisabled: boolean
+    nextYearButtonDisabled: boolean
+    date: Date
   }) => {
     return (
       <div className='flex flex-col gap-2'>

app/soapbox/components/blurhash.tsx

@@ -3,18 +3,18 @@ import React, { useRef, useEffect } from 'react';
 
 interface IBlurhash {
   /** Hash to render */
-  hash: string | null | undefined,
+  hash: string | null | undefined
   /**  Width of the blurred region in pixels. Defaults to 32. */
-  width?: number,
+  width?: number
   /** Height of the blurred region in pixels. Defaults to width. */
-  height?: number,
+  height?: number
   /**
    * Whether dummy mode is enabled. If enabled, nothing is rendered
    * and canvas left untouched.
    */
-  dummy?: boolean,
+  dummy?: boolean
   /** className of the canvas element. */
-  className?: string,
+  className?: string
 }
 
 /**

app/soapbox/components/copyable-input.tsx

@@ -5,7 +5,7 @@ import { Button, HStack, Input } from './ui';
 
 interface ICopyableInput {
   /** Text to be copied. */
-  value: string,
+  value: string
 }
 
 /** An input with copy abilities. */

app/soapbox/components/domain.tsx

@@ -12,7 +12,7 @@ const messages = defineMessages({
 });
 
 interface IDomain {
-  domain: string,
+  domain: string
 }
 
 const Domain: React.FC<IDomain> = ({ domain }) => {

app/soapbox/components/error-boundary.tsx

@@ -31,10 +31,10 @@ interface Props extends ReturnType<typeof mapStateToProps> {
 }
 
 type State = {
-  hasError: boolean,
-  error: any,
-  componentStack: any,
-  browser?: Bowser.Parser.Parser,
+  hasError: boolean
+  error: any
+  componentStack: any
+  browser?: Bowser.Parser.Parser
 }
 
 class ErrorBoundary extends React.PureComponent<Props, State> {

app/soapbox/components/extended-video-player.tsx

@@ -3,14 +3,14 @@ import React, { useEffect, useRef } from 'react';
 import { isIOS } from 'soapbox/is-mobile';
 
 interface IExtendedVideoPlayer {
-  src: string,
-  alt?: string,
-  width?: number,
-  height?: number,
-  time?: number,
-  controls?: boolean,
-  muted?: boolean,
-  onClick?: () =>  void,
+  src: string
+  alt?: string
+  width?: number
+  height?: number
+  time?: number
+  controls?: boolean
+  muted?: boolean
+  onClick?: () =>  void
 }
 
 const ExtendedVideoPlayer: React.FC<IExtendedVideoPlayer> = ({ src, alt, time, controls, muted, onClick }) => {

app/soapbox/components/fork-awesome-icon.tsx

@@ -9,9 +9,9 @@ import clsx from 'clsx';
 import React from 'react';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
-  id: string,
-  className?: string,
-  fixedWidth?: boolean,
+  id: string
+  className?: string
+  fixedWidth?: boolean
 }
 
 const ForkAwesomeIcon: React.FC<IForkAwesomeIcon> = ({ id, className, fixedWidth, ...rest }) => {

app/soapbox/components/hashtag.tsx

@@ -10,7 +10,7 @@ import { HStack, Stack, Text } from './ui';
 import type { Tag } from 'soapbox/types/entities';
 
 interface IHashtag {
-  hashtag: Tag,
+  hashtag: Tag
 }
 
 const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {

app/soapbox/components/hover-ref-wrapper.tsx

@@ -15,10 +15,10 @@ const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
 }, 600);
 
 interface IHoverRefWrapper {
-  accountId: string,
-  inline?: boolean,
-  className?: string,
-  children: React.ReactNode,
+  accountId: string
+  inline?: boolean
+  className?: string
+  children: React.ReactNode
 }
 
 /** Makes a profile hover card appear when the wrapped element is hovered. */

app/soapbox/components/hover-status-wrapper.tsx

@@ -14,10 +14,10 @@ const showStatusHoverCard = debounce((dispatch, ref, statusId) => {
 }, 300);
 
 interface IHoverStatusWrapper {
-  statusId: any,
-  inline: boolean,
-  className?: string,
-  children: React.ReactNode,
+  statusId: any
+  inline: boolean
+  className?: string
+  children: React.ReactNode
 }
 
 /** Makes a status hover card appear when the wrapped element is hovered. */

app/soapbox/components/icon-with-counter.tsx

@@ -4,10 +4,10 @@ import Icon, { IIcon } from 'soapbox/components/icon';
 import { Counter } from 'soapbox/components/ui';
 
 interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
-  count: number,
+  count: number
   countMax?: number
-  icon?: string;
-  src?: string;
+  icon?: string
+  src?: string
 }
 
 const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, countMax, ...rest }) => {

app/soapbox/components/icon.tsx

@@ -8,10 +8,10 @@ import React from 'react';
 import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
 export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
-  src: string,
-  id?: string,
-  alt?: string,
-  className?: string,
+  src: string
+  id?: string
+  alt?: string
+  className?: string
 }
 
 const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {

app/soapbox/components/list.tsx

@@ -16,9 +16,9 @@ const List: React.FC<IList> = ({ children }) => (
 );
 
 interface IListItem {
-  label: React.ReactNode,
-  hint?: React.ReactNode,
-  onClick?(): void,
+  label: React.ReactNode
+  hint?: React.ReactNode
+  onClick?(): void
   onSelect?(): void
   isSelected?: boolean
   children?: React.ReactNode

app/soapbox/components/load-gap.tsx

@@ -8,9 +8,9 @@ const messages = defineMessages({
 });
 
 interface ILoadGap {
-  disabled?: boolean,
-  maxId: string,
-  onClick: (id: string) => void,
+  disabled?: boolean
+  maxId: string
+  onClick: (id: string) => void
 }
 
 const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {

app/soapbox/components/load-more.tsx

@@ -4,9 +4,9 @@ import { FormattedMessage } from 'react-intl';
 import { Button } from 'soapbox/components/ui';
 
 interface ILoadMore {
-  onClick: React.MouseEventHandler,
-  disabled?: boolean,
-  visible?: Boolean,
+  onClick: React.MouseEventHandler
+  disabled?: boolean
+  visible?: Boolean
 }
 
 const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true }) => {

app/soapbox/components/location-search.tsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 interface ILocationSearch {
-  onSelected: (locationId: string) => void,
+  onSelected: (locationId: string) => void
 }
 
 const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {

app/soapbox/components/media-gallery.tsx

@@ -19,21 +19,21 @@ const ATTACHMENT_LIMIT = 4;
 const MAX_FILENAME_LENGTH = 45;
 
 interface Dimensions {
-  w: Property.Width | number,
-  h: Property.Height | number,
-  t?: Property.Top,
-  r?: Property.Right,
-  b?: Property.Bottom,
-  l?: Property.Left,
-  float?: Property.Float,
-  pos?: Property.Position,
+  w: Property.Width | number
+  h: Property.Height | number
+  t?: Property.Top
+  r?: Property.Right
+  b?: Property.Bottom
+  l?: Property.Left
+  float?: Property.Float
+  pos?: Property.Position
 }
 
 interface SizeData {
-  style: React.CSSProperties,
-  itemsDimensions: Dimensions[],
-  size: number,
-  width: number,
+  style: React.CSSProperties
+  itemsDimensions: Dimensions[]
+  size: number
+  width: number
 }
 
 const withinLimits = (aspectRatio: number) => {
@@ -48,16 +48,16 @@ const shouldLetterbox = (attachment: Attachment): boolean => {
 };
 
 interface IItem {
-  attachment: Attachment,
-  standalone?: boolean,
-  index: number,
-  size: number,
-  onClick: (index: number) => void,
-  displayWidth?: number,
-  visible: boolean,
-  dimensions: Dimensions,
-  last?: boolean,
-  total: number,
+  attachment: Attachment
+  standalone?: boolean
+  index: number
+  size: number
+  onClick: (index: number) => void
+  displayWidth?: number
+  visible: boolean
+  dimensions: Dimensions
+  last?: boolean
+  total: number
 }
 
 const Item: React.FC<IItem> = ({
@@ -261,16 +261,16 @@ const Item: React.FC<IItem> = ({
 };
 
 interface IMediaGallery {
-  sensitive?: boolean,
-  media: ImmutableList<Attachment>,
-  height?: number,
-  onOpenMedia: (media: ImmutableList<Attachment>, index: number) => void,
-  defaultWidth?: number,
-  cacheWidth?: (width: number) => void,
-  visible?: boolean,
-  onToggleVisibility?: () => void,
-  displayMedia?: string,
-  compact: boolean,
+  sensitive?: boolean
+  media: ImmutableList<Attachment>
+  height?: number
+  onOpenMedia: (media: ImmutableList<Attachment>, index: number) => void
+  defaultWidth?: number
+  cacheWidth?: (width: number) => void
+  visible?: boolean
+  onToggleVisibility?: () => void
+  displayMedia?: string
+  compact: boolean
 }
 
 const MediaGallery: React.FC<IMediaGallery> = (props) => {

app/soapbox/components/modal-root.tsx

@@ -39,10 +39,10 @@ export const checkEventComposeContent = (compose?: ReturnType<typeof ReducerComp
 };
 
 interface IModalRoot {
-  onCancel?: () => void,
-  onClose: (type?: ModalType) => void,
-  type: ModalType,
-  children: React.ReactNode,
+  onCancel?: () => void
+  onClose: (type?: ModalType) => void
+  type: ModalType
+  children: React.ReactNode
 }
 
 const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type }) => {

app/soapbox/components/outline-box.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode,
-  className?: string,
+  children: React.ReactNode
+  className?: string
 }
 
 /** Wraps children in a container with an outline. */

app/soapbox/components/polls/poll-footer.tsx

@@ -16,9 +16,9 @@ const messages = defineMessages({
 });
 
 interface IPollFooter {
-  poll: PollEntity,
-  showResults: boolean,
-  selected: Selected,
+  poll: PollEntity
+  showResults: boolean
+  selected: Selected
 }
 
 const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX.Element => {

app/soapbox/components/polls/poll-option.tsx

@@ -29,7 +29,7 @@ const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ pe
 };
 
 interface IPollOptionText extends IPollOption {
-  percent: number,
+  percent: number
 }
 
 const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, onToggle }) => {
@@ -95,12 +95,12 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
 };
 
 interface IPollOption {
-  poll: PollEntity,
-  option: PollOptionEntity,
-  index: number,
-  showResults?: boolean,
-  active: boolean,
-  onToggle: (value: number) => void,
+  poll: PollEntity
+  option: PollOptionEntity
+  index: number
+  showResults?: boolean
+  active: boolean
+  onToggle: (value: number) => void
 }
 
 const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {

app/soapbox/components/polls/poll.tsx

@@ -13,8 +13,8 @@ import PollOption from './poll-option';
 export type Selected = Record<number, boolean>;
 
 interface IPoll {
-  id: string,
-  status?: string,
+  id: string
+  status?: string
 }
 
 const messages = defineMessages({

app/soapbox/components/profile-hover-card.tsx

@@ -54,7 +54,7 @@ const handleMouseLeave = (dispatch: AppDispatch): React.MouseEventHandler => {
 };
 
 interface IProfileHoverCard {
-  visible: boolean,
+  visible: boolean
 }
 
 /** Popup profile preview that appears when hovering avatars and display names. */

app/soapbox/components/progress-circle.tsx

@@ -2,10 +2,10 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface IProgressCircle {
-  progress: number,
-  radius?: number,
-  stroke?: number,
-  title?: string,
+  progress: number
+  radius?: number
+  stroke?: number
+  title?: string
 }
 
 const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title }) => {

app/soapbox/components/pull-to-refresh.tsx

@@ -4,10 +4,10 @@ import PTRComponent from 'react-simple-pull-to-refresh';
 import { Spinner } from 'soapbox/components/ui';
 
 interface IPullToRefresh {
-  onRefresh?: () => Promise<any>;
-  refreshingContent?: JSX.Element | string;
-  pullingContent?: JSX.Element | string;
-  children: React.ReactNode;
+  onRefresh?: () => Promise<any>
+  refreshingContent?: JSX.Element | string
+  pullingContent?: JSX.Element | string
+  children: React.ReactNode
 }
 
 /**

app/soapbox/components/pullable.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PullToRefresh from './pull-to-refresh';
 
 interface IPullable {
-  children: React.ReactNode,
+  children: React.ReactNode
 }
 
 /**

app/soapbox/components/quoted-status.tsx

@@ -23,11 +23,11 @@ const messages = defineMessages({
 
 interface IQuotedStatus {
   /** The quoted status entity. */
-  status?: StatusEntity,
+  status?: StatusEntity
   /** Callback when cancelled (during compose). */
-  onCancel?: Function,
+  onCancel?: Function
   /** Whether the status is shown in the post composer. */
-  compose?: boolean,
+  compose?: boolean
 }
 
 /** Status embedded in a quote post. */

app/soapbox/components/radio.tsx

@@ -16,11 +16,11 @@ const RadioGroup = ({ onChange, children }: IRadioGroup) => {
 };
 
 interface IRadioItem {
-  label: React.ReactNode,
-  hint?: React.ReactNode,
-  value: string,
-  checked: boolean,
-  onChange?: React.ChangeEventHandler,
+  label: React.ReactNode
+  hint?: React.ReactNode
+  value: string
+  checked: boolean
+  onChange?: React.ChangeEventHandler
 }
 
 const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value }) => {

app/soapbox/components/relative-timestamp.tsx

@@ -113,14 +113,14 @@ const timeRemainingString = (intl: IntlShape, date: Date, now: number) => {
 };
 
 interface RelativeTimestampProps extends IText {
-  intl: IntlShape,
-  timestamp: string,
-  year?: number,
-  futureDate?: boolean,
+  intl: IntlShape
+  timestamp: string
+  year?: number
+  futureDate?: boolean
 }
 
 interface RelativeTimestampState {
-  now: number,
+  now: number
 }
 
 /** Displays a timestamp compared to the current time, eg "1m" for one minute ago. */

app/soapbox/components/safe-embed.tsx

@@ -2,13 +2,13 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 interface ISafeEmbed {
   /** Styles for the outer frame element. */
-  className?: string,
+  className?: string
   /** Space-separate list of restrictions to ALLOW for the iframe. */
-  sandbox?: string,
+  sandbox?: string
   /** Unique title for the iframe. */
-  title: string,
+  title: string
   /** HTML body to embed. */
-  html?: string,
+  html?: string
 }
 
 /** Safely embeds arbitrary HTML content on the page (by putting it in an iframe). */

app/soapbox/components/scroll-top-button.tsx

@@ -9,15 +9,15 @@ import { useSettings } from 'soapbox/hooks';
 
 interface IScrollTopButton {
   /** Callback when clicked, and also when scrolled to the top. */
-  onClick: () => void,
+  onClick: () => void
   /** Number of unread items. */
-  count: number,
+  count: number
   /** Message to display in the button (should contain a `{count}` value). */
-  message: MessageDescriptor,
+  message: MessageDescriptor
   /** Distance from the top of the screen (scrolling down) before the button appears. */
-  threshold?: number,
+  threshold?: number
   /** Distance from the top of the screen (scrolling up) before the action is triggered. */
-  autoloadThreshold?: number,
+  autoloadThreshold?: number
 }
 
 /** Floating new post counter above timelines, clicked to scroll to top. */

app/soapbox/components/scrollable-list.tsx

@@ -10,14 +10,14 @@ import { Card, Spinner } from './ui';
 
 /** Custom Viruoso component context. */
 type Context = {
-  itemClassName?: string,
-  listClassName?: string,
+  itemClassName?: string
+  listClassName?: string
 }
 
 /** Scroll position saved in sessionStorage. */
 type SavedScrollPosition = {
-  index: number,
-  offset: number,
+  index: number
+  offset: number
 }
 
 /** Custom Virtuoso Item component representing a single scrollable item. */
@@ -37,44 +37,44 @@ const List: Components<JSX.Element, Context>['List'] = React.forwardRef((props,
 
 interface IScrollableList extends VirtuosoProps<any, any> {
   /** Unique key to preserve the scroll position when navigating back. */
-  scrollKey?: string,
+  scrollKey?: string
   /** Pagination callback when the end of the list is reached. */
-  onLoadMore?: () => void,
+  onLoadMore?: () => void
   /** Whether the data is currently being fetched. */
-  isLoading?: boolean,
+  isLoading?: boolean
   /** Whether to actually display the loading state. */
-  showLoading?: boolean,
+  showLoading?: boolean
   /** Whether we expect an additional page of data. */
-  hasMore?: boolean,
+  hasMore?: boolean
   /** Additional element to display at the top of the list. */
-  prepend?: React.ReactNode,
+  prepend?: React.ReactNode
   /** Whether to display the prepended element. */
-  alwaysPrepend?: boolean,
+  alwaysPrepend?: boolean
   /** Message to display when the list is loaded but empty. */
-  emptyMessage?: React.ReactNode,
+  emptyMessage?: React.ReactNode
   /** Scrollable content. */
-  children: Iterable<React.ReactNode>,
+  children: Iterable<React.ReactNode>
   /** Callback when the list is scrolled to the top. */
-  onScrollToTop?: () => void,
+  onScrollToTop?: () => void
   /** Callback when the list is scrolled. */
-  onScroll?: () => void,
+  onScroll?: () => void
   /** Placeholder component to render while loading. */
-  placeholderComponent?: React.ComponentType | React.NamedExoticComponent,
+  placeholderComponent?: React.ComponentType | React.NamedExoticComponent
   /** Number of placeholders to render while loading. */
-  placeholderCount?: number,
+  placeholderCount?: number
   /**
    * Pull to refresh callback.
    * @deprecated Put a PTR around the component instead.
    */
-  onRefresh?: () => Promise<any>,
+  onRefresh?: () => Promise<any>
   /** Extra class names on the Virtuoso element. */
-  className?: string,
+  className?: string
   /** Class names on each item container. */
-  itemClassName?: string,
+  itemClassName?: string
   /** `id` attribute on the Virtuoso element. */
-  id?: string,
+  id?: string
   /** CSS styles on the Virtuoso element. */
-  style?: React.CSSProperties,
+  style?: React.CSSProperties
   /** Whether to use the window to scroll the content instead of Virtuoso's container. */
   useWindowScroll?: boolean
 }

app/soapbox/components/sidebar-menu.tsx

@@ -43,11 +43,11 @@ const messages = defineMessages({
 });
 
 interface ISidebarLink {
-  href?: string,
-  to?: string,
-  icon: string,
-  text: string | JSX.Element,
-  onClick: React.EventHandler<React.MouseEvent>,
+  href?: string
+  to?: string
+  icon: string
+  text: string | JSX.Element
+  onClick: React.EventHandler<React.MouseEvent>
 }
 
 const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {

app/soapbox/components/sidebar-navigation-link.tsx

@@ -6,17 +6,17 @@ import { Icon, Text } from './ui';
 
 interface ISidebarNavigationLink {
   /** Notification count, if any. */
-  count?: number,
+  count?: number
   /** Optional max to cap count (ie: N+) */
   countMax?: number
   /** URL to an SVG icon. */
-  icon: string,
+  icon: string
   /** Link label. */
-  text: React.ReactNode,
+  text: React.ReactNode
   /** Route to an internal page. */
-  to?: string,
+  to?: string
   /** Callback when the link is clicked. */
-  onClick?: React.EventHandler<React.MouseEvent>,
+  onClick?: React.EventHandler<React.MouseEvent>
 }
 
 /** Desktop sidebar navigation link. */

app/soapbox/components/site-logo.tsx

@@ -5,9 +5,9 @@ import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
 
 interface ISiteLogo extends React.ComponentProps<'img'> {
   /** Extra class names for the <img> element. */
-  className?: string,
+  className?: string
   /** Override theme setting for <SitePreview /> */
-  theme?: 'dark' | 'light',
+  theme?: 'dark' | 'light'
 }
 
 /** Display the most appropriate site logo based on the theme and configuration. */

app/soapbox/components/status-action-bar.tsx

@@ -97,10 +97,10 @@ const messages = defineMessages({
 });
 
 interface IStatusActionBar {
-  status: Status,
-  withLabels?: boolean,
-  expandable?: boolean,
-  space?: 'expand' | 'compact',
+  status: Status
+  withLabels?: boolean
+  expandable?: boolean
+  space?: 'expand' | 'compact'
 }
 
 const StatusActionBar: React.FC<IStatusActionBar> = ({

app/soapbox/components/status-action-button.tsx

@@ -12,7 +12,7 @@ const COLORS = {
 type Color = keyof typeof COLORS;
 
 interface IStatusActionCounter {
-  count: number,
+  count: number
 }
 
 /** Action button numerical counter, eg "5" likes. */
@@ -25,14 +25,14 @@ const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX
 };
 
 interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  iconClassName?: string,
-  icon: string,
-  count?: number,
-  active?: boolean,
-  color?: Color,
-  filled?: boolean,
-  emoji?: string,
-  text?: React.ReactNode,
+  iconClassName?: string
+  icon: string
+  count?: number
+  active?: boolean
+  color?: Color
+  filled?: boolean
+  emoji?: string
+  text?: React.ReactNode
 }
 
 const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {

app/soapbox/components/status-content.tsx

@@ -20,7 +20,7 @@ const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
 const BIG_EMOJI_LIMIT = 10;
 
 interface IReadMoreButton {
-  onClick: React.MouseEventHandler,
+  onClick: React.MouseEventHandler
 }
 
 /** Button to expand a truncated status (due to too much content) */
@@ -32,11 +32,11 @@ const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
 );
 
 interface IStatusContent {
-  status: Status,
-  onClick?: () => void,
-  collapsable?: boolean,
-  translatable?: boolean,
-  textSize?: Sizes,
+  status: Status
+  onClick?: () => void
+  collapsable?: boolean
+  translatable?: boolean
+  textSize?: Sizes
 }
 
 /** Renders the text content of a status */

app/soapbox/components/status-hover-card.tsx

@@ -15,7 +15,7 @@ import { showStatusHoverCard } from './hover-status-wrapper';
 import { Card, CardBody } from './ui';
 
 interface IStatusHoverCard {
-  visible: boolean,
+  visible: boolean
 }
 
 /** Popup status preview that appears when hovering reply to */

app/soapbox/components/status-list.tsx

@@ -23,31 +23,31 @@ import type { Ad as AdEntity } from 'soapbox/types/soapbox';
 
 interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
   /** Unique key to preserve the scroll position when navigating back. */
-  scrollKey: string,
+  scrollKey: string
   /** List of status IDs to display. */
-  statusIds: ImmutableOrderedSet<string>,
+  statusIds: ImmutableOrderedSet<string>
   /** Last _unfiltered_ status ID (maxId) for pagination.  */
-  lastStatusId?: string,
+  lastStatusId?: string
   /** Pinned statuses to show at the top of the feed. */
-  featuredStatusIds?: ImmutableOrderedSet<string>,
+  featuredStatusIds?: ImmutableOrderedSet<string>
   /** Pagination callback when the end of the list is reached. */
-  onLoadMore?: (lastStatusId: string) => void,
+  onLoadMore?: (lastStatusId: string) => void
   /** Whether the data is currently being fetched. */
-  isLoading: boolean,
+  isLoading: boolean
   /** Whether the server did not return a complete page. */
-  isPartial?: boolean,
+  isPartial?: boolean
   /** Whether we expect an additional page of data. */
-  hasMore: boolean,
+  hasMore: boolean
   /** Message to display when the list is loaded but empty. */
-  emptyMessage: React.ReactNode,
+  emptyMessage: React.ReactNode
   /** ID of the timeline in Redux. */
-  timelineId?: string,
+  timelineId?: string
   /** Whether to display a gap or border between statuses in the list. */
-  divideType?: 'space' | 'border',
+  divideType?: 'space' | 'border'
   /** Whether to display ads. */
-  showAds?: boolean,
+  showAds?: boolean
   /** Whether to show group information. */
-  showGroup?: boolean,
+  showGroup?: boolean
 }
 
 /** Feed of statuses, built atop ScrollableList. */

app/soapbox/components/status-media.tsx

@@ -15,15 +15,15 @@ import type { Status, Attachment } from 'soapbox/types/entities';
 
 interface IStatusMedia {
   /** Status entity to render media for. */
-  status: Status,
+  status: Status
   /** Whether to display compact media. */
-  muted?: boolean,
+  muted?: boolean
   /** Callback when compact media is clicked. */
-  onClick?: () => void,
+  onClick?: () => void
   /** Whether or not the media is concealed behind a NSFW banner. */
-  showMedia?: boolean,
+  showMedia?: boolean
   /** Callback when visibility is toggled (eg clicked through NSFW). */
-  onToggleVisibility?: () => void,
+  onToggleVisibility?: () => void
 }
 
 /** Render media attachments for a status. */

app/soapbox/components/status-reaction-wrapper.tsx

@@ -8,8 +8,8 @@ import { isUserTouching } from 'soapbox/is-mobile';
 import { getReactForStatus } from 'soapbox/utils/emoji-reacts';
 
 interface IStatusReactionWrapper {
-  statusId: string,
-  children: JSX.Element,
+  statusId: string
+  children: JSX.Element
 }
 
 /** Provides emoji reaction functionality to the underlying button component */

app/soapbox/components/status-reply-mentions.tsx

@@ -10,8 +10,8 @@ import { useAppDispatch } from 'soapbox/hooks';
 import type { Account, Status } from 'soapbox/types/entities';
 
 interface IStatusReplyMentions {
-  status: Status,
-  hoverable?: boolean,
+  status: Status
+  hoverable?: boolean
 }
 
 const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable = true }) => {

app/soapbox/components/status.tsx

@@ -38,22 +38,22 @@ const messages = defineMessages({
 });
 
 export interface IStatus {
-  id?: string,
-  avatarSize?: number,
-  status: StatusEntity,
-  onClick?: () => void,
-  muted?: boolean,
-  hidden?: boolean,
-  unread?: boolean,
-  onMoveUp?: (statusId: string, featured?: boolean) => void,
-  onMoveDown?: (statusId: string, featured?: boolean) => void,
-  focusable?: boolean,
-  featured?: boolean,
-  hideActionBar?: boolean,
-  hoverable?: boolean,
-  variant?: 'default' | 'rounded',
-  showGroup?: boolean,
-  accountAction?: React.ReactElement,
+  id?: string
+  avatarSize?: number
+  status: StatusEntity
+  onClick?: () => void
+  muted?: boolean
+  hidden?: boolean
+  unread?: boolean
+  onMoveUp?: (statusId: string, featured?: boolean) => void
+  onMoveDown?: (statusId: string, featured?: boolean) => void
+  focusable?: boolean
+  featured?: boolean
+  hideActionBar?: boolean
+  hoverable?: boolean
+  variant?: 'default' | 'rounded'
+  showGroup?: boolean
+  accountAction?: React.ReactElement
 }
 
 const Status: React.FC<IStatus> = (props) => {

app/soapbox/components/still-image.tsx

@@ -5,17 +5,17 @@ import { useSettings } from 'soapbox/hooks';
 
 interface IStillImage {
   /** Image alt text. */
-  alt?: string,
+  alt?: string
   /** Extra class names for the outer <div> container. */
-  className?: string,
+  className?: string
   /** URL to the image */
-  src: string,
+  src: string
   /** Extra CSS styles on the outer <div> element. */
-  style?: React.CSSProperties,
+  style?: React.CSSProperties
   /** Whether to display the image contained vs filled in its container. */
-  letterboxed?: boolean,
+  letterboxed?: boolean
   /** Whether to show the file extension in the corner. */
-  showExt?: boolean,
+  showExt?: boolean
 }
 
 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
@@ -80,7 +80,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
 
 interface IExtensionBadge {
   /** File extension. */
-  ext: string,
+  ext: string
 }
 
 /** Badge displaying a file extension. */

app/soapbox/components/thumb-navigation-link.tsx

@@ -6,13 +6,13 @@ import IconWithCounter from 'soapbox/components/icon-with-counter';
 import { Icon, Text } from 'soapbox/components/ui';
 
 interface IThumbNavigationLink {
-  count?: number,
-  countMax?: number,
-  src: string,
-  text: string | React.ReactElement,
-  to: string,
-  exact?: boolean,
-  paths?: Array<string>,
+  count?: number
+  countMax?: number
+  src: string
+  text: string | React.ReactElement
+  to: string
+  exact?: boolean
+  paths?: Array<string>
 }
 
 const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, text, to, exact, paths }): JSX.Element => {

app/soapbox/components/tombstone.tsx

@@ -5,9 +5,9 @@ import { FormattedMessage } from 'react-intl';
 import { Text } from 'soapbox/components/ui';
 
 interface ITombstone {
-  id: string,
-  onMoveUp: (statusId: string) => void,
-  onMoveDown: (statusId: string) => void,
+  id: string
+  onMoveUp: (statusId: string) => void
+  onMoveDown: (statusId: string) => void
 }
 
 /** Represents a deleted item. */

app/soapbox/components/translate-button.tsx

@@ -11,7 +11,7 @@ import { Stack, Button, Text } from './ui';
 import type { Account, Status } from 'soapbox/types/entities';
 
 interface ITranslateButton {
-  status: Status,
+  status: Status
 }
 
 const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {

app/soapbox/components/ui/accordion/accordion.tsx

@@ -16,11 +16,11 @@ const messages = defineMessages({
 });
 
 interface IAccordion {
-  headline: React.ReactNode,
-  children?: React.ReactNode,
-  menu?: Menu,
-  expanded?: boolean,
-  onToggle?: (value: boolean) => void,
+  headline: React.ReactNode
+  children?: React.ReactNode
+  menu?: Menu
+  expanded?: boolean
+  onToggle?: (value: boolean) => void
 }
 
 /**

app/soapbox/components/ui/avatar/avatar.tsx

@@ -7,11 +7,11 @@ const AVATAR_SIZE = 42;
 
 interface IAvatar {
   /** URL to the avatar image. */
-  src: string,
+  src: string
   /** Width and height of the avatar in pixels. */
-  size?: number,
+  size?: number
   /** Extra class names for the div surrounding the avatar image. */
-  className?: string,
+  className?: string
 }
 
 /** Round profile avatar for accounts. */

app/soapbox/components/ui/banner/banner.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface IBanner {
-  theme: 'frosted' | 'opaque',
-  children: React.ReactNode,
-  className?: string,
+  theme: 'frosted' | 'opaque'
+  children: React.ReactNode
+  className?: string
 }
 
 /** Displays a sticky full-width banner at the bottom of the screen. */

app/soapbox/components/ui/button/button.tsx

@@ -10,27 +10,27 @@ import type { ButtonSizes, ButtonThemes } from './useButtonStyles';
 
 interface IButton {
   /** Whether this button expands the width of its container. */
-  block?: boolean,
+  block?: boolean
   /** Elements inside the <button> */
-  children?: React.ReactNode,
+  children?: React.ReactNode
   /** Extra class names for the button. */
-  className?: string,
+  className?: string
   /** Prevent the button from being clicked. */
-  disabled?: boolean,
+  disabled?: boolean
   /** URL to an SVG icon to render inside the button. */
-  icon?: string,
+  icon?: string
   /** Action when the button is clicked. */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
   /** A predefined button size. */
-  size?: ButtonSizes,
+  size?: ButtonSizes
   /** Text inside the button. Takes precedence over `children`. */
-  text?: React.ReactNode,
+  text?: React.ReactNode
   /** Makes the button into a navlink, if provided. */
-  to?: string,
+  to?: string
   /** Styles the button visually with a predefined theme. */
-  theme?: ButtonThemes,
+  theme?: ButtonThemes
   /** Whether this button should submit a form by default. */
-  type?: 'button' | 'submit',
+  type?: 'button' | 'submit'
 }
 
 /** Customizable button element with various themes. */

app/soapbox/components/ui/card/card.tsx

@@ -42,7 +42,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
 ));
 
 interface ICardHeader {
-  backHref?: string,
+  backHref?: string
   onBackClick?: (event: React.MouseEvent) => void
   className?: string
   children?: React.ReactNode

app/soapbox/components/ui/column/column.tsx

@@ -35,15 +35,15 @@ const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className }) =
 
 export interface IColumn {
   /** Route the back button goes to. */
-  backHref?: string,
+  backHref?: string
   /** Column title text. */
-  label?: string,
+  label?: string
   /** Whether this column should have a transparent background. */
-  transparent?: boolean,
+  transparent?: boolean
   /** Whether this column should have a title and back button. */
-  withHeader?: boolean,
+  withHeader?: boolean
   /** Extra class name for top <div> element. */
-  className?: string,
+  className?: string
   /** Ref forwarded to column. */
   ref?: React.Ref<HTMLDivElement>
   /** Children to display in the column. */

app/soapbox/components/ui/counter/counter.tsx

@@ -4,7 +4,7 @@ import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface ICounter {
   /** Number this counter should display. */
-  count: number,
+  count: number
   /** Optional max number (ie: N+) */
   countMax?: number
 }

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -9,13 +9,13 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 
 interface IEmojiButton {
   /** Unicode emoji character. */
-  emoji: string,
+  emoji: string
   /** Event handler when the emoji is clicked. */
   onClick(emoji: string): void
   /** Extra class name on the <button> element. */
-  className?: string,
+  className?: string
   /** Tab order of the button. */
-  tabIndex?: number,
+  tabIndex?: number
 }
 
 /** Clickable emoji button that scales when hovered. */

app/soapbox/components/ui/emoji/emoji.tsx

@@ -5,7 +5,7 @@ import { joinPublicPath } from 'soapbox/utils/static';
 
 interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
   /** Unicode emoji character. */
-  emoji: string,
+  emoji: string
 }
 
 /** A single emoji image. */

app/soapbox/components/ui/form-group/form-group.tsx

@@ -7,11 +7,11 @@ import Stack from '../stack/stack';
 
 interface IFormGroup {
   /** Input label message. */
-  labelText?: React.ReactNode,
+  labelText?: React.ReactNode
   /** Input label tooltip message. */
-  labelTitle?: string,
+  labelTitle?: string
   /** Input hint message. */
-  hintText?: React.ReactNode,
+  hintText?: React.ReactNode
   /** Input errors. */
   errors?: string[]
   /** Elements to display within the FormGroup. */

app/soapbox/components/ui/form/form.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 interface IForm {
   /** Form submission event handler. */
-  onSubmit?: (event: React.FormEvent) => void,
+  onSubmit?: (event: React.FormEvent) => void
   /** Class name override for the <form> element. */
-  className?: string,
+  className?: string
   /** Elements to display within the Form. */
-  children: React.ReactNode,
+  children: React.ReactNode
 }
 
 /** Form element with custom styles. */

app/soapbox/components/ui/hstack/hstack.tsx

@@ -44,7 +44,7 @@ interface IHStack extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick'>
   /** Whether to let the flexbox grow. */
   grow?: boolean
   /** HTML element to use for container. */
-  element?: keyof JSX.IntrinsicElements,
+  element?: keyof JSX.IntrinsicElements
   /** Extra CSS styles for the <div> */
   style?: React.CSSProperties
   /** Whether to let the flexbox wrap onto multiple lines. */

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -6,15 +6,15 @@ import Text from '../text/text';
 
 interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Class name for the <svg> icon. */
-  iconClassName?: string,
+  iconClassName?: string
   /** URL to the svg icon. */
-  src: string,
+  src: string
   /** Text to display next ot the button. */
-  text?: string,
+  text?: string
   /** Don't render a background behind the icon. */
-  transparent?: boolean,
+  transparent?: boolean
   /** Predefined styles to display for the button. */
-  theme?: 'seamless' | 'outlined',
+  theme?: 'seamless' | 'outlined'
   /** Override the data-testid */
   'data-testid'?: string
 }

app/soapbox/components/ui/icon/icon.tsx

@@ -6,17 +6,17 @@ import SvgIcon from './svg-icon';
 
 interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   /** Class name for the <svg> element. */
-  className?: string,
+  className?: string
   /** Number to display a counter over the icon. */
-  count?: number,
+  count?: number
   /** Optional max to cap count (ie: N+) */
-  countMax?: number,
+  countMax?: number
   /** Tooltip text for the icon. */
-  alt?: string,
+  alt?: string
   /** URL to the svg icon. */
-  src: string,
+  src: string
   /** Width and height of the icon in pixels. */
-  size?: number,
+  size?: number
 }
 
 /** Renders and SVG icon with optional counter. */

app/soapbox/components/ui/icon/svg-icon.tsx

@@ -3,13 +3,13 @@ import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-im
 
 interface ISvgIcon {
   /** Class name for the <svg> */
-  className?: string,
+  className?: string
   /** Tooltip text for the icon. */
-  alt?: string,
+  alt?: string
   /** URL to the svg file. */
-  src: string,
+  src: string
   /** Width and height of the icon in pixels. */
-  size?: number,
+  size?: number
 }
 
 /** Renders an inline SVG with an empty frame loading state */

app/soapbox/components/ui/input/input.tsx

@@ -16,29 +16,29 @@ type InputThemes = 'normal' | 'search'
 
 interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'style' | 'id'> {
   /** Put the cursor into the input on mount. */
-  autoFocus?: boolean,
+  autoFocus?: boolean
   /** The initial text in the input. */
-  defaultValue?: string,
+  defaultValue?: string
   /** Extra class names for the <input> element. */
-  className?: string,
+  className?: string
   /** Extra class names for the outer <div> element. */
-  outerClassName?: string,
+  outerClassName?: string
   /** URL to the svg icon. Cannot be used with prepend. */
-  icon?: string,
+  icon?: string
   /** Internal input name. */
-  name?: string,
+  name?: string
   /** Text to display before a value is entered. */
-  placeholder?: string,
+  placeholder?: string
   /** Text in the input. */
-  value?: string | number,
+  value?: string | number
   /** Change event handler for the input. */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   /** An element to display as prefix to input. Cannot be used with icon. */
-  prepend?: React.ReactElement,
+  prepend?: React.ReactElement
   /** An element to display as suffix to input. Cannot be used with password type. */
-  append?: React.ReactElement,
+  append?: React.ReactElement
   /** Theme to style the input with. */
-  theme?: InputThemes,
+  theme?: InputThemes
 }
 
 /** Form input element. */

app/soapbox/components/ui/layout/layout.tsx

@@ -14,9 +14,9 @@ interface ILayout {
 }
 
 interface LayoutComponent extends React.FC<ILayout> {
-  Sidebar: React.FC<ISidebar>,
-  Main: React.FC<React.HTMLAttributes<HTMLDivElement>>,
-  Aside: React.FC<IAside>,
+  Sidebar: React.FC<ISidebar>
+  Main: React.FC<React.HTMLAttributes<HTMLDivElement>>
+  Aside: React.FC<IAside>
 }
 
 /** Layout container, to hold Sidebar, Main, and Aside. */

app/soapbox/components/ui/modal/modal.tsx

@@ -25,36 +25,36 @@ const widths = {
 
 interface IModal {
   /** Callback when the modal is cancelled. */
-  cancelAction?: () => void,
+  cancelAction?: () => void
   /** Cancel button text. */
-  cancelText?: React.ReactNode,
+  cancelText?: React.ReactNode
   /** URL to an SVG icon for the close button. */
-  closeIcon?: string,
+  closeIcon?: string
   /** Position of the close button. */
-  closePosition?: 'left' | 'right',
+  closePosition?: 'left' | 'right'
   /** Callback when the modal is confirmed. */
-  confirmationAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void,
+  confirmationAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void
   /** Whether the confirmation button is disabled. */
-  confirmationDisabled?: boolean,
+  confirmationDisabled?: boolean
   /** Confirmation button text. */
-  confirmationText?: React.ReactNode,
+  confirmationText?: React.ReactNode
   /** Confirmation button theme. */
-  confirmationTheme?: ButtonThemes,
+  confirmationTheme?: ButtonThemes
   /** Whether to use full width style for confirmation button. */
-  confirmationFullWidth?: boolean,
+  confirmationFullWidth?: boolean
   /** Callback when the modal is closed. */
-  onClose?: () => void,
+  onClose?: () => void
   /** Callback when the secondary action is chosen. */
-  secondaryAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void,
+  secondaryAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void
   /** Secondary button text. */
-  secondaryText?: React.ReactNode,
-  secondaryDisabled?: boolean,
+  secondaryText?: React.ReactNode
+  secondaryDisabled?: boolean
   /** Don't focus the "confirm" button on mount. */
-  skipFocus?: boolean,
+  skipFocus?: boolean
   /** Title text for the modal. */
-  title?: React.ReactNode,
-  width?: keyof typeof widths,
-  children?: React.ReactNode,
+  title?: React.ReactNode
+  width?: keyof typeof widths
+  children?: React.ReactNode
 }
 
 /** Displays a modal dialog box. */

app/soapbox/components/ui/phone-input/country-code-dropdown.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { COUNTRY_CODES, CountryCode } from 'soapbox/utils/phone';
 
 interface ICountryCodeDropdown {
-  countryCode: CountryCode,
-  onChange(countryCode: CountryCode): void,
+  countryCode: CountryCode
+  onChange(countryCode: CountryCode): void
 }
 
 /** Dropdown menu to select a country code. */

app/soapbox/components/ui/phone-input/phone-input.tsx

@@ -9,11 +9,11 @@ import CountryCodeDropdown from './country-code-dropdown';
 
 interface IPhoneInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'required' | 'autoFocus'> {
   /** E164 phone number. */
-  value?: string,
+  value?: string
   /** Change handler which receives the E164 phone string. */
-  onChange?: (phone: string | undefined) => void,
+  onChange?: (phone: string | undefined) => void
   /** Country code that's selected on mount. */
-  defaultCountryCode?: CountryCode,
+  defaultCountryCode?: CountryCode
 }
 
 /** Internationalized phone input with country code picker. */

app/soapbox/components/ui/select/select.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  children: Iterable<React.ReactNode>,
+  children: Iterable<React.ReactNode>
 }
 
 /** Multiple-select dropdown. */

app/soapbox/components/ui/spinner/spinner.tsx

@@ -8,7 +8,7 @@ import './spinner.css';
 
 interface ISpinner {
   /** Width and height of the spinner in pixels. */
-  size?: number,
+  size?: number
   /** Whether to display "Loading..." beneath the spinner. */
   withText?: boolean
 }

app/soapbox/components/ui/stack/stack.tsx

@@ -39,7 +39,7 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
   /** Whether to let the flexbox grow. */
   grow?: boolean
   /** HTML element to use for container. */
-  element?: keyof JSX.IntrinsicElements,
+  element?: keyof JSX.IntrinsicElements
 }
 
 /** Vertical stack of child elements. */

app/soapbox/components/ui/streamfield/streamfield.tsx

@@ -14,27 +14,27 @@ const messages = defineMessages({
 
 /** Type of the inner Streamfield input component. */
 export type StreamfieldComponent<T> = React.ComponentType<{
-  value: T,
-  onChange: (value: T) => void,
+  value: T
+  onChange: (value: T) => void
 }>;
 
 interface IStreamfield {
   /** Array of values for the streamfield. */
-  values: any[],
+  values: any[]
   /** Input label message. */
-  label?: React.ReactNode,
+  label?: React.ReactNode
   /** Input hint message. */
-  hint?: React.ReactNode,
+  hint?: React.ReactNode
   /** Callback to add an item. */
-  onAddItem?: () => void,
+  onAddItem?: () => void
   /** Callback to remove an item by index. */
-  onRemoveItem?: (i: number) => void,
+  onRemoveItem?: (i: number) => void
   /** Callback when values are changed. */
-  onChange: (values: any[]) => void,
+  onChange: (values: any[]) => void
   /** Input to render for each value. */
-  component: StreamfieldComponent<any>,
+  component: StreamfieldComponent<any>
   /** Maximum number of allowed inputs. */
-  maxItems?: number,
+  maxItems?: number
 }
 
 /** List of inputs that can be added or removed. */
@@ -72,7 +72,7 @@ const Streamfield: React.FC<IStreamfield> = ({
               <Component key={i} onChange={handleChange(i)} value={value} />
               {onRemoveItem && (
                 <IconButton
-                  iconClassName='w-4 h-4'
+                  iconClassName='h-4 w-4'
                   className='bg-transparent text-gray-400 hover:text-gray-600'
                   src={require('@tabler/icons/x.svg')}
                   onClick={() => onRemoveItem(i)}

app/soapbox/components/ui/tabs/tabs.tsx

@@ -18,7 +18,7 @@ const AnimatedContext = React.createContext(null);
 
 interface IAnimatedInterface {
   /** Callback when a tab is chosen. */
-  onChange(index: number): void,
+  onChange(index: number): void
   /** Default tab index. */
   defaultIndex: number
   children: React.ReactNode
@@ -63,13 +63,13 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
 
 interface IAnimatedTab {
   /** ARIA role. */
-  role: 'button',
+  role: 'button'
   /** Element to represent the tab. */
-  as: 'a' | 'button',
+  as: 'a' | 'button'
   /** Route to visit when the tab is chosen. */
-  href?: string,
+  href?: string
   /** Tab title text. */
-  title: string,
+  title: string
   /** Index value of the tab. */
   index: number
 }
@@ -104,26 +104,26 @@ const AnimatedTab: React.FC<IAnimatedTab> = ({ index, ...props }) => {
 /** Structure to represent a tab. */
 export type Item = {
   /** Tab text. */
-  text: React.ReactNode,
+  text: React.ReactNode
   /** Tab tooltip text. */
-  title?: string,
+  title?: string
   /** URL to visit when the tab is selected. */
-  href?: string,
+  href?: string
   /** Route to visit when the tab is selected. */
-  to?: string,
+  to?: string
   /** Callback when the tab is selected. */
-  action?: () => void,
+  action?: () => void
   /** Display a counter over the tab. */
-  count?: number,
+  count?: number
   /** Unique name for this tab. */
   name: string
 }
 
 interface ITabs {
   /** Array of structured tab items. */
-  items: Item[],
+  items: Item[]
   /** Name of the active tab item. */
-  activeItem: string,
+  activeItem: string
 }
 
 /** Animated tabs component. */

app/soapbox/components/ui/tag-input/tag-input.tsx

@@ -5,9 +5,9 @@ import HStack from '../hstack/hstack';
 import Tag from './tag';
 
 interface ITagInput {
-  tags: string[],
-  onChange: (tags: string[]) => void,
-  placeholder?: string,
+  tags: string[]
+  onChange: (tags: string[]) => void
+  placeholder?: string
 }
 
 /** Manage a list of tags. */

app/soapbox/components/ui/tag-input/tag.tsx

@@ -5,9 +5,9 @@ import Text from '../text/text';
 
 interface ITag {
   /** Name of the tag. */
-  tag: string,
+  tag: string
   /** Callback when the X icon is pressed. */
-  onDelete: (tag: string) => void,
+  onDelete: (tag: string) => void
 }
 
 /** A single editable Tag (used by TagInput). */
@@ -17,7 +17,7 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
       <Text theme='white'>{tag}</Text>
 
       <IconButton
-        iconClassName='w-4 h-4'
+        iconClassName='h-4 w-4'
         src={require('@tabler/icons/x.svg')}
         onClick={() => onDelete(tag)}
         transparent