diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 51cc6e833..953c7e252 100644
--- a/.eslintrc.cjs
+++ b/.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: [
diff --git a/app/soapbox/actions/accounts.ts b/app/soapbox/actions/accounts.ts
index b4a54201f..a389e29cd 100644
--- a/app/soapbox/actions/accounts.ts
+++ b/app/soapbox/actions/accounts.ts
@@ -228,7 +228,7 @@ const fetchAccountFail = (id: string | null, error: AxiosError) => ({
 });
 
 type FollowAccountOpts = {
-  reblogs?: boolean,
+  reblogs?: boolean
   notify?: boolean
 };
 
diff --git a/app/soapbox/actions/export-data.ts b/app/soapbox/actions/export-data.ts
index 1ddab9103..519725ea2 100644
--- a/app/soapbox/actions/export-data.ts
+++ b/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) {
diff --git a/app/soapbox/actions/familiar-followers.ts b/app/soapbox/actions/familiar-followers.ts
index ec6eca6d8..2d8aa6786 100644
--- a/app/soapbox/actions/familiar-followers.ts
+++ b/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
diff --git a/app/soapbox/actions/import-data.ts b/app/soapbox/actions/import-data.ts
index 90f81e7e7..023529453 100644
--- a/app/soapbox/actions/import-data.ts
+++ b/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
 }
 
diff --git a/app/soapbox/actions/push-notifications/registerer.ts b/app/soapbox/actions/push-notifications/registerer.ts
index 3a9d4fb9e..2ea7fbab8 100644
--- a/app/soapbox/actions/push-notifications/registerer.ts
+++ b/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
diff --git a/app/soapbox/actions/reports.ts b/app/soapbox/actions/reports.ts
index 46b51cd55..d6a24a8c8 100644
--- a/app/soapbox/actions/reports.ts
+++ b/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
 }
 
