Add support for spoilers on images (MSC4193) (#2212)

* Add support for MSC4193: Spoilers on Media

* Clarify variable names and wording

* Restore list atom

* Improve spoilered image UX with autoload off

* Use `aria-pressed` to indicate attachment spoiler state

* Improve spoiler button tooltip wording, keep reveal button from conflicting with load errors

src/app/state/room/roomInputDrafts.ts

@@ -3,22 +3,29 @@ import { atomFamily } from 'jotai/utils';
 import { Descendant } from 'slate';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { IEventRelation } from 'matrix-js-sdk';
-import { TListAtom, createListAtom } from '../list';
 import { createUploadAtomFamily } from '../upload';
 import { TUploadContent } from '../../utils/matrix';
+import { createListAtom } from '../list';
 
-export const roomUploadAtomFamily = createUploadAtomFamily();
+export type TUploadMetadata = {
+  markedAsSpoiler: boolean;
+};
 
 export type TUploadItem = {
   file: TUploadContent;
   originalFile: TUploadContent;
+  metadata: TUploadMetadata;
   encInfo: EncryptedAttachmentInfo | undefined;
 };
 
-export const roomIdToUploadItemsAtomFamily = atomFamily<string, TListAtom<TUploadItem>>(
+export type TUploadListAtom = ReturnType<typeof createListAtom<TUploadItem>>;
+
+export const roomIdToUploadItemsAtomFamily = atomFamily<string, TUploadListAtom>(
   createListAtom
 );
 
+export const roomUploadAtomFamily = createUploadAtomFamily();
+
 export type RoomIdToMsgAction =
   | {
       type: 'PUT';