From 10ff18e76fb0117b657d1f2cea0d425b12a3377a Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Tue, 10 Dec 2024 21:20:12 -0300
Subject: [PATCH 1/8] refactor: remove immutable, convert to use plain
 javascript object all changes were made to the StatusMedia component and its
 components, including all subcomponents recursively. other components that
 dispatch openModal() of 'MEDIA' still need to be updated

---
 src/components/attachment-thumbs.tsx          |  8 ++-
 .../dropdown-menu/dropdown-menu.tsx           |  5 +-
 src/components/media-gallery.tsx              | 25 +++++-----
 src/components/preview-card.tsx               | 10 ++--
 src/components/pure-status.tsx                | 20 ++------
 src/components/quoted-status.tsx              |  3 +-
 src/components/status-action-bar.tsx          |  3 +-
 src/components/status-media.tsx               | 27 +++++-----
 src/components/status.tsx                     |  3 +-
 .../admin/components/report-status.tsx        |  3 +-
 .../chats/components/chat-message.tsx         |  3 +-
 .../compose/components/reply-indicator.tsx    | 11 ++---
 .../containers/reply-indicator-container.ts   |  3 +-
 src/features/event/event-information.tsx      |  3 +-
 .../report/components/status-check-box.tsx    |  3 +-
 .../components/scheduled-status.tsx           |  3 +-
 .../status/components/detailed-status.tsx     |  3 +-
 .../ui/components/modals/actions-modal.tsx    |  4 +-
 .../ui/components/modals/boost-modal.tsx      |  3 +-
 .../modals/compare-history-modal.tsx          |  3 +-
 .../ui/components/modals/media-modal.tsx      | 49 +++++++++----------
 .../modals/report-modal/report-modal.tsx      |  4 +-
 22 files changed, 99 insertions(+), 100 deletions(-)

diff --git a/src/components/attachment-thumbs.tsx b/src/components/attachment-thumbs.tsx
index 4829b7688..2b4aadf75 100644
--- a/src/components/attachment-thumbs.tsx
+++ b/src/components/attachment-thumbs.tsx
@@ -3,12 +3,10 @@ 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/useAppDispatch.ts';
-
-import type { List as ImmutableList } from 'immutable';
-import type { Attachment } from 'soapbox/types/entities.ts';
+import { Attachment } from 'soapbox/schemas/index.ts';
 
 interface IAttachmentThumbs {
-  media: ImmutableList<Attachment>;
+  media: readonly Attachment[];
   onClick?(): void;
   sensitive?: boolean;
 }
@@ -18,7 +16,7 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
   const dispatch = useAppDispatch();
 
   const fallback = <div className='!h-[50px] bg-transparent' />;
-  const onOpenMedia = (media: ImmutableList<Attachment>, index: number) => dispatch(openModal('MEDIA', { media, index }));
+  const onOpenMedia = (media: readonly Attachment[], index: number) => dispatch(openModal('MEDIA', { media, index }));
 
   return (
     <div className='relative'>
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 161d92307..84af570bb 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -9,13 +9,12 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 
 import DropdownMenuItem, { MenuItem } from './dropdown-menu-item.tsx';
 
-import type { Status } from 'soapbox/types/entities.ts';
-
 export type Menu = Array<MenuItem | null>;
 
 interface IDropdownMenu {
@@ -28,7 +27,7 @@ interface IDropdownMenu {
   onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
   placement?: Placement;
   src?: string;
-  status?: Status;
+  status?: EntityTypes[Entities.STATUSES];
   title?: string;
 }
 
diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 085d95e61..9b59bab2d 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -8,7 +8,7 @@ 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 { Attachment } from 'soapbox/schemas/index.ts';
 import { truncateFilename } from 'soapbox/utils/media.ts';
 
 import { isIOS } from '../is-mobile.ts';
@@ -16,8 +16,6 @@ import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maxi
 
 import SvgIcon from './ui/svg-icon.tsx';
 
-import type { List as ImmutableList } from 'immutable';
-
 // const Gameboy = lazy(() => import('./gameboy'));
 
 const ATTACHMENT_LIMIT = 4;
@@ -46,7 +44,8 @@ const withinLimits = (aspectRatio: number) => {
 };
 
 const shouldLetterbox = (attachment: Attachment): boolean => {
-  const aspectRatio = attachment.getIn(['meta', 'original', 'aspect']) as number | undefined;
+  const aspectRatio = 'meta' in attachment && 'original' in attachment.meta && (attachment)?.meta?.original?.aspect;
+
   if (!aspectRatio) return true;
 
   return !withinLimits(aspectRatio);
@@ -159,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] || paperclipIcon}
+        src={MIMETYPE_ICONS[attachment?.pleroma?.mime_type as string] || paperclipIcon}
       />
     );
 
