eslint: use semicolon TypeScript delimeter

.eslintrc.cjs

@@ -258,17 +258,7 @@ module.exports = {
         alphabetize: { order: 'asc' },
       },
     ],
-    '@typescript-eslint/member-delimiter-style': [
-      'error',
-      {
-        multiline: {
-          delimiter: 'none',
-        },
-        singleline: {
-          delimiter: 'comma',
-        },
-      },
-    ],
+    '@typescript-eslint/member-delimiter-style': 'error',
 
     'promise/catch-or-return': 'error',
 

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) => {

src/actions/admin.ts

@@ -201,7 +201,7 @@ const fetchReports = (params: Record<string, any> = {}) =>
     }
   };
 
-const patchMastodonReports = (reports: { id: string, state: string }[]) =>
+const patchMastodonReports = (reports: { id: string; state: string }[]) =>
   (dispatch: AppDispatch, getState: () => RootState) =>
     Promise.all(reports.map(({ id, state }) => api(getState)
       .post(`/api/v1/admin/reports/${id}/${state === 'resolved' ? 'reopen' : 'resolve'}`)
@@ -212,7 +212,7 @@ const patchMastodonReports = (reports: { id: string, state: string }[]) =>
       }),
     ));
 
-const patchPleromaReports = (reports: { id: string, state: string }[]) =>
+const patchPleromaReports = (reports: { id: string; state: string }[]) =>
   (dispatch: AppDispatch, getState: () => RootState) =>
     api(getState)
       .patch('/api/v1/pleroma/admin/reports', { reports })

src/actions/compose.ts

@@ -101,15 +101,15 @@ const messages = defineMessages({
 });
 
 interface ComposeSetStatusAction {
-  type: typeof COMPOSE_SET_STATUS
-  id: string
-  status: Status
-  rawText: string
-  explicitAddressing: boolean
-  spoilerText?: string
-  contentType?: string | false
-  v: ReturnType<typeof parseVersion>
-  withRedraft?: boolean
+  type: typeof COMPOSE_SET_STATUS;
+  id: string;
+  status: Status;
+  rawText: string;
+  explicitAddressing: boolean;
+  spoilerText?: string;
+  contentType?: string | false;
+  v: ReturnType<typeof parseVersion>;
+  withRedraft?: boolean;
 }
 
 const setComposeToStatus = (status: Status, rawText: string, spoilerText?: string, contentType?: string | false, withRedraft?: boolean) =>
@@ -139,12 +139,12 @@ const changeCompose = (composeId: string, text: string) => ({
 });
 
 interface ComposeReplyAction {
-  type: typeof COMPOSE_REPLY
-  id: string
-  status: Status
-  account: Account
-  explicitAddressing: boolean
-  preserveSpoilers: boolean
+  type: typeof COMPOSE_REPLY;
+  id: string;
+  status: Status;
+  account: Account;
+  explicitAddressing: boolean;
+  preserveSpoilers: boolean;
 }
 
 const replyCompose = (status: Status) =>
@@ -176,11 +176,11 @@ const cancelReplyCompose = () => ({
 });
 
 interface ComposeQuoteAction {
-  type: typeof COMPOSE_QUOTE
-  id: string
-  status: Status
-  account: Account | undefined
-  explicitAddressing: boolean
+  type: typeof COMPOSE_QUOTE;
+  id: string;
+  status: Status;
+  account: Account | undefined;
+  explicitAddressing: boolean;
 }
 
 const quoteCompose = (status: Status) =>
@@ -220,9 +220,9 @@ const resetCompose = (composeId = 'compose-modal') => ({
 });
 
 interface ComposeMentionAction {
-  type: typeof COMPOSE_MENTION
-  id: string
-  account: Account
+  type: typeof COMPOSE_MENTION;
+  id: string;
+  account: Account;
 }
 
 const mentionCompose = (account: Account) =>
@@ -238,9 +238,9 @@ const mentionCompose = (account: Account) =>
   };
 
 interface ComposeDirectAction {
-  type: typeof COMPOSE_DIRECT
-  id: string
-  account: Account
+  type: typeof COMPOSE_DIRECT;
+  id: string;
+  account: Account;
 }
 
 const directCompose = (account: Account) =>
