Merge branch 'main' into implement-explorer

src/components/profile-hover-card.tsx

@@ -140,7 +140,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
                 <Avatar src={account.avatar} size={80} className='size-20 overflow-hidden bg-gray-50 ring-2 ring-white' />
               </Link>
 
-              <div className='mt-2'>
+              <div className='relative z-50 mt-2'>
                 <ActionButton account={account} small />
               </div>
             </HStack>

src/components/upload.tsx

@@ -251,8 +251,8 @@ const Upload: React.FC<IUpload> = ({
 
             <div className='absolute inset-0 z-[-1] size-full'>
               {mediaType === 'video' && (
-                <video className='size-full object-cover' autoPlay playsInline muted loop>
+                <video className='size-full object-cover' poster={media.preview_url} autoPlay playsInline muted loop>
-                  <source src={media.preview_url} />
+                  <source src={media.url} />
                 </video>
               )}
               {uploadIcon}

src/features/edit-identity/index.tsx

@@ -5,6 +5,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me.ts';
 import { changeSetting } from 'soapbox/actions/settings.ts';
+import { HTTPError } from 'soapbox/api/HTTPError.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';
@@ -90,6 +91,11 @@ const EditIdentity: React.FC<IEditIdentity> = () => {
         setReason('');
         setSubmitted(true);
       },
+      onError(error) {
+        if (error instanceof HTTPError) {
+          toast.showAlertForError(error);
+        }
+      },
     });
   };
 
@@ -185,6 +191,10 @@ export const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (prop
   return (
     <Input
       placeholder={intl.formatMessage(messages.username)}
+      autoComplete='off'
+      autoCorrect='off'
+      autoCapitalize='off'
+      pattern='^[\w.]+$'
       append={(
         <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
           <Icon className='size-4' src={atIcon} />

src/features/soapbox-config/index.tsx

@@ -128,7 +128,8 @@ const SoapboxConfig: React.FC = () => {
       if (file) {
         data.append('file', file);
 
-        dispatch(uploadMedia(data)).then(({ data }: any) => {
+        dispatch(uploadMedia(data)).then(async (response) => {
+          const data = await response.json();
           handleChange(path, () => data.url)(e);
         }).catch(console.error);
       }

src/features/ui/components/modals/account-moderation-modal/account-moderation-modal.tsx

@@ -4,6 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { revokeName, setBadges as saveBadges } from 'soapbox/actions/admin.ts';
 import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation.tsx';
+import { HTTPError } from 'soapbox/api/HTTPError.ts';
 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';
@@ -100,7 +101,11 @@ const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, ac
   const handleRevokeName = () => {
     dispatch(revokeName(account.id))
       .then(() => toast.success(intl.formatMessage(messages.revokedName)))
-      .catch(() => {});
+      .catch((error) => {
+        if (error instanceof HTTPError) {
+          toast.showAlertForError(error);
+        }
+      });
   };
 
   const handleDelete = () => {

src/features/ui/components/modals/streak-modal.tsx

@@ -34,13 +34,13 @@ const StreakModal: React.FC<IStreakModal> = ({ onClose }) => {
     <Modal
       title={
         <HStack alignItems='center' justifyContent='center' space={1} className='my-6 -mr-8'>
-          <Text weight='bold' size='2xl' className='text-black'>
+          <Text weight='bold' size='xl' className='text-black'>
-            <FormattedMessage id='streak_modal.title' defaultMessage="You've unlocked a" />
+            <FormattedMessage id='streak_modal.title' defaultMessage='You unlocked a' />
           </Text>
           <Text theme='primary'>
             <Icon src={flameIcon} className='size-6' />
           </Text>
-          <Text weight='bold' size='2xl' className='text-black'>
+          <Text weight='bold' size='xl' className='text-black'>
             <FormattedMessage id='streak_modal.sub' defaultMessage='streak!' />
           </Text>
         </HStack>

src/features/video/index.tsx

@@ -133,6 +133,7 @@ const Video: React.FC<IVideo> = ({
   aspectRatio = 16 / 9,
   link,
   blurhash,
+  preview,
 }) => {
   const intl = useIntl();
   const isMobile = useIsMobile();
@@ -571,6 +572,7 @@ const Video: React.FC<IVideo> = ({
         onProgress={handleProgress}
         onVolumeChange={handleVolumeChange}
         muted={muted}
+        poster={preview}
       />
 
       <div

src/locales/en.json

@@ -1626,7 +1626,7 @@
   "streak_modal.message": "Post every day to keep it going.",
   "streak_modal.streak_count": "1",
   "streak_modal.sub": "streak!",
-  "streak_modal.title": "You've unlocked a",
+  "streak_modal.title": "You unlocked a",
   "streamfield.add": "Add",
   "streamfield.remove": "Remove",
   "suggestions.dismiss": "Dismiss suggestion",