Feature: PhotoSwipe lightbox for post editor photo preview

src/TabbedRoutes.tsx

@@ -211,8 +211,8 @@ export default function TabbedRoutes() {
   })();
 
   return (
-    <PageContextProvider value={pageContextValue}>
-      <GalleryProvider>
+    <GalleryProvider>
+      <PageContextProvider value={pageContextValue}>
         {/* TODO key={} resets the tab route stack whenever your instance changes. */}
         {/* In the future, it would be really cool if we could resolve object urls to pick up where you left off */}
         {/* But this isn't trivial with needing to rewrite URLs... */}
@@ -380,8 +380,8 @@ export default function TabbedRoutes() {
 
           <TabBar slot="bottom" />
         </IonTabs>
-      </GalleryProvider>
-    </PageContextProvider>
+      </PageContextProvider>
+    </GalleryProvider>
   );
 }
 

src/features/gallery/GalleryProvider.tsx

@@ -109,6 +109,10 @@ export default function GalleryProvider({ children }: GalleryProviderProps) {
         showHideAnimationType: animationType ?? "fade",
         zoom: false,
         bgOpacity: 1,
+        // copy any CSS classes beginning with 'pswp' from the image
+        mainClass: [...img.classList]
+          .filter((cls) => cls.match(/^pswp/))
+          .join(" "),
         // Put in ion-app element so share IonActionSheet is on top
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         appendToEl: document.querySelector("ion-app")!,

src/features/post/new/PhotoPreview.tsx

@@ -1,12 +1,15 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { IonSpinner } from "@ionic/react";
+import GalleryImg from "../../gallery/GalleryImg";
 
 const Container = styled.div`
   position: relative;
 `;
 
-const Img = styled.img<{ loadingImage: boolean }>`
+const PreviewImg = styled(GalleryImg, {
+  shouldForwardProp: (prop) => prop !== "loadingImage",
+})<{ loadingImage: boolean }>`
   max-width: 100px;
   max-height: 100px;
   padding: 1rem;
@@ -28,17 +31,17 @@ const OverlaySpinner = styled(IonSpinner)`
 interface PhotoPreviewProps {
   src: string;
   loading: boolean;
-  onClick?: () => void;
 }
 
-export default function PhotoPreview({
-  src,
-  loading,
-  onClick,
-}: PhotoPreviewProps) {
+export default function PhotoPreview({ src, loading }: PhotoPreviewProps) {
   return (
     <Container>
-      <Img src={src} onClick={onClick} loadingImage={loading} />
+      <PreviewImg
+        src={src}
+        loadingImage={loading}
+        animationType="zoom"
+        className="pswp-topmost"
+      />
       {loading && <OverlaySpinner />}
     </Container>
   );

src/features/post/new/PostEditorRoot.tsx

@@ -452,7 +452,7 @@ export default function PostEditorRoot({
                 {photoPreviewURL && (
                   <IonItem>
                     <PhotoPreview
-                      src={photoPreviewURL}
+                      src={photoUploading ? photoPreviewURL : photoUrl}
                       loading={photoUploading}
                     />
                   </IonItem>

src/index.css

@@ -171,6 +171,10 @@ ion-action-sheet ion-icon {
   --pswp-root-z-index: 100;
 }
 
+.pswp-topmost {
+  --pswp-root-z-index: 100000;
+}
+
 .ion-content-scroll-host {
   overflow-y: auto;
 }