fix: settings on the global edit

This commit is contained in:
Nevo David 2026-01-21 17:56:38 +07:00
parent 98a6fb1013
commit 9e54e315fd
2 changed files with 62 additions and 15 deletions

View File

@ -105,7 +105,19 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
const currentIntegrationText = useMemo(() => {
if (current === 'global') {
return '';
return (
<div className="flex items-center gap-[10px]">
<div className="relative">
<SettingsIcon
size={15}
className="text-white"
/>
</div>
<div>
Settings
</div>
</div>
);
}
const currentIntegration = integrations.find((p) => p.id === current)!;
@ -425,8 +437,8 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
<div
id="social-empty"
className={clsx(
'pb-[16px]',
current !== 'global' && 'hidden'
'pb-[16px]'
// current !== 'global' && 'hidden'
)}
/>
</div>
@ -436,11 +448,11 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
id="wrapper-settings"
className={clsx(
'pb-[20px] px-[20px] select-none',
current === 'global' && 'hidden',
showSettings && 'flex-1 flex pt-[20px]'
showSettings && 'flex-1 flex pt-[20px]',
current === 'global' && 'hidden'
)}
>
<div className="bg-newSettings flex-1 flex flex-col rounded-[12px] gap-[12px] overflow-hidden">
<div className="flex-1 flex flex-col rounded-[12px] gap-[12px] overflow-hidden bg-newSettings">
<div
onClick={() => setShowSettings(!showSettings)}
className={clsx(
@ -465,9 +477,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
)}
>
<div
id="social-settings"
className="px-[12px] pb-[12px] absolute left-0 top-0 w-full h-full overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-newBgColorInner scrollbar-track-newColColor"
/>
className="absolute left-0 top-0 w-full h-full flex flex-col overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-newBgColorInner scrollbar-track-newColColor"
>
<div id="social-settings" className="flex flex-col gap-[20px] bg-newBgColor" />
</div>
</div>
<style>
{`#social-settings [data-id="${current}"] {display: block !important;}`}

View File

@ -21,6 +21,7 @@ import useSWR from 'swr';
import { InternalChannels } from '@gitroom/frontend/components/launches/internal.channels';
import { createPortal } from 'react-dom';
import clsx from 'clsx';
import Image from 'next/image';
class Empty {
@IsOptional()
@ -91,7 +92,7 @@ export const withProvider = function <T extends object>(params: {
dummy,
setChars,
setComments,
setHide
setHide,
} = useLaunchStore(
useShallow((state) => ({
date: state.date,
@ -141,7 +142,9 @@ export const withProvider = function <T extends object>(params: {
}
if (current) {
setComments(typeof params.comments === 'undefined' ? true : params.comments);
setComments(
typeof params.comments === 'undefined' ? true : params.comments
);
setEditor(selectedIntegration?.integration.editor);
setPostComment(postComment);
setTotalChars(
@ -258,7 +261,12 @@ export const withProvider = function <T extends object>(params: {
}}
>
<FormProvider {...form}>
<div className={clsx('border border-borderPreview rounded-[12px] shadow-previewShadow', !current && 'hidden')}>
<div
className={clsx(
'border border-borderPreview rounded-[12px] shadow-previewShadow',
!current && 'hidden'
)}
>
{current &&
(tab === 0 ||
(!SettingsComponent && !data?.internalPlugs?.length)) &&
@ -303,19 +311,45 @@ export const withProvider = function <T extends object>(params: {
))}
{(SettingsComponent || !!data?.internalPlugs?.length) &&
createPortal(
<div data-id={props.id} className="hidden">
<div data-id={props.id} className={isGlobal ? 'bg-newSettings pb-[12px] px-[12px]' : 'hidden bg-newSettings px-[12px] pb-[12px]'}>
{isGlobal && (
<style>{`#wrapper-settings {display: flex !important} #social-empty {display: block !important;}`}</style>
)}
{isGlobal && (
<div className="flex py-[20px] items-center gap-[15px]">
<div className="relative">
<Image
alt={selectedIntegration?.integration.name!}
width={42}
height={42}
className="min-w-[42px] min-h-[42px] w-[42px] h-[42px] rounded-full"
src={selectedIntegration?.integration.picture}
/>
<Image
alt={selectedIntegration?.integration.identifier}
width={16}
height={16}
className="rounded-[16px] min-w-[16px] min-h-[16px] w-[16px] h-[16px] absolute bottom-0 end-0"
src={`/icons/platforms/${selectedIntegration?.integration.identifier}.png`}
/>
</div>
<div className="text-[20px]">{selectedIntegration?.integration.name}</div>
</div>
)}
<SettingsComponent />
{!!data?.internalPlugs?.length && !dummy && (
<InternalChannels plugs={data?.internalPlugs} />
)}
</div>,
document.querySelector('#social-settings') || document.createElement('div')
document.querySelector('#social-settings') ||
document.createElement('div')
)}
{current &&
!SettingsComponent &&
createPortal(
<style>{`#wrapper-settings {display: none !important;} #social-empty {display: block !important;}`}</style>,
document.querySelector('#social-settings') || document.createElement('div')
document.querySelector('#social-settings') ||
document.createElement('div')
)}
</div>
</FormProvider>