From 18cf231d67d536a43c7b5331f42748f90504e689 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Sat, 26 Oct 2024 17:26:36 -0300
Subject: [PATCH 001/133] Fix anchor warning and update Icon component to use
 SvgIcon components

---
 src/components/autosuggest-input.tsx                |  2 +-
 src/components/sidebar-menu.tsx                     |  6 +++---
 src/features/about/index.tsx                        | 10 +++++-----
 src/features/backups/index.tsx                      |  4 ++--
 src/features/compose/components/reply-mentions.tsx  | 13 +++++++------
 .../crypto-donate/components/crypto-address.tsx     | 11 ++++++-----
 src/features/event/components/event-header.tsx      | 11 +++++------
 src/features/event/event-information.tsx            |  8 ++++----
 .../components/restricted-instance.tsx              | 11 ++++++-----
 9 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index 7cf928419..8c3630dae 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -232,7 +232,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
     }
 
     return menu.map((item, i) => (
-      <a
+      <a // eslint-disable-line jsx-a11y/anchor-is-valid
         className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
         href='#'
         role='button'
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 67a838a28..7a028afe2 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -9,7 +9,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { closeSidebar } from 'soapbox/actions/sidebar';
 import { useAccount } from 'soapbox/api/hooks';
 import Account from 'soapbox/components/account';
-import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
+import { Stack, Divider, HStack, Icon, IconButton, Text, Button } from 'soapbox/components/ui';
 import ProfileStats from 'soapbox/features/ui/components/profile-stats';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
@@ -123,11 +123,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   };
 
   const renderAccount = (account: AccountEntity) => (
-    <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
+    <Button to='#' className='!block !border-none !p-0 !py-2 !text-primary-600  hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleSwitchAccount(account)} key={account.id}>
       <div className='pointer-events-none'>
         <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
       </div>
-    </a>
+    </Button>
   );
 
   React.useEffect(() => {
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 04bfb7176..a4816fb9e 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about';
 import { Navlinks } from 'soapbox/components/navlinks';
-import { Card } from 'soapbox/components/ui';
+import { Button, Card } from 'soapbox/components/ui';
 import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
 
 import { languages } from '../preferences';
@@ -42,18 +42,18 @@ const AboutPage: React.FC = () => {
       {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
-          <a href='#' onClick={() => setLocale(defaultLocale)}>
+          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={() => setLocale(defaultLocale)}>
             {/* @ts-ignore */}
             {languages[defaultLocale] || defaultLocale}
-          </a>
+          </Button>
         </li>
         {
           pageLocales?.map(locale => (
             <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
-              <a href='#' onClick={() => setLocale(locale)}>
+              <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={() => setLocale(locale)}>
                 {/* @ts-ignore */}
                 {languages[locale] || locale}
-              </a>
+              </Button>
             </li>
           ))
         }
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index 6c9d97f92..72f736d8b 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -78,11 +78,11 @@ const Backups = () => {
     <Card variant='rounded' size='lg'>
       {intl.formatMessage(messages.emptyMessage, {
         action: (
-          <a href='#' onClick={handleCreateBackup}>
+          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleCreateBackup}>
             <Text tag='span' theme='primary' size='sm' className='hover:underline'>
               {intl.formatMessage(messages.emptyMessageAction)}
             </Text>
-          </a>
+          </Button>
         ),
       })}
     </Card>
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index eb96b4b44..686994713 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
+import { Button } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks';
 import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
 import { makeGetStatus } from 'soapbox/selectors';
@@ -29,7 +30,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   const parentTo = status && statusToMentionsAccountIdsArray(status, account!);
 
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
     dispatch(openModal('REPLY_MENTIONS', {
@@ -43,19 +44,19 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   if (to.size === 0) {
     return (
-      <a href='#' className='reply-mentions' onClick={handleClick}>
+      <Button to='#' className='mb-1 cursor-pointer !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600' theme='muted' onClick={handleClick}>
         <FormattedMessage
           id='reply_mentions.reply_empty'
           defaultMessage='Replying to post'
         />
-      </a>
+      </Button>
     );
   }
 
   const accounts = to.slice(0, 2).map((acct: string) => {
     const username = acct.split('@')[0];
     return (
-      <span className='reply-mentions__account'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
+      <span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(username)}
       </span>
     );
@@ -68,7 +69,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   }
 
   return (
-    <a href='#' className='reply-mentions' onClick={handleClick}>
+    <Button to='#' className='mb-1 cursor-pointer !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent  focus:ring-offset-0 dark:!text-gray-600' theme='muted' onClick={handleClick}>
       <FormattedMessage
         id='reply_mentions.reply'
         defaultMessage='Replying to {accounts}'
@@ -76,7 +77,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
           accounts: <FormattedList type='conjunction' value={accounts} />,
         }}
       />
-    </a>
+    </Button>
   );
 };
 
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 0c07387eb..f0d09be3f 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import CopyableInput from 'soapbox/components/copyable-input';
-import { Text, Icon, Stack, HStack } from 'soapbox/components/ui';
+import { Text, Stack, HStack, Button } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import { getExplorerUrl } from '../utils/block-explorer';
@@ -41,13 +42,13 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
         <HStack alignItems='center' className='ml-auto'>
-          <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
-            <Icon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
-          </a>
+          <Button className='!ml-1 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1' theme='muted' to='#' onClick={handleModalClick}>
+            <SvgIcon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
+          </Button>
 
           {explorerUrl && (
             <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
-              <Icon src={require('@tabler/icons/outline/external-link.svg')} size={20} />
+              <SvgIcon src={require('@tabler/icons/outline/external-link.svg')} size={20} />
             </a>
           )}
         </HStack>
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index cd21a2565..a65d13dc9 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -13,7 +13,6 @@ import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions
 import { initMuteModal } from 'soapbox/actions/mutes';
 import { initReport, ReportableEntities } from 'soapbox/actions/reports';
 import { deleteStatus } from 'soapbox/actions/statuses';
-import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still-image';
 import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
@@ -421,7 +420,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
         <Stack space={1}>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/flag-3.svg')} />
+            <SvgIcon src={require('@tabler/icons/outline/flag-3.svg')} />
             <span>
               <FormattedMessage
                 id='event.organized_by'
@@ -441,8 +440,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           </HStack>
 
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/users.svg')} />
-            <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
+            <SvgIcon src={require('@tabler/icons/outline/users.svg')} />
+            <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleParticipantsClick}>
               <span>
                 <FormattedMessage
                   id='event.participants'
@@ -453,14 +452,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                   }}
                 />
               </span>
-            </a>
+            </Button>
           </HStack>
 
           <EventDate status={status} />
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+              <SvgIcon src={require('@tabler/icons/outline/map-pin.svg')} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index d84d6096b..08040d272 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -7,7 +7,7 @@ import MissingIndicator from 'soapbox/components/missing-indicator';
 import StatusContent from 'soapbox/components/status-content';
 import StatusMedia from 'soapbox/components/status-media';
 import TranslateButton from 'soapbox/components/translate-button';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
 import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
@@ -47,7 +47,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
     setShowMedia(!showMedia);
   };
 
-  const handleShowMap: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+  const handleShowMap: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
 
     dispatch(openModal('EVENT_MAP', {
@@ -89,9 +89,9 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
       text.push(
         <React.Fragment key='event-map'>
           <br />
-          <a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
+          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleShowMap}>
             <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
-          </a>
+          </Button>
         </React.Fragment>,
       );
     }
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 07e017521..8d33c4b50 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -1,7 +1,8 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
-import Icon from 'soapbox/components/icon';
+import { Button } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
 
@@ -18,19 +19,19 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
 
   const [expanded, setExpanded] = useState(false);
 
-  const toggleExpanded: React.MouseEventHandler<HTMLAnchorElement> = e => {
+  const toggleExpanded: React.MouseEventHandler<HTMLButtonElement> = e => {
     setExpanded((value) => !value);
     e.preventDefault();
   };
 
   return (
     <div>
-      <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
-        <Icon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
+      <Button to='#' className='flex items-center gap-1  !border-none !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' onClick={toggleExpanded}>
+        <SvgIcon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
         <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
           {remoteInstance.host}
         </div>
-      </a>
+      </Button>
       <div
         className={clsx({
           'h-0 overflow-hidden': !expanded,

From 6c30f1fe73f0d2c204b47e44ab86cdcc63f24fb2 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Sat, 26 Oct 2024 18:10:50 -0300
Subject: [PATCH 002/133] Refactor crypto-donate-modal to use Tailwind-only
 styling

---
 .../crypto-donate/components/crypto-icon.tsx  |  1 +
 .../components/detailed-crypto-address.tsx    | 20 ++++----
 .../components/modals/crypto-donate-modal.tsx |  2 +-
 src/styles/application.scss                   |  1 -
 src/styles/components/crypto-donate.scss      | 47 -------------------
 5 files changed, 12 insertions(+), 59 deletions(-)
 delete mode 100644 src/styles/components/crypto-donate.scss

diff --git a/src/features/crypto-donate/components/crypto-icon.tsx b/src/features/crypto-donate/components/crypto-icon.tsx
index f135c3bc3..cb18c7633 100644
--- a/src/features/crypto-donate/components/crypto-icon.tsx
+++ b/src/features/crypto-donate/components/crypto-icon.tsx
@@ -21,6 +21,7 @@ const CryptoIcon: React.FC<ICryptoIcon> = ({ ticker, title, className }): JSX.El
   return (
     <div className={className}>
       <img
+        className='w-full'
         src={getIcon(ticker)}
         alt={title || ticker}
       />
diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx
index 554c05ade..cf2cf9ce5 100644
--- a/src/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -2,7 +2,7 @@ import { QRCodeCanvas as QRCode } from 'qrcode.react';
 import React from 'react';
 
 import CopyableInput from 'soapbox/components/copyable-input';
-import Icon from 'soapbox/components/icon';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 
 import { getExplorerUrl } from '../utils/block-explorer';
 import { getTitle } from '../utils/coin-db';
@@ -20,22 +20,22 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
   const explorerUrl = getExplorerUrl(ticker, address);
 
   return (
-    <div className='crypto-address'>
-      <div className='crypto-address__head'>
+    <div className='flex flex-col p-0'>
+      <div className='mb-1.5 flex items-center'>
         <CryptoIcon
-          className='crypto-address__icon'
+          className='mr-2.5 flex w-6 items-start justify-center'
           ticker={ticker}
           title={title}
         />
-        <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
-        <div className='crypto-address__actions'>
-          {explorerUrl && <a href={explorerUrl} target='_blank'>
-            <Icon src={require('@tabler/icons/outline/external-link.svg')} />
+        <div className='font-bold'>{title || ticker.toUpperCase()}</div>
+        <div className='ml-auto flex'>
+          {explorerUrl && <a className='ml-2 text-gray-400' href={explorerUrl} target='_blank'>
+            <SvgIcon size={20} src={require('@tabler/icons/outline/external-link.svg')} />
           </a>}
         </div>
       </div>
-      {note && <div className='crypto-address__note'>{note}</div>}
-      <div className='crypto-address__qrcode'>
+      {note && <div className='mb-2.5'>{note}</div>}
+      <div className='mb-3 flex items-center justify-center p-2.5'>
         <QRCode className='rounded-lg' value={address} includeMargin />
       </div>
 
diff --git a/src/features/ui/components/modals/crypto-donate-modal.tsx b/src/features/ui/components/modals/crypto-donate-modal.tsx
index c1724ee78..58ce88b13 100644
--- a/src/features/ui/components/modals/crypto-donate-modal.tsx
+++ b/src/features/ui/components/modals/crypto-donate-modal.tsx
@@ -9,7 +9,7 @@ const CryptoDonateModal: React.FC<ICryptoAddress & { onClose: () => void }> = ({
 
   return (
     <Modal onClose={onClose} width='xs'>
-      <div className='crypto-donate-modal'>
+      <div>
         <DetailedCryptoAddress {...props} />
       </div>
     </Modal>
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 5e29bcde8..ea9ac580a 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -23,7 +23,6 @@
 @import 'components/search';
 @import 'components/video-player';
 @import 'components/audio-player';
-@import 'components/crypto-donate';
 @import 'components/aliases';
 @import 'components/icon';
 @import 'forms';
diff --git a/src/styles/components/crypto-donate.scss b/src/styles/components/crypto-donate.scss
deleted file mode 100644
index 08a1a8a09..000000000
--- a/src/styles/components/crypto-donate.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.crypto-address {
-  @apply flex flex-col p-5;
-
-  &__head {
-    @apply flex items-center mb-1.5;
-  }
-
-  &__title {
-    @apply font-bold;
-  }
-
-  &__icon {
-    @apply flex items-start justify-center w-6 mr-2.5;
-
-    img {
-      @apply w-full;
-    }
-  }
-
-  &__actions {
-    @apply flex ml-auto;
-
-    a {
-      @apply text-gray-400 ml-2;
-    }
-
-    .svg-icon {
-      @apply h-4.5 w-4.5;
-    }
-  }
-
-  &__note {
-    @apply mb-2.5;
-  }
-
-  &__qrcode {
-    @apply flex items-center justify-center mb-3 p-2.5;
-  }
-
-  &__address {
-    @apply mt-auto;
-  }
-}
-
-.crypto-donate-modal .crypto-address {
-  @apply p-0;
-}

From c7675de0e0e32ab053cb765354f91cd38f2cffe0 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Sat, 26 Oct 2024 18:24:16 -0300
Subject: [PATCH 003/133] Fix warning in Zap component

---
 src/features/ui/components/modals/zap-split/zap-split.tsx | 6 +++---
 src/features/zap/components/zap-pay-request-form.tsx      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx
index 38a928faf..4906a8c5c 100644
--- a/src/features/ui/components/modals/zap-split/zap-split.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split.tsx
@@ -45,7 +45,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
               <Account account={account} showProfileHoverCard={false} />
             </div>
           </Stack>
-          <div className='bg-grey-500 dark:border-grey-800 -mx-4 w-full border-b border-solid sm:-mx-10' />
+          <div className='-mx-4 w-full border-b border-solid bg-gray-500 dark:border-gray-800 sm:-mx-10' />
 
           <Stack justifyContent='center' alignItems='center' className='min-w-72 text-center' space={4}>
             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
@@ -65,7 +65,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
         </Stack>
 
         <div className='flex justify-center'>
-          <div className='box-shadow:none rounded-none border-0 border-b-2 p-0.5 text-center !ring-0 dark:bg-transparent'>
+          <div className='rounded-none border-0 border-b-2 p-0.5 text-center shadow-none !ring-0 dark:bg-transparent'>
             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
             <span className='!text-5xl font-bold'>{zapAmount}</span> sats
           </div>
@@ -79,7 +79,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
         </a>
 
       </Stack>
-      {invoice &&  <div className='border-grey-500 mt-4 flex w-full border-t pt-4 sm:ml-4 sm:w-4/5 sm:border-l sm:border-t-0 sm:pl-4'>
+      {invoice &&  <div className='mt-4 flex w-full border-t border-gray-500 pt-4 sm:ml-4 sm:w-4/5 sm:border-l sm:border-t-0 sm:pl-4'>
         <Stack space={6} className='relative m-auto' alignItems='center'>
           <h3 className='text-xl font-bold'>
             {renderTitleQr()}
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index b30c8cb1c..8e32ba5e7 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -128,7 +128,7 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
         <div className='relative flex items-end justify-center gap-4'>
           <Input
             type='text' onChange={handleCustomAmount} value={zapAmount}
-            className='box-shadow:none max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold !ring-0 dark:bg-transparent sm:max-w-28 sm:p-0.5 sm:!text-4xl'
+            className='max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold shadow-none !ring-0 dark:bg-transparent sm:max-w-28 sm:p-0.5 sm:!text-4xl'
           />
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
           {hasZapSplit && <p className='absolute right-0 font-bold sm:-right-6 sm:text-xl'>sats</p>}

From 838d86fb66ca91a79c9bde6dc62c25175ccb584e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 28 Oct 2024 17:39:26 -0300
Subject: [PATCH 004/133] Fix warning from display-name components

---
 src/components/display-name-inline.tsx        |  2 +-
 src/components/display-name.tsx               |  4 +-
 .../modals/zap-split/display-name-row.tsx     | 53 -------------------
 3 files changed, 3 insertions(+), 56 deletions(-)
 delete mode 100644 src/features/ui/components/modals/zap-split/display-name-row.tsx

diff --git a/src/components/display-name-inline.tsx b/src/components/display-name-inline.tsx
index 0f754fe07..2e30b6b29 100644
--- a/src/components/display-name-inline.tsx
+++ b/src/components/display-name-inline.tsx
@@ -32,7 +32,7 @@ const DisplayNameInline: React.FC<IDisplayName> = ({ account, withSuffix = true
   );
 
   // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-  const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
+  const suffix = (<span className='relative block max-w-full truncate'>@{getAcct(account, displayFqn)}</span>);
 
   return (
     <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx
index 130e1f0df..81f577fce 100644
--- a/src/components/display-name.tsx
+++ b/src/components/display-name.tsx
@@ -33,10 +33,10 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = t
     </HStack>
   );
 
-  const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
+  const suffix = (<span className='relative text-[14px] font-semibold'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
   return (
-    <span className='display-name' data-testid='display-name'>
+    <span className='relative block max-w-full truncate' data-testid='display-name'>
       <HoverRefWrapper accountId={account.id} inline>
         {displayName}
       </HoverRefWrapper>
diff --git a/src/features/ui/components/modals/zap-split/display-name-row.tsx b/src/features/ui/components/modals/zap-split/display-name-row.tsx
deleted file mode 100644
index b6c54a85c..000000000
--- a/src/features/ui/components/modals/zap-split/display-name-row.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-
-import { HStack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useSoapboxConfig } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
-
-import type { Account } from 'soapbox/schemas';
-
-interface IDisplayName {
-  account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
-  withSuffix?: boolean;
-}
-/**
- * This component is different from other display name components because it displays the name inline.
- *
- * @param {IDisplayName} props - The properties for this component.
- * @param {Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>} props.account - The account object contains all the metadata for an account, such as the display name, ID, and more.
- * @param {boolean} [props.withSuffix=true] - Determines whether to show the account suffix (eg, @danidfra).
- *
- * @returns {JSX.Element} The DisplayNameRow component.
- */
-const DisplayNameRow: React.FC<IDisplayName> = ({ account, withSuffix = true }) => {
-  const { displayFqn = false } = useSoapboxConfig();
-  const { verified } = account;
-
-  const displayName = (
-    <HStack space={1} alignItems='center' justifyContent='center' grow>
-      <Text
-        size='sm'
-        weight='normal'
-        truncate
-        dangerouslySetInnerHTML={{ __html: account.display_name_html }}
-      />
-
-      {verified && <VerificationBadge />}
-    </HStack>
-  );
-
-  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-  const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
-
-  return (
-    <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
-      {displayName}
-      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-      <span className='hidden text-2xl font-bold sm:block'>-</span>
-      {withSuffix && suffix}
-    </div>
-  );
-};
-
-export default DisplayNameRow;

From e22a16b94b75e409595b24edec12157608e9070b Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 28 Oct 2024 17:42:29 -0300
Subject: [PATCH 005/133] Fix warning of "shadow"

---
 src/components/ui/menu/menu.tsx                                 | 2 +-
 .../ui/components/modals/captcha-modal/components/puzzle.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/menu/menu.tsx b/src/components/ui/menu/menu.tsx
index 78dc5db0f..e359c9172 100644
--- a/src/components/ui/menu/menu.tsx
+++ b/src/components/ui/menu/menu.tsx
@@ -28,7 +28,7 @@ const MenuList: React.FC<IMenuList> = (props) => {
       <MenuItems
         onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
         className={
-          clsx(className, 'shadow-menu rounded-lg bg-white py-1 black:bg-black dark:bg-primary-900')
+          clsx(className, 'rounded-lg bg-white py-1 black:bg-black dark:bg-primary-900')
         }
         {...filteredProps}
       />
diff --git a/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx b/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
index 9e0a74746..83b575070 100644
--- a/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
+++ b/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
@@ -54,7 +54,7 @@ export const PuzzleCaptcha: React.FC<IPuzzleCaptcha> = ({ bg, puzzle, position,
   return (
     <div id='drop-area' ref={ref} className='relative'>
       <img
-        className='drop-shadow-black absolute z-[101] w-[61px] drop-shadow-2xl hover:cursor-grab'
+        className='absolute z-[101] w-[61px] drop-shadow-2xl hover:cursor-grab'
         src={puzzle}
         alt=''
         onPointerDown={(e) => e.currentTarget.setPointerCapture(e.pointerId)}

From 3ea0e2e6c25affb07a25ac349d4e58f2be0f86cc Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 12:07:15 -0300
Subject: [PATCH 006/133] Change classname "zoomable-image" to use only
 Tailwind

---
 src/features/ui/components/zoomable-image.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/ui/components/zoomable-image.tsx b/src/features/ui/components/zoomable-image.tsx
index d826dc63e..f727ddec3 100644
--- a/src/features/ui/components/zoomable-image.tsx
+++ b/src/features/ui/components/zoomable-image.tsx
@@ -124,7 +124,7 @@ class ZoomableImage extends React.PureComponent<IZoomableImage> {
 
     return (
       <div
-        className='zoomable-image'
+        className='relative flex size-full items-center justify-center'
         ref={this.setContainerRef}
         style={{ overflow }}
       >
@@ -132,6 +132,7 @@ class ZoomableImage extends React.PureComponent<IZoomableImage> {
           role='presentation'
           ref={this.setImageRef}
           alt={alt}
+          className='size-auto max-h-[80%] max-w-full object-contain shadow-2xl'
           title={alt}
           src={src}
           style={{

From 64e837ca740b3740b6713bc69f0ab2c5fa6e1d4f Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 12:12:35 -0300
Subject: [PATCH 007/133] Change classname "tombstone" to use only Tailwind

---
 src/components/tombstone.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tombstone.tsx b/src/components/tombstone.tsx
index faaa84ee0..8e2dd1f0c 100644
--- a/src/components/tombstone.tsx
+++ b/src/components/tombstone.tsx
@@ -21,7 +21,7 @@ const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown }) => {
     <HotKeys handlers={handlers}>
       <div className='h-16'>
         <div
-          className='focusable flex h-[42px] items-center justify-center rounded-lg border-2 border-gray-200 text-center dark:border-gray-800'
+          className='flex h-[42px] items-center justify-center rounded-lg border-2 border-gray-200 text-center focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-300 dark:border-gray-800'
         >
           <Text theme='muted'>
             <FormattedMessage

From 9453d10becf7fe1846687996098efd1c0f257160 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 12:14:15 -0300
Subject: [PATCH 008/133] Change classname "form-group" to use only Tailwind

---
 src/components/ui/form-group/form-group.tsx | 26 ++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/form-group/form-group.tsx b/src/components/ui/form-group/form-group.tsx
index 430851371..c566bd3d7 100644
--- a/src/components/ui/form-group/form-group.tsx
+++ b/src/components/ui/form-group/form-group.tsx
@@ -54,13 +54,17 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
           )}
 
           {hasError && (
-            <div>
+            <div className='relative'>
+              <div className='pointer-events-none absolute bottom-full left-2.5 -ml-px size-0 border-[6px] border-solid border-transparent' style={{ borderBottomColor: 'rgba(254, 202, 202, var(--tw-bg-opacity))', '--tw-bg-opacity': '1' } as React.CSSProperties} />
+
               <p
                 data-testid='form-group-error'
-                className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
+                className='relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
               >
                 {errors.join(', ')}
               </p>
+
+              <div className='pointer-events-none absolute bottom-full left-2.5 size-0 border-[6px] border-transparent' />
             </div>
           )}
 
@@ -98,12 +102,18 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         {inputChildren.filter((_, i) => i !== 0)}
 
         {hasError && (
-          <p
-            data-testid='form-group-error'
-            className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
-          >
-            {errors.join(', ')}
-          </p>
+          <div className='relative'>
+            <div className='pointer-events-none absolute bottom-full left-2.5 -ml-px size-0 border-[6px] border-solid border-transparent' style={{ borderBottomColor: 'rgba(254, 202, 202, var(--tw-bg-opacity))', '--tw-bg-opacity': '1' } as React.CSSProperties} />
+
+            <p
+              data-testid='form-group-error'
+              className='relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
+            >
+              {errors.join(', ')}
+            </p>
+
+            <div className='pointer-events-none absolute bottom-full left-2.5 size-0 border-[6px] border-transparent' />
+          </div>
         )}
       </div>
     </div>

From 1504aed625566e927b3088a9d4a36b9887ca9369 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 12:28:45 -0300
Subject: [PATCH 009/133] Change classname "navbar" to use only Tailwind

---
 src/features/ui/components/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 627236d6e..7828fc1e5 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -101,7 +101,7 @@ const Navbar = () => {
           <HStack
             space={4}
             alignItems='center'
-            className={clsx('enter flex-1 lg:items-stretch', {
+            className={clsx('flex-1 lg:items-stretch', {
               'justify-center lg:justify-start': account,
               'justify-start': !account,
             })}

From 000253bdc49cc52c4af83171c324951cd550756b Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 12:30:55 -0300
Subject: [PATCH 010/133] Change classname "profile-familiar-followers" to use
 only Tailwind

---
 src/features/ui/components/profile-familiar-followers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/ui/components/profile-familiar-followers.tsx b/src/features/ui/components/profile-familiar-followers.tsx
index c80e46b04..499762b2c 100644
--- a/src/features/ui/components/profile-familiar-followers.tsx
+++ b/src/features/ui/components/profile-familiar-followers.tsx
@@ -45,7 +45,7 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
 
   const accounts: Array<React.ReactNode> = familiarFollowers.map(account => !!account && (
     <HoverRefWrapper accountId={account.id} key={account.id} inline>
-      <Link className='mention inline-block' to={`/@${account.acct}`}>
+      <Link className='inline-block text-primary-600 hover:underline dark:text-accent-blue' to={`/@${account.acct}`}>
         <HStack space={1} alignItems='center' grow>
           <Text
             size='sm'

From afd7260e3d6b9d6a9a25e12ef6797a9468372756 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 16:47:24 -0300
Subject: [PATCH 011/133] Change classname "media-modal" and
 "extended-video-player" to use only Tailwind

---
 src/components/extended-video-player.tsx          | 3 ++-
 src/features/ui/components/modals/media-modal.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/extended-video-player.tsx b/src/components/extended-video-player.tsx
index e0512588c..23d8a35cb 100644
--- a/src/components/extended-video-player.tsx
+++ b/src/components/extended-video-player.tsx
@@ -42,10 +42,11 @@ const ExtendedVideoPlayer: React.FC<IExtendedVideoPlayer> = ({ src, alt, time, c
   }
 
   return (
-    <div className='extended-video-player'>
+    <div className='flex size-full items-center justify-center'>
       <video
         ref={video}
         src={src}
+        className='max-h-[80%] max-w-full'
         autoPlay
         role='button'
         tabIndex={0}
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 5d7ffaec4..86ec556b2 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -233,7 +233,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   };
 
   return (
-    <div className='media-modal pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'>
+    <div className='pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'>
       <div
         className='absolute inset-0'
         role='presentation'

From 337d835dd94807accc5a893f851d4ed27211016f Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 16:49:32 -0300
Subject: [PATCH 012/133] Change classname "dropdown-menu_separator" to use
 only Tailwind

---
 .../ui/components/modals/actions-modal.tsx       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 5fd37bab7..0898a80b2 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -22,7 +22,7 @@ interface IActionsModal {
 const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClose }) => {
   const renderAction = (action: MenuItem | null, i: number) => {
     if (action === null) {
-      return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
+      return <li key={`sep-${i}`} className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />;
     }
 
     const { icon = null, text, meta = null, active = false, href = '#', destructive } = action;
@@ -36,12 +36,12 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
           {...compProps}
           space={2.5}
           data-index={i}
-          className={clsx('w-full', { active, destructive })}
+          className={clsx('w-full', { active, 'text-danger-600 dark:text-danger-400': destructive })}
           element={Comp}
         >
           {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
           <div>
-            <div className={clsx({ 'actions-modal__item-label': !!meta })}>{text}</div>
+            <div className={clsx({ 'font-medium': !!meta })}>{text}</div>
             <div>{meta}</div>
           </div>
         </HStack>
@@ -52,18 +52,18 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
   return (
     <Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
       {({ top }) => (
-        <div className='modal-root__modal actions-modal' style={{ top: `${top}%` }}>
+        <div className='pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900' style={{ top: `${top}%` }}>
           {status && (
-            <ReplyIndicator className='actions-modal__status rounded-b-none' status={status} hideActions />
+            <ReplyIndicator className='max-h-[300px] overflow-y-auto rounded-b-none' status={status} hideActions />
           )}
 
-          <ul className={clsx({ 'with-status': !!status })}>
+          <ul className={clsx({ 'max-h-[calc(80vh-75px)]': !!status }, 'my-2 shrink-0 overflow-y-auto')}>
             {actions && actions.map(renderAction)}
 
-            <li className='dropdown-menu__separator' />
+            <li className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />
 
             <li>
-              <button type='button' onClick={onClose}>
+              <button type='button' className='w-full text-center text-gray-700 hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800' onClick={onClose}>
                 <FormattedMessage id='lightbox.close' defaultMessage='Close' />
               </button>
             </li>

From 9a7d899fe80e4434f0632e587402e3740e231cdf Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 16:57:39 -0300
Subject: [PATCH 013/133] Change classname "status__content" to use only
 Tailwind

---
 src/features/ui/components/modals/compare-history-modal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/ui/components/modals/compare-history-modal.tsx b/src/features/ui/components/modals/compare-history-modal.tsx
index ac8b8c275..4a465da0e 100644
--- a/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/src/features/ui/components/modals/compare-history-modal.tsx
@@ -52,10 +52,10 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
                 </>
               )}
 
-              <div className='status__content' dangerouslySetInnerHTML={content} />
+              <div className='whitespace-normal p-0 pt-2.5 text-sm text-gray-700 dark:text-gray-500' dangerouslySetInnerHTML={content} />
 
               {poll && (
-                <div className='poll'>
+                <div>
                   <Stack>
                     {version.poll.options.map((option: any) => (
                       <HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>

From 6ccd7c1eed9350e585d229d2dd2f9d63af67d0a7 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 17:00:24 -0300
Subject: [PATCH 014/133] Change classname "reply-mentions-modal__accounts" to
 use only Tailwind

---
 src/features/ui/components/modals/reply-mentions-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index 69ae41acd..386402078 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -36,7 +36,7 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ composeId, onClose
       closeIcon={require('@tabler/icons/outline/arrow-left.svg')}
       closePosition='left'
     >
-      <div className='reply-mentions-modal__accounts'>
+      <div className='block min-h-[300px] flex-1 flex-row overflow-y-auto'>
         {mentions.map(accountId => <Account composeId={composeId} key={accountId} accountId={accountId} author={author === accountId} />)}
       </div>
     </Modal>

From 400d3f14252a45a8329e2baf48034512e67d1e3c Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 1 Nov 2024 17:06:07 -0300
Subject: [PATCH 015/133] Change classnames "remote-interaction-modal" to use
 only Tailwind

---
 .../ui/components/modals/unauthorized-modal.tsx       | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx
index d73c96884..f459d5e06 100644
--- a/src/features/ui/components/modals/unauthorized-modal.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.tsx
@@ -106,8 +106,8 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
         secondaryAction={isOpen ? onRegister : undefined}
         secondaryText={isOpen ? <FormattedMessage id='account.register' defaultMessage='Sign up' /> : undefined}
       >
-        <div className='remote-interaction-modal__content'>
-          <Form className='remote-interaction-modal__fields' onSubmit={onSubmit}>
+        <div className='flex flex-col gap-y-[10px]'>
+          <Form className='flex w-full flex-col gap-2.5' onSubmit={onSubmit}>
             <Input
               placeholder={intl.formatMessage(messages.accountPlaceholder)}
               name='remote_follow[acct]'
@@ -117,12 +117,14 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
               onChange={onAccountChange}
               required
             />
-            <Button type='submit' theme='primary'>{button}</Button>
+            <Button className='self-end' type='submit' theme='primary'>{button}</Button>
           </Form>
-          <div className='remote-interaction-modal__divider'>
+          <div className='m-0 -mx-2.5 flex items-center gap-2.5'>
+            <div className='flex-1 border-b border-gray-300 dark:border-gray-600' />
             <Text align='center'>
               <FormattedMessage id='remote_interaction.divider' defaultMessage='or' />
             </Text>
+            <div className='flex-1 border-b border-gray-300 dark:border-gray-600' />
           </div>
           {isOpen && (
             <Text size='lg' weight='medium'>
@@ -134,6 +136,7 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
     );
   };
 
+  
   if (action && features.remoteInteractions && features.federating) {
     return renderRemoteInteractions();
   }

From f24eb6452edbdcc4b29ce052a3bb1f5805e65369 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Sun, 3 Nov 2024 19:18:31 -0300
Subject: [PATCH 016/133] Change classnames "reply-mentions" to use only
 Tailwind

---
 src/components/status-reply-mentions.tsx           | 6 +++---
 src/features/compose/components/reply-mentions.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/status-reply-mentions.tsx b/src/components/status-reply-mentions.tsx
index 75eb8eab4..231727340 100644
--- a/src/components/status-reply-mentions.tsx
+++ b/src/components/status-reply-mentions.tsx
@@ -39,7 +39,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   // Rare, but it can happen.
   if (to.size === 0) {
     return (
-      <div className='reply-mentions'>
+      <div className='mb-1 text-sm text-gray-700 dark:text-gray-600'>
         <FormattedMessage
           id='reply_mentions.reply_empty'
           defaultMessage='Replying to post'
@@ -54,7 +54,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
       <Link
         key={account.id}
         to={`/@${account.acct}`}
-        className='reply-mentions__account max-w-[200px] truncate align-bottom'
+        className='inline-block max-w-[200px] truncate align-bottom text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue' style={{ direction: 'ltr' }}
         onClick={(e) => e.stopPropagation()}
       > {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(account.username)}
@@ -81,7 +81,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   }
 
   return (
-    <div className='reply-mentions'>
+    <div className='mb-1 text-sm text-gray-700 dark:text-gray-600'>
       <FormattedMessage
         id='reply_mentions.reply.hoverable'
         defaultMessage='<hover>Replying to</hover> {accounts}'
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index eb96b4b44..a2de52b9f 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -43,7 +43,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   if (to.size === 0) {
     return (
-      <a href='#' className='reply-mentions' onClick={handleClick}>
+      <a href='#' className='mb-1 text-sm text-gray-700 dark:text-gray-600' onClick={handleClick}>
         <FormattedMessage
           id='reply_mentions.reply_empty'
           defaultMessage='Replying to post'
@@ -55,7 +55,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   const accounts = to.slice(0, 2).map((acct: string) => {
     const username = acct.split('@')[0];
     return (
-      <span className='reply-mentions__account'> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
+      <span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue' style={{ direction: 'ltr' }}> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(username)}
       </span>
     );
@@ -68,7 +68,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   }
 
   return (
-    <a href='#' className='reply-mentions' onClick={handleClick}>
+    <a href='#' className='mb-1 text-sm text-gray-700 dark:text-gray-600' onClick={handleClick}>
       <FormattedMessage
         id='reply_mentions.reply'
         defaultMessage='Replying to {accounts}'

From bd8e7cf4fff11641290a61222dd469d1f3f25dcd Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Sun, 3 Nov 2024 19:58:47 -0300
Subject: [PATCH 017/133] Change preview-card to use only Tailwind

---
 src/components/preview-card.tsx | 26 ++++++++++++++------------
 src/utils/media.ts              |  5 +++++
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index fe51863c1..71d56bfb0 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -3,11 +3,13 @@ import { List as ImmutableList } from 'immutable';
 import React, { useState, useEffect } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
-import { HStack, Stack, Text, Icon } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { normalizeAttachment } from 'soapbox/normalizers';
 import { addAutoPlay } from 'soapbox/utils/media';
 import { getTextDirection } from 'soapbox/utils/rtl';
 
+import SvgIcon from './ui/icon/svg-icon';
+
 import type { Card as CardEntity, Attachment } from 'soapbox/types/entities';
 
 /** Props for `PreviewCard`. */
@@ -89,7 +91,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
     return (
       <div
         ref={setRef}
-        className='status-card__image status-card-video'
+        className='relative w-2/5 flex-none overflow-hidden'
         dangerouslySetInnerHTML={content}
         style={{ height }}
       />
@@ -106,7 +108,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
 
   const interactive = card.type !== 'link';
   horizontal = typeof horizontal === 'boolean' ? horizontal : interactive || embedded;
-  const className = clsx('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`);
+  const className = clsx('flex overflow-hidden rounded-lg border border-solid border-gray-200 text-sm text-gray-800 no-underline dark:border-gray-800 dark:text-gray-200', { horizontal, compact, interactive }, `status-card--${card.type}`);
   const ratio = getRatio(card);
   const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
 
@@ -135,7 +137,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       )}
       <HStack space={1} alignItems='center'>
         <Text tag='span' theme='muted'>
-          <Icon src={require('@tabler/icons/outline/link.svg')} />
+          <SvgIcon src={require('@tabler/icons/outline/link.svg')} />
         </Text>
         <Text tag='span' theme='muted' size='sm' direction={direction}>
           {card.provider_name}
@@ -160,7 +162,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
         width: horizontal ? width : undefined,
         height: horizontal ? height : undefined,
       }}
-      className='status-card__image-image'
+      className='block size-full bg-cover bg-center object-cover'
     />
   );
 
@@ -175,7 +177,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       }
 
       embed = (
-        <div className='status-card__image'>
+        <div className='relative w-2/5 flex-none overflow-hidden'>
           {canvas}
           {thumbnail}
 
@@ -183,9 +185,9 @@ const PreviewCard: React.FC<IPreviewCard> = ({
             <div className='flex items-center justify-center rounded-full bg-gray-500/90 px-4 py-3 shadow-md dark:bg-gray-700/90'>
               <HStack space={3} alignItems='center'>
                 <button onClick={handleEmbedClick} className='appearance-none text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'>
-                  <Icon
+                  <SvgIcon
                     src={iconVariant}
-                    className='size-6 text-inherit'
+                    className='absolute left-1/2 top-1/2 size-[30px] -translate-x-1/2 -translate-y-1/2 text-inherit'
                   />
                 </button>
 
@@ -197,9 +199,9 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                     rel='noopener'
                     className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'
                   >
-                    <Icon
+                    <SvgIcon
                       src={require('@tabler/icons/outline/external-link.svg')}
-                      className='size-6 text-inherit'
+                      className='absolute left-1/2 top-1/2 size-[30px] -translate-x-1/2 -translate-y-1/2 text-inherit'
                     />
                   </a>
                 )}
@@ -219,7 +221,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
   } else if (card.image) {
     embed = (
       <div className={clsx(
-        'status-card__image',
+        'relative overflow-hidden',
         'w-full flex-none rounded-l md:size-auto md:flex-auto',
         {
           'h-auto': horizontal,
@@ -236,7 +238,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
   return (
     <a
       href={card.url}
-      className={className}
+      className={clsx(className, 'cursor-pointer hover:bg-gray-100 hover:no-underline dark:hover:bg-primary-800/30')}
       target='_blank'
       rel='noopener'
       ref={setRef}
diff --git a/src/utils/media.ts b/src/utils/media.ts
index 9143061ff..b44f1eb64 100644
--- a/src/utils/media.ts
+++ b/src/utils/media.ts
@@ -63,6 +63,11 @@ const addAutoPlay = (html: string): string => {
     const document = domParser.parseFromString(html, 'text/html').documentElement;
     const iframe = document.querySelector('iframe');
 
+    if (iframe) {
+      iframe.style.width = '100%';
+      iframe.style.height = '100%';
+    }
+
     if (iframe) {
       const url = new URL(iframe.src);
       const provider = new URL(iframe.src).host;

From 1d8ab20ddbd973ded76cb039c3eabae8f0d63918 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 11:44:41 -0300
Subject: [PATCH 018/133] chore: commented out component due to missing styles

---
 src/components/fork-awesome-icon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/fork-awesome-icon.tsx b/src/components/fork-awesome-icon.tsx
index 09d5c8edb..e07cf165b 100644
--- a/src/components/fork-awesome-icon.tsx
+++ b/src/components/fork-awesome-icon.tsx
@@ -5,7 +5,7 @@
  * @see soapbox/components/icon
  */
 
-import clsx from 'clsx';
+
 import React from 'react';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
@@ -25,7 +25,7 @@ const ForkAwesomeIcon: React.FC<IForkAwesomeIcon> = ({ id, className, fixedWidth
     <i
       role='img'
       // alt={alt}
-      className={clsx('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
+      // className={clsx('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
       {...rest}
     />
   );

From 56fd528a39b2108a467c1af9920461afaadc12ce Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 11:46:43 -0300
Subject: [PATCH 019/133] Change className "status-card" in preview-card to use
 only Tailwind

---
 src/components/preview-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index 71d56bfb0..3b1c1796e 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -108,7 +108,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
 
   const interactive = card.type !== 'link';
   horizontal = typeof horizontal === 'boolean' ? horizontal : interactive || embedded;
-  const className = clsx('flex overflow-hidden rounded-lg border border-solid border-gray-200 text-sm text-gray-800 no-underline dark:border-gray-800 dark:text-gray-200', { horizontal, compact, interactive }, `status-card--${card.type}`);
+  const className = clsx('flex overflow-hidden rounded-lg border border-solid border-gray-200 text-sm text-gray-800 no-underline dark:border-gray-800 dark:text-gray-200', { horizontal, compact, interactive, 'flex flex-col md:flex-row': card.type === 'link' });
   const ratio = getRatio(card);
   const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
 

From e3457dd76005137c5a4e45c94b5ff41d2106c3db Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 11:53:19 -0300
Subject: [PATCH 020/133] Remove className "hover-ref-wrapper" that has no
 styling

---
 src/components/hover-ref-wrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hover-ref-wrapper.tsx b/src/components/hover-ref-wrapper.tsx
index 8d0aa1ecd..686e15ecb 100644
--- a/src/components/hover-ref-wrapper.tsx
+++ b/src/components/hover-ref-wrapper.tsx
@@ -47,7 +47,7 @@ export const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, childre
   return (
     <Elem
       ref={ref}
-      className={clsx('hover-ref-wrapper', className)}
+      className={clsx(className)}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleClick}

From 8e3d89ea75e433a5877d7b35b2caf99af9d1d95f Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 11:55:24 -0300
Subject: [PATCH 021/133] Remove className "hover-status-wrapper" that has no
 styling

---
 src/components/hover-status-wrapper.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/hover-status-wrapper.tsx b/src/components/hover-status-wrapper.tsx
index 685dbf3d9..3dd25d810 100644
--- a/src/components/hover-status-wrapper.tsx
+++ b/src/components/hover-status-wrapper.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
@@ -45,7 +44,7 @@ export const HoverStatusWrapper: React.FC<IHoverStatusWrapper> = ({ statusId, ch
   return (
     <Elem
       ref={ref}
-      className={clsx('hover-status-wrapper', className)}
+      className={className}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleClick}

From 19160af7dfc25fe53f2ffed08f27847f6c21b870 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 12:19:26 -0300
Subject: [PATCH 022/133] Change className "icon-button" to use only Tailwind

---
 src/components/icon-button.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx
index 4eb0dccca..610f2ba3c 100644
--- a/src/components/icon-button.tsx
+++ b/src/components/icon-button.tsx
@@ -66,9 +66,9 @@ const IconButton: React.FC<IIconButton> = ({
     }
   };
 
-  const classes = clsx(className, 'icon-button', {
-    active,
-    disabled,
+  const classes = clsx(className, 'inline-flex cursor-pointer items-center border-0 bg-transparent p-0 text-black opacity-40 transition-opacity duration-100 ease-in hover:opacity-60 hover:transition-colors hover:duration-200 focus:opacity-60 focus:outline-none focus:transition-colors focus:duration-200 dark:text-white', {
+    'opacity-60 outline-none transition-colors duration-200': active,
+    'opacity-20 cursor-default': disabled,
   });
 
   return (
@@ -89,10 +89,10 @@ const IconButton: React.FC<IIconButton> = ({
       disabled={disabled}
       type='button'
     >
-      <div>
+      <div className='flex items-center justify-center'>
         <Icon className={iconClassName} src={src} aria-hidden='true' />
       </div>
-      {text && <span className='icon-button__text'>{text}</span>}
+      {text && <span className='pl-0.5'>{text}</span>}
     </button>
   );
 };

From 80103b39b1aa601deac517fff325e321d8e25862 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 13:21:18 -0300
Subject: [PATCH 023/133] Change className "load-more" to use only Tailwind

---
 src/components/load-gap.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx
index 33ef63645..48aac0a06 100644
--- a/src/components/load-gap.tsx
+++ b/src/components/load-gap.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@@ -19,8 +19,8 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
   const handleClick = () => onClick(maxId);
 
   return (
-    <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-      <Icon src={require('@tabler/icons/outline/dots.svg')} />
+    <button className='m-0 box-border block w-full border-0 bg-transparent p-4 text-gray-900' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
+      <SvgIcon className='mx-auto' src={require('@tabler/icons/outline/dots.svg')} />
     </button>
   );
 };

From c72f2bc5ad2fdd0934128b5380e275d3bc1a0f8a Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 14:28:19 -0300
Subject: [PATCH 024/133] Change className "media-spoiler-video",
 "media-spoiler-audio" and "media-gallery" in status-media to use only
 Tailwind

---
 src/components/status-media.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index 2c96c0078..4b0829d52 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -40,15 +40,15 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   let media: JSX.Element | null = null;
 
   const renderLoadingMediaGallery = (): JSX.Element => {
-    return <div className='media_gallery' style={{ height: '285px' }} />;
+    return <div className='relative isolate box-border h-auto w-full overflow-hidden rounded-lg' style={{ height: '285px' }} />;
   };
 
   const renderLoadingVideoPlayer = (): JSX.Element => {
-    return <div className='media-spoiler-video' style={{ height: '285px' }} />;
+    return <div className='relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat' style={{ height: '285px' }} />;
   };
 
   const renderLoadingAudioPlayer = (): JSX.Element => {
-    return <div className='media-spoiler-audio' style={{ height: '285px' }} />;
+    return <div className='relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat' style={{ height: '285px' }} />;
   };
 
   const openMedia = (media: ImmutableList<Attachment>, index: number) => {

From fa1aba3c3acc1987acc17b95b78d0bbc7e67f793 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 14:33:38 -0300
Subject: [PATCH 025/133] Change className "regeneration-indicator" to use only
 Tailwind

---
 src/components/status-list.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx
index 838997435..dec04a67a 100644
--- a/src/components/status-list.tsx
+++ b/src/components/status-list.tsx
@@ -212,10 +212,12 @@ const StatusList: React.FC<IStatusList> = ({
 
   if (isPartial) {
     return (
-      <div className='regeneration-indicator'>
-        <div>
-          <div className='regeneration-indicator__label'>
-            <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading…' />
+      <div className='flex flex-1 cursor-default items-center justify-center rounded-lg p-5 text-center text-[16px] font-medium text-gray-900 sm:rounded-none'>
+        <div className='w-full bg-transparent pt-0'>
+          <div>
+            <strong className='mb-2.5 block text-gray-900'>
+              <FormattedMessage id='regeneration_indicator.label' defaultMessage='Loading…' />
+            </strong>
             <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
           </div>
         </div>

From bf0c15c4bcfff26ad17679fd8d4151654d7d24f1 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 14:57:24 -0300
Subject: [PATCH 026/133] Change classNames "empty-column-indicator" and
 "aliases" in features/aliases to use only Tailwind

---
 src/features/aliases/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index 36a3327de..1c15dd9fc 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -47,18 +47,23 @@ const Aliases = () => {
   const emptyMessage = <FormattedMessage id='empty_column.aliases' defaultMessage="You haven't created any account alias yet." />;
 
   return (
-    <Column className='aliases-settings-panel' label={intl.formatMessage(messages.heading)}>
+    <Column className='flex-1' label={intl.formatMessage(messages.heading)}>
       <CardHeader>
         <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
       </CardHeader>
       <Search />
       {
         loaded && searchAccountIds.size === 0 ? (
-          <div className='aliases__accounts empty-column-indicator'>
+          <div
+            className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300' style={{
+              minHeight: 'unset',
+              overflowY: 'unset',
+            }}
+          >
             <FormattedMessage id='empty_column.aliases.suggestions' defaultMessage='There are no account suggestions available for the provided term.' />
           </div>
         ) : (
-          <div className='aliases__accounts mb-4'>
+          <div className='mb-4 overflow-y-auto'>
             {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} aliases={aliases} />)}
           </div>
         )
@@ -66,7 +71,7 @@ const Aliases = () => {
       <CardHeader>
         <CardTitle title={intl.formatMessage(messages.subheading_aliases)} />
       </CardHeader>
-      <div className='aliases-settings-panel'>
+      <div className='flex-1'>
         <ScrollableList
           scrollKey='aliases'
           emptyMessage={emptyMessage}

From 0f92777007061c4adf9c0f31445020a7096b94d2 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 16:12:23 -0300
Subject: [PATCH 027/133] Change classNames "empty-column-indicator" and
 "slist__append" to use only Tailwind

---
 src/features/account-gallery/index.tsx             | 6 +++---
 src/features/compose/components/search-results.tsx | 6 +++---
 src/features/favourited-statuses/index.tsx         | 2 +-
 src/features/followers/index.tsx                   | 2 +-
 src/features/following/index.tsx                   | 2 +-
 src/features/group/group-gallery.tsx               | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index a899d8d17..e8707e543 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -105,7 +105,7 @@ const AccountGallery = () => {
   if (isUnavailable) {
     return (
       <Column>
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
         </div>
       </Column>
@@ -126,7 +126,7 @@ const AccountGallery = () => {
         ))}
 
         {!isLoading && attachments.size === 0 && (
-          <div className='empty-column-indicator col-span-2 sm:col-span-3'>
+          <div className='col-span-2 flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300 sm:col-span-3'>
             <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
           </div>
         )}
@@ -135,7 +135,7 @@ const AccountGallery = () => {
       </div>
 
       {isLoading && attachments.size === 0 && (
-        <div className='slist__append'>
+        <div className='relative flex flex-1 p-[30px_15px]'>
           <Spinner />
         </div>
       )}
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index 87e85fd1f..57f9cc694 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -132,7 +132,7 @@ const SearchResults = () => {
       searchResults = suggestions.map(suggestion => <AccountContainer key={suggestion.account} id={suggestion.account} />);
     } else if (loaded) {
       noResultsMessage = (
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage
             id='empty_column.search.accounts'
             defaultMessage='There are no people results for "{term}"'
@@ -174,7 +174,7 @@ const SearchResults = () => {
       resultsIds = trendingStatuses;
     } else if (loaded) {
       noResultsMessage = (
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage
             id='empty_column.search.statuses'
             defaultMessage='There are no posts results for "{term}"'
@@ -198,7 +198,7 @@ const SearchResults = () => {
       searchResults = trends.map(hashtag => <Hashtag key={hashtag.name} hashtag={hashtag} />);
     } else if (loaded) {
       noResultsMessage = (
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage
             id='empty_column.search.hashtags'
             defaultMessage='There are no hashtags results for "{term}"'
diff --git a/src/features/favourited-statuses/index.tsx b/src/features/favourited-statuses/index.tsx
index a9a2aa0a1..215e52823 100644
--- a/src/features/favourited-statuses/index.tsx
+++ b/src/features/favourited-statuses/index.tsx
@@ -67,7 +67,7 @@ const Favourites: React.FC<IFavourites> = ({ params }) => {
   if (isUnavailable) {
     return (
       <Column>
-        <div className='empty-column-indicator'>
+        <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
           <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
         </div>
       </Column>
diff --git a/src/features/followers/index.tsx b/src/features/followers/index.tsx
index 8847beb11..8b2657c63 100644
--- a/src/features/followers/index.tsx
+++ b/src/features/followers/index.tsx
@@ -44,7 +44,7 @@ const Followers: React.FC<IFollowers> = ({ params }) => {
 
   if (isUnavailable) {
     return (
-      <div className='empty-column-indicator'>
+      <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
         <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
       </div>
     );
diff --git a/src/features/following/index.tsx b/src/features/following/index.tsx
index f5c4c3475..eb7d42a27 100644
--- a/src/features/following/index.tsx
+++ b/src/features/following/index.tsx
@@ -44,7 +44,7 @@ const Following: React.FC<IFollowing> = ({ params }) => {
 
   if (isUnavailable) {
     return (
-      <div className='empty-column-indicator'>
+      <div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
         <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
       </div>
     );
diff --git a/src/features/group/group-gallery.tsx b/src/features/group/group-gallery.tsx
index a2fd17532..ce83d2f86 100644
--- a/src/features/group/group-gallery.tsx
+++ b/src/features/group/group-gallery.tsx
@@ -77,7 +77,7 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
         ))}
 
         {(!isLoading && attachments.length === 0) && (
-          <div className='empty-column-indicator col-span-2 sm:col-span-3'>
+          <div className='col-span-2 flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300 sm:col-span-3'>
             <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
           </div>
         )}

From ceb00418a472c0b3cf7da19a33de551fed6beb1c Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 17:10:56 -0300
Subject: [PATCH 028/133] Change classNames "privacy-dropdown" to use only
 Tailwind

---
 .../compose/components/privacy-dropdown.tsx    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 2571589b7..234119a62 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -37,9 +37,10 @@ interface IPrivacyDropdownMenu {
   onClose: () => void;
   onChange: (value: string | null) => void;
   unavailable?: boolean;
+  active: boolean;
 }
 
-const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, placement, value, onClose, onChange }) => {
+const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, placement, value, onClose, onChange, active }) => {
   const node = useRef<HTMLDivElement>(null);
   const focusedItem = useRef<HTMLDivElement>(null);
 
@@ -120,15 +121,15 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
         // It should not be transformed when mounting because the resulting
         // size will be used to determine the coordinate of the menu by
         // react-overlays
-        <div className={clsx('privacy-dropdown__dropdown', placement)} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
+        <div className={clsx('absolute z-[1000] ml-10 overflow-hidden rounded-md bg-white text-sm shadow-lg black:border black:border-gray-800 black:bg-black dark:bg-gray-900', { 'block shadow-md': active })} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined, transformOrigin: placement === 'top' ? '50% 100%' : '50% 0' }} role='listbox' ref={node}>
           {items.map(item => (
-            <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
-              <div className='privacy-dropdown__option__icon'>
+            <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('group flex cursor-pointer p-2.5 text-sm text-gray-700 hover:bg-gray-100 black:hover:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800', { 'bg-gray-100 dark:bg-gray-800 black:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700': item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
+              <div className='mr-2.5 flex items-center justify-center rtl:ml-2.5 rtl:mr-0'>
                 <Icon src={item.icon} />
               </div>
 
-              <div className='privacy-dropdown__option__content'>
-                <strong>{item.text}</strong>
+              <div className={clsx('flex-auto text-primary-600 group-hover:text-black dark:text-primary-400 group-hover:dark:text-white', { 'group-active:text-black group-active:dark:text-white': item.value === value })}>
+                <strong className='block font-medium text-black dark:text-white'>{item.text}</strong>
                 {item.meta}
               </div>
             </div>
@@ -239,8 +240,8 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const valueOption = options.find(item => item.value === value);
 
   return (
-    <div className={clsx('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
-      <div className={clsx('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
+    <div onKeyDown={handleKeyDown} ref={node}>
+      <div className={clsx({ 'rouded-t-md': placement === 'top' && open })}>
         <IconButton
           className={clsx({
             'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !open,
@@ -261,6 +262,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
           onClose={handleClose}
           onChange={onChange}
           placement={placement}
+          active={open}
         />
       </Overlay>
     </div>

From 1db4edf6e23ebe5d875ec94b7537f08d693ae401 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 20:07:36 -0300
Subject: [PATCH 029/133] Change "upload" to use only Tailwind

---
 src/components/upload.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index aa61483bc..8f5875b9e 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -145,6 +145,7 @@ const Upload: React.FC<IUpload> = ({
   const y = focusY ? ((focusY / -2) + .5) * 100 : undefined;
   const mediaType = media.type;
   const mimeType = media.pleroma.get('mime_type') as string | undefined;
+  const isMediaCover = mediaType === 'video' || mediaType === 'audio';
 
   const uploadIcon = mediaType === 'unknown' && (
     <Icon
@@ -153,9 +154,20 @@ const Upload: React.FC<IUpload> = ({
     />
   );
 
+  const bgUrl = () => {
+    switch (mediaType) {
+      case 'image':
+        return `url(${media.preview_url})`;
+      case 'video':
+        return 'url(\'../assets/images/video-placeholder.png\')';
+      default:
+        return 'url(../assets/images/audio-placeholder.png)';
+    }
+  };
+
   return (
     <div
-      className='compose-form__upload'
+      className='relative m-[5px] min-w-[40%] flex-[1_1_0%] overflow-hidden rounded'
       tabIndex={0}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -170,10 +182,10 @@ const Upload: React.FC<IUpload> = ({
       <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
         {({ scale }) => (
           <div
-            className={clsx('compose-form__upload-thumbnail', mediaType)}
+            className={clsx('relative h-40 w-full overflow-hidden bg-contain bg-center bg-no-repeat', { 'bg-cover ': isMediaCover })}
             style={{
               transform: `scale(${scale})`,
-              backgroundImage: mediaType === 'image' ? `url(${media.preview_url})` : undefined,
+              backgroundImage: bgUrl(),
               backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined }}
           >
             <HStack className='absolute right-2 top-2 z-10' space={2}>
@@ -200,12 +212,13 @@ const Upload: React.FC<IUpload> = ({
             </HStack>
 
             {onDescriptionChange && (
-              <div className={clsx('compose-form__upload-description', { active })}>
+              <div className={clsx('absolute inset-x-0 bottom-0 z-[2px] bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 p-2.5 opacity-0 transition-opacity duration-100 ease-linear', { 'opacity-100': active })}>
                 <label>
                   <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
 
                   <textarea
                     placeholder={intl.formatMessage(messages.description)}
+                    className='m-0 w-full rounded-md border border-solid border-white/25 bg-transparent p-2.5 text-sm text-white placeholder:text-white/60'
                     value={description}
                     maxLength={descriptionLimit}
                     onFocus={handleInputFocus}
@@ -230,9 +243,9 @@ const Upload: React.FC<IUpload> = ({
               </span>
             )}
 
-            <div className='compose-form__upload-preview'>
+            <div className='absolute inset-0 z-[-1] size-full'>
               {mediaType === 'video' && (
-                <video autoPlay playsInline muted loop>
+                <video className='size-full object-cover' autoPlay playsInline muted loop>
                   <source src={media.preview_url} />
                 </video>
               )}

From 9c1d5260b49bb18811022b5820de92fe9bded8fe Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 20:37:05 -0300
Subject: [PATCH 030/133] Change classNames "status-check" to use only Tailwind

---
 .../report/components/status-check-box.tsx      | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 96df936a2..2b5b0539a 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -1,12 +1,13 @@
+import clsx from 'clsx';
 import noop from 'lodash/noop';
 import React, { Suspense } from 'react';
 
 import { toggleStatusReport } from 'soapbox/actions/reports';
 import StatusContent from 'soapbox/components/status-content';
 import { Toggle } from 'soapbox/components/ui';
+import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
-import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
 
 interface IStatusCheckBox {
   id: string;
@@ -20,6 +21,8 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
 
   const onToggle: React.ChangeEventHandler<HTMLInputElement> = (e) => dispatch(toggleStatusReport(id, e.target.checked));
 
+  const mediaType = status?.media_attachments.get(0)?.type;
+
   if (!status || status.reblog) {
     return null;
   }
@@ -70,13 +73,17 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
   }
 
   return (
-    <div className='status-check-box'>
-      <div className='status-check-box__status'>
+    <div className='flex items-center justify-between'>
+      <div className='py-2'>
         <StatusContent status={status} />
-        <Suspense>{media}</Suspense>
+        <Suspense>
+          <div className={clsx('max-w-[250px]', { 'mt-2': mediaType === 'audio' || mediaType === 'video' })}>
+            {media}
+          </div>
+        </Suspense>
       </div>
 
-      <div className='status-check-box-toggle'>
+      <div className='flex flex-[0_0_auto] items-center justify-center p-2.5'>
         <Toggle checked={checked} onChange={onToggle} disabled={disabled} />
       </div>
     </div>

From ada9e53ff25f0ec231e5ad72fd05fa21e98a4080 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 21:41:18 -0300
Subject: [PATCH 031/133] Fix action-modal

---
 .../ui/components/modals/actions-modal.tsx       | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 0898a80b2..0e873b20b 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
-import Icon from 'soapbox/components/icon';
 import { HStack } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator';
 
 import Motion from '../../util/optional-motion';
@@ -36,10 +36,10 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
           {...compProps}
           space={2.5}
           data-index={i}
-          className={clsx('w-full', { active, 'text-danger-600 dark:text-danger-400': destructive })}
+          className={clsx('flex w-full items-center px-4 py-3 text-left text-gray-700 no-underline hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { active, 'text-danger-600 dark:text-danger-400': destructive })}
           element={Comp}
         >
-          {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
+          {icon && <SvgIcon title={text} className='size-6 min-w-5 stroke-[1.5]' src={icon} role='presentation' tabIndex={-1} />}
           <div>
             <div className={clsx({ 'font-medium': !!meta })}>{text}</div>
             <div>{meta}</div>
@@ -52,18 +52,22 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
   return (
     <Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
       {({ top }) => (
-        <div className='pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900' style={{ top: `${top}%` }}>
+        <div className='pointer-events-auto relative z-[9999] m-auto  flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900' style={{ top: `${top}%` }}>
           {status && (
             <ReplyIndicator className='max-h-[300px] overflow-y-auto rounded-b-none' status={status} hideActions />
           )}
 
-          <ul className={clsx({ 'max-h-[calc(80vh-75px)]': !!status }, 'my-2 shrink-0 overflow-y-auto')}>
+          <ul className={clsx({ ' max-h-[calc(80vh-75px)]': !!status }, 'my-2 max-h-[calc(100vh-147px)] shrink-0 overflow-y-auto')}>
             {actions && actions.map(renderAction)}
 
             <li className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />
 
             <li>
-              <button type='button' className='w-full text-center text-gray-700 hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800' onClick={onClose}>
+              <button
+                type='button'
+                className='flex w-full items-center justify-center px-4 py-3 text-left text-gray-700 no-underline hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800'
+                onClick={onClose}
+              >
                 <FormattedMessage id='lightbox.close' defaultMessage='Close' />
               </button>
             </li>

From 203979113c3615d048a0125ec1cbe5daabc996fa Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 4 Nov 2024 22:01:03 -0300
Subject: [PATCH 032/133] Change classNames "search" in location-search to use
 only Tailwind

---
 src/components/location-search.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index b3c9430b6..8bd4a0348 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -6,10 +6,10 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { locationSearch } from 'soapbox/actions/events';
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import Icon from 'soapbox/components/icon';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import AutosuggestLocation from './autosuggest-location';
+import SvgIcon from './ui/icon/svg-icon';
 
 const noOp = () => {};
 
@@ -85,7 +85,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
   }, [value]);
 
   return (
-    <div className='search'>
+    <div className='relative'>
       <AutosuggestInput
         className='rounded-full'
         placeholder={intl.formatMessage(messages.placeholder)}
@@ -99,9 +99,9 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         onKeyDown={handleKeyDown}
         renderSuggestion={AutosuggestLocation}
       />
-      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+      <div role='button' tabIndex={0} className='focus:!outline-0' onClick={handleClear}>
+        <SvgIcon src={require('@tabler/icons/outline/search.svg')} className={clsx('pointer-events-none absolute right-4 top-1/2 z-[2] inline-block size-[18px] -translate-y-1/2 cursor-default text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'opacity-100': isEmpty() })} />
+        <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('pointer-events-none absolute right-4 top-1/2 z-[2] inline-block size-[22px] -translate-y-1/2 cursor-pointer text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );

From 3365b8a28eef0d9278962c07231d89a0dae7017e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 13:12:18 -0300
Subject: [PATCH 033/133] Change classNames "thumb-navigation" to use only
 Tailwind

---
 src/components/thumb-navigation-link.tsx | 2 +-
 src/components/thumb-navigation.tsx      | 9 ++++++++-
 src/styles/tailwind.css                  | 8 ++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/thumb-navigation-link.tsx b/src/components/thumb-navigation-link.tsx
index f824392e5..cdbc5f739 100644
--- a/src/components/thumb-navigation-link.tsx
+++ b/src/components/thumb-navigation-link.tsx
@@ -32,7 +32,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
   const icon = (active && activeSrc) || src;
 
   return (
-    <NavLink to={to} exact={exact} className='thumb-navigation__link'>
+    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-2.5 text-lg text-gray-600'>
       {count !== undefined ? (
         <IconWithCounter
           src={icon}
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index 08d792e22..9ec12e7ce 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -45,7 +45,14 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   };
 
   return (
-    <div className='thumb-navigation'>
+    <div
+      className='hide-scrollbar fixed inset-x-0 bottom-0 z-50 flex w-full border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/90 dark:border-gray-800 dark:bg-primary-900/90 lg:hidden' style={{
+        paddingBottom: 'env(safe-area-inset-bottom)', // iOS PWA
+        overflowX: 'auto',
+        scrollbarWidth: 'thin',
+        scrollbarColor: '#fff transparent',
+      }}
+    >
       <ThumbNavigationLink
         src={require('@tabler/icons/outline/home.svg')}
         activeSrc={require('@tabler/icons/filled/home.svg')}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index e74538275..8a370cd9d 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,14 @@
 @tailwind utilities;
 
 @layer utilities {
+  .hide-scrollbar {
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none; /* iOS PWA, Chrome */
+  }
+
   .break-word-nested > p {
     word-break: break-word;
   }

From 7763135428ed0713f47424309fd9cf79ecbbdf1b Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 15:06:51 -0300
Subject: [PATCH 034/133] Change classNames "autosuggest-emoji" to use only
 Tailwind

---
 src/components/autosuggest-emoji.tsx | 2 +-
 src/styles/tailwind.css              | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx
index 26f507b72..3c4cc3df2 100644
--- a/src/components/autosuggest-emoji.tsx
+++ b/src/components/autosuggest-emoji.tsx
@@ -28,7 +28,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
   }
 
   return (
-    <div className='autosuggest-emoji' data-testid='emoji'>
+    <div className='autosuggest-emoji flex flex-row items-center justify-start text-[14px] leading-[18px]' data-testid='emoji'>
       <img
         className='emojione'
         src={url}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 8a370cd9d..4abf3a09f 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,13 @@
 @tailwind utilities;
 
 @layer utilities {
+  .autosuggest-emoji > img{
+    display: block;
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+  }
+
   .hide-scrollbar {
     scrollbar-width: none; /* Firefox */
   }

From 05745be0fa842d8c19009bf08f9058308bef3728 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 15:18:49 -0300
Subject: [PATCH 035/133] Change classNames "compose-form__warning" to use only
 Tailwind

---
 src/features/compose/components/warning.tsx |  2 +-
 src/styles/tailwind.css                     | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/features/compose/components/warning.tsx b/src/features/compose/components/warning.tsx
index 28f7edf64..7cf310933 100644
--- a/src/features/compose/components/warning.tsx
+++ b/src/features/compose/components/warning.tsx
@@ -11,7 +11,7 @@ interface IWarning {
 const Warning: React.FC<IWarning> = ({ message }) => (
   <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
     {({ opacity, scaleX, scaleY }) => (
-      <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+      <div className='compose-form-warning mb-2.5 rounded bg-accent-300 px-2.5 py-2 text-xs text-white shadow-md' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
         {message}
       </div>
     )}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 4abf3a09f..9034e1ab0 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,23 @@
 @tailwind utilities;
 
 @layer utilities {
+  .compose-form-warning {
+    strong {
+      @apply font-medium;
+    }
+
+    a {
+      font-weight: 500;
+      text-decoration: underline;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
   .autosuggest-emoji > img{
     display: block;
     margin-right: 8px;

From 91a4051fa57d6846e1a483d26b330118c014bc63 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 15:22:53 -0300
Subject: [PATCH 036/133] Update inset value in dark:inset

---
 src/features/chats/components/chat-page/chat-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx
index bb20afa80..8c8366506 100644
--- a/src/features/chats/components/chat-page/chat-page.tsx
+++ b/src/features/chats/components/chat-page/chat-page.tsx
@@ -68,7 +68,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
           data-testid='chat-page'
         >
           <Stack
-            className={clsx('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 black:bg-black dark:bg-gray-900 dark:bg-none sm:col-span-3', {
+            className={clsx('col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 black:bg-black dark:inset-0 dark:bg-gray-900 dark:bg-none sm:col-span-3', {
               'hidden sm:block': isSidebarHidden,
             })}
           >

From d39f7386418bb301410a69eb7bce0902c2c1f13c Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 15:23:30 -0300
Subject: [PATCH 037/133] Change classNames "compose-form__modifiers" to use
 only Tailwind

---
 src/features/compose/components/compose-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 8b0f7b19a..3617ea56b 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -207,7 +207,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   ), [features, id]);
 
   const composeModifiers = !condensed && (
-    <Stack space={4} className='compose-form__modifiers'>
+    <Stack space={4} className='text-sm text-gray-900'>
       <UploadForm composeId={id} onSubmit={handleSubmit} />
       <PollForm composeId={id} />
 

From e2043fdfc7a804cc0349bd51478aac4f56787b14 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 15:25:42 -0300
Subject: [PATCH 038/133] Remove unnecessary space

---
 src/features/ui/components/modals/unauthorized-modal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx
index f459d5e06..0b943e6a7 100644
--- a/src/features/ui/components/modals/unauthorized-modal.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.tsx
@@ -136,7 +136,6 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
     );
   };
 
-  
   if (action && features.remoteInteractions && features.federating) {
     return renderRemoteInteractions();
   }

From 46e849d8e393e2972acffc98807c58db1e65ccf4 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 15:38:47 -0300
Subject: [PATCH 039/133] Change classname "divide-x-dot" to custom Tailwind

---
 src/styles/tailwind.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9034e1ab0..efc52c716 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,12 @@
 @tailwind utilities;
 
 @layer utilities {
+  .divide-x-dot > *:not(:last-child)::after {
+    content: '·';
+    padding-right: 4px;
+    padding-left: 4px;
+  }
+
   .compose-form-warning {
     strong {
       @apply font-medium;

From 348a4f4bbfd56dd6ad0c947e6ba4a7ed202f4694 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 16:03:15 -0300
Subject: [PATCH 040/133] Change classname "image-loader" to custom Tailwind

---
 src/features/ui/components/image-loader.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/features/ui/components/image-loader.tsx b/src/features/ui/components/image-loader.tsx
index 6f2156ab1..f71ad0f08 100644
--- a/src/features/ui/components/image-loader.tsx
+++ b/src/features/ui/components/image-loader.tsx
@@ -135,16 +135,16 @@ class ImageLoader extends React.PureComponent<IImageLoader> {
     const { alt, src, width, height, onClick } = this.props;
     const { loading } = this.state;
 
-    const className = clsx('image-loader', {
-      'image-loader--loading': loading,
-      'image-loader--amorphous': !this.hasSize(),
-    });
+    const className = 'relative size-full flex items-center justify-center flex-col';
 
     return (
       <div className={className}>
         {loading ? (
           <canvas
-            className='image-loader__preview-canvas'
+            className={clsx('max-h-[80%] max-w-full object-contain', { 'hidden': !this.hasSize() })}
+            style={{
+              background: 'url(\'../assets/images/void.png\') repeat',
+            }}
             ref={this.setCanvasRef}
             width={width}
             height={height}

From 5e857d824e52f85bcc43263a462250c7a17fe267 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 19:16:39 -0300
Subject: [PATCH 041/133] Change class name "image-loader" to custom Tailwind
 and remove unused class name

---
 src/features/forms/index.tsx | 6 +++---
 src/styles/tailwind.css      | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/features/forms/index.tsx b/src/features/forms/index.tsx
index d7f3cff9c..faeabacdd 100644
--- a/src/features/forms/index.tsx
+++ b/src/features/forms/index.tsx
@@ -24,7 +24,7 @@ export const InputContainer: React.FC<IInputContainer> = (props) => {
   return (
     <div className={containerClass}>
       {props.children}
-      {props.hint && <span className='hint'>{props.hint}</span>}
+      {props.hint && <span>{props.hint}</span>}
     </div>
   );
 };
@@ -45,10 +45,10 @@ export const LabelInputContainer: React.FC<ILabelInputContainer> = ({ label, hin
   return (
     <div className='label_input'>
       <label htmlFor={id}>{label}</label>
-      <div className='label_input__wrapper'>
+      <div>
         {childrenWithProps}
       </div>
-      {hint && <span className='hint'>{hint}</span>}
+      {hint && <span>{hint}</span>}
     </div>
   );
 };
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index efc52c716..f030edc6a 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,12 @@
 @tailwind utilities;
 
 @layer utilities {
+  .input.with_label.toggle .label_input {
+    display: flex;
+    font-size: 14px;
+    align-items: center;
+  }
+
   .divide-x-dot > *:not(:last-child)::after {
     content: '·';
     padding-right: 4px;

From 4f9b9b82a836b37bd63ba9e2bb631db8c446c120 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 19:23:38 -0300
Subject: [PATCH 042/133] Change classname "mention" to custom Tailwind

---
 src/styles/tailwind.css   | 4 ++++
 src/styles/utilities.scss | 4 ----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index f030edc6a..9a17aa0d3 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,10 @@
 @tailwind utilities;
 
 @layer utilities {
+  .mention {
+    @apply text-primary-600 dark:text-accent-blue hover:underline;
+  }
+
   .input.with_label.toggle .label_input {
     display: flex;
     font-size: 14px;
diff --git a/src/styles/utilities.scss b/src/styles/utilities.scss
index 8172e0825..c40b6a037 100644
--- a/src/styles/utilities.scss
+++ b/src/styles/utilities.scss
@@ -12,10 +12,6 @@
   padding-left: 4px;
 }
 
-.mention {
-  @apply text-primary-600 dark:text-accent-blue hover:underline;
-}
-
 .emoji-lg img.emojione {
   width: 36px !important;
   height: 36px !important;

From 73fe3047f5e3756bf0c8e63d9f3a5e778da2b284 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 20:29:26 -0300
Subject: [PATCH 043/133] Change classname "error-column" to custom Tailwind

---
 .../ui/components/column-forbidden.tsx        |  2 +-
 src/styles/components/columns.scss            | 12 +----------
 src/styles/tailwind.css                       | 21 +++++++++++++++++++
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/features/ui/components/column-forbidden.tsx b/src/features/ui/components/column-forbidden.tsx
index 86d4e7ab1..56b443eac 100644
--- a/src/features/ui/components/column-forbidden.tsx
+++ b/src/features/ui/components/column-forbidden.tsx
@@ -13,7 +13,7 @@ const ColumnForbidden = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
-      <div className='error-column'>
+      <div className='error-column flex min-h-[160px] flex-1 flex-col items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
         {intl.formatMessage(messages.body)}
       </div>
     </Column>
diff --git a/src/styles/components/columns.scss b/src/styles/components/columns.scss
index dc0b1dc75..62d9fc266 100644
--- a/src/styles/components/columns.scss
+++ b/src/styles/components/columns.scss
@@ -13,14 +13,4 @@
   a {
     @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
   }
-}
-
-.error-column {
-  flex-direction: column;
-
-  .svg-icon {
-    width: 70px;
-    height: 70px;
-    margin-bottom: 30px;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9a17aa0d3..c53ba4927 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,27 @@
 @tailwind utilities;
 
 @layer utilities {
+  .error-column > span {
+      @apply max-w-[400px];
+    }
+    
+  .error-column {
+    .svg-icon {
+      width: 70px;
+      height: 70px;
+      margin-bottom: 30px;
+    }
+
+    @supports (display: grid) {
+      contain: strict;
+    }
+  
+    a {
+      @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
+    }
+
+  }
+
   .mention {
     @apply text-primary-600 dark:text-accent-blue hover:underline;
   }

From 0de1f24d24a4a461b6f71f7513f893782d0829d7 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 20:58:26 -0300
Subject: [PATCH 044/133] Remove unused class name

---
 src/features/status/components/detailed-status.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 4df65eb22..d69176c48 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -99,7 +99,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   if (actualStatus.quote) {
     if (actualStatus.pleroma.get('quote_visible', true) === false) {
       quote = (
-        <div className='quoted-actualStatus-tombstone'>
+        <div>
           <p><FormattedMessage id='status.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
         </div>
       );
@@ -115,8 +115,8 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   }
 
   return (
-    <div className='border-box'>
-      <div ref={node} className='detailed-actualStatus' tabIndex={-1}>
+    <div className='box-border'>
+      <div ref={node} tabIndex={-1}>
         {renderStatusInfo()}
 
         <div className='mb-4'>

From 038f3a13edb89c520c1b14054f1a2f8819d095fc Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 20:59:07 -0300
Subject: [PATCH 045/133] Change classname "focusable" to custom Tailwind

---
 src/styles/tailwind.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index c53ba4927..1d1abc969 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,12 @@
 @tailwind utilities;
 
 @layer utilities {
+  .focusable:focus,
+  .focusable-within:focus-within {
+    outline: 0;
+    @apply ring-2 ring-primary-300;
+  }
+
   .error-column > span {
       @apply max-w-[400px];
     }

From 3345b24451483e8d43d48564e07d8cf889e0c10e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 21:22:40 -0300
Subject: [PATCH 046/133] Remove unused class name

---
 src/features/filters/edit-filter.tsx | 2 +-
 src/features/filters/index.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx
index 3501542ac..d2bae33f7 100644
--- a/src/features/filters/edit-filter.tsx
+++ b/src/features/filters/edit-filter.tsx
@@ -177,7 +177,7 @@ const EditFilter: React.FC<IEditFilter> = ({ params }) => {
   if (notFound) return <MissingIndicator />;
 
   return (
-    <Column className='filter-settings-panel' label={intl.formatMessage(messages.subheading_add_new)}>
+    <Column label={intl.formatMessage(messages.subheading_add_new)}>
       <Form onSubmit={handleAddNew}>
         <FormGroup labelText={intl.formatMessage(messages.title)}>
           <Input
diff --git a/src/features/filters/index.tsx b/src/features/filters/index.tsx
index 52e647cef..fa54f6f69 100644
--- a/src/features/filters/index.tsx
+++ b/src/features/filters/index.tsx
@@ -54,7 +54,7 @@ const Filters = () => {
   const emptyMessage = <FormattedMessage id='empty_column.filters' defaultMessage="You haven't created any muted words yet." />;
 
   return (
-    <Column className='filter-settings-panel' label={intl.formatMessage(messages.heading)}>
+    <Column label={intl.formatMessage(messages.heading)}>
       <HStack className='mb-4' space={2} justifyContent='end'>
         <Button
           to='/filters/new'

From f476d6c78cf373c38e349f5e249da1912b2e59df Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 5 Nov 2024 23:14:39 -0300
Subject: [PATCH 047/133] Change classNames "svg-icon--backspace" and
 "search__icon" in "search" component to use only Tailwind and change
 "search__icon" to custom Tailwind

---
 src/features/aliases/components/search.tsx     |  4 ++--
 src/features/list-editor/components/search.tsx |  4 ++--
 src/styles/tailwind.css                        | 11 +++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index cef6a1fec..122329656 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
-import Icon from 'soapbox/components/icon';
 import { Button } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -53,7 +53,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+          <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-default text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index 71f136247..c02f08ef8 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists';
-import Icon from 'soapbox/components/icon';
 import { Button, Form, HStack, Input } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -45,7 +45,7 @@ const Search = () => {
             placeholder={intl.formatMessage(messages.search)}
           />
           <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+            <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-pointer text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
           </div>
         </label>
 
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 1d1abc969..49e73944e 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,17 @@
 @tailwind utilities;
 
 @layer utilities {
+  .search__icon {
+    &::-moz-focus-inner {
+      border: 0;
+    }
+  
+    &::-moz-focus-inner,
+    &:focus {
+      outline: 0 !important;
+    }
+  }
+
   .focusable:focus,
   .focusable-within:focus-within {
     outline: 0;

From aa232ed51ac5009fb4815a1418e49270554c38ec Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 01:04:29 -0300
Subject: [PATCH 048/133] Fix anchor warning

---
 src/components/sidebar-menu.tsx               | 14 ++++----
 src/features/about/index.tsx                  | 24 +++++++------
 src/features/backups/index.tsx                | 13 ++++---
 .../compose/components/reply-mentions.tsx     | 36 ++++++++++---------
 .../components/crypto-address.tsx             | 11 +++---
 .../event/components/event-header.tsx         | 26 +++++++-------
 src/features/event/event-information.tsx      | 11 +++---
 .../components/restricted-instance.tsx        | 16 +++++----
 src/styles/tailwind.css                       |  4 +++
 9 files changed, 91 insertions(+), 64 deletions(-)

diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index c6bf88edb..4aacc8304 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -9,7 +9,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { closeSidebar } from 'soapbox/actions/sidebar';
 import { useAccount } from 'soapbox/api/hooks';
 import Account from 'soapbox/components/account';
-import { Stack, Divider, HStack, Icon, IconButton, Text, Button } from 'soapbox/components/ui';
+import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
 import ProfileStats from 'soapbox/features/ui/components/profile-stats';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
@@ -122,11 +122,13 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   };
 
   const renderAccount = (account: AccountEntity) => (
-    <Button to='#' className='!block !border-none !p-0 !py-2 !text-primary-600  hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleSwitchAccount(account)} key={account.id}>
-      <div className='pointer-events-none'>
-        <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
-      </div>
-    </Button>
+    <Link to={'/'} className='inline-flex'>
+      <button className='button-theme-muted !block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleSwitchAccount(account)} key={account.id}>
+        <div className='pointer-events-none max-w-[288px]'>
+          <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
+        </div>
+      </button>
+    </Link>
   );
 
   React.useEffect(() => {
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index a4816fb9e..cbea61856 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about';
 import { Navlinks } from 'soapbox/components/navlinks';
-import { Button, Card } from 'soapbox/components/ui';
+import { Card } from 'soapbox/components/ui';
 import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
 
 import { languages } from '../preferences';
@@ -42,18 +42,22 @@ const AboutPage: React.FC = () => {
       {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
-          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={() => setLocale(defaultLocale)}>
-            {/* @ts-ignore */}
-            {languages[defaultLocale] || defaultLocale}
-          </Button>
+          <Link to={'/'} className='inline-flex'>
+            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(defaultLocale)}>
+              {/* @ts-ignore */}
+              {languages[defaultLocale] || defaultLocale}
+            </button>
+          </Link>
         </li>
         {
           pageLocales?.map(locale => (
             <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
-              <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={() => setLocale(locale)}>
-                {/* @ts-ignore */}
-                {languages[locale] || locale}
-              </Button>
+              <Link to={'/'} className='inline-flex'>
+                <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(locale)}>
+                  {/* @ts-ignore */}
+                  {languages[locale] || locale}
+                </button>
+              </Link>
             </li>
           ))
         }
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index 72f736d8b..1a3c79927 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups';
 import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
@@ -78,11 +79,13 @@ const Backups = () => {
     <Card variant='rounded' size='lg'>
       {intl.formatMessage(messages.emptyMessage, {
         action: (
-          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleCreateBackup}>
-            <Text tag='span' theme='primary' size='sm' className='hover:underline'>
-              {intl.formatMessage(messages.emptyMessageAction)}
-            </Text>
-          </Button>
+          <Link to={'/'} className='inline-flex'>
+            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleCreateBackup}>
+              <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+                {intl.formatMessage(messages.emptyMessageAction)}
+              </Text>
+            </button>
+          </Link>
         ),
       })}
     </Card>
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index 686994713..1c8017e57 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
-import { Button } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks';
 import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
 import { makeGetStatus } from 'soapbox/selectors';
@@ -44,12 +44,14 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   if (to.size === 0) {
     return (
-      <Button to='#' className='mb-1 cursor-pointer !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600' theme='muted' onClick={handleClick}>
-        <FormattedMessage
-          id='reply_mentions.reply_empty'
-          defaultMessage='Replying to post'
-        />
-      </Button>
+      <Link to={'/'} className='inline-flex'>
+        <button className='button-theme-muted mb-1 cursor-pointer space-x-2 !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
+          <FormattedMessage
+            id='reply_mentions.reply_empty'
+            defaultMessage='Replying to post'
+          />
+        </button>
+      </Link>
     );
   }
 
@@ -69,15 +71,17 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   }
 
   return (
-    <Button to='#' className='mb-1 cursor-pointer !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent  focus:ring-offset-0 dark:!text-gray-600' theme='muted' onClick={handleClick}>
-      <FormattedMessage
-        id='reply_mentions.reply'
-        defaultMessage='Replying to {accounts}'
-        values={{
-          accounts: <FormattedList type='conjunction' value={accounts} />,
-        }}
-      />
-    </Button>
+    <Link to={'/'} className='inline-flex'>
+      <button className='button-theme-muted mb-1 cursor-pointer space-x-2 !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent focus:ring-offset-0  dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
+        <FormattedMessage
+          id='reply_mentions.reply'
+          defaultMessage='Replying to {accounts}'
+          values={{
+            accounts: <FormattedList type='conjunction' value={accounts} />,
+          }}
+        />
+      </button>
+    </Link>
   );
 };
 
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index f0d09be3f..fd492da1b 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import CopyableInput from 'soapbox/components/copyable-input';
-import { Text, Stack, HStack, Button } from 'soapbox/components/ui';
+import { Text, Stack, HStack } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppDispatch } from 'soapbox/hooks';
 
@@ -42,9 +43,11 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
         <HStack alignItems='center' className='ml-auto'>
-          <Button className='!ml-1 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1' theme='muted' to='#' onClick={handleModalClick}>
-            <SvgIcon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
-          </Button>
+          <Link to={'/'} className='inline-flex'>
+            <button className='button-theme-muted !ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' onClick={handleModalClick}>
+              <SvgIcon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
+            </button>
+          </Link>
 
           {explorerUrl && (
             <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index a65d13dc9..abf65232a 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -441,18 +441,20 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
           <HStack alignItems='center' space={2}>
             <SvgIcon src={require('@tabler/icons/outline/users.svg')} />
-            <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleParticipantsClick}>
-              <span>
-                <FormattedMessage
-                  id='event.participants'
-                  defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
-                  values={{
-                    rawCount: event.participants_count || 0,
-                    count: shortNumberFormat(event.participants_count || 0),
-                  }}
-                />
-              </span>
-            </Button>
+            <Link to={'/'} className='inline-flex'>
+              <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleParticipantsClick}>
+                <span>
+                  <FormattedMessage
+                    id='event.participants'
+                    defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
+                    values={{
+                      rawCount: event.participants_count || 0,
+                      count: shortNumberFormat(event.participants_count || 0),
+                    }}
+                  />
+                </span>
+              </button>
+            </Link>
           </HStack>
 
           <EventDate status={status} />
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index 08040d272..d6f3e293a 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import { fetchStatus } from 'soapbox/actions/statuses';
@@ -7,7 +8,7 @@ import MissingIndicator from 'soapbox/components/missing-indicator';
 import StatusContent from 'soapbox/components/status-content';
 import StatusMedia from 'soapbox/components/status-media';
 import TranslateButton from 'soapbox/components/translate-button';
-import { Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
 import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
@@ -89,9 +90,11 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
       text.push(
         <React.Fragment key='event-map'>
           <br />
-          <Button to='#' className='!border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue' theme='muted' onClick={handleShowMap}>
-            <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
-          </Button>
+          <Link to={'/'} className='inline-flex'>
+            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleShowMap}>
+              <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
+            </button>
+          </Link>
         </React.Fragment>,
       );
     }
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 8d33c4b50..6892a82f8 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 
-import { Button } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
@@ -26,12 +26,14 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
 
   return (
     <div>
-      <Button to='#' className='flex items-center gap-1  !border-none !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue' onClick={toggleExpanded}>
-        <SvgIcon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
-        <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
-          {remoteInstance.host}
-        </div>
-      </Button>
+      <Link to={'/'} className='inline-flex'>
+        <button className='button-theme-muted flex items-center gap-1 space-x-2 !border-none  !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={toggleExpanded}>
+          <SvgIcon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
+          <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
+            {remoteInstance.host}
+          </div>
+        </button>
+      </Link>
       <div
         className={clsx({
           'h-0 overflow-hidden': !expanded,
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index e74538275..e8e148e49 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,10 @@
 @tailwind utilities;
 
 @layer utilities {
+  .button-theme-muted {
+    @apply border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500
+  }
+
   .break-word-nested > p {
     word-break: break-word;
   }

From 5d1cd6df5b5995fa5380bf8383ec4f1de1357a41 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 01:09:50 -0300
Subject: [PATCH 049/133] Change "#" to "/" of href warning

---
 src/components/autosuggest-input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index 7cf928419..931e90f35 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -234,7 +234,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
     return menu.map((item, i) => (
       <a
         className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
-        href='#'
+        href='/'
         role='button'
         tabIndex={0}
         onMouseDown={this.handleMenuItemClick(item)}

From 76fd073c485eb9ff33f7da2bd7bfd7b9849d6eaf Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 01:25:29 -0300
Subject: [PATCH 050/133] Fix warning in "site-preview"

---
 src/features/soapbox-config/components/site-preview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/soapbox-config/components/site-preview.tsx b/src/features/soapbox-config/components/site-preview.tsx
index 4d1944cda..43f1e17f9 100644
--- a/src/features/soapbox-config/components/site-preview.tsx
+++ b/src/features/soapbox-config/components/site-preview.tsx
@@ -24,6 +24,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
 
   const dark = ['dark', 'black'].includes(userTheme as string) || (userTheme === 'system' && systemTheme === 'dark');
 
+  // eslint-disable-next-line tailwindcss/no-custom-classname
   const bodyClass = clsx(
     'site-preview',
     'align-center relative flex justify-center text-base',

From b92276553ab56de3341a24c0bb8a036df4eefeff Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 01:26:03 -0300
Subject: [PATCH 051/133] Fix warning in "primary-500"

---
 src/features/placeholder/components/placeholder-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/placeholder/components/placeholder-card.tsx b/src/features/placeholder/components/placeholder-card.tsx
index 9b88d8429..5e18ecf34 100644
--- a/src/features/placeholder/components/placeholder-card.tsx
+++ b/src/features/placeholder/components/placeholder-card.tsx
@@ -9,7 +9,7 @@ const PlaceholderCard: React.FC = () => (
     'animate-pulse': true,
   })}
   >
-    <div className='primary-500 w-2/5 rounded-l'>&nbsp;</div>
+    <div className='w-2/5 rounded-l'>&nbsp;</div>
 
     <div className='flex w-3/5 flex-col justify-between break-words p-4 text-primary-50'>
       <p>{generateText(randomIntFromInterval(5, 25))}</p>

From 80388d2cdc085f28da6d85e301d71e1494be8a58 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 02:27:19 -0300
Subject: [PATCH 052/133] Change "thread" and "status--wrapper" to custom
 Tailwind

---
 src/components/status.tsx                     |  6 ++--
 src/features/event/event-discussion.tsx       |  2 +-
 .../components/placeholder-status.tsx         |  2 +-
 .../components/scheduled-status.tsx           |  2 +-
 src/features/ui/components/pending-status.tsx |  2 +-
 src/styles/components/detailed-status.scss    |  4 +--
 src/styles/components/notification.scss       |  2 +-
 src/styles/components/reply-mentions.scss     |  2 +-
 src/styles/components/status.scss             |  2 +-
 src/styles/tailwind.css                       | 35 +++++++++++++++++++
 10 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/components/status.tsx b/src/components/status.tsx
index 022eab385..81665466c 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -333,7 +333,7 @@ const Status: React.FC<IStatus> = (props) => {
 
     return (
       <HotKeys handlers={minHandlers}>
-        <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
+        <div className={clsx('status--wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
           {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Text theme='muted'>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
@@ -412,7 +412,7 @@ const Status: React.FC<IStatus> = (props) => {
       >
         <Card
           variant={variant}
-          className={clsx('status__wrapper space-y-4', `status-${actualStatus.visibility}`, {
+          className={clsx('status--wrapper space-y-4', `status-${actualStatus.visibility}`, {
             'py-6 sm:p-5': variant === 'rounded',
             'status-reply': !!status.in_reply_to_id,
             muted,
@@ -436,7 +436,7 @@ const Status: React.FC<IStatus> = (props) => {
             avatarSize={avatarSize}
           />
 
-          <div className='status__content-wrapper'>
+          <div className='status--content-wrapper'>
             <StatusReplyMentions status={actualStatus} hoverable={hoverable} />
 
             <Stack
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx
index cd11b1916..93d7168ef 100644
--- a/src/features/event/event-discussion.tsx
+++ b/src/features/event/event-discussion.tsx
@@ -178,7 +178,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
       {me && <div className='border-b border-solid border-gray-200 p-2 pt-0 dark:border-gray-800'>
         <ComposeForm id={`reply:${status.id}`} autoFocus={false} event={status.id} />
       </div>}
-      <div ref={node} className='thread p-0 shadow-none sm:p-2'>
+      <div ref={node} className='thread p-0 shadow-none black:bg-black dark:bg-primary-900 sm:p-2'>
         <ScrollableList
           id='thread'
           ref={scroller}
diff --git a/src/features/placeholder/components/placeholder-status.tsx b/src/features/placeholder/components/placeholder-status.tsx
index c6d7221ad..5db332c0c 100644
--- a/src/features/placeholder/components/placeholder-status.tsx
+++ b/src/features/placeholder/components/placeholder-status.tsx
@@ -33,7 +33,7 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
         </HStack>
       </div>
 
-      <div className='status__content-wrapper mt-4'>
+      <div className='status--content-wrapper mt-4'>
         <PlaceholderStatusContent minLength={5} maxLength={120} />
       </div>
     </div>
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 6e71f7cbe..8fb1de473 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -31,7 +31,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
   const account = status.account;
 
   return (
-    <div className={clsx('status__wrapper', `status__wrapper-${status.visibility}`, { 'status__wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
+    <div className={clsx('status--wrapper', `status--wrapper-${status.visibility}`, { 'status--wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
       <div className={clsx('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
         <div className='mb-4'>
           <HStack justifyContent='between' alignItems='start'>
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 1ed4e5502..4a9f0a5d4 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -78,7 +78,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
             </HStack>
           </div>
 
-          <div className='status__content-wrapper'>
+          <div className='status--content-wrapper'>
             <StatusReplyMentions status={status} />
 
             <Stack space={4}>
diff --git a/src/styles/components/detailed-status.scss b/src/styles/components/detailed-status.scss
index 2edea3294..ccefc753e 100644
--- a/src/styles/components/detailed-status.scss
+++ b/src/styles/components/detailed-status.scss
@@ -4,12 +4,12 @@
   &__status {
     @apply relative pb-4;
 
-    .status__wrapper {
+    .status--wrapper {
       @apply shadow-none p-0;
     }
   }
 
-  .status__content-wrapper {
+  .status--content-wrapper {
     @apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
   }
 }
diff --git a/src/styles/components/notification.scss b/src/styles/components/notification.scss
index 63439e79a..d593c6f2e 100644
--- a/src/styles/components/notification.scss
+++ b/src/styles/components/notification.scss
@@ -1,3 +1,3 @@
-.notification .status__wrapper {
+.notification .status--wrapper {
   @apply p-0 shadow-none rounded-none;
 }
diff --git a/src/styles/components/reply-mentions.scss b/src/styles/components/reply-mentions.scss
index 002afe3e1..122f70874 100644
--- a/src/styles/components/reply-mentions.scss
+++ b/src/styles/components/reply-mentions.scss
@@ -7,7 +7,7 @@
   }
 }
 
-.status__wrapper {
+.status--wrapper {
   .reply-mentions {
     display: block;
 
diff --git a/src/styles/components/status.scss b/src/styles/components/status.scss
index 3c7863062..660f5127e 100644
--- a/src/styles/components/status.scss
+++ b/src/styles/components/status.scss
@@ -15,7 +15,7 @@
   }
 }
 
-[column-type='filled'] .status__wrapper,
+[column-type='filled'] .status--wrapper,
 [column-type='filled'] .status-placeholder {
   @apply bg-transparent dark:bg-transparent rounded-none shadow-none;
 }
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 49e73944e..f801dc04b 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,41 @@
 @tailwind utilities;
 
 @layer utilities {
+  .thread {
+    @apply bg-white;
+  
+    .status--content-wrapper {
+      @apply pl-[54px] rtl:pl-0 rtl:pr-[54px];
+    }
+  }
+
+  .thread__status {
+    @apply relative pb-4;
+
+    .status--wrapper {
+      @apply shadow-none p-0;
+    }
+  }
+
+  .notification .status--wrapper {
+    @apply p-0 shadow-none rounded-none;
+  }
+
+  .status--wrapper {
+    .reply-mentions {
+      display: block;
+  
+      span {
+        cursor: pointer;
+      }
+    }
+  }
+
+  [column-type='filled'] .status--wrapper,
+  [column-type='filled'] .status-placeholder {
+    @apply bg-transparent dark:bg-transparent rounded-none shadow-none;
+  }
+
   .search__icon {
     &::-moz-focus-inner {
       border: 0;

From b8bffb8f3e6047cf1a96d660105122ba8508a905 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 02:34:43 -0300
Subject: [PATCH 053/133] Move onClick into a "button" in captcha

---
 src/features/auth-login/components/captcha.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/features/auth-login/components/captcha.tsx b/src/features/auth-login/components/captcha.tsx
index 47ac55066..8228e7c9e 100644
--- a/src/features/auth-login/components/captcha.tsx
+++ b/src/features/auth-login/components/captcha.tsx
@@ -111,7 +111,9 @@ const NativeCaptchaField: React.FC<INativeCaptchaField> = ({ captcha, onChange,
   return (
     <Stack space={2}>
       <div className='flex w-full items-center justify-center rounded-md border border-solid border-gray-300 bg-white dark:border-gray-600'>
-        <img alt={intl.formatMessage(messages.captcha)} src={captcha.get('url')} onClick={onClick} />
+        <button className='button-theme-muted !block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={onClick}>
+          <img alt={intl.formatMessage(messages.captcha)} src={captcha.get('url')} />
+        </button>
       </div>
 
       <Input

From a0c194c193bf9a103f426806dceda173cfe3336d Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 02:36:03 -0300
Subject: [PATCH 054/133] Remove unused or non-existent class names

---
 src/components/verification-badge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx
index d4b3bca3f..d69cf9053 100644
--- a/src/components/verification-badge.tsx
+++ b/src/components/verification-badge.tsx
@@ -24,7 +24,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const Element = icon.endsWith('.svg') ? Icon : 'img';
 
   return (
-    <span className='verified-icon' data-testid='verified-badge'>
+    <span data-testid='verified-badge'>
       <Element className={clsx('w-4 text-accent-500', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
     </span>
   );

From ed98e76256f8054dfbd137b0cfa5be4c20e6d93f Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 13:45:31 -0300
Subject: [PATCH 055/133] Remove unused or non-existent class names

---
 src/components/status.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status.tsx b/src/components/status.tsx
index 81665466c..d9152bb66 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -361,7 +361,7 @@ const Status: React.FC<IStatus> = (props) => {
   if (actualStatus.quote) {
     if (actualStatus.pleroma.get('quote_visible', true) === false) {
       quote = (
-        <div className='quoted-status-tombstone'>
+        <div>
           <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
         </div>
       );

From ea9719be5117f7375e62087725caa7b99f81fc82 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 16:04:05 -0300
Subject: [PATCH 056/133] Remove unused or non-existent class names and change
 'status' to custom Tailwind

---
 src/components/status.tsx                           |  7 ++-----
 .../placeholder/components/placeholder-card.tsx     |  2 +-
 .../components/scheduled-status.tsx                 |  4 ++--
 src/features/ui/components/pending-status.tsx       |  2 +-
 src/styles/tailwind.css                             | 13 +++++++++++++
 tailwind.config.ts                                  |  5 +++++
 6 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/status.tsx b/src/components/status.tsx
index d9152bb66..bbdb504e4 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -412,11 +412,8 @@ const Status: React.FC<IStatus> = (props) => {
       >
         <Card
           variant={variant}
-          className={clsx('status--wrapper space-y-4', `status-${actualStatus.visibility}`, {
-            'py-6 sm:p-5': variant === 'rounded',
-            'status-reply': !!status.in_reply_to_id,
-            muted,
-            read: unread === false,
+          className={clsx('status--wrapper space-y-4', {
+            'py-6 sm:p-5': variant === 'rounded', muted, read: unread === false,
           })}
           data-id={status.id}
         >
diff --git a/src/features/placeholder/components/placeholder-card.tsx b/src/features/placeholder/components/placeholder-card.tsx
index 5e18ecf34..4e5130d57 100644
--- a/src/features/placeholder/components/placeholder-card.tsx
+++ b/src/features/placeholder/components/placeholder-card.tsx
@@ -5,7 +5,7 @@ import { randomIntFromInterval, generateText } from '../utils';
 
 /** Fake link preview to display while data is loading. */
 const PlaceholderCard: React.FC = () => (
-  <div className={clsx('status-card', {
+  <div className={clsx('flex overflow-hidden rounded-lg border border-solid border-gray-200 text-sm text-gray-800 no-underline dark:border-gray-800 dark:text-gray-200', {
     'animate-pulse': true,
   })}
   >
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 8fb1de473..83f13f58f 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -31,8 +31,8 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
   const account = status.account;
 
   return (
-    <div className={clsx('status--wrapper', `status--wrapper-${status.visibility}`, { 'status--wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
-      <div className={clsx('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
+    <div className={clsx('status--wrapper')} tabIndex={0}>
+      <div className={clsx('status', { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
         <div className='mb-4'>
           <HStack justifyContent='between' alignItems='start'>
             <Account
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 4a9f0a5d4..189a0afab 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -60,7 +60,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
     <div className={clsx('opacity-50', className)}>
       <div className={clsx('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
         <Card
-          className={clsx(`status-${status.visibility}`, {
+          className={clsx({
             'py-6 sm:p-5': !thread,
             'status-reply': !!status.in_reply_to_id,
           })}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index f801dc04b..18b5b5070 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,19 @@
 @tailwind utilities;
 
 @layer utilities {
+  .status {
+    @apply min-h-[54px] cursor-default animate-fade opacity-100;
+  }
+
+  body.rtl {
+    direction: rtl;
+  
+    .status {
+      padding-left: 10px;
+      padding-right: 68px;
+    }
+  }
+
   .thread {
     @apply bg-white;
   
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 707639804..004be35ca 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -69,6 +69,7 @@ const config: Config = {
         'greentext': true,
       }),
       animation: {
+        fade: 'fade 150ms linear',
         'sonar-scale-4': 'sonar-scale-4 3s linear infinite',
         'sonar-scale-3': 'sonar-scale-3 3s 0.5s linear infinite',
         'sonar-scale-2': 'sonar-scale-2 3s 1s linear infinite',
@@ -77,6 +78,10 @@ const config: Config = {
         'leave': 'leave 150ms ease-in forwards',
       },
       keyframes: {
+        fade: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
         'sonar-scale-4': {
           from: { opacity: '0.4', transform: 'scale(1)' },
           to: { opacity: '0', transform: 'scale(4)' },

From 783176fd874b425af5baf70d8370ee45370bc01e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 16:10:18 -0300
Subject: [PATCH 057/133] Change classNames "material-status" to use only
 Tailwind

---
 src/components/status.tsx                                     | 1 +
 .../placeholder/components/placeholder-material-status.tsx    | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/status.tsx b/src/components/status.tsx
index bbdb504e4..fe971da12 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -401,6 +401,7 @@ const Status: React.FC<IStatus> = (props) => {
 
   return (
     <HotKeys handlers={handlers} data-testid='status'>
+      {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
       <div
         className={clsx('status cursor-pointer', { focusable })}
         tabIndex={focusable && !muted ? 0 : undefined}
diff --git a/src/features/placeholder/components/placeholder-material-status.tsx b/src/features/placeholder/components/placeholder-material-status.tsx
index e3b289d70..4e605da3e 100644
--- a/src/features/placeholder/components/placeholder-material-status.tsx
+++ b/src/features/placeholder/components/placeholder-material-status.tsx
@@ -5,8 +5,8 @@ import PlaceholderStatus from './placeholder-status';
 /** Fake material status to display while data is loading. */
 const PlaceholderMaterialStatus: React.FC = () => {
   return (
-    <div className='material-status' tabIndex={-1} aria-hidden>
-      <div className='material-status__status' tabIndex={0}>
+    <div className='pb-2.5' tabIndex={-1} aria-hidden>
+      <div className='rounded-[10px] py-[15px] pb-[10px] shadow-[0_0_6px_0_rgba(0,0,0,0.1)]' tabIndex={0}>
         <PlaceholderStatus />
       </div>
     </div>

From bf3079471083050a10d6d377600cb5dc20b6f0cb Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 7 Nov 2024 15:40:27 -0300
Subject: [PATCH 058/133] Eliminate fragility

---
 src/components/upload.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index 8f5875b9e..23393a54e 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -14,6 +14,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { spring } from 'react-motion';
 
 import { openModal } from 'soapbox/actions/modals';
+import AudioPlaceHolder from 'soapbox/assets/images/audio-placeholder.png';
+import VideoPlaceHolder from 'soapbox/assets/images/video-placeholder.png';
 import Blurhash from 'soapbox/components/blurhash';
 import { HStack, Icon, IconButton } from 'soapbox/components/ui';
 import Motion from 'soapbox/features/ui/util/optional-motion';
@@ -159,9 +161,9 @@ const Upload: React.FC<IUpload> = ({
       case 'image':
         return `url(${media.preview_url})`;
       case 'video':
-        return 'url(\'../assets/images/video-placeholder.png\')';
+        return `url(${VideoPlaceHolder})`;
       default:
-        return 'url(../assets/images/audio-placeholder.png)';
+        return `url(${AudioPlaceHolder})`;
     }
   };
 

From 3f27ec2e61df00792b63ca4216697165cd003ecc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 16:13:22 -0600
Subject: [PATCH 059/133] Remove "npx" from package.json commands

---
 package.json | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 8ada79d3e..7be62bef9 100644
--- a/package.json
+++ b/package.json
@@ -21,16 +21,15 @@
     "url": "lightning:alex@alexgleason.me"
   },
   "scripts": {
-    "start": "npx vite serve",
-    "dev": "npx vite serve",
-    "build": "npx vite build --emptyOutDir",
-    "preview": "npx vite preview",
-    "audit:fix": "npx yarn-audit-fix",
-    "i18n": "npx formatjs extract 'src/**/*.{ts,tsx}' --ignore '**/*.d.ts' --out-file build/messages.json && npx formatjs compile build/messages.json --out-file src/locales/en.json",
-    "test": "npx vitest",
+    "start": "vite serve",
+    "dev": "vite serve",
+    "build": "vite build --emptyOutDir",
+    "preview": "vite preview",
+    "i18n": "formatjs extract 'src/**/*.{ts,tsx}' --ignore '**/*.d.ts' --out-file build/messages.json && formatjs compile build/messages.json --out-file src/locales/en.json",
+    "test": "vitest",
     "lint": "npm run lint:js && npm run lint:sass",
-    "lint:js": "npx eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx . --cache",
-    "lint:sass": "npx stylelint src/styles/**/*.scss",
+    "lint:js": "eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx . --cache",
+    "lint:sass": "stylelint src/styles/**/*.scss",
     "prepare": "husky install"
   },
   "license": "AGPL-3.0-or-later",

From 8c130e6bef09763e32216d054e5aab2a3ff214b6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 16:42:35 -0600
Subject: [PATCH 060/133] Remove usage of csstype package

---
 src/components/media-gallery.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 0edf7528c..381cfdf89 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import StillImage from 'soapbox/components/still-image';
@@ -13,7 +13,6 @@ import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maxi
 
 import SvgIcon from './ui/icon/svg-icon';
 
-import type { Property } from 'csstype';
 import type { List as ImmutableList } from 'immutable';
 
 // const Gameboy = React.lazy(() => import('./gameboy'));
@@ -22,18 +21,18 @@ 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: CSSProperties['width'];
+  h: CSSProperties['height'];
+  t?: CSSProperties['top'];
+  r?: CSSProperties['right'];
+  b?: CSSProperties['bottom'];
+  l?: CSSProperties['left'];
+  float?: CSSProperties['float'];
+  pos?: CSSProperties['position'];
 }
 
 interface SizeData {
-  style: React.CSSProperties;
+  style: CSSProperties;
   itemsDimensions: Dimensions[];
   size: number;
   width: number;

From 9d9f237fd213824b99f86d1cd49864fdd5761023 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 18:31:13 -0600
Subject: [PATCH 061/133] Rewrite all `require` to ES6 imports

---
 package.json                                  |   1 -
 src/actions/moderation.tsx                    |  12 +-
 src/components/account-search.tsx             |   6 +-
 src/components/account.tsx                    |   3 +-
 src/components/authorize-reject-buttons.tsx   |   9 +-
 src/components/autosuggest-location.tsx       |   9 +-
 src/components/big-card.tsx                   |   3 +-
 src/components/domain.tsx                     |   5 +-
 .../dropdown-menu/dropdown-menu.tsx           |   3 +-
 src/components/event-preview.tsx              |   6 +-
 src/components/gameboy.tsx                    |  17 +-
 src/components/list.tsx                       |   6 +-
 src/components/load-gap.tsx                   |   3 +-
 src/components/location-search.tsx            |   6 +-
 src/components/media-gallery.tsx              |   6 +-
 src/components/modal-root.tsx                 |   5 +-
 src/components/pending-items-row.tsx          |   6 +-
 src/components/polls/poll-option.tsx          |   6 +-
 src/components/preview-card.tsx               |  12 +-
 src/components/profile-hover-card.tsx         |   3 +-
 src/components/quoted-status-indicator.tsx    |   3 +-
 src/components/quoted-status.tsx              |   3 +-
 src/components/scroll-top-button.tsx          |   3 +-
 src/components/sidebar-menu.tsx               |  58 ++-
 src/components/sidebar-navigation.tsx         |  66 ++-
 src/components/site-logo.tsx                  |   6 +-
 src/components/status-action-bar.tsx          | 112 ++++--
 src/components/status-content.tsx             |   3 +-
 src/components/status.tsx                     |  11 +-
 .../statuses/sensitive-content-overlay.tsx    |  17 +-
 src/components/thumb-navigation.tsx           |  33 +-
 src/components/translate-button.tsx           |   5 +-
 src/components/ui/accordion/accordion.tsx     |   7 +-
 src/components/ui/avatar/avatar.tsx           |   3 +-
 src/components/ui/card/card.tsx               |   3 +-
 src/components/ui/carousel/carousel.tsx       |   6 +-
 .../ui/emoji-selector/emoji-selector.tsx      |   3 +-
 src/components/ui/input/input.tsx             |   4 +-
 .../language-dropdown/language-dropdown.tsx   |   5 +-
 src/components/ui/modal/modal.tsx             |   6 +-
 src/components/ui/streamfield/streamfield.tsx |   3 +-
 src/components/ui/tag-input/tag.tsx           |   3 +-
 src/components/ui/toast/toast.tsx             |  12 +-
 src/components/ui/widget/widget.tsx           |   3 +-
 src/components/upload-progress.tsx            |   3 +-
 src/components/upload.tsx                     |   3 +-
 src/components/validation-checkmark.tsx       |   4 +-
 src/components/verification-badge.tsx         |   3 +-
 .../account-gallery/components/media-item.tsx |   6 +-
 .../components/moved-note.tsx                 |   3 +-
 src/features/account/components/header.tsx    |  86 ++--
 src/features/admin/announcements.tsx          |   3 +-
 .../admin/components/report-status.tsx        |   9 +-
 src/features/admin/components/report.tsx      |   9 +-
 src/features/admin/domains.tsx                |   3 +-
 src/features/admin/manage-zap-split.tsx       |   3 +-
 src/features/admin/rules.tsx                  |   3 +-
 src/features/admin/tabs/dashboard.tsx         |  10 +-
 src/features/aliases/components/account.tsx   |   3 +-
 src/features/aliases/components/search.tsx    |   3 +-
 src/features/aliases/index.tsx                |   3 +-
 src/features/audio/index.tsx                  |  11 +-
 .../auth-login/components/consumer-button.tsx |  21 +-
 .../components/registration-form.tsx          |   6 +-
 src/features/auth-token-list/index.tsx        |   3 +-
 src/features/birthdays/account.tsx            |   3 +-
 src/features/bookmark-folders/index.tsx       |   6 +-
 src/features/bookmarks/index.tsx              |   9 +-
 .../chats/components/chat-composer.tsx        |   3 +-
 .../chats/components/chat-list-item.tsx       |   6 +-
 .../components/chat-message-list-intro.tsx    |   3 +-
 .../chats/components/chat-message.tsx         |  22 +-
 .../chat-page/components/chat-page-main.tsx   |  12 +-
 .../chat-page/components/chat-page-new.tsx    |   3 +-
 .../components/chat-page-settings.tsx         |   3 +-
 .../components/chat-page-sidebar.tsx          |   6 +-
 .../chats/components/chat-pane/chat-pane.tsx  |   3 +-
 .../chats/components/chat-search-input.tsx    |   4 +-
 .../components/chat-search/chat-search.tsx    |   4 +-
 .../chats/components/chat-upload-preview.tsx  |   3 +-
 src/features/chats/components/chat-upload.tsx |   3 +-
 .../chat-widget/chat-pane-header.tsx          |   4 +-
 .../components/chat-widget/chat-settings.tsx  |   9 +-
 .../components/chat-widget/chat-window.tsx    |   7 +-
 .../headers/chat-search-header.tsx            |   3 +-
 .../compose/components/compose-form.tsx       |   6 +-
 .../compose/components/markdown-button.tsx    |   3 +-
 .../compose/components/poll-button.tsx        |   3 +-
 .../compose/components/privacy-dropdown.tsx   |  12 +-
 .../compose/components/reply-indicator.tsx    |   3 +-
 .../compose/components/schedule-button.tsx    |   3 +-
 .../compose/components/schedule-form.tsx      |   3 +-
 .../compose/components/search-results.tsx     |   3 +-
 .../compose/components/search-zap-split.tsx   |   3 +-
 src/features/compose/components/search.tsx    |   8 +-
 .../compose/components/spoiler-button.tsx     |   3 +-
 .../compose/components/upload-button.tsx      |   6 +-
 .../components/crypto-address.tsx             |   6 +-
 .../components/detailed-crypto-address.tsx    |   3 +-
 src/features/developers/developers-menu.tsx   |  24 +-
 .../developers/service-worker-info.tsx        |   3 +-
 src/features/edit-identity/index.tsx          |   3 +-
 .../edit-profile/components/avatar-picker.tsx |   3 +-
 .../edit-profile/components/header-picker.tsx |   6 +-
 .../emoji/components/emoji-picker.tsx         |   5 +-
 .../emoji-picker-dropdown-container.tsx       |   3 +-
 .../event/components/event-action-button.tsx  |   6 +-
 src/features/event/components/event-date.tsx  |   3 +-
 .../event/components/event-header.tsx         |  71 ++--
 src/features/event/event-information.tsx      |   9 +-
 .../events/components/event-carousel.tsx      |   6 +-
 .../components/instance-restrictions.tsx      |  23 +-
 .../components/restricted-instance.tsx        |   4 +-
 .../group/components/group-header-image.tsx   |   3 +-
 .../group/components/group-header.tsx         |   3 +-
 .../components/group-member-list-item.tsx     |  11 +-
 .../group/components/group-options-button.tsx |  15 +-
 .../group/components/group-privacy.tsx        |  10 +-
 .../group/components/group-relationship.tsx   |   6 +-
 .../group/components/group-tag-list-item.tsx  |  16 +-
 src/features/group/edit-group.tsx             |   3 +-
 src/features/group/group-tag-timeline.tsx     |   3 +-
 src/features/group/group-tags.tsx             |   3 +-
 src/features/group/group-timeline.tsx         |   3 +-
 src/features/group/manage-group.tsx           |   3 +-
 .../components/discover/group-list-item.tsx   |   4 +-
 .../components/discover/layout-buttons.tsx    |   6 +-
 .../discover/search/recent-searches.tsx       |   3 +-
 src/features/groups/discover.tsx              |   7 +-
 src/features/groups/index.tsx                 |   3 +-
 src/features/groups/tag.tsx                   |   6 +-
 src/features/list-adder/components/list.tsx   |   9 +-
 .../list-editor/components/account.tsx        |   6 +-
 .../list-editor/components/search.tsx         |   3 +-
 src/features/lists/index.tsx                  |   9 +-
 .../notifications/components/filter-bar.tsx   |  21 +-
 .../notifications/components/notification.tsx |  52 ++-
 src/features/public-timeline/index.tsx        |   3 +-
 src/features/remote-timeline/index.tsx        |   3 +-
 src/features/reply-mentions/account.tsx       |   6 +-
 .../scheduled-status-action-bar.tsx           |   3 +-
 .../components/icon-picker-dropdown.tsx       |   3 +-
 .../status/components/detailed-status.tsx     |   9 +-
 src/features/test-timeline/index.tsx          |  15 +-
 src/features/theme-editor/index.tsx           |   9 +-
 src/features/ui/components/action-button.tsx  |   6 +-
 src/features/ui/components/error-column.tsx   |   3 +-
 .../ui/components/floating-action-button.tsx  |   5 +-
 .../ui/components/instance-info-panel.tsx     |   4 +-
 .../components/instance-moderation-panel.tsx  |   6 +-
 .../account-moderation-modal.tsx              |   3 +-
 .../ui/components/modals/boost-modal.tsx      |   3 +-
 .../compose-event-modal.tsx                   |  11 +-
 .../compose-event-modal/upload-button.tsx     |   3 +-
 .../ui/components/modals/compose-modal.tsx    |   3 +-
 .../modals/edit-bookmark-folder-modal.tsx     |   3 +-
 .../ui/components/modals/event-map-modal.tsx  |  12 +-
 .../components/modals/landing-page-modal.tsx  |   3 +-
 .../steps/confirmation-step.tsx               |   6 +-
 .../ui/components/modals/media-modal.tsx      |  16 +-
 .../steps/extension-step.tsx                  |   3 +-
 .../nostr-signup-modal/steps/keygen-step.tsx  |   3 +-
 .../steps/avatar-step.tsx                     |   6 +-
 .../onboarding-flow-modal/steps/bio-step.tsx  |   3 +-
 .../steps/completed-step.tsx                  |   6 +-
 .../steps/cover-photo-selection-step.tsx      |   6 +-
 .../steps/display-name-step.tsx               |   3 +-
 .../steps/suggested-accounts-step.tsx         |   3 +-
 .../modals/reply-mentions-modal.tsx           |   3 +-
 .../modals/report-modal/report-modal.tsx      |   3 +-
 .../report-modal/steps/other-actions-step.tsx |   6 +-
 .../modals/select-bookmark-folder-modal.tsx   |   6 +-
 .../ui/components/modals/zap-invoice.tsx      |   6 +-
 .../components/modals/zap-split/zap-split.tsx |   3 +-
 src/features/ui/components/navbar.tsx         |   3 +-
 .../ui/components/new-account-zap-split.tsx   |   3 +-
 .../ui/components/panels/new-event-panel.tsx  |   3 +-
 .../ui/components/profile-dropdown.tsx        |   6 +-
 src/features/ui/components/profile-field.tsx  |   3 +-
 .../ui/components/profile-info-panel.tsx      |  15 +-
 .../ui/components/subscription-button.tsx     |   4 +-
 src/features/ui/components/theme-selector.tsx |  15 +-
 .../ui/components/who-to-follow-panel.tsx     |   3 +-
 src/features/video/index.tsx                  |  12 +-
 .../zap/components/zap-pay-request-form.tsx   |  11 +-
 src/jest/test-setup.ts                        |   2 +-
 src/normalizers/account.ts                    |  12 +-
 src/normalizers/group.ts                      |  12 +-
 src/pages/group-page.tsx                      |   9 +-
 src/schemas/account.ts                        |   5 +-
 src/schemas/group.ts                          |   5 +-
 src/schemas/instance.test.ts                  |  40 +-
 src/service-worker/sw.ts                      |  10 +-
 src/utils/accounts.ts                         |   7 +-
 vite.config.ts                                |   3 -
 yarn.lock                                     | 379 +-----------------
 196 files changed, 1079 insertions(+), 942 deletions(-)

diff --git a/package.json b/package.json
index 7be62bef9..4e39ed057 100644
--- a/package.json
+++ b/package.json
@@ -152,7 +152,6 @@
     "vite": "^5.4.8",
     "vite-plugin-compile-time": "^0.2.1",
     "vite-plugin-html": "^3.2.2",
-    "vite-plugin-require": "^1.2.14",
     "vite-plugin-static-copy": "^1.0.6",
     "zod": "^3.23.5",
     "zustand": "^5.0.0"
diff --git a/src/actions/moderation.tsx b/src/actions/moderation.tsx
index ddee5fe1d..a01d9f4fd 100644
--- a/src/actions/moderation.tsx
+++ b/src/actions/moderation.tsx
@@ -1,3 +1,7 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
+import userOffIcon from '@tabler/icons/outline/user-off.svg';
 import React from 'react';
 import { defineMessages, IntlShape } from 'react-intl';
 
@@ -58,7 +62,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
     );
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/user-off.svg'),
+      icon: userOffIcon,
       heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
       message,
       confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@@ -96,7 +100,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/user-minus.svg'),
+      icon: userMinusIcon,
       heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
       message,
       confirm,
@@ -118,7 +122,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
     const acct = state.statuses.get(statusId)!.account.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/alert-triangle.svg'),
+      icon: alertTriangleIcon,
       heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading),
       message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
       confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm),
@@ -138,7 +142,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
     const acct = state.statuses.get(statusId)!.account.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteStatusHeading),
       message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
       confirm: intl.formatMessage(messages.deleteStatusConfirm),
diff --git a/src/components/account-search.tsx b/src/components/account-search.tsx
index cec7fc8f8..9dbac4fbb 100644
--- a/src/components/account-search.tsx
+++ b/src/components/account-search.tsx
@@ -1,3 +1,5 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -76,12 +78,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/outline/search.svg')}
+            src={searchIcon}
             className={clsx('size-4 text-gray-400', { hidden: !isEmpty() })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-400', { hidden: isEmpty() })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/components/account.tsx b/src/components/account.tsx
index a9eb9a546..5f2244b43 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -1,3 +1,4 @@
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
 import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -275,7 +276,7 @@ const Account = ({
                   <>
                     <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
-                    <Icon className='size-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
+                    <Icon className='size-5 text-gray-700 dark:text-gray-600' src={pencilIcon} />
                   </>
                 ) : null}
 
diff --git a/src/components/authorize-reject-buttons.tsx b/src/components/authorize-reject-buttons.tsx
index 358704682..fcf80d1ef 100644
--- a/src/components/authorize-reject-buttons.tsx
+++ b/src/components/authorize-reject-buttons.tsx
@@ -1,3 +1,6 @@
+import playerStopFilledIcon from '@tabler/icons/filled/player-stop.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -106,7 +109,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
         <HStack space={3} alignItems='center'>
           <AuthorizeRejectButton
             theme='danger'
-            icon={require('@tabler/icons/outline/x.svg')}
+            icon={xIcon}
             action={handleReject}
             isLoading={state === 'rejecting'}
             disabled={state === 'authorizing'}
@@ -114,7 +117,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
           />
           <AuthorizeRejectButton
             theme='primary'
-            icon={require('@tabler/icons/outline/check.svg')}
+            icon={checkIcon}
             action={handleAuthorize}
             isLoading={state === 'authorizing'}
             disabled={state === 'rejecting'}
@@ -162,7 +165,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
         }
       >
         <IconButton
-          src={isLoading ? require('@tabler/icons/filled/player-stop.svg') : icon}
+          src={isLoading ? playerStopFilledIcon : icon}
           onClick={action}
           theme='seamless'
           className='size-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
diff --git a/src/components/autosuggest-location.tsx b/src/components/autosuggest-location.tsx
index ce6575dd6..c885e05a7 100644
--- a/src/components/autosuggest-location.tsx
+++ b/src/components/autosuggest-location.tsx
@@ -1,14 +1,13 @@
+import buildingCommunityIcon from '@tabler/icons/outline/building-community.svg';
+import homeIcon from '@tabler/icons/outline/home-2.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import roadIcon from '@tabler/icons/outline/road.svg';
 import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';
 
 import { HStack, Icon, Stack, Text } from './ui';
 
-const buildingCommunityIcon = require('@tabler/icons/outline/building-community.svg');
-const homeIcon = require('@tabler/icons/outline/home-2.svg');
-const mapPinIcon = require('@tabler/icons/outline/map-pin.svg');
-const roadIcon = require('@tabler/icons/outline/road.svg');
-
 export const ADDRESS_ICONS: Record<string, string> = {
   house: homeIcon,
   street: roadIcon,
diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index f6b7ce614..b816d047e 100644
--- a/src/components/big-card.tsx
+++ b/src/components/big-card.tsx
@@ -1,9 +1,10 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 
 import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface IBigCard {
   title: React.ReactNode;
diff --git a/src/components/domain.tsx b/src/components/domain.tsx
index 2b2d25bea..77b71189d 100644
--- a/src/components/domain.tsx
+++ b/src/components/domain.tsx
@@ -1,3 +1,4 @@
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -21,7 +22,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
 
   // const onBlockDomain = () => {
   //   dispatch(openModal('CONFIRM', {
-  //     icon: require('@tabler/icons/outline/ban.svg'),
+  //     icon: banIcon,
   //     heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
   //     message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
   //     confirm: intl.formatMessage(messages.blockDomainConfirm),
@@ -38,7 +39,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
       <Text tag='span'>
         {domain}
       </Text>
-      <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
+      <IconButton iconClassName='h-5 w-5' src={lockOpenIcon} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
     </HStack>
   );
 };
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 735664fc9..92fecd6c9 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,4 +1,5 @@
 import { offset, Placement, useFloating, flip, arrow, shift } from '@floating-ui/react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -43,7 +44,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
     onOpen,
     onShiftClick,
     placement: initialPlacement = 'top',
-    src = require('@tabler/icons/outline/dots.svg'),
+    src = dotsIcon,
     title = 'Menu',
     ...filteredProps
   } = props;
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index 1983b6e67..50f06d9ba 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -1,3 +1,5 @@
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -67,7 +69,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
 
         <div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/user.svg')} />
+            <Icon src={userIcon} />
             <HStack space={1} alignItems='center' grow>
               <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
               {account.verified && <VerificationBadge />}
@@ -78,7 +80,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+              <Icon src={mapPinIcon} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx
index fd632db52..e7635c22d 100644
--- a/src/components/gameboy.tsx
+++ b/src/components/gameboy.tsx
@@ -1,6 +1,13 @@
+import { WasmBoy } from '@soapbox.pub/wasmboy';
+import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 // @ts-ignore No types available
 // eslint-disable-next-line import/no-unresolved
-import { WasmBoy } from '@soapbox.pub/wasmboy';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -139,13 +146,13 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
             theme='transparent'
             className='text-white'
             onClick={togglePaused}
-            src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')}
+            src={paused ? playerPlayIcon : playerPauseIcon}
           />
           <IconButton
             theme='transparent'
             className='text-white'
             onClick={toggleMuted}
-            src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')}
+            src={muted ? volume3Icon : volumeIcon}
           />
         </HStack>
 
@@ -153,14 +160,14 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
           <IconButton
             theme='transparent'
             className='text-white'
-            src={require('@tabler/icons/outline/download.svg')}
+            src={downloadIcon}
             onClick={handleDownload}
           />
           <IconButton
             theme='transparent'
             className='text-white'
             onClick={toggleFullscreen}
-            src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
+            src={fullscreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
           />
         </HStack>
       </HStack>
diff --git a/src/components/list.tsx b/src/components/list.tsx
index 487e2d282..5de7b3efa 100644
--- a/src/components/list.tsx
+++ b/src/components/list.tsx
@@ -1,3 +1,5 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -72,7 +74,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
         <HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'>
           {children}
 
-          <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
+          <Icon src={chevronRightIcon} className='ml-1 rtl:rotate-180' />
         </HStack>
       ) : null}
 
@@ -90,7 +92,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
             }
           >
             <Icon
-              src={require('@tabler/icons/outline/check.svg')}
+              src={checkIcon}
               className={
                 clsx({
                   'h-4 w-4 text-white dark:text-white transition-all duration-500': true,
diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx
index 33ef63645..f6a42a341 100644
--- a/src/components/load-gap.tsx
+++ b/src/components/load-gap.tsx
@@ -1,3 +1,4 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -20,7 +21,7 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
 
   return (
     <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-      <Icon src={require('@tabler/icons/outline/dots.svg')} />
+      <Icon src={dotsIcon} />
     </button>
   );
 };
diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index b3c9430b6..2eb1b2eb3 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -1,3 +1,5 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
 import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
@@ -100,8 +102,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         renderSuggestion={AutosuggestLocation}
       />
       <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <Icon src={searchIcon} className={clsx('svg-icon--search', { active: isEmpty() })} />
+        <Icon src={backspaceIcon} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 381cfdf89..7648850d9 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -1,3 +1,5 @@
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import React, { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 
@@ -156,7 +158,7 @@ const Item: React.FC<IItem> = ({
     const attachmentIcon = (
       <SvgIcon
         className={clsx('size-16 text-gray-800 dark:text-gray-200', { 'size-8': compact })}
-        src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/outline/paperclip.svg')}
+        src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || paperclipIcon}
       />
     );
 
@@ -233,7 +235,7 @@ const Item: React.FC<IItem> = ({
         target='_blank'
         title={attachment.description}
       >
-        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={require('@tabler/icons/outline/volume.svg')} /></span>
+        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={volumeIcon} /></span>
         <span className={clsx('pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-[18px] text-white opacity-90 transition-opacity duration-100 ease-linear', { 'hidden': compact })}>{ext}</span>
       </a>
     );
diff --git a/src/components/modal-root.tsx b/src/components/modal-root.tsx
index 0612b90ad..cd4daa142 100644
--- a/src/components/modal-root.tsx
+++ b/src/components/modal-root.tsx
@@ -1,3 +1,4 @@
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -74,7 +75,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       if (hasComposeContent && type === 'COMPOSE') {
         const isEditing = compose!.id !== null;
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: isEditing
             ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
             : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
@@ -93,7 +94,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       } else if (hasEventComposeContent && type === 'COMPOSE_EVENT') {
         const isEditing = getState().compose_event.id !== null;
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: isEditing
             ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
             : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
diff --git a/src/components/pending-items-row.tsx b/src/components/pending-items-row.tsx
index 4f8a250f8..5952a3b9a 100644
--- a/src/components/pending-items-row.tsx
+++ b/src/components/pending-items-row.tsx
@@ -1,3 +1,5 @@
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
+import exclamationCircleIcon from '@tabler/icons/outline/exclamation-circle.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -25,7 +27,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
           })}
           >
             <Icon
-              src={require('@tabler/icons/outline/exclamation-circle.svg')}
+              src={exclamationCircleIcon}
               className={clsx({
                 'h-5 w-5': size === 'md',
                 'h-7 w-7': size === 'lg',
@@ -43,7 +45,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
         </HStack>
 
         <Icon
-          src={require('@tabler/icons/outline/chevron-right.svg')}
+          src={chevronRightIcon}
           className='size-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
         />
       </HStack>
diff --git a/src/components/polls/poll-option.tsx b/src/components/polls/poll-option.tsx
index 1c0760188..df711263b 100644
--- a/src/components/polls/poll-option.tsx
+++ b/src/components/polls/poll-option.tsx
@@ -1,3 +1,5 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -86,7 +88,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/outline/check.svg')} className='size-4 text-white dark:text-primary-900' />
+              <Icon src={checkIcon} className='size-4 text-white dark:text-primary-900' />
             )}
           </span>
         </div>
@@ -143,7 +145,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
             <HStack space={2} alignItems='center' className='relative'>
               {voted ? (
                 <Icon
-                  src={require('@tabler/icons/outline/circle-check.svg')}
+                  src={circleCheckIcon}
                   alt={intl.formatMessage(messages.voted)}
                   className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
                 />
diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index fe51863c1..2f9a2e436 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -1,3 +1,7 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState, useEffect } from 'react';
@@ -135,7 +139,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       )}
       <HStack space={1} alignItems='center'>
         <Text tag='span' theme='muted'>
-          <Icon src={require('@tabler/icons/outline/link.svg')} />
+          <Icon src={linkIcon} />
         </Text>
         <Text tag='span' theme='muted' size='sm' direction={direction}>
           {card.provider_name}
@@ -168,10 +172,10 @@ const PreviewCard: React.FC<IPreviewCard> = ({
     if (embedded) {
       embed = renderVideo();
     } else {
-      let iconVariant = require('@tabler/icons/outline/player-play.svg');
+      let iconVariant = playerPlayIcon;
 
       if (card.type === 'photo') {
-        iconVariant = require('@tabler/icons/outline/zoom-in.svg');
+        iconVariant = zoomInIcon;
       }
 
       embed = (
@@ -198,7 +202,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                     className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'
                   >
                     <Icon
-                      src={require('@tabler/icons/outline/external-link.svg')}
+                      src={externalLinkIcon}
                       className='size-6 text-inherit'
                     />
                   </a>
diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index b204e3d45..91232dce6 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -1,4 +1,5 @@
 import { useFloating } from '@floating-ui/react';
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
@@ -123,7 +124,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
             {account.local ? (
               <HStack alignItems='center' space={0.5}>
                 <Icon
-                  src={require('@tabler/icons/outline/calendar.svg')}
+                  src={calendarIcon}
                   className='size-4 text-gray-800 dark:text-gray-200'
                 />
 
diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx
index c70e00f5f..b19693261 100644
--- a/src/components/quoted-status-indicator.tsx
+++ b/src/components/quoted-status-indicator.tsx
@@ -1,3 +1,4 @@
+import quoteIcon from '@tabler/icons/outline/quote.svg';
 import React, { useCallback } from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
@@ -18,7 +19,7 @@ const QuotedStatusIndicator: React.FC<IQuotedStatusIndicator> = ({ statusId }) =
 
   return (
     <HStack alignItems='center' space={1}>
-      <Icon className='size-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
+      <Icon className='size-5' src={quoteIcon} aria-hidden />
       <Text truncate>{status.url}</Text>
     </HStack>
   );
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index b90e753e6..569d81503 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -85,7 +86,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   if (onCancel) {
     actions = {
       onActionClick: handleClose,
-      actionIcon: require('@tabler/icons/outline/x.svg'),
+      actionIcon: xIcon,
       actionAlignment: 'top',
       actionTitle: intl.formatMessage(messages.cancel),
     };
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 489aa0503..31b32ceb6 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -1,3 +1,4 @@
+import arrowBarToUpIcon from '@tabler/icons/outline/arrow-bar-to-up.svg';
 import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
@@ -92,7 +93,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
       >
         <Icon
           className='size-4'
-          src={require('@tabler/icons/outline/arrow-bar-to-up.svg')}
+          src={arrowBarToUpIcon}
         />
 
         <Text theme='inherit' size='sm'>
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index f5ab9fcd3..2e4d5bd64 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -1,3 +1,21 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import codeIcon from '@tabler/icons/outline/code.svg';
+import filterIcon from '@tabler/icons/outline/filter.svg';
+import hashIcon from '@tabler/icons/outline/hash.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 import clsx from 'clsx';
 import React, { useCallback } from 'react';
@@ -163,7 +181,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
           <IconButton
             title={intl.formatMessage(messages.close)}
             onClick={handleClose}
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             ref={closeButtonRef}
             iconClassName='h-6 w-6'
             className='absolute right-0 top-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300'
@@ -186,7 +204,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to={`/@${account.acct}`}
-                    icon={require('@tabler/icons/outline/user.svg')}
+                    icon={userIcon}
                     text={intl.formatMessage(messages.profile)}
                     onClick={onClose}
                   />
@@ -194,7 +212,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {(account.locked || followRequestsCount > 0) && (
                     <SidebarLink
                       to='/follow_requests'
-                      icon={require('@tabler/icons/outline/user-plus.svg')}
+                      icon={userPlusIcon}
                       text={intl.formatMessage(messages.followRequests)}
                       onClick={onClose}
                     />
@@ -203,7 +221,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.bookmarks && (
                     <SidebarLink
                       to='/bookmarks'
-                      icon={require('@tabler/icons/outline/bookmark.svg')}
+                      icon={bookmarkIcon}
                       text={intl.formatMessage(messages.bookmarks)}
                       onClick={onClose}
                     />
@@ -212,7 +230,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.groups && (
                     <SidebarLink
                       to='/groups'
-                      icon={require('@tabler/icons/outline/circles.svg')}
+                      icon={circlesIcon}
                       text={intl.formatMessage(messages.groups)}
                       onClick={onClose}
                     />
@@ -221,7 +239,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.lists && (
                     <SidebarLink
                       to='/lists'
-                      icon={require('@tabler/icons/outline/list.svg')}
+                      icon={listIcon}
                       text={intl.formatMessage(messages.lists)}
                       onClick={onClose}
                     />
@@ -230,7 +248,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.events && (
                     <SidebarLink
                       to='/events'
-                      icon={require('@tabler/icons/outline/calendar-event.svg')}
+                      icon={calendarEventIcon}
                       text={intl.formatMessage(messages.events)}
                       onClick={onClose}
                     />
@@ -239,7 +257,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {settings.get('isDeveloper') && (
                     <SidebarLink
                       to='/developers'
-                      icon={require('@tabler/icons/outline/code.svg')}
+                      icon={codeIcon}
                       text={intl.formatMessage(messages.developers)}
                       onClick={onClose}
                     />
@@ -250,7 +268,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                     <SidebarLink
                       to='/timeline/local'
-                      icon={features.federating ? require('@tabler/icons/outline/at.svg') : require('@tabler/icons/outline/world.svg')}
+                      icon={features.federating ? atIcon : worldIcon}
                       text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                       onClick={onClose}
                     />
@@ -258,7 +276,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     {features.federating && (
                       <SidebarLink
                         to='/timeline/global'
-                        icon={require('@tabler/icons/outline/world.svg')}
+                        icon={worldIcon}
                         text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
                         onClick={onClose}
                       />
@@ -270,7 +288,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.blocks && (
                     <SidebarLink
                       to='/blocks'
-                      icon={require('@tabler/icons/outline/ban.svg')}
+                      icon={banIcon}
                       text={intl.formatMessage(messages.blocks)}
                       onClick={onClose}
                     />
@@ -278,14 +296,14 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/mutes'
-                    icon={require('@tabler/icons/outline/circle-x.svg')}
+                    icon={circleXIcon}
                     text={intl.formatMessage(messages.mutes)}
                     onClick={onClose}
                   />
 
                   <SidebarLink
                     to='/settings/preferences'
-                    icon={require('@tabler/icons/outline/settings.svg')}
+                    icon={settingsIcon}
                     text={intl.formatMessage(messages.preferences)}
                     onClick={onClose}
                     count={settingsNotifications.size}
@@ -294,7 +312,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.federating && (
                     <SidebarLink
                       to='/domain_blocks'
-                      icon={require('@tabler/icons/outline/ban.svg')}
+                      icon={banIcon}
                       text={intl.formatMessage(messages.domainBlocks)}
                       onClick={onClose}
                     />
@@ -303,7 +321,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {(features.filters || features.filtersV2) && (
                     <SidebarLink
                       to='/filters'
-                      icon={require('@tabler/icons/outline/filter.svg')}
+                      icon={filterIcon}
                       text={intl.formatMessage(messages.filters)}
                       onClick={onClose}
                     />
@@ -312,7 +330,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.followedHashtagsList && (
                     <SidebarLink
                       to='/followed_tags'
-                      icon={require('@tabler/icons/outline/hash.svg')}
+                      icon={hashIcon}
                       text={intl.formatMessage(messages.followedTags)}
                       onClick={onClose}
                     />
@@ -321,7 +339,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {account.admin && (
                     <SidebarLink
                       to='/soapbox/config'
-                      icon={require('@tabler/icons/outline/settings.svg')}
+                      icon={settingsIcon}
                       text={intl.formatMessage(messages.soapboxConfig)}
                       onClick={onClose}
                     />
@@ -331,7 +349,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/logout'
-                    icon={require('@tabler/icons/outline/logout.svg')}
+                    icon={logoutIcon}
                     text={intl.formatMessage(messages.logout)}
                     onClick={onClickLogOut}
                   />
@@ -346,7 +364,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         </Text>
 
                         <Icon
-                          src={require('@tabler/icons/outline/chevron-down.svg')}
+                          src={chevronDownIcon}
                           className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
                             'rotate-180': switcher,
                           })}
@@ -359,7 +377,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
+                          <Icon className='size-4 text-primary-500' src={plusIcon} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>
diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx
index adab520b4..da887902d 100644
--- a/src/components/sidebar-navigation.tsx
+++ b/src/components/sidebar-navigation.tsx
@@ -1,3 +1,25 @@
+import bellFilledIcon from '@tabler/icons/filled/bell.svg';
+import circlesFilledIcon from '@tabler/icons/filled/circles.svg';
+import homeFilledIcon from '@tabler/icons/filled/home.svg';
+import settingsFilledIcon from '@tabler/icons/filled/settings.svg';
+import userFilledIcon from '@tabler/icons/filled/user.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import codeIcon from '@tabler/icons/outline/code.svg';
+import dashboardIcon from '@tabler/icons/outline/dashboard.svg';
+import dotsCircleHorizontalIcon from '@tabler/icons/outline/dots-circle-horizontal.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -43,7 +65,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/follow_requests',
           text: intl.formatMessage(messages.follow_requests),
-          icon: require('@tabler/icons/outline/user-plus.svg'),
+          icon: userPlusIcon,
           count: followRequestsCount,
         });
       }
@@ -52,7 +74,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/bookmarks',
           text: intl.formatMessage(messages.bookmarks),
-          icon: require('@tabler/icons/outline/bookmark.svg'),
+          icon: bookmarkIcon,
         });
       }
 
@@ -60,7 +82,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/lists',
           text: intl.formatMessage(messages.lists),
-          icon: require('@tabler/icons/outline/list.svg'),
+          icon: listIcon,
         });
       }
 
@@ -68,14 +90,14 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/events',
           text: intl.formatMessage(messages.events),
-          icon: require('@tabler/icons/outline/calendar-event.svg'),
+          icon: calendarEventIcon,
         });
       }
 
       if (isDeveloper) {
         menu.push({
           to: '/developers',
-          icon: require('@tabler/icons/outline/code.svg'),
+          icon: codeIcon,
           text: intl.formatMessage(messages.developers),
         });
       }
@@ -92,7 +114,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/chats'
-          icon={require('@tabler/icons/outline/messages.svg')}
+          icon={messagesIcon}
           count={unreadChatsCount}
           countMax={9}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@@ -104,7 +126,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/messages'
-          icon={require('@tabler/icons/outline/mail.svg')}
+          icon={mailIcon}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );
@@ -118,14 +140,14 @@ const SidebarNavigation = () => {
       <Stack space={2}>
         <SidebarNavigationLink
           to='/'
-          icon={require('@tabler/icons/outline/home.svg')}
-          activeIcon={require('@tabler/icons/filled/home.svg')}
+          icon={homeIcon}
+          activeIcon={homeFilledIcon}
           text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
         />
 
         <SidebarNavigationLink
           to='/search'
-          icon={require('@tabler/icons/outline/search.svg')}
+          icon={searchIcon}
           text={<FormattedMessage id='tabs_bar.search' defaultMessage='Discover' />}
         />
 
@@ -133,8 +155,8 @@ const SidebarNavigation = () => {
           <>
             <SidebarNavigationLink
               to='/notifications'
-              icon={require('@tabler/icons/outline/bell.svg')}
-              activeIcon={require('@tabler/icons/filled/bell.svg')}
+              icon={bellIcon}
+              activeIcon={bellFilledIcon}
               count={notificationCount}
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
@@ -144,23 +166,23 @@ const SidebarNavigation = () => {
             {features.groups && (
               <SidebarNavigationLink
                 to='/groups'
-                icon={require('@tabler/icons/outline/circles.svg')}
-                activeIcon={require('@tabler/icons/filled/circles.svg')}
+                icon={circlesIcon}
+                activeIcon={circlesFilledIcon}
                 text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
               />
             )}
 
             <SidebarNavigationLink
               to={`/@${account.acct}`}
-              icon={require('@tabler/icons/outline/user.svg')}
-              activeIcon={require('@tabler/icons/filled/user.svg')}
+              icon={userIcon}
+              activeIcon={userFilledIcon}
               text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
             />
 
             <SidebarNavigationLink
               to='/settings'
-              icon={require('@tabler/icons/outline/settings.svg')}
-              activeIcon={require('@tabler/icons/filled/settings.svg')}
+              icon={settingsIcon}
+              activeIcon={settingsFilledIcon}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
               count={settingsNotifications.size}
             />
@@ -168,7 +190,7 @@ const SidebarNavigation = () => {
             {account.staff && (
               <SidebarNavigationLink
                 to='/soapbox/admin'
-                icon={require('@tabler/icons/outline/dashboard.svg')}
+                icon={dashboardIcon}
                 count={dashboardCount}
                 text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
               />
@@ -181,7 +203,7 @@ const SidebarNavigation = () => {
             {(account || !restrictUnauth.timelines.local) && (
               <SidebarNavigationLink
                 to='/timeline/local'
-                icon={features.federating ? require('@tabler/icons/outline/at.svg') : require('@tabler/icons/outline/world.svg')}
+                icon={features.federating ? atIcon : worldIcon}
                 text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
               />
             )}
@@ -189,7 +211,7 @@ const SidebarNavigation = () => {
             {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
               <SidebarNavigationLink
                 to='/timeline/global'
-                icon={require('@tabler/icons/outline/world.svg')}
+                icon={worldIcon}
                 text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
               />
             )}
@@ -199,7 +221,7 @@ const SidebarNavigation = () => {
         {menu.length > 0 && (
           <DropdownMenu items={menu} placement='top'>
             <SidebarNavigationLink
-              icon={require('@tabler/icons/outline/dots-circle-horizontal.svg')}
+              icon={dotsCircleHorizontalIcon}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
           </DropdownMenu>
diff --git a/src/components/site-logo.tsx b/src/components/site-logo.tsx
index e42d19e52..cc107b266 100644
--- a/src/components/site-logo.tsx
+++ b/src/components/site-logo.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
 
+import soapboxLogoWhiteSrc from 'soapbox/assets/images/soapbox-logo-white.svg';
+import soapboxLogoSrc from 'soapbox/assets/images/soapbox-logo.svg';
 import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
 
 interface ISiteLogo extends React.ComponentProps<'img'> {
@@ -19,9 +21,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   if (theme === 'dark') darkMode = true;
 
   /** Soapbox logo. */
-  const soapboxLogo = darkMode
-    ? require('soapbox/assets/images/soapbox-logo-white.svg')
-    : require('soapbox/assets/images/soapbox-logo.svg');
+  const soapboxLogo = darkMode ? soapboxLogoWhiteSrc : soapboxLogoSrc;
 
   // Use the right logo if provided, then use fallbacks.
   const getSrc = () => {
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 93b03cd15..4c2add1be 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -1,3 +1,35 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import arrowsVerticalIcon from '@tabler/icons/outline/arrows-vertical.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bellOffIcon from '@tabler/icons/outline/bell-off.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import bookmarkOffIcon from '@tabler/icons/outline/bookmark-off.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import clipboardCopyIcon from '@tabler/icons/outline/clipboard-copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import foldersIcon from '@tabler/icons/outline/folders.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messageCircleIcon from '@tabler/icons/outline/message-circle.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
+import quoteIcon from '@tabler/icons/outline/quote.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
+import thumbDownIcon from '@tabler/icons/outline/thumb-down.svg';
+import thumbUpIcon from '@tabler/icons/outline/thumb-up.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory, useRouteMatch } from 'react-router-dom';
@@ -238,7 +270,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         dispatch(deleteStatus(status.id, withRedraft));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: withRedraft ? require('@tabler/icons/outline/edit.svg') : require('@tabler/icons/outline/trash.svg'),
+          icon: withRedraft ? editIcon : trashIcon,
           heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
           message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
           confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@@ -319,7 +351,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     const account = status.account;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
       message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
       confirm: intl.formatMessage(messages.blockConfirm),
@@ -409,7 +441,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     if (expandable) {
       menu.push({
         text: intl.formatMessage(messages.open),
-        icon: require('@tabler/icons/outline/arrows-vertical.svg'),
+        icon: arrowsVerticalIcon,
         to: `/@${status.account.acct}/posts/${status.id}`,
       });
     }
@@ -418,14 +450,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+        icon: clipboardCopyIcon,
       });
 
       if (features.embeds && account.local) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: handleEmbed,
-          icon: require('@tabler/icons/outline/share.svg'),
+          icon: shareIcon,
         });
       }
     }
@@ -436,7 +468,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
-        icon: require('@tabler/icons/outline/external-link.svg'),
+        icon: externalLinkIcon,
         href: externalNostrUrl || status.uri,
         target: '_blank',
       });
@@ -454,7 +486,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpinFromGroup : messages.pinToGroup),
           action: handleGroupPinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       }
     }
@@ -463,7 +495,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
+        icon: status.bookmarked ? bookmarkOffIcon : bookmarkIcon,
       });
     }
 
@@ -471,7 +503,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(status.pleroma.get('bookmark_folder') ? messages.bookmarkChangeFolder : messages.bookmarkSetFolder),
         action: handleBookmarkFolderClick,
-        icon: require('@tabler/icons/outline/folders.svg'),
+        icon: foldersIcon,
       });
     }
 
@@ -480,7 +512,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     menu.push({
       text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
       action: handleConversationMuteClick,
-      icon: mutingConversation ? require('@tabler/icons/outline/bell.svg') : require('@tabler/icons/outline/bell-off.svg'),
+      icon: mutingConversation ? bellIcon : bellOffIcon,
     });
 
     menu.push(null);
@@ -490,14 +522,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: handlePinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       } else {
         if (status.visibility === 'private') {
           menu.push({
             text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
             action: handleReblogClick,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         }
       }
@@ -505,20 +537,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: handleDeleteClick,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
       if (features.editStatuses) {
         menu.push({
           text: intl.formatMessage(messages.edit),
           action: handleEditClick,
-          icon: require('@tabler/icons/outline/edit.svg'),
+          icon: editIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.redraft),
           action: handleRedraftClick,
-          icon: require('@tabler/icons/outline/edit.svg'),
+          icon: editIcon,
           destructive: true,
         });
       }
@@ -526,20 +558,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: handleMentionClick,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (status.account.pleroma?.accepts_chat_messages === true) {
         menu.push({
           text: intl.formatMessage(messages.chat, { name: username }),
           action: handleChatClick,
-          icon: require('@tabler/icons/outline/messages.svg'),
+          icon: messagesIcon,
         });
       } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -547,7 +579,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       if (features.groupsMuting && status.group) {
         menu.push({
           text: isMutingGroup ? intl.formatMessage(messages.unmuteGroup) : intl.formatMessage(messages.muteGroup),
-          icon: require('@tabler/icons/outline/volume-3.svg'),
+          icon: volume3Icon,
           action: isMutingGroup ? handleUnmuteGroupClick : handleMuteGroupClick,
         });
         menu.push(null);
@@ -556,19 +588,19 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: handleMuteClick,
-        icon: require('@tabler/icons/outline/volume-3.svg'),
+        icon: volume3Icon,
       });
       if (features.blocks) {
         menu.push({
           text: intl.formatMessage(messages.block, { name: username }),
           action: handleBlockClick,
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: handleReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -590,7 +622,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: 'Ban from Group',
           action: handleBlockFromGroup,
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
           destructive: true,
         });
       }
@@ -599,7 +631,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(messages.groupModDelete),
           action: handleDeleteFromGroup,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -611,28 +643,28 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: username }),
         action: onModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
 
       if (isAdmin) {
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.id}/`,
-          icon: require('@tabler/icons/outline/pencil.svg'),
+          icon: pencilIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
       });
 
       if (!ownAccount) {
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -670,14 +702,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
 
   const menu = _makeMenu(publicStatus);
-  let reblogIcon = require('@tabler/icons/outline/repeat.svg');
+  let reblogIcon = repeatIcon;
   let replyTitle;
   let replyDisabled = false;
 
   if (status.visibility === 'direct') {
-    reblogIcon = require('@tabler/icons/outline/mail.svg');
+    reblogIcon = mailIcon;
   } else if (status.visibility === 'private') {
-    reblogIcon = require('@tabler/icons/outline/lock.svg');
+    reblogIcon = lockIcon;
   }
 
   if ((status.group as Group)?.membership_required && !groupRelationship?.member) {
@@ -688,11 +720,11 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const reblogMenu = [{
     text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
     action: handleReblogClick,
-    icon: require('@tabler/icons/outline/repeat.svg'),
+    icon: repeatIcon,
   }, {
     text: intl.formatMessage(messages.quotePost),
     action: handleQuoteClick,
-    icon: require('@tabler/icons/outline/quote.svg'),
+    icon: quoteIcon,
   }];
 
   const reblogButton = (
@@ -741,7 +773,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         >
           <StatusActionButton
             title={replyTitle}
-            icon={require('@tabler/icons/outline/message-circle.svg')}
+            icon={messageCircleIcon}
             onClick={handleReplyClick}
             count={replyCount}
             text={withLabels ? intl.formatMessage(messages.reply) : undefined}
@@ -766,7 +798,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           <StatusReactionWrapper statusId={status.id}>
             <StatusActionButton
               title={meEmojiTitle}
-              icon={require('@tabler/icons/outline/heart.svg')}
+              icon={heartIcon}
               filled
               color='accent'
               active={Boolean(meEmojiName)}
@@ -779,7 +811,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         ) : (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}
-            icon={features.dislikes ? require('@tabler/icons/outline/thumb-up.svg') : require('@tabler/icons/outline/heart.svg')}
+            icon={features.dislikes ? thumbUpIcon : heartIcon}
             color='accent'
             filled
             onClick={handleFavouriteClick}
@@ -793,7 +825,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {features.dislikes && (
           <StatusActionButton
             title={intl.formatMessage(messages.disfavourite)}
-            icon={require('@tabler/icons/outline/thumb-down.svg')}
+            icon={thumbDownIcon}
             color='accent'
             filled
             onClick={handleDislikeClick}
@@ -807,7 +839,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {(acceptsZaps) && (
           <StatusActionButton
             title={intl.formatMessage(messages.zap)}
-            icon={require('@tabler/icons/outline/bolt.svg')}
+            icon={boltIcon}
             color='accent'
             filled
             onClick={handleZapClick}
@@ -821,7 +853,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {canShare && (
           <StatusActionButton
             title={intl.formatMessage(messages.share)}
-            icon={require('@tabler/icons/outline/upload.svg')}
+            icon={uploadIcon}
             onClick={handleShareClick}
             theme={statusActionButtonTheme}
           />
@@ -830,7 +862,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         <DropdownMenu items={menu} status={status}>
           <StatusActionButton
             title={intl.formatMessage(messages.more)}
-            icon={require('@tabler/icons/outline/dots.svg')}
+            icon={dotsIcon}
             theme={statusActionButtonTheme}
           />
         </DropdownMenu>
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 8d537aa62..3f7c4011b 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -1,3 +1,4 @@
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
 import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser';
 import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
@@ -27,7 +28,7 @@ interface IReadMoreButton {
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
   <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
     <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-    <Icon className='inline-block size-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
+    <Icon className='inline-block size-5' src={chevronRightIcon} />
   </button>
 );
 
diff --git a/src/components/status.tsx b/src/components/status.tsx
index 022eab385..016153563 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -1,3 +1,6 @@
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import pinnedIcon from '@tabler/icons/outline/pinned.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
@@ -212,7 +215,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
+          icon={<Icon src={repeatIcon} className='size-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by_with_group'
@@ -252,7 +255,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
+          icon={<Icon src={repeatIcon} className='size-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by'
@@ -279,7 +282,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='size-4 text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={pinnedIcon} className='size-4 text-gray-600 dark:text-gray-400' />}
           text={
             <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
           }
@@ -289,7 +292,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
+          icon={<Icon src={circlesIcon} className='size-4 text-primary-600 dark:text-accent-blue' />}
           text={
             <FormattedMessage
               id='status.group'
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index cb50c722b..3c71a5cd2 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -1,3 +1,8 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
+import headsetIcon from '@tabler/icons/outline/headset.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
 import React, { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -61,7 +66,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       dispatch(deleteStatus(status.id, false));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         heading: intl.formatMessage(messages.deleteHeading),
         message: intl.formatMessage(messages.deleteMessage),
         confirm: intl.formatMessage(messages.deleteConfirm),
@@ -75,7 +80,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       {
         text: intl.formatMessage(messages.delete),
         action: handleDeleteStatus,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       },
     ];
@@ -99,7 +104,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       {visible ? (
         <Button
           text={intl.formatMessage(messages.hide)}
-          icon={require('@tabler/icons/outline/eye-off.svg')}
+          icon={eyeOffIcon}
           onClick={toggleVisibility}
           theme='primary'
           size='sm'
@@ -140,7 +145,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
                         type='button'
                         theme='outline'
                         size='sm'
-                        icon={require('@tabler/icons/outline/headset.svg')}
+                        icon={headsetIcon}
                       >
                         {intl.formatMessage(messages.contact)}
                       </Button>
@@ -153,7 +158,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
                 type='button'
                 theme='outline'
                 size='sm'
-                icon={require('@tabler/icons/outline/eye.svg')}
+                icon={eyeIcon}
                 onClick={toggleVisibility}
               >
                 {intl.formatMessage(messages.show)}
@@ -162,7 +167,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
               {(isUnderReview && isOwnStatus) ? (
                 <DropdownMenu
                   items={menu}
-                  src={require('@tabler/icons/outline/dots.svg')}
+                  src={dotsIcon}
                 />
               ) : null}
             </HStack>
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index 08d792e22..35008843c 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -1,3 +1,14 @@
+import bellFilledIcon from '@tabler/icons/filled/bell.svg';
+import circlesFilledIcon from '@tabler/icons/filled/circles.svg';
+import homeFilledIcon from '@tabler/icons/filled/home.svg';
+import mailFilledIcon from '@tabler/icons/filled/mail.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import dashboardIcon from '@tabler/icons/outline/dashboard.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -19,7 +30,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.chats) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
           to='/chats'
           exact
@@ -32,8 +43,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.directTimeline || features.conversations) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/mail.svg')}
-          activeSrc={require('@tabler/icons/filled/mail.svg')}
+          src={mailIcon}
+          activeSrc={mailFilledIcon}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
           to='/messages'
           paths={['/messages', '/conversations']}
@@ -47,8 +58,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   return (
     <div className='thumb-navigation'>
       <ThumbNavigationLink
-        src={require('@tabler/icons/outline/home.svg')}
-        activeSrc={require('@tabler/icons/filled/home.svg')}
+        src={homeIcon}
+        activeSrc={homeFilledIcon}
         text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
         to='/'
         exact
@@ -56,8 +67,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {features.groups && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/circles.svg')}
-          activeSrc={require('@tabler/icons/filled/circles.svg')}
+          src={circlesIcon}
+          activeSrc={circlesFilledIcon}
           text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
           to='/groups'
           exact
@@ -65,7 +76,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
       )}
 
       <ThumbNavigationLink
-        src={require('@tabler/icons/outline/search.svg')}
+        src={searchIcon}
         text={<FormattedMessage id='navigation.search' defaultMessage='Discover' />}
         to='/search'
         exact
@@ -73,8 +84,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {account && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/bell.svg')}
-          activeSrc={require('@tabler/icons/filled/bell.svg')}
+          src={bellIcon}
+          activeSrc={bellFilledIcon}
           text={<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />}
           to='/notifications'
           exact
@@ -86,7 +97,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {(account && account.staff) && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/dashboard.svg')}
+          src={dashboardIcon}
           text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
           to='/soapbox/admin'
           count={dashboardCount}
diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx
index bfe0fe4e6..86a996807 100644
--- a/src/components/translate-button.tsx
+++ b/src/components/translate-button.tsx
@@ -1,3 +1,4 @@
+import languageIcon from '@tabler/icons/outline/language.svg';
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -53,7 +54,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
         <Button
           theme='muted'
           text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
-          icon={require('@tabler/icons/outline/language.svg')}
+          icon={languageIcon}
           onClick={handleTranslate}
         />
         <Text theme='muted'>
@@ -68,7 +69,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
       <Button
         theme='muted'
         text={<FormattedMessage id='status.translate' defaultMessage='Translate' />}
-        icon={require('@tabler/icons/outline/language.svg')}
+        icon={languageIcon}
         onClick={handleTranslate}
       />
     </div>
diff --git a/src/components/ui/accordion/accordion.tsx b/src/components/ui/accordion/accordion.tsx
index ec9e1a4cf..577bf1234 100644
--- a/src/components/ui/accordion/accordion.tsx
+++ b/src/components/ui/accordion/accordion.tsx
@@ -1,3 +1,6 @@
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -60,7 +63,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
           {menu && (
             <DropdownMenu
               items={menu}
-              src={require('@tabler/icons/outline/dots-vertical.svg')}
+              src={dotsVerticalIcon}
             />
           )}
           {action && actionIcon && (
@@ -72,7 +75,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             </button>
           )}
           <Icon
-            src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
+            src={expanded ? chevronUpIcon : chevronDownIcon}
             className='size-5 text-gray-700 dark:text-gray-600'
           />
         </HStack>
diff --git a/src/components/ui/avatar/avatar.tsx b/src/components/ui/avatar/avatar.tsx
index c6d1af6c8..99627b5b2 100644
--- a/src/components/ui/avatar/avatar.tsx
+++ b/src/components/ui/avatar/avatar.tsx
@@ -1,3 +1,4 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
@@ -35,7 +36,7 @@ const Avatar = (props: IAvatar) => {
         className={clsx('flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-900', className)}
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-off.svg')}
+          src={photoOffIcon}
           className='size-4 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card/card.tsx
index 242d50f34..31887948e 100644
--- a/src/components/ui/card/card.tsx
+++ b/src/components/ui/card/card.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -72,7 +73,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
 
     return (
       <Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
-        <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
+        <SvgIcon src={arrowLeftIcon} className='size-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel/carousel.tsx
index 1cd4f2e8a..1739587c4 100644
--- a/src/components/ui/carousel/carousel.tsx
+++ b/src/components/ui/carousel/carousel.tsx
@@ -1,3 +1,5 @@
+import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import React, { useEffect, useState } from 'react';
 
 import { useDimensions } from 'soapbox/hooks';
@@ -68,7 +70,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
           disabled={!hasPrevPage || isDisabled}
         >
           <Icon
-            src={require('@tabler/icons/outline/chevron-left.svg')}
+            src={chevronLeftIcon}
             className='size-5 text-black dark:text-white'
           />
         </button>
@@ -100,7 +102,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
           disabled={!hasNextPage || isDisabled}
         >
           <Icon
-            src={require('@tabler/icons/outline/chevron-right.svg')}
+            src={chevronRightIcon}
             className='size-5 text-black dark:text-white'
           />
         </button>
diff --git a/src/components/ui/emoji-selector/emoji-selector.tsx b/src/components/ui/emoji-selector/emoji-selector.tsx
index 9a28bffa1..1ba4ee14f 100644
--- a/src/components/ui/emoji-selector/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector/emoji-selector.tsx
@@ -1,4 +1,5 @@
 import { shift, useFloating, Placement, offset, OffsetOptions } from '@floating-ui/react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
@@ -134,7 +135,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
           {all && (
             <IconButton
               className='text-gray-600 hover:text-gray-600 dark:hover:text-white'
-              src={require('@tabler/icons/outline/dots.svg')}
+              src={dotsIcon}
               onClick={handleExpand}
             />
           )}
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
index 94daf1dcb..6bc634636 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input/input.tsx
@@ -1,3 +1,5 @@
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -123,7 +125,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
               >
                 <SvgIcon
-                  src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
+                  src={revealed ? eyeOffIcon : eyeIcon}
                   className='size-4'
                 />
               </button>
diff --git a/src/components/ui/language-dropdown/language-dropdown.tsx b/src/components/ui/language-dropdown/language-dropdown.tsx
index b6eac2f15..756ada8b6 100644
--- a/src/components/ui/language-dropdown/language-dropdown.tsx
+++ b/src/components/ui/language-dropdown/language-dropdown.tsx
@@ -1,3 +1,4 @@
+import worldIcon from '@tabler/icons/outline/world.svg';
 import React from 'react';
 
 import { openDropdownMenu } from 'soapbox/actions/dropdown-menu';
@@ -26,7 +27,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
   const dispatch = useAppDispatch();
   const formattedLanguages = formatLanguages(languages);
 
-  const newMenu: MenuItem[] = [{ icon: require('@tabler/icons/outline/world.svg'), text: 'Default', action: () => {
+  const newMenu: MenuItem[] = [{ icon: worldIcon, text: 'Default', action: () => {
     setLanguage('');
   } }];
 
@@ -51,7 +52,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
           {language.toUpperCase()}
         </button>
       ) : (
-        <SvgIcon src={require('@tabler/icons/outline/world.svg')} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
+        <SvgIcon src={worldIcon} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
       )}
     </DropdownMenu>
   );
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal/modal.tsx
index 82b9e6482..6d516fc91 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -1,3 +1,5 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -72,7 +74,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
   cancelAction,
   cancelText,
   children,
-  closeIcon = require('@tabler/icons/outline/x.svg'),
+  closeIcon = xIcon,
   closePosition = 'right',
   confirmationAction,
   confirmationDisabled,
@@ -115,7 +117,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
             >
               {onBack && (
                 <IconButton
-                  src={require('@tabler/icons/outline/arrow-left.svg')}
+                  src={arrowLeftIcon}
                   title={intl.formatMessage(messages.back)}
                   onClick={onBack}
                   className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
diff --git a/src/components/ui/streamfield/streamfield.tsx b/src/components/ui/streamfield/streamfield.tsx
index 1dbb683d3..6ad51f9e2 100644
--- a/src/components/ui/streamfield/streamfield.tsx
+++ b/src/components/ui/streamfield/streamfield.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -83,7 +84,7 @@ const Streamfield: React.FC<IStreamfield> = ({
                 <IconButton
                   iconClassName='h-4 w-4'
                   className='bg-transparent text-gray-600 hover:text-gray-600'
-                  src={require('@tabler/icons/outline/x.svg')}
+                  src={xIcon}
                   onClick={() => onRemoveItem(i)}
                   title={intl.formatMessage(messages.remove)}
                 />
diff --git a/src/components/ui/tag-input/tag.tsx b/src/components/ui/tag-input/tag.tsx
index d6bf05c75..4ca668fef 100644
--- a/src/components/ui/tag-input/tag.tsx
+++ b/src/components/ui/tag-input/tag.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 
 import IconButton from '../icon-button/icon-button';
@@ -18,7 +19,7 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
 
       <IconButton
         iconClassName='h-4 w-4'
-        src={require('@tabler/icons/outline/x.svg')}
+        src={xIcon}
         onClick={() => onDelete(tag)}
       />
     </div>
diff --git a/src/components/ui/toast/toast.tsx b/src/components/ui/toast/toast.tsx
index f5a9cb2a9..11626f722 100644
--- a/src/components/ui/toast/toast.tsx
+++ b/src/components/ui/toast/toast.tsx
@@ -1,3 +1,7 @@
+import alertCircleIcon from '@tabler/icons/outline/alert-circle.svg';
+import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 import toast, { Toast as RHToast } from 'react-hot-toast';
@@ -42,7 +46,7 @@ const Toast = (props: IToast) => {
       case 'success':
         return (
           <Icon
-            src={require('@tabler/icons/outline/circle-check.svg')}
+            src={circleCheckIcon}
             className='size-6 text-success-500 dark:text-success-400'
             aria-hidden
           />
@@ -50,7 +54,7 @@ const Toast = (props: IToast) => {
       case 'info':
         return (
           <Icon
-            src={require('@tabler/icons/outline/info-circle.svg')}
+            src={infoCircleIcon}
             className='size-6 text-primary-600 dark:text-accent-blue'
             aria-hidden
           />
@@ -58,7 +62,7 @@ const Toast = (props: IToast) => {
       case 'error':
         return (
           <Icon
-            src={require('@tabler/icons/outline/alert-circle.svg')}
+            src={alertCircleIcon}
             className='size-6 text-danger-600'
             aria-hidden
           />
@@ -143,7 +147,7 @@ const Toast = (props: IToast) => {
               data-testid='toast-dismiss'
             >
               <span className='sr-only'><FormattedMessage id='lightbox.close' defaultMessage='Close' /></span>
-              <Icon src={require('@tabler/icons/outline/x.svg')} className='size-5' />
+              <Icon src={xIcon} className='size-5' />
             </button>
           </div>
         </HStack>
diff --git a/src/components/ui/widget/widget.tsx b/src/components/ui/widget/widget.tsx
index 4d2f8482b..446312c16 100644
--- a/src/components/ui/widget/widget.tsx
+++ b/src/components/ui/widget/widget.tsx
@@ -1,3 +1,4 @@
+import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
 import React from 'react';
 
 import HStack from 'soapbox/components/ui/hstack/hstack';
@@ -42,7 +43,7 @@ const Widget: React.FC<IWidget> = ({
   title,
   children,
   onActionClick,
-  actionIcon = require('@tabler/icons/outline/arrow-right.svg'),
+  actionIcon = arrowRightIcon,
   actionTitle,
   action,
 }): JSX.Element => {
diff --git a/src/components/upload-progress.tsx b/src/components/upload-progress.tsx
index 10b0490d2..e2f44fc64 100644
--- a/src/components/upload-progress.tsx
+++ b/src/components/upload-progress.tsx
@@ -1,3 +1,4 @@
+import cloudUploadIcon from '@tabler/icons/outline/cloud-upload.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -13,7 +14,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
   return (
     <HStack alignItems='center' space={2}>
       <Icon
-        src={require('@tabler/icons/outline/cloud-upload.svg')}
+        src={cloudUploadIcon}
         className='size-7 text-gray-500'
       />
 
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index 23393a54e..441ca66f9 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import bookIcon from '@tabler/icons/outline/book.svg';
 import fileCodeIcon from '@tabler/icons/outline/file-code.svg';
 import fileSpreadsheetIcon from '@tabler/icons/outline/file-spreadsheet.svg';
@@ -240,7 +241,7 @@ const Upload: React.FC<IUpload> = ({
                   'opacity-100': !active,
                 })}
               >
-                <Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
+                <Icon className='size-4' src={alertTriangleIcon} />
                 <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
               </span>
             )}
diff --git a/src/components/validation-checkmark.tsx b/src/components/validation-checkmark.tsx
index cb4e06816..2a4acd144 100644
--- a/src/components/validation-checkmark.tsx
+++ b/src/components/validation-checkmark.tsx
@@ -1,3 +1,5 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import pointIcon from '@tabler/icons/outline/point.svg';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -12,7 +14,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
   return (
     <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
       <Icon
-        src={isValid ? require('@tabler/icons/outline/check.svg') : require('@tabler/icons/outline/point.svg')}
+        src={isValid ? checkIcon : pointIcon}
         className={clsx({
           'w-4 h-4': true,
           'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,
diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx
index d4b3bca3f..108f1e9c7 100644
--- a/src/components/verification-badge.tsx
+++ b/src/components/verification-badge.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
+import verifiedIcon from 'soapbox/assets/icons/verified.svg';
 import { Icon } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
@@ -18,7 +19,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const soapboxConfig = useSoapboxConfig();
 
   // Prefer a custom icon if found
-  const icon = soapboxConfig.verifiedIcon || require('soapbox/assets/icons/verified.svg');
+  const icon = soapboxConfig.verifiedIcon || verifiedIcon;
 
   // Render component based on file extension
   const Element = icon.endsWith('.svg') ? Icon : 'img';
diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx
index b7c77a7d3..0dc5a7ea2 100644
--- a/src/features/account-gallery/components/media-item.tsx
+++ b/src/features/account-gallery/components/media-item.tsx
@@ -1,3 +1,5 @@
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
@@ -103,7 +105,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
     const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
     thumbnail = (
       <div className='relative z-[1] block size-full cursor-zoom-in leading-none text-gray-400 no-underline'>
-        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon  className='size-24' src={require('@tabler/icons/outline/volume.svg')} /></span>
+        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon  className='size-24' src={volumeIcon} /></span>
         <span className='pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 px-1.5 py-0.5 text-[11px] font-semibold leading-[18px] text-white opacity-90 transition-opacity duration-100 ease-linear'>{fileExtension}</span>
       </div>
     );
@@ -112,7 +114,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
   if (!visible) {
     icon = (
       <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
-        <SvgIcon className='size-24' src={require('@tabler/icons/outline/eye-off.svg')} />
+        <SvgIcon className='size-24' src={eyeOffIcon} />
       </span>
     );
   }
diff --git a/src/features/account-timeline/components/moved-note.tsx b/src/features/account-timeline/components/moved-note.tsx
index c8924cdbe..dbef926ed 100644
--- a/src/features/account-timeline/components/moved-note.tsx
+++ b/src/features/account-timeline/components/moved-note.tsx
@@ -1,3 +1,4 @@
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -16,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
   <div className='p-4'>
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
-        src={require('@tabler/icons/outline/briefcase.svg')}
+        src={briefcaseIcon}
         className='flex-none text-primary-600 dark:text-primary-400'
       />
 
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index a9bd79b1a..0b215ccc9 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -1,3 +1,23 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import clipboardCopyIcon from '@tabler/icons/outline/clipboard-copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import rssIcon from '@tabler/icons/outline/rss.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
+import userCheckIcon from '@tabler/icons/outline/user-check.svg';
+import userXIcon from '@tabler/icons/outline/user-x.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { List as ImmutableList } from 'immutable';
@@ -135,7 +155,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       dispatch(unblockAccount(account.id));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
         message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
         confirm: intl.formatMessage(messages.blockConfirm),
@@ -191,7 +211,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
   const onBlockDomain = (domain: string) => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
       message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications.' values={{ domain: <strong>{domain}</strong> }} />,
       confirm: intl.formatMessage(messages.blockDomainConfirm),
@@ -298,7 +318,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     if (features.rssFeeds && account.local) {
       menu.push({
         text: intl.formatMessage(messages.subscribeFeed),
-        icon: require('@tabler/icons/outline/rss.svg'),
+        icon: rssIcon,
         href: software === MASTODON ? `${account.url}.rss` : `${account.url}/feed.rss`,
         target: '_blank',
       });
@@ -308,7 +328,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.share, { name: account.username }),
         action: handleShare,
-        icon: require('@tabler/icons/outline/upload.svg'),
+        icon: uploadIcon,
       });
     }
 
@@ -321,7 +341,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.profileExternal, { domain }),
           action: () => onProfileExternal(url),
-          icon: require('@tabler/icons/outline/external-link.svg'),
+          icon: externalLinkIcon,
           href: url,
         });
       }
@@ -330,14 +350,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
     menu.push({
       text: intl.formatMessage(messages.copy),
       action: handleCopy,
-      icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+      icon: clipboardCopyIcon,
     });
 
     if (account.nostr.pubkey) {
       menu.push({
         text: intl.formatMessage(messages.npub),
         action: handleCopyNpub,
-        icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+        icon: clipboardCopyIcon,
       });
     }
 
@@ -347,7 +367,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(account.id === ownAccount.id ? messages.searchSelf : messages.search, { name: account.username }),
         action: onSearch,
-        icon: require('@tabler/icons/outline/search.svg'),
+        icon: searchIcon,
       });
     }
 
@@ -359,38 +379,38 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.edit_profile),
         to: '/settings/profile',
-        icon: require('@tabler/icons/outline/user.svg'),
+        icon: userIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.preferences),
         to: '/settings',
-        icon: require('@tabler/icons/outline/settings.svg'),
+        icon: settingsIcon,
       });
       menu.push(null);
       menu.push({
         text: intl.formatMessage(messages.mutes),
         to: '/mutes',
-        icon: require('@tabler/icons/outline/circle-x.svg'),
+        icon: circleXIcon,
       });
       if (features.blocks) {
         menu.push({
           text: intl.formatMessage(messages.blocks),
           to: '/blocks',
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: account.username }),
         action: onMention,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: account.username }),
           action: onDirect,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -399,13 +419,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.hideReblogs, { name: account.username }),
             action: onReblogToggle,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.showReblogs, { name: account.username }),
             action: onReblogToggle,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         }
 
@@ -413,7 +433,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.add_or_remove_from_list),
             action: onAddToList,
-            icon: require('@tabler/icons/outline/list.svg'),
+            icon: listIcon,
           });
         }
 
@@ -421,14 +441,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse),
             action: onEndorseToggle,
-            icon: require('@tabler/icons/outline/user-check.svg'),
+            icon: userCheckIcon,
           });
         }
       } else if (features.lists && features.unrestrictedLists) {
         menu.push({
           text: intl.formatMessage(messages.add_or_remove_from_list),
           action: onAddToList,
-          icon: require('@tabler/icons/outline/list.svg'),
+          icon: listIcon,
         });
       }
 
@@ -438,7 +458,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.removeFromFollowers),
           action: onRemoveFromFollowers,
-          icon: require('@tabler/icons/outline/user-x.svg'),
+          icon: userXIcon,
         });
       }
 
@@ -446,13 +466,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unmute, { name: account.username }),
           action: onMute,
-          icon: require('@tabler/icons/outline/circle-x.svg'),
+          icon: circleXIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.mute, { name: account.username }),
           action: onMute,
-          icon: require('@tabler/icons/outline/circle-x.svg'),
+          icon: circleXIcon,
         });
       }
 
@@ -461,13 +481,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.unblock, { name: account.username }),
             action: onBlock,
-            icon: require('@tabler/icons/outline/ban.svg'),
+            icon: banIcon,
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.block, { name: account.username }),
             action: onBlock,
-            icon: require('@tabler/icons/outline/ban.svg'),
+            icon: banIcon,
           });
         }
       }
@@ -475,7 +495,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.report, { name: account.username }),
         action: onReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -488,13 +508,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unblockDomain, { domain }),
           action: () => onUnblockDomain(domain),
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.blockDomain, { domain }),
           action: () => onBlockDomain(domain),
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
     }
@@ -505,7 +525,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: account.username }),
         action: onModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
     }
 
@@ -592,7 +612,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
       return (
         <IconButton
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           onClick={() => createAndNavigateToChat.mutate(account.id)}
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
@@ -604,7 +624,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     } else if (account.pleroma?.accepts_chat_messages) {
       return (
         <IconButton
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           onClick={() => createAndNavigateToChat.mutate(account.id)}
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
@@ -626,7 +646,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
     return (
       <IconButton
-        src={require('@tabler/icons/outline/upload.svg')}
+        src={uploadIcon}
         onClick={handleShare}
         title={intl.formatMessage(messages.share, { name: account.username })}
         theme='outlined'
@@ -639,7 +659,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const renderZapAccount = () => {
     return (
       <IconButton
-        src={require('@tabler/icons/outline/bolt.svg')}
+        src={boltIcon}
         onClick={handleZapAccount}
         title={intl.formatMessage(messages.zap, { target: account.display_name })}
         theme='outlined'
@@ -698,7 +718,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               {menu.length > 0 && (
                 <DropdownMenu items={menu} placement='bottom-end'>
                   <IconButton
-                    src={require('@tabler/icons/outline/dots.svg')}
+                    src={dotsIcon}
                     theme='outlined'
                     className='px-2'
                     iconClassName='h-4 w-4'
diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx
index fd22856f7..edffda136 100644
--- a/src/features/admin/announcements.tsx
+++ b/src/features/admin/announcements.tsx
@@ -1,3 +1,4 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React from 'react';
 import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -103,7 +104,7 @@ const Announcements: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateAnnouncement}
           theme='secondary'
           block
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index d5ca1719e..2a158f10e 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -1,3 +1,6 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -34,11 +37,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     return [{
       text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
       to: `/@${acct}/posts/${status.id}`,
-      icon: require('@tabler/icons/outline/pencil.svg'),
+      icon: pencilIcon,
     }, {
       text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
       action: handleDeleteStatus,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       destructive: true,
     }];
   };
@@ -55,7 +58,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
       <div className='flex-none'>
         <DropdownMenu
           items={menu}
-          src={require('@tabler/icons/outline/dots-vertical.svg')}
+          src={dotsVerticalIcon}
         />
       </div>
     </HStack>
diff --git a/src/features/admin/components/report.tsx b/src/features/admin/components/report.tsx
index 3f451dcb6..cf3eaa000 100644
--- a/src/features/admin/components/report.tsx
+++ b/src/features/admin/components/report.tsx
@@ -1,3 +1,6 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import hourglassEmptyIcon from '@tabler/icons/outline/hourglass-empty.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React, { useCallback, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -45,11 +48,11 @@ const Report: React.FC<IReport> = ({ id }) => {
     return [{
       text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }),
       action: handleDeactivateUser,
-      icon: require('@tabler/icons/outline/hourglass-empty.svg'),
+      icon: hourglassEmptyIcon,
     }, {
       text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }),
       action: handleDeleteUser,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       destructive: true,
     }];
   };
@@ -149,7 +152,7 @@ const Report: React.FC<IReport> = ({ id }) => {
           <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
         </Button>
 
-        <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={dotsVerticalIcon} />
       </HStack>
     </HStack>
   );
diff --git a/src/features/admin/domains.tsx b/src/features/admin/domains.tsx
index 7ae4b19f3..32b4614be 100644
--- a/src/features/admin/domains.tsx
+++ b/src/features/admin/domains.tsx
@@ -1,3 +1,4 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React, { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -122,7 +123,7 @@ const Domains: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateDomain}
           theme='secondary'
           block
diff --git a/src/features/admin/manage-zap-split.tsx b/src/features/admin/manage-zap-split.tsx
index 95d350399..dcb78a968 100644
--- a/src/features/admin/manage-zap-split.tsx
+++ b/src/features/admin/manage-zap-split.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -9,7 +10,7 @@ import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit';
 import AddNewAccount from '../ui/components/new-account-zap-split';
 import { ZapSplitSlider } from '../zap/components/zap-split-account-item';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   heading: { id: 'column.admin.zap_split', defaultMessage: 'Manage Zap Split' },
diff --git a/src/features/admin/rules.tsx b/src/features/admin/rules.tsx
index 10a840f58..cec214c65 100644
--- a/src/features/admin/rules.tsx
+++ b/src/features/admin/rules.tsx
@@ -1,3 +1,4 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -85,7 +86,7 @@ const Rules: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateRule}
           theme='secondary'
           block
diff --git a/src/features/admin/tabs/dashboard.tsx b/src/features/admin/tabs/dashboard.tsx
index 89c4903ec..4d68b589e 100644
--- a/src/features/admin/tabs/dashboard.tsx
+++ b/src/features/admin/tabs/dashboard.tsx
@@ -1,3 +1,5 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -155,7 +157,7 @@ const Dashboard: React.FC = () => {
 
             <Icon
               className='size-4'
-              src={require('@tabler/icons/outline/external-link.svg')}
+              src={externalLinkIcon}
             />
           </a>
         </ListItem>
@@ -174,7 +176,7 @@ const Dashboard: React.FC = () => {
           <List>
             <ListItem label='subscribers.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleSubscribersClick}
                 iconClassName='h-5 w-5'
               />
@@ -182,7 +184,7 @@ const Dashboard: React.FC = () => {
 
             <ListItem label='unsubscribers.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleUnsubscribersClick}
                 iconClassName='h-5 w-5'
               />
@@ -190,7 +192,7 @@ const Dashboard: React.FC = () => {
 
             <ListItem label='combined.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleCombinedClick}
                 iconClassName='h-5 w-5'
               />
diff --git a/src/features/aliases/components/account.tsx b/src/features/aliases/components/account.tsx
index 036dde092..2e20bf0ac 100644
--- a/src/features/aliases/components/account.tsx
+++ b/src/features/aliases/components/account.tsx
@@ -1,3 +1,4 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -37,7 +38,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
 
   if (!added && accountId !== me) {
     button = (
-      <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+      <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
     );
   }
 
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index cef6a1fec..85a843abd 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -1,3 +1,4 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -53,7 +54,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+          <Icon src={backspaceIcon} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index 36a3327de..01d3c0806 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -79,7 +80,7 @@ const Aliases = () => {
                 <Text tag='span'>{alias}</Text>
               </div>
               <div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
-                <Icon className='mr-1.5' src={require('@tabler/icons/outline/x.svg')} />
+                <Icon className='mr-1.5' src={xIcon} />
                 <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
               </div>
             </HStack>
diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx
index 61a43d89b..39effef8d 100644
--- a/src/features/audio/index.tsx
+++ b/src/features/audio/index.tsx
@@ -1,3 +1,8 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -534,7 +539,7 @@ const Audio: React.FC<IAudio> = (props) => {
               className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 active:text-white active:opacity-100 ')}
               onClick={togglePlay}
             >
-              <SvgIcon className='w-5' src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
+              <SvgIcon className='w-5' src={paused ? playerPlayIcon : playerPauseIcon} />
             </button>
 
             <button
@@ -546,7 +551,7 @@ const Audio: React.FC<IAudio> = (props) => {
               className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 active:text-white active:opacity-100')}
               onClick={toggleMute}
             >
-              <SvgIcon className='w-5' src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
+              <SvgIcon className='w-5' src={muted ? volume3Icon : volumeIcon} />
             </button>
 
             <div
@@ -594,7 +599,7 @@ const Audio: React.FC<IAudio> = (props) => {
               download
               target='_blank'
             >
-              <SvgIcon className='w-5' src={require('@tabler/icons/outline/download.svg')} />
+              <SvgIcon className='w-5' src={downloadIcon} />
             </a>
           </div>
         </div>
diff --git a/src/features/auth-login/components/consumer-button.tsx b/src/features/auth-login/components/consumer-button.tsx
index feac5f75b..3218d6434 100644
--- a/src/features/auth-login/components/consumer-button.tsx
+++ b/src/features/auth-login/components/consumer-button.tsx
@@ -1,3 +1,10 @@
+import brandFacebookIcon from '@tabler/icons/outline/brand-facebook.svg';
+import brandGithubIcon from '@tabler/icons/outline/brand-github.svg';
+import brandGoogleIcon from '@tabler/icons/outline/brand-google.svg';
+import brandSlackIcon from '@tabler/icons/outline/brand-slack.svg';
+import brandTwitterIcon from '@tabler/icons/outline/brand-twitter.svg';
+import brandWindowsIcon from '@tabler/icons/outline/brand-windows.svg';
+import keyIcon from '@tabler/icons/outline/key.svg';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -12,12 +19,12 @@ const messages = defineMessages({
 
 /** Map between OAuth providers and brand icons. */
 const BRAND_ICONS: Record<string, string> = {
-  twitter: require('@tabler/icons/outline/brand-twitter.svg'),
-  facebook: require('@tabler/icons/outline/brand-facebook.svg'),
-  google: require('@tabler/icons/outline/brand-google.svg'),
-  microsoft: require('@tabler/icons/outline/brand-windows.svg'),
-  slack: require('@tabler/icons/outline/brand-slack.svg'),
-  github: require('@tabler/icons/outline/brand-github.svg'),
+  twitter: brandTwitterIcon,
+  facebook: brandFacebookIcon,
+  google: brandGoogleIcon,
+  microsoft: brandWindowsIcon,
+  slack: brandSlackIcon,
+  github: brandGithubIcon,
 };
 
 interface IConsumerButton {
@@ -29,7 +36,7 @@ const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const icon = BRAND_ICONS[provider] || require('@tabler/icons/outline/key.svg');
+  const icon = BRAND_ICONS[provider] || keyIcon;
 
   const handleClick = () => {
     dispatch(prepareRequest(provider));
diff --git a/src/features/auth-login/components/registration-form.tsx b/src/features/auth-login/components/registration-form.tsx
index ea5c9c94b..43d5e895c 100644
--- a/src/features/auth-login/components/registration-form.tsx
+++ b/src/features/auth-login/components/registration-form.tsx
@@ -1,3 +1,5 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
 import axios from 'axios';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
@@ -152,7 +154,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
     const heading = confirmationHeading || approvalHeading;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/check.svg'),
+      icon: checkIcon,
       heading: heading,
       message,
       confirm: intl.formatMessage(messages.close),
@@ -255,7 +257,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
               autoCorrect='off'
               autoCapitalize='off'
               pattern='^[a-zA-Z\d_-]+'
-              icon={require('@tabler/icons/outline/at.svg')}
+              icon={atIcon}
               onChange={onUsernameChange}
               value={params.get('username', '')}
               required
diff --git a/src/features/auth-token-list/index.tsx b/src/features/auth-token-list/index.tsx
index caaf6a66f..21cad4ccd 100644
--- a/src/features/auth-token-list/index.tsx
+++ b/src/features/auth-token-list/index.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import React, { useEffect } from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
@@ -27,7 +28,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   const handleRevoke = () => {
     if (isCurrent)
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
         heading: intl.formatMessage(messages.revokeSessionHeading),
         message: intl.formatMessage(messages.revokeSessionMessage),
         confirm: intl.formatMessage(messages.revokeSessionConfirm),
diff --git a/src/features/birthdays/account.tsx b/src/features/birthdays/account.tsx
index 33d14cf1b..1cfcd4e4d 100644
--- a/src/features/birthdays/account.tsx
+++ b/src/features/birthdays/account.tsx
@@ -1,3 +1,4 @@
+import balloonIcon from '@tabler/icons/outline/balloon.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -36,7 +37,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
           date: formattedBirthday,
         })}
       >
-        <Icon src={require('@tabler/icons/outline/balloon.svg')} />
+        <Icon src={balloonIcon} />
         {formattedBirthday}
       </div>
     </HStack>
diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index 754e12cbb..e4f87046f 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -1,3 +1,5 @@
+import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
+import folderIcon from '@tabler/icons/outline/folder.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
@@ -40,7 +42,7 @@ const BookmarkFolders: React.FC = () => {
             to='/bookmarks/all'
             label={
               <HStack alignItems='center' space={2}>
-                <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
+                <Icon src={bookmarksIcon} size={20} />
                 <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
               </HStack>
             }
@@ -57,7 +59,7 @@ const BookmarkFolders: React.FC = () => {
                       src={folder.emoji_url || undefined}
                       className='size-5 flex-none'
                     />
-                  ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
+                  ) : <Icon src={folderIcon} size={20} />}
                   <span>{folder.name}</span>
                 </HStack>
               }
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index f637a7a68..3921dad63 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -1,3 +1,6 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
 import React from 'react';
@@ -93,12 +96,12 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     {
       text: intl.formatMessage(messages.editFolder),
       action: handleEditFolder,
-      icon: require('@tabler/icons/outline/edit.svg'),
+      icon: editIcon,
     },
     {
       text: intl.formatMessage(messages.deleteFolder),
       action: handleDeleteFolder,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
     },
   ] : [];
 
@@ -106,7 +109,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     <Column
       label={folder ? folder.name : intl.formatMessage(messages.heading)}
       action={
-        <DropdownMenu items={items} src={require('@tabler/icons/outline/dots-vertical.svg')} />
+        <DropdownMenu items={items} src={dotsVerticalIcon} />
       }
       transparent={!isMobile}
     >
diff --git a/src/features/chats/components/chat-composer.tsx b/src/features/chats/components/chat-composer.tsx
index 785538f20..1228836c5 100644
--- a/src/features/chats/components/chat-composer.tsx
+++ b/src/features/chats/components/chat-composer.tsx
@@ -1,3 +1,4 @@
+import sendIcon from '@tabler/icons/outline/send.svg';
 import React, { useState } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
@@ -230,7 +231,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
           ) : null}
 
           <IconButton
-            src={require('@tabler/icons/outline/send.svg')}
+            src={sendIcon}
             iconClassName='h-5 w-5'
             className='text-primary-500'
             disabled={isSubmitDisabled}
diff --git a/src/features/chats/components/chat-list-item.tsx b/src/features/chats/components/chat-list-item.tsx
index 124ecb036..ff642e95e 100644
--- a/src/features/chats/components/chat-list-item.tsx
+++ b/src/features/chats/components/chat-list-item.tsx
@@ -1,3 +1,5 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -59,7 +61,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
         },
       }));
     },
-    icon: require('@tabler/icons/outline/logout.svg'),
+    icon: logoutIcon,
   }], []);
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
@@ -124,7 +126,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <div className='hidden text-gray-600 hover:text-gray-100 group-hover:block'>
               <DropdownMenu items={menu}>
                 <IconButton
-                  src={require('@tabler/icons/outline/dots.svg')}
+                  src={dotsIcon}
                   title='Settings'
                   className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
                   iconClassName='h-4 w-4'
diff --git a/src/features/chats/components/chat-message-list-intro.tsx b/src/features/chats/components/chat-message-list-intro.tsx
index dcb0439fb..a4e84f37e 100644
--- a/src/features/chats/components/chat-message-list-intro.tsx
+++ b/src/features/chats/components/chat-message-list-intro.tsx
@@ -1,3 +1,4 @@
+import clockIcon from '@tabler/icons/outline/clock.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -107,7 +108,7 @@ const ChatMessageListIntro = () => {
         </HStack>
       ) : (
         <HStack justifyContent='center' alignItems='center' space={1} className='shrink-0'>
-          <Icon src={require('@tabler/icons/outline/clock.svg')} className='size-4 text-gray-600' />
+          <Icon src={clockIcon} className='size-4 text-gray-600' />
           {chat.message_expiration && (
             <Text size='sm' theme='muted'>
               {intl.formatMessage(messages.messageLifespan, { day: secondsToDays(chat.message_expiration) })}
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index 0f1537076..218e7bc42 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -1,3 +1,9 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import copyIcon from '@tabler/icons/outline/copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import moodSmileIcon from '@tabler/icons/outline/mood-smile.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import { useMutation } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
@@ -159,7 +165,7 @@ const ChatMessage = (props: IChatMessage) => {
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: () => handleCopyText(chatMessage),
-        icon: require('@tabler/icons/outline/copy.svg'),
+        icon: copyIcon,
       });
     }
 
@@ -167,7 +173,7 @@ const ChatMessage = (props: IChatMessage) => {
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: () => handleDeleteMessage.mutate(chatMessage.id),
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     } else {
@@ -175,13 +181,13 @@ const ChatMessage = (props: IChatMessage) => {
         menu.push({
           text: intl.formatMessage(messages.report),
           action: () => dispatch(initReport(ReportableEntities.CHAT_MESSAGE, chat.account, { chatMessage })),
-          icon: require('@tabler/icons/outline/flag.svg'),
+          icon: flagIcon,
         });
       }
       menu.push({
         text: intl.formatMessage(messages.deleteForMe),
         action: () => handleDeleteMessage.mutate(chatMessage.id),
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     }
@@ -222,7 +228,7 @@ const ChatMessage = (props: IChatMessage) => {
               })}
             >
               <Icon
-                src={require('@tabler/icons/outline/mood-smile.svg')}
+                src={moodSmileIcon}
                 className='size-4'
               />
             </button>
@@ -244,7 +250,7 @@ const ChatMessage = (props: IChatMessage) => {
               data-testid='chat-message-menu'
             >
               <Icon
-                src={require('@tabler/icons/outline/dots.svg')}
+                src={dotsIcon}
                 className='size-4'
               />
             </button>
@@ -362,7 +368,7 @@ const ChatMessage = (props: IChatMessage) => {
                   {isRead ? (
                     <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
                       <Icon
-                        src={require('@tabler/icons/outline/check.svg')}
+                        src={checkIcon}
                         strokeWidth={3}
                         className='size-2.5'
                       />
@@ -370,7 +376,7 @@ const ChatMessage = (props: IChatMessage) => {
                   ) : (
                     <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
                       <Icon
-                        src={require('@tabler/icons/outline/check.svg')}
+                        src={checkIcon}
                         strokeWidth={3}
                         className='size-2.5'
                       />
diff --git a/src/features/chats/components/chat-page/components/chat-page-main.tsx b/src/features/chats/components/chat-page/components/chat-page-main.tsx
index 71934fa9b..530eec265 100644
--- a/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -1,3 +1,7 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
 import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory, useParams } from 'react-router-dom';
@@ -120,7 +124,7 @@ const ChatPageMain = () => {
         <HStack alignItems='center' space={2} className='overflow-hidden'>
           <HStack alignItems='center'>
             <IconButton
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
               onClick={() => history.push('/chats')}
             />
@@ -162,7 +166,7 @@ const ChatPageMain = () => {
         <Menu>
           <MenuButton
             as={IconButton}
-            src={require('@tabler/icons/outline/info-circle.svg')}
+            src={infoCircleIcon}
             iconClassName='h-5 w-5 text-gray-600'
             children={null}
           />
@@ -213,7 +217,7 @@ const ChatPageMain = () => {
                   className='!px-0 hover:!bg-transparent'
                 >
                   <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
-                    <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
+                    <Icon src={banIcon} className='size-5' />
                     <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
                   </div>
                 </MenuItem>
@@ -225,7 +229,7 @@ const ChatPageMain = () => {
                     className='!px-0 hover:!bg-transparent'
                   >
                     <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
-                      <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
+                      <Icon src={logoutIcon} className='size-5' />
                       <span>{intl.formatMessage(messages.leaveChat)}</span>
                     </div>
                   </MenuItem>
diff --git a/src/features/chats/components/chat-page/components/chat-page-new.tsx b/src/features/chats/components/chat-page/components/chat-page-new.tsx
index bb5fa407c..3b3e879ed 100644
--- a/src/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -23,7 +24,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
       <Stack className='grow px-4 pt-6 sm:px-6'>
         <HStack alignItems='center'>
           <IconButton
-            src={require('@tabler/icons/outline/arrow-left.svg')}
+            src={arrowLeftIcon}
             className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
             onClick={() => history.push('/chats')}
           />
diff --git a/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index b04d0def3..099e8c8ce 100644
--- a/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -50,7 +51,7 @@ const ChatPageSettings = () => {
     <Stack className='h-full space-y-8 px-4 py-6 sm:p-6'>
       <HStack alignItems='center'>
         <IconButton
-          src={require('@tabler/icons/outline/arrow-left.svg')}
+          src={arrowLeftIcon}
           className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
           onClick={() => history.push('/chats')}
         />
diff --git a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 3f08e1a6b..65db6b536 100644
--- a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -1,3 +1,5 @@
+import editIcon from '@tabler/icons/outline/edit.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -42,13 +44,13 @@ const ChatPageSidebar = () => {
 
           <HStack space={1}>
             <IconButton
-              src={require('@tabler/icons/outline/settings.svg')}
+              src={settingsIcon}
               iconClassName='h-5 w-5 text-gray-600'
               onClick={handleSettingsClick}
             />
 
             <IconButton
-              src={require('@tabler/icons/outline/edit.svg')}
+              src={editIcon}
               iconClassName='h-5 w-5 text-gray-600'
               onClick={handleChatCreate}
             />
diff --git a/src/features/chats/components/chat-pane/chat-pane.tsx b/src/features/chats/components/chat-pane/chat-pane.tsx
index 1f0dde8f8..031b0becd 100644
--- a/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -1,3 +1,4 @@
+import editIcon from '@tabler/icons/outline/edit.svg';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -111,7 +112,7 @@ const ChatPane = () => {
             toggleChatPane();
           }
         }}
-        secondaryActionIcon={require('@tabler/icons/outline/edit.svg')}
+        secondaryActionIcon={editIcon}
       />
 
       {isOpen ? renderBody() : null}
diff --git a/src/features/chats/components/chat-search-input.tsx b/src/features/chats/components/chat-search-input.tsx
index 45728cd79..6737d9783 100644
--- a/src/features/chats/components/chat-search-input.tsx
+++ b/src/features/chats/components/chat-search-input.tsx
@@ -1,3 +1,5 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -34,7 +36,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
       append={
         <button onClick={onClear}>
           <Icon
-            src={value.length ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+            src={value.length ? xIcon : searchIcon}
             className='size-4 text-gray-700 dark:text-gray-600'
             aria-hidden='true'
           />
diff --git a/src/features/chats/components/chat-search/chat-search.tsx b/src/features/chats/components/chat-search/chat-search.tsx
index 24a63fa2f..4b1af584c 100644
--- a/src/features/chats/components/chat-search/chat-search.tsx
+++ b/src/features/chats/components/chat-search/chat-search.tsx
@@ -1,3 +1,5 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import React, { useState } from 'react';
@@ -101,7 +103,7 @@ const ChatSearch = (props: IChatSearch) => {
           append={
             <button onClick={clearValue}>
               <Icon
-                src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+                src={hasSearchValue ? xIcon : searchIcon}
                 className='size-4 text-gray-700 dark:text-gray-600'
                 aria-hidden='true'
               />
diff --git a/src/features/chats/components/chat-upload-preview.tsx b/src/features/chats/components/chat-upload-preview.tsx
index 5b8ed76ff..ce04f5861 100644
--- a/src/features/chats/components/chat-upload-preview.tsx
+++ b/src/features/chats/components/chat-upload-preview.tsx
@@ -1,3 +1,4 @@
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
 import React from 'react';
 
 import { Icon } from 'soapbox/components/ui';
@@ -5,7 +6,7 @@ import { MIMETYPE_ICONS } from 'soapbox/components/upload';
 
 import type { Attachment } from 'soapbox/types/entities';
 
-const defaultIcon = require('@tabler/icons/outline/paperclip.svg');
+const defaultIcon = paperclipIcon;
 
 interface IChatUploadPreview {
   className?: string;
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index 5ac30565f..1963cd800 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
@@ -57,7 +58,7 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => {
     >
       <Icon
         className='size-3 text-white'
-        src={require('@tabler/icons/outline/x.svg')}
+        src={xIcon}
       />
     </button>
   );
diff --git a/src/features/chats/components/chat-widget/chat-pane-header.tsx b/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 5cff70014..76130c690 100644
--- a/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -1,3 +1,5 @@
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
 import React, { HTMLAttributes } from 'react';
 
 import { HStack, IconButton, Text } from 'soapbox/components/ui';
@@ -65,7 +67,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
 
         <IconButton
           onClick={onToggle}
-          src={isOpen ? require('@tabler/icons/outline/chevron-down.svg') : require('@tabler/icons/outline/chevron-up.svg')}
+          src={isOpen ? chevronDownIcon : chevronUpIcon}
           iconClassName='h-5 w-5 text-gray-600'
         />
       </HStack>
diff --git a/src/features/chats/components/chat-widget/chat-settings.tsx b/src/features/chats/components/chat-widget/chat-settings.tsx
index 6c337f60c..40a4d6f74 100644
--- a/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -1,3 +1,6 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -95,7 +98,7 @@ const ChatSettings = () => {
           <HStack alignItems='center' space={2}>
             <button onClick={closeSettings}>
               <Icon
-                src={require('@tabler/icons/outline/arrow-left.svg')}
+                src={arrowLeftIcon}
                 className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
               />
             </button>
@@ -136,13 +139,13 @@ const ChatSettings = () => {
 
         <Stack space={5}>
           <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
-            <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
+            <Icon src={banIcon} className='size-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
             <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
-              <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
+              <Icon src={logoutIcon} className='size-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>
           )}
diff --git a/src/features/chats/components/chat-widget/chat-window.tsx b/src/features/chats/components/chat-widget/chat-window.tsx
index 1e9ca007f..cd3f6c931 100644
--- a/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/src/features/chats/components/chat-widget/chat-window.tsx
@@ -1,3 +1,6 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
 import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -72,7 +75,7 @@ const ChatWindow = () => {
             {isOpen && (
               <button onClick={closeChat}>
                 <Icon
-                  src={require('@tabler/icons/outline/arrow-left.svg')}
+                  src={arrowLeftIcon}
                   className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
                 />
               </button>
@@ -107,7 +110,7 @@ const ChatWindow = () => {
           </HStack>
         }
         secondaryAction={secondaryAction()}
-        secondaryActionIcon={isOpen ? require('@tabler/icons/outline/info-circle.svg') : require('@tabler/icons/outline/edit.svg')}
+        secondaryActionIcon={isOpen ? infoCircleIcon : editIcon}
         isToggleable={!isOpen}
         isOpen={isOpen}
         onToggle={toggleChatPane}
diff --git a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index 81828f51f..cf76a6442 100644
--- a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -26,7 +27,7 @@ const ChatSearchHeader = () => {
             }}
           >
             <Icon
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
             />
           </button>
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 8b0f7b19a..af8218509 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -1,3 +1,5 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
 import clsx from 'clsx';
 import { CLEAR_EDITOR_COMMAND, TextNode, type LexicalEditor, $getRoot } from 'lexical';
 import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
@@ -229,10 +231,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   if (isEditing) {
     publishText = intl.formatMessage(messages.saveChanges);
   } else if (privacy === 'direct') {
-    publishIcon = require('@tabler/icons/outline/mail.svg');
+    publishIcon = mailIcon;
     publishText = intl.formatMessage(messages.message);
   } else if (privacy === 'private') {
-    publishIcon = require('@tabler/icons/outline/lock.svg');
+    publishIcon = lockIcon;
     publishText = intl.formatMessage(messages.publish);
   } else {
     publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
diff --git a/src/features/compose/components/markdown-button.tsx b/src/features/compose/components/markdown-button.tsx
index daedd132b..62e3621b7 100644
--- a/src/features/compose/components/markdown-button.tsx
+++ b/src/features/compose/components/markdown-button.tsx
@@ -1,3 +1,4 @@
+import markdownIcon from '@tabler/icons/outline/markdown.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -25,7 +26,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ composeId }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/markdown.svg')}
+      icon={markdownIcon}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/src/features/compose/components/poll-button.tsx b/src/features/compose/components/poll-button.tsx
index c2a31c642..0ef868a10 100644
--- a/src/features/compose/components/poll-button.tsx
+++ b/src/features/compose/components/poll-button.tsx
@@ -1,3 +1,4 @@
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -39,7 +40,7 @@ const PollButton: React.FC<IPollButton> = ({ composeId, disabled }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/chart-bar.svg')}
+      icon={chartBarIcon}
       title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
       active={active}
       disabled={disabled}
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 2571589b7..4ab3b370a 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -1,3 +1,7 @@
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useState, useRef, useEffect } from 'react';
@@ -160,10 +164,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const [placement, setPlacement] = useState('bottom');
 
   const options = [
-    { icon: require('@tabler/icons/outline/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
-    { icon: require('@tabler/icons/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
-    { icon: require('@tabler/icons/outline/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
-    { icon: require('@tabler/icons/outline/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
+    { icon: worldIcon, value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
+    { icon: lockOpenIcon, value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
+    { icon: lockIcon, value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
+    { icon: mailIcon, value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
   ];
 
   const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value));
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index 4ed3db70e..694ace5cb 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -29,7 +30,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
   if (!hideActions && onCancel) {
     actions = {
       onActionClick: handleClick,
-      actionIcon: require('@tabler/icons/outline/x.svg'),
+      actionIcon: xIcon,
       actionAlignment: 'top',
       actionTitle: 'Dismiss',
     };
diff --git a/src/features/compose/components/schedule-button.tsx b/src/features/compose/components/schedule-button.tsx
index cf4e8bbbf..65ebce9a7 100644
--- a/src/features/compose/components/schedule-button.tsx
+++ b/src/features/compose/components/schedule-button.tsx
@@ -1,3 +1,4 @@
+import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -39,7 +40,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ composeId, disabled }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/calendar-stats.svg')}
+      icon={calendarStatsIcon}
       title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
       active={active}
       disabled={disabled}
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index ab7a64f34..2c5acfeca 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -52,7 +53,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
         <IconButton
           iconClassName='h-4 w-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'
-          src={require('@tabler/icons/outline/x.svg')}
+          src={xIcon}
           onClick={handleRemove}
           title={intl.formatMessage(messages.remove)}
         />
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index 87e85fd1f..a6cc2df1a 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -213,7 +214,7 @@ const SearchResults = () => {
     <>
       {filterByAccount ? (
         <HStack className='mb-4 border-b border-solid border-gray-200 px-2 pb-4 dark:border-gray-800' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleUnsetAccount} />
+          <IconButton iconClassName='h-5 w-5' src={xIcon} onClick={handleUnsetAccount} />
           <Text truncate>
             <FormattedMessage
               id='search_results.filter_message'
diff --git a/src/features/compose/components/search-zap-split.tsx b/src/features/compose/components/search-zap-split.tsx
index d2873f828..d1efcf706 100644
--- a/src/features/compose/components/search-zap-split.tsx
+++ b/src/features/compose/components/search-zap-split.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect } from 'react';
@@ -153,7 +154,7 @@ const SearchZapSplit = (props: ISearchZapSplit) => {
         >
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index b91438a2d..8c48c15b6 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -1,3 +1,5 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect } from 'react';
@@ -111,7 +113,7 @@ const Search = (props: ISearch) => {
   const makeMenu = () => [
     {
       text: intl.formatMessage(messages.action, { query: value }),
-      icon: require('@tabler/icons/outline/search.svg'),
+      icon: searchIcon,
       action: handleSubmit,
     },
   ];
@@ -166,12 +168,12 @@ const Search = (props: ISearch) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/outline/search.svg')}
+            src={searchIcon}
             className={clsx('size-4 text-gray-600', { hidden: hasValue })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/features/compose/components/spoiler-button.tsx b/src/features/compose/components/spoiler-button.tsx
index 235209a83..38eca8177 100644
--- a/src/features/compose/components/spoiler-button.tsx
+++ b/src/features/compose/components/spoiler-button.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -26,7 +27,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ composeId }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/alert-triangle.svg')}
+      icon={alertTriangleIcon}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/src/features/compose/components/upload-button.tsx b/src/features/compose/components/upload-button.tsx
index 4779a6a44..a2fb80c67 100644
--- a/src/features/compose/components/upload-button.tsx
+++ b/src/features/compose/components/upload-button.tsx
@@ -1,3 +1,5 @@
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
+import photoIcon from '@tabler/icons/outline/photo.svg';
 import React, { useRef } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
@@ -54,8 +56,8 @@ const UploadButton: React.FC<IUploadButton> = ({
 
   const src = icon || (
     onlyImages(attachmentTypes)
-      ? require('@tabler/icons/outline/photo.svg')
-      : require('@tabler/icons/outline/paperclip.svg')
+      ? photoIcon
+      : paperclipIcon
   );
 
   return (
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 0c07387eb..fa6f4c0ba 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,3 +1,5 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
 import React from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
@@ -42,12 +44,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
 
         <HStack alignItems='center' className='ml-auto'>
           <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
-            <Icon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
+            <Icon src={qrcodeIcon} size={20} />
           </a>
 
           {explorerUrl && (
             <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
-              <Icon src={require('@tabler/icons/outline/external-link.svg')} size={20} />
+              <Icon src={externalLinkIcon} size={20} />
             </a>
           )}
         </HStack>
diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx
index 554c05ade..29d70ae07 100644
--- a/src/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -1,3 +1,4 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { QRCodeCanvas as QRCode } from 'qrcode.react';
 import React from 'react';
 
@@ -30,7 +31,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
         <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
         <div className='crypto-address__actions'>
           {explorerUrl && <a href={explorerUrl} target='_blank'>
-            <Icon src={require('@tabler/icons/outline/external-link.svg')} />
+            <Icon src={externalLinkIcon} />
           </a>}
         </div>
       </div>
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index 185f289b2..37b0718d9 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -1,3 +1,11 @@
+import appsIcon from '@tabler/icons/outline/apps.svg';
+import codePlusIcon from '@tabler/icons/outline/code-plus.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import moodSadIcon from '@tabler/icons/outline/mood-sad.svg';
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
+import scriptIcon from '@tabler/icons/outline/script.svg';
+import urgentIcon from '@tabler/icons/outline/urgent.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -57,7 +65,7 @@ const Developers: React.FC = () => {
       <Column label={intl.formatMessage(messages.heading)}>
         <div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
           <DashWidget to='/developers/apps/create'>
-            <SvgIcon src={require('@tabler/icons/outline/apps.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={appsIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -65,7 +73,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/settings_store'>
-            <SvgIcon src={require('@tabler/icons/outline/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={codePlusIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -73,7 +81,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/timeline'>
-            <SvgIcon src={require('@tabler/icons/outline/home.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={homeIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@@ -81,7 +89,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error'>
-            <SvgIcon src={require('@tabler/icons/outline/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={moodSadIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -89,7 +97,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error/network'>
-            <SvgIcon src={require('@tabler/icons/outline/refresh.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={refreshIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@@ -97,7 +105,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/sw'>
-            <SvgIcon src={require('@tabler/icons/outline/script.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={scriptIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' />
@@ -105,7 +113,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={leaveDevelopers}>
-            <SvgIcon src={require('@tabler/icons/outline/logout.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={logoutIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
@@ -113,7 +121,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={showToast}>
-            <SvgIcon src={require('@tabler/icons/outline/urgent.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={urgentIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' />
diff --git a/src/features/developers/service-worker-info.tsx b/src/features/developers/service-worker-info.tsx
index 69f36bac6..7b786e95f 100644
--- a/src/features/developers/service-worker-info.tsx
+++ b/src/features/developers/service-worker-info.tsx
@@ -1,3 +1,4 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -120,7 +121,7 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
                 <span className='truncate'>{url}</span>
                 <Icon
                   className='size-4'
-                  src={require('@tabler/icons/outline/external-link.svg')}
+                  src={externalLinkIcon}
                 />
               </a>
             </ListItem>
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index e124316b6..3e27f5c2f 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -1,3 +1,4 @@
+import atIcon from '@tabler/icons/outline/at.svg';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -169,7 +170,7 @@ const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
       placeholder={intl.formatMessage(messages.username)}
       append={(
         <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
-          <Icon className='size-4' src={require('@tabler/icons/outline/at.svg')} />
+          <Icon className='size-4' src={atIcon} />
           <span>{instance.domain}</span>
         </HStack>
       )}
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index 7e0a8e0fb..18d5d6ffa 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -1,3 +1,4 @@
+import cameraPlusIcon from '@tabler/icons/outline/camera-plus.svg';
 import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -43,7 +44,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
         })}
       >
         <Icon
-          src={require('@tabler/icons/outline/camera-plus.svg')}
+          src={cameraPlusIcon}
           className='size-5 text-white'
         />
       </HStack>
diff --git a/src/features/edit-profile/components/header-picker.tsx b/src/features/edit-profile/components/header-picker.tsx
index bf27afc17..88a8b2069 100644
--- a/src/features/edit-profile/components/header-picker.tsx
+++ b/src/features/edit-profile/components/header-picker.tsx
@@ -1,3 +1,5 @@
+import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -55,7 +57,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
         justifyContent='center'
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-plus.svg')}
+          src={photoPlusIcon}
           className='size-4.5'
         />
 
@@ -76,7 +78,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
       {onClear && src && (
         <IconButton
           onClick={handleClear}
-          src={require('@tabler/icons/outline/x.svg')}
+          src={xIcon}
           theme='dark'
           className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900'
           iconClassName='h-5 w-5'
diff --git a/src/features/emoji/components/emoji-picker.tsx b/src/features/emoji/components/emoji-picker.tsx
index 6dd2b8064..cb34ed2f1 100644
--- a/src/features/emoji/components/emoji-picker.tsx
+++ b/src/features/emoji/components/emoji-picker.tsx
@@ -1,3 +1,4 @@
+import spriteSheet from 'emoji-datasource/img/twitter/sheets/32.png';
 import { Picker as EmojiPicker } from 'emoji-mart';
 import React, { useRef, useEffect } from 'react';
 
@@ -5,9 +6,7 @@ import { joinPublicPath } from 'soapbox/utils/static';
 
 import data from '../data';
 
-const getSpritesheetURL = (set: string) => {
-  return require('emoji-datasource/img/twitter/sheets/32.png');
-};
+const getSpritesheetURL = () => spriteSheet;
 
 const getImageURL = (set: string, name: string) => {
   return joinPublicPath(`/packs/emoji/${name}.svg`);
diff --git a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index 51ade8de2..b38f332f7 100644
--- a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -1,4 +1,5 @@
 import { useFloating, shift } from '@floating-ui/react';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
 import clsx from 'clsx';
 import React, { KeyboardEvent, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -40,7 +41,7 @@ const EmojiPickerDropdownContainer = (
           'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
         })}
         ref={refs.setReference}
-        src={require('@tabler/icons/outline/mood-happy.svg')}
+        src={moodHappyIcon}
         title={title}
         aria-label={title}
         aria-expanded={visible}
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index 413942eed..7dcb6a7b7 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -1,3 +1,5 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -70,14 +72,14 @@ const EventActionButton: React.FC<IEventAction> = ({ status, theme = 'secondary'
   switch (event.join_state) {
     case 'accept':
       buttonLabel = <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />;
-      buttonIcon = require('@tabler/icons/outline/check.svg');
+      buttonIcon = checkIcon;
       break;
     case 'pending':
       buttonLabel = <FormattedMessage id='event.join_state.pending' defaultMessage='Pending' />;
       break;
     case 'reject':
       buttonLabel = <FormattedMessage id='event.join_state.rejected' defaultMessage='Going' />;
-      buttonIcon = require('@tabler/icons/outline/ban.svg');
+      buttonIcon = banIcon;
       buttonDisabled = true;
       break;
     default:
diff --git a/src/features/event/components/event-date.tsx b/src/features/event/components/event-date.tsx
index 978f49213..e657bf4de 100644
--- a/src/features/event/components/event-date.tsx
+++ b/src/features/event/components/event-date.tsx
@@ -1,3 +1,4 @@
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import React from 'react';
 import { FormattedDate } from 'react-intl';
 
@@ -50,7 +51,7 @@ const EventDate: React.FC<IEventDate> = ({ status }) => {
 
   return (
     <HStack alignItems='center' space={2}>
-      <Icon src={require('@tabler/icons/outline/calendar.svg')} />
+      <Icon src={calendarIcon} />
       <span>{date}</span>
     </HStack>
   );
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index cd21a2565..624fe727d 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -1,3 +1,26 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bookmarkOffIcon from '@tabler/icons/outline/bookmark-off.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarPlusIcon from '@tabler/icons/outline/calendar-plus.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flag3Icon from '@tabler/icons/outline/flag-3.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
+import quoteIcon from '@tabler/icons/outline/quote.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import usersIcon from '@tabler/icons/outline/users.svg';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -136,7 +159,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const handleDeleteClick = () => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
       confirm: intl.formatMessage(messages.deleteConfirm),
@@ -162,7 +185,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const handleBlockClick = () => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
       message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}@{account.acct}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
@@ -202,19 +225,19 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       {
         text: intl.formatMessage(messages.exportIcs),
         action: handleExportClick,
-        icon: require('@tabler/icons/outline/calendar-plus.svg'),
+        icon: calendarPlusIcon,
       },
       {
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@tabler/icons/outline/link.svg'),
+        icon: linkIcon,
       },
     ];
 
     if (features.federating && !account.local) {
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
-        icon: require('@tabler/icons/outline/external-link.svg'),
+        icon: externalLinkIcon,
         href: status.uri,
         target: '_blank',
       });
@@ -226,7 +249,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
+        icon: status.bookmarked ? bookmarkOffIcon : bookmarkIcon,
       });
     }
 
@@ -234,14 +257,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(status.reblogged ? messages.unreblog : messages.reblog),
         action: handleReblogClick,
-        icon: require('@tabler/icons/outline/repeat.svg'),
+        icon: repeatIcon,
       });
 
       if (features.quotePosts) {
         menu.push({
           text: intl.formatMessage(messages.quotePost),
           action: handleQuoteClick,
-          icon: require('@tabler/icons/outline/quote.svg'),
+          icon: quoteIcon,
         });
       }
     }
@@ -253,34 +276,34 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: handlePinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: handleDeleteClick,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: handleMentionClick,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (status.getIn(['account', 'pleroma', 'accepts_chat_messages']) === true) {
         menu.push({
           text: intl.formatMessage(messages.chat, { name: username }),
           action: handleChatClick,
-          icon: require('@tabler/icons/outline/messages.svg'),
+          icon: messagesIcon,
         });
       } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -288,17 +311,17 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: handleMuteClick,
-        icon: require('@tabler/icons/outline/circle-x.svg'),
+        icon: circleXIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.block, { name: username }),
         action: handleBlockClick,
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: handleReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -308,28 +331,28 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: account.username }),
         action: handleModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
 
       if (isAdmin) {
         menu.push({
           text: intl.formatMessage(messages.adminStatus),
           action: handleModerateStatus,
-          icon: require('@tabler/icons/outline/pencil.svg'),
+          icon: pencilIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
       });
 
       if (account.id !== ownAccount?.id) {
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -378,7 +401,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           <Menu>
             <MenuButton
               as={IconButton}
-              src={require('@tabler/icons/outline/dots.svg')}
+              src={dotsIcon}
               theme='outlined'
               className='h-[30px] px-2'
               iconClassName='h-4 w-4'
@@ -421,7 +444,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
         <Stack space={1}>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/flag-3.svg')} />
+            <Icon src={flag3Icon} />
             <span>
               <FormattedMessage
                 id='event.organized_by'
@@ -441,7 +464,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           </HStack>
 
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/users.svg')} />
+            <Icon src={usersIcon} />
             <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
               <span>
                 <FormattedMessage
@@ -460,7 +483,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+              <Icon src={mapPinIcon} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index d84d6096b..bcb13c9e4 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -1,3 +1,6 @@
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
@@ -102,7 +105,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.location' defaultMessage='Location' />
         </Text>
         <HStack space={2} alignItems='center'>
-          <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+          <Icon src={mapPinIcon} />
           <Text>{text}</Text>
         </HStack>
       </Stack>
@@ -125,7 +128,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.date' defaultMessage='Date' />
         </Text>
         <HStack space={2} alignItems='center'>
-          <Icon src={require('@tabler/icons/outline/calendar.svg')} />
+          <Icon src={calendarIcon} />
           <Text>
             <FormattedDate
               value={startDate}
@@ -165,7 +168,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
 
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
-            <Icon src={require('@tabler/icons/outline/link.svg')} />
+            <Icon src={linkIcon} />
             <a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
               {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
             </a>
diff --git a/src/features/events/components/event-carousel.tsx b/src/features/events/components/event-carousel.tsx
index 85768ff07..f22619651 100644
--- a/src/features/events/components/event-carousel.tsx
+++ b/src/features/events/components/event-carousel.tsx
@@ -1,3 +1,5 @@
+import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import React, { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
@@ -59,7 +61,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index - 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={chevronLeftIcon} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
@@ -72,7 +74,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index + 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={chevronRightIcon} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
diff --git a/src/features/federation-restrictions/components/instance-restrictions.tsx b/src/features/federation-restrictions/components/instance-restrictions.tsx
index 938502ae8..f0f38dc58 100644
--- a/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -1,3 +1,10 @@
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
+import shieldCheckIcon from '@tabler/icons/outline/shield-check.svg';
+import shieldLockIcon from '@tabler/icons/outline/shield-lock.svg';
+import shieldXIcon from '@tabler/icons/outline/shield-x.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -53,7 +60,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (followers_only) {
       items.push((
-        <Restriction key='followersOnly' icon={require('@tabler/icons/outline/lock.svg')}>
+        <Restriction key='followersOnly' icon={lockIcon}>
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
@@ -62,7 +69,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/outline/lock-open.svg')}>
+        <Restriction key='federatedTimelineRemoval' icon={lockOpenIcon}>
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
@@ -73,7 +80,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (fullMediaRemoval) {
       items.push((
-        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
+        <Restriction key='fullMediaRemoval' icon={photoOffIcon}>
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
@@ -82,7 +89,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
+        <Restriction key='partialMediaRemoval' icon={photoOffIcon}>
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
@@ -93,7 +100,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Restriction key='mediaNsfw' icon={require('@tabler/icons/outline/eye-off.svg')}>
+        <Restriction key='mediaNsfw' icon={eyeOffIcon}>
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
@@ -113,7 +120,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (remoteInstance.federation.reject === true) {
       return (
-        <Restriction icon={require('@tabler/icons/outline/shield-x.svg')}>
+        <Restriction icon={shieldXIcon}>
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
@@ -124,7 +131,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
     } else if (hasRestrictions(remoteInstance)) {
       return (
         <>
-          <Restriction icon={require('@tabler/icons/outline/shield-lock.svg')}>
+          <Restriction icon={shieldLockIcon}>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@@ -137,7 +144,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       );
     } else {
       return (
-        <Restriction icon={require('@tabler/icons/outline/shield-check.svg')}>
+        <Restriction icon={shieldCheckIcon}>
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 07e017521..4835371f0 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -1,3 +1,5 @@
+import caretDownIcon from '@tabler/icons/outline/caret-down.svg';
+import caretRightIcon from '@tabler/icons/outline/caret-right.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
@@ -26,7 +28,7 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
   return (
     <div>
       <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
-        <Icon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
+        <Icon src={expanded ? caretDownIcon : caretRightIcon} />
         <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
           {remoteInstance.host}
         </div>
diff --git a/src/features/group/components/group-header-image.tsx b/src/features/group/components/group-header-image.tsx
index 4c759b203..273c2ef8e 100644
--- a/src/features/group/components/group-header-image.tsx
+++ b/src/features/group/components/group-header-image.tsx
@@ -1,3 +1,4 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -30,7 +31,7 @@ const GroupHeaderImage: React.FC<IGroupHeaderImage> = ({ className, group }) =>
         className={clsx(className, 'flex items-center justify-center bg-gray-200 dark:bg-gray-800/30')}
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-off.svg')}
+          src={photoOffIcon}
           className='size-6 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index 3cb84d4b8..5d28a9939 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -1,3 +1,4 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import { List as ImmutableList } from 'immutable';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -112,7 +113,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         className='flex h-32 w-full items-center justify-center bg-gray-200 dark:bg-gray-800/30 md:rounded-t-xl lg:h-52'
       >
         {isHeaderMissing ? (
-          <Icon src={require('@tabler/icons/outline/photo-off.svg')} className='size-6 text-gray-500 dark:text-gray-700' />
+          <Icon src={photoOffIcon} className='size-6 text-gray-500 dark:text-gray-700' />
         ) : header}
       </div>
     );
diff --git a/src/features/group/components/group-member-list-item.tsx b/src/features/group/components/group-member-list-item.tsx
index f1102965c..5e3ec2637 100644
--- a/src/features/group/components/group-member-list-item.tsx
+++ b/src/features/group/components/group-member-list-item.tsx
@@ -1,3 +1,6 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
+import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -137,13 +140,13 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
       if (isMemberUser) {
         items.push({
           text: intl.formatMessage(messages.groupModPromoteMod, { role: GroupRoles.ADMIN }),
-          icon: require('@tabler/icons/outline/briefcase.svg'),
+          icon: briefcaseIcon,
           action: handleAdminAssignment,
         });
       } else if (isMemberAdmin) {
         items.push({
           text: intl.formatMessage(messages.groupModDemote, { role: GroupRoles.ADMIN, name: account.username }),
-          icon: require('@tabler/icons/outline/briefcase.svg'),
+          icon: briefcaseIcon,
           action: handleUserAssignment,
           destructive: true,
         });
@@ -158,14 +161,14 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
       if (features.groupsKick) {
         items.push({
           text: intl.formatMessage(messages.groupModKick, { name: account.username }),
-          icon: require('@tabler/icons/outline/user-minus.svg'),
+          icon: userMinusIcon,
           action: handleKickFromGroup,
         });
       }
 
       items.push({
         text: intl.formatMessage(messages.groupModBlock, { name: account.username }),
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
         action: handleBlockFromGroup,
         destructive: true,
       });
diff --git a/src/features/group/components/group-options-button.tsx b/src/features/group/components/group-options-button.tsx
index c52bc1eaa..64b25ef21 100644
--- a/src/features/group/components/group-options-button.tsx
+++ b/src/features/group/components/group-options-button.tsx
@@ -1,3 +1,8 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -98,7 +103,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (canShare) {
       items.push({
         text: intl.formatMessage(messages.share),
-        icon: require('@tabler/icons/outline/share.svg'),
+        icon: shareIcon,
         action: handleShare,
       });
     }
@@ -106,7 +111,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (isInGroup) {
       items.push({
         text: isMuting ? intl.formatMessage(messages.unmute) : intl.formatMessage(messages.mute),
-        icon: require('@tabler/icons/outline/volume-3.svg'),
+        icon: volume3Icon,
         action: isMuting ? handleUnmute : handleMute,
       });
     }
@@ -114,7 +119,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (isMember || isAdmin) {
       items.push({
         text: intl.formatMessage(messages.report),
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
         action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
       });
     }
@@ -123,7 +128,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
       items.push(null);
       items.push({
         text: intl.formatMessage(messages.leave),
-        icon: require('@tabler/icons/outline/logout.svg'),
+        icon: logoutIcon,
         action: handleLeave,
       });
     }
@@ -138,7 +143,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
   return (
     <DropdownMenu items={menu} placement='bottom'>
       <IconButton
-        src={require('@tabler/icons/outline/dots.svg')}
+        src={dotsIcon}
         theme='secondary'
         iconClassName='h-5 w-5'
         className='self-stretch px-2.5'
diff --git a/src/features/group/components/group-privacy.tsx b/src/features/group/components/group-privacy.tsx
index 20602bb41..c5ea61761 100644
--- a/src/features/group/components/group-privacy.tsx
+++ b/src/features/group/components/group-privacy.tsx
@@ -1,3 +1,5 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -17,8 +19,8 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
           <Icon
             src={
               group.locked
-                ? require('@tabler/icons/outline/lock.svg')
-                : require('@tabler/icons/outline/world.svg')
+                ? lockIcon
+                : worldIcon
             }
             className='size-6 text-gray-600 dark:text-gray-600'
           />
@@ -49,8 +51,8 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
         className='size-4'
         src={
           group.locked
-            ? require('@tabler/icons/outline/lock.svg')
-            : require('@tabler/icons/outline/world.svg')
+            ? lockIcon
+            : worldIcon
         }
       />
 
diff --git a/src/features/group/components/group-relationship.tsx b/src/features/group/components/group-relationship.tsx
index ebcdc017d..69a6a957c 100644
--- a/src/features/group/components/group-relationship.tsx
+++ b/src/features/group/components/group-relationship.tsx
@@ -1,3 +1,5 @@
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import usersIcon from '@tabler/icons/outline/users.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -28,8 +30,8 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
         className='size-4'
         src={
           isOwner
-            ? require('@tabler/icons/outline/users.svg')
-            : require('@tabler/icons/outline/gavel.svg')
+            ? usersIcon
+            : gavelIcon
         }
       />
 
diff --git a/src/features/group/components/group-tag-list-item.tsx b/src/features/group/components/group-tag-list-item.tsx
index 3680f5afd..572e995a5 100644
--- a/src/features/group/components/group-tag-list-item.tsx
+++ b/src/features/group/components/group-tag-list-item.tsx
@@ -1,3 +1,7 @@
+import pinFilledIcon from '@tabler/icons/filled/pin.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -87,7 +91,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
     if (!isOwner && tag.pinned) {
       return (
         <Icon
-          src={require('@tabler/icons/filled/pin.svg')}
+          src={pinFilledIcon}
           className='size-5 text-gray-600'
           data-testid='pin-icon'
         />
@@ -112,8 +116,8 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
             theme='transparent'
             src={
               tag.pinned ?
-                require('@tabler/icons/filled/pin.svg') :
-                require('@tabler/icons/outline/pin.svg')
+                pinFilledIcon :
+                pinIcon
             }
             iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
             data-testid='pin-icon'
@@ -128,7 +132,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
           <IconButton
             onClick={togglePin}
             theme='transparent'
-            src={require('@tabler/icons/filled/pin.svg')}
+            src={pinFilledIcon}
             iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
           />
         </Tooltip>
@@ -185,8 +189,8 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
               theme='transparent'
               src={
                 tag.visible ?
-                  require('@tabler/icons/outline/eye.svg') :
-                  require('@tabler/icons/outline/eye-off.svg')
+                  eyeIcon :
+                  eyeOffIcon
               }
               iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
             />
diff --git a/src/features/group/edit-group.tsx b/src/features/group/edit-group.tsx
index a23cae445..4b5fa5062 100644
--- a/src/features/group/edit-group.tsx
+++ b/src/features/group/edit-group.tsx
@@ -1,3 +1,4 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -115,7 +116,7 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { groupId } }) => {
             placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
             maxLength={maxName}
             {...displayName}
-            append={<Icon className='size-5 text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />}
+            append={<Icon className='size-5 text-gray-600' src={lockIcon} />}
             disabled
           />
         </FormGroup>
diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx
index 92b25bfaa..b5caee49d 100644
--- a/src/features/group/group-tag-timeline.tsx
+++ b/src/features/group/group-tag-timeline.tsx
@@ -1,3 +1,4 @@
+import message2Icon from '@tabler/icons/outline/message-2.svg';
 import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -50,7 +51,7 @@ const GroupTagTimeline: React.FC<IGroupTimeline> = (props) => {
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
-                src={require('@tabler/icons/outline/message-2.svg')}
+                src={message2Icon}
                 className='size-6 text-gray-600'
               />
             </div>
diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx
index 6e1951886..f519fbecb 100644
--- a/src/features/group/group-tags.tsx
+++ b/src/features/group/group-tags.tsx
@@ -1,3 +1,4 @@
+import hashIcon from '@tabler/icons/outline/hash.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -41,7 +42,7 @@ const GroupTopics: React.FC<IGroupTopics> = (props) => {
         <Stack space={4} className='pt-6' justifyContent='center' alignItems='center'>
           <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
             <Icon
-              src={require('@tabler/icons/outline/hash.svg')}
+              src={hashIcon}
               className='size-6 text-gray-600'
             />
           </div>
diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx
index 656a2f9ba..418f9db62 100644
--- a/src/features/group/group-timeline.tsx
+++ b/src/features/group/group-timeline.tsx
@@ -1,3 +1,4 @@
+import message2Icon from '@tabler/icons/outline/message-2.svg';
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -110,7 +111,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
-                src={require('@tabler/icons/outline/message-2.svg')}
+                src={message2Icon}
                 className='size-6 text-gray-600'
               />
             </div>
diff --git a/src/features/group/manage-group.tsx b/src/features/group/manage-group.tsx
index bf857996a..8dafe252e 100644
--- a/src/features/group/manage-group.tsx
+++ b/src/features/group/manage-group.tsx
@@ -1,3 +1,4 @@
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -61,7 +62,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
 
   const onDeleteGroup = () =>
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
       confirm: intl.formatMessage(messages.deleteConfirm),
diff --git a/src/features/groups/components/discover/group-list-item.tsx b/src/features/groups/components/discover/group-list-item.tsx
index 3294e6312..0b3c56057 100644
--- a/src/features/groups/components/discover/group-list-item.tsx
+++ b/src/features/groups/components/discover/group-list-item.tsx
@@ -1,3 +1,5 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -39,7 +41,7 @@ const GroupListItem = (props: IGroupListItem) => {
             <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
               <Icon
                 className='size-4.5'
-                src={group.locked ? require('@tabler/icons/outline/lock.svg') : require('@tabler/icons/outline/world.svg')}
+                src={group.locked ? lockIcon : worldIcon}
               />
 
               <Text theme='inherit' tag='span' size='sm' weight='medium'>
diff --git a/src/features/groups/components/discover/layout-buttons.tsx b/src/features/groups/components/discover/layout-buttons.tsx
index 3500f40a5..dd206975b 100644
--- a/src/features/groups/components/discover/layout-buttons.tsx
+++ b/src/features/groups/components/discover/layout-buttons.tsx
@@ -1,3 +1,5 @@
+import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
+import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -20,7 +22,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
       onClick={() => onSelect(GroupLayout.LIST)}
     >
       <Icon
-        src={require('@tabler/icons/outline/layout-list.svg')}
+        src={layoutListIcon}
         className={
           clsx('size-5 text-gray-600', {
             'text-primary-600': layout === GroupLayout.LIST,
@@ -34,7 +36,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
       onClick={() => onSelect(GroupLayout.GRID)}
     >
       <Icon
-        src={require('@tabler/icons/outline/layout-grid.svg')}
+        src={layoutGridIcon}
         className={
           clsx('size-5 text-gray-600', {
             'text-primary-600': layout === GroupLayout.GRID,
diff --git a/src/features/groups/components/discover/search/recent-searches.tsx b/src/features/groups/components/discover/search/recent-searches.tsx
index 65012bbdf..eb5712baf 100644
--- a/src/features/groups/components/discover/search/recent-searches.tsx
+++ b/src/features/groups/components/discover/search/recent-searches.tsx
@@ -1,3 +1,4 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
@@ -62,7 +63,7 @@ export default (props: Props) => {
                   <HStack alignItems='center' space={2}>
                     <div className='flex size-10 items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-800 dark:group-hover:bg-gray-700/20'>
                       <Icon
-                        src={require('@tabler/icons/outline/search.svg')}
+                        src={searchIcon}
                         className='size-5 text-gray-600'
                       />
                     </div>
diff --git a/src/features/groups/discover.tsx b/src/features/groups/discover.tsx
index 6b42876c1..062dcdd12 100644
--- a/src/features/groups/discover.tsx
+++ b/src/features/groups/discover.tsx
@@ -1,3 +1,6 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -36,7 +39,7 @@ const Discover: React.FC = () => {
         <HStack alignItems='center'>
           {isSearching ? (
             <IconButton
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               iconClassName='mr-2 h-5 w-5 fill-current text-gray-600 rtl:rotate-180'
               onClick={cancelSearch}
               data-testid='group-search-icon'
@@ -55,7 +58,7 @@ const Discover: React.FC = () => {
             append={
               <button onClick={clearValue}>
                 <Icon
-                  src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+                  src={hasSearchValue ? xIcon : searchIcon}
                   className='size-4 text-gray-700 dark:text-gray-600'
                   aria-hidden='true'
                 />
diff --git a/src/features/groups/index.tsx b/src/features/groups/index.tsx
index f85b9d474..16eed2fc1 100644
--- a/src/features/groups/index.tsx
+++ b/src/features/groups/index.tsx
@@ -1,3 +1,4 @@
+import circlesIcon from '@tabler/icons/outline/circles.svg';
 import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -79,7 +80,7 @@ const Groups: React.FC = () => {
       {canCreateGroup && (
         <Button
           className='xl:hidden'
-          icon={require('@tabler/icons/outline/circles.svg')}
+          icon={circlesIcon}
           onClick={createGroup}
           theme='secondary'
           block
diff --git a/src/features/groups/tag.tsx b/src/features/groups/tag.tsx
index 3eeab1794..181753d50 100644
--- a/src/features/groups/tag.tsx
+++ b/src/features/groups/tag.tsx
@@ -1,3 +1,5 @@
+import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
+import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
@@ -65,7 +67,7 @@ const Tag: React.FC<ITag> = (props) => {
         <HStack alignItems='center'>
           <button onClick={() => setLayout(Layout.LIST)}>
             <Icon
-              src={require('@tabler/icons/outline/layout-list.svg')}
+              src={layoutListIcon}
               className={
                 clsx('size-5 text-gray-600', {
                   'text-primary-600': layout === Layout.LIST,
@@ -76,7 +78,7 @@ const Tag: React.FC<ITag> = (props) => {
 
           <button onClick={() => setLayout(Layout.GRID)}>
             <Icon
-              src={require('@tabler/icons/outline/layout-grid.svg')}
+              src={layoutGridIcon}
               className={
                 clsx('size-5 text-gray-600', {
                   'text-primary-600': layout === Layout.GRID,
diff --git a/src/features/list-adder/components/list.tsx b/src/features/list-adder/components/list.tsx
index a6f12ce53..d638858b1 100644
--- a/src/features/list-adder/components/list.tsx
+++ b/src/features/list-adder/components/list.tsx
@@ -1,3 +1,6 @@
+import listIcon from '@tabler/icons/outline/list.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -30,14 +33,14 @@ const List: React.FC<IList> = ({ listId }) => {
   let button;
 
   if (added) {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton iconClassName='h-5 w-5' src={xIcon} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton iconClassName='h-5 w-5' src={plusIcon} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
     <div className='flex items-center gap-1.5 px-2 py-4 text-black dark:text-white'>
-      <Icon src={require('@tabler/icons/outline/list.svg')} />
+      <Icon src={listIcon} />
       <span className='grow'>
         {list.title}
       </span>
diff --git a/src/features/list-editor/components/account.tsx b/src/features/list-editor/components/account.tsx
index 4a28a3c41..9ee274f95 100644
--- a/src/features/list-editor/components/account.tsx
+++ b/src/features/list-editor/components/account.tsx
@@ -1,3 +1,5 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -28,9 +30,9 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   let button;
 
   if (isAdded) {
-    button = <IconButton src={require('@tabler/icons/outline/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={xIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index 71f136247..5b67a96de 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -1,3 +1,4 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -45,7 +46,7 @@ const Search = () => {
             placeholder={intl.formatMessage(messages.search)}
           />
           <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
+            <Icon src={backspaceIcon} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
           </div>
         </label>
 
diff --git a/src/features/lists/index.tsx b/src/features/lists/index.tsx
index 498b6472c..00ea5022f 100644
--- a/src/features/lists/index.tsx
+++ b/src/features/lists/index.tsx
@@ -1,3 +1,6 @@
+import listIcon from '@tabler/icons/outline/list.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React, { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -84,12 +87,12 @@ const Lists: React.FC = () => {
         >
           {lists.map((list: any) => (
             <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800'>
-              <Icon src={require('@tabler/icons/outline/list.svg')} />
+              <Icon src={listIcon} />
               <span className='grow'>
                 {list.title}
               </span>
-              <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/outline/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/outline/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={pencilIcon} 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={trashIcon} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
             </Link>
           ))}
         </ScrollableList>
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index 45f67d884..8be2fe895 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -1,3 +1,10 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import moodSmileIcon from '@tabler/icons/outline/mood-smile.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -46,43 +53,43 @@ const NotificationFilterBar = () => {
     });
   } else {
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/at.svg')} />,
+      text: <Icon src={atIcon} />,
       title: intl.formatMessage(messages.mentions),
       action: onClick('mention'),
       name: 'mention',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/heart.svg')} />,
+      text: <Icon src={heartIcon} />,
       title: intl.formatMessage(messages.favourites),
       action: onClick('favourite'),
       name: 'favourite',
     });
     if (features.emojiReacts) items.push({
-      text: <Icon src={require('@tabler/icons/outline/mood-smile.svg')} />,
+      text: <Icon src={moodSmileIcon} />,
       title: intl.formatMessage(messages.emoji_reacts),
       action: onClick('pleroma:emoji_reaction'),
       name: 'pleroma:emoji_reaction',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/repeat.svg')} />,
+      text: <Icon src={repeatIcon} />,
       title: intl.formatMessage(messages.boosts),
       action: onClick('reblog'),
       name: 'reblog',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/chart-bar.svg')} />,
+      text: <Icon src={chartBarIcon} />,
       title: intl.formatMessage(messages.polls),
       action: onClick('poll'),
       name: 'poll',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/bell-ringing.svg')} />,
+      text: <Icon src={bellRingingIcon} />,
       title: intl.formatMessage(messages.statuses),
       action: onClick('status'),
       name: 'status',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/user-plus.svg')} />,
+      text: <Icon src={userPlusIcon} />,
       title: intl.formatMessage(messages.follows),
       action: onClick('follow'),
       name: 'follow',
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index 64c4e3f4e..c6e9586fe 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -1,3 +1,17 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import calendarTimeIcon from '@tabler/icons/outline/calendar-time.svg';
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import userCheckIcon from '@tabler/icons/outline/user-check.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import React, { useCallback } from 'react';
 import { defineMessages, useIntl, IntlShape, MessageDescriptor, defineMessage, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -42,25 +56,25 @@ const buildLink = (account: AccountEntity): JSX.Element => (
 );
 
 const icons: Record<NotificationType, string> = {
-  follow: require('@tabler/icons/outline/user-plus.svg'),
-  follow_request: require('@tabler/icons/outline/user-plus.svg'),
-  mention: require('@tabler/icons/outline/at.svg'),
-  favourite: require('@tabler/icons/outline/heart.svg'),
-  group_favourite: require('@tabler/icons/outline/heart.svg'),
-  reblog: require('@tabler/icons/outline/repeat.svg'),
-  group_reblog: require('@tabler/icons/outline/repeat.svg'),
-  status: require('@tabler/icons/outline/bell-ringing.svg'),
-  poll: require('@tabler/icons/outline/chart-bar.svg'),
-  move: require('@tabler/icons/outline/briefcase.svg'),
-  'pleroma:chat_mention': require('@tabler/icons/outline/messages.svg'),
-  'pleroma:emoji_reaction': require('@tabler/icons/outline/mood-happy.svg'),
-  user_approved: require('@tabler/icons/outline/user-plus.svg'),
-  update: require('@tabler/icons/outline/pencil.svg'),
-  'pleroma:event_reminder': require('@tabler/icons/outline/calendar-time.svg'),
-  'pleroma:participation_request': require('@tabler/icons/outline/calendar-event.svg'),
-  'pleroma:participation_accepted': require('@tabler/icons/outline/calendar-event.svg'),
-  'ditto:name_grant': require('@tabler/icons/outline/user-check.svg'),
-  'ditto:zap': require('@tabler/icons/outline/bolt.svg'),
+  follow: userPlusIcon,
+  follow_request: userPlusIcon,
+  mention: atIcon,
+  favourite: heartIcon,
+  group_favourite: heartIcon,
+  reblog: repeatIcon,
+  group_reblog: repeatIcon,
+  status: bellRingingIcon,
+  poll: chartBarIcon,
+  move: briefcaseIcon,
+  'pleroma:chat_mention': messagesIcon,
+  'pleroma:emoji_reaction': moodHappyIcon,
+  user_approved: userPlusIcon,
+  update: pencilIcon,
+  'pleroma:event_reminder': calendarTimeIcon,
+  'pleroma:participation_request': calendarEventIcon,
+  'pleroma:participation_accepted': calendarEventIcon,
+  'ditto:name_grant': userCheckIcon,
+  'ditto:zap': boltIcon,
 };
 
 const nameMessage = defineMessage({
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 0522d3dd5..67566b7be 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -79,7 +80,7 @@ const PublicTimeline = () => {
           <Accordion
             headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
             action={dismissExplanationBox}
-            actionIcon={require('@tabler/icons/outline/x.svg')}
+            actionIcon={xIcon}
             actionLabel={intl.formatMessage(messages.dismiss)}
             expanded={explanationBoxExpanded}
             onToggle={toggleExplanationBox}
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index 630fe80fd..ea50a7624 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -55,7 +56,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
 
       {!pinned && (
         <HStack className='mb-4 px-2' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleCloseClick} />
+          <IconButton iconClassName='h-5 w-5' src={xIcon} onClick={handleCloseClick} />
           <Text>
             <FormattedMessage
               id='remote_timeline.filter_message'
diff --git a/src/features/reply-mentions/account.tsx b/src/features/reply-mentions/account.tsx
index 007309aac..e8fa12983 100644
--- a/src/features/reply-mentions/account.tsx
+++ b/src/features/reply-mentions/account.tsx
@@ -1,3 +1,5 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -42,9 +44,9 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@tabler/icons/outline/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={xIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index 8462c45ff..32f2e7b83 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -1,3 +1,4 @@
+import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -33,7 +34,7 @@ const ScheduledStatusActionBar: React.FC<IScheduledStatusActionBar> = ({ status
         dispatch(cancelScheduledStatus(status.id));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/calendar-stats.svg'),
+          icon: calendarStatsIcon,
           heading: intl.formatMessage(messages.deleteHeading),
           message: intl.formatMessage(messages.deleteMessage),
           confirm: intl.formatMessage(messages.deleteConfirm),
diff --git a/src/features/soapbox-config/components/icon-picker-dropdown.tsx b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
index 5a72f0474..4e1cc9093 100644
--- a/src/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
@@ -5,6 +5,8 @@ import Overlay from 'react-overlays/lib/Overlay';
 
 import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
 
+import forkAwesomeIcons from '../forkawesome.json';
+
 import IconPickerMenu from './icon-picker-menu';
 
 const messages = defineMessages({
@@ -53,7 +55,6 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickIcon }
   };
 
   const title = intl.formatMessage(messages.emoji);
-  const forkAwesomeIcons = require('../forkawesome.json');
 
   return (
     <div onKeyDown={handleKeyDown}>
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 4df65eb22..33272eff7 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -1,3 +1,6 @@
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
 import React, { useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -57,7 +60,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             avatarSize={42}
             icon={
               <Icon
-                src={require('@tabler/icons/outline/circles.svg')}
+                src={circlesIcon}
                 className='size-4 text-primary-600 dark:text-accent-blue'
               />
             }
@@ -109,9 +112,9 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   }
 
   if (actualStatus.visibility === 'direct') {
-    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/mail.svg')} />;
+    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={mailIcon} />;
   } else if (actualStatus.visibility === 'private') {
-    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />;
+    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={lockIcon} />;
   }
 
   return (
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index 4b99b550b..e81b59318 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
+import status5 from 'soapbox/__fixtures__/pleroma-quote-of-quote-post.json';
+import status3 from 'soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json';
+import status4 from 'soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json';
+import status2 from 'soapbox/__fixtures__/pleroma-status-with-poll.json';
+import status1 from 'soapbox/__fixtures__/pleroma-status.json';
+import status6 from 'soapbox/__fixtures__/truthsocial-status-in-moderation.json';
 import { importFetchedStatuses } from 'soapbox/actions/importer';
 import { expandTimelineSuccess } from 'soapbox/actions/timelines';
 import { useAppDispatch, useTheme } from 'soapbox/hooks';
@@ -17,14 +23,7 @@ const messages = defineMessages({
  * List of mock statuses to display in the timeline.
  * These get embedded into the build, but only in this chunk, so it's okay.
  */
-const MOCK_STATUSES: any[] = [
-  require('soapbox/__fixtures__/pleroma-status.json'),
-  require('soapbox/__fixtures__/pleroma-status-with-poll.json'),
-  require('soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json'),
-  require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
-  require('soapbox/__fixtures__/pleroma-quote-of-quote-post.json'),
-  require('soapbox/__fixtures__/truthsocial-status-in-moderation.json'),
-];
+const MOCK_STATUSES = [status1, status2, status3, status4, status5, status6];
 
 const timelineId = 'test';
 const onlyMedia = false;
diff --git a/src/features/theme-editor/index.tsx b/src/features/theme-editor/index.tsx
index 10c9e6041..115159e9c 100644
--- a/src/features/theme-editor/index.tsx
+++ b/src/features/theme-editor/index.tsx
@@ -1,3 +1,6 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
 import React, { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -207,15 +210,15 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
             items={[{
               text: intl.formatMessage(messages.restore),
               action: restoreDefaultTheme,
-              icon: require('@tabler/icons/outline/refresh.svg'),
+              icon: refreshIcon,
             }, {
               text: intl.formatMessage(messages.import),
               action: importTheme,
-              icon: require('@tabler/icons/outline/upload.svg'),
+              icon: uploadIcon,
             }, {
               text: intl.formatMessage(messages.export),
               action: exportTheme,
-              icon: require('@tabler/icons/outline/download.svg'),
+              icon: downloadIcon,
             }]}
           />
           <Button theme='secondary' onClick={resetTheme}>
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 6d9502d5b..ec1a5874d 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -1,3 +1,5 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -154,7 +156,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       return (
         <Button
           onClick={handleRemoteFollow}
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           text={intl.formatMessage(messages.follow)}
           size='sm'
         />
@@ -224,7 +226,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
           size='sm'
           disabled={blockedBy}
           theme={isFollowing ? 'secondary' : 'primary'}
-          icon={blockedBy ? require('@tabler/icons/outline/ban.svg') : (!isFollowing && require('@tabler/icons/outline/plus.svg'))}
+          icon={blockedBy ? banIcon : (!isFollowing && plusIcon)}
           onClick={handleFollow}
         >
           {isFollowing ? (
diff --git a/src/features/ui/components/error-column.tsx b/src/features/ui/components/error-column.tsx
index 6c91fa144..585af0050 100644
--- a/src/features/ui/components/error-column.tsx
+++ b/src/features/ui/components/error-column.tsx
@@ -1,3 +1,4 @@
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -32,7 +33,7 @@ const ErrorColumn: React.FC<IErrorColumn> = ({ error, onRetry = () => location.r
         <IconButton
           iconClassName='h-10 w-10'
           title={intl.formatMessage(messages.retry)}
-          src={require('@tabler/icons/outline/refresh.svg')}
+          src={refreshIcon}
           onClick={handleRetry}
         />
 
diff --git a/src/features/ui/components/floating-action-button.tsx b/src/features/ui/components/floating-action-button.tsx
index 5ee426f3f..ce5caef0d 100644
--- a/src/features/ui/components/floating-action-button.tsx
+++ b/src/features/ui/components/floating-action-button.tsx
@@ -1,3 +1,4 @@
+import pencilPlusIcon from '@tabler/icons/outline/pencil-plus.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -42,7 +43,7 @@ const HomeFAB: React.FC = () => {
       aria-label={intl.formatMessage(messages.publish)}
     >
       <Icon
-        src={require('@tabler/icons/outline/pencil-plus.svg')}
+        src={pencilPlusIcon}
         className='size-6'
       />
     </button>
@@ -74,7 +75,7 @@ const GroupFAB: React.FC = () => {
       <HStack space={3} alignItems='center'>
         <Avatar className='-my-3 -ml-2 border-white' size={42} src={group.avatar} />
         <Icon
-          src={require('@tabler/icons/outline/pencil-plus.svg')}
+          src={pencilPlusIcon}
           className='size-6'
         />
       </HStack>
diff --git a/src/features/ui/components/instance-info-panel.tsx b/src/features/ui/components/instance-info-panel.tsx
index 26a52df84..8f397ca18 100644
--- a/src/features/ui/components/instance-info-panel.tsx
+++ b/src/features/ui/components/instance-info-panel.tsx
@@ -1,3 +1,5 @@
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -41,7 +43,7 @@ const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
     <Widget
       title={remoteInstance.host}
       onActionClick={handlePinHost}
-      actionIcon={pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg')}
+      actionIcon={pinned ? pinnedOffIcon : pinIcon}
       actionTitle={intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host })}
     />
   );
diff --git a/src/features/ui/components/instance-moderation-panel.tsx b/src/features/ui/components/instance-moderation-panel.tsx
index 75cb34b05..f64725e69 100644
--- a/src/features/ui/components/instance-moderation-panel.tsx
+++ b/src/features/ui/components/instance-moderation-panel.tsx
@@ -1,3 +1,5 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
 import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
@@ -35,7 +37,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
     return [{
       text: intl.formatMessage(messages.editFederation),
       action: handleEditFederation,
-      icon: require('@tabler/icons/outline/edit.svg'),
+      icon: editIcon,
     }];
   };
 
@@ -45,7 +47,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
     <Widget
       title={<FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' />}
       action={account?.admin ? (
-        <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={dotsVerticalIcon} />
       ) : undefined}
     >
       <InstanceRestrictions remoteInstance={remoteInstance} />
diff --git a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index d8df08427..22e3ac915 100644
--- a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -1,3 +1,4 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import React, { ChangeEventHandler, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -186,7 +187,7 @@ const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, ac
 
         {features.adminFE && (
           <HStack justifyContent='center'>
-            <Button icon={require('@tabler/icons/outline/external-link.svg')} size='sm' theme='secondary' onClick={handleAdminFE}>
+            <Button icon={externalLinkIcon} size='sm' theme='secondary' onClick={handleAdminFE}>
               <FormattedMessage id='account_moderation_modal.admin_fe' defaultMessage='Open in AdminFE' />
             </Button>
           </HStack>
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index 19acf46fe..badb827c2 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -1,3 +1,4 @@
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -39,7 +40,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
 
         <Text>
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/outline/repeat.svg')} /></span> }} />
+          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={repeatIcon} /></span> }} />
         </Text>
       </Stack>
     </Modal>
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 67965c0e2..ac6a035a3 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -1,3 +1,6 @@
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -137,7 +140,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
     dispatch((dispatch, getState) => {
       if (checkEventComposeContent(getState().compose_event)) {
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: id
             ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
             : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
@@ -177,12 +180,12 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
 
   const renderLocation = () => location && (
     <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
-      <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/outline/map-pin.svg')} />
+      <Icon src={ADDRESS_ICONS[location.type] || mapPinIcon} />
       <Stack className='grow'>
         <Text>{location.description}</Text>
         <Text theme='muted' size='xs'>{[location.street, location.locality, location.country].filter(val => val?.trim()).join(' · ')}</Text>
       </Stack>
-      <IconButton title={intl.formatMessage(messages.resetLocation)} src={require('@tabler/icons/outline/x.svg')} onClick={() => onChangeLocation(null)} />
+      <IconButton title={intl.formatMessage(messages.resetLocation)} src={xIcon} onClick={() => onChangeLocation(null)} />
     </HStack>
   );
 
@@ -213,7 +216,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
           {banner ? (
             <>
               <img className='size-full object-cover' src={banner.url} alt='' />
-              <IconButton className='absolute right-2 top-2' src={require('@tabler/icons/outline/x.svg')} onClick={handleClearBanner} />
+              <IconButton className='absolute right-2 top-2' src={xIcon} onClick={handleClearBanner} />
             </>
           ) : (
             <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
diff --git a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index c36861a6c..ea8a0bce1 100644
--- a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -1,3 +1,4 @@
+import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
 import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -28,7 +29,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   return (
     <HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
-        src={require('@tabler/icons/outline/photo-plus.svg')}
+        src={photoPlusIcon}
         className='size-7'
         onClick={handleClick}
       />
diff --git a/src/features/ui/components/modals/compose-modal.tsx b/src/features/ui/components/modals/compose-modal.tsx
index b5fc73c33..ee4965dcb 100644
--- a/src/features/ui/components/modals/compose-modal.tsx
+++ b/src/features/ui/components/modals/compose-modal.tsx
@@ -1,3 +1,4 @@
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -36,7 +37,7 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
   const onClickClose = () => {
     if (checkComposeContent(compose)) {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         heading: statusId
           ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
           : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 4ecf6b0e9..e68b98228 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -1,4 +1,5 @@
 import { useFloating, shift } from '@floating-ui/react';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -58,7 +59,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
       >
         {emoji
           ? <Emoji height={20} width={20} emoji={emoji} />
-          : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={require('@tabler/icons/outline/mood-happy.svg')} />}
+          : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={moodHappyIcon} />}
       </button>
 
       {createPortal(
diff --git a/src/features/ui/components/modals/event-map-modal.tsx b/src/features/ui/components/modals/event-map-modal.tsx
index 2a16a84f3..24bc56193 100644
--- a/src/features/ui/components/modals/event-map-modal.tsx
+++ b/src/features/ui/components/modals/event-map-modal.tsx
@@ -1,4 +1,8 @@
+import gpsIcon from '@tabler/icons/outline/gps.svg';
 import L from 'leaflet';
+import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
+import iconUrl from 'leaflet/dist/images/marker-icon.png';
+import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -11,9 +15,9 @@ import type { Status as StatusEntity } from 'soapbox/types/entities';
 import 'leaflet/dist/leaflet.css';
 
 L.Icon.Default.mergeOptions({
-  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-  iconUrl: require('leaflet/dist/images/marker-icon.png'),
-  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+  iconRetinaUrl,
+  iconUrl,
+  shadowUrl,
 });
 
 interface IEventMapModal {
@@ -64,7 +68,7 @@ const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
     >
       <Stack alignItems='center' space={6}>
         <div className='h-96 w-full' id='event-map' />
-        <Button onClick={onClickNavigate} icon={require('@tabler/icons/outline/gps.svg')}>
+        <Button onClick={onClickNavigate} icon={gpsIcon}>
           <FormattedMessage id='event_map.navigate' defaultMessage='Navigate' />
         </Button>
       </Stack>
diff --git a/src/features/ui/components/modals/landing-page-modal.tsx b/src/features/ui/components/modals/landing-page-modal.tsx
index 251bc5f9a..b2e1196b1 100644
--- a/src/features/ui/components/modals/landing-page-modal.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.tsx
@@ -1,3 +1,4 @@
+import lifebuoyIcon from '@tabler/icons/outline/lifebuoy.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -38,7 +39,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
               target='_blank'
               className='flex items-center space-x-3 rounded-md p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50'
             >
-              <Icon src={require('@tabler/icons/outline/lifebuoy.svg')} className='size-6 shrink-0 text-gray-600 dark:text-gray-700' />
+              <Icon src={lifebuoyIcon} className='size-6 shrink-0 text-gray-600 dark:text-gray-700' />
 
               <Text weight='medium'>
                 {intl.formatMessage(messages.helpCenter)}
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 6dbb4e667..1346a81f1 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -1,3 +1,5 @@
+import linkIcon from '@tabler/icons/outline/link.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -101,12 +103,12 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
 
       <HStack space={2} justifyContent='center'>
         {('share' in navigator) && (
-          <Button onClick={handleShare} theme='transparent' icon={require('@tabler/icons/outline/share.svg')} className='text-primary-600'>
+          <Button onClick={handleShare} theme='transparent' icon={shareIcon} className='text-primary-600'>
             <FormattedMessage id='manage_group.confirmation.share' defaultMessage='Share this group' />
           </Button>
         )}
 
-        <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/outline/link.svg')} className='text-primary-600'>
+        <Button onClick={handleCopyLink} theme='transparent' icon={linkIcon} className='text-primary-600'>
           <FormattedMessage id='manage_group.confirmation.copy' defaultMessage='Copy link' />
         </Button>
       </HStack>
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 5d7ffaec4..6eca2c813 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -1,3 +1,9 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
+import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -255,7 +261,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           >
             <IconButton
               title={intl.formatMessage(messages.close)}
-              src={require('@tabler/icons/outline/x.svg')}
+              src={xIcon}
               onClick={onClose}
               theme='dark'
               className='!p-1.5 hover:scale-105 hover:bg-gray-900'
@@ -264,7 +270,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
             <HStack alignItems='center' space={2}>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 theme='dark'
                 className='!p-1.5 hover:scale-105 hover:bg-gray-900'
                 iconClassName='h-5 w-5'
@@ -273,7 +279,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
               {status && (
                 <IconButton
-                  src={isFullScreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
+                  src={isFullScreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
                   title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
                   theme='dark'
                   className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
@@ -296,7 +302,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   onClick={handlePrevClick}
                   aria-label={intl.formatMessage(messages.previous)}
                 >
-                  <Icon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-5' />
+                  <Icon src={arrowLeftIcon} className='size-5' />
                 </button>
               </div>
             )}
@@ -318,7 +324,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   onClick={handleNextClick}
                   aria-label={intl.formatMessage(messages.next)}
                 >
-                  <Icon src={require('@tabler/icons/outline/arrow-right.svg')} className='size-5' />
+                  <Icon src={arrowRightIcon} className='size-5' />
                 </button>
               </div>
             )}
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
index 36688eb16..e65dac0ba 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -62,7 +63,7 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ isLogin, onClickAlt, onClose
 
           <Divider text='or' />
 
-          <Button theme={isLogin ? 'muted' : 'transparent'} onClick={onClickAlt} icon={require('@tabler/icons/outline/alert-triangle.svg')}>
+          <Button theme={isLogin ? 'muted' : 'transparent'} onClick={onClickAlt} icon={alertTriangleIcon}>
             {isLogin ? <FormattedMessage id='nostr_login.siwe.alt' defaultMessage='Log in with key' /> : <FormattedMessage id='nostr_signup.siwe.alt' defaultMessage={'Don\'t have an extension?'} /> }
           </Button>
 
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
index 7ae2e6164..ebc448dac 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
@@ -1,3 +1,4 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
 import { generateSecretKey, getPublicKey, nip19 } from 'nostr-tools';
 import React, { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -93,7 +94,7 @@ const KeygenStep: React.FC<IKeygenStep> = ({ onClose }) => {
         </Stack>
 
         <HStack space={6} justifyContent='center' >
-          <Button theme='secondary' size='lg' icon={require('@tabler/icons/outline/download.svg')} onClick={handleDownload}>
+          <Button theme='secondary' size='lg' icon={downloadIcon} onClick={handleDownload}>
             <FormattedMessage id='nostr_signup.keygen.download_key_button' defaultMessage='Download key' />
           </Button>
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index 21f0f5dcd..c7f8117e4 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -1,3 +1,5 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
@@ -12,7 +14,7 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
@@ -105,7 +107,7 @@ const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext
           })}
           disabled={isSubmitting}
         >
-          <Icon src={require('@tabler/icons/outline/plus.svg')} className='size-5 text-white' />
+          <Icon src={plusIcon} className='size-5 text-white' />
         </button>
 
         <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index ce5e7aac8..b043a73ac 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -14,7 +15,7 @@ const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface IBioStep {
   onClose(): void;
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
index 5fee84b4a..321cd3a69 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
@@ -1,10 +1,12 @@
+import confettiIcon from '@tabler/icons/outline/confetti.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Icon, Stack, Text } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface ICompletedModal {
   onClose?(): void;
@@ -19,7 +21,7 @@ const CompletedModal: React.FC<ICompletedModal> = ({ onClose, onComplete }) => {
       <div className='relative w-full'>
         <IconButton src={closeIcon} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' onClick={onClose} />
         <Stack space={2} justifyContent='center' alignItems='center' className=''>
-          <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
+          <Icon strokeWidth={1} src={confettiIcon} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
           </Text>
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index 0dac39e3f..de40a1932 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -1,3 +1,5 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -13,7 +15,7 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
@@ -123,7 +125,7 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
               })}
               disabled={isSubmitting}
             >
-              <Icon src={require('@tabler/icons/outline/plus.svg')} className='size-5 text-white' />
+              <Icon src={plusIcon} className='size-5 text-white' />
             </button>
 
             <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index b12e89d18..cf51decd0 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -9,7 +10,7 @@ import toast from 'soapbox/toast';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
index 1576a69c7..e186cd27a 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -8,7 +9,7 @@ import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import AccountContainer from 'soapbox/containers/account-container';
 import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface ICoverPhotoSelectionModal {
   onClose?(): void;
diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index 69ae41acd..9717694bd 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -1,3 +1,4 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -33,7 +34,7 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ composeId, onClose
     <Modal
       title={<FormattedMessage id='navigation_bar.in_reply_to' defaultMessage='In reply to' />}
       onClose={onClickClose}
-      closeIcon={require('@tabler/icons/outline/arrow-left.svg')}
+      closeIcon={arrowLeftIcon}
       closePosition='left'
     >
       <div className='reply-mentions-modal__accounts'>
diff --git a/src/features/ui/components/modals/report-modal/report-modal.tsx b/src/features/ui/components/modals/report-modal/report-modal.tsx
index 42727fbe2..27d35832a 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -1,3 +1,4 @@
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -226,7 +227,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
 
           <List>
             <ListItem
-              label={<Icon src={require('@tabler/icons/outline/info-circle.svg')} className='text-gray-600' />}
+              label={<Icon src={infoCircleIcon} className='text-gray-600' />}
             >
               <Text size='sm'>{intl.formatMessage(messages.reportContext)}</Text>
             </ListItem>
diff --git a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 67a56d66b..40b135c20 100644
--- a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -1,3 +1,5 @@
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import { OrderedSet } from 'immutable';
 import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -60,7 +62,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
 
                 <div>
                   <Button
-                    icon={require('@tabler/icons/outline/arrows-minimize.svg')}
+                    icon={arrowsMinimizeIcon}
                     theme='tertiary'
                     size='sm'
                     onClick={() => setShowAdditionalStatuses(false)}
@@ -71,7 +73,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
               </Stack>
             ) : (
               <Button
-                icon={require('@tabler/icons/outline/plus.svg')}
+                icon={plusIcon}
                 theme='tertiary'
                 size='sm'
                 onClick={() => setShowAdditionalStatuses(true)}
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index aadd66139..227e9724c 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -1,3 +1,5 @@
+import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
+import folderIcon from '@tabler/icons/outline/folder.svg';
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -42,7 +44,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
     <RadioItem
       label={
         <HStack alignItems='center' space={2}>
-          <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
+          <Icon src={bookmarksIcon} size={20} />
           <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
         </HStack>
       }
@@ -63,7 +65,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
                 src={folder.emoji_url || undefined}
                 className='size-5 flex-none'
               />
-            ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
+            ) : <Icon src={folderIcon} size={20} />}
             <span>{folder.name}</span>
           </HStack>
         }
diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index c7dc59920..947a7a869 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -1,3 +1,5 @@
+import folderOpenIcon from '@tabler/icons/outline/folder-open.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { QRCodeCanvas } from 'qrcode.react';
 import React  from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -12,7 +14,7 @@ import { ZapSplitData } from 'soapbox/schemas/zap-split';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' },
@@ -64,7 +66,7 @@ const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, splitData, o
         </div>
         <HStack space={2}>
           <a href={'lightning:' + invoice}>
-            <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
+            <Button type='submit' theme='primary' icon={folderOpenIcon} text={intl.formatMessage(messages.zap_open_wallet)} />
           </a>
           {hasZapSplit && <Button type='button' theme='muted' onClick={handleNext} text={intl.formatMessage(messages.zap_next)} />}
         </HStack>
diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx
index 38a928faf..036e8169d 100644
--- a/src/features/ui/components/modals/zap-split/zap-split.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split.tsx
@@ -1,3 +1,4 @@
+import folderOpenIcon from '@tabler/icons/outline/folder-open.svg';
 import { QRCodeCanvas } from 'qrcode.react';
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -90,7 +91,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
           </div>
           <HStack space={2}>
             <a href={'lightning:' + invoice}>
-              <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
+              <Button type='submit' theme='primary' icon={folderOpenIcon} text={intl.formatMessage(messages.zap_open_wallet)} />
             </a>
             {isLastStep ? (
               <Button
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 627236d6e..e11a7e10b 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -1,3 +1,4 @@
+import helpIcon from '@tabler/icons/outline/help.svg';
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -163,7 +164,7 @@ const Navbar = () => {
                       <Link to='/reset-password'>
                         <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                           <IconButton
-                            src={require('@tabler/icons/outline/help.svg')}
+                            src={helpIcon}
                             className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
                             iconClassName='h-5 w-5'
                           />
diff --git a/src/features/ui/components/new-account-zap-split.tsx b/src/features/ui/components/new-account-zap-split.tsx
index a5d9d6a20..3f3ae03a3 100644
--- a/src/features/ui/components/new-account-zap-split.tsx
+++ b/src/features/ui/components/new-account-zap-split.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -7,7 +8,7 @@ import { Button, HStack, Input, Slider } from 'soapbox/components/ui';
 import SearchZapSplit from 'soapbox/features/compose/components/search-zap-split';
 import { type Account as AccountEntity } from 'soapbox/schemas';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface INewAccount {
   acc: string;
diff --git a/src/features/ui/components/panels/new-event-panel.tsx b/src/features/ui/components/panels/new-event-panel.tsx
index bf444ffc6..df7eeeddc 100644
--- a/src/features/ui/components/panels/new-event-panel.tsx
+++ b/src/features/ui/components/panels/new-event-panel.tsx
@@ -1,3 +1,4 @@
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -25,7 +26,7 @@ const NewEventPanel = () => {
       </Stack>
 
       <Button
-        icon={require('@tabler/icons/outline/calendar-event.svg')}
+        icon={calendarEventIcon}
         onClick={createEvent}
         theme='secondary'
         block
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index 80961b5ac..2047ae65b 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -1,4 +1,6 @@
 import { useFloating } from '@floating-ui/react';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -86,14 +88,14 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     menu.push({
       text: intl.formatMessage(messages.add),
       to: '/login/add',
-      icon: require('@tabler/icons/outline/plus.svg'),
+      icon: plusIcon,
     });
 
     menu.push({
       text: intl.formatMessage(messages.logout, { acct: account.acct }),
       to: '/logout',
       action: handleLogOut,
-      icon: require('@tabler/icons/outline/logout.svg'),
+      icon: logoutIcon,
     });
 
     return menu;
diff --git a/src/features/ui/components/profile-field.tsx b/src/features/ui/components/profile-field.tsx
index 7f4e43728..151c3b2c9 100644
--- a/src/features/ui/components/profile-field.tsx
+++ b/src/features/ui/components/profile-field.tsx
@@ -1,3 +1,4 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
@@ -57,7 +58,7 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
         <HStack space={2} alignItems='center'>
           {field.verified_at && (
             <span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
-              <Icon src={require('@tabler/icons/outline/check.svg')} />
+              <Icon src={checkIcon} />
             </span>
           )}
 
diff --git a/src/features/ui/components/profile-info-panel.tsx b/src/features/ui/components/profile-info-panel.tsx
index 312ecbc45..dcae6e4ce 100644
--- a/src/features/ui/components/profile-info-panel.tsx
+++ b/src/features/ui/components/profile-info-panel.tsx
@@ -1,3 +1,8 @@
+import balloonIcon from '@tabler/icons/outline/balloon.svg';
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
@@ -101,7 +106,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
     return (
       <HStack alignItems='center' space={0.5}>
         <Icon
-          src={require('@tabler/icons/outline/balloon.svg')}
+          src={balloonIcon}
           className='size-4 text-gray-800 dark:text-gray-200'
         />
 
@@ -162,7 +167,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
             {account.locked && (
               <Icon
-                src={require('@tabler/icons/outline/lock.svg')}
+                src={lockIcon}
                 alt={intl.formatMessage(messages.account_locked)}
                 className='size-4 text-gray-600'
               />
@@ -180,7 +185,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.local ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/calendar.svg')}
+                src={calendarIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -197,7 +202,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.location ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/map-pin.svg')}
+                src={mapPinIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -210,7 +215,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.website ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/link.svg')}
+                src={linkIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
diff --git a/src/features/ui/components/subscription-button.tsx b/src/features/ui/components/subscription-button.tsx
index cdd2ec5bb..fb734ea06 100644
--- a/src/features/ui/components/subscription-button.tsx
+++ b/src/features/ui/components/subscription-button.tsx
@@ -1,3 +1,5 @@
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -91,7 +93,7 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
   if (isRequested || isFollowing) {
     return (
       <IconButton
-        src={isSubscribed ? require('@tabler/icons/outline/bell-ringing.svg') : require('@tabler/icons/outline/bell.svg')}
+        src={isSubscribed ? bellRingingIcon : bellIcon}
         onClick={handleToggle}
         title={title}
         theme='outlined'
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index f4df7d0a2..90c294fe4 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -1,3 +1,8 @@
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import deviceDesktopIcon from '@tabler/icons/outline/device-desktop.svg';
+import moonIcon from '@tabler/icons/outline/moon.svg';
+import shadowIcon from '@tabler/icons/outline/shadow.svg';
+import sunIcon from '@tabler/icons/outline/sun.svg';
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -22,13 +27,13 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
   const themeIconSrc = useMemo(() => {
     switch (value) {
       case 'system':
-        return require('@tabler/icons/outline/device-desktop.svg');
+        return deviceDesktopIcon;
       case 'light':
-        return require('@tabler/icons/outline/sun.svg');
+        return sunIcon;
       case 'dark':
-        return require('@tabler/icons/outline/moon.svg');
+        return moonIcon;
       case 'black':
-        return require('@tabler/icons/outline/shadow.svg');
+        return shadowIcon;
       default:
         return null;
     }
@@ -57,7 +62,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         </Select>
 
         <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-          <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='size-4 text-gray-600 dark:text-gray-700' />
+          <Icon src={chevronDownIcon} className='size-4 text-gray-600 dark:text-gray-700' />
         </div>
       </div>
     </label>
diff --git a/src/features/ui/components/who-to-follow-panel.tsx b/src/features/ui/components/who-to-follow-panel.tsx
index f2b8dbed0..8209fccb5 100644
--- a/src/features/ui/components/who-to-follow-panel.tsx
+++ b/src/features/ui/components/who-to-follow-panel.tsx
@@ -1,3 +1,4 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -54,7 +55,7 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
             key={suggestion.account}
             // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
             id={suggestion.account}
-            actionIcon={require('@tabler/icons/outline/x.svg')}
+            actionIcon={xIcon}
             actionTitle={intl.formatMessage(messages.dismissSuggestion)}
             onActionClick={account ? handleDismiss : undefined}
           />
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index d3e7a574a..25836c515 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -1,3 +1,9 @@
+import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
@@ -598,7 +604,7 @@ const Video: React.FC<IVideo> = ({
               onClick={togglePlay}
               autoFocus={autoFocus}
             >
-              <SvgIcon className='w-[20px]' src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
+              <SvgIcon className='w-[20px]' src={paused ? playerPlayIcon : playerPauseIcon} />
             </button>
 
             <button
@@ -611,7 +617,7 @@ const Video: React.FC<IVideo> = ({
                 , { 'py-[10px]': fullscreen })}
               onClick={toggleMute}
             >
-              <SvgIcon className='w-[20px]' src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
+              <SvgIcon className='w-[20px]' src={muted ? volume3Icon : volumeIcon} />
             </button>
 
             <div
@@ -665,7 +671,7 @@ const Video: React.FC<IVideo> = ({
                 , { 'py-[10px]': fullscreen })}
               onClick={toggleFullscreen}
             >
-              <SvgIcon className='w-[20px]' src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')} />
+              <SvgIcon className='w-[20px]' src={fullscreen ? arrowsMinimizeIcon : arrowsMaximizeIcon} />
             </button>
           </div>
         </div>
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index b30c8cb1c..0528a3245 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -1,3 +1,6 @@
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import infoSquareRoundedIcon from '@tabler/icons/outline/info-square-rounded.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -34,7 +37,7 @@ interface IZapPayRequestForm {
   onClose?(): void;
 }
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   zap_button_rounded: { id: 'zap.button.text.rounded', defaultMessage: 'Zap {amount}K sats' },
@@ -149,7 +152,7 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
 
       {hasZapSplit ? <Stack space={2}>
 
-        <Button className='m-auto w-auto' type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={'Zap sats'} disabled={zapAmount < 1 ? true : false} />
+        <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={'Zap sats'} disabled={zapAmount < 1 ? true : false} />
 
         <div className='flex items-center justify-center gap-2 sm:gap-4'>
           <span className='text-[10px] sm:text-xs'>
@@ -160,11 +163,11 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
           </span>
 
           <Link to={'/'} className='text-xs underline'>
-            <SvgIcon src={require('@tabler/icons/outline/info-square-rounded.svg')} className='w-4' alt='info-square-rounded' />
+            <SvgIcon src={infoSquareRoundedIcon} className='w-4' alt='info-square-rounded' />
           </Link>
 
         </div>
-      </Stack> : <Button className='m-auto w-auto' type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />}
+      </Stack> : <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />}
 
     </Stack>
   );
diff --git a/src/jest/test-setup.ts b/src/jest/test-setup.ts
index 732a36ccf..e923323b5 100644
--- a/src/jest/test-setup.ts
+++ b/src/jest/test-setup.ts
@@ -16,7 +16,7 @@ vi.mock('soapbox/queries/client');
 
 // Mock IndexedDB
 // https://dev.to/andyhaskell/testing-your-indexeddb-code-with-jest-2o17
-require('fake-indexeddb/auto');
+import 'fake-indexeddb/auto';
 
 // Clear toasts after each test.
 afterEach(() => {
diff --git a/src/normalizers/account.ts b/src/normalizers/account.ts
index 74a84e46b..c974ccf1b 100644
--- a/src/normalizers/account.ts
+++ b/src/normalizers/account.ts
@@ -11,6 +11,8 @@ import {
   fromJS,
 } from 'immutable';
 
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
 import emojify from 'soapbox/features/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
@@ -100,11 +102,10 @@ const normalizePleromaLegacyFields = (account: ImmutableMap<string, any>) => {
 const normalizeAvatar = (account: ImmutableMap<string, any>) => {
   const avatar = account.get('avatar');
   const avatarStatic = account.get('avatar_static');
-  const missing = require('soapbox/assets/images/avatar-missing.png');
 
   return account.withMutations(account => {
-    account.set('avatar', avatar || avatarStatic || missing);
-    account.set('avatar_static', avatarStatic || avatar || missing);
+    account.set('avatar', avatar || avatarStatic || avatarMissing);
+    account.set('avatar_static', avatarStatic || avatar || avatarMissing);
   });
 };
 
@@ -112,11 +113,10 @@ const normalizeAvatar = (account: ImmutableMap<string, any>) => {
 const normalizeHeader = (account: ImmutableMap<string, any>) => {
   const header = account.get('header');
   const headerStatic = account.get('header_static');
-  const missing = require('soapbox/assets/images/header-missing.png');
 
   return account.withMutations(account => {
-    account.set('header', header || headerStatic || missing);
-    account.set('header_static', headerStatic || header || missing);
+    account.set('header', header || headerStatic || headerMissing);
+    account.set('header_static', headerStatic || header || headerMissing);
   });
 };
 
diff --git a/src/normalizers/group.ts b/src/normalizers/group.ts
index 1e1973172..6b4e5e21b 100644
--- a/src/normalizers/group.ts
+++ b/src/normalizers/group.ts
@@ -10,6 +10,8 @@ import {
   fromJS,
 } from 'immutable';
 
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
 import emojify from 'soapbox/features/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
@@ -53,11 +55,10 @@ export const GroupRecord = ImmutableRecord({
 const normalizeAvatar = (group: ImmutableMap<string, any>) => {
   const avatar = group.get('avatar');
   const avatarStatic = group.get('avatar_static');
-  const missing = require('soapbox/assets/images/avatar-missing.png');
 
   return group.withMutations(group => {
-    group.set('avatar', avatar || avatarStatic || missing);
-    group.set('avatar_static', avatarStatic || avatar || missing);
+    group.set('avatar', avatar || avatarStatic || avatarMissing);
+    group.set('avatar_static', avatarStatic || avatar || avatarMissing);
   });
 };
 
@@ -65,11 +66,10 @@ const normalizeAvatar = (group: ImmutableMap<string, any>) => {
 const normalizeHeader = (group: ImmutableMap<string, any>) => {
   const header = group.get('header');
   const headerStatic = group.get('header_static');
-  const missing = require('soapbox/assets/images/header-missing.png');
 
   return group.withMutations(group => {
-    group.set('header', header || headerStatic || missing);
-    group.set('header_static', headerStatic || header || missing);
+    group.set('header', header || headerStatic || headerMissing);
+    group.set('header_static', headerStatic || header || headerMissing);
   });
 };
 
diff --git a/src/pages/group-page.tsx b/src/pages/group-page.tsx
index d5c6637fa..3331d5b78 100644
--- a/src/pages/group-page.tsx
+++ b/src/pages/group-page.tsx
@@ -1,3 +1,6 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import React, { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
@@ -34,7 +37,7 @@ const DeletedBlankslate = () => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-danger-200 p-3 dark:bg-danger-400/20'>
       <Icon
-        src={require('@tabler/icons/outline/trash.svg')}
+        src={trashIcon}
         className='size-6 text-danger-600 dark:text-danger-400'
       />
     </div>
@@ -52,7 +55,7 @@ const PrivacyBlankslate = () => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-gray-200 p-3 dark:bg-gray-800'>
       <Icon
-        src={require('@tabler/icons/outline/eye-off.svg')}
+        src={eyeOffIcon}
         className='size-6 text-gray-600 dark:text-gray-600'
       />
     </div>
@@ -70,7 +73,7 @@ const BlockedBlankslate = ({ group }: { group: Group }) => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-danger-200 p-3 dark:bg-danger-400/20'>
       <Icon
-        src={require('@tabler/icons/outline/ban.svg')}
+        src={banIcon}
         className='size-6 text-danger-600 dark:text-danger-400'
       />
     </div>
diff --git a/src/schemas/account.ts b/src/schemas/account.ts
index dc3605b17..5fa4b0f83 100644
--- a/src/schemas/account.ts
+++ b/src/schemas/account.ts
@@ -3,6 +3,8 @@ import escapeTextContentForBrowser from 'escape-html';
 import DOMPurify from 'isomorphic-dompurify';
 import z from 'zod';
 
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
 import emojify from 'soapbox/features/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
 
@@ -12,9 +14,6 @@ import { coerceObject, contentSchema, filteredArray, makeCustomEmojiMap } from '
 
 import type { Resolve } from 'soapbox/utils/types';
 
-const avatarMissing = require('soapbox/assets/images/avatar-missing.png');
-const headerMissing = require('soapbox/assets/images/header-missing.png');
-
 const birthdaySchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/);
 
 const hexSchema = z.string().regex(/^#[a-f0-9]{6}$/i);
diff --git a/src/schemas/group.ts b/src/schemas/group.ts
index 9d97a4047..afdbec9fd 100644
--- a/src/schemas/group.ts
+++ b/src/schemas/group.ts
@@ -1,6 +1,8 @@
 import escapeTextContentForBrowser from 'escape-html';
 import z from 'zod';
 
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
 import emojify from 'soapbox/features/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
 
@@ -9,9 +11,6 @@ import { groupRelationshipSchema } from './group-relationship';
 import { groupTagSchema } from './group-tag';
 import { filteredArray, makeCustomEmojiMap } from './utils';
 
-const avatarMissing = require('soapbox/assets/images/avatar-missing.png');
-const headerMissing = require('soapbox/assets/images/header-missing.png');
-
 const groupSchema = z.object({
   avatar: z.string().catch(avatarMissing),
   avatar_static: z.string().catch(''),
diff --git a/src/schemas/instance.test.ts b/src/schemas/instance.test.ts
index fd1b6a37d..8d2f0f9d2 100644
--- a/src/schemas/instance.test.ts
+++ b/src/schemas/instance.test.ts
@@ -71,8 +71,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Pleroma instance with Mastodon configuration format', () => {
-    const instance = require('soapbox/__fixtures__/pleroma-instance.json');
+  it('normalizes Pleroma instance with Mastodon configuration format', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/pleroma-instance.json');
 
     const expected = {
       configuration: {
@@ -93,8 +93,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Mastodon instance with retained configuration', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-instance.json');
+  it('normalizes Mastodon instance with retained configuration', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-instance.json');
 
     const expected = {
       configuration: {
@@ -123,8 +123,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Mastodon 3.0.0 instance with default configuration', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-3.0.0-instance.json');
+  it('normalizes Mastodon 3.0.0 instance with default configuration', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-3.0.0-instance.json');
 
     const expected = {
       configuration: {
@@ -145,8 +145,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Fedibird instance', () => {
-    const instance = require('soapbox/__fixtures__/fedibird-instance.json');
+  it('normalizes Fedibird instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/fedibird-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Sets description_limit
@@ -156,8 +156,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.fedibird_capabilities).toEqual(instance.fedibird_capabilities);
   });
 
-  it('normalizes Mitra instance', () => {
-    const instance = require('soapbox/__fixtures__/mitra-instance.json');
+  it('normalizes Mitra instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mitra-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Adds configuration and description_limit
@@ -165,8 +165,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes GoToSocial instance', () => {
-    const instance = require('soapbox/__fixtures__/gotosocial-instance.json');
+  it('normalizes GoToSocial instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/gotosocial-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Normalizes max_toot_chars
@@ -178,8 +178,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes Friendica instance', () => {
-    const instance = require('soapbox/__fixtures__/friendica-instance.json');
+  it('normalizes Friendica instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/friendica-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Normalizes max_toot_chars
@@ -191,21 +191,21 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes a Mastodon RC version', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-instance-rc.json');
+  it('normalizes a Mastodon RC version', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-instance-rc.json');
     const result = instanceV1Schema.parse(instance);
 
     expect(result.version).toEqual('3.5.0-rc1');
   });
 
-  it('normalizes Pixelfed instance', () => {
-    const instance = require('soapbox/__fixtures__/pixelfed-instance.json');
+  it('normalizes Pixelfed instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/pixelfed-instance.json');
     const result = instanceV1Schema.parse(instance);
     expect(result.title).toBe('pixelfed');
   });
 
-  it('renames Akkoma to Pleroma', () => {
-    const instance = require('soapbox/__fixtures__/akkoma-instance.json');
+  it('renames Akkoma to Pleroma', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/akkoma-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     expect(result.version).toEqual('2.7.2 (compatible; Pleroma 2.4.50+akkoma)');
diff --git a/src/service-worker/sw.ts b/src/service-worker/sw.ts
index c08744bcf..6323bd167 100644
--- a/src/service-worker/sw.ts
+++ b/src/service-worker/sw.ts
@@ -3,6 +3,10 @@ import IntlMessageFormat from 'intl-messageformat';
 import 'intl-pluralrules';
 import unescape from 'lodash/unescape';
 
+import expandIcon from '../assets/images/web-push/web-push-icon_expand.png';
+import favouriteIcon from '../assets/images/web-push/web-push-icon_favourite.png';
+import reblogIcon from '../assets/images/web-push/web-push-icon_reblog.png';
+
 import type {
   Account as AccountEntity,
   Notification as NotificationEntity,
@@ -195,21 +199,21 @@ const handlePush = (event: PushEvent) => {
 /** Native action to open a status on the device. */
 const actionExpand = (preferred_locale: string) => ({
   action: 'expand',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_expand.png')}`,
+  icon: expandIcon,
   title: formatMessage('status.show_more', preferred_locale),
 });
 
 /** Native action to repost status. */
 const actionReblog = (preferred_locale: string) => ({
   action: 'reblog',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_reblog.png')}`,
+  icon: reblogIcon,
   title: formatMessage('status.reblog', preferred_locale),
 });
 
 /** Native action to like status. */
 const actionFavourite = (preferred_locale: string) => ({
   action: 'favourite',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_favourite.png')}`,
+  icon: favouriteIcon,
   title: formatMessage('status.favourite', preferred_locale),
 });
 
diff --git a/src/utils/accounts.ts b/src/utils/accounts.ts
index c23344e87..0d57a6494 100644
--- a/src/utils/accounts.ts
+++ b/src/utils/accounts.ts
@@ -1,3 +1,6 @@
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
+
 import type { Account } from 'soapbox/schemas';
 
 const getDomainFromURL = (account: Pick<Account, 'url'>): string => {
@@ -30,7 +33,7 @@ export const getAcct = (account: Pick<Account, 'fqn' | 'acct'>, displayFqn: bool
 const DEFAULT_HEADERS: string[] = [
   '/headers/original/missing.png', // Mastodon
   '/images/banner.png', // Pleroma
-  require('soapbox/assets/images/header-missing.png'), // header not provided by backend
+  headerMissing, // header not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */
@@ -42,7 +45,7 @@ export const isDefaultHeader = (url: string) => {
 const DEFAULT_AVATARS = [
   '/avatars/original/missing.png', // Mastodon
   '/images/avi.png', // Pleroma
-  require('soapbox/assets/images/avatar-missing.png'), // avatar not provided by backend
+  avatarMissing, // avatar not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */
diff --git a/vite.config.ts b/vite.config.ts
index 21836551e..282283aad 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,6 @@ import checker from 'vite-plugin-checker';
 import compileTime from 'vite-plugin-compile-time';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { VitePWA } from 'vite-plugin-pwa';
-import vitePluginRequire from 'vite-plugin-require';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 const { NODE_ENV } = process.env;
@@ -37,8 +36,6 @@ export default defineConfig(({ command }) => ({
   },
   plugins: [
     checker({ typescript: true }),
-    // @ts-ignore
-    vitePluginRequire.default(),
     compileTime(),
     createHtmlPlugin({
       template: 'index.html',
diff --git a/yarn.lock b/yarn.lock
index b6f1e70d8..7ed31ca3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -73,7 +73,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.24.5", "@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
+"@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
   integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
@@ -282,7 +282,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.24.5", "@babel/parser@^7.25.0", "@babel/parser@^7.25.3", "@babel/parser@^7.25.6":
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
   integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
@@ -962,7 +962,7 @@
     "@babel/parser" "^7.25.0"
     "@babel/types" "^7.25.0"
 
-"@babel/traverse@^7.24.5", "@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
+"@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
   integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
@@ -975,7 +975,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.5", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.4.4":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
   integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
@@ -1559,7 +1559,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.25"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -2515,15 +2515,7 @@
   resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.1.tgz#b19b4646915f0ae2c306bf984dc0a59c5cfc97ba"
   integrity sha512-4mI1FuUUZiuT95fSVqvZxp/ssQK9zsa86S43h9x3zPOSU9BBJ+BfDkXwuaU7BfsD+e7U0/cUUfJFk3iW2M4okA==
 
-"@types/eslint-scope@^3.7.3":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
-  integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
-  dependencies:
-    "@types/eslint" "*"
-    "@types/estree" "*"
-
-"@types/eslint@*", "@types/eslint@7 || 8":
+"@types/eslint@7 || 8":
   version "8.56.6"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.6.tgz#d5dc16cac025d313ee101108ba5714ea10eb3ed0"
   integrity sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A==
@@ -2571,7 +2563,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.9":
   version "7.0.13"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85"
   integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==
@@ -2948,200 +2940,17 @@
     loupe "^3.1.1"
     tinyrainbow "^1.2.0"
 
-"@vue/compiler-core@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.8.tgz#03ee4a2fa022c9bc3e59f789a1e14593b1e95b10"
-  integrity sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==
-  dependencies:
-    "@babel/parser" "^7.25.3"
-    "@vue/shared" "3.5.8"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.2.0"
-
-"@vue/compiler-dom@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz#03e4a6bef00a1979613a1db2ab39e9b2dced3373"
-  integrity sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==
-  dependencies:
-    "@vue/compiler-core" "3.5.8"
-    "@vue/shared" "3.5.8"
-
-"@vue/compiler-sfc@^3.4.27":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.8.tgz#b2091ec01c63ab02a1cd6783224322f245c6a308"
-  integrity sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==
-  dependencies:
-    "@babel/parser" "^7.25.3"
-    "@vue/compiler-core" "3.5.8"
-    "@vue/compiler-dom" "3.5.8"
-    "@vue/compiler-ssr" "3.5.8"
-    "@vue/shared" "3.5.8"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.11"
-    postcss "^8.4.47"
-    source-map-js "^1.2.0"
-
-"@vue/compiler-ssr@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.8.tgz#fbad34f8bbed15aa6e7b9d78324d93af93403145"
-  integrity sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==
-  dependencies:
-    "@vue/compiler-dom" "3.5.8"
-    "@vue/shared" "3.5.8"
-
-"@vue/shared@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.8.tgz#6ef14933872dcc4f7b79fee3aaecf648ff807fed"
-  integrity sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==
-
-"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
-  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
-  dependencies:
-    "@webassemblyjs/helper-numbers" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-
-"@webassemblyjs/floating-point-hex-parser@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
-  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
-
-"@webassemblyjs/helper-api-error@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
-  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
-
-"@webassemblyjs/helper-buffer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
-  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
-
-"@webassemblyjs/helper-numbers@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
-  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
-  dependencies:
-    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
-    "@webassemblyjs/helper-api-error" "1.11.6"
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/helper-wasm-bytecode@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
-  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
-
-"@webassemblyjs/helper-wasm-section@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
-  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-
-"@webassemblyjs/ieee754@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
-  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
-  dependencies:
-    "@xtuc/ieee754" "^1.2.0"
-
-"@webassemblyjs/leb128@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
-  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
-  dependencies:
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/utf8@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
-  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
-
-"@webassemblyjs/wasm-edit@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
-  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/helper-wasm-section" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-opt" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
-    "@webassemblyjs/wast-printer" "1.11.6"
-
-"@webassemblyjs/wasm-gen@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz#fb5283e0e8b4551cc4e9c3c0d7184a65faf7c268"
-  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/ieee754" "1.11.6"
-    "@webassemblyjs/leb128" "1.11.6"
-    "@webassemblyjs/utf8" "1.11.6"
-
-"@webassemblyjs/wasm-opt@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
-  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
-
-"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
-  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-api-error" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/ieee754" "1.11.6"
-    "@webassemblyjs/leb128" "1.11.6"
-    "@webassemblyjs/utf8" "1.11.6"
-
-"@webassemblyjs/wast-printer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
-  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@xtuc/long" "4.2.2"
-
 "@webbtc/webln-types@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@webbtc/webln-types/-/webln-types-3.0.0.tgz#448b2138423865087ba8859e9e6430fc2463b864"
   integrity sha512-aXfTHLKz5lysd+6xTeWl+qHNh/p3qVYbeLo+yDN5cUDmhie2ZoGvkppfWxzbGkcFBzb6dJyQ2/i2cbmDHas+zQ==
 
-"@xtuc/ieee754@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
-  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
-
-"@xtuc/long@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
-  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
-
-acorn-import-assertions@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
-  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
-
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
+acorn@^8.8.2, acorn@^8.9.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
@@ -3168,11 +2977,6 @@ ajv-formats@^2.1.1:
   dependencies:
     ajv "^8.0.0"
 
-ajv-keywords@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
-  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-
 ajv-keywords@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
@@ -3180,7 +2984,7 @@ ajv-keywords@^5.0.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3521,7 +3325,7 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.23.1:
+browserslist@^4.0.0, browserslist@^4.16.6, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.23.1:
   version "4.24.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.0.tgz#a1325fe4bc80b64fda169629fc01b3d6cecd38d4"
   integrity sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==
@@ -3685,11 +3489,6 @@ chokidar@^4.0.0:
   dependencies:
     readdirp "^4.0.1"
 
-chrome-trace-event@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
-  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
-
 classnames@^2.2.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
@@ -4325,7 +4124,7 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.12.0, enhanced-resolve@^5.15.0:
+enhanced-resolve@^5.12.0:
   version "5.15.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
   integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
@@ -4427,11 +4226,6 @@ es-iterator-helpers@^1.0.12:
     iterator.prototype "^1.1.2"
     safe-array-concat "^1.0.1"
 
-es-module-lexer@^1.2.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.1.tgz#c1b0dd5ada807a3b3155315911f364dc4e909db1"
-  integrity sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==
-
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -4694,14 +4488,6 @@ eslint-plugin-tailwindcss@^3.17.5:
     fast-glob "^3.2.5"
     postcss "^8.4.4"
 
-eslint-scope@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^4.1.1"
-
 eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
@@ -4781,11 +4567,6 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
@@ -4813,11 +4594,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-events@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
-  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
-
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -5097,11 +4873,6 @@ glob-parent@^5.1.2, glob-parent@^6.0.1, glob-parent@^6.0.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
 glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -5207,7 +4978,7 @@ got@^11.8.3:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
@@ -5271,11 +5042,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash-sum@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
-
 he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -5801,15 +5567,6 @@ jake@^10.8.5:
     filelist "^1.0.4"
     minimatch "^3.1.2"
 
-jest-worker@^27.4.5:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
-  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
 jiti@^1.21.0:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
@@ -5879,7 +5636,7 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
-json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
+json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
@@ -6111,11 +5868,6 @@ load-tsconfig@^0.2.3:
   resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
   integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
 
-loader-runner@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
-  integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==
-
 loader-utils@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
@@ -6324,7 +6076,7 @@ mime-db@1.49.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
   integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
 
-mime-types@^2.1.12, mime-types@^2.1.27:
+mime-types@^2.1.12:
   version "2.1.32"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.32.tgz#1d00e89e7de7fe02008db61001d9e02852670fd5"
   integrity sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==
@@ -6431,11 +6183,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-neo-async@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -7783,15 +7530,6 @@ scheduler@^0.23.2:
   dependencies:
     loose-envify "^1.1.0"
 
-schema-utils@^3.1.1, schema-utils@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
-  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
-  dependencies:
-    "@types/json-schema" "^7.0.8"
-    ajv "^6.12.5"
-    ajv-keywords "^3.5.2"
-
 schema-utils@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
@@ -7904,7 +7642,7 @@ smob@^1.0.0:
   resolved "https://registry.yarnpkg.com/smob/-/smob-1.5.0.tgz#85d79a1403abf128d24d3ebc1cdc5e1a9548d3ab"
   integrity sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0, source-map-js@^1.2.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -8216,13 +7954,6 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
-  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-hyperlinks@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.1.0.tgz#b56150ff0173baacc15f21956450b61f2b18d3ac"
@@ -8307,7 +8038,7 @@ tailwindcss@^3.4.13:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
-tapable@^2.1.1, tapable@^2.2.0:
+tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
@@ -8327,18 +8058,7 @@ tempy@^0.6.0:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terser-webpack-plugin@^5.3.7:
-  version "5.3.9"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
-  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jest-worker "^27.4.5"
-    schema-utils "^3.1.1"
-    serialize-javascript "^6.0.1"
-    terser "^5.16.8"
-
-terser@^5.10.0, terser@^5.16.8, terser@^5.17.4:
+terser@^5.10.0, terser@^5.17.4:
   version "5.33.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.33.0.tgz#8f9149538c7468ffcb1246cfec603c16720d2db1"
   integrity sha512-JuPVaB7s1gdFKPKTelwUyRq5Sid2A3Gko2S0PncwdBq7kN9Ti9HPWDQ06MPsEDGsZeVESjKEnyGy68quBk1w6g==
@@ -8739,19 +8459,6 @@ vite-plugin-pwa@^0.20.5:
     workbox-build "^7.1.0"
     workbox-window "^7.1.0"
 
-vite-plugin-require@^1.2.14:
-  version "1.2.14"
-  resolved "https://registry.yarnpkg.com/vite-plugin-require/-/vite-plugin-require-1.2.14.tgz#6c2861cac74fcb23f20bd3c0d3a61d823f05f774"
-  integrity sha512-i52DfITgYKtOZyh9kOjyy4ENTQBVHG0ozTKHQdFkGAHYqZwM3Dn2c5gsA5rR7IrHQ/PQET3SMz6HkNzZ2fXCyA==
-  dependencies:
-    "@babel/generator" "^7.24.5"
-    "@babel/parser" "^7.24.5"
-    "@babel/traverse" "^7.24.5"
-    "@babel/types" "^7.24.5"
-    "@vue/compiler-sfc" "^3.4.27"
-    vue-loader "^17.4.2"
-    webpack "^4.46.0 || ^5.0.0"
-
 vite-plugin-static-copy@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/vite-plugin-static-copy/-/vite-plugin-static-copy-1.0.6.tgz#ff457c16e8cfa564472aafd1698790ac89d05508"
@@ -8842,15 +8549,6 @@ vscode-uri@^3.0.2:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.7.tgz#6d19fef387ee6b46c479e5fb00870e15e58c1eb8"
   integrity sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==
 
-vue-loader@^17.4.2:
-  version "17.4.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.4.2.tgz#f87f0d8adfcbbe8623de9eba1979d41ba223c6da"
-  integrity sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==
-  dependencies:
-    chalk "^4.1.0"
-    hash-sum "^2.0.0"
-    watchpack "^2.4.0"
-
 w3c-xmlserializer@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz#f925ba26855158594d907313cedd1476c5967f6c"
@@ -8872,14 +8570,6 @@ warning@^4.0.0, warning@^4.0.1:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
-  dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"
-
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -8890,41 +8580,6 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack-sources@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
-  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
-
-"webpack@^4.46.0 || ^5.0.0":
-  version "5.88.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
-  integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==
-  dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^1.0.0"
-    "@webassemblyjs/ast" "^1.11.5"
-    "@webassemblyjs/wasm-edit" "^1.11.5"
-    "@webassemblyjs/wasm-parser" "^1.11.5"
-    acorn "^8.7.1"
-    acorn-import-assertions "^1.9.0"
-    browserslist "^4.14.5"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.15.0"
-    es-module-lexer "^1.2.1"
-    eslint-scope "5.1.1"
-    events "^3.2.0"
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
-    json-parse-even-better-errors "^2.3.1"
-    loader-runner "^4.2.0"
-    mime-types "^2.1.27"
-    neo-async "^2.6.2"
-    schema-utils "^3.2.0"
-    tapable "^2.1.1"
-    terser-webpack-plugin "^5.3.7"
-    watchpack "^2.4.0"
-    webpack-sources "^3.2.3"
-
 websocket-ts@^2.1.5:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/websocket-ts/-/websocket-ts-2.1.5.tgz#b6b51f0afca89d6bc7ff71c9e74540f19ae0262c"

From 5667e02aa74cb25e52170ed2d46419b1a9573969 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 19:01:03 -0600
Subject: [PATCH 062/133] Remove gameboy.tsx (sad)

---
 src/components/gameboy.tsx | 200 -------------------------------------
 1 file changed, 200 deletions(-)
 delete mode 100644 src/components/gameboy.tsx

diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx
deleted file mode 100644
index e7635c22d..000000000
--- a/src/components/gameboy.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { WasmBoy } from '@soapbox.pub/wasmboy';
-import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
-import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
-import downloadIcon from '@tabler/icons/outline/download.svg';
-import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
-import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
-import volume3Icon from '@tabler/icons/outline/volume-3.svg';
-import volumeIcon from '@tabler/icons/outline/volume.svg';
-// @ts-ignore No types available
-// eslint-disable-next-line import/no-unresolved
-import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import { exitFullscreen, isFullscreen, requestFullscreen } from 'soapbox/features/ui/util/fullscreen';
-
-import { HStack, IconButton } from './ui';
-
-let gainNode: GainNode | undefined;
-
-interface IGameboy extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'> {
-  /** Classname of the outer `<div>`. */
-  className?: string;
-  /** URL to the ROM. */
-  src: string;
-  /** Aspect ratio of the canvas. */
-  aspect?: 'normal' | 'stretched';
-}
-
-/** Component to display a playable Gameboy emulator. */
-const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocus, onBlur, ...rest }) => {
-  const node = useRef<HTMLDivElement>(null);
-  const canvas = useRef<HTMLCanvasElement>(null);
-
-  const [paused, setPaused] = useState(false);
-  const [muted, setMuted] = useState(true);
-  const [fullscreen, setFullscreen] = useState(false);
-  const [showControls, setShowControls] = useState(true);
-
-  async function init() {
-    await WasmBoy.config(WasmBoyOptions, canvas.current!);
-    await WasmBoy.loadROM(src);
-    await play();
-
-    if (document.activeElement === canvas.current) {
-      await WasmBoy.enableDefaultJoypad();
-    } else {
-      await WasmBoy.disableDefaultJoypad();
-    }
-  }
-
-  const handleFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
-    WasmBoy.enableDefaultJoypad();
-  }, []);
-
-  const handleBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
-    WasmBoy.disableDefaultJoypad();
-  }, []);
-
-  const handleFullscreenChange = useCallback(() => {
-    setFullscreen(isFullscreen());
-  }, []);
-
-  const handleCanvasClick = useCallback(() => {
-    setShowControls(!showControls);
-  }, [showControls]);
-
-  const pause = async () => {
-    await WasmBoy.pause();
-    setPaused(true);
-  };
-
-  const play = async () => {
-    await WasmBoy.play();
-    setPaused(false);
-  };
-
-  const togglePaused = () => paused ? play() : pause();
-  const toggleMuted = () => setMuted(!muted);
-
-  const toggleFullscreen = () => {
-    if (isFullscreen()) {
-      exitFullscreen();
-    } else if (node.current) {
-      requestFullscreen(node.current);
-    }
-  };
-
-  const handleDownload = () => {
-    window.open(src);
-  };
-
-  useEffect(() => {
-    init();
-
-    return () => {
-      WasmBoy.pause();
-      WasmBoy.disableDefaultJoypad();
-    };
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('fullscreenchange', handleFullscreenChange, true);
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange, true);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (fullscreen) {
-      node.current?.focus();
-    }
-  }, [fullscreen]);
-
-  useEffect(() => {
-    if (gainNode) {
-      gainNode.gain.value = muted ? 0 : 1;
-    }
-  }, [gainNode, muted]);
-
-  return (
-    <div
-      ref={node}
-      tabIndex={0}
-      className={clsx(className, 'relative outline-none')}
-      onFocus={onFocus ?? handleFocus}
-      onBlur={onBlur ?? handleBlur}
-    >
-      <canvas
-        ref={canvas}
-        onClick={handleCanvasClick}
-        className={clsx('size-full bg-black ', {
-          'object-contain': aspect === 'normal',
-          'object-cover': aspect === 'stretched',
-        })}
-        {...rest}
-      />
-
-      <HStack
-        justifyContent='between'
-        className={clsx('pointer-events-none absolute inset-x-0 bottom-0 w-full bg-gradient-to-t from-black/50 to-transparent p-2 opacity-0 transition-opacity', {
-          'pointer-events-auto opacity-100': showControls,
-        })}
-      >
-        <HStack space={2}>
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={togglePaused}
-            src={paused ? playerPlayIcon : playerPauseIcon}
-          />
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={toggleMuted}
-            src={muted ? volume3Icon : volumeIcon}
-          />
-        </HStack>
-
-        <HStack space={2}>
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            src={downloadIcon}
-            onClick={handleDownload}
-          />
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={toggleFullscreen}
-            src={fullscreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
-          />
-        </HStack>
-      </HStack>
-    </div>
-  );
-};
-
-const WasmBoyOptions = {
-  headless: false,
-  useGbcWhenOptional: true,
-  isAudioEnabled: true,
-  frameSkip: 1,
-  audioBatchProcessing: true,
-  timersBatchProcessing: false,
-  audioAccumulateSamples: true,
-  graphicsBatchProcessing: false,
-  graphicsDisableScanlineRendering: false,
-  tileRendering: true,
-  tileCaching: true,
-  gameboyFPSCap: 60,
-  updateGraphicsCallback: false,
-  updateAudioCallback: (audioContext: AudioContext, audioBufferSourceNode: AudioBufferSourceNode) => {
-    gainNode = gainNode ?? audioContext.createGain();
-    audioBufferSourceNode.connect(gainNode);
-    return gainNode;
-  },
-  saveStateCallback: false,
-};
-
-export default Gameboy;
\ No newline at end of file

From 848d1286034b3674be162230f19bdbe428f3f996 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 19:09:24 -0600
Subject: [PATCH 063/133] ts-ignore (sad)

---
 vite.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.ts b/vite.config.ts
index 282283aad..7ad188c2c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,6 +14,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 const { NODE_ENV } = process.env;
 
+// @ts-ignore
 export default defineConfig(({ command }) => ({
   build: {
     assetsDir: 'packs',

From 223533f4db01a2545a9e2f6fd764d4050509678f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Nov 2024 19:22:51 -0600
Subject: [PATCH 064/133] Fix random type errors now that imports are type safe

---
 src/features/compose/components/privacy-dropdown.tsx |  2 +-
 src/features/ui/components/action-button.tsx         | 11 ++++++++++-
 src/features/ui/components/theme-selector.tsx        |  2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 4ab3b370a..0063ad65b 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -250,7 +250,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
             'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !open,
             'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': open,
           })}
-          src={valueOption?.icon}
+          src={valueOption!.icon}
           title={intl.formatMessage(messages.change_privacy)}
           onClick={handleToggle}
           onMouseDown={handleMouseDown}
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index ec1a5874d..03257713a 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -221,12 +221,21 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       );
     } else if (!account.relationship?.blocking && !account.relationship?.muting) {
       // Follow & Unfollow
+
+      let icon: string | undefined;
+
+      if (isFollowing) {
+        icon = plusIcon;
+      } else if (blockedBy) {
+        icon = banIcon;
+      }
+
       return (
         <Button
           size='sm'
           disabled={blockedBy}
           theme={isFollowing ? 'secondary' : 'primary'}
-          icon={blockedBy ? banIcon : (!isFollowing && plusIcon)}
+          icon={icon}
           onClick={handleFollow}
         >
           {isFollowing ? (
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index 90c294fe4..019a8d59b 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -35,7 +35,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
       case 'black':
         return shadowIcon;
       default:
-        return null;
+        return deviceDesktopIcon;
     }
   }, [value]);
 

From abccbdfabf49aed1b0b5bffc2f08fa993f95a15f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 12:39:11 -0600
Subject: [PATCH 065/133] Refactor vite config, upgrade
 rollup-plugin-visualizer

---
 package.json   |   2 +-
 vite.config.ts | 227 ++++++++++++++++++++++++++++---------------------
 yarn.lock      |   8 +-
 3 files changed, 133 insertions(+), 104 deletions(-)

diff --git a/package.json b/package.json
index 4e39ed057..b88e232dc 100644
--- a/package.json
+++ b/package.json
@@ -180,7 +180,7 @@
     "husky": "^9.0.0",
     "jsdom": "^24.0.0",
     "lint-staged": ">=10",
-    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "tailwindcss": "^3.4.13",
diff --git a/vite.config.ts b/vite.config.ts
index 7ad188c2c..46d6cdef0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,119 +1,148 @@
-/* eslint-disable quotes */
 /// <reference types="vitest" />
+
 import fs from 'node:fs';
 import { fileURLToPath, URL } from 'node:url';
 
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
-import { defineConfig } from 'vite';
+import { defineConfig, Plugin, UserConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 import compileTime from 'vite-plugin-compile-time';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { VitePWA } from 'vite-plugin-pwa';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
-const { NODE_ENV } = process.env;
+const { NODE_ENV, PORT } = process.env;
 
-// @ts-ignore
-export default defineConfig(({ command }) => ({
-  build: {
-    assetsDir: 'packs',
-    assetsInlineLimit: 0,
-    rollupOptions: {
-      output: {
-        assetFileNames: 'packs/assets/[name]-[hash].[ext]',
-        chunkFileNames: 'packs/js/[name]-[hash].js',
-        entryFileNames: 'packs/[name]-[hash].js',
-      },
-    },
-    sourcemap: true,
-  },
-  assetsInclude: ['**/*.oga'],
-  server: {
-    port: Number(process.env.PORT ?? 3036),
-  },
-  optimizeDeps: {
-    exclude: command === 'serve' ? ['@soapbox.pub/wasmboy'] : [],
-  },
-  plugins: [
-    checker({ typescript: true }),
-    compileTime(),
-    createHtmlPlugin({
-      template: 'index.html',
-      minify: {
-        collapseWhitespace: true,
-        removeComments: false,
-      },
-      inject: {
-        data: {
-          snippets: readFileContents('custom/snippets.html'),
-          csp: NODE_ENV === 'production'
-            ? "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';"
-            : "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss: http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: https: http://localhost:* http://127.0.0.1:*; media-src 'self' https: http://localhost:* http://127.0.0.1:*; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';",
+export default defineConfig(() => {
+  const config: UserConfig = {
+    build: {
+      assetsDir: 'packs',
+      assetsInlineLimit: 0,
+      rollupOptions: {
+        output: {
+          assetFileNames: 'packs/assets/[name]-[hash].[ext]',
+          chunkFileNames: 'packs/js/[name]-[hash].js',
+          entryFileNames: 'packs/[name]-[hash].js',
         },
       },
-    }),
-    react(),
-    VitePWA({
-      injectRegister: null,
-      strategies: 'injectManifest',
-      injectManifest: {
-        injectionPoint: undefined,
-        plugins: [
-          // @ts-ignore
-          compileTime(),
-        ],
-      },
-      manifest: {
-        name: 'Soapbox',
-        short_name: 'Soapbox',
-        description: 'A social media frontend with a focus on custom branding and ease of use.',
-      },
-      srcDir: 'src/service-worker',
-      filename: 'sw.ts',
-    }),
-    viteStaticCopy({
-      targets: [{
-        src: './node_modules/@twemoji/svg/*',
-        dest: 'packs/emoji/',
-      }, {
-        src: './src/instance',
-        dest: '.',
-      }, {
-        src: './custom/instance',
-        dest: '.',
-      }],
-    }),
-    visualizer({
-      emitFile: true,
-      filename: 'report.html',
-      title: 'Soapbox Bundle',
-    }),
-    {
-      name: 'mock-api',
-      configureServer(server) {
-        server.middlewares.use((req, res, next) => {
-          if (/^\/api\//.test(req.url!)) {
-            res.statusCode = 404;
-            res.end('Not Found');
-          } else {
-            next();
-          }
-        });
-      },
+      sourcemap: true,
     },
-  ],
-  resolve: {
-    alias: [
-      { find: 'soapbox', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
+    assetsInclude: ['**/*.oga'],
+    server: {
+      port: Number(PORT ?? 3036),
+    },
+    plugins: [
+      checker({ typescript: true }),
+      compileTime(),
+      createHtmlPlugin({
+        template: 'index.html',
+        minify: {
+          collapseWhitespace: true,
+          removeComments: false,
+        },
+        inject: {
+          data: {
+            snippets: readFileContents('custom/snippets.html'),
+            csp: buildCSP(NODE_ENV),
+          },
+        },
+      }),
+      react(),
+      VitePWA({
+        injectRegister: null,
+        strategies: 'injectManifest',
+        injectManifest: {
+          injectionPoint: undefined,
+          plugins: [
+            // @ts-ignore
+            compileTime(),
+          ],
+        },
+        manifest: {
+          name: 'Soapbox',
+          short_name: 'Soapbox',
+          description: 'A social media frontend with a focus on custom branding and ease of use.',
+        },
+        srcDir: 'src/service-worker',
+        filename: 'sw.ts',
+      }),
+      viteStaticCopy({
+        targets: [{
+          src: './node_modules/@twemoji/svg/*',
+          dest: 'packs/emoji/',
+        }, {
+          src: './src/instance',
+          dest: '.',
+        }, {
+          src: './custom/instance',
+          dest: '.',
+        }],
+      }),
+      visualizer({
+        emitFile: true,
+        filename: 'report.html',
+        title: 'Soapbox Bundle',
+      }) as Plugin,
+      {
+        name: 'mock-api',
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            if (/^\/api\//.test(req.url!)) {
+              res.statusCode = 404;
+              res.end('Not Found');
+            } else {
+              next();
+            }
+          });
+        },
+      },
     ],
-  },
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: 'src/jest/test-setup.ts',
-  },
-}));
+    resolve: {
+      alias: [
+        { find: 'soapbox', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
+      ],
+    },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: 'src/jest/test-setup.ts',
+    },
+  };
+
+  return config;
+});
+
+/** Build a sane default CSP string to embed in index.html in case the server doesn't return one. */
+/* eslint-disable quotes */
+function buildCSP(env: string | undefined): string {
+  const csp = [
+    "default-src 'none'",
+    "script-src 'self' 'wasm-unsafe-eval'",
+    "style-src 'self' 'unsafe-inline'",
+    "frame-src 'self' https:",
+    "font-src 'self'",
+    "base-uri 'self'",
+    "manifest-src 'self'",
+  ];
+
+  if (env === 'development') {
+    csp.push(
+      "connect-src 'self' blob: https: wss: http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*",
+      "img-src 'self' data: blob: https: http://localhost:* http://127.0.0.1:*",
+      "media-src 'self' https: http://localhost:* http://127.0.0.1:*",
+    );
+  } else {
+    csp.push(
+      "connect-src 'self' blob: https: wss:",
+      "img-src 'self' data: blob: https:",
+      "media-src 'self' https:",
+    );
+  }
+
+  return csp.join('; ');
+}
+/* eslint-enable quotes */
 
 /** Return file as string, or return empty string if the file isn't found. */
 function readFileContents(path: string) {
diff --git a/yarn.lock b/yarn.lock
index 7ed31ca3e..19398bd64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7416,10 +7416,10 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup-plugin-visualizer@^5.9.2:
-  version "5.9.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.2.tgz#f1aa2d9b1be8ebd6869223c742324897464d8891"
-  integrity sha512-waHktD5mlWrYFrhOLbti4YgQCn1uR24nYsNuXxg7LkPH8KdTXVWR9DNY1WU0QqokyMixVXJS4J04HNrVTMP01A==
+rollup-plugin-visualizer@^5.12.0:
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz#661542191ce78ee4f378995297260d0c1efb1302"
+  integrity sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==
   dependencies:
     open "^8.4.0"
     picomatch "^2.3.1"

From b52f8a9b5e2a26f981c15462bb9b01042f45ee20 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 13:12:33 -0600
Subject: [PATCH 066/133] vite: improve devserver backend routes middleware

---
 vite.config.ts | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 46d6cdef0..cf13e4856 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,7 @@ import { fileURLToPath, URL } from 'node:url';
 
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
-import { defineConfig, Plugin, UserConfig } from 'vite';
+import { Connect, defineConfig, Plugin, UserConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 import compileTime from 'vite-plugin-compile-time';
 import { createHtmlPlugin } from 'vite-plugin-html';
@@ -85,16 +85,19 @@ export default defineConfig(() => {
         title: 'Soapbox Bundle',
       }) as Plugin,
       {
-        name: 'mock-api',
+        // Vite's default behavior is to serve index.html (HTTP 200) for unmatched routes, like a PWA.
+        // Instead, 404 on known backend routes to more closely match a real server.
+        name: 'vite-mastodon-dev',
         configureServer(server) {
-          server.middlewares.use((req, res, next) => {
-            if (/^\/api\//.test(req.url!)) {
-              res.statusCode = 404;
-              res.end('Not Found');
-            } else {
-              next();
-            }
-          });
+          const notFoundHandler: Connect.SimpleHandleFunction = (_req, res) => {
+            res.statusCode = 404;
+            res.end();
+          };
+
+          server.middlewares.use('/api/', notFoundHandler);
+          server.middlewares.use('/oauth/', notFoundHandler);
+          server.middlewares.use('/nodeinfo/', notFoundHandler);
+          server.middlewares.use('/.well-known/', notFoundHandler);
         },
       },
     ],

From 2dbda40969bc04a3c0df20f7dc9e7d39474da17d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 13:43:30 -0600
Subject: [PATCH 067/133] Import vitest functions explicitly, remove
 "vitest/globals" from tsconfig

---
 src/actions/about.test.ts                                   | 2 ++
 src/actions/account-notes.test.ts                           | 2 ++
 src/actions/accounts.test.ts                                | 2 ++
 src/actions/blocks.test.ts                                  | 2 ++
 src/actions/compose.test.ts                                 | 2 ++
 src/actions/notifications.test.ts                           | 2 ++
 src/actions/onboarding.test.ts                              | 2 ++
 src/actions/preload.test.ts                                 | 2 ++
 src/actions/status-quotes.test.ts                           | 2 ++
 src/actions/statuses.test.ts                                | 2 ++
 src/api/hooks/groups/useGroup.test.ts                       | 2 ++
 src/api/hooks/groups/useGroupLookup.test.ts                 | 2 ++
 src/api/hooks/groups/useGroupMedia.test.ts                  | 2 ++
 src/api/hooks/groups/useGroupMembers.test.ts                | 2 ++
 src/api/hooks/groups/useGroups.test.ts                      | 2 ++
 src/api/hooks/groups/usePendingGroups.test.ts               | 2 ++
 src/components/account.test.tsx                             | 2 ++
 src/components/autosuggest-emoji.test.tsx                   | 2 ++
 src/components/badge.test.tsx                               | 2 ++
 src/components/display-name.test.tsx                        | 2 ++
 src/components/polls/poll-footer.test.tsx                   | 2 ++
 src/components/quoted-status.test.tsx                       | 2 ++
 src/components/scroll-top-button.test.tsx                   | 2 ++
 src/components/status.test.tsx                              | 2 ++
 src/components/statuses/sensitive-content-overlay.test.tsx  | 2 ++
 src/components/ui/avatar/avatar.test.tsx                    | 2 ++
 src/components/ui/button/button.test.tsx                    | 2 ++
 src/components/ui/card/card.test.tsx                        | 2 ++
 src/components/ui/column/column.test.tsx                    | 2 ++
 src/components/ui/datepicker/datepicker.test.tsx            | 2 ++
 src/components/ui/divider/divider.test.tsx                  | 2 ++
 src/components/ui/emoji/emoji.test.tsx                      | 2 ++
 src/components/ui/form-actions/form-actions.test.tsx        | 2 ++
 src/components/ui/form-group/form-group.test.tsx            | 2 ++
 src/components/ui/form/form.test.tsx                        | 2 ++
 src/components/ui/icon/svg-icon.test.tsx                    | 2 ++
 src/components/ui/modal/modal.test.tsx                      | 2 ++
 src/components/validation-checkmark.test.tsx                | 2 ++
 src/entity-store/reducer.test.ts                            | 2 ++
 src/features/auth-login/components/captcha.test.tsx         | 2 ++
 src/features/auth-login/components/login-form.test.tsx      | 2 ++
 src/features/auth-login/components/login-page.test.tsx      | 2 ++
 src/features/auth-login/components/otp-auth-form.test.tsx   | 2 ++
 .../auth-login/components/password-reset-confirm.test.tsx   | 2 ++
 src/features/chats/components/chat-list-item.test.tsx       | 2 ++
 src/features/chats/components/chat-message-list.test.tsx    | 2 ++
 .../chats/components/chat-message-reaction.test.tsx         | 2 ++
 src/features/chats/components/chat-pane-header.test.tsx     | 2 ++
 src/features/chats/components/chat-pane/chat-pane.test.tsx  | 2 ++
 .../chats/components/chat-search/chat-search.test.tsx       | 2 ++
 src/features/chats/components/chat-widget.test.tsx          | 2 ++
 .../compose/components/polls/duration-selector.test.tsx     | 2 ++
 src/features/emoji/index.test.ts                            | 2 ++
 src/features/emoji/search.test.ts                           | 2 ++
 src/features/group/components/group-action-button.test.tsx  | 2 ++
 src/features/group/components/group-header.test.tsx         | 2 ++
 src/features/group/components/group-member-count.test.tsx   | 2 ++
 .../group/components/group-member-list-item.test.tsx        | 2 ++
 src/features/group/components/group-options-button.test.tsx | 2 ++
 src/features/group/components/group-privacy.test.tsx        | 2 ++
 src/features/group/components/group-relationship.test.tsx   | 2 ++
 src/features/group/components/group-tag-list-item.test.tsx  | 2 ++
 .../groups/components/discover/group-grid-item.test.tsx     | 2 ++
 .../groups/components/discover/group-list-item.test.tsx     | 2 ++
 .../groups/components/discover/layout-buttons.test.tsx      | 2 ++
 .../groups/components/discover/search/blankslate.test.tsx   | 2 ++
 .../groups/components/discover/search/results.test.tsx      | 2 ++
 .../groups/components/discover/search/search.test.tsx       | 2 ++
 .../groups/components/discover/tag-list-item.test.tsx       | 2 ++
 src/features/groups/discover.test.tsx                       | 2 ++
 src/features/notifications/components/notification.test.tsx | 2 ++
 src/features/ui/components/compose-button.test.tsx          | 2 ++
 src/features/ui/components/cta-banner.test.tsx              | 2 ++
 .../ui/components/modals/landing-page-modal.test.tsx        | 2 ++
 .../ui/components/modals/unauthorized-modal.test.tsx        | 2 ++
 src/features/ui/components/navbar.test.tsx                  | 2 ++
 src/features/ui/components/panels/sign-up-panel.test.tsx    | 2 ++
 src/features/ui/components/subscribe-button.test.tsx        | 2 ++
 src/features/ui/components/trends-panel.test.tsx            | 2 ++
 src/hooks/__mocks__/resize-observer.ts                      | 2 ++
 src/hooks/useDimensions.test.ts                             | 2 ++
 src/jest/test-helpers.tsx                                   | 1 +
 src/jest/test-setup.ts                                      | 6 ++----
 src/normalizers/account.test.ts                             | 2 ++
 src/normalizers/attachment.test.ts                          | 2 ++
 src/normalizers/chat-message.test.ts                        | 2 ++
 src/normalizers/mention.test.ts                             | 2 ++
 src/normalizers/notification.test.ts                        | 2 ++
 src/normalizers/soapbox/soapbox-config.test.ts              | 2 ++
 src/normalizers/status.test.ts                              | 2 ++
 src/queries/chats.test.ts                                   | 2 ++
 src/queries/relationships.test.ts                           | 2 ++
 src/queries/suggestions.test.ts                             | 2 ++
 src/queries/trends.test.ts                                  | 2 ++
 src/reducers/admin.test.ts                                  | 2 ++
 src/reducers/compose.test.ts                                | 2 ++
 src/reducers/contexts.test.ts                               | 2 ++
 src/reducers/conversations.test.ts                          | 2 ++
 src/reducers/custom-emojis.test.ts                          | 2 ++
 src/reducers/domain-lists.test.ts                           | 2 ++
 src/reducers/dropdown-menu.test.ts                          | 2 ++
 src/reducers/filters.test.ts                                | 2 ++
 src/reducers/index.test.ts                                  | 2 ++
 src/reducers/instance.test.ts                               | 2 ++
 src/reducers/list-adder.test.ts                             | 2 ++
 src/reducers/lists.test.ts                                  | 2 ++
 src/reducers/me.test.ts                                     | 2 ++
 src/reducers/meta.test.ts                                   | 2 ++
 src/reducers/modals.test.ts                                 | 2 ++
 src/reducers/mutes.test.ts                                  | 2 ++
 src/reducers/onboarding.test.ts                             | 2 ++
 src/reducers/polls.test.ts                                  | 2 ++
 src/reducers/relationships.test.ts                          | 2 ++
 src/reducers/reports.test.ts                                | 2 ++
 src/reducers/settings.test.ts                               | 2 ++
 src/reducers/sidebar.test.ts                                | 2 ++
 src/reducers/soapbox.test.ts                                | 2 ++
 src/reducers/status-hover-card.test.tsx                     | 2 ++
 src/reducers/status-lists.test.ts                           | 2 ++
 src/reducers/statuses.test.ts                               | 2 ++
 src/reducers/suggestions.test.ts                            | 2 ++
 src/reducers/timelines.test.ts                              | 2 ++
 src/reducers/trends.test.ts                                 | 2 ++
 src/reducers/user-lists.test.ts                             | 2 ++
 src/schemas/card.test.ts                                    | 2 ++
 src/schemas/group.test.ts                                   | 2 ++
 src/schemas/instance.test.ts                                | 2 ++
 src/schemas/poll.test.ts                                    | 2 ++
 src/toast.test.tsx                                          | 2 ++
 src/utils/badges.test.ts                                    | 2 ++
 src/utils/base64.test.ts                                    | 2 ++
 src/utils/chats.test.ts                                     | 2 ++
 src/utils/colors.test.ts                                    | 2 ++
 src/utils/comparators.test.ts                               | 2 ++
 src/utils/config-db.test.ts                                 | 2 ++
 src/utils/emoji-reacts.test.ts                              | 2 ++
 src/utils/emoji.test.ts                                     | 2 ++
 src/utils/features.test.ts                                  | 2 ++
 src/utils/html.test.ts                                      | 2 ++
 src/utils/input.test.ts                                     | 2 ++
 src/utils/media.test.ts                                     | 2 ++
 src/utils/numbers.test.tsx                                  | 2 ++
 src/utils/queries.test.ts                                   | 2 ++
 src/utils/status.test.ts                                    | 2 ++
 src/utils/tailwind.test.ts                                  | 2 ++
 src/utils/timelines.test.ts                                 | 2 ++
 tailwind/colors.test.ts                                     | 2 ++
 tsconfig.json                                               | 1 -
 vite.config.ts                                              | 2 +-
 149 files changed, 294 insertions(+), 6 deletions(-)

diff --git a/src/actions/about.test.ts b/src/actions/about.test.ts
index e05a7f643..4a1afa479 100644
--- a/src/actions/about.test.ts
+++ b/src/actions/about.test.ts
@@ -1,4 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
+import { describe, expect, it } from 'vitest';
+
 
 import { staticClient } from 'soapbox/api';
 import { mockStore } from 'soapbox/jest/test-helpers';
diff --git a/src/actions/account-notes.test.ts b/src/actions/account-notes.test.ts
index 5cd45f26e..dbebf8076 100644
--- a/src/actions/account-notes.test.ts
+++ b/src/actions/account-notes.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 
diff --git a/src/actions/accounts.test.ts b/src/actions/accounts.test.ts
index 34da76b33..422a0217b 100644
--- a/src/actions/accounts.test.ts
+++ b/src/actions/accounts.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { __stub } from 'soapbox/api';
 import { buildInstance, buildRelationship } from 'soapbox/jest/factory';
diff --git a/src/actions/blocks.test.ts b/src/actions/blocks.test.ts
index bca50fe12..b7a73f9eb 100644
--- a/src/actions/blocks.test.ts
+++ b/src/actions/blocks.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user-lists';
diff --git a/src/actions/compose.test.ts b/src/actions/compose.test.ts
index 01bd8b716..b1acb0b6e 100644
--- a/src/actions/compose.test.ts
+++ b/src/actions/compose.test.ts
@@ -1,4 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 
 import { buildInstance } from 'soapbox/jest/factory';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/actions/notifications.test.ts b/src/actions/notifications.test.ts
index c46040216..41ed43d82 100644
--- a/src/actions/notifications.test.ts
+++ b/src/actions/notifications.test.ts
@@ -1,4 +1,6 @@
 import { OrderedMap as ImmutableOrderedMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/actions/onboarding.test.ts b/src/actions/onboarding.test.ts
index 3f638ece9..7d2fcdb26 100644
--- a/src/actions/onboarding.test.ts
+++ b/src/actions/onboarding.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { mockStore, mockWindowProperty, rootState } from 'soapbox/jest/test-helpers';
 
 import { checkOnboardingStatus, startOnboarding, endOnboarding } from './onboarding';
diff --git a/src/actions/preload.test.ts b/src/actions/preload.test.ts
index 24a5f86b3..96cd9bbf6 100644
--- a/src/actions/preload.test.ts
+++ b/src/actions/preload.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { mockStore } from 'soapbox/jest/test-helpers';
 
diff --git a/src/actions/status-quotes.test.ts b/src/actions/status-quotes.test.ts
index 6f53b48c6..c2d6ac1b9 100644
--- a/src/actions/status-quotes.test.ts
+++ b/src/actions/status-quotes.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/actions/statuses.test.ts b/src/actions/statuses.test.ts
index dd4831dc7..93c5b9c08 100644
--- a/src/actions/statuses.test.ts
+++ b/src/actions/statuses.test.ts
@@ -1,4 +1,6 @@
 import { fromJS, Map as ImmutableMap } from 'immutable';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { STATUSES_IMPORT } from 'soapbox/actions/importer';
 import { __stub } from 'soapbox/api';
diff --git a/src/api/hooks/groups/useGroup.test.ts b/src/api/hooks/groups/useGroup.test.ts
index c6df44aab..4b9c91f56 100644
--- a/src/api/hooks/groups/useGroup.test.ts
+++ b/src/api/hooks/groups/useGroup.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { buildGroup } from 'soapbox/jest/factory';
 import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/api/hooks/groups/useGroupLookup.test.ts b/src/api/hooks/groups/useGroupLookup.test.ts
index 6b659f605..4c7bcbe1f 100644
--- a/src/api/hooks/groups/useGroupLookup.test.ts
+++ b/src/api/hooks/groups/useGroupLookup.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { buildGroup } from 'soapbox/jest/factory';
 import { renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/api/hooks/groups/useGroupMedia.test.ts b/src/api/hooks/groups/useGroupMedia.test.ts
index c38615c05..bbe643c4d 100644
--- a/src/api/hooks/groups/useGroupMedia.test.ts
+++ b/src/api/hooks/groups/useGroupMedia.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { buildStatus } from 'soapbox/jest/factory';
 import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/api/hooks/groups/useGroupMembers.test.ts b/src/api/hooks/groups/useGroupMembers.test.ts
index d82133423..3087bd3fb 100644
--- a/src/api/hooks/groups/useGroupMembers.test.ts
+++ b/src/api/hooks/groups/useGroupMembers.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { buildGroupMember } from 'soapbox/jest/factory';
 import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/api/hooks/groups/useGroups.test.ts b/src/api/hooks/groups/useGroups.test.ts
index c29d6eb09..3cbddf98a 100644
--- a/src/api/hooks/groups/useGroups.test.ts
+++ b/src/api/hooks/groups/useGroups.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { buildGroup } from 'soapbox/jest/factory';
 import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/api/hooks/groups/usePendingGroups.test.ts b/src/api/hooks/groups/usePendingGroups.test.ts
index a590360c3..5c39902e9 100644
--- a/src/api/hooks/groups/usePendingGroups.test.ts
+++ b/src/api/hooks/groups/usePendingGroups.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { Entities } from 'soapbox/entity-store/entities';
 import { buildAccount, buildGroup } from 'soapbox/jest/factory';
diff --git a/src/components/account.test.tsx b/src/components/account.test.tsx
index 306ff21a8..00803029b 100644
--- a/src/components/account.test.tsx
+++ b/src/components/account.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildAccount } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/autosuggest-emoji.test.tsx b/src/components/autosuggest-emoji.test.tsx
index 38e45a370..1bc00895b 100644
--- a/src/components/autosuggest-emoji.test.tsx
+++ b/src/components/autosuggest-emoji.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/badge.test.tsx b/src/components/badge.test.tsx
index 6204f7dcb..01ee857b5 100644
--- a/src/components/badge.test.tsx
+++ b/src/components/badge.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/display-name.test.tsx b/src/components/display-name.test.tsx
index 7c819f637..1d8742991 100644
--- a/src/components/display-name.test.tsx
+++ b/src/components/display-name.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildAccount } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/polls/poll-footer.test.tsx b/src/components/polls/poll-footer.test.tsx
index 0215d170a..5526ed35f 100644
--- a/src/components/polls/poll-footer.test.tsx
+++ b/src/components/polls/poll-footer.test.tsx
@@ -1,7 +1,9 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
 import { mockStore, render, screen, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/components/quoted-status.test.tsx b/src/components/quoted-status.test.tsx
index ffb1419b4..d9c27cb5d 100644
--- a/src/components/quoted-status.test.tsx
+++ b/src/components/quoted-status.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen, rootState } from 'soapbox/jest/test-helpers';
 import { normalizeStatus, normalizeAccount } from 'soapbox/normalizers';
diff --git a/src/components/scroll-top-button.test.tsx b/src/components/scroll-top-button.test.tsx
index d016ade8f..f7c100cc8 100644
--- a/src/components/scroll-top-button.test.tsx
+++ b/src/components/scroll-top-button.test.tsx
@@ -1,5 +1,7 @@
+
 import React from 'react';
 import { defineMessages } from 'react-intl';
+import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/status.test.tsx b/src/components/status.test.tsx
index a37c966cd..3a7b23367 100644
--- a/src/components/status.test.tsx
+++ b/src/components/status.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildAccount } from 'soapbox/jest/factory';
 import { render, screen, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/components/statuses/sensitive-content-overlay.test.tsx b/src/components/statuses/sensitive-content-overlay.test.tsx
index 9bace5784..a9caff8df 100644
--- a/src/components/statuses/sensitive-content-overlay.test.tsx
+++ b/src/components/statuses/sensitive-content-overlay.test.tsx
@@ -1,5 +1,7 @@
+
 import { Map as ImmutableMap } from 'immutable';
 import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { fireEvent, render, rootState, screen } from 'soapbox/jest/test-helpers';
 import { normalizeStatus } from 'soapbox/normalizers';
diff --git a/src/components/ui/avatar/avatar.test.tsx b/src/components/ui/avatar/avatar.test.tsx
index 6c958f0cb..8cf4c7baa 100644
--- a/src/components/ui/avatar/avatar.test.tsx
+++ b/src/components/ui/avatar/avatar.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/button/button.test.tsx b/src/components/ui/button/button.test.tsx
index 4124958d7..bec0b2801 100644
--- a/src/components/ui/button/button.test.tsx
+++ b/src/components/ui/button/button.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
 
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/card/card.test.tsx b/src/components/ui/card/card.test.tsx
index 1971441ae..cebaffc15 100644
--- a/src/components/ui/card/card.test.tsx
+++ b/src/components/ui/card/card.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/column/column.test.tsx b/src/components/ui/column/column.test.tsx
index bc40ca59d..c63ec8aad 100644
--- a/src/components/ui/column/column.test.tsx
+++ b/src/components/ui/column/column.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/datepicker/datepicker.test.tsx b/src/components/ui/datepicker/datepicker.test.tsx
index bf856c236..c75e6eb9f 100644
--- a/src/components/ui/datepicker/datepicker.test.tsx
+++ b/src/components/ui/datepicker/datepicker.test.tsx
@@ -1,5 +1,7 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { queryAllByRole, render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/divider/divider.test.tsx b/src/components/ui/divider/divider.test.tsx
index 43a53eec8..cb7c8eb82 100644
--- a/src/components/ui/divider/divider.test.tsx
+++ b/src/components/ui/divider/divider.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/emoji/emoji.test.tsx b/src/components/ui/emoji/emoji.test.tsx
index c4bf686d8..bc3fc468f 100644
--- a/src/components/ui/emoji/emoji.test.tsx
+++ b/src/components/ui/emoji/emoji.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/form-actions/form-actions.test.tsx b/src/components/ui/form-actions/form-actions.test.tsx
index 32ff56638..4a6e8be90 100644
--- a/src/components/ui/form-actions/form-actions.test.tsx
+++ b/src/components/ui/form-actions/form-actions.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/form-group/form-group.test.tsx b/src/components/ui/form-group/form-group.test.tsx
index 2b79c9c75..54fa80cf0 100644
--- a/src/components/ui/form-group/form-group.test.tsx
+++ b/src/components/ui/form-group/form-group.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/form/form.test.tsx b/src/components/ui/form/form.test.tsx
index c25d590ed..ee581aa83 100644
--- a/src/components/ui/form/form.test.tsx
+++ b/src/components/ui/form/form.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
 
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/icon/svg-icon.test.tsx b/src/components/ui/icon/svg-icon.test.tsx
index bd8c0a81b..c238d4010 100644
--- a/src/components/ui/icon/svg-icon.test.tsx
+++ b/src/components/ui/icon/svg-icon.test.tsx
@@ -1,5 +1,7 @@
+
 import IconCode from '@tabler/icons/outline/code.svg';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/ui/modal/modal.test.tsx b/src/components/ui/modal/modal.test.tsx
index 2941fe89a..51895d8ce 100644
--- a/src/components/ui/modal/modal.test.tsx
+++ b/src/components/ui/modal/modal.test.tsx
@@ -1,5 +1,7 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/validation-checkmark.test.tsx b/src/components/validation-checkmark.test.tsx
index fd0d4b765..874f478d3 100644
--- a/src/components/validation-checkmark.test.tsx
+++ b/src/components/validation-checkmark.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/entity-store/reducer.test.ts b/src/entity-store/reducer.test.ts
index 36970463f..c5166437a 100644
--- a/src/entity-store/reducer.test.ts
+++ b/src/entity-store/reducer.test.ts
@@ -1,3 +1,5 @@
+import { expect, test } from 'vitest';
+
 import {
   deleteEntities,
   dismissEntities,
diff --git a/src/features/auth-login/components/captcha.test.tsx b/src/features/auth-login/components/captcha.test.tsx
index 53cb7e7ae..a9123cbae 100644
--- a/src/features/auth-login/components/captcha.test.tsx
+++ b/src/features/auth-login/components/captcha.test.tsx
@@ -1,5 +1,7 @@
+
 import { Map as ImmutableMap } from 'immutable';
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/auth-login/components/login-form.test.tsx b/src/features/auth-login/components/login-form.test.tsx
index cef110b44..c4b68eae5 100644
--- a/src/features/auth-login/components/login-form.test.tsx
+++ b/src/features/auth-login/components/login-form.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
 
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
 import { instanceV1Schema } from 'soapbox/schemas/instance';
diff --git a/src/features/auth-login/components/login-page.test.tsx b/src/features/auth-login/components/login-page.test.tsx
index dfae49747..4fa0d2400 100644
--- a/src/features/auth-login/components/login-page.test.tsx
+++ b/src/features/auth-login/components/login-page.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { instanceV1Schema } from 'soapbox/schemas/instance';
diff --git a/src/features/auth-login/components/otp-auth-form.test.tsx b/src/features/auth-login/components/otp-auth-form.test.tsx
index 432660643..495838e06 100644
--- a/src/features/auth-login/components/otp-auth-form.test.tsx
+++ b/src/features/auth-login/components/otp-auth-form.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/auth-login/components/password-reset-confirm.test.tsx b/src/features/auth-login/components/password-reset-confirm.test.tsx
index d4c8d1196..e566eff39 100644
--- a/src/features/auth-login/components/password-reset-confirm.test.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.test.tsx
@@ -1,5 +1,7 @@
+
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
 import { fireEvent, render, screen, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/features/chats/components/chat-list-item.test.tsx b/src/features/chats/components/chat-list-item.test.tsx
index cd6ad0421..556cbd18c 100644
--- a/src/features/chats/components/chat-list-item.test.tsx
+++ b/src/features/chats/components/chat-list-item.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { IChat } from 'soapbox/queries/chats';
diff --git a/src/features/chats/components/chat-message-list.test.tsx b/src/features/chats/components/chat-message-list.test.tsx
index 7ea47173b..0a9da18c9 100644
--- a/src/features/chats/components/chat-message-list.test.tsx
+++ b/src/features/chats/components/chat-message-list.test.tsx
@@ -1,6 +1,8 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
 import { ChatContext } from 'soapbox/contexts/chat-context';
diff --git a/src/features/chats/components/chat-message-reaction.test.tsx b/src/features/chats/components/chat-message-reaction.test.tsx
index 88f102711..9c625c1b7 100644
--- a/src/features/chats/components/chat-message-reaction.test.tsx
+++ b/src/features/chats/components/chat-message-reaction.test.tsx
@@ -1,5 +1,7 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/chats/components/chat-pane-header.test.tsx b/src/features/chats/components/chat-pane-header.test.tsx
index a518c183a..0a328b2d5 100644
--- a/src/features/chats/components/chat-pane-header.test.tsx
+++ b/src/features/chats/components/chat-pane-header.test.tsx
@@ -1,5 +1,7 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/chats/components/chat-pane/chat-pane.test.tsx b/src/features/chats/components/chat-pane/chat-pane.test.tsx
index 3997c242c..72bab50ee 100644
--- a/src/features/chats/components/chat-pane/chat-pane.test.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.test.tsx
@@ -1,5 +1,7 @@
+
 import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
 import { ChatContext } from 'soapbox/contexts/chat-context';
diff --git a/src/features/chats/components/chat-search/chat-search.test.tsx b/src/features/chats/components/chat-search/chat-search.test.tsx
index 3555a66ae..de9a1c0d0 100644
--- a/src/features/chats/components/chat-search/chat-search.test.tsx
+++ b/src/features/chats/components/chat-search/chat-search.test.tsx
@@ -1,6 +1,8 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
 import { ChatProvider } from 'soapbox/contexts/chat-context';
diff --git a/src/features/chats/components/chat-widget.test.tsx b/src/features/chats/components/chat-widget.test.tsx
index 55d2af647..cc3b02e5d 100644
--- a/src/features/chats/components/chat-widget.test.tsx
+++ b/src/features/chats/components/chat-widget.test.tsx
@@ -1,5 +1,7 @@
+
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';
 import { render, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/features/compose/components/polls/duration-selector.test.tsx b/src/features/compose/components/polls/duration-selector.test.tsx
index 177d735b0..02cab0f7e 100644
--- a/src/features/compose/components/polls/duration-selector.test.tsx
+++ b/src/features/compose/components/polls/duration-selector.test.tsx
@@ -1,5 +1,7 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/emoji/index.test.ts b/src/features/emoji/index.test.ts
index 852181044..485bfe083 100644
--- a/src/features/emoji/index.test.ts
+++ b/src/features/emoji/index.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import emojify from '.';
 
 describe('emoji', () => {
diff --git a/src/features/emoji/search.test.ts b/src/features/emoji/search.test.ts
index 40c71df6c..3ef806d83 100644
--- a/src/features/emoji/search.test.ts
+++ b/src/features/emoji/search.test.ts
@@ -1,5 +1,7 @@
+
 import { List, Map } from 'immutable';
 import pick from 'lodash/pick';
+import { describe, expect, it } from 'vitest';
 
 import search, { addCustomToPool } from './search';
 
diff --git a/src/features/group/components/group-action-button.test.tsx b/src/features/group/components/group-action-button.test.tsx
index adbaa658a..dd24dfb48 100644
--- a/src/features/group/components/group-action-button.test.tsx
+++ b/src/features/group/components/group-action-button.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/group/components/group-header.test.tsx b/src/features/group/components/group-header.test.tsx
index 64e7fbb62..4481bef31 100644
--- a/src/features/group/components/group-header.test.tsx
+++ b/src/features/group/components/group-header.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/group/components/group-member-count.test.tsx b/src/features/group/components/group-member-count.test.tsx
index f9f3231b1..a64837d37 100644
--- a/src/features/group/components/group-member-count.test.tsx
+++ b/src/features/group/components/group-member-count.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/group/components/group-member-list-item.test.tsx b/src/features/group/components/group-member-list-item.test.tsx
index e91901013..923b54c64 100644
--- a/src/features/group/components/group-member-list-item.test.tsx
+++ b/src/features/group/components/group-member-list-item.test.tsx
@@ -1,5 +1,7 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
 import { buildGroup, buildGroupMember, buildGroupRelationship } from 'soapbox/jest/factory';
diff --git a/src/features/group/components/group-options-button.test.tsx b/src/features/group/components/group-options-button.test.tsx
index 42ecb6504..441f335c2 100644
--- a/src/features/group/components/group-options-button.test.tsx
+++ b/src/features/group/components/group-options-button.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/group/components/group-privacy.test.tsx b/src/features/group/components/group-privacy.test.tsx
index 9e8bc8bcf..1544cf0b4 100644
--- a/src/features/group/components/group-privacy.test.tsx
+++ b/src/features/group/components/group-privacy.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/group/components/group-relationship.test.tsx b/src/features/group/components/group-relationship.test.tsx
index 9befcc928..63999a5b1 100644
--- a/src/features/group/components/group-relationship.test.tsx
+++ b/src/features/group/components/group-relationship.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/group/components/group-tag-list-item.test.tsx b/src/features/group/components/group-tag-list-item.test.tsx
index 57c3cffbe..c88160931 100644
--- a/src/features/group/components/group-tag-list-item.test.tsx
+++ b/src/features/group/components/group-tag-list-item.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildGroup, buildGroupTag, buildGroupRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/groups/components/discover/group-grid-item.test.tsx b/src/features/groups/components/discover/group-grid-item.test.tsx
index 054335dbe..253abf0e8 100644
--- a/src/features/groups/components/discover/group-grid-item.test.tsx
+++ b/src/features/groups/components/discover/group-grid-item.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/groups/components/discover/group-list-item.test.tsx b/src/features/groups/components/discover/group-list-item.test.tsx
index 5046389f8..4181a0861 100644
--- a/src/features/groups/components/discover/group-list-item.test.tsx
+++ b/src/features/groups/components/discover/group-list-item.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/groups/components/discover/layout-buttons.test.tsx b/src/features/groups/components/discover/layout-buttons.test.tsx
index a372d8058..8c8f4d98a 100644
--- a/src/features/groups/components/discover/layout-buttons.test.tsx
+++ b/src/features/groups/components/discover/layout-buttons.test.tsx
@@ -1,5 +1,7 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen, within } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/groups/components/discover/search/blankslate.test.tsx b/src/features/groups/components/discover/search/blankslate.test.tsx
index 8b6e811be..1d60e41d6 100644
--- a/src/features/groups/components/discover/search/blankslate.test.tsx
+++ b/src/features/groups/components/discover/search/blankslate.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/groups/components/discover/search/results.test.tsx b/src/features/groups/components/discover/search/results.test.tsx
index 1c3017c9b..ac9e30715 100644
--- a/src/features/groups/components/discover/search/results.test.tsx
+++ b/src/features/groups/components/discover/search/results.test.tsx
@@ -1,6 +1,8 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { VirtuosoGridMockContext, VirtuosoMockContext } from 'react-virtuoso';
+import { describe, expect, it, vi } from 'vitest';
 
 import { buildAccount, buildGroup } from 'soapbox/jest/factory';
 import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/features/groups/components/discover/search/search.test.tsx b/src/features/groups/components/discover/search/search.test.tsx
index 0ae0f8cd8..62ad7de3c 100644
--- a/src/features/groups/components/discover/search/search.test.tsx
+++ b/src/features/groups/components/discover/search/search.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 
 import { __stub } from 'soapbox/api';
 import { buildGroup } from 'soapbox/jest/factory';
diff --git a/src/features/groups/components/discover/tag-list-item.test.tsx b/src/features/groups/components/discover/tag-list-item.test.tsx
index 6d8485d99..a74d89d81 100644
--- a/src/features/groups/components/discover/tag-list-item.test.tsx
+++ b/src/features/groups/components/discover/tag-list-item.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildGroupTag } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/groups/discover.test.tsx b/src/features/groups/discover.test.tsx
index 349999e7a..836f44c53 100644
--- a/src/features/groups/discover.test.tsx
+++ b/src/features/groups/discover.test.tsx
@@ -1,5 +1,7 @@
+
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';
 import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/features/notifications/components/notification.test.tsx b/src/features/notifications/components/notification.test.tsx
index 7a99bdb6c..84e8edd79 100644
--- a/src/features/notifications/components/notification.test.tsx
+++ b/src/features/notifications/components/notification.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { updateNotifications } from 'soapbox/actions/notifications';
 import { render, screen, rootState, createTestStore } from 'soapbox/jest/test-helpers';
diff --git a/src/features/ui/components/compose-button.test.tsx b/src/features/ui/components/compose-button.test.tsx
index 8e2b24b57..29dd596d5 100644
--- a/src/features/ui/components/compose-button.test.tsx
+++ b/src/features/ui/components/compose-button.test.tsx
@@ -1,8 +1,10 @@
+
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 
 import { MODAL_CLOSE, MODAL_OPEN } from 'soapbox/actions/modals';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/features/ui/components/cta-banner.test.tsx b/src/features/ui/components/cta-banner.test.tsx
index 3e8502027..ac189ec17 100644
--- a/src/features/ui/components/cta-banner.test.tsx
+++ b/src/features/ui/components/cta-banner.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { storeClosed, storeLoggedIn, storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/ui/components/modals/landing-page-modal.test.tsx b/src/features/ui/components/modals/landing-page-modal.test.tsx
index 80d49740b..b5a4861f0 100644
--- a/src/features/ui/components/modals/landing-page-modal.test.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/ui/components/modals/unauthorized-modal.test.tsx b/src/features/ui/components/modals/unauthorized-modal.test.tsx
index e283ec7b5..d40f1dc71 100644
--- a/src/features/ui/components/modals/unauthorized-modal.test.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/ui/components/navbar.test.tsx b/src/features/ui/components/navbar.test.tsx
index aa9d32815..bc7876465 100644
--- a/src/features/ui/components/navbar.test.tsx
+++ b/src/features/ui/components/navbar.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/ui/components/panels/sign-up-panel.test.tsx b/src/features/ui/components/panels/sign-up-panel.test.tsx
index 74a7f2bee..c20c1910e 100644
--- a/src/features/ui/components/panels/sign-up-panel.test.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/ui/components/subscribe-button.test.tsx b/src/features/ui/components/subscribe-button.test.tsx
index 2e67fe272..69418950c 100644
--- a/src/features/ui/components/subscribe-button.test.tsx
+++ b/src/features/ui/components/subscribe-button.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/ui/components/trends-panel.test.tsx b/src/features/ui/components/trends-panel.test.tsx
index 4ea1dca44..690f5a707 100644
--- a/src/features/ui/components/trends-panel.test.tsx
+++ b/src/features/ui/components/trends-panel.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { __stub } from 'soapbox/api';
 import { queryClient, render, screen, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/hooks/__mocks__/resize-observer.ts b/src/hooks/__mocks__/resize-observer.ts
index 172645825..caa4466d8 100644
--- a/src/hooks/__mocks__/resize-observer.ts
+++ b/src/hooks/__mocks__/resize-observer.ts
@@ -1,3 +1,5 @@
+import { vi } from 'vitest';
+
 let listener: ((rect: any) => void) | undefined = undefined;
 const mockDisconnect = vi.fn();
 
diff --git a/src/hooks/useDimensions.test.ts b/src/hooks/useDimensions.test.ts
index 14f8b2587..84242df3f 100644
--- a/src/hooks/useDimensions.test.ts
+++ b/src/hooks/useDimensions.test.ts
@@ -1,4 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { listener, mockDisconnect } from './__mocks__/resize-observer';
 import { useDimensions } from './useDimensions';
diff --git a/src/jest/test-helpers.tsx b/src/jest/test-helpers.tsx
index 06087e9ca..7aeac78cc 100644
--- a/src/jest/test-helpers.tsx
+++ b/src/jest/test-helpers.tsx
@@ -10,6 +10,7 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { Action, applyMiddleware, createStore } from 'redux';
 import { thunk } from 'redux-thunk';
+import { afterAll, beforeAll } from 'vitest';
 
 import { ChatProvider } from 'soapbox/contexts/chat-context';
 import { StatProvider } from 'soapbox/contexts/stat-context';
diff --git a/src/jest/test-setup.ts b/src/jest/test-setup.ts
index e923323b5..0f0e5ac90 100644
--- a/src/jest/test-setup.ts
+++ b/src/jest/test-setup.ts
@@ -2,6 +2,8 @@ import { act } from '@testing-library/react';
 import { toast } from 'react-hot-toast';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom/vitest';
+import 'fake-indexeddb/auto';
+import { afterEach, vi } from 'vitest';
 
 import { __clear as clearApiMocks } from '../api/__mocks__';
 
@@ -14,10 +16,6 @@ afterEach(() => {
 // Query mocking
 vi.mock('soapbox/queries/client');
 
-// Mock IndexedDB
-// https://dev.to/andyhaskell/testing-your-indexeddb-code-with-jest-2o17
-import 'fake-indexeddb/auto';
-
 // Clear toasts after each test.
 afterEach(() => {
   act(() => {
diff --git a/src/normalizers/account.test.ts b/src/normalizers/account.test.ts
index 15a26ecdc..5adcb2213 100644
--- a/src/normalizers/account.test.ts
+++ b/src/normalizers/account.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import AVATAR_MISSING from 'soapbox/assets/images/avatar-missing.png';
 import HEADER_MISSING from 'soapbox/assets/images/header-missing.png';
diff --git a/src/normalizers/attachment.test.ts b/src/normalizers/attachment.test.ts
index f093b3243..a1b15f1fa 100644
--- a/src/normalizers/attachment.test.ts
+++ b/src/normalizers/attachment.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { normalizeAttachment } from './attachment';
 
diff --git a/src/normalizers/chat-message.test.ts b/src/normalizers/chat-message.test.ts
index 83ab5c0ba..db3241dd4 100644
--- a/src/normalizers/chat-message.test.ts
+++ b/src/normalizers/chat-message.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { normalizeAttachment } from './attachment';
 import { normalizeChatMessage } from './chat-message';
diff --git a/src/normalizers/mention.test.ts b/src/normalizers/mention.test.ts
index 90ffee65a..320e5a405 100644
--- a/src/normalizers/mention.test.ts
+++ b/src/normalizers/mention.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { normalizeMention } from './mention';
 
diff --git a/src/normalizers/notification.test.ts b/src/normalizers/notification.test.ts
index bb28b3c58..23778edb8 100644
--- a/src/normalizers/notification.test.ts
+++ b/src/normalizers/notification.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { normalizeNotification } from './notification';
 
diff --git a/src/normalizers/soapbox/soapbox-config.test.ts b/src/normalizers/soapbox/soapbox-config.test.ts
index e142c09d7..8a96af49f 100644
--- a/src/normalizers/soapbox/soapbox-config.test.ts
+++ b/src/normalizers/soapbox/soapbox-config.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { normalizeSoapboxConfig } from './soapbox-config';
 
diff --git a/src/normalizers/status.test.ts b/src/normalizers/status.test.ts
index e5bf6b2c8..935271892 100644
--- a/src/normalizers/status.test.ts
+++ b/src/normalizers/status.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { normalizeStatus } from './status';
 
diff --git a/src/queries/chats.test.ts b/src/queries/chats.test.ts
index 003017b84..c2b536a18 100644
--- a/src/queries/chats.test.ts
+++ b/src/queries/chats.test.ts
@@ -1,6 +1,8 @@
+
 import { Map as ImmutableMap } from 'immutable';
 import sumBy from 'lodash/sumBy';
 import { useEffect } from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
 import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
diff --git a/src/queries/relationships.test.ts b/src/queries/relationships.test.ts
index 2c6e3ec8f..88966a801 100644
--- a/src/queries/relationships.test.ts
+++ b/src/queries/relationships.test.ts
@@ -1,4 +1,6 @@
 import { useEffect } from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { __stub } from 'soapbox/api';
 import { buildRelationship } from 'soapbox/jest/factory';
diff --git a/src/queries/suggestions.test.ts b/src/queries/suggestions.test.ts
index 4618cb6e7..59b07e808 100644
--- a/src/queries/suggestions.test.ts
+++ b/src/queries/suggestions.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
 
diff --git a/src/queries/trends.test.ts b/src/queries/trends.test.ts
index 36a590c07..ec7b15a30 100644
--- a/src/queries/trends.test.ts
+++ b/src/queries/trends.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { __stub } from 'soapbox/api';
 import { queryClient, renderHook, waitFor } from 'soapbox/jest/test-helpers';
 
diff --git a/src/reducers/admin.test.ts b/src/reducers/admin.test.ts
index fa4e26959..a37c3e60e 100644
--- a/src/reducers/admin.test.ts
+++ b/src/reducers/admin.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import reducer from './admin';
 
diff --git a/src/reducers/compose.test.ts b/src/reducers/compose.test.ts
index cee5e7170..81f277af4 100644
--- a/src/reducers/compose.test.ts
+++ b/src/reducers/compose.test.ts
@@ -1,4 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import * as actions from 'soapbox/actions/compose';
 import { COMPOSE_SET_STATUS } from 'soapbox/actions/compose-status';
diff --git a/src/reducers/contexts.test.ts b/src/reducers/contexts.test.ts
index 0ca652784..4e724d9ec 100644
--- a/src/reducers/contexts.test.ts
+++ b/src/reducers/contexts.test.ts
@@ -4,6 +4,8 @@ import {
   fromJS,
   is,
 } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { STATUS_IMPORT } from 'soapbox/actions/importer';
 import { CONTEXT_FETCH_SUCCESS } from 'soapbox/actions/statuses';
diff --git a/src/reducers/conversations.test.ts b/src/reducers/conversations.test.ts
index 1f2c09276..efe085564 100644
--- a/src/reducers/conversations.test.ts
+++ b/src/reducers/conversations.test.ts
@@ -1,4 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import * as actions from 'soapbox/actions/conversations';
 
diff --git a/src/reducers/custom-emojis.test.ts b/src/reducers/custom-emojis.test.ts
index f72df1bac..0ed8643f8 100644
--- a/src/reducers/custom-emojis.test.ts
+++ b/src/reducers/custom-emojis.test.ts
@@ -1,4 +1,6 @@
 import { List as ImmutableList } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import reducer from './custom-emojis';
 
diff --git a/src/reducers/domain-lists.test.ts b/src/reducers/domain-lists.test.ts
index e990d2d32..6577c87e2 100644
--- a/src/reducers/domain-lists.test.ts
+++ b/src/reducers/domain-lists.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import reducer from './domain-lists';
 
 describe('domain_lists reducer', () => {
diff --git a/src/reducers/dropdown-menu.test.ts b/src/reducers/dropdown-menu.test.ts
index 0706edf20..1ed312cec 100644
--- a/src/reducers/dropdown-menu.test.ts
+++ b/src/reducers/dropdown-menu.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import reducer from './dropdown-menu';
 
 describe('dropdown_menu reducer', () => {
diff --git a/src/reducers/filters.test.ts b/src/reducers/filters.test.ts
index 492eff94a..025fbd61c 100644
--- a/src/reducers/filters.test.ts
+++ b/src/reducers/filters.test.ts
@@ -1,4 +1,6 @@
 import { List as ImmutableList } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import reducer from './filters';
 
diff --git a/src/reducers/index.test.ts b/src/reducers/index.test.ts
index a3b1cf2ea..1ad39b4d7 100644
--- a/src/reducers/index.test.ts
+++ b/src/reducers/index.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import reducer from '.';
 
diff --git a/src/reducers/instance.test.ts b/src/reducers/instance.test.ts
index 1f89d8c52..c53f9124f 100644
--- a/src/reducers/instance.test.ts
+++ b/src/reducers/instance.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { ADMIN_CONFIG_UPDATE_REQUEST } from 'soapbox/actions/admin';
 
 import reducer from './instance';
diff --git a/src/reducers/list-adder.test.ts b/src/reducers/list-adder.test.ts
index 1c2153def..8692fb3d1 100644
--- a/src/reducers/list-adder.test.ts
+++ b/src/reducers/list-adder.test.ts
@@ -1,4 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import * as actions from 'soapbox/actions/lists';
 
diff --git a/src/reducers/lists.test.ts b/src/reducers/lists.test.ts
index 911d4f3a9..af2e39a90 100644
--- a/src/reducers/lists.test.ts
+++ b/src/reducers/lists.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import reducer from './lists';
 
diff --git a/src/reducers/me.test.ts b/src/reducers/me.test.ts
index 753171d11..ac1725fcf 100644
--- a/src/reducers/me.test.ts
+++ b/src/reducers/me.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import reducer from './me';
 
 describe('me reducer', () => {
diff --git a/src/reducers/meta.test.ts b/src/reducers/meta.test.ts
index eccf37ffc..76f370a18 100644
--- a/src/reducers/meta.test.ts
+++ b/src/reducers/meta.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { SW_UPDATING, setSwUpdating } from 'soapbox/actions/sw';
 
diff --git a/src/reducers/modals.test.ts b/src/reducers/modals.test.ts
index e9e05427b..17058cecb 100644
--- a/src/reducers/modals.test.ts
+++ b/src/reducers/modals.test.ts
@@ -1,4 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { MODAL_OPEN, MODAL_CLOSE } from 'soapbox/actions/modals';
 
diff --git a/src/reducers/mutes.test.ts b/src/reducers/mutes.test.ts
index 988c3dcdf..7bd8d9dd2 100644
--- a/src/reducers/mutes.test.ts
+++ b/src/reducers/mutes.test.ts
@@ -1,4 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import {
   MUTES_INIT_MODAL,
diff --git a/src/reducers/onboarding.test.ts b/src/reducers/onboarding.test.ts
index ad157a868..65e77718f 100644
--- a/src/reducers/onboarding.test.ts
+++ b/src/reducers/onboarding.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding';
 
 import reducer from './onboarding';
diff --git a/src/reducers/polls.test.ts b/src/reducers/polls.test.ts
index 4ff9a555a..8d51d43e5 100644
--- a/src/reducers/polls.test.ts
+++ b/src/reducers/polls.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { POLLS_IMPORT } from 'soapbox/actions/importer';
 
diff --git a/src/reducers/relationships.test.ts b/src/reducers/relationships.test.ts
index 28b269ede..4555d9e31 100644
--- a/src/reducers/relationships.test.ts
+++ b/src/reducers/relationships.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import lain from 'soapbox/__fixtures__/lain.json';
 import { ACCOUNT_IMPORT } from 'soapbox/actions/importer';
diff --git a/src/reducers/reports.test.ts b/src/reducers/reports.test.ts
index 8045bbc8a..546f19154 100644
--- a/src/reducers/reports.test.ts
+++ b/src/reducers/reports.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import reducer from './reports';
 
 describe('reports reducer', () => {
diff --git a/src/reducers/settings.test.ts b/src/reducers/settings.test.ts
index 1623a9a96..d8283e405 100644
--- a/src/reducers/settings.test.ts
+++ b/src/reducers/settings.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import reducer from './settings';
 
diff --git a/src/reducers/sidebar.test.ts b/src/reducers/sidebar.test.ts
index b9bd1274a..6f8194a9f 100644
--- a/src/reducers/sidebar.test.ts
+++ b/src/reducers/sidebar.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import reducer from './sidebar';
 
 describe('sidebar reducer', () => {
diff --git a/src/reducers/soapbox.test.ts b/src/reducers/soapbox.test.ts
index 60e5ec5cc..19d6c5f71 100644
--- a/src/reducers/soapbox.test.ts
+++ b/src/reducers/soapbox.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import soapboxConfig from 'soapbox/__fixtures__/admin_api_frontend_config.json';
 import soapbox from 'soapbox/__fixtures__/soapbox.json';
diff --git a/src/reducers/status-hover-card.test.tsx b/src/reducers/status-hover-card.test.tsx
index 5936ebcaa..fd1fcd7b6 100644
--- a/src/reducers/status-hover-card.test.tsx
+++ b/src/reducers/status-hover-card.test.tsx
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import {
   STATUS_HOVER_CARD_OPEN,
   STATUS_HOVER_CARD_CLOSE,
diff --git a/src/reducers/status-lists.test.ts b/src/reducers/status-lists.test.ts
index e87c42e76..b032afb5f 100644
--- a/src/reducers/status-lists.test.ts
+++ b/src/reducers/status-lists.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import reducer from './status-lists';
 
 describe('status_lists reducer', () => {
diff --git a/src/reducers/statuses.test.ts b/src/reducers/statuses.test.ts
index 824e53e56..78e987995 100644
--- a/src/reducers/statuses.test.ts
+++ b/src/reducers/statuses.test.ts
@@ -2,6 +2,8 @@ import {
   Map as ImmutableMap,
   Record as ImmutableRecord,
 } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { STATUS_IMPORT } from 'soapbox/actions/importer';
 import {
diff --git a/src/reducers/suggestions.test.ts b/src/reducers/suggestions.test.ts
index a62067904..f78580f1d 100644
--- a/src/reducers/suggestions.test.ts
+++ b/src/reducers/suggestions.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { SUGGESTIONS_FETCH_SUCCESS, SUGGESTIONS_DISMISS } from 'soapbox/actions/suggestions';
 
 import reducer from './suggestions';
diff --git a/src/reducers/timelines.test.ts b/src/reducers/timelines.test.ts
index 697523e7c..d9212e72c 100644
--- a/src/reducers/timelines.test.ts
+++ b/src/reducers/timelines.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import {
   TIMELINE_EXPAND_REQUEST,
diff --git a/src/reducers/trends.test.ts b/src/reducers/trends.test.ts
index 79ee44ed3..4f9dfc46b 100644
--- a/src/reducers/trends.test.ts
+++ b/src/reducers/trends.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import reducer from './trends';
 
 describe('trends reducer', () => {
diff --git a/src/reducers/user-lists.test.ts b/src/reducers/user-lists.test.ts
index a2477ada7..92bc9247d 100644
--- a/src/reducers/user-lists.test.ts
+++ b/src/reducers/user-lists.test.ts
@@ -1,4 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import reducer from './user-lists';
 
diff --git a/src/schemas/card.test.ts b/src/schemas/card.test.ts
index f9b672c28..b8dbad9dd 100644
--- a/src/schemas/card.test.ts
+++ b/src/schemas/card.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { cardSchema } from './card';
 
 describe('cardSchema', () => {
diff --git a/src/schemas/group.test.ts b/src/schemas/group.test.ts
index b227ad856..2ebe9f7d4 100644
--- a/src/schemas/group.test.ts
+++ b/src/schemas/group.test.ts
@@ -1,3 +1,5 @@
+import { expect, test } from 'vitest';
+
 import { groupSchema } from './group';
 
 test('groupSchema with a TruthSocial group', async () => {
diff --git a/src/schemas/instance.test.ts b/src/schemas/instance.test.ts
index 8d2f0f9d2..338763b66 100644
--- a/src/schemas/instance.test.ts
+++ b/src/schemas/instance.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { instanceV1Schema } from './instance';
 
 describe('instanceV1Schema.parse()', () => {
diff --git a/src/schemas/poll.test.ts b/src/schemas/poll.test.ts
index 88deca8db..0c47cc30f 100644
--- a/src/schemas/poll.test.ts
+++ b/src/schemas/poll.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { pollSchema } from './poll';
 
 describe('normalizePoll()', () => {
diff --git a/src/toast.test.tsx b/src/toast.test.tsx
index 74c105c2e..860fa35c6 100644
--- a/src/toast.test.tsx
+++ b/src/toast.test.tsx
@@ -1,8 +1,10 @@
+
 import { render } from '@testing-library/react';
 import { AxiosError, AxiosHeaders } from 'axios';
 import React from 'react';
 import { Toaster } from 'react-hot-toast';
 import { IntlProvider } from 'react-intl';
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { act, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/utils/badges.test.ts b/src/utils/badges.test.ts
index e2e7e78d3..d11218579 100644
--- a/src/utils/badges.test.ts
+++ b/src/utils/badges.test.ts
@@ -1,3 +1,5 @@
+import { expect, test } from 'vitest';
+
 import { buildAccount } from 'soapbox/jest/factory';
 
 import {
diff --git a/src/utils/base64.test.ts b/src/utils/base64.test.ts
index d2537d99b..5ee19e901 100644
--- a/src/utils/base64.test.ts
+++ b/src/utils/base64.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { decodeBase64 } from './base64';
 
 describe('decodeBase64', () => {
diff --git a/src/utils/chats.test.ts b/src/utils/chats.test.ts
index c7eb306c3..3db16e42b 100644
--- a/src/utils/chats.test.ts
+++ b/src/utils/chats.test.ts
@@ -1,3 +1,5 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
 import { buildAccount } from 'soapbox/jest/factory';
 import { normalizeChatMessage } from 'soapbox/normalizers';
 import { ChatKeys, IChat } from 'soapbox/queries/chats';
diff --git a/src/utils/colors.test.ts b/src/utils/colors.test.ts
index 787d5886e..fbe17a12a 100644
--- a/src/utils/colors.test.ts
+++ b/src/utils/colors.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import tintify from './colors';
 
 const AZURE = '#0482d8';
diff --git a/src/utils/comparators.test.ts b/src/utils/comparators.test.ts
index c84e6982c..f86152053 100644
--- a/src/utils/comparators.test.ts
+++ b/src/utils/comparators.test.ts
@@ -1,3 +1,5 @@
+import { expect, test } from 'vitest';
+
 import { compareId } from './comparators';
 
 test('compareId', () => {
diff --git a/src/utils/config-db.test.ts b/src/utils/config-db.test.ts
index db6a423cf..ee868331a 100644
--- a/src/utils/config-db.test.ts
+++ b/src/utils/config-db.test.ts
@@ -1,4 +1,6 @@
 import { List as ImmutableList, fromJS } from 'immutable';
+import { expect, test } from 'vitest';
+
 
 import config_db from 'soapbox/__fixtures__/config_db.json';
 
diff --git a/src/utils/emoji-reacts.test.ts b/src/utils/emoji-reacts.test.ts
index af2c5c34b..cce514bd0 100644
--- a/src/utils/emoji-reacts.test.ts
+++ b/src/utils/emoji-reacts.test.ts
@@ -1,4 +1,6 @@
 import { List as ImmutableList, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { normalizeStatus } from 'soapbox/normalizers';
 import { emojiReactionSchema } from 'soapbox/schemas';
diff --git a/src/utils/emoji.test.ts b/src/utils/emoji.test.ts
index 9880589c2..f30a967a6 100644
--- a/src/utils/emoji.test.ts
+++ b/src/utils/emoji.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import {
   removeVS16s,
   toCodePoints,
diff --git a/src/utils/features.test.ts b/src/utils/features.test.ts
index 248085876..fb028a7ec 100644
--- a/src/utils/features.test.ts
+++ b/src/utils/features.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { buildInstance } from 'soapbox/jest/factory';
 
 import {
diff --git a/src/utils/html.test.ts b/src/utils/html.test.ts
index cf0a62d1d..50648eb99 100644
--- a/src/utils/html.test.ts
+++ b/src/utils/html.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import * as html from './html';
 
 describe('html', () => {
diff --git a/src/utils/input.test.ts b/src/utils/input.test.ts
index 4630126ea..2bd287420 100644
--- a/src/utils/input.test.ts
+++ b/src/utils/input.test.ts
@@ -1,3 +1,5 @@
+import { expect, test } from 'vitest';
+
 import { normalizeUsername } from './input';
 
 test('normalizeUsername', () => {
diff --git a/src/utils/media.test.ts b/src/utils/media.test.ts
index cbfdac026..2287e2592 100644
--- a/src/utils/media.test.ts
+++ b/src/utils/media.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import { addAutoPlay } from './media';
 
 describe('addAutoPlay()', () => {
diff --git a/src/utils/numbers.test.tsx b/src/utils/numbers.test.tsx
index 1d69e960d..d194678ce 100644
--- a/src/utils/numbers.test.tsx
+++ b/src/utils/numbers.test.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { describe, expect, test } from 'vitest';
+
 
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/utils/queries.test.ts b/src/utils/queries.test.ts
index 72e1f809e..88629bbf2 100644
--- a/src/utils/queries.test.ts
+++ b/src/utils/queries.test.ts
@@ -1,4 +1,6 @@
 import { InfiniteData } from '@tanstack/react-query';
+import { beforeEach, describe, expect, it } from 'vitest';
+
 
 import { queryClient } from 'soapbox/queries/client';
 
diff --git a/src/utils/status.test.ts b/src/utils/status.test.ts
index 4cdb8f8f5..22b5a2d52 100644
--- a/src/utils/status.test.ts
+++ b/src/utils/status.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 
 import { buildStatus } from 'soapbox/jest/factory';
 
diff --git a/src/utils/tailwind.test.ts b/src/utils/tailwind.test.ts
index f234d5ac3..7e1374356 100644
--- a/src/utils/tailwind.test.ts
+++ b/src/utils/tailwind.test.ts
@@ -1,4 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { toTailwind, fromLegacyColors, expandPalette } from './tailwind';
 
diff --git a/src/utils/timelines.test.ts b/src/utils/timelines.test.ts
index 9d27265f1..17d6e2585 100644
--- a/src/utils/timelines.test.ts
+++ b/src/utils/timelines.test.ts
@@ -1,4 +1,6 @@
 import { fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
+
 
 import { buildStatus } from 'soapbox/jest/factory';
 
diff --git a/tailwind/colors.test.ts b/tailwind/colors.test.ts
index 426de1db2..eee8eb41b 100644
--- a/tailwind/colors.test.ts
+++ b/tailwind/colors.test.ts
@@ -1,3 +1,5 @@
+import { describe, expect, it } from 'vitest';
+
 import {
   withOpacityValue,
   parseColorMatrix,
diff --git a/tsconfig.json b/tsconfig.json
index 806a33b46..8eed381dd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,6 @@
     ],
     "types": [
       "vite/client",
-      "vitest/globals",
       "vite-plugin-compile-time/client",
       "@webbtc/webln-types"
     ]
diff --git a/vite.config.ts b/vite.config.ts
index 7ad188c2c..797cf5115 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,5 @@
 /* eslint-disable quotes */
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import fs from 'node:fs';
 import { fileURLToPath, URL } from 'node:url';
 

From 7f007eb612ed9d8836548d5f863ca2bd980f9e28 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 14:42:58 -0600
Subject: [PATCH 068/133] tsconfig: remove typeRoots

---
 src/global.d.ts       | 13 +++++++++++++
 src/types/window.d.ts |  7 -------
 tsconfig.json         |  6 ------
 3 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 src/global.d.ts
 delete mode 100644 src/types/window.d.ts

diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 000000000..0301f98b1
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,13 @@
+import type { NostrSigner } from '@nostrify/nostrify';
+
+declare global {
+  interface Window {
+    nostr?: NostrSigner;
+  }
+
+  // FIXME: Remove this definition if the fix is merged upstream.
+  // https://github.com/egoist/vite-plugin-compile-time/pull/26
+  interface ImportMeta {
+    compileTime: <T>(id: string) => T;
+  }
+}
\ No newline at end of file
diff --git a/src/types/window.d.ts b/src/types/window.d.ts
deleted file mode 100644
index 7435f9dd2..000000000
--- a/src/types/window.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { NostrSigner } from '@nostrify/nostrify';
-
-declare global {
-  interface Window {
-    nostr?: NostrSigner;
-  }
-}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 8eed381dd..92a209b21 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,14 +16,8 @@
     "paths": {
       "soapbox/*": ["src/*"],
     },
-    "typeRoots": [
-      "./src/types",
-      "./node_modules/@types",
-      "./node_modules"
-    ],
     "types": [
       "vite/client",
-      "vite-plugin-compile-time/client",
       "@webbtc/webln-types"
     ]
   }

From 07776e629649e579cf9b9a55a916d5f2226c5f5d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 15:31:19 -0600
Subject: [PATCH 069/133] tsconfig: enable isolatedModules

---
 src/api/hooks/zap-split/useZapSplit.ts           | 2 +-
 src/components/ui/button/useButtonStyles.ts      | 2 +-
 src/components/ui/input/input.tsx                | 2 +-
 src/components/ui/text/text.tsx                  | 2 +-
 src/contexts/stat-context.tsx                    | 2 +-
 src/features/theme-editor/components/palette.tsx | 2 +-
 src/schemas/admin-account.ts                     | 2 +-
 src/schemas/application.ts                       | 2 +-
 src/schemas/instance.ts                          | 2 +-
 src/schemas/soapbox/soapbox-auth.ts              | 2 +-
 src/schemas/token.ts                             | 2 +-
 src/schemas/web-push.ts                          | 2 +-
 src/types/entities.ts                            | 2 +-
 src/types/soapbox.ts                             | 2 +-
 src/utils/notification.ts                        | 2 +-
 src/utils/phone.ts                               | 2 +-
 tsconfig.json                                    | 1 +
 17 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/api/hooks/zap-split/useZapSplit.ts b/src/api/hooks/zap-split/useZapSplit.ts
index 2790a0129..94451e946 100644
--- a/src/api/hooks/zap-split/useZapSplit.ts
+++ b/src/api/hooks/zap-split/useZapSplit.ts
@@ -94,4 +94,4 @@ const useZapSplit = (status: StatusEntity | undefined, account: AccountEntity) =
 };
 
 export default useZapSplit;
-export { SplitValue };
\ No newline at end of file
+export type { SplitValue };
\ No newline at end of file
diff --git a/src/components/ui/button/useButtonStyles.ts b/src/components/ui/button/useButtonStyles.ts
index ed9c5cbe7..79e1375cc 100644
--- a/src/components/ui/button/useButtonStyles.ts
+++ b/src/components/ui/button/useButtonStyles.ts
@@ -49,4 +49,4 @@ const useButtonStyles = ({
   return buttonStyle;
 };
 
-export { useButtonStyles, ButtonSizes, ButtonThemes };
+export { useButtonStyles, type ButtonSizes, type ButtonThemes };
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
index 6bc634636..42ca99388 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input/input.tsx
@@ -139,5 +139,5 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
 
 export {
   Input as default,
-  InputThemes,
+  type InputThemes,
 };
diff --git a/src/components/ui/text/text.tsx b/src/components/ui/text/text.tsx
index 2c7a17e03..f5957f879 100644
--- a/src/components/ui/text/text.tsx
+++ b/src/components/ui/text/text.tsx
@@ -133,5 +133,5 @@ const Text = React.forwardRef<any, IText>(
 
 export {
   Text as default,
-  IText,
+  type IText,
 };
diff --git a/src/contexts/stat-context.tsx b/src/contexts/stat-context.tsx
index 279f45c37..ad86d8a6f 100644
--- a/src/contexts/stat-context.tsx
+++ b/src/contexts/stat-context.tsx
@@ -30,4 +30,4 @@ const StatProvider: React.FC<IStatProvider> = ({ children }) => {
 
 const useStatContext = (): IStatContext => useContext(StatContext);
 
-export { StatProvider, useStatContext, IStatContext };
\ No newline at end of file
+export { StatProvider, useStatContext, type IStatContext };
\ No newline at end of file
diff --git a/src/features/theme-editor/components/palette.tsx b/src/features/theme-editor/components/palette.tsx
index c48efb618..e8c358629 100644
--- a/src/features/theme-editor/components/palette.tsx
+++ b/src/features/theme-editor/components/palette.tsx
@@ -63,5 +63,5 @@ const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
 
 export {
   Palette as default,
-  ColorGroup,
+  type ColorGroup,
 };
\ No newline at end of file
diff --git a/src/schemas/admin-account.ts b/src/schemas/admin-account.ts
index d84c19418..da225602f 100644
--- a/src/schemas/admin-account.ts
+++ b/src/schemas/admin-account.ts
@@ -29,4 +29,4 @@ const adminAccountSchema = z.object({
 
 type AdminAccount = z.infer<typeof adminAccountSchema>;
 
-export { adminAccountSchema, AdminAccount };
\ No newline at end of file
+export { adminAccountSchema, type AdminAccount };
\ No newline at end of file
diff --git a/src/schemas/application.ts b/src/schemas/application.ts
index 7366789bf..f1f7fad5a 100644
--- a/src/schemas/application.ts
+++ b/src/schemas/application.ts
@@ -20,4 +20,4 @@ const applicationSchema = z.object({
 
 type Application = z.infer<typeof applicationSchema>;
 
-export { applicationSchema, Application };
\ No newline at end of file
+export { applicationSchema, type Application };
\ No newline at end of file
diff --git a/src/schemas/instance.ts b/src/schemas/instance.ts
index 90eaa906a..5c7c8ac0f 100644
--- a/src/schemas/instance.ts
+++ b/src/schemas/instance.ts
@@ -255,4 +255,4 @@ function upgradeInstance(v1: InstanceV1): InstanceV2 {
 type InstanceV1 = z.infer<typeof instanceV1Schema>;
 type InstanceV2 = z.infer<typeof instanceV2Schema>;
 
-export { instanceV1Schema, InstanceV1, instanceV2Schema, InstanceV2, upgradeInstance };
+export { instanceV1Schema, type InstanceV1, instanceV2Schema, type InstanceV2, upgradeInstance };
diff --git a/src/schemas/soapbox/soapbox-auth.ts b/src/schemas/soapbox/soapbox-auth.ts
index e51a8f794..54d6d6c5d 100644
--- a/src/schemas/soapbox/soapbox-auth.ts
+++ b/src/schemas/soapbox/soapbox-auth.ts
@@ -25,4 +25,4 @@ const soapboxAuthSchema = z.object({
 type AuthUser = z.infer<typeof authUserSchema>;
 type SoapboxAuth = z.infer<typeof soapboxAuthSchema>;
 
-export { soapboxAuthSchema, SoapboxAuth, authUserSchema, AuthUser };
\ No newline at end of file
+export { soapboxAuthSchema, type SoapboxAuth, authUserSchema, type AuthUser };
\ No newline at end of file
diff --git a/src/schemas/token.ts b/src/schemas/token.ts
index 2feaf30bd..0708b765a 100644
--- a/src/schemas/token.ts
+++ b/src/schemas/token.ts
@@ -11,4 +11,4 @@ const tokenSchema = z.object({
 
 type Token = z.infer<typeof tokenSchema>;
 
-export { tokenSchema, Token };
\ No newline at end of file
+export { tokenSchema, type Token };
\ No newline at end of file
diff --git a/src/schemas/web-push.ts b/src/schemas/web-push.ts
index f0553dc32..60eee13a6 100644
--- a/src/schemas/web-push.ts
+++ b/src/schemas/web-push.ts
@@ -23,4 +23,4 @@ const webPushSubscriptionSchema = z.object({
 
 type WebPushSubscription = z.infer<typeof webPushSubscriptionSchema>;
 
-export { webPushSubscriptionSchema, WebPushSubscription };
\ No newline at end of file
+export { webPushSubscriptionSchema, type WebPushSubscription };
\ No newline at end of file
diff --git a/src/types/entities.ts b/src/types/entities.ts
index 3936df856..1c88b7f7c 100644
--- a/src/types/entities.ts
+++ b/src/types/entities.ts
@@ -53,7 +53,7 @@ interface Status extends ReturnType<typeof StatusRecord> {
 type APIEntity = Record<string, any>;
 type EmbeddedEntity<T extends object> = null | string | ReturnType<ImmutableRecord.Factory<T>>;
 
-export {
+export type {
   Account,
   AdminAccount,
   AdminReport,
diff --git a/src/types/soapbox.ts b/src/types/soapbox.ts
index 459339750..382b7dc73 100644
--- a/src/types/soapbox.ts
+++ b/src/types/soapbox.ts
@@ -12,7 +12,7 @@ type FooterItem = ReturnType<typeof FooterItemRecord>;
 type CryptoAddress = ReturnType<typeof CryptoAddressRecord>;
 type SoapboxConfig = ReturnType<typeof SoapboxConfigRecord>;
 
-export {
+export type {
   Me,
   PromoPanelItem,
   FooterItem,
diff --git a/src/utils/notification.ts b/src/utils/notification.ts
index bfea82711..5b2c943cb 100644
--- a/src/utils/notification.ts
+++ b/src/utils/notification.ts
@@ -35,6 +35,6 @@ const validType = (type: string): type is NotificationType => NOTIFICATION_TYPES
 export {
   NOTIFICATION_TYPES,
   EXCLUDE_TYPES,
-  NotificationType,
+  type NotificationType,
   validType,
 };
diff --git a/src/utils/phone.ts b/src/utils/phone.ts
index 8fde39f12..c1e4179ea 100644
--- a/src/utils/phone.ts
+++ b/src/utils/phone.ts
@@ -14,6 +14,6 @@ const isCountryCode = (value: any): value is CountryCode => COUNTRY_CODES.includ
 
 export {
   COUNTRY_CODES,
-  CountryCode,
+  type CountryCode,
   isCountryCode,
 };
diff --git a/tsconfig.json b/tsconfig.json
index 92a209b21..6c92951ba 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
     "target": "ESNext",
     "jsx": "react",
     "allowJs": true,
+    "isolatedModules": true,
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "esModuleInterop": true,

From b5bf0cd967bc4783ba38d7af26ef117561e4ba59 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 15:33:00 -0600
Subject: [PATCH 070/133] Remove accidental extra line in test file imports

---
 src/actions/about.test.ts                                        | 1 -
 src/actions/accounts.test.ts                                     | 1 -
 src/actions/compose.test.ts                                      | 1 -
 src/actions/notifications.test.ts                                | 1 -
 src/actions/status-quotes.test.ts                                | 1 -
 src/actions/statuses.test.ts                                     | 1 -
 src/components/account.test.tsx                                  | 1 -
 src/components/autosuggest-emoji.test.tsx                        | 1 -
 src/components/badge.test.tsx                                    | 1 -
 src/components/display-name.test.tsx                             | 1 -
 src/components/quoted-status.test.tsx                            | 1 -
 src/components/status.test.tsx                                   | 1 -
 src/components/ui/avatar/avatar.test.tsx                         | 1 -
 src/components/ui/button/button.test.tsx                         | 1 -
 src/components/ui/card/card.test.tsx                             | 1 -
 src/components/ui/column/column.test.tsx                         | 1 -
 src/components/ui/divider/divider.test.tsx                       | 1 -
 src/components/ui/emoji/emoji.test.tsx                           | 1 -
 src/components/ui/form-actions/form-actions.test.tsx             | 1 -
 src/components/ui/form-group/form-group.test.tsx                 | 1 -
 src/components/ui/form/form.test.tsx                             | 1 -
 src/components/validation-checkmark.test.tsx                     | 1 -
 src/features/auth-login/components/login-form.test.tsx           | 1 -
 src/features/auth-login/components/login-page.test.tsx           | 1 -
 src/features/auth-login/components/otp-auth-form.test.tsx        | 1 -
 src/features/chats/components/chat-list-item.test.tsx            | 1 -
 src/features/group/components/group-action-button.test.tsx       | 1 -
 src/features/group/components/group-header.test.tsx              | 1 -
 src/features/group/components/group-member-count.test.tsx        | 1 -
 src/features/group/components/group-options-button.test.tsx      | 1 -
 src/features/group/components/group-privacy.test.tsx             | 1 -
 src/features/group/components/group-relationship.test.tsx        | 1 -
 src/features/group/components/group-tag-list-item.test.tsx       | 1 -
 src/features/groups/components/discover/group-grid-item.test.tsx | 1 -
 src/features/groups/components/discover/group-list-item.test.tsx | 1 -
 .../groups/components/discover/search/blankslate.test.tsx        | 1 -
 src/features/groups/components/discover/search/search.test.tsx   | 1 -
 src/features/groups/components/discover/tag-list-item.test.tsx   | 1 -
 src/features/notifications/components/notification.test.tsx      | 1 -
 src/features/ui/components/cta-banner.test.tsx                   | 1 -
 src/features/ui/components/modals/landing-page-modal.test.tsx    | 1 -
 src/features/ui/components/modals/unauthorized-modal.test.tsx    | 1 -
 src/features/ui/components/navbar.test.tsx                       | 1 -
 src/features/ui/components/panels/sign-up-panel.test.tsx         | 1 -
 src/features/ui/components/subscribe-button.test.tsx             | 1 -
 src/features/ui/components/trends-panel.test.tsx                 | 1 -
 src/hooks/useDimensions.test.ts                                  | 1 -
 src/normalizers/account.test.ts                                  | 1 -
 src/normalizers/attachment.test.ts                               | 1 -
 src/normalizers/chat-message.test.ts                             | 1 -
 src/normalizers/mention.test.ts                                  | 1 -
 src/normalizers/notification.test.ts                             | 1 -
 src/normalizers/soapbox/soapbox-config.test.ts                   | 1 -
 src/normalizers/status.test.ts                                   | 1 -
 src/queries/relationships.test.ts                                | 1 -
 src/reducers/admin.test.ts                                       | 1 -
 src/reducers/compose.test.ts                                     | 1 -
 src/reducers/contexts.test.ts                                    | 1 -
 src/reducers/conversations.test.ts                               | 1 -
 src/reducers/custom-emojis.test.ts                               | 1 -
 src/reducers/filters.test.ts                                     | 1 -
 src/reducers/index.test.ts                                       | 1 -
 src/reducers/list-adder.test.ts                                  | 1 -
 src/reducers/lists.test.ts                                       | 1 -
 src/reducers/meta.test.ts                                        | 1 -
 src/reducers/modals.test.ts                                      | 1 -
 src/reducers/mutes.test.ts                                       | 1 -
 src/reducers/polls.test.ts                                       | 1 -
 src/reducers/relationships.test.ts                               | 1 -
 src/reducers/settings.test.ts                                    | 1 -
 src/reducers/soapbox.test.ts                                     | 1 -
 src/reducers/statuses.test.ts                                    | 1 -
 src/reducers/timelines.test.ts                                   | 1 -
 src/reducers/user-lists.test.ts                                  | 1 -
 src/utils/config-db.test.ts                                      | 1 -
 src/utils/emoji-reacts.test.ts                                   | 1 -
 src/utils/numbers.test.tsx                                       | 1 -
 src/utils/queries.test.ts                                        | 1 -
 src/utils/status.test.ts                                         | 1 -
 src/utils/tailwind.test.ts                                       | 1 -
 src/utils/timelines.test.ts                                      | 1 -
 81 files changed, 81 deletions(-)

diff --git a/src/actions/about.test.ts b/src/actions/about.test.ts
index 4a1afa479..bd6affcd9 100644
--- a/src/actions/about.test.ts
+++ b/src/actions/about.test.ts
@@ -1,7 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import { describe, expect, it } from 'vitest';
 
-
 import { staticClient } from 'soapbox/api';
 import { mockStore } from 'soapbox/jest/test-helpers';
 
diff --git a/src/actions/accounts.test.ts b/src/actions/accounts.test.ts
index 422a0217b..434da371d 100644
--- a/src/actions/accounts.test.ts
+++ b/src/actions/accounts.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { __stub } from 'soapbox/api';
 import { buildInstance, buildRelationship } from 'soapbox/jest/factory';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/actions/compose.test.ts b/src/actions/compose.test.ts
index b1acb0b6e..20cb92231 100644
--- a/src/actions/compose.test.ts
+++ b/src/actions/compose.test.ts
@@ -1,7 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-
 import { buildInstance } from 'soapbox/jest/factory';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 import { ReducerCompose } from 'soapbox/reducers/compose';
diff --git a/src/actions/notifications.test.ts b/src/actions/notifications.test.ts
index 41ed43d82..44ce0cb9f 100644
--- a/src/actions/notifications.test.ts
+++ b/src/actions/notifications.test.ts
@@ -1,7 +1,6 @@
 import { OrderedMap as ImmutableOrderedMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 import { normalizeNotification } from 'soapbox/normalizers';
diff --git a/src/actions/status-quotes.test.ts b/src/actions/status-quotes.test.ts
index c2d6ac1b9..ca7d4f764 100644
--- a/src/actions/status-quotes.test.ts
+++ b/src/actions/status-quotes.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 import { StatusListRecord } from 'soapbox/reducers/status-lists';
diff --git a/src/actions/statuses.test.ts b/src/actions/statuses.test.ts
index 93c5b9c08..3c72ef7ab 100644
--- a/src/actions/statuses.test.ts
+++ b/src/actions/statuses.test.ts
@@ -1,7 +1,6 @@
 import { fromJS, Map as ImmutableMap } from 'immutable';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { STATUSES_IMPORT } from 'soapbox/actions/importer';
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/components/account.test.tsx b/src/components/account.test.tsx
index 00803029b..ea4cf3105 100644
--- a/src/components/account.test.tsx
+++ b/src/components/account.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildAccount } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/autosuggest-emoji.test.tsx b/src/components/autosuggest-emoji.test.tsx
index 1bc00895b..e498244de 100644
--- a/src/components/autosuggest-emoji.test.tsx
+++ b/src/components/autosuggest-emoji.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import AutosuggestEmoji from './autosuggest-emoji';
diff --git a/src/components/badge.test.tsx b/src/components/badge.test.tsx
index 01ee857b5..f41cae951 100644
--- a/src/components/badge.test.tsx
+++ b/src/components/badge.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import Badge from './badge';
diff --git a/src/components/display-name.test.tsx b/src/components/display-name.test.tsx
index 1d8742991..60cd35590 100644
--- a/src/components/display-name.test.tsx
+++ b/src/components/display-name.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildAccount } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/components/quoted-status.test.tsx b/src/components/quoted-status.test.tsx
index d9c27cb5d..fb9360b81 100644
--- a/src/components/quoted-status.test.tsx
+++ b/src/components/quoted-status.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen, rootState } from 'soapbox/jest/test-helpers';
 import { normalizeStatus, normalizeAccount } from 'soapbox/normalizers';
 
diff --git a/src/components/status.test.tsx b/src/components/status.test.tsx
index 3a7b23367..2cbd80ad1 100644
--- a/src/components/status.test.tsx
+++ b/src/components/status.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildAccount } from 'soapbox/jest/factory';
 import { render, screen, rootState } from 'soapbox/jest/test-helpers';
 import { normalizeStatus } from 'soapbox/normalizers';
diff --git a/src/components/ui/avatar/avatar.test.tsx b/src/components/ui/avatar/avatar.test.tsx
index 8cf4c7baa..907c97914 100644
--- a/src/components/ui/avatar/avatar.test.tsx
+++ b/src/components/ui/avatar/avatar.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import Avatar from './avatar';
diff --git a/src/components/ui/button/button.test.tsx b/src/components/ui/button/button.test.tsx
index bec0b2801..b3ddddf2b 100644
--- a/src/components/ui/button/button.test.tsx
+++ b/src/components/ui/button/button.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
-
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
 
 import Button from './button';
diff --git a/src/components/ui/card/card.test.tsx b/src/components/ui/card/card.test.tsx
index cebaffc15..9a1e74db4 100644
--- a/src/components/ui/card/card.test.tsx
+++ b/src/components/ui/card/card.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import { Card, CardBody, CardHeader, CardTitle } from './card';
diff --git a/src/components/ui/column/column.test.tsx b/src/components/ui/column/column.test.tsx
index c63ec8aad..aef000973 100644
--- a/src/components/ui/column/column.test.tsx
+++ b/src/components/ui/column/column.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import { Column } from './column';
diff --git a/src/components/ui/divider/divider.test.tsx b/src/components/ui/divider/divider.test.tsx
index cb7c8eb82..fbff2c46a 100644
--- a/src/components/ui/divider/divider.test.tsx
+++ b/src/components/ui/divider/divider.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import Divider from './divider';
diff --git a/src/components/ui/emoji/emoji.test.tsx b/src/components/ui/emoji/emoji.test.tsx
index bc3fc468f..0cacea982 100644
--- a/src/components/ui/emoji/emoji.test.tsx
+++ b/src/components/ui/emoji/emoji.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import Emoji from './emoji';
diff --git a/src/components/ui/form-actions/form-actions.test.tsx b/src/components/ui/form-actions/form-actions.test.tsx
index 4a6e8be90..ea5dadbc6 100644
--- a/src/components/ui/form-actions/form-actions.test.tsx
+++ b/src/components/ui/form-actions/form-actions.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import FormActions from './form-actions';
diff --git a/src/components/ui/form-group/form-group.test.tsx b/src/components/ui/form-group/form-group.test.tsx
index 54fa80cf0..d6d4114ad 100644
--- a/src/components/ui/form-group/form-group.test.tsx
+++ b/src/components/ui/form-group/form-group.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import FormGroup from './form-group';
diff --git a/src/components/ui/form/form.test.tsx b/src/components/ui/form/form.test.tsx
index ee581aa83..de693f195 100644
--- a/src/components/ui/form/form.test.tsx
+++ b/src/components/ui/form/form.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
-
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
 
 import Form from './form';
diff --git a/src/components/validation-checkmark.test.tsx b/src/components/validation-checkmark.test.tsx
index 874f478d3..eb1f3ec4b 100644
--- a/src/components/validation-checkmark.test.tsx
+++ b/src/components/validation-checkmark.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import ValidationCheckmark from './validation-checkmark';
diff --git a/src/features/auth-login/components/login-form.test.tsx b/src/features/auth-login/components/login-form.test.tsx
index c4b68eae5..716dae153 100644
--- a/src/features/auth-login/components/login-form.test.tsx
+++ b/src/features/auth-login/components/login-form.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
-
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
 import { instanceV1Schema } from 'soapbox/schemas/instance';
 
diff --git a/src/features/auth-login/components/login-page.test.tsx b/src/features/auth-login/components/login-page.test.tsx
index 4fa0d2400..cd2b7c19c 100644
--- a/src/features/auth-login/components/login-page.test.tsx
+++ b/src/features/auth-login/components/login-page.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { instanceV1Schema } from 'soapbox/schemas/instance';
 
diff --git a/src/features/auth-login/components/otp-auth-form.test.tsx b/src/features/auth-login/components/otp-auth-form.test.tsx
index 495838e06..a07454099 100644
--- a/src/features/auth-login/components/otp-auth-form.test.tsx
+++ b/src/features/auth-login/components/otp-auth-form.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import OtpAuthForm from './otp-auth-form';
diff --git a/src/features/chats/components/chat-list-item.test.tsx b/src/features/chats/components/chat-list-item.test.tsx
index 556cbd18c..817b3b1ec 100644
--- a/src/features/chats/components/chat-list-item.test.tsx
+++ b/src/features/chats/components/chat-list-item.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { IChat } from 'soapbox/queries/chats';
 
diff --git a/src/features/group/components/group-action-button.test.tsx b/src/features/group/components/group-action-button.test.tsx
index dd24dfb48..da82deffd 100644
--- a/src/features/group/components/group-action-button.test.tsx
+++ b/src/features/group/components/group-action-button.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { GroupRoles } from 'soapbox/schemas/group-member';
diff --git a/src/features/group/components/group-header.test.tsx b/src/features/group/components/group-header.test.tsx
index 4481bef31..10cc51741 100644
--- a/src/features/group/components/group-header.test.tsx
+++ b/src/features/group/components/group-header.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { Group } from 'soapbox/types/entities';
diff --git a/src/features/group/components/group-member-count.test.tsx b/src/features/group/components/group-member-count.test.tsx
index a64837d37..afae751ee 100644
--- a/src/features/group/components/group-member-count.test.tsx
+++ b/src/features/group/components/group-member-count.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { Group } from 'soapbox/types/entities';
diff --git a/src/features/group/components/group-options-button.test.tsx b/src/features/group/components/group-options-button.test.tsx
index 441f335c2..030696671 100644
--- a/src/features/group/components/group-options-button.test.tsx
+++ b/src/features/group/components/group-options-button.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { GroupRoles } from 'soapbox/schemas/group-member';
diff --git a/src/features/group/components/group-privacy.test.tsx b/src/features/group/components/group-privacy.test.tsx
index 1544cf0b4..15c803c11 100644
--- a/src/features/group/components/group-privacy.test.tsx
+++ b/src/features/group/components/group-privacy.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { Group } from 'soapbox/types/entities';
diff --git a/src/features/group/components/group-relationship.test.tsx b/src/features/group/components/group-relationship.test.tsx
index 63999a5b1..2ec43e4a3 100644
--- a/src/features/group/components/group-relationship.test.tsx
+++ b/src/features/group/components/group-relationship.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { GroupRoles } from 'soapbox/schemas/group-member';
diff --git a/src/features/group/components/group-tag-list-item.test.tsx b/src/features/group/components/group-tag-list-item.test.tsx
index c88160931..0e44f1e20 100644
--- a/src/features/group/components/group-tag-list-item.test.tsx
+++ b/src/features/group/components/group-tag-list-item.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildGroup, buildGroupTag, buildGroupRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 import { GroupRoles } from 'soapbox/schemas/group-member';
diff --git a/src/features/groups/components/discover/group-grid-item.test.tsx b/src/features/groups/components/discover/group-grid-item.test.tsx
index 253abf0e8..3c69468b5 100644
--- a/src/features/groups/components/discover/group-grid-item.test.tsx
+++ b/src/features/groups/components/discover/group-grid-item.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/groups/components/discover/group-list-item.test.tsx b/src/features/groups/components/discover/group-list-item.test.tsx
index 4181a0861..36a77021c 100644
--- a/src/features/groups/components/discover/group-list-item.test.tsx
+++ b/src/features/groups/components/discover/group-list-item.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/groups/components/discover/search/blankslate.test.tsx b/src/features/groups/components/discover/search/blankslate.test.tsx
index 1d60e41d6..fa116d1c4 100644
--- a/src/features/groups/components/discover/search/blankslate.test.tsx
+++ b/src/features/groups/components/discover/search/blankslate.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import Blankslate from './blankslate';
diff --git a/src/features/groups/components/discover/search/search.test.tsx b/src/features/groups/components/discover/search/search.test.tsx
index 62ad7de3c..c5b1f9710 100644
--- a/src/features/groups/components/discover/search/search.test.tsx
+++ b/src/features/groups/components/discover/search/search.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-
 import { __stub } from 'soapbox/api';
 import { buildGroup } from 'soapbox/jest/factory';
 import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/features/groups/components/discover/tag-list-item.test.tsx b/src/features/groups/components/discover/tag-list-item.test.tsx
index a74d89d81..77dff981a 100644
--- a/src/features/groups/components/discover/tag-list-item.test.tsx
+++ b/src/features/groups/components/discover/tag-list-item.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildGroupTag } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/notifications/components/notification.test.tsx b/src/features/notifications/components/notification.test.tsx
index 84e8edd79..4d9a4ceaf 100644
--- a/src/features/notifications/components/notification.test.tsx
+++ b/src/features/notifications/components/notification.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { updateNotifications } from 'soapbox/actions/notifications';
 import { render, screen, rootState, createTestStore } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/ui/components/cta-banner.test.tsx b/src/features/ui/components/cta-banner.test.tsx
index ac189ec17..ca672e5e8 100644
--- a/src/features/ui/components/cta-banner.test.tsx
+++ b/src/features/ui/components/cta-banner.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { storeClosed, storeLoggedIn, storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/ui/components/modals/landing-page-modal.test.tsx b/src/features/ui/components/modals/landing-page-modal.test.tsx
index b5a4861f0..ccb5eea29 100644
--- a/src/features/ui/components/modals/landing-page-modal.test.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/ui/components/modals/unauthorized-modal.test.tsx b/src/features/ui/components/modals/unauthorized-modal.test.tsx
index d40f1dc71..abee32123 100644
--- a/src/features/ui/components/modals/unauthorized-modal.test.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/ui/components/navbar.test.tsx b/src/features/ui/components/navbar.test.tsx
index bc7876465..536f137f6 100644
--- a/src/features/ui/components/navbar.test.tsx
+++ b/src/features/ui/components/navbar.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/ui/components/panels/sign-up-panel.test.tsx b/src/features/ui/components/panels/sign-up-panel.test.tsx
index c20c1910e..5780929ba 100644
--- a/src/features/ui/components/panels/sign-up-panel.test.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { storeOpen } from 'soapbox/jest/mock-stores';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/ui/components/subscribe-button.test.tsx b/src/features/ui/components/subscribe-button.test.tsx
index 69418950c..b3c8d7d5d 100644
--- a/src/features/ui/components/subscribe-button.test.tsx
+++ b/src/features/ui/components/subscribe-button.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
 import { render, screen } from 'soapbox/jest/test-helpers';
 
diff --git a/src/features/ui/components/trends-panel.test.tsx b/src/features/ui/components/trends-panel.test.tsx
index 690f5a707..07e122c16 100644
--- a/src/features/ui/components/trends-panel.test.tsx
+++ b/src/features/ui/components/trends-panel.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { __stub } from 'soapbox/api';
 import { queryClient, render, screen, waitFor } from 'soapbox/jest/test-helpers';
 
diff --git a/src/hooks/useDimensions.test.ts b/src/hooks/useDimensions.test.ts
index 84242df3f..756f128e2 100644
--- a/src/hooks/useDimensions.test.ts
+++ b/src/hooks/useDimensions.test.ts
@@ -1,7 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { listener, mockDisconnect } from './__mocks__/resize-observer';
 import { useDimensions } from './useDimensions';
 
diff --git a/src/normalizers/account.test.ts b/src/normalizers/account.test.ts
index 5adcb2213..9d2f9fe34 100644
--- a/src/normalizers/account.test.ts
+++ b/src/normalizers/account.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord, fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import AVATAR_MISSING from 'soapbox/assets/images/avatar-missing.png';
 import HEADER_MISSING from 'soapbox/assets/images/header-missing.png';
 
diff --git a/src/normalizers/attachment.test.ts b/src/normalizers/attachment.test.ts
index a1b15f1fa..59a4f7b14 100644
--- a/src/normalizers/attachment.test.ts
+++ b/src/normalizers/attachment.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { normalizeAttachment } from './attachment';
 
 describe('normalizeAttachment()', () => {
diff --git a/src/normalizers/chat-message.test.ts b/src/normalizers/chat-message.test.ts
index db3241dd4..7f089b41e 100644
--- a/src/normalizers/chat-message.test.ts
+++ b/src/normalizers/chat-message.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { normalizeAttachment } from './attachment';
 import { normalizeChatMessage } from './chat-message';
 
diff --git a/src/normalizers/mention.test.ts b/src/normalizers/mention.test.ts
index 320e5a405..e706cddf5 100644
--- a/src/normalizers/mention.test.ts
+++ b/src/normalizers/mention.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { normalizeMention } from './mention';
 
 describe('normalizeMention()', () => {
diff --git a/src/normalizers/notification.test.ts b/src/normalizers/notification.test.ts
index 23778edb8..4e140e9a2 100644
--- a/src/normalizers/notification.test.ts
+++ b/src/normalizers/notification.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { normalizeNotification } from './notification';
 
 describe('normalizeNotification()', () => {
diff --git a/src/normalizers/soapbox/soapbox-config.test.ts b/src/normalizers/soapbox/soapbox-config.test.ts
index 8a96af49f..01450df21 100644
--- a/src/normalizers/soapbox/soapbox-config.test.ts
+++ b/src/normalizers/soapbox/soapbox-config.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { normalizeSoapboxConfig } from './soapbox-config';
 
 describe('normalizeSoapboxConfig()', () => {
diff --git a/src/normalizers/status.test.ts b/src/normalizers/status.test.ts
index 935271892..38f4486cc 100644
--- a/src/normalizers/status.test.ts
+++ b/src/normalizers/status.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord, fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { normalizeStatus } from './status';
 
 import type { Poll, Card } from 'soapbox/types/entities';
diff --git a/src/queries/relationships.test.ts b/src/queries/relationships.test.ts
index 88966a801..bc67084f5 100644
--- a/src/queries/relationships.test.ts
+++ b/src/queries/relationships.test.ts
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { __stub } from 'soapbox/api';
 import { buildRelationship } from 'soapbox/jest/factory';
 import { createTestStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers';
diff --git a/src/reducers/admin.test.ts b/src/reducers/admin.test.ts
index a37c3e60e..27fec7bc5 100644
--- a/src/reducers/admin.test.ts
+++ b/src/reducers/admin.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import reducer from './admin';
 
 describe('admin reducer', () => {
diff --git a/src/reducers/compose.test.ts b/src/reducers/compose.test.ts
index 81f277af4..49b6a0b18 100644
--- a/src/reducers/compose.test.ts
+++ b/src/reducers/compose.test.ts
@@ -1,7 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord, fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import * as actions from 'soapbox/actions/compose';
 import { COMPOSE_SET_STATUS } from 'soapbox/actions/compose-status';
 import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me';
diff --git a/src/reducers/contexts.test.ts b/src/reducers/contexts.test.ts
index 4e724d9ec..da18bd4ca 100644
--- a/src/reducers/contexts.test.ts
+++ b/src/reducers/contexts.test.ts
@@ -6,7 +6,6 @@ import {
 } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { STATUS_IMPORT } from 'soapbox/actions/importer';
 import { CONTEXT_FETCH_SUCCESS } from 'soapbox/actions/statuses';
 import { TIMELINE_DELETE } from 'soapbox/actions/timelines';
diff --git a/src/reducers/conversations.test.ts b/src/reducers/conversations.test.ts
index efe085564..51a177c4d 100644
--- a/src/reducers/conversations.test.ts
+++ b/src/reducers/conversations.test.ts
@@ -1,7 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import * as actions from 'soapbox/actions/conversations';
 
 import reducer from './conversations';
diff --git a/src/reducers/custom-emojis.test.ts b/src/reducers/custom-emojis.test.ts
index 0ed8643f8..adae3dfbc 100644
--- a/src/reducers/custom-emojis.test.ts
+++ b/src/reducers/custom-emojis.test.ts
@@ -1,7 +1,6 @@
 import { List as ImmutableList } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import reducer from './custom-emojis';
 
 describe('custom_emojis reducer', () => {
diff --git a/src/reducers/filters.test.ts b/src/reducers/filters.test.ts
index 025fbd61c..b8f256e63 100644
--- a/src/reducers/filters.test.ts
+++ b/src/reducers/filters.test.ts
@@ -1,7 +1,6 @@
 import { List as ImmutableList } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import reducer from './filters';
 
 describe('filters reducer', () => {
diff --git a/src/reducers/index.test.ts b/src/reducers/index.test.ts
index 1ad39b4d7..4a18bb771 100644
--- a/src/reducers/index.test.ts
+++ b/src/reducers/index.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import reducer from '.';
 
 describe('root reducer', () => {
diff --git a/src/reducers/list-adder.test.ts b/src/reducers/list-adder.test.ts
index 8692fb3d1..c5376697f 100644
--- a/src/reducers/list-adder.test.ts
+++ b/src/reducers/list-adder.test.ts
@@ -1,7 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import * as actions from 'soapbox/actions/lists';
 
 import reducer from './list-adder';
diff --git a/src/reducers/lists.test.ts b/src/reducers/lists.test.ts
index af2e39a90..7e38390ba 100644
--- a/src/reducers/lists.test.ts
+++ b/src/reducers/lists.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import reducer from './lists';
 
 describe('lists reducer', () => {
diff --git a/src/reducers/meta.test.ts b/src/reducers/meta.test.ts
index 76f370a18..b194b61ff 100644
--- a/src/reducers/meta.test.ts
+++ b/src/reducers/meta.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { SW_UPDATING, setSwUpdating } from 'soapbox/actions/sw';
 
 import reducer from './meta';
diff --git a/src/reducers/modals.test.ts b/src/reducers/modals.test.ts
index 17058cecb..49d417712 100644
--- a/src/reducers/modals.test.ts
+++ b/src/reducers/modals.test.ts
@@ -1,7 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { MODAL_OPEN, MODAL_CLOSE } from 'soapbox/actions/modals';
 
 import reducer from './modals';
diff --git a/src/reducers/mutes.test.ts b/src/reducers/mutes.test.ts
index 7bd8d9dd2..943db6011 100644
--- a/src/reducers/mutes.test.ts
+++ b/src/reducers/mutes.test.ts
@@ -1,7 +1,6 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import {
   MUTES_INIT_MODAL,
   MUTES_TOGGLE_HIDE_NOTIFICATIONS,
diff --git a/src/reducers/polls.test.ts b/src/reducers/polls.test.ts
index 8d51d43e5..2c053e572 100644
--- a/src/reducers/polls.test.ts
+++ b/src/reducers/polls.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { POLLS_IMPORT } from 'soapbox/actions/importer';
 
 import reducer from './polls';
diff --git a/src/reducers/relationships.test.ts b/src/reducers/relationships.test.ts
index 4555d9e31..c550941f7 100644
--- a/src/reducers/relationships.test.ts
+++ b/src/reducers/relationships.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import lain from 'soapbox/__fixtures__/lain.json';
 import { ACCOUNT_IMPORT } from 'soapbox/actions/importer';
 
diff --git a/src/reducers/settings.test.ts b/src/reducers/settings.test.ts
index d8283e405..1cab1b6f5 100644
--- a/src/reducers/settings.test.ts
+++ b/src/reducers/settings.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import reducer from './settings';
 
 describe('settings reducer', () => {
diff --git a/src/reducers/soapbox.test.ts b/src/reducers/soapbox.test.ts
index 19d6c5f71..e0231d80d 100644
--- a/src/reducers/soapbox.test.ts
+++ b/src/reducers/soapbox.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import soapboxConfig from 'soapbox/__fixtures__/admin_api_frontend_config.json';
 import soapbox from 'soapbox/__fixtures__/soapbox.json';
 import { ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
diff --git a/src/reducers/statuses.test.ts b/src/reducers/statuses.test.ts
index 78e987995..8efd4d5b2 100644
--- a/src/reducers/statuses.test.ts
+++ b/src/reducers/statuses.test.ts
@@ -4,7 +4,6 @@ import {
 } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { STATUS_IMPORT } from 'soapbox/actions/importer';
 import {
   STATUS_CREATE_REQUEST,
diff --git a/src/reducers/timelines.test.ts b/src/reducers/timelines.test.ts
index d9212e72c..815007ffa 100644
--- a/src/reducers/timelines.test.ts
+++ b/src/reducers/timelines.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import {
   TIMELINE_EXPAND_REQUEST,
   TIMELINE_EXPAND_FAIL,
diff --git a/src/reducers/user-lists.test.ts b/src/reducers/user-lists.test.ts
index 92bc9247d..a4b9c6a21 100644
--- a/src/reducers/user-lists.test.ts
+++ b/src/reducers/user-lists.test.ts
@@ -1,7 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import reducer from './user-lists';
 
 describe('user_lists reducer', () => {
diff --git a/src/utils/config-db.test.ts b/src/utils/config-db.test.ts
index ee868331a..90b7dc117 100644
--- a/src/utils/config-db.test.ts
+++ b/src/utils/config-db.test.ts
@@ -1,7 +1,6 @@
 import { List as ImmutableList, fromJS } from 'immutable';
 import { expect, test } from 'vitest';
 
-
 import config_db from 'soapbox/__fixtures__/config_db.json';
 
 import { ConfigDB } from './config-db';
diff --git a/src/utils/emoji-reacts.test.ts b/src/utils/emoji-reacts.test.ts
index cce514bd0..d5b1bc18e 100644
--- a/src/utils/emoji-reacts.test.ts
+++ b/src/utils/emoji-reacts.test.ts
@@ -1,7 +1,6 @@
 import { List as ImmutableList, fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { normalizeStatus } from 'soapbox/normalizers';
 import { emojiReactionSchema } from 'soapbox/schemas';
 
diff --git a/src/utils/numbers.test.tsx b/src/utils/numbers.test.tsx
index d194678ce..0ff44ebd7 100644
--- a/src/utils/numbers.test.tsx
+++ b/src/utils/numbers.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { describe, expect, test } from 'vitest';
 
-
 import { render, screen } from 'soapbox/jest/test-helpers';
 
 import { isIntegerId, secondsToDays, shortNumberFormat } from './numbers';
diff --git a/src/utils/queries.test.ts b/src/utils/queries.test.ts
index 88629bbf2..8dc2cee58 100644
--- a/src/utils/queries.test.ts
+++ b/src/utils/queries.test.ts
@@ -1,7 +1,6 @@
 import { InfiniteData } from '@tanstack/react-query';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-
 import { queryClient } from 'soapbox/queries/client';
 
 import { PaginatedResult, sortQueryData, updatePageItem } from './queries';
diff --git a/src/utils/status.test.ts b/src/utils/status.test.ts
index 22b5a2d52..35631f4d6 100644
--- a/src/utils/status.test.ts
+++ b/src/utils/status.test.ts
@@ -1,6 +1,5 @@
 import { describe, expect, it } from 'vitest';
 
-
 import { buildStatus } from 'soapbox/jest/factory';
 
 import {
diff --git a/src/utils/tailwind.test.ts b/src/utils/tailwind.test.ts
index 7e1374356..db0aa0f6e 100644
--- a/src/utils/tailwind.test.ts
+++ b/src/utils/tailwind.test.ts
@@ -1,7 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { toTailwind, fromLegacyColors, expandPalette } from './tailwind';
 
 describe('toTailwind()', () => {
diff --git a/src/utils/timelines.test.ts b/src/utils/timelines.test.ts
index 17d6e2585..1baa63df1 100644
--- a/src/utils/timelines.test.ts
+++ b/src/utils/timelines.test.ts
@@ -1,7 +1,6 @@
 import { fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-
 import { buildStatus } from 'soapbox/jest/factory';
 
 import { shouldFilter } from './timelines';

From be3e86eff2f01349b081c465ac01aabc3fce0867 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 16:13:56 -0600
Subject: [PATCH 071/133] tsconfig: switch to react-jsx transform, update code
 to not import React directly

---
 src/actions/moderation.tsx                     |  1 -
 src/components/__mocks__/react-inlinesvg.tsx   |  1 -
 src/components/account-search.tsx              |  2 +-
 src/components/account.test.tsx                |  1 -
 src/components/account.tsx                     |  2 +-
 src/components/animated-number.tsx             |  2 +-
 .../announcements/announcement-content.tsx     |  2 +-
 src/components/announcements/announcement.tsx  |  1 -
 .../announcements/announcements-panel.tsx      |  2 +-
 src/components/announcements/emoji.tsx         |  1 -
 src/components/announcements/reaction.tsx      |  2 +-
 src/components/announcements/reactions-bar.tsx |  1 -
 src/components/attachment-thumbs.tsx           |  2 +-
 src/components/authorize-reject-buttons.tsx    |  2 +-
 src/components/autosuggest-account-input.tsx   |  2 +-
 src/components/autosuggest-emoji.test.tsx      |  1 -
 src/components/autosuggest-emoji.tsx           |  1 -
 src/components/autosuggest-input.tsx           |  2 +-
 src/components/autosuggest-location.tsx        |  1 -
 src/components/avatar-stack.tsx                |  1 -
 src/components/badge.test.tsx                  |  1 -
 src/components/badge.tsx                       |  2 +-
 src/components/big-card.tsx                    |  1 -
 src/components/birthday-input.tsx              |  2 +-
 src/components/birthday-panel.tsx              |  4 ++--
 src/components/blurhash.tsx                    |  4 ++--
 src/components/copyable-input.tsx              |  2 +-
 src/components/display-name-inline.tsx         |  1 -
 src/components/display-name.test.tsx           |  1 -
 src/components/display-name.tsx                |  1 -
 src/components/domain.tsx                      |  1 -
 .../dropdown-menu/dropdown-menu-item.tsx       |  2 +-
 src/components/dropdown-menu/dropdown-menu.tsx |  4 ++--
 src/components/emoji-graphic.tsx               |  1 -
 src/components/event-preview.tsx               |  1 -
 src/components/extended-video-player.tsx       |  2 +-
 src/components/fork-awesome-icon.tsx           |  1 -
 src/components/gdpr-banner.tsx                 |  2 +-
 src/components/group-card.tsx                  |  1 -
 src/components/groups/group-avatar.tsx         |  1 -
 .../groups/popover/group-popover.tsx           |  1 -
 src/components/hashtag-link.tsx                |  1 -
 src/components/hashtag.tsx                     |  1 -
 src/components/helmet.tsx                      |  6 +++---
 src/components/hover-ref-wrapper.tsx           |  2 +-
 src/components/hover-status-wrapper.tsx        |  2 +-
 src/components/icon-button.tsx                 |  1 -
 src/components/icon-with-counter.tsx           |  1 -
 src/components/icon.tsx                        |  1 -
 src/components/landing-gradient.tsx            |  1 -
 src/components/link.tsx                        |  1 -
 src/components/list.tsx                        | 10 +++++-----
 src/components/load-gap.tsx                    |  1 -
 src/components/load-more.tsx                   |  1 -
 src/components/loading-screen.tsx              |  1 -
 src/components/location-search.tsx             |  2 +-
 src/components/markup.tsx                      |  4 ++--
 src/components/media-gallery.tsx               |  4 ++--
 src/components/mention.tsx                     |  1 -
 src/components/missing-indicator.tsx           |  1 -
 src/components/modal-root.tsx                  |  2 +-
 src/components/navlinks.tsx                    |  1 -
 src/components/outline-box.tsx                 |  1 -
 src/components/pending-items-row.tsx           |  1 -
 src/components/polls/poll-footer.test.tsx      |  1 -
 src/components/polls/poll-footer.tsx           |  1 -
 src/components/polls/poll-option.tsx           |  1 -
 src/components/polls/poll.tsx                  |  2 +-
 src/components/preview-card.tsx                |  2 +-
 src/components/profile-hover-card.tsx          |  2 +-
 src/components/progress-circle.tsx             |  1 -
 src/components/pull-to-refresh.tsx             |  1 -
 src/components/pullable.tsx                    |  1 -
 src/components/quoted-status-indicator.tsx     |  2 +-
 src/components/quoted-status.test.tsx          |  1 -
 src/components/quoted-status.tsx               |  2 +-
 src/components/radio.tsx                       |  7 ++++---
 src/components/relative-timestamp.tsx          |  4 ++--
 src/components/safe-embed.tsx                  |  2 +-
 src/components/scroll-context.tsx              |  2 +-
 src/components/scroll-top-button.test.tsx      |  1 -
 src/components/scroll-top-button.tsx           |  2 +-
 src/components/scrollable-list.tsx             |  6 +++---
 src/components/sentry-feedback-form.tsx        |  2 +-
 src/components/sidebar-menu.tsx                |  9 ++++-----
 src/components/sidebar-navigation-link.tsx     |  4 ++--
 src/components/sidebar-navigation.tsx          |  1 -
 src/components/site-error-boundary.tsx         |  2 +-
 src/components/site-logo.tsx                   |  1 -
 src/components/status-action-bar.tsx           |  1 -
 src/components/status-action-button.tsx        |  4 ++--
 src/components/status-content.tsx              |  4 ++--
 src/components/status-hover-card.tsx           |  2 +-
 src/components/status-list.tsx                 |  2 +-
 src/components/status-media.tsx                |  2 +-
 src/components/status-reaction-wrapper.tsx     |  4 ++--
 src/components/status-reply-mentions.tsx       |  1 -
 src/components/status.test.tsx                 |  1 -
 src/components/status.tsx                      |  2 +-
 .../sensitive-content-overlay.test.tsx         |  1 -
 .../statuses/sensitive-content-overlay.tsx     |  4 ++--
 src/components/statuses/status-info.tsx        |  1 -
 src/components/still-image.tsx                 |  2 +-
 src/components/thumb-navigation-link.tsx       |  1 -
 src/components/thumb-navigation.tsx            |  1 -
 src/components/tombstone.tsx                   |  1 -
 src/components/translate-button.tsx            |  1 -
 src/components/ui/accordion/accordion.tsx      |  1 -
 src/components/ui/avatar/avatar.test.tsx       |  1 -
 src/components/ui/avatar/avatar.tsx            |  4 ++--
 src/components/ui/banner/banner.tsx            |  1 -
 src/components/ui/button/button.test.tsx       |  1 -
 src/components/ui/button/button.tsx            |  6 +++---
 src/components/ui/card/card.test.tsx           |  1 -
 src/components/ui/card/card.tsx                |  4 ++--
 src/components/ui/carousel/carousel.tsx        |  2 +-
 src/components/ui/checkbox/checkbox.tsx        |  4 ++--
 src/components/ui/column/column.test.tsx       |  1 -
 src/components/ui/column/column.tsx            |  4 ++--
 src/components/ui/counter/counter.tsx          |  1 -
 .../ui/datepicker/datepicker.test.tsx          |  1 -
 src/components/ui/datepicker/datepicker.tsx    |  2 +-
 src/components/ui/datetime/datetime.tsx        |  1 -
 src/components/ui/divider/divider.test.tsx     |  1 -
 src/components/ui/divider/divider.tsx          |  1 -
 .../ui/emoji-selector/emoji-selector.tsx       |  2 +-
 src/components/ui/emoji/emoji.test.tsx         |  1 -
 src/components/ui/emoji/emoji.tsx              |  1 -
 src/components/ui/file-input/file-input.tsx    |  2 +-
 .../ui/form-actions/form-actions.test.tsx      |  1 -
 .../ui/form-actions/form-actions.tsx           |  1 -
 .../ui/form-group/form-group.test.tsx          |  1 -
 src/components/ui/form-group/form-group.tsx    |  8 ++++----
 src/components/ui/form/form.test.tsx           |  1 -
 src/components/ui/form/form.tsx                |  4 ++--
 src/components/ui/hstack/hstack.tsx            |  2 +-
 src/components/ui/icon-button/icon-button.tsx  |  4 ++--
 src/components/ui/icon/icon.tsx                |  1 -
 src/components/ui/icon/svg-icon.test.tsx       |  1 -
 src/components/ui/icon/svg-icon.tsx            |  1 -
 src/components/ui/input/input.tsx              |  8 ++++----
 .../ui/language-dropdown/language-dropdown.tsx |  1 -
 src/components/ui/layout/layout.tsx            |  2 +-
 src/components/ui/menu/menu.tsx                |  1 -
 src/components/ui/modal/modal.test.tsx         |  1 -
 src/components/ui/modal/modal.tsx              |  8 ++++----
 src/components/ui/popover/popover.tsx          |  4 ++--
 src/components/ui/portal/portal.tsx            |  2 +-
 .../ui/progress-bar/progress-bar.tsx           |  1 -
 .../ui/radio-button/radio-button.tsx           |  2 +-
 src/components/ui/select/select.tsx            |  4 ++--
 src/components/ui/slider/slider.tsx            |  2 +-
 src/components/ui/spinner/spinner.tsx          |  1 -
 src/components/ui/stack/stack.tsx              |  4 ++--
 src/components/ui/streamfield/streamfield.tsx  |  1 -
 src/components/ui/tabs/tabs.tsx                | 14 +++++++-------
 src/components/ui/tag-input/tag-input.tsx      |  2 +-
 src/components/ui/tag-input/tag.tsx            |  1 -
 src/components/ui/text/text.tsx                |  4 ++--
 src/components/ui/textarea/textarea.tsx        |  4 ++--
 src/components/ui/toast/toast.tsx              |  1 -
 src/components/ui/toggle/toggle.tsx            |  2 +-
 src/components/ui/tooltip/tooltip.tsx          |  4 ++--
 src/components/ui/widget/widget.tsx            |  1 -
 src/components/upload-progress.tsx             |  1 -
 src/components/upload.tsx                      |  2 +-
 src/components/validation-checkmark.test.tsx   |  1 -
 src/components/validation-checkmark.tsx        |  1 -
 src/components/verification-badge.tsx          |  1 -
 src/containers/account-container.tsx           |  1 -
 src/containers/status-container.tsx            |  2 +-
 src/contexts/chat-context.tsx                  |  2 +-
 src/contexts/nostr-context.tsx                 |  2 +-
 src/contexts/stat-context.tsx                  |  2 +-
 src/features/about/index.tsx                   |  2 +-
 .../account-gallery/components/media-item.tsx  |  2 +-
 src/features/account-gallery/index.tsx         |  2 +-
 .../account-timeline/components/moved-note.tsx |  1 -
 src/features/account-timeline/index.tsx        |  2 +-
 src/features/account/components/header.tsx     |  1 -
 src/features/admin/announcements.tsx           |  1 -
 src/features/admin/components/admin-tabs.tsx   |  1 -
 src/features/admin/components/dashcounter.tsx  |  1 -
 .../admin/components/latest-accounts-panel.tsx |  1 -
 .../components/registration-mode-picker.tsx    |  1 -
 .../admin/components/report-status.tsx         |  1 -
 src/features/admin/components/report.tsx       |  2 +-
 .../admin/components/unapproved-account.tsx    |  1 -
 src/features/admin/domains.tsx                 |  2 +-
 src/features/admin/index.tsx                   |  1 -
 src/features/admin/manage-zap-split.tsx        |  2 +-
 src/features/admin/moderation-log.tsx          |  1 -
 src/features/admin/nostr-relays.tsx            |  2 +-
 src/features/admin/relays.tsx                  |  1 -
 src/features/admin/rules.tsx                   |  1 -
 src/features/admin/tabs/awaiting-approval.tsx  |  2 +-
 src/features/admin/tabs/dashboard.tsx          |  1 -
 src/features/admin/tabs/reports.tsx            |  2 +-
 src/features/admin/user-index.tsx              |  1 -
 src/features/aliases/components/account.tsx    |  1 -
 src/features/aliases/components/search.tsx     |  1 -
 src/features/aliases/index.tsx                 |  2 +-
 src/features/audio/index.tsx                   |  2 +-
 .../auth-login/components/captcha.test.tsx     |  1 -
 src/features/auth-login/components/captcha.tsx |  2 +-
 .../auth-login/components/consumer-button.tsx  |  1 -
 .../auth-login/components/consumers-list.tsx   |  1 -
 .../auth-login/components/login-form.test.tsx  |  1 -
 .../auth-login/components/login-form.tsx       |  1 -
 .../auth-login/components/login-page.test.tsx  |  1 -
 .../auth-login/components/login-page.tsx       |  2 +-
 src/features/auth-login/components/logout.tsx  |  2 +-
 .../components/otp-auth-form.test.tsx          |  1 -
 .../auth-login/components/otp-auth-form.tsx    |  2 +-
 .../components/password-reset-confirm.test.tsx |  1 -
 .../components/password-reset-confirm.tsx      | 10 +++++-----
 .../auth-login/components/password-reset.tsx   |  2 +-
 .../components/registration-form.tsx           |  2 +-
 .../components/registration-page.tsx           |  1 -
 src/features/auth-token-list/index.tsx         |  2 +-
 src/features/backups/index.tsx                 |  2 +-
 src/features/birthdays/account.tsx             |  1 -
 src/features/blocks/index.tsx                  |  1 -
 .../components/new-folder-form.tsx             |  1 -
 src/features/bookmark-folders/index.tsx        |  1 -
 src/features/bookmarks/index.tsx               |  4 ++--
 .../chats/components/chat-composer.tsx         |  4 ++--
 .../chats/components/chat-list-item.test.tsx   |  1 -
 .../chats/components/chat-list-item.tsx        |  2 +-
 src/features/chats/components/chat-list.tsx    |  2 +-
 .../components/chat-message-list-intro.tsx     |  1 -
 .../components/chat-message-list.test.tsx      |  1 -
 .../chats/components/chat-message-list.tsx     |  6 +++---
 .../chat-message-reaction-wrapper.tsx          |  8 ++++----
 .../components/chat-message-reaction.test.tsx  |  1 -
 .../chats/components/chat-message-reaction.tsx |  1 -
 src/features/chats/components/chat-message.tsx |  2 +-
 .../chats/components/chat-page/chat-page.tsx   |  2 +-
 .../chat-page/components/blankslate-empty.tsx  |  1 -
 .../components/blankslate-with-chats.tsx       |  1 -
 .../chat-page/components/chat-page-main.tsx    |  2 +-
 .../chat-page/components/chat-page-new.tsx     |  1 -
 .../components/chat-page-settings.tsx          |  2 +-
 .../chat-page/components/chat-page-sidebar.tsx |  2 +-
 .../chat-page/components/welcome.tsx           |  2 +-
 .../chats/components/chat-pane-header.test.tsx |  1 -
 .../chats/components/chat-pane/blankslate.tsx  |  1 -
 .../components/chat-pane/chat-pane.test.tsx    |  1 -
 .../chats/components/chat-pane/chat-pane.tsx   |  2 +-
 .../chats/components/chat-pending-upload.tsx   |  1 -
 .../chats/components/chat-search-input.tsx     |  1 -
 .../components/chat-search/blankslate.tsx      |  1 -
 .../chat-search/chat-search.test.tsx           |  1 -
 .../components/chat-search/chat-search.tsx     |  2 +-
 .../chat-search/empty-results-blankslate.tsx   |  1 -
 .../chats/components/chat-search/results.tsx   |  2 +-
 .../chats/components/chat-textarea.tsx         |  4 ++--
 .../chats/components/chat-upload-preview.tsx   |  1 -
 src/features/chats/components/chat-upload.tsx  |  1 -
 .../chats/components/chat-widget.test.tsx      |  1 -
 .../chat-widget/chat-pane-header.tsx           |  2 +-
 .../components/chat-widget/chat-settings.tsx   |  1 -
 .../components/chat-widget/chat-widget.tsx     |  1 -
 .../components/chat-widget/chat-window.tsx     |  2 +-
 .../chat-widget/headers/chat-search-header.tsx |  1 -
 src/features/chats/components/chat.tsx         |  2 +-
 src/features/chats/components/ui/pane.tsx      |  1 -
 src/features/chats/index.tsx                   |  1 -
 src/features/community-timeline/index.tsx      |  2 +-
 .../compose/components/autosuggest-account.tsx |  1 -
 .../compose/components/compose-form-button.tsx |  1 -
 .../compose/components/compose-form.tsx        |  2 +-
 .../compose/components/markdown-button.tsx     |  1 -
 .../compose/components/poll-button.tsx         |  1 -
 .../polls/duration-selector.test.tsx           |  1 -
 .../components/polls/duration-selector.tsx     |  2 +-
 .../compose/components/polls/poll-form.tsx     |  1 -
 .../compose/components/privacy-dropdown.tsx    |  2 +-
 .../components/reply-group-indicator.tsx       |  2 +-
 .../compose/components/reply-indicator.tsx     |  1 -
 .../compose/components/reply-mentions.tsx      |  2 +-
 .../compose/components/schedule-button.tsx     |  1 -
 .../compose/components/schedule-form.tsx       |  1 -
 .../compose/components/search-results.tsx      |  2 +-
 .../compose/components/search-zap-split.tsx    |  2 +-
 src/features/compose/components/search.tsx     |  2 +-
 .../compose/components/spoiler-button.tsx      |  1 -
 .../compose/components/spoiler-input.tsx       |  4 ++--
 .../components/text-character-counter.tsx      |  1 -
 .../compose/components/upload-button.tsx       |  2 +-
 .../compose/components/upload-form.tsx         |  2 +-
 .../compose/components/upload-progress.tsx     |  1 -
 src/features/compose/components/upload.tsx     |  2 +-
 .../components/visual-character-counter.tsx    |  1 -
 src/features/compose/components/warning.tsx    |  1 -
 .../containers/quoted-status-container.tsx     |  2 +-
 .../compose/containers/warning-container.tsx   |  1 -
 src/features/compose/editor/index.tsx          |  4 ++--
 .../compose/editor/nodes/emoji-node.tsx        |  1 -
 .../compose/editor/nodes/mention-node.tsx      |  1 -
 .../editor/plugins/autosuggest-plugin.tsx      | 11 ++---------
 .../compose/editor/plugins/ref-plugin.tsx      |  4 ++--
 .../conversations/components/conversation.tsx  |  1 -
 .../components/conversations-list.tsx          |  2 +-
 src/features/conversations/index.tsx           |  2 +-
 .../components/crypto-address.tsx              |  1 -
 .../components/crypto-donate-panel.tsx         |  1 -
 .../crypto-donate/components/crypto-icon.tsx   |  1 -
 .../components/detailed-crypto-address.tsx     |  1 -
 .../components/lightning-address.tsx           |  1 -
 .../crypto-donate/components/site-wallet.tsx   |  1 -
 src/features/crypto-donate/index.tsx           |  2 +-
 src/features/delete-account/index.tsx          | 10 +++++-----
 src/features/developers/apps/create.tsx        |  2 +-
 .../developers/components/indicator.tsx        |  1 -
 .../developers/developers-challenge.tsx        |  2 +-
 src/features/developers/developers-menu.tsx    |  1 -
 src/features/developers/index.tsx              |  1 -
 .../developers/service-worker-info.tsx         |  2 +-
 src/features/developers/settings-store.tsx     |  2 +-
 src/features/direct-timeline/index.tsx         |  2 +-
 .../directory/components/account-card.tsx      |  1 -
 src/features/directory/index.tsx               |  2 +-
 src/features/domain-blocks/index.tsx           |  4 ++--
 src/features/edit-email/index.tsx              | 10 +++++-----
 src/features/edit-identity/index.tsx           |  2 +-
 src/features/edit-password/index.tsx           | 10 +++++-----
 .../edit-profile/components/avatar-picker.tsx  |  4 ++--
 .../edit-profile/components/header-picker.tsx  |  4 ++--
 src/features/edit-profile/index.tsx            |  2 +-
 src/features/email-confirmation/index.tsx      | 15 ++++-----------
 src/features/embedded-status/index.tsx         |  2 +-
 .../emoji/components/emoji-picker-dropdown.tsx |  2 +-
 src/features/emoji/components/emoji-picker.tsx |  2 +-
 .../emoji-picker-dropdown-container.tsx        |  2 +-
 .../event/components/event-action-button.tsx   |  1 -
 src/features/event/components/event-date.tsx   |  1 -
 src/features/event/components/event-header.tsx |  1 -
 src/features/event/event-discussion.tsx        |  2 +-
 src/features/event/event-information.tsx       | 18 +++++++++---------
 .../events/components/event-carousel.tsx       |  2 +-
 src/features/events/index.tsx                  |  2 +-
 .../export-data/components/csv-exporter.tsx    |  2 +-
 src/features/export-data/index.tsx             |  1 -
 .../components/external-login-form.tsx         |  2 +-
 src/features/external-login/index.tsx          |  1 -
 src/features/favourited-statuses/index.tsx     |  2 +-
 .../components/instance-restrictions.tsx       |  1 -
 .../components/restricted-instance.tsx         |  2 +-
 src/features/federation-restrictions/index.tsx |  2 +-
 .../feed-suggestions/feed-suggestions.tsx      |  1 -
 src/features/filters/edit-filter.tsx           |  2 +-
 src/features/filters/index.tsx                 |  2 +-
 src/features/follow-recommendations/index.tsx  |  2 +-
 .../components/account-authorize.tsx           |  1 -
 src/features/follow-requests/index.tsx         |  4 ++--
 src/features/followed-tags/index.tsx           |  2 +-
 src/features/followers/index.tsx               |  1 -
 src/features/following/index.tsx               |  1 -
 src/features/forms/index.tsx                   |  4 ++--
 src/features/generic-not-found/index.tsx       |  1 -
 .../components/group-action-button.test.tsx    |  1 -
 .../group/components/group-action-button.tsx   |  1 -
 .../group/components/group-header-image.tsx    |  2 +-
 .../group/components/group-header.test.tsx     |  1 -
 src/features/group/components/group-header.tsx |  2 +-
 .../components/group-member-count.test.tsx     |  1 -
 .../group/components/group-member-count.tsx    |  1 -
 .../components/group-member-list-item.test.tsx |  1 -
 .../components/group-member-list-item.tsx      |  2 +-
 .../components/group-options-button.test.tsx   |  1 -
 .../group/components/group-options-button.tsx  |  2 +-
 .../group/components/group-privacy.test.tsx    |  1 -
 .../group/components/group-privacy.tsx         |  1 -
 .../components/group-relationship.test.tsx     |  1 -
 .../group/components/group-relationship.tsx    |  1 -
 .../components/group-tag-list-item.test.tsx    |  1 -
 .../group/components/group-tag-list-item.tsx   |  1 -
 .../group/components/group-tags-field.tsx      |  2 +-
 src/features/group/edit-group.tsx              |  2 +-
 src/features/group/group-blocked-members.tsx   |  2 +-
 src/features/group/group-gallery.tsx           |  1 -
 src/features/group/group-members.tsx           |  2 +-
 .../group/group-membership-requests.tsx        |  2 +-
 src/features/group/group-tag-timeline.tsx      |  2 +-
 src/features/group/group-tags.tsx              |  1 -
 src/features/group/group-timeline.tsx          |  2 +-
 src/features/group/manage-group.tsx            |  1 -
 .../discover/group-grid-item.test.tsx          |  1 -
 .../components/discover/group-grid-item.tsx    |  2 +-
 .../discover/group-list-item.test.tsx          |  1 -
 .../components/discover/group-list-item.tsx    |  1 -
 .../discover/layout-buttons.test.tsx           |  1 -
 .../components/discover/layout-buttons.tsx     |  1 -
 .../components/discover/popular-groups.tsx     |  2 +-
 .../components/discover/popular-tags.tsx       |  1 -
 .../discover/search/blankslate.test.tsx        |  1 -
 .../components/discover/search/blankslate.tsx  |  1 -
 .../discover/search/recent-searches.tsx        |  2 +-
 .../discover/search/results.test.tsx           |  1 -
 .../components/discover/search/results.tsx     |  4 ++--
 .../components/discover/search/search.test.tsx |  1 -
 .../components/discover/search/search.tsx      |  2 +-
 .../components/discover/suggested-groups.tsx   |  2 +-
 .../components/discover/tag-list-item.test.tsx |  1 -
 .../components/discover/tag-list-item.tsx      |  1 -
 .../groups/components/group-link-preview.tsx   |  1 -
 .../groups/components/pending-groups-row.tsx   |  1 -
 src/features/groups/components/tab-bar.tsx     |  2 +-
 src/features/groups/discover.test.tsx          |  1 -
 src/features/groups/discover.tsx               |  2 +-
 src/features/groups/index.tsx                  |  2 +-
 src/features/groups/pending-requests.tsx       |  1 -
 src/features/groups/popular.tsx                |  4 ++--
 src/features/groups/suggested.tsx              |  4 ++--
 src/features/groups/tag.tsx                    |  4 ++--
 src/features/groups/tags.tsx                   |  1 -
 src/features/hashtag-timeline/index.tsx        |  2 +-
 src/features/home-timeline/index.tsx           |  2 +-
 .../import-data/components/csv-importer.tsx    |  2 +-
 src/features/import-data/index.tsx             |  1 -
 src/features/intentional-error/index.tsx       |  1 -
 .../landing-timeline/components/logo-text.tsx  |  1 -
 .../components/site-banner.tsx                 |  1 -
 src/features/landing-timeline/index.tsx        |  2 +-
 src/features/list-adder/components/list.tsx    |  1 -
 src/features/list-adder/index.tsx              |  2 +-
 .../list-editor/components/account.tsx         |  1 -
 .../list-editor/components/edit-list-form.tsx  |  1 -
 src/features/list-editor/components/search.tsx |  1 -
 src/features/list-editor/index.tsx             |  2 +-
 src/features/list-timeline/index.tsx           |  2 +-
 .../lists/components/new-list-form.tsx         |  1 -
 src/features/lists/index.tsx                   |  2 +-
 src/features/migration/index.tsx               |  2 +-
 .../mutes/components/group-list-item.tsx       |  1 -
 src/features/mutes/index.tsx                   |  2 +-
 src/features/new-status/index.tsx              |  2 +-
 .../nostr-relays/components/relay-editor.tsx   |  1 -
 src/features/nostr-relays/index.tsx            |  2 +-
 src/features/nostr/Bech32Redirect.tsx          |  1 -
 src/features/nostr/nostr-bunker-login.tsx      |  6 +++---
 .../notifications/components/filter-bar.tsx    |  1 -
 .../components/notification.test.tsx           |  1 -
 .../notifications/components/notification.tsx  |  2 +-
 .../components/setting-toggle.tsx              |  1 -
 src/features/notifications/index.tsx           |  2 +-
 src/features/pinned-statuses/index.tsx         |  2 +-
 .../components/placeholder-account.tsx         |  4 ++--
 .../components/placeholder-avatar.tsx          |  4 ++--
 .../components/placeholder-card.tsx            |  4 ++--
 .../components/placeholder-chat-message.tsx    |  1 -
 .../components/placeholder-chat.tsx            |  1 -
 .../components/placeholder-display-name.tsx    |  5 +++--
 .../components/placeholder-event-header.tsx    |  1 -
 .../components/placeholder-event-preview.tsx   |  1 -
 .../components/placeholder-group-card.tsx      |  1 -
 .../components/placeholder-group-discover.tsx  |  1 -
 .../components/placeholder-group-search.tsx    |  1 -
 .../components/placeholder-hashtag.tsx         |  1 -
 .../components/placeholder-material-status.tsx |  1 -
 .../components/placeholder-media-gallery.tsx   |  2 +-
 .../components/placeholder-notification.tsx    |  4 ++--
 .../placeholder-sidebar-suggestions.tsx        |  1 -
 .../components/placeholder-sidebar-trends.tsx  |  1 -
 .../components/placeholder-status-content.tsx  |  1 -
 .../components/placeholder-status.tsx          |  4 ++--
 src/features/preferences/index.tsx             |  8 ++++----
 src/features/public-timeline/index.tsx         |  2 +-
 src/features/quotes/index.tsx                  |  4 ++--
 src/features/register-invite/index.tsx         |  1 -
 .../components/pinned-hosts-picker.tsx         |  1 -
 src/features/remote-timeline/index.tsx         |  2 +-
 src/features/reply-mentions/account.tsx        |  2 +-
 .../report/components/status-check-box.tsx     |  2 +-
 .../components/scheduled-status-action-bar.tsx |  1 -
 .../components/scheduled-status.tsx            |  1 -
 src/features/scheduled-statuses/index.tsx      |  2 +-
 src/features/search/index.tsx                  |  1 -
 src/features/security/mfa-form.tsx             |  2 +-
 src/features/security/mfa/disable-otp-form.tsx |  2 +-
 src/features/security/mfa/enable-otp-form.tsx  |  2 +-
 src/features/security/mfa/otp-confirm-form.tsx |  2 +-
 src/features/server-info/index.tsx             |  1 -
 .../settings/components/messages-settings.tsx  |  1 -
 src/features/settings/index.tsx                |  2 +-
 src/features/share/index.tsx                   |  1 -
 .../soapbox-config/components/color-picker.tsx |  2 +-
 .../components/color-with-picker.tsx           |  2 +-
 .../components/crypto-address-input.tsx        |  1 -
 .../components/footer-link-input.tsx           |  1 -
 .../components/icon-picker-dropdown.tsx        |  2 +-
 .../components/icon-picker-menu.tsx            |  2 +-
 .../soapbox-config/components/icon-picker.tsx  |  1 -
 .../components/promo-panel-input.tsx           |  1 -
 .../soapbox-config/components/site-preview.tsx |  2 +-
 src/features/soapbox-config/index.tsx          |  2 +-
 .../status/components/detailed-status.tsx      |  2 +-
 .../components/status-interaction-bar.tsx      |  3 +--
 .../status/components/thread-login-cta.tsx     |  1 -
 .../status/components/thread-status.tsx        |  1 -
 src/features/status/components/thread.tsx      |  2 +-
 .../containers/quoted-status-container.tsx     |  2 +-
 src/features/status/index.tsx                  |  2 +-
 src/features/test-timeline/index.tsx           |  4 ++--
 src/features/theme-editor/components/color.tsx |  1 -
 .../theme-editor/components/palette.tsx        |  2 +-
 src/features/theme-editor/index.tsx            |  2 +-
 src/features/ui/components/action-button.tsx   |  1 -
 .../ui/components/background-shapes.tsx        |  1 -
 .../ui/components/column-forbidden.tsx         |  1 -
 src/features/ui/components/column-loading.tsx  |  1 -
 src/features/ui/components/columns-area.tsx    |  1 -
 .../ui/components/compose-button.test.tsx      |  1 -
 src/features/ui/components/compose-button.tsx  |  1 -
 src/features/ui/components/cta-banner.test.tsx |  1 -
 src/features/ui/components/cta-banner.tsx      |  1 -
 src/features/ui/components/error-column.tsx    |  1 -
 .../ui/components/floating-action-button.tsx   |  1 -
 src/features/ui/components/funding-panel.tsx   |  2 +-
 .../ui/components/group-media-panel.tsx        |  2 +-
 src/features/ui/components/hotkeys.tsx         |  4 ++--
 src/features/ui/components/image-loader.tsx    |  4 ++--
 .../ui/components/instance-info-panel.tsx      |  1 -
 .../components/instance-moderation-panel.tsx   |  1 -
 src/features/ui/components/link-footer.tsx     |  1 -
 src/features/ui/components/modal-loading.tsx   |  1 -
 src/features/ui/components/modal-root.tsx      |  4 ++--
 .../account-moderation-modal.tsx               |  2 +-
 .../account-moderation-modal/badge-input.tsx   |  1 -
 .../staff-role-picker.tsx                      |  2 +-
 .../ui/components/modals/actions-modal.tsx     |  1 -
 .../ui/components/modals/birthdays-modal.tsx   |  1 -
 .../ui/components/modals/boost-modal.tsx       |  1 -
 .../modals/captcha-modal/captcha-modal.tsx     |  1 -
 .../modals/captcha-modal/components/puzzle.tsx |  2 +-
 .../modals/compare-history-modal.tsx           |  2 +-
 .../ui/components/modals/component-modal.tsx   |  1 -
 .../compose-event-modal.tsx                    |  2 +-
 .../compose-event-modal/upload-button.tsx      |  2 +-
 .../ui/components/modals/compose-modal.tsx     |  2 +-
 .../components/modals/confirmation-modal.tsx   |  2 +-
 .../components/modals/crypto-donate-modal.tsx  |  1 -
 .../ui/components/modals/dislikes-modal.tsx    |  2 +-
 .../modals/edit-announcement-modal.tsx         |  2 +-
 .../modals/edit-bookmark-folder-modal.tsx      |  2 +-
 .../ui/components/modals/edit-domain-modal.tsx |  2 +-
 .../modals/edit-federation-modal.tsx           |  2 +-
 .../ui/components/modals/edit-rule-modal.tsx   |  1 -
 .../ui/components/modals/embed-modal.tsx       |  2 +-
 .../ui/components/modals/event-map-modal.tsx   |  2 +-
 .../modals/event-participants-modal.tsx        |  2 +-
 .../modals/familiar-followers-modal.tsx        |  1 -
 .../ui/components/modals/favourites-modal.tsx  |  2 +-
 .../ui/components/modals/hotkeys-modal.tsx     |  1 -
 .../ui/components/modals/join-event-modal.tsx  |  2 +-
 .../modals/landing-page-modal.test.tsx         |  1 -
 .../components/modals/landing-page-modal.tsx   |  1 -
 .../manage-group-modal/create-group-modal.tsx  |  2 +-
 .../steps/confirmation-step.tsx                |  1 -
 .../manage-group-modal/steps/details-step.tsx  |  1 -
 .../manage-group-modal/steps/privacy-step.tsx  |  1 -
 .../ui/components/modals/media-modal.tsx       |  2 +-
 .../ui/components/modals/mentions-modal.tsx    |  2 +-
 .../modals/missing-description-modal.tsx       |  1 -
 .../ui/components/modals/mute-modal.tsx        |  1 -
 .../components/nostr-extension-indicator.tsx   |  1 -
 .../nostr-login-modal/nostr-login-modal.tsx    |  2 +-
 .../nostr-login-modal/steps/extension-step.tsx |  1 -
 .../nostr-login-modal/steps/key-add-step.tsx   |  2 +-
 .../nostr-signup-modal/nostr-signup-modal.tsx  |  2 +-
 .../nostr-signup-modal/steps/key-step.tsx      |  1 -
 .../nostr-signup-modal/steps/keygen-step.tsx   |  2 +-
 .../onboarding-flow-modal.tsx                  |  6 +++---
 .../steps/avatar-step.tsx                      | 10 +++++-----
 .../onboarding-flow-modal/steps/bio-step.tsx   |  8 ++++----
 .../steps/completed-step.tsx                   |  1 -
 .../steps/cover-photo-selection-step.tsx       | 10 +++++-----
 .../steps/display-name-step.tsx                | 10 +++++-----
 .../steps/suggested-accounts-step.tsx          |  1 -
 .../ui/components/modals/reactions-modal.tsx   |  2 +-
 .../ui/components/modals/reblogs-modal.tsx     |  2 +-
 .../components/modals/reply-mentions-modal.tsx |  2 +-
 .../modals/report-modal/report-modal.tsx       |  2 +-
 .../report-modal/steps/confirmation-step.tsx   |  1 -
 .../report-modal/steps/other-actions-step.tsx  |  2 +-
 .../modals/report-modal/steps/reason-step.tsx  |  2 +-
 .../modals/select-bookmark-folder-modal.tsx    |  2 +-
 .../modals/unauthorized-modal.test.tsx         |  1 -
 .../components/modals/unauthorized-modal.tsx   |  2 +-
 .../ui/components/modals/video-modal.tsx       |  1 -
 .../modals/zap-split/display-name-row.tsx      |  1 -
 .../modals/zap-split/zap-split-modal.tsx       |  2 +-
 .../components/modals/zap-split/zap-split.tsx  |  1 -
 .../ui/components/modals/zaps-modal.tsx        |  2 +-
 src/features/ui/components/navbar.test.tsx     |  1 -
 src/features/ui/components/navbar.tsx          |  2 +-
 .../ui/components/new-account-zap-split.tsx    |  2 +-
 .../components/panels/account-note-panel.tsx   |  2 +-
 .../ui/components/panels/my-groups-panel.tsx   |  1 -
 .../ui/components/panels/new-event-panel.tsx   |  1 -
 .../ui/components/panels/new-group-panel.tsx   |  1 -
 .../components/panels/sign-up-panel.test.tsx   |  1 -
 .../ui/components/panels/sign-up-panel.tsx     |  1 -
 .../panels/suggested-groups-panel.tsx          |  1 -
 src/features/ui/components/pending-status.tsx  |  1 -
 .../ui/components/pinned-accounts-panel.tsx    |  2 +-
 src/features/ui/components/poll-preview.tsx    |  1 -
 .../ui/components/profile-dropdown.tsx         |  2 +-
 .../components/profile-familiar-followers.tsx  |  2 +-
 src/features/ui/components/profile-field.tsx   |  1 -
 .../ui/components/profile-fields-panel.tsx     |  1 -
 .../ui/components/profile-info-panel.tsx       |  1 -
 .../ui/components/profile-media-panel.tsx      |  2 +-
 src/features/ui/components/profile-stats.tsx   |  1 -
 src/features/ui/components/promo-panel.tsx     |  1 -
 .../ui/components/subscribe-button.test.tsx    |  1 -
 .../ui/components/subscription-button.tsx      |  1 -
 src/features/ui/components/theme-selector.tsx  |  2 +-
 src/features/ui/components/theme-toggle.tsx    |  1 -
 src/features/ui/components/timeline.tsx        |  2 +-
 .../ui/components/trends-panel.test.tsx        |  1 -
 src/features/ui/components/trends-panel.tsx    |  1 -
 src/features/ui/components/user-panel.tsx      |  1 -
 .../ui/components/who-to-follow-panel.tsx      |  1 -
 src/features/ui/components/zoomable-image.tsx  |  4 ++--
 src/features/ui/index.tsx                      |  2 +-
 src/features/ui/util/global-hotkeys.tsx        |  2 +-
 src/features/ui/util/optional-motion.tsx       |  1 -
 src/features/ui/util/react-router-helpers.tsx  |  2 +-
 src/features/ui/util/reduced-motion.tsx        |  1 -
 src/features/video/index.tsx                   |  2 +-
 .../zap/components/zap-button/zap-button.tsx   |  4 ++--
 .../zap/components/zap-pay-request-form.tsx    |  2 +-
 .../zap/components/zap-split-account-item.tsx  |  2 +-
 src/hooks/useDraggedFiles.ts                   |  2 +-
 src/hooks/useOnScreen.ts                       |  2 +-
 src/init/soapbox-head.tsx                      |  4 ++--
 src/init/soapbox-load.tsx                      |  2 +-
 src/init/soapbox-mount.tsx                     |  8 ++++----
 src/init/soapbox.tsx                           |  1 -
 src/jest/test-helpers.tsx                      |  2 +-
 src/main.tsx                                   |  1 -
 src/pages/admin-page.tsx                       |  1 -
 src/pages/chats-page.tsx                       |  1 -
 src/pages/default-page.tsx                     |  1 -
 src/pages/empty-page.tsx                       |  1 -
 src/pages/event-page.tsx                       |  1 -
 src/pages/events-page.tsx                      |  1 -
 src/pages/group-page.tsx                       |  2 +-
 src/pages/groups-page.tsx                      |  1 -
 src/pages/groups-pending-page.tsx              |  1 -
 src/pages/home-page.tsx                        |  2 +-
 src/pages/landing-page.tsx                     |  1 -
 src/pages/manage-groups-page.tsx               |  1 -
 src/pages/profile-page.tsx                     |  1 -
 src/pages/remote-instance-page.tsx             |  1 -
 src/pages/search-page.tsx                      |  1 -
 src/pages/status-page.tsx                      |  1 -
 src/pages/wide-page.tsx                        |  1 -
 src/toast.test.tsx                             |  1 -
 src/toast.tsx                                  |  1 -
 src/utils/numbers.test.tsx                     |  1 -
 src/utils/numbers.tsx                          |  1 -
 tsconfig.json                                  |  2 +-
 665 files changed, 463 insertions(+), 821 deletions(-)

diff --git a/src/actions/moderation.tsx b/src/actions/moderation.tsx
index a01d9f4fd..e461fe011 100644
--- a/src/actions/moderation.tsx
+++ b/src/actions/moderation.tsx
@@ -2,7 +2,6 @@ import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
 import userOffIcon from '@tabler/icons/outline/user-off.svg';
-import React from 'react';
 import { defineMessages, IntlShape } from 'react-intl';
 
 import { fetchAccountByUsername } from 'soapbox/actions/accounts';
diff --git a/src/components/__mocks__/react-inlinesvg.tsx b/src/components/__mocks__/react-inlinesvg.tsx
index f9a7cd892..7169c13a7 100644
--- a/src/components/__mocks__/react-inlinesvg.tsx
+++ b/src/components/__mocks__/react-inlinesvg.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IInlineSVG {
   loader?: JSX.Element;
diff --git a/src/components/account-search.tsx b/src/components/account-search.tsx
index 9dbac4fbb..673cd5d66 100644
--- a/src/components/account-search.tsx
+++ b/src/components/account-search.tsx
@@ -1,7 +1,7 @@
 import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
diff --git a/src/components/account.test.tsx b/src/components/account.test.tsx
index ea4cf3105..ef1c4cf74 100644
--- a/src/components/account.test.tsx
+++ b/src/components/account.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';
diff --git a/src/components/account.tsx b/src/components/account.tsx
index 5f2244b43..e19936af1 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -1,5 +1,5 @@
 import pencilIcon from '@tabler/icons/outline/pencil.svg';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
diff --git a/src/components/animated-number.tsx b/src/components/animated-number.tsx
index ea5a82411..4fbe7eff2 100644
--- a/src/components/animated-number.tsx
+++ b/src/components/animated-number.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedNumber } from 'react-intl';
 import { TransitionMotion, spring } from 'react-motion';
 
diff --git a/src/components/announcements/announcement-content.tsx b/src/components/announcements/announcement-content.tsx
index 07908c9b9..c1f8fb5d9 100644
--- a/src/components/announcements/announcement-content.tsx
+++ b/src/components/announcements/announcement-content.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { getTextDirection } from 'soapbox/utils/rtl';
diff --git a/src/components/announcements/announcement.tsx b/src/components/announcements/announcement.tsx
index 0bacdd60c..47a4d420e 100644
--- a/src/components/announcements/announcement.tsx
+++ b/src/components/announcements/announcement.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedDate } from 'react-intl';
 
 import { Stack, Text } from 'soapbox/components/ui';
diff --git a/src/components/announcements/announcements-panel.tsx b/src/components/announcements/announcements-panel.tsx
index 966df4479..5ef896b70 100644
--- a/src/components/announcements/announcements-panel.tsx
+++ b/src/components/announcements/announcements-panel.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactSwipeableViews from 'react-swipeable-views';
 import { createSelector } from 'reselect';
diff --git a/src/components/announcements/emoji.tsx b/src/components/announcements/emoji.tsx
index 1f6f8ed18..862014e13 100644
--- a/src/components/announcements/emoji.tsx
+++ b/src/components/announcements/emoji.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { useSettings } from 'soapbox/hooks';
diff --git a/src/components/announcements/reaction.tsx b/src/components/announcements/reaction.tsx
index 2bfdb8120..23a6d1ef6 100644
--- a/src/components/announcements/reaction.tsx
+++ b/src/components/announcements/reaction.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { useAnnouncements } from 'soapbox/api/hooks/announcements';
 import AnimatedNumber from 'soapbox/components/animated-number';
diff --git a/src/components/announcements/reactions-bar.tsx b/src/components/announcements/reactions-bar.tsx
index 694e1ea2f..ea778d408 100644
--- a/src/components/announcements/reactions-bar.tsx
+++ b/src/components/announcements/reactions-bar.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
 import { useAnnouncements } from 'soapbox/api/hooks/announcements';
diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx
index 6ac0c0e30..17fc301dc 100644
--- a/src/components/attachment-thumbs.tsx
+++ b/src/components/attachment-thumbs.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
diff --git a/src/components/authorize-reject-buttons.tsx b/src/components/authorize-reject-buttons.tsx
index fcf80d1ef..c06ddb2be 100644
--- a/src/components/authorize-reject-buttons.tsx
+++ b/src/components/authorize-reject-buttons.tsx
@@ -2,7 +2,7 @@ import playerStopFilledIcon from '@tabler/icons/filled/player-stop.svg';
 import checkIcon from '@tabler/icons/outline/check.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, IconButton, Text } from 'soapbox/components/ui';
diff --git a/src/components/autosuggest-account-input.tsx b/src/components/autosuggest-account-input.tsx
index 1b7c05499..843f419bb 100644
--- a/src/components/autosuggest-account-input.tsx
+++ b/src/components/autosuggest-account-input.tsx
@@ -1,6 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 
 import { accountSearch } from 'soapbox/actions/accounts';
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
diff --git a/src/components/autosuggest-emoji.test.tsx b/src/components/autosuggest-emoji.test.tsx
index e498244de..265866c31 100644
--- a/src/components/autosuggest-emoji.test.tsx
+++ b/src/components/autosuggest-emoji.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx
index 26f507b72..6eaaf4110 100644
--- a/src/components/autosuggest-emoji.tsx
+++ b/src/components/autosuggest-emoji.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { isCustomEmoji } from 'soapbox/features/emoji';
 import unicodeMapping from 'soapbox/features/emoji/mapping';
diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index 7cf928419..5b9bd6373 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
 import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';
diff --git a/src/components/autosuggest-location.tsx b/src/components/autosuggest-location.tsx
index c885e05a7..026af6b47 100644
--- a/src/components/autosuggest-location.tsx
+++ b/src/components/autosuggest-location.tsx
@@ -2,7 +2,6 @@ import buildingCommunityIcon from '@tabler/icons/outline/building-community.svg'
 import homeIcon from '@tabler/icons/outline/home-2.svg';
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import roadIcon from '@tabler/icons/outline/road.svg';
-import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';
 
diff --git a/src/components/avatar-stack.tsx b/src/components/avatar-stack.tsx
index e9193d344..4636e3a5f 100644
--- a/src/components/avatar-stack.tsx
+++ b/src/components/avatar-stack.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
 
 import { Avatar, HStack } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/src/components/badge.test.tsx b/src/components/badge.test.tsx
index f41cae951..ea858fb34 100644
--- a/src/components/badge.test.tsx
+++ b/src/components/badge.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/badge.tsx b/src/components/badge.tsx
index e5476ca81..8f9d6112b 100644
--- a/src/components/badge.tsx
+++ b/src/components/badge.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { hexToHsl } from 'soapbox/utils/theme';
 
diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index b816d047e..06c9459ac 100644
--- a/src/components/big-card.tsx
+++ b/src/components/big-card.tsx
@@ -1,5 +1,4 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 
 import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
diff --git a/src/components/birthday-input.tsx b/src/components/birthday-input.tsx
index 0c4700d83..bec19d1f5 100644
--- a/src/components/birthday-input.tsx
+++ b/src/components/birthday-input.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useInstance, useFeatures } from 'soapbox/hooks';
diff --git a/src/components/birthday-panel.tsx b/src/components/birthday-panel.tsx
index f1f31d94e..dd4da5d42 100644
--- a/src/components/birthday-panel.tsx
+++ b/src/components/birthday-panel.tsx
@@ -1,5 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
@@ -37,7 +37,7 @@ const BirthdayPanel = ({ limit }: IBirthdayPanel) => {
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleFetchBirthdayReminders();
 
     return () => {
diff --git a/src/components/blurhash.tsx b/src/components/blurhash.tsx
index c492b0e05..7cfa6e94c 100644
--- a/src/components/blurhash.tsx
+++ b/src/components/blurhash.tsx
@@ -1,5 +1,5 @@
 import { decode } from 'blurhash';
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect, memo } from 'react';
 
 interface IBlurhash {
   /** Hash to render */
@@ -56,4 +56,4 @@ const Blurhash: React.FC<IBlurhash> = ({
   );
 };
 
-export default React.memo(Blurhash);
+export default memo(Blurhash);
diff --git a/src/components/copyable-input.tsx b/src/components/copyable-input.tsx
index 90089927c..036209db7 100644
--- a/src/components/copyable-input.tsx
+++ b/src/components/copyable-input.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, HStack, Input } from './ui';
diff --git a/src/components/display-name-inline.tsx b/src/components/display-name-inline.tsx
index 0f754fe07..9c6369a86 100644
--- a/src/components/display-name-inline.tsx
+++ b/src/components/display-name-inline.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { useSoapboxConfig } from 'soapbox/hooks';
 
diff --git a/src/components/display-name.test.tsx b/src/components/display-name.test.tsx
index 60cd35590..cfc10a9ed 100644
--- a/src/components/display-name.test.tsx
+++ b/src/components/display-name.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx
index 130e1f0df..a72a32d2d 100644
--- a/src/components/display-name.tsx
+++ b/src/components/display-name.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import { useSoapboxConfig } from 'soapbox/hooks';
diff --git a/src/components/domain.tsx b/src/components/domain.tsx
index 77b71189d..a25a2ed06 100644
--- a/src/components/domain.tsx
+++ b/src/components/domain.tsx
@@ -1,5 +1,4 @@
 import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { unblockDomain } from 'soapbox/actions/domain-blocks';
diff --git a/src/components/dropdown-menu/dropdown-menu-item.tsx b/src/components/dropdown-menu/dropdown-menu-item.tsx
index e2ac9f333..2db996589 100644
--- a/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { Counter, Icon } from '../ui';
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 92fecd6c9..59bba080d 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -2,7 +2,7 @@ import { offset, Placement, useFloating, flip, arrow, shift } from '@floating-ui
 import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 'soapbox/actions/dropdown-menu';
@@ -269,7 +269,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
   return (
     <>
       {children ? (
-        React.cloneElement(children, {
+        cloneElement(children, {
           disabled,
           onClick: handleClick,
           onKeyPress: handleKeyPress,
diff --git a/src/components/emoji-graphic.tsx b/src/components/emoji-graphic.tsx
index 59bba2528..02abea12b 100644
--- a/src/components/emoji-graphic.tsx
+++ b/src/components/emoji-graphic.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Emoji from 'soapbox/components/ui/emoji/emoji';
 
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index 50f06d9ba..f22d80d8a 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -1,7 +1,6 @@
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import userIcon from '@tabler/icons/outline/user.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import EventActionButton from 'soapbox/features/event/components/event-action-button';
diff --git a/src/components/extended-video-player.tsx b/src/components/extended-video-player.tsx
index e0512588c..bbab91384 100644
--- a/src/components/extended-video-player.tsx
+++ b/src/components/extended-video-player.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { isIOS } from 'soapbox/is-mobile';
 
diff --git a/src/components/fork-awesome-icon.tsx b/src/components/fork-awesome-icon.tsx
index 09d5c8edb..b4a39a8a7 100644
--- a/src/components/fork-awesome-icon.tsx
+++ b/src/components/fork-awesome-icon.tsx
@@ -6,7 +6,6 @@
  */
 
 import clsx from 'clsx';
-import React from 'react';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
   id: string;
diff --git a/src/components/gdpr-banner.tsx b/src/components/gdpr-banner.tsx
index 98cf3ac53..366b43359 100644
--- a/src/components/gdpr-banner.tsx
+++ b/src/components/gdpr-banner.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/components/group-card.tsx b/src/components/group-card.tsx
index ebcb77161..dc06d7fd8 100644
--- a/src/components/group-card.tsx
+++ b/src/components/group-card.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import GroupHeaderImage from 'soapbox/features/group/components/group-header-image';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
diff --git a/src/components/groups/group-avatar.tsx b/src/components/groups/group-avatar.tsx
index 13b40d237..856c63fa7 100644
--- a/src/components/groups/group-avatar.tsx
+++ b/src/components/groups/group-avatar.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import { GroupRoles } from 'soapbox/schemas/group-member';
 
diff --git a/src/components/groups/popover/group-popover.tsx b/src/components/groups/popover/group-popover.tsx
index 6079daab6..232a37278 100644
--- a/src/components/groups/popover/group-popover.tsx
+++ b/src/components/groups/popover/group-popover.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, matchPath, useHistory } from 'react-router-dom';
 
diff --git a/src/components/hashtag-link.tsx b/src/components/hashtag-link.tsx
index f0052d9f9..247b3bc34 100644
--- a/src/components/hashtag-link.tsx
+++ b/src/components/hashtag-link.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Link from './link';
 
diff --git a/src/components/hashtag.tsx b/src/components/hashtag.tsx
index 690661515..098993c1c 100644
--- a/src/components/hashtag.tsx
+++ b/src/components/hashtag.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
diff --git a/src/components/helmet.tsx b/src/components/helmet.tsx
index 64b5c3fcf..0412bb6d5 100644
--- a/src/components/helmet.tsx
+++ b/src/components/helmet.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo, useEffect } from 'react';
 import { Helmet as ReactHelmet } from 'react-helmet';
 
 import { useStatContext } from 'soapbox/contexts/stat-context';
@@ -25,7 +25,7 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
   const unreadCount = useAppSelector((state) => getNotifTotals(state) + unreadChatsCount);
   const { demetricator } = useSettings();
 
-  const hasUnreadNotifications = React.useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);
+  const hasUnreadNotifications = useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);
 
   const addCounter = (string: string) => {
     return hasUnreadNotifications ? `(${unreadCount}) ${string}` : string;
@@ -39,7 +39,7 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     updateFaviconBadge();
   }, [unreadCount, demetricator]);
 
diff --git a/src/components/hover-ref-wrapper.tsx b/src/components/hover-ref-wrapper.tsx
index 8d0aa1ecd..d822d1b0c 100644
--- a/src/components/hover-ref-wrapper.tsx
+++ b/src/components/hover-ref-wrapper.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
 import {
diff --git a/src/components/hover-status-wrapper.tsx b/src/components/hover-status-wrapper.tsx
index 685dbf3d9..5f6ff4420 100644
--- a/src/components/hover-status-wrapper.tsx
+++ b/src/components/hover-status-wrapper.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
 import {
diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx
index 4eb0dccca..0cd96dec1 100644
--- a/src/components/icon-button.tsx
+++ b/src/components/icon-button.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import Icon from 'soapbox/components/icon';
 
diff --git a/src/components/icon-with-counter.tsx b/src/components/icon-with-counter.tsx
index 5cac95290..4939375ce 100644
--- a/src/components/icon-with-counter.tsx
+++ b/src/components/icon-with-counter.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Icon, { IIcon } from 'soapbox/components/icon';
 import { Counter } from 'soapbox/components/ui';
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
index 1f1536ef9..c5d4638a3 100644
--- a/src/components/icon.tsx
+++ b/src/components/icon.tsx
@@ -4,7 +4,6 @@
  */
 
 import clsx from 'clsx';
-import React from 'react';
 import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
 export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/src/components/landing-gradient.tsx b/src/components/landing-gradient.tsx
index ed27fe214..a1117a9ff 100644
--- a/src/components/landing-gradient.tsx
+++ b/src/components/landing-gradient.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
diff --git a/src/components/link.tsx b/src/components/link.tsx
index 51bb91300..8e9c11be2 100644
--- a/src/components/link.tsx
+++ b/src/components/link.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link as Comp, LinkProps } from 'react-router-dom';
 
 const Link = (props: LinkProps) => (
diff --git a/src/components/list.tsx b/src/components/list.tsx
index 5de7b3efa..20d662345 100644
--- a/src/components/list.tsx
+++ b/src/components/list.tsx
@@ -1,7 +1,7 @@
 import checkIcon from '@tabler/icons/outline/check.svg';
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { Children, cloneElement, isValidElement, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
 import { SelectDropdown } from '../features/forms';
@@ -38,12 +38,12 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
 
   const LabelComp = to || onClick || onSelect ? 'span' : 'label';
 
-  const renderChildren = React.useCallback(() => {
-    return React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
+  const renderChildren = useCallback(() => {
+    return Children.map(children, (child) => {
+      if (isValidElement(child)) {
         const isSelect = child.type === SelectDropdown || child.type === Select;
 
-        return React.cloneElement(child, {
+        return cloneElement(child, {
           // @ts-ignore
           id: domId,
           className: clsx({
diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx
index f6a42a341..2be5f19d9 100644
--- a/src/components/load-gap.tsx
+++ b/src/components/load-gap.tsx
@@ -1,5 +1,4 @@
 import dotsIcon from '@tabler/icons/outline/dots.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
diff --git a/src/components/load-more.tsx b/src/components/load-more.tsx
index c356751b9..359f948df 100644
--- a/src/components/load-more.tsx
+++ b/src/components/load-more.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button } from 'soapbox/components/ui';
diff --git a/src/components/loading-screen.tsx b/src/components/loading-screen.tsx
index 3b86fd2e0..2a91e7fe5 100644
--- a/src/components/loading-screen.tsx
+++ b/src/components/loading-screen.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
 import { Spinner } from 'soapbox/components/ui';
diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index 2eb1b2eb3..2415c91c0 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -3,7 +3,7 @@ import searchIcon from '@tabler/icons/outline/search.svg';
 import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { locationSearch } from 'soapbox/actions/events';
diff --git a/src/components/markup.tsx b/src/components/markup.tsx
index e20dcb3a2..bdc91700b 100644
--- a/src/components/markup.tsx
+++ b/src/components/markup.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import Text, { IText } from './ui/text/text';
 import './markup.css';
@@ -7,7 +7,7 @@ interface IMarkup extends IText {
 }
 
 /** Styles HTML markup returned by the API, such as in account bios and statuses. */
-const Markup = React.forwardRef<any, IMarkup>((props, ref) => {
+const Markup = forwardRef<any, IMarkup>((props, ref) => {
   return (
     <Text ref={ref} {...props} data-markup />
   );
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 7648850d9..5f6273037 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -1,7 +1,7 @@
 import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
 import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
-import React, { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
+import { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import StillImage from 'soapbox/components/still-image';
@@ -17,7 +17,7 @@ import SvgIcon from './ui/icon/svg-icon';
 
 import type { List as ImmutableList } from 'immutable';
 
-// const Gameboy = React.lazy(() => import('./gameboy'));
+// const Gameboy = lazy(() => import('./gameboy'));
 
 const ATTACHMENT_LIMIT = 4;
 const MAX_FILENAME_LENGTH = 45;
diff --git a/src/components/mention.tsx b/src/components/mention.tsx
index 39e892913..ffb024256 100644
--- a/src/components/mention.tsx
+++ b/src/components/mention.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { shortenNostr } from 'soapbox/utils/nostr';
diff --git a/src/components/missing-indicator.tsx b/src/components/missing-indicator.tsx
index 69bade6c2..7ff67dd23 100644
--- a/src/components/missing-indicator.tsx
+++ b/src/components/missing-indicator.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Card, CardBody, Stack, Text } from './ui';
diff --git a/src/components/modal-root.tsx b/src/components/modal-root.tsx
index cd4daa142..1b4ab3278 100644
--- a/src/components/modal-root.tsx
+++ b/src/components/modal-root.tsx
@@ -1,6 +1,6 @@
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/components/navlinks.tsx b/src/components/navlinks.tsx
index 448bfff2b..81aa37ad5 100644
--- a/src/components/navlinks.tsx
+++ b/src/components/navlinks.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Text } from 'soapbox/components/ui';
diff --git a/src/components/outline-box.tsx b/src/components/outline-box.tsx
index 0f56c21ae..4e599beef 100644
--- a/src/components/outline-box.tsx
+++ b/src/components/outline-box.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
diff --git a/src/components/pending-items-row.tsx b/src/components/pending-items-row.tsx
index 5952a3b9a..5fc0a7637 100644
--- a/src/components/pending-items-row.tsx
+++ b/src/components/pending-items-row.tsx
@@ -1,7 +1,6 @@
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import exclamationCircleIcon from '@tabler/icons/outline/exclamation-circle.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/components/polls/poll-footer.test.tsx b/src/components/polls/poll-footer.test.tsx
index 5526ed35f..06a4424a5 100644
--- a/src/components/polls/poll-footer.test.tsx
+++ b/src/components/polls/poll-footer.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { beforeEach, describe, expect, it } from 'vitest';
diff --git a/src/components/polls/poll-footer.tsx b/src/components/polls/poll-footer.tsx
index 09798f828..827bb8128 100644
--- a/src/components/polls/poll-footer.tsx
+++ b/src/components/polls/poll-footer.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchPoll, vote } from 'soapbox/actions/polls';
diff --git a/src/components/polls/poll-option.tsx b/src/components/polls/poll-option.tsx
index df711263b..049960750 100644
--- a/src/components/polls/poll-option.tsx
+++ b/src/components/polls/poll-option.tsx
@@ -1,7 +1,6 @@
 import checkIcon from '@tabler/icons/outline/check.svg';
 import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
 
diff --git a/src/components/polls/poll.tsx b/src/components/polls/poll.tsx
index b7f75424a..add1c349f 100644
--- a/src/components/polls/poll.tsx
+++ b/src/components/polls/poll.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index 2f9a2e436..445678c27 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -4,7 +4,7 @@ import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
 import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import { HStack, Stack, Text, Icon } from 'soapbox/components/ui';
diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index 91232dce6..01039de16 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -1,7 +1,7 @@
 import { useFloating } from '@floating-ui/react';
 import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/components/progress-circle.tsx b/src/components/progress-circle.tsx
index 1adb3f46e..b2f78e1c8 100644
--- a/src/components/progress-circle.tsx
+++ b/src/components/progress-circle.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IProgressCircle {
   progress: number;
diff --git a/src/components/pull-to-refresh.tsx b/src/components/pull-to-refresh.tsx
index 829441b37..45e6fe443 100644
--- a/src/components/pull-to-refresh.tsx
+++ b/src/components/pull-to-refresh.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import PTRComponent from 'react-simple-pull-to-refresh';
 
 import { Spinner } from 'soapbox/components/ui';
diff --git a/src/components/pullable.tsx b/src/components/pullable.tsx
index e92a76ea2..861863ee5 100644
--- a/src/components/pullable.tsx
+++ b/src/components/pullable.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import PullToRefresh from './pull-to-refresh';
 
diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx
index b19693261..b310fd358 100644
--- a/src/components/quoted-status-indicator.tsx
+++ b/src/components/quoted-status-indicator.tsx
@@ -1,5 +1,5 @@
 import quoteIcon from '@tabler/icons/outline/quote.svg';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/src/components/quoted-status.test.tsx b/src/components/quoted-status.test.tsx
index fb9360b81..6f29e8748 100644
--- a/src/components/quoted-status.test.tsx
+++ b/src/components/quoted-status.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen, rootState } from 'soapbox/jest/test-helpers';
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index 569d81503..42a84a238 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -1,6 +1,6 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/components/radio.tsx b/src/components/radio.tsx
index 9c1714e9d..b5e2bee50 100644
--- a/src/components/radio.tsx
+++ b/src/components/radio.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+
+import { Children, cloneElement } from 'react';
 
 import List, { ListItem } from './list';
 
@@ -8,8 +9,8 @@ interface IRadioGroup {
 }
 
 const RadioGroup = ({ onChange, children }: IRadioGroup) => {
-  const childrenWithProps = React.Children.map(children, child =>
-    React.cloneElement(child, { onChange }),
+  const childrenWithProps = Children.map(children, child =>
+    cloneElement(child, { onChange }),
   );
 
   return <List>{childrenWithProps}</List>;
diff --git a/src/components/relative-timestamp.tsx b/src/components/relative-timestamp.tsx
index c9b2780f2..a1ea72123 100644
--- a/src/components/relative-timestamp.tsx
+++ b/src/components/relative-timestamp.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import { injectIntl, defineMessages, IntlShape, FormatDateOptions } from 'react-intl';
 
 import Text, { IText } from './ui/text/text';
@@ -124,7 +124,7 @@ interface RelativeTimestampState {
 }
 
 /** Displays a timestamp compared to the current time, eg "1m" for one minute ago. */
-class RelativeTimestamp extends React.Component<RelativeTimestampProps, RelativeTimestampState> {
+class RelativeTimestamp extends Component<RelativeTimestampProps, RelativeTimestampState> {
 
   _timer: NodeJS.Timeout | undefined;
 
diff --git a/src/components/safe-embed.tsx b/src/components/safe-embed.tsx
index 3e2668648..acb93d67c 100644
--- a/src/components/safe-embed.tsx
+++ b/src/components/safe-embed.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface ISafeEmbed {
   /** Styles for the outer frame element. */
diff --git a/src/components/scroll-context.tsx b/src/components/scroll-context.tsx
index 707ef7e76..f5ffeeb60 100644
--- a/src/components/scroll-context.tsx
+++ b/src/components/scroll-context.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 interface IScrollContext {
diff --git a/src/components/scroll-top-button.test.tsx b/src/components/scroll-top-button.test.tsx
index f7c100cc8..c6cb517ff 100644
--- a/src/components/scroll-top-button.test.tsx
+++ b/src/components/scroll-top-button.test.tsx
@@ -1,5 +1,4 @@
 
-import React from 'react';
 import { defineMessages } from 'react-intl';
 import { describe, expect, it } from 'vitest';
 
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 31b32ceb6..5e564aa2d 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -1,6 +1,6 @@
 import arrowBarToUpIcon from '@tabler/icons/outline/arrow-bar-to-up.svg';
 import throttle from 'lodash/throttle';
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
 
 import { Icon, Text } from 'soapbox/components/ui';
diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx
index 8a352034a..33ccb52ad 100644
--- a/src/components/scrollable-list.tsx
+++ b/src/components/scrollable-list.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import { useEffect, useRef, useMemo, useCallback, forwardRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso';
 
@@ -30,7 +30,7 @@ const Item: Components<JSX.Element, Context>['Item'] = ({ context, ...rest }) =>
 
 /** Custom Virtuoso List component for the outer container. */
 // Ensure the className winds up here
-const List: Components<JSX.Element, Context>['List'] = React.forwardRef((props, ref) => {
+const List: Components<JSX.Element, Context>['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} className={context?.listClassName} {...rest} />;
 });
@@ -84,7 +84,7 @@ interface IScrollableList extends VirtuosoProps<any, any> {
 }
 
 /** Legacy ScrollableList with Virtuoso for backwards-compatibility. */
-const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
+const ScrollableList = forwardRef<VirtuosoHandle, IScrollableList>(({
   scrollKey,
   prepend = null,
   alwaysPrepend,
diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
index 292928aaf..07dee7f79 100644
--- a/src/components/sentry-feedback-form.tsx
+++ b/src/components/sentry-feedback-form.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Textarea, Form, Button, FormGroup, FormActions, Text } from 'soapbox/components/ui';
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 2e4d5bd64..bf2dc3108 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -16,9 +16,8 @@ import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import userIcon from '@tabler/icons/outline/user.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-/* eslint-disable jsx-a11y/interactive-supports-focus */
 import clsx from 'clsx';
-import React, { useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, NavLink } from 'react-router-dom';
 
@@ -110,9 +109,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const { instance } = useInstance();
   const settingsNotifications = useSettingsNotifications();
 
-  const closeButtonRef = React.useRef(null);
+  const closeButtonRef = useRef(null);
 
-  const [switcher, setSwitcher] = React.useState(false);
+  const [switcher, setSwitcher] = useState(false);
 
   const onClose = () => dispatch(closeSidebar());
 
@@ -147,7 +146,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
     </a>
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchOwnAccounts());
   }, []);
 
diff --git a/src/components/sidebar-navigation-link.tsx b/src/components/sidebar-navigation-link.tsx
index e5aca128e..944985704 100644
--- a/src/components/sidebar-navigation-link.tsx
+++ b/src/components/sidebar-navigation-link.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import { Icon, Text } from './ui';
@@ -22,7 +22,7 @@ interface ISidebarNavigationLink {
 }
 
 /** Desktop sidebar navigation link. */
-const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
+const SidebarNavigationLink = forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
   const { icon, activeIcon, text, to = '', count, countMax, onClick } = props;
   const { pathname } = useLocation();
 
diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx
index da887902d..68783d639 100644
--- a/src/components/sidebar-navigation.tsx
+++ b/src/components/sidebar-navigation.tsx
@@ -20,7 +20,6 @@ import settingsIcon from '@tabler/icons/outline/settings.svg';
 import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import userIcon from '@tabler/icons/outline/user.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { Stack } from 'soapbox/components/ui';
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 3e4712a4c..27b99dd1d 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -1,4 +1,4 @@
-import React, { type ErrorInfo, useRef, useState } from 'react';
+import { type ErrorInfo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/src/components/site-logo.tsx b/src/components/site-logo.tsx
index cc107b266..9a21043a9 100644
--- a/src/components/site-logo.tsx
+++ b/src/components/site-logo.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import soapboxLogoWhiteSrc from 'soapbox/assets/images/soapbox-logo-white.svg';
 import soapboxLogoSrc from 'soapbox/assets/images/soapbox-logo.svg';
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 4c2add1be..e80cd1993 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -30,7 +30,6 @@ import thumbUpIcon from '@tabler/icons/outline/thumb-up.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import uploadIcon from '@tabler/icons/outline/upload.svg';
 import volume3Icon from '@tabler/icons/outline/volume-3.svg';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
diff --git a/src/components/status-action-button.tsx b/src/components/status-action-button.tsx
index c435227a7..e175b233f 100644
--- a/src/components/status-action-button.tsx
+++ b/src/components/status-action-button.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { Text, Icon, Emoji } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
@@ -38,7 +38,7 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   theme?: 'default' | 'inverse';
 }
 
-const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
+const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
   const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', ...filteredProps } = props;
 
   const renderIcon = () => {
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 3f7c4011b..24b1ee4d7 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -1,7 +1,7 @@
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
 import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser';
-import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
+import { useState, useRef, useLayoutEffect, useMemo, memo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
@@ -202,4 +202,4 @@ const StatusContent: React.FC<IStatusContent> = ({
   }
 };
 
-export default React.memo(StatusContent);
+export default memo(StatusContent);
diff --git a/src/components/status-hover-card.tsx b/src/components/status-hover-card.tsx
index dbf1d8bd2..7daa342f5 100644
--- a/src/components/status-hover-card.tsx
+++ b/src/components/status-hover-card.tsx
@@ -1,6 +1,6 @@
 import { useFloating } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import {
diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx
index 838997435..769c1cdf5 100644
--- a/src/components/status-list.tsx
+++ b/src/components/status-list.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useRef, useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import LoadGap from 'soapbox/components/load-gap';
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index 2c96c0078..cc82eed80 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
diff --git a/src/components/status-reaction-wrapper.tsx b/src/components/status-reaction-wrapper.tsx
index 4bac8c878..db3109ea4 100644
--- a/src/components/status-reaction-wrapper.tsx
+++ b/src/components/status-reaction-wrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, cloneElement } from 'react';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
 import { openModal } from 'soapbox/actions/modals';
@@ -100,7 +100,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
 
   return (
     <div className='relative' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      {React.cloneElement(children, {
+      {cloneElement(children, {
         onClick: handleClick,
         ref: setReferenceElement,
       })}
diff --git a/src/components/status-reply-mentions.tsx b/src/components/status-reply-mentions.tsx
index 75eb8eab4..06df6338c 100644
--- a/src/components/status-reply-mentions.tsx
+++ b/src/components/status-reply-mentions.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/components/status.test.tsx b/src/components/status.test.tsx
index 2cbd80ad1..e78d805f4 100644
--- a/src/components/status.test.tsx
+++ b/src/components/status.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';
diff --git a/src/components/status.tsx b/src/components/status.tsx
index 016153563..577bdd2f9 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -2,7 +2,7 @@ import circlesIcon from '@tabler/icons/outline/circles.svg';
 import pinnedIcon from '@tabler/icons/outline/pinned.svg';
 import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
diff --git a/src/components/statuses/sensitive-content-overlay.test.tsx b/src/components/statuses/sensitive-content-overlay.test.tsx
index a9caff8df..7c3d6a35f 100644
--- a/src/components/statuses/sensitive-content-overlay.test.tsx
+++ b/src/components/statuses/sensitive-content-overlay.test.tsx
@@ -1,6 +1,5 @@
 
 import { Map as ImmutableMap } from 'immutable';
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { fireEvent, render, rootState, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index 3c71a5cd2..d1aedcf67 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -4,7 +4,7 @@ import eyeIcon from '@tabler/icons/outline/eye.svg';
 import headsetIcon from '@tabler/icons/outline/headset.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
-import React, { useEffect, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
@@ -37,7 +37,7 @@ interface ISensitiveContentOverlay {
   visible?: boolean;
 }
 
-const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
+const SensitiveContentOverlay = forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
   const { onToggleVisibility, status } = props;
 
   const { account } = useOwnAccount();
diff --git a/src/components/statuses/status-info.tsx b/src/components/statuses/status-info.tsx
index b97513177..ffeafcecb 100644
--- a/src/components/statuses/status-info.tsx
+++ b/src/components/statuses/status-info.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { HStack, Text } from '../ui';
 
diff --git a/src/components/still-image.tsx b/src/components/still-image.tsx
index 191d2831e..3f788de12 100644
--- a/src/components/still-image.tsx
+++ b/src/components/still-image.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import { useSettings } from 'soapbox/hooks';
 
diff --git a/src/components/thumb-navigation-link.tsx b/src/components/thumb-navigation-link.tsx
index f824392e5..e395d5884 100644
--- a/src/components/thumb-navigation-link.tsx
+++ b/src/components/thumb-navigation-link.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import IconWithCounter from 'soapbox/components/icon-with-counter';
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index 35008843c..21f4805f2 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -9,7 +9,6 @@ import homeIcon from '@tabler/icons/outline/home.svg';
 import mailIcon from '@tabler/icons/outline/mail.svg';
 import messagesIcon from '@tabler/icons/outline/messages.svg';
 import searchIcon from '@tabler/icons/outline/search.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link';
diff --git a/src/components/tombstone.tsx b/src/components/tombstone.tsx
index faaa84ee0..b11142b94 100644
--- a/src/components/tombstone.tsx
+++ b/src/components/tombstone.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Text } from 'soapbox/components/ui';
diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx
index 86a996807..71b425d32 100644
--- a/src/components/translate-button.tsx
+++ b/src/components/translate-button.tsx
@@ -1,5 +1,4 @@
 import languageIcon from '@tabler/icons/outline/language.svg';
-import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses';
diff --git a/src/components/ui/accordion/accordion.tsx b/src/components/ui/accordion/accordion.tsx
index 577bf1234..ca301a813 100644
--- a/src/components/ui/accordion/accordion.tsx
+++ b/src/components/ui/accordion/accordion.tsx
@@ -2,7 +2,6 @@ import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
 import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
 import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import DropdownMenu from 'soapbox/components/dropdown-menu';
diff --git a/src/components/ui/avatar/avatar.test.tsx b/src/components/ui/avatar/avatar.test.tsx
index 907c97914..1bd9fb519 100644
--- a/src/components/ui/avatar/avatar.test.tsx
+++ b/src/components/ui/avatar/avatar.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/avatar/avatar.tsx b/src/components/ui/avatar/avatar.tsx
index 99627b5b2..7bdd0a52e 100644
--- a/src/components/ui/avatar/avatar.tsx
+++ b/src/components/ui/avatar/avatar.tsx
@@ -1,6 +1,6 @@
 import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import StillImage, { IStillImage } from 'soapbox/components/still-image';
 
@@ -21,7 +21,7 @@ const Avatar = (props: IAvatar) => {
 
   const handleLoadFailure = () => setIsAvatarMissing(true);
 
-  const style: React.CSSProperties = React.useMemo(() => ({
+  const style: React.CSSProperties = useMemo(() => ({
     width: size,
     height: size,
   }), [size]);
diff --git a/src/components/ui/banner/banner.tsx b/src/components/ui/banner/banner.tsx
index c0d489fe8..f809a6bc8 100644
--- a/src/components/ui/banner/banner.tsx
+++ b/src/components/ui/banner/banner.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IBanner {
   theme: 'frosted' | 'opaque';
diff --git a/src/components/ui/button/button.test.tsx b/src/components/ui/button/button.test.tsx
index b3ddddf2b..a28e1da05 100644
--- a/src/components/ui/button/button.test.tsx
+++ b/src/components/ui/button/button.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx
index 43c3fd740..09061ee3d 100644
--- a/src/components/ui/button/button.tsx
+++ b/src/components/ui/button/button.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
 import Icon from '../icon/icon';
@@ -36,7 +36,7 @@ interface IButton {
 }
 
 /** Customizable button element with various themes. */
-const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
+const Button = forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
   const {
     block = false,
     children,
@@ -69,7 +69,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     return <Icon src={icon} className='size-4' element={iconElement} />;
   };
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = useCallback((event) => {
     if (onClick && !disabled) {
       onClick(event);
     }
diff --git a/src/components/ui/card/card.test.tsx b/src/components/ui/card/card.test.tsx
index 9a1e74db4..a7b4609af 100644
--- a/src/components/ui/card/card.test.tsx
+++ b/src/components/ui/card/card.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card/card.tsx
index 31887948e..e7a811c80 100644
--- a/src/components/ui/card/card.tsx
+++ b/src/components/ui/card/card.tsx
@@ -1,6 +1,6 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
@@ -34,7 +34,7 @@ interface ICard {
 }
 
 /** An opaque backdrop to hold a collection of related elements. */
-const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'default', size = 'md', className, ...filteredProps }, ref): JSX.Element => (
+const Card = forwardRef<HTMLDivElement, ICard>(({ children, variant = 'default', size = 'md', className, ...filteredProps }, ref): JSX.Element => (
   <div
     ref={ref}
     {...filteredProps}
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel/carousel.tsx
index 1739587c4..4f2efd8ce 100644
--- a/src/components/ui/carousel/carousel.tsx
+++ b/src/components/ui/carousel/carousel.tsx
@@ -1,6 +1,6 @@
 import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useDimensions } from 'soapbox/hooks';
 
diff --git a/src/components/ui/checkbox/checkbox.tsx b/src/components/ui/checkbox/checkbox.tsx
index 4c20d688c..4025231fc 100644
--- a/src/components/ui/checkbox/checkbox.tsx
+++ b/src/components/ui/checkbox/checkbox.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 interface ICheckbox extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'id' | 'name' | 'onChange' | 'checked' | 'required'> { }
 
 /** A pretty checkbox input. */
-const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
+const Checkbox = forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
   return (
     <input
       {...props}
diff --git a/src/components/ui/column/column.test.tsx b/src/components/ui/column/column.test.tsx
index aef000973..de53e8d3e 100644
--- a/src/components/ui/column/column.test.tsx
+++ b/src/components/ui/column/column.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/column/column.tsx b/src/components/ui/column/column.tsx
index 3d7a738be..18b8d4c58 100644
--- a/src/components/ui/column/column.tsx
+++ b/src/components/ui/column/column.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Helmet from 'soapbox/components/helmet';
@@ -64,7 +64,7 @@ export interface IColumn {
 }
 
 /** A backdrop for the main section of the UI. */
-const Column = React.forwardRef<HTMLDivElement, IColumn>((props, ref): JSX.Element => {
+const Column = forwardRef<HTMLDivElement, IColumn>((props, ref): JSX.Element => {
   const { backHref, children, label, transparent = false, withHeader = true, className, bodyClassName, action, size } = props;
   const soapboxConfig = useSoapboxConfig();
   const [isScrolled, setIsScrolled] = useState(false);
diff --git a/src/components/ui/counter/counter.tsx b/src/components/ui/counter/counter.tsx
index 8f350f675..0f7edca8d 100644
--- a/src/components/ui/counter/counter.tsx
+++ b/src/components/ui/counter/counter.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
diff --git a/src/components/ui/datepicker/datepicker.test.tsx b/src/components/ui/datepicker/datepicker.test.tsx
index c75e6eb9f..745f226b2 100644
--- a/src/components/ui/datepicker/datepicker.test.tsx
+++ b/src/components/ui/datepicker/datepicker.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { queryAllByRole, render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/datepicker/datepicker.tsx b/src/components/ui/datepicker/datepicker.tsx
index ea9775bd4..b6e36a20c 100644
--- a/src/components/ui/datepicker/datepicker.tsx
+++ b/src/components/ui/datepicker/datepicker.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import Select from '../select/select';
diff --git a/src/components/ui/datetime/datetime.tsx b/src/components/ui/datetime/datetime.tsx
index bdf676840..ba24044b1 100644
--- a/src/components/ui/datetime/datetime.tsx
+++ b/src/components/ui/datetime/datetime.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Input from '../input/input';
 
diff --git a/src/components/ui/divider/divider.test.tsx b/src/components/ui/divider/divider.test.tsx
index fbff2c46a..62e827749 100644
--- a/src/components/ui/divider/divider.test.tsx
+++ b/src/components/ui/divider/divider.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/divider/divider.tsx b/src/components/ui/divider/divider.tsx
index 821f55fd6..f3f55c4fb 100644
--- a/src/components/ui/divider/divider.tsx
+++ b/src/components/ui/divider/divider.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Text from '../text/text';
 
diff --git a/src/components/ui/emoji-selector/emoji-selector.tsx b/src/components/ui/emoji-selector/emoji-selector.tsx
index 1ba4ee14f..e14ef4010 100644
--- a/src/components/ui/emoji-selector/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector/emoji-selector.tsx
@@ -1,7 +1,7 @@
 import { shift, useFloating, Placement, offset, OffsetOptions } from '@floating-ui/react';
 import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import EmojiComponent from 'soapbox/components/ui/emoji/emoji';
 import HStack from 'soapbox/components/ui/hstack/hstack';
diff --git a/src/components/ui/emoji/emoji.test.tsx b/src/components/ui/emoji/emoji.test.tsx
index 0cacea982..aaab7e1bf 100644
--- a/src/components/ui/emoji/emoji.test.tsx
+++ b/src/components/ui/emoji/emoji.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/emoji/emoji.tsx b/src/components/ui/emoji/emoji.tsx
index 68c82fb03..1b0967510 100644
--- a/src/components/ui/emoji/emoji.tsx
+++ b/src/components/ui/emoji/emoji.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji';
 import { joinPublicPath } from 'soapbox/utils/static';
diff --git a/src/components/ui/file-input/file-input.tsx b/src/components/ui/file-input/file-input.tsx
index 2a08a934e..44ec21384 100644
--- a/src/components/ui/file-input/file-input.tsx
+++ b/src/components/ui/file-input/file-input.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name' | 'accept'> { }
 
diff --git a/src/components/ui/form-actions/form-actions.test.tsx b/src/components/ui/form-actions/form-actions.test.tsx
index ea5dadbc6..925e02006 100644
--- a/src/components/ui/form-actions/form-actions.test.tsx
+++ b/src/components/ui/form-actions/form-actions.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/form-actions/form-actions.tsx b/src/components/ui/form-actions/form-actions.tsx
index e74361c35..d92a89719 100644
--- a/src/components/ui/form-actions/form-actions.tsx
+++ b/src/components/ui/form-actions/form-actions.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import HStack from '../hstack/hstack';
 
diff --git a/src/components/ui/form-group/form-group.test.tsx b/src/components/ui/form-group/form-group.test.tsx
index d6d4114ad..5fe0e2fa4 100644
--- a/src/components/ui/form-group/form-group.test.tsx
+++ b/src/components/ui/form-group/form-group.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/form-group/form-group.tsx b/src/components/ui/form-group/form-group.tsx
index 430851371..023f15036 100644
--- a/src/components/ui/form-group/form-group.tsx
+++ b/src/components/ui/form-group/form-group.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { Children, cloneElement, isValidElement, useMemo } from 'react';
 
 import Checkbox from '../checkbox/checkbox';
 import HStack from '../hstack/hstack';
@@ -21,12 +21,12 @@ interface IFormGroup {
 const FormGroup: React.FC<IFormGroup> = (props) => {
   const { children, errors = [], labelText, labelTitle, hintText } = props;
   const formFieldId: string = useMemo(() => `field-${crypto.randomUUID()}`, []);
-  const inputChildren = React.Children.toArray(children);
+  const inputChildren = Children.toArray(children);
   const hasError = errors?.length > 0;
 
   let firstChild;
-  if (React.isValidElement(inputChildren[0])) {
-    firstChild = React.cloneElement(
+  if (isValidElement(inputChildren[0])) {
+    firstChild = cloneElement(
       inputChildren[0],
       // @ts-ignore
       { id: formFieldId },
diff --git a/src/components/ui/form/form.test.tsx b/src/components/ui/form/form.test.tsx
index de693f195..3f603961d 100644
--- a/src/components/ui/form/form.test.tsx
+++ b/src/components/ui/form/form.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/form/form.tsx b/src/components/ui/form/form.tsx
index b23b44b38..ec175d8a6 100644
--- a/src/components/ui/form/form.tsx
+++ b/src/components/ui/form/form.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback } from 'react';
 
 interface IForm {
   /** Form submission event handler. */
@@ -11,7 +11,7 @@ interface IForm {
 
 /** Form element with custom styles. */
 const Form: React.FC<IForm> = ({ onSubmit, children, ...filteredProps }) => {
-  const handleSubmit: React.FormEventHandler = React.useCallback((event) => {
+  const handleSubmit: React.FormEventHandler = useCallback((event) => {
     event.preventDefault();
 
     if (onSubmit) {
diff --git a/src/components/ui/hstack/hstack.tsx b/src/components/ui/hstack/hstack.tsx
index eb435cbae..ea1fe7b0f 100644
--- a/src/components/ui/hstack/hstack.tsx
+++ b/src/components/ui/hstack/hstack.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 const justifyContentOptions = {
   between: 'justify-between',
diff --git a/src/components/ui/icon-button/icon-button.tsx b/src/components/ui/icon-button/icon-button.tsx
index 001a3ee0e..57e798356 100644
--- a/src/components/ui/icon-button/icon-button.tsx
+++ b/src/components/ui/icon-button/icon-button.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 import SvgIcon from '../icon/svg-icon';
 import Text from '../text/text';
@@ -18,7 +18,7 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 /** A clickable icon. */
-const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
+const IconButton = forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
   const { src, className, iconClassName, text, theme = 'seamless', ...filteredProps } = props;
 
   return (
diff --git a/src/components/ui/icon/icon.tsx b/src/components/ui/icon/icon.tsx
index eaa4e9f0a..71455c37d 100644
--- a/src/components/ui/icon/icon.tsx
+++ b/src/components/ui/icon/icon.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import Counter from '../counter/counter';
 
diff --git a/src/components/ui/icon/svg-icon.test.tsx b/src/components/ui/icon/svg-icon.test.tsx
index c238d4010..f226a7b6e 100644
--- a/src/components/ui/icon/svg-icon.test.tsx
+++ b/src/components/ui/icon/svg-icon.test.tsx
@@ -1,6 +1,5 @@
 
 import IconCode from '@tabler/icons/outline/code.svg';
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/icon/svg-icon.tsx b/src/components/ui/icon/svg-icon.tsx
index dcd93e113..4d3695fed 100644
--- a/src/components/ui/icon/svg-icon.tsx
+++ b/src/components/ui/icon/svg-icon.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import InlineSVG, { Props as InlineSVGProps } from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
 interface ISvgIcon extends InlineSVGProps {
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
index 42ca99388..6ee646fff 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input/input.tsx
@@ -1,7 +1,7 @@
 import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
 import eyeIcon from '@tabler/icons/outline/eye.svg';
 import clsx from 'clsx';
-import React from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useLocale } from 'soapbox/hooks';
@@ -47,18 +47,18 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
 }
 
 /** Form input element. */
-const Input = React.forwardRef<HTMLInputElement, IInput>(
+const Input = forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
     const locale = useLocale();
 
     const { type = 'text', icon, className, outerClassName, append, prepend, theme = 'normal', ...filteredProps } = props;
 
-    const [revealed, setRevealed] = React.useState(false);
+    const [revealed, setRevealed] = useState(false);
 
     const isPassword = type === 'password';
 
-    const togglePassword = React.useCallback(() => {
+    const togglePassword = useCallback(() => {
       setRevealed((prev) => !prev);
     }, []);
 
diff --git a/src/components/ui/language-dropdown/language-dropdown.tsx b/src/components/ui/language-dropdown/language-dropdown.tsx
index 756ada8b6..a5046f696 100644
--- a/src/components/ui/language-dropdown/language-dropdown.tsx
+++ b/src/components/ui/language-dropdown/language-dropdown.tsx
@@ -1,5 +1,4 @@
 import worldIcon from '@tabler/icons/outline/world.svg';
-import React from 'react';
 
 import { openDropdownMenu } from 'soapbox/actions/dropdown-menu';
 import DropdownMenu, { MenuItem } from 'soapbox/components/dropdown-menu';
diff --git a/src/components/ui/layout/layout.tsx b/src/components/ui/layout/layout.tsx
index e3d9575c3..31e123af2 100644
--- a/src/components/ui/layout/layout.tsx
+++ b/src/components/ui/layout/layout.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 import StickyBox from 'react-sticky-box';
 
 interface ISidebar {
diff --git a/src/components/ui/menu/menu.tsx b/src/components/ui/menu/menu.tsx
index 78dc5db0f..3f03935e4 100644
--- a/src/components/ui/menu/menu.tsx
+++ b/src/components/ui/menu/menu.tsx
@@ -9,7 +9,6 @@ import {
 } from '@reach/menu-button';
 import { positionDefault, positionRight } from '@reach/popover';
 import clsx from 'clsx';
-import React from 'react';
 
 import './menu.css';
 
diff --git a/src/components/ui/modal/modal.test.tsx b/src/components/ui/modal/modal.test.tsx
index 51895d8ce..b7bf31762 100644
--- a/src/components/ui/modal/modal.test.tsx
+++ b/src/components/ui/modal/modal.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal/modal.tsx
index 6d516fc91..9ee860535 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -1,7 +1,7 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import Button from '../button/button';
@@ -70,7 +70,7 @@ interface IModal {
 }
 
 /** Displays a modal dialog box. */
-const Modal = React.forwardRef<HTMLDivElement, IModal>(({
+const Modal = forwardRef<HTMLDivElement, IModal>(({
   cancelAction,
   cancelText,
   children,
@@ -93,9 +93,9 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
   onBack,
 }, ref) => {
   const intl = useIntl();
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (buttonRef?.current && !skipFocus) {
       buttonRef.current.focus();
     }
diff --git a/src/components/ui/popover/popover.tsx b/src/components/ui/popover/popover.tsx
index 86085be5d..18d3d8010 100644
--- a/src/components/ui/popover/popover.tsx
+++ b/src/components/ui/popover/popover.tsx
@@ -11,7 +11,7 @@ import {
   useTransitionStyles,
 } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { useRef, useState } from 'react';
+import { cloneElement, useRef, useState } from 'react';
 
 import Portal from '../portal/portal';
 
@@ -78,7 +78,7 @@ const Popover: React.FC<IPopover> = (props) => {
 
   return (
     <>
-      {React.cloneElement(children, {
+      {cloneElement(children, {
         ref: refs.setReference,
         ...getReferenceProps(),
         className: clsx(children.props.className, referenceElementClassName),
diff --git a/src/components/ui/portal/portal.tsx b/src/components/ui/portal/portal.tsx
index 9d9ae73e7..6dda9d3b3 100644
--- a/src/components/ui/portal/portal.tsx
+++ b/src/components/ui/portal/portal.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 interface IPortal {
diff --git a/src/components/ui/progress-bar/progress-bar.tsx b/src/components/ui/progress-bar/progress-bar.tsx
index 4fffe7937..41ca380ee 100644
--- a/src/components/ui/progress-bar/progress-bar.tsx
+++ b/src/components/ui/progress-bar/progress-bar.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { spring } from 'react-motion';
 
 import Motion from 'soapbox/features/ui/util/optional-motion';
diff --git a/src/components/ui/radio-button/radio-button.tsx b/src/components/ui/radio-button/radio-button.tsx
index c03ca5d52..ef385a4cc 100644
--- a/src/components/ui/radio-button/radio-button.tsx
+++ b/src/components/ui/radio-button/radio-button.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import HStack from '../hstack/hstack';
 
diff --git a/src/components/ui/select/select.tsx b/src/components/ui/select/select.tsx
index 1c14fe9ae..46c4d241e 100644
--- a/src/components/ui/select/select.tsx
+++ b/src/components/ui/select/select.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
   children: Iterable<React.ReactNode>;
@@ -7,7 +7,7 @@ interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
 }
 
 /** Multiple-select dropdown. */
-const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
+const Select = forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
   const { children, className, full = true, ...filteredProps } = props;
 
   return (
diff --git a/src/components/ui/slider/slider.tsx b/src/components/ui/slider/slider.tsx
index d97e69322..8aed7ebcc 100644
--- a/src/components/ui/slider/slider.tsx
+++ b/src/components/ui/slider/slider.tsx
@@ -1,5 +1,5 @@
 import throttle from 'lodash/throttle';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 type Point = { x: number; y: number };
 
diff --git a/src/components/ui/spinner/spinner.tsx b/src/components/ui/spinner/spinner.tsx
index 23341ba76..31de33512 100644
--- a/src/components/ui/spinner/spinner.tsx
+++ b/src/components/ui/spinner/spinner.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Stack from '../stack/stack';
diff --git a/src/components/ui/stack/stack.tsx b/src/components/ui/stack/stack.tsx
index 8a4370b04..8db4def0b 100644
--- a/src/components/ui/stack/stack.tsx
+++ b/src/components/ui/stack/stack.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 const spaces = {
   0: 'space-y-0',
@@ -43,7 +43,7 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /** Vertical stack of child elements. */
-const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
+const Stack = forwardRef<HTMLDivElement, IStack>((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
   const { space, alignItems, justifyContent, className, grow, element = 'div', ...filteredProps } = props;
 
   const Elem = element as 'div';
diff --git a/src/components/ui/streamfield/streamfield.tsx b/src/components/ui/streamfield/streamfield.tsx
index 6ad51f9e2..af7ae100c 100644
--- a/src/components/ui/streamfield/streamfield.tsx
+++ b/src/components/ui/streamfield/streamfield.tsx
@@ -1,5 +1,4 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import Button from '../button/button';
diff --git a/src/components/ui/tabs/tabs.tsx b/src/components/ui/tabs/tabs.tsx
index 3d435183e..a1f63ddde 100644
--- a/src/components/ui/tabs/tabs.tsx
+++ b/src/components/ui/tabs/tabs.tsx
@@ -6,7 +6,7 @@ import {
   useTabsContext,
 } from '@reach/tabs';
 import clsx from 'clsx';
-import React from 'react';
+import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Counter from '../counter/counter';
@@ -14,7 +14,7 @@ import Counter from '../counter/counter';
 import './tabs.css';
 
 const HORIZONTAL_PADDING = 8;
-const AnimatedContext = React.createContext(null);
+const AnimatedContext = createContext(null);
 
 interface IAnimatedInterface {
   /** Callback when a tab is chosen. */
@@ -26,8 +26,8 @@ interface IAnimatedInterface {
 
 /** Tabs with a sliding active state. */
 const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
-  const [activeRect, setActiveRect] = React.useState(null);
-  const ref = React.useRef();
+  const [activeRect, setActiveRect] = useState(null);
+  const ref = useRef();
   const rect = useRect(ref);
 
   // @ts-ignore
@@ -81,14 +81,14 @@ const AnimatedTab: React.FC<IAnimatedTab> = ({ index, ...props }) => {
   const isSelected: boolean = selectedIndex === index;
 
   // measure the size of our element, only listen to rect if active
-  const ref = React.useRef();
+  const ref = useRef();
   const rect = useRect(ref, { observe: isSelected });
 
   // get the style changing function from context
-  const setActiveRect = React.useContext(AnimatedContext);
+  const setActiveRect = useContext(AnimatedContext);
 
   // callup to set styles whenever we're active
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (isSelected) {
       // @ts-ignore
       setActiveRect(rect);
diff --git a/src/components/ui/tag-input/tag-input.tsx b/src/components/ui/tag-input/tag-input.tsx
index 8a4629b1f..db8404bbb 100644
--- a/src/components/ui/tag-input/tag-input.tsx
+++ b/src/components/ui/tag-input/tag-input.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import HStack from '../hstack/hstack';
 
diff --git a/src/components/ui/tag-input/tag.tsx b/src/components/ui/tag-input/tag.tsx
index 4ca668fef..1cbcf4302 100644
--- a/src/components/ui/tag-input/tag.tsx
+++ b/src/components/ui/tag-input/tag.tsx
@@ -1,5 +1,4 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 
 import IconButton from '../icon-button/icon-button';
 import Text from '../text/text';
diff --git a/src/components/ui/text/text.tsx b/src/components/ui/text/text.tsx
index f5957f879..1e31c90f4 100644
--- a/src/components/ui/text/text.tsx
+++ b/src/components/ui/text/text.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
@@ -86,7 +86,7 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
 }
 
 /** UI-friendly text container with dark mode support. */
-const Text = React.forwardRef<any, IText>(
+const Text = forwardRef<any, IText>(
   (props, ref) => {
     const {
       align,
diff --git a/src/components/ui/textarea/textarea.tsx b/src/components/ui/textarea/textarea.tsx
index 0ba036a08..5e2c8d0c2 100644
--- a/src/components/ui/textarea/textarea.tsx
+++ b/src/components/ui/textarea/textarea.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { useLocale } from 'soapbox/hooks';
@@ -40,7 +40,7 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
 }
 
 /** Textarea with custom styles. */
-const Textarea = React.forwardRef(({
+const Textarea = forwardRef(({
   isCodeEditor = false,
   hasError = false,
   isResizeable = true,
diff --git a/src/components/ui/toast/toast.tsx b/src/components/ui/toast/toast.tsx
index 11626f722..e53e4ccb3 100644
--- a/src/components/ui/toast/toast.tsx
+++ b/src/components/ui/toast/toast.tsx
@@ -3,7 +3,6 @@ import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
 import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
 import toast, { Toast as RHToast } from 'react-hot-toast';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
diff --git a/src/components/ui/toggle/toggle.tsx b/src/components/ui/toggle/toggle.tsx
index 681633069..c43089fd9 100644
--- a/src/components/ui/toggle/toggle.tsx
+++ b/src/components/ui/toggle/toggle.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'checked' | 'onChange' | 'required' | 'disabled'> {
   size?: 'sm' | 'md';
diff --git a/src/components/ui/tooltip/tooltip.tsx b/src/components/ui/tooltip/tooltip.tsx
index 08d270c5d..cce1728a2 100644
--- a/src/components/ui/tooltip/tooltip.tsx
+++ b/src/components/ui/tooltip/tooltip.tsx
@@ -8,7 +8,7 @@ import {
   useInteractions,
   useTransitionStyles,
 } from '@floating-ui/react';
-import React, { useRef, useState } from 'react';
+import { cloneElement, useRef, useState } from 'react';
 
 interface ITooltip {
   /** Element to display the tooltip around. */
@@ -63,7 +63,7 @@ const Tooltip: React.FC<ITooltip> = (props) => {
 
   return (
     <>
-      {React.cloneElement(children, {
+      {cloneElement(children, {
         ref: refs.setReference,
         ...getReferenceProps(),
       })}
diff --git a/src/components/ui/widget/widget.tsx b/src/components/ui/widget/widget.tsx
index 446312c16..0bc3d87bb 100644
--- a/src/components/ui/widget/widget.tsx
+++ b/src/components/ui/widget/widget.tsx
@@ -1,5 +1,4 @@
 import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
-import React from 'react';
 
 import HStack from 'soapbox/components/ui/hstack/hstack';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
diff --git a/src/components/upload-progress.tsx b/src/components/upload-progress.tsx
index e2f44fc64..a20adc502 100644
--- a/src/components/upload-progress.tsx
+++ b/src/components/upload-progress.tsx
@@ -1,5 +1,4 @@
 import cloudUploadIcon from '@tabler/icons/outline/cloud-upload.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, Icon, ProgressBar, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index 441ca66f9..b4b781e7b 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -10,7 +10,7 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { spring } from 'react-motion';
 
diff --git a/src/components/validation-checkmark.test.tsx b/src/components/validation-checkmark.test.tsx
index eb1f3ec4b..ab9c27638 100644
--- a/src/components/validation-checkmark.test.tsx
+++ b/src/components/validation-checkmark.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/components/validation-checkmark.tsx b/src/components/validation-checkmark.tsx
index 2a4acd144..01f5ac754 100644
--- a/src/components/validation-checkmark.tsx
+++ b/src/components/validation-checkmark.tsx
@@ -1,7 +1,6 @@
 import checkIcon from '@tabler/icons/outline/check.svg';
 import pointIcon from '@tabler/icons/outline/point.svg';
 import clsx from 'clsx';
-import React from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
 
diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx
index 108f1e9c7..7c2c28500 100644
--- a/src/components/verification-badge.tsx
+++ b/src/components/verification-badge.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import verifiedIcon from 'soapbox/assets/icons/verified.svg';
diff --git a/src/containers/account-container.tsx b/src/containers/account-container.tsx
index 31500b739..5fc6b038e 100644
--- a/src/containers/account-container.tsx
+++ b/src/containers/account-container.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { useAccount } from 'soapbox/api/hooks';
 import Account, { IAccount } from 'soapbox/components/account';
diff --git a/src/containers/status-container.tsx b/src/containers/status-container.tsx
index b29310f25..7afb8e41b 100644
--- a/src/containers/status-container.tsx
+++ b/src/containers/status-container.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import Status, { IStatus } from 'soapbox/components/status';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/src/contexts/chat-context.tsx b/src/contexts/chat-context.tsx
index 14354549e..1e4d78213 100644
--- a/src/contexts/chat-context.tsx
+++ b/src/contexts/chat-context.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 
 import { toggleMainWindow } from 'soapbox/actions/chats';
diff --git a/src/contexts/nostr-context.tsx b/src/contexts/nostr-context.tsx
index b83c4b950..5366cd35f 100644
--- a/src/contexts/nostr-context.tsx
+++ b/src/contexts/nostr-context.tsx
@@ -1,5 +1,5 @@
 import { NRelay1 } from '@nostrify/nostrify';
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
 
 import { useInstance } from 'soapbox/hooks/useInstance';
 
diff --git a/src/contexts/stat-context.tsx b/src/contexts/stat-context.tsx
index ad86d8a6f..3c53bbb53 100644
--- a/src/contexts/stat-context.tsx
+++ b/src/contexts/stat-context.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
 
 type IStatContext = {
   unreadChatsCount: number;
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 04bfb7176..43efac7e9 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx
index 0dc5a7ea2..70c913b8f 100644
--- a/src/features/account-gallery/components/media-item.tsx
+++ b/src/features/account-gallery/components/media-item.tsx
@@ -1,7 +1,7 @@
 import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
 import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
 import StillImage from 'soapbox/components/still-image';
diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index a899d8d17..0c7d0e58e 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -1,5 +1,5 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
diff --git a/src/features/account-timeline/components/moved-note.tsx b/src/features/account-timeline/components/moved-note.tsx
index dbef926ed..993a111ef 100644
--- a/src/features/account-timeline/components/moved-note.tsx
+++ b/src/features/account-timeline/components/moved-note.tsx
@@ -1,5 +1,4 @@
 import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Account from 'soapbox/components/account';
diff --git a/src/features/account-timeline/index.tsx b/src/features/account-timeline/index.tsx
index e363f7a7c..3f50f9f3d 100644
--- a/src/features/account-timeline/index.tsx
+++ b/src/features/account-timeline/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index 0b215ccc9..1c160e280 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -22,7 +22,6 @@ import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { List as ImmutableList } from 'immutable';
 import { nip19 } from 'nostr-tools';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx
index edffda136..12a9408fc 100644
--- a/src/features/admin/announcements.tsx
+++ b/src/features/admin/announcements.tsx
@@ -1,5 +1,4 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
-import React from 'react';
 import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/admin/components/admin-tabs.tsx b/src/features/admin/components/admin-tabs.tsx
index debba46a0..ff4a2f364 100644
--- a/src/features/admin/components/admin-tabs.tsx
+++ b/src/features/admin/components/admin-tabs.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
diff --git a/src/features/admin/components/dashcounter.tsx b/src/features/admin/components/dashcounter.tsx
index 4006e1d2d..59707fb0f 100644
--- a/src/features/admin/components/dashcounter.tsx
+++ b/src/features/admin/components/dashcounter.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/admin/components/latest-accounts-panel.tsx b/src/features/admin/components/latest-accounts-panel.tsx
index adb16495e..a63ef3008 100644
--- a/src/features/admin/components/latest-accounts-panel.tsx
+++ b/src/features/admin/components/latest-accounts-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/admin/components/registration-mode-picker.tsx b/src/features/admin/components/registration-mode-picker.tsx
index 8cd6959bf..55609e979 100644
--- a/src/features/admin/components/registration-mode-picker.tsx
+++ b/src/features/admin/components/registration-mode-picker.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { updateConfig } from 'soapbox/actions/admin';
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index 2a158f10e..251febe41 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -1,7 +1,6 @@
 import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import pencilIcon from '@tabler/icons/outline/pencil.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { deleteStatusModal } from 'soapbox/actions/moderation';
diff --git a/src/features/admin/components/report.tsx b/src/features/admin/components/report.tsx
index cf3eaa000..86c7cea2c 100644
--- a/src/features/admin/components/report.tsx
+++ b/src/features/admin/components/report.tsx
@@ -1,7 +1,7 @@
 import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import hourglassEmptyIcon from '@tabler/icons/outline/hourglass-empty.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/admin/components/unapproved-account.tsx b/src/features/admin/components/unapproved-account.tsx
index 9bc42c1cf..7ceacd73d 100644
--- a/src/features/admin/components/unapproved-account.tsx
+++ b/src/features/admin/components/unapproved-account.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { approveUser, rejectUser } from 'soapbox/actions/admin';
 import { useAccount } from 'soapbox/api/hooks';
diff --git a/src/features/admin/domains.tsx b/src/features/admin/domains.tsx
index 32b4614be..1f1dd724c 100644
--- a/src/features/admin/domains.tsx
+++ b/src/features/admin/domains.tsx
@@ -1,5 +1,5 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/admin/index.tsx b/src/features/admin/index.tsx
index c8286b393..77dabcd9a 100644
--- a/src/features/admin/index.tsx
+++ b/src/features/admin/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Switch, Route } from 'react-router-dom';
 
diff --git a/src/features/admin/manage-zap-split.tsx b/src/features/admin/manage-zap-split.tsx
index dcb78a968..1c7bdcfc5 100644
--- a/src/features/admin/manage-zap-split.tsx
+++ b/src/features/admin/manage-zap-split.tsx
@@ -1,5 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import Account from 'soapbox/components/account';
diff --git a/src/features/admin/moderation-log.tsx b/src/features/admin/moderation-log.tsx
index 57a80f83f..0fc82ed0b 100644
--- a/src/features/admin/moderation-log.tsx
+++ b/src/features/admin/moderation-log.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
 import { useModerationLog } from 'soapbox/api/hooks/admin';
diff --git a/src/features/admin/nostr-relays.tsx b/src/features/admin/nostr-relays.tsx
index 40c7d719e..b182e9711 100644
--- a/src/features/admin/nostr-relays.tsx
+++ b/src/features/admin/nostr-relays.tsx
@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
diff --git a/src/features/admin/relays.tsx b/src/features/admin/relays.tsx
index 1f028c4ea..ff25be118 100644
--- a/src/features/admin/relays.tsx
+++ b/src/features/admin/relays.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useRelays } from 'soapbox/api/hooks/admin';
diff --git a/src/features/admin/rules.tsx b/src/features/admin/rules.tsx
index cec214c65..42352ed62 100644
--- a/src/features/admin/rules.tsx
+++ b/src/features/admin/rules.tsx
@@ -1,5 +1,4 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/admin/tabs/awaiting-approval.tsx b/src/features/admin/tabs/awaiting-approval.tsx
index 9ae07441a..e8ed05e2c 100644
--- a/src/features/admin/tabs/awaiting-approval.tsx
+++ b/src/features/admin/tabs/awaiting-approval.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchUsers } from 'soapbox/actions/admin';
diff --git a/src/features/admin/tabs/dashboard.tsx b/src/features/admin/tabs/dashboard.tsx
index 4d68b589e..d577c0797 100644
--- a/src/features/admin/tabs/dashboard.tsx
+++ b/src/features/admin/tabs/dashboard.tsx
@@ -1,6 +1,5 @@
 import downloadIcon from '@tabler/icons/outline/download.svg';
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email-list';
diff --git a/src/features/admin/tabs/reports.tsx b/src/features/admin/tabs/reports.tsx
index 99ed6be91..c8de1aa09 100644
--- a/src/features/admin/tabs/reports.tsx
+++ b/src/features/admin/tabs/reports.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchReports } from 'soapbox/actions/admin';
diff --git a/src/features/admin/user-index.tsx b/src/features/admin/user-index.tsx
index a80f3298d..7d525285b 100644
--- a/src/features/admin/user-index.tsx
+++ b/src/features/admin/user-index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts';
diff --git a/src/features/aliases/components/account.tsx b/src/features/aliases/components/account.tsx
index 2e20bf0ac..b372cc362 100644
--- a/src/features/aliases/components/account.tsx
+++ b/src/features/aliases/components/account.tsx
@@ -1,5 +1,4 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addToAliases } from 'soapbox/actions/aliases';
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index 85a843abd..807e8729b 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -1,6 +1,5 @@
 import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index 01d3c0806..a814e3da5 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -1,5 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases';
diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx
index 39effef8d..1aa239ab0 100644
--- a/src/features/audio/index.tsx
+++ b/src/features/audio/index.tsx
@@ -6,7 +6,7 @@ import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
diff --git a/src/features/auth-login/components/captcha.test.tsx b/src/features/auth-login/components/captcha.test.tsx
index a9123cbae..a97b29e8c 100644
--- a/src/features/auth-login/components/captcha.test.tsx
+++ b/src/features/auth-login/components/captcha.test.tsx
@@ -1,6 +1,5 @@
 
 import { Map as ImmutableMap } from 'immutable';
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/auth-login/components/captcha.tsx b/src/features/auth-login/components/captcha.tsx
index 47ac55066..c393731c3 100644
--- a/src/features/auth-login/components/captcha.tsx
+++ b/src/features/auth-login/components/captcha.tsx
@@ -1,5 +1,5 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { fetchCaptcha } from 'soapbox/actions/auth';
diff --git a/src/features/auth-login/components/consumer-button.tsx b/src/features/auth-login/components/consumer-button.tsx
index 3218d6434..2eebaf9c4 100644
--- a/src/features/auth-login/components/consumer-button.tsx
+++ b/src/features/auth-login/components/consumer-button.tsx
@@ -5,7 +5,6 @@ import brandSlackIcon from '@tabler/icons/outline/brand-slack.svg';
 import brandTwitterIcon from '@tabler/icons/outline/brand-twitter.svg';
 import brandWindowsIcon from '@tabler/icons/outline/brand-windows.svg';
 import keyIcon from '@tabler/icons/outline/key.svg';
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { prepareRequest } from 'soapbox/actions/consumer-auth';
diff --git a/src/features/auth-login/components/consumers-list.tsx b/src/features/auth-login/components/consumers-list.tsx
index 52f898ad5..d22f1aa4f 100644
--- a/src/features/auth-login/components/consumers-list.tsx
+++ b/src/features/auth-login/components/consumers-list.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Card, HStack, Text } from 'soapbox/components/ui';
diff --git a/src/features/auth-login/components/login-form.test.tsx b/src/features/auth-login/components/login-form.test.tsx
index 716dae153..49f94cbfc 100644
--- a/src/features/auth-login/components/login-form.test.tsx
+++ b/src/features/auth-login/components/login-form.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/auth-login/components/login-form.tsx b/src/features/auth-login/components/login-form.tsx
index 21e353d31..6a72e345e 100644
--- a/src/features/auth-login/components/login-form.tsx
+++ b/src/features/auth-login/components/login-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/auth-login/components/login-page.test.tsx b/src/features/auth-login/components/login-page.test.tsx
index cd2b7c19c..b8f646a7a 100644
--- a/src/features/auth-login/components/login-page.test.tsx
+++ b/src/features/auth-login/components/login-page.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/auth-login/components/login-page.tsx b/src/features/auth-login/components/login-page.tsx
index 50dc1ac83..800c4848e 100644
--- a/src/features/auth-login/components/login-page.tsx
+++ b/src/features/auth-login/components/login-page.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/src/features/auth-login/components/logout.tsx b/src/features/auth-login/components/logout.tsx
index 6f70e0bdd..0508c7572 100644
--- a/src/features/auth-login/components/logout.tsx
+++ b/src/features/auth-login/components/logout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
diff --git a/src/features/auth-login/components/otp-auth-form.test.tsx b/src/features/auth-login/components/otp-auth-form.test.tsx
index a07454099..91e868ca3 100644
--- a/src/features/auth-login/components/otp-auth-form.test.tsx
+++ b/src/features/auth-login/components/otp-auth-form.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/auth-login/components/otp-auth-form.tsx b/src/features/auth-login/components/otp-auth-form.tsx
index f988a93fe..08aad366c 100644
--- a/src/features/auth-login/components/otp-auth-form.tsx
+++ b/src/features/auth-login/components/otp-auth-form.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/src/features/auth-login/components/password-reset-confirm.test.tsx b/src/features/auth-login/components/password-reset-confirm.test.tsx
index e566eff39..7000174c9 100644
--- a/src/features/auth-login/components/password-reset-confirm.test.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.test.tsx
@@ -1,5 +1,4 @@
 
-import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 
diff --git a/src/features/auth-login/components/password-reset-confirm.tsx b/src/features/auth-login/components/password-reset-confirm.tsx
index c079b418d..0c2473389 100644
--- a/src/features/auth-login/components/password-reset-confirm.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
@@ -25,12 +25,12 @@ const PasswordResetConfirm = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [password, setPassword] = React.useState('');
-  const [status, setStatus] = React.useState(Statuses.IDLE);
+  const [password, setPassword] = useState('');
+  const [status, setStatus] = useState(Statuses.IDLE);
 
   const isLoading = status === Statuses.LOADING;
 
-  const handleSubmit: React.FormEventHandler = React.useCallback((event) => {
+  const handleSubmit: React.FormEventHandler = useCallback((event) => {
     event.preventDefault();
 
     setStatus(Statuses.LOADING);
@@ -39,7 +39,7 @@ const PasswordResetConfirm = () => {
       .catch(() => setStatus(Statuses.FAIL));
   }, [password]);
 
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((event) => {
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
     setPassword(event.target.value);
   }, []);
 
diff --git a/src/features/auth-login/components/password-reset.tsx b/src/features/auth-login/components/password-reset.tsx
index 8812c5b73..6d5487ceb 100644
--- a/src/features/auth-login/components/password-reset.tsx
+++ b/src/features/auth-login/components/password-reset.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/src/features/auth-login/components/registration-form.tsx b/src/features/auth-login/components/registration-form.tsx
index 43d5e895c..48854d279 100644
--- a/src/features/auth-login/components/registration-form.tsx
+++ b/src/features/auth-login/components/registration-form.tsx
@@ -3,7 +3,7 @@ import checkIcon from '@tabler/icons/outline/check.svg';
 import axios from 'axios';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
diff --git a/src/features/auth-login/components/registration-page.tsx b/src/features/auth-login/components/registration-page.tsx
index 6cedc1159..0401ebf10 100644
--- a/src/features/auth-login/components/registration-page.tsx
+++ b/src/features/auth-login/components/registration-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/src/features/auth-token-list/index.tsx b/src/features/auth-token-list/index.tsx
index 21cad4ccd..24b4c6867 100644
--- a/src/features/auth-token-list/index.tsx
+++ b/src/features/auth-token-list/index.tsx
@@ -1,5 +1,5 @@
 import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index 6c9d97f92..3274851a5 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups';
diff --git a/src/features/birthdays/account.tsx b/src/features/birthdays/account.tsx
index 1cfcd4e4d..78c6f40fe 100644
--- a/src/features/birthdays/account.tsx
+++ b/src/features/birthdays/account.tsx
@@ -1,5 +1,4 @@
 import balloonIcon from '@tabler/icons/outline/balloon.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useAccount } from 'soapbox/api/hooks';
diff --git a/src/features/blocks/index.tsx b/src/features/blocks/index.tsx
index f5bedf96c..c62112924 100644
--- a/src/features/blocks/index.tsx
+++ b/src/features/blocks/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { useBlocks } from 'soapbox/api/hooks';
diff --git a/src/features/bookmark-folders/components/new-folder-form.tsx b/src/features/bookmark-folders/components/new-folder-form.tsx
index badd6006f..5f4fb4ec5 100644
--- a/src/features/bookmark-folders/components/new-folder-form.tsx
+++ b/src/features/bookmark-folders/components/new-folder-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useCreateBookmarkFolder } from 'soapbox/api/hooks';
diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index e4f87046f..591485c09 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -1,6 +1,5 @@
 import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
 import folderIcon from '@tabler/icons/outline/folder.svg';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index 3921dad63..a2452434d 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -3,7 +3,7 @@ import editIcon from '@tabler/icons/outline/edit.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -57,7 +57,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
   const isLoading = useAppSelector((state) => state.status_lists.get(bookmarksKey)?.isLoading === true);
   const hasMore = useAppSelector((state) => !!state.status_lists.get(bookmarksKey)?.next);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchBookmarkedStatuses(folderId));
   }, [folderId]);
 
diff --git a/src/features/chats/components/chat-composer.tsx b/src/features/chats/components/chat-composer.tsx
index 1228836c5..11e3bdf6c 100644
--- a/src/features/chats/components/chat-composer.tsx
+++ b/src/features/chats/components/chat-composer.tsx
@@ -1,5 +1,5 @@
 import sendIcon from '@tabler/icons/outline/send.svg';
-import React, { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
 import { unblockAccount } from 'soapbox/actions/accounts';
@@ -53,7 +53,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
 }
 
 /** Textarea input for chats. */
-const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>(({
+const ChatComposer = forwardRef<HTMLTextAreaElement | null, IChatComposer>(({
   onKeyDown,
   onChange,
   value,
diff --git a/src/features/chats/components/chat-list-item.test.tsx b/src/features/chats/components/chat-list-item.test.tsx
index 817b3b1ec..d419dc9d0 100644
--- a/src/features/chats/components/chat-list-item.test.tsx
+++ b/src/features/chats/components/chat-list-item.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/chats/components/chat-list-item.tsx b/src/features/chats/components/chat-list-item.tsx
index ff642e95e..1195522bb 100644
--- a/src/features/chats/components/chat-list-item.tsx
+++ b/src/features/chats/components/chat-list-item.tsx
@@ -1,6 +1,6 @@
 import dotsIcon from '@tabler/icons/outline/dots.svg';
 import logoutIcon from '@tabler/icons/outline/logout.svg';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-list.tsx b/src/features/chats/components/chat-list.tsx
index 0c353e940..90a59141e 100644
--- a/src/features/chats/components/chat-list.tsx
+++ b/src/features/chats/components/chat-list.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import { fetchChats } from 'soapbox/actions/chats';
diff --git a/src/features/chats/components/chat-message-list-intro.tsx b/src/features/chats/components/chat-message-list-intro.tsx
index a4e84f37e..36047b8ab 100644
--- a/src/features/chats/components/chat-message-list-intro.tsx
+++ b/src/features/chats/components/chat-message-list-intro.tsx
@@ -1,6 +1,5 @@
 import clockIcon from '@tabler/icons/outline/clock.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-message-list.test.tsx b/src/features/chats/components/chat-message-list.test.tsx
index 0a9da18c9..8e3f0ec0a 100644
--- a/src/features/chats/components/chat-message-list.test.tsx
+++ b/src/features/chats/components/chat-message-list.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
 
diff --git a/src/features/chats/components/chat-message-list.tsx b/src/features/chats/components/chat-message-list.tsx
index 8d4e02f1d..376510459 100644
--- a/src/features/chats/components/chat-message-list.tsx
+++ b/src/features/chats/components/chat-message-list.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo, forwardRef } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
@@ -41,12 +41,12 @@ const timeChange = (prev: ChatMessageEntity, curr: ChatMessageEntity): TimeForma
 
 const START_INDEX = 10000;
 
-const List: Components['List'] = React.forwardRef((props, ref) => {
+const List: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='mb-2' />;
 });
 
-const Scroller: Components['Scroller'] = React.forwardRef((props, ref) => {
+const Scroller: Components['Scroller'] = forwardRef((props, ref) => {
   const { style, context, ...rest } = props;
 
   return (
diff --git a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
index 6e604ff09..e7575707d 100644
--- a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
+++ b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect, cloneElement } from 'react';
 
 import { Portal } from 'soapbox/components/ui';
 import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
@@ -31,8 +31,8 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
   }, [isOpen]);
 
   return (
-    <React.Fragment>
-      {React.cloneElement(children, {
+    <>
+      {cloneElement(children, {
         ref: setReferenceElement,
         onClick: onToggleVisibility,
       })}
@@ -49,7 +49,7 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
           />
         </Portal>
       )}
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/src/features/chats/components/chat-message-reaction.test.tsx b/src/features/chats/components/chat-message-reaction.test.tsx
index 9c625c1b7..9868a932d 100644
--- a/src/features/chats/components/chat-message-reaction.test.tsx
+++ b/src/features/chats/components/chat-message-reaction.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/chats/components/chat-message-reaction.tsx b/src/features/chats/components/chat-message-reaction.tsx
index 3b054bd50..3f4e4d033 100644
--- a/src/features/chats/components/chat-message-reaction.tsx
+++ b/src/features/chats/components/chat-message-reaction.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import { Text } from 'soapbox/components/ui';
 import emojify from 'soapbox/features/emoji';
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index 218e7bc42..af9932baf 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -8,7 +8,7 @@ import { useMutation } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import escape from 'lodash/escape';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx
index bb20afa80..d629d92a0 100644
--- a/src/features/chats/components/chat-page/chat-page.tsx
+++ b/src/features/chats/components/chat-page/chat-page.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
 import { Stack } from 'soapbox/components/ui';
diff --git a/src/features/chats/components/chat-page/components/blankslate-empty.tsx b/src/features/chats/components/chat-page/components/blankslate-empty.tsx
index 18f177f24..e75704e1b 100644
--- a/src/features/chats/components/chat-page/components/blankslate-empty.tsx
+++ b/src/features/chats/components/chat-page/components/blankslate-empty.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx b/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
index 956672a19..c6a7c5507 100644
--- a/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
+++ b/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-page/components/chat-page-main.tsx b/src/features/chats/components/chat-page/components/chat-page-main.tsx
index 530eec265..e5417cc81 100644
--- a/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -2,7 +2,7 @@ import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import banIcon from '@tabler/icons/outline/ban.svg';
 import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
 import logoutIcon from '@tabler/icons/outline/logout.svg';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory, useParams } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-page/components/chat-page-new.tsx b/src/features/chats/components/chat-page/components/chat-page-new.tsx
index 3b3e879ed..5857b5346 100644
--- a/src/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -1,5 +1,4 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index 099e8c8ce..5f848b8cc 100644
--- a/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -1,5 +1,5 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 65db6b536..d0c8b621f 100644
--- a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -1,6 +1,6 @@
 import editIcon from '@tabler/icons/outline/edit.svg';
 import settingsIcon from '@tabler/icons/outline/settings.svg';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-page/components/welcome.tsx b/src/features/chats/components/chat-page/components/welcome.tsx
index f78de0e32..12bf5f968 100644
--- a/src/features/chats/components/chat-page/components/welcome.tsx
+++ b/src/features/chats/components/chat-page/components/welcome.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list';
diff --git a/src/features/chats/components/chat-pane-header.test.tsx b/src/features/chats/components/chat-pane-header.test.tsx
index 0a328b2d5..53d34cb9a 100644
--- a/src/features/chats/components/chat-pane-header.test.tsx
+++ b/src/features/chats/components/chat-pane-header.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/chats/components/chat-pane/blankslate.tsx b/src/features/chats/components/chat-pane/blankslate.tsx
index d718ff376..a28b24ce1 100644
--- a/src/features/chats/components/chat-pane/blankslate.tsx
+++ b/src/features/chats/components/chat-pane/blankslate.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Button, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/chats/components/chat-pane/chat-pane.test.tsx b/src/features/chats/components/chat-pane/chat-pane.test.tsx
index 72bab50ee..c28cd76f6 100644
--- a/src/features/chats/components/chat-pane/chat-pane.test.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.test.tsx
@@ -1,5 +1,4 @@
 
-import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
 
diff --git a/src/features/chats/components/chat-pane/chat-pane.tsx b/src/features/chats/components/chat-pane/chat-pane.tsx
index 031b0becd..75f767086 100644
--- a/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -1,5 +1,5 @@
 import editIcon from '@tabler/icons/outline/edit.svg';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Stack } from 'soapbox/components/ui';
diff --git a/src/features/chats/components/chat-pending-upload.tsx b/src/features/chats/components/chat-pending-upload.tsx
index 63cbd173f..220e0fe9a 100644
--- a/src/features/chats/components/chat-pending-upload.tsx
+++ b/src/features/chats/components/chat-pending-upload.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { ProgressBar } from 'soapbox/components/ui';
 
diff --git a/src/features/chats/components/chat-search-input.tsx b/src/features/chats/components/chat-search-input.tsx
index 6737d9783..22786e81b 100644
--- a/src/features/chats/components/chat-search-input.tsx
+++ b/src/features/chats/components/chat-search-input.tsx
@@ -1,6 +1,5 @@
 import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon, Input } from 'soapbox/components/ui';
diff --git a/src/features/chats/components/chat-search/blankslate.tsx b/src/features/chats/components/chat-search/blankslate.tsx
index f4ffd748b..a86d7610c 100644
--- a/src/features/chats/components/chat-search/blankslate.tsx
+++ b/src/features/chats/components/chat-search/blankslate.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/chats/components/chat-search/chat-search.test.tsx b/src/features/chats/components/chat-search/chat-search.test.tsx
index de9a1c0d0..b1618c93a 100644
--- a/src/features/chats/components/chat-search/chat-search.test.tsx
+++ b/src/features/chats/components/chat-search/chat-search.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
 
diff --git a/src/features/chats/components/chat-search/chat-search.tsx b/src/features/chats/components/chat-search/chat-search.tsx
index 4b1af584c..aa69eb85c 100644
--- a/src/features/chats/components/chat-search/chat-search.tsx
+++ b/src/features/chats/components/chat-search/chat-search.tsx
@@ -2,7 +2,7 @@ import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-search/empty-results-blankslate.tsx b/src/features/chats/components/chat-search/empty-results-blankslate.tsx
index 4a890f699..25176ecc6 100644
--- a/src/features/chats/components/chat-search/empty-results-blankslate.tsx
+++ b/src/features/chats/components/chat-search/empty-results-blankslate.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/chats/components/chat-search/results.tsx b/src/features/chats/components/chat-search/results.tsx
index 91a6fdb95..70ce4e0f2 100644
--- a/src/features/chats/components/chat-search/results.tsx
+++ b/src/features/chats/components/chat-search/results.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/chats/components/chat-textarea.tsx b/src/features/chats/components/chat-textarea.tsx
index a8269b0c0..50c95947b 100644
--- a/src/features/chats/components/chat-textarea.tsx
+++ b/src/features/chats/components/chat-textarea.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 import { HStack, Textarea } from 'soapbox/components/ui';
 import { Attachment } from 'soapbox/types/entities';
@@ -14,7 +14,7 @@ interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
 }
 
 /** Custom textarea for chats. */
-const ChatTextarea: React.FC<IChatTextarea> = React.forwardRef(({
+const ChatTextarea: React.FC<IChatTextarea> = forwardRef(({
   attachments,
   onDeleteAttachment,
   uploadCount = 0,
diff --git a/src/features/chats/components/chat-upload-preview.tsx b/src/features/chats/components/chat-upload-preview.tsx
index ce04f5861..cef73e79b 100644
--- a/src/features/chats/components/chat-upload-preview.tsx
+++ b/src/features/chats/components/chat-upload-preview.tsx
@@ -1,5 +1,4 @@
 import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
-import React from 'react';
 
 import { Icon } from 'soapbox/components/ui';
 import { MIMETYPE_ICONS } from 'soapbox/components/upload';
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index 1963cd800..f1c9bddcd 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -1,7 +1,6 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import Blurhash from 'soapbox/components/blurhash';
diff --git a/src/features/chats/components/chat-widget.test.tsx b/src/features/chats/components/chat-widget.test.tsx
index cc3b02e5d..5bda994ee 100644
--- a/src/features/chats/components/chat-widget.test.tsx
+++ b/src/features/chats/components/chat-widget.test.tsx
@@ -1,5 +1,4 @@
 
-import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 
diff --git a/src/features/chats/components/chat-widget/chat-pane-header.tsx b/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 76130c690..587af09f2 100644
--- a/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -1,6 +1,6 @@
 import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
 import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
-import React, { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 
 import { HStack, IconButton, Text } from 'soapbox/components/ui';
 
diff --git a/src/features/chats/components/chat-widget/chat-settings.tsx b/src/features/chats/components/chat-widget/chat-settings.tsx
index 40a4d6f74..0d28d8391 100644
--- a/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -1,7 +1,6 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import banIcon from '@tabler/icons/outline/ban.svg';
 import logoutIcon from '@tabler/icons/outline/logout.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount, unblockAccount } from 'soapbox/actions/accounts';
diff --git a/src/features/chats/components/chat-widget/chat-widget.tsx b/src/features/chats/components/chat-widget/chat-widget.tsx
index 05b9fb255..7a4c31050 100644
--- a/src/features/chats/components/chat-widget/chat-widget.tsx
+++ b/src/features/chats/components/chat-widget/chat-widget.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { ChatProvider } from 'soapbox/contexts/chat-context';
diff --git a/src/features/chats/components/chat-widget/chat-window.tsx b/src/features/chats/components/chat-widget/chat-window.tsx
index cd3f6c931..5e072a79c 100644
--- a/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/src/features/chats/components/chat-widget/chat-window.tsx
@@ -1,7 +1,7 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import editIcon from '@tabler/icons/outline/edit.svg';
 import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index cf76a6442..655d41e78 100644
--- a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -1,5 +1,4 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
diff --git a/src/features/chats/components/chat.tsx b/src/features/chats/components/chat.tsx
index e7ef9c68d..82a78a8ec 100644
--- a/src/features/chats/components/chat.tsx
+++ b/src/features/chats/components/chat.tsx
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import clsx from 'clsx';
-import React, { MutableRefObject, useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media';
diff --git a/src/features/chats/components/ui/pane.tsx b/src/features/chats/components/ui/pane.tsx
index db9fc9666..b09cc8704 100644
--- a/src/features/chats/components/ui/pane.tsx
+++ b/src/features/chats/components/ui/pane.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IPane {
   /** Whether the pane is open or minimized. */
diff --git a/src/features/chats/index.tsx b/src/features/chats/index.tsx
index c54bab37b..e44d5695c 100644
--- a/src/features/chats/index.tsx
+++ b/src/features/chats/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { ChatProvider } from 'soapbox/contexts/chat-context';
 
diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx
index 69dab59ac..111990237 100644
--- a/src/features/community-timeline/index.tsx
+++ b/src/features/community-timeline/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { expandCommunityTimeline } from 'soapbox/actions/timelines';
diff --git a/src/features/compose/components/autosuggest-account.tsx b/src/features/compose/components/autosuggest-account.tsx
index d3b3a295f..1b3d2c3bd 100644
--- a/src/features/compose/components/autosuggest-account.tsx
+++ b/src/features/compose/components/autosuggest-account.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { useAccount } from 'soapbox/api/hooks';
 import Account from 'soapbox/components/account';
diff --git a/src/features/compose/components/compose-form-button.tsx b/src/features/compose/components/compose-form-button.tsx
index 3002f2e1e..fd552107c 100644
--- a/src/features/compose/components/compose-form-button.tsx
+++ b/src/features/compose/components/compose-form-button.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import { IconButton } from 'soapbox/components/ui';
 
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index af8218509..8cba0f713 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -2,7 +2,7 @@ import lockIcon from '@tabler/icons/outline/lock.svg';
 import mailIcon from '@tabler/icons/outline/mail.svg';
 import clsx from 'clsx';
 import { CLEAR_EDITOR_COMMAND, TextNode, type LexicalEditor, $getRoot } from 'lexical';
-import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { length } from 'stringz';
diff --git a/src/features/compose/components/markdown-button.tsx b/src/features/compose/components/markdown-button.tsx
index 62e3621b7..13fcfebda 100644
--- a/src/features/compose/components/markdown-button.tsx
+++ b/src/features/compose/components/markdown-button.tsx
@@ -1,5 +1,4 @@
 import markdownIcon from '@tabler/icons/outline/markdown.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeComposeContentType } from 'soapbox/actions/compose';
diff --git a/src/features/compose/components/poll-button.tsx b/src/features/compose/components/poll-button.tsx
index 0ef868a10..81463a0de 100644
--- a/src/features/compose/components/poll-button.tsx
+++ b/src/features/compose/components/poll-button.tsx
@@ -1,5 +1,4 @@
 import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addPoll, removePoll } from 'soapbox/actions/compose';
diff --git a/src/features/compose/components/polls/duration-selector.test.tsx b/src/features/compose/components/polls/duration-selector.test.tsx
index 02cab0f7e..b221ade24 100644
--- a/src/features/compose/components/polls/duration-selector.test.tsx
+++ b/src/features/compose/components/polls/duration-selector.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/compose/components/polls/duration-selector.tsx b/src/features/compose/components/polls/duration-selector.tsx
index 72b5de8bd..5b35daa83 100644
--- a/src/features/compose/components/polls/duration-selector.tsx
+++ b/src/features/compose/components/polls/duration-selector.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Select } from 'soapbox/components/ui';
diff --git a/src/features/compose/components/polls/poll-form.tsx b/src/features/compose/components/polls/poll-form.tsx
index e28fac52f..2877e4071 100644
--- a/src/features/compose/components/polls/poll-form.tsx
+++ b/src/features/compose/components/polls/poll-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { addPollOption, changePollOption, changePollSettings, clearComposeSuggestions, fetchComposeSuggestions, removePoll, removePollOption, selectComposeSuggestion } from 'soapbox/actions/compose';
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 0063ad65b..8f31f08d5 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -4,7 +4,7 @@ import mailIcon from '@tabler/icons/outline/mail.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { spring } from 'react-motion';
 // @ts-ignore
diff --git a/src/features/compose/components/reply-group-indicator.tsx b/src/features/compose/components/reply-group-indicator.tsx
index 2554ee67f..b3764f50f 100644
--- a/src/features/compose/components/reply-group-indicator.tsx
+++ b/src/features/compose/components/reply-group-indicator.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Link from 'soapbox/components/link';
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index 694ace5cb..840ca5f79 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -1,6 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import Markup from 'soapbox/components/markup';
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index eb96b4b44..60f3e293c 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/compose/components/schedule-button.tsx b/src/features/compose/components/schedule-button.tsx
index 65ebce9a7..c43a85b24 100644
--- a/src/features/compose/components/schedule-button.tsx
+++ b/src/features/compose/components/schedule-button.tsx
@@ -1,5 +1,4 @@
 import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addSchedule, removeSchedule } from 'soapbox/actions/compose';
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index 2c5acfeca..9a8dc4808 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -1,5 +1,4 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setSchedule, removeSchedule } from 'soapbox/actions/compose';
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index a6cc2df1a..19ed7f0ae 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -1,6 +1,6 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search';
diff --git a/src/features/compose/components/search-zap-split.tsx b/src/features/compose/components/search-zap-split.tsx
index d1efcf706..892b4262f 100644
--- a/src/features/compose/components/search-zap-split.tsx
+++ b/src/features/compose/components/search-zap-split.tsx
@@ -1,7 +1,7 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index 8c48c15b6..b1d79a4a2 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -2,7 +2,7 @@ import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/compose/components/spoiler-button.tsx b/src/features/compose/components/spoiler-button.tsx
index 38eca8177..7f23a578d 100644
--- a/src/features/compose/components/spoiler-button.tsx
+++ b/src/features/compose/components/spoiler-button.tsx
@@ -1,5 +1,4 @@
 import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeComposeSpoilerness } from 'soapbox/actions/compose';
diff --git a/src/features/compose/components/spoiler-input.tsx b/src/features/compose/components/spoiler-input.tsx
index 183f58812..e9e79173a 100644
--- a/src/features/compose/components/spoiler-input.tsx
+++ b/src/features/compose/components/spoiler-input.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeComposeSpoilerness, changeComposeSpoilerText } from 'soapbox/actions/compose';
@@ -18,7 +18,7 @@ interface ISpoilerInput extends Pick<IAutosuggestInput, 'onSuggestionsFetchReque
 }
 
 /** Text input for content warning in composer. */
-const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
+const SpoilerInput = forwardRef<AutosuggestInput, ISpoilerInput>(({
   composeId,
   onSuggestionsFetchRequested,
   onSuggestionsClearRequested,
diff --git a/src/features/compose/components/text-character-counter.tsx b/src/features/compose/components/text-character-counter.tsx
index fc7ddc989..7f1b6e13a 100644
--- a/src/features/compose/components/text-character-counter.tsx
+++ b/src/features/compose/components/text-character-counter.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { length } from 'stringz';
 
 interface ITextCharacterCounter {
diff --git a/src/features/compose/components/upload-button.tsx b/src/features/compose/components/upload-button.tsx
index a2fb80c67..68ea472fd 100644
--- a/src/features/compose/components/upload-button.tsx
+++ b/src/features/compose/components/upload-button.tsx
@@ -1,6 +1,6 @@
 import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
 import photoIcon from '@tabler/icons/outline/photo.svg';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
 import { IconButton } from 'soapbox/components/ui';
diff --git a/src/features/compose/components/upload-form.tsx b/src/features/compose/components/upload-form.tsx
index ac6ea3d8d..424e9aaac 100644
--- a/src/features/compose/components/upload-form.tsx
+++ b/src/features/compose/components/upload-form.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 
 import { changeMediaOrder } from 'soapbox/actions/compose';
 import { HStack } from 'soapbox/components/ui';
diff --git a/src/features/compose/components/upload-progress.tsx b/src/features/compose/components/upload-progress.tsx
index a3b9c0758..8652e64bb 100644
--- a/src/features/compose/components/upload-progress.tsx
+++ b/src/features/compose/components/upload-progress.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import UploadProgress from 'soapbox/components/upload-progress';
 import { useCompose } from 'soapbox/hooks';
diff --git a/src/features/compose/components/upload.tsx b/src/features/compose/components/upload.tsx
index 9d3a588e2..fa834fd8e 100644
--- a/src/features/compose/components/upload.tsx
+++ b/src/features/compose/components/upload.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { undoUploadCompose, changeUploadCompose } from 'soapbox/actions/compose';
 import Upload from 'soapbox/components/upload';
diff --git a/src/features/compose/components/visual-character-counter.tsx b/src/features/compose/components/visual-character-counter.tsx
index 647b3e8c3..b056d235e 100644
--- a/src/features/compose/components/visual-character-counter.tsx
+++ b/src/features/compose/components/visual-character-counter.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { length } from 'stringz';
 
diff --git a/src/features/compose/components/warning.tsx b/src/features/compose/components/warning.tsx
index 28f7edf64..15185e263 100644
--- a/src/features/compose/components/warning.tsx
+++ b/src/features/compose/components/warning.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { spring } from 'react-motion';
 
 import Motion from '../../ui/util/optional-motion';
diff --git a/src/features/compose/containers/quoted-status-container.tsx b/src/features/compose/containers/quoted-status-container.tsx
index 5383aaf18..56d341e9d 100644
--- a/src/features/compose/containers/quoted-status-container.tsx
+++ b/src/features/compose/containers/quoted-status-container.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { cancelQuoteCompose } from 'soapbox/actions/compose';
 import QuotedStatus from 'soapbox/components/quoted-status';
diff --git a/src/features/compose/containers/warning-container.tsx b/src/features/compose/containers/warning-container.tsx
index 8ebfd5f8f..bbfc199cb 100644
--- a/src/features/compose/containers/warning-container.tsx
+++ b/src/features/compose/containers/warning-container.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx
index eeb6c1f02..eccf8f8c6 100644
--- a/src/features/compose/editor/index.tsx
+++ b/src/features/compose/editor/index.tsx
@@ -15,7 +15,7 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import clsx from 'clsx';
 import { $createParagraphNode, $createTextNode, $getRoot, type LexicalEditor } from 'lexical';
-import React, { useMemo, useState } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { useAppDispatch } from 'soapbox/hooks';
@@ -68,7 +68,7 @@ const theme: InitialConfigType['theme'] = {
   },
 };
 
-const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
+const ComposeEditor = forwardRef<LexicalEditor, IComposeEditor>(({
   className,
   placeholderClassName,
   composeId,
diff --git a/src/features/compose/editor/nodes/emoji-node.tsx b/src/features/compose/editor/nodes/emoji-node.tsx
index d773a063c..81a39a05c 100644
--- a/src/features/compose/editor/nodes/emoji-node.tsx
+++ b/src/features/compose/editor/nodes/emoji-node.tsx
@@ -1,5 +1,4 @@
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
-import React from 'react';
 
 import { Emoji as Component } from 'soapbox/components/ui';
 import { isNativeEmoji, type Emoji } from 'soapbox/features/emoji';
diff --git a/src/features/compose/editor/nodes/mention-node.tsx b/src/features/compose/editor/nodes/mention-node.tsx
index 7ea8646ae..7ebe49644 100644
--- a/src/features/compose/editor/nodes/mention-node.tsx
+++ b/src/features/compose/editor/nodes/mention-node.tsx
@@ -5,7 +5,6 @@
  */
 
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
-import React from 'react';
 
 import Mention from 'soapbox/components/mention';
 
diff --git a/src/features/compose/editor/plugins/autosuggest-plugin.tsx b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
index 834d04721..ca4e4cf8b 100644
--- a/src/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -22,9 +22,10 @@ import {
   RangeSelection,
   TextNode,
 } from 'lexical';
-import React, {
+import {
   MutableRefObject,
   ReactPortal,
+  startTransition,
   useCallback,
   useEffect,
   useRef,
@@ -101,14 +102,6 @@ const isSelectionOnEntityBoundary = (
   });
 };
 
-const startTransition = (callback: () => void) => {
-  if (React.startTransition) {
-    React.startTransition(callback);
-  } else {
-    callback();
-  }
-};
-
 // Got from https://stackoverflow.com/a/42543908/2013580
 const getScrollParent = (
   element: HTMLElement,
diff --git a/src/features/compose/editor/plugins/ref-plugin.tsx b/src/features/compose/editor/plugins/ref-plugin.tsx
index b13cea3e1..e91fbc93b 100644
--- a/src/features/compose/editor/plugins/ref-plugin.tsx
+++ b/src/features/compose/editor/plugins/ref-plugin.tsx
@@ -1,9 +1,9 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { LexicalEditor } from 'lexical';
-import React, { useEffect } from 'react';
+import { forwardRef, useEffect } from 'react';
 
 /** Set the ref to the current Lexical editor instance. */
-const RefPlugin = React.forwardRef<LexicalEditor>((_props, ref) => {
+const RefPlugin = forwardRef<LexicalEditor>((_props, ref) => {
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {
diff --git a/src/features/conversations/components/conversation.tsx b/src/features/conversations/components/conversation.tsx
index 20cbf4d98..eb390a305 100644
--- a/src/features/conversations/components/conversation.tsx
+++ b/src/features/conversations/components/conversation.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { markConversationRead } from 'soapbox/actions/conversations';
diff --git a/src/features/conversations/components/conversations-list.tsx b/src/features/conversations/components/conversations-list.tsx
index 65c2ef3e1..6fd74bf7e 100644
--- a/src/features/conversations/components/conversations-list.tsx
+++ b/src/features/conversations/components/conversations-list.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { expandConversations } from 'soapbox/actions/conversations';
diff --git a/src/features/conversations/index.tsx b/src/features/conversations/index.tsx
index 1f6774ab9..1bd0f2074 100644
--- a/src/features/conversations/index.tsx
+++ b/src/features/conversations/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { directComposeById } from 'soapbox/actions/compose';
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index fa6f4c0ba..860110936 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,6 +1,5 @@
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
-import React from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import CopyableInput from 'soapbox/components/copyable-input';
diff --git a/src/features/crypto-donate/components/crypto-donate-panel.tsx b/src/features/crypto-donate/components/crypto-donate-panel.tsx
index b61a7bad1..0c0df631e 100644
--- a/src/features/crypto-donate/components/crypto-donate-panel.tsx
+++ b/src/features/crypto-donate/components/crypto-donate-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/crypto-donate/components/crypto-icon.tsx b/src/features/crypto-donate/components/crypto-icon.tsx
index f135c3bc3..b2e646bbe 100644
--- a/src/features/crypto-donate/components/crypto-icon.tsx
+++ b/src/features/crypto-donate/components/crypto-icon.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import genericIcon from 'soapbox/assets/cryptocurrency/generic.svg';
 
diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx
index 29d70ae07..476def29d 100644
--- a/src/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -1,6 +1,5 @@
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { QRCodeCanvas as QRCode } from 'qrcode.react';
-import React from 'react';
 
 import CopyableInput from 'soapbox/components/copyable-input';
 import Icon from 'soapbox/components/icon';
diff --git a/src/features/crypto-donate/components/lightning-address.tsx b/src/features/crypto-donate/components/lightning-address.tsx
index aa52d61f3..2f73793a4 100644
--- a/src/features/crypto-donate/components/lightning-address.tsx
+++ b/src/features/crypto-donate/components/lightning-address.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import CopyableInput from 'soapbox/components/copyable-input';
diff --git a/src/features/crypto-donate/components/site-wallet.tsx b/src/features/crypto-donate/components/site-wallet.tsx
index 0494ecf46..e8d7bc6d9 100644
--- a/src/features/crypto-donate/components/site-wallet.tsx
+++ b/src/features/crypto-donate/components/site-wallet.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Stack } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
diff --git a/src/features/crypto-donate/index.tsx b/src/features/crypto-donate/index.tsx
index cb3fa1f7e..980f7dd31 100644
--- a/src/features/crypto-donate/index.tsx
+++ b/src/features/crypto-donate/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { Accordion, Column, Stack } from 'soapbox/components/ui';
diff --git a/src/features/delete-account/index.tsx b/src/features/delete-account/index.tsx
index aaeecc789..6a32b5175 100644
--- a/src/features/delete-account/index.tsx
+++ b/src/features/delete-account/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { deleteAccount } from 'soapbox/actions/security';
@@ -21,16 +21,16 @@ const DeleteAccount = () => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
 
-  const [password, setPassword] = React.useState('');
-  const [isLoading, setLoading] = React.useState(false);
+  const [password, setPassword] = useState('');
+  const [isLoading, setLoading] = useState(false);
 
-  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     event.persist();
 
     setPassword(event.target.value);
   }, []);
 
-  const handleSubmit = React.useCallback(() => {
+  const handleSubmit = useCallback(() => {
     setLoading(true);
     dispatch(deleteAccount(password)).then(() => {
       setPassword('');
diff --git a/src/features/developers/apps/create.tsx b/src/features/developers/apps/create.tsx
index 24e1de995..bf69a7f7c 100644
--- a/src/features/developers/apps/create.tsx
+++ b/src/features/developers/apps/create.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
 import { createApp } from 'soapbox/actions/apps';
diff --git a/src/features/developers/components/indicator.tsx b/src/features/developers/components/indicator.tsx
index b4d3a2a06..70a5ce62d 100644
--- a/src/features/developers/components/indicator.tsx
+++ b/src/features/developers/components/indicator.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IIndicator {
   state?: 'active' | 'pending' | 'error' | 'inactive';
diff --git a/src/features/developers/developers-challenge.tsx b/src/features/developers/developers-challenge.tsx
index cc379975e..520fbdccc 100644
--- a/src/features/developers/developers-challenge.tsx
+++ b/src/features/developers/developers-challenge.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { changeSettingImmediate } from 'soapbox/actions/settings';
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index 37b0718d9..083511e78 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -6,7 +6,6 @@ import moodSadIcon from '@tabler/icons/outline/mood-sad.svg';
 import refreshIcon from '@tabler/icons/outline/refresh.svg';
 import scriptIcon from '@tabler/icons/outline/script.svg';
 import urgentIcon from '@tabler/icons/outline/urgent.svg';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
diff --git a/src/features/developers/index.tsx b/src/features/developers/index.tsx
index 378207e46..6ac4104a4 100644
--- a/src/features/developers/index.tsx
+++ b/src/features/developers/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { getSettings } from 'soapbox/actions/settings';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/src/features/developers/service-worker-info.tsx b/src/features/developers/service-worker-info.tsx
index 7b786e95f..b173dc541 100644
--- a/src/features/developers/service-worker-info.tsx
+++ b/src/features/developers/service-worker-info.tsx
@@ -1,5 +1,5 @@
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list';
diff --git a/src/features/developers/settings-store.tsx b/src/features/developers/settings-store.tsx
index 828ee8d42..b924b359f 100644
--- a/src/features/developers/settings-store.tsx
+++ b/src/features/developers/settings-store.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
diff --git a/src/features/direct-timeline/index.tsx b/src/features/direct-timeline/index.tsx
index ba8ba1cb0..68458e267 100644
--- a/src/features/direct-timeline/index.tsx
+++ b/src/features/direct-timeline/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { directComposeById } from 'soapbox/actions/compose';
diff --git a/src/features/directory/components/account-card.tsx b/src/features/directory/components/account-card.tsx
index 3e28821b1..00cb0f629 100644
--- a/src/features/directory/components/account-card.tsx
+++ b/src/features/directory/components/account-card.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { getSettings } from 'soapbox/actions/settings';
diff --git a/src/features/directory/index.tsx b/src/features/directory/index.tsx
index 1af516140..f99de51d8 100644
--- a/src/features/directory/index.tsx
+++ b/src/features/directory/index.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 
diff --git a/src/features/domain-blocks/index.tsx b/src/features/domain-blocks/index.tsx
index cf8978ad9..350318465 100644
--- a/src/features/domain-blocks/index.tsx
+++ b/src/features/domain-blocks/index.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { fetchDomainBlocks, expandDomainBlocks } from 'soapbox/actions/domain-blocks';
@@ -24,7 +24,7 @@ const DomainBlocks: React.FC = () => {
   const domains = useAppSelector((state) => state.domain_lists.blocks.items);
   const hasMore = useAppSelector((state) => !!state.domain_lists.blocks.next);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchDomainBlocks());
   }, []);
 
diff --git a/src/features/edit-email/index.tsx b/src/features/edit-email/index.tsx
index 70d511ce1..257f29be0 100644
--- a/src/features/edit-email/index.tsx
+++ b/src/features/edit-email/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeEmail } from 'soapbox/actions/security';
@@ -23,18 +23,18 @@ const EditEmail = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [state, setState] = React.useState(initialState);
-  const [isLoading, setLoading] = React.useState(false);
+  const [state, setState] = useState(initialState);
+  const [isLoading, setLoading] = useState(false);
 
   const { email, password } = state;
 
-  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((event) => {
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
     event.persist();
 
     setState((prevState) => ({ ...prevState, [event.target.name]: event.target.value }));
   }, []);
 
-  const handleSubmit = React.useCallback(() => {
+  const handleSubmit = useCallback(() => {
     setLoading(true);
     dispatch(changeEmail(email, password)).then(() => {
       setState(initialState);
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index 3e27f5c2f..be9f4d1b8 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -1,6 +1,6 @@
 import atIcon from '@tabler/icons/outline/at.svg';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
diff --git a/src/features/edit-password/index.tsx b/src/features/edit-password/index.tsx
index 7761f77a2..c35074ec5 100644
--- a/src/features/edit-password/index.tsx
+++ b/src/features/edit-password/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changePassword } from 'soapbox/actions/security';
@@ -23,20 +23,20 @@ const EditPassword = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [state, setState] = React.useState(initialState);
-  const [isLoading, setLoading] = React.useState(false);
+  const [state, setState] = useState(initialState);
+  const [isLoading, setLoading] = useState(false);
 
   const { currentPassword, newPassword, newPasswordConfirmation } = state;
 
   const resetState = () => setState(initialState);
 
-  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((event) => {
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
     event.persist();
 
     setState((prevState) => ({ ...prevState, [event.target.name]: event.target.value }));
   }, []);
 
-  const handleSubmit = React.useCallback(() => {
+  const handleSubmit = useCallback(() => {
     setLoading(true);
     dispatch(changePassword(currentPassword, newPassword, newPasswordConfirmation)).then(() => {
       resetState();
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index 18d5d6ffa..10f272bc1 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -1,6 +1,6 @@
 import cameraPlusIcon from '@tabler/icons/outline/camera-plus.svg';
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Avatar, Icon, HStack } from 'soapbox/components/ui';
@@ -14,7 +14,7 @@ interface IMediaInput {
   disabled?: boolean;
 }
 
-const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ className, src, onChange, accept, disabled }, ref) => {
+const AvatarPicker = forwardRef<HTMLInputElement, IMediaInput>(({ className, src, onChange, accept, disabled }, ref) => {
   const picker = useRef<HTMLLabelElement>(null);
 
   const { isDragging, isDraggedOver } = useDraggedFiles(picker, (files) => {
diff --git a/src/features/edit-profile/components/header-picker.tsx b/src/features/edit-profile/components/header-picker.tsx
index 88a8b2069..1fc3ab601 100644
--- a/src/features/edit-profile/components/header-picker.tsx
+++ b/src/features/edit-profile/components/header-picker.tsx
@@ -1,7 +1,7 @@
 import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
@@ -19,7 +19,7 @@ interface IMediaInput {
   disabled?: boolean;
 }
 
-const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, onClear, accept, disabled }, ref) => {
+const HeaderPicker = forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, onClear, accept, disabled }, ref) => {
   const intl = useIntl();
 
   const picker = useRef<HTMLLabelElement>(null);
diff --git a/src/features/edit-profile/index.tsx b/src/features/edit-profile/index.tsx
index f5268196a..9bb139783 100644
--- a/src/features/edit-profile/index.tsx
+++ b/src/features/edit-profile/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { updateNotificationSettings } from 'soapbox/actions/accounts';
diff --git a/src/features/email-confirmation/index.tsx b/src/features/email-confirmation/index.tsx
index 3088e5b41..68cbec1f6 100644
--- a/src/features/email-confirmation/index.tsx
+++ b/src/features/email-confirmation/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
@@ -24,9 +24,9 @@ const EmailConfirmation = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [status, setStatus] = React.useState(Statuses.IDLE);
+  const [status, setStatus] = useState(Statuses.IDLE);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (token) {
       dispatch(confirmChangedEmail(token))
         .then(() => {
@@ -39,14 +39,7 @@ const EmailConfirmation = () => {
 
           if (error.response.data.error) {
             const message = buildErrorMessage(error.response.data.error);
-
-            toast.error(
-              message,
-              // intl.formatMessage({
-              //   id: 'email_confirmation.fail',
-              //   defaultMessage,
-              // }),
-            );
+            toast.error(message);
           }
         });
     }
diff --git a/src/features/embedded-status/index.tsx b/src/features/embedded-status/index.tsx
index ed97170cf..066e2bdd5 100644
--- a/src/features/embedded-status/index.tsx
+++ b/src/features/embedded-status/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { fetchStatus } from 'soapbox/actions/statuses';
diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index f3167f61b..7a0d634d6 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -1,5 +1,5 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useEffect, useState, useLayoutEffect, Suspense } from 'react';
+import { useEffect, useState, useLayoutEffect, Suspense } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
diff --git a/src/features/emoji/components/emoji-picker.tsx b/src/features/emoji/components/emoji-picker.tsx
index cb34ed2f1..adb680792 100644
--- a/src/features/emoji/components/emoji-picker.tsx
+++ b/src/features/emoji/components/emoji-picker.tsx
@@ -1,6 +1,6 @@
 import spriteSheet from 'emoji-datasource/img/twitter/sheets/32.png';
 import { Picker as EmojiPicker } from 'emoji-mart';
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 import { joinPublicPath } from 'soapbox/utils/static';
 
diff --git a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index b38f332f7..1206d6fbd 100644
--- a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -1,7 +1,7 @@
 import { useFloating, shift } from '@floating-ui/react';
 import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
 import clsx from 'clsx';
-import React, { KeyboardEvent, useState } from 'react';
+import { KeyboardEvent, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index 7dcb6a7b7..f205d19a4 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -1,6 +1,5 @@
 import banIcon from '@tabler/icons/outline/ban.svg';
 import checkIcon from '@tabler/icons/outline/check.svg';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { joinEvent, leaveEvent } from 'soapbox/actions/events';
diff --git a/src/features/event/components/event-date.tsx b/src/features/event/components/event-date.tsx
index e657bf4de..952a74425 100644
--- a/src/features/event/components/event-date.tsx
+++ b/src/features/event/components/event-date.tsx
@@ -1,5 +1,4 @@
 import calendarIcon from '@tabler/icons/outline/calendar.svg';
-import React from 'react';
 import { FormattedDate } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index 624fe727d..cbe475a68 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -22,7 +22,6 @@ import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import usersIcon from '@tabler/icons/outline/users.svg';
 import { List as ImmutableList } from 'immutable';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx
index cd11b1916..b9481ab28 100644
--- a/src/features/event/event-discussion.tsx
+++ b/src/features/event/event-discussion.tsx
@@ -1,6 +1,6 @@
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { eventDiscussionCompose } from 'soapbox/actions/compose';
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index bcb13c9e4..d10fe92d7 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -1,7 +1,7 @@
 import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import linkIcon from '@tabler/icons/outline/link.svg';
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
-import React, { useCallback, useEffect, useState } from 'react';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
@@ -64,16 +64,16 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
     if (!event.location) return null;
 
     const text = [
-      <React.Fragment key='event-name'>
+      <Fragment key='event-name'>
         {event.location.get('name')}
-      </React.Fragment>,
+      </Fragment>,
     ];
 
     if (event.location.get('street')?.trim()) {
       text.push (
-        <React.Fragment key='event-street'>
+        <Fragment key='event-street'>
           <br />{event.location.get('street')}
-        </React.Fragment>,
+        </Fragment>,
       );
     }
 
@@ -81,21 +81,21 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
 
     if (address) {
       text.push(
-        <React.Fragment key='event-address'>
+        <Fragment key='event-address'>
           <br />
           {address}
-        </React.Fragment>,
+        </Fragment>,
       );
     }
 
     if (tileServer && event.location.get('latitude')) {
       text.push(
-        <React.Fragment key='event-map'>
+        <Fragment key='event-map'>
           <br />
           <a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
             <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
           </a>
-        </React.Fragment>,
+        </Fragment>,
       );
     }
 
diff --git a/src/features/events/components/event-carousel.tsx b/src/features/events/components/event-carousel.tsx
index f22619651..670a56ca1 100644
--- a/src/features/events/components/event-carousel.tsx
+++ b/src/features/events/components/event-carousel.tsx
@@ -1,6 +1,6 @@
 import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
 
diff --git a/src/features/events/index.tsx b/src/features/events/index.tsx
index 831712ccf..44cd1642b 100644
--- a/src/features/events/index.tsx
+++ b/src/features/events/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events';
diff --git a/src/features/export-data/components/csv-exporter.tsx b/src/features/export-data/components/csv-exporter.tsx
index 4210c0a33..b748f3239 100644
--- a/src/features/export-data/components/csv-exporter.tsx
+++ b/src/features/export-data/components/csv-exporter.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
 import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
diff --git a/src/features/export-data/index.tsx b/src/features/export-data/index.tsx
index 27273c339..38432dbd5 100644
--- a/src/features/export-data/index.tsx
+++ b/src/features/export-data/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
diff --git a/src/features/external-login/components/external-login-form.tsx b/src/features/external-login/components/external-login-form.tsx
index 570666679..ef3a49f17 100644
--- a/src/features/external-login/components/external-login-form.tsx
+++ b/src/features/external-login/components/external-login-form.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
 import { externalLogin, loginWithCode } from 'soapbox/actions/external-auth';
diff --git a/src/features/external-login/index.tsx b/src/features/external-login/index.tsx
index 507797f9a..9220bce39 100644
--- a/src/features/external-login/index.tsx
+++ b/src/features/external-login/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { BigCard } from 'soapbox/components/big-card';
diff --git a/src/features/favourited-statuses/index.tsx b/src/features/favourited-statuses/index.tsx
index a9a2aa0a1..316c4f38d 100644
--- a/src/features/favourited-statuses/index.tsx
+++ b/src/features/favourited-statuses/index.tsx
@@ -1,6 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts';
diff --git a/src/features/federation-restrictions/components/instance-restrictions.tsx b/src/features/federation-restrictions/components/instance-restrictions.tsx
index f0f38dc58..c77b8de85 100644
--- a/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -5,7 +5,6 @@ import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import shieldCheckIcon from '@tabler/icons/outline/shield-check.svg';
 import shieldLockIcon from '@tabler/icons/outline/shield-lock.svg';
 import shieldXIcon from '@tabler/icons/outline/shield-x.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 4835371f0..9ac14c1a7 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -1,7 +1,7 @@
 import caretDownIcon from '@tabler/icons/outline/caret-down.svg';
 import caretRightIcon from '@tabler/icons/outline/caret-right.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import Icon from 'soapbox/components/icon';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/src/features/federation-restrictions/index.tsx b/src/features/federation-restrictions/index.tsx
index 0d980e1cd..ed51dbee9 100644
--- a/src/features/federation-restrictions/index.tsx
+++ b/src/features/federation-restrictions/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
diff --git a/src/features/feed-suggestions/feed-suggestions.tsx b/src/features/feed-suggestions/feed-suggestions.tsx
index 44179f338..43e4f2e64 100644
--- a/src/features/feed-suggestions/feed-suggestions.tsx
+++ b/src/features/feed-suggestions/feed-suggestions.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx
index 3501542ac..162fcde91 100644
--- a/src/features/filters/edit-filter.tsx
+++ b/src/features/filters/edit-filter.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/filters/index.tsx b/src/features/filters/index.tsx
index 52e647cef..674877a01 100644
--- a/src/features/filters/index.tsx
+++ b/src/features/filters/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/follow-recommendations/index.tsx b/src/features/follow-recommendations/index.tsx
index 703e23101..aec2b6fb4 100644
--- a/src/features/follow-recommendations/index.tsx
+++ b/src/features/follow-recommendations/index.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchSuggestions } from 'soapbox/actions/suggestions';
diff --git a/src/features/follow-requests/components/account-authorize.tsx b/src/features/follow-requests/components/account-authorize.tsx
index 5abb8671a..01dc3ff71 100644
--- a/src/features/follow-requests/components/account-authorize.tsx
+++ b/src/features/follow-requests/components/account-authorize.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
 import { useAccount } from 'soapbox/api/hooks';
diff --git a/src/features/follow-requests/index.tsx b/src/features/follow-requests/index.tsx
index f89681a01..fe3b40f7d 100644
--- a/src/features/follow-requests/index.tsx
+++ b/src/features/follow-requests/index.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accounts';
@@ -24,7 +24,7 @@ const FollowRequests: React.FC = () => {
   const accountIds = useAppSelector((state) => state.user_lists.follow_requests.items);
   const hasMore = useAppSelector((state) => !!state.user_lists.follow_requests.next);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchFollowRequests());
   }, []);
 
diff --git a/src/features/followed-tags/index.tsx b/src/features/followed-tags/index.tsx
index 6745f5fc0..2cb1c4bfb 100644
--- a/src/features/followed-tags/index.tsx
+++ b/src/features/followed-tags/index.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { fetchFollowedHashtags, expandFollowedHashtags } from 'soapbox/actions/tags';
diff --git a/src/features/followers/index.tsx b/src/features/followers/index.tsx
index 8847beb11..b3a721eb2 100644
--- a/src/features/followers/index.tsx
+++ b/src/features/followers/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { useAccountLookup, useFollowers } from 'soapbox/api/hooks';
diff --git a/src/features/following/index.tsx b/src/features/following/index.tsx
index f5c4c3475..088618f16 100644
--- a/src/features/following/index.tsx
+++ b/src/features/following/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { useAccountLookup, useFollowing } from 'soapbox/api/hooks';
diff --git a/src/features/forms/index.tsx b/src/features/forms/index.tsx
index d7f3cff9c..4efa3d8c6 100644
--- a/src/features/forms/index.tsx
+++ b/src/features/forms/index.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { Children, useState } from 'react';
 
 import { Select } from '../../components/ui';
 
@@ -37,7 +37,7 @@ interface ILabelInputContainer {
 
 export const LabelInputContainer: React.FC<ILabelInputContainer> = ({ label, hint, children }) => {
   const [id] = useState(crypto.randomUUID());
-  const childrenWithProps = React.Children.map(children, child => (
+  const childrenWithProps = Children.map(children, child => (
     // @ts-ignore: not sure how to get the right type here
     React.cloneElement(child, { id: id, key: id })
   ));
diff --git a/src/features/generic-not-found/index.tsx b/src/features/generic-not-found/index.tsx
index 0ec9241e3..174e9f3e1 100644
--- a/src/features/generic-not-found/index.tsx
+++ b/src/features/generic-not-found/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import MissingIndicator from '../../components/missing-indicator';
 
diff --git a/src/features/group/components/group-action-button.test.tsx b/src/features/group/components/group-action-button.test.tsx
index da82deffd..55a95ce53 100644
--- a/src/features/group/components/group-action-button.test.tsx
+++ b/src/features/group/components/group-action-button.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
diff --git a/src/features/group/components/group-action-button.tsx b/src/features/group/components/group-action-button.tsx
index e19e3563f..733de9809 100644
--- a/src/features/group/components/group-action-button.tsx
+++ b/src/features/group/components/group-action-button.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups';
diff --git a/src/features/group/components/group-header-image.tsx b/src/features/group/components/group-header-image.tsx
index 273c2ef8e..6449a0de8 100644
--- a/src/features/group/components/group-header-image.tsx
+++ b/src/features/group/components/group-header-image.tsx
@@ -1,6 +1,6 @@
 import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon } from 'soapbox/components/ui';
diff --git a/src/features/group/components/group-header.test.tsx b/src/features/group/components/group-header.test.tsx
index 10cc51741..31325e78d 100644
--- a/src/features/group/components/group-header.test.tsx
+++ b/src/features/group/components/group-header.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildGroup } from 'soapbox/jest/factory';
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index 5d28a9939..ff4808ad7 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -1,6 +1,6 @@
 import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import { List as ImmutableList } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/group/components/group-member-count.test.tsx b/src/features/group/components/group-member-count.test.tsx
index afae751ee..470b92b8c 100644
--- a/src/features/group/components/group-member-count.test.tsx
+++ b/src/features/group/components/group-member-count.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { buildGroup } from 'soapbox/jest/factory';
diff --git a/src/features/group/components/group-member-count.tsx b/src/features/group/components/group-member-count.tsx
index 134210f9f..5e638d33f 100644
--- a/src/features/group/components/group-member-count.tsx
+++ b/src/features/group/components/group-member-count.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/group/components/group-member-list-item.test.tsx b/src/features/group/components/group-member-list-item.test.tsx
index 923b54c64..f36e6f107 100644
--- a/src/features/group/components/group-member-list-item.test.tsx
+++ b/src/features/group/components/group-member-list-item.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
diff --git a/src/features/group/components/group-member-list-item.tsx b/src/features/group/components/group-member-list-item.tsx
index 5e3ec2637..c2513545c 100644
--- a/src/features/group/components/group-member-list-item.tsx
+++ b/src/features/group/components/group-member-list-item.tsx
@@ -2,7 +2,7 @@ import banIcon from '@tabler/icons/outline/ban.svg';
 import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
 import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { groupKick } from 'soapbox/actions/groups';
diff --git a/src/features/group/components/group-options-button.test.tsx b/src/features/group/components/group-options-button.test.tsx
index 030696671..250f47072 100644
--- a/src/features/group/components/group-options-button.test.tsx
+++ b/src/features/group/components/group-options-button.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
diff --git a/src/features/group/components/group-options-button.tsx b/src/features/group/components/group-options-button.tsx
index 64b25ef21..e712fb79a 100644
--- a/src/features/group/components/group-options-button.tsx
+++ b/src/features/group/components/group-options-button.tsx
@@ -3,7 +3,7 @@ import flagIcon from '@tabler/icons/outline/flag.svg';
 import logoutIcon from '@tabler/icons/outline/logout.svg';
 import shareIcon from '@tabler/icons/outline/share.svg';
 import volume3Icon from '@tabler/icons/outline/volume-3.svg';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/group/components/group-privacy.test.tsx b/src/features/group/components/group-privacy.test.tsx
index 15c803c11..51f52ebf9 100644
--- a/src/features/group/components/group-privacy.test.tsx
+++ b/src/features/group/components/group-privacy.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { buildGroup } from 'soapbox/jest/factory';
diff --git a/src/features/group/components/group-privacy.tsx b/src/features/group/components/group-privacy.tsx
index c5ea61761..505cecb63 100644
--- a/src/features/group/components/group-privacy.tsx
+++ b/src/features/group/components/group-privacy.tsx
@@ -1,6 +1,5 @@
 import lockIcon from '@tabler/icons/outline/lock.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, Icon, Popover, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/group/components/group-relationship.test.tsx b/src/features/group/components/group-relationship.test.tsx
index 2ec43e4a3..7ccab7728 100644
--- a/src/features/group/components/group-relationship.test.tsx
+++ b/src/features/group/components/group-relationship.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
diff --git a/src/features/group/components/group-relationship.tsx b/src/features/group/components/group-relationship.tsx
index 69a6a957c..22d728828 100644
--- a/src/features/group/components/group-relationship.tsx
+++ b/src/features/group/components/group-relationship.tsx
@@ -1,6 +1,5 @@
 import gavelIcon from '@tabler/icons/outline/gavel.svg';
 import usersIcon from '@tabler/icons/outline/users.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
diff --git a/src/features/group/components/group-tag-list-item.test.tsx b/src/features/group/components/group-tag-list-item.test.tsx
index 0e44f1e20..9d4b9bf77 100644
--- a/src/features/group/components/group-tag-list-item.test.tsx
+++ b/src/features/group/components/group-tag-list-item.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildGroup, buildGroupTag, buildGroupRelationship } from 'soapbox/jest/factory';
diff --git a/src/features/group/components/group-tag-list-item.tsx b/src/features/group/components/group-tag-list-item.tsx
index 572e995a5..4be20de10 100644
--- a/src/features/group/components/group-tag-list-item.tsx
+++ b/src/features/group/components/group-tag-list-item.tsx
@@ -2,7 +2,6 @@ import pinFilledIcon from '@tabler/icons/filled/pin.svg';
 import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
 import eyeIcon from '@tabler/icons/outline/eye.svg';
 import pinIcon from '@tabler/icons/outline/pin.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/group/components/group-tags-field.tsx b/src/features/group/components/group-tags-field.tsx
index 1a9f3118e..e08d649b4 100644
--- a/src/features/group/components/group-tags-field.tsx
+++ b/src/features/group/components/group-tags-field.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Input, Streamfield } from 'soapbox/components/ui';
diff --git a/src/features/group/edit-group.tsx b/src/features/group/edit-group.tsx
index 4b5fa5062..4353514d4 100644
--- a/src/features/group/edit-group.tsx
+++ b/src/features/group/edit-group.tsx
@@ -1,5 +1,5 @@
 import lockIcon from '@tabler/icons/outline/lock.svg';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { useGroup, useGroupTags, useUpdateGroup } from 'soapbox/api/hooks';
diff --git a/src/features/group/group-blocked-members.tsx b/src/features/group/group-blocked-members.tsx
index 28b25d344..836e950b0 100644
--- a/src/features/group/group-blocked-members.tsx
+++ b/src/features/group/group-blocked-members.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { fetchGroupBlocks, groupUnblock } from 'soapbox/actions/groups';
diff --git a/src/features/group/group-gallery.tsx b/src/features/group/group-gallery.tsx
index a2fd17532..5e46e62e0 100644
--- a/src/features/group/group-gallery.tsx
+++ b/src/features/group/group-gallery.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/group/group-members.tsx b/src/features/group/group-members.tsx
index 0d08d82e8..ce16a63a2 100644
--- a/src/features/group/group-members.tsx
+++ b/src/features/group/group-members.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks';
 import { PendingItemsRow } from 'soapbox/components/pending-items-row';
diff --git a/src/features/group/group-membership-requests.tsx b/src/features/group/group-membership-requests.tsx
index 4eb23b166..a7a28bee2 100644
--- a/src/features/group/group-membership-requests.tsx
+++ b/src/features/group/group-membership-requests.tsx
@@ -1,5 +1,5 @@
 import { AxiosError } from 'axios';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks';
diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx
index b5caee49d..2b83c412d 100644
--- a/src/features/group/group-tag-timeline.tsx
+++ b/src/features/group/group-tag-timeline.tsx
@@ -1,5 +1,5 @@
 import message2Icon from '@tabler/icons/outline/message-2.svg';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { expandGroupTimelineFromTag } from 'soapbox/actions/timelines';
diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx
index f519fbecb..0e2d43779 100644
--- a/src/features/group/group-tags.tsx
+++ b/src/features/group/group-tags.tsx
@@ -1,5 +1,4 @@
 import hashIcon from '@tabler/icons/outline/hash.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { useGroup, useGroupTags } from 'soapbox/api/hooks';
diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx
index 418f9db62..f6db85840 100644
--- a/src/features/group/group-timeline.tsx
+++ b/src/features/group/group-timeline.tsx
@@ -1,6 +1,6 @@
 import message2Icon from '@tabler/icons/outline/message-2.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/group/manage-group.tsx b/src/features/group/manage-group.tsx
index 8dafe252e..eadb1c2c9 100644
--- a/src/features/group/manage-group.tsx
+++ b/src/features/group/manage-group.tsx
@@ -1,5 +1,4 @@
 import trashIcon from '@tabler/icons/outline/trash.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/groups/components/discover/group-grid-item.test.tsx b/src/features/groups/components/discover/group-grid-item.test.tsx
index 3c69468b5..89ef54324 100644
--- a/src/features/groups/components/discover/group-grid-item.test.tsx
+++ b/src/features/groups/components/discover/group-grid-item.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildGroup } from 'soapbox/jest/factory';
diff --git a/src/features/groups/components/discover/group-grid-item.tsx b/src/features/groups/components/discover/group-grid-item.tsx
index 1d0250ebb..8091058eb 100644
--- a/src/features/groups/components/discover/group-grid-item.tsx
+++ b/src/features/groups/components/discover/group-grid-item.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 
 import GroupAvatar from 'soapbox/components/groups/group-avatar';
diff --git a/src/features/groups/components/discover/group-list-item.test.tsx b/src/features/groups/components/discover/group-list-item.test.tsx
index 36a77021c..3e6b78ef6 100644
--- a/src/features/groups/components/discover/group-list-item.test.tsx
+++ b/src/features/groups/components/discover/group-list-item.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildGroup } from 'soapbox/jest/factory';
diff --git a/src/features/groups/components/discover/group-list-item.tsx b/src/features/groups/components/discover/group-list-item.tsx
index 0b3c56057..fb3da6e7a 100644
--- a/src/features/groups/components/discover/group-list-item.tsx
+++ b/src/features/groups/components/discover/group-list-item.tsx
@@ -1,6 +1,5 @@
 import lockIcon from '@tabler/icons/outline/lock.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/groups/components/discover/layout-buttons.test.tsx b/src/features/groups/components/discover/layout-buttons.test.tsx
index 8c8f4d98a..2a980c804 100644
--- a/src/features/groups/components/discover/layout-buttons.test.tsx
+++ b/src/features/groups/components/discover/layout-buttons.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { render, screen, within } from 'soapbox/jest/test-helpers';
diff --git a/src/features/groups/components/discover/layout-buttons.tsx b/src/features/groups/components/discover/layout-buttons.tsx
index dd206975b..7ab6b9cc2 100644
--- a/src/features/groups/components/discover/layout-buttons.tsx
+++ b/src/features/groups/components/discover/layout-buttons.tsx
@@ -1,7 +1,6 @@
 import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
 import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
-import React from 'react';
 
 import { HStack, Icon } from 'soapbox/components/ui';
 
diff --git a/src/features/groups/components/discover/popular-groups.tsx b/src/features/groups/components/discover/popular-groups.tsx
index 83426f553..a590cacd1 100644
--- a/src/features/groups/components/discover/popular-groups.tsx
+++ b/src/features/groups/components/discover/popular-groups.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { usePopularGroups } from 'soapbox/api/hooks';
diff --git a/src/features/groups/components/discover/popular-tags.tsx b/src/features/groups/components/discover/popular-tags.tsx
index 75ff36628..bbeacb822 100644
--- a/src/features/groups/components/discover/popular-tags.tsx
+++ b/src/features/groups/components/discover/popular-tags.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { usePopularTags } from 'soapbox/api/hooks';
diff --git a/src/features/groups/components/discover/search/blankslate.test.tsx b/src/features/groups/components/discover/search/blankslate.test.tsx
index fa116d1c4..4d2a637b1 100644
--- a/src/features/groups/components/discover/search/blankslate.test.tsx
+++ b/src/features/groups/components/discover/search/blankslate.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/features/groups/components/discover/search/blankslate.tsx b/src/features/groups/components/discover/search/blankslate.tsx
index 7d63b8c27..5ad85291d 100644
--- a/src/features/groups/components/discover/search/blankslate.tsx
+++ b/src/features/groups/components/discover/search/blankslate.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Stack, Text } from 'soapbox/components/ui';
 
diff --git a/src/features/groups/components/discover/search/recent-searches.tsx b/src/features/groups/components/discover/search/recent-searches.tsx
index eb5712baf..0215e8e8c 100644
--- a/src/features/groups/components/discover/search/recent-searches.tsx
+++ b/src/features/groups/components/discover/search/recent-searches.tsx
@@ -1,5 +1,5 @@
 import searchIcon from '@tabler/icons/outline/search.svg';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
 
diff --git a/src/features/groups/components/discover/search/results.test.tsx b/src/features/groups/components/discover/search/results.test.tsx
index ac9e30715..d808d83a0 100644
--- a/src/features/groups/components/discover/search/results.test.tsx
+++ b/src/features/groups/components/discover/search/results.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { VirtuosoGridMockContext, VirtuosoMockContext } from 'react-virtuoso';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/src/features/groups/components/discover/search/results.tsx b/src/features/groups/components/discover/search/results.tsx
index 3a01ea16f..63d1dc265 100644
--- a/src/features/groups/components/discover/search/results.tsx
+++ b/src/features/groups/components/discover/search/results.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
@@ -16,7 +16,7 @@ interface Props {
   groupSearchResult: ReturnType<typeof useGroupSearch>;
 }
 
-const GridList: Components['List'] = React.forwardRef((props, ref) => {
+const GridList: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
diff --git a/src/features/groups/components/discover/search/search.test.tsx b/src/features/groups/components/discover/search/search.test.tsx
index c5b1f9710..5eb14ac2e 100644
--- a/src/features/groups/components/discover/search/search.test.tsx
+++ b/src/features/groups/components/discover/search/search.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { __stub } from 'soapbox/api';
diff --git a/src/features/groups/components/discover/search/search.tsx b/src/features/groups/components/discover/search/search.tsx
index 2d414d0c5..b54df185f 100644
--- a/src/features/groups/components/discover/search/search.tsx
+++ b/src/features/groups/components/discover/search/search.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { useGroupSearch } from 'soapbox/api/hooks';
diff --git a/src/features/groups/components/discover/suggested-groups.tsx b/src/features/groups/components/discover/suggested-groups.tsx
index 5d73cc3f0..0bab240b0 100644
--- a/src/features/groups/components/discover/suggested-groups.tsx
+++ b/src/features/groups/components/discover/suggested-groups.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { useSuggestedGroups } from 'soapbox/api/hooks';
diff --git a/src/features/groups/components/discover/tag-list-item.test.tsx b/src/features/groups/components/discover/tag-list-item.test.tsx
index 77dff981a..f70308d9d 100644
--- a/src/features/groups/components/discover/tag-list-item.test.tsx
+++ b/src/features/groups/components/discover/tag-list-item.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildGroupTag } from 'soapbox/jest/factory';
diff --git a/src/features/groups/components/discover/tag-list-item.tsx b/src/features/groups/components/discover/tag-list-item.tsx
index f0e472dac..937c58d42 100644
--- a/src/features/groups/components/discover/tag-list-item.tsx
+++ b/src/features/groups/components/discover/tag-list-item.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/groups/components/group-link-preview.tsx b/src/features/groups/components/group-link-preview.tsx
index 6a7645bc9..54e547fb9 100644
--- a/src/features/groups/components/group-link-preview.tsx
+++ b/src/features/groups/components/group-link-preview.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Avatar, Button, CardTitle, Stack } from 'soapbox/components/ui';
diff --git a/src/features/groups/components/pending-groups-row.tsx b/src/features/groups/components/pending-groups-row.tsx
index 101da43bc..094aad2aa 100644
--- a/src/features/groups/components/pending-groups-row.tsx
+++ b/src/features/groups/components/pending-groups-row.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { usePendingGroups } from 'soapbox/api/hooks';
 import { PendingItemsRow } from 'soapbox/components/pending-items-row';
diff --git a/src/features/groups/components/tab-bar.tsx b/src/features/groups/components/tab-bar.tsx
index 4d358db9c..016b5ed98 100644
--- a/src/features/groups/components/tab-bar.tsx
+++ b/src/features/groups/components/tab-bar.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { Tabs } from 'soapbox/components/ui';
diff --git a/src/features/groups/discover.test.tsx b/src/features/groups/discover.test.tsx
index 836f44c53..1b7dc251b 100644
--- a/src/features/groups/discover.test.tsx
+++ b/src/features/groups/discover.test.tsx
@@ -1,6 +1,5 @@
 
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { buildAccount } from 'soapbox/jest/factory';
diff --git a/src/features/groups/discover.tsx b/src/features/groups/discover.tsx
index 062dcdd12..5978db775 100644
--- a/src/features/groups/discover.tsx
+++ b/src/features/groups/discover.tsx
@@ -1,7 +1,7 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui';
diff --git a/src/features/groups/index.tsx b/src/features/groups/index.tsx
index 16eed2fc1..dd1c6219d 100644
--- a/src/features/groups/index.tsx
+++ b/src/features/groups/index.tsx
@@ -1,5 +1,5 @@
 import circlesIcon from '@tabler/icons/outline/circles.svg';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/groups/pending-requests.tsx b/src/features/groups/pending-requests.tsx
index 34a5a56e0..95969f5ea 100644
--- a/src/features/groups/pending-requests.tsx
+++ b/src/features/groups/pending-requests.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/groups/popular.tsx b/src/features/groups/popular.tsx
index a2c464d79..24f9d7091 100644
--- a/src/features/groups/popular.tsx
+++ b/src/features/groups/popular.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
@@ -16,7 +16,7 @@ const messages = defineMessages({
   label: { id: 'groups.popular.label', defaultMessage: 'Suggested Groups' },
 });
 
-const GridList: Components['List'] = React.forwardRef((props, ref) => {
+const GridList: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
diff --git a/src/features/groups/suggested.tsx b/src/features/groups/suggested.tsx
index 8a3e570e0..8b313ab3c 100644
--- a/src/features/groups/suggested.tsx
+++ b/src/features/groups/suggested.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
@@ -16,7 +16,7 @@ const messages = defineMessages({
   label: { id: 'groups.suggested.label', defaultMessage: 'Suggested Groups' },
 });
 
-const GridList: Components['List'] = React.forwardRef((props, ref) => {
+const GridList: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
diff --git a/src/features/groups/tag.tsx b/src/features/groups/tag.tsx
index 181753d50..c7a5a9fa4 100644
--- a/src/features/groups/tag.tsx
+++ b/src/features/groups/tag.tsx
@@ -1,7 +1,7 @@
 import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
 import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
 import { useGroupTag, useGroupsFromTag } from 'soapbox/api/hooks';
@@ -17,7 +17,7 @@ enum Layout {
   GRID = 'GRID'
 }
 
-const GridList: Components['List'] = React.forwardRef((props, ref) => {
+const GridList: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
diff --git a/src/features/groups/tags.tsx b/src/features/groups/tags.tsx
index aa37a514b..c1a58b389 100644
--- a/src/features/groups/tags.tsx
+++ b/src/features/groups/tags.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
 
diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx
index 0a39bdfeb..b7384c501 100644
--- a/src/features/hashtag-timeline/index.tsx
+++ b/src/features/hashtag-timeline/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'soapbox/actions/tags';
diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx
index 607c72b09..686c69708 100644
--- a/src/features/home-timeline/index.tsx
+++ b/src/features/home-timeline/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/import-data/components/csv-importer.tsx b/src/features/import-data/components/csv-importer.tsx
index 77661233f..c8675b6c6 100644
--- a/src/features/import-data/components/csv-importer.tsx
+++ b/src/features/import-data/components/csv-importer.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
 import { Button, FileInput, Form, FormActions, FormGroup, Text } from 'soapbox/components/ui';
diff --git a/src/features/import-data/index.tsx b/src/features/import-data/index.tsx
index 812fb20fb..2294faebf 100644
--- a/src/features/import-data/index.tsx
+++ b/src/features/import-data/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
diff --git a/src/features/intentional-error/index.tsx b/src/features/intentional-error/index.tsx
index fc0eca529..52208ab48 100644
--- a/src/features/intentional-error/index.tsx
+++ b/src/features/intentional-error/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 /**
  * IntentionalError:
diff --git a/src/features/landing-timeline/components/logo-text.tsx b/src/features/landing-timeline/components/logo-text.tsx
index 1cae1112c..cfc52e174 100644
--- a/src/features/landing-timeline/components/logo-text.tsx
+++ b/src/features/landing-timeline/components/logo-text.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface ILogoText extends Pick<React.HTMLAttributes<HTMLHeadingElement>, 'dir'> {
   children: React.ReactNode;
diff --git a/src/features/landing-timeline/components/site-banner.tsx b/src/features/landing-timeline/components/site-banner.tsx
index 11a652158..d88542d4a 100644
--- a/src/features/landing-timeline/components/site-banner.tsx
+++ b/src/features/landing-timeline/components/site-banner.tsx
@@ -1,5 +1,4 @@
 import DOMPurify from 'isomorphic-dompurify';
-import React from 'react';
 
 import Markup from 'soapbox/components/markup';
 import { Stack } from 'soapbox/components/ui';
diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx
index 1869568ba..a99ff43ba 100644
--- a/src/features/landing-timeline/index.tsx
+++ b/src/features/landing-timeline/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { expandCommunityTimeline } from 'soapbox/actions/timelines';
diff --git a/src/features/list-adder/components/list.tsx b/src/features/list-adder/components/list.tsx
index d638858b1..fe134c84d 100644
--- a/src/features/list-adder/components/list.tsx
+++ b/src/features/list-adder/components/list.tsx
@@ -1,7 +1,6 @@
 import listIcon from '@tabler/icons/outline/list.svg';
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { removeFromListAdder, addToListAdder } from 'soapbox/actions/lists';
diff --git a/src/features/list-adder/index.tsx b/src/features/list-adder/index.tsx
index 555ad2724..d26c594cd 100644
--- a/src/features/list-adder/index.tsx
+++ b/src/features/list-adder/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
diff --git a/src/features/list-editor/components/account.tsx b/src/features/list-editor/components/account.tsx
index 9ee274f95..9e422122f 100644
--- a/src/features/list-editor/components/account.tsx
+++ b/src/features/list-editor/components/account.tsx
@@ -1,6 +1,5 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists';
diff --git a/src/features/list-editor/components/edit-list-form.tsx b/src/features/list-editor/components/edit-list-form.tsx
index e41db67de..2f8c34d0a 100644
--- a/src/features/list-editor/components/edit-list-form.tsx
+++ b/src/features/list-editor/components/edit-list-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index 5b67a96de..e01b1adb8 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -1,6 +1,5 @@
 import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists';
diff --git a/src/features/list-editor/index.tsx b/src/features/list-editor/index.tsx
index a1fd5f43c..4be764b5a 100644
--- a/src/features/list-editor/index.tsx
+++ b/src/features/list-editor/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setupListEditor, resetListEditor } from 'soapbox/actions/lists';
diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx
index 19974e6ad..8b445f95e 100644
--- a/src/features/list-timeline/index.tsx
+++ b/src/features/list-timeline/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
diff --git a/src/features/lists/components/new-list-form.tsx b/src/features/lists/components/new-list-form.tsx
index 275117016..51053393e 100644
--- a/src/features/lists/components/new-list-form.tsx
+++ b/src/features/lists/components/new-list-form.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
diff --git a/src/features/lists/index.tsx b/src/features/lists/index.tsx
index 00ea5022f..88303ab24 100644
--- a/src/features/lists/index.tsx
+++ b/src/features/lists/index.tsx
@@ -1,7 +1,7 @@
 import listIcon from '@tabler/icons/outline/list.svg';
 import pencilIcon from '@tabler/icons/outline/pencil.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { createSelector } from 'reselect';
diff --git a/src/features/migration/index.tsx b/src/features/migration/index.tsx
index 6d19d172f..fa67f0a57 100644
--- a/src/features/migration/index.tsx
+++ b/src/features/migration/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/mutes/components/group-list-item.tsx b/src/features/mutes/components/group-list-item.tsx
index 2e839678c..d40245d6c 100644
--- a/src/features/mutes/components/group-list-item.tsx
+++ b/src/features/mutes/components/group-list-item.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useUnmuteGroup } from 'soapbox/api/hooks';
diff --git a/src/features/mutes/index.tsx b/src/features/mutes/index.tsx
index c7c25bf35..af1972cdc 100644
--- a/src/features/mutes/index.tsx
+++ b/src/features/mutes/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { useMutes, useGroupMutes } from 'soapbox/api/hooks';
diff --git a/src/features/new-status/index.tsx b/src/features/new-status/index.tsx
index e5b4aacd2..a02baee8d 100644
--- a/src/features/new-status/index.tsx
+++ b/src/features/new-status/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/nostr-relays/components/relay-editor.tsx b/src/features/nostr-relays/components/relay-editor.tsx
index 14618046f..c4fc562e6 100644
--- a/src/features/nostr-relays/components/relay-editor.tsx
+++ b/src/features/nostr-relays/components/relay-editor.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, Input, Select } from 'soapbox/components/ui';
diff --git a/src/features/nostr-relays/index.tsx b/src/features/nostr-relays/index.tsx
index 6b64adbaa..19171f638 100644
--- a/src/features/nostr-relays/index.tsx
+++ b/src/features/nostr-relays/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
diff --git a/src/features/nostr/Bech32Redirect.tsx b/src/features/nostr/Bech32Redirect.tsx
index 4c9fdb16b..6e60c1950 100644
--- a/src/features/nostr/Bech32Redirect.tsx
+++ b/src/features/nostr/Bech32Redirect.tsx
@@ -1,5 +1,4 @@
 import { nip19 } from 'nostr-tools';
-import React from 'react';
 import { Redirect } from 'react-router-dom';
 
 import MissingIndicator from 'soapbox/components/missing-indicator';
diff --git a/src/features/nostr/nostr-bunker-login.tsx b/src/features/nostr/nostr-bunker-login.tsx
index c4f2350ab..e8cd6c126 100644
--- a/src/features/nostr/nostr-bunker-login.tsx
+++ b/src/features/nostr/nostr-bunker-login.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -11,8 +11,8 @@ export const NostrBunkerLogin: React.FC = () => {
   const history = useHistory();
   const dispatch = useAppDispatch();
 
-  const [uri, setUri] = React.useState<string>('');
-  const [loading, setLoading] = React.useState<boolean>(false);
+  const [uri, setUri] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
 
   const onSubmit = async () => {
     const url = new URL(uri);
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index 8be2fe895..ce9003d92 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -5,7 +5,6 @@ import heartIcon from '@tabler/icons/outline/heart.svg';
 import moodSmileIcon from '@tabler/icons/outline/mood-smile.svg';
 import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { setFilter } from 'soapbox/actions/notifications';
diff --git a/src/features/notifications/components/notification.test.tsx b/src/features/notifications/components/notification.test.tsx
index 4d9a4ceaf..331046258 100644
--- a/src/features/notifications/components/notification.test.tsx
+++ b/src/features/notifications/components/notification.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { updateNotifications } from 'soapbox/actions/notifications';
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index c6e9586fe..9f3deb31a 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -12,7 +12,7 @@ import pencilIcon from '@tabler/icons/outline/pencil.svg';
 import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import userCheckIcon from '@tabler/icons/outline/user-check.svg';
 import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { defineMessages, useIntl, IntlShape, MessageDescriptor, defineMessage, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
diff --git a/src/features/notifications/components/setting-toggle.tsx b/src/features/notifications/components/setting-toggle.tsx
index 0e5054839..1150d64d9 100644
--- a/src/features/notifications/components/setting-toggle.tsx
+++ b/src/features/notifications/components/setting-toggle.tsx
@@ -1,5 +1,4 @@
 import get from 'lodash/get';
-import React from 'react';
 
 import { Toggle } from 'soapbox/components/ui';
 import { Settings } from 'soapbox/schemas/soapbox/settings';
diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx
index abfa780f3..52cecda6e 100644
--- a/src/features/notifications/index.tsx
+++ b/src/features/notifications/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
diff --git a/src/features/pinned-statuses/index.tsx b/src/features/pinned-statuses/index.tsx
index e027f2bdf..8be4b26f6 100644
--- a/src/features/pinned-statuses/index.tsx
+++ b/src/features/pinned-statuses/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
diff --git a/src/features/placeholder/components/placeholder-account.tsx b/src/features/placeholder/components/placeholder-account.tsx
index c887903fd..776e0de67 100644
--- a/src/features/placeholder/components/placeholder-account.tsx
+++ b/src/features/placeholder/components/placeholder-account.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 import { HStack } from 'soapbox/components/ui';
 
@@ -18,4 +18,4 @@ const PlaceholderAccount: React.FC = () => (
   </HStack>
 );
 
-export default React.memo(PlaceholderAccount);
+export default memo(PlaceholderAccount);
diff --git a/src/features/placeholder/components/placeholder-avatar.tsx b/src/features/placeholder/components/placeholder-avatar.tsx
index a246aa98e..b41a2d672 100644
--- a/src/features/placeholder/components/placeholder-avatar.tsx
+++ b/src/features/placeholder/components/placeholder-avatar.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { useMemo } from 'react';
 
 import { Stack } from 'soapbox/components/ui';
 
@@ -11,7 +11,7 @@ interface IPlaceholderAvatar {
 
 /** Fake avatar to display while data is loading. */
 const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false, className }) => {
-  const style = React.useMemo(() => {
+  const style = useMemo(() => {
     if (!size) {
       return {};
     }
diff --git a/src/features/placeholder/components/placeholder-card.tsx b/src/features/placeholder/components/placeholder-card.tsx
index 9b88d8429..8a9f49c60 100644
--- a/src/features/placeholder/components/placeholder-card.tsx
+++ b/src/features/placeholder/components/placeholder-card.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { memo } from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
@@ -19,4 +19,4 @@ const PlaceholderCard: React.FC = () => (
   </div>
 );
 
-export default React.memo(PlaceholderCard);
+export default memo(PlaceholderCard);
diff --git a/src/features/placeholder/components/placeholder-chat-message.tsx b/src/features/placeholder/components/placeholder-chat-message.tsx
index c11431be9..8a1e06a8d 100644
--- a/src/features/placeholder/components/placeholder-chat-message.tsx
+++ b/src/features/placeholder/components/placeholder-chat-message.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import { HStack, Stack, Text } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-chat.tsx b/src/features/placeholder/components/placeholder-chat.tsx
index 67149b9da..a6474b5ba 100644
--- a/src/features/placeholder/components/placeholder-chat.tsx
+++ b/src/features/placeholder/components/placeholder-chat.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { HStack, Stack } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-display-name.tsx b/src/features/placeholder/components/placeholder-display-name.tsx
index 88731af8c..b0e8dd4c1 100644
--- a/src/features/placeholder/components/placeholder-display-name.tsx
+++ b/src/features/placeholder/components/placeholder-display-name.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+
+import { memo } from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
@@ -21,4 +22,4 @@ const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength,
   );
 };
 
-export default React.memo(PlaceholderDisplayName);
+export default memo(PlaceholderDisplayName);
diff --git a/src/features/placeholder/components/placeholder-event-header.tsx b/src/features/placeholder/components/placeholder-event-header.tsx
index c01272944..e0182866b 100644
--- a/src/features/placeholder/components/placeholder-event-header.tsx
+++ b/src/features/placeholder/components/placeholder-event-header.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Stack } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-event-preview.tsx b/src/features/placeholder/components/placeholder-event-preview.tsx
index 09ae4e9ca..d789bcc4e 100644
--- a/src/features/placeholder/components/placeholder-event-preview.tsx
+++ b/src/features/placeholder/components/placeholder-event-preview.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Stack, Text } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-group-card.tsx b/src/features/placeholder/components/placeholder-group-card.tsx
index b000a9d10..eb19f8b28 100644
--- a/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/src/features/placeholder/components/placeholder-group-card.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { HStack, Stack, Text } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-group-discover.tsx b/src/features/placeholder/components/placeholder-group-discover.tsx
index 21e01f737..3311c3ac5 100644
--- a/src/features/placeholder/components/placeholder-group-discover.tsx
+++ b/src/features/placeholder/components/placeholder-group-discover.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { HStack, Stack, Text } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-group-search.tsx b/src/features/placeholder/components/placeholder-group-search.tsx
index 1eb939acc..db2d9578c 100644
--- a/src/features/placeholder/components/placeholder-group-search.tsx
+++ b/src/features/placeholder/components/placeholder-group-search.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { HStack, Stack, Text } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-hashtag.tsx b/src/features/placeholder/components/placeholder-hashtag.tsx
index 8830b1e90..10b11247f 100644
--- a/src/features/placeholder/components/placeholder-hashtag.tsx
+++ b/src/features/placeholder/components/placeholder-hashtag.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { generateText, randomIntFromInterval } from '../utils';
 
diff --git a/src/features/placeholder/components/placeholder-material-status.tsx b/src/features/placeholder/components/placeholder-material-status.tsx
index e3b289d70..ad8bc5703 100644
--- a/src/features/placeholder/components/placeholder-material-status.tsx
+++ b/src/features/placeholder/components/placeholder-material-status.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import PlaceholderStatus from './placeholder-status';
 
diff --git a/src/features/placeholder/components/placeholder-media-gallery.tsx b/src/features/placeholder/components/placeholder-media-gallery.tsx
index 247260d05..2f91c1497 100644
--- a/src/features/placeholder/components/placeholder-media-gallery.tsx
+++ b/src/features/placeholder/components/placeholder-media-gallery.tsx
@@ -1,5 +1,5 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
 
diff --git a/src/features/placeholder/components/placeholder-notification.tsx b/src/features/placeholder/components/placeholder-notification.tsx
index 5b96f8e00..6e216f481 100644
--- a/src/features/placeholder/components/placeholder-notification.tsx
+++ b/src/features/placeholder/components/placeholder-notification.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 import { HStack } from 'soapbox/components/ui';
 
@@ -33,4 +33,4 @@ const PlaceholderNotification = () => (
   </div>
 );
 
-export default React.memo(PlaceholderNotification);
+export default memo(PlaceholderNotification);
diff --git a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index 5e53b7e78..81b286c47 100644
--- a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { HStack, Stack } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-sidebar-trends.tsx b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
index 44e728284..c5eb13fde 100644
--- a/src/features/placeholder/components/placeholder-sidebar-trends.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Stack } from 'soapbox/components/ui';
 
diff --git a/src/features/placeholder/components/placeholder-status-content.tsx b/src/features/placeholder/components/placeholder-status-content.tsx
index 5b785ba93..b3e4abbd7 100644
--- a/src/features/placeholder/components/placeholder-status-content.tsx
+++ b/src/features/placeholder/components/placeholder-status-content.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
diff --git a/src/features/placeholder/components/placeholder-status.tsx b/src/features/placeholder/components/placeholder-status.tsx
index c6d7221ad..05674e8c4 100644
--- a/src/features/placeholder/components/placeholder-status.tsx
+++ b/src/features/placeholder/components/placeholder-status.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { memo } from 'react';
 
 import { HStack } from 'soapbox/components/ui';
 
@@ -40,4 +40,4 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
   </div>
 );
 
-export default React.memo(PlaceholderStatus);
+export default memo(PlaceholderStatus);
diff --git a/src/features/preferences/index.tsx b/src/features/preferences/index.tsx
index aa15adde3..9d5e54720 100644
--- a/src/features/preferences/index.tsx
+++ b/src/features/preferences/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { changeSetting } from 'soapbox/actions/settings';
@@ -101,19 +101,19 @@ const Preferences = () => {
     dispatch(changeSetting(key, checked, { showAlert: true }));
   };
 
-  const displayMediaOptions = React.useMemo(() => ({
+  const displayMediaOptions = useMemo(() => ({
     default: intl.formatMessage(messages.displayPostsDefault),
     hide_all: intl.formatMessage(messages.displayPostsHideAll),
     show_all: intl.formatMessage(messages.displayPostsShowAll),
   }), []);
 
-  const defaultPrivacyOptions = React.useMemo(() => ({
+  const defaultPrivacyOptions = useMemo(() => ({
     public: intl.formatMessage(messages.privacy_public),
     unlisted: intl.formatMessage(messages.privacy_unlisted),
     private: intl.formatMessage(messages.privacy_followers_only),
   }), []);
 
-  const defaultContentTypeOptions = React.useMemo(() => ({
+  const defaultContentTypeOptions = useMemo(() => ({
     'text/plain': intl.formatMessage(messages.content_type_plaintext),
     'text/markdown': intl.formatMessage(messages.content_type_markdown),
   }), []);
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 67566b7be..121d724f7 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -1,5 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx
index 42745bdbb..ae2e305a8 100644
--- a/src/features/quotes/index.tsx
+++ b/src/features/quotes/index.tsx
@@ -1,6 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
@@ -28,7 +28,7 @@ const Quotes: React.FC = () => {
   const isLoading = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'isLoading'], true));
   const hasMore = useAppSelector((state) => !!state.status_lists.getIn([`quotes:${statusId}`, 'next']));
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchStatusQuotes(statusId));
   }, [statusId]);
 
diff --git a/src/features/register-invite/index.tsx b/src/features/register-invite/index.tsx
index 00a73dabc..8cc8022d6 100644
--- a/src/features/register-invite/index.tsx
+++ b/src/features/register-invite/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
diff --git a/src/features/remote-timeline/components/pinned-hosts-picker.tsx b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
index 208cd30c5..f06d67553 100644
--- a/src/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Button, HStack } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index ea50a7624..2e1e88f0b 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -1,5 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/reply-mentions/account.tsx b/src/features/reply-mentions/account.tsx
index e8fa12983..a72451068 100644
--- a/src/features/reply-mentions/account.tsx
+++ b/src/features/reply-mentions/account.tsx
@@ -1,6 +1,6 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 96df936a2..fa936d6bb 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -1,5 +1,5 @@
 import noop from 'lodash/noop';
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
 import { toggleStatusReport } from 'soapbox/actions/reports';
 import StatusContent from 'soapbox/components/status-content';
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index 32f2e7b83..226df40c5 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -1,5 +1,4 @@
 import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 6e71f7cbe..d2f55159e 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import Account from 'soapbox/components/account';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
diff --git a/src/features/scheduled-statuses/index.tsx b/src/features/scheduled-statuses/index.tsx
index 0a9b3dcae..aeffd43a2 100644
--- a/src/features/scheduled-statuses/index.tsx
+++ b/src/features/scheduled-statuses/index.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled-statuses';
diff --git a/src/features/search/index.tsx b/src/features/search/index.tsx
index 97e5a37ca..2febda8df 100644
--- a/src/features/search/index.tsx
+++ b/src/features/search/index.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Column } from 'soapbox/components/ui';
diff --git a/src/features/security/mfa-form.tsx b/src/features/security/mfa-form.tsx
index 346617da8..7cde12f30 100644
--- a/src/features/security/mfa-form.tsx
+++ b/src/features/security/mfa-form.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { fetchMfa } from 'soapbox/actions/mfa';
diff --git a/src/features/security/mfa/disable-otp-form.tsx b/src/features/security/mfa/disable-otp-form.tsx
index 8a867fa88..2dc2bae41 100644
--- a/src/features/security/mfa/disable-otp-form.tsx
+++ b/src/features/security/mfa/disable-otp-form.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/security/mfa/enable-otp-form.tsx b/src/features/security/mfa/enable-otp-form.tsx
index 7999ace94..bbfa51953 100644
--- a/src/features/security/mfa/enable-otp-form.tsx
+++ b/src/features/security/mfa/enable-otp-form.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/security/mfa/otp-confirm-form.tsx b/src/features/security/mfa/otp-confirm-form.tsx
index 1f1d670c4..1ef86aa5f 100644
--- a/src/features/security/mfa/otp-confirm-form.tsx
+++ b/src/features/security/mfa/otp-confirm-form.tsx
@@ -1,5 +1,5 @@
 import { QRCodeCanvas as QRCode } from 'qrcode.react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/server-info/index.tsx b/src/features/server-info/index.tsx
index f180b77fb..4dcb2abc1 100644
--- a/src/features/server-info/index.tsx
+++ b/src/features/server-info/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Column, Divider, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/settings/components/messages-settings.tsx b/src/features/settings/components/messages-settings.tsx
index 2e7293542..e504e0a23 100644
--- a/src/features/settings/components/messages-settings.tsx
+++ b/src/features/settings/components/messages-settings.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list';
diff --git a/src/features/settings/index.tsx b/src/features/settings/index.tsx
index 45f095f7c..6aac5b92a 100644
--- a/src/features/settings/index.tsx
+++ b/src/features/settings/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchMfa } from 'soapbox/actions/mfa';
diff --git a/src/features/share/index.tsx b/src/features/share/index.tsx
index fdb5caa3d..0b91f1cc8 100644
--- a/src/features/share/index.tsx
+++ b/src/features/share/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Redirect, useLocation } from 'react-router-dom';
 
 import { openComposeWithText } from 'soapbox/actions/compose';
diff --git a/src/features/soapbox-config/components/color-picker.tsx b/src/features/soapbox-config/components/color-picker.tsx
index 518fb872c..418b877dc 100644
--- a/src/features/soapbox-config/components/color-picker.tsx
+++ b/src/features/soapbox-config/components/color-picker.tsx
@@ -1,5 +1,5 @@
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { SketchPicker, ColorChangeHandler } from 'react-color';
 
 import { isMobile } from 'soapbox/is-mobile';
diff --git a/src/features/soapbox-config/components/color-with-picker.tsx b/src/features/soapbox-config/components/color-with-picker.tsx
index 732df47f6..35b1564e2 100644
--- a/src/features/soapbox-config/components/color-with-picker.tsx
+++ b/src/features/soapbox-config/components/color-with-picker.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 // @ts-ignore: TODO: upgrade react-overlays. v3.1 and above have TS definitions
 import Overlay from 'react-overlays/lib/Overlay';
 
diff --git a/src/features/soapbox-config/components/crypto-address-input.tsx b/src/features/soapbox-config/components/crypto-address-input.tsx
index 08cea6bbf..680e1f8bd 100644
--- a/src/features/soapbox-config/components/crypto-address-input.tsx
+++ b/src/features/soapbox-config/components/crypto-address-input.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
diff --git a/src/features/soapbox-config/components/footer-link-input.tsx b/src/features/soapbox-config/components/footer-link-input.tsx
index ff0085d6b..2f06728b3 100644
--- a/src/features/soapbox-config/components/footer-link-input.tsx
+++ b/src/features/soapbox-config/components/footer-link-input.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
diff --git a/src/features/soapbox-config/components/icon-picker-dropdown.tsx b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
index 4e1cc9093..0b4a1800d 100644
--- a/src/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 // @ts-ignore
 import Overlay from 'react-overlays/lib/Overlay';
diff --git a/src/features/soapbox-config/components/icon-picker-menu.tsx b/src/features/soapbox-config/components/icon-picker-menu.tsx
index 35c67ed1b..a8078adb7 100644
--- a/src/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/src/features/soapbox-config/components/icon-picker-menu.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Text } from 'soapbox/components/ui';
diff --git a/src/features/soapbox-config/components/icon-picker.tsx b/src/features/soapbox-config/components/icon-picker.tsx
index 226d935e0..8feac9472 100644
--- a/src/features/soapbox-config/components/icon-picker.tsx
+++ b/src/features/soapbox-config/components/icon-picker.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import IconPickerDropdown from './icon-picker-dropdown';
 
diff --git a/src/features/soapbox-config/components/promo-panel-input.tsx b/src/features/soapbox-config/components/promo-panel-input.tsx
index 0dd530c39..2f60cf28a 100644
--- a/src/features/soapbox-config/components/promo-panel-input.tsx
+++ b/src/features/soapbox-config/components/promo-panel-input.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui';
diff --git a/src/features/soapbox-config/components/site-preview.tsx b/src/features/soapbox-config/components/site-preview.tsx
index 4d1944cda..73e29b99b 100644
--- a/src/features/soapbox-config/components/site-preview.tsx
+++ b/src/features/soapbox-config/components/site-preview.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { defaultSettings } from 'soapbox/actions/settings';
diff --git a/src/features/soapbox-config/index.tsx b/src/features/soapbox-config/index.tsx
index ffe91e123..1650ec68b 100644
--- a/src/features/soapbox-config/index.tsx
+++ b/src/features/soapbox-config/index.tsx
@@ -1,5 +1,5 @@
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
-import React, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { updateSoapboxConfig } from 'soapbox/actions/admin';
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 33272eff7..7ef1fdcf6 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -1,7 +1,7 @@
 import circlesIcon from '@tabler/icons/outline/circles.svg';
 import lockIcon from '@tabler/icons/outline/lock.svg';
 import mailIcon from '@tabler/icons/outline/mail.svg';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/status/components/status-interaction-bar.tsx b/src/features/status/components/status-interaction-bar.tsx
index cb877271f..5811cffff 100644
--- a/src/features/status/components/status-interaction-bar.tsx
+++ b/src/features/status/components/status-interaction-bar.tsx
@@ -1,5 +1,4 @@
-import clsx from 'clsx';import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import clsx from 'clsx';import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/status/components/thread-login-cta.tsx b/src/features/status/components/thread-login-cta.tsx
index e8758f72c..f6413030c 100644
--- a/src/features/status/components/thread-login-cta.tsx
+++ b/src/features/status/components/thread-login-cta.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Card, CardTitle, Text, Stack, Button } from 'soapbox/components/ui';
diff --git a/src/features/status/components/thread-status.tsx b/src/features/status/components/thread-status.tsx
index 0951ab689..350d60176 100644
--- a/src/features/status/components/thread-status.tsx
+++ b/src/features/status/components/thread-status.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
 
 import StatusContainer from 'soapbox/containers/status-container';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index b6a7c4514..4af75af80 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { type VirtuosoHandle } from 'react-virtuoso';
diff --git a/src/features/status/containers/quoted-status-container.tsx b/src/features/status/containers/quoted-status-container.tsx
index 524035341..e57b19df5 100644
--- a/src/features/status/containers/quoted-status-container.tsx
+++ b/src/features/status/containers/quoted-status-container.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import QuotedStatus from 'soapbox/components/quoted-status';
 import Tombstone from 'soapbox/components/tombstone';
diff --git a/src/features/status/index.tsx b/src/features/status/index.tsx
index 58640403c..1f07639dc 100644
--- a/src/features/status/index.tsx
+++ b/src/features/status/index.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index e81b59318..a321e379e 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import status5 from 'soapbox/__fixtures__/pleroma-quote-of-quote-post.json';
@@ -34,7 +34,7 @@ const TestTimeline: React.FC = () => {
   const theme = useTheme();
   const isMobile = useIsMobile();
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(importFetchedStatuses(MOCK_STATUSES));
     dispatch(expandTimelineSuccess(timelineId, MOCK_STATUSES, undefined, undefined, false, false, false));
   }, []);
diff --git a/src/features/theme-editor/components/color.tsx b/src/features/theme-editor/components/color.tsx
index 8fa540c42..575d17dd4 100644
--- a/src/features/theme-editor/components/color.tsx
+++ b/src/features/theme-editor/components/color.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker';
 
diff --git a/src/features/theme-editor/components/palette.tsx b/src/features/theme-editor/components/palette.tsx
index e8c358629..82cf1ac70 100644
--- a/src/features/theme-editor/components/palette.tsx
+++ b/src/features/theme-editor/components/palette.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { HStack, Stack, Slider } from 'soapbox/components/ui';
 import { usePrevious } from 'soapbox/hooks';
diff --git a/src/features/theme-editor/index.tsx b/src/features/theme-editor/index.tsx
index 115159e9c..bb534f109 100644
--- a/src/features/theme-editor/index.tsx
+++ b/src/features/theme-editor/index.tsx
@@ -1,7 +1,7 @@
 import downloadIcon from '@tabler/icons/outline/download.svg';
 import refreshIcon from '@tabler/icons/outline/refresh.svg';
 import uploadIcon from '@tabler/icons/outline/upload.svg';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { updateSoapboxConfig } from 'soapbox/actions/admin';
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 03257713a..dcceb57db 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -1,6 +1,5 @@
 import banIcon from '@tabler/icons/outline/ban.svg';
 import plusIcon from '@tabler/icons/outline/plus.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
diff --git a/src/features/ui/components/background-shapes.tsx b/src/features/ui/components/background-shapes.tsx
index f256ad987..379f40ca7 100644
--- a/src/features/ui/components/background-shapes.tsx
+++ b/src/features/ui/components/background-shapes.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IBackgroundShapes {
   /** Whether the shapes should be absolute positioned or fixed. */
diff --git a/src/features/ui/components/column-forbidden.tsx b/src/features/ui/components/column-forbidden.tsx
index 86d4e7ab1..b3b9a8fb4 100644
--- a/src/features/ui/components/column-forbidden.tsx
+++ b/src/features/ui/components/column-forbidden.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Column } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/column-loading.tsx b/src/features/ui/components/column-loading.tsx
index 994ec1457..b462c95f5 100644
--- a/src/features/ui/components/column-loading.tsx
+++ b/src/features/ui/components/column-loading.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Card, CardBody, Spinner } from 'soapbox/components/ui';
 
diff --git a/src/features/ui/components/columns-area.tsx b/src/features/ui/components/columns-area.tsx
index 5bfb62722..1f7c2e6b1 100644
--- a/src/features/ui/components/columns-area.tsx
+++ b/src/features/ui/components/columns-area.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Layout } from '../../../components/ui';
 
diff --git a/src/features/ui/components/compose-button.test.tsx b/src/features/ui/components/compose-button.test.tsx
index 29dd596d5..2c9d88a64 100644
--- a/src/features/ui/components/compose-button.test.tsx
+++ b/src/features/ui/components/compose-button.test.tsx
@@ -1,6 +1,5 @@
 
 import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
diff --git a/src/features/ui/components/compose-button.tsx b/src/features/ui/components/compose-button.tsx
index 7686f9c55..97e0865ed 100644
--- a/src/features/ui/components/compose-button.tsx
+++ b/src/features/ui/components/compose-button.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 
diff --git a/src/features/ui/components/cta-banner.test.tsx b/src/features/ui/components/cta-banner.test.tsx
index ca672e5e8..b528c64bb 100644
--- a/src/features/ui/components/cta-banner.test.tsx
+++ b/src/features/ui/components/cta-banner.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { storeClosed, storeLoggedIn, storeOpen } from 'soapbox/jest/mock-stores';
diff --git a/src/features/ui/components/cta-banner.tsx b/src/features/ui/components/cta-banner.tsx
index ff321d870..050390bdd 100644
--- a/src/features/ui/components/cta-banner.tsx
+++ b/src/features/ui/components/cta-banner.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/error-column.tsx b/src/features/ui/components/error-column.tsx
index 585af0050..de3abdad8 100644
--- a/src/features/ui/components/error-column.tsx
+++ b/src/features/ui/components/error-column.tsx
@@ -1,5 +1,4 @@
 import refreshIcon from '@tabler/icons/outline/refresh.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Column, Stack, Text, IconButton } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/floating-action-button.tsx b/src/features/ui/components/floating-action-button.tsx
index ce5caef0d..0c0236029 100644
--- a/src/features/ui/components/floating-action-button.tsx
+++ b/src/features/ui/components/floating-action-button.tsx
@@ -1,6 +1,5 @@
 import pencilPlusIcon from '@tabler/icons/outline/pencil-plus.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 
diff --git a/src/features/ui/components/funding-panel.tsx b/src/features/ui/components/funding-panel.tsx
index 8cfd0f961..f86e5bde1 100644
--- a/src/features/ui/components/funding-panel.tsx
+++ b/src/features/ui/components/funding-panel.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchPatronInstance } from 'soapbox/actions/patron';
diff --git a/src/features/ui/components/group-media-panel.tsx b/src/features/ui/components/group-media-panel.tsx
index 927ef72d8..deb3ff91b 100644
--- a/src/features/ui/components/group-media-panel.tsx
+++ b/src/features/ui/components/group-media-panel.tsx
@@ -1,5 +1,5 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/hotkeys.tsx b/src/features/ui/components/hotkeys.tsx
index 813469bab..5026e160a 100644
--- a/src/features/ui/components/hotkeys.tsx
+++ b/src/features/ui/components/hotkeys.tsx
@@ -1,11 +1,11 @@
 import { HotKeys as _HotKeys, type HotKeysProps } from '@mkljczk/react-hotkeys';
-import React from 'react';
+import { forwardRef } from 'react';
 
 /**
  * Wrapper component around `react-hotkeys`.
  * `react-hotkeys` is a legacy component, so confining its import to one place is beneficial.
  */
-const HotKeys = React.forwardRef<any, HotKeysProps>(({ children, ...rest }, ref) => (
+const HotKeys = forwardRef<any, HotKeysProps>(({ children, ...rest }, ref) => (
   <_HotKeys {...rest} ref={ref}>
     {children}
   </_HotKeys>
diff --git a/src/features/ui/components/image-loader.tsx b/src/features/ui/components/image-loader.tsx
index 6f2156ab1..ef689a134 100644
--- a/src/features/ui/components/image-loader.tsx
+++ b/src/features/ui/components/image-loader.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { PureComponent } from 'react';
 
 import ZoomableImage from './zoomable-image';
 
@@ -14,7 +14,7 @@ interface IImageLoader {
   onClick?: React.MouseEventHandler;
 }
 
-class ImageLoader extends React.PureComponent<IImageLoader> {
+class ImageLoader extends PureComponent<IImageLoader> {
 
   static defaultProps = {
     alt: '',
diff --git a/src/features/ui/components/instance-info-panel.tsx b/src/features/ui/components/instance-info-panel.tsx
index 8f397ca18..ea8825d81 100644
--- a/src/features/ui/components/instance-info-panel.tsx
+++ b/src/features/ui/components/instance-info-panel.tsx
@@ -1,6 +1,5 @@
 import pinIcon from '@tabler/icons/outline/pin.svg';
 import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { pinHost, unpinHost } from 'soapbox/actions/remote-timeline';
diff --git a/src/features/ui/components/instance-moderation-panel.tsx b/src/features/ui/components/instance-moderation-panel.tsx
index f64725e69..d49d77dc4 100644
--- a/src/features/ui/components/instance-moderation-panel.tsx
+++ b/src/features/ui/components/instance-moderation-panel.tsx
@@ -1,6 +1,5 @@
 import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import editIcon from '@tabler/icons/outline/edit.svg';
-import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/link-footer.tsx b/src/features/ui/components/link-footer.tsx
index 2162b20ca..15bf26e8f 100644
--- a/src/features/ui/components/link-footer.tsx
+++ b/src/features/ui/components/link-footer.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/ui/components/modal-loading.tsx b/src/features/ui/components/modal-loading.tsx
index 61bccffb3..b3c48d249 100644
--- a/src/features/ui/components/modal-loading.tsx
+++ b/src/features/ui/components/modal-loading.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Modal, Spinner } from 'soapbox/components/ui';
 
diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index b7d27472d..cadc90cff 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/src/features/ui/components/modal-root.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import { PureComponent, Suspense } from 'react';
 
 import Base from 'soapbox/components/modal-root';
 import {
@@ -108,7 +108,7 @@ interface IModalRoot {
   onClose: (type?: ModalType) => void;
 }
 
-export default class ModalRoot extends React.PureComponent<IModalRoot> {
+export default class ModalRoot extends PureComponent<IModalRoot> {
 
   getSnapshotBeforeUpdate() {
     return { visible: !!this.props.type };
diff --git a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index 22e3ac915..98e7337ff 100644
--- a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -1,5 +1,5 @@
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
-import React, { ChangeEventHandler, useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { revokeName, setBadges as saveBadges } from 'soapbox/actions/admin';
diff --git a/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx b/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
index 3bfaf44ef..4c6e9b5f4 100644
--- a/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { TagInput } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx b/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
index 8ee5bb6ea..ce8792578 100644
--- a/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, MessageDescriptor, useIntl } from 'react-intl';
 
 import { setRole } from 'soapbox/actions/admin';
diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 5fd37bab7..f908187d5 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
diff --git a/src/features/ui/components/modals/birthdays-modal.tsx b/src/features/ui/components/modals/birthdays-modal.tsx
index d6d17781a..4ae9de257 100644
--- a/src/features/ui/components/modals/birthdays-modal.tsx
+++ b/src/features/ui/components/modals/birthdays-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index badb827c2..031295fb3 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -1,5 +1,4 @@
 import repeatIcon from '@tabler/icons/outline/repeat.svg';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
diff --git a/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx b/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
index 3818819b7..32f5d280a 100644
--- a/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
+++ b/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import useCaptcha from 'soapbox/api/hooks/captcha/useCaptcha';
diff --git a/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx b/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
index 9e0a74746..0bafb8562 100644
--- a/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
+++ b/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 interface IPuzzleCaptcha {
   bg: string;
diff --git a/src/features/ui/components/modals/compare-history-modal.tsx b/src/features/ui/components/modals/compare-history-modal.tsx
index ac8b8c275..6b351f624 100644
--- a/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/src/features/ui/components/modals/compare-history-modal.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
 import { fetchHistory } from 'soapbox/actions/history';
diff --git a/src/features/ui/components/modals/component-modal.tsx b/src/features/ui/components/modals/component-modal.tsx
index 782417f9c..309941545 100644
--- a/src/features/ui/components/modals/component-modal.tsx
+++ b/src/features/ui/components/modals/component-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Modal } from 'soapbox/components/ui';
 
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index ac6a035a3..a7da9c968 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -1,7 +1,7 @@
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import {
diff --git a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index ea8a0bce1..6aefcf341 100644
--- a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -1,5 +1,5 @@
 import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
diff --git a/src/features/ui/components/modals/compose-modal.tsx b/src/features/ui/components/modals/compose-modal.tsx
index ee4965dcb..52202d394 100644
--- a/src/features/ui/components/modals/compose-modal.tsx
+++ b/src/features/ui/components/modals/compose-modal.tsx
@@ -1,6 +1,6 @@
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { cancelReplyCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose';
diff --git a/src/features/ui/components/modals/confirmation-modal.tsx b/src/features/ui/components/modals/confirmation-modal.tsx
index 20d62114a..ac4b0f93d 100644
--- a/src/features/ui/components/modals/confirmation-modal.tsx
+++ b/src/features/ui/components/modals/confirmation-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list';
diff --git a/src/features/ui/components/modals/crypto-donate-modal.tsx b/src/features/ui/components/modals/crypto-donate-modal.tsx
index c1724ee78..78a276ee4 100644
--- a/src/features/ui/components/modals/crypto-donate-modal.tsx
+++ b/src/features/ui/components/modals/crypto-donate-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Modal } from 'soapbox/components/ui';
 import DetailedCryptoAddress from 'soapbox/features/crypto-donate/components/detailed-crypto-address';
diff --git a/src/features/ui/components/modals/dislikes-modal.tsx b/src/features/ui/components/modals/dislikes-modal.tsx
index 7689d7047..52778b131 100644
--- a/src/features/ui/components/modals/dislikes-modal.tsx
+++ b/src/features/ui/components/modals/dislikes-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchDislikes } from 'soapbox/actions/interactions';
diff --git a/src/features/ui/components/modals/edit-announcement-modal.tsx b/src/features/ui/components/modals/edit-announcement-modal.tsx
index 1a81df1ab..ebc4059e9 100644
--- a/src/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/src/features/ui/components/modals/edit-announcement-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index e68b98228..a01452bf0 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -1,6 +1,6 @@
 import { useFloating, shift } from '@floating-ui/react';
 import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
diff --git a/src/features/ui/components/modals/edit-domain-modal.tsx b/src/features/ui/components/modals/edit-domain-modal.tsx
index c0e3b5e29..15274987e 100644
--- a/src/features/ui/components/modals/edit-domain-modal.tsx
+++ b/src/features/ui/components/modals/edit-domain-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/modals/edit-federation-modal.tsx b/src/features/ui/components/modals/edit-federation-modal.tsx
index ff4547b26..a3d535278 100644
--- a/src/features/ui/components/modals/edit-federation-modal.tsx
+++ b/src/features/ui/components/modals/edit-federation-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { updateMrf } from 'soapbox/actions/mrf';
diff --git a/src/features/ui/components/modals/edit-rule-modal.tsx b/src/features/ui/components/modals/edit-rule-modal.tsx
index fe1862da5..08e9dc051 100644
--- a/src/features/ui/components/modals/edit-rule-modal.tsx
+++ b/src/features/ui/components/modals/edit-rule-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useRules } from 'soapbox/api/hooks/admin';
diff --git a/src/features/ui/components/modals/embed-modal.tsx b/src/features/ui/components/modals/embed-modal.tsx
index 5ba385238..c79d9d45c 100644
--- a/src/features/ui/components/modals/embed-modal.tsx
+++ b/src/features/ui/components/modals/embed-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/modals/event-map-modal.tsx b/src/features/ui/components/modals/event-map-modal.tsx
index 24bc56193..d1f114192 100644
--- a/src/features/ui/components/modals/event-map-modal.tsx
+++ b/src/features/ui/components/modals/event-map-modal.tsx
@@ -3,7 +3,7 @@ import L from 'leaflet';
 import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
 import iconUrl from 'leaflet/dist/images/marker-icon.png';
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Modal, Stack } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/modals/event-participants-modal.tsx b/src/features/ui/components/modals/event-participants-modal.tsx
index 85324546d..44c825b35 100644
--- a/src/features/ui/components/modals/event-participants-modal.tsx
+++ b/src/features/ui/components/modals/event-participants-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchEventParticipations } from 'soapbox/actions/events';
diff --git a/src/features/ui/components/modals/familiar-followers-modal.tsx b/src/features/ui/components/modals/familiar-followers-modal.tsx
index a3287a9c5..c249b83ef 100644
--- a/src/features/ui/components/modals/familiar-followers-modal.tsx
+++ b/src/features/ui/components/modals/familiar-followers-modal.tsx
@@ -1,5 +1,4 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
diff --git a/src/features/ui/components/modals/favourites-modal.tsx b/src/features/ui/components/modals/favourites-modal.tsx
index d2b9b9ea7..ae8eb6e28 100644
--- a/src/features/ui/components/modals/favourites-modal.tsx
+++ b/src/features/ui/components/modals/favourites-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchFavourites, expandFavourites } from 'soapbox/actions/interactions';
diff --git a/src/features/ui/components/modals/hotkeys-modal.tsx b/src/features/ui/components/modals/hotkeys-modal.tsx
index 7e5ff858f..057e54ad3 100644
--- a/src/features/ui/components/modals/hotkeys-modal.tsx
+++ b/src/features/ui/components/modals/hotkeys-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Modal } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/modals/join-event-modal.tsx b/src/features/ui/components/modals/join-event-modal.tsx
index eff0adeba..553b9b7de 100644
--- a/src/features/ui/components/modals/join-event-modal.tsx
+++ b/src/features/ui/components/modals/join-event-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { joinEvent } from 'soapbox/actions/events';
diff --git a/src/features/ui/components/modals/landing-page-modal.test.tsx b/src/features/ui/components/modals/landing-page-modal.test.tsx
index ccb5eea29..650c276f2 100644
--- a/src/features/ui/components/modals/landing-page-modal.test.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { storeOpen } from 'soapbox/jest/mock-stores';
diff --git a/src/features/ui/components/modals/landing-page-modal.tsx b/src/features/ui/components/modals/landing-page-modal.tsx
index b2e1196b1..076624ad3 100644
--- a/src/features/ui/components/modals/landing-page-modal.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.tsx
@@ -1,6 +1,5 @@
 import lifebuoyIcon from '@tabler/icons/outline/lifebuoy.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import SiteLogo from 'soapbox/components/site-logo';
diff --git a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
index bef60fda4..bbb8601bd 100644
--- a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { z } from 'zod';
 
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 1346a81f1..74a7f353c 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -1,6 +1,5 @@
 import linkIcon from '@tabler/icons/outline/link.svg';
 import shareIcon from '@tabler/icons/outline/share.svg';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index 1f8a2006b..9b8aac350 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { CreateGroupParams, useGroupValidation } from 'soapbox/api/hooks';
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
index 96d168c01..0d136727f 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { type CreateGroupParams } from 'soapbox/api/hooks';
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 6eca2c813..7ec650b37 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -6,7 +6,7 @@ import downloadIcon from '@tabler/icons/outline/download.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
diff --git a/src/features/ui/components/modals/mentions-modal.tsx b/src/features/ui/components/modals/mentions-modal.tsx
index 4d16afc75..6e70d01ce 100644
--- a/src/features/ui/components/modals/mentions-modal.tsx
+++ b/src/features/ui/components/modals/mentions-modal.tsx
@@ -1,5 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchStatusWithContext } from 'soapbox/actions/statuses';
diff --git a/src/features/ui/components/modals/missing-description-modal.tsx b/src/features/ui/components/modals/missing-description-modal.tsx
index 742836dba..da91a76bb 100644
--- a/src/features/ui/components/modals/missing-description-modal.tsx
+++ b/src/features/ui/components/modals/missing-description-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
 
 import { Modal } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/modals/mute-modal.tsx b/src/features/ui/components/modals/mute-modal.tsx
index a27127337..61bd2abfd 100644
--- a/src/features/ui/components/modals/mute-modal.tsx
+++ b/src/features/ui/components/modals/mute-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { muteAccount } from 'soapbox/actions/accounts';
diff --git a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
index adc56b707..17e6b9aed 100644
--- a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx b/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
index 21595bdb9..7c55d4f59 100644
--- a/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import ExtensionStep from './steps/extension-step';
 import KeyAddStep from './steps/key-add-step';
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
index e65dac0ba..a969af8f9 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
@@ -1,5 +1,4 @@
 import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
index 44f5b8cf7..dd589d002 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
@@ -1,5 +1,5 @@
 import { nip19 } from 'nostr-tools';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { logInNostr } from 'soapbox/actions/nostr';
diff --git a/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx b/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
index ab4b5d5a7..f76b7273d 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import ExtensionStep from '../nostr-login-modal/steps/extension-step';
 
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
index f3fd6d0b9..feffd8f46 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
index ebc448dac..43b9aec8e 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
@@ -1,6 +1,6 @@
 import downloadIcon from '@tabler/icons/outline/download.svg';
 import { generateSecretKey, getPublicKey, nip19 } from 'nostr-tools';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
index 82f2b11cc..87ad89432 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { useEffect, useState } from 'react';
 import ReactSwipeableViews from 'react-swipeable-views';
 
 import { endOnboarding } from 'soapbox/actions/onboarding';
@@ -20,7 +20,7 @@ interface IOnboardingFlowModal {
 const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
   const dispatch = useAppDispatch();
 
-  const [currentStep, setCurrentStep] = React.useState<number>(0);
+  const [currentStep, setCurrentStep] = useState<number>(0);
 
   const handleSwipe = (nextStep: number) => {
     setCurrentStep(nextStep);
@@ -64,7 +64,7 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('keyup', handleKeyUp);
 
     return () => {
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index c7f8117e4..332a8b20e 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -1,7 +1,7 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -29,10 +29,10 @@ interface IAvatarSelectionModal {
 const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext }) => {
   const dispatch = useAppDispatch();
   const { account } = useOwnAccount();
-  const fileInput = React.useRef<HTMLInputElement>(null);
-  const [selectedFile, setSelectedFile] = React.useState<string | null>();
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [isDisabled, setDisabled] = React.useState<boolean>(true);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [selectedFile, setSelectedFile] = useState<string | null>();
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
+  const [isDisabled, setDisabled] = useState<boolean>(true);
   const isDefault = account ? isDefaultAvatar(account.avatar) : false;
 
   const openFilePicker = () => {
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index b043a73ac..378f59aa6 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -1,5 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -27,9 +27,9 @@ const BioStep: React.FC<IBioStep> = ({ onClose, onNext }) => {
   const dispatch = useAppDispatch();
 
   const { account } = useOwnAccount();
-  const [value, setValue] = React.useState<string>(account?.source?.note ?? '');
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [errors, setErrors] = React.useState<string[]>([]);
+  const [value, setValue] = useState<string>(account?.source?.note ?? '');
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
+  const [errors, setErrors] = useState<string[]>([]);
 
   const handleSubmit = () => {
     setSubmitting(true);
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
index 321cd3a69..850cb2c25 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
@@ -1,6 +1,5 @@
 import confettiIcon from '@tabler/icons/outline/confetti.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Button, Icon, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index de40a1932..b2f56d180 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -1,7 +1,7 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -32,10 +32,10 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
   const dispatch = useAppDispatch();
   const { account } = useOwnAccount();
 
-  const fileInput = React.useRef<HTMLInputElement>(null);
-  const [selectedFile, setSelectedFile] = React.useState<string | null>();
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [isDisabled, setDisabled] = React.useState<boolean>(true);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [selectedFile, setSelectedFile] = useState<string | null>();
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
+  const [isDisabled, setDisabled] = useState<boolean>(true);
   const isDefault = account ? isDefaultHeader(account.avatar) : false;
 
   const openFilePicker = () => {
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index cf51decd0..43d7c8dc5 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -1,5 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
+import { useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -27,15 +27,15 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
   const dispatch = useAppDispatch();
 
   const { account } = useOwnAccount();
-  const [value, setValue] = React.useState<string>(account?.display_name || '');
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [errors, setErrors] = React.useState<string[]>([]);
+  const [value, setValue] = useState<string>(account?.display_name || '');
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
+  const [errors, setErrors] = useState<string[]>([]);
 
   const trimmedValue = value.trim();
   const isValid = trimmedValue.length > 0;
   const isDisabled = !isValid || value.length > 30;
 
-  const hintText = React.useMemo(() => {
+  const hintText = useMemo(() => {
     const charsLeft = 30 - value.length;
     const suffix = charsLeft === 1 ? 'character remaining' : 'characters remaining';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
index e186cd27a..434730ea1 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
@@ -1,6 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import debounce from 'lodash/debounce';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx
index dd51f7253..d0984e72d 100644
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/src/features/ui/components/modals/reactions-modal.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
diff --git a/src/features/ui/components/modals/reblogs-modal.tsx b/src/features/ui/components/modals/reblogs-modal.tsx
index 5107fa881..5c9116a3f 100644
--- a/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/src/features/ui/components/modals/reblogs-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchReblogs, expandReblogs } from 'soapbox/actions/interactions';
diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index 9717694bd..f643fb178 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -1,5 +1,5 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Modal } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/modals/report-modal/report-modal.tsx b/src/features/ui/components/modals/report-modal/report-modal.tsx
index 27d35832a..c461cffa5 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -1,5 +1,5 @@
 import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
diff --git a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index e00d19115..f95539b78 100644
--- a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { ReportableEntities } from 'soapbox/actions/reports';
diff --git a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 40b135c20..fa985c19c 100644
--- a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -1,7 +1,7 @@
 import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import { OrderedSet } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports';
diff --git a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 4d27688b7..d5fc1f98f 100644
--- a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeReportComment, changeReportRule, ReportableEntities } from 'soapbox/actions/reports';
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index 227e9724c..ac0f401cc 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -1,6 +1,6 @@
 import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
 import folderIcon from '@tabler/icons/outline/folder.svg';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { bookmark } from 'soapbox/actions/interactions';
diff --git a/src/features/ui/components/modals/unauthorized-modal.test.tsx b/src/features/ui/components/modals/unauthorized-modal.test.tsx
index abee32123..f72448abf 100644
--- a/src/features/ui/components/modals/unauthorized-modal.test.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { storeOpen } from 'soapbox/jest/mock-stores';
diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx
index d73c96884..13dd5df52 100644
--- a/src/features/ui/components/modals/unauthorized-modal.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/ui/components/modals/video-modal.tsx b/src/features/ui/components/modals/video-modal.tsx
index 0f13c8d81..c80e2b19b 100644
--- a/src/features/ui/components/modals/video-modal.tsx
+++ b/src/features/ui/components/modals/video-modal.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/features/ui/components/modals/zap-split/display-name-row.tsx b/src/features/ui/components/modals/zap-split/display-name-row.tsx
index b6c54a85c..6f023f3a7 100644
--- a/src/features/ui/components/modals/zap-split/display-name-row.tsx
+++ b/src/features/ui/components/modals/zap-split/display-name-row.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { HStack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
diff --git a/src/features/ui/components/modals/zap-split/zap-split-modal.tsx b/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
index 535196571..023f3dc83 100644
--- a/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect }  from 'react';
+import { useState, useEffect }  from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx
index 036e8169d..9b6e75e72 100644
--- a/src/features/ui/components/modals/zap-split/zap-split.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split.tsx
@@ -1,6 +1,5 @@
 import folderOpenIcon from '@tabler/icons/outline/folder-open.svg';
 import { QRCodeCanvas } from 'qrcode.react';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import Account from 'soapbox/components/account';
diff --git a/src/features/ui/components/modals/zaps-modal.tsx b/src/features/ui/components/modals/zaps-modal.tsx
index acf15e09e..5783b31e7 100644
--- a/src/features/ui/components/modals/zaps-modal.tsx
+++ b/src/features/ui/components/modals/zaps-modal.tsx
@@ -1,5 +1,5 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchZaps, expandZaps } from 'soapbox/actions/interactions';
diff --git a/src/features/ui/components/navbar.test.tsx b/src/features/ui/components/navbar.test.tsx
index 536f137f6..63b6bc655 100644
--- a/src/features/ui/components/navbar.test.tsx
+++ b/src/features/ui/components/navbar.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { storeOpen } from 'soapbox/jest/mock-stores';
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index e11a7e10b..d66cd1f88 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -1,6 +1,6 @@
 import helpIcon from '@tabler/icons/outline/help.svg';
 import clsx from 'clsx';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, Redirect } from 'react-router-dom';
 
diff --git a/src/features/ui/components/new-account-zap-split.tsx b/src/features/ui/components/new-account-zap-split.tsx
index 3f3ae03a3..999c1cc64 100644
--- a/src/features/ui/components/new-account-zap-split.tsx
+++ b/src/features/ui/components/new-account-zap-split.tsx
@@ -1,5 +1,5 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Account from 'soapbox/components/account';
diff --git a/src/features/ui/components/panels/account-note-panel.tsx b/src/features/ui/components/panels/account-note-panel.tsx
index 5a28136c8..152c4c1d5 100644
--- a/src/features/ui/components/panels/account-note-panel.tsx
+++ b/src/features/ui/components/panels/account-note-panel.tsx
@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { submitAccountNote } from 'soapbox/actions/account-notes';
diff --git a/src/features/ui/components/panels/my-groups-panel.tsx b/src/features/ui/components/panels/my-groups-panel.tsx
index d9a95a314..578375796 100644
--- a/src/features/ui/components/panels/my-groups-panel.tsx
+++ b/src/features/ui/components/panels/my-groups-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { useGroups } from 'soapbox/api/hooks';
 import { Widget } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/panels/new-event-panel.tsx b/src/features/ui/components/panels/new-event-panel.tsx
index df7eeeddc..900f06559 100644
--- a/src/features/ui/components/panels/new-event-panel.tsx
+++ b/src/features/ui/components/panels/new-event-panel.tsx
@@ -1,5 +1,4 @@
 import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/panels/new-group-panel.tsx b/src/features/ui/components/panels/new-group-panel.tsx
index 387f3abf0..c69741853 100644
--- a/src/features/ui/components/panels/new-group-panel.tsx
+++ b/src/features/ui/components/panels/new-group-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/panels/sign-up-panel.test.tsx b/src/features/ui/components/panels/sign-up-panel.test.tsx
index 5780929ba..d2afa6be8 100644
--- a/src/features/ui/components/panels/sign-up-panel.test.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { storeOpen } from 'soapbox/jest/mock-stores';
diff --git a/src/features/ui/components/panels/sign-up-panel.tsx b/src/features/ui/components/panels/sign-up-panel.tsx
index a37664c3d..4ffb25159 100644
--- a/src/features/ui/components/panels/sign-up-panel.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/panels/suggested-groups-panel.tsx b/src/features/ui/components/panels/suggested-groups-panel.tsx
index d2671bc14..d8fa17f6a 100644
--- a/src/features/ui/components/panels/suggested-groups-panel.tsx
+++ b/src/features/ui/components/panels/suggested-groups-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { useSuggestedGroups } from 'soapbox/api/hooks';
 import { Widget } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 1ed4e5502..bdb570d65 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 import Account from 'soapbox/components/account';
 import StatusContent from 'soapbox/components/status-content';
diff --git a/src/features/ui/components/pinned-accounts-panel.tsx b/src/features/ui/components/pinned-accounts-panel.tsx
index c6de3a667..e521b60d6 100644
--- a/src/features/ui/components/pinned-accounts-panel.tsx
+++ b/src/features/ui/components/pinned-accounts-panel.tsx
@@ -1,5 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchPinnedAccounts } from 'soapbox/actions/accounts';
diff --git a/src/features/ui/components/poll-preview.tsx b/src/features/ui/components/poll-preview.tsx
index 03de9a582..85e1746cc 100644
--- a/src/features/ui/components/poll-preview.tsx
+++ b/src/features/ui/components/poll-preview.tsx
@@ -1,5 +1,4 @@
 import noop from 'lodash/noop';
-import React from 'react';
 
 import PollOption from 'soapbox/components/polls/poll-option';
 import { Stack } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index 2047ae65b..434dc298b 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -3,7 +3,7 @@ import logoutIcon from '@tabler/icons/outline/logout.svg';
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/ui/components/profile-familiar-followers.tsx b/src/features/ui/components/profile-familiar-followers.tsx
index c80e46b04..e63b9dcf1 100644
--- a/src/features/ui/components/profile-familiar-followers.tsx
+++ b/src/features/ui/components/profile-familiar-followers.tsx
@@ -1,5 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/ui/components/profile-field.tsx b/src/features/ui/components/profile-field.tsx
index 151c3b2c9..2cdae088c 100644
--- a/src/features/ui/components/profile-field.tsx
+++ b/src/features/ui/components/profile-field.tsx
@@ -1,6 +1,5 @@
 import checkIcon from '@tabler/icons/outline/check.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
 
 import Markup from 'soapbox/components/markup';
diff --git a/src/features/ui/components/profile-fields-panel.tsx b/src/features/ui/components/profile-fields-panel.tsx
index fb434a25b..9f0d7d305 100644
--- a/src/features/ui/components/profile-fields-panel.tsx
+++ b/src/features/ui/components/profile-fields-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Widget, Stack } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/profile-info-panel.tsx b/src/features/ui/components/profile-info-panel.tsx
index dcae6e4ce..8e19870ee 100644
--- a/src/features/ui/components/profile-info-panel.tsx
+++ b/src/features/ui/components/profile-info-panel.tsx
@@ -3,7 +3,6 @@ import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import linkIcon from '@tabler/icons/outline/link.svg';
 import lockIcon from '@tabler/icons/outline/lock.svg';
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
-import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { usePatronUser } from 'soapbox/api/hooks';
diff --git a/src/features/ui/components/profile-media-panel.tsx b/src/features/ui/components/profile-media-panel.tsx
index d63b849f3..9f2d3f5f4 100644
--- a/src/features/ui/components/profile-media-panel.tsx
+++ b/src/features/ui/components/profile-media-panel.tsx
@@ -1,5 +1,5 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/src/features/ui/components/profile-stats.tsx b/src/features/ui/components/profile-stats.tsx
index 6863f9bd9..0c094c275 100644
--- a/src/features/ui/components/profile-stats.tsx
+++ b/src/features/ui/components/profile-stats.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
diff --git a/src/features/ui/components/promo-panel.tsx b/src/features/ui/components/promo-panel.tsx
index a709d0b16..2a3917628 100644
--- a/src/features/ui/components/promo-panel.tsx
+++ b/src/features/ui/components/promo-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
 import { Widget, Stack, Text } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/subscribe-button.test.tsx b/src/features/ui/components/subscribe-button.test.tsx
index b3c8d7d5d..69c697fe1 100644
--- a/src/features/ui/components/subscribe-button.test.tsx
+++ b/src/features/ui/components/subscribe-button.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
diff --git a/src/features/ui/components/subscription-button.tsx b/src/features/ui/components/subscription-button.tsx
index fb734ea06..0e470f9c5 100644
--- a/src/features/ui/components/subscription-button.tsx
+++ b/src/features/ui/components/subscription-button.tsx
@@ -1,6 +1,5 @@
 import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
 import bellIcon from '@tabler/icons/outline/bell.svg';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index 019a8d59b..d242a0723 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -3,7 +3,7 @@ import deviceDesktopIcon from '@tabler/icons/outline/device-desktop.svg';
 import moonIcon from '@tabler/icons/outline/moon.svg';
 import shadowIcon from '@tabler/icons/outline/shadow.svg';
 import sunIcon from '@tabler/icons/outline/sun.svg';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Icon, Select } from 'soapbox/components/ui';
diff --git a/src/features/ui/components/theme-toggle.tsx b/src/features/ui/components/theme-toggle.tsx
index 8137caeb6..3532b5cfd 100644
--- a/src/features/ui/components/theme-toggle.tsx
+++ b/src/features/ui/components/theme-toggle.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { changeSetting } from 'soapbox/actions/settings';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
diff --git a/src/features/ui/components/timeline.tsx b/src/features/ui/components/timeline.tsx
index e578cec99..ed5ed93a3 100644
--- a/src/features/ui/components/timeline.tsx
+++ b/src/features/ui/components/timeline.tsx
@@ -1,6 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { defineMessages } from 'react-intl';
 
 import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines';
diff --git a/src/features/ui/components/trends-panel.test.tsx b/src/features/ui/components/trends-panel.test.tsx
index 07e122c16..1cb0ab9ad 100644
--- a/src/features/ui/components/trends-panel.test.tsx
+++ b/src/features/ui/components/trends-panel.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
 import { __stub } from 'soapbox/api';
diff --git a/src/features/ui/components/trends-panel.tsx b/src/features/ui/components/trends-panel.tsx
index 9e87cc8c2..b531a9932 100644
--- a/src/features/ui/components/trends-panel.tsx
+++ b/src/features/ui/components/trends-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/ui/components/user-panel.tsx b/src/features/ui/components/user-panel.tsx
index c6c2a9d12..9a446eda5 100644
--- a/src/features/ui/components/user-panel.tsx
+++ b/src/features/ui/components/user-panel.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/ui/components/who-to-follow-panel.tsx b/src/features/ui/components/who-to-follow-panel.tsx
index 8209fccb5..3f74100d6 100644
--- a/src/features/ui/components/who-to-follow-panel.tsx
+++ b/src/features/ui/components/who-to-follow-panel.tsx
@@ -1,5 +1,4 @@
 import xIcon from '@tabler/icons/outline/x.svg';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/ui/components/zoomable-image.tsx b/src/features/ui/components/zoomable-image.tsx
index d826dc63e..e9a78921d 100644
--- a/src/features/ui/components/zoomable-image.tsx
+++ b/src/features/ui/components/zoomable-image.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 const MIN_SCALE = 1;
 const MAX_SCALE = 4;
@@ -21,7 +21,7 @@ interface IZoomableImage {
   onClick?: React.MouseEventHandler;
 }
 
-class ZoomableImage extends React.PureComponent<IZoomableImage> {
+class ZoomableImage extends PureComponent<IZoomableImage> {
 
   static defaultProps = {
     alt: '',
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index bad79eb3e..240a56cf3 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { Suspense, lazy, useEffect, useRef } from 'react';
+import { Suspense, lazy, useEffect, useRef } from 'react';
 import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom';
 
 import { fetchFollowRequests } from 'soapbox/actions/accounts';
diff --git a/src/features/ui/util/global-hotkeys.tsx b/src/features/ui/util/global-hotkeys.tsx
index e413ff2db..ef25e6c69 100644
--- a/src/features/ui/util/global-hotkeys.tsx
+++ b/src/features/ui/util/global-hotkeys.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { resetCompose } from 'soapbox/actions/compose';
diff --git a/src/features/ui/util/optional-motion.tsx b/src/features/ui/util/optional-motion.tsx
index 368158fec..84e0c466a 100644
--- a/src/features/ui/util/optional-motion.tsx
+++ b/src/features/ui/util/optional-motion.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Motion, MotionProps } from 'react-motion';
 
 import { useSettings } from 'soapbox/hooks';
diff --git a/src/features/ui/util/react-router-helpers.tsx b/src/features/ui/util/react-router-helpers.tsx
index e45105fbb..40f2c6023 100644
--- a/src/features/ui/util/react-router-helpers.tsx
+++ b/src/features/ui/util/react-router-helpers.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useRef } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType, useLocation } from 'react-router-dom';
 
diff --git a/src/features/ui/util/reduced-motion.tsx b/src/features/ui/util/reduced-motion.tsx
index c677f4428..83a76f5e8 100644
--- a/src/features/ui/util/reduced-motion.tsx
+++ b/src/features/ui/util/reduced-motion.tsx
@@ -1,6 +1,5 @@
 // Like react-motion's Motion, but reduces all animations to cross-fades
 // for the benefit of users with motion sickness.
-import React from 'react';
 import { Motion, MotionProps } from 'react-motion';
 
 const stylesToKeep = ['opacity', 'backgroundOpacity'];
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index 25836c515..6d6fc91e7 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -7,7 +7,7 @@ import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Blurhash from 'soapbox/components/blurhash';
diff --git a/src/features/zap/components/zap-button/zap-button.tsx b/src/features/zap/components/zap-button/zap-button.tsx
index d07fab6aa..f5a840b49 100644
--- a/src/features/zap/components/zap-button/zap-button.tsx
+++ b/src/features/zap/components/zap-button/zap-button.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 
 import { shortNumberFormat } from 'soapbox/utils/numbers';
@@ -30,7 +30,7 @@ interface IButton {
 }
 
 /** Customizable button element. */
-const ZapButton = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
+const ZapButton = forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
   const {
     disabled = false,
     icon,
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index 0528a3245..e73d509b0 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -1,7 +1,7 @@
 import boltIcon from '@tabler/icons/outline/bolt.svg';
 import infoSquareRoundedIcon from '@tabler/icons/outline/info-square-rounded.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/features/zap/components/zap-split-account-item.tsx b/src/features/zap/components/zap-split-account-item.tsx
index 9e6438432..cd2776464 100644
--- a/src/features/zap/components/zap-split-account-item.tsx
+++ b/src/features/zap/components/zap-split-account-item.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import { Slider } from 'soapbox/components/ui';
 
diff --git a/src/hooks/useDraggedFiles.ts b/src/hooks/useDraggedFiles.ts
index 8f519d16e..af3e74d9c 100644
--- a/src/hooks/useDraggedFiles.ts
+++ b/src/hooks/useDraggedFiles.ts
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 /** Controls the state of files being dragged over a node. */
 function useDraggedFiles<R extends HTMLElement>(node: React.RefObject<R>, onDrop?: (files: FileList) => void) {
diff --git a/src/hooks/useOnScreen.ts b/src/hooks/useOnScreen.ts
index de9aa23b2..04b63ab2f 100644
--- a/src/hooks/useOnScreen.ts
+++ b/src/hooks/useOnScreen.ts
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 /** Detect whether a given element is on the screen. */
 // https://stackoverflow.com/a/64892655
diff --git a/src/init/soapbox-head.tsx b/src/init/soapbox-head.tsx
index d11572870..3125c601b 100644
--- a/src/init/soapbox-head.tsx
+++ b/src/init/soapbox-head.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useEffect } from 'react';
+import { lazy, useEffect } from 'react';
 
 import {
   useSettings,
@@ -11,7 +11,7 @@ import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 import { startSentry } from 'soapbox/sentry';
 import { generateThemeCss } from 'soapbox/utils/theme';
 
-const Helmet = React.lazy(() => import('soapbox/components/helmet'));
+const Helmet = lazy(() => import('soapbox/components/helmet'));
 
 interface ISoapboxHead {
   children: React.ReactNode;
diff --git a/src/init/soapbox-load.tsx b/src/init/soapbox-load.tsx
index 7ad79e5a0..858e22b34 100644
--- a/src/init/soapbox-load.tsx
+++ b/src/init/soapbox-load.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 
 import { fetchMe } from 'soapbox/actions/me';
diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx
index 2c915ebbf..80fdc2f61 100644
--- a/src/init/soapbox-mount.tsx
+++ b/src/init/soapbox-mount.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import { lazy, Suspense, useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
@@ -20,9 +20,9 @@ import {
 } from 'soapbox/hooks';
 import { useCachedLocationHandler } from 'soapbox/utils/redirect';
 
-const GdprBanner = React.lazy(() => import('soapbox/components/gdpr-banner'));
-const EmbeddedStatus = React.lazy(() => import('soapbox/features/embedded-status'));
-const UI = React.lazy(() => import('soapbox/features/ui'));
+const GdprBanner = lazy(() => import('soapbox/components/gdpr-banner'));
+const EmbeddedStatus = lazy(() => import('soapbox/features/embedded-status'));
+const UI = lazy(() => import('soapbox/features/ui'));
 
 /** Highest level node with the Redux store. */
 const SoapboxMount = () => {
diff --git a/src/init/soapbox.tsx b/src/init/soapbox.tsx
index 2b3cce228..117b732b5 100644
--- a/src/init/soapbox.tsx
+++ b/src/init/soapbox.tsx
@@ -1,5 +1,4 @@
 import { QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
 import { Provider } from 'react-redux';
 
 import { NostrProvider } from 'soapbox/contexts/nostr-context';
diff --git a/src/jest/test-helpers.tsx b/src/jest/test-helpers.tsx
index 7aeac78cc..064f686c8 100644
--- a/src/jest/test-helpers.tsx
+++ b/src/jest/test-helpers.tsx
@@ -3,7 +3,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { render, RenderOptions } from '@testing-library/react';
 import { renderHook, RenderHookOptions } from '@testing-library/react-hooks';
 import { merge } from 'immutable';
-import React, { FC, ReactElement } from 'react';
+import { FC, ReactElement } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
diff --git a/src/main.tsx b/src/main.tsx
index 7382d69b2..554273683 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,4 @@
 import { enableMapSet } from 'immer';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import * as BuildConfig from 'soapbox/build-config';
diff --git a/src/pages/admin-page.tsx b/src/pages/admin-page.tsx
index 9d8c21073..41ce5e061 100644
--- a/src/pages/admin-page.tsx
+++ b/src/pages/admin-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Layout } from 'soapbox/components/ui';
 import {
diff --git a/src/pages/chats-page.tsx b/src/pages/chats-page.tsx
index 368b2079e..b6e103378 100644
--- a/src/pages/chats-page.tsx
+++ b/src/pages/chats-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IChatsPage {
   children: React.ReactNode;
diff --git a/src/pages/default-page.tsx b/src/pages/default-page.tsx
index 417d578b9..1cb045c28 100644
--- a/src/pages/default-page.tsx
+++ b/src/pages/default-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
diff --git a/src/pages/empty-page.tsx b/src/pages/empty-page.tsx
index 1cb34bddc..dc421c99c 100644
--- a/src/pages/empty-page.tsx
+++ b/src/pages/empty-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Layout } from '../components/ui';
 
diff --git a/src/pages/event-page.tsx b/src/pages/event-page.tsx
index b5249c744..570145096 100644
--- a/src/pages/event-page.tsx
+++ b/src/pages/event-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/pages/events-page.tsx b/src/pages/events-page.tsx
index eb31ecca9..ea41ccf0d 100644
--- a/src/pages/events-page.tsx
+++ b/src/pages/events-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Layout } from 'soapbox/components/ui';
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
diff --git a/src/pages/group-page.tsx b/src/pages/group-page.tsx
index 3331d5b78..8c684b08e 100644
--- a/src/pages/group-page.tsx
+++ b/src/pages/group-page.tsx
@@ -1,7 +1,7 @@
 import banIcon from '@tabler/icons/outline/ban.svg';
 import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
diff --git a/src/pages/groups-page.tsx b/src/pages/groups-page.tsx
index ed3f62501..e46e1b1f3 100644
--- a/src/pages/groups-page.tsx
+++ b/src/pages/groups-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Route, Routes } from 'react-router-dom-v5-compat';
 
 import { Column, Layout } from 'soapbox/components/ui';
diff --git a/src/pages/groups-pending-page.tsx b/src/pages/groups-pending-page.tsx
index f692cf7bf..ff9375e06 100644
--- a/src/pages/groups-pending-page.tsx
+++ b/src/pages/groups-pending-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Layout } from 'soapbox/components/ui';
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx
index 5087f2990..1d7e643bf 100644
--- a/src/pages/home-page.tsx
+++ b/src/pages/home-page.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
diff --git a/src/pages/landing-page.tsx b/src/pages/landing-page.tsx
index dd1733923..4ccbe385e 100644
--- a/src/pages/landing-page.tsx
+++ b/src/pages/landing-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
diff --git a/src/pages/manage-groups-page.tsx b/src/pages/manage-groups-page.tsx
index 1214259a8..d59d9b6fd 100644
--- a/src/pages/manage-groups-page.tsx
+++ b/src/pages/manage-groups-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import { Layout } from 'soapbox/components/ui';
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
diff --git a/src/pages/profile-page.tsx b/src/pages/profile-page.tsx
index 5a0001e69..a0a0d1197 100644
--- a/src/pages/profile-page.tsx
+++ b/src/pages/profile-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Redirect, useHistory } from 'react-router-dom';
 
diff --git a/src/pages/remote-instance-page.tsx b/src/pages/remote-instance-page.tsx
index 0f15624a8..98c331add 100644
--- a/src/pages/remote-instance-page.tsx
+++ b/src/pages/remote-instance-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
diff --git a/src/pages/search-page.tsx b/src/pages/search-page.tsx
index 0da0ffb01..4e16fd81b 100644
--- a/src/pages/search-page.tsx
+++ b/src/pages/search-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
diff --git a/src/pages/status-page.tsx b/src/pages/status-page.tsx
index aacee8175..e1c3abc03 100644
--- a/src/pages/status-page.tsx
+++ b/src/pages/status-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
diff --git a/src/pages/wide-page.tsx b/src/pages/wide-page.tsx
index a85e21a46..1242482c0 100644
--- a/src/pages/wide-page.tsx
+++ b/src/pages/wide-page.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 
 interface IWidePage {
   children: React.ReactNode;
diff --git a/src/toast.test.tsx b/src/toast.test.tsx
index 860fa35c6..c3aca5a11 100644
--- a/src/toast.test.tsx
+++ b/src/toast.test.tsx
@@ -1,7 +1,6 @@
 
 import { render } from '@testing-library/react';
 import { AxiosError, AxiosHeaders } from 'axios';
-import React from 'react';
 import { Toaster } from 'react-hot-toast';
 import { IntlProvider } from 'react-intl';
 import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
diff --git a/src/toast.tsx b/src/toast.tsx
index 897f97429..e0c5db424 100644
--- a/src/toast.tsx
+++ b/src/toast.tsx
@@ -1,5 +1,4 @@
 import { AxiosError } from 'axios';
-import React from 'react';
 import toast from 'react-hot-toast';
 import { defineMessages, MessageDescriptor } from 'react-intl';
 
diff --git a/src/utils/numbers.test.tsx b/src/utils/numbers.test.tsx
index 0ff44ebd7..dbe1d26f3 100644
--- a/src/utils/numbers.test.tsx
+++ b/src/utils/numbers.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { describe, expect, test } from 'vitest';
 
 import { render, screen } from 'soapbox/jest/test-helpers';
diff --git a/src/utils/numbers.tsx b/src/utils/numbers.tsx
index a35008c83..60f03294c 100644
--- a/src/utils/numbers.tsx
+++ b/src/utils/numbers.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedNumber } from 'react-intl';
 import { z } from 'zod';
 
diff --git a/tsconfig.json b/tsconfig.json
index 6c92951ba..c48e67690 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
     "module": "ESNext",
     "lib": ["ESNext", "DOM"],
     "target": "ESNext",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
     "isolatedModules": true,
     "moduleResolution": "Bundler",

From 9e7f14d83511f62c0654edf254ff8fe87e6d6e37 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 16:31:38 -0600
Subject: [PATCH 072/133] vite: switch to react swc

---
 package.json   |   2 +-
 vite.config.ts |   2 +-
 yarn.lock      | 155 ++++++++++++++++++++++++++++---------------------
 3 files changed, 92 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index b88e232dc..2e51d7b2f 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,6 @@
     "@types/react-swipeable-views": "^0.13.1",
     "@types/redux-mock-store": "^1.0.6",
     "@types/semver": "^7.3.9",
-    "@vitejs/plugin-react": "^4.3.1",
     "@webbtc/webln-types": "^3.0.0",
     "autoprefixer": "^10.4.15",
     "axios": "^1.2.2",
@@ -166,6 +165,7 @@
     "@testing-library/user-event": "^14.5.1",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react-swc": "^3.7.1",
     "eslint": "^8.49.0",
     "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-compat": "^4.2.0",
diff --git a/vite.config.ts b/vite.config.ts
index bc5a9feeb..f7c890b94 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,7 @@
 import fs from 'node:fs';
 import { fileURLToPath, URL } from 'node:url';
 
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { Connect, defineConfig, Plugin, UserConfig } from 'vite';
 import checker from 'vite-plugin-checker';
diff --git a/yarn.lock b/yarn.lock
index 19398bd64..714f7cadd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -52,7 +52,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.4.tgz#7d2a80ce229890edcf4cc259d4d696cb4dae2fcb"
   integrity sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==
 
-"@babel/core@^7.24.4", "@babel/core@^7.24.5":
+"@babel/core@^7.24.4":
   version "7.25.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.2.tgz#ed8eec275118d7613e77a352894cd12ded8eba77"
   integrity sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
@@ -195,7 +195,7 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
   integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
@@ -282,7 +282,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
+"@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
   integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
@@ -743,20 +743,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-react-jsx-self@^7.24.5":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz#66bff0248ea0b549972e733516ffad577477bdab"
-  integrity sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-
-"@babel/plugin-transform-react-jsx-source@^7.24.1":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz#1198aab2548ad19582013815c938d3ebd8291ee3"
-  integrity sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-
 "@babel/plugin-transform-regenerator@^7.22.10":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz#8ceef3bd7375c4db7652878b0241b2be5d0c3cca"
@@ -975,7 +961,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.4.4":
+"@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.4.4":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
   integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
@@ -2349,6 +2335,87 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@swc/core-darwin-arm64@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.9.1.tgz#0fd83e5febe1044c7b12f128089cb8b213e14d0b"
+  integrity sha512-2/ncHSCdAh5OHem1fMITrWEzzl97OdMK1PHc9CkxSJnphLjRubfxB5sbc5tDhcO68a5tVy+DxwaBgDec3PXnOg==
+
+"@swc/core-darwin-x64@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.9.1.tgz#da28fcd37207655d2ad34dcb0d0819f20decb57a"
+  integrity sha512-4MDOFC5zmNqRJ9RGFOH95oYf27J9HniLVpB1pYm2gGeNHdl2QvDMtx2QTuMHQ6+OTn/3y1BHYuhBGp7d405oLA==
+
+"@swc/core-linux-arm-gnueabihf@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.9.1.tgz#dde1a15d1b88a6be000bbcecebe301227eb76c57"
+  integrity sha512-eVW/BjRW8/HpLe3+1jRU7w7PdRLBgnEEYTkHJISU8805/EKT03xNZn6CfaBpKfeAloY4043hbGzE/NP9IahdpQ==
+
+"@swc/core-linux-arm64-gnu@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.9.1.tgz#8b6d15b56597ba5e097932d3a305e88c3d749cec"
+  integrity sha512-8m3u1v8R8NgI/9+cHMkzk14w87blSy3OsQPWPfhOL+XPwhyLPvat+ahQJb2nZmltjTgkB4IbzKFSfbuA34LmNA==
+
+"@swc/core-linux-arm64-musl@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.9.1.tgz#dd822efe61b2bbbd378e6ca8d80b4ba992c34ad8"
+  integrity sha512-hpT0sQAZnW8l02I289yeyFfT9llGO9PzKDxUq8pocKtioEHiElRqR53juCWoSmzuWi+6KX7zUJ0NKCBrc8pmDg==
+
+"@swc/core-linux-x64-gnu@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.9.1.tgz#d02c63e96d4137c988e71189ccf1c40deb43b4cc"
+  integrity sha512-sGFdpdAYusk/ropHiwtXom2JrdaKPxl8MqemRv6dvxZq1Gm/GdmOowxdXIPjCgBGMgoXVcgNviH6CgiO5q+UtA==
+
+"@swc/core-linux-x64-musl@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.9.1.tgz#a8736ddb8e573aa59ccceb50813badff806b299b"
+  integrity sha512-YtNLNwIWs0Z2+XgBs6+LrCIGtfCDtNr4S4b6Q5HDOreEIGzSvhkef8eyBI5L+fJ2eGov4b7iEo61C4izDJS5RA==
+
+"@swc/core-win32-arm64-msvc@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.9.1.tgz#91c75fe95cd7bb7f7ae85c6b3bd405af63dc5984"
+  integrity sha512-qSxD3uZW2vSiHqUt30vUi0PB92zDh9bjqh5YKpfhhVa7h1vt/xXhlid8yMvSNToTfzhRrTEffOAPUr7WVoyQUA==
+
+"@swc/core-win32-ia32-msvc@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.9.1.tgz#e2ea0be7ca34b642b3adbb6c1fad34fb7874514b"
+  integrity sha512-C3fPEwyX/WRPlX6zIToNykJuz1JkZX0sk8H1QH2vpnKuySUkt/Ur5K2FzLgSWzJdbfxstpgS151/es0VGAD+ZA==
+
+"@swc/core-win32-x64-msvc@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.9.1.tgz#c9e532a791fdf44e3c9635135b1026f140d06483"
+  integrity sha512-2XZ+U1AyVsOAXeH6WK1syDm7+gwTjA8fShs93WcbxnK7HV+NigDlvr4124CeJLTHyh3fMh1o7+CnQnaBJhlysQ==
+
+"@swc/core@^1.7.26":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.9.1.tgz#1a1b8378e4b64b74e7f932014ca800ea6133ac27"
+  integrity sha512-OnPc+Kt5oy3xTvr/KCUOqE9ptJcWbyQgAUr1ydh9EmbBcmJTaO1kfQCxm/axzJi6sKeDTxL9rX5zvLOhoYIaQw==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+    "@swc/types" "^0.1.14"
+  optionalDependencies:
+    "@swc/core-darwin-arm64" "1.9.1"
+    "@swc/core-darwin-x64" "1.9.1"
+    "@swc/core-linux-arm-gnueabihf" "1.9.1"
+    "@swc/core-linux-arm64-gnu" "1.9.1"
+    "@swc/core-linux-arm64-musl" "1.9.1"
+    "@swc/core-linux-x64-gnu" "1.9.1"
+    "@swc/core-linux-x64-musl" "1.9.1"
+    "@swc/core-win32-arm64-msvc" "1.9.1"
+    "@swc/core-win32-ia32-msvc" "1.9.1"
+    "@swc/core-win32-x64-msvc" "1.9.1"
+
+"@swc/counter@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/types@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.14.tgz#0a0a3f60f801c5d7d52ab02fd5f924d9c6dbcb0d"
+  integrity sha512-PbSmTiYCN+GMrvfjrMo9bdY+f2COnwbdnoMw7rqU/PI5jXpKjxOGZ0qqZCImxnT81NkNsKnmEpvu+hRXLBeCJg==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+
 "@szmarczak/http-timer@^4.0.5":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"
@@ -2460,39 +2527,6 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
   integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
 
-"@types/babel__core@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
-  integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
-  dependencies:
-    "@babel/parser" "^7.20.7"
-    "@babel/types" "^7.20.7"
-    "@types/babel__generator" "*"
-    "@types/babel__template" "*"
-    "@types/babel__traverse" "*"
-
-"@types/babel__generator@*":
-  version "7.6.8"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
-  integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@types/babel__template@*":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"
-  integrity sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@types/babel__traverse@*":
-  version "7.20.6"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.6.tgz#8dc9f0ae0f202c08d8d4dab648912c8d6038e3f7"
-  integrity sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==
-  dependencies:
-    "@babel/types" "^7.20.7"
-
 "@types/cacheable-request@^6.0.1":
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.3.tgz#a430b3260466ca7b5ca5bfd735693b36e7a9d183"
@@ -2870,16 +2904,12 @@
     "@typescript-eslint/types" "7.0.1"
     eslint-visitor-keys "^3.4.1"
 
-"@vitejs/plugin-react@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz#d0be6594051ded8957df555ff07a991fb618b48e"
-  integrity sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==
+"@vitejs/plugin-react-swc@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.1.tgz#bc5af48ef35c525d623fa14177c912cbaa86a846"
+  integrity sha512-vgWOY0i1EROUK0Ctg1hwhtC3SdcDjZcdit4Ups4aPkDcB1jYhmo+RMYWY87cmXMhvtD5uf8lV89j2w16vkdSVg==
   dependencies:
-    "@babel/core" "^7.24.5"
-    "@babel/plugin-transform-react-jsx-self" "^7.24.5"
-    "@babel/plugin-transform-react-jsx-source" "^7.24.1"
-    "@types/babel__core" "^7.20.5"
-    react-refresh "^0.14.2"
+    "@swc/core" "^1.7.26"
 
 "@vitest/expect@2.1.1":
   version "2.1.1"
@@ -7077,11 +7107,6 @@ react-redux@^9.0.4:
     "@types/use-sync-external-store" "^0.0.3"
     use-sync-external-store "^1.0.0"
 
-react-refresh@^0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
-  integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
-
 react-router-dom-v5-compat@^6.6.2:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.6.2.tgz#e8a985dd6092885305e0b04aa141f659b282e25f"

From 6e33ff2b45542f2c271fad57a7c9ab33b41e9647 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 16:40:25 -0600
Subject: [PATCH 073/133] tsconfig: enable noUnusedLocals

---
 src/features/compose/editor/plugins/link-plugin.tsx | 1 -
 tsconfig.json                                       | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/compose/editor/plugins/link-plugin.tsx b/src/features/compose/editor/plugins/link-plugin.tsx
index fac30f66c..41a343fb5 100644
--- a/src/features/compose/editor/plugins/link-plugin.tsx
+++ b/src/features/compose/editor/plugins/link-plugin.tsx
@@ -5,7 +5,6 @@
  */
 
 import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
-import * as React from 'react';
 
 // Source: https://stackoverflow.com/a/8234912/2013580
 const urlRegExp = new RegExp(
diff --git a/tsconfig.json b/tsconfig.json
index c48e67690..bda772735 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
     "jsx": "react-jsx",
     "allowJs": true,
     "isolatedModules": true,
+    "noUnusedLocals": true,
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "esModuleInterop": true,

From 4c4f1ecd80f1c874b53c89cf85993906efa0d5d7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 16:42:52 -0600
Subject: [PATCH 074/133] tsconfig: enable noFallthroughCasesInSwitch &
 noUncheckedSideEffectImports

---
 tsconfig.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tsconfig.json b/tsconfig.json
index bda772735..a219990ad 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,8 @@
     "allowJs": true,
     "isolatedModules": true,
     "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "esModuleInterop": true,

From 02f76b7c6b115f661f5e7db9054943feae67e07a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 16:56:53 -0600
Subject: [PATCH 075/133] Simplify tsconfig

---
 tsconfig.json | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index a219990ad..a71aa20ed 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,28 +1,30 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "dist",
-    "sourceMap": true,
-    "strict": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
     "target": "ESNext",
-    "jsx": "react-jsx",
-    "allowJs": true,
-    "isolatedModules": true,
-    "noUnusedLocals": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
+    "outDir": "dist",
     "paths": {
-      "soapbox/*": ["src/*"],
+      "soapbox/*": ["./src/*"],
     },
     "types": [
       "vite/client",
       "@webbtc/webln-types"
-    ]
+    ],
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   }
 }

From 013582e9e4d2cf237fbb727537ce74eb7510327f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 17:01:25 -0600
Subject: [PATCH 076/133] Delete blank empty lines at the top of source code
 files

---
 src/actions/admin.ts                                             | 1 -
 src/api/hooks/index.ts                                           | 1 -
 src/components/__mocks__/react-inlinesvg.tsx                     | 1 -
 src/components/announcements/emoji.tsx                           | 1 -
 src/components/autosuggest-emoji.tsx                             | 1 -
 src/components/display-name-inline.tsx                           | 1 -
 src/components/display-name.tsx                                  | 1 -
 src/components/emoji-graphic.tsx                                 | 1 -
 src/components/group-card.tsx                                    | 1 -
 src/components/hashtag-link.tsx                                  | 1 -
 src/components/icon-with-counter.tsx                             | 1 -
 src/components/landing-gradient.tsx                              | 1 -
 src/components/loading-screen.tsx                                | 1 -
 src/components/polls/poll-footer.test.tsx                        | 1 -
 src/components/pullable.tsx                                      | 1 -
 src/components/radio.tsx                                         | 1 -
 src/components/scroll-top-button.test.tsx                        | 1 -
 src/components/statuses/sensitive-content-overlay.test.tsx       | 1 -
 src/components/statuses/status-info.tsx                          | 1 -
 src/components/ui/counter/counter.tsx                            | 1 -
 src/components/ui/datepicker/datepicker.test.tsx                 | 1 -
 src/components/ui/datetime/datetime.tsx                          | 1 -
 src/components/ui/divider/divider.tsx                            | 1 -
 src/components/ui/emoji/emoji.tsx                                | 1 -
 src/components/ui/form-actions/form-actions.tsx                  | 1 -
 src/components/ui/icon/icon.tsx                                  | 1 -
 src/components/ui/icon/svg-icon.test.tsx                         | 1 -
 src/components/ui/modal/modal.test.tsx                           | 1 -
 src/containers/account-container.tsx                             | 1 -
 src/features/admin/components/unapproved-account.tsx             | 1 -
 src/features/auth-login/components/captcha.test.tsx              | 1 -
 .../auth-login/components/password-reset-confirm.test.tsx        | 1 -
 src/features/chats/components/chat-message-list.test.tsx         | 1 -
 src/features/chats/components/chat-message-reaction.test.tsx     | 1 -
 src/features/chats/components/chat-pane-header.test.tsx          | 1 -
 src/features/chats/components/chat-pane/chat-pane.test.tsx       | 1 -
 src/features/chats/components/chat-pending-upload.tsx            | 1 -
 src/features/chats/components/chat-search/chat-search.test.tsx   | 1 -
 src/features/chats/components/chat-widget.test.tsx               | 1 -
 src/features/chats/index.tsx                                     | 1 -
 src/features/compose/components/autosuggest-account.tsx          | 1 -
 src/features/compose/components/polls/duration-selector.test.tsx | 1 -
 src/features/compose/components/upload-progress.tsx              | 1 -
 src/features/crypto-donate/components/crypto-icon.tsx            | 1 -
 src/features/crypto-donate/components/site-wallet.tsx            | 1 -
 src/features/developers/index.tsx                                | 1 -
 src/features/emoji/search.test.ts                                | 1 -
 src/features/follow-requests/components/account-authorize.tsx    | 1 -
 src/features/generic-not-found/index.tsx                         | 1 -
 src/features/group/components/group-member-list-item.test.tsx    | 1 -
 src/features/groups/components/discover/layout-buttons.test.tsx  | 1 -
 src/features/groups/components/discover/search/blankslate.tsx    | 1 -
 src/features/groups/components/discover/search/results.test.tsx  | 1 -
 src/features/groups/components/pending-groups-row.tsx            | 1 -
 src/features/groups/discover.test.tsx                            | 1 -
 src/features/intentional-error/index.tsx                         | 1 -
 src/features/landing-timeline/components/logo-text.tsx           | 1 -
 src/features/placeholder/components/placeholder-chat.tsx         | 1 -
 src/features/placeholder/components/placeholder-display-name.tsx | 1 -
 src/features/placeholder/components/placeholder-event-header.tsx | 1 -
 .../placeholder/components/placeholder-event-preview.tsx         | 1 -
 src/features/placeholder/components/placeholder-group-card.tsx   | 1 -
 .../placeholder/components/placeholder-group-discover.tsx        | 1 -
 src/features/placeholder/components/placeholder-group-search.tsx | 1 -
 src/features/placeholder/components/placeholder-hashtag.tsx      | 1 -
 .../placeholder/components/placeholder-material-status.tsx       | 1 -
 .../placeholder/components/placeholder-sidebar-suggestions.tsx   | 1 -
 .../placeholder/components/placeholder-sidebar-trends.tsx        | 1 -
 .../placeholder/components/placeholder-status-content.tsx        | 1 -
 src/features/remote-timeline/components/pinned-hosts-picker.tsx  | 1 -
 src/features/soapbox-config/components/icon-picker.tsx           | 1 -
 src/features/theme-editor/components/color.tsx                   | 1 -
 src/features/ui/components/column-loading.tsx                    | 1 -
 src/features/ui/components/columns-area.tsx                      | 1 -
 src/features/ui/components/compose-button.test.tsx               | 1 -
 src/features/ui/components/modal-loading.tsx                     | 1 -
 src/features/ui/components/modals/component-modal.tsx            | 1 -
 src/features/ui/components/modals/crypto-donate-modal.tsx        | 1 -
 src/features/ui/components/modals/zap-split/display-name-row.tsx | 1 -
 src/features/ui/components/panels/my-groups-panel.tsx            | 1 -
 src/features/ui/components/panels/suggested-groups-panel.tsx     | 1 -
 src/features/ui/components/promo-panel.tsx                       | 1 -
 src/features/ui/components/theme-toggle.tsx                      | 1 -
 src/middleware/sounds.ts                                         | 1 -
 src/pages/admin-page.tsx                                         | 1 -
 src/pages/chats-page.tsx                                         | 1 -
 src/pages/default-page.tsx                                       | 1 -
 src/pages/empty-page.tsx                                         | 1 -
 src/pages/events-page.tsx                                        | 1 -
 src/pages/groups-pending-page.tsx                                | 1 -
 src/pages/landing-page.tsx                                       | 1 -
 src/pages/manage-groups-page.tsx                                 | 1 -
 src/pages/remote-instance-page.tsx                               | 1 -
 src/pages/search-page.tsx                                        | 1 -
 src/pages/status-page.tsx                                        | 1 -
 src/pages/wide-page.tsx                                          | 1 -
 src/queries/chats.test.ts                                        | 1 -
 src/toast.test.tsx                                               | 1 -
 src/utils/scopes.ts                                              | 1 -
 99 files changed, 99 deletions(-)

diff --git a/src/actions/admin.ts b/src/actions/admin.ts
index e7b2d35cb..4dd3c1b64 100644
--- a/src/actions/admin.ts
+++ b/src/actions/admin.ts
@@ -1,4 +1,3 @@
-
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer';
 import { accountIdsToAccts } from 'soapbox/selectors';
diff --git a/src/api/hooks/index.ts b/src/api/hooks/index.ts
index f085f3c4b..a3afe87a4 100644
--- a/src/api/hooks/index.ts
+++ b/src/api/hooks/index.ts
@@ -1,4 +1,3 @@
-
 // Accounts
 export { useAccount } from './accounts/useAccount';
 export { useAccountLookup } from './accounts/useAccountLookup';
diff --git a/src/components/__mocks__/react-inlinesvg.tsx b/src/components/__mocks__/react-inlinesvg.tsx
index 7169c13a7..7b288a7fb 100644
--- a/src/components/__mocks__/react-inlinesvg.tsx
+++ b/src/components/__mocks__/react-inlinesvg.tsx
@@ -1,4 +1,3 @@
-
 interface IInlineSVG {
   loader?: JSX.Element;
 }
diff --git a/src/components/announcements/emoji.tsx b/src/components/announcements/emoji.tsx
index 862014e13..1deddf26a 100644
--- a/src/components/announcements/emoji.tsx
+++ b/src/components/announcements/emoji.tsx
@@ -1,4 +1,3 @@
-
 import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { useSettings } from 'soapbox/hooks';
 import { joinPublicPath } from 'soapbox/utils/static';
diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx
index 6eaaf4110..35cc753f3 100644
--- a/src/components/autosuggest-emoji.tsx
+++ b/src/components/autosuggest-emoji.tsx
@@ -1,4 +1,3 @@
-
 import { isCustomEmoji } from 'soapbox/features/emoji';
 import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { joinPublicPath } from 'soapbox/utils/static';
diff --git a/src/components/display-name-inline.tsx b/src/components/display-name-inline.tsx
index 9c6369a86..0db9fbc4b 100644
--- a/src/components/display-name-inline.tsx
+++ b/src/components/display-name-inline.tsx
@@ -1,4 +1,3 @@
-
 import { useSoapboxConfig } from 'soapbox/hooks';
 
 import { getAcct } from '../utils/accounts';
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx
index a72a32d2d..36bb57c40 100644
--- a/src/components/display-name.tsx
+++ b/src/components/display-name.tsx
@@ -1,4 +1,3 @@
-
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
diff --git a/src/components/emoji-graphic.tsx b/src/components/emoji-graphic.tsx
index 02abea12b..076133c7a 100644
--- a/src/components/emoji-graphic.tsx
+++ b/src/components/emoji-graphic.tsx
@@ -1,4 +1,3 @@
-
 import Emoji from 'soapbox/components/ui/emoji/emoji';
 
 interface IEmojiGraphic {
diff --git a/src/components/group-card.tsx b/src/components/group-card.tsx
index dc06d7fd8..dc68f5c74 100644
--- a/src/components/group-card.tsx
+++ b/src/components/group-card.tsx
@@ -1,4 +1,3 @@
-
 import GroupHeaderImage from 'soapbox/features/group/components/group-header-image';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
diff --git a/src/components/hashtag-link.tsx b/src/components/hashtag-link.tsx
index 247b3bc34..420f8f33a 100644
--- a/src/components/hashtag-link.tsx
+++ b/src/components/hashtag-link.tsx
@@ -1,4 +1,3 @@
-
 import Link from './link';
 
 interface IHashtagLink {
diff --git a/src/components/icon-with-counter.tsx b/src/components/icon-with-counter.tsx
index 4939375ce..ae77c5a93 100644
--- a/src/components/icon-with-counter.tsx
+++ b/src/components/icon-with-counter.tsx
@@ -1,4 +1,3 @@
-
 import Icon, { IIcon } from 'soapbox/components/icon';
 import { Counter } from 'soapbox/components/ui';
 
diff --git a/src/components/landing-gradient.tsx b/src/components/landing-gradient.tsx
index a1117a9ff..d7d22dd38 100644
--- a/src/components/landing-gradient.tsx
+++ b/src/components/landing-gradient.tsx
@@ -1,4 +1,3 @@
-
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
   <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
diff --git a/src/components/loading-screen.tsx b/src/components/loading-screen.tsx
index 2a91e7fe5..d3c76043e 100644
--- a/src/components/loading-screen.tsx
+++ b/src/components/loading-screen.tsx
@@ -1,4 +1,3 @@
-
 import LandingGradient from 'soapbox/components/landing-gradient';
 import { Spinner } from 'soapbox/components/ui';
 
diff --git a/src/components/polls/poll-footer.test.tsx b/src/components/polls/poll-footer.test.tsx
index 06a4424a5..39dd4ba18 100644
--- a/src/components/polls/poll-footer.test.tsx
+++ b/src/components/polls/poll-footer.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
diff --git a/src/components/pullable.tsx b/src/components/pullable.tsx
index 861863ee5..d04eb00ef 100644
--- a/src/components/pullable.tsx
+++ b/src/components/pullable.tsx
@@ -1,4 +1,3 @@
-
 import PullToRefresh from './pull-to-refresh';
 
 interface IPullable {
diff --git a/src/components/radio.tsx b/src/components/radio.tsx
index b5e2bee50..d17920ffa 100644
--- a/src/components/radio.tsx
+++ b/src/components/radio.tsx
@@ -1,4 +1,3 @@
-
 import { Children, cloneElement } from 'react';
 
 import List, { ListItem } from './list';
diff --git a/src/components/scroll-top-button.test.tsx b/src/components/scroll-top-button.test.tsx
index c6cb517ff..387e9c843 100644
--- a/src/components/scroll-top-button.test.tsx
+++ b/src/components/scroll-top-button.test.tsx
@@ -1,4 +1,3 @@
-
 import { defineMessages } from 'react-intl';
 import { describe, expect, it } from 'vitest';
 
diff --git a/src/components/statuses/sensitive-content-overlay.test.tsx b/src/components/statuses/sensitive-content-overlay.test.tsx
index 7c3d6a35f..b998321cc 100644
--- a/src/components/statuses/sensitive-content-overlay.test.tsx
+++ b/src/components/statuses/sensitive-content-overlay.test.tsx
@@ -1,4 +1,3 @@
-
 import { Map as ImmutableMap } from 'immutable';
 import { beforeEach, describe, expect, it } from 'vitest';
 
diff --git a/src/components/statuses/status-info.tsx b/src/components/statuses/status-info.tsx
index ffeafcecb..288c5e018 100644
--- a/src/components/statuses/status-info.tsx
+++ b/src/components/statuses/status-info.tsx
@@ -1,4 +1,3 @@
-
 import { HStack, Text } from '../ui';
 
 interface IStatusInfo {
diff --git a/src/components/ui/counter/counter.tsx b/src/components/ui/counter/counter.tsx
index 0f7edca8d..1372a1df4 100644
--- a/src/components/ui/counter/counter.tsx
+++ b/src/components/ui/counter/counter.tsx
@@ -1,4 +1,3 @@
-
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface ICounter {
diff --git a/src/components/ui/datepicker/datepicker.test.tsx b/src/components/ui/datepicker/datepicker.test.tsx
index 745f226b2..a31f4683c 100644
--- a/src/components/ui/datepicker/datepicker.test.tsx
+++ b/src/components/ui/datepicker/datepicker.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/src/components/ui/datetime/datetime.tsx b/src/components/ui/datetime/datetime.tsx
index ba24044b1..0244508c1 100644
--- a/src/components/ui/datetime/datetime.tsx
+++ b/src/components/ui/datetime/datetime.tsx
@@ -1,4 +1,3 @@
-
 import Input from '../input/input';
 
 interface DatetimeProps {
diff --git a/src/components/ui/divider/divider.tsx b/src/components/ui/divider/divider.tsx
index f3f55c4fb..7ccb9c8be 100644
--- a/src/components/ui/divider/divider.tsx
+++ b/src/components/ui/divider/divider.tsx
@@ -1,4 +1,3 @@
-
 import Text from '../text/text';
 
 import type { Sizes as TextSizes } from '../text/text';
diff --git a/src/components/ui/emoji/emoji.tsx b/src/components/ui/emoji/emoji.tsx
index 1b0967510..ce673c482 100644
--- a/src/components/ui/emoji/emoji.tsx
+++ b/src/components/ui/emoji/emoji.tsx
@@ -1,4 +1,3 @@
-
 import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji';
 import { joinPublicPath } from 'soapbox/utils/static';
 
diff --git a/src/components/ui/form-actions/form-actions.tsx b/src/components/ui/form-actions/form-actions.tsx
index d92a89719..f67f90a18 100644
--- a/src/components/ui/form-actions/form-actions.tsx
+++ b/src/components/ui/form-actions/form-actions.tsx
@@ -1,4 +1,3 @@
-
 import HStack from '../hstack/hstack';
 
 interface IFormActions {
diff --git a/src/components/ui/icon/icon.tsx b/src/components/ui/icon/icon.tsx
index 71455c37d..2210a5bd5 100644
--- a/src/components/ui/icon/icon.tsx
+++ b/src/components/ui/icon/icon.tsx
@@ -1,4 +1,3 @@
-
 import Counter from '../counter/counter';
 
 import SvgIcon from './svg-icon';
diff --git a/src/components/ui/icon/svg-icon.test.tsx b/src/components/ui/icon/svg-icon.test.tsx
index f226a7b6e..f1ac5f127 100644
--- a/src/components/ui/icon/svg-icon.test.tsx
+++ b/src/components/ui/icon/svg-icon.test.tsx
@@ -1,4 +1,3 @@
-
 import IconCode from '@tabler/icons/outline/code.svg';
 import { describe, expect, it } from 'vitest';
 
diff --git a/src/components/ui/modal/modal.test.tsx b/src/components/ui/modal/modal.test.tsx
index b7bf31762..a60eb224a 100644
--- a/src/components/ui/modal/modal.test.tsx
+++ b/src/components/ui/modal/modal.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/src/containers/account-container.tsx b/src/containers/account-container.tsx
index 5fc6b038e..5fdb55449 100644
--- a/src/containers/account-container.tsx
+++ b/src/containers/account-container.tsx
@@ -1,4 +1,3 @@
-
 import { useAccount } from 'soapbox/api/hooks';
 import Account, { IAccount } from 'soapbox/components/account';
 
diff --git a/src/features/admin/components/unapproved-account.tsx b/src/features/admin/components/unapproved-account.tsx
index 7ceacd73d..510c36b27 100644
--- a/src/features/admin/components/unapproved-account.tsx
+++ b/src/features/admin/components/unapproved-account.tsx
@@ -1,4 +1,3 @@
-
 import { approveUser, rejectUser } from 'soapbox/actions/admin';
 import { useAccount } from 'soapbox/api/hooks';
 import Account from 'soapbox/components/account';
diff --git a/src/features/auth-login/components/captcha.test.tsx b/src/features/auth-login/components/captcha.test.tsx
index a97b29e8c..b8e3fac21 100644
--- a/src/features/auth-login/components/captcha.test.tsx
+++ b/src/features/auth-login/components/captcha.test.tsx
@@ -1,4 +1,3 @@
-
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
diff --git a/src/features/auth-login/components/password-reset-confirm.test.tsx b/src/features/auth-login/components/password-reset-confirm.test.tsx
index 7000174c9..5551f79c3 100644
--- a/src/features/auth-login/components/password-reset-confirm.test.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.test.tsx
@@ -1,4 +1,3 @@
-
 import { Route, Switch } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 
diff --git a/src/features/chats/components/chat-message-list.test.tsx b/src/features/chats/components/chat-message-list.test.tsx
index 8e3f0ec0a..0e45d807d 100644
--- a/src/features/chats/components/chat-message-list.test.tsx
+++ b/src/features/chats/components/chat-message-list.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
diff --git a/src/features/chats/components/chat-message-reaction.test.tsx b/src/features/chats/components/chat-message-reaction.test.tsx
index 9868a932d..504e9534f 100644
--- a/src/features/chats/components/chat-message-reaction.test.tsx
+++ b/src/features/chats/components/chat-message-reaction.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/src/features/chats/components/chat-pane-header.test.tsx b/src/features/chats/components/chat-pane-header.test.tsx
index 53d34cb9a..e642222d0 100644
--- a/src/features/chats/components/chat-pane-header.test.tsx
+++ b/src/features/chats/components/chat-pane-header.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/src/features/chats/components/chat-pane/chat-pane.test.tsx b/src/features/chats/components/chat-pane/chat-pane.test.tsx
index c28cd76f6..9aa54fea2 100644
--- a/src/features/chats/components/chat-pane/chat-pane.test.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.test.tsx
@@ -1,4 +1,3 @@
-
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
 
diff --git a/src/features/chats/components/chat-pending-upload.tsx b/src/features/chats/components/chat-pending-upload.tsx
index 220e0fe9a..62d385a22 100644
--- a/src/features/chats/components/chat-pending-upload.tsx
+++ b/src/features/chats/components/chat-pending-upload.tsx
@@ -1,4 +1,3 @@
-
 import { ProgressBar } from 'soapbox/components/ui';
 
 interface IChatPendingUpload {
diff --git a/src/features/chats/components/chat-search/chat-search.test.tsx b/src/features/chats/components/chat-search/chat-search.test.tsx
index b1618c93a..43bcacd1a 100644
--- a/src/features/chats/components/chat-search/chat-search.test.tsx
+++ b/src/features/chats/components/chat-search/chat-search.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
diff --git a/src/features/chats/components/chat-widget.test.tsx b/src/features/chats/components/chat-widget.test.tsx
index 5bda994ee..1c1e36b29 100644
--- a/src/features/chats/components/chat-widget.test.tsx
+++ b/src/features/chats/components/chat-widget.test.tsx
@@ -1,4 +1,3 @@
-
 import { Route, Switch } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 
diff --git a/src/features/chats/index.tsx b/src/features/chats/index.tsx
index e44d5695c..a7cc9a2e6 100644
--- a/src/features/chats/index.tsx
+++ b/src/features/chats/index.tsx
@@ -1,4 +1,3 @@
-
 import { ChatProvider } from 'soapbox/contexts/chat-context';
 
 import ChatPage from './components/chat-page/chat-page';
diff --git a/src/features/compose/components/autosuggest-account.tsx b/src/features/compose/components/autosuggest-account.tsx
index 1b3d2c3bd..0a97f26a2 100644
--- a/src/features/compose/components/autosuggest-account.tsx
+++ b/src/features/compose/components/autosuggest-account.tsx
@@ -1,4 +1,3 @@
-
 import { useAccount } from 'soapbox/api/hooks';
 import Account from 'soapbox/components/account';
 
diff --git a/src/features/compose/components/polls/duration-selector.test.tsx b/src/features/compose/components/polls/duration-selector.test.tsx
index b221ade24..af24370fa 100644
--- a/src/features/compose/components/polls/duration-selector.test.tsx
+++ b/src/features/compose/components/polls/duration-selector.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/src/features/compose/components/upload-progress.tsx b/src/features/compose/components/upload-progress.tsx
index 8652e64bb..dc526723e 100644
--- a/src/features/compose/components/upload-progress.tsx
+++ b/src/features/compose/components/upload-progress.tsx
@@ -1,4 +1,3 @@
-
 import UploadProgress from 'soapbox/components/upload-progress';
 import { useCompose } from 'soapbox/hooks';
 
diff --git a/src/features/crypto-donate/components/crypto-icon.tsx b/src/features/crypto-donate/components/crypto-icon.tsx
index b2e646bbe..c42327bbe 100644
--- a/src/features/crypto-donate/components/crypto-icon.tsx
+++ b/src/features/crypto-donate/components/crypto-icon.tsx
@@ -1,4 +1,3 @@
-
 import genericIcon from 'soapbox/assets/cryptocurrency/generic.svg';
 
 /** Get crypto icon URL by ticker symbol, or fall back to generic icon */
diff --git a/src/features/crypto-donate/components/site-wallet.tsx b/src/features/crypto-donate/components/site-wallet.tsx
index e8d7bc6d9..3c63171de 100644
--- a/src/features/crypto-donate/components/site-wallet.tsx
+++ b/src/features/crypto-donate/components/site-wallet.tsx
@@ -1,4 +1,3 @@
-
 import { Stack } from 'soapbox/components/ui';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
diff --git a/src/features/developers/index.tsx b/src/features/developers/index.tsx
index 6ac4104a4..39a8577ae 100644
--- a/src/features/developers/index.tsx
+++ b/src/features/developers/index.tsx
@@ -1,4 +1,3 @@
-
 import { getSettings } from 'soapbox/actions/settings';
 import { useAppSelector } from 'soapbox/hooks';
 
diff --git a/src/features/emoji/search.test.ts b/src/features/emoji/search.test.ts
index 3ef806d83..4b5b0a1e4 100644
--- a/src/features/emoji/search.test.ts
+++ b/src/features/emoji/search.test.ts
@@ -1,4 +1,3 @@
-
 import { List, Map } from 'immutable';
 import pick from 'lodash/pick';
 import { describe, expect, it } from 'vitest';
diff --git a/src/features/follow-requests/components/account-authorize.tsx b/src/features/follow-requests/components/account-authorize.tsx
index 01dc3ff71..e73224165 100644
--- a/src/features/follow-requests/components/account-authorize.tsx
+++ b/src/features/follow-requests/components/account-authorize.tsx
@@ -1,4 +1,3 @@
-
 import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
 import { useAccount } from 'soapbox/api/hooks';
 import Account from 'soapbox/components/account';
diff --git a/src/features/generic-not-found/index.tsx b/src/features/generic-not-found/index.tsx
index 174e9f3e1..9847cdc7b 100644
--- a/src/features/generic-not-found/index.tsx
+++ b/src/features/generic-not-found/index.tsx
@@ -1,4 +1,3 @@
-
 import MissingIndicator from '../../components/missing-indicator';
 
 const GenericNotFound = () => (
diff --git a/src/features/group/components/group-member-list-item.test.tsx b/src/features/group/components/group-member-list-item.test.tsx
index f36e6f107..e02eb6242 100644
--- a/src/features/group/components/group-member-list-item.test.tsx
+++ b/src/features/group/components/group-member-list-item.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it } from 'vitest';
 
diff --git a/src/features/groups/components/discover/layout-buttons.test.tsx b/src/features/groups/components/discover/layout-buttons.test.tsx
index 2a980c804..24784eee1 100644
--- a/src/features/groups/components/discover/layout-buttons.test.tsx
+++ b/src/features/groups/components/discover/layout-buttons.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/src/features/groups/components/discover/search/blankslate.tsx b/src/features/groups/components/discover/search/blankslate.tsx
index 5ad85291d..407330256 100644
--- a/src/features/groups/components/discover/search/blankslate.tsx
+++ b/src/features/groups/components/discover/search/blankslate.tsx
@@ -1,4 +1,3 @@
-
 import { Stack, Text } from 'soapbox/components/ui';
 
 interface Props {
diff --git a/src/features/groups/components/discover/search/results.test.tsx b/src/features/groups/components/discover/search/results.test.tsx
index d808d83a0..ac45e704c 100644
--- a/src/features/groups/components/discover/search/results.test.tsx
+++ b/src/features/groups/components/discover/search/results.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { VirtuosoGridMockContext, VirtuosoMockContext } from 'react-virtuoso';
 import { describe, expect, it, vi } from 'vitest';
diff --git a/src/features/groups/components/pending-groups-row.tsx b/src/features/groups/components/pending-groups-row.tsx
index 094aad2aa..9c654f395 100644
--- a/src/features/groups/components/pending-groups-row.tsx
+++ b/src/features/groups/components/pending-groups-row.tsx
@@ -1,4 +1,3 @@
-
 import { usePendingGroups } from 'soapbox/api/hooks';
 import { PendingItemsRow } from 'soapbox/components/pending-items-row';
 import { Divider } from 'soapbox/components/ui';
diff --git a/src/features/groups/discover.test.tsx b/src/features/groups/discover.test.tsx
index 1b7dc251b..ad2e4dd1d 100644
--- a/src/features/groups/discover.test.tsx
+++ b/src/features/groups/discover.test.tsx
@@ -1,4 +1,3 @@
-
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
diff --git a/src/features/intentional-error/index.tsx b/src/features/intentional-error/index.tsx
index 52208ab48..ea588882a 100644
--- a/src/features/intentional-error/index.tsx
+++ b/src/features/intentional-error/index.tsx
@@ -1,4 +1,3 @@
-
 /**
  * IntentionalError:
  * For testing logging/monitoring & previewing ErrorBoundary design.
diff --git a/src/features/landing-timeline/components/logo-text.tsx b/src/features/landing-timeline/components/logo-text.tsx
index cfc52e174..6136c382b 100644
--- a/src/features/landing-timeline/components/logo-text.tsx
+++ b/src/features/landing-timeline/components/logo-text.tsx
@@ -1,4 +1,3 @@
-
 interface ILogoText extends Pick<React.HTMLAttributes<HTMLHeadingElement>, 'dir'> {
   children: React.ReactNode;
 }
diff --git a/src/features/placeholder/components/placeholder-chat.tsx b/src/features/placeholder/components/placeholder-chat.tsx
index a6474b5ba..353afda0b 100644
--- a/src/features/placeholder/components/placeholder-chat.tsx
+++ b/src/features/placeholder/components/placeholder-chat.tsx
@@ -1,4 +1,3 @@
-
 import { HStack, Stack } from 'soapbox/components/ui';
 
 import PlaceholderAvatar from './placeholder-avatar';
diff --git a/src/features/placeholder/components/placeholder-display-name.tsx b/src/features/placeholder/components/placeholder-display-name.tsx
index b0e8dd4c1..2b8f99455 100644
--- a/src/features/placeholder/components/placeholder-display-name.tsx
+++ b/src/features/placeholder/components/placeholder-display-name.tsx
@@ -1,4 +1,3 @@
-
 import { memo } from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
diff --git a/src/features/placeholder/components/placeholder-event-header.tsx b/src/features/placeholder/components/placeholder-event-header.tsx
index e0182866b..205f4ddd4 100644
--- a/src/features/placeholder/components/placeholder-event-header.tsx
+++ b/src/features/placeholder/components/placeholder-event-header.tsx
@@ -1,4 +1,3 @@
-
 import { Stack } from 'soapbox/components/ui';
 
 import { generateText, randomIntFromInterval } from '../utils';
diff --git a/src/features/placeholder/components/placeholder-event-preview.tsx b/src/features/placeholder/components/placeholder-event-preview.tsx
index d789bcc4e..9fd93e59b 100644
--- a/src/features/placeholder/components/placeholder-event-preview.tsx
+++ b/src/features/placeholder/components/placeholder-event-preview.tsx
@@ -1,4 +1,3 @@
-
 import { Stack, Text } from 'soapbox/components/ui';
 
 import { generateText, randomIntFromInterval } from '../utils';
diff --git a/src/features/placeholder/components/placeholder-group-card.tsx b/src/features/placeholder/components/placeholder-group-card.tsx
index eb19f8b28..6176ad39e 100644
--- a/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/src/features/placeholder/components/placeholder-group-card.tsx
@@ -1,4 +1,3 @@
-
 import { HStack, Stack, Text } from 'soapbox/components/ui';
 
 import { generateText, randomIntFromInterval } from '../utils';
diff --git a/src/features/placeholder/components/placeholder-group-discover.tsx b/src/features/placeholder/components/placeholder-group-discover.tsx
index 3311c3ac5..615bcc7a0 100644
--- a/src/features/placeholder/components/placeholder-group-discover.tsx
+++ b/src/features/placeholder/components/placeholder-group-discover.tsx
@@ -1,4 +1,3 @@
-
 import { HStack, Stack, Text } from 'soapbox/components/ui';
 
 import { generateText, randomIntFromInterval } from '../utils';
diff --git a/src/features/placeholder/components/placeholder-group-search.tsx b/src/features/placeholder/components/placeholder-group-search.tsx
index db2d9578c..fe976817b 100644
--- a/src/features/placeholder/components/placeholder-group-search.tsx
+++ b/src/features/placeholder/components/placeholder-group-search.tsx
@@ -1,4 +1,3 @@
-
 import { HStack, Stack, Text } from 'soapbox/components/ui';
 
 import { generateText, randomIntFromInterval } from '../utils';
diff --git a/src/features/placeholder/components/placeholder-hashtag.tsx b/src/features/placeholder/components/placeholder-hashtag.tsx
index 10b11247f..e28a074c5 100644
--- a/src/features/placeholder/components/placeholder-hashtag.tsx
+++ b/src/features/placeholder/components/placeholder-hashtag.tsx
@@ -1,4 +1,3 @@
-
 import { generateText, randomIntFromInterval } from '../utils';
 
 /** Fake hashtag to display while data is loading. */
diff --git a/src/features/placeholder/components/placeholder-material-status.tsx b/src/features/placeholder/components/placeholder-material-status.tsx
index ad8bc5703..35fab3522 100644
--- a/src/features/placeholder/components/placeholder-material-status.tsx
+++ b/src/features/placeholder/components/placeholder-material-status.tsx
@@ -1,4 +1,3 @@
-
 import PlaceholderStatus from './placeholder-status';
 
 /** Fake material status to display while data is loading. */
diff --git a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index 81b286c47..a03ad221c 100644
--- a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -1,4 +1,3 @@
-
 import { HStack, Stack } from 'soapbox/components/ui';
 
 import { randomIntFromInterval, generateText } from '../utils';
diff --git a/src/features/placeholder/components/placeholder-sidebar-trends.tsx b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
index c5eb13fde..bb9147e55 100644
--- a/src/features/placeholder/components/placeholder-sidebar-trends.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
@@ -1,4 +1,3 @@
-
 import { Stack } from 'soapbox/components/ui';
 
 import { randomIntFromInterval, generateText } from '../utils';
diff --git a/src/features/placeholder/components/placeholder-status-content.tsx b/src/features/placeholder/components/placeholder-status-content.tsx
index b3e4abbd7..1b2ffc999 100644
--- a/src/features/placeholder/components/placeholder-status-content.tsx
+++ b/src/features/placeholder/components/placeholder-status-content.tsx
@@ -1,4 +1,3 @@
-
 import { randomIntFromInterval, generateText } from '../utils';
 
 interface IPlaceholderStatusContent {
diff --git a/src/features/remote-timeline/components/pinned-hosts-picker.tsx b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
index f06d67553..df877a3da 100644
--- a/src/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -1,4 +1,3 @@
-
 import { Button, HStack } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
 
diff --git a/src/features/soapbox-config/components/icon-picker.tsx b/src/features/soapbox-config/components/icon-picker.tsx
index 8feac9472..f8ebdbb26 100644
--- a/src/features/soapbox-config/components/icon-picker.tsx
+++ b/src/features/soapbox-config/components/icon-picker.tsx
@@ -1,4 +1,3 @@
-
 import IconPickerDropdown from './icon-picker-dropdown';
 
 interface IIconPicker {
diff --git a/src/features/theme-editor/components/color.tsx b/src/features/theme-editor/components/color.tsx
index 575d17dd4..0254adf31 100644
--- a/src/features/theme-editor/components/color.tsx
+++ b/src/features/theme-editor/components/color.tsx
@@ -1,4 +1,3 @@
-
 import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker';
 
 import type { ColorChangeHandler } from 'react-color';
diff --git a/src/features/ui/components/column-loading.tsx b/src/features/ui/components/column-loading.tsx
index b462c95f5..b521c4b8a 100644
--- a/src/features/ui/components/column-loading.tsx
+++ b/src/features/ui/components/column-loading.tsx
@@ -1,4 +1,3 @@
-
 import { Card, CardBody, Spinner } from 'soapbox/components/ui';
 
 const ColumnLoading = () => (
diff --git a/src/features/ui/components/columns-area.tsx b/src/features/ui/components/columns-area.tsx
index 1f7c2e6b1..130ba5541 100644
--- a/src/features/ui/components/columns-area.tsx
+++ b/src/features/ui/components/columns-area.tsx
@@ -1,4 +1,3 @@
-
 import { Layout } from '../../../components/ui';
 
 interface IColumnsArea {
diff --git a/src/features/ui/components/compose-button.test.tsx b/src/features/ui/components/compose-button.test.tsx
index 2c9d88a64..6bc1404b9 100644
--- a/src/features/ui/components/compose-button.test.tsx
+++ b/src/features/ui/components/compose-button.test.tsx
@@ -1,4 +1,3 @@
-
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
diff --git a/src/features/ui/components/modal-loading.tsx b/src/features/ui/components/modal-loading.tsx
index b3c48d249..8308a2b4f 100644
--- a/src/features/ui/components/modal-loading.tsx
+++ b/src/features/ui/components/modal-loading.tsx
@@ -1,4 +1,3 @@
-
 import { Modal, Spinner } from 'soapbox/components/ui';
 
 const ModalLoading = () => (
diff --git a/src/features/ui/components/modals/component-modal.tsx b/src/features/ui/components/modals/component-modal.tsx
index 309941545..dbcb2423e 100644
--- a/src/features/ui/components/modals/component-modal.tsx
+++ b/src/features/ui/components/modals/component-modal.tsx
@@ -1,4 +1,3 @@
-
 import { Modal } from 'soapbox/components/ui';
 
 interface IComponentModal {
diff --git a/src/features/ui/components/modals/crypto-donate-modal.tsx b/src/features/ui/components/modals/crypto-donate-modal.tsx
index 78a276ee4..413db184c 100644
--- a/src/features/ui/components/modals/crypto-donate-modal.tsx
+++ b/src/features/ui/components/modals/crypto-donate-modal.tsx
@@ -1,4 +1,3 @@
-
 import { Modal } from 'soapbox/components/ui';
 import DetailedCryptoAddress from 'soapbox/features/crypto-donate/components/detailed-crypto-address';
 
diff --git a/src/features/ui/components/modals/zap-split/display-name-row.tsx b/src/features/ui/components/modals/zap-split/display-name-row.tsx
index 6f023f3a7..6bfaa4663 100644
--- a/src/features/ui/components/modals/zap-split/display-name-row.tsx
+++ b/src/features/ui/components/modals/zap-split/display-name-row.tsx
@@ -1,4 +1,3 @@
-
 import { HStack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
diff --git a/src/features/ui/components/panels/my-groups-panel.tsx b/src/features/ui/components/panels/my-groups-panel.tsx
index 578375796..8679a50f0 100644
--- a/src/features/ui/components/panels/my-groups-panel.tsx
+++ b/src/features/ui/components/panels/my-groups-panel.tsx
@@ -1,4 +1,3 @@
-
 import { useGroups } from 'soapbox/api/hooks';
 import { Widget } from 'soapbox/components/ui';
 import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
diff --git a/src/features/ui/components/panels/suggested-groups-panel.tsx b/src/features/ui/components/panels/suggested-groups-panel.tsx
index d8fa17f6a..558837d4b 100644
--- a/src/features/ui/components/panels/suggested-groups-panel.tsx
+++ b/src/features/ui/components/panels/suggested-groups-panel.tsx
@@ -1,4 +1,3 @@
-
 import { useSuggestedGroups } from 'soapbox/api/hooks';
 import { Widget } from 'soapbox/components/ui';
 import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
diff --git a/src/features/ui/components/promo-panel.tsx b/src/features/ui/components/promo-panel.tsx
index 2a3917628..54b5dc7f8 100644
--- a/src/features/ui/components/promo-panel.tsx
+++ b/src/features/ui/components/promo-panel.tsx
@@ -1,4 +1,3 @@
-
 import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
 import { Widget, Stack, Text } from 'soapbox/components/ui';
 import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks';
diff --git a/src/features/ui/components/theme-toggle.tsx b/src/features/ui/components/theme-toggle.tsx
index 3532b5cfd..e6b9b5d98 100644
--- a/src/features/ui/components/theme-toggle.tsx
+++ b/src/features/ui/components/theme-toggle.tsx
@@ -1,4 +1,3 @@
-
 import { changeSetting } from 'soapbox/actions/settings';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 
diff --git a/src/middleware/sounds.ts b/src/middleware/sounds.ts
index e9ec764ec..11367b056 100644
--- a/src/middleware/sounds.ts
+++ b/src/middleware/sounds.ts
@@ -1,4 +1,3 @@
-
 import { play, soundCache } from 'soapbox/utils/sounds';
 
 import type { AnyAction, Middleware } from 'redux';
diff --git a/src/pages/admin-page.tsx b/src/pages/admin-page.tsx
index 41ce5e061..141934698 100644
--- a/src/pages/admin-page.tsx
+++ b/src/pages/admin-page.tsx
@@ -1,4 +1,3 @@
-
 import { Layout } from 'soapbox/components/ui';
 import {
   LatestAccountsPanel,
diff --git a/src/pages/chats-page.tsx b/src/pages/chats-page.tsx
index b6e103378..aee120db3 100644
--- a/src/pages/chats-page.tsx
+++ b/src/pages/chats-page.tsx
@@ -1,4 +1,3 @@
-
 interface IChatsPage {
   children: React.ReactNode;
 }
diff --git a/src/pages/default-page.tsx b/src/pages/default-page.tsx
index 1cb045c28..ff3c3964a 100644
--- a/src/pages/default-page.tsx
+++ b/src/pages/default-page.tsx
@@ -1,4 +1,3 @@
-
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
   WhoToFollowPanel,
diff --git a/src/pages/empty-page.tsx b/src/pages/empty-page.tsx
index dc421c99c..47b865761 100644
--- a/src/pages/empty-page.tsx
+++ b/src/pages/empty-page.tsx
@@ -1,4 +1,3 @@
-
 import { Layout } from '../components/ui';
 
 interface IEmptyPage {
diff --git a/src/pages/events-page.tsx b/src/pages/events-page.tsx
index ea41ccf0d..1ae96aa4c 100644
--- a/src/pages/events-page.tsx
+++ b/src/pages/events-page.tsx
@@ -1,4 +1,3 @@
-
 import { Layout } from 'soapbox/components/ui';
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
diff --git a/src/pages/groups-pending-page.tsx b/src/pages/groups-pending-page.tsx
index ff9375e06..f62624508 100644
--- a/src/pages/groups-pending-page.tsx
+++ b/src/pages/groups-pending-page.tsx
@@ -1,4 +1,3 @@
-
 import { Layout } from 'soapbox/components/ui';
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import { NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components';
diff --git a/src/pages/landing-page.tsx b/src/pages/landing-page.tsx
index 4ccbe385e..8613c426e 100644
--- a/src/pages/landing-page.tsx
+++ b/src/pages/landing-page.tsx
@@ -1,4 +1,3 @@
-
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
   TrendsPanel,
diff --git a/src/pages/manage-groups-page.tsx b/src/pages/manage-groups-page.tsx
index d59d9b6fd..d21cc8282 100644
--- a/src/pages/manage-groups-page.tsx
+++ b/src/pages/manage-groups-page.tsx
@@ -1,4 +1,3 @@
-
 import { Layout } from 'soapbox/components/ui';
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import { MyGroupsPanel, NewGroupPanel } from 'soapbox/features/ui/util/async-components';
diff --git a/src/pages/remote-instance-page.tsx b/src/pages/remote-instance-page.tsx
index 98c331add..63b1e860e 100644
--- a/src/pages/remote-instance-page.tsx
+++ b/src/pages/remote-instance-page.tsx
@@ -1,4 +1,3 @@
-
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
   PromoPanel,
diff --git a/src/pages/search-page.tsx b/src/pages/search-page.tsx
index 4e16fd81b..fd014dfc8 100644
--- a/src/pages/search-page.tsx
+++ b/src/pages/search-page.tsx
@@ -1,4 +1,3 @@
-
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
   WhoToFollowPanel,
diff --git a/src/pages/status-page.tsx b/src/pages/status-page.tsx
index e1c3abc03..08e7e4c23 100644
--- a/src/pages/status-page.tsx
+++ b/src/pages/status-page.tsx
@@ -1,4 +1,3 @@
-
 import LinkFooter from 'soapbox/features/ui/components/link-footer';
 import {
   WhoToFollowPanel,
diff --git a/src/pages/wide-page.tsx b/src/pages/wide-page.tsx
index 1242482c0..d099048b1 100644
--- a/src/pages/wide-page.tsx
+++ b/src/pages/wide-page.tsx
@@ -1,4 +1,3 @@
-
 interface IWidePage {
   children: React.ReactNode;
 }
diff --git a/src/queries/chats.test.ts b/src/queries/chats.test.ts
index c2b536a18..31cb487af 100644
--- a/src/queries/chats.test.ts
+++ b/src/queries/chats.test.ts
@@ -1,4 +1,3 @@
-
 import { Map as ImmutableMap } from 'immutable';
 import sumBy from 'lodash/sumBy';
 import { useEffect } from 'react';
diff --git a/src/toast.test.tsx b/src/toast.test.tsx
index c3aca5a11..d90734162 100644
--- a/src/toast.test.tsx
+++ b/src/toast.test.tsx
@@ -1,4 +1,3 @@
-
 import { render } from '@testing-library/react';
 import { AxiosError, AxiosHeaders } from 'axios';
 import { Toaster } from 'react-hot-toast';
diff --git a/src/utils/scopes.ts b/src/utils/scopes.ts
index 27712c0c3..0298d0125 100644
--- a/src/utils/scopes.ts
+++ b/src/utils/scopes.ts
@@ -1,4 +1,3 @@
-
 import { PLEROMA, parseVersion } from './features';
 
 import type { RootState } from 'soapbox/store';

From dc3779fad7d89f885dd6c09cdca9c131afd90d81 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 17:17:20 -0600
Subject: [PATCH 077/133] Prefer file extensions on imports

---
 .eslintrc.json | 20 +-------------------
 src/main.tsx   | 14 +++++++-------
 2 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index f48320d4d..e1c275396 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -37,14 +37,6 @@
     "react": {
       "version": "detect"
     },
-    "import/extensions": [
-      ".js",
-      ".jsx",
-      ".cjs",
-      ".mjs",
-      ".ts",
-      ".tsx"
-    ],
     "import/ignore": [
       "node_modules",
       "\\.(css|scss|json)$"
@@ -268,17 +260,7 @@
     "jsx-a11y/role-supports-aria-props": "off",
     "jsx-a11y/scope": "warn",
     "jsx-a11y/tabindex-no-positive": "warn",
-    "import/extensions": [
-      "error",
-      "always",
-      {
-        "js": "never",
-        "mjs": "ignorePackages",
-        "jsx": "never",
-        "ts": "never",
-        "tsx": "never"
-      }
-    ],
+    "import/extensions": ["warn", "ignorePackages"],
     "import/newline-after-import": "error",
     "import/no-extraneous-dependencies": "error",
     "import/no-unresolved": "error",
diff --git a/src/main.tsx b/src/main.tsx
index 554273683..9155ae1e9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,9 @@
 import { enableMapSet } from 'immer';
 import { createRoot } from 'react-dom/client';
 
-import * as BuildConfig from 'soapbox/build-config';
-import Soapbox from 'soapbox/init/soapbox';
-import { printConsoleWarning } from 'soapbox/utils/console';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import Soapbox from 'soapbox/init/soapbox.tsx';
+import { printConsoleWarning } from 'soapbox/utils/console.ts';
 
 import '@fontsource/inter/200.css';
 import '@fontsource/inter/300.css';
@@ -14,16 +14,16 @@ import '@fontsource/inter/700.css';
 import '@fontsource/inter/900.css';
 import '@fontsource/roboto-mono/400.css';
 import 'line-awesome/dist/font-awesome-line-awesome/css/all.css';
-import 'soapbox/features/nostr/keyring';
+import 'soapbox/features/nostr/keyring.ts';
 
-import './iframe';
+import './iframe.ts';
 import './styles/i18n/arabic.css';
 import './styles/i18n/javanese.css';
 import './styles/application.scss';
 import './styles/tailwind.css';
 
-import ready from './ready';
-import { registerSW, lockSW } from './utils/sw';
+import ready from './ready.ts';
+import { registerSW, lockSW } from './utils/sw.ts';
 
 enableMapSet();
 

From 8892c585a3f0ac16842465d537d9b206ee8f63d8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 18:14:19 -0600
Subject: [PATCH 078/133] bunker: use "using" again

---
 src/actions/nostr.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/actions/nostr.ts b/src/actions/nostr.ts
index b05ccb461..97fbb2af8 100644
--- a/src/actions/nostr.ts
+++ b/src/actions/nostr.ts
@@ -21,7 +21,7 @@ function logInNostr(signer: NostrSigner, relay: NRelay1) {
 
     let authorizedPubkey: string | undefined;
 
-    const bunker = new NBunker({
+    using bunker = new NBunker({
       relay,
       userSigner: signer,
       bunkerSigner: authorization.signer,
@@ -64,9 +64,6 @@ function logInNostr(signer: NostrSigner, relay: NRelay1) {
     });
 
     await dispatch(verifyCredentials(accessToken));
-
-    // TODO: get rid of `vite-plugin-require` and switch to `using` for the bunker. :(
-    bunker.close();
   };
 }
 

From 3e61215afa4ad894f8de462c33f43d052b702eeb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 18:21:09 -0600
Subject: [PATCH 079/133] Upgrade formatjs and react-intl

---
 package.json        |   6 +-
 src/locales/en.json |   2 +-
 yarn.lock           | 496 +++++++++++++++++++++++++++-----------------
 3 files changed, 312 insertions(+), 192 deletions(-)

diff --git a/package.json b/package.json
index 2e51d7b2f..37479066b 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "emoji-datasource": "15.0.1",
     "emoji-mart": "^5.6.0",
     "escape-html": "^1.0.3",
-    "eslint-plugin-formatjs": "^4.12.2",
+    "eslint-plugin-formatjs": "^5.2.2",
     "exifr": "^7.1.3",
     "graphemesplit": "^2.4.4",
     "html-react-parser": "^5.0.0",
@@ -129,7 +129,7 @@
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.4.0",
     "react-inlinesvg": "^4.0.0",
-    "react-intl": "^6.0.0",
+    "react-intl": "^6.8.7",
     "react-motion": "^0.5.2",
     "react-overlays": "^0.9.0",
     "react-redux": "^9.0.4",
@@ -156,7 +156,7 @@
     "zustand": "^5.0.0"
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.2.0",
+    "@formatjs/cli": "^6.3.8",
     "@gitbeaker/node": "^35.8.0",
     "@jedmao/redux-mock-store": "^3.0.5",
     "@testing-library/jest-dom": "^6.1.3",
diff --git a/src/locales/en.json b/src/locales/en.json
index d75c5c114..653fd7dca 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1694,4 +1694,4 @@
   "zap_split.question": "Why am I paying this?",
   "zap_split.text": "Your support will help us build an unstoppable empire and rule the galaxy!",
   "zap_split.title": "Zap Split"
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 714f7cadd..5dfb7c149 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1327,18 +1327,10 @@
   resolved "https://registry.yarnpkg.com/@fontsource/vazirmatn/-/vazirmatn-5.0.20.tgz#9e8d56b712f6c397e7a6c63498a2fecca9fde9a3"
   integrity sha512-5h9bKrZjJ3U7C5tj2OtGdDBWGzS+acOOFhlonYlNekS4vNzcwMU7qkKADHTZYGQrMqhpUNKqGwHEHlxXqZpXmQ==
 
-"@formatjs/cli@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-6.2.0.tgz#17fbd40753eeb1f6e79c3caf25845c3a9c044d90"
-  integrity sha512-sP04UpocRHYwSovUnunAZHYvCTVbNcaLtWKnr1lETGRUnRRQqnXy/3d2Ce271ELXmNUSde2eHRdu4rv2XaVaiQ==
-
-"@formatjs/ecma402-abstract@1.17.2":
-  version "1.17.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz#d197c6e26b9fd96ff7ba3b3a0cc2f25f1f2dcac3"
-  integrity sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==
-  dependencies:
-    "@formatjs/intl-localematcher" "0.4.2"
-    tslib "^2.4.0"
+"@formatjs/cli@^6.3.8":
+  version "6.3.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-6.3.8.tgz#3b44eab797b04d796c9558072fc3f9c5e6917042"
+  integrity sha512-zXUkIdPE+L+nu5A6mgEsIuB5tX369C7FnqR1aRHj33zvj/G5fwuyJZiavZCdR/XAvDWflKza6/pMVC91fNlR/w==
 
 "@formatjs/ecma402-abstract@1.18.2":
   version "1.18.2"
@@ -1348,6 +1340,15 @@
     "@formatjs/intl-localematcher" "0.5.4"
     tslib "^2.4.0"
 
+"@formatjs/ecma402-abstract@2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.3.tgz#dc5a032e1971c709b32b9ab511fa35504a7d3bc9"
+  integrity sha512-aElGmleuReGnk2wtYOzYFmNWYoiWWmf1pPPCYg0oiIQSJj0mjc4eUfzUXaSOJ4S8WzI/cLqnCTWjqz904FT2OQ==
+  dependencies:
+    "@formatjs/fast-memoize" "2.2.3"
+    "@formatjs/intl-localematcher" "0.5.7"
+    tslib "2"
+
 "@formatjs/fast-memoize@2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz#33bd616d2e486c3e8ef4e68c99648c196887802b"
@@ -1355,14 +1356,12 @@
   dependencies:
     tslib "^2.4.0"
 
-"@formatjs/icu-messageformat-parser@2.6.2":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.6.2.tgz#9bbb29099416e4ce2c7df50029c48985d4f901b3"
-  integrity sha512-nF/Iww7sc5h+1MBCDRm68qpHTCG4xvGzYs/x9HFcDETSGScaJ1Fcadk5U/NXjXeCtzD+DhN4BAwKFVclHfKMdA==
+"@formatjs/fast-memoize@2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.3.tgz#74e64109279d5244f9fc281f3ae90c407cece823"
+  integrity sha512-3jeJ+HyOfu8osl3GNSL4vVHUuWFXR03Iz9jjgI7RwjG6ysu/Ymdr0JRCPHfF5yGbTE6JCrd63EpvX1/WybYRbA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/icu-skeleton-parser" "1.6.2"
-    tslib "^2.4.0"
+    tslib "2"
 
 "@formatjs/icu-messageformat-parser@2.7.6":
   version "2.7.6"
@@ -1373,13 +1372,14 @@
     "@formatjs/icu-skeleton-parser" "1.8.0"
     tslib "^2.4.0"
 
-"@formatjs/icu-skeleton-parser@1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.2.tgz#00303034dc08583973c8aa67b96534c49c0bad8d"
-  integrity sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==
+"@formatjs/icu-messageformat-parser@2.9.3":
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.9.3.tgz#7785cb48ba980ebcbe67a0a3fe12837032b95518"
+  integrity sha512-9L99QsH14XjOCIp4TmbT8wxuffJxGK8uLNO1zNhLtcZaVXvv626N0s4A2qgRCKG3dfYWx9psvGlFmvyVBa6u/w==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/icu-skeleton-parser" "1.8.7"
+    tslib "2"
 
 "@formatjs/icu-skeleton-parser@1.8.0":
   version "1.8.0"
@@ -1389,30 +1389,31 @@
     "@formatjs/ecma402-abstract" "1.18.2"
     tslib "^2.4.0"
 
-"@formatjs/intl-displaynames@6.5.2":
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.5.2.tgz#b14ffd0962d5b5cfd71457efc389f0bca83a00db"
-  integrity sha512-uC2VBlz+WydGTDDpJwMTQuPH3CUpTricr91WH1QMfz5oEHg2sB7mUERcZONE/lu8MOe1jREIx4vBciZEVTqkmA==
+"@formatjs/icu-skeleton-parser@1.8.7":
+  version "1.8.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.7.tgz#c0c21d75428bf7213ac23a0efbf4dbfa868b800d"
+  integrity sha512-fI+6SmS2g7h3srfAKSWa5dwreU5zNEfon2uFo99OToiLF6yxGE+WikvFSbsvMAYkscucvVmTYNlWlaDPp0n5HA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/intl-localematcher" "0.4.2"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    tslib "2"
 
-"@formatjs/intl-listformat@7.4.2":
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.4.2.tgz#c8d86d3b15eead41f74748d1c79d6450fd1bad82"
-  integrity sha512-+6bSVudEQkf12Hh7kuKt8Xv/MyFlqdwA4V4NLnTZW8uYdF9RxlOELDD0rPaOc2++TMKIzI5o6XXwHPvpL6VrPA==
+"@formatjs/intl-displaynames@6.8.4":
+  version "6.8.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.8.4.tgz#5fbfa6fa08fd306bf4ed6f056eba12a71404cbbd"
+  integrity sha512-HDVNBspDAOW0yTWluWTPHX2fk/9iBO4oST4R96f/IUaPGsFtjsHrpakwc+XDRPa3U5RniSEU2z34ZY0W78+E6Q==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/intl-localematcher" "0.4.2"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/intl-localematcher" "0.5.7"
+    tslib "2"
 
-"@formatjs/intl-localematcher@0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz#7e6e596dbaf2f0c5a7c22da5a01d5c55f4c37e9a"
-  integrity sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==
+"@formatjs/intl-listformat@7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.7.4.tgz#a102e418f4b7846317e8835a31eecd670c428d0a"
+  integrity sha512-lipFspH2MZcoeXxR6WSR/Jy9unzJ/iT0w+gbL8vgv25Ap0S9cUtcDVAce4ECEKI1bDtAvEU3b6+9Dha27gAikA==
   dependencies:
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/intl-localematcher" "0.5.7"
+    tslib "2"
 
 "@formatjs/intl-localematcher@0.5.4":
   version "0.5.4"
@@ -1421,30 +1422,37 @@
   dependencies:
     tslib "^2.4.0"
 
-"@formatjs/intl@2.9.3":
-  version "2.9.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.9.3.tgz#e570c4b1afb173dfb1f80a42624425dde9841329"
-  integrity sha512-hclPdyCF1zk2XmhgdXfl5Sd30QEdRBnIijH7Vc1AWz2K0/saVRrxuL3UYn+m3xEyfOa4yDbTWVbmXDL0XEzlsQ==
+"@formatjs/intl-localematcher@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.7.tgz#f889d076881b785d11ff993b966f527d199436d0"
+  integrity sha512-GGFtfHGQVFe/niOZp24Kal5b2i36eE2bNL0xi9Sg/yd0TR8aLjcteApZdHmismP5QQax1cMnZM9yWySUUjJteA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/fast-memoize" "2.2.0"
-    "@formatjs/icu-messageformat-parser" "2.6.2"
-    "@formatjs/intl-displaynames" "6.5.2"
-    "@formatjs/intl-listformat" "7.4.2"
-    intl-messageformat "10.5.3"
-    tslib "^2.4.0"
+    tslib "2"
 
-"@formatjs/ts-transformer@3.13.12":
-  version "3.13.12"
-  resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-3.13.12.tgz#5984b7b92492580bfd09deb09a5b57589b757c5f"
-  integrity sha512-uf1+DgbsCrzHAg7uIf0QlzpIkHYxRSRig5iJa9FaoUNIDZzNEE2oW/uLLLq7I9Z2FLIPhbmgq8hbW40FoQv+Fg==
+"@formatjs/intl@2.10.14":
+  version "2.10.14"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.10.14.tgz#3de1c6dfb39c286a4f48125740d45a5cb4dc3923"
+  integrity sha512-4CA1EO75i/mSMHdjwfpgRj3Rsdsm6WjALeu/nlzYhBmAPxGu/Ha5GIRHAet5SO05TnpmqxmEGOsskWqFm0IeoA==
   dependencies:
-    "@formatjs/icu-messageformat-parser" "2.7.6"
-    "@types/json-stable-stringify" "^1.0.32"
-    "@types/node" "14 || 16 || 17"
-    chalk "^4.0.0"
-    json-stable-stringify "^1.0.1"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/fast-memoize" "2.2.3"
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    "@formatjs/intl-displaynames" "6.8.4"
+    "@formatjs/intl-listformat" "7.7.4"
+    intl-messageformat "10.7.6"
+    tslib "2"
+
+"@formatjs/ts-transformer@3.13.22":
+  version "3.13.22"
+  resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-3.13.22.tgz#accab986f60039e5fa0e0a8088e5cb9c599c4e8b"
+  integrity sha512-+Zfz0wZ6wkdQE2zePiIQWIf4dVWeJGFXjkZxoCwzqxXdDrRhyAsQm91kbdFRIcVrjILA6KV0gOz8X7OBbLP4fQ==
+  dependencies:
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    "@types/json-stable-stringify" "1"
+    "@types/node" "14 || 16 || 17 || 18 || 20 || 22"
+    chalk "4"
+    json-stable-stringify "1"
+    tslib "2"
     typescript "5"
 
 "@gamestdio/websocket@^0.3.2":
@@ -2549,10 +2557,10 @@
   resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.1.tgz#b19b4646915f0ae2c306bf984dc0a59c5cfc97ba"
   integrity sha512-4mI1FuUUZiuT95fSVqvZxp/ssQK9zsa86S43h9x3zPOSU9BBJ+BfDkXwuaU7BfsD+e7U0/cUUfJFk3iW2M4okA==
 
-"@types/eslint@7 || 8":
-  version "8.56.6"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.6.tgz#d5dc16cac025d313ee101108ba5714ea10eb3ed0"
-  integrity sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A==
+"@types/eslint@9":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
+  integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -2577,10 +2585,10 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
   integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+"@types/hoist-non-react-statics@3":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
   dependencies:
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
@@ -2602,10 +2610,10 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85"
   integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==
 
-"@types/json-stable-stringify@^1.0.32":
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.34.tgz#c0fb25e4d957e0ee2e497c1f553d7f8bb668fd75"
-  integrity sha512-s2cfwagOQAS8o06TcwKfr9Wx11dNGbH2E9vJz1cqV+a/LOyhWNLUNd6JSRYNzvB4d29UuJX2M0Dj9vE1T8fRXw==
+"@types/json-stable-stringify@1":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.1.0.tgz#41393e6b7a9a67221607346af4a79783aeb28aea"
+  integrity sha512-ESTsHWB72QQq+pjUFIbEz9uSCZppD31YrVkbt2rnUciTYEvcwN6uZIhX5JZeBHqRlFJ41x/7MewCs7E2Qux6Cg==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -2631,11 +2639,18 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
   integrity sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==
 
-"@types/node@*", "@types/node@14 || 16 || 17":
+"@types/node@*":
   version "17.0.45"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
   integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
 
+"@types/node@14 || 16 || 17 || 18 || 20 || 22":
+  version "22.9.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.0.tgz#b7f16e5c3384788542c72dc3d561a7ceae2c0365"
+  integrity sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==
+  dependencies:
+    undici-types "~6.19.8"
+
 "@types/object-assign@^4.0.30":
   version "4.0.30"
   resolved "https://registry.yarnpkg.com/@types/object-assign/-/object-assign-4.0.30.tgz#8949371d5a99f4381ee0f1df0a9b7a187e07e652"
@@ -2651,10 +2666,10 @@
   resolved "https://registry.yarnpkg.com/@types/path-browserify/-/path-browserify-1.0.0.tgz#294ec6e88b6b0d340a3897b7120e5b393f16690e"
   integrity sha512-XMCcyhSvxcch8b7rZAtFAaierBYdeHXVvg2iYnxOV0MCQHmPuRRmGZPFDRzPayxcGiiSL1Te9UIO+f3cuj0tfw==
 
-"@types/picomatch@^2.3.0":
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/@types/picomatch/-/picomatch-2.3.3.tgz#be60498568c19e989e43fb39aa84be1ed3655e92"
-  integrity sha512-Yll76ZHikRFCyz/pffKGjrCwe/le2CDwOP5F210KQo27kpRE46U2rDnzikNlVn6/ezH3Mhn46bJMTfeVTtcYMg==
+"@types/picomatch@3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/picomatch/-/picomatch-3.0.1.tgz#d2bb932bb24c2f2f97f77c31c3c37ddd60c9a4a5"
+  integrity sha512-1MRgzpzY0hOp9pW/kLRxeQhUWwil6gnrUYd3oEpeYBqp/FexhaCPv3F8LsYr47gtUU45fO2cm1dbwkSrHEo8Uw==
 
 "@types/prop-types@*":
   version "15.7.4"
@@ -2798,14 +2813,6 @@
     "@typescript-eslint/visitor-keys" "7.0.1"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
-  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
-  dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/visitor-keys" "6.21.0"
-
 "@typescript-eslint/scope-manager@7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.0.1.tgz#611ec8e78c70439b152a805e1b10aaac36de7c00"
@@ -2814,6 +2821,14 @@
     "@typescript-eslint/types" "7.0.1"
     "@typescript-eslint/visitor-keys" "7.0.1"
 
+"@typescript-eslint/scope-manager@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.13.0.tgz#2f4aed0b87d72360e64e4ea194b1fde14a59082e"
+  integrity sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==
+  dependencies:
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/visitor-keys" "8.13.0"
+
 "@typescript-eslint/type-utils@7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.0.1.tgz#0fba92c1f81cad561d7b3adc812aa1cc0e35cdae"
@@ -2824,29 +2839,15 @@
     debug "^4.3.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/types@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
-  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
-
 "@typescript-eslint/types@7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.0.1.tgz#dcfabce192db5b8bf77ea3c82cfaabe6e6a3c901"
   integrity sha512-uJDfmirz4FHib6ENju/7cz9SdMSkeVvJDK3VcMFvf/hAShg8C74FW+06MaQPODHfDJp/z/zHfgawIJRjlu0RLg==
 
-"@typescript-eslint/typescript-estree@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
-  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
-  dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/visitor-keys" "6.21.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    minimatch "9.0.3"
-    semver "^7.5.4"
-    ts-api-utils "^1.0.1"
+"@typescript-eslint/types@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.13.0.tgz#3f35dead2b2491a04339370dcbcd17bbdfc204d8"
+  integrity sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==
 
 "@typescript-eslint/typescript-estree@7.0.1":
   version "7.0.1"
@@ -2862,6 +2863,20 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/typescript-estree@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.13.0.tgz#db8c93dd5437ca3ce417a255fb35ddc3c12c3e95"
+  integrity sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==
+  dependencies:
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/visitor-keys" "8.13.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/utils@7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.0.1.tgz#b8ceac0ba5fef362b4a03a33c0e1fedeea3734ed"
@@ -2875,26 +2890,15 @@
     "@typescript-eslint/typescript-estree" "7.0.1"
     semver "^7.5.4"
 
-"@typescript-eslint/utils@^6.18.1":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
-  integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
+"@typescript-eslint/utils@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.13.0.tgz#f6d40e8b5053dcaeabbd2e26463857abf27d62c0"
+  integrity sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
-    "@types/json-schema" "^7.0.12"
-    "@types/semver" "^7.5.0"
-    "@typescript-eslint/scope-manager" "6.21.0"
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/typescript-estree" "6.21.0"
-    semver "^7.5.4"
-
-"@typescript-eslint/visitor-keys@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
-  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
-  dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    eslint-visitor-keys "^3.4.1"
+    "@typescript-eslint/scope-manager" "8.13.0"
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/typescript-estree" "8.13.0"
 
 "@typescript-eslint/visitor-keys@7.0.1":
   version "7.0.1"
@@ -2904,6 +2908,14 @@
     "@typescript-eslint/types" "7.0.1"
     eslint-visitor-keys "^3.4.1"
 
+"@typescript-eslint/visitor-keys@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.13.0.tgz#e97b0d92b266ef38a1faf40a74da289b66683a5b"
+  integrity sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==
+  dependencies:
+    "@typescript-eslint/types" "8.13.0"
+    eslint-visitor-keys "^3.4.3"
+
 "@vitejs/plugin-react-swc@^3.7.1":
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.1.tgz#bc5af48ef35c525d623fa14177c912cbaa86a846"
@@ -3418,6 +3430,17 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -3462,6 +3485,14 @@ chai@^5.1.1:
     loupe "^3.1.0"
     pathval "^2.0.0"
 
+chalk@4, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -3479,14 +3510,6 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -3926,6 +3949,15 @@ define-data-property@^1.0.1:
     gopd "^1.0.1"
     has-property-descriptors "^1.0.0"
 
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -4127,7 +4159,12 @@ emoji-mart@^5.6.0:
   resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.6.0.tgz#71b3ed0091d3e8c68487b240d9d6d9a73c27f023"
   integrity sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==
 
-emoji-regex@10.3.0, emoji-regex@^10.2.1:
+emoji-regex@10:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
+  integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
+
+emoji-regex@10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
   integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
@@ -4236,6 +4273,18 @@ es-abstract@^1.22.1:
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.11"
 
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
 es-iterator-helpers@^1.0.12:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
@@ -4401,21 +4450,20 @@ eslint-plugin-compat@^4.2.0:
     lodash.memoize "^4.1.2"
     semver "^7.5.4"
 
-eslint-plugin-formatjs@^4.12.2:
-  version "4.12.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-formatjs/-/eslint-plugin-formatjs-4.12.2.tgz#ad275d78f82bad95583c141f65ecd7e222c329ed"
-  integrity sha512-b4iEsi0Y3zy7J6xjxlhrIaDFJa27OiLwardvCRBRHALoZs8rNJ0oQIW6ymUgELLEMeFuEMAd2837M+n5SHJutg==
+eslint-plugin-formatjs@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-formatjs/-/eslint-plugin-formatjs-5.2.2.tgz#51c1b88779aac98b894dd236c04a0ee5633b9300"
+  integrity sha512-EtLhaz2/6l86s/3cOo5SyNGYnsocStylO3KLIoMJI8Ch2LqejZsd06RR7wMpeHusIN9ogvTlJZV2M54mBlElKg==
   dependencies:
-    "@formatjs/icu-messageformat-parser" "2.7.6"
-    "@formatjs/ts-transformer" "3.13.12"
-    "@types/eslint" "7 || 8"
-    "@types/picomatch" "^2.3.0"
-    "@typescript-eslint/utils" "^6.18.1"
-    emoji-regex "^10.2.1"
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    "@formatjs/ts-transformer" "3.13.22"
+    "@types/eslint" "9"
+    "@types/picomatch" "3"
+    "@typescript-eslint/utils" "8.13.0"
+    emoji-regex "10"
     magic-string "^0.30.0"
-    picomatch "^2.3.1"
-    tslib "2.6.2"
-    typescript "5"
+    picomatch "2 || 3 || 4"
+    tslib "2"
     unicode-emoji-utils "^1.2.0"
 
 eslint-plugin-import@^2.28.1:
@@ -4824,6 +4872,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
 function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
@@ -4864,6 +4917,17 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -5048,6 +5112,13 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
 has-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
@@ -5072,6 +5143,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -5096,7 +5174,7 @@ history@^5.3.0:
   dependencies:
     "@babel/runtime" "^7.7.6"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@3, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5297,15 +5375,15 @@ intl-messageformat@10.5.11:
     "@formatjs/icu-messageformat-parser" "2.7.6"
     tslib "^2.4.0"
 
-intl-messageformat@10.5.3:
-  version "10.5.3"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.5.3.tgz#db0779d4a1988faa2977d76574489b7a25f0d5d0"
-  integrity sha512-TzKn1uhJBMyuKTO4zUX47SU+d66fu1W9tVzIiZrQ6hBqQQeYscBMIzKL/qEXnFbJrH9uU5VV3+T5fWib4SIcKA==
+intl-messageformat@10.7.6:
+  version "10.7.6"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.7.6.tgz#d486c780508a2fb8c383e95462951276cf0bcdf4"
+  integrity sha512-IsMU/hqyy3FJwNJ0hxDfY2heJ7MteSuFvcnCebxRp67di4Fhx1gKKE+qS0bBwUF8yXkX9SsPUhLeX/B6h5SKUA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/fast-memoize" "2.2.0"
-    "@formatjs/icu-messageformat-parser" "2.6.2"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/fast-memoize" "2.2.3"
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    tslib "2"
 
 intl-pluralrules@^2.0.0:
   version "2.0.1"
@@ -5691,12 +5769,15 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stable-stringify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
-  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
+json-stable-stringify@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.1.1.tgz#52d4361b47d49168bcc4e564189a42e5a7439454"
+  integrity sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==
   dependencies:
-    jsonify "~0.0.0"
+    call-bind "^1.0.5"
+    isarray "^2.0.5"
+    jsonify "^0.0.1"
+    object-keys "^1.1.1"
 
 json5@^1.0.2:
   version "1.0.2"
@@ -5719,10 +5800,10 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsonify@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
-  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
+jsonify@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
+  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
 
 jsonpointer@^5.0.0:
   version "5.0.0"
@@ -6179,6 +6260,13 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -6540,16 +6628,16 @@ picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
   integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
 
+"picomatch@2 || 3 || 4", picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-picomatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
-  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
-
 pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -7042,21 +7130,21 @@ react-inlinesvg@^4.0.0:
   dependencies:
     react-from-dom "^0.6.2"
 
-react-intl@^6.0.0:
-  version "6.4.7"
-  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.4.7.tgz#28ec40350ff791a6a773f5e76b9e12835ae17e19"
-  integrity sha512-0hnOHAZhxTFqD1hGTxrF40qNyZJPPYiGhWIIxIz0Udz+3e3c7sdN80qlxArR+AbJ+jb5ALXZkJYH20+GPFCM0Q==
+react-intl@^6.8.7:
+  version "6.8.7"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.8.7.tgz#e6f08f365810a366031358ff1c7dd8cf7e649bdd"
+  integrity sha512-Ocv8Tg6fXqBdVdkkYohQ79T9rJls3G1lmDSjhqHdK9873BdQFLSeITGgwuGWTRBd6Mg5FL33TBen4FtujCTP0g==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/icu-messageformat-parser" "2.6.2"
-    "@formatjs/intl" "2.9.3"
-    "@formatjs/intl-displaynames" "6.5.2"
-    "@formatjs/intl-listformat" "7.4.2"
-    "@types/hoist-non-react-statics" "^3.3.1"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    "@formatjs/intl" "2.10.14"
+    "@formatjs/intl-displaynames" "6.8.4"
+    "@formatjs/intl-listformat" "7.7.4"
+    "@types/hoist-non-react-statics" "3"
     "@types/react" "16 || 17 || 18"
-    hoist-non-react-statics "^3.3.2"
-    intl-messageformat "10.5.3"
-    tslib "^2.4.0"
+    hoist-non-react-statics "3"
+    intl-messageformat "10.7.6"
+    tslib "2"
 
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
@@ -7582,6 +7670,11 @@ semver@^7.3.4, semver@^7.3.8, semver@^7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.6.0:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 serialize-javascript@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
@@ -7589,6 +7682,18 @@ serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
 set-function-name@^2.0.0, set-function-name@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
@@ -8211,6 +8316,11 @@ ts-api-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.3.tgz#f12c1c781d04427313dbac808f453f050e54a331"
   integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
 
+ts-api-utils@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.0.tgz#709c6f2076e511a81557f3d07a0cbd566ae8195c"
+  integrity sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==
+
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
@@ -8226,16 +8336,21 @@ tsconfig-paths@^3.14.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@2.6.2, tslib@^2.0.3, tslib@^2.4.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+tslib@2:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.0.3, tslib@^2.4.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -8317,6 +8432,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~6.19.8:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"

From 954e074325f14911ea6407467ef3e09f44e58b72 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Nov 2024 21:18:55 -0600
Subject: [PATCH 080/133] Add file extensions to all imports

---
 .eslintrc.json                                |   2 +-
 scripts/do-release.ts                         |   2 +-
 src/actions/about.test.ts                     |   6 +-
 src/actions/about.ts                          |   4 +-
 src/actions/account-notes.test.ts             |   6 +-
 src/actions/account-notes.ts                  |   4 +-
 src/actions/accounts.test.ts                  |  12 +-
 src/actions/accounts.ts                       |  20 +-
 src/actions/admin.ts                          |  14 +-
 src/actions/aliases.ts                        |  16 +-
 src/actions/apps.ts                           |   2 +-
 src/actions/auth.ts                           |  36 +-
 src/actions/backups.ts                        |   4 +-
 src/actions/blocks.test.ts                    |   8 +-
 src/actions/blocks.ts                         |  10 +-
 src/actions/bookmarks.ts                      |   8 +-
 src/actions/chats.ts                          |  10 +-
 src/actions/compose-status.ts                 |   6 +-
 src/actions/compose.test.ts                   |  10 +-
 src/actions/compose.ts                        |  44 +--
 src/actions/consumer-auth.ts                  |  12 +-
 src/actions/conversations.ts                  |  10 +-
 src/actions/custom-emojis.ts                  |   6 +-
 src/actions/directory.ts                      |  10 +-
 src/actions/domain-blocks.ts                  |  12 +-
 src/actions/email-list.ts                     |   4 +-
 src/actions/emoji-reacts.ts                   |  12 +-
 src/actions/emojis.ts                         |   6 +-
 src/actions/events.ts                         |  18 +-
 src/actions/export-data.ts                    |   8 +-
 src/actions/external-auth.ts                  |  18 +-
 src/actions/familiar-followers.ts             |  10 +-
 src/actions/favourites.ts                     |  10 +-
 src/actions/filters.ts                        |  10 +-
 src/actions/groups.ts                         |  14 +-
 src/actions/history.ts                        |   8 +-
 src/actions/import-data.ts                    |   6 +-
 src/actions/importer/index.ts                 |  14 +-
 src/actions/instance.ts                       |  10 +-
 src/actions/interactions.ts                   |  20 +-
 src/actions/lists.ts                          |  14 +-
 src/actions/markers.ts                        |   6 +-
 src/actions/me.ts                             |  20 +-
 src/actions/media.ts                          |  16 +-
 src/actions/mfa.ts                            |   4 +-
 src/actions/modals.ts                         |   4 +-
 src/actions/moderation.tsx                    |  18 +-
 src/actions/mrf.ts                            |   8 +-
 src/actions/mutes.ts                          |   8 +-
 src/actions/nostr.ts                          |  12 +-
 src/actions/notifications.test.ts             |   8 +-
 src/actions/notifications.ts                  |  30 +-
 src/actions/oauth.ts                          |   6 +-
 src/actions/onboarding.test.ts                |   4 +-
 src/actions/patron.ts                         |   6 +-
 src/actions/pin-statuses.ts                   |  10 +-
 src/actions/polls.ts                          |   8 +-
 src/actions/preload.test.ts                   |  10 +-
 src/actions/preload.ts                        |   6 +-
 src/actions/push-notifications/registerer.ts  |   8 +-
 src/actions/remote-timeline.ts                |   4 +-
 src/actions/reports.ts                        |  10 +-
 src/actions/scheduled-statuses.ts             |   8 +-
 src/actions/search.ts                         |  12 +-
 src/actions/security.ts                       |  14 +-
 src/actions/settings.ts                       |  10 +-
 src/actions/soapbox.ts                        |  16 +-
 src/actions/status-quotes.test.ts             |   8 +-
 src/actions/status-quotes.ts                  |   6 +-
 src/actions/statuses.test.ts                  |  10 +-
 src/actions/statuses.ts                       |  22 +-
 src/actions/streaming.ts                      |  44 +--
 src/actions/suggestions.ts                    |  16 +-
 src/actions/tags.ts                           |   6 +-
 src/actions/timelines.ts                      |  16 +-
 src/actions/trending-statuses.ts              |  10 +-
 src/actions/trends.ts                         |   6 +-
 src/api/MastodonClient.ts                     |   2 +-
 src/api/hooks/accounts/useAccount.ts          |  10 +-
 src/api/hooks/accounts/useAccountList.ts      |  12 +-
 src/api/hooks/accounts/useAccountLookup.ts    |  10 +-
 src/api/hooks/accounts/useFollow.ts           |  10 +-
 src/api/hooks/accounts/usePatronUser.ts       |  10 +-
 src/api/hooks/accounts/useRelationship.ts     |   8 +-
 src/api/hooks/accounts/useRelationships.ts    |   8 +-
 src/api/hooks/admin/index.ts                  |  12 +-
 src/api/hooks/admin/useAdminAccounts.ts       |   8 +-
 src/api/hooks/admin/useAnnouncements.ts       |   8 +-
 src/api/hooks/admin/useCreateDomain.ts        |   8 +-
 src/api/hooks/admin/useDeleteDomain.ts        |   6 +-
 src/api/hooks/admin/useDomains.ts             |   6 +-
 src/api/hooks/admin/useManageZapSplit.ts      |   8 +-
 src/api/hooks/admin/useModerationLog.ts       |   4 +-
 src/api/hooks/admin/useRelays.ts              |   6 +-
 src/api/hooks/admin/useRules.ts               |   6 +-
 src/api/hooks/admin/useSuggest.ts             |  10 +-
 src/api/hooks/admin/useUpdateDomain.ts        |  10 +-
 src/api/hooks/admin/useVerify.ts              |  10 +-
 src/api/hooks/announcements/index.ts          |   2 +-
 .../hooks/announcements/useAnnouncements.ts   |   6 +-
 src/api/hooks/captcha/useCaptcha.ts           |   8 +-
 src/api/hooks/groups/useBlockGroupMember.ts   |   6 +-
 .../groups/useCancelMembershipRequest.ts      |   8 +-
 src/api/hooks/groups/useCreateGroup.ts        |   8 +-
 src/api/hooks/groups/useDeleteGroup.ts        |   6 +-
 src/api/hooks/groups/useDeleteGroupStatus.ts  |   8 +-
 src/api/hooks/groups/useDemoteGroupMember.ts  |   8 +-
 src/api/hooks/groups/useGroup.test.ts         |   8 +-
 src/api/hooks/groups/useGroup.ts              |  10 +-
 src/api/hooks/groups/useGroupLookup.test.ts   |   8 +-
 src/api/hooks/groups/useGroupLookup.ts        |  12 +-
 src/api/hooks/groups/useGroupMedia.test.ts    |   8 +-
 src/api/hooks/groups/useGroupMedia.ts         |  10 +-
 src/api/hooks/groups/useGroupMembers.test.ts  |  10 +-
 src/api/hooks/groups/useGroupMembers.ts       |  10 +-
 .../groups/useGroupMembershipRequests.ts      |  14 +-
 src/api/hooks/groups/useGroupMutes.ts         |  12 +-
 src/api/hooks/groups/useGroupRelationship.ts  |   8 +-
 src/api/hooks/groups/useGroupRelationships.ts |   8 +-
 src/api/hooks/groups/useGroupSearch.ts        |  12 +-
 src/api/hooks/groups/useGroupTag.ts           |   8 +-
 src/api/hooks/groups/useGroupTags.ts          |  10 +-
 src/api/hooks/groups/useGroupValidation.ts    |   6 +-
 src/api/hooks/groups/useGroups.test.ts        |  10 +-
 src/api/hooks/groups/useGroups.ts             |  12 +-
 src/api/hooks/groups/useGroupsFromTag.ts      |  12 +-
 src/api/hooks/groups/useJoinGroup.ts          |  10 +-
 src/api/hooks/groups/useLeaveGroup.ts         |  10 +-
 src/api/hooks/groups/useMuteGroup.ts          |   6 +-
 src/api/hooks/groups/usePendingGroups.test.ts |  12 +-
 src/api/hooks/groups/usePendingGroups.ts      |   8 +-
 src/api/hooks/groups/usePopularGroups.ts      |  12 +-
 src/api/hooks/groups/usePopularTags.ts        |   8 +-
 src/api/hooks/groups/usePromoteGroupMember.ts |   8 +-
 src/api/hooks/groups/useSuggestedGroups.ts    |  10 +-
 src/api/hooks/groups/useUnmuteGroup.ts        |   6 +-
 src/api/hooks/groups/useUpdateGroup.ts        |   8 +-
 src/api/hooks/groups/useUpdateGroupTag.ts     |   6 +-
 src/api/hooks/index.ts                        |  98 ++---
 src/api/hooks/instance/useInstanceV1.ts       |   4 +-
 src/api/hooks/instance/useInstanceV2.ts       |   4 +-
 src/api/hooks/statuses/useBookmarkFolder.ts   |  10 +-
 src/api/hooks/statuses/useBookmarkFolders.ts  |  10 +-
 .../hooks/statuses/useCreateBookmarkFolder.ts |   8 +-
 .../hooks/statuses/useDeleteBookmarkFolder.ts |   4 +-
 .../hooks/statuses/useUpdateBookmarkFolder.ts |   8 +-
 src/api/hooks/streaming/useCommunityStream.ts |   2 +-
 src/api/hooks/streaming/useDirectStream.ts    |   4 +-
 src/api/hooks/streaming/useGroupStream.ts     |   2 +-
 src/api/hooks/streaming/useHashtagStream.ts   |   2 +-
 src/api/hooks/streaming/useListStream.ts      |   4 +-
 src/api/hooks/streaming/usePublicStream.ts    |   2 +-
 src/api/hooks/streaming/useRemoteStream.ts    |   2 +-
 src/api/hooks/streaming/useTimelineStream.ts  |   6 +-
 src/api/hooks/streaming/useUserStream.ts      |  12 +-
 src/api/hooks/zap-split/useZapSplit.ts        |   6 +-
 src/api/index.ts                              |   8 +-
 src/build-config.ts                           |   2 +-
 src/components/account-search.tsx             |   4 +-
 src/components/account.test.tsx               |   6 +-
 src/components/account.tsx                    |  22 +-
 src/components/animated-number.tsx            |   2 +-
 .../announcements/announcement-content.tsx    |   4 +-
 src/components/announcements/announcement.tsx |  12 +-
 .../announcements/announcements-panel.tsx     |  10 +-
 src/components/announcements/emoji.tsx        |   6 +-
 src/components/announcements/reaction.tsx     |  10 +-
 .../announcements/reactions-bar.tsx           |  12 +-
 src/components/attachment-thumbs.tsx          |   8 +-
 src/components/authorize-reject-buttons.tsx   |   2 +-
 src/components/autosuggest-account-input.tsx  |  10 +-
 src/components/autosuggest-emoji.test.tsx     |   4 +-
 src/components/autosuggest-emoji.tsx          |   8 +-
 src/components/autosuggest-input.tsx          |  16 +-
 src/components/autosuggest-location.tsx       |   4 +-
 src/components/avatar-stack.tsx               |   8 +-
 src/components/badge.test.tsx                 |   4 +-
 src/components/badge.tsx                      |   2 +-
 src/components/big-card.tsx                   |   4 +-
 src/components/birthday-input.tsx             |   4 +-
 src/components/birthday-panel.tsx             |   8 +-
 src/components/copyable-input.tsx             |   2 +-
 src/components/display-name-inline.tsx        |  10 +-
 src/components/display-name.test.tsx          |   6 +-
 src/components/display-name.tsx               |  12 +-
 src/components/domain.tsx                     |   6 +-
 .../dropdown-menu/dropdown-menu-item.tsx      |   2 +-
 .../dropdown-menu/dropdown-menu.tsx           |  14 +-
 src/components/dropdown-menu/index.ts         |   6 +-
 src/components/emoji-graphic.tsx              |   2 +-
 src/components/event-preview.tsx              |  14 +-
 src/components/extended-video-player.tsx      |   2 +-
 src/components/gdpr-banner.tsx                |   4 +-
 src/components/group-card.tsx                 |  14 +-
 src/components/groups/group-avatar.tsx        |   7 +-
 .../groups/popover/group-popover.tsx          |  10 +-
 src/components/hashtag-link.tsx               |   2 +-
 src/components/hashtag.tsx                    |   6 +-
 src/components/helmet.tsx                     |   8 +-
 src/components/hover-ref-wrapper.tsx          |   8 +-
 src/components/hover-status-wrapper.tsx       |   4 +-
 src/components/icon-button.tsx                |   2 +-
 src/components/icon-with-counter.tsx          |   4 +-
 src/components/list.tsx                       |   4 +-
 src/components/load-gap.tsx                   |   2 +-
 src/components/load-more.tsx                  |   2 +-
 src/components/loading-screen.tsx             |   4 +-
 src/components/location-search.tsx            |  10 +-
 src/components/markup.tsx                     |   2 +-
 src/components/media-gallery.tsx              |  18 +-
 src/components/mention.tsx                    |   6 +-
 src/components/missing-indicator.tsx          |   2 +-
 src/components/modal-root.tsx                 |  14 +-
 src/components/navlinks.tsx                   |   4 +-
 src/components/pending-items-row.tsx          |   2 +-
 src/components/polls/poll-footer.test.tsx     |   8 +-
 src/components/polls/poll-footer.tsx          |  11 +-
 src/components/polls/poll-option.tsx          |   2 +-
 src/components/polls/poll.tsx                 |  13 +-
 src/components/preview-card.tsx               |  12 +-
 src/components/profile-hover-card.tsx         |  25 +-
 src/components/pull-to-refresh.tsx            |   2 +-
 src/components/pullable.tsx                   |   2 +-
 src/components/quoted-status-indicator.tsx    |   6 +-
 src/components/quoted-status.test.tsx         |   8 +-
 src/components/quoted-status.tsx              |  24 +-
 src/components/radio.tsx                      |   2 +-
 src/components/relative-timestamp.tsx         |   2 +-
 src/components/scroll-top-button.test.tsx     |   4 +-
 src/components/scroll-top-button.tsx          |   4 +-
 src/components/scrollable-list.tsx            |   6 +-
 src/components/sentry-feedback-form.tsx       |   6 +-
 src/components/sidebar-menu.tsx               |  22 +-
 src/components/sidebar-navigation-link.tsx    |   2 +-
 src/components/sidebar-navigation.tsx         |  14 +-
 src/components/site-error-boundary.tsx        |  18 +-
 src/components/site-logo.tsx                  |   2 +-
 src/components/status-action-bar.tsx          |  50 +--
 src/components/status-action-button.tsx       |   6 +-
 src/components/status-content.tsx             |  18 +-
 src/components/status-hover-card.tsx          |  12 +-
 src/components/status-list.tsx                |  16 +-
 src/components/status-media.tsx               |  17 +-
 src/components/status-reaction-wrapper.tsx    |  12 +-
 src/components/status-reply-mentions.tsx      |  12 +-
 src/components/status.test.tsx                |  10 +-
 src/components/status.tsx                     |  40 +-
 .../sensitive-content-overlay.test.tsx        |   8 +-
 .../statuses/sensitive-content-overlay.tsx    |  14 +-
 src/components/statuses/status-info.tsx       |   2 +-
 src/components/still-image.tsx                |   2 +-
 src/components/thumb-navigation-link.tsx      |   4 +-
 src/components/thumb-navigation.tsx           |   6 +-
 src/components/tombstone.tsx                  |   4 +-
 src/components/translate-button.tsx           |   8 +-
 src/components/ui/accordion/accordion.tsx     |  10 +-
 src/components/ui/avatar/avatar.test.tsx      |   4 +-
 src/components/ui/avatar/avatar.tsx           |   4 +-
 src/components/ui/button/button.test.tsx      |   4 +-
 src/components/ui/button/button.tsx           |   6 +-
 src/components/ui/card/card.test.tsx          |   4 +-
 src/components/ui/card/card.tsx               |   6 +-
 src/components/ui/carousel/carousel.tsx       |   6 +-
 src/components/ui/column/column.test.tsx      |   4 +-
 src/components/ui/column/column.tsx           |   6 +-
 src/components/ui/counter/counter.tsx         |   2 +-
 .../ui/datepicker/datepicker.test.tsx         |   4 +-
 src/components/ui/datepicker/datepicker.tsx   |   6 +-
 src/components/ui/datetime/datetime.tsx       |   2 +-
 src/components/ui/divider/divider.test.tsx    |   4 +-
 src/components/ui/divider/divider.tsx         |   4 +-
 .../ui/emoji-selector/emoji-selector.tsx      |  12 +-
 src/components/ui/emoji/emoji.test.tsx        |   4 +-
 src/components/ui/emoji/emoji.tsx             |   4 +-
 .../ui/form-actions/form-actions.test.tsx     |   4 +-
 .../ui/form-actions/form-actions.tsx          |   2 +-
 .../ui/form-group/form-group.test.tsx         |   4 +-
 src/components/ui/form-group/form-group.tsx   |   6 +-
 src/components/ui/form/form.test.tsx          |   4 +-
 src/components/ui/icon-button/icon-button.tsx |   4 +-
 src/components/ui/icon/icon.tsx               |   4 +-
 src/components/ui/icon/svg-icon.test.tsx      |   4 +-
 src/components/ui/index.ts                    |  84 ++--
 src/components/ui/input/input.tsx             |  10 +-
 .../language-dropdown/language-dropdown.tsx   |  10 +-
 src/components/ui/modal/modal.test.tsx        |   4 +-
 src/components/ui/modal/modal.tsx             |   8 +-
 src/components/ui/popover/popover.tsx         |   2 +-
 .../ui/progress-bar/progress-bar.tsx          |   2 +-
 .../ui/radio-button/radio-button.tsx          |   2 +-
 src/components/ui/spinner/spinner.tsx         |   4 +-
 src/components/ui/streamfield/streamfield.tsx |  10 +-
 src/components/ui/tabs/tabs.tsx               |   2 +-
 src/components/ui/tag-input/tag-input.tsx     |   4 +-
 src/components/ui/tag-input/tag.tsx           |   4 +-
 src/components/ui/textarea/textarea.tsx       |   8 +-
 src/components/ui/toast/toast.tsx             |  10 +-
 src/components/ui/widget/widget.tsx           |   8 +-
 src/components/upload-progress.tsx            |   2 +-
 src/components/upload.tsx                     |  12 +-
 src/components/validation-checkmark.test.tsx  |   4 +-
 src/components/validation-checkmark.tsx       |   2 +-
 src/components/verification-badge.tsx         |   4 +-
 src/containers/account-container.tsx          |   4 +-
 src/containers/status-container.tsx           |   6 +-
 src/contexts/chat-context.tsx                 |   6 +-
 src/contexts/nostr-context.tsx                |   2 +-
 src/custom.ts                                 |   2 +-
 src/entity-store/actions.ts                   |   2 +-
 src/entity-store/entities.ts                  |   2 +-
 src/entity-store/hooks/index.ts               |  20 +-
 src/entity-store/hooks/types.ts               |   2 +-
 src/entity-store/hooks/useBatchedEntities.ts  |  20 +-
 src/entity-store/hooks/useChangeEntity.ts     |  10 +-
 src/entity-store/hooks/useCreateEntity.ts     |  14 +-
 src/entity-store/hooks/useDeleteEntity.ts     |  10 +-
 src/entity-store/hooks/useDismissEntity.ts    |  10 +-
 src/entity-store/hooks/useEntities.ts         |  22 +-
 src/entity-store/hooks/useEntity.ts           |  16 +-
 src/entity-store/hooks/useEntityActions.ts    |  12 +-
 src/entity-store/hooks/useEntityLookup.ts     |  18 +-
 src/entity-store/hooks/useIncrementEntity.ts  |  10 +-
 src/entity-store/hooks/useTransaction.ts      |   8 +-
 src/entity-store/hooks/utils.ts               |   2 +-
 src/entity-store/reducer.test.ts              |   8 +-
 src/entity-store/reducer.ts                   |   8 +-
 src/entity-store/selectors.ts                 |   8 +-
 src/entity-store/utils.ts                     |   2 +-
 src/features/about/index.tsx                  |  10 +-
 .../account-gallery/components/media-item.tsx |  12 +-
 src/features/account-gallery/index.tsx        |  20 +-
 .../components/moved-note.tsx                 |   8 +-
 src/features/account-timeline/index.tsx       |  18 +-
 src/features/account/components/header.tsx    |  52 +--
 src/features/admin/announcements.tsx          |  14 +-
 src/features/admin/components/admin-tabs.tsx  |   4 +-
 src/features/admin/components/dashcounter.tsx |   4 +-
 .../components/latest-accounts-panel.tsx      |   6 +-
 .../components/registration-mode-picker.tsx   |  10 +-
 .../admin/components/report-status.tsx        |  14 +-
 src/features/admin/components/report.tsx      |  20 +-
 .../admin/components/unapproved-account.tsx   |  10 +-
 src/features/admin/domains.tsx                |  18 +-
 .../admin/hooks/useAdminNostrRelays.ts        |   2 +-
 src/features/admin/index.tsx                  |  12 +-
 src/features/admin/manage-zap-split.tsx       |  12 +-
 src/features/admin/moderation-log.tsx         |   8 +-
 src/features/admin/nostr-relays.tsx           |   8 +-
 src/features/admin/relays.tsx                 |  12 +-
 src/features/admin/rules.tsx                  |  14 +-
 src/features/admin/tabs/awaiting-approval.tsx |   8 +-
 src/features/admin/tabs/dashboard.tsx         |  20 +-
 src/features/admin/tabs/reports.tsx           |   8 +-
 src/features/admin/user-index.tsx             |   8 +-
 src/features/aliases/components/account.tsx   |  12 +-
 src/features/aliases/components/search.tsx    |   8 +-
 src/features/aliases/index.tsx                |  14 +-
 src/features/audio/index.tsx                  |   6 +-
 .../auth-login/components/captcha.test.tsx    |   4 +-
 .../auth-login/components/captcha.tsx         |   6 +-
 .../auth-login/components/consumer-button.tsx |   8 +-
 .../auth-login/components/consumers-list.tsx  |   6 +-
 .../auth-login/components/login-form.test.tsx |   6 +-
 .../auth-login/components/login-form.tsx      |   4 +-
 .../auth-login/components/login-page.test.tsx |   6 +-
 .../auth-login/components/login-page.tsx      |  18 +-
 src/features/auth-login/components/logout.tsx |   4 +-
 .../components/otp-auth-form.test.tsx         |   4 +-
 .../auth-login/components/otp-auth-form.tsx   |   8 +-
 .../password-reset-confirm.test.tsx           |   6 +-
 .../components/password-reset-confirm.tsx     |   8 +-
 .../auth-login/components/password-reset.tsx  |  10 +-
 .../components/registration-form.tsx          |  14 +-
 .../components/registration-page.tsx          |  10 +-
 src/features/auth-token-list/index.tsx        |  10 +-
 src/features/backups/index.tsx                |   8 +-
 src/features/birthdays/account.tsx            |   8 +-
 src/features/blocks/index.tsx                 |   8 +-
 .../components/new-folder-form.tsx            |   8 +-
 src/features/bookmark-folders/index.tsx       |  10 +-
 src/features/bookmarks/index.tsx              |  20 +-
 .../chats/components/chat-composer.tsx        |  22 +-
 .../chats/components/chat-list-item.test.tsx  |   6 +-
 .../chats/components/chat-list-item.tsx       |  18 +-
 src/features/chats/components/chat-list.tsx   |  14 +-
 .../components/chat-message-list-intro.tsx    |  14 +-
 .../components/chat-message-list.test.tsx     |  16 +-
 .../chats/components/chat-message-list.tsx    |  14 +-
 .../chat-message-reaction-wrapper.tsx         |   4 +-
 .../components/chat-message-reaction.test.tsx |   4 +-
 .../components/chat-message-reaction.tsx      |   6 +-
 .../chats/components/chat-message.tsx         |  31 +-
 .../chats/components/chat-page/chat-page.tsx  |  14 +-
 .../chat-page/components/blankslate-empty.tsx |   2 +-
 .../components/blankslate-with-chats.tsx      |   2 +-
 .../chat-page/components/chat-page-main.tsx   |  24 +-
 .../chat-page/components/chat-page-new.tsx    |   4 +-
 .../components/chat-page-settings.tsx         |  12 +-
 .../components/chat-page-sidebar.tsx          |  10 +-
 .../chat-page/components/welcome.tsx          |   8 +-
 .../components/chat-pane-header.test.tsx      |   4 +-
 .../chats/components/chat-pane/blankslate.tsx |   2 +-
 .../components/chat-pane/chat-pane.test.tsx   |  10 +-
 .../chats/components/chat-pane/chat-pane.tsx  |  28 +-
 .../chats/components/chat-pending-upload.tsx  |   2 +-
 .../chats/components/chat-search-input.tsx    |   2 +-
 .../components/chat-search/blankslate.tsx     |   2 +-
 .../chat-search/chat-search.test.tsx          |   8 +-
 .../components/chat-search/chat-search.tsx    |  20 +-
 .../chat-search/empty-results-blankslate.tsx  |   2 +-
 .../chats/components/chat-search/results.tsx  |   8 +-
 .../chats/components/chat-textarea.tsx        |   8 +-
 .../chats/components/chat-upload-preview.tsx  |   6 +-
 src/features/chats/components/chat-upload.tsx |  12 +-
 .../chats/components/chat-widget.test.tsx     |   6 +-
 .../chat-widget/chat-pane-header.tsx          |   2 +-
 .../components/chat-widget/chat-settings.tsx  |  18 +-
 .../components/chat-widget/chat-widget.tsx    |   6 +-
 .../components/chat-widget/chat-window.tsx    |  14 +-
 .../headers/chat-search-header.tsx            |   6 +-
 src/features/chats/components/chat.tsx        |  18 +-
 src/features/chats/components/ui/index.ts     |   2 +-
 src/features/chats/index.tsx                  |   4 +-
 src/features/community-timeline/index.tsx     |  14 +-
 .../components/autosuggest-account.tsx        |   4 +-
 .../components/compose-form-button.tsx        |   2 +-
 .../compose/components/compose-form.tsx       |  52 +--
 .../compose/components/markdown-button.tsx    |   6 +-
 .../compose/components/poll-button.tsx        |   6 +-
 .../polls/duration-selector.test.tsx          |   4 +-
 .../components/polls/duration-selector.tsx    |   2 +-
 .../compose/components/polls/poll-form.tsx    |  12 +-
 .../compose/components/privacy-dropdown.tsx   |  14 +-
 .../components/reply-group-indicator.tsx      |  10 +-
 .../compose/components/reply-indicator.tsx    |  12 +-
 .../compose/components/reply-mentions.tsx     |  12 +-
 .../compose/components/schedule-button.tsx    |   6 +-
 .../compose/components/schedule-form.tsx      |  10 +-
 .../compose/components/search-results.tsx     |  28 +-
 .../compose/components/search-zap-split.tsx   |  16 +-
 src/features/compose/components/search.tsx    |  14 +-
 .../compose/components/spoiler-button.tsx     |   6 +-
 .../compose/components/spoiler-input.tsx      |   8 +-
 .../compose/components/upload-button.tsx      |   4 +-
 .../compose/components/upload-form.tsx        |  12 +-
 .../compose/components/upload-progress.tsx    |   4 +-
 src/features/compose/components/upload.tsx    |   6 +-
 .../components/visual-character-counter.tsx   |   2 +-
 src/features/compose/components/warning.tsx   |   2 +-
 .../containers/quoted-status-container.tsx    |   8 +-
 .../containers/reply-indicator-container.ts   |  10 +-
 .../containers/upload-button-container.ts     |   6 +-
 .../compose/containers/warning-container.tsx  |   6 +-
 src/features/compose/editor/index.tsx         |  14 +-
 .../compose/editor/nodes/emoji-node.tsx       |   4 +-
 src/features/compose/editor/nodes/index.ts    |   4 +-
 .../compose/editor/nodes/mention-node.tsx     |   4 +-
 .../editor/plugins/autosuggest-plugin.tsx     |  20 +-
 .../compose/editor/plugins/state-plugin.tsx   |   4 +-
 src/features/compose/util/counter.ts          |   2 +-
 .../conversations/components/conversation.tsx |   8 +-
 .../components/conversations-list.tsx         |   8 +-
 src/features/conversations/index.tsx          |  14 +-
 .../components/crypto-address.tsx             |  14 +-
 .../components/crypto-donate-panel.tsx        |   6 +-
 .../components/detailed-crypto-address.tsx    |  10 +-
 .../components/lightning-address.tsx          |   4 +-
 .../crypto-donate/components/site-wallet.tsx  |   6 +-
 src/features/crypto-donate/index.tsx          |   6 +-
 src/features/delete-account/index.tsx         |   8 +-
 src/features/developers/apps/create.tsx       |  10 +-
 .../developers/developers-challenge.tsx       |   8 +-
 src/features/developers/developers-menu.tsx   |  12 +-
 src/features/developers/index.tsx             |   8 +-
 .../developers/service-worker-info.tsx        |   8 +-
 src/features/developers/settings-store.tsx    |  14 +-
 src/features/direct-timeline/index.tsx        |  14 +-
 .../directory/components/account-card.tsx     |  18 +-
 src/features/directory/index.tsx              |  10 +-
 src/features/domain-blocks/index.tsx          |  10 +-
 src/features/edit-email/index.tsx             |   8 +-
 src/features/edit-identity/index.tsx          |  16 +-
 src/features/edit-password/index.tsx          |   8 +-
 .../edit-profile/components/avatar-picker.tsx |   4 +-
 .../edit-profile/components/header-picker.tsx |   4 +-
 src/features/edit-profile/index.tsx           |  26 +-
 src/features/email-confirmation/index.tsx     |  10 +-
 src/features/embedded-status/index.tsx        |  16 +-
 .../components/emoji-picker-dropdown.tsx      |  15 +-
 .../emoji/components/emoji-picker.tsx         |   4 +-
 .../emoji-picker-dropdown-container.tsx       |   6 +-
 src/features/emoji/index.test.ts              |   2 +-
 src/features/emoji/index.ts                   |   4 +-
 src/features/emoji/mapping.ts                 |   2 +-
 src/features/emoji/search.test.ts             |   2 +-
 src/features/emoji/search.ts                  |   4 +-
 .../event/components/event-action-button.tsx  |  12 +-
 src/features/event/components/event-date.tsx  |   6 +-
 .../event/components/event-header.tsx         |  48 +--
 src/features/event/event-discussion.tsx       |  28 +-
 src/features/event/event-information.tsx      |  24 +-
 .../events/components/event-carousel.tsx      |  10 +-
 src/features/events/index.tsx                 |  10 +-
 .../export-data/components/csv-exporter.tsx   |   6 +-
 src/features/export-data/index.tsx            |   6 +-
 .../components/external-login-form.tsx        |   8 +-
 src/features/external-login/index.tsx         |   4 +-
 src/features/favourited-statuses/index.tsx    |  14 +-
 .../components/instance-restrictions.tsx      |   8 +-
 .../components/restricted-instance.tsx        |   8 +-
 .../federation-restrictions/index.tsx         |  12 +-
 .../feed-suggestions/feed-suggestions.tsx     |  12 +-
 src/features/filters/edit-filter.tsx          |  18 +-
 src/features/filters/index.tsx                |  12 +-
 src/features/follow-recommendations/index.tsx |  10 +-
 .../components/account-authorize.tsx          |  10 +-
 src/features/follow-requests/index.tsx        |  10 +-
 src/features/followed-tags/index.tsx          |  12 +-
 src/features/followers/index.tsx              |  10 +-
 src/features/following/index.tsx              |  10 +-
 src/features/forms/index.tsx                  |   2 +-
 src/features/generic-not-found/index.tsx      |   2 +-
 .../components/group-action-button.test.tsx   |  10 +-
 .../group/components/group-action-button.tsx  |  20 +-
 .../group/components/group-header-image.tsx   |   4 +-
 .../group/components/group-header.test.tsx    |   8 +-
 .../group/components/group-header.tsx         |  26 +-
 .../components/group-member-count.test.tsx    |   8 +-
 .../group/components/group-member-count.tsx   |   6 +-
 .../group-member-list-item.test.tsx           |  10 +-
 .../components/group-member-list-item.tsx     |  30 +-
 .../components/group-options-button.test.tsx  |  10 +-
 .../group/components/group-options-button.tsx |  18 +-
 .../group/components/group-privacy.test.tsx   |   8 +-
 .../group/components/group-privacy.tsx        |   4 +-
 .../components/group-relationship.test.tsx    |  10 +-
 .../group/components/group-relationship.tsx   |   6 +-
 .../components/group-tag-list-item.test.tsx   |   8 +-
 .../group/components/group-tag-list-item.tsx  |  18 +-
 .../group/components/group-tags-field.tsx     |   4 +-
 src/features/group/edit-group.tsx             |  18 +-
 src/features/group/group-blocked-members.tsx  |  16 +-
 src/features/group/group-gallery.tsx          |  16 +-
 src/features/group/group-members.tsx          |  18 +-
 .../group/group-membership-requests.tsx       |  18 +-
 src/features/group/group-tag-timeline.tsx     |  10 +-
 src/features/group/group-tags.tsx             |  12 +-
 src/features/group/group-timeline.tsx         |  16 +-
 src/features/group/manage-group.tsx           |  18 +-
 .../discover/group-grid-item.test.tsx         |   6 +-
 .../components/discover/group-grid-item.tsx   |  14 +-
 .../discover/group-list-item.test.tsx         |   6 +-
 .../components/discover/group-list-item.tsx   |  10 +-
 .../discover/layout-buttons.test.tsx          |   4 +-
 .../components/discover/layout-buttons.tsx    |   2 +-
 .../components/discover/popular-groups.tsx    |  10 +-
 .../components/discover/popular-tags.tsx      |   8 +-
 .../discover/search/blankslate.test.tsx       |   4 +-
 .../components/discover/search/blankslate.tsx |   2 +-
 .../discover/search/recent-searches.tsx       |   8 +-
 .../discover/search/results.test.tsx          |   6 +-
 .../components/discover/search/results.tsx    |  12 +-
 .../discover/search/search.test.tsx           |  10 +-
 .../components/discover/search/search.tsx     |  16 +-
 .../components/discover/suggested-groups.tsx  |  10 +-
 .../discover/tag-list-item.test.tsx           |   6 +-
 .../components/discover/tag-list-item.tsx     |   4 +-
 .../groups/components/group-link-preview.tsx  |   4 +-
 .../groups/components/pending-groups-row.tsx  |   8 +-
 src/features/groups/components/tab-bar.tsx    |   4 +-
 src/features/groups/discover.test.tsx         |   8 +-
 src/features/groups/discover.tsx              |  12 +-
 src/features/groups/index.tsx                 |  20 +-
 src/features/groups/pending-requests.tsx      |  10 +-
 src/features/groups/popular.tsx               |  12 +-
 src/features/groups/suggested.tsx             |  12 +-
 src/features/groups/tag.tsx                   |  10 +-
 src/features/groups/tags.tsx                  |   8 +-
 src/features/hashtag-timeline/index.tsx       |  16 +-
 src/features/home-timeline/index.tsx          |  12 +-
 .../import-data/components/csv-importer.tsx   |   6 +-
 src/features/import-data/index.tsx            |   6 +-
 .../components/site-banner.tsx                |  10 +-
 src/features/landing-timeline/index.tsx       |  18 +-
 src/features/list-adder/components/list.tsx   |   8 +-
 src/features/list-adder/index.tsx             |  16 +-
 .../list-editor/components/account.tsx        |  10 +-
 .../list-editor/components/edit-list-form.tsx |   6 +-
 .../list-editor/components/search.tsx         |   8 +-
 src/features/list-editor/index.tsx            |  12 +-
 src/features/list-timeline/index.tsx          |  18 +-
 .../lists/components/new-list-form.tsx        |   6 +-
 src/features/lists/index.tsx                  |  16 +-
 src/features/migration/index.tsx              |   8 +-
 .../mutes/components/group-list-item.tsx      |  10 +-
 src/features/mutes/index.tsx                  |  12 +-
 src/features/new-status/index.tsx             |   4 +-
 .../nostr-relays/components/relay-editor.tsx  |   6 +-
 src/features/nostr-relays/index.tsx           |  12 +-
 src/features/nostr/Bech32Redirect.tsx         |   2 +-
 src/features/nostr/hooks/useNostrReq.ts       |   4 +-
 src/features/nostr/keyring.ts                 |   2 +-
 src/features/nostr/nostr-bunker-login.tsx     |   8 +-
 .../notifications/components/filter-bar.tsx   |  10 +-
 .../components/notification.test.tsx          |   6 +-
 .../notifications/components/notification.tsx |  36 +-
 .../components/setting-toggle.tsx             |   4 +-
 src/features/notifications/index.tsx          |  26 +-
 src/features/pinned-statuses/index.tsx        |  12 +-
 .../components/placeholder-account.tsx        |   6 +-
 .../components/placeholder-avatar.tsx         |   2 +-
 .../components/placeholder-card.tsx           |   2 +-
 .../components/placeholder-chat-message.tsx   |   6 +-
 .../components/placeholder-chat.tsx           |   6 +-
 .../components/placeholder-display-name.tsx   |   2 +-
 .../components/placeholder-event-header.tsx   |   4 +-
 .../components/placeholder-event-preview.tsx  |   4 +-
 .../components/placeholder-group-card.tsx     |   4 +-
 .../components/placeholder-group-discover.tsx |   4 +-
 .../components/placeholder-group-search.tsx   |   4 +-
 .../components/placeholder-hashtag.tsx        |   2 +-
 .../placeholder-material-status.tsx           |   2 +-
 .../components/placeholder-media-gallery.tsx  |   2 +-
 .../components/placeholder-notification.tsx   |   8 +-
 .../placeholder-sidebar-suggestions.tsx       |   4 +-
 .../components/placeholder-sidebar-trends.tsx |   4 +-
 .../components/placeholder-status-content.tsx |   2 +-
 .../components/placeholder-status.tsx         |   8 +-
 src/features/preferences/index.tsx            |  14 +-
 src/features/public-timeline/index.tsx        |  20 +-
 src/features/quotes/index.tsx                 |  10 +-
 src/features/register-invite/index.tsx        |   6 +-
 .../components/pinned-hosts-picker.tsx        |   4 +-
 src/features/remote-timeline/index.tsx        |  16 +-
 src/features/reply-mentions/account.tsx       |  14 +-
 .../report/components/status-check-box.tsx    |  10 +-
 src/features/scheduled-statuses/builder.tsx   |  10 +-
 .../scheduled-status-action-bar.tsx           |  12 +-
 .../components/scheduled-status.tsx           |  20 +-
 src/features/scheduled-statuses/index.tsx     |  10 +-
 src/features/search/index.tsx                 |  10 +-
 src/features/security/mfa-form.tsx            |  12 +-
 .../security/mfa/disable-otp-form.tsx         |   8 +-
 src/features/security/mfa/enable-otp-form.tsx |   8 +-
 .../security/mfa/otp-confirm-form.tsx         |   8 +-
 src/features/server-info/index.tsx            |   8 +-
 .../settings/components/messages-settings.tsx |   8 +-
 src/features/settings/index.tsx               |  16 +-
 src/features/share/index.tsx                  |   4 +-
 .../components/color-picker.tsx               |   2 +-
 .../components/color-with-picker.tsx          |   4 +-
 .../components/crypto-address-input.tsx       |   6 +-
 .../components/footer-link-input.tsx          |   6 +-
 .../components/icon-picker-dropdown.tsx       |   4 +-
 .../components/icon-picker-menu.tsx           |   2 +-
 .../soapbox-config/components/icon-picker.tsx |   2 +-
 .../components/promo-panel-input.tsx          |   8 +-
 .../components/site-preview.tsx               |  12 +-
 src/features/soapbox-config/index.tsx         |  24 +-
 .../status/components/detailed-status.tsx     |  24 +-
 .../components/status-interaction-bar.tsx     |  12 +-
 .../status/components/thread-login-cta.tsx    |   4 +-
 .../status/components/thread-status.tsx       |   6 +-
 src/features/status/components/thread.tsx     |  36 +-
 .../containers/quoted-status-container.tsx    |   8 +-
 src/features/status/index.tsx                 |  18 +-
 src/features/test-timeline/index.tsx          |  13 +-
 .../theme-editor/components/color.tsx         |   2 +-
 .../theme-editor/components/palette.tsx       |  10 +-
 src/features/theme-editor/index.tsx           |  24 +-
 src/features/ui/components/action-button.tsx  |  12 +-
 .../ui/components/column-forbidden.tsx        |   2 +-
 src/features/ui/components/column-loading.tsx |   2 +-
 src/features/ui/components/columns-area.tsx   |   2 +-
 .../ui/components/compose-button.test.tsx     |   6 +-
 src/features/ui/components/compose-button.tsx |  10 +-
 .../ui/components/cta-banner.test.tsx         |   6 +-
 src/features/ui/components/cta-banner.tsx     |   4 +-
 src/features/ui/components/error-column.tsx   |   4 +-
 .../ui/components/floating-action-button.tsx  |  10 +-
 src/features/ui/components/funding-panel.tsx  |   6 +-
 .../ui/components/group-media-panel.tsx       |  14 +-
 src/features/ui/components/image-loader.tsx   |   2 +-
 .../ui/components/instance-info-panel.tsx     |   8 +-
 .../components/instance-moderation-panel.tsx  |  12 +-
 src/features/ui/components/link-footer.tsx    |  10 +-
 src/features/ui/components/modal-loading.tsx  |   2 +-
 src/features/ui/components/modal-root.tsx     |   6 +-
 .../account-moderation-modal.tsx              |  28 +-
 .../account-moderation-modal/badge-input.tsx  |   4 +-
 .../staff-role-picker.tsx                     |  10 +-
 .../ui/components/modals/actions-modal.tsx    |  12 +-
 .../ui/components/modals/birthdays-modal.tsx  |   8 +-
 .../ui/components/modals/boost-modal.tsx      |   8 +-
 .../modals/captcha-modal/captcha-modal.tsx    |   6 +-
 .../modals/compare-history-modal.tsx          |  10 +-
 .../ui/components/modals/component-modal.tsx  |   2 +-
 .../compose-event-modal.tsx                   |  22 +-
 .../compose-event-modal/upload-button.tsx     |   6 +-
 .../ui/components/modals/compose-modal.tsx    |  14 +-
 .../components/modals/confirmation-modal.tsx  |   6 +-
 .../components/modals/crypto-donate-modal.tsx |   6 +-
 .../ui/components/modals/dislikes-modal.tsx   |  10 +-
 .../modals/edit-announcement-modal.tsx        |  14 +-
 .../modals/edit-bookmark-folder-modal.tsx     |  18 +-
 .../components/modals/edit-domain-modal.tsx   |  12 +-
 .../modals/edit-federation-modal.tsx          |  12 +-
 .../ui/components/modals/edit-rule-modal.tsx  |  10 +-
 .../ui/components/modals/embed-modal.tsx      |  12 +-
 .../ui/components/modals/event-map-modal.tsx  |   8 +-
 .../modals/event-participants-modal.tsx       |  10 +-
 .../modals/familiar-followers-modal.tsx       |  10 +-
 .../ui/components/modals/favourites-modal.tsx |  10 +-
 .../ui/components/modals/hotkeys-modal.tsx    |   4 +-
 .../ui/components/modals/join-event-modal.tsx |   8 +-
 .../modals/landing-page-modal.test.tsx        |   6 +-
 .../components/modals/landing-page-modal.tsx  |   6 +-
 .../manage-group-modal/create-group-modal.tsx |  18 +-
 .../steps/confirmation-step.tsx               |   8 +-
 .../manage-group-modal/steps/details-step.tsx |  16 +-
 .../manage-group-modal/steps/privacy-step.tsx |   6 +-
 .../ui/components/modals/media-modal.tsx      |  28 +-
 .../ui/components/modals/mentions-modal.tsx   |  12 +-
 .../modals/missing-description-modal.tsx      |   2 +-
 .../ui/components/modals/mute-modal.tsx       |  14 +-
 .../components/nostr-extension-indicator.tsx  |  13 +-
 .../nostr-login-modal/nostr-login-modal.tsx   |   4 +-
 .../steps/extension-step.tsx                  |  13 +-
 .../nostr-login-modal/steps/key-add-step.tsx  |  15 +-
 .../nostr-signup-modal/nostr-signup-modal.tsx |   6 +-
 .../nostr-signup-modal/steps/key-step.tsx     |  10 +-
 .../nostr-signup-modal/steps/keygen-step.tsx  |  23 +-
 .../onboarding-flow-modal.tsx                 |  18 +-
 .../steps/avatar-step.tsx                     |  14 +-
 .../onboarding-flow-modal/steps/bio-step.tsx  |  10 +-
 .../steps/completed-step.tsx                  |   4 +-
 .../steps/cover-photo-selection-step.tsx      |  16 +-
 .../steps/display-name-step.tsx               |  10 +-
 .../steps/suggested-accounts-step.tsx         |  10 +-
 .../ui/components/modals/reactions-modal.tsx  |  14 +-
 .../ui/components/modals/reblogs-modal.tsx    |  12 +-
 .../modals/reply-mentions-modal.tsx           |  13 +-
 .../modals/report-modal/report-modal.tsx      |  28 +-
 .../report-modal/steps/confirmation-step.tsx  |  10 +-
 .../report-modal/steps/other-actions-step.tsx |  12 +-
 .../modals/report-modal/steps/reason-step.tsx |  10 +-
 .../modals/select-bookmark-folder-modal.tsx   |  16 +-
 .../modals/unauthorized-modal.test.tsx        |   6 +-
 .../components/modals/unauthorized-modal.tsx  |  10 +-
 .../ui/components/modals/video-modal.tsx      |   4 +-
 .../ui/components/modals/zap-invoice.tsx      |  16 +-
 .../modals/zap-pay-request-modal.tsx          |   6 +-
 .../modals/zap-split/display-name-row.tsx     |  10 +-
 .../modals/zap-split/zap-split-modal.tsx      |  12 +-
 .../components/modals/zap-split/zap-split.tsx |   8 +-
 .../ui/components/modals/zaps-modal.tsx       |  12 +-
 src/features/ui/components/navbar.test.tsx    |   6 +-
 src/features/ui/components/navbar.tsx         |  22 +-
 .../ui/components/new-account-zap-split.tsx   |  10 +-
 .../components/panels/account-note-panel.tsx  |  10 +-
 .../ui/components/panels/my-groups-panel.tsx  |   8 +-
 .../ui/components/panels/new-event-panel.tsx  |   6 +-
 .../ui/components/panels/new-group-panel.tsx  |   8 +-
 .../components/panels/sign-up-panel.test.tsx  |   6 +-
 .../ui/components/panels/sign-up-panel.tsx    |   6 +-
 .../panels/suggested-groups-panel.tsx         |   8 +-
 src/features/ui/components/pending-status.tsx |  22 +-
 .../ui/components/pinned-accounts-panel.tsx   |  13 +-
 src/features/ui/components/poll-preview.tsx   |   8 +-
 .../ui/components/profile-dropdown.tsx        |  14 +-
 .../components/profile-familiar-followers.tsx |  18 +-
 src/features/ui/components/profile-field.tsx  |   9 +-
 .../ui/components/profile-fields-panel.tsx    |   6 +-
 .../ui/components/profile-info-panel.tsx      |  22 +-
 .../ui/components/profile-media-panel.tsx     |  16 +-
 src/features/ui/components/profile-stats.tsx  |   6 +-
 src/features/ui/components/promo-panel.tsx    |   6 +-
 .../ui/components/subscribe-button.test.tsx   |   6 +-
 .../ui/components/subscription-button.tsx     |  12 +-
 src/features/ui/components/theme-selector.tsx |   2 +-
 src/features/ui/components/theme-toggle.tsx   |   6 +-
 src/features/ui/components/timeline.tsx       |  12 +-
 .../ui/components/trends-panel.test.tsx       |   6 +-
 src/features/ui/components/trends-panel.tsx   |  12 +-
 src/features/ui/components/user-panel.tsx     |  16 +-
 .../ui/components/who-to-follow-panel.tsx     |  12 +-
 src/features/ui/containers/modal-container.ts |  12 +-
 src/features/ui/index.tsx                     |  78 ++--
 src/features/ui/util/async-components.ts      | 362 +++++++++---------
 src/features/ui/util/global-hotkeys.tsx       |  10 +-
 src/features/ui/util/optional-motion.tsx      |   4 +-
 .../ui/util/pending-status-builder.ts         |  10 +-
 src/features/ui/util/react-router-helpers.tsx |  12 +-
 src/features/video/index.tsx                  |  10 +-
 .../zap/components/zap-button/zap-button.tsx  |   2 +-
 .../zap/components/zap-pay-request-form.tsx   |  20 +-
 .../zap/components/zap-split-account-item.tsx |   2 +-
 src/globals.ts                                |   4 +-
 src/hooks/forms/index.ts                      |   6 +-
 src/hooks/forms/useImageField.ts              |   4 +-
 src/hooks/index.ts                            |  50 +--
 src/hooks/nostr/useBunker.ts                  |   6 +-
 src/hooks/nostr/useBunkerStore.ts             |   2 +-
 src/hooks/nostr/useSigner.ts                  |   6 +-
 src/hooks/useApi.ts                           |   8 +-
 src/hooks/useAppDispatch.ts                   |   2 +-
 src/hooks/useAppSelector.ts                   |   2 +-
 src/hooks/useBackend.ts                       |   4 +-
 src/hooks/useCompose.ts                       |   4 +-
 src/hooks/useDimensions.test.ts               |   4 +-
 src/hooks/useFeatures.ts                      |   4 +-
 src/hooks/useGetState.ts                      |   4 +-
 src/hooks/useInstance.ts                      |  10 +-
 src/hooks/useIsMobile.ts                      |   2 +-
 src/hooks/useLocale.ts                        |   4 +-
 src/hooks/useLoggedIn.ts                      |   2 +-
 src/hooks/useOwnAccount.ts                    |   4 +-
 src/hooks/useRegistrationStatus.ts            |   4 +-
 src/hooks/useSettings.ts                      |   6 +-
 src/hooks/useSettingsNotifications.ts         |   6 +-
 src/hooks/useSoapboxConfig.ts                 |   6 +-
 src/hooks/useTheme.ts                         |   4 +-
 src/init/soapbox-head.tsx                     |  10 +-
 src/init/soapbox-load.tsx                     |  17 +-
 src/init/soapbox-mount.tsx                    |  22 +-
 src/init/soapbox.tsx                          |  20 +-
 src/jest/factory.ts                           |   6 +-
 src/jest/mock-stores.tsx                      |   4 +-
 src/jest/test-helpers.tsx                     |  10 +-
 src/jest/test-setup.ts                        |   2 +-
 src/middleware/errors.ts                      |   2 +-
 src/middleware/sounds.ts                      |   4 +-
 src/normalizers/account.test.ts               |   2 +-
 src/normalizers/account.ts                    |  12 +-
 src/normalizers/admin-account.ts              |   2 +-
 src/normalizers/admin-report.ts               |   2 +-
 src/normalizers/attachment.test.ts            |   2 +-
 src/normalizers/attachment.ts                 |   2 +-
 src/normalizers/chat-message.test.ts          |   4 +-
 src/normalizers/chat-message.ts               |   8 +-
 src/normalizers/chat.ts                       |   2 +-
 src/normalizers/filter-result.ts              |   4 +-
 src/normalizers/filter.ts                     |   6 +-
 src/normalizers/group-relationship.ts         |   2 +-
 src/normalizers/group.ts                      |  10 +-
 src/normalizers/index.ts                      |  42 +-
 src/normalizers/mention.test.ts               |   2 +-
 src/normalizers/mention.ts                    |   2 +-
 src/normalizers/notification.test.ts          |   2 +-
 src/normalizers/notification.ts               |   2 +-
 .../soapbox/soapbox-config.test.ts            |   2 +-
 src/normalizers/soapbox/soapbox-config.ts     |   6 +-
 src/normalizers/status-edit.ts                |  14 +-
 src/normalizers/status.test.ts                |   4 +-
 src/normalizers/status.ts                     |  14 +-
 src/normalizers/tag.ts                        |   4 +-
 src/pages/admin-page.tsx                      |   6 +-
 src/pages/default-page.tsx                    |   8 +-
 src/pages/empty-page.tsx                      |   2 +-
 src/pages/event-page.tsx                      |  12 +-
 src/pages/events-page.tsx                     |   8 +-
 src/pages/group-page.tsx                      |  14 +-
 src/pages/groups-page.tsx                     |   7 +-
 src/pages/groups-pending-page.tsx             |   7 +-
 src/pages/home-page.tsx                       |  14 +-
 src/pages/landing-page.tsx                    |   8 +-
 src/pages/manage-groups-page.tsx              |   7 +-
 src/pages/profile-page.tsx                    |  14 +-
 src/pages/remote-instance-page.tsx            |  10 +-
 src/pages/search-page.tsx                     |   8 +-
 src/pages/status-page.tsx                     |   8 +-
 src/queries/accounts.ts                       |   6 +-
 src/queries/chats.test.ts                     |  16 +-
 src/queries/chats.ts                          |  26 +-
 src/queries/client.ts                         |   2 +-
 src/queries/embed.ts                          |   2 +-
 src/queries/relationships.test.ts             |  10 +-
 src/queries/relationships.ts                  |   4 +-
 src/queries/search.ts                         |   8 +-
 src/queries/suggestions.test.ts               |   6 +-
 src/queries/suggestions.ts                    |  12 +-
 src/queries/trends.test.ts                    |   6 +-
 src/queries/trends.ts                         |   8 +-
 src/reducers/accounts-meta.ts                 |   6 +-
 src/reducers/admin.test.ts                    |   2 +-
 src/reducers/admin.ts                         |  10 +-
 src/reducers/aliases.ts                       |   4 +-
 src/reducers/auth.ts                          |  18 +-
 src/reducers/{backups.tsx => backups.ts}      |   4 +-
 src/reducers/chat-message-lists.ts            |   6 +-
 src/reducers/chat-messages.ts                 |   8 +-
 src/reducers/chats.ts                         |  10 +-
 src/reducers/compose-event.ts                 |   4 +-
 src/reducers/compose.test.ts                  |  16 +-
 src/reducers/compose.ts                       |  28 +-
 src/reducers/contexts.test.ts                 |  10 +-
 src/reducers/contexts.ts                      |  10 +-
 src/reducers/conversations.test.ts            |   4 +-
 src/reducers/conversations.ts                 |   6 +-
 src/reducers/custom-emojis.test.ts            |   2 +-
 src/reducers/custom-emojis.ts                 |  10 +-
 src/reducers/domain-lists.test.ts             |   2 +-
 src/reducers/domain-lists.ts                  |   2 +-
 src/reducers/dropdown-menu.test.ts            |   2 +-
 src/reducers/dropdown-menu.ts                 |   2 +-
 src/reducers/filters.test.ts                  |   2 +-
 src/reducers/filters.ts                       |   6 +-
 src/reducers/followed-tags.ts                 |   6 +-
 src/reducers/group-memberships.ts             |   4 +-
 src/reducers/group-relationships.ts           |   6 +-
 src/reducers/groups.ts                        |   8 +-
 src/reducers/history.ts                       |   4 +-
 src/reducers/index.test.ts                    |   2 +-
 src/reducers/index.ts                         | 108 +++---
 src/reducers/instance.test.ts                 |   4 +-
 src/reducers/instance.ts                      |   8 +-
 src/reducers/list-adder.test.ts               |   4 +-
 src/reducers/list-adder.ts                    |   2 +-
 src/reducers/list-editor.ts                   |   2 +-
 src/reducers/lists.test.ts                    |   2 +-
 src/reducers/lists.ts                         |   6 +-
 src/reducers/locations.ts                     |   6 +-
 src/reducers/me.test.ts                       |   2 +-
 src/reducers/me.ts                            |   6 +-
 src/reducers/meta.test.ts                     |   4 +-
 src/reducers/meta.ts                          |   6 +-
 src/reducers/modals.test.ts                   |   4 +-
 src/reducers/modals.ts                        |   2 +-
 src/reducers/mutes.test.ts                    |   4 +-
 src/reducers/mutes.ts                         |   2 +-
 src/reducers/notifications.ts                 |  14 +-
 src/reducers/onboarding.test.ts               |   4 +-
 src/reducers/onboarding.ts                    |   4 +-
 src/reducers/patron.ts                        |   2 +-
 src/reducers/pending-statuses.ts              |   4 +-
 src/reducers/polls.test.ts                    |   4 +-
 src/reducers/polls.ts                         |   6 +-
 src/reducers/profile-hover-card.ts            |   2 +-
 src/reducers/relationships.test.ts            |   4 +-
 src/reducers/relationships.ts                 |  12 +-
 src/reducers/reports.test.ts                  |   2 +-
 src/reducers/reports.ts                       |   4 +-
 src/reducers/scheduled-statuses.ts            |  10 +-
 src/reducers/search.ts                        |   8 +-
 src/reducers/security.ts                      |   4 +-
 src/reducers/settings.test.ts                 |   2 +-
 src/reducers/settings.ts                      |  14 +-
 src/reducers/sidebar.test.ts                  |   2 +-
 src/reducers/sidebar.ts                       |   2 +-
 src/reducers/soapbox.test.ts                  |   6 +-
 src/reducers/soapbox.ts                       |  10 +-
 src/reducers/status-hover-card.test.tsx       |   4 +-
 src/reducers/status-hover-card.ts             |   2 +-
 src/reducers/status-lists.test.ts             |   2 +-
 src/reducers/status-lists.ts                  |  18 +-
 src/reducers/statuses.test.ts                 |   8 +-
 src/reducers/statuses.ts                      |  24 +-
 src/reducers/suggestions.test.ts              |   4 +-
 src/reducers/suggestions.ts                   |   8 +-
 src/reducers/tags.ts                          |   6 +-
 src/reducers/timelines.test.ts                |   4 +-
 src/reducers/timelines.ts                     |  10 +-
 src/reducers/trending-statuses.ts             |   4 +-
 src/reducers/trends.test.ts                   |   2 +-
 src/reducers/trends.ts                        |   6 +-
 src/reducers/user-lists.test.ts               |   2 +-
 src/reducers/user-lists.ts                    |  18 +-
 src/schemas/account.ts                        |  12 +-
 src/schemas/admin-account.ts                  |   2 +-
 src/schemas/announcement-reaction.ts          |   2 +-
 src/schemas/announcement.ts                   |  14 +-
 src/schemas/attachment.ts                     |   2 +-
 src/schemas/card.test.ts                      |   2 +-
 src/schemas/card.ts                           |   2 +-
 src/schemas/chat-message.ts                   |   8 +-
 src/schemas/emoji-reaction.ts                 |   2 +-
 src/schemas/event.ts                          |   4 +-
 src/schemas/group-member.ts                   |   2 +-
 src/schemas/group-relationship.ts             |   2 +-
 src/schemas/group.test.ts                     |   2 +-
 src/schemas/group.ts                          |  12 +-
 src/schemas/index.ts                          |  50 +--
 src/schemas/instance.test.ts                  |   2 +-
 src/schemas/instance.ts                       |   8 +-
 src/schemas/notification.ts                   |   8 +-
 src/schemas/pleroma.ts                        |   2 +-
 src/schemas/poll.test.ts                      |   2 +-
 src/schemas/poll.ts                           |   6 +-
 src/schemas/soapbox/settings.ts               |   4 +-
 src/schemas/soapbox/soapbox-auth.ts           |   4 +-
 src/schemas/soapbox/soapbox-config.ts         |   2 +-
 src/schemas/status.ts                         |  28 +-
 src/schemas/utils.ts                          |   2 +-
 src/schemas/web-push.ts                       |   2 +-
 src/schemas/zap-split.ts                      |   2 +-
 src/selectors/index.ts                        |  26 +-
 src/sentry.ts                                 |   6 +-
 src/store.ts                                  |   6 +-
 src/stream.ts                                 |   4 +-
 src/toast.test.tsx                            |   4 +-
 src/toast.tsx                                 |   4 +-
 src/types/entities.ts                         |   8 +-
 src/types/soapbox.ts                          |   2 +-
 src/utils/accounts.ts                         |   2 +-
 src/utils/auth.ts                             |   4 +-
 src/utils/badges.test.ts                      |   4 +-
 src/utils/badges.ts                           |   2 +-
 src/utils/base64.test.ts                      |   2 +-
 src/utils/chats.test.ts                       |  10 +-
 src/utils/chats.ts                            |  12 +-
 src/utils/code.ts                             |   2 +-
 src/utils/colors.test.ts                      |   2 +-
 src/utils/colors.ts                           |   2 +-
 src/utils/comparators.test.ts                 |   2 +-
 src/utils/config-db.test.ts                   |   2 +-
 src/utils/config-db.ts                        |   2 +-
 src/utils/emoji-reacts.test.ts                |   6 +-
 src/utils/emoji-reacts.ts                     |   2 +-
 src/utils/emoji.test.ts                       |   2 +-
 src/utils/features.test.ts                    |   4 +-
 src/utils/features.ts                         |   4 +-
 src/utils/groups.ts                           |   2 +-
 src/utils/html.test.ts                        |   2 +-
 src/utils/input.test.ts                       |   2 +-
 src/utils/media.test.ts                       |   2 +-
 src/utils/numbers.test.tsx                    |   4 +-
 src/utils/permissions.ts                      |   2 +-
 src/utils/queries.test.ts                     |   4 +-
 src/utils/queries.ts                          |   2 +-
 src/utils/redirect.ts                         |   2 +-
 src/utils/scopes.ts                           |   4 +-
 src/utils/state.ts                            |  10 +-
 src/utils/static.ts                           |   2 +-
 src/utils/status.test.ts                      |   4 +-
 src/utils/status.ts                           |   4 +-
 src/utils/tailwind.test.ts                    |   2 +-
 src/utils/tailwind.ts                         |   6 +-
 src/utils/theme.ts                            |   6 +-
 src/utils/timelines.test.ts                   |   4 +-
 src/utils/timelines.ts                        |   2 +-
 src/workers.ts                                |   2 +-
 tailwind.config.ts                            |   2 +-
 tailwind/colors.test.ts                       |   2 +-
 1043 files changed, 4879 insertions(+), 4872 deletions(-)
 rename src/reducers/{backups.tsx => backups.ts} (92%)

diff --git a/.eslintrc.json b/.eslintrc.json
index e1c275396..12ddcf848 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -260,7 +260,7 @@
     "jsx-a11y/role-supports-aria-props": "off",
     "jsx-a11y/scope": "warn",
     "jsx-a11y/tabindex-no-positive": "warn",
-    "import/extensions": ["warn", "ignorePackages"],
+    "import/extensions": ["error", "ignorePackages"],
     "import/newline-after-import": "error",
     "import/no-extraneous-dependencies": "error",
     "import/no-unresolved": "error",
diff --git a/scripts/do-release.ts b/scripts/do-release.ts
index f7d2dc9be..7fb69cadc 100644
--- a/scripts/do-release.ts
+++ b/scripts/do-release.ts
@@ -1,6 +1,6 @@
 import { Gitlab } from '@gitbeaker/node';
 
-import { getChanges } from './lib/changelog';
+import { getChanges } from './lib/changelog.ts';
 
 const {
   CI_COMMIT_TAG,
diff --git a/src/actions/about.test.ts b/src/actions/about.test.ts
index bd6affcd9..34e5240f7 100644
--- a/src/actions/about.test.ts
+++ b/src/actions/about.test.ts
@@ -1,15 +1,15 @@
 import MockAdapter from 'axios-mock-adapter';
 import { describe, expect, it } from 'vitest';
 
-import { staticClient } from 'soapbox/api';
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { staticClient } from 'soapbox/api/index.ts';
+import { mockStore } from 'soapbox/jest/test-helpers.tsx';
 
 import {
   FETCH_ABOUT_PAGE_REQUEST,
   FETCH_ABOUT_PAGE_SUCCESS,
   FETCH_ABOUT_PAGE_FAIL,
   fetchAboutPage,
-} from './about';
+} from './about.ts';
 
 describe('fetchAboutPage()', () => {
   it('creates the expected actions on success', () => {
diff --git a/src/actions/about.ts b/src/actions/about.ts
index c8410ded8..124698c1a 100644
--- a/src/actions/about.ts
+++ b/src/actions/about.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
 const FETCH_ABOUT_PAGE_SUCCESS = 'FETCH_ABOUT_PAGE_SUCCESS';
diff --git a/src/actions/account-notes.test.ts b/src/actions/account-notes.test.ts
index dbebf8076..6641fe39b 100644
--- a/src/actions/account-notes.test.ts
+++ b/src/actions/account-notes.test.ts
@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
 
-import { submitAccountNote } from './account-notes';
+import { submitAccountNote } from './account-notes.ts';
 
 describe('submitAccountNote()', () => {
   let store: ReturnType<typeof mockStore>;
diff --git a/src/actions/account-notes.ts b/src/actions/account-notes.ts
index 7afd5e283..ea69ccc13 100644
--- a/src/actions/account-notes.ts
+++ b/src/actions/account-notes.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST';
 const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS';
diff --git a/src/actions/accounts.test.ts b/src/actions/accounts.test.ts
index 434da371d..3c8befcaa 100644
--- a/src/actions/accounts.test.ts
+++ b/src/actions/accounts.test.ts
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildInstance, buildRelationship } from 'soapbox/jest/factory';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeAccount } from 'soapbox/normalizers';
-import { ListRecord, ReducerRecord } from 'soapbox/reducers/user-lists';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildInstance, buildRelationship } from 'soapbox/jest/factory.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeAccount } from 'soapbox/normalizers/index.ts';
+import { ListRecord, ReducerRecord } from 'soapbox/reducers/user-lists.ts';
 
 import {
   authorizeFollowRequest,
@@ -26,7 +26,7 @@ import {
   unblockAccount,
   unmuteAccount,
   unsubscribeAccount,
-} from './accounts';
+} from './accounts.ts';
 
 let store: ReturnType<typeof mockStore>;
 
diff --git a/src/actions/accounts.ts b/src/actions/accounts.ts
index f1d0f6c32..7ccaf6e5c 100644
--- a/src/actions/accounts.ts
+++ b/src/actions/accounts.ts
@@ -1,22 +1,22 @@
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { selectAccount } from 'soapbox/selectors';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
 import {
   importFetchedAccount,
   importFetchedAccounts,
   importErrorWhileFetchingAccountByUsername,
-} from './importer';
+} from './importer/index.ts';
 
 import type { AxiosError, CancelToken } from 'axios';
 import type { Map as ImmutableMap } from 'immutable';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status } from 'soapbox/types/entities';
-import type { History } from 'soapbox/types/history';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
+import type { History } from 'soapbox/types/history.ts';
 
 const ACCOUNT_CREATE_REQUEST = 'ACCOUNT_CREATE_REQUEST';
 const ACCOUNT_CREATE_SUCCESS = 'ACCOUNT_CREATE_SUCCESS';
diff --git a/src/actions/admin.ts b/src/actions/admin.ts
index 4dd3c1b64..2383aec95 100644
--- a/src/actions/admin.ts
+++ b/src/actions/admin.ts
@@ -1,13 +1,13 @@
-import { fetchRelationships } from 'soapbox/actions/accounts';
-import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer';
-import { accountIdsToAccts } from 'soapbox/selectors';
-import { filterBadges, getTagDiff } from 'soapbox/utils/badges';
+import { fetchRelationships } from 'soapbox/actions/accounts.ts';
+import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer/index.ts';
+import { accountIdsToAccts } from 'soapbox/selectors/index.ts';
+import { filterBadges, getTagDiff } from 'soapbox/utils/badges.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
 import type { AxiosResponse } from 'axios';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ADMIN_CONFIG_FETCH_REQUEST = 'ADMIN_CONFIG_FETCH_REQUEST';
 const ADMIN_CONFIG_FETCH_SUCCESS = 'ADMIN_CONFIG_FETCH_SUCCESS';
diff --git a/src/actions/aliases.ts b/src/actions/aliases.ts
index c582e70bb..3706c6415 100644
--- a/src/actions/aliases.ts
+++ b/src/actions/aliases.ts
@@ -1,16 +1,16 @@
 import { defineMessages } from 'react-intl';
 
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedAccounts } from './importer';
-import { patchMeSuccess } from './me';
+import { importFetchedAccounts } from './importer/index.ts';
+import { patchMeSuccess } from './me.ts';
 
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const ALIASES_FETCH_REQUEST = 'ALIASES_FETCH_REQUEST';
 const ALIASES_FETCH_SUCCESS = 'ALIASES_FETCH_SUCCESS';
diff --git a/src/actions/apps.ts b/src/actions/apps.ts
index d2ef2ff0d..e593f418e 100644
--- a/src/actions/apps.ts
+++ b/src/actions/apps.ts
@@ -6,7 +6,7 @@
  * @see module:soapbox/actions/auth
  */
 
-import { baseClient } from '../api';
+import { baseClient } from '../api/index.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index 8847c6b32..13d4fc72a 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -9,28 +9,28 @@
 
 import { defineMessages } from 'react-intl';
 
-import { createAccount } from 'soapbox/actions/accounts';
-import { createApp } from 'soapbox/actions/apps';
-import { fetchMeSuccess, fetchMeFail } from 'soapbox/actions/me';
-import { obtainOAuthToken, revokeOAuthToken } from 'soapbox/actions/oauth';
-import { startOnboarding } from 'soapbox/actions/onboarding';
-import { custom } from 'soapbox/custom';
-import { queryClient } from 'soapbox/queries/client';
-import { selectAccount } from 'soapbox/selectors';
-import { unsetSentryAccount } from 'soapbox/sentry';
-import KVStore from 'soapbox/storage/kv-store';
-import toast from 'soapbox/toast';
-import { getLoggedInAccount, parseBaseURL } from 'soapbox/utils/auth';
-import sourceCode from 'soapbox/utils/code';
-import { normalizeUsername } from 'soapbox/utils/input';
-import { getScopes } from 'soapbox/utils/scopes';
+import { createAccount } from 'soapbox/actions/accounts.ts';
+import { createApp } from 'soapbox/actions/apps.ts';
+import { fetchMeSuccess, fetchMeFail } from 'soapbox/actions/me.ts';
+import { obtainOAuthToken, revokeOAuthToken } from 'soapbox/actions/oauth.ts';
+import { startOnboarding } from 'soapbox/actions/onboarding.ts';
+import { custom } from 'soapbox/custom.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { unsetSentryAccount } from 'soapbox/sentry.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import toast from 'soapbox/toast.tsx';
+import { getLoggedInAccount, parseBaseURL } from 'soapbox/utils/auth.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { normalizeUsername } from 'soapbox/utils/input.ts';
+import { getScopes } from 'soapbox/utils/scopes.ts';
 
-import api, { baseClient } from '../api';
+import api, { baseClient } from '../api/index.ts';
 
-import { importFetchedAccount } from './importer';
+import { importFetchedAccount } from './importer/index.ts';
 
 import type { AxiosError } from 'axios';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 export const SWITCH_ACCOUNT = 'SWITCH_ACCOUNT';
 
diff --git a/src/actions/backups.ts b/src/actions/backups.ts
index c95e504db..dfabb1a85 100644
--- a/src/actions/backups.ts
+++ b/src/actions/backups.ts
@@ -1,6 +1,6 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 export const BACKUPS_FETCH_REQUEST = 'BACKUPS_FETCH_REQUEST';
 export const BACKUPS_FETCH_SUCCESS = 'BACKUPS_FETCH_SUCCESS';
diff --git a/src/actions/blocks.test.ts b/src/actions/blocks.test.ts
index b7a73f9eb..c0a2418d8 100644
--- a/src/actions/blocks.test.ts
+++ b/src/actions/blocks.test.ts
@@ -1,10 +1,10 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user-lists';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user-lists.ts';
 
-import { expandBlocks, fetchBlocks } from './blocks';
+import { expandBlocks, fetchBlocks } from './blocks.ts';
 
 const account = {
   acct: 'twoods',
diff --git a/src/actions/blocks.ts b/src/actions/blocks.ts
index b672e778f..bada74f2a 100644
--- a/src/actions/blocks.ts
+++ b/src/actions/blocks.ts
@@ -1,11 +1,11 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const BLOCKS_FETCH_REQUEST = 'BLOCKS_FETCH_REQUEST';
 const BLOCKS_FETCH_SUCCESS = 'BLOCKS_FETCH_SUCCESS';
diff --git a/src/actions/bookmarks.ts b/src/actions/bookmarks.ts
index 9fd11d258..76a656fd2 100644
--- a/src/actions/bookmarks.ts
+++ b/src/actions/bookmarks.ts
@@ -1,9 +1,9 @@
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const BOOKMARKED_STATUSES_FETCH_REQUEST = 'BOOKMARKED_STATUSES_FETCH_REQUEST';
 const BOOKMARKED_STATUSES_FETCH_SUCCESS = 'BOOKMARKED_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/chats.ts b/src/actions/chats.ts
index ee8e23239..6027530e3 100644
--- a/src/actions/chats.ts
+++ b/src/actions/chats.ts
@@ -1,12 +1,12 @@
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 
-import { getSettings, changeSetting } from 'soapbox/actions/settings';
-import { getFeatures } from 'soapbox/utils/features';
+import { getSettings, changeSetting } from 'soapbox/actions/settings.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { History } from 'soapbox/types/history';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { History } from 'soapbox/types/history.ts';
 
 const CHATS_FETCH_REQUEST = 'CHATS_FETCH_REQUEST';
 const CHATS_FETCH_SUCCESS = 'CHATS_FETCH_SUCCESS';
diff --git a/src/actions/compose-status.ts b/src/actions/compose-status.ts
index 9a0fbf9c6..fd1379f9e 100644
--- a/src/actions/compose-status.ts
+++ b/src/actions/compose-status.ts
@@ -1,7 +1,7 @@
-import { AppDispatch, RootState } from 'soapbox/store';
-import { getFeatures, parseVersion } from 'soapbox/utils/features';
+import { AppDispatch, RootState } from 'soapbox/store.ts';
+import { getFeatures, parseVersion } from 'soapbox/utils/features.ts';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS' as const;
 
diff --git a/src/actions/compose.test.ts b/src/actions/compose.test.ts
index 20cb92231..62c0b2d64 100644
--- a/src/actions/compose.test.ts
+++ b/src/actions/compose.test.ts
@@ -1,12 +1,12 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { buildInstance } from 'soapbox/jest/factory';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { ReducerCompose } from 'soapbox/reducers/compose';
+import { buildInstance } from 'soapbox/jest/factory.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { ReducerCompose } from 'soapbox/reducers/compose.ts';
 
-import { uploadCompose, submitCompose } from './compose';
-import { STATUS_CREATE_REQUEST } from './statuses';
+import { uploadCompose, submitCompose } from './compose.ts';
+import { STATUS_CREATE_REQUEST } from './statuses.ts';
 
 import type { IntlShape } from 'react-intl';
 
diff --git a/src/actions/compose.ts b/src/actions/compose.ts
index bdf02fe0a..b0733cda9 100644
--- a/src/actions/compose.ts
+++ b/src/actions/compose.ts
@@ -3,31 +3,31 @@ import { List as ImmutableList } from 'immutable';
 import throttle from 'lodash/throttle';
 import { defineMessages, IntlShape } from 'react-intl';
 
-import api from 'soapbox/api';
-import { isNativeEmoji } from 'soapbox/features/emoji';
-import emojiSearch from 'soapbox/features/emoji/search';
-import { normalizeTag } from 'soapbox/normalizers';
-import { selectAccount, selectOwnAccount } from 'soapbox/selectors';
-import { tagHistory } from 'soapbox/settings';
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import api from 'soapbox/api/index.ts';
+import { isNativeEmoji } from 'soapbox/features/emoji/index.ts';
+import emojiSearch from 'soapbox/features/emoji/search.ts';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
+import { selectAccount, selectOwnAccount } from 'soapbox/selectors/index.ts';
+import { tagHistory } from 'soapbox/settings.ts';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import { ComposeSetStatusAction } from './compose-status';
-import { chooseEmoji } from './emojis';
-import { importFetchedAccounts } from './importer';
-import { uploadFile, updateMedia } from './media';
-import { openModal, closeModal } from './modals';
-import { getSettings } from './settings';
-import { createStatus } from './statuses';
+import { ComposeSetStatusAction } from './compose-status.ts';
+import { chooseEmoji } from './emojis.ts';
+import { importFetchedAccounts } from './importer/index.ts';
+import { uploadFile, updateMedia } from './media.ts';
+import { openModal, closeModal } from './modals.ts';
+import { getSettings } from './settings.ts';
+import { createStatus } from './statuses.ts';
 
 import type { EditorState } from 'lexical';
-import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import type { Emoji } from 'soapbox/features/emoji';
-import type { Account, Group } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status, Tag } from 'soapbox/types/entities';
-import type { History } from 'soapbox/types/history';
+import type { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
+import type { Account, Group } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status, Tag } from 'soapbox/types/entities.ts';
+import type { History } from 'soapbox/types/history.ts';
 
 const { CancelToken, isCancel } = axios;
 
diff --git a/src/actions/consumer-auth.ts b/src/actions/consumer-auth.ts
index 72c928dba..27828d5fe 100644
--- a/src/actions/consumer-auth.ts
+++ b/src/actions/consumer-auth.ts
@@ -1,13 +1,13 @@
 import axios from 'axios';
 
-import * as BuildConfig from 'soapbox/build-config';
-import { isURL } from 'soapbox/utils/auth';
-import sourceCode from 'soapbox/utils/code';
-import { getScopes } from 'soapbox/utils/scopes';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import { isURL } from 'soapbox/utils/auth.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { getScopes } from 'soapbox/utils/scopes.ts';
 
-import { createApp } from './apps';
+import { createApp } from './apps.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const createProviderApp = () => {
   return async(dispatch: AppDispatch, getState: () => RootState) => {
diff --git a/src/actions/conversations.ts b/src/actions/conversations.ts
index 5c613e9e2..6f7727404 100644
--- a/src/actions/conversations.ts
+++ b/src/actions/conversations.ts
@@ -1,15 +1,15 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
 import {
   importFetchedAccounts,
   importFetchedStatuses,
   importFetchedStatus,
-} from './importer';
+} from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const CONVERSATIONS_MOUNT   = 'CONVERSATIONS_MOUNT';
 const CONVERSATIONS_UNMOUNT = 'CONVERSATIONS_UNMOUNT';
diff --git a/src/actions/custom-emojis.ts b/src/actions/custom-emojis.ts
index 2baf5213a..ad71b5c79 100644
--- a/src/actions/custom-emojis.ts
+++ b/src/actions/custom-emojis.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const CUSTOM_EMOJIS_FETCH_REQUEST = 'CUSTOM_EMOJIS_FETCH_REQUEST';
 const CUSTOM_EMOJIS_FETCH_SUCCESS = 'CUSTOM_EMOJIS_FETCH_SUCCESS';
diff --git a/src/actions/directory.ts b/src/actions/directory.ts
index 3fd39f350..2f9e92bc0 100644
--- a/src/actions/directory.ts
+++ b/src/actions/directory.ts
@@ -1,10 +1,10 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const DIRECTORY_FETCH_REQUEST = 'DIRECTORY_FETCH_REQUEST';
 const DIRECTORY_FETCH_SUCCESS = 'DIRECTORY_FETCH_SUCCESS';
diff --git a/src/actions/domain-blocks.ts b/src/actions/domain-blocks.ts
index 81a5d73bf..3aa4f6c55 100644
--- a/src/actions/domain-blocks.ts
+++ b/src/actions/domain-blocks.ts
@@ -1,11 +1,11 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import type { EntityStore } from 'soapbox/entity-store/types';
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { EntityStore } from 'soapbox/entity-store/types.ts';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const DOMAIN_BLOCK_REQUEST = 'DOMAIN_BLOCK_REQUEST';
 const DOMAIN_BLOCK_SUCCESS = 'DOMAIN_BLOCK_SUCCESS';
diff --git a/src/actions/email-list.ts b/src/actions/email-list.ts
index eeac0ed47..8f80f96d5 100644
--- a/src/actions/email-list.ts
+++ b/src/actions/email-list.ts
@@ -1,6 +1,6 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const getSubscribersCsv = () =>
   (dispatch: any, getState: () => RootState) =>
diff --git a/src/actions/emoji-reacts.ts b/src/actions/emoji-reacts.ts
index 1e8991824..0ebe21c8e 100644
--- a/src/actions/emoji-reacts.ts
+++ b/src/actions/emoji-reacts.ts
@@ -1,14 +1,14 @@
 import { List as ImmutableList } from 'immutable';
 
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedAccounts, importFetchedStatus } from './importer';
-import { favourite, unfavourite } from './interactions';
+import { importFetchedAccounts, importFetchedStatus } from './importer/index.ts';
+import { favourite, unfavourite } from './interactions.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, EmojiReaction, Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, EmojiReaction, Status } from 'soapbox/types/entities.ts';
 
 const EMOJI_REACT_REQUEST = 'EMOJI_REACT_REQUEST';
 const EMOJI_REACT_SUCCESS = 'EMOJI_REACT_SUCCESS';
diff --git a/src/actions/emojis.ts b/src/actions/emojis.ts
index 2a959fcc3..88e73a8cf 100644
--- a/src/actions/emojis.ts
+++ b/src/actions/emojis.ts
@@ -1,7 +1,7 @@
-import { saveSettings } from './settings';
+import { saveSettings } from './settings.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
-import type { AppDispatch } from 'soapbox/store';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 const EMOJI_CHOOSE = 'EMOJI_CHOOSE';
 
diff --git a/src/actions/events.ts b/src/actions/events.ts
index 875b487f6..9026ac710 100644
--- a/src/actions/events.ts
+++ b/src/actions/events.ts
@@ -1,20 +1,20 @@
 import { defineMessages, IntlShape } from 'react-intl';
 
-import api, { getLinks } from 'soapbox/api';
-import toast from 'soapbox/toast';
+import api, { getLinks } from 'soapbox/api/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import { importFetchedAccounts, importFetchedStatus, importFetchedStatuses } from './importer';
-import { uploadFile } from './media';
-import { closeModal, openModal } from './modals';
+import { importFetchedAccounts, importFetchedStatus, importFetchedStatuses } from './importer/index.ts';
+import { uploadFile } from './media.ts';
+import { closeModal, openModal } from './modals.ts';
 import {
   STATUS_FETCH_SOURCE_FAIL,
   STATUS_FETCH_SOURCE_REQUEST,
   STATUS_FETCH_SOURCE_SUCCESS,
-} from './statuses';
+} from './statuses.ts';
 
-import type { ReducerStatus } from 'soapbox/reducers/statuses';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { ReducerStatus } from 'soapbox/reducers/statuses.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const LOCATION_SEARCH_REQUEST = 'LOCATION_SEARCH_REQUEST' as const;
 const LOCATION_SEARCH_SUCCESS = 'LOCATION_SEARCH_SUCCESS' as const;
diff --git a/src/actions/export-data.ts b/src/actions/export-data.ts
index b5bf805de..45c1065e4 100644
--- a/src/actions/export-data.ts
+++ b/src/actions/export-data.ts
@@ -1,11 +1,11 @@
 import { defineMessages } from 'react-intl';
 
-import api, { getLinks } from 'soapbox/api';
-import { normalizeAccount } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
+import api, { getLinks } from 'soapbox/api/index.ts';
+import { normalizeAccount } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 import type { AxiosResponse } from 'axios';
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const EXPORT_FOLLOWS_REQUEST = 'EXPORT_FOLLOWS_REQUEST';
 export const EXPORT_FOLLOWS_SUCCESS = 'EXPORT_FOLLOWS_SUCCESS';
diff --git a/src/actions/external-auth.ts b/src/actions/external-auth.ts
index 45d288bc5..414c67886 100644
--- a/src/actions/external-auth.ts
+++ b/src/actions/external-auth.ts
@@ -6,17 +6,17 @@
  * @see module:soapbox/actions/oauth
  */
 
-import { createApp } from 'soapbox/actions/apps';
-import { authLoggedIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
-import { obtainOAuthToken } from 'soapbox/actions/oauth';
-import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance';
-import { parseBaseURL } from 'soapbox/utils/auth';
-import sourceCode from 'soapbox/utils/code';
-import { getInstanceScopes } from 'soapbox/utils/scopes';
+import { createApp } from 'soapbox/actions/apps.ts';
+import { authLoggedIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth.ts';
+import { obtainOAuthToken } from 'soapbox/actions/oauth.ts';
+import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance.ts';
+import { parseBaseURL } from 'soapbox/utils/auth.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { getInstanceScopes } from 'soapbox/utils/scopes.ts';
 
-import { baseClient } from '../api';
+import { baseClient } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const fetchExternalInstance = (baseURL?: string) => {
   return baseClient(null, baseURL)
diff --git a/src/actions/familiar-followers.ts b/src/actions/familiar-followers.ts
index c23a674ba..c1a838ad6 100644
--- a/src/actions/familiar-followers.ts
+++ b/src/actions/familiar-followers.ts
@@ -1,11 +1,11 @@
-import { AppDispatch, RootState } from 'soapbox/store';
+import { AppDispatch, RootState } from 'soapbox/store.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 export const FAMILIAR_FOLLOWERS_FETCH_REQUEST = 'FAMILIAR_FOLLOWERS_FETCH_REQUEST';
 export const FAMILIAR_FOLLOWERS_FETCH_SUCCESS = 'FAMILIAR_FOLLOWERS_FETCH_SUCCESS';
diff --git a/src/actions/favourites.ts b/src/actions/favourites.ts
index cfd6e1f15..d4240064c 100644
--- a/src/actions/favourites.ts
+++ b/src/actions/favourites.ts
@@ -1,11 +1,11 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const FAVOURITED_STATUSES_FETCH_REQUEST = 'FAVOURITED_STATUSES_FETCH_REQUEST';
 const FAVOURITED_STATUSES_FETCH_SUCCESS = 'FAVOURITED_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/filters.ts b/src/actions/filters.ts
index fe7026876..cec439816 100644
--- a/src/actions/filters.ts
+++ b/src/actions/filters.ts
@@ -1,12 +1,12 @@
 import { defineMessages } from 'react-intl';
 
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST';
 const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS';
diff --git a/src/actions/groups.ts b/src/actions/groups.ts
index 4fdb6c7d6..0b11d8c58 100644
--- a/src/actions/groups.ts
+++ b/src/actions/groups.ts
@@ -1,13 +1,13 @@
-import { deleteEntities } from 'soapbox/entity-store/actions';
+import { deleteEntities } from 'soapbox/entity-store/actions.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedGroups, importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedGroups, importFetchedAccounts } from './importer/index.ts';
 
-import type { GroupRole } from 'soapbox/reducers/group-memberships';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { GroupRole } from 'soapbox/reducers/group-memberships.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const GROUP_CREATE_REQUEST = 'GROUP_CREATE_REQUEST';
 const GROUP_CREATE_SUCCESS = 'GROUP_CREATE_SUCCESS';
diff --git a/src/actions/history.ts b/src/actions/history.ts
index cf975cf42..95f71a929 100644
--- a/src/actions/history.ts
+++ b/src/actions/history.ts
@@ -1,9 +1,9 @@
-import api from 'soapbox/api';
+import api from 'soapbox/api/index.ts';
 
-import { importFetchedAccounts } from './importer';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const HISTORY_FETCH_REQUEST = 'HISTORY_FETCH_REQUEST';
 const HISTORY_FETCH_SUCCESS = 'HISTORY_FETCH_SUCCESS';
diff --git a/src/actions/import-data.ts b/src/actions/import-data.ts
index c518d1a16..0aa5ebaa4 100644
--- a/src/actions/import-data.ts
+++ b/src/actions/import-data.ts
@@ -1,10 +1,10 @@
 import { defineMessages } from 'react-intl';
 
-import toast from 'soapbox/toast';
+import toast from 'soapbox/toast.tsx';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const IMPORT_FOLLOWS_REQUEST = 'IMPORT_FOLLOWS_REQUEST';
 export const IMPORT_FOLLOWS_SUCCESS = 'IMPORT_FOLLOWS_SUCCESS';
diff --git a/src/actions/importer/index.ts b/src/actions/importer/index.ts
index 5afb880c0..07bddfaed 100644
--- a/src/actions/importer/index.ts
+++ b/src/actions/importer/index.ts
@@ -1,12 +1,12 @@
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { Group, accountSchema, groupSchema } from 'soapbox/schemas';
-import { filteredArray } from 'soapbox/schemas/utils';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { Group, accountSchema, groupSchema } from 'soapbox/schemas/index.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
 
-import { getSettings } from '../settings';
+import { getSettings } from '../settings.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ACCOUNT_IMPORT  = 'ACCOUNT_IMPORT';
 const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT';
diff --git a/src/actions/instance.ts b/src/actions/instance.ts
index dd17af6ef..9adc7bc1d 100644
--- a/src/actions/instance.ts
+++ b/src/actions/instance.ts
@@ -1,11 +1,11 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
-import { instanceV1Schema, instanceV2Schema } from 'soapbox/schemas/instance';
-import { RootState } from 'soapbox/store';
-import { getAuthUserUrl, getMeUrl } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import { instanceV1Schema, instanceV2Schema } from 'soapbox/schemas/instance.ts';
+import { RootState } from 'soapbox/store.ts';
+import { getAuthUserUrl, getMeUrl } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
 /** Figure out the appropriate instance to fetch depending on the state */
 export const getHost = (state: RootState) => {
diff --git a/src/actions/interactions.ts b/src/actions/interactions.ts
index b18b8f3a2..86472d35a 100644
--- a/src/actions/interactions.ts
+++ b/src/actions/interactions.ts
@@ -1,18 +1,18 @@
 import { defineMessages } from 'react-intl';
 
-import toast, { type IToastOptions } from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import toast, { type IToastOptions } from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedStatus } from './importer';
-import { openModal } from './modals';
-import { expandGroupFeaturedTimeline } from './timelines';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts, importFetchedStatus } from './importer/index.ts';
+import { openModal } from './modals.ts';
+import { expandGroupFeaturedTimeline } from './timelines.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { Account as AccountEntity, APIEntity, Group, Status as StatusEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { Account as AccountEntity, APIEntity, Group, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const REBLOG_REQUEST = 'REBLOG_REQUEST';
 const REBLOG_SUCCESS = 'REBLOG_SUCCESS';
diff --git a/src/actions/lists.ts b/src/actions/lists.ts
index e7c6604f9..0df09c068 100644
--- a/src/actions/lists.ts
+++ b/src/actions/lists.ts
@@ -1,13 +1,13 @@
-import { selectAccount } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedAccounts } from './importer';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const LIST_FETCH_REQUEST = 'LIST_FETCH_REQUEST';
 const LIST_FETCH_SUCCESS = 'LIST_FETCH_SUCCESS';
diff --git a/src/actions/markers.ts b/src/actions/markers.ts
index 96ba12349..33dc1f6c4 100644
--- a/src/actions/markers.ts
+++ b/src/actions/markers.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const MARKER_FETCH_REQUEST = 'MARKER_FETCH_REQUEST';
 const MARKER_FETCH_SUCCESS = 'MARKER_FETCH_SUCCESS';
diff --git a/src/actions/me.ts b/src/actions/me.ts
index 2933da913..47641594f 100644
--- a/src/actions/me.ts
+++ b/src/actions/me.ts
@@ -1,17 +1,17 @@
-import { selectAccount } from 'soapbox/selectors';
-import { setSentryAccount } from 'soapbox/sentry';
-import KVStore from 'soapbox/storage/kv-store';
-import { getAuthUserId, getAuthUserUrl } from 'soapbox/utils/auth';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { setSentryAccount } from 'soapbox/sentry.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import { getAuthUserId, getAuthUserUrl } from 'soapbox/utils/auth.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { loadCredentials } from './auth';
-import { importFetchedAccount } from './importer';
+import { loadCredentials } from './auth.ts';
+import { importFetchedAccount } from './importer/index.ts';
 
 import type { RawAxiosRequestHeaders } from 'axios';
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ME_FETCH_REQUEST = 'ME_FETCH_REQUEST' as const;
 const ME_FETCH_SUCCESS = 'ME_FETCH_SUCCESS' as const;
diff --git a/src/actions/media.ts b/src/actions/media.ts
index acb48a9e5..f009854c4 100644
--- a/src/actions/media.ts
+++ b/src/actions/media.ts
@@ -1,15 +1,15 @@
 import { defineMessages, type IntlShape } from 'react-intl';
 
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
-import { formatBytes, getVideoDuration } from 'soapbox/utils/media';
-import resizeImage from 'soapbox/utils/resize-image';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
+import { formatBytes, getVideoDuration } from 'soapbox/utils/media.ts';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
diff --git a/src/actions/mfa.ts b/src/actions/mfa.ts
index e4c51203d..2320e4d37 100644
--- a/src/actions/mfa.ts
+++ b/src/actions/mfa.ts
@@ -1,6 +1,6 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const MFA_FETCH_REQUEST = 'MFA_FETCH_REQUEST';
 const MFA_FETCH_SUCCESS = 'MFA_FETCH_SUCCESS';
diff --git a/src/actions/modals.ts b/src/actions/modals.ts
index 20ae13f0a..a1d6af4e8 100644
--- a/src/actions/modals.ts
+++ b/src/actions/modals.ts
@@ -1,6 +1,6 @@
-import { AppDispatch } from 'soapbox/store';
+import { AppDispatch } from 'soapbox/store.ts';
 
-import type { ModalType } from 'soapbox/features/ui/components/modal-root';
+import type { ModalType } from 'soapbox/features/ui/components/modal-root.tsx';
 
 export const MODAL_OPEN  = 'MODAL_OPEN';
 export const MODAL_CLOSE = 'MODAL_CLOSE';
diff --git a/src/actions/moderation.tsx b/src/actions/moderation.tsx
index e461fe011..32d61aa38 100644
--- a/src/actions/moderation.tsx
+++ b/src/actions/moderation.tsx
@@ -4,16 +4,16 @@ import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
 import userOffIcon from '@tabler/icons/outline/user-off.svg';
 import { defineMessages, IntlShape } from 'react-intl';
 
-import { fetchAccountByUsername } from 'soapbox/actions/accounts';
-import { deactivateUsers, deleteUser, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin';
-import { openModal } from 'soapbox/actions/modals';
-import OutlineBox from 'soapbox/components/outline-box';
-import { Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { selectAccount } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
+import { fetchAccountByUsername } from 'soapbox/actions/accounts.ts';
+import { deactivateUsers, deleteUser, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import OutlineBox from 'soapbox/components/outline-box.tsx';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const messages = defineMessages({
   deactivateUserHeading: { id: 'confirmations.admin.deactivate_user.heading', defaultMessage: 'Deactivate @{acct}' },
diff --git a/src/actions/mrf.ts b/src/actions/mrf.ts
index 509bdb8fc..25e2db720 100644
--- a/src/actions/mrf.ts
+++ b/src/actions/mrf.ts
@@ -1,11 +1,11 @@
 import { Set as ImmutableSet } from 'immutable';
 
-import ConfigDB from 'soapbox/utils/config-db';
+import ConfigDB from 'soapbox/utils/config-db.ts';
 
-import { fetchConfig, updateConfig } from './admin';
+import { fetchConfig, updateConfig } from './admin.ts';
 
-import type { MRFSimple } from 'soapbox/schemas/pleroma';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { MRFSimple } from 'soapbox/schemas/pleroma.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const simplePolicyMerge = (simplePolicy: MRFSimple, host: string, restrictions: Record<string, any>) => {
   const entries = Object.entries(simplePolicy).map(([key, hosts]) => {
diff --git a/src/actions/mutes.ts b/src/actions/mutes.ts
index 205ee4677..350fd93e8 100644
--- a/src/actions/mutes.ts
+++ b/src/actions/mutes.ts
@@ -1,8 +1,8 @@
-import { openModal } from './modals';
+import { openModal } from './modals.ts';
 
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch } from 'soapbox/store';
-import type { Account as AccountEntity } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch } from 'soapbox/store.ts';
+import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
 
 const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL';
 const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS';
diff --git a/src/actions/nostr.ts b/src/actions/nostr.ts
index 97fbb2af8..c6d7c944d 100644
--- a/src/actions/nostr.ts
+++ b/src/actions/nostr.ts
@@ -1,13 +1,13 @@
 import { NostrSigner, NRelay1, NSecSigner } from '@nostrify/nostrify';
 import { generateSecretKey } from 'nostr-tools';
 
-import { NBunker } from 'soapbox/features/nostr/NBunker';
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore';
-import { type AppDispatch } from 'soapbox/store';
+import { NBunker } from 'soapbox/features/nostr/NBunker.ts';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore.ts';
+import { type AppDispatch } from 'soapbox/store.ts';
 
-import { authLoggedIn, verifyCredentials } from './auth';
-import { obtainOAuthToken } from './oauth';
+import { authLoggedIn, verifyCredentials } from './auth.ts';
+import { obtainOAuthToken } from './oauth.ts';
 
 const NOSTR_PUBKEY_SET = 'NOSTR_PUBKEY_SET';
 
diff --git a/src/actions/notifications.test.ts b/src/actions/notifications.test.ts
index 44ce0cb9f..1f67081dd 100644
--- a/src/actions/notifications.test.ts
+++ b/src/actions/notifications.test.ts
@@ -1,11 +1,11 @@
 import { OrderedMap as ImmutableOrderedMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeNotification } from 'soapbox/normalizers';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeNotification } from 'soapbox/normalizers/index.ts';
 
-import { markReadNotifications } from './notifications';
+import { markReadNotifications } from './notifications.ts';
 
 describe('markReadNotifications()', () => {
   it('fires off marker when top notification is newer than lastRead', async() => {
diff --git a/src/actions/notifications.ts b/src/actions/notifications.ts
index c6ce8043a..6ecf8023b 100644
--- a/src/actions/notifications.ts
+++ b/src/actions/notifications.ts
@@ -2,28 +2,28 @@ import IntlMessageFormat from 'intl-messageformat';
 import 'intl-pluralrules';
 import { defineMessages } from 'react-intl';
 
-import api, { getLinks } from 'soapbox/api';
-import { getFilters, regexFromFilters } from 'soapbox/selectors';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { compareId } from 'soapbox/utils/comparators';
-import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features';
-import { unescapeHTML } from 'soapbox/utils/html';
-import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification';
-import { joinPublicPath } from 'soapbox/utils/static';
+import api, { getLinks } from 'soapbox/api/index.ts';
+import { getFilters, regexFromFilters } from 'soapbox/selectors/index.ts';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { compareId } from 'soapbox/utils/comparators.ts';
+import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
+import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification.ts';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
-import { fetchRelationships } from './accounts';
-import { fetchGroupRelationships } from './groups';
+import { fetchRelationships } from './accounts.ts';
+import { fetchGroupRelationships } from './groups.ts';
 import {
   importFetchedAccount,
   importFetchedAccounts,
   importFetchedStatus,
   importFetchedStatuses,
-} from './importer';
-import { saveMarker } from './markers';
-import { getSettings, saveSettings } from './settings';
+} from './importer/index.ts';
+import { saveMarker } from './markers.ts';
+import { getSettings, saveSettings } from './settings.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
 
 const NOTIFICATIONS_UPDATE      = 'NOTIFICATIONS_UPDATE';
 const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';
diff --git a/src/actions/oauth.ts b/src/actions/oauth.ts
index 4147c9409..10b5c1076 100644
--- a/src/actions/oauth.ts
+++ b/src/actions/oauth.ts
@@ -6,11 +6,11 @@
  * @see module:soapbox/actions/auth
  */
 
-import { getBaseURL } from 'soapbox/utils/state';
+import { getBaseURL } from 'soapbox/utils/state.ts';
 
-import { baseClient } from '../api';
+import { baseClient } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 export const OAUTH_TOKEN_CREATE_REQUEST = 'OAUTH_TOKEN_CREATE_REQUEST';
 export const OAUTH_TOKEN_CREATE_SUCCESS = 'OAUTH_TOKEN_CREATE_SUCCESS';
diff --git a/src/actions/onboarding.test.ts b/src/actions/onboarding.test.ts
index 7d2fcdb26..c52877695 100644
--- a/src/actions/onboarding.test.ts
+++ b/src/actions/onboarding.test.ts
@@ -1,8 +1,8 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { mockStore, mockWindowProperty, rootState } from 'soapbox/jest/test-helpers';
+import { mockStore, mockWindowProperty, rootState } from 'soapbox/jest/test-helpers.tsx';
 
-import { checkOnboardingStatus, startOnboarding, endOnboarding } from './onboarding';
+import { checkOnboardingStatus, startOnboarding, endOnboarding } from './onboarding.ts';
 
 describe('checkOnboarding()', () => {
   let mockGetItem: any;
diff --git a/src/actions/patron.ts b/src/actions/patron.ts
index 0e164462f..4a3d5eade 100644
--- a/src/actions/patron.ts
+++ b/src/actions/patron.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const PATRON_INSTANCE_FETCH_REQUEST = 'PATRON_INSTANCE_FETCH_REQUEST';
 const PATRON_INSTANCE_FETCH_SUCCESS = 'PATRON_INSTANCE_FETCH_SUCCESS';
diff --git a/src/actions/pin-statuses.ts b/src/actions/pin-statuses.ts
index c2a5115cd..a09a71fa9 100644
--- a/src/actions/pin-statuses.ts
+++ b/src/actions/pin-statuses.ts
@@ -1,11 +1,11 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const PINNED_STATUSES_FETCH_REQUEST = 'PINNED_STATUSES_FETCH_REQUEST';
 const PINNED_STATUSES_FETCH_SUCCESS = 'PINNED_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/polls.ts b/src/actions/polls.ts
index 64fb65320..57a83e08e 100644
--- a/src/actions/polls.ts
+++ b/src/actions/polls.ts
@@ -1,9 +1,9 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedPoll } from './importer';
+import { importFetchedPoll } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST';
 const POLL_VOTE_SUCCESS = 'POLL_VOTE_SUCCESS';
diff --git a/src/actions/preload.test.ts b/src/actions/preload.test.ts
index 96cd9bbf6..2ecf454e1 100644
--- a/src/actions/preload.test.ts
+++ b/src/actions/preload.test.ts
@@ -1,14 +1,14 @@
 import { describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore } from 'soapbox/jest/test-helpers.tsx';
 
-import { VERIFY_CREDENTIALS_REQUEST } from './auth';
-import { ACCOUNTS_IMPORT } from './importer';
+import { VERIFY_CREDENTIALS_REQUEST } from './auth.ts';
+import { ACCOUNTS_IMPORT } from './importer/index.ts';
 import {
   MASTODON_PRELOAD_IMPORT,
   preloadMastodon,
-} from './preload';
+} from './preload.ts';
 
 describe('preloadMastodon()', () => {
   it('creates the expected actions', async () => {
diff --git a/src/actions/preload.ts b/src/actions/preload.ts
index 07b0aa0bb..f923b467f 100644
--- a/src/actions/preload.ts
+++ b/src/actions/preload.ts
@@ -1,9 +1,9 @@
 import mapValues from 'lodash/mapValues';
 
-import { verifyCredentials } from './auth';
-import { importFetchedAccounts } from './importer';
+import { verifyCredentials } from './auth.ts';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 const PLEROMA_PRELOAD_IMPORT  = 'PLEROMA_PRELOAD_IMPORT';
 const MASTODON_PRELOAD_IMPORT = 'MASTODON_PRELOAD_IMPORT';
diff --git a/src/actions/push-notifications/registerer.ts b/src/actions/push-notifications/registerer.ts
index f3e4d4a6f..a6983718d 100644
--- a/src/actions/push-notifications/registerer.ts
+++ b/src/actions/push-notifications/registerer.ts
@@ -1,8 +1,8 @@
 /* eslint-disable compat/compat */
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { MastodonClient } from 'soapbox/api/MastodonClient';
-import { WebPushSubscription, webPushSubscriptionSchema } from 'soapbox/schemas/web-push';
-import { decodeBase64Url } from 'soapbox/utils/base64';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { MastodonClient } from 'soapbox/api/MastodonClient.ts';
+import { WebPushSubscription, webPushSubscriptionSchema } from 'soapbox/schemas/web-push.ts';
+import { decodeBase64Url } from 'soapbox/utils/base64.ts';
 
 // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
 const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager' in window && 'getKey' in PushSubscription.prototype);
diff --git a/src/actions/remote-timeline.ts b/src/actions/remote-timeline.ts
index ac1277aec..0f2640a89 100644
--- a/src/actions/remote-timeline.ts
+++ b/src/actions/remote-timeline.ts
@@ -1,7 +1,7 @@
-import { getSettings, changeSetting } from 'soapbox/actions/settings';
+import { getSettings, changeSetting } from 'soapbox/actions/settings.ts';
 
 import type { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const getPinnedHosts = (state: RootState) => {
   const settings = getSettings(state);
diff --git a/src/actions/reports.ts b/src/actions/reports.ts
index 662b24b3d..5a98d0881 100644
--- a/src/actions/reports.ts
+++ b/src/actions/reports.ts
@@ -1,10 +1,10 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import { openModal } from './modals';
+import { openModal } from './modals.ts';
 
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { ChatMessage, Group, Status } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { ChatMessage, Group, Status } from 'soapbox/types/entities.ts';
 
 const REPORT_INIT   = 'REPORT_INIT';
 const REPORT_CANCEL = 'REPORT_CANCEL';
diff --git a/src/actions/scheduled-statuses.ts b/src/actions/scheduled-statuses.ts
index b7cf112e9..7bd8d0331 100644
--- a/src/actions/scheduled-statuses.ts
+++ b/src/actions/scheduled-statuses.ts
@@ -1,9 +1,9 @@
-import { getFeatures } from 'soapbox/utils/features';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SCHEDULED_STATUSES_FETCH_REQUEST = 'SCHEDULED_STATUSES_FETCH_REQUEST';
 const SCHEDULED_STATUSES_FETCH_SUCCESS = 'SCHEDULED_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/search.ts b/src/actions/search.ts
index 8810605eb..82a96c009 100644
--- a/src/actions/search.ts
+++ b/src/actions/search.ts
@@ -1,11 +1,11 @@
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedStatuses } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts, importFetchedStatuses } from './importer/index.ts';
 
-import type { SearchFilter } from 'soapbox/reducers/search';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { SearchFilter } from 'soapbox/reducers/search.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SEARCH_CHANGE        = 'SEARCH_CHANGE';
 const SEARCH_CLEAR         = 'SEARCH_CLEAR';
diff --git a/src/actions/security.ts b/src/actions/security.ts
index 4448104b7..683a3a6e6 100644
--- a/src/actions/security.ts
+++ b/src/actions/security.ts
@@ -4,16 +4,16 @@
  * @see module:soapbox/actions/auth
  */
 
-import toast from 'soapbox/toast';
-import { getLoggedInAccount } from 'soapbox/utils/auth';
-import { parseVersion, TRUTHSOCIAL } from 'soapbox/utils/features';
-import { normalizeUsername } from 'soapbox/utils/input';
+import toast from 'soapbox/toast.tsx';
+import { getLoggedInAccount } from 'soapbox/utils/auth.ts';
+import { parseVersion, TRUTHSOCIAL } from 'soapbox/utils/features.ts';
+import { normalizeUsername } from 'soapbox/utils/input.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { AUTH_LOGGED_OUT, messages } from './auth';
+import { AUTH_LOGGED_OUT, messages } from './auth.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const FETCH_TOKENS_REQUEST = 'FETCH_TOKENS_REQUEST';
 const FETCH_TOKENS_SUCCESS = 'FETCH_TOKENS_SUCCESS';
diff --git a/src/actions/settings.ts b/src/actions/settings.ts
index e05771fdc..50204e0f4 100644
--- a/src/actions/settings.ts
+++ b/src/actions/settings.ts
@@ -2,12 +2,12 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { defineMessage } from 'react-intl';
 import { createSelector } from 'reselect';
 
-import { patchMe } from 'soapbox/actions/me';
-import messages from 'soapbox/messages';
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { patchMe } from 'soapbox/actions/me.ts';
+import messages from 'soapbox/messages.ts';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const SETTING_CHANGE = 'SETTING_CHANGE' as const;
 const SETTING_SAVE   = 'SETTING_SAVE' as const;
diff --git a/src/actions/soapbox.ts b/src/actions/soapbox.ts
index 44552e38e..31e7679b1 100644
--- a/src/actions/soapbox.ts
+++ b/src/actions/soapbox.ts
@@ -1,15 +1,15 @@
 import { createSelector } from 'reselect';
 
-import { getHost } from 'soapbox/actions/instance';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import KVStore from 'soapbox/storage/kv-store';
-import { removeVS16s } from 'soapbox/utils/emoji';
-import { getFeatures } from 'soapbox/utils/features';
+import { getHost } from 'soapbox/actions/instance.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import { removeVS16s } from 'soapbox/utils/emoji.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { staticClient } from '../api';
+import api, { staticClient } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SOAPBOX_CONFIG_REQUEST_SUCCESS = 'SOAPBOX_CONFIG_REQUEST_SUCCESS';
 const SOAPBOX_CONFIG_REQUEST_FAIL    = 'SOAPBOX_CONFIG_REQUEST_FAIL';
diff --git a/src/actions/status-quotes.test.ts b/src/actions/status-quotes.test.ts
index ca7d4f764..b11085fec 100644
--- a/src/actions/status-quotes.test.ts
+++ b/src/actions/status-quotes.test.ts
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { StatusListRecord } from 'soapbox/reducers/status-lists';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { StatusListRecord } from 'soapbox/reducers/status-lists.ts';
 
-import { fetchStatusQuotes, expandStatusQuotes } from './status-quotes';
+import { fetchStatusQuotes, expandStatusQuotes } from './status-quotes.ts';
 
 const status = {
   account: {
diff --git a/src/actions/status-quotes.ts b/src/actions/status-quotes.ts
index 9dab8df46..2bb83a721 100644
--- a/src/actions/status-quotes.ts
+++ b/src/actions/status-quotes.ts
@@ -1,8 +1,8 @@
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 export const STATUS_QUOTES_FETCH_REQUEST = 'STATUS_QUOTES_FETCH_REQUEST';
 export const STATUS_QUOTES_FETCH_SUCCESS = 'STATUS_QUOTES_FETCH_SUCCESS';
diff --git a/src/actions/statuses.test.ts b/src/actions/statuses.test.ts
index 3c72ef7ab..641b9d48d 100644
--- a/src/actions/statuses.test.ts
+++ b/src/actions/statuses.test.ts
@@ -1,12 +1,12 @@
 import { fromJS, Map as ImmutableMap } from 'immutable';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { STATUSES_IMPORT } from 'soapbox/actions/importer';
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeStatus } from 'soapbox/normalizers/status';
+import { STATUSES_IMPORT } from 'soapbox/actions/importer/index.ts';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
 
-import { deleteStatus, fetchContext } from './statuses';
+import { deleteStatus, fetchContext } from './statuses.ts';
 
 describe('fetchContext()', () => {
   it('handles Mitra context', async () => {
diff --git a/src/actions/statuses.ts b/src/actions/statuses.ts
index db1bfdb47..8d00cf00b 100644
--- a/src/actions/statuses.ts
+++ b/src/actions/statuses.ts
@@ -1,17 +1,17 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
-import { shouldHaveCard } from 'soapbox/utils/status';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
+import { shouldHaveCard } from 'soapbox/utils/status.ts';
 
-import api, { getNextLink } from '../api';
+import api, { getNextLink } from '../api/index.ts';
 
-import { setComposeToStatus } from './compose-status';
-import { fetchGroupRelationships } from './groups';
-import { importFetchedStatus, importFetchedStatuses } from './importer';
-import { openModal } from './modals';
-import { deleteFromTimelines } from './timelines';
+import { setComposeToStatus } from './compose-status.ts';
+import { fetchGroupRelationships } from './groups.ts';
+import { importFetchedStatus, importFetchedStatuses } from './importer/index.ts';
+import { openModal } from './modals.ts';
+import { deleteFromTimelines } from './timelines.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
 
 const STATUS_CREATE_REQUEST = 'STATUS_CREATE_REQUEST';
 const STATUS_CREATE_SUCCESS = 'STATUS_CREATE_SUCCESS';
diff --git a/src/actions/streaming.ts b/src/actions/streaming.ts
index 925832265..23b426cd8 100644
--- a/src/actions/streaming.ts
+++ b/src/actions/streaming.ts
@@ -1,33 +1,33 @@
-import { getLocale, getSettings } from 'soapbox/actions/settings';
-import { updateReactions } from 'soapbox/api/hooks/announcements/useAnnouncements';
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { selectEntity } from 'soapbox/entity-store/selectors';
-import messages from 'soapbox/messages';
-import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { announcementSchema, type Announcement, type Relationship } from 'soapbox/schemas';
-import { getUnreadChatsCount, updateChatListItem, updateChatMessage } from 'soapbox/utils/chats';
-import { removePageItem } from 'soapbox/utils/queries';
-import { play, soundCache } from 'soapbox/utils/sounds';
+import { getLocale, getSettings } from 'soapbox/actions/settings.ts';
+import { updateReactions } from 'soapbox/api/hooks/announcements/useAnnouncements.ts';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { selectEntity } from 'soapbox/entity-store/selectors.ts';
+import messages from 'soapbox/messages.ts';
+import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { announcementSchema, type Announcement, type Relationship } from 'soapbox/schemas/index.ts';
+import { getUnreadChatsCount, updateChatListItem, updateChatMessage } from 'soapbox/utils/chats.ts';
+import { removePageItem } from 'soapbox/utils/queries.ts';
+import { play, soundCache } from 'soapbox/utils/sounds.ts';
 
-import { connectStream } from '../stream';
+import { connectStream } from '../stream.ts';
 
-import { updateConversations } from './conversations';
-import { fetchFilters } from './filters';
-import { MARKER_FETCH_SUCCESS } from './markers';
-import { updateNotificationsQueue } from './notifications';
-import { updateStatus } from './statuses';
+import { updateConversations } from './conversations.ts';
+import { fetchFilters } from './filters.ts';
+import { MARKER_FETCH_SUCCESS } from './markers.ts';
+import { updateNotificationsQueue } from './notifications.ts';
+import { updateStatus } from './statuses.ts';
 import {
   // deleteFromTimelines,
   connectTimeline,
   disconnectTimeline,
   processTimelineUpdate,
-} from './timelines';
+} from './timelines.ts';
 
-import type { IStatContext } from 'soapbox/contexts/stat-context';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Chat } from 'soapbox/types/entities';
+import type { IStatContext } from 'soapbox/contexts/stat-context.tsx';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Chat } from 'soapbox/types/entities.ts';
 
 const STREAMING_CHAT_UPDATE = 'STREAMING_CHAT_UPDATE';
 
diff --git a/src/actions/suggestions.ts b/src/actions/suggestions.ts
index 4c2584856..5065100b6 100644
--- a/src/actions/suggestions.ts
+++ b/src/actions/suggestions.ts
@@ -1,14 +1,14 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
-import { insertSuggestionsIntoTimeline } from './timelines';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts } from './importer/index.ts';
+import { insertSuggestionsIntoTimeline } from './timelines.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST';
 const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS';
diff --git a/src/actions/tags.ts b/src/actions/tags.ts
index ee3289570..3873bc329 100644
--- a/src/actions/tags.ts
+++ b/src/actions/tags.ts
@@ -1,7 +1,7 @@
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const HASHTAG_FETCH_REQUEST = 'HASHTAG_FETCH_REQUEST';
 const HASHTAG_FETCH_SUCCESS = 'HASHTAG_FETCH_SUCCESS';
diff --git a/src/actions/timelines.ts b/src/actions/timelines.ts
index a6cd2b139..4b7aa6ce1 100644
--- a/src/actions/timelines.ts
+++ b/src/actions/timelines.ts
@@ -1,16 +1,16 @@
 import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { normalizeStatus } from 'soapbox/normalizers';
-import { shouldFilter } from 'soapbox/utils/timelines';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { shouldFilter } from 'soapbox/utils/timelines.ts';
 
-import api, { getNextLink, getPrevLink } from '../api';
+import api, { getNextLink, getPrevLink } from '../api/index.ts';
 
-import { fetchGroupRelationships } from './groups';
-import { importFetchedStatus, importFetchedStatuses } from './importer';
+import { fetchGroupRelationships } from './groups.ts';
+import { importFetchedStatus, importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
 
 const TIMELINE_UPDATE = 'TIMELINE_UPDATE' as const;
 const TIMELINE_DELETE = 'TIMELINE_DELETE' as const;
diff --git a/src/actions/trending-statuses.ts b/src/actions/trending-statuses.ts
index c6a26e316..e0075b019 100644
--- a/src/actions/trending-statuses.ts
+++ b/src/actions/trending-statuses.ts
@@ -1,11 +1,11 @@
-import { APIEntity } from 'soapbox/types/entities';
-import { getFeatures } from 'soapbox/utils/features';
+import { APIEntity } from 'soapbox/types/entities.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const TRENDING_STATUSES_FETCH_REQUEST = 'TRENDING_STATUSES_FETCH_REQUEST';
 const TRENDING_STATUSES_FETCH_SUCCESS = 'TRENDING_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/trends.ts b/src/actions/trends.ts
index 6eeb32c38..f13e063cf 100644
--- a/src/actions/trends.ts
+++ b/src/actions/trends.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const TRENDS_FETCH_REQUEST = 'TRENDS_FETCH_REQUEST';
 const TRENDS_FETCH_SUCCESS = 'TRENDS_FETCH_SUCCESS';
diff --git a/src/api/MastodonClient.ts b/src/api/MastodonClient.ts
index 42263d517..a0d084349 100644
--- a/src/api/MastodonClient.ts
+++ b/src/api/MastodonClient.ts
@@ -1,4 +1,4 @@
-import { HTTPError } from './HTTPError';
+import { HTTPError } from './HTTPError.ts';
 
 interface Opts {
   searchParams?: URLSearchParams | Record<string, string | number | boolean>;
diff --git a/src/api/hooks/accounts/useAccount.ts b/src/api/hooks/accounts/useAccount.ts
index 9db7ec217..5876e3fc5 100644
--- a/src/api/hooks/accounts/useAccount.ts
+++ b/src/api/hooks/accounts/useAccount.ts
@@ -1,12 +1,12 @@
 import { useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures, useLoggedIn } from 'soapbox/hooks';
-import { type Account, accountSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useFeatures, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { type Account, accountSchema } from 'soapbox/schemas/index.ts';
 
-import { useRelationship } from './useRelationship';
+import { useRelationship } from './useRelationship.ts';
 
 interface UseAccountOpts {
   withRelationship?: boolean;
diff --git a/src/api/hooks/accounts/useAccountList.ts b/src/api/hooks/accounts/useAccountList.ts
index ec769224b..541227b1f 100644
--- a/src/api/hooks/accounts/useAccountList.ts
+++ b/src/api/hooks/accounts/useAccountList.ts
@@ -1,11 +1,11 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { Account, accountSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { Account, accountSchema } from 'soapbox/schemas/index.ts';
 
-import { useRelationships } from './useRelationships';
+import { useRelationships } from './useRelationships.ts';
 
-import type { EntityFn } from 'soapbox/entity-store/hooks/types';
+import type { EntityFn } from 'soapbox/entity-store/hooks/types.ts';
 
 interface useAccountListOpts {
   enabled?: boolean;
diff --git a/src/api/hooks/accounts/useAccountLookup.ts b/src/api/hooks/accounts/useAccountLookup.ts
index ef9306a7d..d317147cc 100644
--- a/src/api/hooks/accounts/useAccountLookup.ts
+++ b/src/api/hooks/accounts/useAccountLookup.ts
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityLookup } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures, useLoggedIn } from 'soapbox/hooks';
-import { type Account, accountSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityLookup } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useFeatures, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { type Account, accountSchema } from 'soapbox/schemas/index.ts';
 
-import { useRelationship } from './useRelationship';
+import { useRelationship } from './useRelationship.ts';
 
 interface UseAccountLookupOpts {
   withRelationship?: boolean;
diff --git a/src/api/hooks/accounts/useFollow.ts b/src/api/hooks/accounts/useFollow.ts
index 25be4b3bc..142f73d8b 100644
--- a/src/api/hooks/accounts/useFollow.ts
+++ b/src/api/hooks/accounts/useFollow.ts
@@ -1,8 +1,8 @@
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { useTransaction } from 'soapbox/entity-store/hooks';
-import { useApi, useAppDispatch, useLoggedIn } from 'soapbox/hooks';
-import { relationshipSchema } from 'soapbox/schemas';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useAppDispatch, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { relationshipSchema } from 'soapbox/schemas/index.ts';
 
 interface FollowOpts {
   reblogs?: boolean;
diff --git a/src/api/hooks/accounts/usePatronUser.ts b/src/api/hooks/accounts/usePatronUser.ts
index 27ff6edfe..9ccfe8b84 100644
--- a/src/api/hooks/accounts/usePatronUser.ts
+++ b/src/api/hooks/accounts/usePatronUser.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig';
-import { type PatronUser, patronUserSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { type PatronUser, patronUserSchema } from 'soapbox/schemas/index.ts';
 
 function usePatronUser(url?: string) {
   const api = useApi();
diff --git a/src/api/hooks/accounts/useRelationship.ts b/src/api/hooks/accounts/useRelationship.ts
index 6424a2876..d76446258 100644
--- a/src/api/hooks/accounts/useRelationship.ts
+++ b/src/api/hooks/accounts/useRelationship.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { type Relationship, relationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { type Relationship, relationshipSchema } from 'soapbox/schemas/index.ts';
 
 interface UseRelationshipOpts {
   enabled?: boolean;
diff --git a/src/api/hooks/accounts/useRelationships.ts b/src/api/hooks/accounts/useRelationships.ts
index 8ffdb46ef..a88508a9c 100644
--- a/src/api/hooks/accounts/useRelationships.ts
+++ b/src/api/hooks/accounts/useRelationships.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities';
-import { useApi, useLoggedIn } from 'soapbox/hooks';
-import { type Relationship, relationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities.ts';
+import { useApi, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { type Relationship, relationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useRelationships(listKey: string[], ids: string[]) {
   const api = useApi();
diff --git a/src/api/hooks/admin/index.ts b/src/api/hooks/admin/index.ts
index 0ca5e7514..472cdc86e 100644
--- a/src/api/hooks/admin/index.ts
+++ b/src/api/hooks/admin/index.ts
@@ -1,6 +1,6 @@
-export { useDomains } from './useDomains';
-export { useModerationLog } from './useModerationLog';
-export { useRelays } from './useRelays';
-export { useRules } from './useRules';
-export { useSuggest } from './useSuggest';
-export { useVerify } from './useVerify';
\ No newline at end of file
+export { useDomains } from './useDomains.ts';
+export { useModerationLog } from './useModerationLog.ts';
+export { useRelays } from './useRelays.ts';
+export { useRules } from './useRules.ts';
+export { useSuggest } from './useSuggest.ts';
+export { useVerify } from './useVerify.ts';
\ No newline at end of file
diff --git a/src/api/hooks/admin/useAdminAccounts.ts b/src/api/hooks/admin/useAdminAccounts.ts
index 585a16710..59b0c040f 100644
--- a/src/api/hooks/admin/useAdminAccounts.ts
+++ b/src/api/hooks/admin/useAdminAccounts.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { adminAccountSchema } from 'soapbox/schemas/admin-account';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { adminAccountSchema } from 'soapbox/schemas/admin-account.ts';
 
 interface MastodonAdminFilters {
   local?: boolean;
diff --git a/src/api/hooks/admin/useAnnouncements.ts b/src/api/hooks/admin/useAnnouncements.ts
index 2fa3f0029..049800655 100644
--- a/src/api/hooks/admin/useAnnouncements.ts
+++ b/src/api/hooks/admin/useAnnouncements.ts
@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { adminAnnouncementSchema, type AdminAnnouncement } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { adminAnnouncementSchema, type AdminAnnouncement } from 'soapbox/schemas/index.ts';
 
-import { useAnnouncements as useUserAnnouncements } from '../announcements';
+import { useAnnouncements as useUserAnnouncements } from '../announcements/index.ts';
 
 interface CreateAnnouncementParams {
   content: string;
diff --git a/src/api/hooks/admin/useCreateDomain.ts b/src/api/hooks/admin/useCreateDomain.ts
index 8cbb4ae85..c07f49619 100644
--- a/src/api/hooks/admin/useCreateDomain.ts
+++ b/src/api/hooks/admin/useCreateDomain.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { domainSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { domainSchema } from 'soapbox/schemas/index.ts';
 
 interface CreateDomainParams {
   domain: string;
diff --git a/src/api/hooks/admin/useDeleteDomain.ts b/src/api/hooks/admin/useDeleteDomain.ts
index 05aeb70e8..85ad41c8e 100644
--- a/src/api/hooks/admin/useDeleteDomain.ts
+++ b/src/api/hooks/admin/useDeleteDomain.ts
@@ -1,6 +1,6 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useDeleteEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useDeleteEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
 
 const useDeleteDomain = () => {
   const api = useApi();
diff --git a/src/api/hooks/admin/useDomains.ts b/src/api/hooks/admin/useDomains.ts
index ff052b7ac..167e8d398 100644
--- a/src/api/hooks/admin/useDomains.ts
+++ b/src/api/hooks/admin/useDomains.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { domainSchema, type Domain } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { domainSchema, type Domain } from 'soapbox/schemas/index.ts';
 
 interface CreateDomainParams {
   domain: string;
diff --git a/src/api/hooks/admin/useManageZapSplit.ts b/src/api/hooks/admin/useManageZapSplit.ts
index e0e0344ce..e6a8420f6 100644
--- a/src/api/hooks/admin/useManageZapSplit.ts
+++ b/src/api/hooks/admin/useManageZapSplit.ts
@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 
-import { type INewAccount } from 'soapbox/features/admin/manage-zap-split';
-import { useApi } from 'soapbox/hooks';
-import { baseZapAccountSchema, ZapSplitData } from 'soapbox/schemas/zap-split';
-import toast from 'soapbox/toast';
+import { type INewAccount } from 'soapbox/features/admin/manage-zap-split.tsx';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { baseZapAccountSchema, ZapSplitData } from 'soapbox/schemas/zap-split.ts';
+import toast from 'soapbox/toast.tsx';
 
 
 const messages = defineMessages({
diff --git a/src/api/hooks/admin/useModerationLog.ts b/src/api/hooks/admin/useModerationLog.ts
index 2153deab8..9e7c7bc4b 100644
--- a/src/api/hooks/admin/useModerationLog.ts
+++ b/src/api/hooks/admin/useModerationLog.ts
@@ -1,7 +1,7 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { moderationLogEntrySchema, type ModerationLogEntry } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { moderationLogEntrySchema, type ModerationLogEntry } from 'soapbox/schemas/index.ts';
 
 interface ModerationLogResult {
   items: ModerationLogEntry[];
diff --git a/src/api/hooks/admin/useRelays.ts b/src/api/hooks/admin/useRelays.ts
index d27b6d043..1a1d57099 100644
--- a/src/api/hooks/admin/useRelays.ts
+++ b/src/api/hooks/admin/useRelays.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { relaySchema, type Relay } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { relaySchema, type Relay } from 'soapbox/schemas/index.ts';
 
 const useRelays = () => {
   const api = useApi();
diff --git a/src/api/hooks/admin/useRules.ts b/src/api/hooks/admin/useRules.ts
index 8fed91fa0..c7c1db0c5 100644
--- a/src/api/hooks/admin/useRules.ts
+++ b/src/api/hooks/admin/useRules.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { adminRuleSchema, type AdminRule } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { adminRuleSchema, type AdminRule } from 'soapbox/schemas/index.ts';
 
 interface CreateRuleParams {
   priority?: number;
diff --git a/src/api/hooks/admin/useSuggest.ts b/src/api/hooks/admin/useSuggest.ts
index b20bc5308..5358e2771 100644
--- a/src/api/hooks/admin/useSuggest.ts
+++ b/src/api/hooks/admin/useSuggest.ts
@@ -1,9 +1,9 @@
-import { useTransaction } from 'soapbox/entity-store/hooks';
-import { EntityCallbacks } from 'soapbox/entity-store/hooks/types';
-import { useApi, useGetState } from 'soapbox/hooks';
-import { accountIdsToAccts } from 'soapbox/selectors';
+import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
+import { EntityCallbacks } from 'soapbox/entity-store/hooks/types.ts';
+import { useApi, useGetState } from 'soapbox/hooks/index.ts';
+import { accountIdsToAccts } from 'soapbox/selectors/index.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 function useSuggest() {
   const api = useApi();
diff --git a/src/api/hooks/admin/useUpdateDomain.ts b/src/api/hooks/admin/useUpdateDomain.ts
index 8488d6916..30c639112 100644
--- a/src/api/hooks/admin/useUpdateDomain.ts
+++ b/src/api/hooks/admin/useUpdateDomain.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { domainSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { domainSchema } from 'soapbox/schemas/index.ts';
 
-import type { CreateDomainParams } from './useCreateDomain';
+import type { CreateDomainParams } from './useCreateDomain.ts';
 
 const useUpdateDomain = (id: string) => {
   const api = useApi();
diff --git a/src/api/hooks/admin/useVerify.ts b/src/api/hooks/admin/useVerify.ts
index 9312d609e..ee2da73cb 100644
--- a/src/api/hooks/admin/useVerify.ts
+++ b/src/api/hooks/admin/useVerify.ts
@@ -1,9 +1,9 @@
-import { useTransaction } from 'soapbox/entity-store/hooks';
-import { EntityCallbacks } from 'soapbox/entity-store/hooks/types';
-import { useApi, useGetState } from 'soapbox/hooks';
-import { accountIdsToAccts } from 'soapbox/selectors';
+import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
+import { EntityCallbacks } from 'soapbox/entity-store/hooks/types.ts';
+import { useApi, useGetState } from 'soapbox/hooks/index.ts';
+import { accountIdsToAccts } from 'soapbox/selectors/index.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 function useVerify() {
   const api = useApi();
diff --git a/src/api/hooks/announcements/index.ts b/src/api/hooks/announcements/index.ts
index 021ac3ea0..ddb8ac3a4 100644
--- a/src/api/hooks/announcements/index.ts
+++ b/src/api/hooks/announcements/index.ts
@@ -1 +1 @@
-export { useAnnouncements } from './useAnnouncements';
+export { useAnnouncements } from './useAnnouncements.ts';
diff --git a/src/api/hooks/announcements/useAnnouncements.ts b/src/api/hooks/announcements/useAnnouncements.ts
index af4e36a2c..1ecbdf8b6 100644
--- a/src/api/hooks/announcements/useAnnouncements.ts
+++ b/src/api/hooks/announcements/useAnnouncements.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { announcementReactionSchema, announcementSchema, type Announcement, type AnnouncementReaction } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { announcementReactionSchema, announcementSchema, type Announcement, type AnnouncementReaction } from 'soapbox/schemas/index.ts';
 
 const updateReaction = (reaction: AnnouncementReaction, count: number, me?: boolean, overwrite?: boolean) => announcementReactionSchema.parse({
   ...reaction,
diff --git a/src/api/hooks/captcha/useCaptcha.ts b/src/api/hooks/captcha/useCaptcha.ts
index 01b9c9926..a3509dbd5 100644
--- a/src/api/hooks/captcha/useCaptcha.ts
+++ b/src/api/hooks/captcha/useCaptcha.ts
@@ -2,10 +2,10 @@ import { AxiosError } from 'axios';
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { useApi, useAppDispatch, useInstance } from 'soapbox/hooks';
-import { captchaSchema, type CaptchaData } from 'soapbox/schemas/captcha';
-import toast from 'soapbox/toast';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { useApi, useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
+import { captchaSchema, type CaptchaData } from 'soapbox/schemas/captcha.ts';
+import toast from 'soapbox/toast.tsx';
 
 
 
diff --git a/src/api/hooks/groups/useBlockGroupMember.ts b/src/api/hooks/groups/useBlockGroupMember.ts
index 5155d18c6..1d10b5b5d 100644
--- a/src/api/hooks/groups/useBlockGroupMember.ts
+++ b/src/api/hooks/groups/useBlockGroupMember.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
 
-import type { Account, Group, GroupMember } from 'soapbox/schemas';
+import type { Account, Group, GroupMember } from 'soapbox/schemas/index.ts';
 
 function useBlockGroupMember(group: Group, account: Account) {
   const { createEntity } = useEntityActions<GroupMember>(
diff --git a/src/api/hooks/groups/useCancelMembershipRequest.ts b/src/api/hooks/groups/useCancelMembershipRequest.ts
index 51c480731..59e2943ce 100644
--- a/src/api/hooks/groups/useCancelMembershipRequest.ts
+++ b/src/api/hooks/groups/useCancelMembershipRequest.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi, useOwnAccount } from 'soapbox/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useOwnAccount } from 'soapbox/hooks/index.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useCancelMembershipRequest(group: Group) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useCreateGroup.ts b/src/api/hooks/groups/useCreateGroup.ts
index e80417856..d354a7a27 100644
--- a/src/api/hooks/groups/useCreateGroup.ts
+++ b/src/api/hooks/groups/useCreateGroup.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
 interface CreateGroupParams {
   display_name?: string;
diff --git a/src/api/hooks/groups/useDeleteGroup.ts b/src/api/hooks/groups/useDeleteGroup.ts
index d1b25cccd..b586e3677 100644
--- a/src/api/hooks/groups/useDeleteGroup.ts
+++ b/src/api/hooks/groups/useDeleteGroup.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useDeleteGroup() {
   const { deleteEntity, isSubmitting } = useEntityActions<Group>(
diff --git a/src/api/hooks/groups/useDeleteGroupStatus.ts b/src/api/hooks/groups/useDeleteGroupStatus.ts
index 55a6f9459..ed2d610af 100644
--- a/src/api/hooks/groups/useDeleteGroupStatus.ts
+++ b/src/api/hooks/groups/useDeleteGroupStatus.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useDeleteEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useDeleteEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useDeleteGroupStatus(group: Group, statusId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useDemoteGroupMember.ts b/src/api/hooks/groups/useDemoteGroupMember.ts
index db38164b7..3d6a10e85 100644
--- a/src/api/hooks/groups/useDemoteGroupMember.ts
+++ b/src/api/hooks/groups/useDemoteGroupMember.ts
@@ -1,10 +1,10 @@
 import { z } from 'zod';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { groupMemberSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { groupMemberSchema } from 'soapbox/schemas/index.ts';
 
-import type { Group, GroupMember } from 'soapbox/schemas';
+import type { Group, GroupMember } from 'soapbox/schemas/index.ts';
 
 function useDemoteGroupMember(group: Group, groupMember: GroupMember) {
   const { createEntity } = useEntityActions<GroupMember>(
diff --git a/src/api/hooks/groups/useGroup.test.ts b/src/api/hooks/groups/useGroup.test.ts
index 4b9c91f56..4212bf7c2 100644
--- a/src/api/hooks/groups/useGroup.test.ts
+++ b/src/api/hooks/groups/useGroup.test.ts
@@ -1,10 +1,10 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildGroup } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import { useGroup } from './useGroup';
+import { useGroup } from './useGroup.ts';
 
 const group = buildGroup({ id: '1', display_name: 'soapbox' });
 
diff --git a/src/api/hooks/groups/useGroup.ts b/src/api/hooks/groups/useGroup.ts
index 9efafb13c..b437936c3 100644
--- a/src/api/hooks/groups/useGroup.ts
+++ b/src/api/hooks/groups/useGroup.ts
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { type Group, groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { type Group, groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationship } from './useGroupRelationship';
+import { useGroupRelationship } from './useGroupRelationship.ts';
 
 function useGroup(groupId: string, refetch = true) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupLookup.test.ts b/src/api/hooks/groups/useGroupLookup.test.ts
index 4c7bcbe1f..f000540e5 100644
--- a/src/api/hooks/groups/useGroupLookup.test.ts
+++ b/src/api/hooks/groups/useGroupLookup.test.ts
@@ -1,10 +1,10 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildGroup } from 'soapbox/jest/factory';
-import { renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import { useGroupLookup } from './useGroupLookup';
+import { useGroupLookup } from './useGroupLookup.ts';
 
 const group = buildGroup({ id: '1', slug: 'soapbox' });
 const state = {
diff --git a/src/api/hooks/groups/useGroupLookup.ts b/src/api/hooks/groups/useGroupLookup.ts
index 8e161af78..f1790c6d2 100644
--- a/src/api/hooks/groups/useGroupLookup.ts
+++ b/src/api/hooks/groups/useGroupLookup.ts
@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityLookup } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { useFeatures } from 'soapbox/hooks/useFeatures';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityLookup } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationship } from './useGroupRelationship';
+import { useGroupRelationship } from './useGroupRelationship.ts';
 
 function useGroupLookup(slug: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupMedia.test.ts b/src/api/hooks/groups/useGroupMedia.test.ts
index bbe643c4d..88d9cc281 100644
--- a/src/api/hooks/groups/useGroupMedia.test.ts
+++ b/src/api/hooks/groups/useGroupMedia.test.ts
@@ -1,10 +1,10 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildStatus } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildStatus } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import { useGroupMedia } from './useGroupMedia';
+import { useGroupMedia } from './useGroupMedia.ts';
 
 const status = buildStatus();
 const groupId = '1';
diff --git a/src/api/hooks/groups/useGroupMedia.ts b/src/api/hooks/groups/useGroupMedia.ts
index 4db7fd179..5c2f6bd88 100644
--- a/src/api/hooks/groups/useGroupMedia.ts
+++ b/src/api/hooks/groups/useGroupMedia.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { normalizeStatus } from 'soapbox/normalizers';
-import { toSchema } from 'soapbox/utils/normalizers';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { toSchema } from 'soapbox/utils/normalizers.ts';
 
 const statusSchema = toSchema(normalizeStatus);
 
diff --git a/src/api/hooks/groups/useGroupMembers.test.ts b/src/api/hooks/groups/useGroupMembers.test.ts
index 3087bd3fb..02971b2cb 100644
--- a/src/api/hooks/groups/useGroupMembers.test.ts
+++ b/src/api/hooks/groups/useGroupMembers.test.ts
@@ -1,11 +1,11 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildGroupMember } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroupMember } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
-import { useGroupMembers } from './useGroupMembers';
+import { useGroupMembers } from './useGroupMembers.ts';
 
 const groupMember = buildGroupMember();
 const groupId = '1';
diff --git a/src/api/hooks/groups/useGroupMembers.ts b/src/api/hooks/groups/useGroupMembers.ts
index a9b03e7f2..74a7d5f9b 100644
--- a/src/api/hooks/groups/useGroupMembers.ts
+++ b/src/api/hooks/groups/useGroupMembers.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { GroupMember, groupMemberSchema } from 'soapbox/schemas';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { GroupMember, groupMemberSchema } from 'soapbox/schemas/index.ts';
 
-import { useApi } from '../../../hooks/useApi';
+import { useApi } from '../../../hooks/useApi.ts';
 
 function useGroupMembers(groupId: string, role: GroupRoles) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupMembershipRequests.ts b/src/api/hooks/groups/useGroupMembershipRequests.ts
index f175b21da..6d0771c12 100644
--- a/src/api/hooks/groups/useGroupMembershipRequests.ts
+++ b/src/api/hooks/groups/useGroupMembershipRequests.ts
@@ -1,12 +1,12 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useDismissEntity, useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { accountSchema } from 'soapbox/schemas';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useDismissEntity, useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { accountSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationship } from './useGroupRelationship';
+import { useGroupRelationship } from './useGroupRelationship.ts';
 
-import type { ExpandedEntitiesPath } from 'soapbox/entity-store/hooks/types';
+import type { ExpandedEntitiesPath } from 'soapbox/entity-store/hooks/types.ts';
 
 function useGroupMembershipRequests(groupId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupMutes.ts b/src/api/hooks/groups/useGroupMutes.ts
index 67eca0772..7b1364915 100644
--- a/src/api/hooks/groups/useGroupMutes.ts
+++ b/src/api/hooks/groups/useGroupMutes.ts
@@ -1,10 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useFeatures } from 'soapbox/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useGroupMutes() {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupRelationship.ts b/src/api/hooks/groups/useGroupRelationship.ts
index 95193b865..b7846be22 100644
--- a/src/api/hooks/groups/useGroupRelationship.ts
+++ b/src/api/hooks/groups/useGroupRelationship.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupRelationship(groupId: string | undefined) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupRelationships.ts b/src/api/hooks/groups/useGroupRelationships.ts
index 902d0473f..cee6b4f81 100644
--- a/src/api/hooks/groups/useGroupRelationships.ts
+++ b/src/api/hooks/groups/useGroupRelationships.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities';
-import { useApi, useLoggedIn } from 'soapbox/hooks';
-import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities.ts';
+import { useApi, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupRelationships(listKey: string[], ids: string[]) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupSearch.ts b/src/api/hooks/groups/useGroupSearch.ts
index 946e208bb..c13f27b67 100644
--- a/src/api/hooks/groups/useGroupSearch.ts
+++ b/src/api/hooks/groups/useGroupSearch.ts
@@ -1,11 +1,11 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures } from 'soapbox/hooks';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useFeatures } from 'soapbox/hooks/index.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useGroupSearch(search: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupTag.ts b/src/api/hooks/groups/useGroupTag.ts
index d0e63d74d..446b3b492 100644
--- a/src/api/hooks/groups/useGroupTag.ts
+++ b/src/api/hooks/groups/useGroupTag.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { type GroupTag, groupTagSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { type GroupTag, groupTagSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupTag(tagId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupTags.ts b/src/api/hooks/groups/useGroupTags.ts
index b2c29aa3c..3b4846f08 100644
--- a/src/api/hooks/groups/useGroupTags.ts
+++ b/src/api/hooks/groups/useGroupTags.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { groupTagSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { groupTagSchema } from 'soapbox/schemas/index.ts';
 
-import type { GroupTag } from 'soapbox/schemas';
+import type { GroupTag } from 'soapbox/schemas/index.ts';
 
 function useGroupTags(groupId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupValidation.ts b/src/api/hooks/groups/useGroupValidation.ts
index 1b008b0b1..40b51c99a 100644
--- a/src/api/hooks/groups/useGroupValidation.ts
+++ b/src/api/hooks/groups/useGroupValidation.ts
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useApi } from 'soapbox/hooks/useApi';
-import { useFeatures } from 'soapbox/hooks/useFeatures';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 type Validation = {
   error: string;
diff --git a/src/api/hooks/groups/useGroups.test.ts b/src/api/hooks/groups/useGroups.test.ts
index 3cbddf98a..8a91db69c 100644
--- a/src/api/hooks/groups/useGroups.test.ts
+++ b/src/api/hooks/groups/useGroups.test.ts
@@ -1,11 +1,11 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildGroup } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import { useGroups } from './useGroups';
+import { useGroups } from './useGroups.ts';
 
 const group = buildGroup({ id: '1', display_name: 'soapbox' });
 const store = {
diff --git a/src/api/hooks/groups/useGroups.ts b/src/api/hooks/groups/useGroups.ts
index eb5b4161f..2f2c9de2f 100644
--- a/src/api/hooks/groups/useGroups.ts
+++ b/src/api/hooks/groups/useGroups.ts
@@ -1,10 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { useFeatures } from 'soapbox/hooks/useFeatures';
-import { groupSchema, type Group } from 'soapbox/schemas/group';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { groupSchema, type Group } from 'soapbox/schemas/group.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
 function useGroups(q: string = '') {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupsFromTag.ts b/src/api/hooks/groups/useGroupsFromTag.ts
index 6c2b88bb1..c1b0bfa92 100644
--- a/src/api/hooks/groups/useGroupsFromTag.ts
+++ b/src/api/hooks/groups/useGroupsFromTag.ts
@@ -1,11 +1,11 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures } from 'soapbox/hooks';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useFeatures } from 'soapbox/hooks/index.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useGroupsFromTag(tagId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useJoinGroup.ts b/src/api/hooks/groups/useJoinGroup.ts
index 0ea9293d9..4d1cf23ed 100644
--- a/src/api/hooks/groups/useJoinGroup.ts
+++ b/src/api/hooks/groups/useJoinGroup.ts
@@ -1,10 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroups } from './useGroups';
+import { useGroups } from './useGroups.ts';
 
-import type { Group, GroupRelationship } from 'soapbox/schemas';
+import type { Group, GroupRelationship } from 'soapbox/schemas/index.ts';
 
 function useJoinGroup(group: Group) {
   const { invalidate } = useGroups();
diff --git a/src/api/hooks/groups/useLeaveGroup.ts b/src/api/hooks/groups/useLeaveGroup.ts
index e1b11e737..5ff009547 100644
--- a/src/api/hooks/groups/useLeaveGroup.ts
+++ b/src/api/hooks/groups/useLeaveGroup.ts
@@ -1,10 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroups } from './useGroups';
+import { useGroups } from './useGroups.ts';
 
-import type { Group, GroupRelationship } from 'soapbox/schemas';
+import type { Group, GroupRelationship } from 'soapbox/schemas/index.ts';
 
 function useLeaveGroup(group: Group) {
   const { invalidate } = useGroups();
diff --git a/src/api/hooks/groups/useMuteGroup.ts b/src/api/hooks/groups/useMuteGroup.ts
index e31c7f4d1..1bef33e83 100644
--- a/src/api/hooks/groups/useMuteGroup.ts
+++ b/src/api/hooks/groups/useMuteGroup.ts
@@ -1,6 +1,6 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { type Group, groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { type Group, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useMuteGroup(group?: Group) {
   const { createEntity, isSubmitting } = useEntityActions(
diff --git a/src/api/hooks/groups/usePendingGroups.test.ts b/src/api/hooks/groups/usePendingGroups.test.ts
index 5c39902e9..1a380f459 100644
--- a/src/api/hooks/groups/usePendingGroups.test.ts
+++ b/src/api/hooks/groups/usePendingGroups.test.ts
@@ -1,12 +1,12 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { Entities } from 'soapbox/entity-store/entities';
-import { buildAccount, buildGroup } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { __stub } from 'soapbox/api/index.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { buildAccount, buildGroup } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import { usePendingGroups } from './usePendingGroups';
+import { usePendingGroups } from './usePendingGroups.ts';
 
 const id = '1';
 const group = buildGroup({ id, display_name: 'soapbox' });
diff --git a/src/api/hooks/groups/usePendingGroups.ts b/src/api/hooks/groups/usePendingGroups.ts
index be5d8c400..06c805362 100644
--- a/src/api/hooks/groups/usePendingGroups.ts
+++ b/src/api/hooks/groups/usePendingGroups.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import { Group, groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { Group, groupSchema } from 'soapbox/schemas/index.ts';
 
 function usePendingGroups() {
   const api = useApi();
diff --git a/src/api/hooks/groups/usePopularGroups.ts b/src/api/hooks/groups/usePopularGroups.ts
index 69b04e32f..57dde7cfa 100644
--- a/src/api/hooks/groups/usePopularGroups.ts
+++ b/src/api/hooks/groups/usePopularGroups.ts
@@ -1,11 +1,11 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { Group, groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { Group, groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useApi } from '../../../hooks/useApi';
-import { useFeatures } from '../../../hooks/useFeatures';
+import { useApi } from '../../../hooks/useApi.ts';
+import { useFeatures } from '../../../hooks/useFeatures.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
 function usePopularGroups() {
   const api = useApi();
diff --git a/src/api/hooks/groups/usePopularTags.ts b/src/api/hooks/groups/usePopularTags.ts
index e0ec2c550..2126a57d2 100644
--- a/src/api/hooks/groups/usePopularTags.ts
+++ b/src/api/hooks/groups/usePopularTags.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures } from 'soapbox/hooks';
-import { type GroupTag, groupTagSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useFeatures } from 'soapbox/hooks/index.ts';
+import { type GroupTag, groupTagSchema } from 'soapbox/schemas/index.ts';
 
 function usePopularTags() {
   const api = useApi();
diff --git a/src/api/hooks/groups/usePromoteGroupMember.ts b/src/api/hooks/groups/usePromoteGroupMember.ts
index 3d23dda62..36b09a6f9 100644
--- a/src/api/hooks/groups/usePromoteGroupMember.ts
+++ b/src/api/hooks/groups/usePromoteGroupMember.ts
@@ -1,10 +1,10 @@
 import { z } from 'zod';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { groupMemberSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { groupMemberSchema } from 'soapbox/schemas/index.ts';
 
-import type { Group, GroupMember } from 'soapbox/schemas';
+import type { Group, GroupMember } from 'soapbox/schemas/index.ts';
 
 function usePromoteGroupMember(group: Group, groupMember: GroupMember) {
   const { createEntity } = useEntityActions<GroupMember>(
diff --git a/src/api/hooks/groups/useSuggestedGroups.ts b/src/api/hooks/groups/useSuggestedGroups.ts
index 69fb71065..a54fbffd2 100644
--- a/src/api/hooks/groups/useSuggestedGroups.ts
+++ b/src/api/hooks/groups/useSuggestedGroups.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures } from 'soapbox/hooks';
-import { type Group, groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi, useFeatures } from 'soapbox/hooks/index.ts';
+import { type Group, groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
 function useSuggestedGroups() {
   const api = useApi();
diff --git a/src/api/hooks/groups/useUnmuteGroup.ts b/src/api/hooks/groups/useUnmuteGroup.ts
index 6c8768d25..9402b4a65 100644
--- a/src/api/hooks/groups/useUnmuteGroup.ts
+++ b/src/api/hooks/groups/useUnmuteGroup.ts
@@ -1,6 +1,6 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { type Group, groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { type Group, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useUnmuteGroup(group?: Group) {
   const { createEntity, isSubmitting } = useEntityActions(
diff --git a/src/api/hooks/groups/useUpdateGroup.ts b/src/api/hooks/groups/useUpdateGroup.ts
index 129849514..da660e735 100644
--- a/src/api/hooks/groups/useUpdateGroup.ts
+++ b/src/api/hooks/groups/useUpdateGroup.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
 interface UpdateGroupParams {
   display_name?: string;
diff --git a/src/api/hooks/groups/useUpdateGroupTag.ts b/src/api/hooks/groups/useUpdateGroupTag.ts
index 1c68c714d..203b4f4ca 100644
--- a/src/api/hooks/groups/useUpdateGroupTag.ts
+++ b/src/api/hooks/groups/useUpdateGroupTag.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
 
-import type { GroupTag } from 'soapbox/schemas';
+import type { GroupTag } from 'soapbox/schemas/index.ts';
 
 function useUpdateGroupTag(groupId: string, tagId: string) {
   const { updateEntity, ...rest } = useEntityActions<GroupTag>(
diff --git a/src/api/hooks/index.ts b/src/api/hooks/index.ts
index a3afe87a4..e5044ab74 100644
--- a/src/api/hooks/index.ts
+++ b/src/api/hooks/index.ts
@@ -1,61 +1,61 @@
 // Accounts
-export { useAccount } from './accounts/useAccount';
-export { useAccountLookup } from './accounts/useAccountLookup';
+export { useAccount } from './accounts/useAccount.ts';
+export { useAccountLookup } from './accounts/useAccountLookup.ts';
 export {
   useBlocks,
   useMutes,
   useFollowers,
   useFollowing,
-} from './accounts/useAccountList';
-export { useFollow } from './accounts/useFollow';
-export { useRelationships } from './accounts/useRelationships';
-export { usePatronUser } from './accounts/usePatronUser';
+} from './accounts/useAccountList.ts';
+export { useFollow } from './accounts/useFollow.ts';
+export { useRelationships } from './accounts/useRelationships.ts';
+export { usePatronUser } from './accounts/usePatronUser.ts';
 
 // Groups
-export { useBlockGroupMember } from './groups/useBlockGroupMember';
-export { useCancelMembershipRequest } from './groups/useCancelMembershipRequest';
-export { useCreateGroup, type CreateGroupParams } from './groups/useCreateGroup';
-export { useDeleteGroup } from './groups/useDeleteGroup';
-export { useDemoteGroupMember } from './groups/useDemoteGroupMember';
-export { useGroup } from './groups/useGroup';
-export { useGroupLookup } from './groups/useGroupLookup';
-export { useGroupMedia } from './groups/useGroupMedia';
-export { useGroupMembers } from './groups/useGroupMembers';
-export { useGroupMembershipRequests } from './groups/useGroupMembershipRequests';
-export { useGroupMutes } from './groups/useGroupMutes';
-export { useGroupRelationship } from './groups/useGroupRelationship';
-export { useGroupRelationships } from './groups/useGroupRelationships';
-export { useGroupSearch } from './groups/useGroupSearch';
-export { useGroupTag } from './groups/useGroupTag';
-export { useGroupTags } from './groups/useGroupTags';
-export { useGroupValidation } from './groups/useGroupValidation';
-export { useGroups } from './groups/useGroups';
-export { useGroupsFromTag } from './groups/useGroupsFromTag';
-export { useJoinGroup } from './groups/useJoinGroup';
-export { useMuteGroup } from './groups/useMuteGroup';
-export { useLeaveGroup } from './groups/useLeaveGroup';
-export { usePendingGroups } from './groups/usePendingGroups';
-export { usePopularGroups } from './groups/usePopularGroups';
-export { usePopularTags } from './groups/usePopularTags';
-export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
-export { useSuggestedGroups } from './groups/useSuggestedGroups';
-export { useUnmuteGroup } from './groups/useUnmuteGroup';
-export { useUpdateGroup } from './groups/useUpdateGroup';
-export { useUpdateGroupTag } from './groups/useUpdateGroupTag';
+export { useBlockGroupMember } from './groups/useBlockGroupMember.ts';
+export { useCancelMembershipRequest } from './groups/useCancelMembershipRequest.ts';
+export { useCreateGroup, type CreateGroupParams } from './groups/useCreateGroup.ts';
+export { useDeleteGroup } from './groups/useDeleteGroup.ts';
+export { useDemoteGroupMember } from './groups/useDemoteGroupMember.ts';
+export { useGroup } from './groups/useGroup.ts';
+export { useGroupLookup } from './groups/useGroupLookup.ts';
+export { useGroupMedia } from './groups/useGroupMedia.ts';
+export { useGroupMembers } from './groups/useGroupMembers.ts';
+export { useGroupMembershipRequests } from './groups/useGroupMembershipRequests.ts';
+export { useGroupMutes } from './groups/useGroupMutes.ts';
+export { useGroupRelationship } from './groups/useGroupRelationship.ts';
+export { useGroupRelationships } from './groups/useGroupRelationships.ts';
+export { useGroupSearch } from './groups/useGroupSearch.ts';
+export { useGroupTag } from './groups/useGroupTag.ts';
+export { useGroupTags } from './groups/useGroupTags.ts';
+export { useGroupValidation } from './groups/useGroupValidation.ts';
+export { useGroups } from './groups/useGroups.ts';
+export { useGroupsFromTag } from './groups/useGroupsFromTag.ts';
+export { useJoinGroup } from './groups/useJoinGroup.ts';
+export { useMuteGroup } from './groups/useMuteGroup.ts';
+export { useLeaveGroup } from './groups/useLeaveGroup.ts';
+export { usePendingGroups } from './groups/usePendingGroups.ts';
+export { usePopularGroups } from './groups/usePopularGroups.ts';
+export { usePopularTags } from './groups/usePopularTags.ts';
+export { usePromoteGroupMember } from './groups/usePromoteGroupMember.ts';
+export { useSuggestedGroups } from './groups/useSuggestedGroups.ts';
+export { useUnmuteGroup } from './groups/useUnmuteGroup.ts';
+export { useUpdateGroup } from './groups/useUpdateGroup.ts';
+export { useUpdateGroupTag } from './groups/useUpdateGroupTag.ts';
 
 // Statuses
-export { useBookmarkFolders } from './statuses/useBookmarkFolders';
-export { useBookmarkFolder } from './statuses/useBookmarkFolder';
-export { useCreateBookmarkFolder } from './statuses/useCreateBookmarkFolder';
-export { useDeleteBookmarkFolder } from './statuses/useDeleteBookmarkFolder';
-export { useUpdateBookmarkFolder } from './statuses/useUpdateBookmarkFolder';
+export { useBookmarkFolders } from './statuses/useBookmarkFolders.ts';
+export { useBookmarkFolder } from './statuses/useBookmarkFolder.ts';
+export { useCreateBookmarkFolder } from './statuses/useCreateBookmarkFolder.ts';
+export { useDeleteBookmarkFolder } from './statuses/useDeleteBookmarkFolder.ts';
+export { useUpdateBookmarkFolder } from './statuses/useUpdateBookmarkFolder.ts';
 
 // Streaming
-export { useUserStream } from './streaming/useUserStream';
-export { useCommunityStream } from './streaming/useCommunityStream';
-export { usePublicStream } from './streaming/usePublicStream';
-export { useDirectStream } from './streaming/useDirectStream';
-export { useHashtagStream } from './streaming/useHashtagStream';
-export { useListStream } from './streaming/useListStream';
-export { useGroupStream } from './streaming/useGroupStream';
-export { useRemoteStream } from './streaming/useRemoteStream';
+export { useUserStream } from './streaming/useUserStream.ts';
+export { useCommunityStream } from './streaming/useCommunityStream.ts';
+export { usePublicStream } from './streaming/usePublicStream.ts';
+export { useDirectStream } from './streaming/useDirectStream.ts';
+export { useHashtagStream } from './streaming/useHashtagStream.ts';
+export { useListStream } from './streaming/useListStream.ts';
+export { useGroupStream } from './streaming/useGroupStream.ts';
+export { useRemoteStream } from './streaming/useRemoteStream.ts';
diff --git a/src/api/hooks/instance/useInstanceV1.ts b/src/api/hooks/instance/useInstanceV1.ts
index c1e802156..45b014fe9 100644
--- a/src/api/hooks/instance/useInstanceV1.ts
+++ b/src/api/hooks/instance/useInstanceV1.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
 interface Opts {
   /** The base URL of the instance. */
diff --git a/src/api/hooks/instance/useInstanceV2.ts b/src/api/hooks/instance/useInstanceV2.ts
index 25b1de014..5667bf022 100644
--- a/src/api/hooks/instance/useInstanceV2.ts
+++ b/src/api/hooks/instance/useInstanceV2.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance.ts';
 
 interface Opts {
   /** The base URL of the instance. */
diff --git a/src/api/hooks/statuses/useBookmarkFolder.ts b/src/api/hooks/statuses/useBookmarkFolder.ts
index f81d9e7d1..dd5e5fc56 100644
--- a/src/api/hooks/statuses/useBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useBookmarkFolder.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { selectEntity } from 'soapbox/entity-store/selectors';
-import { useAppSelector } from 'soapbox/hooks';
-import { type BookmarkFolder } from 'soapbox/schemas/bookmark-folder';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { selectEntity } from 'soapbox/entity-store/selectors.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { type BookmarkFolder } from 'soapbox/schemas/bookmark-folder.ts';
 
-import { useBookmarkFolders } from './useBookmarkFolders';
+import { useBookmarkFolders } from './useBookmarkFolders.ts';
 
 function useBookmarkFolder(folderId?: string) {
   const {
diff --git a/src/api/hooks/statuses/useBookmarkFolders.ts b/src/api/hooks/statuses/useBookmarkFolders.ts
index 77538a97a..c48ac9e15 100644
--- a/src/api/hooks/statuses/useBookmarkFolders.ts
+++ b/src/api/hooks/statuses/useBookmarkFolders.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { useFeatures } from 'soapbox/hooks/useFeatures';
-import { bookmarkFolderSchema, type BookmarkFolder } from 'soapbox/schemas/bookmark-folder';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { bookmarkFolderSchema, type BookmarkFolder } from 'soapbox/schemas/bookmark-folder.ts';
 
 function useBookmarkFolders() {
   const api = useApi();
diff --git a/src/api/hooks/statuses/useCreateBookmarkFolder.ts b/src/api/hooks/statuses/useCreateBookmarkFolder.ts
index ded24ff97..477c1fe45 100644
--- a/src/api/hooks/statuses/useCreateBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useCreateBookmarkFolder.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder.ts';
 
 interface CreateBookmarkFolderParams {
   name: string;
diff --git a/src/api/hooks/statuses/useDeleteBookmarkFolder.ts b/src/api/hooks/statuses/useDeleteBookmarkFolder.ts
index cd8018c2d..cbfacd830 100644
--- a/src/api/hooks/statuses/useDeleteBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useDeleteBookmarkFolder.ts
@@ -1,5 +1,5 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
 
 function useDeleteBookmarkFolder() {
   const { deleteEntity, isSubmitting } = useEntityActions(
diff --git a/src/api/hooks/statuses/useUpdateBookmarkFolder.ts b/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
index 2e023b04b..d21aac1f9 100644
--- a/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder.ts';
 
 interface UpdateBookmarkFolderParams {
   name: string;
diff --git a/src/api/hooks/streaming/useCommunityStream.ts b/src/api/hooks/streaming/useCommunityStream.ts
index ce00d4674..0ee8b3335 100644
--- a/src/api/hooks/streaming/useCommunityStream.ts
+++ b/src/api/hooks/streaming/useCommunityStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 interface UseCommunityStreamOpts {
   onlyMedia?: boolean;
diff --git a/src/api/hooks/streaming/useDirectStream.ts b/src/api/hooks/streaming/useDirectStream.ts
index 972a5f769..cf343a09b 100644
--- a/src/api/hooks/streaming/useDirectStream.ts
+++ b/src/api/hooks/streaming/useDirectStream.ts
@@ -1,6 +1,6 @@
-import { useLoggedIn } from 'soapbox/hooks/useLoggedIn';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 function useDirectStream() {
   const { isLoggedIn } = useLoggedIn();
diff --git a/src/api/hooks/streaming/useGroupStream.ts b/src/api/hooks/streaming/useGroupStream.ts
index f9db3f69e..796953748 100644
--- a/src/api/hooks/streaming/useGroupStream.ts
+++ b/src/api/hooks/streaming/useGroupStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 function useGroupStream(groupId: string) {
   return useTimelineStream(
diff --git a/src/api/hooks/streaming/useHashtagStream.ts b/src/api/hooks/streaming/useHashtagStream.ts
index 4f9483bad..788b3f3fd 100644
--- a/src/api/hooks/streaming/useHashtagStream.ts
+++ b/src/api/hooks/streaming/useHashtagStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 function useHashtagStream(tag: string) {
   return useTimelineStream(
diff --git a/src/api/hooks/streaming/useListStream.ts b/src/api/hooks/streaming/useListStream.ts
index 661bdce4f..4b859b8d6 100644
--- a/src/api/hooks/streaming/useListStream.ts
+++ b/src/api/hooks/streaming/useListStream.ts
@@ -1,6 +1,6 @@
-import { useLoggedIn } from 'soapbox/hooks';
+import { useLoggedIn } from 'soapbox/hooks/index.ts';
 
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 function useListStream(listId: string) {
   const { isLoggedIn } = useLoggedIn();
diff --git a/src/api/hooks/streaming/usePublicStream.ts b/src/api/hooks/streaming/usePublicStream.ts
index 81c25bde4..cfc9e63af 100644
--- a/src/api/hooks/streaming/usePublicStream.ts
+++ b/src/api/hooks/streaming/usePublicStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 interface UsePublicStreamOpts {
   onlyMedia?: boolean;
diff --git a/src/api/hooks/streaming/useRemoteStream.ts b/src/api/hooks/streaming/useRemoteStream.ts
index 6de560163..53fa36358 100644
--- a/src/api/hooks/streaming/useRemoteStream.ts
+++ b/src/api/hooks/streaming/useRemoteStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 interface UseRemoteStreamOpts {
   instance: string;
diff --git a/src/api/hooks/streaming/useTimelineStream.ts b/src/api/hooks/streaming/useTimelineStream.ts
index 97328f7ae..8225e1da3 100644
--- a/src/api/hooks/streaming/useTimelineStream.ts
+++ b/src/api/hooks/streaming/useTimelineStream.ts
@@ -1,8 +1,8 @@
 import { useEffect, useRef } from 'react';
 
-import { connectTimelineStream } from 'soapbox/actions/streaming';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
-import { getAccessToken } from 'soapbox/utils/auth';
+import { connectTimelineStream } from 'soapbox/actions/streaming.ts';
+import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { getAccessToken } from 'soapbox/utils/auth.ts';
 
 function useTimelineStream(...args: Parameters<typeof connectTimelineStream>) {
   // TODO: get rid of streaming.ts and move the actual opts here.
diff --git a/src/api/hooks/streaming/useUserStream.ts b/src/api/hooks/streaming/useUserStream.ts
index f068b3c1c..9554917bc 100644
--- a/src/api/hooks/streaming/useUserStream.ts
+++ b/src/api/hooks/streaming/useUserStream.ts
@@ -1,11 +1,11 @@
-import { expandNotifications } from 'soapbox/actions/notifications';
-import { expandHomeTimeline } from 'soapbox/actions/timelines';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useLoggedIn } from 'soapbox/hooks';
+import { expandNotifications } from 'soapbox/actions/notifications.ts';
+import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useLoggedIn } from 'soapbox/hooks/index.ts';
 
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 function useUserStream() {
   const { isLoggedIn } = useLoggedIn();
diff --git a/src/api/hooks/zap-split/useZapSplit.ts b/src/api/hooks/zap-split/useZapSplit.ts
index 94451e946..3261907fe 100644
--- a/src/api/hooks/zap-split/useZapSplit.ts
+++ b/src/api/hooks/zap-split/useZapSplit.ts
@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 
-import { useApi } from 'soapbox/hooks';
-import { baseZapAccountSchema, type ZapSplitData } from 'soapbox/schemas/zap-split';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { baseZapAccountSchema, type ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
-import type { Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
+import type { Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities.ts';
 
 interface SplitValue {
   id: string;
diff --git a/src/api/index.ts b/src/api/index.ts
index 3e5f637a7..7a7e9aeaf 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -8,10 +8,10 @@ import axios, { type AxiosInstance, type AxiosResponse } from 'axios';
 import LinkHeader from 'http-link-header';
 import { createSelector } from 'reselect';
 
-import * as BuildConfig from 'soapbox/build-config';
-import { selectAccount } from 'soapbox/selectors';
-import { RootState } from 'soapbox/store';
-import { getAccessToken, getAppToken, isURL, parseBaseURL } from 'soapbox/utils/auth';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { RootState } from 'soapbox/store.ts';
+import { getAccessToken, getAppToken, isURL, parseBaseURL } from 'soapbox/utils/auth.ts';
 
 import type MockAdapter from 'axios-mock-adapter';
 
diff --git a/src/build-config.ts b/src/build-config.ts
index c742a1212..d8799de7e 100644
--- a/src/build-config.ts
+++ b/src/build-config.ts
@@ -1,4 +1,4 @@
-import type { SoapboxEnv } from './build-config-compiletime';
+import type { SoapboxEnv } from './build-config-compiletime.ts';
 
 export const {
   NODE_ENV,
diff --git a/src/components/account-search.tsx b/src/components/account-search.tsx
index 673cd5d66..5b78a12b1 100644
--- a/src/components/account-search.tsx
+++ b/src/components/account-search.tsx
@@ -4,9 +4,9 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
+import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
 
-import SvgIcon from './ui/icon/svg-icon';
+import SvgIcon from './ui/icon/svg-icon.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
diff --git a/src/components/account.test.tsx b/src/components/account.test.tsx
index ef1c4cf74..69f984831 100644
--- a/src/components/account.test.tsx
+++ b/src/components/account.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Account from './account';
+import Account from './account.tsx';
 
 describe('<Account />', () => {
   it('renders account name and username', () => {
diff --git a/src/components/account.tsx b/src/components/account.tsx
index e19936af1..11e35dc78 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -3,19 +3,19 @@ import { useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import { useAppSelector } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
-import { displayFqn } from 'soapbox/utils/state';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { getAcct } from 'soapbox/utils/accounts.ts';
+import { displayFqn } from 'soapbox/utils/state.ts';
 
-import Badge from './badge';
-import RelativeTimestamp from './relative-timestamp';
-import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
+import Badge from './badge.tsx';
+import RelativeTimestamp from './relative-timestamp.tsx';
+import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui/index.ts';
 
-import type { StatusApprovalStatus } from 'soapbox/normalizers/status';
-import type { Account as AccountSchema } from 'soapbox/schemas';
+import type { StatusApprovalStatus } from 'soapbox/normalizers/status.ts';
+import type { Account as AccountSchema } from 'soapbox/schemas/index.ts';
 
 interface IInstanceFavicon {
   account: AccountSchema;
diff --git a/src/components/animated-number.tsx b/src/components/animated-number.tsx
index 4fbe7eff2..123599246 100644
--- a/src/components/animated-number.tsx
+++ b/src/components/animated-number.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { FormattedNumber } from 'react-intl';
 import { TransitionMotion, spring } from 'react-motion';
 
-import { useSettings } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks/index.ts';
 
 const obfuscatedCount = (count: number) => {
   if (count < 0) {
diff --git a/src/components/announcements/announcement-content.tsx b/src/components/announcements/announcement-content.tsx
index c1f8fb5d9..92dfb605f 100644
--- a/src/components/announcements/announcement-content.tsx
+++ b/src/components/announcements/announcement-content.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { getTextDirection } from 'soapbox/utils/rtl';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/schemas';
+import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/schemas/index.ts';
 
 interface IAnnouncementContent {
   announcement: AnnouncementEntity;
diff --git a/src/components/announcements/announcement.tsx b/src/components/announcements/announcement.tsx
index 47a4d420e..add848c7e 100644
--- a/src/components/announcements/announcement.tsx
+++ b/src/components/announcements/announcement.tsx
@@ -1,14 +1,14 @@
 import { FormattedDate } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useFeatures } from 'soapbox/hooks/index.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import AnnouncementContent from './announcement-content';
-import ReactionsBar from './reactions-bar';
+import AnnouncementContent from './announcement-content.tsx';
+import ReactionsBar from './reactions-bar.tsx';
 
 import type { Map as ImmutableMap } from 'immutable';
-import type { Announcement as AnnouncementEntity } from 'soapbox/schemas';
+import type { Announcement as AnnouncementEntity } from 'soapbox/schemas/index.ts';
 
 interface IAnnouncement {
   announcement: AnnouncementEntity;
diff --git a/src/components/announcements/announcements-panel.tsx b/src/components/announcements/announcements-panel.tsx
index 5ef896b70..c72ece84c 100644
--- a/src/components/announcements/announcements-panel.tsx
+++ b/src/components/announcements/announcements-panel.tsx
@@ -5,13 +5,13 @@ import { FormattedMessage } from 'react-intl';
 import ReactSwipeableViews from 'react-swipeable-views';
 import { createSelector } from 'reselect';
 
-import { useAnnouncements } from 'soapbox/api/hooks/announcements';
-import { Card, HStack, Widget } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
+import { Card, HStack, Widget } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import Announcement from './announcement';
+import Announcement from './announcement.tsx';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const customEmojiMap = createSelector([(state: RootState) => state.custom_emojis], items => (items as ImmutableList<ImmutableMap<string, string>>).reduce((map, emoji) => map.set(emoji.get('shortcode')!, emoji), ImmutableMap<string, ImmutableMap<string, string>>()));
 
diff --git a/src/components/announcements/emoji.tsx b/src/components/announcements/emoji.tsx
index 1deddf26a..eb267038c 100644
--- a/src/components/announcements/emoji.tsx
+++ b/src/components/announcements/emoji.tsx
@@ -1,6 +1,6 @@
-import unicodeMapping from 'soapbox/features/emoji/mapping';
-import { useSettings } from 'soapbox/hooks';
-import { joinPublicPath } from 'soapbox/utils/static';
+import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
+import { useSettings } from 'soapbox/hooks/index.ts';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import type { Map as ImmutableMap } from 'immutable';
 
diff --git a/src/components/announcements/reaction.tsx b/src/components/announcements/reaction.tsx
index 23a6d1ef6..ad9c0704e 100644
--- a/src/components/announcements/reaction.tsx
+++ b/src/components/announcements/reaction.tsx
@@ -1,14 +1,14 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import { useAnnouncements } from 'soapbox/api/hooks/announcements';
-import AnimatedNumber from 'soapbox/components/animated-number';
-import unicodeMapping from 'soapbox/features/emoji/mapping';
+import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
+import AnimatedNumber from 'soapbox/components/animated-number.tsx';
+import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
 
-import Emoji from './emoji';
+import Emoji from './emoji.tsx';
 
 import type { Map as ImmutableMap } from 'immutable';
-import type { AnnouncementReaction } from 'soapbox/schemas';
+import type { AnnouncementReaction } from 'soapbox/schemas/index.ts';
 
 interface IReaction {
   announcementId: string;
diff --git a/src/components/announcements/reactions-bar.tsx b/src/components/announcements/reactions-bar.tsx
index ea778d408..ed4a5756a 100644
--- a/src/components/announcements/reactions-bar.tsx
+++ b/src/components/announcements/reactions-bar.tsx
@@ -1,15 +1,15 @@
 import clsx from 'clsx';
 import { TransitionMotion, spring } from 'react-motion';
 
-import { useAnnouncements } from 'soapbox/api/hooks/announcements';
-import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
-import { useSettings } from 'soapbox/hooks';
+import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
+import { useSettings } from 'soapbox/hooks/index.ts';
 
-import Reaction from './reaction';
+import Reaction from './reaction.tsx';
 
 import type { Map as ImmutableMap } from 'immutable';
-import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
-import type { AnnouncementReaction } from 'soapbox/schemas';
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji/index.ts';
+import type { AnnouncementReaction } from 'soapbox/schemas/index.ts';
 
 interface IReactionsBar {
   announcementId: string;
diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx
index 17fc301dc..a0a97a5c8 100644
--- a/src/components/attachment-thumbs.tsx
+++ b/src/components/attachment-thumbs.tsx
@@ -1,11 +1,11 @@
 import { Suspense } from 'react';
 
-import { openModal } from 'soapbox/actions/modals';
-import { MediaGallery } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { MediaGallery } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { List as ImmutableList } from 'immutable';
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 interface IAttachmentThumbs {
   media: ImmutableList<Attachment>;
diff --git a/src/components/authorize-reject-buttons.tsx b/src/components/authorize-reject-buttons.tsx
index c06ddb2be..afdd356c8 100644
--- a/src/components/authorize-reject-buttons.tsx
+++ b/src/components/authorize-reject-buttons.tsx
@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, IconButton, Text } from 'soapbox/components/ui';
+import { HStack, IconButton, Text } from 'soapbox/components/ui/index.ts';
 
 interface IAuthorizeRejectButtons {
   onAuthorize(): Promise<unknown> | unknown;
diff --git a/src/components/autosuggest-account-input.tsx b/src/components/autosuggest-account-input.tsx
index 843f419bb..95a0bf9e6 100644
--- a/src/components/autosuggest-account-input.tsx
+++ b/src/components/autosuggest-account-input.tsx
@@ -2,12 +2,12 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
 import { useState, useRef, useCallback, useEffect } from 'react';
 
-import { accountSearch } from 'soapbox/actions/accounts';
-import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import { useAppDispatch } from 'soapbox/hooks';
+import { accountSearch } from 'soapbox/actions/accounts.ts';
+import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import type { Menu } from 'soapbox/components/dropdown-menu';
-import type { InputThemes } from 'soapbox/components/ui/input/input';
+import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
+import type { InputThemes } from 'soapbox/components/ui/input/input.tsx';
 
 const noOp = () => { };
 
diff --git a/src/components/autosuggest-emoji.test.tsx b/src/components/autosuggest-emoji.test.tsx
index 265866c31..289a6ee8e 100644
--- a/src/components/autosuggest-emoji.test.tsx
+++ b/src/components/autosuggest-emoji.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import AutosuggestEmoji from './autosuggest-emoji';
+import AutosuggestEmoji from './autosuggest-emoji.tsx';
 
 describe('<AutosuggestEmoji />', () => {
   it('renders native emoji', () => {
diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx
index 35cc753f3..218d74012 100644
--- a/src/components/autosuggest-emoji.tsx
+++ b/src/components/autosuggest-emoji.tsx
@@ -1,8 +1,8 @@
-import { isCustomEmoji } from 'soapbox/features/emoji';
-import unicodeMapping from 'soapbox/features/emoji/mapping';
-import { joinPublicPath } from 'soapbox/utils/static';
+import { isCustomEmoji } from 'soapbox/features/emoji/index.ts';
+import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 interface IAutosuggestEmoji {
   emoji: Emoji;
diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index 5b9bd6373..75fb83c43 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -2,15 +2,15 @@ import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import { PureComponent } from 'react';
 
-import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
-import Icon from 'soapbox/components/icon';
-import { Input, Portal } from 'soapbox/components/ui';
-import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
-import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
+import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import { Input, Portal } from 'soapbox/components/ui/index.ts';
+import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account.tsx';
+import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
-import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
-import type { InputThemes } from 'soapbox/components/ui/input/input';
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
+import type { InputThemes } from 'soapbox/components/ui/input/input.tsx';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 export type AutoSuggestion = string | Emoji;
 
diff --git a/src/components/autosuggest-location.tsx b/src/components/autosuggest-location.tsx
index 026af6b47..91315ae85 100644
--- a/src/components/autosuggest-location.tsx
+++ b/src/components/autosuggest-location.tsx
@@ -3,9 +3,9 @@ import homeIcon from '@tabler/icons/outline/home-2.svg';
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import roadIcon from '@tabler/icons/outline/road.svg';
 
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import { HStack, Icon, Stack, Text } from './ui';
+import { HStack, Icon, Stack, Text } from './ui/index.ts';
 
 export const ADDRESS_ICONS: Record<string, string> = {
   house: homeIcon,
diff --git a/src/components/avatar-stack.tsx b/src/components/avatar-stack.tsx
index 4636e3a5f..bd5339654 100644
--- a/src/components/avatar-stack.tsx
+++ b/src/components/avatar-stack.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 
-import { Avatar, HStack } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
+import { Avatar, HStack } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
-import type { Account } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/types/entities.ts';
 
 const getAccount = makeGetAccount();
 
diff --git a/src/components/badge.test.tsx b/src/components/badge.test.tsx
index ea858fb34..b0f0cbe40 100644
--- a/src/components/badge.test.tsx
+++ b/src/components/badge.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Badge from './badge';
+import Badge from './badge.tsx';
 
 describe('<Badge />', () => {
   it('renders correctly', () => {
diff --git a/src/components/badge.tsx b/src/components/badge.tsx
index 8f9d6112b..a1ff9d587 100644
--- a/src/components/badge.tsx
+++ b/src/components/badge.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { hexToHsl } from 'soapbox/utils/theme';
+import { hexToHsl } from 'soapbox/utils/theme.ts';
 
 interface IBadge {
   title: React.ReactNode;
diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index 06c9459ac..77c8d5585 100644
--- a/src/components/big-card.tsx
+++ b/src/components/big-card.tsx
@@ -1,7 +1,7 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 
-import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Card, CardBody, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 const closeIcon = xIcon;
 
diff --git a/src/components/birthday-input.tsx b/src/components/birthday-input.tsx
index bec19d1f5..634b5ef36 100644
--- a/src/components/birthday-input.tsx
+++ b/src/components/birthday-input.tsx
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useInstance, useFeatures } from 'soapbox/hooks';
+import { useInstance, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Datetime } from './ui/datetime/datetime';
+import { Datetime } from './ui/datetime/datetime.tsx';
 
 const messages = defineMessages({
   birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
diff --git a/src/components/birthday-panel.tsx b/src/components/birthday-panel.tsx
index dd4da5d42..a4ece93be 100644
--- a/src/components/birthday-panel.tsx
+++ b/src/components/birthday-panel.tsx
@@ -2,10 +2,10 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
-import { Widget } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchBirthdayReminders } from 'soapbox/actions/accounts.ts';
+import { Widget } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const timeToMidnight = () => {
   const now = new Date();
diff --git a/src/components/copyable-input.tsx b/src/components/copyable-input.tsx
index 036209db7..b1ea4c926 100644
--- a/src/components/copyable-input.tsx
+++ b/src/components/copyable-input.tsx
@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, HStack, Input } from './ui';
+import { Button, HStack, Input } from './ui/index.ts';
 
 interface ICopyableInput {
   /** Text to be copied. */
diff --git a/src/components/display-name-inline.tsx b/src/components/display-name-inline.tsx
index 0db9fbc4b..67c75480b 100644
--- a/src/components/display-name-inline.tsx
+++ b/src/components/display-name-inline.tsx
@@ -1,11 +1,11 @@
-import { useSoapboxConfig } from 'soapbox/hooks';
+import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
-import { getAcct } from '../utils/accounts';
+import { getAcct } from '../utils/accounts.ts';
 
-import { HStack, Text } from './ui';
-import VerificationBadge from './verification-badge';
+import { HStack, Text } from './ui/index.ts';
+import VerificationBadge from './verification-badge.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IDisplayName {
   account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
diff --git a/src/components/display-name.test.tsx b/src/components/display-name.test.tsx
index cfc10a9ed..a9ce14e41 100644
--- a/src/components/display-name.test.tsx
+++ b/src/components/display-name.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import DisplayName from './display-name';
+import DisplayName from './display-name.tsx';
 
 describe('<DisplayName />', () => {
   it('renders display name + account name', () => {
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx
index 36bb57c40..08abed015 100644
--- a/src/components/display-name.tsx
+++ b/src/components/display-name.tsx
@@ -1,12 +1,12 @@
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
-import { getAcct } from '../utils/accounts';
+import { getAcct } from '../utils/accounts.ts';
 
-import { HStack, Text } from './ui';
-import VerificationBadge from './verification-badge';
+import { HStack, Text } from './ui/index.ts';
+import VerificationBadge from './verification-badge.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IDisplayName {
   account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
diff --git a/src/components/domain.tsx b/src/components/domain.tsx
index a25a2ed06..bdb4e59a2 100644
--- a/src/components/domain.tsx
+++ b/src/components/domain.tsx
@@ -1,10 +1,10 @@
 import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { unblockDomain } from 'soapbox/actions/domain-blocks';
-import { useAppDispatch } from 'soapbox/hooks';
+import { unblockDomain } from 'soapbox/actions/domain-blocks.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import { HStack, IconButton, Text } from './ui';
+import { HStack, IconButton, Text } from './ui/index.ts';
 
 const messages = defineMessages({
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
diff --git a/src/components/dropdown-menu/dropdown-menu-item.tsx b/src/components/dropdown-menu/dropdown-menu-item.tsx
index 2db996589..41d17a885 100644
--- a/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Counter, Icon } from '../ui';
+import { Counter, Icon } from 'soapbox/components/ui/index.ts';
 
 export interface MenuItem {
   action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 59bba080d..3e9231264 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -5,16 +5,16 @@ import { supportsPassiveEvents } from 'detect-passive-events';
 import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 'soapbox/actions/dropdown-menu';
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import { useAppDispatch } from 'soapbox/hooks';
-import { userTouching } from 'soapbox/is-mobile';
+import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 'soapbox/actions/dropdown-menu.ts';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
 
-import { IconButton, Portal } from '../ui';
+import { IconButton, Portal } from '../ui/index.ts';
 
-import DropdownMenuItem, { MenuItem } from './dropdown-menu-item';
+import DropdownMenuItem, { MenuItem } from './dropdown-menu-item.tsx';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 export type Menu = Array<MenuItem | null>;
 
diff --git a/src/components/dropdown-menu/index.ts b/src/components/dropdown-menu/index.ts
index 014166d01..780e5b9c7 100644
--- a/src/components/dropdown-menu/index.ts
+++ b/src/components/dropdown-menu/index.ts
@@ -1,3 +1,3 @@
-export { default } from './dropdown-menu';
-export type { Menu } from './dropdown-menu';
-export type { MenuItem } from './dropdown-menu-item';
\ No newline at end of file
+export { default } from './dropdown-menu.tsx';
+export type { Menu } from './dropdown-menu.tsx';
+export type { MenuItem } from './dropdown-menu-item.tsx';
\ No newline at end of file
diff --git a/src/components/emoji-graphic.tsx b/src/components/emoji-graphic.tsx
index 076133c7a..7ff4a0327 100644
--- a/src/components/emoji-graphic.tsx
+++ b/src/components/emoji-graphic.tsx
@@ -1,4 +1,4 @@
-import Emoji from 'soapbox/components/ui/emoji/emoji';
+import Emoji from 'soapbox/components/ui/emoji/emoji.tsx';
 
 interface IEmojiGraphic {
   emoji: string;
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index f22d80d8a..a58407147 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -3,15 +3,15 @@ import userIcon from '@tabler/icons/outline/user.svg';
 import clsx from 'clsx';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import EventActionButton from 'soapbox/features/event/components/event-action-button';
-import EventDate from 'soapbox/features/event/components/event-date';
-import { useAppSelector } from 'soapbox/hooks';
+import EventActionButton from 'soapbox/features/event/components/event-action-button.tsx';
+import EventDate from 'soapbox/features/event/components/event-date.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import Icon from './icon';
-import { Button, HStack, Stack, Text } from './ui';
-import VerificationBadge from './verification-badge';
+import Icon from './icon.tsx';
+import { Button, HStack, Stack, Text } from './ui/index.ts';
+import VerificationBadge from './verification-badge.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   eventBanner: { id: 'event.banner', defaultMessage: 'Event banner' },
diff --git a/src/components/extended-video-player.tsx b/src/components/extended-video-player.tsx
index bbab91384..ff37ce384 100644
--- a/src/components/extended-video-player.tsx
+++ b/src/components/extended-video-player.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-import { isIOS } from 'soapbox/is-mobile';
+import { isIOS } from 'soapbox/is-mobile.ts';
 
 interface IExtendedVideoPlayer {
   src: string;
diff --git a/src/components/gdpr-banner.tsx b/src/components/gdpr-banner.tsx
index 366b43359..06f5a3c6b 100644
--- a/src/components/gdpr-banner.tsx
+++ b/src/components/gdpr-banner.tsx
@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const acceptedGdpr = !!localStorage.getItem('soapbox:gdpr');
 
diff --git a/src/components/group-card.tsx b/src/components/group-card.tsx
index dc68f5c74..abcb18dac 100644
--- a/src/components/group-card.tsx
+++ b/src/components/group-card.tsx
@@ -1,12 +1,12 @@
-import GroupHeaderImage from 'soapbox/features/group/components/group-header-image';
-import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
-import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
-import GroupRelationship from 'soapbox/features/group/components/group-relationship';
+import GroupHeaderImage from 'soapbox/features/group/components/group-header-image.tsx';
+import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
+import GroupPrivacy from 'soapbox/features/group/components/group-privacy.tsx';
+import GroupRelationship from 'soapbox/features/group/components/group-relationship.tsx';
 
-import GroupAvatar from './groups/group-avatar';
-import { HStack, Stack, Text } from './ui';
+import GroupAvatar from './groups/group-avatar.tsx';
+import { HStack, Stack, Text } from './ui/index.ts';
 
-import type { Group as GroupEntity } from 'soapbox/types/entities';
+import type { Group as GroupEntity } from 'soapbox/types/entities.ts';
 
 interface IGroupCard {
   group: GroupEntity;
diff --git a/src/components/groups/group-avatar.tsx b/src/components/groups/group-avatar.tsx
index 856c63fa7..acfc92e2b 100644
--- a/src/components/groups/group-avatar.tsx
+++ b/src/components/groups/group-avatar.tsx
@@ -1,10 +1,9 @@
 import clsx from 'clsx';
 
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { Avatar } from 'soapbox/components/ui/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
-import { Avatar } from '../ui';
-
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 interface IGroupAvatar {
   group: Group;
diff --git a/src/components/groups/popover/group-popover.tsx b/src/components/groups/popover/group-popover.tsx
index 232a37278..6a2884d80 100644
--- a/src/components/groups/popover/group-popover.tsx
+++ b/src/components/groups/popover/group-popover.tsx
@@ -1,13 +1,13 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, matchPath, useHistory } from 'react-router-dom';
 
-import { Button, Divider, HStack, Popover, Stack, Text } from 'soapbox/components/ui';
-import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
-import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
+import { Button, Divider, HStack, Popover, Stack, Text } from 'soapbox/components/ui/index.ts';
+import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
+import GroupPrivacy from 'soapbox/features/group/components/group-privacy.tsx';
 
-import GroupAvatar from '../group-avatar';
+import GroupAvatar from '../group-avatar.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 interface IGroupPopoverContainer {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
diff --git a/src/components/hashtag-link.tsx b/src/components/hashtag-link.tsx
index 420f8f33a..9f1437e03 100644
--- a/src/components/hashtag-link.tsx
+++ b/src/components/hashtag-link.tsx
@@ -1,4 +1,4 @@
-import Link from './link';
+import Link from './link.tsx';
 
 interface IHashtagLink {
   hashtag: string;
diff --git a/src/components/hashtag.tsx b/src/components/hashtag.tsx
index 098993c1c..d8475baaa 100644
--- a/src/components/hashtag.tsx
+++ b/src/components/hashtag.tsx
@@ -2,11 +2,11 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 
-import { shortNumberFormat } from '../utils/numbers';
+import { shortNumberFormat } from '../utils/numbers.tsx';
 
-import { HStack, Stack, Text } from './ui';
+import { HStack, Stack, Text } from './ui/index.ts';
 
-import type { Tag } from 'soapbox/types/entities';
+import type { Tag } from 'soapbox/types/entities.ts';
 
 interface IHashtag {
   hashtag: Tag;
diff --git a/src/components/helmet.tsx b/src/components/helmet.tsx
index 0412bb6d5..286ad79dd 100644
--- a/src/components/helmet.tsx
+++ b/src/components/helmet.tsx
@@ -1,10 +1,10 @@
 import { useMemo, useEffect } from 'react';
 import { Helmet as ReactHelmet } from 'react-helmet';
 
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useAppSelector, useInstance, useSettings } from 'soapbox/hooks';
-import { RootState } from 'soapbox/store';
-import FaviconService from 'soapbox/utils/favicon-service';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useAppSelector, useInstance, useSettings } from 'soapbox/hooks/index.ts';
+import { RootState } from 'soapbox/store.ts';
+import FaviconService from 'soapbox/utils/favicon-service.ts';
 
 FaviconService.initFaviconService();
 
diff --git a/src/components/hover-ref-wrapper.tsx b/src/components/hover-ref-wrapper.tsx
index d822d1b0c..4e175533b 100644
--- a/src/components/hover-ref-wrapper.tsx
+++ b/src/components/hover-ref-wrapper.tsx
@@ -2,13 +2,13 @@ import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import { useRef } from 'react';
 
-import { fetchAccount } from 'soapbox/actions/accounts';
+import { fetchAccount } from 'soapbox/actions/accounts.ts';
 import {
   openProfileHoverCard,
   closeProfileHoverCard,
-} from 'soapbox/actions/profile-hover-card';
-import { useAppDispatch } from 'soapbox/hooks';
-import { isMobile } from 'soapbox/is-mobile';
+} from 'soapbox/actions/profile-hover-card.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { isMobile } from 'soapbox/is-mobile.ts';
 
 const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
   dispatch(openProfileHoverCard(ref, accountId));
diff --git a/src/components/hover-status-wrapper.tsx b/src/components/hover-status-wrapper.tsx
index 5f6ff4420..bc3b5cab1 100644
--- a/src/components/hover-status-wrapper.tsx
+++ b/src/components/hover-status-wrapper.tsx
@@ -6,8 +6,8 @@ import { useDispatch } from 'react-redux';
 import {
   openStatusHoverCard,
   closeStatusHoverCard,
-} from 'soapbox/actions/status-hover-card';
-import { isMobile } from 'soapbox/is-mobile';
+} from 'soapbox/actions/status-hover-card.ts';
+import { isMobile } from 'soapbox/is-mobile.ts';
 
 const showStatusHoverCard = debounce((dispatch, ref, statusId) => {
   dispatch(openStatusHoverCard(ref, statusId));
diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx
index 0cd96dec1..fea0c49f5 100644
--- a/src/components/icon-button.tsx
+++ b/src/components/icon-button.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import Icon from 'soapbox/components/icon';
+import Icon from 'soapbox/components/icon.tsx';
 
 interface IIconButton extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' | 'tabIndex' | 'title'> {
   active?: boolean;
diff --git a/src/components/icon-with-counter.tsx b/src/components/icon-with-counter.tsx
index ae77c5a93..7ccf29234 100644
--- a/src/components/icon-with-counter.tsx
+++ b/src/components/icon-with-counter.tsx
@@ -1,5 +1,5 @@
-import Icon, { IIcon } from 'soapbox/components/icon';
-import { Counter } from 'soapbox/components/ui';
+import Icon, { IIcon } from 'soapbox/components/icon.tsx';
+import { Counter } from 'soapbox/components/ui/index.ts';
 
 interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
   count: number;
diff --git a/src/components/list.tsx b/src/components/list.tsx
index 20d662345..3f0567c9e 100644
--- a/src/components/list.tsx
+++ b/src/components/list.tsx
@@ -4,9 +4,9 @@ import clsx from 'clsx';
 import { Children, cloneElement, isValidElement, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
-import { SelectDropdown } from '../features/forms';
+import { SelectDropdown } from '../features/forms/index.tsx';
 
-import { Icon, HStack, Select } from './ui';
+import { Icon, HStack, Select } from './ui/index.ts';
 
 interface IList {
   children: React.ReactNode;
diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx
index 2be5f19d9..8df07f224 100644
--- a/src/components/load-gap.tsx
+++ b/src/components/load-gap.tsx
@@ -1,7 +1,7 @@
 import dotsIcon from '@tabler/icons/outline/dots.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
+import Icon from 'soapbox/components/icon.tsx';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
diff --git a/src/components/load-more.tsx b/src/components/load-more.tsx
index 359f948df..354c445ea 100644
--- a/src/components/load-more.tsx
+++ b/src/components/load-more.tsx
@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from 'soapbox/components/ui';
+import { Button } from 'soapbox/components/ui/index.ts';
 
 interface ILoadMore {
   onClick: React.MouseEventHandler;
diff --git a/src/components/loading-screen.tsx b/src/components/loading-screen.tsx
index d3c76043e..248e3bbd3 100644
--- a/src/components/loading-screen.tsx
+++ b/src/components/loading-screen.tsx
@@ -1,5 +1,5 @@
-import LandingGradient from 'soapbox/components/landing-gradient';
-import { Spinner } from 'soapbox/components/ui';
+import LandingGradient from 'soapbox/components/landing-gradient.tsx';
+import { Spinner } from 'soapbox/components/ui/index.ts';
 
 /** Fullscreen loading indicator. */
 const LoadingScreen: React.FC = () => {
diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index 2415c91c0..ca476f8a3 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -6,12 +6,12 @@ import throttle from 'lodash/throttle';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { locationSearch } from 'soapbox/actions/events';
-import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import Icon from 'soapbox/components/icon';
-import { useAppDispatch } from 'soapbox/hooks';
+import { locationSearch } from 'soapbox/actions/events.ts';
+import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import AutosuggestLocation from './autosuggest-location';
+import AutosuggestLocation from './autosuggest-location.tsx';
 
 const noOp = () => {};
 
diff --git a/src/components/markup.tsx b/src/components/markup.tsx
index bdc91700b..19901d0b5 100644
--- a/src/components/markup.tsx
+++ b/src/components/markup.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import Text, { IText } from './ui/text/text';
+import Text, { IText } from './ui/text/text.tsx';
 import './markup.css';
 
 interface IMarkup extends IText {
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 5f6273037..3beebbb22 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -3,17 +3,17 @@ import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 
-import Blurhash from 'soapbox/components/blurhash';
-import StillImage from 'soapbox/components/still-image';
-import { MIMETYPE_ICONS } from 'soapbox/components/upload';
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { Attachment } from 'soapbox/types/entities';
-import { truncateFilename } from 'soapbox/utils/media';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import StillImage from 'soapbox/components/still-image.tsx';
+import { MIMETYPE_ICONS } from 'soapbox/components/upload.tsx';
+import { useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { Attachment } from 'soapbox/types/entities.ts';
+import { truncateFilename } from 'soapbox/utils/media.ts';
 
-import { isIOS } from '../is-mobile';
-import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio';
+import { isIOS } from '../is-mobile.ts';
+import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio.ts';
 
-import SvgIcon from './ui/icon/svg-icon';
+import SvgIcon from './ui/icon/svg-icon.tsx';
 
 import type { List as ImmutableList } from 'immutable';
 
diff --git a/src/components/mention.tsx b/src/components/mention.tsx
index ffb024256..c6fe5f251 100644
--- a/src/components/mention.tsx
+++ b/src/components/mention.tsx
@@ -1,10 +1,10 @@
 import { Link } from 'react-router-dom';
 
-import { shortenNostr } from 'soapbox/utils/nostr';
+import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
-import { Tooltip } from './ui';
+import { Tooltip } from './ui/index.ts';
 
-import type { Mention as MentionEntity } from 'soapbox/schemas';
+import type { Mention as MentionEntity } from 'soapbox/schemas/index.ts';
 
 interface IMention {
   mention: Pick<MentionEntity, 'acct' | 'username'>;
diff --git a/src/components/missing-indicator.tsx b/src/components/missing-indicator.tsx
index 7ff67dd23..caeab19d3 100644
--- a/src/components/missing-indicator.tsx
+++ b/src/components/missing-indicator.tsx
@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardBody, Stack, Text } from './ui';
+import { Card, CardBody, Stack, Text } from './ui/index.ts';
 
 interface MissingIndicatorProps {
   nested?: boolean;
diff --git a/src/components/modal-root.tsx b/src/components/modal-root.tsx
index 1b4ab3278..31388efd0 100644
--- a/src/components/modal-root.tsx
+++ b/src/components/modal-root.tsx
@@ -4,14 +4,14 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { cancelReplyCompose } from 'soapbox/actions/compose';
-import { cancelEventCompose } from 'soapbox/actions/events';
-import { openModal, closeModal } from 'soapbox/actions/modals';
-import { useAppDispatch, usePrevious } from 'soapbox/hooks';
+import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
+import { cancelEventCompose } from 'soapbox/actions/events.ts';
+import { openModal, closeModal } from 'soapbox/actions/modals.ts';
+import { useAppDispatch, usePrevious } from 'soapbox/hooks/index.ts';
 
-import type { ModalType } from 'soapbox/features/ui/components/modal-root';
-import type { ReducerCompose } from 'soapbox/reducers/compose';
-import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/compose-event';
+import type { ModalType } from 'soapbox/features/ui/components/modal-root.tsx';
+import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/compose-event.ts';
+import type { ReducerCompose } from 'soapbox/reducers/compose.ts';
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.cancel.confirm', defaultMessage: 'Discard' },
diff --git a/src/components/navlinks.tsx b/src/components/navlinks.tsx
index 81aa37ad5..560aa9988 100644
--- a/src/components/navlinks.tsx
+++ b/src/components/navlinks.tsx
@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui';
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import { Text } from 'soapbox/components/ui/index.ts';
+import { useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 interface INavlinks {
   type: string;
diff --git a/src/components/pending-items-row.tsx b/src/components/pending-items-row.tsx
index 5fc0a7637..5381ddc39 100644
--- a/src/components/pending-items-row.tsx
+++ b/src/components/pending-items-row.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
+import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
 
 interface IPendingItemsRow {
   /** Path to navigate the user when clicked. */
diff --git a/src/components/polls/poll-footer.test.tsx b/src/components/polls/poll-footer.test.tsx
index 39dd4ba18..38c0761b9 100644
--- a/src/components/polls/poll-footer.test.tsx
+++ b/src/components/polls/poll-footer.test.tsx
@@ -3,11 +3,11 @@ import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore, render, screen, rootState } from 'soapbox/jest/test-helpers';
-import { type Poll } from 'soapbox/schemas';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, render, screen, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { type Poll } from 'soapbox/schemas/index.ts';
 
-import PollFooter from './poll-footer';
+import PollFooter from './poll-footer.tsx';
 
 let poll: Poll = {
   id: '1',
diff --git a/src/components/polls/poll-footer.tsx b/src/components/polls/poll-footer.tsx
index 827bb8128..c00789099 100644
--- a/src/components/polls/poll-footer.tsx
+++ b/src/components/polls/poll-footer.tsx
@@ -1,12 +1,11 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchPoll, vote } from 'soapbox/actions/polls';
-import { useAppDispatch } from 'soapbox/hooks';
+import { fetchPoll, vote } from 'soapbox/actions/polls.ts';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
+import { Button, HStack, Stack, Text, Tooltip } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import RelativeTimestamp from '../relative-timestamp';
-import { Button, HStack, Stack, Text, Tooltip } from '../ui';
-
-import type { Poll as PollEntity } from 'soapbox/types/entities';
+import type { Poll as PollEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   closed: { id: 'poll.closed', defaultMessage: 'Closed' },
diff --git a/src/components/polls/poll-option.tsx b/src/components/polls/poll-option.tsx
index 049960750..6064e2ba6 100644
--- a/src/components/polls/poll-option.tsx
+++ b/src/components/polls/poll-option.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
 
-import { HStack, Icon, Text } from '../ui';
+import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
 
 import type {
   Poll as PollEntity,
diff --git a/src/components/polls/poll.tsx b/src/components/polls/poll.tsx
index add1c349f..8895b0a16 100644
--- a/src/components/polls/poll.tsx
+++ b/src/components/polls/poll.tsx
@@ -1,14 +1,13 @@
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { vote } from 'soapbox/actions/polls';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { vote } from 'soapbox/actions/polls.ts';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import { Stack, Text } from '../ui';
-
-import PollFooter from './poll-footer';
-import PollOption from './poll-option';
+import PollFooter from './poll-footer.tsx';
+import PollOption from './poll-option.tsx';
 
 interface IPoll {
   id: string;
diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index 445678c27..d579d7cd6 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -6,13 +6,13 @@ import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import { useState, useEffect } from 'react';
 
-import Blurhash from 'soapbox/components/blurhash';
-import { HStack, Stack, Text, Icon } from 'soapbox/components/ui';
-import { normalizeAttachment } from 'soapbox/normalizers';
-import { addAutoPlay } from 'soapbox/utils/media';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import { HStack, Stack, Text, Icon } from 'soapbox/components/ui/index.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
+import { addAutoPlay } from 'soapbox/utils/media.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import type { Card as CardEntity, Attachment } from 'soapbox/types/entities';
+import type { Card as CardEntity, Attachment } from 'soapbox/types/entities.ts';
 
 /** Props for `PreviewCard`. */
 interface IPreviewCard {
diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index 01039de16..23b6191a2 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -5,23 +5,24 @@ import { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchRelationships } from 'soapbox/actions/accounts';
+
+import { fetchRelationships } from 'soapbox/actions/accounts.ts';
 import {
   closeProfileHoverCard,
   updateProfileHoverCard,
-} from 'soapbox/actions/profile-hover-card';
-import { useAccount, usePatronUser } from 'soapbox/api/hooks';
-import Badge from 'soapbox/components/badge';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import { UserPanel } from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+} from 'soapbox/actions/profile-hover-card.ts';
+import { useAccount, usePatronUser } from 'soapbox/api/hooks/index.ts';
+import Badge from 'soapbox/components/badge.tsx';
+import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
+import { UserPanel } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import { showProfileHoverCard } from './hover-ref-wrapper';
-import { dateFormatOptions } from './relative-timestamp';
-import { Card, CardBody, HStack, Icon, Stack, Text } from './ui';
+import { showProfileHoverCard } from './hover-ref-wrapper.tsx';
+import { dateFormatOptions } from './relative-timestamp.tsx';
+import { Card, CardBody, HStack, Icon, Stack, Text } from './ui/index.ts';
 
-import type { Account, PatronUser } from 'soapbox/schemas';
-import type { AppDispatch } from 'soapbox/store';
+import type { Account, PatronUser } from 'soapbox/schemas/index.ts';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 const getBadges = (
   account?: Pick<Account, 'admin' | 'moderator'>,
diff --git a/src/components/pull-to-refresh.tsx b/src/components/pull-to-refresh.tsx
index 45e6fe443..39642ce39 100644
--- a/src/components/pull-to-refresh.tsx
+++ b/src/components/pull-to-refresh.tsx
@@ -1,6 +1,6 @@
 import PTRComponent from 'react-simple-pull-to-refresh';
 
-import { Spinner } from 'soapbox/components/ui';
+import { Spinner } from 'soapbox/components/ui/index.ts';
 
 interface IPullToRefresh {
   onRefresh?: () => Promise<any>;
diff --git a/src/components/pullable.tsx b/src/components/pullable.tsx
index d04eb00ef..d98a3158d 100644
--- a/src/components/pullable.tsx
+++ b/src/components/pullable.tsx
@@ -1,4 +1,4 @@
-import PullToRefresh from './pull-to-refresh';
+import PullToRefresh from './pull-to-refresh.tsx';
 
 interface IPullable {
   children: React.ReactNode;
diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx
index b310fd358..d761e1da6 100644
--- a/src/components/quoted-status-indicator.tsx
+++ b/src/components/quoted-status-indicator.tsx
@@ -1,9 +1,9 @@
 import quoteIcon from '@tabler/icons/outline/quote.svg';
 import { useCallback } from 'react';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusIndicator {
   /** The quoted status id. */
diff --git a/src/components/quoted-status.test.tsx b/src/components/quoted-status.test.tsx
index 6f29e8748..49dde1a8e 100644
--- a/src/components/quoted-status.test.tsx
+++ b/src/components/quoted-status.test.tsx
@@ -1,11 +1,11 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeStatus, normalizeAccount } from 'soapbox/normalizers';
+import { render, screen, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeStatus, normalizeAccount } from 'soapbox/normalizers/index.ts';
 
-import QuotedStatus from './quoted-status';
+import QuotedStatus from './quoted-status.tsx';
 
-import type { ReducerStatus } from 'soapbox/reducers/statuses';
+import type { ReducerStatus } from 'soapbox/reducers/statuses.ts';
 
 describe('<QuotedStatus />', () => {
   it('renders content', () => {
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index 42a84a238..654c016c5 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -4,20 +4,20 @@ import { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import StatusMedia from 'soapbox/components/status-media';
-import { Stack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useSettings } from 'soapbox/hooks';
-import { defaultMediaVisibility } from 'soapbox/utils/status';
+import StatusMedia from 'soapbox/components/status-media.tsx';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useSettings } from 'soapbox/hooks/index.ts';
+import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
-import EventPreview from './event-preview';
-import OutlineBox from './outline-box';
-import QuotedStatusIndicator from './quoted-status-indicator';
-import StatusContent from './status-content';
-import StatusReplyMentions from './status-reply-mentions';
-import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
+import EventPreview from './event-preview.tsx';
+import OutlineBox from './outline-box.tsx';
+import QuotedStatusIndicator from './quoted-status-indicator.tsx';
+import StatusContent from './status-content.tsx';
+import StatusReplyMentions from './status-reply-mentions.tsx';
+import SensitiveContentOverlay from './statuses/sensitive-content-overlay.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
diff --git a/src/components/radio.tsx b/src/components/radio.tsx
index d17920ffa..806bc8a8e 100644
--- a/src/components/radio.tsx
+++ b/src/components/radio.tsx
@@ -1,6 +1,6 @@
 import { Children, cloneElement } from 'react';
 
-import List, { ListItem } from './list';
+import List, { ListItem } from './list.tsx';
 
 interface IRadioGroup {
   onChange: React.ChangeEventHandler;
diff --git a/src/components/relative-timestamp.tsx b/src/components/relative-timestamp.tsx
index a1ea72123..27633fd3f 100644
--- a/src/components/relative-timestamp.tsx
+++ b/src/components/relative-timestamp.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { injectIntl, defineMessages, IntlShape, FormatDateOptions } from 'react-intl';
 
-import Text, { IText } from './ui/text/text';
+import Text, { IText } from './ui/text/text.tsx';
 
 const messages = defineMessages({
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
diff --git a/src/components/scroll-top-button.test.tsx b/src/components/scroll-top-button.test.tsx
index 387e9c843..0acba26fb 100644
--- a/src/components/scroll-top-button.test.tsx
+++ b/src/components/scroll-top-button.test.tsx
@@ -1,9 +1,9 @@
 import { defineMessages } from 'react-intl';
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import ScrollTopButton from './scroll-top-button';
+import ScrollTopButton from './scroll-top-button.tsx';
 
 const messages = defineMessages({
   queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 5e564aa2d..b74c98d8d 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -3,8 +3,8 @@ import throttle from 'lodash/throttle';
 import { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
 
-import { Icon, Text } from 'soapbox/components/ui';
-import { useSettings } from 'soapbox/hooks';
+import { Icon, Text } from 'soapbox/components/ui/index.ts';
+import { useSettings } from 'soapbox/hooks/index.ts';
 
 interface IScrollTopButton {
   /** Callback when clicked, and also when scrolled to the top. */
diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx
index 33ccb52ad..254e66c5b 100644
--- a/src/components/scrollable-list.tsx
+++ b/src/components/scrollable-list.tsx
@@ -3,10 +3,10 @@ import { useEffect, useRef, useMemo, useCallback, forwardRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso';
 
-import { useSettings } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks/index.ts';
 
-import LoadMore from './load-more';
-import { Card, Spinner } from './ui';
+import LoadMore from './load-more.tsx';
+import { Card, Spinner } from './ui/index.ts';
 
 /** Custom Viruoso component context. */
 type Context = {
diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
index 07dee7f79..559417119 100644
--- a/src/components/sentry-feedback-form.tsx
+++ b/src/components/sentry-feedback-form.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Textarea, Form, Button, FormGroup, FormActions, Text } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
-import { captureSentryFeedback } from 'soapbox/sentry';
+import { Textarea, Form, Button, FormGroup, FormActions, Text } from 'soapbox/components/ui/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { captureSentryFeedback } from 'soapbox/sentry.ts';
 
 interface ISentryFeedbackForm {
   eventId: string;
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index bf2dc3108..e2648f53a 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -21,18 +21,18 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, NavLink } from 'react-router-dom';
 
-import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
-import { getSettings } from 'soapbox/actions/settings';
-import { closeSidebar } from 'soapbox/actions/sidebar';
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
-import ProfileStats from 'soapbox/features/ui/components/profile-stats';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
-import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
-import { makeGetOtherAccounts } from 'soapbox/selectors';
+import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { closeSidebar } from 'soapbox/actions/sidebar.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui/index.ts';
+import ProfileStats from 'soapbox/features/ui/components/profile-stats.tsx';
+import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
+import { makeGetOtherAccounts } from 'soapbox/selectors/index.ts';
 
-import type { Account as AccountEntity } from 'soapbox/schemas/account';
+import type { Account as AccountEntity } from 'soapbox/schemas/account.ts';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
diff --git a/src/components/sidebar-navigation-link.tsx b/src/components/sidebar-navigation-link.tsx
index 944985704..0b3ec8ded 100644
--- a/src/components/sidebar-navigation-link.tsx
+++ b/src/components/sidebar-navigation-link.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
-import { Icon, Text } from './ui';
+import { Icon, Text } from './ui/index.ts';
 
 interface ISidebarNavigationLink {
   /** Notification count, if any. */
diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx
index 68783d639..3045c64e7 100644
--- a/src/components/sidebar-navigation.tsx
+++ b/src/components/sidebar-navigation.tsx
@@ -22,14 +22,14 @@ import userIcon from '@tabler/icons/outline/user.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Stack } from 'soapbox/components/ui';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import ComposeButton from 'soapbox/features/ui/components/compose-button';
-import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance } from 'soapbox/hooks';
-import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import ComposeButton from 'soapbox/features/ui/components/compose-button.tsx';
+import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance } from 'soapbox/hooks/index.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
-import DropdownMenu, { Menu } from './dropdown-menu';
-import SidebarNavigationLink from './sidebar-navigation-link';
+import DropdownMenu, { Menu } from './dropdown-menu/index.ts';
+import SidebarNavigationLink from './sidebar-navigation-link.tsx';
 
 const messages = defineMessages({
   follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 27b99dd1d..489efe91b 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -2,16 +2,16 @@ import { type ErrorInfo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
 
-import { NODE_ENV } from 'soapbox/build-config';
-import { HStack, Text, Stack, Textarea } from 'soapbox/components/ui';
-import { useSoapboxConfig } from 'soapbox/hooks';
-import { captureSentryException } from 'soapbox/sentry';
-import KVStore from 'soapbox/storage/kv-store';
-import sourceCode from 'soapbox/utils/code';
-import { unregisterSW } from 'soapbox/utils/sw';
+import { NODE_ENV } from 'soapbox/build-config.ts';
+import { HStack, Text, Stack, Textarea } from 'soapbox/components/ui/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { captureSentryException } from 'soapbox/sentry.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { unregisterSW } from 'soapbox/utils/sw.ts';
 
-import SentryFeedbackForm from './sentry-feedback-form';
-import SiteLogo from './site-logo';
+import SentryFeedbackForm from './sentry-feedback-form.tsx';
+import SiteLogo from './site-logo.tsx';
 
 interface ISiteErrorBoundary {
   children: React.ReactNode;
diff --git a/src/components/site-logo.tsx b/src/components/site-logo.tsx
index 9a21043a9..4b1ebc323 100644
--- a/src/components/site-logo.tsx
+++ b/src/components/site-logo.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import soapboxLogoWhiteSrc from 'soapbox/assets/images/soapbox-logo-white.svg';
 import soapboxLogoSrc from 'soapbox/assets/images/soapbox-logo.svg';
-import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
+import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks/index.ts';
 
 interface ISiteLogo extends React.ComponentProps<'img'> {
   /** Extra class names for the <img> element. */
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index e80cd1993..77202324a 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -33,33 +33,33 @@ import volume3Icon from '@tabler/icons/outline/volume-3.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
-import { blockAccount } from 'soapbox/actions/accounts';
-import { launchChat } from 'soapbox/actions/chats';
-import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose';
-import { editEvent } from 'soapbox/actions/events';
-import { pinToGroup, toggleBookmark, toggleDislike, toggleFavourite, togglePin, toggleReblog, unpinFromGroup } from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
-import { initMuteModal } from 'soapbox/actions/mutes';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses';
-import { deleteFromTimelines } from 'soapbox/actions/timelines';
-import { useBlockGroupMember, useGroup, useGroupRelationship, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks';
-import { useDeleteGroupStatus } from 'soapbox/api/hooks/groups/useDeleteGroupStatus';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import StatusActionButton from 'soapbox/components/status-action-button';
-import StatusReactionWrapper from 'soapbox/components/status-reaction-wrapper';
-import { HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
-import copy from 'soapbox/utils/copy';
-import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji-reacts';
+import { blockAccount } from 'soapbox/actions/accounts.ts';
+import { launchChat } from 'soapbox/actions/chats.ts';
+import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose.ts';
+import { editEvent } from 'soapbox/actions/events.ts';
+import { pinToGroup, toggleBookmark, toggleDislike, toggleFavourite, togglePin, toggleReblog, unpinFromGroup } from 'soapbox/actions/interactions.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation.tsx';
+import { initMuteModal } from 'soapbox/actions/mutes.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses.ts';
+import { deleteFromTimelines } from 'soapbox/actions/timelines.ts';
+import { useDeleteGroupStatus } from 'soapbox/api/hooks/groups/useDeleteGroupStatus.ts';
+import { useBlockGroupMember, useGroup, useGroupRelationship, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import StatusActionButton from 'soapbox/components/status-action-button.tsx';
+import StatusReactionWrapper from 'soapbox/components/status-reaction-wrapper.tsx';
+import { HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
+import copy from 'soapbox/utils/copy.ts';
+import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji-reacts.ts';
 
-import GroupPopover from './groups/popover/group-popover';
+import GroupPopover from './groups/popover/group-popover.tsx';
 
-import type { Menu } from 'soapbox/components/dropdown-menu';
-import type { Group, Status } from 'soapbox/types/entities';
+import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
+import type { Group, Status } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
diff --git a/src/components/status-action-button.tsx b/src/components/status-action-button.tsx
index e175b233f..7a15462ad 100644
--- a/src/components/status-action-button.tsx
+++ b/src/components/status-action-button.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 
-import { Text, Icon, Emoji } from 'soapbox/components/ui';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { Text, Icon, Emoji } from 'soapbox/components/ui/index.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import type { EmojiReaction } from 'soapbox/schemas';
+import type { EmojiReaction } from 'soapbox/schemas/index.ts';
 
 const COLORS = {
   accent: 'accent',
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 24b1ee4d7..26f1ce128 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -4,18 +4,18 @@ import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode }
 import { useState, useRef, useLayoutEffect, useMemo, memo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich-content';
+import Icon from 'soapbox/components/icon.tsx';
+import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich-content.ts';
 
-import { getTextDirection } from '../utils/rtl';
+import { getTextDirection } from '../utils/rtl.ts';
 
-import HashtagLink from './hashtag-link';
-import Markup from './markup';
-import Mention from './mention';
-import Poll from './polls/poll';
+import HashtagLink from './hashtag-link.tsx';
+import Markup from './markup.tsx';
+import Mention from './mention.tsx';
+import Poll from './polls/poll.tsx';
 
-import type { Sizes } from 'soapbox/components/ui/text/text';
-import type { Status } from 'soapbox/types/entities';
+import type { Sizes } from 'soapbox/components/ui/text/text.tsx';
+import type { Status } from 'soapbox/types/entities.ts';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
 const BIG_EMOJI_LIMIT = 10;
diff --git a/src/components/status-hover-card.tsx b/src/components/status-hover-card.tsx
index 7daa342f5..0093cdfdb 100644
--- a/src/components/status-hover-card.tsx
+++ b/src/components/status-hover-card.tsx
@@ -6,13 +6,13 @@ import { useHistory } from 'react-router-dom';
 import {
   closeStatusHoverCard,
   updateStatusHoverCard,
-} from 'soapbox/actions/status-hover-card';
-import { fetchStatus } from 'soapbox/actions/statuses';
-import StatusContainer from 'soapbox/containers/status-container';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+} from 'soapbox/actions/status-hover-card.ts';
+import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import { showStatusHoverCard } from './hover-status-wrapper';
-import { Card, CardBody } from './ui';
+import { showStatusHoverCard } from './hover-status-wrapper.tsx';
+import { Card, CardBody } from './ui/index.ts';
 
 interface IStatusHoverCard {
   visible?: boolean;
diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx
index 769c1cdf5..b634b703f 100644
--- a/src/components/status-list.tsx
+++ b/src/components/status-list.tsx
@@ -3,17 +3,17 @@ import debounce from 'lodash/debounce';
 import { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import LoadGap from 'soapbox/components/load-gap';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import StatusContainer from 'soapbox/containers/status-container';
-import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import PendingStatus from 'soapbox/features/ui/components/pending-status';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import LoadGap from 'soapbox/components/load-gap.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { IScrollableList } from 'soapbox/components/scrollable-list';
+import type { IScrollableList } from 'soapbox/components/scrollable-list.tsx';
 
 interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
   /** Unique key to preserve the scroll position when navigating back. */
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index cc82eed80..ad725ed1c 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -1,15 +1,16 @@
 import { Suspense } from 'react';
 
-import { openModal } from 'soapbox/actions/modals';
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import PreviewCard from 'soapbox/components/preview-card';
-import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview';
-import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
-import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch } from 'soapbox/hooks';
+
+import { openModal } from 'soapbox/actions/modals.ts';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import PreviewCard from 'soapbox/components/preview-card.tsx';
+import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview.tsx';
+import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card.tsx';
+import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { List as ImmutableList } from 'immutable';
-import type { Status, Attachment } from 'soapbox/types/entities';
+import type { Status, Attachment } from 'soapbox/types/entities.ts';
 
 interface IStatusMedia {
   /** Status entity to render media for. */
diff --git a/src/components/status-reaction-wrapper.tsx b/src/components/status-reaction-wrapper.tsx
index db3109ea4..ab76dd866 100644
--- a/src/components/status-reaction-wrapper.tsx
+++ b/src/components/status-reaction-wrapper.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect, useRef, cloneElement } from 'react';
 
-import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
-import { openModal } from 'soapbox/actions/modals';
-import { EmojiSelector, Portal } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
-import { userTouching } from 'soapbox/is-mobile';
-import { getReactForStatus } from 'soapbox/utils/emoji-reacts';
+import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { EmojiSelector, Portal } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
+import { getReactForStatus } from 'soapbox/utils/emoji-reacts.ts';
 
 interface IStatusReactionWrapper {
   statusId: string;
diff --git a/src/components/status-reply-mentions.tsx b/src/components/status-reply-mentions.tsx
index 06df6338c..5179d8e7e 100644
--- a/src/components/status-reply-mentions.tsx
+++ b/src/components/status-reply-mentions.tsx
@@ -1,13 +1,13 @@
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper';
-import { useAppDispatch } from 'soapbox/hooks';
-import { shortenNostr } from 'soapbox/utils/nostr';
+import { openModal } from 'soapbox/actions/modals.ts';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 interface IStatusReplyMentions {
   status: Status;
diff --git a/src/components/status.test.tsx b/src/components/status.test.tsx
index e78d805f4..b5dec5eb7 100644
--- a/src/components/status.test.tsx
+++ b/src/components/status.test.tsx
@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, screen, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeStatus } from 'soapbox/normalizers';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, screen, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
 
-import Status from './status';
+import Status from './status.tsx';
 
-import type { ReducerStatus } from 'soapbox/reducers/statuses';
+import type { ReducerStatus } from 'soapbox/reducers/statuses.ts';
 
 const account = buildAccount({
   id: '1',
diff --git a/src/components/status.tsx b/src/components/status.tsx
index 577bdd2f9..45d146504 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -6,28 +6,28 @@ import { useEffect, useRef, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
-import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses';
-import TranslateButton from 'soapbox/components/translate-button';
-import AccountContainer from 'soapbox/containers/account-container';
-import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
-import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
-import { useAppDispatch, useSettings } from 'soapbox/hooks';
-import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status';
+import { mentionCompose, replyCompose } from 'soapbox/actions/compose.ts';
+import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses.ts';
+import TranslateButton from 'soapbox/components/translate-button.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
+import { useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status.ts';
 
-import EventPreview from './event-preview';
-import StatusActionBar from './status-action-bar';
-import StatusContent from './status-content';
-import StatusMedia from './status-media';
-import StatusReplyMentions from './status-reply-mentions';
-import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
-import StatusInfo from './statuses/status-info';
-import Tombstone from './tombstone';
-import { Card, Icon, Stack, Text } from './ui';
+import EventPreview from './event-preview.tsx';
+import StatusActionBar from './status-action-bar.tsx';
+import StatusContent from './status-content.tsx';
+import StatusMedia from './status-media.tsx';
+import StatusReplyMentions from './status-reply-mentions.tsx';
+import SensitiveContentOverlay from './statuses/sensitive-content-overlay.tsx';
+import StatusInfo from './statuses/status-info.tsx';
+import Tombstone from './tombstone.tsx';
+import { Card, Icon, Stack, Text } from './ui/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 // Defined in components/scrollable-list
 export type ScrollPosition = { height: number; top: number };
diff --git a/src/components/statuses/sensitive-content-overlay.test.tsx b/src/components/statuses/sensitive-content-overlay.test.tsx
index b998321cc..7b49c5618 100644
--- a/src/components/statuses/sensitive-content-overlay.test.tsx
+++ b/src/components/statuses/sensitive-content-overlay.test.tsx
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { fireEvent, render, rootState, screen } from 'soapbox/jest/test-helpers';
-import { normalizeStatus } from 'soapbox/normalizers';
-import { ReducerStatus } from 'soapbox/reducers/statuses';
+import { fireEvent, render, rootState, screen } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { ReducerStatus } from 'soapbox/reducers/statuses.ts';
 
-import SensitiveContentOverlay from './sensitive-content-overlay';
+import SensitiveContentOverlay from './sensitive-content-overlay.tsx';
 
 describe('<SensitiveContentOverlay />', () => {
   let status: ReducerStatus;
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index d1aedcf67..4268f513b 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -7,15 +7,15 @@ import clsx from 'clsx';
 import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { deleteStatus } from 'soapbox/actions/statuses';
-import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { defaultMediaVisibility } from 'soapbox/utils/status';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { deleteStatus } from 'soapbox/actions/statuses.ts';
+import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
-import DropdownMenu from '../dropdown-menu';
-import { Button, HStack, Text } from '../ui';
+import DropdownMenu from '../dropdown-menu/index.ts';
+import { Button, HStack, Text } from '../ui/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
diff --git a/src/components/statuses/status-info.tsx b/src/components/statuses/status-info.tsx
index 288c5e018..289112a8d 100644
--- a/src/components/statuses/status-info.tsx
+++ b/src/components/statuses/status-info.tsx
@@ -1,4 +1,4 @@
-import { HStack, Text } from '../ui';
+import { HStack, Text } from 'soapbox/components/ui/index.ts';
 
 interface IStatusInfo {
   avatarSize: number;
diff --git a/src/components/still-image.tsx b/src/components/still-image.tsx
index 3f788de12..f142e7c35 100644
--- a/src/components/still-image.tsx
+++ b/src/components/still-image.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useRef } from 'react';
 
-import { useSettings } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks/index.ts';
 
 export interface IStillImage {
   /** Image alt text. */
diff --git a/src/components/thumb-navigation-link.tsx b/src/components/thumb-navigation-link.tsx
index e395d5884..83792f0fd 100644
--- a/src/components/thumb-navigation-link.tsx
+++ b/src/components/thumb-navigation-link.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { NavLink, useLocation } from 'react-router-dom';
 
-import IconWithCounter from 'soapbox/components/icon-with-counter';
-import { Icon, Text } from 'soapbox/components/ui';
+import IconWithCounter from 'soapbox/components/icon-with-counter.tsx';
+import { Icon, Text } from 'soapbox/components/ui/index.ts';
 
 interface IThumbNavigationLink {
   count?: number;
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index 21f4805f2..cfa577c42 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -11,9 +11,9 @@ import messagesIcon from '@tabler/icons/outline/messages.svg';
 import searchIcon from '@tabler/icons/outline/search.svg';
 import { FormattedMessage } from 'react-intl';
 
-import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link.tsx';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
 
 const ThumbNavigation: React.FC = (): JSX.Element => {
   const { account } = useOwnAccount();
diff --git a/src/components/tombstone.tsx b/src/components/tombstone.tsx
index b11142b94..a0094adc0 100644
--- a/src/components/tombstone.tsx
+++ b/src/components/tombstone.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Text } from 'soapbox/components/ui';
-import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
+import { Text } from 'soapbox/components/ui/index.ts';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
 
 interface ITombstone {
   id: string;
diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx
index 71b425d32..ddb250c5e 100644
--- a/src/components/translate-button.tsx
+++ b/src/components/translate-button.tsx
@@ -1,12 +1,12 @@
 import languageIcon from '@tabler/icons/outline/language.svg';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
+import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses.ts';
+import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
 
-import { Stack, Button, Text } from './ui';
+import { Stack, Button, Text } from './ui/index.ts';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 interface ITranslateButton {
   status: Status;
diff --git a/src/components/ui/accordion/accordion.tsx b/src/components/ui/accordion/accordion.tsx
index ca301a813..4c0a89d41 100644
--- a/src/components/ui/accordion/accordion.tsx
+++ b/src/components/ui/accordion/accordion.tsx
@@ -4,13 +4,13 @@ import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 
-import DropdownMenu from 'soapbox/components/dropdown-menu';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
-import Text from '../text/text';
+import HStack from '../hstack/hstack.tsx';
+import Icon from '../icon/icon.tsx';
+import Text from '../text/text.tsx';
 
-import type { Menu } from 'soapbox/components/dropdown-menu';
+import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
 
 const messages = defineMessages({
   collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse' },
diff --git a/src/components/ui/avatar/avatar.test.tsx b/src/components/ui/avatar/avatar.test.tsx
index 1bd9fb519..3c54f77a7 100644
--- a/src/components/ui/avatar/avatar.test.tsx
+++ b/src/components/ui/avatar/avatar.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Avatar from './avatar';
+import Avatar from './avatar.tsx';
 
 const src = '/static/alice.jpg';
 
diff --git a/src/components/ui/avatar/avatar.tsx b/src/components/ui/avatar/avatar.tsx
index 7bdd0a52e..ed6522119 100644
--- a/src/components/ui/avatar/avatar.tsx
+++ b/src/components/ui/avatar/avatar.tsx
@@ -2,9 +2,9 @@ import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 
-import StillImage, { IStillImage } from 'soapbox/components/still-image';
+import StillImage, { IStillImage } from 'soapbox/components/still-image.tsx';
 
-import Icon from '../icon/icon';
+import Icon from '../icon/icon.tsx';
 
 const AVATAR_SIZE = 42;
 
diff --git a/src/components/ui/button/button.test.tsx b/src/components/ui/button/button.test.tsx
index a28e1da05..80a0ebfa0 100644
--- a/src/components/ui/button/button.test.tsx
+++ b/src/components/ui/button/button.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
+import { fireEvent, render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Button from './button';
+import Button from './button.tsx';
 
 describe('<Button />', () => {
   it('renders the given text', () => {
diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx
index 09061ee3d..1f69c9bf9 100644
--- a/src/components/ui/button/button.tsx
+++ b/src/components/ui/button/button.tsx
@@ -2,11 +2,11 @@ import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
-import Icon from '../icon/icon';
+import Icon from '../icon/icon.tsx';
 
-import { useButtonStyles } from './useButtonStyles';
+import { useButtonStyles } from './useButtonStyles.ts';
 
-import type { ButtonSizes, ButtonThemes } from './useButtonStyles';
+import type { ButtonSizes, ButtonThemes } from './useButtonStyles.tsx';
 
 interface IButton {
   /** Whether this button expands the width of its container. */
diff --git a/src/components/ui/card/card.test.tsx b/src/components/ui/card/card.test.tsx
index a7b4609af..24dad8289 100644
--- a/src/components/ui/card/card.test.tsx
+++ b/src/components/ui/card/card.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import { Card, CardBody, CardHeader, CardTitle } from './card';
+import { Card, CardBody, CardHeader, CardTitle } from './card.tsx';
 
 describe('<Card />', () => {
   it('renders the CardTitle and CardBody', () => {
diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card/card.tsx
index e7a811c80..025b62aff 100644
--- a/src/components/ui/card/card.tsx
+++ b/src/components/ui/card/card.tsx
@@ -4,10 +4,10 @@ import { forwardRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
 
-import HStack from '../hstack/hstack';
-import Text from '../text/text';
+import HStack from '../hstack/hstack.tsx';
+import Text from '../text/text.tsx';
 
 const sizes = {
   md: 'p-4 sm:rounded-xl',
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel/carousel.tsx
index 4f2efd8ce..eee2b2f50 100644
--- a/src/components/ui/carousel/carousel.tsx
+++ b/src/components/ui/carousel/carousel.tsx
@@ -2,10 +2,10 @@ import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import { useEffect, useState } from 'react';
 
-import { useDimensions } from 'soapbox/hooks';
+import { useDimensions } from 'soapbox/hooks/index.ts';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
+import HStack from '../hstack/hstack.tsx';
+import Icon from '../icon/icon.tsx';
 
 interface ICarousel {
   children: any;
diff --git a/src/components/ui/column/column.test.tsx b/src/components/ui/column/column.test.tsx
index de53e8d3e..ec9db1c35 100644
--- a/src/components/ui/column/column.test.tsx
+++ b/src/components/ui/column/column.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import { Column } from './column';
+import { Column } from './column.tsx';
 
 describe('<Column />', () => {
   it('renders correctly with minimal props', () => {
diff --git a/src/components/ui/column/column.tsx b/src/components/ui/column/column.tsx
index 18b8d4c58..48844a50b 100644
--- a/src/components/ui/column/column.tsx
+++ b/src/components/ui/column/column.tsx
@@ -3,10 +3,10 @@ import throttle from 'lodash/throttle';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import Helmet from 'soapbox/components/helmet';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import Helmet from 'soapbox/components/helmet.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
-import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card';
+import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card.tsx';
 
 type IColumnHeader = Pick<IColumn, 'label' | 'backHref' | 'className' | 'action'>;
 
diff --git a/src/components/ui/counter/counter.tsx b/src/components/ui/counter/counter.tsx
index 1372a1df4..a58b7d6de 100644
--- a/src/components/ui/counter/counter.tsx
+++ b/src/components/ui/counter/counter.tsx
@@ -1,4 +1,4 @@
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface ICounter {
   /** Number this counter should display. */
diff --git a/src/components/ui/datepicker/datepicker.test.tsx b/src/components/ui/datepicker/datepicker.test.tsx
index a31f4683c..0a1acdceb 100644
--- a/src/components/ui/datepicker/datepicker.test.tsx
+++ b/src/components/ui/datepicker/datepicker.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { queryAllByRole, render, screen } from 'soapbox/jest/test-helpers';
+import { queryAllByRole, render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Datepicker from './datepicker';
+import Datepicker from './datepicker.tsx';
 
 describe('<Datepicker />', () => {
   it('defaults to the current date', () => {
diff --git a/src/components/ui/datepicker/datepicker.tsx b/src/components/ui/datepicker/datepicker.tsx
index b6e36a20c..b841b22c3 100644
--- a/src/components/ui/datepicker/datepicker.tsx
+++ b/src/components/ui/datepicker/datepicker.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import Select from '../select/select';
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Select from '../select/select.tsx';
+import Stack from '../stack/stack.tsx';
+import Text from '../text/text.tsx';
 
 const getDaysInMonth = (month: number, year: number) => new Date(year, month + 1, 0).getDate();
 const currentYear = new Date().getFullYear();
diff --git a/src/components/ui/datetime/datetime.tsx b/src/components/ui/datetime/datetime.tsx
index 0244508c1..ddd9c8e0d 100644
--- a/src/components/ui/datetime/datetime.tsx
+++ b/src/components/ui/datetime/datetime.tsx
@@ -1,4 +1,4 @@
-import Input from '../input/input';
+import Input from '../input/input.tsx';
 
 interface DatetimeProps {
   value: Date;
diff --git a/src/components/ui/divider/divider.test.tsx b/src/components/ui/divider/divider.test.tsx
index 62e827749..9ab816728 100644
--- a/src/components/ui/divider/divider.test.tsx
+++ b/src/components/ui/divider/divider.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Divider from './divider';
+import Divider from './divider.tsx';
 
 describe('<Divider />', () => {
   it('renders without text', () => {
diff --git a/src/components/ui/divider/divider.tsx b/src/components/ui/divider/divider.tsx
index 7ccb9c8be..76eb66440 100644
--- a/src/components/ui/divider/divider.tsx
+++ b/src/components/ui/divider/divider.tsx
@@ -1,6 +1,6 @@
-import Text from '../text/text';
+import Text from '../text/text.tsx';
 
-import type { Sizes as TextSizes } from '../text/text';
+import type { Sizes as TextSizes } from '../text/text.tsx';
 
 interface IDivider {
   text?: string;
diff --git a/src/components/ui/emoji-selector/emoji-selector.tsx b/src/components/ui/emoji-selector/emoji-selector.tsx
index e14ef4010..6c06bc7ce 100644
--- a/src/components/ui/emoji-selector/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector/emoji-selector.tsx
@@ -3,13 +3,13 @@ import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
-import EmojiComponent from 'soapbox/components/ui/emoji/emoji';
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
-import { useClickOutside, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
+import EmojiComponent from 'soapbox/components/ui/emoji/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import { useClickOutside, useFeatures, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 interface IEmojiButton {
   /** Unicode emoji character. */
diff --git a/src/components/ui/emoji/emoji.test.tsx b/src/components/ui/emoji/emoji.test.tsx
index aaab7e1bf..737c4dc31 100644
--- a/src/components/ui/emoji/emoji.test.tsx
+++ b/src/components/ui/emoji/emoji.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Emoji from './emoji';
+import Emoji from './emoji.tsx';
 
 describe('<Emoji />', () => {
   it('renders a simple emoji', () => {
diff --git a/src/components/ui/emoji/emoji.tsx b/src/components/ui/emoji/emoji.tsx
index ce673c482..ae33d6376 100644
--- a/src/components/ui/emoji/emoji.tsx
+++ b/src/components/ui/emoji/emoji.tsx
@@ -1,5 +1,5 @@
-import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji';
-import { joinPublicPath } from 'soapbox/utils/static';
+import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji.ts';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
   /** Unicode emoji character. */
diff --git a/src/components/ui/form-actions/form-actions.test.tsx b/src/components/ui/form-actions/form-actions.test.tsx
index 925e02006..cfbc53763 100644
--- a/src/components/ui/form-actions/form-actions.test.tsx
+++ b/src/components/ui/form-actions/form-actions.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import FormActions from './form-actions';
+import FormActions from './form-actions.tsx';
 
 describe('<FormActions />', () => {
   it('renders successfully', () => {
diff --git a/src/components/ui/form-actions/form-actions.tsx b/src/components/ui/form-actions/form-actions.tsx
index f67f90a18..f7e3c2d92 100644
--- a/src/components/ui/form-actions/form-actions.tsx
+++ b/src/components/ui/form-actions/form-actions.tsx
@@ -1,4 +1,4 @@
-import HStack from '../hstack/hstack';
+import HStack from '../hstack/hstack.tsx';
 
 interface IFormActions {
   children: React.ReactNode;
diff --git a/src/components/ui/form-group/form-group.test.tsx b/src/components/ui/form-group/form-group.test.tsx
index 5fe0e2fa4..e6ee15b7f 100644
--- a/src/components/ui/form-group/form-group.test.tsx
+++ b/src/components/ui/form-group/form-group.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import FormGroup from './form-group';
+import FormGroup from './form-group.tsx';
 
 describe('<FormGroup />', () => {
   it('connects the label and input', () => {
diff --git a/src/components/ui/form-group/form-group.tsx b/src/components/ui/form-group/form-group.tsx
index 023f15036..9eb2bb6f4 100644
--- a/src/components/ui/form-group/form-group.tsx
+++ b/src/components/ui/form-group/form-group.tsx
@@ -1,8 +1,8 @@
 import { Children, cloneElement, isValidElement, useMemo } from 'react';
 
-import Checkbox from '../checkbox/checkbox';
-import HStack from '../hstack/hstack';
-import Stack from '../stack/stack';
+import Checkbox from '../checkbox/checkbox.tsx';
+import HStack from '../hstack/hstack.tsx';
+import Stack from '../stack/stack.tsx';
 
 interface IFormGroup {
   /** Input label message. */
diff --git a/src/components/ui/form/form.test.tsx b/src/components/ui/form/form.test.tsx
index 3f603961d..d375b6238 100644
--- a/src/components/ui/form/form.test.tsx
+++ b/src/components/ui/form/form.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
+import { fireEvent, render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Form from './form';
+import Form from './form.tsx';
 
 describe('<Form />', () => {
   it('renders children', () => {
diff --git a/src/components/ui/icon-button/icon-button.tsx b/src/components/ui/icon-button/icon-button.tsx
index 57e798356..e6c19a7b9 100644
--- a/src/components/ui/icon-button/icon-button.tsx
+++ b/src/components/ui/icon-button/icon-button.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 
-import SvgIcon from '../icon/svg-icon';
-import Text from '../text/text';
+import SvgIcon from '../icon/svg-icon.tsx';
+import Text from '../text/text.tsx';
 
 interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Class name for the <svg> icon. */
diff --git a/src/components/ui/icon/icon.tsx b/src/components/ui/icon/icon.tsx
index 2210a5bd5..6c64774d9 100644
--- a/src/components/ui/icon/icon.tsx
+++ b/src/components/ui/icon/icon.tsx
@@ -1,6 +1,6 @@
-import Counter from '../counter/counter';
+import Counter from '../counter/counter.tsx';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from './svg-icon.tsx';
 
 interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   /** Class name for the <svg> element. */
diff --git a/src/components/ui/icon/svg-icon.test.tsx b/src/components/ui/icon/svg-icon.test.tsx
index f1ac5f127..fae051a19 100644
--- a/src/components/ui/icon/svg-icon.test.tsx
+++ b/src/components/ui/icon/svg-icon.test.tsx
@@ -1,9 +1,9 @@
 import IconCode from '@tabler/icons/outline/code.svg';
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from './svg-icon.tsx';
 
 describe('<SvgIcon />', () => {
   it('renders loading element with default size', async () => {
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index c565641f4..3b0b51128 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -1,11 +1,11 @@
-export { default as Accordion } from './accordion/accordion';
-export { default as Avatar } from './avatar/avatar';
-export { default as Banner } from './banner/banner';
-export { default as Button } from './button/button';
-export { default as Carousel } from './carousel/carousel';
-export { Card, CardBody, CardHeader, CardTitle } from './card/card';
-export { default as Checkbox } from './checkbox/checkbox';
-export { Column, ColumnHeader } from './column/column';
+export { default as Accordion } from './accordion/accordion.tsx';
+export { default as Avatar } from './avatar/avatar.tsx';
+export { default as Banner } from './banner/banner.tsx';
+export { default as Button } from './button/button.tsx';
+export { default as Carousel } from './carousel/carousel.tsx';
+export { Card, CardBody, CardHeader, CardTitle } from './card/card.tsx';
+export { default as Checkbox } from './checkbox/checkbox.tsx';
+export { Column, ColumnHeader } from './column/column.tsx';
 export {
   Combobox,
   ComboboxInput,
@@ -13,21 +13,21 @@ export {
   ComboboxList,
   ComboboxOption,
   ComboboxOptionText,
-} from './combobox/combobox';
-export { default as Counter } from './counter/counter';
-export { default as Datepicker } from './datepicker/datepicker';
-export { default as Divider } from './divider/divider';
-export { default as Emoji } from './emoji/emoji';
-export { default as EmojiSelector } from './emoji-selector/emoji-selector';
-export { default as FileInput } from './file-input/file-input';
-export { default as Form } from './form/form';
-export { default as FormActions } from './form-actions/form-actions';
-export { default as FormGroup } from './form-group/form-group';
-export { default as HStack } from './hstack/hstack';
-export { default as Icon } from './icon/icon';
-export { default as IconButton } from './icon-button/icon-button';
-export { default as Input } from './input/input';
-export { default as Layout } from './layout/layout';
+} from './combobox/combobox.tsx';
+export { default as Counter } from './counter/counter.tsx';
+export { default as Datepicker } from './datepicker/datepicker.tsx';
+export { default as Divider } from './divider/divider.tsx';
+export { default as Emoji } from './emoji/emoji.tsx';
+export { default as EmojiSelector } from './emoji-selector/emoji-selector.tsx';
+export { default as FileInput } from './file-input/file-input.tsx';
+export { default as Form } from './form/form.tsx';
+export { default as FormActions } from './form-actions/form-actions.tsx';
+export { default as FormGroup } from './form-group/form-group.tsx';
+export { default as HStack } from './hstack/hstack.tsx';
+export { default as Icon } from './icon/icon.tsx';
+export { default as IconButton } from './icon-button/icon-button.tsx';
+export { default as Input } from './input/input.tsx';
+export { default as Layout } from './layout/layout.tsx';
 export {
   Menu,
   MenuButton,
@@ -36,22 +36,22 @@ export {
   MenuItems,
   MenuLink,
   MenuList,
-} from './menu/menu';
-export { default as Modal } from './modal/modal';
-export { default as Popover } from './popover/popover';
-export { default as Portal } from './portal/portal';
-export { default as ProgressBar } from './progress-bar/progress-bar';
-export { default as RadioButton } from './radio-button/radio-button';
-export { default as Select } from './select/select';
-export { default as Slider } from './slider/slider';
-export { default as Spinner } from './spinner/spinner';
-export { default as Stack } from './stack/stack';
-export { default as Streamfield } from './streamfield/streamfield';
-export { default as Tabs } from './tabs/tabs';
-export { default as TagInput } from './tag-input/tag-input';
-export { default as Text } from './text/text';
-export { default as Textarea } from './textarea/textarea';
-export { default as Toast } from './toast/toast';
-export { default as Toggle } from './toggle/toggle';
-export { default as Tooltip } from './tooltip/tooltip';
-export { default as Widget } from './widget/widget';
+} from './menu/menu.tsx';
+export { default as Modal } from './modal/modal.tsx';
+export { default as Popover } from './popover/popover.tsx';
+export { default as Portal } from './portal/portal.tsx';
+export { default as ProgressBar } from './progress-bar/progress-bar.tsx';
+export { default as RadioButton } from './radio-button/radio-button.tsx';
+export { default as Select } from './select/select.tsx';
+export { default as Slider } from './slider/slider.tsx';
+export { default as Spinner } from './spinner/spinner.tsx';
+export { default as Stack } from './stack/stack.tsx';
+export { default as Streamfield } from './streamfield/streamfield.tsx';
+export { default as Tabs } from './tabs/tabs.tsx';
+export { default as TagInput } from './tag-input/tag-input.tsx';
+export { default as Text } from './text/text.tsx';
+export { default as Textarea } from './textarea/textarea.tsx';
+export { default as Toast } from './toast/toast.tsx';
+export { default as Toggle } from './toggle/toggle.tsx';
+export { default as Tooltip } from './tooltip/tooltip.tsx';
+export { default as Widget } from './widget/widget.tsx';
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
index 6ee646fff..9de3a7e06 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input/input.tsx
@@ -4,12 +4,12 @@ import clsx from 'clsx';
 import React, { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useLocale } from 'soapbox/hooks';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import { useLocale } from 'soapbox/hooks/index.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import Icon from '../icon/icon';
-import SvgIcon from '../icon/svg-icon';
-import Tooltip from '../tooltip/tooltip';
+import Icon from '../icon/icon.tsx';
+import SvgIcon from '../icon/svg-icon.tsx';
+import Tooltip from '../tooltip/tooltip.tsx';
 
 const messages = defineMessages({
   showPassword: { id: 'input.password.show_password', defaultMessage: 'Show password' },
diff --git a/src/components/ui/language-dropdown/language-dropdown.tsx b/src/components/ui/language-dropdown/language-dropdown.tsx
index a5046f696..a8f0d5232 100644
--- a/src/components/ui/language-dropdown/language-dropdown.tsx
+++ b/src/components/ui/language-dropdown/language-dropdown.tsx
@@ -1,10 +1,10 @@
 import worldIcon from '@tabler/icons/outline/world.svg';
 
-import { openDropdownMenu } from 'soapbox/actions/dropdown-menu';
-import DropdownMenu, { MenuItem } from 'soapbox/components/dropdown-menu';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { languages } from 'soapbox/features/preferences';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openDropdownMenu } from 'soapbox/actions/dropdown-menu.ts';
+import DropdownMenu, { MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import { languages } from 'soapbox/features/preferences/index.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 function formatLanguages(languageMap: Record<string, string>) {
   const langCodes = Object.keys(languageMap).sort().map((sig) => {
diff --git a/src/components/ui/modal/modal.test.tsx b/src/components/ui/modal/modal.test.tsx
index a60eb224a..88daaa586 100644
--- a/src/components/ui/modal/modal.test.tsx
+++ b/src/components/ui/modal/modal.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Modal from './modal';
+import Modal from './modal.tsx';
 
 describe('<Modal />', () => {
   it('renders', () => {
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal/modal.tsx
index 9ee860535..17932c586 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -4,10 +4,10 @@ import clsx from 'clsx';
 import { forwardRef, useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import Button from '../button/button';
-import { ButtonThemes } from '../button/useButtonStyles';
-import HStack from '../hstack/hstack';
-import IconButton from '../icon-button/icon-button';
+import Button from '../button/button.tsx';
+import { ButtonThemes } from '../button/useButtonStyles.ts';
+import HStack from '../hstack/hstack.tsx';
+import IconButton from '../icon-button/icon-button.tsx';
 
 const messages = defineMessages({
   back: { id: 'card.back.label', defaultMessage: 'Back' },
diff --git a/src/components/ui/popover/popover.tsx b/src/components/ui/popover/popover.tsx
index 18d3d8010..54f5fdc14 100644
--- a/src/components/ui/popover/popover.tsx
+++ b/src/components/ui/popover/popover.tsx
@@ -13,7 +13,7 @@ import {
 import clsx from 'clsx';
 import { cloneElement, useRef, useState } from 'react';
 
-import Portal from '../portal/portal';
+import Portal from '../portal/portal.tsx';
 
 interface IPopover {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
diff --git a/src/components/ui/progress-bar/progress-bar.tsx b/src/components/ui/progress-bar/progress-bar.tsx
index 41ca380ee..5e7a643fa 100644
--- a/src/components/ui/progress-bar/progress-bar.tsx
+++ b/src/components/ui/progress-bar/progress-bar.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { spring } from 'react-motion';
 
-import Motion from 'soapbox/features/ui/util/optional-motion';
+import Motion from 'soapbox/features/ui/util/optional-motion.tsx';
 
 interface IProgressBar {
   /** Number between 0 and 1 to represent the percentage complete. */
diff --git a/src/components/ui/radio-button/radio-button.tsx b/src/components/ui/radio-button/radio-button.tsx
index ef385a4cc..d1dce47e4 100644
--- a/src/components/ui/radio-button/radio-button.tsx
+++ b/src/components/ui/radio-button/radio-button.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import HStack from '../hstack/hstack';
+import HStack from '../hstack/hstack.tsx';
 
 interface IRadioButton {
   value: string;
diff --git a/src/components/ui/spinner/spinner.tsx b/src/components/ui/spinner/spinner.tsx
index 31de33512..a3b9797af 100644
--- a/src/components/ui/spinner/spinner.tsx
+++ b/src/components/ui/spinner/spinner.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Stack from '../stack/stack.tsx';
+import Text from '../text/text.tsx';
 
 import './spinner.css';
 
diff --git a/src/components/ui/streamfield/streamfield.tsx b/src/components/ui/streamfield/streamfield.tsx
index af7ae100c..72af083c3 100644
--- a/src/components/ui/streamfield/streamfield.tsx
+++ b/src/components/ui/streamfield/streamfield.tsx
@@ -1,11 +1,11 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import Button from '../button/button';
-import HStack from '../hstack/hstack';
-import IconButton from '../icon-button/icon-button';
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Button from '../button/button.tsx';
+import HStack from '../hstack/hstack.tsx';
+import IconButton from '../icon-button/icon-button.tsx';
+import Stack from '../stack/stack.tsx';
+import Text from '../text/text.tsx';
 
 const messages = defineMessages({
   add: { id: 'streamfield.add', defaultMessage: 'Add' },
diff --git a/src/components/ui/tabs/tabs.tsx b/src/components/ui/tabs/tabs.tsx
index a1f63ddde..bd0437459 100644
--- a/src/components/ui/tabs/tabs.tsx
+++ b/src/components/ui/tabs/tabs.tsx
@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import Counter from '../counter/counter';
+import Counter from '../counter/counter.tsx';
 
 import './tabs.css';
 
diff --git a/src/components/ui/tag-input/tag-input.tsx b/src/components/ui/tag-input/tag-input.tsx
index db8404bbb..9162e0cfe 100644
--- a/src/components/ui/tag-input/tag-input.tsx
+++ b/src/components/ui/tag-input/tag-input.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
-import HStack from '../hstack/hstack';
+import HStack from '../hstack/hstack.tsx';
 
-import Tag from './tag';
+import Tag from './tag.tsx';
 
 interface ITagInput {
   tags: string[];
diff --git a/src/components/ui/tag-input/tag.tsx b/src/components/ui/tag-input/tag.tsx
index 1cbcf4302..1c8ea6e12 100644
--- a/src/components/ui/tag-input/tag.tsx
+++ b/src/components/ui/tag-input/tag.tsx
@@ -1,7 +1,7 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 
-import IconButton from '../icon-button/icon-button';
-import Text from '../text/text';
+import IconButton from '../icon-button/icon-button.tsx';
+import Text from '../text/text.tsx';
 
 interface ITag {
   /** Name of the tag. */
diff --git a/src/components/ui/textarea/textarea.tsx b/src/components/ui/textarea/textarea.tsx
index 5e2c8d0c2..5546d19df 100644
--- a/src/components/ui/textarea/textarea.tsx
+++ b/src/components/ui/textarea/textarea.tsx
@@ -2,11 +2,11 @@ import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useLocale } from 'soapbox/hooks';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import { useLocale } from 'soapbox/hooks/index.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Stack from '../stack/stack.tsx';
+import Text from '../text/text.tsx';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'maxLength' | 'onChange' | 'onClick' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
diff --git a/src/components/ui/toast/toast.tsx b/src/components/ui/toast/toast.tsx
index e53e4ccb3..4c9e24346 100644
--- a/src/components/ui/toast/toast.tsx
+++ b/src/components/ui/toast/toast.tsx
@@ -7,12 +7,12 @@ import toast, { Toast as RHToast } from 'react-hot-toast';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { ToastText, ToastType } from 'soapbox/toast';
+import { ToastText, ToastType } from 'soapbox/toast.tsx';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import HStack from '../hstack/hstack.tsx';
+import Icon from '../icon/icon.tsx';
+import Stack from '../stack/stack.tsx';
+import Text from '../text/text.tsx';
 
 const renderText = (text: ToastText) => {
   if (typeof text === 'string') {
diff --git a/src/components/ui/widget/widget.tsx b/src/components/ui/widget/widget.tsx
index 0bc3d87bb..37df917e9 100644
--- a/src/components/ui/widget/widget.tsx
+++ b/src/components/ui/widget/widget.tsx
@@ -1,9 +1,9 @@
 import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
 
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import Stack from 'soapbox/components/ui/stack/stack';
-import Text from 'soapbox/components/ui/text/text';
+import HStack from 'soapbox/components/ui/hstack/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack/stack.tsx';
+import Text from 'soapbox/components/ui/text/text.tsx';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
diff --git a/src/components/upload-progress.tsx b/src/components/upload-progress.tsx
index a20adc502..d6870e8b0 100644
--- a/src/components/upload-progress.tsx
+++ b/src/components/upload-progress.tsx
@@ -1,7 +1,7 @@
 import cloudUploadIcon from '@tabler/icons/outline/cloud-upload.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, ProgressBar, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Icon, ProgressBar, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 interface IUploadProgress {
   /** Number between 0 and 100 to represent the percentage complete. */
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index b4b781e7b..582f2207f 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -14,14 +14,14 @@ import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { spring } from 'react-motion';
 
-import { openModal } from 'soapbox/actions/modals';
+import { openModal } from 'soapbox/actions/modals.ts';
 import AudioPlaceHolder from 'soapbox/assets/images/audio-placeholder.png';
 import VideoPlaceHolder from 'soapbox/assets/images/video-placeholder.png';
-import Blurhash from 'soapbox/components/blurhash';
-import { HStack, Icon, IconButton } from 'soapbox/components/ui';
-import Motion from 'soapbox/features/ui/util/optional-motion';
-import { useAppDispatch, useSettings } from 'soapbox/hooks';
-import { Attachment } from 'soapbox/types/entities';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import { HStack, Icon, IconButton } from 'soapbox/components/ui/index.ts';
+import Motion from 'soapbox/features/ui/util/optional-motion.tsx';
+import { useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import { Attachment } from 'soapbox/types/entities.ts';
 
 export const MIMETYPE_ICONS: Record<string, string> = {
   'application/x-freearc': fileZipIcon,
diff --git a/src/components/validation-checkmark.test.tsx b/src/components/validation-checkmark.test.tsx
index ab9c27638..8e1db5e18 100644
--- a/src/components/validation-checkmark.test.tsx
+++ b/src/components/validation-checkmark.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import ValidationCheckmark from './validation-checkmark';
+import ValidationCheckmark from './validation-checkmark.tsx';
 
 describe('<ValidationCheckmark />', () => {
   it('renders text', () => {
diff --git a/src/components/validation-checkmark.tsx b/src/components/validation-checkmark.tsx
index 01f5ac754..be8cdc087 100644
--- a/src/components/validation-checkmark.tsx
+++ b/src/components/validation-checkmark.tsx
@@ -2,7 +2,7 @@ import checkIcon from '@tabler/icons/outline/check.svg';
 import pointIcon from '@tabler/icons/outline/point.svg';
 import clsx from 'clsx';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
+import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
 
 interface IValidationCheckmark {
   isValid: boolean;
diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx
index 7c2c28500..deb5b1969 100644
--- a/src/components/verification-badge.tsx
+++ b/src/components/verification-badge.tsx
@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import { useIntl, defineMessages } from 'react-intl';
 
 import verifiedIcon from 'soapbox/assets/icons/verified.svg';
-import { Icon } from 'soapbox/components/ui';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import { Icon } from 'soapbox/components/ui/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   verified: { id: 'account.verified', defaultMessage: 'Verified Account' },
diff --git a/src/containers/account-container.tsx b/src/containers/account-container.tsx
index 5fdb55449..e71720fe1 100644
--- a/src/containers/account-container.tsx
+++ b/src/containers/account-container.tsx
@@ -1,5 +1,5 @@
-import { useAccount } from 'soapbox/api/hooks';
-import Account, { IAccount } from 'soapbox/components/account';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account, { IAccount } from 'soapbox/components/account.tsx';
 
 interface IAccountContainer extends Omit<IAccount, 'account'> {
   id: string;
diff --git a/src/containers/status-container.tsx b/src/containers/status-container.tsx
index 7afb8e41b..46ffff09a 100644
--- a/src/containers/status-container.tsx
+++ b/src/containers/status-container.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
-import Status, { IStatus } from 'soapbox/components/status';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import Status, { IStatus } from 'soapbox/components/status.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IStatusContainer extends Omit<IStatus, 'status'> {
   id: string;
diff --git a/src/contexts/chat-context.tsx b/src/contexts/chat-context.tsx
index 1e4d78213..069320b75 100644
--- a/src/contexts/chat-context.tsx
+++ b/src/contexts/chat-context.tsx
@@ -1,9 +1,9 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 
-import { toggleMainWindow } from 'soapbox/actions/chats';
-import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks';
-import { IChat, useChat } from 'soapbox/queries/chats';
+import { toggleMainWindow } from 'soapbox/actions/chats.ts';
+import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import { IChat, useChat } from 'soapbox/queries/chats.ts';
 
 const ChatContext = createContext<any>({
   isOpen: false,
diff --git a/src/contexts/nostr-context.tsx b/src/contexts/nostr-context.tsx
index 5366cd35f..a5cad214e 100644
--- a/src/contexts/nostr-context.tsx
+++ b/src/contexts/nostr-context.tsx
@@ -1,7 +1,7 @@
 import { NRelay1 } from '@nostrify/nostrify';
 import { createContext, useContext, useState, useEffect } from 'react';
 
-import { useInstance } from 'soapbox/hooks/useInstance';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 interface NostrContextType {
   relay?: NRelay1;
diff --git a/src/custom.ts b/src/custom.ts
index dcbcba547..96ff58e34 100644
--- a/src/custom.ts
+++ b/src/custom.ts
@@ -1,7 +1,7 @@
 /**
  * Functions for dealing with custom build configuration.
  */
-import * as BuildConfig from 'soapbox/build-config';
+import * as BuildConfig from 'soapbox/build-config.ts';
 
 /** Require a custom JSON file if it exists */
 export const custom = (filename: string, fallback: any = {}): any => {
diff --git a/src/entity-store/actions.ts b/src/entity-store/actions.ts
index 27549b826..07b6fe7ce 100644
--- a/src/entity-store/actions.ts
+++ b/src/entity-store/actions.ts
@@ -1,4 +1,4 @@
-import type { EntitiesTransaction, Entity, EntityListState, ImportPosition } from './types';
+import type { EntitiesTransaction, Entity, EntityListState, ImportPosition } from './types.ts';
 
 const ENTITIES_IMPORT = 'ENTITIES_IMPORT' as const;
 const ENTITIES_DELETE = 'ENTITIES_DELETE' as const;
diff --git a/src/entity-store/entities.ts b/src/entity-store/entities.ts
index 13cdf4eaa..ade683f34 100644
--- a/src/entity-store/entities.ts
+++ b/src/entity-store/entities.ts
@@ -1,4 +1,4 @@
-import type * as Schemas from 'soapbox/schemas';
+import type * as Schemas from 'soapbox/schemas/index.ts';
 
 enum Entities {
   ACCOUNTS = 'Accounts',
diff --git a/src/entity-store/hooks/index.ts b/src/entity-store/hooks/index.ts
index 52a5fc499..ccf1fe645 100644
--- a/src/entity-store/hooks/index.ts
+++ b/src/entity-store/hooks/index.ts
@@ -1,10 +1,10 @@
-export { useEntities } from './useEntities';
-export { useEntity } from './useEntity';
-export { useEntityActions } from './useEntityActions';
-export { useEntityLookup } from './useEntityLookup';
-export { useCreateEntity } from './useCreateEntity';
-export { useDeleteEntity } from './useDeleteEntity';
-export { useDismissEntity } from './useDismissEntity';
-export { useIncrementEntity } from './useIncrementEntity';
-export { useChangeEntity } from './useChangeEntity';
-export { useTransaction } from './useTransaction';
\ No newline at end of file
+export { useEntities } from './useEntities.ts';
+export { useEntity } from './useEntity.ts';
+export { useEntityActions } from './useEntityActions.ts';
+export { useEntityLookup } from './useEntityLookup.ts';
+export { useCreateEntity } from './useCreateEntity.ts';
+export { useDeleteEntity } from './useDeleteEntity.ts';
+export { useDismissEntity } from './useDismissEntity.ts';
+export { useIncrementEntity } from './useIncrementEntity.ts';
+export { useChangeEntity } from './useChangeEntity.ts';
+export { useTransaction } from './useTransaction.ts';
\ No newline at end of file
diff --git a/src/entity-store/hooks/types.ts b/src/entity-store/hooks/types.ts
index b3ec5937a..32a2e64ea 100644
--- a/src/entity-store/hooks/types.ts
+++ b/src/entity-store/hooks/types.ts
@@ -1,4 +1,4 @@
-import type { Entity } from '../types';
+import type { Entity } from '../types.ts';
 import type z from 'zod';
 
 type EntitySchema<TEntity extends Entity = Entity> = z.ZodType<TEntity, z.ZodTypeDef, any>;
diff --git a/src/entity-store/hooks/useBatchedEntities.ts b/src/entity-store/hooks/useBatchedEntities.ts
index f6b0d9437..f70fb4a2f 100644
--- a/src/entity-store/hooks/useBatchedEntities.ts
+++ b/src/entity-store/hooks/useBatchedEntities.ts
@@ -1,19 +1,19 @@
 import { useEffect } from 'react';
 import { z } from 'zod';
 
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector';
-import { useGetState } from 'soapbox/hooks/useGetState';
-import { filteredArray } from 'soapbox/schemas/utils';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
 
-import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess } from '../actions';
-import { selectCache, selectListState, useListState } from '../selectors';
+import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess } from '../actions.ts';
+import { selectCache, selectListState, useListState } from '../selectors.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntitiesPath, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types';
-import type { Entity } from '../types';
-import type { RootState } from 'soapbox/store';
+import type { EntitiesPath, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types.ts';
+import type { Entity } from '../types.ts';
+import type { RootState } from 'soapbox/store.ts';
 
 interface UseBatchedEntitiesOpts<TEntity extends Entity> {
   schema?: EntitySchema<TEntity>;
diff --git a/src/entity-store/hooks/useChangeEntity.ts b/src/entity-store/hooks/useChangeEntity.ts
index 670c3a486..66df1a725 100644
--- a/src/entity-store/hooks/useChangeEntity.ts
+++ b/src/entity-store/hooks/useChangeEntity.ts
@@ -1,8 +1,8 @@
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { type Entity } from 'soapbox/entity-store/types';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useGetState } from 'soapbox/hooks/useGetState';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { type Entity } from 'soapbox/entity-store/types.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
 
 type ChangeEntityFn<TEntity extends Entity> = (entity: TEntity) => TEntity
 
diff --git a/src/entity-store/hooks/useCreateEntity.ts b/src/entity-store/hooks/useCreateEntity.ts
index 77eea017c..c3f519146 100644
--- a/src/entity-store/hooks/useCreateEntity.ts
+++ b/src/entity-store/hooks/useCreateEntity.ts
@@ -1,15 +1,15 @@
 import { z } from 'zod';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { importEntities } from '../actions';
+import { importEntities } from '../actions.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntityCallbacks, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types';
-import type { Entity } from '../types';
+import type { EntityCallbacks, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types.ts';
+import type { Entity } from '../types.ts';
 
 interface UseCreateEntityOpts<TEntity extends Entity = Entity> {
   schema?: EntitySchema<TEntity>;
diff --git a/src/entity-store/hooks/useDeleteEntity.ts b/src/entity-store/hooks/useDeleteEntity.ts
index b406c0534..cea850c2d 100644
--- a/src/entity-store/hooks/useDeleteEntity.ts
+++ b/src/entity-store/hooks/useDeleteEntity.ts
@@ -1,10 +1,10 @@
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useGetState } from 'soapbox/hooks/useGetState';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { deleteEntities, importEntities } from '../actions';
+import { deleteEntities, importEntities } from '../actions.ts';
 
-import type { EntityCallbacks, EntityFn } from './types';
+import type { EntityCallbacks, EntityFn } from './types.ts';
 
 /**
  * Optimistically deletes an entity from the store.
diff --git a/src/entity-store/hooks/useDismissEntity.ts b/src/entity-store/hooks/useDismissEntity.ts
index a9bd531a3..d106de66d 100644
--- a/src/entity-store/hooks/useDismissEntity.ts
+++ b/src/entity-store/hooks/useDismissEntity.ts
@@ -1,11 +1,11 @@
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { dismissEntities } from '../actions';
+import { dismissEntities } from '../actions.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntityFn, ExpandedEntitiesPath } from './types';
+import type { EntityFn, ExpandedEntitiesPath } from './types.ts';
 
 /**
  * Removes an entity from a specific list.
diff --git a/src/entity-store/hooks/useEntities.ts b/src/entity-store/hooks/useEntities.ts
index 45c65eb93..f23ca8514 100644
--- a/src/entity-store/hooks/useEntities.ts
+++ b/src/entity-store/hooks/useEntities.ts
@@ -2,20 +2,20 @@ import LinkHeader from 'http-link-header';
 import { useEffect } from 'react';
 import z from 'zod';
 
-import { useApi } from 'soapbox/hooks/useApi';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector';
-import { useGetState } from 'soapbox/hooks/useGetState';
-import { filteredArray } from 'soapbox/schemas/utils';
-import { realNumberSchema } from 'soapbox/utils/numbers';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
+import { realNumberSchema } from 'soapbox/utils/numbers.tsx';
 
-import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess, invalidateEntityList } from '../actions';
-import { selectEntities, selectListState, useListState } from '../selectors';
+import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess, invalidateEntityList } from '../actions.ts';
+import { selectEntities, selectListState, useListState } from '../selectors.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntityFn, EntitySchema, ExpandedEntitiesPath } from './types';
-import type { Entity } from '../types';
+import type { EntityFn, EntitySchema, ExpandedEntitiesPath } from './types.ts';
+import type { Entity } from '../types.ts';
 
 /** Additional options for the hook. */
 interface UseEntitiesOpts<TEntity extends Entity> {
diff --git a/src/entity-store/hooks/useEntity.ts b/src/entity-store/hooks/useEntity.ts
index 2e6734f9c..6c16583d6 100644
--- a/src/entity-store/hooks/useEntity.ts
+++ b/src/entity-store/hooks/useEntity.ts
@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
 import z from 'zod';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { importEntities } from '../actions';
-import { selectEntity } from '../selectors';
+import { importEntities } from '../actions.ts';
+import { selectEntity } from '../selectors.ts';
 
-import type { EntitySchema, EntityPath, EntityFn } from './types';
-import type { Entity } from '../types';
+import type { EntitySchema, EntityPath, EntityFn } from './types.ts';
+import type { Entity } from '../types.ts';
 
 /** Additional options for the hook. */
 interface UseEntityOpts<TEntity extends Entity> {
diff --git a/src/entity-store/hooks/useEntityActions.ts b/src/entity-store/hooks/useEntityActions.ts
index b038946f3..386e746ef 100644
--- a/src/entity-store/hooks/useEntityActions.ts
+++ b/src/entity-store/hooks/useEntityActions.ts
@@ -1,11 +1,11 @@
-import { useApi } from 'soapbox/hooks/useApi';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
-import { useCreateEntity } from './useCreateEntity';
-import { useDeleteEntity } from './useDeleteEntity';
-import { parseEntitiesPath } from './utils';
+import { useCreateEntity } from './useCreateEntity.ts';
+import { useDeleteEntity } from './useDeleteEntity.ts';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntitySchema, ExpandedEntitiesPath } from './types';
-import type { Entity } from '../types';
+import type { EntitySchema, ExpandedEntitiesPath } from './types.ts';
+import type { Entity } from '../types.ts';
 
 interface UseEntityActionsOpts<TEntity extends Entity = Entity> {
   schema?: EntitySchema<TEntity>;
diff --git a/src/entity-store/hooks/useEntityLookup.ts b/src/entity-store/hooks/useEntityLookup.ts
index da3553281..13e5d72da 100644
--- a/src/entity-store/hooks/useEntityLookup.ts
+++ b/src/entity-store/hooks/useEntityLookup.ts
@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { importEntities } from '../actions';
-import { findEntity } from '../selectors';
-import { Entity } from '../types';
+import { importEntities } from '../actions.ts';
+import { findEntity } from '../selectors.ts';
+import { Entity } from '../types.ts';
 
-import { EntityFn } from './types';
-import { type UseEntityOpts } from './useEntity';
+import { EntityFn } from './types.ts';
+import { type UseEntityOpts } from './useEntity.ts';
 
 /** Entities will be filtered through this function until it returns true. */
 type LookupFn<TEntity extends Entity> = (entity: TEntity) => boolean
diff --git a/src/entity-store/hooks/useIncrementEntity.ts b/src/entity-store/hooks/useIncrementEntity.ts
index 06f8b2352..7ddd101a6 100644
--- a/src/entity-store/hooks/useIncrementEntity.ts
+++ b/src/entity-store/hooks/useIncrementEntity.ts
@@ -1,11 +1,11 @@
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { incrementEntities } from '../actions';
+import { incrementEntities } from '../actions.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntityFn, ExpandedEntitiesPath } from './types';
+import type { EntityFn, ExpandedEntitiesPath } from './types.ts';
 
 /**
  * Increases (or decreases) the `totalCount` in the entity list by the specified amount.
diff --git a/src/entity-store/hooks/useTransaction.ts b/src/entity-store/hooks/useTransaction.ts
index 691d895c0..7aa13c194 100644
--- a/src/entity-store/hooks/useTransaction.ts
+++ b/src/entity-store/hooks/useTransaction.ts
@@ -1,8 +1,8 @@
-import { entitiesTransaction } from 'soapbox/entity-store/actions';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
+import { entitiesTransaction } from 'soapbox/entity-store/actions.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import type { EntityTypes } from 'soapbox/entity-store/entities';
-import type { EntitiesTransaction, Entity } from 'soapbox/entity-store/types';
+import type { EntityTypes } from 'soapbox/entity-store/entities.ts';
+import type { EntitiesTransaction, Entity } from 'soapbox/entity-store/types.ts';
 
 type Updater<TEntity extends Entity> = Record<string, (entity: TEntity) => TEntity>
 
diff --git a/src/entity-store/hooks/utils.ts b/src/entity-store/hooks/utils.ts
index cdb059ee4..a82de1293 100644
--- a/src/entity-store/hooks/utils.ts
+++ b/src/entity-store/hooks/utils.ts
@@ -1,4 +1,4 @@
-import type { EntitiesPath, ExpandedEntitiesPath } from './types';
+import type { EntitiesPath, ExpandedEntitiesPath } from './types.ts';
 
 function parseEntitiesPath(expandedPath: ExpandedEntitiesPath) {
   const [entityType, ...listKeys] = expandedPath;
diff --git a/src/entity-store/reducer.test.ts b/src/entity-store/reducer.test.ts
index c5166437a..ab0c5a469 100644
--- a/src/entity-store/reducer.test.ts
+++ b/src/entity-store/reducer.test.ts
@@ -8,11 +8,11 @@ import {
   entitiesFetchSuccess,
   importEntities,
   incrementEntities,
-} from './actions';
-import reducer, { State } from './reducer';
-import { createListState } from './utils';
+} from './actions.ts';
+import reducer, { State } from './reducer.ts';
+import { createListState } from './utils.ts';
 
-import type { EntityCache } from './types';
+import type { EntityCache } from './types.ts';
 
 interface TestEntity {
   id: string;
diff --git a/src/entity-store/reducer.ts b/src/entity-store/reducer.ts
index 2e53656af..dec8c1697 100644
--- a/src/entity-store/reducer.ts
+++ b/src/entity-store/reducer.ts
@@ -11,11 +11,11 @@ import {
   ENTITIES_INVALIDATE_LIST,
   ENTITIES_INCREMENT,
   ENTITIES_TRANSACTION,
-} from './actions';
-import { createCache, createList, updateStore, updateList } from './utils';
+} from './actions.ts';
+import { createCache, createList, updateStore, updateList } from './utils.ts';
 
-import type { DeleteEntitiesOpts } from './actions';
-import type { EntitiesTransaction, Entity, EntityCache, EntityListState, ImportPosition } from './types';
+import type { DeleteEntitiesOpts } from './actions.ts';
+import type { EntitiesTransaction, Entity, EntityCache, EntityListState, ImportPosition } from './types.ts';
 
 /** Entity reducer state. */
 interface State {
diff --git a/src/entity-store/selectors.ts b/src/entity-store/selectors.ts
index 3e827b360..78aba6ff2 100644
--- a/src/entity-store/selectors.ts
+++ b/src/entity-store/selectors.ts
@@ -1,8 +1,8 @@
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import type { EntitiesPath } from './hooks/types';
-import type { Entity, EntityListState } from './types';
-import type { RootState } from 'soapbox/store';
+import type { EntitiesPath } from './hooks/types.ts';
+import type { Entity, EntityListState } from './types.ts';
+import type { RootState } from 'soapbox/store.ts';
 
 /** Get cache at path from Redux. */
 const selectCache = (state: RootState, path: EntitiesPath) => state.entities[path[0]];
diff --git a/src/entity-store/utils.ts b/src/entity-store/utils.ts
index 58d54465a..6a1e3953f 100644
--- a/src/entity-store/utils.ts
+++ b/src/entity-store/utils.ts
@@ -1,4 +1,4 @@
-import type { Entity, EntityStore, EntityList, EntityCache, EntityListState, ImportPosition } from './types';
+import type { Entity, EntityStore, EntityList, EntityCache, EntityListState, ImportPosition } from './types.ts';
 
 /** Insert the entities into the store. */
 const updateStore = (store: EntityStore, entities: Entity[]): EntityStore => {
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 43efac7e9..42cb428d7 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -2,12 +2,12 @@ import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { fetchAboutPage } from 'soapbox/actions/about';
-import { Navlinks } from 'soapbox/components/navlinks';
-import { Card } from 'soapbox/components/ui';
-import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
+import { fetchAboutPage } from 'soapbox/actions/about.ts';
+import { Navlinks } from 'soapbox/components/navlinks.tsx';
+import { Card } from 'soapbox/components/ui/index.ts';
+import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import { languages } from '../preferences';
+import { languages } from '../preferences/index.tsx';
 
 /** Displays arbitrary user-uploaded HTML on a page at `/about/:slug` */
 const AboutPage: React.FC = () => {
diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx
index 70c913b8f..c39d68a42 100644
--- a/src/features/account-gallery/components/media-item.tsx
+++ b/src/features/account-gallery/components/media-item.tsx
@@ -3,13 +3,13 @@ import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import Blurhash from 'soapbox/components/blurhash';
-import StillImage from 'soapbox/components/still-image';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useSettings } from 'soapbox/hooks';
-import { isIOS } from 'soapbox/is-mobile';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import StillImage from 'soapbox/components/still-image.tsx';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import { useSettings } from 'soapbox/hooks/index.ts';
+import { isIOS } from 'soapbox/is-mobile.ts';
 
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 interface IMediaItem {
   attachment: Attachment;
diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index 0c7d0e58e..f4817f887 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -3,18 +3,18 @@ import { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { expandAccountMediaTimeline } from 'soapbox/actions/timelines';
-import { useAccountLookup } from 'soapbox/api/hooks';
-import LoadMore from 'soapbox/components/load-more';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import { Column, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { getAccountGallery } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { expandAccountMediaTimeline } from 'soapbox/actions/timelines.ts';
+import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
+import LoadMore from 'soapbox/components/load-more.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { getAccountGallery } from 'soapbox/selectors/index.ts';
 
-import MediaItem from './components/media-item';
+import MediaItem from './components/media-item.tsx';
 
-import type { Attachment, Status } from 'soapbox/types/entities';
+import type { Attachment, Status } from 'soapbox/types/entities.ts';
 
 interface ILoadMoreMedia {
   maxId: string | null;
diff --git a/src/features/account-timeline/components/moved-note.tsx b/src/features/account-timeline/components/moved-note.tsx
index 993a111ef..7b6ea3ce7 100644
--- a/src/features/account-timeline/components/moved-note.tsx
+++ b/src/features/account-timeline/components/moved-note.tsx
@@ -1,11 +1,11 @@
 import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
 import { FormattedMessage } from 'react-intl';
 
-import Account from 'soapbox/components/account';
-import Icon from 'soapbox/components/icon';
-import { HStack, Text } from 'soapbox/components/ui';
+import Account from 'soapbox/components/account.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import { HStack, Text } from 'soapbox/components/ui/index.ts';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 interface IMovedNote {
   from: AccountEntity;
diff --git a/src/features/account-timeline/index.tsx b/src/features/account-timeline/index.tsx
index 3f50f9f3d..8b2d5e216 100644
--- a/src/features/account-timeline/index.tsx
+++ b/src/features/account-timeline/index.tsx
@@ -2,15 +2,15 @@ import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchAccountByUsername } from 'soapbox/actions/accounts';
-import { fetchPatronAccount } from 'soapbox/actions/patron';
-import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/actions/timelines';
-import { useAccountLookup } from 'soapbox/api/hooks';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusList from 'soapbox/components/status-list';
-import { Card, CardBody, Spinner, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { makeGetStatusIds } from 'soapbox/selectors';
+import { fetchAccountByUsername } from 'soapbox/actions/accounts.ts';
+import { fetchPatronAccount } from 'soapbox/actions/patron.ts';
+import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/actions/timelines.ts';
+import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Card, CardBody, Spinner, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useFeatures, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
 const getStatusIds = makeGetStatusIds();
 
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index 1c160e280..a9a1df3ef 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -25,32 +25,32 @@ import { nip19 } from 'nostr-tools';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { blockAccount, pinAccount, removeFromFollowers, unblockAccount, unmuteAccount, unpinAccount } from 'soapbox/actions/accounts';
-import { mentionCompose, directCompose } from 'soapbox/actions/compose';
-import { blockDomain, unblockDomain } from 'soapbox/actions/domain-blocks';
-import { openModal } from 'soapbox/actions/modals';
-import { initMuteModal } from 'soapbox/actions/mutes';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import { setSearchAccount } from 'soapbox/actions/search';
-import { getSettings } from 'soapbox/actions/settings';
-import { useFollow } from 'soapbox/api/hooks';
-import Badge from 'soapbox/components/badge';
-import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
-import StillImage from 'soapbox/components/still-image';
-import { Avatar, HStack, IconButton } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import SubscriptionButton from 'soapbox/features/ui/components/subscription-button';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import { normalizeAttachment } from 'soapbox/normalizers';
-import { ChatKeys, useChats } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { Account } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
-import { isDefaultHeader } from 'soapbox/utils/accounts';
-import copy from 'soapbox/utils/copy';
-import { MASTODON, parseVersion } from 'soapbox/utils/features';
+import { blockAccount, pinAccount, removeFromFollowers, unblockAccount, unmuteAccount, unpinAccount } from 'soapbox/actions/accounts.ts';
+import { mentionCompose, directCompose } from 'soapbox/actions/compose.ts';
+import { blockDomain, unblockDomain } from 'soapbox/actions/domain-blocks.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { initMuteModal } from 'soapbox/actions/mutes.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { setSearchAccount } from 'soapbox/actions/search.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { useFollow } from 'soapbox/api/hooks/index.ts';
+import Badge from 'soapbox/components/badge.tsx';
+import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu/index.ts';
+import StillImage from 'soapbox/components/still-image.tsx';
+import { Avatar, HStack, IconButton } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import MovedNote from 'soapbox/features/account-timeline/components/moved-note.tsx';
+import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
+import SubscriptionButton from 'soapbox/features/ui/components/subscription-button.tsx';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
+import { ChatKeys, useChats } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { Account } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
+import copy from 'soapbox/utils/copy.ts';
+import { MASTODON, parseVersion } from 'soapbox/utils/features.ts';
 
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx
index 12a9408fc..a8ed8e535 100644
--- a/src/features/admin/announcements.tsx
+++ b/src/features/admin/announcements.tsx
@@ -1,13 +1,13 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { AdminAnnouncement } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { AdminAnnouncement } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.announcements', defaultMessage: 'Announcements' },
diff --git a/src/features/admin/components/admin-tabs.tsx b/src/features/admin/components/admin-tabs.tsx
index ff4a2f364..b5d2312d9 100644
--- a/src/features/admin/components/admin-tabs.tsx
+++ b/src/features/admin/components/admin-tabs.tsx
@@ -1,8 +1,8 @@
 import { useIntl, defineMessages } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { Tabs } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import { Tabs } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   dashboard: { id: 'admin_nav.dashboard', defaultMessage: 'Dashboard' },
diff --git a/src/features/admin/components/dashcounter.tsx b/src/features/admin/components/dashcounter.tsx
index 59707fb0f..a104f62b0 100644
--- a/src/features/admin/components/dashcounter.tsx
+++ b/src/features/admin/components/dashcounter.tsx
@@ -1,8 +1,8 @@
 import { FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui';
-import { isNumber } from 'soapbox/utils/numbers';
+import { Text } from 'soapbox/components/ui/index.ts';
+import { isNumber } from 'soapbox/utils/numbers.tsx';
 
 interface IDashCounter {
   count: number | undefined;
diff --git a/src/features/admin/components/latest-accounts-panel.tsx b/src/features/admin/components/latest-accounts-panel.tsx
index a63ef3008..5873e72ed 100644
--- a/src/features/admin/components/latest-accounts-panel.tsx
+++ b/src/features/admin/components/latest-accounts-panel.tsx
@@ -1,9 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts';
-import Account from 'soapbox/components/account';
-import { Widget } from 'soapbox/components/ui';
+import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts.ts';
+import Account from 'soapbox/components/account.tsx';
+import { Widget } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   title: { id: 'admin.latest_accounts_panel.title', defaultMessage: 'Latest Accounts' },
diff --git a/src/features/admin/components/registration-mode-picker.tsx b/src/features/admin/components/registration-mode-picker.tsx
index 55609e979..e9ee8a72d 100644
--- a/src/features/admin/components/registration-mode-picker.tsx
+++ b/src/features/admin/components/registration-mode-picker.tsx
@@ -1,10 +1,10 @@
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { updateConfig } from 'soapbox/actions/admin';
-import { RadioGroup, RadioItem } from 'soapbox/components/radio';
-import { useAppDispatch, useInstance } from 'soapbox/hooks';
-import { InstanceV2 } from 'soapbox/schemas/instance';
-import toast from 'soapbox/toast';
+import { updateConfig } from 'soapbox/actions/admin.ts';
+import { RadioGroup, RadioItem } from 'soapbox/components/radio.tsx';
+import { useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
+import { InstanceV2 } from 'soapbox/schemas/instance.ts';
+import toast from 'soapbox/toast.tsx';
 
 type RegistrationMode = 'open' | 'approval' | 'closed';
 
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index 251febe41..3db8dcb0e 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -3,14 +3,14 @@ import pencilIcon from '@tabler/icons/outline/pencil.svg';
 import trashIcon from '@tabler/icons/outline/trash.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { deleteStatusModal } from 'soapbox/actions/moderation';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import StatusContent from 'soapbox/components/status-content';
-import StatusMedia from 'soapbox/components/status-media';
-import { HStack, Stack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { deleteStatusModal } from 'soapbox/actions/moderation.tsx';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusMedia from 'soapbox/components/status-media.tsx';
+import { HStack, Stack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import type { AdminReport, Status } from 'soapbox/types/entities';
+import type { AdminReport, Status } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   viewStatus: { id: 'admin.reports.actions.view_status', defaultMessage: 'View post' },
diff --git a/src/features/admin/components/report.tsx b/src/features/admin/components/report.tsx
index 86c7cea2c..7ce9191eb 100644
--- a/src/features/admin/components/report.tsx
+++ b/src/features/admin/components/report.tsx
@@ -5,19 +5,19 @@ import { useCallback, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { closeReports } from 'soapbox/actions/admin';
-import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { Accordion, Avatar, Button, Stack, HStack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetReport } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
+import { closeReports } from 'soapbox/actions/admin.ts';
+import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation.tsx';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import { Accordion, Avatar, Button, Stack, HStack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetReport } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ReportStatus from './report-status';
+import ReportStatus from './report-status.tsx';
 
 import type { List as ImmutableList } from 'immutable';
-import type { Account, AdminReport, Status } from 'soapbox/types/entities';
+import type { Account, AdminReport, Status } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   reportClosed: { id: 'admin.reports.report_closed_message', defaultMessage: 'Report on @{name} was closed' },
diff --git a/src/features/admin/components/unapproved-account.tsx b/src/features/admin/components/unapproved-account.tsx
index 510c36b27..0338789e9 100644
--- a/src/features/admin/components/unapproved-account.tsx
+++ b/src/features/admin/components/unapproved-account.tsx
@@ -1,8 +1,8 @@
-import { approveUser, rejectUser } from 'soapbox/actions/admin';
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { approveUser, rejectUser } from 'soapbox/actions/admin.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 interface IUnapprovedAccount {
   accountId: string;
diff --git a/src/features/admin/domains.tsx b/src/features/admin/domains.tsx
index 1f1dd724c..3fabe2e66 100644
--- a/src/features/admin/domains.tsx
+++ b/src/features/admin/domains.tsx
@@ -2,17 +2,17 @@ import plusIcon from '@tabler/icons/outline/plus.svg';
 import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useDomains } from 'soapbox/api/hooks/admin';
-import { dateFormatOptions } from 'soapbox/components/relative-timestamp';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useDomains } from 'soapbox/api/hooks/admin/index.ts';
+import { dateFormatOptions } from 'soapbox/components/relative-timestamp.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import Indicator from '../developers/components/indicator';
+import Indicator from '../developers/components/indicator.tsx';
 
-import type { Domain as DomainEntity } from 'soapbox/schemas';
+import type { Domain as DomainEntity } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.domains', defaultMessage: 'Domains' },
diff --git a/src/features/admin/hooks/useAdminNostrRelays.ts b/src/features/admin/hooks/useAdminNostrRelays.ts
index 576f12351..8ef6326c7 100644
--- a/src/features/admin/hooks/useAdminNostrRelays.ts
+++ b/src/features/admin/hooks/useAdminNostrRelays.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { z } from 'zod';
 
-import { useApi } from 'soapbox/hooks';
+import { useApi } from 'soapbox/hooks/index.ts';
 
 const relayEntitySchema = z.object({
   url: z.string().url(),
diff --git a/src/features/admin/index.tsx b/src/features/admin/index.tsx
index 77dabcd9a..ad25d50f5 100644
--- a/src/features/admin/index.tsx
+++ b/src/features/admin/index.tsx
@@ -1,13 +1,13 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { Switch, Route } from 'react-router-dom';
 
-import { Column } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
 
-import AdminTabs from './components/admin-tabs';
-import Waitlist from './tabs/awaiting-approval';
-import Dashboard from './tabs/dashboard';
-import Reports from './tabs/reports';
+import AdminTabs from './components/admin-tabs.tsx';
+import Waitlist from './tabs/awaiting-approval.tsx';
+import Dashboard from './tabs/dashboard.tsx';
+import Reports from './tabs/reports.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.dashboard', defaultMessage: 'Dashboard' },
diff --git a/src/features/admin/manage-zap-split.tsx b/src/features/admin/manage-zap-split.tsx
index 1c7bdcfc5..61138f248 100644
--- a/src/features/admin/manage-zap-split.tsx
+++ b/src/features/admin/manage-zap-split.tsx
@@ -2,13 +2,13 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import Account from 'soapbox/components/account';
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, Column, HStack, Input, Stack } from 'soapbox/components/ui';
+import Account from 'soapbox/components/account.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Button, Column, HStack, Input, Stack } from 'soapbox/components/ui/index.ts';
 
-import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit';
-import AddNewAccount from '../ui/components/new-account-zap-split';
-import { ZapSplitSlider } from '../zap/components/zap-split-account-item';
+import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit.ts';
+import AddNewAccount from '../ui/components/new-account-zap-split.tsx';
+import { ZapSplitSlider } from '../zap/components/zap-split-account-item.tsx';
 
 const closeIcon = xIcon;
 
diff --git a/src/features/admin/moderation-log.tsx b/src/features/admin/moderation-log.tsx
index 0fc82ed0b..9acef5117 100644
--- a/src/features/admin/moderation-log.tsx
+++ b/src/features/admin/moderation-log.tsx
@@ -1,10 +1,10 @@
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
-import { useModerationLog } from 'soapbox/api/hooks/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Stack, Text } from 'soapbox/components/ui';
+import { useModerationLog } from 'soapbox/api/hooks/admin/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import type { ModerationLogEntry } from 'soapbox/schemas';
+import type { ModerationLogEntry } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.moderation_log', defaultMessage: 'Moderation Log' },
diff --git a/src/features/admin/nostr-relays.tsx b/src/features/admin/nostr-relays.tsx
index b182e9711..0642dcde5 100644
--- a/src/features/admin/nostr-relays.tsx
+++ b/src/features/admin/nostr-relays.tsx
@@ -2,11 +2,11 @@ import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
-import RelayEditor, { RelayData } from 'soapbox/features/nostr-relays/components/relay-editor';
-import { useApi } from 'soapbox/hooks';
+import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui/index.ts';
+import RelayEditor, { RelayData } from 'soapbox/features/nostr-relays/components/relay-editor.tsx';
+import { useApi } from 'soapbox/hooks/index.ts';
 
-import { useAdminNostrRelays } from './hooks/useAdminNostrRelays';
+import { useAdminNostrRelays } from './hooks/useAdminNostrRelays.ts';
 
 const messages = defineMessages({
   title: { id: 'column.admin.nostr_relays', defaultMessage: 'Relays' },
diff --git a/src/features/admin/relays.tsx b/src/features/admin/relays.tsx
index ff25be118..65131f0e3 100644
--- a/src/features/admin/relays.tsx
+++ b/src/features/admin/relays.tsx
@@ -1,12 +1,12 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useRelays } from 'soapbox/api/hooks/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, Form, HStack, Input, Stack, Text } from 'soapbox/components/ui';
-import { useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
+import { useRelays } from 'soapbox/api/hooks/admin/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Button, Column, Form, HStack, Input, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useTextField } from 'soapbox/hooks/forms/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Relay as RelayEntity } from 'soapbox/schemas';
+import type { Relay as RelayEntity } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.relays', defaultMessage: 'Instance relays' },
diff --git a/src/features/admin/rules.tsx b/src/features/admin/rules.tsx
index 42352ed62..544b36ffc 100644
--- a/src/features/admin/rules.tsx
+++ b/src/features/admin/rules.tsx
@@ -1,13 +1,13 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useRules } from 'soapbox/api/hooks/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { AdminRule } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useRules } from 'soapbox/api/hooks/admin/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { AdminRule } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.rules', defaultMessage: 'Instance rules' },
diff --git a/src/features/admin/tabs/awaiting-approval.tsx b/src/features/admin/tabs/awaiting-approval.tsx
index e8ed05e2c..eead7067c 100644
--- a/src/features/admin/tabs/awaiting-approval.tsx
+++ b/src/features/admin/tabs/awaiting-approval.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchUsers } from 'soapbox/actions/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchUsers } from 'soapbox/actions/admin.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import UnapprovedAccount from '../components/unapproved-account';
+import UnapprovedAccount from '../components/unapproved-account.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' },
diff --git a/src/features/admin/tabs/dashboard.tsx b/src/features/admin/tabs/dashboard.tsx
index d577c0797..1cff57c39 100644
--- a/src/features/admin/tabs/dashboard.tsx
+++ b/src/features/admin/tabs/dashboard.tsx
@@ -2,17 +2,17 @@ import downloadIcon from '@tabler/icons/outline/download.svg';
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email-list';
-import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1';
-import List, { ListItem } from 'soapbox/components/list';
-import { CardTitle, Icon, IconButton, Stack } from 'soapbox/components/ui';
-import { useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
-import sourceCode from 'soapbox/utils/code';
-import { download } from 'soapbox/utils/download';
-import { parseVersion } from 'soapbox/utils/features';
+import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email-list.ts';
+import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { CardTitle, Icon, IconButton, Stack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks/index.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { download } from 'soapbox/utils/download.ts';
+import { parseVersion } from 'soapbox/utils/features.ts';
 
-import { DashCounter, DashCounters } from '../components/dashcounter';
-import RegistrationModePicker from '../components/registration-mode-picker';
+import { DashCounter, DashCounters } from '../components/dashcounter.tsx';
+import RegistrationModePicker from '../components/registration-mode-picker.tsx';
 
 const Dashboard: React.FC = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/admin/tabs/reports.tsx b/src/features/admin/tabs/reports.tsx
index c8de1aa09..28f6f7874 100644
--- a/src/features/admin/tabs/reports.tsx
+++ b/src/features/admin/tabs/reports.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchReports } from 'soapbox/actions/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchReports } from 'soapbox/actions/admin.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import Report from '../components/report';
+import Report from '../components/report.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.reports', defaultMessage: 'Reports' },
diff --git a/src/features/admin/user-index.tsx b/src/features/admin/user-index.tsx
index 7d525285b..8aec7e07c 100644
--- a/src/features/admin/user-index.tsx
+++ b/src/features/admin/user-index.tsx
@@ -1,9 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts';
-import Account from 'soapbox/components/account';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
+import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts.ts';
+import Account from 'soapbox/components/account.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.users', defaultMessage: 'Users' },
diff --git a/src/features/aliases/components/account.tsx b/src/features/aliases/components/account.tsx
index b372cc362..024d1ec4c 100644
--- a/src/features/aliases/components/account.tsx
+++ b/src/features/aliases/components/account.tsx
@@ -1,12 +1,12 @@
 import plusIcon from '@tabler/icons/outline/plus.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { addToAliases } from 'soapbox/actions/aliases';
-import { useAccount } from 'soapbox/api/hooks';
-import AccountComponent from 'soapbox/components/account';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
+import { addToAliases } from 'soapbox/actions/aliases.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import AccountComponent from 'soapbox/components/account.tsx';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import { HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index 807e8729b..b8a51cdcb 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -2,10 +2,10 @@ import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
-import Icon from 'soapbox/components/icon';
-import { Button } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import { Button } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index a814e3da5..f2b322fbe 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -2,14 +2,14 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases';
-import Icon from 'soapbox/components/icon';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
 
-import Account from './components/account';
-import Search from './components/search';
+import Account from './components/account.tsx';
+import Search from './components/search.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.aliases', defaultMessage: 'Account aliases' },
diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx
index 1aa239ab0..51e0158cb 100644
--- a/src/features/audio/index.tsx
+++ b/src/features/audio/index.tsx
@@ -9,10 +9,10 @@ import throttle from 'lodash/throttle';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { formatTime, getPointerPosition } from 'soapbox/features/video';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import { formatTime, getPointerPosition } from 'soapbox/features/video/index.tsx';
 
-import Visualizer from './visualizer';
+import Visualizer from './visualizer.ts';
 
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
diff --git a/src/features/auth-login/components/captcha.test.tsx b/src/features/auth-login/components/captcha.test.tsx
index b8e3fac21..51138d30d 100644
--- a/src/features/auth-login/components/captcha.test.tsx
+++ b/src/features/auth-login/components/captcha.test.tsx
@@ -1,9 +1,9 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import CaptchaField, { NativeCaptchaField } from './captcha';
+import CaptchaField, { NativeCaptchaField } from './captcha.tsx';
 
 describe('<CaptchaField />', () => {
   it('renders null by default', () => {
diff --git a/src/features/auth-login/components/captcha.tsx b/src/features/auth-login/components/captcha.tsx
index c393731c3..340367eca 100644
--- a/src/features/auth-login/components/captcha.tsx
+++ b/src/features/auth-login/components/captcha.tsx
@@ -2,9 +2,9 @@ import { Map as ImmutableMap } from 'immutable';
 import { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { fetchCaptcha } from 'soapbox/actions/auth';
-import { Stack, Text, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { fetchCaptcha } from 'soapbox/actions/auth.ts';
+import { Stack, Text, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { AxiosResponse } from 'axios';
 
diff --git a/src/features/auth-login/components/consumer-button.tsx b/src/features/auth-login/components/consumer-button.tsx
index 2eebaf9c4..dd28ecad8 100644
--- a/src/features/auth-login/components/consumer-button.tsx
+++ b/src/features/auth-login/components/consumer-button.tsx
@@ -7,10 +7,10 @@ import brandWindowsIcon from '@tabler/icons/outline/brand-windows.svg';
 import keyIcon from '@tabler/icons/outline/key.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { prepareRequest } from 'soapbox/actions/consumer-auth';
-import { IconButton, Tooltip } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { capitalize } from 'soapbox/utils/strings';
+import { prepareRequest } from 'soapbox/actions/consumer-auth.ts';
+import { IconButton, Tooltip } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { capitalize } from 'soapbox/utils/strings.ts';
 
 const messages = defineMessages({
   tooltip: { id: 'oauth_consumer.tooltip', defaultMessage: 'Sign in with {provider}' },
diff --git a/src/features/auth-login/components/consumers-list.tsx b/src/features/auth-login/components/consumers-list.tsx
index d22f1aa4f..55a58601f 100644
--- a/src/features/auth-login/components/consumers-list.tsx
+++ b/src/features/auth-login/components/consumers-list.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Card, HStack, Text } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import { Card, HStack, Text } from 'soapbox/components/ui/index.ts';
+import { useInstance } from 'soapbox/hooks/index.ts';
 
-import ConsumerButton from './consumer-button';
+import ConsumerButton from './consumer-button.tsx';
 
 interface IConsumersList {
 }
diff --git a/src/features/auth-login/components/login-form.test.tsx b/src/features/auth-login/components/login-form.test.tsx
index 49f94cbfc..fa4023d78 100644
--- a/src/features/auth-login/components/login-form.test.tsx
+++ b/src/features/auth-login/components/login-form.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { fireEvent, render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import LoginForm from './login-form';
+import LoginForm from './login-form.tsx';
 
 describe('<LoginForm />', () => {
   it('renders for Pleroma', () => {
diff --git a/src/features/auth-login/components/login-form.tsx b/src/features/auth-login/components/login-form.tsx
index 6a72e345e..0fa0652c5 100644
--- a/src/features/auth-login/components/login-form.tsx
+++ b/src/features/auth-login/components/login-form.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
+import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import { useFeatures } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   username: {
diff --git a/src/features/auth-login/components/login-page.test.tsx b/src/features/auth-login/components/login-page.test.tsx
index b8f646a7a..a89006f02 100644
--- a/src/features/auth-login/components/login-page.test.tsx
+++ b/src/features/auth-login/components/login-page.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import LoginPage from './login-page';
+import LoginPage from './login-page.tsx';
 
 describe('<LoginPage />', () => {
   it('renders correctly on load', () => {
diff --git a/src/features/auth-login/components/login-page.tsx b/src/features/auth-login/components/login-page.tsx
index 800c4848e..e73776739 100644
--- a/src/features/auth-login/components/login-page.tsx
+++ b/src/features/auth-login/components/login-page.tsx
@@ -2,16 +2,16 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
-import { fetchInstance } from 'soapbox/actions/instance';
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import { BigCard } from 'soapbox/components/big-card';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
-import { getRedirectUrl } from 'soapbox/utils/redirect';
+import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth.ts';
+import { fetchInstance } from 'soapbox/actions/instance.ts';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
+import { getRedirectUrl } from 'soapbox/utils/redirect.ts';
 
-import ConsumersList from './consumers-list';
-import LoginForm from './login-form';
-import OtpAuthForm from './otp-auth-form';
+import ConsumersList from './consumers-list.tsx';
+import LoginForm from './login-form.tsx';
+import OtpAuthForm from './otp-auth-form.tsx';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/auth-login/components/logout.tsx b/src/features/auth-login/components/logout.tsx
index 0508c7572..e5bb79723 100644
--- a/src/features/auth-login/components/logout.tsx
+++ b/src/features/auth-login/components/logout.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
-import { logOut } from 'soapbox/actions/auth';
-import { Spinner } from 'soapbox/components/ui';
+import { logOut } from 'soapbox/actions/auth.ts';
+import { Spinner } from 'soapbox/components/ui/index.ts';
 
 /** Component that logs the user out when rendered */
 const Logout: React.FC = () => {
diff --git a/src/features/auth-login/components/otp-auth-form.test.tsx b/src/features/auth-login/components/otp-auth-form.test.tsx
index 91e868ca3..d1d24d6af 100644
--- a/src/features/auth-login/components/otp-auth-form.test.tsx
+++ b/src/features/auth-login/components/otp-auth-form.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import OtpAuthForm from './otp-auth-form';
+import OtpAuthForm from './otp-auth-form.tsx';
 
 describe('<OtpAuthForm />', () => {
   it('renders correctly', () => {
diff --git a/src/features/auth-login/components/otp-auth-form.tsx b/src/features/auth-login/components/otp-auth-form.tsx
index 08aad366c..1d648f2e6 100644
--- a/src/features/auth-login/components/otp-auth-form.tsx
+++ b/src/features/auth-login/components/otp-auth-form.tsx
@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
-import { BigCard } from 'soapbox/components/big-card';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   otpCodeHint: { id: 'login.fields.otp_code_hint', defaultMessage: 'Enter the two-factor code generated by your phone app or use one of your recovery codes' },
diff --git a/src/features/auth-login/components/password-reset-confirm.test.tsx b/src/features/auth-login/components/password-reset-confirm.test.tsx
index 5551f79c3..513d85ff8 100644
--- a/src/features/auth-login/components/password-reset-confirm.test.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.test.tsx
@@ -1,10 +1,10 @@
 import { Route, Switch } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { fireEvent, render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { fireEvent, render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import PasswordResetConfirm from './password-reset-confirm';
+import PasswordResetConfirm from './password-reset-confirm.tsx';
 
 const TestableComponent = () => (
   <Switch>
diff --git a/src/features/auth-login/components/password-reset-confirm.tsx b/src/features/auth-login/components/password-reset-confirm.tsx
index 0c2473389..c6a733004 100644
--- a/src/features/auth-login/components/password-reset-confirm.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.tsx
@@ -2,10 +2,10 @@ import { useCallback, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { resetPasswordConfirm } from 'soapbox/actions/security';
-import { BigCard } from 'soapbox/components/big-card';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { resetPasswordConfirm } from 'soapbox/actions/security.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const token = new URLSearchParams(window.location.search).get('reset_password_token');
 
diff --git a/src/features/auth-login/components/password-reset.tsx b/src/features/auth-login/components/password-reset.tsx
index 6d5487ceb..5b1a1e631 100644
--- a/src/features/auth-login/components/password-reset.tsx
+++ b/src/features/auth-login/components/password-reset.tsx
@@ -2,11 +2,11 @@ import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { resetPassword } from 'soapbox/actions/security';
-import { BigCard } from 'soapbox/components/big-card';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { resetPassword } from 'soapbox/actions/security.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   nicknameOrEmail: { id: 'password_reset.fields.username_placeholder', defaultMessage: 'Email or username' },
diff --git a/src/features/auth-login/components/registration-form.tsx b/src/features/auth-login/components/registration-form.tsx
index 48854d279..58cc06e94 100644
--- a/src/features/auth-login/components/registration-form.tsx
+++ b/src/features/auth-login/components/registration-form.tsx
@@ -7,13 +7,13 @@ import { useState, useRef, useCallback } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { accountLookup } from 'soapbox/actions/accounts';
-import { register, verifyCredentials } from 'soapbox/actions/auth';
-import { openModal } from 'soapbox/actions/modals';
-import BirthdayInput from 'soapbox/components/birthday-input';
-import { Checkbox, Form, FormGroup, FormActions, Button, Input, Textarea, Select } from 'soapbox/components/ui';
-import CaptchaField from 'soapbox/features/auth-login/components/captcha';
-import { useAppDispatch, useSettings, useFeatures, useInstance } from 'soapbox/hooks';
+import { accountLookup } from 'soapbox/actions/accounts.ts';
+import { register, verifyCredentials } from 'soapbox/actions/auth.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import BirthdayInput from 'soapbox/components/birthday-input.tsx';
+import { Checkbox, Form, FormGroup, FormActions, Button, Input, Textarea, Select } from 'soapbox/components/ui/index.ts';
+import CaptchaField from 'soapbox/features/auth-login/components/captcha.tsx';
+import { useAppDispatch, useSettings, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' },
diff --git a/src/features/auth-login/components/registration-page.tsx b/src/features/auth-login/components/registration-page.tsx
index 0401ebf10..e4cfe335f 100644
--- a/src/features/auth-login/components/registration-page.tsx
+++ b/src/features/auth-login/components/registration-page.tsx
@@ -1,12 +1,12 @@
 import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { BigCard } from 'soapbox/components/big-card';
-import { Text } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import { Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
 
-import RegistrationForm from './registration-form';
+import RegistrationForm from './registration-form.tsx';
 
 const RegistrationPage: React.FC = () => {
   const { instance } = useInstance();
diff --git a/src/features/auth-token-list/index.tsx b/src/features/auth-token-list/index.tsx
index 24b4c6867..61bd90267 100644
--- a/src/features/auth-token-list/index.tsx
+++ b/src/features/auth-token-list/index.tsx
@@ -2,11 +2,11 @@ import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import { useEffect } from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security';
-import { Button, Card, CardBody, CardHeader, CardTitle, Column, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { Token } from 'soapbox/reducers/security';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security.ts';
+import { Button, Card, CardBody, CardHeader, CardTitle, Column, HStack, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { Token } from 'soapbox/reducers/security.ts';
 
 const messages = defineMessages({
   header: { id: 'security.headers.tokens', defaultMessage: 'Sessions' },
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index 3274851a5..1d8c8f3d4 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 
-import { fetchBackups, createBackup } from 'soapbox/actions/backups';
-import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchBackups, createBackup } from 'soapbox/actions/backups.ts';
+import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import type { Backup as BackupEntity } from 'soapbox/reducers/backups';
+import type { Backup as BackupEntity } from 'soapbox/reducers/backups.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.backups', defaultMessage: 'Backups' },
diff --git a/src/features/birthdays/account.tsx b/src/features/birthdays/account.tsx
index 78c6f40fe..d19fc09d9 100644
--- a/src/features/birthdays/account.tsx
+++ b/src/features/birthdays/account.tsx
@@ -1,10 +1,10 @@
 import balloonIcon from '@tabler/icons/outline/balloon.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useAccount } from 'soapbox/api/hooks';
-import AccountComponent from 'soapbox/components/account';
-import Icon from 'soapbox/components/icon';
-import { HStack } from 'soapbox/components/ui';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import AccountComponent from 'soapbox/components/account.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import { HStack } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
diff --git a/src/features/blocks/index.tsx b/src/features/blocks/index.tsx
index c62112924..9cc136d48 100644
--- a/src/features/blocks/index.tsx
+++ b/src/features/blocks/index.tsx
@@ -1,9 +1,9 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useBlocks } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
+import { useBlocks } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Spinner } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.blocks', defaultMessage: 'Blocks' },
diff --git a/src/features/bookmark-folders/components/new-folder-form.tsx b/src/features/bookmark-folders/components/new-folder-form.tsx
index 5f4fb4ec5..ffddfe089 100644
--- a/src/features/bookmark-folders/components/new-folder-form.tsx
+++ b/src/features/bookmark-folders/components/new-folder-form.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useCreateBookmarkFolder } from 'soapbox/api/hooks';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui';
-import { useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
+import { useCreateBookmarkFolder } from 'soapbox/api/hooks/index.ts';
+import { Button, Form, HStack, Input } from 'soapbox/components/ui/index.ts';
+import { useTextField } from 'soapbox/hooks/forms/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   label: { id: 'bookmark_folders.new.title_placeholder', defaultMessage: 'New folder title' },
diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index 591485c09..82fa34186 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -3,12 +3,12 @@ import folderIcon from '@tabler/icons/outline/folder.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { useBookmarkFolders } from 'soapbox/api/hooks';
-import List, { ListItem } from 'soapbox/components/list';
-import { Column, Emoji, HStack, Icon, Spinner, Stack } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
+import { useBookmarkFolders } from 'soapbox/api/hooks/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Column, Emoji, HStack, Icon, Spinner, Stack } from 'soapbox/components/ui/index.ts';
+import { useFeatures } from 'soapbox/hooks/index.ts';
 
-import NewFolderForm from './components/new-folder-form';
+import NewFolderForm from './components/new-folder-form.tsx';
 
 
 const messages = defineMessages({
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index a2452434d..3fcf5b76b 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -7,16 +7,16 @@ import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actions/bookmarks';
-import { openModal } from 'soapbox/actions/modals';
-import { useBookmarkFolder, useDeleteBookmarkFolder } from 'soapbox/api/hooks';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import StatusList from 'soapbox/components/status-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-import toast from 'soapbox/toast';
+import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actions/bookmarks.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useBookmarkFolder, useDeleteBookmarkFolder } from 'soapbox/api/hooks/index.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
diff --git a/src/features/chats/components/chat-composer.tsx b/src/features/chats/components/chat-composer.tsx
index 11e3bdf6c..512a2f581 100644
--- a/src/features/chats/components/chat-composer.tsx
+++ b/src/features/chats/components/chat-composer.tsx
@@ -2,19 +2,19 @@ import sendIcon from '@tabler/icons/outline/send.svg';
 import { forwardRef, useState } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
-import { unblockAccount } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
-import { useChatContext } from 'soapbox/contexts/chat-context';
-import UploadButton from 'soapbox/features/compose/components/upload-button';
-import emojiSearch from 'soapbox/features/emoji/search';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { Attachment } from 'soapbox/types/entities';
-import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
+import { unblockAccount } from 'soapbox/actions/accounts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import UploadButton from 'soapbox/features/compose/components/upload-button.tsx';
+import emojiSearch from 'soapbox/features/emoji/search.ts';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { Attachment } from 'soapbox/types/entities.ts';
+import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
-import ChatTextarea from './chat-textarea';
+import ChatTextarea from './chat-textarea.tsx';
 
-import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji/index.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'chat.input.placeholder', defaultMessage: 'Type a message' },
diff --git a/src/features/chats/components/chat-list-item.test.tsx b/src/features/chats/components/chat-list-item.test.tsx
index d419dc9d0..56486a5ee 100644
--- a/src/features/chats/components/chat-list-item.test.tsx
+++ b/src/features/chats/components/chat-list-item.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { IChat } from 'soapbox/queries/chats';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { IChat } from 'soapbox/queries/chats.ts';
 
-import ChatListItem from './chat-list-item';
+import ChatListItem from './chat-list-item.tsx';
 
 const chat: any = {
   id: '1',
diff --git a/src/features/chats/components/chat-list-item.tsx b/src/features/chats/components/chat-list-item.tsx
index 1195522bb..ae2c5299f 100644
--- a/src/features/chats/components/chat-list-item.tsx
+++ b/src/features/chats/components/chat-list-item.tsx
@@ -4,16 +4,16 @@ import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Avatar, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { IChat, useChatActions } from 'soapbox/queries/chats';
+import { openModal } from 'soapbox/actions/modals.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
+import { Avatar, HStack, IconButton, Stack, Text } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { IChat, useChatActions } from 'soapbox/queries/chats.ts';
 
-import type { Menu } from 'soapbox/components/dropdown-menu';
+import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
 
 const messages = defineMessages({
   blockedYou: { id: 'chat_list_item.blocked_you', defaultMessage: 'This user has blocked you' },
diff --git a/src/features/chats/components/chat-list.tsx b/src/features/chats/components/chat-list.tsx
index 90a59141e..de7992311 100644
--- a/src/features/chats/components/chat-list.tsx
+++ b/src/features/chats/components/chat-list.tsx
@@ -2,14 +2,14 @@ import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { fetchChats } from 'soapbox/actions/chats';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Spinner, Stack } from 'soapbox/components/ui';
-import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
-import { useAppDispatch } from 'soapbox/hooks';
-import { useChats } from 'soapbox/queries/chats';
+import { fetchChats } from 'soapbox/actions/chats.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Spinner, Stack } from 'soapbox/components/ui/index.ts';
+import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useChats } from 'soapbox/queries/chats.ts';
 
-import ChatListItem from './chat-list-item';
+import ChatListItem from './chat-list-item.tsx';
 
 interface IChatList {
   onClickChat: (chat: any) => void;
diff --git a/src/features/chats/components/chat-message-list-intro.tsx b/src/features/chats/components/chat-message-list-intro.tsx
index 36047b8ab..ee70410e2 100644
--- a/src/features/chats/components/chat-message-list-intro.tsx
+++ b/src/features/chats/components/chat-message-list-intro.tsx
@@ -3,13 +3,13 @@ import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import Link from 'soapbox/components/link';
-import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { useChatActions } from 'soapbox/queries/chats';
-import { secondsToDays } from 'soapbox/utils/numbers';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Link from 'soapbox/components/link.tsx';
+import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { useChatActions } from 'soapbox/queries/chats.ts';
+import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
 const messages = defineMessages({
   leaveChatHeading: { id: 'chat_message_list_intro.leave_chat.heading', defaultMessage: 'Leave Chat' },
diff --git a/src/features/chats/components/chat-message-list.test.tsx b/src/features/chats/components/chat-message-list.test.tsx
index 0e45d807d..b8477b598 100644
--- a/src/features/chats/components/chat-message-list.test.tsx
+++ b/src/features/chats/components/chat-message-list.test.tsx
@@ -2,15 +2,15 @@ import userEvent from '@testing-library/user-event';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { ChatContext } from 'soapbox/contexts/chat-context';
-import { buildAccount, buildInstance } from 'soapbox/jest/factory';
-import { queryClient, render, rootState, screen, waitFor } from 'soapbox/jest/test-helpers';
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import { IChat } from 'soapbox/queries/chats';
-import { ChatMessage } from 'soapbox/types/entities';
+import { __stub } from 'soapbox/api/index.ts';
+import { ChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { buildAccount, buildInstance } from 'soapbox/jest/factory.ts';
+import { queryClient, render, rootState, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import { IChat } from 'soapbox/queries/chats.ts';
+import { ChatMessage } from 'soapbox/types/entities.ts';
 
-import ChatMessageList from './chat-message-list';
+import ChatMessageList from './chat-message-list.tsx';
 
 const chat: IChat = {
   accepted: true,
diff --git a/src/features/chats/components/chat-message-list.tsx b/src/features/chats/components/chat-message-list.tsx
index 376510459..2d49cb86b 100644
--- a/src/features/chats/components/chat-message-list.tsx
+++ b/src/features/chats/components/chat-message-list.tsx
@@ -2,15 +2,15 @@ import { useState, useEffect, useRef, useCallback, useMemo, forwardRef } from 'r
 import { useIntl, defineMessages } from 'react-intl';
 import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
-import { Avatar, Button, Divider, Spinner, Stack, Text } from 'soapbox/components/ui';
-import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
-import { IChat, useChatActions, useChatMessages } from 'soapbox/queries/chats';
+import { Avatar, Button, Divider, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message.tsx';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { IChat, useChatActions, useChatMessages } from 'soapbox/queries/chats.ts';
 
-import ChatMessage from './chat-message';
-import ChatMessageListIntro from './chat-message-list-intro';
+import ChatMessageListIntro from './chat-message-list-intro.tsx';
+import ChatMessage from './chat-message.tsx';
 
-import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities';
+import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   today: { id: 'chats.dividers.today', defaultMessage: 'Today' },
diff --git a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
index e7575707d..b7d2fc4f2 100644
--- a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
+++ b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, cloneElement } from 'react';
 
-import { Portal } from 'soapbox/components/ui';
-import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
+import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector.tsx';
+import { Portal } from 'soapbox/components/ui/index.ts';
 
 interface IChatMessageReactionWrapper {
   onOpen(isOpen: boolean): void;
diff --git a/src/features/chats/components/chat-message-reaction.test.tsx b/src/features/chats/components/chat-message-reaction.test.tsx
index 504e9534f..b3119dca2 100644
--- a/src/features/chats/components/chat-message-reaction.test.tsx
+++ b/src/features/chats/components/chat-message-reaction.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatMessageReaction from './chat-message-reaction';
+import ChatMessageReaction from './chat-message-reaction.tsx';
 
 const emojiReaction = ({
   name: '👍',
diff --git a/src/features/chats/components/chat-message-reaction.tsx b/src/features/chats/components/chat-message-reaction.tsx
index 3f4e4d033..813da27f8 100644
--- a/src/features/chats/components/chat-message-reaction.tsx
+++ b/src/features/chats/components/chat-message-reaction.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 
-import { Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji';
-import { EmojiReaction } from 'soapbox/types/entities';
+import { Text } from 'soapbox/components/ui/index.ts';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { EmojiReaction } from 'soapbox/types/entities.ts';
 
 interface IChatMessageReaction {
   emojiReaction: EmojiReaction;
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index af9932baf..52abcba05 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -11,23 +11,24 @@ import escape from 'lodash/escape';
 import { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji';
-import { MediaGallery } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { stripHTML } from 'soapbox/utils/html';
-import { onlyEmoji } from 'soapbox/utils/rich-content';
 
-import ChatMessageReaction from './chat-message-reaction';
-import ChatMessageReactionWrapper from './chat-message-reaction-wrapper/chat-message-reaction-wrapper';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { MediaGallery } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { stripHTML } from 'soapbox/utils/html.ts';
+import { onlyEmoji } from 'soapbox/utils/rich-content.ts';
 
-import type { Menu as IMenu } from 'soapbox/components/dropdown-menu';
-import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities';
+import ChatMessageReactionWrapper from './chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx';
+import ChatMessageReaction from './chat-message-reaction.tsx';
+
+import type { Menu as IMenu } from 'soapbox/components/dropdown-menu/index.ts';
+import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   copy: { id: 'chats.actions.copy', defaultMessage: 'Copy' },
diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx
index d629d92a0..59187b9c9 100644
--- a/src/features/chats/components/chat-page/chat-page.tsx
+++ b/src/features/chats/components/chat-page/chat-page.tsx
@@ -2,14 +2,14 @@ import clsx from 'clsx';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
-import { Stack } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
 
-import ChatPageMain from './components/chat-page-main';
-import ChatPageNew from './components/chat-page-new';
-import ChatPageSettings from './components/chat-page-settings';
-import ChatPageSidebar from './components/chat-page-sidebar';
-import Welcome from './components/welcome';
+import ChatPageMain from './components/chat-page-main.tsx';
+import ChatPageNew from './components/chat-page-new.tsx';
+import ChatPageSettings from './components/chat-page-settings.tsx';
+import ChatPageSidebar from './components/chat-page-sidebar.tsx';
+import Welcome from './components/welcome.tsx';
 
 interface IChatPage {
   chatId?: string;
diff --git a/src/features/chats/components/chat-page/components/blankslate-empty.tsx b/src/features/chats/components/chat-page/components/blankslate-empty.tsx
index e75704e1b..7bc5ad0eb 100644
--- a/src/features/chats/components/chat-page/components/blankslate-empty.tsx
+++ b/src/features/chats/components/chat-page/components/blankslate-empty.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 interface IBlankslate {
 }
diff --git a/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx b/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
index c6a7c5507..612ddfeb1 100644
--- a/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
+++ b/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 /** To display on the chats main page when no message is selected, but chats are present. */
 const BlankslateWithChats = () => {
diff --git a/src/features/chats/components/chat-page/components/chat-page-main.tsx b/src/features/chats/components/chat-page/components/chat-page-main.tsx
index e5417cc81..f7dd50a74 100644
--- a/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -6,20 +6,20 @@ import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory, useParams } from 'react-router-dom';
 
-import { blockAccount, unblockAccount } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import List, { ListItem } from 'soapbox/components/list';
-import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Tooltip } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { MessageExpirationValues, useChat, useChatActions, useChats } from 'soapbox/queries/chats';
-import { secondsToDays } from 'soapbox/utils/numbers';
+import { blockAccount, unblockAccount } from 'soapbox/actions/accounts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Tooltip } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { MessageExpirationValues, useChat, useChatActions, useChats } from 'soapbox/queries/chats.ts';
+import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
-import Chat from '../../chat';
+import Chat from '../../chat.tsx';
 
-import BlankslateEmpty from './blankslate-empty';
-import BlankslateWithChats from './blankslate-with-chats';
+import BlankslateEmpty from './blankslate-empty.tsx';
+import BlankslateWithChats from './blankslate-with-chats.tsx';
 
 const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
diff --git a/src/features/chats/components/chat-page/components/chat-page-new.tsx b/src/features/chats/components/chat-page/components/chat-page-new.tsx
index 5857b5346..866d23e0c 100644
--- a/src/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -2,9 +2,9 @@ import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
+import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui/index.ts';
 
-import ChatSearch from '../../chat-search/chat-search';
+import ChatSearch from '../../chat-search/chat-search.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat.new_message.title', defaultMessage: 'New Message' },
diff --git a/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index 5f848b8cc..ee9a8709e 100644
--- a/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { changeSetting } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, CardBody, CardTitle, Form, HStack, IconButton, Stack, Toggle } from 'soapbox/components/ui';
-import SettingToggle from 'soapbox/features/notifications/components/setting-toggle';
-import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks';
-import { useUpdateCredentials } from 'soapbox/queries/accounts';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Button, CardBody, CardTitle, Form, HStack, IconButton, Stack, Toggle } from 'soapbox/components/ui/index.ts';
+import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
+import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 type FormData = {
   accepts_chat_messages?: boolean;
diff --git a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index d0c8b621f..d3ba38a59 100644
--- a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -4,12 +4,12 @@ import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
-import { useDebounce, useFeatures } from 'soapbox/hooks';
-import { IChat } from 'soapbox/queries/chats';
+import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui/index.ts';
+import { useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
+import { IChat } from 'soapbox/queries/chats.ts';
 
-import ChatList from '../../chat-list';
-import ChatSearchInput from '../../chat-search-input';
+import ChatList from '../../chat-list.tsx';
+import ChatSearchInput from '../../chat-search-input.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.chats', defaultMessage: 'Chats' },
diff --git a/src/features/chats/components/chat-page/components/welcome.tsx b/src/features/chats/components/chat-page/components/welcome.tsx
index 12bf5f968..719563123 100644
--- a/src/features/chats/components/chat-page/components/welcome.tsx
+++ b/src/features/chats/components/chat-page/components/welcome.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, CardBody, CardTitle, Form, Stack, Text, Toggle } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
-import { useUpdateCredentials } from 'soapbox/queries/accounts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Button, CardBody, CardTitle, Form, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 type FormData = {
   accepts_chat_messages?: boolean;
diff --git a/src/features/chats/components/chat-pane-header.test.tsx b/src/features/chats/components/chat-pane-header.test.tsx
index e642222d0..a2c580220 100644
--- a/src/features/chats/components/chat-pane-header.test.tsx
+++ b/src/features/chats/components/chat-pane-header.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatPaneHeader from './chat-widget/chat-pane-header';
+import ChatPaneHeader from './chat-widget/chat-pane-header.tsx';
 
 describe('<ChatPaneHeader />', () => {
   it('handles the onToggle prop', async () => {
diff --git a/src/features/chats/components/chat-pane/blankslate.tsx b/src/features/chats/components/chat-pane/blankslate.tsx
index a28b24ce1..d652106f8 100644
--- a/src/features/chats/components/chat-pane/blankslate.tsx
+++ b/src/features/chats/components/chat-pane/blankslate.tsx
@@ -1,6 +1,6 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   title: { id: 'chat_pane.blankslate.title', defaultMessage: 'No messages yet' },
diff --git a/src/features/chats/components/chat-pane/chat-pane.test.tsx b/src/features/chats/components/chat-pane/chat-pane.test.tsx
index 9aa54fea2..a4fb419c1 100644
--- a/src/features/chats/components/chat-pane/chat-pane.test.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.test.tsx
@@ -1,13 +1,13 @@
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { ChatContext } from 'soapbox/contexts/chat-context';
-import { StatProvider } from 'soapbox/contexts/stat-context';
+import { __stub } from 'soapbox/api/index.ts';
+import { ChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { StatProvider } from 'soapbox/contexts/stat-context.tsx';
 import chats from 'soapbox/jest/fixtures/chats.json';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatPane from './chat-pane';
+import ChatPane from './chat-pane.tsx';
 
 const renderComponentWithChatContext = (store = {}) => render(
   <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
diff --git a/src/features/chats/components/chat-pane/chat-pane.tsx b/src/features/chats/components/chat-pane/chat-pane.tsx
index 75f767086..abeac1bd6 100644
--- a/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -2,22 +2,22 @@ import editIcon from '@tabler/icons/outline/edit.svg';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Stack } from 'soapbox/components/ui';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useDebounce, useFeatures } from 'soapbox/hooks';
-import { IChat, useChats } from 'soapbox/queries/chats';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
+import { IChat, useChats } from 'soapbox/queries/chats.ts';
 
-import ChatList from '../chat-list';
-import ChatSearch from '../chat-search/chat-search';
-import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
-import ChatSearchInput from '../chat-search-input';
-import ChatPaneHeader from '../chat-widget/chat-pane-header';
-import ChatWindow from '../chat-widget/chat-window';
-import ChatSearchHeader from '../chat-widget/headers/chat-search-header';
-import { Pane } from '../ui';
+import ChatList from '../chat-list.tsx';
+import ChatSearch from '../chat-search/chat-search.tsx';
+import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate.tsx';
+import ChatSearchInput from '../chat-search-input.tsx';
+import ChatPaneHeader from '../chat-widget/chat-pane-header.tsx';
+import ChatWindow from '../chat-widget/chat-window.tsx';
+import ChatSearchHeader from '../chat-widget/headers/chat-search-header.tsx';
+import { Pane } from '../ui/index.ts';
 
-import Blankslate from './blankslate';
+import Blankslate from './blankslate.tsx';
 
 const ChatPane = () => {
   const features = useFeatures();
diff --git a/src/features/chats/components/chat-pending-upload.tsx b/src/features/chats/components/chat-pending-upload.tsx
index 62d385a22..0455b71f0 100644
--- a/src/features/chats/components/chat-pending-upload.tsx
+++ b/src/features/chats/components/chat-pending-upload.tsx
@@ -1,4 +1,4 @@
-import { ProgressBar } from 'soapbox/components/ui';
+import { ProgressBar } from 'soapbox/components/ui/index.ts';
 
 interface IChatPendingUpload {
   progress: number;
diff --git a/src/features/chats/components/chat-search-input.tsx b/src/features/chats/components/chat-search-input.tsx
index 22786e81b..66bb0cc63 100644
--- a/src/features/chats/components/chat-search-input.tsx
+++ b/src/features/chats/components/chat-search-input.tsx
@@ -2,7 +2,7 @@ import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Input } from 'soapbox/components/ui';
+import { Icon, Input } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
diff --git a/src/features/chats/components/chat-search/blankslate.tsx b/src/features/chats/components/chat-search/blankslate.tsx
index a86d7610c..7eadcbec2 100644
--- a/src/features/chats/components/chat-search/blankslate.tsx
+++ b/src/features/chats/components/chat-search/blankslate.tsx
@@ -1,6 +1,6 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   title: { id: 'chat_search.blankslate.title', defaultMessage: 'Start a chat' },
diff --git a/src/features/chats/components/chat-search/chat-search.test.tsx b/src/features/chats/components/chat-search/chat-search.test.tsx
index 43bcacd1a..39cbcb13e 100644
--- a/src/features/chats/components/chat-search/chat-search.test.tsx
+++ b/src/features/chats/components/chat-search/chat-search.test.tsx
@@ -2,11 +2,11 @@ import userEvent from '@testing-library/user-event';
 import { VirtuosoMockContext } from 'react-virtuoso';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { ChatProvider } from 'soapbox/contexts/chat-context';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatSearch from './chat-search';
+import ChatSearch from './chat-search.tsx';
 
 const renderComponent = () => render(
   <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
diff --git a/src/features/chats/components/chat-search/chat-search.tsx b/src/features/chats/components/chat-search/chat-search.tsx
index aa69eb85c..8f6fd74f7 100644
--- a/src/features/chats/components/chat-search/chat-search.tsx
+++ b/src/features/chats/components/chat-search/chat-search.tsx
@@ -6,17 +6,17 @@ import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Icon, Input, Stack } from 'soapbox/components/ui';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { useDebounce } from 'soapbox/hooks';
-import { useChats, ChatKeys } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import useAccountSearch from 'soapbox/queries/search';
-import toast from 'soapbox/toast';
+import { Icon, Input, Stack } from 'soapbox/components/ui/index.ts';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useDebounce } from 'soapbox/hooks/index.ts';
+import { useChats, ChatKeys } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import useAccountSearch from 'soapbox/queries/search.ts';
+import toast from 'soapbox/toast.tsx';
 
-import Blankslate from './blankslate';
-import EmptyResultsBlankslate from './empty-results-blankslate';
-import Results from './results';
+import Blankslate from './blankslate.tsx';
+import EmptyResultsBlankslate from './empty-results-blankslate.tsx';
+import Results from './results.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'chat_search.placeholder', defaultMessage: 'Type a name' },
diff --git a/src/features/chats/components/chat-search/empty-results-blankslate.tsx b/src/features/chats/components/chat-search/empty-results-blankslate.tsx
index 25176ecc6..47eb47554 100644
--- a/src/features/chats/components/chat-search/empty-results-blankslate.tsx
+++ b/src/features/chats/components/chat-search/empty-results-blankslate.tsx
@@ -1,6 +1,6 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No matches found' },
diff --git a/src/features/chats/components/chat-search/results.tsx b/src/features/chats/components/chat-search/results.tsx
index 70ce4e0f2..dc1eff922 100644
--- a/src/features/chats/components/chat-search/results.tsx
+++ b/src/features/chats/components/chat-search/results.tsx
@@ -2,11 +2,11 @@ import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import useAccountSearch from 'soapbox/queries/search';
+import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import useAccountSearch from 'soapbox/queries/search.ts';
 
-import type { Account } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/types/entities.ts';
 
 interface IResults {
   accountSearchResult: ReturnType<typeof useAccountSearch>;
diff --git a/src/features/chats/components/chat-textarea.tsx b/src/features/chats/components/chat-textarea.tsx
index 50c95947b..f71bcfb67 100644
--- a/src/features/chats/components/chat-textarea.tsx
+++ b/src/features/chats/components/chat-textarea.tsx
@@ -1,10 +1,10 @@
 import { forwardRef } from 'react';
 
-import { HStack, Textarea } from 'soapbox/components/ui';
-import { Attachment } from 'soapbox/types/entities';
+import { HStack, Textarea } from 'soapbox/components/ui/index.ts';
+import { Attachment } from 'soapbox/types/entities.ts';
 
-import ChatPendingUpload from './chat-pending-upload';
-import ChatUpload from './chat-upload';
+import ChatPendingUpload from './chat-pending-upload.tsx';
+import ChatUpload from './chat-upload.tsx';
 
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
   attachments?: Attachment[];
diff --git a/src/features/chats/components/chat-upload-preview.tsx b/src/features/chats/components/chat-upload-preview.tsx
index cef73e79b..9f2e89640 100644
--- a/src/features/chats/components/chat-upload-preview.tsx
+++ b/src/features/chats/components/chat-upload-preview.tsx
@@ -1,9 +1,9 @@
 import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
 
-import { Icon } from 'soapbox/components/ui';
-import { MIMETYPE_ICONS } from 'soapbox/components/upload';
+import { Icon } from 'soapbox/components/ui/index.ts';
+import { MIMETYPE_ICONS } from 'soapbox/components/upload.tsx';
 
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 const defaultIcon = paperclipIcon;
 
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index f1c9bddcd..3e2ac0617 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -2,14 +2,14 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 
-import { openModal } from 'soapbox/actions/modals';
-import Blurhash from 'soapbox/components/blurhash';
-import { Icon } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import { Icon } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import ChatUploadPreview from './chat-upload-preview';
+import ChatUploadPreview from './chat-upload-preview.tsx';
 
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 interface IChatUpload {
   attachment: Attachment;
diff --git a/src/features/chats/components/chat-widget.test.tsx b/src/features/chats/components/chat-widget.test.tsx
index 1c1e36b29..9fad5681d 100644
--- a/src/features/chats/components/chat-widget.test.tsx
+++ b/src/features/chats/components/chat-widget.test.tsx
@@ -1,10 +1,10 @@
 import { Route, Switch } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, rootState } from 'soapbox/jest/test-helpers';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, rootState } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatWidget from './chat-widget/chat-widget';
+import ChatWidget from './chat-widget/chat-widget.tsx';
 
 const id = '1';
 const account = buildAccount({
diff --git a/src/features/chats/components/chat-widget/chat-pane-header.tsx b/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 587af09f2..7d6ed760a 100644
--- a/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -2,7 +2,7 @@ import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
 import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
 import { HTMLAttributes } from 'react';
 
-import { HStack, IconButton, Text } from 'soapbox/components/ui';
+import { HStack, IconButton, Text } from 'soapbox/components/ui/index.ts';
 
 interface IChatPaneHeader {
   isOpen: boolean;
diff --git a/src/features/chats/components/chat-widget/chat-settings.tsx b/src/features/chats/components/chat-widget/chat-settings.tsx
index 0d28d8391..fbc663381 100644
--- a/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -3,16 +3,16 @@ import banIcon from '@tabler/icons/outline/ban.svg';
 import logoutIcon from '@tabler/icons/outline/logout.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { blockAccount, unblockAccount } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import List, { ListItem } from 'soapbox/components/list';
-import { Avatar, HStack, Icon, Select, Stack, Text } from 'soapbox/components/ui';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { messageExpirationOptions, MessageExpirationValues, useChatActions } from 'soapbox/queries/chats';
-import { secondsToDays } from 'soapbox/utils/numbers';
+import { blockAccount, unblockAccount } from 'soapbox/actions/accounts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Avatar, HStack, Icon, Select, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { messageExpirationOptions, MessageExpirationValues, useChatActions } from 'soapbox/queries/chats.ts';
+import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
-import ChatPaneHeader from './chat-pane-header';
+import ChatPaneHeader from './chat-pane-header.tsx';
 
 const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
diff --git a/src/features/chats/components/chat-widget/chat-widget.tsx b/src/features/chats/components/chat-widget/chat-widget.tsx
index 7a4c31050..05d8f68f3 100644
--- a/src/features/chats/components/chat-widget/chat-widget.tsx
+++ b/src/features/chats/components/chat-widget/chat-widget.tsx
@@ -1,9 +1,9 @@
 import { useHistory } from 'react-router-dom';
 
-import { ChatProvider } from 'soapbox/contexts/chat-context';
-import { useOwnAccount } from 'soapbox/hooks';
+import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
 
-import ChatPane from '../chat-pane/chat-pane';
+import ChatPane from '../chat-pane/chat-pane.tsx';
 
 const ChatWidget = () => {
   const { account } = useOwnAccount();
diff --git a/src/features/chats/components/chat-widget/chat-window.tsx b/src/features/chats/components/chat-widget/chat-window.tsx
index 5e072a79c..f777e7328 100644
--- a/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/src/features/chats/components/chat-widget/chat-window.tsx
@@ -5,15 +5,15 @@ import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Avatar, HStack, Icon, Stack, Text, Tooltip } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { secondsToDays } from 'soapbox/utils/numbers';
+import { Avatar, HStack, Icon, Stack, Text, Tooltip } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
-import Chat from '../chat';
+import Chat from '../chat.tsx';
 
-import ChatPaneHeader from './chat-pane-header';
-import ChatSettings from './chat-settings';
+import ChatPaneHeader from './chat-pane-header.tsx';
+import ChatSettings from './chat-settings.tsx';
 
 const messages = defineMessages({
   autoDeleteMessage: { id: 'chat_window.auto_delete_label', defaultMessage: 'Auto-delete after {day, plural, one {# day} other {# days}}' },
diff --git a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index 655d41e78..8d4ac0cd2 100644
--- a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -1,10 +1,10 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
+import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 
-import ChatPaneHeader from '../chat-pane-header';
+import ChatPaneHeader from '../chat-pane-header.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat_search.title', defaultMessage: 'Messages' },
diff --git a/src/features/chats/components/chat.tsx b/src/features/chats/components/chat.tsx
index 82a78a8ec..3eaa508ba 100644
--- a/src/features/chats/components/chat.tsx
+++ b/src/features/chats/components/chat.tsx
@@ -3,17 +3,17 @@ import clsx from 'clsx';
 import { MutableRefObject, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { uploadMedia } from 'soapbox/actions/media';
-import { Stack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { normalizeAttachment } from 'soapbox/normalizers';
-import { IChat, useChatActions } from 'soapbox/queries/chats';
-import toast from 'soapbox/toast';
+import { uploadMedia } from 'soapbox/actions/media.ts';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
+import { IChat, useChatActions } from 'soapbox/queries/chats.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ChatComposer from './chat-composer';
-import ChatMessageList from './chat-message-list';
+import ChatComposer from './chat-composer.tsx';
+import ChatMessageList from './chat-message-list.tsx';
 
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
 
diff --git a/src/features/chats/components/ui/index.ts b/src/features/chats/components/ui/index.ts
index d343a90ff..1b32ebdcb 100644
--- a/src/features/chats/components/ui/index.ts
+++ b/src/features/chats/components/ui/index.ts
@@ -1 +1 @@
-export { Pane } from './pane';
+export { Pane } from './pane.tsx';
diff --git a/src/features/chats/index.tsx b/src/features/chats/index.tsx
index a7cc9a2e6..f9406508b 100644
--- a/src/features/chats/index.tsx
+++ b/src/features/chats/index.tsx
@@ -1,6 +1,6 @@
-import { ChatProvider } from 'soapbox/contexts/chat-context';
+import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
 
-import ChatPage from './components/chat-page/chat-page';
+import ChatPage from './components/chat-page/chat-page.tsx';
 
 interface IChatIndex {
   params?: {
diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx
index 111990237..1ee644298 100644
--- a/src/features/community-timeline/index.tsx
+++ b/src/features/community-timeline/index.tsx
@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { expandCommunityTimeline } from 'soapbox/actions/timelines';
-import { useCommunityStream } from 'soapbox/api/hooks';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings, useTheme, useInstance } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandCommunityTimeline } from 'soapbox/actions/timelines.ts';
+import { useCommunityStream } from 'soapbox/api/hooks/index.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch, useSettings, useTheme, useInstance } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 const CommunityTimeline = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/compose/components/autosuggest-account.tsx b/src/features/compose/components/autosuggest-account.tsx
index 0a97f26a2..38a03e0f4 100644
--- a/src/features/compose/components/autosuggest-account.tsx
+++ b/src/features/compose/components/autosuggest-account.tsx
@@ -1,5 +1,5 @@
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
 
 interface IAutosuggestAccount {
   id: string;
diff --git a/src/features/compose/components/compose-form-button.tsx b/src/features/compose/components/compose-form-button.tsx
index fd552107c..56aaef8d4 100644
--- a/src/features/compose/components/compose-form-button.tsx
+++ b/src/features/compose/components/compose-form-button.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { IconButton } from 'soapbox/components/ui';
+import { IconButton } from 'soapbox/components/ui/index.ts';
 
 interface IComposeFormButton {
   icon: string;
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 8cba0f713..61fef02ec 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -14,35 +14,35 @@ import {
   fetchComposeSuggestions,
   selectComposeSuggestion,
   uploadCompose,
-} from 'soapbox/actions/compose';
-import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import { Button, HStack, Stack } from 'soapbox/components/ui';
-import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
-import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
+} from 'soapbox/actions/compose.ts';
+import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
+import { Button, HStack, Stack } from 'soapbox/components/ui/index.ts';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
+import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks/index.ts';
 
-import QuotedStatusContainer from '../containers/quoted-status-container';
-import ReplyIndicatorContainer from '../containers/reply-indicator-container';
-import UploadButtonContainer from '../containers/upload-button-container';
-import WarningContainer from '../containers/warning-container';
-import { $createEmojiNode } from '../editor/nodes/emoji-node';
-import { countableText } from '../util/counter';
+import QuotedStatusContainer from '../containers/quoted-status-container.tsx';
+import ReplyIndicatorContainer from '../containers/reply-indicator-container.ts';
+import UploadButtonContainer from '../containers/upload-button-container.ts';
+import WarningContainer from '../containers/warning-container.tsx';
+import { $createEmojiNode } from '../editor/nodes/emoji-node.tsx';
+import { countableText } from '../util/counter.ts';
 
-import MarkdownButton from './markdown-button';
-import PollButton from './poll-button';
-import PollForm from './polls/poll-form';
-import PrivacyDropdown from './privacy-dropdown';
-import ReplyGroupIndicator from './reply-group-indicator';
-import ReplyMentions from './reply-mentions';
-import ScheduleButton from './schedule-button';
-import ScheduleForm from './schedule-form';
-import SpoilerButton from './spoiler-button';
-import SpoilerInput from './spoiler-input';
-import TextCharacterCounter from './text-character-counter';
-import UploadForm from './upload-form';
-import VisualCharacterCounter from './visual-character-counter';
+import MarkdownButton from './markdown-button.tsx';
+import PollButton from './poll-button.tsx';
+import PollForm from './polls/poll-form.tsx';
+import PrivacyDropdown from './privacy-dropdown.tsx';
+import ReplyGroupIndicator from './reply-group-indicator.tsx';
+import ReplyMentions from './reply-mentions.tsx';
+import ScheduleButton from './schedule-button.tsx';
+import ScheduleForm from './schedule-form.tsx';
+import SpoilerButton from './spoiler-button.tsx';
+import SpoilerInput from './spoiler-input.tsx';
+import TextCharacterCounter from './text-character-counter.tsx';
+import UploadForm from './upload-form.tsx';
+import VisualCharacterCounter from './visual-character-counter.tsx';
 
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What\'s on your mind?' },
diff --git a/src/features/compose/components/markdown-button.tsx b/src/features/compose/components/markdown-button.tsx
index 13fcfebda..4ce407b94 100644
--- a/src/features/compose/components/markdown-button.tsx
+++ b/src/features/compose/components/markdown-button.tsx
@@ -1,10 +1,10 @@
 import markdownIcon from '@tabler/icons/outline/markdown.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeComposeContentType } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { changeComposeContentType } from 'soapbox/actions/compose.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
-import ComposeFormButton from './compose-form-button';
+import ComposeFormButton from './compose-form-button.tsx';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
diff --git a/src/features/compose/components/poll-button.tsx b/src/features/compose/components/poll-button.tsx
index 81463a0de..a541b8851 100644
--- a/src/features/compose/components/poll-button.tsx
+++ b/src/features/compose/components/poll-button.tsx
@@ -1,10 +1,10 @@
 import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { addPoll, removePoll } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { addPoll, removePoll } from 'soapbox/actions/compose.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
-import ComposeFormButton from './compose-form-button';
+import ComposeFormButton from './compose-form-button.tsx';
 
 const messages = defineMessages({
   add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
diff --git a/src/features/compose/components/polls/duration-selector.test.tsx b/src/features/compose/components/polls/duration-selector.test.tsx
index af24370fa..12b0e11f9 100644
--- a/src/features/compose/components/polls/duration-selector.test.tsx
+++ b/src/features/compose/components/polls/duration-selector.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import DurationSelector from './duration-selector';
+import DurationSelector from './duration-selector.tsx';
 
 describe('<DurationSelector />', () => {
   it('defaults to 2 days', () => {
diff --git a/src/features/compose/components/polls/duration-selector.tsx b/src/features/compose/components/polls/duration-selector.tsx
index 5b35daa83..03f8ccf14 100644
--- a/src/features/compose/components/polls/duration-selector.tsx
+++ b/src/features/compose/components/polls/duration-selector.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Select } from 'soapbox/components/ui';
+import { Select } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
diff --git a/src/features/compose/components/polls/poll-form.tsx b/src/features/compose/components/polls/poll-form.tsx
index 2877e4071..fa65b708a 100644
--- a/src/features/compose/components/polls/poll-form.tsx
+++ b/src/features/compose/components/polls/poll-form.tsx
@@ -1,13 +1,13 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { addPollOption, changePollOption, changePollSettings, clearComposeSuggestions, fetchComposeSuggestions, removePoll, removePollOption, selectComposeSuggestion } from 'soapbox/actions/compose';
-import AutosuggestInput from 'soapbox/components/autosuggest-input';
-import { Button, Divider, HStack, Stack, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks';
+import { addPollOption, changePollOption, changePollSettings, clearComposeSuggestions, fetchComposeSuggestions, removePoll, removePollOption, selectComposeSuggestion } from 'soapbox/actions/compose.ts';
+import AutosuggestInput from 'soapbox/components/autosuggest-input.tsx';
+import { Button, Divider, HStack, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks/index.ts';
 
-import DurationSelector from './duration-selector';
+import DurationSelector from './duration-selector.tsx';
 
-import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
+import type { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
 
 const messages = defineMessages({
   option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Answer #{number}' },
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 8f31f08d5..fe55abd77 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -10,14 +10,14 @@ import { spring } from 'react-motion';
 // @ts-ignore
 import Overlay from 'react-overlays/lib/Overlay';
 
-import { changeComposeVisibility } from 'soapbox/actions/compose';
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import Icon from 'soapbox/components/icon';
-import { IconButton } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
-import { userTouching } from 'soapbox/is-mobile';
+import { changeComposeVisibility } from 'soapbox/actions/compose.ts';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import { IconButton } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
 
-import Motion from '../../ui/util/optional-motion';
+import Motion from '../../ui/util/optional-motion.tsx';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
diff --git a/src/features/compose/components/reply-group-indicator.tsx b/src/features/compose/components/reply-group-indicator.tsx
index b3764f50f..d4d17495f 100644
--- a/src/features/compose/components/reply-group-indicator.tsx
+++ b/src/features/compose/components/reply-group-indicator.tsx
@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Link from 'soapbox/components/link';
-import { Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { Group } from 'soapbox/schemas';
-import { makeGetStatus } from 'soapbox/selectors';
+import Link from 'soapbox/components/link.tsx';
+import { Text } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { Group } from 'soapbox/schemas/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IReplyGroupIndicator {
   composeId: string;
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index 840ca5f79..28ba10f18 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -1,13 +1,13 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import Markup from 'soapbox/components/markup';
-import { Stack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import Markup from 'soapbox/components/markup.tsx';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 interface IReplyIndicator {
   className?: string;
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index 60f3e293c..d802e07ad 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
-import { makeGetStatus } from 'soapbox/selectors';
-import { shortenNostr } from 'soapbox/utils/nostr';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
+import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IReplyMentions {
   composeId: string;
diff --git a/src/features/compose/components/schedule-button.tsx b/src/features/compose/components/schedule-button.tsx
index c43a85b24..fbb37fa98 100644
--- a/src/features/compose/components/schedule-button.tsx
+++ b/src/features/compose/components/schedule-button.tsx
@@ -1,10 +1,10 @@
 import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { addSchedule, removeSchedule } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { addSchedule, removeSchedule } from 'soapbox/actions/compose.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
-import ComposeFormButton from './compose-form-button';
+import ComposeFormButton from './compose-form-button.tsx';
 
 const messages = defineMessages({
   add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' },
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index 9a8dc4808..961c0d751 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -1,11 +1,11 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { setSchedule, removeSchedule } from 'soapbox/actions/compose';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { setSchedule, removeSchedule } from 'soapbox/actions/compose.ts';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import { Datetime } from 'soapbox/components/ui/datetime/datetime.tsx';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   schedule: { id: 'schedule.post_time', defaultMessage: 'Post Date/Time' },
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index 19ed7f0ae..5b32fd317 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -3,23 +3,23 @@ import clsx from 'clsx';
 import { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search';
-import { expandTrendingStatuses, fetchTrendingStatuses } from 'soapbox/actions/trending-statuses';
-import { useAccount } from 'soapbox/api/hooks';
-import Hashtag from 'soapbox/components/hashtag';
-import IconButton from 'soapbox/components/icon-button';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { HStack, Spinner, Tabs, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import StatusContainer from 'soapbox/containers/status-container';
-import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account';
-import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search.ts';
+import { expandTrendingStatuses, fetchTrendingStatuses } from 'soapbox/actions/trending-statuses.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Hashtag from 'soapbox/components/hashtag.tsx';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { HStack, Spinner, Tabs, Text } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account.tsx';
+import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { SearchFilter } from 'soapbox/reducers/search';
+import type { SearchFilter } from 'soapbox/reducers/search.ts';
 
 const messages = defineMessages({
   accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
diff --git a/src/features/compose/components/search-zap-split.tsx b/src/features/compose/components/search-zap-split.tsx
index 892b4262f..cc513ce16 100644
--- a/src/features/compose/components/search-zap-split.tsx
+++ b/src/features/compose/components/search-zap-split.tsx
@@ -11,14 +11,14 @@ import {
   setSearchAccount,
   showSearch,
   submitSearch,
-} from 'soapbox/actions/search';
-import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
-import { Input } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { Account } from 'soapbox/schemas';
-import { selectAccount } from 'soapbox/selectors';
-import { RootState } from 'soapbox/store';
+} from 'soapbox/actions/search.ts';
+import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import { Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { Account } from 'soapbox/schemas/index.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { RootState } from 'soapbox/store.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index b1d79a4a2..97bf548e0 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -13,13 +13,13 @@ import {
   setSearchAccount,
   showSearch,
   submitSearch,
-} from 'soapbox/actions/search';
-import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
-import { Input } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { selectAccount } from 'soapbox/selectors';
-import { AppDispatch, RootState } from 'soapbox/store';
+} from 'soapbox/actions/search.ts';
+import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import { Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
diff --git a/src/features/compose/components/spoiler-button.tsx b/src/features/compose/components/spoiler-button.tsx
index 7f23a578d..7e2dbf915 100644
--- a/src/features/compose/components/spoiler-button.tsx
+++ b/src/features/compose/components/spoiler-button.tsx
@@ -1,10 +1,10 @@
 import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeComposeSpoilerness } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { changeComposeSpoilerness } from 'soapbox/actions/compose.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
-import ComposeFormButton from './compose-form-button';
+import ComposeFormButton from './compose-form-button.tsx';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
diff --git a/src/features/compose/components/spoiler-input.tsx b/src/features/compose/components/spoiler-input.tsx
index e9e79173a..cbcccafdf 100644
--- a/src/features/compose/components/spoiler-input.tsx
+++ b/src/features/compose/components/spoiler-input.tsx
@@ -2,10 +2,10 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeComposeSpoilerness, changeComposeSpoilerText } from 'soapbox/actions/compose';
-import AutosuggestInput, { IAutosuggestInput } from 'soapbox/components/autosuggest-input';
-import { Divider, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { changeComposeSpoilerness, changeComposeSpoilerText } from 'soapbox/actions/compose.ts';
+import AutosuggestInput, { IAutosuggestInput } from 'soapbox/components/autosuggest-input.tsx';
+import { Divider, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   title: { id: 'compose_form.spoiler_title', defaultMessage: 'Sensitive content' },
diff --git a/src/features/compose/components/upload-button.tsx b/src/features/compose/components/upload-button.tsx
index 68ea472fd..c38a3f147 100644
--- a/src/features/compose/components/upload-button.tsx
+++ b/src/features/compose/components/upload-button.tsx
@@ -3,8 +3,8 @@ import photoIcon from '@tabler/icons/outline/photo.svg';
 import { useRef } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
-import { IconButton } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import { IconButton } from 'soapbox/components/ui/index.ts';
+import { useInstance } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
diff --git a/src/features/compose/components/upload-form.tsx b/src/features/compose/components/upload-form.tsx
index 424e9aaac..fc8b1bd74 100644
--- a/src/features/compose/components/upload-form.tsx
+++ b/src/features/compose/components/upload-form.tsx
@@ -1,14 +1,14 @@
 import clsx from 'clsx';
 import { useCallback, useRef } from 'react';
 
-import { changeMediaOrder } from 'soapbox/actions/compose';
-import { HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { changeMediaOrder } from 'soapbox/actions/compose.ts';
+import { HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
-import Upload from './upload';
-import UploadProgress from './upload-progress';
+import UploadProgress from './upload-progress.tsx';
+import Upload from './upload.tsx';
 
-import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities.ts';
 
 interface IUploadForm {
   composeId: string;
diff --git a/src/features/compose/components/upload-progress.tsx b/src/features/compose/components/upload-progress.tsx
index dc526723e..d26a1ef98 100644
--- a/src/features/compose/components/upload-progress.tsx
+++ b/src/features/compose/components/upload-progress.tsx
@@ -1,5 +1,5 @@
-import UploadProgress from 'soapbox/components/upload-progress';
-import { useCompose } from 'soapbox/hooks';
+import UploadProgress from 'soapbox/components/upload-progress.tsx';
+import { useCompose } from 'soapbox/hooks/index.ts';
 
 interface IComposeUploadProgress {
   composeId: string;
diff --git a/src/features/compose/components/upload.tsx b/src/features/compose/components/upload.tsx
index fa834fd8e..f0e5cb6f5 100644
--- a/src/features/compose/components/upload.tsx
+++ b/src/features/compose/components/upload.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
-import { undoUploadCompose, changeUploadCompose } from 'soapbox/actions/compose';
-import Upload from 'soapbox/components/upload';
-import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks';
+import { undoUploadCompose, changeUploadCompose } from 'soapbox/actions/compose.ts';
+import Upload from 'soapbox/components/upload.tsx';
+import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks/index.ts';
 
 interface IUploadCompose {
   id: string;
diff --git a/src/features/compose/components/visual-character-counter.tsx b/src/features/compose/components/visual-character-counter.tsx
index b056d235e..50f3633fe 100644
--- a/src/features/compose/components/visual-character-counter.tsx
+++ b/src/features/compose/components/visual-character-counter.tsx
@@ -1,7 +1,7 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { length } from 'stringz';
 
-import ProgressCircle from 'soapbox/components/progress-circle';
+import ProgressCircle from 'soapbox/components/progress-circle.tsx';
 
 const messages = defineMessages({
   title: { id: 'compose.character_counter.title', defaultMessage: 'Used {chars} out of {maxChars} {maxChars, plural, one {character} other {characters}}' },
diff --git a/src/features/compose/components/warning.tsx b/src/features/compose/components/warning.tsx
index 15185e263..9048bbed7 100644
--- a/src/features/compose/components/warning.tsx
+++ b/src/features/compose/components/warning.tsx
@@ -1,6 +1,6 @@
 import { spring } from 'react-motion';
 
-import Motion from '../../ui/util/optional-motion';
+import Motion from '../../ui/util/optional-motion.tsx';
 
 interface IWarning {
   message: React.ReactNode;
diff --git a/src/features/compose/containers/quoted-status-container.tsx b/src/features/compose/containers/quoted-status-container.tsx
index 56d341e9d..bd43b961b 100644
--- a/src/features/compose/containers/quoted-status-container.tsx
+++ b/src/features/compose/containers/quoted-status-container.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 
-import { cancelQuoteCompose } from 'soapbox/actions/compose';
-import QuotedStatus from 'soapbox/components/quoted-status';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { cancelQuoteCompose } from 'soapbox/actions/compose.ts';
+import QuotedStatus from 'soapbox/components/quoted-status.tsx';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusContainer {
   composeId: string;
diff --git a/src/features/compose/containers/reply-indicator-container.ts b/src/features/compose/containers/reply-indicator-container.ts
index b77c4a8d0..871df1dc9 100644
--- a/src/features/compose/containers/reply-indicator-container.ts
+++ b/src/features/compose/containers/reply-indicator-container.ts
@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
 
-import { cancelReplyCompose } from 'soapbox/actions/compose';
-import { makeGetStatus } from 'soapbox/selectors';
+import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import ReplyIndicator from '../components/reply-indicator';
+import ReplyIndicator from '../components/reply-indicator.tsx';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { Status } from 'soapbox/types/entities.ts';
 
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
diff --git a/src/features/compose/containers/upload-button-container.ts b/src/features/compose/containers/upload-button-container.ts
index 6b2307c93..6ead8ee37 100644
--- a/src/features/compose/containers/upload-button-container.ts
+++ b/src/features/compose/containers/upload-button-container.ts
@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
 
-import { uploadCompose } from 'soapbox/actions/compose';
+import { uploadCompose } from 'soapbox/actions/compose.ts';
 
-import UploadButton from '../components/upload-button';
+import UploadButton from '../components/upload-button.tsx';
 
 import type { IntlShape } from 'react-intl';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const mapStateToProps = (state: RootState, { composeId }: { composeId: string }) => ({
   disabled: state.compose.get(composeId)?.is_uploading,
diff --git a/src/features/compose/containers/warning-container.tsx b/src/features/compose/containers/warning-container.tsx
index bbfc199cb..f51f4971f 100644
--- a/src/features/compose/containers/warning-container.tsx
+++ b/src/features/compose/containers/warning-container.tsx
@@ -1,10 +1,10 @@
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useAppSelector, useCompose, useFeatures, useOwnAccount, useSettingsNotifications } from 'soapbox/hooks';
-import { selectOwnAccount } from 'soapbox/selectors';
+import { useAppSelector, useCompose, useFeatures, useOwnAccount, useSettingsNotifications } from 'soapbox/hooks/index.ts';
+import { selectOwnAccount } from 'soapbox/selectors/index.ts';
 
-import Warning from '../components/warning';
+import Warning from '../components/warning.tsx';
 
 const APPROX_HASHTAG_RE = /(?:^|[^/)\w])#(\w*[a-zA-Z·]\w*)/i;
 
diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx
index eccf8f8c6..54085027a 100644
--- a/src/features/compose/editor/index.tsx
+++ b/src/features/compose/editor/index.tsx
@@ -18,14 +18,14 @@ import { $createParagraphNode, $createTextNode, $getRoot, type LexicalEditor } f
 import { forwardRef, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import { useNodes } from './nodes';
-import AutosuggestPlugin from './plugins/autosuggest-plugin';
-import FocusPlugin from './plugins/focus-plugin';
-import RefPlugin from './plugins/ref-plugin';
-import StatePlugin from './plugins/state-plugin';
-import SubmitPlugin from './plugins/submit-plugin';
+import { useNodes } from './nodes/index.ts';
+import AutosuggestPlugin from './plugins/autosuggest-plugin.tsx';
+import FocusPlugin from './plugins/focus-plugin.tsx';
+import RefPlugin from './plugins/ref-plugin.tsx';
+import StatePlugin from './plugins/state-plugin.tsx';
+import SubmitPlugin from './plugins/submit-plugin.tsx';
 
 const LINK_MATCHERS = [
   createLinkMatcherWithRegExp(
diff --git a/src/features/compose/editor/nodes/emoji-node.tsx b/src/features/compose/editor/nodes/emoji-node.tsx
index 81a39a05c..87451423d 100644
--- a/src/features/compose/editor/nodes/emoji-node.tsx
+++ b/src/features/compose/editor/nodes/emoji-node.tsx
@@ -1,7 +1,7 @@
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
 
-import { Emoji as Component } from 'soapbox/components/ui';
-import { isNativeEmoji, type Emoji } from 'soapbox/features/emoji';
+import { Emoji as Component } from 'soapbox/components/ui/index.ts';
+import { isNativeEmoji, type Emoji } from 'soapbox/features/emoji/index.ts';
 
 import type {
   EditorConfig,
diff --git a/src/features/compose/editor/nodes/index.ts b/src/features/compose/editor/nodes/index.ts
index 7c7695259..efb47c3c2 100644
--- a/src/features/compose/editor/nodes/index.ts
+++ b/src/features/compose/editor/nodes/index.ts
@@ -7,8 +7,8 @@
 import { HashtagNode } from '@lexical/hashtag';
 import { AutoLinkNode } from '@lexical/link';
 
-import { EmojiNode } from './emoji-node';
-import { MentionNode } from './mention-node';
+import { EmojiNode } from './emoji-node.tsx';
+import { MentionNode } from './mention-node.tsx';
 
 import type { Klass, LexicalNode } from 'lexical';
 
diff --git a/src/features/compose/editor/nodes/mention-node.tsx b/src/features/compose/editor/nodes/mention-node.tsx
index 7ebe49644..5d8ef036a 100644
--- a/src/features/compose/editor/nodes/mention-node.tsx
+++ b/src/features/compose/editor/nodes/mention-node.tsx
@@ -6,7 +6,7 @@
 
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
 
-import Mention from 'soapbox/components/mention';
+import Mention from 'soapbox/components/mention.tsx';
 
 import type {
   EditorConfig,
@@ -15,7 +15,7 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
-import type { Mention as MentionEntity } from 'soapbox/schemas';
+import type { Mention as MentionEntity } from 'soapbox/schemas/index.ts';
 
 type SerializedMentionNode = Spread<{
   mention: MentionEntity;
diff --git a/src/features/compose/editor/plugins/autosuggest-plugin.tsx b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
index ca4e4cf8b..717abd357 100644
--- a/src/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -33,18 +33,18 @@ import {
 } from 'react';
 import ReactDOM from 'react-dom';
 
-import { clearComposeSuggestions, fetchComposeSuggestions } from 'soapbox/actions/compose';
-import { chooseEmoji } from 'soapbox/actions/emojis';
-import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
-import { selectAccount } from 'soapbox/selectors';
-import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
+import { clearComposeSuggestions, fetchComposeSuggestions } from 'soapbox/actions/compose.ts';
+import { chooseEmoji } from 'soapbox/actions/emojis.ts';
+import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji.tsx';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
-import AutosuggestAccount from '../../components/autosuggest-account';
-import { $createEmojiNode } from '../nodes/emoji-node';
-import { $createMentionNode } from '../nodes/mention-node';
+import AutosuggestAccount from '../../components/autosuggest-account.tsx';
+import { $createEmojiNode } from '../nodes/emoji-node.tsx';
+import { $createMentionNode } from '../nodes/mention-node.tsx';
 
-import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
+import type { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
 
 type QueryMatch = {
   leadOffset: number;
diff --git a/src/features/compose/editor/plugins/state-plugin.tsx b/src/features/compose/editor/plugins/state-plugin.tsx
index 06f102b64..fb366bdb2 100644
--- a/src/features/compose/editor/plugins/state-plugin.tsx
+++ b/src/features/compose/editor/plugins/state-plugin.tsx
@@ -2,8 +2,8 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { $getRoot } from 'lexical';
 import { useEffect } from 'react';
 
-import { setEditorState } from 'soapbox/actions/compose';
-import { useAppDispatch } from 'soapbox/hooks';
+import { setEditorState } from 'soapbox/actions/compose.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 interface IStatePlugin {
   composeId: string;
diff --git a/src/features/compose/util/counter.ts b/src/features/compose/util/counter.ts
index 6d999a547..407dfe4d1 100644
--- a/src/features/compose/util/counter.ts
+++ b/src/features/compose/util/counter.ts
@@ -1,4 +1,4 @@
-import { urlRegex } from './url-regex';
+import { urlRegex } from './url-regex.ts';
 
 const urlPlaceholder = 'xxxxxxxxxxxxxxxxxxxxxxx';
 
diff --git a/src/features/conversations/components/conversation.tsx b/src/features/conversations/components/conversation.tsx
index eb390a305..6c5c55346 100644
--- a/src/features/conversations/components/conversation.tsx
+++ b/src/features/conversations/components/conversation.tsx
@@ -1,9 +1,9 @@
 import { useHistory } from 'react-router-dom';
 
-import { markConversationRead } from 'soapbox/actions/conversations';
-import StatusContainer from 'soapbox/containers/status-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { selectAccount } from 'soapbox/selectors';
+import { markConversationRead } from 'soapbox/actions/conversations.ts';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
 
 interface IConversation {
   conversationId: string;
diff --git a/src/features/conversations/components/conversations-list.tsx b/src/features/conversations/components/conversations-list.tsx
index 6fd74bf7e..645064ad6 100644
--- a/src/features/conversations/components/conversations-list.tsx
+++ b/src/features/conversations/components/conversations-list.tsx
@@ -2,11 +2,11 @@ import debounce from 'lodash/debounce';
 import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { expandConversations } from 'soapbox/actions/conversations';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { expandConversations } from 'soapbox/actions/conversations.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import Conversation from './conversation';
+import Conversation from './conversation.tsx';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
 
diff --git a/src/features/conversations/index.tsx b/src/features/conversations/index.tsx
index 1bd0f2074..c575e1545 100644
--- a/src/features/conversations/index.tsx
+++ b/src/features/conversations/index.tsx
@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { directComposeById } from 'soapbox/actions/compose';
-import { mountConversations, unmountConversations, expandConversations } from 'soapbox/actions/conversations';
-import { useDirectStream } from 'soapbox/api/hooks';
-import AccountSearch from 'soapbox/components/account-search';
-import { Column } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { directComposeById } from 'soapbox/actions/compose.ts';
+import { mountConversations, unmountConversations, expandConversations } from 'soapbox/actions/conversations.ts';
+import { useDirectStream } from 'soapbox/api/hooks/index.ts';
+import AccountSearch from 'soapbox/components/account-search.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import ConversationsList from './components/conversations-list';
+import ConversationsList from './components/conversations-list.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Direct messages' },
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 860110936..5aacaf979 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,15 +1,15 @@
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
 
-import { openModal } from 'soapbox/actions/modals';
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Text, Icon, Stack, HStack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import { Text, Icon, Stack, HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import { getExplorerUrl } from '../utils/block-explorer';
-import { getTitle } from '../utils/coin-db';
+import { getExplorerUrl } from '../utils/block-explorer.ts';
+import { getTitle } from '../utils/coin-db.ts';
 
-import CryptoIcon from './crypto-icon';
+import CryptoIcon from './crypto-icon.tsx';
 
 export interface ICryptoAddress {
   address: string;
diff --git a/src/features/crypto-donate/components/crypto-donate-panel.tsx b/src/features/crypto-donate/components/crypto-donate-panel.tsx
index 0c0df631e..fd49eab97 100644
--- a/src/features/crypto-donate/components/crypto-donate-panel.tsx
+++ b/src/features/crypto-donate/components/crypto-donate-panel.tsx
@@ -1,10 +1,10 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Text, Widget } from 'soapbox/components/ui';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import { Text, Widget } from 'soapbox/components/ui/index.ts';
+import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
-import SiteWallet from './site-wallet';
+import SiteWallet from './site-wallet.tsx';
 
 const messages = defineMessages({
   actionTitle: { id: 'crypto_donate_panel.actions.view', defaultMessage: 'Click to see {count, plural, one {# wallet} other {# wallets}}' },
diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx
index 476def29d..10a19c135 100644
--- a/src/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -1,13 +1,13 @@
 import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { QRCodeCanvas as QRCode } from 'qrcode.react';
 
-import CopyableInput from 'soapbox/components/copyable-input';
-import Icon from 'soapbox/components/icon';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import Icon from 'soapbox/components/icon.tsx';
 
-import { getExplorerUrl } from '../utils/block-explorer';
-import { getTitle } from '../utils/coin-db';
+import { getExplorerUrl } from '../utils/block-explorer.ts';
+import { getTitle } from '../utils/coin-db.ts';
 
-import CryptoIcon from './crypto-icon';
+import CryptoIcon from './crypto-icon.tsx';
 
 interface IDetailedCryptoAddress {
   address: string;
diff --git a/src/features/crypto-donate/components/lightning-address.tsx b/src/features/crypto-donate/components/lightning-address.tsx
index 2f73793a4..5fcad5c26 100644
--- a/src/features/crypto-donate/components/lightning-address.tsx
+++ b/src/features/crypto-donate/components/lightning-address.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Text, Stack, HStack, Emoji } from 'soapbox/components/ui';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import { Text, Stack, HStack, Emoji } from 'soapbox/components/ui/index.ts';
 
 export interface ILightningAddress {
   address: string;
diff --git a/src/features/crypto-donate/components/site-wallet.tsx b/src/features/crypto-donate/components/site-wallet.tsx
index 3c63171de..d7a52d2ec 100644
--- a/src/features/crypto-donate/components/site-wallet.tsx
+++ b/src/features/crypto-donate/components/site-wallet.tsx
@@ -1,7 +1,7 @@
-import { Stack } from 'soapbox/components/ui';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
-import CryptoAddress from './crypto-address';
+import CryptoAddress from './crypto-address.tsx';
 
 interface ISiteWallet {
   limit?: number;
diff --git a/src/features/crypto-donate/index.tsx b/src/features/crypto-donate/index.tsx
index 980f7dd31..3ad1dd714 100644
--- a/src/features/crypto-donate/index.tsx
+++ b/src/features/crypto-donate/index.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Accordion, Column, Stack } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import { Accordion, Column, Stack } from 'soapbox/components/ui/index.ts';
+import { useInstance } from 'soapbox/hooks/index.ts';
 
-import SiteWallet from './components/site-wallet';
+import SiteWallet from './components/site-wallet.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.crypto_donate', defaultMessage: 'Donate Cryptocurrency' },
diff --git a/src/features/delete-account/index.tsx b/src/features/delete-account/index.tsx
index 6a32b5175..bf9d109fe 100644
--- a/src/features/delete-account/index.tsx
+++ b/src/features/delete-account/index.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { deleteAccount } from 'soapbox/actions/security';
-import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { deleteAccount } from 'soapbox/actions/security.ts';
+import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' },
diff --git a/src/features/developers/apps/create.tsx b/src/features/developers/apps/create.tsx
index bf69a7f7c..89de0b19c 100644
--- a/src/features/developers/apps/create.tsx
+++ b/src/features/developers/apps/create.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
-import { createApp } from 'soapbox/actions/apps';
-import { obtainOAuthToken } from 'soapbox/actions/oauth';
-import { Column, Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { getBaseURL } from 'soapbox/utils/accounts';
+import { createApp } from 'soapbox/actions/apps.ts';
+import { obtainOAuthToken } from 'soapbox/actions/oauth.ts';
+import { Column, Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { getBaseURL } from 'soapbox/utils/accounts.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.app_create', defaultMessage: 'Create app' },
diff --git a/src/features/developers/developers-challenge.tsx b/src/features/developers/developers-challenge.tsx
index 520fbdccc..168ceba22 100644
--- a/src/features/developers/developers-challenge.tsx
+++ b/src/features/developers/developers-challenge.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { changeSettingImmediate } from 'soapbox/actions/settings';
-import { Column, Button, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
+import { Column, Button, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.developers', defaultMessage: 'Developers' },
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index 083511e78..acedd4439 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -9,12 +9,12 @@ import urgentIcon from '@tabler/icons/outline/urgent.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { changeSettingImmediate } from 'soapbox/actions/settings';
-import { Column, Text } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import sourceCode from 'soapbox/utils/code';
+import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import { Column, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
+import sourceCode from 'soapbox/utils/code.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.developers', defaultMessage: 'Developers' },
diff --git a/src/features/developers/index.tsx b/src/features/developers/index.tsx
index 39a8577ae..9db7b7f07 100644
--- a/src/features/developers/index.tsx
+++ b/src/features/developers/index.tsx
@@ -1,8 +1,8 @@
-import { getSettings } from 'soapbox/actions/settings';
-import { useAppSelector } from 'soapbox/hooks';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import DevelopersChallenge from './developers-challenge';
-import DevelopersMenu from './developers-menu';
+import DevelopersChallenge from './developers-challenge.tsx';
+import DevelopersMenu from './developers-menu.tsx';
 
 const Developers: React.FC = () => {
   const isDeveloper = useAppSelector((state) => getSettings(state).get('isDeveloper'));
diff --git a/src/features/developers/service-worker-info.tsx b/src/features/developers/service-worker-info.tsx
index b173dc541..d5347df5c 100644
--- a/src/features/developers/service-worker-info.tsx
+++ b/src/features/developers/service-worker-info.tsx
@@ -2,11 +2,11 @@ import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import List, { ListItem } from 'soapbox/components/list';
-import { HStack, Text, Column, FormActions, Button, Stack, Icon } from 'soapbox/components/ui';
-import { unregisterSW } from 'soapbox/utils/sw';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { HStack, Text, Column, FormActions, Button, Stack, Icon } from 'soapbox/components/ui/index.ts';
+import { unregisterSW } from 'soapbox/utils/sw.ts';
 
-import Indicator from './components/indicator';
+import Indicator from './components/indicator.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.developers.service_worker', defaultMessage: 'Service Worker' },
diff --git a/src/features/developers/settings-store.tsx b/src/features/developers/settings-store.tsx
index b924b359f..b08391cf0 100644
--- a/src/features/developers/settings-store.tsx
+++ b/src/features/developers/settings-store.tsx
@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { FE_NAME, SETTINGS_UPDATE, changeSetting } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
+import { patchMe } from 'soapbox/actions/me.ts';
+import { FE_NAME, SETTINGS_UPDATE, changeSetting } from 'soapbox/actions/settings.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
 import {
   CardHeader,
   CardTitle,
@@ -13,10 +13,10 @@ import {
   FormActions,
   FormGroup,
   Textarea,
-} from 'soapbox/components/ui';
-import SettingToggle from 'soapbox/features/notifications/components/setting-toggle';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+} from 'soapbox/components/ui/index.ts';
+import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
+import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const isJSONValid = (text: any): boolean => {
   try {
diff --git a/src/features/direct-timeline/index.tsx b/src/features/direct-timeline/index.tsx
index 68458e267..4342de900 100644
--- a/src/features/direct-timeline/index.tsx
+++ b/src/features/direct-timeline/index.tsx
@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { directComposeById } from 'soapbox/actions/compose';
-import { expandDirectTimeline } from 'soapbox/actions/timelines';
-import { useDirectStream } from 'soapbox/api/hooks';
-import AccountSearch from 'soapbox/components/account-search';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { directComposeById } from 'soapbox/actions/compose.ts';
+import { expandDirectTimeline } from 'soapbox/actions/timelines.ts';
+import { useDirectStream } from 'soapbox/api/hooks/index.ts';
+import AccountSearch from 'soapbox/components/account-search.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.direct', defaultMessage: 'Direct messages' },
diff --git a/src/features/directory/components/account-card.tsx b/src/features/directory/components/account-card.tsx
index 00cb0f629..a0bfe1dad 100644
--- a/src/features/directory/components/account-card.tsx
+++ b/src/features/directory/components/account-card.tsx
@@ -1,14 +1,14 @@
 import { FormattedMessage } from 'react-intl';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import Badge from 'soapbox/components/badge';
-import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Stack, Text } from 'soapbox/components/ui';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import { useAppSelector } from 'soapbox/hooks';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import Badge from 'soapbox/components/badge.tsx';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IAccountCard {
   id: string;
diff --git a/src/features/directory/index.tsx b/src/features/directory/index.tsx
index f99de51d8..868479eb7 100644
--- a/src/features/directory/index.tsx
+++ b/src/features/directory/index.tsx
@@ -3,12 +3,12 @@ import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 
-import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
-import LoadMore from 'soapbox/components/load-more';
-import { Column, RadioButton, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
+import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory.ts';
+import LoadMore from 'soapbox/components/load-more.tsx';
+import { Column, RadioButton, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
 
-import AccountCard from './components/account-card';
+import AccountCard from './components/account-card.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
diff --git a/src/features/domain-blocks/index.tsx b/src/features/domain-blocks/index.tsx
index 350318465..f05955a62 100644
--- a/src/features/domain-blocks/index.tsx
+++ b/src/features/domain-blocks/index.tsx
@@ -2,11 +2,11 @@ import debounce from 'lodash/debounce';
 import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { fetchDomainBlocks, expandDomainBlocks } from 'soapbox/actions/domain-blocks';
-import Domain from 'soapbox/components/domain';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchDomainBlocks, expandDomainBlocks } from 'soapbox/actions/domain-blocks.ts';
+import Domain from 'soapbox/components/domain.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' },
diff --git a/src/features/edit-email/index.tsx b/src/features/edit-email/index.tsx
index 257f29be0..36be0aa13 100644
--- a/src/features/edit-email/index.tsx
+++ b/src/features/edit-email/index.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeEmail } from 'soapbox/actions/security';
-import { Button, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { changeEmail } from 'soapbox/actions/security.ts';
+import { Button, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   header: { id: 'edit_email.header', defaultMessage: 'Change Email' },
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index be9f4d1b8..63ed702d2 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -3,14 +3,14 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { changeSetting } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, CardHeader, CardTitle, Column, Emoji, Form, HStack, Icon, Input, Textarea, Tooltip } from 'soapbox/components/ui';
-import { useApi, useAppDispatch, useInstance, useOwnAccount, useSettings } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { adminAccountSchema } from 'soapbox/schemas/admin-account';
-import toast from 'soapbox/toast';
+import { patchMe } from 'soapbox/actions/me.ts';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Button, CardHeader, CardTitle, Column, Emoji, Form, HStack, Icon, Input, Textarea, Tooltip } from 'soapbox/components/ui/index.ts';
+import { useApi, useAppDispatch, useInstance, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { adminAccountSchema } from 'soapbox/schemas/admin-account.ts';
+import toast from 'soapbox/toast.tsx';
 
 interface IEditIdentity {
 }
diff --git a/src/features/edit-password/index.tsx b/src/features/edit-password/index.tsx
index c35074ec5..38de13ca7 100644
--- a/src/features/edit-password/index.tsx
+++ b/src/features/edit-password/index.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changePassword } from 'soapbox/actions/security';
-import { Button, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { changePassword } from 'soapbox/actions/security.ts';
+import { Button, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   updatePasswordSuccess: { id: 'security.update_password.success', defaultMessage: 'Password successfully updated.' },
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index 10f272bc1..2c8e45cf2 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Icon, HStack } from 'soapbox/components/ui';
-import { useDraggedFiles } from 'soapbox/hooks';
+import { Avatar, Icon, HStack } from 'soapbox/components/ui/index.ts';
+import { useDraggedFiles } from 'soapbox/hooks/index.ts';
 
 interface IMediaInput {
   className?: string;
diff --git a/src/features/edit-profile/components/header-picker.tsx b/src/features/edit-profile/components/header-picker.tsx
index 1fc3ab601..99753c021 100644
--- a/src/features/edit-profile/components/header-picker.tsx
+++ b/src/features/edit-profile/components/header-picker.tsx
@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
-import { useDraggedFiles } from 'soapbox/hooks';
+import { HStack, Icon, IconButton, Text } from 'soapbox/components/ui/index.ts';
+import { useDraggedFiles } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   title: { id: 'group.upload_banner.title', defaultMessage: 'Upload background picture' },
diff --git a/src/features/edit-profile/index.tsx b/src/features/edit-profile/index.tsx
index 9bb139783..c37fe5479 100644
--- a/src/features/edit-profile/index.tsx
+++ b/src/features/edit-profile/index.tsx
@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { updateNotificationSettings } from 'soapbox/actions/accounts';
-import { patchMe } from 'soapbox/actions/me';
-import BirthdayInput from 'soapbox/components/birthday-input';
-import List, { ListItem } from 'soapbox/components/list';
+import { updateNotificationSettings } from 'soapbox/actions/accounts.ts';
+import { patchMe } from 'soapbox/actions/me.ts';
+import BirthdayInput from 'soapbox/components/birthday-input.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
 import {
   Button,
   Column,
@@ -16,17 +16,17 @@ import {
   Streamfield,
   Textarea,
   Toggle,
-} from 'soapbox/components/ui';
-import { useAppDispatch, useOwnAccount, useFeatures, useInstance, useAppSelector } from 'soapbox/hooks';
-import { useImageField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
-import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
+} from 'soapbox/components/ui/index.ts';
+import { useImageField } from 'soapbox/hooks/forms/index.ts';
+import { useAppDispatch, useOwnAccount, useFeatures, useInstance, useAppSelector } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
-import AvatarPicker from './components/avatar-picker';
-import HeaderPicker from './components/header-picker';
+import AvatarPicker from './components/avatar-picker.tsx';
+import HeaderPicker from './components/header-picker.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import type { Account } from 'soapbox/schemas';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
 const nonDefaultHeader = (url: string | undefined) => url && isDefaultHeader(url) ? undefined : url;
diff --git a/src/features/email-confirmation/index.tsx b/src/features/email-confirmation/index.tsx
index 68cbec1f6..2f28a0d04 100644
--- a/src/features/email-confirmation/index.tsx
+++ b/src/features/email-confirmation/index.tsx
@@ -2,11 +2,11 @@ import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { confirmChangedEmail } from 'soapbox/actions/security';
-import { Spinner } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import { buildErrorMessage } from 'soapbox/utils/errors';
+import { confirmChangedEmail } from 'soapbox/actions/security.ts';
+import { Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { buildErrorMessage } from 'soapbox/utils/errors.ts';
 
 const Statuses = {
   IDLE: 'IDLE',
diff --git a/src/features/embedded-status/index.tsx b/src/features/embedded-status/index.tsx
index 066e2bdd5..f0d06fedb 100644
--- a/src/features/embedded-status/index.tsx
+++ b/src/features/embedded-status/index.tsx
@@ -1,14 +1,14 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { fetchStatus } from 'soapbox/actions/statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import SiteLogo from 'soapbox/components/site-logo';
-import Status from 'soapbox/components/status';
-import { Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { iframeId } from 'soapbox/iframe';
-import { makeGetStatus } from 'soapbox/selectors';
+import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import SiteLogo from 'soapbox/components/site-logo.tsx';
+import Status from 'soapbox/components/status.tsx';
+import { Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { iframeId } from 'soapbox/iframe.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IEmbeddedStatus {
   params: {
diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index 7a0d634d6..692cdd665 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -3,15 +3,14 @@ import { useEffect, useState, useLayoutEffect, Suspense } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
-import { chooseEmoji } from 'soapbox/actions/emojis';
-import { changeSetting } from 'soapbox/actions/settings';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
-import { RootState } from 'soapbox/store';
+import { chooseEmoji } from 'soapbox/actions/emojis.ts';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import { buildCustomEmojis } from 'soapbox/features/emoji/index.ts';
+import { EmojiPicker } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks/index.ts';
+import { RootState } from 'soapbox/store.ts';
 
-import { buildCustomEmojis } from '../../emoji';
-import { EmojiPicker } from '../../ui/util/async-components';
-
-import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
+import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji/index.ts';
 
 export const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
diff --git a/src/features/emoji/components/emoji-picker.tsx b/src/features/emoji/components/emoji-picker.tsx
index adb680792..74cdc5d0f 100644
--- a/src/features/emoji/components/emoji-picker.tsx
+++ b/src/features/emoji/components/emoji-picker.tsx
@@ -2,9 +2,9 @@ import spriteSheet from 'emoji-datasource/img/twitter/sheets/32.png';
 import { Picker as EmojiPicker } from 'emoji-mart';
 import { useRef, useEffect } from 'react';
 
-import { joinPublicPath } from 'soapbox/utils/static';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
-import data from '../data';
+import data from '../data.ts';
 
 const getSpritesheetURL = () => spriteSheet;
 
diff --git a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index 1206d6fbd..f22b7189e 100644
--- a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -5,10 +5,10 @@ import { KeyboardEvent, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { IconButton } from 'soapbox/components/ui';
-import { useClickOutside } from 'soapbox/hooks';
+import { IconButton } from 'soapbox/components/ui/index.ts';
+import { useClickOutside } from 'soapbox/hooks/index.ts';
 
-import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
+import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown.tsx';
 
 export const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
diff --git a/src/features/emoji/index.test.ts b/src/features/emoji/index.test.ts
index 485bfe083..d65b4fd0d 100644
--- a/src/features/emoji/index.test.ts
+++ b/src/features/emoji/index.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import emojify from '.';
+import emojify from './index.ts';
 
 describe('emoji', () => {
   describe('.emojify', () => {
diff --git a/src/features/emoji/index.ts b/src/features/emoji/index.ts
index 58464cb14..2c4995dae 100644
--- a/src/features/emoji/index.ts
+++ b/src/features/emoji/index.ts
@@ -1,8 +1,8 @@
 import split from 'graphemesplit';
 
-import unicodeMapping from './mapping';
+import unicodeMapping from './mapping.ts';
 
-import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data';
+import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data.ts';
 
 /*
  * TODO: Consolate emoji object types
diff --git a/src/features/emoji/mapping.ts b/src/features/emoji/mapping.ts
index bc769618d..882d68eeb 100644
--- a/src/features/emoji/mapping.ts
+++ b/src/features/emoji/mapping.ts
@@ -1,4 +1,4 @@
-import data, { EmojiData } from './data';
+import data, { EmojiData } from './data.ts';
 
 const stripLeadingZeros = /^0+/;
 interface UnicodeMap {
diff --git a/src/features/emoji/search.test.ts b/src/features/emoji/search.test.ts
index 4b5b0a1e4..fb64cbbc4 100644
--- a/src/features/emoji/search.test.ts
+++ b/src/features/emoji/search.test.ts
@@ -2,7 +2,7 @@ import { List, Map } from 'immutable';
 import pick from 'lodash/pick';
 import { describe, expect, it } from 'vitest';
 
-import search, { addCustomToPool } from './search';
+import search, { addCustomToPool } from './search.ts';
 
 const trimEmojis = (emoji: any) => pick(emoji, ['id', 'unified', 'native', 'custom']);
 
diff --git a/src/features/emoji/search.ts b/src/features/emoji/search.ts
index 21e376f70..695a2ae37 100644
--- a/src/features/emoji/search.ts
+++ b/src/features/emoji/search.ts
@@ -2,9 +2,9 @@
 import Index from '@akryum/flexsearch-es';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
-import data from './data';
+import data from './data.ts';
 
-import type { Emoji } from './index';
+import type { Emoji } from './index.ts';
 
 // @ts-ignore Wrong default export.
 const index: Index.Index = new Index({
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index f205d19a4..dcd5cffa3 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -2,13 +2,13 @@ import banIcon from '@tabler/icons/outline/ban.svg';
 import checkIcon from '@tabler/icons/outline/check.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { joinEvent, leaveEvent } from 'soapbox/actions/events';
-import { openModal } from 'soapbox/actions/modals';
-import { Button } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { joinEvent, leaveEvent } from 'soapbox/actions/events.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { Button } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles';
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles.tsx';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   leaveConfirm: { id: 'confirmations.leave_event.confirm', defaultMessage: 'Leave event' },
diff --git a/src/features/event/components/event-date.tsx b/src/features/event/components/event-date.tsx
index 952a74425..e33fa3662 100644
--- a/src/features/event/components/event-date.tsx
+++ b/src/features/event/components/event-date.tsx
@@ -1,10 +1,10 @@
 import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import { FormattedDate } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { HStack } from 'soapbox/components/ui';
+import Icon from 'soapbox/components/icon.tsx';
+import { HStack } from 'soapbox/components/ui/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IEventDate {
   status: StatusEntity;
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index cbe475a68..22e79be21 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -25,32 +25,32 @@ import { List as ImmutableList } from 'immutable';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { blockAccount } from 'soapbox/actions/accounts';
-import { launchChat } from 'soapbox/actions/chats';
-import { directCompose, mentionCompose, quoteCompose } from 'soapbox/actions/compose';
-import { editEvent, fetchEventIcs } from 'soapbox/actions/events';
-import { toggleBookmark, togglePin, toggleReblog } from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
-import { initMuteModal } from 'soapbox/actions/mutes';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import { deleteStatus } from 'soapbox/actions/statuses';
-import Icon from 'soapbox/components/icon';
-import StillImage from 'soapbox/components/still-image';
-import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppDispatch, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks';
-import copy from 'soapbox/utils/copy';
-import { download } from 'soapbox/utils/download';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { blockAccount } from 'soapbox/actions/accounts.ts';
+import { launchChat } from 'soapbox/actions/chats.ts';
+import { directCompose, mentionCompose, quoteCompose } from 'soapbox/actions/compose.ts';
+import { editEvent, fetchEventIcs } from 'soapbox/actions/events.ts';
+import { toggleBookmark, togglePin, toggleReblog } from 'soapbox/actions/interactions.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation.tsx';
+import { initMuteModal } from 'soapbox/actions/mutes.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { deleteStatus } from 'soapbox/actions/statuses.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import StillImage from 'soapbox/components/still-image.tsx';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useAppDispatch, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import copy from 'soapbox/utils/copy.ts';
+import { download } from 'soapbox/utils/download.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import PlaceholderEventHeader from '../../placeholder/components/placeholder-event-header';
-import EventActionButton from '../components/event-action-button';
-import EventDate from '../components/event-date';
+import PlaceholderEventHeader from '../../placeholder/components/placeholder-event-header.tsx';
+import EventActionButton from '../components/event-action-button.tsx';
+import EventDate from '../components/event-date.tsx';
 
-import type { Menu as MenuType } from 'soapbox/components/dropdown-menu';
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Menu as MenuType } from 'soapbox/components/dropdown-menu/index.ts';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   bannerHeader: { id: 'event.banner', defaultMessage: 'Event banner' },
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx
index b9481ab28..1d325d3af 100644
--- a/src/features/event/event-discussion.tsx
+++ b/src/features/event/event-discussion.tsx
@@ -3,23 +3,23 @@ import debounce from 'lodash/debounce';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { eventDiscussionCompose } from 'soapbox/actions/compose';
-import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import Tombstone from 'soapbox/components/tombstone';
-import { Stack } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import PendingStatus from 'soapbox/features/ui/components/pending-status';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { eventDiscussionCompose } from 'soapbox/actions/compose.ts';
+import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Tombstone from 'soapbox/components/tombstone.tsx';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import ComposeForm from '../compose/components/compose-form';
-import { getDescendantsIds } from '../status/components/thread';
-import ThreadStatus from '../status/components/thread-status';
+import ComposeForm from '../compose/components/compose-form.tsx';
+import ThreadStatus from '../status/components/thread-status.tsx';
+import { getDescendantsIds } from '../status/components/thread.tsx';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities.ts';
 
 type RouteParams = { statusId: string };
 
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index d10fe92d7..b61a28b41 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -4,19 +4,19 @@ import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { fetchStatus } from 'soapbox/actions/statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusContent from 'soapbox/components/status-content';
-import StatusMedia from 'soapbox/components/status-media';
-import TranslateButton from 'soapbox/components/translate-button';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
-import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
-import { defaultMediaVisibility } from 'soapbox/utils/status';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusMedia from 'soapbox/components/status-media.tsx';
+import TranslateButton from 'soapbox/components/translate-button.tsx';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
+import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 type RouteParams = { statusId: string };
 
diff --git a/src/features/events/components/event-carousel.tsx b/src/features/events/components/event-carousel.tsx
index 670a56ca1..6ba6a564b 100644
--- a/src/features/events/components/event-carousel.tsx
+++ b/src/features/events/components/event-carousel.tsx
@@ -4,12 +4,12 @@ import { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
 
-import EventPreview from 'soapbox/components/event-preview';
-import { Card, Icon } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import EventPreview from 'soapbox/components/event-preview.tsx';
+import { Card, Icon } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import PlaceholderEventPreview from '../../placeholder/components/placeholder-event-preview';
+import PlaceholderEventPreview from '../../placeholder/components/placeholder-event-preview.tsx';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
diff --git a/src/features/events/index.tsx b/src/features/events/index.tsx
index 44cd1642b..c04b91e56 100644
--- a/src/features/events/index.tsx
+++ b/src/features/events/index.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events';
-import { openModal } from 'soapbox/actions/modals';
-import { Button, CardBody, CardHeader, CardTitle, Column, HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { Button, CardBody, CardHeader, CardTitle, Column, HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import EventCarousel from './components/event-carousel';
+import EventCarousel from './components/event-carousel.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.events', defaultMessage: 'Events' },
diff --git a/src/features/export-data/components/csv-exporter.tsx b/src/features/export-data/components/csv-exporter.tsx
index b748f3239..864d85599 100644
--- a/src/features/export-data/components/csv-exporter.tsx
+++ b/src/features/export-data/components/csv-exporter.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
-import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { AppDispatch, RootState } from 'soapbox/store';
+import { Button, Form, FormActions, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { AppDispatch, RootState } from 'soapbox/store.ts';
 
 interface ICSVExporter {
   messages: {
diff --git a/src/features/export-data/index.tsx b/src/features/export-data/index.tsx
index 38432dbd5..e41b61db3 100644
--- a/src/features/export-data/index.tsx
+++ b/src/features/export-data/index.tsx
@@ -4,10 +4,10 @@ import {
   exportFollows,
   exportBlocks,
   exportMutes,
-} from 'soapbox/actions/export-data';
-import { Column } from 'soapbox/components/ui';
+} from 'soapbox/actions/export-data.ts';
+import { Column } from 'soapbox/components/ui/index.ts';
 
-import CSVExporter from './components/csv-exporter';
+import CSVExporter from './components/csv-exporter.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.export_data', defaultMessage: 'Export data' },
diff --git a/src/features/external-login/components/external-login-form.tsx b/src/features/external-login/components/external-login-form.tsx
index ef3a49f17..60cfc42d8 100644
--- a/src/features/external-login/components/external-login-form.tsx
+++ b/src/features/external-login/components/external-login-form.tsx
@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
-import { externalLogin, loginWithCode } from 'soapbox/actions/external-auth';
-import { Button, Form, FormActions, FormGroup, Input, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { externalLogin, loginWithCode } from 'soapbox/actions/external-auth.ts';
+import { Button, Form, FormActions, FormGroup, Input, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/external-login/index.tsx b/src/features/external-login/index.tsx
index 9220bce39..eaa873879 100644
--- a/src/features/external-login/index.tsx
+++ b/src/features/external-login/index.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
-import { BigCard } from 'soapbox/components/big-card';
+import { BigCard } from 'soapbox/components/big-card.tsx';
 
-import ExternalLoginForm from './components/external-login-form';
+import ExternalLoginForm from './components/external-login-form.tsx';
 
 /** Page for logging into a remote instance */
 const ExternalLoginPage: React.FC = () => {
diff --git a/src/features/favourited-statuses/index.tsx b/src/features/favourited-statuses/index.tsx
index 316c4f38d..c865844f8 100644
--- a/src/features/favourited-statuses/index.tsx
+++ b/src/features/favourited-statuses/index.tsx
@@ -3,13 +3,13 @@ import debounce from 'lodash/debounce';
 import { useCallback, useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts';
-import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from 'soapbox/actions/favourites';
-import { useAccountLookup } from 'soapbox/api/hooks';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusList from 'soapbox/components/status-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts.ts';
+import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from 'soapbox/actions/favourites.ts';
+import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.favourited_statuses', defaultMessage: 'Liked posts' },
diff --git a/src/features/federation-restrictions/components/instance-restrictions.tsx b/src/features/federation-restrictions/components/instance-restrictions.tsx
index c77b8de85..824b1489e 100644
--- a/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -7,11 +7,11 @@ import shieldLockIcon from '@tabler/icons/outline/shield-lock.svg';
 import shieldXIcon from '@tabler/icons/outline/shield-x.svg';
 import { FormattedMessage } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import Icon from 'soapbox/components/icon.tsx';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useInstance } from 'soapbox/hooks/index.ts';
 
-import type { RemoteInstance } from 'soapbox/selectors';
+import type { RemoteInstance } from 'soapbox/selectors/index.ts';
 
 const hasRestrictions = (remoteInstance: RemoteInstance): boolean => {
   const { accept, reject_deletes, report_removal, ...federation } = remoteInstance.federation;
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 9ac14c1a7..41d4fe869 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -3,11 +3,11 @@ import caretRightIcon from '@tabler/icons/outline/caret-right.svg';
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import Icon from 'soapbox/components/icon';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
+import Icon from 'soapbox/components/icon.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
-import InstanceRestrictions from './instance-restrictions';
+import InstanceRestrictions from './instance-restrictions.tsx';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
diff --git a/src/features/federation-restrictions/index.tsx b/src/features/federation-restrictions/index.tsx
index ed51dbee9..51bb11684 100644
--- a/src/features/federation-restrictions/index.tsx
+++ b/src/features/federation-restrictions/index.tsx
@@ -1,13 +1,13 @@
 import { useState, useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Accordion } from 'soapbox/components/ui';
-import { useAppSelector, useInstance } from 'soapbox/hooks';
-import { makeGetHosts } from 'soapbox/selectors';
-import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Accordion } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { makeGetHosts } from 'soapbox/selectors/index.ts';
+import { federationRestrictionsDisclosed } from 'soapbox/utils/state.ts';
 
-import RestrictedInstance from './components/restricted-instance';
+import RestrictedInstance from './components/restricted-instance.tsx';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
diff --git a/src/features/feed-suggestions/feed-suggestions.tsx b/src/features/feed-suggestions/feed-suggestions.tsx
index 43e4f2e64..76c14fc23 100644
--- a/src/features/feed-suggestions/feed-suggestions.tsx
+++ b/src/features/feed-suggestions/feed-suggestions.tsx
@@ -1,13 +1,13 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useAccount } from 'soapbox/api/hooks';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import { Card, CardBody, CardTitle, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import { Card, CardBody, CardTitle, HStack, Stack, Text } from '../../components/ui';
-import ActionButton from '../ui/components/action-button';
-import { HotKeys } from '../ui/components/hotkeys';
+import ActionButton from '../ui/components/action-button.tsx';
+import { HotKeys } from '../ui/components/hotkeys.tsx';
 
 const messages = defineMessages({
   heading: { id: 'feed_suggestions.heading', defaultMessage: 'Suggested Profiles' },
diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx
index 162fcde91..c16413537 100644
--- a/src/features/filters/edit-filter.tsx
+++ b/src/features/filters/edit-filter.tsx
@@ -2,17 +2,17 @@ import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { createFilter, fetchFilter, updateFilter } from 'soapbox/actions/filters';
-import List, { ListItem } from 'soapbox/components/list';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import { Button, Column, Form, FormActions, FormGroup, HStack, Input, Stack, Streamfield, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { normalizeFilter } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
+import { createFilter, fetchFilter, updateFilter } from 'soapbox/actions/filters.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import { Button, Column, Form, FormActions, FormGroup, HStack, Input, Stack, Streamfield, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { normalizeFilter } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import { SelectDropdown } from '../forms';
+import { SelectDropdown } from '../forms/index.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
 
 interface IFilterField {
   id?: string;
diff --git a/src/features/filters/index.tsx b/src/features/filters/index.tsx
index 674877a01..2f15c5bd0 100644
--- a/src/features/filters/index.tsx
+++ b/src/features/filters/index.tsx
@@ -2,12 +2,12 @@ import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchFilters, deleteFilter } from 'soapbox/actions/filters';
-import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { fetchFilters, deleteFilter } from 'soapbox/actions/filters.ts';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.filters', defaultMessage: 'Muted words' },
diff --git a/src/features/follow-recommendations/index.tsx b/src/features/follow-recommendations/index.tsx
index aec2b6fb4..5e7c03324 100644
--- a/src/features/follow-recommendations/index.tsx
+++ b/src/features/follow-recommendations/index.tsx
@@ -2,11 +2,11 @@ import debounce from 'lodash/debounce';
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchSuggestions } from 'soapbox/actions/suggestions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchSuggestions } from 'soapbox/actions/suggestions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Stack, Text } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'follow_recommendations.heading', defaultMessage: 'Suggested Profiles' },
diff --git a/src/features/follow-requests/components/account-authorize.tsx b/src/features/follow-requests/components/account-authorize.tsx
index e73224165..72e44bdd2 100644
--- a/src/features/follow-requests/components/account-authorize.tsx
+++ b/src/features/follow-requests/components/account-authorize.tsx
@@ -1,8 +1,8 @@
-import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
-import { useAppDispatch } from 'soapbox/hooks';
+import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 interface IAccountAuthorize {
   id: string;
diff --git a/src/features/follow-requests/index.tsx b/src/features/follow-requests/index.tsx
index fe3b40f7d..fffa8314b 100644
--- a/src/features/follow-requests/index.tsx
+++ b/src/features/follow-requests/index.tsx
@@ -2,12 +2,12 @@ import debounce from 'lodash/debounce';
 import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accounts';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accounts.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import AccountAuthorize from './components/account-authorize';
+import AccountAuthorize from './components/account-authorize.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' },
diff --git a/src/features/followed-tags/index.tsx b/src/features/followed-tags/index.tsx
index 2cb1c4bfb..61f08c5f1 100644
--- a/src/features/followed-tags/index.tsx
+++ b/src/features/followed-tags/index.tsx
@@ -2,12 +2,12 @@ import debounce from 'lodash/debounce';
 import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { fetchFollowedHashtags, expandFollowedHashtags } from 'soapbox/actions/tags';
-import Hashtag from 'soapbox/components/hashtag';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
-import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchFollowedHashtags, expandFollowedHashtags } from 'soapbox/actions/tags.ts';
+import Hashtag from 'soapbox/components/hashtag.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.followed_tags', defaultMessage: 'Followed hashtags' },
diff --git a/src/features/followers/index.tsx b/src/features/followers/index.tsx
index b3a721eb2..922e7d64f 100644
--- a/src/features/followers/index.tsx
+++ b/src/features/followers/index.tsx
@@ -1,10 +1,10 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useAccountLookup, useFollowers } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
+import { useAccountLookup, useFollowers } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Spinner } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.followers', defaultMessage: 'Followers' },
diff --git a/src/features/following/index.tsx b/src/features/following/index.tsx
index 088618f16..ee9050057 100644
--- a/src/features/following/index.tsx
+++ b/src/features/following/index.tsx
@@ -1,10 +1,10 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useAccountLookup, useFollowing } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
+import { useAccountLookup, useFollowing } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Spinner } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.following', defaultMessage: 'Following' },
diff --git a/src/features/forms/index.tsx b/src/features/forms/index.tsx
index 4efa3d8c6..0ab369db7 100644
--- a/src/features/forms/index.tsx
+++ b/src/features/forms/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Children, useState } from 'react';
 
-import { Select } from '../../components/ui';
+import { Select } from 'soapbox/components/ui/index.ts';
 
 interface IInputContainer {
   label?: React.ReactNode;
diff --git a/src/features/generic-not-found/index.tsx b/src/features/generic-not-found/index.tsx
index 9847cdc7b..e67bad751 100644
--- a/src/features/generic-not-found/index.tsx
+++ b/src/features/generic-not-found/index.tsx
@@ -1,4 +1,4 @@
-import MissingIndicator from '../../components/missing-indicator';
+import MissingIndicator from '../../components/missing-indicator.tsx';
 
 const GenericNotFound = () => (
   <MissingIndicator />
diff --git a/src/features/group/components/group-action-button.test.tsx b/src/features/group/components/group-action-button.test.tsx
index 55a95ce53..195cf94bb 100644
--- a/src/features/group/components/group-action-button.test.tsx
+++ b/src/features/group/components/group-action-button.test.tsx
@@ -1,11 +1,11 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupActionButton from './group-action-button';
+import GroupActionButton from './group-action-button.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-action-button.tsx b/src/features/group/components/group-action-button.tsx
index 733de9809..8a8a8d33f 100644
--- a/src/features/group/components/group-action-button.tsx
+++ b/src/features/group/components/group-action-button.tsx
@@ -1,16 +1,16 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups';
-import { openModal } from 'soapbox/actions/modals';
-import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup, usePendingGroups } from 'soapbox/api/hooks';
-import { Button } from 'soapbox/components/ui';
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { useAppDispatch } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
+import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup, usePendingGroups } from 'soapbox/api/hooks/index.ts';
+import { Button } from 'soapbox/components/ui/index.ts';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Group, GroupRelationship } from 'soapbox/types/entities';
+import type { Group, GroupRelationship } from 'soapbox/types/entities.ts';
 
 interface IGroupActionButton {
   group: Group;
diff --git a/src/features/group/components/group-header-image.tsx b/src/features/group/components/group-header-image.tsx
index 6449a0de8..10d608bb2 100644
--- a/src/features/group/components/group-header-image.tsx
+++ b/src/features/group/components/group-header-image.tsx
@@ -3,9 +3,9 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'soapbox/components/ui';
+import { Icon } from 'soapbox/components/ui/index.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   header: { id: 'group.header.alt', defaultMessage: 'Group header' },
diff --git a/src/features/group/components/group-header.test.tsx b/src/features/group/components/group-header.test.tsx
index 31325e78d..d6b775a67 100644
--- a/src/features/group/components/group-header.test.tsx
+++ b/src/features/group/components/group-header.test.tsx
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupHeader from './group-header';
+import GroupHeader from './group-header.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index ff4808ad7..f51255b47 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -3,21 +3,21 @@ import { List as ImmutableList } from 'immutable';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import StillImage from 'soapbox/components/still-image';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { normalizeAttachment } from 'soapbox/normalizers';
-import { isDefaultHeader } from 'soapbox/utils/accounts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
+import StillImage from 'soapbox/components/still-image.tsx';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
+import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
-import GroupActionButton from './group-action-button';
-import GroupMemberCount from './group-member-count';
-import GroupOptionsButton from './group-options-button';
-import GroupPrivacy from './group-privacy';
-import GroupRelationship from './group-relationship';
+import GroupActionButton from './group-action-button.tsx';
+import GroupMemberCount from './group-member-count.tsx';
+import GroupOptionsButton from './group-options-button.tsx';
+import GroupPrivacy from './group-privacy.tsx';
+import GroupRelationship from './group-relationship.tsx';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   header: { id: 'group.header.alt', defaultMessage: 'Group header' },
diff --git a/src/features/group/components/group-member-count.test.tsx b/src/features/group/components/group-member-count.test.tsx
index 470b92b8c..2b5876b99 100644
--- a/src/features/group/components/group-member-count.test.tsx
+++ b/src/features/group/components/group-member-count.test.tsx
@@ -1,10 +1,10 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupMemberCount from './group-member-count';
+import GroupMemberCount from './group-member-count.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-member-count.tsx b/src/features/group/components/group-member-count.tsx
index 5e638d33f..fc0f763da 100644
--- a/src/features/group/components/group-member-count.tsx
+++ b/src/features/group/components/group-member-count.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui';
-import { Group } from 'soapbox/types/entities';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { Text } from 'soapbox/components/ui/index.ts';
+import { Group } from 'soapbox/types/entities.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IGroupMemberCount {
   group: Group;
diff --git a/src/features/group/components/group-member-list-item.test.tsx b/src/features/group/components/group-member-list-item.test.tsx
index e02eb6242..1817f97ef 100644
--- a/src/features/group/components/group-member-list-item.test.tsx
+++ b/src/features/group/components/group-member-list-item.test.tsx
@@ -1,12 +1,12 @@
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildGroup, buildGroupMember, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup, buildGroupMember, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
-import GroupMemberListItem from './group-member-list-item';
+import GroupMemberListItem from './group-member-list-item.tsx';
 
 describe('<GroupMemberListItem />', () => {
   describe('account rendering', () => {
diff --git a/src/features/group/components/group-member-list-item.tsx b/src/features/group/components/group-member-list-item.tsx
index c2513545c..6874419d7 100644
--- a/src/features/group/components/group-member-list-item.tsx
+++ b/src/features/group/components/group-member-list-item.tsx
@@ -5,22 +5,22 @@ import clsx from 'clsx';
 import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { groupKick } from 'soapbox/actions/groups';
-import { openModal } from 'soapbox/actions/modals';
-import { useAccount, useBlockGroupMember, useDemoteGroupMember, usePromoteGroupMember } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import DropdownMenu from 'soapbox/components/dropdown-menu/dropdown-menu';
-import { HStack } from 'soapbox/components/ui';
-import { deleteEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
-import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups';
+import { groupKick } from 'soapbox/actions/groups.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useAccount, useBlockGroupMember, useDemoteGroupMember, usePromoteGroupMember } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import DropdownMenu from 'soapbox/components/dropdown-menu/dropdown-menu.tsx';
+import { HStack } from 'soapbox/components/ui/index.ts';
+import { deleteEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account.tsx';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
+import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups.ts';
 
-import type { Menu as IMenu } from 'soapbox/components/dropdown-menu';
-import type { Group, GroupMember } from 'soapbox/types/entities';
+import type { Menu as IMenu } from 'soapbox/components/dropdown-menu/index.ts';
+import type { Group, GroupMember } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   adminLimitTitle: { id: 'group.member.admin.limit.title', defaultMessage: 'Admin limit reached' },
diff --git a/src/features/group/components/group-options-button.test.tsx b/src/features/group/components/group-options-button.test.tsx
index 250f47072..d0548956f 100644
--- a/src/features/group/components/group-options-button.test.tsx
+++ b/src/features/group/components/group-options-button.test.tsx
@@ -1,11 +1,11 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupOptionsButton from './group-options-button';
+import GroupOptionsButton from './group-options-button.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-options-button.tsx b/src/features/group/components/group-options-button.tsx
index e712fb79a..9dfa5221c 100644
--- a/src/features/group/components/group-options-button.tsx
+++ b/src/features/group/components/group-options-button.tsx
@@ -6,16 +6,16 @@ import volume3Icon from '@tabler/icons/outline/volume-3.svg';
 import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import { useLeaveGroup, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks';
-import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
-import { IconButton } from 'soapbox/components/ui';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { useLeaveGroup, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
+import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu/index.ts';
+import { IconButton } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Account, Group } from 'soapbox/types/entities';
+import type { Account, Group } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   confirmationConfirm: { id: 'confirmations.leave_group.confirm', defaultMessage: 'Leave' },
diff --git a/src/features/group/components/group-privacy.test.tsx b/src/features/group/components/group-privacy.test.tsx
index 51f52ebf9..a5e361347 100644
--- a/src/features/group/components/group-privacy.test.tsx
+++ b/src/features/group/components/group-privacy.test.tsx
@@ -1,10 +1,10 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupPrivacy from './group-privacy';
+import GroupPrivacy from './group-privacy.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-privacy.tsx b/src/features/group/components/group-privacy.tsx
index 505cecb63..b15a8e92d 100644
--- a/src/features/group/components/group-privacy.tsx
+++ b/src/features/group/components/group-privacy.tsx
@@ -2,8 +2,8 @@ import lockIcon from '@tabler/icons/outline/lock.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, Popover, Stack, Text } from 'soapbox/components/ui';
-import { Group } from 'soapbox/types/entities';
+import { HStack, Icon, Popover, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
 interface IGroupPolicy {
   group: Group;
diff --git a/src/features/group/components/group-relationship.test.tsx b/src/features/group/components/group-relationship.test.tsx
index 7ccab7728..7b5aa810f 100644
--- a/src/features/group/components/group-relationship.test.tsx
+++ b/src/features/group/components/group-relationship.test.tsx
@@ -1,11 +1,11 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupRelationship from './group-relationship';
+import GroupRelationship from './group-relationship.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-relationship.tsx b/src/features/group/components/group-relationship.tsx
index 22d728828..0b0029b20 100644
--- a/src/features/group/components/group-relationship.tsx
+++ b/src/features/group/components/group-relationship.tsx
@@ -2,9 +2,9 @@ import gavelIcon from '@tabler/icons/outline/gavel.svg';
 import usersIcon from '@tabler/icons/outline/users.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { Group } from 'soapbox/types/entities';
+import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
 interface IGroupRelationship {
   group: Group;
diff --git a/src/features/group/components/group-tag-list-item.test.tsx b/src/features/group/components/group-tag-list-item.test.tsx
index 9d4b9bf77..ad832c38f 100644
--- a/src/features/group/components/group-tag-list-item.test.tsx
+++ b/src/features/group/components/group-tag-list-item.test.tsx
@@ -1,10 +1,10 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildGroup, buildGroupTag, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { buildGroup, buildGroupTag, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
-import GroupTagListItem from './group-tag-list-item';
+import GroupTagListItem from './group-tag-list-item.tsx';
 
 describe('<GroupTagListItem />', () => {
   describe('tag name', () => {
diff --git a/src/features/group/components/group-tag-list-item.tsx b/src/features/group/components/group-tag-list-item.tsx
index 4be20de10..df4fc0152 100644
--- a/src/features/group/components/group-tag-list-item.tsx
+++ b/src/features/group/components/group-tag-list-item.tsx
@@ -5,16 +5,16 @@ import pinIcon from '@tabler/icons/outline/pin.svg';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useUpdateGroupTag } from 'soapbox/api/hooks';
-import { HStack, Icon, IconButton, Stack, Text, Tooltip } from 'soapbox/components/ui';
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { useAppDispatch } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { useUpdateGroupTag } from 'soapbox/api/hooks/index.ts';
+import { HStack, Icon, IconButton, Stack, Text, Tooltip } from 'soapbox/components/ui/index.ts';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import type { Group, GroupTag } from 'soapbox/schemas';
+import type { Group, GroupTag } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   hideTag: { id: 'group.tags.hide', defaultMessage: 'Hide topic' },
diff --git a/src/features/group/components/group-tags-field.tsx b/src/features/group/components/group-tags-field.tsx
index e08d649b4..b1d2d78d3 100644
--- a/src/features/group/components/group-tags-field.tsx
+++ b/src/features/group/components/group-tags-field.tsx
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Input, Streamfield } from 'soapbox/components/ui';
+import { Input, Streamfield } from 'soapbox/components/ui/index.ts';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
 
 const messages = defineMessages({
   hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
diff --git a/src/features/group/edit-group.tsx b/src/features/group/edit-group.tsx
index 4353514d4..5d14a805b 100644
--- a/src/features/group/edit-group.tsx
+++ b/src/features/group/edit-group.tsx
@@ -2,17 +2,17 @@ import lockIcon from '@tabler/icons/outline/lock.svg';
 import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useGroup, useGroupTags, useUpdateGroup } from 'soapbox/api/hooks';
-import { Button, Column, Form, FormActions, FormGroup, Icon, Input, Spinner, Textarea } from 'soapbox/components/ui';
-import { useAppSelector, useInstance } from 'soapbox/hooks';
-import { useImageField, useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
-import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
+import { useGroup, useGroupTags, useUpdateGroup } from 'soapbox/api/hooks/index.ts';
+import { Button, Column, Form, FormActions, FormGroup, Icon, Input, Spinner, Textarea } from 'soapbox/components/ui/index.ts';
+import { useImageField, useTextField } from 'soapbox/hooks/forms/index.ts';
+import { useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
-import AvatarPicker from '../edit-profile/components/avatar-picker';
-import HeaderPicker from '../edit-profile/components/header-picker';
+import AvatarPicker from '../edit-profile/components/avatar-picker.tsx';
+import HeaderPicker from '../edit-profile/components/header-picker.tsx';
 
-import GroupTagsField from './components/group-tags-field';
+import GroupTagsField from './components/group-tags-field.tsx';
 
 const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
 const nonDefaultHeader = (url: string | undefined) => url && isDefaultHeader(url) ? undefined : url;
diff --git a/src/features/group/group-blocked-members.tsx b/src/features/group/group-blocked-members.tsx
index 836e950b0..a060f78d5 100644
--- a/src/features/group/group-blocked-members.tsx
+++ b/src/features/group/group-blocked-members.tsx
@@ -1,15 +1,15 @@
 import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { fetchGroupBlocks, groupUnblock } from 'soapbox/actions/groups';
-import { useAccount, useGroup } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { fetchGroupBlocks, groupUnblock } from 'soapbox/actions/groups.ts';
+import { useAccount, useGroup } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Button, Column, HStack, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ColumnForbidden from '../ui/components/column-forbidden';
+import ColumnForbidden from '../ui/components/column-forbidden.tsx';
 
 type RouteParams = { groupId: string };
 
diff --git a/src/features/group/group-gallery.tsx b/src/features/group/group-gallery.tsx
index 5e46e62e0..407043a79 100644
--- a/src/features/group/group-gallery.tsx
+++ b/src/features/group/group-gallery.tsx
@@ -1,15 +1,15 @@
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useGroup, useGroupMedia } from 'soapbox/api/hooks';
-import LoadMore from 'soapbox/components/load-more';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import { Column, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useGroup, useGroupMedia } from 'soapbox/api/hooks/index.ts';
+import LoadMore from 'soapbox/components/load-more.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import MediaItem from '../account-gallery/components/media-item';
+import MediaItem from '../account-gallery/components/media-item.tsx';
 
-import type { Attachment, Status } from 'soapbox/types/entities';
+import type { Attachment, Status } from 'soapbox/types/entities.ts';
 
 interface IGroupGallery {
   params: { groupId: string };
diff --git a/src/features/group/group-members.tsx b/src/features/group/group-members.tsx
index ce16a63a2..66efb16e3 100644
--- a/src/features/group/group-members.tsx
+++ b/src/features/group/group-members.tsx
@@ -1,18 +1,18 @@
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks';
-import { PendingItemsRow } from 'soapbox/components/pending-items-row';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { useFeatures } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups';
+import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks/index.ts';
+import { PendingItemsRow } from 'soapbox/components/pending-items-row.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { useFeatures } from 'soapbox/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups.ts';
 
-import PlaceholderAccount from '../placeholder/components/placeholder-account';
+import PlaceholderAccount from '../placeholder/components/placeholder-account.tsx';
 
-import GroupMemberListItem from './components/group-member-list-item';
+import GroupMemberListItem from './components/group-member-list-item.tsx';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/types/entities.ts';
 
 
 interface IGroupMembers {
diff --git a/src/features/group/group-membership-requests.tsx b/src/features/group/group-membership-requests.tsx
index a7a28bee2..80345179e 100644
--- a/src/features/group/group-membership-requests.tsx
+++ b/src/features/group/group-membership-requests.tsx
@@ -2,17 +2,17 @@ import { AxiosError } from 'axios';
 import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, HStack, Spinner } from 'soapbox/components/ui';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
+import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, HStack, Spinner } from 'soapbox/components/ui/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ColumnForbidden from '../ui/components/column-forbidden';
+import ColumnForbidden from '../ui/components/column-forbidden.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 type RouteParams = { groupId: string };
 
diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx
index 2b83c412d..ca0023a0f 100644
--- a/src/features/group/group-tag-timeline.tsx
+++ b/src/features/group/group-tag-timeline.tsx
@@ -2,12 +2,12 @@ import message2Icon from '@tabler/icons/outline/message-2.svg';
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { expandGroupTimelineFromTag } from 'soapbox/actions/timelines';
-import { useGroup, useGroupTag } from 'soapbox/api/hooks';
-import { Column, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { expandGroupTimelineFromTag } from 'soapbox/actions/timelines.ts';
+import { useGroup, useGroupTag } from 'soapbox/api/hooks/index.ts';
+import { Column, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 type RouteParams = { tagId: string; groupId: string };
 
diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx
index 0e2d43779..819de827c 100644
--- a/src/features/group/group-tags.tsx
+++ b/src/features/group/group-tags.tsx
@@ -1,15 +1,15 @@
 import hashIcon from '@tabler/icons/outline/hash.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { useGroup, useGroupTags } from 'soapbox/api/hooks';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Icon, Stack, Text } from 'soapbox/components/ui';
+import { useGroup, useGroupTags } from 'soapbox/api/hooks/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import PlaceholderAccount from '../placeholder/components/placeholder-account';
+import PlaceholderAccount from '../placeholder/components/placeholder-account.tsx';
 
-import GroupTagListItem from './components/group-tag-list-item';
+import GroupTagListItem from './components/group-tag-list-item.tsx';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/types/entities.ts';
 
 interface IGroupTopics {
   params: { groupId: string };
diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx
index f6db85840..66003b64a 100644
--- a/src/features/group/group-timeline.tsx
+++ b/src/features/group/group-timeline.tsx
@@ -4,15 +4,15 @@ import { useEffect, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { groupCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose';
-import { expandGroupFeaturedTimeline, expandGroupTimeline } from 'soapbox/actions/timelines';
-import { useGroup, useGroupStream } from 'soapbox/api/hooks';
-import { Avatar, HStack, Icon, Stack, Text, Toggle } from 'soapbox/components/ui';
-import ComposeForm from 'soapbox/features/compose/components/compose-form';
-import { useAppDispatch, useAppSelector, useDraggedFiles, useOwnAccount } from 'soapbox/hooks';
-import { makeGetStatusIds } from 'soapbox/selectors';
+import { groupCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose.ts';
+import { expandGroupFeaturedTimeline, expandGroupTimeline } from 'soapbox/actions/timelines.ts';
+import { useGroup, useGroupStream } from 'soapbox/api/hooks/index.ts';
+import { Avatar, HStack, Icon, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import ComposeForm from 'soapbox/features/compose/components/compose-form.tsx';
+import { useAppDispatch, useAppSelector, useDraggedFiles, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 type RouteParams = { groupId: string };
 
diff --git a/src/features/group/manage-group.tsx b/src/features/group/manage-group.tsx
index eadb1c2c9..ff7bf55c9 100644
--- a/src/features/group/manage-group.tsx
+++ b/src/features/group/manage-group.tsx
@@ -2,16 +2,16 @@ import trashIcon from '@tabler/icons/outline/trash.svg';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useDeleteGroup, useGroup } from 'soapbox/api/hooks';
-import List, { ListItem } from 'soapbox/components/list';
-import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useBackend } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
-import { TRUTHSOCIAL } from 'soapbox/utils/features';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useDeleteGroup, useGroup } from 'soapbox/api/hooks/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useBackend } from 'soapbox/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
+import { TRUTHSOCIAL } from 'soapbox/utils/features.ts';
 
-import ColumnForbidden from '../ui/components/column-forbidden';
+import ColumnForbidden from '../ui/components/column-forbidden.tsx';
 
 type RouteParams = { groupId: string };
 
diff --git a/src/features/groups/components/discover/group-grid-item.test.tsx b/src/features/groups/components/discover/group-grid-item.test.tsx
index 89ef54324..950f2d25b 100644
--- a/src/features/groups/components/discover/group-grid-item.test.tsx
+++ b/src/features/groups/components/discover/group-grid-item.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import GroupGridItem from './group-grid-item';
+import GroupGridItem from './group-grid-item.tsx';
 
 describe('<GroupGridItem', () => {
   it('should render correctly', () => {
diff --git a/src/features/groups/components/discover/group-grid-item.tsx b/src/features/groups/components/discover/group-grid-item.tsx
index 8091058eb..845cf1eb2 100644
--- a/src/features/groups/components/discover/group-grid-item.tsx
+++ b/src/features/groups/components/discover/group-grid-item.tsx
@@ -1,14 +1,14 @@
 import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-import GroupActionButton from 'soapbox/features/group/components/group-action-button';
-import GroupHeaderImage from 'soapbox/features/group/components/group-header-image';
-import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
-import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
+import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import GroupActionButton from 'soapbox/features/group/components/group-action-button.tsx';
+import GroupHeaderImage from 'soapbox/features/group/components/group-header-image.tsx';
+import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
+import GroupPrivacy from 'soapbox/features/group/components/group-privacy.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 interface IGroup {
   group: Group;
diff --git a/src/features/groups/components/discover/group-list-item.test.tsx b/src/features/groups/components/discover/group-list-item.test.tsx
index 3e6b78ef6..13539a1cd 100644
--- a/src/features/groups/components/discover/group-list-item.test.tsx
+++ b/src/features/groups/components/discover/group-list-item.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import GroupListItem from './group-list-item';
+import GroupListItem from './group-list-item.tsx';
 
 describe('<GroupListItem', () => {
   it('should render correctly', () => {
diff --git a/src/features/groups/components/discover/group-list-item.tsx b/src/features/groups/components/discover/group-list-item.tsx
index fb3da6e7a..58b909a56 100644
--- a/src/features/groups/components/discover/group-list-item.tsx
+++ b/src/features/groups/components/discover/group-list-item.tsx
@@ -3,11 +3,11 @@ import worldIcon from '@tabler/icons/outline/world.svg';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import GroupActionButton from 'soapbox/features/group/components/group-action-button';
-import { Group as GroupEntity } from 'soapbox/types/entities';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import GroupActionButton from 'soapbox/features/group/components/group-action-button.tsx';
+import { Group as GroupEntity } from 'soapbox/types/entities.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IGroupListItem {
   group: GroupEntity;
diff --git a/src/features/groups/components/discover/layout-buttons.test.tsx b/src/features/groups/components/discover/layout-buttons.test.tsx
index 24784eee1..0b71e4223 100644
--- a/src/features/groups/components/discover/layout-buttons.test.tsx
+++ b/src/features/groups/components/discover/layout-buttons.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen, within } from 'soapbox/jest/test-helpers';
+import { render, screen, within } from 'soapbox/jest/test-helpers.tsx';
 
-import LayoutButtons, { GroupLayout } from './layout-buttons';
+import LayoutButtons, { GroupLayout } from './layout-buttons.tsx';
 
 describe('<LayoutButtons', () => {
   describe('when LIST view', () => {
diff --git a/src/features/groups/components/discover/layout-buttons.tsx b/src/features/groups/components/discover/layout-buttons.tsx
index 7ab6b9cc2..2d974c73c 100644
--- a/src/features/groups/components/discover/layout-buttons.tsx
+++ b/src/features/groups/components/discover/layout-buttons.tsx
@@ -2,7 +2,7 @@ import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
 import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
 
-import { HStack, Icon } from 'soapbox/components/ui';
+import { HStack, Icon } from 'soapbox/components/ui/index.ts';
 
 enum GroupLayout {
   LIST = 'LIST',
diff --git a/src/features/groups/components/discover/popular-groups.tsx b/src/features/groups/components/discover/popular-groups.tsx
index a590cacd1..1290bb3f9 100644
--- a/src/features/groups/components/discover/popular-groups.tsx
+++ b/src/features/groups/components/discover/popular-groups.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { usePopularGroups } from 'soapbox/api/hooks';
-import Link from 'soapbox/components/link';
-import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui';
-import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover';
+import { usePopularGroups } from 'soapbox/api/hooks/index.ts';
+import Link from 'soapbox/components/link.tsx';
+import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover.tsx';
 
-import GroupGridItem from './group-grid-item';
+import GroupGridItem from './group-grid-item.tsx';
 
 const PopularGroups = () => {
   const { groups, isFetching, isFetched, isError } = usePopularGroups();
diff --git a/src/features/groups/components/discover/popular-tags.tsx b/src/features/groups/components/discover/popular-tags.tsx
index bbeacb822..0f726294e 100644
--- a/src/features/groups/components/discover/popular-tags.tsx
+++ b/src/features/groups/components/discover/popular-tags.tsx
@@ -1,10 +1,10 @@
 import { FormattedMessage } from 'react-intl';
 
-import { usePopularTags } from 'soapbox/api/hooks';
-import Link from 'soapbox/components/link';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { usePopularTags } from 'soapbox/api/hooks/index.ts';
+import Link from 'soapbox/components/link.tsx';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import TagListItem from './tag-list-item';
+import TagListItem from './tag-list-item.tsx';
 
 const PopularTags = () => {
   const { tags, isFetched, isError } = usePopularTags();
diff --git a/src/features/groups/components/discover/search/blankslate.test.tsx b/src/features/groups/components/discover/search/blankslate.test.tsx
index 4d2a637b1..77843ca6e 100644
--- a/src/features/groups/components/discover/search/blankslate.test.tsx
+++ b/src/features/groups/components/discover/search/blankslate.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Blankslate from './blankslate';
+import Blankslate from './blankslate.tsx';
 
 
 describe('<Blankslate />', () => {
diff --git a/src/features/groups/components/discover/search/blankslate.tsx b/src/features/groups/components/discover/search/blankslate.tsx
index 407330256..a80d94532 100644
--- a/src/features/groups/components/discover/search/blankslate.tsx
+++ b/src/features/groups/components/discover/search/blankslate.tsx
@@ -1,4 +1,4 @@
-import { Stack, Text } from 'soapbox/components/ui';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
 
 interface Props {
   title: React.ReactNode | string;
diff --git a/src/features/groups/components/discover/search/recent-searches.tsx b/src/features/groups/components/discover/search/recent-searches.tsx
index 0215e8e8c..243cbb406 100644
--- a/src/features/groups/components/discover/search/recent-searches.tsx
+++ b/src/features/groups/components/discover/search/recent-searches.tsx
@@ -3,10 +3,10 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
 
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
-import { groupSearchHistory } from 'soapbox/settings';
-import { clearRecentGroupSearches } from 'soapbox/utils/groups';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { groupSearchHistory } from 'soapbox/settings.ts';
+import { clearRecentGroupSearches } from 'soapbox/utils/groups.ts';
 
 interface Props {
   onSelect(value: string): void;
diff --git a/src/features/groups/components/discover/search/results.test.tsx b/src/features/groups/components/discover/search/results.test.tsx
index ac45e704c..71d017eb8 100644
--- a/src/features/groups/components/discover/search/results.test.tsx
+++ b/src/features/groups/components/discover/search/results.test.tsx
@@ -2,10 +2,10 @@ import userEvent from '@testing-library/user-event';
 import { VirtuosoGridMockContext, VirtuosoMockContext } from 'react-virtuoso';
 import { describe, expect, it, vi } from 'vitest';
 
-import { buildAccount, buildGroup } from 'soapbox/jest/factory';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { buildAccount, buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import Results from './results';
+import Results from './results.tsx';
 
 const userId = '1';
 const store = {
diff --git a/src/features/groups/components/discover/search/results.tsx b/src/features/groups/components/discover/search/results.tsx
index 63d1dc265..b1817680f 100644
--- a/src/features/groups/components/discover/search/results.tsx
+++ b/src/features/groups/components/discover/search/results.tsx
@@ -3,14 +3,14 @@ import { forwardRef, useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { useGroupSearch } from 'soapbox/api/hooks';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { useGroupSearch } from 'soapbox/api/hooks/index.ts';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import GroupGridItem from '../group-grid-item';
-import GroupListItem from '../group-list-item';
-import LayoutButtons, { GroupLayout } from '../layout-buttons';
+import GroupGridItem from '../group-grid-item.tsx';
+import GroupListItem from '../group-list-item.tsx';
+import LayoutButtons, { GroupLayout } from '../layout-buttons.tsx';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/types/entities.ts';
 
 interface Props {
   groupSearchResult: ReturnType<typeof useGroupSearch>;
diff --git a/src/features/groups/components/discover/search/search.test.tsx b/src/features/groups/components/discover/search/search.test.tsx
index 5eb14ac2e..44649c2af 100644
--- a/src/features/groups/components/discover/search/search.test.tsx
+++ b/src/features/groups/components/discover/search/search.test.tsx
@@ -1,11 +1,11 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import Search from './search';
+import Search from './search.tsx';
 
 const store = {
   instance: instanceV1Schema.parse({
diff --git a/src/features/groups/components/discover/search/search.tsx b/src/features/groups/components/discover/search/search.tsx
index b54df185f..7b70aea19 100644
--- a/src/features/groups/components/discover/search/search.tsx
+++ b/src/features/groups/components/discover/search/search.tsx
@@ -1,15 +1,15 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useGroupSearch } from 'soapbox/api/hooks';
-import { Stack } from 'soapbox/components/ui';
-import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
-import { useDebounce, useOwnAccount } from 'soapbox/hooks';
-import { saveGroupSearch } from 'soapbox/utils/groups';
+import { useGroupSearch } from 'soapbox/api/hooks/index.ts';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
+import { useDebounce, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { saveGroupSearch } from 'soapbox/utils/groups.ts';
 
-import Blankslate from './blankslate';
-import RecentSearches from './recent-searches';
-import Results from './results';
+import Blankslate from './blankslate.tsx';
+import RecentSearches from './recent-searches.tsx';
+import Results from './results.tsx';
 
 interface Props {
   onSelect(value: string): void;
diff --git a/src/features/groups/components/discover/suggested-groups.tsx b/src/features/groups/components/discover/suggested-groups.tsx
index 0bab240b0..6dff84009 100644
--- a/src/features/groups/components/discover/suggested-groups.tsx
+++ b/src/features/groups/components/discover/suggested-groups.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useSuggestedGroups } from 'soapbox/api/hooks';
-import Link from 'soapbox/components/link';
-import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui';
-import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover';
+import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
+import Link from 'soapbox/components/link.tsx';
+import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover.tsx';
 
-import GroupGridItem from './group-grid-item';
+import GroupGridItem from './group-grid-item.tsx';
 
 const SuggestedGroups = () => {
   const { groups, isFetching, isFetched, isError } = useSuggestedGroups();
diff --git a/src/features/groups/components/discover/tag-list-item.test.tsx b/src/features/groups/components/discover/tag-list-item.test.tsx
index f70308d9d..c57f2e0d8 100644
--- a/src/features/groups/components/discover/tag-list-item.test.tsx
+++ b/src/features/groups/components/discover/tag-list-item.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildGroupTag } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildGroupTag } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import TagListItem from './tag-list-item';
+import TagListItem from './tag-list-item.tsx';
 
 describe('<TagListItem', () => {
   it('should render correctly', () => {
diff --git a/src/features/groups/components/discover/tag-list-item.tsx b/src/features/groups/components/discover/tag-list-item.tsx
index 937c58d42..f684fb7d4 100644
--- a/src/features/groups/components/discover/tag-list-item.tsx
+++ b/src/features/groups/components/discover/tag-list-item.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Stack, Text } from 'soapbox/components/ui';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import type { GroupTag } from 'soapbox/schemas';
+import type { GroupTag } from 'soapbox/schemas/index.ts';
 
 interface ITagListItem {
   tag: GroupTag;
diff --git a/src/features/groups/components/group-link-preview.tsx b/src/features/groups/components/group-link-preview.tsx
index 54e547fb9..73fe5b904 100644
--- a/src/features/groups/components/group-link-preview.tsx
+++ b/src/features/groups/components/group-link-preview.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Button, CardTitle, Stack } from 'soapbox/components/ui';
-import { type Card as StatusCard } from 'soapbox/types/entities';
+import { Avatar, Button, CardTitle, Stack } from 'soapbox/components/ui/index.ts';
+import { type Card as StatusCard } from 'soapbox/types/entities.ts';
 
 interface IGroupLinkPreview {
   card: StatusCard;
diff --git a/src/features/groups/components/pending-groups-row.tsx b/src/features/groups/components/pending-groups-row.tsx
index 9c654f395..fba1e4a78 100644
--- a/src/features/groups/components/pending-groups-row.tsx
+++ b/src/features/groups/components/pending-groups-row.tsx
@@ -1,7 +1,7 @@
-import { usePendingGroups } from 'soapbox/api/hooks';
-import { PendingItemsRow } from 'soapbox/components/pending-items-row';
-import { Divider } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
+import { usePendingGroups } from 'soapbox/api/hooks/index.ts';
+import { PendingItemsRow } from 'soapbox/components/pending-items-row.tsx';
+import { Divider } from 'soapbox/components/ui/index.ts';
+import { useFeatures } from 'soapbox/hooks/index.ts';
 
 export default () => {
   const features = useFeatures();
diff --git a/src/features/groups/components/tab-bar.tsx b/src/features/groups/components/tab-bar.tsx
index 016b5ed98..a8f05edd7 100644
--- a/src/features/groups/components/tab-bar.tsx
+++ b/src/features/groups/components/tab-bar.tsx
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Tabs } from 'soapbox/components/ui';
+import { Tabs } from 'soapbox/components/ui/index.ts';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs';
+import type { Item } from 'soapbox/components/ui/tabs/tabs.tsx';
 
 export enum TabItems {
   MY_GROUPS = 'MY_GROUPS',
diff --git a/src/features/groups/discover.test.tsx b/src/features/groups/discover.test.tsx
index ad2e4dd1d..2454d32e8 100644
--- a/src/features/groups/discover.test.tsx
+++ b/src/features/groups/discover.test.tsx
@@ -1,11 +1,11 @@
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import Discover from './discover';
+import Discover from './discover.tsx';
 
 vi.mock('../../../hooks/useDimensions', () => ({
   useDimensions: () => [{ scrollWidth: 190 }, null, { width: 300 }],
diff --git a/src/features/groups/discover.tsx b/src/features/groups/discover.tsx
index 5978db775..db3427d6a 100644
--- a/src/features/groups/discover.tsx
+++ b/src/features/groups/discover.tsx
@@ -4,13 +4,13 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui';
+import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui/index.ts';
 
-import PopularGroups from './components/discover/popular-groups';
-import PopularTags from './components/discover/popular-tags';
-import Search from './components/discover/search/search';
-import SuggestedGroups from './components/discover/suggested-groups';
-import TabBar, { TabItems } from './components/tab-bar';
+import PopularGroups from './components/discover/popular-groups.tsx';
+import PopularTags from './components/discover/popular-tags.tsx';
+import Search from './components/discover/search/search.tsx';
+import SuggestedGroups from './components/discover/suggested-groups.tsx';
+import TabBar, { TabItems } from './components/tab-bar.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'groups.discover.search.placeholder', defaultMessage: 'Search' },
diff --git a/src/features/groups/index.tsx b/src/features/groups/index.tsx
index dd1c6219d..326899f0b 100644
--- a/src/features/groups/index.tsx
+++ b/src/features/groups/index.tsx
@@ -3,18 +3,18 @@ import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useGroups } from 'soapbox/api/hooks';
-import GroupCard from 'soapbox/components/group-card';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Input, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useDebounce, useFeatures } from 'soapbox/hooks';
-import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useGroups } from 'soapbox/api/hooks/index.ts';
+import GroupCard from 'soapbox/components/group-card.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Button, Input, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
+import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions.ts';
 
-import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
+import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card.tsx';
 
-import PendingGroupsRow from './components/pending-groups-row';
-import TabBar, { TabItems } from './components/tab-bar';
+import PendingGroupsRow from './components/pending-groups-row.tsx';
+import TabBar, { TabItems } from './components/tab-bar.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'groups.search.placeholder', defaultMessage: 'Search My Groups' },
diff --git a/src/features/groups/pending-requests.tsx b/src/features/groups/pending-requests.tsx
index 95969f5ea..c263eb6de 100644
--- a/src/features/groups/pending-requests.tsx
+++ b/src/features/groups/pending-requests.tsx
@@ -1,12 +1,12 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { usePendingGroups } from 'soapbox/api/hooks';
-import GroupCard from 'soapbox/components/group-card';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Stack, Text } from 'soapbox/components/ui';
+import { usePendingGroups } from 'soapbox/api/hooks/index.ts';
+import GroupCard from 'soapbox/components/group-card.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
+import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card.tsx';
 
 const messages = defineMessages({
   label: { id: 'groups.pending.label', defaultMessage: 'Pending Requests' },
diff --git a/src/features/groups/popular.tsx b/src/features/groups/popular.tsx
index 24f9d7091..a135e6e00 100644
--- a/src/features/groups/popular.tsx
+++ b/src/features/groups/popular.tsx
@@ -3,14 +3,14 @@ import { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { usePopularGroups } from 'soapbox/api/hooks';
-import { Column } from 'soapbox/components/ui';
+import { usePopularGroups } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/index.ts';
 
-import GroupGridItem from './components/discover/group-grid-item';
-import GroupListItem from './components/discover/group-list-item';
-import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons';
+import GroupGridItem from './components/discover/group-grid-item.tsx';
+import GroupListItem from './components/discover/group-list-item.tsx';
+import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   label: { id: 'groups.popular.label', defaultMessage: 'Suggested Groups' },
diff --git a/src/features/groups/suggested.tsx b/src/features/groups/suggested.tsx
index 8b313ab3c..65f9b004f 100644
--- a/src/features/groups/suggested.tsx
+++ b/src/features/groups/suggested.tsx
@@ -3,14 +3,14 @@ import { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { useSuggestedGroups } from 'soapbox/api/hooks';
-import { Column } from 'soapbox/components/ui';
+import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/index.ts';
 
-import GroupGridItem from './components/discover/group-grid-item';
-import GroupListItem from './components/discover/group-list-item';
-import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons';
+import GroupGridItem from './components/discover/group-grid-item.tsx';
+import GroupListItem from './components/discover/group-list-item.tsx';
+import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   label: { id: 'groups.suggested.label', defaultMessage: 'Suggested Groups' },
diff --git a/src/features/groups/tag.tsx b/src/features/groups/tag.tsx
index c7a5a9fa4..597f943ea 100644
--- a/src/features/groups/tag.tsx
+++ b/src/features/groups/tag.tsx
@@ -4,13 +4,13 @@ import clsx from 'clsx';
 import { forwardRef, useCallback, useState } from 'react';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { useGroupTag, useGroupsFromTag } from 'soapbox/api/hooks';
-import { Column, HStack, Icon } from 'soapbox/components/ui';
+import { useGroupTag, useGroupsFromTag } from 'soapbox/api/hooks/index.ts';
+import { Column, HStack, Icon } from 'soapbox/components/ui/index.ts';
 
-import GroupGridItem from './components/discover/group-grid-item';
-import GroupListItem from './components/discover/group-list-item';
+import GroupGridItem from './components/discover/group-grid-item.tsx';
+import GroupListItem from './components/discover/group-list-item.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 enum Layout {
   LIST = 'LIST',
diff --git a/src/features/groups/tags.tsx b/src/features/groups/tags.tsx
index c1a58b389..7bb81a53a 100644
--- a/src/features/groups/tags.tsx
+++ b/src/features/groups/tags.tsx
@@ -2,12 +2,12 @@ import clsx from 'clsx';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
 
-import { usePopularTags } from 'soapbox/api/hooks';
-import { Column, Text } from 'soapbox/components/ui';
+import { usePopularTags } from 'soapbox/api/hooks/index.ts';
+import { Column, Text } from 'soapbox/components/ui/index.ts';
 
-import TagListItem from './components/discover/tag-list-item';
+import TagListItem from './components/discover/tag-list-item.tsx';
 
-import type { GroupTag } from 'soapbox/schemas';
+import type { GroupTag } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   title: { id: 'groups.tags.title', defaultMessage: 'Browse Topics' },
diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx
index b7384c501..3301b61e3 100644
--- a/src/features/hashtag-timeline/index.tsx
+++ b/src/features/hashtag-timeline/index.tsx
@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchHashtag, followHashtag, unfollowHashtag } from 'soapbox/actions/tags';
-import { expandHashtagTimeline, clearTimeline } from 'soapbox/actions/timelines';
-import { useHashtagStream } from 'soapbox/api/hooks';
-import List, { ListItem } from 'soapbox/components/list';
-import { Column, Toggle } from 'soapbox/components/ui';
-import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { fetchHashtag, followHashtag, unfollowHashtag } from 'soapbox/actions/tags.ts';
+import { expandHashtagTimeline, clearTimeline } from 'soapbox/actions/timelines.ts';
+import { useHashtagStream } from 'soapbox/api/hooks/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Column, Toggle } from 'soapbox/components/ui/index.ts';
+import Timeline from 'soapbox/features/ui/components/timeline.tsx';
+import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
 interface IHashtagTimeline {
   params?: {
diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx
index 686c69708..02e0e3bcc 100644
--- a/src/features/home-timeline/index.tsx
+++ b/src/features/home-timeline/index.tsx
@@ -2,12 +2,12 @@ import { useEffect, useRef } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { expandHomeTimeline } from 'soapbox/actions/timelines';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column, Stack, Text } from 'soapbox/components/ui';
-import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Column, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Timeline from 'soapbox/features/ui/components/timeline.tsx';
+import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
diff --git a/src/features/import-data/components/csv-importer.tsx b/src/features/import-data/components/csv-importer.tsx
index c8675b6c6..cf1143a74 100644
--- a/src/features/import-data/components/csv-importer.tsx
+++ b/src/features/import-data/components/csv-importer.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
-import { Button, FileInput, Form, FormActions, FormGroup, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { Button, FileInput, Form, FormActions, FormGroup, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 interface ICSVImporter {
   messages: {
diff --git a/src/features/import-data/index.tsx b/src/features/import-data/index.tsx
index 2294faebf..77fa22179 100644
--- a/src/features/import-data/index.tsx
+++ b/src/features/import-data/index.tsx
@@ -4,10 +4,10 @@ import {
   importFollows,
   importBlocks,
   importMutes,
-} from 'soapbox/actions/import-data';
-import { Column } from 'soapbox/components/ui';
+} from 'soapbox/actions/import-data.ts';
+import { Column } from 'soapbox/components/ui/index.ts';
 
-import CSVImporter from './components/csv-importer';
+import CSVImporter from './components/csv-importer.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.import_data', defaultMessage: 'Import data' },
diff --git a/src/features/landing-timeline/components/site-banner.tsx b/src/features/landing-timeline/components/site-banner.tsx
index d88542d4a..607464271 100644
--- a/src/features/landing-timeline/components/site-banner.tsx
+++ b/src/features/landing-timeline/components/site-banner.tsx
@@ -1,11 +1,11 @@
 import DOMPurify from 'isomorphic-dompurify';
 
-import Markup from 'soapbox/components/markup';
-import { Stack } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import Markup from 'soapbox/components/markup.tsx';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import { useInstance } from 'soapbox/hooks/index.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import { LogoText } from './logo-text';
+import { LogoText } from './logo-text.tsx';
 
 const SiteBanner: React.FC = () => {
   const { instance } = useInstance();
diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx
index a99ff43ba..29e8bdecd 100644
--- a/src/features/landing-timeline/index.tsx
+++ b/src/features/landing-timeline/index.tsx
@@ -1,17 +1,17 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { expandCommunityTimeline } from 'soapbox/actions/timelines';
-import { useCommunityStream } from 'soapbox/api/hooks';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandCommunityTimeline } from 'soapbox/actions/timelines.ts';
+import { useCommunityStream } from 'soapbox/api/hooks/index.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
-import AboutPage from '../about';
-import Timeline from '../ui/components/timeline';
+import AboutPage from '../about/index.tsx';
+import Timeline from '../ui/components/timeline.tsx';
 
-import { SiteBanner } from './components/site-banner';
+import { SiteBanner } from './components/site-banner.tsx';
 
 const LandingTimeline = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/list-adder/components/list.tsx b/src/features/list-adder/components/list.tsx
index fe134c84d..d7b064c0b 100644
--- a/src/features/list-adder/components/list.tsx
+++ b/src/features/list-adder/components/list.tsx
@@ -3,10 +3,10 @@ import plusIcon from '@tabler/icons/outline/plus.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { removeFromListAdder, addToListAdder } from 'soapbox/actions/lists';
-import Icon from 'soapbox/components/icon';
-import IconButton from 'soapbox/components/icon-button';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { removeFromListAdder, addToListAdder } from 'soapbox/actions/lists.ts';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
diff --git a/src/features/list-adder/index.tsx b/src/features/list-adder/index.tsx
index d26c594cd..2453cbe1e 100644
--- a/src/features/list-adder/index.tsx
+++ b/src/features/list-adder/index.tsx
@@ -2,18 +2,18 @@ import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
-import { setupListAdder, resetListAdder } from 'soapbox/actions/lists';
-import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { setupListAdder, resetListAdder } from 'soapbox/actions/lists.ts';
+import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import NewListForm from '../lists/components/new-list-form';
+import NewListForm from '../lists/components/new-list-form.tsx';
 
-import List from './components/list';
+import List from './components/list.tsx';
 
 import type { List as ImmutableList } from 'immutable';
-import type { RootState } from 'soapbox/store';
-import type { List as ListEntity } from 'soapbox/types/entities';
+import type { RootState } from 'soapbox/store.ts';
+import type { List as ListEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
diff --git a/src/features/list-editor/components/account.tsx b/src/features/list-editor/components/account.tsx
index 9e422122f..42cc532c9 100644
--- a/src/features/list-editor/components/account.tsx
+++ b/src/features/list-editor/components/account.tsx
@@ -2,11 +2,11 @@ import plusIcon from '@tabler/icons/outline/plus.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists.ts';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import { HStack } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
diff --git a/src/features/list-editor/components/edit-list-form.tsx b/src/features/list-editor/components/edit-list-form.tsx
index 2f8c34d0a..ddf59331c 100644
--- a/src/features/list-editor/components/edit-list-form.tsx
+++ b/src/features/list-editor/components/edit-list-form.tsx
@@ -1,8 +1,8 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists.ts';
+import { Button, Form, HStack, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   title: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index e01b1adb8..f0ef20aa2 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -2,10 +2,10 @@ import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists';
-import Icon from 'soapbox/components/icon';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import { Button, Form, HStack, Input } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
diff --git a/src/features/list-editor/index.tsx b/src/features/list-editor/index.tsx
index 4be764b5a..6eeaf02b0 100644
--- a/src/features/list-editor/index.tsx
+++ b/src/features/list-editor/index.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { setupListEditor, resetListEditor } from 'soapbox/actions/lists';
-import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { setupListEditor, resetListEditor } from 'soapbox/actions/lists.ts';
+import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import Account from './components/account';
-import EditListForm from './components/edit-list-form';
-import Search from './components/search';
+import Account from './components/account.tsx';
+import EditListForm from './components/edit-list-form.tsx';
+import Search from './components/search.tsx';
 
 const messages = defineMessages({
   changeTitle: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx
index 8b445f95e..f080e6abb 100644
--- a/src/features/list-timeline/index.tsx
+++ b/src/features/list-timeline/index.tsx
@@ -2,16 +2,16 @@ import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { fetchList } from 'soapbox/actions/lists';
-import { openModal } from 'soapbox/actions/modals';
-import { expandListTimeline } from 'soapbox/actions/timelines';
-import { useListStream } from 'soapbox/api/hooks';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import { Column, Button, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { fetchList } from 'soapbox/actions/lists.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { expandListTimeline } from 'soapbox/actions/timelines.ts';
+import { useListStream } from 'soapbox/api/hooks/index.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import { Column, Button, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 const ListTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/lists/components/new-list-form.tsx b/src/features/lists/components/new-list-form.tsx
index 51053393e..39892c740 100644
--- a/src/features/lists/components/new-list-form.tsx
+++ b/src/features/lists/components/new-list-form.tsx
@@ -1,8 +1,8 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists.ts';
+import { Button, Form, HStack, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
diff --git a/src/features/lists/index.tsx b/src/features/lists/index.tsx
index 88303ab24..68a8dfd0d 100644
--- a/src/features/lists/index.tsx
+++ b/src/features/lists/index.tsx
@@ -6,16 +6,16 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { createSelector } from 'reselect';
 
-import { deleteList, fetchLists } from 'soapbox/actions/lists';
-import { openModal } from 'soapbox/actions/modals';
-import Icon from 'soapbox/components/icon';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, IconButton, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { deleteList, fetchLists } from 'soapbox/actions/lists.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, IconButton, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import NewListForm from './components/new-list-form';
+import NewListForm from './components/new-list-form.tsx';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.lists', defaultMessage: 'Lists' },
diff --git a/src/features/migration/index.tsx b/src/features/migration/index.tsx
index fa67f0a57..eeae46f5e 100644
--- a/src/features/migration/index.tsx
+++ b/src/features/migration/index.tsx
@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { moveAccount } from 'soapbox/actions/security';
-import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useInstance } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { moveAccount } from 'soapbox/actions/security.ts';
+import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.migration', defaultMessage: 'Account migration' },
diff --git a/src/features/mutes/components/group-list-item.tsx b/src/features/mutes/components/group-list-item.tsx
index d40245d6c..e7b578075 100644
--- a/src/features/mutes/components/group-list-item.tsx
+++ b/src/features/mutes/components/group-list-item.tsx
@@ -1,10 +1,10 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useUnmuteGroup } from 'soapbox/api/hooks';
-import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { Button, HStack, Text } from 'soapbox/components/ui';
-import { type Group } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
+import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
+import { Button, HStack, Text } from 'soapbox/components/ui/index.ts';
+import { type Group } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 interface IGroupListItem {
   group: Group;
diff --git a/src/features/mutes/index.tsx b/src/features/mutes/index.tsx
index af1972cdc..f07b17c95 100644
--- a/src/features/mutes/index.tsx
+++ b/src/features/mutes/index.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { useMutes, useGroupMutes } from 'soapbox/api/hooks';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Stack, Tabs } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useFeatures } from 'soapbox/hooks';
+import { useMutes, useGroupMutes } from 'soapbox/api/hooks/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Stack, Tabs } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useFeatures } from 'soapbox/hooks/index.ts';
 
-import GroupListItem from './components/group-list-item';
+import GroupListItem from './components/group-list-item.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.mutes', defaultMessage: 'Mutes' },
diff --git a/src/features/new-status/index.tsx b/src/features/new-status/index.tsx
index a02baee8d..a574426d4 100644
--- a/src/features/new-status/index.tsx
+++ b/src/features/new-status/index.tsx
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const NewStatus = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/nostr-relays/components/relay-editor.tsx b/src/features/nostr-relays/components/relay-editor.tsx
index c4fc562e6..42a37ca97 100644
--- a/src/features/nostr-relays/components/relay-editor.tsx
+++ b/src/features/nostr-relays/components/relay-editor.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Input, Select } from 'soapbox/components/ui';
-import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import { useInstance } from 'soapbox/hooks';
+import { HStack, Input, Select } from 'soapbox/components/ui/index.ts';
+import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import { useInstance } from 'soapbox/hooks/index.ts';
 
 interface IRelayEditor {
   relays: RelayData[];
diff --git a/src/features/nostr-relays/index.tsx b/src/features/nostr-relays/index.tsx
index 19171f638..7663fc4ff 100644
--- a/src/features/nostr-relays/index.tsx
+++ b/src/features/nostr-relays/index.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { useNostrReq } from 'soapbox/features/nostr/hooks/useNostrReq';
-import { useOwnAccount } from 'soapbox/hooks';
-import { useSigner } from 'soapbox/hooks/nostr/useSigner';
+import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui/index.ts';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useNostrReq } from 'soapbox/features/nostr/hooks/useNostrReq.ts';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useSigner } from 'soapbox/hooks/nostr/useSigner.ts';
 
-import RelayEditor, { RelayData } from './components/relay-editor';
+import RelayEditor, { RelayData } from './components/relay-editor.tsx';
 
 const messages = defineMessages({
   title: { id: 'nostr_relays.title', defaultMessage: 'Relays' },
diff --git a/src/features/nostr/Bech32Redirect.tsx b/src/features/nostr/Bech32Redirect.tsx
index 6e60c1950..45412f7dc 100644
--- a/src/features/nostr/Bech32Redirect.tsx
+++ b/src/features/nostr/Bech32Redirect.tsx
@@ -1,7 +1,7 @@
 import { nip19 } from 'nostr-tools';
 import { Redirect } from 'react-router-dom';
 
-import MissingIndicator from 'soapbox/components/missing-indicator';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 
 interface INIP19Redirect {
   params: {
diff --git a/src/features/nostr/hooks/useNostrReq.ts b/src/features/nostr/hooks/useNostrReq.ts
index 1d4a01a6e..aee482f59 100644
--- a/src/features/nostr/hooks/useNostrReq.ts
+++ b/src/features/nostr/hooks/useNostrReq.ts
@@ -2,8 +2,8 @@ import { NSet, NostrEvent, NostrFilter } from '@nostrify/nostrify';
 import isEqual from 'lodash/isEqual';
 import { useEffect, useRef, useState } from 'react';
 
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { useForceUpdate } from 'soapbox/hooks/useForceUpdate';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useForceUpdate } from 'soapbox/hooks/useForceUpdate.ts';
 
 /**
  * Streams events from the relay for the given filters.
diff --git a/src/features/nostr/keyring.ts b/src/features/nostr/keyring.ts
index 6ae33502a..7de9e017f 100644
--- a/src/features/nostr/keyring.ts
+++ b/src/features/nostr/keyring.ts
@@ -1,4 +1,4 @@
-import { NKeyring } from './NKeyring';
+import { NKeyring } from './NKeyring.ts';
 
 export const keyring = new NKeyring(
   localStorage,
diff --git a/src/features/nostr/nostr-bunker-login.tsx b/src/features/nostr/nostr-bunker-login.tsx
index e8cd6c126..c047a47c6 100644
--- a/src/features/nostr/nostr-bunker-login.tsx
+++ b/src/features/nostr/nostr-bunker-login.tsx
@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { authLoggedIn, verifyCredentials } from 'soapbox/actions/auth';
-import { obtainOAuthToken } from 'soapbox/actions/oauth';
-import { Button, Form, Input, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { authLoggedIn, verifyCredentials } from 'soapbox/actions/auth.ts';
+import { obtainOAuthToken } from 'soapbox/actions/oauth.ts';
+import { Button, Form, Input, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 export const NostrBunkerLogin: React.FC = () => {
   const history = useHistory();
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index ce9003d92..246e15a2c 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -7,12 +7,12 @@ import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { setFilter } from 'soapbox/actions/notifications';
-import Icon from 'soapbox/components/icon';
-import { Tabs } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks';
+import { setFilter } from 'soapbox/actions/notifications.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import { Tabs } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks/index.ts';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs';
+import type { Item } from 'soapbox/components/ui/tabs/tabs.tsx';
 
 const messages = defineMessages({
   all: { id: 'notifications.filter.all', defaultMessage: 'All' },
diff --git a/src/features/notifications/components/notification.test.tsx b/src/features/notifications/components/notification.test.tsx
index 331046258..140a714de 100644
--- a/src/features/notifications/components/notification.test.tsx
+++ b/src/features/notifications/components/notification.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { updateNotifications } from 'soapbox/actions/notifications';
-import { render, screen, rootState, createTestStore } from 'soapbox/jest/test-helpers';
+import { updateNotifications } from 'soapbox/actions/notifications.ts';
+import { render, screen, rootState, createTestStore } from 'soapbox/jest/test-helpers.tsx';
 
-import Notification from './notification';
+import Notification from './notification.tsx';
 
 /** Prepare the notification for use by the component */
 const normalize = (notification: any) => {
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index 9f3deb31a..78cb5cff1 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -16,25 +16,25 @@ import { useCallback } from 'react';
 import { defineMessages, useIntl, IntlShape, MessageDescriptor, defineMessage, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { mentionCompose } from 'soapbox/actions/compose';
-import { reblog, favourite, unreblog, unfavourite } from 'soapbox/actions/interactions';
-import { patchMe } from 'soapbox/actions/me';
-import { openModal } from 'soapbox/actions/modals';
-import { getSettings } from 'soapbox/actions/settings';
-import { hideStatus, revealStatus } from 'soapbox/actions/statuses';
-import Icon from 'soapbox/components/icon';
-import Status from 'soapbox/components/status';
-import { HStack, Text, Emoji, Button, Stack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import StatusContainer from 'soapbox/containers/status-container';
-import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
-import { makeGetNotification } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
-import { NotificationType, validType } from 'soapbox/utils/notification';
+import { mentionCompose } from 'soapbox/actions/compose.ts';
+import { reblog, favourite, unreblog, unfavourite } from 'soapbox/actions/interactions.ts';
+import { patchMe } from 'soapbox/actions/me.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { hideStatus, revealStatus } from 'soapbox/actions/statuses.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import Status from 'soapbox/components/status.tsx';
+import { HStack, Text, Emoji, Button, Stack } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
+import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { makeGetNotification } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { NotificationType, validType } from 'soapbox/utils/notification.ts';
 
-import type { ScrollPosition } from 'soapbox/components/status';
-import type { Account as AccountEntity, Status as StatusEntity, Notification as NotificationEntity } from 'soapbox/types/entities';
+import type { ScrollPosition } from 'soapbox/components/status.tsx';
+import type { Account as AccountEntity, Status as StatusEntity, Notification as NotificationEntity } from 'soapbox/types/entities.ts';
 
 const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: Date) => {
   const output = [message];
diff --git a/src/features/notifications/components/setting-toggle.tsx b/src/features/notifications/components/setting-toggle.tsx
index 1150d64d9..40e16a773 100644
--- a/src/features/notifications/components/setting-toggle.tsx
+++ b/src/features/notifications/components/setting-toggle.tsx
@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 
-import { Toggle } from 'soapbox/components/ui';
-import { Settings } from 'soapbox/schemas/soapbox/settings';
+import { Toggle } from 'soapbox/components/ui/index.ts';
+import { Settings } from 'soapbox/schemas/soapbox/settings.ts';
 
 interface ISettingToggle {
   /** Unique identifier for the Toggle. */
diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx
index 52cecda6e..447b33630 100644
--- a/src/features/notifications/index.tsx
+++ b/src/features/notifications/index.tsx
@@ -9,22 +9,22 @@ import {
   expandNotifications,
   scrollTopNotifications,
   dequeueNotifications,
-} from 'soapbox/actions/notifications';
-import { getSettings } from 'soapbox/actions/settings';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import ScrollTopButton from 'soapbox/components/scroll-top-button';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Portal } from 'soapbox/components/ui';
-import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification';
-import { useAppDispatch, useAppSelector, useSettings, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+} from 'soapbox/actions/notifications.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import ScrollTopButton from 'soapbox/components/scroll-top-button.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column, Portal } from 'soapbox/components/ui/index.ts';
+import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification.tsx';
+import { useAppDispatch, useAppSelector, useSettings, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
-import FilterBar from './components/filter-bar';
-import Notification from './components/notification';
+import FilterBar from './components/filter-bar.tsx';
+import Notification from './components/notification.tsx';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { RootState } from 'soapbox/store';
-import type { Notification as NotificationEntity } from 'soapbox/types/entities';
+import type { RootState } from 'soapbox/store.ts';
+import type { Notification as NotificationEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
diff --git a/src/features/pinned-statuses/index.tsx b/src/features/pinned-statuses/index.tsx
index 8be4b26f6..caedf401c 100644
--- a/src/features/pinned-statuses/index.tsx
+++ b/src/features/pinned-statuses/index.tsx
@@ -2,12 +2,12 @@ import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { fetchPinnedStatuses } from 'soapbox/actions/pin-statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusList from 'soapbox/components/status-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { selectOwnAccount } from 'soapbox/selectors';
+import { fetchPinnedStatuses } from 'soapbox/actions/pin-statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { selectOwnAccount } from 'soapbox/selectors/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
diff --git a/src/features/placeholder/components/placeholder-account.tsx b/src/features/placeholder/components/placeholder-account.tsx
index 776e0de67..20a023a36 100644
--- a/src/features/placeholder/components/placeholder-account.tsx
+++ b/src/features/placeholder/components/placeholder-account.tsx
@@ -1,9 +1,9 @@
 import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui';
+import { HStack } from 'soapbox/components/ui/index.ts';
 
-import PlaceholderAvatar from './placeholder-avatar';
-import PlaceholderDisplayName from './placeholder-display-name';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
+import PlaceholderDisplayName from './placeholder-display-name.tsx';
 
 /** Fake account to display while data is loading. */
 const PlaceholderAccount: React.FC = () => (
diff --git a/src/features/placeholder/components/placeholder-avatar.tsx b/src/features/placeholder/components/placeholder-avatar.tsx
index b41a2d672..b50490c4e 100644
--- a/src/features/placeholder/components/placeholder-avatar.tsx
+++ b/src/features/placeholder/components/placeholder-avatar.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { Stack } from 'soapbox/components/ui';
+import { Stack } from 'soapbox/components/ui/index.ts';
 
 interface IPlaceholderAvatar {
   size: number;
diff --git a/src/features/placeholder/components/placeholder-card.tsx b/src/features/placeholder/components/placeholder-card.tsx
index 8a9f49c60..db95c6315 100644
--- a/src/features/placeholder/components/placeholder-card.tsx
+++ b/src/features/placeholder/components/placeholder-card.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { memo } from 'react';
 
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 /** Fake link preview to display while data is loading. */
 const PlaceholderCard: React.FC = () => (
diff --git a/src/features/placeholder/components/placeholder-chat-message.tsx b/src/features/placeholder/components/placeholder-chat-message.tsx
index 8a1e06a8d..5e40609a3 100644
--- a/src/features/placeholder/components/placeholder-chat-message.tsx
+++ b/src/features/placeholder/components/placeholder-chat-message.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import { randomIntFromInterval } from '../utils';
+import { randomIntFromInterval } from '../utils.ts';
 
-import PlaceholderAvatar from './placeholder-avatar';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
 
 /** Fake chat to display while data is loading. */
 const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean }) => {
diff --git a/src/features/placeholder/components/placeholder-chat.tsx b/src/features/placeholder/components/placeholder-chat.tsx
index 353afda0b..510fe8dbf 100644
--- a/src/features/placeholder/components/placeholder-chat.tsx
+++ b/src/features/placeholder/components/placeholder-chat.tsx
@@ -1,7 +1,7 @@
-import { HStack, Stack } from 'soapbox/components/ui';
+import { HStack, Stack } from 'soapbox/components/ui/index.ts';
 
-import PlaceholderAvatar from './placeholder-avatar';
-import PlaceholderDisplayName from './placeholder-display-name';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
+import PlaceholderDisplayName from './placeholder-display-name.tsx';
 
 /** Fake chat to display while data is loading. */
 const PlaceholderChat = () => {
diff --git a/src/features/placeholder/components/placeholder-display-name.tsx b/src/features/placeholder/components/placeholder-display-name.tsx
index 2b8f99455..9b96a849f 100644
--- a/src/features/placeholder/components/placeholder-display-name.tsx
+++ b/src/features/placeholder/components/placeholder-display-name.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 interface IPlaceholderDisplayName {
   maxLength: number;
diff --git a/src/features/placeholder/components/placeholder-event-header.tsx b/src/features/placeholder/components/placeholder-event-header.tsx
index 205f4ddd4..bce5005e7 100644
--- a/src/features/placeholder/components/placeholder-event-header.tsx
+++ b/src/features/placeholder/components/placeholder-event-header.tsx
@@ -1,6 +1,6 @@
-import { Stack } from 'soapbox/components/ui';
+import { Stack } from 'soapbox/components/ui/index.ts';
 
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 const PlaceholderEventHeader = () => {
   const eventNameLength = randomIntFromInterval(5, 25);
diff --git a/src/features/placeholder/components/placeholder-event-preview.tsx b/src/features/placeholder/components/placeholder-event-preview.tsx
index 9fd93e59b..b1a8e5097 100644
--- a/src/features/placeholder/components/placeholder-event-preview.tsx
+++ b/src/features/placeholder/components/placeholder-event-preview.tsx
@@ -1,6 +1,6 @@
-import { Stack, Text } from 'soapbox/components/ui';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 const PlaceholderEventPreview = () => {
   const eventNameLength = randomIntFromInterval(5, 25);
diff --git a/src/features/placeholder/components/placeholder-group-card.tsx b/src/features/placeholder/components/placeholder-group-card.tsx
index 6176ad39e..6e2d24a74 100644
--- a/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/src/features/placeholder/components/placeholder-group-card.tsx
@@ -1,6 +1,6 @@
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 const PlaceholderGroupCard = () => {
   const groupNameLength = randomIntFromInterval(12, 20);
diff --git a/src/features/placeholder/components/placeholder-group-discover.tsx b/src/features/placeholder/components/placeholder-group-discover.tsx
index 615bcc7a0..856058144 100644
--- a/src/features/placeholder/components/placeholder-group-discover.tsx
+++ b/src/features/placeholder/components/placeholder-group-discover.tsx
@@ -1,6 +1,6 @@
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 const PlaceholderGroupDiscover = () => {
   const groupNameLength = randomIntFromInterval(12, 20);
diff --git a/src/features/placeholder/components/placeholder-group-search.tsx b/src/features/placeholder/components/placeholder-group-search.tsx
index fe976817b..8d5792143 100644
--- a/src/features/placeholder/components/placeholder-group-search.tsx
+++ b/src/features/placeholder/components/placeholder-group-search.tsx
@@ -1,6 +1,6 @@
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 export default ({ withJoinAction = true }: { withJoinAction?: boolean }) => {
   const groupNameLength = randomIntFromInterval(12, 20);
diff --git a/src/features/placeholder/components/placeholder-hashtag.tsx b/src/features/placeholder/components/placeholder-hashtag.tsx
index e28a074c5..42ea28ed7 100644
--- a/src/features/placeholder/components/placeholder-hashtag.tsx
+++ b/src/features/placeholder/components/placeholder-hashtag.tsx
@@ -1,4 +1,4 @@
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 /** Fake hashtag to display while data is loading. */
 const PlaceholderHashtag: React.FC = () => {
diff --git a/src/features/placeholder/components/placeholder-material-status.tsx b/src/features/placeholder/components/placeholder-material-status.tsx
index 35fab3522..4a200e124 100644
--- a/src/features/placeholder/components/placeholder-material-status.tsx
+++ b/src/features/placeholder/components/placeholder-material-status.tsx
@@ -1,4 +1,4 @@
-import PlaceholderStatus from './placeholder-status';
+import PlaceholderStatus from './placeholder-status.tsx';
 
 /** Fake material status to display while data is loading. */
 const PlaceholderMaterialStatus: React.FC = () => {
diff --git a/src/features/placeholder/components/placeholder-media-gallery.tsx b/src/features/placeholder/components/placeholder-media-gallery.tsx
index 2f91c1497..c9abeee85 100644
--- a/src/features/placeholder/components/placeholder-media-gallery.tsx
+++ b/src/features/placeholder/components/placeholder-media-gallery.tsx
@@ -1,7 +1,7 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import { useState } from 'react';
 
-import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities.ts';
 
 interface IPlaceholderMediaGallery {
   media: ImmutableList<AttachmentEntity>;
diff --git a/src/features/placeholder/components/placeholder-notification.tsx b/src/features/placeholder/components/placeholder-notification.tsx
index 6e216f481..ca8b3e122 100644
--- a/src/features/placeholder/components/placeholder-notification.tsx
+++ b/src/features/placeholder/components/placeholder-notification.tsx
@@ -1,10 +1,10 @@
 import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui';
+import { HStack } from 'soapbox/components/ui/index.ts';
 
-import PlaceholderAvatar from './placeholder-avatar';
-import PlaceholderDisplayName from './placeholder-display-name';
-import PlaceholderStatusContent from './placeholder-status-content';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
+import PlaceholderDisplayName from './placeholder-display-name.tsx';
+import PlaceholderStatusContent from './placeholder-status-content.tsx';
 
 /** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
diff --git a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index a03ad221c..1b5f721dd 100644
--- a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -1,6 +1,6 @@
-import { HStack, Stack } from 'soapbox/components/ui';
+import { HStack, Stack } from 'soapbox/components/ui/index.ts';
 
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 export default ({ limit }: { limit: number }) => {
   const length = randomIntFromInterval(15, 3);
diff --git a/src/features/placeholder/components/placeholder-sidebar-trends.tsx b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
index bb9147e55..93e006bf0 100644
--- a/src/features/placeholder/components/placeholder-sidebar-trends.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
@@ -1,6 +1,6 @@
-import { Stack } from 'soapbox/components/ui';
+import { Stack } from 'soapbox/components/ui/index.ts';
 
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 export default ({ limit }: { limit: number }) => {
   const trend = randomIntFromInterval(6, 3);
diff --git a/src/features/placeholder/components/placeholder-status-content.tsx b/src/features/placeholder/components/placeholder-status-content.tsx
index 1b2ffc999..11790738d 100644
--- a/src/features/placeholder/components/placeholder-status-content.tsx
+++ b/src/features/placeholder/components/placeholder-status-content.tsx
@@ -1,4 +1,4 @@
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 interface IPlaceholderStatusContent {
   maxLength: number;
diff --git a/src/features/placeholder/components/placeholder-status.tsx b/src/features/placeholder/components/placeholder-status.tsx
index 05674e8c4..4be6c1cc2 100644
--- a/src/features/placeholder/components/placeholder-status.tsx
+++ b/src/features/placeholder/components/placeholder-status.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui';
+import { HStack } from 'soapbox/components/ui/index.ts';
 
-import PlaceholderAvatar from './placeholder-avatar';
-import PlaceholderDisplayName from './placeholder-display-name';
-import PlaceholderStatusContent from './placeholder-status-content';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
+import PlaceholderDisplayName from './placeholder-display-name.tsx';
+import PlaceholderStatusContent from './placeholder-status-content.tsx';
 
 interface IPlaceholderStatus {
   variant?: 'rounded' | 'slim' | 'default';
diff --git a/src/features/preferences/index.tsx b/src/features/preferences/index.tsx
index 9d5e54720..f071b9d9c 100644
--- a/src/features/preferences/index.tsx
+++ b/src/features/preferences/index.tsx
@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { changeSetting } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
-import { Form } from 'soapbox/components/ui';
-import { SelectDropdown } from 'soapbox/features/forms';
-import SettingToggle from 'soapbox/features/notifications/components/setting-toggle';
-import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Form } from 'soapbox/components/ui/index.ts';
+import { SelectDropdown } from 'soapbox/features/forms/index.tsx';
+import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
+import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks/index.ts';
 
-import ThemeToggle from '../ui/components/theme-toggle';
+import ThemeToggle from '../ui/components/theme-toggle.tsx';
 
 const languages = {
   en: 'English',
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 121d724f7..3a35cbad7 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -3,17 +3,17 @@ import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { changeSetting } from 'soapbox/actions/settings';
-import { clearTimeline, expandPublicTimeline } from 'soapbox/actions/timelines';
-import { usePublicStream } from 'soapbox/api/hooks';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Accordion, Column } from 'soapbox/components/ui';
-import { LanguageDropdown } from 'soapbox/components/ui/language-dropdown/language-dropdown';
-import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme, useFeatures } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import { clearTimeline, expandPublicTimeline } from 'soapbox/actions/timelines.ts';
+import { usePublicStream } from 'soapbox/api/hooks/index.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Accordion, Column } from 'soapbox/components/ui/index.ts';
+import { LanguageDropdown } from 'soapbox/components/ui/language-dropdown/language-dropdown.tsx';
+import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme, useFeatures } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
-import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';
-import Timeline from '../ui/components/timeline';
+import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker.tsx';
+import Timeline from '../ui/components/timeline.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Global timeline' },
diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx
index ae2e305a8..f1fb3c7fc 100644
--- a/src/features/quotes/index.tsx
+++ b/src/features/quotes/index.tsx
@@ -4,11 +4,11 @@ import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes';
-import StatusList from 'soapbox/components/status-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes.ts';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
diff --git a/src/features/register-invite/index.tsx b/src/features/register-invite/index.tsx
index 8cc8022d6..b704aa892 100644
--- a/src/features/register-invite/index.tsx
+++ b/src/features/register-invite/index.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { BigCard } from 'soapbox/components/big-card';
-import RegistrationForm from 'soapbox/features/auth-login/components/registration-form';
-import { useInstance } from 'soapbox/hooks';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import RegistrationForm from 'soapbox/features/auth-login/components/registration-form.tsx';
+import { useInstance } from 'soapbox/hooks/index.ts';
 
 interface RegisterInviteParams {
   token: string;
diff --git a/src/features/remote-timeline/components/pinned-hosts-picker.tsx b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
index df877a3da..d336132ce 100644
--- a/src/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -1,5 +1,5 @@
-import { Button, HStack } from 'soapbox/components/ui';
-import { useSettings } from 'soapbox/hooks';
+import { Button, HStack } from 'soapbox/components/ui/index.ts';
+import { useSettings } from 'soapbox/hooks/index.ts';
 
 interface IPinnedHostsPicker {
   /** The active host among pinned hosts. */
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index 2e1e88f0b..4cf967ca9 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -3,16 +3,16 @@ import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { expandRemoteTimeline } from 'soapbox/actions/timelines';
-import { useRemoteStream } from 'soapbox/api/hooks';
-import IconButton from 'soapbox/components/icon-button';
-import { Column, HStack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandRemoteTimeline } from 'soapbox/actions/timelines.ts';
+import { useRemoteStream } from 'soapbox/api/hooks/index.ts';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import { Column, HStack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
-import PinnedHostsPicker from './components/pinned-hosts-picker';
+import PinnedHostsPicker from './components/pinned-hosts-picker.tsx';
 
 interface IRemoteTimeline {
   params?: {
diff --git a/src/features/reply-mentions/account.tsx b/src/features/reply-mentions/account.tsx
index a72451068..953c68a9d 100644
--- a/src/features/reply-mentions/account.tsx
+++ b/src/features/reply-mentions/account.tsx
@@ -3,13 +3,13 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchAccount } from 'soapbox/actions/accounts';
-import { addToMentions, removeFromMentions } from 'soapbox/actions/compose';
-import { useAccount } from 'soapbox/api/hooks';
-import AccountComponent from 'soapbox/components/account';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { fetchAccount } from 'soapbox/actions/accounts.ts';
+import { addToMentions, removeFromMentions } from 'soapbox/actions/compose.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import AccountComponent from 'soapbox/components/account.tsx';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import { HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   remove: { id: 'reply_mentions.account.remove', defaultMessage: 'Remove from mentions' },
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index fa936d6bb..5064458c3 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -1,12 +1,12 @@
 import noop from 'lodash/noop';
 import { Suspense } from 'react';
 
-import { toggleStatusReport } from 'soapbox/actions/reports';
-import StatusContent from 'soapbox/components/status-content';
-import { Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { toggleStatusReport } from 'soapbox/actions/reports.ts';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import { Toggle } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
+import { MediaGallery, Video, Audio } from '../../ui/util/async-components.ts';
 
 interface IStatusCheckBox {
   id: string;
diff --git a/src/features/scheduled-statuses/builder.tsx b/src/features/scheduled-statuses/builder.tsx
index 95ab0d878..91ca2e742 100644
--- a/src/features/scheduled-statuses/builder.tsx
+++ b/src/features/scheduled-statuses/builder.tsx
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { normalizeStatus } from 'soapbox/normalizers/status';
-import { calculateStatus } from 'soapbox/reducers/statuses';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
+import { calculateStatus } from 'soapbox/reducers/statuses.ts';
 
-import type { ScheduledStatus } from 'soapbox/reducers/scheduled-statuses';
-import type { RootState } from 'soapbox/store';
+import type { ScheduledStatus } from 'soapbox/reducers/scheduled-statuses.ts';
+import type { RootState } from 'soapbox/store.ts';
 
 export const buildStatus = (state: RootState, scheduledStatus: ScheduledStatus) => {
   const me = state.me as string;
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index 226df40c5..efcde2db1 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -1,13 +1,13 @@
 import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { cancelScheduledStatus } from 'soapbox/actions/scheduled-statuses';
-import { getSettings } from 'soapbox/actions/settings';
-import { Button, HStack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { cancelScheduledStatus } from 'soapbox/actions/scheduled-statuses.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { Button, HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   cancel: { id: 'scheduled_status.cancel', defaultMessage: 'Cancel' },
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index d2f55159e..3fca855fa 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -1,18 +1,18 @@
 import clsx from 'clsx';
 
-import Account from 'soapbox/components/account';
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import StatusContent from 'soapbox/components/status-content';
-import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
-import { HStack, Stack } from 'soapbox/components/ui';
-import PollPreview from 'soapbox/features/ui/components/poll-preview';
-import { useAppSelector } from 'soapbox/hooks';
+import Account from 'soapbox/components/account.tsx';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
+import { HStack, Stack } from 'soapbox/components/ui/index.ts';
+import PollPreview from 'soapbox/features/ui/components/poll-preview.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import { buildStatus } from '../builder';
+import { buildStatus } from '../builder.tsx';
 
-import ScheduledStatusActionBar from './scheduled-status-action-bar';
+import ScheduledStatusActionBar from './scheduled-status-action-bar.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IScheduledStatus {
   statusId: string;
diff --git a/src/features/scheduled-statuses/index.tsx b/src/features/scheduled-statuses/index.tsx
index aeffd43a2..f0ecd2c50 100644
--- a/src/features/scheduled-statuses/index.tsx
+++ b/src/features/scheduled-statuses/index.tsx
@@ -2,12 +2,12 @@ import debounce from 'lodash/debounce';
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled-statuses';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled-statuses.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import ScheduledStatus from './components/scheduled-status';
+import ScheduledStatus from './components/scheduled-status.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.scheduled_statuses', defaultMessage: 'Scheduled Posts' },
diff --git a/src/features/search/index.tsx b/src/features/search/index.tsx
index 2febda8df..4b6107355 100644
--- a/src/features/search/index.tsx
+++ b/src/features/search/index.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui';
-import Search from 'soapbox/features/compose/components/search';
-import SearchResults from 'soapbox/features/compose/components/search-results';
-import { useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { Column } from 'soapbox/components/ui/index.ts';
+import SearchResults from 'soapbox/features/compose/components/search-results.tsx';
+import Search from 'soapbox/features/compose/components/search.tsx';
+import { useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.search', defaultMessage: 'Discover' },
diff --git a/src/features/security/mfa-form.tsx b/src/features/security/mfa-form.tsx
index 7cde12f30..e359cfdfa 100644
--- a/src/features/security/mfa-form.tsx
+++ b/src/features/security/mfa-form.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { fetchMfa } from 'soapbox/actions/mfa';
-import { Column, Stack } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchMfa } from 'soapbox/actions/mfa.ts';
+import { Column, Stack } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import DisableOtpForm from './mfa/disable-otp-form';
-import EnableOtpForm from './mfa/enable-otp-form';
-import OtpConfirmForm from './mfa/otp-confirm-form';
+import DisableOtpForm from './mfa/disable-otp-form.tsx';
+import EnableOtpForm from './mfa/enable-otp-form.tsx';
+import OtpConfirmForm from './mfa/otp-confirm-form.tsx';
 
 /*
 Security settings page for user account
diff --git a/src/features/security/mfa/disable-otp-form.tsx b/src/features/security/mfa/disable-otp-form.tsx
index 2dc2bae41..af5bb1c4d 100644
--- a/src/features/security/mfa/disable-otp-form.tsx
+++ b/src/features/security/mfa/disable-otp-form.tsx
@@ -2,10 +2,10 @@ import { useState, useCallback } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { disableMfa } from 'soapbox/actions/mfa';
-import { Button, Form, FormGroup, Input, FormActions, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { disableMfa } from 'soapbox/actions/mfa.ts';
+import { Button, Form, FormGroup, Input, FormActions, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   mfa_setup_disable_button: { id: 'column.mfa_disable_button', defaultMessage: 'Disable' },
diff --git a/src/features/security/mfa/enable-otp-form.tsx b/src/features/security/mfa/enable-otp-form.tsx
index bbfa51953..f143b9460 100644
--- a/src/features/security/mfa/enable-otp-form.tsx
+++ b/src/features/security/mfa/enable-otp-form.tsx
@@ -2,10 +2,10 @@ import { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchBackupCodes } from 'soapbox/actions/mfa';
-import { Button, FormActions, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { fetchBackupCodes } from 'soapbox/actions/mfa.ts';
+import { Button, FormActions, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   mfaCancelButton: { id: 'column.mfa_cancel', defaultMessage: 'Cancel' },
diff --git a/src/features/security/mfa/otp-confirm-form.tsx b/src/features/security/mfa/otp-confirm-form.tsx
index 1ef86aa5f..e18e2771f 100644
--- a/src/features/security/mfa/otp-confirm-form.tsx
+++ b/src/features/security/mfa/otp-confirm-form.tsx
@@ -6,10 +6,10 @@ import { useHistory } from 'react-router-dom';
 import {
   setupMfa,
   confirmMfa,
-} from 'soapbox/actions/mfa';
-import { Button, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+} from 'soapbox/actions/mfa.ts';
+import { Button, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   mfaCancelButton: { id: 'column.mfa_cancel', defaultMessage: 'Cancel' },
diff --git a/src/features/server-info/index.tsx b/src/features/server-info/index.tsx
index 4dcb2abc1..8b47e5b96 100644
--- a/src/features/server-info/index.tsx
+++ b/src/features/server-info/index.tsx
@@ -1,10 +1,10 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column, Divider, Stack, Text } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import { Column, Divider, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useInstance } from 'soapbox/hooks/index.ts';
 
-import LinkFooter from '../ui/components/link-footer';
-import PromoPanel from '../ui/components/promo-panel';
+import LinkFooter from '../ui/components/link-footer.tsx';
+import PromoPanel from '../ui/components/promo-panel.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.info', defaultMessage: 'Server information' },
diff --git a/src/features/settings/components/messages-settings.tsx b/src/features/settings/components/messages-settings.tsx
index e504e0a23..4a788cb28 100644
--- a/src/features/settings/components/messages-settings.tsx
+++ b/src/features/settings/components/messages-settings.tsx
@@ -1,9 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import List, { ListItem } from 'soapbox/components/list';
-import { Toggle } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
-import { useUpdateCredentials } from 'soapbox/queries/accounts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Toggle } from 'soapbox/components/ui/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 const messages = defineMessages({
   label: { id: 'settings.messages.label', defaultMessage: 'Allow users to start a new chat with you' },
diff --git a/src/features/settings/index.tsx b/src/features/settings/index.tsx
index 6aac5b92a..0afae038f 100644
--- a/src/features/settings/index.tsx
+++ b/src/features/settings/index.tsx
@@ -1,16 +1,16 @@
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchMfa } from 'soapbox/actions/mfa';
-import CopyableInput from 'soapbox/components/copyable-input';
-import List, { ListItem } from 'soapbox/components/list';
-import { Card, CardBody, CardHeader, CardTitle, Column, Counter, FormGroup, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount } from 'soapbox/hooks';
-import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
+import { fetchMfa } from 'soapbox/actions/mfa.ts';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Card, CardBody, CardHeader, CardTitle, Column, Counter, FormGroup, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
-import Preferences from '../preferences';
+import Preferences from '../preferences/index.tsx';
 
-import MessagesSettings from './components/messages-settings';
+import MessagesSettings from './components/messages-settings.tsx';
 
 const messages = defineMessages({
   accountAliases: { id: 'navigation_bar.account_aliases', defaultMessage: 'Account aliases' },
diff --git a/src/features/share/index.tsx b/src/features/share/index.tsx
index 0b91f1cc8..a5e1a3d0f 100644
--- a/src/features/share/index.tsx
+++ b/src/features/share/index.tsx
@@ -1,7 +1,7 @@
 import { Redirect, useLocation } from 'react-router-dom';
 
-import { openComposeWithText } from 'soapbox/actions/compose';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openComposeWithText } from 'soapbox/actions/compose.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const Share = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/soapbox-config/components/color-picker.tsx b/src/features/soapbox-config/components/color-picker.tsx
index 418b877dc..2951ebcbb 100644
--- a/src/features/soapbox-config/components/color-picker.tsx
+++ b/src/features/soapbox-config/components/color-picker.tsx
@@ -2,7 +2,7 @@ import { supportsPassiveEvents } from 'detect-passive-events';
 import { useEffect, useRef } from 'react';
 import { SketchPicker, ColorChangeHandler } from 'react-color';
 
-import { isMobile } from 'soapbox/is-mobile';
+import { isMobile } from 'soapbox/is-mobile.ts';
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
diff --git a/src/features/soapbox-config/components/color-with-picker.tsx b/src/features/soapbox-config/components/color-with-picker.tsx
index 35b1564e2..08ce2747e 100644
--- a/src/features/soapbox-config/components/color-with-picker.tsx
+++ b/src/features/soapbox-config/components/color-with-picker.tsx
@@ -2,9 +2,9 @@ import { useState, useRef } from 'react';
 // @ts-ignore: TODO: upgrade react-overlays. v3.1 and above have TS definitions
 import Overlay from 'react-overlays/lib/Overlay';
 
-import { isMobile } from 'soapbox/is-mobile';
+import { isMobile } from 'soapbox/is-mobile.ts';
 
-import ColorPicker from './color-picker';
+import ColorPicker from './color-picker.tsx';
 
 import type { ColorChangeHandler } from 'react-color';
 
diff --git a/src/features/soapbox-config/components/crypto-address-input.tsx b/src/features/soapbox-config/components/crypto-address-input.tsx
index 680e1f8bd..fafd0f358 100644
--- a/src/features/soapbox-config/components/crypto-address-input.tsx
+++ b/src/features/soapbox-config/components/crypto-address-input.tsx
@@ -1,9 +1,9 @@
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui';
+import { HStack, Input } from 'soapbox/components/ui/index.ts';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import type { CryptoAddress } from 'soapbox/types/soapbox';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { CryptoAddress } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
   ticker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
diff --git a/src/features/soapbox-config/components/footer-link-input.tsx b/src/features/soapbox-config/components/footer-link-input.tsx
index 2f06728b3..2723f76d6 100644
--- a/src/features/soapbox-config/components/footer-link-input.tsx
+++ b/src/features/soapbox-config/components/footer-link-input.tsx
@@ -1,9 +1,9 @@
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui';
+import { HStack, Input } from 'soapbox/components/ui/index.ts';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import type { FooterItem } from 'soapbox/types/soapbox';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { FooterItem } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
   label: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
diff --git a/src/features/soapbox-config/components/icon-picker-dropdown.tsx b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
index 0b4a1800d..8949d364a 100644
--- a/src/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
@@ -3,11 +3,11 @@ import { defineMessages, useIntl } from 'react-intl';
 // @ts-ignore
 import Overlay from 'react-overlays/lib/Overlay';
 
-import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
+import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon.tsx';
 
 import forkAwesomeIcons from '../forkawesome.json';
 
-import IconPickerMenu from './icon-picker-menu';
+import IconPickerMenu from './icon-picker-menu.tsx';
 
 const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
diff --git a/src/features/soapbox-config/components/icon-picker-menu.tsx b/src/features/soapbox-config/components/icon-picker-menu.tsx
index a8078adb7..db2d5f37f 100644
--- a/src/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/src/features/soapbox-config/components/icon-picker-menu.tsx
@@ -3,7 +3,7 @@ import { supportsPassiveEvents } from 'detect-passive-events';
 import { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Text } from 'soapbox/components/ui';
+import { Text } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
diff --git a/src/features/soapbox-config/components/icon-picker.tsx b/src/features/soapbox-config/components/icon-picker.tsx
index f8ebdbb26..844f3e1c4 100644
--- a/src/features/soapbox-config/components/icon-picker.tsx
+++ b/src/features/soapbox-config/components/icon-picker.tsx
@@ -1,4 +1,4 @@
-import IconPickerDropdown from './icon-picker-dropdown';
+import IconPickerDropdown from './icon-picker-dropdown.tsx';
 
 interface IIconPicker {
   value: string;
diff --git a/src/features/soapbox-config/components/promo-panel-input.tsx b/src/features/soapbox-config/components/promo-panel-input.tsx
index 2f60cf28a..20aab5e7d 100644
--- a/src/features/soapbox-config/components/promo-panel-input.tsx
+++ b/src/features/soapbox-config/components/promo-panel-input.tsx
@@ -1,11 +1,11 @@
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui';
+import { HStack, Input } from 'soapbox/components/ui/index.ts';
 
-import IconPicker from './icon-picker';
+import IconPicker from './icon-picker.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import type { PromoPanelItem } from 'soapbox/types/soapbox';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { PromoPanelItem } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
   icon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
diff --git a/src/features/soapbox-config/components/site-preview.tsx b/src/features/soapbox-config/components/site-preview.tsx
index 73e29b99b..5ea6c7ef6 100644
--- a/src/features/soapbox-config/components/site-preview.tsx
+++ b/src/features/soapbox-config/components/site-preview.tsx
@@ -2,12 +2,12 @@ import clsx from 'clsx';
 import { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { defaultSettings } from 'soapbox/actions/settings';
-import SiteLogo from 'soapbox/components/site-logo';
-import BackgroundShapes from 'soapbox/features/ui/components/background-shapes';
-import { useSystemTheme } from 'soapbox/hooks';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import { generateThemeCss } from 'soapbox/utils/theme';
+import { defaultSettings } from 'soapbox/actions/settings.ts';
+import SiteLogo from 'soapbox/components/site-logo.tsx';
+import BackgroundShapes from 'soapbox/features/ui/components/background-shapes.tsx';
+import { useSystemTheme } from 'soapbox/hooks/index.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import { generateThemeCss } from 'soapbox/utils/theme.ts';
 
 interface ISitePreview {
   /** Raw Soapbox configuration. */
diff --git a/src/features/soapbox-config/index.tsx b/src/features/soapbox-config/index.tsx
index 1650ec68b..2abb04edf 100644
--- a/src/features/soapbox-config/index.tsx
+++ b/src/features/soapbox-config/index.tsx
@@ -2,9 +2,9 @@ import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import { useState, useEffect, useMemo } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { updateSoapboxConfig } from 'soapbox/actions/admin';
-import { uploadMedia } from 'soapbox/actions/media';
-import List, { ListItem } from 'soapbox/components/list';
+import { updateSoapboxConfig } from 'soapbox/actions/admin.ts';
+import { uploadMedia } from 'soapbox/actions/media.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
 import {
   Accordion,
   Button,
@@ -19,16 +19,16 @@ import {
   Streamfield,
   Textarea,
   Toggle,
-} from 'soapbox/components/ui';
-import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
-import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
+} from 'soapbox/components/ui/index.ts';
+import ThemeSelector from 'soapbox/features/ui/components/theme-selector.tsx';
+import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import CryptoAddressInput from './components/crypto-address-input';
-import FooterLinkInput from './components/footer-link-input';
-import PromoPanelInput from './components/promo-panel-input';
-import SitePreview from './components/site-preview';
+import CryptoAddressInput from './components/crypto-address-input.tsx';
+import FooterLinkInput from './components/footer-link-input.tsx';
+import PromoPanelInput from './components/promo-panel-input.tsx';
+import SitePreview from './components/site-preview.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 7ef1fdcf6..ad19fb145 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -5,20 +5,20 @@ import { useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import Account from 'soapbox/components/account';
-import StatusContent from 'soapbox/components/status-content';
-import StatusMedia from 'soapbox/components/status-media';
-import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
-import SensitiveContentOverlay from 'soapbox/components/statuses/sensitive-content-overlay';
-import StatusInfo from 'soapbox/components/statuses/status-info';
-import TranslateButton from 'soapbox/components/translate-button';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
-import { getActualStatus } from 'soapbox/utils/status';
+import Account from 'soapbox/components/account.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusMedia from 'soapbox/components/status-media.tsx';
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
+import SensitiveContentOverlay from 'soapbox/components/statuses/sensitive-content-overlay.tsx';
+import StatusInfo from 'soapbox/components/statuses/status-info.tsx';
+import TranslateButton from 'soapbox/components/translate-button.tsx';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { getActualStatus } from 'soapbox/utils/status.ts';
 
-import StatusInteractionBar from './status-interaction-bar';
+import StatusInteractionBar from './status-interaction-bar.tsx';
 
-import type { Group, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Group, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IDetailedStatus {
   status: StatusEntity;
diff --git a/src/features/status/components/status-interaction-bar.tsx b/src/features/status/components/status-interaction-bar.tsx
index 5811cffff..8be110c54 100644
--- a/src/features/status/components/status-interaction-bar.tsx
+++ b/src/features/status/components/status-interaction-bar.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx';import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { HStack, Text, Emoji } from 'soapbox/components/ui';
-import { useAppSelector, useSoapboxConfig, useFeatures, useAppDispatch } from 'soapbox/hooks';
-import { reduceEmoji } from 'soapbox/utils/emoji-reacts';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { HStack, Text, Emoji } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useSoapboxConfig, useFeatures, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { reduceEmoji } from 'soapbox/utils/emoji-reacts.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 interface IStatusInteractionBar {
   status: Status;
diff --git a/src/features/status/components/thread-login-cta.tsx b/src/features/status/components/thread-login-cta.tsx
index f6413030c..352be4f54 100644
--- a/src/features/status/components/thread-login-cta.tsx
+++ b/src/features/status/components/thread-login-cta.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardTitle, Text, Stack, Button } from 'soapbox/components/ui';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import { Card, CardTitle, Text, Stack, Button } from 'soapbox/components/ui/index.ts';
+import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 /** Prompts logged-out users to log in when viewing a thread. */
 const ThreadLoginCta: React.FC = () => {
diff --git a/src/features/status/components/thread-status.tsx b/src/features/status/components/thread-status.tsx
index 350d60176..3b49a6850 100644
--- a/src/features/status/components/thread-status.tsx
+++ b/src/features/status/components/thread-status.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
-import StatusContainer from 'soapbox/containers/status-container';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppSelector } from 'soapbox/hooks';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 interface IThreadStatus {
   id: string;
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index 4af75af80..1f9c25862 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -6,25 +6,25 @@ import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { type VirtuosoHandle } from 'react-virtuoso';
 
-import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
-import { favourite, reblog, unfavourite, unreblog } from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { getSettings } from 'soapbox/actions/settings';
-import { hideStatus, revealStatus } from 'soapbox/actions/statuses';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import StatusActionBar from 'soapbox/components/status-action-bar';
-import Tombstone from 'soapbox/components/tombstone';
-import { Stack } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
-import PendingStatus from 'soapbox/features/ui/components/pending-status';
-import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
-import { RootState } from 'soapbox/store';
-import { type Account, type Status } from 'soapbox/types/entities';
-import { defaultMediaVisibility, textForScreenReader } from 'soapbox/utils/status';
+import { mentionCompose, replyCompose } from 'soapbox/actions/compose.ts';
+import { favourite, reblog, unfavourite, unreblog } from 'soapbox/actions/interactions.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { hideStatus, revealStatus } from 'soapbox/actions/statuses.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import StatusActionBar from 'soapbox/components/status-action-bar.tsx';
+import Tombstone from 'soapbox/components/tombstone.tsx';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
+import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
+import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks/index.ts';
+import { RootState } from 'soapbox/store.ts';
+import { type Account, type Status } from 'soapbox/types/entities.ts';
+import { defaultMediaVisibility, textForScreenReader } from 'soapbox/utils/status.ts';
 
-import DetailedStatus from './detailed-status';
-import ThreadStatus from './thread-status';
+import DetailedStatus from './detailed-status.tsx';
+import ThreadStatus from './thread-status.tsx';
 
 const getAncestorsIds = createSelector([
   (_: RootState, statusId: string | undefined) => statusId,
diff --git a/src/features/status/containers/quoted-status-container.tsx b/src/features/status/containers/quoted-status-container.tsx
index e57b19df5..2ed95f78c 100644
--- a/src/features/status/containers/quoted-status-container.tsx
+++ b/src/features/status/containers/quoted-status-container.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 
-import QuotedStatus from 'soapbox/components/quoted-status';
-import Tombstone from 'soapbox/components/tombstone';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import QuotedStatus from 'soapbox/components/quoted-status.tsx';
+import Tombstone from 'soapbox/components/tombstone.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusContainer {
   /** Status ID to the quoted status. */
diff --git a/src/features/status/index.tsx b/src/features/status/index.tsx
index 1f07639dc..0d664e456 100644
--- a/src/features/status/index.tsx
+++ b/src/features/status/index.tsx
@@ -6,16 +6,16 @@ import { Redirect } from 'react-router-dom';
 import {
   fetchStatusWithContext,
   fetchNext,
-} from 'soapbox/actions/statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column, Stack } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppDispatch, useAppSelector, useLoggedIn } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+} from 'soapbox/actions/statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Column, Stack } from 'soapbox/components/ui/index.ts';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import { useAppDispatch, useAppSelector, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import Thread from './components/thread';
-import ThreadLoginCta from './components/thread-login-cta';
+import ThreadLoginCta from './components/thread-login-cta.tsx';
+import Thread from './components/thread.tsx';
 
 const messages = defineMessages({
   title: { id: 'status.title', defaultMessage: 'Post Details' },
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index a321e379e..f56751595 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -7,13 +7,12 @@ import status4 from 'soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.j
 import status2 from 'soapbox/__fixtures__/pleroma-status-with-poll.json';
 import status1 from 'soapbox/__fixtures__/pleroma-status.json';
 import status6 from 'soapbox/__fixtures__/truthsocial-status-in-moderation.json';
-import { importFetchedStatuses } from 'soapbox/actions/importer';
-import { expandTimelineSuccess } from 'soapbox/actions/timelines';
-import { useAppDispatch, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-
-import { Column } from '../../components/ui';
-import Timeline from '../ui/components/timeline';
+import { importFetchedStatuses } from 'soapbox/actions/importer/index.ts';
+import { expandTimelineSuccess } from 'soapbox/actions/timelines.ts';
+import { Column } from 'soapbox/components/ui/index.ts';
+import Timeline from 'soapbox/features/ui/components/timeline.tsx';
+import { useAppDispatch, useTheme } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
 const messages = defineMessages({
   title: { id: 'column.test', defaultMessage: 'Test timeline' },
diff --git a/src/features/theme-editor/components/color.tsx b/src/features/theme-editor/components/color.tsx
index 0254adf31..04099e2e7 100644
--- a/src/features/theme-editor/components/color.tsx
+++ b/src/features/theme-editor/components/color.tsx
@@ -1,4 +1,4 @@
-import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker';
+import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker.tsx';
 
 import type { ColorChangeHandler } from 'react-color';
 
diff --git a/src/features/theme-editor/components/palette.tsx b/src/features/theme-editor/components/palette.tsx
index 82cf1ac70..5033f621e 100644
--- a/src/features/theme-editor/components/palette.tsx
+++ b/src/features/theme-editor/components/palette.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
-import { HStack, Stack, Slider } from 'soapbox/components/ui';
-import { usePrevious } from 'soapbox/hooks';
-import { compareId } from 'soapbox/utils/comparators';
-import { hueShift } from 'soapbox/utils/theme';
+import { HStack, Stack, Slider } from 'soapbox/components/ui/index.ts';
+import { usePrevious } from 'soapbox/hooks/index.ts';
+import { compareId } from 'soapbox/utils/comparators.ts';
+import { hueShift } from 'soapbox/utils/theme.ts';
 
-import Color from './color';
+import Color from './color.tsx';
 
 interface ColorGroup {
   [tint: string]: string;
diff --git a/src/features/theme-editor/index.tsx b/src/features/theme-editor/index.tsx
index bb534f109..32f0ca536 100644
--- a/src/features/theme-editor/index.tsx
+++ b/src/features/theme-editor/index.tsx
@@ -4,19 +4,19 @@ import uploadIcon from '@tabler/icons/outline/upload.svg';
 import { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { updateSoapboxConfig } from 'soapbox/actions/admin';
-import { getHost } from 'soapbox/actions/instance';
-import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, Column, Form, FormActions } from 'soapbox/components/ui';
-import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker';
-import { useAppDispatch, useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
-import { download } from 'soapbox/utils/download';
+import { updateSoapboxConfig } from 'soapbox/actions/admin.ts';
+import { getHost } from 'soapbox/actions/instance.ts';
+import { fetchSoapboxConfig } from 'soapbox/actions/soapbox.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Button, Column, Form, FormActions } from 'soapbox/components/ui/index.ts';
+import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker.tsx';
+import { useAppDispatch, useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { download } from 'soapbox/utils/download.ts';
 
-import Palette, { ColorGroup } from './components/palette';
+import Palette, { ColorGroup } from './components/palette.tsx';
 
 import type { ColorChangeHandler } from 'react-color';
 
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index dcceb57db..387d6fe3a 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -9,13 +9,13 @@ import {
   unmuteAccount,
   authorizeFollowRequest,
   rejectFollowRequest,
-} from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import { useFollow } from 'soapbox/api/hooks';
-import { Button, HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures, useLoggedIn } from 'soapbox/hooks';
+} from 'soapbox/actions/accounts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useFollow } from 'soapbox/api/hooks/index.ts';
+import { Button, HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useFeatures, useLoggedIn } from 'soapbox/hooks/index.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
diff --git a/src/features/ui/components/column-forbidden.tsx b/src/features/ui/components/column-forbidden.tsx
index b3b9a8fb4..2cd5005c9 100644
--- a/src/features/ui/components/column-forbidden.tsx
+++ b/src/features/ui/components/column-forbidden.tsx
@@ -1,6 +1,6 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui';
+import { Column } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' },
diff --git a/src/features/ui/components/column-loading.tsx b/src/features/ui/components/column-loading.tsx
index b521c4b8a..5b98269cb 100644
--- a/src/features/ui/components/column-loading.tsx
+++ b/src/features/ui/components/column-loading.tsx
@@ -1,4 +1,4 @@
-import { Card, CardBody, Spinner } from 'soapbox/components/ui';
+import { Card, CardBody, Spinner } from 'soapbox/components/ui/index.ts';
 
 const ColumnLoading = () => (
   <Card variant='rounded'>
diff --git a/src/features/ui/components/columns-area.tsx b/src/features/ui/components/columns-area.tsx
index 130ba5541..768884ff2 100644
--- a/src/features/ui/components/columns-area.tsx
+++ b/src/features/ui/components/columns-area.tsx
@@ -1,4 +1,4 @@
-import { Layout } from '../../../components/ui';
+import { Layout } from 'soapbox/components/ui/index.ts';
 
 interface IColumnsArea {
   layout: any;
diff --git a/src/features/ui/components/compose-button.test.tsx b/src/features/ui/components/compose-button.test.tsx
index 6bc1404b9..2ee4fa827 100644
--- a/src/features/ui/components/compose-button.test.tsx
+++ b/src/features/ui/components/compose-button.test.tsx
@@ -4,10 +4,10 @@ import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 
-import { MODAL_CLOSE, MODAL_OPEN } from 'soapbox/actions/modals';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
+import { MODAL_CLOSE, MODAL_OPEN } from 'soapbox/actions/modals.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
 
-import ComposeButton from './compose-button';
+import ComposeButton from './compose-button.tsx';
 
 const store = mockStore(rootState);
 const renderComposeButton = () => {
diff --git a/src/features/ui/components/compose-button.tsx b/src/features/ui/components/compose-button.tsx
index 97e0865ed..a05d80470 100644
--- a/src/features/ui/components/compose-button.tsx
+++ b/src/features/ui/components/compose-button.tsx
@@ -1,11 +1,11 @@
 import { FormattedMessage } from 'react-intl';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 
-import { groupComposeModal } from 'soapbox/actions/compose';
-import { openModal } from 'soapbox/actions/modals';
-import { useGroupLookup } from 'soapbox/api/hooks';
-import { Avatar, Button, HStack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { groupComposeModal } from 'soapbox/actions/compose.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useGroupLookup } from 'soapbox/api/hooks/index.ts';
+import { Avatar, Button, HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const ComposeButton = () => {
   const location = useLocation();
diff --git a/src/features/ui/components/cta-banner.test.tsx b/src/features/ui/components/cta-banner.test.tsx
index b528c64bb..5d5c4851f 100644
--- a/src/features/ui/components/cta-banner.test.tsx
+++ b/src/features/ui/components/cta-banner.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { storeClosed, storeLoggedIn, storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeClosed, storeLoggedIn, storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import CtaBanner from './cta-banner';
+import CtaBanner from './cta-banner.tsx';
 
 describe('<CtaBanner />', () => {
   it('renders the banner', () => {
diff --git a/src/features/ui/components/cta-banner.tsx b/src/features/ui/components/cta-banner.tsx
index 050390bdd..36914fcd5 100644
--- a/src/features/ui/components/cta-banner.tsx
+++ b/src/features/ui/components/cta-banner.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useInstance, useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks';
+import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useInstance, useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const CtaBanner = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/error-column.tsx b/src/features/ui/components/error-column.tsx
index de3abdad8..4082eaee4 100644
--- a/src/features/ui/components/error-column.tsx
+++ b/src/features/ui/components/error-column.tsx
@@ -1,8 +1,8 @@
 import refreshIcon from '@tabler/icons/outline/refresh.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column, Stack, Text, IconButton } from 'soapbox/components/ui';
-import { isNetworkError } from 'soapbox/utils/errors';
+import { Column, Stack, Text, IconButton } from 'soapbox/components/ui/index.ts';
+import { isNetworkError } from 'soapbox/utils/errors.ts';
 
 const messages = defineMessages({
   title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
diff --git a/src/features/ui/components/floating-action-button.tsx b/src/features/ui/components/floating-action-button.tsx
index 0c0236029..6703c2590 100644
--- a/src/features/ui/components/floating-action-button.tsx
+++ b/src/features/ui/components/floating-action-button.tsx
@@ -3,11 +3,11 @@ import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 
-import { groupComposeModal } from 'soapbox/actions/compose';
-import { openModal } from 'soapbox/actions/modals';
-import { useGroupLookup } from 'soapbox/api/hooks';
-import { Avatar, HStack, Icon } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { groupComposeModal } from 'soapbox/actions/compose.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useGroupLookup } from 'soapbox/api/hooks/index.ts';
+import { Avatar, HStack, Icon } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
diff --git a/src/features/ui/components/funding-panel.tsx b/src/features/ui/components/funding-panel.tsx
index f86e5bde1..b507d966b 100644
--- a/src/features/ui/components/funding-panel.tsx
+++ b/src/features/ui/components/funding-panel.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchPatronInstance } from 'soapbox/actions/patron';
-import { Widget, Button, ProgressBar, Text, Stack } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchPatronInstance } from 'soapbox/actions/patron.ts';
+import { Widget, Button, ProgressBar, Text, Stack } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 /** Open link in a new tab. */
 // https://stackoverflow.com/a/28374344/8811886
diff --git a/src/features/ui/components/group-media-panel.tsx b/src/features/ui/components/group-media-panel.tsx
index deb3ff91b..697c657e8 100644
--- a/src/features/ui/components/group-media-panel.tsx
+++ b/src/features/ui/components/group-media-panel.tsx
@@ -2,15 +2,15 @@ import { List as ImmutableList } from 'immutable';
 import { useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { expandGroupMediaTimeline } from 'soapbox/actions/timelines';
-import { Spinner, Text, Widget } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { getGroupGallery } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { expandGroupMediaTimeline } from 'soapbox/actions/timelines.ts';
+import { Spinner, Text, Widget } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { getGroupGallery } from 'soapbox/selectors/index.ts';
 
-import MediaItem from '../../account-gallery/components/media-item';
+import MediaItem from '../../account-gallery/components/media-item.tsx';
 
-import type { Attachment, Group } from 'soapbox/types/entities';
+import type { Attachment, Group } from 'soapbox/types/entities.ts';
 
 interface IGroupMediaPanel {
   group?: Group;
diff --git a/src/features/ui/components/image-loader.tsx b/src/features/ui/components/image-loader.tsx
index ef689a134..1426dc3d0 100644
--- a/src/features/ui/components/image-loader.tsx
+++ b/src/features/ui/components/image-loader.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { PureComponent } from 'react';
 
-import ZoomableImage from './zoomable-image';
+import ZoomableImage from './zoomable-image.tsx';
 
 type EventRemover = () => void;
 
diff --git a/src/features/ui/components/instance-info-panel.tsx b/src/features/ui/components/instance-info-panel.tsx
index ea8825d81..a0af3e959 100644
--- a/src/features/ui/components/instance-info-panel.tsx
+++ b/src/features/ui/components/instance-info-panel.tsx
@@ -2,10 +2,10 @@ import pinIcon from '@tabler/icons/outline/pin.svg';
 import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { pinHost, unpinHost } from 'soapbox/actions/remote-timeline';
-import { Widget } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
+import { pinHost, unpinHost } from 'soapbox/actions/remote-timeline.ts';
+import { Widget } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
diff --git a/src/features/ui/components/instance-moderation-panel.tsx b/src/features/ui/components/instance-moderation-panel.tsx
index d49d77dc4..5e5bca2fc 100644
--- a/src/features/ui/components/instance-moderation-panel.tsx
+++ b/src/features/ui/components/instance-moderation-panel.tsx
@@ -2,12 +2,12 @@ import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import editIcon from '@tabler/icons/outline/edit.svg';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import { Widget } from 'soapbox/components/ui';
-import InstanceRestrictions from 'soapbox/features/federation-restrictions/components/instance-restrictions';
-import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modals.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import { Widget } from 'soapbox/components/ui/index.ts';
+import InstanceRestrictions from 'soapbox/features/federation-restrictions/components/instance-restrictions.tsx';
+import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
diff --git a/src/features/ui/components/link-footer.tsx b/src/features/ui/components/link-footer.tsx
index 15bf26e8f..28e9156a0 100644
--- a/src/features/ui/components/link-footer.tsx
+++ b/src/features/ui/components/link-footer.tsx
@@ -2,11 +2,11 @@ import clsx from 'clsx';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { logOut } from 'soapbox/actions/auth';
-import { Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji';
-import { useSoapboxConfig, useOwnAccount, useFeatures, useAppDispatch } from 'soapbox/hooks';
-import sourceCode from 'soapbox/utils/code';
+import { logOut } from 'soapbox/actions/auth.ts';
+import { Text } from 'soapbox/components/ui/index.ts';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { useSoapboxConfig, useOwnAccount, useFeatures, useAppDispatch } from 'soapbox/hooks/index.ts';
+import sourceCode from 'soapbox/utils/code.ts';
 
 interface IFooterLink {
   to: string;
diff --git a/src/features/ui/components/modal-loading.tsx b/src/features/ui/components/modal-loading.tsx
index 8308a2b4f..70de31f7d 100644
--- a/src/features/ui/components/modal-loading.tsx
+++ b/src/features/ui/components/modal-loading.tsx
@@ -1,4 +1,4 @@
-import { Modal, Spinner } from 'soapbox/components/ui';
+import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
 
 const ModalLoading = () => (
   <Modal>
diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index cadc90cff..5eff12842 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/src/features/ui/components/modal-root.tsx
@@ -1,6 +1,6 @@
 import { PureComponent, Suspense } from 'react';
 
-import Base from 'soapbox/components/modal-root';
+import Base from 'soapbox/components/modal-root.tsx';
 import {
   AccountModerationModal,
   ActionsModal,
@@ -47,9 +47,9 @@ import {
   ZapInvoiceModal,
   ZapsModal,
   CaptchaModal,
-} from 'soapbox/features/ui/util/async-components';
+} from 'soapbox/features/ui/util/async-components.ts';
 
-import ModalLoading from './modal-loading';
+import ModalLoading from './modal-loading.tsx';
 
 /* eslint sort-keys: "error" */
 const MODAL_COMPONENTS: Record<string, React.ExoticComponent<any>> = {
diff --git a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index 98e7337ff..e2f89d34d 100644
--- a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -2,21 +2,21 @@ import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { ChangeEventHandler, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { revokeName, setBadges as saveBadges } from 'soapbox/actions/admin';
-import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
-import { useAccount } from 'soapbox/api/hooks';
-import { useSuggest, useVerify } from 'soapbox/api/hooks/admin';
-import Account from 'soapbox/components/account';
-import List, { ListItem } from 'soapbox/components/list';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import OutlineBox from 'soapbox/components/outline-box';
-import { Button, Text, HStack, Modal, Stack, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import { getBadges } from 'soapbox/utils/badges';
+import { revokeName, setBadges as saveBadges } from 'soapbox/actions/admin.ts';
+import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation.tsx';
+import { useSuggest, useVerify } from 'soapbox/api/hooks/admin/index.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import OutlineBox from 'soapbox/components/outline-box.tsx';
+import { Button, Text, HStack, Modal, Stack, Toggle } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { getBadges } from 'soapbox/utils/badges.ts';
 
-import BadgeInput from './badge-input';
-import StaffRolePicker from './staff-role-picker';
+import BadgeInput from './badge-input.tsx';
+import StaffRolePicker from './staff-role-picker.tsx';
 
 const messages = defineMessages({
   userVerified: { id: 'admin.users.user_verified_message', defaultMessage: '@{acct} was verified' },
diff --git a/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx b/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
index 4c6e9b5f4..de5347336 100644
--- a/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
@@ -1,7 +1,7 @@
 import { useIntl, defineMessages } from 'react-intl';
 
-import { TagInput } from 'soapbox/components/ui';
-import { badgeToTag, tagToBadge } from 'soapbox/utils/badges';
+import { TagInput } from 'soapbox/components/ui/index.ts';
+import { badgeToTag, tagToBadge } from 'soapbox/utils/badges.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'badge_input.placeholder', defaultMessage: 'Enter a badge…' },
diff --git a/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx b/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
index ce8792578..150fae4bf 100644
--- a/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import { defineMessages, MessageDescriptor, useIntl } from 'react-intl';
 
-import { setRole } from 'soapbox/actions/admin';
-import { SelectDropdown } from 'soapbox/features/forms';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { setRole } from 'soapbox/actions/admin.ts';
+import { SelectDropdown } from 'soapbox/features/forms/index.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 /** Staff role. */
 type AccountRole = 'user' | 'moderator' | 'admin';
diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index f908187d5..071cc03ce 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -2,14 +2,14 @@ import clsx from 'clsx';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
-import Icon from 'soapbox/components/icon';
-import { HStack } from 'soapbox/components/ui';
-import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator';
+import Icon from 'soapbox/components/icon.tsx';
+import { HStack } from 'soapbox/components/ui/index.ts';
+import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
 
-import Motion from '../../util/optional-motion';
+import Motion from '../../util/optional-motion.tsx';
 
-import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IActionsModal {
   status: StatusEntity;
diff --git a/src/features/ui/components/modals/birthdays-modal.tsx b/src/features/ui/components/modals/birthdays-modal.tsx
index 4ae9de257..b8891e9f3 100644
--- a/src/features/ui/components/modals/birthdays-modal.tsx
+++ b/src/features/ui/components/modals/birthdays-modal.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import Account from 'soapbox/features/birthdays/account';
-import { useAppSelector } from 'soapbox/hooks';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Account from 'soapbox/features/birthdays/account.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 interface IBirthdaysModal {
   onClose: (string: string) => void;
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index 031295fb3..88f5f791f 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -1,11 +1,11 @@
 import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { Modal, Stack, Text } from 'soapbox/components/ui';
-import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator';
+import Icon from 'soapbox/components/icon.tsx';
+import { Modal, Stack, Text } from 'soapbox/components/ui/index.ts';
+import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
diff --git a/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx b/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
index 32f5d280a..749c58824 100644
--- a/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
+++ b/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 
-import useCaptcha from 'soapbox/api/hooks/captcha/useCaptcha';
-import { Modal, Button, Spinner, Stack, Text } from 'soapbox/components/ui';
+import useCaptcha from 'soapbox/api/hooks/captcha/useCaptcha.ts';
+import { Modal, Button, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
 
-import { PuzzleCaptcha } from './components/puzzle';
+import { PuzzleCaptcha } from './components/puzzle.tsx';
 
 interface ICaptchaModal {
   onClose: (type?: string) => void;
diff --git a/src/features/ui/components/modals/compare-history-modal.tsx b/src/features/ui/components/modals/compare-history-modal.tsx
index 6b351f624..2f0a3b561 100644
--- a/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/src/features/ui/components/modals/compare-history-modal.tsx
@@ -3,12 +3,12 @@ import { List as ImmutableList } from 'immutable';
 import { useEffect } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
-import { fetchHistory } from 'soapbox/actions/history';
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import { HStack, Modal, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchHistory } from 'soapbox/actions/history.ts';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import { HStack, Modal, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities';
+import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities.ts';
 
 interface ICompareHistoryModal {
   onClose: (string: string) => void;
diff --git a/src/features/ui/components/modals/component-modal.tsx b/src/features/ui/components/modals/component-modal.tsx
index dbcb2423e..87f5aeea6 100644
--- a/src/features/ui/components/modals/component-modal.tsx
+++ b/src/features/ui/components/modals/component-modal.tsx
@@ -1,4 +1,4 @@
-import { Modal } from 'soapbox/components/ui';
+import { Modal } from 'soapbox/components/ui/index.ts';
 
 interface IComponentModal {
   onClose: (type?: string) => void;
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index a7da9c968..58816fa55 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -19,18 +19,18 @@ import {
   rejectEventParticipationRequest,
   authorizeEventParticipationRequest,
   cancelEventCompose,
-} from 'soapbox/actions/events';
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location';
-import LocationSearch from 'soapbox/components/location-search';
-import { checkEventComposeContent } from 'soapbox/components/modal-root';
-import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Toggle } from 'soapbox/components/ui';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime';
-import AccountContainer from 'soapbox/containers/account-container';
-import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+} from 'soapbox/actions/events.ts';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location.tsx';
+import LocationSearch from 'soapbox/components/location-search.tsx';
+import { checkEventComposeContent } from 'soapbox/components/modal-root.tsx';
+import { Datetime } from 'soapbox/components/ui/datetime/datetime.tsx';
+import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import UploadButton from './upload-button';
+import UploadButton from './upload-button.tsx';
 
 const messages = defineMessages({
   eventNamePlaceholder: { id: 'compose_event.fields.name_placeholder', defaultMessage: 'Name' },
diff --git a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index 6aefcf341..c8cb5f5d8 100644
--- a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -2,9 +2,9 @@ import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
 import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { HStack, Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import Icon from 'soapbox/components/icon.tsx';
+import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 interface IUploadButton {
   disabled?: boolean;
diff --git a/src/features/ui/components/modals/compose-modal.tsx b/src/features/ui/components/modals/compose-modal.tsx
index 52202d394..b6b42de07 100644
--- a/src/features/ui/components/modals/compose-modal.tsx
+++ b/src/features/ui/components/modals/compose-modal.tsx
@@ -3,14 +3,14 @@ import clsx from 'clsx';
 import { useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { cancelReplyCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose';
-import { openModal, closeModal } from 'soapbox/actions/modals';
-import { useGroup } from 'soapbox/api/hooks';
-import { checkComposeContent } from 'soapbox/components/modal-root';
-import { HStack, Modal, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles } from 'soapbox/hooks';
+import { cancelReplyCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose.ts';
+import { openModal, closeModal } from 'soapbox/actions/modals.ts';
+import { useGroup } from 'soapbox/api/hooks/index.ts';
+import { checkComposeContent } from 'soapbox/components/modal-root.tsx';
+import { HStack, Modal, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles } from 'soapbox/hooks/index.ts';
 
-import ComposeForm from '../../../compose/components/compose-form';
+import ComposeForm from '../../../compose/components/compose-form.tsx';
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.cancel.confirm', defaultMessage: 'Discard' },
diff --git a/src/features/ui/components/modals/confirmation-modal.tsx b/src/features/ui/components/modals/confirmation-modal.tsx
index ac4b0f93d..420060f99 100644
--- a/src/features/ui/components/modals/confirmation-modal.tsx
+++ b/src/features/ui/components/modals/confirmation-modal.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import List, { ListItem } from 'soapbox/components/list';
-import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
 
-import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles';
+import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles.tsx';
 
 interface IConfirmationModal {
   heading: React.ReactNode;
diff --git a/src/features/ui/components/modals/crypto-donate-modal.tsx b/src/features/ui/components/modals/crypto-donate-modal.tsx
index 413db184c..7958b227c 100644
--- a/src/features/ui/components/modals/crypto-donate-modal.tsx
+++ b/src/features/ui/components/modals/crypto-donate-modal.tsx
@@ -1,7 +1,7 @@
-import { Modal } from 'soapbox/components/ui';
-import DetailedCryptoAddress from 'soapbox/features/crypto-donate/components/detailed-crypto-address';
+import { Modal } from 'soapbox/components/ui/index.ts';
+import DetailedCryptoAddress from 'soapbox/features/crypto-donate/components/detailed-crypto-address.tsx';
 
-import type { ICryptoAddress } from '../../../crypto-donate/components/crypto-address';
+import type { ICryptoAddress } from '../../../crypto-donate/components/crypto-address.tsx';
 
 const CryptoDonateModal: React.FC<ICryptoAddress & { onClose: () => void }> = ({ onClose, ...props }) => {
 
diff --git a/src/features/ui/components/modals/dislikes-modal.tsx b/src/features/ui/components/modals/dislikes-modal.tsx
index 52778b131..ef0b24644 100644
--- a/src/features/ui/components/modals/dislikes-modal.tsx
+++ b/src/features/ui/components/modals/dislikes-modal.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchDislikes } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchDislikes } from 'soapbox/actions/interactions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 interface IDislikesModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/edit-announcement-modal.tsx b/src/features/ui/components/modals/edit-announcement-modal.tsx
index ebc4059e9..a96356281 100644
--- a/src/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/src/features/ui/components/modals/edit-announcement-modal.tsx
@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements';
-import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'soapbox/components/ui';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements.ts';
+import { Datetime } from 'soapbox/components/ui/datetime/datetime.tsx';
+import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { AdminAnnouncement } from 'soapbox/schemas';
+import type { AdminAnnouncement } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   save: { id: 'admin.edit_announcement.save', defaultMessage: 'Save' },
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index a01452bf0..9e4d75686 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -4,16 +4,16 @@ import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { useBookmarkFolder, useUpdateBookmarkFolder } from 'soapbox/api/hooks';
-import { Emoji, HStack, Icon, Input, Modal } from 'soapbox/components/ui';
-import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
-import { messages as emojiMessages } from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
-import { useAppDispatch, useClickOutside } from 'soapbox/hooks';
-import { useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { useBookmarkFolder, useUpdateBookmarkFolder } from 'soapbox/api/hooks/index.ts';
+import { Emoji, HStack, Icon, Input, Modal } from 'soapbox/components/ui/index.ts';
+import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import { messages as emojiMessages } from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
+import { useTextField } from 'soapbox/hooks/forms/index.ts';
+import { useAppDispatch, useClickOutside } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Emoji as EmojiType } from 'soapbox/features/emoji';
+import type { Emoji as EmojiType } from 'soapbox/features/emoji/index.ts';
 
 const messages = defineMessages({
   label: { id: 'bookmark_folders.new.title_placeholder', defaultMessage: 'New folder title' },
diff --git a/src/features/ui/components/modals/edit-domain-modal.tsx b/src/features/ui/components/modals/edit-domain-modal.tsx
index 15274987e..5db681285 100644
--- a/src/features/ui/components/modals/edit-domain-modal.tsx
+++ b/src/features/ui/components/modals/edit-domain-modal.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { useDomains } from 'soapbox/api/hooks/admin';
-import { Form, FormGroup, HStack, Input, Modal, Stack, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { Domain } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { useDomains } from 'soapbox/api/hooks/admin/index.ts';
+import { Form, FormGroup, HStack, Input, Modal, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { Domain } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   save: { id: 'admin.edit_domain.save', defaultMessage: 'Save' },
diff --git a/src/features/ui/components/modals/edit-federation-modal.tsx b/src/features/ui/components/modals/edit-federation-modal.tsx
index a3d535278..4109ded33 100644
--- a/src/features/ui/components/modals/edit-federation-modal.tsx
+++ b/src/features/ui/components/modals/edit-federation-modal.tsx
@@ -1,12 +1,12 @@
 import { useState, useEffect, useCallback } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { updateMrf } from 'soapbox/actions/mrf';
-import List, { ListItem } from 'soapbox/components/list';
-import { Modal, Toggle } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
+import { updateMrf } from 'soapbox/actions/mrf.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Modal, Toggle } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
diff --git a/src/features/ui/components/modals/edit-rule-modal.tsx b/src/features/ui/components/modals/edit-rule-modal.tsx
index 08e9dc051..c06f29a72 100644
--- a/src/features/ui/components/modals/edit-rule-modal.tsx
+++ b/src/features/ui/components/modals/edit-rule-modal.tsx
@@ -1,10 +1,10 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useRules } from 'soapbox/api/hooks/admin';
-import { Form, FormGroup, Input, Modal } from 'soapbox/components/ui';
-import { useTextField } from 'soapbox/hooks/forms';
-import { type AdminRule } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { useRules } from 'soapbox/api/hooks/admin/index.ts';
+import { Form, FormGroup, Input, Modal } from 'soapbox/components/ui/index.ts';
+import { useTextField } from 'soapbox/hooks/forms/index.ts';
+import { type AdminRule } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   save: { id: 'admin.edit_rule.save', defaultMessage: 'Save' },
diff --git a/src/features/ui/components/modals/embed-modal.tsx b/src/features/ui/components/modals/embed-modal.tsx
index c79d9d45c..4af30118b 100644
--- a/src/features/ui/components/modals/embed-modal.tsx
+++ b/src/features/ui/components/modals/embed-modal.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import CopyableInput from 'soapbox/components/copyable-input';
-import SafeEmbed from 'soapbox/components/safe-embed';
-import { Modal, Stack, Text, Divider } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import useEmbed from 'soapbox/queries/embed';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import SafeEmbed from 'soapbox/components/safe-embed.tsx';
+import { Modal, Stack, Text, Divider } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import useEmbed from 'soapbox/queries/embed.ts';
 
 interface IEmbedModal {
   url: string;
diff --git a/src/features/ui/components/modals/event-map-modal.tsx b/src/features/ui/components/modals/event-map-modal.tsx
index d1f114192..3a441f867 100644
--- a/src/features/ui/components/modals/event-map-modal.tsx
+++ b/src/features/ui/components/modals/event-map-modal.tsx
@@ -6,11 +6,11 @@ import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 import { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Modal, Stack } from 'soapbox/components/ui';
-import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { Button, Modal, Stack } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 import 'leaflet/dist/leaflet.css';
 
diff --git a/src/features/ui/components/modals/event-participants-modal.tsx b/src/features/ui/components/modals/event-participants-modal.tsx
index 44c825b35..5af21c04d 100644
--- a/src/features/ui/components/modals/event-participants-modal.tsx
+++ b/src/features/ui/components/modals/event-participants-modal.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchEventParticipations } from 'soapbox/actions/events';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchEventParticipations } from 'soapbox/actions/events.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 interface IEventParticipantsModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/familiar-followers-modal.tsx b/src/features/ui/components/modals/familiar-followers-modal.tsx
index c249b83ef..f45fe7fcc 100644
--- a/src/features/ui/components/modals/familiar-followers-modal.tsx
+++ b/src/features/ui/components/modals/familiar-followers-modal.tsx
@@ -1,11 +1,11 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { FormattedMessage } from 'react-intl';
 
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
 const getAccount = makeGetAccount();
 
diff --git a/src/features/ui/components/modals/favourites-modal.tsx b/src/features/ui/components/modals/favourites-modal.tsx
index ae8eb6e28..cb72bdf4e 100644
--- a/src/features/ui/components/modals/favourites-modal.tsx
+++ b/src/features/ui/components/modals/favourites-modal.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchFavourites, expandFavourites } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchFavourites, expandFavourites } from 'soapbox/actions/interactions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 interface IFavouritesModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/hotkeys-modal.tsx b/src/features/ui/components/modals/hotkeys-modal.tsx
index 057e54ad3..6413a69f9 100644
--- a/src/features/ui/components/modals/hotkeys-modal.tsx
+++ b/src/features/ui/components/modals/hotkeys-modal.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
+import { Modal } from 'soapbox/components/ui/index.ts';
+import { useFeatures } from 'soapbox/hooks/index.ts';
 
 interface IHotkeysModal {
   onClose: () => void;
diff --git a/src/features/ui/components/modals/join-event-modal.tsx b/src/features/ui/components/modals/join-event-modal.tsx
index 553b9b7de..1b35a40c6 100644
--- a/src/features/ui/components/modals/join-event-modal.tsx
+++ b/src/features/ui/components/modals/join-event-modal.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { joinEvent } from 'soapbox/actions/events';
-import { closeModal } from 'soapbox/actions/modals';
-import { FormGroup, Modal, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { joinEvent } from 'soapbox/actions/events.ts';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { FormGroup, Modal, Textarea } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   hint: { id: 'join_event.hint', defaultMessage: 'You can tell the organizer why do you want to participate in this event:' },
diff --git a/src/features/ui/components/modals/landing-page-modal.test.tsx b/src/features/ui/components/modals/landing-page-modal.test.tsx
index 650c276f2..ef146b862 100644
--- a/src/features/ui/components/modals/landing-page-modal.test.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import LandingPageModal from './landing-page-modal';
+import LandingPageModal from './landing-page-modal.tsx';
 
 describe('<LandingPageModal />', () => {
   it('successfully renders', () => {
diff --git a/src/features/ui/components/modals/landing-page-modal.tsx b/src/features/ui/components/modals/landing-page-modal.tsx
index 076624ad3..d68f7b9e5 100644
--- a/src/features/ui/components/modals/landing-page-modal.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.tsx
@@ -2,9 +2,9 @@ import lifebuoyIcon from '@tabler/icons/outline/lifebuoy.svg';
 import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 
-import SiteLogo from 'soapbox/components/site-logo';
-import { Text, Button, Icon, Modal } from 'soapbox/components/ui';
-import { useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks';
+import SiteLogo from 'soapbox/components/site-logo.tsx';
+import { Text, Button, Icon, Modal } from 'soapbox/components/ui/index.ts';
+import { useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
   download: { id: 'landing_page_modal.download', defaultMessage: 'Download' },
diff --git a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
index bbb8601bd..b91cae5a6 100644
--- a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
@@ -2,16 +2,16 @@ import { useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { z } from 'zod';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useCreateGroup, useGroupValidation, type CreateGroupParams } from 'soapbox/api/hooks';
-import { Modal, Stack } from 'soapbox/components/ui';
-import { useDebounce } from 'soapbox/hooks';
-import { type Group } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useCreateGroup, useGroupValidation, type CreateGroupParams } from 'soapbox/api/hooks/index.ts';
+import { Modal, Stack } from 'soapbox/components/ui/index.ts';
+import { useDebounce } from 'soapbox/hooks/index.ts';
+import { type Group } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ConfirmationStep from './steps/confirmation-step';
-import DetailsStep from './steps/details-step';
-import PrivacyStep from './steps/privacy-step';
+import ConfirmationStep from './steps/confirmation-step.tsx';
+import DetailsStep from './steps/details-step.tsx';
+import PrivacyStep from './steps/privacy-step.tsx';
 
 const messages = defineMessages({
   next: { id: 'manage_group.next', defaultMessage: 'Next' },
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 74a7f353c..9f829ef25 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -2,11 +2,11 @@ import linkIcon from '@tabler/icons/outline/link.svg';
 import shareIcon from '@tabler/icons/outline/share.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
-import toast from 'soapbox/toast';
-import copy from 'soapbox/utils/copy';
+import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui/index.ts';
+import toast from 'soapbox/toast.tsx';
+import copy from 'soapbox/utils/copy.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 interface IConfirmationStep {
   group: Group | null;
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index 9b8aac350..0eb8aa412 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -1,13 +1,13 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { CreateGroupParams, useGroupValidation } from 'soapbox/api/hooks';
-import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui';
-import AvatarPicker from 'soapbox/features/edit-profile/components/avatar-picker';
-import HeaderPicker from 'soapbox/features/edit-profile/components/header-picker';
-import GroupTagsField from 'soapbox/features/group/components/group-tags-field';
-import { useAppSelector, useDebounce, useInstance } from 'soapbox/hooks';
-import { usePreview } from 'soapbox/hooks/forms';
-import resizeImage from 'soapbox/utils/resize-image';
+import { CreateGroupParams, useGroupValidation } from 'soapbox/api/hooks/index.ts';
+import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui/index.ts';
+import AvatarPicker from 'soapbox/features/edit-profile/components/avatar-picker.tsx';
+import HeaderPicker from 'soapbox/features/edit-profile/components/header-picker.tsx';
+import GroupTagsField from 'soapbox/features/group/components/group-tags-field.tsx';
+import { usePreview } from 'soapbox/hooks/forms/index.ts';
+import { useAppSelector, useDebounce, useInstance } from 'soapbox/hooks/index.ts';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
 const messages = defineMessages({
   groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
index 0d136727f..ba7eeba25 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
-import { type CreateGroupParams } from 'soapbox/api/hooks';
-import List, { ListItem } from 'soapbox/components/list';
-import { Form, FormGroup, Stack, Text } from 'soapbox/components/ui';
+import { type CreateGroupParams } from 'soapbox/api/hooks/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Form, FormGroup, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 interface IPrivacyStep {
   params: CreateGroupParams;
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 7ec650b37..a33c8fcec 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -11,23 +11,23 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
 
-import { fetchNext, fetchStatusWithContext } from 'soapbox/actions/statuses';
-import ExtendedVideoPlayer from 'soapbox/components/extended-video-player';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusActionBar from 'soapbox/components/status-action-bar';
-import { Icon, IconButton, HStack, Stack } from 'soapbox/components/ui';
-import Audio from 'soapbox/features/audio';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import Thread from 'soapbox/features/status/components/thread';
-import Video from 'soapbox/features/video';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { userTouching } from 'soapbox/is-mobile';
-import { makeGetStatus } from 'soapbox/selectors';
+import { fetchNext, fetchStatusWithContext } from 'soapbox/actions/statuses.ts';
+import ExtendedVideoPlayer from 'soapbox/components/extended-video-player.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusActionBar from 'soapbox/components/status-action-bar.tsx';
+import { Icon, IconButton, HStack, Stack } from 'soapbox/components/ui/index.ts';
+import Audio from 'soapbox/features/audio/index.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import Thread from 'soapbox/features/status/components/thread.tsx';
+import Video from 'soapbox/features/video/index.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import ImageLoader from '../image-loader';
+import ImageLoader from '../image-loader.tsx';
 
 import type { List as ImmutableList } from 'immutable';
-import type { Attachment, Status } from 'soapbox/types/entities';
+import type { Attachment, Status } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
diff --git a/src/features/ui/components/modals/mentions-modal.tsx b/src/features/ui/components/modals/mentions-modal.tsx
index 6e70d01ce..fb7a299f8 100644
--- a/src/features/ui/components/modals/mentions-modal.tsx
+++ b/src/features/ui/components/modals/mentions-modal.tsx
@@ -2,12 +2,12 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchStatusWithContext } from 'soapbox/actions/statuses';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { fetchStatusWithContext } from 'soapbox/actions/statuses.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IMentionsModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/missing-description-modal.tsx b/src/features/ui/components/modals/missing-description-modal.tsx
index da91a76bb..8a6f8b74e 100644
--- a/src/features/ui/components/modals/missing-description-modal.tsx
+++ b/src/features/ui/components/modals/missing-description-modal.tsx
@@ -1,6 +1,6 @@
 import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui';
+import { Modal } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   modalTitle: { id: 'missing_description_modal.text', defaultMessage: 'You have not entered a description for all attachments. Continue anyway?' },
diff --git a/src/features/ui/components/modals/mute-modal.tsx b/src/features/ui/components/modals/mute-modal.tsx
index 61bd2abfd..4892bdcdc 100644
--- a/src/features/ui/components/modals/mute-modal.tsx
+++ b/src/features/ui/components/modals/mute-modal.tsx
@@ -1,12 +1,12 @@
 import { FormattedMessage } from 'react-intl';
 
-import { muteAccount } from 'soapbox/actions/accounts';
-import { closeModal } from 'soapbox/actions/modals';
-import { toggleHideNotifications, changeMuteDuration } from 'soapbox/actions/mutes';
-import { useAccount } from 'soapbox/api/hooks';
-import { Modal, HStack, Stack, Text, Toggle } from 'soapbox/components/ui';
-import DurationSelector from 'soapbox/features/compose/components/polls/duration-selector';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
+import { muteAccount } from 'soapbox/actions/accounts.ts';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { toggleHideNotifications, changeMuteDuration } from 'soapbox/actions/mutes.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import { Modal, HStack, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import DurationSelector from 'soapbox/features/compose/components/polls/duration-selector.tsx';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
 const MuteModal = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
index 17e6b9aed..2e538edb0 100644
--- a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
@@ -1,11 +1,12 @@
 import { FormattedMessage } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
-import Stack from 'soapbox/components/ui/stack/stack';
-import Text from 'soapbox/components/ui/text/text';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { useAppDispatch } from 'soapbox/hooks';
+
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { nostrExtensionLogIn } from 'soapbox/actions/nostr.ts';
+import Stack from 'soapbox/components/ui/stack/stack.tsx';
+import Text from 'soapbox/components/ui/text/text.tsx';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const NostrExtensionIndicator: React.FC = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx b/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
index 7c55d4f59..b63507a82 100644
--- a/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import ExtensionStep from './steps/extension-step';
-import KeyAddStep from './steps/key-add-step';
+import ExtensionStep from './steps/extension-step.tsx';
+import KeyAddStep from './steps/key-add-step.tsx';
 
 type Step = 'extension' | 'key-add';
 
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
index a969af8f9..004fc13e6 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
@@ -2,12 +2,13 @@ import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, Text, Divider, HStack } from 'soapbox/components/ui';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { useAppDispatch, useInstance, useSoapboxConfig } from 'soapbox/hooks';
+
+import { openModal } from 'soapbox/actions/modals.ts';
+import { nostrExtensionLogIn } from 'soapbox/actions/nostr.ts';
+import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
+import { Button, Stack, Modal, Text, Divider, HStack } from 'soapbox/components/ui/index.ts';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useAppDispatch, useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 interface IExtensionStep {
   isLogin?: boolean;
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
index dd589d002..a49ec88c0 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
@@ -2,14 +2,15 @@ import { nip19 } from 'nostr-tools';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { logInNostr } from 'soapbox/actions/nostr';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, Input, FormGroup, Form, Divider } from 'soapbox/components/ui';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useAppDispatch } from 'soapbox/hooks';
 
-import NostrExtensionIndicator from '../components/nostr-extension-indicator';
+import { logInNostr } from 'soapbox/actions/nostr.ts';
+import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
+import { Button, Stack, Modal, Input, FormGroup, Form, Divider } from 'soapbox/components/ui/index.ts';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+
+import NostrExtensionIndicator from '../components/nostr-extension-indicator.tsx';
 
 interface IKeyAddStep {
   onClose(): void;
diff --git a/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx b/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
index f76b7273d..450b318e9 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
 
-import ExtensionStep from '../nostr-login-modal/steps/extension-step';
+import ExtensionStep from '../nostr-login-modal/steps/extension-step.tsx';
 
-import KeyStep from './steps/key-step';
-import KeygenStep from './steps/keygen-step';
+import KeyStep from './steps/key-step.tsx';
+import KeygenStep from './steps/keygen-step.tsx';
 
 type Step = 'extension' | 'key' | 'keygen';
 
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
index feffd8f46..1c5027ffe 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
@@ -1,11 +1,11 @@
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, Text, Divider } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
+import { Button, Stack, Modal, Text, Divider } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import NostrExtensionIndicator from '../../nostr-login-modal/components/nostr-extension-indicator';
+import NostrExtensionIndicator from '../../nostr-login-modal/components/nostr-extension-indicator.tsx';
 
 interface IKeyStep {
   setStep(step: 'extension' | 'key' | 'keygen'): void;
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
index 43b9aec8e..3a925b7d8 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
@@ -3,17 +3,18 @@ import { generateSecretKey, getPublicKey, nip19 } from 'nostr-tools';
 import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchAccount } from 'soapbox/actions/accounts';
-import { logInNostr } from 'soapbox/actions/nostr';
-import { closeSidebar } from 'soapbox/actions/sidebar';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, FormGroup, Text, Tooltip, HStack, Input } from 'soapbox/components/ui';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useAppDispatch, useInstance } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-import { download } from 'soapbox/utils/download';
-import { slugify } from 'soapbox/utils/input';
+
+import { fetchAccount } from 'soapbox/actions/accounts.ts';
+import { logInNostr } from 'soapbox/actions/nostr.ts';
+import { closeSidebar } from 'soapbox/actions/sidebar.ts';
+import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
+import { Button, Stack, Modal, FormGroup, Text, Tooltip, HStack, Input } from 'soapbox/components/ui/index.ts';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { download } from 'soapbox/utils/download.ts';
+import { slugify } from 'soapbox/utils/input.ts';
 
 interface IKeygenStep {
   onClose(): void;
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
index 87ad89432..f5e600f92 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
@@ -2,16 +2,16 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import ReactSwipeableViews from 'react-swipeable-views';
 
-import { endOnboarding } from 'soapbox/actions/onboarding';
-import { Stack, Modal, HStack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { endOnboarding } from 'soapbox/actions/onboarding.ts';
+import { Stack, Modal, HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import AvatarSelectionModal from './steps/avatar-step';
-import BioStep from './steps/bio-step';
-import CompletedModal from './steps/completed-step';
-import CoverPhotoSelectionModal from './steps/cover-photo-selection-step';
-import DisplayNameStep from './steps/display-name-step';
-import SuggestedAccountsModal from './steps/suggested-accounts-step';
+import AvatarSelectionModal from './steps/avatar-step.tsx';
+import BioStep from './steps/bio-step.tsx';
+import CompletedModal from './steps/completed-step.tsx';
+import CoverPhotoSelectionModal from './steps/cover-photo-selection-step.tsx';
+import DisplayNameStep from './steps/display-name-step.tsx';
+import SuggestedAccountsModal from './steps/suggested-accounts-step.tsx';
 
 interface IOnboardingFlowModal {
   onClose(): void;
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index 332a8b20e..7dde6a9ce 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -4,13 +4,13 @@ import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import { isDefaultAvatar } from 'soapbox/utils/accounts';
-import resizeImage from 'soapbox/utils/resize-image';
+import { patchMe } from 'soapbox/actions/me.ts';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultAvatar } from 'soapbox/utils/accounts.ts';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index 378f59aa6..57cd31814 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -2,11 +2,11 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { Button, Text, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { patchMe } from 'soapbox/actions/me.ts';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Button, Text, FormGroup, Stack, Textarea } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
index 850cb2c25..17a8ba289 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
@@ -2,8 +2,8 @@ import confettiIcon from '@tabler/icons/outline/confetti.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Icon, Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Button, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 const closeIcon = xIcon;
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index b2f56d180..e7f29de2d 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -4,14 +4,14 @@ import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import StillImage from 'soapbox/components/still-image';
-import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import { isDefaultHeader } from 'soapbox/utils/accounts';
-import resizeImage from 'soapbox/utils/resize-image';
+import { patchMe } from 'soapbox/actions/me.ts';
+import StillImage from 'soapbox/components/still-image.tsx';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index 43d7c8dc5..e58d08e13 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -2,11 +2,11 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { Button, Stack, Text, FormGroup, Input } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { patchMe } from 'soapbox/actions/me.ts';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Button, Stack, Text, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
index 434730ea1..8b51462d2 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
@@ -2,11 +2,11 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import debounce from 'lodash/debounce';
 import { FormattedMessage } from 'react-intl';
 
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useOnboardingSuggestions } from 'soapbox/queries/suggestions.ts';
 
 const closeIcon = xIcon;
 
diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx
index d0984e72d..64e7f6d0e 100644
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/src/features/ui/components/modals/reactions-modal.tsx
@@ -3,14 +3,14 @@ import { List as ImmutableList } from 'immutable';
 import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Emoji, Modal, Spinner, Tabs } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { ReactionRecord } from 'soapbox/reducers/user-lists';
+import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Emoji, Modal, Spinner, Tabs } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { ReactionRecord } from 'soapbox/reducers/user-lists.ts';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs';
+import type { Item } from 'soapbox/components/ui/tabs/tabs.tsx';
 
 const messages = defineMessages({
   all: { id: 'reactions.all', defaultMessage: 'All' },
diff --git a/src/features/ui/components/modals/reblogs-modal.tsx b/src/features/ui/components/modals/reblogs-modal.tsx
index 5c9116a3f..50bab6101 100644
--- a/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/src/features/ui/components/modals/reblogs-modal.tsx
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchReblogs, expandReblogs } from 'soapbox/actions/interactions';
-import { fetchStatus } from 'soapbox/actions/statuses';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchReblogs, expandReblogs } from 'soapbox/actions/interactions.ts';
+import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 interface IReblogsModal {
   onClose: (string: string) => void;
diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index f643fb178..248e4fde6 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -2,14 +2,13 @@ import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui';
-import { useAppSelector, useCompose, useOwnAccount } from 'soapbox/hooks';
-import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
-import { makeGetStatus } from 'soapbox/selectors';
+import { Modal } from 'soapbox/components/ui/index.ts';
+import Account from 'soapbox/features/reply-mentions/account.tsx';
+import { useAppSelector, useCompose, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import Account from '../../../reply-mentions/account';
-
-import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IReplyMentionsModal {
   composeId: string;
diff --git a/src/features/ui/components/modals/report-modal/report-modal.tsx b/src/features/ui/components/modals/report-modal/report-modal.tsx
index c461cffa5..166551d41 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -2,21 +2,21 @@ import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { blockAccount } from 'soapbox/actions/accounts';
-import { submitReport, submitReportSuccess, submitReportFail, ReportableEntities } from 'soapbox/actions/reports';
-import { expandAccountTimeline } from 'soapbox/actions/timelines';
-import { useAccount } from 'soapbox/api/hooks';
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import GroupCard from 'soapbox/components/group-card';
-import List, { ListItem } from 'soapbox/components/list';
-import StatusContent from 'soapbox/components/status-content';
-import { Avatar, HStack, Icon, Modal, ProgressBar, Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
+import { blockAccount } from 'soapbox/actions/accounts.ts';
+import { submitReport, submitReportSuccess, submitReportFail, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { expandAccountTimeline } from 'soapbox/actions/timelines.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import GroupCard from 'soapbox/components/group-card.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import { Avatar, HStack, Icon, Modal, ProgressBar, Stack, Text } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
 
-import ConfirmationStep from './steps/confirmation-step';
-import OtherActionsStep from './steps/other-actions-step';
-import ReasonStep from './steps/reason-step';
+import ConfirmationStep from './steps/confirmation-step.tsx';
+import OtherActionsStep from './steps/other-actions-step.tsx';
+import ReasonStep from './steps/reason-step.tsx';
 
 const messages = defineMessages({
   blankslate: { id: 'report.reason.blankslate', defaultMessage: 'You have removed all statuses from being selected.' },
diff --git a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index f95539b78..01a355df8 100644
--- a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -1,11 +1,11 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { ReportableEntities } from 'soapbox/actions/reports';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import { ReportableEntities } from 'soapbox/actions/reports.ts';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox.ts';
+import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   accountEntity: { id: 'report.confirmation.entity.account', defaultMessage: 'account' },
diff --git a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index fa985c19c..1512cdede 100644
--- a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -4,13 +4,13 @@ import { OrderedSet } from 'immutable';
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports';
-import { Button, FormGroup, HStack, Stack, Text, Toggle } from 'soapbox/components/ui';
-import StatusCheckBox from 'soapbox/features/report/components/status-check-box';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { getDomain } from 'soapbox/utils/accounts';
+import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports.ts';
+import { Button, FormGroup, HStack, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import StatusCheckBox from 'soapbox/features/report/components/status-check-box.tsx';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { getDomain } from 'soapbox/utils/accounts.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   addAdditionalStatuses: { id: 'report.other_actions.add_additional', defaultMessage: 'Would you like to add additional statuses to this report?' },
diff --git a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
index d5fc1f98f..74f733a18 100644
--- a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -2,12 +2,12 @@ import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeReportComment, changeReportRule, ReportableEntities } from 'soapbox/actions/reports';
-import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
+import { changeReportComment, changeReportRule, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
 
-import type { Account } from 'soapbox/schemas';
-import type { Rule } from 'soapbox/schemas/rule';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { Rule } from 'soapbox/schemas/rule.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index ac0f401cc..4e0a0ed0f 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -3,15 +3,15 @@ import folderIcon from '@tabler/icons/outline/folder.svg';
 import { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { bookmark } from 'soapbox/actions/interactions';
-import { useBookmarkFolders } from 'soapbox/api/hooks';
-import { RadioGroup, RadioItem } from 'soapbox/components/radio';
-import { Emoji, HStack, Icon, Modal, Spinner, Stack } from 'soapbox/components/ui';
-import NewFolderForm from 'soapbox/features/bookmark-folders/components/new-folder-form';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { bookmark } from 'soapbox/actions/interactions.ts';
+import { useBookmarkFolders } from 'soapbox/api/hooks/index.ts';
+import { RadioGroup, RadioItem } from 'soapbox/components/radio.tsx';
+import { Emoji, HStack, Icon, Modal, Spinner, Stack } from 'soapbox/components/ui/index.ts';
+import NewFolderForm from 'soapbox/features/bookmark-folders/components/new-folder-form.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface ISelectBookmarkFolderModal {
   statusId: string;
diff --git a/src/features/ui/components/modals/unauthorized-modal.test.tsx b/src/features/ui/components/modals/unauthorized-modal.test.tsx
index f72448abf..0f10f76fa 100644
--- a/src/features/ui/components/modals/unauthorized-modal.test.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import UnauthorizedModal from './unauthorized-modal';
+import UnauthorizedModal from './unauthorized-modal.tsx';
 
 describe('<UnauthorizedModal />', () => {
   it('successfully renders', () => {
diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx
index 13dd5df52..44a155f7b 100644
--- a/src/features/ui/components/modals/unauthorized-modal.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.tsx
@@ -2,11 +2,11 @@ import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { remoteInteraction } from 'soapbox/actions/interactions';
-import { Button, Form, Input, Modal, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks';
-import { selectAccount } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
+import { remoteInteraction } from 'soapbox/actions/interactions.ts';
+import { Button, Form, Input, Modal, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   accountPlaceholder: { id: 'remote_interaction.account_placeholder', defaultMessage: 'Enter your username@domain you want to act from' },
diff --git a/src/features/ui/components/modals/video-modal.tsx b/src/features/ui/components/modals/video-modal.tsx
index c80e2b19b..6845ec1cc 100644
--- a/src/features/ui/components/modals/video-modal.tsx
+++ b/src/features/ui/components/modals/video-modal.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import Video from 'soapbox/features/video';
+import Video from 'soapbox/features/video/index.tsx';
 
-import type { Status, Account, Attachment } from 'soapbox/types/entities';
+import type { Status, Account, Attachment } from 'soapbox/types/entities.ts';
 
 interface IVideoModal {
   media: Attachment;
diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index 947a7a869..c7d51f89b 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -4,15 +4,15 @@ import { QRCodeCanvas } from 'qrcode.react';
 import React  from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit';
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Modal, Button, Stack, Avatar, HStack } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch } from 'soapbox/hooks';
-import { ZapSplitData } from 'soapbox/schemas/zap-split';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Modal, Button, Stack, Avatar, HStack } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
-import type { Account as AccountEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
 
 const closeIcon = xIcon;
 
diff --git a/src/features/ui/components/modals/zap-pay-request-modal.tsx b/src/features/ui/components/modals/zap-pay-request-modal.tsx
index 51b21c587..9e32821cb 100644
--- a/src/features/ui/components/modals/zap-pay-request-modal.tsx
+++ b/src/features/ui/components/modals/zap-pay-request-modal.tsx
@@ -1,9 +1,9 @@
 import React  from 'react';
 
-import { Modal } from 'soapbox/components/ui';
-import ZapPayRequestForm from 'soapbox/features/zap/components/zap-pay-request-form';
+import { Modal } from 'soapbox/components/ui/index.ts';
+import ZapPayRequestForm from 'soapbox/features/zap/components/zap-pay-request-form.tsx';
 
-import type { Status as StatusEntity, Account as AccountEntity   } from 'soapbox/types/entities';
+import type { Status as StatusEntity, Account as AccountEntity   } from 'soapbox/types/entities.ts';
 
 interface IZapPayRequestModal {
   account: AccountEntity;
diff --git a/src/features/ui/components/modals/zap-split/display-name-row.tsx b/src/features/ui/components/modals/zap-split/display-name-row.tsx
index 6bfaa4663..92185eb9a 100644
--- a/src/features/ui/components/modals/zap-split/display-name-row.tsx
+++ b/src/features/ui/components/modals/zap-split/display-name-row.tsx
@@ -1,9 +1,9 @@
-import { HStack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useSoapboxConfig } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
+import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { getAcct } from 'soapbox/utils/accounts.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IDisplayName {
   account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
diff --git a/src/features/ui/components/modals/zap-split/zap-split-modal.tsx b/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
index 023f3dc83..b3f0fd66d 100644
--- a/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
@@ -2,13 +2,13 @@ import { useState, useEffect }  from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
-import { zap } from 'soapbox/actions/interactions';
-import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit';
-import { Modal } from 'soapbox/components/ui';
-import ZapSplit from 'soapbox/features/ui/components/modals/zap-split/zap-split';
-import { ZapSplitData } from 'soapbox/schemas/zap-split';
+import { zap } from 'soapbox/actions/interactions.ts';
+import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
+import { Modal } from 'soapbox/components/ui/index.ts';
+import ZapSplit from 'soapbox/features/ui/components/modals/zap-split/zap-split.tsx';
+import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 interface IZapSplitModal {
   zapSplitAccounts: ZapSplitData[];
diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx
index 9b6e75e72..3485bf7e8 100644
--- a/src/features/ui/components/modals/zap-split/zap-split.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split.tsx
@@ -2,10 +2,10 @@ import folderOpenIcon from '@tabler/icons/outline/folder-open.svg';
 import { QRCodeCanvas } from 'qrcode.react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import Account from 'soapbox/components/account';
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Button, Stack, HStack } from 'soapbox/components/ui';
-import { ZapSplitData } from 'soapbox/schemas/zap-split';
+import Account from 'soapbox/components/account.tsx';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import { Button, Stack, HStack } from 'soapbox/components/ui/index.ts';
+import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
 const messages = defineMessages({
   zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' },
diff --git a/src/features/ui/components/modals/zaps-modal.tsx b/src/features/ui/components/modals/zaps-modal.tsx
index 5783b31e7..706cba2da 100644
--- a/src/features/ui/components/modals/zaps-modal.tsx
+++ b/src/features/ui/components/modals/zaps-modal.tsx
@@ -2,12 +2,12 @@ import { List as ImmutableList } from 'immutable';
 import { useEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchZaps, expandZaps } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { fetchZaps, expandZaps } from 'soapbox/actions/interactions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Modal, Spinner, Text } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IAccountWithZaps {
   id: string;
diff --git a/src/features/ui/components/navbar.test.tsx b/src/features/ui/components/navbar.test.tsx
index 63b6bc655..b4238d05a 100644
--- a/src/features/ui/components/navbar.test.tsx
+++ b/src/features/ui/components/navbar.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Navbar from './navbar';
+import Navbar from './navbar.tsx';
 
 describe('<Navbar />', () => {
   it('successfully renders', () => {
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index d66cd1f88..1c725b753 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -4,18 +4,18 @@ import { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, Redirect } from 'react-router-dom';
 
-import { logIn, verifyCredentials } from 'soapbox/actions/auth';
-import { fetchInstance } from 'soapbox/actions/instance';
-import { openModal } from 'soapbox/actions/modals';
-import { openSidebar } from 'soapbox/actions/sidebar';
-import SiteLogo from 'soapbox/components/site-logo';
-import { Avatar, Button, Counter, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
-import Search from 'soapbox/features/compose/components/search';
-import { useAppDispatch, useFeatures, useInstance, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
+import { logIn, verifyCredentials } from 'soapbox/actions/auth.ts';
+import { fetchInstance } from 'soapbox/actions/instance.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { openSidebar } from 'soapbox/actions/sidebar.ts';
+import SiteLogo from 'soapbox/components/site-logo.tsx';
+import { Avatar, Button, Counter, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui/index.ts';
+import Search from 'soapbox/features/compose/components/search.tsx';
+import { useAppDispatch, useFeatures, useInstance, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
-import ProfileDropdown from './profile-dropdown';
+import ProfileDropdown from './profile-dropdown.tsx';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/ui/components/new-account-zap-split.tsx b/src/features/ui/components/new-account-zap-split.tsx
index 999c1cc64..13b787b9d 100644
--- a/src/features/ui/components/new-account-zap-split.tsx
+++ b/src/features/ui/components/new-account-zap-split.tsx
@@ -2,11 +2,11 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Account from 'soapbox/components/account';
-import { ListItem } from 'soapbox/components/list';
-import { Button, HStack, Input, Slider } from 'soapbox/components/ui';
-import SearchZapSplit from 'soapbox/features/compose/components/search-zap-split';
-import { type Account as AccountEntity } from 'soapbox/schemas';
+import Account from 'soapbox/components/account.tsx';
+import { ListItem } from 'soapbox/components/list.tsx';
+import { Button, HStack, Input, Slider } from 'soapbox/components/ui/index.ts';
+import SearchZapSplit from 'soapbox/features/compose/components/search-zap-split.tsx';
+import { type Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 const closeIcon = xIcon;
 
diff --git a/src/features/ui/components/panels/account-note-panel.tsx b/src/features/ui/components/panels/account-note-panel.tsx
index 152c4c1d5..e5c7164f4 100644
--- a/src/features/ui/components/panels/account-note-panel.tsx
+++ b/src/features/ui/components/panels/account-note-panel.tsx
@@ -2,12 +2,12 @@ import debounce from 'lodash/debounce';
 import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { submitAccountNote } from 'soapbox/actions/account-notes';
-import { HStack, Text, Textarea, Widget } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { submitAccountNote } from 'soapbox/actions/account-notes.ts';
+import { HStack, Text, Textarea, Widget } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
-import type { AppDispatch } from 'soapbox/store';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 const onSave = debounce(
   (dispatch: AppDispatch, id: string, value: string, callback: () => void) =>
diff --git a/src/features/ui/components/panels/my-groups-panel.tsx b/src/features/ui/components/panels/my-groups-panel.tsx
index 8679a50f0..6f75f3d49 100644
--- a/src/features/ui/components/panels/my-groups-panel.tsx
+++ b/src/features/ui/components/panels/my-groups-panel.tsx
@@ -1,7 +1,7 @@
-import { useGroups } from 'soapbox/api/hooks';
-import { Widget } from 'soapbox/components/ui';
-import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
-import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
+import { useGroups } from 'soapbox/api/hooks/index.ts';
+import { Widget } from 'soapbox/components/ui/index.ts';
+import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item.tsx';
+import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
 
 const MyGroupsPanel = () => {
   const { groups, isFetching, isFetched, isError } = useGroups();
diff --git a/src/features/ui/components/panels/new-event-panel.tsx b/src/features/ui/components/panels/new-event-panel.tsx
index 900f06559..f055ca26d 100644
--- a/src/features/ui/components/panels/new-event-panel.tsx
+++ b/src/features/ui/components/panels/new-event-panel.tsx
@@ -1,9 +1,9 @@
 import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const NewEventPanel = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/panels/new-group-panel.tsx b/src/features/ui/components/panels/new-group-panel.tsx
index c69741853..51b95500e 100644
--- a/src/features/ui/components/panels/new-group-panel.tsx
+++ b/src/features/ui/components/panels/new-group-panel.tsx
@@ -1,9 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions.ts';
 
 const NewGroupPanel = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/panels/sign-up-panel.test.tsx b/src/features/ui/components/panels/sign-up-panel.test.tsx
index d2afa6be8..c27064f02 100644
--- a/src/features/ui/components/panels/sign-up-panel.test.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import SignUpPanel from './sign-up-panel';
+import SignUpPanel from './sign-up-panel.tsx';
 
 describe('<SignUpPanel />', () => {
   it('doesn\'t render by default', () => {
diff --git a/src/features/ui/components/panels/sign-up-panel.tsx b/src/features/ui/components/panels/sign-up-panel.tsx
index 4ffb25159..b576b605c 100644
--- a/src/features/ui/components/panels/sign-up-panel.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
 
 const SignUpPanel = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/panels/suggested-groups-panel.tsx b/src/features/ui/components/panels/suggested-groups-panel.tsx
index 558837d4b..9e1144a3b 100644
--- a/src/features/ui/components/panels/suggested-groups-panel.tsx
+++ b/src/features/ui/components/panels/suggested-groups-panel.tsx
@@ -1,7 +1,7 @@
-import { useSuggestedGroups } from 'soapbox/api/hooks';
-import { Widget } from 'soapbox/components/ui';
-import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
-import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
+import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
+import { Widget } from 'soapbox/components/ui/index.ts';
+import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item.tsx';
+import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
 
 const SuggestedGroupsPanel = () => {
   const { groups, isFetching, isFetched, isError } = useSuggestedGroups();
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index bdb570d65..80f7bf8f6 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -1,19 +1,19 @@
 import clsx from 'clsx';
 
-import Account from 'soapbox/components/account';
-import StatusContent from 'soapbox/components/status-content';
-import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
-import { Card, HStack, Stack } from 'soapbox/components/ui';
-import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
-import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder-media-gallery';
-import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
-import { useAppSelector } from 'soapbox/hooks';
+import Account from 'soapbox/components/account.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
+import { Card, HStack, Stack } from 'soapbox/components/ui/index.ts';
+import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card.tsx';
+import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder-media-gallery.tsx';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import { buildStatus } from '../util/pending-status-builder';
+import { buildStatus } from '../util/pending-status-builder.ts';
 
-import PollPreview from './poll-preview';
+import PollPreview from './poll-preview.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const shouldHaveCard = (pendingStatus: StatusEntity) => {
   return Boolean(pendingStatus.content.match(/https?:\/\/\S*/));
diff --git a/src/features/ui/components/pinned-accounts-panel.tsx b/src/features/ui/components/pinned-accounts-panel.tsx
index e521b60d6..254130647 100644
--- a/src/features/ui/components/pinned-accounts-panel.tsx
+++ b/src/features/ui/components/pinned-accounts-panel.tsx
@@ -2,13 +2,14 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchPinnedAccounts } from 'soapbox/actions/accounts';
-import { Widget } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
-import type { Account } from 'soapbox/schemas';
+import { fetchPinnedAccounts } from 'soapbox/actions/accounts.ts';
+import { Widget } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IPinnedAccountsPanel {
   account: Account;
diff --git a/src/features/ui/components/poll-preview.tsx b/src/features/ui/components/poll-preview.tsx
index 85e1746cc..80cbc2f23 100644
--- a/src/features/ui/components/poll-preview.tsx
+++ b/src/features/ui/components/poll-preview.tsx
@@ -1,9 +1,9 @@
 import noop from 'lodash/noop';
 
-import PollOption from 'soapbox/components/polls/poll-option';
-import { Stack } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { Poll as PollEntity } from 'soapbox/types/entities';
+import PollOption from 'soapbox/components/polls/poll-option.tsx';
+import { Stack } from 'soapbox/components/ui/index.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { Poll as PollEntity } from 'soapbox/types/entities.ts';
 
 interface IPollPreview {
   pollId: string;
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index 434dc298b..a85d3f129 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -7,15 +7,15 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
-import Account from 'soapbox/components/account';
-import { MenuDivider } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useClickOutside, useFeatures } from 'soapbox/hooks';
-import { makeGetOtherAccounts } from 'soapbox/selectors';
+import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth.ts';
+import Account from 'soapbox/components/account.tsx';
+import { MenuDivider } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useClickOutside, useFeatures } from 'soapbox/hooks/index.ts';
+import { makeGetOtherAccounts } from 'soapbox/selectors/index.ts';
 
-import ThemeToggle from './theme-toggle';
+import ThemeToggle from './theme-toggle.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
diff --git a/src/features/ui/components/profile-familiar-followers.tsx b/src/features/ui/components/profile-familiar-followers.tsx
index e63b9dcf1..9e5744eb8 100644
--- a/src/features/ui/components/profile-familiar-followers.tsx
+++ b/src/features/ui/components/profile-familiar-followers.tsx
@@ -3,16 +3,16 @@ import { useEffect } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { fetchAccountFamiliarFollowers } from 'soapbox/actions/familiar-followers';
-import { openModal } from 'soapbox/actions/modals';
-import AvatarStack from 'soapbox/components/avatar-stack';
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { HStack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
+import { fetchAccountFamiliarFollowers } from 'soapbox/actions/familiar-followers.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import AvatarStack from 'soapbox/components/avatar-stack.tsx';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const getAccount = makeGetAccount();
 
diff --git a/src/features/ui/components/profile-field.tsx b/src/features/ui/components/profile-field.tsx
index 2cdae088c..9b8a43414 100644
--- a/src/features/ui/components/profile-field.tsx
+++ b/src/features/ui/components/profile-field.tsx
@@ -2,11 +2,12 @@ import checkIcon from '@tabler/icons/outline/check.svg';
 import clsx from 'clsx';
 import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
 
-import Markup from 'soapbox/components/markup';
-import { HStack, Icon } from 'soapbox/components/ui';
-import { CryptoAddress, LightningAddress } from 'soapbox/features/ui/util/async-components';
 
-import type { Account } from 'soapbox/schemas';
+import Markup from 'soapbox/components/markup.tsx';
+import { HStack, Icon } from 'soapbox/components/ui/index.ts';
+import { CryptoAddress, LightningAddress } from 'soapbox/features/ui/util/async-components.ts';
+
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1];
 const isTicker = (value: string): boolean => Boolean(getTicker(value));
diff --git a/src/features/ui/components/profile-fields-panel.tsx b/src/features/ui/components/profile-fields-panel.tsx
index 9f0d7d305..cc29628f8 100644
--- a/src/features/ui/components/profile-fields-panel.tsx
+++ b/src/features/ui/components/profile-fields-panel.tsx
@@ -1,10 +1,10 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Widget, Stack } from 'soapbox/components/ui';
+import { Widget, Stack } from 'soapbox/components/ui/index.ts';
 
-import ProfileField from './profile-field';
+import ProfileField from './profile-field.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IProfileFieldsPanel {
   account: Account;
diff --git a/src/features/ui/components/profile-info-panel.tsx b/src/features/ui/components/profile-info-panel.tsx
index 8e19870ee..9076be97b 100644
--- a/src/features/ui/components/profile-info-panel.tsx
+++ b/src/features/ui/components/profile-info-panel.tsx
@@ -5,19 +5,19 @@ import lockIcon from '@tabler/icons/outline/lock.svg';
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { usePatronUser } from 'soapbox/api/hooks';
-import Badge from 'soapbox/components/badge';
-import Markup from 'soapbox/components/markup';
-import { dateFormatOptions } from 'soapbox/components/relative-timestamp';
-import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
-import { capitalize } from 'soapbox/utils/strings';
+import { usePatronUser } from 'soapbox/api/hooks/index.ts';
+import Badge from 'soapbox/components/badge.tsx';
+import Markup from 'soapbox/components/markup.tsx';
+import { dateFormatOptions } from 'soapbox/components/relative-timestamp.tsx';
+import { Icon, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { capitalize } from 'soapbox/utils/strings.ts';
 
-import ProfileFamiliarFollowers from './profile-familiar-followers';
-import ProfileField from './profile-field';
-import ProfileStats from './profile-stats';
+import ProfileFamiliarFollowers from './profile-familiar-followers.tsx';
+import ProfileField from './profile-field.tsx';
+import ProfileStats from './profile-stats.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 /** Basically ensure the URL isn't `javascript:alert('hi')` or something like that */
 const isSafeUrl = (text: string): boolean => {
diff --git a/src/features/ui/components/profile-media-panel.tsx b/src/features/ui/components/profile-media-panel.tsx
index 9f2d3f5f4..9433d1b4c 100644
--- a/src/features/ui/components/profile-media-panel.tsx
+++ b/src/features/ui/components/profile-media-panel.tsx
@@ -2,16 +2,16 @@ import { List as ImmutableList } from 'immutable';
 import { useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { expandAccountMediaTimeline } from 'soapbox/actions/timelines';
-import { Spinner, Text, Widget } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { getAccountGallery } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { expandAccountMediaTimeline } from 'soapbox/actions/timelines.ts';
+import { Spinner, Text, Widget } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { getAccountGallery } from 'soapbox/selectors/index.ts';
 
-import MediaItem from '../../account-gallery/components/media-item';
+import MediaItem from '../../account-gallery/components/media-item.tsx';
 
-import type { Account } from 'soapbox/schemas';
-import type { Attachment } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 interface IProfileMediaPanel {
   account?: Account;
diff --git a/src/features/ui/components/profile-stats.tsx b/src/features/ui/components/profile-stats.tsx
index 0c094c275..8d306dbb0 100644
--- a/src/features/ui/components/profile-stats.tsx
+++ b/src/features/ui/components/profile-stats.tsx
@@ -1,10 +1,10 @@
 import { useIntl, defineMessages } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
-import { HStack, Text } from 'soapbox/components/ui';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
diff --git a/src/features/ui/components/promo-panel.tsx b/src/features/ui/components/promo-panel.tsx
index 54b5dc7f8..0ccb03b47 100644
--- a/src/features/ui/components/promo-panel.tsx
+++ b/src/features/ui/components/promo-panel.tsx
@@ -1,6 +1,6 @@
-import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
-import { Widget, Stack, Text } from 'soapbox/components/ui';
-import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon.tsx';
+import { Widget, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const PromoPanel: React.FC = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/subscribe-button.test.tsx b/src/features/ui/components/subscribe-button.test.tsx
index 69c697fe1..cf13524d2 100644
--- a/src/features/ui/components/subscribe-button.test.tsx
+++ b/src/features/ui/components/subscribe-button.test.tsx
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildAccount, buildRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import SubscribeButton from './subscription-button';
+import SubscribeButton from './subscription-button.tsx';
 
 const justin = {
   id: '1',
diff --git a/src/features/ui/components/subscription-button.tsx b/src/features/ui/components/subscription-button.tsx
index 0e470f9c5..a5f09544d 100644
--- a/src/features/ui/components/subscription-button.tsx
+++ b/src/features/ui/components/subscription-button.tsx
@@ -5,13 +5,13 @@ import { defineMessages, useIntl } from 'react-intl';
 import {
   subscribeAccount,
   unsubscribeAccount,
-} from 'soapbox/actions/accounts';
-import { useFollow } from 'soapbox/api/hooks';
-import { IconButton } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+} from 'soapbox/actions/accounts.ts';
+import { useFollow } from 'soapbox/api/hooks/index.ts';
+import { IconButton } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' },
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index d242a0723..e778fe25e 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -6,7 +6,7 @@ import sunIcon from '@tabler/icons/outline/sun.svg';
 import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Select } from 'soapbox/components/ui';
+import { Icon, Select } from 'soapbox/components/ui/index.ts';
 
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
diff --git a/src/features/ui/components/theme-toggle.tsx b/src/features/ui/components/theme-toggle.tsx
index e6b9b5d98..fe5781d22 100644
--- a/src/features/ui/components/theme-toggle.tsx
+++ b/src/features/ui/components/theme-toggle.tsx
@@ -1,7 +1,7 @@
-import { changeSetting } from 'soapbox/actions/settings';
-import { useAppDispatch, useSettings } from 'soapbox/hooks';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import { useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
 
-import ThemeSelector from './theme-selector';
+import ThemeSelector from './theme-selector.tsx';
 
 /** Stateful theme selector. */
 const ThemeToggle: React.FC = () => {
diff --git a/src/features/ui/components/timeline.tsx b/src/features/ui/components/timeline.tsx
index ed5ed93a3..b454f670f 100644
--- a/src/features/ui/components/timeline.tsx
+++ b/src/features/ui/components/timeline.tsx
@@ -3,12 +3,12 @@ import debounce from 'lodash/debounce';
 import { useCallback } from 'react';
 import { defineMessages } from 'react-intl';
 
-import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines';
-import ScrollTopButton from 'soapbox/components/scroll-top-button';
-import StatusList, { IStatusList } from 'soapbox/components/status-list';
-import { Portal } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetStatusIds } from 'soapbox/selectors';
+import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines.ts';
+import ScrollTopButton from 'soapbox/components/scroll-top-button.tsx';
+import StatusList, { IStatusList } from 'soapbox/components/status-list.tsx';
+import { Portal } from 'soapbox/components/ui/index.ts';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
 const messages = defineMessages({
   queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
diff --git a/src/features/ui/components/trends-panel.test.tsx b/src/features/ui/components/trends-panel.test.tsx
index 1cb0ab9ad..6ac2c7171 100644
--- a/src/features/ui/components/trends-panel.test.tsx
+++ b/src/features/ui/components/trends-panel.test.tsx
@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { queryClient, render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { queryClient, render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import TrendsPanel from './trends-panel';
+import TrendsPanel from './trends-panel.tsx';
 
 describe('<TrendsPanel />', () => {
   beforeEach(() => {
diff --git a/src/features/ui/components/trends-panel.tsx b/src/features/ui/components/trends-panel.tsx
index b531a9932..cb3842b80 100644
--- a/src/features/ui/components/trends-panel.tsx
+++ b/src/features/ui/components/trends-panel.tsx
@@ -1,12 +1,12 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { setFilter } from 'soapbox/actions/search';
-import Hashtag from 'soapbox/components/hashtag';
-import { Text, Widget } from 'soapbox/components/ui';
-import PlaceholderSidebarTrends from 'soapbox/features/placeholder/components/placeholder-sidebar-trends';
-import { useAppDispatch } from 'soapbox/hooks';
-import useTrends from 'soapbox/queries/trends';
+import { setFilter } from 'soapbox/actions/search.ts';
+import Hashtag from 'soapbox/components/hashtag.tsx';
+import { Text, Widget } from 'soapbox/components/ui/index.ts';
+import PlaceholderSidebarTrends from 'soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import useTrends from 'soapbox/queries/trends.ts';
 
 interface ITrendsPanel {
   limit: number;
diff --git a/src/features/ui/components/user-panel.tsx b/src/features/ui/components/user-panel.tsx
index 9a446eda5..ffbfd71e2 100644
--- a/src/features/ui/components/user-panel.tsx
+++ b/src/features/ui/components/user-panel.tsx
@@ -1,14 +1,14 @@
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useAccount } from 'soapbox/api/hooks';
-import StillImage from 'soapbox/components/still-image';
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppSelector } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
-import { displayFqn } from 'soapbox/utils/state';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import StillImage from 'soapbox/components/still-image.tsx';
+import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { getAcct } from 'soapbox/utils/accounts.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
+import { displayFqn } from 'soapbox/utils/state.ts';
 
 interface IUserPanel {
   accountId: string;
diff --git a/src/features/ui/components/who-to-follow-panel.tsx b/src/features/ui/components/who-to-follow-panel.tsx
index 3f74100d6..fb2575afc 100644
--- a/src/features/ui/components/who-to-follow-panel.tsx
+++ b/src/features/ui/components/who-to-follow-panel.tsx
@@ -2,13 +2,13 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text, Widget } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import PlaceholderSidebarSuggestions from 'soapbox/features/placeholder/components/placeholder-sidebar-suggestions';
-import { useOwnAccount } from 'soapbox/hooks';
-import { useDismissSuggestion, useSuggestions } from 'soapbox/queries/suggestions';
+import { Text, Widget } from 'soapbox/components/ui/index.ts';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import PlaceholderSidebarSuggestions from 'soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx';
+import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useDismissSuggestion, useSuggestions } from 'soapbox/queries/suggestions.ts';
 
-import type { Account as AccountEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
diff --git a/src/features/ui/containers/modal-container.ts b/src/features/ui/containers/modal-container.ts
index 294cf9031..538fcfef9 100644
--- a/src/features/ui/containers/modal-container.ts
+++ b/src/features/ui/containers/modal-container.ts
@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 
-import { cancelReplyCompose } from 'soapbox/actions/compose';
-import { cancelEventCompose } from 'soapbox/actions/events';
-import { closeModal } from 'soapbox/actions/modals';
-import { cancelReport } from 'soapbox/actions/reports';
+import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
+import { cancelEventCompose } from 'soapbox/actions/events.ts';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { cancelReport } from 'soapbox/actions/reports.ts';
 
-import ModalRoot, { ModalType } from '../components/modal-root';
+import ModalRoot, { ModalType } from '../components/modal-root.tsx';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const mapStateToProps = (state: RootState) => {
   const modal = state.modals.last({
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index 240a56cf3..d067713c5 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -2,42 +2,42 @@ import clsx from 'clsx';
 import { Suspense, lazy, useEffect, useRef } from 'react';
 import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom';
 
-import { fetchFollowRequests } from 'soapbox/actions/accounts';
-import { fetchReports, fetchUsers, fetchConfig } from 'soapbox/actions/admin';
-import { fetchCustomEmojis } from 'soapbox/actions/custom-emojis';
-import { fetchFilters } from 'soapbox/actions/filters';
-import { fetchMarker } from 'soapbox/actions/markers';
-import { expandNotifications } from 'soapbox/actions/notifications';
-import { registerPushNotifications } from 'soapbox/actions/push-notifications/registerer';
-import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses';
-import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions';
-import { expandHomeTimeline } from 'soapbox/actions/timelines';
-import { useUserStream } from 'soapbox/api/hooks';
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
-import ThumbNavigation from 'soapbox/components/thumb-navigation';
-import { Layout } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles, useInstance, useLoggedIn, useApi } from 'soapbox/hooks';
-import AdminPage from 'soapbox/pages/admin-page';
-import ChatsPage from 'soapbox/pages/chats-page';
-import DefaultPage from 'soapbox/pages/default-page';
-import EmptyPage from 'soapbox/pages/empty-page';
-import EventPage from 'soapbox/pages/event-page';
-import EventsPage from 'soapbox/pages/events-page';
-import GroupPage from 'soapbox/pages/group-page';
-import GroupsPage from 'soapbox/pages/groups-page';
-import GroupsPendingPage from 'soapbox/pages/groups-pending-page';
-import HomePage from 'soapbox/pages/home-page';
-import LandingPage from 'soapbox/pages/landing-page';
-import ManageGroupsPage from 'soapbox/pages/manage-groups-page';
-import ProfilePage from 'soapbox/pages/profile-page';
-import RemoteInstancePage from 'soapbox/pages/remote-instance-page';
-import SearchPage from 'soapbox/pages/search-page';
-import StatusPage from 'soapbox/pages/status-page';
-import WidePage from 'soapbox/pages/wide-page';
+import { fetchFollowRequests } from 'soapbox/actions/accounts.ts';
+import { fetchReports, fetchUsers, fetchConfig } from 'soapbox/actions/admin.ts';
+import { fetchCustomEmojis } from 'soapbox/actions/custom-emojis.ts';
+import { fetchFilters } from 'soapbox/actions/filters.ts';
+import { fetchMarker } from 'soapbox/actions/markers.ts';
+import { expandNotifications } from 'soapbox/actions/notifications.ts';
+import { registerPushNotifications } from 'soapbox/actions/push-notifications/registerer.ts';
+import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses.ts';
+import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions.ts';
+import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
+import { useUserStream } from 'soapbox/api/hooks/index.ts';
+import SidebarNavigation from 'soapbox/components/sidebar-navigation.tsx';
+import ThumbNavigation from 'soapbox/components/thumb-navigation.tsx';
+import { Layout } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles, useInstance, useLoggedIn, useApi } from 'soapbox/hooks/index.ts';
+import AdminPage from 'soapbox/pages/admin-page.tsx';
+import ChatsPage from 'soapbox/pages/chats-page.tsx';
+import DefaultPage from 'soapbox/pages/default-page.tsx';
+import EmptyPage from 'soapbox/pages/empty-page.tsx';
+import EventPage from 'soapbox/pages/event-page.tsx';
+import EventsPage from 'soapbox/pages/events-page.tsx';
+import GroupPage from 'soapbox/pages/group-page.tsx';
+import GroupsPage from 'soapbox/pages/groups-page.tsx';
+import GroupsPendingPage from 'soapbox/pages/groups-pending-page.tsx';
+import HomePage from 'soapbox/pages/home-page.tsx';
+import LandingPage from 'soapbox/pages/landing-page.tsx';
+import ManageGroupsPage from 'soapbox/pages/manage-groups-page.tsx';
+import ProfilePage from 'soapbox/pages/profile-page.tsx';
+import RemoteInstancePage from 'soapbox/pages/remote-instance-page.tsx';
+import SearchPage from 'soapbox/pages/search-page.tsx';
+import StatusPage from 'soapbox/pages/status-page.tsx';
+import WidePage from 'soapbox/pages/wide-page.tsx';
 
-import BackgroundShapes from './components/background-shapes';
-import FloatingActionButton from './components/floating-action-button';
-import Navbar from './components/navbar';
+import BackgroundShapes from './components/background-shapes.tsx';
+import FloatingActionButton from './components/floating-action-button.tsx';
+import Navbar from './components/navbar.tsx';
 import {
   Status,
   CommunityTimeline,
@@ -143,13 +143,13 @@ import {
   Rules,
   AdminNostrRelays,
   NostrBunkerLogin,
-} from './util/async-components';
-import GlobalHotkeys from './util/global-hotkeys';
-import { WrappedRoute } from './util/react-router-helpers';
+} from './util/async-components.ts';
+import GlobalHotkeys from './util/global-hotkeys.tsx';
+import { WrappedRoute } from './util/react-router-helpers.tsx';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
-import 'soapbox/components/status';
+import 'soapbox/components/status.tsx';
 
 interface ISwitchingColumnsArea {
   children: React.ReactNode;
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index 498afdd83..546e931ee 100644
--- a/src/features/ui/util/async-components.ts
+++ b/src/features/ui/util/async-components.ts
@@ -1,183 +1,183 @@
 import { lazy } from 'react';
 
-export const AboutPage = lazy(() => import('soapbox/features/about'));
-export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/emoji-picker'));
-export const Notifications = lazy(() => import('soapbox/features/notifications'));
-export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline'));
-export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline'));
-export const PublicTimeline = lazy(() => import('soapbox/features/public-timeline'));
-export const RemoteTimeline = lazy(() => import('soapbox/features/remote-timeline'));
-export const CommunityTimeline = lazy(() => import('soapbox/features/community-timeline'));
-export const HashtagTimeline = lazy(() => import('soapbox/features/hashtag-timeline'));
-export const DirectTimeline = lazy(() => import('soapbox/features/direct-timeline'));
-export const Conversations = lazy(() => import('soapbox/features/conversations'));
-export const ListTimeline = lazy(() => import('soapbox/features/list-timeline'));
-export const Lists = lazy(() => import('soapbox/features/lists'));
-export const Bookmarks = lazy(() => import('soapbox/features/bookmarks'));
-export const Status = lazy(() => import('soapbox/features/status'));
-export const PinnedStatuses = lazy(() => import('soapbox/features/pinned-statuses'));
-export const AccountTimeline = lazy(() => import('soapbox/features/account-timeline'));
-export const AccountGallery = lazy(() => import('soapbox/features/account-gallery'));
-export const Followers = lazy(() => import('soapbox/features/followers'));
-export const Following = lazy(() => import('soapbox/features/following'));
-export const FollowRequests = lazy(() => import('soapbox/features/follow-requests'));
-export const GenericNotFound = lazy(() => import('soapbox/features/generic-not-found'));
-export const FavouritedStatuses = lazy(() => import('soapbox/features/favourited-statuses'));
-export const Blocks = lazy(() => import('soapbox/features/blocks'));
-export const DomainBlocks = lazy(() => import('soapbox/features/domain-blocks'));
-export const Mutes = lazy(() => import('soapbox/features/mutes'));
-export const MuteModal = lazy(() => import('soapbox/features/ui/components/modals/mute-modal'));
-export const Filters = lazy(() => import('soapbox/features/filters'));
-export const EditFilter = lazy(() => import('soapbox/features/filters/edit-filter'));
-export const ReportModal = lazy(() => import('soapbox/features/ui/components/modals/report-modal/report-modal'));
-export const AccountModerationModal = lazy(() => import('soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal'));
-export const MediaGallery = lazy(() => import('soapbox/components/media-gallery'));
-export const Video = lazy(() => import('soapbox/features/video'));
-export const Audio = lazy(() => import('soapbox/features/audio'));
-export const MediaModal = lazy(() => import('soapbox/features/ui/components/modals/media-modal'));
-export const VideoModal = lazy(() => import('soapbox/features/ui/components/modals/video-modal'));
-export const BoostModal = lazy(() => import('soapbox/features/ui/components/modals/boost-modal'));
-export const ConfirmationModal = lazy(() => import('soapbox/features/ui/components/modals/confirmation-modal'));
-export const MissingDescriptionModal = lazy(() => import('soapbox/features/ui/components/modals/missing-description-modal'));
-export const ActionsModal = lazy(() => import('soapbox/features/ui/components/modals/actions-modal'));
-export const HotkeysModal = lazy(() => import('soapbox/features/ui/components/modals/hotkeys-modal'));
-export const ComposeModal = lazy(() => import('soapbox/features/ui/components/modals/compose-modal'));
-export const ReplyMentionsModal = lazy(() => import('soapbox/features/ui/components/modals/reply-mentions-modal'));
-export const UnauthorizedModal = lazy(() => import('soapbox/features/ui/components/modals/unauthorized-modal'));
-export const EditFederationModal = lazy(() => import('soapbox/features/ui/components/modals/edit-federation-modal'));
-export const EmbedModal = lazy(() => import('soapbox/features/ui/components/modals/embed-modal'));
-export const ComponentModal = lazy(() => import('soapbox/features/ui/components/modals/component-modal'));
-export const ReblogsModal = lazy(() => import('soapbox/features/ui/components/modals/reblogs-modal'));
-export const FavouritesModal = lazy(() => import('soapbox/features/ui/components/modals/favourites-modal'));
-export const DislikesModal = lazy(() => import('soapbox/features/ui/components/modals/dislikes-modal'));
-export const ReactionsModal = lazy(() => import('soapbox/features/ui/components/modals/reactions-modal'));
-export const MentionsModal = lazy(() => import('soapbox/features/ui/components/modals/mentions-modal'));
-export const LandingPageModal = lazy(() => import('soapbox/features/ui/components/modals/landing-page-modal'));
-export const BirthdaysModal = lazy(() => import('soapbox/features/ui/components/modals/birthdays-modal'));
-export const BirthdayPanel = lazy(() => import('soapbox/components/birthday-panel'));
-export const ListEditor = lazy(() => import('soapbox/features/list-editor'));
-export const ListAdder = lazy(() => import('soapbox/features/list-adder'));
-export const Search = lazy(() => import('soapbox/features/search'));
-export const LoginPage = lazy(() => import('soapbox/features/auth-login/components/login-page'));
-export const ExternalLogin = lazy(() => import('soapbox/features/external-login'));
-export const LogoutPage = lazy(() => import('soapbox/features/auth-login/components/logout'));
-export const RegistrationPage = lazy(() => import('soapbox/features/auth-login/components/registration-page'));
-export const Settings = lazy(() => import('soapbox/features/settings'));
-export const EditProfile = lazy(() => import('soapbox/features/edit-profile'));
-export const EditEmail = lazy(() => import('soapbox/features/edit-email'));
-export const EmailConfirmation = lazy(() => import('soapbox/features/email-confirmation'));
-export const EditPassword = lazy(() => import('soapbox/features/edit-password'));
-export const DeleteAccount = lazy(() => import('soapbox/features/delete-account'));
-export const SoapboxConfig = lazy(() => import('soapbox/features/soapbox-config'));
-export const ExportData = lazy(() => import('soapbox/features/export-data'));
-export const ImportData = lazy(() => import('soapbox/features/import-data'));
-export const Backups = lazy(() => import('soapbox/features/backups'));
-export const PasswordReset = lazy(() => import('soapbox/features/auth-login/components/password-reset'));
-export const PasswordResetConfirm = lazy(() => import('soapbox/features/auth-login/components/password-reset-confirm'));
-export const MfaForm = lazy(() => import('soapbox/features/security/mfa-form'));
-export const ChatIndex = lazy(() => import('soapbox/features/chats'));
-export const ChatWidget = lazy(() => import('soapbox/features/chats/components/chat-widget/chat-widget'));
-export const ServerInfo = lazy(() => import('soapbox/features/server-info'));
-export const Dashboard = lazy(() => import('soapbox/features/admin'));
-export const ModerationLog = lazy(() => import('soapbox/features/admin/moderation-log'));
-export const ThemeEditor = lazy(() => import('soapbox/features/theme-editor'));
-export const UserPanel = lazy(() => import('soapbox/features/ui/components/user-panel'));
-export const PromoPanel = lazy(() => import('soapbox/features/ui/components/promo-panel'));
-export const SignUpPanel = lazy(() => import('soapbox/features/ui/components/panels/sign-up-panel'));
-export const CtaBanner = lazy(() => import('soapbox/features/ui/components/cta-banner'));
-export const FundingPanel = lazy(() => import('soapbox/features/ui/components/funding-panel'));
-export const TrendsPanel = lazy(() => import('soapbox/features/ui/components/trends-panel'));
-export const ProfileInfoPanel = lazy(() => import('soapbox/features/ui/components/profile-info-panel'));
-export const ProfileMediaPanel = lazy(() => import('soapbox/features/ui/components/profile-media-panel'));
-export const ProfileFieldsPanel = lazy(() => import('soapbox/features/ui/components/profile-fields-panel'));
-export const PinnedAccountsPanel = lazy(() => import('soapbox/features/ui/components/pinned-accounts-panel'));
-export const InstanceInfoPanel = lazy(() => import('soapbox/features/ui/components/instance-info-panel'));
-export const InstanceModerationPanel = lazy(() => import('soapbox/features/ui/components/instance-moderation-panel'));
-export const LatestAccountsPanel = lazy(() => import('soapbox/features/admin/components/latest-accounts-panel'));
-export const SidebarMenu = lazy(() => import('soapbox/components/sidebar-menu'));
-export const ModalContainer = lazy(() => import('soapbox/features/ui/containers/modal-container'));
-export const ProfileHoverCard = lazy(() => import('soapbox/components/profile-hover-card'));
-export const StatusHoverCard = lazy(() => import('soapbox/components/status-hover-card'));
-export const CryptoDonate = lazy(() => import('soapbox/features/crypto-donate'));
-export const CryptoDonatePanel = lazy(() => import('soapbox/features/crypto-donate/components/crypto-donate-panel'));
-export const CryptoAddress = lazy(() => import('soapbox/features/crypto-donate/components/crypto-address'));
-export const CryptoDonateModal = lazy(() => import('soapbox/features/ui/components/modals/crypto-donate-modal'));
-export const LightningAddress = lazy(() => import('soapbox/features/crypto-donate/components/lightning-address'));
-export const ScheduledStatuses = lazy(() => import('soapbox/features/scheduled-statuses'));
-export const UserIndex = lazy(() => import('soapbox/features/admin/user-index'));
-export const FederationRestrictions = lazy(() => import('soapbox/features/federation-restrictions'));
-export const Aliases = lazy(() => import('soapbox/features/aliases'));
-export const Migration = lazy(() => import('soapbox/features/migration'));
-export const WhoToFollowPanel = lazy(() => import('soapbox/features/ui/components/who-to-follow-panel'));
-export const FollowRecommendations = lazy(() => import('soapbox/features/follow-recommendations'));
-export const Directory = lazy(() => import('soapbox/features/directory'));
-export const RegisterInvite = lazy(() => import('soapbox/features/register-invite'));
-export const Share = lazy(() => import('soapbox/features/share'));
-export const NewStatus = lazy(() => import('soapbox/features/new-status'));
-export const IntentionalError = lazy(() => import('soapbox/features/intentional-error'));
-export const Developers = lazy(() => import('soapbox/features/developers'));
-export const CreateApp = lazy(() => import('soapbox/features/developers/apps/create'));
-export const SettingsStore = lazy(() => import('soapbox/features/developers/settings-store'));
-export const TestTimeline = lazy(() => import('soapbox/features/test-timeline'));
-export const ServiceWorkerInfo = lazy(() => import('soapbox/features/developers/service-worker-info'));
-export const CompareHistoryModal = lazy(() => import('soapbox/features/ui/components/modals/compare-history-modal'));
-export const AuthTokenList = lazy(() => import('soapbox/features/auth-token-list'));
-export const FamiliarFollowersModal = lazy(() => import('soapbox/features/ui/components/modals/familiar-followers-modal'));
-export const AnnouncementsPanel = lazy(() => import('soapbox/components/announcements/announcements-panel'));
-export const Quotes = lazy(() => import('soapbox/features/quotes'));
-export const ComposeEventModal = lazy(() => import('soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal'));
-export const JoinEventModal = lazy(() => import('soapbox/features/ui/components/modals/join-event-modal'));
-export const EventHeader = lazy(() => import('soapbox/features/event/components/event-header'));
-export const EventInformation = lazy(() => import('soapbox/features/event/event-information'));
-export const EventDiscussion = lazy(() => import('soapbox/features/event/event-discussion'));
-export const EventMapModal = lazy(() => import('soapbox/features/ui/components/modals/event-map-modal'));
-export const EventParticipantsModal = lazy(() => import('soapbox/features/ui/components/modals/event-participants-modal'));
-export const Events = lazy(() => import('soapbox/features/events'));
-export const Groups = lazy(() => import('soapbox/features/groups'));
-export const GroupsDiscover = lazy(() => import('soapbox/features/groups/discover'));
-export const GroupsPopular = lazy(() => import('soapbox/features/groups/popular'));
-export const GroupsSuggested = lazy(() => import('soapbox/features/groups/suggested'));
-export const GroupsTag = lazy(() => import('soapbox/features/groups/tag'));
-export const GroupsTags = lazy(() => import('soapbox/features/groups/tags'));
-export const PendingGroupRequests = lazy(() => import('soapbox/features/groups/pending-requests'));
-export const GroupMembers = lazy(() => import('soapbox/features/group/group-members'));
-export const GroupTags = lazy(() => import('soapbox/features/group/group-tags'));
-export const GroupTagTimeline = lazy(() => import('soapbox/features/group/group-tag-timeline'));
-export const GroupTimeline = lazy(() => import('soapbox/features/group/group-timeline'));
-export const ManageGroup = lazy(() => import('soapbox/features/group/manage-group'));
-export const EditGroup = lazy(() => import('soapbox/features/group/edit-group'));
-export const GroupBlockedMembers = lazy(() => import('soapbox/features/group/group-blocked-members'));
-export const GroupMembershipRequests = lazy(() => import('soapbox/features/group/group-membership-requests'));
-export const GroupGallery = lazy(() => import('soapbox/features/group/group-gallery'));
-export const CreateGroupModal = lazy(() => import('soapbox/features/ui/components/modals/manage-group-modal/create-group-modal'));
-export const NewGroupPanel = lazy(() => import('soapbox/features/ui/components/panels/new-group-panel'));
-export const MyGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/my-groups-panel'));
-export const SuggestedGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/suggested-groups-panel'));
-export const GroupMediaPanel = lazy(() => import('soapbox/features/ui/components/group-media-panel'));
-export const NewEventPanel = lazy(() => import('soapbox/features/ui/components/panels/new-event-panel'));
-export const Announcements = lazy(() => import('soapbox/features/admin/announcements'));
-export const EditAnnouncementModal = lazy(() => import('soapbox/features/ui/components/modals/edit-announcement-modal'));
-export const FollowedTags = lazy(() => import('soapbox/features/followed-tags'));
-export const AccountNotePanel = lazy(() => import('soapbox/features/ui/components/panels/account-note-panel'));
-export const ComposeEditor = lazy(() => import('soapbox/features/compose/editor'));
-export const NostrSignupModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal'));
-export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-login-modal/nostr-login-modal'));
-export const BookmarkFolders = lazy(() => import('soapbox/features/bookmark-folders'));
-export const EditBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/edit-bookmark-folder-modal'));
-export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/select-bookmark-folder-modal'));
-export const EditIdentity = lazy(() => import('soapbox/features/edit-identity'));
-export const Domains = lazy(() => import('soapbox/features/admin/domains'));
-export const EditDomainModal = lazy(() => import('soapbox/features/ui/components/modals/edit-domain-modal'));
-export const NostrRelays = lazy(() => import('soapbox/features/nostr-relays'));
-export const Bech32Redirect = lazy(() => import('soapbox/features/nostr/Bech32Redirect'));
-export const ManageZapSplit = lazy(() => import('soapbox/features/admin/manage-zap-split'));
-export const Relays = lazy(() => import('soapbox/features/admin/relays'));
-export const Rules = lazy(() => import('soapbox/features/admin/rules'));
-export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal'));
-export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays'));
-export const ZapPayRequestModal = lazy(() => import('soapbox/features/ui/components/modals/zap-pay-request-modal'));
-export const ZapInvoiceModal = lazy(() => import('soapbox/features/ui/components/modals/zap-invoice'));
-export const ZapsModal = lazy(() => import('soapbox/features/ui/components/modals/zaps-modal'));
-export const ZapSplitModal = lazy(() => import('soapbox/features/ui/components/modals/zap-split/zap-split-modal'));
-export const CaptchaModal = lazy(() => import('soapbox/features/ui/components/modals/captcha-modal/captcha-modal'));
-export const NostrBunkerLogin = lazy(() => import('soapbox/features/nostr/nostr-bunker-login'));
\ No newline at end of file
+export const AboutPage = lazy(() => import('soapbox/features/about/index.tsx'));
+export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/emoji-picker.tsx'));
+export const Notifications = lazy(() => import('soapbox/features/notifications/index.tsx'));
+export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline/index.tsx'));
+export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline/index.tsx'));
+export const PublicTimeline = lazy(() => import('soapbox/features/public-timeline/index.tsx'));
+export const RemoteTimeline = lazy(() => import('soapbox/features/remote-timeline/index.tsx'));
+export const CommunityTimeline = lazy(() => import('soapbox/features/community-timeline/index.tsx'));
+export const HashtagTimeline = lazy(() => import('soapbox/features/hashtag-timeline/index.tsx'));
+export const DirectTimeline = lazy(() => import('soapbox/features/direct-timeline/index.tsx'));
+export const Conversations = lazy(() => import('soapbox/features/conversations/index.tsx'));
+export const ListTimeline = lazy(() => import('soapbox/features/list-timeline/index.tsx'));
+export const Lists = lazy(() => import('soapbox/features/lists/index.tsx'));
+export const Bookmarks = lazy(() => import('soapbox/features/bookmarks/index.tsx'));
+export const Status = lazy(() => import('soapbox/features/status/index.tsx'));
+export const PinnedStatuses = lazy(() => import('soapbox/features/pinned-statuses/index.tsx'));
+export const AccountTimeline = lazy(() => import('soapbox/features/account-timeline/index.tsx'));
+export const AccountGallery = lazy(() => import('soapbox/features/account-gallery/index.tsx'));
+export const Followers = lazy(() => import('soapbox/features/followers/index.tsx'));
+export const Following = lazy(() => import('soapbox/features/following/index.tsx'));
+export const FollowRequests = lazy(() => import('soapbox/features/follow-requests/index.tsx'));
+export const GenericNotFound = lazy(() => import('soapbox/features/generic-not-found/index.tsx'));
+export const FavouritedStatuses = lazy(() => import('soapbox/features/favourited-statuses/index.tsx'));
+export const Blocks = lazy(() => import('soapbox/features/blocks/index.tsx'));
+export const DomainBlocks = lazy(() => import('soapbox/features/domain-blocks/index.tsx'));
+export const Mutes = lazy(() => import('soapbox/features/mutes/index.tsx'));
+export const MuteModal = lazy(() => import('soapbox/features/ui/components/modals/mute-modal.tsx'));
+export const Filters = lazy(() => import('soapbox/features/filters/index.tsx'));
+export const EditFilter = lazy(() => import('soapbox/features/filters/edit-filter.tsx'));
+export const ReportModal = lazy(() => import('soapbox/features/ui/components/modals/report-modal/report-modal.tsx'));
+export const AccountModerationModal = lazy(() => import('soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx'));
+export const MediaGallery = lazy(() => import('soapbox/components/media-gallery.tsx'));
+export const Video = lazy(() => import('soapbox/features/video/index.tsx'));
+export const Audio = lazy(() => import('soapbox/features/audio/index.tsx'));
+export const MediaModal = lazy(() => import('soapbox/features/ui/components/modals/media-modal.tsx'));
+export const VideoModal = lazy(() => import('soapbox/features/ui/components/modals/video-modal.tsx'));
+export const BoostModal = lazy(() => import('soapbox/features/ui/components/modals/boost-modal.tsx'));
+export const ConfirmationModal = lazy(() => import('soapbox/features/ui/components/modals/confirmation-modal.tsx'));
+export const MissingDescriptionModal = lazy(() => import('soapbox/features/ui/components/modals/missing-description-modal.tsx'));
+export const ActionsModal = lazy(() => import('soapbox/features/ui/components/modals/actions-modal.tsx'));
+export const HotkeysModal = lazy(() => import('soapbox/features/ui/components/modals/hotkeys-modal.tsx'));
+export const ComposeModal = lazy(() => import('soapbox/features/ui/components/modals/compose-modal.tsx'));
+export const ReplyMentionsModal = lazy(() => import('soapbox/features/ui/components/modals/reply-mentions-modal.tsx'));
+export const UnauthorizedModal = lazy(() => import('soapbox/features/ui/components/modals/unauthorized-modal.tsx'));
+export const EditFederationModal = lazy(() => import('soapbox/features/ui/components/modals/edit-federation-modal.tsx'));
+export const EmbedModal = lazy(() => import('soapbox/features/ui/components/modals/embed-modal.tsx'));
+export const ComponentModal = lazy(() => import('soapbox/features/ui/components/modals/component-modal.tsx'));
+export const ReblogsModal = lazy(() => import('soapbox/features/ui/components/modals/reblogs-modal.tsx'));
+export const FavouritesModal = lazy(() => import('soapbox/features/ui/components/modals/favourites-modal.tsx'));
+export const DislikesModal = lazy(() => import('soapbox/features/ui/components/modals/dislikes-modal.tsx'));
+export const ReactionsModal = lazy(() => import('soapbox/features/ui/components/modals/reactions-modal.tsx'));
+export const MentionsModal = lazy(() => import('soapbox/features/ui/components/modals/mentions-modal.tsx'));
+export const LandingPageModal = lazy(() => import('soapbox/features/ui/components/modals/landing-page-modal.tsx'));
+export const BirthdaysModal = lazy(() => import('soapbox/features/ui/components/modals/birthdays-modal.tsx'));
+export const BirthdayPanel = lazy(() => import('soapbox/components/birthday-panel.tsx'));
+export const ListEditor = lazy(() => import('soapbox/features/list-editor/index.tsx'));
+export const ListAdder = lazy(() => import('soapbox/features/list-adder/index.tsx'));
+export const Search = lazy(() => import('soapbox/features/search/index.tsx'));
+export const LoginPage = lazy(() => import('soapbox/features/auth-login/components/login-page.tsx'));
+export const ExternalLogin = lazy(() => import('soapbox/features/external-login/index.tsx'));
+export const LogoutPage = lazy(() => import('soapbox/features/auth-login/components/logout.tsx'));
+export const RegistrationPage = lazy(() => import('soapbox/features/auth-login/components/registration-page.tsx'));
+export const Settings = lazy(() => import('soapbox/features/settings/index.tsx'));
+export const EditProfile = lazy(() => import('soapbox/features/edit-profile/index.tsx'));
+export const EditEmail = lazy(() => import('soapbox/features/edit-email/index.tsx'));
+export const EmailConfirmation = lazy(() => import('soapbox/features/email-confirmation/index.tsx'));
+export const EditPassword = lazy(() => import('soapbox/features/edit-password/index.tsx'));
+export const DeleteAccount = lazy(() => import('soapbox/features/delete-account/index.tsx'));
+export const SoapboxConfig = lazy(() => import('soapbox/features/soapbox-config/index.tsx'));
+export const ExportData = lazy(() => import('soapbox/features/export-data/index.tsx'));
+export const ImportData = lazy(() => import('soapbox/features/import-data/index.tsx'));
+export const Backups = lazy(() => import('soapbox/features/backups/index.tsx'));
+export const PasswordReset = lazy(() => import('soapbox/features/auth-login/components/password-reset.tsx'));
+export const PasswordResetConfirm = lazy(() => import('soapbox/features/auth-login/components/password-reset-confirm.tsx'));
+export const MfaForm = lazy(() => import('soapbox/features/security/mfa-form.tsx'));
+export const ChatIndex = lazy(() => import('soapbox/features/chats/index.tsx'));
+export const ChatWidget = lazy(() => import('soapbox/features/chats/components/chat-widget/chat-widget.tsx'));
+export const ServerInfo = lazy(() => import('soapbox/features/server-info/index.tsx'));
+export const Dashboard = lazy(() => import('soapbox/features/admin/index.tsx'));
+export const ModerationLog = lazy(() => import('soapbox/features/admin/moderation-log.tsx'));
+export const ThemeEditor = lazy(() => import('soapbox/features/theme-editor/index.tsx'));
+export const UserPanel = lazy(() => import('soapbox/features/ui/components/user-panel.tsx'));
+export const PromoPanel = lazy(() => import('soapbox/features/ui/components/promo-panel.tsx'));
+export const SignUpPanel = lazy(() => import('soapbox/features/ui/components/panels/sign-up-panel.tsx'));
+export const CtaBanner = lazy(() => import('soapbox/features/ui/components/cta-banner.tsx'));
+export const FundingPanel = lazy(() => import('soapbox/features/ui/components/funding-panel.tsx'));
+export const TrendsPanel = lazy(() => import('soapbox/features/ui/components/trends-panel.tsx'));
+export const ProfileInfoPanel = lazy(() => import('soapbox/features/ui/components/profile-info-panel.tsx'));
+export const ProfileMediaPanel = lazy(() => import('soapbox/features/ui/components/profile-media-panel.tsx'));
+export const ProfileFieldsPanel = lazy(() => import('soapbox/features/ui/components/profile-fields-panel.tsx'));
+export const PinnedAccountsPanel = lazy(() => import('soapbox/features/ui/components/pinned-accounts-panel.tsx'));
+export const InstanceInfoPanel = lazy(() => import('soapbox/features/ui/components/instance-info-panel.tsx'));
+export const InstanceModerationPanel = lazy(() => import('soapbox/features/ui/components/instance-moderation-panel.tsx'));
+export const LatestAccountsPanel = lazy(() => import('soapbox/features/admin/components/latest-accounts-panel.tsx'));
+export const SidebarMenu = lazy(() => import('soapbox/components/sidebar-menu.tsx'));
+export const ModalContainer = lazy(() => import('soapbox/features/ui/containers/modal-container.ts'));
+export const ProfileHoverCard = lazy(() => import('soapbox/components/profile-hover-card.tsx'));
+export const StatusHoverCard = lazy(() => import('soapbox/components/status-hover-card.tsx'));
+export const CryptoDonate = lazy(() => import('soapbox/features/crypto-donate/index.tsx'));
+export const CryptoDonatePanel = lazy(() => import('soapbox/features/crypto-donate/components/crypto-donate-panel.tsx'));
+export const CryptoAddress = lazy(() => import('soapbox/features/crypto-donate/components/crypto-address.tsx'));
+export const CryptoDonateModal = lazy(() => import('soapbox/features/ui/components/modals/crypto-donate-modal.tsx'));
+export const LightningAddress = lazy(() => import('soapbox/features/crypto-donate/components/lightning-address.tsx'));
+export const ScheduledStatuses = lazy(() => import('soapbox/features/scheduled-statuses/index.tsx'));
+export const UserIndex = lazy(() => import('soapbox/features/admin/user-index.tsx'));
+export const FederationRestrictions = lazy(() => import('soapbox/features/federation-restrictions/index.tsx'));
+export const Aliases = lazy(() => import('soapbox/features/aliases/index.tsx'));
+export const Migration = lazy(() => import('soapbox/features/migration/index.tsx'));
+export const WhoToFollowPanel = lazy(() => import('soapbox/features/ui/components/who-to-follow-panel.tsx'));
+export const FollowRecommendations = lazy(() => import('soapbox/features/follow-recommendations/index.tsx'));
+export const Directory = lazy(() => import('soapbox/features/directory/index.tsx'));
+export const RegisterInvite = lazy(() => import('soapbox/features/register-invite/index.tsx'));
+export const Share = lazy(() => import('soapbox/features/share/index.tsx'));
+export const NewStatus = lazy(() => import('soapbox/features/new-status/index.tsx'));
+export const IntentionalError = lazy(() => import('soapbox/features/intentional-error/index.tsx'));
+export const Developers = lazy(() => import('soapbox/features/developers/index.tsx'));
+export const CreateApp = lazy(() => import('soapbox/features/developers/apps/create.tsx'));
+export const SettingsStore = lazy(() => import('soapbox/features/developers/settings-store.tsx'));
+export const TestTimeline = lazy(() => import('soapbox/features/test-timeline/index.tsx'));
+export const ServiceWorkerInfo = lazy(() => import('soapbox/features/developers/service-worker-info.tsx'));
+export const CompareHistoryModal = lazy(() => import('soapbox/features/ui/components/modals/compare-history-modal.tsx'));
+export const AuthTokenList = lazy(() => import('soapbox/features/auth-token-list/index.tsx'));
+export const FamiliarFollowersModal = lazy(() => import('soapbox/features/ui/components/modals/familiar-followers-modal.tsx'));
+export const AnnouncementsPanel = lazy(() => import('soapbox/components/announcements/announcements-panel.tsx'));
+export const Quotes = lazy(() => import('soapbox/features/quotes/index.tsx'));
+export const ComposeEventModal = lazy(() => import('soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx'));
+export const JoinEventModal = lazy(() => import('soapbox/features/ui/components/modals/join-event-modal.tsx'));
+export const EventHeader = lazy(() => import('soapbox/features/event/components/event-header.tsx'));
+export const EventInformation = lazy(() => import('soapbox/features/event/event-information.tsx'));
+export const EventDiscussion = lazy(() => import('soapbox/features/event/event-discussion.tsx'));
+export const EventMapModal = lazy(() => import('soapbox/features/ui/components/modals/event-map-modal.tsx'));
+export const EventParticipantsModal = lazy(() => import('soapbox/features/ui/components/modals/event-participants-modal.tsx'));
+export const Events = lazy(() => import('soapbox/features/events/index.tsx'));
+export const Groups = lazy(() => import('soapbox/features/groups/index.tsx'));
+export const GroupsDiscover = lazy(() => import('soapbox/features/groups/discover.tsx'));
+export const GroupsPopular = lazy(() => import('soapbox/features/groups/popular.tsx'));
+export const GroupsSuggested = lazy(() => import('soapbox/features/groups/suggested.tsx'));
+export const GroupsTag = lazy(() => import('soapbox/features/groups/tag.tsx'));
+export const GroupsTags = lazy(() => import('soapbox/features/groups/tags.tsx'));
+export const PendingGroupRequests = lazy(() => import('soapbox/features/groups/pending-requests.tsx'));
+export const GroupMembers = lazy(() => import('soapbox/features/group/group-members.tsx'));
+export const GroupTags = lazy(() => import('soapbox/features/group/group-tags.tsx'));
+export const GroupTagTimeline = lazy(() => import('soapbox/features/group/group-tag-timeline.tsx'));
+export const GroupTimeline = lazy(() => import('soapbox/features/group/group-timeline.tsx'));
+export const ManageGroup = lazy(() => import('soapbox/features/group/manage-group.tsx'));
+export const EditGroup = lazy(() => import('soapbox/features/group/edit-group.tsx'));
+export const GroupBlockedMembers = lazy(() => import('soapbox/features/group/group-blocked-members.tsx'));
+export const GroupMembershipRequests = lazy(() => import('soapbox/features/group/group-membership-requests.tsx'));
+export const GroupGallery = lazy(() => import('soapbox/features/group/group-gallery.tsx'));
+export const CreateGroupModal = lazy(() => import('soapbox/features/ui/components/modals/manage-group-modal/create-group-modal.tsx'));
+export const NewGroupPanel = lazy(() => import('soapbox/features/ui/components/panels/new-group-panel.tsx'));
+export const MyGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/my-groups-panel.tsx'));
+export const SuggestedGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/suggested-groups-panel.tsx'));
+export const GroupMediaPanel = lazy(() => import('soapbox/features/ui/components/group-media-panel.tsx'));
+export const NewEventPanel = lazy(() => import('soapbox/features/ui/components/panels/new-event-panel.tsx'));
+export const Announcements = lazy(() => import('soapbox/features/admin/announcements.tsx'));
+export const EditAnnouncementModal = lazy(() => import('soapbox/features/ui/components/modals/edit-announcement-modal.tsx'));
+export const FollowedTags = lazy(() => import('soapbox/features/followed-tags/index.tsx'));
+export const AccountNotePanel = lazy(() => import('soapbox/features/ui/components/panels/account-note-panel.tsx'));
+export const ComposeEditor = lazy(() => import('soapbox/features/compose/editor/index.tsx'));
+export const NostrSignupModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx'));
+export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx'));
+export const BookmarkFolders = lazy(() => import('soapbox/features/bookmark-folders/index.tsx'));
+export const EditBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/edit-bookmark-folder-modal.tsx'));
+export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/select-bookmark-folder-modal.tsx'));
+export const EditIdentity = lazy(() => import('soapbox/features/edit-identity/index.tsx'));
+export const Domains = lazy(() => import('soapbox/features/admin/domains.tsx'));
+export const EditDomainModal = lazy(() => import('soapbox/features/ui/components/modals/edit-domain-modal.tsx'));
+export const NostrRelays = lazy(() => import('soapbox/features/nostr-relays/index.tsx'));
+export const Bech32Redirect = lazy(() => import('soapbox/features/nostr/Bech32Redirect.tsx'));
+export const ManageZapSplit = lazy(() => import('soapbox/features/admin/manage-zap-split.tsx'));
+export const Relays = lazy(() => import('soapbox/features/admin/relays.tsx'));
+export const Rules = lazy(() => import('soapbox/features/admin/rules.tsx'));
+export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal.tsx'));
+export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays.tsx'));
+export const ZapPayRequestModal = lazy(() => import('soapbox/features/ui/components/modals/zap-pay-request-modal.tsx'));
+export const ZapInvoiceModal = lazy(() => import('soapbox/features/ui/components/modals/zap-invoice.tsx'));
+export const ZapsModal = lazy(() => import('soapbox/features/ui/components/modals/zaps-modal.tsx'));
+export const ZapSplitModal = lazy(() => import('soapbox/features/ui/components/modals/zap-split/zap-split-modal.tsx'));
+export const CaptchaModal = lazy(() => import('soapbox/features/ui/components/modals/captcha-modal/captcha-modal.tsx'));
+export const NostrBunkerLogin = lazy(() => import('soapbox/features/nostr/nostr-bunker-login.tsx'));
\ No newline at end of file
diff --git a/src/features/ui/util/global-hotkeys.tsx b/src/features/ui/util/global-hotkeys.tsx
index ef25e6c69..ce187249c 100644
--- a/src/features/ui/util/global-hotkeys.tsx
+++ b/src/features/ui/util/global-hotkeys.tsx
@@ -1,12 +1,12 @@
 import { useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { resetCompose } from 'soapbox/actions/compose';
-import { openModal } from 'soapbox/actions/modals';
-import { FOCUS_EDITOR_COMMAND } from 'soapbox/features/compose/editor/plugins/focus-plugin';
-import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { resetCompose } from 'soapbox/actions/compose.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { FOCUS_EDITOR_COMMAND } from 'soapbox/features/compose/editor/plugins/focus-plugin.tsx';
+import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 
-import { HotKeys } from '../components/hotkeys';
+import { HotKeys } from '../components/hotkeys.tsx';
 
 import type { LexicalEditor } from 'lexical';
 
diff --git a/src/features/ui/util/optional-motion.tsx b/src/features/ui/util/optional-motion.tsx
index 84e0c466a..79855d639 100644
--- a/src/features/ui/util/optional-motion.tsx
+++ b/src/features/ui/util/optional-motion.tsx
@@ -1,8 +1,8 @@
 import { Motion, MotionProps } from 'react-motion';
 
-import { useSettings } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks/index.ts';
 
-import ReducedMotion from './reduced-motion';
+import ReducedMotion from './reduced-motion.tsx';
 
 const OptionalMotion = (props: MotionProps) => {
   const { reduceMotion } = useSettings();
diff --git a/src/features/ui/util/pending-status-builder.ts b/src/features/ui/util/pending-status-builder.ts
index cc3a06102..e2031bdde 100644
--- a/src/features/ui/util/pending-status-builder.ts
+++ b/src/features/ui/util/pending-status-builder.ts
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
-import { normalizeStatus } from 'soapbox/normalizers/status';
-import { calculateStatus } from 'soapbox/reducers/statuses';
-import { makeGetAccount } from 'soapbox/selectors';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
+import { calculateStatus } from 'soapbox/reducers/statuses.ts';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
-import type { PendingStatus } from 'soapbox/reducers/pending-statuses';
-import type { RootState } from 'soapbox/store';
+import type { PendingStatus } from 'soapbox/reducers/pending-statuses.ts';
+import type { RootState } from 'soapbox/store.ts';
 
 const getAccount = makeGetAccount();
 
diff --git a/src/features/ui/util/react-router-helpers.tsx b/src/features/ui/util/react-router-helpers.tsx
index 40f2c6023..e09a9350f 100644
--- a/src/features/ui/util/react-router-helpers.tsx
+++ b/src/features/ui/util/react-router-helpers.tsx
@@ -2,13 +2,13 @@ import { Suspense, useEffect, useRef } from 'react';
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType, useLocation } from 'react-router-dom';
 
-import { Layout } from 'soapbox/components/ui';
-import { useOwnAccount, useSettings } from 'soapbox/hooks';
+import { Layout } from 'soapbox/components/ui/index.ts';
+import { useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
 
-import ColumnForbidden from '../components/column-forbidden';
-import ColumnLoading from '../components/column-loading';
-import ColumnsArea from '../components/columns-area';
-import ErrorColumn from '../components/error-column';
+import ColumnForbidden from '../components/column-forbidden.tsx';
+import ColumnLoading from '../components/column-loading.tsx';
+import ColumnsArea from '../components/columns-area.tsx';
+import ErrorColumn from '../components/error-column.tsx';
 
 type PageProps = {
   params?: MatchType['params'];
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index 6d6fc91e7..dfca5663e 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -10,12 +10,12 @@ import throttle from 'lodash/throttle';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import Blurhash from 'soapbox/components/blurhash';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media-aspect-ratio';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media-aspect-ratio.ts';
 
-import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
+import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen.ts';
 
 const DEFAULT_HEIGHT = 300;
 
diff --git a/src/features/zap/components/zap-button/zap-button.tsx b/src/features/zap/components/zap-button/zap-button.tsx
index f5a840b49..02a24cfae 100644
--- a/src/features/zap/components/zap-button/zap-button.tsx
+++ b/src/features/zap/components/zap-button/zap-button.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IButton {
   /** Whether this button expands the width of its container. */
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index e73d509b0..6590ed79b 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -5,23 +5,23 @@ import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { zap } from 'soapbox/actions/interactions';
-import { openModal, closeModal } from 'soapbox/actions/modals';
-import useZapSplit from 'soapbox/api/hooks/zap-split/useZapSplit';
+import { zap } from 'soapbox/actions/interactions.ts';
+import { openModal, closeModal } from 'soapbox/actions/modals.ts';
+import useZapSplit from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
 import chestIcon from 'soapbox/assets/icons/chest.png';
 import coinStack from 'soapbox/assets/icons/coin-stack.png';
 import coinIcon from 'soapbox/assets/icons/coin.png';
 import moneyBag from 'soapbox/assets/icons/money-bag.png';
 import pileCoin from 'soapbox/assets/icons/pile-coin.png';
-import DisplayNameInline from 'soapbox/components/display-name-inline';
-import { Stack, Button, Input, Avatar, Text } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch } from 'soapbox/hooks';
+import DisplayNameInline from 'soapbox/components/display-name-inline.tsx';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import { Stack, Button, Input, Avatar, Text } from 'soapbox/components/ui/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import ZapButton from './zap-button/zap-button';
+import ZapButton from './zap-button/zap-button.tsx';
 
-import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
+import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities.ts';
 
 const ZAP_PRESETS = [
   { amount: 50, icon: coinIcon },
diff --git a/src/features/zap/components/zap-split-account-item.tsx b/src/features/zap/components/zap-split-account-item.tsx
index cd2776464..3f3029240 100644
--- a/src/features/zap/components/zap-split-account-item.tsx
+++ b/src/features/zap/components/zap-split-account-item.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import { Slider } from 'soapbox/components/ui';
+import { Slider } from 'soapbox/components/ui/index.ts';
 
 const formattedWeight = (weight: number) =>{
   return Number((weight * 100).toFixed());
diff --git a/src/globals.ts b/src/globals.ts
index f2c1eb35b..e67c5742b 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -2,9 +2,9 @@
  * globals: do things through the console.
  * This feature is for developers.
  */
-import { changeSettingImmediate } from 'soapbox/actions/settings';
+import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
 
-import type { Store } from 'soapbox/store';
+import type { Store } from 'soapbox/store.ts';
 
 /** Add Soapbox globals to the window. */
 export const createGlobals = (store: Store) => {
diff --git a/src/hooks/forms/index.ts b/src/hooks/forms/index.ts
index 7e2c9e7e1..cafcbbede 100644
--- a/src/hooks/forms/index.ts
+++ b/src/hooks/forms/index.ts
@@ -1,3 +1,3 @@
-export { useImageField } from './useImageField';
-export { useTextField } from './useTextField';
-export { usePreview } from './usePreview';
\ No newline at end of file
+export { useImageField } from './useImageField.ts';
+export { useTextField } from './useTextField.ts';
+export { usePreview } from './usePreview.ts';
\ No newline at end of file
diff --git a/src/hooks/forms/useImageField.ts b/src/hooks/forms/useImageField.ts
index cff47f3ff..244098799 100644
--- a/src/hooks/forms/useImageField.ts
+++ b/src/hooks/forms/useImageField.ts
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
-import resizeImage from 'soapbox/utils/resize-image';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
-import { usePreview } from './usePreview';
+import { usePreview } from './usePreview.ts';
 
 interface UseImageFieldOpts {
   /** Resize the image to the max dimensions, if defined. */
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index abfbd726c..2c27dfa80 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,25 +1,25 @@
-export { useApi } from './useApi';
-export { useAppDispatch } from './useAppDispatch';
-export { useAppSelector } from './useAppSelector';
-export { useBackend } from './useBackend';
-export { useClickOutside } from './useClickOutside';
-export { useCompose } from './useCompose';
-export { useDebounce } from './useDebounce';
-export { useDraggedFiles } from './useDraggedFiles';
-export { useGetState } from './useGetState';
-export { useDimensions } from './useDimensions';
-export { useFeatures } from './useFeatures';
-export { useInstance } from './useInstance';
-export { useLoading } from './useLoading';
-export { useLocale } from './useLocale';
-export { useLoggedIn } from './useLoggedIn';
-export { useOnScreen } from './useOnScreen';
-export { useOwnAccount } from './useOwnAccount';
-export { usePrevious } from './usePrevious';
-export { useRefEventHandler } from './useRefEventHandler';
-export { useRegistrationStatus } from './useRegistrationStatus';
-export { useSettings } from './useSettings';
-export { useSoapboxConfig } from './useSoapboxConfig';
-export { useSystemTheme } from './useSystemTheme';
-export { useTheme } from './useTheme';
-export { useSettingsNotifications } from './useSettingsNotifications';
\ No newline at end of file
+export { useApi } from './useApi.ts';
+export { useAppDispatch } from './useAppDispatch.ts';
+export { useAppSelector } from './useAppSelector.ts';
+export { useBackend } from './useBackend.ts';
+export { useClickOutside } from './useClickOutside.ts';
+export { useCompose } from './useCompose.ts';
+export { useDebounce } from './useDebounce.ts';
+export { useDraggedFiles } from './useDraggedFiles.ts';
+export { useGetState } from './useGetState.ts';
+export { useDimensions } from './useDimensions.ts';
+export { useFeatures } from './useFeatures.ts';
+export { useInstance } from './useInstance.ts';
+export { useLoading } from './useLoading.ts';
+export { useLocale } from './useLocale.ts';
+export { useLoggedIn } from './useLoggedIn.ts';
+export { useOnScreen } from './useOnScreen.ts';
+export { useOwnAccount } from './useOwnAccount.ts';
+export { usePrevious } from './usePrevious.ts';
+export { useRefEventHandler } from './useRefEventHandler.ts';
+export { useRegistrationStatus } from './useRegistrationStatus.ts';
+export { useSettings } from './useSettings.ts';
+export { useSoapboxConfig } from './useSoapboxConfig.ts';
+export { useSystemTheme } from './useSystemTheme.ts';
+export { useTheme } from './useTheme.ts';
+export { useSettingsNotifications } from './useSettingsNotifications.ts';
\ No newline at end of file
diff --git a/src/hooks/nostr/useBunker.ts b/src/hooks/nostr/useBunker.ts
index 6cb7058ca..6a226ed64 100644
--- a/src/hooks/nostr/useBunker.ts
+++ b/src/hooks/nostr/useBunker.ts
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { NBunker } from 'soapbox/features/nostr/NBunker';
-import { useSigner } from 'soapbox/hooks/nostr/useSigner';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { NBunker } from 'soapbox/features/nostr/NBunker.ts';
+import { useSigner } from 'soapbox/hooks/nostr/useSigner.ts';
 
 function useBunker() {
   const { relay } = useNostr();
diff --git a/src/hooks/nostr/useBunkerStore.ts b/src/hooks/nostr/useBunkerStore.ts
index 2608df303..a9571092b 100644
--- a/src/hooks/nostr/useBunkerStore.ts
+++ b/src/hooks/nostr/useBunkerStore.ts
@@ -5,7 +5,7 @@ import { create } from 'zustand';
 // eslint-disable-next-line import/extensions
 import { persist } from 'zustand/middleware';
 
-import { filteredArray, jsonSchema } from 'soapbox/schemas/utils';
+import { filteredArray, jsonSchema } from 'soapbox/schemas/utils.ts';
 
 /**
  * A bunker connection maps an OAuth token from Mastodon API to a user pubkey and bunker keypair.
diff --git a/src/hooks/nostr/useSigner.ts b/src/hooks/nostr/useSigner.ts
index 8541a2430..6a8d38a98 100644
--- a/src/hooks/nostr/useSigner.ts
+++ b/src/hooks/nostr/useSigner.ts
@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useAppSelector } from 'soapbox/hooks';
-import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore.ts';
 
 export function useSigner() {
   const { connections } = useBunkerStore();
diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts
index 5d0baaf1b..de87c069a 100644
--- a/src/hooks/useApi.ts
+++ b/src/hooks/useApi.ts
@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 
-import { MastodonClient } from 'soapbox/api/MastodonClient';
-import * as BuildConfig from 'soapbox/build-config';
+import { MastodonClient } from 'soapbox/api/MastodonClient.ts';
+import * as BuildConfig from 'soapbox/build-config.ts';
 
-import { useAppSelector } from './useAppSelector';
-import { useOwnAccount } from './useOwnAccount';
+import { useAppSelector } from './useAppSelector.ts';
+import { useOwnAccount } from './useOwnAccount.ts';
 
 export function useApi(): MastodonClient {
   const { account } = useOwnAccount();
diff --git a/src/hooks/useAppDispatch.ts b/src/hooks/useAppDispatch.ts
index fa28aa0d2..2caeeb010 100644
--- a/src/hooks/useAppDispatch.ts
+++ b/src/hooks/useAppDispatch.ts
@@ -1,5 +1,5 @@
 import { useDispatch } from 'react-redux';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/src/hooks/useAppSelector.ts b/src/hooks/useAppSelector.ts
index 4394afb21..a4b60b02f 100644
--- a/src/hooks/useAppSelector.ts
+++ b/src/hooks/useAppSelector.ts
@@ -1,5 +1,5 @@
 import { TypedUseSelectorHook, useSelector } from 'react-redux';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/hooks/useBackend.ts b/src/hooks/useBackend.ts
index fbbad827d..59d79f7f9 100644
--- a/src/hooks/useBackend.ts
+++ b/src/hooks/useBackend.ts
@@ -1,6 +1,6 @@
-import { parseVersion } from 'soapbox/utils/features';
+import { parseVersion } from 'soapbox/utils/features.ts';
 
-import { useInstance } from './useInstance';
+import { useInstance } from './useInstance.ts';
 
 /**
  * Get the Backend version.
diff --git a/src/hooks/useCompose.ts b/src/hooks/useCompose.ts
index 0d0ef1688..f73743b62 100644
--- a/src/hooks/useCompose.ts
+++ b/src/hooks/useCompose.ts
@@ -1,6 +1,6 @@
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
-import type { ReducerCompose } from 'soapbox/reducers/compose';
+import type { ReducerCompose } from 'soapbox/reducers/compose.ts';
 
 /** Get compose for given key with fallback to 'default' */
 export const useCompose = <ID extends string>(composeId: ID extends 'default' ? never : ID): ReturnType<typeof ReducerCompose> => {
diff --git a/src/hooks/useDimensions.test.ts b/src/hooks/useDimensions.test.ts
index 756f128e2..7c35eb471 100644
--- a/src/hooks/useDimensions.test.ts
+++ b/src/hooks/useDimensions.test.ts
@@ -1,8 +1,8 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { listener, mockDisconnect } from './__mocks__/resize-observer';
-import { useDimensions } from './useDimensions';
+import { listener, mockDisconnect } from './__mocks__/resize-observer.ts';
+import { useDimensions } from './useDimensions.ts';
 
 describe('useDimensions()', () => {
   beforeEach(() => {
diff --git a/src/hooks/useFeatures.ts b/src/hooks/useFeatures.ts
index f68cca14a..0e95325d0 100644
--- a/src/hooks/useFeatures.ts
+++ b/src/hooks/useFeatures.ts
@@ -1,6 +1,6 @@
-import { getFeatures, Features } from 'soapbox/utils/features';
+import { getFeatures, Features } from 'soapbox/utils/features.ts';
 
-import { useInstance } from './useInstance';
+import { useInstance } from './useInstance.ts';
 
 /** Get features for the current instance. */
 export const useFeatures = (): Features => {
diff --git a/src/hooks/useGetState.ts b/src/hooks/useGetState.ts
index 848c0c348..6a8768739 100644
--- a/src/hooks/useGetState.ts
+++ b/src/hooks/useGetState.ts
@@ -1,6 +1,6 @@
-import { useAppDispatch } from './useAppDispatch';
+import { useAppDispatch } from './useAppDispatch.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 /**
  * Provides a `getState()` function to hooks.
diff --git a/src/hooks/useInstance.ts b/src/hooks/useInstance.ts
index 46557f587..803889ffa 100644
--- a/src/hooks/useInstance.ts
+++ b/src/hooks/useInstance.ts
@@ -1,11 +1,11 @@
 import { useEffect, useMemo } from 'react';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1';
-import { useInstanceV2 } from 'soapbox/api/hooks/instance/useInstanceV2';
-import { instanceV2Schema, upgradeInstance } from 'soapbox/schemas/instance';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1.ts';
+import { useInstanceV2 } from 'soapbox/api/hooks/instance/useInstanceV2.ts';
+import { instanceV2Schema, upgradeInstance } from 'soapbox/schemas/instance.ts';
 
-import { useAppDispatch } from './useAppDispatch';
+import { useAppDispatch } from './useAppDispatch.ts';
 
 interface Opts {
   /** The base URL of the instance. */
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
index 2bfbafdc2..771d5186f 100644
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@@ -1,4 +1,4 @@
-import { useScreenWidth } from './useScreenWidth';
+import { useScreenWidth } from './useScreenWidth.ts';
 
 export function useIsMobile() {
   const screenWidth = useScreenWidth();
diff --git a/src/hooks/useLocale.ts b/src/hooks/useLocale.ts
index 6a8d7943c..0c5604e31 100644
--- a/src/hooks/useLocale.ts
+++ b/src/hooks/useLocale.ts
@@ -1,6 +1,6 @@
-import { getLocale } from 'soapbox/actions/settings';
+import { getLocale } from 'soapbox/actions/settings.ts';
 
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
 /** Locales which should be presented in right-to-left. */
 const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he'];
diff --git a/src/hooks/useLoggedIn.ts b/src/hooks/useLoggedIn.ts
index ad7860aca..b32ce1219 100644
--- a/src/hooks/useLoggedIn.ts
+++ b/src/hooks/useLoggedIn.ts
@@ -1,4 +1,4 @@
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
 function useLoggedIn() {
   const me = useAppSelector(state => state.me);
diff --git a/src/hooks/useOwnAccount.ts b/src/hooks/useOwnAccount.ts
index 6792ca603..fd7758e85 100644
--- a/src/hooks/useOwnAccount.ts
+++ b/src/hooks/useOwnAccount.ts
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
-import { makeGetAccount } from 'soapbox/selectors';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
 /** Get the logged-in account from the store, if any. */
 export const useOwnAccount = () => {
diff --git a/src/hooks/useRegistrationStatus.ts b/src/hooks/useRegistrationStatus.ts
index 4d1068ce9..e341d5b29 100644
--- a/src/hooks/useRegistrationStatus.ts
+++ b/src/hooks/useRegistrationStatus.ts
@@ -1,5 +1,5 @@
-import { useFeatures } from './useFeatures';
-import { useInstance } from './useInstance';
+import { useFeatures } from './useFeatures.ts';
+import { useInstance } from './useInstance.ts';
 
 export const useRegistrationStatus = () => {
   const { instance } = useInstance();
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index eda0153c6..00d339e96 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { settingsSchema } from 'soapbox/schemas/soapbox/settings';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { settingsSchema } from 'soapbox/schemas/soapbox/settings.ts';
 
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
 /** Get the user settings from the store */
 export const useSettings = () => {
diff --git a/src/hooks/useSettingsNotifications.ts b/src/hooks/useSettingsNotifications.ts
index f8ab9ab78..ecc9e4971 100644
--- a/src/hooks/useSettingsNotifications.ts
+++ b/src/hooks/useSettingsNotifications.ts
@@ -1,6 +1,6 @@
-import { useFeatures } from './useFeatures';
-import { useOwnAccount } from './useOwnAccount';
-import { useSettings } from './useSettings';
+import { useFeatures } from './useFeatures.ts';
+import { useOwnAccount } from './useOwnAccount.ts';
+import { useSettings } from './useSettings.ts';
 
 type SettingsNotification = 'needsNip05';
 
diff --git a/src/hooks/useSoapboxConfig.ts b/src/hooks/useSoapboxConfig.ts
index 3f4c33e82..8e6aec6dc 100644
--- a/src/hooks/useSoapboxConfig.ts
+++ b/src/hooks/useSoapboxConfig.ts
@@ -1,8 +1,8 @@
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox.ts';
 
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
-import type { SoapboxConfig } from 'soapbox/types/soapbox';
+import type { SoapboxConfig } from 'soapbox/types/soapbox.ts';
 
 /** Get the Soapbox config from the store */
 export const useSoapboxConfig = (): SoapboxConfig => {
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 8a53cd376..e37a3c544 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,5 +1,5 @@
-import { useSettings } from './useSettings';
-import { useSystemTheme } from './useSystemTheme';
+import { useSettings } from './useSettings.ts';
+import { useSystemTheme } from './useSystemTheme.ts';
 
 type Theme = 'light' | 'dark' | 'black';
 
diff --git a/src/init/soapbox-head.tsx b/src/init/soapbox-head.tsx
index 3125c601b..b8e608615 100644
--- a/src/init/soapbox-head.tsx
+++ b/src/init/soapbox-head.tsx
@@ -6,12 +6,12 @@ import {
   useSoapboxConfig,
   useTheme,
   useLocale,
-} from 'soapbox/hooks';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import { startSentry } from 'soapbox/sentry';
-import { generateThemeCss } from 'soapbox/utils/theme';
+} from 'soapbox/hooks/index.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import { startSentry } from 'soapbox/sentry.ts';
+import { generateThemeCss } from 'soapbox/utils/theme.ts';
 
-const Helmet = lazy(() => import('soapbox/components/helmet'));
+const Helmet = lazy(() => import('soapbox/components/helmet.tsx'));
 
 interface ISoapboxHead {
   children: React.ReactNode;
diff --git a/src/init/soapbox-load.tsx b/src/init/soapbox-load.tsx
index 858e22b34..3f1617ebb 100644
--- a/src/init/soapbox-load.tsx
+++ b/src/init/soapbox-load.tsx
@@ -1,20 +1,21 @@
 import { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 
-import { fetchMe } from 'soapbox/actions/me';
-import { loadSoapboxConfig } from 'soapbox/actions/soapbox';
-import LoadingScreen from 'soapbox/components/loading-screen';
-import { useNostr } from 'soapbox/contexts/nostr-context';
+
+import { fetchMe } from 'soapbox/actions/me.ts';
+import { loadSoapboxConfig } from 'soapbox/actions/soapbox.ts';
+import LoadingScreen from 'soapbox/components/loading-screen.tsx';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import {
   useAppSelector,
   useAppDispatch,
   useOwnAccount,
   useLocale,
   useInstance,
-} from 'soapbox/hooks';
-import { useBunker } from 'soapbox/hooks/nostr/useBunker';
-import { useSigner } from 'soapbox/hooks/nostr/useSigner';
-import MESSAGES from 'soapbox/messages';
+} from 'soapbox/hooks/index.ts';
+import { useBunker } from 'soapbox/hooks/nostr/useBunker.ts';
+import { useSigner } from 'soapbox/hooks/nostr/useSigner.ts';
+import MESSAGES from 'soapbox/messages.ts';
 
 /** Load initial data from the backend */
 const loadInitial = () => {
diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx
index 80fdc2f61..1f193551f 100644
--- a/src/init/soapbox-mount.tsx
+++ b/src/init/soapbox-mount.tsx
@@ -3,26 +3,26 @@ import { Toaster } from 'react-hot-toast';
 import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 
-import { openModal } from 'soapbox/actions/modals';
-import * as BuildConfig from 'soapbox/build-config';
-import LoadingScreen from 'soapbox/components/loading-screen';
-import { ScrollContext } from 'soapbox/components/scroll-context';
-import SiteErrorBoundary from 'soapbox/components/site-error-boundary';
+import { openModal } from 'soapbox/actions/modals.ts';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import LoadingScreen from 'soapbox/components/loading-screen.tsx';
+import { ScrollContext } from 'soapbox/components/scroll-context.tsx';
+import SiteErrorBoundary from 'soapbox/components/site-error-boundary.tsx';
 import {
   ModalContainer,
-} from 'soapbox/features/ui/util/async-components';
+} from 'soapbox/features/ui/util/async-components.ts';
 import {
   useAppDispatch,
   useAppSelector,
   useLoggedIn,
   useOwnAccount,
   useSoapboxConfig,
-} from 'soapbox/hooks';
-import { useCachedLocationHandler } from 'soapbox/utils/redirect';
+} from 'soapbox/hooks/index.ts';
+import { useCachedLocationHandler } from 'soapbox/utils/redirect.ts';
 
-const GdprBanner = lazy(() => import('soapbox/components/gdpr-banner'));
-const EmbeddedStatus = lazy(() => import('soapbox/features/embedded-status'));
-const UI = lazy(() => import('soapbox/features/ui'));
+const GdprBanner = lazy(() => import('soapbox/components/gdpr-banner.tsx'));
+const EmbeddedStatus = lazy(() => import('soapbox/features/embedded-status/index.tsx'));
+const UI = lazy(() => import('soapbox/features/ui/index.tsx'));
 
 /** Highest level node with the Redux store. */
 const SoapboxMount = () => {
diff --git a/src/init/soapbox.tsx b/src/init/soapbox.tsx
index 117b732b5..cbddedf53 100644
--- a/src/init/soapbox.tsx
+++ b/src/init/soapbox.tsx
@@ -1,18 +1,18 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { Provider } from 'react-redux';
 
-import { NostrProvider } from 'soapbox/contexts/nostr-context';
-import { StatProvider } from 'soapbox/contexts/stat-context';
-import { createGlobals } from 'soapbox/globals';
-import { queryClient } from 'soapbox/queries/client';
+import { NostrProvider } from 'soapbox/contexts/nostr-context.tsx';
+import { StatProvider } from 'soapbox/contexts/stat-context.tsx';
+import { createGlobals } from 'soapbox/globals.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
 
-import { checkOnboardingStatus } from '../actions/onboarding';
-import { preload } from '../actions/preload';
-import { store } from '../store';
+import { checkOnboardingStatus } from '../actions/onboarding.ts';
+import { preload } from '../actions/preload.ts';
+import { store } from '../store.ts';
 
-import SoapboxHead from './soapbox-head';
-import SoapboxLoad from './soapbox-load';
-import SoapboxMount from './soapbox-mount';
+import SoapboxHead from './soapbox-head.tsx';
+import SoapboxLoad from './soapbox-load.tsx';
+import SoapboxMount from './soapbox-mount.tsx';
 
 // Configure global functions for developers
 createGlobals(store);
diff --git a/src/jest/factory.ts b/src/jest/factory.ts
index a2818c0c8..3d6dacf48 100644
--- a/src/jest/factory.ts
+++ b/src/jest/factory.ts
@@ -1,3 +1,4 @@
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import {
   accountSchema,
   cardSchema,
@@ -15,9 +16,8 @@ import {
   type GroupTag,
   type Relationship,
   type Status,
-} from 'soapbox/schemas';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance';
+} from 'soapbox/schemas/index.ts';
+import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance.ts';
 
 import type { PartialDeep } from 'type-fest';
 
diff --git a/src/jest/mock-stores.tsx b/src/jest/mock-stores.tsx
index 638a7d4a9..029f98d79 100644
--- a/src/jest/mock-stores.tsx
+++ b/src/jest/mock-stores.tsx
@@ -1,7 +1,7 @@
 import alexJson from 'soapbox/__fixtures__/pleroma-account.json';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import { buildAccount } from './factory';
+import { buildAccount } from './factory.ts';
 
 /** Store with registrations open. */
 const storeOpen = { instance: instanceV1Schema.parse({ registrations: true }) };
diff --git a/src/jest/test-helpers.tsx b/src/jest/test-helpers.tsx
index 064f686c8..d3a8fd81f 100644
--- a/src/jest/test-helpers.tsx
+++ b/src/jest/test-helpers.tsx
@@ -12,14 +12,14 @@ import { Action, applyMiddleware, createStore } from 'redux';
 import { thunk } from 'redux-thunk';
 import { afterAll, beforeAll } from 'vitest';
 
-import { ChatProvider } from 'soapbox/contexts/chat-context';
-import { StatProvider } from 'soapbox/contexts/stat-context';
-import { queryClient } from 'soapbox/queries/client';
+import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
+import { StatProvider } from 'soapbox/contexts/stat-context.tsx';
+import { queryClient } from 'soapbox/queries/client.ts';
 
-import { default as rootReducer } from '../reducers';
+import { default as rootReducer } from '../reducers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 // Mock Redux
 // https://redux.js.org/recipes/writing-tests/
diff --git a/src/jest/test-setup.ts b/src/jest/test-setup.ts
index 0f0e5ac90..0bd11d45a 100644
--- a/src/jest/test-setup.ts
+++ b/src/jest/test-setup.ts
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom/vitest';
 import 'fake-indexeddb/auto';
 import { afterEach, vi } from 'vitest';
 
-import { __clear as clearApiMocks } from '../api/__mocks__';
+import { __clear as clearApiMocks } from '../api/__mocks__/index.ts';
 
 // API mocking
 vi.mock('soapbox/api');
diff --git a/src/middleware/errors.ts b/src/middleware/errors.ts
index 6513f9baf..675bd60d0 100644
--- a/src/middleware/errors.ts
+++ b/src/middleware/errors.ts
@@ -1,4 +1,4 @@
-import toast from 'soapbox/toast';
+import toast from 'soapbox/toast.tsx';
 
 import type { AnyAction, Middleware } from 'redux';
 
diff --git a/src/middleware/sounds.ts b/src/middleware/sounds.ts
index 11367b056..f7440ee82 100644
--- a/src/middleware/sounds.ts
+++ b/src/middleware/sounds.ts
@@ -1,7 +1,7 @@
-import { play, soundCache } from 'soapbox/utils/sounds';
+import { play, soundCache } from 'soapbox/utils/sounds.ts';
 
 import type { AnyAction, Middleware } from 'redux';
-import type { Sounds } from 'soapbox/utils/sounds';
+import type { Sounds } from 'soapbox/utils/sounds.ts';
 
 interface Action extends AnyAction {
   meta: {
diff --git a/src/normalizers/account.test.ts b/src/normalizers/account.test.ts
index 9d2f9fe34..763a19ce8 100644
--- a/src/normalizers/account.test.ts
+++ b/src/normalizers/account.test.ts
@@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest';
 import AVATAR_MISSING from 'soapbox/assets/images/avatar-missing.png';
 import HEADER_MISSING from 'soapbox/assets/images/header-missing.png';
 
-import { normalizeAccount } from './account';
+import { normalizeAccount } from './account.ts';
 
 describe('normalizeAccount()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/account.ts b/src/normalizers/account.ts
index c974ccf1b..ed67d2110 100644
--- a/src/normalizers/account.ts
+++ b/src/normalizers/account.ts
@@ -13,13 +13,13 @@ import {
 
 import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
 import headerMissing from 'soapbox/assets/images/header-missing.png';
-import emojify from 'soapbox/features/emoji';
-import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { unescapeHTML } from 'soapbox/utils/html';
-import { mergeDefined, makeEmojiMap } from 'soapbox/utils/normalizers';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { normalizeEmoji } from 'soapbox/normalizers/emoji.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
+import { mergeDefined, makeEmojiMap } from 'soapbox/utils/normalizers.ts';
 
-import type { PatronAccount } from 'soapbox/reducers/patron';
-import type { Emoji, Field, EmbeddedEntity, Relationship } from 'soapbox/types/entities';
+import type { PatronAccount } from 'soapbox/reducers/patron.ts';
+import type { Emoji, Field, EmbeddedEntity, Relationship } from 'soapbox/types/entities.ts';
 
 // https://docs.joinmastodon.org/entities/account/
 export const AccountRecord = ImmutableRecord({
diff --git a/src/normalizers/admin-account.ts b/src/normalizers/admin-account.ts
index 7422e123d..6752355e9 100644
--- a/src/normalizers/admin-account.ts
+++ b/src/normalizers/admin-account.ts
@@ -9,7 +9,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import type { Account, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Account, EmbeddedEntity } from 'soapbox/types/entities.ts';
 
 export const AdminAccountRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
diff --git a/src/normalizers/admin-report.ts b/src/normalizers/admin-report.ts
index 71e616e8d..8ade7d123 100644
--- a/src/normalizers/admin-report.ts
+++ b/src/normalizers/admin-report.ts
@@ -9,7 +9,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import type { Account, EmbeddedEntity, Status } from 'soapbox/types/entities';
+import type { Account, EmbeddedEntity, Status } from 'soapbox/types/entities.ts';
 
 export const AdminReportRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
diff --git a/src/normalizers/attachment.test.ts b/src/normalizers/attachment.test.ts
index 59a4f7b14..8e1935102 100644
--- a/src/normalizers/attachment.test.ts
+++ b/src/normalizers/attachment.test.ts
@@ -1,7 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { normalizeAttachment } from './attachment';
+import { normalizeAttachment } from './attachment.ts';
 
 describe('normalizeAttachment()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/attachment.ts b/src/normalizers/attachment.ts
index b63337adc..db588f02d 100644
--- a/src/normalizers/attachment.ts
+++ b/src/normalizers/attachment.ts
@@ -9,7 +9,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import { mergeDefined } from 'soapbox/utils/normalizers';
+import { mergeDefined } from 'soapbox/utils/normalizers.ts';
 
 // https://docs.joinmastodon.org/entities/attachment/
 export const AttachmentRecord = ImmutableRecord({
diff --git a/src/normalizers/chat-message.test.ts b/src/normalizers/chat-message.test.ts
index 7f089b41e..9cbebde35 100644
--- a/src/normalizers/chat-message.test.ts
+++ b/src/normalizers/chat-message.test.ts
@@ -1,8 +1,8 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { normalizeAttachment } from './attachment';
-import { normalizeChatMessage } from './chat-message';
+import { normalizeAttachment } from './attachment.ts';
+import { normalizeChatMessage } from './chat-message.ts';
 
 describe('normalizeChatMessage()', () => {
   it('upgrades attachment to media_attachments', () => {
diff --git a/src/normalizers/chat-message.ts b/src/normalizers/chat-message.ts
index 5ec03bb59..1fd572de9 100644
--- a/src/normalizers/chat-message.ts
+++ b/src/normalizers/chat-message.ts
@@ -5,11 +5,11 @@ import {
   fromJS,
 } from 'immutable';
 
-import { normalizeAttachment } from 'soapbox/normalizers/attachment';
-import { emojiReactionSchema } from 'soapbox/schemas';
-import { filteredArray } from 'soapbox/schemas/utils';
+import { normalizeAttachment } from 'soapbox/normalizers/attachment.ts';
+import { emojiReactionSchema } from 'soapbox/schemas/index.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
 
-import type { Attachment, Card, Emoji, EmojiReaction } from 'soapbox/types/entities';
+import type { Attachment, Card, Emoji, EmojiReaction } from 'soapbox/types/entities.ts';
 
 export const ChatMessageRecord = ImmutableRecord({
   account_id: '',
diff --git a/src/normalizers/chat.ts b/src/normalizers/chat.ts
index d3c906a62..08bd5d46f 100644
--- a/src/normalizers/chat.ts
+++ b/src/normalizers/chat.ts
@@ -1,6 +1,6 @@
 import { Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import type { Account, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Account, EmbeddedEntity } from 'soapbox/types/entities.ts';
 
 export const ChatRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
diff --git a/src/normalizers/filter-result.ts b/src/normalizers/filter-result.ts
index 08ed3499f..55b9618a8 100644
--- a/src/normalizers/filter-result.ts
+++ b/src/normalizers/filter-result.ts
@@ -5,9 +5,9 @@
  */
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { normalizeFilter } from './filter';
+import { normalizeFilter } from './filter.ts';
 
-import type { Filter } from 'soapbox/types/entities';
+import type { Filter } from 'soapbox/types/entities.ts';
 
 // https://docs.joinmastodon.org/entities/FilterResult/
 export const FilterResultRecord = ImmutableRecord({
diff --git a/src/normalizers/filter.ts b/src/normalizers/filter.ts
index d3eaab237..4643c58ae 100644
--- a/src/normalizers/filter.ts
+++ b/src/normalizers/filter.ts
@@ -5,10 +5,10 @@
  */
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { FilterKeyword, FilterStatus } from 'soapbox/types/entities';
+import { FilterKeyword, FilterStatus } from 'soapbox/types/entities.ts';
 
-import { normalizeFilterKeyword } from './filter-keyword';
-import { normalizeFilterStatus } from './filter-status';
+import { normalizeFilterKeyword } from './filter-keyword.ts';
+import { normalizeFilterStatus } from './filter-status.ts';
 
 export type ContextType = 'home' | 'public' | 'notifications' | 'thread' | 'account';
 export type FilterActionType = 'warn' | 'hide';
diff --git a/src/normalizers/group-relationship.ts b/src/normalizers/group-relationship.ts
index dfb6196fc..9baa01a52 100644
--- a/src/normalizers/group-relationship.ts
+++ b/src/normalizers/group-relationship.ts
@@ -8,7 +8,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
 export const GroupRelationshipRecord = ImmutableRecord({
   id: '',
diff --git a/src/normalizers/group.ts b/src/normalizers/group.ts
index 6b4e5e21b..ea96edbc1 100644
--- a/src/normalizers/group.ts
+++ b/src/normalizers/group.ts
@@ -12,12 +12,12 @@ import {
 
 import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
 import headerMissing from 'soapbox/assets/images/header-missing.png';
-import emojify from 'soapbox/features/emoji';
-import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { unescapeHTML } from 'soapbox/utils/html';
-import { makeEmojiMap } from 'soapbox/utils/normalizers';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { normalizeEmoji } from 'soapbox/normalizers/emoji.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
+import { makeEmojiMap } from 'soapbox/utils/normalizers.ts';
 
-import type { Emoji, GroupRelationship } from 'soapbox/types/entities';
+import type { Emoji, GroupRelationship } from 'soapbox/types/entities.ts';
 
 export const GroupRecord = ImmutableRecord({
   avatar: '',
diff --git a/src/normalizers/index.ts b/src/normalizers/index.ts
index d64ff3ae9..17e6b15ae 100644
--- a/src/normalizers/index.ts
+++ b/src/normalizers/index.ts
@@ -1,22 +1,22 @@
-export { AccountRecord, FieldRecord, normalizeAccount } from './account';
-export { AdminAccountRecord, normalizeAdminAccount } from './admin-account';
-export { AdminReportRecord, normalizeAdminReport } from './admin-report';
-export { AttachmentRecord, normalizeAttachment } from './attachment';
-export { ChatRecord, normalizeChat } from './chat';
-export { ChatMessageRecord, normalizeChatMessage } from './chat-message';
-export { EmojiRecord, normalizeEmoji } from './emoji';
-export { FilterRecord, normalizeFilter } from './filter';
-export { FilterKeywordRecord, normalizeFilterKeyword } from './filter-keyword';
-export { FilterStatusRecord, normalizeFilterStatus } from './filter-status';
-export { normalizeGroup } from './group';
-export { GroupRelationshipRecord, normalizeGroupRelationship } from './group-relationship';
-export { HistoryRecord, normalizeHistory } from './history';
-export { ListRecord, normalizeList } from './list';
-export { LocationRecord, normalizeLocation } from './location';
-export { MentionRecord, normalizeMention } from './mention';
-export { NotificationRecord, normalizeNotification } from './notification';
-export { StatusRecord, normalizeStatus } from './status';
-export { StatusEditRecord, normalizeStatusEdit } from './status-edit';
-export { TagRecord, normalizeTag } from './tag';
+export { AccountRecord, FieldRecord, normalizeAccount } from './account.ts';
+export { AdminAccountRecord, normalizeAdminAccount } from './admin-account.ts';
+export { AdminReportRecord, normalizeAdminReport } from './admin-report.ts';
+export { AttachmentRecord, normalizeAttachment } from './attachment.ts';
+export { ChatRecord, normalizeChat } from './chat.ts';
+export { ChatMessageRecord, normalizeChatMessage } from './chat-message.ts';
+export { EmojiRecord, normalizeEmoji } from './emoji.ts';
+export { FilterRecord, normalizeFilter } from './filter.ts';
+export { FilterKeywordRecord, normalizeFilterKeyword } from './filter-keyword.ts';
+export { FilterStatusRecord, normalizeFilterStatus } from './filter-status.ts';
+export { normalizeGroup } from './group.ts';
+export { GroupRelationshipRecord, normalizeGroupRelationship } from './group-relationship.ts';
+export { HistoryRecord, normalizeHistory } from './history.ts';
+export { ListRecord, normalizeList } from './list.ts';
+export { LocationRecord, normalizeLocation } from './location.ts';
+export { MentionRecord, normalizeMention } from './mention.ts';
+export { NotificationRecord, normalizeNotification } from './notification.ts';
+export { StatusRecord, normalizeStatus } from './status.ts';
+export { StatusEditRecord, normalizeStatusEdit } from './status-edit.ts';
+export { TagRecord, normalizeTag } from './tag.ts';
 
-export { SoapboxConfigRecord, normalizeSoapboxConfig } from './soapbox/soapbox-config';
+export { SoapboxConfigRecord, normalizeSoapboxConfig } from './soapbox/soapbox-config.ts';
diff --git a/src/normalizers/mention.test.ts b/src/normalizers/mention.test.ts
index e706cddf5..29d359b84 100644
--- a/src/normalizers/mention.test.ts
+++ b/src/normalizers/mention.test.ts
@@ -1,7 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { normalizeMention } from './mention';
+import { normalizeMention } from './mention.ts';
 
 describe('normalizeMention()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/mention.ts b/src/normalizers/mention.ts
index 5ff35ce16..c99288763 100644
--- a/src/normalizers/mention.ts
+++ b/src/normalizers/mention.ts
@@ -5,7 +5,7 @@
  */
 import { Record as ImmutableRecord } from 'immutable';
 
-import { normalizeAccount } from 'soapbox/normalizers/account';
+import { normalizeAccount } from 'soapbox/normalizers/account.ts';
 
 // https://docs.joinmastodon.org/entities/mention/
 export const MentionRecord = ImmutableRecord({
diff --git a/src/normalizers/notification.test.ts b/src/normalizers/notification.test.ts
index 4e140e9a2..4bc1454a9 100644
--- a/src/normalizers/notification.test.ts
+++ b/src/normalizers/notification.test.ts
@@ -1,7 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { normalizeNotification } from './notification';
+import { normalizeNotification } from './notification.ts';
 
 describe('normalizeNotification()', () => {
   it('normalizes an empty map', () => {
diff --git a/src/normalizers/notification.ts b/src/normalizers/notification.ts
index 83ef9a948..9ea3c294a 100644
--- a/src/normalizers/notification.ts
+++ b/src/normalizers/notification.ts
@@ -9,7 +9,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import type { Account, Status, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Account, Status, EmbeddedEntity } from 'soapbox/types/entities.ts';
 
 // https://docs.joinmastodon.org/entities/notification/
 export const NotificationRecord = ImmutableRecord({
diff --git a/src/normalizers/soapbox/soapbox-config.test.ts b/src/normalizers/soapbox/soapbox-config.test.ts
index 01450df21..8ceb97380 100644
--- a/src/normalizers/soapbox/soapbox-config.test.ts
+++ b/src/normalizers/soapbox/soapbox-config.test.ts
@@ -1,7 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { normalizeSoapboxConfig } from './soapbox-config';
+import { normalizeSoapboxConfig } from './soapbox-config.ts';
 
 describe('normalizeSoapboxConfig()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/soapbox/soapbox-config.ts b/src/normalizers/soapbox/soapbox-config.ts
index 4092f8367..167803d32 100644
--- a/src/normalizers/soapbox/soapbox-config.ts
+++ b/src/normalizers/soapbox/soapbox-config.ts
@@ -6,9 +6,9 @@ import {
 } from 'immutable';
 import trimStart from 'lodash/trimStart';
 
-import { normalizeUsername } from 'soapbox/utils/input';
-import { toTailwind } from 'soapbox/utils/tailwind';
-import { generateAccent } from 'soapbox/utils/theme';
+import { normalizeUsername } from 'soapbox/utils/input.ts';
+import { toTailwind } from 'soapbox/utils/tailwind.ts';
+import { generateAccent } from 'soapbox/utils/theme.ts';
 
 import type {
   PromoPanelItem,
diff --git a/src/normalizers/status-edit.ts b/src/normalizers/status-edit.ts
index 859eb3a95..3494c6165 100644
--- a/src/normalizers/status-edit.ts
+++ b/src/normalizers/status-edit.ts
@@ -10,14 +10,14 @@ import {
 } from 'immutable';
 import DOMPurify from 'isomorphic-dompurify';
 
-import emojify from 'soapbox/features/emoji';
-import { normalizeAttachment } from 'soapbox/normalizers/attachment';
-import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { pollSchema } from 'soapbox/schemas';
-import { stripCompatibilityFeatures } from 'soapbox/utils/html';
-import { makeEmojiMap } from 'soapbox/utils/normalizers';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/attachment.ts';
+import { normalizeEmoji } from 'soapbox/normalizers/emoji.ts';
+import { pollSchema } from 'soapbox/schemas/index.ts';
+import { stripCompatibilityFeatures } from 'soapbox/utils/html.ts';
+import { makeEmojiMap } from 'soapbox/utils/normalizers.ts';
 
-import type { Account, Attachment, Emoji, EmbeddedEntity, Poll } from 'soapbox/types/entities';
+import type { Account, Attachment, Emoji, EmbeddedEntity, Poll } from 'soapbox/types/entities.ts';
 
 export const StatusEditRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
diff --git a/src/normalizers/status.test.ts b/src/normalizers/status.test.ts
index 38f4486cc..82c6ed9a0 100644
--- a/src/normalizers/status.test.ts
+++ b/src/normalizers/status.test.ts
@@ -1,9 +1,9 @@
 import { Record as ImmutableRecord, fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { normalizeStatus } from './status';
+import { normalizeStatus } from './status.ts';
 
-import type { Poll, Card } from 'soapbox/types/entities';
+import type { Poll, Card } from 'soapbox/types/entities.ts';
 
 describe('normalizeStatus()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/status.ts b/src/normalizers/status.ts
index 093069f4c..376fd1384 100644
--- a/src/normalizers/status.ts
+++ b/src/normalizers/status.ts
@@ -10,14 +10,14 @@ import {
   fromJS,
 } from 'immutable';
 
-import { normalizeAttachment } from 'soapbox/normalizers/attachment';
-import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { normalizeMention } from 'soapbox/normalizers/mention';
-import { accountSchema, cardSchema, emojiReactionSchema, groupSchema, pollSchema, tombstoneSchema } from 'soapbox/schemas';
-import { filteredArray } from 'soapbox/schemas/utils';
-import { maybeFromJS } from 'soapbox/utils/normalizers';
+import { normalizeAttachment } from 'soapbox/normalizers/attachment.ts';
+import { normalizeEmoji } from 'soapbox/normalizers/emoji.ts';
+import { normalizeMention } from 'soapbox/normalizers/mention.ts';
+import { accountSchema, cardSchema, emojiReactionSchema, groupSchema, pollSchema, tombstoneSchema } from 'soapbox/schemas/index.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
+import { maybeFromJS } from 'soapbox/utils/normalizers.ts';
 
-import type { Account, Attachment, Card, Emoji, Group, Mention, Poll, EmbeddedEntity, EmojiReaction } from 'soapbox/types/entities';
+import type { Account, Attachment, Card, Emoji, Group, Mention, Poll, EmbeddedEntity, EmojiReaction } from 'soapbox/types/entities.ts';
 
 export type StatusApprovalStatus = 'pending' | 'approval' | 'rejected';
 export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct' | 'self' | 'group';
diff --git a/src/normalizers/tag.ts b/src/normalizers/tag.ts
index fde58241f..d463e6955 100644
--- a/src/normalizers/tag.ts
+++ b/src/normalizers/tag.ts
@@ -10,9 +10,9 @@ import {
   fromJS,
 } from 'immutable';
 
-import { normalizeHistory } from './history';
+import { normalizeHistory } from './history.ts';
 
-import type { History } from 'soapbox/types/entities';
+import type { History } from 'soapbox/types/entities.ts';
 
 // https://docs.joinmastodon.org/entities/tag/
 export const TagRecord = ImmutableRecord({
diff --git a/src/pages/admin-page.tsx b/src/pages/admin-page.tsx
index 141934698..58becb6b7 100644
--- a/src/pages/admin-page.tsx
+++ b/src/pages/admin-page.tsx
@@ -1,9 +1,9 @@
-import { Layout } from 'soapbox/components/ui';
+import { Layout } from 'soapbox/components/ui/index.ts';
 import {
   LatestAccountsPanel,
-} from 'soapbox/features/ui/util/async-components';
+} from 'soapbox/features/ui/util/async-components.ts';
 
-import LinkFooter from '../features/ui/components/link-footer';
+import LinkFooter from '../features/ui/components/link-footer.tsx';
 
 interface IAdminPage {
   children: React.ReactNode;
diff --git a/src/pages/default-page.tsx b/src/pages/default-page.tsx
index ff3c3964a..2a923c41b 100644
--- a/src/pages/default-page.tsx
+++ b/src/pages/default-page.tsx
@@ -1,13 +1,13 @@
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Layout } from '../components/ui';
+import { Layout } from '../components/ui/index.ts';
 
 interface IDefaultPage {
   children: React.ReactNode;
diff --git a/src/pages/empty-page.tsx b/src/pages/empty-page.tsx
index 47b865761..2bb3b644e 100644
--- a/src/pages/empty-page.tsx
+++ b/src/pages/empty-page.tsx
@@ -1,4 +1,4 @@
-import { Layout } from '../components/ui';
+import { Layout } from '../components/ui/index.ts';
 
 interface IEmptyPage {
   children: React.ReactNode;
diff --git a/src/pages/event-page.tsx b/src/pages/event-page.tsx
index 570145096..6ce225280 100644
--- a/src/pages/event-page.tsx
+++ b/src/pages/event-page.tsx
@@ -1,18 +1,18 @@
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Column, Layout, Tabs } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { Column, Layout, Tabs } from 'soapbox/components/ui/index.ts';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   EventHeader,
   CtaBanner,
   SignUpPanel,
   TrendsPanel,
   WhoToFollowPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 const getStatus = makeGetStatus();
 
diff --git a/src/pages/events-page.tsx b/src/pages/events-page.tsx
index 1ae96aa4c..836c9f262 100644
--- a/src/pages/events-page.tsx
+++ b/src/pages/events-page.tsx
@@ -1,11 +1,11 @@
-import { Layout } from 'soapbox/components/ui';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { Layout } from 'soapbox/components/ui/index.ts';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
   NewEventPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useFeatures } from 'soapbox/hooks';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useFeatures } from 'soapbox/hooks/index.ts';
 
 interface IEventsPage {
   children: React.ReactNode;
diff --git a/src/pages/group-page.tsx b/src/pages/group-page.tsx
index 8c684b08e..45bf81e0a 100644
--- a/src/pages/group-page.tsx
+++ b/src/pages/group-page.tsx
@@ -5,19 +5,19 @@ import { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { useGroup, useGroupMembershipRequests } from 'soapbox/api/hooks';
-import { Column, Icon, Layout, Stack, Text, Tabs } from 'soapbox/components/ui';
-import GroupHeader from 'soapbox/features/group/components/group-header';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { useGroup, useGroupMembershipRequests } from 'soapbox/api/hooks/index.ts';
+import { Column, Icon, Layout, Stack, Text, Tabs } from 'soapbox/components/ui/index.ts';
+import GroupHeader from 'soapbox/features/group/components/group-header.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   CtaBanner,
   GroupMediaPanel,
   SignUpPanel,
   SuggestedGroupsPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useFeatures, useOwnAccount } from 'soapbox/hooks';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   all: { id: 'group.tabs.all', defaultMessage: 'All' },
diff --git a/src/pages/groups-page.tsx b/src/pages/groups-page.tsx
index e46e1b1f3..b41623cf8 100644
--- a/src/pages/groups-page.tsx
+++ b/src/pages/groups-page.tsx
@@ -1,8 +1,9 @@
 import { Route, Routes } from 'react-router-dom-v5-compat';
 
-import { Column, Layout } from 'soapbox/components/ui';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
-import { MyGroupsPanel, NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components';
+
+import { Column, Layout } from 'soapbox/components/ui/index.ts';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
+import { MyGroupsPanel, NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components.ts';
 
 interface IGroupsPage {
   children: React.ReactNode;
diff --git a/src/pages/groups-pending-page.tsx b/src/pages/groups-pending-page.tsx
index f62624508..ffef37080 100644
--- a/src/pages/groups-pending-page.tsx
+++ b/src/pages/groups-pending-page.tsx
@@ -1,6 +1,7 @@
-import { Layout } from 'soapbox/components/ui';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
-import { NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components';
+
+import { Layout } from 'soapbox/components/ui/index.ts';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
+import { NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components.ts';
 
 interface IGroupsPage {
   children: React.ReactNode;
diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx
index 1d7e643bf..fa4df0ba4 100644
--- a/src/pages/home-page.tsx
+++ b/src/pages/home-page.tsx
@@ -3,8 +3,8 @@ import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { uploadCompose } from 'soapbox/actions/compose';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { uploadCompose } from 'soapbox/actions/compose.ts';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
@@ -15,12 +15,12 @@ import {
   BirthdayPanel,
   CtaBanner,
   AnnouncementsPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDraggedFiles, useAppDispatch } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDraggedFiles, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
-import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui';
-import ComposeForm from '../features/compose/components/compose-form';
+import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui/index.ts';
+import ComposeForm from '../features/compose/components/compose-form.tsx';
 
 interface IHomePage {
   children: React.ReactNode;
diff --git a/src/pages/landing-page.tsx b/src/pages/landing-page.tsx
index 8613c426e..0bcb71233 100644
--- a/src/pages/landing-page.tsx
+++ b/src/pages/landing-page.tsx
@@ -1,13 +1,13 @@
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
   WhoToFollowPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Layout } from '../components/ui';
+import { Layout } from '../components/ui/index.ts';
 
 interface ILandingPage {
   children: React.ReactNode;
diff --git a/src/pages/manage-groups-page.tsx b/src/pages/manage-groups-page.tsx
index d21cc8282..360ed7967 100644
--- a/src/pages/manage-groups-page.tsx
+++ b/src/pages/manage-groups-page.tsx
@@ -1,6 +1,7 @@
-import { Layout } from 'soapbox/components/ui';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
-import { MyGroupsPanel, NewGroupPanel } from 'soapbox/features/ui/util/async-components';
+
+import { Layout } from 'soapbox/components/ui/index.ts';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
+import { MyGroupsPanel, NewGroupPanel } from 'soapbox/features/ui/util/async-components.ts';
 
 interface IGroupsPage {
   children: React.ReactNode;
diff --git a/src/pages/profile-page.tsx b/src/pages/profile-page.tsx
index a0a0d1197..7067560d4 100644
--- a/src/pages/profile-page.tsx
+++ b/src/pages/profile-page.tsx
@@ -1,10 +1,10 @@
 import { FormattedMessage } from 'react-intl';
 import { Redirect, useHistory } from 'react-router-dom';
 
-import { useAccountLookup } from 'soapbox/api/hooks';
-import { Column, Layout, Tabs } from 'soapbox/components/ui';
-import Header from 'soapbox/features/account/components/header';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
+import { Column, Layout, Tabs } from 'soapbox/components/ui/index.ts';
+import Header from 'soapbox/features/account/components/header.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   ProfileInfoPanel,
@@ -14,9 +14,9 @@ import {
   CtaBanner,
   PinnedAccountsPanel,
   AccountNotePanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { getAcct } from 'soapbox/utils/accounts.ts';
 
 interface IProfilePage {
   params?: {
diff --git a/src/pages/remote-instance-page.tsx b/src/pages/remote-instance-page.tsx
index 63b1e860e..cc5ee1355 100644
--- a/src/pages/remote-instance-page.tsx
+++ b/src/pages/remote-instance-page.tsx
@@ -1,13 +1,13 @@
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   PromoPanel,
   InstanceInfoPanel,
   InstanceModerationPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
-import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { federationRestrictionsDisclosed } from 'soapbox/utils/state.ts';
 
-import { Layout } from '../components/ui';
+import { Layout } from '../components/ui/index.ts';
 
 interface IRemoteInstancePage {
   params?: {
diff --git a/src/pages/search-page.tsx b/src/pages/search-page.tsx
index fd014dfc8..071fa9f72 100644
--- a/src/pages/search-page.tsx
+++ b/src/pages/search-page.tsx
@@ -1,14 +1,14 @@
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
   SuggestedGroupsPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Layout } from '../components/ui';
+import { Layout } from '../components/ui/index.ts';
 
 interface ISearchPage {
   children: React.ReactNode;
diff --git a/src/pages/status-page.tsx b/src/pages/status-page.tsx
index 08e7e4c23..a2c7fa83d 100644
--- a/src/pages/status-page.tsx
+++ b/src/pages/status-page.tsx
@@ -1,13 +1,13 @@
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Layout } from '../components/ui';
+import { Layout } from '../components/ui/index.ts';
 
 interface IStatusPage {
   children: React.ReactNode;
diff --git a/src/queries/accounts.ts b/src/queries/accounts.ts
index 762649e4c..0dbcb03b5 100644
--- a/src/queries/accounts.ts
+++ b/src/queries/accounts.ts
@@ -1,8 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { patchMeSuccess } from 'soapbox/actions/me';
-import { useApi, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { patchMeSuccess } from 'soapbox/actions/me.ts';
+import { useApi, useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 export type IAccount = {
   acct: string;
diff --git a/src/queries/chats.test.ts b/src/queries/chats.test.ts
index 31cb487af..e43bd8781 100644
--- a/src/queries/chats.test.ts
+++ b/src/queries/chats.test.ts
@@ -3,15 +3,15 @@ import sumBy from 'lodash/sumBy';
 import { useEffect } from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
-import { createTestStore, mockStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers';
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import { Store } from 'soapbox/store';
-import { ChatMessage } from 'soapbox/types/entities';
-import { flattenPages } from 'soapbox/utils/queries';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildAccount, buildRelationship } from 'soapbox/jest/factory.ts';
+import { createTestStore, mockStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import { Store } from 'soapbox/store.ts';
+import { ChatMessage } from 'soapbox/types/entities.ts';
+import { flattenPages } from 'soapbox/utils/queries.ts';
 
-import { ChatKeys, IChat, isLastMessage, useChat, useChatActions, useChatMessages, useChats } from './chats';
+import { ChatKeys, IChat, isLastMessage, useChat, useChatActions, useChatMessages, useChats } from './chats.ts';
 
 const chat: IChat = {
   accepted: true,
diff --git a/src/queries/chats.ts b/src/queries/chats.ts
index 2d6cb4118..49ecef1bb 100644
--- a/src/queries/chats.ts
+++ b/src/queries/chats.ts
@@ -1,21 +1,21 @@
 import { InfiniteData, keepPreviousData, useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
 import sumBy from 'lodash/sumBy';
 
-import { importFetchedAccount, importFetchedAccounts } from 'soapbox/actions/importer';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useApi, useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
-import { ChatMessage } from 'soapbox/types/entities';
-import { reOrderChatListItems, updateChatMessage } from 'soapbox/utils/chats';
-import { getPagination } from 'soapbox/utils/pagination';
-import { flattenPages, PaginatedResult, updatePageItem } from 'soapbox/utils/queries';
+import { importFetchedAccount, importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useApi, useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { ChatMessage } from 'soapbox/types/entities.ts';
+import { reOrderChatListItems, updateChatMessage } from 'soapbox/utils/chats.ts';
+import { getPagination } from 'soapbox/utils/pagination.ts';
+import { flattenPages, PaginatedResult, updatePageItem } from 'soapbox/utils/queries.ts';
 
-import { queryClient } from './client';
-import { useFetchRelationships } from './relationships';
+import { queryClient } from './client.ts';
+import { useFetchRelationships } from './relationships.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 export const messageExpirationOptions = [604800, 1209600, 2592000, 7776000];
 
diff --git a/src/queries/client.ts b/src/queries/client.ts
index 0755aca5c..40a2653b4 100644
--- a/src/queries/client.ts
+++ b/src/queries/client.ts
@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
 
 /** HTTP response codes to retry. */
 const RETRY_CODES = [502, 503, 504, 521, 522];
diff --git a/src/queries/embed.ts b/src/queries/embed.ts
index b2b8a6771..f183eb5a6 100644
--- a/src/queries/embed.ts
+++ b/src/queries/embed.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
+import { useApi } from 'soapbox/hooks/index.ts';
 
 type Embed = {
   type: string;
diff --git a/src/queries/relationships.test.ts b/src/queries/relationships.test.ts
index bc67084f5..a4342fbff 100644
--- a/src/queries/relationships.test.ts
+++ b/src/queries/relationships.test.ts
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildRelationship } from 'soapbox/jest/factory';
-import { createTestStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers';
-import { Store } from 'soapbox/store';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildRelationship } from 'soapbox/jest/factory.ts';
+import { createTestStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { Store } from 'soapbox/store.ts';
 
-import { useFetchRelationships } from './relationships';
+import { useFetchRelationships } from './relationships.ts';
 
 describe('useFetchRelationships()', () => {
   let store: Store;
diff --git a/src/queries/relationships.ts b/src/queries/relationships.ts
index 80d83cda3..c5d11062d 100644
--- a/src/queries/relationships.ts
+++ b/src/queries/relationships.ts
@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { fetchRelationshipsFail, fetchRelationshipsSuccess } from 'soapbox/actions/accounts';
-import { useApi, useAppDispatch } from 'soapbox/hooks';
+import { fetchRelationshipsFail, fetchRelationshipsSuccess } from 'soapbox/actions/accounts.ts';
+import { useApi, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const useFetchRelationships = () => {
   const api = useApi();
diff --git a/src/queries/search.ts b/src/queries/search.ts
index e750ea780..b33c47264 100644
--- a/src/queries/search.ts
+++ b/src/queries/search.ts
@@ -1,9 +1,9 @@
 import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { Account } from 'soapbox/types/entities';
-import { getPagination } from 'soapbox/utils/pagination';
-import { flattenPages, PaginatedResult } from 'soapbox/utils/queries';
+import { useApi } from 'soapbox/hooks/index.ts';
+import { Account } from 'soapbox/types/entities.ts';
+import { getPagination } from 'soapbox/utils/pagination.ts';
+import { flattenPages, PaginatedResult } from 'soapbox/utils/queries.ts';
 
 export default function useAccountSearch(q: string) {
   const api = useApi();
diff --git a/src/queries/suggestions.test.ts b/src/queries/suggestions.test.ts
index 59b07e808..f048f1795 100644
--- a/src/queries/suggestions.test.ts
+++ b/src/queries/suggestions.test.ts
@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import { useOnboardingSuggestions } from './suggestions';
+import { useOnboardingSuggestions } from './suggestions.ts';
 
 describe('useOnboardingSuggestions', () => {
   describe('with a successful query', () => {
diff --git a/src/queries/suggestions.ts b/src/queries/suggestions.ts
index 5874109be..42df95660 100644
--- a/src/queries/suggestions.ts
+++ b/src/queries/suggestions.ts
@@ -1,13 +1,13 @@
 import { useInfiniteQuery, useMutation, keepPreviousData } from '@tanstack/react-query';
 
-import { fetchRelationships } from 'soapbox/actions/accounts';
-import { importFetchedAccounts } from 'soapbox/actions/importer';
-import { useApi, useAppDispatch } from 'soapbox/hooks';
-import { getPagination } from 'soapbox/utils/pagination';
+import { fetchRelationships } from 'soapbox/actions/accounts.ts';
+import { importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
+import { useApi, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { getPagination } from 'soapbox/utils/pagination.ts';
 
-import { PaginatedResult, removePageItem } from '../utils/queries';
+import { PaginatedResult, removePageItem } from '../utils/queries.ts';
 
-import type { IAccount } from './accounts';
+import type { IAccount } from './accounts.ts';
 
 type Suggestion = {
   source: 'staff';
diff --git a/src/queries/trends.test.ts b/src/queries/trends.test.ts
index ec7b15a30..9dba5c893 100644
--- a/src/queries/trends.test.ts
+++ b/src/queries/trends.test.ts
@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { queryClient, renderHook, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { queryClient, renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import useTrends from './trends';
+import useTrends from './trends.ts';
 
 describe('useTrends', () => {
   beforeEach(() => {
diff --git a/src/queries/trends.ts b/src/queries/trends.ts
index b34500db6..023a329f8 100644
--- a/src/queries/trends.ts
+++ b/src/queries/trends.ts
@@ -1,10 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { fetchTrendsSuccess } from 'soapbox/actions/trends';
-import { useApi, useAppDispatch } from 'soapbox/hooks';
-import { normalizeTag } from 'soapbox/normalizers';
+import { fetchTrendsSuccess } from 'soapbox/actions/trends.ts';
+import { useApi, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
-import type { Tag } from 'soapbox/types/entities';
+import type { Tag } from 'soapbox/types/entities.ts';
 
 export default function useTrends() {
   const api = useApi();
diff --git a/src/reducers/accounts-meta.ts b/src/reducers/accounts-meta.ts
index 754c20334..e9f4ec127 100644
--- a/src/reducers/accounts-meta.ts
+++ b/src/reducers/accounts-meta.ts
@@ -5,9 +5,9 @@
 
 import { produce } from 'immer';
 
-import { VERIFY_CREDENTIALS_SUCCESS, AUTH_ACCOUNT_REMEMBER_SUCCESS } from 'soapbox/actions/auth';
-import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me';
-import { Account, accountSchema } from 'soapbox/schemas';
+import { VERIFY_CREDENTIALS_SUCCESS, AUTH_ACCOUNT_REMEMBER_SUCCESS } from 'soapbox/actions/auth.ts';
+import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me.ts';
+import { Account, accountSchema } from 'soapbox/schemas/index.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/admin.test.ts b/src/reducers/admin.test.ts
index 27fec7bc5..d66c44122 100644
--- a/src/reducers/admin.test.ts
+++ b/src/reducers/admin.test.ts
@@ -1,7 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import reducer from './admin';
+import reducer from './admin.ts';
 
 describe('admin reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/admin.ts b/src/reducers/admin.ts
index caee84551..b05744d3e 100644
--- a/src/reducers/admin.ts
+++ b/src/reducers/admin.ts
@@ -19,13 +19,13 @@ import {
   ADMIN_USERS_APPROVE_SUCCESS,
   ADMIN_USERS_REJECT_REQUEST,
   ADMIN_USERS_REJECT_SUCCESS,
-} from 'soapbox/actions/admin';
-import { normalizeAdminReport, normalizeAdminAccount } from 'soapbox/normalizers';
-import { normalizeId } from 'soapbox/utils/normalizers';
+} from 'soapbox/actions/admin.ts';
+import { normalizeAdminReport, normalizeAdminAccount } from 'soapbox/normalizers/index.ts';
+import { normalizeId } from 'soapbox/utils/normalizers.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
-import type { Config } from 'soapbox/utils/config-db';
+import type { APIEntity } from 'soapbox/types/entities.ts';
+import type { Config } from 'soapbox/utils/config-db.ts';
 
 const ReducerRecord = ImmutableRecord({
   reports: ImmutableMap<string, ReducerAdminReport>(),
diff --git a/src/reducers/aliases.ts b/src/reducers/aliases.ts
index 0d6eb3bad..1f666cb53 100644
--- a/src/reducers/aliases.ts
+++ b/src/reducers/aliases.ts
@@ -5,10 +5,10 @@ import {
   ALIASES_SUGGESTIONS_CLEAR,
   ALIASES_SUGGESTIONS_CHANGE,
   ALIASES_FETCH_SUCCESS,
-} from '../actions/aliases';
+} from '../actions/aliases.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ReducerRecord = ImmutableRecord({
   aliases: ImmutableRecord({
diff --git a/src/reducers/auth.ts b/src/reducers/auth.ts
index bb34609df..0f50d76a8 100644
--- a/src/reducers/auth.ts
+++ b/src/reducers/auth.ts
@@ -2,13 +2,13 @@ import { AxiosError } from 'axios';
 import { produce } from 'immer';
 import { z } from 'zod';
 
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore';
-import { Account, accountSchema } from 'soapbox/schemas';
-import { Application, applicationSchema } from 'soapbox/schemas/application';
-import { AuthUser, SoapboxAuth, soapboxAuthSchema } from 'soapbox/schemas/soapbox/soapbox-auth';
-import { Token, tokenSchema } from 'soapbox/schemas/token';
-import { jsonSchema } from 'soapbox/schemas/utils';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore.ts';
+import { Application, applicationSchema } from 'soapbox/schemas/application.ts';
+import { Account, accountSchema } from 'soapbox/schemas/index.ts';
+import { AuthUser, SoapboxAuth, soapboxAuthSchema } from 'soapbox/schemas/soapbox/soapbox-auth.ts';
+import { Token, tokenSchema } from 'soapbox/schemas/token.ts';
+import { jsonSchema } from 'soapbox/schemas/utils.ts';
 
 import {
   AUTH_APP_CREATED,
@@ -18,8 +18,8 @@ import {
   VERIFY_CREDENTIALS_SUCCESS,
   VERIFY_CREDENTIALS_FAIL,
   AUTH_APP_AUTHORIZED,
-} from '../actions/auth';
-import { ME_FETCH_SKIP } from '../actions/me';
+} from '../actions/auth.ts';
+import { ME_FETCH_SKIP } from '../actions/me.ts';
 
 import type { UnknownAction } from 'redux';
 
diff --git a/src/reducers/backups.tsx b/src/reducers/backups.ts
similarity index 92%
rename from src/reducers/backups.tsx
rename to src/reducers/backups.ts
index e2557c845..83b87b5b4 100644
--- a/src/reducers/backups.tsx
+++ b/src/reducers/backups.ts
@@ -3,10 +3,10 @@ import { Map as ImmutableMap, Record as ImmutableRecord } from 'immutable';
 import {
   BACKUPS_FETCH_SUCCESS,
   BACKUPS_CREATE_SUCCESS,
-} from '../actions/backups';
+} from '../actions/backups.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 export const BackupRecord = ImmutableRecord({
   id: null as number | null,
diff --git a/src/reducers/chat-message-lists.ts b/src/reducers/chat-message-lists.ts
index c87f83676..f560b1224 100644
--- a/src/reducers/chat-message-lists.ts
+++ b/src/reducers/chat-message-lists.ts
@@ -7,11 +7,11 @@ import {
   CHAT_MESSAGE_SEND_REQUEST,
   CHAT_MESSAGE_SEND_SUCCESS,
   CHAT_MESSAGE_DELETE_SUCCESS,
-} from 'soapbox/actions/chats';
-import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
+} from 'soapbox/actions/chats.ts';
+import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type APIEntities = Array<APIEntity>;
 
diff --git a/src/reducers/chat-messages.ts b/src/reducers/chat-messages.ts
index cba666be0..025928dc2 100644
--- a/src/reducers/chat-messages.ts
+++ b/src/reducers/chat-messages.ts
@@ -8,12 +8,12 @@ import {
   CHAT_MESSAGE_SEND_SUCCESS,
   CHAT_MESSAGE_DELETE_REQUEST,
   CHAT_MESSAGE_DELETE_SUCCESS,
-} from 'soapbox/actions/chats';
-import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
-import { normalizeChatMessage } from 'soapbox/normalizers';
+} from 'soapbox/actions/chats.ts';
+import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming.ts';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type ChatMessageRecord = ReturnType<typeof normalizeChatMessage>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/chats.ts b/src/reducers/chats.ts
index ab81e232b..83f490027 100644
--- a/src/reducers/chats.ts
+++ b/src/reducers/chats.ts
@@ -8,13 +8,13 @@ import {
   CHAT_FETCH_SUCCESS,
   CHAT_READ_SUCCESS,
   CHAT_READ_REQUEST,
-} from 'soapbox/actions/chats';
-import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
-import { normalizeChat } from 'soapbox/normalizers';
-import { normalizeId } from 'soapbox/utils/normalizers';
+} from 'soapbox/actions/chats.ts';
+import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming.ts';
+import { normalizeChat } from 'soapbox/normalizers/index.ts';
+import { normalizeId } from 'soapbox/utils/normalizers.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type ChatRecord = ReturnType<typeof normalizeChat>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/compose-event.ts b/src/reducers/compose-event.ts
index c6c4d17fa..f68e6fe74 100644
--- a/src/reducers/compose-event.ts
+++ b/src/reducers/compose-event.ts
@@ -19,8 +19,8 @@ import {
   EVENT_SUBMIT_FAIL,
   EVENT_COMPOSE_CANCEL,
   EVENT_FORM_SET,
-} from 'soapbox/actions/events';
-import { normalizeAttachment, normalizeLocation } from 'soapbox/normalizers';
+} from 'soapbox/actions/events.ts';
+import { normalizeAttachment, normalizeLocation } from 'soapbox/normalizers/index.ts';
 
 import type {
   Attachment as AttachmentEntity,
diff --git a/src/reducers/compose.test.ts b/src/reducers/compose.test.ts
index 49b6a0b18..c7e3b2de0 100644
--- a/src/reducers/compose.test.ts
+++ b/src/reducers/compose.test.ts
@@ -1,15 +1,15 @@
 import { List as ImmutableList, Record as ImmutableRecord, fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import * as actions from 'soapbox/actions/compose';
-import { COMPOSE_SET_STATUS } from 'soapbox/actions/compose-status';
-import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me';
-import { SETTING_CHANGE } from 'soapbox/actions/settings';
-import { TIMELINE_DELETE } from 'soapbox/actions/timelines';
-import { TagRecord } from 'soapbox/normalizers';
-import { normalizeStatus } from 'soapbox/normalizers/status';
+import { COMPOSE_SET_STATUS } from 'soapbox/actions/compose-status.ts';
+import * as actions from 'soapbox/actions/compose.ts';
+import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me.ts';
+import { SETTING_CHANGE } from 'soapbox/actions/settings.ts';
+import { TIMELINE_DELETE } from 'soapbox/actions/timelines.ts';
+import { TagRecord } from 'soapbox/normalizers/index.ts';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
 
-import reducer, { initialState, ReducerCompose } from './compose';
+import reducer, { initialState, ReducerCompose } from './compose.ts';
 
 describe('compose reducer', () => {
   it('returns the initial state by default', () => {
diff --git a/src/reducers/compose.ts b/src/reducers/compose.ts
index bf9ac0d83..47d1d4d00 100644
--- a/src/reducers/compose.ts
+++ b/src/reducers/compose.ts
@@ -1,11 +1,12 @@
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { isNativeEmoji } from 'soapbox/features/emoji';
-import { Account } from 'soapbox/schemas';
-import { tagHistory } from 'soapbox/settings';
-import { PLEROMA } from 'soapbox/utils/features';
-import { hasIntegerMediaIds } from 'soapbox/utils/status';
+import { isNativeEmoji } from 'soapbox/features/emoji/index.ts';
+import { Account } from 'soapbox/schemas/index.ts';
+import { tagHistory } from 'soapbox/settings.ts';
+import { PLEROMA } from 'soapbox/utils/features.ts';
+import { hasIntegerMediaIds } from 'soapbox/utils/status.ts';
 
+import { COMPOSE_SET_STATUS } from '../actions/compose-status.ts';
 import {
   COMPOSE_CHANGE,
   COMPOSE_REPLY,
@@ -53,16 +54,15 @@ import {
   COMPOSE_SET_GROUP_TIMELINE_VISIBLE,
   ComposeAction,
   COMPOSE_CHANGE_MEDIA_ORDER,
-} from '../actions/compose';
-import { COMPOSE_SET_STATUS } from '../actions/compose-status';
-import { EVENT_COMPOSE_CANCEL, EVENT_FORM_SET, type EventsAction } from '../actions/events';
-import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS, MeAction } from '../actions/me';
-import { SETTING_CHANGE, FE_NAME, SettingsAction } from '../actions/settings';
-import { TIMELINE_DELETE, TimelineAction } from '../actions/timelines';
-import { normalizeAttachment } from '../normalizers/attachment';
-import { unescapeHTML } from '../utils/html';
+} from '../actions/compose.ts';
+import { EVENT_COMPOSE_CANCEL, EVENT_FORM_SET, type EventsAction } from '../actions/events.ts';
+import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS, MeAction } from '../actions/me.ts';
+import { SETTING_CHANGE, FE_NAME, SettingsAction } from '../actions/settings.ts';
+import { TIMELINE_DELETE, TimelineAction } from '../actions/timelines.ts';
+import { normalizeAttachment } from '../normalizers/attachment.ts';
+import { unescapeHTML } from '../utils/html.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 import type {
   APIEntity,
   Attachment as AttachmentEntity,
diff --git a/src/reducers/contexts.test.ts b/src/reducers/contexts.test.ts
index da18bd4ca..01134e9ed 100644
--- a/src/reducers/contexts.test.ts
+++ b/src/reducers/contexts.test.ts
@@ -6,12 +6,12 @@ import {
 } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { STATUS_IMPORT } from 'soapbox/actions/importer';
-import { CONTEXT_FETCH_SUCCESS } from 'soapbox/actions/statuses';
-import { TIMELINE_DELETE } from 'soapbox/actions/timelines';
-import { applyActions } from 'soapbox/jest/test-helpers';
+import { STATUS_IMPORT } from 'soapbox/actions/importer/index.ts';
+import { CONTEXT_FETCH_SUCCESS } from 'soapbox/actions/statuses.ts';
+import { TIMELINE_DELETE } from 'soapbox/actions/timelines.ts';
+import { applyActions } from 'soapbox/jest/test-helpers.tsx';
 
-import reducer, { ReducerRecord } from './contexts';
+import reducer, { ReducerRecord } from './contexts.ts';
 
 describe('contexts reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/contexts.ts b/src/reducers/contexts.ts
index 325813c11..c7d6f044a 100644
--- a/src/reducers/contexts.ts
+++ b/src/reducers/contexts.ts
@@ -4,21 +4,21 @@ import {
   OrderedSet as ImmutableOrderedSet,
 } from 'immutable';
 
-import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer';
+import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer/index.ts';
 
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts.ts';
 import {
   CONTEXT_FETCH_SUCCESS,
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
-} from '../actions/statuses';
-import { TIMELINE_DELETE } from '../actions/timelines';
+} from '../actions/statuses.ts';
+import { TIMELINE_DELETE } from '../actions/timelines.ts';
 
 import type { AnyAction } from 'redux';
-import type { Status } from 'soapbox/schemas';
+import type { Status } from 'soapbox/schemas/index.ts';
 
 export const ReducerRecord = ImmutableRecord({
   inReplyTos: ImmutableMap<string, string>(),
diff --git a/src/reducers/conversations.test.ts b/src/reducers/conversations.test.ts
index 51a177c4d..4a4b1c2f0 100644
--- a/src/reducers/conversations.test.ts
+++ b/src/reducers/conversations.test.ts
@@ -1,9 +1,9 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import * as actions from 'soapbox/actions/conversations';
+import * as actions from 'soapbox/actions/conversations.ts';
 
-import reducer from './conversations';
+import reducer from './conversations.ts';
 
 describe('conversations reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/conversations.ts b/src/reducers/conversations.ts
index 9a1ba07aa..fa70ea0e7 100644
--- a/src/reducers/conversations.ts
+++ b/src/reducers/conversations.ts
@@ -8,11 +8,11 @@ import {
   CONVERSATIONS_FETCH_FAIL,
   CONVERSATIONS_UPDATE,
   CONVERSATIONS_READ,
-} from '../actions/conversations';
-import { compareDate } from '../utils/comparators';
+} from '../actions/conversations.ts';
+import { compareDate } from '../utils/comparators.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ConversationRecord = ImmutableRecord({
   id: '',
diff --git a/src/reducers/custom-emojis.test.ts b/src/reducers/custom-emojis.test.ts
index adae3dfbc..090c265fb 100644
--- a/src/reducers/custom-emojis.test.ts
+++ b/src/reducers/custom-emojis.test.ts
@@ -1,7 +1,7 @@
 import { List as ImmutableList } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import reducer from './custom-emojis';
+import reducer from './custom-emojis.ts';
 
 describe('custom_emojis reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/custom-emojis.ts b/src/reducers/custom-emojis.ts
index e63348580..a3a57a7e3 100644
--- a/src/reducers/custom-emojis.ts
+++ b/src/reducers/custom-emojis.ts
@@ -1,13 +1,13 @@
 import { List as ImmutableList, Map as ImmutableMap, fromJS } from 'immutable';
 
-import { buildCustomEmojis } from 'soapbox/features/emoji';
-import emojiData from 'soapbox/features/emoji/data';
-import { addCustomToPool } from 'soapbox/features/emoji/search';
+import emojiData from 'soapbox/features/emoji/data.ts';
+import { buildCustomEmojis } from 'soapbox/features/emoji/index.ts';
+import { addCustomToPool } from 'soapbox/features/emoji/search.ts';
 
-import { CUSTOM_EMOJIS_FETCH_SUCCESS } from '../actions/custom-emojis';
+import { CUSTOM_EMOJIS_FETCH_SUCCESS } from '../actions/custom-emojis.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const initialState = ImmutableList<ImmutableMap<string, string>>();
 
diff --git a/src/reducers/domain-lists.test.ts b/src/reducers/domain-lists.test.ts
index 6577c87e2..ea2f4781d 100644
--- a/src/reducers/domain-lists.test.ts
+++ b/src/reducers/domain-lists.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import reducer from './domain-lists';
+import reducer from './domain-lists.ts';
 
 describe('domain_lists reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/domain-lists.ts b/src/reducers/domain-lists.ts
index 30f55aaf8..9788c5b7f 100644
--- a/src/reducers/domain-lists.ts
+++ b/src/reducers/domain-lists.ts
@@ -4,7 +4,7 @@ import {
   DOMAIN_BLOCKS_FETCH_SUCCESS,
   DOMAIN_BLOCKS_EXPAND_SUCCESS,
   DOMAIN_UNBLOCK_SUCCESS,
-} from '../actions/domain-blocks';
+} from '../actions/domain-blocks.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/dropdown-menu.test.ts b/src/reducers/dropdown-menu.test.ts
index 1ed312cec..4b3beb116 100644
--- a/src/reducers/dropdown-menu.test.ts
+++ b/src/reducers/dropdown-menu.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import reducer from './dropdown-menu';
+import reducer from './dropdown-menu.ts';
 
 describe('dropdown_menu reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/dropdown-menu.ts b/src/reducers/dropdown-menu.ts
index 991e09e0e..5cd10e392 100644
--- a/src/reducers/dropdown-menu.ts
+++ b/src/reducers/dropdown-menu.ts
@@ -3,7 +3,7 @@ import { Record as ImmutableRecord } from 'immutable';
 import {
   DROPDOWN_MENU_OPEN,
   DROPDOWN_MENU_CLOSE,
-} from '../actions/dropdown-menu';
+} from '../actions/dropdown-menu.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/filters.test.ts b/src/reducers/filters.test.ts
index b8f256e63..c78eb4a51 100644
--- a/src/reducers/filters.test.ts
+++ b/src/reducers/filters.test.ts
@@ -1,7 +1,7 @@
 import { List as ImmutableList } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import reducer from './filters';
+import reducer from './filters.ts';
 
 describe('filters reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/filters.ts b/src/reducers/filters.ts
index 8520b57a4..9a9c650aa 100644
--- a/src/reducers/filters.ts
+++ b/src/reducers/filters.ts
@@ -1,11 +1,11 @@
 import { List as ImmutableList } from 'immutable';
 
-import { normalizeFilter } from 'soapbox/normalizers';
+import { normalizeFilter } from 'soapbox/normalizers/index.ts';
 
-import { FILTERS_FETCH_SUCCESS } from '../actions/filters';
+import { FILTERS_FETCH_SUCCESS } from '../actions/filters.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Filter as FilterEntity } from 'soapbox/types/entities';
+import type { APIEntity, Filter as FilterEntity } from 'soapbox/types/entities.ts';
 
 type State = ImmutableList<FilterEntity>;
 
diff --git a/src/reducers/followed-tags.ts b/src/reducers/followed-tags.ts
index 4f30a3f3a..c9b909b87 100644
--- a/src/reducers/followed-tags.ts
+++ b/src/reducers/followed-tags.ts
@@ -7,11 +7,11 @@ import {
   FOLLOWED_HASHTAGS_EXPAND_REQUEST,
   FOLLOWED_HASHTAGS_EXPAND_SUCCESS,
   FOLLOWED_HASHTAGS_EXPAND_FAIL,
-} from 'soapbox/actions/tags';
-import { normalizeTag } from 'soapbox/normalizers';
+} from 'soapbox/actions/tags.ts';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Tag } from 'soapbox/types/entities';
+import type { APIEntity, Tag } from 'soapbox/types/entities.ts';
 
 const ReducerRecord = ImmutableRecord({
   items: ImmutableList<Tag>(),
diff --git a/src/reducers/group-memberships.ts b/src/reducers/group-memberships.ts
index ed890abe7..074740f25 100644
--- a/src/reducers/group-memberships.ts
+++ b/src/reducers/group-memberships.ts
@@ -12,10 +12,10 @@ import {
   GROUP_DEMOTE_SUCCESS,
   GROUP_KICK_SUCCESS,
   GROUP_BLOCK_SUCCESS,
-} from 'soapbox/actions/groups';
+} from 'soapbox/actions/groups.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ListRecord = ImmutableRecord({
   next: null as string | null,
diff --git a/src/reducers/group-relationships.ts b/src/reducers/group-relationships.ts
index eb61ae953..3e0c2066a 100644
--- a/src/reducers/group-relationships.ts
+++ b/src/reducers/group-relationships.ts
@@ -5,11 +5,11 @@ import {
   GROUP_UPDATE_SUCCESS,
   GROUP_DELETE_SUCCESS,
   GROUP_RELATIONSHIPS_FETCH_SUCCESS,
-} from 'soapbox/actions/groups';
-import { normalizeGroupRelationship } from 'soapbox/normalizers';
+} from 'soapbox/actions/groups.ts';
+import { normalizeGroupRelationship } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type GroupRelationshipRecord = ReturnType<typeof normalizeGroupRelationship>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/groups.ts b/src/reducers/groups.ts
index c7b6a1d28..cdadd9fff 100644
--- a/src/reducers/groups.ts
+++ b/src/reducers/groups.ts
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap, Record as ImmutableRecord } from 'immutable';
 
-import { GROUP_FETCH_FAIL, GROUP_DELETE_SUCCESS, GROUP_FETCH_REQUEST } from 'soapbox/actions/groups';
-import { GROUPS_IMPORT } from 'soapbox/actions/importer';
-import { normalizeGroup } from 'soapbox/normalizers';
+import { GROUP_FETCH_FAIL, GROUP_DELETE_SUCCESS, GROUP_FETCH_REQUEST } from 'soapbox/actions/groups.ts';
+import { GROUPS_IMPORT } from 'soapbox/actions/importer/index.ts';
+import { normalizeGroup } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type GroupRecord = ReturnType<typeof normalizeGroup>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/history.ts b/src/reducers/history.ts
index 855d5fd92..f55142303 100644
--- a/src/reducers/history.ts
+++ b/src/reducers/history.ts
@@ -1,7 +1,7 @@
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord } from 'immutable';
 
-import { HISTORY_FETCH_REQUEST, HISTORY_FETCH_SUCCESS, HISTORY_FETCH_FAIL } from 'soapbox/actions/history';
-import { normalizeStatusEdit } from 'soapbox/normalizers';
+import { HISTORY_FETCH_REQUEST, HISTORY_FETCH_SUCCESS, HISTORY_FETCH_FAIL } from 'soapbox/actions/history.ts';
+import { normalizeStatusEdit } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/index.test.ts b/src/reducers/index.test.ts
index 4a18bb771..67ca52c7e 100644
--- a/src/reducers/index.test.ts
+++ b/src/reducers/index.test.ts
@@ -1,7 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import reducer from '.';
+import reducer from './index.ts';
 
 describe('root reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/index.ts b/src/reducers/index.ts
index 2f5d286e6..e39c98910 100644
--- a/src/reducers/index.ts
+++ b/src/reducers/index.ts
@@ -1,60 +1,60 @@
 import { combineReducers } from '@reduxjs/toolkit';
 
-import entities from 'soapbox/entity-store/reducer';
+import entities from 'soapbox/entity-store/reducer.ts';
 
-import accounts_meta from './accounts-meta';
-import admin from './admin';
-import aliases from './aliases';
-import auth from './auth';
-import backups from './backups';
-import chat_message_lists from './chat-message-lists';
-import chat_messages from './chat-messages';
-import chats from './chats';
-import compose from './compose';
-import compose_event from './compose-event';
-import contexts from './contexts';
-import conversations from './conversations';
-import custom_emojis from './custom-emojis';
-import domain_lists from './domain-lists';
-import dropdown_menu from './dropdown-menu';
-import filters from './filters';
-import followed_tags from './followed-tags';
-import group_memberships from './group-memberships';
-import group_relationships from './group-relationships';
-import groups from './groups';
-import history from './history';
-import instance from './instance';
-import listAdder from './list-adder';
-import listEditor from './list-editor';
-import lists from './lists';
-import locations from './locations';
-import me from './me';
-import meta from './meta';
-import modals from './modals';
-import mutes from './mutes';
-import notifications from './notifications';
-import onboarding from './onboarding';
-import patron from './patron';
-import pending_statuses from './pending-statuses';
-import polls from './polls';
-import profile_hover_card from './profile-hover-card';
-import relationships from './relationships';
-import reports from './reports';
-import scheduled_statuses from './scheduled-statuses';
-import search from './search';
-import security from './security';
-import settings from './settings';
-import sidebar from './sidebar';
-import soapbox from './soapbox';
-import status_hover_card from './status-hover-card';
-import status_lists from './status-lists';
-import statuses from './statuses';
-import suggestions from './suggestions';
-import tags from './tags';
-import timelines from './timelines';
-import trending_statuses from './trending-statuses';
-import trends from './trends';
-import user_lists from './user-lists';
+import accounts_meta from './accounts-meta.ts';
+import admin from './admin.ts';
+import aliases from './aliases.ts';
+import auth from './auth.ts';
+import backups from './backups.ts';
+import chat_message_lists from './chat-message-lists.ts';
+import chat_messages from './chat-messages.ts';
+import chats from './chats.ts';
+import compose_event from './compose-event.ts';
+import compose from './compose.ts';
+import contexts from './contexts.ts';
+import conversations from './conversations.ts';
+import custom_emojis from './custom-emojis.ts';
+import domain_lists from './domain-lists.ts';
+import dropdown_menu from './dropdown-menu.ts';
+import filters from './filters.ts';
+import followed_tags from './followed-tags.ts';
+import group_memberships from './group-memberships.ts';
+import group_relationships from './group-relationships.ts';
+import groups from './groups.ts';
+import history from './history.ts';
+import instance from './instance.ts';
+import listAdder from './list-adder.ts';
+import listEditor from './list-editor.ts';
+import lists from './lists.ts';
+import locations from './locations.ts';
+import me from './me.ts';
+import meta from './meta.ts';
+import modals from './modals.ts';
+import mutes from './mutes.ts';
+import notifications from './notifications.ts';
+import onboarding from './onboarding.ts';
+import patron from './patron.ts';
+import pending_statuses from './pending-statuses.ts';
+import polls from './polls.ts';
+import profile_hover_card from './profile-hover-card.ts';
+import relationships from './relationships.ts';
+import reports from './reports.ts';
+import scheduled_statuses from './scheduled-statuses.ts';
+import search from './search.ts';
+import security from './security.ts';
+import settings from './settings.ts';
+import sidebar from './sidebar.ts';
+import soapbox from './soapbox.ts';
+import status_hover_card from './status-hover-card.ts';
+import status_lists from './status-lists.ts';
+import statuses from './statuses.ts';
+import suggestions from './suggestions.ts';
+import tags from './tags.ts';
+import timelines from './timelines.ts';
+import trending_statuses from './trending-statuses.ts';
+import trends from './trends.ts';
+import user_lists from './user-lists.ts';
 
 export default combineReducers({
   accounts_meta,
diff --git a/src/reducers/instance.test.ts b/src/reducers/instance.test.ts
index c53f9124f..7765831cc 100644
--- a/src/reducers/instance.test.ts
+++ b/src/reducers/instance.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { ADMIN_CONFIG_UPDATE_REQUEST } from 'soapbox/actions/admin';
+import { ADMIN_CONFIG_UPDATE_REQUEST } from 'soapbox/actions/admin.ts';
 
-import reducer from './instance';
+import reducer from './instance.ts';
 
 describe('instance reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/instance.ts b/src/reducers/instance.ts
index ad16cbfe8..65cf299bd 100644
--- a/src/reducers/instance.ts
+++ b/src/reducers/instance.ts
@@ -1,11 +1,11 @@
 import { produce } from 'immer';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 
-import { ADMIN_CONFIG_UPDATE_REQUEST, ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
-import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance';
-import { ConfigDB } from 'soapbox/utils/config-db';
+import { ADMIN_CONFIG_UPDATE_REQUEST, ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin.ts';
+import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance.ts';
+import { ConfigDB } from 'soapbox/utils/config-db.ts';
 
-import { fetchInstanceV2 } from '../actions/instance';
+import { fetchInstanceV2 } from '../actions/instance.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/list-adder.test.ts b/src/reducers/list-adder.test.ts
index c5376697f..2fb15b090 100644
--- a/src/reducers/list-adder.test.ts
+++ b/src/reducers/list-adder.test.ts
@@ -1,9 +1,9 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import * as actions from 'soapbox/actions/lists';
+import * as actions from 'soapbox/actions/lists.ts';
 
-import reducer from './list-adder';
+import reducer from './list-adder.ts';
 
 describe('list_adder reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/list-adder.ts b/src/reducers/list-adder.ts
index 81e9bd644..fe822a5eb 100644
--- a/src/reducers/list-adder.ts
+++ b/src/reducers/list-adder.ts
@@ -8,7 +8,7 @@ import {
   LIST_ADDER_LISTS_FETCH_FAIL,
   LIST_EDITOR_ADD_SUCCESS,
   LIST_EDITOR_REMOVE_SUCCESS,
-} from '../actions/lists';
+} from '../actions/lists.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/list-editor.ts b/src/reducers/list-editor.ts
index 8c0ef8e11..0c7e39f35 100644
--- a/src/reducers/list-editor.ts
+++ b/src/reducers/list-editor.ts
@@ -18,7 +18,7 @@ import {
   LIST_EDITOR_SUGGESTIONS_CHANGE,
   LIST_EDITOR_ADD_SUCCESS,
   LIST_EDITOR_REMOVE_SUCCESS,
-} from '../actions/lists';
+} from '../actions/lists.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/lists.test.ts b/src/reducers/lists.test.ts
index 7e38390ba..01def7319 100644
--- a/src/reducers/lists.test.ts
+++ b/src/reducers/lists.test.ts
@@ -1,7 +1,7 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import reducer from './lists';
+import reducer from './lists.ts';
 
 describe('lists reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/lists.ts b/src/reducers/lists.ts
index ffc611f17..d3061c46f 100644
--- a/src/reducers/lists.ts
+++ b/src/reducers/lists.ts
@@ -7,11 +7,11 @@ import {
   LIST_CREATE_SUCCESS,
   LIST_UPDATE_SUCCESS,
   LIST_DELETE_SUCCESS,
-} from 'soapbox/actions/lists';
-import { normalizeList } from 'soapbox/normalizers';
+} from 'soapbox/actions/lists.ts';
+import { normalizeList } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type ListRecord = ReturnType<typeof normalizeList>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/locations.ts b/src/reducers/locations.ts
index abfe363df..8fab997ac 100644
--- a/src/reducers/locations.ts
+++ b/src/reducers/locations.ts
@@ -1,10 +1,10 @@
 import { Map as ImmutableMap } from 'immutable';
 import { AnyAction } from 'redux';
 
-import { LOCATION_SEARCH_SUCCESS } from 'soapbox/actions/events';
-import { normalizeLocation } from 'soapbox/normalizers/location';
+import { LOCATION_SEARCH_SUCCESS } from 'soapbox/actions/events.ts';
+import { normalizeLocation } from 'soapbox/normalizers/location.ts';
 
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type LocationRecord = ReturnType<typeof normalizeLocation>;
 type State = ImmutableMap<any, LocationRecord>;
diff --git a/src/reducers/me.test.ts b/src/reducers/me.test.ts
index ac1725fcf..b216f3379 100644
--- a/src/reducers/me.test.ts
+++ b/src/reducers/me.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import reducer from './me';
+import reducer from './me.ts';
 
 describe('me reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/me.ts b/src/reducers/me.ts
index 4bb9b0ef2..d9e5ccf82 100644
--- a/src/reducers/me.ts
+++ b/src/reducers/me.ts
@@ -2,17 +2,17 @@ import {
   AUTH_LOGGED_OUT,
   AUTH_ACCOUNT_REMEMBER_SUCCESS,
   VERIFY_CREDENTIALS_SUCCESS,
-} from '../actions/auth';
+} from '../actions/auth.ts';
 import {
   ME_FETCH_SUCCESS,
   ME_FETCH_FAIL,
   ME_FETCH_SKIP,
   ME_PATCH_SUCCESS,
-} from '../actions/me';
+} from '../actions/me.ts';
 
 import type { AxiosError } from 'axios';
 import type { AnyAction } from 'redux';
-import type { Me } from 'soapbox/types/soapbox';
+import type { Me } from 'soapbox/types/soapbox.ts';
 
 const initialState: Me = null;
 
diff --git a/src/reducers/meta.test.ts b/src/reducers/meta.test.ts
index b194b61ff..6545956c4 100644
--- a/src/reducers/meta.test.ts
+++ b/src/reducers/meta.test.ts
@@ -1,9 +1,9 @@
 import { Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { SW_UPDATING, setSwUpdating } from 'soapbox/actions/sw';
+import { SW_UPDATING, setSwUpdating } from 'soapbox/actions/sw.ts';
 
-import reducer from './meta';
+import reducer from './meta.ts';
 
 describe('meta reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/meta.ts b/src/reducers/meta.ts
index a89f5f323..e832d204f 100644
--- a/src/reducers/meta.ts
+++ b/src/reducers/meta.ts
@@ -1,8 +1,8 @@
 import { Record as ImmutableRecord } from 'immutable';
 
-import { fetchInstance } from 'soapbox/actions/instance';
-import { NOSTR_PUBKEY_SET } from 'soapbox/actions/nostr';
-import { SW_UPDATING } from 'soapbox/actions/sw';
+import { fetchInstance } from 'soapbox/actions/instance.ts';
+import { NOSTR_PUBKEY_SET } from 'soapbox/actions/nostr.ts';
+import { SW_UPDATING } from 'soapbox/actions/sw.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/modals.test.ts b/src/reducers/modals.test.ts
index 49d417712..3324eebb1 100644
--- a/src/reducers/modals.test.ts
+++ b/src/reducers/modals.test.ts
@@ -1,9 +1,9 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { MODAL_OPEN, MODAL_CLOSE } from 'soapbox/actions/modals';
+import { MODAL_OPEN, MODAL_CLOSE } from 'soapbox/actions/modals.ts';
 
-import reducer from './modals';
+import reducer from './modals.ts';
 
 describe('modal reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/modals.ts b/src/reducers/modals.ts
index 829cbabe9..8707cc019 100644
--- a/src/reducers/modals.ts
+++ b/src/reducers/modals.ts
@@ -1,6 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 
-import { MODAL_OPEN, MODAL_CLOSE } from '../actions/modals';
+import { MODAL_OPEN, MODAL_CLOSE } from '../actions/modals.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/mutes.test.ts b/src/reducers/mutes.test.ts
index 943db6011..5813caec4 100644
--- a/src/reducers/mutes.test.ts
+++ b/src/reducers/mutes.test.ts
@@ -4,9 +4,9 @@ import { describe, expect, it } from 'vitest';
 import {
   MUTES_INIT_MODAL,
   MUTES_TOGGLE_HIDE_NOTIFICATIONS,
-} from 'soapbox/actions/mutes';
+} from 'soapbox/actions/mutes.ts';
 
-import reducer from './mutes';
+import reducer from './mutes.ts';
 
 describe('mutes reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/mutes.ts b/src/reducers/mutes.ts
index 0034a6c56..bb7a88aab 100644
--- a/src/reducers/mutes.ts
+++ b/src/reducers/mutes.ts
@@ -4,7 +4,7 @@ import {
   MUTES_INIT_MODAL,
   MUTES_TOGGLE_HIDE_NOTIFICATIONS,
   MUTES_CHANGE_DURATION,
-} from '../actions/mutes';
+} from '../actions/mutes.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/notifications.ts b/src/reducers/notifications.ts
index f2147b2cf..71aac86d6 100644
--- a/src/reducers/notifications.ts
+++ b/src/reducers/notifications.ts
@@ -5,20 +5,20 @@ import {
   fromJS,
 } from 'immutable';
 
-import { normalizeNotification } from 'soapbox/normalizers/notification';
-import { validType } from 'soapbox/utils/notification';
+import { normalizeNotification } from 'soapbox/normalizers/notification.ts';
+import { validType } from 'soapbox/utils/notification.ts';
 
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
   FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
   FOLLOW_REQUEST_REJECT_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts.ts';
 import {
   MARKER_FETCH_SUCCESS,
   MARKER_SAVE_REQUEST,
   MARKER_SAVE_SUCCESS,
-} from '../actions/markers';
+} from '../actions/markers.ts';
 import {
   NOTIFICATIONS_UPDATE,
   NOTIFICATIONS_EXPAND_SUCCESS,
@@ -31,11 +31,11 @@ import {
   NOTIFICATIONS_DEQUEUE,
   NOTIFICATIONS_MARK_READ_REQUEST,
   MAX_QUEUED_NOTIFICATIONS,
-} from '../actions/notifications';
-import { TIMELINE_DELETE } from '../actions/timelines';
+} from '../actions/notifications.ts';
+import { TIMELINE_DELETE } from '../actions/timelines.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const QueuedNotificationRecord = ImmutableRecord({
   notification: {} as APIEntity,
diff --git a/src/reducers/onboarding.test.ts b/src/reducers/onboarding.test.ts
index 65e77718f..e6372dae2 100644
--- a/src/reducers/onboarding.test.ts
+++ b/src/reducers/onboarding.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding';
+import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding.ts';
 
-import reducer from './onboarding';
+import reducer from './onboarding.ts';
 
 describe('onboarding reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/onboarding.ts b/src/reducers/onboarding.ts
index 2ef3503c6..5092d53cd 100644
--- a/src/reducers/onboarding.ts
+++ b/src/reducers/onboarding.ts
@@ -1,6 +1,6 @@
-import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding';
+import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding.ts';
 
-import type { OnboardingActions } from 'soapbox/actions/onboarding';
+import type { OnboardingActions } from 'soapbox/actions/onboarding.ts';
 
 type OnboardingState = {
   needsOnboarding: boolean;
diff --git a/src/reducers/patron.ts b/src/reducers/patron.ts
index 05a14abb9..9971687de 100644
--- a/src/reducers/patron.ts
+++ b/src/reducers/patron.ts
@@ -8,7 +8,7 @@ import {
 import {
   PATRON_INSTANCE_FETCH_SUCCESS,
   PATRON_ACCOUNT_FETCH_SUCCESS,
-} from '../actions/patron';
+} from '../actions/patron.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/pending-statuses.ts b/src/reducers/pending-statuses.ts
index 51c4c1aba..3400d0b5d 100644
--- a/src/reducers/pending-statuses.ts
+++ b/src/reducers/pending-statuses.ts
@@ -3,10 +3,10 @@ import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord,
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
-} from 'soapbox/actions/statuses';
+} from 'soapbox/actions/statuses.ts';
 
 import type { AnyAction } from 'redux';
-import type { StatusVisibility } from 'soapbox/normalizers/status';
+import type { StatusVisibility } from 'soapbox/normalizers/status.ts';
 
 const PendingStatusRecord = ImmutableRecord({
   content_type: '',
diff --git a/src/reducers/polls.test.ts b/src/reducers/polls.test.ts
index 2c053e572..1d03a4cb9 100644
--- a/src/reducers/polls.test.ts
+++ b/src/reducers/polls.test.ts
@@ -1,9 +1,9 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { POLLS_IMPORT } from 'soapbox/actions/importer';
+import { POLLS_IMPORT } from 'soapbox/actions/importer/index.ts';
 
-import reducer from './polls';
+import reducer from './polls.ts';
 
 describe('polls reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/polls.ts b/src/reducers/polls.ts
index 37e6ad2d2..58f6ed1f1 100644
--- a/src/reducers/polls.ts
+++ b/src/reducers/polls.ts
@@ -1,10 +1,10 @@
 import { Map as ImmutableMap } from 'immutable';
 
-import { POLLS_IMPORT } from 'soapbox/actions/importer';
-import { normalizeStatus } from 'soapbox/normalizers/status';
+import { POLLS_IMPORT } from 'soapbox/actions/importer/index.ts';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
 
 import type { AnyAction } from 'redux';
-import type { Poll, APIEntity, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Poll, APIEntity, EmbeddedEntity } from 'soapbox/types/entities.ts';
 
 type State = ImmutableMap<string, Poll>;
 
diff --git a/src/reducers/profile-hover-card.ts b/src/reducers/profile-hover-card.ts
index f662a3b99..f6e6f5a7e 100644
--- a/src/reducers/profile-hover-card.ts
+++ b/src/reducers/profile-hover-card.ts
@@ -4,7 +4,7 @@ import {
   PROFILE_HOVER_CARD_OPEN,
   PROFILE_HOVER_CARD_CLOSE,
   PROFILE_HOVER_CARD_UPDATE,
-} from 'soapbox/actions/profile-hover-card';
+} from 'soapbox/actions/profile-hover-card.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/relationships.test.ts b/src/reducers/relationships.test.ts
index c550941f7..e5c9d5736 100644
--- a/src/reducers/relationships.test.ts
+++ b/src/reducers/relationships.test.ts
@@ -2,9 +2,9 @@ import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
 import lain from 'soapbox/__fixtures__/lain.json';
-import { ACCOUNT_IMPORT } from 'soapbox/actions/importer';
+import { ACCOUNT_IMPORT } from 'soapbox/actions/importer/index.ts';
 
-import reducer from './relationships';
+import reducer from './relationships.ts';
 
 describe('relationships reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/relationships.ts b/src/reducers/relationships.ts
index 259885426..a5c322324 100644
--- a/src/reducers/relationships.ts
+++ b/src/reducers/relationships.ts
@@ -1,9 +1,9 @@
 import { Map as ImmutableMap } from 'immutable';
 import get from 'lodash/get';
 
-import { type Relationship, relationshipSchema } from 'soapbox/schemas';
+import { type Relationship, relationshipSchema } from 'soapbox/schemas/index.ts';
 
-import { ACCOUNT_NOTE_SUBMIT_SUCCESS } from '../actions/account-notes';
+import { ACCOUNT_NOTE_SUBMIT_SUCCESS } from '../actions/account-notes.ts';
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_UNBLOCK_SUCCESS,
@@ -15,18 +15,18 @@ import {
   ACCOUNT_UNPIN_SUCCESS,
   ACCOUNT_REMOVE_FROM_FOLLOWERS_SUCCESS,
   RELATIONSHIPS_FETCH_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts.ts';
 import {
   DOMAIN_BLOCK_SUCCESS,
   DOMAIN_UNBLOCK_SUCCESS,
-} from '../actions/domain-blocks';
+} from '../actions/domain-blocks.ts';
 import {
   ACCOUNT_IMPORT,
   ACCOUNTS_IMPORT,
-} from '../actions/importer';
+} from '../actions/importer/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type State = ImmutableMap<string, Relationship>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/reports.test.ts b/src/reducers/reports.test.ts
index 546f19154..4fbffe878 100644
--- a/src/reducers/reports.test.ts
+++ b/src/reducers/reports.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import reducer from './reports';
+import reducer from './reports.ts';
 
 describe('reports reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/reports.ts b/src/reducers/reports.ts
index 5c355a266..7bc32938f 100644
--- a/src/reducers/reports.ts
+++ b/src/reducers/reports.ts
@@ -12,10 +12,10 @@ import {
   REPORT_BLOCK_CHANGE,
   REPORT_RULE_CHANGE,
   ReportableEntities,
-} from '../actions/reports';
+} from '../actions/reports.ts';
 
 import type { AnyAction } from 'redux';
-import type { ChatMessage, Group } from 'soapbox/types/entities';
+import type { ChatMessage, Group } from 'soapbox/types/entities.ts';
 
 const NewReportRecord = ImmutableRecord({
   isSubmitting: false,
diff --git a/src/reducers/scheduled-statuses.ts b/src/reducers/scheduled-statuses.ts
index edcc86337..1f6fe4cfb 100644
--- a/src/reducers/scheduled-statuses.ts
+++ b/src/reducers/scheduled-statuses.ts
@@ -1,16 +1,16 @@
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer';
+import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer/index.ts';
 import {
   SCHEDULED_STATUSES_FETCH_SUCCESS,
   SCHEDULED_STATUS_CANCEL_REQUEST,
   SCHEDULED_STATUS_CANCEL_SUCCESS,
-} from 'soapbox/actions/scheduled-statuses';
-import { STATUS_CREATE_SUCCESS } from 'soapbox/actions/statuses';
+} from 'soapbox/actions/scheduled-statuses.ts';
+import { STATUS_CREATE_SUCCESS } from 'soapbox/actions/statuses.ts';
 
 import type { AnyAction } from 'redux';
-import type { StatusVisibility } from 'soapbox/normalizers/status';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { StatusVisibility } from 'soapbox/normalizers/status.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ScheduledStatusRecord = ImmutableRecord({
   id: '',
diff --git a/src/reducers/search.ts b/src/reducers/search.ts
index 06869cd89..47e81b2aa 100644
--- a/src/reducers/search.ts
+++ b/src/reducers/search.ts
@@ -1,13 +1,13 @@
 import { OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { normalizeTag } from 'soapbox/normalizers';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import {
   COMPOSE_MENTION,
   COMPOSE_REPLY,
   COMPOSE_DIRECT,
   COMPOSE_QUOTE,
-} from '../actions/compose';
+} from '../actions/compose.ts';
 import {
   SEARCH_CHANGE,
   SEARCH_CLEAR,
@@ -19,10 +19,10 @@ import {
   SEARCH_EXPAND_SUCCESS,
   SEARCH_ACCOUNT_SET,
   SEARCH_RESULTS_CLEAR,
-} from '../actions/search';
+} from '../actions/search.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Tag } from 'soapbox/types/entities';
+import type { APIEntity, Tag } from 'soapbox/types/entities.ts';
 
 const ResultsRecord = ImmutableRecord({
   accounts: ImmutableOrderedSet<string>(),
diff --git a/src/reducers/security.ts b/src/reducers/security.ts
index ecc76f982..3278d86cc 100644
--- a/src/reducers/security.ts
+++ b/src/reducers/security.ts
@@ -4,11 +4,11 @@ import {
   MFA_FETCH_SUCCESS,
   MFA_CONFIRM_SUCCESS,
   MFA_DISABLE_SUCCESS,
-} from '../actions/mfa';
+} from '../actions/mfa.ts';
 import {
   FETCH_TOKENS_SUCCESS,
   REVOKE_TOKEN_SUCCESS,
-} from '../actions/security';
+} from '../actions/security.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/settings.test.ts b/src/reducers/settings.test.ts
index 1cab1b6f5..f30595b3c 100644
--- a/src/reducers/settings.test.ts
+++ b/src/reducers/settings.test.ts
@@ -1,7 +1,7 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import reducer from './settings';
+import reducer from './settings.ts';
 
 describe('settings reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/settings.ts b/src/reducers/settings.ts
index e7946ca37..a3b5f324c 100644
--- a/src/reducers/settings.ts
+++ b/src/reducers/settings.ts
@@ -1,20 +1,20 @@
 import { Map as ImmutableMap, fromJS } from 'immutable';
 import { AnyAction } from 'redux';
 
-import { ME_FETCH_SUCCESS } from 'soapbox/actions/me';
+import { ME_FETCH_SUCCESS } from 'soapbox/actions/me.ts';
 
-import { EMOJI_CHOOSE } from '../actions/emojis';
-import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
-import { SEARCH_FILTER_SET } from '../actions/search';
+import { EMOJI_CHOOSE } from '../actions/emojis.ts';
+import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications.ts';
+import { SEARCH_FILTER_SET } from '../actions/search.ts';
 import {
   SETTING_CHANGE,
   SETTING_SAVE,
   SETTINGS_UPDATE,
   FE_NAME,
-} from '../actions/settings';
+} from '../actions/settings.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type State = ImmutableMap<string, any>;
 
diff --git a/src/reducers/sidebar.test.ts b/src/reducers/sidebar.test.ts
index 6f8194a9f..ae77587d1 100644
--- a/src/reducers/sidebar.test.ts
+++ b/src/reducers/sidebar.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import reducer from './sidebar';
+import reducer from './sidebar.ts';
 
 describe('sidebar reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/sidebar.ts b/src/reducers/sidebar.ts
index 8761a72fc..0b5725c1a 100644
--- a/src/reducers/sidebar.ts
+++ b/src/reducers/sidebar.ts
@@ -1,4 +1,4 @@
-import { SIDEBAR_OPEN, SIDEBAR_CLOSE } from '../actions/sidebar';
+import { SIDEBAR_OPEN, SIDEBAR_CLOSE } from '../actions/sidebar.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/soapbox.test.ts b/src/reducers/soapbox.test.ts
index e0231d80d..c3fb47c0e 100644
--- a/src/reducers/soapbox.test.ts
+++ b/src/reducers/soapbox.test.ts
@@ -3,10 +3,10 @@ import { describe, expect, it } from 'vitest';
 
 import soapboxConfig from 'soapbox/__fixtures__/admin_api_frontend_config.json';
 import soapbox from 'soapbox/__fixtures__/soapbox.json';
-import { ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
-import * as actions from 'soapbox/actions/soapbox';
+import { ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin.ts';
+import * as actions from 'soapbox/actions/soapbox.ts';
 
-import reducer from './soapbox';
+import reducer from './soapbox.ts';
 
 describe('soapbox reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/soapbox.ts b/src/reducers/soapbox.ts
index d44b562a3..a8ba53d2b 100644
--- a/src/reducers/soapbox.ts
+++ b/src/reducers/soapbox.ts
@@ -1,15 +1,15 @@
 import { List as ImmutableList, Map as ImmutableMap, fromJS } from 'immutable';
 
-import { PLEROMA_PRELOAD_IMPORT } from 'soapbox/actions/preload';
-import KVStore from 'soapbox/storage/kv-store';
-import { ConfigDB } from 'soapbox/utils/config-db';
+import { PLEROMA_PRELOAD_IMPORT } from 'soapbox/actions/preload.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import { ConfigDB } from 'soapbox/utils/config-db.ts';
 
-import { ADMIN_CONFIG_UPDATE_SUCCESS } from '../actions/admin';
+import { ADMIN_CONFIG_UPDATE_SUCCESS } from '../actions/admin.ts';
 import {
   SOAPBOX_CONFIG_REMEMBER_SUCCESS,
   SOAPBOX_CONFIG_REQUEST_SUCCESS,
   SOAPBOX_CONFIG_REQUEST_FAIL,
-} from '../actions/soapbox';
+} from '../actions/soapbox.ts';
 
 const initialState = ImmutableMap<string, any>();
 
diff --git a/src/reducers/status-hover-card.test.tsx b/src/reducers/status-hover-card.test.tsx
index fd1fcd7b6..929bb9571 100644
--- a/src/reducers/status-hover-card.test.tsx
+++ b/src/reducers/status-hover-card.test.tsx
@@ -4,9 +4,9 @@ import {
   STATUS_HOVER_CARD_OPEN,
   STATUS_HOVER_CARD_CLOSE,
   STATUS_HOVER_CARD_UPDATE,
-} from 'soapbox/actions/status-hover-card';
+} from 'soapbox/actions/status-hover-card.ts';
 
-import reducer, { ReducerRecord } from './status-hover-card';
+import reducer, { ReducerRecord } from './status-hover-card.ts';
 
 describe(STATUS_HOVER_CARD_OPEN, () => {
   it('sets the ref and statusId', () => {
diff --git a/src/reducers/status-hover-card.ts b/src/reducers/status-hover-card.ts
index 1d3d1da8d..e3d0914d5 100644
--- a/src/reducers/status-hover-card.ts
+++ b/src/reducers/status-hover-card.ts
@@ -4,7 +4,7 @@ import {
   STATUS_HOVER_CARD_OPEN,
   STATUS_HOVER_CARD_CLOSE,
   STATUS_HOVER_CARD_UPDATE,
-} from 'soapbox/actions/status-hover-card';
+} from 'soapbox/actions/status-hover-card.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/status-lists.test.ts b/src/reducers/status-lists.test.ts
index b032afb5f..b803bbf5d 100644
--- a/src/reducers/status-lists.test.ts
+++ b/src/reducers/status-lists.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import reducer from './status-lists';
+import reducer from './status-lists.ts';
 
 describe('status_lists reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/status-lists.ts b/src/reducers/status-lists.ts
index d8339296f..63494c9c5 100644
--- a/src/reducers/status-lists.ts
+++ b/src/reducers/status-lists.ts
@@ -11,8 +11,8 @@ import {
   STATUS_QUOTES_FETCH_FAIL,
   STATUS_QUOTES_FETCH_REQUEST,
   STATUS_QUOTES_FETCH_SUCCESS,
-} from 'soapbox/actions/status-quotes';
-import { STATUS_CREATE_SUCCESS } from 'soapbox/actions/statuses';
+} from 'soapbox/actions/status-quotes.ts';
+import { STATUS_CREATE_SUCCESS } from 'soapbox/actions/statuses.ts';
 
 import {
   BOOKMARKED_STATUSES_FETCH_REQUEST,
@@ -21,7 +21,7 @@ import {
   BOOKMARKED_STATUSES_EXPAND_REQUEST,
   BOOKMARKED_STATUSES_EXPAND_SUCCESS,
   BOOKMARKED_STATUSES_EXPAND_FAIL,
-} from '../actions/bookmarks';
+} from '../actions/bookmarks.ts';
 import {
   RECENT_EVENTS_FETCH_REQUEST,
   RECENT_EVENTS_FETCH_SUCCESS,
@@ -29,7 +29,7 @@ import {
   JOINED_EVENTS_FETCH_REQUEST,
   JOINED_EVENTS_FETCH_SUCCESS,
   JOINED_EVENTS_FETCH_FAIL,
-} from '../actions/events';
+} from '../actions/events.ts';
 import {
   FAVOURITED_STATUSES_FETCH_REQUEST,
   FAVOURITED_STATUSES_FETCH_SUCCESS,
@@ -43,7 +43,7 @@ import {
   ACCOUNT_FAVOURITED_STATUSES_EXPAND_REQUEST,
   ACCOUNT_FAVOURITED_STATUSES_EXPAND_SUCCESS,
   ACCOUNT_FAVOURITED_STATUSES_EXPAND_FAIL,
-} from '../actions/favourites';
+} from '../actions/favourites.ts';
 import {
   FAVOURITE_SUCCESS,
   UNFAVOURITE_SUCCESS,
@@ -51,10 +51,10 @@ import {
   UNBOOKMARK_SUCCESS,
   PIN_SUCCESS,
   UNPIN_SUCCESS,
-} from '../actions/interactions';
+} from '../actions/interactions.ts';
 import {
   PINNED_STATUSES_FETCH_SUCCESS,
-} from '../actions/pin-statuses';
+} from '../actions/pin-statuses.ts';
 import {
   SCHEDULED_STATUSES_FETCH_REQUEST,
   SCHEDULED_STATUSES_FETCH_SUCCESS,
@@ -64,10 +64,10 @@ import {
   SCHEDULED_STATUSES_EXPAND_FAIL,
   SCHEDULED_STATUS_CANCEL_REQUEST,
   SCHEDULED_STATUS_CANCEL_SUCCESS,
-} from '../actions/scheduled-statuses';
+} from '../actions/scheduled-statuses.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 export const StatusListRecord = ImmutableRecord({
   next: null as string | null,
diff --git a/src/reducers/statuses.test.ts b/src/reducers/statuses.test.ts
index 8efd4d5b2..70f464e70 100644
--- a/src/reducers/statuses.test.ts
+++ b/src/reducers/statuses.test.ts
@@ -4,16 +4,16 @@ import {
 } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { STATUS_IMPORT } from 'soapbox/actions/importer';
+import { STATUS_IMPORT } from 'soapbox/actions/importer/index.ts';
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_FAIL,
   STATUS_DELETE_REQUEST,
   STATUS_DELETE_FAIL,
-} from 'soapbox/actions/statuses';
-import { normalizeStatus } from 'soapbox/normalizers';
+} from 'soapbox/actions/statuses.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
 
-import reducer, { ReducerStatus } from './statuses';
+import reducer, { ReducerStatus } from './statuses.ts';
 
 describe('statuses reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/statuses.ts b/src/reducers/statuses.ts
index b857ba540..67c915177 100644
--- a/src/reducers/statuses.ts
+++ b/src/reducers/statuses.ts
@@ -2,23 +2,23 @@ import escapeTextContentForBrowser from 'escape-html';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import DOMPurify from 'isomorphic-dompurify';
 
-import emojify from 'soapbox/features/emoji';
-import { normalizeStatus } from 'soapbox/normalizers';
-import { simulateEmojiReact, simulateUnEmojiReact } from 'soapbox/utils/emoji-reacts';
-import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html';
-import { makeEmojiMap, normalizeId } from 'soapbox/utils/normalizers';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { simulateEmojiReact, simulateUnEmojiReact } from 'soapbox/utils/emoji-reacts.ts';
+import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html.ts';
+import { makeEmojiMap, normalizeId } from 'soapbox/utils/normalizers.ts';
 
 import {
   EMOJI_REACT_REQUEST,
   UNEMOJI_REACT_REQUEST,
-} from '../actions/emoji-reacts';
+} from '../actions/emoji-reacts.ts';
 import {
   EVENT_JOIN_REQUEST,
   EVENT_JOIN_FAIL,
   EVENT_LEAVE_REQUEST,
   EVENT_LEAVE_FAIL,
-} from '../actions/events';
-import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer';
+} from '../actions/events.ts';
+import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer/index.ts';
 import {
   REBLOG_REQUEST,
   REBLOG_FAIL,
@@ -32,7 +32,7 @@ import {
   DISLIKE_FAIL,
   ZAP_REQUEST,
   ZAP_FAIL,
-} from '../actions/interactions';
+} from '../actions/interactions.ts';
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_FAIL,
@@ -45,11 +45,11 @@ import {
   STATUS_TRANSLATE_SUCCESS,
   STATUS_TRANSLATE_UNDO,
   STATUS_UNFILTER,
-} from '../actions/statuses';
-import { TIMELINE_DELETE } from '../actions/timelines';
+} from '../actions/statuses.ts';
+import { TIMELINE_DELETE } from '../actions/timelines.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const domParser = new DOMParser();
 
diff --git a/src/reducers/suggestions.test.ts b/src/reducers/suggestions.test.ts
index f78580f1d..382af52f6 100644
--- a/src/reducers/suggestions.test.ts
+++ b/src/reducers/suggestions.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 
-import { SUGGESTIONS_FETCH_SUCCESS, SUGGESTIONS_DISMISS } from 'soapbox/actions/suggestions';
+import { SUGGESTIONS_FETCH_SUCCESS, SUGGESTIONS_DISMISS } from 'soapbox/actions/suggestions.ts';
 
-import reducer from './suggestions';
+import reducer from './suggestions.ts';
 
 describe('suggestions reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/suggestions.ts b/src/reducers/suggestions.ts
index 8f1cc209b..897ae74d1 100644
--- a/src/reducers/suggestions.ts
+++ b/src/reducers/suggestions.ts
@@ -1,7 +1,7 @@
 import { OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord } from 'immutable';
 
-import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts';
-import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain-blocks';
+import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts.ts';
+import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain-blocks.ts';
 import {
   SUGGESTIONS_FETCH_REQUEST,
   SUGGESTIONS_FETCH_SUCCESS,
@@ -10,10 +10,10 @@ import {
   SUGGESTIONS_V2_FETCH_REQUEST,
   SUGGESTIONS_V2_FETCH_SUCCESS,
   SUGGESTIONS_V2_FETCH_FAIL,
-} from 'soapbox/actions/suggestions';
+} from 'soapbox/actions/suggestions.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SuggestionRecord = ImmutableRecord({
   source: '',
diff --git a/src/reducers/tags.ts b/src/reducers/tags.ts
index 81488bb1e..840392c05 100644
--- a/src/reducers/tags.ts
+++ b/src/reducers/tags.ts
@@ -6,11 +6,11 @@ import {
   HASHTAG_FOLLOW_FAIL,
   HASHTAG_UNFOLLOW_REQUEST,
   HASHTAG_UNFOLLOW_FAIL,
-} from 'soapbox/actions/tags';
-import { normalizeTag } from 'soapbox/normalizers';
+} from 'soapbox/actions/tags.ts';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { Tag } from 'soapbox/types/entities';
+import type { Tag } from 'soapbox/types/entities.ts';
 
 const initialState = ImmutableMap<string, Tag>();
 
diff --git a/src/reducers/timelines.test.ts b/src/reducers/timelines.test.ts
index 815007ffa..8be8d72fe 100644
--- a/src/reducers/timelines.test.ts
+++ b/src/reducers/timelines.test.ts
@@ -5,9 +5,9 @@ import {
   TIMELINE_EXPAND_REQUEST,
   TIMELINE_EXPAND_FAIL,
   TIMELINE_EXPAND_SUCCESS,
-} from 'soapbox/actions/timelines';
+} from 'soapbox/actions/timelines.ts';
 
-import reducer from './timelines';
+import reducer from './timelines.ts';
 
 describe('timelines reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/timelines.ts b/src/reducers/timelines.ts
index 7b7dd274e..19542c5a8 100644
--- a/src/reducers/timelines.ts
+++ b/src/reducers/timelines.ts
@@ -10,11 +10,11 @@ import sample from 'lodash/sample';
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts.ts';
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
-} from '../actions/statuses';
+} from '../actions/statuses.ts';
 import {
   TIMELINE_UPDATE,
   TIMELINE_DELETE,
@@ -29,11 +29,11 @@ import {
   MAX_QUEUED_ITEMS,
   TIMELINE_SCROLL_TOP,
   TIMELINE_INSERT,
-} from '../actions/timelines';
+} from '../actions/timelines.ts';
 
 import type { AnyAction } from 'redux';
-import type { ImportPosition } from 'soapbox/entity-store/types';
-import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { ImportPosition } from 'soapbox/entity-store/types.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
 
 const TRUNCATE_LIMIT = 40;
 const TRUNCATE_SIZE = 20;
diff --git a/src/reducers/trending-statuses.ts b/src/reducers/trending-statuses.ts
index a86d66c11..a233994e8 100644
--- a/src/reducers/trending-statuses.ts
+++ b/src/reducers/trending-statuses.ts
@@ -4,10 +4,10 @@ import {
   TRENDING_STATUSES_FETCH_REQUEST,
   TRENDING_STATUSES_FETCH_SUCCESS,
   TRENDING_STATUSES_EXPAND_SUCCESS,
-} from 'soapbox/actions/trending-statuses';
+} from 'soapbox/actions/trending-statuses.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ReducerRecord = ImmutableRecord({
   items: ImmutableOrderedSet<string>(),
diff --git a/src/reducers/trends.test.ts b/src/reducers/trends.test.ts
index 4f9dfc46b..bc43b3162 100644
--- a/src/reducers/trends.test.ts
+++ b/src/reducers/trends.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import reducer from './trends';
+import reducer from './trends.ts';
 
 describe('trends reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/trends.ts b/src/reducers/trends.ts
index c43d5b7fd..873b29c19 100644
--- a/src/reducers/trends.ts
+++ b/src/reducers/trends.ts
@@ -1,15 +1,15 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 
-import { normalizeTag } from 'soapbox/normalizers';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import {
   TRENDS_FETCH_REQUEST,
   TRENDS_FETCH_SUCCESS,
   TRENDS_FETCH_FAIL,
-} from '../actions/trends';
+} from '../actions/trends.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Tag } from 'soapbox/types/entities';
+import type { APIEntity, Tag } from 'soapbox/types/entities.ts';
 
 const ReducerRecord = ImmutableRecord({
   items: ImmutableList<Tag>(),
diff --git a/src/reducers/user-lists.test.ts b/src/reducers/user-lists.test.ts
index a4b9c6a21..6da903553 100644
--- a/src/reducers/user-lists.test.ts
+++ b/src/reducers/user-lists.test.ts
@@ -1,7 +1,7 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import reducer from './user-lists';
+import reducer from './user-lists.ts';
 
 describe('user_lists reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/user-lists.ts b/src/reducers/user-lists.ts
index 97e1def39..7f57a77d4 100644
--- a/src/reducers/user-lists.ts
+++ b/src/reducers/user-lists.ts
@@ -17,11 +17,11 @@ import {
   FOLLOW_REQUEST_REJECT_SUCCESS,
   PINNED_ACCOUNTS_FETCH_SUCCESS,
   BIRTHDAY_REMINDERS_FETCH_SUCCESS,
-} from 'soapbox/actions/accounts';
+} from 'soapbox/actions/accounts.ts';
 import {
   BLOCKS_FETCH_SUCCESS,
   BLOCKS_EXPAND_SUCCESS,
-} from 'soapbox/actions/blocks';
+} from 'soapbox/actions/blocks.ts';
 import {
   DIRECTORY_FETCH_REQUEST,
   DIRECTORY_FETCH_SUCCESS,
@@ -29,7 +29,7 @@ import {
   DIRECTORY_EXPAND_REQUEST,
   DIRECTORY_EXPAND_SUCCESS,
   DIRECTORY_EXPAND_FAIL,
-} from 'soapbox/actions/directory';
+} from 'soapbox/actions/directory.ts';
 import {
   EVENT_PARTICIPATIONS_EXPAND_SUCCESS,
   EVENT_PARTICIPATIONS_FETCH_SUCCESS,
@@ -37,10 +37,10 @@ import {
   EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS,
   EVENT_PARTICIPATION_REQUEST_AUTHORIZE_SUCCESS,
   EVENT_PARTICIPATION_REQUEST_REJECT_SUCCESS,
-} from 'soapbox/actions/events';
+} from 'soapbox/actions/events.ts';
 import {
   FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
-} from 'soapbox/actions/familiar-followers';
+} from 'soapbox/actions/familiar-followers.ts';
 import {
   GROUP_MEMBERSHIP_REQUESTS_FETCH_SUCCESS,
   GROUP_MEMBERSHIP_REQUESTS_EXPAND_SUCCESS,
@@ -57,7 +57,7 @@ import {
   GROUP_BLOCKS_EXPAND_SUCCESS,
   GROUP_BLOCKS_EXPAND_FAIL,
   GROUP_UNBLOCK_SUCCESS,
-} from 'soapbox/actions/groups';
+} from 'soapbox/actions/groups.ts';
 import {
   REBLOGS_FETCH_SUCCESS,
   REBLOGS_EXPAND_SUCCESS,
@@ -67,12 +67,12 @@ import {
   REACTIONS_FETCH_SUCCESS,
   ZAPS_FETCH_SUCCESS,
   ZAPS_EXPAND_SUCCESS,
-} from 'soapbox/actions/interactions';
+} from 'soapbox/actions/interactions.ts';
 import {
   NOTIFICATIONS_UPDATE,
-} from 'soapbox/actions/notifications';
+} from 'soapbox/actions/notifications.ts';
 
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 export const ListRecord = ImmutableRecord({
   next: null as string | null,
diff --git a/src/schemas/account.ts b/src/schemas/account.ts
index 5fa4b0f83..bedd138fc 100644
--- a/src/schemas/account.ts
+++ b/src/schemas/account.ts
@@ -5,14 +5,14 @@ import z from 'zod';
 
 import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
 import headerMissing from 'soapbox/assets/images/header-missing.png';
-import emojify from 'soapbox/features/emoji';
-import { unescapeHTML } from 'soapbox/utils/html';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
 
-import { customEmojiSchema } from './custom-emoji';
-import { Relationship } from './relationship';
-import { coerceObject, contentSchema, filteredArray, makeCustomEmojiMap } from './utils';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { Relationship } from './relationship.ts';
+import { coerceObject, contentSchema, filteredArray, makeCustomEmojiMap } from './utils.ts';
 
-import type { Resolve } from 'soapbox/utils/types';
+import type { Resolve } from 'soapbox/utils/types.ts';
 
 const birthdaySchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/);
 
diff --git a/src/schemas/admin-account.ts b/src/schemas/admin-account.ts
index da225602f..828f16ae5 100644
--- a/src/schemas/admin-account.ts
+++ b/src/schemas/admin-account.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { accountSchema } from './account';
+import { accountSchema } from './account.ts';
 
 const adminIpSchema = z.object({
   ip: z.string().ip(),
diff --git a/src/schemas/announcement-reaction.ts b/src/schemas/announcement-reaction.ts
index c8a5cfc23..eaa7c0fc0 100644
--- a/src/schemas/announcement-reaction.ts
+++ b/src/schemas/announcement-reaction.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import type { Resolve } from 'soapbox/utils/types';
+import type { Resolve } from 'soapbox/utils/types.ts';
 
 // https://docs.joinmastodon.org/entities/announcement/
 const announcementReactionSchema = z.object({
diff --git a/src/schemas/announcement.ts b/src/schemas/announcement.ts
index e40b9c011..eded235c6 100644
--- a/src/schemas/announcement.ts
+++ b/src/schemas/announcement.ts
@@ -1,14 +1,14 @@
 import { z } from 'zod';
 
-import emojify from 'soapbox/features/emoji';
+import emojify from 'soapbox/features/emoji/index.ts';
 
-import { announcementReactionSchema } from './announcement-reaction';
-import { customEmojiSchema } from './custom-emoji';
-import { mentionSchema } from './mention';
-import { tagSchema } from './tag';
-import { dateSchema, filteredArray, makeCustomEmojiMap } from './utils';
+import { announcementReactionSchema } from './announcement-reaction.ts';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { mentionSchema } from './mention.ts';
+import { tagSchema } from './tag.ts';
+import { dateSchema, filteredArray, makeCustomEmojiMap } from './utils.ts';
 
-import type { Resolve } from 'soapbox/utils/types';
+import type { Resolve } from 'soapbox/utils/types.ts';
 
 const transformAnnouncement = (announcement: Resolve<z.infer<typeof baseAnnouncementSchema>>) => {
   const emojiMap = makeCustomEmojiMap(announcement.emojis);
diff --git a/src/schemas/attachment.ts b/src/schemas/attachment.ts
index dfc880f58..20d7e33f7 100644
--- a/src/schemas/attachment.ts
+++ b/src/schemas/attachment.ts
@@ -1,7 +1,7 @@
 import { isBlurhashValid } from 'blurhash';
 import { z } from 'zod';
 
-import { mimeSchema } from './utils';
+import { mimeSchema } from './utils.ts';
 
 const blurhashSchema = z.string().superRefine((value, ctx) => {
   const r = isBlurhashValid(value);
diff --git a/src/schemas/card.test.ts b/src/schemas/card.test.ts
index b8dbad9dd..c62b883be 100644
--- a/src/schemas/card.test.ts
+++ b/src/schemas/card.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { cardSchema } from './card';
+import { cardSchema } from './card.ts';
 
 describe('cardSchema', () => {
   it('adds base fields', () => {
diff --git a/src/schemas/card.ts b/src/schemas/card.ts
index dc4ba2e6b..3d03cb16d 100644
--- a/src/schemas/card.ts
+++ b/src/schemas/card.ts
@@ -3,7 +3,7 @@ import punycode from 'punycode';
 import DOMPurify from 'isomorphic-dompurify';
 import { z } from 'zod';
 
-import { groupSchema } from './group';
+import { groupSchema } from './group.ts';
 
 const IDNA_PREFIX = 'xn--';
 
diff --git a/src/schemas/chat-message.ts b/src/schemas/chat-message.ts
index fe0ff0f6b..1b32368aa 100644
--- a/src/schemas/chat-message.ts
+++ b/src/schemas/chat-message.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
-import { attachmentSchema } from './attachment';
-import { cardSchema } from './card';
-import { customEmojiSchema } from './custom-emoji';
-import { contentSchema, emojiSchema, filteredArray } from './utils';
+import { attachmentSchema } from './attachment.ts';
+import { cardSchema } from './card.ts';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { contentSchema, emojiSchema, filteredArray } from './utils.ts';
 
 const chatMessageSchema = z.object({
   account_id: z.string(),
diff --git a/src/schemas/emoji-reaction.ts b/src/schemas/emoji-reaction.ts
index 5f31658b1..0fcabefe3 100644
--- a/src/schemas/emoji-reaction.ts
+++ b/src/schemas/emoji-reaction.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { emojiSchema } from './utils';
+import { emojiSchema } from './utils.ts';
 
 const baseEmojiReactionSchema = z.object({
   count: z.number().nullable().catch(null),
diff --git a/src/schemas/event.ts b/src/schemas/event.ts
index e74a80760..6ece016a2 100644
--- a/src/schemas/event.ts
+++ b/src/schemas/event.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
-import { attachmentSchema } from './attachment';
-import { locationSchema } from './location';
+import { attachmentSchema } from './attachment.ts';
+import { locationSchema } from './location.ts';
 
 const eventSchema = z.object({
   name: z.string().catch(''),
diff --git a/src/schemas/group-member.ts b/src/schemas/group-member.ts
index 8135fecb6..88de11993 100644
--- a/src/schemas/group-member.ts
+++ b/src/schemas/group-member.ts
@@ -1,6 +1,6 @@
 import z from 'zod';
 
-import { accountSchema } from './account';
+import { accountSchema } from './account.ts';
 
 enum GroupRoles {
   OWNER = 'owner',
diff --git a/src/schemas/group-relationship.ts b/src/schemas/group-relationship.ts
index 93e2a5e14..ee1a5720e 100644
--- a/src/schemas/group-relationship.ts
+++ b/src/schemas/group-relationship.ts
@@ -1,6 +1,6 @@
 import z from 'zod';
 
-import { GroupRoles } from './group-member';
+import { GroupRoles } from './group-member.ts';
 
 const groupRelationshipSchema = z.object({
   blocked_by: z.boolean().catch(false),
diff --git a/src/schemas/group.test.ts b/src/schemas/group.test.ts
index 2ebe9f7d4..576d67802 100644
--- a/src/schemas/group.test.ts
+++ b/src/schemas/group.test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest';
 
-import { groupSchema } from './group';
+import { groupSchema } from './group.ts';
 
 test('groupSchema with a TruthSocial group', async () => {
   const data = await import('soapbox/__fixtures__/group-truthsocial.json');
diff --git a/src/schemas/group.ts b/src/schemas/group.ts
index afdbec9fd..8082258a5 100644
--- a/src/schemas/group.ts
+++ b/src/schemas/group.ts
@@ -3,13 +3,13 @@ import z from 'zod';
 
 import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
 import headerMissing from 'soapbox/assets/images/header-missing.png';
-import emojify from 'soapbox/features/emoji';
-import { unescapeHTML } from 'soapbox/utils/html';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
 
-import { customEmojiSchema } from './custom-emoji';
-import { groupRelationshipSchema } from './group-relationship';
-import { groupTagSchema } from './group-tag';
-import { filteredArray, makeCustomEmojiMap } from './utils';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { groupRelationshipSchema } from './group-relationship.ts';
+import { groupTagSchema } from './group-tag.ts';
+import { filteredArray, makeCustomEmojiMap } from './utils.ts';
 
 const groupSchema = z.object({
   avatar: z.string().catch(avatarMissing),
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
index 253baff7a..656017e1f 100644
--- a/src/schemas/index.ts
+++ b/src/schemas/index.ts
@@ -1,25 +1,25 @@
-export { accountSchema, type Account } from './account';
-export { announcementSchema, adminAnnouncementSchema, type Announcement, type AdminAnnouncement } from './announcement';
-export { announcementReactionSchema, type AnnouncementReaction } from './announcement-reaction';
-export { attachmentSchema, type Attachment } from './attachment';
-export { bookmarkFolderSchema, type BookmarkFolder } from './bookmark-folder';
-export { cardSchema, type Card } from './card';
-export { chatMessageSchema, type ChatMessage } from './chat-message';
-export { customEmojiSchema, type CustomEmoji } from './custom-emoji';
-export { domainSchema, type Domain } from './domain';
-export { emojiReactionSchema, type EmojiReaction } from './emoji-reaction';
-export { groupSchema, type Group } from './group';
-export { groupMemberSchema, type GroupMember } from './group-member';
-export { groupRelationshipSchema, type GroupRelationship } from './group-relationship';
-export { groupTagSchema, type GroupTag } from './group-tag';
-export { mentionSchema, type Mention } from './mention';
-export { moderationLogEntrySchema, type ModerationLogEntry } from './moderation-log-entry';
-export { notificationSchema, type Notification } from './notification';
-export { patronUserSchema, type PatronUser } from './patron';
-export { pollSchema, type Poll, type PollOption } from './poll';
-export { relationshipSchema, type Relationship } from './relationship';
-export { relaySchema, type Relay } from './relay';
-export { ruleSchema, adminRuleSchema, type Rule, type AdminRule } from './rule';
-export { statusSchema, type Status } from './status';
-export { tagSchema, type Tag } from './tag';
-export { tombstoneSchema, type Tombstone } from './tombstone';
+export { accountSchema, type Account } from './account.ts';
+export { announcementSchema, adminAnnouncementSchema, type Announcement, type AdminAnnouncement } from './announcement.ts';
+export { announcementReactionSchema, type AnnouncementReaction } from './announcement-reaction.ts';
+export { attachmentSchema, type Attachment } from './attachment.ts';
+export { bookmarkFolderSchema, type BookmarkFolder } from './bookmark-folder.ts';
+export { cardSchema, type Card } from './card.ts';
+export { chatMessageSchema, type ChatMessage } from './chat-message.ts';
+export { customEmojiSchema, type CustomEmoji } from './custom-emoji.ts';
+export { domainSchema, type Domain } from './domain.ts';
+export { emojiReactionSchema, type EmojiReaction } from './emoji-reaction.ts';
+export { groupSchema, type Group } from './group.ts';
+export { groupMemberSchema, type GroupMember } from './group-member.ts';
+export { groupRelationshipSchema, type GroupRelationship } from './group-relationship.ts';
+export { groupTagSchema, type GroupTag } from './group-tag.ts';
+export { mentionSchema, type Mention } from './mention.ts';
+export { moderationLogEntrySchema, type ModerationLogEntry } from './moderation-log-entry.ts';
+export { notificationSchema, type Notification } from './notification.ts';
+export { patronUserSchema, type PatronUser } from './patron.ts';
+export { pollSchema, type Poll, type PollOption } from './poll.ts';
+export { relationshipSchema, type Relationship } from './relationship.ts';
+export { relaySchema, type Relay } from './relay.ts';
+export { ruleSchema, adminRuleSchema, type Rule, type AdminRule } from './rule.ts';
+export { statusSchema, type Status } from './status.ts';
+export { tagSchema, type Tag } from './tag.ts';
+export { tombstoneSchema, type Tombstone } from './tombstone.ts';
diff --git a/src/schemas/instance.test.ts b/src/schemas/instance.test.ts
index 338763b66..2089a07f3 100644
--- a/src/schemas/instance.test.ts
+++ b/src/schemas/instance.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { instanceV1Schema } from './instance';
+import { instanceV1Schema } from './instance.ts';
 
 describe('instanceV1Schema.parse()', () => {
   it('normalizes an empty Map', () => {
diff --git a/src/schemas/instance.ts b/src/schemas/instance.ts
index 5c7c8ac0f..682d6b1c4 100644
--- a/src/schemas/instance.ts
+++ b/src/schemas/instance.ts
@@ -1,10 +1,10 @@
 /* eslint sort-keys: "error" */
 import z from 'zod';
 
-import { accountSchema } from './account';
-import { mrfSimpleSchema } from './pleroma';
-import { ruleSchema } from './rule';
-import { coerceObject, filteredArray, mimeSchema } from './utils';
+import { accountSchema } from './account.ts';
+import { mrfSimpleSchema } from './pleroma.ts';
+import { ruleSchema } from './rule.ts';
+import { coerceObject, filteredArray, mimeSchema } from './utils.ts';
 
 const versionSchema = z.string().catch('0.0.0').transform((version) => {
   // Handle Mastodon release candidates
diff --git a/src/schemas/notification.ts b/src/schemas/notification.ts
index e468c4e2b..d1a532224 100644
--- a/src/schemas/notification.ts
+++ b/src/schemas/notification.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
-import { accountSchema } from './account';
-import { chatMessageSchema } from './chat-message';
-import { statusSchema } from './status';
-import { emojiSchema } from './utils';
+import { accountSchema } from './account.ts';
+import { chatMessageSchema } from './chat-message.ts';
+import { statusSchema } from './status.ts';
+import { emojiSchema } from './utils.ts';
 
 const baseNotificationSchema = z.object({
   account: accountSchema,
diff --git a/src/schemas/pleroma.ts b/src/schemas/pleroma.ts
index 04f8bf580..6486fcbd6 100644
--- a/src/schemas/pleroma.ts
+++ b/src/schemas/pleroma.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { coerceObject } from './utils';
+import { coerceObject } from './utils.ts';
 
 const mrfSimpleSchema = coerceObject({
   accept: z.string().array().catch([]),
diff --git a/src/schemas/poll.test.ts b/src/schemas/poll.test.ts
index 0c47cc30f..7e62809ba 100644
--- a/src/schemas/poll.test.ts
+++ b/src/schemas/poll.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { pollSchema } from './poll';
+import { pollSchema } from './poll.ts';
 
 describe('normalizePoll()', () => {
   it('adds base fields', () => {
diff --git a/src/schemas/poll.ts b/src/schemas/poll.ts
index 1a60af410..f0e089f0a 100644
--- a/src/schemas/poll.ts
+++ b/src/schemas/poll.ts
@@ -2,10 +2,10 @@ import escapeTextContentForBrowser from 'escape-html';
 import DOMPurify from 'isomorphic-dompurify';
 import { z } from 'zod';
 
-import emojify from 'soapbox/features/emoji';
+import emojify from 'soapbox/features/emoji/index.ts';
 
-import { customEmojiSchema } from './custom-emoji';
-import { filteredArray, makeCustomEmojiMap } from './utils';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { filteredArray, makeCustomEmojiMap } from './utils.ts';
 
 const pollOptionSchema = z.object({
   title: z.string().catch(''),
diff --git a/src/schemas/soapbox/settings.ts b/src/schemas/soapbox/settings.ts
index e1b8fe53c..9f70c2c21 100644
--- a/src/schemas/soapbox/settings.ts
+++ b/src/schemas/soapbox/settings.ts
@@ -1,8 +1,8 @@
 import { z } from 'zod';
 
-import { locales } from 'soapbox/messages';
+import { locales } from 'soapbox/messages.ts';
 
-import { coerceObject } from '../utils';
+import { coerceObject } from '../utils.ts';
 
 const skinToneSchema = z.union([
   z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5), z.literal(6),
diff --git a/src/schemas/soapbox/soapbox-auth.ts b/src/schemas/soapbox/soapbox-auth.ts
index 54d6d6c5d..c2b0b8dc6 100644
--- a/src/schemas/soapbox/soapbox-auth.ts
+++ b/src/schemas/soapbox/soapbox-auth.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
-import { applicationSchema } from 'soapbox/schemas/application';
-import { tokenSchema } from 'soapbox/schemas/token';
+import { applicationSchema } from 'soapbox/schemas/application.ts';
+import { tokenSchema } from 'soapbox/schemas/token.ts';
 
 const authUserSchema = z.object({
   access_token: z.string(),
diff --git a/src/schemas/soapbox/soapbox-config.ts b/src/schemas/soapbox/soapbox-config.ts
index 97cda600c..3b36868a6 100644
--- a/src/schemas/soapbox/soapbox-config.ts
+++ b/src/schemas/soapbox/soapbox-config.ts
@@ -1,7 +1,7 @@
 /* eslint sort-keys: "error" */
 import { z } from 'zod';
 
-import { hexColorSchema } from '../utils';
+import { hexColorSchema } from '../utils.ts';
 
 export const cryptoAddressSchema = z.object({
   address: z.string(),
diff --git a/src/schemas/status.ts b/src/schemas/status.ts
index 7d41837f5..6c04f28ee 100644
--- a/src/schemas/status.ts
+++ b/src/schemas/status.ts
@@ -1,22 +1,22 @@
 import escapeTextContentForBrowser from 'escape-html';
 import { z } from 'zod';
 
-import emojify from 'soapbox/features/emoji';
-import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html.ts';
 
-import { accountSchema } from './account';
-import { attachmentSchema } from './attachment';
-import { cardSchema } from './card';
-import { customEmojiSchema } from './custom-emoji';
-import { emojiReactionSchema } from './emoji-reaction';
-import { eventSchema } from './event';
-import { groupSchema } from './group';
-import { mentionSchema } from './mention';
-import { pollSchema } from './poll';
-import { tagSchema } from './tag';
-import { contentSchema, dateSchema, filteredArray, makeCustomEmojiMap } from './utils';
+import { accountSchema } from './account.ts';
+import { attachmentSchema } from './attachment.ts';
+import { cardSchema } from './card.ts';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { emojiReactionSchema } from './emoji-reaction.ts';
+import { eventSchema } from './event.ts';
+import { groupSchema } from './group.ts';
+import { mentionSchema } from './mention.ts';
+import { pollSchema } from './poll.ts';
+import { tagSchema } from './tag.ts';
+import { contentSchema, dateSchema, filteredArray, makeCustomEmojiMap } from './utils.ts';
 
-import type { Resolve } from 'soapbox/utils/types';
+import type { Resolve } from 'soapbox/utils/types.ts';
 
 const statusPleromaSchema = z.object({
   event: eventSchema.nullish().catch(undefined),
diff --git a/src/schemas/utils.ts b/src/schemas/utils.ts
index 2110cd0bb..056c049fc 100644
--- a/src/schemas/utils.ts
+++ b/src/schemas/utils.ts
@@ -1,6 +1,6 @@
 import z from 'zod';
 
-import type { CustomEmoji } from './custom-emoji';
+import type { CustomEmoji } from './custom-emoji.ts';
 
 /** Ensure HTML content is a string, and drop empty `<p>` tags. */
 const contentSchema = z.string().catch('').transform((value) => value === '<p></p>' ? '' : value);
diff --git a/src/schemas/web-push.ts b/src/schemas/web-push.ts
index 60eee13a6..c59b43fb9 100644
--- a/src/schemas/web-push.ts
+++ b/src/schemas/web-push.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { coerceObject } from './utils';
+import { coerceObject } from './utils.ts';
 
 /** https://docs.joinmastodon.org/entities/WebPushSubscription/ */
 const webPushSubscriptionSchema = z.object({
diff --git a/src/schemas/zap-split.ts b/src/schemas/zap-split.ts
index e830e676b..9f3b9872d 100644
--- a/src/schemas/zap-split.ts
+++ b/src/schemas/zap-split.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { type Account, accountSchema } from './account';
+import { type Account, accountSchema } from './account.ts';
 
 const addMethodsToAccount = (account: Account) => {
   return {
diff --git a/src/selectors/index.ts b/src/selectors/index.ts
index a5d3076cc..297d638fe 100644
--- a/src/selectors/index.ts
+++ b/src/selectors/index.ts
@@ -7,20 +7,20 @@ import {
 } from 'immutable';
 import { createSelector } from 'reselect';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { Entities } from 'soapbox/entity-store/entities';
-import { type MRFSimple } from 'soapbox/schemas/pleroma';
-import { getDomain } from 'soapbox/utils/accounts';
-import ConfigDB from 'soapbox/utils/config-db';
-import { getFeatures } from 'soapbox/utils/features';
-import { shouldFilter } from 'soapbox/utils/timelines';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { type MRFSimple } from 'soapbox/schemas/pleroma.ts';
+import { getDomain } from 'soapbox/utils/accounts.ts';
+import ConfigDB from 'soapbox/utils/config-db.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
+import { shouldFilter } from 'soapbox/utils/timelines.ts';
 
-import type { EntityStore } from 'soapbox/entity-store/types';
-import type { ContextType } from 'soapbox/normalizers/filter';
-import type { ReducerChat } from 'soapbox/reducers/chats';
-import type { Account as AccountSchema } from 'soapbox/schemas';
-import type { RootState } from 'soapbox/store';
-import type { Account, Filter as FilterEntity, Notification, Status } from 'soapbox/types/entities';
+import type { EntityStore } from 'soapbox/entity-store/types.ts';
+import type { ContextType } from 'soapbox/normalizers/filter.ts';
+import type { ReducerChat } from 'soapbox/reducers/chats.ts';
+import type { Account as AccountSchema } from 'soapbox/schemas/index.ts';
+import type { RootState } from 'soapbox/store.ts';
+import type { Account, Filter as FilterEntity, Notification, Status } from 'soapbox/types/entities.ts';
 
 const normalizeId = (id: any): string => typeof id === 'string' ? id : '';
 
diff --git a/src/sentry.ts b/src/sentry.ts
index 9b053d92e..a30cef221 100644
--- a/src/sentry.ts
+++ b/src/sentry.ts
@@ -1,8 +1,8 @@
-import { NODE_ENV } from 'soapbox/build-config';
-import sourceCode from 'soapbox/utils/code';
+import { NODE_ENV } from 'soapbox/build-config.ts';
+import sourceCode from 'soapbox/utils/code.ts';
 
-import type { Account } from './schemas';
 import type { CaptureContext, SendFeedbackParams } from '@sentry/types';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 /** Start Sentry. */
 async function startSentry(dsn: string): Promise<void> {
diff --git a/src/store.ts b/src/store.ts
index 4b1700e26..0606e5108 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,9 +1,9 @@
 import { configureStore, Tuple } from '@reduxjs/toolkit';
 import { thunk, type ThunkDispatch } from 'redux-thunk';
 
-import errorsMiddleware from './middleware/errors';
-import soundsMiddleware from './middleware/sounds';
-import appReducer from './reducers';
+import errorsMiddleware from './middleware/errors.ts';
+import soundsMiddleware from './middleware/sounds.ts';
+import appReducer from './reducers/index.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/stream.ts b/src/stream.ts
index 599704d12..1f4bd38e5 100644
--- a/src/stream.ts
+++ b/src/stream.ts
@@ -1,8 +1,8 @@
 import WebSocketClient from '@gamestdio/websocket';
 
-import { getAccessToken } from 'soapbox/utils/auth';
+import { getAccessToken } from 'soapbox/utils/auth.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const randomIntUpTo = (max: number) => Math.floor(Math.random() * Math.floor(max));
 
diff --git a/src/toast.test.tsx b/src/toast.test.tsx
index d90734162..697171785 100644
--- a/src/toast.test.tsx
+++ b/src/toast.test.tsx
@@ -4,9 +4,9 @@ import { Toaster } from 'react-hot-toast';
 import { IntlProvider } from 'react-intl';
 import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
-import { act, screen } from 'soapbox/jest/test-helpers';
+import { act, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import toast from './toast';
+import toast from './toast.tsx';
 
 function renderApp() {
   return {
diff --git a/src/toast.tsx b/src/toast.tsx
index e0c5db424..f3050ad28 100644
--- a/src/toast.tsx
+++ b/src/toast.tsx
@@ -2,8 +2,8 @@ import { AxiosError } from 'axios';
 import toast from 'react-hot-toast';
 import { defineMessages, MessageDescriptor } from 'react-intl';
 
-import { Toast } from './components/ui';
-import { httpErrorMessages } from './utils/errors';
+import { Toast } from './components/ui/index.ts';
+import { httpErrorMessages } from './utils/errors.ts';
 
 export type ToastText = string | MessageDescriptor
 export type ToastType = 'success' | 'error' | 'info'
diff --git a/src/types/entities.ts b/src/types/entities.ts
index 1c88b7f7c..82dc1dad5 100644
--- a/src/types/entities.ts
+++ b/src/types/entities.ts
@@ -17,11 +17,11 @@ import {
   StatusEditRecord,
   StatusRecord,
   TagRecord,
-} from 'soapbox/normalizers';
-import { Account as SchemaAccount } from 'soapbox/schemas';
+} from 'soapbox/normalizers/index.ts';
+import { Account as SchemaAccount } from 'soapbox/schemas/index.ts';
 
 import type { Record as ImmutableRecord } from 'immutable';
-import type { LegacyMap } from 'soapbox/utils/legacy';
+import type { LegacyMap } from 'soapbox/utils/legacy.ts';
 
 type AdminAccount = ReturnType<typeof AdminAccountRecord>;
 type AdminReport = ReturnType<typeof AdminReportRecord>;
@@ -88,4 +88,4 @@ export type {
   Poll,
   PollOption,
   Relationship,
-} from 'soapbox/schemas';
\ No newline at end of file
+} from 'soapbox/schemas/index.ts';
\ No newline at end of file
diff --git a/src/types/soapbox.ts b/src/types/soapbox.ts
index 382b7dc73..b19e7f4e8 100644
--- a/src/types/soapbox.ts
+++ b/src/types/soapbox.ts
@@ -3,7 +3,7 @@ import {
   FooterItemRecord,
   CryptoAddressRecord,
   SoapboxConfigRecord,
-} from 'soapbox/normalizers/soapbox/soapbox-config';
+} from 'soapbox/normalizers/soapbox/soapbox-config.ts';
 
 type Me = string | null | false | undefined;
 
diff --git a/src/utils/accounts.ts b/src/utils/accounts.ts
index 0d57a6494..1006179b5 100644
--- a/src/utils/accounts.ts
+++ b/src/utils/accounts.ts
@@ -1,7 +1,7 @@
 import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
 import headerMissing from 'soapbox/assets/images/header-missing.png';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const getDomainFromURL = (account: Pick<Account, 'url'>): string => {
   try {
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 34799cae5..f448aaee2 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,8 +1,8 @@
 import { List as ImmutableList } from 'immutable';
 
-import { selectAccount, selectOwnAccount } from 'soapbox/selectors';
+import { selectAccount, selectOwnAccount } from 'soapbox/selectors/index.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const validId = (id: any) => typeof id === 'string' && id !== 'null' && id !== 'undefined';
 
diff --git a/src/utils/badges.test.ts b/src/utils/badges.test.ts
index d11218579..4335e29cc 100644
--- a/src/utils/badges.test.ts
+++ b/src/utils/badges.test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
+import { buildAccount } from 'soapbox/jest/factory.ts';
 
 import {
   tagToBadge,
@@ -8,7 +8,7 @@ import {
   filterBadges,
   getTagDiff,
   getBadges,
-} from './badges';
+} from './badges.ts';
 
 test('tagToBadge', () => {
   expect(tagToBadge('yolo')).toEqual('badge:yolo');
diff --git a/src/utils/badges.ts b/src/utils/badges.ts
index cd2d84894..0d83b0c82 100644
--- a/src/utils/badges.ts
+++ b/src/utils/badges.ts
@@ -1,6 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
-import type { Account } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/types/entities.ts';
 
 /** Convert a plain tag into a badge. */
 const tagToBadge = (tag: string) => `badge:${tag}`;
diff --git a/src/utils/base64.test.ts b/src/utils/base64.test.ts
index 5ee19e901..444913cc3 100644
--- a/src/utils/base64.test.ts
+++ b/src/utils/base64.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { decodeBase64 } from './base64';
+import { decodeBase64 } from './base64.ts';
 
 describe('decodeBase64', () => {
   it('returns a uint8 array', () => {
diff --git a/src/utils/chats.test.ts b/src/utils/chats.test.ts
index 3db16e42b..f98143ed3 100644
--- a/src/utils/chats.test.ts
+++ b/src/utils/chats.test.ts
@@ -1,11 +1,11 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import { ChatKeys, IChat } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import { ChatKeys, IChat } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
 
-import { updateChatMessage } from './chats';
+import { updateChatMessage } from './chats.ts';
 
 const chat: IChat = {
   accepted: true,
diff --git a/src/utils/chats.ts b/src/utils/chats.ts
index 423565e49..53a60be7d 100644
--- a/src/utils/chats.ts
+++ b/src/utils/chats.ts
@@ -1,13 +1,13 @@
 import { InfiniteData } from '@tanstack/react-query';
 import sumBy from 'lodash/sumBy';
 
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import { ChatKeys } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { Chat, ChatMessage } from 'soapbox/types/entities';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import { ChatKeys } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { Chat, ChatMessage } from 'soapbox/types/entities.ts';
 
-import { compareDate } from './comparators';
-import { appendPageItem, flattenPages, PaginatedResult, sortQueryData, updatePageItem } from './queries';
+import { compareDate } from './comparators.ts';
+import { appendPageItem, flattenPages, PaginatedResult, sortQueryData, updatePageItem } from './queries.ts';
 
 interface ChatPayload extends Omit<Chat, 'last_message'> {
   last_message: ChatMessage | null;
diff --git a/src/utils/code.ts b/src/utils/code.ts
index e42fb6dde..177cfca16 100644
--- a/src/utils/code.ts
+++ b/src/utils/code.ts
@@ -1,3 +1,3 @@
-import type { Code } from './code-compiletime';
+import type { Code } from './code-compiletime.ts';
 
 export default import.meta.compileTime<Code>('./code-compiletime.ts');
\ No newline at end of file
diff --git a/src/utils/colors.test.ts b/src/utils/colors.test.ts
index fbe17a12a..13c5edd84 100644
--- a/src/utils/colors.test.ts
+++ b/src/utils/colors.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import tintify from './colors';
+import tintify from './colors.ts';
 
 const AZURE = '#0482d8';
 
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index 277e73481..567c20c7d 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -25,7 +25,7 @@ SOFTWARE.
 // Adapted from:
 // https://github.com/javisperez/tailwindcolorshades/blob/master/src/composables/colors.ts
 
-import type { Rgb, TailwindColorObject } from 'soapbox/types/colors';
+import type { Rgb, TailwindColorObject } from 'soapbox/types/colors.ts';
 
 export function hexToRgb(hex: string): Rgb | null {
   const sanitizedHex = hex.replace(/##/g, '#');
diff --git a/src/utils/comparators.test.ts b/src/utils/comparators.test.ts
index f86152053..bbf714698 100644
--- a/src/utils/comparators.test.ts
+++ b/src/utils/comparators.test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest';
 
-import { compareId } from './comparators';
+import { compareId } from './comparators.ts';
 
 test('compareId', () => {
   expect(compareId('3', '3')).toBe(0);
diff --git a/src/utils/config-db.test.ts b/src/utils/config-db.test.ts
index 90b7dc117..11c036e08 100644
--- a/src/utils/config-db.test.ts
+++ b/src/utils/config-db.test.ts
@@ -3,7 +3,7 @@ import { expect, test } from 'vitest';
 
 import config_db from 'soapbox/__fixtures__/config_db.json';
 
-import { ConfigDB } from './config-db';
+import { ConfigDB } from './config-db.ts';
 
 test('find', () => {
   const configs = fromJS(config_db).get('configs');
diff --git a/src/utils/config-db.ts b/src/utils/config-db.ts
index 4dbf3c163..cbea280e1 100644
--- a/src/utils/config-db.ts
+++ b/src/utils/config-db.ts
@@ -6,7 +6,7 @@ import {
 } from 'immutable';
 import trimStart from 'lodash/trimStart';
 
-import { type MRFSimple, mrfSimpleSchema } from 'soapbox/schemas/pleroma';
+import { type MRFSimple, mrfSimpleSchema } from 'soapbox/schemas/pleroma.ts';
 
 export type Config = ImmutableMap<string, any>;
 export type Policy = Record<string, any>;
diff --git a/src/utils/emoji-reacts.test.ts b/src/utils/emoji-reacts.test.ts
index d5b1bc18e..eecc06861 100644
--- a/src/utils/emoji-reacts.test.ts
+++ b/src/utils/emoji-reacts.test.ts
@@ -1,8 +1,8 @@
 import { List as ImmutableList, fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { normalizeStatus } from 'soapbox/normalizers';
-import { emojiReactionSchema } from 'soapbox/schemas';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { emojiReactionSchema } from 'soapbox/schemas/index.ts';
 
 import {
   sortEmoji,
@@ -11,7 +11,7 @@ import {
   getReactForStatus,
   simulateEmojiReact,
   simulateUnEmojiReact,
-} from './emoji-reacts';
+} from './emoji-reacts.ts';
 
 const ALLOWED_EMOJI = ImmutableList([
   '👍',
diff --git a/src/utils/emoji-reacts.ts b/src/utils/emoji-reacts.ts
index 8bbdc07b1..3927060ea 100644
--- a/src/utils/emoji-reacts.ts
+++ b/src/utils/emoji-reacts.ts
@@ -1,6 +1,6 @@
 import { List as ImmutableList } from 'immutable';
 
-import { EmojiReaction, emojiReactionSchema } from 'soapbox/schemas';
+import { EmojiReaction, emojiReactionSchema } from 'soapbox/schemas/index.ts';
 
 // https://emojipedia.org/facebook
 // I've customized them.
diff --git a/src/utils/emoji.test.ts b/src/utils/emoji.test.ts
index f30a967a6..7587e57a5 100644
--- a/src/utils/emoji.test.ts
+++ b/src/utils/emoji.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest';
 import {
   removeVS16s,
   toCodePoints,
-} from './emoji';
+} from './emoji.ts';
 
 const ASCII_HEART = '❤'; // '\u2764\uFE0F'
 const RED_HEART_RGI = '❤️'; // '\u2764'
diff --git a/src/utils/features.test.ts b/src/utils/features.test.ts
index fb028a7ec..d7208cecb 100644
--- a/src/utils/features.test.ts
+++ b/src/utils/features.test.ts
@@ -1,11 +1,11 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildInstance } from 'soapbox/jest/factory';
+import { buildInstance } from 'soapbox/jest/factory.ts';
 
 import {
   parseVersion,
   getFeatures,
-} from './features';
+} from './features.ts';
 
 describe('parseVersion', () => {
   it('with Pleroma version string', () => {
diff --git a/src/utils/features.ts b/src/utils/features.ts
index 8a9b2b8dd..ff7b202cf 100644
--- a/src/utils/features.ts
+++ b/src/utils/features.ts
@@ -5,8 +5,8 @@ import gte from 'semver/functions/gte';
 import lt from 'semver/functions/lt';
 import semverParse from 'semver/functions/parse';
 
-import { custom } from 'soapbox/custom';
-import { InstanceV1, InstanceV2 } from 'soapbox/schemas/instance';
+import { custom } from 'soapbox/custom.ts';
+import { InstanceV1, InstanceV2 } from 'soapbox/schemas/instance.ts';
 
 /** Import custom overrides, if exists */
 const overrides = custom('features');
diff --git a/src/utils/groups.ts b/src/utils/groups.ts
index 5430d636c..8168f4eba 100644
--- a/src/utils/groups.ts
+++ b/src/utils/groups.ts
@@ -1,4 +1,4 @@
-import { groupSearchHistory } from 'soapbox/settings';
+import { groupSearchHistory } from 'soapbox/settings.ts';
 
 export const MAX_ADMIN_COUNT = 5;
 
diff --git a/src/utils/html.test.ts b/src/utils/html.test.ts
index 50648eb99..60ebfc7e6 100644
--- a/src/utils/html.test.ts
+++ b/src/utils/html.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import * as html from './html';
+import * as html from './html.ts';
 
 describe('html', () => {
   describe('unsecapeHTML', () => {
diff --git a/src/utils/input.test.ts b/src/utils/input.test.ts
index 2bd287420..6190408bd 100644
--- a/src/utils/input.test.ts
+++ b/src/utils/input.test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from 'vitest';
 
-import { normalizeUsername } from './input';
+import { normalizeUsername } from './input.ts';
 
 test('normalizeUsername', () => {
   expect(normalizeUsername('@alex')).toBe('alex');
diff --git a/src/utils/media.test.ts b/src/utils/media.test.ts
index 2287e2592..22bf7fc44 100644
--- a/src/utils/media.test.ts
+++ b/src/utils/media.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { addAutoPlay } from './media';
+import { addAutoPlay } from './media.ts';
 
 describe('addAutoPlay()', () => {
   describe('when the provider is Rumble', () => {
diff --git a/src/utils/numbers.test.tsx b/src/utils/numbers.test.tsx
index dbe1d26f3..0f7eba974 100644
--- a/src/utils/numbers.test.tsx
+++ b/src/utils/numbers.test.tsx
@@ -1,8 +1,8 @@
 import { describe, expect, test } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import { isIntegerId, secondsToDays, shortNumberFormat } from './numbers';
+import { isIntegerId, secondsToDays, shortNumberFormat } from './numbers.tsx';
 
 test('isIntegerId()', () => {
   expect(isIntegerId('0')).toBe(true);
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index fb728a56e..e84f9049e 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -1,4 +1,4 @@
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const PERMISSION_CREATE_GROUPS  = 0x0000000000100000;
 export const PERMISSION_INVITE_USERS   = 0x0000000000010000;
diff --git a/src/utils/queries.test.ts b/src/utils/queries.test.ts
index 8dc2cee58..39e5f344a 100644
--- a/src/utils/queries.test.ts
+++ b/src/utils/queries.test.ts
@@ -1,9 +1,9 @@
 import { InfiniteData } from '@tanstack/react-query';
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { queryClient } from 'soapbox/queries/client';
+import { queryClient } from 'soapbox/queries/client.ts';
 
-import { PaginatedResult, sortQueryData, updatePageItem } from './queries';
+import { PaginatedResult, sortQueryData, updatePageItem } from './queries.ts';
 
 interface Item {
   id: number;
diff --git a/src/utils/queries.ts b/src/utils/queries.ts
index 5932b2135..0c25cc819 100644
--- a/src/utils/queries.ts
+++ b/src/utils/queries.ts
@@ -1,4 +1,4 @@
-import { queryClient } from 'soapbox/queries/client';
+import { queryClient } from 'soapbox/queries/client.ts';
 
 import type { InfiniteData, QueryKey } from '@tanstack/react-query';
 
diff --git a/src/utils/redirect.ts b/src/utils/redirect.ts
index 84e22eb7c..6f42c1265 100644
--- a/src/utils/redirect.ts
+++ b/src/utils/redirect.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import type { Location } from 'soapbox/types/history';
+import type { Location } from 'soapbox/types/history.ts';
 
 const LOCAL_STORAGE_REDIRECT_KEY = 'soapbox:redirect-uri';
 
diff --git a/src/utils/scopes.ts b/src/utils/scopes.ts
index 0298d0125..bd77ee9cf 100644
--- a/src/utils/scopes.ts
+++ b/src/utils/scopes.ts
@@ -1,6 +1,6 @@
-import { PLEROMA, parseVersion } from './features';
+import { PLEROMA, parseVersion } from './features.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 /**
  * Get the OAuth scopes to use for login & signup.
diff --git a/src/utils/state.ts b/src/utils/state.ts
index 27dbcf33b..9fda7a6a4 100644
--- a/src/utils/state.ts
+++ b/src/utils/state.ts
@@ -3,12 +3,12 @@
  * @module soapbox/utils/state
  */
 
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import * as BuildConfig from 'soapbox/build-config';
-import { selectOwnAccount } from 'soapbox/selectors';
-import { isURL } from 'soapbox/utils/auth';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox.ts';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import { selectOwnAccount } from 'soapbox/selectors/index.ts';
+import { isURL } from 'soapbox/utils/auth.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 /** Whether to display the fqn instead of the acct. */
 export const displayFqn = (state: RootState): boolean => {
diff --git a/src/utils/static.ts b/src/utils/static.ts
index e85bd8723..266d975a1 100644
--- a/src/utils/static.ts
+++ b/src/utils/static.ts
@@ -5,7 +5,7 @@
 
 import { join } from 'path-browserify';
 
-import * as BuildConfig from 'soapbox/build-config';
+import * as BuildConfig from 'soapbox/build-config.ts';
 
 /** Gets the path to a file with build configuration being considered. */
 export const joinPublicPath = (...paths: string[]): string => {
diff --git a/src/utils/status.test.ts b/src/utils/status.test.ts
index 35631f4d6..168e2952c 100644
--- a/src/utils/status.test.ts
+++ b/src/utils/status.test.ts
@@ -1,11 +1,11 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildStatus } from 'soapbox/jest/factory';
+import { buildStatus } from 'soapbox/jest/factory.ts';
 
 import {
   hasIntegerMediaIds,
   defaultMediaVisibility,
-} from './status';
+} from './status.ts';
 
 describe('hasIntegerMediaIds()', () => {
   it('returns true for a Pleroma deleted status', async () => {
diff --git a/src/utils/status.ts b/src/utils/status.ts
index 8d99752cd..78c6171bd 100644
--- a/src/utils/status.ts
+++ b/src/utils/status.ts
@@ -1,7 +1,7 @@
-import { isIntegerId } from 'soapbox/utils/numbers';
+import { isIntegerId } from 'soapbox/utils/numbers.tsx';
 
 import type { IntlShape } from 'react-intl';
-import type { Status } from 'soapbox/schemas';
+import type { Status } from 'soapbox/schemas/index.ts';
 
 /** Get the initial visibility of media attachments from user settings. */
 export const defaultMediaVisibility = <T extends { reblog: T | string | null } & Pick<Status, 'visibility' | 'sensitive'>>(
diff --git a/src/utils/tailwind.test.ts b/src/utils/tailwind.test.ts
index db0aa0f6e..bdd7ba7fe 100644
--- a/src/utils/tailwind.test.ts
+++ b/src/utils/tailwind.test.ts
@@ -1,7 +1,7 @@
 import { Map as ImmutableMap } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { toTailwind, fromLegacyColors, expandPalette } from './tailwind';
+import { toTailwind, fromLegacyColors, expandPalette } from './tailwind.ts';
 
 describe('toTailwind()', () => {
   it('handles empty Soapbox config', () => {
diff --git a/src/utils/tailwind.ts b/src/utils/tailwind.ts
index 2209573a5..b95e2a898 100644
--- a/src/utils/tailwind.ts
+++ b/src/utils/tailwind.ts
@@ -1,9 +1,9 @@
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
-import tintify from 'soapbox/utils/colors';
-import { generateAccent, generateNeutral } from 'soapbox/utils/theme';
+import tintify from 'soapbox/utils/colors.ts';
+import { generateAccent, generateNeutral } from 'soapbox/utils/theme.ts';
 
-import type { TailwindColorPalette } from 'soapbox/types/colors';
+import type { TailwindColorPalette } from 'soapbox/types/colors.ts';
 
 type SoapboxConfig = ImmutableMap<string, any>;
 type SoapboxColors = ImmutableMap<string, any>;
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index a6b80bcd6..6c4c4e18b 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,7 +1,7 @@
-import { hexToRgb } from './colors';
+import { hexToRgb } from './colors.ts';
 
-import type { Rgb, Hsl, TailwindColorPalette, TailwindColorObject } from 'soapbox/types/colors';
-import type { SoapboxConfig } from 'soapbox/types/soapbox';
+import type { Rgb, Hsl, TailwindColorPalette, TailwindColorObject } from 'soapbox/types/colors.ts';
+import type { SoapboxConfig } from 'soapbox/types/soapbox.ts';
 
 // Taken from chromatism.js
 // https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js
diff --git a/src/utils/timelines.test.ts b/src/utils/timelines.test.ts
index 1baa63df1..9e163b899 100644
--- a/src/utils/timelines.test.ts
+++ b/src/utils/timelines.test.ts
@@ -1,9 +1,9 @@
 import { fromJS } from 'immutable';
 import { describe, expect, it } from 'vitest';
 
-import { buildStatus } from 'soapbox/jest/factory';
+import { buildStatus } from 'soapbox/jest/factory.ts';
 
-import { shouldFilter } from './timelines';
+import { shouldFilter } from './timelines.ts';
 
 describe('shouldFilter', () => {
   it('returns false under normal circumstances', () => {
diff --git a/src/utils/timelines.ts b/src/utils/timelines.ts
index b6052cbcc..166604fe4 100644
--- a/src/utils/timelines.ts
+++ b/src/utils/timelines.ts
@@ -1,6 +1,6 @@
 import { Map as ImmutableMap, type Collection } from 'immutable';
 
-import type { Status } from 'soapbox/schemas';
+import type { Status } from 'soapbox/schemas/index.ts';
 
 export const shouldFilter = (
   status: Pick<Status, 'in_reply_to_id' | 'visibility'> & { reblog: unknown },
diff --git a/src/workers.ts b/src/workers.ts
index 098aaa15c..24bd2b3e8 100644
--- a/src/workers.ts
+++ b/src/workers.ts
@@ -1,6 +1,6 @@
 import * as Comlink from 'comlink';
 
-import type { PowWorker } from './workers/pow.worker';
+import type { PowWorker } from './workers/pow.worker.ts';
 
 const powWorker = Comlink.wrap<typeof PowWorker>(
   new Worker(new URL('./workers/pow.worker.ts', import.meta.url), { type: 'module' }),
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 707639804..afd88d28c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,7 @@ import typographyPlugin from '@tailwindcss/typography';
 import { type Config } from 'tailwindcss';
 import plugin from 'tailwindcss/plugin';
 
-import { parseColorMatrix } from './tailwind/colors';
+import { parseColorMatrix } from './tailwind/colors.ts';
 
 const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
 
diff --git a/tailwind/colors.test.ts b/tailwind/colors.test.ts
index eee8eb41b..bd66e74b2 100644
--- a/tailwind/colors.test.ts
+++ b/tailwind/colors.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest';
 import {
   withOpacityValue,
   parseColorMatrix,
-} from './colors';
+} from './colors.ts';
 
 describe('withOpacityValue()', () => {
   it('returns a Tailwind color function with alpha support', () => {

From c6a3c19611fdf89649886376a2a281b803f294cb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 01:15:14 -0600
Subject: [PATCH 081/133] Avoid `using` syntax

---
 src/actions/nostr.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/actions/nostr.ts b/src/actions/nostr.ts
index c6d7c944d..87f13f238 100644
--- a/src/actions/nostr.ts
+++ b/src/actions/nostr.ts
@@ -21,7 +21,7 @@ function logInNostr(signer: NostrSigner, relay: NRelay1) {
 
     let authorizedPubkey: string | undefined;
 
-    using bunker = new NBunker({
+    const bunker = new NBunker({
       relay,
       userSigner: signer,
       bunkerSigner: authorization.signer,
@@ -64,6 +64,7 @@ function logInNostr(signer: NostrSigner, relay: NRelay1) {
     });
 
     await dispatch(verifyCredentials(accessToken));
+    bunker.close();
   };
 }
 

From 662d2aaf9327806299ec5526d2b266de05007c84 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 12:07:51 -0600
Subject: [PATCH 082/133] Don't scroll to the top when navigating between posts
 in a thread Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1778

---
 src/components/scroll-context.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/scroll-context.tsx b/src/components/scroll-context.tsx
index f5ffeeb60..74470e279 100644
--- a/src/components/scroll-context.tsx
+++ b/src/components/scroll-context.tsx
@@ -9,6 +9,12 @@ export const ScrollContext: React.FC<IScrollContext> = ({ children }) => {
   const location = useLocation<{ soapboxModalKey?: number } | undefined>();
 
   useEffect(() => {
+    // HACK: Don't scroll when navigating between posts.
+    // Surely there's a better way, so that components can negate the behavior from within instead of out here.
+    if (location.pathname.includes('/posts/')) {
+      return;
+    }
+
     if (!location.state?.soapboxModalKey) {
       window.scrollTo(0, 0);
     }

From 8dac2c52db66df4d544e40d5ff3ba6c6b90e1f05 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 14:25:50 -0600
Subject: [PATCH 083/133] Move ui components out of unnecessary subdirectories

---
 src/components/account-search.tsx             |  2 +-
 src/components/autosuggest-account-input.tsx  |  2 +-
 src/components/autosuggest-input.tsx          |  2 +-
 src/components/big-card.tsx                   |  2 +-
 src/components/birthday-input.tsx             |  2 +-
 src/components/emoji-graphic.tsx              |  2 +-
 src/components/markup.tsx                     |  2 +-
 src/components/media-gallery.tsx              |  2 +-
 src/components/relative-timestamp.tsx         |  2 +-
 src/components/status-content.tsx             |  2 +-
 .../ui/{accordion => }/accordion.tsx          |  6 +-
 .../ui/{avatar => }/avatar.test.tsx           |  0
 src/components/ui/{avatar => }/avatar.tsx     |  2 +-
 src/components/ui/{banner => }/banner.tsx     |  0
 .../ui/{button => }/button.test.tsx           |  0
 src/components/ui/{button => }/button.tsx     |  5 +-
 src/components/ui/{card => }/card.test.tsx    |  0
 src/components/ui/{card => }/card.tsx         |  6 +-
 src/components/ui/{carousel => }/carousel.tsx |  4 +-
 src/components/ui/{checkbox => }/checkbox.tsx |  0
 .../ui/{column => }/column.test.tsx           |  0
 src/components/ui/{column => }/column.tsx     |  2 +-
 src/components/ui/{combobox => }/combobox.css |  0
 src/components/ui/{combobox => }/combobox.tsx |  0
 src/components/ui/{counter => }/counter.tsx   |  0
 .../ui/{datepicker => }/datepicker.test.tsx   |  0
 .../ui/{datepicker => }/datepicker.tsx        |  6 +-
 src/components/ui/{datetime => }/datetime.tsx |  2 +-
 .../ui/{divider => }/divider.test.tsx         |  0
 src/components/ui/{divider => }/divider.tsx   |  4 +-
 .../{emoji-selector => }/emoji-selector.tsx   |  6 +-
 src/components/ui/{emoji => }/emoji.test.tsx  |  0
 src/components/ui/{emoji => }/emoji.tsx       |  0
 .../ui/{file-input => }/file-input.tsx        |  0
 .../{form-actions => }/form-actions.test.tsx  |  0
 .../ui/{form-actions => }/form-actions.tsx    |  2 +-
 .../ui/{form-group => }/form-group.test.tsx   |  0
 .../ui/{form-group => }/form-group.tsx        |  6 +-
 src/components/ui/{form => }/form.test.tsx    |  0
 src/components/ui/{form => }/form.tsx         |  0
 src/components/ui/{hstack => }/hstack.tsx     |  0
 .../ui/{icon-button => }/icon-button.tsx      |  4 +-
 src/components/ui/{icon => }/icon.tsx         |  3 +-
 src/components/ui/index.ts                    | 84 +++++++++----------
 src/components/ui/{input => }/input.tsx       |  6 +-
 .../language-dropdown.tsx                     |  2 +-
 src/components/ui/{layout => }/layout.tsx     |  0
 src/components/ui/{menu => }/menu.css         |  0
 src/components/ui/{menu => }/menu.tsx         |  0
 src/components/ui/{modal => }/modal.test.tsx  |  0
 src/components/ui/{modal => }/modal.tsx       |  8 +-
 src/components/ui/{popover => }/popover.tsx   |  2 +-
 src/components/ui/{portal => }/portal.tsx     |  0
 .../ui/{progress-bar => }/progress-bar.tsx    |  0
 .../ui/{radio-button => }/radio-button.tsx    |  2 +-
 src/components/ui/{select => }/select.tsx     |  0
 src/components/ui/{slider => }/slider.tsx     |  0
 src/components/ui/{spinner => }/spinner.css   |  0
 src/components/ui/{spinner => }/spinner.tsx   |  4 +-
 src/components/ui/{stack => }/stack.tsx       |  0
 .../ui/{streamfield => }/streamfield.tsx      | 10 +--
 .../ui/{icon => }/svg-icon.test.tsx           |  0
 src/components/ui/{icon => }/svg-icon.tsx     |  0
 src/components/ui/{tabs => }/tabs.css         |  0
 src/components/ui/{tabs => }/tabs.tsx         |  3 +-
 .../ui/{tag-input => }/tag-input.tsx          |  3 +-
 src/components/ui/{tag-input => }/tag.tsx     |  4 +-
 src/components/ui/{text => }/text.tsx         |  0
 src/components/ui/{textarea => }/textarea.tsx |  4 +-
 src/components/ui/{toast => }/toast.tsx       |  8 +-
 src/components/ui/{toggle => }/toggle.tsx     |  0
 src/components/ui/{tooltip => }/tooltip.tsx   |  0
 .../ui/{button => }/useButtonStyles.ts        |  0
 src/components/ui/{widget => }/widget.tsx     |  8 +-
 .../account-gallery/components/media-item.tsx |  2 +-
 src/features/audio/index.tsx                  |  2 +-
 .../chat-message-reaction-wrapper.tsx         |  2 +-
 .../compose/components/schedule-form.tsx      |  2 +-
 .../compose/components/search-zap-split.tsx   |  2 +-
 src/features/compose/components/search.tsx    |  2 +-
 src/features/developers/developers-menu.tsx   |  2 +-
 src/features/edit-profile/index.tsx           |  2 +-
 .../event/components/event-action-button.tsx  |  2 +-
 .../event/components/event-header.tsx         |  2 +-
 src/features/filters/edit-filter.tsx          |  2 +-
 .../group/components/group-tags-field.tsx     |  2 +-
 src/features/groups/components/tab-bar.tsx    |  2 +-
 .../nostr-relays/components/relay-editor.tsx  |  2 +-
 .../notifications/components/filter-bar.tsx   |  2 +-
 src/features/public-timeline/index.tsx        |  2 +-
 .../components/crypto-address-input.tsx       |  2 +-
 .../components/footer-link-input.tsx          |  2 +-
 .../components/promo-panel-input.tsx          |  2 +-
 .../compose-event-modal.tsx                   |  2 +-
 .../components/modals/confirmation-modal.tsx  |  2 +-
 .../modals/edit-announcement-modal.tsx        |  2 +-
 .../components/nostr-extension-indicator.tsx  |  4 +-
 .../steps/avatar-step.tsx                     |  2 +-
 .../onboarding-flow-modal/steps/bio-step.tsx  |  2 +-
 .../steps/completed-step.tsx                  |  2 +-
 .../steps/cover-photo-selection-step.tsx      |  2 +-
 .../steps/display-name-step.tsx               |  2 +-
 .../steps/suggested-accounts-step.tsx         |  2 +-
 .../ui/components/modals/reactions-modal.tsx  |  2 +-
 .../ui/components/modals/zap-invoice.tsx      |  2 +-
 src/features/video/index.tsx                  |  2 +-
 .../zap/components/zap-pay-request-form.tsx   |  4 +-
 107 files changed, 146 insertions(+), 150 deletions(-)
 rename src/components/ui/{accordion => }/accordion.tsx (95%)
 rename src/components/ui/{avatar => }/avatar.test.tsx (100%)
 rename src/components/ui/{avatar => }/avatar.tsx (97%)
 rename src/components/ui/{banner => }/banner.tsx (100%)
 rename src/components/ui/{button => }/button.test.tsx (100%)
 rename src/components/ui/{button => }/button.tsx (98%)
 rename src/components/ui/{card => }/card.test.tsx (100%)
 rename src/components/ui/{card => }/card.tsx (95%)
 rename src/components/ui/{carousel => }/carousel.tsx (97%)
 rename src/components/ui/{checkbox => }/checkbox.tsx (100%)
 rename src/components/ui/{column => }/column.test.tsx (100%)
 rename src/components/ui/{column => }/column.tsx (99%)
 rename src/components/ui/{combobox => }/combobox.css (100%)
 rename src/components/ui/{combobox => }/combobox.tsx (100%)
 rename src/components/ui/{counter => }/counter.tsx (100%)
 rename src/components/ui/{datepicker => }/datepicker.test.tsx (100%)
 rename src/components/ui/{datepicker => }/datepicker.tsx (95%)
 rename src/components/ui/{datetime => }/datetime.tsx (96%)
 rename src/components/ui/{divider => }/divider.test.tsx (100%)
 rename src/components/ui/{divider => }/divider.tsx (88%)
 rename src/components/ui/{emoji-selector => }/emoji-selector.tsx (95%)
 rename src/components/ui/{emoji => }/emoji.test.tsx (100%)
 rename src/components/ui/{emoji => }/emoji.tsx (100%)
 rename src/components/ui/{file-input => }/file-input.tsx (100%)
 rename src/components/ui/{form-actions => }/form-actions.test.tsx (100%)
 rename src/components/ui/{form-actions => }/form-actions.tsx (86%)
 rename src/components/ui/{form-group => }/form-group.test.tsx (100%)
 rename src/components/ui/{form-group => }/form-group.tsx (95%)
 rename src/components/ui/{form => }/form.test.tsx (100%)
 rename src/components/ui/{form => }/form.tsx (100%)
 rename src/components/ui/{hstack => }/hstack.tsx (100%)
 rename src/components/ui/{icon-button => }/icon-button.tsx (95%)
 rename src/components/ui/{icon => }/icon.tsx (96%)
 rename src/components/ui/{input => }/input.tsx (97%)
 rename src/components/ui/{language-dropdown => }/language-dropdown.tsx (96%)
 rename src/components/ui/{layout => }/layout.tsx (100%)
 rename src/components/ui/{menu => }/menu.css (100%)
 rename src/components/ui/{menu => }/menu.tsx (100%)
 rename src/components/ui/{modal => }/modal.test.tsx (100%)
 rename src/components/ui/{modal => }/modal.tsx (96%)
 rename src/components/ui/{popover => }/popover.tsx (98%)
 rename src/components/ui/{portal => }/portal.tsx (100%)
 rename src/components/ui/{progress-bar => }/progress-bar.tsx (100%)
 rename src/components/ui/{radio-button => }/radio-button.tsx (95%)
 rename src/components/ui/{select => }/select.tsx (100%)
 rename src/components/ui/{slider => }/slider.tsx (100%)
 rename src/components/ui/{spinner => }/spinner.css (100%)
 rename src/components/ui/{spinner => }/spinner.tsx (91%)
 rename src/components/ui/{stack => }/stack.tsx (100%)
 rename src/components/ui/{streamfield => }/streamfield.tsx (92%)
 rename src/components/ui/{icon => }/svg-icon.test.tsx (100%)
 rename src/components/ui/{icon => }/svg-icon.tsx (100%)
 rename src/components/ui/{tabs => }/tabs.css (100%)
 rename src/components/ui/{tabs => }/tabs.tsx (98%)
 rename src/components/ui/{tag-input => }/tag-input.tsx (97%)
 rename src/components/ui/{tag-input => }/tag.tsx (86%)
 rename src/components/ui/{text => }/text.tsx (100%)
 rename src/components/ui/{textarea => }/textarea.tsx (98%)
 rename src/components/ui/{toast => }/toast.tsx (96%)
 rename src/components/ui/{toggle => }/toggle.tsx (100%)
 rename src/components/ui/{tooltip => }/tooltip.tsx (100%)
 rename src/components/ui/{button => }/useButtonStyles.ts (100%)
 rename src/components/ui/{widget => }/widget.tsx (85%)

diff --git a/src/components/account-search.tsx b/src/components/account-search.tsx
index 5b78a12b1..2ed4f3723 100644
--- a/src/components/account-search.tsx
+++ b/src/components/account-search.tsx
@@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
 
-import SvgIcon from './ui/icon/svg-icon.tsx';
+import SvgIcon from './ui/svg-icon.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
diff --git a/src/components/autosuggest-account-input.tsx b/src/components/autosuggest-account-input.tsx
index 95a0bf9e6..f0199e8d5 100644
--- a/src/components/autosuggest-account-input.tsx
+++ b/src/components/autosuggest-account-input.tsx
@@ -7,7 +7,7 @@ import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
-import type { InputThemes } from 'soapbox/components/ui/input/input.tsx';
+import type { InputThemes } from 'soapbox/components/ui/input.tsx';
 
 const noOp = () => { };
 
diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index 75fb83c43..dde401e96 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -9,7 +9,7 @@ import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
 import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
-import type { InputThemes } from 'soapbox/components/ui/input/input.tsx';
+import type { InputThemes } from 'soapbox/components/ui/input.tsx';
 import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 export type AutoSuggestion = string | Emoji;
diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index 77c8d5585..d34b8ffeb 100644
--- a/src/components/big-card.tsx
+++ b/src/components/big-card.tsx
@@ -1,6 +1,6 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Card, CardBody, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 const closeIcon = xIcon;
diff --git a/src/components/birthday-input.tsx b/src/components/birthday-input.tsx
index 634b5ef36..cab17abcc 100644
--- a/src/components/birthday-input.tsx
+++ b/src/components/birthday-input.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { useInstance, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Datetime } from './ui/datetime/datetime.tsx';
+import { Datetime } from './ui/datetime.tsx';
 
 const messages = defineMessages({
   birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
diff --git a/src/components/emoji-graphic.tsx b/src/components/emoji-graphic.tsx
index 7ff4a0327..7facaa4ad 100644
--- a/src/components/emoji-graphic.tsx
+++ b/src/components/emoji-graphic.tsx
@@ -1,4 +1,4 @@
-import Emoji from 'soapbox/components/ui/emoji/emoji.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
 
 interface IEmojiGraphic {
   emoji: string;
diff --git a/src/components/markup.tsx b/src/components/markup.tsx
index 19901d0b5..3f5647787 100644
--- a/src/components/markup.tsx
+++ b/src/components/markup.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import Text, { IText } from './ui/text/text.tsx';
+import Text, { IText } from './ui/text.tsx';
 import './markup.css';
 
 interface IMarkup extends IText {
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 3beebbb22..8a02ccc23 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -13,7 +13,7 @@ import { truncateFilename } from 'soapbox/utils/media.ts';
 import { isIOS } from '../is-mobile.ts';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio.ts';
 
-import SvgIcon from './ui/icon/svg-icon.tsx';
+import SvgIcon from './ui/svg-icon.tsx';
 
 import type { List as ImmutableList } from 'immutable';
 
diff --git a/src/components/relative-timestamp.tsx b/src/components/relative-timestamp.tsx
index 27633fd3f..59b475174 100644
--- a/src/components/relative-timestamp.tsx
+++ b/src/components/relative-timestamp.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { injectIntl, defineMessages, IntlShape, FormatDateOptions } from 'react-intl';
 
-import Text, { IText } from './ui/text/text.tsx';
+import Text, { IText } from './ui/text.tsx';
 
 const messages = defineMessages({
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 26f1ce128..45ff497c8 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -14,7 +14,7 @@ import Markup from './markup.tsx';
 import Mention from './mention.tsx';
 import Poll from './polls/poll.tsx';
 
-import type { Sizes } from 'soapbox/components/ui/text/text.tsx';
+import type { Sizes } from 'soapbox/components/ui/text.tsx';
 import type { Status } from 'soapbox/types/entities.ts';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
diff --git a/src/components/ui/accordion/accordion.tsx b/src/components/ui/accordion.tsx
similarity index 95%
rename from src/components/ui/accordion/accordion.tsx
rename to src/components/ui/accordion.tsx
index 4c0a89d41..2602f2338 100644
--- a/src/components/ui/accordion/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -6,9 +6,9 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 
-import HStack from '../hstack/hstack.tsx';
-import Icon from '../icon/icon.tsx';
-import Text from '../text/text.tsx';
+import HStack from './hstack.tsx';
+import Icon from './icon.tsx';
+import Text from './text.tsx';
 
 import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
 
diff --git a/src/components/ui/avatar/avatar.test.tsx b/src/components/ui/avatar.test.tsx
similarity index 100%
rename from src/components/ui/avatar/avatar.test.tsx
rename to src/components/ui/avatar.test.tsx
diff --git a/src/components/ui/avatar/avatar.tsx b/src/components/ui/avatar.tsx
similarity index 97%
rename from src/components/ui/avatar/avatar.tsx
rename to src/components/ui/avatar.tsx
index ed6522119..f9f513147 100644
--- a/src/components/ui/avatar/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 
 import StillImage, { IStillImage } from 'soapbox/components/still-image.tsx';
 
-import Icon from '../icon/icon.tsx';
+import Icon from '../icon.tsx';
 
 const AVATAR_SIZE = 42;
 
diff --git a/src/components/ui/banner/banner.tsx b/src/components/ui/banner.tsx
similarity index 100%
rename from src/components/ui/banner/banner.tsx
rename to src/components/ui/banner.tsx
diff --git a/src/components/ui/button/button.test.tsx b/src/components/ui/button.test.tsx
similarity index 100%
rename from src/components/ui/button/button.test.tsx
rename to src/components/ui/button.test.tsx
diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button.tsx
similarity index 98%
rename from src/components/ui/button/button.tsx
rename to src/components/ui/button.tsx
index 1f69c9bf9..d401fcc2c 100644
--- a/src/components/ui/button/button.tsx
+++ b/src/components/ui/button.tsx
@@ -2,11 +2,10 @@ import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
-import Icon from '../icon/icon.tsx';
-
+import Icon from './icon.tsx';
 import { useButtonStyles } from './useButtonStyles.ts';
 
-import type { ButtonSizes, ButtonThemes } from './useButtonStyles.tsx';
+import type { ButtonSizes, ButtonThemes } from './useButtonStyles.ts';
 
 interface IButton {
   /** Whether this button expands the width of its container. */
diff --git a/src/components/ui/card/card.test.tsx b/src/components/ui/card.test.tsx
similarity index 100%
rename from src/components/ui/card/card.test.tsx
rename to src/components/ui/card.test.tsx
diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card.tsx
similarity index 95%
rename from src/components/ui/card/card.tsx
rename to src/components/ui/card.tsx
index 025b62aff..5c7b32921 100644
--- a/src/components/ui/card/card.tsx
+++ b/src/components/ui/card.tsx
@@ -4,10 +4,10 @@ import { forwardRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 
-import HStack from '../hstack/hstack.tsx';
-import Text from '../text/text.tsx';
+import HStack from './hstack.tsx';
+import Text from './text.tsx';
 
 const sizes = {
   md: 'p-4 sm:rounded-xl',
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel.tsx
similarity index 97%
rename from src/components/ui/carousel/carousel.tsx
rename to src/components/ui/carousel.tsx
index eee2b2f50..3bd7b5737 100644
--- a/src/components/ui/carousel/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -4,8 +4,8 @@ import { useEffect, useState } from 'react';
 
 import { useDimensions } from 'soapbox/hooks/index.ts';
 
-import HStack from '../hstack/hstack.tsx';
-import Icon from '../icon/icon.tsx';
+import HStack from './hstack.tsx';
+import Icon from './icon.tsx';
 
 interface ICarousel {
   children: any;
diff --git a/src/components/ui/checkbox/checkbox.tsx b/src/components/ui/checkbox.tsx
similarity index 100%
rename from src/components/ui/checkbox/checkbox.tsx
rename to src/components/ui/checkbox.tsx
diff --git a/src/components/ui/column/column.test.tsx b/src/components/ui/column.test.tsx
similarity index 100%
rename from src/components/ui/column/column.test.tsx
rename to src/components/ui/column.test.tsx
diff --git a/src/components/ui/column/column.tsx b/src/components/ui/column.tsx
similarity index 99%
rename from src/components/ui/column/column.tsx
rename to src/components/ui/column.tsx
index 48844a50b..6dbb33a1b 100644
--- a/src/components/ui/column/column.tsx
+++ b/src/components/ui/column.tsx
@@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom';
 import Helmet from 'soapbox/components/helmet.tsx';
 import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
-import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card.tsx';
+import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from './card.tsx';
 
 type IColumnHeader = Pick<IColumn, 'label' | 'backHref' | 'className' | 'action'>;
 
diff --git a/src/components/ui/combobox/combobox.css b/src/components/ui/combobox.css
similarity index 100%
rename from src/components/ui/combobox/combobox.css
rename to src/components/ui/combobox.css
diff --git a/src/components/ui/combobox/combobox.tsx b/src/components/ui/combobox.tsx
similarity index 100%
rename from src/components/ui/combobox/combobox.tsx
rename to src/components/ui/combobox.tsx
diff --git a/src/components/ui/counter/counter.tsx b/src/components/ui/counter.tsx
similarity index 100%
rename from src/components/ui/counter/counter.tsx
rename to src/components/ui/counter.tsx
diff --git a/src/components/ui/datepicker/datepicker.test.tsx b/src/components/ui/datepicker.test.tsx
similarity index 100%
rename from src/components/ui/datepicker/datepicker.test.tsx
rename to src/components/ui/datepicker.test.tsx
diff --git a/src/components/ui/datepicker/datepicker.tsx b/src/components/ui/datepicker.tsx
similarity index 95%
rename from src/components/ui/datepicker/datepicker.tsx
rename to src/components/ui/datepicker.tsx
index b841b22c3..69c2800cd 100644
--- a/src/components/ui/datepicker/datepicker.tsx
+++ b/src/components/ui/datepicker.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import Select from '../select/select.tsx';
-import Stack from '../stack/stack.tsx';
-import Text from '../text/text.tsx';
+import Select from './select.tsx';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 const getDaysInMonth = (month: number, year: number) => new Date(year, month + 1, 0).getDate();
 const currentYear = new Date().getFullYear();
diff --git a/src/components/ui/datetime/datetime.tsx b/src/components/ui/datetime.tsx
similarity index 96%
rename from src/components/ui/datetime/datetime.tsx
rename to src/components/ui/datetime.tsx
index ddd9c8e0d..1f9d77307 100644
--- a/src/components/ui/datetime/datetime.tsx
+++ b/src/components/ui/datetime.tsx
@@ -1,4 +1,4 @@
-import Input from '../input/input.tsx';
+import Input from './input.tsx';
 
 interface DatetimeProps {
   value: Date;
diff --git a/src/components/ui/divider/divider.test.tsx b/src/components/ui/divider.test.tsx
similarity index 100%
rename from src/components/ui/divider/divider.test.tsx
rename to src/components/ui/divider.test.tsx
diff --git a/src/components/ui/divider/divider.tsx b/src/components/ui/divider.tsx
similarity index 88%
rename from src/components/ui/divider/divider.tsx
rename to src/components/ui/divider.tsx
index 76eb66440..39a4557ea 100644
--- a/src/components/ui/divider/divider.tsx
+++ b/src/components/ui/divider.tsx
@@ -1,6 +1,6 @@
-import Text from '../text/text.tsx';
+import Text from './text.tsx';
 
-import type { Sizes as TextSizes } from '../text/text.tsx';
+import type { Sizes as TextSizes } from './text.tsx';
 
 interface IDivider {
   text?: string;
diff --git a/src/components/ui/emoji-selector/emoji-selector.tsx b/src/components/ui/emoji-selector.tsx
similarity index 95%
rename from src/components/ui/emoji-selector/emoji-selector.tsx
rename to src/components/ui/emoji-selector.tsx
index 6c06bc7ce..997677bdc 100644
--- a/src/components/ui/emoji-selector/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector.tsx
@@ -3,9 +3,9 @@ import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
-import EmojiComponent from 'soapbox/components/ui/emoji/emoji.tsx';
-import HStack from 'soapbox/components/ui/hstack/hstack.tsx';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
 import { useClickOutside, useFeatures, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
diff --git a/src/components/ui/emoji/emoji.test.tsx b/src/components/ui/emoji.test.tsx
similarity index 100%
rename from src/components/ui/emoji/emoji.test.tsx
rename to src/components/ui/emoji.test.tsx
diff --git a/src/components/ui/emoji/emoji.tsx b/src/components/ui/emoji.tsx
similarity index 100%
rename from src/components/ui/emoji/emoji.tsx
rename to src/components/ui/emoji.tsx
diff --git a/src/components/ui/file-input/file-input.tsx b/src/components/ui/file-input.tsx
similarity index 100%
rename from src/components/ui/file-input/file-input.tsx
rename to src/components/ui/file-input.tsx
diff --git a/src/components/ui/form-actions/form-actions.test.tsx b/src/components/ui/form-actions.test.tsx
similarity index 100%
rename from src/components/ui/form-actions/form-actions.test.tsx
rename to src/components/ui/form-actions.test.tsx
diff --git a/src/components/ui/form-actions/form-actions.tsx b/src/components/ui/form-actions.tsx
similarity index 86%
rename from src/components/ui/form-actions/form-actions.tsx
rename to src/components/ui/form-actions.tsx
index f7e3c2d92..a9e6b32c4 100644
--- a/src/components/ui/form-actions/form-actions.tsx
+++ b/src/components/ui/form-actions.tsx
@@ -1,4 +1,4 @@
-import HStack from '../hstack/hstack.tsx';
+import HStack from './hstack.tsx';
 
 interface IFormActions {
   children: React.ReactNode;
diff --git a/src/components/ui/form-group/form-group.test.tsx b/src/components/ui/form-group.test.tsx
similarity index 100%
rename from src/components/ui/form-group/form-group.test.tsx
rename to src/components/ui/form-group.test.tsx
diff --git a/src/components/ui/form-group/form-group.tsx b/src/components/ui/form-group.tsx
similarity index 95%
rename from src/components/ui/form-group/form-group.tsx
rename to src/components/ui/form-group.tsx
index 9eb2bb6f4..67eda1f64 100644
--- a/src/components/ui/form-group/form-group.tsx
+++ b/src/components/ui/form-group.tsx
@@ -1,8 +1,8 @@
 import { Children, cloneElement, isValidElement, useMemo } from 'react';
 
-import Checkbox from '../checkbox/checkbox.tsx';
-import HStack from '../hstack/hstack.tsx';
-import Stack from '../stack/stack.tsx';
+import Checkbox from './checkbox.tsx';
+import HStack from './hstack.tsx';
+import Stack from './stack.tsx';
 
 interface IFormGroup {
   /** Input label message. */
diff --git a/src/components/ui/form/form.test.tsx b/src/components/ui/form.test.tsx
similarity index 100%
rename from src/components/ui/form/form.test.tsx
rename to src/components/ui/form.test.tsx
diff --git a/src/components/ui/form/form.tsx b/src/components/ui/form.tsx
similarity index 100%
rename from src/components/ui/form/form.tsx
rename to src/components/ui/form.tsx
diff --git a/src/components/ui/hstack/hstack.tsx b/src/components/ui/hstack.tsx
similarity index 100%
rename from src/components/ui/hstack/hstack.tsx
rename to src/components/ui/hstack.tsx
diff --git a/src/components/ui/icon-button/icon-button.tsx b/src/components/ui/icon-button.tsx
similarity index 95%
rename from src/components/ui/icon-button/icon-button.tsx
rename to src/components/ui/icon-button.tsx
index e6c19a7b9..8b713ec4f 100644
--- a/src/components/ui/icon-button/icon-button.tsx
+++ b/src/components/ui/icon-button.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 
-import SvgIcon from '../icon/svg-icon.tsx';
-import Text from '../text/text.tsx';
+import SvgIcon from './svg-icon.tsx';
+import Text from './text.tsx';
 
 interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Class name for the <svg> icon. */
diff --git a/src/components/ui/icon/icon.tsx b/src/components/ui/icon.tsx
similarity index 96%
rename from src/components/ui/icon/icon.tsx
rename to src/components/ui/icon.tsx
index 6c64774d9..7cd787c40 100644
--- a/src/components/ui/icon/icon.tsx
+++ b/src/components/ui/icon.tsx
@@ -1,5 +1,4 @@
-import Counter from '../counter/counter.tsx';
-
+import Counter from './counter.tsx';
 import SvgIcon from './svg-icon.tsx';
 
 interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 3b0b51128..08e26ab8a 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -1,11 +1,11 @@
-export { default as Accordion } from './accordion/accordion.tsx';
-export { default as Avatar } from './avatar/avatar.tsx';
-export { default as Banner } from './banner/banner.tsx';
-export { default as Button } from './button/button.tsx';
-export { default as Carousel } from './carousel/carousel.tsx';
-export { Card, CardBody, CardHeader, CardTitle } from './card/card.tsx';
-export { default as Checkbox } from './checkbox/checkbox.tsx';
-export { Column, ColumnHeader } from './column/column.tsx';
+export { default as Accordion } from './accordion.tsx';
+export { default as Avatar } from './avatar.tsx';
+export { default as Banner } from './banner.tsx';
+export { default as Button } from './button.tsx';
+export { default as Carousel } from './carousel.tsx';
+export { Card, CardBody, CardHeader, CardTitle } from './card.tsx';
+export { default as Checkbox } from './checkbox.tsx';
+export { Column, ColumnHeader } from './column.tsx';
 export {
   Combobox,
   ComboboxInput,
@@ -13,21 +13,21 @@ export {
   ComboboxList,
   ComboboxOption,
   ComboboxOptionText,
-} from './combobox/combobox.tsx';
-export { default as Counter } from './counter/counter.tsx';
-export { default as Datepicker } from './datepicker/datepicker.tsx';
-export { default as Divider } from './divider/divider.tsx';
-export { default as Emoji } from './emoji/emoji.tsx';
-export { default as EmojiSelector } from './emoji-selector/emoji-selector.tsx';
-export { default as FileInput } from './file-input/file-input.tsx';
-export { default as Form } from './form/form.tsx';
-export { default as FormActions } from './form-actions/form-actions.tsx';
-export { default as FormGroup } from './form-group/form-group.tsx';
-export { default as HStack } from './hstack/hstack.tsx';
-export { default as Icon } from './icon/icon.tsx';
-export { default as IconButton } from './icon-button/icon-button.tsx';
-export { default as Input } from './input/input.tsx';
-export { default as Layout } from './layout/layout.tsx';
+} from './combobox.tsx';
+export { default as Counter } from './counter.tsx';
+export { default as Datepicker } from './datepicker.tsx';
+export { default as Divider } from './divider.tsx';
+export { default as Emoji } from './emoji.tsx';
+export { default as EmojiSelector } from './emoji-selector.tsx';
+export { default as FileInput } from './file-input.tsx';
+export { default as Form } from './form.tsx';
+export { default as FormActions } from './form-actions.tsx';
+export { default as FormGroup } from './form-group.tsx';
+export { default as HStack } from './hstack.tsx';
+export { default as Icon } from './icon.tsx';
+export { default as IconButton } from './icon-button.tsx';
+export { default as Input } from './input.tsx';
+export { default as Layout } from './layout.tsx';
 export {
   Menu,
   MenuButton,
@@ -36,22 +36,22 @@ export {
   MenuItems,
   MenuLink,
   MenuList,
-} from './menu/menu.tsx';
-export { default as Modal } from './modal/modal.tsx';
-export { default as Popover } from './popover/popover.tsx';
-export { default as Portal } from './portal/portal.tsx';
-export { default as ProgressBar } from './progress-bar/progress-bar.tsx';
-export { default as RadioButton } from './radio-button/radio-button.tsx';
-export { default as Select } from './select/select.tsx';
-export { default as Slider } from './slider/slider.tsx';
-export { default as Spinner } from './spinner/spinner.tsx';
-export { default as Stack } from './stack/stack.tsx';
-export { default as Streamfield } from './streamfield/streamfield.tsx';
-export { default as Tabs } from './tabs/tabs.tsx';
-export { default as TagInput } from './tag-input/tag-input.tsx';
-export { default as Text } from './text/text.tsx';
-export { default as Textarea } from './textarea/textarea.tsx';
-export { default as Toast } from './toast/toast.tsx';
-export { default as Toggle } from './toggle/toggle.tsx';
-export { default as Tooltip } from './tooltip/tooltip.tsx';
-export { default as Widget } from './widget/widget.tsx';
+} from './menu.tsx';
+export { default as Modal } from './modal.tsx';
+export { default as Popover } from './popover.tsx';
+export { default as Portal } from './portal.tsx';
+export { default as ProgressBar } from './progress-bar.tsx';
+export { default as RadioButton } from './radio-button.tsx';
+export { default as Select } from './select.tsx';
+export { default as Slider } from './slider.tsx';
+export { default as Spinner } from './spinner.tsx';
+export { default as Stack } from './stack.tsx';
+export { default as Streamfield } from './streamfield.tsx';
+export { default as Tabs } from './tabs.tsx';
+export { default as TagInput } from './tag-input.tsx';
+export { default as Text } from './text.tsx';
+export { default as Textarea } from './textarea.tsx';
+export { default as Toast } from './toast.tsx';
+export { default as Toggle } from './toggle.tsx';
+export { default as Tooltip } from './tooltip.tsx';
+export { default as Widget } from './widget.tsx';
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input.tsx
similarity index 97%
rename from src/components/ui/input/input.tsx
rename to src/components/ui/input.tsx
index 9de3a7e06..fa1f4d2f6 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input.tsx
@@ -7,9 +7,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useLocale } from 'soapbox/hooks/index.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import Icon from '../icon/icon.tsx';
-import SvgIcon from '../icon/svg-icon.tsx';
-import Tooltip from '../tooltip/tooltip.tsx';
+import Icon from './icon.tsx';
+import SvgIcon from './svg-icon.tsx';
+import Tooltip from './tooltip.tsx';
 
 const messages = defineMessages({
   showPassword: { id: 'input.password.show_password', defaultMessage: 'Show password' },
diff --git a/src/components/ui/language-dropdown/language-dropdown.tsx b/src/components/ui/language-dropdown.tsx
similarity index 96%
rename from src/components/ui/language-dropdown/language-dropdown.tsx
rename to src/components/ui/language-dropdown.tsx
index a8f0d5232..88c24c8f3 100644
--- a/src/components/ui/language-dropdown/language-dropdown.tsx
+++ b/src/components/ui/language-dropdown.tsx
@@ -2,7 +2,7 @@ import worldIcon from '@tabler/icons/outline/world.svg';
 
 import { openDropdownMenu } from 'soapbox/actions/dropdown-menu.ts';
 import DropdownMenu, { MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { languages } from 'soapbox/features/preferences/index.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
diff --git a/src/components/ui/layout/layout.tsx b/src/components/ui/layout.tsx
similarity index 100%
rename from src/components/ui/layout/layout.tsx
rename to src/components/ui/layout.tsx
diff --git a/src/components/ui/menu/menu.css b/src/components/ui/menu.css
similarity index 100%
rename from src/components/ui/menu/menu.css
rename to src/components/ui/menu.css
diff --git a/src/components/ui/menu/menu.tsx b/src/components/ui/menu.tsx
similarity index 100%
rename from src/components/ui/menu/menu.tsx
rename to src/components/ui/menu.tsx
diff --git a/src/components/ui/modal/modal.test.tsx b/src/components/ui/modal.test.tsx
similarity index 100%
rename from src/components/ui/modal/modal.test.tsx
rename to src/components/ui/modal.test.tsx
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal.tsx
similarity index 96%
rename from src/components/ui/modal/modal.tsx
rename to src/components/ui/modal.tsx
index 17932c586..595787da6 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -4,10 +4,10 @@ import clsx from 'clsx';
 import { forwardRef, useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import Button from '../button/button.tsx';
-import { ButtonThemes } from '../button/useButtonStyles.ts';
-import HStack from '../hstack/hstack.tsx';
-import IconButton from '../icon-button/icon-button.tsx';
+import Button from './button.tsx';
+import HStack from './hstack.tsx';
+import IconButton from './icon-button.tsx';
+import { ButtonThemes } from './useButtonStyles.ts';
 
 const messages = defineMessages({
   back: { id: 'card.back.label', defaultMessage: 'Back' },
diff --git a/src/components/ui/popover/popover.tsx b/src/components/ui/popover.tsx
similarity index 98%
rename from src/components/ui/popover/popover.tsx
rename to src/components/ui/popover.tsx
index 54f5fdc14..9649769b8 100644
--- a/src/components/ui/popover/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -13,7 +13,7 @@ import {
 import clsx from 'clsx';
 import { cloneElement, useRef, useState } from 'react';
 
-import Portal from '../portal/portal.tsx';
+import Portal from './portal.tsx';
 
 interface IPopover {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
diff --git a/src/components/ui/portal/portal.tsx b/src/components/ui/portal.tsx
similarity index 100%
rename from src/components/ui/portal/portal.tsx
rename to src/components/ui/portal.tsx
diff --git a/src/components/ui/progress-bar/progress-bar.tsx b/src/components/ui/progress-bar.tsx
similarity index 100%
rename from src/components/ui/progress-bar/progress-bar.tsx
rename to src/components/ui/progress-bar.tsx
diff --git a/src/components/ui/radio-button/radio-button.tsx b/src/components/ui/radio-button.tsx
similarity index 95%
rename from src/components/ui/radio-button/radio-button.tsx
rename to src/components/ui/radio-button.tsx
index d1dce47e4..3f137c6c2 100644
--- a/src/components/ui/radio-button/radio-button.tsx
+++ b/src/components/ui/radio-button.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import HStack from '../hstack/hstack.tsx';
+import HStack from './hstack.tsx';
 
 interface IRadioButton {
   value: string;
diff --git a/src/components/ui/select/select.tsx b/src/components/ui/select.tsx
similarity index 100%
rename from src/components/ui/select/select.tsx
rename to src/components/ui/select.tsx
diff --git a/src/components/ui/slider/slider.tsx b/src/components/ui/slider.tsx
similarity index 100%
rename from src/components/ui/slider/slider.tsx
rename to src/components/ui/slider.tsx
diff --git a/src/components/ui/spinner/spinner.css b/src/components/ui/spinner.css
similarity index 100%
rename from src/components/ui/spinner/spinner.css
rename to src/components/ui/spinner.css
diff --git a/src/components/ui/spinner/spinner.tsx b/src/components/ui/spinner.tsx
similarity index 91%
rename from src/components/ui/spinner/spinner.tsx
rename to src/components/ui/spinner.tsx
index a3b9797af..9811d9724 100644
--- a/src/components/ui/spinner/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import Stack from '../stack/stack.tsx';
-import Text from '../text/text.tsx';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 import './spinner.css';
 
diff --git a/src/components/ui/stack/stack.tsx b/src/components/ui/stack.tsx
similarity index 100%
rename from src/components/ui/stack/stack.tsx
rename to src/components/ui/stack.tsx
diff --git a/src/components/ui/streamfield/streamfield.tsx b/src/components/ui/streamfield.tsx
similarity index 92%
rename from src/components/ui/streamfield/streamfield.tsx
rename to src/components/ui/streamfield.tsx
index 72af083c3..8d130701c 100644
--- a/src/components/ui/streamfield/streamfield.tsx
+++ b/src/components/ui/streamfield.tsx
@@ -1,11 +1,11 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import Button from '../button/button.tsx';
-import HStack from '../hstack/hstack.tsx';
-import IconButton from '../icon-button/icon-button.tsx';
-import Stack from '../stack/stack.tsx';
-import Text from '../text/text.tsx';
+import Button from './button.tsx';
+import HStack from './hstack.tsx';
+import IconButton from './icon-button.tsx';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 const messages = defineMessages({
   add: { id: 'streamfield.add', defaultMessage: 'Add' },
diff --git a/src/components/ui/icon/svg-icon.test.tsx b/src/components/ui/svg-icon.test.tsx
similarity index 100%
rename from src/components/ui/icon/svg-icon.test.tsx
rename to src/components/ui/svg-icon.test.tsx
diff --git a/src/components/ui/icon/svg-icon.tsx b/src/components/ui/svg-icon.tsx
similarity index 100%
rename from src/components/ui/icon/svg-icon.tsx
rename to src/components/ui/svg-icon.tsx
diff --git a/src/components/ui/tabs/tabs.css b/src/components/ui/tabs.css
similarity index 100%
rename from src/components/ui/tabs/tabs.css
rename to src/components/ui/tabs.css
diff --git a/src/components/ui/tabs/tabs.tsx b/src/components/ui/tabs.tsx
similarity index 98%
rename from src/components/ui/tabs/tabs.tsx
rename to src/components/ui/tabs.tsx
index bd0437459..e3a1c11c1 100644
--- a/src/components/ui/tabs/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -9,8 +9,7 @@ import clsx from 'clsx';
 import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import Counter from '../counter/counter.tsx';
-
+import Counter from './counter.tsx';
 import './tabs.css';
 
 const HORIZONTAL_PADDING = 8;
diff --git a/src/components/ui/tag-input/tag-input.tsx b/src/components/ui/tag-input.tsx
similarity index 97%
rename from src/components/ui/tag-input/tag-input.tsx
rename to src/components/ui/tag-input.tsx
index 9162e0cfe..dd248fbdd 100644
--- a/src/components/ui/tag-input/tag-input.tsx
+++ b/src/components/ui/tag-input.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
-import HStack from '../hstack/hstack.tsx';
-
+import HStack from './hstack.tsx';
 import Tag from './tag.tsx';
 
 interface ITagInput {
diff --git a/src/components/ui/tag-input/tag.tsx b/src/components/ui/tag.tsx
similarity index 86%
rename from src/components/ui/tag-input/tag.tsx
rename to src/components/ui/tag.tsx
index 1c8ea6e12..cffb865d0 100644
--- a/src/components/ui/tag-input/tag.tsx
+++ b/src/components/ui/tag.tsx
@@ -1,7 +1,7 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 
-import IconButton from '../icon-button/icon-button.tsx';
-import Text from '../text/text.tsx';
+import IconButton from './icon-button.tsx';
+import Text from './text.tsx';
 
 interface ITag {
   /** Name of the tag. */
diff --git a/src/components/ui/text/text.tsx b/src/components/ui/text.tsx
similarity index 100%
rename from src/components/ui/text/text.tsx
rename to src/components/ui/text.tsx
diff --git a/src/components/ui/textarea/textarea.tsx b/src/components/ui/textarea.tsx
similarity index 98%
rename from src/components/ui/textarea/textarea.tsx
rename to src/components/ui/textarea.tsx
index 5546d19df..94d1a7d02 100644
--- a/src/components/ui/textarea/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -5,8 +5,8 @@ import { FormattedMessage } from 'react-intl';
 import { useLocale } from 'soapbox/hooks/index.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import Stack from '../stack/stack.tsx';
-import Text from '../text/text.tsx';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'maxLength' | 'onChange' | 'onClick' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
diff --git a/src/components/ui/toast/toast.tsx b/src/components/ui/toast.tsx
similarity index 96%
rename from src/components/ui/toast/toast.tsx
rename to src/components/ui/toast.tsx
index 4c9e24346..f27b94228 100644
--- a/src/components/ui/toast/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -9,10 +9,10 @@ import { Link } from 'react-router-dom';
 
 import { ToastText, ToastType } from 'soapbox/toast.tsx';
 
-import HStack from '../hstack/hstack.tsx';
-import Icon from '../icon/icon.tsx';
-import Stack from '../stack/stack.tsx';
-import Text from '../text/text.tsx';
+import HStack from './hstack.tsx';
+import Icon from './icon.tsx';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 const renderText = (text: ToastText) => {
   if (typeof text === 'string') {
diff --git a/src/components/ui/toggle/toggle.tsx b/src/components/ui/toggle.tsx
similarity index 100%
rename from src/components/ui/toggle/toggle.tsx
rename to src/components/ui/toggle.tsx
diff --git a/src/components/ui/tooltip/tooltip.tsx b/src/components/ui/tooltip.tsx
similarity index 100%
rename from src/components/ui/tooltip/tooltip.tsx
rename to src/components/ui/tooltip.tsx
diff --git a/src/components/ui/button/useButtonStyles.ts b/src/components/ui/useButtonStyles.ts
similarity index 100%
rename from src/components/ui/button/useButtonStyles.ts
rename to src/components/ui/useButtonStyles.ts
diff --git a/src/components/ui/widget/widget.tsx b/src/components/ui/widget.tsx
similarity index 85%
rename from src/components/ui/widget/widget.tsx
rename to src/components/ui/widget.tsx
index 37df917e9..bd083d960 100644
--- a/src/components/ui/widget/widget.tsx
+++ b/src/components/ui/widget.tsx
@@ -1,9 +1,9 @@
 import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
 
-import HStack from 'soapbox/components/ui/hstack/hstack.tsx';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
-import Stack from 'soapbox/components/ui/stack/stack.tsx';
-import Text from 'soapbox/components/ui/text/text.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx
index c39d68a42..e922a7203 100644
--- a/src/features/account-gallery/components/media-item.tsx
+++ b/src/features/account-gallery/components/media-item.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash.tsx';
 import StillImage from 'soapbox/components/still-image.tsx';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useSettings } from 'soapbox/hooks/index.ts';
 import { isIOS } from 'soapbox/is-mobile.ts';
 
diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx
index 51e0158cb..b195c3937 100644
--- a/src/features/audio/index.tsx
+++ b/src/features/audio/index.tsx
@@ -9,7 +9,7 @@ import throttle from 'lodash/throttle';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { formatTime, getPointerPosition } from 'soapbox/features/video/index.tsx';
 
 import Visualizer from './visualizer.ts';
diff --git a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
index b7d2fc4f2..eb8bb267d 100644
--- a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
+++ b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, cloneElement } from 'react';
 
-import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector.tsx';
+import EmojiSelector from 'soapbox/components/ui/emoji-selector.tsx';
 import { Portal } from 'soapbox/components/ui/index.ts';
 
 interface IChatMessageReactionWrapper {
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index 961c0d751..d34fc4bc3 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setSchedule, removeSchedule } from 'soapbox/actions/compose.ts';
 import IconButton from 'soapbox/components/icon-button.tsx';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime.tsx';
+import { Datetime } from 'soapbox/components/ui/datetime.tsx';
 import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/compose/components/search-zap-split.tsx b/src/features/compose/components/search-zap-split.tsx
index cc513ce16..f8c27392a 100644
--- a/src/features/compose/components/search-zap-split.tsx
+++ b/src/features/compose/components/search-zap-split.tsx
@@ -13,8 +13,8 @@ import {
   submitSearch,
 } from 'soapbox/actions/search.ts';
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
 import { Input } from 'soapbox/components/ui/index.ts';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { Account } from 'soapbox/schemas/index.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index 97bf548e0..adc6e3033 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -15,8 +15,8 @@ import {
   submitSearch,
 } from 'soapbox/actions/search.ts';
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
 import { Input } from 'soapbox/components/ui/index.ts';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
 import { AppDispatch, RootState } from 'soapbox/store.ts';
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index acedd4439..888f374ad 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -10,8 +10,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
 import { Column, Text } from 'soapbox/components/ui/index.ts';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 import sourceCode from 'soapbox/utils/code.ts';
diff --git a/src/features/edit-profile/index.tsx b/src/features/edit-profile/index.tsx
index c37fe5479..c1f6ac506 100644
--- a/src/features/edit-profile/index.tsx
+++ b/src/features/edit-profile/index.tsx
@@ -25,7 +25,7 @@ import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts.ts';
 import AvatarPicker from './components/avatar-picker.tsx';
 import HeaderPicker from './components/header-picker.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 import type { Account } from 'soapbox/schemas/index.ts';
 
 const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index dcd5cffa3..c6ab2bfad 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -7,7 +7,7 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { Button } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
-import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles.tsx';
+import type { ButtonThemes } from 'soapbox/components/ui/useButtonStyles.ts';
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index 22e79be21..1d4d4cecf 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -37,8 +37,8 @@ import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
 import { deleteStatus } from 'soapbox/actions/statuses.ts';
 import Icon from 'soapbox/components/icon.tsx';
 import StillImage from 'soapbox/components/still-image.tsx';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
 import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui/index.ts';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useAppDispatch, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
 import copy from 'soapbox/utils/copy.ts';
diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx
index c16413537..bdaba850e 100644
--- a/src/features/filters/edit-filter.tsx
+++ b/src/features/filters/edit-filter.tsx
@@ -12,7 +12,7 @@ import toast from 'soapbox/toast.tsx';
 
 import { SelectDropdown } from '../forms/index.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 
 interface IFilterField {
   id?: string;
diff --git a/src/features/group/components/group-tags-field.tsx b/src/features/group/components/group-tags-field.tsx
index b1d2d78d3..cebe5e94e 100644
--- a/src/features/group/components/group-tags-field.tsx
+++ b/src/features/group/components/group-tags-field.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { Input, Streamfield } from 'soapbox/components/ui/index.ts';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 
 const messages = defineMessages({
   hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
diff --git a/src/features/groups/components/tab-bar.tsx b/src/features/groups/components/tab-bar.tsx
index a8f05edd7..6d4343b53 100644
--- a/src/features/groups/components/tab-bar.tsx
+++ b/src/features/groups/components/tab-bar.tsx
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import { Tabs } from 'soapbox/components/ui/index.ts';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs.tsx';
+import type { Item } from 'soapbox/components/ui/tabs.tsx';
 
 export enum TabItems {
   MY_GROUPS = 'MY_GROUPS',
diff --git a/src/features/nostr-relays/components/relay-editor.tsx b/src/features/nostr-relays/components/relay-editor.tsx
index 42a37ca97..0ee5491cf 100644
--- a/src/features/nostr-relays/components/relay-editor.tsx
+++ b/src/features/nostr-relays/components/relay-editor.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
 import { HStack, Input, Select } from 'soapbox/components/ui/index.ts';
-import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 import { useInstance } from 'soapbox/hooks/index.ts';
 
 interface IRelayEditor {
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index 246e15a2c..2437df79a 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -12,7 +12,7 @@ import Icon from 'soapbox/components/icon.tsx';
 import { Tabs } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks/index.ts';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs.tsx';
+import type { Item } from 'soapbox/components/ui/tabs.tsx';
 
 const messages = defineMessages({
   all: { id: 'notifications.filter.all', defaultMessage: 'All' },
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 3a35cbad7..9ba4f93b0 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -8,7 +8,7 @@ import { clearTimeline, expandPublicTimeline } from 'soapbox/actions/timelines.t
 import { usePublicStream } from 'soapbox/api/hooks/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import { Accordion, Column } from 'soapbox/components/ui/index.ts';
-import { LanguageDropdown } from 'soapbox/components/ui/language-dropdown/language-dropdown.tsx';
+import { LanguageDropdown } from 'soapbox/components/ui/language-dropdown.tsx';
 import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme, useFeatures } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
diff --git a/src/features/soapbox-config/components/crypto-address-input.tsx b/src/features/soapbox-config/components/crypto-address-input.tsx
index fafd0f358..c9a0b97d3 100644
--- a/src/features/soapbox-config/components/crypto-address-input.tsx
+++ b/src/features/soapbox-config/components/crypto-address-input.tsx
@@ -2,7 +2,7 @@ import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui/index.ts';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 import type { CryptoAddress } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
diff --git a/src/features/soapbox-config/components/footer-link-input.tsx b/src/features/soapbox-config/components/footer-link-input.tsx
index 2723f76d6..8bd033c47 100644
--- a/src/features/soapbox-config/components/footer-link-input.tsx
+++ b/src/features/soapbox-config/components/footer-link-input.tsx
@@ -2,7 +2,7 @@ import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Input } from 'soapbox/components/ui/index.ts';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 import type { FooterItem } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
diff --git a/src/features/soapbox-config/components/promo-panel-input.tsx b/src/features/soapbox-config/components/promo-panel-input.tsx
index 20aab5e7d..fc64c6555 100644
--- a/src/features/soapbox-config/components/promo-panel-input.tsx
+++ b/src/features/soapbox-config/components/promo-panel-input.tsx
@@ -4,7 +4,7 @@ import { HStack, Input } from 'soapbox/components/ui/index.ts';
 
 import IconPicker from './icon-picker.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield.tsx';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 import type { PromoPanelItem } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 58816fa55..d748bddc4 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -24,7 +24,7 @@ import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location.tsx';
 import LocationSearch from 'soapbox/components/location-search.tsx';
 import { checkEventComposeContent } from 'soapbox/components/modal-root.tsx';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime.tsx';
+import { Datetime } from 'soapbox/components/ui/datetime.tsx';
 import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Toggle } from 'soapbox/components/ui/index.ts';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
diff --git a/src/features/ui/components/modals/confirmation-modal.tsx b/src/features/ui/components/modals/confirmation-modal.tsx
index 420060f99..e875a53bc 100644
--- a/src/features/ui/components/modals/confirmation-modal.tsx
+++ b/src/features/ui/components/modals/confirmation-modal.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import List, { ListItem } from 'soapbox/components/list.tsx';
 import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
 
-import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles.tsx';
+import type { ButtonThemes } from 'soapbox/components/ui/useButtonStyles.ts';
 
 interface IConfirmationModal {
   heading: React.ReactNode;
diff --git a/src/features/ui/components/modals/edit-announcement-modal.tsx b/src/features/ui/components/modals/edit-announcement-modal.tsx
index a96356281..017357ca7 100644
--- a/src/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/src/features/ui/components/modals/edit-announcement-modal.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals.ts';
 import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements.ts';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime.tsx';
+import { Datetime } from 'soapbox/components/ui/datetime.tsx';
 import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
index 2e538edb0..385505b26 100644
--- a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
@@ -3,8 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals.ts';
 import { nostrExtensionLogIn } from 'soapbox/actions/nostr.ts';
-import Stack from 'soapbox/components/ui/stack/stack.tsx';
-import Text from 'soapbox/components/ui/text/text.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index 7dde6a9ce..20a29574c 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -5,7 +5,7 @@ import { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index 57cd31814..bc7cf2712 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Button, Text, FormGroup, Stack, Textarea } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
index 17a8ba289..700ee3b70 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
@@ -2,7 +2,7 @@ import confettiIcon from '@tabler/icons/outline/confetti.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { FormattedMessage } from 'react-intl';
 
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Button, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
 
 const closeIcon = xIcon;
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index e7f29de2d..d23249f17 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -6,7 +6,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
 import StillImage from 'soapbox/components/still-image.tsx';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index e58d08e13..62c1e0e5a 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Button, Stack, Text, FormGroup, Input } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
index 8b51462d2..aef769faf 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
@@ -3,7 +3,7 @@ import debounce from 'lodash/debounce';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useOnboardingSuggestions } from 'soapbox/queries/suggestions.ts';
diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx
index 64e7f6d0e..7d3d7ecbc 100644
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/src/features/ui/components/modals/reactions-modal.tsx
@@ -10,7 +10,7 @@ import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { ReactionRecord } from 'soapbox/reducers/user-lists.ts';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs.tsx';
+import type { Item } from 'soapbox/components/ui/tabs.tsx';
 
 const messages = defineMessages({
   all: { id: 'reactions.all', defaultMessage: 'All' },
diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index c7d51f89b..016d1dd22 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -7,7 +7,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
 import CopyableInput from 'soapbox/components/copyable-input.tsx';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Modal, Button, Stack, Avatar, HStack } from 'soapbox/components/ui/index.ts';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index dfca5663e..92acc005a 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -11,7 +11,7 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 import { defineMessages, useIntl } from 'react-intl';
 
 import Blurhash from 'soapbox/components/blurhash.tsx';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media-aspect-ratio.ts';
 
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index 6590ed79b..ca12d56c7 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -14,9 +14,9 @@ import coinIcon from 'soapbox/assets/icons/coin.png';
 import moneyBag from 'soapbox/assets/icons/money-bag.png';
 import pileCoin from 'soapbox/assets/icons/pile-coin.png';
 import DisplayNameInline from 'soapbox/components/display-name-inline.tsx';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon.tsx';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { Stack, Button, Input, Avatar, Text } from 'soapbox/components/ui/index.ts';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import ZapButton from './zap-button/zap-button.tsx';

From 513b7d8ef955fb275cb23bbec05e9f44702c423b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 15:05:02 -0600
Subject: [PATCH 084/133] Remove components/ui barrel import

---
 src/actions/moderation.tsx                    |  3 +-
 src/components/account.tsx                    |  8 ++-
 src/components/announcements/announcement.tsx |  3 +-
 .../announcements/announcements-panel.tsx     |  4 +-
 src/components/authorize-reject-buttons.tsx   |  4 +-
 src/components/autosuggest-input.tsx          |  3 +-
 src/components/autosuggest-location.tsx       |  7 ++-
 src/components/avatar-stack.tsx               |  3 +-
 src/components/big-card.tsx                   |  4 +-
 src/components/birthday-panel.tsx             |  2 +-
 src/components/copyable-input.tsx             |  4 +-
 src/components/display-name-inline.tsx        |  4 +-
 src/components/display-name.tsx               |  4 +-
 src/components/domain.tsx                     |  5 +-
 .../dropdown-menu/dropdown-menu-item.tsx      |  3 +-
 .../dropdown-menu/dropdown-menu.tsx           |  4 +-
 src/components/event-preview.tsx              |  5 +-
 src/components/gdpr-banner.tsx                |  6 +-
 src/components/group-card.tsx                 |  4 +-
 src/components/groups/group-avatar.tsx        |  2 +-
 .../groups/popover/group-popover.tsx          |  7 ++-
 src/components/hashtag.tsx                    |  7 ++-
 src/components/icon-with-counter.tsx          |  2 +-
 src/components/list.tsx                       |  7 ++-
 src/components/load-more.tsx                  |  2 +-
 src/components/loading-screen.tsx             |  2 +-
 src/components/mention.tsx                    |  2 +-
 src/components/missing-indicator.tsx          |  4 +-
 src/components/navlinks.tsx                   |  2 +-
 src/components/pending-items-row.tsx          |  4 +-
 src/components/polls/poll-footer.tsx          |  6 +-
 src/components/polls/poll-option.tsx          |  4 +-
 src/components/polls/poll.tsx                 |  3 +-
 src/components/preview-card.tsx               |  5 +-
 src/components/profile-hover-card.tsx         |  6 +-
 src/components/pull-to-refresh.tsx            |  2 +-
 src/components/quoted-status-indicator.tsx    |  4 +-
 src/components/quoted-status.tsx              |  2 +-
 src/components/scroll-top-button.tsx          |  3 +-
 src/components/scrollable-list.tsx            |  3 +-
 src/components/sentry-feedback-form.tsx       |  7 ++-
 src/components/sidebar-menu.tsx               |  7 ++-
 src/components/sidebar-navigation-link.tsx    |  3 +-
 src/components/sidebar-navigation.tsx         |  2 +-
 src/components/site-error-boundary.tsx        |  5 +-
 src/components/status-action-bar.tsx          |  2 +-
 src/components/status-action-button.tsx       |  4 +-
 src/components/status-hover-card.tsx          |  2 +-
 src/components/status-reaction-wrapper.tsx    |  3 +-
 src/components/status.tsx                     |  5 +-
 .../statuses/sensitive-content-overlay.tsx    |  7 ++-
 src/components/statuses/status-info.tsx       |  3 +-
 src/components/thumb-navigation-link.tsx      |  3 +-
 src/components/tombstone.tsx                  |  2 +-
 src/components/translate-button.tsx           |  5 +-
 src/components/ui/index.ts                    | 57 -------------------
 src/components/upload-progress.tsx            |  6 +-
 src/components/upload.tsx                     |  4 +-
 src/components/validation-checkmark.tsx       |  4 +-
 src/components/verification-badge.tsx         |  2 +-
 src/features/about/index.tsx                  |  2 +-
 src/features/account-gallery/index.tsx        |  3 +-
 .../components/moved-note.tsx                 |  3 +-
 src/features/account-timeline/index.tsx       |  4 +-
 src/features/account/components/header.tsx    |  4 +-
 src/features/admin/announcements.tsx          |  6 +-
 src/features/admin/components/admin-tabs.tsx  |  2 +-
 src/features/admin/components/dashcounter.tsx |  2 +-
 .../components/latest-accounts-panel.tsx      |  2 +-
 .../admin/components/report-status.tsx        |  3 +-
 src/features/admin/components/report.tsx      |  7 ++-
 src/features/admin/domains.tsx                |  6 +-
 src/features/admin/index.tsx                  |  2 +-
 src/features/admin/manage-zap-split.tsx       |  6 +-
 src/features/admin/moderation-log.tsx         |  4 +-
 src/features/admin/nostr-relays.tsx           |  6 +-
 src/features/admin/relays.tsx                 |  8 ++-
 src/features/admin/rules.tsx                  |  6 +-
 src/features/admin/tabs/dashboard.tsx         |  5 +-
 src/features/admin/user-index.tsx             |  2 +-
 src/features/aliases/components/account.tsx   |  2 +-
 src/features/aliases/components/search.tsx    |  2 +-
 src/features/aliases/index.tsx                |  5 +-
 .../auth-login/components/captcha.tsx         |  4 +-
 .../auth-login/components/consumer-button.tsx |  3 +-
 .../auth-login/components/consumers-list.tsx  |  4 +-
 .../auth-login/components/login-form.tsx      |  6 +-
 src/features/auth-login/components/logout.tsx |  2 +-
 .../auth-login/components/otp-auth-form.tsx   |  6 +-
 .../components/password-reset-confirm.tsx     |  6 +-
 .../auth-login/components/password-reset.tsx  |  6 +-
 .../components/registration-form.tsx          |  9 ++-
 .../components/registration-page.tsx          |  2 +-
 src/features/auth-token-list/index.tsx        |  8 ++-
 src/features/backups/index.tsx                |  9 ++-
 src/features/birthdays/account.tsx            |  2 +-
 src/features/blocks/index.tsx                 |  3 +-
 .../components/new-folder-form.tsx            |  5 +-
 src/features/bookmark-folders/index.tsx       |  7 ++-
 src/features/bookmarks/index.tsx              |  2 +-
 .../chats/components/chat-composer.tsx        |  7 ++-
 .../chats/components/chat-list-item.tsx       |  6 +-
 src/features/chats/components/chat-list.tsx   |  3 +-
 .../components/chat-message-list-intro.tsx    |  7 ++-
 .../chats/components/chat-message-list.tsx    |  7 ++-
 .../chat-message-reaction-wrapper.tsx         |  2 +-
 .../components/chat-message-reaction.tsx      |  2 +-
 .../chats/components/chat-message.tsx         |  5 +-
 .../chats/components/chat-page/chat-page.tsx  |  2 +-
 .../chat-page/components/blankslate-empty.tsx |  4 +-
 .../components/blankslate-with-chats.tsx      |  4 +-
 .../chat-page/components/chat-page-main.tsx   |  9 ++-
 .../chat-page/components/chat-page-new.tsx    |  5 +-
 .../components/chat-page-settings.tsx         |  8 ++-
 .../components/chat-page-sidebar.tsx          |  5 +-
 .../chat-page/components/welcome.tsx          |  7 ++-
 .../chats/components/chat-pane/blankslate.tsx |  4 +-
 .../chats/components/chat-pane/chat-pane.tsx  |  2 +-
 .../chats/components/chat-pending-upload.tsx  |  2 +-
 .../chats/components/chat-search-input.tsx    |  3 +-
 .../components/chat-search/blankslate.tsx     |  3 +-
 .../components/chat-search/chat-search.tsx    |  4 +-
 .../chat-search/empty-results-blankslate.tsx  |  3 +-
 .../chats/components/chat-search/results.tsx  |  5 +-
 .../chats/components/chat-textarea.tsx        |  3 +-
 .../chats/components/chat-upload-preview.tsx  |  2 +-
 src/features/chats/components/chat-upload.tsx |  2 +-
 .../chat-widget/chat-pane-header.tsx          |  4 +-
 .../components/chat-widget/chat-settings.tsx  |  7 ++-
 .../components/chat-widget/chat-window.tsx    |  7 ++-
 .../headers/chat-search-header.tsx            |  4 +-
 src/features/chats/components/chat.tsx        |  2 +-
 src/features/community-timeline/index.tsx     |  2 +-
 .../components/compose-form-button.tsx        |  2 +-
 .../compose/components/compose-form.tsx       |  4 +-
 .../components/polls/duration-selector.tsx    |  2 +-
 .../compose/components/polls/poll-form.tsx    |  7 ++-
 .../compose/components/privacy-dropdown.tsx   |  2 +-
 .../components/reply-group-indicator.tsx      |  2 +-
 .../compose/components/reply-indicator.tsx    |  2 +-
 .../compose/components/schedule-form.tsx      |  4 +-
 .../compose/components/search-results.tsx     |  5 +-
 .../compose/components/search-zap-split.tsx   |  2 +-
 src/features/compose/components/search.tsx    |  2 +-
 .../compose/components/spoiler-input.tsx      |  4 +-
 .../compose/components/upload-button.tsx      |  2 +-
 .../compose/components/upload-form.tsx        |  2 +-
 .../compose/editor/nodes/emoji-node.tsx       |  2 +-
 src/features/conversations/index.tsx          |  2 +-
 .../components/crypto-address.tsx             |  5 +-
 .../components/crypto-donate-panel.tsx        |  3 +-
 .../components/lightning-address.tsx          |  5 +-
 .../crypto-donate/components/site-wallet.tsx  |  2 +-
 src/features/crypto-donate/index.tsx          |  4 +-
 src/features/delete-account/index.tsx         |  9 ++-
 src/features/developers/apps/create.tsx       | 10 +++-
 .../developers/developers-challenge.tsx       |  8 ++-
 src/features/developers/developers-menu.tsx   |  3 +-
 .../developers/service-worker-info.tsx        |  8 ++-
 src/features/developers/settings-store.tsx    | 17 +++---
 src/features/direct-timeline/index.tsx        |  2 +-
 .../directory/components/account-card.tsx     |  3 +-
 src/features/directory/index.tsx              |  5 +-
 src/features/domain-blocks/index.tsx          |  3 +-
 src/features/edit-email/index.tsx             |  7 ++-
 src/features/edit-identity/index.tsx          | 11 +++-
 src/features/edit-password/index.tsx          |  7 ++-
 .../edit-profile/components/avatar-picker.tsx |  4 +-
 .../edit-profile/components/header-picker.tsx |  5 +-
 src/features/edit-profile/index.tsx           | 22 ++++---
 src/features/email-confirmation/index.tsx     |  2 +-
 src/features/embedded-status/index.tsx        |  2 +-
 .../emoji-picker-dropdown-container.tsx       |  2 +-
 .../event/components/event-action-button.tsx  |  2 +-
 src/features/event/components/event-date.tsx  |  2 +-
 .../event/components/event-header.tsx         |  7 ++-
 src/features/event/event-discussion.tsx       |  2 +-
 src/features/event/event-information.tsx      |  5 +-
 .../events/components/event-carousel.tsx      |  3 +-
 src/features/events/index.tsx                 |  5 +-
 .../export-data/components/csv-exporter.tsx   |  5 +-
 src/features/export-data/index.tsx            |  2 +-
 .../components/external-login-form.tsx        |  7 ++-
 src/features/favourited-statuses/index.tsx    |  2 +-
 .../components/instance-restrictions.tsx      |  4 +-
 .../federation-restrictions/index.tsx         |  3 +-
 .../feed-suggestions/feed-suggestions.tsx     |  5 +-
 src/features/filters/edit-filter.tsx          | 12 +++-
 src/features/filters/index.tsx                |  6 +-
 src/features/follow-recommendations/index.tsx |  4 +-
 src/features/follow-requests/index.tsx        |  3 +-
 src/features/followed-tags/index.tsx          |  2 +-
 src/features/followers/index.tsx              |  3 +-
 src/features/following/index.tsx              |  3 +-
 src/features/forms/index.tsx                  |  2 +-
 .../group/components/group-action-button.tsx  |  2 +-
 .../group/components/group-header-image.tsx   |  2 +-
 .../group/components/group-header.tsx         |  5 +-
 .../group/components/group-member-count.tsx   |  2 +-
 .../components/group-member-list-item.tsx     |  2 +-
 .../group/components/group-options-button.tsx |  2 +-
 .../group/components/group-privacy.tsx        |  6 +-
 .../group/components/group-relationship.tsx   |  4 +-
 .../group/components/group-tag-list-item.tsx  |  7 ++-
 .../group/components/group-tags-field.tsx     |  3 +-
 src/features/group/edit-group.tsx             | 10 +++-
 src/features/group/group-blocked-members.tsx  |  5 +-
 src/features/group/group-gallery.tsx          |  3 +-
 .../group/group-membership-requests.tsx       |  4 +-
 src/features/group/group-tag-timeline.tsx     |  5 +-
 src/features/group/group-tags.tsx             |  4 +-
 src/features/group/group-timeline.tsx         |  7 ++-
 src/features/group/manage-group.tsx           |  5 +-
 .../components/discover/group-grid-item.tsx   |  4 +-
 .../components/discover/group-list-item.tsx   |  5 +-
 .../components/discover/layout-buttons.tsx    |  3 +-
 .../components/discover/popular-groups.tsx    |  5 +-
 .../components/discover/popular-tags.tsx      |  4 +-
 .../components/discover/search/blankslate.tsx |  3 +-
 .../discover/search/recent-searches.tsx       |  5 +-
 .../components/discover/search/results.tsx    |  4 +-
 .../components/discover/search/search.tsx     |  2 +-
 .../components/discover/suggested-groups.tsx  |  5 +-
 .../components/discover/tag-list-item.tsx     |  3 +-
 .../groups/components/group-link-preview.tsx  |  5 +-
 .../groups/components/pending-groups-row.tsx  |  2 +-
 src/features/groups/components/tab-bar.tsx    |  2 +-
 src/features/groups/discover.tsx              |  6 +-
 src/features/groups/index.tsx                 |  5 +-
 src/features/groups/pending-requests.tsx      |  4 +-
 src/features/groups/popular.tsx               |  2 +-
 src/features/groups/suggested.tsx             |  2 +-
 src/features/groups/tag.tsx                   |  4 +-
 src/features/groups/tags.tsx                  |  3 +-
 src/features/hashtag-timeline/index.tsx       |  3 +-
 src/features/home-timeline/index.tsx          |  4 +-
 .../import-data/components/csv-importer.tsx   |  7 ++-
 src/features/import-data/index.tsx            |  2 +-
 .../components/site-banner.tsx                |  2 +-
 src/features/landing-timeline/index.tsx       |  2 +-
 src/features/list-adder/index.tsx             |  3 +-
 .../list-editor/components/account.tsx        |  2 +-
 .../list-editor/components/edit-list-form.tsx |  5 +-
 .../list-editor/components/search.tsx         |  5 +-
 src/features/list-editor/index.tsx            |  3 +-
 src/features/list-timeline/index.tsx          |  4 +-
 .../lists/components/new-list-form.tsx        |  5 +-
 src/features/lists/index.tsx                  |  4 +-
 src/features/migration/index.tsx              |  8 ++-
 .../mutes/components/group-list-item.tsx      |  4 +-
 src/features/mutes/index.tsx                  |  4 +-
 .../nostr-relays/components/relay-editor.tsx  |  4 +-
 src/features/nostr-relays/index.tsx           |  6 +-
 src/features/nostr/nostr-bunker-login.tsx     |  5 +-
 .../notifications/components/filter-bar.tsx   |  2 +-
 .../notifications/components/notification.tsx |  6 +-
 .../components/setting-toggle.tsx             |  2 +-
 src/features/notifications/index.tsx          |  3 +-
 src/features/pinned-statuses/index.tsx        |  2 +-
 .../components/placeholder-account.tsx        |  2 +-
 .../components/placeholder-avatar.tsx         |  2 +-
 .../components/placeholder-chat-message.tsx   |  4 +-
 .../components/placeholder-chat.tsx           |  3 +-
 .../components/placeholder-event-header.tsx   |  2 +-
 .../components/placeholder-event-preview.tsx  |  3 +-
 .../components/placeholder-group-card.tsx     |  4 +-
 .../components/placeholder-group-discover.tsx |  4 +-
 .../components/placeholder-group-search.tsx   |  4 +-
 .../components/placeholder-notification.tsx   |  2 +-
 .../placeholder-sidebar-suggestions.tsx       |  3 +-
 .../components/placeholder-sidebar-trends.tsx |  2 +-
 .../components/placeholder-status.tsx         |  2 +-
 src/features/preferences/index.tsx            |  2 +-
 src/features/public-timeline/index.tsx        |  3 +-
 src/features/quotes/index.tsx                 |  2 +-
 .../components/pinned-hosts-picker.tsx        |  3 +-
 src/features/remote-timeline/index.tsx        |  4 +-
 src/features/reply-mentions/account.tsx       |  2 +-
 .../report/components/status-check-box.tsx    |  2 +-
 .../scheduled-status-action-bar.tsx           |  3 +-
 .../components/scheduled-status.tsx           |  3 +-
 src/features/scheduled-statuses/index.tsx     |  2 +-
 src/features/search/index.tsx                 |  2 +-
 src/features/security/mfa-form.tsx            |  3 +-
 .../security/mfa/disable-otp-form.tsx         |  8 ++-
 src/features/security/mfa/enable-otp-form.tsx |  6 +-
 .../security/mfa/otp-confirm-form.tsx         |  8 ++-
 src/features/server-info/index.tsx            |  5 +-
 .../settings/components/messages-settings.tsx |  2 +-
 src/features/settings/index.tsx               |  6 +-
 .../components/crypto-address-input.tsx       |  3 +-
 .../components/footer-link-input.tsx          |  3 +-
 .../components/icon-picker-menu.tsx           |  2 +-
 .../components/promo-panel-input.tsx          |  3 +-
 src/features/soapbox-config/index.tsx         | 27 ++++-----
 .../status/components/detailed-status.tsx     |  5 +-
 .../components/status-interaction-bar.tsx     |  4 +-
 .../status/components/thread-login-cta.tsx    |  5 +-
 src/features/status/components/thread.tsx     |  2 +-
 src/features/status/index.tsx                 |  3 +-
 src/features/test-timeline/index.tsx          |  2 +-
 .../theme-editor/components/palette.tsx       |  4 +-
 src/features/theme-editor/index.tsx           |  5 +-
 src/features/ui/components/action-button.tsx  |  3 +-
 .../ui/components/column-forbidden.tsx        |  2 +-
 src/features/ui/components/column-loading.tsx |  3 +-
 src/features/ui/components/columns-area.tsx   |  2 +-
 src/features/ui/components/compose-button.tsx |  4 +-
 src/features/ui/components/cta-banner.tsx     |  6 +-
 src/features/ui/components/error-column.tsx   |  5 +-
 .../ui/components/floating-action-button.tsx  |  4 +-
 src/features/ui/components/funding-panel.tsx  |  6 +-
 .../ui/components/group-media-panel.tsx       |  4 +-
 .../ui/components/instance-info-panel.tsx     |  2 +-
 .../components/instance-moderation-panel.tsx  |  2 +-
 src/features/ui/components/link-footer.tsx    |  2 +-
 src/features/ui/components/modal-loading.tsx  |  3 +-
 .../account-moderation-modal.tsx              |  7 ++-
 .../account-moderation-modal/badge-input.tsx  |  2 +-
 .../ui/components/modals/actions-modal.tsx    |  2 +-
 .../ui/components/modals/birthdays-modal.tsx  |  3 +-
 .../ui/components/modals/boost-modal.tsx      |  4 +-
 .../modals/captcha-modal/captcha-modal.tsx    |  6 +-
 .../modals/compare-history-modal.tsx          |  6 +-
 .../ui/components/modals/component-modal.tsx  |  2 +-
 .../compose-event-modal.tsx                   | 14 ++++-
 .../compose-event-modal/upload-button.tsx     |  3 +-
 .../ui/components/modals/compose-modal.tsx    |  5 +-
 .../components/modals/confirmation-modal.tsx  |  5 +-
 .../components/modals/crypto-donate-modal.tsx |  2 +-
 .../ui/components/modals/dislikes-modal.tsx   |  3 +-
 .../modals/edit-announcement-modal.tsx        |  9 ++-
 .../modals/edit-bookmark-folder-modal.tsx     |  6 +-
 .../components/modals/edit-domain-modal.tsx   |  9 ++-
 .../modals/edit-federation-modal.tsx          |  3 +-
 .../ui/components/modals/edit-rule-modal.tsx  |  5 +-
 .../ui/components/modals/embed-modal.tsx      |  5 +-
 .../ui/components/modals/event-map-modal.tsx  |  4 +-
 .../modals/event-participants-modal.tsx       |  3 +-
 .../modals/familiar-followers-modal.tsx       |  3 +-
 .../ui/components/modals/favourites-modal.tsx |  3 +-
 .../ui/components/modals/hotkeys-modal.tsx    |  2 +-
 .../ui/components/modals/join-event-modal.tsx |  4 +-
 .../components/modals/landing-page-modal.tsx  |  5 +-
 .../manage-group-modal/create-group-modal.tsx |  3 +-
 .../steps/confirmation-step.tsx               |  7 ++-
 .../manage-group-modal/steps/details-step.tsx |  5 +-
 .../manage-group-modal/steps/privacy-step.tsx |  5 +-
 .../ui/components/modals/media-modal.tsx      |  5 +-
 .../ui/components/modals/mentions-modal.tsx   |  3 +-
 .../modals/missing-description-modal.tsx      |  2 +-
 .../ui/components/modals/mute-modal.tsx       |  6 +-
 .../steps/extension-step.tsx                  |  7 ++-
 .../nostr-login-modal/steps/key-add-step.tsx  |  8 ++-
 .../nostr-signup-modal/steps/key-step.tsx     |  6 +-
 .../nostr-signup-modal/steps/keygen-step.tsx  |  9 ++-
 .../onboarding-flow-modal.tsx                 |  4 +-
 .../steps/avatar-step.tsx                     |  7 ++-
 .../onboarding-flow-modal/steps/bio-step.tsx  |  6 +-
 .../steps/completed-step.tsx                  |  5 +-
 .../steps/cover-photo-selection-step.tsx      |  7 ++-
 .../steps/display-name-step.tsx               |  6 +-
 .../steps/suggested-accounts-step.tsx         |  4 +-
 .../ui/components/modals/reactions-modal.tsx  |  5 +-
 .../ui/components/modals/reblogs-modal.tsx    |  3 +-
 .../modals/reply-mentions-modal.tsx           |  2 +-
 .../modals/report-modal/report-modal.tsx      |  8 ++-
 .../report-modal/steps/confirmation-step.tsx  |  3 +-
 .../report-modal/steps/other-actions-step.tsx |  7 ++-
 .../modals/report-modal/steps/reason-step.tsx |  5 +-
 .../modals/select-bookmark-folder-modal.tsx   |  7 ++-
 .../components/modals/unauthorized-modal.tsx  |  7 ++-
 .../ui/components/modals/zap-invoice.tsx      |  6 +-
 .../modals/zap-pay-request-modal.tsx          |  2 +-
 .../modals/zap-split/display-name-row.tsx     |  3 +-
 .../modals/zap-split/zap-split-modal.tsx      |  2 +-
 .../components/modals/zap-split/zap-split.tsx |  4 +-
 .../ui/components/modals/zaps-modal.tsx       |  4 +-
 src/features/ui/components/navbar.tsx         |  9 ++-
 .../ui/components/new-account-zap-split.tsx   |  5 +-
 .../components/panels/account-note-panel.tsx  |  5 +-
 .../ui/components/panels/my-groups-panel.tsx  |  2 +-
 .../ui/components/panels/new-event-panel.tsx  |  4 +-
 .../ui/components/panels/new-group-panel.tsx  |  4 +-
 .../ui/components/panels/sign-up-panel.tsx    |  4 +-
 .../panels/suggested-groups-panel.tsx         |  2 +-
 src/features/ui/components/pending-status.tsx |  4 +-
 .../ui/components/pinned-accounts-panel.tsx   |  2 +-
 src/features/ui/components/poll-preview.tsx   |  2 +-
 .../ui/components/profile-dropdown.tsx        |  2 +-
 .../components/profile-familiar-followers.tsx |  3 +-
 src/features/ui/components/profile-field.tsx  |  3 +-
 .../ui/components/profile-fields-panel.tsx    |  3 +-
 .../ui/components/profile-info-panel.tsx      |  5 +-
 .../ui/components/profile-media-panel.tsx     |  4 +-
 src/features/ui/components/profile-stats.tsx  |  3 +-
 src/features/ui/components/promo-panel.tsx    |  4 +-
 .../ui/components/subscription-button.tsx     |  2 +-
 src/features/ui/components/theme-selector.tsx |  3 +-
 src/features/ui/components/timeline.tsx       |  2 +-
 src/features/ui/components/trends-panel.tsx   |  3 +-
 src/features/ui/components/user-panel.tsx     |  5 +-
 .../ui/components/who-to-follow-panel.tsx     |  3 +-
 src/features/ui/index.tsx                     |  2 +-
 src/features/ui/util/react-router-helpers.tsx |  2 +-
 .../zap/components/zap-pay-request-form.tsx   |  6 +-
 .../zap/components/zap-split-account-item.tsx |  2 +-
 src/pages/admin-page.tsx                      |  2 +-
 src/pages/default-page.tsx                    |  3 +-
 src/pages/empty-page.tsx                      |  2 +-
 src/pages/event-page.tsx                      |  4 +-
 src/pages/events-page.tsx                     |  2 +-
 src/pages/group-page.tsx                      |  7 ++-
 src/pages/groups-page.tsx                     |  4 +-
 src/pages/groups-pending-page.tsx             |  2 +-
 src/pages/home-page.tsx                       |  6 +-
 src/pages/landing-page.tsx                    |  3 +-
 src/pages/manage-groups-page.tsx              |  2 +-
 src/pages/profile-page.tsx                    |  4 +-
 src/pages/remote-instance-page.tsx            |  3 +-
 src/pages/search-page.tsx                     |  3 +-
 src/pages/status-page.tsx                     |  3 +-
 src/toast.tsx                                 |  4 +-
 423 files changed, 1290 insertions(+), 528 deletions(-)
 delete mode 100644 src/components/ui/index.ts

diff --git a/src/actions/moderation.tsx b/src/actions/moderation.tsx
index 32d61aa38..077e7a365 100644
--- a/src/actions/moderation.tsx
+++ b/src/actions/moderation.tsx
@@ -8,7 +8,8 @@ import { fetchAccountByUsername } from 'soapbox/actions/accounts.ts';
 import { deactivateUsers, deleteUser, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import OutlineBox from 'soapbox/components/outline-box.tsx';
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { selectAccount } from 'soapbox/selectors/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/components/account.tsx b/src/components/account.tsx
index 11e35dc78..cb7b917f0 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -4,6 +4,13 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
@@ -12,7 +19,6 @@ import { displayFqn } from 'soapbox/utils/state.ts';
 
 import Badge from './badge.tsx';
 import RelativeTimestamp from './relative-timestamp.tsx';
-import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui/index.ts';
 
 import type { StatusApprovalStatus } from 'soapbox/normalizers/status.ts';
 import type { Account as AccountSchema } from 'soapbox/schemas/index.ts';
diff --git a/src/components/announcements/announcement.tsx b/src/components/announcements/announcement.tsx
index add848c7e..7272d1c77 100644
--- a/src/components/announcements/announcement.tsx
+++ b/src/components/announcements/announcement.tsx
@@ -1,6 +1,7 @@
 import { FormattedDate } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useFeatures } from 'soapbox/hooks/index.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
diff --git a/src/components/announcements/announcements-panel.tsx b/src/components/announcements/announcements-panel.tsx
index c72ece84c..65412c1fe 100644
--- a/src/components/announcements/announcements-panel.tsx
+++ b/src/components/announcements/announcements-panel.tsx
@@ -6,7 +6,9 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import { createSelector } from 'reselect';
 
 import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
-import { Card, HStack, Widget } from 'soapbox/components/ui/index.ts';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 import Announcement from './announcement.tsx';
diff --git a/src/components/authorize-reject-buttons.tsx b/src/components/authorize-reject-buttons.tsx
index afdd356c8..79f519521 100644
--- a/src/components/authorize-reject-buttons.tsx
+++ b/src/components/authorize-reject-buttons.tsx
@@ -5,7 +5,9 @@ import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, IconButton, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IAuthorizeRejectButtons {
   onAuthorize(): Promise<unknown> | unknown;
diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index dde401e96..b72d791cc 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -4,7 +4,8 @@ import { PureComponent } from 'react';
 
 import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji.tsx';
 import Icon from 'soapbox/components/icon.tsx';
-import { Input, Portal } from 'soapbox/components/ui/index.ts';
+import Input from 'soapbox/components/ui/input.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
 import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account.tsx';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
diff --git a/src/components/autosuggest-location.tsx b/src/components/autosuggest-location.tsx
index 91315ae85..453ffc99e 100644
--- a/src/components/autosuggest-location.tsx
+++ b/src/components/autosuggest-location.tsx
@@ -3,9 +3,12 @@ import homeIcon from '@tabler/icons/outline/home-2.svg';
 import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import roadIcon from '@tabler/icons/outline/road.svg';
 
-import { useAppSelector } from 'soapbox/hooks/index.ts';
 
-import { HStack, Icon, Stack, Text } from './ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 export const ADDRESS_ICONS: Record<string, string> = {
   house: homeIcon,
diff --git a/src/components/avatar-stack.tsx b/src/components/avatar-stack.tsx
index bd5339654..6fc3d9b66 100644
--- a/src/components/avatar-stack.tsx
+++ b/src/components/avatar-stack.tsx
@@ -1,7 +1,8 @@
 import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 
-import { Avatar, HStack } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index d34b8ffeb..d14ec3896 100644
--- a/src/components/big-card.tsx
+++ b/src/components/big-card.tsx
@@ -1,7 +1,9 @@
 import xIcon from '@tabler/icons/outline/x.svg';
 
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Card, CardBody, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const closeIcon = xIcon;
 
diff --git a/src/components/birthday-panel.tsx b/src/components/birthday-panel.tsx
index a4ece93be..1278ce981 100644
--- a/src/components/birthday-panel.tsx
+++ b/src/components/birthday-panel.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchBirthdayReminders } from 'soapbox/actions/accounts.ts';
-import { Widget } from 'soapbox/components/ui/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/components/copyable-input.tsx b/src/components/copyable-input.tsx
index b1ea4c926..2259504da 100644
--- a/src/components/copyable-input.tsx
+++ b/src/components/copyable-input.tsx
@@ -1,7 +1,9 @@
 import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, HStack, Input } from './ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
 interface ICopyableInput {
   /** Text to be copied. */
diff --git a/src/components/display-name-inline.tsx b/src/components/display-name-inline.tsx
index 67c75480b..d0bf71513 100644
--- a/src/components/display-name-inline.tsx
+++ b/src/components/display-name-inline.tsx
@@ -1,8 +1,10 @@
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 import { getAcct } from '../utils/accounts.ts';
 
-import { HStack, Text } from './ui/index.ts';
+
 import VerificationBadge from './verification-badge.tsx';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx
index 08abed015..a57f66b3e 100644
--- a/src/components/display-name.tsx
+++ b/src/components/display-name.tsx
@@ -1,9 +1,11 @@
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 import { getAcct } from '../utils/accounts.ts';
 
-import { HStack, Text } from './ui/index.ts';
+
 import VerificationBadge from './verification-badge.tsx';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/components/domain.tsx b/src/components/domain.tsx
index bdb4e59a2..220a4f80f 100644
--- a/src/components/domain.tsx
+++ b/src/components/domain.tsx
@@ -2,10 +2,11 @@ import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { unblockDomain } from 'soapbox/actions/domain-blocks.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
-import { HStack, IconButton, Text } from './ui/index.ts';
-
 const messages = defineMessages({
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
   unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
diff --git a/src/components/dropdown-menu/dropdown-menu-item.tsx b/src/components/dropdown-menu/dropdown-menu-item.tsx
index 41d17a885..7090fd82c 100644
--- a/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Counter, Icon } from 'soapbox/components/ui/index.ts';
+import Counter from 'soapbox/components/ui/counter.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
 export interface MenuItem {
   action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 3e9231264..bc4f8e424 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -7,11 +7,11 @@ import { useHistory } from 'react-router-dom';
 
 import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 'soapbox/actions/dropdown-menu.ts';
 import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 
-import { IconButton, Portal } from '../ui/index.ts';
-
 import DropdownMenuItem, { MenuItem } from './dropdown-menu-item.tsx';
 
 import type { Status } from 'soapbox/types/entities.ts';
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index a58407147..e10e194dc 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -3,12 +3,15 @@ import userIcon from '@tabler/icons/outline/user.svg';
 import clsx from 'clsx';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import EventActionButton from 'soapbox/features/event/components/event-action-button.tsx';
 import EventDate from 'soapbox/features/event/components/event-date.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 import Icon from './icon.tsx';
-import { Button, HStack, Stack, Text } from './ui/index.ts';
 import VerificationBadge from './verification-badge.tsx';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
diff --git a/src/components/gdpr-banner.tsx b/src/components/gdpr-banner.tsx
index 06f5a3c6b..5622f7972 100644
--- a/src/components/gdpr-banner.tsx
+++ b/src/components/gdpr-banner.tsx
@@ -2,7 +2,11 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Banner from 'soapbox/components/ui/banner.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const acceptedGdpr = !!localStorage.getItem('soapbox:gdpr');
diff --git a/src/components/group-card.tsx b/src/components/group-card.tsx
index abcb18dac..2b0812a81 100644
--- a/src/components/group-card.tsx
+++ b/src/components/group-card.tsx
@@ -1,10 +1,12 @@
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import GroupHeaderImage from 'soapbox/features/group/components/group-header-image.tsx';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy.tsx';
 import GroupRelationship from 'soapbox/features/group/components/group-relationship.tsx';
 
 import GroupAvatar from './groups/group-avatar.tsx';
-import { HStack, Stack, Text } from './ui/index.ts';
 
 import type { Group as GroupEntity } from 'soapbox/types/entities.ts';
 
diff --git a/src/components/groups/group-avatar.tsx b/src/components/groups/group-avatar.tsx
index acfc92e2b..0f8f399cd 100644
--- a/src/components/groups/group-avatar.tsx
+++ b/src/components/groups/group-avatar.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { Avatar } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
 import type { Group } from 'soapbox/schemas/index.ts';
diff --git a/src/components/groups/popover/group-popover.tsx b/src/components/groups/popover/group-popover.tsx
index 6a2884d80..40cd6b6ac 100644
--- a/src/components/groups/popover/group-popover.tsx
+++ b/src/components/groups/popover/group-popover.tsx
@@ -1,7 +1,12 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, matchPath, useHistory } from 'react-router-dom';
 
-import { Button, Divider, HStack, Popover, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Popover from 'soapbox/components/ui/popover.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
 import GroupPrivacy from 'soapbox/features/group/components/group-privacy.tsx';
 
diff --git a/src/components/hashtag.tsx b/src/components/hashtag.tsx
index d8475baaa..b86aefe8e 100644
--- a/src/components/hashtag.tsx
+++ b/src/components/hashtag.tsx
@@ -2,9 +2,12 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 
-import { shortNumberFormat } from '../utils/numbers.tsx';
 
-import { HStack, Stack, Text } from './ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+
+import { shortNumberFormat } from '../utils/numbers.tsx';
 
 import type { Tag } from 'soapbox/types/entities.ts';
 
diff --git a/src/components/icon-with-counter.tsx b/src/components/icon-with-counter.tsx
index 7ccf29234..072e2166f 100644
--- a/src/components/icon-with-counter.tsx
+++ b/src/components/icon-with-counter.tsx
@@ -1,5 +1,5 @@
 import Icon, { IIcon } from 'soapbox/components/icon.tsx';
-import { Counter } from 'soapbox/components/ui/index.ts';
+import Counter from 'soapbox/components/ui/counter.tsx';
 
 interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
   count: number;
diff --git a/src/components/list.tsx b/src/components/list.tsx
index 3f0567c9e..cdf9dc67f 100644
--- a/src/components/list.tsx
+++ b/src/components/list.tsx
@@ -4,9 +4,12 @@ import clsx from 'clsx';
 import { Children, cloneElement, isValidElement, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
-import { SelectDropdown } from '../features/forms/index.tsx';
 
-import { Icon, HStack, Select } from './ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
+
+import { SelectDropdown } from '../features/forms/index.tsx';
 
 interface IList {
   children: React.ReactNode;
diff --git a/src/components/load-more.tsx b/src/components/load-more.tsx
index 354c445ea..67a393a8a 100644
--- a/src/components/load-more.tsx
+++ b/src/components/load-more.tsx
@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
 
 interface ILoadMore {
   onClick: React.MouseEventHandler;
diff --git a/src/components/loading-screen.tsx b/src/components/loading-screen.tsx
index 248e3bbd3..3a8511b77 100644
--- a/src/components/loading-screen.tsx
+++ b/src/components/loading-screen.tsx
@@ -1,5 +1,5 @@
 import LandingGradient from 'soapbox/components/landing-gradient.tsx';
-import { Spinner } from 'soapbox/components/ui/index.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 /** Fullscreen loading indicator. */
 const LoadingScreen: React.FC = () => {
diff --git a/src/components/mention.tsx b/src/components/mention.tsx
index c6fe5f251..c2be2e5cd 100644
--- a/src/components/mention.tsx
+++ b/src/components/mention.tsx
@@ -1,8 +1,8 @@
 import { Link } from 'react-router-dom';
 
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
-import { Tooltip } from './ui/index.ts';
 
 import type { Mention as MentionEntity } from 'soapbox/schemas/index.ts';
 
diff --git a/src/components/missing-indicator.tsx b/src/components/missing-indicator.tsx
index caeab19d3..42b0b273b 100644
--- a/src/components/missing-indicator.tsx
+++ b/src/components/missing-indicator.tsx
@@ -1,6 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardBody, Stack, Text } from './ui/index.ts';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface MissingIndicatorProps {
   nested?: boolean;
diff --git a/src/components/navlinks.tsx b/src/components/navlinks.tsx
index 560aa9988..f26ade226 100644
--- a/src/components/navlinks.tsx
+++ b/src/components/navlinks.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 interface INavlinks {
diff --git a/src/components/pending-items-row.tsx b/src/components/pending-items-row.tsx
index 5381ddc39..4b0c7b184 100644
--- a/src/components/pending-items-row.tsx
+++ b/src/components/pending-items-row.tsx
@@ -4,7 +4,9 @@ import clsx from 'clsx';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IPendingItemsRow {
   /** Path to navigate the user when clicked. */
diff --git a/src/components/polls/poll-footer.tsx b/src/components/polls/poll-footer.tsx
index c00789099..e0e5d41cb 100644
--- a/src/components/polls/poll-footer.tsx
+++ b/src/components/polls/poll-footer.tsx
@@ -2,7 +2,11 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchPoll, vote } from 'soapbox/actions/polls.ts';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
-import { Button, HStack, Stack, Text, Tooltip } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { Poll as PollEntity } from 'soapbox/types/entities.ts';
diff --git a/src/components/polls/poll-option.tsx b/src/components/polls/poll-option.tsx
index 6064e2ba6..ce99c66e8 100644
--- a/src/components/polls/poll-option.tsx
+++ b/src/components/polls/poll-option.tsx
@@ -4,7 +4,9 @@ import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import type {
   Poll as PollEntity,
diff --git a/src/components/polls/poll.tsx b/src/components/polls/poll.tsx
index 8895b0a16..9bfa30d32 100644
--- a/src/components/polls/poll.tsx
+++ b/src/components/polls/poll.tsx
@@ -3,7 +3,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { vote } from 'soapbox/actions/polls.ts';
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import PollFooter from './poll-footer.tsx';
diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index d579d7cd6..34141b40d 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -7,7 +7,10 @@ import { List as ImmutableList } from 'immutable';
 import { useState, useEffect } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash.tsx';
-import { HStack, Stack, Text, Icon } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
 import { addAutoPlay } from 'soapbox/utils/media.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index 23b6191a2..2c2e05c5a 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -13,13 +13,17 @@ import {
 } from 'soapbox/actions/profile-hover-card.ts';
 import { useAccount, usePatronUser } from 'soapbox/api/hooks/index.ts';
 import Badge from 'soapbox/components/badge.tsx';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
 import { UserPanel } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import { showProfileHoverCard } from './hover-ref-wrapper.tsx';
 import { dateFormatOptions } from './relative-timestamp.tsx';
-import { Card, CardBody, HStack, Icon, Stack, Text } from './ui/index.ts';
 
 import type { Account, PatronUser } from 'soapbox/schemas/index.ts';
 import type { AppDispatch } from 'soapbox/store.ts';
diff --git a/src/components/pull-to-refresh.tsx b/src/components/pull-to-refresh.tsx
index 39642ce39..3d53fe0c7 100644
--- a/src/components/pull-to-refresh.tsx
+++ b/src/components/pull-to-refresh.tsx
@@ -1,6 +1,6 @@
 import PTRComponent from 'react-simple-pull-to-refresh';
 
-import { Spinner } from 'soapbox/components/ui/index.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 interface IPullToRefresh {
   onRefresh?: () => Promise<any>;
diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx
index d761e1da6..9c589087d 100644
--- a/src/components/quoted-status-indicator.tsx
+++ b/src/components/quoted-status-indicator.tsx
@@ -1,7 +1,9 @@
 import quoteIcon from '@tabler/icons/outline/quote.svg';
 import { useCallback } from 'react';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index 654c016c5..4afd496ae 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -5,7 +5,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import StatusMedia from 'soapbox/components/status-media.tsx';
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useSettings } from 'soapbox/hooks/index.ts';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index b74c98d8d..88e6ee9f3 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -3,7 +3,8 @@ import throttle from 'lodash/throttle';
 import { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
 
-import { Icon, Text } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useSettings } from 'soapbox/hooks/index.ts';
 
 interface IScrollTopButton {
diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx
index 254e66c5b..4f5dc6f60 100644
--- a/src/components/scrollable-list.tsx
+++ b/src/components/scrollable-list.tsx
@@ -3,10 +3,11 @@ import { useEffect, useRef, useMemo, useCallback, forwardRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso';
 
+import { Card } from 'soapbox/components/ui/card.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useSettings } from 'soapbox/hooks/index.ts';
 
 import LoadMore from './load-more.tsx';
-import { Card, Spinner } from './ui/index.ts';
 
 /** Custom Viruoso component context. */
 type Context = {
diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
index 559417119..6d5796ee8 100644
--- a/src/components/sentry-feedback-form.tsx
+++ b/src/components/sentry-feedback-form.tsx
@@ -1,7 +1,12 @@
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Textarea, Form, Button, FormGroup, FormActions, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { useOwnAccount } from 'soapbox/hooks/index.ts';
 import { captureSentryFeedback } from 'soapbox/sentry.ts';
 
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index e2648f53a..6643ecd89 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -26,7 +26,12 @@ import { getSettings } from 'soapbox/actions/settings.ts';
 import { closeSidebar } from 'soapbox/actions/sidebar.ts';
 import { useAccount } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
-import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui/index.ts';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import ProfileStats from 'soapbox/features/ui/components/profile-stats.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
diff --git a/src/components/sidebar-navigation-link.tsx b/src/components/sidebar-navigation-link.tsx
index 0b3ec8ded..fdf0592db 100644
--- a/src/components/sidebar-navigation-link.tsx
+++ b/src/components/sidebar-navigation-link.tsx
@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
-import { Icon, Text } from './ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface ISidebarNavigationLink {
   /** Notification count, if any. */
diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx
index 3045c64e7..bb87365d3 100644
--- a/src/components/sidebar-navigation.tsx
+++ b/src/components/sidebar-navigation.tsx
@@ -22,7 +22,7 @@ import userIcon from '@tabler/icons/outline/user.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
 import ComposeButton from 'soapbox/features/ui/components/compose-button.tsx';
 import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance } from 'soapbox/hooks/index.ts';
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 489efe91b..cc35977be 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -3,7 +3,10 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
 
 import { NODE_ENV } from 'soapbox/build-config.ts';
-import { HStack, Text, Stack, Textarea } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { captureSentryException } from 'soapbox/sentry.ts';
 import KVStore from 'soapbox/storage/kv-store.ts';
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 77202324a..7de04b424 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -49,7 +49,7 @@ import { useBlockGroupMember, useGroup, useGroupRelationship, useMuteGroup, useU
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import StatusActionButton from 'soapbox/components/status-action-button.tsx';
 import StatusReactionWrapper from 'soapbox/components/status-reaction-wrapper.tsx';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/components/status-action-button.tsx b/src/components/status-action-button.tsx
index 7a15462ad..b72218b4d 100644
--- a/src/components/status-action-button.tsx
+++ b/src/components/status-action-button.tsx
@@ -1,7 +1,9 @@
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 
-import { Text, Icon, Emoji } from 'soapbox/components/ui/index.ts';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 import type { EmojiReaction } from 'soapbox/schemas/index.ts';
diff --git a/src/components/status-hover-card.tsx b/src/components/status-hover-card.tsx
index 0093cdfdb..d6d04ceba 100644
--- a/src/components/status-hover-card.tsx
+++ b/src/components/status-hover-card.tsx
@@ -8,11 +8,11 @@ import {
   updateStatusHoverCard,
 } from 'soapbox/actions/status-hover-card.ts';
 import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
 import StatusContainer from 'soapbox/containers/status-container.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import { showStatusHoverCard } from './hover-status-wrapper.tsx';
-import { Card, CardBody } from './ui/index.ts';
 
 interface IStatusHoverCard {
   visible?: boolean;
diff --git a/src/components/status-reaction-wrapper.tsx b/src/components/status-reaction-wrapper.tsx
index ab76dd866..134b21cba 100644
--- a/src/components/status-reaction-wrapper.tsx
+++ b/src/components/status-reaction-wrapper.tsx
@@ -2,7 +2,8 @@ import { useState, useEffect, useRef, cloneElement } from 'react';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
-import { EmojiSelector, Portal } from 'soapbox/components/ui/index.ts';
+import EmojiSelector from 'soapbox/components/ui/emoji-selector.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
 import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 import { getReactForStatus } from 'soapbox/utils/emoji-reacts.ts';
diff --git a/src/components/status.tsx b/src/components/status.tsx
index 45d146504..70e38d033 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -11,6 +11,10 @@ import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses.ts';
 import TranslateButton from 'soapbox/components/translate-button.tsx';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
@@ -25,7 +29,6 @@ import StatusReplyMentions from './status-reply-mentions.tsx';
 import SensitiveContentOverlay from './statuses/sensitive-content-overlay.tsx';
 import StatusInfo from './statuses/status-info.tsx';
 import Tombstone from './tombstone.tsx';
-import { Card, Icon, Stack, Text } from './ui/index.ts';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index 4268f513b..b7f103b83 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -9,12 +9,13 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { deleteStatus } from 'soapbox/actions/statuses.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
-import DropdownMenu from '../dropdown-menu/index.ts';
-import { Button, HStack, Text } from '../ui/index.ts';
-
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
diff --git a/src/components/statuses/status-info.tsx b/src/components/statuses/status-info.tsx
index 289112a8d..7f1e18027 100644
--- a/src/components/statuses/status-info.tsx
+++ b/src/components/statuses/status-info.tsx
@@ -1,4 +1,5 @@
-import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IStatusInfo {
   avatarSize: number;
diff --git a/src/components/thumb-navigation-link.tsx b/src/components/thumb-navigation-link.tsx
index 83792f0fd..45729447c 100644
--- a/src/components/thumb-navigation-link.tsx
+++ b/src/components/thumb-navigation-link.tsx
@@ -2,7 +2,8 @@ import clsx from 'clsx';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import IconWithCounter from 'soapbox/components/icon-with-counter.tsx';
-import { Icon, Text } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IThumbNavigationLink {
   count?: number;
diff --git a/src/components/tombstone.tsx b/src/components/tombstone.tsx
index a0094adc0..578eee8a6 100644
--- a/src/components/tombstone.tsx
+++ b/src/components/tombstone.tsx
@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
 
 interface ITombstone {
diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx
index ddb250c5e..452926a8f 100644
--- a/src/components/translate-button.tsx
+++ b/src/components/translate-button.tsx
@@ -2,10 +2,11 @@ import languageIcon from '@tabler/icons/outline/language.svg';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
 
-import { Stack, Button, Text } from './ui/index.ts';
-
 import type { Status } from 'soapbox/types/entities.ts';
 
 interface ITranslateButton {
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
deleted file mode 100644
index 08e26ab8a..000000000
--- a/src/components/ui/index.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-export { default as Accordion } from './accordion.tsx';
-export { default as Avatar } from './avatar.tsx';
-export { default as Banner } from './banner.tsx';
-export { default as Button } from './button.tsx';
-export { default as Carousel } from './carousel.tsx';
-export { Card, CardBody, CardHeader, CardTitle } from './card.tsx';
-export { default as Checkbox } from './checkbox.tsx';
-export { Column, ColumnHeader } from './column.tsx';
-export {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopover,
-  ComboboxList,
-  ComboboxOption,
-  ComboboxOptionText,
-} from './combobox.tsx';
-export { default as Counter } from './counter.tsx';
-export { default as Datepicker } from './datepicker.tsx';
-export { default as Divider } from './divider.tsx';
-export { default as Emoji } from './emoji.tsx';
-export { default as EmojiSelector } from './emoji-selector.tsx';
-export { default as FileInput } from './file-input.tsx';
-export { default as Form } from './form.tsx';
-export { default as FormActions } from './form-actions.tsx';
-export { default as FormGroup } from './form-group.tsx';
-export { default as HStack } from './hstack.tsx';
-export { default as Icon } from './icon.tsx';
-export { default as IconButton } from './icon-button.tsx';
-export { default as Input } from './input.tsx';
-export { default as Layout } from './layout.tsx';
-export {
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  MenuItems,
-  MenuLink,
-  MenuList,
-} from './menu.tsx';
-export { default as Modal } from './modal.tsx';
-export { default as Popover } from './popover.tsx';
-export { default as Portal } from './portal.tsx';
-export { default as ProgressBar } from './progress-bar.tsx';
-export { default as RadioButton } from './radio-button.tsx';
-export { default as Select } from './select.tsx';
-export { default as Slider } from './slider.tsx';
-export { default as Spinner } from './spinner.tsx';
-export { default as Stack } from './stack.tsx';
-export { default as Streamfield } from './streamfield.tsx';
-export { default as Tabs } from './tabs.tsx';
-export { default as TagInput } from './tag-input.tsx';
-export { default as Text } from './text.tsx';
-export { default as Textarea } from './textarea.tsx';
-export { default as Toast } from './toast.tsx';
-export { default as Toggle } from './toggle.tsx';
-export { default as Tooltip } from './tooltip.tsx';
-export { default as Widget } from './widget.tsx';
diff --git a/src/components/upload-progress.tsx b/src/components/upload-progress.tsx
index d6870e8b0..7ea7f9279 100644
--- a/src/components/upload-progress.tsx
+++ b/src/components/upload-progress.tsx
@@ -1,7 +1,11 @@
 import cloudUploadIcon from '@tabler/icons/outline/cloud-upload.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, ProgressBar, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IUploadProgress {
   /** Number between 0 and 100 to represent the percentage complete. */
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index 582f2207f..acf01b312 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -18,7 +18,9 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import AudioPlaceHolder from 'soapbox/assets/images/audio-placeholder.png';
 import VideoPlaceHolder from 'soapbox/assets/images/video-placeholder.png';
 import Blurhash from 'soapbox/components/blurhash.tsx';
-import { HStack, Icon, IconButton } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import Motion from 'soapbox/features/ui/util/optional-motion.tsx';
 import { useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
 import { Attachment } from 'soapbox/types/entities.ts';
diff --git a/src/components/validation-checkmark.tsx b/src/components/validation-checkmark.tsx
index be8cdc087..ec3faa7f3 100644
--- a/src/components/validation-checkmark.tsx
+++ b/src/components/validation-checkmark.tsx
@@ -2,7 +2,9 @@ import checkIcon from '@tabler/icons/outline/check.svg';
 import pointIcon from '@tabler/icons/outline/point.svg';
 import clsx from 'clsx';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IValidationCheckmark {
   isValid: boolean;
diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx
index deb5b1969..54158bdd7 100644
--- a/src/components/verification-badge.tsx
+++ b/src/components/verification-badge.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useIntl, defineMessages } from 'react-intl';
 
 import verifiedIcon from 'soapbox/assets/icons/verified.svg';
-import { Icon } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 42cb428d7..132d1d03f 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
 
 import { fetchAboutPage } from 'soapbox/actions/about.ts';
 import { Navlinks } from 'soapbox/components/navlinks.tsx';
-import { Card } from 'soapbox/components/ui/index.ts';
+import { Card } from 'soapbox/components/ui/card.tsx';
 import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import { languages } from '../preferences/index.tsx';
diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index f4817f887..f9ef1b4a3 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -8,7 +8,8 @@ import { expandAccountMediaTimeline } from 'soapbox/actions/timelines.ts';
 import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
 import LoadMore from 'soapbox/components/load-more.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
-import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { getAccountGallery } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/account-timeline/components/moved-note.tsx b/src/features/account-timeline/components/moved-note.tsx
index 7b6ea3ce7..8d19c4a02 100644
--- a/src/features/account-timeline/components/moved-note.tsx
+++ b/src/features/account-timeline/components/moved-note.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import Account from 'soapbox/components/account.tsx';
 import Icon from 'soapbox/components/icon.tsx';
-import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
diff --git a/src/features/account-timeline/index.tsx b/src/features/account-timeline/index.tsx
index 8b2d5e216..319b5bb95 100644
--- a/src/features/account-timeline/index.tsx
+++ b/src/features/account-timeline/index.tsx
@@ -8,7 +8,9 @@ import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/ac
 import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import StatusList from 'soapbox/components/status-list.tsx';
-import { Card, CardBody, Spinner, Text } from 'soapbox/components/ui/index.ts';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index a9a1df3ef..ebe82c46f 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -37,7 +37,9 @@ import { useFollow } from 'soapbox/api/hooks/index.ts';
 import Badge from 'soapbox/components/badge.tsx';
 import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu/index.ts';
 import StillImage from 'soapbox/components/still-image.tsx';
-import { Avatar, HStack, IconButton } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note.tsx';
 import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx
index a8ed8e535..b31a68a46 100644
--- a/src/features/admin/announcements.tsx
+++ b/src/features/admin/announcements.tsx
@@ -4,7 +4,11 @@ import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { AdminAnnouncement } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/admin/components/admin-tabs.tsx b/src/features/admin/components/admin-tabs.tsx
index b5d2312d9..fb5c2bef4 100644
--- a/src/features/admin/components/admin-tabs.tsx
+++ b/src/features/admin/components/admin-tabs.tsx
@@ -1,7 +1,7 @@
 import { useIntl, defineMessages } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { Tabs } from 'soapbox/components/ui/index.ts';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/admin/components/dashcounter.tsx b/src/features/admin/components/dashcounter.tsx
index a104f62b0..4e0eb2e77 100644
--- a/src/features/admin/components/dashcounter.tsx
+++ b/src/features/admin/components/dashcounter.tsx
@@ -1,7 +1,7 @@
 import { FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 import { isNumber } from 'soapbox/utils/numbers.tsx';
 
 interface IDashCounter {
diff --git a/src/features/admin/components/latest-accounts-panel.tsx b/src/features/admin/components/latest-accounts-panel.tsx
index 5873e72ed..83545373f 100644
--- a/src/features/admin/components/latest-accounts-panel.tsx
+++ b/src/features/admin/components/latest-accounts-panel.tsx
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts.ts';
 import Account from 'soapbox/components/account.tsx';
-import { Widget } from 'soapbox/components/ui/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
 
 const messages = defineMessages({
   title: { id: 'admin.latest_accounts_panel.title', defaultMessage: 'Latest Accounts' },
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index 3db8dcb0e..fb80750f1 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -7,7 +7,8 @@ import { deleteStatusModal } from 'soapbox/actions/moderation.tsx';
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import StatusContent from 'soapbox/components/status-content.tsx';
 import StatusMedia from 'soapbox/components/status-media.tsx';
-import { HStack, Stack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { AdminReport, Status } from 'soapbox/types/entities.ts';
diff --git a/src/features/admin/components/report.tsx b/src/features/admin/components/report.tsx
index 7ce9191eb..5bb8f2cce 100644
--- a/src/features/admin/components/report.tsx
+++ b/src/features/admin/components/report.tsx
@@ -9,7 +9,12 @@ import { closeReports } from 'soapbox/actions/admin.ts';
 import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation.tsx';
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
-import { Accordion, Avatar, Button, Stack, HStack, Text } from 'soapbox/components/ui/index.ts';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { makeGetReport } from 'soapbox/selectors/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/admin/domains.tsx b/src/features/admin/domains.tsx
index 3fabe2e66..5db2a1f96 100644
--- a/src/features/admin/domains.tsx
+++ b/src/features/admin/domains.tsx
@@ -6,7 +6,11 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { useDomains } from 'soapbox/api/hooks/admin/index.ts';
 import { dateFormatOptions } from 'soapbox/components/relative-timestamp.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/admin/index.tsx b/src/features/admin/index.tsx
index ad25d50f5..2e703aa8d 100644
--- a/src/features/admin/index.tsx
+++ b/src/features/admin/index.tsx
@@ -1,7 +1,7 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { Switch, Route } from 'react-router-dom';
 
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useOwnAccount } from 'soapbox/hooks/index.ts';
 
 import AdminTabs from './components/admin-tabs.tsx';
diff --git a/src/features/admin/manage-zap-split.tsx b/src/features/admin/manage-zap-split.tsx
index 61138f248..cb2ce887c 100644
--- a/src/features/admin/manage-zap-split.tsx
+++ b/src/features/admin/manage-zap-split.tsx
@@ -4,7 +4,11 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import Account from 'soapbox/components/account.tsx';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Button, Column, HStack, Input, Stack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit.ts';
 import AddNewAccount from '../ui/components/new-account-zap-split.tsx';
diff --git a/src/features/admin/moderation-log.tsx b/src/features/admin/moderation-log.tsx
index 9acef5117..a4d81f690 100644
--- a/src/features/admin/moderation-log.tsx
+++ b/src/features/admin/moderation-log.tsx
@@ -2,7 +2,9 @@ import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
 import { useModerationLog } from 'soapbox/api/hooks/admin/index.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import type { ModerationLogEntry } from 'soapbox/schemas/index.ts';
 
diff --git a/src/features/admin/nostr-relays.tsx b/src/features/admin/nostr-relays.tsx
index 0642dcde5..3c8a9320e 100644
--- a/src/features/admin/nostr-relays.tsx
+++ b/src/features/admin/nostr-relays.tsx
@@ -2,7 +2,11 @@ import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import RelayEditor, { RelayData } from 'soapbox/features/nostr-relays/components/relay-editor.tsx';
 import { useApi } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/admin/relays.tsx b/src/features/admin/relays.tsx
index 65131f0e3..245d5f0b0 100644
--- a/src/features/admin/relays.tsx
+++ b/src/features/admin/relays.tsx
@@ -2,7 +2,13 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useRelays } from 'soapbox/api/hooks/admin/index.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Button, Column, Form, HStack, Input, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useTextField } from 'soapbox/hooks/forms/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/admin/rules.tsx b/src/features/admin/rules.tsx
index 544b36ffc..150d960d3 100644
--- a/src/features/admin/rules.tsx
+++ b/src/features/admin/rules.tsx
@@ -4,7 +4,11 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useRules } from 'soapbox/api/hooks/admin/index.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { AdminRule } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/admin/tabs/dashboard.tsx b/src/features/admin/tabs/dashboard.tsx
index 1cff57c39..e859acb11 100644
--- a/src/features/admin/tabs/dashboard.tsx
+++ b/src/features/admin/tabs/dashboard.tsx
@@ -5,7 +5,10 @@ import { FormattedMessage } from 'react-intl';
 import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email-list.ts';
 import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { CardTitle, Icon, IconButton, Stack } from 'soapbox/components/ui/index.ts';
+import { CardTitle } from 'soapbox/components/ui/card.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks/index.ts';
 import sourceCode from 'soapbox/utils/code.ts';
 import { download } from 'soapbox/utils/download.ts';
diff --git a/src/features/admin/user-index.tsx b/src/features/admin/user-index.tsx
index 8aec7e07c..19c410bf7 100644
--- a/src/features/admin/user-index.tsx
+++ b/src/features/admin/user-index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts.ts';
 import Account from 'soapbox/components/account.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.users', defaultMessage: 'Users' },
diff --git a/src/features/aliases/components/account.tsx b/src/features/aliases/components/account.tsx
index 024d1ec4c..cd3153efe 100644
--- a/src/features/aliases/components/account.tsx
+++ b/src/features/aliases/components/account.tsx
@@ -5,7 +5,7 @@ import { addToAliases } from 'soapbox/actions/aliases.ts';
 import { useAccount } from 'soapbox/api/hooks/index.ts';
 import AccountComponent from 'soapbox/components/account.tsx';
 import IconButton from 'soapbox/components/icon-button.tsx';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index b8a51cdcb..1d88b1f49 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases.ts';
 import Icon from 'soapbox/components/icon.tsx';
-import { Button } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index f2b322fbe..e078100a1 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -5,7 +5,10 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases.ts';
 import Icon from 'soapbox/components/icon.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui/index.ts';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
 
 import Account from './components/account.tsx';
diff --git a/src/features/auth-login/components/captcha.tsx b/src/features/auth-login/components/captcha.tsx
index 340367eca..db350e39a 100644
--- a/src/features/auth-login/components/captcha.tsx
+++ b/src/features/auth-login/components/captcha.tsx
@@ -3,7 +3,9 @@ import { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { fetchCaptcha } from 'soapbox/actions/auth.ts';
-import { Stack, Text, Input } from 'soapbox/components/ui/index.ts';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { AxiosResponse } from 'axios';
diff --git a/src/features/auth-login/components/consumer-button.tsx b/src/features/auth-login/components/consumer-button.tsx
index dd28ecad8..d16224d0c 100644
--- a/src/features/auth-login/components/consumer-button.tsx
+++ b/src/features/auth-login/components/consumer-button.tsx
@@ -8,7 +8,8 @@ import keyIcon from '@tabler/icons/outline/key.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { prepareRequest } from 'soapbox/actions/consumer-auth.ts';
-import { IconButton, Tooltip } from 'soapbox/components/ui/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { capitalize } from 'soapbox/utils/strings.ts';
 
diff --git a/src/features/auth-login/components/consumers-list.tsx b/src/features/auth-login/components/consumers-list.tsx
index 55a58601f..1869920c2 100644
--- a/src/features/auth-login/components/consumers-list.tsx
+++ b/src/features/auth-login/components/consumers-list.tsx
@@ -1,6 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Card, HStack, Text } from 'soapbox/components/ui/index.ts';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useInstance } from 'soapbox/hooks/index.ts';
 
 import ConsumerButton from './consumer-button.tsx';
diff --git a/src/features/auth-login/components/login-form.tsx b/src/features/auth-login/components/login-form.tsx
index 0fa0652c5..16e2e9761 100644
--- a/src/features/auth-login/components/login-form.tsx
+++ b/src/features/auth-login/components/login-form.tsx
@@ -1,7 +1,11 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useFeatures } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/auth-login/components/logout.tsx b/src/features/auth-login/components/logout.tsx
index e5bb79723..3815f9b96 100644
--- a/src/features/auth-login/components/logout.tsx
+++ b/src/features/auth-login/components/logout.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import { logOut } from 'soapbox/actions/auth.ts';
-import { Spinner } from 'soapbox/components/ui/index.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 /** Component that logs the user out when rendered */
 const Logout: React.FC = () => {
diff --git a/src/features/auth-login/components/otp-auth-form.tsx b/src/features/auth-login/components/otp-auth-form.tsx
index 1d648f2e6..9779dc8a1 100644
--- a/src/features/auth-login/components/otp-auth-form.tsx
+++ b/src/features/auth-login/components/otp-auth-form.tsx
@@ -4,7 +4,11 @@ import { Redirect } from 'react-router-dom';
 
 import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth.ts';
 import { BigCard } from 'soapbox/components/big-card.tsx';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/auth-login/components/password-reset-confirm.tsx b/src/features/auth-login/components/password-reset-confirm.tsx
index c6a733004..ff7ac175c 100644
--- a/src/features/auth-login/components/password-reset-confirm.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.tsx
@@ -4,7 +4,11 @@ import { Redirect } from 'react-router-dom';
 
 import { resetPasswordConfirm } from 'soapbox/actions/security.ts';
 import { BigCard } from 'soapbox/components/big-card.tsx';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const token = new URLSearchParams(window.location.search).get('reset_password_token');
diff --git a/src/features/auth-login/components/password-reset.tsx b/src/features/auth-login/components/password-reset.tsx
index 5b1a1e631..c7790cf6b 100644
--- a/src/features/auth-login/components/password-reset.tsx
+++ b/src/features/auth-login/components/password-reset.tsx
@@ -4,7 +4,11 @@ import { Redirect } from 'react-router-dom';
 
 import { resetPassword } from 'soapbox/actions/security.ts';
 import { BigCard } from 'soapbox/components/big-card.tsx';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/auth-login/components/registration-form.tsx b/src/features/auth-login/components/registration-form.tsx
index 58cc06e94..8ab3d2eb9 100644
--- a/src/features/auth-login/components/registration-form.tsx
+++ b/src/features/auth-login/components/registration-form.tsx
@@ -11,7 +11,14 @@ import { accountLookup } from 'soapbox/actions/accounts.ts';
 import { register, verifyCredentials } from 'soapbox/actions/auth.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import BirthdayInput from 'soapbox/components/birthday-input.tsx';
-import { Checkbox, Form, FormGroup, FormActions, Button, Input, Textarea, Select } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Checkbox from 'soapbox/components/ui/checkbox.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import CaptchaField from 'soapbox/features/auth-login/components/captcha.tsx';
 import { useAppDispatch, useSettings, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/auth-login/components/registration-page.tsx b/src/features/auth-login/components/registration-page.tsx
index e4cfe335f..94e4e0adc 100644
--- a/src/features/auth-login/components/registration-page.tsx
+++ b/src/features/auth-login/components/registration-page.tsx
@@ -3,7 +3,7 @@ import { Redirect } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { BigCard } from 'soapbox/components/big-card.tsx';
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
 
 import RegistrationForm from './registration-form.tsx';
diff --git a/src/features/auth-token-list/index.tsx b/src/features/auth-token-list/index.tsx
index 61bd90267..31974734c 100644
--- a/src/features/auth-token-list/index.tsx
+++ b/src/features/auth-token-list/index.tsx
@@ -4,7 +4,13 @@ import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security.ts';
-import { Button, Card, CardBody, CardHeader, CardTitle, Column, HStack, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { Token } from 'soapbox/reducers/security.ts';
 
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index 1d8c8f3d4..f1f80589f 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -2,7 +2,14 @@ import { useEffect, useState } from 'react';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 
 import { fetchBackups, createBackup } from 'soapbox/actions/backups.ts';
-import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import type { Backup as BackupEntity } from 'soapbox/reducers/backups.ts';
diff --git a/src/features/birthdays/account.tsx b/src/features/birthdays/account.tsx
index d19fc09d9..414609617 100644
--- a/src/features/birthdays/account.tsx
+++ b/src/features/birthdays/account.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useAccount } from 'soapbox/api/hooks/index.ts';
 import AccountComponent from 'soapbox/components/account.tsx';
 import Icon from 'soapbox/components/icon.tsx';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
 const messages = defineMessages({
   birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
diff --git a/src/features/blocks/index.tsx b/src/features/blocks/index.tsx
index 9cc136d48..20af33a65 100644
--- a/src/features/blocks/index.tsx
+++ b/src/features/blocks/index.tsx
@@ -3,7 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useBlocks } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.blocks', defaultMessage: 'Blocks' },
diff --git a/src/features/bookmark-folders/components/new-folder-form.tsx b/src/features/bookmark-folders/components/new-folder-form.tsx
index ffddfe089..4f57383db 100644
--- a/src/features/bookmark-folders/components/new-folder-form.tsx
+++ b/src/features/bookmark-folders/components/new-folder-form.tsx
@@ -1,7 +1,10 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useCreateBookmarkFolder } from 'soapbox/api/hooks/index.ts';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useTextField } from 'soapbox/hooks/forms/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index 82fa34186..132f6be85 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -5,7 +5,12 @@ import { Redirect } from 'react-router-dom';
 
 import { useBookmarkFolders } from 'soapbox/api/hooks/index.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Column, Emoji, HStack, Icon, Spinner, Stack } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useFeatures } from 'soapbox/hooks/index.ts';
 
 import NewFolderForm from './components/new-folder-form.tsx';
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index 3fcf5b76b..17fac5245 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -13,7 +13,7 @@ import { useBookmarkFolder, useDeleteBookmarkFolder } from 'soapbox/api/hooks/in
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import StatusList from 'soapbox/components/status-list.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/chats/components/chat-composer.tsx b/src/features/chats/components/chat-composer.tsx
index 512a2f581..a940f0879 100644
--- a/src/features/chats/components/chat-composer.tsx
+++ b/src/features/chats/components/chat-composer.tsx
@@ -4,7 +4,12 @@ import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
 import { unblockAccount } from 'soapbox/actions/accounts.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
-import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover } from 'soapbox/components/ui/combobox.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import UploadButton from 'soapbox/features/compose/components/upload-button.tsx';
 import emojiSearch from 'soapbox/features/emoji/search.ts';
diff --git a/src/features/chats/components/chat-list-item.tsx b/src/features/chats/components/chat-list-item.tsx
index ae2c5299f..60fb5eae8 100644
--- a/src/features/chats/components/chat-list-item.tsx
+++ b/src/features/chats/components/chat-list-item.tsx
@@ -7,7 +7,11 @@ import { useHistory } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals.ts';
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
-import { Avatar, HStack, IconButton, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
diff --git a/src/features/chats/components/chat-list.tsx b/src/features/chats/components/chat-list.tsx
index de7992311..c9388e740 100644
--- a/src/features/chats/components/chat-list.tsx
+++ b/src/features/chats/components/chat-list.tsx
@@ -4,7 +4,8 @@ import { Virtuoso } from 'react-virtuoso';
 
 import { fetchChats } from 'soapbox/actions/chats.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
-import { Spinner, Stack } from 'soapbox/components/ui/index.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { useChats } from 'soapbox/queries/chats.ts';
diff --git a/src/features/chats/components/chat-message-list-intro.tsx b/src/features/chats/components/chat-message-list-intro.tsx
index ee70410e2..69a4d970d 100644
--- a/src/features/chats/components/chat-message-list-intro.tsx
+++ b/src/features/chats/components/chat-message-list-intro.tsx
@@ -5,7 +5,12 @@ import { useHistory } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import Link from 'soapbox/components/link.tsx';
-import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
 import { useChatActions } from 'soapbox/queries/chats.ts';
diff --git a/src/features/chats/components/chat-message-list.tsx b/src/features/chats/components/chat-message-list.tsx
index 2d49cb86b..0c3463eb9 100644
--- a/src/features/chats/components/chat-message-list.tsx
+++ b/src/features/chats/components/chat-message-list.tsx
@@ -2,7 +2,12 @@ import { useState, useEffect, useRef, useCallback, useMemo, forwardRef } from 'r
 import { useIntl, defineMessages } from 'react-intl';
 import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
-import { Avatar, Button, Divider, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message.tsx';
 import { useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { IChat, useChatActions, useChatMessages } from 'soapbox/queries/chats.ts';
diff --git a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
index eb8bb267d..8b6348aaf 100644
--- a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
+++ b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, cloneElement } from 'react';
 
 import EmojiSelector from 'soapbox/components/ui/emoji-selector.tsx';
-import { Portal } from 'soapbox/components/ui/index.ts';
+import Portal from 'soapbox/components/ui/portal.tsx';
 
 interface IChatMessageReactionWrapper {
   onOpen(isOpen: boolean): void;
diff --git a/src/features/chats/components/chat-message-reaction.tsx b/src/features/chats/components/chat-message-reaction.tsx
index 813da27f8..de54e82a1 100644
--- a/src/features/chats/components/chat-message-reaction.tsx
+++ b/src/features/chats/components/chat-message-reaction.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 import emojify from 'soapbox/features/emoji/index.ts';
 import { EmojiReaction } from 'soapbox/types/entities.ts';
 
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index 52abcba05..4b9b8b5e1 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -15,7 +15,10 @@ import { defineMessages, useIntl } from 'react-intl';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import emojify from 'soapbox/features/emoji/index.ts';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx
index 59187b9c9..fa744ba17 100644
--- a/src/features/chats/components/chat-page/chat-page.tsx
+++ b/src/features/chats/components/chat-page/chat-page.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useOwnAccount } from 'soapbox/hooks/index.ts';
 
 import ChatPageMain from './components/chat-page-main.tsx';
diff --git a/src/features/chats/components/chat-page/components/blankslate-empty.tsx b/src/features/chats/components/chat-page/components/blankslate-empty.tsx
index 7bc5ad0eb..3d3fa2443 100644
--- a/src/features/chats/components/chat-page/components/blankslate-empty.tsx
+++ b/src/features/chats/components/chat-page/components/blankslate-empty.tsx
@@ -1,7 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IBlankslate {
 }
diff --git a/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx b/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
index 612ddfeb1..9e01ba6f8 100644
--- a/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
+++ b/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
@@ -1,7 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 /** To display on the chats main page when no message is selected, but chats are present. */
 const BlankslateWithChats = () => {
diff --git a/src/features/chats/components/chat-page/components/chat-page-main.tsx b/src/features/chats/components/chat-page/components/chat-page-main.tsx
index f7dd50a74..f9b3abc57 100644
--- a/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -9,7 +9,14 @@ import { Link, useHistory, useParams } from 'react-router-dom';
 import { blockAccount, unblockAccount } from 'soapbox/actions/accounts.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Tooltip } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { Menu, MenuButton, MenuItem, MenuList } from 'soapbox/components/ui/menu.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
diff --git a/src/features/chats/components/chat-page/components/chat-page-new.tsx b/src/features/chats/components/chat-page/components/chat-page-new.tsx
index 866d23e0c..5ae1efc0c 100644
--- a/src/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -2,7 +2,10 @@ import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui/index.ts';
+import { CardTitle } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 import ChatSearch from '../../chat-search/chat-search.tsx';
 
diff --git a/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index ee9a8709e..fb883fe6f 100644
--- a/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -5,7 +5,13 @@ import { useHistory } from 'react-router-dom';
 
 import { changeSetting } from 'soapbox/actions/settings.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Button, CardBody, CardTitle, Form, HStack, IconButton, Stack, Toggle } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardBody, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
 import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
 import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
diff --git a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index d3ba38a59..82279ee85 100644
--- a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -4,7 +4,10 @@ import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui/index.ts';
+import { CardTitle } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
 import { IChat } from 'soapbox/queries/chats.ts';
 
diff --git a/src/features/chats/components/chat-page/components/welcome.tsx b/src/features/chats/components/chat-page/components/welcome.tsx
index 719563123..6b0c3c4f0 100644
--- a/src/features/chats/components/chat-page/components/welcome.tsx
+++ b/src/features/chats/components/chat-page/components/welcome.tsx
@@ -2,7 +2,12 @@ import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Button, CardBody, CardTitle, Form, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardBody, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useOwnAccount } from 'soapbox/hooks/index.ts';
 import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
diff --git a/src/features/chats/components/chat-pane/blankslate.tsx b/src/features/chats/components/chat-pane/blankslate.tsx
index d652106f8..2e6b37c37 100644
--- a/src/features/chats/components/chat-pane/blankslate.tsx
+++ b/src/features/chats/components/chat-pane/blankslate.tsx
@@ -1,6 +1,8 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat_pane.blankslate.title', defaultMessage: 'No messages yet' },
diff --git a/src/features/chats/components/chat-pane/chat-pane.tsx b/src/features/chats/components/chat-pane/chat-pane.tsx
index abeac1bd6..54e246003 100644
--- a/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -2,7 +2,7 @@ import editIcon from '@tabler/icons/outline/edit.svg';
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
 import { useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
diff --git a/src/features/chats/components/chat-pending-upload.tsx b/src/features/chats/components/chat-pending-upload.tsx
index 0455b71f0..a756ee911 100644
--- a/src/features/chats/components/chat-pending-upload.tsx
+++ b/src/features/chats/components/chat-pending-upload.tsx
@@ -1,4 +1,4 @@
-import { ProgressBar } from 'soapbox/components/ui/index.ts';
+import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
 
 interface IChatPendingUpload {
   progress: number;
diff --git a/src/features/chats/components/chat-search-input.tsx b/src/features/chats/components/chat-search-input.tsx
index 66bb0cc63..1a4f41fb3 100644
--- a/src/features/chats/components/chat-search-input.tsx
+++ b/src/features/chats/components/chat-search-input.tsx
@@ -2,7 +2,8 @@ import searchIcon from '@tabler/icons/outline/search.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Input } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
 const messages = defineMessages({
   searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
diff --git a/src/features/chats/components/chat-search/blankslate.tsx b/src/features/chats/components/chat-search/blankslate.tsx
index 7eadcbec2..1dec4879e 100644
--- a/src/features/chats/components/chat-search/blankslate.tsx
+++ b/src/features/chats/components/chat-search/blankslate.tsx
@@ -1,6 +1,7 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat_search.blankslate.title', defaultMessage: 'Start a chat' },
diff --git a/src/features/chats/components/chat-search/chat-search.tsx b/src/features/chats/components/chat-search/chat-search.tsx
index 8f6fd74f7..d3faefdc9 100644
--- a/src/features/chats/components/chat-search/chat-search.tsx
+++ b/src/features/chats/components/chat-search/chat-search.tsx
@@ -6,7 +6,9 @@ import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Icon, Input, Stack } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { useDebounce } from 'soapbox/hooks/index.ts';
 import { useChats, ChatKeys } from 'soapbox/queries/chats.ts';
diff --git a/src/features/chats/components/chat-search/empty-results-blankslate.tsx b/src/features/chats/components/chat-search/empty-results-blankslate.tsx
index 47eb47554..1c43e6fa7 100644
--- a/src/features/chats/components/chat-search/empty-results-blankslate.tsx
+++ b/src/features/chats/components/chat-search/empty-results-blankslate.tsx
@@ -1,6 +1,7 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No matches found' },
diff --git a/src/features/chats/components/chat-search/results.tsx b/src/features/chats/components/chat-search/results.tsx
index dc1eff922..6474b74fb 100644
--- a/src/features/chats/components/chat-search/results.tsx
+++ b/src/features/chats/components/chat-search/results.tsx
@@ -2,7 +2,10 @@ import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import useAccountSearch from 'soapbox/queries/search.ts';
 
diff --git a/src/features/chats/components/chat-textarea.tsx b/src/features/chats/components/chat-textarea.tsx
index f71bcfb67..87906eeca 100644
--- a/src/features/chats/components/chat-textarea.tsx
+++ b/src/features/chats/components/chat-textarea.tsx
@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 
-import { HStack, Textarea } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { Attachment } from 'soapbox/types/entities.ts';
 
 import ChatPendingUpload from './chat-pending-upload.tsx';
diff --git a/src/features/chats/components/chat-upload-preview.tsx b/src/features/chats/components/chat-upload-preview.tsx
index 9f2e89640..ca7d7d28e 100644
--- a/src/features/chats/components/chat-upload-preview.tsx
+++ b/src/features/chats/components/chat-upload-preview.tsx
@@ -1,6 +1,6 @@
 import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
 
-import { Icon } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import { MIMETYPE_ICONS } from 'soapbox/components/upload.tsx';
 
 import type { Attachment } from 'soapbox/types/entities.ts';
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index 3e2ac0617..da67e2074 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -4,7 +4,7 @@ import { List as ImmutableList } from 'immutable';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import Blurhash from 'soapbox/components/blurhash.tsx';
-import { Icon } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import ChatUploadPreview from './chat-upload-preview.tsx';
diff --git a/src/features/chats/components/chat-widget/chat-pane-header.tsx b/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 7d6ed760a..ea354a451 100644
--- a/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -2,7 +2,9 @@ import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
 import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
 import { HTMLAttributes } from 'react';
 
-import { HStack, IconButton, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IChatPaneHeader {
   isOpen: boolean;
diff --git a/src/features/chats/components/chat-widget/chat-settings.tsx b/src/features/chats/components/chat-widget/chat-settings.tsx
index fbc663381..ba96c53cc 100644
--- a/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -6,7 +6,12 @@ import { defineMessages, useIntl } from 'react-intl';
 import { blockAccount, unblockAccount } from 'soapbox/actions/accounts.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Avatar, HStack, Icon, Select, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 import { messageExpirationOptions, MessageExpirationValues, useChatActions } from 'soapbox/queries/chats.ts';
diff --git a/src/features/chats/components/chat-widget/chat-window.tsx b/src/features/chats/components/chat-widget/chat-window.tsx
index f777e7328..90c9e5982 100644
--- a/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/src/features/chats/components/chat-widget/chat-window.tsx
@@ -5,7 +5,12 @@ import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Avatar, HStack, Icon, Stack, Text, Tooltip } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { secondsToDays } from 'soapbox/utils/numbers.tsx';
diff --git a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index 8d4ac0cd2..1649566f5 100644
--- a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -1,7 +1,9 @@
 import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 
 import ChatPaneHeader from '../chat-pane-header.tsx';
diff --git a/src/features/chats/components/chat.tsx b/src/features/chats/components/chat.tsx
index 3eaa508ba..0cf9898f6 100644
--- a/src/features/chats/components/chat.tsx
+++ b/src/features/chats/components/chat.tsx
@@ -4,7 +4,7 @@ import { MutableRefObject, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media.ts';
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
 import { IChat, useChatActions } from 'soapbox/queries/chats.ts';
diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx
index 1ee644298..d01a8276e 100644
--- a/src/features/community-timeline/index.tsx
+++ b/src/features/community-timeline/index.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { expandCommunityTimeline } from 'soapbox/actions/timelines.ts';
 import { useCommunityStream } from 'soapbox/api/hooks/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppSelector, useAppDispatch, useSettings, useTheme, useInstance } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
diff --git a/src/features/compose/components/compose-form-button.tsx b/src/features/compose/components/compose-form-button.tsx
index 56aaef8d4..00403965d 100644
--- a/src/features/compose/components/compose-form-button.tsx
+++ b/src/features/compose/components/compose-form-button.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-import { IconButton } from 'soapbox/components/ui/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 
 interface IComposeFormButton {
   icon: string;
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 61fef02ec..1b369404d 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -16,7 +16,9 @@ import {
   uploadCompose,
 } from 'soapbox/actions/compose.ts';
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
-import { Button, HStack, Stack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
 import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks/index.ts';
diff --git a/src/features/compose/components/polls/duration-selector.tsx b/src/features/compose/components/polls/duration-selector.tsx
index 03f8ccf14..4702b5812 100644
--- a/src/features/compose/components/polls/duration-selector.tsx
+++ b/src/features/compose/components/polls/duration-selector.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Select } from 'soapbox/components/ui/index.ts';
+import Select from 'soapbox/components/ui/select.tsx';
 
 const messages = defineMessages({
   minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
diff --git a/src/features/compose/components/polls/poll-form.tsx b/src/features/compose/components/polls/poll-form.tsx
index fa65b708a..bd7e2888b 100644
--- a/src/features/compose/components/polls/poll-form.tsx
+++ b/src/features/compose/components/polls/poll-form.tsx
@@ -2,7 +2,12 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { addPollOption, changePollOption, changePollSettings, clearComposeSuggestions, fetchComposeSuggestions, removePoll, removePollOption, selectComposeSuggestion } from 'soapbox/actions/compose.ts';
 import AutosuggestInput from 'soapbox/components/autosuggest-input.tsx';
-import { Button, Divider, HStack, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks/index.ts';
 
 import DurationSelector from './duration-selector.tsx';
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index fe55abd77..cb4a4ba8d 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -13,7 +13,7 @@ import Overlay from 'react-overlays/lib/Overlay';
 import { changeComposeVisibility } from 'soapbox/actions/compose.ts';
 import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import Icon from 'soapbox/components/icon.tsx';
-import { IconButton } from 'soapbox/components/ui/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 
diff --git a/src/features/compose/components/reply-group-indicator.tsx b/src/features/compose/components/reply-group-indicator.tsx
index d4d17495f..0dec91155 100644
--- a/src/features/compose/components/reply-group-indicator.tsx
+++ b/src/features/compose/components/reply-group-indicator.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Link from 'soapbox/components/link.tsx';
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { Group } from 'soapbox/schemas/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index 28ba10f18..2b7bb5a15 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
 import Markup from 'soapbox/components/markup.tsx';
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index d34fc4bc3..a3ce3d23a 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -4,7 +4,9 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { setSchedule, removeSchedule } from 'soapbox/actions/compose.ts';
 import IconButton from 'soapbox/components/icon-button.tsx';
 import { Datetime } from 'soapbox/components/ui/datetime.tsx';
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index 5b32fd317..e2611aa4b 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -9,7 +9,10 @@ import { useAccount } from 'soapbox/api/hooks/index.ts';
 import Hashtag from 'soapbox/components/hashtag.tsx';
 import IconButton from 'soapbox/components/icon-button.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { HStack, Spinner, Tabs, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import StatusContainer from 'soapbox/containers/status-container.tsx';
 import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account.tsx';
diff --git a/src/features/compose/components/search-zap-split.tsx b/src/features/compose/components/search-zap-split.tsx
index f8c27392a..8b66eaa64 100644
--- a/src/features/compose/components/search-zap-split.tsx
+++ b/src/features/compose/components/search-zap-split.tsx
@@ -13,7 +13,7 @@ import {
   submitSearch,
 } from 'soapbox/actions/search.ts';
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
-import { Input } from 'soapbox/components/ui/index.ts';
+import Input from 'soapbox/components/ui/input.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index adc6e3033..3d43c1560 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -15,7 +15,7 @@ import {
   submitSearch,
 } from 'soapbox/actions/search.ts';
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
-import { Input } from 'soapbox/components/ui/index.ts';
+import Input from 'soapbox/components/ui/input.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
diff --git a/src/features/compose/components/spoiler-input.tsx b/src/features/compose/components/spoiler-input.tsx
index cbcccafdf..b52fd953a 100644
--- a/src/features/compose/components/spoiler-input.tsx
+++ b/src/features/compose/components/spoiler-input.tsx
@@ -4,7 +4,9 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { changeComposeSpoilerness, changeComposeSpoilerText } from 'soapbox/actions/compose.ts';
 import AutosuggestInput, { IAutosuggestInput } from 'soapbox/components/autosuggest-input.tsx';
-import { Divider, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/compose/components/upload-button.tsx b/src/features/compose/components/upload-button.tsx
index c38a3f147..04ae2452a 100644
--- a/src/features/compose/components/upload-button.tsx
+++ b/src/features/compose/components/upload-button.tsx
@@ -3,7 +3,7 @@ import photoIcon from '@tabler/icons/outline/photo.svg';
 import { useRef } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
-import { IconButton } from 'soapbox/components/ui/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { useInstance } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/compose/components/upload-form.tsx b/src/features/compose/components/upload-form.tsx
index fc8b1bd74..d4ceb0e83 100644
--- a/src/features/compose/components/upload-form.tsx
+++ b/src/features/compose/components/upload-form.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useCallback, useRef } from 'react';
 
 import { changeMediaOrder } from 'soapbox/actions/compose.ts';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
 import UploadProgress from './upload-progress.tsx';
diff --git a/src/features/compose/editor/nodes/emoji-node.tsx b/src/features/compose/editor/nodes/emoji-node.tsx
index 87451423d..4c7155d00 100644
--- a/src/features/compose/editor/nodes/emoji-node.tsx
+++ b/src/features/compose/editor/nodes/emoji-node.tsx
@@ -1,6 +1,6 @@
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
 
-import { Emoji as Component } from 'soapbox/components/ui/index.ts';
+import Component from 'soapbox/components/ui/emoji.tsx';
 import { isNativeEmoji, type Emoji } from 'soapbox/features/emoji/index.ts';
 
 import type {
diff --git a/src/features/conversations/index.tsx b/src/features/conversations/index.tsx
index c575e1545..2c6ef1547 100644
--- a/src/features/conversations/index.tsx
+++ b/src/features/conversations/index.tsx
@@ -5,7 +5,7 @@ import { directComposeById } from 'soapbox/actions/compose.ts';
 import { mountConversations, unmountConversations, expandConversations } from 'soapbox/actions/conversations.ts';
 import { useDirectStream } from 'soapbox/api/hooks/index.ts';
 import AccountSearch from 'soapbox/components/account-search.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import ConversationsList from './components/conversations-list.tsx';
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 5aacaf979..30bbb1809 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -3,7 +3,10 @@ import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import CopyableInput from 'soapbox/components/copyable-input.tsx';
-import { Text, Icon, Stack, HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import { getExplorerUrl } from '../utils/block-explorer.ts';
diff --git a/src/features/crypto-donate/components/crypto-donate-panel.tsx b/src/features/crypto-donate/components/crypto-donate-panel.tsx
index fd49eab97..53983cc78 100644
--- a/src/features/crypto-donate/components/crypto-donate-panel.tsx
+++ b/src/features/crypto-donate/components/crypto-donate-panel.tsx
@@ -1,7 +1,8 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Text, Widget } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 import SiteWallet from './site-wallet.tsx';
diff --git a/src/features/crypto-donate/components/lightning-address.tsx b/src/features/crypto-donate/components/lightning-address.tsx
index 5fcad5c26..f0223bd61 100644
--- a/src/features/crypto-donate/components/lightning-address.tsx
+++ b/src/features/crypto-donate/components/lightning-address.tsx
@@ -1,7 +1,10 @@
 import { FormattedMessage } from 'react-intl';
 
 import CopyableInput from 'soapbox/components/copyable-input.tsx';
-import { Text, Stack, HStack, Emoji } from 'soapbox/components/ui/index.ts';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 export interface ILightningAddress {
   address: string;
diff --git a/src/features/crypto-donate/components/site-wallet.tsx b/src/features/crypto-donate/components/site-wallet.tsx
index d7a52d2ec..936ecf1d0 100644
--- a/src/features/crypto-donate/components/site-wallet.tsx
+++ b/src/features/crypto-donate/components/site-wallet.tsx
@@ -1,4 +1,4 @@
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 import CryptoAddress from './crypto-address.tsx';
diff --git a/src/features/crypto-donate/index.tsx b/src/features/crypto-donate/index.tsx
index 3ad1dd714..e95f5beaa 100644
--- a/src/features/crypto-donate/index.tsx
+++ b/src/features/crypto-donate/index.tsx
@@ -1,7 +1,9 @@
 import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Accordion, Column, Stack } from 'soapbox/components/ui/index.ts';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useInstance } from 'soapbox/hooks/index.ts';
 
 import SiteWallet from './components/site-wallet.tsx';
diff --git a/src/features/delete-account/index.tsx b/src/features/delete-account/index.tsx
index bf9d109fe..e3cf5e62d 100644
--- a/src/features/delete-account/index.tsx
+++ b/src/features/delete-account/index.tsx
@@ -2,7 +2,14 @@ import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { deleteAccount } from 'soapbox/actions/security.ts';
-import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/developers/apps/create.tsx b/src/features/developers/apps/create.tsx
index 89de0b19c..6ce750bc8 100644
--- a/src/features/developers/apps/create.tsx
+++ b/src/features/developers/apps/create.tsx
@@ -3,7 +3,15 @@ import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
 import { createApp } from 'soapbox/actions/apps.ts';
 import { obtainOAuthToken } from 'soapbox/actions/oauth.ts';
-import { Column, Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { getBaseURL } from 'soapbox/utils/accounts.ts';
 
diff --git a/src/features/developers/developers-challenge.tsx b/src/features/developers/developers-challenge.tsx
index 168ceba22..f2a16309e 100644
--- a/src/features/developers/developers-challenge.tsx
+++ b/src/features/developers/developers-challenge.tsx
@@ -2,7 +2,13 @@ import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
-import { Column, Button, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index 888f374ad..9449647bf 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -10,8 +10,9 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
-import { Column, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 import sourceCode from 'soapbox/utils/code.ts';
diff --git a/src/features/developers/service-worker-info.tsx b/src/features/developers/service-worker-info.tsx
index d5347df5c..6cb1c2cc3 100644
--- a/src/features/developers/service-worker-info.tsx
+++ b/src/features/developers/service-worker-info.tsx
@@ -3,7 +3,13 @@ import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { HStack, Text, Column, FormActions, Button, Stack, Icon } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { unregisterSW } from 'soapbox/utils/sw.ts';
 
 import Indicator from './components/indicator.tsx';
diff --git a/src/features/developers/settings-store.tsx b/src/features/developers/settings-store.tsx
index b08391cf0..24ddc90c8 100644
--- a/src/features/developers/settings-store.tsx
+++ b/src/features/developers/settings-store.tsx
@@ -4,16 +4,13 @@ import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { patchMe } from 'soapbox/actions/me.ts';
 import { FE_NAME, SETTINGS_UPDATE, changeSetting } from 'soapbox/actions/settings.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import {
-  CardHeader,
-  CardTitle,
-  Column,
-  Button,
-  Form,
-  FormActions,
-  FormGroup,
-  Textarea,
-} from 'soapbox/components/ui/index.ts';
+import { Button } from 'soapbox/components/ui/button.tsx';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
 import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/direct-timeline/index.tsx b/src/features/direct-timeline/index.tsx
index 4342de900..7e0b1e348 100644
--- a/src/features/direct-timeline/index.tsx
+++ b/src/features/direct-timeline/index.tsx
@@ -5,7 +5,7 @@ import { directComposeById } from 'soapbox/actions/compose.ts';
 import { expandDirectTimeline } from 'soapbox/actions/timelines.ts';
 import { useDirectStream } from 'soapbox/api/hooks/index.ts';
 import AccountSearch from 'soapbox/components/account-search.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import Timeline from '../ui/components/timeline.tsx';
diff --git a/src/features/directory/components/account-card.tsx b/src/features/directory/components/account-card.tsx
index a0bfe1dad..9f3de14da 100644
--- a/src/features/directory/components/account-card.tsx
+++ b/src/features/directory/components/account-card.tsx
@@ -5,7 +5,8 @@ import { useAccount } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import Badge from 'soapbox/components/badge.tsx';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
diff --git a/src/features/directory/index.tsx b/src/features/directory/index.tsx
index 868479eb7..0c7d91301 100644
--- a/src/features/directory/index.tsx
+++ b/src/features/directory/index.tsx
@@ -5,7 +5,10 @@ import { useLocation } from 'react-router-dom';
 
 import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory.ts';
 import LoadMore from 'soapbox/components/load-more.tsx';
-import { Column, RadioButton, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import RadioButton from 'soapbox/components/ui/radio-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
 
 import AccountCard from './components/account-card.tsx';
diff --git a/src/features/domain-blocks/index.tsx b/src/features/domain-blocks/index.tsx
index f05955a62..97f5040b9 100644
--- a/src/features/domain-blocks/index.tsx
+++ b/src/features/domain-blocks/index.tsx
@@ -5,7 +5,8 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { fetchDomainBlocks, expandDomainBlocks } from 'soapbox/actions/domain-blocks.ts';
 import Domain from 'soapbox/components/domain.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/edit-email/index.tsx b/src/features/edit-email/index.tsx
index 36be0aa13..6dabf8c71 100644
--- a/src/features/edit-email/index.tsx
+++ b/src/features/edit-email/index.tsx
@@ -2,7 +2,12 @@ import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeEmail } from 'soapbox/actions/security.ts';
-import { Button, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index 63ed702d2..21ca51753 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -6,7 +6,16 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { patchMe } from 'soapbox/actions/me.ts';
 import { changeSetting } from 'soapbox/actions/settings.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Button, CardHeader, CardTitle, Column, Emoji, Form, HStack, Icon, Input, Textarea, Tooltip } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { useApi, useAppDispatch, useInstance, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import { adminAccountSchema } from 'soapbox/schemas/admin-account.ts';
diff --git a/src/features/edit-password/index.tsx b/src/features/edit-password/index.tsx
index 38de13ca7..2f0760e4b 100644
--- a/src/features/edit-password/index.tsx
+++ b/src/features/edit-password/index.tsx
@@ -2,7 +2,12 @@ import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changePassword } from 'soapbox/actions/security.ts';
-import { Button, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index 2c8e45cf2..e855d195d 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -3,7 +3,9 @@ import clsx from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Icon, HStack } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import { useDraggedFiles } from 'soapbox/hooks/index.ts';
 
 interface IMediaInput {
diff --git a/src/features/edit-profile/components/header-picker.tsx b/src/features/edit-profile/components/header-picker.tsx
index 99753c021..e3c21aa15 100644
--- a/src/features/edit-profile/components/header-picker.tsx
+++ b/src/features/edit-profile/components/header-picker.tsx
@@ -4,7 +4,10 @@ import clsx from 'clsx';
 import { forwardRef, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, IconButton, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useDraggedFiles } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/edit-profile/index.tsx b/src/features/edit-profile/index.tsx
index c1f6ac506..f043ec8cb 100644
--- a/src/features/edit-profile/index.tsx
+++ b/src/features/edit-profile/index.tsx
@@ -5,18 +5,16 @@ import { updateNotificationSettings } from 'soapbox/actions/accounts.ts';
 import { patchMe } from 'soapbox/actions/me.ts';
 import BirthdayInput from 'soapbox/components/birthday-input.tsx';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import {
-  Button,
-  Column,
-  Form,
-  FormActions,
-  FormGroup,
-  HStack,
-  Input,
-  Streamfield,
-  Textarea,
-  Toggle,
-} from 'soapbox/components/ui/index.ts';
+import { Button } from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Streamfield from 'soapbox/components/ui/streamfield.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useImageField } from 'soapbox/hooks/forms/index.ts';
 import { useAppDispatch, useOwnAccount, useFeatures, useInstance, useAppSelector } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/email-confirmation/index.tsx b/src/features/email-confirmation/index.tsx
index 2f28a0d04..b863a5b76 100644
--- a/src/features/email-confirmation/index.tsx
+++ b/src/features/email-confirmation/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { confirmChangedEmail } from 'soapbox/actions/security.ts';
-import { Spinner } from 'soapbox/components/ui/index.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { buildErrorMessage } from 'soapbox/utils/errors.ts';
diff --git a/src/features/embedded-status/index.tsx b/src/features/embedded-status/index.tsx
index f0d06fedb..76963a627 100644
--- a/src/features/embedded-status/index.tsx
+++ b/src/features/embedded-status/index.tsx
@@ -5,7 +5,7 @@ import { fetchStatus } from 'soapbox/actions/statuses.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import SiteLogo from 'soapbox/components/site-logo.tsx';
 import Status from 'soapbox/components/status.tsx';
-import { Spinner } from 'soapbox/components/ui/index.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { iframeId } from 'soapbox/iframe.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
diff --git a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index f22b7189e..3a17c0804 100644
--- a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -5,7 +5,7 @@ import { KeyboardEvent, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { IconButton } from 'soapbox/components/ui/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { useClickOutside } from 'soapbox/hooks/index.ts';
 
 import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown.tsx';
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index c6ab2bfad..8c71b7705 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { joinEvent, leaveEvent } from 'soapbox/actions/events.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
-import { Button } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import type { ButtonThemes } from 'soapbox/components/ui/useButtonStyles.ts';
diff --git a/src/features/event/components/event-date.tsx b/src/features/event/components/event-date.tsx
index e33fa3662..dc28baa19 100644
--- a/src/features/event/components/event-date.tsx
+++ b/src/features/event/components/event-date.tsx
@@ -2,7 +2,7 @@ import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import { FormattedDate } from 'react-intl';
 
 import Icon from 'soapbox/components/icon.tsx';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index 1d4d4cecf..167448bf0 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -37,8 +37,13 @@ import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
 import { deleteStatus } from 'soapbox/actions/statuses.ts';
 import Icon from 'soapbox/components/icon.tsx';
 import StillImage from 'soapbox/components/still-image.tsx';
-import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui/menu.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useAppDispatch, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
 import copy from 'soapbox/utils/copy.ts';
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx
index 1d325d3af..80db30bea 100644
--- a/src/features/event/event-discussion.tsx
+++ b/src/features/event/event-discussion.tsx
@@ -8,7 +8,7 @@ import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Tombstone from 'soapbox/components/tombstone.tsx';
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index b61a28b41..99fc6b518 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -10,7 +10,10 @@ import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import StatusContent from 'soapbox/components/status-content.tsx';
 import StatusMedia from 'soapbox/components/status-media.tsx';
 import TranslateButton from 'soapbox/components/translate-button.tsx';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
 import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
diff --git a/src/features/events/components/event-carousel.tsx b/src/features/events/components/event-carousel.tsx
index 6ba6a564b..d6de89fe3 100644
--- a/src/features/events/components/event-carousel.tsx
+++ b/src/features/events/components/event-carousel.tsx
@@ -5,7 +5,8 @@ import { Link } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
 
 import EventPreview from 'soapbox/components/event-preview.tsx';
-import { Card, Icon } from 'soapbox/components/ui/index.ts';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/events/index.tsx b/src/features/events/index.tsx
index c04b91e56..715a0335e 100644
--- a/src/features/events/index.tsx
+++ b/src/features/events/index.tsx
@@ -3,7 +3,10 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
-import { Button, CardBody, CardHeader, CardTitle, Column, HStack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import EventCarousel from './components/event-carousel.tsx';
diff --git a/src/features/export-data/components/csv-exporter.tsx b/src/features/export-data/components/csv-exporter.tsx
index 864d85599..1a638cb9f 100644
--- a/src/features/export-data/components/csv-exporter.tsx
+++ b/src/features/export-data/components/csv-exporter.tsx
@@ -1,7 +1,10 @@
 import { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
-import { Button, Form, FormActions, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { AppDispatch, RootState } from 'soapbox/store.ts';
 
diff --git a/src/features/export-data/index.tsx b/src/features/export-data/index.tsx
index e41b61db3..d466ef3bc 100644
--- a/src/features/export-data/index.tsx
+++ b/src/features/export-data/index.tsx
@@ -5,7 +5,7 @@ import {
   exportBlocks,
   exportMutes,
 } from 'soapbox/actions/export-data.ts';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
 import CSVExporter from './components/csv-exporter.tsx';
 
diff --git a/src/features/external-login/components/external-login-form.tsx b/src/features/external-login/components/external-login-form.tsx
index 60cfc42d8..f4318c434 100644
--- a/src/features/external-login/components/external-login-form.tsx
+++ b/src/features/external-login/components/external-login-form.tsx
@@ -2,7 +2,12 @@ import { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
 import { externalLogin, loginWithCode } from 'soapbox/actions/external-auth.ts';
-import { Button, Form, FormActions, FormGroup, Input, Spinner } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/favourited-statuses/index.tsx b/src/features/favourited-statuses/index.tsx
index c865844f8..2b2a8bb6f 100644
--- a/src/features/favourited-statuses/index.tsx
+++ b/src/features/favourited-statuses/index.tsx
@@ -8,7 +8,7 @@ import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavourit
 import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import StatusList from 'soapbox/components/status-list.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/federation-restrictions/components/instance-restrictions.tsx b/src/features/federation-restrictions/components/instance-restrictions.tsx
index 824b1489e..5d5133100 100644
--- a/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -8,7 +8,9 @@ import shieldXIcon from '@tabler/icons/outline/shield-x.svg';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon.tsx';
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useInstance } from 'soapbox/hooks/index.ts';
 
 import type { RemoteInstance } from 'soapbox/selectors/index.ts';
diff --git a/src/features/federation-restrictions/index.tsx b/src/features/federation-restrictions/index.tsx
index 51bb11684..862020edc 100644
--- a/src/features/federation-restrictions/index.tsx
+++ b/src/features/federation-restrictions/index.tsx
@@ -2,7 +2,8 @@ import { useState, useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Accordion } from 'soapbox/components/ui/index.ts';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
 import { makeGetHosts } from 'soapbox/selectors/index.ts';
 import { federationRestrictionsDisclosed } from 'soapbox/utils/state.ts';
diff --git a/src/features/feed-suggestions/feed-suggestions.tsx b/src/features/feed-suggestions/feed-suggestions.tsx
index 76c14fc23..1a8695eb9 100644
--- a/src/features/feed-suggestions/feed-suggestions.tsx
+++ b/src/features/feed-suggestions/feed-suggestions.tsx
@@ -2,7 +2,10 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { useAccount } from 'soapbox/api/hooks/index.ts';
-import { Card, CardBody, CardTitle, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Card, CardBody, CardTitle } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx
index bdaba850e..b5575efbc 100644
--- a/src/features/filters/edit-filter.tsx
+++ b/src/features/filters/edit-filter.tsx
@@ -5,7 +5,17 @@ import { useHistory } from 'react-router-dom';
 import { createFilter, fetchFilter, updateFilter } from 'soapbox/actions/filters.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
-import { Button, Column, Form, FormActions, FormGroup, HStack, Input, Stack, Streamfield, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Streamfield from 'soapbox/components/ui/streamfield.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
 import { normalizeFilter } from 'soapbox/normalizers/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/filters/index.tsx b/src/features/filters/index.tsx
index 2f15c5bd0..47198dd2a 100644
--- a/src/features/filters/index.tsx
+++ b/src/features/filters/index.tsx
@@ -5,7 +5,11 @@ import { useHistory } from 'react-router-dom';
 import { fetchFilters, deleteFilter } from 'soapbox/actions/filters.ts';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/follow-recommendations/index.tsx b/src/features/follow-recommendations/index.tsx
index 5e7c03324..cc0900c7f 100644
--- a/src/features/follow-recommendations/index.tsx
+++ b/src/features/follow-recommendations/index.tsx
@@ -4,7 +4,9 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchSuggestions } from 'soapbox/actions/suggestions.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/follow-requests/index.tsx b/src/features/follow-requests/index.tsx
index fffa8314b..8bdf3f5cc 100644
--- a/src/features/follow-requests/index.tsx
+++ b/src/features/follow-requests/index.tsx
@@ -4,7 +4,8 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accounts.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import AccountAuthorize from './components/account-authorize.tsx';
diff --git a/src/features/followed-tags/index.tsx b/src/features/followed-tags/index.tsx
index 61f08c5f1..82173ac46 100644
--- a/src/features/followed-tags/index.tsx
+++ b/src/features/followed-tags/index.tsx
@@ -5,7 +5,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { fetchFollowedHashtags, expandFollowedHashtags } from 'soapbox/actions/tags.ts';
 import Hashtag from 'soapbox/components/hashtag.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/followers/index.tsx b/src/features/followers/index.tsx
index 922e7d64f..9d615bbe4 100644
--- a/src/features/followers/index.tsx
+++ b/src/features/followers/index.tsx
@@ -4,7 +4,8 @@ import { useAccountLookup, useFollowers } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.followers', defaultMessage: 'Followers' },
diff --git a/src/features/following/index.tsx b/src/features/following/index.tsx
index ee9050057..9aca5bf27 100644
--- a/src/features/following/index.tsx
+++ b/src/features/following/index.tsx
@@ -4,7 +4,8 @@ import { useAccountLookup, useFollowing } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.following', defaultMessage: 'Following' },
diff --git a/src/features/forms/index.tsx b/src/features/forms/index.tsx
index 0ab369db7..2273b679f 100644
--- a/src/features/forms/index.tsx
+++ b/src/features/forms/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Children, useState } from 'react';
 
-import { Select } from 'soapbox/components/ui/index.ts';
+import Select from 'soapbox/components/ui/select.tsx';
 
 interface IInputContainer {
   label?: React.ReactNode;
diff --git a/src/features/group/components/group-action-button.tsx b/src/features/group/components/group-action-button.tsx
index 8a8a8d33f..02bb3109a 100644
--- a/src/features/group/components/group-action-button.tsx
+++ b/src/features/group/components/group-action-button.tsx
@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup, usePendingGroups } from 'soapbox/api/hooks/index.ts';
-import { Button } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
 import { importEntities } from 'soapbox/entity-store/actions.ts';
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
diff --git a/src/features/group/components/group-header-image.tsx b/src/features/group/components/group-header-image.tsx
index 10d608bb2..d6818a3f8 100644
--- a/src/features/group/components/group-header-image.tsx
+++ b/src/features/group/components/group-header-image.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
 import type { Group } from 'soapbox/schemas/index.ts';
 
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index f51255b47..5c2a764e9 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -6,7 +6,10 @@ import { defineMessages, useIntl } from 'react-intl';
 import { openModal } from 'soapbox/actions/modals.ts';
 import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
 import StillImage from 'soapbox/components/still-image.tsx';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
 import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
diff --git a/src/features/group/components/group-member-count.tsx b/src/features/group/components/group-member-count.tsx
index fc0f763da..bd50d475e 100644
--- a/src/features/group/components/group-member-count.tsx
+++ b/src/features/group/components/group-member-count.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 import { Group } from 'soapbox/types/entities.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
diff --git a/src/features/group/components/group-member-list-item.tsx b/src/features/group/components/group-member-list-item.tsx
index 6874419d7..5c4ef3a38 100644
--- a/src/features/group/components/group-member-list-item.tsx
+++ b/src/features/group/components/group-member-list-item.tsx
@@ -10,7 +10,7 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { useAccount, useBlockGroupMember, useDemoteGroupMember, usePromoteGroupMember } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import DropdownMenu from 'soapbox/components/dropdown-menu/dropdown-menu.tsx';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { deleteEntities } from 'soapbox/entity-store/actions.ts';
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account.tsx';
diff --git a/src/features/group/components/group-options-button.tsx b/src/features/group/components/group-options-button.tsx
index 9dfa5221c..5a35e28cb 100644
--- a/src/features/group/components/group-options-button.tsx
+++ b/src/features/group/components/group-options-button.tsx
@@ -10,7 +10,7 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
 import { useLeaveGroup, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
 import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu/index.ts';
-import { IconButton } from 'soapbox/components/ui/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/group/components/group-privacy.tsx b/src/features/group/components/group-privacy.tsx
index b15a8e92d..0b2822f46 100644
--- a/src/features/group/components/group-privacy.tsx
+++ b/src/features/group/components/group-privacy.tsx
@@ -2,7 +2,11 @@ import lockIcon from '@tabler/icons/outline/lock.svg';
 import worldIcon from '@tabler/icons/outline/world.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, Popover, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Popover from 'soapbox/components/ui/popover.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { Group } from 'soapbox/types/entities.ts';
 
 interface IGroupPolicy {
diff --git a/src/features/group/components/group-relationship.tsx b/src/features/group/components/group-relationship.tsx
index 0b0029b20..e776391b5 100644
--- a/src/features/group/components/group-relationship.tsx
+++ b/src/features/group/components/group-relationship.tsx
@@ -2,7 +2,9 @@ import gavelIcon from '@tabler/icons/outline/gavel.svg';
 import usersIcon from '@tabler/icons/outline/users.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import { Group } from 'soapbox/types/entities.ts';
 
diff --git a/src/features/group/components/group-tag-list-item.tsx b/src/features/group/components/group-tag-list-item.tsx
index df4fc0152..901595a26 100644
--- a/src/features/group/components/group-tag-list-item.tsx
+++ b/src/features/group/components/group-tag-list-item.tsx
@@ -6,7 +6,12 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { useUpdateGroupTag } from 'soapbox/api/hooks/index.ts';
-import { HStack, Icon, IconButton, Stack, Text, Tooltip } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { importEntities } from 'soapbox/entity-store/actions.ts';
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
diff --git a/src/features/group/components/group-tags-field.tsx b/src/features/group/components/group-tags-field.tsx
index cebe5e94e..0d8894e12 100644
--- a/src/features/group/components/group-tags-field.tsx
+++ b/src/features/group/components/group-tags-field.tsx
@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Input, Streamfield } from 'soapbox/components/ui/index.ts';
+import Input from 'soapbox/components/ui/input.tsx';
+import Streamfield from 'soapbox/components/ui/streamfield.tsx';
 
 import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 
diff --git a/src/features/group/edit-group.tsx b/src/features/group/edit-group.tsx
index 5d14a805b..c6ebbef46 100644
--- a/src/features/group/edit-group.tsx
+++ b/src/features/group/edit-group.tsx
@@ -3,7 +3,15 @@ import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { useGroup, useGroupTags, useUpdateGroup } from 'soapbox/api/hooks/index.ts';
-import { Button, Column, Form, FormActions, FormGroup, Icon, Input, Spinner, Textarea } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { useImageField, useTextField } from 'soapbox/hooks/forms/index.ts';
 import { useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/group/group-blocked-members.tsx b/src/features/group/group-blocked-members.tsx
index a060f78d5..55ea8a706 100644
--- a/src/features/group/group-blocked-members.tsx
+++ b/src/features/group/group-blocked-members.tsx
@@ -5,7 +5,10 @@ import { fetchGroupBlocks, groupUnblock } from 'soapbox/actions/groups.ts';
 import { useAccount, useGroup } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Button, Column, HStack, Spinner } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/group/group-gallery.tsx b/src/features/group/group-gallery.tsx
index 407043a79..466aa4cbf 100644
--- a/src/features/group/group-gallery.tsx
+++ b/src/features/group/group-gallery.tsx
@@ -4,7 +4,8 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { useGroup, useGroupMedia } from 'soapbox/api/hooks/index.ts';
 import LoadMore from 'soapbox/components/load-more.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
-import { Column, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import MediaItem from '../account-gallery/components/media-item.tsx';
diff --git a/src/features/group/group-membership-requests.tsx b/src/features/group/group-membership-requests.tsx
index 80345179e..39a51c339 100644
--- a/src/features/group/group-membership-requests.tsx
+++ b/src/features/group/group-membership-requests.tsx
@@ -6,7 +6,9 @@ import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/a
 import Account from 'soapbox/components/account.tsx';
 import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, HStack, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx
index ca0023a0f..6b73276cc 100644
--- a/src/features/group/group-tag-timeline.tsx
+++ b/src/features/group/group-tag-timeline.tsx
@@ -4,7 +4,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { expandGroupTimelineFromTag } from 'soapbox/actions/timelines.ts';
 import { useGroup, useGroupTag } from 'soapbox/api/hooks/index.ts';
-import { Column, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import Timeline from '../ui/components/timeline.tsx';
diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx
index 819de827c..a4fcb863c 100644
--- a/src/features/group/group-tags.tsx
+++ b/src/features/group/group-tags.tsx
@@ -3,7 +3,9 @@ import { FormattedMessage } from 'react-intl';
 
 import { useGroup, useGroupTags } from 'soapbox/api/hooks/index.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import PlaceholderAccount from '../placeholder/components/placeholder-account.tsx';
 
diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx
index 66003b64a..1118aac54 100644
--- a/src/features/group/group-timeline.tsx
+++ b/src/features/group/group-timeline.tsx
@@ -7,7 +7,12 @@ import { Link } from 'react-router-dom';
 import { groupCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose.ts';
 import { expandGroupFeaturedTimeline, expandGroupTimeline } from 'soapbox/actions/timelines.ts';
 import { useGroup, useGroupStream } from 'soapbox/api/hooks/index.ts';
-import { Avatar, HStack, Icon, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import ComposeForm from 'soapbox/features/compose/components/compose-form.tsx';
 import { useAppDispatch, useAppSelector, useDraggedFiles, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
diff --git a/src/features/group/manage-group.tsx b/src/features/group/manage-group.tsx
index ff7bf55c9..0d8f6a804 100644
--- a/src/features/group/manage-group.tsx
+++ b/src/features/group/manage-group.tsx
@@ -5,7 +5,10 @@ import { useHistory } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useDeleteGroup, useGroup } from 'soapbox/api/hooks/index.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui/index.ts';
+import { CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useBackend } from 'soapbox/hooks/index.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/groups/components/discover/group-grid-item.tsx b/src/features/groups/components/discover/group-grid-item.tsx
index 845cf1eb2..e4e23dc86 100644
--- a/src/features/groups/components/discover/group-grid-item.tsx
+++ b/src/features/groups/components/discover/group-grid-item.tsx
@@ -2,7 +2,9 @@ import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 
 import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import GroupActionButton from 'soapbox/features/group/components/group-action-button.tsx';
 import GroupHeaderImage from 'soapbox/features/group/components/group-header-image.tsx';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
diff --git a/src/features/groups/components/discover/group-list-item.tsx b/src/features/groups/components/discover/group-list-item.tsx
index 58b909a56..a015277b7 100644
--- a/src/features/groups/components/discover/group-list-item.tsx
+++ b/src/features/groups/components/discover/group-list-item.tsx
@@ -4,7 +4,10 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import GroupActionButton from 'soapbox/features/group/components/group-action-button.tsx';
 import { Group as GroupEntity } from 'soapbox/types/entities.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
diff --git a/src/features/groups/components/discover/layout-buttons.tsx b/src/features/groups/components/discover/layout-buttons.tsx
index 2d974c73c..e57943de6 100644
--- a/src/features/groups/components/discover/layout-buttons.tsx
+++ b/src/features/groups/components/discover/layout-buttons.tsx
@@ -2,7 +2,8 @@ import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
 import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
 
-import { HStack, Icon } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
 enum GroupLayout {
   LIST = 'LIST',
diff --git a/src/features/groups/components/discover/popular-groups.tsx b/src/features/groups/components/discover/popular-groups.tsx
index 1290bb3f9..a6e1b6bff 100644
--- a/src/features/groups/components/discover/popular-groups.tsx
+++ b/src/features/groups/components/discover/popular-groups.tsx
@@ -3,7 +3,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { usePopularGroups } from 'soapbox/api/hooks/index.ts';
 import Link from 'soapbox/components/link.tsx';
-import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Carousel from 'soapbox/components/ui/carousel.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover.tsx';
 
 import GroupGridItem from './group-grid-item.tsx';
diff --git a/src/features/groups/components/discover/popular-tags.tsx b/src/features/groups/components/discover/popular-tags.tsx
index 0f726294e..04e76ee50 100644
--- a/src/features/groups/components/discover/popular-tags.tsx
+++ b/src/features/groups/components/discover/popular-tags.tsx
@@ -2,7 +2,9 @@ import { FormattedMessage } from 'react-intl';
 
 import { usePopularTags } from 'soapbox/api/hooks/index.ts';
 import Link from 'soapbox/components/link.tsx';
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import TagListItem from './tag-list-item.tsx';
 
diff --git a/src/features/groups/components/discover/search/blankslate.tsx b/src/features/groups/components/discover/search/blankslate.tsx
index a80d94532..db34f8fbf 100644
--- a/src/features/groups/components/discover/search/blankslate.tsx
+++ b/src/features/groups/components/discover/search/blankslate.tsx
@@ -1,4 +1,5 @@
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface Props {
   title: React.ReactNode | string;
diff --git a/src/features/groups/components/discover/search/recent-searches.tsx b/src/features/groups/components/discover/search/recent-searches.tsx
index 243cbb406..c35353147 100644
--- a/src/features/groups/components/discover/search/recent-searches.tsx
+++ b/src/features/groups/components/discover/search/recent-searches.tsx
@@ -3,7 +3,10 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
 
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useOwnAccount } from 'soapbox/hooks/index.ts';
 import { groupSearchHistory } from 'soapbox/settings.ts';
 import { clearRecentGroupSearches } from 'soapbox/utils/groups.ts';
diff --git a/src/features/groups/components/discover/search/results.tsx b/src/features/groups/components/discover/search/results.tsx
index b1817680f..ac827188c 100644
--- a/src/features/groups/components/discover/search/results.tsx
+++ b/src/features/groups/components/discover/search/results.tsx
@@ -4,7 +4,9 @@ import { FormattedMessage } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
 import { useGroupSearch } from 'soapbox/api/hooks/index.ts';
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import GroupGridItem from '../group-grid-item.tsx';
 import GroupListItem from '../group-list-item.tsx';
diff --git a/src/features/groups/components/discover/search/search.tsx b/src/features/groups/components/discover/search/search.tsx
index 7b70aea19..06584005b 100644
--- a/src/features/groups/components/discover/search/search.tsx
+++ b/src/features/groups/components/discover/search/search.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { useGroupSearch } from 'soapbox/api/hooks/index.ts';
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
 import { useDebounce, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { saveGroupSearch } from 'soapbox/utils/groups.ts';
diff --git a/src/features/groups/components/discover/suggested-groups.tsx b/src/features/groups/components/discover/suggested-groups.tsx
index 6dff84009..4c83701df 100644
--- a/src/features/groups/components/discover/suggested-groups.tsx
+++ b/src/features/groups/components/discover/suggested-groups.tsx
@@ -3,7 +3,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
 import Link from 'soapbox/components/link.tsx';
-import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Carousel from 'soapbox/components/ui/carousel.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover.tsx';
 
 import GroupGridItem from './group-grid-item.tsx';
diff --git a/src/features/groups/components/discover/tag-list-item.tsx b/src/features/groups/components/discover/tag-list-item.tsx
index f684fb7d4..55b7e167a 100644
--- a/src/features/groups/components/discover/tag-list-item.tsx
+++ b/src/features/groups/components/discover/tag-list-item.tsx
@@ -1,7 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import type { GroupTag } from 'soapbox/schemas/index.ts';
 
diff --git a/src/features/groups/components/group-link-preview.tsx b/src/features/groups/components/group-link-preview.tsx
index 73fe5b904..d09eaa18d 100644
--- a/src/features/groups/components/group-link-preview.tsx
+++ b/src/features/groups/components/group-link-preview.tsx
@@ -1,6 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Button, CardTitle, Stack } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardTitle } from 'soapbox/components/ui/card.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { type Card as StatusCard } from 'soapbox/types/entities.ts';
 
 interface IGroupLinkPreview {
diff --git a/src/features/groups/components/pending-groups-row.tsx b/src/features/groups/components/pending-groups-row.tsx
index fba1e4a78..96881a6df 100644
--- a/src/features/groups/components/pending-groups-row.tsx
+++ b/src/features/groups/components/pending-groups-row.tsx
@@ -1,6 +1,6 @@
 import { usePendingGroups } from 'soapbox/api/hooks/index.ts';
 import { PendingItemsRow } from 'soapbox/components/pending-items-row.tsx';
-import { Divider } from 'soapbox/components/ui/index.ts';
+import Divider from 'soapbox/components/ui/divider.tsx';
 import { useFeatures } from 'soapbox/hooks/index.ts';
 
 export default () => {
diff --git a/src/features/groups/components/tab-bar.tsx b/src/features/groups/components/tab-bar.tsx
index 6d4343b53..9415ea325 100644
--- a/src/features/groups/components/tab-bar.tsx
+++ b/src/features/groups/components/tab-bar.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Tabs } from 'soapbox/components/ui/index.ts';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 
 import type { Item } from 'soapbox/components/ui/tabs.tsx';
 
diff --git a/src/features/groups/discover.tsx b/src/features/groups/discover.tsx
index db3427d6a..ed5510b35 100644
--- a/src/features/groups/discover.tsx
+++ b/src/features/groups/discover.tsx
@@ -4,7 +4,11 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 import PopularGroups from './components/discover/popular-groups.tsx';
 import PopularTags from './components/discover/popular-tags.tsx';
diff --git a/src/features/groups/index.tsx b/src/features/groups/index.tsx
index 326899f0b..cbe819e4b 100644
--- a/src/features/groups/index.tsx
+++ b/src/features/groups/index.tsx
@@ -7,7 +7,10 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { useGroups } from 'soapbox/api/hooks/index.ts';
 import GroupCard from 'soapbox/components/group-card.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Button, Input, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector, useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
 import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions.ts';
 
diff --git a/src/features/groups/pending-requests.tsx b/src/features/groups/pending-requests.tsx
index c263eb6de..10045034d 100644
--- a/src/features/groups/pending-requests.tsx
+++ b/src/features/groups/pending-requests.tsx
@@ -4,7 +4,9 @@ import { Link } from 'react-router-dom';
 import { usePendingGroups } from 'soapbox/api/hooks/index.ts';
 import GroupCard from 'soapbox/components/group-card.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card.tsx';
 
diff --git a/src/features/groups/popular.tsx b/src/features/groups/popular.tsx
index a135e6e00..72a9ffdce 100644
--- a/src/features/groups/popular.tsx
+++ b/src/features/groups/popular.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
 import { usePopularGroups } from 'soapbox/api/hooks/index.ts';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
 import GroupGridItem from './components/discover/group-grid-item.tsx';
 import GroupListItem from './components/discover/group-list-item.tsx';
diff --git a/src/features/groups/suggested.tsx b/src/features/groups/suggested.tsx
index 65f9b004f..2cf80bc9b 100644
--- a/src/features/groups/suggested.tsx
+++ b/src/features/groups/suggested.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
 import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
 import GroupGridItem from './components/discover/group-grid-item.tsx';
 import GroupListItem from './components/discover/group-list-item.tsx';
diff --git a/src/features/groups/tag.tsx b/src/features/groups/tag.tsx
index 597f943ea..2a275ea7a 100644
--- a/src/features/groups/tag.tsx
+++ b/src/features/groups/tag.tsx
@@ -5,7 +5,9 @@ import { forwardRef, useCallback, useState } from 'react';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
 import { useGroupTag, useGroupsFromTag } from 'soapbox/api/hooks/index.ts';
-import { Column, HStack, Icon } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
 import GroupGridItem from './components/discover/group-grid-item.tsx';
 import GroupListItem from './components/discover/group-list-item.tsx';
diff --git a/src/features/groups/tags.tsx b/src/features/groups/tags.tsx
index 7bb81a53a..24f22ba81 100644
--- a/src/features/groups/tags.tsx
+++ b/src/features/groups/tags.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
 
 import { usePopularTags } from 'soapbox/api/hooks/index.ts';
-import { Column, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import TagListItem from './components/discover/tag-list-item.tsx';
 
diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx
index 3301b61e3..edb81235f 100644
--- a/src/features/hashtag-timeline/index.tsx
+++ b/src/features/hashtag-timeline/index.tsx
@@ -5,7 +5,8 @@ import { fetchHashtag, followHashtag, unfollowHashtag } from 'soapbox/actions/ta
 import { expandHashtagTimeline, clearTimeline } from 'soapbox/actions/timelines.ts';
 import { useHashtagStream } from 'soapbox/api/hooks/index.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Column, Toggle } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import Timeline from 'soapbox/features/ui/components/timeline.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx
index 02e0e3bcc..36e1371f4 100644
--- a/src/features/home-timeline/index.tsx
+++ b/src/features/home-timeline/index.tsx
@@ -4,7 +4,9 @@ import { Link } from 'react-router-dom';
 
 import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
-import { Column, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import Timeline from 'soapbox/features/ui/components/timeline.tsx';
 import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
diff --git a/src/features/import-data/components/csv-importer.tsx b/src/features/import-data/components/csv-importer.tsx
index cf1143a74..ffdf12a4f 100644
--- a/src/features/import-data/components/csv-importer.tsx
+++ b/src/features/import-data/components/csv-importer.tsx
@@ -1,7 +1,12 @@
 import { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
-import { Button, FileInput, Form, FormActions, FormGroup, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FileInput from 'soapbox/components/ui/file-input.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { AppDispatch, RootState } from 'soapbox/store.ts';
diff --git a/src/features/import-data/index.tsx b/src/features/import-data/index.tsx
index 77fa22179..48ba30016 100644
--- a/src/features/import-data/index.tsx
+++ b/src/features/import-data/index.tsx
@@ -5,7 +5,7 @@ import {
   importBlocks,
   importMutes,
 } from 'soapbox/actions/import-data.ts';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
 import CSVImporter from './components/csv-importer.tsx';
 
diff --git a/src/features/landing-timeline/components/site-banner.tsx b/src/features/landing-timeline/components/site-banner.tsx
index 607464271..6611ea146 100644
--- a/src/features/landing-timeline/components/site-banner.tsx
+++ b/src/features/landing-timeline/components/site-banner.tsx
@@ -1,7 +1,7 @@
 import DOMPurify from 'isomorphic-dompurify';
 
 import Markup from 'soapbox/components/markup.tsx';
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useInstance } from 'soapbox/hooks/index.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx
index 29e8bdecd..874db76d7 100644
--- a/src/features/landing-timeline/index.tsx
+++ b/src/features/landing-timeline/index.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { expandCommunityTimeline } from 'soapbox/actions/timelines.ts';
 import { useCommunityStream } from 'soapbox/api/hooks/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
diff --git a/src/features/list-adder/index.tsx b/src/features/list-adder/index.tsx
index 2453cbe1e..08ce271b8 100644
--- a/src/features/list-adder/index.tsx
+++ b/src/features/list-adder/index.tsx
@@ -3,7 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
 import { setupListAdder, resetListAdder } from 'soapbox/actions/lists.ts';
-import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui/index.ts';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/list-editor/components/account.tsx b/src/features/list-editor/components/account.tsx
index 42cc532c9..af41238c7 100644
--- a/src/features/list-editor/components/account.tsx
+++ b/src/features/list-editor/components/account.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists.ts';
 import IconButton from 'soapbox/components/icon-button.tsx';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/list-editor/components/edit-list-form.tsx b/src/features/list-editor/components/edit-list-form.tsx
index ddf59331c..00a177006 100644
--- a/src/features/list-editor/components/edit-list-form.tsx
+++ b/src/features/list-editor/components/edit-list-form.tsx
@@ -1,7 +1,10 @@
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists.ts';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index f0ef20aa2..423cffe04 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -4,7 +4,10 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists.ts';
 import Icon from 'soapbox/components/icon.tsx';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/list-editor/index.tsx b/src/features/list-editor/index.tsx
index 6eeaf02b0..729b658db 100644
--- a/src/features/list-editor/index.tsx
+++ b/src/features/list-editor/index.tsx
@@ -2,7 +2,8 @@ import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setupListEditor, resetListEditor } from 'soapbox/actions/lists.ts';
-import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui/index.ts';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import Account from './components/account.tsx';
diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx
index f080e6abb..167d554ac 100644
--- a/src/features/list-timeline/index.tsx
+++ b/src/features/list-timeline/index.tsx
@@ -7,7 +7,9 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { expandListTimeline } from 'soapbox/actions/timelines.ts';
 import { useListStream } from 'soapbox/api/hooks/index.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
-import { Column, Button, Spinner } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
diff --git a/src/features/lists/components/new-list-form.tsx b/src/features/lists/components/new-list-form.tsx
index 39892c740..4ce241a1a 100644
--- a/src/features/lists/components/new-list-form.tsx
+++ b/src/features/lists/components/new-list-form.tsx
@@ -1,7 +1,10 @@
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists.ts';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/lists/index.tsx b/src/features/lists/index.tsx
index 68a8dfd0d..b7386a673 100644
--- a/src/features/lists/index.tsx
+++ b/src/features/lists/index.tsx
@@ -10,7 +10,9 @@ import { deleteList, fetchLists } from 'soapbox/actions/lists.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import Icon from 'soapbox/components/icon.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, IconButton, Spinner } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import NewListForm from './components/new-list-form.tsx';
diff --git a/src/features/migration/index.tsx b/src/features/migration/index.tsx
index eeae46f5e..ead73511a 100644
--- a/src/features/migration/index.tsx
+++ b/src/features/migration/index.tsx
@@ -3,7 +3,13 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { moveAccount } from 'soapbox/actions/security.ts';
-import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/mutes/components/group-list-item.tsx b/src/features/mutes/components/group-list-item.tsx
index e7b578075..3f8280c33 100644
--- a/src/features/mutes/components/group-list-item.tsx
+++ b/src/features/mutes/components/group-list-item.tsx
@@ -2,7 +2,9 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
 import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
-import { Button, HStack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { type Group } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/mutes/index.tsx b/src/features/mutes/index.tsx
index f07b17c95..e2a961ad6 100644
--- a/src/features/mutes/index.tsx
+++ b/src/features/mutes/index.tsx
@@ -3,7 +3,9 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { useMutes, useGroupMutes } from 'soapbox/api/hooks/index.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Stack, Tabs } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useFeatures } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/nostr-relays/components/relay-editor.tsx b/src/features/nostr-relays/components/relay-editor.tsx
index 0ee5491cf..5d060e9fb 100644
--- a/src/features/nostr-relays/components/relay-editor.tsx
+++ b/src/features/nostr-relays/components/relay-editor.tsx
@@ -1,6 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Input, Select } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
 import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 import { useInstance } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/nostr-relays/index.tsx b/src/features/nostr-relays/index.tsx
index 7663fc4ff..b174b90b0 100644
--- a/src/features/nostr-relays/index.tsx
+++ b/src/features/nostr-relays/index.tsx
@@ -1,7 +1,11 @@
 import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import { useNostrReq } from 'soapbox/features/nostr/hooks/useNostrReq.ts';
 import { useOwnAccount } from 'soapbox/hooks/index.ts';
diff --git a/src/features/nostr/nostr-bunker-login.tsx b/src/features/nostr/nostr-bunker-login.tsx
index c047a47c6..b32edf263 100644
--- a/src/features/nostr/nostr-bunker-login.tsx
+++ b/src/features/nostr/nostr-bunker-login.tsx
@@ -4,7 +4,10 @@ import { useHistory } from 'react-router-dom';
 
 import { authLoggedIn, verifyCredentials } from 'soapbox/actions/auth.ts';
 import { obtainOAuthToken } from 'soapbox/actions/oauth.ts';
-import { Button, Form, Input, Spinner } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 export const NostrBunkerLogin: React.FC = () => {
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index 2437df79a..95c5c5cab 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -9,7 +9,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { setFilter } from 'soapbox/actions/notifications.ts';
 import Icon from 'soapbox/components/icon.tsx';
-import { Tabs } from 'soapbox/components/ui/index.ts';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks/index.ts';
 
 import type { Item } from 'soapbox/components/ui/tabs.tsx';
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index 78cb5cff1..ac7046cc6 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -24,7 +24,11 @@ import { getSettings } from 'soapbox/actions/settings.ts';
 import { hideStatus, revealStatus } from 'soapbox/actions/statuses.ts';
 import Icon from 'soapbox/components/icon.tsx';
 import Status from 'soapbox/components/status.tsx';
-import { HStack, Text, Emoji, Button, Stack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import StatusContainer from 'soapbox/containers/status-container.tsx';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
diff --git a/src/features/notifications/components/setting-toggle.tsx b/src/features/notifications/components/setting-toggle.tsx
index 40e16a773..8dda40eb2 100644
--- a/src/features/notifications/components/setting-toggle.tsx
+++ b/src/features/notifications/components/setting-toggle.tsx
@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 
-import { Toggle } from 'soapbox/components/ui/index.ts';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { Settings } from 'soapbox/schemas/soapbox/settings.ts';
 
 interface ISettingToggle {
diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx
index 447b33630..f56a7d2ed 100644
--- a/src/features/notifications/index.tsx
+++ b/src/features/notifications/index.tsx
@@ -14,7 +14,8 @@ import { getSettings } from 'soapbox/actions/settings.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import ScrollTopButton from 'soapbox/components/scroll-top-button.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column, Portal } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification.tsx';
 import { useAppDispatch, useAppSelector, useSettings, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
diff --git a/src/features/pinned-statuses/index.tsx b/src/features/pinned-statuses/index.tsx
index caedf401c..a988a9e3b 100644
--- a/src/features/pinned-statuses/index.tsx
+++ b/src/features/pinned-statuses/index.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom';
 import { fetchPinnedStatuses } from 'soapbox/actions/pin-statuses.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import StatusList from 'soapbox/components/status-list.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { selectOwnAccount } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/placeholder/components/placeholder-account.tsx b/src/features/placeholder/components/placeholder-account.tsx
index 20a023a36..79dfc753b 100644
--- a/src/features/placeholder/components/placeholder-account.tsx
+++ b/src/features/placeholder/components/placeholder-account.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
 import PlaceholderAvatar from './placeholder-avatar.tsx';
 import PlaceholderDisplayName from './placeholder-display-name.tsx';
diff --git a/src/features/placeholder/components/placeholder-avatar.tsx b/src/features/placeholder/components/placeholder-avatar.tsx
index b50490c4e..e51de2768 100644
--- a/src/features/placeholder/components/placeholder-avatar.tsx
+++ b/src/features/placeholder/components/placeholder-avatar.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 interface IPlaceholderAvatar {
   size: number;
diff --git a/src/features/placeholder/components/placeholder-chat-message.tsx b/src/features/placeholder/components/placeholder-chat-message.tsx
index 5e40609a3..c692965d0 100644
--- a/src/features/placeholder/components/placeholder-chat-message.tsx
+++ b/src/features/placeholder/components/placeholder-chat-message.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import { randomIntFromInterval } from '../utils.ts';
 
diff --git a/src/features/placeholder/components/placeholder-chat.tsx b/src/features/placeholder/components/placeholder-chat.tsx
index 510fe8dbf..8d60e4651 100644
--- a/src/features/placeholder/components/placeholder-chat.tsx
+++ b/src/features/placeholder/components/placeholder-chat.tsx
@@ -1,4 +1,5 @@
-import { HStack, Stack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 import PlaceholderAvatar from './placeholder-avatar.tsx';
 import PlaceholderDisplayName from './placeholder-display-name.tsx';
diff --git a/src/features/placeholder/components/placeholder-event-header.tsx b/src/features/placeholder/components/placeholder-event-header.tsx
index bce5005e7..98ec10258 100644
--- a/src/features/placeholder/components/placeholder-event-header.tsx
+++ b/src/features/placeholder/components/placeholder-event-header.tsx
@@ -1,4 +1,4 @@
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 import { generateText, randomIntFromInterval } from '../utils.ts';
 
diff --git a/src/features/placeholder/components/placeholder-event-preview.tsx b/src/features/placeholder/components/placeholder-event-preview.tsx
index b1a8e5097..a96fe53c3 100644
--- a/src/features/placeholder/components/placeholder-event-preview.tsx
+++ b/src/features/placeholder/components/placeholder-event-preview.tsx
@@ -1,4 +1,5 @@
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import { generateText, randomIntFromInterval } from '../utils.ts';
 
diff --git a/src/features/placeholder/components/placeholder-group-card.tsx b/src/features/placeholder/components/placeholder-group-card.tsx
index 6e2d24a74..6bd08cd90 100644
--- a/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/src/features/placeholder/components/placeholder-group-card.tsx
@@ -1,4 +1,6 @@
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import { generateText, randomIntFromInterval } from '../utils.ts';
 
diff --git a/src/features/placeholder/components/placeholder-group-discover.tsx b/src/features/placeholder/components/placeholder-group-discover.tsx
index 856058144..7b15961bd 100644
--- a/src/features/placeholder/components/placeholder-group-discover.tsx
+++ b/src/features/placeholder/components/placeholder-group-discover.tsx
@@ -1,4 +1,6 @@
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import { generateText, randomIntFromInterval } from '../utils.ts';
 
diff --git a/src/features/placeholder/components/placeholder-group-search.tsx b/src/features/placeholder/components/placeholder-group-search.tsx
index 8d5792143..a428e92c9 100644
--- a/src/features/placeholder/components/placeholder-group-search.tsx
+++ b/src/features/placeholder/components/placeholder-group-search.tsx
@@ -1,4 +1,6 @@
-import { HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import { generateText, randomIntFromInterval } from '../utils.ts';
 
diff --git a/src/features/placeholder/components/placeholder-notification.tsx b/src/features/placeholder/components/placeholder-notification.tsx
index ca8b3e122..ca37f2bde 100644
--- a/src/features/placeholder/components/placeholder-notification.tsx
+++ b/src/features/placeholder/components/placeholder-notification.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
 import PlaceholderAvatar from './placeholder-avatar.tsx';
 import PlaceholderDisplayName from './placeholder-display-name.tsx';
diff --git a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index 1b5f721dd..c6cd37a21 100644
--- a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -1,4 +1,5 @@
-import { HStack, Stack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 import { randomIntFromInterval, generateText } from '../utils.ts';
 
diff --git a/src/features/placeholder/components/placeholder-sidebar-trends.tsx b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
index 93e006bf0..0f743e3b6 100644
--- a/src/features/placeholder/components/placeholder-sidebar-trends.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
@@ -1,4 +1,4 @@
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 import { randomIntFromInterval, generateText } from '../utils.ts';
 
diff --git a/src/features/placeholder/components/placeholder-status.tsx b/src/features/placeholder/components/placeholder-status.tsx
index 4be6c1cc2..85cd3c93a 100644
--- a/src/features/placeholder/components/placeholder-status.tsx
+++ b/src/features/placeholder/components/placeholder-status.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
 import PlaceholderAvatar from './placeholder-avatar.tsx';
 import PlaceholderDisplayName from './placeholder-display-name.tsx';
diff --git a/src/features/preferences/index.tsx b/src/features/preferences/index.tsx
index f071b9d9c..113f0d6f3 100644
--- a/src/features/preferences/index.tsx
+++ b/src/features/preferences/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { changeSetting } from 'soapbox/actions/settings.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Form } from 'soapbox/components/ui/index.ts';
+import Form from 'soapbox/components/ui/form.tsx';
 import { SelectDropdown } from 'soapbox/features/forms/index.tsx';
 import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
 import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks/index.ts';
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 9ba4f93b0..3717a8a6b 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -7,7 +7,8 @@ import { changeSetting } from 'soapbox/actions/settings.ts';
 import { clearTimeline, expandPublicTimeline } from 'soapbox/actions/timelines.ts';
 import { usePublicStream } from 'soapbox/api/hooks/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
-import { Accordion, Column } from 'soapbox/components/ui/index.ts';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { LanguageDropdown } from 'soapbox/components/ui/language-dropdown.tsx';
 import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme, useFeatures } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx
index f1fb3c7fc..669b142d4 100644
--- a/src/features/quotes/index.tsx
+++ b/src/features/quotes/index.tsx
@@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom';
 
 import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes.ts';
 import StatusList from 'soapbox/components/status-list.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
diff --git a/src/features/remote-timeline/components/pinned-hosts-picker.tsx b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
index d336132ce..9f428f78c 100644
--- a/src/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -1,4 +1,5 @@
-import { Button, HStack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useSettings } from 'soapbox/hooks/index.ts';
 
 interface IPinnedHostsPicker {
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index 4cf967ca9..a9657e177 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -6,7 +6,9 @@ import { useHistory } from 'react-router-dom';
 import { expandRemoteTimeline } from 'soapbox/actions/timelines.ts';
 import { useRemoteStream } from 'soapbox/api/hooks/index.ts';
 import IconButton from 'soapbox/components/icon-button.tsx';
-import { Column, HStack, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
diff --git a/src/features/reply-mentions/account.tsx b/src/features/reply-mentions/account.tsx
index 953c68a9d..793dbcf8b 100644
--- a/src/features/reply-mentions/account.tsx
+++ b/src/features/reply-mentions/account.tsx
@@ -8,7 +8,7 @@ import { addToMentions, removeFromMentions } from 'soapbox/actions/compose.ts';
 import { useAccount } from 'soapbox/api/hooks/index.ts';
 import AccountComponent from 'soapbox/components/account.tsx';
 import IconButton from 'soapbox/components/icon-button.tsx';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 5064458c3..1ddc3ab1d 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -3,7 +3,7 @@ import { Suspense } from 'react';
 
 import { toggleStatusReport } from 'soapbox/actions/reports.ts';
 import StatusContent from 'soapbox/components/status-content.tsx';
-import { Toggle } from 'soapbox/components/ui/index.ts';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import { MediaGallery, Video, Audio } from '../../ui/util/async-components.ts';
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index efcde2db1..d18c14e70 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { cancelScheduledStatus } from 'soapbox/actions/scheduled-statuses.ts';
 import { getSettings } from 'soapbox/actions/settings.ts';
-import { Button, HStack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 3fca855fa..4a79bfe21 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -4,7 +4,8 @@ import Account from 'soapbox/components/account.tsx';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
 import StatusContent from 'soapbox/components/status-content.tsx';
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
-import { HStack, Stack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import PollPreview from 'soapbox/features/ui/components/poll-preview.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/scheduled-statuses/index.tsx b/src/features/scheduled-statuses/index.tsx
index f0ecd2c50..c11040ef2 100644
--- a/src/features/scheduled-statuses/index.tsx
+++ b/src/features/scheduled-statuses/index.tsx
@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled-statuses.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import ScheduledStatus from './components/scheduled-status.tsx';
diff --git a/src/features/search/index.tsx b/src/features/search/index.tsx
index 4b6107355..feaf8b594 100644
--- a/src/features/search/index.tsx
+++ b/src/features/search/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import SearchResults from 'soapbox/features/compose/components/search-results.tsx';
 import Search from 'soapbox/features/compose/components/search.tsx';
 import { useTheme } from 'soapbox/hooks/index.ts';
diff --git a/src/features/security/mfa-form.tsx b/src/features/security/mfa-form.tsx
index e359cfdfa..e9f26e9b2 100644
--- a/src/features/security/mfa-form.tsx
+++ b/src/features/security/mfa-form.tsx
@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { fetchMfa } from 'soapbox/actions/mfa.ts';
-import { Column, Stack } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import DisableOtpForm from './mfa/disable-otp-form.tsx';
diff --git a/src/features/security/mfa/disable-otp-form.tsx b/src/features/security/mfa/disable-otp-form.tsx
index af5bb1c4d..b8fef1f7e 100644
--- a/src/features/security/mfa/disable-otp-form.tsx
+++ b/src/features/security/mfa/disable-otp-form.tsx
@@ -3,7 +3,13 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { disableMfa } from 'soapbox/actions/mfa.ts';
-import { Button, Form, FormGroup, Input, FormActions, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/security/mfa/enable-otp-form.tsx b/src/features/security/mfa/enable-otp-form.tsx
index f143b9460..ee819ac09 100644
--- a/src/features/security/mfa/enable-otp-form.tsx
+++ b/src/features/security/mfa/enable-otp-form.tsx
@@ -3,7 +3,11 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { fetchBackupCodes } from 'soapbox/actions/mfa.ts';
-import { Button, FormActions, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/security/mfa/otp-confirm-form.tsx b/src/features/security/mfa/otp-confirm-form.tsx
index e18e2771f..6100f080b 100644
--- a/src/features/security/mfa/otp-confirm-form.tsx
+++ b/src/features/security/mfa/otp-confirm-form.tsx
@@ -7,7 +7,13 @@ import {
   setupMfa,
   confirmMfa,
 } from 'soapbox/actions/mfa.ts';
-import { Button, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/server-info/index.tsx b/src/features/server-info/index.tsx
index 8b47e5b96..19e1e00bc 100644
--- a/src/features/server-info/index.tsx
+++ b/src/features/server-info/index.tsx
@@ -1,6 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column, Divider, Stack, Text } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useInstance } from 'soapbox/hooks/index.ts';
 
 import LinkFooter from '../ui/components/link-footer.tsx';
diff --git a/src/features/settings/components/messages-settings.tsx b/src/features/settings/components/messages-settings.tsx
index 4a788cb28..ee9812f72 100644
--- a/src/features/settings/components/messages-settings.tsx
+++ b/src/features/settings/components/messages-settings.tsx
@@ -1,7 +1,7 @@
 import { defineMessages, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Toggle } from 'soapbox/components/ui/index.ts';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useOwnAccount } from 'soapbox/hooks/index.ts';
 import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
diff --git a/src/features/settings/index.tsx b/src/features/settings/index.tsx
index 0afae038f..0e725220a 100644
--- a/src/features/settings/index.tsx
+++ b/src/features/settings/index.tsx
@@ -4,7 +4,11 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { fetchMfa } from 'soapbox/actions/mfa.ts';
 import CopyableInput from 'soapbox/components/copyable-input.tsx';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Card, CardBody, CardHeader, CardTitle, Column, Counter, FormGroup, Text } from 'soapbox/components/ui/index.ts';
+import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Counter from 'soapbox/components/ui/counter.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
diff --git a/src/features/soapbox-config/components/crypto-address-input.tsx b/src/features/soapbox-config/components/crypto-address-input.tsx
index c9a0b97d3..33986f6a4 100644
--- a/src/features/soapbox-config/components/crypto-address-input.tsx
+++ b/src/features/soapbox-config/components/crypto-address-input.tsx
@@ -1,6 +1,7 @@
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
 import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 import type { CryptoAddress } from 'soapbox/types/soapbox.ts';
diff --git a/src/features/soapbox-config/components/footer-link-input.tsx b/src/features/soapbox-config/components/footer-link-input.tsx
index 8bd033c47..6a726ae10 100644
--- a/src/features/soapbox-config/components/footer-link-input.tsx
+++ b/src/features/soapbox-config/components/footer-link-input.tsx
@@ -1,6 +1,7 @@
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
 import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 import type { FooterItem } from 'soapbox/types/soapbox.ts';
diff --git a/src/features/soapbox-config/components/icon-picker-menu.tsx b/src/features/soapbox-config/components/icon-picker-menu.tsx
index db2d5f37f..d34116cbb 100644
--- a/src/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/src/features/soapbox-config/components/icon-picker-menu.tsx
@@ -3,7 +3,7 @@ import { supportsPassiveEvents } from 'detect-passive-events';
 import { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
diff --git a/src/features/soapbox-config/components/promo-panel-input.tsx b/src/features/soapbox-config/components/promo-panel-input.tsx
index fc64c6555..2b4affe7c 100644
--- a/src/features/soapbox-config/components/promo-panel-input.tsx
+++ b/src/features/soapbox-config/components/promo-panel-input.tsx
@@ -1,6 +1,7 @@
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
 import IconPicker from './icon-picker.tsx';
 
diff --git a/src/features/soapbox-config/index.tsx b/src/features/soapbox-config/index.tsx
index 2abb04edf..3bd729ab1 100644
--- a/src/features/soapbox-config/index.tsx
+++ b/src/features/soapbox-config/index.tsx
@@ -5,21 +5,18 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { updateSoapboxConfig } from 'soapbox/actions/admin.ts';
 import { uploadMedia } from 'soapbox/actions/media.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import {
-  Accordion,
-  Button,
-  Column,
-  CardHeader,
-  CardTitle,
-  FileInput,
-  Form,
-  FormActions,
-  FormGroup,
-  Input,
-  Streamfield,
-  Textarea,
-  Toggle,
-} from 'soapbox/components/ui/index.ts';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import { Button } from 'soapbox/components/ui/button.tsx';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FileInput from 'soapbox/components/ui/file-input.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Streamfield from 'soapbox/components/ui/streamfield.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector.tsx';
 import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index ad19fb145..50e1a4517 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -12,7 +12,10 @@ import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
 import SensitiveContentOverlay from 'soapbox/components/statuses/sensitive-content-overlay.tsx';
 import StatusInfo from 'soapbox/components/statuses/status-info.tsx';
 import TranslateButton from 'soapbox/components/translate-button.tsx';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
 import { getActualStatus } from 'soapbox/utils/status.ts';
 
diff --git a/src/features/status/components/status-interaction-bar.tsx b/src/features/status/components/status-interaction-bar.tsx
index 8be110c54..430d3e338 100644
--- a/src/features/status/components/status-interaction-bar.tsx
+++ b/src/features/status/components/status-interaction-bar.tsx
@@ -2,7 +2,9 @@ import clsx from 'clsx';import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals.ts';
-import { HStack, Text, Emoji } from 'soapbox/components/ui/index.ts';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector, useSoapboxConfig, useFeatures, useAppDispatch } from 'soapbox/hooks/index.ts';
 import { reduceEmoji } from 'soapbox/utils/emoji-reacts.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
diff --git a/src/features/status/components/thread-login-cta.tsx b/src/features/status/components/thread-login-cta.tsx
index 352be4f54..aa7e98572 100644
--- a/src/features/status/components/thread-login-cta.tsx
+++ b/src/features/status/components/thread-login-cta.tsx
@@ -1,6 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardTitle, Text, Stack, Button } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Card, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 /** Prompts logged-out users to log in when viewing a thread. */
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index 1f9c25862..9a2d8c98e 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -14,7 +14,7 @@ import { hideStatus, revealStatus } from 'soapbox/actions/statuses.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import StatusActionBar from 'soapbox/components/status-action-bar.tsx';
 import Tombstone from 'soapbox/components/tombstone.tsx';
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
 import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
diff --git a/src/features/status/index.tsx b/src/features/status/index.tsx
index 0d664e456..0ce594d0a 100644
--- a/src/features/status/index.tsx
+++ b/src/features/status/index.tsx
@@ -9,7 +9,8 @@ import {
 } from 'soapbox/actions/statuses.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
-import { Column, Stack } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import { useAppDispatch, useAppSelector, useLoggedIn } from 'soapbox/hooks/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index f56751595..f5731a57d 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -9,7 +9,7 @@ import status1 from 'soapbox/__fixtures__/pleroma-status.json';
 import status6 from 'soapbox/__fixtures__/truthsocial-status-in-moderation.json';
 import { importFetchedStatuses } from 'soapbox/actions/importer/index.ts';
 import { expandTimelineSuccess } from 'soapbox/actions/timelines.ts';
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 import Timeline from 'soapbox/features/ui/components/timeline.tsx';
 import { useAppDispatch, useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
diff --git a/src/features/theme-editor/components/palette.tsx b/src/features/theme-editor/components/palette.tsx
index 5033f621e..70d1830e6 100644
--- a/src/features/theme-editor/components/palette.tsx
+++ b/src/features/theme-editor/components/palette.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react';
 
-import { HStack, Stack, Slider } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Slider from 'soapbox/components/ui/slider.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { usePrevious } from 'soapbox/hooks/index.ts';
 import { compareId } from 'soapbox/utils/comparators.ts';
 import { hueShift } from 'soapbox/utils/theme.ts';
diff --git a/src/features/theme-editor/index.tsx b/src/features/theme-editor/index.tsx
index 32f0ca536..95060f712 100644
--- a/src/features/theme-editor/index.tsx
+++ b/src/features/theme-editor/index.tsx
@@ -9,7 +9,10 @@ import { getHost } from 'soapbox/actions/instance.ts';
 import { fetchSoapboxConfig } from 'soapbox/actions/soapbox.ts';
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Button, Column, Form, FormActions } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
 import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker.tsx';
 import { useAppDispatch, useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 387d6fe3a..90495f58c 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -12,7 +12,8 @@ import {
 } from 'soapbox/actions/accounts.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useFollow } from 'soapbox/api/hooks/index.ts';
-import { Button, HStack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppDispatch, useFeatures, useLoggedIn } from 'soapbox/hooks/index.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/column-forbidden.tsx b/src/features/ui/components/column-forbidden.tsx
index 2cd5005c9..f7a2a19a5 100644
--- a/src/features/ui/components/column-forbidden.tsx
+++ b/src/features/ui/components/column-forbidden.tsx
@@ -1,6 +1,6 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
 const messages = defineMessages({
   title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' },
diff --git a/src/features/ui/components/column-loading.tsx b/src/features/ui/components/column-loading.tsx
index 5b98269cb..d163f9333 100644
--- a/src/features/ui/components/column-loading.tsx
+++ b/src/features/ui/components/column-loading.tsx
@@ -1,4 +1,5 @@
-import { Card, CardBody, Spinner } from 'soapbox/components/ui/index.ts';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const ColumnLoading = () => (
   <Card variant='rounded'>
diff --git a/src/features/ui/components/columns-area.tsx b/src/features/ui/components/columns-area.tsx
index 768884ff2..2e63aacef 100644
--- a/src/features/ui/components/columns-area.tsx
+++ b/src/features/ui/components/columns-area.tsx
@@ -1,4 +1,4 @@
-import { Layout } from 'soapbox/components/ui/index.ts';
+import Layout from 'soapbox/components/ui/layout.tsx';
 
 interface IColumnsArea {
   layout: any;
diff --git a/src/features/ui/components/compose-button.tsx b/src/features/ui/components/compose-button.tsx
index a05d80470..02420daf8 100644
--- a/src/features/ui/components/compose-button.tsx
+++ b/src/features/ui/components/compose-button.tsx
@@ -4,7 +4,9 @@ import { useLocation, useRouteMatch } from 'react-router-dom';
 import { groupComposeModal } from 'soapbox/actions/compose.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useGroupLookup } from 'soapbox/api/hooks/index.ts';
-import { Avatar, Button, HStack } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const ComposeButton = () => {
diff --git a/src/features/ui/components/cta-banner.tsx b/src/features/ui/components/cta-banner.tsx
index 36914fcd5..7dd84a37c 100644
--- a/src/features/ui/components/cta-banner.tsx
+++ b/src/features/ui/components/cta-banner.tsx
@@ -1,6 +1,10 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Banner from 'soapbox/components/ui/banner.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector, useInstance, useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const CtaBanner = () => {
diff --git a/src/features/ui/components/error-column.tsx b/src/features/ui/components/error-column.tsx
index 4082eaee4..cdc3dac5e 100644
--- a/src/features/ui/components/error-column.tsx
+++ b/src/features/ui/components/error-column.tsx
@@ -1,7 +1,10 @@
 import refreshIcon from '@tabler/icons/outline/refresh.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column, Stack, Text, IconButton } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { isNetworkError } from 'soapbox/utils/errors.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/floating-action-button.tsx b/src/features/ui/components/floating-action-button.tsx
index 6703c2590..f6e6e2b07 100644
--- a/src/features/ui/components/floating-action-button.tsx
+++ b/src/features/ui/components/floating-action-button.tsx
@@ -6,7 +6,9 @@ import { useLocation, useRouteMatch } from 'react-router-dom';
 import { groupComposeModal } from 'soapbox/actions/compose.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { useGroupLookup } from 'soapbox/api/hooks/index.ts';
-import { Avatar, HStack, Icon } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/funding-panel.tsx b/src/features/ui/components/funding-panel.tsx
index b507d966b..cebc57e7a 100644
--- a/src/features/ui/components/funding-panel.tsx
+++ b/src/features/ui/components/funding-panel.tsx
@@ -2,7 +2,11 @@ import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { fetchPatronInstance } from 'soapbox/actions/patron.ts';
-import { Widget, Button, ProgressBar, Text, Stack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 
 /** Open link in a new tab. */
diff --git a/src/features/ui/components/group-media-panel.tsx b/src/features/ui/components/group-media-panel.tsx
index 697c657e8..f892eab21 100644
--- a/src/features/ui/components/group-media-panel.tsx
+++ b/src/features/ui/components/group-media-panel.tsx
@@ -4,7 +4,9 @@ import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { expandGroupMediaTimeline } from 'soapbox/actions/timelines.ts';
-import { Spinner, Text, Widget } from 'soapbox/components/ui/index.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { getGroupGallery } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/ui/components/instance-info-panel.tsx b/src/features/ui/components/instance-info-panel.tsx
index a0af3e959..a68eb5382 100644
--- a/src/features/ui/components/instance-info-panel.tsx
+++ b/src/features/ui/components/instance-info-panel.tsx
@@ -3,7 +3,7 @@ import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { pinHost, unpinHost } from 'soapbox/actions/remote-timeline.ts';
-import { Widget } from 'soapbox/components/ui/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
 import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/ui/components/instance-moderation-panel.tsx b/src/features/ui/components/instance-moderation-panel.tsx
index 5e5bca2fc..bc801be2e 100644
--- a/src/features/ui/components/instance-moderation-panel.tsx
+++ b/src/features/ui/components/instance-moderation-panel.tsx
@@ -4,7 +4,7 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
-import { Widget } from 'soapbox/components/ui/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import InstanceRestrictions from 'soapbox/features/federation-restrictions/components/instance-restrictions.tsx';
 import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
diff --git a/src/features/ui/components/link-footer.tsx b/src/features/ui/components/link-footer.tsx
index 28e9156a0..5c18fcbc5 100644
--- a/src/features/ui/components/link-footer.tsx
+++ b/src/features/ui/components/link-footer.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { logOut } from 'soapbox/actions/auth.ts';
-import { Text } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
 import emojify from 'soapbox/features/emoji/index.ts';
 import { useSoapboxConfig, useOwnAccount, useFeatures, useAppDispatch } from 'soapbox/hooks/index.ts';
 import sourceCode from 'soapbox/utils/code.ts';
diff --git a/src/features/ui/components/modal-loading.tsx b/src/features/ui/components/modal-loading.tsx
index 70de31f7d..39ade5352 100644
--- a/src/features/ui/components/modal-loading.tsx
+++ b/src/features/ui/components/modal-loading.tsx
@@ -1,4 +1,5 @@
-import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const ModalLoading = () => (
   <Modal>
diff --git a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index e2f89d34d..65d1ec7d9 100644
--- a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -10,7 +10,12 @@ import Account from 'soapbox/components/account.tsx';
 import List, { ListItem } from 'soapbox/components/list.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import OutlineBox from 'soapbox/components/outline-box.tsx';
-import { Button, Text, HStack, Modal, Stack, Toggle } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { getBadges } from 'soapbox/utils/badges.ts';
diff --git a/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx b/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
index de5347336..7ce8973af 100644
--- a/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
@@ -1,6 +1,6 @@
 import { useIntl, defineMessages } from 'react-intl';
 
-import { TagInput } from 'soapbox/components/ui/index.ts';
+import TagInput from 'soapbox/components/ui/tag-input.tsx';
 import { badgeToTag, tagToBadge } from 'soapbox/utils/badges.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 071cc03ce..22f07cc53 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
 import Icon from 'soapbox/components/icon.tsx';
-import { HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
 
 import Motion from '../../util/optional-motion.tsx';
diff --git a/src/features/ui/components/modals/birthdays-modal.tsx b/src/features/ui/components/modals/birthdays-modal.tsx
index b8891e9f3..ca7eca4f5 100644
--- a/src/features/ui/components/modals/birthdays-modal.tsx
+++ b/src/features/ui/components/modals/birthdays-modal.tsx
@@ -1,7 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Account from 'soapbox/features/birthdays/account.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index 88f5f791f..425e8580a 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -2,7 +2,9 @@ import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon.tsx';
-import { Modal, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx b/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
index 749c58824..75e428b56 100644
--- a/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
+++ b/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
@@ -1,7 +1,11 @@
 import { FormattedMessage } from 'react-intl';
 
 import useCaptcha from 'soapbox/api/hooks/captcha/useCaptcha.ts';
-import { Modal, Button, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import { PuzzleCaptcha } from './components/puzzle.tsx';
 
diff --git a/src/features/ui/components/modals/compare-history-modal.tsx b/src/features/ui/components/modals/compare-history-modal.tsx
index 2f0a3b561..929cf312d 100644
--- a/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/src/features/ui/components/modals/compare-history-modal.tsx
@@ -5,7 +5,11 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
 
 import { fetchHistory } from 'soapbox/actions/history.ts';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
-import { HStack, Modal, Spinner, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
 import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/ui/components/modals/component-modal.tsx b/src/features/ui/components/modals/component-modal.tsx
index 87f5aeea6..0ce16f4e7 100644
--- a/src/features/ui/components/modals/component-modal.tsx
+++ b/src/features/ui/components/modals/component-modal.tsx
@@ -1,4 +1,4 @@
-import { Modal } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
 
 interface IComponentModal {
   onClose: (type?: string) => void;
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index d748bddc4..423c37a0b 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -24,8 +24,20 @@ import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location.tsx';
 import LocationSearch from 'soapbox/components/location-search.tsx';
 import { checkEventComposeContent } from 'soapbox/components/modal-root.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
 import { Datetime } from 'soapbox/components/ui/datetime.tsx';
-import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
diff --git a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index c8cb5f5d8..5779ebd3c 100644
--- a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -3,7 +3,8 @@ import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon.tsx';
-import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 interface IUploadButton {
diff --git a/src/features/ui/components/modals/compose-modal.tsx b/src/features/ui/components/modals/compose-modal.tsx
index b6b42de07..f7862633d 100644
--- a/src/features/ui/components/modals/compose-modal.tsx
+++ b/src/features/ui/components/modals/compose-modal.tsx
@@ -7,7 +7,10 @@ import { cancelReplyCompose, setGroupTimelineVisible, uploadCompose } from 'soap
 import { openModal, closeModal } from 'soapbox/actions/modals.ts';
 import { useGroup } from 'soapbox/api/hooks/index.ts';
 import { checkComposeContent } from 'soapbox/components/modal-root.tsx';
-import { HStack, Modal, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles } from 'soapbox/hooks/index.ts';
 
 import ComposeForm from '../../../compose/components/compose-form.tsx';
diff --git a/src/features/ui/components/modals/confirmation-modal.tsx b/src/features/ui/components/modals/confirmation-modal.tsx
index e875a53bc..1572bce76 100644
--- a/src/features/ui/components/modals/confirmation-modal.tsx
+++ b/src/features/ui/components/modals/confirmation-modal.tsx
@@ -2,7 +2,10 @@ import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 
 import type { ButtonThemes } from 'soapbox/components/ui/useButtonStyles.ts';
 
diff --git a/src/features/ui/components/modals/crypto-donate-modal.tsx b/src/features/ui/components/modals/crypto-donate-modal.tsx
index 7958b227c..75c112a1c 100644
--- a/src/features/ui/components/modals/crypto-donate-modal.tsx
+++ b/src/features/ui/components/modals/crypto-donate-modal.tsx
@@ -1,4 +1,4 @@
-import { Modal } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import DetailedCryptoAddress from 'soapbox/features/crypto-donate/components/detailed-crypto-address.tsx';
 
 import type { ICryptoAddress } from '../../../crypto-donate/components/crypto-address.tsx';
diff --git a/src/features/ui/components/modals/dislikes-modal.tsx b/src/features/ui/components/modals/dislikes-modal.tsx
index ef0b24644..9f9cef6ac 100644
--- a/src/features/ui/components/modals/dislikes-modal.tsx
+++ b/src/features/ui/components/modals/dislikes-modal.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchDislikes } from 'soapbox/actions/interactions.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/edit-announcement-modal.tsx b/src/features/ui/components/modals/edit-announcement-modal.tsx
index 017357ca7..0917c664b 100644
--- a/src/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/src/features/ui/components/modals/edit-announcement-modal.tsx
@@ -4,7 +4,14 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { closeModal } from 'soapbox/actions/modals.ts';
 import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements.ts';
 import { Datetime } from 'soapbox/components/ui/datetime.tsx';
-import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'soapbox/components/ui/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 9e4d75686..1a5747820 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -6,7 +6,11 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals.ts';
 import { useBookmarkFolder, useUpdateBookmarkFolder } from 'soapbox/api/hooks/index.ts';
-import { Emoji, HStack, Icon, Input, Modal } from 'soapbox/components/ui/index.ts';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
 import { messages as emojiMessages } from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
 import { useTextField } from 'soapbox/hooks/forms/index.ts';
diff --git a/src/features/ui/components/modals/edit-domain-modal.tsx b/src/features/ui/components/modals/edit-domain-modal.tsx
index 5db681285..788683260 100644
--- a/src/features/ui/components/modals/edit-domain-modal.tsx
+++ b/src/features/ui/components/modals/edit-domain-modal.tsx
@@ -3,7 +3,14 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals.ts';
 import { useDomains } from 'soapbox/api/hooks/admin/index.ts';
-import { Form, FormGroup, HStack, Input, Modal, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { Domain } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/edit-federation-modal.tsx b/src/features/ui/components/modals/edit-federation-modal.tsx
index 4109ded33..3db26ee1b 100644
--- a/src/features/ui/components/modals/edit-federation-modal.tsx
+++ b/src/features/ui/components/modals/edit-federation-modal.tsx
@@ -3,7 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { updateMrf } from 'soapbox/actions/mrf.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Modal, Toggle } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/edit-rule-modal.tsx b/src/features/ui/components/modals/edit-rule-modal.tsx
index c06f29a72..202a78fae 100644
--- a/src/features/ui/components/modals/edit-rule-modal.tsx
+++ b/src/features/ui/components/modals/edit-rule-modal.tsx
@@ -1,7 +1,10 @@
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { useRules } from 'soapbox/api/hooks/admin/index.ts';
-import { Form, FormGroup, Input, Modal } from 'soapbox/components/ui/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import { useTextField } from 'soapbox/hooks/forms/index.ts';
 import { type AdminRule } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/embed-modal.tsx b/src/features/ui/components/modals/embed-modal.tsx
index 4af30118b..525c8b80b 100644
--- a/src/features/ui/components/modals/embed-modal.tsx
+++ b/src/features/ui/components/modals/embed-modal.tsx
@@ -4,7 +4,10 @@ import { FormattedMessage } from 'react-intl';
 import { closeModal } from 'soapbox/actions/modals.ts';
 import CopyableInput from 'soapbox/components/copyable-input.tsx';
 import SafeEmbed from 'soapbox/components/safe-embed.tsx';
-import { Modal, Stack, Text, Divider } from 'soapbox/components/ui/index.ts';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import useEmbed from 'soapbox/queries/embed.ts';
 
diff --git a/src/features/ui/components/modals/event-map-modal.tsx b/src/features/ui/components/modals/event-map-modal.tsx
index 3a441f867..cbaf97624 100644
--- a/src/features/ui/components/modals/event-map-modal.tsx
+++ b/src/features/ui/components/modals/event-map-modal.tsx
@@ -6,7 +6,9 @@ import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 import { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Modal, Stack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/ui/components/modals/event-participants-modal.tsx b/src/features/ui/components/modals/event-participants-modal.tsx
index 5af21c04d..04833d821 100644
--- a/src/features/ui/components/modals/event-participants-modal.tsx
+++ b/src/features/ui/components/modals/event-participants-modal.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchEventParticipations } from 'soapbox/actions/events.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/familiar-followers-modal.tsx b/src/features/ui/components/modals/familiar-followers-modal.tsx
index f45fe7fcc..986815b52 100644
--- a/src/features/ui/components/modals/familiar-followers-modal.tsx
+++ b/src/features/ui/components/modals/familiar-followers-modal.tsx
@@ -2,7 +2,8 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { makeGetAccount } from 'soapbox/selectors/index.ts';
diff --git a/src/features/ui/components/modals/favourites-modal.tsx b/src/features/ui/components/modals/favourites-modal.tsx
index cb72bdf4e..bc3fed538 100644
--- a/src/features/ui/components/modals/favourites-modal.tsx
+++ b/src/features/ui/components/modals/favourites-modal.tsx
@@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchFavourites, expandFavourites } from 'soapbox/actions/interactions.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/hotkeys-modal.tsx b/src/features/ui/components/modals/hotkeys-modal.tsx
index 6413a69f9..79267c8ec 100644
--- a/src/features/ui/components/modals/hotkeys-modal.tsx
+++ b/src/features/ui/components/modals/hotkeys-modal.tsx
@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import { useFeatures } from 'soapbox/hooks/index.ts';
 
 interface IHotkeysModal {
diff --git a/src/features/ui/components/modals/join-event-modal.tsx b/src/features/ui/components/modals/join-event-modal.tsx
index 1b35a40c6..f6062b831 100644
--- a/src/features/ui/components/modals/join-event-modal.tsx
+++ b/src/features/ui/components/modals/join-event-modal.tsx
@@ -3,7 +3,9 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { joinEvent } from 'soapbox/actions/events.ts';
 import { closeModal } from 'soapbox/actions/modals.ts';
-import { FormGroup, Modal, Textarea } from 'soapbox/components/ui/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/modals/landing-page-modal.tsx b/src/features/ui/components/modals/landing-page-modal.tsx
index d68f7b9e5..afac28bde 100644
--- a/src/features/ui/components/modals/landing-page-modal.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.tsx
@@ -3,7 +3,10 @@ import clsx from 'clsx';
 import { defineMessages, useIntl } from 'react-intl';
 
 import SiteLogo from 'soapbox/components/site-logo.tsx';
-import { Text, Button, Icon, Modal } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
index b91cae5a6..0c702a1ff 100644
--- a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
@@ -4,7 +4,8 @@ import { z } from 'zod';
 
 import { HTTPError } from 'soapbox/api/HTTPError.ts';
 import { useCreateGroup, useGroupValidation, type CreateGroupParams } from 'soapbox/api/hooks/index.ts';
-import { Modal, Stack } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useDebounce } from 'soapbox/hooks/index.ts';
 import { type Group } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 9f829ef25..30edde063 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -2,7 +2,12 @@ import linkIcon from '@tabler/icons/outline/link.svg';
 import shareIcon from '@tabler/icons/outline/share.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import toast from 'soapbox/toast.tsx';
 import copy from 'soapbox/utils/copy.ts';
 
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index 0eb8aa412..b9ae0e41a 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -1,7 +1,10 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { CreateGroupParams, useGroupValidation } from 'soapbox/api/hooks/index.ts';
-import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import AvatarPicker from 'soapbox/features/edit-profile/components/avatar-picker.tsx';
 import HeaderPicker from 'soapbox/features/edit-profile/components/header-picker.tsx';
 import GroupTagsField from 'soapbox/features/group/components/group-tags-field.tsx';
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
index ba7eeba25..4c5751e6c 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
@@ -2,7 +2,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { type CreateGroupParams } from 'soapbox/api/hooks/index.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
-import { Form, FormGroup, Stack, Text } from 'soapbox/components/ui/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IPrivacyStep {
   params: CreateGroupParams;
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index a33c8fcec..82ce6fd12 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -15,7 +15,10 @@ import { fetchNext, fetchStatusWithContext } from 'soapbox/actions/statuses.ts';
 import ExtendedVideoPlayer from 'soapbox/components/extended-video-player.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import StatusActionBar from 'soapbox/components/status-action-bar.tsx';
-import { Icon, IconButton, HStack, Stack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import Audio from 'soapbox/features/audio/index.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import Thread from 'soapbox/features/status/components/thread.tsx';
diff --git a/src/features/ui/components/modals/mentions-modal.tsx b/src/features/ui/components/modals/mentions-modal.tsx
index fb7a299f8..2c16a1632 100644
--- a/src/features/ui/components/modals/mentions-modal.tsx
+++ b/src/features/ui/components/modals/mentions-modal.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchStatusWithContext } from 'soapbox/actions/statuses.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
diff --git a/src/features/ui/components/modals/missing-description-modal.tsx b/src/features/ui/components/modals/missing-description-modal.tsx
index 8a6f8b74e..739940815 100644
--- a/src/features/ui/components/modals/missing-description-modal.tsx
+++ b/src/features/ui/components/modals/missing-description-modal.tsx
@@ -1,6 +1,6 @@
 import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
 
 const messages = defineMessages({
   modalTitle: { id: 'missing_description_modal.text', defaultMessage: 'You have not entered a description for all attachments. Continue anyway?' },
diff --git a/src/features/ui/components/modals/mute-modal.tsx b/src/features/ui/components/modals/mute-modal.tsx
index 4892bdcdc..5aa837773 100644
--- a/src/features/ui/components/modals/mute-modal.tsx
+++ b/src/features/ui/components/modals/mute-modal.tsx
@@ -4,7 +4,11 @@ import { muteAccount } from 'soapbox/actions/accounts.ts';
 import { closeModal } from 'soapbox/actions/modals.ts';
 import { toggleHideNotifications, changeMuteDuration } from 'soapbox/actions/mutes.ts';
 import { useAccount } from 'soapbox/api/hooks/index.ts';
-import { Modal, HStack, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import DurationSelector from 'soapbox/features/compose/components/polls/duration-selector.tsx';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
index 004fc13e6..e6cef188b 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
@@ -6,7 +6,12 @@ import { Link } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { nostrExtensionLogIn } from 'soapbox/actions/nostr.ts';
 import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
-import { Button, Stack, Modal, Text, Divider, HStack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import { useAppDispatch, useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
index a49ec88c0..deafd92cc 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
@@ -5,7 +5,13 @@ import { FormattedMessage } from 'react-intl';
 
 import { logInNostr } from 'soapbox/actions/nostr.ts';
 import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
-import { Button, Stack, Modal, Input, FormGroup, Form, Divider } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import { keyring } from 'soapbox/features/nostr/keyring.ts';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
index 1c5027ffe..2fb64bed6 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
@@ -2,7 +2,11 @@ import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
-import { Button, Stack, Modal, Text, Divider } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import NostrExtensionIndicator from '../../nostr-login-modal/components/nostr-extension-indicator.tsx';
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
index 3a925b7d8..e68b0c438 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
@@ -8,7 +8,14 @@ import { fetchAccount } from 'soapbox/actions/accounts.ts';
 import { logInNostr } from 'soapbox/actions/nostr.ts';
 import { closeSidebar } from 'soapbox/actions/sidebar.ts';
 import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
-import { Button, Stack, Modal, FormGroup, Text, Tooltip, HStack, Input } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import { keyring } from 'soapbox/features/nostr/keyring.ts';
 import { useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
index f5e600f92..e4a35e4e4 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
@@ -3,7 +3,9 @@ import { useEffect, useState } from 'react';
 import ReactSwipeableViews from 'react-swipeable-views';
 
 import { endOnboarding } from 'soapbox/actions/onboarding.ts';
-import { Stack, Modal, HStack } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import AvatarSelectionModal from './steps/avatar-step.tsx';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index 20a29574c..a138d89e6 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -5,8 +5,13 @@ import { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { isDefaultAvatar } from 'soapbox/utils/accounts.ts';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index bc7cf2712..95dacc9cf 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -3,8 +3,12 @@ import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Button, Text, FormGroup, Stack, Textarea } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
index 700ee3b70..3913129f6 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
@@ -2,8 +2,11 @@ import confettiIcon from '@tabler/icons/outline/confetti.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { FormattedMessage } from 'react-intl';
 
+import Button from 'soapbox/components/ui/button.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Button, Icon, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const closeIcon = xIcon;
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index d23249f17..0e6b40bae 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -6,8 +6,13 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
 import StillImage from 'soapbox/components/still-image.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index 62c1e0e5a..891e1d055 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -3,8 +3,12 @@ import { useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Button, Stack, Text, FormGroup, Input } from 'soapbox/components/ui/index.ts';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
index aef769faf..e60ce7630 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
@@ -3,8 +3,10 @@ import debounce from 'lodash/debounce';
 import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useOnboardingSuggestions } from 'soapbox/queries/suggestions.ts';
 
diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx
index 7d3d7ecbc..5345d6fb4 100644
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/src/features/ui/components/modals/reactions-modal.tsx
@@ -5,7 +5,10 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Emoji, Modal, Spinner, Tabs } from 'soapbox/components/ui/index.ts';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { ReactionRecord } from 'soapbox/reducers/user-lists.ts';
diff --git a/src/features/ui/components/modals/reblogs-modal.tsx b/src/features/ui/components/modals/reblogs-modal.tsx
index 50bab6101..d2e9670e1 100644
--- a/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/src/features/ui/components/modals/reblogs-modal.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage } from 'react-intl';
 import { fetchReblogs, expandReblogs } from 'soapbox/actions/interactions.ts';
 import { fetchStatus } from 'soapbox/actions/statuses.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Modal, Spinner } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index 248e4fde6..542f48474 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -2,7 +2,7 @@ import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import Account from 'soapbox/features/reply-mentions/account.tsx';
 import { useAppSelector, useCompose, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose.ts';
diff --git a/src/features/ui/components/modals/report-modal/report-modal.tsx b/src/features/ui/components/modals/report-modal/report-modal.tsx
index 166551d41..80a288483 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -10,7 +10,13 @@ import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
 import GroupCard from 'soapbox/components/group-card.tsx';
 import List, { ListItem } from 'soapbox/components/list.tsx';
 import StatusContent from 'soapbox/components/status-content.tsx';
-import { Avatar, HStack, Icon, Modal, ProgressBar, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
 
diff --git a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index 01a355df8..dbdd97fe9 100644
--- a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -2,7 +2,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { ReportableEntities } from 'soapbox/actions/reports.ts';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox.ts';
-import { Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 1512cdede..5fef8ce29 100644
--- a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -5,7 +5,12 @@ import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports.ts';
-import { Button, FormGroup, HStack, Stack, Text, Toggle } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 import StatusCheckBox from 'soapbox/features/report/components/status-check-box.tsx';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 import { getDomain } from 'soapbox/utils/accounts.ts';
diff --git a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 74f733a18..4d1ed814f 100644
--- a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -3,7 +3,10 @@ import { useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeReportComment, changeReportRule, ReportableEntities } from 'soapbox/actions/reports.ts';
-import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index 4e0a0ed0f..1b442e471 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -6,7 +6,12 @@ import { FormattedMessage } from 'react-intl';
 import { bookmark } from 'soapbox/actions/interactions.ts';
 import { useBookmarkFolders } from 'soapbox/api/hooks/index.ts';
 import { RadioGroup, RadioItem } from 'soapbox/components/radio.tsx';
-import { Emoji, HStack, Icon, Modal, Spinner, Stack } from 'soapbox/components/ui/index.ts';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import NewFolderForm from 'soapbox/features/bookmark-folders/components/new-folder-form.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx
index 44a155f7b..13fdab027 100644
--- a/src/features/ui/components/modals/unauthorized-modal.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.tsx
@@ -3,7 +3,12 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { remoteInteraction } from 'soapbox/actions/interactions.ts';
-import { Button, Form, Input, Modal, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector, useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index 016d1dd22..74109a2c6 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -7,8 +7,12 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
 import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Modal, Button, Stack, Avatar, HStack } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
diff --git a/src/features/ui/components/modals/zap-pay-request-modal.tsx b/src/features/ui/components/modals/zap-pay-request-modal.tsx
index 9e32821cb..6da1560ba 100644
--- a/src/features/ui/components/modals/zap-pay-request-modal.tsx
+++ b/src/features/ui/components/modals/zap-pay-request-modal.tsx
@@ -1,6 +1,6 @@
 import React  from 'react';
 
-import { Modal } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import ZapPayRequestForm from 'soapbox/features/zap/components/zap-pay-request-form.tsx';
 
 import type { Status as StatusEntity, Account as AccountEntity   } from 'soapbox/types/entities.ts';
diff --git a/src/features/ui/components/modals/zap-split/display-name-row.tsx b/src/features/ui/components/modals/zap-split/display-name-row.tsx
index 92185eb9a..fa0c2cc45 100644
--- a/src/features/ui/components/modals/zap-split/display-name-row.tsx
+++ b/src/features/ui/components/modals/zap-split/display-name-row.tsx
@@ -1,4 +1,5 @@
-import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { getAcct } from 'soapbox/utils/accounts.ts';
diff --git a/src/features/ui/components/modals/zap-split/zap-split-modal.tsx b/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
index b3f0fd66d..8211a3f9d 100644
--- a/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 
 import { zap } from 'soapbox/actions/interactions.ts';
 import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
-import { Modal } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
 import ZapSplit from 'soapbox/features/ui/components/modals/zap-split/zap-split.tsx';
 import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx
index 3485bf7e8..9a2c1cbc1 100644
--- a/src/features/ui/components/modals/zap-split/zap-split.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split.tsx
@@ -4,7 +4,9 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import Account from 'soapbox/components/account.tsx';
 import CopyableInput from 'soapbox/components/copyable-input.tsx';
-import { Button, Stack, HStack } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/modals/zaps-modal.tsx b/src/features/ui/components/modals/zaps-modal.tsx
index 706cba2da..5c7b0a06d 100644
--- a/src/features/ui/components/modals/zaps-modal.tsx
+++ b/src/features/ui/components/modals/zaps-modal.tsx
@@ -4,7 +4,9 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchZaps, expandZaps } from 'soapbox/actions/interactions.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { Modal, Spinner, Text } from 'soapbox/components/ui/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 1c725b753..b0f43558f 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -9,7 +9,14 @@ import { fetchInstance } from 'soapbox/actions/instance.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { openSidebar } from 'soapbox/actions/sidebar.ts';
 import SiteLogo from 'soapbox/components/site-logo.tsx';
-import { Avatar, Button, Counter, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Counter from 'soapbox/components/ui/counter.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import Search from 'soapbox/features/compose/components/search.tsx';
 import { useAppDispatch, useFeatures, useInstance, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
diff --git a/src/features/ui/components/new-account-zap-split.tsx b/src/features/ui/components/new-account-zap-split.tsx
index 13b787b9d..d348dcb71 100644
--- a/src/features/ui/components/new-account-zap-split.tsx
+++ b/src/features/ui/components/new-account-zap-split.tsx
@@ -4,7 +4,10 @@ import { FormattedMessage } from 'react-intl';
 
 import Account from 'soapbox/components/account.tsx';
 import { ListItem } from 'soapbox/components/list.tsx';
-import { Button, HStack, Input, Slider } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Slider from 'soapbox/components/ui/slider.tsx';
 import SearchZapSplit from 'soapbox/features/compose/components/search-zap-split.tsx';
 import { type Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
diff --git a/src/features/ui/components/panels/account-note-panel.tsx b/src/features/ui/components/panels/account-note-panel.tsx
index e5c7164f4..8c4911da4 100644
--- a/src/features/ui/components/panels/account-note-panel.tsx
+++ b/src/features/ui/components/panels/account-note-panel.tsx
@@ -3,7 +3,10 @@ import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { submitAccountNote } from 'soapbox/actions/account-notes.ts';
-import { HStack, Text, Textarea, Widget } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/panels/my-groups-panel.tsx b/src/features/ui/components/panels/my-groups-panel.tsx
index 6f75f3d49..369c319a7 100644
--- a/src/features/ui/components/panels/my-groups-panel.tsx
+++ b/src/features/ui/components/panels/my-groups-panel.tsx
@@ -1,5 +1,5 @@
 import { useGroups } from 'soapbox/api/hooks/index.ts';
-import { Widget } from 'soapbox/components/ui/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item.tsx';
 import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
 
diff --git a/src/features/ui/components/panels/new-event-panel.tsx b/src/features/ui/components/panels/new-event-panel.tsx
index f055ca26d..6785c6d49 100644
--- a/src/features/ui/components/panels/new-event-panel.tsx
+++ b/src/features/ui/components/panels/new-event-panel.tsx
@@ -2,7 +2,9 @@ import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
-import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 const NewEventPanel = () => {
diff --git a/src/features/ui/components/panels/new-group-panel.tsx b/src/features/ui/components/panels/new-group-panel.tsx
index 51b95500e..58fd5ae62 100644
--- a/src/features/ui/components/panels/new-group-panel.tsx
+++ b/src/features/ui/components/panels/new-group-panel.tsx
@@ -1,7 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
-import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions.ts';
 
diff --git a/src/features/ui/components/panels/sign-up-panel.tsx b/src/features/ui/components/panels/sign-up-panel.tsx
index b576b605c..f8ebd07a8 100644
--- a/src/features/ui/components/panels/sign-up-panel.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.tsx
@@ -1,7 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
-import { Button, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch, useAppSelector, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
 
 const SignUpPanel = () => {
diff --git a/src/features/ui/components/panels/suggested-groups-panel.tsx b/src/features/ui/components/panels/suggested-groups-panel.tsx
index 9e1144a3b..c2bd2fd51 100644
--- a/src/features/ui/components/panels/suggested-groups-panel.tsx
+++ b/src/features/ui/components/panels/suggested-groups-panel.tsx
@@ -1,5 +1,5 @@
 import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
-import { Widget } from 'soapbox/components/ui/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item.tsx';
 import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
 
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 80f7bf8f6..6f8aee242 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -3,7 +3,9 @@ import clsx from 'clsx';
 import Account from 'soapbox/components/account.tsx';
 import StatusContent from 'soapbox/components/status-content.tsx';
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
-import { Card, HStack, Stack } from 'soapbox/components/ui/index.ts';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card.tsx';
 import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder-media-gallery.tsx';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
diff --git a/src/features/ui/components/pinned-accounts-panel.tsx b/src/features/ui/components/pinned-accounts-panel.tsx
index 254130647..f96189c13 100644
--- a/src/features/ui/components/pinned-accounts-panel.tsx
+++ b/src/features/ui/components/pinned-accounts-panel.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 
 import { fetchPinnedAccounts } from 'soapbox/actions/accounts.ts';
-import { Widget } from 'soapbox/components/ui/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
diff --git a/src/features/ui/components/poll-preview.tsx b/src/features/ui/components/poll-preview.tsx
index 80cbc2f23..eb3da5a97 100644
--- a/src/features/ui/components/poll-preview.tsx
+++ b/src/features/ui/components/poll-preview.tsx
@@ -1,7 +1,7 @@
 import noop from 'lodash/noop';
 
 import PollOption from 'soapbox/components/polls/poll-option.tsx';
-import { Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { Poll as PollEntity } from 'soapbox/types/entities.ts';
 
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index a85d3f129..b80b26e57 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
 
 import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth.ts';
 import Account from 'soapbox/components/account.tsx';
-import { MenuDivider } from 'soapbox/components/ui/index.ts';
+import { MenuDivider } from 'soapbox/components/ui/menu.tsx';
 import { useAppDispatch, useAppSelector, useClickOutside, useFeatures } from 'soapbox/hooks/index.ts';
 import { makeGetOtherAccounts } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/ui/components/profile-familiar-followers.tsx b/src/features/ui/components/profile-familiar-followers.tsx
index 9e5744eb8..f10b00b5b 100644
--- a/src/features/ui/components/profile-familiar-followers.tsx
+++ b/src/features/ui/components/profile-familiar-followers.tsx
@@ -7,7 +7,8 @@ import { fetchAccountFamiliarFollowers } from 'soapbox/actions/familiar-follower
 import { openModal } from 'soapbox/actions/modals.ts';
 import AvatarStack from 'soapbox/components/avatar-stack.tsx';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
-import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 import { makeGetAccount } from 'soapbox/selectors/index.ts';
diff --git a/src/features/ui/components/profile-field.tsx b/src/features/ui/components/profile-field.tsx
index 9b8a43414..b590bcf2e 100644
--- a/src/features/ui/components/profile-field.tsx
+++ b/src/features/ui/components/profile-field.tsx
@@ -4,7 +4,8 @@ import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
 
 
 import Markup from 'soapbox/components/markup.tsx';
-import { HStack, Icon } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 import { CryptoAddress, LightningAddress } from 'soapbox/features/ui/util/async-components.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/profile-fields-panel.tsx b/src/features/ui/components/profile-fields-panel.tsx
index cc29628f8..586886f49 100644
--- a/src/features/ui/components/profile-fields-panel.tsx
+++ b/src/features/ui/components/profile-fields-panel.tsx
@@ -1,6 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
-import { Widget, Stack } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 
 import ProfileField from './profile-field.tsx';
 
diff --git a/src/features/ui/components/profile-info-panel.tsx b/src/features/ui/components/profile-info-panel.tsx
index 9076be97b..208883631 100644
--- a/src/features/ui/components/profile-info-panel.tsx
+++ b/src/features/ui/components/profile-info-panel.tsx
@@ -9,7 +9,10 @@ import { usePatronUser } from 'soapbox/api/hooks/index.ts';
 import Badge from 'soapbox/components/badge.tsx';
 import Markup from 'soapbox/components/markup.tsx';
 import { dateFormatOptions } from 'soapbox/components/relative-timestamp.tsx';
-import { Icon, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 import { capitalize } from 'soapbox/utils/strings.ts';
 
diff --git a/src/features/ui/components/profile-media-panel.tsx b/src/features/ui/components/profile-media-panel.tsx
index 9433d1b4c..a1d002dda 100644
--- a/src/features/ui/components/profile-media-panel.tsx
+++ b/src/features/ui/components/profile-media-panel.tsx
@@ -4,7 +4,9 @@ import { FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { expandAccountMediaTimeline } from 'soapbox/actions/timelines.ts';
-import { Spinner, Text, Widget } from 'soapbox/components/ui/index.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
 import { getAccountGallery } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/ui/components/profile-stats.tsx b/src/features/ui/components/profile-stats.tsx
index 8d306dbb0..4e12ce16b 100644
--- a/src/features/ui/components/profile-stats.tsx
+++ b/src/features/ui/components/profile-stats.tsx
@@ -1,7 +1,8 @@
 import { useIntl, defineMessages } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
-import { HStack, Text } from 'soapbox/components/ui/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/promo-panel.tsx b/src/features/ui/components/promo-panel.tsx
index 0ccb03b47..49fd6fb97 100644
--- a/src/features/ui/components/promo-panel.tsx
+++ b/src/features/ui/components/promo-panel.tsx
@@ -1,5 +1,7 @@
 import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon.tsx';
-import { Widget, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
 
 const PromoPanel: React.FC = () => {
diff --git a/src/features/ui/components/subscription-button.tsx b/src/features/ui/components/subscription-button.tsx
index a5f09544d..ba8c0ad18 100644
--- a/src/features/ui/components/subscription-button.tsx
+++ b/src/features/ui/components/subscription-button.tsx
@@ -7,7 +7,7 @@ import {
   unsubscribeAccount,
 } from 'soapbox/actions/accounts.ts';
 import { useFollow } from 'soapbox/api/hooks/index.ts';
-import { IconButton } from 'soapbox/components/ui/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index e778fe25e..a4fceeb63 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -6,7 +6,8 @@ import sunIcon from '@tabler/icons/outline/sun.svg';
 import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Select } from 'soapbox/components/ui/index.ts';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
 
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
diff --git a/src/features/ui/components/timeline.tsx b/src/features/ui/components/timeline.tsx
index b454f670f..1efd40dba 100644
--- a/src/features/ui/components/timeline.tsx
+++ b/src/features/ui/components/timeline.tsx
@@ -6,7 +6,7 @@ import { defineMessages } from 'react-intl';
 import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines.ts';
 import ScrollTopButton from 'soapbox/components/scroll-top-button.tsx';
 import StatusList, { IStatusList } from 'soapbox/components/status-list.tsx';
-import { Portal } from 'soapbox/components/ui/index.ts';
+import Portal from 'soapbox/components/ui/portal.tsx';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
 import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/ui/components/trends-panel.tsx b/src/features/ui/components/trends-panel.tsx
index cb3842b80..a1b4c3a4d 100644
--- a/src/features/ui/components/trends-panel.tsx
+++ b/src/features/ui/components/trends-panel.tsx
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 
 import { setFilter } from 'soapbox/actions/search.ts';
 import Hashtag from 'soapbox/components/hashtag.tsx';
-import { Text, Widget } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import PlaceholderSidebarTrends from 'soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 import useTrends from 'soapbox/queries/trends.ts';
diff --git a/src/features/ui/components/user-panel.tsx b/src/features/ui/components/user-panel.tsx
index ffbfd71e2..47543233c 100644
--- a/src/features/ui/components/user-panel.tsx
+++ b/src/features/ui/components/user-panel.tsx
@@ -3,7 +3,10 @@ import { Link } from 'react-router-dom';
 
 import { useAccount } from 'soapbox/api/hooks/index.ts';
 import StillImage from 'soapbox/components/still-image.tsx';
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { getAcct } from 'soapbox/utils/accounts.ts';
diff --git a/src/features/ui/components/who-to-follow-panel.tsx b/src/features/ui/components/who-to-follow-panel.tsx
index fb2575afc..3f763d46d 100644
--- a/src/features/ui/components/who-to-follow-panel.tsx
+++ b/src/features/ui/components/who-to-follow-panel.tsx
@@ -2,7 +2,8 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text, Widget } from 'soapbox/components/ui/index.ts';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import PlaceholderSidebarSuggestions from 'soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx';
 import { useOwnAccount } from 'soapbox/hooks/index.ts';
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index d067713c5..57c2e5342 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -15,7 +15,7 @@ import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
 import { useUserStream } from 'soapbox/api/hooks/index.ts';
 import SidebarNavigation from 'soapbox/components/sidebar-navigation.tsx';
 import ThumbNavigation from 'soapbox/components/thumb-navigation.tsx';
-import { Layout } from 'soapbox/components/ui/index.ts';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles, useInstance, useLoggedIn, useApi } from 'soapbox/hooks/index.ts';
 import AdminPage from 'soapbox/pages/admin-page.tsx';
 import ChatsPage from 'soapbox/pages/chats-page.tsx';
diff --git a/src/features/ui/util/react-router-helpers.tsx b/src/features/ui/util/react-router-helpers.tsx
index e09a9350f..13c9f29f1 100644
--- a/src/features/ui/util/react-router-helpers.tsx
+++ b/src/features/ui/util/react-router-helpers.tsx
@@ -2,7 +2,7 @@ import { Suspense, useEffect, useRef } from 'react';
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType, useLocation } from 'react-router-dom';
 
-import { Layout } from 'soapbox/components/ui/index.ts';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import { useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
 
 import ColumnForbidden from '../components/column-forbidden.tsx';
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index ca12d56c7..9575c3cc2 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -14,9 +14,13 @@ import coinIcon from 'soapbox/assets/icons/coin.png';
 import moneyBag from 'soapbox/assets/icons/money-bag.png';
 import pileCoin from 'soapbox/assets/icons/pile-coin.png';
 import DisplayNameInline from 'soapbox/components/display-name-inline.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { Stack, Button, Input, Avatar, Text } from 'soapbox/components/ui/index.ts';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/index.ts';
 
 import ZapButton from './zap-button/zap-button.tsx';
diff --git a/src/features/zap/components/zap-split-account-item.tsx b/src/features/zap/components/zap-split-account-item.tsx
index 3f3029240..f711f3a32 100644
--- a/src/features/zap/components/zap-split-account-item.tsx
+++ b/src/features/zap/components/zap-split-account-item.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import { Slider } from 'soapbox/components/ui/index.ts';
+import Slider from 'soapbox/components/ui/slider.tsx';
 
 const formattedWeight = (weight: number) =>{
   return Number((weight * 100).toFixed());
diff --git a/src/pages/admin-page.tsx b/src/pages/admin-page.tsx
index 58becb6b7..73b923ff6 100644
--- a/src/pages/admin-page.tsx
+++ b/src/pages/admin-page.tsx
@@ -1,4 +1,4 @@
-import { Layout } from 'soapbox/components/ui/index.ts';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import {
   LatestAccountsPanel,
 } from 'soapbox/features/ui/util/async-components.ts';
diff --git a/src/pages/default-page.tsx b/src/pages/default-page.tsx
index 2a923c41b..f2d9dc36b 100644
--- a/src/pages/default-page.tsx
+++ b/src/pages/default-page.tsx
@@ -1,3 +1,4 @@
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
@@ -7,8 +8,6 @@ import {
 } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Layout } from '../components/ui/index.ts';
-
 interface IDefaultPage {
   children: React.ReactNode;
 }
diff --git a/src/pages/empty-page.tsx b/src/pages/empty-page.tsx
index 2bb3b644e..f566e9733 100644
--- a/src/pages/empty-page.tsx
+++ b/src/pages/empty-page.tsx
@@ -1,4 +1,4 @@
-import { Layout } from '../components/ui/index.ts';
+import Layout from 'soapbox/components/ui/layout.tsx';
 
 interface IEmptyPage {
   children: React.ReactNode;
diff --git a/src/pages/event-page.tsx b/src/pages/event-page.tsx
index 6ce225280..23aaf7b4d 100644
--- a/src/pages/event-page.tsx
+++ b/src/pages/event-page.tsx
@@ -1,7 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Column, Layout, Tabs } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
diff --git a/src/pages/events-page.tsx b/src/pages/events-page.tsx
index 836c9f262..f2a4ea557 100644
--- a/src/pages/events-page.tsx
+++ b/src/pages/events-page.tsx
@@ -1,4 +1,4 @@
-import { Layout } from 'soapbox/components/ui/index.ts';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
diff --git a/src/pages/group-page.tsx b/src/pages/group-page.tsx
index 45bf81e0a..88f7080ef 100644
--- a/src/pages/group-page.tsx
+++ b/src/pages/group-page.tsx
@@ -6,7 +6,12 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
 import { useGroup, useGroupMembershipRequests } from 'soapbox/api/hooks/index.ts';
-import { Column, Icon, Layout, Stack, Text, Tabs } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 import GroupHeader from 'soapbox/features/group/components/group-header.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
diff --git a/src/pages/groups-page.tsx b/src/pages/groups-page.tsx
index b41623cf8..ba895f9a9 100644
--- a/src/pages/groups-page.tsx
+++ b/src/pages/groups-page.tsx
@@ -1,7 +1,7 @@
 import { Route, Routes } from 'react-router-dom-v5-compat';
 
-
-import { Column, Layout } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import { MyGroupsPanel, NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components.ts';
 
diff --git a/src/pages/groups-pending-page.tsx b/src/pages/groups-pending-page.tsx
index ffef37080..8236f613f 100644
--- a/src/pages/groups-pending-page.tsx
+++ b/src/pages/groups-pending-page.tsx
@@ -1,5 +1,5 @@
 
-import { Layout } from 'soapbox/components/ui/index.ts';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import { NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components.ts';
 
diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx
index fa4df0ba4..24090b5aa 100644
--- a/src/pages/home-page.tsx
+++ b/src/pages/home-page.tsx
@@ -4,6 +4,10 @@ import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { uploadCompose } from 'soapbox/actions/compose.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
@@ -19,7 +23,7 @@ import {
 import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDraggedFiles, useAppDispatch } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 
-import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui/index.ts';
+
 import ComposeForm from '../features/compose/components/compose-form.tsx';
 
 interface IHomePage {
diff --git a/src/pages/landing-page.tsx b/src/pages/landing-page.tsx
index 0bcb71233..195943dba 100644
--- a/src/pages/landing-page.tsx
+++ b/src/pages/landing-page.tsx
@@ -1,3 +1,4 @@
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   TrendsPanel,
@@ -7,8 +8,6 @@ import {
 } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Layout } from '../components/ui/index.ts';
-
 interface ILandingPage {
   children: React.ReactNode;
 }
diff --git a/src/pages/manage-groups-page.tsx b/src/pages/manage-groups-page.tsx
index 360ed7967..dc7b7cf74 100644
--- a/src/pages/manage-groups-page.tsx
+++ b/src/pages/manage-groups-page.tsx
@@ -1,5 +1,5 @@
 
-import { Layout } from 'soapbox/components/ui/index.ts';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import { MyGroupsPanel, NewGroupPanel } from 'soapbox/features/ui/util/async-components.ts';
 
diff --git a/src/pages/profile-page.tsx b/src/pages/profile-page.tsx
index 7067560d4..6f4d41388 100644
--- a/src/pages/profile-page.tsx
+++ b/src/pages/profile-page.tsx
@@ -2,7 +2,9 @@ import { FormattedMessage } from 'react-intl';
 import { Redirect, useHistory } from 'react-router-dom';
 
 import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
-import { Column, Layout, Tabs } from 'soapbox/components/ui/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 import Header from 'soapbox/features/account/components/header.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
diff --git a/src/pages/remote-instance-page.tsx b/src/pages/remote-instance-page.tsx
index cc5ee1355..043125c9a 100644
--- a/src/pages/remote-instance-page.tsx
+++ b/src/pages/remote-instance-page.tsx
@@ -1,3 +1,4 @@
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   PromoPanel,
@@ -7,8 +8,6 @@ import {
 import { useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
 import { federationRestrictionsDisclosed } from 'soapbox/utils/state.ts';
 
-import { Layout } from '../components/ui/index.ts';
-
 interface IRemoteInstancePage {
   params?: {
     instance?: string;
diff --git a/src/pages/search-page.tsx b/src/pages/search-page.tsx
index 071fa9f72..ac372c6cb 100644
--- a/src/pages/search-page.tsx
+++ b/src/pages/search-page.tsx
@@ -1,3 +1,4 @@
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
@@ -8,8 +9,6 @@ import {
 } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Layout } from '../components/ui/index.ts';
-
 interface ISearchPage {
   children: React.ReactNode;
 }
diff --git a/src/pages/status-page.tsx b/src/pages/status-page.tsx
index a2c7fa83d..a63a983c8 100644
--- a/src/pages/status-page.tsx
+++ b/src/pages/status-page.tsx
@@ -1,3 +1,4 @@
+import Layout from 'soapbox/components/ui/layout.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
@@ -7,8 +8,6 @@ import {
 } from 'soapbox/features/ui/util/async-components.ts';
 import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
 
-import { Layout } from '../components/ui/index.ts';
-
 interface IStatusPage {
   children: React.ReactNode;
 }
diff --git a/src/toast.tsx b/src/toast.tsx
index f3050ad28..1c707048a 100644
--- a/src/toast.tsx
+++ b/src/toast.tsx
@@ -2,8 +2,8 @@ import { AxiosError } from 'axios';
 import toast from 'react-hot-toast';
 import { defineMessages, MessageDescriptor } from 'react-intl';
 
-import { Toast } from './components/ui/index.ts';
-import { httpErrorMessages } from './utils/errors.ts';
+import Toast from 'soapbox/components/ui/toast.tsx';
+import { httpErrorMessages } from 'soapbox/utils/errors.ts';
 
 export type ToastText = string | MessageDescriptor
 export type ToastType = 'success' | 'error' | 'info'

From 0c228e13f33322767df4cb7dae1b1dbbeb3eb7b2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 15:18:44 -0600
Subject: [PATCH 085/133] Remove src/hooks barrel export

---
 src/api/hooks/accounts/useAccount.ts          |  4 ++-
 src/api/hooks/accounts/useAccountList.ts      |  2 +-
 src/api/hooks/accounts/useAccountLookup.ts    |  4 ++-
 src/api/hooks/accounts/useFollow.ts           |  4 ++-
 src/api/hooks/accounts/usePatronUser.ts       |  2 +-
 src/api/hooks/accounts/useRelationship.ts     |  2 +-
 src/api/hooks/accounts/useRelationships.ts    |  3 ++-
 src/api/hooks/admin/useAdminAccounts.ts       |  2 +-
 src/api/hooks/admin/useAnnouncements.ts       |  2 +-
 src/api/hooks/admin/useCreateDomain.ts        |  2 +-
 src/api/hooks/admin/useDeleteDomain.ts        |  2 +-
 src/api/hooks/admin/useDomains.ts             |  2 +-
 src/api/hooks/admin/useManageZapSplit.ts      |  2 +-
 src/api/hooks/admin/useModerationLog.ts       |  2 +-
 src/api/hooks/admin/useRelays.ts              |  2 +-
 src/api/hooks/admin/useRules.ts               |  2 +-
 src/api/hooks/admin/useSuggest.ts             |  3 ++-
 src/api/hooks/admin/useUpdateDomain.ts        |  2 +-
 src/api/hooks/admin/useVerify.ts              |  3 ++-
 .../hooks/announcements/useAnnouncements.ts   |  2 +-
 src/api/hooks/captcha/useCaptcha.ts           |  4 ++-
 .../groups/useCancelMembershipRequest.ts      |  3 ++-
 src/api/hooks/groups/useDeleteGroupStatus.ts  |  2 +-
 src/api/hooks/groups/useGroup.ts              |  2 +-
 .../groups/useGroupMembershipRequests.ts      |  2 +-
 src/api/hooks/groups/useGroupMutes.ts         |  2 +-
 src/api/hooks/groups/useGroupRelationship.ts  |  2 +-
 src/api/hooks/groups/useGroupRelationships.ts |  3 ++-
 src/api/hooks/groups/useGroupSearch.ts        |  3 ++-
 src/api/hooks/groups/useGroupTag.ts           |  2 +-
 src/api/hooks/groups/useGroups.ts             |  2 +-
 src/api/hooks/groups/useGroupsFromTag.ts      |  3 ++-
 src/api/hooks/groups/usePendingGroups.ts      |  4 ++-
 src/api/hooks/groups/usePopularTags.ts        |  3 ++-
 src/api/hooks/groups/useSuggestedGroups.ts    |  3 ++-
 src/api/hooks/instance/useInstanceV1.ts       |  2 +-
 src/api/hooks/instance/useInstanceV2.ts       |  2 +-
 src/api/hooks/statuses/useBookmarkFolder.ts   |  2 +-
 src/api/hooks/statuses/useBookmarkFolders.ts  |  2 +-
 .../hooks/statuses/useCreateBookmarkFolder.ts |  2 +-
 .../hooks/statuses/useUpdateBookmarkFolder.ts |  2 +-
 src/api/hooks/streaming/useListStream.ts      |  2 +-
 src/api/hooks/streaming/useTimelineStream.ts  |  4 ++-
 src/api/hooks/streaming/useUserStream.ts      |  2 +-
 src/api/hooks/zap-split/useZapSplit.ts        |  2 +-
 src/components/account.tsx                    |  2 +-
 src/components/animated-number.tsx            |  2 +-
 src/components/announcements/announcement.tsx |  2 +-
 .../announcements/announcements-panel.tsx     |  2 +-
 src/components/announcements/emoji.tsx        |  2 +-
 .../announcements/reactions-bar.tsx           |  2 +-
 src/components/attachment-thumbs.tsx          |  2 +-
 src/components/autosuggest-account-input.tsx  |  2 +-
 src/components/autosuggest-location.tsx       |  2 +-
 src/components/avatar-stack.tsx               |  2 +-
 src/components/birthday-input.tsx             |  3 ++-
 src/components/birthday-panel.tsx             |  3 ++-
 src/components/display-name-inline.tsx        |  2 +-
 src/components/display-name.tsx               |  2 +-
 src/components/domain.tsx                     |  2 +-
 .../dropdown-menu/dropdown-menu.tsx           |  2 +-
 src/components/event-preview.tsx              |  2 +-
 src/components/gdpr-banner.tsx                |  3 ++-
 src/components/helmet.tsx                     |  4 ++-
 src/components/hover-ref-wrapper.tsx          |  2 +-
 src/components/location-search.tsx            |  2 +-
 src/components/media-gallery.tsx              |  3 ++-
 src/components/modal-root.tsx                 |  3 ++-
 src/components/navlinks.tsx                   |  3 ++-
 src/components/polls/poll-footer.tsx          |  2 +-
 src/components/polls/poll.tsx                 |  3 ++-
 src/components/profile-hover-card.tsx         |  3 ++-
 src/components/quoted-status-indicator.tsx    |  2 +-
 src/components/quoted-status.tsx              |  2 +-
 src/components/scroll-top-button.tsx          |  2 +-
 src/components/scrollable-list.tsx            |  2 +-
 src/components/sentry-feedback-form.tsx       |  2 +-
 src/components/sidebar-menu.tsx               |  5 +++-
 src/components/sidebar-navigation.tsx         |  6 ++++-
 src/components/site-error-boundary.tsx        |  2 +-
 src/components/site-logo.tsx                  |  4 ++-
 src/components/status-action-bar.tsx          |  7 +++++-
 src/components/status-hover-card.tsx          |  3 ++-
 src/components/status-list.tsx                |  2 +-
 src/components/status-media.tsx               |  2 +-
 src/components/status-reaction-wrapper.tsx    |  5 +++-
 src/components/status-reply-mentions.tsx      |  2 +-
 src/components/status.tsx                     |  3 ++-
 .../statuses/sensitive-content-overlay.tsx    |  5 +++-
 src/components/still-image.tsx                |  2 +-
 src/components/thumb-navigation.tsx           |  4 ++-
 src/components/translate-button.tsx           |  5 +++-
 src/components/ui/carousel.tsx                |  2 +-
 src/components/ui/column.tsx                  |  2 +-
 src/components/ui/emoji-selector.tsx          |  4 ++-
 src/components/ui/input.tsx                   |  2 +-
 src/components/ui/language-dropdown.tsx       |  2 +-
 src/components/ui/textarea.tsx                |  2 +-
 src/components/upload.tsx                     |  3 ++-
 src/components/verification-badge.tsx         |  2 +-
 src/containers/status-container.tsx           |  2 +-
 src/contexts/chat-context.tsx                 |  4 ++-
 src/entity-store/selectors.ts                 |  2 +-
 src/features/about/index.tsx                  |  4 ++-
 .../account-gallery/components/media-item.tsx |  2 +-
 src/features/account-gallery/index.tsx        |  3 ++-
 src/features/account-timeline/index.tsx       |  6 ++++-
 src/features/account/components/header.tsx    |  5 +++-
 src/features/admin/announcements.tsx          |  2 +-
 src/features/admin/components/admin-tabs.tsx  |  2 +-
 .../components/registration-mode-picker.tsx   |  3 ++-
 .../admin/components/report-status.tsx        |  2 +-
 src/features/admin/components/report.tsx      |  3 ++-
 .../admin/components/unapproved-account.tsx   |  3 ++-
 src/features/admin/domains.tsx                |  2 +-
 .../admin/hooks/useAdminNostrRelays.ts        |  2 +-
 src/features/admin/index.tsx                  |  2 +-
 src/features/admin/nostr-relays.tsx           |  2 +-
 src/features/admin/rules.tsx                  |  2 +-
 src/features/admin/tabs/awaiting-approval.tsx |  3 ++-
 src/features/admin/tabs/dashboard.tsx         |  4 ++-
 src/features/admin/tabs/reports.tsx           |  3 ++-
 src/features/aliases/components/account.tsx   |  4 ++-
 src/features/aliases/components/search.tsx    |  3 ++-
 src/features/aliases/index.tsx                |  5 +++-
 .../auth-login/components/captcha.tsx         |  2 +-
 .../auth-login/components/consumer-button.tsx |  2 +-
 .../auth-login/components/consumers-list.tsx  |  2 +-
 .../auth-login/components/login-form.tsx      |  2 +-
 .../auth-login/components/login-page.tsx      |  5 +++-
 .../auth-login/components/otp-auth-form.tsx   |  2 +-
 .../components/password-reset-confirm.tsx     |  2 +-
 .../auth-login/components/password-reset.tsx  |  3 ++-
 .../components/registration-form.tsx          |  5 +++-
 .../components/registration-page.tsx          |  5 +++-
 src/features/auth-token-list/index.tsx        |  3 ++-
 src/features/backups/index.tsx                |  3 ++-
 src/features/bookmark-folders/index.tsx       |  2 +-
 src/features/bookmarks/index.tsx              |  4 ++-
 .../chats/components/chat-composer.tsx        |  4 ++-
 .../chats/components/chat-list-item.tsx       |  4 ++-
 src/features/chats/components/chat-list.tsx   |  2 +-
 .../components/chat-message-list-intro.tsx    |  3 ++-
 .../chats/components/chat-message-list.tsx    |  3 ++-
 .../chats/components/chat-message.tsx         |  4 ++-
 .../chats/components/chat-page/chat-page.tsx  |  2 +-
 .../chat-page/components/chat-page-main.tsx   |  4 ++-
 .../components/chat-page-settings.tsx         |  4 ++-
 .../components/chat-page-sidebar.tsx          |  3 ++-
 .../chat-page/components/welcome.tsx          |  2 +-
 .../chats/components/chat-pane/chat-pane.tsx  |  3 ++-
 .../components/chat-search/chat-search.tsx    |  2 +-
 src/features/chats/components/chat-upload.tsx |  2 +-
 .../components/chat-widget/chat-settings.tsx  |  4 ++-
 .../components/chat-widget/chat-widget.tsx    |  2 +-
 src/features/chats/components/chat.tsx        |  3 ++-
 src/features/community-timeline/index.tsx     |  6 ++++-
 .../compose/components/compose-form.tsx       |  8 +++++-
 .../compose/components/markdown-button.tsx    |  3 ++-
 .../compose/components/poll-button.tsx        |  3 ++-
 .../compose/components/polls/poll-form.tsx    |  4 ++-
 .../compose/components/privacy-dropdown.tsx   |  3 ++-
 .../components/reply-group-indicator.tsx      |  2 +-
 .../compose/components/reply-mentions.tsx     |  6 ++++-
 .../compose/components/schedule-button.tsx    |  3 ++-
 .../compose/components/schedule-form.tsx      |  3 ++-
 .../compose/components/search-results.tsx     |  3 ++-
 .../compose/components/search-zap-split.tsx   |  3 ++-
 src/features/compose/components/search.tsx    |  3 ++-
 .../compose/components/spoiler-button.tsx     |  3 ++-
 .../compose/components/spoiler-input.tsx      |  3 ++-
 .../compose/components/upload-button.tsx      |  2 +-
 .../compose/components/upload-form.tsx        |  3 ++-
 .../compose/components/upload-progress.tsx    |  2 +-
 src/features/compose/components/upload.tsx    |  4 ++-
 .../containers/quoted-status-container.tsx    |  3 ++-
 .../compose/containers/warning-container.tsx  |  6 ++++-
 src/features/compose/editor/index.tsx         |  2 +-
 .../editor/plugins/autosuggest-plugin.tsx     |  3 ++-
 .../compose/editor/plugins/state-plugin.tsx   |  2 +-
 .../conversations/components/conversation.tsx |  3 ++-
 .../components/conversations-list.tsx         |  3 ++-
 src/features/conversations/index.tsx          |  2 +-
 .../components/crypto-address.tsx             |  2 +-
 .../components/crypto-donate-panel.tsx        |  3 ++-
 .../crypto-donate/components/site-wallet.tsx  |  2 +-
 src/features/crypto-donate/index.tsx          |  2 +-
 src/features/delete-account/index.tsx         |  3 ++-
 src/features/developers/apps/create.tsx       |  3 ++-
 .../developers/developers-challenge.tsx       |  2 +-
 src/features/developers/developers-menu.tsx   |  2 +-
 src/features/developers/index.tsx             |  2 +-
 src/features/developers/settings-store.tsx    |  4 ++-
 src/features/direct-timeline/index.tsx        |  3 ++-
 .../directory/components/account-card.tsx     |  2 +-
 src/features/directory/index.tsx              |  5 +++-
 src/features/domain-blocks/index.tsx          |  3 ++-
 src/features/edit-email/index.tsx             |  2 +-
 src/features/edit-identity/index.tsx          |  6 ++++-
 src/features/edit-password/index.tsx          |  2 +-
 .../edit-profile/components/avatar-picker.tsx |  2 +-
 .../edit-profile/components/header-picker.tsx |  2 +-
 src/features/edit-profile/index.tsx           |  6 ++++-
 src/features/email-confirmation/index.tsx     |  2 +-
 src/features/embedded-status/index.tsx        |  3 ++-
 .../components/emoji-picker-dropdown.tsx      |  4 ++-
 .../emoji-picker-dropdown-container.tsx       |  2 +-
 .../event/components/event-action-button.tsx  |  3 ++-
 .../event/components/event-header.tsx         |  5 +++-
 src/features/event/event-discussion.tsx       |  3 ++-
 src/features/event/event-information.tsx      |  5 +++-
 .../events/components/event-carousel.tsx      |  2 +-
 src/features/events/index.tsx                 |  3 ++-
 .../export-data/components/csv-exporter.tsx   |  2 +-
 .../components/external-login-form.tsx        |  2 +-
 src/features/favourited-statuses/index.tsx    |  4 ++-
 .../components/instance-restrictions.tsx      |  2 +-
 .../components/restricted-instance.tsx        |  2 +-
 .../federation-restrictions/index.tsx         |  3 ++-
 .../feed-suggestions/feed-suggestions.tsx     |  2 +-
 src/features/filters/edit-filter.tsx          |  3 ++-
 src/features/filters/index.tsx                |  4 ++-
 src/features/follow-recommendations/index.tsx |  3 ++-
 .../components/account-authorize.tsx          |  2 +-
 src/features/follow-requests/index.tsx        |  3 ++-
 src/features/followed-tags/index.tsx          |  3 ++-
 .../group/components/group-action-button.tsx  |  2 +-
 .../group/components/group-header.tsx         |  2 +-
 .../components/group-member-list-item.tsx     |  3 ++-
 .../group/components/group-options-button.tsx |  3 ++-
 .../group/components/group-tag-list-item.tsx  |  2 +-
 src/features/group/edit-group.tsx             |  3 ++-
 src/features/group/group-blocked-members.tsx  |  3 ++-
 src/features/group/group-gallery.tsx          |  2 +-
 src/features/group/group-members.tsx          |  2 +-
 src/features/group/group-tag-timeline.tsx     |  2 +-
 src/features/group/group-timeline.tsx         |  5 +++-
 src/features/group/manage-group.tsx           |  3 ++-
 .../discover/search/recent-searches.tsx       |  2 +-
 .../components/discover/search/search.tsx     |  3 ++-
 .../groups/components/pending-groups-row.tsx  |  2 +-
 src/features/groups/index.tsx                 |  5 +++-
 src/features/hashtag-timeline/index.tsx       |  6 ++++-
 src/features/home-timeline/index.tsx          |  6 ++++-
 .../import-data/components/csv-importer.tsx   |  2 +-
 .../components/site-banner.tsx                |  2 +-
 src/features/landing-timeline/index.tsx       |  5 +++-
 src/features/list-adder/components/list.tsx   |  3 ++-
 src/features/list-adder/index.tsx             |  3 ++-
 .../list-editor/components/account.tsx        |  3 ++-
 .../list-editor/components/edit-list-form.tsx |  3 ++-
 .../list-editor/components/search.tsx         |  3 ++-
 src/features/list-editor/index.tsx            |  3 ++-
 src/features/list-timeline/index.tsx          |  4 ++-
 .../lists/components/new-list-form.tsx        |  3 ++-
 src/features/lists/index.tsx                  |  3 ++-
 src/features/migration/index.tsx              |  3 ++-
 src/features/mutes/index.tsx                  |  2 +-
 src/features/new-status/index.tsx             |  2 +-
 .../nostr-relays/components/relay-editor.tsx  |  2 +-
 src/features/nostr-relays/index.tsx           |  2 +-
 src/features/nostr/nostr-bunker-login.tsx     |  2 +-
 .../notifications/components/filter-bar.tsx   |  4 ++-
 .../notifications/components/notification.tsx |  4 ++-
 src/features/notifications/index.tsx          |  5 +++-
 src/features/pinned-statuses/index.tsx        |  3 ++-
 src/features/preferences/index.tsx            |  4 ++-
 src/features/public-timeline/index.tsx        |  7 +++++-
 src/features/quotes/index.tsx                 |  4 ++-
 src/features/register-invite/index.tsx        |  2 +-
 .../components/pinned-hosts-picker.tsx        |  2 +-
 src/features/remote-timeline/index.tsx        |  5 +++-
 src/features/reply-mentions/account.tsx       |  3 ++-
 .../report/components/status-check-box.tsx    |  3 ++-
 .../scheduled-status-action-bar.tsx           |  2 +-
 .../components/scheduled-status.tsx           |  2 +-
 src/features/scheduled-statuses/index.tsx     |  3 ++-
 src/features/search/index.tsx                 |  2 +-
 src/features/security/mfa-form.tsx            |  3 ++-
 .../security/mfa/disable-otp-form.tsx         |  2 +-
 src/features/security/mfa/enable-otp-form.tsx |  2 +-
 .../security/mfa/otp-confirm-form.tsx         |  2 +-
 src/features/server-info/index.tsx            |  2 +-
 .../settings/components/messages-settings.tsx |  2 +-
 src/features/settings/index.tsx               |  6 ++++-
 src/features/share/index.tsx                  |  2 +-
 .../components/site-preview.tsx               |  2 +-
 src/features/soapbox-config/index.tsx         |  4 ++-
 .../components/status-interaction-bar.tsx     |  5 +++-
 .../status/components/thread-login-cta.tsx    |  3 ++-
 .../status/components/thread-status.tsx       |  2 +-
 src/features/status/components/thread.tsx     |  4 ++-
 .../containers/quoted-status-container.tsx    |  2 +-
 src/features/status/index.tsx                 |  4 ++-
 src/features/test-timeline/index.tsx          |  3 ++-
 .../theme-editor/components/palette.tsx       |  2 +-
 src/features/theme-editor/index.tsx           |  4 ++-
 src/features/ui/components/action-button.tsx  |  4 ++-
 src/features/ui/components/compose-button.tsx |  2 +-
 src/features/ui/components/cta-banner.tsx     |  5 +++-
 .../ui/components/floating-action-button.tsx  |  2 +-
 src/features/ui/components/funding-panel.tsx  |  3 ++-
 .../ui/components/group-media-panel.tsx       |  3 ++-
 .../ui/components/instance-info-panel.tsx     |  4 ++-
 .../components/instance-moderation-panel.tsx  |  4 ++-
 src/features/ui/components/link-footer.tsx    |  5 +++-
 .../account-moderation-modal.tsx              |  4 ++-
 .../staff-role-picker.tsx                     |  2 +-
 .../ui/components/modals/birthdays-modal.tsx  |  2 +-
 .../modals/compare-history-modal.tsx          |  3 ++-
 .../compose-event-modal.tsx                   |  3 ++-
 .../compose-event-modal/upload-button.tsx     |  2 +-
 .../ui/components/modals/compose-modal.tsx    |  5 +++-
 .../ui/components/modals/dislikes-modal.tsx   |  3 ++-
 .../modals/edit-announcement-modal.tsx        |  2 +-
 .../modals/edit-bookmark-folder-modal.tsx     |  3 ++-
 .../components/modals/edit-domain-modal.tsx   |  2 +-
 .../modals/edit-federation-modal.tsx          |  3 ++-
 .../ui/components/modals/embed-modal.tsx      |  2 +-
 .../ui/components/modals/event-map-modal.tsx  |  3 ++-
 .../modals/event-participants-modal.tsx       |  3 ++-
 .../modals/familiar-followers-modal.tsx       |  2 +-
 .../ui/components/modals/favourites-modal.tsx |  3 ++-
 .../ui/components/modals/hotkeys-modal.tsx    |  2 +-
 .../ui/components/modals/join-event-modal.tsx |  2 +-
 .../components/modals/landing-page-modal.tsx  |  3 ++-
 .../manage-group-modal/create-group-modal.tsx |  2 +-
 .../manage-group-modal/steps/details-step.tsx |  4 ++-
 .../ui/components/modals/media-modal.tsx      |  3 ++-
 .../ui/components/modals/mentions-modal.tsx   |  3 ++-
 .../ui/components/modals/mute-modal.tsx       |  4 ++-
 .../components/nostr-extension-indicator.tsx  |  2 +-
 .../steps/extension-step.tsx                  |  4 ++-
 .../nostr-login-modal/steps/key-add-step.tsx  |  2 +-
 .../nostr-signup-modal/steps/key-step.tsx     |  2 +-
 .../nostr-signup-modal/steps/keygen-step.tsx  |  3 ++-
 .../onboarding-flow-modal.tsx                 |  2 +-
 .../steps/avatar-step.tsx                     |  3 ++-
 .../onboarding-flow-modal/steps/bio-step.tsx  |  3 ++-
 .../steps/cover-photo-selection-step.tsx      |  3 ++-
 .../steps/display-name-step.tsx               |  3 ++-
 .../ui/components/modals/reactions-modal.tsx  |  3 ++-
 .../ui/components/modals/reblogs-modal.tsx    |  3 ++-
 .../modals/reply-mentions-modal.tsx           |  4 ++-
 .../modals/report-modal/report-modal.tsx      |  4 ++-
 .../report-modal/steps/confirmation-step.tsx  |  2 +-
 .../report-modal/steps/other-actions-step.tsx |  4 ++-
 .../modals/report-modal/steps/reason-step.tsx |  4 ++-
 .../modals/select-bookmark-folder-modal.tsx   |  3 ++-
 .../components/modals/unauthorized-modal.tsx  |  6 ++++-
 .../ui/components/modals/zap-invoice.tsx      |  2 +-
 .../modals/zap-split/display-name-row.tsx     |  2 +-
 .../ui/components/modals/zaps-modal.tsx       |  3 ++-
 src/features/ui/components/navbar.tsx         |  6 ++++-
 .../components/panels/account-note-panel.tsx  |  2 +-
 .../ui/components/panels/new-event-panel.tsx  |  2 +-
 .../ui/components/panels/new-group-panel.tsx  |  3 ++-
 .../ui/components/panels/sign-up-panel.tsx    |  6 ++++-
 src/features/ui/components/pending-status.tsx |  2 +-
 .../ui/components/pinned-accounts-panel.tsx   |  3 ++-
 src/features/ui/components/poll-preview.tsx   |  2 +-
 .../ui/components/profile-dropdown.tsx        |  5 +++-
 .../components/profile-familiar-followers.tsx |  4 ++-
 .../ui/components/profile-info-panel.tsx      |  3 ++-
 .../ui/components/profile-media-panel.tsx     |  3 ++-
 src/features/ui/components/promo-panel.tsx    |  4 ++-
 .../ui/components/subscription-button.tsx     |  3 ++-
 src/features/ui/components/theme-toggle.tsx   |  3 ++-
 src/features/ui/components/timeline.tsx       |  3 ++-
 src/features/ui/components/trends-panel.tsx   |  2 +-
 src/features/ui/components/user-panel.tsx     |  2 +-
 .../ui/components/who-to-follow-panel.tsx     |  2 +-
 src/features/ui/index.tsx                     | 10 +++++++-
 src/features/ui/util/global-hotkeys.tsx       |  4 ++-
 src/features/ui/util/optional-motion.tsx      |  2 +-
 src/features/ui/util/react-router-helpers.tsx |  3 ++-
 .../zap/components/zap-pay-request-form.tsx   |  2 +-
 src/hooks/index.ts                            | 25 -------------------
 src/hooks/nostr/useSigner.ts                  |  2 +-
 src/init/soapbox-head.tsx                     | 10 +++-----
 src/init/soapbox-load.tsx                     | 12 ++++-----
 src/init/soapbox-mount.tsx                    | 16 +++++-------
 src/pages/default-page.tsx                    |  3 ++-
 src/pages/event-page.tsx                      |  3 ++-
 src/pages/events-page.tsx                     |  2 +-
 src/pages/group-page.tsx                      |  3 ++-
 src/pages/home-page.tsx                       |  7 +++++-
 src/pages/landing-page.tsx                    |  3 ++-
 src/pages/profile-page.tsx                    |  4 ++-
 src/pages/remote-instance-page.tsx            |  3 ++-
 src/pages/search-page.tsx                     |  3 ++-
 src/pages/status-page.tsx                     |  3 ++-
 src/queries/accounts.ts                       |  4 ++-
 src/queries/chats.ts                          |  6 ++++-
 src/queries/embed.ts                          |  2 +-
 src/queries/relationships.ts                  |  3 ++-
 src/queries/search.ts                         |  2 +-
 src/queries/suggestions.ts                    |  3 ++-
 src/queries/trends.ts                         |  3 ++-
 399 files changed, 791 insertions(+), 443 deletions(-)
 delete mode 100644 src/hooks/index.ts

diff --git a/src/api/hooks/accounts/useAccount.ts b/src/api/hooks/accounts/useAccount.ts
index 5876e3fc5..17cdb35c8 100644
--- a/src/api/hooks/accounts/useAccount.ts
+++ b/src/api/hooks/accounts/useAccount.ts
@@ -3,7 +3,9 @@ import { useHistory } from 'react-router-dom';
 
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useFeatures, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 import { type Account, accountSchema } from 'soapbox/schemas/index.ts';
 
 import { useRelationship } from './useRelationship.ts';
diff --git a/src/api/hooks/accounts/useAccountList.ts b/src/api/hooks/accounts/useAccountList.ts
index 541227b1f..9d4d1392c 100644
--- a/src/api/hooks/accounts/useAccountList.ts
+++ b/src/api/hooks/accounts/useAccountList.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { Account, accountSchema } from 'soapbox/schemas/index.ts';
 
 import { useRelationships } from './useRelationships.ts';
diff --git a/src/api/hooks/accounts/useAccountLookup.ts b/src/api/hooks/accounts/useAccountLookup.ts
index d317147cc..ad3605d27 100644
--- a/src/api/hooks/accounts/useAccountLookup.ts
+++ b/src/api/hooks/accounts/useAccountLookup.ts
@@ -3,7 +3,9 @@ import { useHistory } from 'react-router-dom';
 
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntityLookup } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useFeatures, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 import { type Account, accountSchema } from 'soapbox/schemas/index.ts';
 
 import { useRelationship } from './useRelationship.ts';
diff --git a/src/api/hooks/accounts/useFollow.ts b/src/api/hooks/accounts/useFollow.ts
index 142f73d8b..c0cce5c07 100644
--- a/src/api/hooks/accounts/useFollow.ts
+++ b/src/api/hooks/accounts/useFollow.ts
@@ -1,7 +1,9 @@
 import { importEntities } from 'soapbox/entity-store/actions.ts';
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useAppDispatch, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 import { relationshipSchema } from 'soapbox/schemas/index.ts';
 
 interface FollowOpts {
diff --git a/src/api/hooks/accounts/usePatronUser.ts b/src/api/hooks/accounts/usePatronUser.ts
index 9ccfe8b84..ff9eb58e2 100644
--- a/src/api/hooks/accounts/usePatronUser.ts
+++ b/src/api/hooks/accounts/usePatronUser.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { type PatronUser, patronUserSchema } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/accounts/useRelationship.ts b/src/api/hooks/accounts/useRelationship.ts
index d76446258..b1e80fad0 100644
--- a/src/api/hooks/accounts/useRelationship.ts
+++ b/src/api/hooks/accounts/useRelationship.ts
@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { type Relationship, relationshipSchema } from 'soapbox/schemas/index.ts';
 
 interface UseRelationshipOpts {
diff --git a/src/api/hooks/accounts/useRelationships.ts b/src/api/hooks/accounts/useRelationships.ts
index a88508a9c..fbded4a59 100644
--- a/src/api/hooks/accounts/useRelationships.ts
+++ b/src/api/hooks/accounts/useRelationships.ts
@@ -1,6 +1,7 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities.ts';
-import { useApi, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 import { type Relationship, relationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useRelationships(listKey: string[], ids: string[]) {
diff --git a/src/api/hooks/admin/useAdminAccounts.ts b/src/api/hooks/admin/useAdminAccounts.ts
index 59b0c040f..2c4b2bf42 100644
--- a/src/api/hooks/admin/useAdminAccounts.ts
+++ b/src/api/hooks/admin/useAdminAccounts.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { adminAccountSchema } from 'soapbox/schemas/admin-account.ts';
 
 interface MastodonAdminFilters {
diff --git a/src/api/hooks/admin/useAnnouncements.ts b/src/api/hooks/admin/useAnnouncements.ts
index 049800655..96544d5e0 100644
--- a/src/api/hooks/admin/useAnnouncements.ts
+++ b/src/api/hooks/admin/useAnnouncements.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import { adminAnnouncementSchema, type AdminAnnouncement } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/admin/useCreateDomain.ts b/src/api/hooks/admin/useCreateDomain.ts
index c07f49619..3fc066920 100644
--- a/src/api/hooks/admin/useCreateDomain.ts
+++ b/src/api/hooks/admin/useCreateDomain.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { domainSchema } from 'soapbox/schemas/index.ts';
 
 interface CreateDomainParams {
diff --git a/src/api/hooks/admin/useDeleteDomain.ts b/src/api/hooks/admin/useDeleteDomain.ts
index 85ad41c8e..7e05c6bc1 100644
--- a/src/api/hooks/admin/useDeleteDomain.ts
+++ b/src/api/hooks/admin/useDeleteDomain.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useDeleteEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
 const useDeleteDomain = () => {
   const api = useApi();
diff --git a/src/api/hooks/admin/useDomains.ts b/src/api/hooks/admin/useDomains.ts
index 167e8d398..8312b038b 100644
--- a/src/api/hooks/admin/useDomains.ts
+++ b/src/api/hooks/admin/useDomains.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import { domainSchema, type Domain } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/admin/useManageZapSplit.ts b/src/api/hooks/admin/useManageZapSplit.ts
index e6a8420f6..5a891e600 100644
--- a/src/api/hooks/admin/useManageZapSplit.ts
+++ b/src/api/hooks/admin/useManageZapSplit.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 
 import { type INewAccount } from 'soapbox/features/admin/manage-zap-split.tsx';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { baseZapAccountSchema, ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/api/hooks/admin/useModerationLog.ts b/src/api/hooks/admin/useModerationLog.ts
index 9e7c7bc4b..3c3408927 100644
--- a/src/api/hooks/admin/useModerationLog.ts
+++ b/src/api/hooks/admin/useModerationLog.ts
@@ -1,6 +1,6 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { moderationLogEntrySchema, type ModerationLogEntry } from 'soapbox/schemas/index.ts';
 
 interface ModerationLogResult {
diff --git a/src/api/hooks/admin/useRelays.ts b/src/api/hooks/admin/useRelays.ts
index 1a1d57099..ee119caa1 100644
--- a/src/api/hooks/admin/useRelays.ts
+++ b/src/api/hooks/admin/useRelays.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import { relaySchema, type Relay } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/admin/useRules.ts b/src/api/hooks/admin/useRules.ts
index c7c1db0c5..4cce7129a 100644
--- a/src/api/hooks/admin/useRules.ts
+++ b/src/api/hooks/admin/useRules.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import { adminRuleSchema, type AdminRule } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/admin/useSuggest.ts b/src/api/hooks/admin/useSuggest.ts
index 5358e2771..46a2727ed 100644
--- a/src/api/hooks/admin/useSuggest.ts
+++ b/src/api/hooks/admin/useSuggest.ts
@@ -1,6 +1,7 @@
 import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
 import { EntityCallbacks } from 'soapbox/entity-store/hooks/types.ts';
-import { useApi, useGetState } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
 import { accountIdsToAccts } from 'soapbox/selectors/index.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/api/hooks/admin/useUpdateDomain.ts b/src/api/hooks/admin/useUpdateDomain.ts
index 30c639112..8ac43cc97 100644
--- a/src/api/hooks/admin/useUpdateDomain.ts
+++ b/src/api/hooks/admin/useUpdateDomain.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { domainSchema } from 'soapbox/schemas/index.ts';
 
 import type { CreateDomainParams } from './useCreateDomain.ts';
diff --git a/src/api/hooks/admin/useVerify.ts b/src/api/hooks/admin/useVerify.ts
index ee2da73cb..4fee04daa 100644
--- a/src/api/hooks/admin/useVerify.ts
+++ b/src/api/hooks/admin/useVerify.ts
@@ -1,6 +1,7 @@
 import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
 import { EntityCallbacks } from 'soapbox/entity-store/hooks/types.ts';
-import { useApi, useGetState } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
 import { accountIdsToAccts } from 'soapbox/selectors/index.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/api/hooks/announcements/useAnnouncements.ts b/src/api/hooks/announcements/useAnnouncements.ts
index 1ecbdf8b6..b83946579 100644
--- a/src/api/hooks/announcements/useAnnouncements.ts
+++ b/src/api/hooks/announcements/useAnnouncements.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import { announcementReactionSchema, announcementSchema, type Announcement, type AnnouncementReaction } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/captcha/useCaptcha.ts b/src/api/hooks/captcha/useCaptcha.ts
index a3509dbd5..d5d9e6339 100644
--- a/src/api/hooks/captcha/useCaptcha.ts
+++ b/src/api/hooks/captcha/useCaptcha.ts
@@ -3,7 +3,9 @@ import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals.ts';
-import { useApi, useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { captchaSchema, type CaptchaData } from 'soapbox/schemas/captcha.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/api/hooks/groups/useCancelMembershipRequest.ts b/src/api/hooks/groups/useCancelMembershipRequest.ts
index 59e2943ce..032cb71b6 100644
--- a/src/api/hooks/groups/useCancelMembershipRequest.ts
+++ b/src/api/hooks/groups/useCancelMembershipRequest.ts
@@ -1,6 +1,7 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import type { Group } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/groups/useDeleteGroupStatus.ts b/src/api/hooks/groups/useDeleteGroupStatus.ts
index ed2d610af..95874dc95 100644
--- a/src/api/hooks/groups/useDeleteGroupStatus.ts
+++ b/src/api/hooks/groups/useDeleteGroupStatus.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useDeleteEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
 import type { Group } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/groups/useGroup.ts b/src/api/hooks/groups/useGroup.ts
index b437936c3..5da2c4ce5 100644
--- a/src/api/hooks/groups/useGroup.ts
+++ b/src/api/hooks/groups/useGroup.ts
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { type Group, groupSchema } from 'soapbox/schemas/index.ts';
 
 import { useGroupRelationship } from './useGroupRelationship.ts';
diff --git a/src/api/hooks/groups/useGroupMembershipRequests.ts b/src/api/hooks/groups/useGroupMembershipRequests.ts
index 6d0771c12..073dfb600 100644
--- a/src/api/hooks/groups/useGroupMembershipRequests.ts
+++ b/src/api/hooks/groups/useGroupMembershipRequests.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useDismissEntity, useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import { accountSchema } from 'soapbox/schemas/index.ts';
 
diff --git a/src/api/hooks/groups/useGroupMutes.ts b/src/api/hooks/groups/useGroupMutes.ts
index 7b1364915..13120197c 100644
--- a/src/api/hooks/groups/useGroupMutes.ts
+++ b/src/api/hooks/groups/useGroupMutes.ts
@@ -1,7 +1,7 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useFeatures } from 'soapbox/hooks/index.ts';
 import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { groupSchema } from 'soapbox/schemas/index.ts';
 
 import type { Group } from 'soapbox/schemas/index.ts';
diff --git a/src/api/hooks/groups/useGroupRelationship.ts b/src/api/hooks/groups/useGroupRelationship.ts
index b7846be22..242343674 100644
--- a/src/api/hooks/groups/useGroupRelationship.ts
+++ b/src/api/hooks/groups/useGroupRelationship.ts
@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupRelationship(groupId: string | undefined) {
diff --git a/src/api/hooks/groups/useGroupRelationships.ts b/src/api/hooks/groups/useGroupRelationships.ts
index cee6b4f81..2d2dd0321 100644
--- a/src/api/hooks/groups/useGroupRelationships.ts
+++ b/src/api/hooks/groups/useGroupRelationships.ts
@@ -1,6 +1,7 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities.ts';
-import { useApi, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupRelationships(listKey: string[], ids: string[]) {
diff --git a/src/api/hooks/groups/useGroupSearch.ts b/src/api/hooks/groups/useGroupSearch.ts
index c13f27b67..6410d902c 100644
--- a/src/api/hooks/groups/useGroupSearch.ts
+++ b/src/api/hooks/groups/useGroupSearch.ts
@@ -1,6 +1,7 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useFeatures } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { groupSchema } from 'soapbox/schemas/index.ts';
 
 import { useGroupRelationships } from './useGroupRelationships.ts';
diff --git a/src/api/hooks/groups/useGroupTag.ts b/src/api/hooks/groups/useGroupTag.ts
index 446b3b492..7ed7ac6a1 100644
--- a/src/api/hooks/groups/useGroupTag.ts
+++ b/src/api/hooks/groups/useGroupTag.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { type GroupTag, groupTagSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupTag(tagId: string) {
diff --git a/src/api/hooks/groups/useGroups.ts b/src/api/hooks/groups/useGroups.ts
index 2f2c9de2f..412334290 100644
--- a/src/api/hooks/groups/useGroups.ts
+++ b/src/api/hooks/groups/useGroups.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { groupSchema, type Group } from 'soapbox/schemas/group.ts';
 
diff --git a/src/api/hooks/groups/useGroupsFromTag.ts b/src/api/hooks/groups/useGroupsFromTag.ts
index c1b0bfa92..f3229b799 100644
--- a/src/api/hooks/groups/useGroupsFromTag.ts
+++ b/src/api/hooks/groups/useGroupsFromTag.ts
@@ -1,6 +1,7 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useFeatures } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { groupSchema } from 'soapbox/schemas/index.ts';
 
 import { useGroupRelationships } from './useGroupRelationships.ts';
diff --git a/src/api/hooks/groups/usePendingGroups.ts b/src/api/hooks/groups/usePendingGroups.ts
index 06c805362..5d4f30111 100644
--- a/src/api/hooks/groups/usePendingGroups.ts
+++ b/src/api/hooks/groups/usePendingGroups.ts
@@ -1,6 +1,8 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { Group, groupSchema } from 'soapbox/schemas/index.ts';
 
 function usePendingGroups() {
diff --git a/src/api/hooks/groups/usePopularTags.ts b/src/api/hooks/groups/usePopularTags.ts
index 2126a57d2..a3d4fb617 100644
--- a/src/api/hooks/groups/usePopularTags.ts
+++ b/src/api/hooks/groups/usePopularTags.ts
@@ -1,6 +1,7 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useFeatures } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { type GroupTag, groupTagSchema } from 'soapbox/schemas/index.ts';
 
 function usePopularTags() {
diff --git a/src/api/hooks/groups/useSuggestedGroups.ts b/src/api/hooks/groups/useSuggestedGroups.ts
index a54fbffd2..de0a64525 100644
--- a/src/api/hooks/groups/useSuggestedGroups.ts
+++ b/src/api/hooks/groups/useSuggestedGroups.ts
@@ -1,6 +1,7 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi, useFeatures } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { type Group, groupSchema } from 'soapbox/schemas/index.ts';
 
 import { useGroupRelationships } from './useGroupRelationships.ts';
diff --git a/src/api/hooks/instance/useInstanceV1.ts b/src/api/hooks/instance/useInstanceV1.ts
index 45b014fe9..1aef6cd29 100644
--- a/src/api/hooks/instance/useInstanceV1.ts
+++ b/src/api/hooks/instance/useInstanceV1.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
 interface Opts {
diff --git a/src/api/hooks/instance/useInstanceV2.ts b/src/api/hooks/instance/useInstanceV2.ts
index 5667bf022..8c0518318 100644
--- a/src/api/hooks/instance/useInstanceV2.ts
+++ b/src/api/hooks/instance/useInstanceV2.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance.ts';
 
 interface Opts {
diff --git a/src/api/hooks/statuses/useBookmarkFolder.ts b/src/api/hooks/statuses/useBookmarkFolder.ts
index dd5e5fc56..4706a1550 100644
--- a/src/api/hooks/statuses/useBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useBookmarkFolder.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { selectEntity } from 'soapbox/entity-store/selectors.ts';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { type BookmarkFolder } from 'soapbox/schemas/bookmark-folder.ts';
 
 import { useBookmarkFolders } from './useBookmarkFolders.ts';
diff --git a/src/api/hooks/statuses/useBookmarkFolders.ts b/src/api/hooks/statuses/useBookmarkFolders.ts
index c48ac9e15..5b307f46c 100644
--- a/src/api/hooks/statuses/useBookmarkFolders.ts
+++ b/src/api/hooks/statuses/useBookmarkFolders.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { bookmarkFolderSchema, type BookmarkFolder } from 'soapbox/schemas/bookmark-folder.ts';
 
diff --git a/src/api/hooks/statuses/useCreateBookmarkFolder.ts b/src/api/hooks/statuses/useCreateBookmarkFolder.ts
index 477c1fe45..b80303c0b 100644
--- a/src/api/hooks/statuses/useCreateBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useCreateBookmarkFolder.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder.ts';
 
 interface CreateBookmarkFolderParams {
diff --git a/src/api/hooks/statuses/useUpdateBookmarkFolder.ts b/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
index d21aac1f9..254d098a6 100644
--- a/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
@@ -1,6 +1,6 @@
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder.ts';
 
 interface UpdateBookmarkFolderParams {
diff --git a/src/api/hooks/streaming/useListStream.ts b/src/api/hooks/streaming/useListStream.ts
index 4b859b8d6..e6808ffd8 100644
--- a/src/api/hooks/streaming/useListStream.ts
+++ b/src/api/hooks/streaming/useListStream.ts
@@ -1,4 +1,4 @@
-import { useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 
 import { useTimelineStream } from './useTimelineStream.ts';
 
diff --git a/src/api/hooks/streaming/useTimelineStream.ts b/src/api/hooks/streaming/useTimelineStream.ts
index 8225e1da3..28aedbecf 100644
--- a/src/api/hooks/streaming/useTimelineStream.ts
+++ b/src/api/hooks/streaming/useTimelineStream.ts
@@ -1,7 +1,9 @@
 import { useEffect, useRef } from 'react';
 
 import { connectTimelineStream } from 'soapbox/actions/streaming.ts';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { getAccessToken } from 'soapbox/utils/auth.ts';
 
 function useTimelineStream(...args: Parameters<typeof connectTimelineStream>) {
diff --git a/src/api/hooks/streaming/useUserStream.ts b/src/api/hooks/streaming/useUserStream.ts
index 9554917bc..1030403d2 100644
--- a/src/api/hooks/streaming/useUserStream.ts
+++ b/src/api/hooks/streaming/useUserStream.ts
@@ -1,7 +1,7 @@
 import { expandNotifications } from 'soapbox/actions/notifications.ts';
 import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
 import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
-import { useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 
 import { useTimelineStream } from './useTimelineStream.ts';
 
diff --git a/src/api/hooks/zap-split/useZapSplit.ts b/src/api/hooks/zap-split/useZapSplit.ts
index 3261907fe..773932d86 100644
--- a/src/api/hooks/zap-split/useZapSplit.ts
+++ b/src/api/hooks/zap-split/useZapSplit.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { baseZapAccountSchema, type ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
 import type { Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities.ts';
diff --git a/src/components/account.tsx b/src/components/account.tsx
index cb7b917f0..4dba320de 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -13,7 +13,7 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { getAcct } from 'soapbox/utils/accounts.ts';
 import { displayFqn } from 'soapbox/utils/state.ts';
 
diff --git a/src/components/animated-number.tsx b/src/components/animated-number.tsx
index 123599246..42edcf5e3 100644
--- a/src/components/animated-number.tsx
+++ b/src/components/animated-number.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { FormattedNumber } from 'react-intl';
 import { TransitionMotion, spring } from 'react-motion';
 
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 const obfuscatedCount = (count: number) => {
   if (count < 0) {
diff --git a/src/components/announcements/announcement.tsx b/src/components/announcements/announcement.tsx
index 7272d1c77..35aa9f4f1 100644
--- a/src/components/announcements/announcement.tsx
+++ b/src/components/announcements/announcement.tsx
@@ -2,7 +2,7 @@ import { FormattedDate } from 'react-intl';
 
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
 import AnnouncementContent from './announcement-content.tsx';
diff --git a/src/components/announcements/announcements-panel.tsx b/src/components/announcements/announcements-panel.tsx
index 65412c1fe..5d6cb66e2 100644
--- a/src/components/announcements/announcements-panel.tsx
+++ b/src/components/announcements/announcements-panel.tsx
@@ -9,7 +9,7 @@ import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
 import { Card } from 'soapbox/components/ui/card.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import Announcement from './announcement.tsx';
 
diff --git a/src/components/announcements/emoji.tsx b/src/components/announcements/emoji.tsx
index eb267038c..927278484 100644
--- a/src/components/announcements/emoji.tsx
+++ b/src/components/announcements/emoji.tsx
@@ -1,5 +1,5 @@
 import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import type { Map as ImmutableMap } from 'immutable';
diff --git a/src/components/announcements/reactions-bar.tsx b/src/components/announcements/reactions-bar.tsx
index ed4a5756a..18f7243d4 100644
--- a/src/components/announcements/reactions-bar.tsx
+++ b/src/components/announcements/reactions-bar.tsx
@@ -3,7 +3,7 @@ import { TransitionMotion, spring } from 'react-motion';
 
 import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
 import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 import Reaction from './reaction.tsx';
 
diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx
index a0a97a5c8..4829b7688 100644
--- a/src/components/attachment-thumbs.tsx
+++ b/src/components/attachment-thumbs.tsx
@@ -2,7 +2,7 @@ import { Suspense } from 'react';
 
 import { openModal } from 'soapbox/actions/modals.ts';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { List as ImmutableList } from 'immutable';
 import type { Attachment } from 'soapbox/types/entities.ts';
diff --git a/src/components/autosuggest-account-input.tsx b/src/components/autosuggest-account-input.tsx
index f0199e8d5..ecd3f8ae2 100644
--- a/src/components/autosuggest-account-input.tsx
+++ b/src/components/autosuggest-account-input.tsx
@@ -4,7 +4,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 
 import { accountSearch } from 'soapbox/actions/accounts.ts';
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
 import type { InputThemes } from 'soapbox/components/ui/input.tsx';
diff --git a/src/components/autosuggest-location.tsx b/src/components/autosuggest-location.tsx
index 453ffc99e..f6df0a191 100644
--- a/src/components/autosuggest-location.tsx
+++ b/src/components/autosuggest-location.tsx
@@ -8,7 +8,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 export const ADDRESS_ICONS: Record<string, string> = {
   house: homeIcon,
diff --git a/src/components/avatar-stack.tsx b/src/components/avatar-stack.tsx
index 6fc3d9b66..0163bc329 100644
--- a/src/components/avatar-stack.tsx
+++ b/src/components/avatar-stack.tsx
@@ -3,7 +3,7 @@ import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immuta
 
 import Avatar from 'soapbox/components/ui/avatar.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
 import type { Account } from 'soapbox/types/entities.ts';
diff --git a/src/components/birthday-input.tsx b/src/components/birthday-input.tsx
index cab17abcc..b5737f650 100644
--- a/src/components/birthday-input.tsx
+++ b/src/components/birthday-input.tsx
@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useInstance, useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import { Datetime } from './ui/datetime.tsx';
 
diff --git a/src/components/birthday-panel.tsx b/src/components/birthday-panel.tsx
index 1278ce981..9235752df 100644
--- a/src/components/birthday-panel.tsx
+++ b/src/components/birthday-panel.tsx
@@ -5,7 +5,8 @@ import { FormattedMessage } from 'react-intl';
 import { fetchBirthdayReminders } from 'soapbox/actions/accounts.ts';
 import Widget from 'soapbox/components/ui/widget.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const timeToMidnight = () => {
   const now = new Date();
diff --git a/src/components/display-name-inline.tsx b/src/components/display-name-inline.tsx
index d0bf71513..356deca27 100644
--- a/src/components/display-name-inline.tsx
+++ b/src/components/display-name-inline.tsx
@@ -1,6 +1,6 @@
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import { getAcct } from '../utils/accounts.ts';
 
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx
index a57f66b3e..3d8c7ef9c 100644
--- a/src/components/display-name.tsx
+++ b/src/components/display-name.tsx
@@ -1,7 +1,7 @@
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import { getAcct } from '../utils/accounts.ts';
 
diff --git a/src/components/domain.tsx b/src/components/domain.tsx
index 220a4f80f..81a9f5938 100644
--- a/src/components/domain.tsx
+++ b/src/components/domain.tsx
@@ -5,7 +5,7 @@ import { unblockDomain } from 'soapbox/actions/domain-blocks.ts';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const messages = defineMessages({
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index bc4f8e424..161d92307 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -9,7 +9,7 @@ import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 's
 import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Portal from 'soapbox/components/ui/portal.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 
 import DropdownMenuItem, { MenuItem } from './dropdown-menu-item.tsx';
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index e10e194dc..7eddcf061 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -9,7 +9,7 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import EventActionButton from 'soapbox/features/event/components/event-action-button.tsx';
 import EventDate from 'soapbox/features/event/components/event-date.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import Icon from './icon.tsx';
 import VerificationBadge from './verification-badge.tsx';
diff --git a/src/components/gdpr-banner.tsx b/src/components/gdpr-banner.tsx
index 5622f7972..8e723b903 100644
--- a/src/components/gdpr-banner.tsx
+++ b/src/components/gdpr-banner.tsx
@@ -7,7 +7,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const acceptedGdpr = !!localStorage.getItem('soapbox:gdpr');
 
diff --git a/src/components/helmet.tsx b/src/components/helmet.tsx
index 286ad79dd..1a664ba93 100644
--- a/src/components/helmet.tsx
+++ b/src/components/helmet.tsx
@@ -2,7 +2,9 @@ import { useMemo, useEffect } from 'react';
 import { Helmet as ReactHelmet } from 'react-helmet';
 
 import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
-import { useAppSelector, useInstance, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { RootState } from 'soapbox/store.ts';
 import FaviconService from 'soapbox/utils/favicon-service.ts';
 
diff --git a/src/components/hover-ref-wrapper.tsx b/src/components/hover-ref-wrapper.tsx
index 4e175533b..c1e1173b4 100644
--- a/src/components/hover-ref-wrapper.tsx
+++ b/src/components/hover-ref-wrapper.tsx
@@ -7,7 +7,7 @@ import {
   openProfileHoverCard,
   closeProfileHoverCard,
 } from 'soapbox/actions/profile-hover-card.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { isMobile } from 'soapbox/is-mobile.ts';
 
 const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index ca476f8a3..124b19ba6 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -9,7 +9,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { locationSearch } from 'soapbox/actions/events.ts';
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
 import Icon from 'soapbox/components/icon.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import AutosuggestLocation from './autosuggest-location.tsx';
 
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 8a02ccc23..085d95e61 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -6,7 +6,8 @@ import { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 import Blurhash from 'soapbox/components/blurhash.tsx';
 import StillImage from 'soapbox/components/still-image.tsx';
 import { MIMETYPE_ICONS } from 'soapbox/components/upload.tsx';
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { Attachment } from 'soapbox/types/entities.ts';
 import { truncateFilename } from 'soapbox/utils/media.ts';
 
diff --git a/src/components/modal-root.tsx b/src/components/modal-root.tsx
index 31388efd0..c2f077c65 100644
--- a/src/components/modal-root.tsx
+++ b/src/components/modal-root.tsx
@@ -7,7 +7,8 @@ import { useHistory } from 'react-router-dom';
 import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
 import { cancelEventCompose } from 'soapbox/actions/events.ts';
 import { openModal, closeModal } from 'soapbox/actions/modals.ts';
-import { useAppDispatch, usePrevious } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { usePrevious } from 'soapbox/hooks/usePrevious.ts';
 
 import type { ModalType } from 'soapbox/features/ui/components/modal-root.tsx';
 import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/compose-event.ts';
diff --git a/src/components/navlinks.tsx b/src/components/navlinks.tsx
index f26ade226..d21dea832 100644
--- a/src/components/navlinks.tsx
+++ b/src/components/navlinks.tsx
@@ -1,7 +1,8 @@
 import { Link } from 'react-router-dom';
 
 import Text from 'soapbox/components/ui/text.tsx';
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 interface INavlinks {
   type: string;
diff --git a/src/components/polls/poll-footer.tsx b/src/components/polls/poll-footer.tsx
index e0e5d41cb..4722a3eff 100644
--- a/src/components/polls/poll-footer.tsx
+++ b/src/components/polls/poll-footer.tsx
@@ -7,7 +7,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Tooltip from 'soapbox/components/ui/tooltip.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { Poll as PollEntity } from 'soapbox/types/entities.ts';
 
diff --git a/src/components/polls/poll.tsx b/src/components/polls/poll.tsx
index 9bfa30d32..382f4b3cf 100644
--- a/src/components/polls/poll.tsx
+++ b/src/components/polls/poll.tsx
@@ -5,7 +5,8 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { vote } from 'soapbox/actions/polls.ts';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import PollFooter from './poll-footer.tsx';
 import PollOption from './poll-option.tsx';
diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index 2c2e05c5a..c6b9eae76 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -20,7 +20,8 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
 import { UserPanel } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import { showProfileHoverCard } from './hover-ref-wrapper.tsx';
 import { dateFormatOptions } from './relative-timestamp.tsx';
diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx
index 9c589087d..0444c9a76 100644
--- a/src/components/quoted-status-indicator.tsx
+++ b/src/components/quoted-status-indicator.tsx
@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusIndicator {
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index 4afd496ae..657240f3b 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -7,7 +7,7 @@ import { useHistory } from 'react-router-dom';
 import StatusMedia from 'soapbox/components/status-media.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
 import EventPreview from './event-preview.tsx';
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 88e6ee9f3..3bbaf4663 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -5,7 +5,7 @@ import { useIntl, MessageDescriptor } from 'react-intl';
 
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 interface IScrollTopButton {
   /** Callback when clicked, and also when scrolled to the top. */
diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx
index 4f5dc6f60..2b0f2dcb8 100644
--- a/src/components/scrollable-list.tsx
+++ b/src/components/scrollable-list.tsx
@@ -5,7 +5,7 @@ import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLo
 
 import { Card } from 'soapbox/components/ui/card.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 import LoadMore from './load-more.tsx';
 
diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
index 6d5796ee8..ea1eb1db9 100644
--- a/src/components/sentry-feedback-form.tsx
+++ b/src/components/sentry-feedback-form.tsx
@@ -7,7 +7,7 @@ import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { captureSentryFeedback } from 'soapbox/sentry.ts';
 
 interface ISentryFeedbackForm {
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 6643ecd89..21e58efde 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -33,7 +33,10 @@ import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import ProfileStats from 'soapbox/features/ui/components/profile-stats.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 import { makeGetOtherAccounts } from 'soapbox/selectors/index.ts';
 
diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx
index bb87365d3..e5c857a2a 100644
--- a/src/components/sidebar-navigation.tsx
+++ b/src/components/sidebar-navigation.tsx
@@ -25,7 +25,11 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
 import ComposeButton from 'soapbox/features/ui/components/compose-button.tsx';
-import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
 import DropdownMenu, { Menu } from './dropdown-menu/index.ts';
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index cc35977be..15186694b 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -7,7 +7,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { captureSentryException } from 'soapbox/sentry.ts';
 import KVStore from 'soapbox/storage/kv-store.ts';
 import sourceCode from 'soapbox/utils/code.ts';
diff --git a/src/components/site-logo.tsx b/src/components/site-logo.tsx
index 4b1ebc323..eeaebe94d 100644
--- a/src/components/site-logo.tsx
+++ b/src/components/site-logo.tsx
@@ -2,7 +2,9 @@ import clsx from 'clsx';
 
 import soapboxLogoWhiteSrc from 'soapbox/assets/images/soapbox-logo-white.svg';
 import soapboxLogoSrc from 'soapbox/assets/images/soapbox-logo.svg';
-import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 interface ISiteLogo extends React.ComponentProps<'img'> {
   /** Extra class names for the <img> element. */
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 7de04b424..3878cd43d 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -50,7 +50,12 @@ import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import StatusActionButton from 'soapbox/components/status-action-button.tsx';
 import StatusReactionWrapper from 'soapbox/components/status-reaction-wrapper.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
 import copy from 'soapbox/utils/copy.ts';
diff --git a/src/components/status-hover-card.tsx b/src/components/status-hover-card.tsx
index d6d04ceba..5c8990610 100644
--- a/src/components/status-hover-card.tsx
+++ b/src/components/status-hover-card.tsx
@@ -10,7 +10,8 @@ import {
 import { fetchStatus } from 'soapbox/actions/statuses.ts';
 import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
 import StatusContainer from 'soapbox/containers/status-container.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import { showStatusHoverCard } from './hover-status-wrapper.tsx';
 
diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx
index b634b703f..0afc1966d 100644
--- a/src/components/status-list.tsx
+++ b/src/components/status-list.tsx
@@ -9,7 +9,7 @@ import StatusContainer from 'soapbox/containers/status-container.tsx';
 import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
-import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import type { VirtuosoHandle } from 'react-virtuoso';
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index ad725ed1c..eba27de25 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -7,7 +7,7 @@ import PreviewCard from 'soapbox/components/preview-card.tsx';
 import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview.tsx';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card.tsx';
 import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { List as ImmutableList } from 'immutable';
 import type { Status, Attachment } from 'soapbox/types/entities.ts';
diff --git a/src/components/status-reaction-wrapper.tsx b/src/components/status-reaction-wrapper.tsx
index 134b21cba..d39de8297 100644
--- a/src/components/status-reaction-wrapper.tsx
+++ b/src/components/status-reaction-wrapper.tsx
@@ -4,7 +4,10 @@ import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import EmojiSelector from 'soapbox/components/ui/emoji-selector.tsx';
 import Portal from 'soapbox/components/ui/portal.tsx';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 import { getReactForStatus } from 'soapbox/utils/emoji-reacts.ts';
 
diff --git a/src/components/status-reply-mentions.tsx b/src/components/status-reply-mentions.tsx
index 5179d8e7e..7e11bc86e 100644
--- a/src/components/status-reply-mentions.tsx
+++ b/src/components/status-reply-mentions.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals.ts';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
 import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
 import type { Status } from 'soapbox/types/entities.ts';
diff --git a/src/components/status.tsx b/src/components/status.tsx
index 70e38d033..212a508c8 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -18,7 +18,8 @@ import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
-import { useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status.ts';
 
 import EventPreview from './event-preview.tsx';
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index b7f103b83..fb0838296 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -13,7 +13,10 @@ import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
diff --git a/src/components/still-image.tsx b/src/components/still-image.tsx
index f142e7c35..080d4533a 100644
--- a/src/components/still-image.tsx
+++ b/src/components/still-image.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useRef } from 'react';
 
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 export interface IStillImage {
   /** Image alt text. */
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index cfa577c42..0ed1a51af 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -13,7 +13,9 @@ import { FormattedMessage } from 'react-intl';
 
 import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link.tsx';
 import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
-import { useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 const ThumbNavigation: React.FC = (): JSX.Element => {
   const { account } = useOwnAccount();
diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx
index 452926a8f..b386d8967 100644
--- a/src/components/translate-button.tsx
+++ b/src/components/translate-button.tsx
@@ -5,7 +5,10 @@ import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses
 import Button from 'soapbox/components/ui/button.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import type { Status } from 'soapbox/types/entities.ts';
 
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 3bd7b5737..0935b3321 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -2,7 +2,7 @@ import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
 import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import { useEffect, useState } from 'react';
 
-import { useDimensions } from 'soapbox/hooks/index.ts';
+import { useDimensions } from 'soapbox/hooks/useDimensions.ts';
 
 import HStack from './hstack.tsx';
 import Icon from './icon.tsx';
diff --git a/src/components/ui/column.tsx b/src/components/ui/column.tsx
index 6dbb33a1b..92415faf8 100644
--- a/src/components/ui/column.tsx
+++ b/src/components/ui/column.tsx
@@ -4,7 +4,7 @@ import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Helmet from 'soapbox/components/helmet.tsx';
-import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from './card.tsx';
 
diff --git a/src/components/ui/emoji-selector.tsx b/src/components/ui/emoji-selector.tsx
index 997677bdc..77d0cea4c 100644
--- a/src/components/ui/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector.tsx
@@ -7,7 +7,9 @@ import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
-import { useClickOutside, useFeatures, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index fa1f4d2f6..11bbcc66f 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import React, { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useLocale } from 'soapbox/hooks/index.ts';
+import { useLocale } from 'soapbox/hooks/useLocale.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
 import Icon from './icon.tsx';
diff --git a/src/components/ui/language-dropdown.tsx b/src/components/ui/language-dropdown.tsx
index 88c24c8f3..ee9f4638d 100644
--- a/src/components/ui/language-dropdown.tsx
+++ b/src/components/ui/language-dropdown.tsx
@@ -4,7 +4,7 @@ import { openDropdownMenu } from 'soapbox/actions/dropdown-menu.ts';
 import DropdownMenu, { MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import { languages } from 'soapbox/features/preferences/index.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 function formatLanguages(languageMap: Record<string, string>) {
   const langCodes = Object.keys(languageMap).sort().map((sig) => {
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 94d1a7d02..cafa7ba94 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { forwardRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useLocale } from 'soapbox/hooks/index.ts';
+import { useLocale } from 'soapbox/hooks/useLocale.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
 import Stack from './stack.tsx';
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index acf01b312..53aa79d91 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -22,7 +22,8 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Motion from 'soapbox/features/ui/util/optional-motion.tsx';
-import { useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { Attachment } from 'soapbox/types/entities.ts';
 
 export const MIMETYPE_ICONS: Record<string, string> = {
diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx
index 54158bdd7..b64ef163b 100644
--- a/src/components/verification-badge.tsx
+++ b/src/components/verification-badge.tsx
@@ -3,7 +3,7 @@ import { useIntl, defineMessages } from 'react-intl';
 
 import verifiedIcon from 'soapbox/assets/icons/verified.svg';
 import Icon from 'soapbox/components/ui/icon.tsx';
-import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const messages = defineMessages({
   verified: { id: 'account.verified', defaultMessage: 'Verified Account' },
diff --git a/src/containers/status-container.tsx b/src/containers/status-container.tsx
index 46ffff09a..8be001464 100644
--- a/src/containers/status-container.tsx
+++ b/src/containers/status-container.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import Status, { IStatus } from 'soapbox/components/status.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IStatusContainer extends Omit<IStatus, 'status'> {
diff --git a/src/contexts/chat-context.tsx b/src/contexts/chat-context.tsx
index 069320b75..be68d000e 100644
--- a/src/contexts/chat-context.tsx
+++ b/src/contexts/chat-context.tsx
@@ -2,7 +2,9 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 
 import { toggleMainWindow } from 'soapbox/actions/chats.ts';
-import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { IChat, useChat } from 'soapbox/queries/chats.ts';
 
 const ChatContext = createContext<any>({
diff --git a/src/entity-store/selectors.ts b/src/entity-store/selectors.ts
index 78aba6ff2..8499cb8d6 100644
--- a/src/entity-store/selectors.ts
+++ b/src/entity-store/selectors.ts
@@ -1,4 +1,4 @@
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import type { EntitiesPath } from './hooks/types.ts';
 import type { Entity, EntityListState } from './types.ts';
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 132d1d03f..03c1994a1 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -5,7 +5,9 @@ import { useParams } from 'react-router-dom';
 import { fetchAboutPage } from 'soapbox/actions/about.ts';
 import { Navlinks } from 'soapbox/components/navlinks.tsx';
 import { Card } from 'soapbox/components/ui/card.tsx';
-import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import { languages } from '../preferences/index.tsx';
 
diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx
index e922a7203..ed751a393 100644
--- a/src/features/account-gallery/components/media-item.tsx
+++ b/src/features/account-gallery/components/media-item.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 import Blurhash from 'soapbox/components/blurhash.tsx';
 import StillImage from 'soapbox/components/still-image.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { isIOS } from 'soapbox/is-mobile.ts';
 
 import type { Attachment } from 'soapbox/types/entities.ts';
diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index f9ef1b4a3..281ea821b 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -10,7 +10,8 @@ import LoadMore from 'soapbox/components/load-more.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { getAccountGallery } from 'soapbox/selectors/index.ts';
 
 import MediaItem from './components/media-item.tsx';
diff --git a/src/features/account-timeline/index.tsx b/src/features/account-timeline/index.tsx
index 319b5bb95..843809a4c 100644
--- a/src/features/account-timeline/index.tsx
+++ b/src/features/account-timeline/index.tsx
@@ -11,7 +11,11 @@ import StatusList from 'soapbox/components/status-list.tsx';
 import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
 const getStatusIds = makeGetStatusIds();
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index ebe82c46f..76f8919a4 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -44,7 +44,10 @@ import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note.tsx';
 import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
 import SubscriptionButton from 'soapbox/features/ui/components/subscription-button.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
 import { ChatKeys, useChats } from 'soapbox/queries/chats.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx
index b31a68a46..60e371b14 100644
--- a/src/features/admin/announcements.tsx
+++ b/src/features/admin/announcements.tsx
@@ -9,7 +9,7 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { AdminAnnouncement } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/admin/components/admin-tabs.tsx b/src/features/admin/components/admin-tabs.tsx
index fb5c2bef4..32c635672 100644
--- a/src/features/admin/components/admin-tabs.tsx
+++ b/src/features/admin/components/admin-tabs.tsx
@@ -2,7 +2,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
 import Tabs from 'soapbox/components/ui/tabs.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   dashboard: { id: 'admin_nav.dashboard', defaultMessage: 'Dashboard' },
diff --git a/src/features/admin/components/registration-mode-picker.tsx b/src/features/admin/components/registration-mode-picker.tsx
index e9ee8a72d..2e027182e 100644
--- a/src/features/admin/components/registration-mode-picker.tsx
+++ b/src/features/admin/components/registration-mode-picker.tsx
@@ -2,7 +2,8 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { updateConfig } from 'soapbox/actions/admin.ts';
 import { RadioGroup, RadioItem } from 'soapbox/components/radio.tsx';
-import { useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { InstanceV2 } from 'soapbox/schemas/instance.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index fb80750f1..33079ce37 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -9,7 +9,7 @@ import StatusContent from 'soapbox/components/status-content.tsx';
 import StatusMedia from 'soapbox/components/status-media.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { AdminReport, Status } from 'soapbox/types/entities.ts';
 
diff --git a/src/features/admin/components/report.tsx b/src/features/admin/components/report.tsx
index 5bb8f2cce..42c8b1f52 100644
--- a/src/features/admin/components/report.tsx
+++ b/src/features/admin/components/report.tsx
@@ -15,7 +15,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetReport } from 'soapbox/selectors/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/admin/components/unapproved-account.tsx b/src/features/admin/components/unapproved-account.tsx
index 0338789e9..a11019e38 100644
--- a/src/features/admin/components/unapproved-account.tsx
+++ b/src/features/admin/components/unapproved-account.tsx
@@ -2,7 +2,8 @@ import { approveUser, rejectUser } from 'soapbox/actions/admin.ts';
 import { useAccount } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IUnapprovedAccount {
   accountId: string;
diff --git a/src/features/admin/domains.tsx b/src/features/admin/domains.tsx
index 5db2a1f96..a352c2bc0 100644
--- a/src/features/admin/domains.tsx
+++ b/src/features/admin/domains.tsx
@@ -11,7 +11,7 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 import Indicator from '../developers/components/indicator.tsx';
diff --git a/src/features/admin/hooks/useAdminNostrRelays.ts b/src/features/admin/hooks/useAdminNostrRelays.ts
index 8ef6326c7..5a8a06ef0 100644
--- a/src/features/admin/hooks/useAdminNostrRelays.ts
+++ b/src/features/admin/hooks/useAdminNostrRelays.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { z } from 'zod';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
 const relayEntitySchema = z.object({
   url: z.string().url(),
diff --git a/src/features/admin/index.tsx b/src/features/admin/index.tsx
index 2e703aa8d..e6e33dcef 100644
--- a/src/features/admin/index.tsx
+++ b/src/features/admin/index.tsx
@@ -2,7 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Switch, Route } from 'react-router-dom';
 
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import AdminTabs from './components/admin-tabs.tsx';
 import Waitlist from './tabs/awaiting-approval.tsx';
diff --git a/src/features/admin/nostr-relays.tsx b/src/features/admin/nostr-relays.tsx
index 3c8a9320e..7d90c1c49 100644
--- a/src/features/admin/nostr-relays.tsx
+++ b/src/features/admin/nostr-relays.tsx
@@ -8,7 +8,7 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import RelayEditor, { RelayData } from 'soapbox/features/nostr-relays/components/relay-editor.tsx';
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
 import { useAdminNostrRelays } from './hooks/useAdminNostrRelays.ts';
 
diff --git a/src/features/admin/rules.tsx b/src/features/admin/rules.tsx
index 150d960d3..515b90358 100644
--- a/src/features/admin/rules.tsx
+++ b/src/features/admin/rules.tsx
@@ -9,7 +9,7 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { AdminRule } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/admin/tabs/awaiting-approval.tsx b/src/features/admin/tabs/awaiting-approval.tsx
index eead7067c..7fda9f6ab 100644
--- a/src/features/admin/tabs/awaiting-approval.tsx
+++ b/src/features/admin/tabs/awaiting-approval.tsx
@@ -3,7 +3,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchUsers } from 'soapbox/actions/admin.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import UnapprovedAccount from '../components/unapproved-account.tsx';
 
diff --git a/src/features/admin/tabs/dashboard.tsx b/src/features/admin/tabs/dashboard.tsx
index e859acb11..74f1731f6 100644
--- a/src/features/admin/tabs/dashboard.tsx
+++ b/src/features/admin/tabs/dashboard.tsx
@@ -9,7 +9,9 @@ import { CardTitle } from 'soapbox/components/ui/card.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import sourceCode from 'soapbox/utils/code.ts';
 import { download } from 'soapbox/utils/download.ts';
 import { parseVersion } from 'soapbox/utils/features.ts';
diff --git a/src/features/admin/tabs/reports.tsx b/src/features/admin/tabs/reports.tsx
index 28f6f7874..55bc1c815 100644
--- a/src/features/admin/tabs/reports.tsx
+++ b/src/features/admin/tabs/reports.tsx
@@ -3,7 +3,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchReports } from 'soapbox/actions/admin.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import Report from '../components/report.tsx';
 
diff --git a/src/features/aliases/components/account.tsx b/src/features/aliases/components/account.tsx
index cd3153efe..8a208b64d 100644
--- a/src/features/aliases/components/account.tsx
+++ b/src/features/aliases/components/account.tsx
@@ -6,7 +6,9 @@ import { useAccount } from 'soapbox/api/hooks/index.ts';
 import AccountComponent from 'soapbox/components/account.tsx';
 import IconButton from 'soapbox/components/icon-button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 const messages = defineMessages({
   add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index 1d88b1f49..511c66a91 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -5,7 +5,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases.ts';
 import Icon from 'soapbox/components/icon.tsx';
 import Button from 'soapbox/components/ui/button.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index e078100a1..b2ecab4d6 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -9,7 +9,10 @@ import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import Account from './components/account.tsx';
 import Search from './components/search.tsx';
diff --git a/src/features/auth-login/components/captcha.tsx b/src/features/auth-login/components/captcha.tsx
index db350e39a..8c1bdf8cb 100644
--- a/src/features/auth-login/components/captcha.tsx
+++ b/src/features/auth-login/components/captcha.tsx
@@ -6,7 +6,7 @@ import { fetchCaptcha } from 'soapbox/actions/auth.ts';
 import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { AxiosResponse } from 'axios';
 
diff --git a/src/features/auth-login/components/consumer-button.tsx b/src/features/auth-login/components/consumer-button.tsx
index d16224d0c..a5f904e68 100644
--- a/src/features/auth-login/components/consumer-button.tsx
+++ b/src/features/auth-login/components/consumer-button.tsx
@@ -10,7 +10,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import { prepareRequest } from 'soapbox/actions/consumer-auth.ts';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Tooltip from 'soapbox/components/ui/tooltip.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { capitalize } from 'soapbox/utils/strings.ts';
 
 const messages = defineMessages({
diff --git a/src/features/auth-login/components/consumers-list.tsx b/src/features/auth-login/components/consumers-list.tsx
index 1869920c2..4b91c69bb 100644
--- a/src/features/auth-login/components/consumers-list.tsx
+++ b/src/features/auth-login/components/consumers-list.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { Card } from 'soapbox/components/ui/card.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useInstance } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import ConsumerButton from './consumer-button.tsx';
 
diff --git a/src/features/auth-login/components/login-form.tsx b/src/features/auth-login/components/login-form.tsx
index 16e2e9761..2ab22fa40 100644
--- a/src/features/auth-login/components/login-form.tsx
+++ b/src/features/auth-login/components/login-form.tsx
@@ -6,7 +6,7 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 const messages = defineMessages({
   username: {
diff --git a/src/features/auth-login/components/login-page.tsx b/src/features/auth-login/components/login-page.tsx
index e73776739..9fcdb9e7c 100644
--- a/src/features/auth-login/components/login-page.tsx
+++ b/src/features/auth-login/components/login-page.tsx
@@ -6,7 +6,10 @@ import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth.ts
 import { fetchInstance } from 'soapbox/actions/instance.ts';
 import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import { BigCard } from 'soapbox/components/big-card.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { getRedirectUrl } from 'soapbox/utils/redirect.ts';
 
 import ConsumersList from './consumers-list.tsx';
diff --git a/src/features/auth-login/components/otp-auth-form.tsx b/src/features/auth-login/components/otp-auth-form.tsx
index 9779dc8a1..f5f524b9d 100644
--- a/src/features/auth-login/components/otp-auth-form.tsx
+++ b/src/features/auth-login/components/otp-auth-form.tsx
@@ -9,7 +9,7 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const messages = defineMessages({
   otpCodeHint: { id: 'login.fields.otp_code_hint', defaultMessage: 'Enter the two-factor code generated by your phone app or use one of your recovery codes' },
diff --git a/src/features/auth-login/components/password-reset-confirm.tsx b/src/features/auth-login/components/password-reset-confirm.tsx
index ff7ac175c..d3a29cb0b 100644
--- a/src/features/auth-login/components/password-reset-confirm.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.tsx
@@ -9,7 +9,7 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const token = new URLSearchParams(window.location.search).get('reset_password_token');
 
diff --git a/src/features/auth-login/components/password-reset.tsx b/src/features/auth-login/components/password-reset.tsx
index c7790cf6b..f5466b11b 100644
--- a/src/features/auth-login/components/password-reset.tsx
+++ b/src/features/auth-login/components/password-reset.tsx
@@ -9,7 +9,8 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/auth-login/components/registration-form.tsx b/src/features/auth-login/components/registration-form.tsx
index 8ab3d2eb9..3609dbe8f 100644
--- a/src/features/auth-login/components/registration-form.tsx
+++ b/src/features/auth-login/components/registration-form.tsx
@@ -20,7 +20,10 @@ import Input from 'soapbox/components/ui/input.tsx';
 import Select from 'soapbox/components/ui/select.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import CaptchaField from 'soapbox/features/auth-login/components/captcha.tsx';
-import { useAppDispatch, useSettings, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 const messages = defineMessages({
   username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' },
diff --git a/src/features/auth-login/components/registration-page.tsx b/src/features/auth-login/components/registration-page.tsx
index 94e4e0adc..857ab3f3b 100644
--- a/src/features/auth-login/components/registration-page.tsx
+++ b/src/features/auth-login/components/registration-page.tsx
@@ -4,7 +4,10 @@ import { Redirect } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { BigCard } from 'soapbox/components/big-card.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
 
 import RegistrationForm from './registration-form.tsx';
 
diff --git a/src/features/auth-token-list/index.tsx b/src/features/auth-token-list/index.tsx
index 31974734c..2e1532661 100644
--- a/src/features/auth-token-list/index.tsx
+++ b/src/features/auth-token-list/index.tsx
@@ -11,7 +11,8 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { Token } from 'soapbox/reducers/security.ts';
 
 const messages = defineMessages({
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index f1f80589f..df96afeff 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -10,7 +10,8 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import type { Backup as BackupEntity } from 'soapbox/reducers/backups.ts';
 
diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index 132f6be85..c48ae5925 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -11,7 +11,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 import NewFolderForm from './components/new-folder-form.tsx';
 
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index 17fac5245..0b1880e9d 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -14,8 +14,10 @@ import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import StatusList from 'soapbox/components/status-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/chats/components/chat-composer.tsx b/src/features/chats/components/chat-composer.tsx
index a940f0879..e7f2ce998 100644
--- a/src/features/chats/components/chat-composer.tsx
+++ b/src/features/chats/components/chat-composer.tsx
@@ -13,7 +13,9 @@ import Text from 'soapbox/components/ui/text.tsx';
 import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import UploadButton from 'soapbox/features/compose/components/upload-button.tsx';
 import emojiSearch from 'soapbox/features/emoji/search.ts';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { Attachment } from 'soapbox/types/entities.ts';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
diff --git a/src/features/chats/components/chat-list-item.tsx b/src/features/chats/components/chat-list-item.tsx
index 60fb5eae8..fec072142 100644
--- a/src/features/chats/components/chat-list-item.tsx
+++ b/src/features/chats/components/chat-list-item.tsx
@@ -14,7 +14,9 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { IChat, useChatActions } from 'soapbox/queries/chats.ts';
 
 import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
diff --git a/src/features/chats/components/chat-list.tsx b/src/features/chats/components/chat-list.tsx
index c9388e740..1ae71b883 100644
--- a/src/features/chats/components/chat-list.tsx
+++ b/src/features/chats/components/chat-list.tsx
@@ -7,7 +7,7 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useChats } from 'soapbox/queries/chats.ts';
 
 import ChatListItem from './chat-list-item.tsx';
diff --git a/src/features/chats/components/chat-message-list-intro.tsx b/src/features/chats/components/chat-message-list-intro.tsx
index 69a4d970d..46c4274f9 100644
--- a/src/features/chats/components/chat-message-list-intro.tsx
+++ b/src/features/chats/components/chat-message-list-intro.tsx
@@ -12,7 +12,8 @@ import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { useChatActions } from 'soapbox/queries/chats.ts';
 import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
diff --git a/src/features/chats/components/chat-message-list.tsx b/src/features/chats/components/chat-message-list.tsx
index 0c3463eb9..f24c21912 100644
--- a/src/features/chats/components/chat-message-list.tsx
+++ b/src/features/chats/components/chat-message-list.tsx
@@ -9,7 +9,8 @@ import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message.tsx';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { IChat, useChatActions, useChatMessages } from 'soapbox/queries/chats.ts';
 
 import ChatMessageListIntro from './chat-message-list-intro.tsx';
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index 4b9b8b5e1..8e1f7e091 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -21,7 +21,9 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import emojify from 'soapbox/features/emoji/index.ts';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import { stripHTML } from 'soapbox/utils/html.ts';
diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx
index fa744ba17..c8443b655 100644
--- a/src/features/chats/components/chat-page/chat-page.tsx
+++ b/src/features/chats/components/chat-page/chat-page.tsx
@@ -3,7 +3,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import ChatPageMain from './components/chat-page-main.tsx';
 import ChatPageNew from './components/chat-page-new.tsx';
diff --git a/src/features/chats/components/chat-page/components/chat-page-main.tsx b/src/features/chats/components/chat-page/components/chat-page-main.tsx
index f9b3abc57..a859766e0 100644
--- a/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -19,7 +19,9 @@ import Text from 'soapbox/components/ui/text.tsx';
 import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
 import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { MessageExpirationValues, useChat, useChatActions, useChats } from 'soapbox/queries/chats.ts';
 import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
diff --git a/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index fb883fe6f..8b1a26b73 100644
--- a/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -13,7 +13,9 @@ import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
 import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
-import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 type FormData = {
diff --git a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 82279ee85..f900007ea 100644
--- a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -8,7 +8,8 @@ import { CardTitle } from 'soapbox/components/ui/card.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { IChat } from 'soapbox/queries/chats.ts';
 
 import ChatList from '../../chat-list.tsx';
diff --git a/src/features/chats/components/chat-page/components/welcome.tsx b/src/features/chats/components/chat-page/components/welcome.tsx
index 6b0c3c4f0..7fd76c834 100644
--- a/src/features/chats/components/chat-page/components/welcome.tsx
+++ b/src/features/chats/components/chat-page/components/welcome.tsx
@@ -8,7 +8,7 @@ import Form from 'soapbox/components/ui/form.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 type FormData = {
diff --git a/src/features/chats/components/chat-pane/chat-pane.tsx b/src/features/chats/components/chat-pane/chat-pane.tsx
index 54e246003..c051aec68 100644
--- a/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -5,7 +5,8 @@ import { FormattedMessage } from 'react-intl';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
-import { useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { IChat, useChats } from 'soapbox/queries/chats.ts';
 
 import ChatList from '../chat-list.tsx';
diff --git a/src/features/chats/components/chat-search/chat-search.tsx b/src/features/chats/components/chat-search/chat-search.tsx
index d3faefdc9..98a735b42 100644
--- a/src/features/chats/components/chat-search/chat-search.tsx
+++ b/src/features/chats/components/chat-search/chat-search.tsx
@@ -10,7 +10,7 @@ import Icon from 'soapbox/components/ui/icon.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
-import { useDebounce } from 'soapbox/hooks/index.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
 import { useChats, ChatKeys } from 'soapbox/queries/chats.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import useAccountSearch from 'soapbox/queries/search.ts';
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index da67e2074..4caf51998 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -5,7 +5,7 @@ import { List as ImmutableList } from 'immutable';
 import { openModal } from 'soapbox/actions/modals.ts';
 import Blurhash from 'soapbox/components/blurhash.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import ChatUploadPreview from './chat-upload-preview.tsx';
 
diff --git a/src/features/chats/components/chat-widget/chat-settings.tsx b/src/features/chats/components/chat-widget/chat-settings.tsx
index ba96c53cc..1ec687cb3 100644
--- a/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -13,7 +13,9 @@ import Select from 'soapbox/components/ui/select.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { messageExpirationOptions, MessageExpirationValues, useChatActions } from 'soapbox/queries/chats.ts';
 import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
diff --git a/src/features/chats/components/chat-widget/chat-widget.tsx b/src/features/chats/components/chat-widget/chat-widget.tsx
index 05d8f68f3..4ae193e6b 100644
--- a/src/features/chats/components/chat-widget/chat-widget.tsx
+++ b/src/features/chats/components/chat-widget/chat-widget.tsx
@@ -1,7 +1,7 @@
 import { useHistory } from 'react-router-dom';
 
 import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import ChatPane from '../chat-pane/chat-pane.tsx';
 
diff --git a/src/features/chats/components/chat.tsx b/src/features/chats/components/chat.tsx
index 0cf9898f6..821bd7555 100644
--- a/src/features/chats/components/chat.tsx
+++ b/src/features/chats/components/chat.tsx
@@ -5,7 +5,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { uploadMedia } from 'soapbox/actions/media.ts';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
 import { IChat, useChatActions } from 'soapbox/queries/chats.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx
index d01a8276e..3840b3468 100644
--- a/src/features/community-timeline/index.tsx
+++ b/src/features/community-timeline/index.tsx
@@ -5,8 +5,12 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines.ts';
 import { useCommunityStream } from 'soapbox/api/hooks/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppSelector, useAppDispatch, useSettings, useTheme, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 import Timeline from '../ui/components/timeline.tsx';
 
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 1b369404d..fa693bb68 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -21,7 +21,13 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
 import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { usePrevious } from 'soapbox/hooks/usePrevious.ts';
 
 import QuotedStatusContainer from '../containers/quoted-status-container.tsx';
 import ReplyIndicatorContainer from '../containers/reply-indicator-container.ts';
diff --git a/src/features/compose/components/markdown-button.tsx b/src/features/compose/components/markdown-button.tsx
index 4ce407b94..15b4c5531 100644
--- a/src/features/compose/components/markdown-button.tsx
+++ b/src/features/compose/components/markdown-button.tsx
@@ -2,7 +2,8 @@ import markdownIcon from '@tabler/icons/outline/markdown.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeComposeContentType } from 'soapbox/actions/compose.ts';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 import ComposeFormButton from './compose-form-button.tsx';
 
diff --git a/src/features/compose/components/poll-button.tsx b/src/features/compose/components/poll-button.tsx
index a541b8851..96d642cf7 100644
--- a/src/features/compose/components/poll-button.tsx
+++ b/src/features/compose/components/poll-button.tsx
@@ -2,7 +2,8 @@ import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addPoll, removePoll } from 'soapbox/actions/compose.ts';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 import ComposeFormButton from './compose-form-button.tsx';
 
diff --git a/src/features/compose/components/polls/poll-form.tsx b/src/features/compose/components/polls/poll-form.tsx
index bd7e2888b..4ef1043aa 100644
--- a/src/features/compose/components/polls/poll-form.tsx
+++ b/src/features/compose/components/polls/poll-form.tsx
@@ -8,7 +8,9 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import DurationSelector from './duration-selector.tsx';
 
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index cb4a4ba8d..252a904bc 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -14,7 +14,8 @@ import { changeComposeVisibility } from 'soapbox/actions/compose.ts';
 import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import Icon from 'soapbox/components/icon.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 
 import Motion from '../../ui/util/optional-motion.tsx';
diff --git a/src/features/compose/components/reply-group-indicator.tsx b/src/features/compose/components/reply-group-indicator.tsx
index 0dec91155..ae58dd341 100644
--- a/src/features/compose/components/reply-group-indicator.tsx
+++ b/src/features/compose/components/reply-group-indicator.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 
 import Link from 'soapbox/components/link.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { Group } from 'soapbox/schemas/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index d802e07ad..d0b7b3e06 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -2,7 +2,11 @@ import { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals.ts';
-import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 import { shortenNostr } from 'soapbox/utils/nostr.ts';
diff --git a/src/features/compose/components/schedule-button.tsx b/src/features/compose/components/schedule-button.tsx
index fbb37fa98..17bb7efec 100644
--- a/src/features/compose/components/schedule-button.tsx
+++ b/src/features/compose/components/schedule-button.tsx
@@ -2,7 +2,8 @@ import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { addSchedule, removeSchedule } from 'soapbox/actions/compose.ts';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 import ComposeFormButton from './compose-form-button.tsx';
 
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index a3ce3d23a..801d2b151 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -7,7 +7,8 @@ import { Datetime } from 'soapbox/components/ui/datetime.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 const messages = defineMessages({
   schedule: { id: 'schedule.post_time', defaultMessage: 'Post Date/Time' },
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index e2611aa4b..039a939be 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -18,7 +18,8 @@ import StatusContainer from 'soapbox/containers/status-container.tsx';
 import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account.tsx';
 import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import type { VirtuosoHandle } from 'react-virtuoso';
diff --git a/src/features/compose/components/search-zap-split.tsx b/src/features/compose/components/search-zap-split.tsx
index 8b66eaa64..b5a63e6fb 100644
--- a/src/features/compose/components/search-zap-split.tsx
+++ b/src/features/compose/components/search-zap-split.tsx
@@ -15,7 +15,8 @@ import {
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { Account } from 'soapbox/schemas/index.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
 import { RootState } from 'soapbox/store.ts';
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index 3d43c1560..775cc7178 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -17,7 +17,8 @@ import {
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
 import { AppDispatch, RootState } from 'soapbox/store.ts';
 
diff --git a/src/features/compose/components/spoiler-button.tsx b/src/features/compose/components/spoiler-button.tsx
index 7e2dbf915..e23e497ac 100644
--- a/src/features/compose/components/spoiler-button.tsx
+++ b/src/features/compose/components/spoiler-button.tsx
@@ -2,7 +2,8 @@ import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { changeComposeSpoilerness } from 'soapbox/actions/compose.ts';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 import ComposeFormButton from './compose-form-button.tsx';
 
diff --git a/src/features/compose/components/spoiler-input.tsx b/src/features/compose/components/spoiler-input.tsx
index b52fd953a..46b7b6e28 100644
--- a/src/features/compose/components/spoiler-input.tsx
+++ b/src/features/compose/components/spoiler-input.tsx
@@ -7,7 +7,8 @@ import AutosuggestInput, { IAutosuggestInput } from 'soapbox/components/autosugg
 import Divider from 'soapbox/components/ui/divider.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 const messages = defineMessages({
   title: { id: 'compose_form.spoiler_title', defaultMessage: 'Sensitive content' },
diff --git a/src/features/compose/components/upload-button.tsx b/src/features/compose/components/upload-button.tsx
index 04ae2452a..dc9a463d7 100644
--- a/src/features/compose/components/upload-button.tsx
+++ b/src/features/compose/components/upload-button.tsx
@@ -4,7 +4,7 @@ import { useRef } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { useInstance } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
diff --git a/src/features/compose/components/upload-form.tsx b/src/features/compose/components/upload-form.tsx
index d4ceb0e83..290d0b3b8 100644
--- a/src/features/compose/components/upload-form.tsx
+++ b/src/features/compose/components/upload-form.tsx
@@ -3,7 +3,8 @@ import { useCallback, useRef } from 'react';
 
 import { changeMediaOrder } from 'soapbox/actions/compose.ts';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 import UploadProgress from './upload-progress.tsx';
 import Upload from './upload.tsx';
diff --git a/src/features/compose/components/upload-progress.tsx b/src/features/compose/components/upload-progress.tsx
index d26a1ef98..d581dff5e 100644
--- a/src/features/compose/components/upload-progress.tsx
+++ b/src/features/compose/components/upload-progress.tsx
@@ -1,5 +1,5 @@
 import UploadProgress from 'soapbox/components/upload-progress.tsx';
-import { useCompose } from 'soapbox/hooks/index.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 interface IComposeUploadProgress {
   composeId: string;
diff --git a/src/features/compose/components/upload.tsx b/src/features/compose/components/upload.tsx
index f0e5cb6f5..1f35e101e 100644
--- a/src/features/compose/components/upload.tsx
+++ b/src/features/compose/components/upload.tsx
@@ -2,7 +2,9 @@ import { useCallback } from 'react';
 
 import { undoUploadCompose, changeUploadCompose } from 'soapbox/actions/compose.ts';
 import Upload from 'soapbox/components/upload.tsx';
-import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 interface IUploadCompose {
   id: string;
diff --git a/src/features/compose/containers/quoted-status-container.tsx b/src/features/compose/containers/quoted-status-container.tsx
index bd43b961b..3fdd0f66a 100644
--- a/src/features/compose/containers/quoted-status-container.tsx
+++ b/src/features/compose/containers/quoted-status-container.tsx
@@ -2,7 +2,8 @@ import { useCallback } from 'react';
 
 import { cancelQuoteCompose } from 'soapbox/actions/compose.ts';
 import QuotedStatus from 'soapbox/components/quoted-status.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusContainer {
diff --git a/src/features/compose/containers/warning-container.tsx b/src/features/compose/containers/warning-container.tsx
index f51f4971f..66a7d6c21 100644
--- a/src/features/compose/containers/warning-container.tsx
+++ b/src/features/compose/containers/warning-container.tsx
@@ -1,7 +1,11 @@
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useAppSelector, useCompose, useFeatures, useOwnAccount, useSettingsNotifications } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 import { selectOwnAccount } from 'soapbox/selectors/index.ts';
 
 import Warning from '../components/warning.tsx';
diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx
index 54085027a..944672ca9 100644
--- a/src/features/compose/editor/index.tsx
+++ b/src/features/compose/editor/index.tsx
@@ -18,7 +18,7 @@ import { $createParagraphNode, $createTextNode, $getRoot, type LexicalEditor } f
 import { forwardRef, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import { useNodes } from './nodes/index.ts';
 import AutosuggestPlugin from './plugins/autosuggest-plugin.tsx';
diff --git a/src/features/compose/editor/plugins/autosuggest-plugin.tsx b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
index 717abd357..677e64702 100644
--- a/src/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -36,7 +36,8 @@ import ReactDOM from 'react-dom';
 import { clearComposeSuggestions, fetchComposeSuggestions } from 'soapbox/actions/compose.ts';
 import { chooseEmoji } from 'soapbox/actions/emojis.ts';
 import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji.tsx';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
diff --git a/src/features/compose/editor/plugins/state-plugin.tsx b/src/features/compose/editor/plugins/state-plugin.tsx
index fb366bdb2..6940eeb66 100644
--- a/src/features/compose/editor/plugins/state-plugin.tsx
+++ b/src/features/compose/editor/plugins/state-plugin.tsx
@@ -3,7 +3,7 @@ import { $getRoot } from 'lexical';
 import { useEffect } from 'react';
 
 import { setEditorState } from 'soapbox/actions/compose.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 interface IStatePlugin {
   composeId: string;
diff --git a/src/features/conversations/components/conversation.tsx b/src/features/conversations/components/conversation.tsx
index 6c5c55346..7f6866f71 100644
--- a/src/features/conversations/components/conversation.tsx
+++ b/src/features/conversations/components/conversation.tsx
@@ -2,7 +2,8 @@ import { useHistory } from 'react-router-dom';
 
 import { markConversationRead } from 'soapbox/actions/conversations.ts';
 import StatusContainer from 'soapbox/containers/status-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
 
 interface IConversation {
diff --git a/src/features/conversations/components/conversations-list.tsx b/src/features/conversations/components/conversations-list.tsx
index 645064ad6..261ded52d 100644
--- a/src/features/conversations/components/conversations-list.tsx
+++ b/src/features/conversations/components/conversations-list.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage } from 'react-intl';
 
 import { expandConversations } from 'soapbox/actions/conversations.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import Conversation from './conversation.tsx';
 
diff --git a/src/features/conversations/index.tsx b/src/features/conversations/index.tsx
index 2c6ef1547..2c6c64546 100644
--- a/src/features/conversations/index.tsx
+++ b/src/features/conversations/index.tsx
@@ -6,7 +6,7 @@ import { mountConversations, unmountConversations, expandConversations } from 's
 import { useDirectStream } from 'soapbox/api/hooks/index.ts';
 import AccountSearch from 'soapbox/components/account-search.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import ConversationsList from './components/conversations-list.tsx';
 
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 30bbb1809..5aa46fc47 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -7,7 +7,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import { getExplorerUrl } from '../utils/block-explorer.ts';
 import { getTitle } from '../utils/coin-db.ts';
diff --git a/src/features/crypto-donate/components/crypto-donate-panel.tsx b/src/features/crypto-donate/components/crypto-donate-panel.tsx
index 53983cc78..c74cdd122 100644
--- a/src/features/crypto-donate/components/crypto-donate-panel.tsx
+++ b/src/features/crypto-donate/components/crypto-donate-panel.tsx
@@ -3,7 +3,8 @@ import { useHistory } from 'react-router-dom';
 
 import Text from 'soapbox/components/ui/text.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import SiteWallet from './site-wallet.tsx';
 
diff --git a/src/features/crypto-donate/components/site-wallet.tsx b/src/features/crypto-donate/components/site-wallet.tsx
index 936ecf1d0..97f920bb8 100644
--- a/src/features/crypto-donate/components/site-wallet.tsx
+++ b/src/features/crypto-donate/components/site-wallet.tsx
@@ -1,5 +1,5 @@
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import CryptoAddress from './crypto-address.tsx';
 
diff --git a/src/features/crypto-donate/index.tsx b/src/features/crypto-donate/index.tsx
index e95f5beaa..39064aa83 100644
--- a/src/features/crypto-donate/index.tsx
+++ b/src/features/crypto-donate/index.tsx
@@ -4,7 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import Accordion from 'soapbox/components/ui/accordion.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useInstance } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import SiteWallet from './components/site-wallet.tsx';
 
diff --git a/src/features/delete-account/index.tsx b/src/features/delete-account/index.tsx
index e3cf5e62d..8b86c5c9a 100644
--- a/src/features/delete-account/index.tsx
+++ b/src/features/delete-account/index.tsx
@@ -10,7 +10,8 @@ import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/developers/apps/create.tsx b/src/features/developers/apps/create.tsx
index 6ce750bc8..2c862b846 100644
--- a/src/features/developers/apps/create.tsx
+++ b/src/features/developers/apps/create.tsx
@@ -12,7 +12,8 @@ import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { getBaseURL } from 'soapbox/utils/accounts.ts';
 
 const messages = defineMessages({
diff --git a/src/features/developers/developers-challenge.tsx b/src/features/developers/developers-challenge.tsx
index f2a16309e..ea2010389 100644
--- a/src/features/developers/developers-challenge.tsx
+++ b/src/features/developers/developers-challenge.tsx
@@ -9,7 +9,7 @@ import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index 9449647bf..bdfc04dfd 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -13,7 +13,7 @@ import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 import sourceCode from 'soapbox/utils/code.ts';
 
diff --git a/src/features/developers/index.tsx b/src/features/developers/index.tsx
index 9db7b7f07..12615db7b 100644
--- a/src/features/developers/index.tsx
+++ b/src/features/developers/index.tsx
@@ -1,5 +1,5 @@
 import { getSettings } from 'soapbox/actions/settings.ts';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import DevelopersChallenge from './developers-challenge.tsx';
 import DevelopersMenu from './developers-menu.tsx';
diff --git a/src/features/developers/settings-store.tsx b/src/features/developers/settings-store.tsx
index 24ddc90c8..ce4e04d66 100644
--- a/src/features/developers/settings-store.tsx
+++ b/src/features/developers/settings-store.tsx
@@ -12,7 +12,9 @@ import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import toast from 'soapbox/toast.tsx';
 
 const isJSONValid = (text: any): boolean => {
diff --git a/src/features/direct-timeline/index.tsx b/src/features/direct-timeline/index.tsx
index 7e0b1e348..0fbe55d00 100644
--- a/src/features/direct-timeline/index.tsx
+++ b/src/features/direct-timeline/index.tsx
@@ -6,7 +6,8 @@ import { expandDirectTimeline } from 'soapbox/actions/timelines.ts';
 import { useDirectStream } from 'soapbox/api/hooks/index.ts';
 import AccountSearch from 'soapbox/components/account-search.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import Timeline from '../ui/components/timeline.tsx';
 
diff --git a/src/features/directory/components/account-card.tsx b/src/features/directory/components/account-card.tsx
index 9f3de14da..721d4fc83 100644
--- a/src/features/directory/components/account-card.tsx
+++ b/src/features/directory/components/account-card.tsx
@@ -8,7 +8,7 @@ import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IAccountCard {
diff --git a/src/features/directory/index.tsx b/src/features/directory/index.tsx
index 0c7d91301..6b507c3a4 100644
--- a/src/features/directory/index.tsx
+++ b/src/features/directory/index.tsx
@@ -9,7 +9,10 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import RadioButton from 'soapbox/components/ui/radio-button.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import AccountCard from './components/account-card.tsx';
 
diff --git a/src/features/domain-blocks/index.tsx b/src/features/domain-blocks/index.tsx
index 97f5040b9..9b6ac6e88 100644
--- a/src/features/domain-blocks/index.tsx
+++ b/src/features/domain-blocks/index.tsx
@@ -7,7 +7,8 @@ import Domain from 'soapbox/components/domain.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' },
diff --git a/src/features/edit-email/index.tsx b/src/features/edit-email/index.tsx
index 6dabf8c71..462ddba55 100644
--- a/src/features/edit-email/index.tsx
+++ b/src/features/edit-email/index.tsx
@@ -8,7 +8,7 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index 21ca51753..451dc16af 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -16,7 +16,11 @@ import Icon from 'soapbox/components/ui/icon.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import Tooltip from 'soapbox/components/ui/tooltip.tsx';
-import { useApi, useAppDispatch, useInstance, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 import { adminAccountSchema } from 'soapbox/schemas/admin-account.ts';
 import toast from 'soapbox/toast.tsx';
diff --git a/src/features/edit-password/index.tsx b/src/features/edit-password/index.tsx
index 2f0760e4b..6ef9ba123 100644
--- a/src/features/edit-password/index.tsx
+++ b/src/features/edit-password/index.tsx
@@ -8,7 +8,7 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index e855d195d..99673476b 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import Avatar from 'soapbox/components/ui/avatar.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
-import { useDraggedFiles } from 'soapbox/hooks/index.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
 
 interface IMediaInput {
   className?: string;
diff --git a/src/features/edit-profile/components/header-picker.tsx b/src/features/edit-profile/components/header-picker.tsx
index e3c21aa15..0a510e2de 100644
--- a/src/features/edit-profile/components/header-picker.tsx
+++ b/src/features/edit-profile/components/header-picker.tsx
@@ -8,7 +8,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useDraggedFiles } from 'soapbox/hooks/index.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
 
 const messages = defineMessages({
   title: { id: 'group.upload_banner.title', defaultMessage: 'Upload background picture' },
diff --git a/src/features/edit-profile/index.tsx b/src/features/edit-profile/index.tsx
index f043ec8cb..5127fa7cd 100644
--- a/src/features/edit-profile/index.tsx
+++ b/src/features/edit-profile/index.tsx
@@ -16,7 +16,11 @@ import Streamfield from 'soapbox/components/ui/streamfield.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
 import { useImageField } from 'soapbox/hooks/forms/index.ts';
-import { useAppDispatch, useOwnAccount, useFeatures, useInstance, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import toast from 'soapbox/toast.tsx';
 import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
diff --git a/src/features/email-confirmation/index.tsx b/src/features/email-confirmation/index.tsx
index b863a5b76..5be0f39ff 100644
--- a/src/features/email-confirmation/index.tsx
+++ b/src/features/email-confirmation/index.tsx
@@ -4,7 +4,7 @@ import { Redirect } from 'react-router-dom';
 
 import { confirmChangedEmail } from 'soapbox/actions/security.ts';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 import { buildErrorMessage } from 'soapbox/utils/errors.ts';
 
diff --git a/src/features/embedded-status/index.tsx b/src/features/embedded-status/index.tsx
index 76963a627..f204a6abe 100644
--- a/src/features/embedded-status/index.tsx
+++ b/src/features/embedded-status/index.tsx
@@ -6,7 +6,8 @@ import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import SiteLogo from 'soapbox/components/site-logo.tsx';
 import Status from 'soapbox/components/status.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { iframeId } from 'soapbox/iframe.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index 692cdd665..fcc9c05c3 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -7,7 +7,9 @@ import { chooseEmoji } from 'soapbox/actions/emojis.ts';
 import { changeSetting } from 'soapbox/actions/settings.ts';
 import { buildCustomEmojis } from 'soapbox/features/emoji/index.ts';
 import { EmojiPicker } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 import { RootState } from 'soapbox/store.ts';
 
 import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji/index.ts';
diff --git a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index 3a17c0804..235e6c2a5 100644
--- a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -6,7 +6,7 @@ import { createPortal } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
 
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { useClickOutside } from 'soapbox/hooks/index.ts';
+import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
 
 import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown.tsx';
 
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index 8c71b7705..ffcd99460 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -5,7 +5,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { joinEvent, leaveEvent } from 'soapbox/actions/events.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import Button from 'soapbox/components/ui/button.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import type { ButtonThemes } from 'soapbox/components/ui/useButtonStyles.ts';
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index 167448bf0..58056c2cb 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -45,7 +45,10 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
-import { useAppDispatch, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import copy from 'soapbox/utils/copy.ts';
 import { download } from 'soapbox/utils/download.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx
index 80db30bea..3b8cbc573 100644
--- a/src/features/event/event-discussion.tsx
+++ b/src/features/event/event-discussion.tsx
@@ -11,7 +11,8 @@ import Tombstone from 'soapbox/components/tombstone.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 import ComposeForm from '../compose/components/compose-form.tsx';
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index 99fc6b518..9c5cadc40 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -15,7 +15,10 @@ import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
-import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
diff --git a/src/features/events/components/event-carousel.tsx b/src/features/events/components/event-carousel.tsx
index d6de89fe3..1bf4846bd 100644
--- a/src/features/events/components/event-carousel.tsx
+++ b/src/features/events/components/event-carousel.tsx
@@ -7,7 +7,7 @@ import ReactSwipeableViews from 'react-swipeable-views';
 import EventPreview from 'soapbox/components/event-preview.tsx';
 import { Card } from 'soapbox/components/ui/card.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 import PlaceholderEventPreview from '../../placeholder/components/placeholder-event-preview.tsx';
diff --git a/src/features/events/index.tsx b/src/features/events/index.tsx
index 715a0335e..0c735817c 100644
--- a/src/features/events/index.tsx
+++ b/src/features/events/index.tsx
@@ -7,7 +7,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import { CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import EventCarousel from './components/event-carousel.tsx';
 
diff --git a/src/features/export-data/components/csv-exporter.tsx b/src/features/export-data/components/csv-exporter.tsx
index 1a638cb9f..4c2fd85c0 100644
--- a/src/features/export-data/components/csv-exporter.tsx
+++ b/src/features/export-data/components/csv-exporter.tsx
@@ -5,7 +5,7 @@ import Button from 'soapbox/components/ui/button.tsx';
 import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { AppDispatch, RootState } from 'soapbox/store.ts';
 
 interface ICSVExporter {
diff --git a/src/features/external-login/components/external-login-form.tsx b/src/features/external-login/components/external-login-form.tsx
index f4318c434..5060d0831 100644
--- a/src/features/external-login/components/external-login-form.tsx
+++ b/src/features/external-login/components/external-login-form.tsx
@@ -8,7 +8,7 @@ import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
diff --git a/src/features/favourited-statuses/index.tsx b/src/features/favourited-statuses/index.tsx
index 2b2a8bb6f..b841b43a0 100644
--- a/src/features/favourited-statuses/index.tsx
+++ b/src/features/favourited-statuses/index.tsx
@@ -9,7 +9,9 @@ import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import StatusList from 'soapbox/components/status-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.favourited_statuses', defaultMessage: 'Liked posts' },
diff --git a/src/features/federation-restrictions/components/instance-restrictions.tsx b/src/features/federation-restrictions/components/instance-restrictions.tsx
index 5d5133100..f3a71a25a 100644
--- a/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -11,7 +11,7 @@ import Icon from 'soapbox/components/icon.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useInstance } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import type { RemoteInstance } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 41d4fe869..62cd315c8 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useState } from 'react';
 
 import Icon from 'soapbox/components/icon.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
 import InstanceRestrictions from './instance-restrictions.tsx';
diff --git a/src/features/federation-restrictions/index.tsx b/src/features/federation-restrictions/index.tsx
index 862020edc..087d53da3 100644
--- a/src/features/federation-restrictions/index.tsx
+++ b/src/features/federation-restrictions/index.tsx
@@ -4,7 +4,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Accordion from 'soapbox/components/ui/accordion.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { makeGetHosts } from 'soapbox/selectors/index.ts';
 import { federationRestrictionsDisclosed } from 'soapbox/utils/state.ts';
 
diff --git a/src/features/feed-suggestions/feed-suggestions.tsx b/src/features/feed-suggestions/feed-suggestions.tsx
index 1a8695eb9..6f4f10f38 100644
--- a/src/features/feed-suggestions/feed-suggestions.tsx
+++ b/src/features/feed-suggestions/feed-suggestions.tsx
@@ -7,7 +7,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import ActionButton from '../ui/components/action-button.tsx';
 import { HotKeys } from '../ui/components/hotkeys.tsx';
diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx
index b5575efbc..31aaac6e6 100644
--- a/src/features/filters/edit-filter.tsx
+++ b/src/features/filters/edit-filter.tsx
@@ -16,7 +16,8 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Streamfield from 'soapbox/components/ui/streamfield.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { normalizeFilter } from 'soapbox/normalizers/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/filters/index.tsx b/src/features/filters/index.tsx
index 47198dd2a..13eb36a50 100644
--- a/src/features/filters/index.tsx
+++ b/src/features/filters/index.tsx
@@ -10,7 +10,9 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/follow-recommendations/index.tsx b/src/features/follow-recommendations/index.tsx
index cc0900c7f..4cf6865bf 100644
--- a/src/features/follow-recommendations/index.tsx
+++ b/src/features/follow-recommendations/index.tsx
@@ -8,7 +8,8 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   heading: { id: 'follow_recommendations.heading', defaultMessage: 'Suggested Profiles' },
diff --git a/src/features/follow-requests/components/account-authorize.tsx b/src/features/follow-requests/components/account-authorize.tsx
index 72e44bdd2..7b25f346c 100644
--- a/src/features/follow-requests/components/account-authorize.tsx
+++ b/src/features/follow-requests/components/account-authorize.tsx
@@ -2,7 +2,7 @@ import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/acc
 import { useAccount } from 'soapbox/api/hooks/index.ts';
 import Account from 'soapbox/components/account.tsx';
 import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 interface IAccountAuthorize {
   id: string;
diff --git a/src/features/follow-requests/index.tsx b/src/features/follow-requests/index.tsx
index 8bdf3f5cc..2f4b29498 100644
--- a/src/features/follow-requests/index.tsx
+++ b/src/features/follow-requests/index.tsx
@@ -6,7 +6,8 @@ import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accou
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import AccountAuthorize from './components/account-authorize.tsx';
 
diff --git a/src/features/followed-tags/index.tsx b/src/features/followed-tags/index.tsx
index 82173ac46..5bd30fdda 100644
--- a/src/features/followed-tags/index.tsx
+++ b/src/features/followed-tags/index.tsx
@@ -7,7 +7,8 @@ import Hashtag from 'soapbox/components/hashtag.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.followed_tags', defaultMessage: 'Followed hashtags' },
diff --git a/src/features/group/components/group-action-button.tsx b/src/features/group/components/group-action-button.tsx
index 02bb3109a..12462d6b5 100644
--- a/src/features/group/components/group-action-button.tsx
+++ b/src/features/group/components/group-action-button.tsx
@@ -6,7 +6,7 @@ import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup, usePendingGrou
 import Button from 'soapbox/components/ui/button.tsx';
 import { importEntities } from 'soapbox/entity-store/actions.ts';
 import { Entities } from 'soapbox/entity-store/entities.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index 5c2a764e9..0067d54ab 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -10,7 +10,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
 import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
diff --git a/src/features/group/components/group-member-list-item.tsx b/src/features/group/components/group-member-list-item.tsx
index 5c4ef3a38..2db2a43f3 100644
--- a/src/features/group/components/group-member-list-item.tsx
+++ b/src/features/group/components/group-member-list-item.tsx
@@ -14,7 +14,8 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import { deleteEntities } from 'soapbox/entity-store/actions.ts';
 import { Entities } from 'soapbox/entity-store/entities.ts';
 import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account.tsx';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
 import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups.ts';
diff --git a/src/features/group/components/group-options-button.tsx b/src/features/group/components/group-options-button.tsx
index 5a35e28cb..eb792d185 100644
--- a/src/features/group/components/group-options-button.tsx
+++ b/src/features/group/components/group-options-button.tsx
@@ -11,7 +11,8 @@ import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
 import { useLeaveGroup, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
 import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu/index.ts';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/group/components/group-tag-list-item.tsx b/src/features/group/components/group-tag-list-item.tsx
index 901595a26..c4b2f44da 100644
--- a/src/features/group/components/group-tag-list-item.tsx
+++ b/src/features/group/components/group-tag-list-item.tsx
@@ -14,7 +14,7 @@ import Text from 'soapbox/components/ui/text.tsx';
 import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { importEntities } from 'soapbox/entity-store/actions.ts';
 import { Entities } from 'soapbox/entity-store/entities.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
diff --git a/src/features/group/edit-group.tsx b/src/features/group/edit-group.tsx
index c6ebbef46..659dd758f 100644
--- a/src/features/group/edit-group.tsx
+++ b/src/features/group/edit-group.tsx
@@ -13,7 +13,8 @@ import Input from 'soapbox/components/ui/input.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { useImageField, useTextField } from 'soapbox/hooks/forms/index.ts';
-import { useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import toast from 'soapbox/toast.tsx';
 import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
diff --git a/src/features/group/group-blocked-members.tsx b/src/features/group/group-blocked-members.tsx
index 55ea8a706..8c09f2eae 100644
--- a/src/features/group/group-blocked-members.tsx
+++ b/src/features/group/group-blocked-members.tsx
@@ -9,7 +9,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import toast from 'soapbox/toast.tsx';
 
 import ColumnForbidden from '../ui/components/column-forbidden.tsx';
diff --git a/src/features/group/group-gallery.tsx b/src/features/group/group-gallery.tsx
index 466aa4cbf..bfdd804ae 100644
--- a/src/features/group/group-gallery.tsx
+++ b/src/features/group/group-gallery.tsx
@@ -6,7 +6,7 @@ import LoadMore from 'soapbox/components/load-more.tsx';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import MediaItem from '../account-gallery/components/media-item.tsx';
 
diff --git a/src/features/group/group-members.tsx b/src/features/group/group-members.tsx
index 66efb16e3..03e981345 100644
--- a/src/features/group/group-members.tsx
+++ b/src/features/group/group-members.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks/index.ts';
 import { PendingItemsRow } from 'soapbox/components/pending-items-row.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups.ts';
 
diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx
index 6b73276cc..20c5a9398 100644
--- a/src/features/group/group-tag-timeline.tsx
+++ b/src/features/group/group-tag-timeline.tsx
@@ -8,7 +8,7 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import Timeline from '../ui/components/timeline.tsx';
 
diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx
index 1118aac54..47a5a6a51 100644
--- a/src/features/group/group-timeline.tsx
+++ b/src/features/group/group-timeline.tsx
@@ -14,7 +14,10 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
 import ComposeForm from 'soapbox/features/compose/components/compose-form.tsx';
-import { useAppDispatch, useAppSelector, useDraggedFiles, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
 import Timeline from '../ui/components/timeline.tsx';
diff --git a/src/features/group/manage-group.tsx b/src/features/group/manage-group.tsx
index 0d8f6a804..d9423eb51 100644
--- a/src/features/group/manage-group.tsx
+++ b/src/features/group/manage-group.tsx
@@ -9,7 +9,8 @@ import { CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx'
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useBackend } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useBackend } from 'soapbox/hooks/useBackend.ts';
 import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import toast from 'soapbox/toast.tsx';
 import { TRUTHSOCIAL } from 'soapbox/utils/features.ts';
diff --git a/src/features/groups/components/discover/search/recent-searches.tsx b/src/features/groups/components/discover/search/recent-searches.tsx
index c35353147..665a0617e 100644
--- a/src/features/groups/components/discover/search/recent-searches.tsx
+++ b/src/features/groups/components/discover/search/recent-searches.tsx
@@ -7,7 +7,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { groupSearchHistory } from 'soapbox/settings.ts';
 import { clearRecentGroupSearches } from 'soapbox/utils/groups.ts';
 
diff --git a/src/features/groups/components/discover/search/search.tsx b/src/features/groups/components/discover/search/search.tsx
index 06584005b..c6d404c8b 100644
--- a/src/features/groups/components/discover/search/search.tsx
+++ b/src/features/groups/components/discover/search/search.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage } from 'react-intl';
 import { useGroupSearch } from 'soapbox/api/hooks/index.ts';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
-import { useDebounce, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { saveGroupSearch } from 'soapbox/utils/groups.ts';
 
 import Blankslate from './blankslate.tsx';
diff --git a/src/features/groups/components/pending-groups-row.tsx b/src/features/groups/components/pending-groups-row.tsx
index 96881a6df..3b1ae37eb 100644
--- a/src/features/groups/components/pending-groups-row.tsx
+++ b/src/features/groups/components/pending-groups-row.tsx
@@ -1,7 +1,7 @@
 import { usePendingGroups } from 'soapbox/api/hooks/index.ts';
 import { PendingItemsRow } from 'soapbox/components/pending-items-row.tsx';
 import Divider from 'soapbox/components/ui/divider.tsx';
-import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 export default () => {
   const features = useFeatures();
diff --git a/src/features/groups/index.tsx b/src/features/groups/index.tsx
index cbe819e4b..0af2987b7 100644
--- a/src/features/groups/index.tsx
+++ b/src/features/groups/index.tsx
@@ -11,7 +11,10 @@ import Button from 'soapbox/components/ui/button.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector, useDebounce, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions.ts';
 
 import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card.tsx';
diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx
index edb81235f..2416495b8 100644
--- a/src/features/hashtag-timeline/index.tsx
+++ b/src/features/hashtag-timeline/index.tsx
@@ -8,8 +8,12 @@ import List, { ListItem } from 'soapbox/components/list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
 import Timeline from 'soapbox/features/ui/components/timeline.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 interface IHashtagTimeline {
   params?: {
diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx
index 36e1371f4..426b46c8c 100644
--- a/src/features/home-timeline/index.tsx
+++ b/src/features/home-timeline/index.tsx
@@ -8,8 +8,12 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Timeline from 'soapbox/features/ui/components/timeline.tsx';
-import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
diff --git a/src/features/import-data/components/csv-importer.tsx b/src/features/import-data/components/csv-importer.tsx
index ffdf12a4f..313e4ba16 100644
--- a/src/features/import-data/components/csv-importer.tsx
+++ b/src/features/import-data/components/csv-importer.tsx
@@ -7,7 +7,7 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
diff --git a/src/features/landing-timeline/components/site-banner.tsx b/src/features/landing-timeline/components/site-banner.tsx
index 6611ea146..d4c486559 100644
--- a/src/features/landing-timeline/components/site-banner.tsx
+++ b/src/features/landing-timeline/components/site-banner.tsx
@@ -2,7 +2,7 @@ import DOMPurify from 'isomorphic-dompurify';
 
 import Markup from 'soapbox/components/markup.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useInstance } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
 import { LogoText } from './logo-text.tsx';
diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx
index 874db76d7..8bd19a80c 100644
--- a/src/features/landing-timeline/index.tsx
+++ b/src/features/landing-timeline/index.tsx
@@ -5,8 +5,11 @@ import { expandCommunityTimeline } from 'soapbox/actions/timelines.ts';
 import { useCommunityStream } from 'soapbox/api/hooks/index.ts';
 import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 import AboutPage from '../about/index.tsx';
 import Timeline from '../ui/components/timeline.tsx';
diff --git a/src/features/list-adder/components/list.tsx b/src/features/list-adder/components/list.tsx
index d7b064c0b..53bc7a7ad 100644
--- a/src/features/list-adder/components/list.tsx
+++ b/src/features/list-adder/components/list.tsx
@@ -6,7 +6,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import { removeFromListAdder, addToListAdder } from 'soapbox/actions/lists.ts';
 import IconButton from 'soapbox/components/icon-button.tsx';
 import Icon from 'soapbox/components/icon.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
diff --git a/src/features/list-adder/index.tsx b/src/features/list-adder/index.tsx
index 08ce271b8..4fe0886dd 100644
--- a/src/features/list-adder/index.tsx
+++ b/src/features/list-adder/index.tsx
@@ -6,7 +6,8 @@ import { setupListAdder, resetListAdder } from 'soapbox/actions/lists.ts';
 import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import NewListForm from '../lists/components/new-list-form.tsx';
 
diff --git a/src/features/list-editor/components/account.tsx b/src/features/list-editor/components/account.tsx
index af41238c7..fe1d424df 100644
--- a/src/features/list-editor/components/account.tsx
+++ b/src/features/list-editor/components/account.tsx
@@ -6,7 +6,8 @@ import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists.ts'
 import IconButton from 'soapbox/components/icon-button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
diff --git a/src/features/list-editor/components/edit-list-form.tsx b/src/features/list-editor/components/edit-list-form.tsx
index 00a177006..96c45a45b 100644
--- a/src/features/list-editor/components/edit-list-form.tsx
+++ b/src/features/list-editor/components/edit-list-form.tsx
@@ -5,7 +5,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   title: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index 423cffe04..9910225c7 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -8,7 +8,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
diff --git a/src/features/list-editor/index.tsx b/src/features/list-editor/index.tsx
index 729b658db..f8051ce02 100644
--- a/src/features/list-editor/index.tsx
+++ b/src/features/list-editor/index.tsx
@@ -4,7 +4,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { setupListEditor, resetListEditor } from 'soapbox/actions/lists.ts';
 import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import Account from './components/account.tsx';
 import EditListForm from './components/edit-list-form.tsx';
diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx
index 167d554ac..cbcecd06b 100644
--- a/src/features/list-timeline/index.tsx
+++ b/src/features/list-timeline/index.tsx
@@ -10,8 +10,10 @@ import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import Button from 'soapbox/components/ui/button.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 import Timeline from '../ui/components/timeline.tsx';
 
diff --git a/src/features/lists/components/new-list-form.tsx b/src/features/lists/components/new-list-form.tsx
index 4ce241a1a..bd05b15b0 100644
--- a/src/features/lists/components/new-list-form.tsx
+++ b/src/features/lists/components/new-list-form.tsx
@@ -5,7 +5,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
diff --git a/src/features/lists/index.tsx b/src/features/lists/index.tsx
index b7386a673..fa667fd9b 100644
--- a/src/features/lists/index.tsx
+++ b/src/features/lists/index.tsx
@@ -13,7 +13,8 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import NewListForm from './components/new-list-form.tsx';
 
diff --git a/src/features/migration/index.tsx b/src/features/migration/index.tsx
index ead73511a..a1ebf42b5 100644
--- a/src/features/migration/index.tsx
+++ b/src/features/migration/index.tsx
@@ -10,7 +10,8 @@ import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/mutes/index.tsx b/src/features/mutes/index.tsx
index e2a961ad6..7bff02461 100644
--- a/src/features/mutes/index.tsx
+++ b/src/features/mutes/index.tsx
@@ -7,7 +7,7 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Tabs from 'soapbox/components/ui/tabs.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 import GroupListItem from './components/group-list-item.tsx';
 
diff --git a/src/features/new-status/index.tsx b/src/features/new-status/index.tsx
index a574426d4..c30938bfa 100644
--- a/src/features/new-status/index.tsx
+++ b/src/features/new-status/index.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const NewStatus = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/nostr-relays/components/relay-editor.tsx b/src/features/nostr-relays/components/relay-editor.tsx
index 5d060e9fb..6503202e3 100644
--- a/src/features/nostr-relays/components/relay-editor.tsx
+++ b/src/features/nostr-relays/components/relay-editor.tsx
@@ -4,7 +4,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Select from 'soapbox/components/ui/select.tsx';
 import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
-import { useInstance } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 interface IRelayEditor {
   relays: RelayData[];
diff --git a/src/features/nostr-relays/index.tsx b/src/features/nostr-relays/index.tsx
index b174b90b0..1877aea3d 100644
--- a/src/features/nostr-relays/index.tsx
+++ b/src/features/nostr-relays/index.tsx
@@ -8,8 +8,8 @@ import Form from 'soapbox/components/ui/form.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import { useNostrReq } from 'soapbox/features/nostr/hooks/useNostrReq.ts';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
 import { useSigner } from 'soapbox/hooks/nostr/useSigner.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import RelayEditor, { RelayData } from './components/relay-editor.tsx';
 
diff --git a/src/features/nostr/nostr-bunker-login.tsx b/src/features/nostr/nostr-bunker-login.tsx
index b32edf263..cec86c110 100644
--- a/src/features/nostr/nostr-bunker-login.tsx
+++ b/src/features/nostr/nostr-bunker-login.tsx
@@ -8,7 +8,7 @@ import Button from 'soapbox/components/ui/button.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 export const NostrBunkerLogin: React.FC = () => {
   const history = useHistory();
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index 95c5c5cab..006d7eb31 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -10,7 +10,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import { setFilter } from 'soapbox/actions/notifications.ts';
 import Icon from 'soapbox/components/icon.tsx';
 import Tabs from 'soapbox/components/ui/tabs.tsx';
-import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 import type { Item } from 'soapbox/components/ui/tabs.tsx';
 
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index ac7046cc6..24d48b7ca 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -32,7 +32,9 @@ import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import StatusContainer from 'soapbox/containers/status-container.tsx';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { makeGetNotification } from 'soapbox/selectors/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { NotificationType, validType } from 'soapbox/utils/notification.ts';
diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx
index f56a7d2ed..f444d3507 100644
--- a/src/features/notifications/index.tsx
+++ b/src/features/notifications/index.tsx
@@ -17,8 +17,11 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Portal from 'soapbox/components/ui/portal.tsx';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification.tsx';
-import { useAppDispatch, useAppSelector, useSettings, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 import FilterBar from './components/filter-bar.tsx';
 import Notification from './components/notification.tsx';
diff --git a/src/features/pinned-statuses/index.tsx b/src/features/pinned-statuses/index.tsx
index a988a9e3b..e73d5617d 100644
--- a/src/features/pinned-statuses/index.tsx
+++ b/src/features/pinned-statuses/index.tsx
@@ -6,7 +6,8 @@ import { fetchPinnedStatuses } from 'soapbox/actions/pin-statuses.ts';
 import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 import StatusList from 'soapbox/components/status-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { selectOwnAccount } from 'soapbox/selectors/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/preferences/index.tsx b/src/features/preferences/index.tsx
index 113f0d6f3..e52921d40 100644
--- a/src/features/preferences/index.tsx
+++ b/src/features/preferences/index.tsx
@@ -6,7 +6,9 @@ import List, { ListItem } from 'soapbox/components/list.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import { SelectDropdown } from 'soapbox/features/forms/index.tsx';
 import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
-import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 import ThemeToggle from '../ui/components/theme-toggle.tsx';
 
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 3717a8a6b..31fb04e53 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -10,8 +10,13 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import Accordion from 'soapbox/components/ui/accordion.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import { LanguageDropdown } from 'soapbox/components/ui/language-dropdown.tsx';
-import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker.tsx';
 import Timeline from '../ui/components/timeline.tsx';
diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx
index 669b142d4..adf14fc59 100644
--- a/src/features/quotes/index.tsx
+++ b/src/features/quotes/index.tsx
@@ -7,8 +7,10 @@ import { useParams } from 'react-router-dom';
 import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes.ts';
 import StatusList from 'soapbox/components/status-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
diff --git a/src/features/register-invite/index.tsx b/src/features/register-invite/index.tsx
index b704aa892..3ba7d10bf 100644
--- a/src/features/register-invite/index.tsx
+++ b/src/features/register-invite/index.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 
 import { BigCard } from 'soapbox/components/big-card.tsx';
 import RegistrationForm from 'soapbox/features/auth-login/components/registration-form.tsx';
-import { useInstance } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 interface RegisterInviteParams {
   token: string;
diff --git a/src/features/remote-timeline/components/pinned-hosts-picker.tsx b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
index 9f428f78c..023512809 100644
--- a/src/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -1,6 +1,6 @@
 import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 interface IPinnedHostsPicker {
   /** The active host among pinned hosts. */
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index a9657e177..8b04b7f86 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -9,8 +9,11 @@ import IconButton from 'soapbox/components/icon-button.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 import Timeline from '../ui/components/timeline.tsx';
 
diff --git a/src/features/reply-mentions/account.tsx b/src/features/reply-mentions/account.tsx
index 793dbcf8b..5fee68893 100644
--- a/src/features/reply-mentions/account.tsx
+++ b/src/features/reply-mentions/account.tsx
@@ -9,7 +9,8 @@ import { useAccount } from 'soapbox/api/hooks/index.ts';
 import AccountComponent from 'soapbox/components/account.tsx';
 import IconButton from 'soapbox/components/icon-button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppDispatch, useCompose } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 const messages = defineMessages({
   remove: { id: 'reply_mentions.account.remove', defaultMessage: 'Remove from mentions' },
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 1ddc3ab1d..dc94ef6bc 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -4,7 +4,8 @@ import { Suspense } from 'react';
 import { toggleStatusReport } from 'soapbox/actions/reports.ts';
 import StatusContent from 'soapbox/components/status-content.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import { MediaGallery, Video, Audio } from '../../ui/util/async-components.ts';
 
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index d18c14e70..f57988fbd 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -6,7 +6,7 @@ import { cancelScheduledStatus } from 'soapbox/actions/scheduled-statuses.ts';
 import { getSettings } from 'soapbox/actions/settings.ts';
 import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 4a79bfe21..8cdee03b9 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -7,7 +7,7 @@ import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import PollPreview from 'soapbox/features/ui/components/poll-preview.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import { buildStatus } from '../builder.tsx';
 
diff --git a/src/features/scheduled-statuses/index.tsx b/src/features/scheduled-statuses/index.tsx
index c11040ef2..9c142c6fe 100644
--- a/src/features/scheduled-statuses/index.tsx
+++ b/src/features/scheduled-statuses/index.tsx
@@ -5,7 +5,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled-statuses.ts';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import ScheduledStatus from './components/scheduled-status.tsx';
 
diff --git a/src/features/search/index.tsx b/src/features/search/index.tsx
index feaf8b594..8e36d18a1 100644
--- a/src/features/search/index.tsx
+++ b/src/features/search/index.tsx
@@ -4,8 +4,8 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import SearchResults from 'soapbox/features/compose/components/search-results.tsx';
 import Search from 'soapbox/features/compose/components/search.tsx';
-import { useTheme } from 'soapbox/hooks/index.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.search', defaultMessage: 'Discover' },
diff --git a/src/features/security/mfa-form.tsx b/src/features/security/mfa-form.tsx
index e9f26e9b2..5dd50850f 100644
--- a/src/features/security/mfa-form.tsx
+++ b/src/features/security/mfa-form.tsx
@@ -4,7 +4,8 @@ import { useIntl, defineMessages } from 'react-intl';
 import { fetchMfa } from 'soapbox/actions/mfa.ts';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import DisableOtpForm from './mfa/disable-otp-form.tsx';
 import EnableOtpForm from './mfa/enable-otp-form.tsx';
diff --git a/src/features/security/mfa/disable-otp-form.tsx b/src/features/security/mfa/disable-otp-form.tsx
index b8fef1f7e..4a63d91e5 100644
--- a/src/features/security/mfa/disable-otp-form.tsx
+++ b/src/features/security/mfa/disable-otp-form.tsx
@@ -10,7 +10,7 @@ import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/security/mfa/enable-otp-form.tsx b/src/features/security/mfa/enable-otp-form.tsx
index ee819ac09..7f2b3247a 100644
--- a/src/features/security/mfa/enable-otp-form.tsx
+++ b/src/features/security/mfa/enable-otp-form.tsx
@@ -8,7 +8,7 @@ import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/security/mfa/otp-confirm-form.tsx b/src/features/security/mfa/otp-confirm-form.tsx
index 6100f080b..f9d284a43 100644
--- a/src/features/security/mfa/otp-confirm-form.tsx
+++ b/src/features/security/mfa/otp-confirm-form.tsx
@@ -14,7 +14,7 @@ import Form from 'soapbox/components/ui/form.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
diff --git a/src/features/server-info/index.tsx b/src/features/server-info/index.tsx
index 19e1e00bc..092d25354 100644
--- a/src/features/server-info/index.tsx
+++ b/src/features/server-info/index.tsx
@@ -4,7 +4,7 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import Divider from 'soapbox/components/ui/divider.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useInstance } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import LinkFooter from '../ui/components/link-footer.tsx';
 import PromoPanel from '../ui/components/promo-panel.tsx';
diff --git a/src/features/settings/components/messages-settings.tsx b/src/features/settings/components/messages-settings.tsx
index ee9812f72..c18da1627 100644
--- a/src/features/settings/components/messages-settings.tsx
+++ b/src/features/settings/components/messages-settings.tsx
@@ -2,7 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import List, { ListItem } from 'soapbox/components/list.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 const messages = defineMessages({
diff --git a/src/features/settings/index.tsx b/src/features/settings/index.tsx
index 0e725220a..72b755683 100644
--- a/src/features/settings/index.tsx
+++ b/src/features/settings/index.tsx
@@ -9,7 +9,11 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import Counter from 'soapbox/components/ui/counter.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
 import Preferences from '../preferences/index.tsx';
diff --git a/src/features/share/index.tsx b/src/features/share/index.tsx
index a5e1a3d0f..aabe6c226 100644
--- a/src/features/share/index.tsx
+++ b/src/features/share/index.tsx
@@ -1,7 +1,7 @@
 import { Redirect, useLocation } from 'react-router-dom';
 
 import { openComposeWithText } from 'soapbox/actions/compose.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const Share = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/soapbox-config/components/site-preview.tsx b/src/features/soapbox-config/components/site-preview.tsx
index 5ea6c7ef6..20e524c9a 100644
--- a/src/features/soapbox-config/components/site-preview.tsx
+++ b/src/features/soapbox-config/components/site-preview.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import { defaultSettings } from 'soapbox/actions/settings.ts';
 import SiteLogo from 'soapbox/components/site-logo.tsx';
 import BackgroundShapes from 'soapbox/features/ui/components/background-shapes.tsx';
-import { useSystemTheme } from 'soapbox/hooks/index.ts';
+import { useSystemTheme } from 'soapbox/hooks/useSystemTheme.ts';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
 import { generateThemeCss } from 'soapbox/utils/theme.ts';
 
diff --git a/src/features/soapbox-config/index.tsx b/src/features/soapbox-config/index.tsx
index 3bd729ab1..e822ca8d8 100644
--- a/src/features/soapbox-config/index.tsx
+++ b/src/features/soapbox-config/index.tsx
@@ -18,7 +18,9 @@ import Streamfield from 'soapbox/components/ui/streamfield.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
 import ThemeSelector from 'soapbox/features/ui/components/theme-selector.tsx';
-import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/status/components/status-interaction-bar.tsx b/src/features/status/components/status-interaction-bar.tsx
index 430d3e338..39a9e1c64 100644
--- a/src/features/status/components/status-interaction-bar.tsx
+++ b/src/features/status/components/status-interaction-bar.tsx
@@ -5,7 +5,10 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import Emoji from 'soapbox/components/ui/emoji.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector, useSoapboxConfig, useFeatures, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { reduceEmoji } from 'soapbox/utils/emoji-reacts.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
diff --git a/src/features/status/components/thread-login-cta.tsx b/src/features/status/components/thread-login-cta.tsx
index aa7e98572..f488d8a1d 100644
--- a/src/features/status/components/thread-login-cta.tsx
+++ b/src/features/status/components/thread-login-cta.tsx
@@ -4,7 +4,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import { Card, CardTitle } from 'soapbox/components/ui/card.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 /** Prompts logged-out users to log in when viewing a thread. */
 const ThreadLoginCta: React.FC = () => {
diff --git a/src/features/status/components/thread-status.tsx b/src/features/status/components/thread-status.tsx
index 3b49a6850..a5ff00e7f 100644
--- a/src/features/status/components/thread-status.tsx
+++ b/src/features/status/components/thread-status.tsx
@@ -3,7 +3,7 @@ import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
 import StatusContainer from 'soapbox/containers/status-container.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IThreadStatus {
   id: string;
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index 9a2d8c98e..9d43b255b 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -18,7 +18,9 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
 import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
-import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { RootState } from 'soapbox/store.ts';
 import { type Account, type Status } from 'soapbox/types/entities.ts';
 import { defaultMediaVisibility, textForScreenReader } from 'soapbox/utils/status.ts';
diff --git a/src/features/status/containers/quoted-status-container.tsx b/src/features/status/containers/quoted-status-container.tsx
index 2ed95f78c..2b45ea2d8 100644
--- a/src/features/status/containers/quoted-status-container.tsx
+++ b/src/features/status/containers/quoted-status-container.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import QuotedStatus from 'soapbox/components/quoted-status.tsx';
 import Tombstone from 'soapbox/components/tombstone.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusContainer {
diff --git a/src/features/status/index.tsx b/src/features/status/index.tsx
index 0ce594d0a..3c7382192 100644
--- a/src/features/status/index.tsx
+++ b/src/features/status/index.tsx
@@ -12,7 +12,9 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
-import { useAppDispatch, useAppSelector, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 import ThreadLoginCta from './components/thread-login-cta.tsx';
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index f5731a57d..066a5174c 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -11,8 +11,9 @@ import { importFetchedStatuses } from 'soapbox/actions/importer/index.ts';
 import { expandTimelineSuccess } from 'soapbox/actions/timelines.ts';
 import { Column } from 'soapbox/components/ui/column.tsx';
 import Timeline from 'soapbox/features/ui/components/timeline.tsx';
-import { useAppDispatch, useTheme } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 const messages = defineMessages({
   title: { id: 'column.test', defaultMessage: 'Test timeline' },
diff --git a/src/features/theme-editor/components/palette.tsx b/src/features/theme-editor/components/palette.tsx
index 70d1830e6..748a80b76 100644
--- a/src/features/theme-editor/components/palette.tsx
+++ b/src/features/theme-editor/components/palette.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Slider from 'soapbox/components/ui/slider.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { usePrevious } from 'soapbox/hooks/index.ts';
+import { usePrevious } from 'soapbox/hooks/usePrevious.ts';
 import { compareId } from 'soapbox/utils/comparators.ts';
 import { hueShift } from 'soapbox/utils/theme.ts';
 
diff --git a/src/features/theme-editor/index.tsx b/src/features/theme-editor/index.tsx
index 95060f712..6aa036b4a 100644
--- a/src/features/theme-editor/index.tsx
+++ b/src/features/theme-editor/index.tsx
@@ -14,7 +14,9 @@ import { Column } from 'soapbox/components/ui/column.tsx';
 import FormActions from 'soapbox/components/ui/form-actions.tsx';
 import Form from 'soapbox/components/ui/form.tsx';
 import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker.tsx';
-import { useAppDispatch, useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { download } from 'soapbox/utils/download.ts';
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 90495f58c..8a2f6144c 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -14,7 +14,9 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import { useFollow } from 'soapbox/api/hooks/index.ts';
 import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppDispatch, useFeatures, useLoggedIn } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
 
diff --git a/src/features/ui/components/compose-button.tsx b/src/features/ui/components/compose-button.tsx
index 02420daf8..e3855e075 100644
--- a/src/features/ui/components/compose-button.tsx
+++ b/src/features/ui/components/compose-button.tsx
@@ -7,7 +7,7 @@ import { useGroupLookup } from 'soapbox/api/hooks/index.ts';
 import Avatar from 'soapbox/components/ui/avatar.tsx';
 import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const ComposeButton = () => {
   const location = useLocation();
diff --git a/src/features/ui/components/cta-banner.tsx b/src/features/ui/components/cta-banner.tsx
index 7dd84a37c..3924bb3e1 100644
--- a/src/features/ui/components/cta-banner.tsx
+++ b/src/features/ui/components/cta-banner.tsx
@@ -5,7 +5,10 @@ import Button from 'soapbox/components/ui/button.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector, useInstance, useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const CtaBanner = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/floating-action-button.tsx b/src/features/ui/components/floating-action-button.tsx
index f6e6e2b07..d83a6ef24 100644
--- a/src/features/ui/components/floating-action-button.tsx
+++ b/src/features/ui/components/floating-action-button.tsx
@@ -9,7 +9,7 @@ import { useGroupLookup } from 'soapbox/api/hooks/index.ts';
 import Avatar from 'soapbox/components/ui/avatar.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const messages = defineMessages({
   publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
diff --git a/src/features/ui/components/funding-panel.tsx b/src/features/ui/components/funding-panel.tsx
index cebc57e7a..f55087d31 100644
--- a/src/features/ui/components/funding-panel.tsx
+++ b/src/features/ui/components/funding-panel.tsx
@@ -7,7 +7,8 @@ import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 /** Open link in a new tab. */
 // https://stackoverflow.com/a/28374344/8811886
diff --git a/src/features/ui/components/group-media-panel.tsx b/src/features/ui/components/group-media-panel.tsx
index f892eab21..801bb403e 100644
--- a/src/features/ui/components/group-media-panel.tsx
+++ b/src/features/ui/components/group-media-panel.tsx
@@ -7,7 +7,8 @@ import { expandGroupMediaTimeline } from 'soapbox/actions/timelines.ts';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { getGroupGallery } from 'soapbox/selectors/index.ts';
 
 import MediaItem from '../../account-gallery/components/media-item.tsx';
diff --git a/src/features/ui/components/instance-info-panel.tsx b/src/features/ui/components/instance-info-panel.tsx
index a68eb5382..b5f1c12bf 100644
--- a/src/features/ui/components/instance-info-panel.tsx
+++ b/src/features/ui/components/instance-info-panel.tsx
@@ -4,7 +4,9 @@ import { useIntl, defineMessages } from 'react-intl';
 
 import { pinHost, unpinHost } from 'soapbox/actions/remote-timeline.ts';
 import Widget from 'soapbox/components/ui/widget.tsx';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
 const getRemoteInstance = makeGetRemoteInstance();
diff --git a/src/features/ui/components/instance-moderation-panel.tsx b/src/features/ui/components/instance-moderation-panel.tsx
index bc801be2e..ebc572321 100644
--- a/src/features/ui/components/instance-moderation-panel.tsx
+++ b/src/features/ui/components/instance-moderation-panel.tsx
@@ -6,7 +6,9 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 import Widget from 'soapbox/components/ui/widget.tsx';
 import InstanceRestrictions from 'soapbox/features/federation-restrictions/components/instance-restrictions.tsx';
-import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
 const getRemoteInstance = makeGetRemoteInstance();
diff --git a/src/features/ui/components/link-footer.tsx b/src/features/ui/components/link-footer.tsx
index 5c18fcbc5..d8d6b6abb 100644
--- a/src/features/ui/components/link-footer.tsx
+++ b/src/features/ui/components/link-footer.tsx
@@ -5,7 +5,10 @@ import { Link } from 'react-router-dom';
 import { logOut } from 'soapbox/actions/auth.ts';
 import Text from 'soapbox/components/ui/text.tsx';
 import emojify from 'soapbox/features/emoji/index.ts';
-import { useSoapboxConfig, useOwnAccount, useFeatures, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import sourceCode from 'soapbox/utils/code.ts';
 
 interface IFooterLink {
diff --git a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index 65d1ec7d9..1fc8c1ddf 100644
--- a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -16,7 +16,9 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import toast from 'soapbox/toast.tsx';
 import { getBadges } from 'soapbox/utils/badges.ts';
 
diff --git a/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx b/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
index 150fae4bf..f5bd7d3c9 100644
--- a/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
@@ -3,7 +3,7 @@ import { defineMessages, MessageDescriptor, useIntl } from 'react-intl';
 
 import { setRole } from 'soapbox/actions/admin.ts';
 import { SelectDropdown } from 'soapbox/features/forms/index.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/modals/birthdays-modal.tsx b/src/features/ui/components/modals/birthdays-modal.tsx
index ca7eca4f5..a98aba752 100644
--- a/src/features/ui/components/modals/birthdays-modal.tsx
+++ b/src/features/ui/components/modals/birthdays-modal.tsx
@@ -4,7 +4,7 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Account from 'soapbox/features/birthdays/account.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IBirthdaysModal {
   onClose: (string: string) => void;
diff --git a/src/features/ui/components/modals/compare-history-modal.tsx b/src/features/ui/components/modals/compare-history-modal.tsx
index 929cf312d..1eec1fe0a 100644
--- a/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/src/features/ui/components/modals/compare-history-modal.tsx
@@ -10,7 +10,8 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities.ts';
 
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 423c37a0b..440045481 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -40,7 +40,8 @@ import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import UploadButton from './upload-button.tsx';
 
diff --git a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index 5779ebd3c..acdfee743 100644
--- a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import Icon from 'soapbox/components/icon.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IUploadButton {
   disabled?: boolean;
diff --git a/src/features/ui/components/modals/compose-modal.tsx b/src/features/ui/components/modals/compose-modal.tsx
index f7862633d..58e85a496 100644
--- a/src/features/ui/components/modals/compose-modal.tsx
+++ b/src/features/ui/components/modals/compose-modal.tsx
@@ -11,7 +11,10 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
 
 import ComposeForm from '../../../compose/components/compose-form.tsx';
 
diff --git a/src/features/ui/components/modals/dislikes-modal.tsx b/src/features/ui/components/modals/dislikes-modal.tsx
index 9f9cef6ac..000f3dce1 100644
--- a/src/features/ui/components/modals/dislikes-modal.tsx
+++ b/src/features/ui/components/modals/dislikes-modal.tsx
@@ -6,7 +6,8 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IDislikesModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/edit-announcement-modal.tsx b/src/features/ui/components/modals/edit-announcement-modal.tsx
index 0917c664b..428dd51fe 100644
--- a/src/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/src/features/ui/components/modals/edit-announcement-modal.tsx
@@ -12,7 +12,7 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import toast from 'soapbox/toast.tsx';
 
 import type { AdminAnnouncement } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 1a5747820..6329e5104 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -14,7 +14,8 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
 import { messages as emojiMessages } from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
 import { useTextField } from 'soapbox/hooks/forms/index.ts';
-import { useAppDispatch, useClickOutside } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
 import toast from 'soapbox/toast.tsx';
 
 import type { Emoji as EmojiType } from 'soapbox/features/emoji/index.ts';
diff --git a/src/features/ui/components/modals/edit-domain-modal.tsx b/src/features/ui/components/modals/edit-domain-modal.tsx
index 788683260..a2d038f06 100644
--- a/src/features/ui/components/modals/edit-domain-modal.tsx
+++ b/src/features/ui/components/modals/edit-domain-modal.tsx
@@ -11,7 +11,7 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { Domain } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/ui/components/modals/edit-federation-modal.tsx b/src/features/ui/components/modals/edit-federation-modal.tsx
index 3db26ee1b..6ef129446 100644
--- a/src/features/ui/components/modals/edit-federation-modal.tsx
+++ b/src/features/ui/components/modals/edit-federation-modal.tsx
@@ -5,7 +5,8 @@ import { updateMrf } from 'soapbox/actions/mrf.ts';
 import List, { ListItem } from 'soapbox/components/list.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/ui/components/modals/embed-modal.tsx b/src/features/ui/components/modals/embed-modal.tsx
index 525c8b80b..ca5c442c3 100644
--- a/src/features/ui/components/modals/embed-modal.tsx
+++ b/src/features/ui/components/modals/embed-modal.tsx
@@ -8,7 +8,7 @@ import Divider from 'soapbox/components/ui/divider.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import useEmbed from 'soapbox/queries/embed.ts';
 
 interface IEmbedModal {
diff --git a/src/features/ui/components/modals/event-map-modal.tsx b/src/features/ui/components/modals/event-map-modal.tsx
index cbaf97624..af2207174 100644
--- a/src/features/ui/components/modals/event-map-modal.tsx
+++ b/src/features/ui/components/modals/event-map-modal.tsx
@@ -9,7 +9,8 @@ import { FormattedMessage } from 'react-intl';
 import Button from 'soapbox/components/ui/button.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/ui/components/modals/event-participants-modal.tsx b/src/features/ui/components/modals/event-participants-modal.tsx
index 04833d821..595198070 100644
--- a/src/features/ui/components/modals/event-participants-modal.tsx
+++ b/src/features/ui/components/modals/event-participants-modal.tsx
@@ -6,7 +6,8 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IEventParticipantsModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/familiar-followers-modal.tsx b/src/features/ui/components/modals/familiar-followers-modal.tsx
index 986815b52..0322e07ca 100644
--- a/src/features/ui/components/modals/familiar-followers-modal.tsx
+++ b/src/features/ui/components/modals/familiar-followers-modal.tsx
@@ -5,7 +5,7 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
 const getAccount = makeGetAccount();
diff --git a/src/features/ui/components/modals/favourites-modal.tsx b/src/features/ui/components/modals/favourites-modal.tsx
index bc3fed538..dbea9d5a3 100644
--- a/src/features/ui/components/modals/favourites-modal.tsx
+++ b/src/features/ui/components/modals/favourites-modal.tsx
@@ -6,7 +6,8 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IFavouritesModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/hotkeys-modal.tsx b/src/features/ui/components/modals/hotkeys-modal.tsx
index 79267c8ec..aaa10e1cb 100644
--- a/src/features/ui/components/modals/hotkeys-modal.tsx
+++ b/src/features/ui/components/modals/hotkeys-modal.tsx
@@ -1,7 +1,7 @@
 import { FormattedMessage } from 'react-intl';
 
 import Modal from 'soapbox/components/ui/modal.tsx';
-import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface IHotkeysModal {
   onClose: () => void;
diff --git a/src/features/ui/components/modals/join-event-modal.tsx b/src/features/ui/components/modals/join-event-modal.tsx
index f6062b831..b2056fdf1 100644
--- a/src/features/ui/components/modals/join-event-modal.tsx
+++ b/src/features/ui/components/modals/join-event-modal.tsx
@@ -6,7 +6,7 @@ import { closeModal } from 'soapbox/actions/modals.ts';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const messages = defineMessages({
   hint: { id: 'join_event.hint', defaultMessage: 'You can tell the organizer why do you want to participate in this event:' },
diff --git a/src/features/ui/components/modals/landing-page-modal.tsx b/src/features/ui/components/modals/landing-page-modal.tsx
index afac28bde..b5d944f56 100644
--- a/src/features/ui/components/modals/landing-page-modal.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.tsx
@@ -7,7 +7,8 @@ import Button from 'soapbox/components/ui/button.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const messages = defineMessages({
   download: { id: 'landing_page_modal.download', defaultMessage: 'Download' },
diff --git a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
index 0c702a1ff..a06ac688c 100644
--- a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
@@ -6,7 +6,7 @@ import { HTTPError } from 'soapbox/api/HTTPError.ts';
 import { useCreateGroup, useGroupValidation, type CreateGroupParams } from 'soapbox/api/hooks/index.ts';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useDebounce } from 'soapbox/hooks/index.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
 import { type Group } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index b9ae0e41a..0c65ae246 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -9,7 +9,9 @@ import AvatarPicker from 'soapbox/features/edit-profile/components/avatar-picker
 import HeaderPicker from 'soapbox/features/edit-profile/components/header-picker.tsx';
 import GroupTagsField from 'soapbox/features/group/components/group-tags-field.tsx';
 import { usePreview } from 'soapbox/hooks/forms/index.ts';
-import { useAppSelector, useDebounce, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import resizeImage from 'soapbox/utils/resize-image.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 82ce6fd12..e34653231 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -23,7 +23,8 @@ import Audio from 'soapbox/features/audio/index.tsx';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
 import Thread from 'soapbox/features/status/components/thread.tsx';
 import Video from 'soapbox/features/video/index.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/ui/components/modals/mentions-modal.tsx b/src/features/ui/components/modals/mentions-modal.tsx
index 2c16a1632..a2e6eb8a2 100644
--- a/src/features/ui/components/modals/mentions-modal.tsx
+++ b/src/features/ui/components/modals/mentions-modal.tsx
@@ -7,7 +7,8 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IMentionsModal {
diff --git a/src/features/ui/components/modals/mute-modal.tsx b/src/features/ui/components/modals/mute-modal.tsx
index 5aa837773..ceee7062d 100644
--- a/src/features/ui/components/modals/mute-modal.tsx
+++ b/src/features/ui/components/modals/mute-modal.tsx
@@ -10,7 +10,9 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
 import DurationSelector from 'soapbox/features/compose/components/polls/duration-selector.tsx';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 const MuteModal = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
index 385505b26..0c0db8b42 100644
--- a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
@@ -6,7 +6,7 @@ import { nostrExtensionLogIn } from 'soapbox/actions/nostr.ts';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const NostrExtensionIndicator: React.FC = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
index e6cef188b..b8afa59a9 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
@@ -13,7 +13,9 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
-import { useAppDispatch, useInstance, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 interface IExtensionStep {
   isLogin?: boolean;
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
index deafd92cc..39d09f148 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
@@ -14,7 +14,7 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import { keyring } from 'soapbox/features/nostr/keyring.ts';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import NostrExtensionIndicator from '../components/nostr-extension-indicator.tsx';
 
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
index 2fb64bed6..2ea8ec598 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
@@ -7,7 +7,7 @@ import Divider from 'soapbox/components/ui/divider.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import NostrExtensionIndicator from '../../nostr-login-modal/components/nostr-extension-indicator.tsx';
 
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
index e68b0c438..407faf92c 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
@@ -18,7 +18,8 @@ import Text from 'soapbox/components/ui/text.tsx';
 import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
 import { keyring } from 'soapbox/features/nostr/keyring.ts';
-import { useAppDispatch, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 import { download } from 'soapbox/utils/download.ts';
 import { slugify } from 'soapbox/utils/input.ts';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
index e4a35e4e4..dfd544f19 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
@@ -6,7 +6,7 @@ import { endOnboarding } from 'soapbox/actions/onboarding.ts';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import AvatarSelectionModal from './steps/avatar-step.tsx';
 import BioStep from './steps/bio-step.tsx';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index a138d89e6..c3992bfc8 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -12,7 +12,8 @@ import Icon from 'soapbox/components/ui/icon.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import toast from 'soapbox/toast.tsx';
 import { isDefaultAvatar } from 'soapbox/utils/accounts.ts';
 import resizeImage from 'soapbox/utils/resize-image.ts';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index 95dacc9cf..922fdfd89 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -9,7 +9,8 @@ import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index 0e6b40bae..5ba42b73d 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -13,7 +13,8 @@ import Icon from 'soapbox/components/ui/icon.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import toast from 'soapbox/toast.tsx';
 import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
 import resizeImage from 'soapbox/utils/resize-image.ts';
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index 891e1d055..27e6ca8ab 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -9,7 +9,8 @@ import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx
index 5345d6fb4..e399d4176 100644
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/src/features/ui/components/modals/reactions-modal.tsx
@@ -10,7 +10,8 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Tabs from 'soapbox/components/ui/tabs.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { ReactionRecord } from 'soapbox/reducers/user-lists.ts';
 
 import type { Item } from 'soapbox/components/ui/tabs.tsx';
diff --git a/src/features/ui/components/modals/reblogs-modal.tsx b/src/features/ui/components/modals/reblogs-modal.tsx
index d2e9670e1..8d93e5356 100644
--- a/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/src/features/ui/components/modals/reblogs-modal.tsx
@@ -7,7 +7,8 @@ import ScrollableList from 'soapbox/components/scrollable-list.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IReblogsModal {
   onClose: (string: string) => void;
diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index 542f48474..a1da59011 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -4,7 +4,9 @@ import { FormattedMessage } from 'react-intl';
 
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Account from 'soapbox/features/reply-mentions/account.tsx';
-import { useAppSelector, useCompose, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
diff --git a/src/features/ui/components/modals/report-modal/report-modal.tsx b/src/features/ui/components/modals/report-modal/report-modal.tsx
index 80a288483..ac1244d53 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -18,7 +18,9 @@ import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import ConfirmationStep from './steps/confirmation-step.tsx';
 import OtherActionsStep from './steps/other-actions-step.tsx';
diff --git a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index dbdd97fe9..95d34fe07 100644
--- a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -4,7 +4,7 @@ import { ReportableEntities } from 'soapbox/actions/reports.ts';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox.ts';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
 
diff --git a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 5fef8ce29..7539b854f 100644
--- a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -12,7 +12,9 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Toggle from 'soapbox/components/ui/toggle.tsx';
 import StatusCheckBox from 'soapbox/features/report/components/status-check-box.tsx';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { getDomain } from 'soapbox/utils/accounts.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 4d1ed814f..ab4d59900 100644
--- a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -7,7 +7,9 @@ import FormGroup from 'soapbox/components/ui/form-group.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
 import type { Rule } from 'soapbox/schemas/rule.ts';
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index 1b442e471..672cd1a3c 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -13,7 +13,8 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import NewFolderForm from 'soapbox/features/bookmark-folders/components/new-folder-form.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx
index 13fdab027..069f5653e 100644
--- a/src/features/ui/components/modals/unauthorized-modal.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.tsx
@@ -9,7 +9,11 @@ import Input from 'soapbox/components/ui/input.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector, useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
 import { selectAccount } from 'soapbox/selectors/index.ts';
 import toast from 'soapbox/toast.tsx';
 
diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index 74109a2c6..3b3ebbc72 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -13,7 +13,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Modal from 'soapbox/components/ui/modal.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/ui/components/modals/zap-split/display-name-row.tsx b/src/features/ui/components/modals/zap-split/display-name-row.tsx
index fa0c2cc45..f407d294f 100644
--- a/src/features/ui/components/modals/zap-split/display-name-row.tsx
+++ b/src/features/ui/components/modals/zap-split/display-name-row.tsx
@@ -1,7 +1,7 @@
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
-import { useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { getAcct } from 'soapbox/utils/accounts.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/modals/zaps-modal.tsx b/src/features/ui/components/modals/zaps-modal.tsx
index 5c7b0a06d..e6bd1fbbf 100644
--- a/src/features/ui/components/modals/zaps-modal.tsx
+++ b/src/features/ui/components/modals/zaps-modal.tsx
@@ -8,7 +8,8 @@ import Modal from 'soapbox/components/ui/modal.tsx';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IAccountWithZaps {
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index b0f43558f..ebf74930c 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -18,8 +18,12 @@ import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import Input from 'soapbox/components/ui/input.tsx';
 import Tooltip from 'soapbox/components/ui/tooltip.tsx';
 import Search from 'soapbox/features/compose/components/search.tsx';
-import { useAppDispatch, useFeatures, useInstance, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
 import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
 import ProfileDropdown from './profile-dropdown.tsx';
diff --git a/src/features/ui/components/panels/account-note-panel.tsx b/src/features/ui/components/panels/account-note-panel.tsx
index 8c4911da4..f59fb528e 100644
--- a/src/features/ui/components/panels/account-note-panel.tsx
+++ b/src/features/ui/components/panels/account-note-panel.tsx
@@ -7,7 +7,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 import type { AppDispatch } from 'soapbox/store.ts';
diff --git a/src/features/ui/components/panels/new-event-panel.tsx b/src/features/ui/components/panels/new-event-panel.tsx
index 6785c6d49..33e8a49c7 100644
--- a/src/features/ui/components/panels/new-event-panel.tsx
+++ b/src/features/ui/components/panels/new-event-panel.tsx
@@ -5,7 +5,7 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import Button from 'soapbox/components/ui/button.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const NewEventPanel = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/panels/new-group-panel.tsx b/src/features/ui/components/panels/new-group-panel.tsx
index 58fd5ae62..3dc293887 100644
--- a/src/features/ui/components/panels/new-group-panel.tsx
+++ b/src/features/ui/components/panels/new-group-panel.tsx
@@ -4,7 +4,8 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import Button from 'soapbox/components/ui/button.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions.ts';
 
 const NewGroupPanel = () => {
diff --git a/src/features/ui/components/panels/sign-up-panel.tsx b/src/features/ui/components/panels/sign-up-panel.tsx
index f8ebd07a8..d3dbd1c64 100644
--- a/src/features/ui/components/panels/sign-up-panel.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.tsx
@@ -4,7 +4,11 @@ import { openModal } from 'soapbox/actions/modals.ts';
 import Button from 'soapbox/components/ui/button.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
 
 const SignUpPanel = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 6f8aee242..ff6fe7eee 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -9,7 +9,7 @@ import Stack from 'soapbox/components/ui/stack.tsx';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card.tsx';
 import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder-media-gallery.tsx';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import { buildStatus } from '../util/pending-status-builder.ts';
 
diff --git a/src/features/ui/components/pinned-accounts-panel.tsx b/src/features/ui/components/pinned-accounts-panel.tsx
index f96189c13..658c06865 100644
--- a/src/features/ui/components/pinned-accounts-panel.tsx
+++ b/src/features/ui/components/pinned-accounts-panel.tsx
@@ -7,7 +7,8 @@ import { fetchPinnedAccounts } from 'soapbox/actions/accounts.ts';
 import Widget from 'soapbox/components/ui/widget.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
 
diff --git a/src/features/ui/components/poll-preview.tsx b/src/features/ui/components/poll-preview.tsx
index eb3da5a97..4fb80a8e0 100644
--- a/src/features/ui/components/poll-preview.tsx
+++ b/src/features/ui/components/poll-preview.tsx
@@ -2,7 +2,7 @@ import noop from 'lodash/noop';
 
 import PollOption from 'soapbox/components/polls/poll-option.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { Poll as PollEntity } from 'soapbox/types/entities.ts';
 
 interface IPollPreview {
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index b80b26e57..2295cbdbc 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -10,7 +10,10 @@ import { Link } from 'react-router-dom';
 import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth.ts';
 import Account from 'soapbox/components/account.tsx';
 import { MenuDivider } from 'soapbox/components/ui/menu.tsx';
-import { useAppDispatch, useAppSelector, useClickOutside, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { makeGetOtherAccounts } from 'soapbox/selectors/index.ts';
 
 import ThemeToggle from './theme-toggle.tsx';
diff --git a/src/features/ui/components/profile-familiar-followers.tsx b/src/features/ui/components/profile-familiar-followers.tsx
index f10b00b5b..7d648476b 100644
--- a/src/features/ui/components/profile-familiar-followers.tsx
+++ b/src/features/ui/components/profile-familiar-followers.tsx
@@ -10,7 +10,9 @@ import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
 import type { Account } from 'soapbox/schemas/index.ts';
diff --git a/src/features/ui/components/profile-info-panel.tsx b/src/features/ui/components/profile-info-panel.tsx
index 208883631..47c0fc665 100644
--- a/src/features/ui/components/profile-info-panel.tsx
+++ b/src/features/ui/components/profile-info-panel.tsx
@@ -13,7 +13,8 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { capitalize } from 'soapbox/utils/strings.ts';
 
 import ProfileFamiliarFollowers from './profile-familiar-followers.tsx';
diff --git a/src/features/ui/components/profile-media-panel.tsx b/src/features/ui/components/profile-media-panel.tsx
index a1d002dda..d155c2ece 100644
--- a/src/features/ui/components/profile-media-panel.tsx
+++ b/src/features/ui/components/profile-media-panel.tsx
@@ -7,7 +7,8 @@ import { expandAccountMediaTimeline } from 'soapbox/actions/timelines.ts';
 import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { getAccountGallery } from 'soapbox/selectors/index.ts';
 
 import MediaItem from '../../account-gallery/components/media-item.tsx';
diff --git a/src/features/ui/components/promo-panel.tsx b/src/features/ui/components/promo-panel.tsx
index 49fd6fb97..4cf71a7a0 100644
--- a/src/features/ui/components/promo-panel.tsx
+++ b/src/features/ui/components/promo-panel.tsx
@@ -2,7 +2,9 @@ import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
-import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const PromoPanel: React.FC = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/subscription-button.tsx b/src/features/ui/components/subscription-button.tsx
index ba8c0ad18..2bd1fdd0b 100644
--- a/src/features/ui/components/subscription-button.tsx
+++ b/src/features/ui/components/subscription-button.tsx
@@ -8,7 +8,8 @@ import {
 } from 'soapbox/actions/accounts.ts';
 import { useFollow } from 'soapbox/api/hooks/index.ts';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import toast from 'soapbox/toast.tsx';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/ui/components/theme-toggle.tsx b/src/features/ui/components/theme-toggle.tsx
index fe5781d22..a8739cf86 100644
--- a/src/features/ui/components/theme-toggle.tsx
+++ b/src/features/ui/components/theme-toggle.tsx
@@ -1,5 +1,6 @@
 import { changeSetting } from 'soapbox/actions/settings.ts';
-import { useAppDispatch, useSettings } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 import ThemeSelector from './theme-selector.tsx';
 
diff --git a/src/features/ui/components/timeline.tsx b/src/features/ui/components/timeline.tsx
index 1efd40dba..bb11f3985 100644
--- a/src/features/ui/components/timeline.tsx
+++ b/src/features/ui/components/timeline.tsx
@@ -7,7 +7,8 @@ import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines.ts
 import ScrollTopButton from 'soapbox/components/scroll-top-button.tsx';
 import StatusList, { IStatusList } from 'soapbox/components/status-list.tsx';
 import Portal from 'soapbox/components/ui/portal.tsx';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
 const messages = defineMessages({
diff --git a/src/features/ui/components/trends-panel.tsx b/src/features/ui/components/trends-panel.tsx
index a1b4c3a4d..fd1afefec 100644
--- a/src/features/ui/components/trends-panel.tsx
+++ b/src/features/ui/components/trends-panel.tsx
@@ -6,7 +6,7 @@ import Hashtag from 'soapbox/components/hashtag.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
 import PlaceholderSidebarTrends from 'soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import useTrends from 'soapbox/queries/trends.ts';
 
 interface ITrendsPanel {
diff --git a/src/features/ui/components/user-panel.tsx b/src/features/ui/components/user-panel.tsx
index 47543233c..596c5c606 100644
--- a/src/features/ui/components/user-panel.tsx
+++ b/src/features/ui/components/user-panel.tsx
@@ -8,7 +8,7 @@ import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import VerificationBadge from 'soapbox/components/verification-badge.tsx';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { getAcct } from 'soapbox/utils/accounts.ts';
 import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 import { displayFqn } from 'soapbox/utils/state.ts';
diff --git a/src/features/ui/components/who-to-follow-panel.tsx b/src/features/ui/components/who-to-follow-panel.tsx
index 3f763d46d..a56775a20 100644
--- a/src/features/ui/components/who-to-follow-panel.tsx
+++ b/src/features/ui/components/who-to-follow-panel.tsx
@@ -6,7 +6,7 @@ import Text from 'soapbox/components/ui/text.tsx';
 import Widget from 'soapbox/components/ui/widget.tsx';
 import AccountContainer from 'soapbox/containers/account-container.tsx';
 import PlaceholderSidebarSuggestions from 'soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx';
-import { useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { useDismissSuggestion, useSuggestions } from 'soapbox/queries/suggestions.ts';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index 57c2e5342..6dbe3412d 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -16,7 +16,15 @@ import { useUserStream } from 'soapbox/api/hooks/index.ts';
 import SidebarNavigation from 'soapbox/components/sidebar-navigation.tsx';
 import ThumbNavigation from 'soapbox/components/thumb-navigation.tsx';
 import Layout from 'soapbox/components/ui/layout.tsx';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles, useInstance, useLoggedIn, useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import AdminPage from 'soapbox/pages/admin-page.tsx';
 import ChatsPage from 'soapbox/pages/chats-page.tsx';
 import DefaultPage from 'soapbox/pages/default-page.tsx';
diff --git a/src/features/ui/util/global-hotkeys.tsx b/src/features/ui/util/global-hotkeys.tsx
index ce187249c..29f47d6a6 100644
--- a/src/features/ui/util/global-hotkeys.tsx
+++ b/src/features/ui/util/global-hotkeys.tsx
@@ -4,7 +4,9 @@ import { useHistory } from 'react-router-dom';
 import { resetCompose } from 'soapbox/actions/compose.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { FOCUS_EDITOR_COMMAND } from 'soapbox/features/compose/editor/plugins/focus-plugin.tsx';
-import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import { HotKeys } from '../components/hotkeys.tsx';
 
diff --git a/src/features/ui/util/optional-motion.tsx b/src/features/ui/util/optional-motion.tsx
index 79855d639..572d1cc98 100644
--- a/src/features/ui/util/optional-motion.tsx
+++ b/src/features/ui/util/optional-motion.tsx
@@ -1,6 +1,6 @@
 import { Motion, MotionProps } from 'react-motion';
 
-import { useSettings } from 'soapbox/hooks/index.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 import ReducedMotion from './reduced-motion.tsx';
 
diff --git a/src/features/ui/util/react-router-helpers.tsx b/src/features/ui/util/react-router-helpers.tsx
index 13c9f29f1..394381a8a 100644
--- a/src/features/ui/util/react-router-helpers.tsx
+++ b/src/features/ui/util/react-router-helpers.tsx
@@ -3,7 +3,8 @@ import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType, useLocation } from 'react-router-dom';
 
 import Layout from 'soapbox/components/ui/layout.tsx';
-import { useOwnAccount, useSettings } from 'soapbox/hooks/index.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 import ColumnForbidden from '../components/column-forbidden.tsx';
 import ColumnLoading from '../components/column-loading.tsx';
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index 9575c3cc2..7e1c62869 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -21,7 +21,7 @@ import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
-import { useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import ZapButton from './zap-button/zap-button.tsx';
 
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
deleted file mode 100644
index 2c27dfa80..000000000
--- a/src/hooks/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export { useApi } from './useApi.ts';
-export { useAppDispatch } from './useAppDispatch.ts';
-export { useAppSelector } from './useAppSelector.ts';
-export { useBackend } from './useBackend.ts';
-export { useClickOutside } from './useClickOutside.ts';
-export { useCompose } from './useCompose.ts';
-export { useDebounce } from './useDebounce.ts';
-export { useDraggedFiles } from './useDraggedFiles.ts';
-export { useGetState } from './useGetState.ts';
-export { useDimensions } from './useDimensions.ts';
-export { useFeatures } from './useFeatures.ts';
-export { useInstance } from './useInstance.ts';
-export { useLoading } from './useLoading.ts';
-export { useLocale } from './useLocale.ts';
-export { useLoggedIn } from './useLoggedIn.ts';
-export { useOnScreen } from './useOnScreen.ts';
-export { useOwnAccount } from './useOwnAccount.ts';
-export { usePrevious } from './usePrevious.ts';
-export { useRefEventHandler } from './useRefEventHandler.ts';
-export { useRegistrationStatus } from './useRegistrationStatus.ts';
-export { useSettings } from './useSettings.ts';
-export { useSoapboxConfig } from './useSoapboxConfig.ts';
-export { useSystemTheme } from './useSystemTheme.ts';
-export { useTheme } from './useTheme.ts';
-export { useSettingsNotifications } from './useSettingsNotifications.ts';
\ No newline at end of file
diff --git a/src/hooks/nostr/useSigner.ts b/src/hooks/nostr/useSigner.ts
index 6a8d38a98..93eab2423 100644
--- a/src/hooks/nostr/useSigner.ts
+++ b/src/hooks/nostr/useSigner.ts
@@ -2,8 +2,8 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 import { keyring } from 'soapbox/features/nostr/keyring.ts';
-import { useAppSelector } from 'soapbox/hooks/index.ts';
 import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 export function useSigner() {
   const { connections } = useBunkerStore();
diff --git a/src/init/soapbox-head.tsx b/src/init/soapbox-head.tsx
index b8e608615..a9ead879b 100644
--- a/src/init/soapbox-head.tsx
+++ b/src/init/soapbox-head.tsx
@@ -1,12 +1,10 @@
 import clsx from 'clsx';
 import { lazy, useEffect } from 'react';
 
-import {
-  useSettings,
-  useSoapboxConfig,
-  useTheme,
-  useLocale,
-} from 'soapbox/hooks/index.ts';
+import { useLocale } from 'soapbox/hooks/useLocale.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
 import { startSentry } from 'soapbox/sentry.ts';
 import { generateThemeCss } from 'soapbox/utils/theme.ts';
diff --git a/src/init/soapbox-load.tsx b/src/init/soapbox-load.tsx
index 3f1617ebb..fa77d86e0 100644
--- a/src/init/soapbox-load.tsx
+++ b/src/init/soapbox-load.tsx
@@ -6,15 +6,13 @@ import { fetchMe } from 'soapbox/actions/me.ts';
 import { loadSoapboxConfig } from 'soapbox/actions/soapbox.ts';
 import LoadingScreen from 'soapbox/components/loading-screen.tsx';
 import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
-import {
-  useAppSelector,
-  useAppDispatch,
-  useOwnAccount,
-  useLocale,
-  useInstance,
-} from 'soapbox/hooks/index.ts';
 import { useBunker } from 'soapbox/hooks/nostr/useBunker.ts';
 import { useSigner } from 'soapbox/hooks/nostr/useSigner.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useLocale } from 'soapbox/hooks/useLocale.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import MESSAGES from 'soapbox/messages.ts';
 
 /** Load initial data from the backend */
diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx
index 1f193551f..bf61583c3 100644
--- a/src/init/soapbox-mount.tsx
+++ b/src/init/soapbox-mount.tsx
@@ -8,16 +8,12 @@ import * as BuildConfig from 'soapbox/build-config.ts';
 import LoadingScreen from 'soapbox/components/loading-screen.tsx';
 import { ScrollContext } from 'soapbox/components/scroll-context.tsx';
 import SiteErrorBoundary from 'soapbox/components/site-error-boundary.tsx';
-import {
-  ModalContainer,
-} from 'soapbox/features/ui/util/async-components.ts';
-import {
-  useAppDispatch,
-  useAppSelector,
-  useLoggedIn,
-  useOwnAccount,
-  useSoapboxConfig,
-} from 'soapbox/hooks/index.ts';
+import { ModalContainer } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { useCachedLocationHandler } from 'soapbox/utils/redirect.ts';
 
 const GdprBanner = lazy(() => import('soapbox/components/gdpr-banner.tsx'));
diff --git a/src/pages/default-page.tsx b/src/pages/default-page.tsx
index f2d9dc36b..5597b661b 100644
--- a/src/pages/default-page.tsx
+++ b/src/pages/default-page.tsx
@@ -6,7 +6,8 @@ import {
   SignUpPanel,
   CtaBanner,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface IDefaultPage {
   children: React.ReactNode;
diff --git a/src/pages/event-page.tsx b/src/pages/event-page.tsx
index 23aaf7b4d..1146c7c35 100644
--- a/src/pages/event-page.tsx
+++ b/src/pages/event-page.tsx
@@ -13,7 +13,8 @@ import {
   TrendsPanel,
   WhoToFollowPanel,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 const getStatus = makeGetStatus();
diff --git a/src/pages/events-page.tsx b/src/pages/events-page.tsx
index f2a4ea557..f5c1a8ae4 100644
--- a/src/pages/events-page.tsx
+++ b/src/pages/events-page.tsx
@@ -5,7 +5,7 @@ import {
   TrendsPanel,
   NewEventPanel,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useFeatures } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface IEventsPage {
   children: React.ReactNode;
diff --git a/src/pages/group-page.tsx b/src/pages/group-page.tsx
index 88f7080ef..da64e60a0 100644
--- a/src/pages/group-page.tsx
+++ b/src/pages/group-page.tsx
@@ -20,7 +20,8 @@ import {
   SignUpPanel,
   SuggestedGroupsPanel,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 import type { Group } from 'soapbox/schemas/index.ts';
 
diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx
index 24090b5aa..859c0036c 100644
--- a/src/pages/home-page.tsx
+++ b/src/pages/home-page.tsx
@@ -20,8 +20,13 @@ import {
   CtaBanner,
   AnnouncementsPanel,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDraggedFiles, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 
 import ComposeForm from '../features/compose/components/compose-form.tsx';
diff --git a/src/pages/landing-page.tsx b/src/pages/landing-page.tsx
index 195943dba..1620ec015 100644
--- a/src/pages/landing-page.tsx
+++ b/src/pages/landing-page.tsx
@@ -6,7 +6,8 @@ import {
   CtaBanner,
   WhoToFollowPanel,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface ILandingPage {
   children: React.ReactNode;
diff --git a/src/pages/profile-page.tsx b/src/pages/profile-page.tsx
index 6f4d41388..b9dc04bb7 100644
--- a/src/pages/profile-page.tsx
+++ b/src/pages/profile-page.tsx
@@ -17,7 +17,9 @@ import {
   PinnedAccountsPanel,
   AccountNotePanel,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 import { getAcct } from 'soapbox/utils/accounts.ts';
 
 interface IProfilePage {
diff --git a/src/pages/remote-instance-page.tsx b/src/pages/remote-instance-page.tsx
index 043125c9a..476e1308e 100644
--- a/src/pages/remote-instance-page.tsx
+++ b/src/pages/remote-instance-page.tsx
@@ -5,7 +5,8 @@ import {
   InstanceInfoPanel,
   InstanceModerationPanel,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { federationRestrictionsDisclosed } from 'soapbox/utils/state.ts';
 
 interface IRemoteInstancePage {
diff --git a/src/pages/search-page.tsx b/src/pages/search-page.tsx
index ac372c6cb..550e26eea 100644
--- a/src/pages/search-page.tsx
+++ b/src/pages/search-page.tsx
@@ -7,7 +7,8 @@ import {
   CtaBanner,
   SuggestedGroupsPanel,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface ISearchPage {
   children: React.ReactNode;
diff --git a/src/pages/status-page.tsx b/src/pages/status-page.tsx
index a63a983c8..84cc0d92e 100644
--- a/src/pages/status-page.tsx
+++ b/src/pages/status-page.tsx
@@ -6,7 +6,8 @@ import {
   SignUpPanel,
   CtaBanner,
 } from 'soapbox/features/ui/util/async-components.ts';
-import { useAppSelector, useFeatures } from 'soapbox/hooks/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface IStatusPage {
   children: React.ReactNode;
diff --git a/src/queries/accounts.ts b/src/queries/accounts.ts
index 0dbcb03b5..34e3c3497 100644
--- a/src/queries/accounts.ts
+++ b/src/queries/accounts.ts
@@ -1,7 +1,9 @@
 import { useMutation } from '@tanstack/react-query';
 
 import { patchMeSuccess } from 'soapbox/actions/me.ts';
-import { useApi, useAppDispatch, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import toast from 'soapbox/toast.tsx';
 
 export type IAccount = {
diff --git a/src/queries/chats.ts b/src/queries/chats.ts
index 49ecef1bb..a80c6f757 100644
--- a/src/queries/chats.ts
+++ b/src/queries/chats.ts
@@ -4,7 +4,11 @@ import sumBy from 'lodash/sumBy';
 import { importFetchedAccount, importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
 import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
-import { useApi, useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { ChatMessage } from 'soapbox/types/entities.ts';
diff --git a/src/queries/embed.ts b/src/queries/embed.ts
index f183eb5a6..d0ddead89 100644
--- a/src/queries/embed.ts
+++ b/src/queries/embed.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
 type Embed = {
   type: string;
diff --git a/src/queries/relationships.ts b/src/queries/relationships.ts
index c5d11062d..9804dd9c4 100644
--- a/src/queries/relationships.ts
+++ b/src/queries/relationships.ts
@@ -1,7 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
 
 import { fetchRelationshipsFail, fetchRelationshipsSuccess } from 'soapbox/actions/accounts.ts';
-import { useApi, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const useFetchRelationships = () => {
   const api = useApi();
diff --git a/src/queries/search.ts b/src/queries/search.ts
index b33c47264..c23d84baa 100644
--- a/src/queries/search.ts
+++ b/src/queries/search.ts
@@ -1,6 +1,6 @@
 import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 import { Account } from 'soapbox/types/entities.ts';
 import { getPagination } from 'soapbox/utils/pagination.ts';
 import { flattenPages, PaginatedResult } from 'soapbox/utils/queries.ts';
diff --git a/src/queries/suggestions.ts b/src/queries/suggestions.ts
index 42df95660..71076a86a 100644
--- a/src/queries/suggestions.ts
+++ b/src/queries/suggestions.ts
@@ -2,7 +2,8 @@ import { useInfiniteQuery, useMutation, keepPreviousData } from '@tanstack/react
 
 import { fetchRelationships } from 'soapbox/actions/accounts.ts';
 import { importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
-import { useApi, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { getPagination } from 'soapbox/utils/pagination.ts';
 
 import { PaginatedResult, removePageItem } from '../utils/queries.ts';
diff --git a/src/queries/trends.ts b/src/queries/trends.ts
index 023a329f8..1aa292224 100644
--- a/src/queries/trends.ts
+++ b/src/queries/trends.ts
@@ -1,7 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { fetchTrendsSuccess } from 'soapbox/actions/trends.ts';
-import { useApi, useAppDispatch } from 'soapbox/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import type { Tag } from 'soapbox/types/entities.ts';

From 7d645e0a54ad393b28b49380ef3b76f0563a07b5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 15:25:54 -0600
Subject: [PATCH 086/133] Add a theme color to webmanifest

---
 vite.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vite.config.ts b/vite.config.ts
index f7c890b94..c056a0a4d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -62,6 +62,7 @@ export default defineConfig(() => {
           name: 'Soapbox',
           short_name: 'Soapbox',
           description: 'A social media frontend with a focus on custom branding and ease of use.',
+          theme_color: '#0482d8',
         },
         srcDir: 'src/service-worker',
         filename: 'sw.ts',

From 80bc0f1febbe561284fe33cc41a0bf32465af444 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 15:40:20 -0600
Subject: [PATCH 087/133] Remove becoming a developer through the JS console

---
 src/globals.ts       | 23 -----------------------
 src/init/soapbox.tsx |  4 ----
 2 files changed, 27 deletions(-)
 delete mode 100644 src/globals.ts

diff --git a/src/globals.ts b/src/globals.ts
deleted file mode 100644
index e67c5742b..000000000
--- a/src/globals.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * globals: do things through the console.
- * This feature is for developers.
- */
-import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
-
-import type { Store } from 'soapbox/store.ts';
-
-/** Add Soapbox globals to the window. */
-export const createGlobals = (store: Store) => {
-  const Soapbox = {
-    /** Become a developer with `Soapbox.isDeveloper()` */
-    isDeveloper: (bool = true): boolean => {
-      if (![true, false].includes(bool)) {
-        throw `Invalid option ${bool}. Must be true or false.`;
-      }
-      store.dispatch(changeSettingImmediate(['isDeveloper'], bool) as any);
-      return bool;
-    },
-  };
-
-  (window as any).Soapbox = Soapbox;
-};
diff --git a/src/init/soapbox.tsx b/src/init/soapbox.tsx
index cbddedf53..be0caa3a7 100644
--- a/src/init/soapbox.tsx
+++ b/src/init/soapbox.tsx
@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 
 import { NostrProvider } from 'soapbox/contexts/nostr-context.tsx';
 import { StatProvider } from 'soapbox/contexts/stat-context.tsx';
-import { createGlobals } from 'soapbox/globals.ts';
 import { queryClient } from 'soapbox/queries/client.ts';
 
 import { checkOnboardingStatus } from '../actions/onboarding.ts';
@@ -14,9 +13,6 @@ import SoapboxHead from './soapbox-head.tsx';
 import SoapboxLoad from './soapbox-load.tsx';
 import SoapboxMount from './soapbox-mount.tsx';
 
-// Configure global functions for developers
-createGlobals(store);
-
 // Preload happens synchronously
 store.dispatch(preload() as any);
 

From 98b8455c8dc48c5479ce4dec0d2eee93d694de37 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 15:43:26 -0600
Subject: [PATCH 088/133] Remove package resolutions

---
 package.json |  5 ----
 yarn.lock    | 73 ++++++++--------------------------------------------
 2 files changed, 11 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 37479066b..8fae41ee1 100644
--- a/package.json
+++ b/package.json
@@ -187,10 +187,5 @@
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-pwa": "^0.20.5",
     "vitest": "^2.1.1"
-  },
-  "resolutions": {
-    "glob-parent": "^6.0.1",
-    "jsonwebtoken": "^9.0.0",
-    "loader-utils": "^2.0.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 5dfb7c149..e1add8d3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3320,11 +3320,6 @@ balanced-match@^2.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -3377,11 +3372,6 @@ browserslist@^4.0.0, browserslist@^4.16.6, browserslist@^4.21.10, browserslist@^
     node-releases "^2.0.18"
     update-browserslist-db "^1.1.0"
 
-buffer-equal-constant-time@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
-  integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==
-
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -4130,13 +4120,6 @@ dotenv@^16.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
   integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
 
-ecdsa-sig-formatter@1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
-  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
-  dependencies:
-    safe-buffer "^5.0.1"
-
 ejs@^3.1.6:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
@@ -4179,11 +4162,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
 end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -4960,7 +4938,14 @@ get-tsconfig@^4.5.0:
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
-glob-parent@^5.1.2, glob-parent@^6.0.1, glob-parent@^6.0.2, glob-parent@~5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -5493,7 +5478,7 @@ is-generator-function@^1.0.10:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-glob@^4.0.0, is-glob@^4.0.3, is-glob@~4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -5786,7 +5771,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
+json5@^2.2.0, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -5810,16 +5795,6 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.0.tgz#f802669a524ec4805fa7389eadbc9921d5dc8072"
   integrity sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg==
 
-jsonwebtoken@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-9.0.0.tgz#d0faf9ba1cc3a56255fe49c0961a67e520c1926d"
-  integrity sha512-tuGfYXxkQGDPnLJ7SibiQgVgeDgfbPq2k2ICcbgqW8WxWLBAxKQM/ZCu/IT8SOSwmaYl4dpTFCW5xZv7YbbWUw==
-  dependencies:
-    jws "^3.2.2"
-    lodash "^4.17.21"
-    ms "^2.1.1"
-    semver "^7.3.8"
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
@@ -5830,23 +5805,6 @@ jsonwebtoken@^9.0.0:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-jwa@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
-  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
-  dependencies:
-    buffer-equal-constant-time "1.0.1"
-    ecdsa-sig-formatter "1.0.11"
-    safe-buffer "^5.0.1"
-
-jws@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
-  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
-  dependencies:
-    jwa "^1.4.1"
-    safe-buffer "^5.0.1"
-
 keycode@^2.1.7:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
@@ -5979,15 +5937,6 @@ load-tsconfig@^0.2.3:
   resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
   integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
 
-loader-utils@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
-  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
 localforage@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
@@ -7600,7 +7549,7 @@ safe-array-concat@^1.0.1:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0:
+safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==

From 853f6d97169681458b8be6dec8c993e68da307ed Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 17:38:00 -0600
Subject: [PATCH 089/133] sass: switch @import to @use

---
 src/styles/application.scss             | 56 ++++++++++++-------------
 src/styles/components/compose-form.scss |  6 ++-
 src/styles/components/search.scss       |  4 +-
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 5e29bcde8..873f81992 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -1,30 +1,30 @@
-@import 'variables';
-@import 'fonts';
-@import 'basics';
-@import 'loading';
-@import 'ui';
-@import 'emoji-picker';
-@import 'rtl';
-@import 'accessibility';
-@import 'navigation';
-@import 'autosuggest';
+@use 'variables';
+@use 'fonts';
+@use 'basics';
+@use 'loading';
+@use 'ui';
+@use 'emoji-picker';
+@use 'rtl';
+@use 'accessibility';
+@use 'navigation';
+@use 'autosuggest';
 
 // COMPONENTS
-@import 'components/buttons';
-@import 'components/modal';
-@import 'components/compose-form';
-@import 'components/status';
-@import 'components/reply-mentions';
-@import 'components/detailed-status';
-@import 'components/media-gallery';
-@import 'components/notification';
-@import 'components/display-name';
-@import 'components/columns';
-@import 'components/search';
-@import 'components/video-player';
-@import 'components/audio-player';
-@import 'components/crypto-donate';
-@import 'components/aliases';
-@import 'components/icon';
-@import 'forms';
-@import 'utilities';
+@use 'components/buttons';
+@use 'components/modal';
+@use 'components/compose-form';
+@use 'components/status';
+@use 'components/reply-mentions';
+@use 'components/detailed-status';
+@use 'components/media-gallery';
+@use 'components/notification';
+@use 'components/display-name';
+@use 'components/columns';
+@use 'components/search';
+@use 'components/video-player';
+@use 'components/audio-player';
+@use 'components/crypto-donate';
+@use 'components/aliases';
+@use 'components/icon';
+@use 'forms';
+@use 'utilities';
diff --git a/src/styles/components/compose-form.scss b/src/styles/components/compose-form.scss
index dd1b17802..9139a9ce3 100644
--- a/src/styles/components/compose-form.scss
+++ b/src/styles/components/compose-form.scss
@@ -1,3 +1,5 @@
+@use "../variables";
+
 .compose-form {
   &__warning {
     @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
@@ -5,7 +7,7 @@
     strong {
       @apply font-medium;
 
-      @each $lang in $cjk-langs {
+      @each $lang in variables.$cjk-langs {
         &:lang(#{$lang}) {
           @apply font-bold;
         }
@@ -168,7 +170,7 @@
       strong {
         @apply block font-medium text-black dark:text-white;
 
-        @each $lang in $cjk-langs {
+        @each $lang in variables.$cjk-langs {
           &:lang(#{$lang}) {
             @apply font-bold;
           }
diff --git a/src/styles/components/search.scss b/src/styles/components/search.scss
index 70d39c8d2..66c2f4311 100644
--- a/src/styles/components/search.scss
+++ b/src/styles/components/search.scss
@@ -1,3 +1,5 @@
+@use "../fonts";
+
 .search {
   position: relative;
 }
@@ -14,7 +16,7 @@
 
   .svg-icon {
     @apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
-    @include font-size(16);
+    @include fonts.font-size(16);
     cursor: default;
     display: inline-block;
     position: absolute;

From 606789ffc3999d9f9b33fb02056e761d7a74fe4f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 18:50:49 -0600
Subject: [PATCH 090/133] Add missing dogecoin icon, fix display of unknown
 cryptocurrency icons

---
 src/assets/cryptocurrency/doge.svg                    |  1 +
 src/features/crypto-donate/components/crypto-icon.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/cryptocurrency/doge.svg

diff --git a/src/assets/cryptocurrency/doge.svg b/src/assets/cryptocurrency/doge.svg
new file mode 100644
index 000000000..c22bf09bd
--- /dev/null
+++ b/src/assets/cryptocurrency/doge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" r="16" fill="#C3A634"/><path fill="#FFF" d="M13.248 14.61h4.314v2.286h-4.314v4.818h2.721c1.077 0 1.958-.145 2.644-.437.686-.291 1.224-.694 1.615-1.21a4.4 4.4 0 00.796-1.815 11.4 11.4 0 00.21-2.252 11.4 11.4 0 00-.21-2.252 4.396 4.396 0 00-.796-1.815c-.391-.516-.93-.919-1.615-1.21-.686-.292-1.567-.437-2.644-.437h-2.721v4.325zm-2.766 2.286H9v-2.285h1.482V8h6.549c1.21 0 2.257.21 3.142.627.885.419 1.607.99 2.168 1.715.56.724.977 1.572 1.25 2.543.273.971.409 2.01.409 3.115a11.47 11.47 0 01-.41 3.115c-.272.97-.689 1.819-1.25 2.543-.56.725-1.282 1.296-2.167 1.715-.885.418-1.933.627-3.142.627h-6.549v-7.104z"/></g></svg>
\ No newline at end of file
diff --git a/src/features/crypto-donate/components/crypto-icon.tsx b/src/features/crypto-donate/components/crypto-icon.tsx
index c42327bbe..45b78e040 100644
--- a/src/features/crypto-donate/components/crypto-icon.tsx
+++ b/src/features/crypto-donate/components/crypto-icon.tsx
@@ -1,10 +1,14 @@
 import genericIcon from 'soapbox/assets/cryptocurrency/generic.svg';
 
+const icons = import.meta.glob('../../../assets/cryptocurrency/*.svg', { eager: true });
+
 /** Get crypto icon URL by ticker symbol, or fall back to generic icon */
 function getIcon(ticker: string): string {
-  try {
-    return new URL(`../../../assets/cryptocurrency/${ticker}.svg`, import.meta.url).href;
-  } catch {
+  const iconPath = `../../../assets/cryptocurrency/${ticker}.svg`;
+
+  if (icons[iconPath]) {
+    return new URL(iconPath, import.meta.url).href;
+  } else {
     return genericIcon;
   }
 }

From 2f54640bea61d8ec8138793c14b922c68b53af0b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 10 Nov 2024 22:06:17 -0600
Subject: [PATCH 091/133] Fix cryptocurrency icons

---
 src/features/crypto-donate/components/crypto-icon.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/features/crypto-donate/components/crypto-icon.tsx b/src/features/crypto-donate/components/crypto-icon.tsx
index 45b78e040..2ec7626e5 100644
--- a/src/features/crypto-donate/components/crypto-icon.tsx
+++ b/src/features/crypto-donate/components/crypto-icon.tsx
@@ -1,16 +1,11 @@
 import genericIcon from 'soapbox/assets/cryptocurrency/generic.svg';
 
-const icons = import.meta.glob('../../../assets/cryptocurrency/*.svg', { eager: true });
+const icons: Record<string, { default: string }> = import.meta.glob('../../../assets/cryptocurrency/*.svg', { eager: true });
 
 /** Get crypto icon URL by ticker symbol, or fall back to generic icon */
 function getIcon(ticker: string): string {
   const iconPath = `../../../assets/cryptocurrency/${ticker}.svg`;
-
-  if (icons[iconPath]) {
-    return new URL(iconPath, import.meta.url).href;
-  } else {
-    return genericIcon;
-  }
+  return icons[iconPath]?.default || genericIcon;
 }
 
 interface ICryptoIcon {

From 222227155093d7ccdf4dd6a952bc5345334df461 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 11 Nov 2024 11:44:49 -0300
Subject: [PATCH 092/133] Remove unnecessary classname "button-theme-icon"

---
 src/components/sidebar-menu.tsx                               | 2 +-
 src/features/about/index.tsx                                  | 4 ++--
 src/features/backups/index.tsx                                | 2 +-
 src/features/compose/components/reply-mentions.tsx            | 4 ++--
 src/features/crypto-donate/components/crypto-address.tsx      | 2 +-
 src/features/event/components/event-header.tsx                | 2 +-
 src/features/event/event-information.tsx                      | 2 +-
 .../components/restricted-instance.tsx                        | 2 +-
 src/styles/tailwind.css                                       | 4 ----
 9 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 957d7b9e3..0a90e0335 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -148,7 +148,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
   const renderAccount = (account: AccountEntity) => (
     <Link to={'/'} className='inline-flex'>
-      <button className='button-theme-muted !block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleSwitchAccount(account)} key={account.id}>
+      <button className='!block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleSwitchAccount(account)} key={account.id}>
         <div className='pointer-events-none max-w-[288px]'>
           <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
         </div>
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 6e11b4ae2..1a2ad7077 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -45,7 +45,7 @@ const AboutPage: React.FC = () => {
       <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
           <Link to={'/'} className='inline-flex'>
-            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(defaultLocale)}>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(defaultLocale)}>
               {/* @ts-ignore */}
               {languages[defaultLocale] || defaultLocale}
             </button>
@@ -55,7 +55,7 @@ const AboutPage: React.FC = () => {
           pageLocales?.map(locale => (
             <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
               <Link to={'/'} className='inline-flex'>
-                <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(locale)}>
+                <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(locale)}>
                   {/* @ts-ignore */}
                   {languages[locale] || locale}
                 </button>
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index f83336ae3..1c4d38204 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -88,7 +88,7 @@ const Backups = () => {
       {intl.formatMessage(messages.emptyMessage, {
         action: (
           <Link to={'/'} className='inline-flex'>
-            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleCreateBackup}>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleCreateBackup}>
               <Text tag='span' theme='primary' size='sm' className='hover:underline'>
                 {intl.formatMessage(messages.emptyMessageAction)}
               </Text>
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index ff5c221e2..e23207a0b 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -49,7 +49,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   if (to.size === 0) {
     return (
       <Link to={'/'} className='inline-flex'>
-        <button className='button-theme-muted mb-1 cursor-pointer space-x-2 !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
+        <button className='mb-1 cursor-pointer space-x-2 !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
           <FormattedMessage
             id='reply_mentions.reply_empty'
             defaultMessage='Replying to post'
@@ -76,7 +76,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   return (
     <Link to={'/'} className='inline-flex'>
-      <button className='button-theme-muted mb-1 cursor-pointer space-x-2 !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent focus:ring-offset-0  dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
+      <button className='mb-1 cursor-pointer space-x-2 !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent focus:ring-offset-0  dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
         <FormattedMessage
           id='reply_mentions.reply'
           defaultMessage='Replying to {accounts}'
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 0a197d397..d40c83df5 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -47,7 +47,7 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
 
         <HStack alignItems='center' className='ml-auto'>
           <Link to={'/'} className='inline-flex'>
-            <button className='button-theme-muted !ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' onClick={handleModalClick}>
+            <button className='!ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' onClick={handleModalClick}>
               <SvgIcon src={qrcodeIcon} size={20} />
             </button>
           </Link>
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index f0b0d6f53..2be5a25ec 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -472,7 +472,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           <HStack alignItems='center' space={2}>
             <SvgIcon src={usersIcon} />
             <Link to={'/'} className='inline-flex'>
-              <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleParticipantsClick}>
+              <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleParticipantsClick}>
                 <span>
                   <FormattedMessage
                     id='event.participants'
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index 72c959161..95796b934 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -100,7 +100,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         <Fragment key='event-map'>
           <br />
           <Link to={'/'} className='inline-flex'>
-            <button className='button-theme-muted space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleShowMap}>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleShowMap}>
               <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
             </button>
           </Link>
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 57c75080e..32b27f62e 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -29,7 +29,7 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
   return (
     <div>
       <Link to={'/'} className='inline-flex'>
-        <button className='button-theme-muted flex items-center gap-1 space-x-2 !border-none  !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={toggleExpanded}>
+        <button className='flex items-center gap-1 space-x-2 !border-none  !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={toggleExpanded}>
           <SvgIcon src={expanded ? caretDownIcon : caretRightIcon} />
           <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
             {remoteInstance.host}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index e8e148e49..e74538275 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,10 +3,6 @@
 @tailwind utilities;
 
 @layer utilities {
-  .button-theme-muted {
-    @apply border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500
-  }
-
   .break-word-nested > p {
     word-break: break-word;
   }

From 5252e1212c60141933c35f093885fc96ad0d635e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 12:58:37 -0300
Subject: [PATCH 093/133] Merge remote-tracking branch 'origin' into
 fix-classnames

---
 .eslintrc.json                                |   20 +-
 package.json                                  |   33 +-
 scripts/do-release.ts                         |    2 +-
 src/actions/about.test.ts                     |    7 +-
 src/actions/about.ts                          |    4 +-
 src/actions/account-notes.test.ts             |    8 +-
 src/actions/account-notes.ts                  |    4 +-
 src/actions/accounts.test.ts                  |   13 +-
 src/actions/accounts.ts                       |   20 +-
 src/actions/admin.ts                          |   15 +-
 src/actions/aliases.ts                        |   16 +-
 src/actions/apps.ts                           |    2 +-
 src/actions/auth.ts                           |   36 +-
 src/actions/backups.ts                        |    4 +-
 src/actions/blocks.test.ts                    |   10 +-
 src/actions/blocks.ts                         |   10 +-
 src/actions/bookmarks.ts                      |    8 +-
 src/actions/chats.ts                          |   10 +-
 src/actions/compose-status.ts                 |    6 +-
 src/actions/compose.test.ts                   |   11 +-
 src/actions/compose.ts                        |   44 +-
 src/actions/consumer-auth.ts                  |   12 +-
 src/actions/conversations.ts                  |   10 +-
 src/actions/custom-emojis.ts                  |    6 +-
 src/actions/directory.ts                      |   10 +-
 src/actions/domain-blocks.ts                  |   12 +-
 src/actions/email-list.ts                     |    4 +-
 src/actions/emoji-reacts.ts                   |   12 +-
 src/actions/emojis.ts                         |    6 +-
 src/actions/events.ts                         |   18 +-
 src/actions/export-data.ts                    |    8 +-
 src/actions/external-auth.ts                  |   18 +-
 src/actions/familiar-followers.ts             |   10 +-
 src/actions/favourites.ts                     |   10 +-
 src/actions/filters.ts                        |   10 +-
 src/actions/groups.ts                         |   14 +-
 src/actions/history.ts                        |    8 +-
 src/actions/import-data.ts                    |    6 +-
 src/actions/importer/index.ts                 |   14 +-
 src/actions/instance.ts                       |   10 +-
 src/actions/interactions.ts                   |   20 +-
 src/actions/lists.ts                          |   14 +-
 src/actions/markers.ts                        |    6 +-
 src/actions/me.ts                             |   20 +-
 src/actions/media.ts                          |   16 +-
 src/actions/mfa.ts                            |    4 +-
 src/actions/modals.ts                         |    4 +-
 src/actions/moderation.tsx                    |   32 +-
 src/actions/mrf.ts                            |    8 +-
 src/actions/mutes.ts                          |    8 +-
 src/actions/nostr.ts                          |   14 +-
 src/actions/notifications.test.ts             |    9 +-
 src/actions/notifications.ts                  |   30 +-
 src/actions/oauth.ts                          |    6 +-
 src/actions/onboarding.test.ts                |    6 +-
 src/actions/patron.ts                         |    6 +-
 src/actions/pin-statuses.ts                   |   10 +-
 src/actions/polls.ts                          |    8 +-
 src/actions/preload.test.ts                   |   12 +-
 src/actions/preload.ts                        |    6 +-
 src/actions/push-notifications/registerer.ts  |    8 +-
 src/actions/remote-timeline.ts                |    4 +-
 src/actions/reports.ts                        |   10 +-
 src/actions/scheduled-statuses.ts             |    8 +-
 src/actions/search.ts                         |   12 +-
 src/actions/security.ts                       |   14 +-
 src/actions/settings.ts                       |   10 +-
 src/actions/soapbox.ts                        |   16 +-
 src/actions/status-quotes.test.ts             |    9 +-
 src/actions/status-quotes.ts                  |    6 +-
 src/actions/statuses.test.ts                  |   11 +-
 src/actions/statuses.ts                       |   22 +-
 src/actions/streaming.ts                      |   44 +-
 src/actions/suggestions.ts                    |   16 +-
 src/actions/tags.ts                           |    6 +-
 src/actions/timelines.ts                      |   16 +-
 src/actions/trending-statuses.ts              |   10 +-
 src/actions/trends.ts                         |    6 +-
 src/api/MastodonClient.ts                     |    2 +-
 src/api/hooks/accounts/useAccount.ts          |   12 +-
 src/api/hooks/accounts/useAccountList.ts      |   12 +-
 src/api/hooks/accounts/useAccountLookup.ts    |   12 +-
 src/api/hooks/accounts/useFollow.ts           |   12 +-
 src/api/hooks/accounts/usePatronUser.ts       |   10 +-
 src/api/hooks/accounts/useRelationship.ts     |    8 +-
 src/api/hooks/accounts/useRelationships.ts    |    9 +-
 src/api/hooks/admin/index.ts                  |   12 +-
 src/api/hooks/admin/useAdminAccounts.ts       |    8 +-
 src/api/hooks/admin/useAnnouncements.ts       |    8 +-
 src/api/hooks/admin/useCreateDomain.ts        |    8 +-
 src/api/hooks/admin/useDeleteDomain.ts        |    6 +-
 src/api/hooks/admin/useDomains.ts             |    6 +-
 src/api/hooks/admin/useManageZapSplit.ts      |    8 +-
 src/api/hooks/admin/useModerationLog.ts       |    4 +-
 src/api/hooks/admin/useRelays.ts              |    6 +-
 src/api/hooks/admin/useRules.ts               |    6 +-
 src/api/hooks/admin/useSuggest.ts             |   11 +-
 src/api/hooks/admin/useUpdateDomain.ts        |   10 +-
 src/api/hooks/admin/useVerify.ts              |   11 +-
 src/api/hooks/announcements/index.ts          |    2 +-
 .../hooks/announcements/useAnnouncements.ts   |    6 +-
 src/api/hooks/captcha/useCaptcha.ts           |   10 +-
 src/api/hooks/groups/useBlockGroupMember.ts   |    6 +-
 .../groups/useCancelMembershipRequest.ts      |    9 +-
 src/api/hooks/groups/useCreateGroup.ts        |    8 +-
 src/api/hooks/groups/useDeleteGroup.ts        |    6 +-
 src/api/hooks/groups/useDeleteGroupStatus.ts  |    8 +-
 src/api/hooks/groups/useDemoteGroupMember.ts  |    8 +-
 src/api/hooks/groups/useGroup.test.ts         |   10 +-
 src/api/hooks/groups/useGroup.ts              |   10 +-
 src/api/hooks/groups/useGroupLookup.test.ts   |   10 +-
 src/api/hooks/groups/useGroupLookup.ts        |   12 +-
 src/api/hooks/groups/useGroupMedia.test.ts    |   10 +-
 src/api/hooks/groups/useGroupMedia.ts         |   10 +-
 src/api/hooks/groups/useGroupMembers.test.ts  |   12 +-
 src/api/hooks/groups/useGroupMembers.ts       |   10 +-
 .../groups/useGroupMembershipRequests.ts      |   14 +-
 src/api/hooks/groups/useGroupMutes.ts         |   12 +-
 src/api/hooks/groups/useGroupRelationship.ts  |    8 +-
 src/api/hooks/groups/useGroupRelationships.ts |    9 +-
 src/api/hooks/groups/useGroupSearch.ts        |   13 +-
 src/api/hooks/groups/useGroupTag.ts           |    8 +-
 src/api/hooks/groups/useGroupTags.ts          |   10 +-
 src/api/hooks/groups/useGroupValidation.ts    |    6 +-
 src/api/hooks/groups/useGroups.test.ts        |   12 +-
 src/api/hooks/groups/useGroups.ts             |   12 +-
 src/api/hooks/groups/useGroupsFromTag.ts      |   13 +-
 src/api/hooks/groups/useJoinGroup.ts          |   10 +-
 src/api/hooks/groups/useLeaveGroup.ts         |   10 +-
 src/api/hooks/groups/useMuteGroup.ts          |    6 +-
 src/api/hooks/groups/usePendingGroups.test.ts |   14 +-
 src/api/hooks/groups/usePendingGroups.ts      |   10 +-
 src/api/hooks/groups/usePopularGroups.ts      |   12 +-
 src/api/hooks/groups/usePopularTags.ts        |    9 +-
 src/api/hooks/groups/usePromoteGroupMember.ts |    8 +-
 src/api/hooks/groups/useSuggestedGroups.ts    |   11 +-
 src/api/hooks/groups/useUnmuteGroup.ts        |    6 +-
 src/api/hooks/groups/useUpdateGroup.ts        |    8 +-
 src/api/hooks/groups/useUpdateGroupTag.ts     |    6 +-
 src/api/hooks/index.ts                        |   99 +-
 src/api/hooks/instance/useInstanceV1.ts       |    4 +-
 src/api/hooks/instance/useInstanceV2.ts       |    4 +-
 src/api/hooks/statuses/useBookmarkFolder.ts   |   10 +-
 src/api/hooks/statuses/useBookmarkFolders.ts  |   10 +-
 .../hooks/statuses/useCreateBookmarkFolder.ts |    8 +-
 .../hooks/statuses/useDeleteBookmarkFolder.ts |    4 +-
 .../hooks/statuses/useUpdateBookmarkFolder.ts |    8 +-
 src/api/hooks/streaming/useCommunityStream.ts |    2 +-
 src/api/hooks/streaming/useDirectStream.ts    |    4 +-
 src/api/hooks/streaming/useGroupStream.ts     |    2 +-
 src/api/hooks/streaming/useHashtagStream.ts   |    2 +-
 src/api/hooks/streaming/useListStream.ts      |    4 +-
 src/api/hooks/streaming/usePublicStream.ts    |    2 +-
 src/api/hooks/streaming/useRemoteStream.ts    |    2 +-
 src/api/hooks/streaming/useTimelineStream.ts  |    8 +-
 src/api/hooks/streaming/useUserStream.ts      |   12 +-
 src/api/hooks/zap-split/useZapSplit.ts        |    8 +-
 src/api/index.ts                              |    8 +-
 src/assets/cryptocurrency/doge.svg            |    1 +
 src/build-config.ts                           |    2 +-
 src/components/__mocks__/react-inlinesvg.tsx  |    2 -
 src/components/account-search.tsx             |   12 +-
 src/components/account.test.tsx               |    8 +-
 src/components/account.tsx                    |   33 +-
 src/components/animated-number.tsx            |    4 +-
 .../announcements/announcement-content.tsx    |    6 +-
 src/components/announcements/announcement.tsx |   14 +-
 .../announcements/announcements-panel.tsx     |   14 +-
 src/components/announcements/emoji.tsx        |    8 +-
 src/components/announcements/reaction.tsx     |   12 +-
 .../announcements/reactions-bar.tsx           |   13 +-
 src/components/attachment-thumbs.tsx          |   10 +-
 src/components/authorize-reject-buttons.tsx   |   15 +-
 src/components/autosuggest-account-input.tsx  |   12 +-
 src/components/autosuggest-emoji.test.tsx     |    6 +-
 src/components/autosuggest-emoji.tsx          |   10 +-
 src/components/autosuggest-input.tsx          |   21 +-
 src/components/autosuggest-location.tsx       |   17 +-
 src/components/avatar-stack.tsx               |   10 +-
 src/components/badge.test.tsx                 |    6 +-
 src/components/badge.tsx                      |    4 +-
 src/components/big-card.tsx                   |   10 +-
 src/components/birthday-input.tsx             |    7 +-
 src/components/birthday-panel.tsx             |   13 +-
 src/components/blurhash.tsx                   |    4 +-
 src/components/copyable-input.tsx             |    6 +-
 src/components/display-name-inline.tsx        |   12 +-
 src/components/display-name.test.tsx          |    8 +-
 src/components/display-name.tsx               |   14 +-
 src/components/domain.tsx                     |   15 +-
 .../dropdown-menu/dropdown-menu-item.tsx      |    5 +-
 .../dropdown-menu/dropdown-menu.tsx           |   23 +-
 src/components/dropdown-menu/index.ts         |    6 +-
 src/components/emoji-graphic.tsx              |    4 +-
 src/components/event-preview.tsx              |   24 +-
 src/components/extended-video-player.tsx      |    4 +-
 src/components/gameboy.tsx                    |  193 ---
 src/components/gdpr-banner.tsx                |   11 +-
 src/components/group-card.tsx                 |   18 +-
 src/components/groups/group-avatar.tsx        |    8 +-
 .../groups/popover/group-popover.tsx          |   16 +-
 src/components/hashtag-link.tsx               |    4 +-
 src/components/hashtag.tsx                    |   10 +-
 src/components/helmet.tsx                     |   16 +-
 src/components/hover-ref-wrapper.tsx          |   10 +-
 src/components/hover-status-wrapper.tsx       |    6 +-
 src/components/icon-button.tsx                |    3 +-
 src/components/icon-with-counter.tsx          |    6 +-
 src/components/icon.tsx                       |    1 -
 src/components/landing-gradient.tsx           |    2 -
 src/components/link.tsx                       |    1 -
 src/components/list.tsx                       |   23 +-
 src/components/load-gap.tsx                   |    6 +-
 src/components/load-more.tsx                  |    3 +-
 src/components/loading-screen.tsx             |    6 +-
 src/components/location-search.tsx            |   18 +-
 src/components/markup.tsx                     |    6 +-
 src/components/media-gallery.tsx              |   48 +-
 src/components/mention.tsx                    |    7 +-
 src/components/missing-indicator.tsx          |    5 +-
 src/components/modal-root.tsx                 |   22 +-
 src/components/navlinks.tsx                   |    6 +-
 src/components/outline-box.tsx                |    1 -
 src/components/pending-items-row.tsx          |   11 +-
 src/components/polls/poll-footer.test.tsx     |   10 +-
 src/components/polls/poll-footer.tsx          |   16 +-
 src/components/polls/poll-option.tsx          |   11 +-
 src/components/polls/poll.tsx                 |   17 +-
 src/components/preview-card.tsx               |   31 +-
 src/components/profile-hover-card.tsx         |   35 +-
 src/components/progress-circle.tsx            |    1 -
 src/components/pull-to-refresh.tsx            |    3 +-
 src/components/pullable.tsx                   |    4 +-
 src/components/quoted-status-indicator.tsx    |   13 +-
 src/components/quoted-status.test.tsx         |   10 +-
 src/components/quoted-status.tsx              |   29 +-
 src/components/radio.tsx                      |    8 +-
 src/components/relative-timestamp.tsx         |    6 +-
 src/components/safe-embed.tsx                 |    2 +-
 src/components/scroll-context.tsx             |    8 +-
 src/components/scroll-top-button.test.tsx     |    6 +-
 src/components/scroll-top-button.tsx          |   10 +-
 src/components/scrollable-list.tsx            |   13 +-
 src/components/sentry-feedback-form.tsx       |   13 +-
 src/components/sidebar-menu.tsx               |  109 +-
 src/components/sidebar-navigation-link.tsx    |    7 +-
 src/components/sidebar-navigation.tsx         |   85 +-
 src/components/site-error-boundary.tsx        |   23 +-
 src/components/site-logo.tsx                  |   11 +-
 src/components/status-action-bar.tsx          |  168 ++-
 src/components/status-action-button.tsx       |   12 +-
 src/components/status-content.tsx             |   25 +-
 src/components/status-hover-card.tsx          |   15 +-
 src/components/status-list.tsx                |   18 +-
 src/components/status-media.tsx               |   19 +-
 src/components/status-reaction-wrapper.tsx    |   20 +-
 src/components/status-reply-mentions.tsx      |   13 +-
 src/components/status.test.tsx                |   12 +-
 src/components/status.tsx                     |   57 +-
 .../sensitive-content-overlay.test.tsx        |   10 +-
 .../statuses/sensitive-content-overlay.tsx    |   41 +-
 src/components/statuses/status-info.tsx       |    5 +-
 src/components/still-image.tsx                |    4 +-
 src/components/thumb-navigation-link.tsx      |    6 +-
 src/components/thumb-navigation.tsx           |   42 +-
 src/components/tombstone.tsx                  |    5 +-
 src/components/translate-button.tsx           |   20 +-
 .../ui/{accordion => }/accordion.tsx          |   18 +-
 .../ui/{avatar => }/avatar.test.tsx           |    6 +-
 src/components/ui/{avatar => }/avatar.tsx     |   11 +-
 src/components/ui/{banner => }/banner.tsx     |    1 -
 .../ui/{button => }/button.test.tsx           |    6 +-
 src/components/ui/{button => }/button.tsx     |   13 +-
 src/components/ui/{card => }/card.test.tsx    |    6 +-
 src/components/ui/{card => }/card.tsx         |   13 +-
 src/components/ui/{carousel => }/carousel.tsx |   14 +-
 src/components/ui/{checkbox => }/checkbox.tsx |    4 +-
 .../ui/{column => }/column.test.tsx           |    6 +-
 src/components/ui/{column => }/column.tsx     |   10 +-
 src/components/ui/{combobox => }/combobox.css |    0
 src/components/ui/{combobox => }/combobox.tsx |    0
 src/components/ui/{counter => }/counter.tsx   |    4 +-
 .../ui/{datepicker => }/datepicker.test.tsx   |    6 +-
 .../ui/{datepicker => }/datepicker.tsx        |    8 +-
 src/components/ui/{datetime => }/datetime.tsx |    4 +-
 .../ui/{divider => }/divider.test.tsx         |    6 +-
 src/components/ui/{divider => }/divider.tsx   |    6 +-
 .../{emoji-selector => }/emoji-selector.tsx   |   19 +-
 src/components/ui/{emoji => }/emoji.test.tsx  |    6 +-
 src/components/ui/{emoji => }/emoji.tsx       |    6 +-
 .../ui/{file-input => }/file-input.tsx        |    2 +-
 .../{form-actions => }/form-actions.test.tsx  |    6 +-
 .../ui/{form-actions => }/form-actions.tsx    |    4 +-
 .../ui/{form-group => }/form-group.test.tsx   |    6 +-
 .../ui/{form-group => }/form-group.tsx        |   14 +-
 src/components/ui/{form => }/form.test.tsx    |    6 +-
 src/components/ui/{form => }/form.tsx         |    4 +-
 src/components/ui/{hstack => }/hstack.tsx     |    2 +-
 .../ui/{icon-button => }/icon-button.tsx      |    8 +-
 src/components/ui/{icon => }/icon.tsx         |    7 +-
 src/components/ui/index.ts                    |   57 -
 src/components/ui/{input => }/input.tsx       |   24 +-
 .../language-dropdown.tsx                     |   16 +-
 src/components/ui/{layout => }/layout.tsx     |    2 +-
 src/components/ui/{menu => }/menu.css         |    0
 src/components/ui/{menu => }/menu.tsx         |    1 -
 src/components/ui/{modal => }/modal.test.tsx  |    6 +-
 src/components/ui/{modal => }/modal.tsx       |   22 +-
 src/components/ui/{popover => }/popover.tsx   |    6 +-
 src/components/ui/{portal => }/portal.tsx     |    2 +-
 .../ui/{progress-bar => }/progress-bar.tsx    |    3 +-
 .../ui/{radio-button => }/radio-button.tsx    |    4 +-
 src/components/ui/{select => }/select.tsx     |    4 +-
 src/components/ui/{slider => }/slider.tsx     |    2 +-
 src/components/ui/{spinner => }/spinner.css   |    0
 src/components/ui/{spinner => }/spinner.tsx   |    5 +-
 src/components/ui/{stack => }/stack.tsx       |    4 +-
 .../ui/{streamfield => }/streamfield.tsx      |   14 +-
 .../ui/{icon => }/svg-icon.test.tsx           |    6 +-
 src/components/ui/{icon => }/svg-icon.tsx     |    1 -
 src/components/ui/{tabs => }/tabs.css         |    0
 src/components/ui/{tabs => }/tabs.tsx         |   17 +-
 .../ui/{tag-input => }/tag-input.tsx          |    7 +-
 src/components/ui/{tag-input => }/tag.tsx     |    8 +-
 src/components/ui/{text => }/text.tsx         |    6 +-
 src/components/ui/{textarea => }/textarea.tsx |   12 +-
 src/components/ui/{toast => }/toast.tsx       |   23 +-
 src/components/ui/{toggle => }/toggle.tsx     |    2 +-
 src/components/ui/{tooltip => }/tooltip.tsx   |    4 +-
 .../ui/{button => }/useButtonStyles.ts        |    2 +-
 src/components/ui/{widget => }/widget.tsx     |   12 +-
 src/components/upload-progress.tsx            |   10 +-
 src/components/upload.tsx                     |   47 +-
 src/components/validation-checkmark.test.tsx  |    6 +-
 src/components/validation-checkmark.tsx       |    9 +-
 src/components/verification-badge.tsx         |    8 +-
 src/containers/account-container.tsx          |    6 +-
 src/containers/status-container.tsx           |    8 +-
 src/contexts/chat-context.tsx                 |   10 +-
 src/contexts/nostr-context.tsx                |    4 +-
 src/contexts/stat-context.tsx                 |    4 +-
 src/custom.ts                                 |    2 +-
 src/entity-store/actions.ts                   |    2 +-
 src/entity-store/entities.ts                  |    2 +-
 src/entity-store/hooks/index.ts               |   20 +-
 src/entity-store/hooks/types.ts               |    2 +-
 src/entity-store/hooks/useBatchedEntities.ts  |   20 +-
 src/entity-store/hooks/useChangeEntity.ts     |   10 +-
 src/entity-store/hooks/useCreateEntity.ts     |   14 +-
 src/entity-store/hooks/useDeleteEntity.ts     |   10 +-
 src/entity-store/hooks/useDismissEntity.ts    |   10 +-
 src/entity-store/hooks/useEntities.ts         |   22 +-
 src/entity-store/hooks/useEntity.ts           |   16 +-
 src/entity-store/hooks/useEntityActions.ts    |   12 +-
 src/entity-store/hooks/useEntityLookup.ts     |   18 +-
 src/entity-store/hooks/useIncrementEntity.ts  |   10 +-
 src/entity-store/hooks/useTransaction.ts      |    8 +-
 src/entity-store/hooks/utils.ts               |    2 +-
 src/entity-store/reducer.test.ts              |   10 +-
 src/entity-store/reducer.ts                   |    8 +-
 src/entity-store/selectors.ts                 |    8 +-
 src/entity-store/utils.ts                     |    2 +-
 src/features/about/index.tsx                  |   36 +-
 .../account-gallery/components/media-item.tsx |   20 +-
 src/features/account-gallery/index.tsx        |   24 +-
 .../components/moved-note.tsx                 |   13 +-
 src/features/account-timeline/index.tsx       |   26 +-
 src/features/account/components/header.tsx    |  144 ++-
 src/features/admin/announcements.tsx          |   22 +-
 src/features/admin/components/admin-tabs.tsx  |    5 +-
 src/features/admin/components/dashcounter.tsx |    5 +-
 .../components/latest-accounts-panel.tsx      |    7 +-
 .../components/registration-mode-picker.tsx   |   12 +-
 .../admin/components/report-status.tsx        |   25 +-
 src/features/admin/components/report.tsx      |   37 +-
 .../admin/components/unapproved-account.tsx   |   13 +-
 src/features/admin/domains.tsx                |   27 +-
 .../admin/hooks/useAdminNostrRelays.ts        |    2 +-
 src/features/admin/index.tsx                  |   13 +-
 src/features/admin/manage-zap-split.tsx       |   21 +-
 src/features/admin/moderation-log.tsx         |   11 +-
 src/features/admin/nostr-relays.tsx           |   14 +-
 src/features/admin/relays.tsx                 |   19 +-
 src/features/admin/rules.tsx                  |   22 +-
 src/features/admin/tabs/awaiting-approval.tsx |   11 +-
 src/features/admin/tabs/dashboard.tsx         |   46 +-
 src/features/admin/tabs/reports.tsx           |   11 +-
 src/features/admin/user-index.tsx             |    9 +-
 src/features/aliases/components/account.tsx   |   18 +-
 src/features/aliases/components/search.tsx    |   13 +-
 src/features/aliases/index.tsx                |   25 +-
 src/features/audio/index.tsx                  |   19 +-
 .../auth-login/components/captcha.test.tsx    |    6 +-
 .../auth-login/components/captcha.tsx         |   10 +-
 .../auth-login/components/consumer-button.tsx |   31 +-
 .../auth-login/components/consumers-list.tsx  |    9 +-
 .../auth-login/components/login-form.test.tsx |    8 +-
 .../auth-login/components/login-form.tsx      |    9 +-
 .../auth-login/components/login-page.test.tsx |    8 +-
 .../auth-login/components/login-page.tsx      |   23 +-
 src/features/auth-login/components/logout.tsx |    6 +-
 .../components/otp-auth-form.test.tsx         |    6 +-
 .../auth-login/components/otp-auth-form.tsx   |   14 +-
 .../password-reset-confirm.test.tsx           |    8 +-
 .../components/password-reset-confirm.tsx     |   22 +-
 .../auth-login/components/password-reset.tsx  |   17 +-
 .../components/registration-form.tsx          |   32 +-
 .../components/registration-page.tsx          |   14 +-
 src/features/auth-token-list/index.tsx        |   22 +-
 src/features/backups/index.tsx                |   31 +-
 src/features/birthdays/account.tsx            |   12 +-
 src/features/blocks/index.tsx                 |   10 +-
 .../components/new-folder-form.tsx            |   12 +-
 src/features/bookmark-folders/index.tsx       |   22 +-
 src/features/bookmarks/index.tsx              |   35 +-
 .../chats/components/chat-composer.tsx        |   36 +-
 .../chats/components/chat-list-item.test.tsx  |    8 +-
 .../chats/components/chat-list-item.tsx       |   32 +-
 src/features/chats/components/chat-list.tsx   |   17 +-
 .../components/chat-message-list-intro.tsx    |   24 +-
 .../components/chat-message-list.test.tsx     |   18 +-
 .../chats/components/chat-message-list.tsx    |   26 +-
 .../chat-message-reaction-wrapper.tsx         |   12 +-
 .../components/chat-message-reaction.test.tsx |    6 +-
 .../components/chat-message-reaction.tsx      |    7 +-
 .../chats/components/chat-message.tsx         |   60 +-
 .../chats/components/chat-page/chat-page.tsx  |   16 +-
 .../chat-page/components/blankslate-empty.tsx |    5 +-
 .../components/blankslate-with-chats.tsx      |    5 +-
 .../chat-page/components/chat-page-main.tsx   |   47 +-
 .../chat-page/components/chat-page-new.tsx    |   11 +-
 .../components/chat-page-settings.tsx         |   25 +-
 .../components/chat-page-sidebar.tsx          |   22 +-
 .../chat-page/components/welcome.tsx          |   15 +-
 .../components/chat-pane-header.test.tsx      |    6 +-
 .../chats/components/chat-pane/blankslate.tsx |    5 +-
 .../components/chat-pane/chat-pane.test.tsx   |   12 +-
 .../chats/components/chat-pane/chat-pane.tsx  |   34 +-
 .../chats/components/chat-pending-upload.tsx  |    4 +-
 .../chats/components/chat-search-input.tsx    |    8 +-
 .../components/chat-search/blankslate.tsx     |    4 +-
 .../chat-search/chat-search.test.tsx          |   10 +-
 .../components/chat-search/chat-search.tsx    |   28 +-
 .../chat-search/empty-results-blankslate.tsx  |    4 +-
 .../chats/components/chat-search/results.tsx  |   13 +-
 .../chats/components/chat-textarea.tsx        |   13 +-
 .../chats/components/chat-upload-preview.tsx  |   10 +-
 src/features/chats/components/chat-upload.tsx |   16 +-
 .../chats/components/chat-widget.test.tsx     |    8 +-
 .../chat-widget/chat-pane-header.tsx          |   10 +-
 .../components/chat-widget/chat-settings.tsx  |   35 +-
 .../components/chat-widget/chat-widget.tsx    |    7 +-
 .../components/chat-widget/chat-window.tsx    |   28 +-
 .../headers/chat-search-header.tsx            |   12 +-
 src/features/chats/components/chat.tsx        |   21 +-
 src/features/chats/components/ui/index.ts     |    2 +-
 src/features/chats/components/ui/pane.tsx     |    1 -
 src/features/chats/index.tsx                  |    6 +-
 src/features/community-timeline/index.tsx     |   20 +-
 .../components/autosuggest-account.tsx        |    6 +-
 .../components/compose-form-button.tsx        |    3 +-
 .../compose/components/compose-form.tsx       |   68 +-
 .../compose/components/markdown-button.tsx    |   11 +-
 .../compose/components/poll-button.tsx        |   11 +-
 .../polls/duration-selector.test.tsx          |    6 +-
 .../components/polls/duration-selector.tsx    |    4 +-
 .../compose/components/polls/poll-form.tsx    |   20 +-
 .../compose/components/privacy-dropdown.tsx   |   31 +-
 .../components/reply-group-indicator.tsx      |   12 +-
 .../compose/components/reply-indicator.tsx    |   16 +-
 .../compose/components/reply-mentions.tsx     |   57 +-
 .../compose/components/schedule-button.tsx    |   11 +-
 .../compose/components/schedule-form.tsx      |   17 +-
 .../compose/components/search-results.tsx     |   37 +-
 .../compose/components/search-zap-split.tsx   |   22 +-
 src/features/compose/components/search.tsx    |   25 +-
 .../compose/components/spoiler-button.tsx     |   11 +-
 .../compose/components/spoiler-input.tsx      |   15 +-
 .../components/text-character-counter.tsx     |    1 -
 .../compose/components/upload-button.tsx      |   12 +-
 .../compose/components/upload-form.tsx        |   15 +-
 .../compose/components/upload-progress.tsx    |    6 +-
 src/features/compose/components/upload.tsx    |   10 +-
 .../components/visual-character-counter.tsx   |    3 +-
 src/features/compose/components/warning.tsx   |    3 +-
 .../containers/quoted-status-container.tsx    |   11 +-
 .../containers/reply-indicator-container.ts   |   10 +-
 .../containers/upload-button-container.ts     |    6 +-
 .../compose/containers/warning-container.tsx  |   11 +-
 src/features/compose/editor/index.tsx         |   18 +-
 .../compose/editor/nodes/emoji-node.tsx       |    5 +-
 src/features/compose/editor/nodes/index.ts    |    4 +-
 .../compose/editor/nodes/mention-node.tsx     |    5 +-
 .../editor/plugins/autosuggest-plugin.tsx     |   32 +-
 .../compose/editor/plugins/link-plugin.tsx    |    1 -
 .../compose/editor/plugins/ref-plugin.tsx     |    4 +-
 .../compose/editor/plugins/state-plugin.tsx   |    4 +-
 src/features/compose/util/counter.ts          |    2 +-
 .../conversations/components/conversation.tsx |   10 +-
 .../components/conversations-list.tsx         |   11 +-
 src/features/conversations/index.tsx          |   16 +-
 .../components/crypto-address.tsx             |   31 +-
 .../components/crypto-donate-panel.tsx        |    9 +-
 .../crypto-donate/components/crypto-icon.tsx  |   11 +-
 .../components/detailed-crypto-address.tsx    |   14 +-
 .../components/lightning-address.tsx          |    8 +-
 .../crypto-donate/components/site-wallet.tsx  |    8 +-
 src/features/crypto-donate/index.tsx          |   10 +-
 src/features/delete-account/index.tsx         |   26 +-
 src/features/developers/apps/create.tsx       |   21 +-
 .../developers/components/indicator.tsx       |    1 -
 .../developers/developers-challenge.tsx       |   16 +-
 src/features/developers/developers-menu.tsx   |   38 +-
 src/features/developers/index.tsx             |   10 +-
 .../developers/service-worker-info.tsx        |   19 +-
 src/features/developers/settings-store.tsx    |   33 +-
 src/features/direct-timeline/index.tsx        |   17 +-
 .../directory/components/account-card.tsx     |   20 +-
 src/features/directory/index.tsx              |   18 +-
 src/features/domain-blocks/index.tsx          |   16 +-
 src/features/edit-email/index.tsx             |   23 +-
 src/features/edit-identity/index.tsx          |   34 +-
 src/features/edit-password/index.tsx          |   23 +-
 .../edit-profile/components/avatar-picker.tsx |   13 +-
 .../edit-profile/components/header-picker.tsx |   17 +-
 src/features/edit-profile/index.tsx           |   52 +-
 src/features/email-confirmation/index.tsx     |   25 +-
 src/features/embedded-status/index.tsx        |   19 +-
 .../components/emoji-picker-dropdown.tsx      |   19 +-
 .../emoji/components/emoji-picker.tsx         |   11 +-
 .../emoji-picker-dropdown-container.tsx       |   11 +-
 src/features/emoji/index.test.ts              |    4 +-
 src/features/emoji/index.ts                   |    4 +-
 src/features/emoji/mapping.ts                 |    2 +-
 src/features/emoji/search.test.ts             |    3 +-
 src/features/emoji/search.ts                  |    4 +-
 .../event/components/event-action-button.tsx  |   20 +-
 src/features/event/components/event-date.tsx  |   10 +-
 .../event/components/event-header.tsx         |  153 ++-
 src/features/event/event-discussion.tsx       |   31 +-
 src/features/event/event-information.tsx      |   68 +-
 .../events/components/event-carousel.tsx      |   19 +-
 src/features/events/index.tsx                 |   16 +-
 .../export-data/components/csv-exporter.tsx   |   11 +-
 src/features/export-data/index.tsx            |    7 +-
 .../components/external-login-form.tsx        |   15 +-
 src/features/external-login/index.tsx         |    5 +-
 src/features/favourited-statuses/index.tsx    |   18 +-
 .../components/instance-restrictions.tsx      |   34 +-
 .../components/restricted-instance.tsx        |   29 +-
 .../federation-restrictions/index.tsx         |   16 +-
 .../feed-suggestions/feed-suggestions.tsx     |   16 +-
 src/features/filters/edit-filter.tsx          |   31 +-
 src/features/filters/index.tsx                |   20 +-
 src/features/follow-recommendations/index.tsx |   15 +-
 .../components/account-authorize.tsx          |   12 +-
 src/features/follow-requests/index.tsx        |   16 +-
 src/features/followed-tags/index.tsx          |   15 +-
 src/features/followers/index.tsx              |   12 +-
 src/features/following/index.tsx              |   12 +-
 src/features/forms/index.tsx                  |    6 +-
 src/features/generic-not-found/index.tsx      |    4 +-
 .../components/group-action-button.test.tsx   |   12 +-
 .../group/components/group-action-button.tsx  |   21 +-
 .../group/components/group-header-image.tsx   |    9 +-
 .../group/components/group-header.test.tsx    |   10 +-
 .../group/components/group-header.tsx         |   34 +-
 .../components/group-member-count.test.tsx    |   10 +-
 .../group/components/group-member-count.tsx   |    7 +-
 .../group-member-list-item.test.tsx           |   12 +-
 .../components/group-member-list-item.tsx     |   44 +-
 .../components/group-options-button.test.tsx  |   12 +-
 .../group/components/group-options-button.tsx |   36 +-
 .../group/components/group-privacy.test.tsx   |   10 +-
 .../group/components/group-privacy.tsx        |   19 +-
 .../components/group-relationship.test.tsx    |   12 +-
 .../group/components/group-relationship.tsx   |   15 +-
 .../components/group-tag-list-item.test.tsx   |   10 +-
 .../group/components/group-tag-list-item.tsx  |   40 +-
 .../group/components/group-tags-field.tsx     |    7 +-
 src/features/group/edit-group.tsx             |   32 +-
 src/features/group/group-blocked-members.tsx  |   22 +-
 src/features/group/group-gallery.tsx          |   18 +-
 src/features/group/group-members.tsx          |   20 +-
 .../group/group-membership-requests.tsx       |   22 +-
 src/features/group/group-tag-timeline.tsx     |   18 +-
 src/features/group/group-tags.tsx             |   18 +-
 src/features/group/group-timeline.tsx         |   29 +-
 src/features/group/manage-group.tsx           |   26 +-
 .../discover/group-grid-item.test.tsx         |    8 +-
 .../components/discover/group-grid-item.tsx   |   18 +-
 .../discover/group-list-item.test.tsx         |    8 +-
 .../components/discover/group-list-item.tsx   |   18 +-
 .../discover/layout-buttons.test.tsx          |    6 +-
 .../components/discover/layout-buttons.tsx    |   10 +-
 .../components/discover/popular-groups.tsx    |   15 +-
 .../components/discover/popular-tags.tsx      |   11 +-
 .../discover/search/blankslate.test.tsx       |    6 +-
 .../components/discover/search/blankslate.tsx |    5 +-
 .../discover/search/recent-searches.tsx       |   16 +-
 .../discover/search/results.test.tsx          |    8 +-
 .../components/discover/search/results.tsx    |   18 +-
 .../discover/search/search.test.tsx           |   12 +-
 .../components/discover/search/search.tsx     |   19 +-
 .../components/discover/suggested-groups.tsx  |   15 +-
 .../discover/tag-list-item.test.tsx           |    8 +-
 .../components/discover/tag-list-item.tsx     |    6 +-
 .../groups/components/group-link-preview.tsx  |    8 +-
 .../groups/components/pending-groups-row.tsx  |   10 +-
 src/features/groups/components/tab-bar.tsx    |    6 +-
 src/features/groups/discover.test.tsx         |   10 +-
 src/features/groups/discover.tsx              |   25 +-
 src/features/groups/index.tsx                 |   31 +-
 src/features/groups/pending-requests.tsx      |   13 +-
 src/features/groups/popular.tsx               |   16 +-
 src/features/groups/suggested.tsx             |   16 +-
 src/features/groups/tag.tsx                   |   22 +-
 src/features/groups/tags.tsx                  |   10 +-
 src/features/hashtag-timeline/index.tsx       |   23 +-
 src/features/home-timeline/index.tsx          |   20 +-
 .../import-data/components/csv-importer.tsx   |   13 +-
 src/features/import-data/index.tsx            |    7 +-
 src/features/intentional-error/index.tsx      |    2 -
 .../landing-timeline/components/logo-text.tsx |    2 -
 .../components/site-banner.tsx                |   11 +-
 src/features/landing-timeline/index.tsx       |   23 +-
 src/features/list-adder/components/list.tsx   |   19 +-
 src/features/list-adder/index.tsx             |   20 +-
 .../list-editor/components/account.tsx        |   18 +-
 .../list-editor/components/edit-list-form.tsx |   11 +-
 .../list-editor/components/search.tsx         |   16 +-
 src/features/list-editor/index.tsx            |   16 +-
 src/features/list-timeline/index.tsx          |   24 +-
 .../lists/components/new-list-form.tsx        |   11 +-
 src/features/lists/index.tsx                  |   30 +-
 src/features/migration/index.tsx              |   17 +-
 .../mutes/components/group-list-item.tsx      |   13 +-
 src/features/mutes/index.tsx                  |   16 +-
 src/features/new-status/index.tsx             |    6 +-
 .../nostr-relays/components/relay-editor.tsx  |    9 +-
 src/features/nostr-relays/index.tsx           |   18 +-
 src/features/nostr/Bech32Redirect.tsx         |    3 +-
 src/features/nostr/hooks/useNostrReq.ts       |    4 +-
 src/features/nostr/keyring.ts                 |    2 +-
 src/features/nostr/nostr-bunker-login.tsx     |   17 +-
 .../notifications/components/filter-bar.tsx   |   34 +-
 .../components/notification.test.tsx          |    8 +-
 .../notifications/components/notification.tsx |   96 +-
 .../components/setting-toggle.tsx             |    5 +-
 src/features/notifications/index.tsx          |   32 +-
 src/features/pinned-statuses/index.tsx        |   15 +-
 .../components/placeholder-account.tsx        |   10 +-
 .../components/placeholder-avatar.tsx         |    6 +-
 .../components/placeholder-card.tsx           |    6 +-
 .../components/placeholder-chat-message.tsx   |    9 +-
 .../components/placeholder-chat.tsx           |    9 +-
 .../components/placeholder-display-name.tsx   |    6 +-
 .../components/placeholder-event-header.tsx   |    6 +-
 .../components/placeholder-event-preview.tsx  |    7 +-
 .../components/placeholder-group-card.tsx     |    8 +-
 .../components/placeholder-group-discover.tsx |    8 +-
 .../components/placeholder-group-search.tsx   |    8 +-
 .../components/placeholder-hashtag.tsx        |    4 +-
 .../placeholder-material-status.tsx           |    4 +-
 .../components/placeholder-media-gallery.tsx  |    4 +-
 .../components/placeholder-notification.tsx   |   12 +-
 .../placeholder-sidebar-suggestions.tsx       |    7 +-
 .../components/placeholder-sidebar-trends.tsx |    6 +-
 .../components/placeholder-status-content.tsx |    4 +-
 .../components/placeholder-status.tsx         |   12 +-
 src/features/preferences/index.tsx            |   24 +-
 src/features/public-timeline/index.tsx        |   31 +-
 src/features/quotes/index.tsx                 |   16 +-
 src/features/register-invite/index.tsx        |    7 +-
 .../components/pinned-hosts-picker.tsx        |    7 +-
 src/features/remote-timeline/index.tsx        |   26 +-
 src/features/reply-mentions/account.tsx       |   23 +-
 .../report/components/status-check-box.tsx    |   14 +-
 src/features/scheduled-statuses/builder.tsx   |   10 +-
 .../scheduled-status-action-bar.tsx           |   17 +-
 .../components/scheduled-status.tsx           |   22 +-
 src/features/scheduled-statuses/index.tsx     |   13 +-
 src/features/search/index.tsx                 |   11 +-
 src/features/security/mfa-form.tsx            |   16 +-
 .../security/mfa/disable-otp-form.tsx         |   16 +-
 src/features/security/mfa/enable-otp-form.tsx |   14 +-
 .../security/mfa/otp-confirm-form.tsx         |   16 +-
 src/features/server-info/index.tsx            |   12 +-
 .../settings/components/messages-settings.tsx |    9 +-
 src/features/settings/index.tsx               |   26 +-
 src/features/share/index.tsx                  |    5 +-
 .../components/color-picker.tsx               |    4 +-
 .../components/color-with-picker.tsx          |    6 +-
 .../components/crypto-address-input.tsx       |    8 +-
 .../components/footer-link-input.tsx          |    8 +-
 .../components/icon-picker-dropdown.tsx       |    9 +-
 .../components/icon-picker-menu.tsx           |    4 +-
 .../soapbox-config/components/icon-picker.tsx |    4 +-
 .../components/promo-panel-input.tsx          |   10 +-
 .../components/site-preview.tsx               |   14 +-
 src/features/soapbox-config/index.tsx         |   53 +-
 .../status/components/detailed-status.tsx     |   38 +-
 .../components/status-interaction-bar.tsx     |   20 +-
 .../status/components/thread-login-cta.tsx    |    9 +-
 .../status/components/thread-status.tsx       |    7 +-
 src/features/status/components/thread.tsx     |   40 +-
 .../containers/quoted-status-container.tsx    |   10 +-
 src/features/status/index.tsx                 |   23 +-
 src/features/test-timeline/index.tsx          |   33 +-
 .../theme-editor/components/color.tsx         |    4 +-
 .../theme-editor/components/palette.tsx       |   16 +-
 src/features/theme-editor/index.tsx           |   40 +-
 src/features/ui/components/action-button.tsx  |   31 +-
 .../ui/components/background-shapes.tsx       |    1 -
 .../ui/components/column-forbidden.tsx        |    3 +-
 src/features/ui/components/column-loading.tsx |    5 +-
 src/features/ui/components/columns-area.tsx   |    4 +-
 .../ui/components/compose-button.test.tsx     |    8 +-
 src/features/ui/components/compose-button.tsx |   13 +-
 .../ui/components/cta-banner.test.tsx         |    8 +-
 src/features/ui/components/cta-banner.tsx     |   12 +-
 src/features/ui/components/error-column.tsx   |   11 +-
 .../ui/components/floating-action-button.tsx  |   18 +-
 src/features/ui/components/funding-panel.tsx  |   13 +-
 .../ui/components/group-media-panel.tsx       |   19 +-
 src/features/ui/components/hotkeys.tsx        |    4 +-
 src/features/ui/components/image-loader.tsx   |    6 +-
 .../ui/components/instance-info-panel.tsx     |   15 +-
 .../components/instance-moderation-panel.tsx  |   21 +-
 src/features/ui/components/link-footer.tsx    |   14 +-
 src/features/ui/components/modal-loading.tsx  |    5 +-
 src/features/ui/components/modal-root.tsx     |   10 +-
 .../account-moderation-modal.tsx              |   40 +-
 .../account-moderation-modal/badge-input.tsx  |    5 +-
 .../staff-role-picker.tsx                     |   12 +-
 .../ui/components/modals/actions-modal.tsx    |   13 +-
 .../ui/components/modals/birthdays-modal.tsx  |   10 +-
 .../ui/components/modals/boost-modal.tsx      |   14 +-
 .../modals/captcha-modal/captcha-modal.tsx    |   11 +-
 .../captcha-modal/components/puzzle.tsx       |    2 +-
 .../modals/compare-history-modal.tsx          |   17 +-
 .../ui/components/modals/component-modal.tsx  |    4 +-
 .../compose-event-modal.tsx                   |   48 +-
 .../compose-event-modal/upload-button.tsx     |   12 +-
 .../ui/components/modals/compose-modal.tsx    |   25 +-
 .../components/modals/confirmation-modal.tsx  |   11 +-
 .../components/modals/crypto-donate-modal.tsx |    8 +-
 .../ui/components/modals/dislikes-modal.tsx   |   14 +-
 .../modals/edit-announcement-modal.tsx        |   23 +-
 .../modals/edit-bookmark-folder-modal.tsx     |   28 +-
 .../components/modals/edit-domain-modal.tsx   |   21 +-
 .../modals/edit-federation-modal.tsx          |   16 +-
 .../ui/components/modals/edit-rule-modal.tsx  |   14 +-
 .../ui/components/modals/embed-modal.tsx      |   17 +-
 .../ui/components/modals/event-map-modal.tsx  |   25 +-
 .../modals/event-participants-modal.tsx       |   14 +-
 .../modals/familiar-followers-modal.tsx       |   12 +-
 .../ui/components/modals/favourites-modal.tsx |   14 +-
 .../ui/components/modals/hotkeys-modal.tsx    |    5 +-
 .../ui/components/modals/join-event-modal.tsx |   12 +-
 .../modals/landing-page-modal.test.tsx        |    8 +-
 .../components/modals/landing-page-modal.tsx  |   14 +-
 .../manage-group-modal/create-group-modal.tsx |   21 +-
 .../steps/confirmation-step.tsx               |   20 +-
 .../manage-group-modal/steps/details-step.tsx |   22 +-
 .../manage-group-modal/steps/privacy-step.tsx |   10 +-
 .../ui/components/modals/media-modal.tsx      |   50 +-
 .../ui/components/modals/mentions-modal.tsx   |   16 +-
 .../modals/missing-description-modal.tsx      |    3 +-
 .../ui/components/modals/mute-modal.tsx       |   21 +-
 .../components/nostr-extension-indicator.tsx  |   14 +-
 .../nostr-login-modal/nostr-login-modal.tsx   |    6 +-
 .../steps/extension-step.tsx                  |   24 +-
 .../nostr-login-modal/steps/key-add-step.tsx  |   23 +-
 .../nostr-signup-modal/nostr-signup-modal.tsx |    8 +-
 .../nostr-signup-modal/steps/key-step.tsx     |   15 +-
 .../nostr-signup-modal/steps/keygen-step.tsx  |   36 +-
 .../onboarding-flow-modal.tsx                 |   26 +-
 .../steps/avatar-step.tsx                     |   36 +-
 .../onboarding-flow-modal/steps/bio-step.tsx  |   26 +-
 .../steps/completed-step.tsx                  |   14 +-
 .../steps/cover-photo-selection-step.tsx      |   38 +-
 .../steps/display-name-step.tsx               |   28 +-
 .../steps/suggested-accounts-step.tsx         |   16 +-
 .../ui/components/modals/reactions-modal.tsx  |   20 +-
 .../ui/components/modals/reblogs-modal.tsx    |   16 +-
 .../modals/reply-mentions-modal.tsx           |   20 +-
 .../modals/report-modal/report-modal.tsx      |   41 +-
 .../report-modal/steps/confirmation-step.tsx  |   12 +-
 .../report-modal/steps/other-actions-step.tsx |   27 +-
 .../modals/report-modal/steps/reason-step.tsx |   17 +-
 .../modals/select-bookmark-folder-modal.tsx   |   30 +-
 .../modals/unauthorized-modal.test.tsx        |    8 +-
 .../components/modals/unauthorized-modal.tsx  |   21 +-
 .../ui/components/modals/video-modal.tsx      |    5 +-
 .../ui/components/modals/zap-invoice.tsx      |   26 +-
 .../modals/zap-pay-request-modal.tsx          |    6 +-
 .../modals/zap-split/zap-split-modal.tsx      |   14 +-
 .../components/modals/zap-split/zap-split.tsx |   14 +-
 .../ui/components/modals/zaps-modal.tsx       |   17 +-
 src/features/ui/components/navbar.test.tsx    |    8 +-
 src/features/ui/components/navbar.tsx         |   38 +-
 .../ui/components/new-account-zap-split.tsx   |   18 +-
 .../components/panels/account-note-panel.tsx  |   15 +-
 .../ui/components/panels/my-groups-panel.tsx  |   10 +-
 .../ui/components/panels/new-event-panel.tsx  |   12 +-
 .../ui/components/panels/new-group-panel.tsx  |   12 +-
 .../components/panels/sign-up-panel.test.tsx  |    8 +-
 .../ui/components/panels/sign-up-panel.tsx    |   13 +-
 .../panels/suggested-groups-panel.tsx         |   10 +-
 src/features/ui/components/pending-status.tsx |   25 +-
 .../ui/components/pinned-accounts-panel.tsx   |   16 +-
 src/features/ui/components/poll-preview.tsx   |    9 +-
 .../ui/components/profile-dropdown.tsx        |   25 +-
 .../components/profile-familiar-followers.tsx |   23 +-
 src/features/ui/components/profile-field.tsx  |   14 +-
 .../ui/components/profile-fields-panel.tsx    |    8 +-
 .../ui/components/profile-info-panel.tsx      |   42 +-
 .../ui/components/profile-media-panel.tsx     |   21 +-
 src/features/ui/components/profile-stats.tsx  |    8 +-
 src/features/ui/components/promo-panel.tsx    |   12 +-
 .../ui/components/subscribe-button.test.tsx   |    8 +-
 .../ui/components/subscription-button.tsx     |   18 +-
 src/features/ui/components/theme-selector.tsx |   22 +-
 src/features/ui/components/theme-toggle.tsx   |    9 +-
 src/features/ui/components/timeline.tsx       |   15 +-
 .../ui/components/trends-panel.test.tsx       |    8 +-
 src/features/ui/components/trends-panel.tsx   |   14 +-
 src/features/ui/components/user-panel.tsx     |   20 +-
 .../ui/components/who-to-follow-panel.tsx     |   17 +-
 src/features/ui/components/zoomable-image.tsx |    4 +-
 src/features/ui/containers/modal-container.ts |   12 +-
 src/features/ui/index.tsx                     |   90 +-
 src/features/ui/util/async-components.ts      |  362 +++---
 src/features/ui/util/global-hotkeys.tsx       |   14 +-
 src/features/ui/util/optional-motion.tsx      |    5 +-
 .../ui/util/pending-status-builder.ts         |   10 +-
 src/features/ui/util/react-router-helpers.tsx |   15 +-
 src/features/ui/util/reduced-motion.tsx       |    1 -
 src/features/video/index.tsx                  |   24 +-
 .../zap/components/zap-button/zap-button.tsx  |    6 +-
 .../zap/components/zap-pay-request-form.tsx   |   37 +-
 .../zap/components/zap-split-account-item.tsx |    4 +-
 src/global.d.ts                               |   13 +
 src/globals.ts                                |   23 -
 src/hooks/__mocks__/resize-observer.ts        |    2 +
 src/hooks/forms/index.ts                      |    6 +-
 src/hooks/forms/useImageField.ts              |    4 +-
 src/hooks/index.ts                            |   25 -
 src/hooks/nostr/useBunker.ts                  |    6 +-
 src/hooks/nostr/useBunkerStore.ts             |    2 +-
 src/hooks/nostr/useSigner.ts                  |    6 +-
 src/hooks/useApi.ts                           |    8 +-
 src/hooks/useAppDispatch.ts                   |    2 +-
 src/hooks/useAppSelector.ts                   |    2 +-
 src/hooks/useBackend.ts                       |    4 +-
 src/hooks/useCompose.ts                       |    4 +-
 src/hooks/useDimensions.test.ts               |    5 +-
 src/hooks/useDraggedFiles.ts                  |    2 +-
 src/hooks/useFeatures.ts                      |    4 +-
 src/hooks/useGetState.ts                      |    4 +-
 src/hooks/useInstance.ts                      |   10 +-
 src/hooks/useIsMobile.ts                      |    2 +-
 src/hooks/useLocale.ts                        |    4 +-
 src/hooks/useLoggedIn.ts                      |    2 +-
 src/hooks/useOnScreen.ts                      |    2 +-
 src/hooks/useOwnAccount.ts                    |    4 +-
 src/hooks/useRegistrationStatus.ts            |    4 +-
 src/hooks/useSettings.ts                      |    6 +-
 src/hooks/useSettingsNotifications.ts         |    6 +-
 src/hooks/useSoapboxConfig.ts                 |    6 +-
 src/hooks/useTheme.ts                         |    4 +-
 src/init/soapbox-head.tsx                     |   20 +-
 src/init/soapbox-load.tsx                     |   29 +-
 src/init/soapbox-mount.tsx                    |   36 +-
 src/init/soapbox.tsx                          |   23 +-
 src/jest/factory.ts                           |    6 +-
 src/jest/mock-stores.tsx                      |    4 +-
 src/jest/test-helpers.tsx                     |   13 +-
 src/jest/test-setup.ts                        |    8 +-
 src/locales/en.json                           |    2 +-
 src/main.tsx                                  |   15 +-
 src/middleware/errors.ts                      |    2 +-
 src/middleware/sounds.ts                      |    5 +-
 src/normalizers/account.test.ts               |    3 +-
 src/normalizers/account.ts                    |   24 +-
 src/normalizers/admin-account.ts              |    2 +-
 src/normalizers/admin-report.ts               |    2 +-
 src/normalizers/attachment.test.ts            |    3 +-
 src/normalizers/attachment.ts                 |    2 +-
 src/normalizers/chat-message.test.ts          |    5 +-
 src/normalizers/chat-message.ts               |    8 +-
 src/normalizers/chat.ts                       |    2 +-
 src/normalizers/filter-result.ts              |    4 +-
 src/normalizers/filter.ts                     |    6 +-
 src/normalizers/group-relationship.ts         |    2 +-
 src/normalizers/group.ts                      |   22 +-
 src/normalizers/index.ts                      |   42 +-
 src/normalizers/mention.test.ts               |    3 +-
 src/normalizers/mention.ts                    |    2 +-
 src/normalizers/notification.test.ts          |    3 +-
 src/normalizers/notification.ts               |    2 +-
 .../soapbox/soapbox-config.test.ts            |    3 +-
 src/normalizers/soapbox/soapbox-config.ts     |    6 +-
 src/normalizers/status-edit.ts                |   14 +-
 src/normalizers/status.test.ts                |    5 +-
 src/normalizers/status.ts                     |   14 +-
 src/normalizers/tag.ts                        |    4 +-
 src/pages/admin-page.tsx                      |    8 +-
 src/pages/chats-page.tsx                      |    2 -
 src/pages/default-page.tsx                    |   12 +-
 src/pages/empty-page.tsx                      |    4 +-
 src/pages/event-page.tsx                      |   16 +-
 src/pages/events-page.tsx                     |   10 +-
 src/pages/group-page.tsx                      |   31 +-
 src/pages/groups-page.tsx                     |    8 +-
 src/pages/groups-pending-page.tsx             |    7 +-
 src/pages/home-page.tsx                       |   25 +-
 src/pages/landing-page.tsx                    |   12 +-
 src/pages/manage-groups-page.tsx              |    7 +-
 src/pages/manage-zap-split-page.tsx           |   16 -
 src/pages/profile-page.tsx                    |   19 +-
 src/pages/remote-instance-page.tsx            |   14 +-
 src/pages/search-page.tsx                     |   12 +-
 src/pages/status-page.tsx                     |   12 +-
 src/pages/wide-page.tsx                       |   14 +
 src/queries/accounts.ts                       |    8 +-
 src/queries/chats.test.ts                     |   17 +-
 src/queries/chats.ts                          |   30 +-
 src/queries/client.ts                         |    2 +-
 src/queries/embed.ts                          |    2 +-
 src/queries/relationships.test.ts             |   11 +-
 src/queries/relationships.ts                  |    5 +-
 src/queries/search.ts                         |    8 +-
 src/queries/suggestions.test.ts               |    8 +-
 src/queries/suggestions.ts                    |   13 +-
 src/queries/trends.test.ts                    |    8 +-
 src/queries/trends.ts                         |    9 +-
 src/reducers/accounts-meta.ts                 |    6 +-
 src/reducers/admin.test.ts                    |    3 +-
 src/reducers/admin.ts                         |   10 +-
 src/reducers/aliases.ts                       |    4 +-
 src/reducers/auth.ts                          |   18 +-
 src/reducers/{backups.tsx => backups.ts}      |    4 +-
 src/reducers/chat-message-lists.ts            |    6 +-
 src/reducers/chat-messages.ts                 |    8 +-
 src/reducers/chats.ts                         |   10 +-
 src/reducers/compose-event.ts                 |    4 +-
 src/reducers/compose.test.ts                  |   17 +-
 src/reducers/compose.ts                       |   28 +-
 src/reducers/contexts.test.ts                 |   11 +-
 src/reducers/contexts.ts                      |   10 +-
 src/reducers/conversations.test.ts            |    5 +-
 src/reducers/conversations.ts                 |    6 +-
 src/reducers/custom-emojis.test.ts            |    3 +-
 src/reducers/custom-emojis.ts                 |   10 +-
 src/reducers/domain-lists.test.ts             |    4 +-
 src/reducers/domain-lists.ts                  |    2 +-
 src/reducers/dropdown-menu.test.ts            |    4 +-
 src/reducers/dropdown-menu.ts                 |    2 +-
 src/reducers/filters.test.ts                  |    3 +-
 src/reducers/filters.ts                       |    6 +-
 src/reducers/followed-tags.ts                 |    6 +-
 src/reducers/group-memberships.ts             |    4 +-
 src/reducers/group-relationships.ts           |    6 +-
 src/reducers/groups.ts                        |    8 +-
 src/reducers/history.ts                       |    4 +-
 src/reducers/index.test.ts                    |    3 +-
 src/reducers/index.ts                         |  108 +-
 src/reducers/instance.test.ts                 |    6 +-
 src/reducers/instance.ts                      |    8 +-
 src/reducers/list-adder.test.ts               |    5 +-
 src/reducers/list-adder.ts                    |    2 +-
 src/reducers/list-editor.ts                   |    2 +-
 src/reducers/lists.test.ts                    |    3 +-
 src/reducers/lists.ts                         |    6 +-
 src/reducers/locations.ts                     |    6 +-
 src/reducers/me.test.ts                       |    4 +-
 src/reducers/me.ts                            |    6 +-
 src/reducers/meta.test.ts                     |    5 +-
 src/reducers/meta.ts                          |    6 +-
 src/reducers/modals.test.ts                   |    5 +-
 src/reducers/modals.ts                        |    2 +-
 src/reducers/mutes.test.ts                    |    5 +-
 src/reducers/mutes.ts                         |    2 +-
 src/reducers/notifications.ts                 |   14 +-
 src/reducers/onboarding.test.ts               |    6 +-
 src/reducers/onboarding.ts                    |    4 +-
 src/reducers/patron.ts                        |    2 +-
 src/reducers/pending-statuses.ts              |    4 +-
 src/reducers/polls.test.ts                    |    5 +-
 src/reducers/polls.ts                         |    6 +-
 src/reducers/profile-hover-card.ts            |    2 +-
 src/reducers/relationships.test.ts            |    5 +-
 src/reducers/relationships.ts                 |   12 +-
 src/reducers/reports.test.ts                  |    4 +-
 src/reducers/reports.ts                       |    4 +-
 src/reducers/scheduled-statuses.ts            |   10 +-
 src/reducers/search.ts                        |    8 +-
 src/reducers/security.ts                      |    4 +-
 src/reducers/settings.test.ts                 |    3 +-
 src/reducers/settings.ts                      |   14 +-
 src/reducers/sidebar.test.ts                  |    4 +-
 src/reducers/sidebar.ts                       |    2 +-
 src/reducers/soapbox.test.ts                  |    7 +-
 src/reducers/soapbox.ts                       |   10 +-
 src/reducers/status-hover-card.test.tsx       |    6 +-
 src/reducers/status-hover-card.ts             |    2 +-
 src/reducers/status-lists.test.ts             |    4 +-
 src/reducers/status-lists.ts                  |   18 +-
 src/reducers/statuses.test.ts                 |    9 +-
 src/reducers/statuses.ts                      |   24 +-
 src/reducers/suggestions.test.ts              |    6 +-
 src/reducers/suggestions.ts                   |    8 +-
 src/reducers/tags.ts                          |    6 +-
 src/reducers/timelines.test.ts                |    5 +-
 src/reducers/timelines.ts                     |   10 +-
 src/reducers/trending-statuses.ts             |    4 +-
 src/reducers/trends.test.ts                   |    4 +-
 src/reducers/trends.ts                        |    6 +-
 src/reducers/user-lists.test.ts               |    3 +-
 src/reducers/user-lists.ts                    |   18 +-
 src/schemas/account.ts                        |   17 +-
 src/schemas/admin-account.ts                  |    4 +-
 src/schemas/announcement-reaction.ts          |    2 +-
 src/schemas/announcement.ts                   |   14 +-
 src/schemas/application.ts                    |    2 +-
 src/schemas/attachment.ts                     |    2 +-
 src/schemas/card.test.ts                      |    4 +-
 src/schemas/card.ts                           |    2 +-
 src/schemas/chat-message.ts                   |    8 +-
 src/schemas/emoji-reaction.ts                 |    2 +-
 src/schemas/event.ts                          |    4 +-
 src/schemas/group-member.ts                   |    2 +-
 src/schemas/group-relationship.ts             |    2 +-
 src/schemas/group.test.ts                     |    4 +-
 src/schemas/group.ts                          |   17 +-
 src/schemas/index.ts                          |   50 +-
 src/schemas/instance.test.ts                  |   44 +-
 src/schemas/instance.ts                       |   10 +-
 src/schemas/notification.ts                   |    8 +-
 src/schemas/pleroma.ts                        |    2 +-
 src/schemas/poll.test.ts                      |    4 +-
 src/schemas/poll.ts                           |    6 +-
 src/schemas/soapbox/settings.ts               |    4 +-
 src/schemas/soapbox/soapbox-auth.ts           |    6 +-
 src/schemas/soapbox/soapbox-config.ts         |    2 +-
 src/schemas/status.ts                         |   28 +-
 src/schemas/token.ts                          |    2 +-
 src/schemas/utils.ts                          |    2 +-
 src/schemas/web-push.ts                       |    4 +-
 src/schemas/zap-split.ts                      |    2 +-
 src/selectors/index.ts                        |   26 +-
 src/sentry.ts                                 |    6 +-
 src/service-worker/sw.ts                      |   10 +-
 src/store.ts                                  |    6 +-
 src/stream.ts                                 |    4 +-
 src/styles/application.scss                   |   20 +-
 src/styles/components/compose-form.scss       |    6 +-
 src/styles/components/search.scss             |    4 +-
 src/toast.test.tsx                            |    6 +-
 src/toast.tsx                                 |    5 +-
 src/types/entities.ts                         |   10 +-
 src/types/soapbox.ts                          |    4 +-
 src/types/window.d.ts                         |    7 -
 src/utils/accounts.ts                         |    9 +-
 src/utils/auth.ts                             |    4 +-
 src/utils/badges.test.ts                      |    6 +-
 src/utils/badges.ts                           |    2 +-
 src/utils/base64.test.ts                      |    4 +-
 src/utils/chats.test.ts                       |   12 +-
 src/utils/chats.ts                            |   12 +-
 src/utils/code.ts                             |    2 +-
 src/utils/colors.test.ts                      |    4 +-
 src/utils/colors.ts                           |    2 +-
 src/utils/comparators.test.ts                 |    4 +-
 src/utils/config-db.test.ts                   |    3 +-
 src/utils/config-db.ts                        |    2 +-
 src/utils/emoji-reacts.test.ts                |    7 +-
 src/utils/emoji-reacts.ts                     |    2 +-
 src/utils/emoji.test.ts                       |    4 +-
 src/utils/features.test.ts                    |    6 +-
 src/utils/features.ts                         |    4 +-
 src/utils/groups.ts                           |    2 +-
 src/utils/html.test.ts                        |    4 +-
 src/utils/input.test.ts                       |    4 +-
 src/utils/media.test.ts                       |    4 +-
 src/utils/notification.ts                     |    2 +-
 src/utils/numbers.test.tsx                    |    6 +-
 src/utils/numbers.tsx                         |    1 -
 src/utils/permissions.ts                      |    2 +-
 src/utils/phone.ts                            |    2 +-
 src/utils/queries.test.ts                     |    5 +-
 src/utils/queries.ts                          |    2 +-
 src/utils/redirect.ts                         |    2 +-
 src/utils/scopes.ts                           |    5 +-
 src/utils/state.ts                            |   10 +-
 src/utils/static.ts                           |    2 +-
 src/utils/status.test.ts                      |    5 +-
 src/utils/status.ts                           |    4 +-
 src/utils/tailwind.test.ts                    |    3 +-
 src/utils/tailwind.ts                         |    6 +-
 src/utils/theme.ts                            |    6 +-
 src/utils/timelines.test.ts                   |    5 +-
 src/utils/timelines.ts                        |    2 +-
 src/workers.ts                                |    2 +-
 tailwind.config.ts                            |    2 +-
 tailwind/colors.test.ts                       |    4 +-
 tsconfig.json                                 |   39 +-
 vite.config.ts                                |  236 ++--
 yarn.lock                                     | 1103 +++++++----------
 1111 files changed, 8550 insertions(+), 7613 deletions(-)
 create mode 100644 src/assets/cryptocurrency/doge.svg
 delete mode 100644 src/components/gameboy.tsx
 rename src/components/ui/{accordion => }/accordion.tsx (81%)
 rename src/components/ui/{avatar => }/avatar.test.tsx (72%)
 rename src/components/ui/{avatar => }/avatar.tsx (83%)
 rename src/components/ui/{banner => }/banner.tsx (96%)
 rename src/components/ui/{button => }/button.test.tsx (96%)
 rename src/components/ui/{button => }/button.tsx (90%)
 rename src/components/ui/{card => }/card.test.tsx (82%)
 rename src/components/ui/{card => }/card.tsx (86%)
 rename src/components/ui/{carousel => }/carousel.tsx (89%)
 rename src/components/ui/{checkbox => }/checkbox.tsx (80%)
 rename src/components/ui/{column => }/column.test.tsx (55%)
 rename src/components/ui/{column => }/column.tsx (92%)
 rename src/components/ui/{combobox => }/combobox.css (100%)
 rename src/components/ui/{combobox => }/combobox.tsx (100%)
 rename src/components/ui/{counter => }/counter.tsx (86%)
 rename src/components/ui/{datepicker => }/datepicker.test.tsx (96%)
 rename src/components/ui/{datepicker => }/datepicker.tsx (94%)
 rename src/components/ui/{datetime => }/datetime.tsx (94%)
 rename src/components/ui/{divider => }/divider.test.tsx (70%)
 rename src/components/ui/{divider => }/divider.tsx (86%)
 rename src/components/ui/{emoji-selector => }/emoji-selector.tsx (86%)
 rename src/components/ui/{emoji => }/emoji.test.tsx (80%)
 rename src/components/ui/{emoji => }/emoji.tsx (80%)
 rename src/components/ui/{file-input => }/file-input.tsx (94%)
 rename src/components/ui/{form-actions => }/form-actions.test.tsx (64%)
 rename src/components/ui/{form-actions => }/form-actions.tsx (80%)
 rename src/components/ui/{form-group => }/form-group.test.tsx (90%)
 rename src/components/ui/{form-group => }/form-group.tsx (92%)
 rename src/components/ui/{form => }/form.test.tsx (88%)
 rename src/components/ui/{form => }/form.tsx (85%)
 rename src/components/ui/{hstack => }/hstack.tsx (97%)
 rename src/components/ui/{icon-button => }/icon-button.tsx (89%)
 rename src/components/ui/{icon => }/icon.tsx (92%)
 delete mode 100644 src/components/ui/index.ts
 rename src/components/ui/{input => }/input.tsx (88%)
 rename src/components/ui/{language-dropdown => }/language-dropdown.tsx (69%)
 rename src/components/ui/{layout => }/layout.tsx (97%)
 rename src/components/ui/{menu => }/menu.css (100%)
 rename src/components/ui/{menu => }/menu.tsx (97%)
 rename src/components/ui/{modal => }/modal.test.tsx (96%)
 rename src/components/ui/{modal => }/modal.tsx (91%)
 rename src/components/ui/{popover => }/popover.tsx (95%)
 rename src/components/ui/{portal => }/portal.tsx (89%)
 rename src/components/ui/{progress-bar => }/progress-bar.tsx (90%)
 rename src/components/ui/{radio-button => }/radio-button.tsx (91%)
 rename src/components/ui/{select => }/select.tsx (88%)
 rename src/components/ui/{slider => }/slider.tsx (98%)
 rename src/components/ui/{spinner => }/spinner.css (100%)
 rename src/components/ui/{spinner => }/spinner.tsx (89%)
 rename src/components/ui/{stack => }/stack.tsx (91%)
 rename src/components/ui/{streamfield => }/streamfield.tsx (90%)
 rename src/components/ui/{icon => }/svg-icon.test.tsx (75%)
 rename src/components/ui/{icon => }/svg-icon.tsx (97%)
 rename src/components/ui/{tabs => }/tabs.css (100%)
 rename src/components/ui/{tabs => }/tabs.tsx (92%)
 rename src/components/ui/{tag-input => }/tag-input.tsx (94%)
 rename src/components/ui/{tag-input => }/tag.tsx (75%)
 rename src/components/ui/{text => }/text.tsx (97%)
 rename src/components/ui/{textarea => }/textarea.tsx (93%)
 rename src/components/ui/{toast => }/toast.tsx (86%)
 rename src/components/ui/{toggle => }/toggle.tsx (97%)
 rename src/components/ui/{tooltip => }/tooltip.tsx (95%)
 rename src/components/ui/{button => }/useButtonStyles.ts (97%)
 rename src/components/ui/{widget => }/widget.tsx (81%)
 create mode 100644 src/global.d.ts
 delete mode 100644 src/globals.ts
 delete mode 100644 src/hooks/index.ts
 delete mode 100644 src/pages/manage-zap-split-page.tsx
 create mode 100644 src/pages/wide-page.tsx
 rename src/reducers/{backups.tsx => backups.ts} (92%)
 delete mode 100644 src/types/window.d.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index f48320d4d..12ddcf848 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -37,14 +37,6 @@
     "react": {
       "version": "detect"
     },
-    "import/extensions": [
-      ".js",
-      ".jsx",
-      ".cjs",
-      ".mjs",
-      ".ts",
-      ".tsx"
-    ],
     "import/ignore": [
       "node_modules",
       "\\.(css|scss|json)$"
@@ -268,17 +260,7 @@
     "jsx-a11y/role-supports-aria-props": "off",
     "jsx-a11y/scope": "warn",
     "jsx-a11y/tabindex-no-positive": "warn",
-    "import/extensions": [
-      "error",
-      "always",
-      {
-        "js": "never",
-        "mjs": "ignorePackages",
-        "jsx": "never",
-        "ts": "never",
-        "tsx": "never"
-      }
-    ],
+    "import/extensions": ["error", "ignorePackages"],
     "import/newline-after-import": "error",
     "import/no-extraneous-dependencies": "error",
     "import/no-unresolved": "error",
diff --git a/package.json b/package.json
index 8ada79d3e..8fae41ee1 100644
--- a/package.json
+++ b/package.json
@@ -21,16 +21,15 @@
     "url": "lightning:alex@alexgleason.me"
   },
   "scripts": {
-    "start": "npx vite serve",
-    "dev": "npx vite serve",
-    "build": "npx vite build --emptyOutDir",
-    "preview": "npx vite preview",
-    "audit:fix": "npx yarn-audit-fix",
-    "i18n": "npx formatjs extract 'src/**/*.{ts,tsx}' --ignore '**/*.d.ts' --out-file build/messages.json && npx formatjs compile build/messages.json --out-file src/locales/en.json",
-    "test": "npx vitest",
+    "start": "vite serve",
+    "dev": "vite serve",
+    "build": "vite build --emptyOutDir",
+    "preview": "vite preview",
+    "i18n": "formatjs extract 'src/**/*.{ts,tsx}' --ignore '**/*.d.ts' --out-file build/messages.json && formatjs compile build/messages.json --out-file src/locales/en.json",
+    "test": "vitest",
     "lint": "npm run lint:js && npm run lint:sass",
-    "lint:js": "npx eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx . --cache",
-    "lint:sass": "npx stylelint src/styles/**/*.scss",
+    "lint:js": "eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx . --cache",
+    "lint:sass": "stylelint src/styles/**/*.scss",
     "prepare": "husky install"
   },
   "license": "AGPL-3.0-or-later",
@@ -88,7 +87,6 @@
     "@types/react-swipeable-views": "^0.13.1",
     "@types/redux-mock-store": "^1.0.6",
     "@types/semver": "^7.3.9",
-    "@vitejs/plugin-react": "^4.3.1",
     "@webbtc/webln-types": "^3.0.0",
     "autoprefixer": "^10.4.15",
     "axios": "^1.2.2",
@@ -103,7 +101,7 @@
     "emoji-datasource": "15.0.1",
     "emoji-mart": "^5.6.0",
     "escape-html": "^1.0.3",
-    "eslint-plugin-formatjs": "^4.12.2",
+    "eslint-plugin-formatjs": "^5.2.2",
     "exifr": "^7.1.3",
     "graphemesplit": "^2.4.4",
     "html-react-parser": "^5.0.0",
@@ -131,7 +129,7 @@
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.4.0",
     "react-inlinesvg": "^4.0.0",
-    "react-intl": "^6.0.0",
+    "react-intl": "^6.8.7",
     "react-motion": "^0.5.2",
     "react-overlays": "^0.9.0",
     "react-redux": "^9.0.4",
@@ -153,13 +151,12 @@
     "vite": "^5.4.8",
     "vite-plugin-compile-time": "^0.2.1",
     "vite-plugin-html": "^3.2.2",
-    "vite-plugin-require": "^1.2.14",
     "vite-plugin-static-copy": "^1.0.6",
     "zod": "^3.23.5",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.2.0",
+    "@formatjs/cli": "^6.3.8",
     "@gitbeaker/node": "^35.8.0",
     "@jedmao/redux-mock-store": "^3.0.5",
     "@testing-library/jest-dom": "^6.1.3",
@@ -168,6 +165,7 @@
     "@testing-library/user-event": "^14.5.1",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react-swc": "^3.7.1",
     "eslint": "^8.49.0",
     "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-compat": "^4.2.0",
@@ -182,17 +180,12 @@
     "husky": "^9.0.0",
     "jsdom": "^24.0.0",
     "lint-staged": ">=10",
-    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "tailwindcss": "^3.4.13",
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-pwa": "^0.20.5",
     "vitest": "^2.1.1"
-  },
-  "resolutions": {
-    "glob-parent": "^6.0.1",
-    "jsonwebtoken": "^9.0.0",
-    "loader-utils": "^2.0.3"
   }
 }
diff --git a/scripts/do-release.ts b/scripts/do-release.ts
index f7d2dc9be..7fb69cadc 100644
--- a/scripts/do-release.ts
+++ b/scripts/do-release.ts
@@ -1,6 +1,6 @@
 import { Gitlab } from '@gitbeaker/node';
 
-import { getChanges } from './lib/changelog';
+import { getChanges } from './lib/changelog.ts';
 
 const {
   CI_COMMIT_TAG,
diff --git a/src/actions/about.test.ts b/src/actions/about.test.ts
index e05a7f643..34e5240f7 100644
--- a/src/actions/about.test.ts
+++ b/src/actions/about.test.ts
@@ -1,14 +1,15 @@
 import MockAdapter from 'axios-mock-adapter';
+import { describe, expect, it } from 'vitest';
 
-import { staticClient } from 'soapbox/api';
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { staticClient } from 'soapbox/api/index.ts';
+import { mockStore } from 'soapbox/jest/test-helpers.tsx';
 
 import {
   FETCH_ABOUT_PAGE_REQUEST,
   FETCH_ABOUT_PAGE_SUCCESS,
   FETCH_ABOUT_PAGE_FAIL,
   fetchAboutPage,
-} from './about';
+} from './about.ts';
 
 describe('fetchAboutPage()', () => {
   it('creates the expected actions on success', () => {
diff --git a/src/actions/about.ts b/src/actions/about.ts
index c8410ded8..124698c1a 100644
--- a/src/actions/about.ts
+++ b/src/actions/about.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
 const FETCH_ABOUT_PAGE_SUCCESS = 'FETCH_ABOUT_PAGE_SUCCESS';
diff --git a/src/actions/account-notes.test.ts b/src/actions/account-notes.test.ts
index 5cd45f26e..6641fe39b 100644
--- a/src/actions/account-notes.test.ts
+++ b/src/actions/account-notes.test.ts
@@ -1,7 +1,9 @@
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { submitAccountNote } from './account-notes';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+
+import { submitAccountNote } from './account-notes.ts';
 
 describe('submitAccountNote()', () => {
   let store: ReturnType<typeof mockStore>;
diff --git a/src/actions/account-notes.ts b/src/actions/account-notes.ts
index 7afd5e283..ea69ccc13 100644
--- a/src/actions/account-notes.ts
+++ b/src/actions/account-notes.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST';
 const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS';
diff --git a/src/actions/accounts.test.ts b/src/actions/accounts.test.ts
index 34da76b33..3c8befcaa 100644
--- a/src/actions/accounts.test.ts
+++ b/src/actions/accounts.test.ts
@@ -1,10 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildInstance, buildRelationship } from 'soapbox/jest/factory';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeAccount } from 'soapbox/normalizers';
-import { ListRecord, ReducerRecord } from 'soapbox/reducers/user-lists';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildInstance, buildRelationship } from 'soapbox/jest/factory.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeAccount } from 'soapbox/normalizers/index.ts';
+import { ListRecord, ReducerRecord } from 'soapbox/reducers/user-lists.ts';
 
 import {
   authorizeFollowRequest,
@@ -25,7 +26,7 @@ import {
   unblockAccount,
   unmuteAccount,
   unsubscribeAccount,
-} from './accounts';
+} from './accounts.ts';
 
 let store: ReturnType<typeof mockStore>;
 
diff --git a/src/actions/accounts.ts b/src/actions/accounts.ts
index f1d0f6c32..7ccaf6e5c 100644
--- a/src/actions/accounts.ts
+++ b/src/actions/accounts.ts
@@ -1,22 +1,22 @@
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { selectAccount } from 'soapbox/selectors';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
 import {
   importFetchedAccount,
   importFetchedAccounts,
   importErrorWhileFetchingAccountByUsername,
-} from './importer';
+} from './importer/index.ts';
 
 import type { AxiosError, CancelToken } from 'axios';
 import type { Map as ImmutableMap } from 'immutable';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status } from 'soapbox/types/entities';
-import type { History } from 'soapbox/types/history';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
+import type { History } from 'soapbox/types/history.ts';
 
 const ACCOUNT_CREATE_REQUEST = 'ACCOUNT_CREATE_REQUEST';
 const ACCOUNT_CREATE_SUCCESS = 'ACCOUNT_CREATE_SUCCESS';
diff --git a/src/actions/admin.ts b/src/actions/admin.ts
index e7b2d35cb..2383aec95 100644
--- a/src/actions/admin.ts
+++ b/src/actions/admin.ts
@@ -1,14 +1,13 @@
+import { fetchRelationships } from 'soapbox/actions/accounts.ts';
+import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer/index.ts';
+import { accountIdsToAccts } from 'soapbox/selectors/index.ts';
+import { filterBadges, getTagDiff } from 'soapbox/utils/badges.ts';
 
-import { fetchRelationships } from 'soapbox/actions/accounts';
-import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer';
-import { accountIdsToAccts } from 'soapbox/selectors';
-import { filterBadges, getTagDiff } from 'soapbox/utils/badges';
-
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
 import type { AxiosResponse } from 'axios';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ADMIN_CONFIG_FETCH_REQUEST = 'ADMIN_CONFIG_FETCH_REQUEST';
 const ADMIN_CONFIG_FETCH_SUCCESS = 'ADMIN_CONFIG_FETCH_SUCCESS';
diff --git a/src/actions/aliases.ts b/src/actions/aliases.ts
index c582e70bb..3706c6415 100644
--- a/src/actions/aliases.ts
+++ b/src/actions/aliases.ts
@@ -1,16 +1,16 @@
 import { defineMessages } from 'react-intl';
 
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedAccounts } from './importer';
-import { patchMeSuccess } from './me';
+import { importFetchedAccounts } from './importer/index.ts';
+import { patchMeSuccess } from './me.ts';
 
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const ALIASES_FETCH_REQUEST = 'ALIASES_FETCH_REQUEST';
 const ALIASES_FETCH_SUCCESS = 'ALIASES_FETCH_SUCCESS';
diff --git a/src/actions/apps.ts b/src/actions/apps.ts
index d2ef2ff0d..e593f418e 100644
--- a/src/actions/apps.ts
+++ b/src/actions/apps.ts
@@ -6,7 +6,7 @@
  * @see module:soapbox/actions/auth
  */
 
-import { baseClient } from '../api';
+import { baseClient } from '../api/index.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index 8847c6b32..13d4fc72a 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -9,28 +9,28 @@
 
 import { defineMessages } from 'react-intl';
 
-import { createAccount } from 'soapbox/actions/accounts';
-import { createApp } from 'soapbox/actions/apps';
-import { fetchMeSuccess, fetchMeFail } from 'soapbox/actions/me';
-import { obtainOAuthToken, revokeOAuthToken } from 'soapbox/actions/oauth';
-import { startOnboarding } from 'soapbox/actions/onboarding';
-import { custom } from 'soapbox/custom';
-import { queryClient } from 'soapbox/queries/client';
-import { selectAccount } from 'soapbox/selectors';
-import { unsetSentryAccount } from 'soapbox/sentry';
-import KVStore from 'soapbox/storage/kv-store';
-import toast from 'soapbox/toast';
-import { getLoggedInAccount, parseBaseURL } from 'soapbox/utils/auth';
-import sourceCode from 'soapbox/utils/code';
-import { normalizeUsername } from 'soapbox/utils/input';
-import { getScopes } from 'soapbox/utils/scopes';
+import { createAccount } from 'soapbox/actions/accounts.ts';
+import { createApp } from 'soapbox/actions/apps.ts';
+import { fetchMeSuccess, fetchMeFail } from 'soapbox/actions/me.ts';
+import { obtainOAuthToken, revokeOAuthToken } from 'soapbox/actions/oauth.ts';
+import { startOnboarding } from 'soapbox/actions/onboarding.ts';
+import { custom } from 'soapbox/custom.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { unsetSentryAccount } from 'soapbox/sentry.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import toast from 'soapbox/toast.tsx';
+import { getLoggedInAccount, parseBaseURL } from 'soapbox/utils/auth.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { normalizeUsername } from 'soapbox/utils/input.ts';
+import { getScopes } from 'soapbox/utils/scopes.ts';
 
-import api, { baseClient } from '../api';
+import api, { baseClient } from '../api/index.ts';
 
-import { importFetchedAccount } from './importer';
+import { importFetchedAccount } from './importer/index.ts';
 
 import type { AxiosError } from 'axios';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 export const SWITCH_ACCOUNT = 'SWITCH_ACCOUNT';
 
diff --git a/src/actions/backups.ts b/src/actions/backups.ts
index c95e504db..dfabb1a85 100644
--- a/src/actions/backups.ts
+++ b/src/actions/backups.ts
@@ -1,6 +1,6 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 export const BACKUPS_FETCH_REQUEST = 'BACKUPS_FETCH_REQUEST';
 export const BACKUPS_FETCH_SUCCESS = 'BACKUPS_FETCH_SUCCESS';
diff --git a/src/actions/blocks.test.ts b/src/actions/blocks.test.ts
index bca50fe12..c0a2418d8 100644
--- a/src/actions/blocks.test.ts
+++ b/src/actions/blocks.test.ts
@@ -1,8 +1,10 @@
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user-lists';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { expandBlocks, fetchBlocks } from './blocks';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user-lists.ts';
+
+import { expandBlocks, fetchBlocks } from './blocks.ts';
 
 const account = {
   acct: 'twoods',
diff --git a/src/actions/blocks.ts b/src/actions/blocks.ts
index b672e778f..bada74f2a 100644
--- a/src/actions/blocks.ts
+++ b/src/actions/blocks.ts
@@ -1,11 +1,11 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const BLOCKS_FETCH_REQUEST = 'BLOCKS_FETCH_REQUEST';
 const BLOCKS_FETCH_SUCCESS = 'BLOCKS_FETCH_SUCCESS';
diff --git a/src/actions/bookmarks.ts b/src/actions/bookmarks.ts
index 9fd11d258..76a656fd2 100644
--- a/src/actions/bookmarks.ts
+++ b/src/actions/bookmarks.ts
@@ -1,9 +1,9 @@
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const BOOKMARKED_STATUSES_FETCH_REQUEST = 'BOOKMARKED_STATUSES_FETCH_REQUEST';
 const BOOKMARKED_STATUSES_FETCH_SUCCESS = 'BOOKMARKED_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/chats.ts b/src/actions/chats.ts
index ee8e23239..6027530e3 100644
--- a/src/actions/chats.ts
+++ b/src/actions/chats.ts
@@ -1,12 +1,12 @@
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 
-import { getSettings, changeSetting } from 'soapbox/actions/settings';
-import { getFeatures } from 'soapbox/utils/features';
+import { getSettings, changeSetting } from 'soapbox/actions/settings.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { History } from 'soapbox/types/history';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { History } from 'soapbox/types/history.ts';
 
 const CHATS_FETCH_REQUEST = 'CHATS_FETCH_REQUEST';
 const CHATS_FETCH_SUCCESS = 'CHATS_FETCH_SUCCESS';
diff --git a/src/actions/compose-status.ts b/src/actions/compose-status.ts
index 9a0fbf9c6..fd1379f9e 100644
--- a/src/actions/compose-status.ts
+++ b/src/actions/compose-status.ts
@@ -1,7 +1,7 @@
-import { AppDispatch, RootState } from 'soapbox/store';
-import { getFeatures, parseVersion } from 'soapbox/utils/features';
+import { AppDispatch, RootState } from 'soapbox/store.ts';
+import { getFeatures, parseVersion } from 'soapbox/utils/features.ts';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS' as const;
 
diff --git a/src/actions/compose.test.ts b/src/actions/compose.test.ts
index 01bd8b716..62c0b2d64 100644
--- a/src/actions/compose.test.ts
+++ b/src/actions/compose.test.ts
@@ -1,11 +1,12 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { buildInstance } from 'soapbox/jest/factory';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { ReducerCompose } from 'soapbox/reducers/compose';
+import { buildInstance } from 'soapbox/jest/factory.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { ReducerCompose } from 'soapbox/reducers/compose.ts';
 
-import { uploadCompose, submitCompose } from './compose';
-import { STATUS_CREATE_REQUEST } from './statuses';
+import { uploadCompose, submitCompose } from './compose.ts';
+import { STATUS_CREATE_REQUEST } from './statuses.ts';
 
 import type { IntlShape } from 'react-intl';
 
diff --git a/src/actions/compose.ts b/src/actions/compose.ts
index bdf02fe0a..b0733cda9 100644
--- a/src/actions/compose.ts
+++ b/src/actions/compose.ts
@@ -3,31 +3,31 @@ import { List as ImmutableList } from 'immutable';
 import throttle from 'lodash/throttle';
 import { defineMessages, IntlShape } from 'react-intl';
 
-import api from 'soapbox/api';
-import { isNativeEmoji } from 'soapbox/features/emoji';
-import emojiSearch from 'soapbox/features/emoji/search';
-import { normalizeTag } from 'soapbox/normalizers';
-import { selectAccount, selectOwnAccount } from 'soapbox/selectors';
-import { tagHistory } from 'soapbox/settings';
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import api from 'soapbox/api/index.ts';
+import { isNativeEmoji } from 'soapbox/features/emoji/index.ts';
+import emojiSearch from 'soapbox/features/emoji/search.ts';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
+import { selectAccount, selectOwnAccount } from 'soapbox/selectors/index.ts';
+import { tagHistory } from 'soapbox/settings.ts';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import { ComposeSetStatusAction } from './compose-status';
-import { chooseEmoji } from './emojis';
-import { importFetchedAccounts } from './importer';
-import { uploadFile, updateMedia } from './media';
-import { openModal, closeModal } from './modals';
-import { getSettings } from './settings';
-import { createStatus } from './statuses';
+import { ComposeSetStatusAction } from './compose-status.ts';
+import { chooseEmoji } from './emojis.ts';
+import { importFetchedAccounts } from './importer/index.ts';
+import { uploadFile, updateMedia } from './media.ts';
+import { openModal, closeModal } from './modals.ts';
+import { getSettings } from './settings.ts';
+import { createStatus } from './statuses.ts';
 
 import type { EditorState } from 'lexical';
-import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import type { Emoji } from 'soapbox/features/emoji';
-import type { Account, Group } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status, Tag } from 'soapbox/types/entities';
-import type { History } from 'soapbox/types/history';
+import type { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
+import type { Account, Group } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status, Tag } from 'soapbox/types/entities.ts';
+import type { History } from 'soapbox/types/history.ts';
 
 const { CancelToken, isCancel } = axios;
 
diff --git a/src/actions/consumer-auth.ts b/src/actions/consumer-auth.ts
index 72c928dba..27828d5fe 100644
--- a/src/actions/consumer-auth.ts
+++ b/src/actions/consumer-auth.ts
@@ -1,13 +1,13 @@
 import axios from 'axios';
 
-import * as BuildConfig from 'soapbox/build-config';
-import { isURL } from 'soapbox/utils/auth';
-import sourceCode from 'soapbox/utils/code';
-import { getScopes } from 'soapbox/utils/scopes';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import { isURL } from 'soapbox/utils/auth.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { getScopes } from 'soapbox/utils/scopes.ts';
 
-import { createApp } from './apps';
+import { createApp } from './apps.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const createProviderApp = () => {
   return async(dispatch: AppDispatch, getState: () => RootState) => {
diff --git a/src/actions/conversations.ts b/src/actions/conversations.ts
index 5c613e9e2..6f7727404 100644
--- a/src/actions/conversations.ts
+++ b/src/actions/conversations.ts
@@ -1,15 +1,15 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
 import {
   importFetchedAccounts,
   importFetchedStatuses,
   importFetchedStatus,
-} from './importer';
+} from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const CONVERSATIONS_MOUNT   = 'CONVERSATIONS_MOUNT';
 const CONVERSATIONS_UNMOUNT = 'CONVERSATIONS_UNMOUNT';
diff --git a/src/actions/custom-emojis.ts b/src/actions/custom-emojis.ts
index 2baf5213a..ad71b5c79 100644
--- a/src/actions/custom-emojis.ts
+++ b/src/actions/custom-emojis.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const CUSTOM_EMOJIS_FETCH_REQUEST = 'CUSTOM_EMOJIS_FETCH_REQUEST';
 const CUSTOM_EMOJIS_FETCH_SUCCESS = 'CUSTOM_EMOJIS_FETCH_SUCCESS';
diff --git a/src/actions/directory.ts b/src/actions/directory.ts
index 3fd39f350..2f9e92bc0 100644
--- a/src/actions/directory.ts
+++ b/src/actions/directory.ts
@@ -1,10 +1,10 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const DIRECTORY_FETCH_REQUEST = 'DIRECTORY_FETCH_REQUEST';
 const DIRECTORY_FETCH_SUCCESS = 'DIRECTORY_FETCH_SUCCESS';
diff --git a/src/actions/domain-blocks.ts b/src/actions/domain-blocks.ts
index 81a5d73bf..3aa4f6c55 100644
--- a/src/actions/domain-blocks.ts
+++ b/src/actions/domain-blocks.ts
@@ -1,11 +1,11 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import type { EntityStore } from 'soapbox/entity-store/types';
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { EntityStore } from 'soapbox/entity-store/types.ts';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const DOMAIN_BLOCK_REQUEST = 'DOMAIN_BLOCK_REQUEST';
 const DOMAIN_BLOCK_SUCCESS = 'DOMAIN_BLOCK_SUCCESS';
diff --git a/src/actions/email-list.ts b/src/actions/email-list.ts
index eeac0ed47..8f80f96d5 100644
--- a/src/actions/email-list.ts
+++ b/src/actions/email-list.ts
@@ -1,6 +1,6 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const getSubscribersCsv = () =>
   (dispatch: any, getState: () => RootState) =>
diff --git a/src/actions/emoji-reacts.ts b/src/actions/emoji-reacts.ts
index 1e8991824..0ebe21c8e 100644
--- a/src/actions/emoji-reacts.ts
+++ b/src/actions/emoji-reacts.ts
@@ -1,14 +1,14 @@
 import { List as ImmutableList } from 'immutable';
 
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedAccounts, importFetchedStatus } from './importer';
-import { favourite, unfavourite } from './interactions';
+import { importFetchedAccounts, importFetchedStatus } from './importer/index.ts';
+import { favourite, unfavourite } from './interactions.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, EmojiReaction, Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, EmojiReaction, Status } from 'soapbox/types/entities.ts';
 
 const EMOJI_REACT_REQUEST = 'EMOJI_REACT_REQUEST';
 const EMOJI_REACT_SUCCESS = 'EMOJI_REACT_SUCCESS';
diff --git a/src/actions/emojis.ts b/src/actions/emojis.ts
index 2a959fcc3..88e73a8cf 100644
--- a/src/actions/emojis.ts
+++ b/src/actions/emojis.ts
@@ -1,7 +1,7 @@
-import { saveSettings } from './settings';
+import { saveSettings } from './settings.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
-import type { AppDispatch } from 'soapbox/store';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 const EMOJI_CHOOSE = 'EMOJI_CHOOSE';
 
diff --git a/src/actions/events.ts b/src/actions/events.ts
index 875b487f6..9026ac710 100644
--- a/src/actions/events.ts
+++ b/src/actions/events.ts
@@ -1,20 +1,20 @@
 import { defineMessages, IntlShape } from 'react-intl';
 
-import api, { getLinks } from 'soapbox/api';
-import toast from 'soapbox/toast';
+import api, { getLinks } from 'soapbox/api/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import { importFetchedAccounts, importFetchedStatus, importFetchedStatuses } from './importer';
-import { uploadFile } from './media';
-import { closeModal, openModal } from './modals';
+import { importFetchedAccounts, importFetchedStatus, importFetchedStatuses } from './importer/index.ts';
+import { uploadFile } from './media.ts';
+import { closeModal, openModal } from './modals.ts';
 import {
   STATUS_FETCH_SOURCE_FAIL,
   STATUS_FETCH_SOURCE_REQUEST,
   STATUS_FETCH_SOURCE_SUCCESS,
-} from './statuses';
+} from './statuses.ts';
 
-import type { ReducerStatus } from 'soapbox/reducers/statuses';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { ReducerStatus } from 'soapbox/reducers/statuses.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const LOCATION_SEARCH_REQUEST = 'LOCATION_SEARCH_REQUEST' as const;
 const LOCATION_SEARCH_SUCCESS = 'LOCATION_SEARCH_SUCCESS' as const;
diff --git a/src/actions/export-data.ts b/src/actions/export-data.ts
index b5bf805de..45c1065e4 100644
--- a/src/actions/export-data.ts
+++ b/src/actions/export-data.ts
@@ -1,11 +1,11 @@
 import { defineMessages } from 'react-intl';
 
-import api, { getLinks } from 'soapbox/api';
-import { normalizeAccount } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
+import api, { getLinks } from 'soapbox/api/index.ts';
+import { normalizeAccount } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 import type { AxiosResponse } from 'axios';
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const EXPORT_FOLLOWS_REQUEST = 'EXPORT_FOLLOWS_REQUEST';
 export const EXPORT_FOLLOWS_SUCCESS = 'EXPORT_FOLLOWS_SUCCESS';
diff --git a/src/actions/external-auth.ts b/src/actions/external-auth.ts
index 45d288bc5..414c67886 100644
--- a/src/actions/external-auth.ts
+++ b/src/actions/external-auth.ts
@@ -6,17 +6,17 @@
  * @see module:soapbox/actions/oauth
  */
 
-import { createApp } from 'soapbox/actions/apps';
-import { authLoggedIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
-import { obtainOAuthToken } from 'soapbox/actions/oauth';
-import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance';
-import { parseBaseURL } from 'soapbox/utils/auth';
-import sourceCode from 'soapbox/utils/code';
-import { getInstanceScopes } from 'soapbox/utils/scopes';
+import { createApp } from 'soapbox/actions/apps.ts';
+import { authLoggedIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth.ts';
+import { obtainOAuthToken } from 'soapbox/actions/oauth.ts';
+import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance.ts';
+import { parseBaseURL } from 'soapbox/utils/auth.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { getInstanceScopes } from 'soapbox/utils/scopes.ts';
 
-import { baseClient } from '../api';
+import { baseClient } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const fetchExternalInstance = (baseURL?: string) => {
   return baseClient(null, baseURL)
diff --git a/src/actions/familiar-followers.ts b/src/actions/familiar-followers.ts
index c23a674ba..c1a838ad6 100644
--- a/src/actions/familiar-followers.ts
+++ b/src/actions/familiar-followers.ts
@@ -1,11 +1,11 @@
-import { AppDispatch, RootState } from 'soapbox/store';
+import { AppDispatch, RootState } from 'soapbox/store.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 export const FAMILIAR_FOLLOWERS_FETCH_REQUEST = 'FAMILIAR_FOLLOWERS_FETCH_REQUEST';
 export const FAMILIAR_FOLLOWERS_FETCH_SUCCESS = 'FAMILIAR_FOLLOWERS_FETCH_SUCCESS';
diff --git a/src/actions/favourites.ts b/src/actions/favourites.ts
index cfd6e1f15..d4240064c 100644
--- a/src/actions/favourites.ts
+++ b/src/actions/favourites.ts
@@ -1,11 +1,11 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const FAVOURITED_STATUSES_FETCH_REQUEST = 'FAVOURITED_STATUSES_FETCH_REQUEST';
 const FAVOURITED_STATUSES_FETCH_SUCCESS = 'FAVOURITED_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/filters.ts b/src/actions/filters.ts
index fe7026876..cec439816 100644
--- a/src/actions/filters.ts
+++ b/src/actions/filters.ts
@@ -1,12 +1,12 @@
 import { defineMessages } from 'react-intl';
 
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST';
 const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS';
diff --git a/src/actions/groups.ts b/src/actions/groups.ts
index 4fdb6c7d6..0b11d8c58 100644
--- a/src/actions/groups.ts
+++ b/src/actions/groups.ts
@@ -1,13 +1,13 @@
-import { deleteEntities } from 'soapbox/entity-store/actions';
+import { deleteEntities } from 'soapbox/entity-store/actions.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedGroups, importFetchedAccounts } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedGroups, importFetchedAccounts } from './importer/index.ts';
 
-import type { GroupRole } from 'soapbox/reducers/group-memberships';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { GroupRole } from 'soapbox/reducers/group-memberships.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const GROUP_CREATE_REQUEST = 'GROUP_CREATE_REQUEST';
 const GROUP_CREATE_SUCCESS = 'GROUP_CREATE_SUCCESS';
diff --git a/src/actions/history.ts b/src/actions/history.ts
index cf975cf42..95f71a929 100644
--- a/src/actions/history.ts
+++ b/src/actions/history.ts
@@ -1,9 +1,9 @@
-import api from 'soapbox/api';
+import api from 'soapbox/api/index.ts';
 
-import { importFetchedAccounts } from './importer';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const HISTORY_FETCH_REQUEST = 'HISTORY_FETCH_REQUEST';
 const HISTORY_FETCH_SUCCESS = 'HISTORY_FETCH_SUCCESS';
diff --git a/src/actions/import-data.ts b/src/actions/import-data.ts
index c518d1a16..0aa5ebaa4 100644
--- a/src/actions/import-data.ts
+++ b/src/actions/import-data.ts
@@ -1,10 +1,10 @@
 import { defineMessages } from 'react-intl';
 
-import toast from 'soapbox/toast';
+import toast from 'soapbox/toast.tsx';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const IMPORT_FOLLOWS_REQUEST = 'IMPORT_FOLLOWS_REQUEST';
 export const IMPORT_FOLLOWS_SUCCESS = 'IMPORT_FOLLOWS_SUCCESS';
diff --git a/src/actions/importer/index.ts b/src/actions/importer/index.ts
index 5afb880c0..07bddfaed 100644
--- a/src/actions/importer/index.ts
+++ b/src/actions/importer/index.ts
@@ -1,12 +1,12 @@
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { Group, accountSchema, groupSchema } from 'soapbox/schemas';
-import { filteredArray } from 'soapbox/schemas/utils';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { Group, accountSchema, groupSchema } from 'soapbox/schemas/index.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
 
-import { getSettings } from '../settings';
+import { getSettings } from '../settings.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ACCOUNT_IMPORT  = 'ACCOUNT_IMPORT';
 const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT';
diff --git a/src/actions/instance.ts b/src/actions/instance.ts
index dd17af6ef..9adc7bc1d 100644
--- a/src/actions/instance.ts
+++ b/src/actions/instance.ts
@@ -1,11 +1,11 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
-import { instanceV1Schema, instanceV2Schema } from 'soapbox/schemas/instance';
-import { RootState } from 'soapbox/store';
-import { getAuthUserUrl, getMeUrl } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import { instanceV1Schema, instanceV2Schema } from 'soapbox/schemas/instance.ts';
+import { RootState } from 'soapbox/store.ts';
+import { getAuthUserUrl, getMeUrl } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
 /** Figure out the appropriate instance to fetch depending on the state */
 export const getHost = (state: RootState) => {
diff --git a/src/actions/interactions.ts b/src/actions/interactions.ts
index b18b8f3a2..86472d35a 100644
--- a/src/actions/interactions.ts
+++ b/src/actions/interactions.ts
@@ -1,18 +1,18 @@
 import { defineMessages } from 'react-intl';
 
-import toast, { type IToastOptions } from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import toast, { type IToastOptions } from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedStatus } from './importer';
-import { openModal } from './modals';
-import { expandGroupFeaturedTimeline } from './timelines';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts, importFetchedStatus } from './importer/index.ts';
+import { openModal } from './modals.ts';
+import { expandGroupFeaturedTimeline } from './timelines.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { Account as AccountEntity, APIEntity, Group, Status as StatusEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { Account as AccountEntity, APIEntity, Group, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const REBLOG_REQUEST = 'REBLOG_REQUEST';
 const REBLOG_SUCCESS = 'REBLOG_SUCCESS';
diff --git a/src/actions/lists.ts b/src/actions/lists.ts
index e7c6604f9..0df09c068 100644
--- a/src/actions/lists.ts
+++ b/src/actions/lists.ts
@@ -1,13 +1,13 @@
-import { selectAccount } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedAccounts } from './importer';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const LIST_FETCH_REQUEST = 'LIST_FETCH_REQUEST';
 const LIST_FETCH_SUCCESS = 'LIST_FETCH_SUCCESS';
diff --git a/src/actions/markers.ts b/src/actions/markers.ts
index 96ba12349..33dc1f6c4 100644
--- a/src/actions/markers.ts
+++ b/src/actions/markers.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const MARKER_FETCH_REQUEST = 'MARKER_FETCH_REQUEST';
 const MARKER_FETCH_SUCCESS = 'MARKER_FETCH_SUCCESS';
diff --git a/src/actions/me.ts b/src/actions/me.ts
index 2933da913..47641594f 100644
--- a/src/actions/me.ts
+++ b/src/actions/me.ts
@@ -1,17 +1,17 @@
-import { selectAccount } from 'soapbox/selectors';
-import { setSentryAccount } from 'soapbox/sentry';
-import KVStore from 'soapbox/storage/kv-store';
-import { getAuthUserId, getAuthUserUrl } from 'soapbox/utils/auth';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { setSentryAccount } from 'soapbox/sentry.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import { getAuthUserId, getAuthUserUrl } from 'soapbox/utils/auth.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { loadCredentials } from './auth';
-import { importFetchedAccount } from './importer';
+import { loadCredentials } from './auth.ts';
+import { importFetchedAccount } from './importer/index.ts';
 
 import type { RawAxiosRequestHeaders } from 'axios';
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ME_FETCH_REQUEST = 'ME_FETCH_REQUEST' as const;
 const ME_FETCH_SUCCESS = 'ME_FETCH_SUCCESS' as const;
diff --git a/src/actions/media.ts b/src/actions/media.ts
index acb48a9e5..f009854c4 100644
--- a/src/actions/media.ts
+++ b/src/actions/media.ts
@@ -1,15 +1,15 @@
 import { defineMessages, type IntlShape } from 'react-intl';
 
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
-import { formatBytes, getVideoDuration } from 'soapbox/utils/media';
-import resizeImage from 'soapbox/utils/resize-image';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
+import { formatBytes, getVideoDuration } from 'soapbox/utils/media.ts';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
diff --git a/src/actions/mfa.ts b/src/actions/mfa.ts
index e4c51203d..2320e4d37 100644
--- a/src/actions/mfa.ts
+++ b/src/actions/mfa.ts
@@ -1,6 +1,6 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const MFA_FETCH_REQUEST = 'MFA_FETCH_REQUEST';
 const MFA_FETCH_SUCCESS = 'MFA_FETCH_SUCCESS';
diff --git a/src/actions/modals.ts b/src/actions/modals.ts
index 20ae13f0a..a1d6af4e8 100644
--- a/src/actions/modals.ts
+++ b/src/actions/modals.ts
@@ -1,6 +1,6 @@
-import { AppDispatch } from 'soapbox/store';
+import { AppDispatch } from 'soapbox/store.ts';
 
-import type { ModalType } from 'soapbox/features/ui/components/modal-root';
+import type { ModalType } from 'soapbox/features/ui/components/modal-root.tsx';
 
 export const MODAL_OPEN  = 'MODAL_OPEN';
 export const MODAL_CLOSE = 'MODAL_CLOSE';
diff --git a/src/actions/moderation.tsx b/src/actions/moderation.tsx
index ddee5fe1d..077e7a365 100644
--- a/src/actions/moderation.tsx
+++ b/src/actions/moderation.tsx
@@ -1,16 +1,20 @@
-import React from 'react';
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
+import userOffIcon from '@tabler/icons/outline/user-off.svg';
 import { defineMessages, IntlShape } from 'react-intl';
 
-import { fetchAccountByUsername } from 'soapbox/actions/accounts';
-import { deactivateUsers, deleteUser, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin';
-import { openModal } from 'soapbox/actions/modals';
-import OutlineBox from 'soapbox/components/outline-box';
-import { Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { selectAccount } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
+import { fetchAccountByUsername } from 'soapbox/actions/accounts.ts';
+import { deactivateUsers, deleteUser, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import OutlineBox from 'soapbox/components/outline-box.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const messages = defineMessages({
   deactivateUserHeading: { id: 'confirmations.admin.deactivate_user.heading', defaultMessage: 'Deactivate @{acct}' },
@@ -58,7 +62,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
     );
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/user-off.svg'),
+      icon: userOffIcon,
       heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
       message,
       confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@@ -96,7 +100,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/user-minus.svg'),
+      icon: userMinusIcon,
       heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
       message,
       confirm,
@@ -118,7 +122,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
     const acct = state.statuses.get(statusId)!.account.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/alert-triangle.svg'),
+      icon: alertTriangleIcon,
       heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading),
       message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
       confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm),
@@ -138,7 +142,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
     const acct = state.statuses.get(statusId)!.account.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteStatusHeading),
       message: intl.formatMessage(messages.deleteStatusPrompt, { acct: <strong className='break-words'>{acct}</strong> }),
       confirm: intl.formatMessage(messages.deleteStatusConfirm),
diff --git a/src/actions/mrf.ts b/src/actions/mrf.ts
index 509bdb8fc..25e2db720 100644
--- a/src/actions/mrf.ts
+++ b/src/actions/mrf.ts
@@ -1,11 +1,11 @@
 import { Set as ImmutableSet } from 'immutable';
 
-import ConfigDB from 'soapbox/utils/config-db';
+import ConfigDB from 'soapbox/utils/config-db.ts';
 
-import { fetchConfig, updateConfig } from './admin';
+import { fetchConfig, updateConfig } from './admin.ts';
 
-import type { MRFSimple } from 'soapbox/schemas/pleroma';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { MRFSimple } from 'soapbox/schemas/pleroma.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const simplePolicyMerge = (simplePolicy: MRFSimple, host: string, restrictions: Record<string, any>) => {
   const entries = Object.entries(simplePolicy).map(([key, hosts]) => {
diff --git a/src/actions/mutes.ts b/src/actions/mutes.ts
index 205ee4677..350fd93e8 100644
--- a/src/actions/mutes.ts
+++ b/src/actions/mutes.ts
@@ -1,8 +1,8 @@
-import { openModal } from './modals';
+import { openModal } from './modals.ts';
 
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch } from 'soapbox/store';
-import type { Account as AccountEntity } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch } from 'soapbox/store.ts';
+import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
 
 const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL';
 const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS';
diff --git a/src/actions/nostr.ts b/src/actions/nostr.ts
index b05ccb461..87f13f238 100644
--- a/src/actions/nostr.ts
+++ b/src/actions/nostr.ts
@@ -1,13 +1,13 @@
 import { NostrSigner, NRelay1, NSecSigner } from '@nostrify/nostrify';
 import { generateSecretKey } from 'nostr-tools';
 
-import { NBunker } from 'soapbox/features/nostr/NBunker';
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore';
-import { type AppDispatch } from 'soapbox/store';
+import { NBunker } from 'soapbox/features/nostr/NBunker.ts';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore.ts';
+import { type AppDispatch } from 'soapbox/store.ts';
 
-import { authLoggedIn, verifyCredentials } from './auth';
-import { obtainOAuthToken } from './oauth';
+import { authLoggedIn, verifyCredentials } from './auth.ts';
+import { obtainOAuthToken } from './oauth.ts';
 
 const NOSTR_PUBKEY_SET = 'NOSTR_PUBKEY_SET';
 
@@ -64,8 +64,6 @@ function logInNostr(signer: NostrSigner, relay: NRelay1) {
     });
 
     await dispatch(verifyCredentials(accessToken));
-
-    // TODO: get rid of `vite-plugin-require` and switch to `using` for the bunker. :(
     bunker.close();
   };
 }
diff --git a/src/actions/notifications.test.ts b/src/actions/notifications.test.ts
index c46040216..1f67081dd 100644
--- a/src/actions/notifications.test.ts
+++ b/src/actions/notifications.test.ts
@@ -1,10 +1,11 @@
 import { OrderedMap as ImmutableOrderedMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeNotification } from 'soapbox/normalizers';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeNotification } from 'soapbox/normalizers/index.ts';
 
-import { markReadNotifications } from './notifications';
+import { markReadNotifications } from './notifications.ts';
 
 describe('markReadNotifications()', () => {
   it('fires off marker when top notification is newer than lastRead', async() => {
diff --git a/src/actions/notifications.ts b/src/actions/notifications.ts
index c6ce8043a..6ecf8023b 100644
--- a/src/actions/notifications.ts
+++ b/src/actions/notifications.ts
@@ -2,28 +2,28 @@ import IntlMessageFormat from 'intl-messageformat';
 import 'intl-pluralrules';
 import { defineMessages } from 'react-intl';
 
-import api, { getLinks } from 'soapbox/api';
-import { getFilters, regexFromFilters } from 'soapbox/selectors';
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { compareId } from 'soapbox/utils/comparators';
-import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features';
-import { unescapeHTML } from 'soapbox/utils/html';
-import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification';
-import { joinPublicPath } from 'soapbox/utils/static';
+import api, { getLinks } from 'soapbox/api/index.ts';
+import { getFilters, regexFromFilters } from 'soapbox/selectors/index.ts';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { compareId } from 'soapbox/utils/comparators.ts';
+import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
+import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification.ts';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
-import { fetchRelationships } from './accounts';
-import { fetchGroupRelationships } from './groups';
+import { fetchRelationships } from './accounts.ts';
+import { fetchGroupRelationships } from './groups.ts';
 import {
   importFetchedAccount,
   importFetchedAccounts,
   importFetchedStatus,
   importFetchedStatuses,
-} from './importer';
-import { saveMarker } from './markers';
-import { getSettings, saveSettings } from './settings';
+} from './importer/index.ts';
+import { saveMarker } from './markers.ts';
+import { getSettings, saveSettings } from './settings.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
 
 const NOTIFICATIONS_UPDATE      = 'NOTIFICATIONS_UPDATE';
 const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP';
diff --git a/src/actions/oauth.ts b/src/actions/oauth.ts
index 4147c9409..10b5c1076 100644
--- a/src/actions/oauth.ts
+++ b/src/actions/oauth.ts
@@ -6,11 +6,11 @@
  * @see module:soapbox/actions/auth
  */
 
-import { getBaseURL } from 'soapbox/utils/state';
+import { getBaseURL } from 'soapbox/utils/state.ts';
 
-import { baseClient } from '../api';
+import { baseClient } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 export const OAUTH_TOKEN_CREATE_REQUEST = 'OAUTH_TOKEN_CREATE_REQUEST';
 export const OAUTH_TOKEN_CREATE_SUCCESS = 'OAUTH_TOKEN_CREATE_SUCCESS';
diff --git a/src/actions/onboarding.test.ts b/src/actions/onboarding.test.ts
index 3f638ece9..c52877695 100644
--- a/src/actions/onboarding.test.ts
+++ b/src/actions/onboarding.test.ts
@@ -1,6 +1,8 @@
-import { mockStore, mockWindowProperty, rootState } from 'soapbox/jest/test-helpers';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { checkOnboardingStatus, startOnboarding, endOnboarding } from './onboarding';
+import { mockStore, mockWindowProperty, rootState } from 'soapbox/jest/test-helpers.tsx';
+
+import { checkOnboardingStatus, startOnboarding, endOnboarding } from './onboarding.ts';
 
 describe('checkOnboarding()', () => {
   let mockGetItem: any;
diff --git a/src/actions/patron.ts b/src/actions/patron.ts
index 0e164462f..4a3d5eade 100644
--- a/src/actions/patron.ts
+++ b/src/actions/patron.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const PATRON_INSTANCE_FETCH_REQUEST = 'PATRON_INSTANCE_FETCH_REQUEST';
 const PATRON_INSTANCE_FETCH_SUCCESS = 'PATRON_INSTANCE_FETCH_SUCCESS';
diff --git a/src/actions/pin-statuses.ts b/src/actions/pin-statuses.ts
index c2a5115cd..a09a71fa9 100644
--- a/src/actions/pin-statuses.ts
+++ b/src/actions/pin-statuses.ts
@@ -1,11 +1,11 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const PINNED_STATUSES_FETCH_REQUEST = 'PINNED_STATUSES_FETCH_REQUEST';
 const PINNED_STATUSES_FETCH_SUCCESS = 'PINNED_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/polls.ts b/src/actions/polls.ts
index 64fb65320..57a83e08e 100644
--- a/src/actions/polls.ts
+++ b/src/actions/polls.ts
@@ -1,9 +1,9 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import { importFetchedPoll } from './importer';
+import { importFetchedPoll } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const POLL_VOTE_REQUEST = 'POLL_VOTE_REQUEST';
 const POLL_VOTE_SUCCESS = 'POLL_VOTE_SUCCESS';
diff --git a/src/actions/preload.test.ts b/src/actions/preload.test.ts
index 24a5f86b3..2ecf454e1 100644
--- a/src/actions/preload.test.ts
+++ b/src/actions/preload.test.ts
@@ -1,12 +1,14 @@
-import { __stub } from 'soapbox/api';
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { describe, expect, it } from 'vitest';
 
-import { VERIFY_CREDENTIALS_REQUEST } from './auth';
-import { ACCOUNTS_IMPORT } from './importer';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore } from 'soapbox/jest/test-helpers.tsx';
+
+import { VERIFY_CREDENTIALS_REQUEST } from './auth.ts';
+import { ACCOUNTS_IMPORT } from './importer/index.ts';
 import {
   MASTODON_PRELOAD_IMPORT,
   preloadMastodon,
-} from './preload';
+} from './preload.ts';
 
 describe('preloadMastodon()', () => {
   it('creates the expected actions', async () => {
diff --git a/src/actions/preload.ts b/src/actions/preload.ts
index 07b0aa0bb..f923b467f 100644
--- a/src/actions/preload.ts
+++ b/src/actions/preload.ts
@@ -1,9 +1,9 @@
 import mapValues from 'lodash/mapValues';
 
-import { verifyCredentials } from './auth';
-import { importFetchedAccounts } from './importer';
+import { verifyCredentials } from './auth.ts';
+import { importFetchedAccounts } from './importer/index.ts';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 const PLEROMA_PRELOAD_IMPORT  = 'PLEROMA_PRELOAD_IMPORT';
 const MASTODON_PRELOAD_IMPORT = 'MASTODON_PRELOAD_IMPORT';
diff --git a/src/actions/push-notifications/registerer.ts b/src/actions/push-notifications/registerer.ts
index f3e4d4a6f..a6983718d 100644
--- a/src/actions/push-notifications/registerer.ts
+++ b/src/actions/push-notifications/registerer.ts
@@ -1,8 +1,8 @@
 /* eslint-disable compat/compat */
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { MastodonClient } from 'soapbox/api/MastodonClient';
-import { WebPushSubscription, webPushSubscriptionSchema } from 'soapbox/schemas/web-push';
-import { decodeBase64Url } from 'soapbox/utils/base64';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { MastodonClient } from 'soapbox/api/MastodonClient.ts';
+import { WebPushSubscription, webPushSubscriptionSchema } from 'soapbox/schemas/web-push.ts';
+import { decodeBase64Url } from 'soapbox/utils/base64.ts';
 
 // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
 const supportsPushNotifications = ('serviceWorker' in navigator && 'PushManager' in window && 'getKey' in PushSubscription.prototype);
diff --git a/src/actions/remote-timeline.ts b/src/actions/remote-timeline.ts
index ac1277aec..0f2640a89 100644
--- a/src/actions/remote-timeline.ts
+++ b/src/actions/remote-timeline.ts
@@ -1,7 +1,7 @@
-import { getSettings, changeSetting } from 'soapbox/actions/settings';
+import { getSettings, changeSetting } from 'soapbox/actions/settings.ts';
 
 import type { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const getPinnedHosts = (state: RootState) => {
   const settings = getSettings(state);
diff --git a/src/actions/reports.ts b/src/actions/reports.ts
index 662b24b3d..5a98d0881 100644
--- a/src/actions/reports.ts
+++ b/src/actions/reports.ts
@@ -1,10 +1,10 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import { openModal } from './modals';
+import { openModal } from './modals.ts';
 
-import type { Account } from 'soapbox/schemas';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { ChatMessage, Group, Status } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { ChatMessage, Group, Status } from 'soapbox/types/entities.ts';
 
 const REPORT_INIT   = 'REPORT_INIT';
 const REPORT_CANCEL = 'REPORT_CANCEL';
diff --git a/src/actions/scheduled-statuses.ts b/src/actions/scheduled-statuses.ts
index b7cf112e9..7bd8d0331 100644
--- a/src/actions/scheduled-statuses.ts
+++ b/src/actions/scheduled-statuses.ts
@@ -1,9 +1,9 @@
-import { getFeatures } from 'soapbox/utils/features';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SCHEDULED_STATUSES_FETCH_REQUEST = 'SCHEDULED_STATUSES_FETCH_REQUEST';
 const SCHEDULED_STATUSES_FETCH_SUCCESS = 'SCHEDULED_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/search.ts b/src/actions/search.ts
index 8810605eb..82a96c009 100644
--- a/src/actions/search.ts
+++ b/src/actions/search.ts
@@ -1,11 +1,11 @@
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedStatuses } from './importer';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts, importFetchedStatuses } from './importer/index.ts';
 
-import type { SearchFilter } from 'soapbox/reducers/search';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { SearchFilter } from 'soapbox/reducers/search.ts';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SEARCH_CHANGE        = 'SEARCH_CHANGE';
 const SEARCH_CLEAR         = 'SEARCH_CLEAR';
diff --git a/src/actions/security.ts b/src/actions/security.ts
index 4448104b7..683a3a6e6 100644
--- a/src/actions/security.ts
+++ b/src/actions/security.ts
@@ -4,16 +4,16 @@
  * @see module:soapbox/actions/auth
  */
 
-import toast from 'soapbox/toast';
-import { getLoggedInAccount } from 'soapbox/utils/auth';
-import { parseVersion, TRUTHSOCIAL } from 'soapbox/utils/features';
-import { normalizeUsername } from 'soapbox/utils/input';
+import toast from 'soapbox/toast.tsx';
+import { getLoggedInAccount } from 'soapbox/utils/auth.ts';
+import { parseVersion, TRUTHSOCIAL } from 'soapbox/utils/features.ts';
+import { normalizeUsername } from 'soapbox/utils/input.ts';
 
-import api from '../api';
+import api from '../api/index.ts';
 
-import { AUTH_LOGGED_OUT, messages } from './auth';
+import { AUTH_LOGGED_OUT, messages } from './auth.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const FETCH_TOKENS_REQUEST = 'FETCH_TOKENS_REQUEST';
 const FETCH_TOKENS_SUCCESS = 'FETCH_TOKENS_SUCCESS';
diff --git a/src/actions/settings.ts b/src/actions/settings.ts
index e05771fdc..50204e0f4 100644
--- a/src/actions/settings.ts
+++ b/src/actions/settings.ts
@@ -2,12 +2,12 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { defineMessage } from 'react-intl';
 import { createSelector } from 'reselect';
 
-import { patchMe } from 'soapbox/actions/me';
-import messages from 'soapbox/messages';
-import toast from 'soapbox/toast';
-import { isLoggedIn } from 'soapbox/utils/auth';
+import { patchMe } from 'soapbox/actions/me.ts';
+import messages from 'soapbox/messages.ts';
+import toast from 'soapbox/toast.tsx';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const SETTING_CHANGE = 'SETTING_CHANGE' as const;
 const SETTING_SAVE   = 'SETTING_SAVE' as const;
diff --git a/src/actions/soapbox.ts b/src/actions/soapbox.ts
index 44552e38e..31e7679b1 100644
--- a/src/actions/soapbox.ts
+++ b/src/actions/soapbox.ts
@@ -1,15 +1,15 @@
 import { createSelector } from 'reselect';
 
-import { getHost } from 'soapbox/actions/instance';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import KVStore from 'soapbox/storage/kv-store';
-import { removeVS16s } from 'soapbox/utils/emoji';
-import { getFeatures } from 'soapbox/utils/features';
+import { getHost } from 'soapbox/actions/instance.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import { removeVS16s } from 'soapbox/utils/emoji.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { staticClient } from '../api';
+import api, { staticClient } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SOAPBOX_CONFIG_REQUEST_SUCCESS = 'SOAPBOX_CONFIG_REQUEST_SUCCESS';
 const SOAPBOX_CONFIG_REQUEST_FAIL    = 'SOAPBOX_CONFIG_REQUEST_FAIL';
diff --git a/src/actions/status-quotes.test.ts b/src/actions/status-quotes.test.ts
index 6f53b48c6..b11085fec 100644
--- a/src/actions/status-quotes.test.ts
+++ b/src/actions/status-quotes.test.ts
@@ -1,10 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { StatusListRecord } from 'soapbox/reducers/status-lists';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { StatusListRecord } from 'soapbox/reducers/status-lists.ts';
 
-import { fetchStatusQuotes, expandStatusQuotes } from './status-quotes';
+import { fetchStatusQuotes, expandStatusQuotes } from './status-quotes.ts';
 
 const status = {
   account: {
diff --git a/src/actions/status-quotes.ts b/src/actions/status-quotes.ts
index 9dab8df46..2bb83a721 100644
--- a/src/actions/status-quotes.ts
+++ b/src/actions/status-quotes.ts
@@ -1,8 +1,8 @@
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 export const STATUS_QUOTES_FETCH_REQUEST = 'STATUS_QUOTES_FETCH_REQUEST';
 export const STATUS_QUOTES_FETCH_SUCCESS = 'STATUS_QUOTES_FETCH_SUCCESS';
diff --git a/src/actions/statuses.test.ts b/src/actions/statuses.test.ts
index dd4831dc7..641b9d48d 100644
--- a/src/actions/statuses.test.ts
+++ b/src/actions/statuses.test.ts
@@ -1,11 +1,12 @@
 import { fromJS, Map as ImmutableMap } from 'immutable';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { STATUSES_IMPORT } from 'soapbox/actions/importer';
-import { __stub } from 'soapbox/api';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeStatus } from 'soapbox/normalizers/status';
+import { STATUSES_IMPORT } from 'soapbox/actions/importer/index.ts';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
 
-import { deleteStatus, fetchContext } from './statuses';
+import { deleteStatus, fetchContext } from './statuses.ts';
 
 describe('fetchContext()', () => {
   it('handles Mitra context', async () => {
diff --git a/src/actions/statuses.ts b/src/actions/statuses.ts
index db1bfdb47..8d00cf00b 100644
--- a/src/actions/statuses.ts
+++ b/src/actions/statuses.ts
@@ -1,17 +1,17 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
-import { shouldHaveCard } from 'soapbox/utils/status';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
+import { shouldHaveCard } from 'soapbox/utils/status.ts';
 
-import api, { getNextLink } from '../api';
+import api, { getNextLink } from '../api/index.ts';
 
-import { setComposeToStatus } from './compose-status';
-import { fetchGroupRelationships } from './groups';
-import { importFetchedStatus, importFetchedStatuses } from './importer';
-import { openModal } from './modals';
-import { deleteFromTimelines } from './timelines';
+import { setComposeToStatus } from './compose-status.ts';
+import { fetchGroupRelationships } from './groups.ts';
+import { importFetchedStatus, importFetchedStatuses } from './importer/index.ts';
+import { openModal } from './modals.ts';
+import { deleteFromTimelines } from './timelines.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
 
 const STATUS_CREATE_REQUEST = 'STATUS_CREATE_REQUEST';
 const STATUS_CREATE_SUCCESS = 'STATUS_CREATE_SUCCESS';
diff --git a/src/actions/streaming.ts b/src/actions/streaming.ts
index 925832265..23b426cd8 100644
--- a/src/actions/streaming.ts
+++ b/src/actions/streaming.ts
@@ -1,33 +1,33 @@
-import { getLocale, getSettings } from 'soapbox/actions/settings';
-import { updateReactions } from 'soapbox/api/hooks/announcements/useAnnouncements';
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { selectEntity } from 'soapbox/entity-store/selectors';
-import messages from 'soapbox/messages';
-import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { announcementSchema, type Announcement, type Relationship } from 'soapbox/schemas';
-import { getUnreadChatsCount, updateChatListItem, updateChatMessage } from 'soapbox/utils/chats';
-import { removePageItem } from 'soapbox/utils/queries';
-import { play, soundCache } from 'soapbox/utils/sounds';
+import { getLocale, getSettings } from 'soapbox/actions/settings.ts';
+import { updateReactions } from 'soapbox/api/hooks/announcements/useAnnouncements.ts';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { selectEntity } from 'soapbox/entity-store/selectors.ts';
+import messages from 'soapbox/messages.ts';
+import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { announcementSchema, type Announcement, type Relationship } from 'soapbox/schemas/index.ts';
+import { getUnreadChatsCount, updateChatListItem, updateChatMessage } from 'soapbox/utils/chats.ts';
+import { removePageItem } from 'soapbox/utils/queries.ts';
+import { play, soundCache } from 'soapbox/utils/sounds.ts';
 
-import { connectStream } from '../stream';
+import { connectStream } from '../stream.ts';
 
-import { updateConversations } from './conversations';
-import { fetchFilters } from './filters';
-import { MARKER_FETCH_SUCCESS } from './markers';
-import { updateNotificationsQueue } from './notifications';
-import { updateStatus } from './statuses';
+import { updateConversations } from './conversations.ts';
+import { fetchFilters } from './filters.ts';
+import { MARKER_FETCH_SUCCESS } from './markers.ts';
+import { updateNotificationsQueue } from './notifications.ts';
+import { updateStatus } from './statuses.ts';
 import {
   // deleteFromTimelines,
   connectTimeline,
   disconnectTimeline,
   processTimelineUpdate,
-} from './timelines';
+} from './timelines.ts';
 
-import type { IStatContext } from 'soapbox/contexts/stat-context';
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Chat } from 'soapbox/types/entities';
+import type { IStatContext } from 'soapbox/contexts/stat-context.tsx';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Chat } from 'soapbox/types/entities.ts';
 
 const STREAMING_CHAT_UPDATE = 'STREAMING_CHAT_UPDATE';
 
diff --git a/src/actions/suggestions.ts b/src/actions/suggestions.ts
index 4c2584856..5065100b6 100644
--- a/src/actions/suggestions.ts
+++ b/src/actions/suggestions.ts
@@ -1,14 +1,14 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getFeatures } from 'soapbox/utils/features';
+import { isLoggedIn } from 'soapbox/utils/auth.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
-import { insertSuggestionsIntoTimeline } from './timelines';
+import { fetchRelationships } from './accounts.ts';
+import { importFetchedAccounts } from './importer/index.ts';
+import { insertSuggestionsIntoTimeline } from './timelines.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SUGGESTIONS_FETCH_REQUEST = 'SUGGESTIONS_FETCH_REQUEST';
 const SUGGESTIONS_FETCH_SUCCESS = 'SUGGESTIONS_FETCH_SUCCESS';
diff --git a/src/actions/tags.ts b/src/actions/tags.ts
index ee3289570..3873bc329 100644
--- a/src/actions/tags.ts
+++ b/src/actions/tags.ts
@@ -1,7 +1,7 @@
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const HASHTAG_FETCH_REQUEST = 'HASHTAG_FETCH_REQUEST';
 const HASHTAG_FETCH_SUCCESS = 'HASHTAG_FETCH_SUCCESS';
diff --git a/src/actions/timelines.ts b/src/actions/timelines.ts
index a6cd2b139..4b7aa6ce1 100644
--- a/src/actions/timelines.ts
+++ b/src/actions/timelines.ts
@@ -1,16 +1,16 @@
 import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { normalizeStatus } from 'soapbox/normalizers';
-import { shouldFilter } from 'soapbox/utils/timelines';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { shouldFilter } from 'soapbox/utils/timelines.ts';
 
-import api, { getNextLink, getPrevLink } from '../api';
+import api, { getNextLink, getPrevLink } from '../api/index.ts';
 
-import { fetchGroupRelationships } from './groups';
-import { importFetchedStatus, importFetchedStatuses } from './importer';
+import { fetchGroupRelationships } from './groups.ts';
+import { importFetchedStatus, importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
 
 const TIMELINE_UPDATE = 'TIMELINE_UPDATE' as const;
 const TIMELINE_DELETE = 'TIMELINE_DELETE' as const;
diff --git a/src/actions/trending-statuses.ts b/src/actions/trending-statuses.ts
index c6a26e316..e0075b019 100644
--- a/src/actions/trending-statuses.ts
+++ b/src/actions/trending-statuses.ts
@@ -1,11 +1,11 @@
-import { APIEntity } from 'soapbox/types/entities';
-import { getFeatures } from 'soapbox/utils/features';
+import { APIEntity } from 'soapbox/types/entities.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { getLinks } from '../api';
+import api, { getLinks } from '../api/index.ts';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses } from './importer/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const TRENDING_STATUSES_FETCH_REQUEST = 'TRENDING_STATUSES_FETCH_REQUEST';
 const TRENDING_STATUSES_FETCH_SUCCESS = 'TRENDING_STATUSES_FETCH_SUCCESS';
diff --git a/src/actions/trends.ts b/src/actions/trends.ts
index 6eeb32c38..f13e063cf 100644
--- a/src/actions/trends.ts
+++ b/src/actions/trends.ts
@@ -1,7 +1,7 @@
-import api from '../api';
+import api from '../api/index.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const TRENDS_FETCH_REQUEST = 'TRENDS_FETCH_REQUEST';
 const TRENDS_FETCH_SUCCESS = 'TRENDS_FETCH_SUCCESS';
diff --git a/src/api/MastodonClient.ts b/src/api/MastodonClient.ts
index 42263d517..a0d084349 100644
--- a/src/api/MastodonClient.ts
+++ b/src/api/MastodonClient.ts
@@ -1,4 +1,4 @@
-import { HTTPError } from './HTTPError';
+import { HTTPError } from './HTTPError.ts';
 
 interface Opts {
   searchParams?: URLSearchParams | Record<string, string | number | boolean>;
diff --git a/src/api/hooks/accounts/useAccount.ts b/src/api/hooks/accounts/useAccount.ts
index 9db7ec217..17cdb35c8 100644
--- a/src/api/hooks/accounts/useAccount.ts
+++ b/src/api/hooks/accounts/useAccount.ts
@@ -1,12 +1,14 @@
 import { useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures, useLoggedIn } from 'soapbox/hooks';
-import { type Account, accountSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { type Account, accountSchema } from 'soapbox/schemas/index.ts';
 
-import { useRelationship } from './useRelationship';
+import { useRelationship } from './useRelationship.ts';
 
 interface UseAccountOpts {
   withRelationship?: boolean;
diff --git a/src/api/hooks/accounts/useAccountList.ts b/src/api/hooks/accounts/useAccountList.ts
index ec769224b..9d4d1392c 100644
--- a/src/api/hooks/accounts/useAccountList.ts
+++ b/src/api/hooks/accounts/useAccountList.ts
@@ -1,11 +1,11 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { Account, accountSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { Account, accountSchema } from 'soapbox/schemas/index.ts';
 
-import { useRelationships } from './useRelationships';
+import { useRelationships } from './useRelationships.ts';
 
-import type { EntityFn } from 'soapbox/entity-store/hooks/types';
+import type { EntityFn } from 'soapbox/entity-store/hooks/types.ts';
 
 interface useAccountListOpts {
   enabled?: boolean;
diff --git a/src/api/hooks/accounts/useAccountLookup.ts b/src/api/hooks/accounts/useAccountLookup.ts
index ef9306a7d..ad3605d27 100644
--- a/src/api/hooks/accounts/useAccountLookup.ts
+++ b/src/api/hooks/accounts/useAccountLookup.ts
@@ -1,12 +1,14 @@
 import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityLookup } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures, useLoggedIn } from 'soapbox/hooks';
-import { type Account, accountSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityLookup } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { type Account, accountSchema } from 'soapbox/schemas/index.ts';
 
-import { useRelationship } from './useRelationship';
+import { useRelationship } from './useRelationship.ts';
 
 interface UseAccountLookupOpts {
   withRelationship?: boolean;
diff --git a/src/api/hooks/accounts/useFollow.ts b/src/api/hooks/accounts/useFollow.ts
index 25be4b3bc..c0cce5c07 100644
--- a/src/api/hooks/accounts/useFollow.ts
+++ b/src/api/hooks/accounts/useFollow.ts
@@ -1,8 +1,10 @@
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { useTransaction } from 'soapbox/entity-store/hooks';
-import { useApi, useAppDispatch, useLoggedIn } from 'soapbox/hooks';
-import { relationshipSchema } from 'soapbox/schemas';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { relationshipSchema } from 'soapbox/schemas/index.ts';
 
 interface FollowOpts {
   reblogs?: boolean;
diff --git a/src/api/hooks/accounts/usePatronUser.ts b/src/api/hooks/accounts/usePatronUser.ts
index 27ff6edfe..ff9eb58e2 100644
--- a/src/api/hooks/accounts/usePatronUser.ts
+++ b/src/api/hooks/accounts/usePatronUser.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig';
-import { type PatronUser, patronUserSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { type PatronUser, patronUserSchema } from 'soapbox/schemas/index.ts';
 
 function usePatronUser(url?: string) {
   const api = useApi();
diff --git a/src/api/hooks/accounts/useRelationship.ts b/src/api/hooks/accounts/useRelationship.ts
index 6424a2876..b1e80fad0 100644
--- a/src/api/hooks/accounts/useRelationship.ts
+++ b/src/api/hooks/accounts/useRelationship.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { type Relationship, relationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { type Relationship, relationshipSchema } from 'soapbox/schemas/index.ts';
 
 interface UseRelationshipOpts {
   enabled?: boolean;
diff --git a/src/api/hooks/accounts/useRelationships.ts b/src/api/hooks/accounts/useRelationships.ts
index 8ffdb46ef..fbded4a59 100644
--- a/src/api/hooks/accounts/useRelationships.ts
+++ b/src/api/hooks/accounts/useRelationships.ts
@@ -1,7 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities';
-import { useApi, useLoggedIn } from 'soapbox/hooks';
-import { type Relationship, relationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { type Relationship, relationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useRelationships(listKey: string[], ids: string[]) {
   const api = useApi();
diff --git a/src/api/hooks/admin/index.ts b/src/api/hooks/admin/index.ts
index 0ca5e7514..472cdc86e 100644
--- a/src/api/hooks/admin/index.ts
+++ b/src/api/hooks/admin/index.ts
@@ -1,6 +1,6 @@
-export { useDomains } from './useDomains';
-export { useModerationLog } from './useModerationLog';
-export { useRelays } from './useRelays';
-export { useRules } from './useRules';
-export { useSuggest } from './useSuggest';
-export { useVerify } from './useVerify';
\ No newline at end of file
+export { useDomains } from './useDomains.ts';
+export { useModerationLog } from './useModerationLog.ts';
+export { useRelays } from './useRelays.ts';
+export { useRules } from './useRules.ts';
+export { useSuggest } from './useSuggest.ts';
+export { useVerify } from './useVerify.ts';
\ No newline at end of file
diff --git a/src/api/hooks/admin/useAdminAccounts.ts b/src/api/hooks/admin/useAdminAccounts.ts
index 585a16710..2c4b2bf42 100644
--- a/src/api/hooks/admin/useAdminAccounts.ts
+++ b/src/api/hooks/admin/useAdminAccounts.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { adminAccountSchema } from 'soapbox/schemas/admin-account';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { adminAccountSchema } from 'soapbox/schemas/admin-account.ts';
 
 interface MastodonAdminFilters {
   local?: boolean;
diff --git a/src/api/hooks/admin/useAnnouncements.ts b/src/api/hooks/admin/useAnnouncements.ts
index 2fa3f0029..96544d5e0 100644
--- a/src/api/hooks/admin/useAnnouncements.ts
+++ b/src/api/hooks/admin/useAnnouncements.ts
@@ -1,10 +1,10 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { adminAnnouncementSchema, type AdminAnnouncement } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { adminAnnouncementSchema, type AdminAnnouncement } from 'soapbox/schemas/index.ts';
 
-import { useAnnouncements as useUserAnnouncements } from '../announcements';
+import { useAnnouncements as useUserAnnouncements } from '../announcements/index.ts';
 
 interface CreateAnnouncementParams {
   content: string;
diff --git a/src/api/hooks/admin/useCreateDomain.ts b/src/api/hooks/admin/useCreateDomain.ts
index 8cbb4ae85..3fc066920 100644
--- a/src/api/hooks/admin/useCreateDomain.ts
+++ b/src/api/hooks/admin/useCreateDomain.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { domainSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { domainSchema } from 'soapbox/schemas/index.ts';
 
 interface CreateDomainParams {
   domain: string;
diff --git a/src/api/hooks/admin/useDeleteDomain.ts b/src/api/hooks/admin/useDeleteDomain.ts
index 05aeb70e8..7e05c6bc1 100644
--- a/src/api/hooks/admin/useDeleteDomain.ts
+++ b/src/api/hooks/admin/useDeleteDomain.ts
@@ -1,6 +1,6 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useDeleteEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useDeleteEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
 const useDeleteDomain = () => {
   const api = useApi();
diff --git a/src/api/hooks/admin/useDomains.ts b/src/api/hooks/admin/useDomains.ts
index ff052b7ac..8312b038b 100644
--- a/src/api/hooks/admin/useDomains.ts
+++ b/src/api/hooks/admin/useDomains.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { domainSchema, type Domain } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { domainSchema, type Domain } from 'soapbox/schemas/index.ts';
 
 interface CreateDomainParams {
   domain: string;
diff --git a/src/api/hooks/admin/useManageZapSplit.ts b/src/api/hooks/admin/useManageZapSplit.ts
index e0e0344ce..5a891e600 100644
--- a/src/api/hooks/admin/useManageZapSplit.ts
+++ b/src/api/hooks/admin/useManageZapSplit.ts
@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { defineMessages } from 'react-intl';
 
-import { type INewAccount } from 'soapbox/features/admin/manage-zap-split';
-import { useApi } from 'soapbox/hooks';
-import { baseZapAccountSchema, ZapSplitData } from 'soapbox/schemas/zap-split';
-import toast from 'soapbox/toast';
+import { type INewAccount } from 'soapbox/features/admin/manage-zap-split.tsx';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { baseZapAccountSchema, ZapSplitData } from 'soapbox/schemas/zap-split.ts';
+import toast from 'soapbox/toast.tsx';
 
 
 const messages = defineMessages({
diff --git a/src/api/hooks/admin/useModerationLog.ts b/src/api/hooks/admin/useModerationLog.ts
index 2153deab8..3c3408927 100644
--- a/src/api/hooks/admin/useModerationLog.ts
+++ b/src/api/hooks/admin/useModerationLog.ts
@@ -1,7 +1,7 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { moderationLogEntrySchema, type ModerationLogEntry } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { moderationLogEntrySchema, type ModerationLogEntry } from 'soapbox/schemas/index.ts';
 
 interface ModerationLogResult {
   items: ModerationLogEntry[];
diff --git a/src/api/hooks/admin/useRelays.ts b/src/api/hooks/admin/useRelays.ts
index d27b6d043..ee119caa1 100644
--- a/src/api/hooks/admin/useRelays.ts
+++ b/src/api/hooks/admin/useRelays.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { relaySchema, type Relay } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { relaySchema, type Relay } from 'soapbox/schemas/index.ts';
 
 const useRelays = () => {
   const api = useApi();
diff --git a/src/api/hooks/admin/useRules.ts b/src/api/hooks/admin/useRules.ts
index 8fed91fa0..4cce7129a 100644
--- a/src/api/hooks/admin/useRules.ts
+++ b/src/api/hooks/admin/useRules.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { adminRuleSchema, type AdminRule } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { adminRuleSchema, type AdminRule } from 'soapbox/schemas/index.ts';
 
 interface CreateRuleParams {
   priority?: number;
diff --git a/src/api/hooks/admin/useSuggest.ts b/src/api/hooks/admin/useSuggest.ts
index b20bc5308..46a2727ed 100644
--- a/src/api/hooks/admin/useSuggest.ts
+++ b/src/api/hooks/admin/useSuggest.ts
@@ -1,9 +1,10 @@
-import { useTransaction } from 'soapbox/entity-store/hooks';
-import { EntityCallbacks } from 'soapbox/entity-store/hooks/types';
-import { useApi, useGetState } from 'soapbox/hooks';
-import { accountIdsToAccts } from 'soapbox/selectors';
+import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
+import { EntityCallbacks } from 'soapbox/entity-store/hooks/types.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
+import { accountIdsToAccts } from 'soapbox/selectors/index.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 function useSuggest() {
   const api = useApi();
diff --git a/src/api/hooks/admin/useUpdateDomain.ts b/src/api/hooks/admin/useUpdateDomain.ts
index 8488d6916..8ac43cc97 100644
--- a/src/api/hooks/admin/useUpdateDomain.ts
+++ b/src/api/hooks/admin/useUpdateDomain.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { domainSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { domainSchema } from 'soapbox/schemas/index.ts';
 
-import type { CreateDomainParams } from './useCreateDomain';
+import type { CreateDomainParams } from './useCreateDomain.ts';
 
 const useUpdateDomain = (id: string) => {
   const api = useApi();
diff --git a/src/api/hooks/admin/useVerify.ts b/src/api/hooks/admin/useVerify.ts
index 9312d609e..4fee04daa 100644
--- a/src/api/hooks/admin/useVerify.ts
+++ b/src/api/hooks/admin/useVerify.ts
@@ -1,9 +1,10 @@
-import { useTransaction } from 'soapbox/entity-store/hooks';
-import { EntityCallbacks } from 'soapbox/entity-store/hooks/types';
-import { useApi, useGetState } from 'soapbox/hooks';
-import { accountIdsToAccts } from 'soapbox/selectors';
+import { useTransaction } from 'soapbox/entity-store/hooks/index.ts';
+import { EntityCallbacks } from 'soapbox/entity-store/hooks/types.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
+import { accountIdsToAccts } from 'soapbox/selectors/index.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 function useVerify() {
   const api = useApi();
diff --git a/src/api/hooks/announcements/index.ts b/src/api/hooks/announcements/index.ts
index 021ac3ea0..ddb8ac3a4 100644
--- a/src/api/hooks/announcements/index.ts
+++ b/src/api/hooks/announcements/index.ts
@@ -1 +1 @@
-export { useAnnouncements } from './useAnnouncements';
+export { useAnnouncements } from './useAnnouncements.ts';
diff --git a/src/api/hooks/announcements/useAnnouncements.ts b/src/api/hooks/announcements/useAnnouncements.ts
index af4e36a2c..b83946579 100644
--- a/src/api/hooks/announcements/useAnnouncements.ts
+++ b/src/api/hooks/announcements/useAnnouncements.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { announcementReactionSchema, announcementSchema, type Announcement, type AnnouncementReaction } from 'soapbox/schemas';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { announcementReactionSchema, announcementSchema, type Announcement, type AnnouncementReaction } from 'soapbox/schemas/index.ts';
 
 const updateReaction = (reaction: AnnouncementReaction, count: number, me?: boolean, overwrite?: boolean) => announcementReactionSchema.parse({
   ...reaction,
diff --git a/src/api/hooks/captcha/useCaptcha.ts b/src/api/hooks/captcha/useCaptcha.ts
index 01b9c9926..d5d9e6339 100644
--- a/src/api/hooks/captcha/useCaptcha.ts
+++ b/src/api/hooks/captcha/useCaptcha.ts
@@ -2,10 +2,12 @@ import { AxiosError } from 'axios';
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { useApi, useAppDispatch, useInstance } from 'soapbox/hooks';
-import { captchaSchema, type CaptchaData } from 'soapbox/schemas/captcha';
-import toast from 'soapbox/toast';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { captchaSchema, type CaptchaData } from 'soapbox/schemas/captcha.ts';
+import toast from 'soapbox/toast.tsx';
 
 
 
diff --git a/src/api/hooks/groups/useBlockGroupMember.ts b/src/api/hooks/groups/useBlockGroupMember.ts
index 5155d18c6..1d10b5b5d 100644
--- a/src/api/hooks/groups/useBlockGroupMember.ts
+++ b/src/api/hooks/groups/useBlockGroupMember.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
 
-import type { Account, Group, GroupMember } from 'soapbox/schemas';
+import type { Account, Group, GroupMember } from 'soapbox/schemas/index.ts';
 
 function useBlockGroupMember(group: Group, account: Account) {
   const { createEntity } = useEntityActions<GroupMember>(
diff --git a/src/api/hooks/groups/useCancelMembershipRequest.ts b/src/api/hooks/groups/useCancelMembershipRequest.ts
index 51c480731..032cb71b6 100644
--- a/src/api/hooks/groups/useCancelMembershipRequest.ts
+++ b/src/api/hooks/groups/useCancelMembershipRequest.ts
@@ -1,8 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi, useOwnAccount } from 'soapbox/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useCancelMembershipRequest(group: Group) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useCreateGroup.ts b/src/api/hooks/groups/useCreateGroup.ts
index e80417856..d354a7a27 100644
--- a/src/api/hooks/groups/useCreateGroup.ts
+++ b/src/api/hooks/groups/useCreateGroup.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
 interface CreateGroupParams {
   display_name?: string;
diff --git a/src/api/hooks/groups/useDeleteGroup.ts b/src/api/hooks/groups/useDeleteGroup.ts
index d1b25cccd..b586e3677 100644
--- a/src/api/hooks/groups/useDeleteGroup.ts
+++ b/src/api/hooks/groups/useDeleteGroup.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useDeleteGroup() {
   const { deleteEntity, isSubmitting } = useEntityActions<Group>(
diff --git a/src/api/hooks/groups/useDeleteGroupStatus.ts b/src/api/hooks/groups/useDeleteGroupStatus.ts
index 55a6f9459..95874dc95 100644
--- a/src/api/hooks/groups/useDeleteGroupStatus.ts
+++ b/src/api/hooks/groups/useDeleteGroupStatus.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useDeleteEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useDeleteEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useDeleteGroupStatus(group: Group, statusId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useDemoteGroupMember.ts b/src/api/hooks/groups/useDemoteGroupMember.ts
index db38164b7..3d6a10e85 100644
--- a/src/api/hooks/groups/useDemoteGroupMember.ts
+++ b/src/api/hooks/groups/useDemoteGroupMember.ts
@@ -1,10 +1,10 @@
 import { z } from 'zod';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { groupMemberSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { groupMemberSchema } from 'soapbox/schemas/index.ts';
 
-import type { Group, GroupMember } from 'soapbox/schemas';
+import type { Group, GroupMember } from 'soapbox/schemas/index.ts';
 
 function useDemoteGroupMember(group: Group, groupMember: GroupMember) {
   const { createEntity } = useEntityActions<GroupMember>(
diff --git a/src/api/hooks/groups/useGroup.test.ts b/src/api/hooks/groups/useGroup.test.ts
index c6df44aab..4212bf7c2 100644
--- a/src/api/hooks/groups/useGroup.test.ts
+++ b/src/api/hooks/groups/useGroup.test.ts
@@ -1,8 +1,10 @@
-import { __stub } from 'soapbox/api';
-import { buildGroup } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { useGroup } from './useGroup';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+
+import { useGroup } from './useGroup.ts';
 
 const group = buildGroup({ id: '1', display_name: 'soapbox' });
 
diff --git a/src/api/hooks/groups/useGroup.ts b/src/api/hooks/groups/useGroup.ts
index 9efafb13c..5da2c4ce5 100644
--- a/src/api/hooks/groups/useGroup.ts
+++ b/src/api/hooks/groups/useGroup.ts
@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { type Group, groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { type Group, groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationship } from './useGroupRelationship';
+import { useGroupRelationship } from './useGroupRelationship.ts';
 
 function useGroup(groupId: string, refetch = true) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupLookup.test.ts b/src/api/hooks/groups/useGroupLookup.test.ts
index 6b659f605..f000540e5 100644
--- a/src/api/hooks/groups/useGroupLookup.test.ts
+++ b/src/api/hooks/groups/useGroupLookup.test.ts
@@ -1,8 +1,10 @@
-import { __stub } from 'soapbox/api';
-import { buildGroup } from 'soapbox/jest/factory';
-import { renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { useGroupLookup } from './useGroupLookup';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers.tsx';
+
+import { useGroupLookup } from './useGroupLookup.ts';
 
 const group = buildGroup({ id: '1', slug: 'soapbox' });
 const state = {
diff --git a/src/api/hooks/groups/useGroupLookup.ts b/src/api/hooks/groups/useGroupLookup.ts
index 8e161af78..f1790c6d2 100644
--- a/src/api/hooks/groups/useGroupLookup.ts
+++ b/src/api/hooks/groups/useGroupLookup.ts
@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityLookup } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { useFeatures } from 'soapbox/hooks/useFeatures';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityLookup } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationship } from './useGroupRelationship';
+import { useGroupRelationship } from './useGroupRelationship.ts';
 
 function useGroupLookup(slug: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupMedia.test.ts b/src/api/hooks/groups/useGroupMedia.test.ts
index c38615c05..88d9cc281 100644
--- a/src/api/hooks/groups/useGroupMedia.test.ts
+++ b/src/api/hooks/groups/useGroupMedia.test.ts
@@ -1,8 +1,10 @@
-import { __stub } from 'soapbox/api';
-import { buildStatus } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { useGroupMedia } from './useGroupMedia';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildStatus } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+
+import { useGroupMedia } from './useGroupMedia.ts';
 
 const status = buildStatus();
 const groupId = '1';
diff --git a/src/api/hooks/groups/useGroupMedia.ts b/src/api/hooks/groups/useGroupMedia.ts
index 4db7fd179..5c2f6bd88 100644
--- a/src/api/hooks/groups/useGroupMedia.ts
+++ b/src/api/hooks/groups/useGroupMedia.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { normalizeStatus } from 'soapbox/normalizers';
-import { toSchema } from 'soapbox/utils/normalizers';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { toSchema } from 'soapbox/utils/normalizers.ts';
 
 const statusSchema = toSchema(normalizeStatus);
 
diff --git a/src/api/hooks/groups/useGroupMembers.test.ts b/src/api/hooks/groups/useGroupMembers.test.ts
index d82133423..02971b2cb 100644
--- a/src/api/hooks/groups/useGroupMembers.test.ts
+++ b/src/api/hooks/groups/useGroupMembers.test.ts
@@ -1,9 +1,11 @@
-import { __stub } from 'soapbox/api';
-import { buildGroupMember } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { useGroupMembers } from './useGroupMembers';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroupMember } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+
+import { useGroupMembers } from './useGroupMembers.ts';
 
 const groupMember = buildGroupMember();
 const groupId = '1';
diff --git a/src/api/hooks/groups/useGroupMembers.ts b/src/api/hooks/groups/useGroupMembers.ts
index a9b03e7f2..74a7d5f9b 100644
--- a/src/api/hooks/groups/useGroupMembers.ts
+++ b/src/api/hooks/groups/useGroupMembers.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { GroupMember, groupMemberSchema } from 'soapbox/schemas';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { GroupMember, groupMemberSchema } from 'soapbox/schemas/index.ts';
 
-import { useApi } from '../../../hooks/useApi';
+import { useApi } from '../../../hooks/useApi.ts';
 
 function useGroupMembers(groupId: string, role: GroupRoles) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupMembershipRequests.ts b/src/api/hooks/groups/useGroupMembershipRequests.ts
index f175b21da..073dfb600 100644
--- a/src/api/hooks/groups/useGroupMembershipRequests.ts
+++ b/src/api/hooks/groups/useGroupMembershipRequests.ts
@@ -1,12 +1,12 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useDismissEntity, useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { accountSchema } from 'soapbox/schemas';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useDismissEntity, useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { accountSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationship } from './useGroupRelationship';
+import { useGroupRelationship } from './useGroupRelationship.ts';
 
-import type { ExpandedEntitiesPath } from 'soapbox/entity-store/hooks/types';
+import type { ExpandedEntitiesPath } from 'soapbox/entity-store/hooks/types.ts';
 
 function useGroupMembershipRequests(groupId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupMutes.ts b/src/api/hooks/groups/useGroupMutes.ts
index 67eca0772..13120197c 100644
--- a/src/api/hooks/groups/useGroupMutes.ts
+++ b/src/api/hooks/groups/useGroupMutes.ts
@@ -1,10 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useFeatures } from 'soapbox/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useGroupMutes() {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupRelationship.ts b/src/api/hooks/groups/useGroupRelationship.ts
index 95193b865..242343674 100644
--- a/src/api/hooks/groups/useGroupRelationship.ts
+++ b/src/api/hooks/groups/useGroupRelationship.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupRelationship(groupId: string | undefined) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupRelationships.ts b/src/api/hooks/groups/useGroupRelationships.ts
index 902d0473f..2d2dd0321 100644
--- a/src/api/hooks/groups/useGroupRelationships.ts
+++ b/src/api/hooks/groups/useGroupRelationships.ts
@@ -1,7 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities';
-import { useApi, useLoggedIn } from 'soapbox/hooks';
-import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useBatchedEntities } from 'soapbox/entity-store/hooks/useBatchedEntities.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupRelationships(listKey: string[], ids: string[]) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupSearch.ts b/src/api/hooks/groups/useGroupSearch.ts
index 946e208bb..6410d902c 100644
--- a/src/api/hooks/groups/useGroupSearch.ts
+++ b/src/api/hooks/groups/useGroupSearch.ts
@@ -1,11 +1,12 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures } from 'soapbox/hooks';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useGroupSearch(search: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupTag.ts b/src/api/hooks/groups/useGroupTag.ts
index d0e63d74d..7ed7ac6a1 100644
--- a/src/api/hooks/groups/useGroupTag.ts
+++ b/src/api/hooks/groups/useGroupTag.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { type GroupTag, groupTagSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { type GroupTag, groupTagSchema } from 'soapbox/schemas/index.ts';
 
 function useGroupTag(tagId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupTags.ts b/src/api/hooks/groups/useGroupTags.ts
index b2c29aa3c..3b4846f08 100644
--- a/src/api/hooks/groups/useGroupTags.ts
+++ b/src/api/hooks/groups/useGroupTags.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { groupTagSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { groupTagSchema } from 'soapbox/schemas/index.ts';
 
-import type { GroupTag } from 'soapbox/schemas';
+import type { GroupTag } from 'soapbox/schemas/index.ts';
 
 function useGroupTags(groupId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupValidation.ts b/src/api/hooks/groups/useGroupValidation.ts
index 1b008b0b1..40b51c99a 100644
--- a/src/api/hooks/groups/useGroupValidation.ts
+++ b/src/api/hooks/groups/useGroupValidation.ts
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useApi } from 'soapbox/hooks/useApi';
-import { useFeatures } from 'soapbox/hooks/useFeatures';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 type Validation = {
   error: string;
diff --git a/src/api/hooks/groups/useGroups.test.ts b/src/api/hooks/groups/useGroups.test.ts
index c29d6eb09..8a91db69c 100644
--- a/src/api/hooks/groups/useGroups.test.ts
+++ b/src/api/hooks/groups/useGroups.test.ts
@@ -1,9 +1,11 @@
-import { __stub } from 'soapbox/api';
-import { buildGroup } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { useGroups } from './useGroups';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
+
+import { useGroups } from './useGroups.ts';
 
 const group = buildGroup({ id: '1', display_name: 'soapbox' });
 const store = {
diff --git a/src/api/hooks/groups/useGroups.ts b/src/api/hooks/groups/useGroups.ts
index eb5b4161f..412334290 100644
--- a/src/api/hooks/groups/useGroups.ts
+++ b/src/api/hooks/groups/useGroups.ts
@@ -1,10 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { useFeatures } from 'soapbox/hooks/useFeatures';
-import { groupSchema, type Group } from 'soapbox/schemas/group';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { groupSchema, type Group } from 'soapbox/schemas/group.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
 function useGroups(q: string = '') {
   const api = useApi();
diff --git a/src/api/hooks/groups/useGroupsFromTag.ts b/src/api/hooks/groups/useGroupsFromTag.ts
index 6c2b88bb1..f3229b799 100644
--- a/src/api/hooks/groups/useGroupsFromTag.ts
+++ b/src/api/hooks/groups/useGroupsFromTag.ts
@@ -1,11 +1,12 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures } from 'soapbox/hooks';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 function useGroupsFromTag(tagId: string) {
   const api = useApi();
diff --git a/src/api/hooks/groups/useJoinGroup.ts b/src/api/hooks/groups/useJoinGroup.ts
index 0ea9293d9..4d1cf23ed 100644
--- a/src/api/hooks/groups/useJoinGroup.ts
+++ b/src/api/hooks/groups/useJoinGroup.ts
@@ -1,10 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroups } from './useGroups';
+import { useGroups } from './useGroups.ts';
 
-import type { Group, GroupRelationship } from 'soapbox/schemas';
+import type { Group, GroupRelationship } from 'soapbox/schemas/index.ts';
 
 function useJoinGroup(group: Group) {
   const { invalidate } = useGroups();
diff --git a/src/api/hooks/groups/useLeaveGroup.ts b/src/api/hooks/groups/useLeaveGroup.ts
index e1b11e737..5ff009547 100644
--- a/src/api/hooks/groups/useLeaveGroup.ts
+++ b/src/api/hooks/groups/useLeaveGroup.ts
@@ -1,10 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroups } from './useGroups';
+import { useGroups } from './useGroups.ts';
 
-import type { Group, GroupRelationship } from 'soapbox/schemas';
+import type { Group, GroupRelationship } from 'soapbox/schemas/index.ts';
 
 function useLeaveGroup(group: Group) {
   const { invalidate } = useGroups();
diff --git a/src/api/hooks/groups/useMuteGroup.ts b/src/api/hooks/groups/useMuteGroup.ts
index e31c7f4d1..1bef33e83 100644
--- a/src/api/hooks/groups/useMuteGroup.ts
+++ b/src/api/hooks/groups/useMuteGroup.ts
@@ -1,6 +1,6 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { type Group, groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { type Group, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useMuteGroup(group?: Group) {
   const { createEntity, isSubmitting } = useEntityActions(
diff --git a/src/api/hooks/groups/usePendingGroups.test.ts b/src/api/hooks/groups/usePendingGroups.test.ts
index a590360c3..1a380f459 100644
--- a/src/api/hooks/groups/usePendingGroups.test.ts
+++ b/src/api/hooks/groups/usePendingGroups.test.ts
@@ -1,10 +1,12 @@
-import { __stub } from 'soapbox/api';
-import { Entities } from 'soapbox/entity-store/entities';
-import { buildAccount, buildGroup } from 'soapbox/jest/factory';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { usePendingGroups } from './usePendingGroups';
+import { __stub } from 'soapbox/api/index.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { buildAccount, buildGroup } from 'soapbox/jest/factory.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
+
+import { usePendingGroups } from './usePendingGroups.ts';
 
 const id = '1';
 const group = buildGroup({ id, display_name: 'soapbox' });
diff --git a/src/api/hooks/groups/usePendingGroups.ts b/src/api/hooks/groups/usePendingGroups.ts
index be5d8c400..5d4f30111 100644
--- a/src/api/hooks/groups/usePendingGroups.ts
+++ b/src/api/hooks/groups/usePendingGroups.ts
@@ -1,7 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import { Group, groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { Group, groupSchema } from 'soapbox/schemas/index.ts';
 
 function usePendingGroups() {
   const api = useApi();
diff --git a/src/api/hooks/groups/usePopularGroups.ts b/src/api/hooks/groups/usePopularGroups.ts
index 69b04e32f..57dde7cfa 100644
--- a/src/api/hooks/groups/usePopularGroups.ts
+++ b/src/api/hooks/groups/usePopularGroups.ts
@@ -1,11 +1,11 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { Group, groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { Group, groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useApi } from '../../../hooks/useApi';
-import { useFeatures } from '../../../hooks/useFeatures';
+import { useApi } from '../../../hooks/useApi.ts';
+import { useFeatures } from '../../../hooks/useFeatures.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
 function usePopularGroups() {
   const api = useApi();
diff --git a/src/api/hooks/groups/usePopularTags.ts b/src/api/hooks/groups/usePopularTags.ts
index e0ec2c550..a3d4fb617 100644
--- a/src/api/hooks/groups/usePopularTags.ts
+++ b/src/api/hooks/groups/usePopularTags.ts
@@ -1,7 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures } from 'soapbox/hooks';
-import { type GroupTag, groupTagSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { type GroupTag, groupTagSchema } from 'soapbox/schemas/index.ts';
 
 function usePopularTags() {
   const api = useApi();
diff --git a/src/api/hooks/groups/usePromoteGroupMember.ts b/src/api/hooks/groups/usePromoteGroupMember.ts
index 3d23dda62..36b09a6f9 100644
--- a/src/api/hooks/groups/usePromoteGroupMember.ts
+++ b/src/api/hooks/groups/usePromoteGroupMember.ts
@@ -1,10 +1,10 @@
 import { z } from 'zod';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { groupMemberSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { groupMemberSchema } from 'soapbox/schemas/index.ts';
 
-import type { Group, GroupMember } from 'soapbox/schemas';
+import type { Group, GroupMember } from 'soapbox/schemas/index.ts';
 
 function usePromoteGroupMember(group: Group, groupMember: GroupMember) {
   const { createEntity } = useEntityActions<GroupMember>(
diff --git a/src/api/hooks/groups/useSuggestedGroups.ts b/src/api/hooks/groups/useSuggestedGroups.ts
index 69fb71065..de0a64525 100644
--- a/src/api/hooks/groups/useSuggestedGroups.ts
+++ b/src/api/hooks/groups/useSuggestedGroups.ts
@@ -1,9 +1,10 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi, useFeatures } from 'soapbox/hooks';
-import { type Group, groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { type Group, groupSchema } from 'soapbox/schemas/index.ts';
 
-import { useGroupRelationships } from './useGroupRelationships';
+import { useGroupRelationships } from './useGroupRelationships.ts';
 
 function useSuggestedGroups() {
   const api = useApi();
diff --git a/src/api/hooks/groups/useUnmuteGroup.ts b/src/api/hooks/groups/useUnmuteGroup.ts
index 6c8768d25..9402b4a65 100644
--- a/src/api/hooks/groups/useUnmuteGroup.ts
+++ b/src/api/hooks/groups/useUnmuteGroup.ts
@@ -1,6 +1,6 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
-import { type Group, groupRelationshipSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
+import { type Group, groupRelationshipSchema } from 'soapbox/schemas/index.ts';
 
 function useUnmuteGroup(group?: Group) {
   const { createEntity, isSubmitting } = useEntityActions(
diff --git a/src/api/hooks/groups/useUpdateGroup.ts b/src/api/hooks/groups/useUpdateGroup.ts
index 129849514..da660e735 100644
--- a/src/api/hooks/groups/useUpdateGroup.ts
+++ b/src/api/hooks/groups/useUpdateGroup.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks/useApi';
-import { groupSchema } from 'soapbox/schemas';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { groupSchema } from 'soapbox/schemas/index.ts';
 
 interface UpdateGroupParams {
   display_name?: string;
diff --git a/src/api/hooks/groups/useUpdateGroupTag.ts b/src/api/hooks/groups/useUpdateGroupTag.ts
index 1c68c714d..203b4f4ca 100644
--- a/src/api/hooks/groups/useUpdateGroupTag.ts
+++ b/src/api/hooks/groups/useUpdateGroupTag.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
 
-import type { GroupTag } from 'soapbox/schemas';
+import type { GroupTag } from 'soapbox/schemas/index.ts';
 
 function useUpdateGroupTag(groupId: string, tagId: string) {
   const { updateEntity, ...rest } = useEntityActions<GroupTag>(
diff --git a/src/api/hooks/index.ts b/src/api/hooks/index.ts
index f085f3c4b..e5044ab74 100644
--- a/src/api/hooks/index.ts
+++ b/src/api/hooks/index.ts
@@ -1,62 +1,61 @@
-
 // Accounts
-export { useAccount } from './accounts/useAccount';
-export { useAccountLookup } from './accounts/useAccountLookup';
+export { useAccount } from './accounts/useAccount.ts';
+export { useAccountLookup } from './accounts/useAccountLookup.ts';
 export {
   useBlocks,
   useMutes,
   useFollowers,
   useFollowing,
-} from './accounts/useAccountList';
-export { useFollow } from './accounts/useFollow';
-export { useRelationships } from './accounts/useRelationships';
-export { usePatronUser } from './accounts/usePatronUser';
+} from './accounts/useAccountList.ts';
+export { useFollow } from './accounts/useFollow.ts';
+export { useRelationships } from './accounts/useRelationships.ts';
+export { usePatronUser } from './accounts/usePatronUser.ts';
 
 // Groups
-export { useBlockGroupMember } from './groups/useBlockGroupMember';
-export { useCancelMembershipRequest } from './groups/useCancelMembershipRequest';
-export { useCreateGroup, type CreateGroupParams } from './groups/useCreateGroup';
-export { useDeleteGroup } from './groups/useDeleteGroup';
-export { useDemoteGroupMember } from './groups/useDemoteGroupMember';
-export { useGroup } from './groups/useGroup';
-export { useGroupLookup } from './groups/useGroupLookup';
-export { useGroupMedia } from './groups/useGroupMedia';
-export { useGroupMembers } from './groups/useGroupMembers';
-export { useGroupMembershipRequests } from './groups/useGroupMembershipRequests';
-export { useGroupMutes } from './groups/useGroupMutes';
-export { useGroupRelationship } from './groups/useGroupRelationship';
-export { useGroupRelationships } from './groups/useGroupRelationships';
-export { useGroupSearch } from './groups/useGroupSearch';
-export { useGroupTag } from './groups/useGroupTag';
-export { useGroupTags } from './groups/useGroupTags';
-export { useGroupValidation } from './groups/useGroupValidation';
-export { useGroups } from './groups/useGroups';
-export { useGroupsFromTag } from './groups/useGroupsFromTag';
-export { useJoinGroup } from './groups/useJoinGroup';
-export { useMuteGroup } from './groups/useMuteGroup';
-export { useLeaveGroup } from './groups/useLeaveGroup';
-export { usePendingGroups } from './groups/usePendingGroups';
-export { usePopularGroups } from './groups/usePopularGroups';
-export { usePopularTags } from './groups/usePopularTags';
-export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
-export { useSuggestedGroups } from './groups/useSuggestedGroups';
-export { useUnmuteGroup } from './groups/useUnmuteGroup';
-export { useUpdateGroup } from './groups/useUpdateGroup';
-export { useUpdateGroupTag } from './groups/useUpdateGroupTag';
+export { useBlockGroupMember } from './groups/useBlockGroupMember.ts';
+export { useCancelMembershipRequest } from './groups/useCancelMembershipRequest.ts';
+export { useCreateGroup, type CreateGroupParams } from './groups/useCreateGroup.ts';
+export { useDeleteGroup } from './groups/useDeleteGroup.ts';
+export { useDemoteGroupMember } from './groups/useDemoteGroupMember.ts';
+export { useGroup } from './groups/useGroup.ts';
+export { useGroupLookup } from './groups/useGroupLookup.ts';
+export { useGroupMedia } from './groups/useGroupMedia.ts';
+export { useGroupMembers } from './groups/useGroupMembers.ts';
+export { useGroupMembershipRequests } from './groups/useGroupMembershipRequests.ts';
+export { useGroupMutes } from './groups/useGroupMutes.ts';
+export { useGroupRelationship } from './groups/useGroupRelationship.ts';
+export { useGroupRelationships } from './groups/useGroupRelationships.ts';
+export { useGroupSearch } from './groups/useGroupSearch.ts';
+export { useGroupTag } from './groups/useGroupTag.ts';
+export { useGroupTags } from './groups/useGroupTags.ts';
+export { useGroupValidation } from './groups/useGroupValidation.ts';
+export { useGroups } from './groups/useGroups.ts';
+export { useGroupsFromTag } from './groups/useGroupsFromTag.ts';
+export { useJoinGroup } from './groups/useJoinGroup.ts';
+export { useMuteGroup } from './groups/useMuteGroup.ts';
+export { useLeaveGroup } from './groups/useLeaveGroup.ts';
+export { usePendingGroups } from './groups/usePendingGroups.ts';
+export { usePopularGroups } from './groups/usePopularGroups.ts';
+export { usePopularTags } from './groups/usePopularTags.ts';
+export { usePromoteGroupMember } from './groups/usePromoteGroupMember.ts';
+export { useSuggestedGroups } from './groups/useSuggestedGroups.ts';
+export { useUnmuteGroup } from './groups/useUnmuteGroup.ts';
+export { useUpdateGroup } from './groups/useUpdateGroup.ts';
+export { useUpdateGroupTag } from './groups/useUpdateGroupTag.ts';
 
 // Statuses
-export { useBookmarkFolders } from './statuses/useBookmarkFolders';
-export { useBookmarkFolder } from './statuses/useBookmarkFolder';
-export { useCreateBookmarkFolder } from './statuses/useCreateBookmarkFolder';
-export { useDeleteBookmarkFolder } from './statuses/useDeleteBookmarkFolder';
-export { useUpdateBookmarkFolder } from './statuses/useUpdateBookmarkFolder';
+export { useBookmarkFolders } from './statuses/useBookmarkFolders.ts';
+export { useBookmarkFolder } from './statuses/useBookmarkFolder.ts';
+export { useCreateBookmarkFolder } from './statuses/useCreateBookmarkFolder.ts';
+export { useDeleteBookmarkFolder } from './statuses/useDeleteBookmarkFolder.ts';
+export { useUpdateBookmarkFolder } from './statuses/useUpdateBookmarkFolder.ts';
 
 // Streaming
-export { useUserStream } from './streaming/useUserStream';
-export { useCommunityStream } from './streaming/useCommunityStream';
-export { usePublicStream } from './streaming/usePublicStream';
-export { useDirectStream } from './streaming/useDirectStream';
-export { useHashtagStream } from './streaming/useHashtagStream';
-export { useListStream } from './streaming/useListStream';
-export { useGroupStream } from './streaming/useGroupStream';
-export { useRemoteStream } from './streaming/useRemoteStream';
+export { useUserStream } from './streaming/useUserStream.ts';
+export { useCommunityStream } from './streaming/useCommunityStream.ts';
+export { usePublicStream } from './streaming/usePublicStream.ts';
+export { useDirectStream } from './streaming/useDirectStream.ts';
+export { useHashtagStream } from './streaming/useHashtagStream.ts';
+export { useListStream } from './streaming/useListStream.ts';
+export { useGroupStream } from './streaming/useGroupStream.ts';
+export { useRemoteStream } from './streaming/useRemoteStream.ts';
diff --git a/src/api/hooks/instance/useInstanceV1.ts b/src/api/hooks/instance/useInstanceV1.ts
index c1e802156..1aef6cd29 100644
--- a/src/api/hooks/instance/useInstanceV1.ts
+++ b/src/api/hooks/instance/useInstanceV1.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { InstanceV1, instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
 interface Opts {
   /** The base URL of the instance. */
diff --git a/src/api/hooks/instance/useInstanceV2.ts b/src/api/hooks/instance/useInstanceV2.ts
index 25b1de014..8c0518318 100644
--- a/src/api/hooks/instance/useInstanceV2.ts
+++ b/src/api/hooks/instance/useInstanceV2.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance.ts';
 
 interface Opts {
   /** The base URL of the instance. */
diff --git a/src/api/hooks/statuses/useBookmarkFolder.ts b/src/api/hooks/statuses/useBookmarkFolder.ts
index f81d9e7d1..4706a1550 100644
--- a/src/api/hooks/statuses/useBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useBookmarkFolder.ts
@@ -1,9 +1,9 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { selectEntity } from 'soapbox/entity-store/selectors';
-import { useAppSelector } from 'soapbox/hooks';
-import { type BookmarkFolder } from 'soapbox/schemas/bookmark-folder';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { selectEntity } from 'soapbox/entity-store/selectors.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { type BookmarkFolder } from 'soapbox/schemas/bookmark-folder.ts';
 
-import { useBookmarkFolders } from './useBookmarkFolders';
+import { useBookmarkFolders } from './useBookmarkFolders.ts';
 
 function useBookmarkFolder(folderId?: string) {
   const {
diff --git a/src/api/hooks/statuses/useBookmarkFolders.ts b/src/api/hooks/statuses/useBookmarkFolders.ts
index 77538a97a..5b307f46c 100644
--- a/src/api/hooks/statuses/useBookmarkFolders.ts
+++ b/src/api/hooks/statuses/useBookmarkFolders.ts
@@ -1,8 +1,8 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntities } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { useFeatures } from 'soapbox/hooks/useFeatures';
-import { bookmarkFolderSchema, type BookmarkFolder } from 'soapbox/schemas/bookmark-folder';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntities } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { bookmarkFolderSchema, type BookmarkFolder } from 'soapbox/schemas/bookmark-folder.ts';
 
 function useBookmarkFolders() {
   const api = useApi();
diff --git a/src/api/hooks/statuses/useCreateBookmarkFolder.ts b/src/api/hooks/statuses/useCreateBookmarkFolder.ts
index ded24ff97..b80303c0b 100644
--- a/src/api/hooks/statuses/useCreateBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useCreateBookmarkFolder.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder.ts';
 
 interface CreateBookmarkFolderParams {
   name: string;
diff --git a/src/api/hooks/statuses/useDeleteBookmarkFolder.ts b/src/api/hooks/statuses/useDeleteBookmarkFolder.ts
index cd8018c2d..cbfacd830 100644
--- a/src/api/hooks/statuses/useDeleteBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useDeleteBookmarkFolder.ts
@@ -1,5 +1,5 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useEntityActions } from 'soapbox/entity-store/hooks';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useEntityActions } from 'soapbox/entity-store/hooks/index.ts';
 
 function useDeleteBookmarkFolder() {
   const { deleteEntity, isSubmitting } = useEntityActions(
diff --git a/src/api/hooks/statuses/useUpdateBookmarkFolder.ts b/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
index 2e023b04b..254d098a6 100644
--- a/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
+++ b/src/api/hooks/statuses/useUpdateBookmarkFolder.ts
@@ -1,7 +1,7 @@
-import { Entities } from 'soapbox/entity-store/entities';
-import { useCreateEntity } from 'soapbox/entity-store/hooks';
-import { useApi } from 'soapbox/hooks';
-import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useCreateEntity } from 'soapbox/entity-store/hooks/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { bookmarkFolderSchema } from 'soapbox/schemas/bookmark-folder.ts';
 
 interface UpdateBookmarkFolderParams {
   name: string;
diff --git a/src/api/hooks/streaming/useCommunityStream.ts b/src/api/hooks/streaming/useCommunityStream.ts
index ce00d4674..0ee8b3335 100644
--- a/src/api/hooks/streaming/useCommunityStream.ts
+++ b/src/api/hooks/streaming/useCommunityStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 interface UseCommunityStreamOpts {
   onlyMedia?: boolean;
diff --git a/src/api/hooks/streaming/useDirectStream.ts b/src/api/hooks/streaming/useDirectStream.ts
index 972a5f769..cf343a09b 100644
--- a/src/api/hooks/streaming/useDirectStream.ts
+++ b/src/api/hooks/streaming/useDirectStream.ts
@@ -1,6 +1,6 @@
-import { useLoggedIn } from 'soapbox/hooks/useLoggedIn';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 function useDirectStream() {
   const { isLoggedIn } = useLoggedIn();
diff --git a/src/api/hooks/streaming/useGroupStream.ts b/src/api/hooks/streaming/useGroupStream.ts
index f9db3f69e..796953748 100644
--- a/src/api/hooks/streaming/useGroupStream.ts
+++ b/src/api/hooks/streaming/useGroupStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 function useGroupStream(groupId: string) {
   return useTimelineStream(
diff --git a/src/api/hooks/streaming/useHashtagStream.ts b/src/api/hooks/streaming/useHashtagStream.ts
index 4f9483bad..788b3f3fd 100644
--- a/src/api/hooks/streaming/useHashtagStream.ts
+++ b/src/api/hooks/streaming/useHashtagStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 function useHashtagStream(tag: string) {
   return useTimelineStream(
diff --git a/src/api/hooks/streaming/useListStream.ts b/src/api/hooks/streaming/useListStream.ts
index 661bdce4f..e6808ffd8 100644
--- a/src/api/hooks/streaming/useListStream.ts
+++ b/src/api/hooks/streaming/useListStream.ts
@@ -1,6 +1,6 @@
-import { useLoggedIn } from 'soapbox/hooks';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 function useListStream(listId: string) {
   const { isLoggedIn } = useLoggedIn();
diff --git a/src/api/hooks/streaming/usePublicStream.ts b/src/api/hooks/streaming/usePublicStream.ts
index 81c25bde4..cfc9e63af 100644
--- a/src/api/hooks/streaming/usePublicStream.ts
+++ b/src/api/hooks/streaming/usePublicStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 interface UsePublicStreamOpts {
   onlyMedia?: boolean;
diff --git a/src/api/hooks/streaming/useRemoteStream.ts b/src/api/hooks/streaming/useRemoteStream.ts
index 6de560163..53fa36358 100644
--- a/src/api/hooks/streaming/useRemoteStream.ts
+++ b/src/api/hooks/streaming/useRemoteStream.ts
@@ -1,4 +1,4 @@
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
 interface UseRemoteStreamOpts {
   instance: string;
diff --git a/src/api/hooks/streaming/useTimelineStream.ts b/src/api/hooks/streaming/useTimelineStream.ts
index 97328f7ae..28aedbecf 100644
--- a/src/api/hooks/streaming/useTimelineStream.ts
+++ b/src/api/hooks/streaming/useTimelineStream.ts
@@ -1,8 +1,10 @@
 import { useEffect, useRef } from 'react';
 
-import { connectTimelineStream } from 'soapbox/actions/streaming';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
-import { getAccessToken } from 'soapbox/utils/auth';
+import { connectTimelineStream } from 'soapbox/actions/streaming.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { getAccessToken } from 'soapbox/utils/auth.ts';
 
 function useTimelineStream(...args: Parameters<typeof connectTimelineStream>) {
   // TODO: get rid of streaming.ts and move the actual opts here.
diff --git a/src/api/hooks/streaming/useUserStream.ts b/src/api/hooks/streaming/useUserStream.ts
index f068b3c1c..1030403d2 100644
--- a/src/api/hooks/streaming/useUserStream.ts
+++ b/src/api/hooks/streaming/useUserStream.ts
@@ -1,11 +1,11 @@
-import { expandNotifications } from 'soapbox/actions/notifications';
-import { expandHomeTimeline } from 'soapbox/actions/timelines';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useLoggedIn } from 'soapbox/hooks';
+import { expandNotifications } from 'soapbox/actions/notifications.ts';
+import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 
-import { useTimelineStream } from './useTimelineStream';
+import { useTimelineStream } from './useTimelineStream.ts';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 function useUserStream() {
   const { isLoggedIn } = useLoggedIn();
diff --git a/src/api/hooks/zap-split/useZapSplit.ts b/src/api/hooks/zap-split/useZapSplit.ts
index 2790a0129..773932d86 100644
--- a/src/api/hooks/zap-split/useZapSplit.ts
+++ b/src/api/hooks/zap-split/useZapSplit.ts
@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 
-import { useApi } from 'soapbox/hooks';
-import { baseZapAccountSchema, type ZapSplitData } from 'soapbox/schemas/zap-split';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { baseZapAccountSchema, type ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
-import type { Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
+import type { Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities.ts';
 
 interface SplitValue {
   id: string;
@@ -94,4 +94,4 @@ const useZapSplit = (status: StatusEntity | undefined, account: AccountEntity) =
 };
 
 export default useZapSplit;
-export { SplitValue };
\ No newline at end of file
+export type { SplitValue };
\ No newline at end of file
diff --git a/src/api/index.ts b/src/api/index.ts
index 3e5f637a7..7a7e9aeaf 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -8,10 +8,10 @@ import axios, { type AxiosInstance, type AxiosResponse } from 'axios';
 import LinkHeader from 'http-link-header';
 import { createSelector } from 'reselect';
 
-import * as BuildConfig from 'soapbox/build-config';
-import { selectAccount } from 'soapbox/selectors';
-import { RootState } from 'soapbox/store';
-import { getAccessToken, getAppToken, isURL, parseBaseURL } from 'soapbox/utils/auth';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { RootState } from 'soapbox/store.ts';
+import { getAccessToken, getAppToken, isURL, parseBaseURL } from 'soapbox/utils/auth.ts';
 
 import type MockAdapter from 'axios-mock-adapter';
 
diff --git a/src/assets/cryptocurrency/doge.svg b/src/assets/cryptocurrency/doge.svg
new file mode 100644
index 000000000..c22bf09bd
--- /dev/null
+++ b/src/assets/cryptocurrency/doge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" r="16" fill="#C3A634"/><path fill="#FFF" d="M13.248 14.61h4.314v2.286h-4.314v4.818h2.721c1.077 0 1.958-.145 2.644-.437.686-.291 1.224-.694 1.615-1.21a4.4 4.4 0 00.796-1.815 11.4 11.4 0 00.21-2.252 11.4 11.4 0 00-.21-2.252 4.396 4.396 0 00-.796-1.815c-.391-.516-.93-.919-1.615-1.21-.686-.292-1.567-.437-2.644-.437h-2.721v4.325zm-2.766 2.286H9v-2.285h1.482V8h6.549c1.21 0 2.257.21 3.142.627.885.419 1.607.99 2.168 1.715.56.724.977 1.572 1.25 2.543.273.971.409 2.01.409 3.115a11.47 11.47 0 01-.41 3.115c-.272.97-.689 1.819-1.25 2.543-.56.725-1.282 1.296-2.167 1.715-.885.418-1.933.627-3.142.627h-6.549v-7.104z"/></g></svg>
\ No newline at end of file
diff --git a/src/build-config.ts b/src/build-config.ts
index c742a1212..d8799de7e 100644
--- a/src/build-config.ts
+++ b/src/build-config.ts
@@ -1,4 +1,4 @@
-import type { SoapboxEnv } from './build-config-compiletime';
+import type { SoapboxEnv } from './build-config-compiletime.ts';
 
 export const {
   NODE_ENV,
diff --git a/src/components/__mocks__/react-inlinesvg.tsx b/src/components/__mocks__/react-inlinesvg.tsx
index f9a7cd892..7b288a7fb 100644
--- a/src/components/__mocks__/react-inlinesvg.tsx
+++ b/src/components/__mocks__/react-inlinesvg.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface IInlineSVG {
   loader?: JSX.Element;
 }
diff --git a/src/components/account-search.tsx b/src/components/account-search.tsx
index cec7fc8f8..2ed4f3723 100644
--- a/src/components/account-search.tsx
+++ b/src/components/account-search.tsx
@@ -1,10 +1,12 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
+import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
 
-import SvgIcon from './ui/icon/svg-icon';
+import SvgIcon from './ui/svg-icon.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
@@ -76,12 +78,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/outline/search.svg')}
+            src={searchIcon}
             className={clsx('size-4 text-gray-400', { hidden: !isEmpty() })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-400', { hidden: isEmpty() })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/components/account.test.tsx b/src/components/account.test.tsx
index 306ff21a8..69f984831 100644
--- a/src/components/account.test.tsx
+++ b/src/components/account.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Account from './account';
+import Account from './account.tsx';
 
 describe('<Account />', () => {
   it('renders account name and username', () => {
diff --git a/src/components/account.tsx b/src/components/account.tsx
index a9eb9a546..4dba320de 100644
--- a/src/components/account.tsx
+++ b/src/components/account.tsx
@@ -1,20 +1,27 @@
-import React, { useRef, useState } from 'react';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import { useAppSelector } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
-import { displayFqn } from 'soapbox/utils/state';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { getAcct } from 'soapbox/utils/accounts.ts';
+import { displayFqn } from 'soapbox/utils/state.ts';
 
-import Badge from './badge';
-import RelativeTimestamp from './relative-timestamp';
-import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
+import Badge from './badge.tsx';
+import RelativeTimestamp from './relative-timestamp.tsx';
 
-import type { StatusApprovalStatus } from 'soapbox/normalizers/status';
-import type { Account as AccountSchema } from 'soapbox/schemas';
+import type { StatusApprovalStatus } from 'soapbox/normalizers/status.ts';
+import type { Account as AccountSchema } from 'soapbox/schemas/index.ts';
 
 interface IInstanceFavicon {
   account: AccountSchema;
@@ -275,7 +282,7 @@ const Account = ({
                   <>
                     <Text tag='span' theme='muted' size='sm'>&middot;</Text> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
 
-                    <Icon className='size-5 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
+                    <Icon className='size-5 text-gray-700 dark:text-gray-600' src={pencilIcon} />
                   </>
                 ) : null}
 
diff --git a/src/components/animated-number.tsx b/src/components/animated-number.tsx
index ea5a82411..42edcf5e3 100644
--- a/src/components/animated-number.tsx
+++ b/src/components/animated-number.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedNumber } from 'react-intl';
 import { TransitionMotion, spring } from 'react-motion';
 
-import { useSettings } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 const obfuscatedCount = (count: number) => {
   if (count < 0) {
diff --git a/src/components/announcements/announcement-content.tsx b/src/components/announcements/announcement-content.tsx
index 07908c9b9..92dfb605f 100644
--- a/src/components/announcements/announcement-content.tsx
+++ b/src/components/announcements/announcement-content.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { getTextDirection } from 'soapbox/utils/rtl';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/schemas';
+import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/schemas/index.ts';
 
 interface IAnnouncementContent {
   announcement: AnnouncementEntity;
diff --git a/src/components/announcements/announcement.tsx b/src/components/announcements/announcement.tsx
index 0bacdd60c..35aa9f4f1 100644
--- a/src/components/announcements/announcement.tsx
+++ b/src/components/announcements/announcement.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
 import { FormattedDate } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import AnnouncementContent from './announcement-content';
-import ReactionsBar from './reactions-bar';
+import AnnouncementContent from './announcement-content.tsx';
+import ReactionsBar from './reactions-bar.tsx';
 
 import type { Map as ImmutableMap } from 'immutable';
-import type { Announcement as AnnouncementEntity } from 'soapbox/schemas';
+import type { Announcement as AnnouncementEntity } from 'soapbox/schemas/index.ts';
 
 interface IAnnouncement {
   announcement: AnnouncementEntity;
diff --git a/src/components/announcements/announcements-panel.tsx b/src/components/announcements/announcements-panel.tsx
index 966df4479..5d6cb66e2 100644
--- a/src/components/announcements/announcements-panel.tsx
+++ b/src/components/announcements/announcements-panel.tsx
@@ -1,17 +1,19 @@
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactSwipeableViews from 'react-swipeable-views';
 import { createSelector } from 'reselect';
 
-import { useAnnouncements } from 'soapbox/api/hooks/announcements';
-import { Card, HStack, Widget } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import Announcement from './announcement';
+import Announcement from './announcement.tsx';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const customEmojiMap = createSelector([(state: RootState) => state.custom_emojis], items => (items as ImmutableList<ImmutableMap<string, string>>).reduce((map, emoji) => map.set(emoji.get('shortcode')!, emoji), ImmutableMap<string, ImmutableMap<string, string>>()));
 
diff --git a/src/components/announcements/emoji.tsx b/src/components/announcements/emoji.tsx
index 1f6f8ed18..927278484 100644
--- a/src/components/announcements/emoji.tsx
+++ b/src/components/announcements/emoji.tsx
@@ -1,8 +1,6 @@
-import React from 'react';
-
-import unicodeMapping from 'soapbox/features/emoji/mapping';
-import { useSettings } from 'soapbox/hooks';
-import { joinPublicPath } from 'soapbox/utils/static';
+import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import type { Map as ImmutableMap } from 'immutable';
 
diff --git a/src/components/announcements/reaction.tsx b/src/components/announcements/reaction.tsx
index 2bfdb8120..ad9c0704e 100644
--- a/src/components/announcements/reaction.tsx
+++ b/src/components/announcements/reaction.tsx
@@ -1,14 +1,14 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import { useAnnouncements } from 'soapbox/api/hooks/announcements';
-import AnimatedNumber from 'soapbox/components/animated-number';
-import unicodeMapping from 'soapbox/features/emoji/mapping';
+import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
+import AnimatedNumber from 'soapbox/components/animated-number.tsx';
+import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
 
-import Emoji from './emoji';
+import Emoji from './emoji.tsx';
 
 import type { Map as ImmutableMap } from 'immutable';
-import type { AnnouncementReaction } from 'soapbox/schemas';
+import type { AnnouncementReaction } from 'soapbox/schemas/index.ts';
 
 interface IReaction {
   announcementId: string;
diff --git a/src/components/announcements/reactions-bar.tsx b/src/components/announcements/reactions-bar.tsx
index 694e1ea2f..18f7243d4 100644
--- a/src/components/announcements/reactions-bar.tsx
+++ b/src/components/announcements/reactions-bar.tsx
@@ -1,16 +1,15 @@
 import clsx from 'clsx';
-import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
-import { useAnnouncements } from 'soapbox/api/hooks/announcements';
-import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
-import { useSettings } from 'soapbox/hooks';
+import { useAnnouncements } from 'soapbox/api/hooks/announcements/index.ts';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
-import Reaction from './reaction';
+import Reaction from './reaction.tsx';
 
 import type { Map as ImmutableMap } from 'immutable';
-import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
-import type { AnnouncementReaction } from 'soapbox/schemas';
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji/index.ts';
+import type { AnnouncementReaction } from 'soapbox/schemas/index.ts';
 
 interface IReactionsBar {
   announcementId: string;
diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx
index 6ac0c0e30..4829b7688 100644
--- a/src/components/attachment-thumbs.tsx
+++ b/src/components/attachment-thumbs.tsx
@@ -1,11 +1,11 @@
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
-import { openModal } from 'soapbox/actions/modals';
-import { MediaGallery } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { MediaGallery } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { List as ImmutableList } from 'immutable';
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 interface IAttachmentThumbs {
   media: ImmutableList<Attachment>;
diff --git a/src/components/authorize-reject-buttons.tsx b/src/components/authorize-reject-buttons.tsx
index 358704682..79f519521 100644
--- a/src/components/authorize-reject-buttons.tsx
+++ b/src/components/authorize-reject-buttons.tsx
@@ -1,8 +1,13 @@
+import playerStopFilledIcon from '@tabler/icons/filled/player-stop.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, IconButton, Text } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IAuthorizeRejectButtons {
   onAuthorize(): Promise<unknown> | unknown;
@@ -106,7 +111,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
         <HStack space={3} alignItems='center'>
           <AuthorizeRejectButton
             theme='danger'
-            icon={require('@tabler/icons/outline/x.svg')}
+            icon={xIcon}
             action={handleReject}
             isLoading={state === 'rejecting'}
             disabled={state === 'authorizing'}
@@ -114,7 +119,7 @@ const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize
           />
           <AuthorizeRejectButton
             theme='primary'
-            icon={require('@tabler/icons/outline/check.svg')}
+            icon={checkIcon}
             action={handleAuthorize}
             isLoading={state === 'authorizing'}
             disabled={state === 'rejecting'}
@@ -162,7 +167,7 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
         }
       >
         <IconButton
-          src={isLoading ? require('@tabler/icons/filled/player-stop.svg') : icon}
+          src={isLoading ? playerStopFilledIcon : icon}
           onClick={action}
           theme='seamless'
           className='size-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
diff --git a/src/components/autosuggest-account-input.tsx b/src/components/autosuggest-account-input.tsx
index 1b7c05499..ecd3f8ae2 100644
--- a/src/components/autosuggest-account-input.tsx
+++ b/src/components/autosuggest-account-input.tsx
@@ -1,13 +1,13 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 
-import { accountSearch } from 'soapbox/actions/accounts';
-import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import { useAppDispatch } from 'soapbox/hooks';
+import { accountSearch } from 'soapbox/actions/accounts.ts';
+import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import type { Menu } from 'soapbox/components/dropdown-menu';
-import type { InputThemes } from 'soapbox/components/ui/input/input';
+import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
+import type { InputThemes } from 'soapbox/components/ui/input.tsx';
 
 const noOp = () => { };
 
diff --git a/src/components/autosuggest-emoji.test.tsx b/src/components/autosuggest-emoji.test.tsx
index 38e45a370..289a6ee8e 100644
--- a/src/components/autosuggest-emoji.test.tsx
+++ b/src/components/autosuggest-emoji.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import AutosuggestEmoji from './autosuggest-emoji';
+import AutosuggestEmoji from './autosuggest-emoji.tsx';
 
 describe('<AutosuggestEmoji />', () => {
   it('renders native emoji', () => {
diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx
index 3c4cc3df2..7db0c42e7 100644
--- a/src/components/autosuggest-emoji.tsx
+++ b/src/components/autosuggest-emoji.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
+import { isCustomEmoji } from 'soapbox/features/emoji/index.ts';
+import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
-import { isCustomEmoji } from 'soapbox/features/emoji';
-import unicodeMapping from 'soapbox/features/emoji/mapping';
-import { joinPublicPath } from 'soapbox/utils/static';
-
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 interface IAutosuggestEmoji {
   emoji: Emoji;
diff --git a/src/components/autosuggest-input.tsx b/src/components/autosuggest-input.tsx
index 931e90f35..5a9b1bb84 100644
--- a/src/components/autosuggest-input.tsx
+++ b/src/components/autosuggest-input.tsx
@@ -1,16 +1,17 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 
-import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
-import Icon from 'soapbox/components/icon';
-import { Input, Portal } from 'soapbox/components/ui';
-import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
-import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
+import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
+import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account.tsx';
+import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
-import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
-import type { InputThemes } from 'soapbox/components/ui/input/input';
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
+import type { InputThemes } from 'soapbox/components/ui/input.tsx';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 export type AutoSuggestion = string | Emoji;
 
@@ -232,7 +233,7 @@ export default class AutosuggestInput extends PureComponent<IAutosuggestInput> {
     }
 
     return menu.map((item, i) => (
-      <a
+      <a // eslint-disable-line jsx-a11y/anchor-is-valid
         className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
         href='/'
         role='button'
diff --git a/src/components/autosuggest-location.tsx b/src/components/autosuggest-location.tsx
index ce6575dd6..f6df0a191 100644
--- a/src/components/autosuggest-location.tsx
+++ b/src/components/autosuggest-location.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
+import buildingCommunityIcon from '@tabler/icons/outline/building-community.svg';
+import homeIcon from '@tabler/icons/outline/home-2.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import roadIcon from '@tabler/icons/outline/road.svg';
 
-import { useAppSelector } from 'soapbox/hooks';
 
-import { HStack, Icon, Stack, Text } from './ui';
-
-const buildingCommunityIcon = require('@tabler/icons/outline/building-community.svg');
-const homeIcon = require('@tabler/icons/outline/home-2.svg');
-const mapPinIcon = require('@tabler/icons/outline/map-pin.svg');
-const roadIcon = require('@tabler/icons/outline/road.svg');
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 export const ADDRESS_ICONS: Record<string, string> = {
   house: homeIcon,
diff --git a/src/components/avatar-stack.tsx b/src/components/avatar-stack.tsx
index e9193d344..0163bc329 100644
--- a/src/components/avatar-stack.tsx
+++ b/src/components/avatar-stack.tsx
@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
 
-import { Avatar, HStack } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
-import type { Account } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/types/entities.ts';
 
 const getAccount = makeGetAccount();
 
diff --git a/src/components/badge.test.tsx b/src/components/badge.test.tsx
index 6204f7dcb..b0f0cbe40 100644
--- a/src/components/badge.test.tsx
+++ b/src/components/badge.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Badge from './badge';
+import Badge from './badge.tsx';
 
 describe('<Badge />', () => {
   it('renders correctly', () => {
diff --git a/src/components/badge.tsx b/src/components/badge.tsx
index e5476ca81..a1ff9d587 100644
--- a/src/components/badge.tsx
+++ b/src/components/badge.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { hexToHsl } from 'soapbox/utils/theme';
+import { hexToHsl } from 'soapbox/utils/theme.ts';
 
 interface IBadge {
   title: React.ReactNode;
diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
index f6b7ce614..d14ec3896 100644
--- a/src/components/big-card.tsx
+++ b/src/components/big-card.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
 
-import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface IBigCard {
   title: React.ReactNode;
diff --git a/src/components/birthday-input.tsx b/src/components/birthday-input.tsx
index 0c4700d83..b5737f650 100644
--- a/src/components/birthday-input.tsx
+++ b/src/components/birthday-input.tsx
@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useInstance, useFeatures } from 'soapbox/hooks';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import { Datetime } from './ui/datetime/datetime';
+import { Datetime } from './ui/datetime.tsx';
 
 const messages = defineMessages({
   birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
diff --git a/src/components/birthday-panel.tsx b/src/components/birthday-panel.tsx
index f1f31d94e..9235752df 100644
--- a/src/components/birthday-panel.tsx
+++ b/src/components/birthday-panel.tsx
@@ -1,11 +1,12 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
-import { Widget } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchBirthdayReminders } from 'soapbox/actions/accounts.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const timeToMidnight = () => {
   const now = new Date();
@@ -37,7 +38,7 @@ const BirthdayPanel = ({ limit }: IBirthdayPanel) => {
     });
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleFetchBirthdayReminders();
 
     return () => {
diff --git a/src/components/blurhash.tsx b/src/components/blurhash.tsx
index c492b0e05..7cfa6e94c 100644
--- a/src/components/blurhash.tsx
+++ b/src/components/blurhash.tsx
@@ -1,5 +1,5 @@
 import { decode } from 'blurhash';
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect, memo } from 'react';
 
 interface IBlurhash {
   /** Hash to render */
@@ -56,4 +56,4 @@ const Blurhash: React.FC<IBlurhash> = ({
   );
 };
 
-export default React.memo(Blurhash);
+export default memo(Blurhash);
diff --git a/src/components/copyable-input.tsx b/src/components/copyable-input.tsx
index 90089927c..2259504da 100644
--- a/src/components/copyable-input.tsx
+++ b/src/components/copyable-input.tsx
@@ -1,7 +1,9 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, HStack, Input } from './ui';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
 interface ICopyableInput {
   /** Text to be copied. */
diff --git a/src/components/display-name-inline.tsx b/src/components/display-name-inline.tsx
index 2e30b6b29..f7743aec9 100644
--- a/src/components/display-name-inline.tsx
+++ b/src/components/display-name-inline.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-import { useSoapboxConfig } from 'soapbox/hooks';
+import { getAcct } from '../utils/accounts.ts';
 
-import { getAcct } from '../utils/accounts';
 
-import { HStack, Text } from './ui';
-import VerificationBadge from './verification-badge';
+import VerificationBadge from './verification-badge.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IDisplayName {
   account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
diff --git a/src/components/display-name.test.tsx b/src/components/display-name.test.tsx
index 7c819f637..a9ce14e41 100644
--- a/src/components/display-name.test.tsx
+++ b/src/components/display-name.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import DisplayName from './display-name';
+import DisplayName from './display-name.tsx';
 
 describe('<DisplayName />', () => {
   it('renders display name + account name', () => {
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx
index 81f577fce..76ea5a93b 100644
--- a/src/components/display-name.tsx
+++ b/src/components/display-name.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import { getAcct } from '../utils/accounts.ts';
 
-import { getAcct } from '../utils/accounts';
 
-import { HStack, Text } from './ui';
-import VerificationBadge from './verification-badge';
+import VerificationBadge from './verification-badge.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IDisplayName {
   account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
diff --git a/src/components/domain.tsx b/src/components/domain.tsx
index 2b2d25bea..81a9f5938 100644
--- a/src/components/domain.tsx
+++ b/src/components/domain.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { unblockDomain } from 'soapbox/actions/domain-blocks';
-import { useAppDispatch } from 'soapbox/hooks';
-
-import { HStack, IconButton, Text } from './ui';
+import { unblockDomain } from 'soapbox/actions/domain-blocks.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const messages = defineMessages({
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
@@ -21,7 +22,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
 
   // const onBlockDomain = () => {
   //   dispatch(openModal('CONFIRM', {
-  //     icon: require('@tabler/icons/outline/ban.svg'),
+  //     icon: banIcon,
   //     heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
   //     message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
   //     confirm: intl.formatMessage(messages.blockDomainConfirm),
@@ -38,7 +39,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
       <Text tag='span'>
         {domain}
       </Text>
-      <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
+      <IconButton iconClassName='h-5 w-5' src={lockOpenIcon} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
     </HStack>
   );
 };
diff --git a/src/components/dropdown-menu/dropdown-menu-item.tsx b/src/components/dropdown-menu/dropdown-menu-item.tsx
index e2ac9f333..7090fd82c 100644
--- a/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -1,8 +1,9 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Counter, Icon } from '../ui';
+import Counter from 'soapbox/components/ui/counter.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
 export interface MenuItem {
   action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 735664fc9..161d92307 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,19 +1,20 @@
 import { offset, Placement, useFloating, flip, arrow, shift } from '@floating-ui/react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 'soapbox/actions/dropdown-menu';
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import { useAppDispatch } from 'soapbox/hooks';
-import { userTouching } from 'soapbox/is-mobile';
+import { closeDropdownMenu as closeDropdownMenuRedux, openDropdownMenu } from 'soapbox/actions/dropdown-menu.ts';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
 
-import { IconButton, Portal } from '../ui';
+import DropdownMenuItem, { MenuItem } from './dropdown-menu-item.tsx';
 
-import DropdownMenuItem, { MenuItem } from './dropdown-menu-item';
-
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 export type Menu = Array<MenuItem | null>;
 
@@ -43,7 +44,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
     onOpen,
     onShiftClick,
     placement: initialPlacement = 'top',
-    src = require('@tabler/icons/outline/dots.svg'),
+    src = dotsIcon,
     title = 'Menu',
     ...filteredProps
   } = props;
@@ -268,7 +269,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
   return (
     <>
       {children ? (
-        React.cloneElement(children, {
+        cloneElement(children, {
           disabled,
           onClick: handleClick,
           onKeyPress: handleKeyPress,
diff --git a/src/components/dropdown-menu/index.ts b/src/components/dropdown-menu/index.ts
index 014166d01..780e5b9c7 100644
--- a/src/components/dropdown-menu/index.ts
+++ b/src/components/dropdown-menu/index.ts
@@ -1,3 +1,3 @@
-export { default } from './dropdown-menu';
-export type { Menu } from './dropdown-menu';
-export type { MenuItem } from './dropdown-menu-item';
\ No newline at end of file
+export { default } from './dropdown-menu.tsx';
+export type { Menu } from './dropdown-menu.tsx';
+export type { MenuItem } from './dropdown-menu-item.tsx';
\ No newline at end of file
diff --git a/src/components/emoji-graphic.tsx b/src/components/emoji-graphic.tsx
index 59bba2528..7facaa4ad 100644
--- a/src/components/emoji-graphic.tsx
+++ b/src/components/emoji-graphic.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import Emoji from 'soapbox/components/ui/emoji/emoji';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
 
 interface IEmojiGraphic {
   emoji: string;
diff --git a/src/components/event-preview.tsx b/src/components/event-preview.tsx
index 1983b6e67..7eddcf061 100644
--- a/src/components/event-preview.tsx
+++ b/src/components/event-preview.tsx
@@ -1,16 +1,20 @@
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import EventActionButton from 'soapbox/features/event/components/event-action-button';
-import EventDate from 'soapbox/features/event/components/event-date';
-import { useAppSelector } from 'soapbox/hooks';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import EventActionButton from 'soapbox/features/event/components/event-action-button.tsx';
+import EventDate from 'soapbox/features/event/components/event-date.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import Icon from './icon';
-import { Button, HStack, Stack, Text } from './ui';
-import VerificationBadge from './verification-badge';
+import Icon from './icon.tsx';
+import VerificationBadge from './verification-badge.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   eventBanner: { id: 'event.banner', defaultMessage: 'Event banner' },
@@ -67,7 +71,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
 
         <div className='flex flex-wrap gap-x-2 gap-y-1 text-gray-700 dark:text-gray-600'>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/user.svg')} />
+            <Icon src={userIcon} />
             <HStack space={1} alignItems='center' grow>
               <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
               {account.verified && <VerificationBadge />}
@@ -78,7 +82,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+              <Icon src={mapPinIcon} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/components/extended-video-player.tsx b/src/components/extended-video-player.tsx
index 23d8a35cb..e5567aa0b 100644
--- a/src/components/extended-video-player.tsx
+++ b/src/components/extended-video-player.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
-import { isIOS } from 'soapbox/is-mobile';
+import { isIOS } from 'soapbox/is-mobile.ts';
 
 interface IExtendedVideoPlayer {
   src: string;
diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx
deleted file mode 100644
index fd632db52..000000000
--- a/src/components/gameboy.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-// @ts-ignore No types available
-// eslint-disable-next-line import/no-unresolved
-import { WasmBoy } from '@soapbox.pub/wasmboy';
-import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import { exitFullscreen, isFullscreen, requestFullscreen } from 'soapbox/features/ui/util/fullscreen';
-
-import { HStack, IconButton } from './ui';
-
-let gainNode: GainNode | undefined;
-
-interface IGameboy extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'> {
-  /** Classname of the outer `<div>`. */
-  className?: string;
-  /** URL to the ROM. */
-  src: string;
-  /** Aspect ratio of the canvas. */
-  aspect?: 'normal' | 'stretched';
-}
-
-/** Component to display a playable Gameboy emulator. */
-const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocus, onBlur, ...rest }) => {
-  const node = useRef<HTMLDivElement>(null);
-  const canvas = useRef<HTMLCanvasElement>(null);
-
-  const [paused, setPaused] = useState(false);
-  const [muted, setMuted] = useState(true);
-  const [fullscreen, setFullscreen] = useState(false);
-  const [showControls, setShowControls] = useState(true);
-
-  async function init() {
-    await WasmBoy.config(WasmBoyOptions, canvas.current!);
-    await WasmBoy.loadROM(src);
-    await play();
-
-    if (document.activeElement === canvas.current) {
-      await WasmBoy.enableDefaultJoypad();
-    } else {
-      await WasmBoy.disableDefaultJoypad();
-    }
-  }
-
-  const handleFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
-    WasmBoy.enableDefaultJoypad();
-  }, []);
-
-  const handleBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
-    WasmBoy.disableDefaultJoypad();
-  }, []);
-
-  const handleFullscreenChange = useCallback(() => {
-    setFullscreen(isFullscreen());
-  }, []);
-
-  const handleCanvasClick = useCallback(() => {
-    setShowControls(!showControls);
-  }, [showControls]);
-
-  const pause = async () => {
-    await WasmBoy.pause();
-    setPaused(true);
-  };
-
-  const play = async () => {
-    await WasmBoy.play();
-    setPaused(false);
-  };
-
-  const togglePaused = () => paused ? play() : pause();
-  const toggleMuted = () => setMuted(!muted);
-
-  const toggleFullscreen = () => {
-    if (isFullscreen()) {
-      exitFullscreen();
-    } else if (node.current) {
-      requestFullscreen(node.current);
-    }
-  };
-
-  const handleDownload = () => {
-    window.open(src);
-  };
-
-  useEffect(() => {
-    init();
-
-    return () => {
-      WasmBoy.pause();
-      WasmBoy.disableDefaultJoypad();
-    };
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('fullscreenchange', handleFullscreenChange, true);
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange, true);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (fullscreen) {
-      node.current?.focus();
-    }
-  }, [fullscreen]);
-
-  useEffect(() => {
-    if (gainNode) {
-      gainNode.gain.value = muted ? 0 : 1;
-    }
-  }, [gainNode, muted]);
-
-  return (
-    <div
-      ref={node}
-      tabIndex={0}
-      className={clsx(className, 'relative outline-none')}
-      onFocus={onFocus ?? handleFocus}
-      onBlur={onBlur ?? handleBlur}
-    >
-      <canvas
-        ref={canvas}
-        onClick={handleCanvasClick}
-        className={clsx('size-full bg-black ', {
-          'object-contain': aspect === 'normal',
-          'object-cover': aspect === 'stretched',
-        })}
-        {...rest}
-      />
-
-      <HStack
-        justifyContent='between'
-        className={clsx('pointer-events-none absolute inset-x-0 bottom-0 w-full bg-gradient-to-t from-black/50 to-transparent p-2 opacity-0 transition-opacity', {
-          'pointer-events-auto opacity-100': showControls,
-        })}
-      >
-        <HStack space={2}>
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={togglePaused}
-            src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')}
-          />
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={toggleMuted}
-            src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')}
-          />
-        </HStack>
-
-        <HStack space={2}>
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            src={require('@tabler/icons/outline/download.svg')}
-            onClick={handleDownload}
-          />
-          <IconButton
-            theme='transparent'
-            className='text-white'
-            onClick={toggleFullscreen}
-            src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
-          />
-        </HStack>
-      </HStack>
-    </div>
-  );
-};
-
-const WasmBoyOptions = {
-  headless: false,
-  useGbcWhenOptional: true,
-  isAudioEnabled: true,
-  frameSkip: 1,
-  audioBatchProcessing: true,
-  timersBatchProcessing: false,
-  audioAccumulateSamples: true,
-  graphicsBatchProcessing: false,
-  graphicsDisableScanlineRendering: false,
-  tileRendering: true,
-  tileCaching: true,
-  gameboyFPSCap: 60,
-  updateGraphicsCallback: false,
-  updateAudioCallback: (audioContext: AudioContext, audioBufferSourceNode: AudioBufferSourceNode) => {
-    gainNode = gainNode ?? audioContext.createGain();
-    audioBufferSourceNode.connect(gainNode);
-    return gainNode;
-  },
-  saveStateCallback: false,
-};
-
-export default Gameboy;
\ No newline at end of file
diff --git a/src/components/gdpr-banner.tsx b/src/components/gdpr-banner.tsx
index 98cf3ac53..8e723b903 100644
--- a/src/components/gdpr-banner.tsx
+++ b/src/components/gdpr-banner.tsx
@@ -1,9 +1,14 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import Banner from 'soapbox/components/ui/banner.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const acceptedGdpr = !!localStorage.getItem('soapbox:gdpr');
 
diff --git a/src/components/group-card.tsx b/src/components/group-card.tsx
index ebcb77161..2b0812a81 100644
--- a/src/components/group-card.tsx
+++ b/src/components/group-card.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import GroupHeaderImage from 'soapbox/features/group/components/group-header-image.tsx';
+import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
+import GroupPrivacy from 'soapbox/features/group/components/group-privacy.tsx';
+import GroupRelationship from 'soapbox/features/group/components/group-relationship.tsx';
 
-import GroupHeaderImage from 'soapbox/features/group/components/group-header-image';
-import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
-import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
-import GroupRelationship from 'soapbox/features/group/components/group-relationship';
+import GroupAvatar from './groups/group-avatar.tsx';
 
-import GroupAvatar from './groups/group-avatar';
-import { HStack, Stack, Text } from './ui';
-
-import type { Group as GroupEntity } from 'soapbox/types/entities';
+import type { Group as GroupEntity } from 'soapbox/types/entities.ts';
 
 interface IGroupCard {
   group: GroupEntity;
diff --git a/src/components/groups/group-avatar.tsx b/src/components/groups/group-avatar.tsx
index 13b40d237..0f8f399cd 100644
--- a/src/components/groups/group-avatar.tsx
+++ b/src/components/groups/group-avatar.tsx
@@ -1,11 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
 
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
-import { Avatar } from '../ui';
-
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 interface IGroupAvatar {
   group: Group;
diff --git a/src/components/groups/popover/group-popover.tsx b/src/components/groups/popover/group-popover.tsx
index 6079daab6..40cd6b6ac 100644
--- a/src/components/groups/popover/group-popover.tsx
+++ b/src/components/groups/popover/group-popover.tsx
@@ -1,14 +1,18 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, matchPath, useHistory } from 'react-router-dom';
 
-import { Button, Divider, HStack, Popover, Stack, Text } from 'soapbox/components/ui';
-import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
-import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Popover from 'soapbox/components/ui/popover.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
+import GroupPrivacy from 'soapbox/features/group/components/group-privacy.tsx';
 
-import GroupAvatar from '../group-avatar';
+import GroupAvatar from '../group-avatar.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 interface IGroupPopoverContainer {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
diff --git a/src/components/hashtag-link.tsx b/src/components/hashtag-link.tsx
index f0052d9f9..9f1437e03 100644
--- a/src/components/hashtag-link.tsx
+++ b/src/components/hashtag-link.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import Link from './link';
+import Link from './link.tsx';
 
 interface IHashtagLink {
   hashtag: string;
diff --git a/src/components/hashtag.tsx b/src/components/hashtag.tsx
index 690661515..b86aefe8e 100644
--- a/src/components/hashtag.tsx
+++ b/src/components/hashtag.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 
-import { shortNumberFormat } from '../utils/numbers';
 
-import { HStack, Stack, Text } from './ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import type { Tag } from 'soapbox/types/entities';
+import { shortNumberFormat } from '../utils/numbers.tsx';
+
+import type { Tag } from 'soapbox/types/entities.ts';
 
 interface IHashtag {
   hashtag: Tag;
diff --git a/src/components/helmet.tsx b/src/components/helmet.tsx
index 64b5c3fcf..1a664ba93 100644
--- a/src/components/helmet.tsx
+++ b/src/components/helmet.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
+import { useMemo, useEffect } from 'react';
 import { Helmet as ReactHelmet } from 'react-helmet';
 
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useAppSelector, useInstance, useSettings } from 'soapbox/hooks';
-import { RootState } from 'soapbox/store';
-import FaviconService from 'soapbox/utils/favicon-service';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { RootState } from 'soapbox/store.ts';
+import FaviconService from 'soapbox/utils/favicon-service.ts';
 
 FaviconService.initFaviconService();
 
@@ -25,7 +27,7 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
   const unreadCount = useAppSelector((state) => getNotifTotals(state) + unreadChatsCount);
   const { demetricator } = useSettings();
 
-  const hasUnreadNotifications = React.useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);
+  const hasUnreadNotifications = useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);
 
   const addCounter = (string: string) => {
     return hasUnreadNotifications ? `(${unreadCount}) ${string}` : string;
@@ -39,7 +41,7 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     updateFaviconBadge();
   }, [unreadCount, demetricator]);
 
diff --git a/src/components/hover-ref-wrapper.tsx b/src/components/hover-ref-wrapper.tsx
index 686e15ecb..e64210520 100644
--- a/src/components/hover-ref-wrapper.tsx
+++ b/src/components/hover-ref-wrapper.tsx
@@ -1,14 +1,14 @@
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
-import { fetchAccount } from 'soapbox/actions/accounts';
+import { fetchAccount } from 'soapbox/actions/accounts.ts';
 import {
   openProfileHoverCard,
   closeProfileHoverCard,
-} from 'soapbox/actions/profile-hover-card';
-import { useAppDispatch } from 'soapbox/hooks';
-import { isMobile } from 'soapbox/is-mobile';
+} from 'soapbox/actions/profile-hover-card.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { isMobile } from 'soapbox/is-mobile.ts';
 
 const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
   dispatch(openProfileHoverCard(ref, accountId));
diff --git a/src/components/hover-status-wrapper.tsx b/src/components/hover-status-wrapper.tsx
index 3dd25d810..1f52cc942 100644
--- a/src/components/hover-status-wrapper.tsx
+++ b/src/components/hover-status-wrapper.tsx
@@ -1,12 +1,12 @@
 import debounce from 'lodash/debounce';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
 import {
   openStatusHoverCard,
   closeStatusHoverCard,
-} from 'soapbox/actions/status-hover-card';
-import { isMobile } from 'soapbox/is-mobile';
+} from 'soapbox/actions/status-hover-card.ts';
+import { isMobile } from 'soapbox/is-mobile.ts';
 
 const showStatusHoverCard = debounce((dispatch, ref, statusId) => {
   dispatch(openStatusHoverCard(ref, statusId));
diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx
index 610f2ba3c..1b0a67621 100644
--- a/src/components/icon-button.tsx
+++ b/src/components/icon-button.tsx
@@ -1,7 +1,6 @@
 import clsx from 'clsx';
-import React from 'react';
 
-import Icon from 'soapbox/components/icon';
+import Icon from 'soapbox/components/icon.tsx';
 
 interface IIconButton extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' | 'tabIndex' | 'title'> {
   active?: boolean;
diff --git a/src/components/icon-with-counter.tsx b/src/components/icon-with-counter.tsx
index 5cac95290..072e2166f 100644
--- a/src/components/icon-with-counter.tsx
+++ b/src/components/icon-with-counter.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import Icon, { IIcon } from 'soapbox/components/icon';
-import { Counter } from 'soapbox/components/ui';
+import Icon, { IIcon } from 'soapbox/components/icon.tsx';
+import Counter from 'soapbox/components/ui/counter.tsx';
 
 interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
   count: number;
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
index 1f1536ef9..c5d4638a3 100644
--- a/src/components/icon.tsx
+++ b/src/components/icon.tsx
@@ -4,7 +4,6 @@
  */
 
 import clsx from 'clsx';
-import React from 'react';
 import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
 export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/src/components/landing-gradient.tsx b/src/components/landing-gradient.tsx
index ed27fe214..d7d22dd38 100644
--- a/src/components/landing-gradient.tsx
+++ b/src/components/landing-gradient.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
   <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 black:hidden dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
diff --git a/src/components/link.tsx b/src/components/link.tsx
index 51bb91300..8e9c11be2 100644
--- a/src/components/link.tsx
+++ b/src/components/link.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link as Comp, LinkProps } from 'react-router-dom';
 
 const Link = (props: LinkProps) => (
diff --git a/src/components/list.tsx b/src/components/list.tsx
index 487e2d282..cdf9dc67f 100644
--- a/src/components/list.tsx
+++ b/src/components/list.tsx
@@ -1,10 +1,15 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { Children, cloneElement, isValidElement, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
-import { SelectDropdown } from '../features/forms';
 
-import { Icon, HStack, Select } from './ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
+
+import { SelectDropdown } from '../features/forms/index.tsx';
 
 interface IList {
   children: React.ReactNode;
@@ -36,12 +41,12 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
 
   const LabelComp = to || onClick || onSelect ? 'span' : 'label';
 
-  const renderChildren = React.useCallback(() => {
-    return React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
+  const renderChildren = useCallback(() => {
+    return Children.map(children, (child) => {
+      if (isValidElement(child)) {
         const isSelect = child.type === SelectDropdown || child.type === Select;
 
-        return React.cloneElement(child, {
+        return cloneElement(child, {
           // @ts-ignore
           id: domId,
           className: clsx({
@@ -72,7 +77,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
         <HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'>
           {children}
 
-          <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='ml-1 rtl:rotate-180' />
+          <Icon src={chevronRightIcon} className='ml-1 rtl:rotate-180' />
         </HStack>
       ) : null}
 
@@ -90,7 +95,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, to, onClick, onS
             }
           >
             <Icon
-              src={require('@tabler/icons/outline/check.svg')}
+              src={checkIcon}
               className={
                 clsx({
                   'h-4 w-4 text-white dark:text-white transition-all duration-500': true,
diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx
index 48aac0a06..fbd074aff 100644
--- a/src/components/load-gap.tsx
+++ b/src/components/load-gap.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@@ -20,7 +20,7 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
 
   return (
     <button className='m-0 box-border block w-full border-0 bg-transparent p-4 text-gray-900' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-      <SvgIcon className='mx-auto' src={require('@tabler/icons/outline/dots.svg')} />
+      <SvgIcon className='mx-auto' src={dotsIcon} />
     </button>
   );
 };
diff --git a/src/components/load-more.tsx b/src/components/load-more.tsx
index c356751b9..67a393a8a 100644
--- a/src/components/load-more.tsx
+++ b/src/components/load-more.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button } from 'soapbox/components/ui';
+import Button from 'soapbox/components/ui/button.tsx';
 
 interface ILoadMore {
   onClick: React.MouseEventHandler;
diff --git a/src/components/loading-screen.tsx b/src/components/loading-screen.tsx
index 3b86fd2e0..3a8511b77 100644
--- a/src/components/loading-screen.tsx
+++ b/src/components/loading-screen.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import LandingGradient from 'soapbox/components/landing-gradient';
-import { Spinner } from 'soapbox/components/ui';
+import LandingGradient from 'soapbox/components/landing-gradient.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 /** Fullscreen loading indicator. */
 const LoadingScreen: React.FC = () => {
diff --git a/src/components/location-search.tsx b/src/components/location-search.tsx
index 8bd4a0348..f8bab49c4 100644
--- a/src/components/location-search.tsx
+++ b/src/components/location-search.tsx
@@ -1,15 +1,17 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
 import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { locationSearch } from 'soapbox/actions/events';
-import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import { useAppDispatch } from 'soapbox/hooks';
+import { locationSearch } from 'soapbox/actions/events.ts';
+import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import AutosuggestLocation from './autosuggest-location';
-import SvgIcon from './ui/icon/svg-icon';
+import AutosuggestLocation from './autosuggest-location.tsx';
 
 const noOp = () => {};
 
@@ -100,8 +102,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         renderSuggestion={AutosuggestLocation}
       />
       <div role='button' tabIndex={0} className='focus:!outline-0' onClick={handleClear}>
-        <SvgIcon src={require('@tabler/icons/outline/search.svg')} className={clsx('pointer-events-none absolute right-4 top-1/2 z-[2] inline-block size-[18px] -translate-y-1/2 cursor-default text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'opacity-100': isEmpty() })} />
-        <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('pointer-events-none absolute right-4 top-1/2 z-[2] inline-block size-[22px] -translate-y-1/2 cursor-pointer text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <SvgIcon src={searchIcon} className={clsx('pointer-events-none absolute right-4 top-1/2 z-[2] inline-block size-[18px] -translate-y-1/2 cursor-default text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'opacity-100': isEmpty() })} />
+        <SvgIcon src={backspaceIcon} className={clsx('pointer-events-none absolute right-4 top-1/2 z-[2] inline-block size-[22px] -translate-y-1/2 cursor-pointer text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );
diff --git a/src/components/markup.tsx b/src/components/markup.tsx
index e20dcb3a2..3f5647787 100644
--- a/src/components/markup.tsx
+++ b/src/components/markup.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import Text, { IText } from './ui/text/text';
+import Text, { IText } from './ui/text.tsx';
 import './markup.css';
 
 interface IMarkup extends IText {
 }
 
 /** Styles HTML markup returned by the API, such as in account bios and statuses. */
-const Markup = React.forwardRef<any, IMarkup>((props, ref) => {
+const Markup = forwardRef<any, IMarkup>((props, ref) => {
   return (
     <Text ref={ref} {...props} data-markup />
   );
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 0edf7528c..085d95e61 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -1,39 +1,41 @@
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import { useState, useRef, useLayoutEffect, CSSProperties } from 'react';
 
-import Blurhash from 'soapbox/components/blurhash';
-import StillImage from 'soapbox/components/still-image';
-import { MIMETYPE_ICONS } from 'soapbox/components/upload';
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { Attachment } from 'soapbox/types/entities';
-import { truncateFilename } from 'soapbox/utils/media';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import StillImage from 'soapbox/components/still-image.tsx';
+import { MIMETYPE_ICONS } from 'soapbox/components/upload.tsx';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { Attachment } from 'soapbox/types/entities.ts';
+import { truncateFilename } from 'soapbox/utils/media.ts';
 
-import { isIOS } from '../is-mobile';
-import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio';
+import { isIOS } from '../is-mobile.ts';
+import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio.ts';
 
-import SvgIcon from './ui/icon/svg-icon';
+import SvgIcon from './ui/svg-icon.tsx';
 
-import type { Property } from 'csstype';
 import type { List as ImmutableList } from 'immutable';
 
-// const Gameboy = React.lazy(() => import('./gameboy'));
+// const Gameboy = lazy(() => import('./gameboy'));
 
 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: CSSProperties['width'];
+  h: CSSProperties['height'];
+  t?: CSSProperties['top'];
+  r?: CSSProperties['right'];
+  b?: CSSProperties['bottom'];
+  l?: CSSProperties['left'];
+  float?: CSSProperties['float'];
+  pos?: CSSProperties['position'];
 }
 
 interface SizeData {
-  style: React.CSSProperties;
+  style: CSSProperties;
   itemsDimensions: Dimensions[];
   size: number;
   width: number;
@@ -157,7 +159,7 @@ const Item: React.FC<IItem> = ({
     const attachmentIcon = (
       <SvgIcon
         className={clsx('size-16 text-gray-800 dark:text-gray-200', { 'size-8': compact })}
-        src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || require('@tabler/icons/outline/paperclip.svg')}
+        src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type']) as string] || paperclipIcon}
       />
     );
 
@@ -234,7 +236,7 @@ const Item: React.FC<IItem> = ({
         target='_blank'
         title={attachment.description}
       >
-        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={require('@tabler/icons/outline/volume.svg')} /></span>
+        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon className='size-24' src={volumeIcon} /></span>
         <span className={clsx('pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-[18px] text-white opacity-90 transition-opacity duration-100 ease-linear', { 'hidden': compact })}>{ext}</span>
       </a>
     );
diff --git a/src/components/mention.tsx b/src/components/mention.tsx
index 39e892913..c2be2e5cd 100644
--- a/src/components/mention.tsx
+++ b/src/components/mention.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { shortenNostr } from 'soapbox/utils/nostr';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
-import { Tooltip } from './ui';
 
-import type { Mention as MentionEntity } from 'soapbox/schemas';
+import type { Mention as MentionEntity } from 'soapbox/schemas/index.ts';
 
 interface IMention {
   mention: Pick<MentionEntity, 'acct' | 'username'>;
diff --git a/src/components/missing-indicator.tsx b/src/components/missing-indicator.tsx
index 69bade6c2..42b0b273b 100644
--- a/src/components/missing-indicator.tsx
+++ b/src/components/missing-indicator.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardBody, Stack, Text } from './ui';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface MissingIndicatorProps {
   nested?: boolean;
diff --git a/src/components/modal-root.tsx b/src/components/modal-root.tsx
index 0612b90ad..c2f077c65 100644
--- a/src/components/modal-root.tsx
+++ b/src/components/modal-root.tsx
@@ -1,16 +1,18 @@
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { cancelReplyCompose } from 'soapbox/actions/compose';
-import { cancelEventCompose } from 'soapbox/actions/events';
-import { openModal, closeModal } from 'soapbox/actions/modals';
-import { useAppDispatch, usePrevious } from 'soapbox/hooks';
+import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
+import { cancelEventCompose } from 'soapbox/actions/events.ts';
+import { openModal, closeModal } from 'soapbox/actions/modals.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { usePrevious } from 'soapbox/hooks/usePrevious.ts';
 
-import type { ModalType } from 'soapbox/features/ui/components/modal-root';
-import type { ReducerCompose } from 'soapbox/reducers/compose';
-import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/compose-event';
+import type { ModalType } from 'soapbox/features/ui/components/modal-root.tsx';
+import type { ReducerRecord as ReducerComposeEvent } from 'soapbox/reducers/compose-event.ts';
+import type { ReducerCompose } from 'soapbox/reducers/compose.ts';
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.cancel.confirm', defaultMessage: 'Discard' },
@@ -74,7 +76,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       if (hasComposeContent && type === 'COMPOSE') {
         const isEditing = compose!.id !== null;
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: isEditing
             ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
             : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
@@ -93,7 +95,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
       } else if (hasEventComposeContent && type === 'COMPOSE_EVENT') {
         const isEditing = getState().compose_event.id !== null;
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: isEditing
             ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
             : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
diff --git a/src/components/navlinks.tsx b/src/components/navlinks.tsx
index 448bfff2b..d21dea832 100644
--- a/src/components/navlinks.tsx
+++ b/src/components/navlinks.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui';
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 interface INavlinks {
   type: string;
diff --git a/src/components/outline-box.tsx b/src/components/outline-box.tsx
index 0f56c21ae..4e599beef 100644
--- a/src/components/outline-box.tsx
+++ b/src/components/outline-box.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
diff --git a/src/components/pending-items-row.tsx b/src/components/pending-items-row.tsx
index 4f8a250f8..4b0c7b184 100644
--- a/src/components/pending-items-row.tsx
+++ b/src/components/pending-items-row.tsx
@@ -1,9 +1,12 @@
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
+import exclamationCircleIcon from '@tabler/icons/outline/exclamation-circle.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IPendingItemsRow {
   /** Path to navigate the user when clicked. */
@@ -25,7 +28,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
           })}
           >
             <Icon
-              src={require('@tabler/icons/outline/exclamation-circle.svg')}
+              src={exclamationCircleIcon}
               className={clsx({
                 'h-5 w-5': size === 'md',
                 'h-7 w-7': size === 'lg',
@@ -43,7 +46,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
         </HStack>
 
         <Icon
-          src={require('@tabler/icons/outline/chevron-right.svg')}
+          src={chevronRightIcon}
           className='size-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
         />
       </HStack>
diff --git a/src/components/polls/poll-footer.test.tsx b/src/components/polls/poll-footer.test.tsx
index 0215d170a..38c0761b9 100644
--- a/src/components/polls/poll-footer.test.tsx
+++ b/src/components/polls/poll-footer.test.tsx
@@ -1,13 +1,13 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { mockStore, render, screen, rootState } from 'soapbox/jest/test-helpers';
-import { type Poll } from 'soapbox/schemas';
+import { __stub } from 'soapbox/api/index.ts';
+import { mockStore, render, screen, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { type Poll } from 'soapbox/schemas/index.ts';
 
-import PollFooter from './poll-footer';
+import PollFooter from './poll-footer.tsx';
 
 let poll: Poll = {
   id: '1',
diff --git a/src/components/polls/poll-footer.tsx b/src/components/polls/poll-footer.tsx
index 09798f828..4722a3eff 100644
--- a/src/components/polls/poll-footer.tsx
+++ b/src/components/polls/poll-footer.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchPoll, vote } from 'soapbox/actions/polls';
-import { useAppDispatch } from 'soapbox/hooks';
+import { fetchPoll, vote } from 'soapbox/actions/polls.ts';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import RelativeTimestamp from '../relative-timestamp';
-import { Button, HStack, Stack, Text, Tooltip } from '../ui';
-
-import type { Poll as PollEntity } from 'soapbox/types/entities';
+import type { Poll as PollEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   closed: { id: 'poll.closed', defaultMessage: 'Closed' },
diff --git a/src/components/polls/poll-option.tsx b/src/components/polls/poll-option.tsx
index 1c0760188..ce99c66e8 100644
--- a/src/components/polls/poll-option.tsx
+++ b/src/components/polls/poll-option.tsx
@@ -1,9 +1,12 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
 
-import { HStack, Icon, Text } from '../ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 import type {
   Poll as PollEntity,
@@ -86,7 +89,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/outline/check.svg')} className='size-4 text-white dark:text-primary-900' />
+              <Icon src={checkIcon} className='size-4 text-white dark:text-primary-900' />
             )}
           </span>
         </div>
@@ -143,7 +146,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
             <HStack space={2} alignItems='center' className='relative'>
               {voted ? (
                 <Icon
-                  src={require('@tabler/icons/outline/circle-check.svg')}
+                  src={circleCheckIcon}
                   alt={intl.formatMessage(messages.voted)}
                   className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
                 />
diff --git a/src/components/polls/poll.tsx b/src/components/polls/poll.tsx
index b7f75424a..382f4b3cf 100644
--- a/src/components/polls/poll.tsx
+++ b/src/components/polls/poll.tsx
@@ -1,14 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { vote } from 'soapbox/actions/polls';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { vote } from 'soapbox/actions/polls.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import { Stack, Text } from '../ui';
-
-import PollFooter from './poll-footer';
-import PollOption from './poll-option';
+import PollFooter from './poll-footer.tsx';
+import PollOption from './poll-option.tsx';
 
 interface IPoll {
   id: string;
diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index 3b1c1796e..9fcd47c6f 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -1,16 +1,21 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
-import Blurhash from 'soapbox/components/blurhash';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-import { normalizeAttachment } from 'soapbox/normalizers';
-import { addAutoPlay } from 'soapbox/utils/media';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
+import { addAutoPlay } from 'soapbox/utils/media.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import SvgIcon from './ui/icon/svg-icon';
-
-import type { Card as CardEntity, Attachment } from 'soapbox/types/entities';
+import type { Card as CardEntity, Attachment } from 'soapbox/types/entities.ts';
 
 /** Props for `PreviewCard`. */
 interface IPreviewCard {
@@ -137,7 +142,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       )}
       <HStack space={1} alignItems='center'>
         <Text tag='span' theme='muted'>
-          <SvgIcon src={require('@tabler/icons/outline/link.svg')} />
+          <SvgIcon src={linkIcon} />
         </Text>
         <Text tag='span' theme='muted' size='sm' direction={direction}>
           {card.provider_name}
@@ -170,10 +175,10 @@ const PreviewCard: React.FC<IPreviewCard> = ({
     if (embedded) {
       embed = renderVideo();
     } else {
-      let iconVariant = require('@tabler/icons/outline/player-play.svg');
+      let iconVariant = playerPlayIcon;
 
       if (card.type === 'photo') {
-        iconVariant = require('@tabler/icons/outline/zoom-in.svg');
+        iconVariant = zoomInIcon;
       }
 
       embed = (
@@ -200,7 +205,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                     className='text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'
                   >
                     <SvgIcon
-                      src={require('@tabler/icons/outline/external-link.svg')}
+                      src={externalLinkIcon}
                       className='absolute left-1/2 top-1/2 size-[30px] -translate-x-1/2 -translate-y-1/2 text-inherit'
                     />
                   </a>
diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index b204e3d45..c6b9eae76 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -1,26 +1,33 @@
 import { useFloating } from '@floating-ui/react';
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchRelationships } from 'soapbox/actions/accounts';
+
+import { fetchRelationships } from 'soapbox/actions/accounts.ts';
 import {
   closeProfileHoverCard,
   updateProfileHoverCard,
-} from 'soapbox/actions/profile-hover-card';
-import { useAccount, usePatronUser } from 'soapbox/api/hooks';
-import Badge from 'soapbox/components/badge';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import { UserPanel } from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+} from 'soapbox/actions/profile-hover-card.ts';
+import { useAccount, usePatronUser } from 'soapbox/api/hooks/index.ts';
+import Badge from 'soapbox/components/badge.tsx';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
+import { UserPanel } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import { showProfileHoverCard } from './hover-ref-wrapper';
-import { dateFormatOptions } from './relative-timestamp';
-import { Card, CardBody, HStack, Icon, Stack, Text } from './ui';
+import { showProfileHoverCard } from './hover-ref-wrapper.tsx';
+import { dateFormatOptions } from './relative-timestamp.tsx';
 
-import type { Account, PatronUser } from 'soapbox/schemas';
-import type { AppDispatch } from 'soapbox/store';
+import type { Account, PatronUser } from 'soapbox/schemas/index.ts';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 const getBadges = (
   account?: Pick<Account, 'admin' | 'moderator'>,
@@ -123,7 +130,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
             {account.local ? (
               <HStack alignItems='center' space={0.5}>
                 <Icon
-                  src={require('@tabler/icons/outline/calendar.svg')}
+                  src={calendarIcon}
                   className='size-4 text-gray-800 dark:text-gray-200'
                 />
 
diff --git a/src/components/progress-circle.tsx b/src/components/progress-circle.tsx
index 1adb3f46e..b2f78e1c8 100644
--- a/src/components/progress-circle.tsx
+++ b/src/components/progress-circle.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IProgressCircle {
   progress: number;
diff --git a/src/components/pull-to-refresh.tsx b/src/components/pull-to-refresh.tsx
index 829441b37..3d53fe0c7 100644
--- a/src/components/pull-to-refresh.tsx
+++ b/src/components/pull-to-refresh.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import PTRComponent from 'react-simple-pull-to-refresh';
 
-import { Spinner } from 'soapbox/components/ui';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 interface IPullToRefresh {
   onRefresh?: () => Promise<any>;
diff --git a/src/components/pullable.tsx b/src/components/pullable.tsx
index e92a76ea2..d98a3158d 100644
--- a/src/components/pullable.tsx
+++ b/src/components/pullable.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import PullToRefresh from './pull-to-refresh';
+import PullToRefresh from './pull-to-refresh.tsx';
 
 interface IPullable {
   children: React.ReactNode;
diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx
index c70e00f5f..0444c9a76 100644
--- a/src/components/quoted-status-indicator.tsx
+++ b/src/components/quoted-status-indicator.tsx
@@ -1,8 +1,11 @@
-import React, { useCallback } from 'react';
+import quoteIcon from '@tabler/icons/outline/quote.svg';
+import { useCallback } from 'react';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusIndicator {
   /** The quoted status id. */
@@ -18,7 +21,7 @@ const QuotedStatusIndicator: React.FC<IQuotedStatusIndicator> = ({ statusId }) =
 
   return (
     <HStack alignItems='center' space={1}>
-      <Icon className='size-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
+      <Icon className='size-5' src={quoteIcon} aria-hidden />
       <Text truncate>{status.url}</Text>
     </HStack>
   );
diff --git a/src/components/quoted-status.test.tsx b/src/components/quoted-status.test.tsx
index ffb1419b4..49dde1a8e 100644
--- a/src/components/quoted-status.test.tsx
+++ b/src/components/quoted-status.test.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeStatus, normalizeAccount } from 'soapbox/normalizers';
+import { render, screen, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeStatus, normalizeAccount } from 'soapbox/normalizers/index.ts';
 
-import QuotedStatus from './quoted-status';
+import QuotedStatus from './quoted-status.tsx';
 
-import type { ReducerStatus } from 'soapbox/reducers/statuses';
+import type { ReducerStatus } from 'soapbox/reducers/statuses.ts';
 
 describe('<QuotedStatus />', () => {
   it('renders content', () => {
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index b90e753e6..657240f3b 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -1,22 +1,23 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import StatusMedia from 'soapbox/components/status-media';
-import { Stack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useSettings } from 'soapbox/hooks';
-import { defaultMediaVisibility } from 'soapbox/utils/status';
+import StatusMedia from 'soapbox/components/status-media.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
-import EventPreview from './event-preview';
-import OutlineBox from './outline-box';
-import QuotedStatusIndicator from './quoted-status-indicator';
-import StatusContent from './status-content';
-import StatusReplyMentions from './status-reply-mentions';
-import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
+import EventPreview from './event-preview.tsx';
+import OutlineBox from './outline-box.tsx';
+import QuotedStatusIndicator from './quoted-status-indicator.tsx';
+import StatusContent from './status-content.tsx';
+import StatusReplyMentions from './status-reply-mentions.tsx';
+import SensitiveContentOverlay from './statuses/sensitive-content-overlay.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
@@ -85,7 +86,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   if (onCancel) {
     actions = {
       onActionClick: handleClose,
-      actionIcon: require('@tabler/icons/outline/x.svg'),
+      actionIcon: xIcon,
       actionAlignment: 'top',
       actionTitle: intl.formatMessage(messages.cancel),
     };
diff --git a/src/components/radio.tsx b/src/components/radio.tsx
index 9c1714e9d..806bc8a8e 100644
--- a/src/components/radio.tsx
+++ b/src/components/radio.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import { Children, cloneElement } from 'react';
 
-import List, { ListItem } from './list';
+import List, { ListItem } from './list.tsx';
 
 interface IRadioGroup {
   onChange: React.ChangeEventHandler;
@@ -8,8 +8,8 @@ interface IRadioGroup {
 }
 
 const RadioGroup = ({ onChange, children }: IRadioGroup) => {
-  const childrenWithProps = React.Children.map(children, child =>
-    React.cloneElement(child, { onChange }),
+  const childrenWithProps = Children.map(children, child =>
+    cloneElement(child, { onChange }),
   );
 
   return <List>{childrenWithProps}</List>;
diff --git a/src/components/relative-timestamp.tsx b/src/components/relative-timestamp.tsx
index c9b2780f2..59b475174 100644
--- a/src/components/relative-timestamp.tsx
+++ b/src/components/relative-timestamp.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { Component } from 'react';
 import { injectIntl, defineMessages, IntlShape, FormatDateOptions } from 'react-intl';
 
-import Text, { IText } from './ui/text/text';
+import Text, { IText } from './ui/text.tsx';
 
 const messages = defineMessages({
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
@@ -124,7 +124,7 @@ interface RelativeTimestampState {
 }
 
 /** Displays a timestamp compared to the current time, eg "1m" for one minute ago. */
-class RelativeTimestamp extends React.Component<RelativeTimestampProps, RelativeTimestampState> {
+class RelativeTimestamp extends Component<RelativeTimestampProps, RelativeTimestampState> {
 
   _timer: NodeJS.Timeout | undefined;
 
diff --git a/src/components/safe-embed.tsx b/src/components/safe-embed.tsx
index 3e2668648..acb93d67c 100644
--- a/src/components/safe-embed.tsx
+++ b/src/components/safe-embed.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface ISafeEmbed {
   /** Styles for the outer frame element. */
diff --git a/src/components/scroll-context.tsx b/src/components/scroll-context.tsx
index 707ef7e76..74470e279 100644
--- a/src/components/scroll-context.tsx
+++ b/src/components/scroll-context.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 interface IScrollContext {
@@ -9,6 +9,12 @@ export const ScrollContext: React.FC<IScrollContext> = ({ children }) => {
   const location = useLocation<{ soapboxModalKey?: number } | undefined>();
 
   useEffect(() => {
+    // HACK: Don't scroll when navigating between posts.
+    // Surely there's a better way, so that components can negate the behavior from within instead of out here.
+    if (location.pathname.includes('/posts/')) {
+      return;
+    }
+
     if (!location.state?.soapboxModalKey) {
       window.scrollTo(0, 0);
     }
diff --git a/src/components/scroll-top-button.test.tsx b/src/components/scroll-top-button.test.tsx
index d016ade8f..0acba26fb 100644
--- a/src/components/scroll-top-button.test.tsx
+++ b/src/components/scroll-top-button.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import { defineMessages } from 'react-intl';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import ScrollTopButton from './scroll-top-button';
+import ScrollTopButton from './scroll-top-button.tsx';
 
 const messages = defineMessages({
   queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
diff --git a/src/components/scroll-top-button.tsx b/src/components/scroll-top-button.tsx
index 489aa0503..3bbaf4663 100644
--- a/src/components/scroll-top-button.tsx
+++ b/src/components/scroll-top-button.tsx
@@ -1,9 +1,11 @@
+import arrowBarToUpIcon from '@tabler/icons/outline/arrow-bar-to-up.svg';
 import throttle from 'lodash/throttle';
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
 
-import { Icon, Text } from 'soapbox/components/ui';
-import { useSettings } from 'soapbox/hooks';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 interface IScrollTopButton {
   /** Callback when clicked, and also when scrolled to the top. */
@@ -92,7 +94,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
       >
         <Icon
           className='size-4'
-          src={require('@tabler/icons/outline/arrow-bar-to-up.svg')}
+          src={arrowBarToUpIcon}
         />
 
         <Text theme='inherit' size='sm'>
diff --git a/src/components/scrollable-list.tsx b/src/components/scrollable-list.tsx
index 8a352034a..2b0f2dcb8 100644
--- a/src/components/scrollable-list.tsx
+++ b/src/components/scrollable-list.tsx
@@ -1,12 +1,13 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import { useEffect, useRef, useMemo, useCallback, forwardRef } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso';
 
-import { useSettings } from 'soapbox/hooks';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
-import LoadMore from './load-more';
-import { Card, Spinner } from './ui';
+import LoadMore from './load-more.tsx';
 
 /** Custom Viruoso component context. */
 type Context = {
@@ -30,7 +31,7 @@ const Item: Components<JSX.Element, Context>['Item'] = ({ context, ...rest }) =>
 
 /** Custom Virtuoso List component for the outer container. */
 // Ensure the className winds up here
-const List: Components<JSX.Element, Context>['List'] = React.forwardRef((props, ref) => {
+const List: Components<JSX.Element, Context>['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} className={context?.listClassName} {...rest} />;
 });
@@ -84,7 +85,7 @@ interface IScrollableList extends VirtuosoProps<any, any> {
 }
 
 /** Legacy ScrollableList with Virtuoso for backwards-compatibility. */
-const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
+const ScrollableList = forwardRef<VirtuosoHandle, IScrollableList>(({
   scrollKey,
   prepend = null,
   alwaysPrepend,
diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
index 292928aaf..ea1eb1db9 100644
--- a/src/components/sentry-feedback-form.tsx
+++ b/src/components/sentry-feedback-form.tsx
@@ -1,9 +1,14 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Textarea, Form, Button, FormGroup, FormActions, Text } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
-import { captureSentryFeedback } from 'soapbox/sentry';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { captureSentryFeedback } from 'soapbox/sentry.ts';
 
 interface ISentryFeedbackForm {
   eventId: string;
diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index f5ab9fcd3..0a90e0335 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -1,21 +1,46 @@
-/* eslint-disable jsx-a11y/interactive-supports-focus */
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import codeIcon from '@tabler/icons/outline/code.svg';
+import filterIcon from '@tabler/icons/outline/filter.svg';
+import hashIcon from '@tabler/icons/outline/hash.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, NavLink } from 'react-router-dom';
 
-import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
-import { getSettings } from 'soapbox/actions/settings';
-import { closeSidebar } from 'soapbox/actions/sidebar';
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import { Stack, Divider, HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
-import ProfileStats from 'soapbox/features/ui/components/profile-stats';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
-import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
-import { makeGetOtherAccounts } from 'soapbox/selectors';
+import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { closeSidebar } from 'soapbox/actions/sidebar.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import ProfileStats from 'soapbox/features/ui/components/profile-stats.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
+import { makeGetOtherAccounts } from 'soapbox/selectors/index.ts';
 
-import type { Account as AccountEntity } from 'soapbox/schemas/account';
+import type { Account as AccountEntity } from 'soapbox/schemas/account.ts';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -92,9 +117,9 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const { instance } = useInstance();
   const settingsNotifications = useSettingsNotifications();
 
-  const closeButtonRef = React.useRef(null);
+  const closeButtonRef = useRef(null);
 
-  const [switcher, setSwitcher] = React.useState(false);
+  const [switcher, setSwitcher] = useState(false);
 
   const onClose = () => dispatch(closeSidebar());
 
@@ -122,14 +147,16 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   };
 
   const renderAccount = (account: AccountEntity) => (
-    <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
-      <div className='pointer-events-none'>
-        <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
-      </div>
-    </a>
+    <Link to={'/'} className='inline-flex'>
+      <button className='!block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleSwitchAccount(account)} key={account.id}>
+        <div className='pointer-events-none max-w-[288px]'>
+          <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
+        </div>
+      </button>
+    </Link>
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchOwnAccounts());
   }, []);
 
@@ -163,7 +190,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
           <IconButton
             title={intl.formatMessage(messages.close)}
             onClick={handleClose}
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             ref={closeButtonRef}
             iconClassName='h-6 w-6'
             className='absolute right-0 top-0 -mr-11 mt-2 text-gray-600 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300'
@@ -186,7 +213,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to={`/@${account.acct}`}
-                    icon={require('@tabler/icons/outline/user.svg')}
+                    icon={userIcon}
                     text={intl.formatMessage(messages.profile)}
                     onClick={onClose}
                   />
@@ -194,7 +221,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {(account.locked || followRequestsCount > 0) && (
                     <SidebarLink
                       to='/follow_requests'
-                      icon={require('@tabler/icons/outline/user-plus.svg')}
+                      icon={userPlusIcon}
                       text={intl.formatMessage(messages.followRequests)}
                       onClick={onClose}
                     />
@@ -203,7 +230,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.bookmarks && (
                     <SidebarLink
                       to='/bookmarks'
-                      icon={require('@tabler/icons/outline/bookmark.svg')}
+                      icon={bookmarkIcon}
                       text={intl.formatMessage(messages.bookmarks)}
                       onClick={onClose}
                     />
@@ -212,7 +239,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.groups && (
                     <SidebarLink
                       to='/groups'
-                      icon={require('@tabler/icons/outline/circles.svg')}
+                      icon={circlesIcon}
                       text={intl.formatMessage(messages.groups)}
                       onClick={onClose}
                     />
@@ -221,7 +248,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.lists && (
                     <SidebarLink
                       to='/lists'
-                      icon={require('@tabler/icons/outline/list.svg')}
+                      icon={listIcon}
                       text={intl.formatMessage(messages.lists)}
                       onClick={onClose}
                     />
@@ -230,7 +257,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.events && (
                     <SidebarLink
                       to='/events'
-                      icon={require('@tabler/icons/outline/calendar-event.svg')}
+                      icon={calendarEventIcon}
                       text={intl.formatMessage(messages.events)}
                       onClick={onClose}
                     />
@@ -239,7 +266,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {settings.get('isDeveloper') && (
                     <SidebarLink
                       to='/developers'
-                      icon={require('@tabler/icons/outline/code.svg')}
+                      icon={codeIcon}
                       text={intl.formatMessage(messages.developers)}
                       onClick={onClose}
                     />
@@ -250,7 +277,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                     <SidebarLink
                       to='/timeline/local'
-                      icon={features.federating ? require('@tabler/icons/outline/at.svg') : require('@tabler/icons/outline/world.svg')}
+                      icon={features.federating ? atIcon : worldIcon}
                       text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                       onClick={onClose}
                     />
@@ -258,7 +285,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                     {features.federating && (
                       <SidebarLink
                         to='/timeline/global'
-                        icon={require('@tabler/icons/outline/world.svg')}
+                        icon={worldIcon}
                         text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
                         onClick={onClose}
                       />
@@ -270,7 +297,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.blocks && (
                     <SidebarLink
                       to='/blocks'
-                      icon={require('@tabler/icons/outline/ban.svg')}
+                      icon={banIcon}
                       text={intl.formatMessage(messages.blocks)}
                       onClick={onClose}
                     />
@@ -278,14 +305,14 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/mutes'
-                    icon={require('@tabler/icons/outline/circle-x.svg')}
+                    icon={circleXIcon}
                     text={intl.formatMessage(messages.mutes)}
                     onClick={onClose}
                   />
 
                   <SidebarLink
                     to='/settings/preferences'
-                    icon={require('@tabler/icons/outline/settings.svg')}
+                    icon={settingsIcon}
                     text={intl.formatMessage(messages.preferences)}
                     onClick={onClose}
                     count={settingsNotifications.size}
@@ -294,7 +321,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.federating && (
                     <SidebarLink
                       to='/domain_blocks'
-                      icon={require('@tabler/icons/outline/ban.svg')}
+                      icon={banIcon}
                       text={intl.formatMessage(messages.domainBlocks)}
                       onClick={onClose}
                     />
@@ -303,7 +330,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {(features.filters || features.filtersV2) && (
                     <SidebarLink
                       to='/filters'
-                      icon={require('@tabler/icons/outline/filter.svg')}
+                      icon={filterIcon}
                       text={intl.formatMessage(messages.filters)}
                       onClick={onClose}
                     />
@@ -312,7 +339,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.followedHashtagsList && (
                     <SidebarLink
                       to='/followed_tags'
-                      icon={require('@tabler/icons/outline/hash.svg')}
+                      icon={hashIcon}
                       text={intl.formatMessage(messages.followedTags)}
                       onClick={onClose}
                     />
@@ -321,7 +348,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {account.admin && (
                     <SidebarLink
                       to='/soapbox/config'
-                      icon={require('@tabler/icons/outline/settings.svg')}
+                      icon={settingsIcon}
                       text={intl.formatMessage(messages.soapboxConfig)}
                       onClick={onClose}
                     />
@@ -331,7 +358,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/logout'
-                    icon={require('@tabler/icons/outline/logout.svg')}
+                    icon={logoutIcon}
                     text={intl.formatMessage(messages.logout)}
                     onClick={onClickLogOut}
                   />
@@ -346,7 +373,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         </Text>
 
                         <Icon
-                          src={require('@tabler/icons/outline/chevron-down.svg')}
+                          src={chevronDownIcon}
                           className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
                             'rotate-180': switcher,
                           })}
@@ -359,7 +386,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
+                          <Icon className='size-4 text-primary-500' src={plusIcon} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>
diff --git a/src/components/sidebar-navigation-link.tsx b/src/components/sidebar-navigation-link.tsx
index e5aca128e..fdf0592db 100644
--- a/src/components/sidebar-navigation-link.tsx
+++ b/src/components/sidebar-navigation-link.tsx
@@ -1,8 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
-import { Icon, Text } from './ui';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface ISidebarNavigationLink {
   /** Notification count, if any. */
@@ -22,7 +23,7 @@ interface ISidebarNavigationLink {
 }
 
 /** Desktop sidebar navigation link. */
-const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
+const SidebarNavigationLink = forwardRef((props: ISidebarNavigationLink, ref: React.ForwardedRef<HTMLAnchorElement>): JSX.Element => {
   const { icon, activeIcon, text, to = '', count, countMax, onClick } = props;
   const { pathname } = useLocation();
 
diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx
index adab520b4..e5c857a2a 100644
--- a/src/components/sidebar-navigation.tsx
+++ b/src/components/sidebar-navigation.tsx
@@ -1,14 +1,39 @@
-import React from 'react';
+import bellFilledIcon from '@tabler/icons/filled/bell.svg';
+import circlesFilledIcon from '@tabler/icons/filled/circles.svg';
+import homeFilledIcon from '@tabler/icons/filled/home.svg';
+import settingsFilledIcon from '@tabler/icons/filled/settings.svg';
+import userFilledIcon from '@tabler/icons/filled/user.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import codeIcon from '@tabler/icons/outline/code.svg';
+import dashboardIcon from '@tabler/icons/outline/dashboard.svg';
+import dotsCircleHorizontalIcon from '@tabler/icons/outline/dots-circle-horizontal.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { Stack } from 'soapbox/components/ui';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import ComposeButton from 'soapbox/features/ui/components/compose-button';
-import { useAppSelector, useFeatures, useOwnAccount, useSettings, useInstance } from 'soapbox/hooks';
-import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import ComposeButton from 'soapbox/features/ui/components/compose-button.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
-import DropdownMenu, { Menu } from './dropdown-menu';
-import SidebarNavigationLink from './sidebar-navigation-link';
+import DropdownMenu, { Menu } from './dropdown-menu/index.ts';
+import SidebarNavigationLink from './sidebar-navigation-link.tsx';
 
 const messages = defineMessages({
   follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
@@ -43,7 +68,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/follow_requests',
           text: intl.formatMessage(messages.follow_requests),
-          icon: require('@tabler/icons/outline/user-plus.svg'),
+          icon: userPlusIcon,
           count: followRequestsCount,
         });
       }
@@ -52,7 +77,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/bookmarks',
           text: intl.formatMessage(messages.bookmarks),
-          icon: require('@tabler/icons/outline/bookmark.svg'),
+          icon: bookmarkIcon,
         });
       }
 
@@ -60,7 +85,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/lists',
           text: intl.formatMessage(messages.lists),
-          icon: require('@tabler/icons/outline/list.svg'),
+          icon: listIcon,
         });
       }
 
@@ -68,14 +93,14 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/events',
           text: intl.formatMessage(messages.events),
-          icon: require('@tabler/icons/outline/calendar-event.svg'),
+          icon: calendarEventIcon,
         });
       }
 
       if (isDeveloper) {
         menu.push({
           to: '/developers',
-          icon: require('@tabler/icons/outline/code.svg'),
+          icon: codeIcon,
           text: intl.formatMessage(messages.developers),
         });
       }
@@ -92,7 +117,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/chats'
-          icon={require('@tabler/icons/outline/messages.svg')}
+          icon={messagesIcon}
           count={unreadChatsCount}
           countMax={9}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
@@ -104,7 +129,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/messages'
-          icon={require('@tabler/icons/outline/mail.svg')}
+          icon={mailIcon}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );
@@ -118,14 +143,14 @@ const SidebarNavigation = () => {
       <Stack space={2}>
         <SidebarNavigationLink
           to='/'
-          icon={require('@tabler/icons/outline/home.svg')}
-          activeIcon={require('@tabler/icons/filled/home.svg')}
+          icon={homeIcon}
+          activeIcon={homeFilledIcon}
           text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
         />
 
         <SidebarNavigationLink
           to='/search'
-          icon={require('@tabler/icons/outline/search.svg')}
+          icon={searchIcon}
           text={<FormattedMessage id='tabs_bar.search' defaultMessage='Discover' />}
         />
 
@@ -133,8 +158,8 @@ const SidebarNavigation = () => {
           <>
             <SidebarNavigationLink
               to='/notifications'
-              icon={require('@tabler/icons/outline/bell.svg')}
-              activeIcon={require('@tabler/icons/filled/bell.svg')}
+              icon={bellIcon}
+              activeIcon={bellFilledIcon}
               count={notificationCount}
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
@@ -144,23 +169,23 @@ const SidebarNavigation = () => {
             {features.groups && (
               <SidebarNavigationLink
                 to='/groups'
-                icon={require('@tabler/icons/outline/circles.svg')}
-                activeIcon={require('@tabler/icons/filled/circles.svg')}
+                icon={circlesIcon}
+                activeIcon={circlesFilledIcon}
                 text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
               />
             )}
 
             <SidebarNavigationLink
               to={`/@${account.acct}`}
-              icon={require('@tabler/icons/outline/user.svg')}
-              activeIcon={require('@tabler/icons/filled/user.svg')}
+              icon={userIcon}
+              activeIcon={userFilledIcon}
               text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
             />
 
             <SidebarNavigationLink
               to='/settings'
-              icon={require('@tabler/icons/outline/settings.svg')}
-              activeIcon={require('@tabler/icons/filled/settings.svg')}
+              icon={settingsIcon}
+              activeIcon={settingsFilledIcon}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
               count={settingsNotifications.size}
             />
@@ -168,7 +193,7 @@ const SidebarNavigation = () => {
             {account.staff && (
               <SidebarNavigationLink
                 to='/soapbox/admin'
-                icon={require('@tabler/icons/outline/dashboard.svg')}
+                icon={dashboardIcon}
                 count={dashboardCount}
                 text={<FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />}
               />
@@ -181,7 +206,7 @@ const SidebarNavigation = () => {
             {(account || !restrictUnauth.timelines.local) && (
               <SidebarNavigationLink
                 to='/timeline/local'
-                icon={features.federating ? require('@tabler/icons/outline/at.svg') : require('@tabler/icons/outline/world.svg')}
+                icon={features.federating ? atIcon : worldIcon}
                 text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
               />
             )}
@@ -189,7 +214,7 @@ const SidebarNavigation = () => {
             {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
               <SidebarNavigationLink
                 to='/timeline/global'
-                icon={require('@tabler/icons/outline/world.svg')}
+                icon={worldIcon}
                 text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
               />
             )}
@@ -199,7 +224,7 @@ const SidebarNavigation = () => {
         {menu.length > 0 && (
           <DropdownMenu items={menu} placement='top'>
             <SidebarNavigationLink
-              icon={require('@tabler/icons/outline/dots-circle-horizontal.svg')}
+              icon={dotsCircleHorizontalIcon}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />
           </DropdownMenu>
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 3e4712a4c..15186694b 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -1,17 +1,20 @@
-import React, { type ErrorInfo, useRef, useState } from 'react';
+import { type ErrorInfo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
 
-import { NODE_ENV } from 'soapbox/build-config';
-import { HStack, Text, Stack, Textarea } from 'soapbox/components/ui';
-import { useSoapboxConfig } from 'soapbox/hooks';
-import { captureSentryException } from 'soapbox/sentry';
-import KVStore from 'soapbox/storage/kv-store';
-import sourceCode from 'soapbox/utils/code';
-import { unregisterSW } from 'soapbox/utils/sw';
+import { NODE_ENV } from 'soapbox/build-config.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { captureSentryException } from 'soapbox/sentry.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { unregisterSW } from 'soapbox/utils/sw.ts';
 
-import SentryFeedbackForm from './sentry-feedback-form';
-import SiteLogo from './site-logo';
+import SentryFeedbackForm from './sentry-feedback-form.tsx';
+import SiteLogo from './site-logo.tsx';
 
 interface ISiteErrorBoundary {
   children: React.ReactNode;
diff --git a/src/components/site-logo.tsx b/src/components/site-logo.tsx
index e42d19e52..eeaebe94d 100644
--- a/src/components/site-logo.tsx
+++ b/src/components/site-logo.tsx
@@ -1,7 +1,10 @@
 import clsx from 'clsx';
-import React from 'react';
 
-import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
+import soapboxLogoWhiteSrc from 'soapbox/assets/images/soapbox-logo-white.svg';
+import soapboxLogoSrc from 'soapbox/assets/images/soapbox-logo.svg';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 interface ISiteLogo extends React.ComponentProps<'img'> {
   /** Extra class names for the <img> element. */
@@ -19,9 +22,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   if (theme === 'dark') darkMode = true;
 
   /** Soapbox logo. */
-  const soapboxLogo = darkMode
-    ? require('soapbox/assets/images/soapbox-logo-white.svg')
-    : require('soapbox/assets/images/soapbox-logo.svg');
+  const soapboxLogo = darkMode ? soapboxLogoWhiteSrc : soapboxLogoSrc;
 
   // Use the right logo if provided, then use fallbacks.
   const getSrc = () => {
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 93b03cd15..3878cd43d 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -1,34 +1,70 @@
-import React from 'react';
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import arrowsVerticalIcon from '@tabler/icons/outline/arrows-vertical.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bellOffIcon from '@tabler/icons/outline/bell-off.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import bookmarkOffIcon from '@tabler/icons/outline/bookmark-off.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import clipboardCopyIcon from '@tabler/icons/outline/clipboard-copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import foldersIcon from '@tabler/icons/outline/folders.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messageCircleIcon from '@tabler/icons/outline/message-circle.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
+import quoteIcon from '@tabler/icons/outline/quote.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
+import thumbDownIcon from '@tabler/icons/outline/thumb-down.svg';
+import thumbUpIcon from '@tabler/icons/outline/thumb-up.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
-import { blockAccount } from 'soapbox/actions/accounts';
-import { launchChat } from 'soapbox/actions/chats';
-import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose';
-import { editEvent } from 'soapbox/actions/events';
-import { pinToGroup, toggleBookmark, toggleDislike, toggleFavourite, togglePin, toggleReblog, unpinFromGroup } from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
-import { initMuteModal } from 'soapbox/actions/mutes';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses';
-import { deleteFromTimelines } from 'soapbox/actions/timelines';
-import { useBlockGroupMember, useGroup, useGroupRelationship, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks';
-import { useDeleteGroupStatus } from 'soapbox/api/hooks/groups/useDeleteGroupStatus';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import StatusActionButton from 'soapbox/components/status-action-button';
-import StatusReactionWrapper from 'soapbox/components/status-reaction-wrapper';
-import { HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
-import copy from 'soapbox/utils/copy';
-import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji-reacts';
+import { blockAccount } from 'soapbox/actions/accounts.ts';
+import { launchChat } from 'soapbox/actions/chats.ts';
+import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'soapbox/actions/compose.ts';
+import { editEvent } from 'soapbox/actions/events.ts';
+import { pinToGroup, toggleBookmark, toggleDislike, toggleFavourite, togglePin, toggleReblog, unpinFromGroup } from 'soapbox/actions/interactions.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation.tsx';
+import { initMuteModal } from 'soapbox/actions/mutes.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses.ts';
+import { deleteFromTimelines } from 'soapbox/actions/timelines.ts';
+import { useDeleteGroupStatus } from 'soapbox/api/hooks/groups/useDeleteGroupStatus.ts';
+import { useBlockGroupMember, useGroup, useGroupRelationship, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import StatusActionButton from 'soapbox/components/status-action-button.tsx';
+import StatusReactionWrapper from 'soapbox/components/status-reaction-wrapper.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
+import copy from 'soapbox/utils/copy.ts';
+import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji-reacts.ts';
 
-import GroupPopover from './groups/popover/group-popover';
+import GroupPopover from './groups/popover/group-popover.tsx';
 
-import type { Menu } from 'soapbox/components/dropdown-menu';
-import type { Group, Status } from 'soapbox/types/entities';
+import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
+import type { Group, Status } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
@@ -238,7 +274,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         dispatch(deleteStatus(status.id, withRedraft));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: withRedraft ? require('@tabler/icons/outline/edit.svg') : require('@tabler/icons/outline/trash.svg'),
+          icon: withRedraft ? editIcon : trashIcon,
           heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
           message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
           confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@@ -319,7 +355,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     const account = status.account;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
       message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
       confirm: intl.formatMessage(messages.blockConfirm),
@@ -409,7 +445,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     if (expandable) {
       menu.push({
         text: intl.formatMessage(messages.open),
-        icon: require('@tabler/icons/outline/arrows-vertical.svg'),
+        icon: arrowsVerticalIcon,
         to: `/@${status.account.acct}/posts/${status.id}`,
       });
     }
@@ -418,14 +454,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+        icon: clipboardCopyIcon,
       });
 
       if (features.embeds && account.local) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: handleEmbed,
-          icon: require('@tabler/icons/outline/share.svg'),
+          icon: shareIcon,
         });
       }
     }
@@ -436,7 +472,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
-        icon: require('@tabler/icons/outline/external-link.svg'),
+        icon: externalLinkIcon,
         href: externalNostrUrl || status.uri,
         target: '_blank',
       });
@@ -454,7 +490,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpinFromGroup : messages.pinToGroup),
           action: handleGroupPinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       }
     }
@@ -463,7 +499,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
+        icon: status.bookmarked ? bookmarkOffIcon : bookmarkIcon,
       });
     }
 
@@ -471,7 +507,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(status.pleroma.get('bookmark_folder') ? messages.bookmarkChangeFolder : messages.bookmarkSetFolder),
         action: handleBookmarkFolderClick,
-        icon: require('@tabler/icons/outline/folders.svg'),
+        icon: foldersIcon,
       });
     }
 
@@ -480,7 +516,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     menu.push({
       text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
       action: handleConversationMuteClick,
-      icon: mutingConversation ? require('@tabler/icons/outline/bell.svg') : require('@tabler/icons/outline/bell-off.svg'),
+      icon: mutingConversation ? bellIcon : bellOffIcon,
     });
 
     menu.push(null);
@@ -490,14 +526,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: handlePinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       } else {
         if (status.visibility === 'private') {
           menu.push({
             text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
             action: handleReblogClick,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         }
       }
@@ -505,20 +541,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: handleDeleteClick,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
       if (features.editStatuses) {
         menu.push({
           text: intl.formatMessage(messages.edit),
           action: handleEditClick,
-          icon: require('@tabler/icons/outline/edit.svg'),
+          icon: editIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.redraft),
           action: handleRedraftClick,
-          icon: require('@tabler/icons/outline/edit.svg'),
+          icon: editIcon,
           destructive: true,
         });
       }
@@ -526,20 +562,20 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: handleMentionClick,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (status.account.pleroma?.accepts_chat_messages === true) {
         menu.push({
           text: intl.formatMessage(messages.chat, { name: username }),
           action: handleChatClick,
-          icon: require('@tabler/icons/outline/messages.svg'),
+          icon: messagesIcon,
         });
       } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -547,7 +583,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       if (features.groupsMuting && status.group) {
         menu.push({
           text: isMutingGroup ? intl.formatMessage(messages.unmuteGroup) : intl.formatMessage(messages.muteGroup),
-          icon: require('@tabler/icons/outline/volume-3.svg'),
+          icon: volume3Icon,
           action: isMutingGroup ? handleUnmuteGroupClick : handleMuteGroupClick,
         });
         menu.push(null);
@@ -556,19 +592,19 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: handleMuteClick,
-        icon: require('@tabler/icons/outline/volume-3.svg'),
+        icon: volume3Icon,
       });
       if (features.blocks) {
         menu.push({
           text: intl.formatMessage(messages.block, { name: username }),
           action: handleBlockClick,
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: handleReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -590,7 +626,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: 'Ban from Group',
           action: handleBlockFromGroup,
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
           destructive: true,
         });
       }
@@ -599,7 +635,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         menu.push({
           text: intl.formatMessage(messages.groupModDelete),
           action: handleDeleteFromGroup,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -611,28 +647,28 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: username }),
         action: onModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
 
       if (isAdmin) {
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.id}/`,
-          icon: require('@tabler/icons/outline/pencil.svg'),
+          icon: pencilIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
       });
 
       if (!ownAccount) {
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -670,14 +706,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
 
   const menu = _makeMenu(publicStatus);
-  let reblogIcon = require('@tabler/icons/outline/repeat.svg');
+  let reblogIcon = repeatIcon;
   let replyTitle;
   let replyDisabled = false;
 
   if (status.visibility === 'direct') {
-    reblogIcon = require('@tabler/icons/outline/mail.svg');
+    reblogIcon = mailIcon;
   } else if (status.visibility === 'private') {
-    reblogIcon = require('@tabler/icons/outline/lock.svg');
+    reblogIcon = lockIcon;
   }
 
   if ((status.group as Group)?.membership_required && !groupRelationship?.member) {
@@ -688,11 +724,11 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const reblogMenu = [{
     text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
     action: handleReblogClick,
-    icon: require('@tabler/icons/outline/repeat.svg'),
+    icon: repeatIcon,
   }, {
     text: intl.formatMessage(messages.quotePost),
     action: handleQuoteClick,
-    icon: require('@tabler/icons/outline/quote.svg'),
+    icon: quoteIcon,
   }];
 
   const reblogButton = (
@@ -741,7 +777,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         >
           <StatusActionButton
             title={replyTitle}
-            icon={require('@tabler/icons/outline/message-circle.svg')}
+            icon={messageCircleIcon}
             onClick={handleReplyClick}
             count={replyCount}
             text={withLabels ? intl.formatMessage(messages.reply) : undefined}
@@ -766,7 +802,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           <StatusReactionWrapper statusId={status.id}>
             <StatusActionButton
               title={meEmojiTitle}
-              icon={require('@tabler/icons/outline/heart.svg')}
+              icon={heartIcon}
               filled
               color='accent'
               active={Boolean(meEmojiName)}
@@ -779,7 +815,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         ) : (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}
-            icon={features.dislikes ? require('@tabler/icons/outline/thumb-up.svg') : require('@tabler/icons/outline/heart.svg')}
+            icon={features.dislikes ? thumbUpIcon : heartIcon}
             color='accent'
             filled
             onClick={handleFavouriteClick}
@@ -793,7 +829,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {features.dislikes && (
           <StatusActionButton
             title={intl.formatMessage(messages.disfavourite)}
-            icon={require('@tabler/icons/outline/thumb-down.svg')}
+            icon={thumbDownIcon}
             color='accent'
             filled
             onClick={handleDislikeClick}
@@ -807,7 +843,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {(acceptsZaps) && (
           <StatusActionButton
             title={intl.formatMessage(messages.zap)}
-            icon={require('@tabler/icons/outline/bolt.svg')}
+            icon={boltIcon}
             color='accent'
             filled
             onClick={handleZapClick}
@@ -821,7 +857,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         {canShare && (
           <StatusActionButton
             title={intl.formatMessage(messages.share)}
-            icon={require('@tabler/icons/outline/upload.svg')}
+            icon={uploadIcon}
             onClick={handleShareClick}
             theme={statusActionButtonTheme}
           />
@@ -830,7 +866,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
         <DropdownMenu items={menu} status={status}>
           <StatusActionButton
             title={intl.formatMessage(messages.more)}
-            icon={require('@tabler/icons/outline/dots.svg')}
+            icon={dotsIcon}
             theme={statusActionButtonTheme}
           />
         </DropdownMenu>
diff --git a/src/components/status-action-button.tsx b/src/components/status-action-button.tsx
index c435227a7..b72218b4d 100644
--- a/src/components/status-action-button.tsx
+++ b/src/components/status-action-button.tsx
@@ -1,10 +1,12 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { Text, Icon, Emoji } from 'soapbox/components/ui';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import type { EmojiReaction } from 'soapbox/schemas';
+import type { EmojiReaction } from 'soapbox/schemas/index.ts';
 
 const COLORS = {
   accent: 'accent',
@@ -38,7 +40,7 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   theme?: 'default' | 'inverse';
 }
 
-const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
+const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
   const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', ...filteredProps } = props;
 
   const renderIcon = () => {
diff --git a/src/components/status-content.tsx b/src/components/status-content.tsx
index 8d537aa62..45ff497c8 100644
--- a/src/components/status-content.tsx
+++ b/src/components/status-content.tsx
@@ -1,20 +1,21 @@
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
 import clsx from 'clsx';
 import parse, { Element, type HTMLReactParserOptions, domToReact, type DOMNode } from 'html-react-parser';
-import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
+import { useState, useRef, useLayoutEffect, useMemo, memo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich-content';
+import Icon from 'soapbox/components/icon.tsx';
+import { onlyEmoji as isOnlyEmoji } from 'soapbox/utils/rich-content.ts';
 
-import { getTextDirection } from '../utils/rtl';
+import { getTextDirection } from '../utils/rtl.ts';
 
-import HashtagLink from './hashtag-link';
-import Markup from './markup';
-import Mention from './mention';
-import Poll from './polls/poll';
+import HashtagLink from './hashtag-link.tsx';
+import Markup from './markup.tsx';
+import Mention from './mention.tsx';
+import Poll from './polls/poll.tsx';
 
-import type { Sizes } from 'soapbox/components/ui/text/text';
-import type { Status } from 'soapbox/types/entities';
+import type { Sizes } from 'soapbox/components/ui/text.tsx';
+import type { Status } from 'soapbox/types/entities.ts';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
 const BIG_EMOJI_LIMIT = 10;
@@ -27,7 +28,7 @@ interface IReadMoreButton {
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
   <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
     <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-    <Icon className='inline-block size-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
+    <Icon className='inline-block size-5' src={chevronRightIcon} />
   </button>
 );
 
@@ -201,4 +202,4 @@ const StatusContent: React.FC<IStatusContent> = ({
   }
 };
 
-export default React.memo(StatusContent);
+export default memo(StatusContent);
diff --git a/src/components/status-hover-card.tsx b/src/components/status-hover-card.tsx
index dbf1d8bd2..5c8990610 100644
--- a/src/components/status-hover-card.tsx
+++ b/src/components/status-hover-card.tsx
@@ -1,18 +1,19 @@
 import { useFloating } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import {
   closeStatusHoverCard,
   updateStatusHoverCard,
-} from 'soapbox/actions/status-hover-card';
-import { fetchStatus } from 'soapbox/actions/statuses';
-import StatusContainer from 'soapbox/containers/status-container';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+} from 'soapbox/actions/status-hover-card.ts';
+import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import { showStatusHoverCard } from './hover-status-wrapper';
-import { Card, CardBody } from './ui';
+import { showStatusHoverCard } from './hover-status-wrapper.tsx';
 
 interface IStatusHoverCard {
   visible?: boolean;
diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx
index dec04a67a..5380d7611 100644
--- a/src/components/status-list.tsx
+++ b/src/components/status-list.tsx
@@ -1,19 +1,19 @@
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useRef, useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import LoadGap from 'soapbox/components/load-gap';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import StatusContainer from 'soapbox/containers/status-container';
-import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import PendingStatus from 'soapbox/features/ui/components/pending-status';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import LoadGap from 'soapbox/components/load-gap.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { IScrollableList } from 'soapbox/components/scrollable-list';
+import type { IScrollableList } from 'soapbox/components/scrollable-list.tsx';
 
 interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
   /** Unique key to preserve the scroll position when navigating back. */
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index 4b0829d52..5160e43d0 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -1,15 +1,16 @@
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
-import { openModal } from 'soapbox/actions/modals';
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import PreviewCard from 'soapbox/components/preview-card';
-import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview';
-import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
-import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch } from 'soapbox/hooks';
+
+import { openModal } from 'soapbox/actions/modals.ts';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import PreviewCard from 'soapbox/components/preview-card.tsx';
+import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview.tsx';
+import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card.tsx';
+import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { List as ImmutableList } from 'immutable';
-import type { Status, Attachment } from 'soapbox/types/entities';
+import type { Status, Attachment } from 'soapbox/types/entities.ts';
 
 interface IStatusMedia {
   /** Status entity to render media for. */
diff --git a/src/components/status-reaction-wrapper.tsx b/src/components/status-reaction-wrapper.tsx
index 4bac8c878..d39de8297 100644
--- a/src/components/status-reaction-wrapper.tsx
+++ b/src/components/status-reaction-wrapper.tsx
@@ -1,11 +1,15 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, cloneElement } from 'react';
 
-import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
-import { openModal } from 'soapbox/actions/modals';
-import { EmojiSelector, Portal } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
-import { userTouching } from 'soapbox/is-mobile';
-import { getReactForStatus } from 'soapbox/utils/emoji-reacts';
+import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import EmojiSelector from 'soapbox/components/ui/emoji-selector.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
+import { getReactForStatus } from 'soapbox/utils/emoji-reacts.ts';
 
 interface IStatusReactionWrapper {
   statusId: string;
@@ -100,7 +104,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
 
   return (
     <div className='relative' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      {React.cloneElement(children, {
+      {cloneElement(children, {
         onClick: handleClick,
         ref: setReferenceElement,
       })}
diff --git a/src/components/status-reply-mentions.tsx b/src/components/status-reply-mentions.tsx
index 231727340..f3dcbbc03 100644
--- a/src/components/status-reply-mentions.tsx
+++ b/src/components/status-reply-mentions.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper';
-import { useAppDispatch } from 'soapbox/hooks';
-import { shortenNostr } from 'soapbox/utils/nostr';
+import { openModal } from 'soapbox/actions/modals.ts';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 interface IStatusReplyMentions {
   status: Status;
diff --git a/src/components/status.test.tsx b/src/components/status.test.tsx
index a37c966cd..b5dec5eb7 100644
--- a/src/components/status.test.tsx
+++ b/src/components/status.test.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, screen, rootState } from 'soapbox/jest/test-helpers';
-import { normalizeStatus } from 'soapbox/normalizers';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, screen, rootState } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
 
-import Status from './status';
+import Status from './status.tsx';
 
-import type { ReducerStatus } from 'soapbox/reducers/statuses';
+import type { ReducerStatus } from 'soapbox/reducers/statuses.ts';
 
 const account = buildAccount({
   id: '1',
diff --git a/src/components/status.tsx b/src/components/status.tsx
index fe971da12..f91d14bfe 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -1,30 +1,37 @@
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import pinnedIcon from '@tabler/icons/outline/pinned.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
-import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses';
-import TranslateButton from 'soapbox/components/translate-button';
-import AccountContainer from 'soapbox/containers/account-container';
-import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
-import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
-import { useAppDispatch, useSettings } from 'soapbox/hooks';
-import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status';
+import { mentionCompose, replyCompose } from 'soapbox/actions/compose.ts';
+import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses.ts';
+import TranslateButton from 'soapbox/components/translate-button.tsx';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status.ts';
 
-import EventPreview from './event-preview';
-import StatusActionBar from './status-action-bar';
-import StatusContent from './status-content';
-import StatusMedia from './status-media';
-import StatusReplyMentions from './status-reply-mentions';
-import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
-import StatusInfo from './statuses/status-info';
-import Tombstone from './tombstone';
-import { Card, Icon, Stack, Text } from './ui';
+import EventPreview from './event-preview.tsx';
+import StatusActionBar from './status-action-bar.tsx';
+import StatusContent from './status-content.tsx';
+import StatusMedia from './status-media.tsx';
+import StatusReplyMentions from './status-reply-mentions.tsx';
+import SensitiveContentOverlay from './statuses/sensitive-content-overlay.tsx';
+import StatusInfo from './statuses/status-info.tsx';
+import Tombstone from './tombstone.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 // Defined in components/scrollable-list
 export type ScrollPosition = { height: number; top: number };
@@ -212,7 +219,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
+          icon={<Icon src={repeatIcon} className='size-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by_with_group'
@@ -252,7 +259,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
+          icon={<Icon src={repeatIcon} className='size-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by'
@@ -279,7 +286,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='size-4 text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={pinnedIcon} className='size-4 text-gray-600 dark:text-gray-400' />}
           text={
             <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
           }
@@ -289,7 +296,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
+          icon={<Icon src={circlesIcon} className='size-4 text-primary-600 dark:text-accent-blue' />}
           text={
             <FormattedMessage
               id='status.group'
diff --git a/src/components/statuses/sensitive-content-overlay.test.tsx b/src/components/statuses/sensitive-content-overlay.test.tsx
index 9bace5784..7b49c5618 100644
--- a/src/components/statuses/sensitive-content-overlay.test.tsx
+++ b/src/components/statuses/sensitive-content-overlay.test.tsx
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
-import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { fireEvent, render, rootState, screen } from 'soapbox/jest/test-helpers';
-import { normalizeStatus } from 'soapbox/normalizers';
-import { ReducerStatus } from 'soapbox/reducers/statuses';
+import { fireEvent, render, rootState, screen } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { ReducerStatus } from 'soapbox/reducers/statuses.ts';
 
-import SensitiveContentOverlay from './sensitive-content-overlay';
+import SensitiveContentOverlay from './sensitive-content-overlay.tsx';
 
 describe('<SensitiveContentOverlay />', () => {
   let status: ReducerStatus;
diff --git a/src/components/statuses/sensitive-content-overlay.tsx b/src/components/statuses/sensitive-content-overlay.tsx
index cb50c722b..fb0838296 100644
--- a/src/components/statuses/sensitive-content-overlay.tsx
+++ b/src/components/statuses/sensitive-content-overlay.tsx
@@ -1,16 +1,25 @@
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
+import headsetIcon from '@tabler/icons/outline/headset.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
-import React, { useEffect, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { deleteStatus } from 'soapbox/actions/statuses';
-import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { defaultMediaVisibility } from 'soapbox/utils/status';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { deleteStatus } from 'soapbox/actions/statuses.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
-import DropdownMenu from '../dropdown-menu';
-import { Button, HStack, Text } from '../ui';
-
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -32,7 +41,7 @@ interface ISensitiveContentOverlay {
   visible?: boolean;
 }
 
-const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
+const SensitiveContentOverlay = forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
   const { onToggleVisibility, status } = props;
 
   const { account } = useOwnAccount();
@@ -61,7 +70,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       dispatch(deleteStatus(status.id, false));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         heading: intl.formatMessage(messages.deleteHeading),
         message: intl.formatMessage(messages.deleteMessage),
         confirm: intl.formatMessage(messages.deleteConfirm),
@@ -75,7 +84,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       {
         text: intl.formatMessage(messages.delete),
         action: handleDeleteStatus,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       },
     ];
@@ -99,7 +108,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       {visible ? (
         <Button
           text={intl.formatMessage(messages.hide)}
-          icon={require('@tabler/icons/outline/eye-off.svg')}
+          icon={eyeOffIcon}
           onClick={toggleVisibility}
           theme='primary'
           size='sm'
@@ -140,7 +149,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
                         type='button'
                         theme='outline'
                         size='sm'
-                        icon={require('@tabler/icons/outline/headset.svg')}
+                        icon={headsetIcon}
                       >
                         {intl.formatMessage(messages.contact)}
                       </Button>
@@ -153,7 +162,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
                 type='button'
                 theme='outline'
                 size='sm'
-                icon={require('@tabler/icons/outline/eye.svg')}
+                icon={eyeIcon}
                 onClick={toggleVisibility}
               >
                 {intl.formatMessage(messages.show)}
@@ -162,7 +171,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
               {(isUnderReview && isOwnStatus) ? (
                 <DropdownMenu
                   items={menu}
-                  src={require('@tabler/icons/outline/dots.svg')}
+                  src={dotsIcon}
                 />
               ) : null}
             </HStack>
diff --git a/src/components/statuses/status-info.tsx b/src/components/statuses/status-info.tsx
index b97513177..7f1e18027 100644
--- a/src/components/statuses/status-info.tsx
+++ b/src/components/statuses/status-info.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-
-import { HStack, Text } from '../ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IStatusInfo {
   avatarSize: number;
diff --git a/src/components/still-image.tsx b/src/components/still-image.tsx
index 191d2831e..080d4533a 100644
--- a/src/components/still-image.tsx
+++ b/src/components/still-image.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
-import { useSettings } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 export interface IStillImage {
   /** Image alt text. */
diff --git a/src/components/thumb-navigation-link.tsx b/src/components/thumb-navigation-link.tsx
index cdbc5f739..5e4d2a406 100644
--- a/src/components/thumb-navigation-link.tsx
+++ b/src/components/thumb-navigation-link.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
-import IconWithCounter from 'soapbox/components/icon-with-counter';
-import { Icon, Text } from 'soapbox/components/ui';
+import IconWithCounter from 'soapbox/components/icon-with-counter.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IThumbNavigationLink {
   count?: number;
diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx
index 9ec12e7ce..e33c235d7 100644
--- a/src/components/thumb-navigation.tsx
+++ b/src/components/thumb-navigation.tsx
@@ -1,9 +1,21 @@
-import React from 'react';
+import bellFilledIcon from '@tabler/icons/filled/bell.svg';
+import circlesFilledIcon from '@tabler/icons/filled/circles.svg';
+import homeFilledIcon from '@tabler/icons/filled/home.svg';
+import mailFilledIcon from '@tabler/icons/filled/mail.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import dashboardIcon from '@tabler/icons/outline/dashboard.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
 import { FormattedMessage } from 'react-intl';
 
-import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import ThumbNavigationLink from 'soapbox/components/thumb-navigation-link.tsx';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 const ThumbNavigation: React.FC = (): JSX.Element => {
   const { account } = useOwnAccount();
@@ -19,7 +31,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.chats) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
           to='/chats'
           exact
@@ -32,8 +44,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.directTimeline || features.conversations) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/mail.svg')}
-          activeSrc={require('@tabler/icons/filled/mail.svg')}
+          src={mailIcon}
+          activeSrc={mailFilledIcon}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
           to='/messages'
           paths={['/messages', '/conversations']}
@@ -54,8 +66,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
       }}
     >
       <ThumbNavigationLink
-        src={require('@tabler/icons/outline/home.svg')}
-        activeSrc={require('@tabler/icons/filled/home.svg')}
+        src={homeIcon}
+        activeSrc={homeFilledIcon}
         text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
         to='/'
         exact
@@ -63,8 +75,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {features.groups && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/circles.svg')}
-          activeSrc={require('@tabler/icons/filled/circles.svg')}
+          src={circlesIcon}
+          activeSrc={circlesFilledIcon}
           text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
           to='/groups'
           exact
@@ -72,7 +84,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
       )}
 
       <ThumbNavigationLink
-        src={require('@tabler/icons/outline/search.svg')}
+        src={searchIcon}
         text={<FormattedMessage id='navigation.search' defaultMessage='Discover' />}
         to='/search'
         exact
@@ -80,8 +92,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {account && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/bell.svg')}
-          activeSrc={require('@tabler/icons/filled/bell.svg')}
+          src={bellIcon}
+          activeSrc={bellFilledIcon}
           text={<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />}
           to='/notifications'
           exact
@@ -93,7 +105,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {(account && account.staff) && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/outline/dashboard.svg')}
+          src={dashboardIcon}
           text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
           to='/soapbox/admin'
           count={dashboardCount}
diff --git a/src/components/tombstone.tsx b/src/components/tombstone.tsx
index 8e2dd1f0c..b13659e87 100644
--- a/src/components/tombstone.tsx
+++ b/src/components/tombstone.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Text } from 'soapbox/components/ui';
-import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
+import Text from 'soapbox/components/ui/text.tsx';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
 
 interface ITombstone {
   id: string;
diff --git a/src/components/translate-button.tsx b/src/components/translate-button.tsx
index bfe0fe4e6..b386d8967 100644
--- a/src/components/translate-button.tsx
+++ b/src/components/translate-button.tsx
@@ -1,12 +1,16 @@
-import React from 'react';
+import languageIcon from '@tabler/icons/outline/language.svg';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
+import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import { Stack, Button, Text } from './ui';
-
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 interface ITranslateButton {
   status: Status;
@@ -53,7 +57,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
         <Button
           theme='muted'
           text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
-          icon={require('@tabler/icons/outline/language.svg')}
+          icon={languageIcon}
           onClick={handleTranslate}
         />
         <Text theme='muted'>
@@ -68,7 +72,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
       <Button
         theme='muted'
         text={<FormattedMessage id='status.translate' defaultMessage='Translate' />}
-        icon={require('@tabler/icons/outline/language.svg')}
+        icon={languageIcon}
         onClick={handleTranslate}
       />
     </div>
diff --git a/src/components/ui/accordion/accordion.tsx b/src/components/ui/accordion.tsx
similarity index 81%
rename from src/components/ui/accordion/accordion.tsx
rename to src/components/ui/accordion.tsx
index ec9e1a4cf..2602f2338 100644
--- a/src/components/ui/accordion/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,14 +1,16 @@
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import DropdownMenu from 'soapbox/components/dropdown-menu';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
-import Text from '../text/text';
+import HStack from './hstack.tsx';
+import Icon from './icon.tsx';
+import Text from './text.tsx';
 
-import type { Menu } from 'soapbox/components/dropdown-menu';
+import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
 
 const messages = defineMessages({
   collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse' },
@@ -60,7 +62,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
           {menu && (
             <DropdownMenu
               items={menu}
-              src={require('@tabler/icons/outline/dots-vertical.svg')}
+              src={dotsVerticalIcon}
             />
           )}
           {action && actionIcon && (
@@ -72,7 +74,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             </button>
           )}
           <Icon
-            src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
+            src={expanded ? chevronUpIcon : chevronDownIcon}
             className='size-5 text-gray-700 dark:text-gray-600'
           />
         </HStack>
diff --git a/src/components/ui/avatar/avatar.test.tsx b/src/components/ui/avatar.test.tsx
similarity index 72%
rename from src/components/ui/avatar/avatar.test.tsx
rename to src/components/ui/avatar.test.tsx
index 6c958f0cb..3c54f77a7 100644
--- a/src/components/ui/avatar/avatar.test.tsx
+++ b/src/components/ui/avatar.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Avatar from './avatar';
+import Avatar from './avatar.tsx';
 
 const src = '/static/alice.jpg';
 
diff --git a/src/components/ui/avatar/avatar.tsx b/src/components/ui/avatar.tsx
similarity index 83%
rename from src/components/ui/avatar/avatar.tsx
rename to src/components/ui/avatar.tsx
index c6d1af6c8..f9f513147 100644
--- a/src/components/ui/avatar/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,9 +1,10 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useMemo, useState } from 'react';
 
-import StillImage, { IStillImage } from 'soapbox/components/still-image';
+import StillImage, { IStillImage } from 'soapbox/components/still-image.tsx';
 
-import Icon from '../icon/icon';
+import Icon from '../icon.tsx';
 
 const AVATAR_SIZE = 42;
 
@@ -20,7 +21,7 @@ const Avatar = (props: IAvatar) => {
 
   const handleLoadFailure = () => setIsAvatarMissing(true);
 
-  const style: React.CSSProperties = React.useMemo(() => ({
+  const style: React.CSSProperties = useMemo(() => ({
     width: size,
     height: size,
   }), [size]);
@@ -35,7 +36,7 @@ const Avatar = (props: IAvatar) => {
         className={clsx('flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-900', className)}
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-off.svg')}
+          src={photoOffIcon}
           className='size-4 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/src/components/ui/banner/banner.tsx b/src/components/ui/banner.tsx
similarity index 96%
rename from src/components/ui/banner/banner.tsx
rename to src/components/ui/banner.tsx
index c0d489fe8..f809a6bc8 100644
--- a/src/components/ui/banner/banner.tsx
+++ b/src/components/ui/banner.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IBanner {
   theme: 'frosted' | 'opaque';
diff --git a/src/components/ui/button/button.test.tsx b/src/components/ui/button.test.tsx
similarity index 96%
rename from src/components/ui/button/button.test.tsx
rename to src/components/ui/button.test.tsx
index 4124958d7..80a0ebfa0 100644
--- a/src/components/ui/button/button.test.tsx
+++ b/src/components/ui/button.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
+import { fireEvent, render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Button from './button';
+import Button from './button.tsx';
 
 describe('<Button />', () => {
   it('renders the given text', () => {
diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button.tsx
similarity index 90%
rename from src/components/ui/button/button.tsx
rename to src/components/ui/button.tsx
index 43c3fd740..d401fcc2c 100644
--- a/src/components/ui/button/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,12 +1,11 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
-import Icon from '../icon/icon';
+import Icon from './icon.tsx';
+import { useButtonStyles } from './useButtonStyles.ts';
 
-import { useButtonStyles } from './useButtonStyles';
-
-import type { ButtonSizes, ButtonThemes } from './useButtonStyles';
+import type { ButtonSizes, ButtonThemes } from './useButtonStyles.ts';
 
 interface IButton {
   /** Whether this button expands the width of its container. */
@@ -36,7 +35,7 @@ interface IButton {
 }
 
 /** Customizable button element with various themes. */
-const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
+const Button = forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
   const {
     block = false,
     children,
@@ -69,7 +68,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     return <Icon src={icon} className='size-4' element={iconElement} />;
   };
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback((event) => {
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = useCallback((event) => {
     if (onClick && !disabled) {
       onClick(event);
     }
diff --git a/src/components/ui/card/card.test.tsx b/src/components/ui/card.test.tsx
similarity index 82%
rename from src/components/ui/card/card.test.tsx
rename to src/components/ui/card.test.tsx
index 1971441ae..24dad8289 100644
--- a/src/components/ui/card/card.test.tsx
+++ b/src/components/ui/card.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import { Card, CardBody, CardHeader, CardTitle } from './card';
+import { Card, CardBody, CardHeader, CardTitle } from './card.tsx';
 
 describe('<Card />', () => {
   it('renders the CardTitle and CardBody', () => {
diff --git a/src/components/ui/card/card.tsx b/src/components/ui/card.tsx
similarity index 86%
rename from src/components/ui/card/card.tsx
rename to src/components/ui/card.tsx
index 242d50f34..5c7b32921 100644
--- a/src/components/ui/card/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,12 +1,13 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 
-import HStack from '../hstack/hstack';
-import Text from '../text/text';
+import HStack from './hstack.tsx';
+import Text from './text.tsx';
 
 const sizes = {
   md: 'p-4 sm:rounded-xl',
@@ -33,7 +34,7 @@ interface ICard {
 }
 
 /** An opaque backdrop to hold a collection of related elements. */
-const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'default', size = 'md', className, ...filteredProps }, ref): JSX.Element => (
+const Card = forwardRef<HTMLDivElement, ICard>(({ children, variant = 'default', size = 'md', className, ...filteredProps }, ref): JSX.Element => (
   <div
     ref={ref}
     {...filteredProps}
@@ -72,7 +73,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
 
     return (
       <Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
-        <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
+        <SvgIcon src={arrowLeftIcon} className='size-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
diff --git a/src/components/ui/carousel/carousel.tsx b/src/components/ui/carousel.tsx
similarity index 89%
rename from src/components/ui/carousel/carousel.tsx
rename to src/components/ui/carousel.tsx
index 1cd4f2e8a..0935b3321 100644
--- a/src/components/ui/carousel/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -1,9 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
+import { useEffect, useState } from 'react';
 
-import { useDimensions } from 'soapbox/hooks';
+import { useDimensions } from 'soapbox/hooks/useDimensions.ts';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
+import HStack from './hstack.tsx';
+import Icon from './icon.tsx';
 
 interface ICarousel {
   children: any;
@@ -68,7 +70,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
           disabled={!hasPrevPage || isDisabled}
         >
           <Icon
-            src={require('@tabler/icons/outline/chevron-left.svg')}
+            src={chevronLeftIcon}
             className='size-5 text-black dark:text-white'
           />
         </button>
@@ -100,7 +102,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
           disabled={!hasNextPage || isDisabled}
         >
           <Icon
-            src={require('@tabler/icons/outline/chevron-right.svg')}
+            src={chevronRightIcon}
             className='size-5 text-black dark:text-white'
           />
         </button>
diff --git a/src/components/ui/checkbox/checkbox.tsx b/src/components/ui/checkbox.tsx
similarity index 80%
rename from src/components/ui/checkbox/checkbox.tsx
rename to src/components/ui/checkbox.tsx
index 4c20d688c..4025231fc 100644
--- a/src/components/ui/checkbox/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
 interface ICheckbox extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'id' | 'name' | 'onChange' | 'checked' | 'required'> { }
 
 /** A pretty checkbox input. */
-const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
+const Checkbox = forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
   return (
     <input
       {...props}
diff --git a/src/components/ui/column/column.test.tsx b/src/components/ui/column.test.tsx
similarity index 55%
rename from src/components/ui/column/column.test.tsx
rename to src/components/ui/column.test.tsx
index bc40ca59d..ec9db1c35 100644
--- a/src/components/ui/column/column.test.tsx
+++ b/src/components/ui/column.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import { Column } from './column';
+import { Column } from './column.tsx';
 
 describe('<Column />', () => {
   it('renders correctly with minimal props', () => {
diff --git a/src/components/ui/column/column.tsx b/src/components/ui/column.tsx
similarity index 92%
rename from src/components/ui/column/column.tsx
rename to src/components/ui/column.tsx
index 3d7a738be..92415faf8 100644
--- a/src/components/ui/column/column.tsx
+++ b/src/components/ui/column.tsx
@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import Helmet from 'soapbox/components/helmet';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import Helmet from 'soapbox/components/helmet.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card';
+import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from './card.tsx';
 
 type IColumnHeader = Pick<IColumn, 'label' | 'backHref' | 'className' | 'action'>;
 
@@ -64,7 +64,7 @@ export interface IColumn {
 }
 
 /** A backdrop for the main section of the UI. */
-const Column = React.forwardRef<HTMLDivElement, IColumn>((props, ref): JSX.Element => {
+const Column = forwardRef<HTMLDivElement, IColumn>((props, ref): JSX.Element => {
   const { backHref, children, label, transparent = false, withHeader = true, className, bodyClassName, action, size } = props;
   const soapboxConfig = useSoapboxConfig();
   const [isScrolled, setIsScrolled] = useState(false);
diff --git a/src/components/ui/combobox/combobox.css b/src/components/ui/combobox.css
similarity index 100%
rename from src/components/ui/combobox/combobox.css
rename to src/components/ui/combobox.css
diff --git a/src/components/ui/combobox/combobox.tsx b/src/components/ui/combobox.tsx
similarity index 100%
rename from src/components/ui/combobox/combobox.tsx
rename to src/components/ui/combobox.tsx
diff --git a/src/components/ui/counter/counter.tsx b/src/components/ui/counter.tsx
similarity index 86%
rename from src/components/ui/counter/counter.tsx
rename to src/components/ui/counter.tsx
index 8f350f675..a58b7d6de 100644
--- a/src/components/ui/counter/counter.tsx
+++ b/src/components/ui/counter.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface ICounter {
   /** Number this counter should display. */
diff --git a/src/components/ui/datepicker/datepicker.test.tsx b/src/components/ui/datepicker.test.tsx
similarity index 96%
rename from src/components/ui/datepicker/datepicker.test.tsx
rename to src/components/ui/datepicker.test.tsx
index bf856c236..0a1acdceb 100644
--- a/src/components/ui/datepicker/datepicker.test.tsx
+++ b/src/components/ui/datepicker.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { queryAllByRole, render, screen } from 'soapbox/jest/test-helpers';
+import { queryAllByRole, render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Datepicker from './datepicker';
+import Datepicker from './datepicker.tsx';
 
 describe('<Datepicker />', () => {
   it('defaults to the current date', () => {
diff --git a/src/components/ui/datepicker/datepicker.tsx b/src/components/ui/datepicker.tsx
similarity index 94%
rename from src/components/ui/datepicker/datepicker.tsx
rename to src/components/ui/datepicker.tsx
index ea9775bd4..69c2800cd 100644
--- a/src/components/ui/datepicker/datepicker.tsx
+++ b/src/components/ui/datepicker.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import Select from '../select/select';
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Select from './select.tsx';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 const getDaysInMonth = (month: number, year: number) => new Date(year, month + 1, 0).getDate();
 const currentYear = new Date().getFullYear();
diff --git a/src/components/ui/datetime/datetime.tsx b/src/components/ui/datetime.tsx
similarity index 94%
rename from src/components/ui/datetime/datetime.tsx
rename to src/components/ui/datetime.tsx
index bdf676840..1f9d77307 100644
--- a/src/components/ui/datetime/datetime.tsx
+++ b/src/components/ui/datetime.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import Input from '../input/input';
+import Input from './input.tsx';
 
 interface DatetimeProps {
   value: Date;
diff --git a/src/components/ui/divider/divider.test.tsx b/src/components/ui/divider.test.tsx
similarity index 70%
rename from src/components/ui/divider/divider.test.tsx
rename to src/components/ui/divider.test.tsx
index 43a53eec8..9ab816728 100644
--- a/src/components/ui/divider/divider.test.tsx
+++ b/src/components/ui/divider.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Divider from './divider';
+import Divider from './divider.tsx';
 
 describe('<Divider />', () => {
   it('renders without text', () => {
diff --git a/src/components/ui/divider/divider.tsx b/src/components/ui/divider.tsx
similarity index 86%
rename from src/components/ui/divider/divider.tsx
rename to src/components/ui/divider.tsx
index 821f55fd6..39a4557ea 100644
--- a/src/components/ui/divider/divider.tsx
+++ b/src/components/ui/divider.tsx
@@ -1,8 +1,6 @@
-import React from 'react';
+import Text from './text.tsx';
 
-import Text from '../text/text';
-
-import type { Sizes as TextSizes } from '../text/text';
+import type { Sizes as TextSizes } from './text.tsx';
 
 interface IDivider {
   text?: string;
diff --git a/src/components/ui/emoji-selector/emoji-selector.tsx b/src/components/ui/emoji-selector.tsx
similarity index 86%
rename from src/components/ui/emoji-selector/emoji-selector.tsx
rename to src/components/ui/emoji-selector.tsx
index 9a28bffa1..77d0cea4c 100644
--- a/src/components/ui/emoji-selector/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector.tsx
@@ -1,14 +1,17 @@
 import { shift, useFloating, Placement, offset, OffsetOptions } from '@floating-ui/react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import EmojiComponent from 'soapbox/components/ui/emoji/emoji';
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
-import { useClickOutside, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
+import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 interface IEmojiButton {
   /** Unicode emoji character. */
@@ -134,7 +137,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
           {all && (
             <IconButton
               className='text-gray-600 hover:text-gray-600 dark:hover:text-white'
-              src={require('@tabler/icons/outline/dots.svg')}
+              src={dotsIcon}
               onClick={handleExpand}
             />
           )}
diff --git a/src/components/ui/emoji/emoji.test.tsx b/src/components/ui/emoji.test.tsx
similarity index 80%
rename from src/components/ui/emoji/emoji.test.tsx
rename to src/components/ui/emoji.test.tsx
index c4bf686d8..737c4dc31 100644
--- a/src/components/ui/emoji/emoji.test.tsx
+++ b/src/components/ui/emoji.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Emoji from './emoji';
+import Emoji from './emoji.tsx';
 
 describe('<Emoji />', () => {
   it('renders a simple emoji', () => {
diff --git a/src/components/ui/emoji/emoji.tsx b/src/components/ui/emoji.tsx
similarity index 80%
rename from src/components/ui/emoji/emoji.tsx
rename to src/components/ui/emoji.tsx
index 68c82fb03..ae33d6376 100644
--- a/src/components/ui/emoji/emoji.tsx
+++ b/src/components/ui/emoji.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji';
-import { joinPublicPath } from 'soapbox/utils/static';
+import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji.ts';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
   /** Unicode emoji character. */
diff --git a/src/components/ui/file-input/file-input.tsx b/src/components/ui/file-input.tsx
similarity index 94%
rename from src/components/ui/file-input/file-input.tsx
rename to src/components/ui/file-input.tsx
index 2a08a934e..44ec21384 100644
--- a/src/components/ui/file-input/file-input.tsx
+++ b/src/components/ui/file-input.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name' | 'accept'> { }
 
diff --git a/src/components/ui/form-actions/form-actions.test.tsx b/src/components/ui/form-actions.test.tsx
similarity index 64%
rename from src/components/ui/form-actions/form-actions.test.tsx
rename to src/components/ui/form-actions.test.tsx
index 32ff56638..cfbc53763 100644
--- a/src/components/ui/form-actions/form-actions.test.tsx
+++ b/src/components/ui/form-actions.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import FormActions from './form-actions';
+import FormActions from './form-actions.tsx';
 
 describe('<FormActions />', () => {
   it('renders successfully', () => {
diff --git a/src/components/ui/form-actions/form-actions.tsx b/src/components/ui/form-actions.tsx
similarity index 80%
rename from src/components/ui/form-actions/form-actions.tsx
rename to src/components/ui/form-actions.tsx
index e74361c35..a9e6b32c4 100644
--- a/src/components/ui/form-actions/form-actions.tsx
+++ b/src/components/ui/form-actions.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import HStack from '../hstack/hstack';
+import HStack from './hstack.tsx';
 
 interface IFormActions {
   children: React.ReactNode;
diff --git a/src/components/ui/form-group/form-group.test.tsx b/src/components/ui/form-group.test.tsx
similarity index 90%
rename from src/components/ui/form-group/form-group.test.tsx
rename to src/components/ui/form-group.test.tsx
index 2b79c9c75..e6ee15b7f 100644
--- a/src/components/ui/form-group/form-group.test.tsx
+++ b/src/components/ui/form-group.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import FormGroup from './form-group';
+import FormGroup from './form-group.tsx';
 
 describe('<FormGroup />', () => {
   it('connects the label and input', () => {
diff --git a/src/components/ui/form-group/form-group.tsx b/src/components/ui/form-group.tsx
similarity index 92%
rename from src/components/ui/form-group/form-group.tsx
rename to src/components/ui/form-group.tsx
index c566bd3d7..e88c0b44c 100644
--- a/src/components/ui/form-group/form-group.tsx
+++ b/src/components/ui/form-group.tsx
@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
+import { Children, cloneElement, isValidElement, useMemo } from 'react';
 
-import Checkbox from '../checkbox/checkbox';
-import HStack from '../hstack/hstack';
-import Stack from '../stack/stack';
+import Checkbox from './checkbox.tsx';
+import HStack from './hstack.tsx';
+import Stack from './stack.tsx';
 
 interface IFormGroup {
   /** Input label message. */
@@ -21,12 +21,12 @@ interface IFormGroup {
 const FormGroup: React.FC<IFormGroup> = (props) => {
   const { children, errors = [], labelText, labelTitle, hintText } = props;
   const formFieldId: string = useMemo(() => `field-${crypto.randomUUID()}`, []);
-  const inputChildren = React.Children.toArray(children);
+  const inputChildren = Children.toArray(children);
   const hasError = errors?.length > 0;
 
   let firstChild;
-  if (React.isValidElement(inputChildren[0])) {
-    firstChild = React.cloneElement(
+  if (isValidElement(inputChildren[0])) {
+    firstChild = cloneElement(
       inputChildren[0],
       // @ts-ignore
       { id: formFieldId },
diff --git a/src/components/ui/form/form.test.tsx b/src/components/ui/form.test.tsx
similarity index 88%
rename from src/components/ui/form/form.test.tsx
rename to src/components/ui/form.test.tsx
index c25d590ed..d375b6238 100644
--- a/src/components/ui/form/form.test.tsx
+++ b/src/components/ui/form.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
+import { fireEvent, render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Form from './form';
+import Form from './form.tsx';
 
 describe('<Form />', () => {
   it('renders children', () => {
diff --git a/src/components/ui/form/form.tsx b/src/components/ui/form.tsx
similarity index 85%
rename from src/components/ui/form/form.tsx
rename to src/components/ui/form.tsx
index b23b44b38..ec175d8a6 100644
--- a/src/components/ui/form/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback } from 'react';
 
 interface IForm {
   /** Form submission event handler. */
@@ -11,7 +11,7 @@ interface IForm {
 
 /** Form element with custom styles. */
 const Form: React.FC<IForm> = ({ onSubmit, children, ...filteredProps }) => {
-  const handleSubmit: React.FormEventHandler = React.useCallback((event) => {
+  const handleSubmit: React.FormEventHandler = useCallback((event) => {
     event.preventDefault();
 
     if (onSubmit) {
diff --git a/src/components/ui/hstack/hstack.tsx b/src/components/ui/hstack.tsx
similarity index 97%
rename from src/components/ui/hstack/hstack.tsx
rename to src/components/ui/hstack.tsx
index eb435cbae..ea1fe7b0f 100644
--- a/src/components/ui/hstack/hstack.tsx
+++ b/src/components/ui/hstack.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 const justifyContentOptions = {
   between: 'justify-between',
diff --git a/src/components/ui/icon-button/icon-button.tsx b/src/components/ui/icon-button.tsx
similarity index 89%
rename from src/components/ui/icon-button/icon-button.tsx
rename to src/components/ui/icon-button.tsx
index 001a3ee0e..8b713ec4f 100644
--- a/src/components/ui/icon-button/icon-button.tsx
+++ b/src/components/ui/icon-button.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
-import SvgIcon from '../icon/svg-icon';
-import Text from '../text/text';
+import SvgIcon from './svg-icon.tsx';
+import Text from './text.tsx';
 
 interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Class name for the <svg> icon. */
@@ -18,7 +18,7 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 /** A clickable icon. */
-const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
+const IconButton = forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
   const { src, className, iconClassName, text, theme = 'seamless', ...filteredProps } = props;
 
   return (
diff --git a/src/components/ui/icon/icon.tsx b/src/components/ui/icon.tsx
similarity index 92%
rename from src/components/ui/icon/icon.tsx
rename to src/components/ui/icon.tsx
index eaa4e9f0a..7cd787c40 100644
--- a/src/components/ui/icon/icon.tsx
+++ b/src/components/ui/icon.tsx
@@ -1,8 +1,5 @@
-import React from 'react';
-
-import Counter from '../counter/counter';
-
-import SvgIcon from './svg-icon';
+import Counter from './counter.tsx';
+import SvgIcon from './svg-icon.tsx';
 
 interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   /** Class name for the <svg> element. */
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
deleted file mode 100644
index c565641f4..000000000
--- a/src/components/ui/index.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-export { default as Accordion } from './accordion/accordion';
-export { default as Avatar } from './avatar/avatar';
-export { default as Banner } from './banner/banner';
-export { default as Button } from './button/button';
-export { default as Carousel } from './carousel/carousel';
-export { Card, CardBody, CardHeader, CardTitle } from './card/card';
-export { default as Checkbox } from './checkbox/checkbox';
-export { Column, ColumnHeader } from './column/column';
-export {
-  Combobox,
-  ComboboxInput,
-  ComboboxPopover,
-  ComboboxList,
-  ComboboxOption,
-  ComboboxOptionText,
-} from './combobox/combobox';
-export { default as Counter } from './counter/counter';
-export { default as Datepicker } from './datepicker/datepicker';
-export { default as Divider } from './divider/divider';
-export { default as Emoji } from './emoji/emoji';
-export { default as EmojiSelector } from './emoji-selector/emoji-selector';
-export { default as FileInput } from './file-input/file-input';
-export { default as Form } from './form/form';
-export { default as FormActions } from './form-actions/form-actions';
-export { default as FormGroup } from './form-group/form-group';
-export { default as HStack } from './hstack/hstack';
-export { default as Icon } from './icon/icon';
-export { default as IconButton } from './icon-button/icon-button';
-export { default as Input } from './input/input';
-export { default as Layout } from './layout/layout';
-export {
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuItem,
-  MenuItems,
-  MenuLink,
-  MenuList,
-} from './menu/menu';
-export { default as Modal } from './modal/modal';
-export { default as Popover } from './popover/popover';
-export { default as Portal } from './portal/portal';
-export { default as ProgressBar } from './progress-bar/progress-bar';
-export { default as RadioButton } from './radio-button/radio-button';
-export { default as Select } from './select/select';
-export { default as Slider } from './slider/slider';
-export { default as Spinner } from './spinner/spinner';
-export { default as Stack } from './stack/stack';
-export { default as Streamfield } from './streamfield/streamfield';
-export { default as Tabs } from './tabs/tabs';
-export { default as TagInput } from './tag-input/tag-input';
-export { default as Text } from './text/text';
-export { default as Textarea } from './textarea/textarea';
-export { default as Toast } from './toast/toast';
-export { default as Toggle } from './toggle/toggle';
-export { default as Tooltip } from './tooltip/tooltip';
-export { default as Widget } from './widget/widget';
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input.tsx
similarity index 88%
rename from src/components/ui/input/input.tsx
rename to src/components/ui/input.tsx
index 94daf1dcb..11bbcc66f 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,13 +1,15 @@
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
 import clsx from 'clsx';
-import React from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useLocale } from 'soapbox/hooks';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import { useLocale } from 'soapbox/hooks/useLocale.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import Icon from '../icon/icon';
-import SvgIcon from '../icon/svg-icon';
-import Tooltip from '../tooltip/tooltip';
+import Icon from './icon.tsx';
+import SvgIcon from './svg-icon.tsx';
+import Tooltip from './tooltip.tsx';
 
 const messages = defineMessages({
   showPassword: { id: 'input.password.show_password', defaultMessage: 'Show password' },
@@ -45,18 +47,18 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
 }
 
 /** Form input element. */
-const Input = React.forwardRef<HTMLInputElement, IInput>(
+const Input = forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
     const locale = useLocale();
 
     const { type = 'text', icon, className, outerClassName, append, prepend, theme = 'normal', ...filteredProps } = props;
 
-    const [revealed, setRevealed] = React.useState(false);
+    const [revealed, setRevealed] = useState(false);
 
     const isPassword = type === 'password';
 
-    const togglePassword = React.useCallback(() => {
+    const togglePassword = useCallback(() => {
       setRevealed((prev) => !prev);
     }, []);
 
@@ -123,7 +125,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
               >
                 <SvgIcon
-                  src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
+                  src={revealed ? eyeOffIcon : eyeIcon}
                   className='size-4'
                 />
               </button>
@@ -137,5 +139,5 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
 
 export {
   Input as default,
-  InputThemes,
+  type InputThemes,
 };
diff --git a/src/components/ui/language-dropdown/language-dropdown.tsx b/src/components/ui/language-dropdown.tsx
similarity index 69%
rename from src/components/ui/language-dropdown/language-dropdown.tsx
rename to src/components/ui/language-dropdown.tsx
index b6eac2f15..ee9f4638d 100644
--- a/src/components/ui/language-dropdown/language-dropdown.tsx
+++ b/src/components/ui/language-dropdown.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import worldIcon from '@tabler/icons/outline/world.svg';
 
-import { openDropdownMenu } from 'soapbox/actions/dropdown-menu';
-import DropdownMenu, { MenuItem } from 'soapbox/components/dropdown-menu';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { languages } from 'soapbox/features/preferences';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openDropdownMenu } from 'soapbox/actions/dropdown-menu.ts';
+import DropdownMenu, { MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { languages } from 'soapbox/features/preferences/index.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 function formatLanguages(languageMap: Record<string, string>) {
   const langCodes = Object.keys(languageMap).sort().map((sig) => {
@@ -26,7 +26,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
   const dispatch = useAppDispatch();
   const formattedLanguages = formatLanguages(languages);
 
-  const newMenu: MenuItem[] = [{ icon: require('@tabler/icons/outline/world.svg'), text: 'Default', action: () => {
+  const newMenu: MenuItem[] = [{ icon: worldIcon, text: 'Default', action: () => {
     setLanguage('');
   } }];
 
@@ -51,7 +51,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
           {language.toUpperCase()}
         </button>
       ) : (
-        <SvgIcon src={require('@tabler/icons/outline/world.svg')} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
+        <SvgIcon src={worldIcon} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 dark:text-white sm:mr-4' />
       )}
     </DropdownMenu>
   );
diff --git a/src/components/ui/layout/layout.tsx b/src/components/ui/layout.tsx
similarity index 97%
rename from src/components/ui/layout/layout.tsx
rename to src/components/ui/layout.tsx
index e3d9575c3..31e123af2 100644
--- a/src/components/ui/layout/layout.tsx
+++ b/src/components/ui/layout.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 import StickyBox from 'react-sticky-box';
 
 interface ISidebar {
diff --git a/src/components/ui/menu/menu.css b/src/components/ui/menu.css
similarity index 100%
rename from src/components/ui/menu/menu.css
rename to src/components/ui/menu.css
diff --git a/src/components/ui/menu/menu.tsx b/src/components/ui/menu.tsx
similarity index 97%
rename from src/components/ui/menu/menu.tsx
rename to src/components/ui/menu.tsx
index e359c9172..58b70469d 100644
--- a/src/components/ui/menu/menu.tsx
+++ b/src/components/ui/menu.tsx
@@ -9,7 +9,6 @@ import {
 } from '@reach/menu-button';
 import { positionDefault, positionRight } from '@reach/popover';
 import clsx from 'clsx';
-import React from 'react';
 
 import './menu.css';
 
diff --git a/src/components/ui/modal/modal.test.tsx b/src/components/ui/modal.test.tsx
similarity index 96%
rename from src/components/ui/modal/modal.test.tsx
rename to src/components/ui/modal.test.tsx
index 2941fe89a..88daaa586 100644
--- a/src/components/ui/modal/modal.test.tsx
+++ b/src/components/ui/modal.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Modal from './modal';
+import Modal from './modal.tsx';
 
 describe('<Modal />', () => {
   it('renders', () => {
diff --git a/src/components/ui/modal/modal.tsx b/src/components/ui/modal.tsx
similarity index 91%
rename from src/components/ui/modal/modal.tsx
rename to src/components/ui/modal.tsx
index 82b9e6482..595787da6 100644
--- a/src/components/ui/modal/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -1,11 +1,13 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef, useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import Button from '../button/button';
-import { ButtonThemes } from '../button/useButtonStyles';
-import HStack from '../hstack/hstack';
-import IconButton from '../icon-button/icon-button';
+import Button from './button.tsx';
+import HStack from './hstack.tsx';
+import IconButton from './icon-button.tsx';
+import { ButtonThemes } from './useButtonStyles.ts';
 
 const messages = defineMessages({
   back: { id: 'card.back.label', defaultMessage: 'Back' },
@@ -68,11 +70,11 @@ interface IModal {
 }
 
 /** Displays a modal dialog box. */
-const Modal = React.forwardRef<HTMLDivElement, IModal>(({
+const Modal = forwardRef<HTMLDivElement, IModal>(({
   cancelAction,
   cancelText,
   children,
-  closeIcon = require('@tabler/icons/outline/x.svg'),
+  closeIcon = xIcon,
   closePosition = 'right',
   confirmationAction,
   confirmationDisabled,
@@ -91,9 +93,9 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
   onBack,
 }, ref) => {
   const intl = useIntl();
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (buttonRef?.current && !skipFocus) {
       buttonRef.current.focus();
     }
@@ -115,7 +117,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
             >
               {onBack && (
                 <IconButton
-                  src={require('@tabler/icons/outline/arrow-left.svg')}
+                  src={arrowLeftIcon}
                   title={intl.formatMessage(messages.back)}
                   onClick={onBack}
                   className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
diff --git a/src/components/ui/popover/popover.tsx b/src/components/ui/popover.tsx
similarity index 95%
rename from src/components/ui/popover/popover.tsx
rename to src/components/ui/popover.tsx
index 86085be5d..9649769b8 100644
--- a/src/components/ui/popover/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -11,9 +11,9 @@ import {
   useTransitionStyles,
 } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { useRef, useState } from 'react';
+import { cloneElement, useRef, useState } from 'react';
 
-import Portal from '../portal/portal';
+import Portal from './portal.tsx';
 
 interface IPopover {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
@@ -78,7 +78,7 @@ const Popover: React.FC<IPopover> = (props) => {
 
   return (
     <>
-      {React.cloneElement(children, {
+      {cloneElement(children, {
         ref: refs.setReference,
         ...getReferenceProps(),
         className: clsx(children.props.className, referenceElementClassName),
diff --git a/src/components/ui/portal/portal.tsx b/src/components/ui/portal.tsx
similarity index 89%
rename from src/components/ui/portal/portal.tsx
rename to src/components/ui/portal.tsx
index 9d9ae73e7..6dda9d3b3 100644
--- a/src/components/ui/portal/portal.tsx
+++ b/src/components/ui/portal.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 interface IPortal {
diff --git a/src/components/ui/progress-bar/progress-bar.tsx b/src/components/ui/progress-bar.tsx
similarity index 90%
rename from src/components/ui/progress-bar/progress-bar.tsx
rename to src/components/ui/progress-bar.tsx
index 4fffe7937..5e7a643fa 100644
--- a/src/components/ui/progress-bar/progress-bar.tsx
+++ b/src/components/ui/progress-bar.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx';
-import React from 'react';
 import { spring } from 'react-motion';
 
-import Motion from 'soapbox/features/ui/util/optional-motion';
+import Motion from 'soapbox/features/ui/util/optional-motion.tsx';
 
 interface IProgressBar {
   /** Number between 0 and 1 to represent the percentage complete. */
diff --git a/src/components/ui/radio-button/radio-button.tsx b/src/components/ui/radio-button.tsx
similarity index 91%
rename from src/components/ui/radio-button/radio-button.tsx
rename to src/components/ui/radio-button.tsx
index c03ca5d52..3f137c6c2 100644
--- a/src/components/ui/radio-button/radio-button.tsx
+++ b/src/components/ui/radio-button.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
-import HStack from '../hstack/hstack';
+import HStack from './hstack.tsx';
 
 interface IRadioButton {
   value: string;
diff --git a/src/components/ui/select/select.tsx b/src/components/ui/select.tsx
similarity index 88%
rename from src/components/ui/select/select.tsx
rename to src/components/ui/select.tsx
index 1c14fe9ae..46c4d241e 100644
--- a/src/components/ui/select/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
   children: Iterable<React.ReactNode>;
@@ -7,7 +7,7 @@ interface ISelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
 }
 
 /** Multiple-select dropdown. */
-const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
+const Select = forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
   const { children, className, full = true, ...filteredProps } = props;
 
   return (
diff --git a/src/components/ui/slider/slider.tsx b/src/components/ui/slider.tsx
similarity index 98%
rename from src/components/ui/slider/slider.tsx
rename to src/components/ui/slider.tsx
index d97e69322..8aed7ebcc 100644
--- a/src/components/ui/slider/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,5 +1,5 @@
 import throttle from 'lodash/throttle';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 type Point = { x: number; y: number };
 
diff --git a/src/components/ui/spinner/spinner.css b/src/components/ui/spinner.css
similarity index 100%
rename from src/components/ui/spinner/spinner.css
rename to src/components/ui/spinner.css
diff --git a/src/components/ui/spinner/spinner.tsx b/src/components/ui/spinner.tsx
similarity index 89%
rename from src/components/ui/spinner/spinner.tsx
rename to src/components/ui/spinner.tsx
index 23341ba76..9811d9724 100644
--- a/src/components/ui/spinner/spinner.tsx
+++ b/src/components/ui/spinner.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 import './spinner.css';
 
diff --git a/src/components/ui/stack/stack.tsx b/src/components/ui/stack.tsx
similarity index 91%
rename from src/components/ui/stack/stack.tsx
rename to src/components/ui/stack.tsx
index 8a4370b04..8db4def0b 100644
--- a/src/components/ui/stack/stack.tsx
+++ b/src/components/ui/stack.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 const spaces = {
   0: 'space-y-0',
@@ -43,7 +43,7 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /** Vertical stack of child elements. */
-const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
+const Stack = forwardRef<HTMLDivElement, IStack>((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
   const { space, alignItems, justifyContent, className, grow, element = 'div', ...filteredProps } = props;
 
   const Elem = element as 'div';
diff --git a/src/components/ui/streamfield/streamfield.tsx b/src/components/ui/streamfield.tsx
similarity index 90%
rename from src/components/ui/streamfield/streamfield.tsx
rename to src/components/ui/streamfield.tsx
index 1dbb683d3..8d130701c 100644
--- a/src/components/ui/streamfield/streamfield.tsx
+++ b/src/components/ui/streamfield.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import Button from '../button/button';
-import HStack from '../hstack/hstack';
-import IconButton from '../icon-button/icon-button';
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Button from './button.tsx';
+import HStack from './hstack.tsx';
+import IconButton from './icon-button.tsx';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 const messages = defineMessages({
   add: { id: 'streamfield.add', defaultMessage: 'Add' },
@@ -83,7 +83,7 @@ const Streamfield: React.FC<IStreamfield> = ({
                 <IconButton
                   iconClassName='h-4 w-4'
                   className='bg-transparent text-gray-600 hover:text-gray-600'
-                  src={require('@tabler/icons/outline/x.svg')}
+                  src={xIcon}
                   onClick={() => onRemoveItem(i)}
                   title={intl.formatMessage(messages.remove)}
                 />
diff --git a/src/components/ui/icon/svg-icon.test.tsx b/src/components/ui/svg-icon.test.tsx
similarity index 75%
rename from src/components/ui/icon/svg-icon.test.tsx
rename to src/components/ui/svg-icon.test.tsx
index bd8c0a81b..fae051a19 100644
--- a/src/components/ui/icon/svg-icon.test.tsx
+++ b/src/components/ui/svg-icon.test.tsx
@@ -1,9 +1,9 @@
 import IconCode from '@tabler/icons/outline/code.svg';
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import SvgIcon from './svg-icon';
+import SvgIcon from './svg-icon.tsx';
 
 describe('<SvgIcon />', () => {
   it('renders loading element with default size', async () => {
diff --git a/src/components/ui/icon/svg-icon.tsx b/src/components/ui/svg-icon.tsx
similarity index 97%
rename from src/components/ui/icon/svg-icon.tsx
rename to src/components/ui/svg-icon.tsx
index dcd93e113..4d3695fed 100644
--- a/src/components/ui/icon/svg-icon.tsx
+++ b/src/components/ui/svg-icon.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import InlineSVG, { Props as InlineSVGProps } from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
 interface ISvgIcon extends InlineSVGProps {
diff --git a/src/components/ui/tabs/tabs.css b/src/components/ui/tabs.css
similarity index 100%
rename from src/components/ui/tabs/tabs.css
rename to src/components/ui/tabs.css
diff --git a/src/components/ui/tabs/tabs.tsx b/src/components/ui/tabs.tsx
similarity index 92%
rename from src/components/ui/tabs/tabs.tsx
rename to src/components/ui/tabs.tsx
index 3d435183e..e3a1c11c1 100644
--- a/src/components/ui/tabs/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -6,15 +6,14 @@ import {
   useTabsContext,
 } from '@reach/tabs';
 import clsx from 'clsx';
-import React from 'react';
+import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import Counter from '../counter/counter';
-
+import Counter from './counter.tsx';
 import './tabs.css';
 
 const HORIZONTAL_PADDING = 8;
-const AnimatedContext = React.createContext(null);
+const AnimatedContext = createContext(null);
 
 interface IAnimatedInterface {
   /** Callback when a tab is chosen. */
@@ -26,8 +25,8 @@ interface IAnimatedInterface {
 
 /** Tabs with a sliding active state. */
 const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
-  const [activeRect, setActiveRect] = React.useState(null);
-  const ref = React.useRef();
+  const [activeRect, setActiveRect] = useState(null);
+  const ref = useRef();
   const rect = useRect(ref);
 
   // @ts-ignore
@@ -81,14 +80,14 @@ const AnimatedTab: React.FC<IAnimatedTab> = ({ index, ...props }) => {
   const isSelected: boolean = selectedIndex === index;
 
   // measure the size of our element, only listen to rect if active
-  const ref = React.useRef();
+  const ref = useRef();
   const rect = useRect(ref, { observe: isSelected });
 
   // get the style changing function from context
-  const setActiveRect = React.useContext(AnimatedContext);
+  const setActiveRect = useContext(AnimatedContext);
 
   // callup to set styles whenever we're active
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (isSelected) {
       // @ts-ignore
       setActiveRect(rect);
diff --git a/src/components/ui/tag-input/tag-input.tsx b/src/components/ui/tag-input.tsx
similarity index 94%
rename from src/components/ui/tag-input/tag-input.tsx
rename to src/components/ui/tag-input.tsx
index 8a4629b1f..dd248fbdd 100644
--- a/src/components/ui/tag-input/tag-input.tsx
+++ b/src/components/ui/tag-input.tsx
@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import HStack from '../hstack/hstack';
-
-import Tag from './tag';
+import HStack from './hstack.tsx';
+import Tag from './tag.tsx';
 
 interface ITagInput {
   tags: string[];
diff --git a/src/components/ui/tag-input/tag.tsx b/src/components/ui/tag.tsx
similarity index 75%
rename from src/components/ui/tag-input/tag.tsx
rename to src/components/ui/tag.tsx
index d6bf05c75..cffb865d0 100644
--- a/src/components/ui/tag-input/tag.tsx
+++ b/src/components/ui/tag.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
 
-import IconButton from '../icon-button/icon-button';
-import Text from '../text/text';
+import IconButton from './icon-button.tsx';
+import Text from './text.tsx';
 
 interface ITag {
   /** Name of the tag. */
@@ -18,7 +18,7 @@ const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
 
       <IconButton
         iconClassName='h-4 w-4'
-        src={require('@tabler/icons/outline/x.svg')}
+        src={xIcon}
         onClick={() => onDelete(tag)}
       />
     </div>
diff --git a/src/components/ui/text/text.tsx b/src/components/ui/text.tsx
similarity index 97%
rename from src/components/ui/text/text.tsx
rename to src/components/ui/text.tsx
index 2c7a17e03..1e31c90f4 100644
--- a/src/components/ui/text/text.tsx
+++ b/src/components/ui/text.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
@@ -86,7 +86,7 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
 }
 
 /** UI-friendly text container with dark mode support. */
-const Text = React.forwardRef<any, IText>(
+const Text = forwardRef<any, IText>(
   (props, ref) => {
     const {
       align,
@@ -133,5 +133,5 @@ const Text = React.forwardRef<any, IText>(
 
 export {
   Text as default,
-  IText,
+  type IText,
 };
diff --git a/src/components/ui/textarea/textarea.tsx b/src/components/ui/textarea.tsx
similarity index 93%
rename from src/components/ui/textarea/textarea.tsx
rename to src/components/ui/textarea.tsx
index 0ba036a08..cafa7ba94 100644
--- a/src/components/ui/textarea/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,12 +1,12 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useLocale } from 'soapbox/hooks';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import { useLocale } from 'soapbox/hooks/useLocale.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'maxLength' | 'onChange' | 'onClick' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
@@ -40,7 +40,7 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
 }
 
 /** Textarea with custom styles. */
-const Textarea = React.forwardRef(({
+const Textarea = forwardRef(({
   isCodeEditor = false,
   hasError = false,
   isResizeable = true,
diff --git a/src/components/ui/toast/toast.tsx b/src/components/ui/toast.tsx
similarity index 86%
rename from src/components/ui/toast/toast.tsx
rename to src/components/ui/toast.tsx
index f5a9cb2a9..f27b94228 100644
--- a/src/components/ui/toast/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,15 +1,18 @@
+import alertCircleIcon from '@tabler/icons/outline/alert-circle.svg';
+import circleCheckIcon from '@tabler/icons/outline/circle-check.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
 import toast, { Toast as RHToast } from 'react-hot-toast';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { ToastText, ToastType } from 'soapbox/toast';
+import { ToastText, ToastType } from 'soapbox/toast.tsx';
 
-import HStack from '../hstack/hstack';
-import Icon from '../icon/icon';
-import Stack from '../stack/stack';
-import Text from '../text/text';
+import HStack from './hstack.tsx';
+import Icon from './icon.tsx';
+import Stack from './stack.tsx';
+import Text from './text.tsx';
 
 const renderText = (text: ToastText) => {
   if (typeof text === 'string') {
@@ -42,7 +45,7 @@ const Toast = (props: IToast) => {
       case 'success':
         return (
           <Icon
-            src={require('@tabler/icons/outline/circle-check.svg')}
+            src={circleCheckIcon}
             className='size-6 text-success-500 dark:text-success-400'
             aria-hidden
           />
@@ -50,7 +53,7 @@ const Toast = (props: IToast) => {
       case 'info':
         return (
           <Icon
-            src={require('@tabler/icons/outline/info-circle.svg')}
+            src={infoCircleIcon}
             className='size-6 text-primary-600 dark:text-accent-blue'
             aria-hidden
           />
@@ -58,7 +61,7 @@ const Toast = (props: IToast) => {
       case 'error':
         return (
           <Icon
-            src={require('@tabler/icons/outline/alert-circle.svg')}
+            src={alertCircleIcon}
             className='size-6 text-danger-600'
             aria-hidden
           />
@@ -143,7 +146,7 @@ const Toast = (props: IToast) => {
               data-testid='toast-dismiss'
             >
               <span className='sr-only'><FormattedMessage id='lightbox.close' defaultMessage='Close' /></span>
-              <Icon src={require('@tabler/icons/outline/x.svg')} className='size-5' />
+              <Icon src={xIcon} className='size-5' />
             </button>
           </div>
         </HStack>
diff --git a/src/components/ui/toggle/toggle.tsx b/src/components/ui/toggle.tsx
similarity index 97%
rename from src/components/ui/toggle/toggle.tsx
rename to src/components/ui/toggle.tsx
index 681633069..c43089fd9 100644
--- a/src/components/ui/toggle/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 interface IToggle extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'checked' | 'onChange' | 'required' | 'disabled'> {
   size?: 'sm' | 'md';
diff --git a/src/components/ui/tooltip/tooltip.tsx b/src/components/ui/tooltip.tsx
similarity index 95%
rename from src/components/ui/tooltip/tooltip.tsx
rename to src/components/ui/tooltip.tsx
index 08d270c5d..cce1728a2 100644
--- a/src/components/ui/tooltip/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -8,7 +8,7 @@ import {
   useInteractions,
   useTransitionStyles,
 } from '@floating-ui/react';
-import React, { useRef, useState } from 'react';
+import { cloneElement, useRef, useState } from 'react';
 
 interface ITooltip {
   /** Element to display the tooltip around. */
@@ -63,7 +63,7 @@ const Tooltip: React.FC<ITooltip> = (props) => {
 
   return (
     <>
-      {React.cloneElement(children, {
+      {cloneElement(children, {
         ref: refs.setReference,
         ...getReferenceProps(),
       })}
diff --git a/src/components/ui/button/useButtonStyles.ts b/src/components/ui/useButtonStyles.ts
similarity index 97%
rename from src/components/ui/button/useButtonStyles.ts
rename to src/components/ui/useButtonStyles.ts
index ed9c5cbe7..79e1375cc 100644
--- a/src/components/ui/button/useButtonStyles.ts
+++ b/src/components/ui/useButtonStyles.ts
@@ -49,4 +49,4 @@ const useButtonStyles = ({
   return buttonStyle;
 };
 
-export { useButtonStyles, ButtonSizes, ButtonThemes };
+export { useButtonStyles, type ButtonSizes, type ButtonThemes };
diff --git a/src/components/ui/widget/widget.tsx b/src/components/ui/widget.tsx
similarity index 81%
rename from src/components/ui/widget/widget.tsx
rename to src/components/ui/widget.tsx
index 4d2f8482b..bd083d960 100644
--- a/src/components/ui/widget/widget.tsx
+++ b/src/components/ui/widget.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
 
-import HStack from 'soapbox/components/ui/hstack/hstack';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import Stack from 'soapbox/components/ui/stack/stack';
-import Text from 'soapbox/components/ui/text/text';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IWidgetTitle {
   /** Title text for the widget. */
@@ -42,7 +42,7 @@ const Widget: React.FC<IWidget> = ({
   title,
   children,
   onActionClick,
-  actionIcon = require('@tabler/icons/outline/arrow-right.svg'),
+  actionIcon = arrowRightIcon,
   actionTitle,
   action,
 }): JSX.Element => {
diff --git a/src/components/upload-progress.tsx b/src/components/upload-progress.tsx
index 10b0490d2..7ea7f9279 100644
--- a/src/components/upload-progress.tsx
+++ b/src/components/upload-progress.tsx
@@ -1,7 +1,11 @@
-import React from 'react';
+import cloudUploadIcon from '@tabler/icons/outline/cloud-upload.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, ProgressBar, Stack, Text } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IUploadProgress {
   /** Number between 0 and 100 to represent the percentage complete. */
@@ -13,7 +17,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
   return (
     <HStack alignItems='center' space={2}>
       <Icon
-        src={require('@tabler/icons/outline/cloud-upload.svg')}
+        src={cloudUploadIcon}
         className='size-7 text-gray-500'
       />
 
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index aa61483bc..53aa79d91 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -1,3 +1,4 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import bookIcon from '@tabler/icons/outline/book.svg';
 import fileCodeIcon from '@tabler/icons/outline/file-code.svg';
 import fileSpreadsheetIcon from '@tabler/icons/outline/file-spreadsheet.svg';
@@ -9,16 +10,21 @@ import xIcon from '@tabler/icons/outline/x.svg';
 import zoomInIcon from '@tabler/icons/outline/zoom-in.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { spring } from 'react-motion';
 
-import { openModal } from 'soapbox/actions/modals';
-import Blurhash from 'soapbox/components/blurhash';
-import { HStack, Icon, IconButton } from 'soapbox/components/ui';
-import Motion from 'soapbox/features/ui/util/optional-motion';
-import { useAppDispatch, useSettings } from 'soapbox/hooks';
-import { Attachment } from 'soapbox/types/entities';
+import { openModal } from 'soapbox/actions/modals.ts';
+import AudioPlaceHolder from 'soapbox/assets/images/audio-placeholder.png';
+import VideoPlaceHolder from 'soapbox/assets/images/video-placeholder.png';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Motion from 'soapbox/features/ui/util/optional-motion.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { Attachment } from 'soapbox/types/entities.ts';
 
 export const MIMETYPE_ICONS: Record<string, string> = {
   'application/x-freearc': fileZipIcon,
@@ -145,6 +151,7 @@ const Upload: React.FC<IUpload> = ({
   const y = focusY ? ((focusY / -2) + .5) * 100 : undefined;
   const mediaType = media.type;
   const mimeType = media.pleroma.get('mime_type') as string | undefined;
+  const isMediaCover = mediaType === 'video' || mediaType === 'audio';
 
   const uploadIcon = mediaType === 'unknown' && (
     <Icon
@@ -153,9 +160,20 @@ const Upload: React.FC<IUpload> = ({
     />
   );
 
+  const bgUrl = () => {
+    switch (mediaType) {
+      case 'image':
+        return `url(${media.preview_url})`;
+      case 'video':
+        return `url(${VideoPlaceHolder})`;
+      default:
+        return `url(${AudioPlaceHolder})`;
+    }
+  };
+
   return (
     <div
-      className='compose-form__upload'
+      className='relative m-[5px] min-w-[40%] flex-[1_1_0%] overflow-hidden rounded'
       tabIndex={0}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -170,10 +188,10 @@ const Upload: React.FC<IUpload> = ({
       <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
         {({ scale }) => (
           <div
-            className={clsx('compose-form__upload-thumbnail', mediaType)}
+            className={clsx('relative h-40 w-full overflow-hidden bg-contain bg-center bg-no-repeat', { 'bg-cover ': isMediaCover })}
             style={{
               transform: `scale(${scale})`,
-              backgroundImage: mediaType === 'image' ? `url(${media.preview_url})` : undefined,
+              backgroundImage: bgUrl(),
               backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined }}
           >
             <HStack className='absolute right-2 top-2 z-10' space={2}>
@@ -200,12 +218,13 @@ const Upload: React.FC<IUpload> = ({
             </HStack>
 
             {onDescriptionChange && (
-              <div className={clsx('compose-form__upload-description', { active })}>
+              <div className={clsx('absolute inset-x-0 bottom-0 z-[2px] bg-gradient-to-b from-transparent via-gray-900/50 to-gray-900/80 p-2.5 opacity-0 transition-opacity duration-100 ease-linear', { 'opacity-100': active })}>
                 <label>
                   <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
 
                   <textarea
                     placeholder={intl.formatMessage(messages.description)}
+                    className='m-0 w-full rounded-md border border-solid border-white/25 bg-transparent p-2.5 text-sm text-white placeholder:text-white/60'
                     value={description}
                     maxLength={descriptionLimit}
                     onFocus={handleInputFocus}
@@ -225,14 +244,14 @@ const Upload: React.FC<IUpload> = ({
                   'opacity-100': !active,
                 })}
               >
-                <Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
+                <Icon className='size-4' src={alertTriangleIcon} />
                 <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
               </span>
             )}
 
-            <div className='compose-form__upload-preview'>
+            <div className='absolute inset-0 z-[-1] size-full'>
               {mediaType === 'video' && (
-                <video autoPlay playsInline muted loop>
+                <video className='size-full object-cover' autoPlay playsInline muted loop>
                   <source src={media.preview_url} />
                 </video>
               )}
diff --git a/src/components/validation-checkmark.test.tsx b/src/components/validation-checkmark.test.tsx
index fd0d4b765..8e1db5e18 100644
--- a/src/components/validation-checkmark.test.tsx
+++ b/src/components/validation-checkmark.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import ValidationCheckmark from './validation-checkmark';
+import ValidationCheckmark from './validation-checkmark.tsx';
 
 describe('<ValidationCheckmark />', () => {
   it('renders text', () => {
diff --git a/src/components/validation-checkmark.tsx b/src/components/validation-checkmark.tsx
index cb4e06816..ec3faa7f3 100644
--- a/src/components/validation-checkmark.tsx
+++ b/src/components/validation-checkmark.tsx
@@ -1,7 +1,10 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import pointIcon from '@tabler/icons/outline/point.svg';
 import clsx from 'clsx';
-import React from 'react';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IValidationCheckmark {
   isValid: boolean;
@@ -12,7 +15,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
   return (
     <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
       <Icon
-        src={isValid ? require('@tabler/icons/outline/check.svg') : require('@tabler/icons/outline/point.svg')}
+        src={isValid ? checkIcon : pointIcon}
         className={clsx({
           'w-4 h-4': true,
           'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,
diff --git a/src/components/verification-badge.tsx b/src/components/verification-badge.tsx
index d69cf9053..0eadb3a9c 100644
--- a/src/components/verification-badge.tsx
+++ b/src/components/verification-badge.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { Icon } from 'soapbox/components/ui';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import verifiedIcon from 'soapbox/assets/icons/verified.svg';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const messages = defineMessages({
   verified: { id: 'account.verified', defaultMessage: 'Verified Account' },
@@ -18,7 +18,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const soapboxConfig = useSoapboxConfig();
 
   // Prefer a custom icon if found
-  const icon = soapboxConfig.verifiedIcon || require('soapbox/assets/icons/verified.svg');
+  const icon = soapboxConfig.verifiedIcon || verifiedIcon;
 
   // Render component based on file extension
   const Element = icon.endsWith('.svg') ? Icon : 'img';
diff --git a/src/containers/account-container.tsx b/src/containers/account-container.tsx
index 31500b739..e71720fe1 100644
--- a/src/containers/account-container.tsx
+++ b/src/containers/account-container.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import { useAccount } from 'soapbox/api/hooks';
-import Account, { IAccount } from 'soapbox/components/account';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account, { IAccount } from 'soapbox/components/account.tsx';
 
 interface IAccountContainer extends Omit<IAccount, 'account'> {
   id: string;
diff --git a/src/containers/status-container.tsx b/src/containers/status-container.tsx
index b29310f25..8be001464 100644
--- a/src/containers/status-container.tsx
+++ b/src/containers/status-container.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
-import Status, { IStatus } from 'soapbox/components/status';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import Status, { IStatus } from 'soapbox/components/status.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IStatusContainer extends Omit<IStatus, 'status'> {
   id: string;
diff --git a/src/contexts/chat-context.tsx b/src/contexts/chat-context.tsx
index 14354549e..be68d000e 100644
--- a/src/contexts/chat-context.tsx
+++ b/src/contexts/chat-context.tsx
@@ -1,9 +1,11 @@
-import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 
-import { toggleMainWindow } from 'soapbox/actions/chats';
-import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks';
-import { IChat, useChat } from 'soapbox/queries/chats';
+import { toggleMainWindow } from 'soapbox/actions/chats.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { IChat, useChat } from 'soapbox/queries/chats.ts';
 
 const ChatContext = createContext<any>({
   isOpen: false,
diff --git a/src/contexts/nostr-context.tsx b/src/contexts/nostr-context.tsx
index b83c4b950..a5cad214e 100644
--- a/src/contexts/nostr-context.tsx
+++ b/src/contexts/nostr-context.tsx
@@ -1,7 +1,7 @@
 import { NRelay1 } from '@nostrify/nostrify';
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
 
-import { useInstance } from 'soapbox/hooks/useInstance';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 interface NostrContextType {
   relay?: NRelay1;
diff --git a/src/contexts/stat-context.tsx b/src/contexts/stat-context.tsx
index 279f45c37..3c53bbb53 100644
--- a/src/contexts/stat-context.tsx
+++ b/src/contexts/stat-context.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
 
 type IStatContext = {
   unreadChatsCount: number;
@@ -30,4 +30,4 @@ const StatProvider: React.FC<IStatProvider> = ({ children }) => {
 
 const useStatContext = (): IStatContext => useContext(StatContext);
 
-export { StatProvider, useStatContext, IStatContext };
\ No newline at end of file
+export { StatProvider, useStatContext, type IStatContext };
\ No newline at end of file
diff --git a/src/custom.ts b/src/custom.ts
index dcbcba547..96ff58e34 100644
--- a/src/custom.ts
+++ b/src/custom.ts
@@ -1,7 +1,7 @@
 /**
  * Functions for dealing with custom build configuration.
  */
-import * as BuildConfig from 'soapbox/build-config';
+import * as BuildConfig from 'soapbox/build-config.ts';
 
 /** Require a custom JSON file if it exists */
 export const custom = (filename: string, fallback: any = {}): any => {
diff --git a/src/entity-store/actions.ts b/src/entity-store/actions.ts
index 27549b826..07b6fe7ce 100644
--- a/src/entity-store/actions.ts
+++ b/src/entity-store/actions.ts
@@ -1,4 +1,4 @@
-import type { EntitiesTransaction, Entity, EntityListState, ImportPosition } from './types';
+import type { EntitiesTransaction, Entity, EntityListState, ImportPosition } from './types.ts';
 
 const ENTITIES_IMPORT = 'ENTITIES_IMPORT' as const;
 const ENTITIES_DELETE = 'ENTITIES_DELETE' as const;
diff --git a/src/entity-store/entities.ts b/src/entity-store/entities.ts
index 13cdf4eaa..ade683f34 100644
--- a/src/entity-store/entities.ts
+++ b/src/entity-store/entities.ts
@@ -1,4 +1,4 @@
-import type * as Schemas from 'soapbox/schemas';
+import type * as Schemas from 'soapbox/schemas/index.ts';
 
 enum Entities {
   ACCOUNTS = 'Accounts',
diff --git a/src/entity-store/hooks/index.ts b/src/entity-store/hooks/index.ts
index 52a5fc499..ccf1fe645 100644
--- a/src/entity-store/hooks/index.ts
+++ b/src/entity-store/hooks/index.ts
@@ -1,10 +1,10 @@
-export { useEntities } from './useEntities';
-export { useEntity } from './useEntity';
-export { useEntityActions } from './useEntityActions';
-export { useEntityLookup } from './useEntityLookup';
-export { useCreateEntity } from './useCreateEntity';
-export { useDeleteEntity } from './useDeleteEntity';
-export { useDismissEntity } from './useDismissEntity';
-export { useIncrementEntity } from './useIncrementEntity';
-export { useChangeEntity } from './useChangeEntity';
-export { useTransaction } from './useTransaction';
\ No newline at end of file
+export { useEntities } from './useEntities.ts';
+export { useEntity } from './useEntity.ts';
+export { useEntityActions } from './useEntityActions.ts';
+export { useEntityLookup } from './useEntityLookup.ts';
+export { useCreateEntity } from './useCreateEntity.ts';
+export { useDeleteEntity } from './useDeleteEntity.ts';
+export { useDismissEntity } from './useDismissEntity.ts';
+export { useIncrementEntity } from './useIncrementEntity.ts';
+export { useChangeEntity } from './useChangeEntity.ts';
+export { useTransaction } from './useTransaction.ts';
\ No newline at end of file
diff --git a/src/entity-store/hooks/types.ts b/src/entity-store/hooks/types.ts
index b3ec5937a..32a2e64ea 100644
--- a/src/entity-store/hooks/types.ts
+++ b/src/entity-store/hooks/types.ts
@@ -1,4 +1,4 @@
-import type { Entity } from '../types';
+import type { Entity } from '../types.ts';
 import type z from 'zod';
 
 type EntitySchema<TEntity extends Entity = Entity> = z.ZodType<TEntity, z.ZodTypeDef, any>;
diff --git a/src/entity-store/hooks/useBatchedEntities.ts b/src/entity-store/hooks/useBatchedEntities.ts
index f6b0d9437..f70fb4a2f 100644
--- a/src/entity-store/hooks/useBatchedEntities.ts
+++ b/src/entity-store/hooks/useBatchedEntities.ts
@@ -1,19 +1,19 @@
 import { useEffect } from 'react';
 import { z } from 'zod';
 
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector';
-import { useGetState } from 'soapbox/hooks/useGetState';
-import { filteredArray } from 'soapbox/schemas/utils';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
 
-import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess } from '../actions';
-import { selectCache, selectListState, useListState } from '../selectors';
+import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess } from '../actions.ts';
+import { selectCache, selectListState, useListState } from '../selectors.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntitiesPath, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types';
-import type { Entity } from '../types';
-import type { RootState } from 'soapbox/store';
+import type { EntitiesPath, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types.ts';
+import type { Entity } from '../types.ts';
+import type { RootState } from 'soapbox/store.ts';
 
 interface UseBatchedEntitiesOpts<TEntity extends Entity> {
   schema?: EntitySchema<TEntity>;
diff --git a/src/entity-store/hooks/useChangeEntity.ts b/src/entity-store/hooks/useChangeEntity.ts
index 670c3a486..66df1a725 100644
--- a/src/entity-store/hooks/useChangeEntity.ts
+++ b/src/entity-store/hooks/useChangeEntity.ts
@@ -1,8 +1,8 @@
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { type Entity } from 'soapbox/entity-store/types';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useGetState } from 'soapbox/hooks/useGetState';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { type Entity } from 'soapbox/entity-store/types.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
 
 type ChangeEntityFn<TEntity extends Entity> = (entity: TEntity) => TEntity
 
diff --git a/src/entity-store/hooks/useCreateEntity.ts b/src/entity-store/hooks/useCreateEntity.ts
index 77eea017c..c3f519146 100644
--- a/src/entity-store/hooks/useCreateEntity.ts
+++ b/src/entity-store/hooks/useCreateEntity.ts
@@ -1,15 +1,15 @@
 import { z } from 'zod';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { importEntities } from '../actions';
+import { importEntities } from '../actions.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntityCallbacks, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types';
-import type { Entity } from '../types';
+import type { EntityCallbacks, EntityFn, EntitySchema, ExpandedEntitiesPath } from './types.ts';
+import type { Entity } from '../types.ts';
 
 interface UseCreateEntityOpts<TEntity extends Entity = Entity> {
   schema?: EntitySchema<TEntity>;
diff --git a/src/entity-store/hooks/useDeleteEntity.ts b/src/entity-store/hooks/useDeleteEntity.ts
index b406c0534..cea850c2d 100644
--- a/src/entity-store/hooks/useDeleteEntity.ts
+++ b/src/entity-store/hooks/useDeleteEntity.ts
@@ -1,10 +1,10 @@
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useGetState } from 'soapbox/hooks/useGetState';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { deleteEntities, importEntities } from '../actions';
+import { deleteEntities, importEntities } from '../actions.ts';
 
-import type { EntityCallbacks, EntityFn } from './types';
+import type { EntityCallbacks, EntityFn } from './types.ts';
 
 /**
  * Optimistically deletes an entity from the store.
diff --git a/src/entity-store/hooks/useDismissEntity.ts b/src/entity-store/hooks/useDismissEntity.ts
index a9bd531a3..d106de66d 100644
--- a/src/entity-store/hooks/useDismissEntity.ts
+++ b/src/entity-store/hooks/useDismissEntity.ts
@@ -1,11 +1,11 @@
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { dismissEntities } from '../actions';
+import { dismissEntities } from '../actions.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntityFn, ExpandedEntitiesPath } from './types';
+import type { EntityFn, ExpandedEntitiesPath } from './types.ts';
 
 /**
  * Removes an entity from a specific list.
diff --git a/src/entity-store/hooks/useEntities.ts b/src/entity-store/hooks/useEntities.ts
index 45c65eb93..f23ca8514 100644
--- a/src/entity-store/hooks/useEntities.ts
+++ b/src/entity-store/hooks/useEntities.ts
@@ -2,20 +2,20 @@ import LinkHeader from 'http-link-header';
 import { useEffect } from 'react';
 import z from 'zod';
 
-import { useApi } from 'soapbox/hooks/useApi';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector';
-import { useGetState } from 'soapbox/hooks/useGetState';
-import { filteredArray } from 'soapbox/schemas/utils';
-import { realNumberSchema } from 'soapbox/utils/numbers';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useGetState } from 'soapbox/hooks/useGetState.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
+import { realNumberSchema } from 'soapbox/utils/numbers.tsx';
 
-import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess, invalidateEntityList } from '../actions';
-import { selectEntities, selectListState, useListState } from '../selectors';
+import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess, invalidateEntityList } from '../actions.ts';
+import { selectEntities, selectListState, useListState } from '../selectors.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntityFn, EntitySchema, ExpandedEntitiesPath } from './types';
-import type { Entity } from '../types';
+import type { EntityFn, EntitySchema, ExpandedEntitiesPath } from './types.ts';
+import type { Entity } from '../types.ts';
 
 /** Additional options for the hook. */
 interface UseEntitiesOpts<TEntity extends Entity> {
diff --git a/src/entity-store/hooks/useEntity.ts b/src/entity-store/hooks/useEntity.ts
index 2e6734f9c..6c16583d6 100644
--- a/src/entity-store/hooks/useEntity.ts
+++ b/src/entity-store/hooks/useEntity.ts
@@ -1,16 +1,16 @@
 import { useEffect, useState } from 'react';
 import z from 'zod';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { importEntities } from '../actions';
-import { selectEntity } from '../selectors';
+import { importEntities } from '../actions.ts';
+import { selectEntity } from '../selectors.ts';
 
-import type { EntitySchema, EntityPath, EntityFn } from './types';
-import type { Entity } from '../types';
+import type { EntitySchema, EntityPath, EntityFn } from './types.ts';
+import type { Entity } from '../types.ts';
 
 /** Additional options for the hook. */
 interface UseEntityOpts<TEntity extends Entity> {
diff --git a/src/entity-store/hooks/useEntityActions.ts b/src/entity-store/hooks/useEntityActions.ts
index b038946f3..386e746ef 100644
--- a/src/entity-store/hooks/useEntityActions.ts
+++ b/src/entity-store/hooks/useEntityActions.ts
@@ -1,11 +1,11 @@
-import { useApi } from 'soapbox/hooks/useApi';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
-import { useCreateEntity } from './useCreateEntity';
-import { useDeleteEntity } from './useDeleteEntity';
-import { parseEntitiesPath } from './utils';
+import { useCreateEntity } from './useCreateEntity.ts';
+import { useDeleteEntity } from './useDeleteEntity.ts';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntitySchema, ExpandedEntitiesPath } from './types';
-import type { Entity } from '../types';
+import type { EntitySchema, ExpandedEntitiesPath } from './types.ts';
+import type { Entity } from '../types.ts';
 
 interface UseEntityActionsOpts<TEntity extends Entity = Entity> {
   schema?: EntitySchema<TEntity>;
diff --git a/src/entity-store/hooks/useEntityLookup.ts b/src/entity-store/hooks/useEntityLookup.ts
index da3553281..13e5d72da 100644
--- a/src/entity-store/hooks/useEntityLookup.ts
+++ b/src/entity-store/hooks/useEntityLookup.ts
@@ -1,17 +1,17 @@
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useAppSelector } from 'soapbox/hooks/useAppSelector';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { importEntities } from '../actions';
-import { findEntity } from '../selectors';
-import { Entity } from '../types';
+import { importEntities } from '../actions.ts';
+import { findEntity } from '../selectors.ts';
+import { Entity } from '../types.ts';
 
-import { EntityFn } from './types';
-import { type UseEntityOpts } from './useEntity';
+import { EntityFn } from './types.ts';
+import { type UseEntityOpts } from './useEntity.ts';
 
 /** Entities will be filtered through this function until it returns true. */
 type LookupFn<TEntity extends Entity> = (entity: TEntity) => boolean
diff --git a/src/entity-store/hooks/useIncrementEntity.ts b/src/entity-store/hooks/useIncrementEntity.ts
index 06f8b2352..7ddd101a6 100644
--- a/src/entity-store/hooks/useIncrementEntity.ts
+++ b/src/entity-store/hooks/useIncrementEntity.ts
@@ -1,11 +1,11 @@
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
-import { useLoading } from 'soapbox/hooks/useLoading';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useLoading } from 'soapbox/hooks/useLoading.ts';
 
-import { incrementEntities } from '../actions';
+import { incrementEntities } from '../actions.ts';
 
-import { parseEntitiesPath } from './utils';
+import { parseEntitiesPath } from './utils.ts';
 
-import type { EntityFn, ExpandedEntitiesPath } from './types';
+import type { EntityFn, ExpandedEntitiesPath } from './types.ts';
 
 /**
  * Increases (or decreases) the `totalCount` in the entity list by the specified amount.
diff --git a/src/entity-store/hooks/useTransaction.ts b/src/entity-store/hooks/useTransaction.ts
index 691d895c0..7aa13c194 100644
--- a/src/entity-store/hooks/useTransaction.ts
+++ b/src/entity-store/hooks/useTransaction.ts
@@ -1,8 +1,8 @@
-import { entitiesTransaction } from 'soapbox/entity-store/actions';
-import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
+import { entitiesTransaction } from 'soapbox/entity-store/actions.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import type { EntityTypes } from 'soapbox/entity-store/entities';
-import type { EntitiesTransaction, Entity } from 'soapbox/entity-store/types';
+import type { EntityTypes } from 'soapbox/entity-store/entities.ts';
+import type { EntitiesTransaction, Entity } from 'soapbox/entity-store/types.ts';
 
 type Updater<TEntity extends Entity> = Record<string, (entity: TEntity) => TEntity>
 
diff --git a/src/entity-store/hooks/utils.ts b/src/entity-store/hooks/utils.ts
index cdb059ee4..a82de1293 100644
--- a/src/entity-store/hooks/utils.ts
+++ b/src/entity-store/hooks/utils.ts
@@ -1,4 +1,4 @@
-import type { EntitiesPath, ExpandedEntitiesPath } from './types';
+import type { EntitiesPath, ExpandedEntitiesPath } from './types.ts';
 
 function parseEntitiesPath(expandedPath: ExpandedEntitiesPath) {
   const [entityType, ...listKeys] = expandedPath;
diff --git a/src/entity-store/reducer.test.ts b/src/entity-store/reducer.test.ts
index 36970463f..ab0c5a469 100644
--- a/src/entity-store/reducer.test.ts
+++ b/src/entity-store/reducer.test.ts
@@ -1,3 +1,5 @@
+import { expect, test } from 'vitest';
+
 import {
   deleteEntities,
   dismissEntities,
@@ -6,11 +8,11 @@ import {
   entitiesFetchSuccess,
   importEntities,
   incrementEntities,
-} from './actions';
-import reducer, { State } from './reducer';
-import { createListState } from './utils';
+} from './actions.ts';
+import reducer, { State } from './reducer.ts';
+import { createListState } from './utils.ts';
 
-import type { EntityCache } from './types';
+import type { EntityCache } from './types.ts';
 
 interface TestEntity {
   id: string;
diff --git a/src/entity-store/reducer.ts b/src/entity-store/reducer.ts
index 2e53656af..dec8c1697 100644
--- a/src/entity-store/reducer.ts
+++ b/src/entity-store/reducer.ts
@@ -11,11 +11,11 @@ import {
   ENTITIES_INVALIDATE_LIST,
   ENTITIES_INCREMENT,
   ENTITIES_TRANSACTION,
-} from './actions';
-import { createCache, createList, updateStore, updateList } from './utils';
+} from './actions.ts';
+import { createCache, createList, updateStore, updateList } from './utils.ts';
 
-import type { DeleteEntitiesOpts } from './actions';
-import type { EntitiesTransaction, Entity, EntityCache, EntityListState, ImportPosition } from './types';
+import type { DeleteEntitiesOpts } from './actions.ts';
+import type { EntitiesTransaction, Entity, EntityCache, EntityListState, ImportPosition } from './types.ts';
 
 /** Entity reducer state. */
 interface State {
diff --git a/src/entity-store/selectors.ts b/src/entity-store/selectors.ts
index 3e827b360..8499cb8d6 100644
--- a/src/entity-store/selectors.ts
+++ b/src/entity-store/selectors.ts
@@ -1,8 +1,8 @@
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import type { EntitiesPath } from './hooks/types';
-import type { Entity, EntityListState } from './types';
-import type { RootState } from 'soapbox/store';
+import type { EntitiesPath } from './hooks/types.ts';
+import type { Entity, EntityListState } from './types.ts';
+import type { RootState } from 'soapbox/store.ts';
 
 /** Get cache at path from Redux. */
 const selectCache = (state: RootState, path: EntitiesPath) => state.entities[path[0]];
diff --git a/src/entity-store/utils.ts b/src/entity-store/utils.ts
index 58d54465a..6a1e3953f 100644
--- a/src/entity-store/utils.ts
+++ b/src/entity-store/utils.ts
@@ -1,4 +1,4 @@
-import type { Entity, EntityStore, EntityList, EntityCache, EntityListState, ImportPosition } from './types';
+import type { Entity, EntityStore, EntityList, EntityCache, EntityListState, ImportPosition } from './types.ts';
 
 /** Insert the entities into the store. */
 const updateStore = (store: EntityStore, entities: Entity[]): EntityStore => {
diff --git a/src/features/about/index.tsx b/src/features/about/index.tsx
index 04bfb7176..1a2ad7077 100644
--- a/src/features/about/index.tsx
+++ b/src/features/about/index.tsx
@@ -1,13 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
-import { fetchAboutPage } from 'soapbox/actions/about';
-import { Navlinks } from 'soapbox/components/navlinks';
-import { Card } from 'soapbox/components/ui';
-import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
+import { fetchAboutPage } from 'soapbox/actions/about.ts';
+import { Navlinks } from 'soapbox/components/navlinks.tsx';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-import { languages } from '../preferences';
+import { languages } from '../preferences/index.tsx';
 
 /** Displays arbitrary user-uploaded HTML on a page at `/about/:slug` */
 const AboutPage: React.FC = () => {
@@ -42,18 +44,22 @@ const AboutPage: React.FC = () => {
       {' '} {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
       <ul className='inline list-none p-0'>
         <li className="inline after:content-['_·_']">
-          <a href='#' onClick={() => setLocale(defaultLocale)}>
-            {/* @ts-ignore */}
-            {languages[defaultLocale] || defaultLocale}
-          </a>
+          <Link to={'/'} className='inline-flex'>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(defaultLocale)}>
+              {/* @ts-ignore */}
+              {languages[defaultLocale] || defaultLocale}
+            </button>
+          </Link>
         </li>
         {
           pageLocales?.map(locale => (
             <li className="inline after:content-['_·_'] last:after:content-none" key={locale}>
-              <a href='#' onClick={() => setLocale(locale)}>
-                {/* @ts-ignore */}
-                {languages[locale] || locale}
-              </a>
+              <Link to={'/'} className='inline-flex'>
+                <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={() => setLocale(locale)}>
+                  {/* @ts-ignore */}
+                  {languages[locale] || locale}
+                </button>
+              </Link>
             </li>
           ))
         }
diff --git a/src/features/account-gallery/components/media-item.tsx b/src/features/account-gallery/components/media-item.tsx
index b7c77a7d3..ed751a393 100644
--- a/src/features/account-gallery/components/media-item.tsx
+++ b/src/features/account-gallery/components/media-item.tsx
@@ -1,13 +1,15 @@
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import Blurhash from 'soapbox/components/blurhash';
-import StillImage from 'soapbox/components/still-image';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useSettings } from 'soapbox/hooks';
-import { isIOS } from 'soapbox/is-mobile';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import StillImage from 'soapbox/components/still-image.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { isIOS } from 'soapbox/is-mobile.ts';
 
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 interface IMediaItem {
   attachment: Attachment;
@@ -103,7 +105,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
     const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
     thumbnail = (
       <div className='relative z-[1] block size-full cursor-zoom-in leading-none text-gray-400 no-underline'>
-        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon  className='size-24' src={require('@tabler/icons/outline/volume.svg')} /></span>
+        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'><SvgIcon  className='size-24' src={volumeIcon} /></span>
         <span className='pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 px-1.5 py-0.5 text-[11px] font-semibold leading-[18px] text-white opacity-90 transition-opacity duration-100 ease-linear'>{fileExtension}</span>
       </div>
     );
@@ -112,7 +114,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
   if (!visible) {
     icon = (
       <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
-        <SvgIcon className='size-24' src={require('@tabler/icons/outline/eye-off.svg')} />
+        <SvgIcon className='size-24' src={eyeOffIcon} />
       </span>
     );
   }
diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index e8707e543..9d163bc46 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -1,20 +1,22 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { expandAccountMediaTimeline } from 'soapbox/actions/timelines';
-import { useAccountLookup } from 'soapbox/api/hooks';
-import LoadMore from 'soapbox/components/load-more';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import { Column, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { getAccountGallery } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { expandAccountMediaTimeline } from 'soapbox/actions/timelines.ts';
+import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
+import LoadMore from 'soapbox/components/load-more.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { getAccountGallery } from 'soapbox/selectors/index.ts';
 
-import MediaItem from './components/media-item';
+import MediaItem from './components/media-item.tsx';
 
-import type { Attachment, Status } from 'soapbox/types/entities';
+import type { Attachment, Status } from 'soapbox/types/entities.ts';
 
 interface ILoadMoreMedia {
   maxId: string | null;
diff --git a/src/features/account-timeline/components/moved-note.tsx b/src/features/account-timeline/components/moved-note.tsx
index c8924cdbe..8d19c4a02 100644
--- a/src/features/account-timeline/components/moved-note.tsx
+++ b/src/features/account-timeline/components/moved-note.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
 import { FormattedMessage } from 'react-intl';
 
-import Account from 'soapbox/components/account';
-import Icon from 'soapbox/components/icon';
-import { HStack, Text } from 'soapbox/components/ui';
+import Account from 'soapbox/components/account.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 interface IMovedNote {
   from: AccountEntity;
@@ -16,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
   <div className='p-4'>
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
-        src={require('@tabler/icons/outline/briefcase.svg')}
+        src={briefcaseIcon}
         className='flex-none text-primary-600 dark:text-primary-400'
       />
 
diff --git a/src/features/account-timeline/index.tsx b/src/features/account-timeline/index.tsx
index e363f7a7c..843809a4c 100644
--- a/src/features/account-timeline/index.tsx
+++ b/src/features/account-timeline/index.tsx
@@ -1,16 +1,22 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchAccountByUsername } from 'soapbox/actions/accounts';
-import { fetchPatronAccount } from 'soapbox/actions/patron';
-import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/actions/timelines';
-import { useAccountLookup } from 'soapbox/api/hooks';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusList from 'soapbox/components/status-list';
-import { Card, CardBody, Spinner, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { makeGetStatusIds } from 'soapbox/selectors';
+import { fetchAccountByUsername } from 'soapbox/actions/accounts.ts';
+import { fetchPatronAccount } from 'soapbox/actions/patron.ts';
+import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/actions/timelines.ts';
+import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
 const getStatusIds = makeGetStatusIds();
 
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index a9bd79b1a..76f8919a4 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -1,37 +1,61 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import clipboardCopyIcon from '@tabler/icons/outline/clipboard-copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import listIcon from '@tabler/icons/outline/list.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import rssIcon from '@tabler/icons/outline/rss.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
+import userCheckIcon from '@tabler/icons/outline/user-check.svg';
+import userXIcon from '@tabler/icons/outline/user-x.svg';
+import userIcon from '@tabler/icons/outline/user.svg';
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { List as ImmutableList } from 'immutable';
 import { nip19 } from 'nostr-tools';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { blockAccount, pinAccount, removeFromFollowers, unblockAccount, unmuteAccount, unpinAccount } from 'soapbox/actions/accounts';
-import { mentionCompose, directCompose } from 'soapbox/actions/compose';
-import { blockDomain, unblockDomain } from 'soapbox/actions/domain-blocks';
-import { openModal } from 'soapbox/actions/modals';
-import { initMuteModal } from 'soapbox/actions/mutes';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import { setSearchAccount } from 'soapbox/actions/search';
-import { getSettings } from 'soapbox/actions/settings';
-import { useFollow } from 'soapbox/api/hooks';
-import Badge from 'soapbox/components/badge';
-import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
-import StillImage from 'soapbox/components/still-image';
-import { Avatar, HStack, IconButton } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import SubscriptionButton from 'soapbox/features/ui/components/subscription-button';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import { normalizeAttachment } from 'soapbox/normalizers';
-import { ChatKeys, useChats } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { Account } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
-import { isDefaultHeader } from 'soapbox/utils/accounts';
-import copy from 'soapbox/utils/copy';
-import { MASTODON, parseVersion } from 'soapbox/utils/features';
+import { blockAccount, pinAccount, removeFromFollowers, unblockAccount, unmuteAccount, unpinAccount } from 'soapbox/actions/accounts.ts';
+import { mentionCompose, directCompose } from 'soapbox/actions/compose.ts';
+import { blockDomain, unblockDomain } from 'soapbox/actions/domain-blocks.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { initMuteModal } from 'soapbox/actions/mutes.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { setSearchAccount } from 'soapbox/actions/search.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { useFollow } from 'soapbox/api/hooks/index.ts';
+import Badge from 'soapbox/components/badge.tsx';
+import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu/index.ts';
+import StillImage from 'soapbox/components/still-image.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import MovedNote from 'soapbox/features/account-timeline/components/moved-note.tsx';
+import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
+import SubscriptionButton from 'soapbox/features/ui/components/subscription-button.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
+import { ChatKeys, useChats } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { Account } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
+import copy from 'soapbox/utils/copy.ts';
+import { MASTODON, parseVersion } from 'soapbox/utils/features.ts';
 
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
@@ -135,7 +159,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       dispatch(unblockAccount(account.id));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
         message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />, // eslint-disable-line formatjs/no-literal-string-in-jsx
         confirm: intl.formatMessage(messages.blockConfirm),
@@ -191,7 +215,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
   const onBlockDomain = (domain: string) => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
       message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications.' values={{ domain: <strong>{domain}</strong> }} />,
       confirm: intl.formatMessage(messages.blockDomainConfirm),
@@ -298,7 +322,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     if (features.rssFeeds && account.local) {
       menu.push({
         text: intl.formatMessage(messages.subscribeFeed),
-        icon: require('@tabler/icons/outline/rss.svg'),
+        icon: rssIcon,
         href: software === MASTODON ? `${account.url}.rss` : `${account.url}/feed.rss`,
         target: '_blank',
       });
@@ -308,7 +332,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.share, { name: account.username }),
         action: handleShare,
-        icon: require('@tabler/icons/outline/upload.svg'),
+        icon: uploadIcon,
       });
     }
 
@@ -321,7 +345,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.profileExternal, { domain }),
           action: () => onProfileExternal(url),
-          icon: require('@tabler/icons/outline/external-link.svg'),
+          icon: externalLinkIcon,
           href: url,
         });
       }
@@ -330,14 +354,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
     menu.push({
       text: intl.formatMessage(messages.copy),
       action: handleCopy,
-      icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+      icon: clipboardCopyIcon,
     });
 
     if (account.nostr.pubkey) {
       menu.push({
         text: intl.formatMessage(messages.npub),
         action: handleCopyNpub,
-        icon: require('@tabler/icons/outline/clipboard-copy.svg'),
+        icon: clipboardCopyIcon,
       });
     }
 
@@ -347,7 +371,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(account.id === ownAccount.id ? messages.searchSelf : messages.search, { name: account.username }),
         action: onSearch,
-        icon: require('@tabler/icons/outline/search.svg'),
+        icon: searchIcon,
       });
     }
 
@@ -359,38 +383,38 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.edit_profile),
         to: '/settings/profile',
-        icon: require('@tabler/icons/outline/user.svg'),
+        icon: userIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.preferences),
         to: '/settings',
-        icon: require('@tabler/icons/outline/settings.svg'),
+        icon: settingsIcon,
       });
       menu.push(null);
       menu.push({
         text: intl.formatMessage(messages.mutes),
         to: '/mutes',
-        icon: require('@tabler/icons/outline/circle-x.svg'),
+        icon: circleXIcon,
       });
       if (features.blocks) {
         menu.push({
           text: intl.formatMessage(messages.blocks),
           to: '/blocks',
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: account.username }),
         action: onMention,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: account.username }),
           action: onDirect,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -399,13 +423,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.hideReblogs, { name: account.username }),
             action: onReblogToggle,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.showReblogs, { name: account.username }),
             action: onReblogToggle,
-            icon: require('@tabler/icons/outline/repeat.svg'),
+            icon: repeatIcon,
           });
         }
 
@@ -413,7 +437,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.add_or_remove_from_list),
             action: onAddToList,
-            icon: require('@tabler/icons/outline/list.svg'),
+            icon: listIcon,
           });
         }
 
@@ -421,14 +445,14 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(account.relationship?.endorsed ? messages.unendorse : messages.endorse),
             action: onEndorseToggle,
-            icon: require('@tabler/icons/outline/user-check.svg'),
+            icon: userCheckIcon,
           });
         }
       } else if (features.lists && features.unrestrictedLists) {
         menu.push({
           text: intl.formatMessage(messages.add_or_remove_from_list),
           action: onAddToList,
-          icon: require('@tabler/icons/outline/list.svg'),
+          icon: listIcon,
         });
       }
 
@@ -438,7 +462,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.removeFromFollowers),
           action: onRemoveFromFollowers,
-          icon: require('@tabler/icons/outline/user-x.svg'),
+          icon: userXIcon,
         });
       }
 
@@ -446,13 +470,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unmute, { name: account.username }),
           action: onMute,
-          icon: require('@tabler/icons/outline/circle-x.svg'),
+          icon: circleXIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.mute, { name: account.username }),
           action: onMute,
-          icon: require('@tabler/icons/outline/circle-x.svg'),
+          icon: circleXIcon,
         });
       }
 
@@ -461,13 +485,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
           menu.push({
             text: intl.formatMessage(messages.unblock, { name: account.username }),
             action: onBlock,
-            icon: require('@tabler/icons/outline/ban.svg'),
+            icon: banIcon,
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.block, { name: account.username }),
             action: onBlock,
-            icon: require('@tabler/icons/outline/ban.svg'),
+            icon: banIcon,
           });
         }
       }
@@ -475,7 +499,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.report, { name: account.username }),
         action: onReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -488,13 +512,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
         menu.push({
           text: intl.formatMessage(messages.unblockDomain, { domain }),
           action: () => onUnblockDomain(domain),
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.blockDomain, { domain }),
           action: () => onBlockDomain(domain),
-          icon: require('@tabler/icons/outline/ban.svg'),
+          icon: banIcon,
         });
       }
     }
@@ -505,7 +529,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: account.username }),
         action: onModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
     }
 
@@ -592,7 +616,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
       return (
         <IconButton
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           onClick={() => createAndNavigateToChat.mutate(account.id)}
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
@@ -604,7 +628,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
     } else if (account.pleroma?.accepts_chat_messages) {
       return (
         <IconButton
-          src={require('@tabler/icons/outline/messages.svg')}
+          src={messagesIcon}
           onClick={() => createAndNavigateToChat.mutate(account.id)}
           title={intl.formatMessage(messages.chat, { name: account.username })}
           theme='outlined'
@@ -626,7 +650,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
     return (
       <IconButton
-        src={require('@tabler/icons/outline/upload.svg')}
+        src={uploadIcon}
         onClick={handleShare}
         title={intl.formatMessage(messages.share, { name: account.username })}
         theme='outlined'
@@ -639,7 +663,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
   const renderZapAccount = () => {
     return (
       <IconButton
-        src={require('@tabler/icons/outline/bolt.svg')}
+        src={boltIcon}
         onClick={handleZapAccount}
         title={intl.formatMessage(messages.zap, { target: account.display_name })}
         theme='outlined'
@@ -698,7 +722,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               {menu.length > 0 && (
                 <DropdownMenu items={menu} placement='bottom-end'>
                   <IconButton
-                    src={require('@tabler/icons/outline/dots.svg')}
+                    src={dotsIcon}
                     theme='outlined'
                     className='px-2'
                     iconClassName='h-4 w-4'
diff --git a/src/features/admin/announcements.tsx b/src/features/admin/announcements.tsx
index fd22856f7..60e371b14 100644
--- a/src/features/admin/announcements.tsx
+++ b/src/features/admin/announcements.tsx
@@ -1,13 +1,17 @@
-import React from 'react';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import { FormattedDate, FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { AdminAnnouncement } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { AdminAnnouncement } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.announcements', defaultMessage: 'Announcements' },
@@ -103,7 +107,7 @@ const Announcements: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateAnnouncement}
           theme='secondary'
           block
diff --git a/src/features/admin/components/admin-tabs.tsx b/src/features/admin/components/admin-tabs.tsx
index debba46a0..32c635672 100644
--- a/src/features/admin/components/admin-tabs.tsx
+++ b/src/features/admin/components/admin-tabs.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { Tabs } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   dashboard: { id: 'admin_nav.dashboard', defaultMessage: 'Dashboard' },
diff --git a/src/features/admin/components/dashcounter.tsx b/src/features/admin/components/dashcounter.tsx
index 4006e1d2d..4e0eb2e77 100644
--- a/src/features/admin/components/dashcounter.tsx
+++ b/src/features/admin/components/dashcounter.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui';
-import { isNumber } from 'soapbox/utils/numbers';
+import Text from 'soapbox/components/ui/text.tsx';
+import { isNumber } from 'soapbox/utils/numbers.tsx';
 
 interface IDashCounter {
   count: number | undefined;
diff --git a/src/features/admin/components/latest-accounts-panel.tsx b/src/features/admin/components/latest-accounts-panel.tsx
index adb16495e..83545373f 100644
--- a/src/features/admin/components/latest-accounts-panel.tsx
+++ b/src/features/admin/components/latest-accounts-panel.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts';
-import Account from 'soapbox/components/account';
-import { Widget } from 'soapbox/components/ui';
+import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts.ts';
+import Account from 'soapbox/components/account.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 
 const messages = defineMessages({
   title: { id: 'admin.latest_accounts_panel.title', defaultMessage: 'Latest Accounts' },
diff --git a/src/features/admin/components/registration-mode-picker.tsx b/src/features/admin/components/registration-mode-picker.tsx
index 8cd6959bf..2e027182e 100644
--- a/src/features/admin/components/registration-mode-picker.tsx
+++ b/src/features/admin/components/registration-mode-picker.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { updateConfig } from 'soapbox/actions/admin';
-import { RadioGroup, RadioItem } from 'soapbox/components/radio';
-import { useAppDispatch, useInstance } from 'soapbox/hooks';
-import { InstanceV2 } from 'soapbox/schemas/instance';
-import toast from 'soapbox/toast';
+import { updateConfig } from 'soapbox/actions/admin.ts';
+import { RadioGroup, RadioItem } from 'soapbox/components/radio.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { InstanceV2 } from 'soapbox/schemas/instance.ts';
+import toast from 'soapbox/toast.tsx';
 
 type RegistrationMode = 'open' | 'approval' | 'closed';
 
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index d5ca1719e..33079ce37 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -1,14 +1,17 @@
-import React from 'react';
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { deleteStatusModal } from 'soapbox/actions/moderation';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import StatusContent from 'soapbox/components/status-content';
-import StatusMedia from 'soapbox/components/status-media';
-import { HStack, Stack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { deleteStatusModal } from 'soapbox/actions/moderation.tsx';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusMedia from 'soapbox/components/status-media.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import type { AdminReport, Status } from 'soapbox/types/entities';
+import type { AdminReport, Status } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   viewStatus: { id: 'admin.reports.actions.view_status', defaultMessage: 'View post' },
@@ -34,11 +37,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     return [{
       text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
       to: `/@${acct}/posts/${status.id}`,
-      icon: require('@tabler/icons/outline/pencil.svg'),
+      icon: pencilIcon,
     }, {
       text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
       action: handleDeleteStatus,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       destructive: true,
     }];
   };
@@ -55,7 +58,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
       <div className='flex-none'>
         <DropdownMenu
           items={menu}
-          src={require('@tabler/icons/outline/dots-vertical.svg')}
+          src={dotsVerticalIcon}
         />
       </div>
     </HStack>
diff --git a/src/features/admin/components/report.tsx b/src/features/admin/components/report.tsx
index 3f451dcb6..42c8b1f52 100644
--- a/src/features/admin/components/report.tsx
+++ b/src/features/admin/components/report.tsx
@@ -1,20 +1,29 @@
-import React, { useCallback, useState } from 'react';
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import hourglassEmptyIcon from '@tabler/icons/outline/hourglass-empty.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import { useCallback, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { closeReports } from 'soapbox/actions/admin';
-import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { Accordion, Avatar, Button, Stack, HStack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetReport } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
+import { closeReports } from 'soapbox/actions/admin.ts';
+import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation.tsx';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetReport } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ReportStatus from './report-status';
+import ReportStatus from './report-status.tsx';
 
 import type { List as ImmutableList } from 'immutable';
-import type { Account, AdminReport, Status } from 'soapbox/types/entities';
+import type { Account, AdminReport, Status } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   reportClosed: { id: 'admin.reports.report_closed_message', defaultMessage: 'Report on @{name} was closed' },
@@ -45,11 +54,11 @@ const Report: React.FC<IReport> = ({ id }) => {
     return [{
       text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }),
       action: handleDeactivateUser,
-      icon: require('@tabler/icons/outline/hourglass-empty.svg'),
+      icon: hourglassEmptyIcon,
     }, {
       text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }),
       action: handleDeleteUser,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       destructive: true,
     }];
   };
@@ -149,7 +158,7 @@ const Report: React.FC<IReport> = ({ id }) => {
           <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
         </Button>
 
-        <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={dotsVerticalIcon} />
       </HStack>
     </HStack>
   );
diff --git a/src/features/admin/components/unapproved-account.tsx b/src/features/admin/components/unapproved-account.tsx
index 9bc42c1cf..a11019e38 100644
--- a/src/features/admin/components/unapproved-account.tsx
+++ b/src/features/admin/components/unapproved-account.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
-
-import { approveUser, rejectUser } from 'soapbox/actions/admin';
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { approveUser, rejectUser } from 'soapbox/actions/admin.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IUnapprovedAccount {
   accountId: string;
diff --git a/src/features/admin/domains.tsx b/src/features/admin/domains.tsx
index 7ae4b19f3..a352c2bc0 100644
--- a/src/features/admin/domains.tsx
+++ b/src/features/admin/domains.tsx
@@ -1,17 +1,22 @@
-import React, { useEffect } from 'react';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useDomains } from 'soapbox/api/hooks/admin';
-import { dateFormatOptions } from 'soapbox/components/relative-timestamp';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useDomains } from 'soapbox/api/hooks/admin/index.ts';
+import { dateFormatOptions } from 'soapbox/components/relative-timestamp.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
-import Indicator from '../developers/components/indicator';
+import Indicator from '../developers/components/indicator.tsx';
 
-import type { Domain as DomainEntity } from 'soapbox/schemas';
+import type { Domain as DomainEntity } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.domains', defaultMessage: 'Domains' },
@@ -122,7 +127,7 @@ const Domains: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateDomain}
           theme='secondary'
           block
diff --git a/src/features/admin/hooks/useAdminNostrRelays.ts b/src/features/admin/hooks/useAdminNostrRelays.ts
index 576f12351..5a8a06ef0 100644
--- a/src/features/admin/hooks/useAdminNostrRelays.ts
+++ b/src/features/admin/hooks/useAdminNostrRelays.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { z } from 'zod';
 
-import { useApi } from 'soapbox/hooks';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
 const relayEntitySchema = z.object({
   url: z.string().url(),
diff --git a/src/features/admin/index.tsx b/src/features/admin/index.tsx
index c8286b393..e6e33dcef 100644
--- a/src/features/admin/index.tsx
+++ b/src/features/admin/index.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Switch, Route } from 'react-router-dom';
 
-import { Column } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
-import AdminTabs from './components/admin-tabs';
-import Waitlist from './tabs/awaiting-approval';
-import Dashboard from './tabs/dashboard';
-import Reports from './tabs/reports';
+import AdminTabs from './components/admin-tabs.tsx';
+import Waitlist from './tabs/awaiting-approval.tsx';
+import Dashboard from './tabs/dashboard.tsx';
+import Reports from './tabs/reports.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.dashboard', defaultMessage: 'Dashboard' },
diff --git a/src/features/admin/manage-zap-split.tsx b/src/features/admin/manage-zap-split.tsx
index 95d350399..cb2ce887c 100644
--- a/src/features/admin/manage-zap-split.tsx
+++ b/src/features/admin/manage-zap-split.tsx
@@ -1,15 +1,20 @@
-import React, { useState } from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import Account from 'soapbox/components/account';
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, Column, HStack, Input, Stack } from 'soapbox/components/ui';
+import Account from 'soapbox/components/account.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
-import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit';
-import AddNewAccount from '../ui/components/new-account-zap-split';
-import { ZapSplitSlider } from '../zap/components/zap-split-account-item';
+import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit.ts';
+import AddNewAccount from '../ui/components/new-account-zap-split.tsx';
+import { ZapSplitSlider } from '../zap/components/zap-split-account-item.tsx';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   heading: { id: 'column.admin.zap_split', defaultMessage: 'Manage Zap Split' },
diff --git a/src/features/admin/moderation-log.tsx b/src/features/admin/moderation-log.tsx
index 57a80f83f..a4d81f690 100644
--- a/src/features/admin/moderation-log.tsx
+++ b/src/features/admin/moderation-log.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
-import { useModerationLog } from 'soapbox/api/hooks/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Stack, Text } from 'soapbox/components/ui';
+import { useModerationLog } from 'soapbox/api/hooks/admin/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import type { ModerationLogEntry } from 'soapbox/schemas';
+import type { ModerationLogEntry } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.moderation_log', defaultMessage: 'Moderation Log' },
diff --git a/src/features/admin/nostr-relays.tsx b/src/features/admin/nostr-relays.tsx
index 40c7d719e..7d90c1c49 100644
--- a/src/features/admin/nostr-relays.tsx
+++ b/src/features/admin/nostr-relays.tsx
@@ -1,12 +1,16 @@
 import { useMutation } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
-import RelayEditor, { RelayData } from 'soapbox/features/nostr-relays/components/relay-editor';
-import { useApi } from 'soapbox/hooks';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import RelayEditor, { RelayData } from 'soapbox/features/nostr-relays/components/relay-editor.tsx';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
-import { useAdminNostrRelays } from './hooks/useAdminNostrRelays';
+import { useAdminNostrRelays } from './hooks/useAdminNostrRelays.ts';
 
 const messages = defineMessages({
   title: { id: 'column.admin.nostr_relays', defaultMessage: 'Relays' },
diff --git a/src/features/admin/relays.tsx b/src/features/admin/relays.tsx
index 1f028c4ea..245d5f0b0 100644
--- a/src/features/admin/relays.tsx
+++ b/src/features/admin/relays.tsx
@@ -1,13 +1,18 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useRelays } from 'soapbox/api/hooks/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, Form, HStack, Input, Stack, Text } from 'soapbox/components/ui';
-import { useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
+import { useRelays } from 'soapbox/api/hooks/admin/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useTextField } from 'soapbox/hooks/forms/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Relay as RelayEntity } from 'soapbox/schemas';
+import type { Relay as RelayEntity } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.relays', defaultMessage: 'Instance relays' },
diff --git a/src/features/admin/rules.tsx b/src/features/admin/rules.tsx
index 10a840f58..515b90358 100644
--- a/src/features/admin/rules.tsx
+++ b/src/features/admin/rules.tsx
@@ -1,13 +1,17 @@
-import React from 'react';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useRules } from 'soapbox/api/hooks/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { AdminRule } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useRules } from 'soapbox/api/hooks/admin/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { AdminRule } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.rules', defaultMessage: 'Instance rules' },
@@ -85,7 +89,7 @@ const Rules: React.FC = () => {
       <Stack className='gap-4'>
         <Button
           className='sm:w-fit sm:self-end'
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           onClick={handleCreateRule}
           theme='secondary'
           block
diff --git a/src/features/admin/tabs/awaiting-approval.tsx b/src/features/admin/tabs/awaiting-approval.tsx
index 9ae07441a..7fda9f6ab 100644
--- a/src/features/admin/tabs/awaiting-approval.tsx
+++ b/src/features/admin/tabs/awaiting-approval.tsx
@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchUsers } from 'soapbox/actions/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchUsers } from 'soapbox/actions/admin.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import UnapprovedAccount from '../components/unapproved-account';
+import UnapprovedAccount from '../components/unapproved-account.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' },
diff --git a/src/features/admin/tabs/dashboard.tsx b/src/features/admin/tabs/dashboard.tsx
index d1c215403..74f1731f6 100644
--- a/src/features/admin/tabs/dashboard.tsx
+++ b/src/features/admin/tabs/dashboard.tsx
@@ -1,17 +1,23 @@
-import React from 'react';
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email-list';
-import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1';
-import List, { ListItem } from 'soapbox/components/list';
-import { CardTitle, Icon, IconButton, Stack } from 'soapbox/components/ui';
-import { useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
-import sourceCode from 'soapbox/utils/code';
-import { download } from 'soapbox/utils/download';
-import { parseVersion } from 'soapbox/utils/features';
+import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email-list.ts';
+import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { CardTitle } from 'soapbox/components/ui/card.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import sourceCode from 'soapbox/utils/code.ts';
+import { download } from 'soapbox/utils/download.ts';
+import { parseVersion } from 'soapbox/utils/features.ts';
 
-import { DashCounter, DashCounters } from '../components/dashcounter';
-import RegistrationModePicker from '../components/registration-mode-picker';
+import { DashCounter, DashCounters } from '../components/dashcounter.tsx';
+import RegistrationModePicker from '../components/registration-mode-picker.tsx';
 
 const Dashboard: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -94,10 +100,12 @@ const Dashboard: React.FC = () => {
           label={<FormattedMessage id='column.admin.moderation_log' defaultMessage='Moderation Log' />}
         />
 
-        <ListItem
-          to='/soapbox/admin/zap-split'
-          label={<FormattedMessage id='column.admin.zap_split' defaultMessage='Manage Zap Split' />}
-        />
+        {features.nostr && (
+          <ListItem
+            to='/soapbox/admin/zap-split'
+            label={<FormattedMessage id='column.admin.zap_split' defaultMessage='Manage Zap Split' />}
+          />
+        )}
 
         {features.adminAnnouncements && (
           <ListItem
@@ -153,7 +161,7 @@ const Dashboard: React.FC = () => {
 
             <Icon
               className='size-4'
-              src={require('@tabler/icons/outline/external-link.svg')}
+              src={externalLinkIcon}
             />
           </a>
         </ListItem>
@@ -172,7 +180,7 @@ const Dashboard: React.FC = () => {
           <List>
             <ListItem label='subscribers.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleSubscribersClick}
                 iconClassName='h-5 w-5'
               />
@@ -180,7 +188,7 @@ const Dashboard: React.FC = () => {
 
             <ListItem label='unsubscribers.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleUnsubscribersClick}
                 iconClassName='h-5 w-5'
               />
@@ -188,7 +196,7 @@ const Dashboard: React.FC = () => {
 
             <ListItem label='combined.csv'>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 onClick={handleCombinedClick}
                 iconClassName='h-5 w-5'
               />
diff --git a/src/features/admin/tabs/reports.tsx b/src/features/admin/tabs/reports.tsx
index 99ed6be91..55bc1c815 100644
--- a/src/features/admin/tabs/reports.tsx
+++ b/src/features/admin/tabs/reports.tsx
@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchReports } from 'soapbox/actions/admin';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchReports } from 'soapbox/actions/admin.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import Report from '../components/report';
+import Report from '../components/report.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.reports', defaultMessage: 'Reports' },
diff --git a/src/features/admin/user-index.tsx b/src/features/admin/user-index.tsx
index a80f3298d..19c410bf7 100644
--- a/src/features/admin/user-index.tsx
+++ b/src/features/admin/user-index.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts';
-import Account from 'soapbox/components/account';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
+import { useAdminAccounts } from 'soapbox/api/hooks/admin/useAdminAccounts.ts';
+import Account from 'soapbox/components/account.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.users', defaultMessage: 'Users' },
diff --git a/src/features/aliases/components/account.tsx b/src/features/aliases/components/account.tsx
index 036dde092..8a208b64d 100644
--- a/src/features/aliases/components/account.tsx
+++ b/src/features/aliases/components/account.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { addToAliases } from 'soapbox/actions/aliases';
-import { useAccount } from 'soapbox/api/hooks';
-import AccountComponent from 'soapbox/components/account';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
+import { addToAliases } from 'soapbox/actions/aliases.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import AccountComponent from 'soapbox/components/account.tsx';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 const messages = defineMessages({
   add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
@@ -37,7 +39,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
 
   if (!added && accountId !== me) {
     button = (
-      <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+      <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
     );
   }
 
diff --git a/src/features/aliases/components/search.tsx b/src/features/aliases/components/search.tsx
index 122329656..7b39eff50 100644
--- a/src/features/aliases/components/search.tsx
+++ b/src/features/aliases/components/search.tsx
@@ -1,11 +1,12 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases';
-import { Button } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'soapbox/actions/aliases.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
@@ -53,7 +54,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
-          <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-default text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
+          <SvgIcon src={backspaceIcon} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-default text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index 1c15dd9fc..30bb544ae 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -1,14 +1,21 @@
-import React, { useEffect } from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases';
-import Icon from 'soapbox/components/icon';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
+import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
-import Account from './components/account';
-import Search from './components/search';
+import Account from './components/account.tsx';
+import Search from './components/search.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.aliases', defaultMessage: 'Account aliases' },
@@ -84,7 +91,7 @@ const Aliases = () => {
                 <Text tag='span'>{alias}</Text>
               </div>
               <div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
-                <Icon className='mr-1.5' src={require('@tabler/icons/outline/x.svg')} />
+                <Icon className='mr-1.5' src={xIcon} />
                 <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
               </div>
             </HStack>
diff --git a/src/features/audio/index.tsx b/src/features/audio/index.tsx
index 61a43d89b..b195c3937 100644
--- a/src/features/audio/index.tsx
+++ b/src/features/audio/index.tsx
@@ -1,13 +1,18 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { formatTime, getPointerPosition } from 'soapbox/features/video';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { formatTime, getPointerPosition } from 'soapbox/features/video/index.tsx';
 
-import Visualizer from './visualizer';
+import Visualizer from './visualizer.ts';
 
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
@@ -534,7 +539,7 @@ const Audio: React.FC<IAudio> = (props) => {
               className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 active:text-white active:opacity-100 ')}
               onClick={togglePlay}
             >
-              <SvgIcon className='w-5' src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
+              <SvgIcon className='w-5' src={paused ? playerPlayIcon : playerPauseIcon} />
             </button>
 
             <button
@@ -546,7 +551,7 @@ const Audio: React.FC<IAudio> = (props) => {
               className={clsx('inline-block flex-none border-0 bg-transparent px-[6px] py-[5px] text-[16px] text-white/75 opacity-75 outline-none hover:text-white hover:opacity-100 active:text-white active:opacity-100')}
               onClick={toggleMute}
             >
-              <SvgIcon className='w-5' src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
+              <SvgIcon className='w-5' src={muted ? volume3Icon : volumeIcon} />
             </button>
 
             <div
@@ -594,7 +599,7 @@ const Audio: React.FC<IAudio> = (props) => {
               download
               target='_blank'
             >
-              <SvgIcon className='w-5' src={require('@tabler/icons/outline/download.svg')} />
+              <SvgIcon className='w-5' src={downloadIcon} />
             </a>
           </div>
         </div>
diff --git a/src/features/auth-login/components/captcha.test.tsx b/src/features/auth-login/components/captcha.test.tsx
index 53cb7e7ae..51138d30d 100644
--- a/src/features/auth-login/components/captcha.test.tsx
+++ b/src/features/auth-login/components/captcha.test.tsx
@@ -1,9 +1,9 @@
 import { Map as ImmutableMap } from 'immutable';
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import CaptchaField, { NativeCaptchaField } from './captcha';
+import CaptchaField, { NativeCaptchaField } from './captcha.tsx';
 
 describe('<CaptchaField />', () => {
   it('renders null by default', () => {
diff --git a/src/features/auth-login/components/captcha.tsx b/src/features/auth-login/components/captcha.tsx
index 8228e7c9e..5f6d950f8 100644
--- a/src/features/auth-login/components/captcha.tsx
+++ b/src/features/auth-login/components/captcha.tsx
@@ -1,10 +1,12 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { fetchCaptcha } from 'soapbox/actions/auth';
-import { Stack, Text, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { fetchCaptcha } from 'soapbox/actions/auth.ts';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { AxiosResponse } from 'axios';
 
diff --git a/src/features/auth-login/components/consumer-button.tsx b/src/features/auth-login/components/consumer-button.tsx
index feac5f75b..a5f904e68 100644
--- a/src/features/auth-login/components/consumer-button.tsx
+++ b/src/features/auth-login/components/consumer-button.tsx
@@ -1,10 +1,17 @@
-import React from 'react';
+import brandFacebookIcon from '@tabler/icons/outline/brand-facebook.svg';
+import brandGithubIcon from '@tabler/icons/outline/brand-github.svg';
+import brandGoogleIcon from '@tabler/icons/outline/brand-google.svg';
+import brandSlackIcon from '@tabler/icons/outline/brand-slack.svg';
+import brandTwitterIcon from '@tabler/icons/outline/brand-twitter.svg';
+import brandWindowsIcon from '@tabler/icons/outline/brand-windows.svg';
+import keyIcon from '@tabler/icons/outline/key.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { prepareRequest } from 'soapbox/actions/consumer-auth';
-import { IconButton, Tooltip } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { capitalize } from 'soapbox/utils/strings';
+import { prepareRequest } from 'soapbox/actions/consumer-auth.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { capitalize } from 'soapbox/utils/strings.ts';
 
 const messages = defineMessages({
   tooltip: { id: 'oauth_consumer.tooltip', defaultMessage: 'Sign in with {provider}' },
@@ -12,12 +19,12 @@ const messages = defineMessages({
 
 /** Map between OAuth providers and brand icons. */
 const BRAND_ICONS: Record<string, string> = {
-  twitter: require('@tabler/icons/outline/brand-twitter.svg'),
-  facebook: require('@tabler/icons/outline/brand-facebook.svg'),
-  google: require('@tabler/icons/outline/brand-google.svg'),
-  microsoft: require('@tabler/icons/outline/brand-windows.svg'),
-  slack: require('@tabler/icons/outline/brand-slack.svg'),
-  github: require('@tabler/icons/outline/brand-github.svg'),
+  twitter: brandTwitterIcon,
+  facebook: brandFacebookIcon,
+  google: brandGoogleIcon,
+  microsoft: brandWindowsIcon,
+  slack: brandSlackIcon,
+  github: brandGithubIcon,
 };
 
 interface IConsumerButton {
@@ -29,7 +36,7 @@ const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const icon = BRAND_ICONS[provider] || require('@tabler/icons/outline/key.svg');
+  const icon = BRAND_ICONS[provider] || keyIcon;
 
   const handleClick = () => {
     dispatch(prepareRequest(provider));
diff --git a/src/features/auth-login/components/consumers-list.tsx b/src/features/auth-login/components/consumers-list.tsx
index 52f898ad5..4b91c69bb 100644
--- a/src/features/auth-login/components/consumers-list.tsx
+++ b/src/features/auth-login/components/consumers-list.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Card, HStack, Text } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import ConsumerButton from './consumer-button';
+import ConsumerButton from './consumer-button.tsx';
 
 interface IConsumersList {
 }
diff --git a/src/features/auth-login/components/login-form.test.tsx b/src/features/auth-login/components/login-form.test.tsx
index cef110b44..fa4023d78 100644
--- a/src/features/auth-login/components/login-form.test.tsx
+++ b/src/features/auth-login/components/login-form.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { fireEvent, render, screen } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { fireEvent, render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import LoginForm from './login-form';
+import LoginForm from './login-form.tsx';
 
 describe('<LoginForm />', () => {
   it('renders for Pleroma', () => {
diff --git a/src/features/auth-login/components/login-form.tsx b/src/features/auth-login/components/login-form.tsx
index 21e353d31..2ab22fa40 100644
--- a/src/features/auth-login/components/login-form.tsx
+++ b/src/features/auth-login/components/login-form.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 const messages = defineMessages({
   username: {
diff --git a/src/features/auth-login/components/login-page.test.tsx b/src/features/auth-login/components/login-page.test.tsx
index dfae49747..a89006f02 100644
--- a/src/features/auth-login/components/login-page.test.tsx
+++ b/src/features/auth-login/components/login-page.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import LoginPage from './login-page';
+import LoginPage from './login-page.tsx';
 
 describe('<LoginPage />', () => {
   it('renders correctly on load', () => {
diff --git a/src/features/auth-login/components/login-page.tsx b/src/features/auth-login/components/login-page.tsx
index 50dc1ac83..9fcdb9e7c 100644
--- a/src/features/auth-login/components/login-page.tsx
+++ b/src/features/auth-login/components/login-page.tsx
@@ -1,17 +1,20 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
-import { fetchInstance } from 'soapbox/actions/instance';
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import { BigCard } from 'soapbox/components/big-card';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
-import { getRedirectUrl } from 'soapbox/utils/redirect';
+import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth.ts';
+import { fetchInstance } from 'soapbox/actions/instance.ts';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { getRedirectUrl } from 'soapbox/utils/redirect.ts';
 
-import ConsumersList from './consumers-list';
-import LoginForm from './login-form';
-import OtpAuthForm from './otp-auth-form';
+import ConsumersList from './consumers-list.tsx';
+import LoginForm from './login-form.tsx';
+import OtpAuthForm from './otp-auth-form.tsx';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/auth-login/components/logout.tsx b/src/features/auth-login/components/logout.tsx
index 6f70e0bdd..3815f9b96 100644
--- a/src/features/auth-login/components/logout.tsx
+++ b/src/features/auth-login/components/logout.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
-import { logOut } from 'soapbox/actions/auth';
-import { Spinner } from 'soapbox/components/ui';
+import { logOut } from 'soapbox/actions/auth.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 /** Component that logs the user out when rendered */
 const Logout: React.FC = () => {
diff --git a/src/features/auth-login/components/otp-auth-form.test.tsx b/src/features/auth-login/components/otp-auth-form.test.tsx
index 432660643..d1d24d6af 100644
--- a/src/features/auth-login/components/otp-auth-form.test.tsx
+++ b/src/features/auth-login/components/otp-auth-form.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import OtpAuthForm from './otp-auth-form';
+import OtpAuthForm from './otp-auth-form.tsx';
 
 describe('<OtpAuthForm />', () => {
   it('renders correctly', () => {
diff --git a/src/features/auth-login/components/otp-auth-form.tsx b/src/features/auth-login/components/otp-auth-form.tsx
index f988a93fe..f5f524b9d 100644
--- a/src/features/auth-login/components/otp-auth-form.tsx
+++ b/src/features/auth-login/components/otp-auth-form.tsx
@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
-import { BigCard } from 'soapbox/components/big-card';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const messages = defineMessages({
   otpCodeHint: { id: 'login.fields.otp_code_hint', defaultMessage: 'Enter the two-factor code generated by your phone app or use one of your recovery codes' },
diff --git a/src/features/auth-login/components/password-reset-confirm.test.tsx b/src/features/auth-login/components/password-reset-confirm.test.tsx
index d4c8d1196..513d85ff8 100644
--- a/src/features/auth-login/components/password-reset-confirm.test.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { fireEvent, render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { fireEvent, render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import PasswordResetConfirm from './password-reset-confirm';
+import PasswordResetConfirm from './password-reset-confirm.tsx';
 
 const TestableComponent = () => (
   <Switch>
diff --git a/src/features/auth-login/components/password-reset-confirm.tsx b/src/features/auth-login/components/password-reset-confirm.tsx
index c079b418d..d3a29cb0b 100644
--- a/src/features/auth-login/components/password-reset-confirm.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.tsx
@@ -1,11 +1,15 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { resetPasswordConfirm } from 'soapbox/actions/security';
-import { BigCard } from 'soapbox/components/big-card';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { resetPasswordConfirm } from 'soapbox/actions/security.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const token = new URLSearchParams(window.location.search).get('reset_password_token');
 
@@ -25,12 +29,12 @@ const PasswordResetConfirm = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [password, setPassword] = React.useState('');
-  const [status, setStatus] = React.useState(Statuses.IDLE);
+  const [password, setPassword] = useState('');
+  const [status, setStatus] = useState(Statuses.IDLE);
 
   const isLoading = status === Statuses.LOADING;
 
-  const handleSubmit: React.FormEventHandler = React.useCallback((event) => {
+  const handleSubmit: React.FormEventHandler = useCallback((event) => {
     event.preventDefault();
 
     setStatus(Statuses.LOADING);
@@ -39,7 +43,7 @@ const PasswordResetConfirm = () => {
       .catch(() => setStatus(Statuses.FAIL));
   }, [password]);
 
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((event) => {
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
     setPassword(event.target.value);
   }, []);
 
diff --git a/src/features/auth-login/components/password-reset.tsx b/src/features/auth-login/components/password-reset.tsx
index 8812c5b73..f5466b11b 100644
--- a/src/features/auth-login/components/password-reset.tsx
+++ b/src/features/auth-login/components/password-reset.tsx
@@ -1,12 +1,17 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { resetPassword } from 'soapbox/actions/security';
-import { BigCard } from 'soapbox/components/big-card';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { resetPassword } from 'soapbox/actions/security.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   nicknameOrEmail: { id: 'password_reset.fields.username_placeholder', defaultMessage: 'Email or username' },
diff --git a/src/features/auth-login/components/registration-form.tsx b/src/features/auth-login/components/registration-form.tsx
index ea5c9c94b..3609dbe8f 100644
--- a/src/features/auth-login/components/registration-form.tsx
+++ b/src/features/auth-login/components/registration-form.tsx
@@ -1,17 +1,29 @@
+import atIcon from '@tabler/icons/outline/at.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
 import axios from 'axios';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { accountLookup } from 'soapbox/actions/accounts';
-import { register, verifyCredentials } from 'soapbox/actions/auth';
-import { openModal } from 'soapbox/actions/modals';
-import BirthdayInput from 'soapbox/components/birthday-input';
-import { Checkbox, Form, FormGroup, FormActions, Button, Input, Textarea, Select } from 'soapbox/components/ui';
-import CaptchaField from 'soapbox/features/auth-login/components/captcha';
-import { useAppDispatch, useSettings, useFeatures, useInstance } from 'soapbox/hooks';
+import { accountLookup } from 'soapbox/actions/accounts.ts';
+import { register, verifyCredentials } from 'soapbox/actions/auth.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import BirthdayInput from 'soapbox/components/birthday-input.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Checkbox from 'soapbox/components/ui/checkbox.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import CaptchaField from 'soapbox/features/auth-login/components/captcha.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 const messages = defineMessages({
   username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' },
@@ -152,7 +164,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
     const heading = confirmationHeading || approvalHeading;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/check.svg'),
+      icon: checkIcon,
       heading: heading,
       message,
       confirm: intl.formatMessage(messages.close),
@@ -255,7 +267,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
               autoCorrect='off'
               autoCapitalize='off'
               pattern='^[a-zA-Z\d_-]+'
-              icon={require('@tabler/icons/outline/at.svg')}
+              icon={atIcon}
               onChange={onUsernameChange}
               value={params.get('username', '')}
               required
diff --git a/src/features/auth-login/components/registration-page.tsx b/src/features/auth-login/components/registration-page.tsx
index 6cedc1159..857ab3f3b 100644
--- a/src/features/auth-login/components/registration-page.tsx
+++ b/src/features/auth-login/components/registration-page.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { BigCard } from 'soapbox/components/big-card';
-import { Text } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
 
-import RegistrationForm from './registration-form';
+import RegistrationForm from './registration-form.tsx';
 
 const RegistrationPage: React.FC = () => {
   const { instance } = useInstance();
diff --git a/src/features/auth-token-list/index.tsx b/src/features/auth-token-list/index.tsx
index caaf6a66f..2e1532661 100644
--- a/src/features/auth-token-list/index.tsx
+++ b/src/features/auth-token-list/index.tsx
@@ -1,11 +1,19 @@
-import React, { useEffect } from 'react';
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import { useEffect } from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security';
-import { Button, Card, CardBody, CardHeader, CardTitle, Column, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { Token } from 'soapbox/reducers/security';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { Token } from 'soapbox/reducers/security.ts';
 
 const messages = defineMessages({
   header: { id: 'security.headers.tokens', defaultMessage: 'Sessions' },
@@ -27,7 +35,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   const handleRevoke = () => {
     if (isCurrent)
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
         heading: intl.formatMessage(messages.revokeSessionHeading),
         message: intl.formatMessage(messages.revokeSessionMessage),
         confirm: intl.formatMessage(messages.revokeSessionConfirm),
diff --git a/src/features/backups/index.tsx b/src/features/backups/index.tsx
index 6c9d97f92..1c4d38204 100644
--- a/src/features/backups/index.tsx
+++ b/src/features/backups/index.tsx
@@ -1,11 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
-import { fetchBackups, createBackup } from 'soapbox/actions/backups';
-import { Button, Card, Column, FormActions, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchBackups, createBackup } from 'soapbox/actions/backups.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import type { Backup as BackupEntity } from 'soapbox/reducers/backups';
+import type { Backup as BackupEntity } from 'soapbox/reducers/backups.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.backups', defaultMessage: 'Backups' },
@@ -78,11 +87,13 @@ const Backups = () => {
     <Card variant='rounded' size='lg'>
       {intl.formatMessage(messages.emptyMessage, {
         action: (
-          <a href='#' onClick={handleCreateBackup}>
-            <Text tag='span' theme='primary' size='sm' className='hover:underline'>
-              {intl.formatMessage(messages.emptyMessageAction)}
-            </Text>
-          </a>
+          <Link to={'/'} className='inline-flex'>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleCreateBackup}>
+              <Text tag='span' theme='primary' size='sm' className='hover:underline'>
+                {intl.formatMessage(messages.emptyMessageAction)}
+              </Text>
+            </button>
+          </Link>
         ),
       })}
     </Card>
diff --git a/src/features/birthdays/account.tsx b/src/features/birthdays/account.tsx
index 33d14cf1b..414609617 100644
--- a/src/features/birthdays/account.tsx
+++ b/src/features/birthdays/account.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import balloonIcon from '@tabler/icons/outline/balloon.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useAccount } from 'soapbox/api/hooks';
-import AccountComponent from 'soapbox/components/account';
-import Icon from 'soapbox/components/icon';
-import { HStack } from 'soapbox/components/ui';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import AccountComponent from 'soapbox/components/account.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
 const messages = defineMessages({
   birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
@@ -36,7 +36,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
           date: formattedBirthday,
         })}
       >
-        <Icon src={require('@tabler/icons/outline/balloon.svg')} />
+        <Icon src={balloonIcon} />
         {formattedBirthday}
       </div>
     </HStack>
diff --git a/src/features/blocks/index.tsx b/src/features/blocks/index.tsx
index f5bedf96c..20af33a65 100644
--- a/src/features/blocks/index.tsx
+++ b/src/features/blocks/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useBlocks } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
+import { useBlocks } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.blocks', defaultMessage: 'Blocks' },
diff --git a/src/features/bookmark-folders/components/new-folder-form.tsx b/src/features/bookmark-folders/components/new-folder-form.tsx
index badd6006f..4f57383db 100644
--- a/src/features/bookmark-folders/components/new-folder-form.tsx
+++ b/src/features/bookmark-folders/components/new-folder-form.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useCreateBookmarkFolder } from 'soapbox/api/hooks';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui';
-import { useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
+import { useCreateBookmarkFolder } from 'soapbox/api/hooks/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useTextField } from 'soapbox/hooks/forms/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   label: { id: 'bookmark_folders.new.title_placeholder', defaultMessage: 'New folder title' },
diff --git a/src/features/bookmark-folders/index.tsx b/src/features/bookmark-folders/index.tsx
index 754e12cbb..c48ae5925 100644
--- a/src/features/bookmark-folders/index.tsx
+++ b/src/features/bookmark-folders/index.tsx
@@ -1,13 +1,19 @@
-import React from 'react';
+import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
+import folderIcon from '@tabler/icons/outline/folder.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { useBookmarkFolders } from 'soapbox/api/hooks';
-import List, { ListItem } from 'soapbox/components/list';
-import { Column, Emoji, HStack, Icon, Spinner, Stack } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
+import { useBookmarkFolders } from 'soapbox/api/hooks/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
-import NewFolderForm from './components/new-folder-form';
+import NewFolderForm from './components/new-folder-form.tsx';
 
 
 const messages = defineMessages({
@@ -40,7 +46,7 @@ const BookmarkFolders: React.FC = () => {
             to='/bookmarks/all'
             label={
               <HStack alignItems='center' space={2}>
-                <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
+                <Icon src={bookmarksIcon} size={20} />
                 <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
               </HStack>
             }
@@ -57,7 +63,7 @@ const BookmarkFolders: React.FC = () => {
                       src={folder.emoji_url || undefined}
                       className='size-5 flex-none'
                     />
-                  ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
+                  ) : <Icon src={folderIcon} size={20} />}
                   <span>{folder.name}</span>
                 </HStack>
               }
diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index f637a7a68..0b1880e9d 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -1,19 +1,24 @@
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actions/bookmarks';
-import { openModal } from 'soapbox/actions/modals';
-import { useBookmarkFolder, useDeleteBookmarkFolder } from 'soapbox/api/hooks';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import StatusList from 'soapbox/components/status-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-import toast from 'soapbox/toast';
+import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actions/bookmarks.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useBookmarkFolder, useDeleteBookmarkFolder } from 'soapbox/api/hooks/index.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
@@ -54,7 +59,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
   const isLoading = useAppSelector((state) => state.status_lists.get(bookmarksKey)?.isLoading === true);
   const hasMore = useAppSelector((state) => !!state.status_lists.get(bookmarksKey)?.next);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchBookmarkedStatuses(folderId));
   }, [folderId]);
 
@@ -93,12 +98,12 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     {
       text: intl.formatMessage(messages.editFolder),
       action: handleEditFolder,
-      icon: require('@tabler/icons/outline/edit.svg'),
+      icon: editIcon,
     },
     {
       text: intl.formatMessage(messages.deleteFolder),
       action: handleDeleteFolder,
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
     },
   ] : [];
 
@@ -106,7 +111,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     <Column
       label={folder ? folder.name : intl.formatMessage(messages.heading)}
       action={
-        <DropdownMenu items={items} src={require('@tabler/icons/outline/dots-vertical.svg')} />
+        <DropdownMenu items={items} src={dotsVerticalIcon} />
       }
       transparent={!isMobile}
     >
diff --git a/src/features/chats/components/chat-composer.tsx b/src/features/chats/components/chat-composer.tsx
index 785538f20..e7f2ce998 100644
--- a/src/features/chats/components/chat-composer.tsx
+++ b/src/features/chats/components/chat-composer.tsx
@@ -1,19 +1,27 @@
-import React, { useState } from 'react';
+import sendIcon from '@tabler/icons/outline/send.svg';
+import { forwardRef, useState } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
-import { unblockAccount } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
-import { useChatContext } from 'soapbox/contexts/chat-context';
-import UploadButton from 'soapbox/features/compose/components/upload-button';
-import emojiSearch from 'soapbox/features/emoji/search';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { Attachment } from 'soapbox/types/entities';
-import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
+import { unblockAccount } from 'soapbox/actions/accounts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover } from 'soapbox/components/ui/combobox.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import UploadButton from 'soapbox/features/compose/components/upload-button.tsx';
+import emojiSearch from 'soapbox/features/emoji/search.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { Attachment } from 'soapbox/types/entities.ts';
+import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
-import ChatTextarea from './chat-textarea';
+import ChatTextarea from './chat-textarea.tsx';
 
-import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji/index.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'chat.input.placeholder', defaultMessage: 'Type a message' },
@@ -52,7 +60,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
 }
 
 /** Textarea input for chats. */
-const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>(({
+const ChatComposer = forwardRef<HTMLTextAreaElement | null, IChatComposer>(({
   onKeyDown,
   onChange,
   value,
@@ -230,7 +238,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
           ) : null}
 
           <IconButton
-            src={require('@tabler/icons/outline/send.svg')}
+            src={sendIcon}
             iconClassName='h-5 w-5'
             className='text-primary-500'
             disabled={isSubmitDisabled}
diff --git a/src/features/chats/components/chat-list-item.test.tsx b/src/features/chats/components/chat-list-item.test.tsx
index cd6ad0421..56486a5ee 100644
--- a/src/features/chats/components/chat-list-item.test.tsx
+++ b/src/features/chats/components/chat-list-item.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { IChat } from 'soapbox/queries/chats';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { IChat } from 'soapbox/queries/chats.ts';
 
-import ChatListItem from './chat-list-item';
+import ChatListItem from './chat-list-item.tsx';
 
 const chat: any = {
   id: '1',
diff --git a/src/features/chats/components/chat-list-item.tsx b/src/features/chats/components/chat-list-item.tsx
index 124ecb036..fec072142 100644
--- a/src/features/chats/components/chat-list-item.tsx
+++ b/src/features/chats/components/chat-list-item.tsx
@@ -1,17 +1,25 @@
-import React, { useMemo } from 'react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Avatar, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { IChat, useChatActions } from 'soapbox/queries/chats';
+import { openModal } from 'soapbox/actions/modals.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { IChat, useChatActions } from 'soapbox/queries/chats.ts';
 
-import type { Menu } from 'soapbox/components/dropdown-menu';
+import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
 
 const messages = defineMessages({
   blockedYou: { id: 'chat_list_item.blocked_you', defaultMessage: 'This user has blocked you' },
@@ -59,7 +67,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
         },
       }));
     },
-    icon: require('@tabler/icons/outline/logout.svg'),
+    icon: logoutIcon,
   }], []);
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
@@ -124,7 +132,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <div className='hidden text-gray-600 hover:text-gray-100 group-hover:block'>
               <DropdownMenu items={menu}>
                 <IconButton
-                  src={require('@tabler/icons/outline/dots.svg')}
+                  src={dotsIcon}
                   title='Settings'
                   className='text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
                   iconClassName='h-4 w-4'
diff --git a/src/features/chats/components/chat-list.tsx b/src/features/chats/components/chat-list.tsx
index 0c353e940..1ae71b883 100644
--- a/src/features/chats/components/chat-list.tsx
+++ b/src/features/chats/components/chat-list.tsx
@@ -1,15 +1,16 @@
 import clsx from 'clsx';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { fetchChats } from 'soapbox/actions/chats';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Spinner, Stack } from 'soapbox/components/ui';
-import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
-import { useAppDispatch } from 'soapbox/hooks';
-import { useChats } from 'soapbox/queries/chats';
+import { fetchChats } from 'soapbox/actions/chats.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useChats } from 'soapbox/queries/chats.ts';
 
-import ChatListItem from './chat-list-item';
+import ChatListItem from './chat-list-item.tsx';
 
 interface IChatList {
   onClickChat: (chat: any) => void;
diff --git a/src/features/chats/components/chat-message-list-intro.tsx b/src/features/chats/components/chat-message-list-intro.tsx
index dcb0439fb..46c4274f9 100644
--- a/src/features/chats/components/chat-message-list-intro.tsx
+++ b/src/features/chats/components/chat-message-list-intro.tsx
@@ -1,15 +1,21 @@
+import clockIcon from '@tabler/icons/outline/clock.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import Link from 'soapbox/components/link';
-import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { useChatActions } from 'soapbox/queries/chats';
-import { secondsToDays } from 'soapbox/utils/numbers';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Link from 'soapbox/components/link.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useChatActions } from 'soapbox/queries/chats.ts';
+import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
 const messages = defineMessages({
   leaveChatHeading: { id: 'chat_message_list_intro.leave_chat.heading', defaultMessage: 'Leave Chat' },
@@ -107,7 +113,7 @@ const ChatMessageListIntro = () => {
         </HStack>
       ) : (
         <HStack justifyContent='center' alignItems='center' space={1} className='shrink-0'>
-          <Icon src={require('@tabler/icons/outline/clock.svg')} className='size-4 text-gray-600' />
+          <Icon src={clockIcon} className='size-4 text-gray-600' />
           {chat.message_expiration && (
             <Text size='sm' theme='muted'>
               {intl.formatMessage(messages.messageLifespan, { day: secondsToDays(chat.message_expiration) })}
diff --git a/src/features/chats/components/chat-message-list.test.tsx b/src/features/chats/components/chat-message-list.test.tsx
index 7ea47173b..b8477b598 100644
--- a/src/features/chats/components/chat-message-list.test.tsx
+++ b/src/features/chats/components/chat-message-list.test.tsx
@@ -1,16 +1,16 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { ChatContext } from 'soapbox/contexts/chat-context';
-import { buildAccount, buildInstance } from 'soapbox/jest/factory';
-import { queryClient, render, rootState, screen, waitFor } from 'soapbox/jest/test-helpers';
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import { IChat } from 'soapbox/queries/chats';
-import { ChatMessage } from 'soapbox/types/entities';
+import { __stub } from 'soapbox/api/index.ts';
+import { ChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { buildAccount, buildInstance } from 'soapbox/jest/factory.ts';
+import { queryClient, render, rootState, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import { IChat } from 'soapbox/queries/chats.ts';
+import { ChatMessage } from 'soapbox/types/entities.ts';
 
-import ChatMessageList from './chat-message-list';
+import ChatMessageList from './chat-message-list.tsx';
 
 const chat: IChat = {
   accepted: true,
diff --git a/src/features/chats/components/chat-message-list.tsx b/src/features/chats/components/chat-message-list.tsx
index 8d4e02f1d..f24c21912 100644
--- a/src/features/chats/components/chat-message-list.tsx
+++ b/src/features/chats/components/chat-message-list.tsx
@@ -1,16 +1,22 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo, forwardRef } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
-import { Avatar, Button, Divider, Spinner, Stack, Text } from 'soapbox/components/ui';
-import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
-import { IChat, useChatActions, useChatMessages } from 'soapbox/queries/chats';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { IChat, useChatActions, useChatMessages } from 'soapbox/queries/chats.ts';
 
-import ChatMessage from './chat-message';
-import ChatMessageListIntro from './chat-message-list-intro';
+import ChatMessageListIntro from './chat-message-list-intro.tsx';
+import ChatMessage from './chat-message.tsx';
 
-import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities';
+import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   today: { id: 'chats.dividers.today', defaultMessage: 'Today' },
@@ -41,12 +47,12 @@ const timeChange = (prev: ChatMessageEntity, curr: ChatMessageEntity): TimeForma
 
 const START_INDEX = 10000;
 
-const List: Components['List'] = React.forwardRef((props, ref) => {
+const List: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='mb-2' />;
 });
 
-const Scroller: Components['Scroller'] = React.forwardRef((props, ref) => {
+const Scroller: Components['Scroller'] = forwardRef((props, ref) => {
   const { style, context, ...rest } = props;
 
   return (
diff --git a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
index 6e604ff09..8b6348aaf 100644
--- a/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
+++ b/src/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect, cloneElement } from 'react';
 
-import { Portal } from 'soapbox/components/ui';
-import EmojiSelector from 'soapbox/components/ui/emoji-selector/emoji-selector';
+import EmojiSelector from 'soapbox/components/ui/emoji-selector.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
 
 interface IChatMessageReactionWrapper {
   onOpen(isOpen: boolean): void;
@@ -31,8 +31,8 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
   }, [isOpen]);
 
   return (
-    <React.Fragment>
-      {React.cloneElement(children, {
+    <>
+      {cloneElement(children, {
         ref: setReferenceElement,
         onClick: onToggleVisibility,
       })}
@@ -49,7 +49,7 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
           />
         </Portal>
       )}
-    </React.Fragment>
+    </>
   );
 }
 
diff --git a/src/features/chats/components/chat-message-reaction.test.tsx b/src/features/chats/components/chat-message-reaction.test.tsx
index 88f102711..b3119dca2 100644
--- a/src/features/chats/components/chat-message-reaction.test.tsx
+++ b/src/features/chats/components/chat-message-reaction.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatMessageReaction from './chat-message-reaction';
+import ChatMessageReaction from './chat-message-reaction.tsx';
 
 const emojiReaction = ({
   name: '👍',
diff --git a/src/features/chats/components/chat-message-reaction.tsx b/src/features/chats/components/chat-message-reaction.tsx
index 3b054bd50..de54e82a1 100644
--- a/src/features/chats/components/chat-message-reaction.tsx
+++ b/src/features/chats/components/chat-message-reaction.tsx
@@ -1,9 +1,8 @@
 import clsx from 'clsx';
-import React from 'react';
 
-import { Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji';
-import { EmojiReaction } from 'soapbox/types/entities';
+import Text from 'soapbox/components/ui/text.tsx';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { EmojiReaction } from 'soapbox/types/entities.ts';
 
 interface IChatMessageReaction {
   emojiReaction: EmojiReaction;
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index 0f1537076..8e1f7e091 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -1,27 +1,39 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
+import copyIcon from '@tabler/icons/outline/copy.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import moodSmileIcon from '@tabler/icons/outline/mood-smile.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import { useMutation } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import escape from 'lodash/escape';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji';
-import { MediaGallery } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { stripHTML } from 'soapbox/utils/html';
-import { onlyEmoji } from 'soapbox/utils/rich-content';
 
-import ChatMessageReaction from './chat-message-reaction';
-import ChatMessageReactionWrapper from './chat-message-reaction-wrapper/chat-message-reaction-wrapper';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { MediaGallery } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { stripHTML } from 'soapbox/utils/html.ts';
+import { onlyEmoji } from 'soapbox/utils/rich-content.ts';
 
-import type { Menu as IMenu } from 'soapbox/components/dropdown-menu';
-import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities';
+import ChatMessageReactionWrapper from './chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx';
+import ChatMessageReaction from './chat-message-reaction.tsx';
+
+import type { Menu as IMenu } from 'soapbox/components/dropdown-menu/index.ts';
+import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   copy: { id: 'chats.actions.copy', defaultMessage: 'Copy' },
@@ -159,7 +171,7 @@ const ChatMessage = (props: IChatMessage) => {
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: () => handleCopyText(chatMessage),
-        icon: require('@tabler/icons/outline/copy.svg'),
+        icon: copyIcon,
       });
     }
 
@@ -167,7 +179,7 @@ const ChatMessage = (props: IChatMessage) => {
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: () => handleDeleteMessage.mutate(chatMessage.id),
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     } else {
@@ -175,13 +187,13 @@ const ChatMessage = (props: IChatMessage) => {
         menu.push({
           text: intl.formatMessage(messages.report),
           action: () => dispatch(initReport(ReportableEntities.CHAT_MESSAGE, chat.account, { chatMessage })),
-          icon: require('@tabler/icons/outline/flag.svg'),
+          icon: flagIcon,
         });
       }
       menu.push({
         text: intl.formatMessage(messages.deleteForMe),
         action: () => handleDeleteMessage.mutate(chatMessage.id),
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     }
@@ -222,7 +234,7 @@ const ChatMessage = (props: IChatMessage) => {
               })}
             >
               <Icon
-                src={require('@tabler/icons/outline/mood-smile.svg')}
+                src={moodSmileIcon}
                 className='size-4'
               />
             </button>
@@ -244,7 +256,7 @@ const ChatMessage = (props: IChatMessage) => {
               data-testid='chat-message-menu'
             >
               <Icon
-                src={require('@tabler/icons/outline/dots.svg')}
+                src={dotsIcon}
                 className='size-4'
               />
             </button>
@@ -362,7 +374,7 @@ const ChatMessage = (props: IChatMessage) => {
                   {isRead ? (
                     <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
                       <Icon
-                        src={require('@tabler/icons/outline/check.svg')}
+                        src={checkIcon}
                         strokeWidth={3}
                         className='size-2.5'
                       />
@@ -370,7 +382,7 @@ const ChatMessage = (props: IChatMessage) => {
                   ) : (
                     <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
                       <Icon
-                        src={require('@tabler/icons/outline/check.svg')}
+                        src={checkIcon}
                         strokeWidth={3}
                         className='size-2.5'
                       />
diff --git a/src/features/chats/components/chat-page/chat-page.tsx b/src/features/chats/components/chat-page/chat-page.tsx
index 8c8366506..ccf9aff10 100644
--- a/src/features/chats/components/chat-page/chat-page.tsx
+++ b/src/features/chats/components/chat-page/chat-page.tsx
@@ -1,15 +1,15 @@
 import clsx from 'clsx';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
-import { Stack } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
-import ChatPageMain from './components/chat-page-main';
-import ChatPageNew from './components/chat-page-new';
-import ChatPageSettings from './components/chat-page-settings';
-import ChatPageSidebar from './components/chat-page-sidebar';
-import Welcome from './components/welcome';
+import ChatPageMain from './components/chat-page-main.tsx';
+import ChatPageNew from './components/chat-page-new.tsx';
+import ChatPageSettings from './components/chat-page-settings.tsx';
+import ChatPageSidebar from './components/chat-page-sidebar.tsx';
+import Welcome from './components/welcome.tsx';
 
 interface IChatPage {
   chatId?: string;
diff --git a/src/features/chats/components/chat-page/components/blankslate-empty.tsx b/src/features/chats/components/chat-page/components/blankslate-empty.tsx
index 18f177f24..3d3fa2443 100644
--- a/src/features/chats/components/chat-page/components/blankslate-empty.tsx
+++ b/src/features/chats/components/chat-page/components/blankslate-empty.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IBlankslate {
 }
diff --git a/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx b/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
index 956672a19..9e01ba6f8 100644
--- a/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
+++ b/src/features/chats/components/chat-page/components/blankslate-with-chats.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 /** To display on the chats main page when no message is selected, but chats are present. */
 const BlankslateWithChats = () => {
diff --git a/src/features/chats/components/chat-page/components/chat-page-main.tsx b/src/features/chats/components/chat-page/components/chat-page-main.tsx
index 71934fa9b..a859766e0 100644
--- a/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -1,21 +1,34 @@
-import React, { useRef } from 'react';
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory, useParams } from 'react-router-dom';
 
-import { blockAccount, unblockAccount } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import List, { ListItem } from 'soapbox/components/list';
-import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Tooltip } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { MessageExpirationValues, useChat, useChatActions, useChats } from 'soapbox/queries/chats';
-import { secondsToDays } from 'soapbox/utils/numbers';
+import { blockAccount, unblockAccount } from 'soapbox/actions/accounts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { Menu, MenuButton, MenuItem, MenuList } from 'soapbox/components/ui/menu.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { MessageExpirationValues, useChat, useChatActions, useChats } from 'soapbox/queries/chats.ts';
+import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
-import Chat from '../../chat';
+import Chat from '../../chat.tsx';
 
-import BlankslateEmpty from './blankslate-empty';
-import BlankslateWithChats from './blankslate-with-chats';
+import BlankslateEmpty from './blankslate-empty.tsx';
+import BlankslateWithChats from './blankslate-with-chats.tsx';
 
 const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
@@ -120,7 +133,7 @@ const ChatPageMain = () => {
         <HStack alignItems='center' space={2} className='overflow-hidden'>
           <HStack alignItems='center'>
             <IconButton
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
               onClick={() => history.push('/chats')}
             />
@@ -162,7 +175,7 @@ const ChatPageMain = () => {
         <Menu>
           <MenuButton
             as={IconButton}
-            src={require('@tabler/icons/outline/info-circle.svg')}
+            src={infoCircleIcon}
             iconClassName='h-5 w-5 text-gray-600'
             children={null}
           />
@@ -213,7 +226,7 @@ const ChatPageMain = () => {
                   className='!px-0 hover:!bg-transparent'
                 >
                   <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
-                    <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
+                    <Icon src={banIcon} className='size-5' />
                     <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
                   </div>
                 </MenuItem>
@@ -225,7 +238,7 @@ const ChatPageMain = () => {
                     className='!px-0 hover:!bg-transparent'
                   >
                     <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
-                      <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
+                      <Icon src={logoutIcon} className='size-5' />
                       <span>{intl.formatMessage(messages.leaveChat)}</span>
                     </div>
                   </MenuItem>
diff --git a/src/features/chats/components/chat-page/components/chat-page-new.tsx b/src/features/chats/components/chat-page/components/chat-page-new.tsx
index bb5fa407c..5ae1efc0c 100644
--- a/src/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
+import { CardTitle } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
-import ChatSearch from '../../chat-search/chat-search';
+import ChatSearch from '../../chat-search/chat-search.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat.new_message.title', defaultMessage: 'New Message' },
@@ -23,7 +26,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
       <Stack className='grow px-4 pt-6 sm:px-6'>
         <HStack alignItems='center'>
           <IconButton
-            src={require('@tabler/icons/outline/arrow-left.svg')}
+            src={arrowLeftIcon}
             className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
             onClick={() => history.push('/chats')}
           />
diff --git a/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index b04d0def3..8b1a26b73 100644
--- a/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -1,13 +1,22 @@
-import React, { useState } from 'react';
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { changeSetting } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, CardBody, CardTitle, Form, HStack, IconButton, Stack, Toggle } from 'soapbox/components/ui';
-import SettingToggle from 'soapbox/features/notifications/components/setting-toggle';
-import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks';
-import { useUpdateCredentials } from 'soapbox/queries/accounts';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardBody, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 type FormData = {
   accepts_chat_messages?: boolean;
@@ -50,7 +59,7 @@ const ChatPageSettings = () => {
     <Stack className='h-full space-y-8 px-4 py-6 sm:p-6'>
       <HStack alignItems='center'>
         <IconButton
-          src={require('@tabler/icons/outline/arrow-left.svg')}
+          src={arrowLeftIcon}
           className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
           onClick={() => history.push('/chats')}
         />
diff --git a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index 3f08e1a6b..f900007ea 100644
--- a/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/src/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -1,13 +1,19 @@
-import React, { useState } from 'react';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import settingsIcon from '@tabler/icons/outline/settings.svg';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
-import { useDebounce, useFeatures } from 'soapbox/hooks';
-import { IChat } from 'soapbox/queries/chats';
+import { CardTitle } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { IChat } from 'soapbox/queries/chats.ts';
 
-import ChatList from '../../chat-list';
-import ChatSearchInput from '../../chat-search-input';
+import ChatList from '../../chat-list.tsx';
+import ChatSearchInput from '../../chat-search-input.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.chats', defaultMessage: 'Chats' },
@@ -42,13 +48,13 @@ const ChatPageSidebar = () => {
 
           <HStack space={1}>
             <IconButton
-              src={require('@tabler/icons/outline/settings.svg')}
+              src={settingsIcon}
               iconClassName='h-5 w-5 text-gray-600'
               onClick={handleSettingsClick}
             />
 
             <IconButton
-              src={require('@tabler/icons/outline/edit.svg')}
+              src={editIcon}
               iconClassName='h-5 w-5 text-gray-600'
               onClick={handleChatCreate}
             />
diff --git a/src/features/chats/components/chat-page/components/welcome.tsx b/src/features/chats/components/chat-page/components/welcome.tsx
index f78de0e32..7fd76c834 100644
--- a/src/features/chats/components/chat-page/components/welcome.tsx
+++ b/src/features/chats/components/chat-page/components/welcome.tsx
@@ -1,10 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, CardBody, CardTitle, Form, Stack, Text, Toggle } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
-import { useUpdateCredentials } from 'soapbox/queries/accounts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardBody, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 type FormData = {
   accepts_chat_messages?: boolean;
diff --git a/src/features/chats/components/chat-pane-header.test.tsx b/src/features/chats/components/chat-pane-header.test.tsx
index a518c183a..a2c580220 100644
--- a/src/features/chats/components/chat-pane-header.test.tsx
+++ b/src/features/chats/components/chat-pane-header.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatPaneHeader from './chat-widget/chat-pane-header';
+import ChatPaneHeader from './chat-widget/chat-pane-header.tsx';
 
 describe('<ChatPaneHeader />', () => {
   it('handles the onToggle prop', async () => {
diff --git a/src/features/chats/components/chat-pane/blankslate.tsx b/src/features/chats/components/chat-pane/blankslate.tsx
index d718ff376..2e6b37c37 100644
--- a/src/features/chats/components/chat-pane/blankslate.tsx
+++ b/src/features/chats/components/chat-pane/blankslate.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Button, Stack, Text } from 'soapbox/components/ui';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat_pane.blankslate.title', defaultMessage: 'No messages yet' },
diff --git a/src/features/chats/components/chat-pane/chat-pane.test.tsx b/src/features/chats/components/chat-pane/chat-pane.test.tsx
index 3997c242c..a4fb419c1 100644
--- a/src/features/chats/components/chat-pane/chat-pane.test.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.test.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { ChatContext } from 'soapbox/contexts/chat-context';
-import { StatProvider } from 'soapbox/contexts/stat-context';
+import { __stub } from 'soapbox/api/index.ts';
+import { ChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { StatProvider } from 'soapbox/contexts/stat-context.tsx';
 import chats from 'soapbox/jest/fixtures/chats.json';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatPane from './chat-pane';
+import ChatPane from './chat-pane.tsx';
 
 const renderComponentWithChatContext = (store = {}) => render(
   <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
diff --git a/src/features/chats/components/chat-pane/chat-pane.tsx b/src/features/chats/components/chat-pane/chat-pane.tsx
index 1f0dde8f8..c051aec68 100644
--- a/src/features/chats/components/chat-pane/chat-pane.tsx
+++ b/src/features/chats/components/chat-pane/chat-pane.tsx
@@ -1,22 +1,24 @@
-import React, { useState } from 'react';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Stack } from 'soapbox/components/ui';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useDebounce, useFeatures } from 'soapbox/hooks';
-import { IChat, useChats } from 'soapbox/queries/chats';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { IChat, useChats } from 'soapbox/queries/chats.ts';
 
-import ChatList from '../chat-list';
-import ChatSearch from '../chat-search/chat-search';
-import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
-import ChatSearchInput from '../chat-search-input';
-import ChatPaneHeader from '../chat-widget/chat-pane-header';
-import ChatWindow from '../chat-widget/chat-window';
-import ChatSearchHeader from '../chat-widget/headers/chat-search-header';
-import { Pane } from '../ui';
+import ChatList from '../chat-list.tsx';
+import ChatSearch from '../chat-search/chat-search.tsx';
+import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate.tsx';
+import ChatSearchInput from '../chat-search-input.tsx';
+import ChatPaneHeader from '../chat-widget/chat-pane-header.tsx';
+import ChatWindow from '../chat-widget/chat-window.tsx';
+import ChatSearchHeader from '../chat-widget/headers/chat-search-header.tsx';
+import { Pane } from '../ui/index.ts';
 
-import Blankslate from './blankslate';
+import Blankslate from './blankslate.tsx';
 
 const ChatPane = () => {
   const features = useFeatures();
@@ -111,7 +113,7 @@ const ChatPane = () => {
             toggleChatPane();
           }
         }}
-        secondaryActionIcon={require('@tabler/icons/outline/edit.svg')}
+        secondaryActionIcon={editIcon}
       />
 
       {isOpen ? renderBody() : null}
diff --git a/src/features/chats/components/chat-pending-upload.tsx b/src/features/chats/components/chat-pending-upload.tsx
index 63cbd173f..a756ee911 100644
--- a/src/features/chats/components/chat-pending-upload.tsx
+++ b/src/features/chats/components/chat-pending-upload.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { ProgressBar } from 'soapbox/components/ui';
+import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
 
 interface IChatPendingUpload {
   progress: number;
diff --git a/src/features/chats/components/chat-search-input.tsx b/src/features/chats/components/chat-search-input.tsx
index 45728cd79..1a4f41fb3 100644
--- a/src/features/chats/components/chat-search-input.tsx
+++ b/src/features/chats/components/chat-search-input.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Input } from 'soapbox/components/ui';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
 const messages = defineMessages({
   searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
@@ -34,7 +36,7 @@ const ChatSearchInput: React.FC<IChatSearchInput> = ({ value, onChange, onClear
       append={
         <button onClick={onClear}>
           <Icon
-            src={value.length ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+            src={value.length ? xIcon : searchIcon}
             className='size-4 text-gray-700 dark:text-gray-600'
             aria-hidden='true'
           />
diff --git a/src/features/chats/components/chat-search/blankslate.tsx b/src/features/chats/components/chat-search/blankslate.tsx
index f4ffd748b..1dec4879e 100644
--- a/src/features/chats/components/chat-search/blankslate.tsx
+++ b/src/features/chats/components/chat-search/blankslate.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat_search.blankslate.title', defaultMessage: 'Start a chat' },
diff --git a/src/features/chats/components/chat-search/chat-search.test.tsx b/src/features/chats/components/chat-search/chat-search.test.tsx
index 3555a66ae..39cbcb13e 100644
--- a/src/features/chats/components/chat-search/chat-search.test.tsx
+++ b/src/features/chats/components/chat-search/chat-search.test.tsx
@@ -1,12 +1,12 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { VirtuosoMockContext } from 'react-virtuoso';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { ChatProvider } from 'soapbox/contexts/chat-context';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatSearch from './chat-search';
+import ChatSearch from './chat-search.tsx';
 
 const renderComponent = () => render(
   <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
diff --git a/src/features/chats/components/chat-search/chat-search.tsx b/src/features/chats/components/chat-search/chat-search.tsx
index 24a63fa2f..98a735b42 100644
--- a/src/features/chats/components/chat-search/chat-search.tsx
+++ b/src/features/chats/components/chat-search/chat-search.tsx
@@ -1,20 +1,24 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Icon, Input, Stack } from 'soapbox/components/ui';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { useDebounce } from 'soapbox/hooks';
-import { useChats, ChatKeys } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import useAccountSearch from 'soapbox/queries/search';
-import toast from 'soapbox/toast';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useChats, ChatKeys } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import useAccountSearch from 'soapbox/queries/search.ts';
+import toast from 'soapbox/toast.tsx';
 
-import Blankslate from './blankslate';
-import EmptyResultsBlankslate from './empty-results-blankslate';
-import Results from './results';
+import Blankslate from './blankslate.tsx';
+import EmptyResultsBlankslate from './empty-results-blankslate.tsx';
+import Results from './results.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'chat_search.placeholder', defaultMessage: 'Type a name' },
@@ -101,7 +105,7 @@ const ChatSearch = (props: IChatSearch) => {
           append={
             <button onClick={clearValue}>
               <Icon
-                src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+                src={hasSearchValue ? xIcon : searchIcon}
                 className='size-4 text-gray-700 dark:text-gray-600'
                 aria-hidden='true'
               />
diff --git a/src/features/chats/components/chat-search/empty-results-blankslate.tsx b/src/features/chats/components/chat-search/empty-results-blankslate.tsx
index 4a890f699..1c43e6fa7 100644
--- a/src/features/chats/components/chat-search/empty-results-blankslate.tsx
+++ b/src/features/chats/components/chat-search/empty-results-blankslate.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Stack, Text } from 'soapbox/components/ui';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No matches found' },
diff --git a/src/features/chats/components/chat-search/results.tsx b/src/features/chats/components/chat-search/results.tsx
index 91a6fdb95..6474b74fb 100644
--- a/src/features/chats/components/chat-search/results.tsx
+++ b/src/features/chats/components/chat-search/results.tsx
@@ -1,12 +1,15 @@
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import useAccountSearch from 'soapbox/queries/search';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import useAccountSearch from 'soapbox/queries/search.ts';
 
-import type { Account } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/types/entities.ts';
 
 interface IResults {
   accountSearchResult: ReturnType<typeof useAccountSearch>;
diff --git a/src/features/chats/components/chat-textarea.tsx b/src/features/chats/components/chat-textarea.tsx
index a8269b0c0..87906eeca 100644
--- a/src/features/chats/components/chat-textarea.tsx
+++ b/src/features/chats/components/chat-textarea.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import { forwardRef } from 'react';
 
-import { HStack, Textarea } from 'soapbox/components/ui';
-import { Attachment } from 'soapbox/types/entities';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import { Attachment } from 'soapbox/types/entities.ts';
 
-import ChatPendingUpload from './chat-pending-upload';
-import ChatUpload from './chat-upload';
+import ChatPendingUpload from './chat-pending-upload.tsx';
+import ChatUpload from './chat-upload.tsx';
 
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
   attachments?: Attachment[];
@@ -14,7 +15,7 @@ interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
 }
 
 /** Custom textarea for chats. */
-const ChatTextarea: React.FC<IChatTextarea> = React.forwardRef(({
+const ChatTextarea: React.FC<IChatTextarea> = forwardRef(({
   attachments,
   onDeleteAttachment,
   uploadCount = 0,
diff --git a/src/features/chats/components/chat-upload-preview.tsx b/src/features/chats/components/chat-upload-preview.tsx
index 5b8ed76ff..ca7d7d28e 100644
--- a/src/features/chats/components/chat-upload-preview.tsx
+++ b/src/features/chats/components/chat-upload-preview.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
 
-import { Icon } from 'soapbox/components/ui';
-import { MIMETYPE_ICONS } from 'soapbox/components/upload';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { MIMETYPE_ICONS } from 'soapbox/components/upload.tsx';
 
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
-const defaultIcon = require('@tabler/icons/outline/paperclip.svg');
+const defaultIcon = paperclipIcon;
 
 interface IChatUploadPreview {
   className?: string;
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index 5ac30565f..4caf51998 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -1,15 +1,15 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React from 'react';
 
-import { openModal } from 'soapbox/actions/modals';
-import Blurhash from 'soapbox/components/blurhash';
-import { Icon } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import ChatUploadPreview from './chat-upload-preview';
+import ChatUploadPreview from './chat-upload-preview.tsx';
 
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 interface IChatUpload {
   attachment: Attachment;
@@ -57,7 +57,7 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => {
     >
       <Icon
         className='size-3 text-white'
-        src={require('@tabler/icons/outline/x.svg')}
+        src={xIcon}
       />
     </button>
   );
diff --git a/src/features/chats/components/chat-widget.test.tsx b/src/features/chats/components/chat-widget.test.tsx
index 55d2af647..9fad5681d 100644
--- a/src/features/chats/components/chat-widget.test.tsx
+++ b/src/features/chats/components/chat-widget.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, rootState } from 'soapbox/jest/test-helpers';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, rootState } from 'soapbox/jest/test-helpers.tsx';
 
-import ChatWidget from './chat-widget/chat-widget';
+import ChatWidget from './chat-widget/chat-widget.tsx';
 
 const id = '1';
 const account = buildAccount({
diff --git a/src/features/chats/components/chat-widget/chat-pane-header.tsx b/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 5cff70014..ea354a451 100644
--- a/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -1,6 +1,10 @@
-import React, { HTMLAttributes } from 'react';
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import chevronUpIcon from '@tabler/icons/outline/chevron-up.svg';
+import { HTMLAttributes } from 'react';
 
-import { HStack, IconButton, Text } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IChatPaneHeader {
   isOpen: boolean;
@@ -65,7 +69,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
 
         <IconButton
           onClick={onToggle}
-          src={isOpen ? require('@tabler/icons/outline/chevron-down.svg') : require('@tabler/icons/outline/chevron-up.svg')}
+          src={isOpen ? chevronDownIcon : chevronUpIcon}
           iconClassName='h-5 w-5 text-gray-600'
         />
       </HStack>
diff --git a/src/features/chats/components/chat-widget/chat-settings.tsx b/src/features/chats/components/chat-widget/chat-settings.tsx
index 6c337f60c..1ec687cb3 100644
--- a/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -1,16 +1,25 @@
-import React from 'react';
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { blockAccount, unblockAccount } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import List, { ListItem } from 'soapbox/components/list';
-import { Avatar, HStack, Icon, Select, Stack, Text } from 'soapbox/components/ui';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { messageExpirationOptions, MessageExpirationValues, useChatActions } from 'soapbox/queries/chats';
-import { secondsToDays } from 'soapbox/utils/numbers';
+import { blockAccount, unblockAccount } from 'soapbox/actions/accounts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { messageExpirationOptions, MessageExpirationValues, useChatActions } from 'soapbox/queries/chats.ts';
+import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
-import ChatPaneHeader from './chat-pane-header';
+import ChatPaneHeader from './chat-pane-header.tsx';
 
 const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
@@ -95,7 +104,7 @@ const ChatSettings = () => {
           <HStack alignItems='center' space={2}>
             <button onClick={closeSettings}>
               <Icon
-                src={require('@tabler/icons/outline/arrow-left.svg')}
+                src={arrowLeftIcon}
                 className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
               />
             </button>
@@ -136,13 +145,13 @@ const ChatSettings = () => {
 
         <Stack space={5}>
           <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
-            <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
+            <Icon src={banIcon} className='size-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
             <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
-              <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
+              <Icon src={logoutIcon} className='size-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>
           )}
diff --git a/src/features/chats/components/chat-widget/chat-widget.tsx b/src/features/chats/components/chat-widget/chat-widget.tsx
index 05b9fb255..4ae193e6b 100644
--- a/src/features/chats/components/chat-widget/chat-widget.tsx
+++ b/src/features/chats/components/chat-widget/chat-widget.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ChatProvider } from 'soapbox/contexts/chat-context';
-import { useOwnAccount } from 'soapbox/hooks';
+import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
-import ChatPane from '../chat-pane/chat-pane';
+import ChatPane from '../chat-pane/chat-pane.tsx';
 
 const ChatWidget = () => {
   const { account } = useOwnAccount();
diff --git a/src/features/chats/components/chat-widget/chat-window.tsx b/src/features/chats/components/chat-widget/chat-window.tsx
index 1e9ca007f..90c9e5982 100644
--- a/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/src/features/chats/components/chat-widget/chat-window.tsx
@@ -1,16 +1,24 @@
-import React, { useRef } from 'react';
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
+import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Avatar, HStack, Icon, Stack, Text, Tooltip } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { secondsToDays } from 'soapbox/utils/numbers';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { secondsToDays } from 'soapbox/utils/numbers.tsx';
 
-import Chat from '../chat';
+import Chat from '../chat.tsx';
 
-import ChatPaneHeader from './chat-pane-header';
-import ChatSettings from './chat-settings';
+import ChatPaneHeader from './chat-pane-header.tsx';
+import ChatSettings from './chat-settings.tsx';
 
 const messages = defineMessages({
   autoDeleteMessage: { id: 'chat_window.auto_delete_label', defaultMessage: 'Auto-delete after {day, plural, one {# day} other {# days}}' },
@@ -72,7 +80,7 @@ const ChatWindow = () => {
             {isOpen && (
               <button onClick={closeChat}>
                 <Icon
-                  src={require('@tabler/icons/outline/arrow-left.svg')}
+                  src={arrowLeftIcon}
                   className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
                 />
               </button>
@@ -107,7 +115,7 @@ const ChatWindow = () => {
           </HStack>
         }
         secondaryAction={secondaryAction()}
-        secondaryActionIcon={isOpen ? require('@tabler/icons/outline/info-circle.svg') : require('@tabler/icons/outline/edit.svg')}
+        secondaryActionIcon={isOpen ? infoCircleIcon : editIcon}
         isToggleable={!isOpen}
         isOpen={isOpen}
         onToggle={toggleChatPane}
diff --git a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index 81828f51f..1649566f5 100644
--- a/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
 
-import ChatPaneHeader from '../chat-pane-header';
+import ChatPaneHeader from '../chat-pane-header.tsx';
 
 const messages = defineMessages({
   title: { id: 'chat_search.title', defaultMessage: 'Messages' },
@@ -26,7 +28,7 @@ const ChatSearchHeader = () => {
             }}
           >
             <Icon
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
             />
           </button>
diff --git a/src/features/chats/components/chat.tsx b/src/features/chats/components/chat.tsx
index e7ef9c68d..821bd7555 100644
--- a/src/features/chats/components/chat.tsx
+++ b/src/features/chats/components/chat.tsx
@@ -1,19 +1,20 @@
 import { AxiosError } from 'axios';
 import clsx from 'clsx';
-import React, { MutableRefObject, useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { uploadMedia } from 'soapbox/actions/media';
-import { Stack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { normalizeAttachment } from 'soapbox/normalizers';
-import { IChat, useChatActions } from 'soapbox/queries/chats';
-import toast from 'soapbox/toast';
+import { uploadMedia } from 'soapbox/actions/media.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
+import { IChat, useChatActions } from 'soapbox/queries/chats.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ChatComposer from './chat-composer';
-import ChatMessageList from './chat-message-list';
+import ChatComposer from './chat-composer.tsx';
+import ChatMessageList from './chat-message-list.tsx';
 
-import type { Attachment } from 'soapbox/types/entities';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 const fileKeyGen = (): number => Math.floor((Math.random() * 0x10000));
 
diff --git a/src/features/chats/components/ui/index.ts b/src/features/chats/components/ui/index.ts
index d343a90ff..1b32ebdcb 100644
--- a/src/features/chats/components/ui/index.ts
+++ b/src/features/chats/components/ui/index.ts
@@ -1 +1 @@
-export { Pane } from './pane';
+export { Pane } from './pane.tsx';
diff --git a/src/features/chats/components/ui/pane.tsx b/src/features/chats/components/ui/pane.tsx
index db9fc9666..b09cc8704 100644
--- a/src/features/chats/components/ui/pane.tsx
+++ b/src/features/chats/components/ui/pane.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IPane {
   /** Whether the pane is open or minimized. */
diff --git a/src/features/chats/index.tsx b/src/features/chats/index.tsx
index c54bab37b..f9406508b 100644
--- a/src/features/chats/index.tsx
+++ b/src/features/chats/index.tsx
@@ -1,8 +1,6 @@
-import React from 'react';
+import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
 
-import { ChatProvider } from 'soapbox/contexts/chat-context';
-
-import ChatPage from './components/chat-page/chat-page';
+import ChatPage from './components/chat-page/chat-page.tsx';
 
 interface IChatIndex {
   params?: {
diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx
index 69dab59ac..3840b3468 100644
--- a/src/features/community-timeline/index.tsx
+++ b/src/features/community-timeline/index.tsx
@@ -1,14 +1,18 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { expandCommunityTimeline } from 'soapbox/actions/timelines';
-import { useCommunityStream } from 'soapbox/api/hooks';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings, useTheme, useInstance } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandCommunityTimeline } from 'soapbox/actions/timelines.ts';
+import { useCommunityStream } from 'soapbox/api/hooks/index.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 const CommunityTimeline = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/compose/components/autosuggest-account.tsx b/src/features/compose/components/autosuggest-account.tsx
index d3b3a295f..38a03e0f4 100644
--- a/src/features/compose/components/autosuggest-account.tsx
+++ b/src/features/compose/components/autosuggest-account.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
 
 interface IAutosuggestAccount {
   id: string;
diff --git a/src/features/compose/components/compose-form-button.tsx b/src/features/compose/components/compose-form-button.tsx
index 3002f2e1e..00403965d 100644
--- a/src/features/compose/components/compose-form-button.tsx
+++ b/src/features/compose/components/compose-form-button.tsx
@@ -1,7 +1,6 @@
 import clsx from 'clsx';
-import React from 'react';
 
-import { IconButton } from 'soapbox/components/ui';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
 
 interface IComposeFormButton {
   icon: string;
diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 3617ea56b..b236695a9 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -1,6 +1,8 @@
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
 import clsx from 'clsx';
 import { CLEAR_EDITOR_COMMAND, TextNode, type LexicalEditor, $getRoot } from 'lexical';
-import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { length } from 'stringz';
@@ -12,35 +14,43 @@ import {
   fetchComposeSuggestions,
   selectComposeSuggestion,
   uploadCompose,
-} from 'soapbox/actions/compose';
-import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
-import { Button, HStack, Stack } from 'soapbox/components/ui';
-import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
-import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
+} from 'soapbox/actions/compose.ts';
+import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
+import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { usePrevious } from 'soapbox/hooks/usePrevious.ts';
 
-import QuotedStatusContainer from '../containers/quoted-status-container';
-import ReplyIndicatorContainer from '../containers/reply-indicator-container';
-import UploadButtonContainer from '../containers/upload-button-container';
-import WarningContainer from '../containers/warning-container';
-import { $createEmojiNode } from '../editor/nodes/emoji-node';
-import { countableText } from '../util/counter';
+import QuotedStatusContainer from '../containers/quoted-status-container.tsx';
+import ReplyIndicatorContainer from '../containers/reply-indicator-container.ts';
+import UploadButtonContainer from '../containers/upload-button-container.ts';
+import WarningContainer from '../containers/warning-container.tsx';
+import { $createEmojiNode } from '../editor/nodes/emoji-node.tsx';
+import { countableText } from '../util/counter.ts';
 
-import MarkdownButton from './markdown-button';
-import PollButton from './poll-button';
-import PollForm from './polls/poll-form';
-import PrivacyDropdown from './privacy-dropdown';
-import ReplyGroupIndicator from './reply-group-indicator';
-import ReplyMentions from './reply-mentions';
-import ScheduleButton from './schedule-button';
-import ScheduleForm from './schedule-form';
-import SpoilerButton from './spoiler-button';
-import SpoilerInput from './spoiler-input';
-import TextCharacterCounter from './text-character-counter';
-import UploadForm from './upload-form';
-import VisualCharacterCounter from './visual-character-counter';
+import MarkdownButton from './markdown-button.tsx';
+import PollButton from './poll-button.tsx';
+import PollForm from './polls/poll-form.tsx';
+import PrivacyDropdown from './privacy-dropdown.tsx';
+import ReplyGroupIndicator from './reply-group-indicator.tsx';
+import ReplyMentions from './reply-mentions.tsx';
+import ScheduleButton from './schedule-button.tsx';
+import ScheduleForm from './schedule-form.tsx';
+import SpoilerButton from './spoiler-button.tsx';
+import SpoilerInput from './spoiler-input.tsx';
+import TextCharacterCounter from './text-character-counter.tsx';
+import UploadForm from './upload-form.tsx';
+import VisualCharacterCounter from './visual-character-counter.tsx';
 
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What\'s on your mind?' },
@@ -229,10 +239,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   if (isEditing) {
     publishText = intl.formatMessage(messages.saveChanges);
   } else if (privacy === 'direct') {
-    publishIcon = require('@tabler/icons/outline/mail.svg');
+    publishIcon = mailIcon;
     publishText = intl.formatMessage(messages.message);
   } else if (privacy === 'private') {
-    publishIcon = require('@tabler/icons/outline/lock.svg');
+    publishIcon = lockIcon;
     publishText = intl.formatMessage(messages.publish);
   } else {
     publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
diff --git a/src/features/compose/components/markdown-button.tsx b/src/features/compose/components/markdown-button.tsx
index daedd132b..15b4c5531 100644
--- a/src/features/compose/components/markdown-button.tsx
+++ b/src/features/compose/components/markdown-button.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import markdownIcon from '@tabler/icons/outline/markdown.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeComposeContentType } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { changeComposeContentType } from 'soapbox/actions/compose.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
-import ComposeFormButton from './compose-form-button';
+import ComposeFormButton from './compose-form-button.tsx';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
@@ -25,7 +26,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ composeId }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/markdown.svg')}
+      icon={markdownIcon}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/src/features/compose/components/poll-button.tsx b/src/features/compose/components/poll-button.tsx
index c2a31c642..96d642cf7 100644
--- a/src/features/compose/components/poll-button.tsx
+++ b/src/features/compose/components/poll-button.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { addPoll, removePoll } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { addPoll, removePoll } from 'soapbox/actions/compose.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
-import ComposeFormButton from './compose-form-button';
+import ComposeFormButton from './compose-form-button.tsx';
 
 const messages = defineMessages({
   add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' },
@@ -39,7 +40,7 @@ const PollButton: React.FC<IPollButton> = ({ composeId, disabled }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/chart-bar.svg')}
+      icon={chartBarIcon}
       title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
       active={active}
       disabled={disabled}
diff --git a/src/features/compose/components/polls/duration-selector.test.tsx b/src/features/compose/components/polls/duration-selector.test.tsx
index 177d735b0..12b0e11f9 100644
--- a/src/features/compose/components/polls/duration-selector.test.tsx
+++ b/src/features/compose/components/polls/duration-selector.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import DurationSelector from './duration-selector';
+import DurationSelector from './duration-selector.tsx';
 
 describe('<DurationSelector />', () => {
   it('defaults to 2 days', () => {
diff --git a/src/features/compose/components/polls/duration-selector.tsx b/src/features/compose/components/polls/duration-selector.tsx
index 72b5de8bd..4702b5812 100644
--- a/src/features/compose/components/polls/duration-selector.tsx
+++ b/src/features/compose/components/polls/duration-selector.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Select } from 'soapbox/components/ui';
+import Select from 'soapbox/components/ui/select.tsx';
 
 const messages = defineMessages({
   minutes: { id: 'intervals.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}}' },
diff --git a/src/features/compose/components/polls/poll-form.tsx b/src/features/compose/components/polls/poll-form.tsx
index e28fac52f..4ef1043aa 100644
--- a/src/features/compose/components/polls/poll-form.tsx
+++ b/src/features/compose/components/polls/poll-form.tsx
@@ -1,14 +1,20 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { addPollOption, changePollOption, changePollSettings, clearComposeSuggestions, fetchComposeSuggestions, removePoll, removePollOption, selectComposeSuggestion } from 'soapbox/actions/compose';
-import AutosuggestInput from 'soapbox/components/autosuggest-input';
-import { Button, Divider, HStack, Stack, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks';
+import { addPollOption, changePollOption, changePollSettings, clearComposeSuggestions, fetchComposeSuggestions, removePoll, removePollOption, selectComposeSuggestion } from 'soapbox/actions/compose.ts';
+import AutosuggestInput from 'soapbox/components/autosuggest-input.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import DurationSelector from './duration-selector';
+import DurationSelector from './duration-selector.tsx';
 
-import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
+import type { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
 
 const messages = defineMessages({
   option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Answer #{number}' },
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 234119a62..360bc2345 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -1,19 +1,24 @@
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { spring } from 'react-motion';
 // @ts-ignore
 import Overlay from 'react-overlays/lib/Overlay';
 
-import { changeComposeVisibility } from 'soapbox/actions/compose';
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import Icon from 'soapbox/components/icon';
-import { IconButton } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
-import { userTouching } from 'soapbox/is-mobile';
+import { changeComposeVisibility } from 'soapbox/actions/compose.ts';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
 
-import Motion from '../../ui/util/optional-motion';
+import Motion from '../../ui/util/optional-motion.tsx';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
@@ -161,10 +166,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const [placement, setPlacement] = useState('bottom');
 
   const options = [
-    { icon: require('@tabler/icons/outline/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
-    { icon: require('@tabler/icons/outline/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
-    { icon: require('@tabler/icons/outline/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
-    { icon: require('@tabler/icons/outline/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
+    { icon: worldIcon, value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
+    { icon: lockOpenIcon, value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
+    { icon: lockIcon, value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
+    { icon: mailIcon, value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
   ];
 
   const onChange = (value: string | null) => value && dispatch(changeComposeVisibility(composeId, value));
@@ -247,7 +252,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
             'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !open,
             'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': open,
           })}
-          src={valueOption?.icon}
+          src={valueOption!.icon}
           title={intl.formatMessage(messages.change_privacy)}
           onClick={handleToggle}
           onMouseDown={handleMouseDown}
diff --git a/src/features/compose/components/reply-group-indicator.tsx b/src/features/compose/components/reply-group-indicator.tsx
index 2554ee67f..ae58dd341 100644
--- a/src/features/compose/components/reply-group-indicator.tsx
+++ b/src/features/compose/components/reply-group-indicator.tsx
@@ -1,11 +1,11 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Link from 'soapbox/components/link';
-import { Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { Group } from 'soapbox/schemas';
-import { makeGetStatus } from 'soapbox/selectors';
+import Link from 'soapbox/components/link.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { Group } from 'soapbox/schemas/index.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IReplyGroupIndicator {
   composeId: string;
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index 4ed3db70e..2b7bb5a15 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -1,13 +1,13 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
 
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import Markup from 'soapbox/components/markup';
-import { Stack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import Markup from 'soapbox/components/markup.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 interface IReplyIndicator {
   className?: string;
@@ -29,7 +29,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
   if (!hideActions && onCancel) {
     actions = {
       onActionClick: handleClick,
-      actionIcon: require('@tabler/icons/outline/x.svg'),
+      actionIcon: xIcon,
       actionAlignment: 'top',
       actionTitle: 'Dismiss',
     };
diff --git a/src/features/compose/components/reply-mentions.tsx b/src/features/compose/components/reply-mentions.tsx
index a2de52b9f..e23207a0b 100644
--- a/src/features/compose/components/reply-mentions.tsx
+++ b/src/features/compose/components/reply-mentions.tsx
@@ -1,13 +1,18 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useAppDispatch, useAppSelector, useCompose, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
-import { makeGetStatus } from 'soapbox/selectors';
-import { shortenNostr } from 'soapbox/utils/nostr';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
+import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IReplyMentions {
   composeId: string;
@@ -29,7 +34,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   const parentTo = status && statusToMentionsAccountIdsArray(status, account!);
 
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
     dispatch(openModal('REPLY_MENTIONS', {
@@ -43,19 +48,21 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
 
   if (to.size === 0) {
     return (
-      <a href='#' className='mb-1 text-sm text-gray-700 dark:text-gray-600' onClick={handleClick}>
-        <FormattedMessage
-          id='reply_mentions.reply_empty'
-          defaultMessage='Replying to post'
-        />
-      </a>
+      <Link to={'/'} className='inline-flex'>
+        <button className='mb-1 cursor-pointer space-x-2 !border-none !bg-transparent !p-0 text-sm !text-gray-700 dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
+          <FormattedMessage
+            id='reply_mentions.reply_empty'
+            defaultMessage='Replying to post'
+          />
+        </button>
+      </Link>
     );
   }
 
   const accounts = to.slice(0, 2).map((acct: string) => {
     const username = acct.split('@')[0];
     return (
-      <span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue' style={{ direction: 'ltr' }}> {/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
+      <span className='inline-block text-primary-600 no-underline hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}
         @{shortenNostr(username)}
       </span>
     );
@@ -68,15 +75,17 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
   }
 
   return (
-    <a href='#' className='mb-1 text-sm text-gray-700 dark:text-gray-600' onClick={handleClick}>
-      <FormattedMessage
-        id='reply_mentions.reply'
-        defaultMessage='Replying to {accounts}'
-        values={{
-          accounts: <FormattedList type='conjunction' value={accounts} />,
-        }}
-      />
-    </a>
+    <Link to={'/'} className='inline-flex'>
+      <button className='mb-1 cursor-pointer space-x-2 !border-none !p-0 text-sm !text-gray-700 focus:!ring-transparent focus:ring-offset-0  dark:!text-gray-600 rtl:space-x-reverse' onClick={handleClick}>
+        <FormattedMessage
+          id='reply_mentions.reply'
+          defaultMessage='Replying to {accounts}'
+          values={{
+            accounts: <FormattedList type='conjunction' value={accounts} />,
+          }}
+        />
+      </button>
+    </Link>
   );
 };
 
diff --git a/src/features/compose/components/schedule-button.tsx b/src/features/compose/components/schedule-button.tsx
index cf4e8bbbf..17bb7efec 100644
--- a/src/features/compose/components/schedule-button.tsx
+++ b/src/features/compose/components/schedule-button.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { addSchedule, removeSchedule } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { addSchedule, removeSchedule } from 'soapbox/actions/compose.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
-import ComposeFormButton from './compose-form-button';
+import ComposeFormButton from './compose-form-button.tsx';
 
 const messages = defineMessages({
   add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' },
@@ -39,7 +40,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ composeId, disabled }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/calendar-stats.svg')}
+      icon={calendarStatsIcon}
       title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
       active={active}
       disabled={disabled}
diff --git a/src/features/compose/components/schedule-form.tsx b/src/features/compose/components/schedule-form.tsx
index ab7a64f34..801d2b151 100644
--- a/src/features/compose/components/schedule-form.tsx
+++ b/src/features/compose/components/schedule-form.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { setSchedule, removeSchedule } from 'soapbox/actions/compose';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { setSchedule, removeSchedule } from 'soapbox/actions/compose.ts';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import { Datetime } from 'soapbox/components/ui/datetime.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 const messages = defineMessages({
   schedule: { id: 'schedule.post_time', defaultMessage: 'Post Date/Time' },
@@ -52,7 +55,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
         <IconButton
           iconClassName='h-4 w-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'
-          src={require('@tabler/icons/outline/x.svg')}
+          src={xIcon}
           onClick={handleRemove}
           title={intl.formatMessage(messages.remove)}
         />
diff --git a/src/features/compose/components/search-results.tsx b/src/features/compose/components/search-results.tsx
index 57f9cc694..716db2f70 100644
--- a/src/features/compose/components/search-results.tsx
+++ b/src/features/compose/components/search-results.tsx
@@ -1,24 +1,29 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search';
-import { expandTrendingStatuses, fetchTrendingStatuses } from 'soapbox/actions/trending-statuses';
-import { useAccount } from 'soapbox/api/hooks';
-import Hashtag from 'soapbox/components/hashtag';
-import IconButton from 'soapbox/components/icon-button';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { HStack, Spinner, Tabs, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import StatusContainer from 'soapbox/containers/status-container';
-import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account';
-import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { expandSearch, setFilter, setSearchAccount } from 'soapbox/actions/search.ts';
+import { expandTrendingStatuses, fetchTrendingStatuses } from 'soapbox/actions/trending-statuses.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Hashtag from 'soapbox/components/hashtag.tsx';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account.tsx';
+import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { SearchFilter } from 'soapbox/reducers/search';
+import type { SearchFilter } from 'soapbox/reducers/search.ts';
 
 const messages = defineMessages({
   accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
@@ -213,7 +218,7 @@ const SearchResults = () => {
     <>
       {filterByAccount ? (
         <HStack className='mb-4 border-b border-solid border-gray-200 px-2 pb-4 dark:border-gray-800' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleUnsetAccount} />
+          <IconButton iconClassName='h-5 w-5' src={xIcon} onClick={handleUnsetAccount} />
           <Text truncate>
             <FormattedMessage
               id='search_results.filter_message'
diff --git a/src/features/compose/components/search-zap-split.tsx b/src/features/compose/components/search-zap-split.tsx
index d2873f828..b5a63e6fb 100644
--- a/src/features/compose/components/search-zap-split.tsx
+++ b/src/features/compose/components/search-zap-split.tsx
@@ -1,6 +1,7 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -10,14 +11,15 @@ import {
   setSearchAccount,
   showSearch,
   submitSearch,
-} from 'soapbox/actions/search';
-import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
-import { Input } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { Account } from 'soapbox/schemas';
-import { selectAccount } from 'soapbox/selectors';
-import { RootState } from 'soapbox/store';
+} from 'soapbox/actions/search.ts';
+import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { Account } from 'soapbox/schemas/index.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { RootState } from 'soapbox/store.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
@@ -153,7 +155,7 @@ const SearchZapSplit = (props: ISearchZapSplit) => {
         >
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/features/compose/components/search.tsx b/src/features/compose/components/search.tsx
index b91438a2d..775cc7178 100644
--- a/src/features/compose/components/search.tsx
+++ b/src/features/compose/components/search.tsx
@@ -1,6 +1,8 @@
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -11,13 +13,14 @@ import {
   setSearchAccount,
   showSearch,
   submitSearch,
-} from 'soapbox/actions/search';
-import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
-import { Input } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { selectAccount } from 'soapbox/selectors';
-import { AppDispatch, RootState } from 'soapbox/store';
+} from 'soapbox/actions/search.ts';
+import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
@@ -111,7 +114,7 @@ const Search = (props: ISearch) => {
   const makeMenu = () => [
     {
       text: intl.formatMessage(messages.action, { query: value }),
-      icon: require('@tabler/icons/outline/search.svg'),
+      icon: searchIcon,
       action: handleSubmit,
     },
   ];
@@ -166,12 +169,12 @@ const Search = (props: ISearch) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/outline/search.svg')}
+            src={searchIcon}
             className={clsx('size-4 text-gray-600', { hidden: hasValue })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/outline/x.svg')}
+            src={xIcon}
             className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
diff --git a/src/features/compose/components/spoiler-button.tsx b/src/features/compose/components/spoiler-button.tsx
index 235209a83..e23e497ac 100644
--- a/src/features/compose/components/spoiler-button.tsx
+++ b/src/features/compose/components/spoiler-button.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeComposeSpoilerness } from 'soapbox/actions/compose';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { changeComposeSpoilerness } from 'soapbox/actions/compose.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
-import ComposeFormButton from './compose-form-button';
+import ComposeFormButton from './compose-form-button.tsx';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
@@ -26,7 +27,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ composeId }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/outline/alert-triangle.svg')}
+      icon={alertTriangleIcon}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}
diff --git a/src/features/compose/components/spoiler-input.tsx b/src/features/compose/components/spoiler-input.tsx
index 183f58812..46b7b6e28 100644
--- a/src/features/compose/components/spoiler-input.tsx
+++ b/src/features/compose/components/spoiler-input.tsx
@@ -1,11 +1,14 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeComposeSpoilerness, changeComposeSpoilerText } from 'soapbox/actions/compose';
-import AutosuggestInput, { IAutosuggestInput } from 'soapbox/components/autosuggest-input';
-import { Divider, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { changeComposeSpoilerness, changeComposeSpoilerText } from 'soapbox/actions/compose.ts';
+import AutosuggestInput, { IAutosuggestInput } from 'soapbox/components/autosuggest-input.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 const messages = defineMessages({
   title: { id: 'compose_form.spoiler_title', defaultMessage: 'Sensitive content' },
@@ -18,7 +21,7 @@ interface ISpoilerInput extends Pick<IAutosuggestInput, 'onSuggestionsFetchReque
 }
 
 /** Text input for content warning in composer. */
-const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
+const SpoilerInput = forwardRef<AutosuggestInput, ISpoilerInput>(({
   composeId,
   onSuggestionsFetchRequested,
   onSuggestionsClearRequested,
diff --git a/src/features/compose/components/text-character-counter.tsx b/src/features/compose/components/text-character-counter.tsx
index fc7ddc989..7f1b6e13a 100644
--- a/src/features/compose/components/text-character-counter.tsx
+++ b/src/features/compose/components/text-character-counter.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import { length } from 'stringz';
 
 interface ITextCharacterCounter {
diff --git a/src/features/compose/components/upload-button.tsx b/src/features/compose/components/upload-button.tsx
index 4779a6a44..dc9a463d7 100644
--- a/src/features/compose/components/upload-button.tsx
+++ b/src/features/compose/components/upload-button.tsx
@@ -1,8 +1,10 @@
-import React, { useRef } from 'react';
+import paperclipIcon from '@tabler/icons/outline/paperclip.svg';
+import photoIcon from '@tabler/icons/outline/photo.svg';
+import { useRef } from 'react';
 import { defineMessages, IntlShape, useIntl } from 'react-intl';
 
-import { IconButton } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
@@ -54,8 +56,8 @@ const UploadButton: React.FC<IUploadButton> = ({
 
   const src = icon || (
     onlyImages(attachmentTypes)
-      ? require('@tabler/icons/outline/photo.svg')
-      : require('@tabler/icons/outline/paperclip.svg')
+      ? photoIcon
+      : paperclipIcon
   );
 
   return (
diff --git a/src/features/compose/components/upload-form.tsx b/src/features/compose/components/upload-form.tsx
index ac6ea3d8d..290d0b3b8 100644
--- a/src/features/compose/components/upload-form.tsx
+++ b/src/features/compose/components/upload-form.tsx
@@ -1,14 +1,15 @@
 import clsx from 'clsx';
-import React, { useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 
-import { changeMediaOrder } from 'soapbox/actions/compose';
-import { HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { changeMediaOrder } from 'soapbox/actions/compose.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
-import Upload from './upload';
-import UploadProgress from './upload-progress';
+import UploadProgress from './upload-progress.tsx';
+import Upload from './upload.tsx';
 
-import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities.ts';
 
 interface IUploadForm {
   composeId: string;
diff --git a/src/features/compose/components/upload-progress.tsx b/src/features/compose/components/upload-progress.tsx
index a3b9c0758..d581dff5e 100644
--- a/src/features/compose/components/upload-progress.tsx
+++ b/src/features/compose/components/upload-progress.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
-import UploadProgress from 'soapbox/components/upload-progress';
-import { useCompose } from 'soapbox/hooks';
+import UploadProgress from 'soapbox/components/upload-progress.tsx';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 interface IComposeUploadProgress {
   composeId: string;
diff --git a/src/features/compose/components/upload.tsx b/src/features/compose/components/upload.tsx
index 9d3a588e2..1f35e101e 100644
--- a/src/features/compose/components/upload.tsx
+++ b/src/features/compose/components/upload.tsx
@@ -1,8 +1,10 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
-import { undoUploadCompose, changeUploadCompose } from 'soapbox/actions/compose';
-import Upload from 'soapbox/components/upload';
-import { useAppDispatch, useCompose, useInstance } from 'soapbox/hooks';
+import { undoUploadCompose, changeUploadCompose } from 'soapbox/actions/compose.ts';
+import Upload from 'soapbox/components/upload.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 interface IUploadCompose {
   id: string;
diff --git a/src/features/compose/components/visual-character-counter.tsx b/src/features/compose/components/visual-character-counter.tsx
index 647b3e8c3..50f3633fe 100644
--- a/src/features/compose/components/visual-character-counter.tsx
+++ b/src/features/compose/components/visual-character-counter.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { length } from 'stringz';
 
-import ProgressCircle from 'soapbox/components/progress-circle';
+import ProgressCircle from 'soapbox/components/progress-circle.tsx';
 
 const messages = defineMessages({
   title: { id: 'compose.character_counter.title', defaultMessage: 'Used {chars} out of {maxChars} {maxChars, plural, one {character} other {characters}}' },
diff --git a/src/features/compose/components/warning.tsx b/src/features/compose/components/warning.tsx
index 7cf310933..11f66ca1e 100644
--- a/src/features/compose/components/warning.tsx
+++ b/src/features/compose/components/warning.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { spring } from 'react-motion';
 
-import Motion from '../../ui/util/optional-motion';
+import Motion from '../../ui/util/optional-motion.tsx';
 
 interface IWarning {
   message: React.ReactNode;
diff --git a/src/features/compose/containers/quoted-status-container.tsx b/src/features/compose/containers/quoted-status-container.tsx
index 5383aaf18..3fdd0f66a 100644
--- a/src/features/compose/containers/quoted-status-container.tsx
+++ b/src/features/compose/containers/quoted-status-container.tsx
@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
-import { cancelQuoteCompose } from 'soapbox/actions/compose';
-import QuotedStatus from 'soapbox/components/quoted-status';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { cancelQuoteCompose } from 'soapbox/actions/compose.ts';
+import QuotedStatus from 'soapbox/components/quoted-status.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusContainer {
   composeId: string;
diff --git a/src/features/compose/containers/reply-indicator-container.ts b/src/features/compose/containers/reply-indicator-container.ts
index b77c4a8d0..871df1dc9 100644
--- a/src/features/compose/containers/reply-indicator-container.ts
+++ b/src/features/compose/containers/reply-indicator-container.ts
@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
 
-import { cancelReplyCompose } from 'soapbox/actions/compose';
-import { makeGetStatus } from 'soapbox/selectors';
+import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import ReplyIndicator from '../components/reply-indicator';
+import ReplyIndicator from '../components/reply-indicator.tsx';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
-import type { Status } from 'soapbox/types/entities';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
+import type { Status } from 'soapbox/types/entities.ts';
 
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
diff --git a/src/features/compose/containers/upload-button-container.ts b/src/features/compose/containers/upload-button-container.ts
index 6b2307c93..6ead8ee37 100644
--- a/src/features/compose/containers/upload-button-container.ts
+++ b/src/features/compose/containers/upload-button-container.ts
@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
 
-import { uploadCompose } from 'soapbox/actions/compose';
+import { uploadCompose } from 'soapbox/actions/compose.ts';
 
-import UploadButton from '../components/upload-button';
+import UploadButton from '../components/upload-button.tsx';
 
 import type { IntlShape } from 'react-intl';
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const mapStateToProps = (state: RootState, { composeId }: { composeId: string }) => ({
   disabled: state.compose.get(composeId)?.is_uploading,
diff --git a/src/features/compose/containers/warning-container.tsx b/src/features/compose/containers/warning-container.tsx
index 8ebfd5f8f..66a7d6c21 100644
--- a/src/features/compose/containers/warning-container.tsx
+++ b/src/features/compose/containers/warning-container.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useAppSelector, useCompose, useFeatures, useOwnAccount, useSettingsNotifications } from 'soapbox/hooks';
-import { selectOwnAccount } from 'soapbox/selectors';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
+import { selectOwnAccount } from 'soapbox/selectors/index.ts';
 
-import Warning from '../components/warning';
+import Warning from '../components/warning.tsx';
 
 const APPROX_HASHTAG_RE = /(?:^|[^/)\w])#(\w*[a-zA-Z·]\w*)/i;
 
diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx
index eeb6c1f02..944672ca9 100644
--- a/src/features/compose/editor/index.tsx
+++ b/src/features/compose/editor/index.tsx
@@ -15,17 +15,17 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import clsx from 'clsx';
 import { $createParagraphNode, $createTextNode, $getRoot, type LexicalEditor } from 'lexical';
-import React, { useMemo, useState } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import { useNodes } from './nodes';
-import AutosuggestPlugin from './plugins/autosuggest-plugin';
-import FocusPlugin from './plugins/focus-plugin';
-import RefPlugin from './plugins/ref-plugin';
-import StatePlugin from './plugins/state-plugin';
-import SubmitPlugin from './plugins/submit-plugin';
+import { useNodes } from './nodes/index.ts';
+import AutosuggestPlugin from './plugins/autosuggest-plugin.tsx';
+import FocusPlugin from './plugins/focus-plugin.tsx';
+import RefPlugin from './plugins/ref-plugin.tsx';
+import StatePlugin from './plugins/state-plugin.tsx';
+import SubmitPlugin from './plugins/submit-plugin.tsx';
 
 const LINK_MATCHERS = [
   createLinkMatcherWithRegExp(
@@ -68,7 +68,7 @@ const theme: InitialConfigType['theme'] = {
   },
 };
 
-const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
+const ComposeEditor = forwardRef<LexicalEditor, IComposeEditor>(({
   className,
   placeholderClassName,
   composeId,
diff --git a/src/features/compose/editor/nodes/emoji-node.tsx b/src/features/compose/editor/nodes/emoji-node.tsx
index d773a063c..4c7155d00 100644
--- a/src/features/compose/editor/nodes/emoji-node.tsx
+++ b/src/features/compose/editor/nodes/emoji-node.tsx
@@ -1,8 +1,7 @@
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
-import React from 'react';
 
-import { Emoji as Component } from 'soapbox/components/ui';
-import { isNativeEmoji, type Emoji } from 'soapbox/features/emoji';
+import Component from 'soapbox/components/ui/emoji.tsx';
+import { isNativeEmoji, type Emoji } from 'soapbox/features/emoji/index.ts';
 
 import type {
   EditorConfig,
diff --git a/src/features/compose/editor/nodes/index.ts b/src/features/compose/editor/nodes/index.ts
index 7c7695259..efb47c3c2 100644
--- a/src/features/compose/editor/nodes/index.ts
+++ b/src/features/compose/editor/nodes/index.ts
@@ -7,8 +7,8 @@
 import { HashtagNode } from '@lexical/hashtag';
 import { AutoLinkNode } from '@lexical/link';
 
-import { EmojiNode } from './emoji-node';
-import { MentionNode } from './mention-node';
+import { EmojiNode } from './emoji-node.tsx';
+import { MentionNode } from './mention-node.tsx';
 
 import type { Klass, LexicalNode } from 'lexical';
 
diff --git a/src/features/compose/editor/nodes/mention-node.tsx b/src/features/compose/editor/nodes/mention-node.tsx
index 7ea8646ae..5d8ef036a 100644
--- a/src/features/compose/editor/nodes/mention-node.tsx
+++ b/src/features/compose/editor/nodes/mention-node.tsx
@@ -5,9 +5,8 @@
  */
 
 import { $applyNodeReplacement, DecoratorNode } from 'lexical';
-import React from 'react';
 
-import Mention from 'soapbox/components/mention';
+import Mention from 'soapbox/components/mention.tsx';
 
 import type {
   EditorConfig,
@@ -16,7 +15,7 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
-import type { Mention as MentionEntity } from 'soapbox/schemas';
+import type { Mention as MentionEntity } from 'soapbox/schemas/index.ts';
 
 type SerializedMentionNode = Spread<{
   mention: MentionEntity;
diff --git a/src/features/compose/editor/plugins/autosuggest-plugin.tsx b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
index 834d04721..677e64702 100644
--- a/src/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -22,9 +22,10 @@ import {
   RangeSelection,
   TextNode,
 } from 'lexical';
-import React, {
+import {
   MutableRefObject,
   ReactPortal,
+  startTransition,
   useCallback,
   useEffect,
   useRef,
@@ -32,18 +33,19 @@ import React, {
 } from 'react';
 import ReactDOM from 'react-dom';
 
-import { clearComposeSuggestions, fetchComposeSuggestions } from 'soapbox/actions/compose';
-import { chooseEmoji } from 'soapbox/actions/emojis';
-import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
-import { selectAccount } from 'soapbox/selectors';
-import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
+import { clearComposeSuggestions, fetchComposeSuggestions } from 'soapbox/actions/compose.ts';
+import { chooseEmoji } from 'soapbox/actions/emojis.ts';
+import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions.ts';
 
-import AutosuggestAccount from '../../components/autosuggest-account';
-import { $createEmojiNode } from '../nodes/emoji-node';
-import { $createMentionNode } from '../nodes/mention-node';
+import AutosuggestAccount from '../../components/autosuggest-account.tsx';
+import { $createEmojiNode } from '../nodes/emoji-node.tsx';
+import { $createMentionNode } from '../nodes/mention-node.tsx';
 
-import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
+import type { AutoSuggestion } from 'soapbox/components/autosuggest-input.tsx';
 
 type QueryMatch = {
   leadOffset: number;
@@ -101,14 +103,6 @@ const isSelectionOnEntityBoundary = (
   });
 };
 
-const startTransition = (callback: () => void) => {
-  if (React.startTransition) {
-    React.startTransition(callback);
-  } else {
-    callback();
-  }
-};
-
 // Got from https://stackoverflow.com/a/42543908/2013580
 const getScrollParent = (
   element: HTMLElement,
diff --git a/src/features/compose/editor/plugins/link-plugin.tsx b/src/features/compose/editor/plugins/link-plugin.tsx
index fac30f66c..41a343fb5 100644
--- a/src/features/compose/editor/plugins/link-plugin.tsx
+++ b/src/features/compose/editor/plugins/link-plugin.tsx
@@ -5,7 +5,6 @@
  */
 
 import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
-import * as React from 'react';
 
 // Source: https://stackoverflow.com/a/8234912/2013580
 const urlRegExp = new RegExp(
diff --git a/src/features/compose/editor/plugins/ref-plugin.tsx b/src/features/compose/editor/plugins/ref-plugin.tsx
index b13cea3e1..e91fbc93b 100644
--- a/src/features/compose/editor/plugins/ref-plugin.tsx
+++ b/src/features/compose/editor/plugins/ref-plugin.tsx
@@ -1,9 +1,9 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { LexicalEditor } from 'lexical';
-import React, { useEffect } from 'react';
+import { forwardRef, useEffect } from 'react';
 
 /** Set the ref to the current Lexical editor instance. */
-const RefPlugin = React.forwardRef<LexicalEditor>((_props, ref) => {
+const RefPlugin = forwardRef<LexicalEditor>((_props, ref) => {
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {
diff --git a/src/features/compose/editor/plugins/state-plugin.tsx b/src/features/compose/editor/plugins/state-plugin.tsx
index 06f102b64..6940eeb66 100644
--- a/src/features/compose/editor/plugins/state-plugin.tsx
+++ b/src/features/compose/editor/plugins/state-plugin.tsx
@@ -2,8 +2,8 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { $getRoot } from 'lexical';
 import { useEffect } from 'react';
 
-import { setEditorState } from 'soapbox/actions/compose';
-import { useAppDispatch } from 'soapbox/hooks';
+import { setEditorState } from 'soapbox/actions/compose.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 interface IStatePlugin {
   composeId: string;
diff --git a/src/features/compose/util/counter.ts b/src/features/compose/util/counter.ts
index 6d999a547..407dfe4d1 100644
--- a/src/features/compose/util/counter.ts
+++ b/src/features/compose/util/counter.ts
@@ -1,4 +1,4 @@
-import { urlRegex } from './url-regex';
+import { urlRegex } from './url-regex.ts';
 
 const urlPlaceholder = 'xxxxxxxxxxxxxxxxxxxxxxx';
 
diff --git a/src/features/conversations/components/conversation.tsx b/src/features/conversations/components/conversation.tsx
index 20cbf4d98..7f6866f71 100644
--- a/src/features/conversations/components/conversation.tsx
+++ b/src/features/conversations/components/conversation.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { markConversationRead } from 'soapbox/actions/conversations';
-import StatusContainer from 'soapbox/containers/status-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { selectAccount } from 'soapbox/selectors';
+import { markConversationRead } from 'soapbox/actions/conversations.ts';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
 
 interface IConversation {
   conversationId: string;
diff --git a/src/features/conversations/components/conversations-list.tsx b/src/features/conversations/components/conversations-list.tsx
index 65c2ef3e1..261ded52d 100644
--- a/src/features/conversations/components/conversations-list.tsx
+++ b/src/features/conversations/components/conversations-list.tsx
@@ -1,12 +1,13 @@
 import debounce from 'lodash/debounce';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { expandConversations } from 'soapbox/actions/conversations';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { expandConversations } from 'soapbox/actions/conversations.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import Conversation from './conversation';
+import Conversation from './conversation.tsx';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
 
diff --git a/src/features/conversations/index.tsx b/src/features/conversations/index.tsx
index 1f6774ab9..2c6c64546 100644
--- a/src/features/conversations/index.tsx
+++ b/src/features/conversations/index.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { directComposeById } from 'soapbox/actions/compose';
-import { mountConversations, unmountConversations, expandConversations } from 'soapbox/actions/conversations';
-import { useDirectStream } from 'soapbox/api/hooks';
-import AccountSearch from 'soapbox/components/account-search';
-import { Column } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { directComposeById } from 'soapbox/actions/compose.ts';
+import { mountConversations, unmountConversations, expandConversations } from 'soapbox/actions/conversations.ts';
+import { useDirectStream } from 'soapbox/api/hooks/index.ts';
+import AccountSearch from 'soapbox/components/account-search.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import ConversationsList from './components/conversations-list';
+import ConversationsList from './components/conversations-list.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Direct messages' },
diff --git a/src/features/crypto-donate/components/crypto-address.tsx b/src/features/crypto-donate/components/crypto-address.tsx
index 0c07387eb..d40c83df5 100644
--- a/src/features/crypto-donate/components/crypto-address.tsx
+++ b/src/features/crypto-donate/components/crypto-address.tsx
@@ -1,14 +1,19 @@
-import React from 'react';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import qrcodeIcon from '@tabler/icons/outline/qrcode.svg';
+import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Text, Icon, Stack, HStack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import { getExplorerUrl } from '../utils/block-explorer';
-import { getTitle } from '../utils/coin-db';
+import { getExplorerUrl } from '../utils/block-explorer.ts';
+import { getTitle } from '../utils/coin-db.ts';
 
-import CryptoIcon from './crypto-icon';
+import CryptoIcon from './crypto-icon.tsx';
 
 export interface ICryptoAddress {
   address: string;
@@ -41,13 +46,15 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text weight='bold'>{title || ticker.toUpperCase()}</Text>
 
         <HStack alignItems='center' className='ml-auto'>
-          <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href='#' onClick={handleModalClick}>
-            <Icon src={require('@tabler/icons/outline/qrcode.svg')} size={20} />
-          </a>
+          <Link to={'/'} className='inline-flex'>
+            <button className='!ml-1 space-x-2 !border-none !p-0 !text-gray-500 focus:!ring-transparent focus:ring-offset-0 rtl:ml-0 rtl:mr-1 rtl:space-x-reverse' onClick={handleModalClick}>
+              <SvgIcon src={qrcodeIcon} size={20} />
+            </button>
+          </Link>
 
           {explorerUrl && (
             <a className='ml-1 text-gray-500 rtl:ml-0 rtl:mr-1' href={explorerUrl} target='_blank'>
-              <Icon src={require('@tabler/icons/outline/external-link.svg')} size={20} />
+              <SvgIcon src={externalLinkIcon} size={20} />
             </a>
           )}
         </HStack>
diff --git a/src/features/crypto-donate/components/crypto-donate-panel.tsx b/src/features/crypto-donate/components/crypto-donate-panel.tsx
index b61a7bad1..c74cdd122 100644
--- a/src/features/crypto-donate/components/crypto-donate-panel.tsx
+++ b/src/features/crypto-donate/components/crypto-donate-panel.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Text, Widget } from 'soapbox/components/ui';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-import SiteWallet from './site-wallet';
+import SiteWallet from './site-wallet.tsx';
 
 const messages = defineMessages({
   actionTitle: { id: 'crypto_donate_panel.actions.view', defaultMessage: 'Click to see {count, plural, one {# wallet} other {# wallets}}' },
diff --git a/src/features/crypto-donate/components/crypto-icon.tsx b/src/features/crypto-donate/components/crypto-icon.tsx
index cb18c7633..30218b845 100644
--- a/src/features/crypto-donate/components/crypto-icon.tsx
+++ b/src/features/crypto-donate/components/crypto-icon.tsx
@@ -1,14 +1,11 @@
-import React from 'react';
-
 import genericIcon from 'soapbox/assets/cryptocurrency/generic.svg';
 
+const icons: Record<string, { default: string }> = import.meta.glob('../../../assets/cryptocurrency/*.svg', { eager: true });
+
 /** Get crypto icon URL by ticker symbol, or fall back to generic icon */
 function getIcon(ticker: string): string {
-  try {
-    return new URL(`../../../assets/cryptocurrency/${ticker}.svg`, import.meta.url).href;
-  } catch {
-    return genericIcon;
-  }
+  const iconPath = `../../../assets/cryptocurrency/${ticker}.svg`;
+  return icons[iconPath]?.default || genericIcon;
 }
 
 interface ICryptoIcon {
diff --git a/src/features/crypto-donate/components/detailed-crypto-address.tsx b/src/features/crypto-donate/components/detailed-crypto-address.tsx
index cf2cf9ce5..bf3b4f8c8 100644
--- a/src/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/src/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -1,13 +1,13 @@
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
 import { QRCodeCanvas as QRCode } from 'qrcode.react';
-import React from 'react';
 
-import CopyableInput from 'soapbox/components/copyable-input';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 
-import { getExplorerUrl } from '../utils/block-explorer';
-import { getTitle } from '../utils/coin-db';
+import { getExplorerUrl } from '../utils/block-explorer.ts';
+import { getTitle } from '../utils/coin-db.ts';
 
-import CryptoIcon from './crypto-icon';
+import CryptoIcon from './crypto-icon.tsx';
 
 interface IDetailedCryptoAddress {
   address: string;
@@ -30,7 +30,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
         <div className='font-bold'>{title || ticker.toUpperCase()}</div>
         <div className='ml-auto flex'>
           {explorerUrl && <a className='ml-2 text-gray-400' href={explorerUrl} target='_blank'>
-            <SvgIcon size={20} src={require('@tabler/icons/outline/external-link.svg')} />
+            <SvgIcon size={20} src={externalLinkIcon} />
           </a>}
         </div>
       </div>
diff --git a/src/features/crypto-donate/components/lightning-address.tsx b/src/features/crypto-donate/components/lightning-address.tsx
index aa52d61f3..f0223bd61 100644
--- a/src/features/crypto-donate/components/lightning-address.tsx
+++ b/src/features/crypto-donate/components/lightning-address.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Text, Stack, HStack, Emoji } from 'soapbox/components/ui';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 export interface ILightningAddress {
   address: string;
diff --git a/src/features/crypto-donate/components/site-wallet.tsx b/src/features/crypto-donate/components/site-wallet.tsx
index 0494ecf46..97f920bb8 100644
--- a/src/features/crypto-donate/components/site-wallet.tsx
+++ b/src/features/crypto-donate/components/site-wallet.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-import { Stack } from 'soapbox/components/ui';
-import { useSoapboxConfig } from 'soapbox/hooks';
-
-import CryptoAddress from './crypto-address';
+import CryptoAddress from './crypto-address.tsx';
 
 interface ISiteWallet {
   limit?: number;
diff --git a/src/features/crypto-donate/index.tsx b/src/features/crypto-donate/index.tsx
index cb3fa1f7e..39064aa83 100644
--- a/src/features/crypto-donate/index.tsx
+++ b/src/features/crypto-donate/index.tsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { Accordion, Column, Stack } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import SiteWallet from './components/site-wallet';
+import SiteWallet from './components/site-wallet.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.crypto_donate', defaultMessage: 'Donate Cryptocurrency' },
diff --git a/src/features/delete-account/index.tsx b/src/features/delete-account/index.tsx
index aaeecc789..8b86c5c9a 100644
--- a/src/features/delete-account/index.tsx
+++ b/src/features/delete-account/index.tsx
@@ -1,10 +1,18 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { deleteAccount } from 'soapbox/actions/security';
-import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { deleteAccount } from 'soapbox/actions/security.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' },
@@ -21,16 +29,16 @@ const DeleteAccount = () => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
 
-  const [password, setPassword] = React.useState('');
-  const [isLoading, setLoading] = React.useState(false);
+  const [password, setPassword] = useState('');
+  const [isLoading, setLoading] = useState(false);
 
-  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     event.persist();
 
     setPassword(event.target.value);
   }, []);
 
-  const handleSubmit = React.useCallback(() => {
+  const handleSubmit = useCallback(() => {
     setLoading(true);
     dispatch(deleteAccount(password)).then(() => {
       setPassword('');
diff --git a/src/features/developers/apps/create.tsx b/src/features/developers/apps/create.tsx
index 24e1de995..2c862b846 100644
--- a/src/features/developers/apps/create.tsx
+++ b/src/features/developers/apps/create.tsx
@@ -1,11 +1,20 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
-import { createApp } from 'soapbox/actions/apps';
-import { obtainOAuthToken } from 'soapbox/actions/oauth';
-import { Column, Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { getBaseURL } from 'soapbox/utils/accounts';
+import { createApp } from 'soapbox/actions/apps.ts';
+import { obtainOAuthToken } from 'soapbox/actions/oauth.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { getBaseURL } from 'soapbox/utils/accounts.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.app_create', defaultMessage: 'Create app' },
diff --git a/src/features/developers/components/indicator.tsx b/src/features/developers/components/indicator.tsx
index b4d3a2a06..70a5ce62d 100644
--- a/src/features/developers/components/indicator.tsx
+++ b/src/features/developers/components/indicator.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IIndicator {
   state?: 'active' | 'pending' | 'error' | 'inactive';
diff --git a/src/features/developers/developers-challenge.tsx b/src/features/developers/developers-challenge.tsx
index cc379975e..ea2010389 100644
--- a/src/features/developers/developers-challenge.tsx
+++ b/src/features/developers/developers-challenge.tsx
@@ -1,10 +1,16 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { changeSettingImmediate } from 'soapbox/actions/settings';
-import { Column, Button, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.developers', defaultMessage: 'Developers' },
diff --git a/src/features/developers/developers-menu.tsx b/src/features/developers/developers-menu.tsx
index 185f289b2..bdfc04dfd 100644
--- a/src/features/developers/developers-menu.tsx
+++ b/src/features/developers/developers-menu.tsx
@@ -1,13 +1,21 @@
-import React from 'react';
+import appsIcon from '@tabler/icons/outline/apps.svg';
+import codePlusIcon from '@tabler/icons/outline/code-plus.svg';
+import homeIcon from '@tabler/icons/outline/home.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import moodSadIcon from '@tabler/icons/outline/mood-sad.svg';
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
+import scriptIcon from '@tabler/icons/outline/script.svg';
+import urgentIcon from '@tabler/icons/outline/urgent.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { changeSettingImmediate } from 'soapbox/actions/settings';
-import { Column, Text } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import sourceCode from 'soapbox/utils/code';
+import { changeSettingImmediate } from 'soapbox/actions/settings.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
+import sourceCode from 'soapbox/utils/code.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.developers', defaultMessage: 'Developers' },
@@ -57,7 +65,7 @@ const Developers: React.FC = () => {
       <Column label={intl.formatMessage(messages.heading)}>
         <div className='grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'>
           <DashWidget to='/developers/apps/create'>
-            <SvgIcon src={require('@tabler/icons/outline/apps.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={appsIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -65,7 +73,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/settings_store'>
-            <SvgIcon src={require('@tabler/icons/outline/code-plus.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={codePlusIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -73,7 +81,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/timeline'>
-            <SvgIcon src={require('@tabler/icons/outline/home.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={homeIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@@ -81,7 +89,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error'>
-            <SvgIcon src={require('@tabler/icons/outline/mood-sad.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={moodSadIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -89,7 +97,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/error/network'>
-            <SvgIcon src={require('@tabler/icons/outline/refresh.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={refreshIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@@ -97,7 +105,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget to='/developers/sw'>
-            <SvgIcon src={require('@tabler/icons/outline/script.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={scriptIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.service_worker_label' defaultMessage='Service Worker' />
@@ -105,7 +113,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={leaveDevelopers}>
-            <SvgIcon src={require('@tabler/icons/outline/logout.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={logoutIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
@@ -113,7 +121,7 @@ const Developers: React.FC = () => {
           </DashWidget>
 
           <DashWidget onClick={showToast}>
-            <SvgIcon src={require('@tabler/icons/outline/urgent.svg')} className='text-gray-700 dark:text-gray-600' />
+            <SvgIcon src={urgentIcon} className='text-gray-700 dark:text-gray-600' />
 
             <Text>
               <FormattedMessage id='developers.navigation.show_toast' defaultMessage='Trigger Toast' />
diff --git a/src/features/developers/index.tsx b/src/features/developers/index.tsx
index 378207e46..12615db7b 100644
--- a/src/features/developers/index.tsx
+++ b/src/features/developers/index.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { useAppSelector } from 'soapbox/hooks';
-
-import DevelopersChallenge from './developers-challenge';
-import DevelopersMenu from './developers-menu';
+import DevelopersChallenge from './developers-challenge.tsx';
+import DevelopersMenu from './developers-menu.tsx';
 
 const Developers: React.FC = () => {
   const isDeveloper = useAppSelector((state) => getSettings(state).get('isDeveloper'));
diff --git a/src/features/developers/service-worker-info.tsx b/src/features/developers/service-worker-info.tsx
index 69f36bac6..6cb1c2cc3 100644
--- a/src/features/developers/service-worker-info.tsx
+++ b/src/features/developers/service-worker-info.tsx
@@ -1,11 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import List, { ListItem } from 'soapbox/components/list';
-import { HStack, Text, Column, FormActions, Button, Stack, Icon } from 'soapbox/components/ui';
-import { unregisterSW } from 'soapbox/utils/sw';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { unregisterSW } from 'soapbox/utils/sw.ts';
 
-import Indicator from './components/indicator';
+import Indicator from './components/indicator.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.developers.service_worker', defaultMessage: 'Service Worker' },
@@ -120,7 +127,7 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
                 <span className='truncate'>{url}</span>
                 <Icon
                   className='size-4'
-                  src={require('@tabler/icons/outline/external-link.svg')}
+                  src={externalLinkIcon}
                 />
               </a>
             </ListItem>
diff --git a/src/features/developers/settings-store.tsx b/src/features/developers/settings-store.tsx
index 828ee8d42..ce4e04d66 100644
--- a/src/features/developers/settings-store.tsx
+++ b/src/features/developers/settings-store.tsx
@@ -1,22 +1,21 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { FE_NAME, SETTINGS_UPDATE, changeSetting } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
-import {
-  CardHeader,
-  CardTitle,
-  Column,
-  Button,
-  Form,
-  FormActions,
-  FormGroup,
-  Textarea,
-} from 'soapbox/components/ui';
-import SettingToggle from 'soapbox/features/notifications/components/setting-toggle';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { patchMe } from 'soapbox/actions/me.ts';
+import { FE_NAME, SETTINGS_UPDATE, changeSetting } from 'soapbox/actions/settings.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Button } from 'soapbox/components/ui/button.tsx';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import toast from 'soapbox/toast.tsx';
 
 const isJSONValid = (text: any): boolean => {
   try {
diff --git a/src/features/direct-timeline/index.tsx b/src/features/direct-timeline/index.tsx
index ba8ba1cb0..0fbe55d00 100644
--- a/src/features/direct-timeline/index.tsx
+++ b/src/features/direct-timeline/index.tsx
@@ -1,14 +1,15 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { directComposeById } from 'soapbox/actions/compose';
-import { expandDirectTimeline } from 'soapbox/actions/timelines';
-import { useDirectStream } from 'soapbox/api/hooks';
-import AccountSearch from 'soapbox/components/account-search';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { directComposeById } from 'soapbox/actions/compose.ts';
+import { expandDirectTimeline } from 'soapbox/actions/timelines.ts';
+import { useDirectStream } from 'soapbox/api/hooks/index.ts';
+import AccountSearch from 'soapbox/components/account-search.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.direct', defaultMessage: 'Direct messages' },
diff --git a/src/features/directory/components/account-card.tsx b/src/features/directory/components/account-card.tsx
index 3e28821b1..721d4fc83 100644
--- a/src/features/directory/components/account-card.tsx
+++ b/src/features/directory/components/account-card.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import Badge from 'soapbox/components/badge';
-import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Stack, Text } from 'soapbox/components/ui';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import { useAppSelector } from 'soapbox/hooks';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import Badge from 'soapbox/components/badge.tsx';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import ActionButton from 'soapbox/features/ui/components/action-button.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IAccountCard {
   id: string;
diff --git a/src/features/directory/index.tsx b/src/features/directory/index.tsx
index 1af516140..6b507c3a4 100644
--- a/src/features/directory/index.tsx
+++ b/src/features/directory/index.tsx
@@ -1,14 +1,20 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 
-import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
-import LoadMore from 'soapbox/components/load-more';
-import { Column, RadioButton, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
+import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory.ts';
+import LoadMore from 'soapbox/components/load-more.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import RadioButton from 'soapbox/components/ui/radio-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import AccountCard from './components/account-card';
+import AccountCard from './components/account-card.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
diff --git a/src/features/domain-blocks/index.tsx b/src/features/domain-blocks/index.tsx
index cf8978ad9..9b6ac6e88 100644
--- a/src/features/domain-blocks/index.tsx
+++ b/src/features/domain-blocks/index.tsx
@@ -1,12 +1,14 @@
 import debounce from 'lodash/debounce';
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { fetchDomainBlocks, expandDomainBlocks } from 'soapbox/actions/domain-blocks';
-import Domain from 'soapbox/components/domain';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchDomainBlocks, expandDomainBlocks } from 'soapbox/actions/domain-blocks.ts';
+import Domain from 'soapbox/components/domain.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.domain_blocks', defaultMessage: 'Hidden domains' },
@@ -24,7 +26,7 @@ const DomainBlocks: React.FC = () => {
   const domains = useAppSelector((state) => state.domain_lists.blocks.items);
   const hasMore = useAppSelector((state) => !!state.domain_lists.blocks.next);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchDomainBlocks());
   }, []);
 
diff --git a/src/features/edit-email/index.tsx b/src/features/edit-email/index.tsx
index 70d511ce1..462ddba55 100644
--- a/src/features/edit-email/index.tsx
+++ b/src/features/edit-email/index.tsx
@@ -1,10 +1,15 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeEmail } from 'soapbox/actions/security';
-import { Button, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { changeEmail } from 'soapbox/actions/security.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   header: { id: 'edit_email.header', defaultMessage: 'Change Email' },
@@ -23,18 +28,18 @@ const EditEmail = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [state, setState] = React.useState(initialState);
-  const [isLoading, setLoading] = React.useState(false);
+  const [state, setState] = useState(initialState);
+  const [isLoading, setLoading] = useState(false);
 
   const { email, password } = state;
 
-  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((event) => {
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
     event.persist();
 
     setState((prevState) => ({ ...prevState, [event.target.name]: event.target.value }));
   }, []);
 
-  const handleSubmit = React.useCallback(() => {
+  const handleSubmit = useCallback(() => {
     setLoading(true);
     dispatch(changeEmail(email, password)).then(() => {
       setState(initialState);
diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index e124316b6..451dc16af 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -1,15 +1,29 @@
+import atIcon from '@tabler/icons/outline/at.svg';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { changeSetting } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, CardHeader, CardTitle, Column, Emoji, Form, HStack, Icon, Input, Textarea, Tooltip } from 'soapbox/components/ui';
-import { useApi, useAppDispatch, useInstance, useOwnAccount, useSettings } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import { adminAccountSchema } from 'soapbox/schemas/admin-account';
-import toast from 'soapbox/toast';
+import { patchMe } from 'soapbox/actions/me.ts';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { adminAccountSchema } from 'soapbox/schemas/admin-account.ts';
+import toast from 'soapbox/toast.tsx';
 
 interface IEditIdentity {
 }
@@ -169,7 +183,7 @@ const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
       placeholder={intl.formatMessage(messages.username)}
       append={(
         <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
-          <Icon className='size-4' src={require('@tabler/icons/outline/at.svg')} />
+          <Icon className='size-4' src={atIcon} />
           <span>{instance.domain}</span>
         </HStack>
       )}
diff --git a/src/features/edit-password/index.tsx b/src/features/edit-password/index.tsx
index 7761f77a2..6ef9ba123 100644
--- a/src/features/edit-password/index.tsx
+++ b/src/features/edit-password/index.tsx
@@ -1,10 +1,15 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changePassword } from 'soapbox/actions/security';
-import { Button, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { changePassword } from 'soapbox/actions/security.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   updatePasswordSuccess: { id: 'security.update_password.success', defaultMessage: 'Password successfully updated.' },
@@ -23,20 +28,20 @@ const EditPassword = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [state, setState] = React.useState(initialState);
-  const [isLoading, setLoading] = React.useState(false);
+  const [state, setState] = useState(initialState);
+  const [isLoading, setLoading] = useState(false);
 
   const { currentPassword, newPassword, newPasswordConfirmation } = state;
 
   const resetState = () => setState(initialState);
 
-  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((event) => {
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
     event.persist();
 
     setState((prevState) => ({ ...prevState, [event.target.name]: event.target.value }));
   }, []);
 
-  const handleSubmit = React.useCallback(() => {
+  const handleSubmit = useCallback(() => {
     setLoading(true);
     dispatch(changePassword(currentPassword, newPassword, newPasswordConfirmation)).then(() => {
       resetState();
diff --git a/src/features/edit-profile/components/avatar-picker.tsx b/src/features/edit-profile/components/avatar-picker.tsx
index 7e0a8e0fb..99673476b 100644
--- a/src/features/edit-profile/components/avatar-picker.tsx
+++ b/src/features/edit-profile/components/avatar-picker.tsx
@@ -1,9 +1,12 @@
+import cameraPlusIcon from '@tabler/icons/outline/camera-plus.svg';
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Icon, HStack } from 'soapbox/components/ui';
-import { useDraggedFiles } from 'soapbox/hooks';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
 
 interface IMediaInput {
   className?: string;
@@ -13,7 +16,7 @@ interface IMediaInput {
   disabled?: boolean;
 }
 
-const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ className, src, onChange, accept, disabled }, ref) => {
+const AvatarPicker = forwardRef<HTMLInputElement, IMediaInput>(({ className, src, onChange, accept, disabled }, ref) => {
   const picker = useRef<HTMLLabelElement>(null);
 
   const { isDragging, isDraggedOver } = useDraggedFiles(picker, (files) => {
@@ -43,7 +46,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ classNam
         })}
       >
         <Icon
-          src={require('@tabler/icons/outline/camera-plus.svg')}
+          src={cameraPlusIcon}
           className='size-5 text-white'
         />
       </HStack>
diff --git a/src/features/edit-profile/components/header-picker.tsx b/src/features/edit-profile/components/header-picker.tsx
index bf27afc17..0a510e2de 100644
--- a/src/features/edit-profile/components/header-picker.tsx
+++ b/src/features/edit-profile/components/header-picker.tsx
@@ -1,9 +1,14 @@
+import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
-import { useDraggedFiles } from 'soapbox/hooks';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
 
 const messages = defineMessages({
   title: { id: 'group.upload_banner.title', defaultMessage: 'Upload background picture' },
@@ -17,7 +22,7 @@ interface IMediaInput {
   disabled?: boolean;
 }
 
-const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, onClear, accept, disabled }, ref) => {
+const HeaderPicker = forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, onClear, accept, disabled }, ref) => {
   const intl = useIntl();
 
   const picker = useRef<HTMLLabelElement>(null);
@@ -55,7 +60,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
         justifyContent='center'
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-plus.svg')}
+          src={photoPlusIcon}
           className='size-4.5'
         />
 
@@ -76,7 +81,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
       {onClear && src && (
         <IconButton
           onClick={handleClear}
-          src={require('@tabler/icons/outline/x.svg')}
+          src={xIcon}
           theme='dark'
           className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900'
           iconClassName='h-5 w-5'
diff --git a/src/features/edit-profile/index.tsx b/src/features/edit-profile/index.tsx
index f5268196a..5127fa7cd 100644
--- a/src/features/edit-profile/index.tsx
+++ b/src/features/edit-profile/index.tsx
@@ -1,32 +1,34 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { updateNotificationSettings } from 'soapbox/actions/accounts';
-import { patchMe } from 'soapbox/actions/me';
-import BirthdayInput from 'soapbox/components/birthday-input';
-import List, { ListItem } from 'soapbox/components/list';
-import {
-  Button,
-  Column,
-  Form,
-  FormActions,
-  FormGroup,
-  HStack,
-  Input,
-  Streamfield,
-  Textarea,
-  Toggle,
-} from 'soapbox/components/ui';
-import { useAppDispatch, useOwnAccount, useFeatures, useInstance, useAppSelector } from 'soapbox/hooks';
-import { useImageField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
-import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
+import { updateNotificationSettings } from 'soapbox/actions/accounts.ts';
+import { patchMe } from 'soapbox/actions/me.ts';
+import BirthdayInput from 'soapbox/components/birthday-input.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Button } from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Streamfield from 'soapbox/components/ui/streamfield.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useImageField } from 'soapbox/hooks/forms/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
-import AvatarPicker from './components/avatar-picker';
-import HeaderPicker from './components/header-picker';
+import AvatarPicker from './components/avatar-picker.tsx';
+import HeaderPicker from './components/header-picker.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import type { Account } from 'soapbox/schemas';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
 const nonDefaultHeader = (url: string | undefined) => url && isDefaultHeader(url) ? undefined : url;
diff --git a/src/features/email-confirmation/index.tsx b/src/features/email-confirmation/index.tsx
index 3088e5b41..5be0f39ff 100644
--- a/src/features/email-confirmation/index.tsx
+++ b/src/features/email-confirmation/index.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
-import { confirmChangedEmail } from 'soapbox/actions/security';
-import { Spinner } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import { buildErrorMessage } from 'soapbox/utils/errors';
+import { confirmChangedEmail } from 'soapbox/actions/security.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
+import { buildErrorMessage } from 'soapbox/utils/errors.ts';
 
 const Statuses = {
   IDLE: 'IDLE',
@@ -24,9 +24,9 @@ const EmailConfirmation = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const [status, setStatus] = React.useState(Statuses.IDLE);
+  const [status, setStatus] = useState(Statuses.IDLE);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (token) {
       dispatch(confirmChangedEmail(token))
         .then(() => {
@@ -39,14 +39,7 @@ const EmailConfirmation = () => {
 
           if (error.response.data.error) {
             const message = buildErrorMessage(error.response.data.error);
-
-            toast.error(
-              message,
-              // intl.formatMessage({
-              //   id: 'email_confirmation.fail',
-              //   defaultMessage,
-              // }),
-            );
+            toast.error(message);
           }
         });
     }
diff --git a/src/features/embedded-status/index.tsx b/src/features/embedded-status/index.tsx
index ed97170cf..f204a6abe 100644
--- a/src/features/embedded-status/index.tsx
+++ b/src/features/embedded-status/index.tsx
@@ -1,14 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { fetchStatus } from 'soapbox/actions/statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import SiteLogo from 'soapbox/components/site-logo';
-import Status from 'soapbox/components/status';
-import { Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { iframeId } from 'soapbox/iframe';
-import { makeGetStatus } from 'soapbox/selectors';
+import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import SiteLogo from 'soapbox/components/site-logo.tsx';
+import Status from 'soapbox/components/status.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { iframeId } from 'soapbox/iframe.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IEmbeddedStatus {
   params: {
diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index f3167f61b..fcc9c05c3 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -1,17 +1,18 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useEffect, useState, useLayoutEffect, Suspense } from 'react';
+import { useEffect, useState, useLayoutEffect, Suspense } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
-import { chooseEmoji } from 'soapbox/actions/emojis';
-import { changeSetting } from 'soapbox/actions/settings';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
-import { RootState } from 'soapbox/store';
+import { chooseEmoji } from 'soapbox/actions/emojis.ts';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import { buildCustomEmojis } from 'soapbox/features/emoji/index.ts';
+import { EmojiPicker } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
+import { RootState } from 'soapbox/store.ts';
 
-import { buildCustomEmojis } from '../../emoji';
-import { EmojiPicker } from '../../ui/util/async-components';
-
-import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
+import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji/index.ts';
 
 export const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
diff --git a/src/features/emoji/components/emoji-picker.tsx b/src/features/emoji/components/emoji-picker.tsx
index 6dd2b8064..74cdc5d0f 100644
--- a/src/features/emoji/components/emoji-picker.tsx
+++ b/src/features/emoji/components/emoji-picker.tsx
@@ -1,13 +1,12 @@
+import spriteSheet from 'emoji-datasource/img/twitter/sheets/32.png';
 import { Picker as EmojiPicker } from 'emoji-mart';
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
-import { joinPublicPath } from 'soapbox/utils/static';
+import { joinPublicPath } from 'soapbox/utils/static.ts';
 
-import data from '../data';
+import data from '../data.ts';
 
-const getSpritesheetURL = (set: string) => {
-  return require('emoji-datasource/img/twitter/sheets/32.png');
-};
+const getSpritesheetURL = () => spriteSheet;
 
 const getImageURL = (set: string, name: string) => {
   return joinPublicPath(`/packs/emoji/${name}.svg`);
diff --git a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index 51ade8de2..235e6c2a5 100644
--- a/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -1,13 +1,14 @@
 import { useFloating, shift } from '@floating-ui/react';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
 import clsx from 'clsx';
-import React, { KeyboardEvent, useState } from 'react';
+import { KeyboardEvent, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { IconButton } from 'soapbox/components/ui';
-import { useClickOutside } from 'soapbox/hooks';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
 
-import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
+import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown.tsx';
 
 export const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -40,7 +41,7 @@ const EmojiPickerDropdownContainer = (
           'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
         })}
         ref={refs.setReference}
-        src={require('@tabler/icons/outline/mood-happy.svg')}
+        src={moodHappyIcon}
         title={title}
         aria-label={title}
         aria-expanded={visible}
diff --git a/src/features/emoji/index.test.ts b/src/features/emoji/index.test.ts
index 852181044..d65b4fd0d 100644
--- a/src/features/emoji/index.test.ts
+++ b/src/features/emoji/index.test.ts
@@ -1,4 +1,6 @@
-import emojify from '.';
+import { describe, expect, it } from 'vitest';
+
+import emojify from './index.ts';
 
 describe('emoji', () => {
   describe('.emojify', () => {
diff --git a/src/features/emoji/index.ts b/src/features/emoji/index.ts
index 58464cb14..2c4995dae 100644
--- a/src/features/emoji/index.ts
+++ b/src/features/emoji/index.ts
@@ -1,8 +1,8 @@
 import split from 'graphemesplit';
 
-import unicodeMapping from './mapping';
+import unicodeMapping from './mapping.ts';
 
-import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data';
+import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data.ts';
 
 /*
  * TODO: Consolate emoji object types
diff --git a/src/features/emoji/mapping.ts b/src/features/emoji/mapping.ts
index bc769618d..882d68eeb 100644
--- a/src/features/emoji/mapping.ts
+++ b/src/features/emoji/mapping.ts
@@ -1,4 +1,4 @@
-import data, { EmojiData } from './data';
+import data, { EmojiData } from './data.ts';
 
 const stripLeadingZeros = /^0+/;
 interface UnicodeMap {
diff --git a/src/features/emoji/search.test.ts b/src/features/emoji/search.test.ts
index 40c71df6c..fb64cbbc4 100644
--- a/src/features/emoji/search.test.ts
+++ b/src/features/emoji/search.test.ts
@@ -1,7 +1,8 @@
 import { List, Map } from 'immutable';
 import pick from 'lodash/pick';
+import { describe, expect, it } from 'vitest';
 
-import search, { addCustomToPool } from './search';
+import search, { addCustomToPool } from './search.ts';
 
 const trimEmojis = (emoji: any) => pick(emoji, ['id', 'unified', 'native', 'custom']);
 
diff --git a/src/features/emoji/search.ts b/src/features/emoji/search.ts
index 21e376f70..695a2ae37 100644
--- a/src/features/emoji/search.ts
+++ b/src/features/emoji/search.ts
@@ -2,9 +2,9 @@
 import Index from '@akryum/flexsearch-es';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
-import data from './data';
+import data from './data.ts';
 
-import type { Emoji } from './index';
+import type { Emoji } from './index.ts';
 
 // @ts-ignore Wrong default export.
 const index: Index.Index = new Index({
diff --git a/src/features/event/components/event-action-button.tsx b/src/features/event/components/event-action-button.tsx
index 413942eed..ffcd99460 100644
--- a/src/features/event/components/event-action-button.tsx
+++ b/src/features/event/components/event-action-button.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import checkIcon from '@tabler/icons/outline/check.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { joinEvent, leaveEvent } from 'soapbox/actions/events';
-import { openModal } from 'soapbox/actions/modals';
-import { Button } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { joinEvent, leaveEvent } from 'soapbox/actions/events.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles';
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { ButtonThemes } from 'soapbox/components/ui/useButtonStyles.ts';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   leaveConfirm: { id: 'confirmations.leave_event.confirm', defaultMessage: 'Leave event' },
@@ -70,14 +72,14 @@ const EventActionButton: React.FC<IEventAction> = ({ status, theme = 'secondary'
   switch (event.join_state) {
     case 'accept':
       buttonLabel = <FormattedMessage id='event.join_state.accept' defaultMessage='Going' />;
-      buttonIcon = require('@tabler/icons/outline/check.svg');
+      buttonIcon = checkIcon;
       break;
     case 'pending':
       buttonLabel = <FormattedMessage id='event.join_state.pending' defaultMessage='Pending' />;
       break;
     case 'reject':
       buttonLabel = <FormattedMessage id='event.join_state.rejected' defaultMessage='Going' />;
-      buttonIcon = require('@tabler/icons/outline/ban.svg');
+      buttonIcon = banIcon;
       buttonDisabled = true;
       break;
     default:
diff --git a/src/features/event/components/event-date.tsx b/src/features/event/components/event-date.tsx
index 978f49213..dc28baa19 100644
--- a/src/features/event/components/event-date.tsx
+++ b/src/features/event/components/event-date.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
 import { FormattedDate } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { HStack } from 'soapbox/components/ui';
+import Icon from 'soapbox/components/icon.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IEventDate {
   status: StatusEntity;
@@ -50,7 +50,7 @@ const EventDate: React.FC<IEventDate> = ({ status }) => {
 
   return (
     <HStack alignItems='center' space={2}>
-      <Icon src={require('@tabler/icons/outline/calendar.svg')} />
+      <Icon src={calendarIcon} />
       <span>{date}</span>
     </HStack>
   );
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index cd21a2565..2be5a25ec 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -1,34 +1,63 @@
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
+import atIcon from '@tabler/icons/outline/at.svg';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import bookmarkOffIcon from '@tabler/icons/outline/bookmark-off.svg';
+import bookmarkIcon from '@tabler/icons/outline/bookmark.svg';
+import calendarPlusIcon from '@tabler/icons/outline/calendar-plus.svg';
+import circleXIcon from '@tabler/icons/outline/circle-x.svg';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import flag3Icon from '@tabler/icons/outline/flag-3.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
+import quoteIcon from '@tabler/icons/outline/quote.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import usersIcon from '@tabler/icons/outline/users.svg';
 import { List as ImmutableList } from 'immutable';
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { blockAccount } from 'soapbox/actions/accounts';
-import { launchChat } from 'soapbox/actions/chats';
-import { directCompose, mentionCompose, quoteCompose } from 'soapbox/actions/compose';
-import { editEvent, fetchEventIcs } from 'soapbox/actions/events';
-import { toggleBookmark, togglePin, toggleReblog } from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
-import { initMuteModal } from 'soapbox/actions/mutes';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import { deleteStatus } from 'soapbox/actions/statuses';
-import Icon from 'soapbox/components/icon';
-import StillImage from 'soapbox/components/still-image';
-import { Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList, Stack, Text } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppDispatch, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks';
-import copy from 'soapbox/utils/copy';
-import { download } from 'soapbox/utils/download';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { blockAccount } from 'soapbox/actions/accounts.ts';
+import { launchChat } from 'soapbox/actions/chats.ts';
+import { directCompose, mentionCompose, quoteCompose } from 'soapbox/actions/compose.ts';
+import { editEvent, fetchEventIcs } from 'soapbox/actions/events.ts';
+import { toggleBookmark, togglePin, toggleReblog } from 'soapbox/actions/interactions.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation.tsx';
+import { initMuteModal } from 'soapbox/actions/mutes.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { deleteStatus } from 'soapbox/actions/statuses.ts';
+import StillImage from 'soapbox/components/still-image.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui/menu.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import copy from 'soapbox/utils/copy.ts';
+import { download } from 'soapbox/utils/download.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import PlaceholderEventHeader from '../../placeholder/components/placeholder-event-header';
-import EventActionButton from '../components/event-action-button';
-import EventDate from '../components/event-date';
+import PlaceholderEventHeader from '../../placeholder/components/placeholder-event-header.tsx';
+import EventActionButton from '../components/event-action-button.tsx';
+import EventDate from '../components/event-date.tsx';
 
-import type { Menu as MenuType } from 'soapbox/components/dropdown-menu';
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Menu as MenuType } from 'soapbox/components/dropdown-menu/index.ts';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   bannerHeader: { id: 'event.banner', defaultMessage: 'Event banner' },
@@ -136,7 +165,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const handleDeleteClick = () => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
       confirm: intl.formatMessage(messages.deleteConfirm),
@@ -162,7 +191,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
   const handleBlockClick = () => {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/ban.svg'),
+      icon: banIcon,
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
       message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>{/* eslint-disable-line formatjs/no-literal-string-in-jsx */}@{account.acct}</strong> }} />,
       confirm: intl.formatMessage(messages.blockConfirm),
@@ -202,19 +231,19 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       {
         text: intl.formatMessage(messages.exportIcs),
         action: handleExportClick,
-        icon: require('@tabler/icons/outline/calendar-plus.svg'),
+        icon: calendarPlusIcon,
       },
       {
         text: intl.formatMessage(messages.copy),
         action: handleCopy,
-        icon: require('@tabler/icons/outline/link.svg'),
+        icon: linkIcon,
       },
     ];
 
     if (features.federating && !account.local) {
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
-        icon: require('@tabler/icons/outline/external-link.svg'),
+        icon: externalLinkIcon,
         href: status.uri,
         target: '_blank',
       });
@@ -226,7 +255,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: handleBookmarkClick,
-        icon: status.bookmarked ? require('@tabler/icons/outline/bookmark-off.svg') : require('@tabler/icons/outline/bookmark.svg'),
+        icon: status.bookmarked ? bookmarkOffIcon : bookmarkIcon,
       });
     }
 
@@ -234,14 +263,14 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(status.reblogged ? messages.unreblog : messages.reblog),
         action: handleReblogClick,
-        icon: require('@tabler/icons/outline/repeat.svg'),
+        icon: repeatIcon,
       });
 
       if (features.quotePosts) {
         menu.push({
           text: intl.formatMessage(messages.quotePost),
           action: handleQuoteClick,
-          icon: require('@tabler/icons/outline/quote.svg'),
+          icon: quoteIcon,
         });
       }
     }
@@ -253,34 +282,34 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: handlePinClick,
-          icon: status.pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg'),
+          icon: status.pinned ? pinnedOffIcon : pinIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: handleDeleteClick,
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         destructive: true,
       });
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: handleMentionClick,
-        icon: require('@tabler/icons/outline/at.svg'),
+        icon: atIcon,
       });
 
       if (status.getIn(['account', 'pleroma', 'accepts_chat_messages']) === true) {
         menu.push({
           text: intl.formatMessage(messages.chat, { name: username }),
           action: handleChatClick,
-          icon: require('@tabler/icons/outline/messages.svg'),
+          icon: messagesIcon,
         });
       } else if (features.privacyScopes) {
         menu.push({
           text: intl.formatMessage(messages.direct, { name: username }),
           action: handleDirectClick,
-          icon: require('@tabler/icons/outline/mail.svg'),
+          icon: mailIcon,
         });
       }
 
@@ -288,17 +317,17 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: handleMuteClick,
-        icon: require('@tabler/icons/outline/circle-x.svg'),
+        icon: circleXIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.block, { name: username }),
         action: handleBlockClick,
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
       });
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: handleReport,
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
       });
     }
 
@@ -308,28 +337,28 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
       menu.push({
         text: intl.formatMessage(messages.adminAccount, { name: account.username }),
         action: handleModerate,
-        icon: require('@tabler/icons/outline/gavel.svg'),
+        icon: gavelIcon,
       });
 
       if (isAdmin) {
         menu.push({
           text: intl.formatMessage(messages.adminStatus),
           action: handleModerateStatus,
-          icon: require('@tabler/icons/outline/pencil.svg'),
+          icon: pencilIcon,
         });
       }
 
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/outline/alert-triangle.svg'),
+        icon: alertTriangleIcon,
       });
 
       if (account.id !== ownAccount?.id) {
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: handleDeleteStatus,
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           destructive: true,
         });
       }
@@ -378,7 +407,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           <Menu>
             <MenuButton
               as={IconButton}
-              src={require('@tabler/icons/outline/dots.svg')}
+              src={dotsIcon}
               theme='outlined'
               className='h-[30px] px-2'
               iconClassName='h-4 w-4'
@@ -421,7 +450,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
 
         <Stack space={1}>
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/flag-3.svg')} />
+            <SvgIcon src={flag3Icon} />
             <span>
               <FormattedMessage
                 id='event.organized_by'
@@ -441,26 +470,28 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
           </HStack>
 
           <HStack alignItems='center' space={2}>
-            <Icon src={require('@tabler/icons/outline/users.svg')} />
-            <a href='#' className='hover:underline' onClick={handleParticipantsClick}>
-              <span>
-                <FormattedMessage
-                  id='event.participants'
-                  defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
-                  values={{
-                    rawCount: event.participants_count || 0,
-                    count: shortNumberFormat(event.participants_count || 0),
-                  }}
-                />
-              </span>
-            </a>
+            <SvgIcon src={usersIcon} />
+            <Link to={'/'} className='inline-flex'>
+              <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleParticipantsClick}>
+                <span>
+                  <FormattedMessage
+                    id='event.participants'
+                    defaultMessage='{count} {rawCount, plural, one {person} other {people}} going'
+                    values={{
+                      rawCount: event.participants_count || 0,
+                      count: shortNumberFormat(event.participants_count || 0),
+                    }}
+                  />
+                </span>
+              </button>
+            </Link>
           </HStack>
 
           <EventDate status={status} />
 
           {event.location && (
             <HStack alignItems='center' space={2}>
-              <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+              <SvgIcon src={mapPinIcon} />
               <span>
                 {event.location.get('name')}
               </span>
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx
index 93d7168ef..0e15e22c7 100644
--- a/src/features/event/event-discussion.tsx
+++ b/src/features/event/event-discussion.tsx
@@ -1,25 +1,26 @@
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { eventDiscussionCompose } from 'soapbox/actions/compose';
-import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import Tombstone from 'soapbox/components/tombstone';
-import { Stack } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import PendingStatus from 'soapbox/features/ui/components/pending-status';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { eventDiscussionCompose } from 'soapbox/actions/compose.ts';
+import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Tombstone from 'soapbox/components/tombstone.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import ComposeForm from '../compose/components/compose-form';
-import { getDescendantsIds } from '../status/components/thread';
-import ThreadStatus from '../status/components/thread-status';
+import ComposeForm from '../compose/components/compose-form.tsx';
+import ThreadStatus from '../status/components/thread-status.tsx';
+import { getDescendantsIds } from '../status/components/thread.tsx';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities.ts';
 
 type RouteParams = { statusId: string };
 
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index d84d6096b..95796b934 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -1,19 +1,29 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { fetchStatus } from 'soapbox/actions/statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusContent from 'soapbox/components/status-content';
-import StatusMedia from 'soapbox/components/status-media';
-import TranslateButton from 'soapbox/components/translate-button';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
-import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
-import { defaultMediaVisibility } from 'soapbox/utils/status';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusMedia from 'soapbox/components/status-media.tsx';
+import TranslateButton from 'soapbox/components/translate-button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
+import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 type RouteParams = { statusId: string };
 
@@ -47,7 +57,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
     setShowMedia(!showMedia);
   };
 
-  const handleShowMap: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+  const handleShowMap: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
 
     dispatch(openModal('EVENT_MAP', {
@@ -61,16 +71,16 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
     if (!event.location) return null;
 
     const text = [
-      <React.Fragment key='event-name'>
+      <Fragment key='event-name'>
         {event.location.get('name')}
-      </React.Fragment>,
+      </Fragment>,
     ];
 
     if (event.location.get('street')?.trim()) {
       text.push (
-        <React.Fragment key='event-street'>
+        <Fragment key='event-street'>
           <br />{event.location.get('street')}
-        </React.Fragment>,
+        </Fragment>,
       );
     }
 
@@ -78,21 +88,23 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
 
     if (address) {
       text.push(
-        <React.Fragment key='event-address'>
+        <Fragment key='event-address'>
           <br />
           {address}
-        </React.Fragment>,
+        </Fragment>,
       );
     }
 
     if (tileServer && event.location.get('latitude')) {
       text.push(
-        <React.Fragment key='event-map'>
+        <Fragment key='event-map'>
           <br />
-          <a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
-            <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
-          </a>
-        </React.Fragment>,
+          <Link to={'/'} className='inline-flex'>
+            <button className='space-x-2 !border-none !p-0 !text-primary-600 hover:!underline focus:!ring-transparent focus:ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={handleShowMap}>
+              <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
+            </button>
+          </Link>
+        </Fragment>,
       );
     }
 
@@ -102,7 +114,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.location' defaultMessage='Location' />
         </Text>
         <HStack space={2} alignItems='center'>
-          <Icon src={require('@tabler/icons/outline/map-pin.svg')} />
+          <Icon src={mapPinIcon} />
           <Text>{text}</Text>
         </HStack>
       </Stack>
@@ -125,7 +137,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
           <FormattedMessage id='event.date' defaultMessage='Date' />
         </Text>
         <HStack space={2} alignItems='center'>
-          <Icon src={require('@tabler/icons/outline/calendar.svg')} />
+          <Icon src={calendarIcon} />
           <Text>
             <FormattedDate
               value={startDate}
@@ -165,7 +177,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
 
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
-            <Icon src={require('@tabler/icons/outline/link.svg')} />
+            <Icon src={linkIcon} />
             <a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
               {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
             </a>
diff --git a/src/features/events/components/event-carousel.tsx b/src/features/events/components/event-carousel.tsx
index 85768ff07..1bf4846bd 100644
--- a/src/features/events/components/event-carousel.tsx
+++ b/src/features/events/components/event-carousel.tsx
@@ -1,13 +1,16 @@
-import React, { useCallback, useState } from 'react';
+import chevronLeftIcon from '@tabler/icons/outline/chevron-left.svg';
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
+import { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
 
-import EventPreview from 'soapbox/components/event-preview';
-import { Card, Icon } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import EventPreview from 'soapbox/components/event-preview.tsx';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import PlaceholderEventPreview from '../../placeholder/components/placeholder-event-preview';
+import PlaceholderEventPreview from '../../placeholder/components/placeholder-event-preview.tsx';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
@@ -59,7 +62,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index - 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={chevronLeftIcon} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
@@ -72,7 +75,7 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
             onClick={() => handleChangeIndex(index + 1)}
             className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
+            <Icon src={chevronRightIcon} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
diff --git a/src/features/events/index.tsx b/src/features/events/index.tsx
index 831712ccf..0c735817c 100644
--- a/src/features/events/index.tsx
+++ b/src/features/events/index.tsx
@@ -1,12 +1,16 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events';
-import { openModal } from 'soapbox/actions/modals';
-import { Button, CardBody, CardHeader, CardTitle, Column, HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchJoinedEvents, fetchRecentEvents } from 'soapbox/actions/events.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import EventCarousel from './components/event-carousel';
+import EventCarousel from './components/event-carousel.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.events', defaultMessage: 'Events' },
diff --git a/src/features/export-data/components/csv-exporter.tsx b/src/features/export-data/components/csv-exporter.tsx
index 4210c0a33..4c2fd85c0 100644
--- a/src/features/export-data/components/csv-exporter.tsx
+++ b/src/features/export-data/components/csv-exporter.tsx
@@ -1,9 +1,12 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
-import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { AppDispatch, RootState } from 'soapbox/store';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { AppDispatch, RootState } from 'soapbox/store.ts';
 
 interface ICSVExporter {
   messages: {
diff --git a/src/features/export-data/index.tsx b/src/features/export-data/index.tsx
index 27273c339..d466ef3bc 100644
--- a/src/features/export-data/index.tsx
+++ b/src/features/export-data/index.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
   exportFollows,
   exportBlocks,
   exportMutes,
-} from 'soapbox/actions/export-data';
-import { Column } from 'soapbox/components/ui';
+} from 'soapbox/actions/export-data.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
-import CSVExporter from './components/csv-exporter';
+import CSVExporter from './components/csv-exporter.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.export_data', defaultMessage: 'Export data' },
diff --git a/src/features/external-login/components/external-login-form.tsx b/src/features/external-login/components/external-login-form.tsx
index 570666679..5060d0831 100644
--- a/src/features/external-login/components/external-login-form.tsx
+++ b/src/features/external-login/components/external-login-form.tsx
@@ -1,10 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
-import { externalLogin, loginWithCode } from 'soapbox/actions/external-auth';
-import { Button, Form, FormActions, FormGroup, Input, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { externalLogin, loginWithCode } from 'soapbox/actions/external-auth.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
 
diff --git a/src/features/external-login/index.tsx b/src/features/external-login/index.tsx
index 507797f9a..eaa873879 100644
--- a/src/features/external-login/index.tsx
+++ b/src/features/external-login/index.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { BigCard } from 'soapbox/components/big-card';
+import { BigCard } from 'soapbox/components/big-card.tsx';
 
-import ExternalLoginForm from './components/external-login-form';
+import ExternalLoginForm from './components/external-login-form.tsx';
 
 /** Page for logging into a remote instance */
 const ExternalLoginPage: React.FC = () => {
diff --git a/src/features/favourited-statuses/index.tsx b/src/features/favourited-statuses/index.tsx
index 215e52823..ea79041d0 100644
--- a/src/features/favourited-statuses/index.tsx
+++ b/src/features/favourited-statuses/index.tsx
@@ -1,15 +1,17 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts';
-import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from 'soapbox/actions/favourites';
-import { useAccountLookup } from 'soapbox/api/hooks';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusList from 'soapbox/components/status-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts.ts';
+import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from 'soapbox/actions/favourites.ts';
+import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.favourited_statuses', defaultMessage: 'Liked posts' },
diff --git a/src/features/federation-restrictions/components/instance-restrictions.tsx b/src/features/federation-restrictions/components/instance-restrictions.tsx
index 938502ae8..f3a71a25a 100644
--- a/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -1,11 +1,19 @@
-import React from 'react';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import lockOpenIcon from '@tabler/icons/outline/lock-open.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
+import shieldCheckIcon from '@tabler/icons/outline/shield-check.svg';
+import shieldLockIcon from '@tabler/icons/outline/shield-lock.svg';
+import shieldXIcon from '@tabler/icons/outline/shield-x.svg';
 import { FormattedMessage } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import Icon from 'soapbox/components/icon.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import type { RemoteInstance } from 'soapbox/selectors';
+import type { RemoteInstance } from 'soapbox/selectors/index.ts';
 
 const hasRestrictions = (remoteInstance: RemoteInstance): boolean => {
   const { accept, reject_deletes, report_removal, ...federation } = remoteInstance.federation;
@@ -53,7 +61,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (followers_only) {
       items.push((
-        <Restriction key='followersOnly' icon={require('@tabler/icons/outline/lock.svg')}>
+        <Restriction key='followersOnly' icon={lockIcon}>
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
@@ -62,7 +70,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/outline/lock-open.svg')}>
+        <Restriction key='federatedTimelineRemoval' icon={lockOpenIcon}>
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
@@ -73,7 +81,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (fullMediaRemoval) {
       items.push((
-        <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
+        <Restriction key='fullMediaRemoval' icon={photoOffIcon}>
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
@@ -82,7 +90,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/outline/photo-off.svg')}>
+        <Restriction key='partialMediaRemoval' icon={photoOffIcon}>
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
@@ -93,7 +101,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Restriction key='mediaNsfw' icon={require('@tabler/icons/outline/eye-off.svg')}>
+        <Restriction key='mediaNsfw' icon={eyeOffIcon}>
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
@@ -113,7 +121,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
 
     if (remoteInstance.federation.reject === true) {
       return (
-        <Restriction icon={require('@tabler/icons/outline/shield-x.svg')}>
+        <Restriction icon={shieldXIcon}>
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
@@ -124,7 +132,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
     } else if (hasRestrictions(remoteInstance)) {
       return (
         <>
-          <Restriction icon={require('@tabler/icons/outline/shield-lock.svg')}>
+          <Restriction icon={shieldLockIcon}>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@@ -137,7 +145,7 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
       );
     } else {
       return (
-        <Restriction icon={require('@tabler/icons/outline/shield-check.svg')}>
+        <Restriction icon={shieldCheckIcon}>
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
diff --git a/src/features/federation-restrictions/components/restricted-instance.tsx b/src/features/federation-restrictions/components/restricted-instance.tsx
index 07e017521..32b27f62e 100644
--- a/src/features/federation-restrictions/components/restricted-instance.tsx
+++ b/src/features/federation-restrictions/components/restricted-instance.tsx
@@ -1,11 +1,14 @@
+import caretDownIcon from '@tabler/icons/outline/caret-down.svg';
+import caretRightIcon from '@tabler/icons/outline/caret-right.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
-import Icon from 'soapbox/components/icon';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
-import InstanceRestrictions from './instance-restrictions';
+import InstanceRestrictions from './instance-restrictions.tsx';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
@@ -18,19 +21,21 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
 
   const [expanded, setExpanded] = useState(false);
 
-  const toggleExpanded: React.MouseEventHandler<HTMLAnchorElement> = e => {
+  const toggleExpanded: React.MouseEventHandler<HTMLButtonElement> = e => {
     setExpanded((value) => !value);
     e.preventDefault();
   };
 
   return (
     <div>
-      <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
-        <Icon src={expanded ? require('@tabler/icons/outline/caret-down.svg') : require('@tabler/icons/outline/caret-right.svg')} />
-        <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
-          {remoteInstance.host}
-        </div>
-      </a>
+      <Link to={'/'} className='inline-flex'>
+        <button className='flex items-center gap-1 space-x-2 !border-none  !px-0 !py-2.5 !text-primary-600 no-underline focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={toggleExpanded}>
+          <SvgIcon src={expanded ? caretDownIcon : caretRightIcon} />
+          <div className={clsx({ 'line-through': remoteInstance.federation.reject })}>
+            {remoteInstance.host}
+          </div>
+        </button>
+      </Link>
       <div
         className={clsx({
           'h-0 overflow-hidden': !expanded,
diff --git a/src/features/federation-restrictions/index.tsx b/src/features/federation-restrictions/index.tsx
index 0d980e1cd..087d53da3 100644
--- a/src/features/federation-restrictions/index.tsx
+++ b/src/features/federation-restrictions/index.tsx
@@ -1,13 +1,15 @@
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Accordion } from 'soapbox/components/ui';
-import { useAppSelector, useInstance } from 'soapbox/hooks';
-import { makeGetHosts } from 'soapbox/selectors';
-import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { makeGetHosts } from 'soapbox/selectors/index.ts';
+import { federationRestrictionsDisclosed } from 'soapbox/utils/state.ts';
 
-import RestrictedInstance from './components/restricted-instance';
+import RestrictedInstance from './components/restricted-instance.tsx';
 
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
diff --git a/src/features/feed-suggestions/feed-suggestions.tsx b/src/features/feed-suggestions/feed-suggestions.tsx
index 44179f338..6f4f10f38 100644
--- a/src/features/feed-suggestions/feed-suggestions.tsx
+++ b/src/features/feed-suggestions/feed-suggestions.tsx
@@ -1,14 +1,16 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useAccount } from 'soapbox/api/hooks';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import { Card, CardBody, CardTitle } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import { Card, CardBody, CardTitle, HStack, Stack, Text } from '../../components/ui';
-import ActionButton from '../ui/components/action-button';
-import { HotKeys } from '../ui/components/hotkeys';
+import ActionButton from '../ui/components/action-button.tsx';
+import { HotKeys } from '../ui/components/hotkeys.tsx';
 
 const messages = defineMessages({
   heading: { id: 'feed_suggestions.heading', defaultMessage: 'Suggested Profiles' },
diff --git a/src/features/filters/edit-filter.tsx b/src/features/filters/edit-filter.tsx
index d2bae33f7..e3e89cc23 100644
--- a/src/features/filters/edit-filter.tsx
+++ b/src/features/filters/edit-filter.tsx
@@ -1,18 +1,29 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { createFilter, fetchFilter, updateFilter } from 'soapbox/actions/filters';
-import List, { ListItem } from 'soapbox/components/list';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import { Button, Column, Form, FormActions, FormGroup, HStack, Input, Stack, Streamfield, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { normalizeFilter } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
+import { createFilter, fetchFilter, updateFilter } from 'soapbox/actions/filters.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Streamfield from 'soapbox/components/ui/streamfield.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { normalizeFilter } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import { SelectDropdown } from '../forms';
+import { SelectDropdown } from '../forms/index.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 
 interface IFilterField {
   id?: string;
diff --git a/src/features/filters/index.tsx b/src/features/filters/index.tsx
index fa54f6f69..63756d82b 100644
--- a/src/features/filters/index.tsx
+++ b/src/features/filters/index.tsx
@@ -1,13 +1,19 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchFilters, deleteFilter } from 'soapbox/actions/filters';
-import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { fetchFilters, deleteFilter } from 'soapbox/actions/filters.ts';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.filters', defaultMessage: 'Muted words' },
diff --git a/src/features/follow-recommendations/index.tsx b/src/features/follow-recommendations/index.tsx
index 703e23101..4cf6865bf 100644
--- a/src/features/follow-recommendations/index.tsx
+++ b/src/features/follow-recommendations/index.tsx
@@ -1,12 +1,15 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchSuggestions } from 'soapbox/actions/suggestions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchSuggestions } from 'soapbox/actions/suggestions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   heading: { id: 'follow_recommendations.heading', defaultMessage: 'Suggested Profiles' },
diff --git a/src/features/follow-requests/components/account-authorize.tsx b/src/features/follow-requests/components/account-authorize.tsx
index 5abb8671a..7b25f346c 100644
--- a/src/features/follow-requests/components/account-authorize.tsx
+++ b/src/features/follow-requests/components/account-authorize.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
-
-import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
-import { useAccount } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
-import { useAppDispatch } from 'soapbox/hooks';
+import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 interface IAccountAuthorize {
   id: string;
diff --git a/src/features/follow-requests/index.tsx b/src/features/follow-requests/index.tsx
index f89681a01..2f4b29498 100644
--- a/src/features/follow-requests/index.tsx
+++ b/src/features/follow-requests/index.tsx
@@ -1,13 +1,15 @@
 import debounce from 'lodash/debounce';
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accounts';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accounts.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import AccountAuthorize from './components/account-authorize';
+import AccountAuthorize from './components/account-authorize.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' },
@@ -24,7 +26,7 @@ const FollowRequests: React.FC = () => {
   const accountIds = useAppSelector((state) => state.user_lists.follow_requests.items);
   const hasMore = useAppSelector((state) => !!state.user_lists.follow_requests.next);
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchFollowRequests());
   }, []);
 
diff --git a/src/features/followed-tags/index.tsx b/src/features/followed-tags/index.tsx
index 6745f5fc0..5bd30fdda 100644
--- a/src/features/followed-tags/index.tsx
+++ b/src/features/followed-tags/index.tsx
@@ -1,13 +1,14 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { fetchFollowedHashtags, expandFollowedHashtags } from 'soapbox/actions/tags';
-import Hashtag from 'soapbox/components/hashtag';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
-import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchFollowedHashtags, expandFollowedHashtags } from 'soapbox/actions/tags.ts';
+import Hashtag from 'soapbox/components/hashtag.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder-hashtag.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.followed_tags', defaultMessage: 'Followed hashtags' },
diff --git a/src/features/followers/index.tsx b/src/features/followers/index.tsx
index 8b2657c63..25ef6351e 100644
--- a/src/features/followers/index.tsx
+++ b/src/features/followers/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useAccountLookup, useFollowers } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
+import { useAccountLookup, useFollowers } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.followers', defaultMessage: 'Followers' },
diff --git a/src/features/following/index.tsx b/src/features/following/index.tsx
index eb7d42a27..5dfa6644b 100644
--- a/src/features/following/index.tsx
+++ b/src/features/following/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useAccountLookup, useFollowing } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Spinner } from 'soapbox/components/ui';
+import { useAccountLookup, useFollowing } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.following', defaultMessage: 'Following' },
diff --git a/src/features/forms/index.tsx b/src/features/forms/index.tsx
index faeabacdd..d7f9d15d4 100644
--- a/src/features/forms/index.tsx
+++ b/src/features/forms/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { Children, useState } from 'react';
 
-import { Select } from '../../components/ui';
+import Select from 'soapbox/components/ui/select.tsx';
 
 interface IInputContainer {
   label?: React.ReactNode;
@@ -37,7 +37,7 @@ interface ILabelInputContainer {
 
 export const LabelInputContainer: React.FC<ILabelInputContainer> = ({ label, hint, children }) => {
   const [id] = useState(crypto.randomUUID());
-  const childrenWithProps = React.Children.map(children, child => (
+  const childrenWithProps = Children.map(children, child => (
     // @ts-ignore: not sure how to get the right type here
     React.cloneElement(child, { id: id, key: id })
   ));
diff --git a/src/features/generic-not-found/index.tsx b/src/features/generic-not-found/index.tsx
index 0ec9241e3..e67bad751 100644
--- a/src/features/generic-not-found/index.tsx
+++ b/src/features/generic-not-found/index.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import MissingIndicator from '../../components/missing-indicator';
+import MissingIndicator from '../../components/missing-indicator.tsx';
 
 const GenericNotFound = () => (
   <MissingIndicator />
diff --git a/src/features/group/components/group-action-button.test.tsx b/src/features/group/components/group-action-button.test.tsx
index adbaa658a..195cf94bb 100644
--- a/src/features/group/components/group-action-button.test.tsx
+++ b/src/features/group/components/group-action-button.test.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupActionButton from './group-action-button';
+import GroupActionButton from './group-action-button.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-action-button.tsx b/src/features/group/components/group-action-button.tsx
index e19e3563f..12462d6b5 100644
--- a/src/features/group/components/group-action-button.tsx
+++ b/src/features/group/components/group-action-button.tsx
@@ -1,17 +1,16 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups';
-import { openModal } from 'soapbox/actions/modals';
-import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup, usePendingGroups } from 'soapbox/api/hooks';
-import { Button } from 'soapbox/components/ui';
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { useAppDispatch } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
+import { fetchGroupRelationshipsSuccess } from 'soapbox/actions/groups.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup, usePendingGroups } from 'soapbox/api/hooks/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Group, GroupRelationship } from 'soapbox/types/entities';
+import type { Group, GroupRelationship } from 'soapbox/types/entities.ts';
 
 interface IGroupActionButton {
   group: Group;
diff --git a/src/features/group/components/group-header-image.tsx b/src/features/group/components/group-header-image.tsx
index 4c759b203..d6818a3f8 100644
--- a/src/features/group/components/group-header-image.tsx
+++ b/src/features/group/components/group-header-image.tsx
@@ -1,10 +1,11 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon } from 'soapbox/components/ui';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   header: { id: 'group.header.alt', defaultMessage: 'Group header' },
@@ -30,7 +31,7 @@ const GroupHeaderImage: React.FC<IGroupHeaderImage> = ({ className, group }) =>
         className={clsx(className, 'flex items-center justify-center bg-gray-200 dark:bg-gray-800/30')}
       >
         <Icon
-          src={require('@tabler/icons/outline/photo-off.svg')}
+          src={photoOffIcon}
           className='size-6 text-gray-500 dark:text-gray-700'
         />
       </div>
diff --git a/src/features/group/components/group-header.test.tsx b/src/features/group/components/group-header.test.tsx
index 64e7fbb62..d6b775a67 100644
--- a/src/features/group/components/group-header.test.tsx
+++ b/src/features/group/components/group-header.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupHeader from './group-header';
+import GroupHeader from './group-header.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index 3cb84d4b8..0067d54ab 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -1,22 +1,26 @@
+import photoOffIcon from '@tabler/icons/outline/photo-off.svg';
 import { List as ImmutableList } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import StillImage from 'soapbox/components/still-image';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { normalizeAttachment } from 'soapbox/normalizers';
-import { isDefaultHeader } from 'soapbox/utils/accounts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
+import StillImage from 'soapbox/components/still-image.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/index.ts';
+import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
-import GroupActionButton from './group-action-button';
-import GroupMemberCount from './group-member-count';
-import GroupOptionsButton from './group-options-button';
-import GroupPrivacy from './group-privacy';
-import GroupRelationship from './group-relationship';
+import GroupActionButton from './group-action-button.tsx';
+import GroupMemberCount from './group-member-count.tsx';
+import GroupOptionsButton from './group-options-button.tsx';
+import GroupPrivacy from './group-privacy.tsx';
+import GroupRelationship from './group-relationship.tsx';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   header: { id: 'group.header.alt', defaultMessage: 'Group header' },
@@ -112,7 +116,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         className='flex h-32 w-full items-center justify-center bg-gray-200 dark:bg-gray-800/30 md:rounded-t-xl lg:h-52'
       >
         {isHeaderMissing ? (
-          <Icon src={require('@tabler/icons/outline/photo-off.svg')} className='size-6 text-gray-500 dark:text-gray-700' />
+          <Icon src={photoOffIcon} className='size-6 text-gray-500 dark:text-gray-700' />
         ) : header}
       </div>
     );
diff --git a/src/features/group/components/group-member-count.test.tsx b/src/features/group/components/group-member-count.test.tsx
index f9f3231b1..2b5876b99 100644
--- a/src/features/group/components/group-member-count.test.tsx
+++ b/src/features/group/components/group-member-count.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupMemberCount from './group-member-count';
+import GroupMemberCount from './group-member-count.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-member-count.tsx b/src/features/group/components/group-member-count.tsx
index 134210f9f..bd50d475e 100644
--- a/src/features/group/components/group-member-count.tsx
+++ b/src/features/group/components/group-member-count.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text } from 'soapbox/components/ui';
-import { Group } from 'soapbox/types/entities';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import Text from 'soapbox/components/ui/text.tsx';
+import { Group } from 'soapbox/types/entities.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IGroupMemberCount {
   group: Group;
diff --git a/src/features/group/components/group-member-list-item.test.tsx b/src/features/group/components/group-member-list-item.test.tsx
index e91901013..1817f97ef 100644
--- a/src/features/group/components/group-member-list-item.test.tsx
+++ b/src/features/group/components/group-member-list-item.test.tsx
@@ -1,12 +1,12 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildGroup, buildGroupMember, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup, buildGroupMember, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
-import GroupMemberListItem from './group-member-list-item';
+import GroupMemberListItem from './group-member-list-item.tsx';
 
 describe('<GroupMemberListItem />', () => {
   describe('account rendering', () => {
diff --git a/src/features/group/components/group-member-list-item.tsx b/src/features/group/components/group-member-list-item.tsx
index f1102965c..2db2a43f3 100644
--- a/src/features/group/components/group-member-list-item.tsx
+++ b/src/features/group/components/group-member-list-item.tsx
@@ -1,23 +1,27 @@
+import banIcon from '@tabler/icons/outline/ban.svg';
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
+import userMinusIcon from '@tabler/icons/outline/user-minus.svg';
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { groupKick } from 'soapbox/actions/groups';
-import { openModal } from 'soapbox/actions/modals';
-import { useAccount, useBlockGroupMember, useDemoteGroupMember, usePromoteGroupMember } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import DropdownMenu from 'soapbox/components/dropdown-menu/dropdown-menu';
-import { HStack } from 'soapbox/components/ui';
-import { deleteEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
-import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups';
+import { groupKick } from 'soapbox/actions/groups.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useAccount, useBlockGroupMember, useDemoteGroupMember, usePromoteGroupMember } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import DropdownMenu from 'soapbox/components/dropdown-menu/dropdown-menu.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { deleteEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder-account.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
+import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups.ts';
 
-import type { Menu as IMenu } from 'soapbox/components/dropdown-menu';
-import type { Group, GroupMember } from 'soapbox/types/entities';
+import type { Menu as IMenu } from 'soapbox/components/dropdown-menu/index.ts';
+import type { Group, GroupMember } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   adminLimitTitle: { id: 'group.member.admin.limit.title', defaultMessage: 'Admin limit reached' },
@@ -137,13 +141,13 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
       if (isMemberUser) {
         items.push({
           text: intl.formatMessage(messages.groupModPromoteMod, { role: GroupRoles.ADMIN }),
-          icon: require('@tabler/icons/outline/briefcase.svg'),
+          icon: briefcaseIcon,
           action: handleAdminAssignment,
         });
       } else if (isMemberAdmin) {
         items.push({
           text: intl.formatMessage(messages.groupModDemote, { role: GroupRoles.ADMIN, name: account.username }),
-          icon: require('@tabler/icons/outline/briefcase.svg'),
+          icon: briefcaseIcon,
           action: handleUserAssignment,
           destructive: true,
         });
@@ -158,14 +162,14 @@ const GroupMemberListItem = (props: IGroupMemberListItem) => {
       if (features.groupsKick) {
         items.push({
           text: intl.formatMessage(messages.groupModKick, { name: account.username }),
-          icon: require('@tabler/icons/outline/user-minus.svg'),
+          icon: userMinusIcon,
           action: handleKickFromGroup,
         });
       }
 
       items.push({
         text: intl.formatMessage(messages.groupModBlock, { name: account.username }),
-        icon: require('@tabler/icons/outline/ban.svg'),
+        icon: banIcon,
         action: handleBlockFromGroup,
         destructive: true,
       });
diff --git a/src/features/group/components/group-options-button.test.tsx b/src/features/group/components/group-options-button.test.tsx
index 42ecb6504..d0548956f 100644
--- a/src/features/group/components/group-options-button.test.tsx
+++ b/src/features/group/components/group-options-button.test.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupOptionsButton from './group-options-button';
+import GroupOptionsButton from './group-options-button.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-options-button.tsx b/src/features/group/components/group-options-button.tsx
index c52bc1eaa..eb792d185 100644
--- a/src/features/group/components/group-options-button.tsx
+++ b/src/features/group/components/group-options-button.tsx
@@ -1,16 +1,22 @@
-import React, { useMemo } from 'react';
+import dotsIcon from '@tabler/icons/outline/dots.svg';
+import flagIcon from '@tabler/icons/outline/flag.svg';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { initReport, ReportableEntities } from 'soapbox/actions/reports';
-import { useLeaveGroup, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks';
-import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
-import { IconButton } from 'soapbox/components/ui';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { initReport, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { useLeaveGroup, useMuteGroup, useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
+import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Account, Group } from 'soapbox/types/entities';
+import type { Account, Group } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   confirmationConfirm: { id: 'confirmations.leave_group.confirm', defaultMessage: 'Leave' },
@@ -98,7 +104,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (canShare) {
       items.push({
         text: intl.formatMessage(messages.share),
-        icon: require('@tabler/icons/outline/share.svg'),
+        icon: shareIcon,
         action: handleShare,
       });
     }
@@ -106,7 +112,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (isInGroup) {
       items.push({
         text: isMuting ? intl.formatMessage(messages.unmute) : intl.formatMessage(messages.mute),
-        icon: require('@tabler/icons/outline/volume-3.svg'),
+        icon: volume3Icon,
         action: isMuting ? handleUnmute : handleMute,
       });
     }
@@ -114,7 +120,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
     if (isMember || isAdmin) {
       items.push({
         text: intl.formatMessage(messages.report),
-        icon: require('@tabler/icons/outline/flag.svg'),
+        icon: flagIcon,
         action: () => dispatch(initReport(ReportableEntities.GROUP, account as Account, { group })),
       });
     }
@@ -123,7 +129,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
       items.push(null);
       items.push({
         text: intl.formatMessage(messages.leave),
-        icon: require('@tabler/icons/outline/logout.svg'),
+        icon: logoutIcon,
         action: handleLeave,
       });
     }
@@ -138,7 +144,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => {
   return (
     <DropdownMenu items={menu} placement='bottom'>
       <IconButton
-        src={require('@tabler/icons/outline/dots.svg')}
+        src={dotsIcon}
         theme='secondary'
         iconClassName='h-5 w-5'
         className='self-stretch px-2.5'
diff --git a/src/features/group/components/group-privacy.test.tsx b/src/features/group/components/group-privacy.test.tsx
index 9e8bc8bcf..a5e361347 100644
--- a/src/features/group/components/group-privacy.test.tsx
+++ b/src/features/group/components/group-privacy.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupPrivacy from './group-privacy';
+import GroupPrivacy from './group-privacy.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-privacy.tsx b/src/features/group/components/group-privacy.tsx
index 20602bb41..0b2822f46 100644
--- a/src/features/group/components/group-privacy.tsx
+++ b/src/features/group/components/group-privacy.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, Popover, Stack, Text } from 'soapbox/components/ui';
-import { Group } from 'soapbox/types/entities';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Popover from 'soapbox/components/ui/popover.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { Group } from 'soapbox/types/entities.ts';
 
 interface IGroupPolicy {
   group: Group;
@@ -17,8 +22,8 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
           <Icon
             src={
               group.locked
-                ? require('@tabler/icons/outline/lock.svg')
-                : require('@tabler/icons/outline/world.svg')
+                ? lockIcon
+                : worldIcon
             }
             className='size-6 text-gray-600 dark:text-gray-600'
           />
@@ -49,8 +54,8 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
         className='size-4'
         src={
           group.locked
-            ? require('@tabler/icons/outline/lock.svg')
-            : require('@tabler/icons/outline/world.svg')
+            ? lockIcon
+            : worldIcon
         }
       />
 
diff --git a/src/features/group/components/group-relationship.test.tsx b/src/features/group/components/group-relationship.test.tsx
index 9befcc928..7b5aa810f 100644
--- a/src/features/group/components/group-relationship.test.tsx
+++ b/src/features/group/components/group-relationship.test.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { Group } from 'soapbox/types/entities';
+import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
-import GroupRelationship from './group-relationship';
+import GroupRelationship from './group-relationship.tsx';
 
 let group: Group;
 
diff --git a/src/features/group/components/group-relationship.tsx b/src/features/group/components/group-relationship.tsx
index ebcdc017d..e776391b5 100644
--- a/src/features/group/components/group-relationship.tsx
+++ b/src/features/group/components/group-relationship.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
+import gavelIcon from '@tabler/icons/outline/gavel.svg';
+import usersIcon from '@tabler/icons/outline/users.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Icon, Text } from 'soapbox/components/ui';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { Group } from 'soapbox/types/entities';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Group } from 'soapbox/types/entities.ts';
 
 interface IGroupRelationship {
   group: Group;
@@ -28,8 +31,8 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
         className='size-4'
         src={
           isOwner
-            ? require('@tabler/icons/outline/users.svg')
-            : require('@tabler/icons/outline/gavel.svg')
+            ? usersIcon
+            : gavelIcon
         }
       />
 
diff --git a/src/features/group/components/group-tag-list-item.test.tsx b/src/features/group/components/group-tag-list-item.test.tsx
index 57c3cffbe..ad832c38f 100644
--- a/src/features/group/components/group-tag-list-item.test.tsx
+++ b/src/features/group/components/group-tag-list-item.test.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildGroup, buildGroupTag, buildGroupRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { buildGroup, buildGroupTag, buildGroupRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
-import GroupTagListItem from './group-tag-list-item';
+import GroupTagListItem from './group-tag-list-item.tsx';
 
 describe('<GroupTagListItem />', () => {
   describe('tag name', () => {
diff --git a/src/features/group/components/group-tag-list-item.tsx b/src/features/group/components/group-tag-list-item.tsx
index 3680f5afd..c4b2f44da 100644
--- a/src/features/group/components/group-tag-list-item.tsx
+++ b/src/features/group/components/group-tag-list-item.tsx
@@ -1,17 +1,25 @@
-import React from 'react';
+import pinFilledIcon from '@tabler/icons/filled/pin.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import eyeIcon from '@tabler/icons/outline/eye.svg';
+import pinIcon from '@tabler/icons/outline/pin.svg';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useUpdateGroupTag } from 'soapbox/api/hooks';
-import { HStack, Icon, IconButton, Stack, Text, Tooltip } from 'soapbox/components/ui';
-import { importEntities } from 'soapbox/entity-store/actions';
-import { Entities } from 'soapbox/entity-store/entities';
-import { useAppDispatch } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { useUpdateGroupTag } from 'soapbox/api/hooks/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import { importEntities } from 'soapbox/entity-store/actions.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import type { Group, GroupTag } from 'soapbox/schemas';
+import type { Group, GroupTag } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   hideTag: { id: 'group.tags.hide', defaultMessage: 'Hide topic' },
@@ -87,7 +95,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
     if (!isOwner && tag.pinned) {
       return (
         <Icon
-          src={require('@tabler/icons/filled/pin.svg')}
+          src={pinFilledIcon}
           className='size-5 text-gray-600'
           data-testid='pin-icon'
         />
@@ -112,8 +120,8 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
             theme='transparent'
             src={
               tag.pinned ?
-                require('@tabler/icons/filled/pin.svg') :
-                require('@tabler/icons/outline/pin.svg')
+                pinFilledIcon :
+                pinIcon
             }
             iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
             data-testid='pin-icon'
@@ -128,7 +136,7 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
           <IconButton
             onClick={togglePin}
             theme='transparent'
-            src={require('@tabler/icons/filled/pin.svg')}
+            src={pinFilledIcon}
             iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
           />
         </Tooltip>
@@ -185,8 +193,8 @@ const GroupTagListItem = (props: IGroupMemberListItem) => {
               theme='transparent'
               src={
                 tag.visible ?
-                  require('@tabler/icons/outline/eye.svg') :
-                  require('@tabler/icons/outline/eye-off.svg')
+                  eyeIcon :
+                  eyeOffIcon
               }
               iconClassName='h-5 w-5 text-primary-500 dark:text-accent-blue'
             />
diff --git a/src/features/group/components/group-tags-field.tsx b/src/features/group/components/group-tags-field.tsx
index 1a9f3118e..0d8894e12 100644
--- a/src/features/group/components/group-tags-field.tsx
+++ b/src/features/group/components/group-tags-field.tsx
@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Input, Streamfield } from 'soapbox/components/ui';
+import Input from 'soapbox/components/ui/input.tsx';
+import Streamfield from 'soapbox/components/ui/streamfield.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
 
 const messages = defineMessages({
   hashtagPlaceholder: { id: 'manage_group.fields.hashtag_placeholder', defaultMessage: 'Add a topic' },
diff --git a/src/features/group/edit-group.tsx b/src/features/group/edit-group.tsx
index a23cae445..659dd758f 100644
--- a/src/features/group/edit-group.tsx
+++ b/src/features/group/edit-group.tsx
@@ -1,17 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useGroup, useGroupTags, useUpdateGroup } from 'soapbox/api/hooks';
-import { Button, Column, Form, FormActions, FormGroup, Icon, Input, Spinner, Textarea } from 'soapbox/components/ui';
-import { useAppSelector, useInstance } from 'soapbox/hooks';
-import { useImageField, useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
-import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
+import { useGroup, useGroupTags, useUpdateGroup } from 'soapbox/api/hooks/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import { useImageField, useTextField } from 'soapbox/hooks/forms/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts.ts';
 
-import AvatarPicker from '../edit-profile/components/avatar-picker';
-import HeaderPicker from '../edit-profile/components/header-picker';
+import AvatarPicker from '../edit-profile/components/avatar-picker.tsx';
+import HeaderPicker from '../edit-profile/components/header-picker.tsx';
 
-import GroupTagsField from './components/group-tags-field';
+import GroupTagsField from './components/group-tags-field.tsx';
 
 const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
 const nonDefaultHeader = (url: string | undefined) => url && isDefaultHeader(url) ? undefined : url;
@@ -115,7 +125,7 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { groupId } }) => {
             placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
             maxLength={maxName}
             {...displayName}
-            append={<Icon className='size-5 text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />}
+            append={<Icon className='size-5 text-gray-600' src={lockIcon} />}
             disabled
           />
         </FormGroup>
diff --git a/src/features/group/group-blocked-members.tsx b/src/features/group/group-blocked-members.tsx
index 28b25d344..8c09f2eae 100644
--- a/src/features/group/group-blocked-members.tsx
+++ b/src/features/group/group-blocked-members.tsx
@@ -1,15 +1,19 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { fetchGroupBlocks, groupUnblock } from 'soapbox/actions/groups';
-import { useAccount, useGroup } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Column, HStack, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { fetchGroupBlocks, groupUnblock } from 'soapbox/actions/groups.ts';
+import { useAccount, useGroup } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ColumnForbidden from '../ui/components/column-forbidden';
+import ColumnForbidden from '../ui/components/column-forbidden.tsx';
 
 type RouteParams = { groupId: string };
 
diff --git a/src/features/group/group-gallery.tsx b/src/features/group/group-gallery.tsx
index ce83d2f86..4adeaec0f 100644
--- a/src/features/group/group-gallery.tsx
+++ b/src/features/group/group-gallery.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useGroup, useGroupMedia } from 'soapbox/api/hooks';
-import LoadMore from 'soapbox/components/load-more';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import { Column, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useGroup, useGroupMedia } from 'soapbox/api/hooks/index.ts';
+import LoadMore from 'soapbox/components/load-more.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import MediaItem from '../account-gallery/components/media-item';
+import MediaItem from '../account-gallery/components/media-item.tsx';
 
-import type { Attachment, Status } from 'soapbox/types/entities';
+import type { Attachment, Status } from 'soapbox/types/entities.ts';
 
 interface IGroupGallery {
   params: { groupId: string };
diff --git a/src/features/group/group-members.tsx b/src/features/group/group-members.tsx
index 0d08d82e8..03e981345 100644
--- a/src/features/group/group-members.tsx
+++ b/src/features/group/group-members.tsx
@@ -1,18 +1,18 @@
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks';
-import { PendingItemsRow } from 'soapbox/components/pending-items-row';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { useFeatures } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups';
+import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks/index.ts';
+import { PendingItemsRow } from 'soapbox/components/pending-items-row.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { MAX_ADMIN_COUNT } from 'soapbox/utils/groups.ts';
 
-import PlaceholderAccount from '../placeholder/components/placeholder-account';
+import PlaceholderAccount from '../placeholder/components/placeholder-account.tsx';
 
-import GroupMemberListItem from './components/group-member-list-item';
+import GroupMemberListItem from './components/group-member-list-item.tsx';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/types/entities.ts';
 
 
 interface IGroupMembers {
diff --git a/src/features/group/group-membership-requests.tsx b/src/features/group/group-membership-requests.tsx
index 4eb23b166..39a51c339 100644
--- a/src/features/group/group-membership-requests.tsx
+++ b/src/features/group/group-membership-requests.tsx
@@ -1,18 +1,20 @@
 import { AxiosError } from 'axios';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks';
-import Account from 'soapbox/components/account';
-import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, HStack, Spinner } from 'soapbox/components/ui';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
+import { useGroup, useGroupMembers, useGroupMembershipRequests } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import { AuthorizeRejectButtons } from 'soapbox/components/authorize-reject-buttons.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ColumnForbidden from '../ui/components/column-forbidden';
+import ColumnForbidden from '../ui/components/column-forbidden.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 type RouteParams = { groupId: string };
 
diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx
index 92b25bfaa..20c5a9398 100644
--- a/src/features/group/group-tag-timeline.tsx
+++ b/src/features/group/group-tag-timeline.tsx
@@ -1,12 +1,16 @@
-import React, { useEffect } from 'react';
+import message2Icon from '@tabler/icons/outline/message-2.svg';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { expandGroupTimelineFromTag } from 'soapbox/actions/timelines';
-import { useGroup, useGroupTag } from 'soapbox/api/hooks';
-import { Column, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { expandGroupTimelineFromTag } from 'soapbox/actions/timelines.ts';
+import { useGroup, useGroupTag } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 type RouteParams = { tagId: string; groupId: string };
 
@@ -50,7 +54,7 @@ const GroupTagTimeline: React.FC<IGroupTimeline> = (props) => {
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
-                src={require('@tabler/icons/outline/message-2.svg')}
+                src={message2Icon}
                 className='size-6 text-gray-600'
               />
             </div>
diff --git a/src/features/group/group-tags.tsx b/src/features/group/group-tags.tsx
index 6e1951886..a4fcb863c 100644
--- a/src/features/group/group-tags.tsx
+++ b/src/features/group/group-tags.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
+import hashIcon from '@tabler/icons/outline/hash.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { useGroup, useGroupTags } from 'soapbox/api/hooks';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Icon, Stack, Text } from 'soapbox/components/ui';
+import { useGroup, useGroupTags } from 'soapbox/api/hooks/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import PlaceholderAccount from '../placeholder/components/placeholder-account';
+import PlaceholderAccount from '../placeholder/components/placeholder-account.tsx';
 
-import GroupTagListItem from './components/group-tag-list-item';
+import GroupTagListItem from './components/group-tag-list-item.tsx';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/types/entities.ts';
 
 interface IGroupTopics {
   params: { groupId: string };
@@ -41,7 +43,7 @@ const GroupTopics: React.FC<IGroupTopics> = (props) => {
         <Stack space={4} className='pt-6' justifyContent='center' alignItems='center'>
           <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
             <Icon
-              src={require('@tabler/icons/outline/hash.svg')}
+              src={hashIcon}
               className='size-6 text-gray-600'
             />
           </div>
diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx
index 656a2f9ba..47a5a6a51 100644
--- a/src/features/group/group-timeline.tsx
+++ b/src/features/group/group-timeline.tsx
@@ -1,17 +1,26 @@
+import message2Icon from '@tabler/icons/outline/message-2.svg';
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { groupCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose';
-import { expandGroupFeaturedTimeline, expandGroupTimeline } from 'soapbox/actions/timelines';
-import { useGroup, useGroupStream } from 'soapbox/api/hooks';
-import { Avatar, HStack, Icon, Stack, Text, Toggle } from 'soapbox/components/ui';
-import ComposeForm from 'soapbox/features/compose/components/compose-form';
-import { useAppDispatch, useAppSelector, useDraggedFiles, useOwnAccount } from 'soapbox/hooks';
-import { makeGetStatusIds } from 'soapbox/selectors';
+import { groupCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose.ts';
+import { expandGroupFeaturedTimeline, expandGroupTimeline } from 'soapbox/actions/timelines.ts';
+import { useGroup, useGroupStream } from 'soapbox/api/hooks/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import ComposeForm from 'soapbox/features/compose/components/compose-form.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 type RouteParams = { groupId: string };
 
@@ -110,7 +119,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
           <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
-                src={require('@tabler/icons/outline/message-2.svg')}
+                src={message2Icon}
                 className='size-6 text-gray-600'
               />
             </div>
diff --git a/src/features/group/manage-group.tsx b/src/features/group/manage-group.tsx
index bf857996a..d9423eb51 100644
--- a/src/features/group/manage-group.tsx
+++ b/src/features/group/manage-group.tsx
@@ -1,17 +1,21 @@
-import React from 'react';
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useDeleteGroup, useGroup } from 'soapbox/api/hooks';
-import List, { ListItem } from 'soapbox/components/list';
-import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useBackend } from 'soapbox/hooks';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import toast from 'soapbox/toast';
-import { TRUTHSOCIAL } from 'soapbox/utils/features';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useDeleteGroup, useGroup } from 'soapbox/api/hooks/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useBackend } from 'soapbox/hooks/useBackend.ts';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import toast from 'soapbox/toast.tsx';
+import { TRUTHSOCIAL } from 'soapbox/utils/features.ts';
 
-import ColumnForbidden from '../ui/components/column-forbidden';
+import ColumnForbidden from '../ui/components/column-forbidden.tsx';
 
 type RouteParams = { groupId: string };
 
@@ -61,7 +65,7 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
 
   const onDeleteGroup = () =>
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/outline/trash.svg'),
+      icon: trashIcon,
       heading: intl.formatMessage(messages.deleteHeading),
       message: intl.formatMessage(messages.deleteMessage),
       confirm: intl.formatMessage(messages.deleteConfirm),
diff --git a/src/features/groups/components/discover/group-grid-item.test.tsx b/src/features/groups/components/discover/group-grid-item.test.tsx
index 054335dbe..950f2d25b 100644
--- a/src/features/groups/components/discover/group-grid-item.test.tsx
+++ b/src/features/groups/components/discover/group-grid-item.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import GroupGridItem from './group-grid-item';
+import GroupGridItem from './group-grid-item.tsx';
 
 describe('<GroupGridItem', () => {
   it('should render correctly', () => {
diff --git a/src/features/groups/components/discover/group-grid-item.tsx b/src/features/groups/components/discover/group-grid-item.tsx
index 1d0250ebb..e4e23dc86 100644
--- a/src/features/groups/components/discover/group-grid-item.tsx
+++ b/src/features/groups/components/discover/group-grid-item.tsx
@@ -1,14 +1,16 @@
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-import GroupActionButton from 'soapbox/features/group/components/group-action-button';
-import GroupHeaderImage from 'soapbox/features/group/components/group-header-image';
-import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
-import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
+import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import GroupActionButton from 'soapbox/features/group/components/group-action-button.tsx';
+import GroupHeaderImage from 'soapbox/features/group/components/group-header-image.tsx';
+import GroupMemberCount from 'soapbox/features/group/components/group-member-count.tsx';
+import GroupPrivacy from 'soapbox/features/group/components/group-privacy.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 interface IGroup {
   group: Group;
diff --git a/src/features/groups/components/discover/group-list-item.test.tsx b/src/features/groups/components/discover/group-list-item.test.tsx
index 5046389f8..13539a1cd 100644
--- a/src/features/groups/components/discover/group-list-item.test.tsx
+++ b/src/features/groups/components/discover/group-list-item.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import GroupListItem from './group-list-item';
+import GroupListItem from './group-list-item.tsx';
 
 describe('<GroupListItem', () => {
   it('should render correctly', () => {
diff --git a/src/features/groups/components/discover/group-list-item.tsx b/src/features/groups/components/discover/group-list-item.tsx
index 3294e6312..a015277b7 100644
--- a/src/features/groups/components/discover/group-list-item.tsx
+++ b/src/features/groups/components/discover/group-list-item.tsx
@@ -1,12 +1,16 @@
-import React from 'react';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import worldIcon from '@tabler/icons/outline/world.svg';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import GroupActionButton from 'soapbox/features/group/components/group-action-button';
-import { Group as GroupEntity } from 'soapbox/types/entities';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import GroupActionButton from 'soapbox/features/group/components/group-action-button.tsx';
+import { Group as GroupEntity } from 'soapbox/types/entities.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IGroupListItem {
   group: GroupEntity;
@@ -39,7 +43,7 @@ const GroupListItem = (props: IGroupListItem) => {
             <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
               <Icon
                 className='size-4.5'
-                src={group.locked ? require('@tabler/icons/outline/lock.svg') : require('@tabler/icons/outline/world.svg')}
+                src={group.locked ? lockIcon : worldIcon}
               />
 
               <Text theme='inherit' tag='span' size='sm' weight='medium'>
diff --git a/src/features/groups/components/discover/layout-buttons.test.tsx b/src/features/groups/components/discover/layout-buttons.test.tsx
index a372d8058..0b71e4223 100644
--- a/src/features/groups/components/discover/layout-buttons.test.tsx
+++ b/src/features/groups/components/discover/layout-buttons.test.tsx
@@ -1,9 +1,9 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { render, screen, within } from 'soapbox/jest/test-helpers';
+import { render, screen, within } from 'soapbox/jest/test-helpers.tsx';
 
-import LayoutButtons, { GroupLayout } from './layout-buttons';
+import LayoutButtons, { GroupLayout } from './layout-buttons.tsx';
 
 describe('<LayoutButtons', () => {
   describe('when LIST view', () => {
diff --git a/src/features/groups/components/discover/layout-buttons.tsx b/src/features/groups/components/discover/layout-buttons.tsx
index 3500f40a5..e57943de6 100644
--- a/src/features/groups/components/discover/layout-buttons.tsx
+++ b/src/features/groups/components/discover/layout-buttons.tsx
@@ -1,7 +1,9 @@
+import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
+import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
-import React from 'react';
 
-import { HStack, Icon } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
 enum GroupLayout {
   LIST = 'LIST',
@@ -20,7 +22,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
       onClick={() => onSelect(GroupLayout.LIST)}
     >
       <Icon
-        src={require('@tabler/icons/outline/layout-list.svg')}
+        src={layoutListIcon}
         className={
           clsx('size-5 text-gray-600', {
             'text-primary-600': layout === GroupLayout.LIST,
@@ -34,7 +36,7 @@ const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
       onClick={() => onSelect(GroupLayout.GRID)}
     >
       <Icon
-        src={require('@tabler/icons/outline/layout-grid.svg')}
+        src={layoutGridIcon}
         className={
           clsx('size-5 text-gray-600', {
             'text-primary-600': layout === GroupLayout.GRID,
diff --git a/src/features/groups/components/discover/popular-groups.tsx b/src/features/groups/components/discover/popular-groups.tsx
index 83426f553..a6e1b6bff 100644
--- a/src/features/groups/components/discover/popular-groups.tsx
+++ b/src/features/groups/components/discover/popular-groups.tsx
@@ -1,12 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { usePopularGroups } from 'soapbox/api/hooks';
-import Link from 'soapbox/components/link';
-import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui';
-import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover';
+import { usePopularGroups } from 'soapbox/api/hooks/index.ts';
+import Link from 'soapbox/components/link.tsx';
+import Carousel from 'soapbox/components/ui/carousel.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover.tsx';
 
-import GroupGridItem from './group-grid-item';
+import GroupGridItem from './group-grid-item.tsx';
 
 const PopularGroups = () => {
   const { groups, isFetching, isFetched, isError } = usePopularGroups();
diff --git a/src/features/groups/components/discover/popular-tags.tsx b/src/features/groups/components/discover/popular-tags.tsx
index 75ff36628..04e76ee50 100644
--- a/src/features/groups/components/discover/popular-tags.tsx
+++ b/src/features/groups/components/discover/popular-tags.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { usePopularTags } from 'soapbox/api/hooks';
-import Link from 'soapbox/components/link';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { usePopularTags } from 'soapbox/api/hooks/index.ts';
+import Link from 'soapbox/components/link.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import TagListItem from './tag-list-item';
+import TagListItem from './tag-list-item.tsx';
 
 const PopularTags = () => {
   const { tags, isFetched, isError } = usePopularTags();
diff --git a/src/features/groups/components/discover/search/blankslate.test.tsx b/src/features/groups/components/discover/search/blankslate.test.tsx
index 8b6e811be..77843ca6e 100644
--- a/src/features/groups/components/discover/search/blankslate.test.tsx
+++ b/src/features/groups/components/discover/search/blankslate.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Blankslate from './blankslate';
+import Blankslate from './blankslate.tsx';
 
 
 describe('<Blankslate />', () => {
diff --git a/src/features/groups/components/discover/search/blankslate.tsx b/src/features/groups/components/discover/search/blankslate.tsx
index 7d63b8c27..db34f8fbf 100644
--- a/src/features/groups/components/discover/search/blankslate.tsx
+++ b/src/features/groups/components/discover/search/blankslate.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-
-import { Stack, Text } from 'soapbox/components/ui';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface Props {
   title: React.ReactNode | string;
diff --git a/src/features/groups/components/discover/search/recent-searches.tsx b/src/features/groups/components/discover/search/recent-searches.tsx
index 65012bbdf..665a0617e 100644
--- a/src/features/groups/components/discover/search/recent-searches.tsx
+++ b/src/features/groups/components/discover/search/recent-searches.tsx
@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
 
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
-import { groupSearchHistory } from 'soapbox/settings';
-import { clearRecentGroupSearches } from 'soapbox/utils/groups';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { groupSearchHistory } from 'soapbox/settings.ts';
+import { clearRecentGroupSearches } from 'soapbox/utils/groups.ts';
 
 interface Props {
   onSelect(value: string): void;
@@ -62,7 +66,7 @@ export default (props: Props) => {
                   <HStack alignItems='center' space={2}>
                     <div className='flex size-10 items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-800 dark:group-hover:bg-gray-700/20'>
                       <Icon
-                        src={require('@tabler/icons/outline/search.svg')}
+                        src={searchIcon}
                         className='size-5 text-gray-600'
                       />
                     </div>
diff --git a/src/features/groups/components/discover/search/results.test.tsx b/src/features/groups/components/discover/search/results.test.tsx
index 1c3017c9b..71d017eb8 100644
--- a/src/features/groups/components/discover/search/results.test.tsx
+++ b/src/features/groups/components/discover/search/results.test.tsx
@@ -1,11 +1,11 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
 import { VirtuosoGridMockContext, VirtuosoMockContext } from 'react-virtuoso';
+import { describe, expect, it, vi } from 'vitest';
 
-import { buildAccount, buildGroup } from 'soapbox/jest/factory';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { buildAccount, buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import Results from './results';
+import Results from './results.tsx';
 
 const userId = '1';
 const store = {
diff --git a/src/features/groups/components/discover/search/results.tsx b/src/features/groups/components/discover/search/results.tsx
index 3a01ea16f..ac827188c 100644
--- a/src/features/groups/components/discover/search/results.tsx
+++ b/src/features/groups/components/discover/search/results.tsx
@@ -1,22 +1,24 @@
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { useGroupSearch } from 'soapbox/api/hooks';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { useGroupSearch } from 'soapbox/api/hooks/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import GroupGridItem from '../group-grid-item';
-import GroupListItem from '../group-list-item';
-import LayoutButtons, { GroupLayout } from '../layout-buttons';
+import GroupGridItem from '../group-grid-item.tsx';
+import GroupListItem from '../group-list-item.tsx';
+import LayoutButtons, { GroupLayout } from '../layout-buttons.tsx';
 
-import type { Group } from 'soapbox/types/entities';
+import type { Group } from 'soapbox/types/entities.ts';
 
 interface Props {
   groupSearchResult: ReturnType<typeof useGroupSearch>;
 }
 
-const GridList: Components['List'] = React.forwardRef((props, ref) => {
+const GridList: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
diff --git a/src/features/groups/components/discover/search/search.test.tsx b/src/features/groups/components/discover/search/search.test.tsx
index 0ae0f8cd8..44649c2af 100644
--- a/src/features/groups/components/discover/search/search.test.tsx
+++ b/src/features/groups/components/discover/search/search.test.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildGroup } from 'soapbox/jest/factory';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildGroup } from 'soapbox/jest/factory.ts';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import Search from './search';
+import Search from './search.tsx';
 
 const store = {
   instance: instanceV1Schema.parse({
diff --git a/src/features/groups/components/discover/search/search.tsx b/src/features/groups/components/discover/search/search.tsx
index 2d414d0c5..c6d404c8b 100644
--- a/src/features/groups/components/discover/search/search.tsx
+++ b/src/features/groups/components/discover/search/search.tsx
@@ -1,15 +1,16 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useGroupSearch } from 'soapbox/api/hooks';
-import { Stack } from 'soapbox/components/ui';
-import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
-import { useDebounce, useOwnAccount } from 'soapbox/hooks';
-import { saveGroupSearch } from 'soapbox/utils/groups';
+import { useGroupSearch } from 'soapbox/api/hooks/index.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { saveGroupSearch } from 'soapbox/utils/groups.ts';
 
-import Blankslate from './blankslate';
-import RecentSearches from './recent-searches';
-import Results from './results';
+import Blankslate from './blankslate.tsx';
+import RecentSearches from './recent-searches.tsx';
+import Results from './results.tsx';
 
 interface Props {
   onSelect(value: string): void;
diff --git a/src/features/groups/components/discover/suggested-groups.tsx b/src/features/groups/components/discover/suggested-groups.tsx
index 5d73cc3f0..4c83701df 100644
--- a/src/features/groups/components/discover/suggested-groups.tsx
+++ b/src/features/groups/components/discover/suggested-groups.tsx
@@ -1,12 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { useSuggestedGroups } from 'soapbox/api/hooks';
-import Link from 'soapbox/components/link';
-import { Carousel, HStack, Stack, Text } from 'soapbox/components/ui';
-import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover';
+import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
+import Link from 'soapbox/components/link.tsx';
+import Carousel from 'soapbox/components/ui/carousel.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import PlaceholderGroupDiscover from 'soapbox/features/placeholder/components/placeholder-group-discover.tsx';
 
-import GroupGridItem from './group-grid-item';
+import GroupGridItem from './group-grid-item.tsx';
 
 const SuggestedGroups = () => {
   const { groups, isFetching, isFetched, isError } = useSuggestedGroups();
diff --git a/src/features/groups/components/discover/tag-list-item.test.tsx b/src/features/groups/components/discover/tag-list-item.test.tsx
index 6d8485d99..c57f2e0d8 100644
--- a/src/features/groups/components/discover/tag-list-item.test.tsx
+++ b/src/features/groups/components/discover/tag-list-item.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildGroupTag } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildGroupTag } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import TagListItem from './tag-list-item';
+import TagListItem from './tag-list-item.tsx';
 
 describe('<TagListItem', () => {
   it('should render correctly', () => {
diff --git a/src/features/groups/components/discover/tag-list-item.tsx b/src/features/groups/components/discover/tag-list-item.tsx
index f0e472dac..55b7e167a 100644
--- a/src/features/groups/components/discover/tag-list-item.tsx
+++ b/src/features/groups/components/discover/tag-list-item.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Stack, Text } from 'soapbox/components/ui';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import type { GroupTag } from 'soapbox/schemas';
+import type { GroupTag } from 'soapbox/schemas/index.ts';
 
 interface ITagListItem {
   tag: GroupTag;
diff --git a/src/features/groups/components/group-link-preview.tsx b/src/features/groups/components/group-link-preview.tsx
index 6a7645bc9..d09eaa18d 100644
--- a/src/features/groups/components/group-link-preview.tsx
+++ b/src/features/groups/components/group-link-preview.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Button, CardTitle, Stack } from 'soapbox/components/ui';
-import { type Card as StatusCard } from 'soapbox/types/entities';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { CardTitle } from 'soapbox/components/ui/card.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { type Card as StatusCard } from 'soapbox/types/entities.ts';
 
 interface IGroupLinkPreview {
   card: StatusCard;
diff --git a/src/features/groups/components/pending-groups-row.tsx b/src/features/groups/components/pending-groups-row.tsx
index 101da43bc..3b1ae37eb 100644
--- a/src/features/groups/components/pending-groups-row.tsx
+++ b/src/features/groups/components/pending-groups-row.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-
-import { usePendingGroups } from 'soapbox/api/hooks';
-import { PendingItemsRow } from 'soapbox/components/pending-items-row';
-import { Divider } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
+import { usePendingGroups } from 'soapbox/api/hooks/index.ts';
+import { PendingItemsRow } from 'soapbox/components/pending-items-row.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 export default () => {
   const features = useFeatures();
diff --git a/src/features/groups/components/tab-bar.tsx b/src/features/groups/components/tab-bar.tsx
index 4d358db9c..9415ea325 100644
--- a/src/features/groups/components/tab-bar.tsx
+++ b/src/features/groups/components/tab-bar.tsx
@@ -1,9 +1,9 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Tabs } from 'soapbox/components/ui';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs';
+import type { Item } from 'soapbox/components/ui/tabs.tsx';
 
 export enum TabItems {
   MY_GROUPS = 'MY_GROUPS',
diff --git a/src/features/groups/discover.test.tsx b/src/features/groups/discover.test.tsx
index 349999e7a..2454d32e8 100644
--- a/src/features/groups/discover.test.tsx
+++ b/src/features/groups/discover.test.tsx
@@ -1,11 +1,11 @@
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 
-import { buildAccount } from 'soapbox/jest/factory';
-import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import Discover from './discover';
+import Discover from './discover.tsx';
 
 vi.mock('../../../hooks/useDimensions', () => ({
   useDimensions: () => [{ scrollWidth: 190 }, null, { width: 300 }],
diff --git a/src/features/groups/discover.tsx b/src/features/groups/discover.tsx
index 6b42876c1..ed5510b35 100644
--- a/src/features/groups/discover.tsx
+++ b/src/features/groups/discover.tsx
@@ -1,13 +1,20 @@
-import React, { useState } from 'react';
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import searchIcon from '@tabler/icons/outline/search.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
-import PopularGroups from './components/discover/popular-groups';
-import PopularTags from './components/discover/popular-tags';
-import Search from './components/discover/search/search';
-import SuggestedGroups from './components/discover/suggested-groups';
-import TabBar, { TabItems } from './components/tab-bar';
+import PopularGroups from './components/discover/popular-groups.tsx';
+import PopularTags from './components/discover/popular-tags.tsx';
+import Search from './components/discover/search/search.tsx';
+import SuggestedGroups from './components/discover/suggested-groups.tsx';
+import TabBar, { TabItems } from './components/tab-bar.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'groups.discover.search.placeholder', defaultMessage: 'Search' },
@@ -36,7 +43,7 @@ const Discover: React.FC = () => {
         <HStack alignItems='center'>
           {isSearching ? (
             <IconButton
-              src={require('@tabler/icons/outline/arrow-left.svg')}
+              src={arrowLeftIcon}
               iconClassName='mr-2 h-5 w-5 fill-current text-gray-600 rtl:rotate-180'
               onClick={cancelSearch}
               data-testid='group-search-icon'
@@ -55,7 +62,7 @@ const Discover: React.FC = () => {
             append={
               <button onClick={clearValue}>
                 <Icon
-                  src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
+                  src={hasSearchValue ? xIcon : searchIcon}
                   className='size-4 text-gray-700 dark:text-gray-600'
                   aria-hidden='true'
                 />
diff --git a/src/features/groups/index.tsx b/src/features/groups/index.tsx
index f85b9d474..0af2987b7 100644
--- a/src/features/groups/index.tsx
+++ b/src/features/groups/index.tsx
@@ -1,19 +1,26 @@
-import React, { useState } from 'react';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useGroups } from 'soapbox/api/hooks';
-import GroupCard from 'soapbox/components/group-card';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Input, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useDebounce, useFeatures } from 'soapbox/hooks';
-import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useGroups } from 'soapbox/api/hooks/index.ts';
+import GroupCard from 'soapbox/components/group-card.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions.ts';
 
-import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
+import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card.tsx';
 
-import PendingGroupsRow from './components/pending-groups-row';
-import TabBar, { TabItems } from './components/tab-bar';
+import PendingGroupsRow from './components/pending-groups-row.tsx';
+import TabBar, { TabItems } from './components/tab-bar.tsx';
 
 const messages = defineMessages({
   placeholder: { id: 'groups.search.placeholder', defaultMessage: 'Search My Groups' },
@@ -79,7 +86,7 @@ const Groups: React.FC = () => {
       {canCreateGroup && (
         <Button
           className='xl:hidden'
-          icon={require('@tabler/icons/outline/circles.svg')}
+          icon={circlesIcon}
           onClick={createGroup}
           theme='secondary'
           block
diff --git a/src/features/groups/pending-requests.tsx b/src/features/groups/pending-requests.tsx
index 34a5a56e0..10045034d 100644
--- a/src/features/groups/pending-requests.tsx
+++ b/src/features/groups/pending-requests.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { usePendingGroups } from 'soapbox/api/hooks';
-import GroupCard from 'soapbox/components/group-card';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Stack, Text } from 'soapbox/components/ui';
+import { usePendingGroups } from 'soapbox/api/hooks/index.ts';
+import GroupCard from 'soapbox/components/group-card.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card';
+import PlaceholderGroupCard from '../placeholder/components/placeholder-group-card.tsx';
 
 const messages = defineMessages({
   label: { id: 'groups.pending.label', defaultMessage: 'Pending Requests' },
diff --git a/src/features/groups/popular.tsx b/src/features/groups/popular.tsx
index a2c464d79..72a9ffdce 100644
--- a/src/features/groups/popular.tsx
+++ b/src/features/groups/popular.tsx
@@ -1,22 +1,22 @@
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { usePopularGroups } from 'soapbox/api/hooks';
-import { Column } from 'soapbox/components/ui';
+import { usePopularGroups } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
-import GroupGridItem from './components/discover/group-grid-item';
-import GroupListItem from './components/discover/group-list-item';
-import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons';
+import GroupGridItem from './components/discover/group-grid-item.tsx';
+import GroupListItem from './components/discover/group-list-item.tsx';
+import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   label: { id: 'groups.popular.label', defaultMessage: 'Suggested Groups' },
 });
 
-const GridList: Components['List'] = React.forwardRef((props, ref) => {
+const GridList: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
diff --git a/src/features/groups/suggested.tsx b/src/features/groups/suggested.tsx
index 8a3e570e0..2cf80bc9b 100644
--- a/src/features/groups/suggested.tsx
+++ b/src/features/groups/suggested.tsx
@@ -1,22 +1,22 @@
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { useSuggestedGroups } from 'soapbox/api/hooks';
-import { Column } from 'soapbox/components/ui';
+import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
-import GroupGridItem from './components/discover/group-grid-item';
-import GroupListItem from './components/discover/group-list-item';
-import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons';
+import GroupGridItem from './components/discover/group-grid-item.tsx';
+import GroupListItem from './components/discover/group-list-item.tsx';
+import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   label: { id: 'groups.suggested.label', defaultMessage: 'Suggested Groups' },
 });
 
-const GridList: Components['List'] = React.forwardRef((props, ref) => {
+const GridList: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
diff --git a/src/features/groups/tag.tsx b/src/features/groups/tag.tsx
index 3eeab1794..2a275ea7a 100644
--- a/src/features/groups/tag.tsx
+++ b/src/features/groups/tag.tsx
@@ -1,21 +1,25 @@
+import layoutGridIcon from '@tabler/icons/outline/layout-grid.svg';
+import layoutListIcon from '@tabler/icons/outline/layout-list.svg';
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { useGroupTag, useGroupsFromTag } from 'soapbox/api/hooks';
-import { Column, HStack, Icon } from 'soapbox/components/ui';
+import { useGroupTag, useGroupsFromTag } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
 
-import GroupGridItem from './components/discover/group-grid-item';
-import GroupListItem from './components/discover/group-list-item';
+import GroupGridItem from './components/discover/group-grid-item.tsx';
+import GroupListItem from './components/discover/group-list-item.tsx';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 enum Layout {
   LIST = 'LIST',
   GRID = 'GRID'
 }
 
-const GridList: Components['List'] = React.forwardRef((props, ref) => {
+const GridList: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
@@ -65,7 +69,7 @@ const Tag: React.FC<ITag> = (props) => {
         <HStack alignItems='center'>
           <button onClick={() => setLayout(Layout.LIST)}>
             <Icon
-              src={require('@tabler/icons/outline/layout-list.svg')}
+              src={layoutListIcon}
               className={
                 clsx('size-5 text-gray-600', {
                   'text-primary-600': layout === Layout.LIST,
@@ -76,7 +80,7 @@ const Tag: React.FC<ITag> = (props) => {
 
           <button onClick={() => setLayout(Layout.GRID)}>
             <Icon
-              src={require('@tabler/icons/outline/layout-grid.svg')}
+              src={layoutGridIcon}
               className={
                 clsx('size-5 text-gray-600', {
                   'text-primary-600': layout === Layout.GRID,
diff --git a/src/features/groups/tags.tsx b/src/features/groups/tags.tsx
index aa37a514b..24f22ba81 100644
--- a/src/features/groups/tags.tsx
+++ b/src/features/groups/tags.tsx
@@ -1,14 +1,14 @@
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Virtuoso } from 'react-virtuoso';
 
-import { usePopularTags } from 'soapbox/api/hooks';
-import { Column, Text } from 'soapbox/components/ui';
+import { usePopularTags } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import TagListItem from './components/discover/tag-list-item';
+import TagListItem from './components/discover/tag-list-item.tsx';
 
-import type { GroupTag } from 'soapbox/schemas';
+import type { GroupTag } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   title: { id: 'groups.tags.title', defaultMessage: 'Browse Topics' },
diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx
index 0a39bdfeb..2416495b8 100644
--- a/src/features/hashtag-timeline/index.tsx
+++ b/src/features/hashtag-timeline/index.tsx
@@ -1,14 +1,19 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchHashtag, followHashtag, unfollowHashtag } from 'soapbox/actions/tags';
-import { expandHashtagTimeline, clearTimeline } from 'soapbox/actions/timelines';
-import { useHashtagStream } from 'soapbox/api/hooks';
-import List, { ListItem } from 'soapbox/components/list';
-import { Column, Toggle } from 'soapbox/components/ui';
-import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { fetchHashtag, followHashtag, unfollowHashtag } from 'soapbox/actions/tags.ts';
+import { expandHashtagTimeline, clearTimeline } from 'soapbox/actions/timelines.ts';
+import { useHashtagStream } from 'soapbox/api/hooks/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import Timeline from 'soapbox/features/ui/components/timeline.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 interface IHashtagTimeline {
   params?: {
diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx
index 607c72b09..426b46c8c 100644
--- a/src/features/home-timeline/index.tsx
+++ b/src/features/home-timeline/index.tsx
@@ -1,13 +1,19 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { expandHomeTimeline } from 'soapbox/actions/timelines';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column, Stack, Text } from 'soapbox/components/ui';
-import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Timeline from 'soapbox/features/ui/components/timeline.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
diff --git a/src/features/import-data/components/csv-importer.tsx b/src/features/import-data/components/csv-importer.tsx
index 77661233f..313e4ba16 100644
--- a/src/features/import-data/components/csv-importer.tsx
+++ b/src/features/import-data/components/csv-importer.tsx
@@ -1,10 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
-import { Button, FileInput, Form, FormActions, FormGroup, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import Button from 'soapbox/components/ui/button.tsx';
+import FileInput from 'soapbox/components/ui/file-input.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 interface ICSVImporter {
   messages: {
diff --git a/src/features/import-data/index.tsx b/src/features/import-data/index.tsx
index 812fb20fb..48ba30016 100644
--- a/src/features/import-data/index.tsx
+++ b/src/features/import-data/index.tsx
@@ -1,14 +1,13 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
   importFollows,
   importBlocks,
   importMutes,
-} from 'soapbox/actions/import-data';
-import { Column } from 'soapbox/components/ui';
+} from 'soapbox/actions/import-data.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
-import CSVImporter from './components/csv-importer';
+import CSVImporter from './components/csv-importer.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.import_data', defaultMessage: 'Import data' },
diff --git a/src/features/intentional-error/index.tsx b/src/features/intentional-error/index.tsx
index fc0eca529..ea588882a 100644
--- a/src/features/intentional-error/index.tsx
+++ b/src/features/intentional-error/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 /**
  * IntentionalError:
  * For testing logging/monitoring & previewing ErrorBoundary design.
diff --git a/src/features/landing-timeline/components/logo-text.tsx b/src/features/landing-timeline/components/logo-text.tsx
index 1cae1112c..6136c382b 100644
--- a/src/features/landing-timeline/components/logo-text.tsx
+++ b/src/features/landing-timeline/components/logo-text.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface ILogoText extends Pick<React.HTMLAttributes<HTMLHeadingElement>, 'dir'> {
   children: React.ReactNode;
 }
diff --git a/src/features/landing-timeline/components/site-banner.tsx b/src/features/landing-timeline/components/site-banner.tsx
index 11a652158..d4c486559 100644
--- a/src/features/landing-timeline/components/site-banner.tsx
+++ b/src/features/landing-timeline/components/site-banner.tsx
@@ -1,12 +1,11 @@
 import DOMPurify from 'isomorphic-dompurify';
-import React from 'react';
 
-import Markup from 'soapbox/components/markup';
-import { Stack } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
-import { getTextDirection } from 'soapbox/utils/rtl';
+import Markup from 'soapbox/components/markup.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import { LogoText } from './logo-text';
+import { LogoText } from './logo-text.tsx';
 
 const SiteBanner: React.FC = () => {
   const { instance } = useInstance();
diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx
index 1869568ba..8bd19a80c 100644
--- a/src/features/landing-timeline/index.tsx
+++ b/src/features/landing-timeline/index.tsx
@@ -1,17 +1,20 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { expandCommunityTimeline } from 'soapbox/actions/timelines';
-import { useCommunityStream } from 'soapbox/api/hooks';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandCommunityTimeline } from 'soapbox/actions/timelines.ts';
+import { useCommunityStream } from 'soapbox/api/hooks/index.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
-import AboutPage from '../about';
-import Timeline from '../ui/components/timeline';
+import AboutPage from '../about/index.tsx';
+import Timeline from '../ui/components/timeline.tsx';
 
-import { SiteBanner } from './components/site-banner';
+import { SiteBanner } from './components/site-banner.tsx';
 
 const LandingTimeline = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/list-adder/components/list.tsx b/src/features/list-adder/components/list.tsx
index a6f12ce53..53bc7a7ad 100644
--- a/src/features/list-adder/components/list.tsx
+++ b/src/features/list-adder/components/list.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
+import listIcon from '@tabler/icons/outline/list.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { removeFromListAdder, addToListAdder } from 'soapbox/actions/lists';
-import Icon from 'soapbox/components/icon';
-import IconButton from 'soapbox/components/icon-button';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { removeFromListAdder, addToListAdder } from 'soapbox/actions/lists.ts';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import Icon from 'soapbox/components/icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
@@ -30,14 +33,14 @@ const List: React.FC<IList> = ({ listId }) => {
   let button;
 
   if (added) {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton iconClassName='h-5 w-5' src={xIcon} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton iconClassName='h-5 w-5' src={plusIcon} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
     <div className='flex items-center gap-1.5 px-2 py-4 text-black dark:text-white'>
-      <Icon src={require('@tabler/icons/outline/list.svg')} />
+      <Icon src={listIcon} />
       <span className='grow'>
         {list.title}
       </span>
diff --git a/src/features/list-adder/index.tsx b/src/features/list-adder/index.tsx
index 555ad2724..4fe0886dd 100644
--- a/src/features/list-adder/index.tsx
+++ b/src/features/list-adder/index.tsx
@@ -1,19 +1,21 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
-import { setupListAdder, resetListAdder } from 'soapbox/actions/lists';
-import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { setupListAdder, resetListAdder } from 'soapbox/actions/lists.ts';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import NewListForm from '../lists/components/new-list-form';
+import NewListForm from '../lists/components/new-list-form.tsx';
 
-import List from './components/list';
+import List from './components/list.tsx';
 
 import type { List as ImmutableList } from 'immutable';
-import type { RootState } from 'soapbox/store';
-import type { List as ListEntity } from 'soapbox/types/entities';
+import type { RootState } from 'soapbox/store.ts';
+import type { List as ListEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
diff --git a/src/features/list-editor/components/account.tsx b/src/features/list-editor/components/account.tsx
index 4a28a3c41..fe1d424df 100644
--- a/src/features/list-editor/components/account.tsx
+++ b/src/features/list-editor/components/account.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { removeFromListEditor, addToListEditor } from 'soapbox/actions/lists.ts';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
@@ -28,9 +30,9 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   let button;
 
   if (isAdded) {
-    button = <IconButton src={require('@tabler/icons/outline/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={xIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/src/features/list-editor/components/edit-list-form.tsx b/src/features/list-editor/components/edit-list-form.tsx
index e41db67de..96c45a45b 100644
--- a/src/features/list-editor/components/edit-list-form.tsx
+++ b/src/features/list-editor/components/edit-list-form.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   title: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
diff --git a/src/features/list-editor/components/search.tsx b/src/features/list-editor/components/search.tsx
index c02f08ef8..6641286ca 100644
--- a/src/features/list-editor/components/search.tsx
+++ b/src/features/list-editor/components/search.tsx
@@ -1,11 +1,15 @@
+import backspaceIcon from '@tabler/icons/outline/backspace.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
@@ -45,7 +49,7 @@ const Search = () => {
             placeholder={intl.formatMessage(messages.search)}
           />
           <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-            <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-pointer text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
+            <SvgIcon src={backspaceIcon} aria-label={intl.formatMessage(messages.search)} className={clsx('pointer-events-none absolute right-4 top-1/2 z-20 inline-block size-4.5 -translate-y-1/2 cursor-pointer text-[16px] text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': hasValue })} />
           </div>
         </label>
 
diff --git a/src/features/list-editor/index.tsx b/src/features/list-editor/index.tsx
index a1fd5f43c..f8051ce02 100644
--- a/src/features/list-editor/index.tsx
+++ b/src/features/list-editor/index.tsx
@@ -1,13 +1,15 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { setupListEditor, resetListEditor } from 'soapbox/actions/lists';
-import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { setupListEditor, resetListEditor } from 'soapbox/actions/lists.ts';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import Account from './components/account';
-import EditListForm from './components/edit-list-form';
-import Search from './components/search';
+import Account from './components/account.tsx';
+import EditListForm from './components/edit-list-form.tsx';
+import Search from './components/search.tsx';
 
 const messages = defineMessages({
   changeTitle: { id: 'lists.edit.submit', defaultMessage: 'Change title' },
diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx
index 19974e6ad..cbcecd06b 100644
--- a/src/features/list-timeline/index.tsx
+++ b/src/features/list-timeline/index.tsx
@@ -1,17 +1,21 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { fetchList } from 'soapbox/actions/lists';
-import { openModal } from 'soapbox/actions/modals';
-import { expandListTimeline } from 'soapbox/actions/timelines';
-import { useListStream } from 'soapbox/api/hooks';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import { Column, Button, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { fetchList } from 'soapbox/actions/lists.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { expandListTimeline } from 'soapbox/actions/timelines.ts';
+import { useListStream } from 'soapbox/api/hooks/index.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
 const ListTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/lists/components/new-list-form.tsx b/src/features/lists/components/new-list-form.tsx
index 275117016..bd05b15b0 100644
--- a/src/features/lists/components/new-list-form.tsx
+++ b/src/features/lists/components/new-list-form.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists';
-import { Button, Form, HStack, Input } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { changeListEditorTitle, submitListEditor } from 'soapbox/actions/lists.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 const messages = defineMessages({
   label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
diff --git a/src/features/lists/index.tsx b/src/features/lists/index.tsx
index 498b6472c..fa667fd9b 100644
--- a/src/features/lists/index.tsx
+++ b/src/features/lists/index.tsx
@@ -1,18 +1,24 @@
-import React, { useEffect } from 'react';
+import listIcon from '@tabler/icons/outline/list.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { createSelector } from 'reselect';
 
-import { deleteList, fetchLists } from 'soapbox/actions/lists';
-import { openModal } from 'soapbox/actions/modals';
-import Icon from 'soapbox/components/icon';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, IconButton, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { deleteList, fetchLists } from 'soapbox/actions/lists.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import NewListForm from './components/new-list-form';
+import NewListForm from './components/new-list-form.tsx';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.lists', defaultMessage: 'Lists' },
@@ -84,12 +90,12 @@ const Lists: React.FC = () => {
         >
           {lists.map((list: any) => (
             <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800'>
-              <Icon src={require('@tabler/icons/outline/list.svg')} />
+              <Icon src={listIcon} />
               <span className='grow'>
                 {list.title}
               </span>
-              <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/outline/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/outline/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={pencilIcon} 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={trashIcon} onClick={handleDeleteClick(list.id)} title={intl.formatMessage(messages.deleteList)} />
             </Link>
           ))}
         </ScrollableList>
diff --git a/src/features/migration/index.tsx b/src/features/migration/index.tsx
index 6d19d172f..a1ebf42b5 100644
--- a/src/features/migration/index.tsx
+++ b/src/features/migration/index.tsx
@@ -1,11 +1,18 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { moveAccount } from 'soapbox/actions/security';
-import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useInstance } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { moveAccount } from 'soapbox/actions/security.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.migration', defaultMessage: 'Account migration' },
diff --git a/src/features/mutes/components/group-list-item.tsx b/src/features/mutes/components/group-list-item.tsx
index 2e839678c..3f8280c33 100644
--- a/src/features/mutes/components/group-list-item.tsx
+++ b/src/features/mutes/components/group-list-item.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useUnmuteGroup } from 'soapbox/api/hooks';
-import GroupAvatar from 'soapbox/components/groups/group-avatar';
-import { Button, HStack, Text } from 'soapbox/components/ui';
-import { type Group } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { useUnmuteGroup } from 'soapbox/api/hooks/index.ts';
+import GroupAvatar from 'soapbox/components/groups/group-avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { type Group } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 interface IGroupListItem {
   group: Group;
diff --git a/src/features/mutes/index.tsx b/src/features/mutes/index.tsx
index c7c25bf35..7bff02461 100644
--- a/src/features/mutes/index.tsx
+++ b/src/features/mutes/index.tsx
@@ -1,13 +1,15 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { useMutes, useGroupMutes } from 'soapbox/api/hooks';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Stack, Tabs } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useFeatures } from 'soapbox/hooks';
+import { useMutes, useGroupMutes } from 'soapbox/api/hooks/index.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
-import GroupListItem from './components/group-list-item';
+import GroupListItem from './components/group-list-item.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.mutes', defaultMessage: 'Mutes' },
diff --git a/src/features/new-status/index.tsx b/src/features/new-status/index.tsx
index e5b4aacd2..c30938bfa 100644
--- a/src/features/new-status/index.tsx
+++ b/src/features/new-status/index.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const NewStatus = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/nostr-relays/components/relay-editor.tsx b/src/features/nostr-relays/components/relay-editor.tsx
index 14618046f..6503202e3 100644
--- a/src/features/nostr-relays/components/relay-editor.tsx
+++ b/src/features/nostr-relays/components/relay-editor.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { HStack, Input, Select } from 'soapbox/components/ui';
-import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import { useInstance } from 'soapbox/hooks';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
+import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 interface IRelayEditor {
   relays: RelayData[];
diff --git a/src/features/nostr-relays/index.tsx b/src/features/nostr-relays/index.tsx
index 6b64adbaa..1877aea3d 100644
--- a/src/features/nostr-relays/index.tsx
+++ b/src/features/nostr-relays/index.tsx
@@ -1,13 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Button, Column, Form, FormActions, Stack } from 'soapbox/components/ui';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { useNostrReq } from 'soapbox/features/nostr/hooks/useNostrReq';
-import { useOwnAccount } from 'soapbox/hooks';
-import { useSigner } from 'soapbox/hooks/nostr/useSigner';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useNostrReq } from 'soapbox/features/nostr/hooks/useNostrReq.ts';
+import { useSigner } from 'soapbox/hooks/nostr/useSigner.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
-import RelayEditor, { RelayData } from './components/relay-editor';
+import RelayEditor, { RelayData } from './components/relay-editor.tsx';
 
 const messages = defineMessages({
   title: { id: 'nostr_relays.title', defaultMessage: 'Relays' },
diff --git a/src/features/nostr/Bech32Redirect.tsx b/src/features/nostr/Bech32Redirect.tsx
index 4c9fdb16b..45412f7dc 100644
--- a/src/features/nostr/Bech32Redirect.tsx
+++ b/src/features/nostr/Bech32Redirect.tsx
@@ -1,8 +1,7 @@
 import { nip19 } from 'nostr-tools';
-import React from 'react';
 import { Redirect } from 'react-router-dom';
 
-import MissingIndicator from 'soapbox/components/missing-indicator';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
 
 interface INIP19Redirect {
   params: {
diff --git a/src/features/nostr/hooks/useNostrReq.ts b/src/features/nostr/hooks/useNostrReq.ts
index 1d4a01a6e..aee482f59 100644
--- a/src/features/nostr/hooks/useNostrReq.ts
+++ b/src/features/nostr/hooks/useNostrReq.ts
@@ -2,8 +2,8 @@ import { NSet, NostrEvent, NostrFilter } from '@nostrify/nostrify';
 import isEqual from 'lodash/isEqual';
 import { useEffect, useRef, useState } from 'react';
 
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { useForceUpdate } from 'soapbox/hooks/useForceUpdate';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useForceUpdate } from 'soapbox/hooks/useForceUpdate.ts';
 
 /**
  * Streams events from the relay for the given filters.
diff --git a/src/features/nostr/keyring.ts b/src/features/nostr/keyring.ts
index 6ae33502a..7de9e017f 100644
--- a/src/features/nostr/keyring.ts
+++ b/src/features/nostr/keyring.ts
@@ -1,4 +1,4 @@
-import { NKeyring } from './NKeyring';
+import { NKeyring } from './NKeyring.ts';
 
 export const keyring = new NKeyring(
   localStorage,
diff --git a/src/features/nostr/nostr-bunker-login.tsx b/src/features/nostr/nostr-bunker-login.tsx
index c4f2350ab..cec86c110 100644
--- a/src/features/nostr/nostr-bunker-login.tsx
+++ b/src/features/nostr/nostr-bunker-login.tsx
@@ -1,18 +1,21 @@
-import React from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { authLoggedIn, verifyCredentials } from 'soapbox/actions/auth';
-import { obtainOAuthToken } from 'soapbox/actions/oauth';
-import { Button, Form, Input, Spinner } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { authLoggedIn, verifyCredentials } from 'soapbox/actions/auth.ts';
+import { obtainOAuthToken } from 'soapbox/actions/oauth.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 export const NostrBunkerLogin: React.FC = () => {
   const history = useHistory();
   const dispatch = useAppDispatch();
 
-  const [uri, setUri] = React.useState<string>('');
-  const [loading, setLoading] = React.useState<boolean>(false);
+  const [uri, setUri] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
 
   const onSubmit = async () => {
     const url = new URL(uri);
diff --git a/src/features/notifications/components/filter-bar.tsx b/src/features/notifications/components/filter-bar.tsx
index 45f67d884..006d7eb31 100644
--- a/src/features/notifications/components/filter-bar.tsx
+++ b/src/features/notifications/components/filter-bar.tsx
@@ -1,12 +1,20 @@
-import React from 'react';
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import moodSmileIcon from '@tabler/icons/outline/mood-smile.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { setFilter } from 'soapbox/actions/notifications';
-import Icon from 'soapbox/components/icon';
-import { Tabs } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks';
+import { setFilter } from 'soapbox/actions/notifications.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs';
+import type { Item } from 'soapbox/components/ui/tabs.tsx';
 
 const messages = defineMessages({
   all: { id: 'notifications.filter.all', defaultMessage: 'All' },
@@ -46,43 +54,43 @@ const NotificationFilterBar = () => {
     });
   } else {
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/at.svg')} />,
+      text: <Icon src={atIcon} />,
       title: intl.formatMessage(messages.mentions),
       action: onClick('mention'),
       name: 'mention',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/heart.svg')} />,
+      text: <Icon src={heartIcon} />,
       title: intl.formatMessage(messages.favourites),
       action: onClick('favourite'),
       name: 'favourite',
     });
     if (features.emojiReacts) items.push({
-      text: <Icon src={require('@tabler/icons/outline/mood-smile.svg')} />,
+      text: <Icon src={moodSmileIcon} />,
       title: intl.formatMessage(messages.emoji_reacts),
       action: onClick('pleroma:emoji_reaction'),
       name: 'pleroma:emoji_reaction',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/repeat.svg')} />,
+      text: <Icon src={repeatIcon} />,
       title: intl.formatMessage(messages.boosts),
       action: onClick('reblog'),
       name: 'reblog',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/chart-bar.svg')} />,
+      text: <Icon src={chartBarIcon} />,
       title: intl.formatMessage(messages.polls),
       action: onClick('poll'),
       name: 'poll',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/bell-ringing.svg')} />,
+      text: <Icon src={bellRingingIcon} />,
       title: intl.formatMessage(messages.statuses),
       action: onClick('status'),
       name: 'status',
     });
     items.push({
-      text: <Icon src={require('@tabler/icons/outline/user-plus.svg')} />,
+      text: <Icon src={userPlusIcon} />,
       title: intl.formatMessage(messages.follows),
       action: onClick('follow'),
       name: 'follow',
diff --git a/src/features/notifications/components/notification.test.tsx b/src/features/notifications/components/notification.test.tsx
index 7a99bdb6c..140a714de 100644
--- a/src/features/notifications/components/notification.test.tsx
+++ b/src/features/notifications/components/notification.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { updateNotifications } from 'soapbox/actions/notifications';
-import { render, screen, rootState, createTestStore } from 'soapbox/jest/test-helpers';
+import { updateNotifications } from 'soapbox/actions/notifications.ts';
+import { render, screen, rootState, createTestStore } from 'soapbox/jest/test-helpers.tsx';
 
-import Notification from './notification';
+import Notification from './notification.tsx';
 
 /** Prepare the notification for use by the component */
 const normalize = (notification: any) => {
diff --git a/src/features/notifications/components/notification.tsx b/src/features/notifications/components/notification.tsx
index 64c4e3f4e..24d48b7ca 100644
--- a/src/features/notifications/components/notification.tsx
+++ b/src/features/notifications/components/notification.tsx
@@ -1,26 +1,46 @@
-import React, { useCallback } from 'react';
+import atIcon from '@tabler/icons/outline/at.svg';
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import briefcaseIcon from '@tabler/icons/outline/briefcase.svg';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
+import calendarTimeIcon from '@tabler/icons/outline/calendar-time.svg';
+import chartBarIcon from '@tabler/icons/outline/chart-bar.svg';
+import heartIcon from '@tabler/icons/outline/heart.svg';
+import messagesIcon from '@tabler/icons/outline/messages.svg';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
+import pencilIcon from '@tabler/icons/outline/pencil.svg';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
+import userCheckIcon from '@tabler/icons/outline/user-check.svg';
+import userPlusIcon from '@tabler/icons/outline/user-plus.svg';
+import { useCallback } from 'react';
 import { defineMessages, useIntl, IntlShape, MessageDescriptor, defineMessage, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
-import { mentionCompose } from 'soapbox/actions/compose';
-import { reblog, favourite, unreblog, unfavourite } from 'soapbox/actions/interactions';
-import { patchMe } from 'soapbox/actions/me';
-import { openModal } from 'soapbox/actions/modals';
-import { getSettings } from 'soapbox/actions/settings';
-import { hideStatus, revealStatus } from 'soapbox/actions/statuses';
-import Icon from 'soapbox/components/icon';
-import Status from 'soapbox/components/status';
-import { HStack, Text, Emoji, Button, Stack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import StatusContainer from 'soapbox/containers/status-container';
-import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
-import { makeGetNotification } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
-import { NotificationType, validType } from 'soapbox/utils/notification';
+import { mentionCompose } from 'soapbox/actions/compose.ts';
+import { reblog, favourite, unreblog, unfavourite } from 'soapbox/actions/interactions.ts';
+import { patchMe } from 'soapbox/actions/me.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { hideStatus, revealStatus } from 'soapbox/actions/statuses.ts';
+import Icon from 'soapbox/components/icon.tsx';
+import Status from 'soapbox/components/status.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { makeGetNotification } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { NotificationType, validType } from 'soapbox/utils/notification.ts';
 
-import type { ScrollPosition } from 'soapbox/components/status';
-import type { Account as AccountEntity, Status as StatusEntity, Notification as NotificationEntity } from 'soapbox/types/entities';
+import type { ScrollPosition } from 'soapbox/components/status.tsx';
+import type { Account as AccountEntity, Status as StatusEntity, Notification as NotificationEntity } from 'soapbox/types/entities.ts';
 
 const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: Date) => {
   const output = [message];
@@ -42,25 +62,25 @@ const buildLink = (account: AccountEntity): JSX.Element => (
 );
 
 const icons: Record<NotificationType, string> = {
-  follow: require('@tabler/icons/outline/user-plus.svg'),
-  follow_request: require('@tabler/icons/outline/user-plus.svg'),
-  mention: require('@tabler/icons/outline/at.svg'),
-  favourite: require('@tabler/icons/outline/heart.svg'),
-  group_favourite: require('@tabler/icons/outline/heart.svg'),
-  reblog: require('@tabler/icons/outline/repeat.svg'),
-  group_reblog: require('@tabler/icons/outline/repeat.svg'),
-  status: require('@tabler/icons/outline/bell-ringing.svg'),
-  poll: require('@tabler/icons/outline/chart-bar.svg'),
-  move: require('@tabler/icons/outline/briefcase.svg'),
-  'pleroma:chat_mention': require('@tabler/icons/outline/messages.svg'),
-  'pleroma:emoji_reaction': require('@tabler/icons/outline/mood-happy.svg'),
-  user_approved: require('@tabler/icons/outline/user-plus.svg'),
-  update: require('@tabler/icons/outline/pencil.svg'),
-  'pleroma:event_reminder': require('@tabler/icons/outline/calendar-time.svg'),
-  'pleroma:participation_request': require('@tabler/icons/outline/calendar-event.svg'),
-  'pleroma:participation_accepted': require('@tabler/icons/outline/calendar-event.svg'),
-  'ditto:name_grant': require('@tabler/icons/outline/user-check.svg'),
-  'ditto:zap': require('@tabler/icons/outline/bolt.svg'),
+  follow: userPlusIcon,
+  follow_request: userPlusIcon,
+  mention: atIcon,
+  favourite: heartIcon,
+  group_favourite: heartIcon,
+  reblog: repeatIcon,
+  group_reblog: repeatIcon,
+  status: bellRingingIcon,
+  poll: chartBarIcon,
+  move: briefcaseIcon,
+  'pleroma:chat_mention': messagesIcon,
+  'pleroma:emoji_reaction': moodHappyIcon,
+  user_approved: userPlusIcon,
+  update: pencilIcon,
+  'pleroma:event_reminder': calendarTimeIcon,
+  'pleroma:participation_request': calendarEventIcon,
+  'pleroma:participation_accepted': calendarEventIcon,
+  'ditto:name_grant': userCheckIcon,
+  'ditto:zap': boltIcon,
 };
 
 const nameMessage = defineMessage({
diff --git a/src/features/notifications/components/setting-toggle.tsx b/src/features/notifications/components/setting-toggle.tsx
index 0e5054839..8dda40eb2 100644
--- a/src/features/notifications/components/setting-toggle.tsx
+++ b/src/features/notifications/components/setting-toggle.tsx
@@ -1,8 +1,7 @@
 import get from 'lodash/get';
-import React from 'react';
 
-import { Toggle } from 'soapbox/components/ui';
-import { Settings } from 'soapbox/schemas/soapbox/settings';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { Settings } from 'soapbox/schemas/soapbox/settings.ts';
 
 interface ISettingToggle {
   /** Unique identifier for the Toggle. */
diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx
index abfa780f3..f444d3507 100644
--- a/src/features/notifications/index.tsx
+++ b/src/features/notifications/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
@@ -9,22 +9,26 @@ import {
   expandNotifications,
   scrollTopNotifications,
   dequeueNotifications,
-} from 'soapbox/actions/notifications';
-import { getSettings } from 'soapbox/actions/settings';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import ScrollTopButton from 'soapbox/components/scroll-top-button';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column, Portal } from 'soapbox/components/ui';
-import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification';
-import { useAppDispatch, useAppSelector, useSettings, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+} from 'soapbox/actions/notifications.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import ScrollTopButton from 'soapbox/components/scroll-top-button.tsx';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
+import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
-import FilterBar from './components/filter-bar';
-import Notification from './components/notification';
+import FilterBar from './components/filter-bar.tsx';
+import Notification from './components/notification.tsx';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
-import type { RootState } from 'soapbox/store';
-import type { Notification as NotificationEntity } from 'soapbox/types/entities';
+import type { RootState } from 'soapbox/store.ts';
+import type { Notification as NotificationEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
diff --git a/src/features/pinned-statuses/index.tsx b/src/features/pinned-statuses/index.tsx
index e027f2bdf..e73d5617d 100644
--- a/src/features/pinned-statuses/index.tsx
+++ b/src/features/pinned-statuses/index.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { fetchPinnedStatuses } from 'soapbox/actions/pin-statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusList from 'soapbox/components/status-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { selectOwnAccount } from 'soapbox/selectors';
+import { fetchPinnedStatuses } from 'soapbox/actions/pin-statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { selectOwnAccount } from 'soapbox/selectors/index.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
diff --git a/src/features/placeholder/components/placeholder-account.tsx b/src/features/placeholder/components/placeholder-account.tsx
index c887903fd..79dfc753b 100644
--- a/src/features/placeholder/components/placeholder-account.tsx
+++ b/src/features/placeholder/components/placeholder-account.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
-import PlaceholderAvatar from './placeholder-avatar';
-import PlaceholderDisplayName from './placeholder-display-name';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
+import PlaceholderDisplayName from './placeholder-display-name.tsx';
 
 /** Fake account to display while data is loading. */
 const PlaceholderAccount: React.FC = () => (
@@ -18,4 +18,4 @@ const PlaceholderAccount: React.FC = () => (
   </HStack>
 );
 
-export default React.memo(PlaceholderAccount);
+export default memo(PlaceholderAccount);
diff --git a/src/features/placeholder/components/placeholder-avatar.tsx b/src/features/placeholder/components/placeholder-avatar.tsx
index a246aa98e..e51de2768 100644
--- a/src/features/placeholder/components/placeholder-avatar.tsx
+++ b/src/features/placeholder/components/placeholder-avatar.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React from 'react';
+import { useMemo } from 'react';
 
-import { Stack } from 'soapbox/components/ui';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 interface IPlaceholderAvatar {
   size: number;
@@ -11,7 +11,7 @@ interface IPlaceholderAvatar {
 
 /** Fake avatar to display while data is loading. */
 const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = false, className }) => {
-  const style = React.useMemo(() => {
+  const style = useMemo(() => {
     if (!size) {
       return {};
     }
diff --git a/src/features/placeholder/components/placeholder-card.tsx b/src/features/placeholder/components/placeholder-card.tsx
index 4e5130d57..87fe41dfe 100644
--- a/src/features/placeholder/components/placeholder-card.tsx
+++ b/src/features/placeholder/components/placeholder-card.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React from 'react';
+import { memo } from 'react';
 
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 /** Fake link preview to display while data is loading. */
 const PlaceholderCard: React.FC = () => (
@@ -19,4 +19,4 @@ const PlaceholderCard: React.FC = () => (
   </div>
 );
 
-export default React.memo(PlaceholderCard);
+export default memo(PlaceholderCard);
diff --git a/src/features/placeholder/components/placeholder-chat-message.tsx b/src/features/placeholder/components/placeholder-chat-message.tsx
index c11431be9..c692965d0 100644
--- a/src/features/placeholder/components/placeholder-chat-message.tsx
+++ b/src/features/placeholder/components/placeholder-chat-message.tsx
@@ -1,11 +1,12 @@
 import clsx from 'clsx';
-import React from 'react';
 
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import { randomIntFromInterval } from '../utils';
+import { randomIntFromInterval } from '../utils.ts';
 
-import PlaceholderAvatar from './placeholder-avatar';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
 
 /** Fake chat to display while data is loading. */
 const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean }) => {
diff --git a/src/features/placeholder/components/placeholder-chat.tsx b/src/features/placeholder/components/placeholder-chat.tsx
index 67149b9da..8d60e4651 100644
--- a/src/features/placeholder/components/placeholder-chat.tsx
+++ b/src/features/placeholder/components/placeholder-chat.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
-import { HStack, Stack } from 'soapbox/components/ui';
-
-import PlaceholderAvatar from './placeholder-avatar';
-import PlaceholderDisplayName from './placeholder-display-name';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
+import PlaceholderDisplayName from './placeholder-display-name.tsx';
 
 /** Fake chat to display while data is loading. */
 const PlaceholderChat = () => {
diff --git a/src/features/placeholder/components/placeholder-display-name.tsx b/src/features/placeholder/components/placeholder-display-name.tsx
index 88731af8c..9b96a849f 100644
--- a/src/features/placeholder/components/placeholder-display-name.tsx
+++ b/src/features/placeholder/components/placeholder-display-name.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import { memo } from 'react';
 
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 interface IPlaceholderDisplayName {
   maxLength: number;
@@ -21,4 +21,4 @@ const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength,
   );
 };
 
-export default React.memo(PlaceholderDisplayName);
+export default memo(PlaceholderDisplayName);
diff --git a/src/features/placeholder/components/placeholder-event-header.tsx b/src/features/placeholder/components/placeholder-event-header.tsx
index c01272944..98ec10258 100644
--- a/src/features/placeholder/components/placeholder-event-header.tsx
+++ b/src/features/placeholder/components/placeholder-event-header.tsx
@@ -1,8 +1,6 @@
-import React from 'react';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
-import { Stack } from 'soapbox/components/ui';
-
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 const PlaceholderEventHeader = () => {
   const eventNameLength = randomIntFromInterval(5, 25);
diff --git a/src/features/placeholder/components/placeholder-event-preview.tsx b/src/features/placeholder/components/placeholder-event-preview.tsx
index 09ae4e9ca..a96fe53c3 100644
--- a/src/features/placeholder/components/placeholder-event-preview.tsx
+++ b/src/features/placeholder/components/placeholder-event-preview.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import { Stack, Text } from 'soapbox/components/ui';
-
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 const PlaceholderEventPreview = () => {
   const eventNameLength = randomIntFromInterval(5, 25);
diff --git a/src/features/placeholder/components/placeholder-group-card.tsx b/src/features/placeholder/components/placeholder-group-card.tsx
index b000a9d10..6bd08cd90 100644
--- a/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/src/features/placeholder/components/placeholder-group-card.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 const PlaceholderGroupCard = () => {
   const groupNameLength = randomIntFromInterval(12, 20);
diff --git a/src/features/placeholder/components/placeholder-group-discover.tsx b/src/features/placeholder/components/placeholder-group-discover.tsx
index 21e01f737..7b15961bd 100644
--- a/src/features/placeholder/components/placeholder-group-discover.tsx
+++ b/src/features/placeholder/components/placeholder-group-discover.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 const PlaceholderGroupDiscover = () => {
   const groupNameLength = randomIntFromInterval(12, 20);
diff --git a/src/features/placeholder/components/placeholder-group-search.tsx b/src/features/placeholder/components/placeholder-group-search.tsx
index 1eb939acc..a428e92c9 100644
--- a/src/features/placeholder/components/placeholder-group-search.tsx
+++ b/src/features/placeholder/components/placeholder-group-search.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import { HStack, Stack, Text } from 'soapbox/components/ui';
-
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 export default ({ withJoinAction = true }: { withJoinAction?: boolean }) => {
   const groupNameLength = randomIntFromInterval(12, 20);
diff --git a/src/features/placeholder/components/placeholder-hashtag.tsx b/src/features/placeholder/components/placeholder-hashtag.tsx
index 8830b1e90..42ea28ed7 100644
--- a/src/features/placeholder/components/placeholder-hashtag.tsx
+++ b/src/features/placeholder/components/placeholder-hashtag.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { generateText, randomIntFromInterval } from '../utils';
+import { generateText, randomIntFromInterval } from '../utils.ts';
 
 /** Fake hashtag to display while data is loading. */
 const PlaceholderHashtag: React.FC = () => {
diff --git a/src/features/placeholder/components/placeholder-material-status.tsx b/src/features/placeholder/components/placeholder-material-status.tsx
index 4e605da3e..b2f825740 100644
--- a/src/features/placeholder/components/placeholder-material-status.tsx
+++ b/src/features/placeholder/components/placeholder-material-status.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import PlaceholderStatus from './placeholder-status';
+import PlaceholderStatus from './placeholder-status.tsx';
 
 /** Fake material status to display while data is loading. */
 const PlaceholderMaterialStatus: React.FC = () => {
diff --git a/src/features/placeholder/components/placeholder-media-gallery.tsx b/src/features/placeholder/components/placeholder-media-gallery.tsx
index 247260d05..c9abeee85 100644
--- a/src/features/placeholder/components/placeholder-media-gallery.tsx
+++ b/src/features/placeholder/components/placeholder-media-gallery.tsx
@@ -1,7 +1,7 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import type { Attachment as AttachmentEntity } from 'soapbox/types/entities';
+import type { Attachment as AttachmentEntity } from 'soapbox/types/entities.ts';
 
 interface IPlaceholderMediaGallery {
   media: ImmutableList<AttachmentEntity>;
diff --git a/src/features/placeholder/components/placeholder-notification.tsx b/src/features/placeholder/components/placeholder-notification.tsx
index 5b96f8e00..ca37f2bde 100644
--- a/src/features/placeholder/components/placeholder-notification.tsx
+++ b/src/features/placeholder/components/placeholder-notification.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
-import PlaceholderAvatar from './placeholder-avatar';
-import PlaceholderDisplayName from './placeholder-display-name';
-import PlaceholderStatusContent from './placeholder-status-content';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
+import PlaceholderDisplayName from './placeholder-display-name.tsx';
+import PlaceholderStatusContent from './placeholder-status-content.tsx';
 
 /** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
@@ -33,4 +33,4 @@ const PlaceholderNotification = () => (
   </div>
 );
 
-export default React.memo(PlaceholderNotification);
+export default memo(PlaceholderNotification);
diff --git a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index 5e53b7e78..c6cd37a21 100644
--- a/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
-import { HStack, Stack } from 'soapbox/components/ui';
-
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 export default ({ limit }: { limit: number }) => {
   const length = randomIntFromInterval(15, 3);
diff --git a/src/features/placeholder/components/placeholder-sidebar-trends.tsx b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
index 44e728284..0f743e3b6 100644
--- a/src/features/placeholder/components/placeholder-sidebar-trends.tsx
+++ b/src/features/placeholder/components/placeholder-sidebar-trends.tsx
@@ -1,8 +1,6 @@
-import React from 'react';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
-import { Stack } from 'soapbox/components/ui';
-
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 export default ({ limit }: { limit: number }) => {
   const trend = randomIntFromInterval(6, 3);
diff --git a/src/features/placeholder/components/placeholder-status-content.tsx b/src/features/placeholder/components/placeholder-status-content.tsx
index 5b785ba93..11790738d 100644
--- a/src/features/placeholder/components/placeholder-status-content.tsx
+++ b/src/features/placeholder/components/placeholder-status-content.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { randomIntFromInterval, generateText } from '../utils';
+import { randomIntFromInterval, generateText } from '../utils.ts';
 
 interface IPlaceholderStatusContent {
   maxLength: number;
diff --git a/src/features/placeholder/components/placeholder-status.tsx b/src/features/placeholder/components/placeholder-status.tsx
index 5db332c0c..ffb6c92b1 100644
--- a/src/features/placeholder/components/placeholder-status.tsx
+++ b/src/features/placeholder/components/placeholder-status.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
-import React from 'react';
+import { memo } from 'react';
 
-import { HStack } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
 
-import PlaceholderAvatar from './placeholder-avatar';
-import PlaceholderDisplayName from './placeholder-display-name';
-import PlaceholderStatusContent from './placeholder-status-content';
+import PlaceholderAvatar from './placeholder-avatar.tsx';
+import PlaceholderDisplayName from './placeholder-display-name.tsx';
+import PlaceholderStatusContent from './placeholder-status-content.tsx';
 
 interface IPlaceholderStatus {
   variant?: 'rounded' | 'slim' | 'default';
@@ -40,4 +40,4 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
   </div>
 );
 
-export default React.memo(PlaceholderStatus);
+export default memo(PlaceholderStatus);
diff --git a/src/features/preferences/index.tsx b/src/features/preferences/index.tsx
index aa15adde3..e52921d40 100644
--- a/src/features/preferences/index.tsx
+++ b/src/features/preferences/index.tsx
@@ -1,14 +1,16 @@
-import React from 'react';
+import { useMemo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { changeSetting } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
-import { Form } from 'soapbox/components/ui';
-import { SelectDropdown } from 'soapbox/features/forms';
-import SettingToggle from 'soapbox/features/notifications/components/setting-toggle';
-import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import { SelectDropdown } from 'soapbox/features/forms/index.tsx';
+import SettingToggle from 'soapbox/features/notifications/components/setting-toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
-import ThemeToggle from '../ui/components/theme-toggle';
+import ThemeToggle from '../ui/components/theme-toggle.tsx';
 
 const languages = {
   en: 'English',
@@ -101,19 +103,19 @@ const Preferences = () => {
     dispatch(changeSetting(key, checked, { showAlert: true }));
   };
 
-  const displayMediaOptions = React.useMemo(() => ({
+  const displayMediaOptions = useMemo(() => ({
     default: intl.formatMessage(messages.displayPostsDefault),
     hide_all: intl.formatMessage(messages.displayPostsHideAll),
     show_all: intl.formatMessage(messages.displayPostsShowAll),
   }), []);
 
-  const defaultPrivacyOptions = React.useMemo(() => ({
+  const defaultPrivacyOptions = useMemo(() => ({
     public: intl.formatMessage(messages.privacy_public),
     unlisted: intl.formatMessage(messages.privacy_unlisted),
     private: intl.formatMessage(messages.privacy_followers_only),
   }), []);
 
-  const defaultContentTypeOptions = React.useMemo(() => ({
+  const defaultContentTypeOptions = useMemo(() => ({
     'text/plain': intl.formatMessage(messages.content_type_plaintext),
     'text/markdown': intl.formatMessage(messages.content_type_markdown),
   }), []);
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index 0522d3dd5..31fb04e53 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -1,18 +1,25 @@
-import React, { useEffect, useState } from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { changeSetting } from 'soapbox/actions/settings';
-import { clearTimeline, expandPublicTimeline } from 'soapbox/actions/timelines';
-import { usePublicStream } from 'soapbox/api/hooks';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Accordion, Column } from 'soapbox/components/ui';
-import { LanguageDropdown } from 'soapbox/components/ui/language-dropdown/language-dropdown';
-import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme, useFeatures } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import { clearTimeline, expandPublicTimeline } from 'soapbox/actions/timelines.ts';
+import { usePublicStream } from 'soapbox/api/hooks/index.ts';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { LanguageDropdown } from 'soapbox/components/ui/language-dropdown.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
-import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';
-import Timeline from '../ui/components/timeline';
+import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker.tsx';
+import Timeline from '../ui/components/timeline.tsx';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Global timeline' },
@@ -79,7 +86,7 @@ const PublicTimeline = () => {
           <Accordion
             headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
             action={dismissExplanationBox}
-            actionIcon={require('@tabler/icons/outline/x.svg')}
+            actionIcon={xIcon}
             actionLabel={intl.formatMessage(messages.dismiss)}
             expanded={explanationBoxExpanded}
             onToggle={toggleExplanationBox}
diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx
index 42745bdbb..adf14fc59 100644
--- a/src/features/quotes/index.tsx
+++ b/src/features/quotes/index.tsx
@@ -1,14 +1,16 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes';
-import StatusList from 'soapbox/components/status-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-quotes.ts';
+import StatusList from 'soapbox/components/status-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
@@ -28,7 +30,7 @@ const Quotes: React.FC = () => {
   const isLoading = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'isLoading'], true));
   const hasMore = useAppSelector((state) => !!state.status_lists.getIn([`quotes:${statusId}`, 'next']));
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(fetchStatusQuotes(statusId));
   }, [statusId]);
 
diff --git a/src/features/register-invite/index.tsx b/src/features/register-invite/index.tsx
index 00a73dabc..3ba7d10bf 100644
--- a/src/features/register-invite/index.tsx
+++ b/src/features/register-invite/index.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
-import { BigCard } from 'soapbox/components/big-card';
-import RegistrationForm from 'soapbox/features/auth-login/components/registration-form';
-import { useInstance } from 'soapbox/hooks';
+import { BigCard } from 'soapbox/components/big-card.tsx';
+import RegistrationForm from 'soapbox/features/auth-login/components/registration-form.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
 interface RegisterInviteParams {
   token: string;
diff --git a/src/features/remote-timeline/components/pinned-hosts-picker.tsx b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
index 208cd30c5..023512809 100644
--- a/src/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-
-import { Button, HStack } from 'soapbox/components/ui';
-import { useSettings } from 'soapbox/hooks';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
 interface IPinnedHostsPicker {
   /** The active host among pinned hosts. */
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index 630fe80fd..8b04b7f86 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -1,17 +1,23 @@
-import React, { useEffect } from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { expandRemoteTimeline } from 'soapbox/actions/timelines';
-import { useRemoteStream } from 'soapbox/api/hooks';
-import IconButton from 'soapbox/components/icon-button';
-import { Column, HStack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { expandRemoteTimeline } from 'soapbox/actions/timelines.ts';
+import { useRemoteStream } from 'soapbox/api/hooks/index.ts';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../ui/components/timeline.tsx';
 
-import PinnedHostsPicker from './components/pinned-hosts-picker';
+import PinnedHostsPicker from './components/pinned-hosts-picker.tsx';
 
 interface IRemoteTimeline {
   params?: {
@@ -55,7 +61,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
 
       {!pinned && (
         <HStack className='mb-4 px-2' space={2}>
-          <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} onClick={handleCloseClick} />
+          <IconButton iconClassName='h-5 w-5' src={xIcon} onClick={handleCloseClick} />
           <Text>
             <FormattedMessage
               id='remote_timeline.filter_message'
diff --git a/src/features/reply-mentions/account.tsx b/src/features/reply-mentions/account.tsx
index 007309aac..5fee68893 100644
--- a/src/features/reply-mentions/account.tsx
+++ b/src/features/reply-mentions/account.tsx
@@ -1,13 +1,16 @@
-import React, { useEffect } from 'react';
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { fetchAccount } from 'soapbox/actions/accounts';
-import { addToMentions, removeFromMentions } from 'soapbox/actions/compose';
-import { useAccount } from 'soapbox/api/hooks';
-import AccountComponent from 'soapbox/components/account';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose } from 'soapbox/hooks';
+import { fetchAccount } from 'soapbox/actions/accounts.ts';
+import { addToMentions, removeFromMentions } from 'soapbox/actions/compose.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import AccountComponent from 'soapbox/components/account.tsx';
+import IconButton from 'soapbox/components/icon-button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
 
 const messages = defineMessages({
   remove: { id: 'reply_mentions.account.remove', defaultMessage: 'Remove from mentions' },
@@ -42,9 +45,9 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
   let button;
 
   if (added) {
-    button = <IconButton src={require('@tabler/icons/outline/x.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+    button = <IconButton src={xIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
   } else {
-    button = <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+    button = <IconButton src={plusIcon} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
   }
 
   return (
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 2b5b0539a..588545742 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx';
 import noop from 'lodash/noop';
-import React, { Suspense } from 'react';
-
-import { toggleStatusReport } from 'soapbox/actions/reports';
-import StatusContent from 'soapbox/components/status-content';
-import { Toggle } from 'soapbox/components/ui';
-import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { Suspense } from 'react';
 
+import { toggleStatusReport } from 'soapbox/actions/reports.ts';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IStatusCheckBox {
   id: string;
diff --git a/src/features/scheduled-statuses/builder.tsx b/src/features/scheduled-statuses/builder.tsx
index 95ab0d878..91ca2e742 100644
--- a/src/features/scheduled-statuses/builder.tsx
+++ b/src/features/scheduled-statuses/builder.tsx
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap } from 'immutable';
 
-import { Entities } from 'soapbox/entity-store/entities';
-import { normalizeStatus } from 'soapbox/normalizers/status';
-import { calculateStatus } from 'soapbox/reducers/statuses';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
+import { calculateStatus } from 'soapbox/reducers/statuses.ts';
 
-import type { ScheduledStatus } from 'soapbox/reducers/scheduled-statuses';
-import type { RootState } from 'soapbox/store';
+import type { ScheduledStatus } from 'soapbox/reducers/scheduled-statuses.ts';
+import type { RootState } from 'soapbox/store.ts';
 
 export const buildStatus = (state: RootState, scheduledStatus: ScheduledStatus) => {
   const me = state.me as string;
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index 8462c45ff..f57988fbd 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
+import calendarStatsIcon from '@tabler/icons/outline/calendar-stats.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { cancelScheduledStatus } from 'soapbox/actions/scheduled-statuses';
-import { getSettings } from 'soapbox/actions/settings';
-import { Button, HStack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { cancelScheduledStatus } from 'soapbox/actions/scheduled-statuses.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   cancel: { id: 'scheduled_status.cancel', defaultMessage: 'Cancel' },
@@ -33,7 +34,7 @@ const ScheduledStatusActionBar: React.FC<IScheduledStatusActionBar> = ({ status
         dispatch(cancelScheduledStatus(status.id));
       } else {
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/calendar-stats.svg'),
+          icon: calendarStatsIcon,
           heading: intl.formatMessage(messages.deleteHeading),
           message: intl.formatMessage(messages.deleteMessage),
           confirm: intl.formatMessage(messages.deleteConfirm),
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 83f13f58f..ea45ef9aa 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -1,19 +1,19 @@
 import clsx from 'clsx';
-import React from 'react';
 
-import Account from 'soapbox/components/account';
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import StatusContent from 'soapbox/components/status-content';
-import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
-import { HStack, Stack } from 'soapbox/components/ui';
-import PollPreview from 'soapbox/features/ui/components/poll-preview';
-import { useAppSelector } from 'soapbox/hooks';
+import Account from 'soapbox/components/account.tsx';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import PollPreview from 'soapbox/features/ui/components/poll-preview.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import { buildStatus } from '../builder';
+import { buildStatus } from '../builder.tsx';
 
-import ScheduledStatusActionBar from './scheduled-status-action-bar';
+import ScheduledStatusActionBar from './scheduled-status-action-bar.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IScheduledStatus {
   statusId: string;
diff --git a/src/features/scheduled-statuses/index.tsx b/src/features/scheduled-statuses/index.tsx
index 0a9b3dcae..9c142c6fe 100644
--- a/src/features/scheduled-statuses/index.tsx
+++ b/src/features/scheduled-statuses/index.tsx
@@ -1,13 +1,14 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled-statuses';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled-statuses.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import ScheduledStatus from './components/scheduled-status';
+import ScheduledStatus from './components/scheduled-status.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.scheduled_statuses', defaultMessage: 'Scheduled Posts' },
diff --git a/src/features/search/index.tsx b/src/features/search/index.tsx
index 97e5a37ca..8e36d18a1 100644
--- a/src/features/search/index.tsx
+++ b/src/features/search/index.tsx
@@ -1,12 +1,11 @@
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui';
-import Search from 'soapbox/features/compose/components/search';
-import SearchResults from 'soapbox/features/compose/components/search-results';
-import { useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import SearchResults from 'soapbox/features/compose/components/search-results.tsx';
+import Search from 'soapbox/features/compose/components/search.tsx';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 const messages = defineMessages({
   heading: { id: 'column.search', defaultMessage: 'Discover' },
diff --git a/src/features/security/mfa-form.tsx b/src/features/security/mfa-form.tsx
index 346617da8..5dd50850f 100644
--- a/src/features/security/mfa-form.tsx
+++ b/src/features/security/mfa-form.tsx
@@ -1,13 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { fetchMfa } from 'soapbox/actions/mfa';
-import { Column, Stack } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchMfa } from 'soapbox/actions/mfa.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import DisableOtpForm from './mfa/disable-otp-form';
-import EnableOtpForm from './mfa/enable-otp-form';
-import OtpConfirmForm from './mfa/otp-confirm-form';
+import DisableOtpForm from './mfa/disable-otp-form.tsx';
+import EnableOtpForm from './mfa/enable-otp-form.tsx';
+import OtpConfirmForm from './mfa/otp-confirm-form.tsx';
 
 /*
 Security settings page for user account
diff --git a/src/features/security/mfa/disable-otp-form.tsx b/src/features/security/mfa/disable-otp-form.tsx
index 8a867fa88..4a63d91e5 100644
--- a/src/features/security/mfa/disable-otp-form.tsx
+++ b/src/features/security/mfa/disable-otp-form.tsx
@@ -1,11 +1,17 @@
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { disableMfa } from 'soapbox/actions/mfa';
-import { Button, Form, FormGroup, Input, FormActions, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { disableMfa } from 'soapbox/actions/mfa.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   mfa_setup_disable_button: { id: 'column.mfa_disable_button', defaultMessage: 'Disable' },
diff --git a/src/features/security/mfa/enable-otp-form.tsx b/src/features/security/mfa/enable-otp-form.tsx
index 7999ace94..7f2b3247a 100644
--- a/src/features/security/mfa/enable-otp-form.tsx
+++ b/src/features/security/mfa/enable-otp-form.tsx
@@ -1,11 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { fetchBackupCodes } from 'soapbox/actions/mfa';
-import { Button, FormActions, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { fetchBackupCodes } from 'soapbox/actions/mfa.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   mfaCancelButton: { id: 'column.mfa_cancel', defaultMessage: 'Cancel' },
diff --git a/src/features/security/mfa/otp-confirm-form.tsx b/src/features/security/mfa/otp-confirm-form.tsx
index 1f1d670c4..f9d284a43 100644
--- a/src/features/security/mfa/otp-confirm-form.tsx
+++ b/src/features/security/mfa/otp-confirm-form.tsx
@@ -1,15 +1,21 @@
 import { QRCodeCanvas as QRCode } from 'qrcode.react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import {
   setupMfa,
   confirmMfa,
-} from 'soapbox/actions/mfa';
-import { Button, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+} from 'soapbox/actions/mfa.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   mfaCancelButton: { id: 'column.mfa_cancel', defaultMessage: 'Cancel' },
diff --git a/src/features/server-info/index.tsx b/src/features/server-info/index.tsx
index f180b77fb..092d25354 100644
--- a/src/features/server-info/index.tsx
+++ b/src/features/server-info/index.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column, Divider, Stack, Text } from 'soapbox/components/ui';
-import { useInstance } from 'soapbox/hooks';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import LinkFooter from '../ui/components/link-footer';
-import PromoPanel from '../ui/components/promo-panel';
+import LinkFooter from '../ui/components/link-footer.tsx';
+import PromoPanel from '../ui/components/promo-panel.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.info', defaultMessage: 'Server information' },
diff --git a/src/features/settings/components/messages-settings.tsx b/src/features/settings/components/messages-settings.tsx
index 2e7293542..c18da1627 100644
--- a/src/features/settings/components/messages-settings.tsx
+++ b/src/features/settings/components/messages-settings.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import List, { ListItem } from 'soapbox/components/list';
-import { Toggle } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
-import { useUpdateCredentials } from 'soapbox/queries/accounts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useUpdateCredentials } from 'soapbox/queries/accounts.ts';
 
 const messages = defineMessages({
   label: { id: 'settings.messages.label', defaultMessage: 'Allow users to start a new chat with you' },
diff --git a/src/features/settings/index.tsx b/src/features/settings/index.tsx
index 45f095f7c..72b755683 100644
--- a/src/features/settings/index.tsx
+++ b/src/features/settings/index.tsx
@@ -1,16 +1,24 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchMfa } from 'soapbox/actions/mfa';
-import CopyableInput from 'soapbox/components/copyable-input';
-import List, { ListItem } from 'soapbox/components/list';
-import { Card, CardBody, CardHeader, CardTitle, Column, Counter, FormGroup, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance, useOwnAccount } from 'soapbox/hooks';
-import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
+import { fetchMfa } from 'soapbox/actions/mfa.ts';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Counter from 'soapbox/components/ui/counter.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
-import Preferences from '../preferences';
+import Preferences from '../preferences/index.tsx';
 
-import MessagesSettings from './components/messages-settings';
+import MessagesSettings from './components/messages-settings.tsx';
 
 const messages = defineMessages({
   accountAliases: { id: 'navigation_bar.account_aliases', defaultMessage: 'Account aliases' },
diff --git a/src/features/share/index.tsx b/src/features/share/index.tsx
index fdb5caa3d..aabe6c226 100644
--- a/src/features/share/index.tsx
+++ b/src/features/share/index.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { Redirect, useLocation } from 'react-router-dom';
 
-import { openComposeWithText } from 'soapbox/actions/compose';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openComposeWithText } from 'soapbox/actions/compose.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const Share = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/soapbox-config/components/color-picker.tsx b/src/features/soapbox-config/components/color-picker.tsx
index 518fb872c..2951ebcbb 100644
--- a/src/features/soapbox-config/components/color-picker.tsx
+++ b/src/features/soapbox-config/components/color-picker.tsx
@@ -1,8 +1,8 @@
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { SketchPicker, ColorChangeHandler } from 'react-color';
 
-import { isMobile } from 'soapbox/is-mobile';
+import { isMobile } from 'soapbox/is-mobile.ts';
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
diff --git a/src/features/soapbox-config/components/color-with-picker.tsx b/src/features/soapbox-config/components/color-with-picker.tsx
index 732df47f6..08ce2747e 100644
--- a/src/features/soapbox-config/components/color-with-picker.tsx
+++ b/src/features/soapbox-config/components/color-with-picker.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 // @ts-ignore: TODO: upgrade react-overlays. v3.1 and above have TS definitions
 import Overlay from 'react-overlays/lib/Overlay';
 
-import { isMobile } from 'soapbox/is-mobile';
+import { isMobile } from 'soapbox/is-mobile.ts';
 
-import ColorPicker from './color-picker';
+import ColorPicker from './color-picker.tsx';
 
 import type { ColorChangeHandler } from 'react-color';
 
diff --git a/src/features/soapbox-config/components/crypto-address-input.tsx b/src/features/soapbox-config/components/crypto-address-input.tsx
index 08cea6bbf..33986f6a4 100644
--- a/src/features/soapbox-config/components/crypto-address-input.tsx
+++ b/src/features/soapbox-config/components/crypto-address-input.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import type { CryptoAddress } from 'soapbox/types/soapbox';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
+import type { CryptoAddress } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
   ticker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
diff --git a/src/features/soapbox-config/components/footer-link-input.tsx b/src/features/soapbox-config/components/footer-link-input.tsx
index ff0085d6b..6a726ae10 100644
--- a/src/features/soapbox-config/components/footer-link-input.tsx
+++ b/src/features/soapbox-config/components/footer-link-input.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import type { FooterItem } from 'soapbox/types/soapbox';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
+import type { FooterItem } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
   label: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
diff --git a/src/features/soapbox-config/components/icon-picker-dropdown.tsx b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
index 5a72f0474..8949d364a 100644
--- a/src/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/src/features/soapbox-config/components/icon-picker-dropdown.tsx
@@ -1,11 +1,13 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 // @ts-ignore
 import Overlay from 'react-overlays/lib/Overlay';
 
-import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
+import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon.tsx';
 
-import IconPickerMenu from './icon-picker-menu';
+import forkAwesomeIcons from '../forkawesome.json';
+
+import IconPickerMenu from './icon-picker-menu.tsx';
 
 const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
@@ -53,7 +55,6 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickIcon }
   };
 
   const title = intl.formatMessage(messages.emoji);
-  const forkAwesomeIcons = require('../forkawesome.json');
 
   return (
     <div onKeyDown={handleKeyDown}>
diff --git a/src/features/soapbox-config/components/icon-picker-menu.tsx b/src/features/soapbox-config/components/icon-picker-menu.tsx
index 35c67ed1b..d34116cbb 100644
--- a/src/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/src/features/soapbox-config/components/icon-picker-menu.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Text } from 'soapbox/components/ui';
+import Text from 'soapbox/components/ui/text.tsx';
 
 const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
diff --git a/src/features/soapbox-config/components/icon-picker.tsx b/src/features/soapbox-config/components/icon-picker.tsx
index 226d935e0..844f3e1c4 100644
--- a/src/features/soapbox-config/components/icon-picker.tsx
+++ b/src/features/soapbox-config/components/icon-picker.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import IconPickerDropdown from './icon-picker-dropdown';
+import IconPickerDropdown from './icon-picker-dropdown.tsx';
 
 interface IIconPicker {
   value: string;
diff --git a/src/features/soapbox-config/components/promo-panel-input.tsx b/src/features/soapbox-config/components/promo-panel-input.tsx
index 0dd530c39..2b4affe7c 100644
--- a/src/features/soapbox-config/components/promo-panel-input.tsx
+++ b/src/features/soapbox-config/components/promo-panel-input.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { HStack, Input } from 'soapbox/components/ui';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
 
-import IconPicker from './icon-picker';
+import IconPicker from './icon-picker.tsx';
 
-import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
-import type { PromoPanelItem } from 'soapbox/types/soapbox';
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield.tsx';
+import type { PromoPanelItem } from 'soapbox/types/soapbox.ts';
 
 const messages = defineMessages({
   icon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
diff --git a/src/features/soapbox-config/components/site-preview.tsx b/src/features/soapbox-config/components/site-preview.tsx
index 43f1e17f9..1fef46f41 100644
--- a/src/features/soapbox-config/components/site-preview.tsx
+++ b/src/features/soapbox-config/components/site-preview.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { defaultSettings } from 'soapbox/actions/settings';
-import SiteLogo from 'soapbox/components/site-logo';
-import BackgroundShapes from 'soapbox/features/ui/components/background-shapes';
-import { useSystemTheme } from 'soapbox/hooks';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import { generateThemeCss } from 'soapbox/utils/theme';
+import { defaultSettings } from 'soapbox/actions/settings.ts';
+import SiteLogo from 'soapbox/components/site-logo.tsx';
+import BackgroundShapes from 'soapbox/features/ui/components/background-shapes.tsx';
+import { useSystemTheme } from 'soapbox/hooks/useSystemTheme.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import { generateThemeCss } from 'soapbox/utils/theme.ts';
 
 interface ISitePreview {
   /** Raw Soapbox configuration. */
diff --git a/src/features/soapbox-config/index.tsx b/src/features/soapbox-config/index.tsx
index ffe91e123..e822ca8d8 100644
--- a/src/features/soapbox-config/index.tsx
+++ b/src/features/soapbox-config/index.tsx
@@ -1,34 +1,33 @@
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
-import React, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { updateSoapboxConfig } from 'soapbox/actions/admin';
-import { uploadMedia } from 'soapbox/actions/media';
-import List, { ListItem } from 'soapbox/components/list';
-import {
-  Accordion,
-  Button,
-  Column,
-  CardHeader,
-  CardTitle,
-  FileInput,
-  Form,
-  FormActions,
-  FormGroup,
-  Input,
-  Streamfield,
-  Textarea,
-  Toggle,
-} from 'soapbox/components/ui';
-import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
-import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
+import { updateSoapboxConfig } from 'soapbox/actions/admin.ts';
+import { uploadMedia } from 'soapbox/actions/media.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Accordion from 'soapbox/components/ui/accordion.tsx';
+import { Button } from 'soapbox/components/ui/button.tsx';
+import { CardHeader, CardTitle } from 'soapbox/components/ui/card.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FileInput from 'soapbox/components/ui/file-input.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Streamfield from 'soapbox/components/ui/streamfield.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import ThemeSelector from 'soapbox/features/ui/components/theme-selector.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import CryptoAddressInput from './components/crypto-address-input';
-import FooterLinkInput from './components/footer-link-input';
-import PromoPanelInput from './components/promo-panel-input';
-import SitePreview from './components/site-preview';
+import CryptoAddressInput from './components/crypto-address-input.tsx';
+import FooterLinkInput from './components/footer-link-input.tsx';
+import PromoPanelInput from './components/promo-panel-input.tsx';
+import SitePreview from './components/site-preview.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index d69176c48..e1764cf3d 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -1,21 +1,27 @@
-import React, { useEffect, useRef, useState } from 'react';
+import circlesIcon from '@tabler/icons/outline/circles.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mailIcon from '@tabler/icons/outline/mail.svg';
+import { useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import Account from 'soapbox/components/account';
-import StatusContent from 'soapbox/components/status-content';
-import StatusMedia from 'soapbox/components/status-media';
-import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
-import SensitiveContentOverlay from 'soapbox/components/statuses/sensitive-content-overlay';
-import StatusInfo from 'soapbox/components/statuses/status-info';
-import TranslateButton from 'soapbox/components/translate-button';
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
-import { getActualStatus } from 'soapbox/utils/status';
+import Account from 'soapbox/components/account.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusMedia from 'soapbox/components/status-media.tsx';
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
+import SensitiveContentOverlay from 'soapbox/components/statuses/sensitive-content-overlay.tsx';
+import StatusInfo from 'soapbox/components/statuses/status-info.tsx';
+import TranslateButton from 'soapbox/components/translate-button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { getActualStatus } from 'soapbox/utils/status.ts';
 
-import StatusInteractionBar from './status-interaction-bar';
+import StatusInteractionBar from './status-interaction-bar.tsx';
 
-import type { Group, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Group, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IDetailedStatus {
   status: StatusEntity;
@@ -57,7 +63,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             avatarSize={42}
             icon={
               <Icon
-                src={require('@tabler/icons/outline/circles.svg')}
+                src={circlesIcon}
                 className='size-4 text-primary-600 dark:text-accent-blue'
               />
             }
@@ -109,9 +115,9 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   }
 
   if (actualStatus.visibility === 'direct') {
-    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/mail.svg')} />;
+    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={mailIcon} />;
   } else if (actualStatus.visibility === 'private') {
-    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />;
+    statusTypeIcon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={lockIcon} />;
   }
 
   return (
diff --git a/src/features/status/components/status-interaction-bar.tsx b/src/features/status/components/status-interaction-bar.tsx
index cb877271f..39a9e1c64 100644
--- a/src/features/status/components/status-interaction-bar.tsx
+++ b/src/features/status/components/status-interaction-bar.tsx
@@ -1,14 +1,18 @@
-import clsx from 'clsx';import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import clsx from 'clsx';import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { HStack, Text, Emoji } from 'soapbox/components/ui';
-import { useAppSelector, useSoapboxConfig, useFeatures, useAppDispatch } from 'soapbox/hooks';
-import { reduceEmoji } from 'soapbox/utils/emoji-reacts';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { reduceEmoji } from 'soapbox/utils/emoji-reacts.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import type { Status } from 'soapbox/types/entities';
+import type { Status } from 'soapbox/types/entities.ts';
 
 interface IStatusInteractionBar {
   status: Status;
diff --git a/src/features/status/components/thread-login-cta.tsx b/src/features/status/components/thread-login-cta.tsx
index e8758f72c..f488d8a1d 100644
--- a/src/features/status/components/thread-login-cta.tsx
+++ b/src/features/status/components/thread-login-cta.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardTitle, Text, Stack, Button } from 'soapbox/components/ui';
-import { useInstance, useSoapboxConfig } from 'soapbox/hooks';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Card, CardTitle } from 'soapbox/components/ui/card.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 /** Prompts logged-out users to log in when viewing a thread. */
 const ThreadLoginCta: React.FC = () => {
diff --git a/src/features/status/components/thread-status.tsx b/src/features/status/components/thread-status.tsx
index 0951ab689..a5ff00e7f 100644
--- a/src/features/status/components/thread-status.tsx
+++ b/src/features/status/components/thread-status.tsx
@@ -1,10 +1,9 @@
 import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
 
-import StatusContainer from 'soapbox/containers/status-container';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppSelector } from 'soapbox/hooks';
+import StatusContainer from 'soapbox/containers/status-container.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IThreadStatus {
   id: string;
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index b6a7c4514..9d43b255b 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -1,30 +1,32 @@
 import { createSelector } from '@reduxjs/toolkit';
 import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import { type VirtuosoHandle } from 'react-virtuoso';
 
-import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
-import { favourite, reblog, unfavourite, unreblog } from 'soapbox/actions/interactions';
-import { openModal } from 'soapbox/actions/modals';
-import { getSettings } from 'soapbox/actions/settings';
-import { hideStatus, revealStatus } from 'soapbox/actions/statuses';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import StatusActionBar from 'soapbox/components/status-action-bar';
-import Tombstone from 'soapbox/components/tombstone';
-import { Stack } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
-import PendingStatus from 'soapbox/features/ui/components/pending-status';
-import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
-import { RootState } from 'soapbox/store';
-import { type Account, type Status } from 'soapbox/types/entities';
-import { defaultMediaVisibility, textForScreenReader } from 'soapbox/utils/status';
+import { mentionCompose, replyCompose } from 'soapbox/actions/compose.ts';
+import { favourite, reblog, unfavourite, unreblog } from 'soapbox/actions/interactions.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { hideStatus, revealStatus } from 'soapbox/actions/statuses.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import StatusActionBar from 'soapbox/components/status-action-bar.tsx';
+import Tombstone from 'soapbox/components/tombstone.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import { HotKeys } from 'soapbox/features/ui/components/hotkeys.tsx';
+import PendingStatus from 'soapbox/features/ui/components/pending-status.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { RootState } from 'soapbox/store.ts';
+import { type Account, type Status } from 'soapbox/types/entities.ts';
+import { defaultMediaVisibility, textForScreenReader } from 'soapbox/utils/status.ts';
 
-import DetailedStatus from './detailed-status';
-import ThreadStatus from './thread-status';
+import DetailedStatus from './detailed-status.tsx';
+import ThreadStatus from './thread-status.tsx';
 
 const getAncestorsIds = createSelector([
   (_: RootState, statusId: string | undefined) => statusId,
diff --git a/src/features/status/containers/quoted-status-container.tsx b/src/features/status/containers/quoted-status-container.tsx
index 524035341..2b45ea2d8 100644
--- a/src/features/status/containers/quoted-status-container.tsx
+++ b/src/features/status/containers/quoted-status-container.tsx
@@ -1,9 +1,9 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
-import QuotedStatus from 'soapbox/components/quoted-status';
-import Tombstone from 'soapbox/components/tombstone';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import QuotedStatus from 'soapbox/components/quoted-status.tsx';
+import Tombstone from 'soapbox/components/tombstone.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IQuotedStatusContainer {
   /** Status ID to the quoted status. */
diff --git a/src/features/status/index.tsx b/src/features/status/index.tsx
index 58640403c..3c7382192 100644
--- a/src/features/status/index.tsx
+++ b/src/features/status/index.tsx
@@ -1,21 +1,24 @@
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import {
   fetchStatusWithContext,
   fetchNext,
-} from 'soapbox/actions/statuses';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column, Stack } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppDispatch, useAppSelector, useLoggedIn } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+} from 'soapbox/actions/statuses.ts';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import Thread from './components/thread';
-import ThreadLoginCta from './components/thread-login-cta';
+import ThreadLoginCta from './components/thread-login-cta.tsx';
+import Thread from './components/thread.tsx';
 
 const messages = defineMessages({
   title: { id: 'status.title', defaultMessage: 'Post Details' },
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index 4b99b550b..066a5174c 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -1,13 +1,19 @@
-import React from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { importFetchedStatuses } from 'soapbox/actions/importer';
-import { expandTimelineSuccess } from 'soapbox/actions/timelines';
-import { useAppDispatch, useTheme } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-
-import { Column } from '../../components/ui';
-import Timeline from '../ui/components/timeline';
+import status5 from 'soapbox/__fixtures__/pleroma-quote-of-quote-post.json';
+import status3 from 'soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json';
+import status4 from 'soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json';
+import status2 from 'soapbox/__fixtures__/pleroma-status-with-poll.json';
+import status1 from 'soapbox/__fixtures__/pleroma-status.json';
+import status6 from 'soapbox/__fixtures__/truthsocial-status-in-moderation.json';
+import { importFetchedStatuses } from 'soapbox/actions/importer/index.ts';
+import { expandTimelineSuccess } from 'soapbox/actions/timelines.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Timeline from 'soapbox/features/ui/components/timeline.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
 
 const messages = defineMessages({
   title: { id: 'column.test', defaultMessage: 'Test timeline' },
@@ -17,14 +23,7 @@ const messages = defineMessages({
  * List of mock statuses to display in the timeline.
  * These get embedded into the build, but only in this chunk, so it's okay.
  */
-const MOCK_STATUSES: any[] = [
-  require('soapbox/__fixtures__/pleroma-status.json'),
-  require('soapbox/__fixtures__/pleroma-status-with-poll.json'),
-  require('soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json'),
-  require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
-  require('soapbox/__fixtures__/pleroma-quote-of-quote-post.json'),
-  require('soapbox/__fixtures__/truthsocial-status-in-moderation.json'),
-];
+const MOCK_STATUSES = [status1, status2, status3, status4, status5, status6];
 
 const timelineId = 'test';
 const onlyMedia = false;
@@ -35,7 +34,7 @@ const TestTimeline: React.FC = () => {
   const theme = useTheme();
   const isMobile = useIsMobile();
 
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(importFetchedStatuses(MOCK_STATUSES));
     dispatch(expandTimelineSuccess(timelineId, MOCK_STATUSES, undefined, undefined, false, false, false));
   }, []);
diff --git a/src/features/theme-editor/components/color.tsx b/src/features/theme-editor/components/color.tsx
index 8fa540c42..04099e2e7 100644
--- a/src/features/theme-editor/components/color.tsx
+++ b/src/features/theme-editor/components/color.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker';
+import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker.tsx';
 
 import type { ColorChangeHandler } from 'react-color';
 
diff --git a/src/features/theme-editor/components/palette.tsx b/src/features/theme-editor/components/palette.tsx
index c48efb618..748a80b76 100644
--- a/src/features/theme-editor/components/palette.tsx
+++ b/src/features/theme-editor/components/palette.tsx
@@ -1,11 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { HStack, Stack, Slider } from 'soapbox/components/ui';
-import { usePrevious } from 'soapbox/hooks';
-import { compareId } from 'soapbox/utils/comparators';
-import { hueShift } from 'soapbox/utils/theme';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Slider from 'soapbox/components/ui/slider.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { usePrevious } from 'soapbox/hooks/usePrevious.ts';
+import { compareId } from 'soapbox/utils/comparators.ts';
+import { hueShift } from 'soapbox/utils/theme.ts';
 
-import Color from './color';
+import Color from './color.tsx';
 
 interface ColorGroup {
   [tint: string]: string;
@@ -63,5 +65,5 @@ const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
 
 export {
   Palette as default,
-  ColorGroup,
+  type ColorGroup,
 };
\ No newline at end of file
diff --git a/src/features/theme-editor/index.tsx b/src/features/theme-editor/index.tsx
index 10c9e6041..6aa036b4a 100644
--- a/src/features/theme-editor/index.tsx
+++ b/src/features/theme-editor/index.tsx
@@ -1,19 +1,27 @@
-import React, { useRef, useState } from 'react';
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
+import uploadIcon from '@tabler/icons/outline/upload.svg';
+import { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { updateSoapboxConfig } from 'soapbox/actions/admin';
-import { getHost } from 'soapbox/actions/instance';
-import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import List, { ListItem } from 'soapbox/components/list';
-import { Button, Column, Form, FormActions } from 'soapbox/components/ui';
-import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker';
-import { useAppDispatch, useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
-import { download } from 'soapbox/utils/download';
+import { updateSoapboxConfig } from 'soapbox/actions/admin.ts';
+import { getHost } from 'soapbox/actions/instance.ts';
+import { fetchSoapboxConfig } from 'soapbox/actions/soapbox.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import FormActions from 'soapbox/components/ui/form-actions.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import ColorWithPicker from 'soapbox/features/soapbox-config/components/color-with-picker.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { download } from 'soapbox/utils/download.ts';
 
-import Palette, { ColorGroup } from './components/palette';
+import Palette, { ColorGroup } from './components/palette.tsx';
 
 import type { ColorChangeHandler } from 'react-color';
 
@@ -207,15 +215,15 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
             items={[{
               text: intl.formatMessage(messages.restore),
               action: restoreDefaultTheme,
-              icon: require('@tabler/icons/outline/refresh.svg'),
+              icon: refreshIcon,
             }, {
               text: intl.formatMessage(messages.import),
               action: importTheme,
-              icon: require('@tabler/icons/outline/upload.svg'),
+              icon: uploadIcon,
             }, {
               text: intl.formatMessage(messages.export),
               action: exportTheme,
-              icon: require('@tabler/icons/outline/download.svg'),
+              icon: downloadIcon,
             }]}
           />
           <Button theme='secondary' onClick={resetTheme}>
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 6d9502d5b..8a2f6144c 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
@@ -8,13 +9,16 @@ import {
   unmuteAccount,
   authorizeFollowRequest,
   rejectFollowRequest,
-} from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modals';
-import { useFollow } from 'soapbox/api/hooks';
-import { Button, HStack } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures, useLoggedIn } from 'soapbox/hooks';
+} from 'soapbox/actions/accounts.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useFollow } from 'soapbox/api/hooks/index.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   block: { id: 'account.block', defaultMessage: 'Block @{name}' },
@@ -154,7 +158,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       return (
         <Button
           onClick={handleRemoteFollow}
-          icon={require('@tabler/icons/outline/plus.svg')}
+          icon={plusIcon}
           text={intl.formatMessage(messages.follow)}
           size='sm'
         />
@@ -219,12 +223,21 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
       );
     } else if (!account.relationship?.blocking && !account.relationship?.muting) {
       // Follow & Unfollow
+
+      let icon: string | undefined;
+
+      if (isFollowing) {
+        icon = plusIcon;
+      } else if (blockedBy) {
+        icon = banIcon;
+      }
+
       return (
         <Button
           size='sm'
           disabled={blockedBy}
           theme={isFollowing ? 'secondary' : 'primary'}
-          icon={blockedBy ? require('@tabler/icons/outline/ban.svg') : (!isFollowing && require('@tabler/icons/outline/plus.svg'))}
+          icon={icon}
           onClick={handleFollow}
         >
           {isFollowing ? (
diff --git a/src/features/ui/components/background-shapes.tsx b/src/features/ui/components/background-shapes.tsx
index f256ad987..379f40ca7 100644
--- a/src/features/ui/components/background-shapes.tsx
+++ b/src/features/ui/components/background-shapes.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 
 interface IBackgroundShapes {
   /** Whether the shapes should be absolute positioned or fixed. */
diff --git a/src/features/ui/components/column-forbidden.tsx b/src/features/ui/components/column-forbidden.tsx
index 56b443eac..85e1c67e1 100644
--- a/src/features/ui/components/column-forbidden.tsx
+++ b/src/features/ui/components/column-forbidden.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column } from 'soapbox/components/ui';
+import { Column } from 'soapbox/components/ui/column.tsx';
 
 const messages = defineMessages({
   title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' },
diff --git a/src/features/ui/components/column-loading.tsx b/src/features/ui/components/column-loading.tsx
index 994ec1457..d163f9333 100644
--- a/src/features/ui/components/column-loading.tsx
+++ b/src/features/ui/components/column-loading.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-
-import { Card, CardBody, Spinner } from 'soapbox/components/ui';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const ColumnLoading = () => (
   <Card variant='rounded'>
diff --git a/src/features/ui/components/columns-area.tsx b/src/features/ui/components/columns-area.tsx
index 5bfb62722..2e63aacef 100644
--- a/src/features/ui/components/columns-area.tsx
+++ b/src/features/ui/components/columns-area.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { Layout } from '../../../components/ui';
+import Layout from 'soapbox/components/ui/layout.tsx';
 
 interface IColumnsArea {
   layout: any;
diff --git a/src/features/ui/components/compose-button.test.tsx b/src/features/ui/components/compose-button.test.tsx
index 8e2b24b57..2ee4fa827 100644
--- a/src/features/ui/components/compose-button.test.tsx
+++ b/src/features/ui/components/compose-button.test.tsx
@@ -1,13 +1,13 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
 
-import { MODAL_CLOSE, MODAL_OPEN } from 'soapbox/actions/modals';
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
+import { MODAL_CLOSE, MODAL_OPEN } from 'soapbox/actions/modals.ts';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers.tsx';
 
-import ComposeButton from './compose-button';
+import ComposeButton from './compose-button.tsx';
 
 const store = mockStore(rootState);
 const renderComposeButton = () => {
diff --git a/src/features/ui/components/compose-button.tsx b/src/features/ui/components/compose-button.tsx
index 7686f9c55..e3855e075 100644
--- a/src/features/ui/components/compose-button.tsx
+++ b/src/features/ui/components/compose-button.tsx
@@ -1,12 +1,13 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 
-import { groupComposeModal } from 'soapbox/actions/compose';
-import { openModal } from 'soapbox/actions/modals';
-import { useGroupLookup } from 'soapbox/api/hooks';
-import { Avatar, Button, HStack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { groupComposeModal } from 'soapbox/actions/compose.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useGroupLookup } from 'soapbox/api/hooks/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const ComposeButton = () => {
   const location = useLocation();
diff --git a/src/features/ui/components/cta-banner.test.tsx b/src/features/ui/components/cta-banner.test.tsx
index 3e8502027..5d5c4851f 100644
--- a/src/features/ui/components/cta-banner.test.tsx
+++ b/src/features/ui/components/cta-banner.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { storeClosed, storeLoggedIn, storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeClosed, storeLoggedIn, storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import CtaBanner from './cta-banner';
+import CtaBanner from './cta-banner.tsx';
 
 describe('<CtaBanner />', () => {
   it('renders the banner', () => {
diff --git a/src/features/ui/components/cta-banner.tsx b/src/features/ui/components/cta-banner.tsx
index ff321d870..3924bb3e1 100644
--- a/src/features/ui/components/cta-banner.tsx
+++ b/src/features/ui/components/cta-banner.tsx
@@ -1,8 +1,14 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Banner, Button, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useInstance, useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks';
+import Banner from 'soapbox/components/ui/banner.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const CtaBanner = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/error-column.tsx b/src/features/ui/components/error-column.tsx
index 6c91fa144..cdc3dac5e 100644
--- a/src/features/ui/components/error-column.tsx
+++ b/src/features/ui/components/error-column.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
+import refreshIcon from '@tabler/icons/outline/refresh.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Column, Stack, Text, IconButton } from 'soapbox/components/ui';
-import { isNetworkError } from 'soapbox/utils/errors';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { isNetworkError } from 'soapbox/utils/errors.ts';
 
 const messages = defineMessages({
   title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
@@ -32,7 +35,7 @@ const ErrorColumn: React.FC<IErrorColumn> = ({ error, onRetry = () => location.r
         <IconButton
           iconClassName='h-10 w-10'
           title={intl.formatMessage(messages.retry)}
-          src={require('@tabler/icons/outline/refresh.svg')}
+          src={refreshIcon}
           onClick={handleRetry}
         />
 
diff --git a/src/features/ui/components/floating-action-button.tsx b/src/features/ui/components/floating-action-button.tsx
index 5ee426f3f..d83a6ef24 100644
--- a/src/features/ui/components/floating-action-button.tsx
+++ b/src/features/ui/components/floating-action-button.tsx
@@ -1,13 +1,15 @@
+import pencilPlusIcon from '@tabler/icons/outline/pencil-plus.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 
-import { groupComposeModal } from 'soapbox/actions/compose';
-import { openModal } from 'soapbox/actions/modals';
-import { useGroupLookup } from 'soapbox/api/hooks';
-import { Avatar, HStack, Icon } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { groupComposeModal } from 'soapbox/actions/compose.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { useGroupLookup } from 'soapbox/api/hooks/index.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const messages = defineMessages({
   publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
@@ -42,7 +44,7 @@ const HomeFAB: React.FC = () => {
       aria-label={intl.formatMessage(messages.publish)}
     >
       <Icon
-        src={require('@tabler/icons/outline/pencil-plus.svg')}
+        src={pencilPlusIcon}
         className='size-6'
       />
     </button>
@@ -74,7 +76,7 @@ const GroupFAB: React.FC = () => {
       <HStack space={3} alignItems='center'>
         <Avatar className='-my-3 -ml-2 border-white' size={42} src={group.avatar} />
         <Icon
-          src={require('@tabler/icons/outline/pencil-plus.svg')}
+          src={pencilPlusIcon}
           className='size-6'
         />
       </HStack>
diff --git a/src/features/ui/components/funding-panel.tsx b/src/features/ui/components/funding-panel.tsx
index 8cfd0f961..f55087d31 100644
--- a/src/features/ui/components/funding-panel.tsx
+++ b/src/features/ui/components/funding-panel.tsx
@@ -1,9 +1,14 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchPatronInstance } from 'soapbox/actions/patron';
-import { Widget, Button, ProgressBar, Text, Stack } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { fetchPatronInstance } from 'soapbox/actions/patron.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 /** Open link in a new tab. */
 // https://stackoverflow.com/a/28374344/8811886
diff --git a/src/features/ui/components/group-media-panel.tsx b/src/features/ui/components/group-media-panel.tsx
index 927ef72d8..801bb403e 100644
--- a/src/features/ui/components/group-media-panel.tsx
+++ b/src/features/ui/components/group-media-panel.tsx
@@ -1,16 +1,19 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { expandGroupMediaTimeline } from 'soapbox/actions/timelines';
-import { Spinner, Text, Widget } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { getGroupGallery } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { expandGroupMediaTimeline } from 'soapbox/actions/timelines.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { getGroupGallery } from 'soapbox/selectors/index.ts';
 
-import MediaItem from '../../account-gallery/components/media-item';
+import MediaItem from '../../account-gallery/components/media-item.tsx';
 
-import type { Attachment, Group } from 'soapbox/types/entities';
+import type { Attachment, Group } from 'soapbox/types/entities.ts';
 
 interface IGroupMediaPanel {
   group?: Group;
diff --git a/src/features/ui/components/hotkeys.tsx b/src/features/ui/components/hotkeys.tsx
index 813469bab..5026e160a 100644
--- a/src/features/ui/components/hotkeys.tsx
+++ b/src/features/ui/components/hotkeys.tsx
@@ -1,11 +1,11 @@
 import { HotKeys as _HotKeys, type HotKeysProps } from '@mkljczk/react-hotkeys';
-import React from 'react';
+import { forwardRef } from 'react';
 
 /**
  * Wrapper component around `react-hotkeys`.
  * `react-hotkeys` is a legacy component, so confining its import to one place is beneficial.
  */
-const HotKeys = React.forwardRef<any, HotKeysProps>(({ children, ...rest }, ref) => (
+const HotKeys = forwardRef<any, HotKeysProps>(({ children, ...rest }, ref) => (
   <_HotKeys {...rest} ref={ref}>
     {children}
   </_HotKeys>
diff --git a/src/features/ui/components/image-loader.tsx b/src/features/ui/components/image-loader.tsx
index f71ad0f08..7eab09c80 100644
--- a/src/features/ui/components/image-loader.tsx
+++ b/src/features/ui/components/image-loader.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React from 'react';
+import { PureComponent } from 'react';
 
-import ZoomableImage from './zoomable-image';
+import ZoomableImage from './zoomable-image.tsx';
 
 type EventRemover = () => void;
 
@@ -14,7 +14,7 @@ interface IImageLoader {
   onClick?: React.MouseEventHandler;
 }
 
-class ImageLoader extends React.PureComponent<IImageLoader> {
+class ImageLoader extends PureComponent<IImageLoader> {
 
   static defaultProps = {
     alt: '',
diff --git a/src/features/ui/components/instance-info-panel.tsx b/src/features/ui/components/instance-info-panel.tsx
index 26a52df84..b5f1c12bf 100644
--- a/src/features/ui/components/instance-info-panel.tsx
+++ b/src/features/ui/components/instance-info-panel.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
+import pinIcon from '@tabler/icons/outline/pin.svg';
+import pinnedOffIcon from '@tabler/icons/outline/pinned-off.svg';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { pinHost, unpinHost } from 'soapbox/actions/remote-timeline';
-import { Widget } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
+import { pinHost, unpinHost } from 'soapbox/actions/remote-timeline.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
@@ -41,7 +44,7 @@ const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
     <Widget
       title={remoteInstance.host}
       onActionClick={handlePinHost}
-      actionIcon={pinned ? require('@tabler/icons/outline/pinned-off.svg') : require('@tabler/icons/outline/pin.svg')}
+      actionIcon={pinned ? pinnedOffIcon : pinIcon}
       actionTitle={intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host })}
     />
   );
diff --git a/src/features/ui/components/instance-moderation-panel.tsx b/src/features/ui/components/instance-moderation-panel.tsx
index 75cb34b05..ebc572321 100644
--- a/src/features/ui/components/instance-moderation-panel.tsx
+++ b/src/features/ui/components/instance-moderation-panel.tsx
@@ -1,12 +1,15 @@
-import React from 'react';
+import dotsVerticalIcon from '@tabler/icons/outline/dots-vertical.svg';
+import editIcon from '@tabler/icons/outline/edit.svg';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import DropdownMenu from 'soapbox/components/dropdown-menu';
-import { Widget } from 'soapbox/components/ui';
-import InstanceRestrictions from 'soapbox/features/federation-restrictions/components/instance-restrictions';
-import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modals.ts';
+import DropdownMenu from 'soapbox/components/dropdown-menu/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import InstanceRestrictions from 'soapbox/features/federation-restrictions/components/instance-restrictions.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
@@ -35,7 +38,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
     return [{
       text: intl.formatMessage(messages.editFederation),
       action: handleEditFederation,
-      icon: require('@tabler/icons/outline/edit.svg'),
+      icon: editIcon,
     }];
   };
 
@@ -45,7 +48,7 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
     <Widget
       title={<FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' />}
       action={account?.admin ? (
-        <DropdownMenu items={menu} src={require('@tabler/icons/outline/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={dotsVerticalIcon} />
       ) : undefined}
     >
       <InstanceRestrictions remoteInstance={remoteInstance} />
diff --git a/src/features/ui/components/link-footer.tsx b/src/features/ui/components/link-footer.tsx
index 2162b20ca..d8d6b6abb 100644
--- a/src/features/ui/components/link-footer.tsx
+++ b/src/features/ui/components/link-footer.tsx
@@ -1,13 +1,15 @@
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { logOut } from 'soapbox/actions/auth';
-import { Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji';
-import { useSoapboxConfig, useOwnAccount, useFeatures, useAppDispatch } from 'soapbox/hooks';
-import sourceCode from 'soapbox/utils/code';
+import { logOut } from 'soapbox/actions/auth.ts';
+import Text from 'soapbox/components/ui/text.tsx';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import sourceCode from 'soapbox/utils/code.ts';
 
 interface IFooterLink {
   to: string;
diff --git a/src/features/ui/components/modal-loading.tsx b/src/features/ui/components/modal-loading.tsx
index 61bccffb3..39ade5352 100644
--- a/src/features/ui/components/modal-loading.tsx
+++ b/src/features/ui/components/modal-loading.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-
-import { Modal, Spinner } from 'soapbox/components/ui';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 
 const ModalLoading = () => (
   <Modal>
diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index b7d27472d..5eff12842 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/src/features/ui/components/modal-root.tsx
@@ -1,6 +1,6 @@
-import React, { Suspense } from 'react';
+import { PureComponent, Suspense } from 'react';
 
-import Base from 'soapbox/components/modal-root';
+import Base from 'soapbox/components/modal-root.tsx';
 import {
   AccountModerationModal,
   ActionsModal,
@@ -47,9 +47,9 @@ import {
   ZapInvoiceModal,
   ZapsModal,
   CaptchaModal,
-} from 'soapbox/features/ui/util/async-components';
+} from 'soapbox/features/ui/util/async-components.ts';
 
-import ModalLoading from './modal-loading';
+import ModalLoading from './modal-loading.tsx';
 
 /* eslint sort-keys: "error" */
 const MODAL_COMPONENTS: Record<string, React.ExoticComponent<any>> = {
@@ -108,7 +108,7 @@ interface IModalRoot {
   onClose: (type?: ModalType) => void;
 }
 
-export default class ModalRoot extends React.PureComponent<IModalRoot> {
+export default class ModalRoot extends PureComponent<IModalRoot> {
 
   getSnapshotBeforeUpdate() {
     return { visible: !!this.props.type };
diff --git a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
index d8df08427..1fc8c1ddf 100644
--- a/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx
@@ -1,21 +1,29 @@
-import React, { ChangeEventHandler, useState } from 'react';
+import externalLinkIcon from '@tabler/icons/outline/external-link.svg';
+import { ChangeEventHandler, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { revokeName, setBadges as saveBadges } from 'soapbox/actions/admin';
-import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
-import { useAccount } from 'soapbox/api/hooks';
-import { useSuggest, useVerify } from 'soapbox/api/hooks/admin';
-import Account from 'soapbox/components/account';
-import List, { ListItem } from 'soapbox/components/list';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import OutlineBox from 'soapbox/components/outline-box';
-import { Button, Text, HStack, Modal, Stack, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import { getBadges } from 'soapbox/utils/badges';
+import { revokeName, setBadges as saveBadges } from 'soapbox/actions/admin.ts';
+import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation.tsx';
+import { useSuggest, useVerify } from 'soapbox/api/hooks/admin/index.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import Account from 'soapbox/components/account.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import OutlineBox from 'soapbox/components/outline-box.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import toast from 'soapbox/toast.tsx';
+import { getBadges } from 'soapbox/utils/badges.ts';
 
-import BadgeInput from './badge-input';
-import StaffRolePicker from './staff-role-picker';
+import BadgeInput from './badge-input.tsx';
+import StaffRolePicker from './staff-role-picker.tsx';
 
 const messages = defineMessages({
   userVerified: { id: 'admin.users.user_verified_message', defaultMessage: '@{acct} was verified' },
@@ -186,7 +194,7 @@ const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, ac
 
         {features.adminFE && (
           <HStack justifyContent='center'>
-            <Button icon={require('@tabler/icons/outline/external-link.svg')} size='sm' theme='secondary' onClick={handleAdminFE}>
+            <Button icon={externalLinkIcon} size='sm' theme='secondary' onClick={handleAdminFE}>
               <FormattedMessage id='account_moderation_modal.admin_fe' defaultMessage='Open in AdminFE' />
             </Button>
           </HStack>
diff --git a/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx b/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
index 3bfaf44ef..7ce8973af 100644
--- a/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/badge-input.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
-import { TagInput } from 'soapbox/components/ui';
-import { badgeToTag, tagToBadge } from 'soapbox/utils/badges';
+import TagInput from 'soapbox/components/ui/tag-input.tsx';
+import { badgeToTag, tagToBadge } from 'soapbox/utils/badges.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'badge_input.placeholder', defaultMessage: 'Enter a badge…' },
diff --git a/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx b/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
index 8ee5bb6ea..f5bd7d3c9 100644
--- a/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
+++ b/src/features/ui/components/modals/account-moderation-modal/staff-role-picker.tsx
@@ -1,12 +1,12 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, MessageDescriptor, useIntl } from 'react-intl';
 
-import { setRole } from 'soapbox/actions/admin';
-import { SelectDropdown } from 'soapbox/features/forms';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { setRole } from 'soapbox/actions/admin.ts';
+import { SelectDropdown } from 'soapbox/features/forms/index.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 /** Staff role. */
 type AccountRole = 'user' | 'moderator' | 'admin';
diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 0e873b20b..6641298b6 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -1,16 +1,15 @@
 import clsx from 'clsx';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
-import { HStack } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
 
-import Motion from '../../util/optional-motion';
+import Motion from '../../util/optional-motion.tsx';
 
-import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IActionsModal {
   status: StatusEntity;
diff --git a/src/features/ui/components/modals/birthdays-modal.tsx b/src/features/ui/components/modals/birthdays-modal.tsx
index d6d17781a..a98aba752 100644
--- a/src/features/ui/components/modals/birthdays-modal.tsx
+++ b/src/features/ui/components/modals/birthdays-modal.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import Account from 'soapbox/features/birthdays/account';
-import { useAppSelector } from 'soapbox/hooks';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Account from 'soapbox/features/birthdays/account.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IBirthdaysModal {
   onClose: (string: string) => void;
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index 19acf46fe..425e8580a 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import repeatIcon from '@tabler/icons/outline/repeat.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { Modal, Stack, Text } from 'soapbox/components/ui';
-import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator';
+import Icon from 'soapbox/components/icon.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
@@ -39,7 +41,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
 
         <Text>
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/outline/repeat.svg')} /></span> }} />
+          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={repeatIcon} /></span> }} />
         </Text>
       </Stack>
     </Modal>
diff --git a/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx b/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
index 3818819b7..75e428b56 100644
--- a/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
+++ b/src/features/ui/components/modals/captcha-modal/captcha-modal.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import useCaptcha from 'soapbox/api/hooks/captcha/useCaptcha';
-import { Modal, Button, Spinner, Stack, Text } from 'soapbox/components/ui';
+import useCaptcha from 'soapbox/api/hooks/captcha/useCaptcha.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-import { PuzzleCaptcha } from './components/puzzle';
+import { PuzzleCaptcha } from './components/puzzle.tsx';
 
 interface ICaptchaModal {
   onClose: (type?: string) => void;
diff --git a/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx b/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
index 83b575070..c9f56c7bc 100644
--- a/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
+++ b/src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 interface IPuzzleCaptcha {
   bg: string;
diff --git a/src/features/ui/components/modals/compare-history-modal.tsx b/src/features/ui/components/modals/compare-history-modal.tsx
index 4a465da0e..16bdf18d5 100644
--- a/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/src/features/ui/components/modals/compare-history-modal.tsx
@@ -1,14 +1,19 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 
-import { fetchHistory } from 'soapbox/actions/history';
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import { HStack, Modal, Spinner, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchHistory } from 'soapbox/actions/history.ts';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities';
+import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities.ts';
 
 interface ICompareHistoryModal {
   onClose: (string: string) => void;
diff --git a/src/features/ui/components/modals/component-modal.tsx b/src/features/ui/components/modals/component-modal.tsx
index 782417f9c..0ce16f4e7 100644
--- a/src/features/ui/components/modals/component-modal.tsx
+++ b/src/features/ui/components/modals/component-modal.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { Modal } from 'soapbox/components/ui';
+import Modal from 'soapbox/components/ui/modal.tsx';
 
 interface IComponentModal {
   onClose: (type?: string) => void;
diff --git a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 67965c0e2..440045481 100644
--- a/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -1,4 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import {
@@ -16,18 +19,31 @@ import {
   rejectEventParticipationRequest,
   authorizeEventParticipationRequest,
   cancelEventCompose,
-} from 'soapbox/actions/events';
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location';
-import LocationSearch from 'soapbox/components/location-search';
-import { checkEventComposeContent } from 'soapbox/components/modal-root';
-import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Toggle } from 'soapbox/components/ui';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime';
-import AccountContainer from 'soapbox/containers/account-container';
-import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+} from 'soapbox/actions/events.ts';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import { ADDRESS_ICONS } from 'soapbox/components/autosuggest-location.tsx';
+import LocationSearch from 'soapbox/components/location-search.tsx';
+import { checkEventComposeContent } from 'soapbox/components/modal-root.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import { Datetime } from 'soapbox/components/ui/datetime.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { ComposeEditor } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import UploadButton from './upload-button';
+import UploadButton from './upload-button.tsx';
 
 const messages = defineMessages({
   eventNamePlaceholder: { id: 'compose_event.fields.name_placeholder', defaultMessage: 'Name' },
@@ -137,7 +153,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
     dispatch((dispatch, getState) => {
       if (checkEventComposeContent(getState().compose_event)) {
         dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/outline/trash.svg'),
+          icon: trashIcon,
           heading: id
             ? <FormattedMessage id='confirmations.cancel_event_editing.heading' defaultMessage='Cancel event editing' />
             : <FormattedMessage id='confirmations.delete_event.heading' defaultMessage='Delete event' />,
@@ -177,12 +193,12 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
 
   const renderLocation = () => location && (
     <HStack className='h-[38px] text-gray-700 dark:text-gray-500' alignItems='center' space={2}>
-      <Icon src={ADDRESS_ICONS[location.type] || require('@tabler/icons/outline/map-pin.svg')} />
+      <Icon src={ADDRESS_ICONS[location.type] || mapPinIcon} />
       <Stack className='grow'>
         <Text>{location.description}</Text>
         <Text theme='muted' size='xs'>{[location.street, location.locality, location.country].filter(val => val?.trim()).join(' · ')}</Text>
       </Stack>
-      <IconButton title={intl.formatMessage(messages.resetLocation)} src={require('@tabler/icons/outline/x.svg')} onClick={() => onChangeLocation(null)} />
+      <IconButton title={intl.formatMessage(messages.resetLocation)} src={xIcon} onClick={() => onChangeLocation(null)} />
     </HStack>
   );
 
@@ -213,7 +229,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
           {banner ? (
             <>
               <img className='size-full object-cover' src={banner.url} alt='' />
-              <IconButton className='absolute right-2 top-2' src={require('@tabler/icons/outline/x.svg')} onClick={handleClearBanner} />
+              <IconButton className='absolute right-2 top-2' src={xIcon} onClick={handleClearBanner} />
             </>
           ) : (
             <UploadButton disabled={isUploading} onSelectFile={handleFiles} />
diff --git a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index c36861a6c..acdfee743 100644
--- a/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -1,9 +1,11 @@
-import React, { useRef } from 'react';
+import photoPlusIcon from '@tabler/icons/outline/photo-plus.svg';
+import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
-import { HStack, Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import Icon from 'soapbox/components/icon.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IUploadButton {
   disabled?: boolean;
@@ -28,7 +30,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   return (
     <HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
-        src={require('@tabler/icons/outline/photo-plus.svg')}
+        src={photoPlusIcon}
         className='size-7'
         onClick={handleClick}
       />
diff --git a/src/features/ui/components/modals/compose-modal.tsx b/src/features/ui/components/modals/compose-modal.tsx
index b5fc73c33..58e85a496 100644
--- a/src/features/ui/components/modals/compose-modal.tsx
+++ b/src/features/ui/components/modals/compose-modal.tsx
@@ -1,15 +1,22 @@
+import trashIcon from '@tabler/icons/outline/trash.svg';
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { cancelReplyCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose';
-import { openModal, closeModal } from 'soapbox/actions/modals';
-import { useGroup } from 'soapbox/api/hooks';
-import { checkComposeContent } from 'soapbox/components/modal-root';
-import { HStack, Modal, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles } from 'soapbox/hooks';
+import { cancelReplyCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose.ts';
+import { openModal, closeModal } from 'soapbox/actions/modals.ts';
+import { useGroup } from 'soapbox/api/hooks/index.ts';
+import { checkComposeContent } from 'soapbox/components/modal-root.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
 
-import ComposeForm from '../../../compose/components/compose-form';
+import ComposeForm from '../../../compose/components/compose-form.tsx';
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.cancel.confirm', defaultMessage: 'Discard' },
@@ -36,7 +43,7 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
   const onClickClose = () => {
     if (checkComposeContent(compose)) {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/outline/trash.svg'),
+        icon: trashIcon,
         heading: statusId
           ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' />
           : <FormattedMessage id='confirmations.cancel.heading' defaultMessage='Discard post' />,
diff --git a/src/features/ui/components/modals/confirmation-modal.tsx b/src/features/ui/components/modals/confirmation-modal.tsx
index 20d62114a..1572bce76 100644
--- a/src/features/ui/components/modals/confirmation-modal.tsx
+++ b/src/features/ui/components/modals/confirmation-modal.tsx
@@ -1,10 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import List, { ListItem } from 'soapbox/components/list';
-import { Modal, Stack, Text, Toggle } from 'soapbox/components/ui';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
 
-import type { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles';
+import type { ButtonThemes } from 'soapbox/components/ui/useButtonStyles.ts';
 
 interface IConfirmationModal {
   heading: React.ReactNode;
diff --git a/src/features/ui/components/modals/crypto-donate-modal.tsx b/src/features/ui/components/modals/crypto-donate-modal.tsx
index 58ce88b13..fc2925513 100644
--- a/src/features/ui/components/modals/crypto-donate-modal.tsx
+++ b/src/features/ui/components/modals/crypto-donate-modal.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import DetailedCryptoAddress from 'soapbox/features/crypto-donate/components/detailed-crypto-address.tsx';
 
-import { Modal } from 'soapbox/components/ui';
-import DetailedCryptoAddress from 'soapbox/features/crypto-donate/components/detailed-crypto-address';
-
-import type { ICryptoAddress } from '../../../crypto-donate/components/crypto-address';
+import type { ICryptoAddress } from '../../../crypto-donate/components/crypto-address.tsx';
 
 const CryptoDonateModal: React.FC<ICryptoAddress & { onClose: () => void }> = ({ onClose, ...props }) => {
 
diff --git a/src/features/ui/components/modals/dislikes-modal.tsx b/src/features/ui/components/modals/dislikes-modal.tsx
index 7689d7047..000f3dce1 100644
--- a/src/features/ui/components/modals/dislikes-modal.tsx
+++ b/src/features/ui/components/modals/dislikes-modal.tsx
@@ -1,11 +1,13 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchDislikes } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchDislikes } from 'soapbox/actions/interactions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IDislikesModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/edit-announcement-modal.tsx b/src/features/ui/components/modals/edit-announcement-modal.tsx
index 1a81df1ab..428dd51fe 100644
--- a/src/features/ui/components/modals/edit-announcement-modal.tsx
+++ b/src/features/ui/components/modals/edit-announcement-modal.tsx
@@ -1,14 +1,21 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements';
-import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'soapbox/components/ui';
-import { Datetime } from 'soapbox/components/ui/datetime/datetime';
-import { useAppDispatch } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { useAnnouncements } from 'soapbox/api/hooks/admin/useAnnouncements.ts';
+import { Datetime } from 'soapbox/components/ui/datetime.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { AdminAnnouncement } from 'soapbox/schemas';
+import type { AdminAnnouncement } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   save: { id: 'admin.edit_announcement.save', defaultMessage: 'Save' },
diff --git a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index 4ecf6b0e9..6329e5104 100644
--- a/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -1,18 +1,24 @@
 import { useFloating, shift } from '@floating-ui/react';
-import React, { useState } from 'react';
+import moodHappyIcon from '@tabler/icons/outline/mood-happy.svg';
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { useBookmarkFolder, useUpdateBookmarkFolder } from 'soapbox/api/hooks';
-import { Emoji, HStack, Icon, Input, Modal } from 'soapbox/components/ui';
-import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
-import { messages as emojiMessages } from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
-import { useAppDispatch, useClickOutside } from 'soapbox/hooks';
-import { useTextField } from 'soapbox/hooks/forms';
-import toast from 'soapbox/toast';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { useBookmarkFolder, useUpdateBookmarkFolder } from 'soapbox/api/hooks/index.ts';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import { messages as emojiMessages } from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx';
+import { useTextField } from 'soapbox/hooks/forms/index.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Emoji as EmojiType } from 'soapbox/features/emoji';
+import type { Emoji as EmojiType } from 'soapbox/features/emoji/index.ts';
 
 const messages = defineMessages({
   label: { id: 'bookmark_folders.new.title_placeholder', defaultMessage: 'New folder title' },
@@ -58,7 +64,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
       >
         {emoji
           ? <Emoji height={20} width={20} emoji={emoji} />
-          : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={require('@tabler/icons/outline/mood-happy.svg')} />}
+          : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={moodHappyIcon} />}
       </button>
 
       {createPortal(
diff --git a/src/features/ui/components/modals/edit-domain-modal.tsx b/src/features/ui/components/modals/edit-domain-modal.tsx
index c0e3b5e29..a2d038f06 100644
--- a/src/features/ui/components/modals/edit-domain-modal.tsx
+++ b/src/features/ui/components/modals/edit-domain-modal.tsx
@@ -1,12 +1,19 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { useDomains } from 'soapbox/api/hooks/admin';
-import { Form, FormGroup, HStack, Input, Modal, Stack, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import { Domain } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { useDomains } from 'soapbox/api/hooks/admin/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { Domain } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   save: { id: 'admin.edit_domain.save', defaultMessage: 'Save' },
diff --git a/src/features/ui/components/modals/edit-federation-modal.tsx b/src/features/ui/components/modals/edit-federation-modal.tsx
index ff4547b26..6ef129446 100644
--- a/src/features/ui/components/modals/edit-federation-modal.tsx
+++ b/src/features/ui/components/modals/edit-federation-modal.tsx
@@ -1,12 +1,14 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { updateMrf } from 'soapbox/actions/mrf';
-import List, { ListItem } from 'soapbox/components/list';
-import { Modal, Toggle } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
+import { updateMrf } from 'soapbox/actions/mrf.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetRemoteInstance } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
diff --git a/src/features/ui/components/modals/edit-rule-modal.tsx b/src/features/ui/components/modals/edit-rule-modal.tsx
index fe1862da5..202a78fae 100644
--- a/src/features/ui/components/modals/edit-rule-modal.tsx
+++ b/src/features/ui/components/modals/edit-rule-modal.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { useRules } from 'soapbox/api/hooks/admin';
-import { Form, FormGroup, Input, Modal } from 'soapbox/components/ui';
-import { useTextField } from 'soapbox/hooks/forms';
-import { type AdminRule } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { useRules } from 'soapbox/api/hooks/admin/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import { useTextField } from 'soapbox/hooks/forms/index.ts';
+import { type AdminRule } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   save: { id: 'admin.edit_rule.save', defaultMessage: 'Save' },
diff --git a/src/features/ui/components/modals/embed-modal.tsx b/src/features/ui/components/modals/embed-modal.tsx
index 5ba385238..ca5c442c3 100644
--- a/src/features/ui/components/modals/embed-modal.tsx
+++ b/src/features/ui/components/modals/embed-modal.tsx
@@ -1,12 +1,15 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import CopyableInput from 'soapbox/components/copyable-input';
-import SafeEmbed from 'soapbox/components/safe-embed';
-import { Modal, Stack, Text, Divider } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
-import useEmbed from 'soapbox/queries/embed';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import SafeEmbed from 'soapbox/components/safe-embed.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import useEmbed from 'soapbox/queries/embed.ts';
 
 interface IEmbedModal {
   url: string;
diff --git a/src/features/ui/components/modals/event-map-modal.tsx b/src/features/ui/components/modals/event-map-modal.tsx
index 2a16a84f3..af2207174 100644
--- a/src/features/ui/components/modals/event-map-modal.tsx
+++ b/src/features/ui/components/modals/event-map-modal.tsx
@@ -1,19 +1,26 @@
+import gpsIcon from '@tabler/icons/outline/gps.svg';
 import L from 'leaflet';
-import React, { useCallback, useEffect, useRef } from 'react';
+import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
+import iconUrl from 'leaflet/dist/images/marker-icon.png';
+import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
+import { useCallback, useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Modal, Stack } from 'soapbox/components/ui';
-import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import Button from 'soapbox/components/ui/button.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 import 'leaflet/dist/leaflet.css';
 
 L.Icon.Default.mergeOptions({
-  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-  iconUrl: require('leaflet/dist/images/marker-icon.png'),
-  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+  iconRetinaUrl,
+  iconUrl,
+  shadowUrl,
 });
 
 interface IEventMapModal {
@@ -64,7 +71,7 @@ const EventMapModal: React.FC<IEventMapModal> = ({ onClose, statusId }) => {
     >
       <Stack alignItems='center' space={6}>
         <div className='h-96 w-full' id='event-map' />
-        <Button onClick={onClickNavigate} icon={require('@tabler/icons/outline/gps.svg')}>
+        <Button onClick={onClickNavigate} icon={gpsIcon}>
           <FormattedMessage id='event_map.navigate' defaultMessage='Navigate' />
         </Button>
       </Stack>
diff --git a/src/features/ui/components/modals/event-participants-modal.tsx b/src/features/ui/components/modals/event-participants-modal.tsx
index 85324546d..595198070 100644
--- a/src/features/ui/components/modals/event-participants-modal.tsx
+++ b/src/features/ui/components/modals/event-participants-modal.tsx
@@ -1,11 +1,13 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchEventParticipations } from 'soapbox/actions/events';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchEventParticipations } from 'soapbox/actions/events.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IEventParticipantsModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/familiar-followers-modal.tsx b/src/features/ui/components/modals/familiar-followers-modal.tsx
index a3287a9c5..0322e07ca 100644
--- a/src/features/ui/components/modals/familiar-followers-modal.tsx
+++ b/src/features/ui/components/modals/familiar-followers-modal.tsx
@@ -1,12 +1,12 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppSelector } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
 const getAccount = makeGetAccount();
 
diff --git a/src/features/ui/components/modals/favourites-modal.tsx b/src/features/ui/components/modals/favourites-modal.tsx
index d2b9b9ea7..dbea9d5a3 100644
--- a/src/features/ui/components/modals/favourites-modal.tsx
+++ b/src/features/ui/components/modals/favourites-modal.tsx
@@ -1,11 +1,13 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchFavourites, expandFavourites } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchFavourites, expandFavourites } from 'soapbox/actions/interactions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IFavouritesModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/hotkeys-modal.tsx b/src/features/ui/components/modals/hotkeys-modal.tsx
index 7e5ff858f..aaa10e1cb 100644
--- a/src/features/ui/components/modals/hotkeys-modal.tsx
+++ b/src/features/ui/components/modals/hotkeys-modal.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui';
-import { useFeatures } from 'soapbox/hooks';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface IHotkeysModal {
   onClose: () => void;
diff --git a/src/features/ui/components/modals/join-event-modal.tsx b/src/features/ui/components/modals/join-event-modal.tsx
index eff0adeba..b2056fdf1 100644
--- a/src/features/ui/components/modals/join-event-modal.tsx
+++ b/src/features/ui/components/modals/join-event-modal.tsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { joinEvent } from 'soapbox/actions/events';
-import { closeModal } from 'soapbox/actions/modals';
-import { FormGroup, Modal, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { joinEvent } from 'soapbox/actions/events.ts';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const messages = defineMessages({
   hint: { id: 'join_event.hint', defaultMessage: 'You can tell the organizer why do you want to participate in this event:' },
diff --git a/src/features/ui/components/modals/landing-page-modal.test.tsx b/src/features/ui/components/modals/landing-page-modal.test.tsx
index 80d49740b..ef146b862 100644
--- a/src/features/ui/components/modals/landing-page-modal.test.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import LandingPageModal from './landing-page-modal';
+import LandingPageModal from './landing-page-modal.tsx';
 
 describe('<LandingPageModal />', () => {
   it('successfully renders', () => {
diff --git a/src/features/ui/components/modals/landing-page-modal.tsx b/src/features/ui/components/modals/landing-page-modal.tsx
index 251bc5f9a..b5d944f56 100644
--- a/src/features/ui/components/modals/landing-page-modal.tsx
+++ b/src/features/ui/components/modals/landing-page-modal.tsx
@@ -1,10 +1,14 @@
+import lifebuoyIcon from '@tabler/icons/outline/lifebuoy.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import SiteLogo from 'soapbox/components/site-logo';
-import { Text, Button, Icon, Modal } from 'soapbox/components/ui';
-import { useRegistrationStatus, useSoapboxConfig } from 'soapbox/hooks';
+import SiteLogo from 'soapbox/components/site-logo.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const messages = defineMessages({
   download: { id: 'landing_page_modal.download', defaultMessage: 'Download' },
@@ -38,7 +42,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
               target='_blank'
               className='flex items-center space-x-3 rounded-md p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50'
             >
-              <Icon src={require('@tabler/icons/outline/lifebuoy.svg')} className='size-6 shrink-0 text-gray-600 dark:text-gray-700' />
+              <Icon src={lifebuoyIcon} className='size-6 shrink-0 text-gray-600 dark:text-gray-700' />
 
               <Text weight='medium'>
                 {intl.formatMessage(messages.helpCenter)}
diff --git a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
index bef60fda4..a06ac688c 100644
--- a/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/create-group-modal.tsx
@@ -1,17 +1,18 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { z } from 'zod';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useCreateGroup, useGroupValidation, type CreateGroupParams } from 'soapbox/api/hooks';
-import { Modal, Stack } from 'soapbox/components/ui';
-import { useDebounce } from 'soapbox/hooks';
-import { type Group } from 'soapbox/schemas';
-import toast from 'soapbox/toast';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useCreateGroup, useGroupValidation, type CreateGroupParams } from 'soapbox/api/hooks/index.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { type Group } from 'soapbox/schemas/index.ts';
+import toast from 'soapbox/toast.tsx';
 
-import ConfirmationStep from './steps/confirmation-step';
-import DetailsStep from './steps/details-step';
-import PrivacyStep from './steps/privacy-step';
+import ConfirmationStep from './steps/confirmation-step.tsx';
+import DetailsStep from './steps/details-step.tsx';
+import PrivacyStep from './steps/privacy-step.tsx';
 
 const messages = defineMessages({
   next: { id: 'manage_group.next', defaultMessage: 'Next' },
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index 6dbb4e667..30edde063 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -1,11 +1,17 @@
-import React from 'react';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import shareIcon from '@tabler/icons/outline/share.svg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
-import toast from 'soapbox/toast';
-import copy from 'soapbox/utils/copy';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import toast from 'soapbox/toast.tsx';
+import copy from 'soapbox/utils/copy.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 interface IConfirmationStep {
   group: Group | null;
@@ -101,12 +107,12 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
 
       <HStack space={2} justifyContent='center'>
         {('share' in navigator) && (
-          <Button onClick={handleShare} theme='transparent' icon={require('@tabler/icons/outline/share.svg')} className='text-primary-600'>
+          <Button onClick={handleShare} theme='transparent' icon={shareIcon} className='text-primary-600'>
             <FormattedMessage id='manage_group.confirmation.share' defaultMessage='Share this group' />
           </Button>
         )}
 
-        <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/outline/link.svg')} className='text-primary-600'>
+        <Button onClick={handleCopyLink} theme='transparent' icon={linkIcon} className='text-primary-600'>
           <FormattedMessage id='manage_group.confirmation.copy' defaultMessage='Copy link' />
         </Button>
       </HStack>
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index 1f8a2006b..0c65ae246 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -1,14 +1,18 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { CreateGroupParams, useGroupValidation } from 'soapbox/api/hooks';
-import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui';
-import AvatarPicker from 'soapbox/features/edit-profile/components/avatar-picker';
-import HeaderPicker from 'soapbox/features/edit-profile/components/header-picker';
-import GroupTagsField from 'soapbox/features/group/components/group-tags-field';
-import { useAppSelector, useDebounce, useInstance } from 'soapbox/hooks';
-import { usePreview } from 'soapbox/hooks/forms';
-import resizeImage from 'soapbox/utils/resize-image';
+import { CreateGroupParams, useGroupValidation } from 'soapbox/api/hooks/index.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import AvatarPicker from 'soapbox/features/edit-profile/components/avatar-picker.tsx';
+import HeaderPicker from 'soapbox/features/edit-profile/components/header-picker.tsx';
+import GroupTagsField from 'soapbox/features/group/components/group-tags-field.tsx';
+import { usePreview } from 'soapbox/hooks/forms/index.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDebounce } from 'soapbox/hooks/useDebounce.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
 const messages = defineMessages({
   groupNamePlaceholder: { id: 'manage_group.fields.name_placeholder', defaultMessage: 'Group Name' },
diff --git a/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx b/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
index 96d168c01..4c5751e6c 100644
--- a/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
+++ b/src/features/ui/components/modals/manage-group-modal/steps/privacy-step.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { type CreateGroupParams } from 'soapbox/api/hooks';
-import List, { ListItem } from 'soapbox/components/list';
-import { Form, FormGroup, Stack, Text } from 'soapbox/components/ui';
+import { type CreateGroupParams } from 'soapbox/api/hooks/index.ts';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
 interface IPrivacyStep {
   params: CreateGroupParams;
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 86ec556b2..267683f84 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -1,27 +1,37 @@
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import arrowRightIcon from '@tabler/icons/outline/arrow-right.svg';
+import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import downloadIcon from '@tabler/icons/outline/download.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import ReactSwipeableViews from 'react-swipeable-views';
 
-import { fetchNext, fetchStatusWithContext } from 'soapbox/actions/statuses';
-import ExtendedVideoPlayer from 'soapbox/components/extended-video-player';
-import MissingIndicator from 'soapbox/components/missing-indicator';
-import StatusActionBar from 'soapbox/components/status-action-bar';
-import { Icon, IconButton, HStack, Stack } from 'soapbox/components/ui';
-import Audio from 'soapbox/features/audio';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import Thread from 'soapbox/features/status/components/thread';
-import Video from 'soapbox/features/video';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { userTouching } from 'soapbox/is-mobile';
-import { makeGetStatus } from 'soapbox/selectors';
+import { fetchNext, fetchStatusWithContext } from 'soapbox/actions/statuses.ts';
+import ExtendedVideoPlayer from 'soapbox/components/extended-video-player.tsx';
+import MissingIndicator from 'soapbox/components/missing-indicator.tsx';
+import StatusActionBar from 'soapbox/components/status-action-bar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Audio from 'soapbox/features/audio/index.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import Thread from 'soapbox/features/status/components/thread.tsx';
+import Video from 'soapbox/features/video/index.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import ImageLoader from '../image-loader';
+import ImageLoader from '../image-loader.tsx';
 
 import type { List as ImmutableList } from 'immutable';
-import type { Attachment, Status } from 'soapbox/types/entities';
+import type { Attachment, Status } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -255,7 +265,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           >
             <IconButton
               title={intl.formatMessage(messages.close)}
-              src={require('@tabler/icons/outline/x.svg')}
+              src={xIcon}
               onClick={onClose}
               theme='dark'
               className='!p-1.5 hover:scale-105 hover:bg-gray-900'
@@ -264,7 +274,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
             <HStack alignItems='center' space={2}>
               <IconButton
-                src={require('@tabler/icons/outline/download.svg')}
+                src={downloadIcon}
                 theme='dark'
                 className='!p-1.5 hover:scale-105 hover:bg-gray-900'
                 iconClassName='h-5 w-5'
@@ -273,7 +283,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
               {status && (
                 <IconButton
-                  src={isFullScreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')}
+                  src={isFullScreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
                   title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
                   theme='dark'
                   className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
@@ -296,7 +306,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   onClick={handlePrevClick}
                   aria-label={intl.formatMessage(messages.previous)}
                 >
-                  <Icon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-5' />
+                  <Icon src={arrowLeftIcon} className='size-5' />
                 </button>
               </div>
             )}
@@ -318,7 +328,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   onClick={handleNextClick}
                   aria-label={intl.formatMessage(messages.next)}
                 >
-                  <Icon src={require('@tabler/icons/outline/arrow-right.svg')} className='size-5' />
+                  <Icon src={arrowRightIcon} className='size-5' />
                 </button>
               </div>
             )}
diff --git a/src/features/ui/components/modals/mentions-modal.tsx b/src/features/ui/components/modals/mentions-modal.tsx
index 4d16afc75..a2e6eb8a2 100644
--- a/src/features/ui/components/modals/mentions-modal.tsx
+++ b/src/features/ui/components/modals/mentions-modal.tsx
@@ -1,13 +1,15 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchStatusWithContext } from 'soapbox/actions/statuses';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { fetchStatusWithContext } from 'soapbox/actions/statuses.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 interface IMentionsModal {
   onClose: (type: string) => void;
diff --git a/src/features/ui/components/modals/missing-description-modal.tsx b/src/features/ui/components/modals/missing-description-modal.tsx
index 742836dba..739940815 100644
--- a/src/features/ui/components/modals/missing-description-modal.tsx
+++ b/src/features/ui/components/modals/missing-description-modal.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui';
+import Modal from 'soapbox/components/ui/modal.tsx';
 
 const messages = defineMessages({
   modalTitle: { id: 'missing_description_modal.text', defaultMessage: 'You have not entered a description for all attachments. Continue anyway?' },
diff --git a/src/features/ui/components/modals/mute-modal.tsx b/src/features/ui/components/modals/mute-modal.tsx
index a27127337..ceee7062d 100644
--- a/src/features/ui/components/modals/mute-modal.tsx
+++ b/src/features/ui/components/modals/mute-modal.tsx
@@ -1,13 +1,18 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { muteAccount } from 'soapbox/actions/accounts';
-import { closeModal } from 'soapbox/actions/modals';
-import { toggleHideNotifications, changeMuteDuration } from 'soapbox/actions/mutes';
-import { useAccount } from 'soapbox/api/hooks';
-import { Modal, HStack, Stack, Text, Toggle } from 'soapbox/components/ui';
-import DurationSelector from 'soapbox/features/compose/components/polls/duration-selector';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
+import { muteAccount } from 'soapbox/actions/accounts.ts';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { toggleHideNotifications, changeMuteDuration } from 'soapbox/actions/mutes.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import DurationSelector from 'soapbox/features/compose/components/polls/duration-selector.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 const MuteModal = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
index adc56b707..0c0db8b42 100644
--- a/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/components/nostr-extension-indicator.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { closeModal } from 'soapbox/actions/modals';
-import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
-import Stack from 'soapbox/components/ui/stack/stack';
-import Text from 'soapbox/components/ui/text/text';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { useAppDispatch } from 'soapbox/hooks';
+
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { nostrExtensionLogIn } from 'soapbox/actions/nostr.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const NostrExtensionIndicator: React.FC = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx b/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
index 21595bdb9..b63507a82 100644
--- a/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import ExtensionStep from './steps/extension-step';
-import KeyAddStep from './steps/key-add-step';
+import ExtensionStep from './steps/extension-step.tsx';
+import KeyAddStep from './steps/key-add-step.tsx';
 
 type Step = 'extension' | 'key-add';
 
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
index 36688eb16..b8afa59a9 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
@@ -1,13 +1,21 @@
-import React from 'react';
+import alertTriangleIcon from '@tabler/icons/outline/alert-triangle.svg';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modals';
-import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, Text, Divider, HStack } from 'soapbox/components/ui';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { useAppDispatch, useInstance, useSoapboxConfig } from 'soapbox/hooks';
+
+import { openModal } from 'soapbox/actions/modals.ts';
+import { nostrExtensionLogIn } from 'soapbox/actions/nostr.ts';
+import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 interface IExtensionStep {
   isLogin?: boolean;
@@ -62,7 +70,7 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ isLogin, onClickAlt, onClose
 
           <Divider text='or' />
 
-          <Button theme={isLogin ? 'muted' : 'transparent'} onClick={onClickAlt} icon={require('@tabler/icons/outline/alert-triangle.svg')}>
+          <Button theme={isLogin ? 'muted' : 'transparent'} onClick={onClickAlt} icon={alertTriangleIcon}>
             {isLogin ? <FormattedMessage id='nostr_login.siwe.alt' defaultMessage='Log in with key' /> : <FormattedMessage id='nostr_signup.siwe.alt' defaultMessage={'Don\'t have an extension?'} /> }
           </Button>
 
diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
index 44f5b8cf7..39d09f148 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
@@ -1,15 +1,22 @@
 import { nip19 } from 'nostr-tools';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { logInNostr } from 'soapbox/actions/nostr';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, Input, FormGroup, Form, Divider } from 'soapbox/components/ui';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useAppDispatch } from 'soapbox/hooks';
 
-import NostrExtensionIndicator from '../components/nostr-extension-indicator';
+import { logInNostr } from 'soapbox/actions/nostr.ts';
+import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+
+import NostrExtensionIndicator from '../components/nostr-extension-indicator.tsx';
 
 interface IKeyAddStep {
   onClose(): void;
diff --git a/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx b/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
index ab4b5d5a7..450b318e9 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import ExtensionStep from '../nostr-login-modal/steps/extension-step';
+import ExtensionStep from '../nostr-login-modal/steps/extension-step.tsx';
 
-import KeyStep from './steps/key-step';
-import KeygenStep from './steps/keygen-step';
+import KeyStep from './steps/key-step.tsx';
+import KeygenStep from './steps/keygen-step.tsx';
 
 type Step = 'extension' | 'key' | 'keygen';
 
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
index f3fd6d0b9..2ea8ec598 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/key-step.tsx
@@ -1,12 +1,15 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, Text, Divider } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Divider from 'soapbox/components/ui/divider.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import NostrExtensionIndicator from '../../nostr-login-modal/components/nostr-extension-indicator';
+import NostrExtensionIndicator from '../../nostr-login-modal/components/nostr-extension-indicator.tsx';
 
 interface IKeyStep {
   setStep(step: 'extension' | 'key' | 'keygen'): void;
diff --git a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
index 7ae2e6164..407faf92c 100644
--- a/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signup-modal/steps/keygen-step.tsx
@@ -1,18 +1,28 @@
+import downloadIcon from '@tabler/icons/outline/download.svg';
 import { generateSecretKey, getPublicKey, nip19 } from 'nostr-tools';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchAccount } from 'soapbox/actions/accounts';
-import { logInNostr } from 'soapbox/actions/nostr';
-import { closeSidebar } from 'soapbox/actions/sidebar';
-import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, FormGroup, Text, Tooltip, HStack, Input } from 'soapbox/components/ui';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useAppDispatch, useInstance } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-import { download } from 'soapbox/utils/download';
-import { slugify } from 'soapbox/utils/input';
+
+import { fetchAccount } from 'soapbox/actions/accounts.ts';
+import { logInNostr } from 'soapbox/actions/nostr.ts';
+import { closeSidebar } from 'soapbox/actions/sidebar.ts';
+import EmojiGraphic from 'soapbox/components/emoji-graphic.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { download } from 'soapbox/utils/download.ts';
+import { slugify } from 'soapbox/utils/input.ts';
 
 interface IKeygenStep {
   onClose(): void;
@@ -93,7 +103,7 @@ const KeygenStep: React.FC<IKeygenStep> = ({ onClose }) => {
         </Stack>
 
         <HStack space={6} justifyContent='center' >
-          <Button theme='secondary' size='lg' icon={require('@tabler/icons/outline/download.svg')} onClick={handleDownload}>
+          <Button theme='secondary' size='lg' icon={downloadIcon} onClick={handleDownload}>
             <FormattedMessage id='nostr_signup.keygen.download_key_button' defaultMessage='Download key' />
           </Button>
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
index 82f2b11cc..dfd544f19 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
@@ -1,17 +1,19 @@
 import clsx from 'clsx';
-import React from 'react';
+import { useEffect, useState } from 'react';
 import ReactSwipeableViews from 'react-swipeable-views';
 
-import { endOnboarding } from 'soapbox/actions/onboarding';
-import { Stack, Modal, HStack } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { endOnboarding } from 'soapbox/actions/onboarding.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import AvatarSelectionModal from './steps/avatar-step';
-import BioStep from './steps/bio-step';
-import CompletedModal from './steps/completed-step';
-import CoverPhotoSelectionModal from './steps/cover-photo-selection-step';
-import DisplayNameStep from './steps/display-name-step';
-import SuggestedAccountsModal from './steps/suggested-accounts-step';
+import AvatarSelectionModal from './steps/avatar-step.tsx';
+import BioStep from './steps/bio-step.tsx';
+import CompletedModal from './steps/completed-step.tsx';
+import CoverPhotoSelectionModal from './steps/cover-photo-selection-step.tsx';
+import DisplayNameStep from './steps/display-name-step.tsx';
+import SuggestedAccountsModal from './steps/suggested-accounts-step.tsx';
 
 interface IOnboardingFlowModal {
   onClose(): void;
@@ -20,7 +22,7 @@ interface IOnboardingFlowModal {
 const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
   const dispatch = useAppDispatch();
 
-  const [currentStep, setCurrentStep] = React.useState<number>(0);
+  const [currentStep, setCurrentStep] = useState<number>(0);
 
   const handleSwipe = (nextStep: number) => {
     setCurrentStep(nextStep);
@@ -64,7 +66,7 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener('keyup', handleKeyUp);
 
     return () => {
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
index 21f0f5dcd..c3992bfc8 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx
@@ -1,18 +1,26 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import { isDefaultAvatar } from 'soapbox/utils/accounts';
-import resizeImage from 'soapbox/utils/resize-image';
+import { patchMe } from 'soapbox/actions/me.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultAvatar } from 'soapbox/utils/accounts.ts';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
@@ -27,10 +35,10 @@ interface IAvatarSelectionModal {
 const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext }) => {
   const dispatch = useAppDispatch();
   const { account } = useOwnAccount();
-  const fileInput = React.useRef<HTMLInputElement>(null);
-  const [selectedFile, setSelectedFile] = React.useState<string | null>();
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [isDisabled, setDisabled] = React.useState<boolean>(true);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [selectedFile, setSelectedFile] = useState<string | null>();
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
+  const [isDisabled, setDisabled] = useState<boolean>(true);
   const isDefault = account ? isDefaultAvatar(account.avatar) : false;
 
   const openFilePicker = () => {
@@ -105,7 +113,7 @@ const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext
           })}
           disabled={isSubmitting}
         >
-          <Icon src={require('@tabler/icons/outline/plus.svg')} className='size-5 text-white' />
+          <Icon src={plusIcon} className='size-5 text-white' />
         </button>
 
         <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
index ce5e7aac8..922fdfd89 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx
@@ -1,11 +1,17 @@
-import React from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { Button, Text, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { patchMe } from 'soapbox/actions/me.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
 
@@ -14,7 +20,7 @@ const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface IBioStep {
   onClose(): void;
@@ -26,9 +32,9 @@ const BioStep: React.FC<IBioStep> = ({ onClose, onNext }) => {
   const dispatch = useAppDispatch();
 
   const { account } = useOwnAccount();
-  const [value, setValue] = React.useState<string>(account?.source?.note ?? '');
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [errors, setErrors] = React.useState<string[]>([]);
+  const [value, setValue] = useState<string>(account?.source?.note ?? '');
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
+  const [errors, setErrors] = useState<string[]>([]);
 
   const handleSubmit = () => {
     setSubmitting(true);
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
index 5fee84b4a..3913129f6 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx
@@ -1,10 +1,14 @@
-import React from 'react';
+import confettiIcon from '@tabler/icons/outline/confetti.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Icon, Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import Button from 'soapbox/components/ui/button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface ICompletedModal {
   onClose?(): void;
@@ -19,7 +23,7 @@ const CompletedModal: React.FC<ICompletedModal> = ({ onClose, onComplete }) => {
       <div className='relative w-full'>
         <IconButton src={closeIcon} className='absolute right-[2%] top-[-6%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' onClick={onClose} />
         <Stack space={2} justifyContent='center' alignItems='center' className=''>
-          <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
+          <Icon strokeWidth={1} src={confettiIcon} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
           <Text size='2xl' align='center' weight='bold'>
             <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
           </Text>
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
index 0dac39e3f..5ba42b73d 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx
@@ -1,19 +1,27 @@
+import plusIcon from '@tabler/icons/outline/plus.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import clsx from 'clsx';
-import React from 'react';
+import { useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import StillImage from 'soapbox/components/still-image';
-import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
-import { isDefaultHeader } from 'soapbox/utils/accounts';
-import resizeImage from 'soapbox/utils/resize-image';
+import { patchMe } from 'soapbox/actions/me.ts';
+import StillImage from 'soapbox/components/still-image.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import toast from 'soapbox/toast.tsx';
+import { isDefaultHeader } from 'soapbox/utils/accounts.ts';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
@@ -30,10 +38,10 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
   const dispatch = useAppDispatch();
   const { account } = useOwnAccount();
 
-  const fileInput = React.useRef<HTMLInputElement>(null);
-  const [selectedFile, setSelectedFile] = React.useState<string | null>();
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [isDisabled, setDisabled] = React.useState<boolean>(true);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [selectedFile, setSelectedFile] = useState<string | null>();
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
+  const [isDisabled, setDisabled] = useState<boolean>(true);
   const isDefault = account ? isDefaultHeader(account.avatar) : false;
 
   const openFilePicker = () => {
@@ -123,7 +131,7 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
               })}
               disabled={isSubmitting}
             >
-              <Icon src={require('@tabler/icons/outline/plus.svg')} className='size-5 text-white' />
+              <Icon src={plusIcon} className='size-5 text-white' />
             </button>
 
             <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index b12e89d18..27e6ca8ab 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -1,15 +1,21 @@
-import React from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { patchMe } from 'soapbox/actions/me';
-import { Button, Stack, Text, FormGroup, Input } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { patchMe } from 'soapbox/actions/me.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import toast from 'soapbox/toast.tsx';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
@@ -26,15 +32,15 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
   const dispatch = useAppDispatch();
 
   const { account } = useOwnAccount();
-  const [value, setValue] = React.useState<string>(account?.display_name || '');
-  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
-  const [errors, setErrors] = React.useState<string[]>([]);
+  const [value, setValue] = useState<string>(account?.display_name || '');
+  const [isSubmitting, setSubmitting] = useState<boolean>(false);
+  const [errors, setErrors] = useState<string[]>([]);
 
   const trimmedValue = value.trim();
   const isValid = trimmedValue.length > 0;
   const isDisabled = !isValid || value.length > 30;
 
-  const hintText = React.useMemo(() => {
+  const hintText = useMemo(() => {
     const charsLeft = 30 - value.length;
     const suffix = charsLeft === 1 ? 'character remaining' : 'characters remaining';
 
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
index 1576a69c7..e60ce7630 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx
@@ -1,14 +1,16 @@
+import xIcon from '@tabler/icons/outline/x.svg';
 import debounce from 'lodash/debounce';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useOnboardingSuggestions } from 'soapbox/queries/suggestions.ts';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface ICoverPhotoSelectionModal {
   onClose?(): void;
diff --git a/src/features/ui/components/modals/reactions-modal.tsx b/src/features/ui/components/modals/reactions-modal.tsx
index dd51f7253..e399d4176 100644
--- a/src/features/ui/components/modals/reactions-modal.tsx
+++ b/src/features/ui/components/modals/reactions-modal.tsx
@@ -1,16 +1,20 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Emoji, Modal, Spinner, Tabs } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { ReactionRecord } from 'soapbox/reducers/user-lists';
+import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { ReactionRecord } from 'soapbox/reducers/user-lists.ts';
 
-import type { Item } from 'soapbox/components/ui/tabs/tabs';
+import type { Item } from 'soapbox/components/ui/tabs.tsx';
 
 const messages = defineMessages({
   all: { id: 'reactions.all', defaultMessage: 'All' },
diff --git a/src/features/ui/components/modals/reblogs-modal.tsx b/src/features/ui/components/modals/reblogs-modal.tsx
index 5107fa881..8d93e5356 100644
--- a/src/features/ui/components/modals/reblogs-modal.tsx
+++ b/src/features/ui/components/modals/reblogs-modal.tsx
@@ -1,12 +1,14 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchReblogs, expandReblogs } from 'soapbox/actions/interactions';
-import { fetchStatus } from 'soapbox/actions/statuses';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { fetchReblogs, expandReblogs } from 'soapbox/actions/interactions.ts';
+import { fetchStatus } from 'soapbox/actions/statuses.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 interface IReblogsModal {
   onClose: (string: string) => void;
diff --git a/src/features/ui/components/modals/reply-mentions-modal.tsx b/src/features/ui/components/modals/reply-mentions-modal.tsx
index 386402078..0611e2db9 100644
--- a/src/features/ui/components/modals/reply-mentions-modal.tsx
+++ b/src/features/ui/components/modals/reply-mentions-modal.tsx
@@ -1,14 +1,16 @@
-import React, { useCallback } from 'react';
+import arrowLeftIcon from '@tabler/icons/outline/arrow-left.svg';
+import { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Modal } from 'soapbox/components/ui';
-import { useAppSelector, useCompose, useOwnAccount } from 'soapbox/hooks';
-import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
-import { makeGetStatus } from 'soapbox/selectors';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Account from 'soapbox/features/reply-mentions/account.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useCompose } from 'soapbox/hooks/useCompose.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import Account from '../../../reply-mentions/account';
-
-import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface IReplyMentionsModal {
   composeId: string;
@@ -33,7 +35,7 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ composeId, onClose
     <Modal
       title={<FormattedMessage id='navigation_bar.in_reply_to' defaultMessage='In reply to' />}
       onClose={onClickClose}
-      closeIcon={require('@tabler/icons/outline/arrow-left.svg')}
+      closeIcon={arrowLeftIcon}
       closePosition='left'
     >
       <div className='block min-h-[300px] flex-1 flex-row overflow-y-auto'>
diff --git a/src/features/ui/components/modals/report-modal/report-modal.tsx b/src/features/ui/components/modals/report-modal/report-modal.tsx
index 42727fbe2..ac1244d53 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -1,21 +1,30 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import infoCircleIcon from '@tabler/icons/outline/info-circle.svg';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { blockAccount } from 'soapbox/actions/accounts';
-import { submitReport, submitReportSuccess, submitReportFail, ReportableEntities } from 'soapbox/actions/reports';
-import { expandAccountTimeline } from 'soapbox/actions/timelines';
-import { useAccount } from 'soapbox/api/hooks';
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import GroupCard from 'soapbox/components/group-card';
-import List, { ListItem } from 'soapbox/components/list';
-import StatusContent from 'soapbox/components/status-content';
-import { Avatar, HStack, Icon, Modal, ProgressBar, Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
+import { blockAccount } from 'soapbox/actions/accounts.ts';
+import { submitReport, submitReportSuccess, submitReportFail, ReportableEntities } from 'soapbox/actions/reports.ts';
+import { expandAccountTimeline } from 'soapbox/actions/timelines.ts';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
+import GroupCard from 'soapbox/components/group-card.tsx';
+import List, { ListItem } from 'soapbox/components/list.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import ProgressBar from 'soapbox/components/ui/progress-bar.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import ConfirmationStep from './steps/confirmation-step';
-import OtherActionsStep from './steps/other-actions-step';
-import ReasonStep from './steps/reason-step';
+import ConfirmationStep from './steps/confirmation-step.tsx';
+import OtherActionsStep from './steps/other-actions-step.tsx';
+import ReasonStep from './steps/reason-step.tsx';
 
 const messages = defineMessages({
   blankslate: { id: 'report.reason.blankslate', defaultMessage: 'You have removed all statuses from being selected.' },
@@ -226,7 +235,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
 
           <List>
             <ListItem
-              label={<Icon src={require('@tabler/icons/outline/info-circle.svg')} className='text-gray-600' />}
+              label={<Icon src={infoCircleIcon} className='text-gray-600' />}
             >
               <Text size='sm'>{intl.formatMessage(messages.reportContext)}</Text>
             </ListItem>
diff --git a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index e00d19115..95d34fe07 100644
--- a/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { ReportableEntities } from 'soapbox/actions/reports';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
+import { ReportableEntities } from 'soapbox/actions/reports.ts';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox.ts';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   accountEntity: { id: 'report.confirmation.entity.account', defaultMessage: 'account' },
diff --git a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
index 67a56d66b..7539b854f 100644
--- a/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/other-actions-step.tsx
@@ -1,14 +1,23 @@
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import { OrderedSet } from 'immutable';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports';
-import { Button, FormGroup, HStack, Stack, Text, Toggle } from 'soapbox/components/ui';
-import StatusCheckBox from 'soapbox/features/report/components/status-check-box';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { getDomain } from 'soapbox/utils/accounts';
+import { changeReportBlock, changeReportForward } from 'soapbox/actions/reports.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Toggle from 'soapbox/components/ui/toggle.tsx';
+import StatusCheckBox from 'soapbox/features/report/components/status-check-box.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { getDomain } from 'soapbox/utils/accounts.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   addAdditionalStatuses: { id: 'report.other_actions.add_additional', defaultMessage: 'Would you like to add additional statuses to this report?' },
@@ -60,7 +69,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
 
                 <div>
                   <Button
-                    icon={require('@tabler/icons/outline/arrows-minimize.svg')}
+                    icon={arrowsMinimizeIcon}
                     theme='tertiary'
                     size='sm'
                     onClick={() => setShowAdditionalStatuses(false)}
@@ -71,7 +80,7 @@ const OtherActionsStep = ({ account }: IOtherActionsStep) => {
               </Stack>
             ) : (
               <Button
-                icon={require('@tabler/icons/outline/plus.svg')}
+                icon={plusIcon}
                 theme='tertiary'
                 size='sm'
                 onClick={() => setShowAdditionalStatuses(true)}
diff --git a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 4d27688b7..ab4d59900 100644
--- a/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -1,13 +1,18 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { changeReportComment, changeReportRule, ReportableEntities } from 'soapbox/actions/reports';
-import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
+import { changeReportComment, changeReportRule, ReportableEntities } from 'soapbox/actions/reports.ts';
+import FormGroup from 'soapbox/components/ui/form-group.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 
-import type { Account } from 'soapbox/schemas';
-import type { Rule } from 'soapbox/schemas/rule';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { Rule } from 'soapbox/schemas/rule.ts';
 
 const messages = defineMessages({
   placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' },
diff --git a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index aadd66139..672cd1a3c 100644
--- a/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -1,15 +1,23 @@
-import React, { useCallback, useState } from 'react';
+import bookmarksIcon from '@tabler/icons/outline/bookmarks.svg';
+import folderIcon from '@tabler/icons/outline/folder.svg';
+import { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { bookmark } from 'soapbox/actions/interactions';
-import { useBookmarkFolders } from 'soapbox/api/hooks';
-import { RadioGroup, RadioItem } from 'soapbox/components/radio';
-import { Emoji, HStack, Icon, Modal, Spinner, Stack } from 'soapbox/components/ui';
-import NewFolderForm from 'soapbox/features/bookmark-folders/components/new-folder-form';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+import { bookmark } from 'soapbox/actions/interactions.ts';
+import { useBookmarkFolders } from 'soapbox/api/hooks/index.ts';
+import { RadioGroup, RadioItem } from 'soapbox/components/radio.tsx';
+import Emoji from 'soapbox/components/ui/emoji.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import NewFolderForm from 'soapbox/features/bookmark-folders/components/new-folder-form.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 interface ISelectBookmarkFolderModal {
   statusId: string;
@@ -42,7 +50,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
     <RadioItem
       label={
         <HStack alignItems='center' space={2}>
-          <Icon src={require('@tabler/icons/outline/bookmarks.svg')} size={20} />
+          <Icon src={bookmarksIcon} size={20} />
           <span><FormattedMessage id='bookmark_folders.all_bookmarks' defaultMessage='All bookmarks' /></span>
         </HStack>
       }
@@ -63,7 +71,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
                 src={folder.emoji_url || undefined}
                 className='size-5 flex-none'
               />
-            ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
+            ) : <Icon src={folderIcon} size={20} />}
             <span>{folder.name}</span>
           </HStack>
         }
diff --git a/src/features/ui/components/modals/unauthorized-modal.test.tsx b/src/features/ui/components/modals/unauthorized-modal.test.tsx
index e283ec7b5..0f10f76fa 100644
--- a/src/features/ui/components/modals/unauthorized-modal.test.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import UnauthorizedModal from './unauthorized-modal';
+import UnauthorizedModal from './unauthorized-modal.tsx';
 
 describe('<UnauthorizedModal />', () => {
   it('successfully renders', () => {
diff --git a/src/features/ui/components/modals/unauthorized-modal.tsx b/src/features/ui/components/modals/unauthorized-modal.tsx
index 0b943e6a7..f0f9047ef 100644
--- a/src/features/ui/components/modals/unauthorized-modal.tsx
+++ b/src/features/ui/components/modals/unauthorized-modal.tsx
@@ -1,12 +1,21 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { remoteInteraction } from 'soapbox/actions/interactions';
-import { Button, Form, Input, Modal, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks';
-import { selectAccount } from 'soapbox/selectors';
-import toast from 'soapbox/toast';
+import { remoteInteraction } from 'soapbox/actions/interactions.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
+import { selectAccount } from 'soapbox/selectors/index.ts';
+import toast from 'soapbox/toast.tsx';
 
 const messages = defineMessages({
   accountPlaceholder: { id: 'remote_interaction.account_placeholder', defaultMessage: 'Enter your username@domain you want to act from' },
diff --git a/src/features/ui/components/modals/video-modal.tsx b/src/features/ui/components/modals/video-modal.tsx
index 0f13c8d81..6845ec1cc 100644
--- a/src/features/ui/components/modals/video-modal.tsx
+++ b/src/features/ui/components/modals/video-modal.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import Video from 'soapbox/features/video';
+import Video from 'soapbox/features/video/index.tsx';
 
-import type { Status, Account, Attachment } from 'soapbox/types/entities';
+import type { Status, Account, Attachment } from 'soapbox/types/entities.ts';
 
 interface IVideoModal {
   media: Attachment;
diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx
index c7dc59920..3b3ebbc72 100644
--- a/src/features/ui/components/modals/zap-invoice.tsx
+++ b/src/features/ui/components/modals/zap-invoice.tsx
@@ -1,18 +1,24 @@
+import folderOpenIcon from '@tabler/icons/outline/folder-open.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { QRCodeCanvas } from 'qrcode.react';
 import React  from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { closeModal, openModal } from 'soapbox/actions/modals';
-import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit';
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Modal, Button, Stack, Avatar, HStack } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch } from 'soapbox/hooks';
-import { ZapSplitData } from 'soapbox/schemas/zap-split';
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
+import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
-import type { Account as AccountEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' },
@@ -64,7 +70,7 @@ const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, splitData, o
         </div>
         <HStack space={2}>
           <a href={'lightning:' + invoice}>
-            <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
+            <Button type='submit' theme='primary' icon={folderOpenIcon} text={intl.formatMessage(messages.zap_open_wallet)} />
           </a>
           {hasZapSplit && <Button type='button' theme='muted' onClick={handleNext} text={intl.formatMessage(messages.zap_next)} />}
         </HStack>
diff --git a/src/features/ui/components/modals/zap-pay-request-modal.tsx b/src/features/ui/components/modals/zap-pay-request-modal.tsx
index 51b21c587..6da1560ba 100644
--- a/src/features/ui/components/modals/zap-pay-request-modal.tsx
+++ b/src/features/ui/components/modals/zap-pay-request-modal.tsx
@@ -1,9 +1,9 @@
 import React  from 'react';
 
-import { Modal } from 'soapbox/components/ui';
-import ZapPayRequestForm from 'soapbox/features/zap/components/zap-pay-request-form';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import ZapPayRequestForm from 'soapbox/features/zap/components/zap-pay-request-form.tsx';
 
-import type { Status as StatusEntity, Account as AccountEntity   } from 'soapbox/types/entities';
+import type { Status as StatusEntity, Account as AccountEntity   } from 'soapbox/types/entities.ts';
 
 interface IZapPayRequestModal {
   account: AccountEntity;
diff --git a/src/features/ui/components/modals/zap-split/zap-split-modal.tsx b/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
index 535196571..8211a3f9d 100644
--- a/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split-modal.tsx
@@ -1,14 +1,14 @@
-import React, { useState, useEffect }  from 'react';
+import { useState, useEffect }  from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
-import { zap } from 'soapbox/actions/interactions';
-import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit';
-import { Modal } from 'soapbox/components/ui';
-import ZapSplit from 'soapbox/features/ui/components/modals/zap-split/zap-split';
-import { ZapSplitData } from 'soapbox/schemas/zap-split';
+import { zap } from 'soapbox/actions/interactions.ts';
+import { SplitValue } from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import ZapSplit from 'soapbox/features/ui/components/modals/zap-split/zap-split.tsx';
+import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 interface IZapSplitModal {
   zapSplitAccounts: ZapSplitData[];
diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx
index 4906a8c5c..74ec92622 100644
--- a/src/features/ui/components/modals/zap-split/zap-split.tsx
+++ b/src/features/ui/components/modals/zap-split/zap-split.tsx
@@ -1,11 +1,13 @@
+import folderOpenIcon from '@tabler/icons/outline/folder-open.svg';
 import { QRCodeCanvas } from 'qrcode.react';
-import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import Account from 'soapbox/components/account';
-import CopyableInput from 'soapbox/components/copyable-input';
-import { Button, Stack, HStack } from 'soapbox/components/ui';
-import { ZapSplitData } from 'soapbox/schemas/zap-split';
+import Account from 'soapbox/components/account.tsx';
+import CopyableInput from 'soapbox/components/copyable-input.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { ZapSplitData } from 'soapbox/schemas/zap-split.ts';
 
 const messages = defineMessages({
   zap_open_wallet: { id: 'zap.open_wallet', defaultMessage: 'Open Wallet' },
@@ -90,7 +92,7 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
           </div>
           <HStack space={2}>
             <a href={'lightning:' + invoice}>
-              <Button type='submit' theme='primary' icon={require('@tabler/icons/outline/folder-open.svg')} text={intl.formatMessage(messages.zap_open_wallet)} />
+              <Button type='submit' theme='primary' icon={folderOpenIcon} text={intl.formatMessage(messages.zap_open_wallet)} />
             </a>
             {isLastStep ? (
               <Button
diff --git a/src/features/ui/components/modals/zaps-modal.tsx b/src/features/ui/components/modals/zaps-modal.tsx
index acf15e09e..e6bd1fbbf 100644
--- a/src/features/ui/components/modals/zaps-modal.tsx
+++ b/src/features/ui/components/modals/zaps-modal.tsx
@@ -1,13 +1,16 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchZaps, expandZaps } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable-list';
-import { Modal, Spinner, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { fetchZaps, expandZaps } from 'soapbox/actions/interactions.ts';
+import ScrollableList from 'soapbox/components/scrollable-list.tsx';
+import Modal from 'soapbox/components/ui/modal.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IAccountWithZaps {
   id: string;
diff --git a/src/features/ui/components/navbar.test.tsx b/src/features/ui/components/navbar.test.tsx
index aa9d32815..b4238d05a 100644
--- a/src/features/ui/components/navbar.test.tsx
+++ b/src/features/ui/components/navbar.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import Navbar from './navbar';
+import Navbar from './navbar.tsx';
 
 describe('<Navbar />', () => {
   it('successfully renders', () => {
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 7828fc1e5..249668384 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -1,20 +1,32 @@
+import helpIcon from '@tabler/icons/outline/help.svg';
 import clsx from 'clsx';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, Redirect } from 'react-router-dom';
 
-import { logIn, verifyCredentials } from 'soapbox/actions/auth';
-import { fetchInstance } from 'soapbox/actions/instance';
-import { openModal } from 'soapbox/actions/modals';
-import { openSidebar } from 'soapbox/actions/sidebar';
-import SiteLogo from 'soapbox/components/site-logo';
-import { Avatar, Button, Counter, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
-import Search from 'soapbox/features/compose/components/search';
-import { useAppDispatch, useFeatures, useInstance, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications';
+import { logIn, verifyCredentials } from 'soapbox/actions/auth.ts';
+import { fetchInstance } from 'soapbox/actions/instance.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { openSidebar } from 'soapbox/actions/sidebar.ts';
+import SiteLogo from 'soapbox/components/site-logo.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import Counter from 'soapbox/components/ui/counter.tsx';
+import Form from 'soapbox/components/ui/form.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Tooltip from 'soapbox/components/ui/tooltip.tsx';
+import Search from 'soapbox/features/compose/components/search.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
+import { useSettingsNotifications } from 'soapbox/hooks/useSettingsNotifications.ts';
 
-import ProfileDropdown from './profile-dropdown';
+import ProfileDropdown from './profile-dropdown.tsx';
 
 import type { AxiosError } from 'axios';
 
@@ -163,7 +175,7 @@ const Navbar = () => {
                       <Link to='/reset-password'>
                         <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
                           <IconButton
-                            src={require('@tabler/icons/outline/help.svg')}
+                            src={helpIcon}
                             className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
                             iconClassName='h-5 w-5'
                           />
diff --git a/src/features/ui/components/new-account-zap-split.tsx b/src/features/ui/components/new-account-zap-split.tsx
index a5d9d6a20..d348dcb71 100644
--- a/src/features/ui/components/new-account-zap-split.tsx
+++ b/src/features/ui/components/new-account-zap-split.tsx
@@ -1,13 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Account from 'soapbox/components/account';
-import { ListItem } from 'soapbox/components/list';
-import { Button, HStack, Input, Slider } from 'soapbox/components/ui';
-import SearchZapSplit from 'soapbox/features/compose/components/search-zap-split';
-import { type Account as AccountEntity } from 'soapbox/schemas';
+import Account from 'soapbox/components/account.tsx';
+import { ListItem } from 'soapbox/components/list.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Slider from 'soapbox/components/ui/slider.tsx';
+import SearchZapSplit from 'soapbox/features/compose/components/search-zap-split.tsx';
+import { type Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 interface INewAccount {
   acc: string;
diff --git a/src/features/ui/components/panels/account-note-panel.tsx b/src/features/ui/components/panels/account-note-panel.tsx
index 5a28136c8..f59fb528e 100644
--- a/src/features/ui/components/panels/account-note-panel.tsx
+++ b/src/features/ui/components/panels/account-note-panel.tsx
@@ -1,13 +1,16 @@
 import debounce from 'lodash/debounce';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
-import { submitAccountNote } from 'soapbox/actions/account-notes';
-import { HStack, Text, Textarea, Widget } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { submitAccountNote } from 'soapbox/actions/account-notes.ts';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Textarea from 'soapbox/components/ui/textarea.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
-import type { AppDispatch } from 'soapbox/store';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 const onSave = debounce(
   (dispatch: AppDispatch, id: string, value: string, callback: () => void) =>
diff --git a/src/features/ui/components/panels/my-groups-panel.tsx b/src/features/ui/components/panels/my-groups-panel.tsx
index d9a95a314..369c319a7 100644
--- a/src/features/ui/components/panels/my-groups-panel.tsx
+++ b/src/features/ui/components/panels/my-groups-panel.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-
-import { useGroups } from 'soapbox/api/hooks';
-import { Widget } from 'soapbox/components/ui';
-import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
-import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
+import { useGroups } from 'soapbox/api/hooks/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item.tsx';
+import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
 
 const MyGroupsPanel = () => {
   const { groups, isFetching, isFetched, isError } = useGroups();
diff --git a/src/features/ui/components/panels/new-event-panel.tsx b/src/features/ui/components/panels/new-event-panel.tsx
index bf444ffc6..33e8a49c7 100644
--- a/src/features/ui/components/panels/new-event-panel.tsx
+++ b/src/features/ui/components/panels/new-event-panel.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const NewEventPanel = () => {
   const dispatch = useAppDispatch();
@@ -25,7 +27,7 @@ const NewEventPanel = () => {
       </Stack>
 
       <Button
-        icon={require('@tabler/icons/outline/calendar-event.svg')}
+        icon={calendarEventIcon}
         onClick={createEvent}
         theme='secondary'
         block
diff --git a/src/features/ui/components/panels/new-group-panel.tsx b/src/features/ui/components/panels/new-group-panel.tsx
index 387f3abf0..3dc293887 100644
--- a/src/features/ui/components/panels/new-group-panel.tsx
+++ b/src/features/ui/components/panels/new-group-panel.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { PERMISSION_CREATE_GROUPS, hasPermission } from 'soapbox/utils/permissions.ts';
 
 const NewGroupPanel = () => {
   const dispatch = useAppDispatch();
diff --git a/src/features/ui/components/panels/sign-up-panel.test.tsx b/src/features/ui/components/panels/sign-up-panel.test.tsx
index 74a7f2bee..c27064f02 100644
--- a/src/features/ui/components/panels/sign-up-panel.test.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { storeOpen } from 'soapbox/jest/mock-stores';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { storeOpen } from 'soapbox/jest/mock-stores.tsx';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import SignUpPanel from './sign-up-panel';
+import SignUpPanel from './sign-up-panel.tsx';
 
 describe('<SignUpPanel />', () => {
   it('doesn\'t render by default', () => {
diff --git a/src/features/ui/components/panels/sign-up-panel.tsx b/src/features/ui/components/panels/sign-up-panel.tsx
index a37664c3d..d3dbd1c64 100644
--- a/src/features/ui/components/panels/sign-up-panel.tsx
+++ b/src/features/ui/components/panels/sign-up-panel.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { Button, Stack, Text } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useRegistrationStatus } from 'soapbox/hooks/useRegistrationStatus.ts';
 
 const SignUpPanel = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/panels/suggested-groups-panel.tsx b/src/features/ui/components/panels/suggested-groups-panel.tsx
index d2671bc14..c2bd2fd51 100644
--- a/src/features/ui/components/panels/suggested-groups-panel.tsx
+++ b/src/features/ui/components/panels/suggested-groups-panel.tsx
@@ -1,9 +1,7 @@
-import React from 'react';
-
-import { useSuggestedGroups } from 'soapbox/api/hooks';
-import { Widget } from 'soapbox/components/ui';
-import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item';
-import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search';
+import { useSuggestedGroups } from 'soapbox/api/hooks/index.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import GroupListItem from 'soapbox/features/groups/components/discover/group-list-item.tsx';
+import PlaceholderGroupSearch from 'soapbox/features/placeholder/components/placeholder-group-search.tsx';
 
 const SuggestedGroupsPanel = () => {
   const { groups, isFetching, isFetched, isError } = useSuggestedGroups();
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 189a0afab..9aa052c20 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -1,20 +1,21 @@
 import clsx from 'clsx';
-import React from 'react';
 
-import Account from 'soapbox/components/account';
-import StatusContent from 'soapbox/components/status-content';
-import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
-import { Card, HStack, Stack } from 'soapbox/components/ui';
-import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
-import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder-media-gallery';
-import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
-import { useAppSelector } from 'soapbox/hooks';
+import Account from 'soapbox/components/account.tsx';
+import StatusContent from 'soapbox/components/status-content.tsx';
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions.tsx';
+import { Card } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card.tsx';
+import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder-media-gallery.tsx';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
-import { buildStatus } from '../util/pending-status-builder';
+import { buildStatus } from '../util/pending-status-builder.ts';
 
-import PollPreview from './poll-preview';
+import PollPreview from './poll-preview.tsx';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities';
+import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 const shouldHaveCard = (pendingStatus: StatusEntity) => {
   return Boolean(pendingStatus.content.match(/https?:\/\/\S*/));
diff --git a/src/features/ui/components/pinned-accounts-panel.tsx b/src/features/ui/components/pinned-accounts-panel.tsx
index c6de3a667..658c06865 100644
--- a/src/features/ui/components/pinned-accounts-panel.tsx
+++ b/src/features/ui/components/pinned-accounts-panel.tsx
@@ -1,14 +1,16 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { fetchPinnedAccounts } from 'soapbox/actions/accounts';
-import { Widget } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
-import type { Account } from 'soapbox/schemas';
+import { fetchPinnedAccounts } from 'soapbox/actions/accounts.ts';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IPinnedAccountsPanel {
   account: Account;
diff --git a/src/features/ui/components/poll-preview.tsx b/src/features/ui/components/poll-preview.tsx
index 03de9a582..4fb80a8e0 100644
--- a/src/features/ui/components/poll-preview.tsx
+++ b/src/features/ui/components/poll-preview.tsx
@@ -1,10 +1,9 @@
 import noop from 'lodash/noop';
-import React from 'react';
 
-import PollOption from 'soapbox/components/polls/poll-option';
-import { Stack } from 'soapbox/components/ui';
-import { useAppSelector } from 'soapbox/hooks';
-import { Poll as PollEntity } from 'soapbox/types/entities';
+import PollOption from 'soapbox/components/polls/poll-option.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { Poll as PollEntity } from 'soapbox/types/entities.ts';
 
 interface IPollPreview {
   pollId: string;
diff --git a/src/features/ui/components/profile-dropdown.tsx b/src/features/ui/components/profile-dropdown.tsx
index 80961b5ac..2295cbdbc 100644
--- a/src/features/ui/components/profile-dropdown.tsx
+++ b/src/features/ui/components/profile-dropdown.tsx
@@ -1,19 +1,24 @@
 import { useFloating } from '@floating-ui/react';
+import logoutIcon from '@tabler/icons/outline/logout.svg';
+import plusIcon from '@tabler/icons/outline/plus.svg';
 import clsx from 'clsx';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth';
-import Account from 'soapbox/components/account';
-import { MenuDivider } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useClickOutside, useFeatures } from 'soapbox/hooks';
-import { makeGetOtherAccounts } from 'soapbox/selectors';
+import { fetchOwnAccounts, logOut, switchAccount } from 'soapbox/actions/auth.ts';
+import Account from 'soapbox/components/account.tsx';
+import { MenuDivider } from 'soapbox/components/ui/menu.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { makeGetOtherAccounts } from 'soapbox/selectors/index.ts';
 
-import ThemeToggle from './theme-toggle';
+import ThemeToggle from './theme-toggle.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/schemas';
+import type { Account as AccountEntity } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
@@ -86,14 +91,14 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
     menu.push({
       text: intl.formatMessage(messages.add),
       to: '/login/add',
-      icon: require('@tabler/icons/outline/plus.svg'),
+      icon: plusIcon,
     });
 
     menu.push({
       text: intl.formatMessage(messages.logout, { acct: account.acct }),
       to: '/logout',
       action: handleLogOut,
-      icon: require('@tabler/icons/outline/logout.svg'),
+      icon: logoutIcon,
     });
 
     return menu;
diff --git a/src/features/ui/components/profile-familiar-followers.tsx b/src/features/ui/components/profile-familiar-followers.tsx
index 499762b2c..4f4b86e4e 100644
--- a/src/features/ui/components/profile-familiar-followers.tsx
+++ b/src/features/ui/components/profile-familiar-followers.tsx
@@ -1,18 +1,21 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { fetchAccountFamiliarFollowers } from 'soapbox/actions/familiar-followers';
-import { openModal } from 'soapbox/actions/modals';
-import AvatarStack from 'soapbox/components/avatar-stack';
-import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { HStack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { makeGetAccount } from 'soapbox/selectors';
+import { fetchAccountFamiliarFollowers } from 'soapbox/actions/familiar-followers.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import AvatarStack from 'soapbox/components/avatar-stack.tsx';
+import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const getAccount = makeGetAccount();
 
diff --git a/src/features/ui/components/profile-field.tsx b/src/features/ui/components/profile-field.tsx
index 7f4e43728..b590bcf2e 100644
--- a/src/features/ui/components/profile-field.tsx
+++ b/src/features/ui/components/profile-field.tsx
@@ -1,12 +1,14 @@
+import checkIcon from '@tabler/icons/outline/check.svg';
 import clsx from 'clsx';
-import React from 'react';
 import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
 
-import Markup from 'soapbox/components/markup';
-import { HStack, Icon } from 'soapbox/components/ui';
-import { CryptoAddress, LightningAddress } from 'soapbox/features/ui/util/async-components';
 
-import type { Account } from 'soapbox/schemas';
+import Markup from 'soapbox/components/markup.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import { CryptoAddress, LightningAddress } from 'soapbox/features/ui/util/async-components.ts';
+
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1];
 const isTicker = (value: string): boolean => Boolean(getTicker(value));
@@ -57,7 +59,7 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
         <HStack space={2} alignItems='center'>
           {field.verified_at && (
             <span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
-              <Icon src={require('@tabler/icons/outline/check.svg')} />
+              <Icon src={checkIcon} />
             </span>
           )}
 
diff --git a/src/features/ui/components/profile-fields-panel.tsx b/src/features/ui/components/profile-fields-panel.tsx
index fb434a25b..586886f49 100644
--- a/src/features/ui/components/profile-fields-panel.tsx
+++ b/src/features/ui/components/profile-fields-panel.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Widget, Stack } from 'soapbox/components/ui';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
 
-import ProfileField from './profile-field';
+import ProfileField from './profile-field.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 interface IProfileFieldsPanel {
   account: Account;
diff --git a/src/features/ui/components/profile-info-panel.tsx b/src/features/ui/components/profile-info-panel.tsx
index 312ecbc45..47c0fc665 100644
--- a/src/features/ui/components/profile-info-panel.tsx
+++ b/src/features/ui/components/profile-info-panel.tsx
@@ -1,19 +1,27 @@
-import React from 'react';
+import balloonIcon from '@tabler/icons/outline/balloon.svg';
+import calendarIcon from '@tabler/icons/outline/calendar.svg';
+import linkIcon from '@tabler/icons/outline/link.svg';
+import lockIcon from '@tabler/icons/outline/lock.svg';
+import mapPinIcon from '@tabler/icons/outline/map-pin.svg';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
-import { usePatronUser } from 'soapbox/api/hooks';
-import Badge from 'soapbox/components/badge';
-import Markup from 'soapbox/components/markup';
-import { dateFormatOptions } from 'soapbox/components/relative-timestamp';
-import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
-import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
-import { capitalize } from 'soapbox/utils/strings';
+import { usePatronUser } from 'soapbox/api/hooks/index.ts';
+import Badge from 'soapbox/components/badge.tsx';
+import Markup from 'soapbox/components/markup.tsx';
+import { dateFormatOptions } from 'soapbox/components/relative-timestamp.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { capitalize } from 'soapbox/utils/strings.ts';
 
-import ProfileFamiliarFollowers from './profile-familiar-followers';
-import ProfileField from './profile-field';
-import ProfileStats from './profile-stats';
+import ProfileFamiliarFollowers from './profile-familiar-followers.tsx';
+import ProfileField from './profile-field.tsx';
+import ProfileStats from './profile-stats.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 /** Basically ensure the URL isn't `javascript:alert('hi')` or something like that */
 const isSafeUrl = (text: string): boolean => {
@@ -101,7 +109,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
     return (
       <HStack alignItems='center' space={0.5}>
         <Icon
-          src={require('@tabler/icons/outline/balloon.svg')}
+          src={balloonIcon}
           className='size-4 text-gray-800 dark:text-gray-200'
         />
 
@@ -162,7 +170,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
             {account.locked && (
               <Icon
-                src={require('@tabler/icons/outline/lock.svg')}
+                src={lockIcon}
                 alt={intl.formatMessage(messages.account_locked)}
                 className='size-4 text-gray-600'
               />
@@ -180,7 +188,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.local ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/calendar.svg')}
+                src={calendarIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -197,7 +205,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.location ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/map-pin.svg')}
+                src={mapPinIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
@@ -210,7 +218,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           {account.website ? (
             <HStack alignItems='center' space={0.5}>
               <Icon
-                src={require('@tabler/icons/outline/link.svg')}
+                src={linkIcon}
                 className='size-4 text-gray-800 dark:text-gray-200'
               />
 
diff --git a/src/features/ui/components/profile-media-panel.tsx b/src/features/ui/components/profile-media-panel.tsx
index d63b849f3..d155c2ece 100644
--- a/src/features/ui/components/profile-media-panel.tsx
+++ b/src/features/ui/components/profile-media-panel.tsx
@@ -1,17 +1,20 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { openModal } from 'soapbox/actions/modals';
-import { expandAccountMediaTimeline } from 'soapbox/actions/timelines';
-import { Spinner, Text, Widget } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { getAccountGallery } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { expandAccountMediaTimeline } from 'soapbox/actions/timelines.ts';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { getAccountGallery } from 'soapbox/selectors/index.ts';
 
-import MediaItem from '../../account-gallery/components/media-item';
+import MediaItem from '../../account-gallery/components/media-item.tsx';
 
-import type { Account } from 'soapbox/schemas';
-import type { Attachment } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/schemas/index.ts';
+import type { Attachment } from 'soapbox/types/entities.ts';
 
 interface IProfileMediaPanel {
   account?: Account;
diff --git a/src/features/ui/components/profile-stats.tsx b/src/features/ui/components/profile-stats.tsx
index 6863f9bd9..4e12ce16b 100644
--- a/src/features/ui/components/profile-stats.tsx
+++ b/src/features/ui/components/profile-stats.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
-import { HStack, Text } from 'soapbox/components/ui';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
diff --git a/src/features/ui/components/promo-panel.tsx b/src/features/ui/components/promo-panel.tsx
index a709d0b16..4cf71a7a0 100644
--- a/src/features/ui/components/promo-panel.tsx
+++ b/src/features/ui/components/promo-panel.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-
-import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
-import { Widget, Stack, Text } from 'soapbox/components/ui';
-import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
 const PromoPanel: React.FC = () => {
   const { instance } = useInstance();
diff --git a/src/features/ui/components/subscribe-button.test.tsx b/src/features/ui/components/subscribe-button.test.tsx
index 2e67fe272..cf13524d2 100644
--- a/src/features/ui/components/subscribe-button.test.tsx
+++ b/src/features/ui/components/subscribe-button.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { describe, expect, it } from 'vitest';
 
-import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { buildAccount, buildRelationship } from 'soapbox/jest/factory.ts';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import SubscribeButton from './subscription-button';
+import SubscribeButton from './subscription-button.tsx';
 
 const justin = {
   id: '1',
diff --git a/src/features/ui/components/subscription-button.tsx b/src/features/ui/components/subscription-button.tsx
index cdd2ec5bb..2bd1fdd0b 100644
--- a/src/features/ui/components/subscription-button.tsx
+++ b/src/features/ui/components/subscription-button.tsx
@@ -1,16 +1,18 @@
-import React from 'react';
+import bellRingingIcon from '@tabler/icons/outline/bell-ringing.svg';
+import bellIcon from '@tabler/icons/outline/bell.svg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
   subscribeAccount,
   unsubscribeAccount,
-} from 'soapbox/actions/accounts';
-import { useFollow } from 'soapbox/api/hooks';
-import { IconButton } from 'soapbox/components/ui';
-import { useAppDispatch, useFeatures } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+} from 'soapbox/actions/accounts.ts';
+import { useFollow } from 'soapbox/api/hooks/index.ts';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import toast from 'soapbox/toast.tsx';
 
-import type { Account as AccountEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   subscribe: { id: 'account.subscribe', defaultMessage: 'Subscribe to notifications from @{name}' },
@@ -91,7 +93,7 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
   if (isRequested || isFollowing) {
     return (
       <IconButton
-        src={isSubscribed ? require('@tabler/icons/outline/bell-ringing.svg') : require('@tabler/icons/outline/bell.svg')}
+        src={isSubscribed ? bellRingingIcon : bellIcon}
         onClick={handleToggle}
         title={title}
         theme='outlined'
diff --git a/src/features/ui/components/theme-selector.tsx b/src/features/ui/components/theme-selector.tsx
index f4df7d0a2..a4fceeb63 100644
--- a/src/features/ui/components/theme-selector.tsx
+++ b/src/features/ui/components/theme-selector.tsx
@@ -1,7 +1,13 @@
-import React, { useMemo } from 'react';
+import chevronDownIcon from '@tabler/icons/outline/chevron-down.svg';
+import deviceDesktopIcon from '@tabler/icons/outline/device-desktop.svg';
+import moonIcon from '@tabler/icons/outline/moon.svg';
+import shadowIcon from '@tabler/icons/outline/shadow.svg';
+import sunIcon from '@tabler/icons/outline/sun.svg';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Icon, Select } from 'soapbox/components/ui';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Select from 'soapbox/components/ui/select.tsx';
 
 const messages = defineMessages({
   light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
@@ -22,15 +28,15 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
   const themeIconSrc = useMemo(() => {
     switch (value) {
       case 'system':
-        return require('@tabler/icons/outline/device-desktop.svg');
+        return deviceDesktopIcon;
       case 'light':
-        return require('@tabler/icons/outline/sun.svg');
+        return sunIcon;
       case 'dark':
-        return require('@tabler/icons/outline/moon.svg');
+        return moonIcon;
       case 'black':
-        return require('@tabler/icons/outline/shadow.svg');
+        return shadowIcon;
       default:
-        return null;
+        return deviceDesktopIcon;
     }
   }, [value]);
 
@@ -57,7 +63,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         </Select>
 
         <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-          <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='size-4 text-gray-600 dark:text-gray-700' />
+          <Icon src={chevronDownIcon} className='size-4 text-gray-600 dark:text-gray-700' />
         </div>
       </div>
     </label>
diff --git a/src/features/ui/components/theme-toggle.tsx b/src/features/ui/components/theme-toggle.tsx
index 8137caeb6..a8739cf86 100644
--- a/src/features/ui/components/theme-toggle.tsx
+++ b/src/features/ui/components/theme-toggle.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import { changeSetting } from 'soapbox/actions/settings.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
-import { changeSetting } from 'soapbox/actions/settings';
-import { useAppDispatch, useSettings } from 'soapbox/hooks';
-
-import ThemeSelector from './theme-selector';
+import ThemeSelector from './theme-selector.tsx';
 
 /** Stateful theme selector. */
 const ThemeToggle: React.FC = () => {
diff --git a/src/features/ui/components/timeline.tsx b/src/features/ui/components/timeline.tsx
index e578cec99..bb11f3985 100644
--- a/src/features/ui/components/timeline.tsx
+++ b/src/features/ui/components/timeline.tsx
@@ -1,14 +1,15 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { defineMessages } from 'react-intl';
 
-import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines';
-import ScrollTopButton from 'soapbox/components/scroll-top-button';
-import StatusList, { IStatusList } from 'soapbox/components/status-list';
-import { Portal } from 'soapbox/components/ui';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
-import { makeGetStatusIds } from 'soapbox/selectors';
+import { dequeueTimeline, scrollTopTimeline } from 'soapbox/actions/timelines.ts';
+import ScrollTopButton from 'soapbox/components/scroll-top-button.tsx';
+import StatusList, { IStatusList } from 'soapbox/components/status-list.tsx';
+import Portal from 'soapbox/components/ui/portal.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { makeGetStatusIds } from 'soapbox/selectors/index.ts';
 
 const messages = defineMessages({
   queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
diff --git a/src/features/ui/components/trends-panel.test.tsx b/src/features/ui/components/trends-panel.test.tsx
index 4ea1dca44..6ac2c7171 100644
--- a/src/features/ui/components/trends-panel.test.tsx
+++ b/src/features/ui/components/trends-panel.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { queryClient, render, screen, waitFor } from 'soapbox/jest/test-helpers';
+import { __stub } from 'soapbox/api/index.ts';
+import { queryClient, render, screen, waitFor } from 'soapbox/jest/test-helpers.tsx';
 
-import TrendsPanel from './trends-panel';
+import TrendsPanel from './trends-panel.tsx';
 
 describe('<TrendsPanel />', () => {
   beforeEach(() => {
diff --git a/src/features/ui/components/trends-panel.tsx b/src/features/ui/components/trends-panel.tsx
index 9e87cc8c2..fd1afefec 100644
--- a/src/features/ui/components/trends-panel.tsx
+++ b/src/features/ui/components/trends-panel.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { setFilter } from 'soapbox/actions/search';
-import Hashtag from 'soapbox/components/hashtag';
-import { Text, Widget } from 'soapbox/components/ui';
-import PlaceholderSidebarTrends from 'soapbox/features/placeholder/components/placeholder-sidebar-trends';
-import { useAppDispatch } from 'soapbox/hooks';
-import useTrends from 'soapbox/queries/trends';
+import { setFilter } from 'soapbox/actions/search.ts';
+import Hashtag from 'soapbox/components/hashtag.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import PlaceholderSidebarTrends from 'soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import useTrends from 'soapbox/queries/trends.ts';
 
 interface ITrendsPanel {
   limit: number;
diff --git a/src/features/ui/components/user-panel.tsx b/src/features/ui/components/user-panel.tsx
index c6c2a9d12..596c5c606 100644
--- a/src/features/ui/components/user-panel.tsx
+++ b/src/features/ui/components/user-panel.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useAccount } from 'soapbox/api/hooks';
-import StillImage from 'soapbox/components/still-image';
-import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppSelector } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
-import { displayFqn } from 'soapbox/utils/state';
+import { useAccount } from 'soapbox/api/hooks/index.ts';
+import StillImage from 'soapbox/components/still-image.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import VerificationBadge from 'soapbox/components/verification-badge.tsx';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { getAcct } from 'soapbox/utils/accounts.ts';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
+import { displayFqn } from 'soapbox/utils/state.ts';
 
 interface IUserPanel {
   accountId: string;
diff --git a/src/features/ui/components/who-to-follow-panel.tsx b/src/features/ui/components/who-to-follow-panel.tsx
index f2b8dbed0..a56775a20 100644
--- a/src/features/ui/components/who-to-follow-panel.tsx
+++ b/src/features/ui/components/who-to-follow-panel.tsx
@@ -1,14 +1,15 @@
-import React from 'react';
+import xIcon from '@tabler/icons/outline/x.svg';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Text, Widget } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
-import PlaceholderSidebarSuggestions from 'soapbox/features/placeholder/components/placeholder-sidebar-suggestions';
-import { useOwnAccount } from 'soapbox/hooks';
-import { useDismissSuggestion, useSuggestions } from 'soapbox/queries/suggestions';
+import Text from 'soapbox/components/ui/text.tsx';
+import Widget from 'soapbox/components/ui/widget.tsx';
+import AccountContainer from 'soapbox/containers/account-container.tsx';
+import PlaceholderSidebarSuggestions from 'soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useDismissSuggestion, useSuggestions } from 'soapbox/queries/suggestions.ts';
 
-import type { Account as AccountEntity } from 'soapbox/types/entities';
+import type { Account as AccountEntity } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
@@ -54,7 +55,7 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
             key={suggestion.account}
             // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
             id={suggestion.account}
-            actionIcon={require('@tabler/icons/outline/x.svg')}
+            actionIcon={xIcon}
             actionTitle={intl.formatMessage(messages.dismissSuggestion)}
             onActionClick={account ? handleDismiss : undefined}
           />
diff --git a/src/features/ui/components/zoomable-image.tsx b/src/features/ui/components/zoomable-image.tsx
index f727ddec3..43e4f2740 100644
--- a/src/features/ui/components/zoomable-image.tsx
+++ b/src/features/ui/components/zoomable-image.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { PureComponent } from 'react';
 
 const MIN_SCALE = 1;
 const MAX_SCALE = 4;
@@ -21,7 +21,7 @@ interface IZoomableImage {
   onClick?: React.MouseEventHandler;
 }
 
-class ZoomableImage extends React.PureComponent<IZoomableImage> {
+class ZoomableImage extends PureComponent<IZoomableImage> {
 
   static defaultProps = {
     alt: '',
diff --git a/src/features/ui/containers/modal-container.ts b/src/features/ui/containers/modal-container.ts
index 294cf9031..538fcfef9 100644
--- a/src/features/ui/containers/modal-container.ts
+++ b/src/features/ui/containers/modal-container.ts
@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 
-import { cancelReplyCompose } from 'soapbox/actions/compose';
-import { cancelEventCompose } from 'soapbox/actions/events';
-import { closeModal } from 'soapbox/actions/modals';
-import { cancelReport } from 'soapbox/actions/reports';
+import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
+import { cancelEventCompose } from 'soapbox/actions/events.ts';
+import { closeModal } from 'soapbox/actions/modals.ts';
+import { cancelReport } from 'soapbox/actions/reports.ts';
 
-import ModalRoot, { ModalType } from '../components/modal-root';
+import ModalRoot, { ModalType } from '../components/modal-root.tsx';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const mapStateToProps = (state: RootState) => {
   const modal = state.modals.last({
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index 217a3169f..6dbe3412d 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -1,43 +1,51 @@
 import clsx from 'clsx';
-import React, { Suspense, lazy, useEffect, useRef } from 'react';
+import { Suspense, lazy, useEffect, useRef } from 'react';
 import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom';
 
-import { fetchFollowRequests } from 'soapbox/actions/accounts';
-import { fetchReports, fetchUsers, fetchConfig } from 'soapbox/actions/admin';
-import { fetchCustomEmojis } from 'soapbox/actions/custom-emojis';
-import { fetchFilters } from 'soapbox/actions/filters';
-import { fetchMarker } from 'soapbox/actions/markers';
-import { expandNotifications } from 'soapbox/actions/notifications';
-import { registerPushNotifications } from 'soapbox/actions/push-notifications/registerer';
-import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses';
-import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions';
-import { expandHomeTimeline } from 'soapbox/actions/timelines';
-import { useUserStream } from 'soapbox/api/hooks';
-import SidebarNavigation from 'soapbox/components/sidebar-navigation';
-import ThumbNavigation from 'soapbox/components/thumb-navigation';
-import { Layout } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles, useInstance, useLoggedIn, useApi } from 'soapbox/hooks';
-import AdminPage from 'soapbox/pages/admin-page';
-import ChatsPage from 'soapbox/pages/chats-page';
-import DefaultPage from 'soapbox/pages/default-page';
-import EmptyPage from 'soapbox/pages/empty-page';
-import EventPage from 'soapbox/pages/event-page';
-import EventsPage from 'soapbox/pages/events-page';
-import GroupPage from 'soapbox/pages/group-page';
-import GroupsPage from 'soapbox/pages/groups-page';
-import GroupsPendingPage from 'soapbox/pages/groups-pending-page';
-import HomePage from 'soapbox/pages/home-page';
-import LandingPage from 'soapbox/pages/landing-page';
-import ManageGroupsPage from 'soapbox/pages/manage-groups-page';
-import ManageZapSplitPage from 'soapbox/pages/manage-zap-split-page';
-import ProfilePage from 'soapbox/pages/profile-page';
-import RemoteInstancePage from 'soapbox/pages/remote-instance-page';
-import SearchPage from 'soapbox/pages/search-page';
-import StatusPage from 'soapbox/pages/status-page';
+import { fetchFollowRequests } from 'soapbox/actions/accounts.ts';
+import { fetchReports, fetchUsers, fetchConfig } from 'soapbox/actions/admin.ts';
+import { fetchCustomEmojis } from 'soapbox/actions/custom-emojis.ts';
+import { fetchFilters } from 'soapbox/actions/filters.ts';
+import { fetchMarker } from 'soapbox/actions/markers.ts';
+import { expandNotifications } from 'soapbox/actions/notifications.ts';
+import { registerPushNotifications } from 'soapbox/actions/push-notifications/registerer.ts';
+import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses.ts';
+import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions.ts';
+import { expandHomeTimeline } from 'soapbox/actions/timelines.ts';
+import { useUserStream } from 'soapbox/api/hooks/index.ts';
+import SidebarNavigation from 'soapbox/components/sidebar-navigation.tsx';
+import ThumbNavigation from 'soapbox/components/thumb-navigation.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import AdminPage from 'soapbox/pages/admin-page.tsx';
+import ChatsPage from 'soapbox/pages/chats-page.tsx';
+import DefaultPage from 'soapbox/pages/default-page.tsx';
+import EmptyPage from 'soapbox/pages/empty-page.tsx';
+import EventPage from 'soapbox/pages/event-page.tsx';
+import EventsPage from 'soapbox/pages/events-page.tsx';
+import GroupPage from 'soapbox/pages/group-page.tsx';
+import GroupsPage from 'soapbox/pages/groups-page.tsx';
+import GroupsPendingPage from 'soapbox/pages/groups-pending-page.tsx';
+import HomePage from 'soapbox/pages/home-page.tsx';
+import LandingPage from 'soapbox/pages/landing-page.tsx';
+import ManageGroupsPage from 'soapbox/pages/manage-groups-page.tsx';
+import ProfilePage from 'soapbox/pages/profile-page.tsx';
+import RemoteInstancePage from 'soapbox/pages/remote-instance-page.tsx';
+import SearchPage from 'soapbox/pages/search-page.tsx';
+import StatusPage from 'soapbox/pages/status-page.tsx';
+import WidePage from 'soapbox/pages/wide-page.tsx';
 
-import BackgroundShapes from './components/background-shapes';
-import FloatingActionButton from './components/floating-action-button';
-import Navbar from './components/navbar';
+import BackgroundShapes from './components/background-shapes.tsx';
+import FloatingActionButton from './components/floating-action-button.tsx';
+import Navbar from './components/navbar.tsx';
 import {
   Status,
   CommunityTimeline,
@@ -143,13 +151,13 @@ import {
   Rules,
   AdminNostrRelays,
   NostrBunkerLogin,
-} from './util/async-components';
-import GlobalHotkeys from './util/global-hotkeys';
-import { WrappedRoute } from './util/react-router-helpers';
+} from './util/async-components.ts';
+import GlobalHotkeys from './util/global-hotkeys.tsx';
+import { WrappedRoute } from './util/react-router-helpers.tsx';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
-import 'soapbox/components/status';
+import 'soapbox/components/status.tsx';
 
 interface ISwitchingColumnsArea {
   children: React.ReactNode;
@@ -331,7 +339,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/soapbox/admin/approval' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
       <WrappedRoute path='/soapbox/admin/reports' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
       <WrappedRoute path='/soapbox/admin/log' staffOnly page={AdminPage} component={ModerationLog} content={children} exact />
-      <WrappedRoute path='/soapbox/admin/zap-split' staffOnly page={ManageZapSplitPage} component={ManageZapSplit} content={children} exact />
+      {features.nostr && <WrappedRoute path='/soapbox/admin/zap-split' staffOnly page={WidePage} component={ManageZapSplit} content={children} exact />}
       <WrappedRoute path='/soapbox/admin/users' staffOnly page={AdminPage} component={UserIndex} content={children} exact />
       <WrappedRoute path='/soapbox/admin/theme' staffOnly page={AdminPage} component={ThemeEditor} content={children} exact />
       <WrappedRoute path='/soapbox/admin/relays' staffOnly page={AdminPage} component={Relays} content={children} exact />
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index 498afdd83..546e931ee 100644
--- a/src/features/ui/util/async-components.ts
+++ b/src/features/ui/util/async-components.ts
@@ -1,183 +1,183 @@
 import { lazy } from 'react';
 
-export const AboutPage = lazy(() => import('soapbox/features/about'));
-export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/emoji-picker'));
-export const Notifications = lazy(() => import('soapbox/features/notifications'));
-export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline'));
-export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline'));
-export const PublicTimeline = lazy(() => import('soapbox/features/public-timeline'));
-export const RemoteTimeline = lazy(() => import('soapbox/features/remote-timeline'));
-export const CommunityTimeline = lazy(() => import('soapbox/features/community-timeline'));
-export const HashtagTimeline = lazy(() => import('soapbox/features/hashtag-timeline'));
-export const DirectTimeline = lazy(() => import('soapbox/features/direct-timeline'));
-export const Conversations = lazy(() => import('soapbox/features/conversations'));
-export const ListTimeline = lazy(() => import('soapbox/features/list-timeline'));
-export const Lists = lazy(() => import('soapbox/features/lists'));
-export const Bookmarks = lazy(() => import('soapbox/features/bookmarks'));
-export const Status = lazy(() => import('soapbox/features/status'));
-export const PinnedStatuses = lazy(() => import('soapbox/features/pinned-statuses'));
-export const AccountTimeline = lazy(() => import('soapbox/features/account-timeline'));
-export const AccountGallery = lazy(() => import('soapbox/features/account-gallery'));
-export const Followers = lazy(() => import('soapbox/features/followers'));
-export const Following = lazy(() => import('soapbox/features/following'));
-export const FollowRequests = lazy(() => import('soapbox/features/follow-requests'));
-export const GenericNotFound = lazy(() => import('soapbox/features/generic-not-found'));
-export const FavouritedStatuses = lazy(() => import('soapbox/features/favourited-statuses'));
-export const Blocks = lazy(() => import('soapbox/features/blocks'));
-export const DomainBlocks = lazy(() => import('soapbox/features/domain-blocks'));
-export const Mutes = lazy(() => import('soapbox/features/mutes'));
-export const MuteModal = lazy(() => import('soapbox/features/ui/components/modals/mute-modal'));
-export const Filters = lazy(() => import('soapbox/features/filters'));
-export const EditFilter = lazy(() => import('soapbox/features/filters/edit-filter'));
-export const ReportModal = lazy(() => import('soapbox/features/ui/components/modals/report-modal/report-modal'));
-export const AccountModerationModal = lazy(() => import('soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal'));
-export const MediaGallery = lazy(() => import('soapbox/components/media-gallery'));
-export const Video = lazy(() => import('soapbox/features/video'));
-export const Audio = lazy(() => import('soapbox/features/audio'));
-export const MediaModal = lazy(() => import('soapbox/features/ui/components/modals/media-modal'));
-export const VideoModal = lazy(() => import('soapbox/features/ui/components/modals/video-modal'));
-export const BoostModal = lazy(() => import('soapbox/features/ui/components/modals/boost-modal'));
-export const ConfirmationModal = lazy(() => import('soapbox/features/ui/components/modals/confirmation-modal'));
-export const MissingDescriptionModal = lazy(() => import('soapbox/features/ui/components/modals/missing-description-modal'));
-export const ActionsModal = lazy(() => import('soapbox/features/ui/components/modals/actions-modal'));
-export const HotkeysModal = lazy(() => import('soapbox/features/ui/components/modals/hotkeys-modal'));
-export const ComposeModal = lazy(() => import('soapbox/features/ui/components/modals/compose-modal'));
-export const ReplyMentionsModal = lazy(() => import('soapbox/features/ui/components/modals/reply-mentions-modal'));
-export const UnauthorizedModal = lazy(() => import('soapbox/features/ui/components/modals/unauthorized-modal'));
-export const EditFederationModal = lazy(() => import('soapbox/features/ui/components/modals/edit-federation-modal'));
-export const EmbedModal = lazy(() => import('soapbox/features/ui/components/modals/embed-modal'));
-export const ComponentModal = lazy(() => import('soapbox/features/ui/components/modals/component-modal'));
-export const ReblogsModal = lazy(() => import('soapbox/features/ui/components/modals/reblogs-modal'));
-export const FavouritesModal = lazy(() => import('soapbox/features/ui/components/modals/favourites-modal'));
-export const DislikesModal = lazy(() => import('soapbox/features/ui/components/modals/dislikes-modal'));
-export const ReactionsModal = lazy(() => import('soapbox/features/ui/components/modals/reactions-modal'));
-export const MentionsModal = lazy(() => import('soapbox/features/ui/components/modals/mentions-modal'));
-export const LandingPageModal = lazy(() => import('soapbox/features/ui/components/modals/landing-page-modal'));
-export const BirthdaysModal = lazy(() => import('soapbox/features/ui/components/modals/birthdays-modal'));
-export const BirthdayPanel = lazy(() => import('soapbox/components/birthday-panel'));
-export const ListEditor = lazy(() => import('soapbox/features/list-editor'));
-export const ListAdder = lazy(() => import('soapbox/features/list-adder'));
-export const Search = lazy(() => import('soapbox/features/search'));
-export const LoginPage = lazy(() => import('soapbox/features/auth-login/components/login-page'));
-export const ExternalLogin = lazy(() => import('soapbox/features/external-login'));
-export const LogoutPage = lazy(() => import('soapbox/features/auth-login/components/logout'));
-export const RegistrationPage = lazy(() => import('soapbox/features/auth-login/components/registration-page'));
-export const Settings = lazy(() => import('soapbox/features/settings'));
-export const EditProfile = lazy(() => import('soapbox/features/edit-profile'));
-export const EditEmail = lazy(() => import('soapbox/features/edit-email'));
-export const EmailConfirmation = lazy(() => import('soapbox/features/email-confirmation'));
-export const EditPassword = lazy(() => import('soapbox/features/edit-password'));
-export const DeleteAccount = lazy(() => import('soapbox/features/delete-account'));
-export const SoapboxConfig = lazy(() => import('soapbox/features/soapbox-config'));
-export const ExportData = lazy(() => import('soapbox/features/export-data'));
-export const ImportData = lazy(() => import('soapbox/features/import-data'));
-export const Backups = lazy(() => import('soapbox/features/backups'));
-export const PasswordReset = lazy(() => import('soapbox/features/auth-login/components/password-reset'));
-export const PasswordResetConfirm = lazy(() => import('soapbox/features/auth-login/components/password-reset-confirm'));
-export const MfaForm = lazy(() => import('soapbox/features/security/mfa-form'));
-export const ChatIndex = lazy(() => import('soapbox/features/chats'));
-export const ChatWidget = lazy(() => import('soapbox/features/chats/components/chat-widget/chat-widget'));
-export const ServerInfo = lazy(() => import('soapbox/features/server-info'));
-export const Dashboard = lazy(() => import('soapbox/features/admin'));
-export const ModerationLog = lazy(() => import('soapbox/features/admin/moderation-log'));
-export const ThemeEditor = lazy(() => import('soapbox/features/theme-editor'));
-export const UserPanel = lazy(() => import('soapbox/features/ui/components/user-panel'));
-export const PromoPanel = lazy(() => import('soapbox/features/ui/components/promo-panel'));
-export const SignUpPanel = lazy(() => import('soapbox/features/ui/components/panels/sign-up-panel'));
-export const CtaBanner = lazy(() => import('soapbox/features/ui/components/cta-banner'));
-export const FundingPanel = lazy(() => import('soapbox/features/ui/components/funding-panel'));
-export const TrendsPanel = lazy(() => import('soapbox/features/ui/components/trends-panel'));
-export const ProfileInfoPanel = lazy(() => import('soapbox/features/ui/components/profile-info-panel'));
-export const ProfileMediaPanel = lazy(() => import('soapbox/features/ui/components/profile-media-panel'));
-export const ProfileFieldsPanel = lazy(() => import('soapbox/features/ui/components/profile-fields-panel'));
-export const PinnedAccountsPanel = lazy(() => import('soapbox/features/ui/components/pinned-accounts-panel'));
-export const InstanceInfoPanel = lazy(() => import('soapbox/features/ui/components/instance-info-panel'));
-export const InstanceModerationPanel = lazy(() => import('soapbox/features/ui/components/instance-moderation-panel'));
-export const LatestAccountsPanel = lazy(() => import('soapbox/features/admin/components/latest-accounts-panel'));
-export const SidebarMenu = lazy(() => import('soapbox/components/sidebar-menu'));
-export const ModalContainer = lazy(() => import('soapbox/features/ui/containers/modal-container'));
-export const ProfileHoverCard = lazy(() => import('soapbox/components/profile-hover-card'));
-export const StatusHoverCard = lazy(() => import('soapbox/components/status-hover-card'));
-export const CryptoDonate = lazy(() => import('soapbox/features/crypto-donate'));
-export const CryptoDonatePanel = lazy(() => import('soapbox/features/crypto-donate/components/crypto-donate-panel'));
-export const CryptoAddress = lazy(() => import('soapbox/features/crypto-donate/components/crypto-address'));
-export const CryptoDonateModal = lazy(() => import('soapbox/features/ui/components/modals/crypto-donate-modal'));
-export const LightningAddress = lazy(() => import('soapbox/features/crypto-donate/components/lightning-address'));
-export const ScheduledStatuses = lazy(() => import('soapbox/features/scheduled-statuses'));
-export const UserIndex = lazy(() => import('soapbox/features/admin/user-index'));
-export const FederationRestrictions = lazy(() => import('soapbox/features/federation-restrictions'));
-export const Aliases = lazy(() => import('soapbox/features/aliases'));
-export const Migration = lazy(() => import('soapbox/features/migration'));
-export const WhoToFollowPanel = lazy(() => import('soapbox/features/ui/components/who-to-follow-panel'));
-export const FollowRecommendations = lazy(() => import('soapbox/features/follow-recommendations'));
-export const Directory = lazy(() => import('soapbox/features/directory'));
-export const RegisterInvite = lazy(() => import('soapbox/features/register-invite'));
-export const Share = lazy(() => import('soapbox/features/share'));
-export const NewStatus = lazy(() => import('soapbox/features/new-status'));
-export const IntentionalError = lazy(() => import('soapbox/features/intentional-error'));
-export const Developers = lazy(() => import('soapbox/features/developers'));
-export const CreateApp = lazy(() => import('soapbox/features/developers/apps/create'));
-export const SettingsStore = lazy(() => import('soapbox/features/developers/settings-store'));
-export const TestTimeline = lazy(() => import('soapbox/features/test-timeline'));
-export const ServiceWorkerInfo = lazy(() => import('soapbox/features/developers/service-worker-info'));
-export const CompareHistoryModal = lazy(() => import('soapbox/features/ui/components/modals/compare-history-modal'));
-export const AuthTokenList = lazy(() => import('soapbox/features/auth-token-list'));
-export const FamiliarFollowersModal = lazy(() => import('soapbox/features/ui/components/modals/familiar-followers-modal'));
-export const AnnouncementsPanel = lazy(() => import('soapbox/components/announcements/announcements-panel'));
-export const Quotes = lazy(() => import('soapbox/features/quotes'));
-export const ComposeEventModal = lazy(() => import('soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal'));
-export const JoinEventModal = lazy(() => import('soapbox/features/ui/components/modals/join-event-modal'));
-export const EventHeader = lazy(() => import('soapbox/features/event/components/event-header'));
-export const EventInformation = lazy(() => import('soapbox/features/event/event-information'));
-export const EventDiscussion = lazy(() => import('soapbox/features/event/event-discussion'));
-export const EventMapModal = lazy(() => import('soapbox/features/ui/components/modals/event-map-modal'));
-export const EventParticipantsModal = lazy(() => import('soapbox/features/ui/components/modals/event-participants-modal'));
-export const Events = lazy(() => import('soapbox/features/events'));
-export const Groups = lazy(() => import('soapbox/features/groups'));
-export const GroupsDiscover = lazy(() => import('soapbox/features/groups/discover'));
-export const GroupsPopular = lazy(() => import('soapbox/features/groups/popular'));
-export const GroupsSuggested = lazy(() => import('soapbox/features/groups/suggested'));
-export const GroupsTag = lazy(() => import('soapbox/features/groups/tag'));
-export const GroupsTags = lazy(() => import('soapbox/features/groups/tags'));
-export const PendingGroupRequests = lazy(() => import('soapbox/features/groups/pending-requests'));
-export const GroupMembers = lazy(() => import('soapbox/features/group/group-members'));
-export const GroupTags = lazy(() => import('soapbox/features/group/group-tags'));
-export const GroupTagTimeline = lazy(() => import('soapbox/features/group/group-tag-timeline'));
-export const GroupTimeline = lazy(() => import('soapbox/features/group/group-timeline'));
-export const ManageGroup = lazy(() => import('soapbox/features/group/manage-group'));
-export const EditGroup = lazy(() => import('soapbox/features/group/edit-group'));
-export const GroupBlockedMembers = lazy(() => import('soapbox/features/group/group-blocked-members'));
-export const GroupMembershipRequests = lazy(() => import('soapbox/features/group/group-membership-requests'));
-export const GroupGallery = lazy(() => import('soapbox/features/group/group-gallery'));
-export const CreateGroupModal = lazy(() => import('soapbox/features/ui/components/modals/manage-group-modal/create-group-modal'));
-export const NewGroupPanel = lazy(() => import('soapbox/features/ui/components/panels/new-group-panel'));
-export const MyGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/my-groups-panel'));
-export const SuggestedGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/suggested-groups-panel'));
-export const GroupMediaPanel = lazy(() => import('soapbox/features/ui/components/group-media-panel'));
-export const NewEventPanel = lazy(() => import('soapbox/features/ui/components/panels/new-event-panel'));
-export const Announcements = lazy(() => import('soapbox/features/admin/announcements'));
-export const EditAnnouncementModal = lazy(() => import('soapbox/features/ui/components/modals/edit-announcement-modal'));
-export const FollowedTags = lazy(() => import('soapbox/features/followed-tags'));
-export const AccountNotePanel = lazy(() => import('soapbox/features/ui/components/panels/account-note-panel'));
-export const ComposeEditor = lazy(() => import('soapbox/features/compose/editor'));
-export const NostrSignupModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal'));
-export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-login-modal/nostr-login-modal'));
-export const BookmarkFolders = lazy(() => import('soapbox/features/bookmark-folders'));
-export const EditBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/edit-bookmark-folder-modal'));
-export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/select-bookmark-folder-modal'));
-export const EditIdentity = lazy(() => import('soapbox/features/edit-identity'));
-export const Domains = lazy(() => import('soapbox/features/admin/domains'));
-export const EditDomainModal = lazy(() => import('soapbox/features/ui/components/modals/edit-domain-modal'));
-export const NostrRelays = lazy(() => import('soapbox/features/nostr-relays'));
-export const Bech32Redirect = lazy(() => import('soapbox/features/nostr/Bech32Redirect'));
-export const ManageZapSplit = lazy(() => import('soapbox/features/admin/manage-zap-split'));
-export const Relays = lazy(() => import('soapbox/features/admin/relays'));
-export const Rules = lazy(() => import('soapbox/features/admin/rules'));
-export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal'));
-export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays'));
-export const ZapPayRequestModal = lazy(() => import('soapbox/features/ui/components/modals/zap-pay-request-modal'));
-export const ZapInvoiceModal = lazy(() => import('soapbox/features/ui/components/modals/zap-invoice'));
-export const ZapsModal = lazy(() => import('soapbox/features/ui/components/modals/zaps-modal'));
-export const ZapSplitModal = lazy(() => import('soapbox/features/ui/components/modals/zap-split/zap-split-modal'));
-export const CaptchaModal = lazy(() => import('soapbox/features/ui/components/modals/captcha-modal/captcha-modal'));
-export const NostrBunkerLogin = lazy(() => import('soapbox/features/nostr/nostr-bunker-login'));
\ No newline at end of file
+export const AboutPage = lazy(() => import('soapbox/features/about/index.tsx'));
+export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/emoji-picker.tsx'));
+export const Notifications = lazy(() => import('soapbox/features/notifications/index.tsx'));
+export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline/index.tsx'));
+export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline/index.tsx'));
+export const PublicTimeline = lazy(() => import('soapbox/features/public-timeline/index.tsx'));
+export const RemoteTimeline = lazy(() => import('soapbox/features/remote-timeline/index.tsx'));
+export const CommunityTimeline = lazy(() => import('soapbox/features/community-timeline/index.tsx'));
+export const HashtagTimeline = lazy(() => import('soapbox/features/hashtag-timeline/index.tsx'));
+export const DirectTimeline = lazy(() => import('soapbox/features/direct-timeline/index.tsx'));
+export const Conversations = lazy(() => import('soapbox/features/conversations/index.tsx'));
+export const ListTimeline = lazy(() => import('soapbox/features/list-timeline/index.tsx'));
+export const Lists = lazy(() => import('soapbox/features/lists/index.tsx'));
+export const Bookmarks = lazy(() => import('soapbox/features/bookmarks/index.tsx'));
+export const Status = lazy(() => import('soapbox/features/status/index.tsx'));
+export const PinnedStatuses = lazy(() => import('soapbox/features/pinned-statuses/index.tsx'));
+export const AccountTimeline = lazy(() => import('soapbox/features/account-timeline/index.tsx'));
+export const AccountGallery = lazy(() => import('soapbox/features/account-gallery/index.tsx'));
+export const Followers = lazy(() => import('soapbox/features/followers/index.tsx'));
+export const Following = lazy(() => import('soapbox/features/following/index.tsx'));
+export const FollowRequests = lazy(() => import('soapbox/features/follow-requests/index.tsx'));
+export const GenericNotFound = lazy(() => import('soapbox/features/generic-not-found/index.tsx'));
+export const FavouritedStatuses = lazy(() => import('soapbox/features/favourited-statuses/index.tsx'));
+export const Blocks = lazy(() => import('soapbox/features/blocks/index.tsx'));
+export const DomainBlocks = lazy(() => import('soapbox/features/domain-blocks/index.tsx'));
+export const Mutes = lazy(() => import('soapbox/features/mutes/index.tsx'));
+export const MuteModal = lazy(() => import('soapbox/features/ui/components/modals/mute-modal.tsx'));
+export const Filters = lazy(() => import('soapbox/features/filters/index.tsx'));
+export const EditFilter = lazy(() => import('soapbox/features/filters/edit-filter.tsx'));
+export const ReportModal = lazy(() => import('soapbox/features/ui/components/modals/report-modal/report-modal.tsx'));
+export const AccountModerationModal = lazy(() => import('soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx'));
+export const MediaGallery = lazy(() => import('soapbox/components/media-gallery.tsx'));
+export const Video = lazy(() => import('soapbox/features/video/index.tsx'));
+export const Audio = lazy(() => import('soapbox/features/audio/index.tsx'));
+export const MediaModal = lazy(() => import('soapbox/features/ui/components/modals/media-modal.tsx'));
+export const VideoModal = lazy(() => import('soapbox/features/ui/components/modals/video-modal.tsx'));
+export const BoostModal = lazy(() => import('soapbox/features/ui/components/modals/boost-modal.tsx'));
+export const ConfirmationModal = lazy(() => import('soapbox/features/ui/components/modals/confirmation-modal.tsx'));
+export const MissingDescriptionModal = lazy(() => import('soapbox/features/ui/components/modals/missing-description-modal.tsx'));
+export const ActionsModal = lazy(() => import('soapbox/features/ui/components/modals/actions-modal.tsx'));
+export const HotkeysModal = lazy(() => import('soapbox/features/ui/components/modals/hotkeys-modal.tsx'));
+export const ComposeModal = lazy(() => import('soapbox/features/ui/components/modals/compose-modal.tsx'));
+export const ReplyMentionsModal = lazy(() => import('soapbox/features/ui/components/modals/reply-mentions-modal.tsx'));
+export const UnauthorizedModal = lazy(() => import('soapbox/features/ui/components/modals/unauthorized-modal.tsx'));
+export const EditFederationModal = lazy(() => import('soapbox/features/ui/components/modals/edit-federation-modal.tsx'));
+export const EmbedModal = lazy(() => import('soapbox/features/ui/components/modals/embed-modal.tsx'));
+export const ComponentModal = lazy(() => import('soapbox/features/ui/components/modals/component-modal.tsx'));
+export const ReblogsModal = lazy(() => import('soapbox/features/ui/components/modals/reblogs-modal.tsx'));
+export const FavouritesModal = lazy(() => import('soapbox/features/ui/components/modals/favourites-modal.tsx'));
+export const DislikesModal = lazy(() => import('soapbox/features/ui/components/modals/dislikes-modal.tsx'));
+export const ReactionsModal = lazy(() => import('soapbox/features/ui/components/modals/reactions-modal.tsx'));
+export const MentionsModal = lazy(() => import('soapbox/features/ui/components/modals/mentions-modal.tsx'));
+export const LandingPageModal = lazy(() => import('soapbox/features/ui/components/modals/landing-page-modal.tsx'));
+export const BirthdaysModal = lazy(() => import('soapbox/features/ui/components/modals/birthdays-modal.tsx'));
+export const BirthdayPanel = lazy(() => import('soapbox/components/birthday-panel.tsx'));
+export const ListEditor = lazy(() => import('soapbox/features/list-editor/index.tsx'));
+export const ListAdder = lazy(() => import('soapbox/features/list-adder/index.tsx'));
+export const Search = lazy(() => import('soapbox/features/search/index.tsx'));
+export const LoginPage = lazy(() => import('soapbox/features/auth-login/components/login-page.tsx'));
+export const ExternalLogin = lazy(() => import('soapbox/features/external-login/index.tsx'));
+export const LogoutPage = lazy(() => import('soapbox/features/auth-login/components/logout.tsx'));
+export const RegistrationPage = lazy(() => import('soapbox/features/auth-login/components/registration-page.tsx'));
+export const Settings = lazy(() => import('soapbox/features/settings/index.tsx'));
+export const EditProfile = lazy(() => import('soapbox/features/edit-profile/index.tsx'));
+export const EditEmail = lazy(() => import('soapbox/features/edit-email/index.tsx'));
+export const EmailConfirmation = lazy(() => import('soapbox/features/email-confirmation/index.tsx'));
+export const EditPassword = lazy(() => import('soapbox/features/edit-password/index.tsx'));
+export const DeleteAccount = lazy(() => import('soapbox/features/delete-account/index.tsx'));
+export const SoapboxConfig = lazy(() => import('soapbox/features/soapbox-config/index.tsx'));
+export const ExportData = lazy(() => import('soapbox/features/export-data/index.tsx'));
+export const ImportData = lazy(() => import('soapbox/features/import-data/index.tsx'));
+export const Backups = lazy(() => import('soapbox/features/backups/index.tsx'));
+export const PasswordReset = lazy(() => import('soapbox/features/auth-login/components/password-reset.tsx'));
+export const PasswordResetConfirm = lazy(() => import('soapbox/features/auth-login/components/password-reset-confirm.tsx'));
+export const MfaForm = lazy(() => import('soapbox/features/security/mfa-form.tsx'));
+export const ChatIndex = lazy(() => import('soapbox/features/chats/index.tsx'));
+export const ChatWidget = lazy(() => import('soapbox/features/chats/components/chat-widget/chat-widget.tsx'));
+export const ServerInfo = lazy(() => import('soapbox/features/server-info/index.tsx'));
+export const Dashboard = lazy(() => import('soapbox/features/admin/index.tsx'));
+export const ModerationLog = lazy(() => import('soapbox/features/admin/moderation-log.tsx'));
+export const ThemeEditor = lazy(() => import('soapbox/features/theme-editor/index.tsx'));
+export const UserPanel = lazy(() => import('soapbox/features/ui/components/user-panel.tsx'));
+export const PromoPanel = lazy(() => import('soapbox/features/ui/components/promo-panel.tsx'));
+export const SignUpPanel = lazy(() => import('soapbox/features/ui/components/panels/sign-up-panel.tsx'));
+export const CtaBanner = lazy(() => import('soapbox/features/ui/components/cta-banner.tsx'));
+export const FundingPanel = lazy(() => import('soapbox/features/ui/components/funding-panel.tsx'));
+export const TrendsPanel = lazy(() => import('soapbox/features/ui/components/trends-panel.tsx'));
+export const ProfileInfoPanel = lazy(() => import('soapbox/features/ui/components/profile-info-panel.tsx'));
+export const ProfileMediaPanel = lazy(() => import('soapbox/features/ui/components/profile-media-panel.tsx'));
+export const ProfileFieldsPanel = lazy(() => import('soapbox/features/ui/components/profile-fields-panel.tsx'));
+export const PinnedAccountsPanel = lazy(() => import('soapbox/features/ui/components/pinned-accounts-panel.tsx'));
+export const InstanceInfoPanel = lazy(() => import('soapbox/features/ui/components/instance-info-panel.tsx'));
+export const InstanceModerationPanel = lazy(() => import('soapbox/features/ui/components/instance-moderation-panel.tsx'));
+export const LatestAccountsPanel = lazy(() => import('soapbox/features/admin/components/latest-accounts-panel.tsx'));
+export const SidebarMenu = lazy(() => import('soapbox/components/sidebar-menu.tsx'));
+export const ModalContainer = lazy(() => import('soapbox/features/ui/containers/modal-container.ts'));
+export const ProfileHoverCard = lazy(() => import('soapbox/components/profile-hover-card.tsx'));
+export const StatusHoverCard = lazy(() => import('soapbox/components/status-hover-card.tsx'));
+export const CryptoDonate = lazy(() => import('soapbox/features/crypto-donate/index.tsx'));
+export const CryptoDonatePanel = lazy(() => import('soapbox/features/crypto-donate/components/crypto-donate-panel.tsx'));
+export const CryptoAddress = lazy(() => import('soapbox/features/crypto-donate/components/crypto-address.tsx'));
+export const CryptoDonateModal = lazy(() => import('soapbox/features/ui/components/modals/crypto-donate-modal.tsx'));
+export const LightningAddress = lazy(() => import('soapbox/features/crypto-donate/components/lightning-address.tsx'));
+export const ScheduledStatuses = lazy(() => import('soapbox/features/scheduled-statuses/index.tsx'));
+export const UserIndex = lazy(() => import('soapbox/features/admin/user-index.tsx'));
+export const FederationRestrictions = lazy(() => import('soapbox/features/federation-restrictions/index.tsx'));
+export const Aliases = lazy(() => import('soapbox/features/aliases/index.tsx'));
+export const Migration = lazy(() => import('soapbox/features/migration/index.tsx'));
+export const WhoToFollowPanel = lazy(() => import('soapbox/features/ui/components/who-to-follow-panel.tsx'));
+export const FollowRecommendations = lazy(() => import('soapbox/features/follow-recommendations/index.tsx'));
+export const Directory = lazy(() => import('soapbox/features/directory/index.tsx'));
+export const RegisterInvite = lazy(() => import('soapbox/features/register-invite/index.tsx'));
+export const Share = lazy(() => import('soapbox/features/share/index.tsx'));
+export const NewStatus = lazy(() => import('soapbox/features/new-status/index.tsx'));
+export const IntentionalError = lazy(() => import('soapbox/features/intentional-error/index.tsx'));
+export const Developers = lazy(() => import('soapbox/features/developers/index.tsx'));
+export const CreateApp = lazy(() => import('soapbox/features/developers/apps/create.tsx'));
+export const SettingsStore = lazy(() => import('soapbox/features/developers/settings-store.tsx'));
+export const TestTimeline = lazy(() => import('soapbox/features/test-timeline/index.tsx'));
+export const ServiceWorkerInfo = lazy(() => import('soapbox/features/developers/service-worker-info.tsx'));
+export const CompareHistoryModal = lazy(() => import('soapbox/features/ui/components/modals/compare-history-modal.tsx'));
+export const AuthTokenList = lazy(() => import('soapbox/features/auth-token-list/index.tsx'));
+export const FamiliarFollowersModal = lazy(() => import('soapbox/features/ui/components/modals/familiar-followers-modal.tsx'));
+export const AnnouncementsPanel = lazy(() => import('soapbox/components/announcements/announcements-panel.tsx'));
+export const Quotes = lazy(() => import('soapbox/features/quotes/index.tsx'));
+export const ComposeEventModal = lazy(() => import('soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx'));
+export const JoinEventModal = lazy(() => import('soapbox/features/ui/components/modals/join-event-modal.tsx'));
+export const EventHeader = lazy(() => import('soapbox/features/event/components/event-header.tsx'));
+export const EventInformation = lazy(() => import('soapbox/features/event/event-information.tsx'));
+export const EventDiscussion = lazy(() => import('soapbox/features/event/event-discussion.tsx'));
+export const EventMapModal = lazy(() => import('soapbox/features/ui/components/modals/event-map-modal.tsx'));
+export const EventParticipantsModal = lazy(() => import('soapbox/features/ui/components/modals/event-participants-modal.tsx'));
+export const Events = lazy(() => import('soapbox/features/events/index.tsx'));
+export const Groups = lazy(() => import('soapbox/features/groups/index.tsx'));
+export const GroupsDiscover = lazy(() => import('soapbox/features/groups/discover.tsx'));
+export const GroupsPopular = lazy(() => import('soapbox/features/groups/popular.tsx'));
+export const GroupsSuggested = lazy(() => import('soapbox/features/groups/suggested.tsx'));
+export const GroupsTag = lazy(() => import('soapbox/features/groups/tag.tsx'));
+export const GroupsTags = lazy(() => import('soapbox/features/groups/tags.tsx'));
+export const PendingGroupRequests = lazy(() => import('soapbox/features/groups/pending-requests.tsx'));
+export const GroupMembers = lazy(() => import('soapbox/features/group/group-members.tsx'));
+export const GroupTags = lazy(() => import('soapbox/features/group/group-tags.tsx'));
+export const GroupTagTimeline = lazy(() => import('soapbox/features/group/group-tag-timeline.tsx'));
+export const GroupTimeline = lazy(() => import('soapbox/features/group/group-timeline.tsx'));
+export const ManageGroup = lazy(() => import('soapbox/features/group/manage-group.tsx'));
+export const EditGroup = lazy(() => import('soapbox/features/group/edit-group.tsx'));
+export const GroupBlockedMembers = lazy(() => import('soapbox/features/group/group-blocked-members.tsx'));
+export const GroupMembershipRequests = lazy(() => import('soapbox/features/group/group-membership-requests.tsx'));
+export const GroupGallery = lazy(() => import('soapbox/features/group/group-gallery.tsx'));
+export const CreateGroupModal = lazy(() => import('soapbox/features/ui/components/modals/manage-group-modal/create-group-modal.tsx'));
+export const NewGroupPanel = lazy(() => import('soapbox/features/ui/components/panels/new-group-panel.tsx'));
+export const MyGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/my-groups-panel.tsx'));
+export const SuggestedGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/suggested-groups-panel.tsx'));
+export const GroupMediaPanel = lazy(() => import('soapbox/features/ui/components/group-media-panel.tsx'));
+export const NewEventPanel = lazy(() => import('soapbox/features/ui/components/panels/new-event-panel.tsx'));
+export const Announcements = lazy(() => import('soapbox/features/admin/announcements.tsx'));
+export const EditAnnouncementModal = lazy(() => import('soapbox/features/ui/components/modals/edit-announcement-modal.tsx'));
+export const FollowedTags = lazy(() => import('soapbox/features/followed-tags/index.tsx'));
+export const AccountNotePanel = lazy(() => import('soapbox/features/ui/components/panels/account-note-panel.tsx'));
+export const ComposeEditor = lazy(() => import('soapbox/features/compose/editor/index.tsx'));
+export const NostrSignupModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx'));
+export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx'));
+export const BookmarkFolders = lazy(() => import('soapbox/features/bookmark-folders/index.tsx'));
+export const EditBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/edit-bookmark-folder-modal.tsx'));
+export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/select-bookmark-folder-modal.tsx'));
+export const EditIdentity = lazy(() => import('soapbox/features/edit-identity/index.tsx'));
+export const Domains = lazy(() => import('soapbox/features/admin/domains.tsx'));
+export const EditDomainModal = lazy(() => import('soapbox/features/ui/components/modals/edit-domain-modal.tsx'));
+export const NostrRelays = lazy(() => import('soapbox/features/nostr-relays/index.tsx'));
+export const Bech32Redirect = lazy(() => import('soapbox/features/nostr/Bech32Redirect.tsx'));
+export const ManageZapSplit = lazy(() => import('soapbox/features/admin/manage-zap-split.tsx'));
+export const Relays = lazy(() => import('soapbox/features/admin/relays.tsx'));
+export const Rules = lazy(() => import('soapbox/features/admin/rules.tsx'));
+export const EditRuleModal = lazy(() => import('soapbox/features/ui/components/modals/edit-rule-modal.tsx'));
+export const AdminNostrRelays = lazy(() => import('soapbox/features/admin/nostr-relays.tsx'));
+export const ZapPayRequestModal = lazy(() => import('soapbox/features/ui/components/modals/zap-pay-request-modal.tsx'));
+export const ZapInvoiceModal = lazy(() => import('soapbox/features/ui/components/modals/zap-invoice.tsx'));
+export const ZapsModal = lazy(() => import('soapbox/features/ui/components/modals/zaps-modal.tsx'));
+export const ZapSplitModal = lazy(() => import('soapbox/features/ui/components/modals/zap-split/zap-split-modal.tsx'));
+export const CaptchaModal = lazy(() => import('soapbox/features/ui/components/modals/captcha-modal/captcha-modal.tsx'));
+export const NostrBunkerLogin = lazy(() => import('soapbox/features/nostr/nostr-bunker-login.tsx'));
\ No newline at end of file
diff --git a/src/features/ui/util/global-hotkeys.tsx b/src/features/ui/util/global-hotkeys.tsx
index e413ff2db..29f47d6a6 100644
--- a/src/features/ui/util/global-hotkeys.tsx
+++ b/src/features/ui/util/global-hotkeys.tsx
@@ -1,12 +1,14 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { resetCompose } from 'soapbox/actions/compose';
-import { openModal } from 'soapbox/actions/modals';
-import { FOCUS_EDITOR_COMMAND } from 'soapbox/features/compose/editor/plugins/focus-plugin';
-import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { resetCompose } from 'soapbox/actions/compose.ts';
+import { openModal } from 'soapbox/actions/modals.ts';
+import { FOCUS_EDITOR_COMMAND } from 'soapbox/features/compose/editor/plugins/focus-plugin.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
-import { HotKeys } from '../components/hotkeys';
+import { HotKeys } from '../components/hotkeys.tsx';
 
 import type { LexicalEditor } from 'lexical';
 
diff --git a/src/features/ui/util/optional-motion.tsx b/src/features/ui/util/optional-motion.tsx
index 368158fec..572d1cc98 100644
--- a/src/features/ui/util/optional-motion.tsx
+++ b/src/features/ui/util/optional-motion.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import { Motion, MotionProps } from 'react-motion';
 
-import { useSettings } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
-import ReducedMotion from './reduced-motion';
+import ReducedMotion from './reduced-motion.tsx';
 
 const OptionalMotion = (props: MotionProps) => {
   const { reduceMotion } = useSettings();
diff --git a/src/features/ui/util/pending-status-builder.ts b/src/features/ui/util/pending-status-builder.ts
index cc3a06102..e2031bdde 100644
--- a/src/features/ui/util/pending-status-builder.ts
+++ b/src/features/ui/util/pending-status-builder.ts
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 
-import { normalizeStatus } from 'soapbox/normalizers/status';
-import { calculateStatus } from 'soapbox/reducers/statuses';
-import { makeGetAccount } from 'soapbox/selectors';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
+import { calculateStatus } from 'soapbox/reducers/statuses.ts';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
-import type { PendingStatus } from 'soapbox/reducers/pending-statuses';
-import type { RootState } from 'soapbox/store';
+import type { PendingStatus } from 'soapbox/reducers/pending-statuses.ts';
+import type { RootState } from 'soapbox/store.ts';
 
 const getAccount = makeGetAccount();
 
diff --git a/src/features/ui/util/react-router-helpers.tsx b/src/features/ui/util/react-router-helpers.tsx
index e45105fbb..394381a8a 100644
--- a/src/features/ui/util/react-router-helpers.tsx
+++ b/src/features/ui/util/react-router-helpers.tsx
@@ -1,14 +1,15 @@
-import React, { Suspense, useEffect, useRef } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
 import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType, useLocation } from 'react-router-dom';
 
-import { Layout } from 'soapbox/components/ui';
-import { useOwnAccount, useSettings } from 'soapbox/hooks';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
 
-import ColumnForbidden from '../components/column-forbidden';
-import ColumnLoading from '../components/column-loading';
-import ColumnsArea from '../components/columns-area';
-import ErrorColumn from '../components/error-column';
+import ColumnForbidden from '../components/column-forbidden.tsx';
+import ColumnLoading from '../components/column-loading.tsx';
+import ColumnsArea from '../components/columns-area.tsx';
+import ErrorColumn from '../components/error-column.tsx';
 
 type PageProps = {
   params?: MatchType['params'];
diff --git a/src/features/ui/util/reduced-motion.tsx b/src/features/ui/util/reduced-motion.tsx
index c677f4428..83a76f5e8 100644
--- a/src/features/ui/util/reduced-motion.tsx
+++ b/src/features/ui/util/reduced-motion.tsx
@@ -1,6 +1,5 @@
 // Like react-motion's Motion, but reduces all animations to cross-fades
 // for the benefit of users with motion sickness.
-import React from 'react';
 import { Motion, MotionProps } from 'react-motion';
 
 const stylesToKeep = ['opacity', 'backgroundOpacity'];
diff --git a/src/features/video/index.tsx b/src/features/video/index.tsx
index d3e7a574a..92acc005a 100644
--- a/src/features/video/index.tsx
+++ b/src/features/video/index.tsx
@@ -1,15 +1,21 @@
+import arrowsMaximizeIcon from '@tabler/icons/outline/arrows-maximize.svg';
+import arrowsMinimizeIcon from '@tabler/icons/outline/arrows-minimize.svg';
+import playerPauseIcon from '@tabler/icons/outline/player-pause.svg';
+import playerPlayIcon from '@tabler/icons/outline/player-play.svg';
+import volume3Icon from '@tabler/icons/outline/volume-3.svg';
+import volumeIcon from '@tabler/icons/outline/volume.svg';
 import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import Blurhash from 'soapbox/components/blurhash';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
-import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media-aspect-ratio';
+import Blurhash from 'soapbox/components/blurhash.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media-aspect-ratio.ts';
 
-import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
+import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen.ts';
 
 const DEFAULT_HEIGHT = 300;
 
@@ -598,7 +604,7 @@ const Video: React.FC<IVideo> = ({
               onClick={togglePlay}
               autoFocus={autoFocus}
             >
-              <SvgIcon className='w-[20px]' src={paused ? require('@tabler/icons/outline/player-play.svg') : require('@tabler/icons/outline/player-pause.svg')} />
+              <SvgIcon className='w-[20px]' src={paused ? playerPlayIcon : playerPauseIcon} />
             </button>
 
             <button
@@ -611,7 +617,7 @@ const Video: React.FC<IVideo> = ({
                 , { 'py-[10px]': fullscreen })}
               onClick={toggleMute}
             >
-              <SvgIcon className='w-[20px]' src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
+              <SvgIcon className='w-[20px]' src={muted ? volume3Icon : volumeIcon} />
             </button>
 
             <div
@@ -665,7 +671,7 @@ const Video: React.FC<IVideo> = ({
                 , { 'py-[10px]': fullscreen })}
               onClick={toggleFullscreen}
             >
-              <SvgIcon className='w-[20px]' src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')} />
+              <SvgIcon className='w-[20px]' src={fullscreen ? arrowsMinimizeIcon : arrowsMaximizeIcon} />
             </button>
           </div>
         </div>
diff --git a/src/features/zap/components/zap-button/zap-button.tsx b/src/features/zap/components/zap-button/zap-button.tsx
index d07fab6aa..02a24cfae 100644
--- a/src/features/zap/components/zap-button/zap-button.tsx
+++ b/src/features/zap/components/zap-button/zap-button.tsx
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
-import React from 'react';
+import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { shortNumberFormat } from 'soapbox/utils/numbers.tsx';
 
 interface IButton {
   /** Whether this button expands the width of its container. */
@@ -30,7 +30,7 @@ interface IButton {
 }
 
 /** Customizable button element. */
-const ZapButton = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
+const ZapButton = forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
   const {
     disabled = false,
     icon,
diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx
index 8e32ba5e7..6dc0cb2ef 100644
--- a/src/features/zap/components/zap-pay-request-form.tsx
+++ b/src/features/zap/components/zap-pay-request-form.tsx
@@ -1,24 +1,31 @@
-import React, { useEffect, useState } from 'react';
+import boltIcon from '@tabler/icons/outline/bolt.svg';
+import infoSquareRoundedIcon from '@tabler/icons/outline/info-square-rounded.svg';
+import xIcon from '@tabler/icons/outline/x.svg';
+import { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { zap } from 'soapbox/actions/interactions';
-import { openModal, closeModal } from 'soapbox/actions/modals';
-import useZapSplit from 'soapbox/api/hooks/zap-split/useZapSplit';
+import { zap } from 'soapbox/actions/interactions.ts';
+import { openModal, closeModal } from 'soapbox/actions/modals.ts';
+import useZapSplit from 'soapbox/api/hooks/zap-split/useZapSplit.ts';
 import chestIcon from 'soapbox/assets/icons/chest.png';
 import coinStack from 'soapbox/assets/icons/coin-stack.png';
 import coinIcon from 'soapbox/assets/icons/coin.png';
 import moneyBag from 'soapbox/assets/icons/money-bag.png';
 import pileCoin from 'soapbox/assets/icons/pile-coin.png';
-import DisplayNameInline from 'soapbox/components/display-name-inline';
-import { Stack, Button, Input, Avatar, Text } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
-import { useAppDispatch } from 'soapbox/hooks';
+import DisplayNameInline from 'soapbox/components/display-name-inline.tsx';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import Button from 'soapbox/components/ui/button.tsx';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Input from 'soapbox/components/ui/input.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
-import ZapButton from './zap-button/zap-button';
+import ZapButton from './zap-button/zap-button.tsx';
 
-import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities';
+import type {  Account as AccountEntity, Status as StatusEntity   } from 'soapbox/types/entities.ts';
 
 const ZAP_PRESETS = [
   { amount: 50, icon: coinIcon },
@@ -34,7 +41,7 @@ interface IZapPayRequestForm {
   onClose?(): void;
 }
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
+const closeIcon = xIcon;
 
 const messages = defineMessages({
   zap_button_rounded: { id: 'zap.button.text.rounded', defaultMessage: 'Zap {amount}K sats' },
@@ -149,7 +156,7 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
 
       {hasZapSplit ? <Stack space={2}>
 
-        <Button className='m-auto w-auto' type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={'Zap sats'} disabled={zapAmount < 1 ? true : false} />
+        <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={'Zap sats'} disabled={zapAmount < 1 ? true : false} />
 
         <div className='flex items-center justify-center gap-2 sm:gap-4'>
           <span className='text-[10px] sm:text-xs'>
@@ -160,11 +167,11 @@ const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) =>
           </span>
 
           <Link to={'/'} className='text-xs underline'>
-            <SvgIcon src={require('@tabler/icons/outline/info-square-rounded.svg')} className='w-4' alt='info-square-rounded' />
+            <SvgIcon src={infoSquareRoundedIcon} className='w-4' alt='info-square-rounded' />
           </Link>
 
         </div>
-      </Stack> : <Button className='m-auto w-auto' type='submit' theme='primary' icon={require('@tabler/icons/outline/bolt.svg')} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />}
+      </Stack> : <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />}
 
     </Stack>
   );
diff --git a/src/features/zap/components/zap-split-account-item.tsx b/src/features/zap/components/zap-split-account-item.tsx
index 9e6438432..f711f3a32 100644
--- a/src/features/zap/components/zap-split-account-item.tsx
+++ b/src/features/zap/components/zap-split-account-item.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import { Slider } from 'soapbox/components/ui';
+import Slider from 'soapbox/components/ui/slider.tsx';
 
 const formattedWeight = (weight: number) =>{
   return Number((weight * 100).toFixed());
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 000000000..0301f98b1
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,13 @@
+import type { NostrSigner } from '@nostrify/nostrify';
+
+declare global {
+  interface Window {
+    nostr?: NostrSigner;
+  }
+
+  // FIXME: Remove this definition if the fix is merged upstream.
+  // https://github.com/egoist/vite-plugin-compile-time/pull/26
+  interface ImportMeta {
+    compileTime: <T>(id: string) => T;
+  }
+}
\ No newline at end of file
diff --git a/src/globals.ts b/src/globals.ts
deleted file mode 100644
index f2c1eb35b..000000000
--- a/src/globals.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * globals: do things through the console.
- * This feature is for developers.
- */
-import { changeSettingImmediate } from 'soapbox/actions/settings';
-
-import type { Store } from 'soapbox/store';
-
-/** Add Soapbox globals to the window. */
-export const createGlobals = (store: Store) => {
-  const Soapbox = {
-    /** Become a developer with `Soapbox.isDeveloper()` */
-    isDeveloper: (bool = true): boolean => {
-      if (![true, false].includes(bool)) {
-        throw `Invalid option ${bool}. Must be true or false.`;
-      }
-      store.dispatch(changeSettingImmediate(['isDeveloper'], bool) as any);
-      return bool;
-    },
-  };
-
-  (window as any).Soapbox = Soapbox;
-};
diff --git a/src/hooks/__mocks__/resize-observer.ts b/src/hooks/__mocks__/resize-observer.ts
index 172645825..caa4466d8 100644
--- a/src/hooks/__mocks__/resize-observer.ts
+++ b/src/hooks/__mocks__/resize-observer.ts
@@ -1,3 +1,5 @@
+import { vi } from 'vitest';
+
 let listener: ((rect: any) => void) | undefined = undefined;
 const mockDisconnect = vi.fn();
 
diff --git a/src/hooks/forms/index.ts b/src/hooks/forms/index.ts
index 7e2c9e7e1..cafcbbede 100644
--- a/src/hooks/forms/index.ts
+++ b/src/hooks/forms/index.ts
@@ -1,3 +1,3 @@
-export { useImageField } from './useImageField';
-export { useTextField } from './useTextField';
-export { usePreview } from './usePreview';
\ No newline at end of file
+export { useImageField } from './useImageField.ts';
+export { useTextField } from './useTextField.ts';
+export { usePreview } from './usePreview.ts';
\ No newline at end of file
diff --git a/src/hooks/forms/useImageField.ts b/src/hooks/forms/useImageField.ts
index cff47f3ff..244098799 100644
--- a/src/hooks/forms/useImageField.ts
+++ b/src/hooks/forms/useImageField.ts
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
-import resizeImage from 'soapbox/utils/resize-image';
+import resizeImage from 'soapbox/utils/resize-image.ts';
 
-import { usePreview } from './usePreview';
+import { usePreview } from './usePreview.ts';
 
 interface UseImageFieldOpts {
   /** Resize the image to the max dimensions, if defined. */
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
deleted file mode 100644
index abfbd726c..000000000
--- a/src/hooks/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export { useApi } from './useApi';
-export { useAppDispatch } from './useAppDispatch';
-export { useAppSelector } from './useAppSelector';
-export { useBackend } from './useBackend';
-export { useClickOutside } from './useClickOutside';
-export { useCompose } from './useCompose';
-export { useDebounce } from './useDebounce';
-export { useDraggedFiles } from './useDraggedFiles';
-export { useGetState } from './useGetState';
-export { useDimensions } from './useDimensions';
-export { useFeatures } from './useFeatures';
-export { useInstance } from './useInstance';
-export { useLoading } from './useLoading';
-export { useLocale } from './useLocale';
-export { useLoggedIn } from './useLoggedIn';
-export { useOnScreen } from './useOnScreen';
-export { useOwnAccount } from './useOwnAccount';
-export { usePrevious } from './usePrevious';
-export { useRefEventHandler } from './useRefEventHandler';
-export { useRegistrationStatus } from './useRegistrationStatus';
-export { useSettings } from './useSettings';
-export { useSoapboxConfig } from './useSoapboxConfig';
-export { useSystemTheme } from './useSystemTheme';
-export { useTheme } from './useTheme';
-export { useSettingsNotifications } from './useSettingsNotifications';
\ No newline at end of file
diff --git a/src/hooks/nostr/useBunker.ts b/src/hooks/nostr/useBunker.ts
index 6cb7058ca..6a226ed64 100644
--- a/src/hooks/nostr/useBunker.ts
+++ b/src/hooks/nostr/useBunker.ts
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import { NBunker } from 'soapbox/features/nostr/NBunker';
-import { useSigner } from 'soapbox/hooks/nostr/useSigner';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { NBunker } from 'soapbox/features/nostr/NBunker.ts';
+import { useSigner } from 'soapbox/hooks/nostr/useSigner.ts';
 
 function useBunker() {
   const { relay } = useNostr();
diff --git a/src/hooks/nostr/useBunkerStore.ts b/src/hooks/nostr/useBunkerStore.ts
index 2608df303..a9571092b 100644
--- a/src/hooks/nostr/useBunkerStore.ts
+++ b/src/hooks/nostr/useBunkerStore.ts
@@ -5,7 +5,7 @@ import { create } from 'zustand';
 // eslint-disable-next-line import/extensions
 import { persist } from 'zustand/middleware';
 
-import { filteredArray, jsonSchema } from 'soapbox/schemas/utils';
+import { filteredArray, jsonSchema } from 'soapbox/schemas/utils.ts';
 
 /**
  * A bunker connection maps an OAuth token from Mastodon API to a user pubkey and bunker keypair.
diff --git a/src/hooks/nostr/useSigner.ts b/src/hooks/nostr/useSigner.ts
index 8541a2430..93eab2423 100644
--- a/src/hooks/nostr/useSigner.ts
+++ b/src/hooks/nostr/useSigner.ts
@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useAppSelector } from 'soapbox/hooks';
-import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 
 export function useSigner() {
   const { connections } = useBunkerStore();
diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts
index 5d0baaf1b..de87c069a 100644
--- a/src/hooks/useApi.ts
+++ b/src/hooks/useApi.ts
@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 
-import { MastodonClient } from 'soapbox/api/MastodonClient';
-import * as BuildConfig from 'soapbox/build-config';
+import { MastodonClient } from 'soapbox/api/MastodonClient.ts';
+import * as BuildConfig from 'soapbox/build-config.ts';
 
-import { useAppSelector } from './useAppSelector';
-import { useOwnAccount } from './useOwnAccount';
+import { useAppSelector } from './useAppSelector.ts';
+import { useOwnAccount } from './useOwnAccount.ts';
 
 export function useApi(): MastodonClient {
   const { account } = useOwnAccount();
diff --git a/src/hooks/useAppDispatch.ts b/src/hooks/useAppDispatch.ts
index fa28aa0d2..2caeeb010 100644
--- a/src/hooks/useAppDispatch.ts
+++ b/src/hooks/useAppDispatch.ts
@@ -1,5 +1,5 @@
 import { useDispatch } from 'react-redux';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 export const useAppDispatch = () => useDispatch<AppDispatch>();
\ No newline at end of file
diff --git a/src/hooks/useAppSelector.ts b/src/hooks/useAppSelector.ts
index 4394afb21..a4b60b02f 100644
--- a/src/hooks/useAppSelector.ts
+++ b/src/hooks/useAppSelector.ts
@@ -1,5 +1,5 @@
 import { TypedUseSelectorHook, useSelector } from 'react-redux';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/hooks/useBackend.ts b/src/hooks/useBackend.ts
index fbbad827d..59d79f7f9 100644
--- a/src/hooks/useBackend.ts
+++ b/src/hooks/useBackend.ts
@@ -1,6 +1,6 @@
-import { parseVersion } from 'soapbox/utils/features';
+import { parseVersion } from 'soapbox/utils/features.ts';
 
-import { useInstance } from './useInstance';
+import { useInstance } from './useInstance.ts';
 
 /**
  * Get the Backend version.
diff --git a/src/hooks/useCompose.ts b/src/hooks/useCompose.ts
index 0d0ef1688..f73743b62 100644
--- a/src/hooks/useCompose.ts
+++ b/src/hooks/useCompose.ts
@@ -1,6 +1,6 @@
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
-import type { ReducerCompose } from 'soapbox/reducers/compose';
+import type { ReducerCompose } from 'soapbox/reducers/compose.ts';
 
 /** Get compose for given key with fallback to 'default' */
 export const useCompose = <ID extends string>(composeId: ID extends 'default' ? never : ID): ReturnType<typeof ReducerCompose> => {
diff --git a/src/hooks/useDimensions.test.ts b/src/hooks/useDimensions.test.ts
index 14f8b2587..7c35eb471 100644
--- a/src/hooks/useDimensions.test.ts
+++ b/src/hooks/useDimensions.test.ts
@@ -1,7 +1,8 @@
 import { renderHook, act } from '@testing-library/react-hooks';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { listener, mockDisconnect } from './__mocks__/resize-observer';
-import { useDimensions } from './useDimensions';
+import { listener, mockDisconnect } from './__mocks__/resize-observer.ts';
+import { useDimensions } from './useDimensions.ts';
 
 describe('useDimensions()', () => {
   beforeEach(() => {
diff --git a/src/hooks/useDraggedFiles.ts b/src/hooks/useDraggedFiles.ts
index 8f519d16e..af3e74d9c 100644
--- a/src/hooks/useDraggedFiles.ts
+++ b/src/hooks/useDraggedFiles.ts
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 /** Controls the state of files being dragged over a node. */
 function useDraggedFiles<R extends HTMLElement>(node: React.RefObject<R>, onDrop?: (files: FileList) => void) {
diff --git a/src/hooks/useFeatures.ts b/src/hooks/useFeatures.ts
index f68cca14a..0e95325d0 100644
--- a/src/hooks/useFeatures.ts
+++ b/src/hooks/useFeatures.ts
@@ -1,6 +1,6 @@
-import { getFeatures, Features } from 'soapbox/utils/features';
+import { getFeatures, Features } from 'soapbox/utils/features.ts';
 
-import { useInstance } from './useInstance';
+import { useInstance } from './useInstance.ts';
 
 /** Get features for the current instance. */
 export const useFeatures = (): Features => {
diff --git a/src/hooks/useGetState.ts b/src/hooks/useGetState.ts
index 848c0c348..6a8768739 100644
--- a/src/hooks/useGetState.ts
+++ b/src/hooks/useGetState.ts
@@ -1,6 +1,6 @@
-import { useAppDispatch } from './useAppDispatch';
+import { useAppDispatch } from './useAppDispatch.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 /**
  * Provides a `getState()` function to hooks.
diff --git a/src/hooks/useInstance.ts b/src/hooks/useInstance.ts
index 46557f587..803889ffa 100644
--- a/src/hooks/useInstance.ts
+++ b/src/hooks/useInstance.ts
@@ -1,11 +1,11 @@
 import { useEffect, useMemo } from 'react';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
-import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1';
-import { useInstanceV2 } from 'soapbox/api/hooks/instance/useInstanceV2';
-import { instanceV2Schema, upgradeInstance } from 'soapbox/schemas/instance';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
+import { useInstanceV1 } from 'soapbox/api/hooks/instance/useInstanceV1.ts';
+import { useInstanceV2 } from 'soapbox/api/hooks/instance/useInstanceV2.ts';
+import { instanceV2Schema, upgradeInstance } from 'soapbox/schemas/instance.ts';
 
-import { useAppDispatch } from './useAppDispatch';
+import { useAppDispatch } from './useAppDispatch.ts';
 
 interface Opts {
   /** The base URL of the instance. */
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
index 2bfbafdc2..771d5186f 100644
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@@ -1,4 +1,4 @@
-import { useScreenWidth } from './useScreenWidth';
+import { useScreenWidth } from './useScreenWidth.ts';
 
 export function useIsMobile() {
   const screenWidth = useScreenWidth();
diff --git a/src/hooks/useLocale.ts b/src/hooks/useLocale.ts
index 6a8d7943c..0c5604e31 100644
--- a/src/hooks/useLocale.ts
+++ b/src/hooks/useLocale.ts
@@ -1,6 +1,6 @@
-import { getLocale } from 'soapbox/actions/settings';
+import { getLocale } from 'soapbox/actions/settings.ts';
 
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
 /** Locales which should be presented in right-to-left. */
 const RTL_LOCALES = ['ar', 'ckb', 'fa', 'he'];
diff --git a/src/hooks/useLoggedIn.ts b/src/hooks/useLoggedIn.ts
index ad7860aca..b32ce1219 100644
--- a/src/hooks/useLoggedIn.ts
+++ b/src/hooks/useLoggedIn.ts
@@ -1,4 +1,4 @@
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
 function useLoggedIn() {
   const me = useAppSelector(state => state.me);
diff --git a/src/hooks/useOnScreen.ts b/src/hooks/useOnScreen.ts
index de9aa23b2..04b63ab2f 100644
--- a/src/hooks/useOnScreen.ts
+++ b/src/hooks/useOnScreen.ts
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 /** Detect whether a given element is on the screen. */
 // https://stackoverflow.com/a/64892655
diff --git a/src/hooks/useOwnAccount.ts b/src/hooks/useOwnAccount.ts
index 6792ca603..fd7758e85 100644
--- a/src/hooks/useOwnAccount.ts
+++ b/src/hooks/useOwnAccount.ts
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
-import { makeGetAccount } from 'soapbox/selectors';
+import { makeGetAccount } from 'soapbox/selectors/index.ts';
 
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
 /** Get the logged-in account from the store, if any. */
 export const useOwnAccount = () => {
diff --git a/src/hooks/useRegistrationStatus.ts b/src/hooks/useRegistrationStatus.ts
index 4d1068ce9..e341d5b29 100644
--- a/src/hooks/useRegistrationStatus.ts
+++ b/src/hooks/useRegistrationStatus.ts
@@ -1,5 +1,5 @@
-import { useFeatures } from './useFeatures';
-import { useInstance } from './useInstance';
+import { useFeatures } from './useFeatures.ts';
+import { useInstance } from './useInstance.ts';
 
 export const useRegistrationStatus = () => {
   const { instance } = useInstance();
diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts
index eda0153c6..00d339e96 100644
--- a/src/hooks/useSettings.ts
+++ b/src/hooks/useSettings.ts
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { settingsSchema } from 'soapbox/schemas/soapbox/settings';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { settingsSchema } from 'soapbox/schemas/soapbox/settings.ts';
 
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
 /** Get the user settings from the store */
 export const useSettings = () => {
diff --git a/src/hooks/useSettingsNotifications.ts b/src/hooks/useSettingsNotifications.ts
index f8ab9ab78..ecc9e4971 100644
--- a/src/hooks/useSettingsNotifications.ts
+++ b/src/hooks/useSettingsNotifications.ts
@@ -1,6 +1,6 @@
-import { useFeatures } from './useFeatures';
-import { useOwnAccount } from './useOwnAccount';
-import { useSettings } from './useSettings';
+import { useFeatures } from './useFeatures.ts';
+import { useOwnAccount } from './useOwnAccount.ts';
+import { useSettings } from './useSettings.ts';
 
 type SettingsNotification = 'needsNip05';
 
diff --git a/src/hooks/useSoapboxConfig.ts b/src/hooks/useSoapboxConfig.ts
index 3f4c33e82..8e6aec6dc 100644
--- a/src/hooks/useSoapboxConfig.ts
+++ b/src/hooks/useSoapboxConfig.ts
@@ -1,8 +1,8 @@
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox.ts';
 
-import { useAppSelector } from './useAppSelector';
+import { useAppSelector } from './useAppSelector.ts';
 
-import type { SoapboxConfig } from 'soapbox/types/soapbox';
+import type { SoapboxConfig } from 'soapbox/types/soapbox.ts';
 
 /** Get the Soapbox config from the store */
 export const useSoapboxConfig = (): SoapboxConfig => {
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 8a53cd376..e37a3c544 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,5 +1,5 @@
-import { useSettings } from './useSettings';
-import { useSystemTheme } from './useSystemTheme';
+import { useSettings } from './useSettings.ts';
+import { useSystemTheme } from './useSystemTheme.ts';
 
 type Theme = 'light' | 'dark' | 'black';
 
diff --git a/src/init/soapbox-head.tsx b/src/init/soapbox-head.tsx
index d11572870..a9ead879b 100644
--- a/src/init/soapbox-head.tsx
+++ b/src/init/soapbox-head.tsx
@@ -1,17 +1,15 @@
 import clsx from 'clsx';
-import React, { useEffect } from 'react';
+import { lazy, useEffect } from 'react';
 
-import {
-  useSettings,
-  useSoapboxConfig,
-  useTheme,
-  useLocale,
-} from 'soapbox/hooks';
-import { normalizeSoapboxConfig } from 'soapbox/normalizers';
-import { startSentry } from 'soapbox/sentry';
-import { generateThemeCss } from 'soapbox/utils/theme';
+import { useLocale } from 'soapbox/hooks/useLocale.ts';
+import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { useTheme } from 'soapbox/hooks/useTheme.ts';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers/index.ts';
+import { startSentry } from 'soapbox/sentry.ts';
+import { generateThemeCss } from 'soapbox/utils/theme.ts';
 
-const Helmet = React.lazy(() => import('soapbox/components/helmet'));
+const Helmet = lazy(() => import('soapbox/components/helmet.tsx'));
 
 interface ISoapboxHead {
   children: React.ReactNode;
diff --git a/src/init/soapbox-load.tsx b/src/init/soapbox-load.tsx
index 7ad79e5a0..fa77d86e0 100644
--- a/src/init/soapbox-load.tsx
+++ b/src/init/soapbox-load.tsx
@@ -1,20 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 
-import { fetchMe } from 'soapbox/actions/me';
-import { loadSoapboxConfig } from 'soapbox/actions/soapbox';
-import LoadingScreen from 'soapbox/components/loading-screen';
-import { useNostr } from 'soapbox/contexts/nostr-context';
-import {
-  useAppSelector,
-  useAppDispatch,
-  useOwnAccount,
-  useLocale,
-  useInstance,
-} from 'soapbox/hooks';
-import { useBunker } from 'soapbox/hooks/nostr/useBunker';
-import { useSigner } from 'soapbox/hooks/nostr/useSigner';
-import MESSAGES from 'soapbox/messages';
+
+import { fetchMe } from 'soapbox/actions/me.ts';
+import { loadSoapboxConfig } from 'soapbox/actions/soapbox.ts';
+import LoadingScreen from 'soapbox/components/loading-screen.tsx';
+import { useNostr } from 'soapbox/contexts/nostr-context.tsx';
+import { useBunker } from 'soapbox/hooks/nostr/useBunker.ts';
+import { useSigner } from 'soapbox/hooks/nostr/useSigner.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { useLocale } from 'soapbox/hooks/useLocale.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import MESSAGES from 'soapbox/messages.ts';
 
 /** Load initial data from the backend */
 const loadInitial = () => {
diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx
index 2c915ebbf..bf61583c3 100644
--- a/src/init/soapbox-mount.tsx
+++ b/src/init/soapbox-mount.tsx
@@ -1,28 +1,24 @@
-import React, { Suspense, useEffect } from 'react';
+import { lazy, Suspense, useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 
-import { openModal } from 'soapbox/actions/modals';
-import * as BuildConfig from 'soapbox/build-config';
-import LoadingScreen from 'soapbox/components/loading-screen';
-import { ScrollContext } from 'soapbox/components/scroll-context';
-import SiteErrorBoundary from 'soapbox/components/site-error-boundary';
-import {
-  ModalContainer,
-} from 'soapbox/features/ui/util/async-components';
-import {
-  useAppDispatch,
-  useAppSelector,
-  useLoggedIn,
-  useOwnAccount,
-  useSoapboxConfig,
-} from 'soapbox/hooks';
-import { useCachedLocationHandler } from 'soapbox/utils/redirect';
+import { openModal } from 'soapbox/actions/modals.ts';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import LoadingScreen from 'soapbox/components/loading-screen.tsx';
+import { ScrollContext } from 'soapbox/components/scroll-context.tsx';
+import SiteErrorBoundary from 'soapbox/components/site-error-boundary.tsx';
+import { ModalContainer } from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { useCachedLocationHandler } from 'soapbox/utils/redirect.ts';
 
-const GdprBanner = React.lazy(() => import('soapbox/components/gdpr-banner'));
-const EmbeddedStatus = React.lazy(() => import('soapbox/features/embedded-status'));
-const UI = React.lazy(() => import('soapbox/features/ui'));
+const GdprBanner = lazy(() => import('soapbox/components/gdpr-banner.tsx'));
+const EmbeddedStatus = lazy(() => import('soapbox/features/embedded-status/index.tsx'));
+const UI = lazy(() => import('soapbox/features/ui/index.tsx'));
 
 /** Highest level node with the Redux store. */
 const SoapboxMount = () => {
diff --git a/src/init/soapbox.tsx b/src/init/soapbox.tsx
index 2b3cce228..be0caa3a7 100644
--- a/src/init/soapbox.tsx
+++ b/src/init/soapbox.tsx
@@ -1,22 +1,17 @@
 import { QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
 import { Provider } from 'react-redux';
 
-import { NostrProvider } from 'soapbox/contexts/nostr-context';
-import { StatProvider } from 'soapbox/contexts/stat-context';
-import { createGlobals } from 'soapbox/globals';
-import { queryClient } from 'soapbox/queries/client';
+import { NostrProvider } from 'soapbox/contexts/nostr-context.tsx';
+import { StatProvider } from 'soapbox/contexts/stat-context.tsx';
+import { queryClient } from 'soapbox/queries/client.ts';
 
-import { checkOnboardingStatus } from '../actions/onboarding';
-import { preload } from '../actions/preload';
-import { store } from '../store';
+import { checkOnboardingStatus } from '../actions/onboarding.ts';
+import { preload } from '../actions/preload.ts';
+import { store } from '../store.ts';
 
-import SoapboxHead from './soapbox-head';
-import SoapboxLoad from './soapbox-load';
-import SoapboxMount from './soapbox-mount';
-
-// Configure global functions for developers
-createGlobals(store);
+import SoapboxHead from './soapbox-head.tsx';
+import SoapboxLoad from './soapbox-load.tsx';
+import SoapboxMount from './soapbox-mount.tsx';
 
 // Preload happens synchronously
 store.dispatch(preload() as any);
diff --git a/src/jest/factory.ts b/src/jest/factory.ts
index a2818c0c8..3d6dacf48 100644
--- a/src/jest/factory.ts
+++ b/src/jest/factory.ts
@@ -1,3 +1,4 @@
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 import {
   accountSchema,
   cardSchema,
@@ -15,9 +16,8 @@ import {
   type GroupTag,
   type Relationship,
   type Status,
-} from 'soapbox/schemas';
-import { GroupRoles } from 'soapbox/schemas/group-member';
-import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance';
+} from 'soapbox/schemas/index.ts';
+import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance.ts';
 
 import type { PartialDeep } from 'type-fest';
 
diff --git a/src/jest/mock-stores.tsx b/src/jest/mock-stores.tsx
index 638a7d4a9..029f98d79 100644
--- a/src/jest/mock-stores.tsx
+++ b/src/jest/mock-stores.tsx
@@ -1,7 +1,7 @@
 import alexJson from 'soapbox/__fixtures__/pleroma-account.json';
-import { instanceV1Schema } from 'soapbox/schemas/instance';
+import { instanceV1Schema } from 'soapbox/schemas/instance.ts';
 
-import { buildAccount } from './factory';
+import { buildAccount } from './factory.ts';
 
 /** Store with registrations open. */
 const storeOpen = { instance: instanceV1Schema.parse({ registrations: true }) };
diff --git a/src/jest/test-helpers.tsx b/src/jest/test-helpers.tsx
index 06087e9ca..d3a8fd81f 100644
--- a/src/jest/test-helpers.tsx
+++ b/src/jest/test-helpers.tsx
@@ -3,22 +3,23 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { render, RenderOptions } from '@testing-library/react';
 import { renderHook, RenderHookOptions } from '@testing-library/react-hooks';
 import { merge } from 'immutable';
-import React, { FC, ReactElement } from 'react';
+import { FC, ReactElement } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { Action, applyMiddleware, createStore } from 'redux';
 import { thunk } from 'redux-thunk';
+import { afterAll, beforeAll } from 'vitest';
 
-import { ChatProvider } from 'soapbox/contexts/chat-context';
-import { StatProvider } from 'soapbox/contexts/stat-context';
-import { queryClient } from 'soapbox/queries/client';
+import { ChatProvider } from 'soapbox/contexts/chat-context.tsx';
+import { StatProvider } from 'soapbox/contexts/stat-context.tsx';
+import { queryClient } from 'soapbox/queries/client.ts';
 
-import { default as rootReducer } from '../reducers';
+import { default as rootReducer } from '../reducers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch } from 'soapbox/store.ts';
 
 // Mock Redux
 // https://redux.js.org/recipes/writing-tests/
diff --git a/src/jest/test-setup.ts b/src/jest/test-setup.ts
index 732a36ccf..0bd11d45a 100644
--- a/src/jest/test-setup.ts
+++ b/src/jest/test-setup.ts
@@ -2,8 +2,10 @@ import { act } from '@testing-library/react';
 import { toast } from 'react-hot-toast';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom/vitest';
+import 'fake-indexeddb/auto';
+import { afterEach, vi } from 'vitest';
 
-import { __clear as clearApiMocks } from '../api/__mocks__';
+import { __clear as clearApiMocks } from '../api/__mocks__/index.ts';
 
 // API mocking
 vi.mock('soapbox/api');
@@ -14,10 +16,6 @@ afterEach(() => {
 // Query mocking
 vi.mock('soapbox/queries/client');
 
-// Mock IndexedDB
-// https://dev.to/andyhaskell/testing-your-indexeddb-code-with-jest-2o17
-require('fake-indexeddb/auto');
-
 // Clear toasts after each test.
 afterEach(() => {
   act(() => {
diff --git a/src/locales/en.json b/src/locales/en.json
index d75c5c114..653fd7dca 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1694,4 +1694,4 @@
   "zap_split.question": "Why am I paying this?",
   "zap_split.text": "Your support will help us build an unstoppable empire and rule the galaxy!",
   "zap_split.title": "Zap Split"
-}
\ No newline at end of file
+}
diff --git a/src/main.tsx b/src/main.tsx
index 7382d69b2..9155ae1e9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,9 @@
 import { enableMapSet } from 'immer';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import * as BuildConfig from 'soapbox/build-config';
-import Soapbox from 'soapbox/init/soapbox';
-import { printConsoleWarning } from 'soapbox/utils/console';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import Soapbox from 'soapbox/init/soapbox.tsx';
+import { printConsoleWarning } from 'soapbox/utils/console.ts';
 
 import '@fontsource/inter/200.css';
 import '@fontsource/inter/300.css';
@@ -15,16 +14,16 @@ import '@fontsource/inter/700.css';
 import '@fontsource/inter/900.css';
 import '@fontsource/roboto-mono/400.css';
 import 'line-awesome/dist/font-awesome-line-awesome/css/all.css';
-import 'soapbox/features/nostr/keyring';
+import 'soapbox/features/nostr/keyring.ts';
 
-import './iframe';
+import './iframe.ts';
 import './styles/i18n/arabic.css';
 import './styles/i18n/javanese.css';
 import './styles/application.scss';
 import './styles/tailwind.css';
 
-import ready from './ready';
-import { registerSW, lockSW } from './utils/sw';
+import ready from './ready.ts';
+import { registerSW, lockSW } from './utils/sw.ts';
 
 enableMapSet();
 
diff --git a/src/middleware/errors.ts b/src/middleware/errors.ts
index 6513f9baf..675bd60d0 100644
--- a/src/middleware/errors.ts
+++ b/src/middleware/errors.ts
@@ -1,4 +1,4 @@
-import toast from 'soapbox/toast';
+import toast from 'soapbox/toast.tsx';
 
 import type { AnyAction, Middleware } from 'redux';
 
diff --git a/src/middleware/sounds.ts b/src/middleware/sounds.ts
index e9ec764ec..f7440ee82 100644
--- a/src/middleware/sounds.ts
+++ b/src/middleware/sounds.ts
@@ -1,8 +1,7 @@
-
-import { play, soundCache } from 'soapbox/utils/sounds';
+import { play, soundCache } from 'soapbox/utils/sounds.ts';
 
 import type { AnyAction, Middleware } from 'redux';
-import type { Sounds } from 'soapbox/utils/sounds';
+import type { Sounds } from 'soapbox/utils/sounds.ts';
 
 interface Action extends AnyAction {
   meta: {
diff --git a/src/normalizers/account.test.ts b/src/normalizers/account.test.ts
index 15a26ecdc..763a19ce8 100644
--- a/src/normalizers/account.test.ts
+++ b/src/normalizers/account.test.ts
@@ -1,9 +1,10 @@
 import { Record as ImmutableRecord, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
 import AVATAR_MISSING from 'soapbox/assets/images/avatar-missing.png';
 import HEADER_MISSING from 'soapbox/assets/images/header-missing.png';
 
-import { normalizeAccount } from './account';
+import { normalizeAccount } from './account.ts';
 
 describe('normalizeAccount()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/account.ts b/src/normalizers/account.ts
index 74a84e46b..ed67d2110 100644
--- a/src/normalizers/account.ts
+++ b/src/normalizers/account.ts
@@ -11,13 +11,15 @@ import {
   fromJS,
 } from 'immutable';
 
-import emojify from 'soapbox/features/emoji';
-import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { unescapeHTML } from 'soapbox/utils/html';
-import { mergeDefined, makeEmojiMap } from 'soapbox/utils/normalizers';
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { normalizeEmoji } from 'soapbox/normalizers/emoji.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
+import { mergeDefined, makeEmojiMap } from 'soapbox/utils/normalizers.ts';
 
-import type { PatronAccount } from 'soapbox/reducers/patron';
-import type { Emoji, Field, EmbeddedEntity, Relationship } from 'soapbox/types/entities';
+import type { PatronAccount } from 'soapbox/reducers/patron.ts';
+import type { Emoji, Field, EmbeddedEntity, Relationship } from 'soapbox/types/entities.ts';
 
 // https://docs.joinmastodon.org/entities/account/
 export const AccountRecord = ImmutableRecord({
@@ -100,11 +102,10 @@ const normalizePleromaLegacyFields = (account: ImmutableMap<string, any>) => {
 const normalizeAvatar = (account: ImmutableMap<string, any>) => {
   const avatar = account.get('avatar');
   const avatarStatic = account.get('avatar_static');
-  const missing = require('soapbox/assets/images/avatar-missing.png');
 
   return account.withMutations(account => {
-    account.set('avatar', avatar || avatarStatic || missing);
-    account.set('avatar_static', avatarStatic || avatar || missing);
+    account.set('avatar', avatar || avatarStatic || avatarMissing);
+    account.set('avatar_static', avatarStatic || avatar || avatarMissing);
   });
 };
 
@@ -112,11 +113,10 @@ const normalizeAvatar = (account: ImmutableMap<string, any>) => {
 const normalizeHeader = (account: ImmutableMap<string, any>) => {
   const header = account.get('header');
   const headerStatic = account.get('header_static');
-  const missing = require('soapbox/assets/images/header-missing.png');
 
   return account.withMutations(account => {
-    account.set('header', header || headerStatic || missing);
-    account.set('header_static', headerStatic || header || missing);
+    account.set('header', header || headerStatic || headerMissing);
+    account.set('header_static', headerStatic || header || headerMissing);
   });
 };
 
diff --git a/src/normalizers/admin-account.ts b/src/normalizers/admin-account.ts
index 7422e123d..6752355e9 100644
--- a/src/normalizers/admin-account.ts
+++ b/src/normalizers/admin-account.ts
@@ -9,7 +9,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import type { Account, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Account, EmbeddedEntity } from 'soapbox/types/entities.ts';
 
 export const AdminAccountRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
diff --git a/src/normalizers/admin-report.ts b/src/normalizers/admin-report.ts
index 71e616e8d..8ade7d123 100644
--- a/src/normalizers/admin-report.ts
+++ b/src/normalizers/admin-report.ts
@@ -9,7 +9,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import type { Account, EmbeddedEntity, Status } from 'soapbox/types/entities';
+import type { Account, EmbeddedEntity, Status } from 'soapbox/types/entities.ts';
 
 export const AdminReportRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
diff --git a/src/normalizers/attachment.test.ts b/src/normalizers/attachment.test.ts
index f093b3243..8e1935102 100644
--- a/src/normalizers/attachment.test.ts
+++ b/src/normalizers/attachment.test.ts
@@ -1,6 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { normalizeAttachment } from './attachment';
+import { normalizeAttachment } from './attachment.ts';
 
 describe('normalizeAttachment()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/attachment.ts b/src/normalizers/attachment.ts
index b63337adc..db588f02d 100644
--- a/src/normalizers/attachment.ts
+++ b/src/normalizers/attachment.ts
@@ -9,7 +9,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import { mergeDefined } from 'soapbox/utils/normalizers';
+import { mergeDefined } from 'soapbox/utils/normalizers.ts';
 
 // https://docs.joinmastodon.org/entities/attachment/
 export const AttachmentRecord = ImmutableRecord({
diff --git a/src/normalizers/chat-message.test.ts b/src/normalizers/chat-message.test.ts
index 83ab5c0ba..9cbebde35 100644
--- a/src/normalizers/chat-message.test.ts
+++ b/src/normalizers/chat-message.test.ts
@@ -1,7 +1,8 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { normalizeAttachment } from './attachment';
-import { normalizeChatMessage } from './chat-message';
+import { normalizeAttachment } from './attachment.ts';
+import { normalizeChatMessage } from './chat-message.ts';
 
 describe('normalizeChatMessage()', () => {
   it('upgrades attachment to media_attachments', () => {
diff --git a/src/normalizers/chat-message.ts b/src/normalizers/chat-message.ts
index 5ec03bb59..1fd572de9 100644
--- a/src/normalizers/chat-message.ts
+++ b/src/normalizers/chat-message.ts
@@ -5,11 +5,11 @@ import {
   fromJS,
 } from 'immutable';
 
-import { normalizeAttachment } from 'soapbox/normalizers/attachment';
-import { emojiReactionSchema } from 'soapbox/schemas';
-import { filteredArray } from 'soapbox/schemas/utils';
+import { normalizeAttachment } from 'soapbox/normalizers/attachment.ts';
+import { emojiReactionSchema } from 'soapbox/schemas/index.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
 
-import type { Attachment, Card, Emoji, EmojiReaction } from 'soapbox/types/entities';
+import type { Attachment, Card, Emoji, EmojiReaction } from 'soapbox/types/entities.ts';
 
 export const ChatMessageRecord = ImmutableRecord({
   account_id: '',
diff --git a/src/normalizers/chat.ts b/src/normalizers/chat.ts
index d3c906a62..08bd5d46f 100644
--- a/src/normalizers/chat.ts
+++ b/src/normalizers/chat.ts
@@ -1,6 +1,6 @@
 import { Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import type { Account, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Account, EmbeddedEntity } from 'soapbox/types/entities.ts';
 
 export const ChatRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
diff --git a/src/normalizers/filter-result.ts b/src/normalizers/filter-result.ts
index 08ed3499f..55b9618a8 100644
--- a/src/normalizers/filter-result.ts
+++ b/src/normalizers/filter-result.ts
@@ -5,9 +5,9 @@
  */
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { normalizeFilter } from './filter';
+import { normalizeFilter } from './filter.ts';
 
-import type { Filter } from 'soapbox/types/entities';
+import type { Filter } from 'soapbox/types/entities.ts';
 
 // https://docs.joinmastodon.org/entities/FilterResult/
 export const FilterResultRecord = ImmutableRecord({
diff --git a/src/normalizers/filter.ts b/src/normalizers/filter.ts
index d3eaab237..4643c58ae 100644
--- a/src/normalizers/filter.ts
+++ b/src/normalizers/filter.ts
@@ -5,10 +5,10 @@
  */
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { FilterKeyword, FilterStatus } from 'soapbox/types/entities';
+import { FilterKeyword, FilterStatus } from 'soapbox/types/entities.ts';
 
-import { normalizeFilterKeyword } from './filter-keyword';
-import { normalizeFilterStatus } from './filter-status';
+import { normalizeFilterKeyword } from './filter-keyword.ts';
+import { normalizeFilterStatus } from './filter-status.ts';
 
 export type ContextType = 'home' | 'public' | 'notifications' | 'thread' | 'account';
 export type FilterActionType = 'warn' | 'hide';
diff --git a/src/normalizers/group-relationship.ts b/src/normalizers/group-relationship.ts
index dfb6196fc..9baa01a52 100644
--- a/src/normalizers/group-relationship.ts
+++ b/src/normalizers/group-relationship.ts
@@ -8,7 +8,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import { GroupRoles } from 'soapbox/schemas/group-member';
+import { GroupRoles } from 'soapbox/schemas/group-member.ts';
 
 export const GroupRelationshipRecord = ImmutableRecord({
   id: '',
diff --git a/src/normalizers/group.ts b/src/normalizers/group.ts
index 1e1973172..ea96edbc1 100644
--- a/src/normalizers/group.ts
+++ b/src/normalizers/group.ts
@@ -10,12 +10,14 @@ import {
   fromJS,
 } from 'immutable';
 
-import emojify from 'soapbox/features/emoji';
-import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { unescapeHTML } from 'soapbox/utils/html';
-import { makeEmojiMap } from 'soapbox/utils/normalizers';
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { normalizeEmoji } from 'soapbox/normalizers/emoji.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
+import { makeEmojiMap } from 'soapbox/utils/normalizers.ts';
 
-import type { Emoji, GroupRelationship } from 'soapbox/types/entities';
+import type { Emoji, GroupRelationship } from 'soapbox/types/entities.ts';
 
 export const GroupRecord = ImmutableRecord({
   avatar: '',
@@ -53,11 +55,10 @@ export const GroupRecord = ImmutableRecord({
 const normalizeAvatar = (group: ImmutableMap<string, any>) => {
   const avatar = group.get('avatar');
   const avatarStatic = group.get('avatar_static');
-  const missing = require('soapbox/assets/images/avatar-missing.png');
 
   return group.withMutations(group => {
-    group.set('avatar', avatar || avatarStatic || missing);
-    group.set('avatar_static', avatarStatic || avatar || missing);
+    group.set('avatar', avatar || avatarStatic || avatarMissing);
+    group.set('avatar_static', avatarStatic || avatar || avatarMissing);
   });
 };
 
@@ -65,11 +66,10 @@ const normalizeAvatar = (group: ImmutableMap<string, any>) => {
 const normalizeHeader = (group: ImmutableMap<string, any>) => {
   const header = group.get('header');
   const headerStatic = group.get('header_static');
-  const missing = require('soapbox/assets/images/header-missing.png');
 
   return group.withMutations(group => {
-    group.set('header', header || headerStatic || missing);
-    group.set('header_static', headerStatic || header || missing);
+    group.set('header', header || headerStatic || headerMissing);
+    group.set('header_static', headerStatic || header || headerMissing);
   });
 };
 
diff --git a/src/normalizers/index.ts b/src/normalizers/index.ts
index d64ff3ae9..17e6b15ae 100644
--- a/src/normalizers/index.ts
+++ b/src/normalizers/index.ts
@@ -1,22 +1,22 @@
-export { AccountRecord, FieldRecord, normalizeAccount } from './account';
-export { AdminAccountRecord, normalizeAdminAccount } from './admin-account';
-export { AdminReportRecord, normalizeAdminReport } from './admin-report';
-export { AttachmentRecord, normalizeAttachment } from './attachment';
-export { ChatRecord, normalizeChat } from './chat';
-export { ChatMessageRecord, normalizeChatMessage } from './chat-message';
-export { EmojiRecord, normalizeEmoji } from './emoji';
-export { FilterRecord, normalizeFilter } from './filter';
-export { FilterKeywordRecord, normalizeFilterKeyword } from './filter-keyword';
-export { FilterStatusRecord, normalizeFilterStatus } from './filter-status';
-export { normalizeGroup } from './group';
-export { GroupRelationshipRecord, normalizeGroupRelationship } from './group-relationship';
-export { HistoryRecord, normalizeHistory } from './history';
-export { ListRecord, normalizeList } from './list';
-export { LocationRecord, normalizeLocation } from './location';
-export { MentionRecord, normalizeMention } from './mention';
-export { NotificationRecord, normalizeNotification } from './notification';
-export { StatusRecord, normalizeStatus } from './status';
-export { StatusEditRecord, normalizeStatusEdit } from './status-edit';
-export { TagRecord, normalizeTag } from './tag';
+export { AccountRecord, FieldRecord, normalizeAccount } from './account.ts';
+export { AdminAccountRecord, normalizeAdminAccount } from './admin-account.ts';
+export { AdminReportRecord, normalizeAdminReport } from './admin-report.ts';
+export { AttachmentRecord, normalizeAttachment } from './attachment.ts';
+export { ChatRecord, normalizeChat } from './chat.ts';
+export { ChatMessageRecord, normalizeChatMessage } from './chat-message.ts';
+export { EmojiRecord, normalizeEmoji } from './emoji.ts';
+export { FilterRecord, normalizeFilter } from './filter.ts';
+export { FilterKeywordRecord, normalizeFilterKeyword } from './filter-keyword.ts';
+export { FilterStatusRecord, normalizeFilterStatus } from './filter-status.ts';
+export { normalizeGroup } from './group.ts';
+export { GroupRelationshipRecord, normalizeGroupRelationship } from './group-relationship.ts';
+export { HistoryRecord, normalizeHistory } from './history.ts';
+export { ListRecord, normalizeList } from './list.ts';
+export { LocationRecord, normalizeLocation } from './location.ts';
+export { MentionRecord, normalizeMention } from './mention.ts';
+export { NotificationRecord, normalizeNotification } from './notification.ts';
+export { StatusRecord, normalizeStatus } from './status.ts';
+export { StatusEditRecord, normalizeStatusEdit } from './status-edit.ts';
+export { TagRecord, normalizeTag } from './tag.ts';
 
-export { SoapboxConfigRecord, normalizeSoapboxConfig } from './soapbox/soapbox-config';
+export { SoapboxConfigRecord, normalizeSoapboxConfig } from './soapbox/soapbox-config.ts';
diff --git a/src/normalizers/mention.test.ts b/src/normalizers/mention.test.ts
index 90ffee65a..29d359b84 100644
--- a/src/normalizers/mention.test.ts
+++ b/src/normalizers/mention.test.ts
@@ -1,6 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { normalizeMention } from './mention';
+import { normalizeMention } from './mention.ts';
 
 describe('normalizeMention()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/mention.ts b/src/normalizers/mention.ts
index 5ff35ce16..c99288763 100644
--- a/src/normalizers/mention.ts
+++ b/src/normalizers/mention.ts
@@ -5,7 +5,7 @@
  */
 import { Record as ImmutableRecord } from 'immutable';
 
-import { normalizeAccount } from 'soapbox/normalizers/account';
+import { normalizeAccount } from 'soapbox/normalizers/account.ts';
 
 // https://docs.joinmastodon.org/entities/mention/
 export const MentionRecord = ImmutableRecord({
diff --git a/src/normalizers/notification.test.ts b/src/normalizers/notification.test.ts
index bb28b3c58..4bc1454a9 100644
--- a/src/normalizers/notification.test.ts
+++ b/src/normalizers/notification.test.ts
@@ -1,6 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { normalizeNotification } from './notification';
+import { normalizeNotification } from './notification.ts';
 
 describe('normalizeNotification()', () => {
   it('normalizes an empty map', () => {
diff --git a/src/normalizers/notification.ts b/src/normalizers/notification.ts
index 83ef9a948..9ea3c294a 100644
--- a/src/normalizers/notification.ts
+++ b/src/normalizers/notification.ts
@@ -9,7 +9,7 @@ import {
   fromJS,
 } from 'immutable';
 
-import type { Account, Status, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Account, Status, EmbeddedEntity } from 'soapbox/types/entities.ts';
 
 // https://docs.joinmastodon.org/entities/notification/
 export const NotificationRecord = ImmutableRecord({
diff --git a/src/normalizers/soapbox/soapbox-config.test.ts b/src/normalizers/soapbox/soapbox-config.test.ts
index e142c09d7..8ceb97380 100644
--- a/src/normalizers/soapbox/soapbox-config.test.ts
+++ b/src/normalizers/soapbox/soapbox-config.test.ts
@@ -1,6 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { normalizeSoapboxConfig } from './soapbox-config';
+import { normalizeSoapboxConfig } from './soapbox-config.ts';
 
 describe('normalizeSoapboxConfig()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/soapbox/soapbox-config.ts b/src/normalizers/soapbox/soapbox-config.ts
index 4092f8367..167803d32 100644
--- a/src/normalizers/soapbox/soapbox-config.ts
+++ b/src/normalizers/soapbox/soapbox-config.ts
@@ -6,9 +6,9 @@ import {
 } from 'immutable';
 import trimStart from 'lodash/trimStart';
 
-import { normalizeUsername } from 'soapbox/utils/input';
-import { toTailwind } from 'soapbox/utils/tailwind';
-import { generateAccent } from 'soapbox/utils/theme';
+import { normalizeUsername } from 'soapbox/utils/input.ts';
+import { toTailwind } from 'soapbox/utils/tailwind.ts';
+import { generateAccent } from 'soapbox/utils/theme.ts';
 
 import type {
   PromoPanelItem,
diff --git a/src/normalizers/status-edit.ts b/src/normalizers/status-edit.ts
index 859eb3a95..3494c6165 100644
--- a/src/normalizers/status-edit.ts
+++ b/src/normalizers/status-edit.ts
@@ -10,14 +10,14 @@ import {
 } from 'immutable';
 import DOMPurify from 'isomorphic-dompurify';
 
-import emojify from 'soapbox/features/emoji';
-import { normalizeAttachment } from 'soapbox/normalizers/attachment';
-import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { pollSchema } from 'soapbox/schemas';
-import { stripCompatibilityFeatures } from 'soapbox/utils/html';
-import { makeEmojiMap } from 'soapbox/utils/normalizers';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { normalizeAttachment } from 'soapbox/normalizers/attachment.ts';
+import { normalizeEmoji } from 'soapbox/normalizers/emoji.ts';
+import { pollSchema } from 'soapbox/schemas/index.ts';
+import { stripCompatibilityFeatures } from 'soapbox/utils/html.ts';
+import { makeEmojiMap } from 'soapbox/utils/normalizers.ts';
 
-import type { Account, Attachment, Emoji, EmbeddedEntity, Poll } from 'soapbox/types/entities';
+import type { Account, Attachment, Emoji, EmbeddedEntity, Poll } from 'soapbox/types/entities.ts';
 
 export const StatusEditRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
diff --git a/src/normalizers/status.test.ts b/src/normalizers/status.test.ts
index e5bf6b2c8..82c6ed9a0 100644
--- a/src/normalizers/status.test.ts
+++ b/src/normalizers/status.test.ts
@@ -1,8 +1,9 @@
 import { Record as ImmutableRecord, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { normalizeStatus } from './status';
+import { normalizeStatus } from './status.ts';
 
-import type { Poll, Card } from 'soapbox/types/entities';
+import type { Poll, Card } from 'soapbox/types/entities.ts';
 
 describe('normalizeStatus()', () => {
   it('adds base fields', () => {
diff --git a/src/normalizers/status.ts b/src/normalizers/status.ts
index 093069f4c..376fd1384 100644
--- a/src/normalizers/status.ts
+++ b/src/normalizers/status.ts
@@ -10,14 +10,14 @@ import {
   fromJS,
 } from 'immutable';
 
-import { normalizeAttachment } from 'soapbox/normalizers/attachment';
-import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { normalizeMention } from 'soapbox/normalizers/mention';
-import { accountSchema, cardSchema, emojiReactionSchema, groupSchema, pollSchema, tombstoneSchema } from 'soapbox/schemas';
-import { filteredArray } from 'soapbox/schemas/utils';
-import { maybeFromJS } from 'soapbox/utils/normalizers';
+import { normalizeAttachment } from 'soapbox/normalizers/attachment.ts';
+import { normalizeEmoji } from 'soapbox/normalizers/emoji.ts';
+import { normalizeMention } from 'soapbox/normalizers/mention.ts';
+import { accountSchema, cardSchema, emojiReactionSchema, groupSchema, pollSchema, tombstoneSchema } from 'soapbox/schemas/index.ts';
+import { filteredArray } from 'soapbox/schemas/utils.ts';
+import { maybeFromJS } from 'soapbox/utils/normalizers.ts';
 
-import type { Account, Attachment, Card, Emoji, Group, Mention, Poll, EmbeddedEntity, EmojiReaction } from 'soapbox/types/entities';
+import type { Account, Attachment, Card, Emoji, Group, Mention, Poll, EmbeddedEntity, EmojiReaction } from 'soapbox/types/entities.ts';
 
 export type StatusApprovalStatus = 'pending' | 'approval' | 'rejected';
 export type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct' | 'self' | 'group';
diff --git a/src/normalizers/tag.ts b/src/normalizers/tag.ts
index fde58241f..d463e6955 100644
--- a/src/normalizers/tag.ts
+++ b/src/normalizers/tag.ts
@@ -10,9 +10,9 @@ import {
   fromJS,
 } from 'immutable';
 
-import { normalizeHistory } from './history';
+import { normalizeHistory } from './history.ts';
 
-import type { History } from 'soapbox/types/entities';
+import type { History } from 'soapbox/types/entities.ts';
 
 // https://docs.joinmastodon.org/entities/tag/
 export const TagRecord = ImmutableRecord({
diff --git a/src/pages/admin-page.tsx b/src/pages/admin-page.tsx
index 9d8c21073..73b923ff6 100644
--- a/src/pages/admin-page.tsx
+++ b/src/pages/admin-page.tsx
@@ -1,11 +1,9 @@
-import React from 'react';
-
-import { Layout } from 'soapbox/components/ui';
+import Layout from 'soapbox/components/ui/layout.tsx';
 import {
   LatestAccountsPanel,
-} from 'soapbox/features/ui/util/async-components';
+} from 'soapbox/features/ui/util/async-components.ts';
 
-import LinkFooter from '../features/ui/components/link-footer';
+import LinkFooter from '../features/ui/components/link-footer.tsx';
 
 interface IAdminPage {
   children: React.ReactNode;
diff --git a/src/pages/chats-page.tsx b/src/pages/chats-page.tsx
index 368b2079e..aee120db3 100644
--- a/src/pages/chats-page.tsx
+++ b/src/pages/chats-page.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface IChatsPage {
   children: React.ReactNode;
 }
diff --git a/src/pages/default-page.tsx b/src/pages/default-page.tsx
index 417d578b9..5597b661b 100644
--- a/src/pages/default-page.tsx
+++ b/src/pages/default-page.tsx
@@ -1,15 +1,13 @@
-import React from 'react';
-
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
-
-import { Layout } from '../components/ui';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface IDefaultPage {
   children: React.ReactNode;
diff --git a/src/pages/empty-page.tsx b/src/pages/empty-page.tsx
index 1cb34bddc..f566e9733 100644
--- a/src/pages/empty-page.tsx
+++ b/src/pages/empty-page.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { Layout } from '../components/ui';
+import Layout from 'soapbox/components/ui/layout.tsx';
 
 interface IEmptyPage {
   children: React.ReactNode;
diff --git a/src/pages/event-page.tsx b/src/pages/event-page.tsx
index b5249c744..1146c7c35 100644
--- a/src/pages/event-page.tsx
+++ b/src/pages/event-page.tsx
@@ -1,19 +1,21 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { Column, Layout, Tabs } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   EventHeader,
   CtaBanner,
   SignUpPanel,
   TrendsPanel,
   WhoToFollowPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
-import { makeGetStatus } from 'soapbox/selectors';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 const getStatus = makeGetStatus();
 
diff --git a/src/pages/events-page.tsx b/src/pages/events-page.tsx
index eb31ecca9..f5c1a8ae4 100644
--- a/src/pages/events-page.tsx
+++ b/src/pages/events-page.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
-
-import { Layout } from 'soapbox/components/ui';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
   NewEventPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useFeatures } from 'soapbox/hooks';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface IEventsPage {
   children: React.ReactNode;
diff --git a/src/pages/group-page.tsx b/src/pages/group-page.tsx
index d5c6637fa..da64e60a0 100644
--- a/src/pages/group-page.tsx
+++ b/src/pages/group-page.tsx
@@ -1,20 +1,29 @@
-import React, { useMemo } from 'react';
+import banIcon from '@tabler/icons/outline/ban.svg';
+import eyeOffIcon from '@tabler/icons/outline/eye-off.svg';
+import trashIcon from '@tabler/icons/outline/trash.svg';
+import { useMemo } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 
-import { useGroup, useGroupMembershipRequests } from 'soapbox/api/hooks';
-import { Column, Icon, Layout, Stack, Text, Tabs } from 'soapbox/components/ui';
-import GroupHeader from 'soapbox/features/group/components/group-header';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { useGroup, useGroupMembershipRequests } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Icon from 'soapbox/components/ui/icon.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import GroupHeader from 'soapbox/features/group/components/group-header.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   CtaBanner,
   GroupMediaPanel,
   SignUpPanel,
   SuggestedGroupsPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useFeatures, useOwnAccount } from 'soapbox/hooks';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 
-import type { Group } from 'soapbox/schemas';
+import type { Group } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   all: { id: 'group.tabs.all', defaultMessage: 'All' },
@@ -34,7 +43,7 @@ const DeletedBlankslate = () => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-danger-200 p-3 dark:bg-danger-400/20'>
       <Icon
-        src={require('@tabler/icons/outline/trash.svg')}
+        src={trashIcon}
         className='size-6 text-danger-600 dark:text-danger-400'
       />
     </div>
@@ -52,7 +61,7 @@ const PrivacyBlankslate = () => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-gray-200 p-3 dark:bg-gray-800'>
       <Icon
-        src={require('@tabler/icons/outline/eye-off.svg')}
+        src={eyeOffIcon}
         className='size-6 text-gray-600 dark:text-gray-600'
       />
     </div>
@@ -70,7 +79,7 @@ const BlockedBlankslate = ({ group }: { group: Group }) => (
   <Stack space={4} className='py-10' alignItems='center'>
     <div className='rounded-full bg-danger-200 p-3 dark:bg-danger-400/20'>
       <Icon
-        src={require('@tabler/icons/outline/ban.svg')}
+        src={banIcon}
         className='size-6 text-danger-600 dark:text-danger-400'
       />
     </div>
diff --git a/src/pages/groups-page.tsx b/src/pages/groups-page.tsx
index ed3f62501..ba895f9a9 100644
--- a/src/pages/groups-page.tsx
+++ b/src/pages/groups-page.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import { Route, Routes } from 'react-router-dom-v5-compat';
 
-import { Column, Layout } from 'soapbox/components/ui';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
-import { MyGroupsPanel, NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
+import { MyGroupsPanel, NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components.ts';
 
 interface IGroupsPage {
   children: React.ReactNode;
diff --git a/src/pages/groups-pending-page.tsx b/src/pages/groups-pending-page.tsx
index f692cf7bf..8236f613f 100644
--- a/src/pages/groups-pending-page.tsx
+++ b/src/pages/groups-pending-page.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 
-import { Layout } from 'soapbox/components/ui';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
-import { NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
+import { NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components.ts';
 
 interface IGroupsPage {
   children: React.ReactNode;
diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx
index 5087f2990..859c0036c 100644
--- a/src/pages/home-page.tsx
+++ b/src/pages/home-page.tsx
@@ -1,10 +1,14 @@
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { uploadCompose } from 'soapbox/actions/compose';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { uploadCompose } from 'soapbox/actions/compose.ts';
+import Avatar from 'soapbox/components/ui/avatar.tsx';
+import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
+import HStack from 'soapbox/components/ui/hstack.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
@@ -15,12 +19,17 @@ import {
   BirthdayPanel,
   CtaBanner,
   AnnouncementsPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDraggedFiles, useAppDispatch } from 'soapbox/hooks';
-import { useIsMobile } from 'soapbox/hooks/useIsMobile';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui';
-import ComposeForm from '../features/compose/components/compose-form';
+
+import ComposeForm from '../features/compose/components/compose-form.tsx';
 
 interface IHomePage {
   children: React.ReactNode;
diff --git a/src/pages/landing-page.tsx b/src/pages/landing-page.tsx
index dd1733923..1620ec015 100644
--- a/src/pages/landing-page.tsx
+++ b/src/pages/landing-page.tsx
@@ -1,15 +1,13 @@
-import React from 'react';
-
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
   WhoToFollowPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
-
-import { Layout } from '../components/ui';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface ILandingPage {
   children: React.ReactNode;
diff --git a/src/pages/manage-groups-page.tsx b/src/pages/manage-groups-page.tsx
index 1214259a8..dc7b7cf74 100644
--- a/src/pages/manage-groups-page.tsx
+++ b/src/pages/manage-groups-page.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 
-import { Layout } from 'soapbox/components/ui';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
-import { MyGroupsPanel, NewGroupPanel } from 'soapbox/features/ui/util/async-components';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
+import { MyGroupsPanel, NewGroupPanel } from 'soapbox/features/ui/util/async-components.ts';
 
 interface IGroupsPage {
   children: React.ReactNode;
diff --git a/src/pages/manage-zap-split-page.tsx b/src/pages/manage-zap-split-page.tsx
deleted file mode 100644
index 8a254e0ac..000000000
--- a/src/pages/manage-zap-split-page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-interface IManageZapSplitPage {
-  children: React.ReactNode;
-}
-
-/** Custom layout for Manage Zap Split on desktop. */
-const ManageZapSplitPage: React.FC<IManageZapSplitPage> = ({ children }) => {
-  return (
-    <div className='black:border-gray-800 md:col-span-12 lg:col-span-9 lg:black:border-l'>
-      {children}
-    </div>
-  );
-};
-
-export default ManageZapSplitPage;
diff --git a/src/pages/profile-page.tsx b/src/pages/profile-page.tsx
index 5a0001e69..b9dc04bb7 100644
--- a/src/pages/profile-page.tsx
+++ b/src/pages/profile-page.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Redirect, useHistory } from 'react-router-dom';
 
-import { useAccountLookup } from 'soapbox/api/hooks';
-import { Column, Layout, Tabs } from 'soapbox/components/ui';
-import Header from 'soapbox/features/account/components/header';
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import { useAccountLookup } from 'soapbox/api/hooks/index.ts';
+import { Column } from 'soapbox/components/ui/column.tsx';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
+import Header from 'soapbox/features/account/components/header.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   ProfileInfoPanel,
@@ -15,9 +16,11 @@ import {
   CtaBanner,
   PinnedAccountsPanel,
   AccountNotePanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { getAcct } from 'soapbox/utils/accounts.ts';
 
 interface IProfilePage {
   params?: {
diff --git a/src/pages/remote-instance-page.tsx b/src/pages/remote-instance-page.tsx
index 0f15624a8..476e1308e 100644
--- a/src/pages/remote-instance-page.tsx
+++ b/src/pages/remote-instance-page.tsx
@@ -1,15 +1,13 @@
-import React from 'react';
-
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   PromoPanel,
   InstanceInfoPanel,
   InstanceModerationPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
-import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
-
-import { Layout } from '../components/ui';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { federationRestrictionsDisclosed } from 'soapbox/utils/state.ts';
 
 interface IRemoteInstancePage {
   params?: {
diff --git a/src/pages/search-page.tsx b/src/pages/search-page.tsx
index 0da0ffb01..550e26eea 100644
--- a/src/pages/search-page.tsx
+++ b/src/pages/search-page.tsx
@@ -1,16 +1,14 @@
-import React from 'react';
-
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
   SuggestedGroupsPanel,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
-
-import { Layout } from '../components/ui';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface ISearchPage {
   children: React.ReactNode;
diff --git a/src/pages/status-page.tsx b/src/pages/status-page.tsx
index aacee8175..84cc0d92e 100644
--- a/src/pages/status-page.tsx
+++ b/src/pages/status-page.tsx
@@ -1,15 +1,13 @@
-import React from 'react';
-
-import LinkFooter from 'soapbox/features/ui/components/link-footer';
+import Layout from 'soapbox/components/ui/layout.tsx';
+import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
   TrendsPanel,
   SignUpPanel,
   CtaBanner,
-} from 'soapbox/features/ui/util/async-components';
-import { useAppSelector, useFeatures } from 'soapbox/hooks';
-
-import { Layout } from '../components/ui';
+} from 'soapbox/features/ui/util/async-components.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 
 interface IStatusPage {
   children: React.ReactNode;
diff --git a/src/pages/wide-page.tsx b/src/pages/wide-page.tsx
new file mode 100644
index 000000000..d099048b1
--- /dev/null
+++ b/src/pages/wide-page.tsx
@@ -0,0 +1,14 @@
+interface IWidePage {
+  children: React.ReactNode;
+}
+
+/** Wide page without any side components. */
+const WidePage: React.FC<IWidePage> = ({ children }) => {
+  return (
+    <div className='black:border-gray-800 md:col-span-12 lg:col-span-9 lg:black:border-l'>
+      {children}
+    </div>
+  );
+};
+
+export default WidePage;
diff --git a/src/queries/accounts.ts b/src/queries/accounts.ts
index 762649e4c..34e3c3497 100644
--- a/src/queries/accounts.ts
+++ b/src/queries/accounts.ts
@@ -1,8 +1,10 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { patchMeSuccess } from 'soapbox/actions/me';
-import { useApi, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
-import toast from 'soapbox/toast';
+import { patchMeSuccess } from 'soapbox/actions/me.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import toast from 'soapbox/toast.tsx';
 
 export type IAccount = {
   acct: string;
diff --git a/src/queries/chats.test.ts b/src/queries/chats.test.ts
index 003017b84..e43bd8781 100644
--- a/src/queries/chats.test.ts
+++ b/src/queries/chats.test.ts
@@ -1,16 +1,17 @@
 import { Map as ImmutableMap } from 'immutable';
 import sumBy from 'lodash/sumBy';
 import { useEffect } from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildAccount, buildRelationship } from 'soapbox/jest/factory';
-import { createTestStore, mockStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers';
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import { Store } from 'soapbox/store';
-import { ChatMessage } from 'soapbox/types/entities';
-import { flattenPages } from 'soapbox/utils/queries';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildAccount, buildRelationship } from 'soapbox/jest/factory.ts';
+import { createTestStore, mockStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import { Store } from 'soapbox/store.ts';
+import { ChatMessage } from 'soapbox/types/entities.ts';
+import { flattenPages } from 'soapbox/utils/queries.ts';
 
-import { ChatKeys, IChat, isLastMessage, useChat, useChatActions, useChatMessages, useChats } from './chats';
+import { ChatKeys, IChat, isLastMessage, useChat, useChatActions, useChatMessages, useChats } from './chats.ts';
 
 const chat: IChat = {
   accepted: true,
diff --git a/src/queries/chats.ts b/src/queries/chats.ts
index 2d6cb4118..a80c6f757 100644
--- a/src/queries/chats.ts
+++ b/src/queries/chats.ts
@@ -1,21 +1,25 @@
 import { InfiniteData, keepPreviousData, useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
 import sumBy from 'lodash/sumBy';
 
-import { importFetchedAccount, importFetchedAccounts } from 'soapbox/actions/importer';
-import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context';
-import { useStatContext } from 'soapbox/contexts/stat-context';
-import { useApi, useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import toast from 'soapbox/toast';
-import { ChatMessage } from 'soapbox/types/entities';
-import { reOrderChatListItems, updateChatMessage } from 'soapbox/utils/chats';
-import { getPagination } from 'soapbox/utils/pagination';
-import { flattenPages, PaginatedResult, updatePageItem } from 'soapbox/utils/queries';
+import { importFetchedAccount, importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
+import { ChatWidgetScreens, useChatContext } from 'soapbox/contexts/chat-context.tsx';
+import { useStatContext } from 'soapbox/contexts/stat-context.tsx';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import toast from 'soapbox/toast.tsx';
+import { ChatMessage } from 'soapbox/types/entities.ts';
+import { reOrderChatListItems, updateChatMessage } from 'soapbox/utils/chats.ts';
+import { getPagination } from 'soapbox/utils/pagination.ts';
+import { flattenPages, PaginatedResult, updatePageItem } from 'soapbox/utils/queries.ts';
 
-import { queryClient } from './client';
-import { useFetchRelationships } from './relationships';
+import { queryClient } from './client.ts';
+import { useFetchRelationships } from './relationships.ts';
 
-import type { Account } from 'soapbox/schemas';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 export const messageExpirationOptions = [604800, 1209600, 2592000, 7776000];
 
diff --git a/src/queries/client.ts b/src/queries/client.ts
index 0755aca5c..40a2653b4 100644
--- a/src/queries/client.ts
+++ b/src/queries/client.ts
@@ -1,6 +1,6 @@
 import { QueryClient } from '@tanstack/react-query';
 
-import { HTTPError } from 'soapbox/api/HTTPError';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
 
 /** HTTP response codes to retry. */
 const RETRY_CODES = [502, 503, 504, 521, 522];
diff --git a/src/queries/embed.ts b/src/queries/embed.ts
index b2b8a6771..d0ddead89 100644
--- a/src/queries/embed.ts
+++ b/src/queries/embed.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
+import { useApi } from 'soapbox/hooks/useApi.ts';
 
 type Embed = {
   type: string;
diff --git a/src/queries/relationships.test.ts b/src/queries/relationships.test.ts
index 2c6e3ec8f..a4342fbff 100644
--- a/src/queries/relationships.test.ts
+++ b/src/queries/relationships.test.ts
@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { __stub } from 'soapbox/api';
-import { buildRelationship } from 'soapbox/jest/factory';
-import { createTestStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers';
-import { Store } from 'soapbox/store';
+import { __stub } from 'soapbox/api/index.ts';
+import { buildRelationship } from 'soapbox/jest/factory.ts';
+import { createTestStore, queryClient, renderHook, rootState, waitFor } from 'soapbox/jest/test-helpers.tsx';
+import { Store } from 'soapbox/store.ts';
 
-import { useFetchRelationships } from './relationships';
+import { useFetchRelationships } from './relationships.ts';
 
 describe('useFetchRelationships()', () => {
   let store: Store;
diff --git a/src/queries/relationships.ts b/src/queries/relationships.ts
index 80d83cda3..9804dd9c4 100644
--- a/src/queries/relationships.ts
+++ b/src/queries/relationships.ts
@@ -1,7 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { fetchRelationshipsFail, fetchRelationshipsSuccess } from 'soapbox/actions/accounts';
-import { useApi, useAppDispatch } from 'soapbox/hooks';
+import { fetchRelationshipsFail, fetchRelationshipsSuccess } from 'soapbox/actions/accounts.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 const useFetchRelationships = () => {
   const api = useApi();
diff --git a/src/queries/search.ts b/src/queries/search.ts
index e750ea780..c23d84baa 100644
--- a/src/queries/search.ts
+++ b/src/queries/search.ts
@@ -1,9 +1,9 @@
 import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 
-import { useApi } from 'soapbox/hooks';
-import { Account } from 'soapbox/types/entities';
-import { getPagination } from 'soapbox/utils/pagination';
-import { flattenPages, PaginatedResult } from 'soapbox/utils/queries';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { Account } from 'soapbox/types/entities.ts';
+import { getPagination } from 'soapbox/utils/pagination.ts';
+import { flattenPages, PaginatedResult } from 'soapbox/utils/queries.ts';
 
 export default function useAccountSearch(q: string) {
   const api = useApi();
diff --git a/src/queries/suggestions.test.ts b/src/queries/suggestions.test.ts
index 4618cb6e7..f048f1795 100644
--- a/src/queries/suggestions.test.ts
+++ b/src/queries/suggestions.test.ts
@@ -1,7 +1,9 @@
-import { __stub } from 'soapbox/api';
-import { renderHook, waitFor } from 'soapbox/jest/test-helpers';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { useOnboardingSuggestions } from './suggestions';
+import { __stub } from 'soapbox/api/index.ts';
+import { renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+
+import { useOnboardingSuggestions } from './suggestions.ts';
 
 describe('useOnboardingSuggestions', () => {
   describe('with a successful query', () => {
diff --git a/src/queries/suggestions.ts b/src/queries/suggestions.ts
index 5874109be..71076a86a 100644
--- a/src/queries/suggestions.ts
+++ b/src/queries/suggestions.ts
@@ -1,13 +1,14 @@
 import { useInfiniteQuery, useMutation, keepPreviousData } from '@tanstack/react-query';
 
-import { fetchRelationships } from 'soapbox/actions/accounts';
-import { importFetchedAccounts } from 'soapbox/actions/importer';
-import { useApi, useAppDispatch } from 'soapbox/hooks';
-import { getPagination } from 'soapbox/utils/pagination';
+import { fetchRelationships } from 'soapbox/actions/accounts.ts';
+import { importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { getPagination } from 'soapbox/utils/pagination.ts';
 
-import { PaginatedResult, removePageItem } from '../utils/queries';
+import { PaginatedResult, removePageItem } from '../utils/queries.ts';
 
-import type { IAccount } from './accounts';
+import type { IAccount } from './accounts.ts';
 
 type Suggestion = {
   source: 'staff';
diff --git a/src/queries/trends.test.ts b/src/queries/trends.test.ts
index 36a590c07..9dba5c893 100644
--- a/src/queries/trends.test.ts
+++ b/src/queries/trends.test.ts
@@ -1,7 +1,9 @@
-import { __stub } from 'soapbox/api';
-import { queryClient, renderHook, waitFor } from 'soapbox/jest/test-helpers';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import useTrends from './trends';
+import { __stub } from 'soapbox/api/index.ts';
+import { queryClient, renderHook, waitFor } from 'soapbox/jest/test-helpers.tsx';
+
+import useTrends from './trends.ts';
 
 describe('useTrends', () => {
   beforeEach(() => {
diff --git a/src/queries/trends.ts b/src/queries/trends.ts
index b34500db6..1aa292224 100644
--- a/src/queries/trends.ts
+++ b/src/queries/trends.ts
@@ -1,10 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { fetchTrendsSuccess } from 'soapbox/actions/trends';
-import { useApi, useAppDispatch } from 'soapbox/hooks';
-import { normalizeTag } from 'soapbox/normalizers';
+import { fetchTrendsSuccess } from 'soapbox/actions/trends.ts';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
-import type { Tag } from 'soapbox/types/entities';
+import type { Tag } from 'soapbox/types/entities.ts';
 
 export default function useTrends() {
   const api = useApi();
diff --git a/src/reducers/accounts-meta.ts b/src/reducers/accounts-meta.ts
index 754c20334..e9f4ec127 100644
--- a/src/reducers/accounts-meta.ts
+++ b/src/reducers/accounts-meta.ts
@@ -5,9 +5,9 @@
 
 import { produce } from 'immer';
 
-import { VERIFY_CREDENTIALS_SUCCESS, AUTH_ACCOUNT_REMEMBER_SUCCESS } from 'soapbox/actions/auth';
-import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me';
-import { Account, accountSchema } from 'soapbox/schemas';
+import { VERIFY_CREDENTIALS_SUCCESS, AUTH_ACCOUNT_REMEMBER_SUCCESS } from 'soapbox/actions/auth.ts';
+import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me.ts';
+import { Account, accountSchema } from 'soapbox/schemas/index.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/admin.test.ts b/src/reducers/admin.test.ts
index fa4e26959..d66c44122 100644
--- a/src/reducers/admin.test.ts
+++ b/src/reducers/admin.test.ts
@@ -1,6 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './admin';
+import reducer from './admin.ts';
 
 describe('admin reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/admin.ts b/src/reducers/admin.ts
index caee84551..b05744d3e 100644
--- a/src/reducers/admin.ts
+++ b/src/reducers/admin.ts
@@ -19,13 +19,13 @@ import {
   ADMIN_USERS_APPROVE_SUCCESS,
   ADMIN_USERS_REJECT_REQUEST,
   ADMIN_USERS_REJECT_SUCCESS,
-} from 'soapbox/actions/admin';
-import { normalizeAdminReport, normalizeAdminAccount } from 'soapbox/normalizers';
-import { normalizeId } from 'soapbox/utils/normalizers';
+} from 'soapbox/actions/admin.ts';
+import { normalizeAdminReport, normalizeAdminAccount } from 'soapbox/normalizers/index.ts';
+import { normalizeId } from 'soapbox/utils/normalizers.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
-import type { Config } from 'soapbox/utils/config-db';
+import type { APIEntity } from 'soapbox/types/entities.ts';
+import type { Config } from 'soapbox/utils/config-db.ts';
 
 const ReducerRecord = ImmutableRecord({
   reports: ImmutableMap<string, ReducerAdminReport>(),
diff --git a/src/reducers/aliases.ts b/src/reducers/aliases.ts
index 0d6eb3bad..1f666cb53 100644
--- a/src/reducers/aliases.ts
+++ b/src/reducers/aliases.ts
@@ -5,10 +5,10 @@ import {
   ALIASES_SUGGESTIONS_CLEAR,
   ALIASES_SUGGESTIONS_CHANGE,
   ALIASES_FETCH_SUCCESS,
-} from '../actions/aliases';
+} from '../actions/aliases.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ReducerRecord = ImmutableRecord({
   aliases: ImmutableRecord({
diff --git a/src/reducers/auth.ts b/src/reducers/auth.ts
index bb34609df..0f50d76a8 100644
--- a/src/reducers/auth.ts
+++ b/src/reducers/auth.ts
@@ -2,13 +2,13 @@ import { AxiosError } from 'axios';
 import { produce } from 'immer';
 import { z } from 'zod';
 
-import { keyring } from 'soapbox/features/nostr/keyring';
-import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore';
-import { Account, accountSchema } from 'soapbox/schemas';
-import { Application, applicationSchema } from 'soapbox/schemas/application';
-import { AuthUser, SoapboxAuth, soapboxAuthSchema } from 'soapbox/schemas/soapbox/soapbox-auth';
-import { Token, tokenSchema } from 'soapbox/schemas/token';
-import { jsonSchema } from 'soapbox/schemas/utils';
+import { keyring } from 'soapbox/features/nostr/keyring.ts';
+import { useBunkerStore } from 'soapbox/hooks/nostr/useBunkerStore.ts';
+import { Application, applicationSchema } from 'soapbox/schemas/application.ts';
+import { Account, accountSchema } from 'soapbox/schemas/index.ts';
+import { AuthUser, SoapboxAuth, soapboxAuthSchema } from 'soapbox/schemas/soapbox/soapbox-auth.ts';
+import { Token, tokenSchema } from 'soapbox/schemas/token.ts';
+import { jsonSchema } from 'soapbox/schemas/utils.ts';
 
 import {
   AUTH_APP_CREATED,
@@ -18,8 +18,8 @@ import {
   VERIFY_CREDENTIALS_SUCCESS,
   VERIFY_CREDENTIALS_FAIL,
   AUTH_APP_AUTHORIZED,
-} from '../actions/auth';
-import { ME_FETCH_SKIP } from '../actions/me';
+} from '../actions/auth.ts';
+import { ME_FETCH_SKIP } from '../actions/me.ts';
 
 import type { UnknownAction } from 'redux';
 
diff --git a/src/reducers/backups.tsx b/src/reducers/backups.ts
similarity index 92%
rename from src/reducers/backups.tsx
rename to src/reducers/backups.ts
index e2557c845..83b87b5b4 100644
--- a/src/reducers/backups.tsx
+++ b/src/reducers/backups.ts
@@ -3,10 +3,10 @@ import { Map as ImmutableMap, Record as ImmutableRecord } from 'immutable';
 import {
   BACKUPS_FETCH_SUCCESS,
   BACKUPS_CREATE_SUCCESS,
-} from '../actions/backups';
+} from '../actions/backups.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 export const BackupRecord = ImmutableRecord({
   id: null as number | null,
diff --git a/src/reducers/chat-message-lists.ts b/src/reducers/chat-message-lists.ts
index c87f83676..f560b1224 100644
--- a/src/reducers/chat-message-lists.ts
+++ b/src/reducers/chat-message-lists.ts
@@ -7,11 +7,11 @@ import {
   CHAT_MESSAGE_SEND_REQUEST,
   CHAT_MESSAGE_SEND_SUCCESS,
   CHAT_MESSAGE_DELETE_SUCCESS,
-} from 'soapbox/actions/chats';
-import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
+} from 'soapbox/actions/chats.ts';
+import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type APIEntities = Array<APIEntity>;
 
diff --git a/src/reducers/chat-messages.ts b/src/reducers/chat-messages.ts
index cba666be0..025928dc2 100644
--- a/src/reducers/chat-messages.ts
+++ b/src/reducers/chat-messages.ts
@@ -8,12 +8,12 @@ import {
   CHAT_MESSAGE_SEND_SUCCESS,
   CHAT_MESSAGE_DELETE_REQUEST,
   CHAT_MESSAGE_DELETE_SUCCESS,
-} from 'soapbox/actions/chats';
-import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
-import { normalizeChatMessage } from 'soapbox/normalizers';
+} from 'soapbox/actions/chats.ts';
+import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming.ts';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type ChatMessageRecord = ReturnType<typeof normalizeChatMessage>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/chats.ts b/src/reducers/chats.ts
index ab81e232b..83f490027 100644
--- a/src/reducers/chats.ts
+++ b/src/reducers/chats.ts
@@ -8,13 +8,13 @@ import {
   CHAT_FETCH_SUCCESS,
   CHAT_READ_SUCCESS,
   CHAT_READ_REQUEST,
-} from 'soapbox/actions/chats';
-import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
-import { normalizeChat } from 'soapbox/normalizers';
-import { normalizeId } from 'soapbox/utils/normalizers';
+} from 'soapbox/actions/chats.ts';
+import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming.ts';
+import { normalizeChat } from 'soapbox/normalizers/index.ts';
+import { normalizeId } from 'soapbox/utils/normalizers.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type ChatRecord = ReturnType<typeof normalizeChat>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/compose-event.ts b/src/reducers/compose-event.ts
index c6c4d17fa..f68e6fe74 100644
--- a/src/reducers/compose-event.ts
+++ b/src/reducers/compose-event.ts
@@ -19,8 +19,8 @@ import {
   EVENT_SUBMIT_FAIL,
   EVENT_COMPOSE_CANCEL,
   EVENT_FORM_SET,
-} from 'soapbox/actions/events';
-import { normalizeAttachment, normalizeLocation } from 'soapbox/normalizers';
+} from 'soapbox/actions/events.ts';
+import { normalizeAttachment, normalizeLocation } from 'soapbox/normalizers/index.ts';
 
 import type {
   Attachment as AttachmentEntity,
diff --git a/src/reducers/compose.test.ts b/src/reducers/compose.test.ts
index cee5e7170..c7e3b2de0 100644
--- a/src/reducers/compose.test.ts
+++ b/src/reducers/compose.test.ts
@@ -1,14 +1,15 @@
 import { List as ImmutableList, Record as ImmutableRecord, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import * as actions from 'soapbox/actions/compose';
-import { COMPOSE_SET_STATUS } from 'soapbox/actions/compose-status';
-import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me';
-import { SETTING_CHANGE } from 'soapbox/actions/settings';
-import { TIMELINE_DELETE } from 'soapbox/actions/timelines';
-import { TagRecord } from 'soapbox/normalizers';
-import { normalizeStatus } from 'soapbox/normalizers/status';
+import { COMPOSE_SET_STATUS } from 'soapbox/actions/compose-status.ts';
+import * as actions from 'soapbox/actions/compose.ts';
+import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS } from 'soapbox/actions/me.ts';
+import { SETTING_CHANGE } from 'soapbox/actions/settings.ts';
+import { TIMELINE_DELETE } from 'soapbox/actions/timelines.ts';
+import { TagRecord } from 'soapbox/normalizers/index.ts';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
 
-import reducer, { initialState, ReducerCompose } from './compose';
+import reducer, { initialState, ReducerCompose } from './compose.ts';
 
 describe('compose reducer', () => {
   it('returns the initial state by default', () => {
diff --git a/src/reducers/compose.ts b/src/reducers/compose.ts
index bf9ac0d83..47d1d4d00 100644
--- a/src/reducers/compose.ts
+++ b/src/reducers/compose.ts
@@ -1,11 +1,12 @@
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { isNativeEmoji } from 'soapbox/features/emoji';
-import { Account } from 'soapbox/schemas';
-import { tagHistory } from 'soapbox/settings';
-import { PLEROMA } from 'soapbox/utils/features';
-import { hasIntegerMediaIds } from 'soapbox/utils/status';
+import { isNativeEmoji } from 'soapbox/features/emoji/index.ts';
+import { Account } from 'soapbox/schemas/index.ts';
+import { tagHistory } from 'soapbox/settings.ts';
+import { PLEROMA } from 'soapbox/utils/features.ts';
+import { hasIntegerMediaIds } from 'soapbox/utils/status.ts';
 
+import { COMPOSE_SET_STATUS } from '../actions/compose-status.ts';
 import {
   COMPOSE_CHANGE,
   COMPOSE_REPLY,
@@ -53,16 +54,15 @@ import {
   COMPOSE_SET_GROUP_TIMELINE_VISIBLE,
   ComposeAction,
   COMPOSE_CHANGE_MEDIA_ORDER,
-} from '../actions/compose';
-import { COMPOSE_SET_STATUS } from '../actions/compose-status';
-import { EVENT_COMPOSE_CANCEL, EVENT_FORM_SET, type EventsAction } from '../actions/events';
-import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS, MeAction } from '../actions/me';
-import { SETTING_CHANGE, FE_NAME, SettingsAction } from '../actions/settings';
-import { TIMELINE_DELETE, TimelineAction } from '../actions/timelines';
-import { normalizeAttachment } from '../normalizers/attachment';
-import { unescapeHTML } from '../utils/html';
+} from '../actions/compose.ts';
+import { EVENT_COMPOSE_CANCEL, EVENT_FORM_SET, type EventsAction } from '../actions/events.ts';
+import { ME_FETCH_SUCCESS, ME_PATCH_SUCCESS, MeAction } from '../actions/me.ts';
+import { SETTING_CHANGE, FE_NAME, SettingsAction } from '../actions/settings.ts';
+import { TIMELINE_DELETE, TimelineAction } from '../actions/timelines.ts';
+import { normalizeAttachment } from '../normalizers/attachment.ts';
+import { unescapeHTML } from '../utils/html.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
 import type {
   APIEntity,
   Attachment as AttachmentEntity,
diff --git a/src/reducers/contexts.test.ts b/src/reducers/contexts.test.ts
index 0ca652784..01134e9ed 100644
--- a/src/reducers/contexts.test.ts
+++ b/src/reducers/contexts.test.ts
@@ -4,13 +4,14 @@ import {
   fromJS,
   is,
 } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { STATUS_IMPORT } from 'soapbox/actions/importer';
-import { CONTEXT_FETCH_SUCCESS } from 'soapbox/actions/statuses';
-import { TIMELINE_DELETE } from 'soapbox/actions/timelines';
-import { applyActions } from 'soapbox/jest/test-helpers';
+import { STATUS_IMPORT } from 'soapbox/actions/importer/index.ts';
+import { CONTEXT_FETCH_SUCCESS } from 'soapbox/actions/statuses.ts';
+import { TIMELINE_DELETE } from 'soapbox/actions/timelines.ts';
+import { applyActions } from 'soapbox/jest/test-helpers.tsx';
 
-import reducer, { ReducerRecord } from './contexts';
+import reducer, { ReducerRecord } from './contexts.ts';
 
 describe('contexts reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/contexts.ts b/src/reducers/contexts.ts
index 325813c11..c7d6f044a 100644
--- a/src/reducers/contexts.ts
+++ b/src/reducers/contexts.ts
@@ -4,21 +4,21 @@ import {
   OrderedSet as ImmutableOrderedSet,
 } from 'immutable';
 
-import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer';
+import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer/index.ts';
 
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts.ts';
 import {
   CONTEXT_FETCH_SUCCESS,
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
-} from '../actions/statuses';
-import { TIMELINE_DELETE } from '../actions/timelines';
+} from '../actions/statuses.ts';
+import { TIMELINE_DELETE } from '../actions/timelines.ts';
 
 import type { AnyAction } from 'redux';
-import type { Status } from 'soapbox/schemas';
+import type { Status } from 'soapbox/schemas/index.ts';
 
 export const ReducerRecord = ImmutableRecord({
   inReplyTos: ImmutableMap<string, string>(),
diff --git a/src/reducers/conversations.test.ts b/src/reducers/conversations.test.ts
index 1f2c09276..4a4b1c2f0 100644
--- a/src/reducers/conversations.test.ts
+++ b/src/reducers/conversations.test.ts
@@ -1,8 +1,9 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import * as actions from 'soapbox/actions/conversations';
+import * as actions from 'soapbox/actions/conversations.ts';
 
-import reducer from './conversations';
+import reducer from './conversations.ts';
 
 describe('conversations reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/conversations.ts b/src/reducers/conversations.ts
index 9a1ba07aa..fa70ea0e7 100644
--- a/src/reducers/conversations.ts
+++ b/src/reducers/conversations.ts
@@ -8,11 +8,11 @@ import {
   CONVERSATIONS_FETCH_FAIL,
   CONVERSATIONS_UPDATE,
   CONVERSATIONS_READ,
-} from '../actions/conversations';
-import { compareDate } from '../utils/comparators';
+} from '../actions/conversations.ts';
+import { compareDate } from '../utils/comparators.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ConversationRecord = ImmutableRecord({
   id: '',
diff --git a/src/reducers/custom-emojis.test.ts b/src/reducers/custom-emojis.test.ts
index f72df1bac..090c265fb 100644
--- a/src/reducers/custom-emojis.test.ts
+++ b/src/reducers/custom-emojis.test.ts
@@ -1,6 +1,7 @@
 import { List as ImmutableList } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './custom-emojis';
+import reducer from './custom-emojis.ts';
 
 describe('custom_emojis reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/custom-emojis.ts b/src/reducers/custom-emojis.ts
index e63348580..a3a57a7e3 100644
--- a/src/reducers/custom-emojis.ts
+++ b/src/reducers/custom-emojis.ts
@@ -1,13 +1,13 @@
 import { List as ImmutableList, Map as ImmutableMap, fromJS } from 'immutable';
 
-import { buildCustomEmojis } from 'soapbox/features/emoji';
-import emojiData from 'soapbox/features/emoji/data';
-import { addCustomToPool } from 'soapbox/features/emoji/search';
+import emojiData from 'soapbox/features/emoji/data.ts';
+import { buildCustomEmojis } from 'soapbox/features/emoji/index.ts';
+import { addCustomToPool } from 'soapbox/features/emoji/search.ts';
 
-import { CUSTOM_EMOJIS_FETCH_SUCCESS } from '../actions/custom-emojis';
+import { CUSTOM_EMOJIS_FETCH_SUCCESS } from '../actions/custom-emojis.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const initialState = ImmutableList<ImmutableMap<string, string>>();
 
diff --git a/src/reducers/domain-lists.test.ts b/src/reducers/domain-lists.test.ts
index e990d2d32..ea2f4781d 100644
--- a/src/reducers/domain-lists.test.ts
+++ b/src/reducers/domain-lists.test.ts
@@ -1,4 +1,6 @@
-import reducer from './domain-lists';
+import { describe, expect, it } from 'vitest';
+
+import reducer from './domain-lists.ts';
 
 describe('domain_lists reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/domain-lists.ts b/src/reducers/domain-lists.ts
index 30f55aaf8..9788c5b7f 100644
--- a/src/reducers/domain-lists.ts
+++ b/src/reducers/domain-lists.ts
@@ -4,7 +4,7 @@ import {
   DOMAIN_BLOCKS_FETCH_SUCCESS,
   DOMAIN_BLOCKS_EXPAND_SUCCESS,
   DOMAIN_UNBLOCK_SUCCESS,
-} from '../actions/domain-blocks';
+} from '../actions/domain-blocks.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/dropdown-menu.test.ts b/src/reducers/dropdown-menu.test.ts
index 0706edf20..4b3beb116 100644
--- a/src/reducers/dropdown-menu.test.ts
+++ b/src/reducers/dropdown-menu.test.ts
@@ -1,4 +1,6 @@
-import reducer from './dropdown-menu';
+import { describe, expect, it } from 'vitest';
+
+import reducer from './dropdown-menu.ts';
 
 describe('dropdown_menu reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/dropdown-menu.ts b/src/reducers/dropdown-menu.ts
index 991e09e0e..5cd10e392 100644
--- a/src/reducers/dropdown-menu.ts
+++ b/src/reducers/dropdown-menu.ts
@@ -3,7 +3,7 @@ import { Record as ImmutableRecord } from 'immutable';
 import {
   DROPDOWN_MENU_OPEN,
   DROPDOWN_MENU_CLOSE,
-} from '../actions/dropdown-menu';
+} from '../actions/dropdown-menu.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/filters.test.ts b/src/reducers/filters.test.ts
index 492eff94a..c78eb4a51 100644
--- a/src/reducers/filters.test.ts
+++ b/src/reducers/filters.test.ts
@@ -1,6 +1,7 @@
 import { List as ImmutableList } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './filters';
+import reducer from './filters.ts';
 
 describe('filters reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/filters.ts b/src/reducers/filters.ts
index 8520b57a4..9a9c650aa 100644
--- a/src/reducers/filters.ts
+++ b/src/reducers/filters.ts
@@ -1,11 +1,11 @@
 import { List as ImmutableList } from 'immutable';
 
-import { normalizeFilter } from 'soapbox/normalizers';
+import { normalizeFilter } from 'soapbox/normalizers/index.ts';
 
-import { FILTERS_FETCH_SUCCESS } from '../actions/filters';
+import { FILTERS_FETCH_SUCCESS } from '../actions/filters.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Filter as FilterEntity } from 'soapbox/types/entities';
+import type { APIEntity, Filter as FilterEntity } from 'soapbox/types/entities.ts';
 
 type State = ImmutableList<FilterEntity>;
 
diff --git a/src/reducers/followed-tags.ts b/src/reducers/followed-tags.ts
index 4f30a3f3a..c9b909b87 100644
--- a/src/reducers/followed-tags.ts
+++ b/src/reducers/followed-tags.ts
@@ -7,11 +7,11 @@ import {
   FOLLOWED_HASHTAGS_EXPAND_REQUEST,
   FOLLOWED_HASHTAGS_EXPAND_SUCCESS,
   FOLLOWED_HASHTAGS_EXPAND_FAIL,
-} from 'soapbox/actions/tags';
-import { normalizeTag } from 'soapbox/normalizers';
+} from 'soapbox/actions/tags.ts';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Tag } from 'soapbox/types/entities';
+import type { APIEntity, Tag } from 'soapbox/types/entities.ts';
 
 const ReducerRecord = ImmutableRecord({
   items: ImmutableList<Tag>(),
diff --git a/src/reducers/group-memberships.ts b/src/reducers/group-memberships.ts
index ed890abe7..074740f25 100644
--- a/src/reducers/group-memberships.ts
+++ b/src/reducers/group-memberships.ts
@@ -12,10 +12,10 @@ import {
   GROUP_DEMOTE_SUCCESS,
   GROUP_KICK_SUCCESS,
   GROUP_BLOCK_SUCCESS,
-} from 'soapbox/actions/groups';
+} from 'soapbox/actions/groups.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ListRecord = ImmutableRecord({
   next: null as string | null,
diff --git a/src/reducers/group-relationships.ts b/src/reducers/group-relationships.ts
index eb61ae953..3e0c2066a 100644
--- a/src/reducers/group-relationships.ts
+++ b/src/reducers/group-relationships.ts
@@ -5,11 +5,11 @@ import {
   GROUP_UPDATE_SUCCESS,
   GROUP_DELETE_SUCCESS,
   GROUP_RELATIONSHIPS_FETCH_SUCCESS,
-} from 'soapbox/actions/groups';
-import { normalizeGroupRelationship } from 'soapbox/normalizers';
+} from 'soapbox/actions/groups.ts';
+import { normalizeGroupRelationship } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type GroupRelationshipRecord = ReturnType<typeof normalizeGroupRelationship>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/groups.ts b/src/reducers/groups.ts
index c7b6a1d28..cdadd9fff 100644
--- a/src/reducers/groups.ts
+++ b/src/reducers/groups.ts
@@ -1,11 +1,11 @@
 import { Map as ImmutableMap, Record as ImmutableRecord } from 'immutable';
 
-import { GROUP_FETCH_FAIL, GROUP_DELETE_SUCCESS, GROUP_FETCH_REQUEST } from 'soapbox/actions/groups';
-import { GROUPS_IMPORT } from 'soapbox/actions/importer';
-import { normalizeGroup } from 'soapbox/normalizers';
+import { GROUP_FETCH_FAIL, GROUP_DELETE_SUCCESS, GROUP_FETCH_REQUEST } from 'soapbox/actions/groups.ts';
+import { GROUPS_IMPORT } from 'soapbox/actions/importer/index.ts';
+import { normalizeGroup } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type GroupRecord = ReturnType<typeof normalizeGroup>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/history.ts b/src/reducers/history.ts
index 855d5fd92..f55142303 100644
--- a/src/reducers/history.ts
+++ b/src/reducers/history.ts
@@ -1,7 +1,7 @@
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord } from 'immutable';
 
-import { HISTORY_FETCH_REQUEST, HISTORY_FETCH_SUCCESS, HISTORY_FETCH_FAIL } from 'soapbox/actions/history';
-import { normalizeStatusEdit } from 'soapbox/normalizers';
+import { HISTORY_FETCH_REQUEST, HISTORY_FETCH_SUCCESS, HISTORY_FETCH_FAIL } from 'soapbox/actions/history.ts';
+import { normalizeStatusEdit } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/index.test.ts b/src/reducers/index.test.ts
index a3b1cf2ea..67ca52c7e 100644
--- a/src/reducers/index.test.ts
+++ b/src/reducers/index.test.ts
@@ -1,6 +1,7 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import reducer from '.';
+import reducer from './index.ts';
 
 describe('root reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/index.ts b/src/reducers/index.ts
index 2f5d286e6..e39c98910 100644
--- a/src/reducers/index.ts
+++ b/src/reducers/index.ts
@@ -1,60 +1,60 @@
 import { combineReducers } from '@reduxjs/toolkit';
 
-import entities from 'soapbox/entity-store/reducer';
+import entities from 'soapbox/entity-store/reducer.ts';
 
-import accounts_meta from './accounts-meta';
-import admin from './admin';
-import aliases from './aliases';
-import auth from './auth';
-import backups from './backups';
-import chat_message_lists from './chat-message-lists';
-import chat_messages from './chat-messages';
-import chats from './chats';
-import compose from './compose';
-import compose_event from './compose-event';
-import contexts from './contexts';
-import conversations from './conversations';
-import custom_emojis from './custom-emojis';
-import domain_lists from './domain-lists';
-import dropdown_menu from './dropdown-menu';
-import filters from './filters';
-import followed_tags from './followed-tags';
-import group_memberships from './group-memberships';
-import group_relationships from './group-relationships';
-import groups from './groups';
-import history from './history';
-import instance from './instance';
-import listAdder from './list-adder';
-import listEditor from './list-editor';
-import lists from './lists';
-import locations from './locations';
-import me from './me';
-import meta from './meta';
-import modals from './modals';
-import mutes from './mutes';
-import notifications from './notifications';
-import onboarding from './onboarding';
-import patron from './patron';
-import pending_statuses from './pending-statuses';
-import polls from './polls';
-import profile_hover_card from './profile-hover-card';
-import relationships from './relationships';
-import reports from './reports';
-import scheduled_statuses from './scheduled-statuses';
-import search from './search';
-import security from './security';
-import settings from './settings';
-import sidebar from './sidebar';
-import soapbox from './soapbox';
-import status_hover_card from './status-hover-card';
-import status_lists from './status-lists';
-import statuses from './statuses';
-import suggestions from './suggestions';
-import tags from './tags';
-import timelines from './timelines';
-import trending_statuses from './trending-statuses';
-import trends from './trends';
-import user_lists from './user-lists';
+import accounts_meta from './accounts-meta.ts';
+import admin from './admin.ts';
+import aliases from './aliases.ts';
+import auth from './auth.ts';
+import backups from './backups.ts';
+import chat_message_lists from './chat-message-lists.ts';
+import chat_messages from './chat-messages.ts';
+import chats from './chats.ts';
+import compose_event from './compose-event.ts';
+import compose from './compose.ts';
+import contexts from './contexts.ts';
+import conversations from './conversations.ts';
+import custom_emojis from './custom-emojis.ts';
+import domain_lists from './domain-lists.ts';
+import dropdown_menu from './dropdown-menu.ts';
+import filters from './filters.ts';
+import followed_tags from './followed-tags.ts';
+import group_memberships from './group-memberships.ts';
+import group_relationships from './group-relationships.ts';
+import groups from './groups.ts';
+import history from './history.ts';
+import instance from './instance.ts';
+import listAdder from './list-adder.ts';
+import listEditor from './list-editor.ts';
+import lists from './lists.ts';
+import locations from './locations.ts';
+import me from './me.ts';
+import meta from './meta.ts';
+import modals from './modals.ts';
+import mutes from './mutes.ts';
+import notifications from './notifications.ts';
+import onboarding from './onboarding.ts';
+import patron from './patron.ts';
+import pending_statuses from './pending-statuses.ts';
+import polls from './polls.ts';
+import profile_hover_card from './profile-hover-card.ts';
+import relationships from './relationships.ts';
+import reports from './reports.ts';
+import scheduled_statuses from './scheduled-statuses.ts';
+import search from './search.ts';
+import security from './security.ts';
+import settings from './settings.ts';
+import sidebar from './sidebar.ts';
+import soapbox from './soapbox.ts';
+import status_hover_card from './status-hover-card.ts';
+import status_lists from './status-lists.ts';
+import statuses from './statuses.ts';
+import suggestions from './suggestions.ts';
+import tags from './tags.ts';
+import timelines from './timelines.ts';
+import trending_statuses from './trending-statuses.ts';
+import trends from './trends.ts';
+import user_lists from './user-lists.ts';
 
 export default combineReducers({
   accounts_meta,
diff --git a/src/reducers/instance.test.ts b/src/reducers/instance.test.ts
index 1f89d8c52..7765831cc 100644
--- a/src/reducers/instance.test.ts
+++ b/src/reducers/instance.test.ts
@@ -1,6 +1,8 @@
-import { ADMIN_CONFIG_UPDATE_REQUEST } from 'soapbox/actions/admin';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './instance';
+import { ADMIN_CONFIG_UPDATE_REQUEST } from 'soapbox/actions/admin.ts';
+
+import reducer from './instance.ts';
 
 describe('instance reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/instance.ts b/src/reducers/instance.ts
index ad16cbfe8..65cf299bd 100644
--- a/src/reducers/instance.ts
+++ b/src/reducers/instance.ts
@@ -1,11 +1,11 @@
 import { produce } from 'immer';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 
-import { ADMIN_CONFIG_UPDATE_REQUEST, ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
-import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance';
-import { ConfigDB } from 'soapbox/utils/config-db';
+import { ADMIN_CONFIG_UPDATE_REQUEST, ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin.ts';
+import { InstanceV2, instanceV2Schema } from 'soapbox/schemas/instance.ts';
+import { ConfigDB } from 'soapbox/utils/config-db.ts';
 
-import { fetchInstanceV2 } from '../actions/instance';
+import { fetchInstanceV2 } from '../actions/instance.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/list-adder.test.ts b/src/reducers/list-adder.test.ts
index 1c2153def..2fb15b090 100644
--- a/src/reducers/list-adder.test.ts
+++ b/src/reducers/list-adder.test.ts
@@ -1,8 +1,9 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import * as actions from 'soapbox/actions/lists';
+import * as actions from 'soapbox/actions/lists.ts';
 
-import reducer from './list-adder';
+import reducer from './list-adder.ts';
 
 describe('list_adder reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/list-adder.ts b/src/reducers/list-adder.ts
index 81e9bd644..fe822a5eb 100644
--- a/src/reducers/list-adder.ts
+++ b/src/reducers/list-adder.ts
@@ -8,7 +8,7 @@ import {
   LIST_ADDER_LISTS_FETCH_FAIL,
   LIST_EDITOR_ADD_SUCCESS,
   LIST_EDITOR_REMOVE_SUCCESS,
-} from '../actions/lists';
+} from '../actions/lists.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/list-editor.ts b/src/reducers/list-editor.ts
index 8c0ef8e11..0c7e39f35 100644
--- a/src/reducers/list-editor.ts
+++ b/src/reducers/list-editor.ts
@@ -18,7 +18,7 @@ import {
   LIST_EDITOR_SUGGESTIONS_CHANGE,
   LIST_EDITOR_ADD_SUCCESS,
   LIST_EDITOR_REMOVE_SUCCESS,
-} from '../actions/lists';
+} from '../actions/lists.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/lists.test.ts b/src/reducers/lists.test.ts
index 911d4f3a9..01def7319 100644
--- a/src/reducers/lists.test.ts
+++ b/src/reducers/lists.test.ts
@@ -1,6 +1,7 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './lists';
+import reducer from './lists.ts';
 
 describe('lists reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/lists.ts b/src/reducers/lists.ts
index ffc611f17..d3061c46f 100644
--- a/src/reducers/lists.ts
+++ b/src/reducers/lists.ts
@@ -7,11 +7,11 @@ import {
   LIST_CREATE_SUCCESS,
   LIST_UPDATE_SUCCESS,
   LIST_DELETE_SUCCESS,
-} from 'soapbox/actions/lists';
-import { normalizeList } from 'soapbox/normalizers';
+} from 'soapbox/actions/lists.ts';
+import { normalizeList } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type ListRecord = ReturnType<typeof normalizeList>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/locations.ts b/src/reducers/locations.ts
index abfe363df..8fab997ac 100644
--- a/src/reducers/locations.ts
+++ b/src/reducers/locations.ts
@@ -1,10 +1,10 @@
 import { Map as ImmutableMap } from 'immutable';
 import { AnyAction } from 'redux';
 
-import { LOCATION_SEARCH_SUCCESS } from 'soapbox/actions/events';
-import { normalizeLocation } from 'soapbox/normalizers/location';
+import { LOCATION_SEARCH_SUCCESS } from 'soapbox/actions/events.ts';
+import { normalizeLocation } from 'soapbox/normalizers/location.ts';
 
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type LocationRecord = ReturnType<typeof normalizeLocation>;
 type State = ImmutableMap<any, LocationRecord>;
diff --git a/src/reducers/me.test.ts b/src/reducers/me.test.ts
index 753171d11..b216f3379 100644
--- a/src/reducers/me.test.ts
+++ b/src/reducers/me.test.ts
@@ -1,4 +1,6 @@
-import reducer from './me';
+import { describe, expect, it } from 'vitest';
+
+import reducer from './me.ts';
 
 describe('me reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/me.ts b/src/reducers/me.ts
index 4bb9b0ef2..d9e5ccf82 100644
--- a/src/reducers/me.ts
+++ b/src/reducers/me.ts
@@ -2,17 +2,17 @@ import {
   AUTH_LOGGED_OUT,
   AUTH_ACCOUNT_REMEMBER_SUCCESS,
   VERIFY_CREDENTIALS_SUCCESS,
-} from '../actions/auth';
+} from '../actions/auth.ts';
 import {
   ME_FETCH_SUCCESS,
   ME_FETCH_FAIL,
   ME_FETCH_SKIP,
   ME_PATCH_SUCCESS,
-} from '../actions/me';
+} from '../actions/me.ts';
 
 import type { AxiosError } from 'axios';
 import type { AnyAction } from 'redux';
-import type { Me } from 'soapbox/types/soapbox';
+import type { Me } from 'soapbox/types/soapbox.ts';
 
 const initialState: Me = null;
 
diff --git a/src/reducers/meta.test.ts b/src/reducers/meta.test.ts
index eccf37ffc..6545956c4 100644
--- a/src/reducers/meta.test.ts
+++ b/src/reducers/meta.test.ts
@@ -1,8 +1,9 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { SW_UPDATING, setSwUpdating } from 'soapbox/actions/sw';
+import { SW_UPDATING, setSwUpdating } from 'soapbox/actions/sw.ts';
 
-import reducer from './meta';
+import reducer from './meta.ts';
 
 describe('meta reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/meta.ts b/src/reducers/meta.ts
index a89f5f323..e832d204f 100644
--- a/src/reducers/meta.ts
+++ b/src/reducers/meta.ts
@@ -1,8 +1,8 @@
 import { Record as ImmutableRecord } from 'immutable';
 
-import { fetchInstance } from 'soapbox/actions/instance';
-import { NOSTR_PUBKEY_SET } from 'soapbox/actions/nostr';
-import { SW_UPDATING } from 'soapbox/actions/sw';
+import { fetchInstance } from 'soapbox/actions/instance.ts';
+import { NOSTR_PUBKEY_SET } from 'soapbox/actions/nostr.ts';
+import { SW_UPDATING } from 'soapbox/actions/sw.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/modals.test.ts b/src/reducers/modals.test.ts
index e9e05427b..3324eebb1 100644
--- a/src/reducers/modals.test.ts
+++ b/src/reducers/modals.test.ts
@@ -1,8 +1,9 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { MODAL_OPEN, MODAL_CLOSE } from 'soapbox/actions/modals';
+import { MODAL_OPEN, MODAL_CLOSE } from 'soapbox/actions/modals.ts';
 
-import reducer from './modals';
+import reducer from './modals.ts';
 
 describe('modal reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/modals.ts b/src/reducers/modals.ts
index 829cbabe9..8707cc019 100644
--- a/src/reducers/modals.ts
+++ b/src/reducers/modals.ts
@@ -1,6 +1,6 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 
-import { MODAL_OPEN, MODAL_CLOSE } from '../actions/modals';
+import { MODAL_OPEN, MODAL_CLOSE } from '../actions/modals.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/mutes.test.ts b/src/reducers/mutes.test.ts
index 988c3dcdf..5813caec4 100644
--- a/src/reducers/mutes.test.ts
+++ b/src/reducers/mutes.test.ts
@@ -1,11 +1,12 @@
 import { Record as ImmutableRecord } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
 import {
   MUTES_INIT_MODAL,
   MUTES_TOGGLE_HIDE_NOTIFICATIONS,
-} from 'soapbox/actions/mutes';
+} from 'soapbox/actions/mutes.ts';
 
-import reducer from './mutes';
+import reducer from './mutes.ts';
 
 describe('mutes reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/mutes.ts b/src/reducers/mutes.ts
index 0034a6c56..bb7a88aab 100644
--- a/src/reducers/mutes.ts
+++ b/src/reducers/mutes.ts
@@ -4,7 +4,7 @@ import {
   MUTES_INIT_MODAL,
   MUTES_TOGGLE_HIDE_NOTIFICATIONS,
   MUTES_CHANGE_DURATION,
-} from '../actions/mutes';
+} from '../actions/mutes.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/notifications.ts b/src/reducers/notifications.ts
index f2147b2cf..71aac86d6 100644
--- a/src/reducers/notifications.ts
+++ b/src/reducers/notifications.ts
@@ -5,20 +5,20 @@ import {
   fromJS,
 } from 'immutable';
 
-import { normalizeNotification } from 'soapbox/normalizers/notification';
-import { validType } from 'soapbox/utils/notification';
+import { normalizeNotification } from 'soapbox/normalizers/notification.ts';
+import { validType } from 'soapbox/utils/notification.ts';
 
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
   FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
   FOLLOW_REQUEST_REJECT_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts.ts';
 import {
   MARKER_FETCH_SUCCESS,
   MARKER_SAVE_REQUEST,
   MARKER_SAVE_SUCCESS,
-} from '../actions/markers';
+} from '../actions/markers.ts';
 import {
   NOTIFICATIONS_UPDATE,
   NOTIFICATIONS_EXPAND_SUCCESS,
@@ -31,11 +31,11 @@ import {
   NOTIFICATIONS_DEQUEUE,
   NOTIFICATIONS_MARK_READ_REQUEST,
   MAX_QUEUED_NOTIFICATIONS,
-} from '../actions/notifications';
-import { TIMELINE_DELETE } from '../actions/timelines';
+} from '../actions/notifications.ts';
+import { TIMELINE_DELETE } from '../actions/timelines.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const QueuedNotificationRecord = ImmutableRecord({
   notification: {} as APIEntity,
diff --git a/src/reducers/onboarding.test.ts b/src/reducers/onboarding.test.ts
index ad157a868..e6372dae2 100644
--- a/src/reducers/onboarding.test.ts
+++ b/src/reducers/onboarding.test.ts
@@ -1,6 +1,8 @@
-import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './onboarding';
+import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding.ts';
+
+import reducer from './onboarding.ts';
 
 describe('onboarding reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/onboarding.ts b/src/reducers/onboarding.ts
index 2ef3503c6..5092d53cd 100644
--- a/src/reducers/onboarding.ts
+++ b/src/reducers/onboarding.ts
@@ -1,6 +1,6 @@
-import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding';
+import { ONBOARDING_START, ONBOARDING_END } from 'soapbox/actions/onboarding.ts';
 
-import type { OnboardingActions } from 'soapbox/actions/onboarding';
+import type { OnboardingActions } from 'soapbox/actions/onboarding.ts';
 
 type OnboardingState = {
   needsOnboarding: boolean;
diff --git a/src/reducers/patron.ts b/src/reducers/patron.ts
index 05a14abb9..9971687de 100644
--- a/src/reducers/patron.ts
+++ b/src/reducers/patron.ts
@@ -8,7 +8,7 @@ import {
 import {
   PATRON_INSTANCE_FETCH_SUCCESS,
   PATRON_ACCOUNT_FETCH_SUCCESS,
-} from '../actions/patron';
+} from '../actions/patron.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/pending-statuses.ts b/src/reducers/pending-statuses.ts
index 51c4c1aba..3400d0b5d 100644
--- a/src/reducers/pending-statuses.ts
+++ b/src/reducers/pending-statuses.ts
@@ -3,10 +3,10 @@ import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord,
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
-} from 'soapbox/actions/statuses';
+} from 'soapbox/actions/statuses.ts';
 
 import type { AnyAction } from 'redux';
-import type { StatusVisibility } from 'soapbox/normalizers/status';
+import type { StatusVisibility } from 'soapbox/normalizers/status.ts';
 
 const PendingStatusRecord = ImmutableRecord({
   content_type: '',
diff --git a/src/reducers/polls.test.ts b/src/reducers/polls.test.ts
index 4ff9a555a..1d03a4cb9 100644
--- a/src/reducers/polls.test.ts
+++ b/src/reducers/polls.test.ts
@@ -1,8 +1,9 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { POLLS_IMPORT } from 'soapbox/actions/importer';
+import { POLLS_IMPORT } from 'soapbox/actions/importer/index.ts';
 
-import reducer from './polls';
+import reducer from './polls.ts';
 
 describe('polls reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/polls.ts b/src/reducers/polls.ts
index 37e6ad2d2..58f6ed1f1 100644
--- a/src/reducers/polls.ts
+++ b/src/reducers/polls.ts
@@ -1,10 +1,10 @@
 import { Map as ImmutableMap } from 'immutable';
 
-import { POLLS_IMPORT } from 'soapbox/actions/importer';
-import { normalizeStatus } from 'soapbox/normalizers/status';
+import { POLLS_IMPORT } from 'soapbox/actions/importer/index.ts';
+import { normalizeStatus } from 'soapbox/normalizers/status.ts';
 
 import type { AnyAction } from 'redux';
-import type { Poll, APIEntity, EmbeddedEntity } from 'soapbox/types/entities';
+import type { Poll, APIEntity, EmbeddedEntity } from 'soapbox/types/entities.ts';
 
 type State = ImmutableMap<string, Poll>;
 
diff --git a/src/reducers/profile-hover-card.ts b/src/reducers/profile-hover-card.ts
index f662a3b99..f6e6f5a7e 100644
--- a/src/reducers/profile-hover-card.ts
+++ b/src/reducers/profile-hover-card.ts
@@ -4,7 +4,7 @@ import {
   PROFILE_HOVER_CARD_OPEN,
   PROFILE_HOVER_CARD_CLOSE,
   PROFILE_HOVER_CARD_UPDATE,
-} from 'soapbox/actions/profile-hover-card';
+} from 'soapbox/actions/profile-hover-card.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/relationships.test.ts b/src/reducers/relationships.test.ts
index 28b269ede..e5c9d5736 100644
--- a/src/reducers/relationships.test.ts
+++ b/src/reducers/relationships.test.ts
@@ -1,9 +1,10 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
 import lain from 'soapbox/__fixtures__/lain.json';
-import { ACCOUNT_IMPORT } from 'soapbox/actions/importer';
+import { ACCOUNT_IMPORT } from 'soapbox/actions/importer/index.ts';
 
-import reducer from './relationships';
+import reducer from './relationships.ts';
 
 describe('relationships reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/relationships.ts b/src/reducers/relationships.ts
index 259885426..a5c322324 100644
--- a/src/reducers/relationships.ts
+++ b/src/reducers/relationships.ts
@@ -1,9 +1,9 @@
 import { Map as ImmutableMap } from 'immutable';
 import get from 'lodash/get';
 
-import { type Relationship, relationshipSchema } from 'soapbox/schemas';
+import { type Relationship, relationshipSchema } from 'soapbox/schemas/index.ts';
 
-import { ACCOUNT_NOTE_SUBMIT_SUCCESS } from '../actions/account-notes';
+import { ACCOUNT_NOTE_SUBMIT_SUCCESS } from '../actions/account-notes.ts';
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_UNBLOCK_SUCCESS,
@@ -15,18 +15,18 @@ import {
   ACCOUNT_UNPIN_SUCCESS,
   ACCOUNT_REMOVE_FROM_FOLLOWERS_SUCCESS,
   RELATIONSHIPS_FETCH_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts.ts';
 import {
   DOMAIN_BLOCK_SUCCESS,
   DOMAIN_UNBLOCK_SUCCESS,
-} from '../actions/domain-blocks';
+} from '../actions/domain-blocks.ts';
 import {
   ACCOUNT_IMPORT,
   ACCOUNTS_IMPORT,
-} from '../actions/importer';
+} from '../actions/importer/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type State = ImmutableMap<string, Relationship>;
 type APIEntities = Array<APIEntity>;
diff --git a/src/reducers/reports.test.ts b/src/reducers/reports.test.ts
index 8045bbc8a..4fbffe878 100644
--- a/src/reducers/reports.test.ts
+++ b/src/reducers/reports.test.ts
@@ -1,4 +1,6 @@
-import reducer from './reports';
+import { describe, expect, it } from 'vitest';
+
+import reducer from './reports.ts';
 
 describe('reports reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/reports.ts b/src/reducers/reports.ts
index 5c355a266..7bc32938f 100644
--- a/src/reducers/reports.ts
+++ b/src/reducers/reports.ts
@@ -12,10 +12,10 @@ import {
   REPORT_BLOCK_CHANGE,
   REPORT_RULE_CHANGE,
   ReportableEntities,
-} from '../actions/reports';
+} from '../actions/reports.ts';
 
 import type { AnyAction } from 'redux';
-import type { ChatMessage, Group } from 'soapbox/types/entities';
+import type { ChatMessage, Group } from 'soapbox/types/entities.ts';
 
 const NewReportRecord = ImmutableRecord({
   isSubmitting: false,
diff --git a/src/reducers/scheduled-statuses.ts b/src/reducers/scheduled-statuses.ts
index edcc86337..1f6fe4cfb 100644
--- a/src/reducers/scheduled-statuses.ts
+++ b/src/reducers/scheduled-statuses.ts
@@ -1,16 +1,16 @@
 import { List as ImmutableList, Map as ImmutableMap, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer';
+import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer/index.ts';
 import {
   SCHEDULED_STATUSES_FETCH_SUCCESS,
   SCHEDULED_STATUS_CANCEL_REQUEST,
   SCHEDULED_STATUS_CANCEL_SUCCESS,
-} from 'soapbox/actions/scheduled-statuses';
-import { STATUS_CREATE_SUCCESS } from 'soapbox/actions/statuses';
+} from 'soapbox/actions/scheduled-statuses.ts';
+import { STATUS_CREATE_SUCCESS } from 'soapbox/actions/statuses.ts';
 
 import type { AnyAction } from 'redux';
-import type { StatusVisibility } from 'soapbox/normalizers/status';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { StatusVisibility } from 'soapbox/normalizers/status.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ScheduledStatusRecord = ImmutableRecord({
   id: '',
diff --git a/src/reducers/search.ts b/src/reducers/search.ts
index 06869cd89..47e81b2aa 100644
--- a/src/reducers/search.ts
+++ b/src/reducers/search.ts
@@ -1,13 +1,13 @@
 import { OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
 
-import { normalizeTag } from 'soapbox/normalizers';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import {
   COMPOSE_MENTION,
   COMPOSE_REPLY,
   COMPOSE_DIRECT,
   COMPOSE_QUOTE,
-} from '../actions/compose';
+} from '../actions/compose.ts';
 import {
   SEARCH_CHANGE,
   SEARCH_CLEAR,
@@ -19,10 +19,10 @@ import {
   SEARCH_EXPAND_SUCCESS,
   SEARCH_ACCOUNT_SET,
   SEARCH_RESULTS_CLEAR,
-} from '../actions/search';
+} from '../actions/search.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Tag } from 'soapbox/types/entities';
+import type { APIEntity, Tag } from 'soapbox/types/entities.ts';
 
 const ResultsRecord = ImmutableRecord({
   accounts: ImmutableOrderedSet<string>(),
diff --git a/src/reducers/security.ts b/src/reducers/security.ts
index ecc76f982..3278d86cc 100644
--- a/src/reducers/security.ts
+++ b/src/reducers/security.ts
@@ -4,11 +4,11 @@ import {
   MFA_FETCH_SUCCESS,
   MFA_CONFIRM_SUCCESS,
   MFA_DISABLE_SUCCESS,
-} from '../actions/mfa';
+} from '../actions/mfa.ts';
 import {
   FETCH_TOKENS_SUCCESS,
   REVOKE_TOKEN_SUCCESS,
-} from '../actions/security';
+} from '../actions/security.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/settings.test.ts b/src/reducers/settings.test.ts
index 1623a9a96..f30595b3c 100644
--- a/src/reducers/settings.test.ts
+++ b/src/reducers/settings.test.ts
@@ -1,6 +1,7 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './settings';
+import reducer from './settings.ts';
 
 describe('settings reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/settings.ts b/src/reducers/settings.ts
index e7946ca37..a3b5f324c 100644
--- a/src/reducers/settings.ts
+++ b/src/reducers/settings.ts
@@ -1,20 +1,20 @@
 import { Map as ImmutableMap, fromJS } from 'immutable';
 import { AnyAction } from 'redux';
 
-import { ME_FETCH_SUCCESS } from 'soapbox/actions/me';
+import { ME_FETCH_SUCCESS } from 'soapbox/actions/me.ts';
 
-import { EMOJI_CHOOSE } from '../actions/emojis';
-import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications';
-import { SEARCH_FILTER_SET } from '../actions/search';
+import { EMOJI_CHOOSE } from '../actions/emojis.ts';
+import { NOTIFICATIONS_FILTER_SET } from '../actions/notifications.ts';
+import { SEARCH_FILTER_SET } from '../actions/search.ts';
 import {
   SETTING_CHANGE,
   SETTING_SAVE,
   SETTINGS_UPDATE,
   FE_NAME,
-} from '../actions/settings';
+} from '../actions/settings.ts';
 
-import type { Emoji } from 'soapbox/features/emoji';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { Emoji } from 'soapbox/features/emoji/index.ts';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 type State = ImmutableMap<string, any>;
 
diff --git a/src/reducers/sidebar.test.ts b/src/reducers/sidebar.test.ts
index b9bd1274a..ae77587d1 100644
--- a/src/reducers/sidebar.test.ts
+++ b/src/reducers/sidebar.test.ts
@@ -1,4 +1,6 @@
-import reducer from './sidebar';
+import { describe, expect, it } from 'vitest';
+
+import reducer from './sidebar.ts';
 
 describe('sidebar reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/sidebar.ts b/src/reducers/sidebar.ts
index 8761a72fc..0b5725c1a 100644
--- a/src/reducers/sidebar.ts
+++ b/src/reducers/sidebar.ts
@@ -1,4 +1,4 @@
-import { SIDEBAR_OPEN, SIDEBAR_CLOSE } from '../actions/sidebar';
+import { SIDEBAR_OPEN, SIDEBAR_CLOSE } from '../actions/sidebar.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/soapbox.test.ts b/src/reducers/soapbox.test.ts
index 60e5ec5cc..c3fb47c0e 100644
--- a/src/reducers/soapbox.test.ts
+++ b/src/reducers/soapbox.test.ts
@@ -1,11 +1,12 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
 import soapboxConfig from 'soapbox/__fixtures__/admin_api_frontend_config.json';
 import soapbox from 'soapbox/__fixtures__/soapbox.json';
-import { ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
-import * as actions from 'soapbox/actions/soapbox';
+import { ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin.ts';
+import * as actions from 'soapbox/actions/soapbox.ts';
 
-import reducer from './soapbox';
+import reducer from './soapbox.ts';
 
 describe('soapbox reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/soapbox.ts b/src/reducers/soapbox.ts
index d44b562a3..a8ba53d2b 100644
--- a/src/reducers/soapbox.ts
+++ b/src/reducers/soapbox.ts
@@ -1,15 +1,15 @@
 import { List as ImmutableList, Map as ImmutableMap, fromJS } from 'immutable';
 
-import { PLEROMA_PRELOAD_IMPORT } from 'soapbox/actions/preload';
-import KVStore from 'soapbox/storage/kv-store';
-import { ConfigDB } from 'soapbox/utils/config-db';
+import { PLEROMA_PRELOAD_IMPORT } from 'soapbox/actions/preload.ts';
+import KVStore from 'soapbox/storage/kv-store.ts';
+import { ConfigDB } from 'soapbox/utils/config-db.ts';
 
-import { ADMIN_CONFIG_UPDATE_SUCCESS } from '../actions/admin';
+import { ADMIN_CONFIG_UPDATE_SUCCESS } from '../actions/admin.ts';
 import {
   SOAPBOX_CONFIG_REMEMBER_SUCCESS,
   SOAPBOX_CONFIG_REQUEST_SUCCESS,
   SOAPBOX_CONFIG_REQUEST_FAIL,
-} from '../actions/soapbox';
+} from '../actions/soapbox.ts';
 
 const initialState = ImmutableMap<string, any>();
 
diff --git a/src/reducers/status-hover-card.test.tsx b/src/reducers/status-hover-card.test.tsx
index 5936ebcaa..929bb9571 100644
--- a/src/reducers/status-hover-card.test.tsx
+++ b/src/reducers/status-hover-card.test.tsx
@@ -1,10 +1,12 @@
+import { describe, expect, it } from 'vitest';
+
 import {
   STATUS_HOVER_CARD_OPEN,
   STATUS_HOVER_CARD_CLOSE,
   STATUS_HOVER_CARD_UPDATE,
-} from 'soapbox/actions/status-hover-card';
+} from 'soapbox/actions/status-hover-card.ts';
 
-import reducer, { ReducerRecord } from './status-hover-card';
+import reducer, { ReducerRecord } from './status-hover-card.ts';
 
 describe(STATUS_HOVER_CARD_OPEN, () => {
   it('sets the ref and statusId', () => {
diff --git a/src/reducers/status-hover-card.ts b/src/reducers/status-hover-card.ts
index 1d3d1da8d..e3d0914d5 100644
--- a/src/reducers/status-hover-card.ts
+++ b/src/reducers/status-hover-card.ts
@@ -4,7 +4,7 @@ import {
   STATUS_HOVER_CARD_OPEN,
   STATUS_HOVER_CARD_CLOSE,
   STATUS_HOVER_CARD_UPDATE,
-} from 'soapbox/actions/status-hover-card';
+} from 'soapbox/actions/status-hover-card.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/reducers/status-lists.test.ts b/src/reducers/status-lists.test.ts
index e87c42e76..b803bbf5d 100644
--- a/src/reducers/status-lists.test.ts
+++ b/src/reducers/status-lists.test.ts
@@ -1,4 +1,6 @@
-import reducer from './status-lists';
+import { describe, expect, it } from 'vitest';
+
+import reducer from './status-lists.ts';
 
 describe('status_lists reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/status-lists.ts b/src/reducers/status-lists.ts
index d8339296f..63494c9c5 100644
--- a/src/reducers/status-lists.ts
+++ b/src/reducers/status-lists.ts
@@ -11,8 +11,8 @@ import {
   STATUS_QUOTES_FETCH_FAIL,
   STATUS_QUOTES_FETCH_REQUEST,
   STATUS_QUOTES_FETCH_SUCCESS,
-} from 'soapbox/actions/status-quotes';
-import { STATUS_CREATE_SUCCESS } from 'soapbox/actions/statuses';
+} from 'soapbox/actions/status-quotes.ts';
+import { STATUS_CREATE_SUCCESS } from 'soapbox/actions/statuses.ts';
 
 import {
   BOOKMARKED_STATUSES_FETCH_REQUEST,
@@ -21,7 +21,7 @@ import {
   BOOKMARKED_STATUSES_EXPAND_REQUEST,
   BOOKMARKED_STATUSES_EXPAND_SUCCESS,
   BOOKMARKED_STATUSES_EXPAND_FAIL,
-} from '../actions/bookmarks';
+} from '../actions/bookmarks.ts';
 import {
   RECENT_EVENTS_FETCH_REQUEST,
   RECENT_EVENTS_FETCH_SUCCESS,
@@ -29,7 +29,7 @@ import {
   JOINED_EVENTS_FETCH_REQUEST,
   JOINED_EVENTS_FETCH_SUCCESS,
   JOINED_EVENTS_FETCH_FAIL,
-} from '../actions/events';
+} from '../actions/events.ts';
 import {
   FAVOURITED_STATUSES_FETCH_REQUEST,
   FAVOURITED_STATUSES_FETCH_SUCCESS,
@@ -43,7 +43,7 @@ import {
   ACCOUNT_FAVOURITED_STATUSES_EXPAND_REQUEST,
   ACCOUNT_FAVOURITED_STATUSES_EXPAND_SUCCESS,
   ACCOUNT_FAVOURITED_STATUSES_EXPAND_FAIL,
-} from '../actions/favourites';
+} from '../actions/favourites.ts';
 import {
   FAVOURITE_SUCCESS,
   UNFAVOURITE_SUCCESS,
@@ -51,10 +51,10 @@ import {
   UNBOOKMARK_SUCCESS,
   PIN_SUCCESS,
   UNPIN_SUCCESS,
-} from '../actions/interactions';
+} from '../actions/interactions.ts';
 import {
   PINNED_STATUSES_FETCH_SUCCESS,
-} from '../actions/pin-statuses';
+} from '../actions/pin-statuses.ts';
 import {
   SCHEDULED_STATUSES_FETCH_REQUEST,
   SCHEDULED_STATUSES_FETCH_SUCCESS,
@@ -64,10 +64,10 @@ import {
   SCHEDULED_STATUSES_EXPAND_FAIL,
   SCHEDULED_STATUS_CANCEL_REQUEST,
   SCHEDULED_STATUS_CANCEL_SUCCESS,
-} from '../actions/scheduled-statuses';
+} from '../actions/scheduled-statuses.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities';
+import type { APIEntity, Status as StatusEntity } from 'soapbox/types/entities.ts';
 
 export const StatusListRecord = ImmutableRecord({
   next: null as string | null,
diff --git a/src/reducers/statuses.test.ts b/src/reducers/statuses.test.ts
index 824e53e56..70f464e70 100644
--- a/src/reducers/statuses.test.ts
+++ b/src/reducers/statuses.test.ts
@@ -2,17 +2,18 @@ import {
   Map as ImmutableMap,
   Record as ImmutableRecord,
 } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { STATUS_IMPORT } from 'soapbox/actions/importer';
+import { STATUS_IMPORT } from 'soapbox/actions/importer/index.ts';
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_FAIL,
   STATUS_DELETE_REQUEST,
   STATUS_DELETE_FAIL,
-} from 'soapbox/actions/statuses';
-import { normalizeStatus } from 'soapbox/normalizers';
+} from 'soapbox/actions/statuses.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
 
-import reducer, { ReducerStatus } from './statuses';
+import reducer, { ReducerStatus } from './statuses.ts';
 
 describe('statuses reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/statuses.ts b/src/reducers/statuses.ts
index b857ba540..67c915177 100644
--- a/src/reducers/statuses.ts
+++ b/src/reducers/statuses.ts
@@ -2,23 +2,23 @@ import escapeTextContentForBrowser from 'escape-html';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import DOMPurify from 'isomorphic-dompurify';
 
-import emojify from 'soapbox/features/emoji';
-import { normalizeStatus } from 'soapbox/normalizers';
-import { simulateEmojiReact, simulateUnEmojiReact } from 'soapbox/utils/emoji-reacts';
-import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html';
-import { makeEmojiMap, normalizeId } from 'soapbox/utils/normalizers';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { simulateEmojiReact, simulateUnEmojiReact } from 'soapbox/utils/emoji-reacts.ts';
+import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html.ts';
+import { makeEmojiMap, normalizeId } from 'soapbox/utils/normalizers.ts';
 
 import {
   EMOJI_REACT_REQUEST,
   UNEMOJI_REACT_REQUEST,
-} from '../actions/emoji-reacts';
+} from '../actions/emoji-reacts.ts';
 import {
   EVENT_JOIN_REQUEST,
   EVENT_JOIN_FAIL,
   EVENT_LEAVE_REQUEST,
   EVENT_LEAVE_FAIL,
-} from '../actions/events';
-import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer';
+} from '../actions/events.ts';
+import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer/index.ts';
 import {
   REBLOG_REQUEST,
   REBLOG_FAIL,
@@ -32,7 +32,7 @@ import {
   DISLIKE_FAIL,
   ZAP_REQUEST,
   ZAP_FAIL,
-} from '../actions/interactions';
+} from '../actions/interactions.ts';
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_FAIL,
@@ -45,11 +45,11 @@ import {
   STATUS_TRANSLATE_SUCCESS,
   STATUS_TRANSLATE_UNDO,
   STATUS_UNFILTER,
-} from '../actions/statuses';
-import { TIMELINE_DELETE } from '../actions/timelines';
+} from '../actions/statuses.ts';
+import { TIMELINE_DELETE } from '../actions/timelines.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const domParser = new DOMParser();
 
diff --git a/src/reducers/suggestions.test.ts b/src/reducers/suggestions.test.ts
index a62067904..382af52f6 100644
--- a/src/reducers/suggestions.test.ts
+++ b/src/reducers/suggestions.test.ts
@@ -1,6 +1,8 @@
-import { SUGGESTIONS_FETCH_SUCCESS, SUGGESTIONS_DISMISS } from 'soapbox/actions/suggestions';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './suggestions';
+import { SUGGESTIONS_FETCH_SUCCESS, SUGGESTIONS_DISMISS } from 'soapbox/actions/suggestions.ts';
+
+import reducer from './suggestions.ts';
 
 describe('suggestions reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/suggestions.ts b/src/reducers/suggestions.ts
index 8f1cc209b..897ae74d1 100644
--- a/src/reducers/suggestions.ts
+++ b/src/reducers/suggestions.ts
@@ -1,7 +1,7 @@
 import { OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord } from 'immutable';
 
-import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts';
-import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain-blocks';
+import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts.ts';
+import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain-blocks.ts';
 import {
   SUGGESTIONS_FETCH_REQUEST,
   SUGGESTIONS_FETCH_SUCCESS,
@@ -10,10 +10,10 @@ import {
   SUGGESTIONS_V2_FETCH_REQUEST,
   SUGGESTIONS_V2_FETCH_SUCCESS,
   SUGGESTIONS_V2_FETCH_FAIL,
-} from 'soapbox/actions/suggestions';
+} from 'soapbox/actions/suggestions.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const SuggestionRecord = ImmutableRecord({
   source: '',
diff --git a/src/reducers/tags.ts b/src/reducers/tags.ts
index 81488bb1e..840392c05 100644
--- a/src/reducers/tags.ts
+++ b/src/reducers/tags.ts
@@ -6,11 +6,11 @@ import {
   HASHTAG_FOLLOW_FAIL,
   HASHTAG_UNFOLLOW_REQUEST,
   HASHTAG_UNFOLLOW_FAIL,
-} from 'soapbox/actions/tags';
-import { normalizeTag } from 'soapbox/normalizers';
+} from 'soapbox/actions/tags.ts';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import type { AnyAction } from 'redux';
-import type { Tag } from 'soapbox/types/entities';
+import type { Tag } from 'soapbox/types/entities.ts';
 
 const initialState = ImmutableMap<string, Tag>();
 
diff --git a/src/reducers/timelines.test.ts b/src/reducers/timelines.test.ts
index 697523e7c..8be8d72fe 100644
--- a/src/reducers/timelines.test.ts
+++ b/src/reducers/timelines.test.ts
@@ -1,12 +1,13 @@
 import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
 import {
   TIMELINE_EXPAND_REQUEST,
   TIMELINE_EXPAND_FAIL,
   TIMELINE_EXPAND_SUCCESS,
-} from 'soapbox/actions/timelines';
+} from 'soapbox/actions/timelines.ts';
 
-import reducer from './timelines';
+import reducer from './timelines.ts';
 
 describe('timelines reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/timelines.ts b/src/reducers/timelines.ts
index 7b7dd274e..19542c5a8 100644
--- a/src/reducers/timelines.ts
+++ b/src/reducers/timelines.ts
@@ -10,11 +10,11 @@ import sample from 'lodash/sample';
 import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
-} from '../actions/accounts';
+} from '../actions/accounts.ts';
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
-} from '../actions/statuses';
+} from '../actions/statuses.ts';
 import {
   TIMELINE_UPDATE,
   TIMELINE_DELETE,
@@ -29,11 +29,11 @@ import {
   MAX_QUEUED_ITEMS,
   TIMELINE_SCROLL_TOP,
   TIMELINE_INSERT,
-} from '../actions/timelines';
+} from '../actions/timelines.ts';
 
 import type { AnyAction } from 'redux';
-import type { ImportPosition } from 'soapbox/entity-store/types';
-import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { ImportPosition } from 'soapbox/entity-store/types.ts';
+import type { APIEntity, Status } from 'soapbox/types/entities.ts';
 
 const TRUNCATE_LIMIT = 40;
 const TRUNCATE_SIZE = 20;
diff --git a/src/reducers/trending-statuses.ts b/src/reducers/trending-statuses.ts
index a86d66c11..a233994e8 100644
--- a/src/reducers/trending-statuses.ts
+++ b/src/reducers/trending-statuses.ts
@@ -4,10 +4,10 @@ import {
   TRENDING_STATUSES_FETCH_REQUEST,
   TRENDING_STATUSES_FETCH_SUCCESS,
   TRENDING_STATUSES_EXPAND_SUCCESS,
-} from 'soapbox/actions/trending-statuses';
+} from 'soapbox/actions/trending-statuses.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 const ReducerRecord = ImmutableRecord({
   items: ImmutableOrderedSet<string>(),
diff --git a/src/reducers/trends.test.ts b/src/reducers/trends.test.ts
index 79ee44ed3..bc43b3162 100644
--- a/src/reducers/trends.test.ts
+++ b/src/reducers/trends.test.ts
@@ -1,4 +1,6 @@
-import reducer from './trends';
+import { describe, expect, it } from 'vitest';
+
+import reducer from './trends.ts';
 
 describe('trends reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/trends.ts b/src/reducers/trends.ts
index c43d5b7fd..873b29c19 100644
--- a/src/reducers/trends.ts
+++ b/src/reducers/trends.ts
@@ -1,15 +1,15 @@
 import { List as ImmutableList, Record as ImmutableRecord } from 'immutable';
 
-import { normalizeTag } from 'soapbox/normalizers';
+import { normalizeTag } from 'soapbox/normalizers/index.ts';
 
 import {
   TRENDS_FETCH_REQUEST,
   TRENDS_FETCH_SUCCESS,
   TRENDS_FETCH_FAIL,
-} from '../actions/trends';
+} from '../actions/trends.ts';
 
 import type { AnyAction } from 'redux';
-import type { APIEntity, Tag } from 'soapbox/types/entities';
+import type { APIEntity, Tag } from 'soapbox/types/entities.ts';
 
 const ReducerRecord = ImmutableRecord({
   items: ImmutableList<Tag>(),
diff --git a/src/reducers/user-lists.test.ts b/src/reducers/user-lists.test.ts
index a2477ada7..6da903553 100644
--- a/src/reducers/user-lists.test.ts
+++ b/src/reducers/user-lists.test.ts
@@ -1,6 +1,7 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import reducer from './user-lists';
+import reducer from './user-lists.ts';
 
 describe('user_lists reducer', () => {
   it('should return the initial state', () => {
diff --git a/src/reducers/user-lists.ts b/src/reducers/user-lists.ts
index 97e1def39..7f57a77d4 100644
--- a/src/reducers/user-lists.ts
+++ b/src/reducers/user-lists.ts
@@ -17,11 +17,11 @@ import {
   FOLLOW_REQUEST_REJECT_SUCCESS,
   PINNED_ACCOUNTS_FETCH_SUCCESS,
   BIRTHDAY_REMINDERS_FETCH_SUCCESS,
-} from 'soapbox/actions/accounts';
+} from 'soapbox/actions/accounts.ts';
 import {
   BLOCKS_FETCH_SUCCESS,
   BLOCKS_EXPAND_SUCCESS,
-} from 'soapbox/actions/blocks';
+} from 'soapbox/actions/blocks.ts';
 import {
   DIRECTORY_FETCH_REQUEST,
   DIRECTORY_FETCH_SUCCESS,
@@ -29,7 +29,7 @@ import {
   DIRECTORY_EXPAND_REQUEST,
   DIRECTORY_EXPAND_SUCCESS,
   DIRECTORY_EXPAND_FAIL,
-} from 'soapbox/actions/directory';
+} from 'soapbox/actions/directory.ts';
 import {
   EVENT_PARTICIPATIONS_EXPAND_SUCCESS,
   EVENT_PARTICIPATIONS_FETCH_SUCCESS,
@@ -37,10 +37,10 @@ import {
   EVENT_PARTICIPATION_REQUESTS_FETCH_SUCCESS,
   EVENT_PARTICIPATION_REQUEST_AUTHORIZE_SUCCESS,
   EVENT_PARTICIPATION_REQUEST_REJECT_SUCCESS,
-} from 'soapbox/actions/events';
+} from 'soapbox/actions/events.ts';
 import {
   FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
-} from 'soapbox/actions/familiar-followers';
+} from 'soapbox/actions/familiar-followers.ts';
 import {
   GROUP_MEMBERSHIP_REQUESTS_FETCH_SUCCESS,
   GROUP_MEMBERSHIP_REQUESTS_EXPAND_SUCCESS,
@@ -57,7 +57,7 @@ import {
   GROUP_BLOCKS_EXPAND_SUCCESS,
   GROUP_BLOCKS_EXPAND_FAIL,
   GROUP_UNBLOCK_SUCCESS,
-} from 'soapbox/actions/groups';
+} from 'soapbox/actions/groups.ts';
 import {
   REBLOGS_FETCH_SUCCESS,
   REBLOGS_EXPAND_SUCCESS,
@@ -67,12 +67,12 @@ import {
   REACTIONS_FETCH_SUCCESS,
   ZAPS_FETCH_SUCCESS,
   ZAPS_EXPAND_SUCCESS,
-} from 'soapbox/actions/interactions';
+} from 'soapbox/actions/interactions.ts';
 import {
   NOTIFICATIONS_UPDATE,
-} from 'soapbox/actions/notifications';
+} from 'soapbox/actions/notifications.ts';
 
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity } from 'soapbox/types/entities.ts';
 
 export const ListRecord = ImmutableRecord({
   next: null as string | null,
diff --git a/src/schemas/account.ts b/src/schemas/account.ts
index dc3605b17..bedd138fc 100644
--- a/src/schemas/account.ts
+++ b/src/schemas/account.ts
@@ -3,17 +3,16 @@ import escapeTextContentForBrowser from 'escape-html';
 import DOMPurify from 'isomorphic-dompurify';
 import z from 'zod';
 
-import emojify from 'soapbox/features/emoji';
-import { unescapeHTML } from 'soapbox/utils/html';
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
 
-import { customEmojiSchema } from './custom-emoji';
-import { Relationship } from './relationship';
-import { coerceObject, contentSchema, filteredArray, makeCustomEmojiMap } from './utils';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { Relationship } from './relationship.ts';
+import { coerceObject, contentSchema, filteredArray, makeCustomEmojiMap } from './utils.ts';
 
-import type { Resolve } from 'soapbox/utils/types';
-
-const avatarMissing = require('soapbox/assets/images/avatar-missing.png');
-const headerMissing = require('soapbox/assets/images/header-missing.png');
+import type { Resolve } from 'soapbox/utils/types.ts';
 
 const birthdaySchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/);
 
diff --git a/src/schemas/admin-account.ts b/src/schemas/admin-account.ts
index d84c19418..828f16ae5 100644
--- a/src/schemas/admin-account.ts
+++ b/src/schemas/admin-account.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { accountSchema } from './account';
+import { accountSchema } from './account.ts';
 
 const adminIpSchema = z.object({
   ip: z.string().ip(),
@@ -29,4 +29,4 @@ const adminAccountSchema = z.object({
 
 type AdminAccount = z.infer<typeof adminAccountSchema>;
 
-export { adminAccountSchema, AdminAccount };
\ No newline at end of file
+export { adminAccountSchema, type AdminAccount };
\ No newline at end of file
diff --git a/src/schemas/announcement-reaction.ts b/src/schemas/announcement-reaction.ts
index c8a5cfc23..eaa7c0fc0 100644
--- a/src/schemas/announcement-reaction.ts
+++ b/src/schemas/announcement-reaction.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import type { Resolve } from 'soapbox/utils/types';
+import type { Resolve } from 'soapbox/utils/types.ts';
 
 // https://docs.joinmastodon.org/entities/announcement/
 const announcementReactionSchema = z.object({
diff --git a/src/schemas/announcement.ts b/src/schemas/announcement.ts
index e40b9c011..eded235c6 100644
--- a/src/schemas/announcement.ts
+++ b/src/schemas/announcement.ts
@@ -1,14 +1,14 @@
 import { z } from 'zod';
 
-import emojify from 'soapbox/features/emoji';
+import emojify from 'soapbox/features/emoji/index.ts';
 
-import { announcementReactionSchema } from './announcement-reaction';
-import { customEmojiSchema } from './custom-emoji';
-import { mentionSchema } from './mention';
-import { tagSchema } from './tag';
-import { dateSchema, filteredArray, makeCustomEmojiMap } from './utils';
+import { announcementReactionSchema } from './announcement-reaction.ts';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { mentionSchema } from './mention.ts';
+import { tagSchema } from './tag.ts';
+import { dateSchema, filteredArray, makeCustomEmojiMap } from './utils.ts';
 
-import type { Resolve } from 'soapbox/utils/types';
+import type { Resolve } from 'soapbox/utils/types.ts';
 
 const transformAnnouncement = (announcement: Resolve<z.infer<typeof baseAnnouncementSchema>>) => {
   const emojiMap = makeCustomEmojiMap(announcement.emojis);
diff --git a/src/schemas/application.ts b/src/schemas/application.ts
index 7366789bf..f1f7fad5a 100644
--- a/src/schemas/application.ts
+++ b/src/schemas/application.ts
@@ -20,4 +20,4 @@ const applicationSchema = z.object({
 
 type Application = z.infer<typeof applicationSchema>;
 
-export { applicationSchema, Application };
\ No newline at end of file
+export { applicationSchema, type Application };
\ No newline at end of file
diff --git a/src/schemas/attachment.ts b/src/schemas/attachment.ts
index dfc880f58..20d7e33f7 100644
--- a/src/schemas/attachment.ts
+++ b/src/schemas/attachment.ts
@@ -1,7 +1,7 @@
 import { isBlurhashValid } from 'blurhash';
 import { z } from 'zod';
 
-import { mimeSchema } from './utils';
+import { mimeSchema } from './utils.ts';
 
 const blurhashSchema = z.string().superRefine((value, ctx) => {
   const r = isBlurhashValid(value);
diff --git a/src/schemas/card.test.ts b/src/schemas/card.test.ts
index f9b672c28..c62b883be 100644
--- a/src/schemas/card.test.ts
+++ b/src/schemas/card.test.ts
@@ -1,4 +1,6 @@
-import { cardSchema } from './card';
+import { describe, expect, it } from 'vitest';
+
+import { cardSchema } from './card.ts';
 
 describe('cardSchema', () => {
   it('adds base fields', () => {
diff --git a/src/schemas/card.ts b/src/schemas/card.ts
index dc4ba2e6b..3d03cb16d 100644
--- a/src/schemas/card.ts
+++ b/src/schemas/card.ts
@@ -3,7 +3,7 @@ import punycode from 'punycode';
 import DOMPurify from 'isomorphic-dompurify';
 import { z } from 'zod';
 
-import { groupSchema } from './group';
+import { groupSchema } from './group.ts';
 
 const IDNA_PREFIX = 'xn--';
 
diff --git a/src/schemas/chat-message.ts b/src/schemas/chat-message.ts
index fe0ff0f6b..1b32368aa 100644
--- a/src/schemas/chat-message.ts
+++ b/src/schemas/chat-message.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
-import { attachmentSchema } from './attachment';
-import { cardSchema } from './card';
-import { customEmojiSchema } from './custom-emoji';
-import { contentSchema, emojiSchema, filteredArray } from './utils';
+import { attachmentSchema } from './attachment.ts';
+import { cardSchema } from './card.ts';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { contentSchema, emojiSchema, filteredArray } from './utils.ts';
 
 const chatMessageSchema = z.object({
   account_id: z.string(),
diff --git a/src/schemas/emoji-reaction.ts b/src/schemas/emoji-reaction.ts
index 5f31658b1..0fcabefe3 100644
--- a/src/schemas/emoji-reaction.ts
+++ b/src/schemas/emoji-reaction.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { emojiSchema } from './utils';
+import { emojiSchema } from './utils.ts';
 
 const baseEmojiReactionSchema = z.object({
   count: z.number().nullable().catch(null),
diff --git a/src/schemas/event.ts b/src/schemas/event.ts
index e74a80760..6ece016a2 100644
--- a/src/schemas/event.ts
+++ b/src/schemas/event.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
-import { attachmentSchema } from './attachment';
-import { locationSchema } from './location';
+import { attachmentSchema } from './attachment.ts';
+import { locationSchema } from './location.ts';
 
 const eventSchema = z.object({
   name: z.string().catch(''),
diff --git a/src/schemas/group-member.ts b/src/schemas/group-member.ts
index 8135fecb6..88de11993 100644
--- a/src/schemas/group-member.ts
+++ b/src/schemas/group-member.ts
@@ -1,6 +1,6 @@
 import z from 'zod';
 
-import { accountSchema } from './account';
+import { accountSchema } from './account.ts';
 
 enum GroupRoles {
   OWNER = 'owner',
diff --git a/src/schemas/group-relationship.ts b/src/schemas/group-relationship.ts
index 93e2a5e14..ee1a5720e 100644
--- a/src/schemas/group-relationship.ts
+++ b/src/schemas/group-relationship.ts
@@ -1,6 +1,6 @@
 import z from 'zod';
 
-import { GroupRoles } from './group-member';
+import { GroupRoles } from './group-member.ts';
 
 const groupRelationshipSchema = z.object({
   blocked_by: z.boolean().catch(false),
diff --git a/src/schemas/group.test.ts b/src/schemas/group.test.ts
index b227ad856..576d67802 100644
--- a/src/schemas/group.test.ts
+++ b/src/schemas/group.test.ts
@@ -1,4 +1,6 @@
-import { groupSchema } from './group';
+import { expect, test } from 'vitest';
+
+import { groupSchema } from './group.ts';
 
 test('groupSchema with a TruthSocial group', async () => {
   const data = await import('soapbox/__fixtures__/group-truthsocial.json');
diff --git a/src/schemas/group.ts b/src/schemas/group.ts
index 9d97a4047..8082258a5 100644
--- a/src/schemas/group.ts
+++ b/src/schemas/group.ts
@@ -1,16 +1,15 @@
 import escapeTextContentForBrowser from 'escape-html';
 import z from 'zod';
 
-import emojify from 'soapbox/features/emoji';
-import { unescapeHTML } from 'soapbox/utils/html';
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { unescapeHTML } from 'soapbox/utils/html.ts';
 
-import { customEmojiSchema } from './custom-emoji';
-import { groupRelationshipSchema } from './group-relationship';
-import { groupTagSchema } from './group-tag';
-import { filteredArray, makeCustomEmojiMap } from './utils';
-
-const avatarMissing = require('soapbox/assets/images/avatar-missing.png');
-const headerMissing = require('soapbox/assets/images/header-missing.png');
+import { customEmojiSchema } from './custom-emoji.ts';
+import { groupRelationshipSchema } from './group-relationship.ts';
+import { groupTagSchema } from './group-tag.ts';
+import { filteredArray, makeCustomEmojiMap } from './utils.ts';
 
 const groupSchema = z.object({
   avatar: z.string().catch(avatarMissing),
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
index 253baff7a..656017e1f 100644
--- a/src/schemas/index.ts
+++ b/src/schemas/index.ts
@@ -1,25 +1,25 @@
-export { accountSchema, type Account } from './account';
-export { announcementSchema, adminAnnouncementSchema, type Announcement, type AdminAnnouncement } from './announcement';
-export { announcementReactionSchema, type AnnouncementReaction } from './announcement-reaction';
-export { attachmentSchema, type Attachment } from './attachment';
-export { bookmarkFolderSchema, type BookmarkFolder } from './bookmark-folder';
-export { cardSchema, type Card } from './card';
-export { chatMessageSchema, type ChatMessage } from './chat-message';
-export { customEmojiSchema, type CustomEmoji } from './custom-emoji';
-export { domainSchema, type Domain } from './domain';
-export { emojiReactionSchema, type EmojiReaction } from './emoji-reaction';
-export { groupSchema, type Group } from './group';
-export { groupMemberSchema, type GroupMember } from './group-member';
-export { groupRelationshipSchema, type GroupRelationship } from './group-relationship';
-export { groupTagSchema, type GroupTag } from './group-tag';
-export { mentionSchema, type Mention } from './mention';
-export { moderationLogEntrySchema, type ModerationLogEntry } from './moderation-log-entry';
-export { notificationSchema, type Notification } from './notification';
-export { patronUserSchema, type PatronUser } from './patron';
-export { pollSchema, type Poll, type PollOption } from './poll';
-export { relationshipSchema, type Relationship } from './relationship';
-export { relaySchema, type Relay } from './relay';
-export { ruleSchema, adminRuleSchema, type Rule, type AdminRule } from './rule';
-export { statusSchema, type Status } from './status';
-export { tagSchema, type Tag } from './tag';
-export { tombstoneSchema, type Tombstone } from './tombstone';
+export { accountSchema, type Account } from './account.ts';
+export { announcementSchema, adminAnnouncementSchema, type Announcement, type AdminAnnouncement } from './announcement.ts';
+export { announcementReactionSchema, type AnnouncementReaction } from './announcement-reaction.ts';
+export { attachmentSchema, type Attachment } from './attachment.ts';
+export { bookmarkFolderSchema, type BookmarkFolder } from './bookmark-folder.ts';
+export { cardSchema, type Card } from './card.ts';
+export { chatMessageSchema, type ChatMessage } from './chat-message.ts';
+export { customEmojiSchema, type CustomEmoji } from './custom-emoji.ts';
+export { domainSchema, type Domain } from './domain.ts';
+export { emojiReactionSchema, type EmojiReaction } from './emoji-reaction.ts';
+export { groupSchema, type Group } from './group.ts';
+export { groupMemberSchema, type GroupMember } from './group-member.ts';
+export { groupRelationshipSchema, type GroupRelationship } from './group-relationship.ts';
+export { groupTagSchema, type GroupTag } from './group-tag.ts';
+export { mentionSchema, type Mention } from './mention.ts';
+export { moderationLogEntrySchema, type ModerationLogEntry } from './moderation-log-entry.ts';
+export { notificationSchema, type Notification } from './notification.ts';
+export { patronUserSchema, type PatronUser } from './patron.ts';
+export { pollSchema, type Poll, type PollOption } from './poll.ts';
+export { relationshipSchema, type Relationship } from './relationship.ts';
+export { relaySchema, type Relay } from './relay.ts';
+export { ruleSchema, adminRuleSchema, type Rule, type AdminRule } from './rule.ts';
+export { statusSchema, type Status } from './status.ts';
+export { tagSchema, type Tag } from './tag.ts';
+export { tombstoneSchema, type Tombstone } from './tombstone.ts';
diff --git a/src/schemas/instance.test.ts b/src/schemas/instance.test.ts
index fd1b6a37d..2089a07f3 100644
--- a/src/schemas/instance.test.ts
+++ b/src/schemas/instance.test.ts
@@ -1,4 +1,6 @@
-import { instanceV1Schema } from './instance';
+import { describe, expect, it } from 'vitest';
+
+import { instanceV1Schema } from './instance.ts';
 
 describe('instanceV1Schema.parse()', () => {
   it('normalizes an empty Map', () => {
@@ -71,8 +73,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Pleroma instance with Mastodon configuration format', () => {
-    const instance = require('soapbox/__fixtures__/pleroma-instance.json');
+  it('normalizes Pleroma instance with Mastodon configuration format', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/pleroma-instance.json');
 
     const expected = {
       configuration: {
@@ -93,8 +95,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Mastodon instance with retained configuration', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-instance.json');
+  it('normalizes Mastodon instance with retained configuration', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-instance.json');
 
     const expected = {
       configuration: {
@@ -123,8 +125,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Mastodon 3.0.0 instance with default configuration', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-3.0.0-instance.json');
+  it('normalizes Mastodon 3.0.0 instance with default configuration', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-3.0.0-instance.json');
 
     const expected = {
       configuration: {
@@ -145,8 +147,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result).toMatchObject(expected);
   });
 
-  it('normalizes Fedibird instance', () => {
-    const instance = require('soapbox/__fixtures__/fedibird-instance.json');
+  it('normalizes Fedibird instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/fedibird-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Sets description_limit
@@ -156,8 +158,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.fedibird_capabilities).toEqual(instance.fedibird_capabilities);
   });
 
-  it('normalizes Mitra instance', () => {
-    const instance = require('soapbox/__fixtures__/mitra-instance.json');
+  it('normalizes Mitra instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mitra-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Adds configuration and description_limit
@@ -165,8 +167,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes GoToSocial instance', () => {
-    const instance = require('soapbox/__fixtures__/gotosocial-instance.json');
+  it('normalizes GoToSocial instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/gotosocial-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Normalizes max_toot_chars
@@ -178,8 +180,8 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes Friendica instance', () => {
-    const instance = require('soapbox/__fixtures__/friendica-instance.json');
+  it('normalizes Friendica instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/friendica-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     // Normalizes max_toot_chars
@@ -191,21 +193,21 @@ describe('instanceV1Schema.parse()', () => {
     expect(result.pleroma.metadata.description_limit).toBe(1500);
   });
 
-  it('normalizes a Mastodon RC version', () => {
-    const instance = require('soapbox/__fixtures__/mastodon-instance-rc.json');
+  it('normalizes a Mastodon RC version', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/mastodon-instance-rc.json');
     const result = instanceV1Schema.parse(instance);
 
     expect(result.version).toEqual('3.5.0-rc1');
   });
 
-  it('normalizes Pixelfed instance', () => {
-    const instance = require('soapbox/__fixtures__/pixelfed-instance.json');
+  it('normalizes Pixelfed instance', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/pixelfed-instance.json');
     const result = instanceV1Schema.parse(instance);
     expect(result.title).toBe('pixelfed');
   });
 
-  it('renames Akkoma to Pleroma', () => {
-    const instance = require('soapbox/__fixtures__/akkoma-instance.json');
+  it('renames Akkoma to Pleroma', async () => {
+    const { default: instance } = await import('soapbox/__fixtures__/akkoma-instance.json');
     const result = instanceV1Schema.parse(instance);
 
     expect(result.version).toEqual('2.7.2 (compatible; Pleroma 2.4.50+akkoma)');
diff --git a/src/schemas/instance.ts b/src/schemas/instance.ts
index 90eaa906a..682d6b1c4 100644
--- a/src/schemas/instance.ts
+++ b/src/schemas/instance.ts
@@ -1,10 +1,10 @@
 /* eslint sort-keys: "error" */
 import z from 'zod';
 
-import { accountSchema } from './account';
-import { mrfSimpleSchema } from './pleroma';
-import { ruleSchema } from './rule';
-import { coerceObject, filteredArray, mimeSchema } from './utils';
+import { accountSchema } from './account.ts';
+import { mrfSimpleSchema } from './pleroma.ts';
+import { ruleSchema } from './rule.ts';
+import { coerceObject, filteredArray, mimeSchema } from './utils.ts';
 
 const versionSchema = z.string().catch('0.0.0').transform((version) => {
   // Handle Mastodon release candidates
@@ -255,4 +255,4 @@ function upgradeInstance(v1: InstanceV1): InstanceV2 {
 type InstanceV1 = z.infer<typeof instanceV1Schema>;
 type InstanceV2 = z.infer<typeof instanceV2Schema>;
 
-export { instanceV1Schema, InstanceV1, instanceV2Schema, InstanceV2, upgradeInstance };
+export { instanceV1Schema, type InstanceV1, instanceV2Schema, type InstanceV2, upgradeInstance };
diff --git a/src/schemas/notification.ts b/src/schemas/notification.ts
index e468c4e2b..d1a532224 100644
--- a/src/schemas/notification.ts
+++ b/src/schemas/notification.ts
@@ -1,9 +1,9 @@
 import { z } from 'zod';
 
-import { accountSchema } from './account';
-import { chatMessageSchema } from './chat-message';
-import { statusSchema } from './status';
-import { emojiSchema } from './utils';
+import { accountSchema } from './account.ts';
+import { chatMessageSchema } from './chat-message.ts';
+import { statusSchema } from './status.ts';
+import { emojiSchema } from './utils.ts';
 
 const baseNotificationSchema = z.object({
   account: accountSchema,
diff --git a/src/schemas/pleroma.ts b/src/schemas/pleroma.ts
index 04f8bf580..6486fcbd6 100644
--- a/src/schemas/pleroma.ts
+++ b/src/schemas/pleroma.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { coerceObject } from './utils';
+import { coerceObject } from './utils.ts';
 
 const mrfSimpleSchema = coerceObject({
   accept: z.string().array().catch([]),
diff --git a/src/schemas/poll.test.ts b/src/schemas/poll.test.ts
index 88deca8db..7e62809ba 100644
--- a/src/schemas/poll.test.ts
+++ b/src/schemas/poll.test.ts
@@ -1,4 +1,6 @@
-import { pollSchema } from './poll';
+import { describe, expect, it } from 'vitest';
+
+import { pollSchema } from './poll.ts';
 
 describe('normalizePoll()', () => {
   it('adds base fields', () => {
diff --git a/src/schemas/poll.ts b/src/schemas/poll.ts
index 1a60af410..f0e089f0a 100644
--- a/src/schemas/poll.ts
+++ b/src/schemas/poll.ts
@@ -2,10 +2,10 @@ import escapeTextContentForBrowser from 'escape-html';
 import DOMPurify from 'isomorphic-dompurify';
 import { z } from 'zod';
 
-import emojify from 'soapbox/features/emoji';
+import emojify from 'soapbox/features/emoji/index.ts';
 
-import { customEmojiSchema } from './custom-emoji';
-import { filteredArray, makeCustomEmojiMap } from './utils';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { filteredArray, makeCustomEmojiMap } from './utils.ts';
 
 const pollOptionSchema = z.object({
   title: z.string().catch(''),
diff --git a/src/schemas/soapbox/settings.ts b/src/schemas/soapbox/settings.ts
index e1b8fe53c..9f70c2c21 100644
--- a/src/schemas/soapbox/settings.ts
+++ b/src/schemas/soapbox/settings.ts
@@ -1,8 +1,8 @@
 import { z } from 'zod';
 
-import { locales } from 'soapbox/messages';
+import { locales } from 'soapbox/messages.ts';
 
-import { coerceObject } from '../utils';
+import { coerceObject } from '../utils.ts';
 
 const skinToneSchema = z.union([
   z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(5), z.literal(6),
diff --git a/src/schemas/soapbox/soapbox-auth.ts b/src/schemas/soapbox/soapbox-auth.ts
index e51a8f794..c2b0b8dc6 100644
--- a/src/schemas/soapbox/soapbox-auth.ts
+++ b/src/schemas/soapbox/soapbox-auth.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
-import { applicationSchema } from 'soapbox/schemas/application';
-import { tokenSchema } from 'soapbox/schemas/token';
+import { applicationSchema } from 'soapbox/schemas/application.ts';
+import { tokenSchema } from 'soapbox/schemas/token.ts';
 
 const authUserSchema = z.object({
   access_token: z.string(),
@@ -25,4 +25,4 @@ const soapboxAuthSchema = z.object({
 type AuthUser = z.infer<typeof authUserSchema>;
 type SoapboxAuth = z.infer<typeof soapboxAuthSchema>;
 
-export { soapboxAuthSchema, SoapboxAuth, authUserSchema, AuthUser };
\ No newline at end of file
+export { soapboxAuthSchema, type SoapboxAuth, authUserSchema, type AuthUser };
\ No newline at end of file
diff --git a/src/schemas/soapbox/soapbox-config.ts b/src/schemas/soapbox/soapbox-config.ts
index 97cda600c..3b36868a6 100644
--- a/src/schemas/soapbox/soapbox-config.ts
+++ b/src/schemas/soapbox/soapbox-config.ts
@@ -1,7 +1,7 @@
 /* eslint sort-keys: "error" */
 import { z } from 'zod';
 
-import { hexColorSchema } from '../utils';
+import { hexColorSchema } from '../utils.ts';
 
 export const cryptoAddressSchema = z.object({
   address: z.string(),
diff --git a/src/schemas/status.ts b/src/schemas/status.ts
index 7d41837f5..6c04f28ee 100644
--- a/src/schemas/status.ts
+++ b/src/schemas/status.ts
@@ -1,22 +1,22 @@
 import escapeTextContentForBrowser from 'escape-html';
 import { z } from 'zod';
 
-import emojify from 'soapbox/features/emoji';
-import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html';
+import emojify from 'soapbox/features/emoji/index.ts';
+import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html.ts';
 
-import { accountSchema } from './account';
-import { attachmentSchema } from './attachment';
-import { cardSchema } from './card';
-import { customEmojiSchema } from './custom-emoji';
-import { emojiReactionSchema } from './emoji-reaction';
-import { eventSchema } from './event';
-import { groupSchema } from './group';
-import { mentionSchema } from './mention';
-import { pollSchema } from './poll';
-import { tagSchema } from './tag';
-import { contentSchema, dateSchema, filteredArray, makeCustomEmojiMap } from './utils';
+import { accountSchema } from './account.ts';
+import { attachmentSchema } from './attachment.ts';
+import { cardSchema } from './card.ts';
+import { customEmojiSchema } from './custom-emoji.ts';
+import { emojiReactionSchema } from './emoji-reaction.ts';
+import { eventSchema } from './event.ts';
+import { groupSchema } from './group.ts';
+import { mentionSchema } from './mention.ts';
+import { pollSchema } from './poll.ts';
+import { tagSchema } from './tag.ts';
+import { contentSchema, dateSchema, filteredArray, makeCustomEmojiMap } from './utils.ts';
 
-import type { Resolve } from 'soapbox/utils/types';
+import type { Resolve } from 'soapbox/utils/types.ts';
 
 const statusPleromaSchema = z.object({
   event: eventSchema.nullish().catch(undefined),
diff --git a/src/schemas/token.ts b/src/schemas/token.ts
index 2feaf30bd..0708b765a 100644
--- a/src/schemas/token.ts
+++ b/src/schemas/token.ts
@@ -11,4 +11,4 @@ const tokenSchema = z.object({
 
 type Token = z.infer<typeof tokenSchema>;
 
-export { tokenSchema, Token };
\ No newline at end of file
+export { tokenSchema, type Token };
\ No newline at end of file
diff --git a/src/schemas/utils.ts b/src/schemas/utils.ts
index 2110cd0bb..056c049fc 100644
--- a/src/schemas/utils.ts
+++ b/src/schemas/utils.ts
@@ -1,6 +1,6 @@
 import z from 'zod';
 
-import type { CustomEmoji } from './custom-emoji';
+import type { CustomEmoji } from './custom-emoji.ts';
 
 /** Ensure HTML content is a string, and drop empty `<p>` tags. */
 const contentSchema = z.string().catch('').transform((value) => value === '<p></p>' ? '' : value);
diff --git a/src/schemas/web-push.ts b/src/schemas/web-push.ts
index f0553dc32..c59b43fb9 100644
--- a/src/schemas/web-push.ts
+++ b/src/schemas/web-push.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { coerceObject } from './utils';
+import { coerceObject } from './utils.ts';
 
 /** https://docs.joinmastodon.org/entities/WebPushSubscription/ */
 const webPushSubscriptionSchema = z.object({
@@ -23,4 +23,4 @@ const webPushSubscriptionSchema = z.object({
 
 type WebPushSubscription = z.infer<typeof webPushSubscriptionSchema>;
 
-export { webPushSubscriptionSchema, WebPushSubscription };
\ No newline at end of file
+export { webPushSubscriptionSchema, type WebPushSubscription };
\ No newline at end of file
diff --git a/src/schemas/zap-split.ts b/src/schemas/zap-split.ts
index e830e676b..9f3b9872d 100644
--- a/src/schemas/zap-split.ts
+++ b/src/schemas/zap-split.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { type Account, accountSchema } from './account';
+import { type Account, accountSchema } from './account.ts';
 
 const addMethodsToAccount = (account: Account) => {
   return {
diff --git a/src/selectors/index.ts b/src/selectors/index.ts
index a5d3076cc..297d638fe 100644
--- a/src/selectors/index.ts
+++ b/src/selectors/index.ts
@@ -7,20 +7,20 @@ import {
 } from 'immutable';
 import { createSelector } from 'reselect';
 
-import { getSettings } from 'soapbox/actions/settings';
-import { Entities } from 'soapbox/entity-store/entities';
-import { type MRFSimple } from 'soapbox/schemas/pleroma';
-import { getDomain } from 'soapbox/utils/accounts';
-import ConfigDB from 'soapbox/utils/config-db';
-import { getFeatures } from 'soapbox/utils/features';
-import { shouldFilter } from 'soapbox/utils/timelines';
+import { getSettings } from 'soapbox/actions/settings.ts';
+import { Entities } from 'soapbox/entity-store/entities.ts';
+import { type MRFSimple } from 'soapbox/schemas/pleroma.ts';
+import { getDomain } from 'soapbox/utils/accounts.ts';
+import ConfigDB from 'soapbox/utils/config-db.ts';
+import { getFeatures } from 'soapbox/utils/features.ts';
+import { shouldFilter } from 'soapbox/utils/timelines.ts';
 
-import type { EntityStore } from 'soapbox/entity-store/types';
-import type { ContextType } from 'soapbox/normalizers/filter';
-import type { ReducerChat } from 'soapbox/reducers/chats';
-import type { Account as AccountSchema } from 'soapbox/schemas';
-import type { RootState } from 'soapbox/store';
-import type { Account, Filter as FilterEntity, Notification, Status } from 'soapbox/types/entities';
+import type { EntityStore } from 'soapbox/entity-store/types.ts';
+import type { ContextType } from 'soapbox/normalizers/filter.ts';
+import type { ReducerChat } from 'soapbox/reducers/chats.ts';
+import type { Account as AccountSchema } from 'soapbox/schemas/index.ts';
+import type { RootState } from 'soapbox/store.ts';
+import type { Account, Filter as FilterEntity, Notification, Status } from 'soapbox/types/entities.ts';
 
 const normalizeId = (id: any): string => typeof id === 'string' ? id : '';
 
diff --git a/src/sentry.ts b/src/sentry.ts
index 9b053d92e..a30cef221 100644
--- a/src/sentry.ts
+++ b/src/sentry.ts
@@ -1,8 +1,8 @@
-import { NODE_ENV } from 'soapbox/build-config';
-import sourceCode from 'soapbox/utils/code';
+import { NODE_ENV } from 'soapbox/build-config.ts';
+import sourceCode from 'soapbox/utils/code.ts';
 
-import type { Account } from './schemas';
 import type { CaptureContext, SendFeedbackParams } from '@sentry/types';
+import type { Account } from 'soapbox/schemas/index.ts';
 
 /** Start Sentry. */
 async function startSentry(dsn: string): Promise<void> {
diff --git a/src/service-worker/sw.ts b/src/service-worker/sw.ts
index c08744bcf..6323bd167 100644
--- a/src/service-worker/sw.ts
+++ b/src/service-worker/sw.ts
@@ -3,6 +3,10 @@ import IntlMessageFormat from 'intl-messageformat';
 import 'intl-pluralrules';
 import unescape from 'lodash/unescape';
 
+import expandIcon from '../assets/images/web-push/web-push-icon_expand.png';
+import favouriteIcon from '../assets/images/web-push/web-push-icon_favourite.png';
+import reblogIcon from '../assets/images/web-push/web-push-icon_reblog.png';
+
 import type {
   Account as AccountEntity,
   Notification as NotificationEntity,
@@ -195,21 +199,21 @@ const handlePush = (event: PushEvent) => {
 /** Native action to open a status on the device. */
 const actionExpand = (preferred_locale: string) => ({
   action: 'expand',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_expand.png')}`,
+  icon: expandIcon,
   title: formatMessage('status.show_more', preferred_locale),
 });
 
 /** Native action to repost status. */
 const actionReblog = (preferred_locale: string) => ({
   action: 'reblog',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_reblog.png')}`,
+  icon: reblogIcon,
   title: formatMessage('status.reblog', preferred_locale),
 });
 
 /** Native action to like status. */
 const actionFavourite = (preferred_locale: string) => ({
   action: 'favourite',
-  icon: `/${require('../../assets/images/web-push/web-push-icon_favourite.png')}`,
+  icon: favouriteIcon,
   title: formatMessage('status.favourite', preferred_locale),
 });
 
diff --git a/src/store.ts b/src/store.ts
index 4b1700e26..0606e5108 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,9 +1,9 @@
 import { configureStore, Tuple } from '@reduxjs/toolkit';
 import { thunk, type ThunkDispatch } from 'redux-thunk';
 
-import errorsMiddleware from './middleware/errors';
-import soundsMiddleware from './middleware/sounds';
-import appReducer from './reducers';
+import errorsMiddleware from './middleware/errors.ts';
+import soundsMiddleware from './middleware/sounds.ts';
+import appReducer from './reducers/index.ts';
 
 import type { AnyAction } from 'redux';
 
diff --git a/src/stream.ts b/src/stream.ts
index 599704d12..1f4bd38e5 100644
--- a/src/stream.ts
+++ b/src/stream.ts
@@ -1,8 +1,8 @@
 import WebSocketClient from '@gamestdio/websocket';
 
-import { getAccessToken } from 'soapbox/utils/auth';
+import { getAccessToken } from 'soapbox/utils/auth.ts';
 
-import type { AppDispatch, RootState } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store.ts';
 
 const randomIntUpTo = (max: number) => Math.floor(Math.random() * Math.floor(max));
 
diff --git a/src/styles/application.scss b/src/styles/application.scss
index ea9ac580a..ef771c786 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -1,13 +1,13 @@
-@import 'variables';
-@import 'fonts';
-@import 'basics';
-@import 'loading';
-@import 'ui';
-@import 'emoji-picker';
-@import 'rtl';
-@import 'accessibility';
-@import 'navigation';
-@import 'autosuggest';
+@use 'variables';
+@use 'fonts';
+@use 'basics';
+@use 'loading';
+@use 'ui';
+@use 'emoji-picker';
+@use 'rtl';
+@use 'accessibility';
+@use 'navigation';
+@use 'autosuggest';
 
 // COMPONENTS
 @import 'components/buttons';
diff --git a/src/styles/components/compose-form.scss b/src/styles/components/compose-form.scss
index dd1b17802..9139a9ce3 100644
--- a/src/styles/components/compose-form.scss
+++ b/src/styles/components/compose-form.scss
@@ -1,3 +1,5 @@
+@use "../variables";
+
 .compose-form {
   &__warning {
     @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
@@ -5,7 +7,7 @@
     strong {
       @apply font-medium;
 
-      @each $lang in $cjk-langs {
+      @each $lang in variables.$cjk-langs {
         &:lang(#{$lang}) {
           @apply font-bold;
         }
@@ -168,7 +170,7 @@
       strong {
         @apply block font-medium text-black dark:text-white;
 
-        @each $lang in $cjk-langs {
+        @each $lang in variables.$cjk-langs {
           &:lang(#{$lang}) {
             @apply font-bold;
           }
diff --git a/src/styles/components/search.scss b/src/styles/components/search.scss
index 70d39c8d2..66c2f4311 100644
--- a/src/styles/components/search.scss
+++ b/src/styles/components/search.scss
@@ -1,3 +1,5 @@
+@use "../fonts";
+
 .search {
   position: relative;
 }
@@ -14,7 +16,7 @@
 
   .svg-icon {
     @apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
-    @include font-size(16);
+    @include fonts.font-size(16);
     cursor: default;
     display: inline-block;
     position: absolute;
diff --git a/src/toast.test.tsx b/src/toast.test.tsx
index 74c105c2e..697171785 100644
--- a/src/toast.test.tsx
+++ b/src/toast.test.tsx
@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import { AxiosError, AxiosHeaders } from 'axios';
-import React from 'react';
 import { Toaster } from 'react-hot-toast';
 import { IntlProvider } from 'react-intl';
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
-import { act, screen } from 'soapbox/jest/test-helpers';
+import { act, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import toast from './toast';
+import toast from './toast.tsx';
 
 function renderApp() {
   return {
diff --git a/src/toast.tsx b/src/toast.tsx
index 897f97429..1c707048a 100644
--- a/src/toast.tsx
+++ b/src/toast.tsx
@@ -1,10 +1,9 @@
 import { AxiosError } from 'axios';
-import React from 'react';
 import toast from 'react-hot-toast';
 import { defineMessages, MessageDescriptor } from 'react-intl';
 
-import { Toast } from './components/ui';
-import { httpErrorMessages } from './utils/errors';
+import Toast from 'soapbox/components/ui/toast.tsx';
+import { httpErrorMessages } from 'soapbox/utils/errors.ts';
 
 export type ToastText = string | MessageDescriptor
 export type ToastType = 'success' | 'error' | 'info'
diff --git a/src/types/entities.ts b/src/types/entities.ts
index 3936df856..82dc1dad5 100644
--- a/src/types/entities.ts
+++ b/src/types/entities.ts
@@ -17,11 +17,11 @@ import {
   StatusEditRecord,
   StatusRecord,
   TagRecord,
-} from 'soapbox/normalizers';
-import { Account as SchemaAccount } from 'soapbox/schemas';
+} from 'soapbox/normalizers/index.ts';
+import { Account as SchemaAccount } from 'soapbox/schemas/index.ts';
 
 import type { Record as ImmutableRecord } from 'immutable';
-import type { LegacyMap } from 'soapbox/utils/legacy';
+import type { LegacyMap } from 'soapbox/utils/legacy.ts';
 
 type AdminAccount = ReturnType<typeof AdminAccountRecord>;
 type AdminReport = ReturnType<typeof AdminReportRecord>;
@@ -53,7 +53,7 @@ interface Status extends ReturnType<typeof StatusRecord> {
 type APIEntity = Record<string, any>;
 type EmbeddedEntity<T extends object> = null | string | ReturnType<ImmutableRecord.Factory<T>>;
 
-export {
+export type {
   Account,
   AdminAccount,
   AdminReport,
@@ -88,4 +88,4 @@ export type {
   Poll,
   PollOption,
   Relationship,
-} from 'soapbox/schemas';
\ No newline at end of file
+} from 'soapbox/schemas/index.ts';
\ No newline at end of file
diff --git a/src/types/soapbox.ts b/src/types/soapbox.ts
index 459339750..b19e7f4e8 100644
--- a/src/types/soapbox.ts
+++ b/src/types/soapbox.ts
@@ -3,7 +3,7 @@ import {
   FooterItemRecord,
   CryptoAddressRecord,
   SoapboxConfigRecord,
-} from 'soapbox/normalizers/soapbox/soapbox-config';
+} from 'soapbox/normalizers/soapbox/soapbox-config.ts';
 
 type Me = string | null | false | undefined;
 
@@ -12,7 +12,7 @@ type FooterItem = ReturnType<typeof FooterItemRecord>;
 type CryptoAddress = ReturnType<typeof CryptoAddressRecord>;
 type SoapboxConfig = ReturnType<typeof SoapboxConfigRecord>;
 
-export {
+export type {
   Me,
   PromoPanelItem,
   FooterItem,
diff --git a/src/types/window.d.ts b/src/types/window.d.ts
deleted file mode 100644
index 7435f9dd2..000000000
--- a/src/types/window.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { NostrSigner } from '@nostrify/nostrify';
-
-declare global {
-  interface Window {
-    nostr?: NostrSigner;
-  }
-}
\ No newline at end of file
diff --git a/src/utils/accounts.ts b/src/utils/accounts.ts
index c23344e87..1006179b5 100644
--- a/src/utils/accounts.ts
+++ b/src/utils/accounts.ts
@@ -1,4 +1,7 @@
-import type { Account } from 'soapbox/schemas';
+import avatarMissing from 'soapbox/assets/images/avatar-missing.png';
+import headerMissing from 'soapbox/assets/images/header-missing.png';
+
+import type { Account } from 'soapbox/schemas/index.ts';
 
 const getDomainFromURL = (account: Pick<Account, 'url'>): string => {
   try {
@@ -30,7 +33,7 @@ export const getAcct = (account: Pick<Account, 'fqn' | 'acct'>, displayFqn: bool
 const DEFAULT_HEADERS: string[] = [
   '/headers/original/missing.png', // Mastodon
   '/images/banner.png', // Pleroma
-  require('soapbox/assets/images/header-missing.png'), // header not provided by backend
+  headerMissing, // header not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */
@@ -42,7 +45,7 @@ export const isDefaultHeader = (url: string) => {
 const DEFAULT_AVATARS = [
   '/avatars/original/missing.png', // Mastodon
   '/images/avi.png', // Pleroma
-  require('soapbox/assets/images/avatar-missing.png'), // avatar not provided by backend
+  avatarMissing, // avatar not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 34799cae5..f448aaee2 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,8 +1,8 @@
 import { List as ImmutableList } from 'immutable';
 
-import { selectAccount, selectOwnAccount } from 'soapbox/selectors';
+import { selectAccount, selectOwnAccount } from 'soapbox/selectors/index.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const validId = (id: any) => typeof id === 'string' && id !== 'null' && id !== 'undefined';
 
diff --git a/src/utils/badges.test.ts b/src/utils/badges.test.ts
index e2e7e78d3..4335e29cc 100644
--- a/src/utils/badges.test.ts
+++ b/src/utils/badges.test.ts
@@ -1,4 +1,6 @@
-import { buildAccount } from 'soapbox/jest/factory';
+import { expect, test } from 'vitest';
+
+import { buildAccount } from 'soapbox/jest/factory.ts';
 
 import {
   tagToBadge,
@@ -6,7 +8,7 @@ import {
   filterBadges,
   getTagDiff,
   getBadges,
-} from './badges';
+} from './badges.ts';
 
 test('tagToBadge', () => {
   expect(tagToBadge('yolo')).toEqual('badge:yolo');
diff --git a/src/utils/badges.ts b/src/utils/badges.ts
index cd2d84894..0d83b0c82 100644
--- a/src/utils/badges.ts
+++ b/src/utils/badges.ts
@@ -1,6 +1,6 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
-import type { Account } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/types/entities.ts';
 
 /** Convert a plain tag into a badge. */
 const tagToBadge = (tag: string) => `badge:${tag}`;
diff --git a/src/utils/base64.test.ts b/src/utils/base64.test.ts
index d2537d99b..444913cc3 100644
--- a/src/utils/base64.test.ts
+++ b/src/utils/base64.test.ts
@@ -1,4 +1,6 @@
-import { decodeBase64 } from './base64';
+import { describe, expect, it } from 'vitest';
+
+import { decodeBase64 } from './base64.ts';
 
 describe('decodeBase64', () => {
   it('returns a uint8 array', () => {
diff --git a/src/utils/chats.test.ts b/src/utils/chats.test.ts
index c7eb306c3..f98143ed3 100644
--- a/src/utils/chats.test.ts
+++ b/src/utils/chats.test.ts
@@ -1,9 +1,11 @@
-import { buildAccount } from 'soapbox/jest/factory';
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import { ChatKeys, IChat } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { updateChatMessage } from './chats';
+import { buildAccount } from 'soapbox/jest/factory.ts';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import { ChatKeys, IChat } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+
+import { updateChatMessage } from './chats.ts';
 
 const chat: IChat = {
   accepted: true,
diff --git a/src/utils/chats.ts b/src/utils/chats.ts
index 423565e49..53a60be7d 100644
--- a/src/utils/chats.ts
+++ b/src/utils/chats.ts
@@ -1,13 +1,13 @@
 import { InfiniteData } from '@tanstack/react-query';
 import sumBy from 'lodash/sumBy';
 
-import { normalizeChatMessage } from 'soapbox/normalizers';
-import { ChatKeys } from 'soapbox/queries/chats';
-import { queryClient } from 'soapbox/queries/client';
-import { Chat, ChatMessage } from 'soapbox/types/entities';
+import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
+import { ChatKeys } from 'soapbox/queries/chats.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import { Chat, ChatMessage } from 'soapbox/types/entities.ts';
 
-import { compareDate } from './comparators';
-import { appendPageItem, flattenPages, PaginatedResult, sortQueryData, updatePageItem } from './queries';
+import { compareDate } from './comparators.ts';
+import { appendPageItem, flattenPages, PaginatedResult, sortQueryData, updatePageItem } from './queries.ts';
 
 interface ChatPayload extends Omit<Chat, 'last_message'> {
   last_message: ChatMessage | null;
diff --git a/src/utils/code.ts b/src/utils/code.ts
index e42fb6dde..177cfca16 100644
--- a/src/utils/code.ts
+++ b/src/utils/code.ts
@@ -1,3 +1,3 @@
-import type { Code } from './code-compiletime';
+import type { Code } from './code-compiletime.ts';
 
 export default import.meta.compileTime<Code>('./code-compiletime.ts');
\ No newline at end of file
diff --git a/src/utils/colors.test.ts b/src/utils/colors.test.ts
index 787d5886e..13c5edd84 100644
--- a/src/utils/colors.test.ts
+++ b/src/utils/colors.test.ts
@@ -1,4 +1,6 @@
-import tintify from './colors';
+import { describe, expect, it } from 'vitest';
+
+import tintify from './colors.ts';
 
 const AZURE = '#0482d8';
 
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
index 277e73481..567c20c7d 100644
--- a/src/utils/colors.ts
+++ b/src/utils/colors.ts
@@ -25,7 +25,7 @@ SOFTWARE.
 // Adapted from:
 // https://github.com/javisperez/tailwindcolorshades/blob/master/src/composables/colors.ts
 
-import type { Rgb, TailwindColorObject } from 'soapbox/types/colors';
+import type { Rgb, TailwindColorObject } from 'soapbox/types/colors.ts';
 
 export function hexToRgb(hex: string): Rgb | null {
   const sanitizedHex = hex.replace(/##/g, '#');
diff --git a/src/utils/comparators.test.ts b/src/utils/comparators.test.ts
index c84e6982c..bbf714698 100644
--- a/src/utils/comparators.test.ts
+++ b/src/utils/comparators.test.ts
@@ -1,4 +1,6 @@
-import { compareId } from './comparators';
+import { expect, test } from 'vitest';
+
+import { compareId } from './comparators.ts';
 
 test('compareId', () => {
   expect(compareId('3', '3')).toBe(0);
diff --git a/src/utils/config-db.test.ts b/src/utils/config-db.test.ts
index db6a423cf..11c036e08 100644
--- a/src/utils/config-db.test.ts
+++ b/src/utils/config-db.test.ts
@@ -1,8 +1,9 @@
 import { List as ImmutableList, fromJS } from 'immutable';
+import { expect, test } from 'vitest';
 
 import config_db from 'soapbox/__fixtures__/config_db.json';
 
-import { ConfigDB } from './config-db';
+import { ConfigDB } from './config-db.ts';
 
 test('find', () => {
   const configs = fromJS(config_db).get('configs');
diff --git a/src/utils/config-db.ts b/src/utils/config-db.ts
index 4dbf3c163..cbea280e1 100644
--- a/src/utils/config-db.ts
+++ b/src/utils/config-db.ts
@@ -6,7 +6,7 @@ import {
 } from 'immutable';
 import trimStart from 'lodash/trimStart';
 
-import { type MRFSimple, mrfSimpleSchema } from 'soapbox/schemas/pleroma';
+import { type MRFSimple, mrfSimpleSchema } from 'soapbox/schemas/pleroma.ts';
 
 export type Config = ImmutableMap<string, any>;
 export type Policy = Record<string, any>;
diff --git a/src/utils/emoji-reacts.test.ts b/src/utils/emoji-reacts.test.ts
index af2c5c34b..eecc06861 100644
--- a/src/utils/emoji-reacts.test.ts
+++ b/src/utils/emoji-reacts.test.ts
@@ -1,7 +1,8 @@
 import { List as ImmutableList, fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { normalizeStatus } from 'soapbox/normalizers';
-import { emojiReactionSchema } from 'soapbox/schemas';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { emojiReactionSchema } from 'soapbox/schemas/index.ts';
 
 import {
   sortEmoji,
@@ -10,7 +11,7 @@ import {
   getReactForStatus,
   simulateEmojiReact,
   simulateUnEmojiReact,
-} from './emoji-reacts';
+} from './emoji-reacts.ts';
 
 const ALLOWED_EMOJI = ImmutableList([
   '👍',
diff --git a/src/utils/emoji-reacts.ts b/src/utils/emoji-reacts.ts
index 8bbdc07b1..3927060ea 100644
--- a/src/utils/emoji-reacts.ts
+++ b/src/utils/emoji-reacts.ts
@@ -1,6 +1,6 @@
 import { List as ImmutableList } from 'immutable';
 
-import { EmojiReaction, emojiReactionSchema } from 'soapbox/schemas';
+import { EmojiReaction, emojiReactionSchema } from 'soapbox/schemas/index.ts';
 
 // https://emojipedia.org/facebook
 // I've customized them.
diff --git a/src/utils/emoji.test.ts b/src/utils/emoji.test.ts
index 9880589c2..7587e57a5 100644
--- a/src/utils/emoji.test.ts
+++ b/src/utils/emoji.test.ts
@@ -1,7 +1,9 @@
+import { describe, expect, it } from 'vitest';
+
 import {
   removeVS16s,
   toCodePoints,
-} from './emoji';
+} from './emoji.ts';
 
 const ASCII_HEART = '❤'; // '\u2764\uFE0F'
 const RED_HEART_RGI = '❤️'; // '\u2764'
diff --git a/src/utils/features.test.ts b/src/utils/features.test.ts
index 248085876..d7208cecb 100644
--- a/src/utils/features.test.ts
+++ b/src/utils/features.test.ts
@@ -1,9 +1,11 @@
-import { buildInstance } from 'soapbox/jest/factory';
+import { describe, expect, it } from 'vitest';
+
+import { buildInstance } from 'soapbox/jest/factory.ts';
 
 import {
   parseVersion,
   getFeatures,
-} from './features';
+} from './features.ts';
 
 describe('parseVersion', () => {
   it('with Pleroma version string', () => {
diff --git a/src/utils/features.ts b/src/utils/features.ts
index 8a9b2b8dd..ff7b202cf 100644
--- a/src/utils/features.ts
+++ b/src/utils/features.ts
@@ -5,8 +5,8 @@ import gte from 'semver/functions/gte';
 import lt from 'semver/functions/lt';
 import semverParse from 'semver/functions/parse';
 
-import { custom } from 'soapbox/custom';
-import { InstanceV1, InstanceV2 } from 'soapbox/schemas/instance';
+import { custom } from 'soapbox/custom.ts';
+import { InstanceV1, InstanceV2 } from 'soapbox/schemas/instance.ts';
 
 /** Import custom overrides, if exists */
 const overrides = custom('features');
diff --git a/src/utils/groups.ts b/src/utils/groups.ts
index 5430d636c..8168f4eba 100644
--- a/src/utils/groups.ts
+++ b/src/utils/groups.ts
@@ -1,4 +1,4 @@
-import { groupSearchHistory } from 'soapbox/settings';
+import { groupSearchHistory } from 'soapbox/settings.ts';
 
 export const MAX_ADMIN_COUNT = 5;
 
diff --git a/src/utils/html.test.ts b/src/utils/html.test.ts
index cf0a62d1d..60ebfc7e6 100644
--- a/src/utils/html.test.ts
+++ b/src/utils/html.test.ts
@@ -1,4 +1,6 @@
-import * as html from './html';
+import { describe, expect, it } from 'vitest';
+
+import * as html from './html.ts';
 
 describe('html', () => {
   describe('unsecapeHTML', () => {
diff --git a/src/utils/input.test.ts b/src/utils/input.test.ts
index 4630126ea..6190408bd 100644
--- a/src/utils/input.test.ts
+++ b/src/utils/input.test.ts
@@ -1,4 +1,6 @@
-import { normalizeUsername } from './input';
+import { expect, test } from 'vitest';
+
+import { normalizeUsername } from './input.ts';
 
 test('normalizeUsername', () => {
   expect(normalizeUsername('@alex')).toBe('alex');
diff --git a/src/utils/media.test.ts b/src/utils/media.test.ts
index cbfdac026..22bf7fc44 100644
--- a/src/utils/media.test.ts
+++ b/src/utils/media.test.ts
@@ -1,4 +1,6 @@
-import { addAutoPlay } from './media';
+import { describe, expect, it } from 'vitest';
+
+import { addAutoPlay } from './media.ts';
 
 describe('addAutoPlay()', () => {
   describe('when the provider is Rumble', () => {
diff --git a/src/utils/notification.ts b/src/utils/notification.ts
index bfea82711..5b2c943cb 100644
--- a/src/utils/notification.ts
+++ b/src/utils/notification.ts
@@ -35,6 +35,6 @@ const validType = (type: string): type is NotificationType => NOTIFICATION_TYPES
 export {
   NOTIFICATION_TYPES,
   EXCLUDE_TYPES,
-  NotificationType,
+  type NotificationType,
   validType,
 };
diff --git a/src/utils/numbers.test.tsx b/src/utils/numbers.test.tsx
index 1d69e960d..0f7eba974 100644
--- a/src/utils/numbers.test.tsx
+++ b/src/utils/numbers.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { describe, expect, test } from 'vitest';
 
-import { render, screen } from 'soapbox/jest/test-helpers';
+import { render, screen } from 'soapbox/jest/test-helpers.tsx';
 
-import { isIntegerId, secondsToDays, shortNumberFormat } from './numbers';
+import { isIntegerId, secondsToDays, shortNumberFormat } from './numbers.tsx';
 
 test('isIntegerId()', () => {
   expect(isIntegerId('0')).toBe(true);
diff --git a/src/utils/numbers.tsx b/src/utils/numbers.tsx
index a35008c83..60f03294c 100644
--- a/src/utils/numbers.tsx
+++ b/src/utils/numbers.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FormattedNumber } from 'react-intl';
 import { z } from 'zod';
 
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index fb728a56e..e84f9049e 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -1,4 +1,4 @@
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 export const PERMISSION_CREATE_GROUPS  = 0x0000000000100000;
 export const PERMISSION_INVITE_USERS   = 0x0000000000010000;
diff --git a/src/utils/phone.ts b/src/utils/phone.ts
index 8fde39f12..c1e4179ea 100644
--- a/src/utils/phone.ts
+++ b/src/utils/phone.ts
@@ -14,6 +14,6 @@ const isCountryCode = (value: any): value is CountryCode => COUNTRY_CODES.includ
 
 export {
   COUNTRY_CODES,
-  CountryCode,
+  type CountryCode,
   isCountryCode,
 };
diff --git a/src/utils/queries.test.ts b/src/utils/queries.test.ts
index 72e1f809e..39e5f344a 100644
--- a/src/utils/queries.test.ts
+++ b/src/utils/queries.test.ts
@@ -1,8 +1,9 @@
 import { InfiniteData } from '@tanstack/react-query';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { queryClient } from 'soapbox/queries/client';
+import { queryClient } from 'soapbox/queries/client.ts';
 
-import { PaginatedResult, sortQueryData, updatePageItem } from './queries';
+import { PaginatedResult, sortQueryData, updatePageItem } from './queries.ts';
 
 interface Item {
   id: number;
diff --git a/src/utils/queries.ts b/src/utils/queries.ts
index 5932b2135..0c25cc819 100644
--- a/src/utils/queries.ts
+++ b/src/utils/queries.ts
@@ -1,4 +1,4 @@
-import { queryClient } from 'soapbox/queries/client';
+import { queryClient } from 'soapbox/queries/client.ts';
 
 import type { InfiniteData, QueryKey } from '@tanstack/react-query';
 
diff --git a/src/utils/redirect.ts b/src/utils/redirect.ts
index 84e22eb7c..6f42c1265 100644
--- a/src/utils/redirect.ts
+++ b/src/utils/redirect.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import type { Location } from 'soapbox/types/history';
+import type { Location } from 'soapbox/types/history.ts';
 
 const LOCAL_STORAGE_REDIRECT_KEY = 'soapbox:redirect-uri';
 
diff --git a/src/utils/scopes.ts b/src/utils/scopes.ts
index 27712c0c3..bd77ee9cf 100644
--- a/src/utils/scopes.ts
+++ b/src/utils/scopes.ts
@@ -1,7 +1,6 @@
+import { PLEROMA, parseVersion } from './features.ts';
 
-import { PLEROMA, parseVersion } from './features';
-
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 /**
  * Get the OAuth scopes to use for login & signup.
diff --git a/src/utils/state.ts b/src/utils/state.ts
index 27dbcf33b..9fda7a6a4 100644
--- a/src/utils/state.ts
+++ b/src/utils/state.ts
@@ -3,12 +3,12 @@
  * @module soapbox/utils/state
  */
 
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import * as BuildConfig from 'soapbox/build-config';
-import { selectOwnAccount } from 'soapbox/selectors';
-import { isURL } from 'soapbox/utils/auth';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox.ts';
+import * as BuildConfig from 'soapbox/build-config.ts';
+import { selectOwnAccount } from 'soapbox/selectors/index.ts';
+import { isURL } from 'soapbox/utils/auth.ts';
 
-import type { RootState } from 'soapbox/store';
+import type { RootState } from 'soapbox/store.ts';
 
 /** Whether to display the fqn instead of the acct. */
 export const displayFqn = (state: RootState): boolean => {
diff --git a/src/utils/static.ts b/src/utils/static.ts
index e85bd8723..266d975a1 100644
--- a/src/utils/static.ts
+++ b/src/utils/static.ts
@@ -5,7 +5,7 @@
 
 import { join } from 'path-browserify';
 
-import * as BuildConfig from 'soapbox/build-config';
+import * as BuildConfig from 'soapbox/build-config.ts';
 
 /** Gets the path to a file with build configuration being considered. */
 export const joinPublicPath = (...paths: string[]): string => {
diff --git a/src/utils/status.test.ts b/src/utils/status.test.ts
index 4cdb8f8f5..168e2952c 100644
--- a/src/utils/status.test.ts
+++ b/src/utils/status.test.ts
@@ -1,10 +1,11 @@
+import { describe, expect, it } from 'vitest';
 
-import { buildStatus } from 'soapbox/jest/factory';
+import { buildStatus } from 'soapbox/jest/factory.ts';
 
 import {
   hasIntegerMediaIds,
   defaultMediaVisibility,
-} from './status';
+} from './status.ts';
 
 describe('hasIntegerMediaIds()', () => {
   it('returns true for a Pleroma deleted status', async () => {
diff --git a/src/utils/status.ts b/src/utils/status.ts
index 8d99752cd..78c6171bd 100644
--- a/src/utils/status.ts
+++ b/src/utils/status.ts
@@ -1,7 +1,7 @@
-import { isIntegerId } from 'soapbox/utils/numbers';
+import { isIntegerId } from 'soapbox/utils/numbers.tsx';
 
 import type { IntlShape } from 'react-intl';
-import type { Status } from 'soapbox/schemas';
+import type { Status } from 'soapbox/schemas/index.ts';
 
 /** Get the initial visibility of media attachments from user settings. */
 export const defaultMediaVisibility = <T extends { reblog: T | string | null } & Pick<Status, 'visibility' | 'sensitive'>>(
diff --git a/src/utils/tailwind.test.ts b/src/utils/tailwind.test.ts
index f234d5ac3..bdd7ba7fe 100644
--- a/src/utils/tailwind.test.ts
+++ b/src/utils/tailwind.test.ts
@@ -1,6 +1,7 @@
 import { Map as ImmutableMap } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { toTailwind, fromLegacyColors, expandPalette } from './tailwind';
+import { toTailwind, fromLegacyColors, expandPalette } from './tailwind.ts';
 
 describe('toTailwind()', () => {
   it('handles empty Soapbox config', () => {
diff --git a/src/utils/tailwind.ts b/src/utils/tailwind.ts
index 2209573a5..b95e2a898 100644
--- a/src/utils/tailwind.ts
+++ b/src/utils/tailwind.ts
@@ -1,9 +1,9 @@
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
-import tintify from 'soapbox/utils/colors';
-import { generateAccent, generateNeutral } from 'soapbox/utils/theme';
+import tintify from 'soapbox/utils/colors.ts';
+import { generateAccent, generateNeutral } from 'soapbox/utils/theme.ts';
 
-import type { TailwindColorPalette } from 'soapbox/types/colors';
+import type { TailwindColorPalette } from 'soapbox/types/colors.ts';
 
 type SoapboxConfig = ImmutableMap<string, any>;
 type SoapboxColors = ImmutableMap<string, any>;
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index a6b80bcd6..6c4c4e18b 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,7 +1,7 @@
-import { hexToRgb } from './colors';
+import { hexToRgb } from './colors.ts';
 
-import type { Rgb, Hsl, TailwindColorPalette, TailwindColorObject } from 'soapbox/types/colors';
-import type { SoapboxConfig } from 'soapbox/types/soapbox';
+import type { Rgb, Hsl, TailwindColorPalette, TailwindColorObject } from 'soapbox/types/colors.ts';
+import type { SoapboxConfig } from 'soapbox/types/soapbox.ts';
 
 // Taken from chromatism.js
 // https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js
diff --git a/src/utils/timelines.test.ts b/src/utils/timelines.test.ts
index 9d27265f1..9e163b899 100644
--- a/src/utils/timelines.test.ts
+++ b/src/utils/timelines.test.ts
@@ -1,8 +1,9 @@
 import { fromJS } from 'immutable';
+import { describe, expect, it } from 'vitest';
 
-import { buildStatus } from 'soapbox/jest/factory';
+import { buildStatus } from 'soapbox/jest/factory.ts';
 
-import { shouldFilter } from './timelines';
+import { shouldFilter } from './timelines.ts';
 
 describe('shouldFilter', () => {
   it('returns false under normal circumstances', () => {
diff --git a/src/utils/timelines.ts b/src/utils/timelines.ts
index b6052cbcc..166604fe4 100644
--- a/src/utils/timelines.ts
+++ b/src/utils/timelines.ts
@@ -1,6 +1,6 @@
 import { Map as ImmutableMap, type Collection } from 'immutable';
 
-import type { Status } from 'soapbox/schemas';
+import type { Status } from 'soapbox/schemas/index.ts';
 
 export const shouldFilter = (
   status: Pick<Status, 'in_reply_to_id' | 'visibility'> & { reblog: unknown },
diff --git a/src/workers.ts b/src/workers.ts
index 098aaa15c..24bd2b3e8 100644
--- a/src/workers.ts
+++ b/src/workers.ts
@@ -1,6 +1,6 @@
 import * as Comlink from 'comlink';
 
-import type { PowWorker } from './workers/pow.worker';
+import type { PowWorker } from './workers/pow.worker.ts';
 
 const powWorker = Comlink.wrap<typeof PowWorker>(
   new Worker(new URL('./workers/pow.worker.ts', import.meta.url), { type: 'module' }),
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 004be35ca..dfcd0472e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,7 @@ import typographyPlugin from '@tailwindcss/typography';
 import { type Config } from 'tailwindcss';
 import plugin from 'tailwindcss/plugin';
 
-import { parseColorMatrix } from './tailwind/colors';
+import { parseColorMatrix } from './tailwind/colors.ts';
 
 const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
 
diff --git a/tailwind/colors.test.ts b/tailwind/colors.test.ts
index 426de1db2..bd66e74b2 100644
--- a/tailwind/colors.test.ts
+++ b/tailwind/colors.test.ts
@@ -1,7 +1,9 @@
+import { describe, expect, it } from 'vitest';
+
 import {
   withOpacityValue,
   parseColorMatrix,
-} from './colors';
+} from './colors.ts';
 
 describe('withOpacityValue()', () => {
   it('returns a Tailwind color function with alpha support', () => {
diff --git a/tsconfig.json b/tsconfig.json
index 806a33b46..a71aa20ed 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,31 +1,30 @@
 {
   "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "dist",
-    "sourceMap": true,
-    "strict": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
     "target": "ESNext",
-    "jsx": "react",
-    "allowJs": true,
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
+    "outDir": "dist",
     "paths": {
-      "soapbox/*": ["src/*"],
+      "soapbox/*": ["./src/*"],
     },
-    "typeRoots": [
-      "./src/types",
-      "./node_modules/@types",
-      "./node_modules"
-    ],
     "types": [
       "vite/client",
-      "vitest/globals",
-      "vite-plugin-compile-time/client",
       "@webbtc/webln-types"
-    ]
+    ],
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index 21836551e..c056a0a4d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,121 +1,151 @@
-/* eslint-disable quotes */
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import fs from 'node:fs';
 import { fileURLToPath, URL } from 'node:url';
 
-import react from '@vitejs/plugin-react';
+import react from '@vitejs/plugin-react-swc';
 import { visualizer } from 'rollup-plugin-visualizer';
-import { defineConfig } from 'vite';
+import { Connect, defineConfig, Plugin, UserConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 import compileTime from 'vite-plugin-compile-time';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { VitePWA } from 'vite-plugin-pwa';
-import vitePluginRequire from 'vite-plugin-require';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
-const { NODE_ENV } = process.env;
+const { NODE_ENV, PORT } = process.env;
 
-export default defineConfig(({ command }) => ({
-  build: {
-    assetsDir: 'packs',
-    assetsInlineLimit: 0,
-    rollupOptions: {
-      output: {
-        assetFileNames: 'packs/assets/[name]-[hash].[ext]',
-        chunkFileNames: 'packs/js/[name]-[hash].js',
-        entryFileNames: 'packs/[name]-[hash].js',
-      },
-    },
-    sourcemap: true,
-  },
-  assetsInclude: ['**/*.oga'],
-  server: {
-    port: Number(process.env.PORT ?? 3036),
-  },
-  optimizeDeps: {
-    exclude: command === 'serve' ? ['@soapbox.pub/wasmboy'] : [],
-  },
-  plugins: [
-    checker({ typescript: true }),
-    // @ts-ignore
-    vitePluginRequire.default(),
-    compileTime(),
-    createHtmlPlugin({
-      template: 'index.html',
-      minify: {
-        collapseWhitespace: true,
-        removeComments: false,
-      },
-      inject: {
-        data: {
-          snippets: readFileContents('custom/snippets.html'),
-          csp: NODE_ENV === 'production'
-            ? "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';"
-            : "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss: http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: https: http://localhost:* http://127.0.0.1:*; media-src 'self' https: http://localhost:* http://127.0.0.1:*; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';",
+export default defineConfig(() => {
+  const config: UserConfig = {
+    build: {
+      assetsDir: 'packs',
+      assetsInlineLimit: 0,
+      rollupOptions: {
+        output: {
+          assetFileNames: 'packs/assets/[name]-[hash].[ext]',
+          chunkFileNames: 'packs/js/[name]-[hash].js',
+          entryFileNames: 'packs/[name]-[hash].js',
         },
       },
-    }),
-    react(),
-    VitePWA({
-      injectRegister: null,
-      strategies: 'injectManifest',
-      injectManifest: {
-        injectionPoint: undefined,
-        plugins: [
-          // @ts-ignore
-          compileTime(),
-        ],
-      },
-      manifest: {
-        name: 'Soapbox',
-        short_name: 'Soapbox',
-        description: 'A social media frontend with a focus on custom branding and ease of use.',
-      },
-      srcDir: 'src/service-worker',
-      filename: 'sw.ts',
-    }),
-    viteStaticCopy({
-      targets: [{
-        src: './node_modules/@twemoji/svg/*',
-        dest: 'packs/emoji/',
-      }, {
-        src: './src/instance',
-        dest: '.',
-      }, {
-        src: './custom/instance',
-        dest: '.',
-      }],
-    }),
-    visualizer({
-      emitFile: true,
-      filename: 'report.html',
-      title: 'Soapbox Bundle',
-    }),
-    {
-      name: 'mock-api',
-      configureServer(server) {
-        server.middlewares.use((req, res, next) => {
-          if (/^\/api\//.test(req.url!)) {
-            res.statusCode = 404;
-            res.end('Not Found');
-          } else {
-            next();
-          }
-        });
-      },
+      sourcemap: true,
     },
-  ],
-  resolve: {
-    alias: [
-      { find: 'soapbox', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
+    assetsInclude: ['**/*.oga'],
+    server: {
+      port: Number(PORT ?? 3036),
+    },
+    plugins: [
+      checker({ typescript: true }),
+      compileTime(),
+      createHtmlPlugin({
+        template: 'index.html',
+        minify: {
+          collapseWhitespace: true,
+          removeComments: false,
+        },
+        inject: {
+          data: {
+            snippets: readFileContents('custom/snippets.html'),
+            csp: buildCSP(NODE_ENV),
+          },
+        },
+      }),
+      react(),
+      VitePWA({
+        injectRegister: null,
+        strategies: 'injectManifest',
+        injectManifest: {
+          injectionPoint: undefined,
+          plugins: [
+            // @ts-ignore
+            compileTime(),
+          ],
+        },
+        manifest: {
+          name: 'Soapbox',
+          short_name: 'Soapbox',
+          description: 'A social media frontend with a focus on custom branding and ease of use.',
+          theme_color: '#0482d8',
+        },
+        srcDir: 'src/service-worker',
+        filename: 'sw.ts',
+      }),
+      viteStaticCopy({
+        targets: [{
+          src: './node_modules/@twemoji/svg/*',
+          dest: 'packs/emoji/',
+        }, {
+          src: './src/instance',
+          dest: '.',
+        }, {
+          src: './custom/instance',
+          dest: '.',
+        }],
+      }),
+      visualizer({
+        emitFile: true,
+        filename: 'report.html',
+        title: 'Soapbox Bundle',
+      }) as Plugin,
+      {
+        // Vite's default behavior is to serve index.html (HTTP 200) for unmatched routes, like a PWA.
+        // Instead, 404 on known backend routes to more closely match a real server.
+        name: 'vite-mastodon-dev',
+        configureServer(server) {
+          const notFoundHandler: Connect.SimpleHandleFunction = (_req, res) => {
+            res.statusCode = 404;
+            res.end();
+          };
+
+          server.middlewares.use('/api/', notFoundHandler);
+          server.middlewares.use('/oauth/', notFoundHandler);
+          server.middlewares.use('/nodeinfo/', notFoundHandler);
+          server.middlewares.use('/.well-known/', notFoundHandler);
+        },
+      },
     ],
-  },
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: 'src/jest/test-setup.ts',
-  },
-}));
+    resolve: {
+      alias: [
+        { find: 'soapbox', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
+      ],
+    },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: 'src/jest/test-setup.ts',
+    },
+  };
+
+  return config;
+});
+
+/** Build a sane default CSP string to embed in index.html in case the server doesn't return one. */
+/* eslint-disable quotes */
+function buildCSP(env: string | undefined): string {
+  const csp = [
+    "default-src 'none'",
+    "script-src 'self' 'wasm-unsafe-eval'",
+    "style-src 'self' 'unsafe-inline'",
+    "frame-src 'self' https:",
+    "font-src 'self'",
+    "base-uri 'self'",
+    "manifest-src 'self'",
+  ];
+
+  if (env === 'development') {
+    csp.push(
+      "connect-src 'self' blob: https: wss: http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*",
+      "img-src 'self' data: blob: https: http://localhost:* http://127.0.0.1:*",
+      "media-src 'self' https: http://localhost:* http://127.0.0.1:*",
+    );
+  } else {
+    csp.push(
+      "connect-src 'self' blob: https: wss:",
+      "img-src 'self' data: blob: https:",
+      "media-src 'self' https:",
+    );
+  }
+
+  return csp.join('; ');
+}
+/* eslint-enable quotes */
 
 /** Return file as string, or return empty string if the file isn't found. */
 function readFileContents(path: string) {
diff --git a/yarn.lock b/yarn.lock
index b6f1e70d8..e1add8d3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -52,7 +52,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.4.tgz#7d2a80ce229890edcf4cc259d4d696cb4dae2fcb"
   integrity sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==
 
-"@babel/core@^7.24.4", "@babel/core@^7.24.5":
+"@babel/core@^7.24.4":
   version "7.25.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.2.tgz#ed8eec275118d7613e77a352894cd12ded8eba77"
   integrity sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
@@ -73,7 +73,7 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.24.5", "@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
+"@babel/generator@^7.25.0", "@babel/generator@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
   integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
@@ -195,7 +195,7 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
   integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
@@ -282,7 +282,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.24.5", "@babel/parser@^7.25.0", "@babel/parser@^7.25.3", "@babel/parser@^7.25.6":
+"@babel/parser@^7.25.0", "@babel/parser@^7.25.6":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
   integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
@@ -743,20 +743,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-react-jsx-self@^7.24.5":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz#66bff0248ea0b549972e733516ffad577477bdab"
-  integrity sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-
-"@babel/plugin-transform-react-jsx-source@^7.24.1":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz#1198aab2548ad19582013815c938d3ebd8291ee3"
-  integrity sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-
 "@babel/plugin-transform-regenerator@^7.22.10":
   version "7.22.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz#8ceef3bd7375c4db7652878b0241b2be5d0c3cca"
@@ -962,7 +948,7 @@
     "@babel/parser" "^7.25.0"
     "@babel/types" "^7.25.0"
 
-"@babel/traverse@^7.24.5", "@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
+"@babel/traverse@^7.24.7", "@babel/traverse@^7.25.2":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
   integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
@@ -975,7 +961,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.5", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.4.4":
+"@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.25.6", "@babel/types@^7.4.4":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
   integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
@@ -1341,18 +1327,10 @@
   resolved "https://registry.yarnpkg.com/@fontsource/vazirmatn/-/vazirmatn-5.0.20.tgz#9e8d56b712f6c397e7a6c63498a2fecca9fde9a3"
   integrity sha512-5h9bKrZjJ3U7C5tj2OtGdDBWGzS+acOOFhlonYlNekS4vNzcwMU7qkKADHTZYGQrMqhpUNKqGwHEHlxXqZpXmQ==
 
-"@formatjs/cli@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-6.2.0.tgz#17fbd40753eeb1f6e79c3caf25845c3a9c044d90"
-  integrity sha512-sP04UpocRHYwSovUnunAZHYvCTVbNcaLtWKnr1lETGRUnRRQqnXy/3d2Ce271ELXmNUSde2eHRdu4rv2XaVaiQ==
-
-"@formatjs/ecma402-abstract@1.17.2":
-  version "1.17.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz#d197c6e26b9fd96ff7ba3b3a0cc2f25f1f2dcac3"
-  integrity sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==
-  dependencies:
-    "@formatjs/intl-localematcher" "0.4.2"
-    tslib "^2.4.0"
+"@formatjs/cli@^6.3.8":
+  version "6.3.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/cli/-/cli-6.3.8.tgz#3b44eab797b04d796c9558072fc3f9c5e6917042"
+  integrity sha512-zXUkIdPE+L+nu5A6mgEsIuB5tX369C7FnqR1aRHj33zvj/G5fwuyJZiavZCdR/XAvDWflKza6/pMVC91fNlR/w==
 
 "@formatjs/ecma402-abstract@1.18.2":
   version "1.18.2"
@@ -1362,6 +1340,15 @@
     "@formatjs/intl-localematcher" "0.5.4"
     tslib "^2.4.0"
 
+"@formatjs/ecma402-abstract@2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.3.tgz#dc5a032e1971c709b32b9ab511fa35504a7d3bc9"
+  integrity sha512-aElGmleuReGnk2wtYOzYFmNWYoiWWmf1pPPCYg0oiIQSJj0mjc4eUfzUXaSOJ4S8WzI/cLqnCTWjqz904FT2OQ==
+  dependencies:
+    "@formatjs/fast-memoize" "2.2.3"
+    "@formatjs/intl-localematcher" "0.5.7"
+    tslib "2"
+
 "@formatjs/fast-memoize@2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz#33bd616d2e486c3e8ef4e68c99648c196887802b"
@@ -1369,14 +1356,12 @@
   dependencies:
     tslib "^2.4.0"
 
-"@formatjs/icu-messageformat-parser@2.6.2":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.6.2.tgz#9bbb29099416e4ce2c7df50029c48985d4f901b3"
-  integrity sha512-nF/Iww7sc5h+1MBCDRm68qpHTCG4xvGzYs/x9HFcDETSGScaJ1Fcadk5U/NXjXeCtzD+DhN4BAwKFVclHfKMdA==
+"@formatjs/fast-memoize@2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.3.tgz#74e64109279d5244f9fc281f3ae90c407cece823"
+  integrity sha512-3jeJ+HyOfu8osl3GNSL4vVHUuWFXR03Iz9jjgI7RwjG6ysu/Ymdr0JRCPHfF5yGbTE6JCrd63EpvX1/WybYRbA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/icu-skeleton-parser" "1.6.2"
-    tslib "^2.4.0"
+    tslib "2"
 
 "@formatjs/icu-messageformat-parser@2.7.6":
   version "2.7.6"
@@ -1387,13 +1372,14 @@
     "@formatjs/icu-skeleton-parser" "1.8.0"
     tslib "^2.4.0"
 
-"@formatjs/icu-skeleton-parser@1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.2.tgz#00303034dc08583973c8aa67b96534c49c0bad8d"
-  integrity sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==
+"@formatjs/icu-messageformat-parser@2.9.3":
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.9.3.tgz#7785cb48ba980ebcbe67a0a3fe12837032b95518"
+  integrity sha512-9L99QsH14XjOCIp4TmbT8wxuffJxGK8uLNO1zNhLtcZaVXvv626N0s4A2qgRCKG3dfYWx9psvGlFmvyVBa6u/w==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/icu-skeleton-parser" "1.8.7"
+    tslib "2"
 
 "@formatjs/icu-skeleton-parser@1.8.0":
   version "1.8.0"
@@ -1403,30 +1389,31 @@
     "@formatjs/ecma402-abstract" "1.18.2"
     tslib "^2.4.0"
 
-"@formatjs/intl-displaynames@6.5.2":
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.5.2.tgz#b14ffd0962d5b5cfd71457efc389f0bca83a00db"
-  integrity sha512-uC2VBlz+WydGTDDpJwMTQuPH3CUpTricr91WH1QMfz5oEHg2sB7mUERcZONE/lu8MOe1jREIx4vBciZEVTqkmA==
+"@formatjs/icu-skeleton-parser@1.8.7":
+  version "1.8.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.7.tgz#c0c21d75428bf7213ac23a0efbf4dbfa868b800d"
+  integrity sha512-fI+6SmS2g7h3srfAKSWa5dwreU5zNEfon2uFo99OToiLF6yxGE+WikvFSbsvMAYkscucvVmTYNlWlaDPp0n5HA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/intl-localematcher" "0.4.2"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    tslib "2"
 
-"@formatjs/intl-listformat@7.4.2":
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.4.2.tgz#c8d86d3b15eead41f74748d1c79d6450fd1bad82"
-  integrity sha512-+6bSVudEQkf12Hh7kuKt8Xv/MyFlqdwA4V4NLnTZW8uYdF9RxlOELDD0rPaOc2++TMKIzI5o6XXwHPvpL6VrPA==
+"@formatjs/intl-displaynames@6.8.4":
+  version "6.8.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.8.4.tgz#5fbfa6fa08fd306bf4ed6f056eba12a71404cbbd"
+  integrity sha512-HDVNBspDAOW0yTWluWTPHX2fk/9iBO4oST4R96f/IUaPGsFtjsHrpakwc+XDRPa3U5RniSEU2z34ZY0W78+E6Q==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/intl-localematcher" "0.4.2"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/intl-localematcher" "0.5.7"
+    tslib "2"
 
-"@formatjs/intl-localematcher@0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz#7e6e596dbaf2f0c5a7c22da5a01d5c55f4c37e9a"
-  integrity sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==
+"@formatjs/intl-listformat@7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.7.4.tgz#a102e418f4b7846317e8835a31eecd670c428d0a"
+  integrity sha512-lipFspH2MZcoeXxR6WSR/Jy9unzJ/iT0w+gbL8vgv25Ap0S9cUtcDVAce4ECEKI1bDtAvEU3b6+9Dha27gAikA==
   dependencies:
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/intl-localematcher" "0.5.7"
+    tslib "2"
 
 "@formatjs/intl-localematcher@0.5.4":
   version "0.5.4"
@@ -1435,30 +1422,37 @@
   dependencies:
     tslib "^2.4.0"
 
-"@formatjs/intl@2.9.3":
-  version "2.9.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.9.3.tgz#e570c4b1afb173dfb1f80a42624425dde9841329"
-  integrity sha512-hclPdyCF1zk2XmhgdXfl5Sd30QEdRBnIijH7Vc1AWz2K0/saVRrxuL3UYn+m3xEyfOa4yDbTWVbmXDL0XEzlsQ==
+"@formatjs/intl-localematcher@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.7.tgz#f889d076881b785d11ff993b966f527d199436d0"
+  integrity sha512-GGFtfHGQVFe/niOZp24Kal5b2i36eE2bNL0xi9Sg/yd0TR8aLjcteApZdHmismP5QQax1cMnZM9yWySUUjJteA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/fast-memoize" "2.2.0"
-    "@formatjs/icu-messageformat-parser" "2.6.2"
-    "@formatjs/intl-displaynames" "6.5.2"
-    "@formatjs/intl-listformat" "7.4.2"
-    intl-messageformat "10.5.3"
-    tslib "^2.4.0"
+    tslib "2"
 
-"@formatjs/ts-transformer@3.13.12":
-  version "3.13.12"
-  resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-3.13.12.tgz#5984b7b92492580bfd09deb09a5b57589b757c5f"
-  integrity sha512-uf1+DgbsCrzHAg7uIf0QlzpIkHYxRSRig5iJa9FaoUNIDZzNEE2oW/uLLLq7I9Z2FLIPhbmgq8hbW40FoQv+Fg==
+"@formatjs/intl@2.10.14":
+  version "2.10.14"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.10.14.tgz#3de1c6dfb39c286a4f48125740d45a5cb4dc3923"
+  integrity sha512-4CA1EO75i/mSMHdjwfpgRj3Rsdsm6WjALeu/nlzYhBmAPxGu/Ha5GIRHAet5SO05TnpmqxmEGOsskWqFm0IeoA==
   dependencies:
-    "@formatjs/icu-messageformat-parser" "2.7.6"
-    "@types/json-stable-stringify" "^1.0.32"
-    "@types/node" "14 || 16 || 17"
-    chalk "^4.0.0"
-    json-stable-stringify "^1.0.1"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/fast-memoize" "2.2.3"
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    "@formatjs/intl-displaynames" "6.8.4"
+    "@formatjs/intl-listformat" "7.7.4"
+    intl-messageformat "10.7.6"
+    tslib "2"
+
+"@formatjs/ts-transformer@3.13.22":
+  version "3.13.22"
+  resolved "https://registry.yarnpkg.com/@formatjs/ts-transformer/-/ts-transformer-3.13.22.tgz#accab986f60039e5fa0e0a8088e5cb9c599c4e8b"
+  integrity sha512-+Zfz0wZ6wkdQE2zePiIQWIf4dVWeJGFXjkZxoCwzqxXdDrRhyAsQm91kbdFRIcVrjILA6KV0gOz8X7OBbLP4fQ==
+  dependencies:
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    "@types/json-stable-stringify" "1"
+    "@types/node" "14 || 16 || 17 || 18 || 20 || 22"
+    chalk "4"
+    json-stable-stringify "1"
+    tslib "2"
     typescript "5"
 
 "@gamestdio/websocket@^0.3.2":
@@ -1559,7 +1553,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
-"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.25"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -2349,6 +2343,87 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@swc/core-darwin-arm64@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.9.1.tgz#0fd83e5febe1044c7b12f128089cb8b213e14d0b"
+  integrity sha512-2/ncHSCdAh5OHem1fMITrWEzzl97OdMK1PHc9CkxSJnphLjRubfxB5sbc5tDhcO68a5tVy+DxwaBgDec3PXnOg==
+
+"@swc/core-darwin-x64@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.9.1.tgz#da28fcd37207655d2ad34dcb0d0819f20decb57a"
+  integrity sha512-4MDOFC5zmNqRJ9RGFOH95oYf27J9HniLVpB1pYm2gGeNHdl2QvDMtx2QTuMHQ6+OTn/3y1BHYuhBGp7d405oLA==
+
+"@swc/core-linux-arm-gnueabihf@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.9.1.tgz#dde1a15d1b88a6be000bbcecebe301227eb76c57"
+  integrity sha512-eVW/BjRW8/HpLe3+1jRU7w7PdRLBgnEEYTkHJISU8805/EKT03xNZn6CfaBpKfeAloY4043hbGzE/NP9IahdpQ==
+
+"@swc/core-linux-arm64-gnu@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.9.1.tgz#8b6d15b56597ba5e097932d3a305e88c3d749cec"
+  integrity sha512-8m3u1v8R8NgI/9+cHMkzk14w87blSy3OsQPWPfhOL+XPwhyLPvat+ahQJb2nZmltjTgkB4IbzKFSfbuA34LmNA==
+
+"@swc/core-linux-arm64-musl@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.9.1.tgz#dd822efe61b2bbbd378e6ca8d80b4ba992c34ad8"
+  integrity sha512-hpT0sQAZnW8l02I289yeyFfT9llGO9PzKDxUq8pocKtioEHiElRqR53juCWoSmzuWi+6KX7zUJ0NKCBrc8pmDg==
+
+"@swc/core-linux-x64-gnu@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.9.1.tgz#d02c63e96d4137c988e71189ccf1c40deb43b4cc"
+  integrity sha512-sGFdpdAYusk/ropHiwtXom2JrdaKPxl8MqemRv6dvxZq1Gm/GdmOowxdXIPjCgBGMgoXVcgNviH6CgiO5q+UtA==
+
+"@swc/core-linux-x64-musl@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.9.1.tgz#a8736ddb8e573aa59ccceb50813badff806b299b"
+  integrity sha512-YtNLNwIWs0Z2+XgBs6+LrCIGtfCDtNr4S4b6Q5HDOreEIGzSvhkef8eyBI5L+fJ2eGov4b7iEo61C4izDJS5RA==
+
+"@swc/core-win32-arm64-msvc@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.9.1.tgz#91c75fe95cd7bb7f7ae85c6b3bd405af63dc5984"
+  integrity sha512-qSxD3uZW2vSiHqUt30vUi0PB92zDh9bjqh5YKpfhhVa7h1vt/xXhlid8yMvSNToTfzhRrTEffOAPUr7WVoyQUA==
+
+"@swc/core-win32-ia32-msvc@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.9.1.tgz#e2ea0be7ca34b642b3adbb6c1fad34fb7874514b"
+  integrity sha512-C3fPEwyX/WRPlX6zIToNykJuz1JkZX0sk8H1QH2vpnKuySUkt/Ur5K2FzLgSWzJdbfxstpgS151/es0VGAD+ZA==
+
+"@swc/core-win32-x64-msvc@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.9.1.tgz#c9e532a791fdf44e3c9635135b1026f140d06483"
+  integrity sha512-2XZ+U1AyVsOAXeH6WK1syDm7+gwTjA8fShs93WcbxnK7HV+NigDlvr4124CeJLTHyh3fMh1o7+CnQnaBJhlysQ==
+
+"@swc/core@^1.7.26":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.9.1.tgz#1a1b8378e4b64b74e7f932014ca800ea6133ac27"
+  integrity sha512-OnPc+Kt5oy3xTvr/KCUOqE9ptJcWbyQgAUr1ydh9EmbBcmJTaO1kfQCxm/axzJi6sKeDTxL9rX5zvLOhoYIaQw==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+    "@swc/types" "^0.1.14"
+  optionalDependencies:
+    "@swc/core-darwin-arm64" "1.9.1"
+    "@swc/core-darwin-x64" "1.9.1"
+    "@swc/core-linux-arm-gnueabihf" "1.9.1"
+    "@swc/core-linux-arm64-gnu" "1.9.1"
+    "@swc/core-linux-arm64-musl" "1.9.1"
+    "@swc/core-linux-x64-gnu" "1.9.1"
+    "@swc/core-linux-x64-musl" "1.9.1"
+    "@swc/core-win32-arm64-msvc" "1.9.1"
+    "@swc/core-win32-ia32-msvc" "1.9.1"
+    "@swc/core-win32-x64-msvc" "1.9.1"
+
+"@swc/counter@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/types@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.14.tgz#0a0a3f60f801c5d7d52ab02fd5f924d9c6dbcb0d"
+  integrity sha512-PbSmTiYCN+GMrvfjrMo9bdY+f2COnwbdnoMw7rqU/PI5jXpKjxOGZ0qqZCImxnT81NkNsKnmEpvu+hRXLBeCJg==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+
 "@szmarczak/http-timer@^4.0.5":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"
@@ -2460,39 +2535,6 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
   integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
 
-"@types/babel__core@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
-  integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
-  dependencies:
-    "@babel/parser" "^7.20.7"
-    "@babel/types" "^7.20.7"
-    "@types/babel__generator" "*"
-    "@types/babel__template" "*"
-    "@types/babel__traverse" "*"
-
-"@types/babel__generator@*":
-  version "7.6.8"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
-  integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@types/babel__template@*":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"
-  integrity sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@types/babel__traverse@*":
-  version "7.20.6"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.6.tgz#8dc9f0ae0f202c08d8d4dab648912c8d6038e3f7"
-  integrity sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==
-  dependencies:
-    "@babel/types" "^7.20.7"
-
 "@types/cacheable-request@^6.0.1":
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.3.tgz#a430b3260466ca7b5ca5bfd735693b36e7a9d183"
@@ -2515,18 +2557,10 @@
   resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.1.tgz#b19b4646915f0ae2c306bf984dc0a59c5cfc97ba"
   integrity sha512-4mI1FuUUZiuT95fSVqvZxp/ssQK9zsa86S43h9x3zPOSU9BBJ+BfDkXwuaU7BfsD+e7U0/cUUfJFk3iW2M4okA==
 
-"@types/eslint-scope@^3.7.3":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
-  integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
-  dependencies:
-    "@types/eslint" "*"
-    "@types/estree" "*"
-
-"@types/eslint@*", "@types/eslint@7 || 8":
-  version "8.56.6"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.6.tgz#d5dc16cac025d313ee101108ba5714ea10eb3ed0"
-  integrity sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A==
+"@types/eslint@9":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
+  integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -2551,10 +2585,10 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
   integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+"@types/hoist-non-react-statics@3":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
   dependencies:
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
@@ -2571,15 +2605,15 @@
   dependencies:
     "@types/node" "*"
 
-"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.12", "@types/json-schema@^7.0.9":
   version "7.0.13"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85"
   integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==
 
-"@types/json-stable-stringify@^1.0.32":
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.34.tgz#c0fb25e4d957e0ee2e497c1f553d7f8bb668fd75"
-  integrity sha512-s2cfwagOQAS8o06TcwKfr9Wx11dNGbH2E9vJz1cqV+a/LOyhWNLUNd6JSRYNzvB4d29UuJX2M0Dj9vE1T8fRXw==
+"@types/json-stable-stringify@1":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.1.0.tgz#41393e6b7a9a67221607346af4a79783aeb28aea"
+  integrity sha512-ESTsHWB72QQq+pjUFIbEz9uSCZppD31YrVkbt2rnUciTYEvcwN6uZIhX5JZeBHqRlFJ41x/7MewCs7E2Qux6Cg==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
@@ -2605,11 +2639,18 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
   integrity sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==
 
-"@types/node@*", "@types/node@14 || 16 || 17":
+"@types/node@*":
   version "17.0.45"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
   integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
 
+"@types/node@14 || 16 || 17 || 18 || 20 || 22":
+  version "22.9.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.0.tgz#b7f16e5c3384788542c72dc3d561a7ceae2c0365"
+  integrity sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==
+  dependencies:
+    undici-types "~6.19.8"
+
 "@types/object-assign@^4.0.30":
   version "4.0.30"
   resolved "https://registry.yarnpkg.com/@types/object-assign/-/object-assign-4.0.30.tgz#8949371d5a99f4381ee0f1df0a9b7a187e07e652"
@@ -2625,10 +2666,10 @@
   resolved "https://registry.yarnpkg.com/@types/path-browserify/-/path-browserify-1.0.0.tgz#294ec6e88b6b0d340a3897b7120e5b393f16690e"
   integrity sha512-XMCcyhSvxcch8b7rZAtFAaierBYdeHXVvg2iYnxOV0MCQHmPuRRmGZPFDRzPayxcGiiSL1Te9UIO+f3cuj0tfw==
 
-"@types/picomatch@^2.3.0":
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/@types/picomatch/-/picomatch-2.3.3.tgz#be60498568c19e989e43fb39aa84be1ed3655e92"
-  integrity sha512-Yll76ZHikRFCyz/pffKGjrCwe/le2CDwOP5F210KQo27kpRE46U2rDnzikNlVn6/ezH3Mhn46bJMTfeVTtcYMg==
+"@types/picomatch@3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/picomatch/-/picomatch-3.0.1.tgz#d2bb932bb24c2f2f97f77c31c3c37ddd60c9a4a5"
+  integrity sha512-1MRgzpzY0hOp9pW/kLRxeQhUWwil6gnrUYd3oEpeYBqp/FexhaCPv3F8LsYr47gtUU45fO2cm1dbwkSrHEo8Uw==
 
 "@types/prop-types@*":
   version "15.7.4"
@@ -2772,14 +2813,6 @@
     "@typescript-eslint/visitor-keys" "7.0.1"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
-  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
-  dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/visitor-keys" "6.21.0"
-
 "@typescript-eslint/scope-manager@7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.0.1.tgz#611ec8e78c70439b152a805e1b10aaac36de7c00"
@@ -2788,6 +2821,14 @@
     "@typescript-eslint/types" "7.0.1"
     "@typescript-eslint/visitor-keys" "7.0.1"
 
+"@typescript-eslint/scope-manager@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.13.0.tgz#2f4aed0b87d72360e64e4ea194b1fde14a59082e"
+  integrity sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==
+  dependencies:
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/visitor-keys" "8.13.0"
+
 "@typescript-eslint/type-utils@7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.0.1.tgz#0fba92c1f81cad561d7b3adc812aa1cc0e35cdae"
@@ -2798,29 +2839,15 @@
     debug "^4.3.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/types@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
-  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
-
 "@typescript-eslint/types@7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.0.1.tgz#dcfabce192db5b8bf77ea3c82cfaabe6e6a3c901"
   integrity sha512-uJDfmirz4FHib6ENju/7cz9SdMSkeVvJDK3VcMFvf/hAShg8C74FW+06MaQPODHfDJp/z/zHfgawIJRjlu0RLg==
 
-"@typescript-eslint/typescript-estree@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
-  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
-  dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/visitor-keys" "6.21.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    minimatch "9.0.3"
-    semver "^7.5.4"
-    ts-api-utils "^1.0.1"
+"@typescript-eslint/types@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.13.0.tgz#3f35dead2b2491a04339370dcbcd17bbdfc204d8"
+  integrity sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==
 
 "@typescript-eslint/typescript-estree@7.0.1":
   version "7.0.1"
@@ -2836,6 +2863,20 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/typescript-estree@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.13.0.tgz#db8c93dd5437ca3ce417a255fb35ddc3c12c3e95"
+  integrity sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==
+  dependencies:
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/visitor-keys" "8.13.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
 "@typescript-eslint/utils@7.0.1":
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.0.1.tgz#b8ceac0ba5fef362b4a03a33c0e1fedeea3734ed"
@@ -2849,26 +2890,15 @@
     "@typescript-eslint/typescript-estree" "7.0.1"
     semver "^7.5.4"
 
-"@typescript-eslint/utils@^6.18.1":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
-  integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
+"@typescript-eslint/utils@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.13.0.tgz#f6d40e8b5053dcaeabbd2e26463857abf27d62c0"
+  integrity sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
-    "@types/json-schema" "^7.0.12"
-    "@types/semver" "^7.5.0"
-    "@typescript-eslint/scope-manager" "6.21.0"
-    "@typescript-eslint/types" "6.21.0"
-    "@typescript-eslint/typescript-estree" "6.21.0"
-    semver "^7.5.4"
-
-"@typescript-eslint/visitor-keys@6.21.0":
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
-  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
-  dependencies:
-    "@typescript-eslint/types" "6.21.0"
-    eslint-visitor-keys "^3.4.1"
+    "@typescript-eslint/scope-manager" "8.13.0"
+    "@typescript-eslint/types" "8.13.0"
+    "@typescript-eslint/typescript-estree" "8.13.0"
 
 "@typescript-eslint/visitor-keys@7.0.1":
   version "7.0.1"
@@ -2878,16 +2908,20 @@
     "@typescript-eslint/types" "7.0.1"
     eslint-visitor-keys "^3.4.1"
 
-"@vitejs/plugin-react@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz#d0be6594051ded8957df555ff07a991fb618b48e"
-  integrity sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==
+"@typescript-eslint/visitor-keys@8.13.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.13.0.tgz#e97b0d92b266ef38a1faf40a74da289b66683a5b"
+  integrity sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==
   dependencies:
-    "@babel/core" "^7.24.5"
-    "@babel/plugin-transform-react-jsx-self" "^7.24.5"
-    "@babel/plugin-transform-react-jsx-source" "^7.24.1"
-    "@types/babel__core" "^7.20.5"
-    react-refresh "^0.14.2"
+    "@typescript-eslint/types" "8.13.0"
+    eslint-visitor-keys "^3.4.3"
+
+"@vitejs/plugin-react-swc@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.1.tgz#bc5af48ef35c525d623fa14177c912cbaa86a846"
+  integrity sha512-vgWOY0i1EROUK0Ctg1hwhtC3SdcDjZcdit4Ups4aPkDcB1jYhmo+RMYWY87cmXMhvtD5uf8lV89j2w16vkdSVg==
+  dependencies:
+    "@swc/core" "^1.7.26"
 
 "@vitest/expect@2.1.1":
   version "2.1.1"
@@ -2948,200 +2982,17 @@
     loupe "^3.1.1"
     tinyrainbow "^1.2.0"
 
-"@vue/compiler-core@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.8.tgz#03ee4a2fa022c9bc3e59f789a1e14593b1e95b10"
-  integrity sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==
-  dependencies:
-    "@babel/parser" "^7.25.3"
-    "@vue/shared" "3.5.8"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.2.0"
-
-"@vue/compiler-dom@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz#03e4a6bef00a1979613a1db2ab39e9b2dced3373"
-  integrity sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==
-  dependencies:
-    "@vue/compiler-core" "3.5.8"
-    "@vue/shared" "3.5.8"
-
-"@vue/compiler-sfc@^3.4.27":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.8.tgz#b2091ec01c63ab02a1cd6783224322f245c6a308"
-  integrity sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==
-  dependencies:
-    "@babel/parser" "^7.25.3"
-    "@vue/compiler-core" "3.5.8"
-    "@vue/compiler-dom" "3.5.8"
-    "@vue/compiler-ssr" "3.5.8"
-    "@vue/shared" "3.5.8"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.11"
-    postcss "^8.4.47"
-    source-map-js "^1.2.0"
-
-"@vue/compiler-ssr@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.8.tgz#fbad34f8bbed15aa6e7b9d78324d93af93403145"
-  integrity sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==
-  dependencies:
-    "@vue/compiler-dom" "3.5.8"
-    "@vue/shared" "3.5.8"
-
-"@vue/shared@3.5.8":
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.8.tgz#6ef14933872dcc4f7b79fee3aaecf648ff807fed"
-  integrity sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==
-
-"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
-  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
-  dependencies:
-    "@webassemblyjs/helper-numbers" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-
-"@webassemblyjs/floating-point-hex-parser@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
-  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
-
-"@webassemblyjs/helper-api-error@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
-  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
-
-"@webassemblyjs/helper-buffer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
-  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
-
-"@webassemblyjs/helper-numbers@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
-  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
-  dependencies:
-    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
-    "@webassemblyjs/helper-api-error" "1.11.6"
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/helper-wasm-bytecode@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
-  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
-
-"@webassemblyjs/helper-wasm-section@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
-  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-
-"@webassemblyjs/ieee754@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
-  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
-  dependencies:
-    "@xtuc/ieee754" "^1.2.0"
-
-"@webassemblyjs/leb128@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
-  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
-  dependencies:
-    "@xtuc/long" "4.2.2"
-
-"@webassemblyjs/utf8@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
-  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
-
-"@webassemblyjs/wasm-edit@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
-  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/helper-wasm-section" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-opt" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
-    "@webassemblyjs/wast-printer" "1.11.6"
-
-"@webassemblyjs/wasm-gen@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz#fb5283e0e8b4551cc4e9c3c0d7184a65faf7c268"
-  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/ieee754" "1.11.6"
-    "@webassemblyjs/leb128" "1.11.6"
-    "@webassemblyjs/utf8" "1.11.6"
-
-"@webassemblyjs/wasm-opt@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
-  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-buffer" "1.11.6"
-    "@webassemblyjs/wasm-gen" "1.11.6"
-    "@webassemblyjs/wasm-parser" "1.11.6"
-
-"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
-  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@webassemblyjs/helper-api-error" "1.11.6"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
-    "@webassemblyjs/ieee754" "1.11.6"
-    "@webassemblyjs/leb128" "1.11.6"
-    "@webassemblyjs/utf8" "1.11.6"
-
-"@webassemblyjs/wast-printer@1.11.6":
-  version "1.11.6"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
-  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.6"
-    "@xtuc/long" "4.2.2"
-
 "@webbtc/webln-types@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@webbtc/webln-types/-/webln-types-3.0.0.tgz#448b2138423865087ba8859e9e6430fc2463b864"
   integrity sha512-aXfTHLKz5lysd+6xTeWl+qHNh/p3qVYbeLo+yDN5cUDmhie2ZoGvkppfWxzbGkcFBzb6dJyQ2/i2cbmDHas+zQ==
 
-"@xtuc/ieee754@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
-  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
-
-"@xtuc/long@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
-  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
-
-acorn-import-assertions@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
-  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
-
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0:
+acorn@^8.8.2, acorn@^8.9.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
@@ -3168,11 +3019,6 @@ ajv-formats@^2.1.1:
   dependencies:
     ajv "^8.0.0"
 
-ajv-keywords@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
-  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-
 ajv-keywords@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
@@ -3180,7 +3026,7 @@ ajv-keywords@^5.0.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3474,11 +3320,6 @@ balanced-match@^2.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -3521,7 +3362,7 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.23.1:
+browserslist@^4.0.0, browserslist@^4.16.6, browserslist@^4.21.10, browserslist@^4.21.4, browserslist@^4.23.1:
   version "4.24.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.0.tgz#a1325fe4bc80b64fda169629fc01b3d6cecd38d4"
   integrity sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==
@@ -3531,11 +3372,6 @@ browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4
     node-releases "^2.0.18"
     update-browserslist-db "^1.1.0"
 
-buffer-equal-constant-time@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
-  integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==
-
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -3584,6 +3420,17 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -3628,6 +3475,14 @@ chai@^5.1.1:
     loupe "^3.1.0"
     pathval "^2.0.0"
 
+chalk@4, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -3645,14 +3500,6 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -3685,11 +3532,6 @@ chokidar@^4.0.0:
   dependencies:
     readdirp "^4.0.1"
 
-chrome-trace-event@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
-  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
-
 classnames@^2.2.5:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
@@ -4097,6 +3939,15 @@ define-data-property@^1.0.1:
     gopd "^1.0.1"
     has-property-descriptors "^1.0.0"
 
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -4269,13 +4120,6 @@ dotenv@^16.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
   integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
 
-ecdsa-sig-formatter@1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
-  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
-  dependencies:
-    safe-buffer "^5.0.1"
-
 ejs@^3.1.6:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
@@ -4298,7 +4142,12 @@ emoji-mart@^5.6.0:
   resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.6.0.tgz#71b3ed0091d3e8c68487b240d9d6d9a73c27f023"
   integrity sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==
 
-emoji-regex@10.3.0, emoji-regex@^10.2.1:
+emoji-regex@10:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
+  integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
+
+emoji-regex@10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
   integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
@@ -4313,11 +4162,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
 end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -4325,7 +4169,7 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.12.0, enhanced-resolve@^5.15.0:
+enhanced-resolve@^5.12.0:
   version "5.15.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
   integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
@@ -4407,6 +4251,18 @@ es-abstract@^1.22.1:
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.11"
 
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
 es-iterator-helpers@^1.0.12:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
@@ -4427,11 +4283,6 @@ es-iterator-helpers@^1.0.12:
     iterator.prototype "^1.1.2"
     safe-array-concat "^1.0.1"
 
-es-module-lexer@^1.2.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.1.tgz#c1b0dd5ada807a3b3155315911f364dc4e909db1"
-  integrity sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==
-
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -4577,21 +4428,20 @@ eslint-plugin-compat@^4.2.0:
     lodash.memoize "^4.1.2"
     semver "^7.5.4"
 
-eslint-plugin-formatjs@^4.12.2:
-  version "4.12.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-formatjs/-/eslint-plugin-formatjs-4.12.2.tgz#ad275d78f82bad95583c141f65ecd7e222c329ed"
-  integrity sha512-b4iEsi0Y3zy7J6xjxlhrIaDFJa27OiLwardvCRBRHALoZs8rNJ0oQIW6ymUgELLEMeFuEMAd2837M+n5SHJutg==
+eslint-plugin-formatjs@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-formatjs/-/eslint-plugin-formatjs-5.2.2.tgz#51c1b88779aac98b894dd236c04a0ee5633b9300"
+  integrity sha512-EtLhaz2/6l86s/3cOo5SyNGYnsocStylO3KLIoMJI8Ch2LqejZsd06RR7wMpeHusIN9ogvTlJZV2M54mBlElKg==
   dependencies:
-    "@formatjs/icu-messageformat-parser" "2.7.6"
-    "@formatjs/ts-transformer" "3.13.12"
-    "@types/eslint" "7 || 8"
-    "@types/picomatch" "^2.3.0"
-    "@typescript-eslint/utils" "^6.18.1"
-    emoji-regex "^10.2.1"
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    "@formatjs/ts-transformer" "3.13.22"
+    "@types/eslint" "9"
+    "@types/picomatch" "3"
+    "@typescript-eslint/utils" "8.13.0"
+    emoji-regex "10"
     magic-string "^0.30.0"
-    picomatch "^2.3.1"
-    tslib "2.6.2"
-    typescript "5"
+    picomatch "2 || 3 || 4"
+    tslib "2"
     unicode-emoji-utils "^1.2.0"
 
 eslint-plugin-import@^2.28.1:
@@ -4694,14 +4544,6 @@ eslint-plugin-tailwindcss@^3.17.5:
     fast-glob "^3.2.5"
     postcss "^8.4.4"
 
-eslint-scope@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
-  dependencies:
-    esrecurse "^4.3.0"
-    estraverse "^4.1.1"
-
 eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
@@ -4781,11 +4623,6 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
@@ -4813,11 +4650,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-events@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
-  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
-
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -5018,6 +4850,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
 function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
@@ -5058,6 +4895,17 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -5090,18 +4938,20 @@ get-tsconfig@^4.5.0:
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
-glob-parent@^5.1.2, glob-parent@^6.0.1, glob-parent@^6.0.2, glob-parent@~5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
   dependencies:
     is-glob "^4.0.3"
 
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
 glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -5207,7 +5057,7 @@ got@^11.8.3:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
@@ -5247,6 +5097,13 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
 has-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
@@ -5271,10 +5128,12 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash-sum@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
 
 he@1.2.0, he@^1.2.0:
   version "1.2.0"
@@ -5300,7 +5159,7 @@ history@^5.3.0:
   dependencies:
     "@babel/runtime" "^7.7.6"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@3, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5501,15 +5360,15 @@ intl-messageformat@10.5.11:
     "@formatjs/icu-messageformat-parser" "2.7.6"
     tslib "^2.4.0"
 
-intl-messageformat@10.5.3:
-  version "10.5.3"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.5.3.tgz#db0779d4a1988faa2977d76574489b7a25f0d5d0"
-  integrity sha512-TzKn1uhJBMyuKTO4zUX47SU+d66fu1W9tVzIiZrQ6hBqQQeYscBMIzKL/qEXnFbJrH9uU5VV3+T5fWib4SIcKA==
+intl-messageformat@10.7.6:
+  version "10.7.6"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.7.6.tgz#d486c780508a2fb8c383e95462951276cf0bcdf4"
+  integrity sha512-IsMU/hqyy3FJwNJ0hxDfY2heJ7MteSuFvcnCebxRp67di4Fhx1gKKE+qS0bBwUF8yXkX9SsPUhLeX/B6h5SKUA==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/fast-memoize" "2.2.0"
-    "@formatjs/icu-messageformat-parser" "2.6.2"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/fast-memoize" "2.2.3"
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    tslib "2"
 
 intl-pluralrules@^2.0.0:
   version "2.0.1"
@@ -5619,7 +5478,7 @@ is-generator-function@^1.0.10:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-glob@^4.0.0, is-glob@^4.0.3, is-glob@~4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -5801,15 +5660,6 @@ jake@^10.8.5:
     filelist "^1.0.4"
     minimatch "^3.1.2"
 
-jest-worker@^27.4.5:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
-  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
 jiti@^1.21.0:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
@@ -5879,7 +5729,7 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
-json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
+json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
@@ -5904,12 +5754,15 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stable-stringify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
-  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
+json-stable-stringify@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.1.1.tgz#52d4361b47d49168bcc4e564189a42e5a7439454"
+  integrity sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==
   dependencies:
-    jsonify "~0.0.0"
+    call-bind "^1.0.5"
+    isarray "^2.0.5"
+    jsonify "^0.0.1"
+    object-keys "^1.1.1"
 
 json5@^1.0.2:
   version "1.0.2"
@@ -5918,7 +5771,7 @@ json5@^1.0.2:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0, json5@^2.2.3:
+json5@^2.2.0, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -5932,26 +5785,16 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsonify@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
-  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
+jsonify@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
+  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
 
 jsonpointer@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.0.tgz#f802669a524ec4805fa7389eadbc9921d5dc8072"
   integrity sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg==
 
-jsonwebtoken@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-9.0.0.tgz#d0faf9ba1cc3a56255fe49c0961a67e520c1926d"
-  integrity sha512-tuGfYXxkQGDPnLJ7SibiQgVgeDgfbPq2k2ICcbgqW8WxWLBAxKQM/ZCu/IT8SOSwmaYl4dpTFCW5xZv7YbbWUw==
-  dependencies:
-    jws "^3.2.2"
-    lodash "^4.17.21"
-    ms "^2.1.1"
-    semver "^7.3.8"
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
@@ -5962,23 +5805,6 @@ jsonwebtoken@^9.0.0:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
-jwa@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
-  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
-  dependencies:
-    buffer-equal-constant-time "1.0.1"
-    ecdsa-sig-formatter "1.0.11"
-    safe-buffer "^5.0.1"
-
-jws@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
-  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
-  dependencies:
-    jwa "^1.4.1"
-    safe-buffer "^5.0.1"
-
 keycode@^2.1.7:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
@@ -6111,20 +5937,6 @@ load-tsconfig@^0.2.3:
   resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
   integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
 
-loader-runner@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
-  integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==
-
-loader-utils@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
-  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
 localforage@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
@@ -6324,7 +6136,7 @@ mime-db@1.49.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
   integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
 
-mime-types@^2.1.12, mime-types@^2.1.27:
+mime-types@^2.1.12:
   version "2.1.32"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.32.tgz#1d00e89e7de7fe02008db61001d9e02852670fd5"
   integrity sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==
@@ -6397,6 +6209,13 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -6431,11 +6250,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-neo-async@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -6763,16 +6577,16 @@ picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
   integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
 
+"picomatch@2 || 3 || 4", picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-picomatch@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
-  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
-
 pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -7265,21 +7079,21 @@ react-inlinesvg@^4.0.0:
   dependencies:
     react-from-dom "^0.6.2"
 
-react-intl@^6.0.0:
-  version "6.4.7"
-  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.4.7.tgz#28ec40350ff791a6a773f5e76b9e12835ae17e19"
-  integrity sha512-0hnOHAZhxTFqD1hGTxrF40qNyZJPPYiGhWIIxIz0Udz+3e3c7sdN80qlxArR+AbJ+jb5ALXZkJYH20+GPFCM0Q==
+react-intl@^6.8.7:
+  version "6.8.7"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.8.7.tgz#e6f08f365810a366031358ff1c7dd8cf7e649bdd"
+  integrity sha512-Ocv8Tg6fXqBdVdkkYohQ79T9rJls3G1lmDSjhqHdK9873BdQFLSeITGgwuGWTRBd6Mg5FL33TBen4FtujCTP0g==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.17.2"
-    "@formatjs/icu-messageformat-parser" "2.6.2"
-    "@formatjs/intl" "2.9.3"
-    "@formatjs/intl-displaynames" "6.5.2"
-    "@formatjs/intl-listformat" "7.4.2"
-    "@types/hoist-non-react-statics" "^3.3.1"
+    "@formatjs/ecma402-abstract" "2.2.3"
+    "@formatjs/icu-messageformat-parser" "2.9.3"
+    "@formatjs/intl" "2.10.14"
+    "@formatjs/intl-displaynames" "6.8.4"
+    "@formatjs/intl-listformat" "7.7.4"
+    "@types/hoist-non-react-statics" "3"
     "@types/react" "16 || 17 || 18"
-    hoist-non-react-statics "^3.3.2"
-    intl-messageformat "10.5.3"
-    tslib "^2.4.0"
+    hoist-non-react-statics "3"
+    intl-messageformat "10.7.6"
+    tslib "2"
 
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
@@ -7330,11 +7144,6 @@ react-redux@^9.0.4:
     "@types/use-sync-external-store" "^0.0.3"
     use-sync-external-store "^1.0.0"
 
-react-refresh@^0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
-  integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==
-
 react-router-dom-v5-compat@^6.6.2:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.6.2.tgz#e8a985dd6092885305e0b04aa141f659b282e25f"
@@ -7669,10 +7478,10 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup-plugin-visualizer@^5.9.2:
-  version "5.9.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.2.tgz#f1aa2d9b1be8ebd6869223c742324897464d8891"
-  integrity sha512-waHktD5mlWrYFrhOLbti4YgQCn1uR24nYsNuXxg7LkPH8KdTXVWR9DNY1WU0QqokyMixVXJS4J04HNrVTMP01A==
+rollup-plugin-visualizer@^5.12.0:
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz#661542191ce78ee4f378995297260d0c1efb1302"
+  integrity sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==
   dependencies:
     open "^8.4.0"
     picomatch "^2.3.1"
@@ -7740,7 +7549,7 @@ safe-array-concat@^1.0.1:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0:
+safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -7783,15 +7592,6 @@ scheduler@^0.23.2:
   dependencies:
     loose-envify "^1.1.0"
 
-schema-utils@^3.1.1, schema-utils@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
-  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
-  dependencies:
-    "@types/json-schema" "^7.0.8"
-    ajv "^6.12.5"
-    ajv-keywords "^3.5.2"
-
 schema-utils@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
@@ -7819,6 +7619,11 @@ semver@^7.3.4, semver@^7.3.8, semver@^7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.6.0:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 serialize-javascript@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
@@ -7826,6 +7631,18 @@ serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
 set-function-name@^2.0.0, set-function-name@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
@@ -7904,7 +7721,7 @@ smob@^1.0.0:
   resolved "https://registry.yarnpkg.com/smob/-/smob-1.5.0.tgz#85d79a1403abf128d24d3ebc1cdc5e1a9548d3ab"
   integrity sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0, source-map-js@^1.2.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -8216,13 +8033,6 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
-  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-hyperlinks@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.1.0.tgz#b56150ff0173baacc15f21956450b61f2b18d3ac"
@@ -8307,7 +8117,7 @@ tailwindcss@^3.4.13:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
-tapable@^2.1.1, tapable@^2.2.0:
+tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
@@ -8327,18 +8137,7 @@ tempy@^0.6.0:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terser-webpack-plugin@^5.3.7:
-  version "5.3.9"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
-  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jest-worker "^27.4.5"
-    schema-utils "^3.1.1"
-    serialize-javascript "^6.0.1"
-    terser "^5.16.8"
-
-terser@^5.10.0, terser@^5.16.8, terser@^5.17.4:
+terser@^5.10.0, terser@^5.17.4:
   version "5.33.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.33.0.tgz#8f9149538c7468ffcb1246cfec603c16720d2db1"
   integrity sha512-JuPVaB7s1gdFKPKTelwUyRq5Sid2A3Gko2S0PncwdBq7kN9Ti9HPWDQ06MPsEDGsZeVESjKEnyGy68quBk1w6g==
@@ -8466,6 +8265,11 @@ ts-api-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.3.tgz#f12c1c781d04427313dbac808f453f050e54a331"
   integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
 
+ts-api-utils@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.0.tgz#709c6f2076e511a81557f3d07a0cbd566ae8195c"
+  integrity sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==
+
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
@@ -8481,16 +8285,21 @@ tsconfig-paths@^3.14.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@2.6.2, tslib@^2.0.3, tslib@^2.4.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+tslib@2:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
 tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.0.3, tslib@^2.4.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -8572,6 +8381,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~6.19.8:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -8739,19 +8553,6 @@ vite-plugin-pwa@^0.20.5:
     workbox-build "^7.1.0"
     workbox-window "^7.1.0"
 
-vite-plugin-require@^1.2.14:
-  version "1.2.14"
-  resolved "https://registry.yarnpkg.com/vite-plugin-require/-/vite-plugin-require-1.2.14.tgz#6c2861cac74fcb23f20bd3c0d3a61d823f05f774"
-  integrity sha512-i52DfITgYKtOZyh9kOjyy4ENTQBVHG0ozTKHQdFkGAHYqZwM3Dn2c5gsA5rR7IrHQ/PQET3SMz6HkNzZ2fXCyA==
-  dependencies:
-    "@babel/generator" "^7.24.5"
-    "@babel/parser" "^7.24.5"
-    "@babel/traverse" "^7.24.5"
-    "@babel/types" "^7.24.5"
-    "@vue/compiler-sfc" "^3.4.27"
-    vue-loader "^17.4.2"
-    webpack "^4.46.0 || ^5.0.0"
-
 vite-plugin-static-copy@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/vite-plugin-static-copy/-/vite-plugin-static-copy-1.0.6.tgz#ff457c16e8cfa564472aafd1698790ac89d05508"
@@ -8842,15 +8643,6 @@ vscode-uri@^3.0.2:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.7.tgz#6d19fef387ee6b46c479e5fb00870e15e58c1eb8"
   integrity sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==
 
-vue-loader@^17.4.2:
-  version "17.4.2"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.4.2.tgz#f87f0d8adfcbbe8623de9eba1979d41ba223c6da"
-  integrity sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==
-  dependencies:
-    chalk "^4.1.0"
-    hash-sum "^2.0.0"
-    watchpack "^2.4.0"
-
 w3c-xmlserializer@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz#f925ba26855158594d907313cedd1476c5967f6c"
@@ -8872,14 +8664,6 @@ warning@^4.0.0, warning@^4.0.1:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
-  dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"
-
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -8890,41 +8674,6 @@ webidl-conversions@^7.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webpack-sources@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
-  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
-
-"webpack@^4.46.0 || ^5.0.0":
-  version "5.88.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
-  integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==
-  dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^1.0.0"
-    "@webassemblyjs/ast" "^1.11.5"
-    "@webassemblyjs/wasm-edit" "^1.11.5"
-    "@webassemblyjs/wasm-parser" "^1.11.5"
-    acorn "^8.7.1"
-    acorn-import-assertions "^1.9.0"
-    browserslist "^4.14.5"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.15.0"
-    es-module-lexer "^1.2.1"
-    eslint-scope "5.1.1"
-    events "^3.2.0"
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
-    json-parse-even-better-errors "^2.3.1"
-    loader-runner "^4.2.0"
-    mime-types "^2.1.27"
-    neo-async "^2.6.2"
-    schema-utils "^3.2.0"
-    tapable "^2.1.1"
-    terser-webpack-plugin "^5.3.7"
-    watchpack "^2.4.0"
-    webpack-sources "^3.2.3"
-
 websocket-ts@^2.1.5:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/websocket-ts/-/websocket-ts-2.1.5.tgz#b6b51f0afca89d6bc7ff71c9e74540f19ae0262c"

From 278d8b7099d6cc2c6170e7853555bd1bf8284e71 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 13:00:38 -0300
Subject: [PATCH 094/133] Change div to button

---
 src/components/sidebar-menu.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index 0a90e0335..22cdacb94 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -172,9 +172,8 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
         })
       }
     >
-      <div
+      <button
         className='fixed inset-0 bg-gray-500/90 black:bg-gray-900/90 dark:bg-gray-700/90'
-        role='button'
         onClick={handleClose}
       />
 

From 6862a6fd2d816d5c0447ffe5cb4655c1b6f0de97 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 13:01:42 -0300
Subject: [PATCH 095/133] Remove "button-theme-muted"

---
 src/features/auth-login/components/captcha.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/auth-login/components/captcha.tsx b/src/features/auth-login/components/captcha.tsx
index 5f6d950f8..555f7db6f 100644
--- a/src/features/auth-login/components/captcha.tsx
+++ b/src/features/auth-login/components/captcha.tsx
@@ -113,7 +113,7 @@ const NativeCaptchaField: React.FC<INativeCaptchaField> = ({ captcha, onChange,
   return (
     <Stack space={2}>
       <div className='flex w-full items-center justify-center rounded-md border border-solid border-gray-300 bg-white dark:border-gray-600'>
-        <button className='button-theme-muted !block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={onClick}>
+        <button className='!block space-x-2 !border-none !p-0 !py-2 !text-primary-600 hover:!underline  focus:!ring-transparent focus:!ring-offset-0 dark:!text-accent-blue rtl:space-x-reverse' onClick={onClick}>
           <img alt={intl.formatMessage(messages.captcha)} src={captcha.get('url')} />
         </button>
       </div>

From e6bc548b101402d6cd071051265082c0aa7f7bb2 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 13:05:02 -0300
Subject: [PATCH 096/133] Change "import" to "use"

---
 src/styles/application.scss | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/styles/application.scss b/src/styles/application.scss
index ef771c786..b4a3ea3bd 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -10,20 +10,20 @@
 @use 'autosuggest';
 
 // COMPONENTS
-@import 'components/buttons';
-@import 'components/modal';
-@import 'components/compose-form';
-@import 'components/status';
-@import 'components/reply-mentions';
-@import 'components/detailed-status';
-@import 'components/media-gallery';
-@import 'components/notification';
-@import 'components/display-name';
-@import 'components/columns';
-@import 'components/search';
-@import 'components/video-player';
-@import 'components/audio-player';
-@import 'components/aliases';
-@import 'components/icon';
-@import 'forms';
-@import 'utilities';
+@use 'components/buttons';
+@use 'components/modal';
+@use 'components/compose-form';
+@use 'components/status';
+@use 'components/reply-mentions';
+@use 'components/detailed-status';
+@use 'components/media-gallery';
+@use 'components/notification';
+@use 'components/display-name';
+@use 'components/columns';
+@use 'components/search';
+@use 'components/video-player';
+@use 'components/audio-player';
+@use 'components/aliases';
+@use 'components/icon';
+@use 'forms';
+@use 'utilities';

From 84342da4ea1c32ddd603c9ef93f48f73aa710979 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 13:08:18 -0300
Subject: [PATCH 097/133] Change classname "autosuggest-emoji" to use only
 Tailwind

---
 src/components/autosuggest-emoji.tsx |  5 ++--
 src/styles/application.scss          |  1 -
 src/styles/autosuggest.scss          | 38 ----------------------------
 src/styles/tailwind.css              |  7 -----
 4 files changed, 2 insertions(+), 49 deletions(-)
 delete mode 100644 src/styles/autosuggest.scss

diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx
index 7db0c42e7..8337456f7 100644
--- a/src/components/autosuggest-emoji.tsx
+++ b/src/components/autosuggest-emoji.tsx
@@ -26,13 +26,12 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
   }
 
   return (
-    <div className='autosuggest-emoji flex flex-row items-center justify-start text-[14px] leading-[18px]' data-testid='emoji'>
+    <div className='flex flex-row items-center justify-start text-[14px] leading-[18px]' data-testid='emoji'>
       <img
-        className='emojione'
+        className='emojione mr-2 block size-4'
         src={url}
         alt={alt}
       />
-
       {emoji.colons}
     </div>
   );
diff --git a/src/styles/application.scss b/src/styles/application.scss
index b4a3ea3bd..fda7e1f1a 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -7,7 +7,6 @@
 @use 'rtl';
 @use 'accessibility';
 @use 'navigation';
-@use 'autosuggest';
 
 // COMPONENTS
 @use 'components/buttons';
diff --git a/src/styles/autosuggest.scss b/src/styles/autosuggest.scss
deleted file mode 100644
index f81cbf195..000000000
--- a/src/styles/autosuggest.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.react-datepicker__input-container input {
-  // display: block;
-  // box-sizing: border-box;
-  // width: 100%;
-  // margin: 0;
-  // background: transparent;
-  // color: var(--primary-text-color);
-  // padding: 10px;
-  // font-family: inherit;
-  // font-size: 16px;
-  // resize: vertical;
-  // border: 0;
-  // outline: 0;
-
-  // &:focus {
-  //   outline: 0;
-  // }
-
-  // @media screen and (max-width: 600px) {
-  //   font-size: 16px;
-  // }
-}
-
-.autosuggest-emoji {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  line-height: 18px;
-  font-size: 14px;
-}
-
-.autosuggest-emoji img {
-  display: block;
-  margin-right: 8px;
-  width: 16px;
-  height: 16px;
-}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 18b5b5070..401872595 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -122,13 +122,6 @@
     }
   }
 
-  .autosuggest-emoji > img{
-    display: block;
-    margin-right: 8px;
-    width: 16px;
-    height: 16px;
-  }
-
   .hide-scrollbar {
     scrollbar-width: none; /* Firefox */
   }

From 623eb5d83e6babc75578e58a5006c8fd2cb86534 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 13:09:02 -0300
Subject: [PATCH 098/133] Remove "audio-player.scss" and "video-player.scss"

---
 src/styles/application.scss             |   2 -
 src/styles/components/audio-player.scss |  51 ----
 src/styles/components/video-player.scss | 307 ------------------------
 3 files changed, 360 deletions(-)
 delete mode 100644 src/styles/components/audio-player.scss
 delete mode 100644 src/styles/components/video-player.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index fda7e1f1a..73063c43f 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -20,8 +20,6 @@
 @use 'components/display-name';
 @use 'components/columns';
 @use 'components/search';
-@use 'components/video-player';
-@use 'components/audio-player';
 @use 'components/aliases';
 @use 'components/icon';
 @use 'forms';
diff --git a/src/styles/components/audio-player.scss b/src/styles/components/audio-player.scss
deleted file mode 100644
index 17810e47b..000000000
--- a/src/styles/components/audio-player.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.audio-player {
-  @apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
-  direction: ltr;
-
-  &.editable {
-    @apply rounded-none h-full;
-  }
-
-  .video-player__volume::before,
-  .video-player__seek::before {
-    @apply bg-white/10;
-  }
-
-  .video-player__seek__buffer {
-    @apply bg-white/20;
-  }
-
-  .video-player__buttons button {
-    @apply text-current opacity-[75];
-
-    &:active,
-    &:hover,
-    &:focus {
-      @apply text-current opacity-100;
-    }
-  }
-
-  .video-player__time-sep,
-  .video-player__time-total,
-  .video-player__time-current {
-    @apply text-current;
-  }
-
-  .video-player__seek::before,
-  .video-player__seek__buffer,
-  .video-player__seek__progress {
-    @apply top-0;
-  }
-
-  .video-player__seek__handle {
-    @apply -top-1;
-  }
-
-  .video-player__controls {
-    @apply pt-2.5 bg-transparent;
-  }
-}
-
-.media-spoiler-audio {
-  @apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat;
-}
diff --git a/src/styles/components/video-player.scss b/src/styles/components/video-player.scss
deleted file mode 100644
index e37f10427..000000000
--- a/src/styles/components/video-player.scss
+++ /dev/null
@@ -1,307 +0,0 @@
-.detailed,
-.fullscreen {
-  .video-player__volume__current,
-  .video-player__volume::before {
-    bottom: 27px;
-  }
-
-  .video-player__volume__handle {
-    bottom: 23px;
-  }
-}
-
-.video-player {
-  @apply relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white;
-  direction: ltr;
-
-  &.editable {
-    @apply rounded-none;
-    height: 100% !important;
-  }
-
-  &:focus {
-    outline: 0;
-  }
-
-  video {
-    display: block;
-    z-index: 1;
-    position: relative;
-  }
-
-  &.fullscreen {
-    width: 100% !important;
-    height: 100% !important;
-    margin: 0;
-
-    video {
-      max-width: 100% !important;
-      max-height: 100% !important;
-      width: 100% !important;
-      height: 100% !important;
-      outline: 0;
-    }
-  }
-
-  &--inline {
-    video {
-      object-fit: contain;
-      max-height: 100%;
-    }
-  }
-
-  &__controls {
-    position: absolute;
-    z-index: 2;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-sizing: border-box;
-    background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent);
-    padding: 0 15px;
-    opacity: 0;
-    transition: opacity 0.1s ease;
-
-    &.active {
-      opacity: 1;
-    }
-  }
-
-  &__buttons-bar {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 8px;
-    margin: 0 -5px;
-
-    .video-player__download__icon {
-      color: inherit;
-    }
-  }
-
-  &__buttons {
-    display: flex;
-    flex: 0 1 auto;
-    min-width: 30px;
-    align-items: center;
-    font-size: 16px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    .player-button {
-      display: inline-block;
-      outline: 0;
-      flex: 0 0 auto;
-      background: transparent;
-      padding: 5px 6px;
-      font-size: 16px;
-      border: 0;
-      color: rgba(#fff, 0.75);
-
-      .svg-icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      &:active,
-      &:hover,
-      &:focus {
-        color: #fff;
-      }
-    }
-  }
-
-  &__time {
-    display: inline;
-    flex: 0 1 auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin: 0 5px;
-  }
-
-  &__time-sep,
-  &__time-total,
-  &__time-current {
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  &__time-current {
-    color: #fff;
-  }
-
-  &__time-sep {
-    display: inline-block;
-    margin: 0 6px;
-  }
-
-  &__time-sep,
-  &__time-total {
-    color: #fff;
-  }
-
-  &__volume {
-    flex: 0 0 auto;
-    display: inline-flex;
-    cursor: pointer;
-    height: 24px;
-    position: relative;
-    overflow: hidden;
-
-    .no-reduce-motion & {
-      transition: all 100ms linear;
-    }
-
-    &.active {
-      overflow: visible;
-      width: 50px;
-      margin-right: 16px;
-    }
-
-    &::before {
-      content: '';
-      width: 50px;
-      background: rgba(#fff, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      left: 0;
-      top: 50%;
-      transform: translate(0, -50%);
-    }
-
-    &__current {
-      @apply bg-accent-500;
-      display: block;
-      position: absolute;
-      height: 4px;
-      border-radius: 4px;
-      left: 0;
-      top: 50%;
-      transform: translate(0, -50%);
-    }
-
-    &__handle {
-      @apply bg-accent-500;
-      position: absolute;
-      z-index: 3;
-      border-radius: 50%;
-      width: 12px;
-      height: 12px;
-      top: 50%;
-      left: 0;
-      margin-left: -6px;
-      transform: translate(0, -50%);
-      box-shadow: 1px 2px 6px #0003;
-      opacity: 0;
-
-      .no-reduce-motion & {
-        transition: opacity 100ms linear;
-      }
-    }
-
-    &.active &__handle {
-      opacity: 1;
-    }
-  }
-
-  &__link {
-    padding: 2px 10px;
-
-    a {
-      text-decoration: none;
-      font-size: 14px;
-      font-weight: 500;
-      color: #fff;
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &__seek {
-    cursor: pointer;
-    height: 24px;
-    position: relative;
-
-    &::before {
-      content: '';
-      width: 100%;
-      background: rgba(#fff, 0.35);
-      border-radius: 4px;
-      display: block;
-      position: absolute;
-      height: 4px;
-      top: 14px;
-    }
-
-    &__progress,
-    &__buffer {
-      display: block;
-      position: absolute;
-      height: 4px;
-      border-radius: 4px;
-      top: 14px;
-    }
-
-    &__progress {
-      @apply bg-accent-500;
-    }
-
-    &__buffer {
-      background: rgba(#fff, 0.2);
-    }
-
-    &__handle {
-      @apply bg-accent-500;
-      position: absolute;
-      z-index: 3;
-      opacity: 0;
-      border-radius: 50%;
-      width: 12px;
-      height: 12px;
-      top: 10px;
-      margin-left: -6px;
-      box-shadow: 1px 2px 6px #0003;
-
-      .no-reduce-motion & {
-        transition: opacity 0.1s ease;
-      }
-
-      &.active {
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      .video-player__seek__handle {
-        opacity: 1;
-      }
-    }
-  }
-
-  &.detailed,
-  &.fullscreen {
-    .video-player__buttons {
-      .player-button {
-        padding-top: 10px;
-        padding-bottom: 10px;
-      }
-    }
-  }
-}
-
-.media-spoiler-video {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-  margin-top: 8px;
-  position: relative;
-  border: 0;
-  display: block;
-}

From 6cd349738139c1756ae7d9f63738c7b65bc0f731 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 13:10:40 -0300
Subject: [PATCH 099/133] Remove "buttons.scss"

---
 src/styles/application.scss        | 1 -
 src/styles/components/buttons.scss | 8 --------
 2 files changed, 9 deletions(-)
 delete mode 100644 src/styles/components/buttons.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 73063c43f..89e303a56 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -9,7 +9,6 @@
 @use 'navigation';
 
 // COMPONENTS
-@use 'components/buttons';
 @use 'components/modal';
 @use 'components/compose-form';
 @use 'components/status';
diff --git a/src/styles/components/buttons.scss b/src/styles/components/buttons.scss
deleted file mode 100644
index 1f8b0c6f1..000000000
--- a/src/styles/components/buttons.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-button {
-  font-family: inherit;
-  cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
-}

From a28e061eb26b6a25cfe5a0cc240577f8b66c4ed2 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 13:14:34 -0300
Subject: [PATCH 100/133] Remove "utilities.scss" and change "emoji-lg
 img.emojione" to custom tailwind

---
 .../editor/plugins/autosuggest-plugin.tsx      |  2 +-
 src/styles/application.scss                    |  1 -
 src/styles/tailwind.css                        |  5 +++++
 src/styles/utilities.scss                      | 18 ------------------
 4 files changed, 6 insertions(+), 20 deletions(-)
 delete mode 100644 src/styles/utilities.scss

diff --git a/src/features/compose/editor/plugins/autosuggest-plugin.tsx b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
index 677e64702..6efc85369 100644
--- a/src/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/src/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -532,7 +532,7 @@ const AutosuggestPlugin = ({
           ? ReactDOM.createPortal(
             <div
               className={clsx({
-                'scroll-smooth snap-y snap-always will-change-scroll mt-6 overflow-y-auto max-h-56 relative w-max z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
+                'scroll-smooth snap-y snap-always will-change-scroll mt-6 overflow-y-auto max-h-56 relative w-max z-[1000] shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
                 hidden: suggestionsHidden || suggestions.isEmpty(),
                 block: !suggestionsHidden && !suggestions.isEmpty(),
               })}
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 89e303a56..4d1272eae 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -22,4 +22,3 @@
 @use 'components/aliases';
 @use 'components/icon';
 @use 'forms';
-@use 'utilities';
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 401872595..89b4cb751 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -105,6 +105,11 @@
     padding-left: 4px;
   }
 
+  .emoji-lg img.emojione {
+    width: 36px !important;
+    height: 36px !important;
+  }  
+
   .compose-form-warning {
     strong {
       @apply font-medium;
diff --git a/src/styles/utilities.scss b/src/styles/utilities.scss
deleted file mode 100644
index c40b6a037..000000000
--- a/src/styles/utilities.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.w-10i {
-  width: 2.5rem !important;
-}
-
-.z-1000 {
-  z-index: 1000;
-}
-
-.divide-x-dot > *:not(:last-child)::after {
-  content: '·';
-  padding-right: 4px;
-  padding-left: 4px;
-}
-
-.emoji-lg img.emojione {
-  width: 36px !important;
-  height: 36px !important;
-}

From b70ab9a1671a593b60ae6112936b98658f139dcb Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 14:29:57 -0300
Subject: [PATCH 101/133] Remove "detailed-status.scss" and fix "background" of
 thread

---
 src/styles/application.scss                |  1 -
 src/styles/components/detailed-status.scss | 15 ---------------
 src/styles/tailwind.css                    |  2 +-
 3 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 src/styles/components/detailed-status.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 4d1272eae..a60ef3e4b 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -13,7 +13,6 @@
 @use 'components/compose-form';
 @use 'components/status';
 @use 'components/reply-mentions';
-@use 'components/detailed-status';
 @use 'components/media-gallery';
 @use 'components/notification';
 @use 'components/display-name';
diff --git a/src/styles/components/detailed-status.scss b/src/styles/components/detailed-status.scss
deleted file mode 100644
index ccefc753e..000000000
--- a/src/styles/components/detailed-status.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.thread {
-  @apply bg-white black:bg-black dark:bg-primary-900;
-
-  &__status {
-    @apply relative pb-4;
-
-    .status--wrapper {
-      @apply shadow-none p-0;
-    }
-  }
-
-  .status--content-wrapper {
-    @apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
-  }
-}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 89b4cb751..4c344ff82 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -17,7 +17,7 @@
   }
 
   .thread {
-    @apply bg-white;
+    @apply bg-white black:bg-black dark:bg-primary-900;
   
     .status--content-wrapper {
       @apply pl-[54px] rtl:pl-0 rtl:pr-[54px];

From 51bd1c0d732a1b21c9ab5ecadf605495e288d59f Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 14:47:53 -0300
Subject: [PATCH 102/133] Remove "display-name.scss"

---
 src/styles/application.scss             |  1 -
 src/styles/components/display-name.scss | 18 ------------------
 2 files changed, 19 deletions(-)
 delete mode 100644 src/styles/components/display-name.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index a60ef3e4b..522c3ab3a 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -15,7 +15,6 @@
 @use 'components/reply-mentions';
 @use 'components/media-gallery';
 @use 'components/notification';
-@use 'components/display-name';
 @use 'components/columns';
 @use 'components/search';
 @use 'components/aliases';
diff --git a/src/styles/components/display-name.scss b/src/styles/components/display-name.scss
deleted file mode 100644
index fca752408..000000000
--- a/src/styles/components/display-name.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.display-name {
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: relative;
-
-  bdi {
-    min-width: 0;
-  }
-
-  &__account {
-    position: relative;
-    font-weight: 600;
-    font-size: 14px;
-  }
-}

From e80e996d9ca06c973c8063a7c9d5f234b6e1b2dc Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 14:54:04 -0300
Subject: [PATCH 103/133] Remove "navigation.scss"

---
 src/styles/application.scss |  1 -
 src/styles/navigation.scss  | 40 -------------------------------------
 2 files changed, 41 deletions(-)
 delete mode 100644 src/styles/navigation.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 522c3ab3a..853b24c37 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -6,7 +6,6 @@
 @use 'emoji-picker';
 @use 'rtl';
 @use 'accessibility';
-@use 'navigation';
 
 // COMPONENTS
 @use 'components/modal';
diff --git a/src/styles/navigation.scss b/src/styles/navigation.scss
deleted file mode 100644
index 010d3b22e..000000000
--- a/src/styles/navigation.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.thumb-navigation {
-  @apply fixed lg:hidden bottom-0 bg-white/90 black:bg-black/90 dark:bg-primary-900/90 backdrop-blur-md border-t border-solid border-gray-200 dark:border-gray-800 left-0 right-0 shadow-2xl w-full flex z-50;
-  padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: #fff;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  &__link {
-    @apply px-2 py-2.5 space-y-1 flex flex-col flex-1 items-center text-gray-600 text-lg;
-
-    // padding: 8px 10px;
-    // display: flex;
-    // flex-direction: column;
-    // align-items: center;
-    // justify-content: end;
-    // color: var(--primary-text-color);
-    // text-decoration: none;
-    // font-size: 20px;
-    // width: 55px;
-
-    // span {
-    //   margin-top: 1px;
-    //   text-align: center;
-    //   font-size: 1.2rem;
-    // }
-
-    // .svg-icon {
-    //   width: 24px;
-    //   height: 24px;
-
-    //   svg {
-    //     stroke-width: 1px;
-    //   }
-    // }
-  }
-}

From 9cbe0cc41ea1bb94c80a2129cb4f9c75804d14d1 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 15:17:53 -0300
Subject: [PATCH 104/133] Remove "media-gallery.scss"

---
 src/styles/application.scss              |   1 -
 src/styles/components/media-gallery.scss | 152 -----------------------
 2 files changed, 153 deletions(-)
 delete mode 100644 src/styles/components/media-gallery.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 853b24c37..2ca5bc599 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -12,7 +12,6 @@
 @use 'components/compose-form';
 @use 'components/status';
 @use 'components/reply-mentions';
-@use 'components/media-gallery';
 @use 'components/notification';
 @use 'components/columns';
 @use 'components/search';
diff --git a/src/styles/components/media-gallery.scss b/src/styles/components/media-gallery.scss
deleted file mode 100644
index 475875d40..000000000
--- a/src/styles/components/media-gallery.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-$media-compact-size: 50px;
-
-.media-gallery {
-  @apply rounded-lg;
-  box-sizing: border-box;
-  overflow: hidden;
-  isolation: isolate;
-  position: relative;
-  width: 100%;
-  height: auto;
-
-  &__item {
-    @apply rounded-sm;
-    border: 0;
-    box-sizing: border-box;
-    display: block;
-    float: left;
-    position: relative;
-    overflow: hidden;
-
-    &__icons {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      .svg-icon {
-        @apply h-24 w-24;
-      }
-    }
-
-    &-overflow {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(255, 255, 255, 0.75);
-      z-index: 2;
-      color: #333;
-      text-align: center;
-      font-weight: bold;
-      font-size: 50px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      pointer-events: none;
-    }
-
-    &-thumbnail {
-      @apply text-gray-400;
-      cursor: zoom-in;
-      display: block;
-      text-decoration: none;
-      line-height: 0;
-      position: relative;
-      z-index: 1;
-      height: 100%;
-      width: 100%;
-
-      video {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-
-  &__preview {
-    @apply bg-gray-200 dark:bg-gray-900 rounded-lg;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-
-    &--hidden {
-      display: none;
-    }
-  }
-
-  &__gifv {
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-  }
-
-  &__item-gifv-thumbnail {
-    @apply rounded-md;
-    cursor: zoom-in;
-    height: 100%;
-    object-fit: cover;
-    position: relative;
-    width: 100%;
-    z-index: 1;
-    transform: none;
-    top: 0;
-  }
-
-  &__gifv__label,
-  &__filename__label,
-  &__file-extension__label {
-    @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
-    font-size: 11px;
-    transition: opacity 0.1s ease;
-    line-height: 18px;
-  }
-
-  &__gifv {
-    &.autoplay {
-      .media-gallery__gifv__label {
-        display: none;
-      }
-    }
-
-    &:hover {
-      .media-gallery__gifv__label {
-        opacity: 1;
-      }
-    }
-  }
-
-  &--compact {
-    height: $media-compact-size !important;
-    background: transparent;
-
-    .media-gallery__item {
-      width: $media-compact-size !important;
-      height: $media-compact-size !important;
-      inset: auto !important;
-      float: left !important;
-      margin-right: 5px;
-
-      &-overflow {
-        font-size: 20px;
-      }
-
-      &__icons .svg-icon {
-        @apply h-8 w-8;
-      }
-    }
-
-    .media-gallery__file-extension__label {
-      display: none;
-    }
-  }
-}

From 3e634322844cbb0bbbd785fbc31f5277bd6662ff Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 15:26:23 -0300
Subject: [PATCH 105/133] Remove "reply-mentions" styles

---
 src/styles/application.scss               |  1 -
 src/styles/components/modal.scss          |  8 --------
 src/styles/components/reply-mentions.scss | 18 ------------------
 3 files changed, 27 deletions(-)
 delete mode 100644 src/styles/components/reply-mentions.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 2ca5bc599..7a88d2d5a 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -11,7 +11,6 @@
 @use 'components/modal';
 @use 'components/compose-form';
 @use 'components/status';
-@use 'components/reply-mentions';
 @use 'components/notification';
 @use 'components/columns';
 @use 'components/search';
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
index d69552f67..ceed69cc3 100644
--- a/src/styles/components/modal.scss
+++ b/src/styles/components/modal.scss
@@ -124,14 +124,6 @@
   }
 }
 
-.reply-mentions-modal__accounts {
-  display: block;
-  flex-direction: row;
-  flex: 1;
-  overflow-y: auto;
-  min-height: 300px;
-}
-
 .remote-interaction-modal {
   &__content {
     display: flex;
diff --git a/src/styles/components/reply-mentions.scss b/src/styles/components/reply-mentions.scss
deleted file mode 100644
index 122f70874..000000000
--- a/src/styles/components/reply-mentions.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.reply-mentions {
-  @apply text-gray-700 dark:text-gray-600 mb-1 text-sm;
-
-  &__account {
-    @apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline inline-block;
-    direction: ltr;
-  }
-}
-
-.status--wrapper {
-  .reply-mentions {
-    display: block;
-
-    span {
-      cursor: pointer;
-    }
-  }
-}

From 388eeee9db88a18198e84cc9c6c26bf234eff291 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 15:44:12 -0300
Subject: [PATCH 106/133] Remove "notification.scss"

---
 src/styles/application.scss             | 1 -
 src/styles/components/notification.scss | 3 ---
 2 files changed, 4 deletions(-)
 delete mode 100644 src/styles/components/notification.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 7a88d2d5a..99d9154e6 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -11,7 +11,6 @@
 @use 'components/modal';
 @use 'components/compose-form';
 @use 'components/status';
-@use 'components/notification';
 @use 'components/columns';
 @use 'components/search';
 @use 'components/aliases';
diff --git a/src/styles/components/notification.scss b/src/styles/components/notification.scss
deleted file mode 100644
index d593c6f2e..000000000
--- a/src/styles/components/notification.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.notification .status--wrapper {
-  @apply p-0 shadow-none rounded-none;
-}

From 787bfae75e1ee0d4e363b49f73685c7638977977 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 18:33:30 -0300
Subject: [PATCH 107/133] Remove "forms.scss"

---
 src/styles/application.scss |  3 +--
 src/styles/forms.scss       | 29 -----------------------------
 2 files changed, 1 insertion(+), 31 deletions(-)
 delete mode 100644 src/styles/forms.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 99d9154e6..8794dfa1e 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -14,5 +14,4 @@
 @use 'components/columns';
 @use 'components/search';
 @use 'components/aliases';
-@use 'components/icon';
-@use 'forms';
+@use 'components/icon';
\ No newline at end of file
diff --git a/src/styles/forms.scss b/src/styles/forms.scss
deleted file mode 100644
index 3678652f1..000000000
--- a/src/styles/forms.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-select {
-  @apply pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-}
-
-.form-error::before,
-.form-error::after {
-  border: solid transparent;
-  bottom: 100%;
-  content: '';
-  height: 0;
-  left: 10px;
-  pointer-events: none;
-  width: 0;
-  position: absolute;
-}
-
-.form-error::before {
-  --tw-bg-opacity: 1;
-  border-bottom-color: rgba(254, 202, 202, var(--tw-bg-opacity));
-  border-width: 6px;
-  margin-left: -1px;
-}
-
-.input.with_label.toggle .label_input {
-  display: flex;
-  font-size: 14px;
-  align-items: center;
-}

From 5545a2432b87c849f67c69b20681e2675c56c8f7 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 18:38:26 -0300
Subject: [PATCH 108/133] Remove "columns.scss"

---
 src/styles/application.scss        |  1 -
 src/styles/components/columns.scss | 16 ----------------
 2 files changed, 17 deletions(-)
 delete mode 100644 src/styles/components/columns.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 8794dfa1e..5964a2d2d 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -11,7 +11,6 @@
 @use 'components/modal';
 @use 'components/compose-form';
 @use 'components/status';
-@use 'components/columns';
 @use 'components/search';
 @use 'components/aliases';
 @use 'components/icon';
\ No newline at end of file
diff --git a/src/styles/components/columns.scss b/src/styles/components/columns.scss
deleted file mode 100644
index 62d9fc266..000000000
--- a/src/styles/components/columns.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.empty-column-indicator,
-.error-column {
-  @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
-
-  @supports (display: grid) { // hack to fix Chrome <57
-    contain: strict;
-  }
-
-  & > span {
-    @apply max-w-[400px];
-  }
-
-  a {
-    @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
-  }
-}
\ No newline at end of file

From 2cc5994e617259ba1831d1fe6d5ddb04b1e6f55e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 12 Nov 2024 20:22:40 -0300
Subject: [PATCH 109/133] Fix "external-video" from preview-card

---
 src/components/preview-card.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index 9fcd47c6f..76d99220d 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -96,7 +96,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
     return (
       <div
         ref={setRef}
-        className='relative w-2/5 flex-none overflow-hidden'
+        className='relative w-full flex-none overflow-hidden'
         dangerouslySetInnerHTML={content}
         style={{ height }}
       />
@@ -113,7 +113,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
 
   const interactive = card.type !== 'link';
   horizontal = typeof horizontal === 'boolean' ? horizontal : interactive || embedded;
-  const className = clsx('flex overflow-hidden rounded-lg border border-solid border-gray-200 text-sm text-gray-800 no-underline dark:border-gray-800 dark:text-gray-200', { horizontal, compact, interactive, 'flex flex-col md:flex-row': card.type === 'link' });
+  const className = clsx('flex overflow-hidden rounded-lg border border-solid border-gray-200 text-sm text-gray-800 no-underline dark:border-gray-800 dark:text-gray-200', { '!block': horizontal, 'border-gray-200 dark:border-gray-800': compact, interactive, 'flex flex-col md:flex-row': card.type === 'link' });
   const ratio = getRatio(card);
   const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
 
@@ -182,7 +182,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
       }
 
       embed = (
-        <div className='relative w-2/5 flex-none overflow-hidden'>
+        <div className='relative w-full flex-none overflow-hidden' style={{ flex: '0 0 40%' }}>
           {canvas}
           {thumbnail}
 
@@ -192,7 +192,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                 <button onClick={handleEmbedClick} className='appearance-none text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'>
                   <SvgIcon
                     src={iconVariant}
-                    className='absolute left-1/2 top-1/2 size-[30px] -translate-x-1/2 -translate-y-1/2 text-inherit'
+                    className=' size-6  text-inherit'
                   />
                 </button>
 
@@ -206,7 +206,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                   >
                     <SvgIcon
                       src={externalLinkIcon}
-                      className='absolute left-1/2 top-1/2 size-[30px] -translate-x-1/2 -translate-y-1/2 text-inherit'
+                      className='size-6 text-inherit'
                     />
                   </a>
                 )}

From aceaa90b96581fc2b54f3d65433c96e6933630d3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 12 Nov 2024 21:15:30 -0600
Subject: [PATCH 110/133] ErrorBoundary: always display error messages

---
 src/components/sentry-feedback-form.tsx | 71 -------------------------
 src/components/site-error-boundary.tsx  | 46 ++++++----------
 src/locales/en.json                     |  2 -
 3 files changed, 16 insertions(+), 103 deletions(-)
 delete mode 100644 src/components/sentry-feedback-form.tsx

diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
deleted file mode 100644
index ea1eb1db9..000000000
--- a/src/components/sentry-feedback-form.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import Button from 'soapbox/components/ui/button.tsx';
-import FormActions from 'soapbox/components/ui/form-actions.tsx';
-import FormGroup from 'soapbox/components/ui/form-group.tsx';
-import Form from 'soapbox/components/ui/form.tsx';
-import Text from 'soapbox/components/ui/text.tsx';
-import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
-import { captureSentryFeedback } from 'soapbox/sentry.ts';
-
-interface ISentryFeedbackForm {
-  eventId: string;
-}
-
-/** Accept feedback for the given Sentry event. */
-const SentryFeedbackForm: React.FC<ISentryFeedbackForm> = ({ eventId }) => {
-  const { account } = useOwnAccount();
-
-  const [feedback, setFeedback] = useState<string>();
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
-
-  const handleFeedbackChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    setFeedback(e.target.value);
-  };
-
-  const handleSubmitFeedback: React.FormEventHandler = async (_e) => {
-    if (!feedback || !eventId) return;
-    setIsSubmitting(true);
-
-    await captureSentryFeedback({
-      name: account?.acct,
-      associatedEventId: eventId,
-      message: feedback,
-    }).catch(console.error);
-
-    setIsSubmitted(true);
-  };
-
-  if (isSubmitted) {
-    return (
-      <Text align='center'>
-        <FormattedMessage id='alert.unexpected.thanks' defaultMessage='Thanks for your feedback!' />
-      </Text>
-    );
-  }
-
-  return (
-    <Form onSubmit={handleSubmitFeedback}>
-      <FormGroup>
-        <Textarea
-          value={feedback}
-          onChange={handleFeedbackChange}
-          placeholder='Anything you can tell us about what happened?'
-          disabled={isSubmitting}
-          autoGrow
-        />
-      </FormGroup>
-
-      <FormActions>
-        <Button type='submit' className='mx-auto' disabled={!feedback || isSubmitting}>
-          <FormattedMessage id='alert.unexpected.submit_feedback' defaultMessage='Submit Feedback' />
-        </Button>
-      </FormActions>
-    </Form>
-  );
-};
-
-export default SentryFeedbackForm;
\ No newline at end of file
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 15186694b..b18dcba21 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -2,7 +2,6 @@ import { type ErrorInfo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
 
-import { NODE_ENV } from 'soapbox/build-config.ts';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
@@ -13,7 +12,6 @@ import KVStore from 'soapbox/storage/kv-store.ts';
 import sourceCode from 'soapbox/utils/code.ts';
 import { unregisterSW } from 'soapbox/utils/sw.ts';
 
-import SentryFeedbackForm from './sentry-feedback-form.tsx';
 import SiteLogo from './site-logo.tsx';
 
 interface ISiteErrorBoundary {
@@ -22,16 +20,13 @@ interface ISiteErrorBoundary {
 
 /** Application-level error boundary. Fills the whole screen. */
 const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
-  const { links, sentryDsn } = useSoapboxConfig();
+  const { links } = useSoapboxConfig();
   const textarea = useRef<HTMLTextAreaElement>(null);
 
   const [error, setError] = useState<unknown>();
   const [componentStack, setComponentStack] = useState<string | null | undefined>();
   const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
-  const [sentryEventId, setSentryEventId] = useState<string>();
 
-  const sentryEnabled = Boolean(sentryDsn);
-  const isProduction = NODE_ENV === 'production';
   const errorText = String(error) + componentStack;
 
   const clearCookies: React.MouseEventHandler = (e) => {
@@ -64,7 +59,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
         ErrorBoundary: 'yes',
       },
     })
-      .then((eventId) => setSentryEventId(eventId))
       .catch(console.error);
 
     import('bowser')
@@ -127,30 +121,22 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
           </div>
 
           <div className='mx-auto max-w-lg space-y-4 py-16'>
-            {(isProduction) ? (
-              (sentryEnabled && sentryEventId) && (
-                <SentryFeedbackForm eventId={sentryEventId} />
-              )
-            ) : (
-              <>
-                {errorText && (
-                  <Textarea
-                    ref={textarea}
-                    value={errorText}
-                    onClick={handleCopy}
-                    isCodeEditor
-                    rows={12}
-                    readOnly
-                  />
-                )}
+            {errorText && (
+              <Textarea
+                ref={textarea}
+                value={errorText}
+                onClick={handleCopy}
+                isCodeEditor
+                rows={12}
+                readOnly
+              />
+            )}
 
-                {browser && (
-                  <Stack>
-                    <Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
-                    <Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
-                  </Stack>
-                )}
-              </>
+            {browser && (
+              <Stack>
+                <Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
+                <Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
+              </Stack>
             )}
           </div>
         </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index 653fd7dca..d7d7b179d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -202,8 +202,6 @@
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Something went wrong.",
   "alert.unexpected.return_home": "Return Home",
-  "alert.unexpected.submit_feedback": "Submit Feedback",
-  "alert.unexpected.thanks": "Thanks for your feedback!",
   "aliases.account.add": "Create alias",
   "aliases.account_label": "Old account:",
   "aliases.aliases_list_delete": "Unlink alias",

From a9e8c579793389fbd9cce21620b0df8b8c332d0d Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 13 Nov 2024 13:02:24 -0300
Subject: [PATCH 111/133] Remove "fonts.scss"

---
 src/styles/application.scss       |  1 -
 src/styles/components/search.scss |  4 +---
 src/styles/fonts.scss             | 13 -------------
 3 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 src/styles/fonts.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 5964a2d2d..e687f0dc8 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -1,5 +1,4 @@
 @use 'variables';
-@use 'fonts';
 @use 'basics';
 @use 'loading';
 @use 'ui';
diff --git a/src/styles/components/search.scss b/src/styles/components/search.scss
index 66c2f4311..64e6bcfd6 100644
--- a/src/styles/components/search.scss
+++ b/src/styles/components/search.scss
@@ -1,5 +1,3 @@
-@use "../fonts";
-
 .search {
   position: relative;
 }
@@ -16,7 +14,7 @@
 
   .svg-icon {
     @apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
-    @include fonts.font-size(16);
+    font-size: 16px;
     cursor: default;
     display: inline-block;
     position: absolute;
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
deleted file mode 100644
index 574c07c27..000000000
--- a/src/styles/fonts.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use 'sass:math';
-
-// TYPEOGRAPHY MIXINS
-
-// Use these mixins to define font-size and line-height
-// html and body declaration allows developer to pass px value as argument
-// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
-@mixin font-size($size) {
-  $rem: math.div($size, 10);
-  $px: $size;
-  font-size: #{$px + 'px'};
-  font-size: #{$rem + 'rem'};
-}

From 70c98a0e89e2b6e7db46eeec8b1199be583f98c3 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 13 Nov 2024 13:21:30 -0300
Subject: [PATCH 112/133] Remove "modal.scss"

---
 src/styles/application.scss      |   1 -
 src/styles/components/modal.scss | 169 -------------------------------
 2 files changed, 170 deletions(-)
 delete mode 100644 src/styles/components/modal.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index e687f0dc8..9b8647c8f 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -7,7 +7,6 @@
 @use 'accessibility';
 
 // COMPONENTS
-@use 'components/modal';
 @use 'components/compose-form';
 @use 'components/status';
 @use 'components/search';
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
deleted file mode 100644
index ceed69cc3..000000000
--- a/src/styles/components/modal.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-.modal-root__modal {
-  pointer-events: auto;
-  display: flex;
-  z-index: 9999;
-  max-height: 100%;
-  overflow-y: hidden;
-}
-
-.media-modal {
-  .audio-player.detailed,
-  .extended-video-player {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .audio-player {
-    max-width: 800px;
-    max-height: 600px;
-  }
-
-  .extended-video-player {
-    width: 100%;
-    height: 100%;
-
-    video {
-      @apply max-w-full max-h-[80%];
-    }
-  }
-}
-
-.error-modal {
-  @apply text-gray-900;
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  &__body {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 80vh;
-    width: 80vw;
-    max-width: 520px;
-    max-height: 420px;
-    position: relative;
-    text-align: center;
-
-    & > div {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      padding: 25px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      user-select: text;
-    }
-  }
-
-  &__footer {
-    flex: 0 0 auto;
-    display: flex;
-    justify-content: center;
-    padding: 25px;
-
-    & > div {
-      min-width: 33px;
-    }
-  }
-}
-
-.actions-modal {
-  @apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white black:bg-black dark:bg-gray-900 shadow-xl rounded-2xl;
-  max-height: calc(100vh - 3rem);
-
-  &__item-label {
-    font-weight: 500;
-  }
-
-  .dropdown-menu__separator {
-    @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600 black:bg-gray-800;
-  }
-
-  &__status {
-    @apply overflow-y-auto max-h-[300px];
-  }
-
-  ul {
-    @apply my-2 flex-shrink-0 overflow-y-auto;
-    max-height: calc(100vh - 147px);
-
-    &.with-status { max-height: calc(80vh - 75px); }
-
-    li:not(:empty) {
-      a,
-      button {
-        @apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 no-underline text-left;
-
-        &.destructive {
-          @apply text-danger-600 dark:text-danger-400;
-        }
-
-        .svg-icon:first-child {
-          @apply min-w-[1.25rem] w-5 h-5;
-
-          svg {
-            stroke-width: 1.5;
-          }
-        }
-      }
-
-      button[type='button'] {
-        @apply w-full justify-center text-center;
-      }
-    }
-  }
-}
-
-.remote-interaction-modal {
-  &__content {
-    display: flex;
-    flex-direction: column;
-    row-gap: 10px;
-  }
-
-  &__fields {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    width: 100%;
-
-    button {
-      align-self: flex-end;
-    }
-  }
-
-  &__divider {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin: 0 -10px;
-
-    &::before,
-    &::after {
-      @apply border-b border-gray-300 dark:border-gray-600;
-      content: '';
-      flex: 1;
-    }
-  }
-
-  @media screen and (width <= 895px) {
-    margin: 0;
-    border-radius: 6px;
-    height: unset !important;
-    width: 440px !important;
-  }
-
-  @media screen and (width <= 480px) {
-    width: 330px !important;
-  }
-}

From a92a427654b3eacc2def5c63e8e9b9b1d14a7ca5 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 13 Nov 2024 14:22:19 -0300
Subject: [PATCH 113/133] Remove "variables.scss"

---
 src/styles/application.scss             |  1 -
 src/styles/components/compose-form.scss | 14 --------------
 src/styles/ui.scss                      |  2 +-
 src/styles/variables.scss               | 10 ----------
 4 files changed, 1 insertion(+), 26 deletions(-)
 delete mode 100644 src/styles/variables.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 9b8647c8f..32bf54e2e 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -1,4 +1,3 @@
-@use 'variables';
 @use 'basics';
 @use 'loading';
 @use 'ui';
diff --git a/src/styles/components/compose-form.scss b/src/styles/components/compose-form.scss
index 9139a9ce3..37a986d39 100644
--- a/src/styles/components/compose-form.scss
+++ b/src/styles/components/compose-form.scss
@@ -1,17 +1,9 @@
-@use "../variables";
-
 .compose-form {
   &__warning {
     @apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
 
     strong {
       @apply font-medium;
-
-      @each $lang in variables.$cjk-langs {
-        &:lang(#{$lang}) {
-          @apply font-bold;
-        }
-      }
     }
 
     a {
@@ -169,12 +161,6 @@
 
       strong {
         @apply block font-medium text-black dark:text-white;
-
-        @each $lang in variables.$cjk-langs {
-          &:lang(#{$lang}) {
-            @apply font-bold;
-          }
-        }
       }
     }
   }
diff --git a/src/styles/ui.scss b/src/styles/ui.scss
index 5678148be..3683497c1 100644
--- a/src/styles/ui.scss
+++ b/src/styles/ui.scss
@@ -86,7 +86,7 @@
 .ui {
   display: block;
   width: 100%;
-  padding: 0 0 calc(var(--thumb-navigation-height) + 86px);
+  padding: 0 0 calc(60px + env(safe-area-inset-bottom) + 86px);
 
   .page {
     display: flex;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
deleted file mode 100644
index afcccbd20..000000000
--- a/src/styles/variables.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Language codes that uses CJK fonts
-/* stylelint-disable-next-line value-keyword-case -- locale filenames */
-$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
-
-// CSS variables
-// NOTE: Prefer CSS variables whenever possible.
-// They're future-proof and more flexible.
-:root {
-  --thumb-navigation-height: calc(60px + env(safe-area-inset-bottom));
-}

From 9b6173c9e56508a9abef92cd0b1e1dc92cf27926 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 12:18:55 -0600
Subject: [PATCH 114/133] MastodonClient: return a MastodonResponse object with
 `.pagination()` convenience method

---
 src/api/MastodonClient.ts   | 19 ++++++++++---------
 src/api/MastodonResponse.ts | 16 ++++++++++++++++
 src/queries/chats.ts        |  5 ++---
 src/queries/search.ts       |  3 +--
 src/queries/suggestions.ts  |  5 ++---
 src/utils/pagination.ts     | 16 ----------------
 6 files changed, 31 insertions(+), 33 deletions(-)
 create mode 100644 src/api/MastodonResponse.ts
 delete mode 100644 src/utils/pagination.ts

diff --git a/src/api/MastodonClient.ts b/src/api/MastodonClient.ts
index a0d084349..a41036b27 100644
--- a/src/api/MastodonClient.ts
+++ b/src/api/MastodonClient.ts
@@ -1,4 +1,5 @@
 import { HTTPError } from './HTTPError.ts';
+import { MastodonResponse } from './MastodonResponse.ts';
 
 interface Opts {
   searchParams?: URLSearchParams | Record<string, string | number | boolean>;
@@ -19,35 +20,35 @@ export class MastodonClient {
     this.accessToken = accessToken;
   }
 
-  async get(path: string, opts: Opts = {}): Promise<Response> {
+  async get(path: string, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('GET', path, undefined, opts);
   }
 
-  async post(path: string, data?: unknown, opts: Opts = {}): Promise<Response> {
+  async post(path: string, data?: unknown, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('POST', path, data, opts);
   }
 
-  async put(path: string, data?: unknown, opts: Opts = {}): Promise<Response> {
+  async put(path: string, data?: unknown, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('PUT', path, data, opts);
   }
 
-  async delete(path: string, opts: Opts = {}): Promise<Response> {
+  async delete(path: string, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('DELETE', path, undefined, opts);
   }
 
-  async patch(path: string, data: unknown, opts: Opts = {}): Promise<Response> {
+  async patch(path: string, data: unknown, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('PATCH', path, data, opts);
   }
 
-  async head(path: string, opts: Opts = {}): Promise<Response> {
+  async head(path: string, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('HEAD', path, undefined, opts);
   }
 
-  async options(path: string, opts: Opts = {}): Promise<Response> {
+  async options(path: string, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('OPTIONS', path, undefined, opts);
   }
 
-  async request(method: string, path: string, data: unknown, opts: Opts = {}): Promise<Response> {
+  async request(method: string, path: string, data: unknown, opts: Opts = {}): Promise<MastodonResponse> {
     const url = new URL(path, this.baseUrl);
 
     if (opts.searchParams) {
@@ -89,7 +90,7 @@ export class MastodonClient {
       throw new HTTPError(response, request);
     }
 
-    return response;
+    return new MastodonResponse(response.body, response);
   }
 
 }
\ No newline at end of file
diff --git a/src/api/MastodonResponse.ts b/src/api/MastodonResponse.ts
new file mode 100644
index 000000000..fb54008b0
--- /dev/null
+++ b/src/api/MastodonResponse.ts
@@ -0,0 +1,16 @@
+import LinkHeader from 'http-link-header';
+
+export class MastodonResponse extends Response {
+
+  /** Parses the `Link` header and returns URLs for the `prev` and `next` pages of this response, if any. */
+  pagination(): { prev?: string; next?: string } {
+    const header = this.headers.get('link');
+    const links = header ? new LinkHeader(header) : undefined;
+
+    return {
+      next: links?.refs.find((link) => link.rel === 'next')?.uri,
+      prev: links?.refs.find((link) => link.rel === 'prev')?.uri,
+    };
+  }
+
+}
diff --git a/src/queries/chats.ts b/src/queries/chats.ts
index a80c6f757..f353da79e 100644
--- a/src/queries/chats.ts
+++ b/src/queries/chats.ts
@@ -13,7 +13,6 @@ import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { ChatMessage } from 'soapbox/types/entities.ts';
 import { reOrderChatListItems, updateChatMessage } from 'soapbox/utils/chats.ts';
-import { getPagination } from 'soapbox/utils/pagination.ts';
 import { flattenPages, PaginatedResult, updatePageItem } from 'soapbox/utils/queries.ts';
 
 import { queryClient } from './client.ts';
@@ -91,7 +90,7 @@ const useChatMessages = (chat: IChat) => {
     const response = await api.get(uri);
     const data = await response.json();
 
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
     const result = data.map(normalizeChatMessage);
 
@@ -144,7 +143,7 @@ const useChats = (search?: string) => {
     });
     const data: IChat[] = await response.json();
 
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
 
     setUnreadChatsCount(Number(response.headers.get('x-unread-messages-count')) || sumBy(data, (chat) => chat.unread));
diff --git a/src/queries/search.ts b/src/queries/search.ts
index c23d84baa..38df39f0c 100644
--- a/src/queries/search.ts
+++ b/src/queries/search.ts
@@ -2,7 +2,6 @@ import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 
 import { useApi } from 'soapbox/hooks/useApi.ts';
 import { Account } from 'soapbox/types/entities.ts';
-import { getPagination } from 'soapbox/utils/pagination.ts';
 import { flattenPages, PaginatedResult } from 'soapbox/utils/queries.ts';
 
 export default function useAccountSearch(q: string) {
@@ -21,7 +20,7 @@ export default function useAccountSearch(q: string) {
     });
     const data = await response.json();
 
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
 
     return {
diff --git a/src/queries/suggestions.ts b/src/queries/suggestions.ts
index 71076a86a..9268fe120 100644
--- a/src/queries/suggestions.ts
+++ b/src/queries/suggestions.ts
@@ -4,7 +4,6 @@ import { fetchRelationships } from 'soapbox/actions/accounts.ts';
 import { importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
 import { useApi } from 'soapbox/hooks/useApi.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
-import { getPagination } from 'soapbox/utils/pagination.ts';
 
 import { PaginatedResult, removePageItem } from '../utils/queries.ts';
 
@@ -34,7 +33,7 @@ const useSuggestions = () => {
   const getV2Suggestions = async (pageParam: PageParam): Promise<PaginatedResult<Result>> => {
     const endpoint = pageParam?.link || '/api/v2/suggestions';
     const response = await api.get(endpoint);
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
 
     const data: Suggestion[] = await response.json();
@@ -93,7 +92,7 @@ function useOnboardingSuggestions() {
   const getV2Suggestions = async (pageParam: any): Promise<{ data: Suggestion[]; link: string | undefined; hasMore: boolean }> => {
     const link = pageParam?.link || '/api/v2/suggestions';
     const response = await api.get(link);
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
 
     const data: Suggestion[] = await response.json();
diff --git a/src/utils/pagination.ts b/src/utils/pagination.ts
deleted file mode 100644
index bf23f958f..000000000
--- a/src/utils/pagination.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import LinkHeader from 'http-link-header';
-
-interface Pagination {
-  next?: string;
-  prev?: string;
-}
-
-export function getPagination(response: Response): Pagination {
-  const header = response.headers.get('link');
-  const links = header ? new LinkHeader(header) : undefined;
-
-  return {
-    next: links?.refs.find((link) => link.rel === 'next')?.uri,
-    prev: links?.refs.find((link) => link.rel === 'prev')?.uri,
-  };
-}

From d861890488cd9b770c28eda18e6ac332cb6c1ef7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 13:32:50 -0600
Subject: [PATCH 115/133] Remove subdirectory build support, FE_SUBDIRECTORY
 variable

---
 src/actions/notifications.ts                   |  3 +--
 src/build-config-compiletime.ts                |  8 --------
 src/build-config.ts                            |  1 -
 src/components/announcements/emoji.tsx         |  3 +--
 src/components/autosuggest-emoji.tsx           |  3 +--
 src/components/ui/emoji.tsx                    |  3 +--
 src/features/emoji/components/emoji-picker.tsx |  6 ++----
 src/init/soapbox-mount.tsx                     |  3 +--
 src/utils/static.ts                            | 13 -------------
 9 files changed, 7 insertions(+), 36 deletions(-)
 delete mode 100644 src/utils/static.ts

diff --git a/src/actions/notifications.ts b/src/actions/notifications.ts
index 6ecf8023b..03019abb4 100644
--- a/src/actions/notifications.ts
+++ b/src/actions/notifications.ts
@@ -9,7 +9,6 @@ import { compareId } from 'soapbox/utils/comparators.ts';
 import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features.ts';
 import { unescapeHTML } from 'soapbox/utils/html.ts';
 import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification.ts';
-import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import { fetchRelationships } from './accounts.ts';
 import { fetchGroupRelationships } from './groups.ts';
@@ -120,7 +119,7 @@ const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<
             icon: notification.account.avatar,
             tag: notification.id,
             data: {
-              url: joinPublicPath('/notifications'),
+              url: '/notifications',
             },
           }).catch(console.error);
         }).catch(console.error);
diff --git a/src/build-config-compiletime.ts b/src/build-config-compiletime.ts
index e4ccfb943..8c74312b2 100644
--- a/src/build-config-compiletime.ts
+++ b/src/build-config-compiletime.ts
@@ -3,15 +3,12 @@
  * @module soapbox/build-config
  */
 
-// eslint-disable-next-line import/extensions
-import trim from 'lodash/trim.js';
 // eslint-disable-next-line import/extensions
 import trimEnd from 'lodash/trimEnd.js';
 
 const {
   NODE_ENV,
   BACKEND_URL,
-  FE_SUBDIRECTORY,
   FE_INSTANCE_SOURCE_DIR,
   SENTRY_DSN,
 } = process.env;
@@ -24,14 +21,9 @@ const sanitizeURL = (url: string | undefined = ''): string => {
   }
 };
 
-const sanitizeBasename = (path: string | undefined = ''): string => {
-  return `/${trim(path, '/')}`;
-};
-
 const env = {
   NODE_ENV: NODE_ENV || 'development',
   BACKEND_URL: sanitizeURL(BACKEND_URL),
-  FE_SUBDIRECTORY: sanitizeBasename(FE_SUBDIRECTORY),
   FE_INSTANCE_SOURCE_DIR: FE_INSTANCE_SOURCE_DIR || 'instance',
   SENTRY_DSN,
 };
diff --git a/src/build-config.ts b/src/build-config.ts
index d8799de7e..340a691e6 100644
--- a/src/build-config.ts
+++ b/src/build-config.ts
@@ -3,7 +3,6 @@ import type { SoapboxEnv } from './build-config-compiletime.ts';
 export const {
   NODE_ENV,
   BACKEND_URL,
-  FE_SUBDIRECTORY,
   FE_INSTANCE_SOURCE_DIR,
   SENTRY_DSN,
 } = import.meta.compileTime<SoapboxEnv>('./build-config-compiletime.ts');
diff --git a/src/components/announcements/emoji.tsx b/src/components/announcements/emoji.tsx
index 927278484..f9994ec47 100644
--- a/src/components/announcements/emoji.tsx
+++ b/src/components/announcements/emoji.tsx
@@ -1,6 +1,5 @@
 import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
 import { useSettings } from 'soapbox/hooks/useSettings.ts';
-import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import type { Map as ImmutableMap } from 'immutable';
 
@@ -25,7 +24,7 @@ const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
         className='emojione m-0 block'
         alt={emoji}
         title={title}
-        src={joinPublicPath(`packs/emoji/${filename}.svg`)}
+        src={`/packs/emoji/${filename}.svg`}
       />
     );
   } else if (emojiMap.get(emoji as any)) {
diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx
index 218d74012..81d27a480 100644
--- a/src/components/autosuggest-emoji.tsx
+++ b/src/components/autosuggest-emoji.tsx
@@ -1,6 +1,5 @@
 import { isCustomEmoji } from 'soapbox/features/emoji/index.ts';
 import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
-import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
@@ -21,7 +20,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
       return null;
     }
 
-    url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`);
+    url = `/packs/emoji/${mapping.unified}.svg`;
     alt = emoji.native;
   }
 
diff --git a/src/components/ui/emoji.tsx b/src/components/ui/emoji.tsx
index ae33d6376..da3449ccb 100644
--- a/src/components/ui/emoji.tsx
+++ b/src/components/ui/emoji.tsx
@@ -1,5 +1,4 @@
 import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji.ts';
-import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
   /** Unicode emoji character. */
@@ -23,7 +22,7 @@ const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
     <img
       draggable='false'
       alt={alt || emoji}
-      src={src || joinPublicPath(`packs/emoji/${filename}.svg`)}
+      src={src || `/packs/emoji/${filename}.svg`}
       {...rest}
     />
   );
diff --git a/src/features/emoji/components/emoji-picker.tsx b/src/features/emoji/components/emoji-picker.tsx
index 74cdc5d0f..927f010ba 100644
--- a/src/features/emoji/components/emoji-picker.tsx
+++ b/src/features/emoji/components/emoji-picker.tsx
@@ -2,14 +2,12 @@ import spriteSheet from 'emoji-datasource/img/twitter/sheets/32.png';
 import { Picker as EmojiPicker } from 'emoji-mart';
 import { useRef, useEffect } from 'react';
 
-import { joinPublicPath } from 'soapbox/utils/static.ts';
-
 import data from '../data.ts';
 
 const getSpritesheetURL = () => spriteSheet;
 
-const getImageURL = (set: string, name: string) => {
-  return joinPublicPath(`/packs/emoji/${name}.svg`);
+const getImageURL = (_set: string, name: string) => {
+  return `/packs/emoji/${name}.svg`;
 };
 
 const Picker: React.FC<any> = (props) => {
diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx
index bf61583c3..eafccacae 100644
--- a/src/init/soapbox-mount.tsx
+++ b/src/init/soapbox-mount.tsx
@@ -4,7 +4,6 @@ import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import { openModal } from 'soapbox/actions/modals.ts';
-import * as BuildConfig from 'soapbox/build-config.ts';
 import LoadingScreen from 'soapbox/components/loading-screen.tsx';
 import { ScrollContext } from 'soapbox/components/scroll-context.tsx';
 import SiteErrorBoundary from 'soapbox/components/site-error-boundary.tsx';
@@ -48,7 +47,7 @@ const SoapboxMount = () => {
 
   return (
     <SiteErrorBoundary>
-      <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
+      <BrowserRouter>
         <CompatRouter>
           <ScrollContext>
             <Switch>
diff --git a/src/utils/static.ts b/src/utils/static.ts
deleted file mode 100644
index 266d975a1..000000000
--- a/src/utils/static.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Static: functions related to static files.
- * @module soapbox/utils/static
- */
-
-import { join } from 'path-browserify';
-
-import * as BuildConfig from 'soapbox/build-config.ts';
-
-/** Gets the path to a file with build configuration being considered. */
-export const joinPublicPath = (...paths: string[]): string => {
-  return join(BuildConfig.FE_SUBDIRECTORY, ...paths);
-};

From 28bbaae793208eebc2a75873b2129fad3efe98d3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 13:38:40 -0600
Subject: [PATCH 116/133] Remove staticClient

---
 src/actions/about.test.ts  | 44 --------------------------------------
 src/actions/soapbox.ts     |  4 ++--
 src/api/__mocks__/index.ts |  2 --
 src/api/index.ts           | 10 ---------
 4 files changed, 2 insertions(+), 58 deletions(-)
 delete mode 100644 src/actions/about.test.ts

diff --git a/src/actions/about.test.ts b/src/actions/about.test.ts
deleted file mode 100644
index 34e5240f7..000000000
--- a/src/actions/about.test.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { describe, expect, it } from 'vitest';
-
-import { staticClient } from 'soapbox/api/index.ts';
-import { mockStore } from 'soapbox/jest/test-helpers.tsx';
-
-import {
-  FETCH_ABOUT_PAGE_REQUEST,
-  FETCH_ABOUT_PAGE_SUCCESS,
-  FETCH_ABOUT_PAGE_FAIL,
-  fetchAboutPage,
-} from './about.ts';
-
-describe('fetchAboutPage()', () => {
-  it('creates the expected actions on success', () => {
-
-    const mock = new MockAdapter(staticClient);
-
-    mock.onGet('/instance/about/index.html')
-      .reply(200, '<h1>Hello world</h1>');
-
-    const expectedActions = [
-      { type: FETCH_ABOUT_PAGE_REQUEST, slug: 'index' },
-      { type: FETCH_ABOUT_PAGE_SUCCESS, slug: 'index', html: '<h1>Hello world</h1>' },
-    ];
-    const store = mockStore({});
-
-    return store.dispatch(fetchAboutPage()).then(() => {
-      expect(store.getActions()).toEqual(expectedActions);
-    });
-  });
-
-  it('creates the expected actions on failure', () => {
-    const expectedActions = [
-      { type: FETCH_ABOUT_PAGE_REQUEST, slug: 'asdf' },
-      { type: FETCH_ABOUT_PAGE_FAIL, slug: 'asdf', error: new Error('Request failed with status code 404') },
-    ];
-    const store = mockStore({});
-
-    return store.dispatch(fetchAboutPage('asdf')).catch(() => {
-      expect(store.getActions()).toEqual(expectedActions);
-    });
-  });
-});
diff --git a/src/actions/soapbox.ts b/src/actions/soapbox.ts
index 31e7679b1..cee62ab4f 100644
--- a/src/actions/soapbox.ts
+++ b/src/actions/soapbox.ts
@@ -6,7 +6,7 @@ import KVStore from 'soapbox/storage/kv-store.ts';
 import { removeVS16s } from 'soapbox/utils/emoji.ts';
 import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { staticClient } from '../api/index.ts';
+import api from '../api/index.ts';
 
 import type { AppDispatch, RootState } from 'soapbox/store.ts';
 import type { APIEntity } from 'soapbox/types/entities.ts';
@@ -86,7 +86,7 @@ const loadSoapboxConfig = () =>
 
 const fetchSoapboxJson = (host: string | null) =>
   (dispatch: AppDispatch) =>
-    staticClient.get('/instance/soapbox.json').then(({ data }) => {
+    fetch('/instance/soapbox.json').then((response) => response.json()).then((data) => {
       if (!isObject(data)) throw 'soapbox.json failed';
       dispatch(importSoapboxConfig(data, host));
       return data;
diff --git a/src/api/__mocks__/index.ts b/src/api/__mocks__/index.ts
index d0664bbe6..ff5fba2c2 100644
--- a/src/api/__mocks__/index.ts
+++ b/src/api/__mocks__/index.ts
@@ -15,8 +15,6 @@ const setupMock = (axios: AxiosInstance) => {
   mocks.map(func => func(mock));
 };
 
-export const staticClient = api.staticClient;
-
 export const getLinks = (response: AxiosResponse): LinkHeader => {
   return new LinkHeader(response.headers?.link);
 };
diff --git a/src/api/index.ts b/src/api/index.ts
index 7a7e9aeaf..0898ab576 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -82,16 +82,6 @@ export const baseClient = (
   });
 };
 
-/**
-  * Dumb client for grabbing static files.
-  * It uses FE_SUBDIRECTORY and parses JSON if possible.
-  * No authorization is needed.
-  */
-export const staticClient = axios.create({
-  baseURL: BuildConfig.FE_SUBDIRECTORY,
-  transformResponse: [maybeParseJSON],
-});
-
 /**
   * Stateful API client.
   * Uses credentials from the Redux store if available.

From f8a8b580ad3601e7387e6a33700f122e8ff875b6 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 13 Nov 2024 16:50:54 -0300
Subject: [PATCH 117/133] Fix querySelector to "privacy-dropdown"

---
 src/features/compose/components/compose-form.tsx     | 2 +-
 src/features/compose/components/privacy-dropdown.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index b236695a9..d68626efc 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -127,7 +127,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       // List of elements that shouldn't collapse the composer when clicked
       // FIXME: Make this less brittle
       getClickableArea(),
-      document.querySelector('.privacy-dropdown__dropdown'),
+      document.getElementById('privacy-dropdown'),
       document.querySelector('em-emoji-picker'),
       document.getElementById('modal-overlay'),
     ].some(element => element?.contains(e.target as any));
diff --git a/src/features/compose/components/privacy-dropdown.tsx b/src/features/compose/components/privacy-dropdown.tsx
index 360bc2345..7b77ab035 100644
--- a/src/features/compose/components/privacy-dropdown.tsx
+++ b/src/features/compose/components/privacy-dropdown.tsx
@@ -126,7 +126,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
         // It should not be transformed when mounting because the resulting
         // size will be used to determine the coordinate of the menu by
         // react-overlays
-        <div className={clsx('absolute z-[1000] ml-10 overflow-hidden rounded-md bg-white text-sm shadow-lg black:border black:border-gray-800 black:bg-black dark:bg-gray-900', { 'block shadow-md': active })} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined, transformOrigin: placement === 'top' ? '50% 100%' : '50% 0' }} role='listbox' ref={node}>
+        <div id={'privacy-dropdown'} className={clsx('absolute z-[1000] ml-10 overflow-hidden rounded-md bg-white text-sm shadow-lg black:border black:border-gray-800 black:bg-black dark:bg-gray-900', { 'block shadow-md': active })} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined, transformOrigin: placement === 'top' ? '50% 100%' : '50% 0' }} role='listbox' ref={node}>
           {items.map(item => (
             <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('group flex cursor-pointer p-2.5 text-sm text-gray-700 hover:bg-gray-100 black:hover:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800', { 'bg-gray-100 dark:bg-gray-800 black:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700': item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
               <div className='mr-2.5 flex items-center justify-center rtl:ml-2.5 rtl:mr-0'>

From 7dba54bafa5a964916fe5e6a8756cb492db8f877 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 13 Nov 2024 17:06:58 -0300
Subject: [PATCH 118/133] Remove "aliases.scss" and style of
 "empty-column-indicator" from "aliases/index.tsx"

---
 src/features/aliases/index.tsx     |  5 +----
 src/styles/application.scss        |  1 -
 src/styles/components/aliases.scss | 14 --------------
 3 files changed, 1 insertion(+), 19 deletions(-)
 delete mode 100644 src/styles/components/aliases.scss

diff --git a/src/features/aliases/index.tsx b/src/features/aliases/index.tsx
index 30bb544ae..2c7a7e61b 100644
--- a/src/features/aliases/index.tsx
+++ b/src/features/aliases/index.tsx
@@ -62,10 +62,7 @@ const Aliases = () => {
       {
         loaded && searchAccountIds.size === 0 ? (
           <div
-            className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300' style={{
-              minHeight: 'unset',
-              overflowY: 'unset',
-            }}
+            className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'
           >
             <FormattedMessage id='empty_column.aliases.suggestions' defaultMessage='There are no account suggestions available for the provided term.' />
           </div>
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 32bf54e2e..02ff20ab2 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -9,5 +9,4 @@
 @use 'components/compose-form';
 @use 'components/status';
 @use 'components/search';
-@use 'components/aliases';
 @use 'components/icon';
\ No newline at end of file
diff --git a/src/styles/components/aliases.scss b/src/styles/components/aliases.scss
deleted file mode 100644
index 8f15165d4..000000000
--- a/src/styles/components/aliases.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.aliases {
-  &__accounts {
-    overflow-y: auto;
-
-    &.empty-column-indicator {
-      min-height: unset;
-      overflow-y: unset;
-    }
-  }
-}
-
-.aliases-settings-panel {
-  flex: 1;
-}

From a3e52a15cc94dfb1b05da14327e399b128e69ed4 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 13 Nov 2024 17:40:07 -0300
Subject: [PATCH 119/133] Remove "basics.scss" and organize "tailwind.css"

---
 index.html                                |  2 +-
 src/features/ui/components/modal-root.tsx |  4 +--
 src/styles/application.scss               |  1 -
 src/styles/basics.scss                    | 33 -----------------------
 src/styles/tailwind.css                   | 30 ++++++++++++++++++---
 5 files changed, 30 insertions(+), 40 deletions(-)
 delete mode 100644 src/styles/basics.scss

diff --git a/index.html b/index.html
index 4e41d029c..02eb70d2c 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,6 @@
         </div>
       </div>
     </div>
-    <noscript>To use this website, please enable JavaScript.</noscript>
+    <noscript class="text-center">To use this website, please enable JavaScript.</noscript>
   </body>
 </html>
\ No newline at end of file
diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index 5eff12842..0d8c71bd8 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/src/features/ui/components/modal-root.tsx
@@ -116,9 +116,9 @@ export default class ModalRoot extends PureComponent<IModalRoot> {
 
   componentDidUpdate(prevProps: IModalRoot, prevState: any, { visible }: any) {
     if (visible) {
-      document.body.classList.add('with-modals');
+      document.body.classList.add('overflow-hidden');
     } else {
-      document.body.classList.remove('with-modals');
+      document.body.classList.remove('overflow-hidden');
     }
   }
 
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 02ff20ab2..329a4cdd9 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -1,4 +1,3 @@
-@use 'basics';
 @use 'loading';
 @use 'ui';
 @use 'emoji-picker';
diff --git a/src/styles/basics.scss b/src/styles/basics.scss
deleted file mode 100644
index fec5daa0e..000000000
--- a/src/styles/basics.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-body {
-  @apply antialiased;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
-body.with-modals {
-  @apply overflow-hidden;
-}
-
-// Note: this is needed for React HotKeys performance. Removing this
-// will cause severe performance degradation on Safari.
-div[tabindex='-1']:focus {
-  outline: 0;
-}
-
-::selection {
-  @apply bg-primary-600 text-white;
-}
-
-noscript {
-  text-align: center;
-}
-
-.emojione {
-  @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
-}
-
-// Virtuoso empty placeholder fix.
-// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
-div[data-viewport-type='window'] {
-  position: static !important;
-}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 4c344ff82..17ee83a8e 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -2,9 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer utilities {
-  .status {
-    @apply min-h-[54px] cursor-default animate-fade opacity-100;
+@layer base {
+  body {
+    @apply antialiased;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
   }
 
   body.rtl {
@@ -16,6 +18,24 @@
     }
   }
 
+  ::selection {
+    @apply bg-primary-600 text-white;
+  }
+
+  div[data-viewport-type='window'] {
+    position: static !important;
+  }
+
+  div[tabindex='-1']:focus {
+    outline: 0;
+  }
+}
+
+@layer utilities {
+  .status {
+    @apply min-h-[54px] cursor-default animate-fade opacity-100;
+  }
+
   .thread {
     @apply bg-white black:bg-black dark:bg-primary-900;
   
@@ -110,6 +130,10 @@
     height: 36px !important;
   }  
 
+  .emojione {
+    @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
+  }
+
   .compose-form-warning {
     strong {
       @apply font-medium;

From f80b96c898af6a9caf469f3ea2edaebf7ff7b69e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 16:00:49 -0600
Subject: [PATCH 120/133] Fix plus icon in Follow button

---
 src/features/ui/components/action-button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 8a2f6144c..c0c3e8650 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -226,10 +226,10 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
 
       let icon: string | undefined;
 
-      if (isFollowing) {
-        icon = plusIcon;
-      } else if (blockedBy) {
+      if (blockedBy) {
         icon = banIcon;
+      } else if (!isFollowing) {
+        icon = plusIcon;
       }
 
       return (

From e0c4ef5ea7dafcd4ea75b41810d5eef188cbf501 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 16:28:22 -0600
Subject: [PATCH 121/133] EmojiPickerDropdown: put RenderAfter inside of
 Suspense (instead of the other way around)

---
 src/features/emoji/components/emoji-picker-dropdown.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index fcc9c05c3..ae5231fb5 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -215,8 +215,8 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
 
   return (
     visible ? (
-      <RenderAfter update={update}>
-        <Suspense>
+      <Suspense>
+        <RenderAfter update={update}>
           <EmojiPicker
             custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
             title={title}
@@ -232,8 +232,8 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
             skinTonePosition='search'
             previewPosition='none'
           />
-        </Suspense>
-      </RenderAfter>
+        </RenderAfter>
+      </Suspense>
     ) : null
   );
 };

From 5380922d4e13b84f3baaa47f3f6b6ab42bee1ff9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 18:35:12 -0600
Subject: [PATCH 122/133] vscode: fix auto-imports not having file extension

---
 .vscode/settings.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 79b4ed08d..3eef3018c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,5 +18,10 @@
     }
   ],
   "scss.validate": false,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "path-intellisense.extensionOnImport": true,
+  "javascript.preferences.importModuleSpecifierEnding": "js",
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifierEnding": "js",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

From ad24779343c4a54d9d54966ef8c7cd3331b79d20 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 18:35:49 -0600
Subject: [PATCH 123/133] Use an emoji picker modal on mobile

---
 src/components/ui/emoji-selector.tsx          | 21 +++++--
 src/components/ui/modal.tsx                   |  4 +-
 .../components/emoji-picker-dropdown.tsx      | 63 ++++++++++---------
 .../emoji/components/emoji-picker.tsx         |  2 +-
 src/features/ui/components/modal-root.tsx     |  2 +
 .../components/modals/emoji-picker-modal.tsx  | 17 +++++
 src/features/ui/util/async-components.ts      |  1 +
 7 files changed, 75 insertions(+), 35 deletions(-)
 create mode 100644 src/features/ui/components/modals/emoji-picker-modal.tsx

diff --git a/src/components/ui/emoji-selector.tsx b/src/components/ui/emoji-selector.tsx
index 77d0cea4c..32303800f 100644
--- a/src/components/ui/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector.tsx
@@ -3,13 +3,16 @@ import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
 import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
 
 import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
@@ -67,6 +70,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   const soapboxConfig = useSoapboxConfig();
   const { customEmojiReacts } = useFeatures();
 
+  const dispatch = useAppDispatch();
   const [expanded, setExpanded] = useState(false);
 
   const { x, y, strategy, refs, update } = useFloating<HTMLElement>({
@@ -75,7 +79,18 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   });
 
   const handleExpand: React.MouseEventHandler = () => {
-    setExpanded(true);
+    if (userTouching.matches) {
+      dispatch(openModal('EMOJI_PICKER', {
+        onPickEmoji: (emoji: Emoji) => {
+          handlePickEmoji(emoji);
+          dispatch(closeModal('EMOJI_PICKER'));
+        },
+      }));
+
+      onClose?.();
+    } else {
+      setExpanded(true);
+    }
   };
 
   const handlePickEmoji = (emoji: Emoji) => {
@@ -95,9 +110,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   }, [visible]);
 
   useClickOutside(refs, () => {
-    if (onClose) {
-      onClose();
-    }
+    onClose?.();
   });
 
   return (
diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
index 595787da6..a7db84f99 100644
--- a/src/components/ui/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -16,7 +16,7 @@ const messages = defineMessages({
 });
 
 const themes = {
-  normal: 'bg-white p-6 shadow-xl',
+  normal: 'bg-white black:bg-black dark:bg-primary-900 p-6 shadow-xl text-gray-900 dark:text-gray-100',
   transparent: 'bg-transparent p-0 shadow-none',
 };
 
@@ -105,7 +105,7 @@ const Modal = forwardRef<HTMLDivElement, IModal>(({
     <div
       ref={ref}
       data-testid='modal'
-      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl text-start align-middle text-gray-900 transition-all black:bg-black dark:bg-primary-900 dark:text-gray-100', widths[width], themes[theme])}
+      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl text-start align-middle transition-all', widths[width], themes[theme])}
     >
       <div className='w-full justify-between sm:flex sm:items-start'>
         <div className='w-full'>
diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index ae5231fb5..df456925a 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -1,5 +1,5 @@
 import { Map as ImmutableMap } from 'immutable';
-import { useEffect, useState, useLayoutEffect, Suspense } from 'react';
+import React, { useEffect, useState, useLayoutEffect, Suspense } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
@@ -45,9 +45,9 @@ export interface IEmojiPickerDropdown {
   onPickEmoji?: (emoji: Emoji) => void;
   condensed?: boolean;
   withCustom?: boolean;
-  visible: boolean;
-  setVisible: (value: boolean) => void;
-  update: (() => any) | null;
+  visible?: boolean;
+  setVisible?: (value: boolean) => void;
+  update?: (() => any) | null;
 }
 
 const perLine = 8;
@@ -105,8 +105,13 @@ const getCustomEmojis = createSelector([
   }
 }));
 
+interface IRenderAfter {
+  children: React.ReactNode;
+  update: () => void;
+}
+
 // Fixes render bug where popover has a delayed position update
-const RenderAfter = ({ children, update }: any) => {
+const RenderAfter: React.FC<IRenderAfter> = ({ children, update }) => {
   const [nextTick, setNextTick] = useState(false);
 
   useEffect(() => {
@@ -125,7 +130,7 @@ const RenderAfter = ({ children, update }: any) => {
 };
 
 const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
-  onPickEmoji, visible, setVisible, update, withCustom = true,
+  onPickEmoji, visible = true, setVisible, update, withCustom = true,
 }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -136,7 +141,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
   const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
 
   const handlePick = (emoji: any) => {
-    setVisible(false);
+    setVisible?.(false);
 
     let pickedEmoji: Emoji;
 
@@ -213,28 +218,30 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
     document.body.style.overflow = '';
   }, []);
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    visible ? (
-      <Suspense>
-        <RenderAfter update={update}>
-          <EmojiPicker
-            custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
-            title={title}
-            onEmojiSelect={handlePick}
-            recent={frequentlyUsedEmojis}
-            perLine={8}
-            skin={handleSkinTone}
-            emojiSize={22}
-            emojiButtonSize={34}
-            set='twitter'
-            theme={theme}
-            i18n={getI18n()}
-            skinTonePosition='search'
-            previewPosition='none'
-          />
-        </RenderAfter>
-      </Suspense>
-    ) : null
+    <Suspense>
+      <RenderAfter update={update ?? (() => {})}>
+        <EmojiPicker
+          custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
+          title={title}
+          onEmojiSelect={handlePick}
+          recent={frequentlyUsedEmojis}
+          perLine={8}
+          skin={handleSkinTone}
+          emojiSize={22}
+          emojiButtonSize={34}
+          set='twitter'
+          theme={theme}
+          i18n={getI18n()}
+          skinTonePosition='search'
+          previewPosition='none'
+        />
+      </RenderAfter>
+    </Suspense>
   );
 };
 
diff --git a/src/features/emoji/components/emoji-picker.tsx b/src/features/emoji/components/emoji-picker.tsx
index 927f010ba..a6dc860ff 100644
--- a/src/features/emoji/components/emoji-picker.tsx
+++ b/src/features/emoji/components/emoji-picker.tsx
@@ -19,7 +19,7 @@ const Picker: React.FC<any> = (props) => {
     new EmojiPicker(input);
   }, []);
 
-  return <div ref={ref} />;
+  return <div className='flex justify-center' ref={ref} />;
 };
 
 export default Picker;
diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index 5eff12842..024b71d8b 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/src/features/ui/components/modal-root.tsx
@@ -18,6 +18,7 @@ import {
   EditDomainModal,
   EditFederationModal,
   EmbedModal,
+  EmojiPickerModal,
   EventMapModal,
   EventParticipantsModal,
   FamiliarFollowersModal,
@@ -72,6 +73,7 @@ const MODAL_COMPONENTS: Record<string, React.ExoticComponent<any>> = {
   'EDIT_FEDERATION': EditFederationModal,
   'EDIT_RULE': EditRuleModal,
   'EMBED': EmbedModal,
+  'EMOJI_PICKER': EmojiPickerModal,
   'EVENT_MAP': EventMapModal,
   'EVENT_PARTICIPANTS': EventParticipantsModal,
   'FAMILIAR_FOLLOWERS': FamiliarFollowersModal,
diff --git a/src/features/ui/components/modals/emoji-picker-modal.tsx b/src/features/ui/components/modals/emoji-picker-modal.tsx
new file mode 100644
index 000000000..e3cd91ccc
--- /dev/null
+++ b/src/features/ui/components/modals/emoji-picker-modal.tsx
@@ -0,0 +1,17 @@
+import Modal from 'soapbox/components/ui/modal.tsx';
+import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import { Emoji } from 'soapbox/features/emoji/index.ts';
+
+interface IEmojiPickerModal {
+  onPickEmoji?: (emoji: Emoji) => void;
+}
+
+export const EmojiPickerModal: React.FC<IEmojiPickerModal> = (props) => {
+  return (
+    <Modal className='flex' theme='transparent'>
+      <EmojiPickerDropdown {...props} />
+    </Modal>
+  );
+};
+
+export default EmojiPickerModal;
\ No newline at end of file
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index 546e931ee..7b2a62ab5 100644
--- a/src/features/ui/util/async-components.ts
+++ b/src/features/ui/util/async-components.ts
@@ -2,6 +2,7 @@ import { lazy } from 'react';
 
 export const AboutPage = lazy(() => import('soapbox/features/about/index.tsx'));
 export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/emoji-picker.tsx'));
+export const EmojiPickerModal = lazy(() => import('soapbox/features/ui/components/modals/emoji-picker-modal.tsx'));
 export const Notifications = lazy(() => import('soapbox/features/notifications/index.tsx'));
 export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline/index.tsx'));
 export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline/index.tsx'));

From 75e2e11b1604951a81181fca43ffb5ce07bdc25b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 18:37:44 -0600
Subject: [PATCH 124/133] EmojiPickerDropdown: remove unnecessary bare React
 import

---
 src/features/emoji/components/emoji-picker-dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index df456925a..bdae364b3 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -1,5 +1,5 @@
 import { Map as ImmutableMap } from 'immutable';
-import React, { useEffect, useState, useLayoutEffect, Suspense } from 'react';
+import { useEffect, useState, useLayoutEffect, Suspense } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 

From a1ce93829535f653559c9dbef58bff9d6e40bffa Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 18:58:03 -0600
Subject: [PATCH 125/133] Display recently used emojis first in chooser

---
 src/components/ui/emoji-selector.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/emoji-selector.tsx b/src/components/ui/emoji-selector.tsx
index 32303800f..ba06887bb 100644
--- a/src/components/ui/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector.tsx
@@ -7,8 +7,10 @@ import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import EmojiPickerDropdown, { getFrequentlyUsedEmojis } from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import emojiData from 'soapbox/features/emoji/data.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
@@ -67,8 +69,9 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   offsetOptions,
   all = true,
 }): JSX.Element => {
-  const soapboxConfig = useSoapboxConfig();
+  const { allowedEmoji } = useSoapboxConfig();
   const { customEmojiReacts } = useFeatures();
+  const shortcodes = useAppSelector((state) => getFrequentlyUsedEmojis(state));
 
   const dispatch = useAppDispatch();
   const [expanded, setExpanded] = useState(false);
@@ -113,6 +116,16 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
     onClose?.();
   });
 
+  const recentEmojis = shortcodes.reduce<string[]>((results, shortcode) => {
+    const emoji = emojiData.emojis[shortcode]?.skins[0]?.native;
+    if (emoji) {
+      results.push(emoji);
+    }
+    return results;
+  }, []);
+
+  const emojis = new Set([...recentEmojis, ...allowedEmoji]);
+
   return (
     <div
       className={clsx('z-[101] transition-opacity duration-100', {
@@ -138,7 +151,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
         <HStack
           className={clsx('z-[999] flex w-max max-w-[100vw] flex-wrap space-x-3 rounded-full bg-white px-3 py-2.5 shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700')}
         >
-          {Array.from(soapboxConfig.allowedEmoji).map((emoji, i) => (
+          {[...emojis].slice(0, 6).map((emoji, i) => (
             <EmojiButton
               key={i}
               emoji={emoji}

From 1211f217b1fbe189323bb38f07260dd1dd282372 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Nov 2024 19:57:31 -0600
Subject: [PATCH 126/133] Fix black mode

---
 tailwind.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index afd88d28c..49f6129c3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,7 +6,7 @@ import plugin from 'tailwindcss/plugin';
 
 import { parseColorMatrix } from './tailwind/colors.ts';
 
-const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
+const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black.black &'));
 
 const config: Config = {
   content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],

From fab4e1c71b9bc2e0fb43d80a0715007177dab966 Mon Sep 17 00:00:00 2001
From: Hendra Wahyu <hendra1rangga@gmail.com>
Date: Tue, 12 Nov 2024 14:08:40 +0000
Subject: [PATCH 127/133] Translated using Weblate (Indonesian)

Currently translated at 87.7% (1488 of 1695 strings)

Translation: Soapbox/Soapbox
Translate-URL: https://hosted.weblate.org/projects/soapbox-pub/soapbox/id/
---
 src/locales/id.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/locales/id.json b/src/locales/id.json
index ecca0a26d..9bf98c6bb 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -38,6 +38,7 @@
   "account.mute": "Bisukan @{name}",
   "account.muted": "Membisukan",
   "account.never_active": "Tidak pernah",
+  "account.npub": "Salin npub pengguna",
   "account.patron": "Patron",
   "account.posts": "Postingan",
   "account.posts_with_replies": "Postingan & balasan",

From 0a88d5104f4787c07278b7d42b8bdc873cff5bbd Mon Sep 17 00:00:00 2001
From: Hosted Weblate <hosted@weblate.org>
Date: Wed, 13 Nov 2024 03:55:03 +0000
Subject: [PATCH 128/133] Update translation files

Updated by "Cleanup translation files" hook in Weblate.

Translation: Soapbox/Soapbox
Translate-URL: https://hosted.weblate.org/projects/soapbox-pub/soapbox/
---
 src/locales/ar.json    | 2 --
 src/locales/cy.json    | 2 --
 src/locales/es.json    | 2 --
 src/locales/fr.json    | 2 --
 src/locales/hr.json    | 2 --
 src/locales/id.json    | 2 --
 src/locales/it.json    | 2 --
 src/locales/ja.json    | 2 --
 src/locales/pl.json    | 2 --
 src/locales/pt-BR.json | 2 --
 src/locales/pt.json    | 2 --
 src/locales/zh-CN.json | 2 --
 src/locales/zh-TW.json | 2 --
 13 files changed, 26 deletions(-)

diff --git a/src/locales/ar.json b/src/locales/ar.json
index e5024ed6b..0418c6a1b 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -166,8 +166,6 @@
   "alert.unexpected.links.support": "الدعم",
   "alert.unexpected.message": "حدث خطأ ما.",
   "alert.unexpected.return_home": "العودة للصفحة الرئيسة",
-  "alert.unexpected.submit_feedback": "إرسال الملاحظات",
-  "alert.unexpected.thanks": "شكرا لملاحظاتك!",
   "aliases.account.add": "إنشاء اسم مستعار",
   "aliases.account_label": "الحساب القديم:",
   "aliases.aliases_list_delete": "إلغاء ربط الاسم المستعار",
diff --git a/src/locales/cy.json b/src/locales/cy.json
index 7213c613f..9cb6cc675 100644
--- a/src/locales/cy.json
+++ b/src/locales/cy.json
@@ -91,8 +91,6 @@
   "alert.unexpected.links.support": "Cymorth",
   "alert.unexpected.message": "Aeth rhywbeth o'i le.",
   "alert.unexpected.return_home": "Dychwelyd i'r hafan",
-  "alert.unexpected.submit_feedback": "Anfon adborth",
-  "alert.unexpected.thanks": "Diolch am eich adborth!",
   "aliases.account_label": "Hen gyfrif:",
   "aliases.search": "Chwilio eich hen gyfrif",
   "announcements.title": "Cyhoeddiadau",
diff --git a/src/locales/es.json b/src/locales/es.json
index 33b1c451e..241be5e26 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -202,8 +202,6 @@
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Hubo un error inesperado.",
   "alert.unexpected.return_home": "Return Home",
-  "alert.unexpected.submit_feedback": "Enviar comentarios",
-  "alert.unexpected.thanks": "¡Gracias por sus comentarios!",
   "aliases.account.add": "Crear alias",
   "aliases.account_label": "Old account:",
   "aliases.aliases_list_delete": "Desvincular alias",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 55282edcf..9a8784a64 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -202,8 +202,6 @@
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Une erreur inattendue s’est produite.",
   "alert.unexpected.return_home": "Return Home",
-  "alert.unexpected.submit_feedback": "Soumettre une suggestion",
-  "alert.unexpected.thanks": "Merci pour votre suggestion !",
   "aliases.account.add": "Créer un alias",
   "aliases.account_label": "Ancien compte :",
   "aliases.aliases_list_delete": "Délier l'alias",
diff --git a/src/locales/hr.json b/src/locales/hr.json
index 62d8721f9..d945e153a 100644
--- a/src/locales/hr.json
+++ b/src/locales/hr.json
@@ -186,8 +186,6 @@
   "alert.unexpected.links.support": "Podrška",
   "alert.unexpected.message": "Dogodila se greška.",
   "alert.unexpected.return_home": "Povratak na početnu stranicu",
-  "alert.unexpected.submit_feedback": "Pošalji povratne informacije",
-  "alert.unexpected.thanks": "Hvala na povratnoj informaciji!",
   "aliases.account.add": "Stvori alias",
   "aliases.account_label": "Stari račun:",
   "aliases.aliases_list_delete": "Prekini vezu aliasa",
diff --git a/src/locales/id.json b/src/locales/id.json
index 9bf98c6bb..ab7181c7d 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -162,8 +162,6 @@
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Terjadi kesalahan yang tidak terduga.",
   "alert.unexpected.return_home": "Return Home",
-  "alert.unexpected.submit_feedback": "Kirim Umpan balik",
-  "alert.unexpected.thanks": "Terima kasih atas umpan balik Anda!",
   "aliases.account.add": "Buat alias",
   "aliases.account_label": "Old account:",
   "aliases.aliases_list_delete": "Batalkan tautan alias",
diff --git a/src/locales/it.json b/src/locales/it.json
index d6525f2a7..8c7a6ccf9 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -177,8 +177,6 @@
   "alert.unexpected.links.support": "Assistenza",
   "alert.unexpected.message": "Si è verificato un errore.",
   "alert.unexpected.return_home": "Torna alla Home",
-  "alert.unexpected.submit_feedback": "Invia feedback",
-  "alert.unexpected.thanks": "Grazie per il feedback!",
   "aliases.account.add": "Crea un alias",
   "aliases.account_label": "Vecchio indirizzo:",
   "aliases.aliases_list_delete": "Elimina alias",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index dcf448adb..200d50dba 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -160,8 +160,6 @@
   "alert.unexpected.links.support": "サポート",
   "alert.unexpected.message": "不明なエラーが発生しました。",
   "alert.unexpected.return_home": "Return Home",
-  "alert.unexpected.submit_feedback": "フィードバックを送信する",
-  "alert.unexpected.thanks": "フィードバック頂きありがとうございます!",
   "aliases.account.add": "エイリアスを作成する",
   "aliases.account_label": "旧アカウント:",
   "aliases.aliases_list_delete": "エイリアスを解除する",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index ca248ab78..cbab35c62 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -173,8 +173,6 @@
   "alert.unexpected.links.support": "Wsparcie techniczne",
   "alert.unexpected.message": "Wystąpił nieoczekiwany błąd.",
   "alert.unexpected.return_home": "Wróć na stronę główną",
-  "alert.unexpected.submit_feedback": "Prześlij opinię",
-  "alert.unexpected.thanks": "Dziękujemy za twoją opinię!",
   "aliases.account.add": "Utwórz alias",
   "aliases.account_label": "Stare konto:",
   "aliases.aliases_list_delete": "Odłącz alias",
diff --git a/src/locales/pt-BR.json b/src/locales/pt-BR.json
index 7c6be04a8..8429524de 100644
--- a/src/locales/pt-BR.json
+++ b/src/locales/pt-BR.json
@@ -202,8 +202,6 @@
   "alert.unexpected.links.support": "Suporte",
   "alert.unexpected.message": "Ocorreu um erro inesperado.",
   "alert.unexpected.return_home": "Voltar para Início",
-  "alert.unexpected.submit_feedback": "Enviar feedback",
-  "alert.unexpected.thanks": "Obrigado pelo seu feedback!",
   "aliases.account.add": "Criar alias",
   "aliases.account_label": "Conta antiga:",
   "aliases.aliases_list_delete": "Desvincular alias",
diff --git a/src/locales/pt.json b/src/locales/pt.json
index 03ea7e8ee..d0fc6f19d 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -202,8 +202,6 @@
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Ocorreu um erro inesperado.",
   "alert.unexpected.return_home": "Return Home",
-  "alert.unexpected.submit_feedback": "Enviar feedback",
-  "alert.unexpected.thanks": "Obrigado pelo seu feedback!",
   "aliases.account.add": "Create alias",
   "aliases.account_label": "Old account:",
   "aliases.aliases_list_delete": "Unlink alias",
diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
index 105684143..503158bc0 100644
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -202,8 +202,6 @@
   "alert.unexpected.links.support": "支持",
   "alert.unexpected.message": "发生了意外错误。",
   "alert.unexpected.return_home": "回到主页",
-  "alert.unexpected.submit_feedback": "提交反馈",
-  "alert.unexpected.thanks": "感谢您的反馈！",
   "aliases.account.add": "创建别名",
   "aliases.account_label": "旧帐号：",
   "aliases.aliases_list_delete": "删除别名",
diff --git a/src/locales/zh-TW.json b/src/locales/zh-TW.json
index ef866e96a..aa270d17f 100644
--- a/src/locales/zh-TW.json
+++ b/src/locales/zh-TW.json
@@ -161,8 +161,6 @@
   "alert.unexpected.links.support": "支援",
   "alert.unexpected.message": "發生了非預期的錯誤。",
   "alert.unexpected.return_home": "回到首頁",
-  "alert.unexpected.submit_feedback": "提交回應",
-  "alert.unexpected.thanks": "感謝您的回饋意見！",
   "aliases.account.add": "創建別名",
   "aliases.account_label": "原帳戶：",
   "aliases.aliases_list_delete": "刪除別名",

From b7dcd4df8a13953813db9f79c77820c959822bde Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 14 Nov 2024 16:25:11 -0300
Subject: [PATCH 129/133] Merge branch main into fix-classnames

---
 .vscode/settings.json                         |  7 +-
 src/actions/about.test.ts                     | 44 ------------
 src/actions/notifications.ts                  |  3 +-
 src/actions/soapbox.ts                        |  4 +-
 src/api/MastodonClient.ts                     | 19 ++---
 src/api/MastodonResponse.ts                   | 16 +++++
 src/api/__mocks__/index.ts                    |  2 -
 src/api/index.ts                              | 10 ---
 src/build-config-compiletime.ts               |  8 ---
 src/build-config.ts                           |  1 -
 src/components/announcements/emoji.tsx        |  3 +-
 src/components/autosuggest-emoji.tsx          |  3 +-
 src/components/sentry-feedback-form.tsx       | 71 -------------------
 src/components/site-error-boundary.tsx        | 46 +++++-------
 src/components/ui/emoji-selector.tsx          | 40 +++++++++--
 src/components/ui/emoji.tsx                   |  3 +-
 src/components/ui/modal.tsx                   |  4 +-
 .../components/emoji-picker-dropdown.tsx      | 59 ++++++++-------
 .../emoji/components/emoji-picker.tsx         |  8 +--
 src/features/ui/components/action-button.tsx  |  6 +-
 src/features/ui/components/modal-root.tsx     |  2 +
 .../components/modals/emoji-picker-modal.tsx  | 17 +++++
 src/features/ui/util/async-components.ts      |  1 +
 src/init/soapbox-mount.tsx                    |  3 +-
 src/locales/en.json                           |  2 -
 src/queries/chats.ts                          |  5 +-
 src/queries/search.ts                         |  3 +-
 src/queries/suggestions.ts                    |  5 +-
 src/styles/application.scss                   |  2 +-
 src/utils/pagination.ts                       | 16 -----
 src/utils/static.ts                           | 13 ----
 tailwind.config.ts                            |  2 +-
 32 files changed, 156 insertions(+), 272 deletions(-)
 delete mode 100644 src/actions/about.test.ts
 create mode 100644 src/api/MastodonResponse.ts
 delete mode 100644 src/components/sentry-feedback-form.tsx
 create mode 100644 src/features/ui/components/modals/emoji-picker-modal.tsx
 delete mode 100644 src/utils/pagination.ts
 delete mode 100644 src/utils/static.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 79b4ed08d..3eef3018c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,5 +18,10 @@
     }
   ],
   "scss.validate": false,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "path-intellisense.extensionOnImport": true,
+  "javascript.preferences.importModuleSpecifierEnding": "js",
+  "javascript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.importModuleSpecifierEnding": "js",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }
diff --git a/src/actions/about.test.ts b/src/actions/about.test.ts
deleted file mode 100644
index 34e5240f7..000000000
--- a/src/actions/about.test.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { describe, expect, it } from 'vitest';
-
-import { staticClient } from 'soapbox/api/index.ts';
-import { mockStore } from 'soapbox/jest/test-helpers.tsx';
-
-import {
-  FETCH_ABOUT_PAGE_REQUEST,
-  FETCH_ABOUT_PAGE_SUCCESS,
-  FETCH_ABOUT_PAGE_FAIL,
-  fetchAboutPage,
-} from './about.ts';
-
-describe('fetchAboutPage()', () => {
-  it('creates the expected actions on success', () => {
-
-    const mock = new MockAdapter(staticClient);
-
-    mock.onGet('/instance/about/index.html')
-      .reply(200, '<h1>Hello world</h1>');
-
-    const expectedActions = [
-      { type: FETCH_ABOUT_PAGE_REQUEST, slug: 'index' },
-      { type: FETCH_ABOUT_PAGE_SUCCESS, slug: 'index', html: '<h1>Hello world</h1>' },
-    ];
-    const store = mockStore({});
-
-    return store.dispatch(fetchAboutPage()).then(() => {
-      expect(store.getActions()).toEqual(expectedActions);
-    });
-  });
-
-  it('creates the expected actions on failure', () => {
-    const expectedActions = [
-      { type: FETCH_ABOUT_PAGE_REQUEST, slug: 'asdf' },
-      { type: FETCH_ABOUT_PAGE_FAIL, slug: 'asdf', error: new Error('Request failed with status code 404') },
-    ];
-    const store = mockStore({});
-
-    return store.dispatch(fetchAboutPage('asdf')).catch(() => {
-      expect(store.getActions()).toEqual(expectedActions);
-    });
-  });
-});
diff --git a/src/actions/notifications.ts b/src/actions/notifications.ts
index 6ecf8023b..03019abb4 100644
--- a/src/actions/notifications.ts
+++ b/src/actions/notifications.ts
@@ -9,7 +9,6 @@ import { compareId } from 'soapbox/utils/comparators.ts';
 import { getFeatures, parseVersion, PLEROMA } from 'soapbox/utils/features.ts';
 import { unescapeHTML } from 'soapbox/utils/html.ts';
 import { EXCLUDE_TYPES, NOTIFICATION_TYPES } from 'soapbox/utils/notification.ts';
-import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import { fetchRelationships } from './accounts.ts';
 import { fetchGroupRelationships } from './groups.ts';
@@ -120,7 +119,7 @@ const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<
             icon: notification.account.avatar,
             tag: notification.id,
             data: {
-              url: joinPublicPath('/notifications'),
+              url: '/notifications',
             },
           }).catch(console.error);
         }).catch(console.error);
diff --git a/src/actions/soapbox.ts b/src/actions/soapbox.ts
index 31e7679b1..cee62ab4f 100644
--- a/src/actions/soapbox.ts
+++ b/src/actions/soapbox.ts
@@ -6,7 +6,7 @@ import KVStore from 'soapbox/storage/kv-store.ts';
 import { removeVS16s } from 'soapbox/utils/emoji.ts';
 import { getFeatures } from 'soapbox/utils/features.ts';
 
-import api, { staticClient } from '../api/index.ts';
+import api from '../api/index.ts';
 
 import type { AppDispatch, RootState } from 'soapbox/store.ts';
 import type { APIEntity } from 'soapbox/types/entities.ts';
@@ -86,7 +86,7 @@ const loadSoapboxConfig = () =>
 
 const fetchSoapboxJson = (host: string | null) =>
   (dispatch: AppDispatch) =>
-    staticClient.get('/instance/soapbox.json').then(({ data }) => {
+    fetch('/instance/soapbox.json').then((response) => response.json()).then((data) => {
       if (!isObject(data)) throw 'soapbox.json failed';
       dispatch(importSoapboxConfig(data, host));
       return data;
diff --git a/src/api/MastodonClient.ts b/src/api/MastodonClient.ts
index a0d084349..a41036b27 100644
--- a/src/api/MastodonClient.ts
+++ b/src/api/MastodonClient.ts
@@ -1,4 +1,5 @@
 import { HTTPError } from './HTTPError.ts';
+import { MastodonResponse } from './MastodonResponse.ts';
 
 interface Opts {
   searchParams?: URLSearchParams | Record<string, string | number | boolean>;
@@ -19,35 +20,35 @@ export class MastodonClient {
     this.accessToken = accessToken;
   }
 
-  async get(path: string, opts: Opts = {}): Promise<Response> {
+  async get(path: string, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('GET', path, undefined, opts);
   }
 
-  async post(path: string, data?: unknown, opts: Opts = {}): Promise<Response> {
+  async post(path: string, data?: unknown, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('POST', path, data, opts);
   }
 
-  async put(path: string, data?: unknown, opts: Opts = {}): Promise<Response> {
+  async put(path: string, data?: unknown, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('PUT', path, data, opts);
   }
 
-  async delete(path: string, opts: Opts = {}): Promise<Response> {
+  async delete(path: string, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('DELETE', path, undefined, opts);
   }
 
-  async patch(path: string, data: unknown, opts: Opts = {}): Promise<Response> {
+  async patch(path: string, data: unknown, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('PATCH', path, data, opts);
   }
 
-  async head(path: string, opts: Opts = {}): Promise<Response> {
+  async head(path: string, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('HEAD', path, undefined, opts);
   }
 
-  async options(path: string, opts: Opts = {}): Promise<Response> {
+  async options(path: string, opts: Opts = {}): Promise<MastodonResponse> {
     return this.request('OPTIONS', path, undefined, opts);
   }
 
-  async request(method: string, path: string, data: unknown, opts: Opts = {}): Promise<Response> {
+  async request(method: string, path: string, data: unknown, opts: Opts = {}): Promise<MastodonResponse> {
     const url = new URL(path, this.baseUrl);
 
     if (opts.searchParams) {
@@ -89,7 +90,7 @@ export class MastodonClient {
       throw new HTTPError(response, request);
     }
 
-    return response;
+    return new MastodonResponse(response.body, response);
   }
 
 }
\ No newline at end of file
diff --git a/src/api/MastodonResponse.ts b/src/api/MastodonResponse.ts
new file mode 100644
index 000000000..fb54008b0
--- /dev/null
+++ b/src/api/MastodonResponse.ts
@@ -0,0 +1,16 @@
+import LinkHeader from 'http-link-header';
+
+export class MastodonResponse extends Response {
+
+  /** Parses the `Link` header and returns URLs for the `prev` and `next` pages of this response, if any. */
+  pagination(): { prev?: string; next?: string } {
+    const header = this.headers.get('link');
+    const links = header ? new LinkHeader(header) : undefined;
+
+    return {
+      next: links?.refs.find((link) => link.rel === 'next')?.uri,
+      prev: links?.refs.find((link) => link.rel === 'prev')?.uri,
+    };
+  }
+
+}
diff --git a/src/api/__mocks__/index.ts b/src/api/__mocks__/index.ts
index d0664bbe6..ff5fba2c2 100644
--- a/src/api/__mocks__/index.ts
+++ b/src/api/__mocks__/index.ts
@@ -15,8 +15,6 @@ const setupMock = (axios: AxiosInstance) => {
   mocks.map(func => func(mock));
 };
 
-export const staticClient = api.staticClient;
-
 export const getLinks = (response: AxiosResponse): LinkHeader => {
   return new LinkHeader(response.headers?.link);
 };
diff --git a/src/api/index.ts b/src/api/index.ts
index 7a7e9aeaf..0898ab576 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -82,16 +82,6 @@ export const baseClient = (
   });
 };
 
-/**
-  * Dumb client for grabbing static files.
-  * It uses FE_SUBDIRECTORY and parses JSON if possible.
-  * No authorization is needed.
-  */
-export const staticClient = axios.create({
-  baseURL: BuildConfig.FE_SUBDIRECTORY,
-  transformResponse: [maybeParseJSON],
-});
-
 /**
   * Stateful API client.
   * Uses credentials from the Redux store if available.
diff --git a/src/build-config-compiletime.ts b/src/build-config-compiletime.ts
index e4ccfb943..8c74312b2 100644
--- a/src/build-config-compiletime.ts
+++ b/src/build-config-compiletime.ts
@@ -3,15 +3,12 @@
  * @module soapbox/build-config
  */
 
-// eslint-disable-next-line import/extensions
-import trim from 'lodash/trim.js';
 // eslint-disable-next-line import/extensions
 import trimEnd from 'lodash/trimEnd.js';
 
 const {
   NODE_ENV,
   BACKEND_URL,
-  FE_SUBDIRECTORY,
   FE_INSTANCE_SOURCE_DIR,
   SENTRY_DSN,
 } = process.env;
@@ -24,14 +21,9 @@ const sanitizeURL = (url: string | undefined = ''): string => {
   }
 };
 
-const sanitizeBasename = (path: string | undefined = ''): string => {
-  return `/${trim(path, '/')}`;
-};
-
 const env = {
   NODE_ENV: NODE_ENV || 'development',
   BACKEND_URL: sanitizeURL(BACKEND_URL),
-  FE_SUBDIRECTORY: sanitizeBasename(FE_SUBDIRECTORY),
   FE_INSTANCE_SOURCE_DIR: FE_INSTANCE_SOURCE_DIR || 'instance',
   SENTRY_DSN,
 };
diff --git a/src/build-config.ts b/src/build-config.ts
index d8799de7e..340a691e6 100644
--- a/src/build-config.ts
+++ b/src/build-config.ts
@@ -3,7 +3,6 @@ import type { SoapboxEnv } from './build-config-compiletime.ts';
 export const {
   NODE_ENV,
   BACKEND_URL,
-  FE_SUBDIRECTORY,
   FE_INSTANCE_SOURCE_DIR,
   SENTRY_DSN,
 } = import.meta.compileTime<SoapboxEnv>('./build-config-compiletime.ts');
diff --git a/src/components/announcements/emoji.tsx b/src/components/announcements/emoji.tsx
index 927278484..f9994ec47 100644
--- a/src/components/announcements/emoji.tsx
+++ b/src/components/announcements/emoji.tsx
@@ -1,6 +1,5 @@
 import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
 import { useSettings } from 'soapbox/hooks/useSettings.ts';
-import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import type { Map as ImmutableMap } from 'immutable';
 
@@ -25,7 +24,7 @@ const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
         className='emojione m-0 block'
         alt={emoji}
         title={title}
-        src={joinPublicPath(`packs/emoji/${filename}.svg`)}
+        src={`/packs/emoji/${filename}.svg`}
       />
     );
   } else if (emojiMap.get(emoji as any)) {
diff --git a/src/components/autosuggest-emoji.tsx b/src/components/autosuggest-emoji.tsx
index 8337456f7..fb4a4b4fc 100644
--- a/src/components/autosuggest-emoji.tsx
+++ b/src/components/autosuggest-emoji.tsx
@@ -1,6 +1,5 @@
 import { isCustomEmoji } from 'soapbox/features/emoji/index.ts';
 import unicodeMapping from 'soapbox/features/emoji/mapping.ts';
-import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
@@ -21,7 +20,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
       return null;
     }
 
-    url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`);
+    url = `/packs/emoji/${mapping.unified}.svg`;
     alt = emoji.native;
   }
 
diff --git a/src/components/sentry-feedback-form.tsx b/src/components/sentry-feedback-form.tsx
deleted file mode 100644
index ea1eb1db9..000000000
--- a/src/components/sentry-feedback-form.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import Button from 'soapbox/components/ui/button.tsx';
-import FormActions from 'soapbox/components/ui/form-actions.tsx';
-import FormGroup from 'soapbox/components/ui/form-group.tsx';
-import Form from 'soapbox/components/ui/form.tsx';
-import Text from 'soapbox/components/ui/text.tsx';
-import Textarea from 'soapbox/components/ui/textarea.tsx';
-import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
-import { captureSentryFeedback } from 'soapbox/sentry.ts';
-
-interface ISentryFeedbackForm {
-  eventId: string;
-}
-
-/** Accept feedback for the given Sentry event. */
-const SentryFeedbackForm: React.FC<ISentryFeedbackForm> = ({ eventId }) => {
-  const { account } = useOwnAccount();
-
-  const [feedback, setFeedback] = useState<string>();
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
-
-  const handleFeedbackChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    setFeedback(e.target.value);
-  };
-
-  const handleSubmitFeedback: React.FormEventHandler = async (_e) => {
-    if (!feedback || !eventId) return;
-    setIsSubmitting(true);
-
-    await captureSentryFeedback({
-      name: account?.acct,
-      associatedEventId: eventId,
-      message: feedback,
-    }).catch(console.error);
-
-    setIsSubmitted(true);
-  };
-
-  if (isSubmitted) {
-    return (
-      <Text align='center'>
-        <FormattedMessage id='alert.unexpected.thanks' defaultMessage='Thanks for your feedback!' />
-      </Text>
-    );
-  }
-
-  return (
-    <Form onSubmit={handleSubmitFeedback}>
-      <FormGroup>
-        <Textarea
-          value={feedback}
-          onChange={handleFeedbackChange}
-          placeholder='Anything you can tell us about what happened?'
-          disabled={isSubmitting}
-          autoGrow
-        />
-      </FormGroup>
-
-      <FormActions>
-        <Button type='submit' className='mx-auto' disabled={!feedback || isSubmitting}>
-          <FormattedMessage id='alert.unexpected.submit_feedback' defaultMessage='Submit Feedback' />
-        </Button>
-      </FormActions>
-    </Form>
-  );
-};
-
-export default SentryFeedbackForm;
\ No newline at end of file
diff --git a/src/components/site-error-boundary.tsx b/src/components/site-error-boundary.tsx
index 15186694b..b18dcba21 100644
--- a/src/components/site-error-boundary.tsx
+++ b/src/components/site-error-boundary.tsx
@@ -2,7 +2,6 @@ import { type ErrorInfo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FormattedMessage } from 'react-intl';
 
-import { NODE_ENV } from 'soapbox/build-config.ts';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
@@ -13,7 +12,6 @@ import KVStore from 'soapbox/storage/kv-store.ts';
 import sourceCode from 'soapbox/utils/code.ts';
 import { unregisterSW } from 'soapbox/utils/sw.ts';
 
-import SentryFeedbackForm from './sentry-feedback-form.tsx';
 import SiteLogo from './site-logo.tsx';
 
 interface ISiteErrorBoundary {
@@ -22,16 +20,13 @@ interface ISiteErrorBoundary {
 
 /** Application-level error boundary. Fills the whole screen. */
 const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
-  const { links, sentryDsn } = useSoapboxConfig();
+  const { links } = useSoapboxConfig();
   const textarea = useRef<HTMLTextAreaElement>(null);
 
   const [error, setError] = useState<unknown>();
   const [componentStack, setComponentStack] = useState<string | null | undefined>();
   const [browser, setBrowser] = useState<Bowser.Parser.Parser>();
-  const [sentryEventId, setSentryEventId] = useState<string>();
 
-  const sentryEnabled = Boolean(sentryDsn);
-  const isProduction = NODE_ENV === 'production';
   const errorText = String(error) + componentStack;
 
   const clearCookies: React.MouseEventHandler = (e) => {
@@ -64,7 +59,6 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
         ErrorBoundary: 'yes',
       },
     })
-      .then((eventId) => setSentryEventId(eventId))
       .catch(console.error);
 
     import('bowser')
@@ -127,30 +121,22 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
           </div>
 
           <div className='mx-auto max-w-lg space-y-4 py-16'>
-            {(isProduction) ? (
-              (sentryEnabled && sentryEventId) && (
-                <SentryFeedbackForm eventId={sentryEventId} />
-              )
-            ) : (
-              <>
-                {errorText && (
-                  <Textarea
-                    ref={textarea}
-                    value={errorText}
-                    onClick={handleCopy}
-                    isCodeEditor
-                    rows={12}
-                    readOnly
-                  />
-                )}
+            {errorText && (
+              <Textarea
+                ref={textarea}
+                value={errorText}
+                onClick={handleCopy}
+                isCodeEditor
+                rows={12}
+                readOnly
+              />
+            )}
 
-                {browser && (
-                  <Stack>
-                    <Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
-                    <Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
-                  </Stack>
-                )}
-              </>
+            {browser && (
+              <Stack>
+                <Text weight='semibold'><FormattedMessage id='alert.unexpected.browser' defaultMessage='Browser' /></Text>
+                <Text theme='muted'>{browser.getBrowserName()} {browser.getBrowserVersion()}</Text>
+              </Stack>
             )}
           </div>
         </div>
diff --git a/src/components/ui/emoji-selector.tsx b/src/components/ui/emoji-selector.tsx
index 77d0cea4c..ba06887bb 100644
--- a/src/components/ui/emoji-selector.tsx
+++ b/src/components/ui/emoji-selector.tsx
@@ -3,13 +3,18 @@ import dotsIcon from '@tabler/icons/outline/dots.svg';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
+import { closeModal, openModal } from 'soapbox/actions/modals.ts';
 import EmojiComponent from 'soapbox/components/ui/emoji.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import EmojiPickerDropdown, { getFrequentlyUsedEmojis } from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import emojiData from 'soapbox/features/emoji/data.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useClickOutside } from 'soapbox/hooks/useClickOutside.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
+import { userTouching } from 'soapbox/is-mobile.ts';
 
 import type { Emoji } from 'soapbox/features/emoji/index.ts';
 
@@ -64,9 +69,11 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   offsetOptions,
   all = true,
 }): JSX.Element => {
-  const soapboxConfig = useSoapboxConfig();
+  const { allowedEmoji } = useSoapboxConfig();
   const { customEmojiReacts } = useFeatures();
+  const shortcodes = useAppSelector((state) => getFrequentlyUsedEmojis(state));
 
+  const dispatch = useAppDispatch();
   const [expanded, setExpanded] = useState(false);
 
   const { x, y, strategy, refs, update } = useFloating<HTMLElement>({
@@ -75,7 +82,18 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   });
 
   const handleExpand: React.MouseEventHandler = () => {
-    setExpanded(true);
+    if (userTouching.matches) {
+      dispatch(openModal('EMOJI_PICKER', {
+        onPickEmoji: (emoji: Emoji) => {
+          handlePickEmoji(emoji);
+          dispatch(closeModal('EMOJI_PICKER'));
+        },
+      }));
+
+      onClose?.();
+    } else {
+      setExpanded(true);
+    }
   };
 
   const handlePickEmoji = (emoji: Emoji) => {
@@ -95,11 +113,19 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   }, [visible]);
 
   useClickOutside(refs, () => {
-    if (onClose) {
-      onClose();
-    }
+    onClose?.();
   });
 
+  const recentEmojis = shortcodes.reduce<string[]>((results, shortcode) => {
+    const emoji = emojiData.emojis[shortcode]?.skins[0]?.native;
+    if (emoji) {
+      results.push(emoji);
+    }
+    return results;
+  }, []);
+
+  const emojis = new Set([...recentEmojis, ...allowedEmoji]);
+
   return (
     <div
       className={clsx('z-[101] transition-opacity duration-100', {
@@ -125,7 +151,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
         <HStack
           className={clsx('z-[999] flex w-max max-w-[100vw] flex-wrap space-x-3 rounded-full bg-white px-3 py-2.5 shadow-lg focus:outline-none dark:bg-gray-900 dark:ring-2 dark:ring-primary-700')}
         >
-          {Array.from(soapboxConfig.allowedEmoji).map((emoji, i) => (
+          {[...emojis].slice(0, 6).map((emoji, i) => (
             <EmojiButton
               key={i}
               emoji={emoji}
diff --git a/src/components/ui/emoji.tsx b/src/components/ui/emoji.tsx
index ae33d6376..da3449ccb 100644
--- a/src/components/ui/emoji.tsx
+++ b/src/components/ui/emoji.tsx
@@ -1,5 +1,4 @@
 import { removeVS16s, toCodePoints } from 'soapbox/utils/emoji.ts';
-import { joinPublicPath } from 'soapbox/utils/static.ts';
 
 interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
   /** Unicode emoji character. */
@@ -23,7 +22,7 @@ const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
     <img
       draggable='false'
       alt={alt || emoji}
-      src={src || joinPublicPath(`packs/emoji/${filename}.svg`)}
+      src={src || `/packs/emoji/${filename}.svg`}
       {...rest}
     />
   );
diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
index 595787da6..a7db84f99 100644
--- a/src/components/ui/modal.tsx
+++ b/src/components/ui/modal.tsx
@@ -16,7 +16,7 @@ const messages = defineMessages({
 });
 
 const themes = {
-  normal: 'bg-white p-6 shadow-xl',
+  normal: 'bg-white black:bg-black dark:bg-primary-900 p-6 shadow-xl text-gray-900 dark:text-gray-100',
   transparent: 'bg-transparent p-0 shadow-none',
 };
 
@@ -105,7 +105,7 @@ const Modal = forwardRef<HTMLDivElement, IModal>(({
     <div
       ref={ref}
       data-testid='modal'
-      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl text-start align-middle text-gray-900 transition-all black:bg-black dark:bg-primary-900 dark:text-gray-100', widths[width], themes[theme])}
+      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl text-start align-middle transition-all', widths[width], themes[theme])}
     >
       <div className='w-full justify-between sm:flex sm:items-start'>
         <div className='w-full'>
diff --git a/src/features/emoji/components/emoji-picker-dropdown.tsx b/src/features/emoji/components/emoji-picker-dropdown.tsx
index fcc9c05c3..bdae364b3 100644
--- a/src/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/src/features/emoji/components/emoji-picker-dropdown.tsx
@@ -45,9 +45,9 @@ export interface IEmojiPickerDropdown {
   onPickEmoji?: (emoji: Emoji) => void;
   condensed?: boolean;
   withCustom?: boolean;
-  visible: boolean;
-  setVisible: (value: boolean) => void;
-  update: (() => any) | null;
+  visible?: boolean;
+  setVisible?: (value: boolean) => void;
+  update?: (() => any) | null;
 }
 
 const perLine = 8;
@@ -105,8 +105,13 @@ const getCustomEmojis = createSelector([
   }
 }));
 
+interface IRenderAfter {
+  children: React.ReactNode;
+  update: () => void;
+}
+
 // Fixes render bug where popover has a delayed position update
-const RenderAfter = ({ children, update }: any) => {
+const RenderAfter: React.FC<IRenderAfter> = ({ children, update }) => {
   const [nextTick, setNextTick] = useState(false);
 
   useEffect(() => {
@@ -125,7 +130,7 @@ const RenderAfter = ({ children, update }: any) => {
 };
 
 const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
-  onPickEmoji, visible, setVisible, update, withCustom = true,
+  onPickEmoji, visible = true, setVisible, update, withCustom = true,
 }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -136,7 +141,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
   const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
 
   const handlePick = (emoji: any) => {
-    setVisible(false);
+    setVisible?.(false);
 
     let pickedEmoji: Emoji;
 
@@ -213,28 +218,30 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
     document.body.style.overflow = '';
   }, []);
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    visible ? (
-      <RenderAfter update={update}>
-        <Suspense>
-          <EmojiPicker
-            custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
-            title={title}
-            onEmojiSelect={handlePick}
-            recent={frequentlyUsedEmojis}
-            perLine={8}
-            skin={handleSkinTone}
-            emojiSize={22}
-            emojiButtonSize={34}
-            set='twitter'
-            theme={theme}
-            i18n={getI18n()}
-            skinTonePosition='search'
-            previewPosition='none'
-          />
-        </Suspense>
+    <Suspense>
+      <RenderAfter update={update ?? (() => {})}>
+        <EmojiPicker
+          custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
+          title={title}
+          onEmojiSelect={handlePick}
+          recent={frequentlyUsedEmojis}
+          perLine={8}
+          skin={handleSkinTone}
+          emojiSize={22}
+          emojiButtonSize={34}
+          set='twitter'
+          theme={theme}
+          i18n={getI18n()}
+          skinTonePosition='search'
+          previewPosition='none'
+        />
       </RenderAfter>
-    ) : null
+    </Suspense>
   );
 };
 
diff --git a/src/features/emoji/components/emoji-picker.tsx b/src/features/emoji/components/emoji-picker.tsx
index 74cdc5d0f..a6dc860ff 100644
--- a/src/features/emoji/components/emoji-picker.tsx
+++ b/src/features/emoji/components/emoji-picker.tsx
@@ -2,14 +2,12 @@ import spriteSheet from 'emoji-datasource/img/twitter/sheets/32.png';
 import { Picker as EmojiPicker } from 'emoji-mart';
 import { useRef, useEffect } from 'react';
 
-import { joinPublicPath } from 'soapbox/utils/static.ts';
-
 import data from '../data.ts';
 
 const getSpritesheetURL = () => spriteSheet;
 
-const getImageURL = (set: string, name: string) => {
-  return joinPublicPath(`/packs/emoji/${name}.svg`);
+const getImageURL = (_set: string, name: string) => {
+  return `/packs/emoji/${name}.svg`;
 };
 
 const Picker: React.FC<any> = (props) => {
@@ -21,7 +19,7 @@ const Picker: React.FC<any> = (props) => {
     new EmojiPicker(input);
   }, []);
 
-  return <div ref={ref} />;
+  return <div className='flex justify-center' ref={ref} />;
 };
 
 export default Picker;
diff --git a/src/features/ui/components/action-button.tsx b/src/features/ui/components/action-button.tsx
index 8a2f6144c..c0c3e8650 100644
--- a/src/features/ui/components/action-button.tsx
+++ b/src/features/ui/components/action-button.tsx
@@ -226,10 +226,10 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
 
       let icon: string | undefined;
 
-      if (isFollowing) {
-        icon = plusIcon;
-      } else if (blockedBy) {
+      if (blockedBy) {
         icon = banIcon;
+      } else if (!isFollowing) {
+        icon = plusIcon;
       }
 
       return (
diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index 0d8c71bd8..084517ea8 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/src/features/ui/components/modal-root.tsx
@@ -18,6 +18,7 @@ import {
   EditDomainModal,
   EditFederationModal,
   EmbedModal,
+  EmojiPickerModal,
   EventMapModal,
   EventParticipantsModal,
   FamiliarFollowersModal,
@@ -72,6 +73,7 @@ const MODAL_COMPONENTS: Record<string, React.ExoticComponent<any>> = {
   'EDIT_FEDERATION': EditFederationModal,
   'EDIT_RULE': EditRuleModal,
   'EMBED': EmbedModal,
+  'EMOJI_PICKER': EmojiPickerModal,
   'EVENT_MAP': EventMapModal,
   'EVENT_PARTICIPANTS': EventParticipantsModal,
   'FAMILIAR_FOLLOWERS': FamiliarFollowersModal,
diff --git a/src/features/ui/components/modals/emoji-picker-modal.tsx b/src/features/ui/components/modals/emoji-picker-modal.tsx
new file mode 100644
index 000000000..e3cd91ccc
--- /dev/null
+++ b/src/features/ui/components/modals/emoji-picker-modal.tsx
@@ -0,0 +1,17 @@
+import Modal from 'soapbox/components/ui/modal.tsx';
+import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown.tsx';
+import { Emoji } from 'soapbox/features/emoji/index.ts';
+
+interface IEmojiPickerModal {
+  onPickEmoji?: (emoji: Emoji) => void;
+}
+
+export const EmojiPickerModal: React.FC<IEmojiPickerModal> = (props) => {
+  return (
+    <Modal className='flex' theme='transparent'>
+      <EmojiPickerDropdown {...props} />
+    </Modal>
+  );
+};
+
+export default EmojiPickerModal;
\ No newline at end of file
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index 546e931ee..7b2a62ab5 100644
--- a/src/features/ui/util/async-components.ts
+++ b/src/features/ui/util/async-components.ts
@@ -2,6 +2,7 @@ import { lazy } from 'react';
 
 export const AboutPage = lazy(() => import('soapbox/features/about/index.tsx'));
 export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/emoji-picker.tsx'));
+export const EmojiPickerModal = lazy(() => import('soapbox/features/ui/components/modals/emoji-picker-modal.tsx'));
 export const Notifications = lazy(() => import('soapbox/features/notifications/index.tsx'));
 export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline/index.tsx'));
 export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline/index.tsx'));
diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx
index bf61583c3..eafccacae 100644
--- a/src/init/soapbox-mount.tsx
+++ b/src/init/soapbox-mount.tsx
@@ -4,7 +4,6 @@ import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 
 import { openModal } from 'soapbox/actions/modals.ts';
-import * as BuildConfig from 'soapbox/build-config.ts';
 import LoadingScreen from 'soapbox/components/loading-screen.tsx';
 import { ScrollContext } from 'soapbox/components/scroll-context.tsx';
 import SiteErrorBoundary from 'soapbox/components/site-error-boundary.tsx';
@@ -48,7 +47,7 @@ const SoapboxMount = () => {
 
   return (
     <SiteErrorBoundary>
-      <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
+      <BrowserRouter>
         <CompatRouter>
           <ScrollContext>
             <Switch>
diff --git a/src/locales/en.json b/src/locales/en.json
index 653fd7dca..d7d7b179d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -202,8 +202,6 @@
   "alert.unexpected.links.support": "Support",
   "alert.unexpected.message": "Something went wrong.",
   "alert.unexpected.return_home": "Return Home",
-  "alert.unexpected.submit_feedback": "Submit Feedback",
-  "alert.unexpected.thanks": "Thanks for your feedback!",
   "aliases.account.add": "Create alias",
   "aliases.account_label": "Old account:",
   "aliases.aliases_list_delete": "Unlink alias",
diff --git a/src/queries/chats.ts b/src/queries/chats.ts
index a80c6f757..f353da79e 100644
--- a/src/queries/chats.ts
+++ b/src/queries/chats.ts
@@ -13,7 +13,6 @@ import { normalizeChatMessage } from 'soapbox/normalizers/index.ts';
 import toast from 'soapbox/toast.tsx';
 import { ChatMessage } from 'soapbox/types/entities.ts';
 import { reOrderChatListItems, updateChatMessage } from 'soapbox/utils/chats.ts';
-import { getPagination } from 'soapbox/utils/pagination.ts';
 import { flattenPages, PaginatedResult, updatePageItem } from 'soapbox/utils/queries.ts';
 
 import { queryClient } from './client.ts';
@@ -91,7 +90,7 @@ const useChatMessages = (chat: IChat) => {
     const response = await api.get(uri);
     const data = await response.json();
 
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
     const result = data.map(normalizeChatMessage);
 
@@ -144,7 +143,7 @@ const useChats = (search?: string) => {
     });
     const data: IChat[] = await response.json();
 
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
 
     setUnreadChatsCount(Number(response.headers.get('x-unread-messages-count')) || sumBy(data, (chat) => chat.unread));
diff --git a/src/queries/search.ts b/src/queries/search.ts
index c23d84baa..38df39f0c 100644
--- a/src/queries/search.ts
+++ b/src/queries/search.ts
@@ -2,7 +2,6 @@ import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
 
 import { useApi } from 'soapbox/hooks/useApi.ts';
 import { Account } from 'soapbox/types/entities.ts';
-import { getPagination } from 'soapbox/utils/pagination.ts';
 import { flattenPages, PaginatedResult } from 'soapbox/utils/queries.ts';
 
 export default function useAccountSearch(q: string) {
@@ -21,7 +20,7 @@ export default function useAccountSearch(q: string) {
     });
     const data = await response.json();
 
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
 
     return {
diff --git a/src/queries/suggestions.ts b/src/queries/suggestions.ts
index 71076a86a..9268fe120 100644
--- a/src/queries/suggestions.ts
+++ b/src/queries/suggestions.ts
@@ -4,7 +4,6 @@ import { fetchRelationships } from 'soapbox/actions/accounts.ts';
 import { importFetchedAccounts } from 'soapbox/actions/importer/index.ts';
 import { useApi } from 'soapbox/hooks/useApi.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
-import { getPagination } from 'soapbox/utils/pagination.ts';
 
 import { PaginatedResult, removePageItem } from '../utils/queries.ts';
 
@@ -34,7 +33,7 @@ const useSuggestions = () => {
   const getV2Suggestions = async (pageParam: PageParam): Promise<PaginatedResult<Result>> => {
     const endpoint = pageParam?.link || '/api/v2/suggestions';
     const response = await api.get(endpoint);
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
 
     const data: Suggestion[] = await response.json();
@@ -93,7 +92,7 @@ function useOnboardingSuggestions() {
   const getV2Suggestions = async (pageParam: any): Promise<{ data: Suggestion[]; link: string | undefined; hasMore: boolean }> => {
     const link = pageParam?.link || '/api/v2/suggestions';
     const response = await api.get(link);
-    const { next } = getPagination(response);
+    const { next } = response.pagination();
     const hasMore = !!next;
 
     const data: Suggestion[] = await response.json();
diff --git a/src/styles/application.scss b/src/styles/application.scss
index 329a4cdd9..d8c066c4a 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -8,4 +8,4 @@
 @use 'components/compose-form';
 @use 'components/status';
 @use 'components/search';
-@use 'components/icon';
\ No newline at end of file
+@use 'components/icon';
diff --git a/src/utils/pagination.ts b/src/utils/pagination.ts
deleted file mode 100644
index bf23f958f..000000000
--- a/src/utils/pagination.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import LinkHeader from 'http-link-header';
-
-interface Pagination {
-  next?: string;
-  prev?: string;
-}
-
-export function getPagination(response: Response): Pagination {
-  const header = response.headers.get('link');
-  const links = header ? new LinkHeader(header) : undefined;
-
-  return {
-    next: links?.refs.find((link) => link.rel === 'next')?.uri,
-    prev: links?.refs.find((link) => link.rel === 'prev')?.uri,
-  };
-}
diff --git a/src/utils/static.ts b/src/utils/static.ts
deleted file mode 100644
index 266d975a1..000000000
--- a/src/utils/static.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Static: functions related to static files.
- * @module soapbox/utils/static
- */
-
-import { join } from 'path-browserify';
-
-import * as BuildConfig from 'soapbox/build-config.ts';
-
-/** Gets the path to a file with build configuration being considered. */
-export const joinPublicPath = (...paths: string[]): string => {
-  return join(BuildConfig.FE_SUBDIRECTORY, ...paths);
-};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index dfcd0472e..50c0d9e3d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,7 +6,7 @@ import plugin from 'tailwindcss/plugin';
 
 import { parseColorMatrix } from './tailwind/colors.ts';
 
-const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
+const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black.black &'));
 
 const config: Config = {
   content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],

From 834f8305df6dd547195909b860efa7c730c8175b Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 14 Nov 2024 17:27:10 -0300
Subject: [PATCH 130/133] Adjust chat-message mb

---
 src/features/chats/components/chat-message-list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/chats/components/chat-message-list.tsx b/src/features/chats/components/chat-message-list.tsx
index f24c21912..04cd0c3e3 100644
--- a/src/features/chats/components/chat-message-list.tsx
+++ b/src/features/chats/components/chat-message-list.tsx
@@ -49,7 +49,7 @@ const START_INDEX = 10000;
 
 const List: Components['List'] = forwardRef((props, ref) => {
   const { context, ...rest } = props;
-  return <div ref={ref} {...rest} className='mb-2' />;
+  return <div ref={ref} {...rest} />;
 });
 
 const Scroller: Components['Scroller'] = forwardRef((props, ref) => {

From ee0ed0946849d7d9dbc116f620a6d382404498f8 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 14 Nov 2024 17:27:54 -0300
Subject: [PATCH 131/133] Remove "application.scss"

---
 src/styles/application.scss       |  1 -
 src/styles/components/search.scss | 44 -------------------------------
 2 files changed, 45 deletions(-)
 delete mode 100644 src/styles/components/search.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index d8c066c4a..12a33c00c 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -7,5 +7,4 @@
 // COMPONENTS
 @use 'components/compose-form';
 @use 'components/status';
-@use 'components/search';
 @use 'components/icon';
diff --git a/src/styles/components/search.scss b/src/styles/components/search.scss
deleted file mode 100644
index 64e6bcfd6..000000000
--- a/src/styles/components/search.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.search {
-  position: relative;
-}
-
-.search__icon {
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus {
-    outline: 0 !important;
-  }
-
-  .svg-icon {
-    @apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
-    font-size: 16px;
-    cursor: default;
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 2;
-    width: 18px;
-    height: 18px;
-    opacity: 0;
-    pointer-events: none;
-
-    &.active {
-      pointer-events: auto;
-      opacity: 1;
-    }
-  }
-
-  .svg-icon--search.active {
-    pointer-events: none;
-  }
-
-  .svg-icon--backspace {
-    cursor: pointer;
-    width: 22px;
-    height: 22px;
-  }
-}

From a339cb8f8b1112976b80f9d6c19ebf7a9b56699d Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 14 Nov 2024 17:32:09 -0300
Subject: [PATCH 132/133] Move table config for "rtl" into "tailwind.css" and
 remove "rtl.scss"

---
 src/styles/application.scss |  1 -
 src/styles/rtl.scss         | 13 -------------
 src/styles/tailwind.css     |  5 +++++
 3 files changed, 5 insertions(+), 14 deletions(-)
 delete mode 100644 src/styles/rtl.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index 12a33c00c..64108d619 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -1,7 +1,6 @@
 @use 'loading';
 @use 'ui';
 @use 'emoji-picker';
-@use 'rtl';
 @use 'accessibility';
 
 // COMPONENTS
diff --git a/src/styles/rtl.scss b/src/styles/rtl.scss
deleted file mode 100644
index 09de6297d..000000000
--- a/src/styles/rtl.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-body.rtl {
-  direction: rtl;
-
-  .status {
-    padding-left: 10px;
-    padding-right: 68px;
-  }
-
-  .table th,
-  .table td {
-    text-align: right;
-  }
-}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 17ee83a8e..4dedec85e 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -16,6 +16,11 @@
       padding-left: 10px;
       padding-right: 68px;
     }
+
+    .table th,
+    .table td {
+      text-align: right;
+    }
   }
 
   ::selection {

From edd93fc6b01fd3130c1de38d362d097584cdab99 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 14 Nov 2024 21:28:02 -0300
Subject: [PATCH 133/133] Add 'eslint-disable' comment into
 fork-awesome-icon.tsx

---
 src/components/fork-awesome-icon.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/fork-awesome-icon.tsx b/src/components/fork-awesome-icon.tsx
index e07cf165b..2f3e46b3c 100644
--- a/src/components/fork-awesome-icon.tsx
+++ b/src/components/fork-awesome-icon.tsx
@@ -5,8 +5,7 @@
  * @see soapbox/components/icon
  */
 
-
-import React from 'react';
+import clsx from 'clsx';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
   id: string;
@@ -25,7 +24,7 @@ const ForkAwesomeIcon: React.FC<IForkAwesomeIcon> = ({ id, className, fixedWidth
     <i
       role='img'
       // alt={alt}
-      // className={clsx('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
+      className={clsx('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} // eslint-disable-line tailwindcss/no-custom-classname
       {...rest}
     />
   );