@elyx-code/editor-ui 0.0.2

package/src/components/UseTemplateProjectDialog.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import SmallDialog from '../lib/dialog/SmallDialog';
+import { useNavigate } from 'react-router-dom';
+import { Project } from '../pages/Gallery';
+import Button from '../lib/button/Button';
+import { useWorkspaceStore } from '../store/workspace';
+
+export default function UseTemplateProjectDialog({
+	project,
+	onProjectCreate,
+}: {
+	project: Project;
+	onProjectCreate: (newProjectId: string) => void;
+}) {
+	const navigate = useNavigate();
+
+	const coverURL = project?.media?.find((media) => media.type === 'cover')
+		?.url;
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	return (
+		<SmallDialog
+			overlayStyle={{ zIndex: 2 }}
+			style={{
+				width: '500px',
+				minHeight: 'auto',
+				display: 'flex',
+				flexDirection: 'column',
+				padding: 0,
+			}}
+			onClose={() => navigate(`/ws/${activeWorkspace?.slug}/gallery`)}
+		>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%',
+					justifyContent: 'space-between',
+					flex: 1,
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						flex: 1,
+						minHeight: 0,
+					}}
+				>
+					<div
+						style={{
+							// Padding left and right 30px to match the button's padding
+							padding: '30px 30px 0 30px',
+							display: 'flex',
+							flexDirection: 'column',
+							flex: 1,
+							minHeight: 0,
+						}}
+					>
+						<div
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								marginBottom: '10px',
+							}}
+						>
+							<button
+								className='dialog_back_button'
+								onClick={() => navigate(`/ws/${activeWorkspace?.slug}/gallery`)}
+							>
+								<i className='fa-solid fa-arrow-left' />
+							</button>
+							<h2
+								style={{
+									margin: 0,
+									fontWeight: 500,
+									width: '100%',
+									textAlign: 'center',
+									marginRight: '26px',
+									color: 'rgb(0, 0, 0, 0.7)',
+								}}
+							>
+								Use this template
+							</h2>
+						</div>
+
+						<div
+							style={{
+								display: 'flex',
+								gap: 10,
+								alignItems: 'center',
+								marginBottom: 10,
+							}}
+						>
+							<h1
+								style={{
+									margin: 0,
+									width: '100%',
+									textAlign: 'center',
+								}}
+							>
+								{project?.name}
+							</h1>
+						</div>
+					</div>
+
+					{!!coverURL && (
+						<div
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								gap: 10,
+								alignItems: 'center',
+								// marginBottom: 10,
+							}}
+						>
+							{/* Icon */}
+							<img
+								src={coverURL}
+								alt={
+									'Cover image for ' + (project?.name || 'the template project')
+								}
+								style={{
+									width: '100%',
+									maxHeight: '120px',
+									objectFit: 'contain',
+								}}
+							/>
+						</div>
+					)}
+					<div
+						style={{
+							// Padding left and right 30px to match the button's padding
+							padding: '0 30px 30px 30px',
+							display: 'flex',
+							flexDirection: 'column',
+							flex: 1,
+							minHeight: 0,
+						}}
+					>
+						{!!project?.description && (
+							<div
+								style={{
+									display: 'flex',
+									flexDirection: 'column',
+									gap: 6,
+									alignItems: 'center',
+									marginBottom: 10,
+									marginTop: !coverURL ? 30 : 5,
+									overflowY: 'auto',
+									maxHeight: '50vh',
+									minHeight: 0,
+								}}
+							>
+								<p
+									style={{
+										color: 'rgb(0, 0, 0, 0.7)',
+										fontSize: 12,
+										textAlign: 'center',
+										margin: 0,
+									}}
+								>
+									Description
+								</p>
+								<p
+									style={{
+										fontSize: 16,
+										whiteSpace: 'pre-wrap',
+										margin: 0,
+									}}
+								>
+									{project?.description}
+								</p>
+							</div>
+						)}
+						<div style={{ flex: 1 }} />
+						<Button
+							onClick={() => {
+								onProjectCreate(project?.id);
+								navigate(`/ws/${activeWorkspace?.slug}/gallery`);
+							}}
+							disabled={!project}
+							style={{ marginTop: 20, width: '100%' }}
+						>
+							Start project
+						</Button>
+					</div>
+				</div>
+			</div>
+		</SmallDialog>
+	);
+}

