Merge pull request #27 from dappforce/dev/epic

Add moderation page
dappforce · Aug 14, 2024 · ef22be5 · ef22be5
2 parents 6215fa2 + a81d4fc
commit ef22be5
Show file tree

Hide file tree

Showing 35 changed files with 1,152 additions and 155 deletions.
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
@@ -96,7 +96,7 @@ jobs:
           file: docker/Dockerfile
           push: true
           build-args: |
-            GH_NEXT_PUBLIC_IS_MAINTENANCE=true
+            GH_NEXT_PUBLIC_IS_MAINTENANCE=false
             GH_NEXT_PUBLIC_AMP_ID=2ecd0305eaa641e48ef9a0fd6ab8a923
             GH_NEXT_PUBLIC_GA_ID=fake
             GH_IPFS_WRITE_URL=https://gw-seattle.crustcloud.io
@@ -129,8 +129,8 @@ jobs:
             # with base path
             GH_NEXTAUTH_URL=https://${{ env.name }}.subsocial.network/c/api/auth
             GH_NEXT_PUBLIC_BASE_PATH=/c
-            GH_NEXT_PUBLIC_TELEGRAM_BOT_ID=6342977780
-            GH_NEXT_PUBLIC_TELEGRAM_BOT_ID=subsocial_staging_bot
+            GH_NEXT_PUBLIC_TELEGRAM_BOT_ID=1960764016
+            GH_NEXT_PUBLIC_TELEGRAM_BOT_USERNAME=subsocial_staging_bot
             GH_NEXT_PUBLIC_NEYNAR_CLIENT_ID=e8dc01b0-046c-4698-98ac-05432050961d
             GH_FRAMES_SECRET=JG/W96svVHQ3bdaEKWm1h8xJXqxDtqZ6t7tKCZNWhh0=
           target: runner

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "@dicebear/core": "^5.3.4",
     "@ethersproject/hash": "^5.7.0",
     "@floating-ui/react": "^0.26.0",
-    "@headlessui/react": "^1.7.11",
+    "@headlessui/react": "2.1",
     "@hookform/resolvers": "^3.1.1",
     "@khmyznikov/pwa-install": "^0.2.5",
     "@kiltprotocol/augment-api": "^0.34.0",

