Merge remote-tracking branch 'mkljczk/develop' into develop

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -126,7 +126,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
         onClick={handleClick}
         onAuxClick={handleAuxClick}
         onKeyPress={handleItemKeyPress}
-        target={item.target}
+        target={typeof item.target === 'string' ? item.target : '_blank'}
         title={item.text}
         className={
           clsx('mx-2 my-1 flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {

packages/pl-fe/src/components/modal-root.tsx

@@ -217,7 +217,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type, mo
 
           <div
             role='dialog'
-            className='⁂-modal-root__modal'
+            className='⁂-modal-root__container'
           >
             {children}
           </div>

packages/pl-fe/src/components/quoted-status.tsx

@@ -3,16 +3,13 @@ import clsx from 'clsx';
 import React, { MouseEventHandler } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import StatusMedia from '@/components/status-media';
 import Stack from '@/components/ui/stack';
 import AccountContainer from '@/containers/account-container';
 
 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 type { SelectedStatus } from '@/selectors';
 
@@ -108,16 +105,9 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
                 status={status}
                 collapsable
                 isQuote
+                withMedia
+                compose={compose}
               />
-
-              {status.quote_id && <QuotedStatusIndicator statusId={status.quote_id} statusUrl={status.quote_url} />}
-
-              {status.media_attachments.length > 0 && (
-                <div className='relative'>
-                  <SensitiveContentOverlay status={status} />
-                  <StatusMedia status={status} muted={compose} />
-                </div>
-              )}
             </Stack>
           </Stack>
         )}

packages/pl-fe/src/components/status-content.tsx

@@ -23,6 +23,7 @@ import OutlineBox from './outline-box';
 import { parseContent } from './parsed-content';
 import { ParsedMfm } from './parsed-mfm';
 import Poll from './polls/poll';
+import QuotedStatusIndicator from './quoted-status-indicator';
 import StatusMedia from './status-media';
 import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
 import TranslateButton from './translate-button';
@@ -72,6 +73,7 @@ interface IStatusContent {
   isQuote?: boolean;
   preview?: boolean;
   withMedia?: boolean;
+  compose?: boolean;
 }
 
 /** Renders the text content of a status */
@@ -84,6 +86,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
   isQuote = false,
   preview,
   withMedia,
+  compose = false,
 }) => {
   const { urlPrivacy, displaySpoilers, renderMfm } = useSettings();
   const { greentext } = useFrontendConfig();
@@ -234,7 +237,11 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
     let quote;
 
     if (withMedia && status.quote_id) {
-      if ((status.quote_visible ?? true) === false) {
+      if (isQuote) {
+        quote = (
+          <QuotedStatusIndicator statusId={status.quote_id} statusUrl={status.quote_url} />
+        );
+      } else if ((status.quote_visible ?? true) === false) {
         quote = (
           <OutlineBox>
             <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
@@ -250,7 +257,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
         {((withMedia && status.media_attachments.length > 0) || (status.card && !quote)) && (
           <div className='relative has-[div[data-testid="sensitive-overlay"]]:min-h-24'>
             <SensitiveContentOverlay status={status} />
-            {withMedia && <StatusMedia status={status} />}
+            {withMedia && <StatusMedia status={status} muted={compose} />}
           </div>
         )}
 

packages/pl-fe/src/components/upload.tsx

@@ -159,6 +159,9 @@ const Upload: React.FC<IUpload> = ({
     />
   );
 
+  const backgroundImage = (mediaType === 'image' || ['.png', '.jpg', '.jpeg'].some(ext => media.preview_url.endsWith(ext))) ? `url(${media.preview_url})` : undefined;
+  const hasBackgroundImage = !!(backgroundImage);
+
   return (
     <div
       className='relative m-[5px] min-w-[40%] flex-1 overflow-hidden rounded'
@@ -174,7 +177,7 @@ const Upload: React.FC<IUpload> = ({
         className={clsx('compose-form__upload-thumbnail relative h-40 w-full overflow-hidden bg-contain bg-center bg-no-repeat', mediaType)}
         style={{
           scale: styles.scale,
-          backgroundImage: mediaType === 'image' ? `url(${media.preview_url})` : undefined,
+          backgroundImage,
           backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined,
         }}
       >
@@ -226,7 +229,7 @@ const Upload: React.FC<IUpload> = ({
           )}
         </HStack>
 
-        <div className='absolute inset-0 z-[-1] size-full'>
+        <div className={clsx('absolute inset-0 size-full', { 'z-[-1]': hasBackgroundImage })}>
           {mediaType === 'video' && (
             <video className='size-full object-cover' autoPlay playsInline muted loop>
               <source src={media.preview_url} />