draft: reformat ui (20293dbc) · Commits · sc07 / Canvas

packages/client/src/board.scss

+2 −0

Original line number	Diff line number	Diff line
		.board-wrapper {
		/* #region these properties allow for correct panning & zooming */
		position: fixed;
		top: 0;
		left: 0;
		@@ -6,6 +7,7 @@
		bottom: 0;
		width: 100vw;
		height: 100vh;
		/* #endregion */

		display: flex;
		justify-content: center;

packages/client/src/components/App.tsx

+43 −35

Original line number	Diff line number	Diff line
		@@ -5,7 +5,7 @@ import { TemplateContext } from "../contexts/TemplateContext";
		import { SettingsSidebar } from "./Settings/SettingsSidebar";
		import { DebugModal } from "./Debug/DebugModal";
		import { ToolbarWrapper } from "./Toolbar/ToolbarWrapper";
		import { useEffect } from "react";
		import React, { lazy, useEffect } from "react";
		import { SWRConfig } from "swr";
		import { ChatContext } from "../contexts/ChatContext";

		@@ -25,15 +25,15 @@ import { ChatInfoDialog } from "./Chat/ChatInfoDialog";
		import { LoginModal } from "./LoginModal/LoginModal";
		import { ThanksForJoining } from "./EventDates/ThanksForJoining";

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

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

		// const DynamicallyLoadChat = () => {
		// const { loadChat } = useAppContext();
		const DynamicallyLoadChat = () => {
		const { loadChat } = useAppContext();

		// return <React.Suspense>{loadChat && <Chat />}</React.Suspense>;
		// };
		return <React.Suspense>{loadChat && <Chat />}</React.Suspense>;
		};

		// get access to context data
		const AppInner = () => {
		@@ -47,7 +47,7 @@ const AppInner = () => {
		if (params.has("loginToken")) {
		if (!config) {
		console.warn(
		"[App] loginToken parsing is delayed because config is not available"
		"[App] loginToken parsing is delayed because config is not available",
		);
		return;
		}
		@@ -75,7 +75,7 @@ const AppInner = () => {
		type: "m.login.token",
		token,
		}),
		}
		},
		);

		const loginRes = await loginReq.json();
		@@ -89,20 +89,20 @@ const AppInner = () => {

		localStorage.setItem(
		"matrix.access_token",
		loginRes.access_token + ""
		loginRes.access_token + "",
		);
		localStorage.setItem("matrix.device_id", loginRes.device_id + "");
		localStorage.setItem("matrix.user_id", loginRes.user_id + "");

		if (shouldCloseWindow) {
		console.log(
		"[Chat] Path matches autoclose, attempting to close window..."
		"[Chat] Path matches autoclose, attempting to close window...",
		);
		window.close();
		alert("You can close this window and return to the other tab :)");
		} else {
		console.log(
		"[Chat] Path doesn't match autoclose, not doing anything"
		"[Chat] Path doesn't match autoclose, not doing anything",
		);
		}
		break;
		@@ -114,7 +114,7 @@ const AppInner = () => {
		"[Chat] Failed to login\n" +
		loginRes.errcode +
		" " +
		loginRes.error
		loginRes.error,
		);
		break;
		case 429:
		@@ -124,14 +124,14 @@ const AppInner = () => {
		"s\n" +
		loginRes.errcode +
		" " +
		loginRes.error
		loginRes.error,
		);
		break;
		default:
		alert(
		"Error " +
		loginReq.status +
		" returned when trying to login to chat"
		" returned when trying to login to chat",
		);
		}
		}
		@@ -140,9 +140,16 @@ const AppInner = () => {

		return (
		<>
		<Header />
		{config && <CanvasWrapper />}
		<ToolbarWrapper />
		<div id="main-ui" className="w-screen h-screen">
		<Header style={{ gridArea: "header" }} />
		<ToolbarWrapper
		style={{
		gridArea: "toolbar",
		}}
		/>
		<div className="bg-amber-500" style={{ gridArea: "lsidebar" }} />
		<div className="bg-amber-500" style={{ gridArea: "rsidebar" }} />

		<DynamicallyLoadChat />

		@@ -162,6 +169,7 @@ const AppInner = () => {
		<ToastWrapper />
		<DynamicModals />
		<ThanksForJoining />
		</div>
		</>
		);
		};

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

+5 −4

Original line number	Diff line number	Diff line
		import { useEffect, useRef, useState } from "react";
		import { faComments } from "@fortawesome/free-solid-svg-icons";
		import { useAppContext } from "../../contexts/AppContext";
		import { SidebarBase } from "../SidebarBase";

		const Chat = () => {
		const { chatSidebar, setChatSidebar } = useAppContext();
		const { state } = useAppContext();

		return <div>hi</div>;

		return (
		<SidebarBase
		shown={chatSidebar}
		setSidebarShown={setChatSidebar}
		shown={state.get.chat.shown}
		setSidebarShown={(shown) => state.set({ action: "chat_shown", shown })}
		icon={faComments}
		title="Chat"
		description=""

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

+3 −5

Original line number	Diff line number	Diff line
		@@ -4,8 +4,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faComments } from "@fortawesome/free-solid-svg-icons";
		import { useDialog } from "../../contexts/DialogContext";
		import { Button } from "../core/Button";
		import { useAppContext } from "../../contexts/AppContext";

		const OpenChatButton = () => {
		const { state } = useAppContext();
		const { dispatch } = useDialog();
		const { notificationCount } = useChatContext();

		@@ -16,11 +18,7 @@ const OpenChatButton = () => {
		color="danger"
		size="sm"
		>
		<Button
		onPress={() =>
		dispatch({ action: "OPEN_DIALOG", dialog: { id: "CHAT_INFO" } })
		}
		>
		<Button onPress={() => state.set({ action: "chat_shown", shown: true })}>
		<FontAwesomeIcon icon={faComments} />
		<p>Chat</p>
		</Button>

packages/client/src/components/Header/Header.tsx

+3 −4

Original line number	Diff line number	Diff line
		@@ -3,12 +3,13 @@ import { useAppContext } from "../../contexts/AppContext";
		import { EventInfoOverlay } from "../EventInfoOverlay";
		import { HeaderLeft } from "./HeaderLeft";
		import { HeaderRight } from "./HeaderRight";
		import type React from "react";

		export const Header = () => {
		export const Header = ({ ...props }: React.HTMLProps<HTMLElement>) => {
		const { connected } = useAppContext();

		return (
		<header id="main-header">
		<header id="main-header" {...props}>
		{import.meta.env.VITE_INCLUDE_EVENT_INFO && <EventInfoOverlay />}
		<div className="flex justify-between w-full">
		<HeaderLeft />
		@@ -24,5 +25,3 @@ export const Header = () => {
		</header>
		);
		};