@@ -593,11 +593,11 @@ const fetchComposeSuggestions = (composeId: string, token: string) =>
   };
 
 interface ComposeSuggestionsReadyAction {
-  type: typeof COMPOSE_SUGGESTIONS_READY
-  id: string
-  token: string
-  emojis?: Emoji[]
-  accounts?: APIEntity[]
+  type: typeof COMPOSE_SUGGESTIONS_READY;
+  id: string;
+  token: string;
+  emojis?: Emoji[];
+  accounts?: APIEntity[];
 }
 
 const readyComposeSuggestionsEmojis = (composeId: string, token: string, emojis: Emoji[]) => ({
@@ -615,12 +615,12 @@ const readyComposeSuggestionsAccounts = (composeId: string, token: string, accou
 });
 
 interface ComposeSuggestionSelectAction {
-  type: typeof COMPOSE_SUGGESTION_SELECT
-  id: string
-  position: number
-  token: string | null
-  completion: string
-  path: Array<string | number>
+  type: typeof COMPOSE_SUGGESTION_SELECT;
+  id: string;
+  position: number;
+  token: string | null;
+  completion: string;
+  path: Array<string | number>;
 }
 
 const selectComposeSuggestion = (composeId: string, position: number, token: string | null, suggestion: AutoSuggestion, path: Array<string | number>) =>
@@ -774,9 +774,9 @@ const openComposeWithText = (composeId: string, text = '') =>
   };
 
 interface ComposeAddToMentionsAction {
-  type: typeof COMPOSE_ADD_TO_MENTIONS
-  id: string
-  account: string
+  type: typeof COMPOSE_ADD_TO_MENTIONS;
+  id: string;
+  account: string;
 }
 
 const addToMentions = (composeId: string, accountId: string) =>
@@ -795,9 +795,9 @@ const addToMentions = (composeId: string, accountId: string) =>
   };
 
 interface ComposeRemoveFromMentionsAction {
-  type: typeof COMPOSE_REMOVE_FROM_MENTIONS
-  id: string
-  account: string
+  type: typeof COMPOSE_REMOVE_FROM_MENTIONS;
+  id: string;
+  account: string;
 }
 
 const removeFromMentions = (composeId: string, accountId: string) =>
@@ -816,11 +816,11 @@ const removeFromMentions = (composeId: string, accountId: string) =>
   };
 
 interface ComposeEventReplyAction {
-  type: typeof COMPOSE_EVENT_REPLY
-  id: string
-  status: Status
-  account: Account
-  explicitAddressing: boolean
+  type: typeof COMPOSE_EVENT_REPLY;
+  id: string;
+  status: Status;
+  account: Account;
+  explicitAddressing: boolean;
 }
 
 const eventDiscussionCompose = (composeId: string, status: Status) =>

src/actions/events.ts

