add initial aps management modal

has name and profile picture with logout button

fission/src/Synthesis.tsx

@@ -66,6 +66,7 @@ import NewInputSchemeModal from "./ui/modals/configuring/theme-editor/NewInputSc
 import AssignNewSchemeModal from "./ui/modals/configuring/theme-editor/AssignNewSchemeModal.tsx"
 import AnalyticsConsent from "./ui/components/AnalyticsConsent.tsx"
 import PreferencesSystem from "./systems/preferences/PreferencesSystem.ts"
+import APSManagementModal from "./ui/modals/APSManagementModal.tsx"
 
 const worker = new Lazy<Worker>(() => new WPILibWSWorker())
 
@@ -227,6 +228,7 @@ const initialModals = [
     <ImportLocalMirabufModal key="import-local-mirabuf" modalId="import-local-mirabuf" />,
     <ConfigureRobotModal key="config-robot" modalId="config-robot" />,
     <ResetAllInputsModal key="reset-inputs" modalId="reset-inputs" />,
+    <APSManagementModal key="aps-management" modalId="aps-management" />,
 ]
 
 const initialPanels: ReactElement[] = [

fission/src/ui/components/MainHUD.tsx

@@ -133,7 +133,7 @@ const MainHUD: React.FC = () => {
                         value={`Hi, ${userInfo.givenName}`}
                         icon={<UserIcon className="h-[20pt] m-[5pt] rounded-full" />}
                         larger={true}
-                        onClick={() => APS.logout()}
+                        onClick={() => openModal("aps-management")}
                     />
                 ) : (
                     <MainHUDButton

fission/src/ui/modals/APSManagementModal.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import Stack, { StackDirection } from "@/components/Stack"
+import Label, { LabelSize } from "@/components/Label"
+import { HiUser } from "react-icons/hi"
+import APS from "@/aps/APS"
+
+const APSManagementModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
+    const [userInfo, setUserInfo] = useState(APS.userInfo)
+    return (
+        <Modal name={userInfo?.name ?? "Not signed in"} icon={
+            userInfo?.picture ?
+                <img src={userInfo?.picture} className="h-10 rounded-full" /> :
+                <HiUser />
+        } modalId={modalId} acceptName="Logout" onAccept={() => {
+            APS.logout()
+        }}>
+            <Stack direction={StackDirection.Vertical} spacing={10}>
+            </Stack>
+        </Modal>
+    )
+}
+
+export default APSManagementModal