feat: channels

apps/frontend/src/app/auth/layout.tsx

@@ -17,7 +17,7 @@ export default async function AuthLayout({
       <div className="relative z-[1] pr-[100px] flex justify-end items-center h-[100vh] w-[100vw] overflow-hidden">
         <div className="w-[557px] flex h-[614px] bg-loginBox bg-contain">
           <div className="w-full relative">
-            <div className="absolute -top-[100px] text-white justify-center items-center w-full flex gap-[10px]">
+            <div className="custom:fixed custom:text-left custom:left-[20px] custom:justify-start custom:top-[20px] absolute -top-[100px] text-white justify-center items-center w-full flex gap-[10px]">
               <Image
                 src={isGeneral() ? '/postiz.svg' : '/logo.svg'}
                 width={55}

apps/frontend/src/components/launches/add.edit.model.tsx

@@ -396,10 +396,10 @@ export const AddEditModal: FC<{
                             order={index}
                             height={value.length > 1 ? 150 : 250}
                             commands={[
-                              ...commands
-                                .getCommands()
-                                .filter((f) => f.name !== 'image'),
-                              newImage,
+                              // ...commands
+                              //   .getCommands()
+                              //   .filter((f) => f.name === 'image'),
+                              // newImage,
                               postSelector(dateState),
                             ]}
                             value={p.content}

apps/frontend/src/components/launches/add.provider.component.tsx

@@ -10,6 +10,7 @@ import { classValidatorResolver } from '@hookform/resolvers/class-validator';
 import { ApiKeyDto } from '@gitroom/nestjs-libraries/dtos/integrations/api.key.dto';
 import { useRouter } from 'next/navigation';
 import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
+import { isGeneral } from '@gitroom/react/helpers/is.general';
 
 const resolver = classValidatorResolver(ApiKeyDto);
 
@@ -201,9 +202,7 @@ export const AddProviderComponent: FC<{
             >
               <div>
                 {item.identifier === 'youtube' ? (
-                  <img
-                    src={`/icons/platforms/youtube.svg`}
-                  />
+                  <img src={`/icons/platforms/youtube.svg`} />
                 ) : (
                   <img
                     className="w-[32px] h-[32px] rounded-full"
@@ -216,26 +215,28 @@ export const AddProviderComponent: FC<{
           ))}
         </div>
       </div>
-      <div className="flex flex-col">
-        <h2 className="pb-[10px]">Articles</h2>
-        <div className="grid grid-cols-3 gap-[10px]">
-          {article.map((item) => (
-            <div
-              key={item.identifier}
-              onClick={showApiButton(item.identifier, item.name)}
-              className="w-[120px] h-[100px] bg-input text-white justify-center items-center flex flex-col gap-[10px] cursor-pointer"
-            >
-              <div>
-                <img
-                  className="w-[32px] h-[32px] rounded-full"
-                  src={`/icons/platforms/${item.identifier}.png`}
-                />
+      {!isGeneral() && (
+        <div className="flex flex-col">
+          <h2 className="pb-[10px]">Articles</h2>
+          <div className="grid grid-cols-3 gap-[10px]">
+            {article.map((item) => (
+              <div
+                key={item.identifier}
+                onClick={showApiButton(item.identifier, item.name)}
+                className="w-[120px] h-[100px] bg-input text-white justify-center items-center flex flex-col gap-[10px] cursor-pointer"
+              >
+                <div>
+                  <img
+                    className="w-[32px] h-[32px] rounded-full"
+                    src={`/icons/platforms/${item.identifier}.png`}
+                  />
+                </div>
+                <div>{item.name}</div>
               </div>
-              <div>{item.name}</div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

apps/frontend/src/components/launches/editor.tsx

@@ -3,7 +3,6 @@ import type { MDEditorProps } from '@uiw/react-md-editor/src/Types';
 import { RefMDEditor } from '@uiw/react-md-editor/src/Editor';
 import MDEditor from '@uiw/react-md-editor';
 import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';
-import { timer } from '@gitroom/helpers/utils/timer';
 import dayjs from 'dayjs';
 
 export const Editor = forwardRef<

apps/frontend/src/components/launches/providers/continue-provider/facebook/facebook.continue.tsx

@@ -32,7 +32,7 @@ export const FacebookContinue: FC<{
     []
   );
 
-  const { data } = useSWR('load-pages', loadPages, {
+  const { data, isLoading } = useSWR('load-pages', loadPages, {
     refreshWhenHidden: false,
     refreshWhenOffline: false,
     revalidateOnFocus: false,
@@ -57,6 +57,19 @@ export const FacebookContinue: FC<{
     );
   }, [data]);
 
+  if (!isLoading && !data?.length) {
+    return (
+      <div className="text-center flex justify-center items-center text-[18px] leading-[50px] h-[300px]">
+        We couldn{"'"}t find any business connected to the selected pages.
+        <br />
+        We recommend you to connect all the pages and all the businesses.
+        <br />
+        Please close this dialog, delete your integration and add a new channel
+        again.
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-[20px]">
       <div>Select Page:</div>

apps/frontend/src/components/launches/providers/continue-provider/instagram/instagram.continue.tsx

@@ -35,7 +35,7 @@ export const InstagramContinue: FC<{
     []
   );
 
-  const { data } = useSWR('load-pages', loadPages, {
+  const { data, isLoading } = useSWR('load-pages', loadPages, {
     refreshWhenHidden: false,
     refreshWhenOffline: false,
     revalidateOnFocus: false,
@@ -60,6 +60,19 @@ export const InstagramContinue: FC<{
     );
   }, [data]);
 
+  if (!isLoading && !data?.length) {
+    return (
+      <div className="text-center flex justify-center items-center text-[18px] leading-[50px] h-[300px]">
+        We couldn{"'"}t find any business connected to the selected pages.
+        <br />
+        We recommend you to connect all the pages and all the businesses.
+        <br />
+        Please close this dialog, delete your integration and add a new channel
+        again.
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-[20px]">
       <div>Select Instagram Account:</div>

apps/frontend/src/components/launches/providers/continue-provider/linkedin/linkedin.continue.tsx

@@ -35,7 +35,7 @@ export const LinkedinContinue: FC<{
     []
   );
 
-  const { data } = useSWR('load-pages', loadPages, {
+  const { data, isLoading } = useSWR('load-pages', loadPages, {
     refreshWhenHidden: false,
     refreshWhenOffline: false,
     revalidateOnFocus: false,
@@ -60,9 +60,19 @@ export const LinkedinContinue: FC<{
     );
   }, [data]);
 
+  if (!isLoading && !data?.length) {
+    return (
+      <div className="text-center flex justify-center items-center text-[18px] leading-[50px] h-[300px]">
+        We couldn{"'"}t find any business connected to your LinkedIn Page.
+        <br />
+        Please close this dialog, create a new page, and add a new channel again.
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-[20px]">
-      <div>Select Linkedin Account:</div>
+      <div>Select Linkedin Page:</div>
       <div className="grid grid-cols-3 justify-items-center select-none cursor-pointer">
         {filteredData?.map(
           (p: {
@@ -81,11 +91,7 @@ export const LinkedinContinue: FC<{
               onClick={setPage(p)}
             >
               <div>
-                <img
-                  className="w-full"
-                  src={p.picture}
-                  alt="profile"
-                />
+                <img className="w-full" src={p.picture} alt="profile" />
               </div>
               <div>{p.name}</div>
             </div>

apps/frontend/src/components/launches/providers/dribbble/dribbble.provider.tsx

@@ -12,6 +12,7 @@ import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.v
 import { Input } from '@gitroom/react/form/input';
 import { DribbbleTeams } from '@gitroom/frontend/components/launches/providers/dribbble/dribbble.teams';
 import { DribbbleDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/dribbble.dto';
+import ImageFile from 'next/image';
 
 const DribbbleSettings: FC = () => {
   const { register, control } = useSettings();
@@ -45,8 +46,10 @@ const DribbblePreview: FC = (props) => {
     <div className="rounded-[8px] flex flex-col gap-[8px] border border-black/90 w-[555px] pt-[12px] pl-[16px] pb-[12px] pr-[40px] bg-white text-black font-['helvetica']">
       <div className="flex gap-[8px]">
         <div className="w-[48px] h-[48px]">
-          <img
-            src={integration?.picture}
+          <ImageFile
+            width={48}
+            height={48}
+            src={integration?.picture!}
             alt="x"
             className="rounded-full w-full h-full relative z-[2]"
           />
@@ -83,8 +86,10 @@ const DribbblePreview: FC = (props) => {
       {morePosts.map((p, index) => (
         <div className="flex gap-[8px]" key={index}>
           <div className="w-[40px] h-[40px]">
-            <img
-              src={integration?.picture}
+            <ImageFile
+              width={48}
+              height={48}
+              src={integration?.picture!}
               alt="x"
               className="rounded-full w-full h-full relative z-[2]"
             />
@@ -138,15 +143,16 @@ export default withProvider(
       return 'Dribbble does not support mp4 files';
     }
 
-    const details = await new Promise<{width: number, height: number}>((resolve, reject) => {
-      const url = new Image();
-      url.onload = function() {
-        // @ts-ignore
-        resolve({width: this.width, height: this.height});
+    const details = await new Promise<{ width: number; height: number }>(
+      (resolve, reject) => {
+        const url = new Image();
+        url.onload = function () {
+          // @ts-ignore
+          resolve({ width: this.width, height: this.height });
+        };
+        url.src = firstItem[0].path;
       }
-      url.src = firstItem[0].path;
-    });
-
+    );
 
     if (
       (details?.width === 400 && details?.height === 300) ||

apps/frontend/src/components/launches/providers/facebook/facebook.provider.tsx

@@ -8,6 +8,7 @@ import {
   linkedinCompanyPreventRemove,
 } from '@gitroom/helpers/utils/linkedin.company.prevent.remove';
 import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
+import Image from 'next/image';
 
 const FacebookPreview: FC = (props) => {
   const { value: topValue, integration } = useIntegration();
@@ -32,8 +33,10 @@ const FacebookPreview: FC = (props) => {
     <div className="rounded-[8px] flex flex-col gap-[8px] border border-black/90 w-[555px] pt-[12px] pl-[16px] pb-[12px] pr-[40px] bg-white text-black font-['helvetica']">
       <div className="flex gap-[8px]">
         <div className="w-[48px] h-[48px]">
-          <img
-            src={integration?.picture}
+          <Image
+            width={48}
+            height={48}
+            src={integration?.picture!}
             alt="x"
             className="rounded-full w-full h-full relative z-[2]"
           />
@@ -70,8 +73,10 @@ const FacebookPreview: FC = (props) => {
       {morePosts.map((p, index) => (
         <div className="flex gap-[8px]" key={index}>
           <div className="w-[40px] h-[40px]">
-            <img
-              src={integration?.picture}
+            <Image
+              width={48}
+              height={48}
+              src={integration?.picture!}
               alt="x"
               className="rounded-full w-full h-full relative z-[2]"
             />

apps/frontend/src/components/launches/providers/high.order.provider.tsx

@@ -301,9 +301,9 @@ export const withProvider = (
                               height={InPlaceValue.length > 1 ? 200 : 250}
                               value={val.content}
                               commands={[
-                                ...commands
-                                  .getCommands()
-                                  .filter((f) => f.name !== 'image'),
+                                // ...commands
+                                //   .getCommands()
+                                //   .filter((f) => f.name !== 'image'),
                                 newImage,
                                 postSelector(date),
                                 ...linkedinCompany(

apps/frontend/src/components/launches/providers/instagram/instagram.provider.tsx

@@ -8,6 +8,7 @@ import {
   linkedinCompanyPreventRemove,
 } from '@gitroom/helpers/utils/linkedin.company.prevent.remove';
 import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
+import Image from 'next/image';
 
 const InstagramPreview: FC = (props) => {
   const { value: topValue, integration } = useIntegration();
@@ -32,8 +33,10 @@ const InstagramPreview: FC = (props) => {
     <div className="rounded-[8px] flex flex-col gap-[8px] border border-black/90 w-[555px] pt-[12px] pl-[16px] pb-[12px] pr-[40px] bg-white text-black font-['helvetica']">
       <div className="flex gap-[8px]">
         <div className="w-[48px] h-[48px]">
-          <img
-            src={integration?.picture}
+          <Image
+            width={48}
+            height={48}
+            src={integration?.picture!}
             alt="x"
             className="rounded-full w-full h-full relative z-[2]"
           />
@@ -69,8 +72,10 @@ const InstagramPreview: FC = (props) => {
       {morePosts.map((p, index) => (
         <div className="flex gap-[8px]" key={index}>
           <div className="w-[40px] h-[40px]">
-            <img
-              src={integration?.picture}
+            <Image
+              width={48}
+              height={48}
+              src={integration?.picture!}
               alt="x"
               className="rounded-full w-full h-full relative z-[2]"
             />
@@ -109,10 +114,15 @@ const InstagramPreview: FC = (props) => {
   );
 };
 
-export default withProvider(null, InstagramPreview, undefined, async ([firstPost, ...otherPosts]) => {
-  if (!firstPost.length) {
-    return 'Instagram should have at least one media';
-  }
+export default withProvider(
+  null,
+  InstagramPreview,
+  undefined,
+  async ([firstPost, ...otherPosts]) => {
+    if (!firstPost.length) {
+      return 'Instagram should have at least one media';
+    }
 
-  return true;
-});
+    return true;
+  }
+);

apps/frontend/src/components/launches/providers/linkedin/linkedin.provider.tsx

@@ -8,6 +8,7 @@ import {
   linkedinCompanyPreventRemove,
 } from '@gitroom/helpers/utils/linkedin.company.prevent.remove';
 import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
+import Image from 'next/image';
 
 const LinkedinPreview: FC = (props) => {
   const { value: topValue, integration } = useIntegration();
@@ -32,8 +33,10 @@ const LinkedinPreview: FC = (props) => {
     <div className="rounded-[8px] flex flex-col gap-[8px] border border-black/90 w-[555px] pt-[12px] pl-[16px] pb-[12px] pr-[40px] bg-white text-black font-['helvetica']">
       <div className="flex gap-[8px]">
         <div className="w-[48px] h-[48px]">
-          <img
-            src={integration?.picture}
+          <Image
+            width={48}
+            height={48}
+            src={integration?.picture!}
             alt="x"
             className="rounded-full w-full h-full relative z-[2]"
           />
@@ -70,8 +73,10 @@ const LinkedinPreview: FC = (props) => {
       {morePosts.map((p, index) => (
         <div className="flex gap-[8px]" key={index}>
           <div className="w-[40px] h-[40px]">
-            <img
-              src={integration?.picture}
+            <Image
+              width={48}
+              height={48}
+              src={integration?.picture!}
               alt="x"
               className="rounded-full w-full h-full relative z-[2]"
             />

apps/frontend/src/components/launches/providers/pinterest/pinterest.provider.tsx

@@ -13,6 +13,7 @@ import { PinterestBoard } from '@gitroom/frontend/components/launches/providers/
 import { PinterestSettingsDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/pinterest.dto';
 import { Input } from '@gitroom/react/form/input';
 import { ColorPicker } from '@gitroom/react/form/color.picker';
+import ImageFile from 'next/image';
 
 const PinterestSettings: FC = () => {
   const { register, control } = useSettings();
@@ -21,7 +22,12 @@ const PinterestSettings: FC = () => {
       <Input label={'Title'} {...register('title')} />
       <Input label={'Description'} {...register('description')} />
       <PinterestBoard {...register('board')} />
-      <ColorPicker label="Select Pin Color" name="dominant_color" enabled={false} canBeCancelled={true} />
+      <ColorPicker
+        label="Select Pin Color"
+        name="dominant_color"
+        enabled={false}
+        canBeCancelled={true}
+      />
     </div>
   );
 };
@@ -48,8 +54,10 @@ const PinterestPreview: FC = (props) => {
     <div className="rounded-[8px] flex flex-col gap-[8px] border border-black/90 w-[555px] pt-[12px] pl-[16px] pb-[12px] pr-[40px] bg-white text-black font-['helvetica']">
       <div className="flex gap-[8px]">
         <div className="w-[48px] h-[48px]">
-          <img
-            src={integration?.picture}
+          <ImageFile
+            width={48}
+            height={48}
+            src={integration?.picture!}
             alt="x"
             className="rounded-full w-full h-full relative z-[2]"
           />
@@ -86,8 +94,10 @@ const PinterestPreview: FC = (props) => {
       {morePosts.map((p, index) => (
         <div className="flex gap-[8px]" key={index}>
           <div className="w-[40px] h-[40px]">
-            <img
-              src={integration?.picture}
+            <ImageFile
+              width={48}
+              height={48}
+              src={integration?.picture!}
               alt="x"
               className="rounded-full w-full h-full relative z-[2]"
             />
@@ -132,7 +142,9 @@ export default withProvider(
   PinterestSettingsDto,
   async ([firstItem, ...otherItems]) => {
     const isMp4 = firstItem?.find((item) => item.path.indexOf('mp4') > -1);
-    const isPicture = firstItem?.find((item) => item.path.indexOf('mp4') === -1);
+    const isPicture = firstItem?.find(
+      (item) => item.path.indexOf('mp4') === -1
+    );
 
     if (firstItem.length === 0) {
       return 'Pinterest requires at least one media';
@@ -142,25 +154,31 @@ export default withProvider(
       return 'If posting a video to Pinterest you have to also include a cover image as second media';
     }
 
-     if (isMp4 && firstItem.length  > 2) {
-       return 'If posting a video to Pinterest you can only have two media items';
-     }
+    if (isMp4 && firstItem.length > 2) {
+      return 'If posting a video to Pinterest you can only have two media items';
+    }
 
     if (otherItems.length) {
       return 'Pinterest can only have one post';
     }
 
-    if (firstItem.length > 1 && firstItem.every(p => p.path.indexOf('mp4') == -1)) {
-      const loadAll: Array<{width: number, height: number}> = await Promise.all(firstItem.map(p => {
-        return new Promise((resolve, reject) => {
-          const url = new Image();
-          url.onload = function() {
-            // @ts-ignore
-            resolve({width: this.width, height: this.height});
-          }
-          url.src = p.path;
-        });
-      })) as any;
+    if (
+      firstItem.length > 1 &&
+      firstItem.every((p) => p.path.indexOf('mp4') == -1)
+    ) {
+      const loadAll: Array<{ width: number; height: number }> =
+        (await Promise.all(
+          firstItem.map((p) => {
+            return new Promise((resolve, reject) => {
+              const url = new Image();
+              url.onload = function () {
+                // @ts-ignore
+                resolve({ width: this.width, height: this.height });
+              };
+              url.src = p.path;
+            });
+          })
+        )) as any;
 
       const checkAllTheSameWidthHeight = loadAll.every((p, i, arr) => {
         return p.width === arr[0].width && p.height === arr[0].height;

apps/frontend/src/components/launches/providers/reddit/reddit.provider.tsx

@@ -15,6 +15,7 @@ import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
 import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
 import MDEditor from '@uiw/react-md-editor';
 import interClass from '@gitroom/react/helpers/inter.font';
+import Image from 'next/image';
 
 const RenderRedditComponent: FC<{
   type: string;
@@ -118,8 +119,10 @@ const RedditPreview: FC = (props) => {
                 {restOfPosts.map((p, index) => (
                   <div className="flex gap-[8px]" key={index}>
                     <div className="w-[32px] h-[32px]">
-                      <img
-                        src={integration?.picture}
+                      <Image
+                        width={48}
+                        height={48}
+                        src={integration?.picture!}
                         alt="x"
                         className="rounded-full w-full h-full relative z-[2]"
                       />

apps/frontend/src/components/launches/providers/threads/threads.provider.tsx

@@ -8,6 +8,7 @@ import {
   linkedinCompanyPreventRemove,
 } from '@gitroom/helpers/utils/linkedin.company.prevent.remove';
 import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
+import Image from 'next/image';
 
 const ThreadsPreview: FC = (props) => {
   const { value: topValue, integration } = useIntegration();
@@ -32,8 +33,10 @@ const ThreadsPreview: FC = (props) => {
     <div className="rounded-[8px] flex flex-col gap-[8px] border border-black/90 w-[555px] pt-[12px] pl-[16px] pb-[12px] pr-[40px] bg-white text-black font-['helvetica']">
       <div className="flex gap-[8px]">
         <div className="w-[48px] h-[48px]">
-          <img
-            src={integration?.picture}
+          <Image
+            width={48}
+            height={48}
+            src={integration?.picture!}
             alt="x"
             className="rounded-full w-full h-full relative z-[2]"
           />
@@ -69,8 +72,10 @@ const ThreadsPreview: FC = (props) => {
       {morePosts.map((p, index) => (
         <div className="flex gap-[8px]" key={index}>
           <div className="w-[40px] h-[40px]">
-            <img
-              src={integration?.picture}
+            <Image
+              width={48}
+              height={48}
+              src={integration?.picture!}
               alt="x"
               className="rounded-full w-full h-full relative z-[2]"
             />

apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx

@@ -11,6 +11,7 @@ import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
 import { TikTokDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/tiktok.dto';
 import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
 import { Select } from '@gitroom/react/form/select';
+import Image from 'next/image';
 
 const privacyLevel = [
   {
@@ -159,8 +160,10 @@ const TikTokPreview: FC = (props) => {
     <div className="rounded-[8px] flex flex-col gap-[8px] border border-black/90 w-[555px] pt-[12px] pl-[16px] pb-[12px] pr-[40px] bg-white text-black font-['helvetica']">
       <div className="flex gap-[8px]">
         <div className="w-[48px] h-[48px]">
-          <img
-            src={integration?.picture}
+          <Image
+            width={48}
+            height={48}
+            src={integration?.picture!}
             alt="x"
             className="rounded-full w-full h-full relative z-[2]"
           />
@@ -197,8 +200,10 @@ const TikTokPreview: FC = (props) => {
       {morePosts.map((p, index) => (
         <div className="flex gap-[8px]" key={index}>
           <div className="w-[40px] h-[40px]">
-            <img
-              src={integration?.picture}
+            <Image
+              width={48}
+              height={48}
+              src={integration?.picture!}
               alt="x"
               className="rounded-full w-full h-full relative z-[2]"
             />

apps/frontend/src/components/launches/providers/youtube/youtube.provider.tsx

@@ -14,6 +14,7 @@ import { Input } from '@gitroom/react/form/input';
 import { MediumTags } from '@gitroom/frontend/components/launches/providers/medium/medium.tags';
 import { MediaComponent } from '@gitroom/frontend/components/media/media.component';
 import { Select } from '@gitroom/react/form/select';
+import Image from 'next/image';
 
 const type = [
   { label: 'Public', value: 'public' },
@@ -26,7 +27,7 @@ const YoutubeSettings: FC = () => {
   return (
     <div className="flex flex-col">
       <Input label="Title" {...register('title')} />
-      <Select label="Type" {...register('type', {value: 'public'})}>
+      <Select label="Type" {...register('type', { value: 'public' })}>
         {type.map((t) => (
           <option key={t.value} value={t.value}>
             {t.label}
@@ -68,8 +69,10 @@ const YoutubePreview: FC = (props) => {
     <div className="rounded-[8px] flex flex-col gap-[8px] border border-black/90 w-[555px] pt-[12px] pl-[16px] pb-[12px] pr-[40px] bg-white text-black font-['helvetica']">
       <div className="flex gap-[8px]">
         <div className="w-[48px] h-[48px]">
-          <img
-            src={integration?.picture}
+          <Image
+            width={48}
+            height={48}
+            src={integration?.picture!}
             alt="x"
             className="rounded-full w-full h-full relative z-[2]"
           />
@@ -106,8 +109,10 @@ const YoutubePreview: FC = (props) => {
       {morePosts.map((p, index) => (
         <div className="flex gap-[8px]" key={index}>
           <div className="w-[40px] h-[40px]">
-            <img
-              src={integration?.picture}
+            <Image
+              width={48}
+              height={48}
+              src={integration?.picture!}
               alt="x"
               className="rounded-full w-full h-full relative z-[2]"
             />

apps/frontend/src/components/onboarding/connect.channels.tsx

@@ -15,6 +15,7 @@ import Image from 'next/image';
 import { Menu } from '@gitroom/frontend/components/launches/menu/menu';
 import { ApiModal } from '@gitroom/frontend/components/launches/add.provider.component';
 import { useRouter } from 'next/navigation';
+import { isGeneral } from '@gitroom/react/helpers/is.general';
 
 export const ConnectChannels: FC = () => {
   const fetch = useFetch();
@@ -142,9 +143,12 @@ export const ConnectChannels: FC = () => {
                   className="h-[96px] bg-input flex flex-col justify-center items-center gap-[10px] cursor-pointer"
                 >
                   <div>
-                    <img
+                    <Image
+                      alt={social.identifier}
                       src={`/icons/platforms/${social.identifier}.png`}
                       className="rounded-full w-[32px] h-[32px]"
+                      width={32}
+                      height={32}
                     />
                   </div>
                   <div className="text-[#64748B] text-[10px] tracking-[1.2px] uppercase">
@@ -154,28 +158,30 @@ export const ConnectChannels: FC = () => {
               ))}
             </div>
           </div>
-          <div className="flex-1 flex flex-col p-[16px] gap-[10px]">
-            <div className="text-[18px]">Publishing Platforms</div>
-            <div className="grid grid-cols-3 gap-[16px]">
-              {data?.article.map((article: any) => (
-                <div
-                  onClick={() => setIdentifier(article)}
-                  key={article.identifier}
-                  className="h-[96px] bg-input flex flex-col justify-center items-center gap-[10px] cursor-pointer"
-                >
-                  <div>
-                    <img
-                      src={`/icons/platforms/${article.identifier}.png`}
-                      className="rounded-full w-[32px] h-[32px]"
-                    />
+          {!isGeneral() && (
+            <div className="flex-1 flex flex-col p-[16px] gap-[10px]">
+              <div className="text-[18px]">Publishing Platforms</div>
+              <div className="grid grid-cols-3 gap-[16px]">
+                {data?.article.map((article: any) => (
+                  <div
+                    onClick={() => setIdentifier(article)}
+                    key={article.identifier}
+                    className="h-[96px] bg-input flex flex-col justify-center items-center gap-[10px] cursor-pointer"
+                  >
+                    <div>
+                      <img
+                        src={`/icons/platforms/${article.identifier}.png`}
+                        className="rounded-full w-[32px] h-[32px]"
+                      />
+                    </div>
+                    <div className="text-[#64748B] text-[10px] tracking-[1.2px] uppercase">
+                      {article.name}
+                    </div>
                   </div>
-                  <div className="text-[#64748B] text-[10px] tracking-[1.2px] uppercase">
-                    {article.name}
-                  </div>
-                </div>
-              ))}
+                ))}
+              </div>
             </div>
-          </div>
+          )}
         </div>
         <div className="my-[24px] border border-[#182034] rounded-[4px] p-[16px]">
           <div className="gap-[16px] flex flex-col">
@@ -201,7 +207,7 @@ export const ConnectChannels: FC = () => {
                       <div className="bg-black/60 w-[39px] h-[46px] left-0 top-0 absolute rounded-full z-[199]" />
                     </div>
                   )}
-                  <img
+                  <Image
                     src={integration.picture}
                     className="rounded-full"
                     alt={integration.identifier}

apps/frontend/src/components/platform-analytics/platform.analytics.tsx

@@ -16,7 +16,7 @@ const allowedIntegrations = [
   'facebook',
   'instagram',
   'linkedin-page',
-  'tiktok',
+  // 'tiktok',
   'youtube',
   'pinterest',
   'threads'

apps/frontend/tailwind.config.js

@@ -84,6 +84,9 @@ module.exports = {
           '100%': { backgroundColor: '#080B13', fontWeight: 'normal' },
         },
       }),
+      screens: {
+        custom: { raw: '(max-height: 800px)' },
+      },
     },
   },
   plugins: [