Merge remote-tracking branch 'soapbox/develop' into events-

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

.dockerignore

@@ -0,0 +1,34 @@
+.git
+
+/node_modules/
+/tmp/
+/build/
+/coverage/
+/.coverage/
+/.eslintcache
+/.env
+/deploy.sh
+/.vs/
+yarn-error.log*
+/junit.xml
+
+/static/
+/static-test/
+/public/
+/dist/
+
+.idea
+.DS_Store
+
+# Custom build files
+/custom/**/*
+!/custom/*
+/custom/*.*
+!/custom/.gitkeep
+!/custom/**/.gitkeep
+
+# surge.sh
+/CNAME
+/AUTH
+/CORS
+/ROUTER

.gitlab-ci.yml

@@ -142,3 +142,17 @@ pages:
   only:
     refs:
       - develop
+
+docker:
+  stage: deploy
+  image: docker:20.10.17
+  services:
+    - docker:20.10.17-dind
+  # https://medium.com/devops-with-valentine/how-to-build-a-docker-image-and-push-it-to-the-gitlab-container-registry-from-a-gitlab-ci-pipeline-acac0d1f26df
+  script:
+    - echo $CI_REGISTRY_PASSWORD | docker login -u $CI_REGISTRY_USER $CI_REGISTRY --password-stdin
+    - docker build -t $CI_REGISTRY_IMAGE .
+    - docker push $CI_REGISTRY_IMAGE
+  only:
+    refs:
+      - develop

.vscode/extensions.json

