2026 Event Details (eb20db1e) · Commits · sc07 / Canvas · GitLab

.vscode/tasks.json

+17 −8

Original line number	Diff line number	Diff line
		@@ -6,34 +6,43 @@
		{
		"label": "Start Dev",
		"group": "build",
		"dependsOn": ["dev: start server", "dev: start client"]
		"dependsOn": [
		"dev: start server",
		"dev: start client"
		]
		},
		{
		"label": "dev: start server",
		"command": "yarn",
		"args": ["run", "dev:server"],
		"args": [
		"run",
		"dev:server"
		],
		"presentation": {
		"echo": true,
		"reveal": "always",
		"focus": false,
		"panel": "shared",
		"showReuseMessage": true,
		"clear": false,
		"clear": false
		},
		"problemMatcher": []
		},
		{
		"label": "dev: start client",
		"command": "yarn",
		"args": ["run", "dev:client"],
		"args": [
		"run",
		"dev:client"
		],
		"presentation": {
		"echo": true,
		"reveal": "always",
		"focus": false,
		"panel": "shared",
		"showReuseMessage": true,
		"clear": false,
		},
		},

		"clear": false
		}
		}
		]
		}
		No newline at end of file

packages/client/package.json

+1 −1

Original line number	Diff line number	Diff line
		@@ -15,7 +15,7 @@
		"@fortawesome/free-brands-svg-icons": "^7.2.0",
		"@fortawesome/free-solid-svg-icons": "^7.2.0",
		"@fortawesome/react-fontawesome": "^3.3.1",
		"@heroui/react": "^2.8.9",
		"@heroui/react": "^2.8.10",
		"@icons-pack/react-simple-icons": "^13.11.2",
		"@sc07-canvas/chat": "workspace:^",
		"@sc07-canvas/lib": "workspace:^",

packages/client/src/assets/cinny.svg

0 → 100644

+19 −0

Original line number	Diff line number	Diff line
		<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In -->
		<svg version="1.1"
		xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
		x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
		<defs>
		</defs>
		<g>
		<g>
		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
		</g>
		<g>
		<path d="M9,0C4,0,0,4,0,9c0,5,4,9,9,9c5,0,9-4,9-9C18,4,14,0,9,0z M1.2,10.8l3.5-2.3c0-0.1,0-0.2,0-0.3c0-1.8,1.3-3.2,3.1-3.4
		c0.1,0,0.2,0,0.4,0c1.2,0,2.3,0.6,2.9,1.6c0.3-0.1,0.6-0.1,0.9-0.1c0.4,0,0.8,0,1.2,0.1c0.7,0.2,1.4,0.5,2,0.9
		C14.6,7.1,14,7,13.3,7c-1.2,0-2.2,0.4-2.9,1.4c-0.7,0.9-1.1,2-1.1,3.2c0,1.5-0.4,2.9-1.3,4.2c-0.3,0.4-0.5,0.7-0.8,1
		C4.2,16.1,1.9,13.8,1.2,10.8z"/>
		<circle cx="9.5" cy="6.4" r="0.5"/>
		</g>
		</g>
		</svg>
		No newline at end of file

packages/client/src/components/App.tsx

+4 −4

Original line number	Diff line number	Diff line
		@@ -20,9 +20,9 @@ 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";
		import { ThanksForJoining } from "./EventDates/ThanksForJoining";
		import { LoginModal } from "./Login/LoginModal";
		import { Chat, ChatContext } from "./Chat/utils";
		import { EventInfoModal } from "./EventInfo/EventInfo";

		console.log("Client init with version " + __COMMIT_HASH__);

		@@ -53,14 +53,14 @@ const AppInner = () => {
		<AuthErrors />

		<ProfileModal />
		<WelcomeModal />
		{/* <WelcomeModal /> */}
		<ChatInfoDialog />
		<LoginModal />
		<Moderator />

		<ToastWrapper />
		<DynamicModals />
		<ThanksForJoining />
		<EventInfoModal />
		</div>
		</>
		);

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

+178 −62