@@ -291,9 +290,9 @@ const Item: React.FC<IItem> = ({
 
 export interface IMediaGallery {
   sensitive?: boolean;
-  media: ImmutableList<Attachment>;
+  media: readonly Attachment[];
   height?: number;
-  onOpenMedia: (media: ImmutableList<Attachment>, index: number) => void;
+  onOpenMedia: (media: readonly Attachment[], index: number) => void;
   defaultWidth?: number;
   cacheWidth?: (width: number) => void;
   visible?: boolean;
@@ -323,7 +322,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
 
   const getSizeDataSingle = (): SizeData => {
     const w = width || defaultWidth;
-    const aspectRatio = media.getIn([0, 'meta', 'original', 'aspect']) as number | undefined;
+    const aspectRatio = 'meta' in media[0] && 'original' in media[0].meta && (media[0])?.meta?.original?.aspect;
 
     const getHeight = () => {
       if (!aspectRatio) return w * 9 / 16;
@@ -349,7 +348,9 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     let itemsDimensions: Dimensions[] = [];
 
     const ratios = Array(size).fill(null).map((_, i) =>
-      media.getIn([i, 'meta', 'original', 'aspect']) as number,
+      'meta' in media[i] && 'original' in media[i].meta && typeof media[i].meta?.original?.aspect === 'number'
+        ? media[i].meta.original.aspect
+        : undefined as unknown as number, // NOTE: the old logic returned undefined anyways, and the implementation of the functions below call 'isNaN', such as the 'isPortrait' function
     );
 
     const [ar1, ar2, ar3, ar4] = ratios;
@@ -547,9 +548,9 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     };
   };
 
-  const sizeData: SizeData = getSizeData(media.size);
+  const sizeData: SizeData = getSizeData(media.length);
 
-  const children = media.take(ATTACHMENT_LIMIT).map((attachment, i) => (
+  const children = media.slice(0, ATTACHMENT_LIMIT).map((attachment, i) => (
     <Item
       key={attachment.id}
       onClick={handleClick}
@@ -560,7 +561,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
       visible={!!props.visible}
       dimensions={sizeData.itemsDimensions[i]}
       last={i === ATTACHMENT_LIMIT - 1}
-      total={media.size}
+      total={media.length}
       compact={compact}
     />
   ));
diff --git a/src/components/preview-card.tsx b/src/components/preview-card.tsx
index c9f70c981..3e8282396 100644
--- a/src/components/preview-card.tsx
+++ b/src/components/preview-card.tsx
@@ -3,7 +3,6 @@ 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 { useState, useEffect, useRef } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash.tsx';
@@ -12,17 +11,18 @@ 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 { Attachment } from 'soapbox/schemas/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.ts';
+import type { Card as CardEntity } from 'soapbox/types/entities.ts';
 
 /** Props for `PreviewCard`. */
 interface IPreviewCard {
   card: CardEntity;
   maxTitle?: number;
   maxDescription?: number;
-  onOpenMedia: (attachments: ImmutableList<Attachment>, index: number) => void;
+  onOpenMedia: (attachments: readonly Attachment[], index: number) => void;
   compact?: boolean;
   defaultWidth?: number;
   cacheWidth?: (width: number) => void;
@@ -73,9 +73,9 @@ const PreviewCard: React.FC<IPreviewCard> = ({
           height: card.height,
         },
       },
-    });
+    }).toJS();
 
-    onOpenMedia(ImmutableList([attachment]), 0);
+    onOpenMedia([{ ...attachment, blurhash: attachment.blurhash === undefined ? null : attachment.blurhash } as Attachment], 0);
   };
 
   const handleEmbedClick: React.MouseEventHandler = (e) => {
diff --git a/src/components/pure-status.tsx b/src/components/pure-status.tsx
index 51e40d0f6..7135c690d 100644
--- a/src/components/pure-status.tsx
+++ b/src/components/pure-status.tsx
@@ -2,11 +2,10 @@ 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 { useCallback, 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 { importFetchedStatuses } from 'soapbox/actions/importer/index.ts';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { unfilterStatus } from 'soapbox/actions/statuses.ts';
 import PureEventPreview from 'soapbox/components/pure-event-preview.tsx';
@@ -23,14 +22,14 @@ import { EntityTypes, Entities } from 'soapbox/entity-store/entities.ts';
 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 { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useFavourite } from 'soapbox/hooks/useFavourite.ts';
 import { useMentionCompose } from 'soapbox/hooks/useMentionCompose.ts';
 import { useReblog } from 'soapbox/hooks/useReblog.ts';
 import { useReplyCompose } from 'soapbox/hooks/useReplyCompose.ts';
 import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { useStatusHidden } from 'soapbox/hooks/useStatusHidden.ts';
-import { makeGetStatus } from 'soapbox/selectors/index.ts';
+import { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { Status } from 'soapbox/types/entities.ts';
 import { emojifyText } from 'soapbox/utils/emojify.tsx';
 import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status.ts';
 
@@ -127,16 +126,7 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
     }
   }, [overlay.current]);
 
-  // TODO: remove this code, it will be removed once all components in this file are pure.
-  useEffect(() => {
-    dispatch(importFetchedStatuses([status]));
-  }, []);
-  const getStatus = useCallback(makeGetStatus(), []);
-  const statusImmutable = useAppSelector(state => getStatus(state, { id: status.id }));
-  if (!statusImmutable) {
-    return null;
-  }
-  // END TODO
+  const statusImmutable = normalizeStatus(status) as Status; // TODO: remove this line, it will be removed once all components in this file are pure.
 
   const handleToggleMediaVisibility = (): void => {
     setShowMedia(!showMedia);
@@ -486,7 +476,7 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
                   {(quote || actualStatus.card || actualStatus.media_attachments.length > 0) && (
                     <Stack space={4}>
                       <StatusMedia
-                        status={statusImmutable} // FIXME: stop using 'statusImmutable' and use 'status' variable directly, for that create a new component called 'PureStatusMedia'
+                        status={status}
                         muted={muted}
                         onClick={handleClick}
                         showMedia={showMedia}
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index 657240f3b..413b90ccf 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -7,6 +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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
@@ -138,7 +139,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
               {status.media_attachments.size > 0 && (
                 <StatusMedia
-                  status={status}
+                  status={status.toJS() as EntityTypes[Entities.STATUSES]}
                   muted={compose}
                   showMedia={showMedia}
                   onToggleVisibility={handleToggleMediaVisibility}
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 48a50410e..2712779e8 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -49,6 +49,7 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
@@ -826,7 +827,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           />
         )}
 
-        <DropdownMenu items={menu} status={status}>
+        <DropdownMenu items={menu} status={status.toJS() as EntityTypes[Entities.STATUSES]}>
           <StatusActionButton
             title={intl.formatMessage(messages.more)}
             icon={dotsIcon}
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index 5160e43d0..8d396e8f1 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -4,17 +4,16 @@ import { Suspense } from 'react';
 import { openModal } from 'soapbox/actions/modals.ts';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
 import PreviewCard from 'soapbox/components/preview-card.tsx';
+import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 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.ts';
+import { Attachment } from 'soapbox/schemas/index.ts';
 
 interface IStatusMedia {
   /** Status entity to render media for. */
-  status: Status;
+  status: EntityTypes[Entities.STATUSES];
   /** Whether to display compact media. */
   muted?: boolean;
   /** Callback when compact media is clicked. */
@@ -35,8 +34,8 @@ const StatusMedia: React.FC<IStatusMedia> = ({
 }) => {
   const dispatch = useAppDispatch();
 
-  const size = status.media_attachments.size;
-  const firstAttachment = status.media_attachments.first();
+  const size = status.media_attachments.length;
+  const firstAttachment = status.media_attachments[0];
 
   let media: JSX.Element | null = null;
 
@@ -52,7 +51,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
     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) => {
+  const openMedia = (media: readonly Attachment[], index: number) => {
     dispatch(openModal('MEDIA', { media, status, index }));
   };
 
@@ -72,10 +71,10 @@ const StatusMedia: React.FC<IStatusMedia> = ({
         <Suspense fallback={renderLoadingVideoPlayer()}>
           <Video
             preview={video.preview_url}
-            blurhash={video.blurhash}
+            blurhash={video.blurhash ?? undefined}
             src={video.url}
             alt={video.description}
-            aspectRatio={Number(video.meta.getIn(['original', 'aspect']))}
+            aspectRatio={Number(video.meta?.original?.aspect)}
             height={285}
             visible={showMedia}
             inline
@@ -90,11 +89,11 @@ const StatusMedia: React.FC<IStatusMedia> = ({
           <Audio
             src={attachment.url}
             alt={attachment.description}
-            poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.getIn(['account', 'avatar_static']) as string | undefined}
-            backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined}
-            foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
-            accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}
-            duration={attachment.meta.getIn(['original', 'duration'], 0)  as number | undefined}
+            poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.account.avatar_static}
+            backgroundColor={attachment.meta?.colors?.background}
+            foregroundColor={attachment.meta?.colors?.foreground}
+            accentColor={attachment.meta?.colors?.accent}
+            duration={attachment.meta?.duration  ?? 0}
             height={263}
           />
         </Suspense>
diff --git a/src/components/status.tsx b/src/components/status.tsx
index dc36ae974..1b189d5d1 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -16,6 +16,7 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 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';
@@ -465,7 +466,7 @@ const Status: React.FC<IStatus> = (props) => {
                   {(quote || actualStatus.card || actualStatus.media_attachments.size > 0) && (
                     <Stack space={4}>
                       <StatusMedia
-                        status={actualStatus}
+                        status={actualStatus.toJS() as EntityTypes[Entities.STATUSES]}
                         muted={muted}
                         onClick={handleClick}
                         showMedia={showMedia}
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index 33079ce37..653da2bcf 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -9,6 +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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 
 import type { AdminReport, Status } from 'soapbox/types/entities.ts';
@@ -52,7 +53,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     <HStack space={2} alignItems='start'>
       <Stack space={2} className='overflow-hidden' grow>
         <StatusContent status={status} />
-        <StatusMedia status={status} />
+        <StatusMedia status={status.toJS() as EntityTypes[Entities.STATUSES]}  />
       </Stack>
 
       <div className='flex-none'>
diff --git a/src/features/chats/components/chat-message.tsx b/src/features/chats/components/chat-message.tsx
index 22204041d..5d5c26190 100644
--- a/src/features/chats/components/chat-message.tsx
+++ b/src/features/chats/components/chat-message.tsx
@@ -23,6 +23,7 @@ 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 { Attachment } from 'soapbox/schemas/index.ts';
 import { htmlToPlaintext } from 'soapbox/utils/html.ts';
 import { isOnlyEmoji as _isOnlyEmoji } from 'soapbox/utils/only-emoji.ts';
 
@@ -112,7 +113,7 @@ const ChatMessage = (props: IChatMessage) => {
           'rounded-br-sm': isMyMessage && content,
           'rounded-bl-sm': !isMyMessage && content,
         })}
-        media={chatMessage.media_attachments}
+        media={chatMessage.media_attachments.toJS() as unknown as Attachment[]}
         onOpenMedia={onOpenMedia}
         visible
       />
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index 5570ec7cc..7d12ae738 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -5,13 +5,12 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
-import type { Status } from 'soapbox/types/entities.ts';
-
 interface IReplyIndicator {
   className?: string;
-  status?: Status;
+  status?: EntityTypes[Entities.STATUSES];
   onCancel?: () => void;
   hideActions: boolean;
 }
@@ -50,12 +49,12 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
         className='break-words'
         size='sm'
         direction={getTextDirection(status.search_index)}
-        emojis={status?.emojis?.toJS() ?? status.emojis} // Use toJS() if status.emojis is immutable; otherwise, fallback to plain status.emojis
-        mentions={status.mentions.toJS()}
+        emojis={status.emojis}
+        mentions={status.mentions}
         html={{ __html: status.content }}
       />
 
-      {status.media_attachments.size > 0 && (
+      {status.media_attachments.length > 0 && (
         <AttachmentThumbs
           media={status.media_attachments}
           sensitive={status.sensitive}
diff --git a/src/features/compose/containers/reply-indicator-container.ts b/src/features/compose/containers/reply-indicator-container.ts
index 871df1dc9..a0ba71397 100644
--- a/src/features/compose/containers/reply-indicator-container.ts
+++ b/src/features/compose/containers/reply-indicator-container.ts
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 
 import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
+import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 import ReplyIndicator from '../components/reply-indicator.tsx';
@@ -16,7 +17,7 @@ const makeMapStateToProps = () => {
     const editing = !!state.compose.get(composeId)?.id;
 
     return {
-      status: getStatus(state, { id: statusId }) as Status,
+      status: (getStatus(state, { id: statusId }) as Status)?.toJS() as EntityTypes[Entities.STATUSES],
       hideActions: editing,
     };
   };
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index 0b01c27dd..9d64356a4 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -15,6 +15,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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 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';
@@ -208,7 +209,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
       )}
 
       <StatusMedia
-        status={status}
+        status={status.toJS() as EntityTypes[Entities.STATUSES]}
         showMedia={showMedia}
         onToggleVisibility={handleToggleMediaVisibility}
       />
diff --git a/src/features/report/components/status-check-box.tsx b/src/features/report/components/status-check-box.tsx
index 149a5b352..29c63ee3f 100644
--- a/src/features/report/components/status-check-box.tsx
+++ b/src/features/report/components/status-check-box.tsx
@@ -7,6 +7,7 @@ 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';
+import { Attachment } from 'soapbox/schemas/index.ts';
 
 interface IStatusCheckBox {
   id: string;
@@ -62,7 +63,7 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
     } else {
       media = (
         <MediaGallery
-          media={status.media_attachments}
+          media={status.media_attachments.toJS() as unknown as Attachment[]}
           sensitive={status.sensitive}
           height={110}
           onOpenMedia={() => {}}
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index ea45ef9aa..137f85ce8 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -8,6 +8,7 @@ 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 { Attachment } from 'soapbox/schemas/index.ts';
 
 import { buildStatus } from '../builder.tsx';
 
@@ -55,7 +56,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
 
           {status.media_attachments.size > 0 && (
             <AttachmentThumbs
-              media={status.media_attachments}
+              media={status.media_attachments.toJS() as unknown as Attachment[]}
               sensitive={status.sensitive}
             />
           )}
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 39bf23c7f..2f0c82053 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -16,6 +16,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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
 import { getActualStatus } from 'soapbox/utils/status.ts';
 
@@ -162,7 +163,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             {(withMedia && (quote || actualStatus.card || actualStatus.media_attachments.size > 0)) && (
               <Stack space={4}>
                 <StatusMedia
-                  status={actualStatus}
+                  status={actualStatus.toJS() as EntityTypes[Entities.STATUSES]}
                   showMedia={showMedia}
                   onToggleVisibility={onToggleMediaVisibility}
                 />
diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 6641298b6..9aacd9b3e 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -4,15 +4,15 @@ import { spring } from 'react-motion';
 
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
+import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
 
 import Motion from '../../util/optional-motion.tsx';
 
 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;
+  status: EntityTypes[Entities.STATUSES];
   actions: Menu;
   onClick: () => void;
   onClose: () => void;
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index 425e8580a..afe841a3c 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -5,6 +5,7 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
@@ -37,7 +38,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
       confirmationText={intl.formatMessage(buttonText)}
     >
       <Stack space={4}>
-        <ReplyIndicator status={status} hideActions />
+        <ReplyIndicator status={status.toJS() as EntityTypes[Entities.STATUSES]} hideActions />
 
         <Text>
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
diff --git a/src/features/ui/components/modals/compare-history-modal.tsx b/src/features/ui/components/modals/compare-history-modal.tsx
index 313de9291..133359516 100644
--- a/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/src/features/ui/components/modals/compare-history-modal.tsx
@@ -12,6 +12,7 @@ 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 { Attachment } from 'soapbox/schemas/index.ts';
 import { emojifyText } from 'soapbox/utils/emojify.tsx';
 
 import type { StatusEdit as StatusEditEntity } from 'soapbox/types/entities.ts';
@@ -81,7 +82,7 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
               )}
 
               {version.media_attachments.size > 0 && (
-                <AttachmentThumbs media={version.media_attachments} />
+                <AttachmentThumbs media={version.media_attachments.toJS() as unknown as Attachment[]} />
               )}
 
               <Text align='right' tag='span' theme='muted' size='sm'>
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 2faa1de1d..59c3a6763 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -19,20 +19,20 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.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 } 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 { normalizeStatus } from 'soapbox/normalizers/index.ts';
+import { Attachment } from 'soapbox/schemas/index.ts';
+import { Status } from 'soapbox/types/entities.ts';
+import { getActualStatus } from 'soapbox/utils/status.ts';
 
 import ImageLoader from '../image-loader.tsx';
 
-import type { List as ImmutableList } from 'immutable';
-import type { Attachment, Status } from 'soapbox/types/entities.ts';
-
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   expand: { id: 'lightbox.expand', defaultMessage: 'Expand' },
@@ -55,8 +55,8 @@ const containerStyle: React.CSSProperties = {
 };
 
 interface IMediaModal {
-  media: ImmutableList<Attachment>;
-  status?: Status;
+  media: readonly Attachment[];
+  status?: EntityTypes[Entities.STATUSES];
   index: number;
   time?: number;
   onClose(): void;
@@ -74,8 +74,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   const history = useHistory();
   const intl = useIntl();
 
-  const getStatus = useCallback(makeGetStatus(), []);
-  const actualStatus = useAppSelector((state) => getStatus(state, { id: status?.id as string }));
+  const actualStatus = status ? getActualStatus(status) : undefined;
 
   const [isLoaded, setIsLoaded] = useState<boolean>(!!status);
   const [next, setNext] = useState<string>();
@@ -83,11 +82,11 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   const [navigationHidden, setNavigationHidden] = useState(false);
   const [isFullScreen, setIsFullScreen] = useState(!status);
 
-  const hasMultipleImages = media.size > 1;
+  const hasMultipleImages = media.length > 1;
 
-  const handleSwipe = (index: number) => setIndex(index % media.size);
-  const handleNextClick = () => setIndex((getIndex() + 1) % media.size);
-  const handlePrevClick = () => setIndex((media.size + getIndex() - 1) % media.size);
+  const handleSwipe = (index: number) => setIndex(index % media.length);
+  const handleNextClick = () => setIndex((getIndex() + 1) % media.length);
+  const handlePrevClick = () => setIndex((media.length + getIndex() - 1) % media.length);
 
   const navigationHiddenClassName = navigationHidden ? 'pointer-events-none opacity-0' : '';
 
@@ -107,7 +106,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   };
 
   const handleDownload = () => {
-    const mediaItem = hasMultipleImages ? media.get(index as number) : media.get(0);
+    const mediaItem = hasMultipleImages ? media[index as number] : media[0];
     window.open(mediaItem?.url);
   };
 
@@ -126,8 +125,8 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   };
 
   const content = media.map((attachment, i) => {
-    const width  = (attachment.meta.getIn(['original', 'width']) || undefined) as number | undefined;
-    const height = (attachment.meta.getIn(['original', 'height']) || undefined) as number | undefined;
+    const width  = 'meta' in attachment && 'original' in attachment.meta ? (attachment)?.meta?.original?.width : undefined;
+    const height = 'meta' in attachment && 'original' in attachment.meta ? (attachment)?.meta?.original?.height : undefined;
 
     const link = (status && (
       <a href={status.url} onClick={handleStatusClick}>
@@ -151,7 +150,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
       return (
         <Video
           preview={attachment.preview_url}
-          blurhash={attachment.blurhash}
+          blurhash={attachment.blurhash ?? undefined}
           src={attachment.url}
           width={width}
           height={height}
@@ -169,11 +168,11 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
         <Audio
           src={attachment.url}
           alt={attachment.description}
-          poster={attachment.preview_url !== attachment.url ? attachment.preview_url : (status?.getIn(['account', 'avatar_static'])) as string | undefined}
-          backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined}
-          foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
-          accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}
-          duration={attachment.meta.getIn(['original', 'duration'], 0) as number | undefined}
+          poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status?.account.avatar_static}
+          backgroundColor={attachment.meta?.colors?.background}
+          foregroundColor={attachment.meta?.colors?.foreground}
+          accentColor={attachment.meta?.colors?.accent}
+          duration={attachment?.meta?.duration ?? 0}
           key={attachment.url}
         />
       );
@@ -193,7 +192,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     }
 
     return null;
-  }).toArray();
+  });
 
   const handleLoadMore = useCallback(debounce(() => {
     if (next && status) {
@@ -344,7 +343,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                 className={clsx('absolute bottom-2 flex w-full transition-opacity', navigationHiddenClassName)}
               >
                 <StatusActionBar
-                  status={actualStatus}
+                  status={normalizeStatus(actualStatus) as Status}
                   space='md'
                   statusActionButtonTheme='inverse'
                 />
@@ -362,7 +361,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
             }
           >
             <Thread
-              status={actualStatus}
+              status={normalizeStatus(actualStatus) as Status}
               withMedia={false}
               useWindowScroll={false}
               itemClassName='px-4'
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 ac1244d53..1ac447059 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -21,11 +21,13 @@ 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 { Attachment } from 'soapbox/schemas/index.ts';
 
 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.' },
   done: { id: 'report.done', defaultMessage: 'Done' },
@@ -91,7 +93,7 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
 
       {status.media_attachments.size > 0 && (
         <AttachmentThumbs
-          media={status.media_attachments}
+          media={status.media_attachments.toJS() as unknown as Attachment[]}
           sensitive={status.sensitive}
         />
       )}

From 60489cb123ad1f4b9728bff857ade7210bca347f Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Tue, 10 Dec 2024 22:37:38 -0300
Subject: [PATCH 2/8] refactor: dispatch openModal() 'MEDIA' with raw objects

---
 src/components/status.tsx                          | 2 +-
 src/components/upload.tsx                          | 2 +-
 src/features/account-gallery/index.tsx             | 2 +-
 src/features/account/components/header.tsx         | 4 ++--
 src/features/chats/components/chat-upload.tsx      | 2 +-
 src/features/event/components/event-header.tsx     | 2 +-
 src/features/group/components/group-header.tsx     | 4 ++--
 src/features/group/group-gallery.tsx               | 2 +-
 src/features/status/components/thread.tsx          | 2 +-
 src/features/ui/components/group-media-panel.tsx   | 2 +-
 src/features/ui/components/profile-media-panel.tsx | 2 +-
 11 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/status.tsx b/src/components/status.tsx
index 1b189d5d1..228dc224e 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -151,7 +151,7 @@ const Status: React.FC<IStatus> = (props) => {
       if (firstAttachment.type === 'video') {
         dispatch(openModal('VIDEO', { status, media: firstAttachment, time: 0 }));
       } else {
-        dispatch(openModal('MEDIA', { status, media: status.media_attachments, index: 0 }));
+        dispatch(openModal('MEDIA', { status: status.toJS(), media: status.media_attachments.toJS(), index: 0 }));
       }
     }
   };
diff --git a/src/components/upload.tsx b/src/components/upload.tsx
index 53aa79d91..299075375 100644
--- a/src/components/upload.tsx
+++ b/src/components/upload.tsx
@@ -140,7 +140,7 @@ const Upload: React.FC<IUpload> = ({
   };
 
   const handleOpenModal = () => {
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(media), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(media).toJS(), index: 0 }));
   };
 
   const active = hovered || focused;
diff --git a/src/features/account-gallery/index.tsx b/src/features/account-gallery/index.tsx
index 9d163bc46..ddc7fe962 100644
--- a/src/features/account-gallery/index.tsx
+++ b/src/features/account-gallery/index.tsx
@@ -74,7 +74,7 @@ const AccountGallery = () => {
       const media = (attachment.status as Status).media_attachments;
       const index = media.findIndex((x) => x.id === attachment.id);
 
-      dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
+      dispatch(openModal('MEDIA', { media: media.toJS(), index, status: attachment?.status?.toJS() ?? attachment.status }));
     }
   };
 
diff --git a/src/features/account/components/header.tsx b/src/features/account/components/header.tsx
index 76f8919a4..952a02146 100644
--- a/src/features/account/components/header.tsx
+++ b/src/features/account/components/header.tsx
@@ -266,7 +266,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       type: 'image',
       url: account.avatar,
     });
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(avatar), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(avatar).toJS(), index: 0 }));
   };
 
   const handleAvatarClick: React.MouseEventHandler = (e) => {
@@ -281,7 +281,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       type: 'image',
       url: account.header,
     });
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(header), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(header).toJS(), index: 0 }));
   };
 
   const handleHeaderClick: React.MouseEventHandler = (e) => {
diff --git a/src/features/chats/components/chat-upload.tsx b/src/features/chats/components/chat-upload.tsx
index 4caf51998..b701966cd 100644
--- a/src/features/chats/components/chat-upload.tsx
+++ b/src/features/chats/components/chat-upload.tsx
@@ -22,7 +22,7 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
   const clickable = attachment.type !== 'unknown';
 
   const handleOpenModal = () => {
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(attachment), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(attachment).toJS(), index: 0 }));
   };
 
   return (
diff --git a/src/features/event/components/event-header.tsx b/src/features/event/components/event-header.tsx
index 4c191a5c9..1a3d382d2 100644
--- a/src/features/event/components/event-header.tsx
+++ b/src/features/event/components/event-header.tsx
@@ -128,7 +128,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     e.preventDefault();
     e.stopPropagation();
 
-    dispatch(openModal('MEDIA', { media: ImmutableList([event.banner]) }));
+    dispatch(openModal('MEDIA', { media: ImmutableList([event.banner]).toJS() }));
   };
 
   const handleExportClick = () => {
diff --git a/src/features/group/components/group-header.tsx b/src/features/group/components/group-header.tsx
index 71fdc2dcc..714cc25e6 100644
--- a/src/features/group/components/group-header.tsx
+++ b/src/features/group/components/group-header.tsx
@@ -63,7 +63,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
       type: 'image',
       url: group.avatar,
     });
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(avatar), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(avatar).toJS(), index: 0 }));
   };
 
   const handleAvatarClick: React.MouseEventHandler = (e) => {
@@ -78,7 +78,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
       type: 'image',
       url: group.header,
     });
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(header), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(header).toJS(), index: 0 }));
   };
 
   const handleHeaderClick: React.MouseEventHandler = (e) => {
diff --git a/src/features/group/group-gallery.tsx b/src/features/group/group-gallery.tsx
index 4adeaec0f..28b2d2e0f 100644
--- a/src/features/group/group-gallery.tsx
+++ b/src/features/group/group-gallery.tsx
@@ -43,7 +43,7 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
       const media = (attachment.status as Status).media_attachments;
       const index = media.findIndex((x) => x.id === attachment.id);
 
-      dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
+      dispatch(openModal('MEDIA', { media: media.toJS(), index, status: attachment?.status?.toJS() ?? attachment.status }));
     }
   };
 
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index 3d307b1cd..bd0734098 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -179,7 +179,7 @@ const Thread = (props: IThread) => {
       if (media.size === 1 && firstAttachment.type === 'video') {
         dispatch(openModal('VIDEO', { media: firstAttachment, status: status }));
       } else {
-        dispatch(openModal('MEDIA', { media, index: 0, status: status }));
+        dispatch(openModal('MEDIA', { media: media.toJS(), index: 0, status: status.toJS() }));
       }
     }
   };
