Merge branch 'main' into fix-index-plus-button

src/Components/Profile/Subcomponents/GalleryForm.spec.tsx

@@ -67,6 +67,7 @@ describe('GalleryForm', () => {
           id: '1',
           width: 800,
           height: 600,
+          type: 'image/jpeg',
         },
       },
       {
@@ -74,6 +75,7 @@ describe('GalleryForm', () => {
           id: '2',
           width: 1024,
           height: 768,
+          type: 'image/jpeg',
         },
       },
     ]

src/Components/Profile/Subcomponents/GalleryForm.tsx

@@ -42,6 +42,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
         height,
         asset: await appState.assetsApi.upload(compressedFile, file.name),
         name: file.name,
+        type: file.type,
       }
     })
 
@@ -56,6 +57,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
               id: upload.asset.id,
               width: upload.width,
               height: upload.height,
+              type: upload.type,
             },
           },
         ],
@@ -68,6 +70,7 @@ export const GalleryForm = ({ state, setState }: Props) => {
     onDrop: upload,
     accept: {
       'image/jpeg': [],
+      'image/png': [],
     },
   })
 

src/Components/Profile/Subcomponents/GalleryView.tsx

@@ -6,15 +6,28 @@ import { useAppState } from '#components/AppShell/hooks/useAppState'
 
 import type { Item } from '#types/Item'
 
+const extensionMap = new Map([
+  ['image/jpeg', '.jpg'],
+  ['image/png', '.png'],
+])
+
+const getExtension = (type: string) => {
+  const extension = extensionMap.get(type)
+
+  if (extension) return extension
+
+  throw new Error(`Unsupported file type: ${type}`)
+}
+
 export const GalleryView = ({ item }: { item: Item }) => {
   const [index, setIndex] = useState(-1)
   const appState = useAppState()
   const images =
-    item.gallery?.map((i, j) => ({
-      src: appState.assetsApi.url + `${i.directus_files_id.id}.jpg`,
-      width: i.directus_files_id.width,
-      height: i.directus_files_id.height,
-      index: j,
+    item.gallery?.map(({ directus_files_id: { id, type, width, height } }, index) => ({
+      src: `${appState.assetsApi.url}${id}${getExtension(type)}`,
+      width,
+      height,
+      index,
     })) ?? []
 
   if (images.length > 0)

src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap

@@ -69,7 +69,7 @@ exports[`GalleryForm > with previous images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
@@ -149,7 +149,7 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
@@ -193,7 +193,7 @@ exports[`GalleryForm > without previous images > renders 1`] = `
       tabindex="0"
     >
       <input
-        accept="image/jpeg"
+        accept="image/jpeg,image/png"
         data-testid="gallery-upload-input"
         multiple=""
         style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"

src/assets/css/gallery.css

@@ -0,0 +1,3 @@
+.yarl__portal_open {
+    z-index: 10050;
+}

src/css.tsx

@@ -15,3 +15,4 @@ import '#assets/css/leaflet.css'
 import '#assets/css/color-picker.css'
 import '#assets/css/markdown.css'
 import '#assets/css/tiptap.css'
+import '#assets/css/gallery.css'

src/types/Item.d.ts

@@ -12,6 +12,7 @@ interface GalleryItem {
     id: string
     width: number
     height: number
+    type: string
   }
 }