Commit 21e955b5 authored by Ategon's avatar Ategon Committed by Grant
Browse files

Add mailing lists ui

parent bdf8f102

packages/client/src/components/App.tsx

+2 −0
Original line number Diff line number Diff line
@@ -22,6 +22,7 @@ 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 { PixelWhoisSidebar } from "./PixelSidebar/PixelWhoisSidebar";
@@ -108,6 +109,7 @@ const AppInner = () => { 
        <ToastWrapper />

        <DynamicModals />

        <EventInfoModal />

        <MailingListsModal />

      </div>

    </>

  );

packages/client/src/components/EventInfo/EventInfo.tsx

+2 −0
Original line number Diff line number Diff line
@@ -20,6 +20,7 @@ import network from "@/lib/network"; 
import OpenChatButton from "../Chat/OpenChatButton";

import { Button } from "../core/Button";

import { LemmyButton } from "../Info/buttons/Lemmy";

import { MailingListsButton } from "../Info/buttons/MailingLists";

import { MastodonButton } from "../Info/buttons/Mastodon";

import { WithLogin } from "../Login/LoginButton";

import { useEventDates } from "./useEventDates";
@@ -86,6 +87,7 @@ export const EventInfoModal = () => { 
                <OpenChatButton size="sm" target="_blank" variant="ghost" />

                <LemmyButton />

                <MastodonButton />

                <MailingListsButton />

              </div>



              <Alert

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

+2 −0
Original line number Diff line number Diff line 
import { DiscordButton } from "./buttons/Discord";

import { LemmyButton } from "./buttons/Lemmy";

import { MailingListsButton } from "./buttons/MailingLists";

import { MastodonButton } from "./buttons/Mastodon";

import { MatrixButton } from "./buttons/Matrix";

import { TipButton } from "./buttons/Tip";
@@ -12,6 +13,7 @@ export const InfoButtons = () => { 
      <LemmyButton />

      <MastodonButton />

      <TipButton />

      <MailingListsButton />

    </div>

  );

};

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

0 → 100644
+109 −0
Original line number Diff line number Diff line 
import {

  Alert,

  Link,

  Modal,

  ModalBody,

  ModalContent,

  ModalFooter,

  ModalHeader,

  useDisclosure,

} from "@heroui/react";

import { Code2, List, Megaphone, Server } from "lucide-react";



import { useDialog } from "@/contexts/DialogContext";



import { Button } from "../core/Button";



const EVENT_ANNOUNCEMENTS_URL =

  "https://lists.sc07.com/postorius/lists/events-announcements.lists.sc07.com/";

const INSTANCE_ADMINS_URL =

  "https://lists.sc07.com/postorius/lists/events-instances.lists.sc07.com/";

const CANVAS_DEVELOPMENT_URL =

  "https://lists.sc07.com/postorius/lists/canvas.sc07.dev/";

const MAILING_LISTS_URL = "https://lists.sc07.com/";



export const MailingListsModal = () => {

  const Dialog = useDialog();

  const { isOpen, onClose } = useDisclosure({

    isOpen: "MAILING_LISTS" in Dialog.state.dialogs,

    onClose: () =>

      Dialog.dispatch({ action: "CLOSE_DIALOG", dialogId: "MAILING_LISTS" }),

  });



  return (

    <Modal isOpen={isOpen} onClose={onClose} placement="center">

      <ModalContent className="canvas-overlay-card">

        {(onClose) => (

          <>

            <ModalHeader>Mailing Lists</ModalHeader>

            <ModalBody>

              <p>

                Get email announcements about upcoming Fediverse events or

                other topics.

              </p>

              <div className="flex flex-wrap gap-2">

                <Button

                  as={Link}

                  color="primary"

                  href={EVENT_ANNOUNCEMENTS_URL}

                  startContent={<Megaphone aria-hidden="true" size={16} />}

                  target="_blank"

                  variant="flat"

                >

                  Event Announcements

                </Button>

                <Button

                  as={Link}

                  color="primary"

                  href={INSTANCE_ADMINS_URL}

                  startContent={<Server aria-hidden="true" size={16} />}

                  target="_blank"

                  variant="flat"

                >

                  Instance Admins

                </Button>

                <Button

                  as={Link}

                  color="primary"

                  href={CANVAS_DEVELOPMENT_URL}

                  startContent={<Code2 aria-hidden="true" size={16} />}

                  target="_blank"

                  variant="flat"

                >

                  Canvas Development

                </Button>

              </div>



              <Alert

                classNames={{ title: "font-semibold" }}

                color="primary"

                description={

                  <>

                    View all available mailing lists and manage your

                    subscriptions to them.

                    <br />

                    <Button

                      as={Link}

                      href={MAILING_LISTS_URL}

                      size="sm"

                      startContent={<List aria-hidden="true" size={16} />}

                      target="_blank"

                      variant="flat"

                    >

                      View Lists

                    </Button>

                  </>

                }

                title="All Lists"

                variant="faded"

              />

            </ModalBody>

            <ModalFooter>

              <Button onPress={onClose}>Close</Button>

            </ModalFooter>

          </>

        )}

      </ModalContent>

    </Modal>

  );

};

packages/client/src/components/Info/buttons/MailingLists.tsx

0 → 100644
+25 −0
Original line number Diff line number Diff line 
import { Mail } from "lucide-react";



import { useDialog } from "@/contexts/DialogContext";



import { Button } from "../../core/Button";



export const MailingListsButton = () => {

  const Dialog = useDialog();



  return (

    <Button

      size="sm"

      variant="ghost"

      onPress={() =>

        Dialog.dispatch({

          action: "OPEN_DIALOG",

          dialog: { id: "MAILING_LISTS" },

        })

      }

    >

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

      <p>Mailing Lists</p>

    </Button>

  );

};