Tap media to toggle carousel controls

src/app.css

@@ -505,6 +505,9 @@ a.mention span {
   text-align: center;
   pointer-events: none;
 }
+:is(.carousel-top-controls, .carousel-controls)[hidden] {
+  opacity: 0;
+}
 
 button.carousel-button,
 button.carousel-dot {
@@ -549,6 +552,9 @@ button.carousel-dot[disabled].active {
     transform: translateY(100%);
     transition: transform 0.2s ease-in-out;
   }
+  :is(.carousel-top-controls, .carousel-controls)[hidden] {
+    opacity: 1;
+  }
   .carousel:hover + .carousel-top-controls,
   .carousel:hover + .carousel-top-controls + .carousel-controls,
   .carousel-top-controls:hover,

src/components/status.jsx

@@ -1268,6 +1268,8 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
     }
   }, 100);
 
+  const [showControls, setShowControls] = useState(false);
+
   return (
     <>
       <div
@@ -1301,13 +1303,18 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
               root={carouselRef.current}
               threshold={1}
               onChange={(inView) => onSnap(inView, i)}
+              onClick={(e) => {
+                if (e.target !== e.currentTarget) {
+                  setShowControls(!showControls);
+                }
+              }}
             >
               <Media media={media} showOriginal />
             </InView>
           );
         })}
       </div>
-      <div class="carousel-top-controls">
+      <div class="carousel-top-controls" hidden={!showControls}>
         <span />
         <button
           type="button"
@@ -1318,7 +1325,7 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
         </button>
       </div>
       {mediaAttachments?.length > 1 && (
-        <div class="carousel-controls">
+        <div class="carousel-controls" hidden={!showControls}>
           <button
             type="button"
             class="carousel-button plain2"