Clarify variable names and wording

src/app/components/message/MsgTypeRenderers.tsx

@@ -179,7 +179,7 @@ type RenderImageContentProps = {
   mimeType?: string;
   url: string;
   encInfo?: IEncryptedFile;
-  spoiler?: boolean;
+  markedAsSpoiler?: boolean;
   spoilerReason?: string;
 };
 type MImageProps = {
@@ -208,7 +208,7 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
           mimeType: imgInfo?.mimetype,
           url: mxcUrl,
           encInfo: content.file,
-          spoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
+          markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
           spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
         })}
       </AttachmentBox>

src/app/components/message/content/ImageContent.tsx

@@ -3,6 +3,7 @@ import {
   Badge,
   Box,
   Button,
+  Chip,
   Icon,
   Icons,
   Modal,
@@ -51,7 +52,7 @@ export type ImageContentProps = {
   info?: IImageInfo;
   encInfo?: EncryptedAttachmentInfo;
   autoPlay?: boolean;
-  spoiler?: boolean;
+  markedAsSpoiler?: boolean;
   spoilerReason?: string;
   renderViewer: (props: RenderViewerProps) => ReactNode;
   renderImage: (props: RenderImageProps) => ReactNode;
@@ -66,7 +67,7 @@ export const ImageContent = as<'div', ImageContentProps>(
       info,
       encInfo,
       autoPlay,
-      spoiler,
+      markedAsSpoiler,
       spoilerReason,
       renderViewer,
       renderImage,
@@ -81,7 +82,7 @@ export const ImageContent = as<'div', ImageContentProps>(
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
-    const [spoiled, setSpoiled] = useState(spoiler ?? false);
+    const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -165,7 +166,7 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, spoiled && css.Blur)}>
+          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
             {renderImage({
               alt: body,
               title: body,
@@ -177,7 +178,7 @@ export const ImageContent = as<'div', ImageContentProps>(
             })}
           </Box>
         )}
-        {srcState.status === AsyncStatus.Success && spoiled && (
+        {srcState.status === AsyncStatus.Success && blurred && (
           <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
             <TooltipProvider
               tooltip={
@@ -191,17 +192,16 @@ export const ImageContent = as<'div', ImageContentProps>(
               align="Center"
             >
               {(triggerRef) => (
-                <Button
+                <Chip
                   ref={triggerRef}
                   variant="Secondary"
-                  fill="Solid"
+                  radii="Pill"
-                  radii="300"
+                  size="500"
-                  size="300"
+                  outlined
-                  onClick={() => setSpoiled(false)}
+                  onClick={() => setBlurred(false)}
-                  before={<Icon size="Inherit" src={Icons.Eye} filled />}
                 >
-                  <Text size="B300">Show</Text>
+                  <Text size="B300">Spoiler</Text>
-                </Button>
+                </Chip>
               )}
             </TooltipProvider>
           </Box>

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -34,7 +34,7 @@ export function UploadCardRenderer({
   if (upload.status === UploadStatus.Idle) startUpload();
 
   const toggleSpoiler = useCallback(() => {
-    setMetadata({ ...metadata, spoiled: !metadata.spoiled });
+    setMetadata({ ...metadata, markedAsSpoiler: !metadata.markedAsSpoiler });
   }, [setMetadata, metadata]);
 
   const removeUpload = () => {
@@ -70,7 +70,7 @@ export function UploadCardRenderer({
             <TooltipProvider
               tooltip={
                 <Tooltip variant="SurfaceVariant">
-                  <Text>Spoil Image</Text>
+                  <Text>Spoiler Image</Text>
                 </Tooltip>
               }
               position="Top"
@@ -85,7 +85,7 @@ export function UploadCardRenderer({
                   radii="Pill"
                   size="300"
                 >
-                  <Icon src={metadata.spoiled ? Icons.EyeBlind : Icons.Eye} size="200" />
+                  <Icon src={metadata.markedAsSpoiler ? Icons.EyeBlind : Icons.Eye} size="200" />
                 </IconButton>
               )}
             </TooltipProvider>

src/app/features/room/RoomInput.tsx

@@ -171,7 +171,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             fileItems.push({
               ...ef,
               metadata: {
-                spoiled: false,
+                markedAsSpoiler: false,
               },
             })
           );
@@ -182,7 +182,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               originalFile: f,
               encInfo: undefined,
               metadata: {
-                spoiled: false,
+                markedAsSpoiler: false,
               },
             })
           );

src/app/features/room/msgContent.ts

@@ -56,7 +56,7 @@ export const getImageMsgContent = async (
     msgtype: MsgType.Image,
     filename: file.name,
     body: file.name,
-    [MATRIX_SPOILER_PROPERTY_NAME]: metadata.spoiled,
+    [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
   };
   if (imgEl) {
     const blurHash = encodeBlurHash(imgEl, 512, scaleYDimension(imgEl.width, 512, imgEl.height));

src/app/state/room/roomInputDrafts.ts

@@ -7,7 +7,7 @@ import { createUploadAtomFamily } from '../upload';
 import { TUploadContent } from '../../utils/matrix';
 
 export type TUploadMetadata = {
-  spoiled: boolean;
+  markedAsSpoiler: boolean;
 };
 
 export type TUploadItem = {