fix: media minor css changes and split media components

.gitignore

@@ -8,6 +8,8 @@ tmp
 # dependencies
 node_modules
 
+uploads
+
 # IDEs and editors
 /.idea
 .project

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

@@ -26,7 +26,6 @@ import {
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { useMoveToIntegration } from '@gitroom/frontend/components/launches/helpers/use.move.to.integration';
 import { useExistingData } from '@gitroom/frontend/components/launches/helpers/use.existing.data';
-import { MultiMediaComponent } from '@gitroom/frontend/components/media/media.component';
 import { useExpend } from '@gitroom/frontend/components/launches/helpers/use.expend';
 import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
 import { PickPlatforms } from '@gitroom/frontend/components/launches/helpers/pick.platform.component';
@@ -50,6 +49,7 @@ import { useUser } from '@gitroom/frontend/components/layout/user.context';
 import { makeId } from '@gitroom/nestjs-libraries/services/make.is';
 import Image from 'next/image';
 import { weightedLength } from '@gitroom/helpers/utils/count.length';
+import { MultiMediaComponent } from '../media/multimedia.component';
 
 function countCharacters(text: string, type: string): number {
   if (type !== 'x') {
@@ -469,7 +469,7 @@ export const AddEditModal: FC<{
                   <Fragment key={`edit_${index}`}>
                     <div>
                       <div className="flex gap-[4px]">
-                        <div className="flex-1 editor text-textColor">
+                        <div className="flex-1"> 
                           <Editor
                             order={index}
                             height={value.length > 1 ? 150 : 250}
@@ -490,7 +490,7 @@ export const AddEditModal: FC<{
 
                           {showError &&
                             (!p.content || p.content.length < 6) && (
-                              <div className="my-[5px] text-customColor19 text-[12px] font-[500]">
+                              <div className="text-red-500 text-[12px] my-[5px]">
                                 The post should be at least 6 characters long
                               </div>
                             )}

apps/frontend/src/components/launches/bot.picture.tsx

@@ -6,7 +6,7 @@ import { Input } from '@gitroom/react/form/input';
 import { Button } from '@gitroom/react/form/button';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { useToaster } from '@gitroom/react/toaster/toaster';
-import { showMediaBox } from '@gitroom/frontend/components/media/media.component';
+import { showMediaBox } from '../media/mediaboxmodal.component';
 
 export const BotPicture: FC<{
   integration: Integrations;

apps/frontend/src/components/launches/helpers/new.image.component.tsx

@@ -6,8 +6,8 @@ import {
   selectWord,
   TextAreaTextApi,
 } from '@uiw/react-md-editor';
-import { showMediaBox } from '@gitroom/frontend/components/media/media.component';
 import { loadVars } from '@gitroom/react/helpers/variable.context';
+import { showMediaBox } from '../../media/mediaboxmodal.component';
 
 export const newImage: ICommand = {
   name: 'image',

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

@@ -21,7 +21,6 @@ import {
   IntegrationContext,
   useIntegration,
 } from '@gitroom/frontend/components/launches/helpers/use.integration';
-import { MultiMediaComponent } from '@gitroom/frontend/components/media/media.component';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 import { newImage } from '@gitroom/frontend/components/launches/helpers/new.image.component';
@@ -34,6 +33,7 @@ import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';
 import { AddPostButton } from '@gitroom/frontend/components/launches/add.post.button';
 import { GeneralPreviewComponent } from '@gitroom/frontend/components/launches/general.preview.component';
 import { capitalize } from 'lodash';
+import { MultiMediaComponent } from '../../media/multimedia.component';
 
 // Simple component to change back to settings on after changing tab
 export const SetTab: FC<{ changeTab: () => void }> = (props) => {
@@ -338,7 +338,7 @@ export const withProvider = (
                               onChange={changeValue(index)}
                             />
                             {(!val.content || val.content.length < 6) && (
-                              <div className="my-[5px] text-customColor19 text-[12px] font-[500]">
+                              <div className="my-[5px] text-red-500 text-[12px] font-[500]">
                                 The post should be at least 6 characters long
                               </div>
                             )}

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

@@ -4,12 +4,12 @@ import { Input } from '@gitroom/react/form/input';
 import { useDebouncedCallback } from 'use-debounce';
 import { Button } from '@gitroom/react/form/button';
 import clsx from 'clsx';
-import { MultiMediaComponent } from '@gitroom/frontend/components/media/media.component';
 import { useWatch } from 'react-hook-form';
 import { Select } from '@gitroom/react/form/select';
 import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
 import { Canonical } from '@gitroom/react/form/canonical';
 import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
+import { MultiMediaComponent } from '@gitroom/frontend/components/media/multimedia.component';
 
 export const RenderOptions: FC<{
   options: Array<'self' | 'link' | 'media'>;

apps/frontend/src/components/layout/layout.settings.tsx

@@ -6,7 +6,6 @@ import { ContextWrapper } from '@gitroom/frontend/components/layout/user.context
 import { TopMenu } from '@gitroom/frontend/components/layout/top.menu';
 import { MantineWrapper } from '@gitroom/react/helpers/mantine.wrapper';
 import { ToolTip } from '@gitroom/frontend/components/layout/top.tip';
-import { ShowMediaBoxModal } from '@gitroom/frontend/components/media/media.component';
 import Image from 'next/image';
 import { Toaster } from '@gitroom/react/toaster/toaster';
 import { ShowPostSelector } from '@gitroom/frontend/components/post-url-selector/post.url.selector';
@@ -37,6 +36,7 @@ const ModeComponent = dynamic(
 );
 
 import { extend } from 'dayjs';
+import { ShowMediaBoxModal } from '../media/mediaboxmodal.component';
 
 extend(utc);
 extend(weekOfYear);

apps/frontend/src/components/layout/settings.component.tsx

@@ -6,7 +6,6 @@ import { Input } from '@gitroom/react/form/input';
 import { Button } from '@gitroom/react/form/button';
 import { Textarea } from '@gitroom/react/form/textarea';
 import { FormProvider, useForm } from 'react-hook-form';
-import { showMediaBox } from '@gitroom/frontend/components/media/media.component';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { classValidatorResolver } from '@hookform/resolvers/class-validator';
 import { UserDetailDto } from '@gitroom/nestjs-libraries/dtos/users/user.details.dto';
@@ -18,6 +17,7 @@ import { useUser } from '@gitroom/frontend/components/layout/user.context';
 import { LogoutComponent } from '@gitroom/frontend/components/layout/logout.component';
 import { useSearchParams } from 'next/navigation';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
+import { showMediaBox } from '../media/mediaboxmodal.component';
 
 export const SettingsPopup: FC<{ getRef?: Ref<any> }> = (props) => {
   const {isGeneral} = useVariables();