chore(): update gallery section on edit extension form

extensions/apps/extensions/src/components/pages/extension-edit-page/step2-page.tsx

@@ -1,22 +1,11 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import ExtensionEditStep2Form from '@akashaorg/design-system-components/lib/components/ExtensionEditStep2Form';
-import {
-  getMediaUrl,
-  saveMediaFile,
-  transformSource,
-  useAkashaStore,
-  useRootComponentProps,
-} from '@akashaorg/ui-awf-hooks';
-import {
-  GalleryImage,
-  NotificationEvents,
-  NotificationTypes,
-  Extension,
-} from '@akashaorg/typings/lib/ui';
+import { useAkashaStore, transformSource, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
+import { NotificationEvents, NotificationTypes, Extension } from '@akashaorg/typings/lib/ui';
 import { DRAFT_EXTENSIONS } from '../../../constants';
 import { useAtom } from 'jotai';
 import { AtomContext, FormData } from './main-page';
@@ -76,76 +65,23 @@ export const ExtensionEditStep2Page: React.FC<ExtensionEditStep2PageProps> = ({
 
   const [, setForm] = useAtom<FormData>(useContext(AtomContext));
 
-  const [uploading, setUploading] = useState(false);
-  const [galleryImages, setGalleryImages] = useState<GalleryImage[]>(
-    formDefault?.gallery?.map(img => {
-      const imgWithGateway = transformSource(img);
-      return {
-        ...img,
-        src: img?.src,
-        displaySrc: imgWithGateway?.src,
-        size: {
-          height: img?.height,
-          width: img?.width,
-        },
-      };
-    }),
+  const galleryImages = useMemo(
+    () =>
+      formDefault?.gallery?.map(img => {
+        const imgWithGateway = transformSource(img);
+        return {
+          ...img,
+          src: img?.src,
+          displaySrc: imgWithGateway?.src,
+          size: {
+            height: img?.height,
+            width: img?.width,
+          },
+        };
+      }),
+    [formDefault?.gallery],
   );
 
-  const onUpload = async (image: File | string, isUrl?: boolean) => {
-    if (!image) return null;
-    setUploading(true);
-
-    const imageName = typeof image === 'string' ? image : image.name || 'extension-gallery-image';
-
-    try {
-      const mediaFile = await saveMediaFile({
-        name: imageName,
-        isUrl: isUrl || false,
-        content: image,
-      });
-      setUploading(false);
-      if (!mediaFile) return null;
-
-      const mediaUri = `ipfs://${mediaFile.CID}`;
-
-      const mediaUrl = getMediaUrl(mediaUri);
-
-      const imageObj = {
-        size: { height: mediaFile.size.height, width: mediaFile.size.width },
-        displaySrc: mediaUrl.originLink || mediaUrl.fallbackLink,
-        src: mediaUri,
-        name: imageName,
-        originalSrc: typeof image === 'string' ? image : URL.createObjectURL(image),
-      };
-
-      return imageObj;
-    } catch (error) {
-      setUploading(false);
-      showErrorNotification(t("The image wasn't uploaded correctly. Please try again!"));
-      return null;
-    }
-  };
-
-  const uploadNewImage = async (image: File | string, isUrl?: boolean) => {
-    const uploadedImage = await onUpload(image, isUrl);
-    setGalleryImages(prev => [
-      ...prev,
-      {
-        name: uploadedImage?.name,
-        src: uploadedImage?.src,
-        displaySrc: uploadedImage?.displaySrc,
-        originalSrc: uploadedImage?.originalSrc,
-        size: uploadedImage?.size,
-      },
-    ]);
-  };
-
-  const handleDeleteImage = (element: GalleryImage) => {
-    const newImages = galleryImages.filter(image => image.src !== element.src);
-    setGalleryImages(newImages);
-  };
-
   return (
     <Stack spacing="gap-y-4">
       <Stack padding={16}>
@@ -158,9 +94,9 @@ export const ExtensionEditStep2Page: React.FC<ExtensionEditStep2PageProps> = ({
         nsfwDescriptionLabel={t('Once you mark it as NSFW, you can’t change it back')}
         descriptionFieldLabel={t('Description')}
         descriptionPlaceholderLabel={t('What does this extension do?')}
-        galleryFieldLabel={t('Gallery')}
+        galleryFieldLabel={t('Extension Gallery')}
         galleryDescriptionLabel={t(
-          'Having a gallery to show off the extension will increase installs',
+          'The first three images, based on your order, will be featured on the main extension card.',
         )}
         usefulLinksFieldLabel={t('Useful Links')}
         usefulLinksDescriptionLabel={t(
@@ -169,11 +105,13 @@ export const ExtensionEditStep2Page: React.FC<ExtensionEditStep2PageProps> = ({
         linkTitleLabel={t('Link')}
         linkPlaceholderLabel={t('Link title')}
         addLabel={t('Add')}
-        uploading={uploading}
-        handleImageUpload={uploadNewImage}
-        handleImageDelete={handleDeleteImage}
+        uploadAndEditLabel={t('Upload & Edit')}
+        imagesUploadedLabel={t('images uploaded')}
         images={galleryImages}
         defaultValues={formDefault}
+        handleMediaClick={() => {
+          //todo
+        }}
         cancelButton={{
           label: t('Back'),
           disabled: false,

extensions/apps/notifications/src/components/pages/customise-notification-page.tsx

@@ -8,12 +8,7 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
-  IMenuItem,
-  MenuItemAreaType,
-  NotificationEvents,
-  NotificationTypes,
-} from '@akashaorg/typings/lib/ui';
+import { MenuItemAreaType, NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
 import {
   useRootComponentProps,
   useSaveSettings,

libs/design-system-components/src/components/EditProfile/index.tsx

@@ -91,7 +91,7 @@ const EditProfile: React.FC<EditProfileProps> = ({
     if (isValid && isFormDirty) {
       saveButton.handleClick({
         ...formValues,
-        links: formValues.links?.map(link => link.href)?.filter(link => link) || [],
+        links: formValues.links?.map(link => link.href?.trim())?.filter(link => link) || [],
       });
     }
   };

libs/design-system-components/src/components/ExtensionEditStep2Form/Gallery/index.tsx

@@ -1,93 +1,100 @@
-import React, { RefObject, useRef } from 'react';
-
+import React, { Fragment, useState } from 'react';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Image from '@akashaorg/design-system-core/lib/components/Image';
-import Icon from '@akashaorg/design-system-core/lib/components/Icon';
-import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
-import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import ImageOverlay from '../../ImageOverlay';
+import { PlusIcon } from '@heroicons/react/24/outline';
 import { type GalleryImage } from '@akashaorg/typings/lib/ui';
 
+const MAX_IMAGES_DISPLAY = 3;
+const MAX_IMAGES = 16;
+
 export type GalleryProps = {
-  galleryFieldLabel?: string;
-  galleryDescriptionLabel?: string;
-  addLabel?: string;
+  galleryFieldLabel: string;
+  galleryDescriptionLabel: string;
+  addLabel: string;
+  uploadAndEditLabel: string;
+  imagesUploadedLabel: string;
   images: GalleryImage[];
-  handleImageUpload?: (image: File) => void;
-  handleImageDelete?: (image: GalleryImage) => void;
-  uploading?: boolean;
+  handleMediaClick: () => void;
 };
 
 export const Gallery: React.FC<GalleryProps> = props => {
   const {
     galleryFieldLabel,
     galleryDescriptionLabel,
     addLabel,
+    uploadAndEditLabel,
+    imagesUploadedLabel,
     images,
-    uploading,
-    handleImageUpload,
-    handleImageDelete,
+    handleMediaClick,
   } = props;
 
-  const uploadInputRef: RefObject<HTMLInputElement> = useRef(null);
-  const imageUploadDisabled = React.useMemo(() => {
-    return images?.length > 15 || uploading;
-  }, [images, uploading]);
+  const galleryHasImages = images?.length > 0;
+  const slicedImagesArr = galleryHasImages ? images.slice(0, MAX_IMAGES_DISPLAY) : [];
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [selectedImage, setSelectedImage] = useState<GalleryImage>(null);
+
+  const handleCloseOverlay = () => {
+    setShowOverlay(false);
+  };
 
-  const handleMediaClick = () => {
-    if (uploadInputRef.current && !imageUploadDisabled) {
-      uploadInputRef.current.click();
-    }
+  const handleImageClick = (image: GalleryImage) => {
+    setShowOverlay(true);
+    setSelectedImage(image);
   };
 
   return (
-    <Stack>
-      <Stack spacing="gap-y-1" direction="column">
+    <Stack spacing="gap-y-4" direction="column">
+      <Stack spacing="gap-y-2" direction="column">
         <Stack direction="row" spacing="gap-x-2" justify="between" align="center">
-          <Text variant="h6">{galleryFieldLabel}</Text>
+          <Text variant="h6" as="label">
+            {galleryFieldLabel}
+          </Text>
           <Button
             variant="text"
-            icon={<PlusIcon />}
-            iconDirection="left"
-            label={addLabel}
+            {...(!galleryHasImages && { icon: <PlusIcon />, iconDirection: 'left' })}
+            label={galleryHasImages ? uploadAndEditLabel : addLabel}
             onClick={handleMediaClick}
           />
         </Stack>
         <Text variant="body2" color={{ light: 'grey4', dark: 'grey6' }} weight="light">
           {galleryDescriptionLabel}
         </Text>
       </Stack>
-      {images?.map((imageObj, index) => (
-        <Stack key={index} direction="row" justify="between">
-          <Stack direction="row" align="center" spacing="gap-1">
-            <Image
-              alt={imageObj.name}
-              src={imageObj.originalSrc || imageObj.displaySrc || imageObj.src}
-              customStyle="object-contain w-8 h-8 rounded-lg"
-            />
-            <Text>{imageObj.name || `uploaded-image-${index + 1}`}</Text>
-          </Stack>
-          <button onClick={() => handleImageDelete(imageObj)}>
-            <Icon
-              size="md"
-              color={{ light: 'errorLight', dark: 'errorDark' }}
-              icon={<TrashIcon />}
-            />
-          </button>
+      {galleryHasImages && (
+        <Stack direction="row" spacing="gap-x-2" customStyle="sm:gap-x-6">
+          {slicedImagesArr.map((image, index) => (
+            <Fragment key={index}>
+              <Image
+                alt={image.name}
+                src={image.originalSrc || image.displaySrc || image.src}
+                onClick={() => handleImageClick(image)}
+                customStyle="object-contain w-[10.625rem] h-[10.625rem] object-cover rounded-lg cursor-pointer"
+              />
+              {showOverlay && (
+                <ImageOverlay
+                  images={slicedImagesArr.map(image => ({
+                    name: image.name,
+                    size: image.size,
+                    src: image.originalSrc || image.displaySrc || image.src,
+                  }))}
+                  clickedImg={{
+                    name: selectedImage.name,
+                    size: selectedImage.size,
+                    src: selectedImage.originalSrc || selectedImage.displaySrc || selectedImage.src,
+                  }}
+                  closeModal={handleCloseOverlay}
+                />
+              )}
+            </Fragment>
+          ))}
         </Stack>
-      ))}
-      {uploading && <Spinner />}
-      <input
-        ref={uploadInputRef}
-        type="file"
-        accept="image/png, image/jpeg, image/webp"
-        onChange={e => {
-          handleImageUpload(e.target.files[0]);
-          uploadInputRef.current.value = '';
-        }}
-        hidden
-      />
+      )}
+      <Text variant="footnotes2" color={{ light: 'grey4', dark: 'grey6' }} weight="normal">
+        {images?.length ?? 0}/{MAX_IMAGES} {imagesUploadedLabel}
+      </Text>
     </Stack>
   );
 };

libs/design-system-components/src/components/ExtensionEditStep2Form/UsefulLinks/index.tsx

@@ -40,7 +40,9 @@ export const UsefulLinks: React.FC<UsefulLinksProps> = ({
     <Stack direction="column" spacing="gap-y-4" customStyle={customStyle}>
       <Stack spacing="gap-y-1" direction="column">
         <Stack direction="row" spacing="gap-x-2" justify="between" align="center">
-          <Text variant="h6">{usefulLinksTitleLabel}</Text>
+          <Text variant="h6" as="label">
+            {usefulLinksTitleLabel}
+          </Text>
           <Button
             variant="text"
             icon={<PlusIcon />}

libs/design-system-components/src/components/ExtensionEditStep2Form/index.tsx

@@ -33,13 +33,10 @@ export type ExtensionEditStep2FormProps = {
   nsfwDescriptionLabel?: string;
   descriptionFieldLabel?: string;
   descriptionPlaceholderLabel?: string;
-  galleryFieldLabel?: string;
-  galleryDescriptionLabel?: string;
   usefulLinksFieldLabel?: string;
   usefulLinksDescriptionLabel?: string;
   linkTitleLabel?: string;
   linkPlaceholderLabel?: string;
-  addLabel?: string;
   defaultValues?: ExtensionEditStep2FormValues;
   cancelButton: ButtonType;
   nextButton: {
@@ -64,10 +61,10 @@ const ExtensionEditStep2Form: React.FC<ExtensionEditStep2FormProps> = props => {
     linkTitleLabel,
     linkPlaceholderLabel,
     addLabel,
-    handleImageDelete,
-    handleImageUpload,
-    uploading,
+    uploadAndEditLabel,
+    imagesUploadedLabel,
     images,
+    handleMediaClick,
   } = props;
 
   const {
@@ -142,10 +139,10 @@ const ExtensionEditStep2Form: React.FC<ExtensionEditStep2FormProps> = props => {
             galleryFieldLabel={galleryFieldLabel}
             galleryDescriptionLabel={galleryDescriptionLabel}
             addLabel={addLabel}
+            uploadAndEditLabel={uploadAndEditLabel}
+            imagesUploadedLabel={imagesUploadedLabel}
             images={images}
-            handleImageUpload={handleImageUpload}
-            handleImageDelete={handleImageDelete}
-            uploading={uploading}
+            handleMediaClick={handleMediaClick}
           />
           <Divider />
 

libs/design-system-components/src/components/ImageOverlay/index.tsx

@@ -46,13 +46,13 @@ const ImageOverlay: React.FC<IImageOverlay> = props => {
   };
 
   const handlePrevImg = React.useCallback(() => {
-    const currImgIndex = images.indexOf(currentImg);
+    const currImgIndex = images.findIndex(image => image.src === currentImg.src);
     const prevIndex = currImgIndex > 0 ? images[currImgIndex - 1] : images[images.length - 1];
     setCurrentImg(prevIndex);
   }, [currentImg, images]);
 
   const handleNextImg = React.useCallback(() => {
-    const currImgIndex = images.indexOf(currentImg);
+    const currImgIndex = images.findIndex(image => image.src === currentImg.src);
     const nextIndex = currImgIndex < images.length - 1 ? images[currImgIndex + 1] : images[0];
     setCurrentImg(nextIndex);
   }, [currentImg, images]);