Revamp information dialogs (e2c95060) · Commits · FQQD / Canvas

packages/client/src/components/App.tsx

+4 −0

Original line number	Diff line number	Diff line
		@@ -21,6 +21,8 @@ import { DynamicModals } from "./DynamicModals";
		import { ToastWrapper } from "./ToastWrapper";
		import { Moderator, ModeratorContext } from "../Moderator/Moderator";
		import { DialogContext } from "../contexts/DialogContext";
		import { ChatInfoDialog } from "./Chat/ChatInfoDialog";
		import { LoginModal } from "./LoginModal/LoginModal";

		// const Chat = lazy(() => import("./Chat/Chat"));

		@@ -152,6 +154,8 @@ const AppInner = () => {

		<ProfileModal />
		<WelcomeModal />
		<ChatInfoDialog />
		<LoginModal />
		<Moderator />

		<ToastWrapper />

packages/client/src/components/Chat/ChatInfoDialog.tsx

0 → 100644

+111 −0

Original line number	Diff line number	Diff line
		import {
		Button,
		Link,
		Modal,
		ModalBody,
		ModalContent,
		ModalFooter,
		ModalHeader,
		useDisclosure,
		} from "@nextui-org/react";
		import { useDialog } from "../../contexts/DialogContext";
		import { SiDiscord, SiMatrix } from "@icons-pack/react-simple-icons";
		import { useCallback, useState } from "react";
		import {
		DISCORD_INVITE,
		ELEMENT_WITH_ROOM,
		MATRIX_ALIAS,
		MATRIX_INVITE,
		} from "../../lib/constants";

		export const ChatInfoDialog = () => {
		const { state, dispatch } = useDialog();
		const { isOpen, onClose } = useDisclosure({
		isOpen: "CHAT_INFO" in state.dialogs,
		onClose: () => dispatch({ action: "CLOSE_DIALOG", dialogId: "CHAT_INFO" }),
		});
		const [step, setStep] = useState<"WELCOME" \| "MATRIX">("WELCOME");

		const WelcomeStep = useCallback(
		() => (
		<>
		<div className="flex flex-wrap gap-2 justify-center">
		<p>
		<strong>
		The Canvas chat is bridged between{" "}
		<Link href="https://matrix.org" target="_blank">
		Matrix
		</Link>{" "}
		and Discord,
		</strong>{" "}
		you are welcome to join on either side of the bridge, or both if you
		want
		</p>
		<Button size="lg" variant="ghost" onPress={() => setStep("MATRIX")}>
		<SiMatrix size={24} />
		Matrix
		</Button>
		<Button
		as={Link}
		href={DISCORD_INVITE}
		target="_blank"
		size="lg"
		variant="ghost"
		>
		<SiDiscord size={24} />
		Discord
		</Button>
		</div>
		</>
		),
		[]
		);

		const MatrixStep = useCallback(
		() => (
		<>
		<strong>Do you already have a Matrix account?</strong>
		<p>
		Join the Matrix space:{" "}
		<Link href={MATRIX_INVITE} target="_blank" underline="always">
		{MATRIX_ALIAS}
		</Link>
		</p>
		<strong>Don't have a Matrix account?</strong>
		<p>
		You can use your Fediverse account{" "}
		<Link href={ELEMENT_WITH_ROOM} target="_blank">
		on chat.fediverse.events (aftermath.gg)
		</Link>{" "}
		and{" "}
		<Link href={ELEMENT_WITH_ROOM} target="_blank">
		join {MATRIX_ALIAS}
		</Link>
		</p>
		</>
		),
		[]
		);

		return (
		<Modal isOpen={isOpen} onClose={onClose} isDismissable placement="center">
		<ModalContent>
		{(onClose) => (
		<>
		<ModalHeader>Canvas Chat</ModalHeader>
		<ModalBody>
		{step === "WELCOME" && <WelcomeStep />}
		{step === "MATRIX" && <MatrixStep />}
		</ModalBody>
		<ModalFooter>
		<Button onPress={onClose}>Close</Button>
		{step !== "WELCOME" && (
		<Button onPress={() => setStep("WELCOME")}>Back</Button>
		)}
		</ModalFooter>
		</>
		)}
		</ModalContent>
		</Modal>
		);
		};

packages/client/src/components/Chat/OpenChatButton.tsx

+12 −9

Original line number	Diff line number	Diff line
		import { Badge, Button } from "@nextui-org/react";
		import { useChatContext } from "../../contexts/ChatContext";
		import { useAppContext } from "../../contexts/AppContext";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faComments } from "@fortawesome/free-solid-svg-icons";
		import { useDialog } from "../../contexts/DialogContext";

		const OpenChatButton = () => {
		const { config } = useAppContext();
		const { notificationCount, doLogin } = useChatContext();
		const { dispatch } = useDialog();
		const { notificationCount } = useChatContext();

		return (
		<Badge
		@@ -15,12 +15,15 @@ const OpenChatButton = () => {
		color="danger"
		size="sm"
		>
		{config?.chat?.element_host && (
		<Button onPress={doLogin} variant="faded">
		<Button
		onPress={() =>
		dispatch({ action: "OPEN_DIALOG", dialog: { id: "CHAT_INFO" } })
		}
		variant="faded"
		>
		<FontAwesomeIcon icon={faComments} />
		<p>Chat</p>
		</Button>
		)}
		</Badge>
		);
		};

packages/client/src/components/Info/InfoButtons.tsx

+3 −2

Original line number	Diff line number	Diff line
		@@ -5,6 +5,7 @@ import {
		SiMastodon,
		SiMatrix,
		} from "@icons-pack/react-simple-icons";
		import { DISCORD_INVITE, MATRIX_INVITE } from "../../lib/constants";

		export const InfoButtons = () => {
		return (
		@@ -12,7 +13,7 @@ export const InfoButtons = () => {
		<Button
		as={Link}
		size="sm"
		href="https://matrix.to/#/#canvas-meta:aftermath.gg?via=matrix.org"
		href={MATRIX_INVITE}
		target="_blank"
		variant="ghost"
		>
		@@ -22,7 +23,7 @@ export const InfoButtons = () => {
		<Button
		as={Link}
		size="sm"
		href="https://discord.gg/mEUqXZw8kR"
		href={DISCORD_INVITE}
		target="_blank"
		variant="ghost"
		>

packages/client/src/components/LoginModal/LoginModal.tsx

+22 −11

Original line number	Diff line number	Diff line
		import { Modal, ModalBody, ModalContent, ModalHeader } from "@nextui-org/react";
		import {
		Modal,
		ModalBody,
		ModalContent,
		ModalHeader,
		useDisclosure,
		} from "@nextui-org/react";
		import { Inhibit } from "./Inhibit";
		import { Trust } from "./Trust";
		import { useDialog } from "../../contexts/DialogContext";
		import { Normal } from "./Normal";

		export const LoginModal = () => {
		const { state, dispatch } = useDialog();
		const { isOpen, onClose } = useDisclosure({
		isOpen: "LOGIN_INFO" in state.dialogs,
		onClose: () => dispatch({ action: "CLOSE_DIALOG", dialogId: "LOGIN_INFO" }),
		});

		const myState = state.dialogs.LOGIN_INFO;

		export const LoginModal = ({
		mode,
		onClose,
		}: {
		mode?: string;
		onClose: () => any;
		}) => {
		return (
		<Modal isOpen={Boolean(mode)} onOpenChange={onClose}>
		<Modal isOpen={isOpen} onOpenChange={onClose}>
		<ModalContent>
		{(_onClose) => (
		<>
		<ModalHeader>Login</ModalHeader>
		<ModalBody>
		{mode === "INHIBIT" && <Inhibit />}
		{mode === "TRUST" && <Trust />}
		{myState?.mode === "INHIBIT" && <Inhibit />}
		{myState?.mode === "TRUST" && <Trust />}
		</ModalBody>
		{myState?.mode === "NORMAL" && <Normal state={myState} />}
		</>
		)}
		</ModalContent>