Commit 2155bbc5 authored by Grant's avatar Grant
Browse files

draft: reformat ui

parent 4b23696c

packages/client/src/components/App.tsx

+31 −85
Original line number Diff line number Diff line 
import "react-toastify/dist/ReactToastify.css";



import { useEffect, useState } from "react";

import { SWRConfig } from "swr";



import AudioContext from "@/contexts/AudioContext";

import { CaptureContext } from "@/contexts/CaptureContext";

import PanelContext, { usePanel } from "@/contexts/PanelContext";



import { Header } from "./Header/Header";

import { AppContext, useAppContext } from "../contexts/AppContext";

import { DialogContext } from "../contexts/DialogContext";

import { TemplateContext } from "../contexts/TemplateContext";

import { KeybindManager } from "../lib/keybinds";

import { Moderator, ModeratorContext } from "../Moderator/Moderator";

import { AuthErrors } from "./AuthErrors";

import { CanvasWrapper } from "./CanvasWrapper";

import { ChatInfoDialog } from "./Chat/ChatInfoDialog";

import { Chat, ChatContext } from "./Chat/utils";

import { ColorPickFeedback } from "./ColorPickFeedback";

import { TemplateContext } from "../contexts/TemplateContext";

import { SettingsSidebar } from "./Settings/SettingsSidebar";

import { DebugModal } from "./Debug/DebugModal";

import { DynamicModals } from "./DynamicModals";

import { EventInfoModal } from "./EventInfo/EventInfo";

import { Header } from "./Header/Header";

import { InfoSidebar } from "./Info/InfoSidebar";

import { MailingListsModal } from "./Info/MailingListsModal";

import { KeybindModal } from "./KeybindModal";

import { LoginModal } from "./Login/LoginModal";

import { ToolbarWrapper } from "./Toolbar/ToolbarWrapper";

import { SWRConfig } from "swr";



import "react-toastify/dist/ReactToastify.css";

import { AuthErrors } from "./AuthErrors";

import "../lib/keybinds";

import { PixelWhoisSidebar } from "./PixelSidebar/PixelWhoisSidebar";

import { KeybindModal } from "./KeybindModal";

import { ProfileModal } from "./Profile/ProfileModal";

import { SettingsSidebar } from "./Settings/SettingsSidebar";

import { WelcomeModal } from "./Welcome/WelcomeModal";

import { InfoSidebar } from "./Info/InfoSidebar";

import { DynamicModals } from "./DynamicModals";

import { ToastWrapper } from "./ToastWrapper";

import { ToolbarWrapper } from "./Toolbar/ToolbarWrapper";

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 { Chat, ChatContext } from "./Chat/utils";



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



// get access to context data

const AppInner = () => {

  const { config, settings } = useAppContext();

  const Panel = usePanel();

  const keybindingsEnabled = settings.get["keybindings.enabled"];



  const [uiHidden, setUiHidden] = useState(false);



  useEffect(() => {

    KeybindManager.setEnabled(keybindingsEnabled);

  }, [keybindingsEnabled]);



  useEffect(() => {

    const toggleUi = () => setUiHidden((hidden) => !hidden);



    KeybindManager.on("TOGGLE_UI", toggleUi);



    return () => {

      KeybindManager.off("TOGGLE_UI", toggleUi);

    };

  }, []);



  useEffect(() => {

    const toggleSettings = () =>

      Panel.dispatch(["settings", Panel.state.settings ? undefined : true]);

    const toggleInfo = () =>

      Panel.dispatch(["info", Panel.state.info ? undefined : true]);



    KeybindManager.on("TOGGLE_SETTINGS", toggleSettings);

    KeybindManager.on("TOGGLE_INFO", toggleInfo);



    return () => {

      KeybindManager.off("TOGGLE_SETTINGS", toggleSettings);

      KeybindManager.off("TOGGLE_INFO", toggleInfo);

    };

  }, [Panel.dispatch, Panel.state.info, Panel.state.settings]);

  const { config } = useAppContext();



  return (

    <>

      {config && <CanvasWrapper />}

      <ColorPickFeedback />

      <div

        id="main-ui"

        aria-hidden={uiHidden}

        inert={uiHidden}

        className={["w-screen h-svh", uiHidden && "main-ui--hidden"]

          .filter(Boolean)

          .join(" ")}

      >

      <div id="main-ui" className="w-screen h-screen">

        <Header className="w-full" style={{ gridArea: "header" }} />

        <ToolbarWrapper

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



        <ProfileModal />

        <WelcomeModal />

        <ChatInfoDialog />

        <LoginModal />

        <Moderator />



        <ToastWrapper />

        <DynamicModals />

        <EventInfoModal />

        <MailingListsModal />

        <ThanksForJoining />

      </div>

    </>

  );
@@ -124,19 +76,13 @@ const App = () => { 
        }}

      >

        <AppContext>

          <AudioContext>

            <PanelContext>

          <DialogContext>

            <ModeratorContext>

              <TemplateContext>

                    <CaptureContext>

                <AppInner />

                    </CaptureContext>

              </TemplateContext>

            </ModeratorContext>

          </DialogContext>

            </PanelContext>

          </AudioContext>

        </AppContext>

      </SWRConfig>

    </ChatContext>

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

+20 −27
Original line number Diff line number Diff line 
import { type ButtonProps } from "@heroui/react";

import { MessageCircle } from "lucide-react";



import { Badge } from "@heroui/react";

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 = ({

  compact,

  className,

  onPress,

  ...props

}: ButtonProps & { compact?: boolean }) => {

const OpenChatButton = () => {

  const { state } = useAppContext();

  const { dispatch } = useDialog();

  const notificationCount = 0;



  return (

    <Badge

      content={notificationCount}

      isInvisible={notificationCount === 0}

      color="danger"

      size="sm"

    >

      {/* <Button onPress={() => state.set({ action: "chat_shown", shown: true })}> */}

      <Button

      {...props}

      aria-label={props["aria-label"] ?? "Chat"}

      className={

        compact === undefined

          ? className

          : `${className ? `${className} ` : ""}header-action-button${compact ? " header-action-button--compact" : ""}`

      }

      isIconOnly={compact === undefined ? props.isIconOnly : undefined}

      onPress={(event) => {

        onPress?.(event);

        dispatch({ action: "OPEN_DIALOG", dialog: { id: "CHAT_INFO" } })

      }}

        onPress={() => window.open("https://chat.fediverse.events", "_blank")}

      >

      <MessageCircle aria-hidden="true" size={18} />

      {!props.isIconOnly && (

        <p className="header-button-label header-button-label--short">Chat</p>

      )}

        <FontAwesomeIcon icon={faComments} />

        <p>Chat</p>

      </Button>

    </Badge>

  );

};

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

+1 −0
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ 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 = ({ ...props }: React.HTMLProps<HTMLElement>) => {

  const { connected } = useAppContext();

packages/client/src/components/Toolbar/Palette.scss

+35 −774

File changed.

Preview size limit exceeded, changes collapsed.