@@ -1,6 +1,5 @@
 {
     "recommendations": [
-        "editorconfig.editorconfig",
         "dbaeumer.vscode-eslint",
         "bradlc.vscode-tailwindcss",
         "stylelint.vscode-stylelint",

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "files.associations": {
+    "*.conf.template": "properties"
+  },
+  "files.eol": "\n",
+  "files.insertFinalNewline": false
+}

.vscode/soapbox.code-snippets

@@ -1,5 +1,5 @@
 {
-  // Place your soapbox-fe workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+  // Place your Soapbox workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
   // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
   // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
   // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 

CHANGELOG.md

@@ -211,7 +211,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Initial beta release.
 
-[Unreleased]: https://gitlab.com/soapbox-pub/soapbox-fe/-/compare/v1.0.0...develop
-[Unreleased patch]: https://gitlab.com/soapbox-pub/soapbox-fe/-/compare/v1.0.0...stable/1.0.x
-[1.0.0]: https://gitlab.com/soapbox-pub/soapbox-fe/-/compare/v0.9.0...v1.0.0
-[0.9.0]: https://gitlab.com/soapbox-pub/soapbox-fe/-/tags/v0.9.0
+[Unreleased]: https://gitlab.com/soapbox-pub/soapbox/-/compare/v1.0.0...develop
+[Unreleased patch]: https://gitlab.com/soapbox-pub/soapbox/-/compare/v1.0.0...stable/1.0.x
+[1.0.0]: https://gitlab.com/soapbox-pub/soapbox/-/compare/v0.9.0...v1.0.0
+[0.9.0]: https://gitlab.com/soapbox-pub/soapbox/-/tags/v0.9.0

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:18 as build
+WORKDIR /app
+COPY package.json .
+COPY yarn.lock .
+RUN yarn
+COPY . .
+ARG NODE_ENV=production
+RUN yarn build
+
+FROM nginx:stable-alpine
+EXPOSE 5000
+ENV PORT=5000
+ENV FALLBACK_PORT=4444
+ENV BACKEND_URL=http://localhost:4444
+ENV CSP=
+COPY installation/docker.conf.template /etc/nginx/templates/default.conf.template
+COPY --from=build /app/static /usr/share/nginx/html

README.md

@@ -14,13 +14,13 @@ Installing Soapbox on an existing Pleroma server is extremely easy.
 Just ssh into the server and download a .zip of the latest build:
 
 ```sh
-curl -L https://gitlab.com/soapbox-pub/soapbox-fe/-/jobs/artifacts/develop/download?job=build-production -o soapbox-fe.zip
+curl -L https://gitlab.com/soapbox-pub/soapbox/-/jobs/artifacts/develop/download?job=build-production -o soapbox.zip
 ```
 
 Then unpack it into Pleroma's `instance` directory:
 
 ```sh
-busybox unzip soapbox-fe.zip -o -d /opt/pleroma/instance
+busybox unzip soapbox.zip -o -d /opt/pleroma/instance
 ```
 
 **That's it!** :tada:
@@ -54,7 +54,7 @@ location / {
 }
 ```
 
-(See [`mastodon.conf`](https://gitlab.com/soapbox-pub/soapbox-fe/-/blob/develop/installation/mastodon.conf) for a full example.)
+(See [`mastodon.conf`](https://gitlab.com/soapbox-pub/soapbox/-/blob/develop/installation/mastodon.conf) for a full example.)
 
 Soapbox incorporates much of the [Mastodon API](https://docs.joinmastodon.org/methods/), [Pleroma API](https://api.pleroma.social/), and more.
 It detects features supported by the backend to provide the right experience for the backend.
@@ -64,8 +64,8 @@ It detects features supported by the backend to provide the right experience for
 To get it running, just clone the repo:
 
 ```sh
-git clone https://gitlab.com/soapbox-pub/soapbox-fe.git
-cd soapbox-fe
+git clone https://gitlab.com/soapbox-pub/soapbox.git
+cd soapbox
 ```
 
 Ensure that Node.js and Yarn are installed, then install dependencies:
@@ -101,7 +101,7 @@ Try again.
 
 ### Troubleshooting: it's not working!
 
-Run `node -V` and compare your Node.js version with the version in [`.tool-versions`](https://gitlab.com/soapbox-pub/soapbox-fe/-/blob/develop/.tool-versions).
+Run `node -V` and compare your Node.js version with the version in [`.tool-versions`](https://gitlab.com/soapbox-pub/soapbox/-/blob/develop/.tool-versions).
 If they don't match, try installing [asdf](https://asdf-vm.com/).
 
 ## Local Dev Configuration

app.json

@@ -0,0 +1,7 @@
+{
+  "name": "Soapbox",
+  "description": "Software for the next generation of social media.",
+  "keywords": ["fediverse"],
+  "website": "https://soapbox.pub",
+  "stack": "container"
+}

app/instance/about.example/index.html

@@ -23,6 +23,5 @@
 </ol>
 
 <h1 id="opensource">Open Source Software</h1>
-<p>Soapbox is free and open source (FOSS) software that runs atop a Pleroma server</p>
-<p>The Soapbox repository can be found at <a href="https://gitlab.com/soapbox-pub/soapbox-fe">Soapbox-fe</a></p>
-<p>The Pleroma server repository can be found at <a href="https://git.pleroma.social/pleroma/pleroma">Pleroma-be</a></p>
+<p>Soapbox is free and open source (FOSS) software.</p>
+<p>The Soapbox repository can be found at <a href="https://gitlab.com/soapbox-pub/soapbox">Soapbox</a></p>

app/soapbox/actions/importer/index.ts

@@ -106,10 +106,10 @@ export function importFetchedStatus(status: APIEntity, idempotencyKey?: string)
 const isBroken = (status: APIEntity) => {
   try {
     // Skip empty accounts
-    // https://gitlab.com/soapbox-pub/soapbox-fe/-/issues/424
+    // https://gitlab.com/soapbox-pub/soapbox/-/issues/424
     if (!status.account.id) return true;
     // Skip broken reposts
-    // https://gitlab.com/soapbox-pub/soapbox/-/issues/28
+    // https://gitlab.com/soapbox-pub/rebased/-/issues/28
     if (status.reblog && !status.reblog.account.id) return true;
     return false;
   } catch (e) {

app/soapbox/actions/statuses.ts

@@ -101,7 +101,7 @@ const editStatus = (id: string) => (dispatch: AppDispatch, getState: () => RootS
 
   api(getState).get(`/api/v1/statuses/${id}/source`).then(response => {
     dispatch({ type: STATUS_FETCH_SOURCE_SUCCESS });
-    dispatch(setComposeToStatus(status, response.data.text, response.data.spoiler_text, false));
+    dispatch(setComposeToStatus(status, response.data.text, response.data.spoiler_text, response.data.content_type, false));
     dispatch(openModal('COMPOSE'));
   }).catch(error => {
     dispatch({ type: STATUS_FETCH_SOURCE_FAIL, error });

app/soapbox/components/account.tsx

@@ -8,7 +8,7 @@ import { useAppSelector, useOnScreen } from 'soapbox/hooks';
 import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
-import RelativeTimestamp from './relative_timestamp';
+import RelativeTimestamp from './relative-timestamp';
 import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
@@ -54,7 +54,7 @@ interface IAccount {
   id?: string,
   onActionClick?: (account: any) => void,
   showProfileHoverCard?: boolean,
-  timestamp?: string | Date,
+  timestamp?: string,
   timestampUrl?: string,
   futureTimestamp?: boolean,
   withAccountNote?: boolean,

app/soapbox/components/account_search.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 

app/soapbox/components/announcements/announcements-panel.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';

app/soapbox/components/announcements/reaction.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import AnimatedNumber from 'soapbox/components/animated-number';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 

app/soapbox/components/autosuggest_input.tsx

@@ -1,5 +1,5 @@
 import Portal from '@reach/portal';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/soapbox/components/autosuggest_textarea.tsx

@@ -1,5 +1,5 @@
 import Portal from '@reach/portal';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Textarea from 'react-textarea-autosize';

app/soapbox/components/avatar.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import StillImage from 'soapbox/components/still_image';

app/soapbox/components/badge.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IBadge {

app/soapbox/components/display-name.tsx

@@ -6,7 +6,7 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 import { getAcct } from '../utils/accounts';
 
 import Icon from './icon';
-import RelativeTimestamp from './relative_timestamp';
+import RelativeTimestamp from './relative-timestamp';
 import VerificationBadge from './verification_badge';
 
 import type { Account } from 'soapbox/types/entities';

app/soapbox/components/dropdown_menu.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React from 'react';
 import { spring } from 'react-motion';

app/soapbox/components/emoji-button-wrapper.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useEffect, useRef } from 'react';
 import { usePopper } from 'react-popper';
 import { useDispatch } from 'react-redux';

app/soapbox/components/emoji_selector.tsx

@@ -1,4 +1,4 @@
-// import classNames from 'classnames';
+// import classNames from 'clsx';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/soapbox/components/fork_awesome_icon.tsx

@@ -5,7 +5,7 @@
  * @see soapbox/components/icon
  */
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {

app/soapbox/components/gdpr-banner.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';

app/soapbox/components/hover_ref_wrapper.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 

app/soapbox/components/list.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 

app/soapbox/components/location-search.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
 import React, { useCallback, useEffect, useRef, useState } from 'react';

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

@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { fetchPoll, vote } from 'soapbox/actions/polls';
 import { useAppDispatch } from 'soapbox/hooks';
 
-import RelativeTimestamp from '../relative_timestamp';
+import RelativeTimestamp from '../relative-timestamp';
 import { Button, HStack, Stack, Text, Tooltip } from '../ui';
 
 import type { Selected } from './poll';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';

app/soapbox/components/polls/poll.tsx

@@ -18,7 +18,7 @@ interface IPoll {
 }
 
 const messages = defineMessages({
-  multiple: { id: 'poll.chooseMultiple', defaultMessage: 'Choose as many as you\'d like.' },
+  multiple: { id: 'poll.choose_multiple', defaultMessage: 'Choose as many as you\'d like.' },
 });
 
 const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { usePopper } from 'react-popper';

app/soapbox/components/progress_circle.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IProgressCircle {

app/soapbox/components/quoted-status.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
 import { useHistory } from 'react-router-dom';

app/soapbox/components/radio_button.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IRadioButton {

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 

app/soapbox/components/sidebar_menu.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';

app/soapbox/components/site-logo.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { Text, Icon, Emoji } from 'soapbox/components/ui';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState, useCallback } from 'react';
 import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';

app/soapbox/components/status.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';

app/soapbox/components/status_content.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';

app/soapbox/components/status_list.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';

app/soapbox/components/still_image.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useRef } from 'react';
 
 import { useSettings } from 'soapbox/hooks';

app/soapbox/components/svg_icon.tsx

@@ -4,7 +4,7 @@
  * @see soapbox/components/icon
  */
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 

app/soapbox/components/thumb_navigation-link.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 
 import StillImage from 'soapbox/components/still_image';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IBanner {

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 

app/soapbox/components/ui/button/useButtonStyles.ts

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 type ButtonThemes = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'transparent' | 'outline'
 type ButtonSizes = 'sm' | 'md' | 'lg'

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { Emoji, HStack } from 'soapbox/components/ui';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { forwardRef } from 'react';
 
 const justifyContentOptions = {

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import SvgIcon from '../icon/svg-icon';

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import StickyBox from 'react-sticky-box';
 

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 

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

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10

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

@@ -5,7 +5,7 @@ import {
   Tab as ReachTab,
   useTabsContext,
 } from '@reach/tabs';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 

app/soapbox/components/ui/text/text.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 type Themes = 'default' | 'danger' | 'primary' | 'muted' | 'subtle' | 'success' | 'inherit' | 'white'
@@ -84,7 +84,9 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
   /** Whether to truncate the text if its container is too small. */
   truncate?: boolean,
   /** Font weight of the text. */
-  weight?: Weights
+  weight?: Weights,
+  /** Tooltip title. */
+  title?: string,
 }
 
 /** UI-friendly text container with dark mode support. */
@@ -133,4 +135,7 @@ const Text: React.FC<IText> = React.forwardRef(
   },
 );
 
-export default Text;
+export {
+  Text as default,
+  IText,
+};

app/soapbox/components/ui/textarea/textarea.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly'> {

app/soapbox/components/validation-checkmark.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';

app/soapbox/components/verification_badge.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 

app/soapbox/containers/soapbox.tsx

@@ -1,7 +1,7 @@
 'use strict';
 
 import { QueryClientProvider } from '@tanstack/react-query';
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';

app/soapbox/features/account_gallery/components/media_item.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';

app/soapbox/features/aliases/components/search.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';

app/soapbox/features/backups/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import {
   Map as ImmutableMap,
   List as ImmutableList,

app/soapbox/features/compose/components/compose_form_button.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { IconButton } from 'soapbox/components/ui';

app/soapbox/features/compose/components/privacy_dropdown.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useState, useRef, useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';

app/soapbox/features/compose/components/schedule_form.tsx

@@ -1,6 +1,6 @@
 'use strict';
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 

app/soapbox/features/compose/components/search.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback } from 'react';

app/soapbox/features/compose/components/search_results.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 

app/soapbox/features/compose/components/text_character_counter.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { length } from 'stringz';
 

app/soapbox/features/compose/components/upload.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';

app/soapbox/features/compose/components/upload_form.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';

app/soapbox/features/directory/components/account_card.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -6,7 +6,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display-name';
 import Permalink from 'soapbox/components/permalink';
-import RelativeTimestamp from 'soapbox/components/relative_timestamp';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp';
 import { Text } from 'soapbox/components/ui';
 import ActionButton from 'soapbox/features/ui/components/action-button';
 import { useAppSelector } from 'soapbox/hooks';

app/soapbox/features/directory/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';

app/soapbox/features/federation_restrictions/components/restricted_instance.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import Icon from 'soapbox/components/icon';

app/soapbox/features/feed-filtering/feed-carousel.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 

app/soapbox/features/forms/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 

app/soapbox/features/list_editor/components/search.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';