MediaAttachmentGrid: add a box to each item

src/timelines/RegularToot.tsx

@@ -47,7 +47,7 @@ type TootActionGroupProps<T extends mastodon.v1.Status> = {
   ) => void;
 };
 
-type TootCardProps = {
+type RegularTootProps = {
   status: mastodon.v1.Status;
   actionable?: boolean;
   evaluated?: boolean;
@@ -235,7 +235,7 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  * You can extract the intent from the attributes of the "actionable" element.
  * The action type is the dataset's `action`.
  */
-const RegularToot: Component<TootCardProps> = (props) => {
+const RegularToot: Component<RegularTootProps> = (props) => {
   let rootRef: HTMLElement;
   const [managed, managedActionGroup, rest] = splitProps(
     props,
@@ -293,7 +293,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
 
   return (
     <>
-      <section
+      <article
         classList={{
           [tootStyle.toot]: true,
           [tootStyle.expanded]: managed.evaluated,
@@ -343,7 +343,10 @@ const RegularToot: Component<TootCardProps> = (props) => {
           <PreviewCard src={toot().card!} />
         </Show>
         <Show when={toot().mediaAttachments.length > 0}>
-          <MediaAttachmentGrid attachments={toot().mediaAttachments} />
+          <MediaAttachmentGrid
+            attachments={toot().mediaAttachments}
+            sensitive={toot().sensitive}
+          />
         </Show>
         <Show when={managed.actionable}>
           <Divider
@@ -352,7 +355,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
           />
           <TootActionGroup value={toot()} {...managedActionGroup} />
         </Show>
-      </section>
+      </article>
     </>
   );
 };