Original line number	Diff line number	Diff line
		import {
		Alert,
		Divider,
		Link,
		Modal,
		ModalBody,
		ModalContent,
		ModalFooter,
		ModalHeader,
		Table,
		TableBody,
		TableCell,
		TableColumn,
		TableHeader,
		TableRow,
		useDisclosure,
		} from "@heroui/react";
		import { useDialog } from "../../contexts/DialogContext";
		@@ -12,11 +20,12 @@ import { SiDiscord, SiMatrix } from "@icons-pack/react-simple-icons";
		import { useCallback, useState } from "react";
		import {
		DISCORD_INVITE,
		ELEMENT_WITH_ROOM,
		MATRIX_ALIAS,
		MATRIX_INVITE,
		MATRIX_URL,
		} from "../../lib/constants";
		import { Button } from "../core/Button";
		import CinnyLogo from "@/assets/cinny.svg";

		export const ChatInfoDialog = () => {
		const { state, dispatch } = useDialog();
		@@ -25,76 +34,143 @@ export const ChatInfoDialog = () => {
		onClose: () => dispatch({ action: "CLOSE_DIALOG", dialogId: "CHAT_INFO" }),
		});
		const [step, setStep] = useState<"WELCOME" \| "MATRIX">("WELCOME");
		const [legacyElementDialog, setLegacyElementDialog] = useState(false);

		const WelcomeStep = useCallback(
		() => (
		({ openLegacy }: { openLegacy: () => unknown }) => (
		<>
		<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
		The Canvas event chat is available a couple different places, take
		your pick!
		</p>
		<Button size="lg" variant="ghost" onPress={() => setStep("MATRIX")}>
		<SiMatrix size={24} />
		Matrix
		<div className="flex flex-row justify-center items-center w-full">
		<Button
		as={Link}
		size="lg"
		variant="ghost"
		href="https://chat.fediverse.events/switch/cinny"
		target="_blank"
		aria-label="Open Canvas' Matrix space using Cinny"
		>
		<img src={CinnyLogo} className="h-8" />
		<div className="inline-flex flex-col">
		<span>Matrix</span>
		<span className="text-xs text-default-500">using Cinny</span>
		</div>
		</Button>
		</div>
		<div className="flex flex-row justify-center items-center w-full">
		<div className="text-sm *:text-sm">
		or use{" "}
		<Link href="#" onPress={openLegacy}>
		the legacy Element
		</Link>
		</div>
		</div>
		<Divider />
		<span className="text-center">Also available via...</span>

		<div className="flex flex-row justify-center items-center w-full gap-1">
		<Button variant="ghost" onPress={() => setStep("MATRIX")}>
		<SiMatrix size={20} />
		<div className="inline-flex flex-col *:text-left">
		<span>Matrix</span>
		<span className="text-xs text-default-500">{MATRIX_ALIAS}</span>
		</div>
		</Button>
		<Button
		as={Link}
		href={DISCORD_INVITE}
		target="_blank"
		size="lg"
		variant="ghost"
		>
		<SiDiscord size={24} />
		<SiDiscord size={20} />
		Discord
		</Button>
		</div>

		<span className="text-center text-xs *:text-xs">
		Canvas DMs will be directed towards your <code>fediverse.ooo</code>{" "}
		Matrix accounts at this time{" "}
		<Link
		href="https://sc07.dev/sc07/canvas/-/work_items/229"
		target="_blank"
		>
		(tracked #229)
		</Link>
		</span>
		</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>
		Canvas supplies Matrix accounts using <code>fediverse.ooo</code>,
		using your existing Fediverse account. (eg.{" "}
		<code>@grant@grants.cafe</code> becomes{" "}
		<code>@grant=40grants.cafe:fediverse.ooo</code>)
		</p>
		<div className="flex flex-col gap-1">
		<Button
		as={Link}
		size="lg"
		variant="ghost"
		href="https://chat.fediverse.events/switch/cinny"
		target="_blank"
		aria-label="Open Canvas' Matrix space using Cinny"
		>
		<img src={CinnyLogo} className="h-8" />
		<div className="inline-flex flex-col *:text-center">
		<span>Matrix</span>
		<span className="text-xs text-default-500">using Cinny</span>
		</div>
		</Button>
		<div className="flex flex-row gap-1 *:grow flex-wrap">
		<Button
		as={Link}
		href={MATRIX_INVITE}
		target="_blank"
		variant="ghost"
		>
		<div className="inline-flex flex-col *:text-center">
		<span>{MATRIX_ALIAS}</span>
		<span className="text-xs text-default-500">
		using matrix.to
		</span>
		</div>
		</Button>
		{/* MSC2312 */}
		<Button as={Link} href={MATRIX_URL} target="_blank" variant="ghost">
		<div className="inline-flex flex-col *:text-center">
		<span>{MATRIX_ALIAS}</span>
		<span className="text-xs text-default-500">using matrix:</span>
		</div>
		</Button>
		</div>
		</div>
		</>
		),
		[]
		[],
		);

		return (
		<>
		<Modal isOpen={isOpen} onClose={onClose} isDismissable placement="center">
		<ModalContent>
		{(onClose) => (
		<>
		<ModalHeader>Canvas Chat</ModalHeader>
		<ModalBody>
		{step === "WELCOME" && <WelcomeStep />}
		{step === "WELCOME" && (
		<WelcomeStep
		openLegacy={() => setLegacyElementDialog(true)}
		/>
		)}
		{step === "MATRIX" && <MatrixStep />}
		</ModalBody>
		<ModalFooter>
		@@ -107,5 +183,45 @@ export const ChatInfoDialog = () => {
		)}
		</ModalContent>
		</Modal>
		<Modal
		isOpen={legacyElementDialog}
		onClose={() => setLegacyElementDialog(false)}
		isDismissable
		placement="center"
		>
		<ModalContent>
		{(onClose) => (
		<>
		<ModalHeader>Legacy Element Chat</ModalHeader>
		<ModalBody>
		<Alert
		color="warning"
		title="Deprecated"
		description="We are migrating away from the Element client"
		/>
		<p>
		This is given as an option for people who did not setup
		encryption key backups.{" "}
		<strong>If you do not set up this,</strong> you will be unable
		to read encrypted messages (like DMs).
		</p>
		<p>This client option will disappear eventually.</p>
		</ModalBody>
		<ModalFooter>
		<Button onPress={onClose}>Back</Button>
		<Button
		color="warning"
		as={Link}
		href="https://chat.fediverse.events/switch/element"
		target="_blank"
		>
		Open Element
		</Button>
		</ModalFooter>
		</>
		)}
		</ModalContent>
		</Modal>
		</>
		);
		};