package/src/components/WorkspaceLayout.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react';
+import { Outlet, useParams, useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import { getAccessToken, getCurrentSession } from '../auth';
+import { useWorkspaceStore } from '../store/workspace';
+import Loader from '../lib/loader/Loader';
+import { envConfig } from '../config';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { isUUID } from '@elyx-code/project-logic-tree';
+import BetaAcknowledgeDialog from './dialogs/BetaAcknowledgeDialog';
+
+const WorkspaceLayout: React.FC = () => {
+	// We keep the param named workspaceId from the router, but treat it as a generic identifier
+	const { workspaceId: workspaceIdentifier } = useParams<{
+		workspaceId: string;
+	}>();
+	// Get current path
+	const currentPath = window.location.pathname;
+	const [loading, setLoading] = useState(true);
+	const setActiveWorkspace = useWorkspaceStore(
+		(state) => state.setActiveWorkspace,
+	);
+	const navigate = useNavigate();
+
+	const [showBetaDialog, setShowBetaDialog] = useState(() => {
+		return localStorage.getItem('elyx_beta_acknowledged') !== 'true';
+	});
+
+	const handleAcknowledge = () => {
+		localStorage.setItem('elyx_beta_acknowledged', 'true');
+		setShowBetaDialog(false);
+	};
+
+	useEffect(() => {
+		const fetchWorkspace = async () => {
+			if (!workspaceIdentifier) return;
+
+			// Auth gate. This layout wraps every `/ws/:workspaceId/*` route
+			// (gallery, editor), so it's the single chokepoint where an
+			// unauthenticated user lands before any of those pages get to
+			// render. Without an explicit check here, an unauth user would
+			// briefly flash the page chrome (or worse, the page itself) while
+			// the workspace API call below failed, fell through the catch,
+			// navigated to '/', and let LegacyRouteRedirector finally bounce
+			// them to /auth/sign-in. We do the check up-front while still
+			// inside `loading=true`, so the existing centered Loader stays on
+			// screen across the redirect — no flash. The full-page
+			// `window.location.replace` (matching `getCurrentUserOrLogoutRedirect`)
+			// guarantees we throw away any partially-mounted React state.
+			const session = await getCurrentSession();
+			if (!session) {
+				const currentPath = window.location.pathname + window.location.search;
+				const redirectTo = currentPath.startsWith('/auth')
+					? '/gallery'
+					: currentPath;
+				window.location.replace(
+					`/auth/sign-in?redirectTo=${encodeURIComponent(redirectTo)}`,
+				);
+				return;
+			}
+
+			// Check if the current active workspace matches either the ID or the Slug
+			const currentActiveWorkspace =
+				useWorkspaceStore.getState().activeWorkspace;
+			if (
+				currentActiveWorkspace &&
+				(currentActiveWorkspace.id === workspaceIdentifier ||
+					currentActiveWorkspace.slug === workspaceIdentifier)
+			) {
+				setLoading(false);
+				return;
+			}
+
+			try {
+				setLoading(true);
+				const token = await getAccessToken();
+
+				// Determine if the URL param is a UUID or a slug
+				const isId = isUUID(workspaceIdentifier);
+				const queryParam = isId
+					? `id=${workspaceIdentifier}`
+					: `slug=${workspaceIdentifier}`;
+
+				const response = await axios.get(
+					`${envConfig.API_BASE_URL}/user-service/v1/workspaces?${queryParam}`,
+					{
+						headers: {
+							Authorization: 'Bearer ' + token,
+						},
+					},
+				);
+
+				const workspaceData = response.data?.data;
+
+				if (workspaceData) {
+					setActiveWorkspace(workspaceData);
+					if (workspaceData.slug !== workspaceIdentifier) {
+						Logger.warn(
+							`URL identifier (${workspaceIdentifier}) does not match workspace slug (${workspaceData.slug}), redirecting to URL with slug`,
+						);
+						// Replace the current path with the same path but using the workspace slug instead of the original identifier
+						const newPath = currentPath.replace(
+							workspaceIdentifier,
+							workspaceData.slug,
+						);
+						navigate(newPath, { replace: true });
+						return;
+					}
+				} else {
+					Logger.warn('Workspace not found, redirecting to root');
+					navigate('/', { replace: true });
+				}
+			} catch (error) {
+				Logger.error(
+					`Failed to load workspace data for identifier: ${workspaceIdentifier}`,
+					error,
+				);
+				navigate('/', { replace: true });
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchWorkspace();
+	}, [workspaceIdentifier, setActiveWorkspace, navigate]);
+
+	if (loading) {
+		return (
+			<div
+				style={{
+					display: 'flex',
+					height: '100vh',
+					justifyContent: 'center',
+					alignItems: 'center',
+				}}
+			>
+				<Loader size={60} color='primary' />
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<Outlet />
+			{showBetaDialog && (
+				<BetaAcknowledgeDialog onClose={handleAcknowledge} />
+			)}
+		</>
+	);
+};
+
+export default WorkspaceLayout;

package/src/components/animated-svg/AnimatedCheckmark.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import './animated-svg.css';
+
+interface AnimatedCheckmarkProps {
+	color?: string;
+}
+
+const AnimatedCheckmark: React.FC<AnimatedCheckmarkProps> = ({ color }) => {
+	const strokeColor = color || 'var(--color-support-primary)';
+	return (
+		<div className='animated-svg-container'>
+			<svg
+				version='1.1'
+				xmlns='http://www.w3.org/2000/svg'
+				viewBox='0 0 130.2 130.2'
+			>
+				<circle
+					className='path circle'
+					fill='none'
+					stroke={strokeColor}
+					strokeWidth='6'
+					strokeMiterlimit='10'
+					cx='65.1'
+					cy='65.1'
+					r='62.1'
+				></circle>
+				<polyline
+					className='path check'
+					fill='none'
+					stroke={strokeColor}
+					strokeWidth='6'
+					strokeLinecap='round'
+					strokeMiterlimit='10'
+					points='100.2,40.2 51.5,88.8 29.8,67.5'
+				></polyline>
+			</svg>
+		</div>
+	);
+};
+
+export default AnimatedCheckmark;

package/src/components/animated-svg/AnimatedCrossmark.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import './animated-svg.css';
+
+const AnimatedCrossmark: React.FC = () => {
+	return (
+		<div className='animated-svg-container'>
+			<svg
+				version='1.1'
+				xmlns='http://www.w3.org/2000/svg'
+				viewBox='0 0 130.2 130.2'
+			>
+				<circle
+					className='path circle'
+					fill='none'
+					stroke='#D06079'
+					strokeWidth='6'
+					strokeMiterlimit='10'
+					cx='65.1'
+					cy='65.1'
+					r='62.1'
+				/>
+				<line
+					className='path line'
+					fill='none'
+					stroke='#D06079'
+					strokeWidth='6'
+					strokeLinecap='round'
+					strokeMiterlimit='10'
+					x1='34.4'
+					y1='37.9'
+					x2='95.8'
+					y2='92.3'
+				/>
+				<line
+					className='path line'
+					fill='none'
+					stroke='#D06079'
+					strokeWidth='6'
+					strokeLinecap='round'
+					strokeMiterlimit='10'
+					x1='95.8'
+					y1='38'
+					x2='34.4'
+					y2='92.2'
+				/>
+			</svg>
+		</div>
+	);
+};
+
+export default AnimatedCrossmark;

package/src/components/animated-svg/AnimatedEmailSending.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import './animated-svg.css';
+
+const AnimatedEmailSending: React.FC = () => {
+	return (
+		<div
+			className='animated-svg-container-manual-trigger'
+			style={{
+				width: '130px',
+				display: 'block',
+				margin: '40px auto 0',
+				left: '-10px',
+				position: 'relative',
+			}}
+		>
+			<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 195 101' fill='none'>
+				<path
+					d='M193.735 98.5436C194.244 97.8423 194.509 96.9795 194.517 96.1156V4.47499C194.561 2.23007 192.579 0.259067 190.338 0.295919H59.1212C56.8793 0.259447 54.8981 2.23007 54.9421 4.47499V96.1156C54.9053 98.3575 56.8789 100.34 59.1239 100.295H190.335C191.664 100.302 192.97 99.6309 193.735 98.5436ZM63.3003 13.4676L93.8026 39.1962L63.3003 82.8406V13.4676ZM147.316 35.2968C147.315 35.2983 147.313 35.2994 147.311 35.301L127.601 51.9268C125.884 53.3758 123.575 53.3755 121.859 51.9268L102.148 35.301C102.147 35.2994 102.145 35.2979 102.143 35.2964L70.5574 8.65406H178.902L147.316 35.2968ZM100.218 44.6078L116.469 58.3159C118.901 60.3674 121.815 61.3928 124.729 61.3928C127.644 61.3928 130.558 60.367 132.99 58.3159L149.241 44.6078L182.318 91.9369H67.1405L100.218 44.6078ZM155.657 39.1962L186.159 13.4676V82.8406L155.657 39.1962Z'
+					fill='var(--color-main-primary)'
+				/>
+				<path
+					d='M34.1136 29.9063H14.141C11.833 29.9063 9.96191 28.0352 9.96191 25.7272C9.96191 23.4192 11.833 21.5481 14.141 21.5481H34.1136C36.4216 21.5481 38.2927 23.4192 38.2927 25.7272C38.2927 28.0352 36.4216 29.9063 34.1136 29.9063Z'
+					fill='var(--color-support-primary)'
+				/>
+				<path
+					d='M34.1128 49.9939H4.17909C1.87109 49.9939 0 48.1228 0 45.8148C0 43.5068 1.87109 41.6357 4.17909 41.6357H34.1128C36.4208 41.6357 38.2918 43.5068 38.2918 45.8148C38.2918 48.1228 36.4208 49.9939 34.1128 49.9939Z'
+					fill='var(--color-support-primary)'
+				/>
+				<path
+					d='M34.1136 70.0818H14.141C11.833 70.0818 9.96191 68.2107 9.96191 65.9027C9.96191 63.5947 11.833 61.7236 14.141 61.7236H34.1136C36.4216 61.7236 38.2927 63.5947 38.2927 65.9027C38.2927 68.2107 36.4216 70.0818 34.1136 70.0818Z'
+					fill='var(--color-support-primary)'
+				/>
+			</svg>
+		</div>
+	);
+};
+
+export default AnimatedEmailSending;

package/src/components/animated-svg/AnimatedLoading.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import './animated-svg.css';
+
+const AnimatedLoading: React.FC = () => {
+	return (
+		<div className='animated-svg-container'>
+			<svg
+				version='1.1'
+				id='L2'
+				xmlns='http://www.w3.org/2000/svg'
+				xmlnsXlink='http://www.w3.org/1999/xlink'
+				x='0px'
+				y='0px'
+				viewBox='0 0 100 100'
+				enableBackground='new 0 0 100 100'
+				xmlSpace='preserve'
+			>
+				<circle
+					fill='none'
+					stroke='var(--color-support-primary)'
+					strokeWidth='4'
+					strokeMiterlimit='10'
+					cx='50'
+					cy='50'
+					r='48'
+				/>
+				<line
+					fill='none'
+					strokeLinecap='round'
+					stroke='var(--color-support-primary)'
+					strokeWidth='4'
+					strokeMiterlimit='10'
+					x1='50'
+					y1='50'
+					x2='85'
+					y2='50.5'
+				>
+					<animateTransform
+						attributeName='transform'
+						dur='2s'
+						type='rotate'
+						from='0 50 50'
+						to='360 50 50'
+						repeatCount='indefinite'
+					/>
+				</line>
+				<line
+					fill='none'
+					strokeLinecap='round'
+					stroke='var(--color-support-primary)'
+					strokeWidth='4'
+					strokeMiterlimit='10'
+					x1='50'
+					y1='50'
+					x2='49.5'
+					y2='74'
+				>
+					<animateTransform
+						attributeName='transform'
+						dur='15s'
+						type='rotate'
+						from='0 50 50'
+						to='360 50 50'
+						repeatCount='indefinite'
+					/>
+				</line>
+			</svg>
+		</div>
+	);
+};
+
+export default AnimatedLoading;