diff --git a/src/components/BottomDrawer.tsx b/src/components/BottomDrawer.tsx
@@ -26,6 +26,7 @@ export default function BottomDrawer({
       <Transition
         show={isOpen}
         appear
+        as='div'
         className='fixed inset-0 z-40 h-full w-full bg-black/50 backdrop-blur-md transition duration-300'
         enterFrom={cx('opacity-0')}
         enterTo='opacity-100'
@@ -36,6 +37,7 @@ export default function BottomDrawer({
       <Transition
         show={isOpen}
         appear
+        as='div'
         className='fixed bottom-0 left-1/2 z-40 mx-auto flex h-auto w-full max-w-screen-md -translate-x-1/2 rounded-t-[10px] bg-background-light outline-none transition duration-300'
         enterFrom={cx('opacity-0 translate-y-48')}
         enterTo='opacity-100 translate-y-0'

diff --git a/src/components/ClickableMedia.tsx b/src/components/ClickableMedia.tsx
@@ -6,6 +6,8 @@ import Modal from './modals/Modal'
 
 export type ClickableMediaProps = Omit<ImageProps, 'onClick'> & {
   trigger?: (onClick: () => void) => JSX.Element
+  enableMaxHeight?: boolean
+  withBluredImage?: boolean
 }
 
 export default function ClickableMedia({
@@ -29,8 +31,9 @@ export default function ClickableMedia({
       <Modal
         isOpen={isOpenModal}
         closeModal={() => setIsOpenModal(false)}
-        panelClassName='bg-transparent shadow-none'
-        contentClassName='!p-0'
+        panelClassName='bg-transparent shadow-none h-full w-fit'
+        contentClassName='!p-0 h-full'
+        containerClassName='h-full'
         size='screen-md'
       >
         <MediaLoader
@@ -39,10 +42,9 @@ export default function ClickableMedia({
           onClick={(e) => e.stopPropagation()}
           onContextMenu={(e) => e.stopPropagation()}
           src={props.src ?? ''}
-          className='w-full max-w-screen-md'
+          containerClassName='h-full'
+          className='h-full w-full max-w-screen-md'
           alt={props.alt ?? ''}
-          width={1024}
-          height={1024}
         />
       </Modal>
     </>

diff --git a/src/components/MediaLoader.tsx b/src/components/MediaLoader.tsx
@@ -12,6 +12,8 @@ export type MediaLoaderProps = Omit<ImageProps, 'src' | 'alt'> & {
   loadingClassName?: string
   placeholderClassName?: string
   withSpinner?: boolean
+  enableMaxHeight?: boolean
+  withBluredImage?: boolean
 }
 
 export default function MediaLoader({
@@ -21,6 +23,8 @@ export default function MediaLoader({
   loadingClassName,
   placeholderClassName,
   withSpinner,
+  enableMaxHeight = true,
+  withBluredImage = true,
   ...props
 }: MediaLoaderProps) {
   const [isLoaded, setIsLoaded] = useState(false)
@@ -86,25 +90,29 @@ export default function MediaLoader({
               isLoaded && 'hidden'
             )}
           />
-          <Image
-            {...commonProps}
-            style={{ backfaceVisibility: 'hidden', ...commonProps.style }}
-            loading='eager'
-            onError={undefined}
-            onLoad={undefined}
-            width={10}
-            height={10}
-            alt={props.alt || ''}
-            className={cx(
-              commonProps.className,
-              'absolute inset-0 m-0 h-full max-h-96 w-full scale-110 object-cover p-0 blur-lg'
-            )}
-          />
+          {withBluredImage && (
+            <Image
+              {...commonProps}
+              style={{ backfaceVisibility: 'hidden', ...commonProps.style }}
+              loading='eager'
+              onError={undefined}
+              onLoad={undefined}
+              width={10}
+              height={10}
+              alt={props.alt || ''}
+              className={cx(
+                commonProps.className,
+                'absolute inset-0 m-0 h-full w-full scale-110 object-cover p-0 blur-lg',
+                { ['max-h-96']: enableMaxHeight }
+              )}
+            />
+          )}
           <Image
             {...commonProps}
             loading='eager'
             className={cx(
-              'mx-auto max-h-96 object-contain',
+              'mx-auto object-contain',
+              { ['max-h-96']: enableMaxHeight },
               commonProps.className
             )}
             style={{ backfaceVisibility: 'hidden', ...commonProps.style }}
@@ -126,7 +134,8 @@ export default function MediaLoader({
       ) : (
         <div
           className={cx(
-            'aspect-square max-h-96 w-full animate-pulse bg-background-lighter',
+            'aspect-square w-full animate-pulse bg-background-lighter',
+            { ['max-h-96']: enableMaxHeight },
             placeholderClassName
           )}
         />

diff --git a/src/components/chats/ChatItem/ChatItemMenus.tsx b/src/components/chats/ChatItem/ChatItemMenus.tsx
@@ -408,6 +408,7 @@ function MintingMessageNotice({ message }: { message: PostData }) {
       </Button>
       <Transition
         show={isOpen}
+        as='div'
         className='transition'
         enterFrom={cx('opacity-0 -translate-y-2')}
         enterTo='opacity-100 translate-y-0'

diff --git a/src/components/chats/ChatItem/MemeChatItem.tsx b/src/components/chats/ChatItem/MemeChatItem.tsx
@@ -38,6 +38,7 @@ export type MemeChatItemProps = Omit<ComponentProps<'div'>, 'children'> & {
   hubId: string
   showApproveButton?: boolean
   showBlockButton?: boolean
+  withWrapper?: boolean
   disableSuperLike?: boolean
   menuIdPrefix?: string
   dummySuperLike?: SuperLikeButtonProps
@@ -51,6 +52,7 @@ export default function MemeChatItem({
   enableChatMenu = true,
   chatId,
   hubId,
+  withWrapper,
   disableSuperLike,
   showApproveButton,
   showBlockButton,
@@ -101,7 +103,9 @@ export default function MemeChatItem({
                   <div
                     className={cx(
                       'flex flex-col gap-2 border-b border-border-gray py-2',
-                      noBorder && 'border-none'
+                      noBorder && 'border-none',
+                      withWrapper &&
+                        'h-full overflow-hidden rounded-2xl bg-slate-800 pt-2'
                     )}
                   >
                     <div className='flex items-center justify-between px-2'>
@@ -138,7 +142,13 @@ export default function MemeChatItem({
                       />
                     </div>
                     <MediaLoader
-                      containerClassName='overflow-hidden w-full cursor-pointer'
+                      containerClassName={cx(
+                        'overflow-hidden w-full cursor-pointer',
+                        {
+                          ['h-full flex items-center justify-center']:
+                            withWrapper,
+                        }
+                      )}
                       placeholderClassName={cx('w-full aspect-square')}
                       className='w-full object-contain'
                       src={imageExt?.image}