diff --git a/src/features/ui/components/group-media-panel.tsx b/src/features/ui/components/group-media-panel.tsx
index 801bb403e..fc4147b2f 100644
--- a/src/features/ui/components/group-media-panel.tsx
+++ b/src/features/ui/components/group-media-panel.tsx
@@ -36,7 +36,7 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
       const media = attachment.getIn(['status', 'media_attachments']) as ImmutableList<Attachment>;
       const index = media.findIndex(x => x.id === attachment.id);
 
-      dispatch(openModal('MEDIA', { media, index, status: attachment.status, account: attachment.account }));
+      dispatch(openModal('MEDIA', { media: media.toJS(), index, status: attachment?.status?.toJS() ?? attachment.status, account: attachment.account })); // NOTE: why 'account' field is here? it doesn't exist in MediaModal component
     }
   };
 
diff --git a/src/features/ui/components/profile-media-panel.tsx b/src/features/ui/components/profile-media-panel.tsx
index d155c2ece..a13f8a45e 100644
--- a/src/features/ui/components/profile-media-panel.tsx
+++ b/src/features/ui/components/profile-media-panel.tsx
@@ -34,7 +34,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
       const media = attachment.getIn(['status', 'media_attachments']) as ImmutableList<Attachment>;
       const index = media.findIndex(x => x.id === attachment.id);
 
