initial commit

fluxer_app/src/components/modals/InvitePagePreviewModal.tsx

@@ -0,0 +1,172 @@
+/*
+ * Copyright (C) 2026 Fluxer Contributors
+ *
+ * This file is part of Fluxer.
+ *
+ * Fluxer is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Fluxer is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Trans, useLingui} from '@lingui/react/macro';
+import clsx from 'clsx';
+import {observer} from 'mobx-react-lite';
+import React from 'react';
+import * as ModalActionCreators from '~/actions/ModalActionCreators';
+import type {GuildSplashCardAlignmentValue} from '~/Constants';
+import {GuildFeatures, GuildSplashCardAlignment} from '~/Constants';
+import {AuthBackground} from '~/components/auth/AuthBackground';
+import {AuthBottomLink} from '~/components/auth/AuthBottomLink';
+import {AuthCardContainer} from '~/components/auth/AuthCardContainer';
+import authPageStyles from '~/components/auth/AuthPageStyles.module.css';
+import {PreviewGuildInviteHeader} from '~/components/auth/InviteHeader';
+import {MockMinimalRegisterForm} from '~/components/auth/MockMinimalRegisterForm';
+import authLayoutStyles from '~/components/layout/AuthLayout.module.css';
+import {Button} from '~/components/uikit/Button/Button';
+import {CardAlignmentControls} from '~/components/uikit/CardAlignmentControls/CardAlignmentControls';
+import {useAuthBackground} from '~/hooks/useAuthBackground';
+import foodPatternUrl from '~/images/i-like-food.svg';
+import GuildMemberStore from '~/stores/GuildMemberStore';
+import GuildStore from '~/stores/GuildStore';
+import PresenceStore from '~/stores/PresenceStore';
+import WindowStore from '~/stores/WindowStore';
+import * as AvatarUtils from '~/utils/AvatarUtils';
+import styles from './InvitePagePreviewModal.module.css';
+import * as Modal from './Modal';
+
+interface InvitePagePreviewModalProps {
+	guildId: string;
+	previewSplashUrl?: string | null;
+	previewIconUrl?: string | null;
+	previewName?: string | null;
+	previewSplashAlignment?: GuildSplashCardAlignmentValue;
+	onAlignmentChange?: (alignment: GuildSplashCardAlignmentValue) => void;
+}
+
+const ALIGNMENT_MIN_WIDTH = 1600;
+
+export const InvitePagePreviewModal: React.FC<InvitePagePreviewModalProps> = observer(
+	({guildId, previewSplashUrl, previewIconUrl, previewName, previewSplashAlignment, onAlignmentChange}) => {
+		const {t} = useLingui();
+		const guild = GuildStore.getGuild(guildId);
+		const initialAlignment = previewSplashAlignment ?? guild?.splashCardAlignment ?? GuildSplashCardAlignment.CENTER;
+		const [localAlignment, setLocalAlignment] = React.useState<GuildSplashCardAlignmentValue>(initialAlignment);
+		const alignmentControlsEnabled = WindowStore.windowSize.width >= ALIGNMENT_MIN_WIDTH;
+
+		const splashUrl = React.useMemo(() => {
+			if (previewSplashUrl) return previewSplashUrl;
+			if (guild?.splash) {
+				return AvatarUtils.getGuildSplashURL({id: guild.id, splash: guild.splash}, 4096);
+			}
+			return null;
+		}, [previewSplashUrl, guild?.id, guild?.splash]);
+
+		const {patternReady, splashLoaded, splashDimensions} = useAuthBackground(splashUrl, foodPatternUrl);
+		const shouldShowSplash = Boolean(splashUrl && splashDimensions);
+
+		const handleClose = React.useCallback(() => {
+			ModalActionCreators.pop();
+		}, []);
+
+		const handleAlignmentChange = React.useCallback(
+			(alignment: GuildSplashCardAlignmentValue) => {
+				setLocalAlignment(alignment);
+				onAlignmentChange?.(alignment);
+			},
+			[onAlignmentChange],
+		);
+
+		if (!guild) return null;
+
+		const splashAlignment = localAlignment;
+
+		const isVerified = guild.features.has(GuildFeatures.VERIFIED);
+		const presenceCount = PresenceStore.getPresenceCount(guildId);
+		const memberCount = GuildMemberStore.getMemberCount(guildId);
+
+		return (
+			<Modal.Root size="fullscreen" className={styles.previewModal} onClose={handleClose}>
+				<Modal.ScreenReaderLabel text={t`Invite Page Preview`} />
+
+				<div className={styles.previewPillContainer}>
+					<div className={styles.previewPill}>
+						<span className={styles.previewPillText}>
+							<Trans>You're in preview mode</Trans>
+						</span>
+						<Button small variant="primary" onClick={handleClose} className={styles.exitButton}>
+							<Trans>Exit Preview</Trans>
+						</Button>
+					</div>
+				</div>
+
+				<div className={styles.alignmentControlsContainer}>
+					<CardAlignmentControls
+						value={localAlignment}
+						onChange={handleAlignmentChange}
+						disabled={!alignmentControlsEnabled}
+						disabledTooltipText={t`Alignment controls are only available on wider screens`}
+						tooltipPosition="top"
+					/>
+				</div>
+
+				<div className={styles.previewContent}>
+					<AuthBackground
+						className={clsx(styles.background, !shouldShowSplash && authLayoutStyles.patternHost)}
+						splashUrl={splashUrl}
+						splashLoaded={splashLoaded}
+						splashDimensions={splashDimensions}
+						patternReady={patternReady}
+						patternImageUrl={foodPatternUrl}
+						splashAlignment={splashAlignment}
+						useFullCover={true}
+					/>
+
+					<div className={styles.foreground}>
+						<div
+							className={clsx(
+								authLayoutStyles.leftSplit,
+								splashAlignment === GuildSplashCardAlignment.LEFT && authLayoutStyles.alignLeft,
+								splashAlignment === GuildSplashCardAlignment.RIGHT && authLayoutStyles.alignRight,
+							)}
+						>
+							<div className={authLayoutStyles.leftSplitWrapper}>
+								<div className={authLayoutStyles.leftSplitAnimated}>
+									<AuthCardContainer
+										showLogoSide={true}
+										isInert={true}
+										className={clsx(authLayoutStyles.cardContainer, styles.cardContainer)}
+									>
+										<PreviewGuildInviteHeader
+											guildId={guild.id}
+											guildName={guild.name}
+											guildIcon={guild.icon}
+											isVerified={isVerified}
+											presenceCount={presenceCount}
+											memberCount={memberCount}
+											previewIconUrl={previewIconUrl}
+											previewName={previewName}
+										/>
+
+										<div className={authPageStyles.container}>
+											<MockMinimalRegisterForm submitLabel={<Trans>Create account</Trans>} />
+											<AuthBottomLink variant="login" to="/login" />
+										</div>
+									</AuthCardContainer>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</Modal.Root>
+		);
+	},
+);