diff --git a/app/soapbox/actions/settings.ts b/app/soapbox/actions/settings.ts
index 5f4a600d2..79ffe1975 100644
--- a/app/soapbox/actions/settings.ts
+++ b/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({
diff --git a/app/soapbox/actions/streaming.ts b/app/soapbox/actions/streaming.ts
index a02b3c1d7..c9095e021 100644
--- a/app/soapbox/actions/streaming.ts
+++ b/app/soapbox/actions/streaming.ts
@@ -81,7 +81,7 @@ const updateChatQuery = (chat: IChat) => {
 };
 
 interface StreamOpts {
-  statContext?: IStatContext,
+  statContext?: IStatContext
 }
 
 const connectTimelineStream = (
diff --git a/app/soapbox/actions/verification.ts b/app/soapbox/actions/verification.ts
index d038a79a9..2273bb499 100644
--- a/app/soapbox/actions/verification.ts
+++ b/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'>
 };
 
diff --git a/app/soapbox/components/__mocks__/react-inlinesvg.tsx b/app/soapbox/components/__mocks__/react-inlinesvg.tsx
index 1d4fde154..1317dcbcb 100644
--- a/app/soapbox/components/__mocks__/react-inlinesvg.tsx
+++ b/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 => {
diff --git a/app/soapbox/components/account-search.tsx b/app/soapbox/components/account-search.tsx
index f69845dd3..cbaab0f18 100644
--- a/app/soapbox/components/account-search.tsx
+++ b/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. */
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 069cde252..ec882f060 100644
--- a/app/soapbox/components/account.tsx
+++ b/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'
         />
       );
     }
diff --git a/app/soapbox/components/animated-number.tsx b/app/soapbox/components/animated-number.tsx
index e7dd82462..199a8b4db 100644
--- a/app/soapbox/components/animated-number.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/announcements/announcement-content.tsx b/app/soapbox/components/announcements/announcement-content.tsx
index f4265d1fd..459f88e64 100644
--- a/app/soapbox/components/announcements/announcement-content.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/announcements/announcement.tsx b/app/soapbox/components/announcements/announcement.tsx
index ea96b37fd..62d5a1170 100644
--- a/app/soapbox/components/announcements/announcement.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/announcements/emoji.tsx b/app/soapbox/components/announcements/emoji.tsx
index 3628227df..ecc28fcf8 100644
--- a/app/soapbox/components/announcements/emoji.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/announcements/reaction.tsx b/app/soapbox/components/announcements/reaction.tsx
index edcdc5206..c5ea60212 100644
--- a/app/soapbox/components/announcements/reaction.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/announcements/reactions-bar.tsx b/app/soapbox/components/announcements/reactions-bar.tsx
index 566d8a106..ebe651056 100644
--- a/app/soapbox/components/announcements/reactions-bar.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/autosuggest-account-input.tsx b/app/soapbox/components/autosuggest-account-input.tsx
index 383bf7583..d191aec15 100644
--- a/app/soapbox/components/autosuggest-account-input.tsx
+++ b/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> = ({
diff --git a/app/soapbox/components/autosuggest-emoji.tsx b/app/soapbox/components/autosuggest-emoji.tsx
index 7074605a2..9893fa345 100644
--- a/app/soapbox/components/autosuggest-emoji.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx
index 5213e3585..dba457ee8 100644
--- a/app/soapbox/components/autosuggest-input.tsx
+++ b/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> {
diff --git a/app/soapbox/components/autosuggest-location.tsx b/app/soapbox/components/autosuggest-location.tsx
index fab4493c9..23ea09807 100644
--- a/app/soapbox/components/autosuggest-location.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/autosuggest-textarea.tsx b/app/soapbox/components/autosuggest-textarea.tsx
index 008bb9f81..df791d91a 100644
--- a/app/soapbox/components/autosuggest-textarea.tsx
+++ b/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> {
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 56e1d32d7..fac7487e0 100644
--- a/app/soapbox/components/badge.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/birthday-input.tsx b/app/soapbox/components/birthday-input.tsx
index 3be57348a..0d21ed287 100644
--- a/app/soapbox/components/birthday-input.tsx
+++ b/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'>
diff --git a/app/soapbox/components/blurhash.tsx b/app/soapbox/components/blurhash.tsx
index cdf5cbf9e..d0e0f43b9 100644
--- a/app/soapbox/components/blurhash.tsx
+++ b/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
 }
 
 /**
diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx
index a8175fe3f..57f4db55d 100644
--- a/app/soapbox/components/copyable-input.tsx
+++ b/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. */
diff --git a/app/soapbox/components/domain.tsx b/app/soapbox/components/domain.tsx
index 117b94120..61470ced5 100644
--- a/app/soapbox/components/domain.tsx
+++ b/app/soapbox/components/domain.tsx
@@ -12,7 +12,7 @@ const messages = defineMessages({
 });
 
 interface IDomain {
-  domain: string,
+  domain: string
 }
 
 const Domain: React.FC<IDomain> = ({ domain }) => {
diff --git a/app/soapbox/components/error-boundary.tsx b/app/soapbox/components/error-boundary.tsx
index 3a6b4ac0b..4ab76e46d 100644
--- a/app/soapbox/components/error-boundary.tsx
+++ b/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> {
diff --git a/app/soapbox/components/extended-video-player.tsx b/app/soapbox/components/extended-video-player.tsx
index ec7e7f3f4..f31041bcf 100644
--- a/app/soapbox/components/extended-video-player.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/fork-awesome-icon.tsx b/app/soapbox/components/fork-awesome-icon.tsx
index a4e268b24..7a836da7b 100644
--- a/app/soapbox/components/fork-awesome-icon.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/hashtag.tsx b/app/soapbox/components/hashtag.tsx
index 41267d19c..8dc74230e 100644
--- a/app/soapbox/components/hashtag.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/hover-ref-wrapper.tsx b/app/soapbox/components/hover-ref-wrapper.tsx
index 8a9d0adec..d116e5d13 100644
--- a/app/soapbox/components/hover-ref-wrapper.tsx
+++ b/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. */
diff --git a/app/soapbox/components/hover-status-wrapper.tsx b/app/soapbox/components/hover-status-wrapper.tsx
index 0176bf41f..c2d2c4eda 100644
--- a/app/soapbox/components/hover-status-wrapper.tsx
+++ b/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. */
diff --git a/app/soapbox/components/icon-with-counter.tsx b/app/soapbox/components/icon-with-counter.tsx
index 95e1060d8..b244f932b 100644
--- a/app/soapbox/components/icon-with-counter.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/icon.tsx b/app/soapbox/components/icon.tsx
index 5239bc46b..300265ea5 100644
--- a/app/soapbox/components/icon.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 4dd1f85b7..3dd77c34c 100644
--- a/app/soapbox/components/list.tsx
+++ b/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
diff --git a/app/soapbox/components/load-gap.tsx b/app/soapbox/components/load-gap.tsx
index c26da0281..2836fb14f 100644
--- a/app/soapbox/components/load-gap.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/load-more.tsx b/app/soapbox/components/load-more.tsx
index e36ae116f..e937965fd 100644
--- a/app/soapbox/components/load-more.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/location-search.tsx b/app/soapbox/components/location-search.tsx
index fc108e0e8..df0622f2f 100644
--- a/app/soapbox/components/location-search.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index dbf1119cc..001ac0729 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/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) => {
diff --git a/app/soapbox/components/modal-root.tsx b/app/soapbox/components/modal-root.tsx
index 581c167d8..84c1252c9 100644
--- a/app/soapbox/components/modal-root.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/outline-box.tsx b/app/soapbox/components/outline-box.tsx
index 5db74c4ab..6994e6bd1 100644
--- a/app/soapbox/components/outline-box.tsx
+++ b/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. */
diff --git a/app/soapbox/components/polls/poll-footer.tsx b/app/soapbox/components/polls/poll-footer.tsx
index 693b28db1..c62cc9522 100644
--- a/app/soapbox/components/polls/poll-footer.tsx
+++ b/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 => {
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index d318b287e..792a3a066 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/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 => {
diff --git a/app/soapbox/components/polls/poll.tsx b/app/soapbox/components/polls/poll.tsx
index 2b6f99392..a925e9597 100644
--- a/app/soapbox/components/polls/poll.tsx
+++ b/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({
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index e832db513..211776836 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/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. */
diff --git a/app/soapbox/components/progress-circle.tsx b/app/soapbox/components/progress-circle.tsx
index fa85f9a63..af5bf396c 100644
--- a/app/soapbox/components/progress-circle.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/pull-to-refresh.tsx b/app/soapbox/components/pull-to-refresh.tsx
index 829441b37..bf033eaa4 100644
--- a/app/soapbox/components/pull-to-refresh.tsx
+++ b/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
 }
 
 /**
diff --git a/app/soapbox/components/pullable.tsx b/app/soapbox/components/pullable.tsx
index 88394b828..a8fe6afea 100644
--- a/app/soapbox/components/pullable.tsx
+++ b/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
 }
 
 /**
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index 8122480fe..065d41216 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/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. */
diff --git a/app/soapbox/components/radio.tsx b/app/soapbox/components/radio.tsx
index ef204b06f..f81412bb7 100644
--- a/app/soapbox/components/radio.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/relative-timestamp.tsx b/app/soapbox/components/relative-timestamp.tsx
index 6af0883c6..69cec7374 100644
--- a/app/soapbox/components/relative-timestamp.tsx
+++ b/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. */
diff --git a/app/soapbox/components/safe-embed.tsx b/app/soapbox/components/safe-embed.tsx
index b794bbed2..d77d0b3fa 100644
--- a/app/soapbox/components/safe-embed.tsx
+++ b/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). */
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 21c368b34..2a1ddd812 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/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. */
diff --git a/app/soapbox/components/scrollable-list.tsx b/app/soapbox/components/scrollable-list.tsx
index fae4b0f40..a56c294b3 100644
--- a/app/soapbox/components/scrollable-list.tsx
+++ b/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
 }
diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index e87cb16df..ffe3a0e98 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 3103972db..108d4376c 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/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. */
diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 771c19a57..eb7f414b0 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/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. */
diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 813ed0aae..8e8d9c202 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/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> = ({
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index 7cdb36a4e..6fe7130f6 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/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 => {
diff --git a/app/soapbox/components/status-content.tsx b/app/soapbox/components/status-content.tsx
index 672e8866f..2dcf673d6 100644
--- a/app/soapbox/components/status-content.tsx
+++ b/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 */
diff --git a/app/soapbox/components/status-hover-card.tsx b/app/soapbox/components/status-hover-card.tsx
index bd1a92787..4f91bff4e 100644
--- a/app/soapbox/components/status-hover-card.tsx
+++ b/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 */
diff --git a/app/soapbox/components/status-list.tsx b/app/soapbox/components/status-list.tsx
index f7da49f2a..937dac8de 100644
--- a/app/soapbox/components/status-list.tsx
+++ b/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. */
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index d1ca296e9..0867e6ca2 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/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. */
diff --git a/app/soapbox/components/status-reaction-wrapper.tsx b/app/soapbox/components/status-reaction-wrapper.tsx
index 47677e157..224da7cda 100644
--- a/app/soapbox/components/status-reaction-wrapper.tsx
+++ b/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 */
diff --git a/app/soapbox/components/status-reply-mentions.tsx b/app/soapbox/components/status-reply-mentions.tsx
index 335fd38f3..7bd44495c 100644
--- a/app/soapbox/components/status-reply-mentions.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 3996777fb..16358f9dd 100644
--- a/app/soapbox/components/status.tsx
+++ b/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) => {
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index e3844cda4..098da0579 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/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. */
diff --git a/app/soapbox/components/thumb-navigation-link.tsx b/app/soapbox/components/thumb-navigation-link.tsx
index fab88b810..46c3ae4a7 100644
--- a/app/soapbox/components/thumb-navigation-link.tsx
+++ b/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 => {
diff --git a/app/soapbox/components/tombstone.tsx b/app/soapbox/components/tombstone.tsx
index 0507d90dd..6c6a2a6f9 100644
--- a/app/soapbox/components/tombstone.tsx
+++ b/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. */
diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index bd6df6d9d..68358ff60 100644
--- a/app/soapbox/components/translate-button.tsx
+++ b/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 }) => {
diff --git a/app/soapbox/components/ui/accordion/accordion.tsx b/app/soapbox/components/ui/accordion/accordion.tsx
index e9df06014..f83a011be 100644
--- a/app/soapbox/components/ui/accordion/accordion.tsx
+++ b/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
 }
 
 /**
diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx
index 89ea8ff36..aef3c7147 100644
--- a/app/soapbox/components/ui/avatar/avatar.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/banner/banner.tsx b/app/soapbox/components/ui/banner/banner.tsx
index 3acba0a31..da6f7ed03 100644
--- a/app/soapbox/components/ui/banner/banner.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index c256b706b..e06ffa7d1 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index e2ed0ff2e..927b6944a 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/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
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 3cb746f0d..317cf9841 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/counter/counter.tsx b/app/soapbox/components/ui/counter/counter.tsx
index e0fbb6004..fcbb17830 100644
--- a/app/soapbox/components/ui/counter/counter.tsx
+++ b/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
 }
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 7fb7418e7..8cb93a195 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/emoji/emoji.tsx b/app/soapbox/components/ui/emoji/emoji.tsx
index 826f7482b..b631f230d 100644
--- a/app/soapbox/components/ui/emoji/emoji.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index bbd094d2e..e3c897a6f 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/form/form.tsx b/app/soapbox/components/ui/form/form.tsx
index 519fbecec..3e358689c 100644
--- a/app/soapbox/components/ui/form/form.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index 69488711f..fcd35d16c 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index df4228570..086b5a2c0 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/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
 }
diff --git a/app/soapbox/components/ui/icon/icon.tsx b/app/soapbox/components/ui/icon/icon.tsx
index 29ebc77c9..5c294a1a8 100644
--- a/app/soapbox/components/ui/icon/icon.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/icon/svg-icon.tsx b/app/soapbox/components/ui/icon/svg-icon.tsx
index c651ac903..eefe88d0d 100644
--- a/app/soapbox/components/ui/icon/svg-icon.tsx
+++ b/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 */
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index af8539bcb..2de6eb566 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/layout/layout.tsx b/app/soapbox/components/ui/layout/layout.tsx
index db3288d59..0f54fff76 100644
--- a/app/soapbox/components/ui/layout/layout.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 922820afd..69daac0b8 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
index e420b733f..208db6952 100644
--- a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/phone-input/phone-input.tsx b/app/soapbox/components/ui/phone-input/phone-input.tsx
index 7de0437ce..d3072f2a1 100644
--- a/app/soapbox/components/ui/phone-input/phone-input.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index 2c03d083c..8eb011616 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/spinner/spinner.tsx b/app/soapbox/components/ui/spinner/spinner.tsx
index 98c3eaae7..3f18ce030 100644
--- a/app/soapbox/components/ui/spinner/spinner.tsx
+++ b/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
 }
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 622a5c549..4795f11d3 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index b161a1a6d..49658099a 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/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)}
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 5b8c47cbf..75c80a363 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/tag-input/tag-input.tsx b/app/soapbox/components/ui/tag-input/tag-input.tsx
index fe09bf0ee..a9615c172 100644
--- a/app/soapbox/components/ui/tag-input/tag-input.tsx
+++ b/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. */
diff --git a/app/soapbox/components/ui/tag-input/tag.tsx b/app/soapbox/components/ui/tag-input/tag.tsx
index 94ce5bbfb..5587d3927 100644
--- a/app/soapbox/components/ui/tag-input/tag.tsx
+++ b/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
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index b31204e15..458a180f9 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -56,33 +56,33 @@ type Directions = 'ltr' | 'rtl'
 
 interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'dangerouslySetInnerHTML' | 'tabIndex' | 'lang'> {
   /** Text content. */
-  children?: React.ReactNode,
+  children?: React.ReactNode
   /** How to align the text. */
-  align?: keyof typeof alignments,
+  align?: keyof typeof alignments
   /** Extra class names for the outer element. */
-  className?: string,
+  className?: string
   /** Text direction. */
-  direction?: Directions,
+  direction?: Directions
   /** Typeface of the text. */
-  family?: keyof typeof families,
+  family?: keyof typeof families
   /** The "for" attribute specifies which form element a label is bound to. */
-  htmlFor?: string,
+  htmlFor?: string
   /** Font size of the text. */
-  size?: Sizes,
+  size?: Sizes
   /** HTML element name of the outer element. */
-  tag?: Tags,
+  tag?: Tags
   /** Theme for the text. */
-  theme?: keyof typeof themes,
+  theme?: keyof typeof themes
   /** Letter-spacing of the text. */
-  tracking?: keyof typeof trackingSizes,
+  tracking?: keyof typeof trackingSizes
   /** Transform (eg uppercase) for the text. */
-  transform?: keyof typeof transformProperties,
+  transform?: keyof typeof transformProperties
   /** Whether to truncate the text if its container is too small. */
-  truncate?: boolean,
+  truncate?: boolean
   /** Font weight of the text. */
-  weight?: keyof typeof weights,
+  weight?: keyof typeof weights
   /** Tooltip title. */
-  title?: string,
+  title?: string
 }
 
 /** UI-friendly text container with dark mode support. */
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index 1b1081ce4..03ddda81d 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -3,31 +3,31 @@ import React, { useState } from 'react';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
-  autoFocus?: boolean,
+  autoFocus?: boolean
   /** Allows the textarea height to grow while typing */
-  autoGrow?: boolean,
+  autoGrow?: boolean
   /** Used with "autoGrow". Sets a max number of rows. */
-  maxRows?: number,
+  maxRows?: number
   /** Used with "autoGrow". Sets a min number of rows. */
-  minRows?: number,
+  minRows?: number
   /** The initial text in the input. */
-  defaultValue?: string,
+  defaultValue?: string
   /** Internal input name. */
-  name?: string,
+  name?: string
   /** Renders the textarea as a code editor. */
-  isCodeEditor?: boolean,
+  isCodeEditor?: boolean
   /** Text to display before a value is entered. */
-  placeholder?: string,
+  placeholder?: string
   /** Text in the textarea. */
-  value?: string,
+  value?: string
   /** Whether the device should autocomplete text in this textarea. */
-  autoComplete?: string,
+  autoComplete?: string
   /** Whether to display the textarea in red. */
-  hasError?: boolean,
+  hasError?: boolean
   /** Whether or not you can resize the teztarea */
-  isResizeable?: boolean,
+  isResizeable?: boolean
   /** Textarea theme. */
-  theme?: 'default' | 'transparent',
+  theme?: 'default' | 'transparent'
 }
 
 /** Textarea with custom styles. */
diff --git a/app/soapbox/components/ui/tooltip/tooltip.tsx b/app/soapbox/components/ui/tooltip/tooltip.tsx
index f5e22d195..f2b6ffedc 100644
--- a/app/soapbox/components/ui/tooltip/tooltip.tsx
+++ b/app/soapbox/components/ui/tooltip/tooltip.tsx
@@ -7,9 +7,9 @@ import './tooltip.css';
 
 interface ITooltip {
   /** Text to display in the tooltip. */
-  text: string,
+  text: string
   /** Element to display the tooltip around. */
-  children: React.ReactNode,
+  children: React.ReactNode
 }
 
 const centered = (triggerRect: any, tooltipRect: any) => {
diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index e5441c57e..0b8688f83 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -4,7 +4,7 @@ import { HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
-  title: React.ReactNode,
+  title: React.ReactNode
 }
 
 /** Title of a widget. */
@@ -23,15 +23,15 @@ const WidgetBody: React.FC<IWidgetBody> = ({ children }): JSX.Element => (
 
 interface IWidget {
   /** Widget title text. */
-  title: React.ReactNode,
+  title: React.ReactNode
   /** Callback when the widget action is clicked. */
-  onActionClick?: () => void,
+  onActionClick?: () => void
   /** URL to the svg icon for the widget action. */
-  actionIcon?: string,
+  actionIcon?: string
   /** Text for the action. */
-  actionTitle?: string,
-  action?: JSX.Element,
-  children?: React.ReactNode,
+  actionTitle?: string
+  action?: JSX.Element
+  children?: React.ReactNode
 }
 
 /** Sidebar widget. */
diff --git a/app/soapbox/components/upload.tsx b/app/soapbox/components/upload.tsx
index 2abf0bbdd..da452276d 100644
--- a/app/soapbox/components/upload.tsx
+++ b/app/soapbox/components/upload.tsx
@@ -60,12 +60,12 @@ const messages = defineMessages({
 });
 
 interface IUpload {
-  media: Attachment,
-  onSubmit?(): void,
-  onDelete?(): void,
-  onDescriptionChange?(description: string): void,
-  descriptionLimit?: number,
-  withPreview?: boolean,
+  media: Attachment
+  onSubmit?(): void
+  onDelete?(): void
+  onDescriptionChange?(description: string): void
+  descriptionLimit?: number
+  withPreview?: boolean
 }
 
 const Upload: React.FC<IUpload> = ({
diff --git a/app/soapbox/components/verification-badge.tsx b/app/soapbox/components/verification-badge.tsx
index f90034d9f..df10acc7b 100644
--- a/app/soapbox/components/verification-badge.tsx
+++ b/app/soapbox/components/verification-badge.tsx
@@ -10,7 +10,7 @@ const messages = defineMessages({
 });
 
 interface IVerificationBadge {
-  className?: string,
+  className?: string
 }
 
 const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 0f1c2253d..fb6ce9481 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -202,7 +202,7 @@ const SoapboxMount = () => {
 };
 
 interface ISoapboxLoad {
-  children: React.ReactNode,
+  children: React.ReactNode
 }
 
 /** Initial data loader. */
@@ -258,7 +258,7 @@ const SoapboxLoad: React.FC<ISoapboxLoad> = ({ children }) => {
 };
 
 interface ISoapboxHead {
-  children: React.ReactNode,
+  children: React.ReactNode
 }
 
 /** Injects metadata into site head with Helmet. */
diff --git a/app/soapbox/containers/status-container.tsx b/app/soapbox/containers/status-container.tsx
index 5398547c9..1efad6adc 100644
--- a/app/soapbox/containers/status-container.tsx
+++ b/app/soapbox/containers/status-container.tsx
@@ -5,14 +5,14 @@ import { useAppSelector } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
 interface IStatusContainer extends Omit<IStatus, 'status'> {
-  id: string,
-  contextType?: string,
+  id: string
+  contextType?: string
   /** @deprecated Unused. */
-  otherAccounts?: any,
+  otherAccounts?: any
   /** @deprecated Unused. */
-  getScrollPosition?: any,
+  getScrollPosition?: any
   /** @deprecated Unused. */
-  updateScrollBottom?: any,
+  updateScrollBottom?: any
 }
 
 /**
diff --git a/app/soapbox/contexts/stat-context.tsx b/app/soapbox/contexts/stat-context.tsx
index 986d4ae4c..2add9d083 100644
--- a/app/soapbox/contexts/stat-context.tsx
+++ b/app/soapbox/contexts/stat-context.tsx
@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo, useState } from 'react';
 
 type IStatContext = {
-  unreadChatsCount: number,
+  unreadChatsCount: number
   setUnreadChatsCount: React.Dispatch<React.SetStateAction<number>>
 }
 
diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx
index 6e0bae840..b568f31bf 100644
--- a/app/soapbox/features/account-gallery/components/media-item.tsx
+++ b/app/soapbox/features/account-gallery/components/media-item.tsx
@@ -10,8 +10,8 @@ import { isIOS } from 'soapbox/is-mobile';
 import type { Attachment } from 'soapbox/types/entities';
 
 interface IMediaItem {
-  attachment: Attachment,
-  onOpenMedia: (attachment: Attachment) => void,
+  attachment: Attachment
+  onOpenMedia: (attachment: Attachment) => void
 }
 
 const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
diff --git a/app/soapbox/features/account-gallery/index.tsx b/app/soapbox/features/account-gallery/index.tsx
index bac76dec0..8aec040e9 100644
--- a/app/soapbox/features/account-gallery/index.tsx
+++ b/app/soapbox/features/account-gallery/index.tsx
@@ -20,8 +20,8 @@ import type { List as ImmutableList } from 'immutable';
 import type { Attachment, Status } from 'soapbox/types/entities';
 
 interface ILoadMoreMedia {
-  maxId: string | null,
-  onLoadMore: (value: string | null) => void,
+  maxId: string | null
+  onLoadMore: (value: string | null) => void
 }
 
 const LoadMoreMedia: React.FC<ILoadMoreMedia> = ({ maxId, onLoadMore }) => {
diff --git a/app/soapbox/features/account-timeline/components/moved-note.tsx b/app/soapbox/features/account-timeline/components/moved-note.tsx
index a41e241d1..38c1a8e2c 100644
--- a/app/soapbox/features/account-timeline/components/moved-note.tsx
+++ b/app/soapbox/features/account-timeline/components/moved-note.tsx
@@ -8,8 +8,8 @@ import { HStack, Text } from 'soapbox/components/ui';
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 interface IMovedNote {
-  from: AccountEntity,
-  to: AccountEntity,
+  from: AccountEntity
+  to: AccountEntity
 }
 
 const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
diff --git a/app/soapbox/features/account-timeline/index.tsx b/app/soapbox/features/account-timeline/index.tsx
index fb99ca04c..4f8ccc211 100644
--- a/app/soapbox/features/account-timeline/index.tsx
+++ b/app/soapbox/features/account-timeline/index.tsx
@@ -15,9 +15,9 @@ const getStatusIds = makeGetStatusIds();
 
 interface IAccountTimeline {
   params: {
-    username: string,
-  },
-  withReplies?: boolean,
+    username: string
+  }
+  withReplies?: boolean
 }
 
 const AccountTimeline: React.FC<IAccountTimeline> = ({ params, withReplies = false }) => {
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index d80bcfeb8..4b9e43f36 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -75,7 +75,7 @@ const messages = defineMessages({
 });
 
 interface IHeader {
-  account?: Account,
+  account?: Account
 }
 
 const Header: React.FC<IHeader> = ({ account }) => {
@@ -565,7 +565,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
           className='px-2'
-          iconClassName='w-4 h-4'
+          iconClassName='h-4 w-4'
           disabled={createAndNavigateToChat.isLoading}
         />
       );
@@ -577,7 +577,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
           className='px-2'
-          iconClassName='w-4 h-4'
+          iconClassName='h-4 w-4'
         />
       );
     } else {
@@ -599,7 +599,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
         title={intl.formatMessage(messages.share, { name: account.username })}
         theme='outlined'
         className='px-2'
-        iconClassName='w-4 h-4'
+        iconClassName='h-4 w-4'
       />
     );
   };
@@ -654,7 +654,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
                     src={require('@tabler/icons/dots.svg')}
                     theme='outlined'
                     className='px-2'
-                    iconClassName='w-4 h-4'
+                    iconClassName='h-4 w-4'
                     children={null}
                   />
                 </DropdownMenu>
diff --git a/app/soapbox/features/admin/components/latest-accounts-panel.tsx b/app/soapbox/features/admin/components/latest-accounts-panel.tsx
index 07c91ca26..1487f0764 100644
--- a/app/soapbox/features/admin/components/latest-accounts-panel.tsx
+++ b/app/soapbox/features/admin/components/latest-accounts-panel.tsx
@@ -15,7 +15,7 @@ const messages = defineMessages({
 });
 
 interface ILatestAccountsPanel {
-  limit?: number,
+  limit?: number
 }
 
 const LatestAccountsPanel: React.FC<ILatestAccountsPanel> = ({ limit = 5 }) => {
diff --git a/app/soapbox/features/admin/components/report-status.tsx b/app/soapbox/features/admin/components/report-status.tsx
index cb685a634..5b6fb7d88 100644
--- a/app/soapbox/features/admin/components/report-status.tsx
+++ b/app/soapbox/features/admin/components/report-status.tsx
@@ -16,8 +16,8 @@ const messages = defineMessages({
 });
 
 interface IReportStatus {
-  status: Status,
-  report?: AdminReport,
+  status: Status
+  report?: AdminReport
 }
 
 const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index d11e22a18..cc297c0cf 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -23,7 +23,7 @@ const messages = defineMessages({
 });
 
 interface IReport {
-  id: string;
+  id: string
 }
 
 const Report: React.FC<IReport> = ({ id }) => {
diff --git a/app/soapbox/features/admin/components/unapproved-account.tsx b/app/soapbox/features/admin/components/unapproved-account.tsx
index cb25e7fb2..bbc5e84a9 100644
--- a/app/soapbox/features/admin/components/unapproved-account.tsx
+++ b/app/soapbox/features/admin/components/unapproved-account.tsx
@@ -14,7 +14,7 @@ const messages = defineMessages({
 });
 
 interface IUnapprovedAccount {
-  accountId: string,
+  accountId: string
 }
 
 /** Displays an unapproved account for moderation purposes. */
diff --git a/app/soapbox/features/admin/tabs/dashboard.tsx b/app/soapbox/features/admin/tabs/dashboard.tsx
index f57740dfe..1d5a53e95 100644
--- a/app/soapbox/features/admin/tabs/dashboard.tsx
+++ b/app/soapbox/features/admin/tabs/dashboard.tsx
@@ -151,7 +151,7 @@ const Dashboard: React.FC = () => {
               <IconButton
                 src={require('@tabler/icons/download.svg')}
                 onClick={handleSubscribersClick}
-                iconClassName='w-5 h-5'
+                iconClassName='h-5 w-5'
               />
             </ListItem>
 
@@ -159,7 +159,7 @@ const Dashboard: React.FC = () => {
               <IconButton
                 src={require('@tabler/icons/download.svg')}
                 onClick={handleUnsubscribersClick}
-                iconClassName='w-5 h-5'
+                iconClassName='h-5 w-5'
               />
             </ListItem>
 
@@ -167,7 +167,7 @@ const Dashboard: React.FC = () => {
               <IconButton
                 src={require('@tabler/icons/download.svg')}
                 onClick={handleCombinedClick}
-                iconClassName='w-5 h-5'
+                iconClassName='h-5 w-5'
               />
             </ListItem>
           </List>
diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index fffd594a5..db2810065 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -11,7 +11,7 @@ import { AdKeys } from 'soapbox/queries/ads';
 import type { Ad as AdEntity } from 'soapbox/types/soapbox';
 
 interface IAd {
-  ad: AdEntity,
+  ad: AdEntity
 }
 
 /** Displays an ad in sponsored post format. */
@@ -101,7 +101,7 @@ const Ad: React.FC<IAd> = ({ ad }) => {
 
             <Stack justifyContent='center'>
               <IconButton
-                iconClassName='stroke-gray-600 w-6 h-6'
+                iconClassName='h-6 w-6 stroke-gray-600'
                 src={require('@tabler/icons/info-circle.svg')}
                 onClick={handleInfoButtonClick}
               />
diff --git a/app/soapbox/features/ads/providers/index.ts b/app/soapbox/features/ads/providers/index.ts
index bd17fa91c..8ff7d5219 100644
--- a/app/soapbox/features/ads/providers/index.ts
+++ b/app/soapbox/features/ads/providers/index.ts
@@ -12,19 +12,19 @@ const PROVIDERS: Record<string, () => Promise<AdProvider>> = {
 
 /** Ad server implementation. */
 interface AdProvider {
-  getAds(getState: () => RootState): Promise<Ad[]>,
+  getAds(getState: () => RootState): Promise<Ad[]>
 }
 
 /** Entity representing an advertisement. */
 interface Ad {
   /** Ad data in Card (OEmbed-ish) format. */
-  card: Card,
+  card: Card
   /** Impression URL to fetch when displaying the ad. */
-  impression?: string,
+  impression?: string
   /** Time when the ad expires and should no longer be displayed. */
-  expires_at?: string,
+  expires_at?: string
   /** Reason the ad is displayed. */
-  reason?: string,
+  reason?: string
 }
 
 /** Gets the current provider based on config. */
diff --git a/app/soapbox/features/ads/providers/rumble.ts b/app/soapbox/features/ads/providers/rumble.ts
index 68a006e00..21dc6e7f3 100644
--- a/app/soapbox/features/ads/providers/rumble.ts
+++ b/app/soapbox/features/ads/providers/rumble.ts
@@ -8,17 +8,17 @@ import type { AdProvider } from '.';
 
 /** Rumble ad API entity. */
 interface RumbleAd {
-  type: number,
-  impression: string,
-  click: string,
-  asset: string,
-  expires: number,
+  type: number
+  impression: string
+  click: string
+  asset: string
+  expires: number
 }
 
 /** Response from Rumble ad server. */
 interface RumbleApiResponse {
-  count: number,
-  ads: RumbleAd[],
+  count: number
+  ads: RumbleAd[]
 }
 
 /** Provides ads from Soapbox Config. */
diff --git a/app/soapbox/features/ads/providers/truth.ts b/app/soapbox/features/ads/providers/truth.ts
index a9af3c0d7..9207db522 100644
--- a/app/soapbox/features/ads/providers/truth.ts
+++ b/app/soapbox/features/ads/providers/truth.ts
@@ -8,10 +8,10 @@ import type { Card } from 'soapbox/types/entities';
 
 /** TruthSocial ad API entity. */
 interface TruthAd {
-  impression: string,
-  card: Card,
-  expires_at: string,
-  reason: string,
+  impression: string
+  card: Card
+  expires_at: string
+  reason: string
 }
 
 /** Provides ads from the TruthSocial API. */
diff --git a/app/soapbox/features/aliases/components/account.tsx b/app/soapbox/features/aliases/components/account.tsx
index 701931837..5abc0a66c 100644
--- a/app/soapbox/features/aliases/components/account.tsx
+++ b/app/soapbox/features/aliases/components/account.tsx
@@ -15,7 +15,7 @@ const messages = defineMessages({
 });
 
 interface IAccount {
-  accountId: string,
+  accountId: string
   aliases: ImmutableList<string>
 }
 
diff --git a/app/soapbox/features/audio/index.tsx b/app/soapbox/features/audio/index.tsx
index 7ba8c63a5..77808bfa5 100644
--- a/app/soapbox/features/audio/index.tsx
+++ b/app/soapbox/features/audio/index.tsx
@@ -21,23 +21,23 @@ const TICK_SIZE = 10;
 const PADDING   = 180;
 
 interface IAudio {
-  src: string,
-  alt?: string,
-  poster?: string,
-  duration?: number,
-  width?: number,
-  height?: number,
-  editable?: boolean,
-  fullscreen?: boolean,
-  cacheWidth?: (width: number) => void,
-  backgroundColor?: string,
-  foregroundColor?: string,
-  accentColor?: string,
-  currentTime?: number,
-  autoPlay?: boolean,
-  volume?: number,
-  muted?: boolean,
-  deployPictureInPicture?: (type: string, opts: Record<string, any>) => void,
+  src: string
+  alt?: string
+  poster?: string
+  duration?: number
+  width?: number
+  height?: number
+  editable?: boolean
+  fullscreen?: boolean
+  cacheWidth?: (width: number) => void
+  backgroundColor?: string
+  foregroundColor?: string
+  accentColor?: string
+  currentTime?: number
+  autoPlay?: boolean
+  volume?: number
+  muted?: boolean
+  deployPictureInPicture?: (type: string, opts: Record<string, any>) => void
 }
 
 const Audio: React.FC<IAudio> = (props) => {
diff --git a/app/soapbox/features/auth-login/components/captcha.tsx b/app/soapbox/features/auth-login/components/captcha.tsx
index dde5710f8..65179bea6 100644
--- a/app/soapbox/features/auth-login/components/captcha.tsx
+++ b/app/soapbox/features/auth-login/components/captcha.tsx
@@ -15,14 +15,14 @@ const messages = defineMessages({
 });
 
 interface ICaptchaField {
-  name?: string,
-  value: string,
-  onChange?: React.ChangeEventHandler<HTMLInputElement>,
-  onFetch?: (captcha: ImmutableMap<string, any>) => void,
-  onFetchFail?: (error: Error) => void,
-  onClick?: React.MouseEventHandler,
-  refreshInterval?: number,
-  idempotencyKey: string,
+  name?: string
+  value: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onFetch?: (captcha: ImmutableMap<string, any>) => void
+  onFetchFail?: (error: Error) => void
+  onClick?: React.MouseEventHandler
+  refreshInterval?: number
+  idempotencyKey: string
 }
 
 const CaptchaField: React.FC<ICaptchaField> = ({
@@ -97,11 +97,11 @@ const CaptchaField: React.FC<ICaptchaField> = ({
 };
 
 interface INativeCaptchaField {
-  captcha: ImmutableMap<string, any>,
-  onChange: React.ChangeEventHandler<HTMLInputElement>,
-  onClick: React.MouseEventHandler,
-  name?: string,
-  value: string,
+  captcha: ImmutableMap<string, any>
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  onClick: React.MouseEventHandler
+  name?: string
+  value: string
 }
 
 const NativeCaptchaField: React.FC<INativeCaptchaField> = ({ captcha, onChange, onClick, name, value }) => {
diff --git a/app/soapbox/features/auth-login/components/consumer-button.tsx b/app/soapbox/features/auth-login/components/consumer-button.tsx
index 6be1088af..edc0be313 100644
--- a/app/soapbox/features/auth-login/components/consumer-button.tsx
+++ b/app/soapbox/features/auth-login/components/consumer-button.tsx
@@ -21,7 +21,7 @@ const BRAND_ICONS: Record<string, string> = {
 };
 
 interface IConsumerButton {
-  provider: string,
+  provider: string
 }
 
 /** OAuth consumer button for logging in with a third-party service. */
@@ -40,7 +40,7 @@ const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
       <IconButton
         theme='outlined'
         className='p-2.5'
-        iconClassName='w-6 h-6'
+        iconClassName='h-6 w-6'
         src={icon}
         onClick={handleClick}
       />
diff --git a/app/soapbox/features/auth-login/components/login-form.tsx b/app/soapbox/features/auth-login/components/login-form.tsx
index 6df734101..a91998671 100644
--- a/app/soapbox/features/auth-login/components/login-form.tsx
+++ b/app/soapbox/features/auth-login/components/login-form.tsx
@@ -18,8 +18,8 @@ const messages = defineMessages({
 });
 
 interface ILoginForm {
-  isLoading: boolean,
-  handleSubmit: React.FormEventHandler,
+  isLoading: boolean
+  handleSubmit: React.FormEventHandler
 }
 
 const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
diff --git a/app/soapbox/features/auth-login/components/otp-auth-form.tsx b/app/soapbox/features/auth-login/components/otp-auth-form.tsx
index 1622e2482..06423e5e6 100644
--- a/app/soapbox/features/auth-login/components/otp-auth-form.tsx
+++ b/app/soapbox/features/auth-login/components/otp-auth-form.tsx
@@ -13,7 +13,7 @@ const messages = defineMessages({
 });
 
 interface IOtpAuthForm {
-  mfa_token: string,
+  mfa_token: string
 }
 
 const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
diff --git a/app/soapbox/features/auth-login/components/registration-form.tsx b/app/soapbox/features/auth-login/components/registration-form.tsx
index 175d9ffc8..c29dab9a0 100644
--- a/app/soapbox/features/auth-login/components/registration-form.tsx
+++ b/app/soapbox/features/auth-login/components/registration-form.tsx
@@ -31,7 +31,7 @@ const messages = defineMessages({
 });
 
 interface IRegistrationForm {
-  inviteToken?: string,
+  inviteToken?: string
 }
 
 /** Allows the user to sign up for the website. */
diff --git a/app/soapbox/features/auth-token-list/index.tsx b/app/soapbox/features/auth-token-list/index.tsx
index 954814449..9904f3f64 100644
--- a/app/soapbox/features/auth-token-list/index.tsx
+++ b/app/soapbox/features/auth-token-list/index.tsx
@@ -16,8 +16,8 @@ const messages = defineMessages({
 });
 
 interface IAuthToken {
-  token: Token,
-  isCurrent: boolean,
+  token: Token
+  isCurrent: boolean
 }
 
 const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
diff --git a/app/soapbox/features/birthdays/account.tsx b/app/soapbox/features/birthdays/account.tsx
index 79a70fc42..67df8f6ca 100644
--- a/app/soapbox/features/birthdays/account.tsx
+++ b/app/soapbox/features/birthdays/account.tsx
@@ -12,7 +12,7 @@ const messages = defineMessages({
 });
 
 interface IAccount {
-  accountId: string,
+  accountId: string
 }
 
 const Account: React.FC<IAccount> = ({ accountId }) => {
diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index 6260b7839..c56eb1efe 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -31,9 +31,9 @@ const initialSuggestionState = {
 };
 
 interface Suggestion {
-  list: { native: string, colons: string }[],
-  tokenStart: number,
-  token: string,
+  list: { native: string, colons: string }[]
+  tokenStart: number
+  token: string
 }
 
 interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onKeyDown' | 'onChange' | 'onPaste' | 'disabled'> {
@@ -173,7 +173,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
             <UploadButton
               onSelectFile={onSelectFile}
               resetFileKey={resetFileKey}
-              iconClassName='w-5 h-5'
+              iconClassName='h-5 w-5'
               className='text-primary-500'
               disabled={isUploading || (attachments.length >= attachmentLimit)}
             />
@@ -228,7 +228,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
 
           <IconButton
             src={require('@tabler/icons/send.svg')}
-            iconClassName='w-5 h-5'
+            iconClassName='h-5 w-5'
             className='text-primary-500'
             disabled={isSubmitDisabled}
             onClick={onSubmit}
diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 37b300f79..9b54de9ed 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -23,8 +23,8 @@ const messages = defineMessages({
 });
 
 interface IChatListItemInterface {
-  chat: IChat,
-  onClick: (chat: any) => void,
+  chat: IChat
+  onClick: (chat: any) => void
 }
 
 const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
@@ -120,7 +120,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
                   src={require('@tabler/icons/dots.svg')}
                   title='Settings'
                   className='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'
                 />
               </DropdownMenu>
             </div>
diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index a656afba9..ff9900627 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/app/soapbox/features/chats/components/chat-list.tsx
@@ -12,8 +12,8 @@ import { useChats } from 'soapbox/queries/chats';
 import ChatListItem from './chat-list-item';
 
 interface IChatList {
-  onClickChat: (chat: any) => void,
-  useWindowScroll?: boolean,
+  onClickChat: (chat: any) => void
+  useWindowScroll?: boolean
   searchValue?: string
 }
 
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 326ab9b71..4e854523e 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -63,7 +63,7 @@ const Scroller: Components['Scroller'] = React.forwardRef((props, ref) => {
 
 interface IChatMessageList {
   /** Chat the messages are being rendered from. */
-  chat: IChat,
+  chat: IChat
 }
 
 /** Scrollable list of chat messages. */
diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index 0b6550b76..09c5057fa 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -12,7 +12,7 @@ import ChatPageSidebar from './components/chat-page-sidebar';
 import Welcome from './components/welcome';
 
 interface IChatPage {
-  chatId?: string,
+  chatId?: string
 }
 
 const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index e365c49cc..890983f64 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -163,7 +163,7 @@ const ChatPageMain = () => {
           <MenuButton
             as={IconButton}
             src={require('@tabler/icons/info-circle.svg')}
-            iconClassName='w-5 h-5 text-gray-600'
+            iconClassName='h-5 w-5 text-gray-600'
             children={null}
           />
 
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 89e586968..ad3a2ef3a 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -43,13 +43,13 @@ const ChatPageSidebar = () => {
           <HStack space={1}>
             <IconButton
               src={require('@tabler/icons/settings.svg')}
-              iconClassName='w-5 h-5 text-gray-600'
+              iconClassName='h-5 w-5 text-gray-600'
               onClick={handleSettingsClick}
             />
 
             <IconButton
               src={require('@tabler/icons/edit.svg')}
-              iconClassName='w-5 h-5 text-gray-600'
+              iconClassName='h-5 w-5 text-gray-600'
               onClick={handleChatCreate}
             />
           </HStack>
diff --git a/app/soapbox/features/chats/components/chat-search-input.tsx b/app/soapbox/features/chats/components/chat-search-input.tsx
index bc8644aab..769efd23d 100644
--- a/app/soapbox/features/chats/components/chat-search-input.tsx
+++ b/app/soapbox/features/chats/components/chat-search-input.tsx
@@ -9,11 +9,11 @@ const messages = defineMessages({
 
 interface IChatSearchInput {
   /** Search term. */
-  value: string,
+  value: string
   /** Callback when the search value changes. */
-  onChange: React.ChangeEventHandler<HTMLInputElement>,
+  onChange: React.ChangeEventHandler<HTMLInputElement>
   /** Callback when the input is cleared. */
-  onClear: React.MouseEventHandler<HTMLButtonElement>,
+  onClear: React.MouseEventHandler<HTMLButtonElement>
 }
 
 /** Search input for filtering chats. */
diff --git a/app/soapbox/features/chats/components/chat-upload.tsx b/app/soapbox/features/chats/components/chat-upload.tsx
index 9aa969e3a..53bb8a1fc 100644
--- a/app/soapbox/features/chats/components/chat-upload.tsx
+++ b/app/soapbox/features/chats/components/chat-upload.tsx
@@ -12,8 +12,8 @@ import ChatUploadPreview from './chat-upload-preview';
 import type { Attachment } from 'soapbox/types/entities';
 
 interface IChatUpload {
-  attachment: Attachment,
-  onDelete?(): void,
+  attachment: Attachment
+  onDelete?(): void
 }
 
 /** An attachment uploaded to the chat composer, before sending. */
diff --git a/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
index 36c4a4f80..9b260bef2 100644
--- a/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -57,14 +57,14 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
           <IconButton
             onClick={secondaryAction}
             src={secondaryActionIcon as string}
-            iconClassName='w-5 h-5 text-gray-600'
+            iconClassName='h-5 w-5 text-gray-600'
           />
         ) : null}
 
         <IconButton
           onClick={onToggle}
           src={isOpen ? require('@tabler/icons/chevron-down.svg') : require('@tabler/icons/chevron-up.svg')}
-          iconClassName='w-5 h-5 text-gray-600'
+          iconClassName='h-5 w-5 text-gray-600'
         />
       </HStack>
     </HStack>
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index 0b9c4114d..758d180ab 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -23,9 +23,9 @@ const messages = defineMessages({
 });
 
 interface ChatInterface {
-  chat: IChat,
-  inputRef?: MutableRefObject<HTMLTextAreaElement | null>,
-  className?: string,
+  chat: IChat
+  inputRef?: MutableRefObject<HTMLTextAreaElement | null>
+  className?: string
 }
 
 /**
diff --git a/app/soapbox/features/chats/components/ui/pane.tsx b/app/soapbox/features/chats/components/ui/pane.tsx
index 1aee23404..54e1b23a2 100644
--- a/app/soapbox/features/chats/components/ui/pane.tsx
+++ b/app/soapbox/features/chats/components/ui/pane.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 
 interface IPane {
   /** Whether the pane is open or minimized. */
-  isOpen: boolean,
+  isOpen: boolean
   /** Positions the pane on the screen, with 0 at the right. */
-  index: number,
+  index: number
   /** Children to display in the pane. */
-  children: React.ReactNode,
+  children: React.ReactNode
   /** Whether this is the main chat pane. */
-  main?: boolean,
+  main?: boolean
 }
 
 /** Chat pane UI component for desktop. */
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index 36814fd9d..825d8bf08 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/app/soapbox/features/chats/index.tsx
@@ -6,7 +6,7 @@ import ChatPage from './components/chat-page/chat-page';
 
 interface IChatIndex {
   params?: {
-    chatId?: string,
+    chatId?: string
   }
 }
 
diff --git a/app/soapbox/features/compose/components/autosuggest-account.tsx b/app/soapbox/features/compose/components/autosuggest-account.tsx
index 511d65fe6..345459b71 100644
--- a/app/soapbox/features/compose/components/autosuggest-account.tsx
+++ b/app/soapbox/features/compose/components/autosuggest-account.tsx
@@ -5,7 +5,7 @@ import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
 interface IAutosuggestAccount {
-  id: string,
+  id: string
 }
 
 const AutosuggestAccount: React.FC<IAutosuggestAccount> = ({ id }) => {
diff --git a/app/soapbox/features/compose/components/compose-form-button.tsx b/app/soapbox/features/compose/components/compose-form-button.tsx
index a76a4bf9c..a8cfae717 100644
--- a/app/soapbox/features/compose/components/compose-form-button.tsx
+++ b/app/soapbox/features/compose/components/compose-form-button.tsx
@@ -4,11 +4,11 @@ import React from 'react';
 import { IconButton } from 'soapbox/components/ui';
 
 interface IComposeFormButton {
-  icon: string,
-  title?: string,
-  active?: boolean,
-  disabled?: boolean,
-  onClick: () => void,
+  icon: string
+  title?: string
+  active?: boolean
+  disabled?: boolean
+  onClick: () => void
 }
 
 const ComposeFormButton: React.FC<IComposeFormButton> = ({
diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index c901e047c..38b59db90 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -57,12 +57,12 @@ const messages = defineMessages({
 });
 
 interface IComposeForm<ID extends string> {
-  id: ID extends 'default' ? never : ID,
-  shouldCondense?: boolean,
-  autoFocus?: boolean,
-  clickableAreaRef?: React.RefObject<HTMLDivElement>,
-  event?: string,
-  group?: string,
+  id: ID extends 'default' ? never : ID
+  shouldCondense?: boolean
+  autoFocus?: boolean
+  clickableAreaRef?: React.RefObject<HTMLDivElement>
+  event?: string
+  group?: string
 }
 
 const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group }: IComposeForm<ID>) => {
diff --git a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx
index a97495840..0a6d1998f 100644
--- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx
@@ -92,8 +92,8 @@ const messages = defineMessages({
 });
 
 interface IEmojiPickerDropdown {
-  onPickEmoji: (data: EmojiType) => void,
-  button?: JSX.Element,
+  onPickEmoji: (data: EmojiType) => void
+  button?: JSX.Element
 }
 
 const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, button }) => {
diff --git a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
index 4cead554d..56e1ebfc5 100644
--- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
@@ -32,14 +32,14 @@ const messages = defineMessages({
 });
 
 interface IEmojiPickerMenu {
-  customEmojis: ImmutableList<ImmutableMap<string, string>>,
-  loading?: boolean,
-  onClose: () => void,
-  onPick: (emoji: Emoji) => void,
-  onSkinTone: (skinTone: number) => void,
-  skinTone?: number,
-  frequentlyUsedEmojis?: Array<string>,
-  style?: React.CSSProperties,
+  customEmojis: ImmutableList<ImmutableMap<string, string>>
+  loading?: boolean
+  onClose: () => void
+  onPick: (emoji: Emoji) => void
+  onSkinTone: (skinTone: number) => void
+  skinTone?: number
+  frequentlyUsedEmojis?: Array<string>
+  style?: React.CSSProperties
 }
 
 const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
diff --git a/app/soapbox/features/compose/components/emoji-picker/modifier-picker-menu.tsx b/app/soapbox/features/compose/components/emoji-picker/modifier-picker-menu.tsx
index e2405d5d6..f3679c65e 100644
--- a/app/soapbox/features/compose/components/emoji-picker/modifier-picker-menu.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/modifier-picker-menu.tsx
@@ -7,9 +7,9 @@ const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
 
 interface IModifierPickerMenu {
-  active: boolean,
-  onSelect: (modifier: number) => void,
-  onClose: () => void,
+  active: boolean
+  onSelect: (modifier: number) => void
+  onClose: () => void
 }
 
 const ModifierPickerMenu: React.FC<IModifierPickerMenu> = ({ active, onSelect, onClose }) => {
diff --git a/app/soapbox/features/compose/components/emoji-picker/modifier-picker.tsx b/app/soapbox/features/compose/components/emoji-picker/modifier-picker.tsx
index a84b71122..03c5b24af 100644
--- a/app/soapbox/features/compose/components/emoji-picker/modifier-picker.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/modifier-picker.tsx
@@ -6,11 +6,11 @@ import ModifierPickerMenu from './modifier-picker-menu';
 const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
 
 interface IModifierPicker {
-  active: boolean,
-  modifier?: number,
-  onOpen: () => void,
-  onClose: () => void,
-  onChange: (skinTone: number) => void,
+  active: boolean
+  modifier?: number
+  onOpen: () => void
+  onClose: () => void
+  onChange: (skinTone: number) => void
 }
 
 const ModifierPicker: React.FC<IModifierPicker> = ({ active, modifier, onOpen, onClose, onChange }) => {
diff --git a/app/soapbox/features/compose/components/markdown-button.tsx b/app/soapbox/features/compose/components/markdown-button.tsx
index 935f8e7b1..31314f525 100644
--- a/app/soapbox/features/compose/components/markdown-button.tsx
+++ b/app/soapbox/features/compose/components/markdown-button.tsx
@@ -12,7 +12,7 @@ const messages = defineMessages({
 });
 
 interface IMarkdownButton {
-  composeId: string,
+  composeId: string
 }
 
 const MarkdownButton: React.FC<IMarkdownButton> = ({ composeId }) => {
diff --git a/app/soapbox/features/compose/components/poll-button.tsx b/app/soapbox/features/compose/components/poll-button.tsx
index 43af2e594..98ab8ef61 100644
--- a/app/soapbox/features/compose/components/poll-button.tsx
+++ b/app/soapbox/features/compose/components/poll-button.tsx
@@ -13,7 +13,7 @@ const messages = defineMessages({
 
 interface IPollButton {
   composeId: string
-  disabled?: boolean,
+  disabled?: boolean
 }
 
 const PollButton: React.FC<IPollButton> = ({ composeId, disabled }) => {
diff --git a/app/soapbox/features/compose/components/polls/poll-form.tsx b/app/soapbox/features/compose/components/polls/poll-form.tsx
index 2d3233f8d..66445111b 100644
--- a/app/soapbox/features/compose/components/polls/poll-form.tsx
+++ b/app/soapbox/features/compose/components/polls/poll-form.tsx
@@ -105,7 +105,7 @@ const Option: React.FC<IOption> = ({
 };
 
 interface IPollForm {
-  composeId: string,
+  composeId: string
 }
 
 const PollForm: React.FC<IPollForm> = ({ composeId }) => {
diff --git a/app/soapbox/features/compose/components/privacy-dropdown.tsx b/app/soapbox/features/compose/components/privacy-dropdown.tsx
index e33edbb67..3625064ed 100644
--- a/app/soapbox/features/compose/components/privacy-dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy-dropdown.tsx
@@ -30,13 +30,13 @@ const messages = defineMessages({
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
 interface IPrivacyDropdownMenu {
-  style?: React.CSSProperties,
-  items: any[],
-  value: string,
-  placement: string,
-  onClose: () => void,
-  onChange: (value: string | null) => void,
-  unavailable?: boolean,
+  style?: React.CSSProperties
+  items: any[]
+  value: string
+  placement: string
+  onClose: () => void
+  onChange: (value: string | null) => void
+  unavailable?: boolean
 }
 
 const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, placement, value, onClose, onChange }) => {
@@ -140,7 +140,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
 };
 
 interface IPrivacyDropdown {
-  composeId: string,
+  composeId: string
 }
 
 const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
diff --git a/app/soapbox/features/compose/components/reply-indicator.tsx b/app/soapbox/features/compose/components/reply-indicator.tsx
index 0d80dd684..a7b762778 100644
--- a/app/soapbox/features/compose/components/reply-indicator.tsx
+++ b/app/soapbox/features/compose/components/reply-indicator.tsx
@@ -9,10 +9,10 @@ import { isRtl } from 'soapbox/rtl';
 import type { Status } from 'soapbox/types/entities';
 
 interface IReplyIndicator {
-  className?: string,
-  status?: Status,
-  onCancel?: () => void,
-  hideActions: boolean,
+  className?: string
+  status?: Status
+  onCancel?: () => void
+  hideActions: boolean
 }
 
 const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActions, onCancel }) => {
diff --git a/app/soapbox/features/compose/components/reply-mentions.tsx b/app/soapbox/features/compose/components/reply-mentions.tsx
index e9d5c8d57..baa8f8d04 100644
--- a/app/soapbox/features/compose/components/reply-mentions.tsx
+++ b/app/soapbox/features/compose/components/reply-mentions.tsx
@@ -10,7 +10,7 @@ import { makeGetStatus } from 'soapbox/selectors';
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 interface IReplyMentions {
-  composeId: string,
+  composeId: string
 }
 
 const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
diff --git a/app/soapbox/features/compose/components/schedule-button.tsx b/app/soapbox/features/compose/components/schedule-button.tsx
index 1d98b9cd0..6acf4a001 100644
--- a/app/soapbox/features/compose/components/schedule-button.tsx
+++ b/app/soapbox/features/compose/components/schedule-button.tsx
@@ -12,8 +12,8 @@ const messages = defineMessages({
 });
 
 interface IScheduleButton {
-  composeId: string,
-  disabled?: boolean,
+  composeId: string
+  disabled?: boolean
 }
 
 const ScheduleButton: React.FC<IScheduleButton> = ({ composeId, disabled }) => {
diff --git a/app/soapbox/features/compose/components/schedule-form.tsx b/app/soapbox/features/compose/components/schedule-form.tsx
index 9c1ee5a6c..4c293662f 100644
--- a/app/soapbox/features/compose/components/schedule-form.tsx
+++ b/app/soapbox/features/compose/components/schedule-form.tsx
@@ -28,7 +28,7 @@ const messages = defineMessages({
 });
 
 export interface IScheduleForm {
-  composeId: string,
+  composeId: string
 }
 
 const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
@@ -74,7 +74,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
           />)}
         </BundleContainer>
         <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={handleRemove}
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 5e177bb45..0e50fc0be 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -34,9 +34,9 @@ function redirectToAccount(accountId: string, routerHistory: any) {
 }
 
 interface ISearch {
-  autoFocus?: boolean,
-  autoSubmit?: boolean,
-  autosuggest?: boolean,
+  autoFocus?: boolean
+  autoSubmit?: boolean
+  autosuggest?: boolean
   openInRoute?: boolean
 }
 
diff --git a/app/soapbox/features/compose/components/spoiler-button.tsx b/app/soapbox/features/compose/components/spoiler-button.tsx
index 15f87a791..3c7ceb013 100644
--- a/app/soapbox/features/compose/components/spoiler-button.tsx
+++ b/app/soapbox/features/compose/components/spoiler-button.tsx
@@ -12,7 +12,7 @@ const messages = defineMessages({
 });
 
 interface ISpoilerButton {
-  composeId: string,
+  composeId: string
 }
 
 const SpoilerButton: React.FC<ISpoilerButton> = ({ composeId }) => {
diff --git a/app/soapbox/features/compose/components/spoiler-input.tsx b/app/soapbox/features/compose/components/spoiler-input.tsx
index 2c849c8bf..5c9ffb135 100644
--- a/app/soapbox/features/compose/components/spoiler-input.tsx
+++ b/app/soapbox/features/compose/components/spoiler-input.tsx
@@ -14,7 +14,7 @@ const messages = defineMessages({
 });
 
 interface ISpoilerInput extends Pick<IAutosuggestInput, 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'onSuggestionSelected'> {
-  composeId: string extends 'default' ? never : string,
+  composeId: string extends 'default' ? never : string
 }
 
 /** Text input for content warning in composer. */
diff --git a/app/soapbox/features/compose/components/text-character-counter.tsx b/app/soapbox/features/compose/components/text-character-counter.tsx
index 024ff1e60..8044038ce 100644
--- a/app/soapbox/features/compose/components/text-character-counter.tsx
+++ b/app/soapbox/features/compose/components/text-character-counter.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { length } from 'stringz';
 
 interface ITextCharacterCounter {
-  max: number,
-  text: string,
+  max: number
+  text: string
 }
 
 const TextCharacterCounter: React.FC<ITextCharacterCounter> = ({ text, max }) => {
diff --git a/app/soapbox/features/compose/components/upload-button.tsx b/app/soapbox/features/compose/components/upload-button.tsx
index e5c12e8b5..6fe9ca33f 100644
--- a/app/soapbox/features/compose/components/upload-button.tsx
+++ b/app/soapbox/features/compose/components/upload-button.tsx
@@ -15,14 +15,14 @@ const onlyImages = (types: ImmutableList<string>) => {
 };
 
 export interface IUploadButton {
-  disabled?: boolean,
-  unavailable?: boolean,
-  onSelectFile: (files: FileList, intl: IntlShape) => void,
-  style?: React.CSSProperties,
-  resetFileKey: number | null,
-  className?: string,
-  iconClassName?: string,
-  icon?: string,
+  disabled?: boolean
+  unavailable?: boolean
+  onSelectFile: (files: FileList, intl: IntlShape) => void
+  style?: React.CSSProperties
+  resetFileKey: number | null
+  className?: string
+  iconClassName?: string
+  icon?: string
 }
 
 const UploadButton: React.FC<IUploadButton> = ({
diff --git a/app/soapbox/features/compose/components/upload-form.tsx b/app/soapbox/features/compose/components/upload-form.tsx
index dc420de49..c134cf4c0 100644
--- a/app/soapbox/features/compose/components/upload-form.tsx
+++ b/app/soapbox/features/compose/components/upload-form.tsx
@@ -9,7 +9,7 @@ import UploadProgress from './upload-progress';
 import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
 
 interface IUploadForm {
-  composeId: string,
+  composeId: string
 }
 
 const UploadForm: React.FC<IUploadForm> = ({ composeId }) => {
diff --git a/app/soapbox/features/compose/components/upload-progress.tsx b/app/soapbox/features/compose/components/upload-progress.tsx
index e34ae5d9b..d624ad3b5 100644
--- a/app/soapbox/features/compose/components/upload-progress.tsx
+++ b/app/soapbox/features/compose/components/upload-progress.tsx
@@ -4,7 +4,7 @@ import UploadProgress from 'soapbox/components/upload-progress';
 import { useCompose } from 'soapbox/hooks';
 
 interface IComposeUploadProgress {
-  composeId: string,
+  composeId: string
 }
 
 /** File upload progress bar for post composer. */
diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
index e0d8ada69..a5ec2a5ef 100644
--- a/app/soapbox/features/compose/components/upload.tsx
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -6,8 +6,8 @@ import Upload from 'soapbox/components/upload';
 import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks';
 
 interface IUploadCompose {
-  id: string,
-  composeId: string,
+  id: string
+  composeId: string
 }
 
 const UploadCompose: React.FC<IUploadCompose> = ({ composeId, id }) => {
diff --git a/app/soapbox/features/compose/components/visual-character-counter.tsx b/app/soapbox/features/compose/components/visual-character-counter.tsx
index 1169014d5..e02a13cfa 100644
--- a/app/soapbox/features/compose/components/visual-character-counter.tsx
+++ b/app/soapbox/features/compose/components/visual-character-counter.tsx
@@ -10,9 +10,9 @@ const messages = defineMessages({
 
 interface IVisualCharacterCounter {
   /** max text allowed */
-  max: number,
+  max: number
   /** text to use to measure */
-  text: string,
+  text: string
 }
 
 /** Renders a character counter */
diff --git a/app/soapbox/features/compose/components/warning.tsx b/app/soapbox/features/compose/components/warning.tsx
index 8100e3781..455891bcc 100644
--- a/app/soapbox/features/compose/components/warning.tsx
+++ b/app/soapbox/features/compose/components/warning.tsx
@@ -4,7 +4,7 @@ import { spring } from 'react-motion';
 import Motion from '../../ui/util/optional-motion';
 
 interface IWarning {
-  message: React.ReactNode,
+  message: React.ReactNode
 }
 
 /** Warning message displayed in ComposeForm. */
diff --git a/app/soapbox/features/compose/containers/quoted-status-container.tsx b/app/soapbox/features/compose/containers/quoted-status-container.tsx
index 00040e770..266ebb1b6 100644
--- a/app/soapbox/features/compose/containers/quoted-status-container.tsx
+++ b/app/soapbox/features/compose/containers/quoted-status-container.tsx
@@ -6,7 +6,7 @@ import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
 interface IQuotedStatusContainer {
-  composeId: string,
+  composeId: string
 }
 
 /** QuotedStatus shown in post composer. */
diff --git a/app/soapbox/features/compose/containers/warning-container.tsx b/app/soapbox/features/compose/containers/warning-container.tsx
index 99c488069..6c2a81f87 100644
--- a/app/soapbox/features/compose/containers/warning-container.tsx
+++ b/app/soapbox/features/compose/containers/warning-container.tsx
@@ -9,7 +9,7 @@ import Warning from '../components/warning';
 const APPROX_HASHTAG_RE = /(?:^|[^\/\)\w])#(\w*[a-zA-Z·]\w*)/i;
 
 interface IWarningWrapper {
-  composeId: string,
+  composeId: string
 }
 
 const WarningWrapper: React.FC<IWarningWrapper> = ({ composeId }) => {
diff --git a/app/soapbox/features/compose/util/url-regex.ts b/app/soapbox/features/compose/util/url-regex.ts
index d42900002..5b015240e 100644
--- a/app/soapbox/features/compose/util/url-regex.ts
+++ b/app/soapbox/features/compose/util/url-regex.ts
@@ -23,7 +23,7 @@ const regexSupplant = function(regex: string | RegExp, flags = '') {
   }), flags);
 };
 
-const stringSupplant = function(str: string, values: { [x: string]: any; }) {
+const stringSupplant = function(str: string, values: { [x: string]: any }) {
   return str.replace(/#\{(\w+)\}/g, function(match, name) {
     return values[name] || '';
   });
diff --git a/app/soapbox/features/conversations/components/conversation.tsx b/app/soapbox/features/conversations/components/conversation.tsx
index 9e589bbbc..442b10dd5 100644
--- a/app/soapbox/features/conversations/components/conversation.tsx
+++ b/app/soapbox/features/conversations/components/conversation.tsx
@@ -6,9 +6,9 @@ import StatusContainer from 'soapbox/containers/status-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 interface IConversation {
-  conversationId: string,
-  onMoveUp: (id: string) => void,
-  onMoveDown: (id: string) => void,
+  conversationId: string
+  onMoveUp: (id: string) => void
+  onMoveDown: (id: string) => void
 }
 
 const Conversation: React.FC<IConversation> = ({ conversationId, onMoveUp, onMoveDown }) => {
diff --git a/app/soapbox/features/crypto-donate/components/crypto-address.tsx b/app/soapbox/features/crypto-donate/components/crypto-address.tsx
index 444d306c7..65c4819a2 100644
--- a/app/soapbox/features/crypto-donate/components/crypto-address.tsx
+++ b/app/soapbox/features/crypto-donate/components/crypto-address.tsx
@@ -11,9 +11,9 @@ import { getTitle } from '../utils/coin-db';
 import CryptoIcon from './crypto-icon';
 
 export interface ICryptoAddress {
-  address: string,
-  ticker: string,
-  note?: string,
+  address: string
+  ticker: string
+  note?: string
 }
 
 const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
diff --git a/app/soapbox/features/crypto-donate/components/crypto-donate-panel.tsx b/app/soapbox/features/crypto-donate/components/crypto-donate-panel.tsx
index 92a231b8b..929515e4f 100644
--- a/app/soapbox/features/crypto-donate/components/crypto-donate-panel.tsx
+++ b/app/soapbox/features/crypto-donate/components/crypto-donate-panel.tsx
@@ -12,7 +12,7 @@ const messages = defineMessages({
 });
 
 interface ICryptoDonatePanel {
-  limit: number,
+  limit: number
 }
 
 const CryptoDonatePanel: React.FC<ICryptoDonatePanel> = ({ limit = 3 }): JSX.Element | null => {
diff --git a/app/soapbox/features/crypto-donate/components/crypto-icon.tsx b/app/soapbox/features/crypto-donate/components/crypto-icon.tsx
index 28c0535ab..3b5bf8bf2 100644
--- a/app/soapbox/features/crypto-donate/components/crypto-icon.tsx
+++ b/app/soapbox/features/crypto-donate/components/crypto-icon.tsx
@@ -10,9 +10,9 @@ const getIcon = (ticker: string): string => {
 };
 
 interface ICryptoIcon {
-  ticker: string,
-  title?: string,
-  className?: string,
+  ticker: string
+  title?: string
+  className?: string
 }
 
 const CryptoIcon: React.FC<ICryptoIcon> = ({ ticker, title, className }): JSX.Element => {
diff --git a/app/soapbox/features/crypto-donate/components/detailed-crypto-address.tsx b/app/soapbox/features/crypto-donate/components/detailed-crypto-address.tsx
index 180e3d116..d6c8c3134 100644
--- a/app/soapbox/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/app/soapbox/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -10,9 +10,9 @@ import { getTitle } from '../utils/coin-db';
 import CryptoIcon from './crypto-icon';
 
 interface IDetailedCryptoAddress {
-  address: string,
-  ticker: string,
-  note?: string,
+  address: string
+  ticker: string
+  note?: string
 }
 
 const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, ticker, note }): JSX.Element => {
diff --git a/app/soapbox/features/crypto-donate/components/site-wallet.tsx b/app/soapbox/features/crypto-donate/components/site-wallet.tsx
index 3adb4c02d..bb4bdb6c1 100644
--- a/app/soapbox/features/crypto-donate/components/site-wallet.tsx
+++ b/app/soapbox/features/crypto-donate/components/site-wallet.tsx
@@ -6,7 +6,7 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 import CryptoAddress from './crypto-address';
 
 interface ISiteWallet {
-  limit?: number,
+  limit?: number
 }
 
 const SiteWallet: React.FC<ISiteWallet> = ({ limit }): JSX.Element => {
diff --git a/app/soapbox/features/developers/components/indicator.tsx b/app/soapbox/features/developers/components/indicator.tsx
index a3cd84850..72dc9872d 100644
--- a/app/soapbox/features/developers/components/indicator.tsx
+++ b/app/soapbox/features/developers/components/indicator.tsx
@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 
 interface IIndicator {
-  state?: 'active' | 'pending' | 'error' | 'inactive',
-  size?: 'sm',
+  state?: 'active' | 'pending' | 'error' | 'inactive'
+  size?: 'sm'
 }
 
 /** Indicator dot component. */
diff --git a/app/soapbox/features/developers/developers-menu.tsx b/app/soapbox/features/developers/developers-menu.tsx
index 455ff75b6..466bd30cc 100644
--- a/app/soapbox/features/developers/developers-menu.tsx
+++ b/app/soapbox/features/developers/developers-menu.tsx
@@ -15,9 +15,9 @@ const messages = defineMessages({
 });
 
 interface IDashWidget {
-  to?: string,
-  onClick?: React.MouseEventHandler<HTMLButtonElement>,
-  children: React.ReactNode,
+  to?: string
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  children: React.ReactNode
 }
 
 const DashWidget: React.FC<IDashWidget> = ({ to, onClick, children }) => {
diff --git a/app/soapbox/features/directory/components/account-card.tsx b/app/soapbox/features/directory/components/account-card.tsx
index e4a4a10a2..e519868de 100644
--- a/app/soapbox/features/directory/components/account-card.tsx
+++ b/app/soapbox/features/directory/components/account-card.tsx
@@ -15,7 +15,7 @@ import { shortNumberFormat } from 'soapbox/utils/numbers';
 const getAccount = makeGetAccount();
 
 interface IAccountCard {
-  id: string,
+  id: string
 }
 
 const AccountCard: React.FC<IAccountCard> = ({ id }) => {
diff --git a/app/soapbox/features/edit-profile/components/profile-preview.tsx b/app/soapbox/features/edit-profile/components/profile-preview.tsx
index 55e26dcfd..7bc3a894f 100644
--- a/app/soapbox/features/edit-profile/components/profile-preview.tsx
+++ b/app/soapbox/features/edit-profile/components/profile-preview.tsx
@@ -8,7 +8,7 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 import type { Account } from 'soapbox/types/entities';
 
 interface IProfilePreview {
-  account: Account,
+  account: Account
 }
 
 /** Displays a preview of the user's account, including avatar, banner, etc. */
diff --git a/app/soapbox/features/edit-profile/index.tsx b/app/soapbox/features/edit-profile/index.tsx
index 044e9b70a..8483a171e 100644
--- a/app/soapbox/features/edit-profile/index.tsx
+++ b/app/soapbox/features/edit-profile/index.tsx
@@ -57,18 +57,18 @@ const messages = defineMessages({
  * (By default, max 4 fields and 255 characters per property/value)
  */
 interface AccountCredentialsField {
-  name: string,
-  value: string,
+  name: string
+  value: string
 }
 
 /** Private information (settings) for the account. */
 interface AccountCredentialsSource {
   /** Default post privacy for authored statuses. */
-  privacy?: string,
+  privacy?: string
   /** Whether to mark authored statuses as sensitive by default. */
-  sensitive?: boolean,
+  sensitive?: boolean
   /** Default language to use for authored statuses. (ISO 6391) */
-  language?: string,
+  language?: string
 }
 
 /**
@@ -77,43 +77,43 @@ interface AccountCredentialsSource {
  */
 interface AccountCredentials {
   /** Whether the account should be shown in the profile directory. */
-  discoverable?: boolean,
+  discoverable?: boolean
   /** Whether the account has a bot flag. */
-  bot?: boolean,
+  bot?: boolean
   /** The display name to use for the profile. */
-  display_name?: string,
+  display_name?: string
   /** The account bio. */
-  note?: string,
+  note?: string
   /** Avatar image encoded using multipart/form-data */
-  avatar?: File,
+  avatar?: File
   /** Header image encoded using multipart/form-data */
-  header?: File,
+  header?: File
   /** Whether manual approval of follow requests is required. */
-  locked?: boolean,
+  locked?: boolean
   /** Private information (settings) about the account. */
-  source?: AccountCredentialsSource,
+  source?: AccountCredentialsSource
   /** Custom profile fields. */
-  fields_attributes?: AccountCredentialsField[],
+  fields_attributes?: AccountCredentialsField[]
 
   // Non-Mastodon fields
   /** Pleroma: whether to accept notifications from people you don't follow. */
-  stranger_notifications?: boolean,
+  stranger_notifications?: boolean
   /** Soapbox BE: whether the user opts-in to email communications. */
-  accepts_email_list?: boolean,
+  accepts_email_list?: boolean
   /** Pleroma: whether to publicly display followers. */
-  hide_followers?: boolean,
+  hide_followers?: boolean
   /** Pleroma: whether to publicly display follows. */
-  hide_follows?: boolean,
+  hide_follows?: boolean
   /** Pleroma: whether to publicly display follower count. */
-  hide_followers_count?: boolean,
+  hide_followers_count?: boolean
   /** Pleroma: whether to publicly display follows count. */
-  hide_follows_count?: boolean,
+  hide_follows_count?: boolean
   /** User's website URL. */
-  website?: string,
+  website?: string
   /** User's location. */
-  location?: string,
+  location?: string
   /** User's birthday. */
-  birthday?: string,
+  birthday?: string
 }
 
 /** Convert an account into an update_credentials request object. */
diff --git a/app/soapbox/features/embedded-status/index.tsx b/app/soapbox/features/embedded-status/index.tsx
index d8c172643..262a8f27e 100644
--- a/app/soapbox/features/embedded-status/index.tsx
+++ b/app/soapbox/features/embedded-status/index.tsx
@@ -12,8 +12,8 @@ import { makeGetStatus } from 'soapbox/selectors';
 
 interface IEmbeddedStatus {
   params: {
-    statusId: string,
-  },
+    statusId: string
+  }
 }
 
 /** Status to be presented in an iframe for embeds on external websites. */
diff --git a/app/soapbox/features/event/components/event-date.tsx b/app/soapbox/features/event/components/event-date.tsx
index bfd4c37dd..dcdd01516 100644
--- a/app/soapbox/features/event/components/event-date.tsx
+++ b/app/soapbox/features/event/components/event-date.tsx
@@ -7,7 +7,7 @@ import { HStack } from 'soapbox/components/ui';
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 interface IEventDate {
-  status: StatusEntity,
+  status: StatusEntity
 }
 
 const EventDate: React.FC<IEventDate> = ({ status }) => {
diff --git a/app/soapbox/features/event/components/event-header.tsx b/app/soapbox/features/event/components/event-header.tsx
index 7a376d6f8..e18d342fe 100644
--- a/app/soapbox/features/event/components/event-header.tsx
+++ b/app/soapbox/features/event/components/event-header.tsx
@@ -63,7 +63,7 @@ const messages = defineMessages({
 });
 
 interface IEventHeader {
-  status?: StatusEntity,
+  status?: StatusEntity
 }
 
 const EventHeader: React.FC<IEventHeader> = ({ status }) => {
@@ -386,7 +386,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
               src={require('@tabler/icons/dots.svg')}
               theme='outlined'
               className='h-[30px] px-2'
-              iconClassName='w-4 h-4'
+              iconClassName='h-4 w-4'
               children={null}
             />
 
diff --git a/app/soapbox/features/event/event-discussion.tsx b/app/soapbox/features/event/event-discussion.tsx
index 4593ebebc..54a539a8a 100644
--- a/app/soapbox/features/event/event-discussion.tsx
+++ b/app/soapbox/features/event/event-discussion.tsx
@@ -24,9 +24,9 @@ import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
 type RouteParams = { statusId: string };
 
 interface IEventDiscussion {
-  params: RouteParams,
-  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
-  onOpenVideo: (video: AttachmentEntity, time: number) => void,
+  params: RouteParams
+  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void
+  onOpenVideo: (video: AttachmentEntity, time: number) => void
 }
 
 const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index cec8829ae..4b9f6c0a4 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -18,7 +18,7 @@ import type { Status as StatusEntity } from 'soapbox/types/entities';
 type RouteParams = { statusId: string };
 
 interface IEventInformation {
-  params: RouteParams,
+  params: RouteParams
 }
 
 const EventInformation: React.FC<IEventInformation> = ({ params }) => {
diff --git a/app/soapbox/features/export-data/components/csv-exporter.tsx b/app/soapbox/features/export-data/components/csv-exporter.tsx
index 2b2e760c9..e86ee38d5 100644
--- a/app/soapbox/features/export-data/components/csv-exporter.tsx
+++ b/app/soapbox/features/export-data/components/csv-exporter.tsx
@@ -7,11 +7,11 @@ import { AppDispatch, RootState } from 'soapbox/store';
 
 interface ICSVExporter {
   messages: {
-    input_label: MessageDescriptor,
-    input_hint: MessageDescriptor,
-    submit: MessageDescriptor,
-  },
-  action: () => (dispatch: AppDispatch, getState: () => RootState) => Promise<void>,
+    input_label: MessageDescriptor
+    input_hint: MessageDescriptor
+    submit: MessageDescriptor
+  }
+  action: () => (dispatch: AppDispatch, getState: () => RootState) => Promise<void>
 }
 
 const CSVExporter: React.FC<ICSVExporter> = ({ messages, action }) => {
diff --git a/app/soapbox/features/favourited-statuses/index.tsx b/app/soapbox/features/favourited-statuses/index.tsx
index 1e381d37e..4be3d21f8 100644
--- a/app/soapbox/features/favourited-statuses/index.tsx
+++ b/app/soapbox/features/favourited-statuses/index.tsx
@@ -17,7 +17,7 @@ const messages = defineMessages({
 
 interface IFavourites {
   params?: {
-    username?: string,
+    username?: string
   }
 }
 
diff --git a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
index 3940c54c7..153cba1a7 100644
--- a/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
@@ -17,8 +17,8 @@ const hasRestrictions = (remoteInstance: ImmutableMap<string, any>): boolean =>
 };
 
 interface IRestriction {
-  icon: string,
-  children: React.ReactNode,
+  icon: string
+  children: React.ReactNode
 }
 
 const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
@@ -34,7 +34,7 @@ const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
 };
 
 interface IInstanceRestrictions {
-  remoteInstance: ImmutableMap<string, any>,
+  remoteInstance: ImmutableMap<string, any>
 }
 
 const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance }) => {
diff --git a/app/soapbox/features/federation-restrictions/components/restricted-instance.tsx b/app/soapbox/features/federation-restrictions/components/restricted-instance.tsx
index 2dd5aedb8..0ee4b1280 100644
--- a/app/soapbox/features/federation-restrictions/components/restricted-instance.tsx
+++ b/app/soapbox/features/federation-restrictions/components/restricted-instance.tsx
@@ -10,7 +10,7 @@ import InstanceRestrictions from './instance-restrictions';
 const getRemoteInstance = makeGetRemoteInstance();
 
 interface IRestrictedInstance {
-  host: string,
+  host: string
 }
 
 const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
diff --git a/app/soapbox/features/filters/index.tsx b/app/soapbox/features/filters/index.tsx
index 152892651..20c59ff36 100644
--- a/app/soapbox/features/filters/index.tsx
+++ b/app/soapbox/features/filters/index.tsx
@@ -228,7 +228,7 @@ const Filters = () => {
               </HStack>
             </Stack>
             <IconButton
-              iconClassName='h-5 w-5 text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500'
+              iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500'
               src={require('@tabler/icons/trash.svg')}
               onClick={handleFilterDelete(filter.id)}
               title={intl.formatMessage(messages.delete)}
diff --git a/app/soapbox/features/follow-requests/components/account-authorize.tsx b/app/soapbox/features/follow-requests/components/account-authorize.tsx
index b99f4c0fc..01b894c4c 100644
--- a/app/soapbox/features/follow-requests/components/account-authorize.tsx
+++ b/app/soapbox/features/follow-requests/components/account-authorize.tsx
@@ -13,7 +13,7 @@ const messages = defineMessages({
 });
 
 interface IAccountAuthorize {
-  id: string,
+  id: string
 }
 
 const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
diff --git a/app/soapbox/features/followers/index.tsx b/app/soapbox/features/followers/index.tsx
index c01dae0bb..8aa86324c 100644
--- a/app/soapbox/features/followers/index.tsx
+++ b/app/soapbox/features/followers/index.tsx
@@ -22,7 +22,7 @@ const messages = defineMessages({
 
 interface IFollowers {
   params?: {
-    username?: string,
+    username?: string
   }
 }
 
diff --git a/app/soapbox/features/following/index.tsx b/app/soapbox/features/following/index.tsx
index 2392edd8d..bece30fe0 100644
--- a/app/soapbox/features/following/index.tsx
+++ b/app/soapbox/features/following/index.tsx
@@ -22,7 +22,7 @@ const messages = defineMessages({
 
 interface IFollowing {
   params?: {
-    username?: string,
+    username?: string
   }
 }
 
diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index 16c75004b..564280c9b 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -5,13 +5,13 @@ import { v4 as uuidv4 } from 'uuid';
 import { Select } from '../../components/ui';
 
 interface IInputContainer {
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  required?: boolean,
-  type?: string,
-  extraClass?: string,
-  error?: boolean,
-  children: React.ReactNode,
+  label?: React.ReactNode
+  hint?: React.ReactNode
+  required?: boolean
+  type?: string
+  extraClass?: string
+  error?: boolean
+  children: React.ReactNode
 }
 
 export const InputContainer: React.FC<IInputContainer> = (props) => {
@@ -31,9 +31,9 @@ export const InputContainer: React.FC<IInputContainer> = (props) => {
 };
 
 interface ILabelInputContainer {
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  children: React.ReactNode,
+  label?: React.ReactNode
+  hint?: React.ReactNode
+  children: React.ReactNode
 }
 
 export const LabelInputContainer: React.FC<ILabelInputContainer> = ({ label, hint, children }) => {
@@ -55,7 +55,7 @@ export const LabelInputContainer: React.FC<ILabelInputContainer> = ({ label, hin
 };
 
 interface ILabelInput {
-  label?: React.ReactNode,
+  label?: React.ReactNode
 }
 
 export const LabelInput: React.FC<ILabelInput> = ({ label, ...props }) => (
@@ -65,7 +65,7 @@ export const LabelInput: React.FC<ILabelInput> = ({ label, ...props }) => (
 );
 
 interface ILabelTextarea {
-  label?: React.ReactNode,
+  label?: React.ReactNode
 }
 
 export const LabelTextarea: React.FC<ILabelTextarea> = ({ label, ...props }) => (
@@ -75,21 +75,21 @@ export const LabelTextarea: React.FC<ILabelTextarea> = ({ label, ...props }) =>
 );
 
 interface ISimpleInput {
-  type: string,
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  error?: boolean,
-  onChange?: React.ChangeEventHandler,
-  min?: number,
-  max?: number,
-  pattern?: string,
-  name?: string,
-  placeholder?: string,
-  value?: string | number,
-  autoComplete?: string,
-  autoCorrect?: string,
-  autoCapitalize?: string,
-  required?: boolean,
+  type: string
+  label?: React.ReactNode
+  hint?: React.ReactNode
+  error?: boolean
+  onChange?: React.ChangeEventHandler
+  min?: number
+  max?: number
+  pattern?: string
+  name?: string
+  placeholder?: string
+  value?: string | number
+  autoComplete?: string
+  autoCorrect?: string
+  autoCapitalize?: string
+  required?: boolean
 }
 
 export const SimpleInput: React.FC<ISimpleInput> = (props) => {
@@ -104,13 +104,13 @@ export const SimpleInput: React.FC<ISimpleInput> = (props) => {
 };
 
 interface ICheckbox {
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  name?: string,
-  checked?: boolean,
-  disabled?: boolean,
-  onChange?: React.ChangeEventHandler<HTMLInputElement>,
-  required?: boolean,
+  label?: React.ReactNode
+  hint?: React.ReactNode
+  name?: string
+  checked?: boolean
+  disabled?: boolean
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  required?: boolean
 }
 
 export const Checkbox: React.FC<ICheckbox> = (props) => (
@@ -118,11 +118,11 @@ export const Checkbox: React.FC<ICheckbox> = (props) => (
 );
 
 interface ISelectDropdown {
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  items: Record<string, string>,
-  defaultValue?: string,
-  onChange?: React.ChangeEventHandler,
+  label?: React.ReactNode
+  hint?: React.ReactNode
+  items: Record<string, string>
+  defaultValue?: string
+  onChange?: React.ChangeEventHandler
 }
 
 export const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
@@ -141,18 +141,18 @@ export const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
 };
 
 interface ITextInput {
-  name?: string,
-  onChange?: React.ChangeEventHandler,
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  placeholder?: string,
-  value?: string,
-  autoComplete?: string,
-  autoCorrect?: string,
-  autoCapitalize?: string,
-  pattern?: string,
-  error?: boolean,
-  required?: boolean,
+  name?: string
+  onChange?: React.ChangeEventHandler
+  label?: React.ReactNode
+  hint?: React.ReactNode
+  placeholder?: string
+  value?: string
+  autoComplete?: string
+  autoCorrect?: string
+  autoCapitalize?: string
+  pattern?: string
+  error?: boolean
+  required?: boolean
 }
 
 export const TextInput: React.FC<ITextInput> = props => (
@@ -168,11 +168,11 @@ FileChooser.defaultProps = {
 };
 
 interface IFileChooserLogo {
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  name?: string,
-  accept?: string[],
-  onChange: React.ChangeEventHandler<HTMLInputElement>,
+  label?: React.ReactNode
+  hint?: React.ReactNode
+  name?: string
+  accept?: string[]
+  onChange: React.ChangeEventHandler<HTMLInputElement>
 }
 
 export const FileChooserLogo: React.FC<IFileChooserLogo> = props => (
diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx
index dbb377062..e341a28f2 100644
--- a/app/soapbox/features/group/components/group-header.tsx
+++ b/app/soapbox/features/group/components/group-header.tsx
@@ -20,7 +20,7 @@ const messages = defineMessages({
 });
 
 interface IGroupHeader {
-  group?: Group | false | null,
+  group?: Group | false | null
 }
 
 const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx
index 501bc11a0..3b8482ec4 100644
--- a/app/soapbox/features/group/group-members.tsx
+++ b/app/soapbox/features/group/group-members.tsx
@@ -170,7 +170,7 @@ const GroupMember: React.FC<IGroupMember> = ({ accountId, accountRole, groupId,
             src={require('@tabler/icons/dots.svg')}
             theme='outlined'
             className='px-2'
-            iconClassName='w-4 h-4'
+            iconClassName='h-4 w-4'
             children={null}
           />
 
diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx
index 51d7d2cc9..f4cf2f574 100644
--- a/app/soapbox/features/group/group-timeline.tsx
+++ b/app/soapbox/features/group/group-timeline.tsx
@@ -15,7 +15,7 @@ import Timeline from '../ui/components/timeline';
 type RouteParams = { id: string };
 
 interface IGroupTimeline {
-  params: RouteParams,
+  params: RouteParams
 }
 
 const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
diff --git a/app/soapbox/features/hashtag-timeline/index.tsx b/app/soapbox/features/hashtag-timeline/index.tsx
index 133a96a5f..2133e3e3a 100644
--- a/app/soapbox/features/hashtag-timeline/index.tsx
+++ b/app/soapbox/features/hashtag-timeline/index.tsx
@@ -23,9 +23,9 @@ const messages = defineMessages({
 
 interface IHashtagTimeline {
   params?: {
-    id?: string,
-    tags?: Tags,
-  },
+    id?: string
+    tags?: Tags
+  }
 }
 
 export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
diff --git a/app/soapbox/features/import-data/components/csv-importer.tsx b/app/soapbox/features/import-data/components/csv-importer.tsx
index 6785e5cbd..b0f7758c4 100644
--- a/app/soapbox/features/import-data/components/csv-importer.tsx
+++ b/app/soapbox/features/import-data/components/csv-importer.tsx
@@ -8,11 +8,11 @@ import type { AppDispatch, RootState } from 'soapbox/store';
 
 interface ICSVImporter {
   messages: {
-    input_label: MessageDescriptor,
-    input_hint: MessageDescriptor,
-    submit: MessageDescriptor,
-  },
-  action: (params: FormData) => (dispatch: AppDispatch, getState: () => RootState) => Promise<void>,
+    input_label: MessageDescriptor
+    input_hint: MessageDescriptor
+    submit: MessageDescriptor
+  }
+  action: (params: FormData) => (dispatch: AppDispatch, getState: () => RootState) => Promise<void>
 }
 
 const CSVImporter: React.FC<ICSVImporter> = ({ messages, action }) => {
diff --git a/app/soapbox/features/list-adder/components/list.tsx b/app/soapbox/features/list-adder/components/list.tsx
index 834c92c77..795767ed5 100644
--- a/app/soapbox/features/list-adder/components/list.tsx
+++ b/app/soapbox/features/list-adder/components/list.tsx
@@ -12,7 +12,7 @@ const messages = defineMessages({
 });
 
 interface IList {
-  listId: string,
+  listId: string
 }
 
 const List: React.FC<IList> = ({ listId }) => {
diff --git a/app/soapbox/features/list-adder/index.tsx b/app/soapbox/features/list-adder/index.tsx
index f47e338d7..17ead05be 100644
--- a/app/soapbox/features/list-adder/index.tsx
+++ b/app/soapbox/features/list-adder/index.tsx
@@ -31,8 +31,8 @@ const getOrderedLists = createSelector([(state: RootState) => state.lists], list
 });
 
 interface IListAdder {
-  accountId: string,
-  onClose: (type: string) => void,
+  accountId: string
+  onClose: (type: string) => void
 }
 
 const ListAdder: React.FC<IListAdder> = ({ accountId, onClose }) => {
diff --git a/app/soapbox/features/list-editor/components/account.tsx b/app/soapbox/features/list-editor/components/account.tsx
index 5023a5b8b..587c71aed 100644
--- a/app/soapbox/features/list-editor/components/account.tsx
+++ b/app/soapbox/features/list-editor/components/account.tsx
@@ -13,7 +13,7 @@ const messages = defineMessages({
 });
 
 interface IAccount {
-  accountId: string,
+  accountId: string
 }
 
 const Account: React.FC<IAccount> = ({ accountId }) => {
diff --git a/app/soapbox/features/list-editor/index.tsx b/app/soapbox/features/list-editor/index.tsx
index 38726ceac..ad4806584 100644
--- a/app/soapbox/features/list-editor/index.tsx
+++ b/app/soapbox/features/list-editor/index.tsx
@@ -18,8 +18,8 @@ const messages = defineMessages({
 });
 
 interface IListEditor {
-  listId: string,
-  onClose: (type: string) => void,
+  listId: string
+  onClose: (type: string) => void
 }
 
 const ListEditor: React.FC<IListEditor> = ({ listId, onClose }) => {
diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index d72835be6..21861da0e 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -88,8 +88,8 @@ const Lists: React.FC = () => {
               <span className='grow'>
                 {list.title}
               </span>
-              <IconButton iconClassName='h-5 w-5 text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500' src={require('@tabler/icons/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
-              <IconButton iconClassName='h-5 w-5 text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500' src={require('@tabler/icons/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
+              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={require('@tabler/icons/pencil.svg')} onClick={handleEditClick(list.id)} title={intl.formatMessage(messages.editList)} />
+              <IconButton iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500' src={require('@tabler/icons/trash.svg')} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
             </Link>
           ))}
         </ScrollableList>
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 1a2755800..5df21c647 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -154,13 +154,13 @@ const buildMessage = (
 const avatarSize = 48;
 
 interface INotificaton {
-  hidden?: boolean,
-  notification: NotificationEntity,
-  onMoveUp?: (notificationId: string) => void,
-  onMoveDown?: (notificationId: string) => void,
-  onReblog?: (status: StatusEntity, e?: KeyboardEvent) => void,
-  getScrollPosition?: () => ScrollPosition | undefined,
-  updateScrollBottom?: (bottom: number) => void,
+  hidden?: boolean
+  notification: NotificationEntity
+  onMoveUp?: (notificationId: string) => void
+  onMoveDown?: (notificationId: string) => void
+  onReblog?: (status: StatusEntity, e?: KeyboardEvent) => void
+  getScrollPosition?: () => ScrollPosition | undefined
+  updateScrollBottom?: (bottom: number) => void
 }
 
 const Notification: React.FC<INotificaton> = (props) => {
diff --git a/app/soapbox/features/notifications/components/setting-toggle.tsx b/app/soapbox/features/notifications/components/setting-toggle.tsx
index 5b7ca9100..1710a8ee2 100644
--- a/app/soapbox/features/notifications/components/setting-toggle.tsx
+++ b/app/soapbox/features/notifications/components/setting-toggle.tsx
@@ -6,13 +6,13 @@ import type { Map as ImmutableMap } from 'immutable';
 
 interface ISettingToggle {
   /** Unique identifier for the Toggle. */
-  id?: string,
+  id?: string
   /** The full user settings map. */
-  settings: ImmutableMap<string, any>,
+  settings: ImmutableMap<string, any>
   /** Array of key names leading into the setting map. */
-  settingPath: string[],
+  settingPath: string[]
   /** Callback when the setting is toggled. */
-  onChange: (settingPath: string[], checked: boolean) => void,
+  onChange: (settingPath: string[], checked: boolean) => void
 }
 
 /** Stateful toggle to change user settings. */
diff --git a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
index c367af132..e09e73439 100644
--- a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 import { randomIntFromInterval, generateText } from '../utils';
 
 interface IPlaceholderDisplayName {
-  maxLength: number,
-  minLength: number,
-  withSuffix?: boolean,
+  maxLength: number
+  minLength: number
+  withSuffix?: boolean
 }
 
 /** Fake display name to show when data is loading. */
diff --git a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
index 9f6507f19..44ece7320 100644
--- a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
@@ -12,7 +12,7 @@ const PlaceholderGroupCard = () => {
   return (
     <div className='animate-pulse overflow-hidden'>
       <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
-        <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
+        <div className='relative m-[-1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
           <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
             <div className='h-16 w-16 rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900' />
           </div>
diff --git a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
index 09dc505e7..f8d85864c 100644
--- a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
@@ -4,8 +4,8 @@ import React, { useState } from 'react';
 import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
 
 interface IPlaceholderMediaGallery {
-  media: ImmutableList<AttachmentEntity>;
-  defaultWidth?: number;
+  media: ImmutableList<AttachmentEntity>
+  defaultWidth?: number
 }
 
 const SizeData = ImmutableRecord({
diff --git a/app/soapbox/features/placeholder/components/placeholder-status-content.tsx b/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
index 0537f8520..dcd21cb20 100644
--- a/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { randomIntFromInterval, generateText } from '../utils';
 
 interface IPlaceholderStatusContent {
-  maxLength: number,
-  minLength: number,
+  maxLength: number
+  minLength: number
 }
 
 /** Fake status content while data is loading. */
diff --git a/app/soapbox/features/public-layout/components/header.tsx b/app/soapbox/features/public-layout/components/header.tsx
index 73e22ddca..6d54e24a2 100644
--- a/app/soapbox/features/public-layout/components/header.tsx
+++ b/app/soapbox/features/public-layout/components/header.tsx
@@ -146,7 +146,7 @@ const Header = () => {
                   <IconButton
                     src={require('@tabler/icons/help.svg')}
                     className='cursor-pointer bg-transparent text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500'
-                    iconClassName='w-5 h-5'
+                    iconClassName='h-5 w-5'
                     transparent
                   />
                 </Tooltip>
diff --git a/app/soapbox/features/register-invite/index.tsx b/app/soapbox/features/register-invite/index.tsx
index c1f21f0ea..763749bc8 100644
--- a/app/soapbox/features/register-invite/index.tsx
+++ b/app/soapbox/features/register-invite/index.tsx
@@ -7,7 +7,7 @@ import RegistrationForm from 'soapbox/features/auth-login/components/registratio
 import { useInstance } from 'soapbox/hooks';
 
 interface RegisterInviteParams {
-  token: string,
+  token: string
 }
 
 /** Page to register with an invitation. */
diff --git a/app/soapbox/features/remote-timeline/components/pinned-hosts-picker.tsx b/app/soapbox/features/remote-timeline/components/pinned-hosts-picker.tsx
index 6530e4131..c787764b2 100644
--- a/app/soapbox/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/app/soapbox/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -7,7 +7,7 @@ import { useSettings } from 'soapbox/hooks';
 
 interface IPinnedHostsPicker {
   /** The active host among pinned hosts. */
-  host?: string,
+  host?: string
 }
 
 const PinnedHostsPicker: React.FC<IPinnedHostsPicker> = ({ host: activeHost }) => {
diff --git a/app/soapbox/features/remote-timeline/index.tsx b/app/soapbox/features/remote-timeline/index.tsx
index 67d8c31d5..3283078af 100644
--- a/app/soapbox/features/remote-timeline/index.tsx
+++ b/app/soapbox/features/remote-timeline/index.tsx
@@ -14,7 +14,7 @@ import PinnedHostsPicker from './components/pinned-hosts-picker';
 
 interface IRemoteTimeline {
   params?: {
-    instance?: string,
+    instance?: string
   }
 }
 
diff --git a/app/soapbox/features/reply-mentions/account.tsx b/app/soapbox/features/reply-mentions/account.tsx
index db3dbce8f..be6b61166 100644
--- a/app/soapbox/features/reply-mentions/account.tsx
+++ b/app/soapbox/features/reply-mentions/account.tsx
@@ -15,9 +15,9 @@ const messages = defineMessages({
 });
 
 interface IAccount {
-  composeId: string,
-  accountId: string,
-  author: boolean,
+  composeId: string
+  accountId: string
+  author: boolean
 }
 
 const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
diff --git a/app/soapbox/features/report/components/status-check-box.tsx b/app/soapbox/features/report/components/status-check-box.tsx
index 2bc3af96a..9bb20dc77 100644
--- a/app/soapbox/features/report/components/status-check-box.tsx
+++ b/app/soapbox/features/report/components/status-check-box.tsx
@@ -10,8 +10,8 @@ import Bundle from '../../ui/components/bundle';
 import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
 
 interface IStatusCheckBox {
-  id: string,
-  disabled?: boolean,
+  id: string
+  disabled?: boolean
 }
 
 const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
diff --git a/app/soapbox/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/app/soapbox/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index 6ee898eb6..6ff3d867b 100644
--- a/app/soapbox/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/app/soapbox/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 interface IScheduledStatusActionBar {
-  status: StatusEntity,
+  status: StatusEntity
 }
 
 const ScheduledStatusActionBar: React.FC<IScheduledStatusActionBar> = ({ status }) => {
diff --git a/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx b/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx
index 5aa8d41ba..e7e0ab697 100644
--- a/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx
@@ -16,7 +16,7 @@ import ScheduledStatusActionBar from './scheduled-status-action-bar';
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 interface IScheduledStatus {
-  statusId: string,
+  statusId: string
 }
 
 const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) => {
diff --git a/app/soapbox/features/security/mfa/enable-otp-form.tsx b/app/soapbox/features/security/mfa/enable-otp-form.tsx
index 1d9be8749..239a1ade6 100644
--- a/app/soapbox/features/security/mfa/enable-otp-form.tsx
+++ b/app/soapbox/features/security/mfa/enable-otp-form.tsx
@@ -14,8 +14,8 @@ const messages = defineMessages({
 });
 
 interface IEnableOtpForm {
-  displayOtpForm: boolean,
-  handleSetupProceedClick: (event: React.MouseEvent) => void,
+  displayOtpForm: boolean
+  handleSetupProceedClick: (event: React.MouseEvent) => void
 }
 
 const EnableOtpForm: React.FC<IEnableOtpForm> = ({ displayOtpForm, handleSetupProceedClick }) => {
diff --git a/app/soapbox/features/soapbox-config/components/color-picker.tsx b/app/soapbox/features/soapbox-config/components/color-picker.tsx
index 4cba36e6a..7decd00bd 100644
--- a/app/soapbox/features/soapbox-config/components/color-picker.tsx
+++ b/app/soapbox/features/soapbox-config/components/color-picker.tsx
@@ -7,10 +7,10 @@ import { isMobile } from 'soapbox/is-mobile';
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
 interface IColorPicker {
-  style?: React.CSSProperties,
-  value: string,
-  onChange: ColorChangeHandler,
-  onClose: () => void,
+  style?: React.CSSProperties
+  value: string
+  onChange: ColorChangeHandler
+  onClose: () => void
 }
 
 const ColorPicker: React.FC<IColorPicker> = ({ style, value, onClose, onChange }) => {
diff --git a/app/soapbox/features/soapbox-config/components/color-with-picker.tsx b/app/soapbox/features/soapbox-config/components/color-with-picker.tsx
index 408c91283..b202559c9 100644
--- a/app/soapbox/features/soapbox-config/components/color-with-picker.tsx
+++ b/app/soapbox/features/soapbox-config/components/color-with-picker.tsx
@@ -9,9 +9,9 @@ import ColorPicker from './color-picker';
 import type { ColorChangeHandler } from 'react-color';
 
 interface IColorWithPicker {
-  value: string,
-  onChange: ColorChangeHandler,
-  className?: string,
+  value: string
+  onChange: ColorChangeHandler
+  className?: string
 }
 
 const ColorWithPicker: React.FC<IColorWithPicker> = ({ value, onChange, className }) => {
diff --git a/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx b/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
index 03d6e194b..950afdc08 100644
--- a/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
@@ -12,8 +12,8 @@ const messages = defineMessages({
 });
 
 interface IIconPickerDropdown {
-  value: string,
-  onPickEmoji: React.ChangeEventHandler,
+  value: string
+  onPickEmoji: React.ChangeEventHandler
 }
 
 const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji }) => {
diff --git a/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx b/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx
index 9a2c2e2ba..46744e63e 100644
--- a/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx
@@ -19,10 +19,10 @@ const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 const categoriesSort = ['custom'];
 
 interface IIconPickerMenu {
-  customEmojis: Record<string, Array<string>>,
-  onClose: () => void,
-  onPick: any,
-  style?: React.CSSProperties,
+  customEmojis: Record<string, Array<string>>
+  onClose: () => void
+  onPick: any
+  style?: React.CSSProperties
 }
 
 const IconPickerMenu: React.FC<IIconPickerMenu> = ({ customEmojis, onClose, onPick, style }) => {
diff --git a/app/soapbox/features/soapbox-config/components/icon-picker.tsx b/app/soapbox/features/soapbox-config/components/icon-picker.tsx
index 1f0e82060..475f87b6a 100644
--- a/app/soapbox/features/soapbox-config/components/icon-picker.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import IconPickerDropdown from './icon-picker-dropdown';
 
 interface IIconPicker {
-  value: string,
-  onChange: React.ChangeEventHandler,
+  value: string
+  onChange: React.ChangeEventHandler
 }
 
 const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
diff --git a/app/soapbox/features/soapbox-config/components/site-preview.tsx b/app/soapbox/features/soapbox-config/components/site-preview.tsx
index 5ef45ab87..49576683a 100644
--- a/app/soapbox/features/soapbox-config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox-config/components/site-preview.tsx
@@ -11,7 +11,7 @@ import { generateThemeCss } from 'soapbox/utils/theme';
 
 interface ISitePreview {
   /** Raw Soapbox configuration. */
-  soapbox: any,
+  soapbox: any
 }
 
 /** Renders a preview of the website's style with the configuration applied. */
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index e210876b8..e7925cb5d 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -21,14 +21,14 @@ const trim = (text: string, len: number): string => {
 };
 
 interface ICard {
-  card: CardEntity,
-  maxTitle?: number,
-  maxDescription?: number,
-  onOpenMedia: (attachments: ImmutableList<Attachment>, index: number) => void,
-  compact?: boolean,
-  defaultWidth?: number,
-  cacheWidth?: (width: number) => void,
-  horizontal?: boolean,
+  card: CardEntity
+  maxTitle?: number
+  maxDescription?: number
+  onOpenMedia: (attachments: ImmutableList<Attachment>, index: number) => void
+  compact?: boolean
+  defaultWidth?: number
+  cacheWidth?: (width: number) => void
+  horizontal?: boolean
 }
 
 const Card: React.FC<ICard> = ({
diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index e558f3035..4fc0f0eaf 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/app/soapbox/features/status/components/detailed-status.tsx
@@ -18,13 +18,13 @@ import type { List as ImmutableList } from 'immutable';
 import type { Attachment as AttachmentEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 interface IDetailedStatus {
-  status: StatusEntity,
-  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
-  onOpenVideo: (media: ImmutableList<AttachmentEntity>, start: number) => void,
-  onToggleHidden: (status: StatusEntity) => void,
-  showMedia: boolean,
-  onOpenCompareHistoryModal: (status: StatusEntity) => void,
-  onToggleMediaVisibility: () => void,
+  status: StatusEntity
+  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void
+  onOpenVideo: (media: ImmutableList<AttachmentEntity>, start: number) => void
+  onToggleHidden: (status: StatusEntity) => void
+  showMedia: boolean
+  onOpenCompareHistoryModal: (status: StatusEntity) => void
+  onToggleMediaVisibility: () => void
 }
 
 const DetailedStatus: React.FC<IDetailedStatus> = ({
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index 5303b2d73..fb4db1466 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -14,7 +14,7 @@ import { shortNumberFormat } from 'soapbox/utils/numbers';
 import type { Status } from 'soapbox/types/entities';
 
 interface IStatusInteractionBar {
-  status: Status,
+  status: Status
 }
 
 const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.Element | null => {
@@ -175,9 +175,9 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
 };
 
 interface IInteractionCounter {
-  count: number,
-  onClick?: React.MouseEventHandler<HTMLButtonElement>,
-  children: React.ReactNode,
+  count: number
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  children: React.ReactNode
 }
 
 const InteractionCounter: React.FC<IInteractionCounter> = ({ count, onClick, children }) => {
diff --git a/app/soapbox/features/status/components/thread-status.tsx b/app/soapbox/features/status/components/thread-status.tsx
index 1c6bc9ef2..73c42e7e3 100644
--- a/app/soapbox/features/status/components/thread-status.tsx
+++ b/app/soapbox/features/status/components/thread-status.tsx
@@ -7,11 +7,11 @@ import PlaceholderStatus from 'soapbox/features/placeholder/components/placehold
 import { useAppSelector } from 'soapbox/hooks';
 
 interface IThreadStatus {
-  id: string,
-  contextType?: string,
-  focusedStatusId: string,
-  onMoveUp: (id: string) => void,
-  onMoveDown: (id: string) => void,
+  id: string
+  contextType?: string
+  focusedStatusId: string
+  onMoveUp: (id: string) => void
+  onMoveDown: (id: string) => void
 }
 
 /** Status with reply-connector in threads. */
diff --git a/app/soapbox/features/status/containers/quoted-status-container.tsx b/app/soapbox/features/status/containers/quoted-status-container.tsx
index a870aa2c8..fa60f65c4 100644
--- a/app/soapbox/features/status/containers/quoted-status-container.tsx
+++ b/app/soapbox/features/status/containers/quoted-status-container.tsx
@@ -6,7 +6,7 @@ import { makeGetStatus } from 'soapbox/selectors';
 
 interface IQuotedStatusContainer {
   /** Status ID to the quoted status. */
-  statusId: string,
+  statusId: string
 }
 
 const QuotedStatusContainer: React.FC<IQuotedStatusContainer> = ({ statusId }) => {
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index dfda21dd9..bda274cd1 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -117,9 +117,9 @@ type DisplayMedia = 'default' | 'hide_all' | 'show_all';
 type RouteParams = { statusId: string };
 
 interface IThread {
-  params: RouteParams,
-  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
-  onOpenVideo: (video: AttachmentEntity, time: number) => void,
+  params: RouteParams
+  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void
+  onOpenVideo: (video: AttachmentEntity, time: number) => void
 }
 
 const Thread: React.FC<IThread> = (props) => {
diff --git a/app/soapbox/features/theme-editor/components/color.tsx b/app/soapbox/features/theme-editor/components/color.tsx
index fd1e7d8f7..fed69bd6a 100644
--- a/app/soapbox/features/theme-editor/components/color.tsx
+++ b/app/soapbox/features/theme-editor/components/color.tsx
@@ -5,8 +5,8 @@ import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-wi
 import type { ColorChangeHandler } from 'react-color';
 
 interface IColor {
-  color: string,
-  onChange: (color: string) => void,
+  color: string
+  onChange: (color: string) => void
 }
 
 /** Color input. */
diff --git a/app/soapbox/features/theme-editor/components/palette.tsx b/app/soapbox/features/theme-editor/components/palette.tsx
index 748f2c17f..7e665adda 100644
--- a/app/soapbox/features/theme-editor/components/palette.tsx
+++ b/app/soapbox/features/theme-editor/components/palette.tsx
@@ -8,13 +8,13 @@ import { hueShift } from 'soapbox/utils/theme';
 import Color from './color';
 
 interface ColorGroup {
-  [tint: string]: string,
+  [tint: string]: string
 }
 
 interface IPalette {
-  palette: ColorGroup,
-  onChange: (palette: ColorGroup) => void,
-  resetKey?: string,
+  palette: ColorGroup
+  onChange: (palette: ColorGroup) => void
+  resetKey?: string
 }
 
 /** Editable color palette. */
diff --git a/app/soapbox/features/theme-editor/index.tsx b/app/soapbox/features/theme-editor/index.tsx
index ed77371c5..0cfde6726 100644
--- a/app/soapbox/features/theme-editor/index.tsx
+++ b/app/soapbox/features/theme-editor/index.tsx
@@ -232,10 +232,10 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
 };
 
 interface IPaletteListItem {
-  label: React.ReactNode,
-  palette: ColorGroup,
-  onChange: (palette: ColorGroup) => void,
-  resetKey?: string,
+  label: React.ReactNode
+  palette: ColorGroup
+  onChange: (palette: ColorGroup) => void
+  resetKey?: string
 }
 
 /** Palette editor inside a ListItem. */
@@ -248,9 +248,9 @@ const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange,
 };
 
 interface IColorListItem {
-  label: React.ReactNode,
-  value: string,
-  onChange: (hex: string) => void,
+  label: React.ReactNode
+  value: string
+  onChange: (hex: string) => void
 }
 
 /** Single-color picker. */
diff --git a/app/soapbox/features/timeline-insertion/abovefold.ts b/app/soapbox/features/timeline-insertion/abovefold.ts
index 9ca2f5e28..5298f029c 100644
--- a/app/soapbox/features/timeline-insertion/abovefold.ts
+++ b/app/soapbox/features/timeline-insertion/abovefold.ts
@@ -4,7 +4,7 @@ import type { PickAlgorithm } from './types';
 
 type Opts = {
   /** Randomization seed. */
-  seed: string,
+  seed: string
   /**
    * Start/end index of the slot by which one item will be randomly picked per page.
    *
@@ -12,9 +12,9 @@ type Opts = {
    *
    * `end` must be larger than `start`.
    */
-  range: [start: number, end: number],
+  range: [start: number, end: number]
   /** Number of items in the page. */
-  pageSize: number,
+  pageSize: number
 };
 
 /**
@@ -49,4 +49,4 @@ const normalizeOpts = (opts: unknown): Opts => {
 
 export {
   abovefoldAlgorithm,
-};
\ No newline at end of file
+};
diff --git a/app/soapbox/features/timeline-insertion/linear.ts b/app/soapbox/features/timeline-insertion/linear.ts
index a542e1fce..cae923944 100644
--- a/app/soapbox/features/timeline-insertion/linear.ts
+++ b/app/soapbox/features/timeline-insertion/linear.ts
@@ -2,7 +2,7 @@ import type { PickAlgorithm } from './types';
 
 type Opts = {
   /** Number of iterations until the next item is picked. */
-  interval: number,
+  interval: number
 };
 
 /** Picks the next item every iteration. */
diff --git a/app/soapbox/features/ui/components/background-shapes.tsx b/app/soapbox/features/ui/components/background-shapes.tsx
index 9768b06d6..5a8820299 100644
--- a/app/soapbox/features/ui/components/background-shapes.tsx
+++ b/app/soapbox/features/ui/components/background-shapes.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 interface IBackgroundShapes {
   /** Whether the shapes should be absolute positioned or fixed. */
-  position?: 'fixed' | 'absolute',
+  position?: 'fixed' | 'absolute'
 }
 
 /** Gradient that appears in the background of the UI. */
diff --git a/app/soapbox/features/ui/components/bundle-column-error.tsx b/app/soapbox/features/ui/components/bundle-column-error.tsx
index 4ec1af231..800ceafec 100644
--- a/app/soapbox/features/ui/components/bundle-column-error.tsx
+++ b/app/soapbox/features/ui/components/bundle-column-error.tsx
@@ -10,7 +10,7 @@ const messages = defineMessages({
 });
 
 interface IBundleColumnError {
-  onRetry: () => void,
+  onRetry: () => void
 }
 
 const BundleColumnError: React.FC<IBundleColumnError> = ({ onRetry }) => {
@@ -24,7 +24,7 @@ const BundleColumnError: React.FC<IBundleColumnError> = ({ onRetry }) => {
     <Column label={intl.formatMessage(messages.title)}>
       <Stack space={4} alignItems='center' justifyContent='center' className='min-h-[160px] rounded-lg p-10'>
         <IconButton
-          iconClassName='w-10 h-10'
+          iconClassName='h-10 w-10'
           title={intl.formatMessage(messages.retry)}
           src={require('@tabler/icons/refresh.svg')}
           onClick={handleRetry}
diff --git a/app/soapbox/features/ui/components/bundle-modal-error.tsx b/app/soapbox/features/ui/components/bundle-modal-error.tsx
index 1a8ab1d5b..6b2ad02f1 100644
--- a/app/soapbox/features/ui/components/bundle-modal-error.tsx
+++ b/app/soapbox/features/ui/components/bundle-modal-error.tsx
@@ -10,8 +10,8 @@ const messages = defineMessages({
 });
 
 interface IBundleModalError {
-  onRetry: () => void,
-  onClose: () => void,
+  onRetry: () => void
+  onClose: () => void
 }
 
 const BundleModalError: React.FC<IBundleModalError> = ({ onRetry, onClose }) => {
diff --git a/app/soapbox/features/ui/components/bundle.tsx b/app/soapbox/features/ui/components/bundle.tsx
index 8d861df75..eeb933dfd 100644
--- a/app/soapbox/features/ui/components/bundle.tsx
+++ b/app/soapbox/features/ui/components/bundle.tsx
@@ -4,19 +4,19 @@ const emptyComponent = () => null;
 const noop = () => { };
 
 export interface BundleProps {
-  fetchComponent: () => Promise<any>,
-  loading: React.ComponentType,
-  error: React.ComponentType<{ onRetry: (props?: BundleProps) => void }>,
-  children: (mod: any) => React.ReactNode,
-  renderDelay?: number,
-  onFetch: () => void,
-  onFetchSuccess: () => void,
-  onFetchFail: (error: any) => void,
+  fetchComponent: () => Promise<any>
+  loading: React.ComponentType
+  error: React.ComponentType<{ onRetry: (props?: BundleProps) => void }>
+  children: (mod: any) => React.ReactNode
+  renderDelay?: number
+  onFetch: () => void
+  onFetchSuccess: () => void
+  onFetchFail: (error: any) => void
 }
 
 interface BundleState {
-  mod: any,
-  forceRender: boolean,
+  mod: any
+  forceRender: boolean
 }
 
 /** Fetches and renders an async component. */
diff --git a/app/soapbox/features/ui/components/columns-area.tsx b/app/soapbox/features/ui/components/columns-area.tsx
index d3c07d580..419ff64ca 100644
--- a/app/soapbox/features/ui/components/columns-area.tsx
+++ b/app/soapbox/features/ui/components/columns-area.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Layout } from '../../../components/ui';
 
 interface IColumnsArea {
-  layout: any,
+  layout: any
   children: React.ReactNode
 }
 
diff --git a/app/soapbox/features/ui/components/group-media-panel.tsx b/app/soapbox/features/ui/components/group-media-panel.tsx
index d59b79236..85432d74c 100644
--- a/app/soapbox/features/ui/components/group-media-panel.tsx
+++ b/app/soapbox/features/ui/components/group-media-panel.tsx
@@ -13,7 +13,7 @@ import MediaItem from '../../account-gallery/components/media-item';
 import type { Attachment, Group } from 'soapbox/types/entities';
 
 interface IGroupMediaPanel {
-  group?: Group,
+  group?: Group
 }
 
 const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
diff --git a/app/soapbox/features/ui/components/image-loader.tsx b/app/soapbox/features/ui/components/image-loader.tsx
index 1d091cbd7..8a7dffc68 100644
--- a/app/soapbox/features/ui/components/image-loader.tsx
+++ b/app/soapbox/features/ui/components/image-loader.tsx
@@ -6,12 +6,12 @@ import ZoomableImage from './zoomable-image';
 type EventRemover = () => void;
 
 interface IImageLoader {
-  alt?: string,
-  src: string,
-  previewSrc?: string,
-  width?: number,
-  height?: number,
-  onClick?: React.MouseEventHandler,
+  alt?: string
+  src: string
+  previewSrc?: string
+  width?: number
+  height?: number
+  onClick?: React.MouseEventHandler
 }
 
 class ImageLoader extends React.PureComponent<IImageLoader> {
diff --git a/app/soapbox/features/ui/components/instance-info-panel.tsx b/app/soapbox/features/ui/components/instance-info-panel.tsx
index 281182cbc..4e2d07730 100644
--- a/app/soapbox/features/ui/components/instance-info-panel.tsx
+++ b/app/soapbox/features/ui/components/instance-info-panel.tsx
@@ -17,7 +17,7 @@ const messages = defineMessages({
 
 interface IInstanceInfoPanel {
   /** Hostname (domain) of the remote instance, eg "gleasonator.com" */
-  host: string,
+  host: string
 }
 
 /** Widget that displays information about a remote instance to users. */
diff --git a/app/soapbox/features/ui/components/instance-moderation-panel.tsx b/app/soapbox/features/ui/components/instance-moderation-panel.tsx
index 911f325d0..b3c2ce1c2 100644
--- a/app/soapbox/features/ui/components/instance-moderation-panel.tsx
+++ b/app/soapbox/features/ui/components/instance-moderation-panel.tsx
@@ -18,7 +18,7 @@ const messages = defineMessages({
 
 interface IInstanceModerationPanel {
   /** Host (eg "gleasonator.com") of the remote instance to moderate. */
-  host: string,
+  host: string
 }
 
 /** Widget for moderators to manage a remote instance. */
diff --git a/app/soapbox/features/ui/components/link-footer.tsx b/app/soapbox/features/ui/components/link-footer.tsx
index 5f8d8c2b0..df15b7c5a 100644
--- a/app/soapbox/features/ui/components/link-footer.tsx
+++ b/app/soapbox/features/ui/components/link-footer.tsx
@@ -10,10 +10,10 @@ import { useSoapboxConfig, useOwnAccount, useFeatures, useAppDispatch } from 'so
 import sourceCode from 'soapbox/utils/code';
 
 interface IFooterLink {
-  to: string,
-  className?: string,
-  onClick?: React.EventHandler<React.MouseEvent>,
-  children: React.ReactNode,
+  to: string
+  className?: string
+  onClick?: React.EventHandler<React.MouseEvent>
+  children: React.ReactNode
 }
 
 const FooterLink: React.FC<IFooterLink> = ({ children, className, ...rest }): JSX.Element => {
diff --git a/app/soapbox/features/ui/components/modal-root.tsx b/app/soapbox/features/ui/components/modal-root.tsx
index dc4801c29..63911d82f 100644
--- a/app/soapbox/features/ui/components/modal-root.tsx
+++ b/app/soapbox/features/ui/components/modal-root.tsx
@@ -89,9 +89,9 @@ const MODAL_COMPONENTS = {
 export type ModalType = keyof typeof MODAL_COMPONENTS | null;
 
 interface IModalRoot {
-  type: ModalType,
-  props?: Record<string, any> | null,
-  onClose: (type?: ModalType) => void,
+  type: ModalType
+  props?: Record<string, any> | null
+  onClose: (type?: ModalType) => void
 }
 
 export default class ModalRoot extends React.PureComponent<IModalRoot> {
diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index 9dfafed5b..258653295 100644
--- a/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -37,9 +37,9 @@ const messages = defineMessages({
 
 interface IAccountModerationModal {
   /** Action to close the modal. */
-  onClose: (type: string) => void,
+  onClose: (type: string) => void
   /** ID of the account to moderate. */
-  accountId: string,
+  accountId: string
 }
 
 /** Moderator actions against accounts. */
diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/badge-input.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/badge-input.tsx
index 63ef22fad..4891355d3 100644
--- a/app/soapbox/features/ui/components/modals/account-moderation-modal/badge-input.tsx
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/badge-input.tsx
@@ -10,9 +10,9 @@ const messages = defineMessages({
 
 interface IBadgeInput {
   /** A badge is a tag that begins with `badge:` */
-  badges: string[],
+  badges: string[]
   /** Callback when badges change. */
-  onChange: (badges: string[]) => void,
+  onChange: (badges: string[]) => void
 }
 
 /** Manages user badges. */
diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
index 3bb46d228..3d8ea9993 100644
--- a/app/soapbox/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
@@ -34,7 +34,7 @@ const messages = defineMessages({
 
 interface IStaffRolePicker {
   /** Account whose role to change. */
-  account: AccountEntity,
+  account: AccountEntity
 }
 
 /** Picker for setting the staff role of an account. */
diff --git a/app/soapbox/features/ui/components/modals/actions-modal.tsx b/app/soapbox/features/ui/components/modals/actions-modal.tsx
index bda1a3468..8af7193ce 100644
--- a/app/soapbox/features/ui/components/modals/actions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx
@@ -13,10 +13,10 @@ import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 interface IActionsModal {
-  status: StatusEntity,
-  actions: Menu,
-  onClick: () => void,
-  onClose: () => void,
+  status: StatusEntity
+  actions: Menu
+  onClick: () => void
+  onClose: () => void
 }
 
 const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClose }) => {
diff --git a/app/soapbox/features/ui/components/modals/birthdays-modal.tsx b/app/soapbox/features/ui/components/modals/birthdays-modal.tsx
index fa5fd36de..7560e7a9c 100644
--- a/app/soapbox/features/ui/components/modals/birthdays-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/birthdays-modal.tsx
@@ -7,7 +7,7 @@ import Account from 'soapbox/features/birthdays/account';
 import { useAppSelector } from 'soapbox/hooks';
 
 interface IBirthdaysModal {
-  onClose: (string: string) => void,
+  onClose: (string: string) => void
 }
 
 const BirthdaysModal = ({ onClose }: IBirthdaysModal) => {
diff --git a/app/soapbox/features/ui/components/modals/boost-modal.tsx b/app/soapbox/features/ui/components/modals/boost-modal.tsx
index 22fe18e8a..f5e6f3858 100644
--- a/app/soapbox/features/ui/components/modals/boost-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/boost-modal.tsx
@@ -13,9 +13,9 @@ const messages = defineMessages({
 });
 
 interface IBoostModal {
-  status: StatusEntity,
-  onReblog: (status: StatusEntity) => void,
-  onClose: () => void,
+  status: StatusEntity
+  onReblog: (status: StatusEntity) => void
+  onClose: () => void
 }
 
 const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
diff --git a/app/soapbox/features/ui/components/modals/compare-history-modal.tsx b/app/soapbox/features/ui/components/modals/compare-history-modal.tsx
index 7950e880a..bce77fde6 100644
--- a/app/soapbox/features/ui/components/modals/compare-history-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compare-history-modal.tsx
@@ -11,8 +11,8 @@ import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities';
 
 interface ICompareHistoryModal {
-  onClose: (string: string) => void,
-  statusId: string,
+  onClose: (string: string) => void
+  statusId: string
 }
 
 const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId }) => {
diff --git a/app/soapbox/features/ui/components/modals/component-modal.tsx b/app/soapbox/features/ui/components/modals/component-modal.tsx
index b4daa41e7..0b1f31a41 100644
--- a/app/soapbox/features/ui/components/modals/component-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/component-modal.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 import { Modal } from 'soapbox/components/ui';
 
 interface IComponentModal {
-  onClose: (type?: string) => void,
+  onClose: (type?: string) => void
   component: React.ComponentType<{
-    onClose: (type?: string) => void,
-  }>,
-  componentProps: Record<any, any>,
+    onClose: (type?: string) => void
+  }>
+  componentProps: Record<any, any>
 }
 
 const ComponentModal: React.FC<IComponentModal> = ({ onClose, component: Component, componentProps = {} }) => (
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 0bd8d34d4..5aa862c28 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -46,9 +46,9 @@ const messages = defineMessages({
 });
 
 interface IAccount {
-  eventId: string,
-  id: string,
-  participationMessage: string | null,
+  eventId: string
+  id: string
+  participationMessage: string | null
 }
 
 const Account: React.FC<IAccount> = ({ eventId, id, participationMessage }) => {
@@ -88,7 +88,7 @@ const Account: React.FC<IAccount> = ({ eventId, id, participationMessage }) => {
 };
 
 interface IComposeEventModal {
-  onClose: (type?: string) => void,
+  onClose: (type?: string) => void
 }
 
 const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
index 057794b6c..3f3de5a17 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -8,8 +8,8 @@ import { useAppSelector } from 'soapbox/hooks';
 import type { List as ImmutableList } from 'immutable';
 
 interface IUploadButton {
-  disabled?: boolean,
-  onSelectFile: (files: FileList) => void,
+  disabled?: boolean
+  onSelectFile: (files: FileList) => void
 }
 
 const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
diff --git a/app/soapbox/features/ui/components/modals/compose-modal.tsx b/app/soapbox/features/ui/components/modals/compose-modal.tsx
index 431d27093..b007ae1ba 100644
--- a/app/soapbox/features/ui/components/modals/compose-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-modal.tsx
@@ -16,7 +16,7 @@ const messages = defineMessages({
 });
 
 interface IComposeModal {
-  onClose: (type?: string) => void,
+  onClose: (type?: string) => void
 }
 
 const ComposeModal: React.FC<IComposeModal> = ({ onClose }) => {
diff --git a/app/soapbox/features/ui/components/modals/confirmation-modal.tsx b/app/soapbox/features/ui/components/modals/confirmation-modal.tsx
index 5e7b47f4b..f788ec48b 100644
--- a/app/soapbox/features/ui/components/modals/confirmation-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/confirmation-modal.tsx
@@ -7,15 +7,15 @@ import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui';
 import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles';
 
 interface IConfirmationModal {
-  heading: React.ReactNode,
-  message: React.ReactNode,
-  confirm: React.ReactNode,
-  onClose: (type: string) => void,
-  onConfirm: () => void,
-  secondary: React.ReactNode,
-  onSecondary?: () => void,
-  onCancel: () => void,
-  checkbox?: JSX.Element,
+  heading: React.ReactNode
+  message: React.ReactNode
+  confirm: React.ReactNode
+  onClose: (type: string) => void
+  onConfirm: () => void
+  secondary: React.ReactNode
+  onSecondary?: () => void
+  onCancel: () => void
+  checkbox?: JSX.Element
   confirmationTheme?: ButtonThemes
 }
 
diff --git a/app/soapbox/features/ui/components/modals/edit-announcement-modal.tsx b/app/soapbox/features/ui/components/modals/edit-announcement-modal.tsx
index ad1fcb647..2a7fdf65c 100644
--- a/app/soapbox/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/edit-announcement-modal.tsx
@@ -16,7 +16,7 @@ const messages = defineMessages({
 });
 
 interface IEditAnnouncementModal {
-  onClose: (type?: string) => void,
+  onClose: (type?: string) => void
 }
 
 const EditAnnouncementModal: React.FC<IEditAnnouncementModal> = ({ onClose }) => {
diff --git a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
index 55a91ae1f..59930e380 100644
--- a/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
@@ -20,8 +20,8 @@ const messages = defineMessages({
 });
 
 interface IEditFederationModal {
-  host: string,
-  onClose: () => void,
+  host: string
+  onClose: () => void
 }
 
 /** Modal for moderators to edit federation with a remote instance. */
diff --git a/app/soapbox/features/ui/components/modals/embed-modal.tsx b/app/soapbox/features/ui/components/modals/embed-modal.tsx
index fca111006..84b3f2d7b 100644
--- a/app/soapbox/features/ui/components/modals/embed-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/embed-modal.tsx
@@ -9,8 +9,8 @@ import { useAppDispatch } from 'soapbox/hooks';
 import useEmbed from 'soapbox/queries/embed';
 
 interface IEmbedModal {
-  url: string,
-  onError: (error: any) => void,
+  url: string
+  onError: (error: any) => void
 }
 
 const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
diff --git a/app/soapbox/features/ui/components/modals/event-map-modal.tsx b/app/soapbox/features/ui/components/modals/event-map-modal.tsx
index b918d7204..1a5aecb15 100644
--- a/app/soapbox/features/ui/components/modals/event-map-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/event-map-modal.tsx
@@ -17,8 +17,8 @@ L.Icon.Default.mergeOptions({
 });
 
 interface IEventMapModal {
-  onClose: (type: string) => void,
-  statusId: string,
+  onClose: (type: string) => void
+  statusId: string
 }
 
 const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
diff --git a/app/soapbox/features/ui/components/modals/event-participants-modal.tsx b/app/soapbox/features/ui/components/modals/event-participants-modal.tsx
index 1bb6844e6..d18a63959 100644
--- a/app/soapbox/features/ui/components/modals/event-participants-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/event-participants-modal.tsx
@@ -8,8 +8,8 @@ import AccountContainer from 'soapbox/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 interface IEventParticipantsModal {
-  onClose: (type: string) => void,
-  statusId: string,
+  onClose: (type: string) => void
+  statusId: string
 }
 
 const EventParticipantsModal: React.FC<IEventParticipantsModal> = ({ onClose, statusId }) => {
diff --git a/app/soapbox/features/ui/components/modals/familiar-followers-modal.tsx b/app/soapbox/features/ui/components/modals/familiar-followers-modal.tsx
index 3b137ca5f..8bbd7adff 100644
--- a/app/soapbox/features/ui/components/modals/familiar-followers-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/familiar-followers-modal.tsx
@@ -11,8 +11,8 @@ import { makeGetAccount } from 'soapbox/selectors';
 const getAccount = makeGetAccount();
 
 interface IFamiliarFollowersModal {
-  accountId: string,
-  onClose: (string: string) => void,
+  accountId: string
+  onClose: (string: string) => void
 }
 
 const FamiliarFollowersModal = ({ accountId, onClose }: IFamiliarFollowersModal) => {
diff --git a/app/soapbox/features/ui/components/modals/favourites-modal.tsx b/app/soapbox/features/ui/components/modals/favourites-modal.tsx
index e8ec1db39..5dcd8edc8 100644
--- a/app/soapbox/features/ui/components/modals/favourites-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/favourites-modal.tsx
@@ -8,8 +8,8 @@ import AccountContainer from 'soapbox/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 interface IFavouritesModal {
-  onClose: (type: string) => void,
-  statusId: string,
+  onClose: (type: string) => void
+  statusId: string
 }
 
 const FavouritesModal: React.FC<IFavouritesModal> = ({ onClose, statusId }) => {
diff --git a/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx b/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
index 5e3836cdc..595254a98 100644
--- a/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
@@ -5,7 +5,7 @@ import { Modal } from 'soapbox/components/ui';
 import { useFeatures } from 'soapbox/hooks';
 
 interface IHotkeysModal {
-  onClose: () => void,
+  onClose: () => void
 }
 
 const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => (
diff --git a/app/soapbox/features/ui/components/modals/join-event-modal.tsx b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
index a8f0e7368..be72049dc 100644
--- a/app/soapbox/features/ui/components/modals/join-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/join-event-modal.tsx
@@ -13,7 +13,7 @@ const messages = defineMessages({
 });
 
 interface IAccountNoteModal {
-  statusId: string,
+  statusId: string
 }
 
 const AccountNoteModal: React.FC<IAccountNoteModal> = ({ statusId }) => {
diff --git a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
index 4ce2919cb..859d1bbc9 100644
--- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
@@ -14,7 +14,7 @@ const messages = defineMessages({
 });
 
 interface ILandingPageModal {
-  onClose: (type: string) => void,
+  onClose: (type: string) => void
 }
 
 /** Login and links to display from the hamburger menu of the homepage. */
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
index 0d47534c5..77cdf5c29 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/manage-group-modal.tsx
@@ -25,7 +25,7 @@ const manageGroupSteps = {
 };
 
 interface IManageGroupModal {
-  onClose: (type?: string) => void,
+  onClose: (type?: string) => void
 }
 
 const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index fb3c842f1..c40bcf3e1 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -16,8 +16,8 @@ import resizeImage from 'soapbox/utils/resize-image';
 import type { List as ImmutableList } from 'immutable';
 
 interface IMediaInput {
-  src: string | null,
-  accept: string,
+  src: string | null
+  accept: string
   onChange: React.ChangeEventHandler<HTMLInputElement>
   disabled: boolean
 }
diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index abac79ee9..530b1e6cc 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -23,11 +23,11 @@ const messages = defineMessages({
 });
 
 interface IMediaModal {
-  media: ImmutableList<Attachment>,
-  status?: Status,
-  index: number,
-  time?: number,
-  onClose: () => void,
+  media: ImmutableList<Attachment>
+  status?: Status
+  index: number
+  time?: number
+  onClose: () => void
 }
 
 const MediaModal: React.FC<IMediaModal> = (props) => {
diff --git a/app/soapbox/features/ui/components/modals/mentions-modal.tsx b/app/soapbox/features/ui/components/modals/mentions-modal.tsx
index d131687c2..c4bea9fb0 100644
--- a/app/soapbox/features/ui/components/modals/mentions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/mentions-modal.tsx
@@ -10,8 +10,8 @@ import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
 interface IMentionsModal {
-  onClose: (type: string) => void,
-  statusId: string,
+  onClose: (type: string) => void
+  statusId: string
 }
 
 const MentionsModal: React.FC<IMentionsModal> = ({ onClose, statusId }) => {
diff --git a/app/soapbox/features/ui/components/modals/missing-description-modal.tsx b/app/soapbox/features/ui/components/modals/missing-description-modal.tsx
index 8268ff3e8..7079c6351 100644
--- a/app/soapbox/features/ui/components/modals/missing-description-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/missing-description-modal.tsx
@@ -10,9 +10,9 @@ const messages = defineMessages({
 });
 
 interface IMissingDescriptionModal {
-  onClose: () => void,
-  onContinue: () => void,
-  intl: IntlShape,
+  onClose: () => void
+  onContinue: () => void
+  intl: IntlShape
 }
 
 const MissingDescriptionModal: React.FC<IMissingDescriptionModal> = ({ onClose, onContinue, intl }) => {
diff --git a/app/soapbox/features/ui/components/modals/policy-modal.tsx b/app/soapbox/features/ui/components/modals/policy-modal.tsx
index 7a1d263e5..97cdee5bb 100644
--- a/app/soapbox/features/ui/components/modals/policy-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/policy-modal.tsx
@@ -6,7 +6,7 @@ import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 import { usePendingPolicy, useAcceptPolicy } from 'soapbox/queries/policies';
 
 interface IPolicyModal {
-  onClose: (type: string) => void,
+  onClose: (type: string) => void
 }
 
 const DirectMessageUpdates = () => {
diff --git a/app/soapbox/features/ui/components/modals/reactions-modal.tsx b/app/soapbox/features/ui/components/modals/reactions-modal.tsx
index 56fd10e67..a31957745 100644
--- a/app/soapbox/features/ui/components/modals/reactions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/reactions-modal.tsx
@@ -18,9 +18,9 @@ const messages = defineMessages({
 });
 
 interface IReactionsModal {
-  onClose: (string: string) => void,
-  statusId: string,
-  reaction?: string,
+  onClose: (string: string) => void
+  statusId: string
+  reaction?: string
 }
 
 const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction: initialReaction }) => {
diff --git a/app/soapbox/features/ui/components/modals/reblogs-modal.tsx b/app/soapbox/features/ui/components/modals/reblogs-modal.tsx
index 6f5e7d70c..b54c9258e 100644
--- a/app/soapbox/features/ui/components/modals/reblogs-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/reblogs-modal.tsx
@@ -9,8 +9,8 @@ import AccountContainer from 'soapbox/containers/account-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 interface IReblogsModal {
-  onClose: (string: string) => void,
-  statusId: string,
+  onClose: (string: string) => void
+  statusId: string
 }
 
 const ReblogsModal: React.FC<IReblogsModal> = ({ onClose, statusId }) => {
diff --git a/app/soapbox/features/ui/components/modals/reply-mentions-modal.tsx b/app/soapbox/features/ui/components/modals/reply-mentions-modal.tsx
index eb85d4ecb..c09fe9918 100644
--- a/app/soapbox/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/reply-mentions-modal.tsx
@@ -11,8 +11,8 @@ import Account from '../../../reply-mentions/account';
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
 interface IReplyMentionsModal {
-  composeId: string,
-  onClose: (string: string) => void,
+  composeId: string
+  onClose: (string: string) => void
 }
 
 const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ composeId, onClose }) => {
diff --git a/app/soapbox/features/ui/components/modals/unauthorized-modal.tsx b/app/soapbox/features/ui/components/modals/unauthorized-modal.tsx
index 84c5b2f4b..24f4570f8 100644
--- a/app/soapbox/features/ui/components/modals/unauthorized-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/unauthorized-modal.tsx
@@ -15,13 +15,13 @@ const messages = defineMessages({
 
 interface IUnauthorizedModal {
   /** Unauthorized action type. */
-  action: 'FOLLOW' | 'REPLY' | 'REBLOG' | 'FAVOURITE' | 'POLL_VOTE' | 'JOIN',
+  action: 'FOLLOW' | 'REPLY' | 'REBLOG' | 'FAVOURITE' | 'POLL_VOTE' | 'JOIN'
   /** Close event handler. */
-  onClose: (modalType: string) => void,
+  onClose: (modalType: string) => void
   /** ActivityPub ID of the account OR status being acted upon. */
-  ap_id?: string,
+  ap_id?: string
   /** Account ID of the account being acted upon. */
-  account?: string,
+  account?: string
 }
 
 /** Modal to display when a logged-out user tries to do something that requires login. */
diff --git a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
index 2e8323b3b..1d245db0a 100644
--- a/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/verify-sms-modal.tsx
@@ -42,7 +42,7 @@ const messages = defineMessages({
 });
 
 interface IVerifySmsModal {
-  onClose: (type: string) => void,
+  onClose: (type: string) => void
 }
 
 enum Statuses {
diff --git a/app/soapbox/features/ui/components/modals/video-modal.tsx b/app/soapbox/features/ui/components/modals/video-modal.tsx
index baa94f17e..920a7bc9f 100644
--- a/app/soapbox/features/ui/components/modals/video-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/video-modal.tsx
@@ -7,11 +7,11 @@ import Video from 'soapbox/features/video';
 import type { Status, Account, Attachment } from 'soapbox/types/entities';
 
 interface IVideoModal {
-  media: Attachment,
-  status: Status,
-  account: Account,
-  time: number,
-  onClose: () => void,
+  media: Attachment
+  status: Status
+  account: Account
+  time: number
+  onClose: () => void
 }
 
 const VideoModal: React.FC<IVideoModal> = ({ status, account, media, time, onClose }) => {
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 66b35dd73..5cb5e2fb8 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -129,7 +129,7 @@ const Navbar = () => {
                       <IconButton
                         src={require('@tabler/icons/help.svg')}
                         className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
-                        iconClassName='w-5 h-5'
+                        iconClassName='h-5 w-5'
                       />
                     </Tooltip>
                   </Link>
diff --git a/app/soapbox/features/ui/components/pending-status.tsx b/app/soapbox/features/ui/components/pending-status.tsx
index 9651a2924..ba8e9e8d7 100644
--- a/app/soapbox/features/ui/components/pending-status.tsx
+++ b/app/soapbox/features/ui/components/pending-status.tsx
@@ -21,14 +21,14 @@ const shouldHaveCard = (pendingStatus: StatusEntity) => {
 };
 
 interface IPendingStatus {
-  className?: string,
-  idempotencyKey: string,
-  muted?: boolean,
-  thread?: boolean,
+  className?: string
+  idempotencyKey: string
+  muted?: boolean
+  thread?: boolean
 }
 
 interface IPendingStatusMedia {
-  status: StatusEntity,
+  status: StatusEntity
 }
 
 const PendingStatusMedia: React.FC<IPendingStatusMedia> = ({ status }) => {
diff --git a/app/soapbox/features/ui/components/pinned-accounts-panel.tsx b/app/soapbox/features/ui/components/pinned-accounts-panel.tsx
index 8139f342e..9b091d763 100644
--- a/app/soapbox/features/ui/components/pinned-accounts-panel.tsx
+++ b/app/soapbox/features/ui/components/pinned-accounts-panel.tsx
@@ -12,8 +12,8 @@ import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import type { Account } from 'soapbox/types/entities';
 
 interface IPinnedAccountsPanel {
-  account: Account,
-  limit: number,
+  account: Account
+  limit: number
 }
 
 const PinnedAccountsPanel: React.FC<IPinnedAccountsPanel> = ({ account, limit }) => {
diff --git a/app/soapbox/features/ui/components/poll-preview.tsx b/app/soapbox/features/ui/components/poll-preview.tsx
index af8bef06f..e52b339fb 100644
--- a/app/soapbox/features/ui/components/poll-preview.tsx
+++ b/app/soapbox/features/ui/components/poll-preview.tsx
@@ -7,7 +7,7 @@ import { useAppSelector } from 'soapbox/hooks';
 import { Poll as PollEntity } from 'soapbox/types/entities';
 
 interface IPollPreview {
-  pollId: string,
+  pollId: string
 }
 
 const PollPreview: React.FC<IPollPreview> = ({ pollId }) => {
diff --git a/app/soapbox/features/ui/components/profile-familiar-followers.tsx b/app/soapbox/features/ui/components/profile-familiar-followers.tsx
index d7bc1a10a..61beea123 100644
--- a/app/soapbox/features/ui/components/profile-familiar-followers.tsx
+++ b/app/soapbox/features/ui/components/profile-familiar-followers.tsx
@@ -16,7 +16,7 @@ import type { Account } from 'soapbox/types/entities';
 const getAccount = makeGetAccount();
 
 interface IProfileFamiliarFollowers {
-  account: Account,
+  account: Account
 }
 
 const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account }) => {
diff --git a/app/soapbox/features/ui/components/profile-field.tsx b/app/soapbox/features/ui/components/profile-field.tsx
index 38d6972d7..d27db0f05 100644
--- a/app/soapbox/features/ui/components/profile-field.tsx
+++ b/app/soapbox/features/ui/components/profile-field.tsx
@@ -26,7 +26,7 @@ const dateFormatOptions: FormatDateOptions = {
 };
 
 interface IProfileField {
-  field: Field,
+  field: Field
 }
 
 /** Renders a single profile field. */
diff --git a/app/soapbox/features/ui/components/profile-fields-panel.tsx b/app/soapbox/features/ui/components/profile-fields-panel.tsx
index 1babfb63f..24a419723 100644
--- a/app/soapbox/features/ui/components/profile-fields-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-fields-panel.tsx
@@ -8,7 +8,7 @@ import ProfileField from './profile-field';
 import type { Account } from 'soapbox/types/entities';
 
 interface IProfileFieldsPanel {
-  account: Account,
+  account: Account
 }
 
 /** Custom profile fields for sidebar. */
diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx
index 1fd6035bc..e4fc1d542 100644
--- a/app/soapbox/features/ui/components/profile-info-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-info-panel.tsx
@@ -35,9 +35,9 @@ const messages = defineMessages({
 });
 
 interface IProfileInfoPanel {
-  account: Account,
+  account: Account
   /** Username from URL params, in case the account isn't found. */
-  username: string,
+  username: string
 }
 
 /** User profile metadata, such as location, birthday, etc. */
diff --git a/app/soapbox/features/ui/components/profile-media-panel.tsx b/app/soapbox/features/ui/components/profile-media-panel.tsx
index 0dbfaf7f3..dd7fc9aa6 100644
--- a/app/soapbox/features/ui/components/profile-media-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-media-panel.tsx
@@ -13,7 +13,7 @@ import MediaItem from '../../account-gallery/components/media-item';
 import type { Account, Attachment } from 'soapbox/types/entities';
 
 interface IProfileMediaPanel {
-  account?: Account,
+  account?: Account
 }
 
 const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
diff --git a/app/soapbox/features/ui/components/profile-stats.tsx b/app/soapbox/features/ui/components/profile-stats.tsx
index 9fff5ffe3..d02542b2f 100644
--- a/app/soapbox/features/ui/components/profile-stats.tsx
+++ b/app/soapbox/features/ui/components/profile-stats.tsx
@@ -13,8 +13,8 @@ const messages = defineMessages({
 });
 
 interface IProfileStats {
-  account: Account | undefined,
-  onClickHandler?: React.MouseEventHandler,
+  account: Account | undefined
+  onClickHandler?: React.MouseEventHandler
 }
 
 /** Display follower and following counts for an account. */
diff --git a/app/soapbox/features/ui/components/subscription-button.tsx b/app/soapbox/features/ui/components/subscription-button.tsx
index 1da8b2c75..94c6d39ef 100644
--- a/app/soapbox/features/ui/components/subscription-button.tsx
+++ b/app/soapbox/features/ui/components/subscription-button.tsx
@@ -95,7 +95,7 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
         title={title}
         theme='outlined'
         className='px-2'
-        iconClassName='w-4 h-4'
+        iconClassName='h-4 w-4'
       />
     );
   }
diff --git a/app/soapbox/features/ui/components/theme-selector.tsx b/app/soapbox/features/ui/components/theme-selector.tsx
index eb365aa6c..6f35c9673 100644
--- a/app/soapbox/features/ui/components/theme-selector.tsx
+++ b/app/soapbox/features/ui/components/theme-selector.tsx
@@ -10,8 +10,8 @@ const messages = defineMessages({
 });
 
 interface IThemeSelector {
-  value: string,
-  onChange: (value: string) => void,
+  value: string
+  onChange: (value: string) => void
 }
 
 /** Pure theme selector. */
diff --git a/app/soapbox/features/ui/components/timeline.tsx b/app/soapbox/features/ui/components/timeline.tsx
index 523b7d79a..1c17812dc 100644
--- a/app/soapbox/features/ui/components/timeline.tsx
+++ b/app/soapbox/features/ui/components/timeline.tsx
@@ -15,9 +15,9 @@ const messages = defineMessages({
 
 interface ITimeline extends Omit<IStatusList, 'statusIds' | 'isLoading' | 'hasMore'> {
   /** ID of the timeline in Redux. */
-  timelineId: string,
+  timelineId: string
   /** Settings path to use instead of the timelineId. */
-  prefix?: string,
+  prefix?: string
 }
 
 /** Scrollable list of statuses from a timeline in the Redux store. */
diff --git a/app/soapbox/features/ui/components/upload-area.tsx b/app/soapbox/features/ui/components/upload-area.tsx
index ee49d2ed6..42f363749 100644
--- a/app/soapbox/features/ui/components/upload-area.tsx
+++ b/app/soapbox/features/ui/components/upload-area.tsx
@@ -9,9 +9,9 @@ import Motion from '../util/optional-motion';
 
 interface IUploadArea {
   /** Whether the upload area is active. */
-  active: boolean,
+  active: boolean
   /** Callback when the upload area is closed. */
-  onClose: () => void,
+  onClose: () => void
 }
 
 /** Component to display when a file is dragged over the UI. */
diff --git a/app/soapbox/features/ui/components/user-panel.tsx b/app/soapbox/features/ui/components/user-panel.tsx
index c73f6c053..68165ba24 100644
--- a/app/soapbox/features/ui/components/user-panel.tsx
+++ b/app/soapbox/features/ui/components/user-panel.tsx
@@ -14,10 +14,10 @@ import { displayFqn } from 'soapbox/utils/state';
 const getAccount = makeGetAccount();
 
 interface IUserPanel {
-  accountId: string,
-  action?: JSX.Element,
-  badges?: JSX.Element[],
-  domain?: string,
+  accountId: string
+  action?: JSX.Element
+  badges?: JSX.Element[]
+  domain?: string
 }
 
 const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain }) => {
diff --git a/app/soapbox/features/ui/components/zoomable-image.tsx b/app/soapbox/features/ui/components/zoomable-image.tsx
index 63a2b21cc..b2c680f68 100644
--- a/app/soapbox/features/ui/components/zoomable-image.tsx
+++ b/app/soapbox/features/ui/components/zoomable-image.tsx
@@ -16,9 +16,9 @@ const getDistance = (p1: React.Touch, p2: React.Touch): number =>
 const clamp = (min: number, max: number, value: number): number => Math.min(max, Math.max(min, value));
 
 interface IZoomableImage {
-  alt?: string,
-  src: string,
-  onClick?: React.MouseEventHandler,
+  alt?: string
+  src: string
+  onClick?: React.MouseEventHandler
 }
 
 class ZoomableImage extends React.PureComponent<IZoomableImage> {
diff --git a/app/soapbox/features/ui/util/react-router-helpers.tsx b/app/soapbox/features/ui/util/react-router-helpers.tsx
index bb911af18..994278e84 100644
--- a/app/soapbox/features/ui/util/react-router-helpers.tsx
+++ b/app/soapbox/features/ui/util/react-router-helpers.tsx
@@ -11,21 +11,21 @@ import ColumnsArea from '../components/columns-area';
 import BundleContainer from '../containers/bundle-container';
 
 type PageProps = {
-  params?: MatchType['params'],
-  layout?: any,
-  children: React.ReactNode,
+  params?: MatchType['params']
+  layout?: any
+  children: React.ReactNode
 };
 
 interface IWrappedRoute extends RouteProps {
-  component: (...args: any[]) => any,
-  page?: React.ComponentType<PageProps>,
-  content?: React.ReactNode,
-  componentParams?: Record<string, any>,
-  layout?: any,
-  publicRoute?: boolean,
-  staffOnly?: boolean,
-  adminOnly?: boolean,
-  developerOnly?: boolean,
+  component: (...args: any[]) => any
+  page?: React.ComponentType<PageProps>
+  content?: React.ReactNode
+  componentParams?: Record<string, any>
+  layout?: any
+  publicRoute?: boolean
+  staffOnly?: boolean
+  adminOnly?: boolean
+  developerOnly?: boolean
 }
 
 const WrappedRoute: React.FC<IWrappedRoute> = ({
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index b2d90345d..a7c15d686 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -25,7 +25,7 @@ const Statuses = {
 const EMAIL_REGEX = /^[^@\s]+@[^@\s]+$/;
 
 interface IEmailSent {
-  handleSubmit: React.FormEventHandler,
+  handleSubmit: React.FormEventHandler
 }
 
 const EmailSent: React.FC<IEmailSent> = ({ handleSubmit }) => {
diff --git a/app/soapbox/features/video/index.tsx b/app/soapbox/features/video/index.tsx
index 1768a6a24..9c533e10f 100644
--- a/app/soapbox/features/video/index.tsx
+++ b/app/soapbox/features/video/index.tsx
@@ -99,21 +99,21 @@ export const fileNameFromURL = (str: string) => {
 };
 
 interface IVideo {
-  preview?: string,
-  src: string,
-  alt?: string,
-  width?: number,
-  height?: number,
-  startTime?: number,
-  detailed?: boolean,
-  autoFocus?: boolean,
-  inline?: boolean,
-  cacheWidth?: (width: number) => void,
-  visible?: boolean,
-  blurhash?: string,
-  link?: React.ReactNode,
-  aspectRatio?: number,
-  displayMedia?: string,
+  preview?: string
+  src: string
+  alt?: string
+  width?: number
+  height?: number
+  startTime?: number
+  detailed?: boolean
+  autoFocus?: boolean
+  inline?: boolean
+  cacheWidth?: (width: number) => void
+  visible?: boolean
+  blurhash?: string
+  link?: React.ReactNode
+  aspectRatio?: number
+  displayMedia?: string
 }
 
 const Video: React.FC<IVideo> = ({
diff --git a/app/soapbox/pages/event-page.tsx b/app/soapbox/pages/event-page.tsx
index 4e4165ff5..bddc5a8d1 100644
--- a/app/soapbox/pages/event-page.tsx
+++ b/app/soapbox/pages/event-page.tsx
@@ -19,9 +19,9 @@ const getStatus = makeGetStatus();
 
 interface IEventPage {
   params?: {
-    statusId?: string,
-  },
-  children: React.ReactNode,
+    statusId?: string
+  }
+  children: React.ReactNode
 }
 
 const EventPage: React.FC<IEventPage> = ({ params, children }) => {
diff --git a/app/soapbox/pages/profile-page.tsx b/app/soapbox/pages/profile-page.tsx
index aa9355f0a..f5426a02c 100644
--- a/app/soapbox/pages/profile-page.tsx
+++ b/app/soapbox/pages/profile-page.tsx
@@ -21,9 +21,9 @@ import { getAcct, isLocal } from 'soapbox/utils/accounts';
 
 interface IProfilePage {
   params?: {
-    username?: string,
-  },
-  children: React.ReactNode,
+    username?: string
+  }
+  children: React.ReactNode
 }
 
 const getAccount = makeGetAccount();
diff --git a/app/soapbox/pages/remote-instance-page.tsx b/app/soapbox/pages/remote-instance-page.tsx
index da8c87b6f..d6d305834 100644
--- a/app/soapbox/pages/remote-instance-page.tsx
+++ b/app/soapbox/pages/remote-instance-page.tsx
@@ -14,9 +14,9 @@ import { Layout } from '../components/ui';
 
 interface IRemoteInstancePage {
   params?: {
-    instance?: string,
-  },
-  children: React.ReactNode,
+    instance?: string
+  }
+  children: React.ReactNode
 }
 
 /** Page for viewing a remote instance timeline. */
diff --git a/app/soapbox/pages/status-page.tsx b/app/soapbox/pages/status-page.tsx
index feb9de202..bd32b6d7f 100644
--- a/app/soapbox/pages/status-page.tsx
+++ b/app/soapbox/pages/status-page.tsx
@@ -13,7 +13,7 @@ import { Layout } from '../components/ui';
 import BundleContainer from '../features/ui/containers/bundle-container';
 
 interface IStatusPage {
-  children: React.ReactNode,
+  children: React.ReactNode
 }
 
 const StatusPage: React.FC<IStatusPage> = ({ children }) => {
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index bac32e2c4..7840c3dbf 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -44,7 +44,7 @@ export interface IChat {
     unread: boolean
   }
   latest_read_message_by_account?: {
-    id: string,
+    id: string
     date: string
   }[]
   latest_read_message_created_at: null | string
diff --git a/app/soapbox/queries/embed.ts b/app/soapbox/queries/embed.ts
index e32403f88..1c764228f 100644
--- a/app/soapbox/queries/embed.ts
+++ b/app/soapbox/queries/embed.ts
@@ -3,16 +3,16 @@ import { useQuery } from '@tanstack/react-query';
 import { useApi } from 'soapbox/hooks';
 
 type Embed = {
-  type: string,
-  version: string,
-  author_name: string,
-  author_url: string,
-  provider_name: string,
-  provider_url: string,
-  cache_age: number,
-  html: string,
-  width: number,
-  height: number,
+  type: string
+  version: string
+  author_name: string
+  author_url: string
+  provider_name: string
+  provider_url: string
+  cache_age: number
+  html: string
+  width: number
+  height: number
 }
 
 /** Fetch OEmbed information for a status by its URL. */
diff --git a/app/soapbox/reducers/accounts.ts b/app/soapbox/reducers/accounts.ts
index 47bf144b0..39176e731 100644
--- a/app/soapbox/reducers/accounts.ts
+++ b/app/soapbox/reducers/accounts.ts
@@ -46,7 +46,7 @@ type AccountMap = ImmutableMap<string, any>;
 type APIEntities = Array<APIEntity>;
 
 export interface ReducerAccount extends AccountRecord {
-  moved: string | null,
+  moved: string | null
 }
 
 type State = ImmutableMap<any, ReducerAccount>;
diff --git a/app/soapbox/reducers/admin.ts b/app/soapbox/reducers/admin.ts
index 0b1e5438f..7228a115e 100644
--- a/app/soapbox/reducers/admin.ts
+++ b/app/soapbox/reducers/admin.ts
@@ -43,15 +43,15 @@ type AdminAccountRecord = ReturnType<typeof normalizeAdminAccount>;
 type AdminReportRecord = ReturnType<typeof normalizeAdminReport>;
 
 export interface ReducerAdminAccount extends AdminAccountRecord {
-  account: string | null,
+  account: string | null
 }
 
 export interface ReducerAdminReport extends AdminReportRecord {
-  account: string | null,
-  target_account: string | null,
-  action_taken_by_account: string | null,
-  assigned_account: string | null,
-  statuses: ImmutableList<string | null>,
+  account: string | null
+  target_account: string | null
+  action_taken_by_account: string | null
+  assigned_account: string | null
+  statuses: ImmutableList<string | null>
 }
 
 // Lol https://javascript.plainenglish.io/typescript-essentials-conditionally-filter-types-488705bfbf56
diff --git a/app/soapbox/reducers/chats.ts b/app/soapbox/reducers/chats.ts
index 13ac905c3..33c5b995b 100644
--- a/app/soapbox/reducers/chats.ts
+++ b/app/soapbox/reducers/chats.ts
@@ -20,8 +20,8 @@ type ChatRecord = ReturnType<typeof normalizeChat>;
 type APIEntities = Array<APIEntity>;
 
 export interface ReducerChat extends ChatRecord {
-  account: string | null,
-  last_message: string | null,
+  account: string | null
+  last_message: string | null
 }
 
 const ReducerRecord = ImmutableRecord({
diff --git a/app/soapbox/reducers/contexts.ts b/app/soapbox/reducers/contexts.ts
index 73cbd825e..ee55586a4 100644
--- a/app/soapbox/reducers/contexts.ts
+++ b/app/soapbox/reducers/contexts.ts
@@ -29,8 +29,8 @@ type State = ReturnType<typeof ReducerRecord>;
 
 /** Minimal status fields needed to process context. */
 type ContextStatus = {
-  id: string,
-  in_reply_to_id: string | null,
+  id: string
+  in_reply_to_id: string | null
 }
 
 /** Import a single status into the reducer, setting replies and replyTos. */
diff --git a/app/soapbox/reducers/onboarding.ts b/app/soapbox/reducers/onboarding.ts
index fbf1660e5..c5ad34abb 100644
--- a/app/soapbox/reducers/onboarding.ts
+++ b/app/soapbox/reducers/onboarding.ts
@@ -3,7 +3,7 @@ import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding';
 import type { OnboardingActions } from 'soapbox/actions/onboarding';
 
 type OnboardingState = {
-  needsOnboarding: boolean,
+  needsOnboarding: boolean
 }
 
 const initialState: OnboardingState = {
diff --git a/app/soapbox/reducers/rules.ts b/app/soapbox/reducers/rules.ts
index c15a9bdb0..a0a89724f 100644
--- a/app/soapbox/reducers/rules.ts
+++ b/app/soapbox/reducers/rules.ts
@@ -10,7 +10,7 @@ export type Rule = {
 }
 
 type RulesState = {
-  items: Rule[],
+  items: Rule[]
   isLoading: boolean
 }
 
diff --git a/app/soapbox/reducers/sidebar.ts b/app/soapbox/reducers/sidebar.ts
index 6ec3824f5..a0ae2e51d 100644
--- a/app/soapbox/reducers/sidebar.ts
+++ b/app/soapbox/reducers/sidebar.ts
@@ -3,7 +3,7 @@ import { SIDEBAR_OPEN, SIDEBAR_CLOSE } from '../actions/sidebar';
 import type { AnyAction } from 'redux';
 
 type State = {
-  sidebarOpen: boolean,
+  sidebarOpen: boolean
 };
 
 const initialState: State = {
diff --git a/app/soapbox/reducers/statuses.ts b/app/soapbox/reducers/statuses.ts
index 546bcd688..ed7ee1c2b 100644
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@@ -52,11 +52,11 @@ type APIEntities = Array<APIEntity>;
 type State = ImmutableMap<string, ReducerStatus>;
 
 export interface ReducerStatus extends StatusRecord {
-  account: string | null,
-  reblog: string | null,
-  poll: string | null,
-  quote: string | null,
-  group: string | null,
+  account: string | null
+  reblog: string | null
+  poll: string | null
+  quote: string | null
+  group: string | null
 }
 
 const minifyStatus = (status: StatusRecord): ReducerStatus => {
@@ -204,9 +204,9 @@ const simulateFavourite = (
 };
 
 interface Translation {
-  content: string,
-  detected_source_language: string,
-  provider: string,
+  content: string
+  detected_source_language: string
+  provider: string
 }
 
 /** Import translation from translation service into the store. */
diff --git a/app/soapbox/service-worker/web-push-notifications.ts b/app/soapbox/service-worker/web-push-notifications.ts
index 8088ca902..46ba7aa38 100644
--- a/app/soapbox/service-worker/web-push-notifications.ts
+++ b/app/soapbox/service-worker/web-push-notifications.ts
@@ -21,42 +21,42 @@ declare const self: ServiceWorkerGlobalScope;
 
 /** Soapbox notification data from push event. */
 interface NotificationData {
-  access_token?: string,
-  count?: number,
-  hiddenBody?: string,
-  hiddenImage?: string,
-  id?: string,
-  preferred_locale: string,
-  url: string,
+  access_token?: string
+  count?: number
+  hiddenBody?: string
+  hiddenImage?: string
+  id?: string
+  preferred_locale: string
+  url: string
 }
 
 /** ServiceWorker Notification options with extra fields. */
 interface ExtendedNotificationOptions extends NotificationOptions {
-  data: NotificationData,
-  title: string,
+  data: NotificationData
+  title: string
 }
 
 /** Partial clone of ServiceWorker Notification with mutability. */
 interface ClonedNotification {
-  actions?: NotificationAction[],
-  body?: string,
-  data: NotificationData,
-  image?: string,
-  tag?: string,
-  title: string,
+  actions?: NotificationAction[]
+  body?: string
+  data: NotificationData
+  image?: string
+  tag?: string
+  title: string
 }
 
 /** Status entitiy from the API (kind of). */
 // HACK
 interface APIStatus extends Omit<StatusEntity, 'media_attachments'> {
-  media_attachments: { preview_url: string }[],
+  media_attachments: { preview_url: string }[]
 }
 
 /** Notification entity from the API (kind of). */
 // HACK
 interface APINotification extends Omit<NotificationEntity, 'account' | 'status'> {
-  account: AccountEntity,
-  status?: APIStatus,
+  account: AccountEntity
+  status?: APIStatus
 }
 
 /** Show the actual push notification on the device. */
diff --git a/app/soapbox/storage/kv-store.ts b/app/soapbox/storage/kv-store.ts
index 941144050..17260c754 100644
--- a/app/soapbox/storage/kv-store.ts
+++ b/app/soapbox/storage/kv-store.ts
@@ -1,7 +1,7 @@
 import localforage from 'localforage';
 
 interface IKVStore extends LocalForage {
-  getItemOrError: (key: string) => Promise<any>,
+  getItemOrError: (key: string) => Promise<any>
 }
 
 // localForage
diff --git a/app/soapbox/stream.ts b/app/soapbox/stream.ts
index 8b09a86ad..1a09a80e4 100644
--- a/app/soapbox/stream.ts
+++ b/app/soapbox/stream.ts
@@ -92,10 +92,10 @@ export default function getStream(
   accessToken: string,
   stream: string,
   { connected, received, disconnected, reconnected }: {
-    connected: ((this: WebSocket, ev: Event) => any) | null,
-    received: (data: any) => void,
-    disconnected: ((this: WebSocket, ev: Event) => any) | null,
-    reconnected: ((this: WebSocket, ev: Event) => any),
+    connected: ((this: WebSocket, ev: Event) => any) | null
+    received: (data: any) => void
+    disconnected: ((this: WebSocket, ev: Event) => any) | null
+    reconnected: ((this: WebSocket, ev: Event) => any)
   },
 ) {
   const params = [ `stream=${stream}` ];
diff --git a/app/soapbox/types/colors.ts b/app/soapbox/types/colors.ts
index 75d9a3eb6..7ffd0cee1 100644
--- a/app/soapbox/types/colors.ts
+++ b/app/soapbox/types/colors.ts
@@ -2,9 +2,9 @@ export type Rgb = { r: number, g: number, b: number };
 export type Hsl = { h: number, s: number, l: number };
 
 export type TailwindColorObject = {
-  [key: number]: string;
+  [key: number]: string
 };
 
 export type TailwindColorPalette = {
-  [key: string]: TailwindColorObject | string,
+  [key: string]: TailwindColorObject | string
 }
diff --git a/app/soapbox/types/entities.ts b/app/soapbox/types/entities.ts
index 10df96188..ed43df407 100644
--- a/app/soapbox/types/entities.ts
+++ b/app/soapbox/types/entities.ts
@@ -61,13 +61,13 @@ type Tag = ReturnType<typeof TagRecord>;
 interface Account extends ReturnType<typeof AccountRecord> {
   // HACK: we can't do a circular reference in the Record definition itself,
   // so do it here.
-  moved: EmbeddedEntity<Account>;
+  moved: EmbeddedEntity<Account>
 }
 
 interface Status extends ReturnType<typeof StatusRecord> {
   // HACK: same as above
-  quote: EmbeddedEntity<Status>;
-  reblog: EmbeddedEntity<Status>;
+  quote: EmbeddedEntity<Status>
+  reblog: EmbeddedEntity<Status>
 }
 
 // Utility types
diff --git a/app/soapbox/utils/__tests__/queries.test.ts b/app/soapbox/utils/__tests__/queries.test.ts
index 6fe75dfbf..8c416e979 100644
--- a/app/soapbox/utils/__tests__/queries.test.ts
+++ b/app/soapbox/utils/__tests__/queries.test.ts
@@ -5,7 +5,7 @@ import { queryClient } from 'soapbox/queries/client';
 import { PaginatedResult, sortQueryData, updatePageItem } from '../queries';
 
 interface Item {
-  id: number,
+  id: number
   text: string
 }
 
diff --git a/app/soapbox/utils/badges.ts b/app/soapbox/utils/badges.ts
index 139537f6f..dbc6b997b 100644
--- a/app/soapbox/utils/badges.ts
+++ b/app/soapbox/utils/badges.ts
@@ -11,9 +11,9 @@ const badgeToTag = (badge: string) => badge.replace(/^badge:/, '');
 /** Difference between an old and new set of tags. */
 interface TagDiff {
   /** New tags that were added. */
-  added: string[],
+  added: string[]
   /** Old tags that were removed. */
-  removed: string[],
+  removed: string[]
 }
 
 /** Returns the differences between two sets of tags. */
diff --git a/app/soapbox/utils/chats.ts b/app/soapbox/utils/chats.ts
index 737103316..581b4fe30 100644
--- a/app/soapbox/utils/chats.ts
+++ b/app/soapbox/utils/chats.ts
@@ -10,7 +10,7 @@ import { compareDate } from './comparators';
 import { appendPageItem, flattenPages, PaginatedResult, sortQueryData, updatePageItem } from './queries';
 
 interface ChatPayload extends Omit<Chat, 'last_message'> {
-  last_message: ChatMessage | null,
+  last_message: ChatMessage | null
 }
 
 /**
diff --git a/app/soapbox/utils/colors.ts b/app/soapbox/utils/colors.ts
index 277e73481..0394175d9 100644
--- a/app/soapbox/utils/colors.ts
+++ b/app/soapbox/utils/colors.ts
@@ -98,7 +98,7 @@ export default function(baseColor: string): TailwindColorObject {
   };
 
   const intensityMap: {
-    [key: number]: number;
+    [key: number]: number
   } = {
     50: 0.95,
     100: 0.9,
diff --git a/app/soapbox/utils/favicon-service.ts b/app/soapbox/utils/favicon-service.ts
index ac8a1341b..4d08db832 100644
--- a/app/soapbox/utils/favicon-service.ts
+++ b/app/soapbox/utils/favicon-service.ts
@@ -2,10 +2,10 @@
 // https://git.pleroma.social/pleroma/pleroma-fe/-/blob/ef5bbc4e5f84bb9e8da76a0440eea5d656d36977/src/services/favicon_service/favicon_service.js
 
 type Favicon = {
-  favcanvas: HTMLCanvasElement,
-  favimg: HTMLImageElement,
-  favcontext: CanvasRenderingContext2D | null,
-  favicon: HTMLLinkElement,
+  favcanvas: HTMLCanvasElement
+  favimg: HTMLImageElement
+  favcontext: CanvasRenderingContext2D | null
+  favicon: HTMLLinkElement
 };
 
 /** Service to draw and update a notifications dot on the favicon */
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 69ae78fcd..3b1c14b77 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -862,13 +862,13 @@ export const getFeatures = createSelector([
 /** Fediverse backend */
 interface Backend {
   /** Build name, if this software is a fork */
-  build: string | null,
+  build: string | null
   /** Name of the software */
-  software: string | null,
+  software: string | null
   /** API version number */
-  version: string,
+  version: string
   /** Mastodon API version this backend is compatible with */
-  compatVersion: string,
+  compatVersion: string
 }
 
 /** Get information about the software from its version string */
diff --git a/app/soapbox/utils/queries.ts b/app/soapbox/utils/queries.ts
index 263d2407b..31bf6392d 100644
--- a/app/soapbox/utils/queries.ts
+++ b/app/soapbox/utils/queries.ts
@@ -3,13 +3,13 @@ import { queryClient } from 'soapbox/queries/client';
 import type { InfiniteData, QueryKey } from '@tanstack/react-query';
 
 export interface PaginatedResult<T> {
-  result: T[],
-  hasMore: boolean,
-  link?: string,
+  result: T[]
+  hasMore: boolean
+  link?: string
 }
 
 interface Entity {
-  id: string,
+  id: string
 }
 
 const isEntity = <T = unknown>(object: T): object is T & Entity => {
diff --git a/app/soapbox/utils/resize-image.ts b/app/soapbox/utils/resize-image.ts
index 42314b6d1..3fef38263 100644
--- a/app/soapbox/utils/resize-image.ts
+++ b/app/soapbox/utils/resize-image.ts
@@ -2,8 +2,8 @@
 const DEFAULT_MAX_PIXELS = 1920 * 1080;
 
 interface BrowserCanvasQuirks {
-  'image-orientation-automatic'?: boolean,
-  'canvas-read-unreliable'?: boolean,
+  'image-orientation-automatic'?: boolean
+  'canvas-read-unreliable'?: boolean
 }
 
 const _browser_quirks: BrowserCanvasQuirks = {};
@@ -146,11 +146,11 @@ const processImage = (
     type = 'image/png',
     name = 'resized.png',
   } : {
-    width: number,
-    height: number,
-    orientation: number,
-    type?: string,
-    name?: string,
+    width: number
+    height: number
+    orientation: number
+    type?: string
+    name?: string
   },
 ) => new Promise<File>((resolve, reject) => {
   const canvas  = document.createElement('canvas');
diff --git a/app/soapbox/utils/sounds.ts b/app/soapbox/utils/sounds.ts
index 767949c4a..ad4c58250 100644
--- a/app/soapbox/utils/sounds.ts
+++ b/app/soapbox/utils/sounds.ts
@@ -1,7 +1,7 @@
 /** Soapbox audio clip. */
 type Sound = {
-  src: string,
-  type: string,
+  src: string
+  type: string
 }
 
 export type Sounds = 'boop' | 'chat'
diff --git a/app/soapbox/utils/status.ts b/app/soapbox/utils/status.ts
index 98560be9c..74c43e071 100644
--- a/app/soapbox/utils/status.ts
+++ b/app/soapbox/utils/status.ts
@@ -68,9 +68,9 @@ export const textForScreenReader = (intl: IntlShape, status: StatusEntity, reblo
 /** Get reblogged status if any, otherwise return the original status. */
 // @ts-ignore The type seems right, but TS doesn't like it.
 export const getActualStatus: {
-  (status: StatusEntity): StatusEntity,
-  (status: undefined): undefined,
-  (status: null): null,
+  (status: StatusEntity): StatusEntity
+  (status: undefined): undefined
+  (status: null): null
 } = (status) => {
   if (status?.reblog && typeof status?.reblog === 'object') {
     return status.reblog as StatusEntity;
diff --git a/scripts/translationRunner.ts b/scripts/translationRunner.ts
index 3a955735b..89c179e2e 100644
--- a/scripts/translationRunner.ts
+++ b/scripts/translationRunner.ts
@@ -8,8 +8,8 @@ import yargs from 'yargs';
 type Validator = (language: string) => void;
 
 interface LanguageResult {
-  language: string,
-  error: any,
+  language: string
+  error: any
 }
 
 const RFC5646_REGEXP = /^[a-z]{2,3}(?:-(?:x|[A-Za-z]{2,4}))*$/;
@@ -164,8 +164,8 @@ const extractedMessages = extractedMessagesFiles.reduce((acc, messageFile) => {
 }, [] as ExtractedDescriptor[]);
 
 interface Translation {
-  language: string,
-  data: Record<string, string>,
+  language: string
+  data: Record<string, string>
 }
 
 const translations: Translation[] = languages.map((language: string) => {
@@ -188,10 +188,10 @@ function pushIfUnique<T>(arr: T[], newItem: T): void {
 }
 
 interface Problem {
-  language: string,
-  id: ExtractedDescriptor['id'],
-  severity: 'error' | 'warning',
-  type: string,
+  language: string
+  id: ExtractedDescriptor['id']
+  severity: 'error' | 'warning'
+  type: string
 }
 
 const problems: Problem[] = translations.reduce((acc, translation) => {
diff --git a/stories/Header.tsx b/stories/Header.tsx
index a9007d99f..acd4bb746 100644
--- a/stories/Header.tsx
+++ b/stories/Header.tsx
@@ -5,14 +5,14 @@ import Button from '../app/soapbox/components/ui/button/button';
 import './header.css';
 
 type User = {
-  name: string;
+  name: string
 };
 
 interface HeaderProps {
-  user?: User;
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
+  user?: User
+  onLogin: () => void
+  onLogout: () => void
+  onCreateAccount: () => void
 }
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
diff --git a/stories/Page.tsx b/stories/Page.tsx
index b2bee0660..b85106ccc 100644
--- a/stories/Page.tsx
+++ b/stories/Page.tsx
@@ -4,7 +4,7 @@ import { Header } from './Header';
 import './page.css';
 
 type User = {
-  name: string;
+  name: string
 };
 
 export const Page: React.FC = () => {
diff --git a/types/react-intl-translations-manager/index.d.ts b/types/react-intl-translations-manager/index.d.ts
index 92d901d7c..ad8a85bdc 100644
--- a/types/react-intl-translations-manager/index.d.ts
+++ b/types/react-intl-translations-manager/index.d.ts
@@ -2,14 +2,14 @@ declare module 'react-intl-translations-manager' {
   import type { MessageDescriptor } from 'react-intl';
 
   export interface ExtractedDescriptor extends Omit<MessageDescriptor, 'defaultMessage'> {
-    variables: Set<any>,
-    descriptors?: ExtractedDescriptor[],
-    defaultMessage: string,
+    variables: Set<any>
+    descriptors?: ExtractedDescriptor[]
+    defaultMessage: string
   }
 
   export interface ExtractedMessage {
-    path: string,
-    descriptors: ExtractedDescriptor[],
+    path: string
+    descriptors: ExtractedDescriptor[]
   }
 
   export interface ManageTranslationsConfig {
@@ -18,13 +18,13 @@ declare module 'react-intl-translations-manager' {
      *
      * example: `src/locales/extractedMessages`
      */
-    messagesDirectory: string,
+    messagesDirectory: string
     /**
      * Directory of the translation files the translation manager needs to maintain.
      *
      * example: `src/locales/lang`
      */
-    translationsDirectory: string,
+    translationsDirectory: string
     /**
      * Directory of the whitelist files the translation manager needs to maintain. These files contain the key of translations that have the exact same text in a specific language as the defaultMessage. Specifying this key will suppress `unmaintained translation` warnings.
      *
@@ -32,7 +32,7 @@ declare module 'react-intl-translations-manager' {
      *
      * (optional, default: `translationsDirectory`)
      */
-    whitelistsDirectory?: string,
+    whitelistsDirectory?: string
     /**
      * What languages the translation manager needs to maintain. Specifying no languages actually doesn't make sense, but won't break the translationManager either. (Please do not include the default language, react-intl will automatically include it.)
      *
@@ -40,7 +40,7 @@ declare module 'react-intl-translations-manager' {
      *
      * (optional, default: `[]`)
      */
-    languages?: string[],
+    languages?: string[]
     /**
      * Option to output a single JSON file containing the aggregate of all extracted messages, grouped by the file they were extracted from.
      *
@@ -63,21 +63,21 @@ declare module 'react-intl-translations-manager' {
      *
      * (optional, default: `false`)
      */
-    singleMessagesFile?: boolean,
+    singleMessagesFile?: boolean
     /**
      * If you want the translationManager to log duplicate message ids or not
      *
      * (optional, default: `true`)
      */
-    detectDuplicateIds?: boolean,
+    detectDuplicateIds?: boolean
     /**
      * If you want the translationManager to sort it's output, both json and console output
      *
      * (optional, default: `true`)
      */
-    sortKeys?: boolean,
+    sortKeys?: boolean
     /** (optional, default: `{ space: 2, trailingNewline: false }`)) */
-    jsonOptions?: any,
+    jsonOptions?: any
     /**
      * Here you can specify custom logging methods. If not specified a default printer is used.
      *
@@ -104,7 +104,7 @@ declare module 'react-intl-translations-manager' {
      *
      * (optional, default: `{}`)
      */
-    overridePrinters?: any,
+    overridePrinters?: any
     /**
      * Here you can specify overrides for the core hooks. If not specified, the default methods will be used.
      *
@@ -124,7 +124,7 @@ declare module 'react-intl-translations-manager' {
      * };
      * ```
      */
-    overrideCoreMethods?: any,
+    overrideCoreMethods?: any
   }
 
   /** This will maintain all translation files. Based on your config you will get output for duplicate ids, and per specified language you will get the deleted translations, added messages (new messages that need to be translated), and not yet translated messages. It will also maintain a whitelist file per language where you can specify translation keys where the translation is identical to the default message. This way you can avoid untranslated message warnings for these messages. */