Merge pull request #133 from Descendre/feature/#132

add: custom modal added

src/hooks/context/useLayout.tsx

@@ -28,6 +28,8 @@ export const useLayout = (): UseLayoutProps => {
 		setIsLeftDrawer,
 		isLogSelect,
 		setIsLogSelect,
+		isCustomModal,
+		setIsCustomModal,
 	} = context;
 
 	const handleCharacterSelect = ({
@@ -73,5 +75,7 @@ export const useLayout = (): UseLayoutProps => {
 		setIsLogSelect,
 		handleCharacterSelect,
 		handleLogSelect,
+		isCustomModal,
+		setIsCustomModal,
 	};
 };

src/interfaces/hooks/UseLayoutProps.d.ts

@@ -15,6 +15,8 @@ export interface UseLayoutProps {
 	setIsLogSelect: React.Dispatch<React.SetStateAction<boolean>>;
 	handleCharacterSelect: ({ uuid }: HandleCharacterSelectProps) => void;
 	handleLogSelect: ({ chatRoomId }: HandleLogSelectProps) => void;
+	isCustomModal: boolean;
+	setIsCustomModal: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export interface HandleCharacterSelectProps {

src/interfaces/provider/ContextProviderProps.d.ts

@@ -39,6 +39,8 @@ export interface ContextProviderProps {
 	setChat: React.Dispatch<
 		React.SetStateAction<{ [uuid: string]: ChatsResponse }>
 	>;
+	isCustomModal: boolean;
+	setIsCustomModal: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export type SelectedContentProps = 'noSelected' | 'character' | 'log' | 'call';

src/layouts/mainLayout/MainLayout.tsx

@@ -1,6 +1,12 @@
 'use client';
 import { MainLayoutProps } from '@/interfaces';
-import { MainFooter, MainHeader, MainLeftBar, MainLeftDrawer } from './block';
+import {
+	MainCustomModal,
+	MainFooter,
+	MainHeader,
+	MainLeftBar,
+	MainLeftDrawer,
+} from './block';
 import { Box } from '@mui/material';
 import { useBreakPoint, useLayout } from '@/hooks';
 
@@ -38,6 +44,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
 			</Box>
 
 			{['xs', 'sm'].includes(breakpoint) && <MainLeftDrawer />}
+			<MainCustomModal />
 		</>
 	);
 };

src/layouts/mainLayout/atom/MainHeaderCommandsRight.tsx

@@ -1,10 +1,10 @@
 'use client';
 import { useCall, useLayout, usePalette } from '@/hooks';
-import { Call, CallEnd } from '@mui/icons-material';
+import { Call, CallEnd, Settings } from '@mui/icons-material';
 import { Box, Tooltip } from '@mui/material';
 
 export const MainHeaderCommandsRight = () => {
-	const { selectedContent } = useLayout();
+	const { selectedContent, setIsCustomModal } = useLayout();
 	const { handleNewCallStart, handleCallStart, handleCallEnd } = useCall();
 	const palette = usePalette();
 	const iconDisabled: boolean = !['character', 'log', 'call'].includes(
@@ -16,9 +16,20 @@ export const MainHeaderCommandsRight = () => {
 			display="flex"
 			justifyContent="center"
 			alignItems="center"
-			gap="10px"
+			gap="15px"
 			height="100%"
 		>
+			<Tooltip placement="bottom" title="カスタマイズ">
+				<span>
+					<Settings
+						onClick={() => setIsCustomModal((prev) => !prev)}
+						sx={{
+							cursor: 'pointer',
+						}}
+					/>
+				</span>
+			</Tooltip>
+
 			{selectedContent === 'call' ? (
 				<Tooltip title="通話を終了" placement="bottom">
 					<span>

src/layouts/mainLayout/block/MainCustomModal.tsx

@@ -0,0 +1,38 @@
+'use client';
+import { useBreakPoint, useLayout, usePalette } from '@/hooks';
+import { Grow, Modal, Paper } from '@mui/material';
+
+export const MainCustomModal = () => {
+	const breakpoint = useBreakPoint();
+	const palette = usePalette();
+	const { isCustomModal, setIsCustomModal } = useLayout();
+
+	return (
+		<Modal
+			open={isCustomModal}
+			onClose={() => setIsCustomModal(false)}
+			sx={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: ['xs', 'sm'].includes(breakpoint) ? 'center' : 'start',
+			}}
+		>
+			<Grow in={isCustomModal} timeout={200}>
+				<Paper
+					sx={{
+						position: 'relative',
+						backgroundColor: palette.layout.mainLayout.customModal.bg,
+						width: ['xs', 'sm'].includes(breakpoint) ? '100vw' : '800px',
+						height: ['xs', 'sm'].includes(breakpoint)
+							? '100vh'
+							: 'calc(100vh - 90px)',
+						maxHeight: '800px',
+						marginTop: ['xs', 'sm'].includes(breakpoint) ? '0px' : '60px',
+						borderRadius: ['xs', 'sm'].includes(breakpoint) ? '0px' : '0px',
+						overflow: 'hidden',
+					}}
+				></Paper>
+			</Grow>
+		</Modal>
+	);
+};

src/layouts/mainLayout/block/index.ts

@@ -2,3 +2,4 @@ export * from './MainHeader';
 export * from './MainLeftDrawer';
 export * from './MainFooter';
 export * from './MainLeftBar';
+export * from './MainCustomModal';

src/provider/ContextProvider.tsx

@@ -32,6 +32,7 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => {
 	);
 	const [isSending, setIsSending] = useState<boolean>(false);
 	const [chat, setChat] = useState<{ [uuid: string]: ChatsResponse }>({});
+	const [isCustomModal, setIsCustomModal] = useState<boolean>(false);
 
 	const contextValue = {
 		characters,
@@ -58,6 +59,8 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => {
 		setIsSending,
 		chat,
 		setChat,
+		isCustomModal,
+		setIsCustomModal,
 	};
 
 	return <Context.Provider value={contextValue}>{children}</Context.Provider>;

src/themes/darkTheme.ts

@@ -24,6 +24,9 @@ export const darkTheme = createTheme({
 				footer: {
 					inputBar: '#161f28',
 				},
+				customModal: {
+					bg: '#0d1318',
+				},
 				line: {
 					main: '#525f6c',
 					sub: '#283848',

src/themes/extendedThemeProps.d.ts

@@ -17,6 +17,9 @@ declare module '@mui/material/styles' {
 				footer: {
 					inputBar: string;
 				};
+				customModal: {
+					bg: string;
+				};
 				line: {
 					main: string;
 					sub: string;
@@ -58,6 +61,9 @@ declare module '@mui/material/styles' {
 				footer: {
 					inputBar: string;
 				};
+				customModal: {
+					bg: string;
+				};
 				line: {
 					main: string;
 					sub: string;