@@ -545,10 +545,10 @@ const cancelEventCompose = () => ({
 });
 
 interface EventFormSetAction {
-  type: typeof EVENT_FORM_SET
-  status: ReducerStatus
-  text: string
-  location: Record<string, any>
+  type: typeof EVENT_FORM_SET;
+  status: ReducerStatus;
+  text: string;
+  location: Record<string, any>;
 }
 
 const editEvent = (id: string) => (dispatch: AppDispatch, getState: () => RootState) => {

src/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) {

src/actions/filters.ts

@@ -33,7 +33,7 @@ const messages = defineMessages({
   removed: { id: 'filters.removed', defaultMessage: 'Filter deleted.' },
 });
 
-type FilterKeywords = { keyword: string, whole_word: boolean }[];
+type FilterKeywords = { keyword: string; whole_word: boolean }[];
 
 const fetchFiltersV1 = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {

src/actions/import-data.ts

@@ -27,9 +27,9 @@ type ImportDataActions = {
   | typeof IMPORT_BLOCKS_FAIL
   | typeof IMPORT_MUTES_REQUEST
   | typeof IMPORT_MUTES_SUCCESS
-  | typeof IMPORT_MUTES_FAIL
-  error?: any
-  config?: string
+  | typeof IMPORT_MUTES_FAIL;
+  error?: any;
+  config?: string;
 }
 
 const messages = defineMessages({

src/actions/me.ts

@@ -104,8 +104,8 @@ const patchMeRequest = () => ({
 });
 
 interface MePatchSuccessAction {
-  type: typeof ME_PATCH_SUCCESS
-  me: APIEntity
+  type: typeof ME_PATCH_SUCCESS;
+  me: APIEntity;
 }
 
 const patchMeSuccess = (me: APIEntity) =>

src/actions/onboarding.ts

@@ -4,11 +4,11 @@ const ONBOARDING_END = 'ONBOARDING_END';
 const ONBOARDING_LOCAL_STORAGE_KEY = 'soapbox:onboarding';
 
 type OnboardingStartAction = {
-  type: typeof ONBOARDING_START
+  type: typeof ONBOARDING_START;
 }
 
 type OnboardingEndAction = {
-  type: typeof ONBOARDING_END
+  type: typeof ONBOARDING_END;
 }
 
 export type OnboardingActions = OnboardingStartAction | OnboardingEndAction

src/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

src/actions/reports.ts

@@ -29,9 +29,9 @@ enum ReportableEntities {
 }
 
 type ReportedEntity = {
-  status?: Status
-  chatMessage?: ChatMessage
-  group?: Group
+  status?: Status;
+  chatMessage?: ChatMessage;
+  group?: Group;
 }
 
 const initReport = (entityType: ReportableEntities, account: Account, entities?: ReportedEntity) => (dispatch: AppDispatch) => {

src/actions/rules.ts

@@ -7,12 +7,12 @@ const RULES_FETCH_REQUEST = 'RULES_FETCH_REQUEST';
 const RULES_FETCH_SUCCESS = 'RULES_FETCH_SUCCESS';
 
 type RulesFetchRequestAction = {
-  type: typeof RULES_FETCH_REQUEST
+  type: typeof RULES_FETCH_REQUEST;
 }
 
 type RulesFetchRequestSuccessAction = {
-  type: typeof RULES_FETCH_SUCCESS
-  payload: Rule[]
+  type: typeof RULES_FETCH_SUCCESS;
+  payload: Rule[];
 }
 
 export type RulesActions = RulesFetchRequestAction | RulesFetchRequestSuccessAction

src/actions/settings.ts

@@ -19,7 +19,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 saveSuccessMessage = defineMessage({ id: 'settings.save.success', defaultMessage: 'Your preferences have been saved!' });
@@ -183,9 +183,9 @@ const getSettings = createSelector([
 });
 
 interface SettingChangeAction {
-  type: typeof SETTING_CHANGE
-  path: string[]
-  value: any
+  type: typeof SETTING_CHANGE;
+  path: string[];
+  value: any;
 }
 
 const changeSettingImmediate = (path: string[], value: any, opts?: SettingOpts) =>

src/actions/streaming.ts

@@ -65,8 +65,8 @@ const updateChatQuery = (chat: IChat) => {
 };
 
 interface TimelineStreamOpts {
-  statContext?: IStatContext
-  enabled?: boolean
+  statContext?: IStatContext;
+  enabled?: boolean;
 }
 
 const connectTimelineStream = (
@@ -192,17 +192,17 @@ function followStateToRelationship(followState: string) {
 }
 
 interface FollowUpdate {
-  state: 'follow_pending' | 'follow_accept' | 'follow_reject'
+  state: 'follow_pending' | 'follow_accept' | 'follow_reject';
   follower: {
-    id: string
-    follower_count: number
-    following_count: number
-  }
+    id: string;
+    follower_count: number;
+    following_count: number;
+  };
   following: {
-    id: string
-    follower_count: number
-    following_count: number
-  }
+    id: string;
+    follower_count: number;
+    following_count: number;
+  };
 }
 
 function updateFollowRelationships(update: FollowUpdate) {

src/actions/timelines.ts

@@ -110,11 +110,11 @@ const dequeueTimeline = (timelineId: string, expandFunc?: (lastStatusId: string)
   };
 
 interface TimelineDeleteAction {
-  type: typeof TIMELINE_DELETE
-  id: string
-  accountId: string
-  references: ImmutableMap<string, readonly [statusId: string, accountId: string]>
-  reblogOf: unknown
+  type: typeof TIMELINE_DELETE;
+  id: string;
+  accountId: string;
+  references: ImmutableMap<string, readonly [statusId: string, accountId: string]>;
+  reblogOf: unknown;
 }
 
 const deleteFromTimelines = (id: string) =>
@@ -193,14 +193,14 @@ const expandTimeline = (timelineId: string, path: string, params: Record<string,
   };
 
 interface ExpandHomeTimelineOpts {
-  maxId?: string
-  url?: string
+  maxId?: string;
+  url?: string;
 }
 
 interface HomeTimelineParams {
-  max_id?: string
-  exclude_replies?: boolean
-  with_muted?: boolean
+  max_id?: string;
+  exclude_replies?: boolean;
+  with_muted?: boolean;
 }
 
 const expandHomeTimeline = ({ url, maxId }: ExpandHomeTimelineOpts = {}, done = noOp) => {

src/api/hooks/accounts/useAccount.ts

@@ -10,7 +10,7 @@ import { type Account, accountSchema } from 'soapbox/schemas';
 import { useRelationship } from './useRelationship';
 
 interface UseAccountOpts {
-  withRelationship?: boolean
+  withRelationship?: boolean;
 }
 
 function useAccount(accountId?: string, opts: UseAccountOpts = {}) {

src/api/hooks/accounts/useAccountList.ts

@@ -8,7 +8,7 @@ import { useRelationships } from './useRelationships';
 import type { EntityFn } from 'soapbox/entity-store/hooks/types';
 
 interface useAccountListOpts {
-  enabled?: boolean
+  enabled?: boolean;
 }
 
 function useAccountList(listKey: string[], entityFn: EntityFn<void>, opts: useAccountListOpts = {}) {

src/api/hooks/accounts/useAccountLookup.ts

@@ -10,7 +10,7 @@ import { type Account, accountSchema } from 'soapbox/schemas';
 import { useRelationship } from './useRelationship';
 
 interface UseAccountLookupOpts {
-  withRelationship?: boolean
+  withRelationship?: boolean;
 }
 
 function useAccountLookup(acct: string | undefined, opts: UseAccountLookupOpts = {}) {

src/api/hooks/accounts/useFollow.ts

@@ -6,9 +6,9 @@ import { useApi } from 'soapbox/hooks/useApi';
 import { relationshipSchema } from 'soapbox/schemas';
 
 interface FollowOpts {
-  reblogs?: boolean
-  notify?: boolean
-  languages?: string[]
+  reblogs?: boolean;
+  notify?: boolean;
+  languages?: string[];
 }
 
 function useFollow() {

src/api/hooks/accounts/useRelationship.ts

@@ -6,7 +6,7 @@ import { useApi } from 'soapbox/hooks';
 import { type Relationship, relationshipSchema } from 'soapbox/schemas';
 
 interface UseRelationshipOpts {
-  enabled?: boolean
+  enabled?: boolean;
 }
 
 function useRelationship(accountId: string | undefined, opts: UseRelationshipOpts = {}) {

src/api/hooks/groups/useCreateGroup.ts

@@ -4,13 +4,13 @@ import { useApi } from 'soapbox/hooks/useApi';
 import { groupSchema } from 'soapbox/schemas';
 
 interface CreateGroupParams {
-  display_name?: string
-  note?: string
-  avatar?: File
-  header?: File
-  group_visibility?: 'members_only' | 'everyone'
-  discoverable?: boolean
-  tags?: string[]
+  display_name?: string;
+  note?: string;
+  avatar?: File;
+  header?: File;
+  group_visibility?: 'members_only' | 'everyone';
+  discoverable?: boolean;
+  tags?: string[];
 }
 
 function useCreateGroup() {

src/api/hooks/groups/useGroupValidation.ts

@@ -4,8 +4,8 @@ import { useApi } from 'soapbox/hooks/useApi';
 import { useFeatures } from 'soapbox/hooks/useFeatures';
 
 type Validation = {
-  error: string
-  message: string
+  error: string;
+  message: string;
 }
 
 const ValidationKeys = {

src/api/hooks/groups/useUpdateGroup.ts

@@ -4,13 +4,13 @@ import { useApi } from 'soapbox/hooks/useApi';
 import { groupSchema } from 'soapbox/schemas';
 
 interface UpdateGroupParams {
-  display_name?: string
-  note?: string
-  avatar?: File | ''
-  header?: File | ''
-  group_visibility?: string
-  discoverable?: boolean
-  tags?: string[]
+  display_name?: string;
+  note?: string;
+  avatar?: File | '';
+  header?: File | '';
+  group_visibility?: string;
+  discoverable?: boolean;
+  tags?: string[];
 }
 
 function useUpdateGroup(groupId: string) {

src/api/hooks/streaming/useCommunityStream.ts

@@ -1,8 +1,8 @@
 import { useTimelineStream } from './useTimelineStream';
 
 interface UseCommunityStreamOpts {
-  onlyMedia?: boolean
-  enabled?: boolean
+  onlyMedia?: boolean;
+  enabled?: boolean;
 }
 
 function useCommunityStream({ onlyMedia, enabled }: UseCommunityStreamOpts = {}) {

src/api/hooks/streaming/usePublicStream.ts

@@ -1,7 +1,7 @@
 import { useTimelineStream } from './useTimelineStream';
 
 interface UsePublicStreamOpts {
-  onlyMedia?: boolean
+  onlyMedia?: boolean;
 }
 
 function usePublicStream({ onlyMedia }: UsePublicStreamOpts = {}) {

src/api/hooks/streaming/useRemoteStream.ts

@@ -1,8 +1,8 @@
 import { useTimelineStream } from './useTimelineStream';
 
 interface UseRemoteStreamOpts {
-  instance: string
-  onlyMedia?: boolean
+  instance: string;
+  onlyMedia?: boolean;
 }
 
 function useRemoteStream({ instance, onlyMedia }: UseRemoteStreamOpts) {

src/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 => {

src/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. */

src/components/account.tsx

@@ -17,8 +17,8 @@ import type { StatusApprovalStatus } from 'soapbox/normalizers/status';
 import type { Account as AccountSchema } from 'soapbox/schemas';
 
 interface IInstanceFavicon {
-  account: AccountSchema
-  disabled?: boolean
+  account: AccountSchema;
+  disabled?: boolean;
 }
 
 const messages = defineMessages({
@@ -57,9 +57,9 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
 };
 
 interface IProfilePopper {
-  condition: boolean
-  wrapper: (children: React.ReactNode) => React.ReactNode
-  children: React.ReactNode
+  condition: boolean;
+  wrapper: (children: React.ReactNode) => React.ReactNode;
+  children: React.ReactNode;
 }
 
 const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children }) => {
@@ -71,31 +71,31 @@ const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children
 };
 
 export interface IAccount {
-  account: AccountSchema
-  action?: React.ReactElement
-  actionAlignment?: 'center' | 'top'
-  actionIcon?: string
-  actionTitle?: string
+  account: AccountSchema;
+  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
-  emojiUrl?: 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;
+  emojiUrl?: string;
+  note?: string;
 }
 
 const Account = ({

src/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 }) => {

src/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 }) => {

src/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 }) => {

src/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 }) => {

src/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 }) => {

src/components/announcements/reactions-bar.tsx

@@ -12,11 +12,11 @@ import type { Emoji, NativeEmoji } from 'soapbox/features/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 }) => {

src/components/attachment-thumbs.tsx

@@ -9,9 +9,9 @@ import type { List as ImmutableList } from 'immutable';
 import type { Attachment } from 'soapbox/types/entities';
 
 interface IAttachmentThumbs {
-  media: ImmutableList<Attachment>
-  onClick?(): void
-  sensitive?: boolean
+  media: ImmutableList<Attachment>;
+  onClick?(): void;
+  sensitive?: boolean;
 }
 
 const AttachmentThumbs = (props: IAttachmentThumbs) => {

src/components/authorize-reject-buttons.tsx

@@ -5,9 +5,9 @@ import { FormattedMessage } from 'react-intl';
 import { HStack, IconButton, Text } from 'soapbox/components/ui';
 
 interface IAuthorizeRejectButtons {
-  onAuthorize(): Promise<unknown> | unknown
-  onReject(): Promise<unknown> | unknown
-  countdown?: number
+  onAuthorize(): Promise<unknown> | unknown;
+  onReject(): Promise<unknown> | unknown;
+  countdown?: number;
 }
 
 /** Buttons to approve or reject a pending item, usually an account. */
@@ -126,7 +126,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
 };
 
 interface IActionEmblem {
-  text: React.ReactNode
+  text: React.ReactNode;
 }
 
 const ActionEmblem: React.FC<IActionEmblem> = ({ text }) => {
@@ -140,12 +140,12 @@ const ActionEmblem: React.FC<IActionEmblem> = ({ text }) => {
 };
 
 interface IAuthorizeRejectButton {
-  theme: 'primary' | 'danger'
-  icon: string
-  action(): void
-  isLoading?: boolean
-  disabled?: boolean
-  style: React.CSSProperties
+  theme: 'primary' | 'danger';
+  icon: string;
+  action(): void;
+  isLoading?: boolean;
+  disabled?: boolean;
+  style: React.CSSProperties;
 }
 
 const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon, action, isLoading, style, disabled }) => {

src/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> = ({

src/components/autosuggest-emoji.tsx

@@ -7,7 +7,7 @@ import { joinPublicPath } from 'soapbox/utils/static';
 import type { Emoji } from 'soapbox/features/emoji';
 
 interface IAutosuggestEmoji {
-  emoji: Emoji
+  emoji: Emoji;
 }
 
 const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {

src/components/autosuggest-input.tsx

@@ -17,23 +17,23 @@ import type { Emoji } from 'soapbox/features/emoji';
 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> {

src/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 }) => {

src/components/autosuggest-textarea.tsx

@@ -14,23 +14,23 @@ import type { List as ImmutableList } from 'immutable';
 import type { Emoji } from 'soapbox/features/emoji';
 
 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> {

src/components/avatar-stack.tsx

@@ -11,8 +11,8 @@ import type { Account } from 'soapbox/types/entities';
 const getAccount = makeGetAccount();
 
 interface IAvatarStack {
-  accountIds: ImmutableOrderedSet<string>
-  limit?: number
+  accountIds: ImmutableOrderedSet<string>;
+  limit?: number;
 }
 
 const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {

src/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 }) => {

src/components/big-card.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 
 interface IBigCard {
-  title: React.ReactNode
-  subtitle?: React.ReactNode
-  children: React.ReactNode
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  children: React.ReactNode;
 }
 
 const BigCard: React.FC<IBigCard> = ({ title, subtitle, children }) => {

src/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'>

src/components/birthday-panel.tsx

@@ -15,7 +15,7 @@ const timeToMidnight = () => {
 };
 
 interface IBirthdayPanel {
-  limit: number
+  limit: number;
 }
 
 const BirthdayPanel = ({ limit }: IBirthdayPanel) => {

src/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;
 }
 
 /**

src/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. */

src/components/display-name.tsx

@@ -11,9 +11,9 @@ import VerificationBadge from './verification-badge';
 import type { Account } from 'soapbox/schemas';
 
 interface IDisplayName {
-  account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>
-  withSuffix?: boolean
-  children?: React.ReactNode
+  account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
+  withSuffix?: boolean;
+  children?: React.ReactNode;
 }
 
 const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = true }) => {

src/components/domain.tsx

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

src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -5,23 +5,23 @@ import { useHistory } from 'react-router-dom';
 import { Counter, Icon } from '../ui';
 
 export interface MenuItem {
-  action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>
-  active?: boolean
-  count?: number
-  destructive?: boolean
-  href?: string
-  icon?: string
-  meta?: string
-  middleClick?(event: React.MouseEvent): void
-  target?: React.HTMLAttributeAnchorTarget
-  text: string
-  to?: string
+  action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
+  active?: boolean;
+  count?: number;
+  destructive?: boolean;
+  href?: string;
+  icon?: string;
+  meta?: string;
+  middleClick?(event: React.MouseEvent): void;
+  target?: React.HTMLAttributeAnchorTarget;
+  text: string;
+  to?: string;
 }
 
 interface IDropdownMenuItem {
-  index: number
-  item: MenuItem | null
-  onClick?(): void
+  index: number;
+  item: MenuItem | null;
+  onClick?(): void;
 }
 
 const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {

src/components/dropdown-menu/dropdown-menu.tsx

@@ -18,16 +18,16 @@ import type { Status } from 'soapbox/types/entities';
 export type Menu = Array<MenuItem | null>;
 
 interface IDropdownMenu {
-  children?: React.ReactElement
-  disabled?: boolean
-  items: Menu
-  onClose?: () => void
-  onOpen?: () => void
-  onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>
-  placement?: Placement
-  src?: string
-  status?: Status
-  title?: string
+  children?: React.ReactElement;
+  disabled?: boolean;
+  items: Menu;
+  onClose?: () => void;
+  onOpen?: () => void;
+  onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+  placement?: Placement;
+  src?: string;
+  status?: Status;
+  title?: string;
 }
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;

src/components/error-boundary.tsx

@@ -27,14 +27,14 @@ const mapStateToProps = (state: RootState) => {
 };
 
 interface Props extends ReturnType<typeof mapStateToProps> {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 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> {

src/components/event-preview.tsx

@@ -19,10 +19,10 @@ const messages = defineMessages({
 });
 
 interface IEventPreview {
-  status: StatusEntity
-  className?: string
-  hideAction?: boolean
-  floatingAction?: boolean
+  status: StatusEntity;
+  className?: string;
+  hideAction?: boolean;
+  floatingAction?: boolean;
 }
 
 const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction, floatingAction = true }) => {

src/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 }) => {

src/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 }) => {

src/components/group-card.tsx

@@ -11,7 +11,7 @@ import { HStack, Stack, Text } from './ui';
 import type { Group as GroupEntity } from 'soapbox/types/entities';
 
 interface IGroupCard {
-  group: GroupEntity
+  group: GroupEntity;
 }
 
 const GroupCard: React.FC<IGroupCard> = ({ group }) => {

src/components/groups/group-avatar.tsx

@@ -8,9 +8,9 @@ import { Avatar } from '../ui';
 import type { Group } from 'soapbox/schemas';
 
 interface IGroupAvatar {
-  group: Group
-  size: number
-  withRing?: boolean
+  group: Group;
+  size: number;
+  withRing?: boolean;
 }
 
 const GroupAvatar = (props: IGroupAvatar) => {

src/components/groups/popover/group-popover.tsx

@@ -11,9 +11,9 @@ import GroupAvatar from '../group-avatar';
 import type { Group } from 'soapbox/schemas';
 
 interface IGroupPopoverContainer {
-  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
-  isEnabled: boolean
-  group: Group
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+  isEnabled: boolean;
+  group: Group;
 }
 
 const messages = defineMessages({

src/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 }) => {

src/components/helmet.tsx

@@ -16,7 +16,7 @@ const getNotifTotals = (state: RootState): number => {
 };
 
 interface IHelmet {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 const Helmet: React.FC<IHelmet> = ({ children }) => {

src/components/hoc/group-lookup-hoc.tsx

@@ -7,15 +7,15 @@ import { Layout } from '../ui';
 
 interface IGroupLookup {
   params: {
-    groupSlug: string
-  }
+    groupSlug: string;
+  };
 }
 
 interface IMaybeGroupLookup {
   params?: {
-    groupSlug?: string
-    groupId?: string
-  }
+    groupSlug?: string;
+    groupId?: string;
+  };
 }
 
 function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: string } }>) {

src/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. */

src/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. */

src/components/icon-button.tsx

@@ -4,13 +4,13 @@ import React from 'react';
 import Icon from 'soapbox/components/icon';
 
 interface IIconButton extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' | 'tabIndex' | 'title'> {
-  active?: boolean
-  expanded?: boolean
-  iconClassName?: string
-  pressed?: boolean
-  size?: number
-  src: string
-  text?: React.ReactNode
+  active?: boolean;
+  expanded?: boolean;
+  iconClassName?: string;
+  pressed?: boolean;
+  size?: number;
+  src: string;
+  text?: React.ReactNode;
 }
 
 const IconButton: React.FC<IIconButton> = ({

src/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
-  countMax?: number
-  icon?: string
-  src?: string
+  count: number;
+  countMax?: number;
+  icon?: string;
+  src?: string;
 }
 
 const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, countMax, ...rest }) => {

src/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;
 }
 
 /**

src/components/list.tsx

@@ -8,7 +8,7 @@ import { SelectDropdown } from '../features/forms';
 import { Icon, HStack, Select } from './ui';
 
 interface IList {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 const List: React.FC<IList> = ({ children }) => (
@@ -16,13 +16,13 @@ const List: React.FC<IList> = ({ children }) => (
 );
 
 interface IListItem {
-  label: React.ReactNode
-  hint?: React.ReactNode
-  to?: string
-  onClick?(): void
-  onSelect?(): void
-  isSelected?: boolean
-  children?: React.ReactNode
+  label: React.ReactNode;
+  hint?: React.ReactNode;
+  to?: string;
+  onClick?(): void;
+  onSelect?(): void;
+  isSelected?: boolean;
+  children?: React.ReactNode;
 }
 
 const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onSelect, isSelected }) => {

src/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 }) => {

src/components/load-more.tsx

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

src/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 }) => {

src/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> = ({
@@ -275,17 +275,17 @@ const Item: React.FC<IItem> = ({
 };
 
 export 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
-  className?: string
+  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;
+  className?: string;
 }
 
 const MediaGallery: React.FC<IMediaGallery> = (props) => {

src/components/missing-indicator.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { Card, CardBody, Stack, Text } from './ui';
 
 interface MissingIndicatorProps {
-  nested?: boolean
+  nested?: boolean;
 }
 
 const MissingIndicator = ({ nested = false }: MissingIndicatorProps): JSX.Element => (

src/components/modal-root.tsx

@@ -37,10 +37,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 }) => {

src/components/navlinks.tsx

@@ -5,7 +5,7 @@ import { Text } from 'soapbox/components/ui';
 import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
 
 interface INavlinks {
-  type: string
+  type: string;
 }
 
 const Navlinks: React.FC<INavlinks> = ({ type }) => {

src/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. */

src/components/pending-items-row.tsx

@@ -7,11 +7,11 @@ import { HStack, Icon, Text } from 'soapbox/components/ui';
 
 interface IPendingItemsRow {
   /** Path to navigate the user when clicked. */
-  to: string
+  to: string;
   /** Number of pending items. */
-  count: number
+  count: number;
   /** Size of the icon. */
-  size?: 'md' | 'lg'
+  size?: 'md' | 'lg';
 }
 
 const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' }) => {

src/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 => {

src/components/polls/poll-option.tsx

@@ -15,7 +15,7 @@ const messages = defineMessages({
   votes: { id: 'poll.votes', defaultMessage: '{votes, plural, one {# vote} other {# votes}}' },
 });
 
-const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ percent, leading }): JSX.Element => {
+const PollPercentageBar: React.FC<{ percent: number; leading: boolean }> = ({ percent, leading }): JSX.Element => {
   return (
     <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
       {({ width }) => (
@@ -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 => {

src/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({

src/components/profile-hover-card.tsx

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

src/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 }) => {

src/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;
 }
 
 /**

src/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;
 }
 
 /**

src/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. */

src/components/radio.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import List, { ListItem } from './list';
 
 interface IRadioGroup {
-  onChange: React.ChangeEventHandler
-  children: React.ReactElement<{ onChange: React.ChangeEventHandler }>[]
+  onChange: React.ChangeEventHandler;
+  children: React.ReactElement<{ onChange: React.ChangeEventHandler }>[];
 }
 
 const RadioGroup = ({ onChange, children }: IRadioGroup) => {
@@ -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 }) => {

src/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. */

src/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). */

src/components/scroll-top-button.tsx

@@ -7,15 +7,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. */

src/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,48 +37,48 @@ 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;
   /** Should the empty message be displayed in a Card */
-  emptyMessageCard?: boolean
+  emptyMessageCard?: boolean;
   /** 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
+  useWindowScroll?: boolean;
 }
 
 /** Legacy ScrollableList with Virtuoso for backwards-compatibility. */

src/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 }) => {

src/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
+  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. */

src/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. */

src/components/status-action-bar.tsx

@@ -108,11 +108,11 @@ const messages = defineMessages({
 });
 
 interface IStatusActionBar {
-  status: Status
-  withLabels?: boolean
-  expandable?: boolean
-  space?: 'sm' | 'md' | 'lg'
-  statusActionButtonTheme?: 'default' | 'inverse'
+  status: Status;
+  withLabels?: boolean;
+  expandable?: boolean;
+  space?: 'sm' | 'md' | 'lg';
+  statusActionButtonTheme?: 'default' | 'inverse';
 }
 
 const StatusActionBar: React.FC<IStatusActionBar> = ({
@@ -698,7 +698,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const canShare = ('share' in navigator) && (status.visibility === 'public' || status.visibility === 'group');
 
   const spacing: {
-    [key: string]: React.ComponentProps<typeof HStack>['space']
+    [key: string]: React.ComponentProps<typeof HStack>['space'];
   } = {
     'sm': 2,
     'md': 8,

src/components/status-action-button.tsx

@@ -14,7 +14,7 @@ const COLORS = {
 type Color = keyof typeof COLORS;
 
 interface IStatusActionCounter {
-  count: number
+  count: number;
 }
 
 /** Action button numerical counter, eg "5" likes. */
@@ -27,15 +27,15 @@ 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?: ImmutableMap<string, any>
-  text?: React.ReactNode
-  theme?: 'default' | 'inverse'
+  iconClassName?: string;
+  icon: string;
+  count?: number;
+  active?: boolean;
+  color?: Color;
+  filled?: boolean;
+  emoji?: ImmutableMap<string, any>;
+  text?: React.ReactNode;
+  theme?: 'default' | 'inverse';
 }
 
 const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {

src/components/status-content.tsx

@@ -18,7 +18,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) */
@@ -30,11 +30,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 */

src/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 */

src/components/status-list.tsx

@@ -17,31 +17,31 @@ import type { IScrollableList } from 'soapbox/components/scrollable-list';
 
 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. */