@elyx-code/editor-ui 0.0.2

package/src/pages/Gallery.tsx

@@ -0,0 +1,1693 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Route, Routes, useNavigate } from 'react-router-dom';
+import * as YAML from 'yaml';
+import { AuthModes } from '@nangohq/types';
+import CreateNewProject from '../components/gallery-card/CreateNewProject';
+import GalleryCard from '../components/gallery-card/GalleryCard';
+import MarketplaceCard from '../components/gallery-card/MarketplaceCard';
+import LoadingCard from '../lib/card/LoadingCard';
+import PageBackdrop from '../components/page-backdrop/PageBackdrop';
+import './gallery.css';
+import Logo from '../assets/logo-full-word.png';
+import CurrentUserAvatar from '../components/user/CurrentUserAvatar';
+import {
+	getAccessToken,
+	getCurrentUserOrLogoutRedirect,
+	getRefreshToken
+} from '../auth';
+import Dialog from '../lib/dialog/Dialog';
+import UserProfileDialog from '../components/user-profile/UserProfileDialog';
+import {
+	IProject_meta,
+	joinListWithLastSeparator,
+	lowercaseFirstLetter,
+	toSentenceCase
+} from '@elyx-code/project-logic-tree';
+import { Notification } from '../services/notifications';
+import { popupNotification } from '../popup-notification';
+import ProjectDuplicationCard from '../components/gallery-card/ProjectDuplicationCard';
+import axios from 'axios';
+import dayjs from 'dayjs';
+import { Socket } from '../socket/socket';
+import GalleryAddExternalIntegrationInfoDialog from '../components/GalleryAddExternalIntegrationInfoDialog';
+import { Logger } from '@elyx-code/common-ts-utils';
+import {
+	DTOAction,
+	ILiveMessageDTO,
+	LiveMessageEventType
+} from '@elyx-code/definitions';
+import { envConfig } from '../config';
+import UseTemplateProjectDialog from '../components/UseTemplateProjectDialog';
+import { useWorkspaceStore } from '../store/workspace';
+import { CircularProgress } from '@mui/material';
+import RequestIntegrationAccessDialog from '../components/RequestIntegrationAccessDialog';
+import { uuid } from 'short-uuid';
+import { IChannelConnections } from '../services/editor';
+
+export type ProjectMetadatAPIResponse = IProject_meta & {
+	media: { url: string; type: 'cover' | 'icon' }[];
+};
+
+export type Project = ProjectMetadatAPIResponse & {
+	assignedFallbackColor: number | null;
+};
+
+const ALREADY_SUPPORTED_INTEGRATIONS = [
+	'slack',
+	'google-mail',
+	'google-drive',
+	'google-gemini'
+];
+
+const PAID_INTEGRATIONS = [
+	'1password-scim',
+	'accelo',
+	'active-campaign',
+	'acuity-scheduling',
+	'adobe',
+	'adobe-umapi',
+	'adp',
+	'adyen',
+	'affinity',
+	'aircall',
+	'aircall-basic',
+	'airtable',
+	'airtable-pat',
+	'autodesk',
+	'algolia',
+	'amazon-selling-partner',
+	'amazon-selling-partner-beta',
+	'anrok',
+	'amplitude',
+	'anthropic-admin',
+	'apaleo',
+	'apollo',
+	'apollo-oauth',
+	'appstle-subscriptions',
+	'asana',
+	'asana-scim',
+	'ashby',
+	'atlas-so',
+	'atlassian',
+	'atlassian-admin',
+	'attio',
+	'auth0',
+	'auth0-cc',
+	'avalara',
+	'avalara-sandbox',
+	'aws',
+	'aws-iam',
+	'aws-scim',
+	'azure-devops',
+	'bamboohr',
+	'bamboohr-basic',
+	'basecamp',
+	'beehiiv',
+	'bigcommerce',
+	'bill-sandbox',
+	'bill',
+	'bitbucket',
+	'bitdefender',
+	'blackbaud',
+	'blackbaud-basic',
+	'blandai',
+	'boldsign',
+	'box',
+	'braintree',
+	'braintree-sandbox',
+	'braze',
+	'brevo-api-key',
+	'brex',
+	'brex-api-key',
+	'brex-staging',
+	'brightcrowd',
+	'builder-io-private',
+	'builder-io-public',
+	'buildium',
+	'builtwith',
+	'callrail',
+	'canny',
+	'canva-scim',
+	'certn',
+	'certn-partner',
+	'chargebee',
+	'chattermill',
+	'checkhq',
+	'checkr-partner',
+	'checkr-partner-staging',
+	'checkout-com',
+	'checkout-com-sandbox',
+	'chorus',
+	'circle-so',
+	'clari-copilot',
+	'clicksend',
+	'clickup',
+	'cloudentity',
+	'close',
+	'codeclimate',
+	'codegen',
+	'commercetools',
+	'companycam',
+	'copper',
+	'copper-api-key',
+	'connectwise-psa',
+	'connectwise-psa-staging',
+	'confluence',
+	'confluence-basic',
+	'confluence-data-center',
+	'contentful',
+	'contentstack',
+	'coupa-compass',
+	'cyberimpact',
+	'databricks-account',
+	'databricks-workspace',
+	'datev',
+	'datadog',
+	'deel',
+	'deel-sandbox',
+	'devin',
+	'dialpad',
+	'dialpad-sandbox',
+	'digitalocean',
+	'dixa',
+	'document360',
+	'docusign',
+	'docusign-sandbox',
+	'docuware',
+	'dropbox-sign',
+	'emarsys',
+	'emarsys-oauth',
+	'employment-hero',
+	'e-conomic',
+	'egnyte',
+	'elevenlabs',
+	'elevio',
+	'entrata',
+	'envoy',
+	'evaluagent',
+	'exa',
+	'exact-online',
+	'expensify',
+	'factorial',
+	'fathom',
+	'figjam',
+	'figma-scim',
+	'falai',
+	'findymail',
+	'firefish',
+	'fireflies',
+	'fiserv',
+	'fiserv-api-key',
+	'fortnox',
+	'freshbooks',
+	'freshdesk',
+	'freshsales',
+	'freshservice',
+	'freshteam',
+	'front',
+	'gainsight-cc',
+	'gebruder-weiss',
+	'gem',
+	'grammarly-scim',
+	'guru',
+	'guru-scim',
+	'gong',
+	'gong-oauth',
+	'google-ads',
+	'google-cloud-storage',
+	'gorgias',
+	'gorgias-basic',
+	'grafana',
+	'grain',
+	'grain-api-key',
+	'greenhouse',
+	'greenhouse-basic',
+	'greenhouse-harvest',
+	'greenhouse-job-board',
+	'greenhouse-assessment',
+	'greenhouse-ingestion',
+	'greenhouse-onboarding',
+	'gusto',
+	'gusto-demo',
+	'hackerrank-work',
+	'harvest',
+	'health-gorilla',
+	'hibob-service-user',
+	'highlevel',
+	'highlevel-white-label',
+	'holded',
+	'hubspot',
+	'incident-io',
+	'insightly',
+	'instantly',
+	'intercom',
+	'intuit',
+	'jamf',
+	'jamf-basic',
+	'jazzhr',
+	'jira',
+	'jira-basic',
+	'jira-data-center',
+	'jira-data-center-api-key',
+	'jira-data-center-basic',
+	'jobadder',
+	'jobvite',
+	'helpscout-docs',
+	'helpscout-mailbox',
+	'kandji',
+	'keap',
+	'keeper-scim',
+	'klipfolio',
+	'klaviyo',
+	'klaviyo-oauth',
+	'kustomer',
+	'lagrowthmachine',
+	'lattice',
+	'lessonly',
+	'lemlist',
+	'lever',
+	'lever-basic',
+	'lever-sandbox',
+	'lever-basic-sandbox',
+	'linear',
+	'loom-scim',
+	'loops-so',
+	'lucid-scim',
+	'make',
+	'mailgun',
+	'mailchimp',
+	'manatal',
+	'marketo',
+	'malwarebytes',
+	'medallia',
+	'metabase',
+	'microsoft-oauth2-cc',
+	'microsoft-teams',
+	'microsoft-tenant-specific',
+	'microsoft-business-central',
+	'microsoft-ads',
+	'microsoft-entra-id',
+	'microsoft-power-bi',
+	'mindbody',
+	'mip-cloud',
+	'mip-on-premise',
+	'mixpanel',
+	'miro-scim',
+	'missive',
+	'monday',
+	'mural',
+	'nationbuilder',
+	'namely',
+	'namely-pat',
+	'netsuite',
+	'netsuite-tba',
+	'notion-scim',
+	'odoo',
+	'odoo-cc',
+	'okta',
+	'okta-preview',
+	'openai-admin',
+	'oracle-hcm',
+	'ory',
+	'outreach',
+	'pagerduty',
+	'pandadoc',
+	'pandadoc-api-key',
+	'paychex',
+	'payfit',
+	'paylocity',
+	'pendo',
+	'pennylane',
+	'peopledatalabs',
+	'perplexity',
+	'perimeter81',
+	'personio',
+	'personio-v2',
+	'personio-recruiting',
+	'pingboard',
+	'pipedrive',
+	'pivotaltracker',
+	'plain',
+	'podium',
+	'posthog',
+	'prive',
+	'precisefp',
+	'productboard',
+	'qualtrics',
+	'quickbase',
+	'quickbooks',
+	'quickbooks-sandbox',
+	'ragieai',
+	'ramp',
+	'ramp-sandbox',
+	'razorpay',
+	'recharge',
+	'recruitcrm',
+	'recruiterflow',
+	'redtail-crm-sandbox',
+	'refiner',
+	'replicate',
+	'retell-ai',
+	'ring-central',
+	'ring-central-sandbox',
+	'rippling',
+	'rippling-shop-app',
+	'roam-scim',
+	'rock-gym-pro',
+	'rootly',
+	'segment',
+	'sage',
+	'sage-hr',
+	'sage-intacct-oauth',
+	'sage-intacct',
+	'salesforce',
+	'salesforce-sandbox',
+	'salesforce-experience-cloud',
+	'salesforce-cdp',
+	'sap-concur',
+	'sap-success-factors',
+	'scrapedo',
+	'salesloft',
+	'sendgrid',
+	'sentry',
+	'sentry-oauth',
+	'sedna',
+	'sedna-basic',
+	'servicem8',
+	'signnow',
+	'signnow-sandbox',
+	'servicenow',
+	'sharepoint-online',
+	'sharepoint-online-oauth2-cc',
+	'sharepoint-online-v1',
+	'shipstation',
+	'shopify',
+	'shopify-api-key',
+	'shopify-partner',
+	'shopify-scim',
+	'shortcut',
+	'slack',
+	'smartlead-ai',
+	'smartrecruiters-api-key',
+	'smartsheet',
+	'snowflake',
+	'snowflake-jwt',
+	'spotify-oauth2-cc',
+	'squarespace',
+	'squareup',
+	'squareup-sandbox',
+	'stripe',
+	'stripe-express',
+	'stripe-app',
+	'stripe-app-sandbox',
+	'supabase',
+	'tapclicks',
+	'tableau',
+	'teamtailor',
+	'teamwork',
+	'terraform',
+	'tiktok-ads',
+	'timely',
+	'thrivecart-oauth',
+	'thrivecart-api-key',
+	'trakstar-hire',
+	'trafft',
+	'tremendous',
+	'tremendous-sandbox',
+	'trello-scim',
+	'tldv',
+	'tsheetsteam',
+	'twitter-oauth2-cc',
+	'twinfield',
+	'twenty-crm',
+	'twenty-crm-self-hosted',
+	'twilio',
+	'ukg-pro-wfm',
+	'ukg-pro',
+	'ukg-ready',
+	'unanet',
+	'unipile',
+	'vercel',
+	'wave-accounting',
+	'wealthbox',
+	'webflow',
+	'whatsapp-business',
+	'wildix-pbx',
+	'woocommerce',
+	'workable',
+	'workable-oauth',
+	'workday',
+	'workday-oauth',
+	'wrike',
+	'xai',
+	'xero',
+	'xero-oauth2-cc',
+	'zapier',
+	'zapier-nla',
+	'zapier-scim',
+	'zendesk',
+	'zenefits',
+	'zoho',
+	'zoho-books',
+	'zoho-crm',
+	'zoho-desk',
+	'zoho-inventory',
+	'zoho-invoice',
+	'zoho-mail',
+	'zoho-bigin',
+	'zoho-people',
+	'zoominfo',
+	'zuora'
+];
+
+export interface IProxyConfig {
+	base_url: string;
+	headers?: Record<string, string>;
+	verification?: { method: string; endpoints: string[] };
+	retry?: {
+		after?: string;
+		in_body?: { path: string; value: string; strategy: string };
+	};
+	paginate?:
+		| {
+				type: 'link';
+				link_rel_in_response_header: string;
+				limit_name_in_request: string;
+				response_path: string;
+				link_path_in_response_body: string;
+		  }
+		| {
+				type: 'cursor';
+				cursor_path_in_response: string;
+				limit_name_in_request: string;
+				cursor_name_in_request: string;
+				response_path: string;
+		  };
+	connection_config?: Record<string, string>;
+}
+
+export interface IConnectionConfigProperty {
+	type: string;
+	title?: string;
+	description?: string;
+	example?: string;
+	pattern?: string;
+	prefix?: string;
+	suffix?: string;
+	doc_section?: string;
+	optional?: boolean;
+	order?: number;
+}
+
+export interface ICredentialProperty {
+	type: string;
+	title?: string;
+	description?: string;
+	secret?: boolean;
+	format?: string;
+	example?: string;
+	pattern?: string;
+	doc_section?: string;
+}
+
+export interface IFullIntegrationProvider {
+	display_name: string;
+	alias?: string;
+	categories: string[];
+	docs: string;
+	docs_connect?: string;
+	auth_mode?: AuthModes;
+	credentials?: Record<string, ICredentialProperty>;
+	authorization_url?: string;
+	token_url?: string;
+	default_scopes?: string[];
+	scope_separator?: string;
+	authorization_params?: Record<string, string>;
+	token_params?: Record<string, string>;
+	refresh_params?: Record<string, string>;
+	token_request_auth_method?: string;
+	authorization_method?: string;
+	connection_configuration?: string[];
+	proxy?: IProxyConfig;
+	post_connection_script?: string;
+	webhook_routing_script?: string;
+	connection_config?: Record<string, IConnectionConfigProperty>;
+}
+
+export type FullProviderMap = Record<string, IFullIntegrationProvider>;
+
+const convertToPattern = (num: number) => {
+	const remainder = num % 5;
+	return remainder === 0 ? 5 : remainder;
+};
+
+let sessionId: string | null = null;
+let pastSessionIds: Set<string> = new Set();
+let peerConnections: Record<string, IChannelConnections> = {};
+
+const Gallery: React.FC<{ socket: Socket }> = ({ socket }) => {
+	const [projects, setProjects] = useState<Project[]>([]);
+	const [totalProjectCount, setTotalProjectCount] = useState<number>(-1);
+	const [templates, setTemplates] = useState<Project[]>([]);
+	const [cloning, setCloning] = useState<Project[]>([]);
+	const [loadingOwnProjects, setLoadingOwnProjects] =
+		useState<boolean>(false);
+	const [loadingTemplates, setLoadingTemplates] = useState<boolean>(false);
+	const [openTemplate, setOpenTemplate] = useState<Project | null>(null);
+	const [loadingExternalIntegrations, setLoadingExternalIntegrations] =
+		useState<boolean>(false);
+	const [externalIntegrations, setExternalIntegrations] =
+		useState<FullProviderMap>({});
+	const [offset, setOffset] = useState<number>(0);
+
+	// marketplace search UI state
+	const [showMarketplaceSearch, setShowMarketplaceSearch] = useState(false);
+	const [marketplaceQuery, setMarketplaceQuery] = useState('');
+	const [requestingIntegration, setRequestingIntegration] = useState<{
+		key: string;
+		name: string;
+	} | null>(null);
+	const [requestedIntegrations, setRequestedIntegrations] = useState<
+		Set<string>
+	>(new Set());
+
+	// project search and view layout state
+	const [userId, setUserId] = useState<string | null>(null);
+	const [viewMode, setViewMode] = useState<'grid' | 'rows'>('grid');
+	const [projectQuery, setProjectQuery] = useState('');
+	const [showProjectSearch, setShowProjectSearch] = useState(false);
+	const [debouncedQuery, setDebouncedQuery] = useState('');
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	const navigate = useNavigate();
+	Notification.navigate = navigate;
+
+	const handleNotificationChannelsMessage = useCallback(
+		(message: ILiveMessageDTO): void => {
+			Logger.log('detected subscribed-channels: ', message.payload);
+			const data: { channels: IChannelConnections[] } =
+				message.payload as {
+					channels: IChannelConnections[];
+				};
+
+			if (
+				message.action === DTOAction.SubscribeChannelsV1 &&
+				message.event === 'subscribed-channels'
+			) {
+				if (message.sessionId && sessionId !== message.sessionId) {
+					if (sessionId) {
+						pastSessionIds.add(sessionId);
+					}
+					sessionId = message.sessionId;
+				}
+			}
+
+			if (!!data?.channels && Array.isArray(data.channels)) {
+				peerConnections = data.channels.reduce(
+					(acc: { [key: string]: IChannelConnections }, channel) => {
+						acc[channel.channel] = channel;
+						return acc;
+					},
+					{}
+				);
+
+				// this.emit('peer-connections-updated', peerConnections);
+			}
+
+			// Add the payload to the state
+			// if (message.event === 'subscribed-channels') {
+			// } else if (message.event === 'new-connection') {
+			// 	peerConnections = data.channels.reduce(
+			// 		(acc: { [key: string]: IChannelConnections }, channel) => {
+			// 			acc[channel.channel] = channel;
+			// 			return acc;
+			// 		},
+			// 		{}
+			// 	);
+
+			// 	this.emit(
+			// 		'peer-connections-updated',
+			// 		peerConnections
+			// 	);
+			// }
+
+			Logger.log('Updated peerConnections: ', peerConnections);
+
+			return;
+		},
+		[]
+	);
+
+	const handleIncommingWebsocketMessage = useCallback(
+		(message: ILiveMessageDTO) => {
+			// Logger.log('Generic editor message callback: ', message);
+
+			let action: string = message.action || message.event;
+
+			switch (action) {
+				case DTOAction.PeerDisconnectedV1:
+				case DTOAction.ReconnectSessionV1:
+				case DTOAction.SubscribeChannelsV1: {
+					handleNotificationChannelsMessage(message);
+					return;
+				}
+			}
+		},
+		[handleNotificationChannelsMessage]
+	);
+
+	const subscribeToProjectNotificationsChannel = useCallback(async () => {
+		const userId = (await getCurrentUserOrLogoutRedirect())?.id;
+
+		const [accessToken, refreshToken] = await Promise.all([
+			getAccessToken(),
+			getRefreshToken()
+		]);
+
+		await socket.send({
+			action: DTOAction.SubscribeChannelsV1,
+			actionId: uuid(),
+			userAuthor: userId,
+			agentAuthor: null,
+			emittedAt: new Date().toISOString(),
+			channel: `gallery--${userId}`,
+			sessionId: sessionId as string,
+			authorization: 'Bearer ' + accessToken,
+			refreshToken: refreshToken,
+			type: LiveMessageEventType.Post,
+			workspaceId: activeWorkspace?.id,
+			event: null,
+			message: null,
+			payload: {
+				channels: [`gallery--${userId}`]
+			}
+		});
+	}, [socket]);
+
+	const handleReconnectingWebsocket = useCallback(async () => {
+		Logger.log('Reconnecting websocket...');
+
+		// // Show notification
+		// popupNotification({
+		// 	color: 'warning',
+		// 	text: 'Reconnecting session...',
+		// });
+
+		await subscribeToProjectNotificationsChannel();
+
+		// Send message to reconnect
+		// this.socket.send({
+		// 	action: DTOAction.ReconnectSessionV1,
+		// 	actionId: ProjectState.UUID.uuid(),
+		// 	userAuthor: ProjectState.sessionAuthor,
+		// 	agentAuthor: null,
+		// 	emittedAt: new Date().toISOString(),
+		// 	channel: this.PROJECT_NOTIFICATIONS_CHANNEL,
+		// 	sessionId: this.sessionId as string,
+		// 	authorization: 'Bearer ' + (await this.getAccessToken()),
+		// 	type: LiveMessageEventType.Post,
+		// 	event: null,
+		// 	message: null,
+		// 	payload: null,
+		// });
+	}, [subscribeToProjectNotificationsChannel]);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedQuery(projectQuery);
+		}, 300);
+		return () => clearTimeout(timer);
+	}, [projectQuery]);
+
+	useEffect(() => {
+		setOffset(0);
+	}, [debouncedQuery]);
+
+	const fetchProjectsData = useCallback(
+		async (currentOffset: number, query: string, append: boolean) => {
+			setLoadingOwnProjects(true);
+			if (!append) {
+				setProjects([]);
+			}
+			try {
+				const token = await getAccessToken();
+				const response = await axios.get(
+					`${envConfig.API_BASE_URL}/editor-service/v1/projects?limit=15&offset=${currentOffset}&search=${encodeURIComponent(query)}`,
+					{
+						headers: {
+							Authorization: 'Bearer ' + token
+						}
+					}
+				);
+
+				const fetched = (response?.data?.items || []).map(
+					(project: ProjectMetadatAPIResponse, i: number) => ({
+						...project,
+						assignedFallbackColor: !(project.media || []).length
+							? convertToPattern(currentOffset + i + 1)
+							: null
+					})
+				) as Project[];
+
+				setProjects((prev) => {
+					if (append) {
+						const existingIds = new Set(prev.map((p) => p.id));
+						const filteredNew = fetched.filter(
+							(p) => !existingIds.has(p.id)
+						);
+						return [...prev, ...filteredNew];
+					}
+					return fetched;
+				});
+				setTotalProjectCount(response?.data?.total ?? -1);
+			} catch (error) {
+				Logger.error('error', error);
+				popupNotification({
+					text: 'Error loading projects. Please try again.',
+					color: 'error'
+				});
+			}
+
+			setLoadingOwnProjects(false);
+		},
+		[]
+	);
+
+	useEffect(() => {
+		fetchProjectsData(offset, debouncedQuery, offset > 0);
+	}, [offset, debouncedQuery, fetchProjectsData]);
+
+	useEffect(() => {
+		if (userId && activeWorkspace?.id) {
+			const key = `gallery-view-preference:${userId}:${activeWorkspace.id}`;
+			const stored = localStorage.getItem(key);
+			if (stored === 'rows' || stored === 'grid') {
+				setViewMode(stored as 'grid' | 'rows');
+			}
+		}
+	}, [userId, activeWorkspace?.id]);
+
+	const handleViewModeChange = (mode: 'grid' | 'rows') => {
+		setViewMode(mode);
+		if (userId && activeWorkspace?.id) {
+			const key = `gallery-view-preference:${userId}:${activeWorkspace.id}`;
+			localStorage.setItem(key, mode);
+		}
+	};
+
+	useEffect(() => {
+		const fetchUser = async () => {
+			try {
+				const u = await getCurrentUserOrLogoutRedirect();
+				if (u?.id) {
+					setUserId(u.id);
+				}
+			} catch (err) {
+				Logger.error('Failed to fetch user', err);
+			}
+		};
+
+		const fetchExternalIntegrationsData = async () => {
+			setLoadingExternalIntegrations(true);
+			try {
+				const response = await axios.get(
+					`${envConfig.PUBLIC_EXTERNAL_INTEGRATIONS_URL}/providers.yaml`,
+					{ responseType: 'text' }
+				);
+				const parsed = YAML.parse(response.data);
+				setExternalIntegrations(parsed as FullProviderMap);
+			} catch (error) {
+				Logger.error('error', error);
+			}
+
+			setLoadingExternalIntegrations(false);
+		};
+
+		const fetchRequestedIntegrations = async () => {
+			if (!activeWorkspace?.id) return;
+			try {
+				const token = await getAccessToken();
+				const res = await axios.get(
+					`${envConfig.API_BASE_URL}/support-service/v1/cases?type=access-request&workspaceId=${activeWorkspace.id}`,
+					{
+						headers: { Authorization: 'Bearer ' + token }
+					}
+				);
+				if (res.data?.data) {
+					const integrations = new Set<string>();
+					res.data.data.forEach((item: any) => {
+						if (item.metadata?.integration) {
+							integrations.add(item.metadata.integration);
+						}
+					});
+					setRequestedIntegrations(integrations);
+				}
+			} catch (err) {
+				Logger.error('Failed to fetch requested integrations', err);
+			}
+		};
+
+		const fetchTemplateProjectsData = async () => {
+			try {
+				setLoadingTemplates(true);
+				const token = await getAccessToken();
+				const response = await axios.get(
+					`${envConfig.API_BASE_URL}/editor-service/v1/template-projects`,
+					{
+						headers: {
+							Authorization: 'Bearer ' + token
+						}
+					}
+				);
+				// Handle template projects data if needed
+				const projects = (response?.data?.items || []).map(
+					(project: ProjectMetadatAPIResponse, i: number) => ({
+						...project,
+						assignedFallbackColor: !(project.media || []).length
+							? convertToPattern(i + 1)
+							: null
+					})
+				) as Project[];
+				setTemplates(projects);
+
+				const foundTemplateId = window.location.pathname.split(
+					`/ws/${activeWorkspace?.slug}/gallery/use-template-project/`
+				)[1];
+
+				// Hydrate active template if there is one in the URL
+				if (foundTemplateId) {
+					const activeTemplate = projects.find(
+						(p) => p.id === foundTemplateId
+					);
+					if (activeTemplate) {
+						setOpenTemplate(activeTemplate);
+						navigate(
+							`/ws/${activeWorkspace?.slug}/gallery/use-template-project/${foundTemplateId}`
+						);
+					}
+				}
+			} catch (error) {
+				Logger.error('error', error);
+			}
+
+			setLoadingTemplates(false);
+		};
+
+		fetchUser();
+		fetchExternalIntegrationsData();
+		fetchRequestedIntegrations();
+		fetchTemplateProjectsData();
+	}, [activeWorkspace?.id]);
+
+	useEffect(() => {
+		// socket.on('notification-channels', handleNotificationChannelsMessage);
+		socket.off('message', handleIncommingWebsocketMessage);
+		socket.off('reconnecting', handleReconnectingWebsocket);
+		// socket.off('closed', handleClosedWebsocket);
+
+		socket.on('message', handleIncommingWebsocketMessage);
+		socket.on('reconnecting', handleReconnectingWebsocket);
+		// socket.on('closed', handleClosedWebsocket);
+
+		subscribeToProjectNotificationsChannel();
+
+		return () => {
+			peerConnections = {};
+			pastSessionIds.clear();
+			sessionId = null;
+			socket.off('message', handleIncommingWebsocketMessage);
+			socket.off('reconnecting', handleReconnectingWebsocket);
+		};
+	}, [handleIncommingWebsocketMessage]);
+
+	// local filtering (name matches first, then category matches; alphabetical)
+	const filteredIntegrationEntries = useMemo(() => {
+		const entries = Object.entries(externalIntegrations) as [
+			string,
+			IFullIntegrationProvider
+		][];
+
+		const q = marketplaceQuery.trim().toLowerCase();
+		if (!q) return entries;
+
+		const byName: typeof entries = [];
+		const byCategory: typeof entries = [];
+
+		for (const [key, value] of entries) {
+			const name = (value.display_name || '').toLowerCase();
+			const cats = (value.categories || []).map((c) => c.toLowerCase());
+			const isName = name.includes(q);
+			const isCat = !isName && cats.some((c) => c.includes(q));
+			if (isName) byName.push([key, value]);
+			else if (isCat) byCategory.push([key, value]);
+		}
+
+		const sortFn = (
+			a: (typeof entries)[number],
+			b: (typeof entries)[number]
+		) =>
+			(a[1].display_name || '').localeCompare(
+				b[1].display_name || '',
+				undefined,
+				{
+					sensitivity: 'base'
+				}
+			);
+
+		byName.sort(sortFn);
+		byCategory.sort(sortFn);
+		return [...byName, ...byCategory];
+	}, [externalIntegrations, marketplaceQuery]);
+
+	const onDeleteProject = async (projectId: string) => {
+		const token = await getAccessToken();
+		let projectIndex = projects.findIndex((p) => p.id === projectId);
+		let updatedProjects = [...projects].filter((p) => p.id !== projectId);
+
+		try {
+			setProjects(updatedProjects);
+			const response = await axios.delete(
+				`${envConfig.API_BASE_URL}/editor-service/v1/project/${projectId}`,
+				{ headers: { Authorization: 'Bearer ' + token } }
+			);
+			Logger.log('HERE: Project deleted: ', response);
+		} catch (error) {
+			Logger.log('HERE: Error deleting project: ', error);
+			popupNotification({
+				text: 'Error deleting project',
+				color: 'error'
+			});
+			if (!updatedProjects.find((p) => p.id === projectId)) {
+				const newProjects = [...updatedProjects];
+				newProjects.splice(projectIndex, 0, projects[projectIndex]);
+				setProjects(newProjects);
+			}
+		}
+	};
+
+	const onCloneProject = async (projectId: string) => {
+		// const token = await getAccessToken();
+		try {
+			const project = [...projects, ...templates].find(
+				(p) => p.id === projectId
+			)!;
+			if (!!project) {
+				setCloning([...cloning, project]);
+			}
+		} catch (error) {
+			popupNotification({
+				text: 'Error duplicate project',
+				color: 'error'
+			});
+			Logger.error('Error cloning project from the gallery: ', error);
+		}
+	};
+
+	// Helper to produce the description string (unchanged logic)
+	const describeIntegration = (
+		value: IFullIntegrationProvider
+	): {
+		description: string;
+		popular: boolean;
+	} => {
+		const relevantCategories = (value.categories || [])?.filter(
+			(category) => category !== 'other' && category !== 'popular'
+		);
+
+		const popular = (value.categories || [])?.includes('popular');
+
+		if (relevantCategories.length === 0) {
+			return {
+				description: `External integration with the services of ${value.display_name}`,
+				popular
+			};
+		}
+
+		return {
+			description: joinListWithLastSeparator(
+				relevantCategories.map((cat, i) => {
+					if (i !== 0)
+						return lowercaseFirstLetter(toSentenceCase(cat));
+					return toSentenceCase(cat);
+				}),
+				', ',
+				' and '
+			),
+			popular
+		};
+	};
+
+	const integrationEntriesToRender =
+		marketplaceQuery.trim() === ''
+			? (
+					Object.entries(externalIntegrations) as [
+						string,
+						IFullIntegrationProvider
+					][]
+				).sort((a, b) => {
+					// If there is no query, we render first the already supported integrations
+					const aSupported = ALREADY_SUPPORTED_INTEGRATIONS.includes(
+						a[0]
+					);
+					const bSupported = ALREADY_SUPPORTED_INTEGRATIONS.includes(
+						b[0]
+					);
+
+					if (aSupported && !bSupported) return -1;
+					if (!aSupported && bSupported) return 1;
+
+					// Otherwise we leave them as they are
+					return (a[1].display_name || '').localeCompare(
+						b[1].display_name || '',
+						undefined,
+						{
+							sensitivity: 'base'
+						}
+					);
+				})
+			: filteredIntegrationEntries;
+
+	return (
+		<div>
+			<PageBackdrop />
+			<div className="gallery-page">
+				<div className="gallery-content-column">
+					<h1 className="gallery-page-title">Gallery</h1>
+
+					<section className="gallery-section">
+						<span className="gallery-section-header-container">
+							<h2 className="gallery-section-title">
+								Your projects
+							</h2>
+
+							{/* Search by project name */}
+							<div
+								className={`marketplace-search ${
+									showProjectSearch ? 'open' : ''
+								}`}
+							>
+								<button
+									type="button"
+									className="marketplace-search__icon"
+									aria-label={
+										showProjectSearch
+											? 'Close search'
+											: 'Open search'
+									}
+									onClick={() => {
+										setShowProjectSearch((s) => !s);
+									}}
+								>
+									<i
+										className={`fa-solid ${
+											showProjectSearch
+												? 'fa-xmark'
+												: 'fa-magnifying-glass'
+										}`}
+									></i>
+								</button>
+
+								<input
+									type="text"
+									value={projectQuery}
+									onChange={(e) =>
+										setProjectQuery(e.target.value)
+									}
+									onKeyDown={(e) => {
+										if (e.key === 'Escape') {
+											setShowProjectSearch(false);
+										}
+									}}
+									placeholder="Search projects..."
+									className="marketplace-search__input"
+								/>
+							</div>
+
+							{/* Layout View Mode Toggle */}
+							<div className="gallery-layout-toggle">
+								<button
+									type="button"
+									className={`gallery-layout-toggle__btn ${viewMode === 'grid' ? 'active' : ''}`}
+									onClick={() => handleViewModeChange('grid')}
+									title="Grid view"
+								>
+									<i className="fa-solid fa-table-cells"></i>
+								</button>
+								<button
+									type="button"
+									className={`gallery-layout-toggle__btn ${viewMode === 'rows' ? 'active' : ''}`}
+									onClick={() => handleViewModeChange('rows')}
+									title="List view"
+								>
+									<i className="fa-solid fa-list"></i>
+								</button>
+							</div>
+						</span>
+
+						<div
+							className={
+								viewMode === 'grid'
+									? 'gallery-projects-grid'
+									: 'gallery-projects-rows'
+							}
+						>
+							<CreateNewProject
+								onCreated={(proj) => {
+									const enrichedProj: Project = {
+										...proj,
+										assignedFallbackColor:
+											convertToPattern(5),
+										media: []
+									};
+									setProjects([enrichedProj, ...projects]);
+									setTotalProjectCount(
+										(prevCount) => prevCount + 1
+									);
+								}}
+								totalProjectCount={totalProjectCount}
+								viewMode={viewMode}
+							/>
+							{cloning.map((project) => (
+								<ProjectDuplicationCard
+									key={project.id}
+									project={project}
+									socket={socket}
+									onCloningComplete={(newProject) => {
+										setCloning((oldCloning) =>
+											oldCloning.filter(
+												(p) => p.id !== project.id
+											)
+										);
+										setProjects((oldProjects) => [
+											newProject,
+											...oldProjects
+										]);
+									}}
+									onCloningFailed={() => {
+										setCloning((oldCloning) =>
+											oldCloning.filter(
+												(p) => p.id !== project.id
+											)
+										);
+									}}
+									viewMode={viewMode}
+								/>
+							))}
+							{loadingOwnProjects && projects.length === 0 ? (
+								<LoadingCard viewMode={viewMode} />
+							) : projects.length === 0 &&
+							  debouncedQuery.trim() ? (
+								<p className="gallery-no-results">
+									No projects match “{projectQuery}”.
+								</p>
+							) : (
+								projects
+									.sort((p1, p2) =>
+										dayjs(p2.createdAt).diff(
+											dayjs(p1.createdAt)
+										)
+									)
+									.map((projectData: Project) => (
+										<GalleryCard
+											key={projectData.id}
+											project={projectData}
+											viewMode={viewMode}
+											coverPictureUrl={
+												projectData.media?.find(
+													(media) =>
+														media.type === 'cover'
+												)?.url
+											}
+											onClick={(e) => {
+												// Check if new tab
+												if (e.metaKey || e.ctrlKey) {
+													// Open same target in new tab
+													window.open(
+														`/ws/${activeWorkspace?.slug}/editor/${projectData.id}/main/latest`,
+														'_blank'
+													);
+													return;
+												}
+
+												navigate(
+													`/ws/${activeWorkspace?.slug}/editor/${projectData.id}/main/latest`
+												);
+											}}
+											options={[
+												{
+													// navigateTo: profilePath,
+													onClick: async () => {
+														Logger.log(
+															'Delete project clicked'
+														);
+														onDeleteProject(
+															projectData.id
+														);
+													},
+													iconEnd:
+														'fa-regular fa-trash-can',
+													color: 'error',
+													label: 'Delete'
+												},
+												{
+													onClick: async () => {
+														Logger.log(
+															'Copy project clicked'
+														);
+														onCloneProject(
+															projectData.id
+														);
+													},
+													iconEnd:
+														'fa-regular fa-copy',
+													label: 'Copy'
+												}
+											]}
+											popup={
+												<div className="tooltip gallery-card-tooltip">
+													{!!projectData.name && (
+														<>
+															<h3 className="gallery-card-tooltip__project-name">
+																{
+																	projectData.name
+																}
+															</h3>
+															<br />
+														</>
+													)}
+													{!!projectData.description && (
+														<>
+															<p className="gallery-card-tooltip__project-description">
+																{
+																	projectData.description
+																}
+															</p>
+															<br />
+														</>
+													)}
+													<p className="gallery-card-tooltip__helper-text">
+														Click on the card to
+														open project
+													</p>
+												</div>
+											}
+										/>
+									))
+							)}
+						</div>
+						{projects.length < totalProjectCount && (
+							<div className="gallery-load-more-container">
+								<button
+									type="button"
+									className="gallery-load-more-btn"
+									onClick={() =>
+										setOffset((prev) => prev + 15)
+									}
+									disabled={loadingOwnProjects}
+								>
+									{loadingOwnProjects ? (
+										<CircularProgress
+											size={16}
+											color="inherit"
+										/>
+									) : (
+										'Load more'
+									)}
+								</button>
+							</div>
+						)}
+					</section>
+
+					{!!templates.length && (
+						<section className="gallery-section">
+							<h2 className="gallery-section-title">Templates</h2>
+							<div className="gallery-projects-grid">
+								{loadingTemplates ? (
+									<LoadingCard />
+								) : (
+									templates.map((projectData: Project) => (
+										<GalleryCard
+											key={projectData.id}
+											project={projectData}
+											coverPictureUrl={
+												projectData.media?.find(
+													(media) =>
+														media.type === 'cover'
+												)?.url
+											}
+											onClick={() => {
+												setOpenTemplate(projectData);
+												navigate(
+													`/ws/${activeWorkspace?.slug}/gallery/use-template-project/${projectData.id}`
+												);
+											}}
+											popup={
+												<div className="tooltip gallery-card-tooltip">
+													{!!projectData.name && (
+														<>
+															<h3 className="gallery-card-tooltip__project-name">
+																{
+																	projectData.name
+																}
+															</h3>
+															<br />
+														</>
+													)}
+													{!!projectData.description && (
+														<>
+															<p className="gallery-card-tooltip__project-description">
+																{
+																	projectData.description
+																}
+															</p>
+															<br />
+														</>
+													)}
+													<p className="gallery-card-tooltip__helper-text">
+														Click to use as template
+														for a new project
+													</p>
+												</div>
+											}
+										/>
+									))
+								)}
+							</div>
+						</section>
+					)}
+
+					<section className="gallery-section">
+						<span className="gallery-section-header-container">
+							<i className="gallery-section-header-icon fa-solid fa-store"></i>
+							<h2 className="gallery-section-title">
+								Marketplace
+							</h2>
+							{/* <p className='gallery-section-description'>Coming soon</p> */}
+
+							{/* Search */}
+							<div
+								className={`marketplace-search ${
+									showMarketplaceSearch ? 'open' : ''
+								}`}
+							>
+								<button
+									type="button"
+									className="marketplace-search__icon"
+									aria-label={
+										showMarketplaceSearch
+											? 'Close search'
+											: 'Open search'
+									}
+									onClick={() => {
+										// Clicking the icon toggles input visibility.
+										setShowMarketplaceSearch((s) => !s);
+										if (
+											showMarketplaceSearch &&
+											marketplaceQuery
+										) {
+											setMarketplaceQuery('');
+										}
+									}}
+								>
+									<i
+										className={`fa-solid ${
+											showMarketplaceSearch
+												? 'fa-xmark'
+												: 'fa-magnifying-glass'
+										}`}
+									></i>
+								</button>
+
+								<input
+									type="text"
+									value={marketplaceQuery}
+									onChange={(e) =>
+										setMarketplaceQuery(e.target.value)
+									}
+									onKeyDown={(e) => {
+										if (e.key === 'Escape') {
+											setShowMarketplaceSearch(false);
+										}
+									}}
+									placeholder="Search integrations..."
+									className="marketplace-search__input"
+								/>
+							</div>
+						</span>
+
+						<div className="gallery-projects-grid">
+							{/* <MarketplaceCard
+								disabled
+								project={
+									{
+										name: 'Payments',
+										description: 'Add payments to your project',
+										id: 'payments-feature',
+										media: [],
+										assignedFallbackColor: 0,
+									} as any as Project
+								}
+							/>
+							<MarketplaceCard
+								disabled
+								project={
+									{
+										name: 'User auth',
+										description: 'Add signup and login to your project',
+										id: 'user-auth-feature',
+										media: [],
+										assignedFallbackColor: 1,
+									} as any as Project
+								}
+							/> */}
+
+							{loadingExternalIntegrations ? (
+								<LoadingCard />
+							) : integrationEntriesToRender.length === 0 &&
+							  marketplaceQuery.trim() ? (
+								<p className="gallery-no-results">
+									No integrations match “{marketplaceQuery}”.
+								</p>
+							) : (
+								integrationEntriesToRender.map(
+									([key, value], i) => {
+										const description =
+											describeIntegration(value);
+										return (
+											<MarketplaceCard
+												isPaid={PAID_INTEGRATIONS.includes(
+													key
+												)}
+												disabled={
+													!ALREADY_SUPPORTED_INTEGRATIONS.includes(
+														key
+													)
+												}
+												onClick={() => {
+													if (
+														ALREADY_SUPPORTED_INTEGRATIONS.includes(
+															key
+														)
+													) {
+														// Handle click for supported integrations
+														// Open small dialog to explain next steps
+														navigate(
+															`/ws/${activeWorkspace?.slug}/gallery/add-external-integration-to-project/${key}`,
+															{
+																state: {
+																	providerName:
+																		value.display_name
+																}
+															}
+														);
+													} else {
+														setRequestingIntegration(
+															{
+																key,
+																name: value.display_name
+															}
+														);
+													}
+												}}
+												tags={
+													ALREADY_SUPPORTED_INTEGRATIONS.includes(
+														key
+													)
+														? [
+																{
+																	label: (
+																		<span>
+																			<i className="fa-solid fa-check"></i>
+																			&nbsp;available
+																		</span>
+																	)
+																},
+																...(description.popular
+																	? [
+																			{
+																				label: 'popular',
+																				color: 'secondary' as const
+																			}
+																		]
+																	: [])
+															]
+														: [
+																...(requestedIntegrations.has(
+																	key
+																)
+																	? [
+																			{
+																				label: (
+																					<span>
+																						<i className="fa-solid fa-check"></i>
+																						&nbsp;Requested
+																					</span>
+																				),
+																				color: 'success' as const
+																			}
+																		]
+																	: []),
+																...(description.popular
+																	? [
+																			{
+																				label: 'popular',
+																				color: 'secondary' as const
+																			}
+																		]
+																	: [])
+															]
+												}
+												key={key}
+												disableTitleCapitalize
+												project={
+													{
+														name: value.display_name,
+														description:
+															description.description,
+														id: key,
+														media: [
+															{
+																url: `${envConfig.EXTERNAL_INTEGRATIONS_LOGOS_URL}/${key}.svg`,
+																type: 'icon'
+															}
+														],
+														assignedFallbackColor:
+															convertToPattern(
+																i + 1
+															)
+													} as any as Project
+												}
+											/>
+										);
+									}
+								)
+							)}
+						</div>
+					</section>
+				</div>
+			</div>
+
+			<a
+				href={`/ws/${activeWorkspace?.slug}/gallery`}
+				onClick={(e) => {
+					e.preventDefault();
+					if (activeWorkspace) {
+						navigate(`/ws/${activeWorkspace.id}/gallery`);
+					}
+				}}
+			>
+				<img className="gallery-page-logo" src={Logo} alt="Logo" />
+			</a>
+
+			{/* Workspace Badge + User Avatar Wrapper */}
+			<div className="gallery-top-controls">
+				{activeWorkspace && (
+					<div
+						// <a
+						className="workspace-badge"
+						title="Current Workspace"
+						// 	// @ts-ignore
+						// 	href={envConfig.stripe_personal_sub_mngmt_url}
+						// 	target='_blank'
+					>
+						<div className="workspace-badge__icon">
+							{activeWorkspace.name?.charAt(0)?.toUpperCase() ||
+								'W'}
+						</div>
+						<div className="workspace-badge__info">
+							<span className="workspace-badge__name">
+								{activeWorkspace.name}
+							</span>
+							<span className="workspace-badge__tier">
+								{activeWorkspace.planTier} plan
+							</span>
+						</div>
+						{/* </a> */}
+					</div>
+				)}
+				<CurrentUserAvatar
+					profilePagePath={`/ws/${activeWorkspace?.slug}/gallery/profile/{id}`}
+				/>
+			</div>
+
+			<Routes>
+				<Route
+					path="profile/:userId"
+					element={
+						<Dialog
+							onClose={() =>
+								navigate(`/ws/${activeWorkspace?.slug}/gallery`)
+							}
+						>
+							<UserProfileDialog
+								onClose={() =>
+									navigate(
+										`/ws/${activeWorkspace?.slug}/gallery`
+									)
+								}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path="add-external-integration-to-project/:providerKey"
+					element={<GalleryAddExternalIntegrationInfoDialog />}
+				/>
+				<Route
+					path="use-template-project/:templateId"
+					element={
+						<UseTemplateProjectDialog
+							project={openTemplate}
+							onProjectCreate={(newProjectId) =>
+								onCloneProject(newProjectId)
+							}
+						/>
+					}
+				/>
+			</Routes>
+
+			{requestingIntegration && (
+				<RequestIntegrationAccessDialog
+					integrationKey={requestingIntegration.key}
+					integrationName={requestingIntegration.name}
+					isAlreadyRequested={requestedIntegrations.has(
+						requestingIntegration.key
+					)}
+					onClose={(requested) => {
+						setRequestingIntegration(null);
+						if (requested) {
+							setRequestedIntegrations((prev) => {
+								const next = new Set(prev);
+								next.add(requestingIntegration.key);
+								return next;
+							});
+						}
+					}}
+				/>
+			)}
+		</div>
+	);
+};
+
+export default Gallery;