-      dispatch(openModal('MEDIA', { media, index, status: attachment.status }));
+      dispatch(openModal('MEDIA', { media: media.toJS(), index, status: attachment?.status?.toJS() ?? attachment.status }));
     }
   };
 

From c7e695b3004046999502325bac001c991126d0aa Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 11 Dec 2024 14:50:31 -0300
Subject: [PATCH 3/8] refactor: remove blank line

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

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 1ac447059..21394ee2f 100644
--- a/src/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/src/features/ui/components/modals/report-modal/report-modal.tsx
@@ -27,7 +27,6 @@ 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.' },
   done: { id: 'report.done', defaultMessage: 'Done' },

From bff17c9fa009f651bb402fed858b2c5af3f7483b Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 11 Dec 2024 15:37:50 -0300
Subject: [PATCH 4/8] refactor: @deprecated Status immutable

---
 src/types/entities.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/types/entities.ts b/src/types/entities.ts
index 82dc1dad5..5bc52e900 100644
--- a/src/types/entities.ts
+++ b/src/types/entities.ts
@@ -43,6 +43,9 @@ type Tag = ReturnType<typeof TagRecord>;
 
 type Account = SchemaAccount & LegacyMap;
 
+/**
+ * @deprecated Use the Status from 'soapbox/schemas/index.ts'
+ */
 interface Status extends ReturnType<typeof StatusRecord> {
   // HACK: same as above
   quote: EmbeddedEntity<Status>;

From 6a44582c9c4154c0e7eb1dbb7571538dccae4985 Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 11 Dec 2024 15:38:38 -0300
Subject: [PATCH 5/8] refactor: add documentation to useBookmarks hook

---
 src/api/hooks/statuses/useBookmarks.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/api/hooks/statuses/useBookmarks.ts b/src/api/hooks/statuses/useBookmarks.ts
index 012870ec6..122de7f28 100644
--- a/src/api/hooks/statuses/useBookmarks.ts
+++ b/src/api/hooks/statuses/useBookmarks.ts
@@ -4,6 +4,12 @@ import { useApi } from 'soapbox/hooks/useApi.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
 import { statusSchema } from 'soapbox/schemas/status.ts';
 
+/**
+ * Get all the statuses the user has bookmarked.
+ * https://docs.joinmastodon.org/methods/bookmarks/#get
+ * GET /api/v1/bookmarks
+ * TODO: add 'limit'
+ */
 function useBookmarks() {
   const api = useApi();
   const features = useFeatures();

From 45a81a937c5c9673100282eff177bfc9a4f0d06c Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 11 Dec 2024 16:24:23 -0300
Subject: [PATCH 6/8] refactor: rename Status to LegacyStatus and
 EntityTypes[Entities.STATUSES] to StatusEntity

---
 src/components/dropdown-menu/dropdown-menu.tsx        |  4 ++--
 src/components/pure-event-preview.tsx                 |  4 ++--
 src/components/pure-status-content.tsx                |  4 ++--
 src/components/pure-status-list.tsx                   |  8 ++++----
 src/components/pure-status-reply-mentions.tsx         |  5 ++---
 src/components/pure-status.tsx                        |  8 ++++----
 src/components/pure-translate-button.tsx              |  4 ++--
 src/components/quoted-status.tsx                      |  8 ++++----
 src/components/status-action-bar.tsx                  |  8 ++++----
 src/components/status-media.tsx                       |  5 ++---
 src/components/status.tsx                             |  8 ++++----
 .../statuses/pure-sensitive-content-overlay.tsx       |  5 ++---
 src/features/admin/components/report-status.tsx       |  8 ++++----
 src/features/compose/components/reply-indicator.tsx   |  4 ++--
 .../compose/containers/reply-indicator-container.ts   |  7 ++++---
 .../event/components/pure-event-action-button.tsx     |  4 ++--
 src/features/event/components/pure-event-date.tsx     |  5 ++---
 src/features/event/event-information.tsx              |  8 ++++----
 src/features/status/components/detailed-status.tsx    | 10 +++++-----
 src/features/ui/components/modals/actions-modal.tsx   |  4 ++--
 src/features/ui/components/modals/boost-modal.tsx     | 10 +++++-----
 src/features/ui/components/modals/media-modal.tsx     | 11 +++++------
 22 files changed, 69 insertions(+), 73 deletions(-)

diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index 84af570bb..08189700f 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -9,9 +9,9 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
 import DropdownMenuItem, { MenuItem } from './dropdown-menu-item.tsx';
 
@@ -27,7 +27,7 @@ interface IDropdownMenu {
   onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
   placement?: Placement;
   src?: string;
-  status?: EntityTypes[Entities.STATUSES];
+  status?: StatusEntity;
   title?: string;
 }
 
diff --git a/src/components/pure-event-preview.tsx b/src/components/pure-event-preview.tsx
index 1c06724ec..57915e364 100644
--- a/src/components/pure-event-preview.tsx
+++ b/src/components/pure-event-preview.tsx
@@ -7,7 +7,6 @@ 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 { EntityTypes, Entities } from 'soapbox/entity-store/entities.ts';
 import PureEventActionButton from 'soapbox/features/event/components/pure-event-action-button.tsx';
 import PureEventDate from 'soapbox/features/event/components/pure-event-date.tsx';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
@@ -15,6 +14,7 @@ import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import Icon from './icon.tsx';
 import VerificationBadge from './verification-badge.tsx';
 
+import type { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
 const messages = defineMessages({
   eventBanner: { id: 'event.banner', defaultMessage: 'Event banner' },
@@ -23,7 +23,7 @@ const messages = defineMessages({
 });
 
 interface IPureEventPreview {
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
   className?: string;
   hideAction?: boolean;
   floatingAction?: boolean;
diff --git a/src/components/pure-status-content.tsx b/src/components/pure-status-content.tsx
index a728ecd6b..b28d27c37 100644
--- a/src/components/pure-status-content.tsx
+++ b/src/components/pure-status-content.tsx
@@ -4,7 +4,7 @@ import { useState, useRef, useLayoutEffect, useMemo, memo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Icon from 'soapbox/components/icon.tsx';
-import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import { isOnlyEmoji as _isOnlyEmoji } from 'soapbox/utils/only-emoji.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
@@ -28,7 +28,7 @@ const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
 );
 
 interface IPureStatusContent {
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
   onClick?: () => void;
   collapsable?: boolean;
   translatable?: boolean;
diff --git a/src/components/pure-status-list.tsx b/src/components/pure-status-list.tsx
index 11a12907b..be3ed8914 100644
--- a/src/components/pure-status-list.tsx
+++ b/src/components/pure-status-list.tsx
@@ -6,11 +6,11 @@ import { FormattedMessage } from 'react-intl';
 import LoadGap from 'soapbox/components/load-gap.tsx';
 import PureStatus from 'soapbox/components/pure-status.tsx';
 import ScrollableList from 'soapbox/components/scrollable-list.tsx';
-import { EntityTypes, Entities } from 'soapbox/entity-store/entities.ts';
 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 { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
 import type { VirtuosoHandle } from 'react-virtuoso';
 import type { IScrollableList } from 'soapbox/components/scrollable-list.tsx';
@@ -19,11 +19,11 @@ interface IPureStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children
   /** Unique key to preserve the scroll position when navigating back. */
   scrollKey: string;
   /** List of statuses to display. */
-  statuses: readonly EntityTypes[Entities.STATUSES][];
+  statuses: readonly StatusEntity[];
   /** Last _unfiltered_ status ID (maxId) for pagination. */
   lastStatusId?: string;
   /** Pinned statuses to show at the top of the feed. */
-  featuredStatuses?: readonly EntityTypes[Entities.STATUSES][];
+  featuredStatuses?: readonly StatusEntity[];
   /** Pagination callback when the end of the list is reached. */
   onLoadMore?: (lastStatusId: string) => void;
   /** Whether the data is currently being fetched. */
@@ -124,7 +124,7 @@ const PureStatusList: React.FC<IPureStatusList> = ({
     );
   };
 
-  const renderStatus = (status: EntityTypes[Entities.STATUSES]) => {
+  const renderStatus = (status: StatusEntity) => {
     return (
       <PureStatus
         status={status}
diff --git a/src/components/pure-status-reply-mentions.tsx b/src/components/pure-status-reply-mentions.tsx
index 49a63b6df..33b3247fd 100644
--- a/src/components/pure-status-reply-mentions.tsx
+++ b/src/components/pure-status-reply-mentions.tsx
@@ -4,13 +4,12 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import { shortenNostr } from 'soapbox/utils/nostr.ts';
 
-
 interface IPureStatusReplyMentions {
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
   hoverable?: boolean;
 }
 
diff --git a/src/components/pure-status.tsx b/src/components/pure-status.tsx
index 7135c690d..ff7c15805 100644
--- a/src/components/pure-status.tsx
+++ b/src/components/pure-status.tsx
@@ -18,7 +18,6 @@ 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 { EntityTypes, Entities } from 'soapbox/entity-store/entities.ts';
 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';
@@ -29,7 +28,8 @@ import { useReplyCompose } from 'soapbox/hooks/useReplyCompose.ts';
 import { useSettings } from 'soapbox/hooks/useSettings.ts';
 import { useStatusHidden } from 'soapbox/hooks/useStatusHidden.ts';
 import { normalizeStatus } from 'soapbox/normalizers/index.ts';
-import { Status } from 'soapbox/types/entities.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
+import { Status as LegacyStatus } from 'soapbox/types/entities.ts';
 import { emojifyText } from 'soapbox/utils/emojify.tsx';
 import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status.ts';
 
@@ -48,7 +48,7 @@ const messages = defineMessages({
 export interface IPureStatus {
   id?: string;
   avatarSize?: number;
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
   onClick?: () => void;
   muted?: boolean;
   hidden?: boolean;
@@ -126,7 +126,7 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
     }
   }, [overlay.current]);
 
-  const statusImmutable = normalizeStatus(status) as Status; // TODO: remove this line, it will be removed once all components in this file are pure.
+  const statusImmutable = normalizeStatus(status) as LegacyStatus; // TODO: remove this line, it will be removed once all components in this file are pure.
 
   const handleToggleMediaVisibility = (): void => {
     setShowMedia(!showMedia);
diff --git a/src/components/pure-translate-button.tsx b/src/components/pure-translate-button.tsx
index b5632e35d..3408da423 100644
--- a/src/components/pure-translate-button.tsx
+++ b/src/components/pure-translate-button.tsx
@@ -5,14 +5,14 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.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 { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
 interface IPureTranslateButton {
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
 }
 
 const PureTranslateButton: React.FC<IPureTranslateButton> = ({ status }) => {
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index 413b90ccf..e509222c5 100644
--- a/src/components/quoted-status.tsx
+++ b/src/components/quoted-status.tsx
@@ -7,8 +7,8 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useSettings } from 'soapbox/hooks/useSettings.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
 import EventPreview from './event-preview.tsx';
@@ -18,7 +18,7 @@ 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.ts';
+import type { Status as LegacyStatus } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
@@ -26,7 +26,7 @@ const messages = defineMessages({
 
 interface IQuotedStatus {
   /** The quoted status entity. */
-  status?: StatusEntity;
+  status?: LegacyStatus;
   /** Callback when cancelled (during compose). */
   onCancel?: Function;
   /** Whether the status is shown in the post composer. */
@@ -139,7 +139,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
               {status.media_attachments.size > 0 && (
                 <StatusMedia
-                  status={status.toJS() as EntityTypes[Entities.STATUSES]}
+                  status={status.toJS() as StatusEntity}
                   muted={compose}
                   showMedia={showMedia}
                   onToggleVisibility={handleToggleMediaVisibility}
diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 2712779e8..de1456df4 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -49,20 +49,20 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.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 { GroupRoles } from 'soapbox/schemas/group-member.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import toast from 'soapbox/toast.tsx';
 import copy from 'soapbox/utils/copy.ts';
 
 import GroupPopover from './groups/popover/group-popover.tsx';
 
 import type { Menu } from 'soapbox/components/dropdown-menu/index.ts';
-import type { Group, Status } from 'soapbox/types/entities.ts';
+import type { Group, Status as LegacyStatus } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
@@ -141,7 +141,7 @@ const messages = defineMessages({
 });
 
 interface IStatusActionBar {
-  status: Status;
+  status: LegacyStatus;
   expandable?: boolean;
   space?: 'sm' | 'md' | 'lg';
   statusActionButtonTheme?: 'default' | 'inverse';
@@ -827,7 +827,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
           />
         )}
 
-        <DropdownMenu items={menu} status={status.toJS() as EntityTypes[Entities.STATUSES]}>
+        <DropdownMenu items={menu} status={status.toJS() as StatusEntity}>
           <StatusActionButton
             title={intl.formatMessage(messages.more)}
             icon={dotsIcon}
diff --git a/src/components/status-media.tsx b/src/components/status-media.tsx
index 8d396e8f1..bfd5b79bf 100644
--- a/src/components/status-media.tsx
+++ b/src/components/status-media.tsx
@@ -4,16 +4,15 @@ import { Suspense } from 'react';
 import { openModal } from 'soapbox/actions/modals.ts';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs.tsx';
 import PreviewCard from 'soapbox/components/preview-card.tsx';
-import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 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 { Attachment } from 'soapbox/schemas/index.ts';
+import { Status as StatusEntity, Attachment } from 'soapbox/schemas/index.ts';
 
 interface IStatusMedia {
   /** Status entity to render media for. */
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
   /** Whether to display compact media. */
   muted?: boolean;
   /** Callback when compact media is clicked. */
diff --git a/src/components/status.tsx b/src/components/status.tsx
index 228dc224e..ccde634b8 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -16,11 +16,11 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 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 { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import { emojifyText } from 'soapbox/utils/emojify.tsx';
 import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status.ts';
 
@@ -33,7 +33,7 @@ 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.ts';
+import type { Status as LegacyStatus } from 'soapbox/types/entities.ts';
 
 // Defined in components/scrollable-list
 export type ScrollPosition = { height: number; top: number };
@@ -45,7 +45,7 @@ const messages = defineMessages({
 export interface IStatus {
   id?: string;
   avatarSize?: number;
-  status: StatusEntity;
+  status: LegacyStatus;
   onClick?: () => void;
   muted?: boolean;
   hidden?: boolean;
@@ -466,7 +466,7 @@ const Status: React.FC<IStatus> = (props) => {
                   {(quote || actualStatus.card || actualStatus.media_attachments.size > 0) && (
                     <Stack space={4}>
                       <StatusMedia
-                        status={actualStatus.toJS() as EntityTypes[Entities.STATUSES]}
+                        status={actualStatus.toJS() as StatusEntity}
                         muted={muted}
                         onClick={handleClick}
                         showMedia={showMedia}
diff --git a/src/components/statuses/pure-sensitive-content-overlay.tsx b/src/components/statuses/pure-sensitive-content-overlay.tsx
index b2b6d6895..ac4f83720 100644
--- a/src/components/statuses/pure-sensitive-content-overlay.tsx
+++ b/src/components/statuses/pure-sensitive-content-overlay.tsx
@@ -13,15 +13,14 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.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 { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import { emojifyText } from 'soapbox/utils/emojify.tsx';
 import { defaultMediaVisibility } from 'soapbox/utils/status.ts';
 
-
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -37,7 +36,7 @@ const messages = defineMessages({
 });
 
 interface IPureSensitiveContentOverlay {
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
   onToggleVisibility?(): void;
   visible?: boolean;
 }
diff --git a/src/features/admin/components/report-status.tsx b/src/features/admin/components/report-status.tsx
index 653da2bcf..8ff0d91e3 100644
--- a/src/features/admin/components/report-status.tsx
+++ b/src/features/admin/components/report-status.tsx
@@ -9,10 +9,10 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
-import type { AdminReport, Status } from 'soapbox/types/entities.ts';
+import type { AdminReport, Status as LegacyStatus } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   viewStatus: { id: 'admin.reports.actions.view_status', defaultMessage: 'View post' },
@@ -20,7 +20,7 @@ const messages = defineMessages({
 });
 
 interface IReportStatus {
-  status: Status;
+  status: LegacyStatus;
   report?: AdminReport;
 }
 
@@ -53,7 +53,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     <HStack space={2} alignItems='start'>
       <Stack space={2} className='overflow-hidden' grow>
         <StatusContent status={status} />
-        <StatusMedia status={status.toJS() as EntityTypes[Entities.STATUSES]}  />
+        <StatusMedia status={status.toJS() as StatusEntity}  />
       </Stack>
 
       <div className='flex-none'>
diff --git a/src/features/compose/components/reply-indicator.tsx b/src/features/compose/components/reply-indicator.tsx
index 7d12ae738..5c7bea75d 100644
--- a/src/features/compose/components/reply-indicator.tsx
+++ b/src/features/compose/components/reply-indicator.tsx
@@ -5,12 +5,12 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import { getTextDirection } from 'soapbox/utils/rtl.ts';
 
 interface IReplyIndicator {
   className?: string;
-  status?: EntityTypes[Entities.STATUSES];
+  status?: StatusEntity;
   onCancel?: () => void;
   hideActions: boolean;
 }
diff --git a/src/features/compose/containers/reply-indicator-container.ts b/src/features/compose/containers/reply-indicator-container.ts
index a0ba71397..b2399abc2 100644
--- a/src/features/compose/containers/reply-indicator-container.ts
+++ b/src/features/compose/containers/reply-indicator-container.ts
@@ -1,13 +1,14 @@
 import { connect } from 'react-redux';
 
 import { cancelReplyCompose } from 'soapbox/actions/compose.ts';
-import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import { makeGetStatus } from 'soapbox/selectors/index.ts';
 
 import ReplyIndicator from '../components/reply-indicator.tsx';
 
 import type { AppDispatch, RootState } from 'soapbox/store.ts';
-import type { Status } from 'soapbox/types/entities.ts';
+import type { Status as LegacyStatus } from 'soapbox/types/entities.ts';
+
 
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
@@ -17,7 +18,7 @@ const makeMapStateToProps = () => {
     const editing = !!state.compose.get(composeId)?.id;
 
     return {
-      status: (getStatus(state, { id: statusId }) as Status)?.toJS() as EntityTypes[Entities.STATUSES],
+      status: (getStatus(state, { id: statusId }) as LegacyStatus)?.toJS() as StatusEntity,
       hideActions: editing,
     };
   };
diff --git a/src/features/event/components/pure-event-action-button.tsx b/src/features/event/components/pure-event-action-button.tsx
index d2a9a0e19..598f4536e 100644
--- a/src/features/event/components/pure-event-action-button.tsx
+++ b/src/features/event/components/pure-event-action-button.tsx
@@ -5,9 +5,9 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
 import type { ButtonThemes } from 'soapbox/components/ui/useButtonStyles.ts';
 
@@ -17,7 +17,7 @@ const messages = defineMessages({
 });
 
 interface IPureEventAction {
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
   theme?: ButtonThemes;
 }
 
diff --git a/src/features/event/components/pure-event-date.tsx b/src/features/event/components/pure-event-date.tsx
index 59bcef9bb..6b5aed7a7 100644
--- a/src/features/event/components/pure-event-date.tsx
+++ b/src/features/event/components/pure-event-date.tsx
@@ -3,11 +3,10 @@ import { FormattedDate } from 'react-intl';
 
 import Icon from 'soapbox/components/icon.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
-import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
-
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
 interface IPureEventDate {
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
 }
 
 const PureEventDate: React.FC<IPureEventDate> = ({ status }) => {
diff --git a/src/features/event/event-information.tsx b/src/features/event/event-information.tsx
index 9d64356a4..461c275ca 100644
--- a/src/features/event/event-information.tsx
+++ b/src/features/event/event-information.tsx
@@ -15,16 +15,16 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 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 { Status as StatusEntity } from 'soapbox/schemas/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.ts';
+import type { Status as StatusLegacy } from 'soapbox/types/entities.ts';
 
 type RouteParams = { statusId: string };
 
@@ -36,7 +36,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   const dispatch = useAppDispatch();
   const getStatus = useCallback(makeGetStatus(), []);
 
-  const status = useAppSelector(state => getStatus(state, { id: params.statusId })) as StatusEntity;
+  const status = useAppSelector(state => getStatus(state, { id: params.statusId })) as StatusLegacy;
 
   const { tileServer } = useSoapboxConfig();
   const { displayMedia } = useSettings();
@@ -209,7 +209,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
       )}
 
       <StatusMedia
-        status={status.toJS() as EntityTypes[Entities.STATUSES]}
+        status={status.toJS() as StatusEntity}
         showMedia={showMedia}
         onToggleVisibility={handleToggleMediaVisibility}
       />
diff --git a/src/features/status/components/detailed-status.tsx b/src/features/status/components/detailed-status.tsx
index 2f0c82053..e4d471a4e 100644
--- a/src/features/status/components/detailed-status.tsx
+++ b/src/features/status/components/detailed-status.tsx
@@ -16,19 +16,19 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container.tsx';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 import { getActualStatus } from 'soapbox/utils/status.ts';
 
 import StatusInteractionBar from './status-interaction-bar.tsx';
 
-import type { Group, Status as StatusEntity } from 'soapbox/types/entities.ts';
+import type { Group, Status as LegacyStatus } from 'soapbox/types/entities.ts';
 
 interface IDetailedStatus {
-  status: StatusEntity;
+  status: LegacyStatus;
   showMedia?: boolean;
   withMedia?: boolean;
-  onOpenCompareHistoryModal: (status: StatusEntity) => void;
+  onOpenCompareHistoryModal: (status: LegacyStatus) => void;
   onToggleMediaVisibility: () => void;
 }
 
@@ -163,7 +163,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             {(withMedia && (quote || actualStatus.card || actualStatus.media_attachments.size > 0)) && (
               <Stack space={4}>
                 <StatusMedia
-                  status={actualStatus.toJS() as EntityTypes[Entities.STATUSES]}
+                  status={actualStatus.toJS() as StatusEntity}
                   showMedia={showMedia}
                   onToggleVisibility={onToggleMediaVisibility}
                 />
diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 9aacd9b3e..4cbeca94a 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -4,15 +4,15 @@ import { spring } from 'react-motion';
 
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
-import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
 import Motion from '../../util/optional-motion.tsx';
 
 import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu/index.ts';
 
 interface IActionsModal {
-  status: EntityTypes[Entities.STATUSES];
+  status: StatusEntity;
   actions: Menu;
   onClick: () => void;
   onClose: () => void;
diff --git a/src/features/ui/components/modals/boost-modal.tsx b/src/features/ui/components/modals/boost-modal.tsx
index afe841a3c..730586dcd 100644
--- a/src/features/ui/components/modals/boost-modal.tsx
+++ b/src/features/ui/components/modals/boost-modal.tsx
@@ -5,10 +5,10 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
 import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator.tsx';
+import { Status as StatusEntity } from 'soapbox/schemas/index.ts';
 
-import type { Status as StatusEntity } from 'soapbox/types/entities.ts';
+import type { Status as LegacyStatus } from 'soapbox/types/entities.ts';
 
 const messages = defineMessages({
   cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
@@ -16,8 +16,8 @@ const messages = defineMessages({
 });
 
 interface IBoostModal {
-  status: StatusEntity;
-  onReblog: (status: StatusEntity) => void;
+  status: LegacyStatus;
+  onReblog: (status: LegacyStatus) => void;
   onClose: () => void;
 }
 
@@ -38,7 +38,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
       confirmationText={intl.formatMessage(buttonText)}
     >
       <Stack space={4}>
-        <ReplyIndicator status={status.toJS() as EntityTypes[Entities.STATUSES]} hideActions />
+        <ReplyIndicator status={status.toJS() as StatusEntity} hideActions />
 
         <Text>
           {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 59c3a6763..62573f1b3 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -19,7 +19,6 @@ 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 { Entities, EntityTypes } from 'soapbox/entity-store/entities.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';
@@ -27,8 +26,8 @@ import Video from 'soapbox/features/video/index.tsx';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { userTouching } from 'soapbox/is-mobile.ts';
 import { normalizeStatus } from 'soapbox/normalizers/index.ts';
-import { Attachment } from 'soapbox/schemas/index.ts';
-import { Status } from 'soapbox/types/entities.ts';
+import { Status as StatusEntity, Attachment } from 'soapbox/schemas/index.ts';
+import { Status as LegacyStatus } from 'soapbox/types/entities.ts';
 import { getActualStatus } from 'soapbox/utils/status.ts';
 
 import ImageLoader from '../image-loader.tsx';
@@ -56,7 +55,7 @@ const containerStyle: React.CSSProperties = {
 
 interface IMediaModal {
   media: readonly Attachment[];
-  status?: EntityTypes[Entities.STATUSES];
+  status?: StatusEntity;
   index: number;
   time?: number;
   onClose(): void;
@@ -343,7 +342,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                 className={clsx('absolute bottom-2 flex w-full transition-opacity', navigationHiddenClassName)}
               >
                 <StatusActionBar
-                  status={normalizeStatus(actualStatus) as Status}
+                  status={normalizeStatus(actualStatus) as LegacyStatus}
                   space='md'
                   statusActionButtonTheme='inverse'
                 />
@@ -361,7 +360,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
             }
           >
             <Thread
-              status={normalizeStatus(actualStatus) as Status}
+              status={normalizeStatus(actualStatus) as LegacyStatus}
               withMedia={false}
               useWindowScroll={false}
               itemClassName='px-4'

From 65f03707e4fc0cceab135e295a830a89881b4b76 Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 11 Dec 2024 16:34:56 -0300
Subject: [PATCH 7/8] refactor: type cast, remove question marks

---
 src/components/media-gallery.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx
index 9b59bab2d..dfa824542 100644
--- a/src/components/media-gallery.tsx
+++ b/src/components/media-gallery.tsx
@@ -44,7 +44,7 @@ const withinLimits = (aspectRatio: number) => {
 };
 
 const shouldLetterbox = (attachment: Attachment): boolean => {
-  const aspectRatio = 'meta' in attachment && 'original' in attachment.meta && (attachment)?.meta?.original?.aspect;
+  const aspectRatio = 'meta' in attachment && 'original' in attachment.meta && (attachment).meta.original?.aspect;
 
   if (!aspectRatio) return true;
 
@@ -158,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?.pleroma?.mime_type as string] || paperclipIcon}
+        src={MIMETYPE_ICONS[attachment?.pleroma?.mime_type!] || paperclipIcon}
       />
     );
 
@@ -322,7 +322,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
 
   const getSizeDataSingle = (): SizeData => {
     const w = width || defaultWidth;
-    const aspectRatio = 'meta' in media[0] && 'original' in media[0].meta && (media[0])?.meta?.original?.aspect;
+    const aspectRatio = 'meta' in media[0] && 'original' in media[0].meta && (media[0])?.meta.original?.aspect;
 
     const getHeight = () => {
       if (!aspectRatio) return w * 9 / 16;
@@ -348,7 +348,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     let itemsDimensions: Dimensions[] = [];
 
     const ratios = Array(size).fill(null).map((_, i) =>
-      'meta' in media[i] && 'original' in media[i].meta && typeof media[i].meta?.original?.aspect === 'number'
+      'meta' in media[i] && 'original' in media[i].meta && typeof media[i].meta.original?.aspect === 'number'
         ? media[i].meta.original.aspect
         : undefined as unknown as number, // NOTE: the old logic returned undefined anyways, and the implementation of the functions below call 'isNaN', such as the 'isPortrait' function
     );

From ca70e6e6fa459a3b8d1ade216578bae5e89ce464 Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 11 Dec 2024 16:38:08 -0300
Subject: [PATCH 8/8] refactor: get rid of EntityTypes[Entities.STATUSES]

---
 src/api/hooks/statuses/useBookmarks.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/hooks/statuses/useBookmarks.ts b/src/api/hooks/statuses/useBookmarks.ts
index 122de7f28..8235d917c 100644
--- a/src/api/hooks/statuses/useBookmarks.ts
+++ b/src/api/hooks/statuses/useBookmarks.ts
@@ -1,8 +1,8 @@
-import { EntityTypes, Entities } from 'soapbox/entity-store/entities.ts';
+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 { statusSchema } from 'soapbox/schemas/status.ts';
+import { Status as StatusEntity, statusSchema } from 'soapbox/schemas/index.ts';
 
 /**
  * Get all the statuses the user has bookmarked.
@@ -14,7 +14,7 @@ function useBookmarks() {
   const api = useApi();
   const features = useFeatures();
 
-  const { entities, ...result } = useEntities<EntityTypes[Entities.STATUSES]>(
+  const { entities, ...result } = useEntities<StatusEntity>(
     [Entities.STATUSES, 'bookmarks'],
     () => api.get('/api/v1/bookmarks'),
     { enabled: features.bookmarks, schema: statusSchema },