Merge pull request #174 from jedmund/revamp-header

Implement redesigned header

components/AccountModal/index.tsx

@@ -34,300 +34,306 @@ type StateVariables = {
 }
 
 interface Props {
+  open: boolean
   username?: string
   picture?: string
   gender?: number
   language?: string
   theme?: string
   private?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
-const AccountModal = (props: Props) => {
+const AccountModal = React.forwardRef<HTMLDivElement, Props>(
-  // Localization
+  function AccountModal(props: Props, forwardedRef) {
-  const { t } = useTranslation('common')
+    // Localization
-  const router = useRouter()
+    const { t } = useTranslation('common')
-  const locale =
+    const router = useRouter()
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    const locale =
+      router.locale && ['en', 'ja'].includes(router.locale)
+        ? router.locale
+        : 'en'
 
-  // useEffect only runs on the client, so now we can safely show the UI
+    // useEffect only runs on the client, so now we can safely show the UI
-  const [mounted, setMounted] = useState(false)
+    const [mounted, setMounted] = useState(false)
-  const { theme: appTheme, setTheme: setAppTheme } = useTheme()
+    const { theme: appTheme, setTheme: setAppTheme } = useTheme()
 
-  // Cookies
+    // Cookies
-  const accountCookie = getCookie('account')
+    const accountCookie = getCookie('account')
-  const userCookie = getCookie('user')
+    const userCookie = getCookie('user')
 
-  const cookieData = {
+    const cookieData = {
-    account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
+      account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
-    user: userCookie ? JSON.parse(userCookie as string) : undefined,
+      user: userCookie ? JSON.parse(userCookie as string) : undefined,
-  }
-
-  // UI State
-  const [open, setOpen] = useState(false)
-  const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
-    picture: false,
-    gender: false,
-    language: false,
-    theme: false,
-  })
-
-  // Values
-  const [username, setUsername] = useState(props.username || '')
-  const [picture, setPicture] = useState(props.picture || '')
-  const [language, setLanguage] = useState(props.language || '')
-  const [gender, setGender] = useState(props.gender || 0)
-  const [theme, setTheme] = useState(props.theme || 'system')
-  // const [privateProfile, setPrivateProfile] = useState(false)
-
-  // Setup
-  const [pictureOpen, setPictureOpen] = useState(false)
-  const [genderOpen, setGenderOpen] = useState(false)
-  const [languageOpen, setLanguageOpen] = useState(false)
-  const [themeOpen, setThemeOpen] = useState(false)
-
-  // Refs
-  const headerRef = React.createRef<HTMLDivElement>()
-  const footerRef = React.createRef<HTMLDivElement>()
-
-  // UI management
-  function openChange(open: boolean) {
-    setOpen(open)
-  }
-
-  function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
-    setPictureOpen(name === 'picture' ? !pictureOpen : false)
-    setGenderOpen(name === 'gender' ? !genderOpen : false)
-    setLanguageOpen(name === 'language' ? !languageOpen : false)
-    setThemeOpen(name === 'theme' ? !themeOpen : false)
-  }
-
-  // Event handlers
-  function handlePictureChange(value: string) {
-    setPicture(value)
-  }
-
-  function handleLanguageChange(value: string) {
-    setLanguage(value)
-  }
-
-  function handleGenderChange(value: string) {
-    setGender(parseInt(value))
-  }
-
-  function handleThemeChange(value: string) {
-    setTheme(value)
-    setAppTheme(value)
-  }
-
-  function onEscapeKeyDown(event: KeyboardEvent) {
-    if (pictureOpen || genderOpen || languageOpen || themeOpen) {
-      return event.preventDefault()
-    } else {
-      setOpen(false)
-    }
-  }
-
-  // API calls
-  function update(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-
-    const object = {
-      user: {
-        picture: picture,
-        element: pictureData.find((i) => i.filename === picture)?.element,
-        language: language,
-        gender: gender,
-        theme: theme,
-        // private: privateProfile,
-      },
     }
 
-    if (accountState.account.user) {
+    // UI State
-      api.endpoints.users
+    const [open, setOpen] = useState(false)
-        .update(accountState.account.user?.id, object)
+    const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
-        .then((response) => {
+      picture: false,
-          const user = response.data
+      gender: false,
-
+      language: false,
-          const cookieObj = {
+      theme: false,
-            picture: user.avatar.picture,
-            element: user.avatar.element,
-            gender: user.gender,
-            language: user.language,
-            theme: user.theme,
-          }
-
-          const expiresAt = new Date()
-          expiresAt.setDate(expiresAt.getDate() + 60)
-          setCookie('user', cookieObj, { path: '/', expires: expiresAt })
-
-          accountState.account.user = {
-            id: user.id,
-            username: user.username,
-            picture: user.avatar.picture,
-            element: user.avatar.element,
-            language: user.language,
-            theme: user.theme,
-            gender: user.gender,
-          }
-
-          setOpen(false)
-          changeLanguage(router, user.language)
-        })
-    }
-  }
-
-  // Views
-  const pictureOptions = pictureData
-    .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
-    .map((item, i) => {
-      return (
-        <PictureSelectItem
-          key={`picture-${i}`}
-          element={item.element}
-          src={[
-            `/profile/${item.filename}.png`,
-            `/profile/${item.filename}@2x.png 2x`,
-          ]}
-          value={item.filename}
-        >
-          {item.name[locale]}
-        </PictureSelectItem>
-      )
     })
 
-  const pictureField = () => (
+    // Values
-    <SelectTableField
+    const [username, setUsername] = useState(props.username || '')
-      name="picture"
+    const [picture, setPicture] = useState(props.picture || '')
-      description={t('modals.settings.descriptions.picture')}
+    const [language, setLanguage] = useState(props.language || '')
-      className="Image"
+    const [gender, setGender] = useState(props.gender || 0)
-      label={t('modals.settings.labels.picture')}
+    const [theme, setTheme] = useState(props.theme || 'system')
-      open={pictureOpen}
+    // const [privateProfile, setPrivateProfile] = useState(false)
-      onOpenChange={() => openSelect('picture')}
-      onChange={handlePictureChange}
-      onClose={() => setPictureOpen(false)}
-      imageAlt={t('modals.settings.labels.image_alt')}
-      imageClass={pictureData.find((i) => i.filename === picture)?.element}
-      imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
-      value={picture}
-    >
-      {pictureOptions}
-    </SelectTableField>
-  )
 
-  const genderField = () => (
+    // Setup
-    <SelectTableField
+    const [pictureOpen, setPictureOpen] = useState(false)
-      name="gender"
+    const [genderOpen, setGenderOpen] = useState(false)
-      description={t('modals.settings.descriptions.gender')}
+    const [languageOpen, setLanguageOpen] = useState(false)
-      label={t('modals.settings.labels.gender')}
+    const [themeOpen, setThemeOpen] = useState(false)
-      open={genderOpen}
-      onOpenChange={() => openSelect('gender')}
-      onChange={handleGenderChange}
-      onClose={() => setGenderOpen(false)}
-      value={`${gender}`}
-    >
-      <SelectItem key="gran" value="0">
-        {t('modals.settings.gender.gran')}
-      </SelectItem>
-      <SelectItem key="djeeta" value="1">
-        {t('modals.settings.gender.djeeta')}
-      </SelectItem>
-    </SelectTableField>
-  )
 
-  const languageField = () => (
+    // Refs
-    <SelectTableField
+    const headerRef = React.createRef<HTMLDivElement>()
-      name="language"
+    const footerRef = React.createRef<HTMLDivElement>()
-      label={t('modals.settings.labels.language')}
-      open={languageOpen}
-      onOpenChange={() => openSelect('language')}
-      onChange={handleLanguageChange}
-      onClose={() => setLanguageOpen(false)}
-      value={language}
-    >
-      <SelectItem key="en" value="en">
-        {t('modals.settings.language.english')}
-      </SelectItem>
-      <SelectItem key="ja" value="ja">
-        {t('modals.settings.language.japanese')}
-      </SelectItem>
-    </SelectTableField>
-  )
 
-  const themeField = () => (
+    useEffect(() => {
-    <SelectTableField
+      setOpen(props.open)
-      name="theme"
+    }, [props.open])
-      label={t('modals.settings.labels.theme')}
-      open={themeOpen}
-      onOpenChange={() => openSelect('theme')}
-      onChange={handleThemeChange}
-      onClose={() => setThemeOpen(false)}
-      value={theme}
-    >
-      <SelectItem key="system" value="system">
-        {t('modals.settings.theme.system')}
-      </SelectItem>
-      <SelectItem key="light" value="light">
-        {t('modals.settings.theme.light')}
-      </SelectItem>
-      <SelectItem key="dark" value="dark">
-        {t('modals.settings.theme.dark')}
-      </SelectItem>
-    </SelectTableField>
-  )
 
-  useEffect(() => {
+    // UI management
-    setMounted(true)
+    function openChange(open: boolean) {
-  }, [])
+      if (props.onOpenChange) props.onOpenChange(open)
+      setOpen(open)
+    }
 
-  if (!mounted) {
+    function openSelect(name: 'picture' | 'gender' | 'language' | 'theme') {
-    return null
+      setPictureOpen(name === 'picture' ? !pictureOpen : false)
-  }
+      setGenderOpen(name === 'gender' ? !genderOpen : false)
+      setLanguageOpen(name === 'language' ? !languageOpen : false)
+      setThemeOpen(name === 'theme' ? !themeOpen : false)
+    }
 
-  return (
+    // Event handlers
-    <Dialog open={open} onOpenChange={openChange}>
+    function handlePictureChange(value: string) {
-      <DialogTrigger asChild>
+      setPicture(value)
-        <li className="MenuItem">
+    }
-          <span>{t('menu.settings')}</span>
+
-        </li>
+    function handleLanguageChange(value: string) {
-      </DialogTrigger>
+      setLanguage(value)
-      <DialogContent
+    }
-        className="Account"
+
-        headerref={headerRef}
+    function handleGenderChange(value: string) {
-        footerref={footerRef}
+      setGender(parseInt(value))
-        onOpenAutoFocus={(event: Event) => {}}
+    }
-        onEscapeKeyDown={onEscapeKeyDown}
+
+    function handleThemeChange(value: string) {
+      setTheme(value)
+      setAppTheme(value)
+    }
+
+    function onEscapeKeyDown(event: KeyboardEvent) {
+      if (pictureOpen || genderOpen || languageOpen || themeOpen) {
+        return event.preventDefault()
+      } else {
+        setOpen(false)
+      }
+    }
+
+    // API calls
+    function update(event: React.FormEvent<HTMLFormElement>) {
+      event.preventDefault()
+
+      const object = {
+        user: {
+          picture: picture,
+          element: pictureData.find((i) => i.filename === picture)?.element,
+          language: language,
+          gender: gender,
+          theme: theme,
+          // private: privateProfile,
+        },
+      }
+
+      if (accountState.account.user) {
+        api.endpoints.users
+          .update(accountState.account.user?.id, object)
+          .then((response) => {
+            const user = response.data
+
+            const cookieObj = {
+              picture: user.avatar.picture,
+              element: user.avatar.element,
+              gender: user.gender,
+              language: user.language,
+              theme: user.theme,
+            }
+
+            const expiresAt = new Date()
+            expiresAt.setDate(expiresAt.getDate() + 60)
+            setCookie('user', cookieObj, { path: '/', expires: expiresAt })
+
+            accountState.account.user = {
+              id: user.id,
+              username: user.username,
+              picture: user.avatar.picture,
+              element: user.avatar.element,
+              language: user.language,
+              theme: user.theme,
+              gender: user.gender,
+            }
+
+            setOpen(false)
+            changeLanguage(router, user.language)
+          })
+      }
+    }
+
+    // Views
+    const pictureOptions = pictureData
+      .sort((a, b) => (a.name.en > b.name.en ? 1 : -1))
+      .map((item, i) => {
+        return (
+          <PictureSelectItem
+            key={`picture-${i}`}
+            element={item.element}
+            src={[
+              `/profile/${item.filename}.png`,
+              `/profile/${item.filename}@2x.png 2x`,
+            ]}
+            value={item.filename}
+          >
+            {item.name[locale]}
+          </PictureSelectItem>
+        )
+      })
+
+    const pictureField = () => (
+      <SelectTableField
+        name="picture"
+        description={t('modals.settings.descriptions.picture')}
+        className="Image"
+        label={t('modals.settings.labels.picture')}
+        open={pictureOpen}
+        onOpenChange={() => openSelect('picture')}
+        onChange={handlePictureChange}
+        onClose={() => setPictureOpen(false)}
+        imageAlt={t('modals.settings.labels.image_alt')}
+        imageClass={pictureData.find((i) => i.filename === picture)?.element}
+        imageSrc={[`/profile/${picture}.png`, `/profile/${picture}@2x.png 2x`]}
+        value={picture}
       >
-        <div className="DialogHeader" ref={headerRef}>
+        {pictureOptions}
-          <div className="DialogTop">
+      </SelectTableField>
-            <DialogTitle className="SubTitle">
+    )
-              {t('modals.settings.title')}
-            </DialogTitle>
-            <DialogTitle className="DialogTitle">@{username}</DialogTitle>
-          </div>
-          <DialogClose className="DialogClose" asChild>
-            <span>
-              <CrossIcon />
-            </span>
-          </DialogClose>
-        </div>
 
-        <form onSubmit={update}>
+    const genderField = () => (
-          <div className="Fields">
+      <SelectTableField
-            {pictureField()}
+        name="gender"
-            {genderField()}
+        description={t('modals.settings.descriptions.gender')}
-            {languageField()}
+        label={t('modals.settings.labels.gender')}
-            {themeField()}
+        open={genderOpen}
+        onOpenChange={() => openSelect('gender')}
+        onChange={handleGenderChange}
+        onClose={() => setGenderOpen(false)}
+        value={`${gender}`}
+      >
+        <SelectItem key="gran" value="0">
+          {t('modals.settings.gender.gran')}
+        </SelectItem>
+        <SelectItem key="djeeta" value="1">
+          {t('modals.settings.gender.djeeta')}
+        </SelectItem>
+      </SelectTableField>
+    )
+
+    const languageField = () => (
+      <SelectTableField
+        name="language"
+        label={t('modals.settings.labels.language')}
+        open={languageOpen}
+        onOpenChange={() => openSelect('language')}
+        onChange={handleLanguageChange}
+        onClose={() => setLanguageOpen(false)}
+        value={language}
+      >
+        <SelectItem key="en" value="en">
+          {t('modals.settings.language.english')}
+        </SelectItem>
+        <SelectItem key="ja" value="ja">
+          {t('modals.settings.language.japanese')}
+        </SelectItem>
+      </SelectTableField>
+    )
+
+    const themeField = () => (
+      <SelectTableField
+        name="theme"
+        label={t('modals.settings.labels.theme')}
+        open={themeOpen}
+        onOpenChange={() => openSelect('theme')}
+        onChange={handleThemeChange}
+        onClose={() => setThemeOpen(false)}
+        value={theme}
+      >
+        <SelectItem key="system" value="system">
+          {t('modals.settings.theme.system')}
+        </SelectItem>
+        <SelectItem key="light" value="light">
+          {t('modals.settings.theme.light')}
+        </SelectItem>
+        <SelectItem key="dark" value="dark">
+          {t('modals.settings.theme.dark')}
+        </SelectItem>
+      </SelectTableField>
+    )
+
+    useEffect(() => {
+      setMounted(true)
+    }, [])
+
+    if (!mounted) {
+      return null
+    }
+
+    return (
+      <Dialog open={open} onOpenChange={openChange}>
+        <DialogContent
+          className="Account"
+          headerref={headerRef}
+          footerref={footerRef}
+          onOpenAutoFocus={(event: Event) => {}}
+          onEscapeKeyDown={onEscapeKeyDown}
+        >
+          <div className="DialogHeader" ref={headerRef}>
+            <div className="DialogTop">
+              <DialogTitle className="SubTitle">
+                {t('modals.settings.title')}
+              </DialogTitle>
+              <DialogTitle className="DialogTitle">@{username}</DialogTitle>
+            </div>
+            <DialogClose className="DialogClose" asChild>
+              <span>
+                <CrossIcon />
+              </span>
+            </DialogClose>
           </div>
-          <div className="DialogFooter" ref={footerRef}>
+
-            <Button
+          <form onSubmit={update}>
-              contained={true}
+            <div className="Fields">
-              text={t('modals.settings.buttons.confirm')}
+              {pictureField()}
-            />
+              {genderField()}
-          </div>
+              {languageField()}
-        </form>
+              {themeField()}
-      </DialogContent>
+            </div>
-    </Dialog>
+            <div className="DialogFooter" ref={footerRef}>
-  )
+              <Button
-}
+                contained={true}
+                text={t('modals.settings.buttons.confirm')}
+              />
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+)
 
 export default AccountModal

components/Alert/index.tsx

@@ -23,7 +23,11 @@ const Alert = (props: Props) => {
         <AlertDialog.Overlay className="Overlay" onClick={props.cancelAction} />
         <div className="AlertWrapper">
           <AlertDialog.Content className="Alert">
-            {props.title ? <AlertDialog.Title>Error</AlertDialog.Title> : ''}
+            {props.title ? (
+              <AlertDialog.Title>{props.title}</AlertDialog.Title>
+            ) : (
+              ''
+            )}
             <AlertDialog.Description className="description">
               {props.message}
             </AlertDialog.Description>

components/Button/index.scss

@@ -43,7 +43,7 @@
       stroke: #ff4d4d;
     }
 
-    &.Active.Save {
+    &.Save {
       color: #ff4d4d;
 
       .Accessory svg {
@@ -99,24 +99,27 @@
     }
   }
 
-  &.save:hover {
+  &.Save {
-    color: #ff4d4d;
-
     .Accessory svg {
-      fill: #ff4d4d;
+      fill: none;
-      stroke: #ff4d4d;
+      stroke: var(--button-text);
     }
-  }
 
-  &.save.Active {
+    &.Saved {
-    color: #ff4d4d;
+      color: #ff4d4d;
+
+      .Accessory svg {
+        fill: #ff4d4d;
+        stroke: none;
+      }
+    }
 
     &:hover {
-      color: darken(#ff4d4d, 30);
+      color: #ff4d4d;
 
-      .icon svg {
+      .Accessory svg {
-        fill: darken(#ff4d4d, 30);
+        fill: none;
-        stroke: darken(#ff4d4d, 30);
+        stroke: #ff4d4d;
       }
     }
   }
@@ -138,6 +141,10 @@
 
     display: flex;
 
+    &.Arrow {
+      margin-top: $unit-half;
+    }
+
     svg {
       fill: var(--button-text);
       height: $dimension;

components/Button/index.tsx

@@ -8,7 +8,10 @@ interface Props
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
   > {
-  accessoryIcon?: React.ReactNode
+  leftAccessoryIcon?: React.ReactNode
+  leftAccessoryClassName?: string
+  rightAccessoryIcon?: React.ReactNode
+  rightAccessoryClassName?: string
   active?: boolean
   blended?: boolean
   contained?: boolean
@@ -24,22 +27,45 @@ const defaultProps = {
 }
 
 const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
-  { accessoryIcon, active, blended, contained, buttonSize, text, ...props },
+  {
+    leftAccessoryIcon,
+    leftAccessoryClassName,
+    rightAccessoryIcon,
+    rightAccessoryClassName,
+    active,
+    blended,
+    contained,
+    buttonSize,
+    text,
+    ...props
+  },
   forwardedRef
 ) {
-  const classes = classNames(
+  const classes = classNames(buttonSize, props.className, {
-    {
+    Button: true,
-      Button: true,
+    Active: active,
-      Active: active,
+    Blended: blended,
-      Blended: blended,
+    Contained: contained,
-      Contained: contained,
+  })
-    },
-    buttonSize,
-    props.className
-  )
 
-  const hasAccessory = () => {
+  const leftAccessoryClasses = classNames(leftAccessoryClassName, {
-    if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
+    Accessory: true,
+    Left: true,
+  })
+
+  const rightAccessoryClasses = classNames(rightAccessoryClassName, {
+    Accessory: true,
+    Right: true,
+  })
+
+  const hasLeftAccessory = () => {
+    if (leftAccessoryIcon)
+      return <span className={leftAccessoryClasses}>{leftAccessoryIcon}</span>
+  }
+
+  const hasRightAccessory = () => {
+    if (rightAccessoryIcon)
+      return <span className={rightAccessoryClasses}>{rightAccessoryIcon}</span>
   }
 
   const hasText = () => {
@@ -48,8 +74,9 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
 
   return (
     <button {...props} className={classes} ref={forwardedRef}>
-      {hasAccessory()}
+      {hasLeftAccessory()}
       {hasText()}
+      {hasRightAccessory()}
     </button>
   )
 })

components/CharacterGrid/index.tsx

@@ -2,8 +2,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { getCookie } from 'cookies-next'
 import { useSnapshot } from 'valtio'
+import { useTranslation } from 'next-i18next'
 
-import { AxiosResponse } from 'axios'
+import { AxiosError, AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
 import Alert from '~components/Alert'
@@ -31,12 +32,19 @@ const CharacterGrid = (props: Props) => {
   // Constants
   const numCharacters: number = 5
 
+  // Localization
+  const { t } = useTranslation('common')
+
   // Cookies
   const cookie = getCookie('account')
   const accountData: AccountCookie = cookie
     ? JSON.parse(cookie as string)
     : null
 
+  // Set up state for error handling
+  const [axiosError, setAxiosError] = useState<AxiosResponse>()
+  const [errorAlertOpen, setErrorAlertOpen] = useState(false)
+
   // Set up state for view management
   const { party, grid } = useSnapshot(appState)
   const [slug, setSlug] = useState()
@@ -111,7 +119,15 @@ const CharacterGrid = (props: Props) => {
       if (party.editable)
         saveCharacter(party.id, character, position)
           .then((response) => handleCharacterResponse(response.data))
-          .catch((error) => console.error(error))
+          .catch((error) => {
+            const axiosError = error as AxiosError
+            const response = axiosError.response
+
+            if (response) {
+              setErrorAlertOpen(true)
+              setAxiosError(response)
+            }
+          })
     }
   }
 
@@ -482,6 +498,18 @@ const CharacterGrid = (props: Props) => {
   }
 
   // Render: JSX components
+  const errorAlert = () => {
+    return (
+      <Alert
+        open={errorAlertOpen}
+        title={axiosError ? `${axiosError.status}` : 'Error'}
+        message={t(`errors.${axiosError?.statusText.toLowerCase()}`)}
+        cancelAction={() => setErrorAlertOpen(false)}
+        cancelActionText={t('buttons.confirm')}
+      />
+    )
+  }
+
   return (
     <div>
       <Alert
@@ -526,6 +554,7 @@ const CharacterGrid = (props: Props) => {
           })}
         </ul>
       </div>
+      {errorAlert()}
     </div>
   )
 }

components/CharacterUnit/index.tsx

@@ -218,7 +218,7 @@ const CharacterUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />

components/DropdownMenuContent/index.scss

@@ -0,0 +1,188 @@
+.Menu {
+  transform-origin: --radix-dropdown-menu-content-transform-origin;
+  background: var(--menu-bg);
+  border-radius: 6px;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
+  box-sizing: border-box;
+  min-width: 15vw;
+  margin: 0 $unit-2x;
+  // top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
+  // Also, add space that doesn't make the menu disappear if you move your mouse slowly
+  z-index: 15;
+
+  @include breakpoint(phone) {
+    left: $unit-2x;
+    right: $unit-2x;
+  }
+}
+
+.MenuItem {
+  color: var(--text-tertiary);
+  font-weight: $normal;
+
+  @include breakpoint(phone) {
+    cursor: pointer;
+  }
+
+  &:hover:not(.disabled) {
+    background: var(--menu-bg-item-hover);
+    color: var(--text-primary);
+    cursor: pointer;
+
+    a {
+      color: var(--text-primary);
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:visited {
+        color: var(--text-primary);
+      }
+    }
+
+    @include breakpoint(phone) {
+      background: inherit;
+      color: inherit;
+      cursor: default;
+
+      a {
+        color: inherit;
+      }
+    }
+  }
+
+  &.profile > div {
+    padding: 6px 12px;
+  }
+
+  &.language {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $unit;
+    padding-right: $unit;
+
+    span {
+      flex-grow: 1;
+    }
+
+    .Switch {
+      $height: 24px;
+
+      background: $grey-60;
+      border-radius: calc($height / 2);
+      border: none;
+      position: relative;
+      width: 44px;
+      height: $height;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      .Thumb {
+        $diameter: 18px;
+
+        background: $grey-100;
+        border-radius: calc($diameter / 2);
+        display: block;
+        height: $diameter;
+        width: $diameter;
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        z-index: 3;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &[data-state='checked'] {
+          background: $grey-100;
+          left: 23px;
+        }
+      }
+
+      .left,
+      .right {
+        color: $grey-100;
+        font-size: 10px;
+        font-weight: $bold;
+        position: absolute;
+        z-index: 2;
+      }
+
+      .left {
+        top: 6px;
+        left: 6px;
+      }
+
+      .right {
+        top: 6px;
+        right: 5px;
+      }
+    }
+  }
+
+  a {
+    color: $grey-50;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:visited {
+      color: $grey-50;
+    }
+  }
+
+  & > a,
+  & > span {
+    display: block;
+    padding: 12px 12px;
+  }
+
+  & > div {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    padding: 10px 12px;
+
+    &:hover {
+      i.tag {
+        background: var(--tag-bg);
+        color: var(--tag-text);
+      }
+    }
+
+    span {
+      flex-grow: 1;
+    }
+
+    img {
+      $diameter: 32px;
+      border-radius: calc($diameter / 2);
+      height: $diameter;
+      width: $diameter;
+    }
+  }
+}
+
+.MenuGroup {
+  border-bottom: 1px solid var(--menu-separator);
+
+  &:first-child .MenuItem:first-child:hover {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+
+  &:last-child .MenuItem:last-child:hover {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}

components/DropdownMenuContent/index.tsx

@@ -0,0 +1,37 @@
+import React, { PropsWithChildren } from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import classNames from 'classnames'
+
+import './index.scss'
+
+interface Props extends DropdownMenuPrimitive.DropdownMenuContentProps {}
+
+export const DropdownMenu = DropdownMenuPrimitive.Root
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+export const DropdownMenuLabel = DropdownMenuPrimitive.Label
+export const DropdownMenuItem = DropdownMenuPrimitive.Item
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group
+export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator
+
+export const DropdownMenuContent = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, ...props }: PropsWithChildren<Props>, forwardedRef) => {
+    const classes = classNames(props.className, {
+      Menu: true,
+    })
+    return (
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+          {...props}
+          className={classes}
+          ref={forwardedRef}
+        >
+          {children}
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
+    )
+  }
+)
+
+DropdownMenuContent.defaultProps = {
+  sideOffset: 4,
+}

components/GridRep/index.tsx

@@ -208,7 +208,7 @@ const GridRep = (props: Props) => {
             <a href="#">
               <Button
                 className="Save"
-                accessoryIcon={<SaveIcon className="stroke" />}
+                leftAccessoryIcon={<SaveIcon className="stroke" />}
                 active={props.favorited}
                 contained={true}
                 buttonSize="small"

components/Header/index.scss

@@ -5,11 +5,23 @@
   justify-content: space-between;
   width: 100%;
 
-  #Right > div {
+  section {
     display: flex;
     gap: $unit;
   }
 
+  img,
+  .placeholder {
+    $diameter: 32px;
+    border-radius: calc($diameter / 2);
+    height: $diameter;
+    width: $diameter;
+  }
+
+  .placeholder {
+    background: var(--placeholder-bg);
+  }
+
   #DropdownWrapper {
     display: inline-block;
     padding-bottom: $unit;
@@ -20,7 +32,7 @@
     }
 
     &:hover {
-      padding-right: $unit-4x;
+      // padding-right: $unit-4x;
 
       .Button {
         background: var(--button-bg-hover);

components/Header/index.tsx

@@ -3,21 +3,33 @@ import { useSnapshot } from 'valtio'
 import { deleteCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-
+import classNames from 'classnames'
 import clonedeep from 'lodash.clonedeep'
+import Link from 'next/link'
 
 import api from '~utils/api'
 import { accountState, initialAccountState } from '~utils/accountState'
 import { appState, initialAppState } from '~utils/appState'
+import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
 
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '~components/DropdownMenuContent'
+import LoginModal from '~components/LoginModal'
+import SignupModal from '~components/SignupModal'
+import AccountModal from '~components/AccountModal'
+import Toast from '~components/Toast'
 import Button from '~components/Button'
-import HeaderMenu from '~components/HeaderMenu'
 
-import AddIcon from '~public/icons/Add.svg'
 import LinkIcon from '~public/icons/Link.svg'
 import MenuIcon from '~public/icons/Menu.svg'
+import ArrowIcon from '~public/icons/Arrow.svg'
 import SaveIcon from '~public/icons/Save.svg'
-import classNames from 'classnames'
 
 import './index.scss'
 
@@ -29,18 +41,50 @@ const Header = () => {
   const router = useRouter()
 
   // State management
-  const [open, setOpen] = useState(false)
+  const [copyToastOpen, setCopyToastOpen] = useState(false)
+  const [loginModalOpen, setLoginModalOpen] = useState(false)
+  const [signupModalOpen, setSignupModalOpen] = useState(false)
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false)
+  const [leftMenuOpen, setLeftMenuOpen] = useState(false)
+  const [rightMenuOpen, setRightMenuOpen] = useState(false)
 
   // Snapshots
   const { account } = useSnapshot(accountState)
   const { party } = useSnapshot(appState)
 
-  function menuButtonClicked() {
+  function handleCopyToastOpenChanged(open: boolean) {
-    setOpen(!open)
+    setCopyToastOpen(open)
   }
 
-  function onClickOutsideMenu() {
+  function handleCopyToastCloseClicked() {
-    setOpen(false)
+    setCopyToastOpen(false)
+  }
+
+  function handleLeftMenuButtonClicked() {
+    setLeftMenuOpen(!leftMenuOpen)
+  }
+
+  function handleRightMenuButtonClicked() {
+    setRightMenuOpen(!rightMenuOpen)
+  }
+
+  function handleLeftMenuOpenChange(open: boolean) {
+    setLeftMenuOpen(open)
+  }
+  function handleRightMenuOpenChange(open: boolean) {
+    setRightMenuOpen(open)
+  }
+
+  function closeLeftMenu() {
+    setLeftMenuOpen(false)
+  }
+
+  function closeRightMenu() {
+    setRightMenuOpen(false)
+  }
+
+  function handleSettingsOpenChanged(open: boolean) {
+    setRightMenuOpen(false)
   }
 
   function copyToClipboard() {
@@ -52,11 +96,15 @@ const Header = () => {
     el.select()
     document.execCommand('copy')
     el.remove()
+
+    setCopyToastOpen(true)
   }
 
-  function newParty() {
+  function handleNewParty(event: React.MouseEvent, path: string) {
+    event.preventDefault()
+
     // Push the root URL
-    router.push('/')
+    router.push(path)
 
     // Clean state
     const resetState = clonedeep(initialAppState)
@@ -66,9 +114,16 @@ const Header = () => {
 
     // Set party to be editable
     appState.party.editable = true
+
+    // Close right menu
+    closeRightMenu()
   }
 
   function logout() {
+    // Close menu
+    closeRightMenu()
+
+    // Delete cookies
     deleteCookie('account')
     deleteCookie('user')
 
@@ -103,85 +158,305 @@ const Header = () => {
     else console.error('Failed to unsave team: No party ID')
   }
 
-  const copyButton = () => {
+  const pageTitle = () => {
-    if (router.route === '/p/[party]')
+    let title = ''
-      return (
+    let hasAccessory = false
-        <Button
+
-          accessoryIcon={<LinkIcon className="stroke" />}
+    const path = router.asPath.split('/')[1]
-          blended={true}
+    if (path === 'p') {
-          text={t('buttons.copy')}
+      hasAccessory = true
-          onClick={copyToClipboard}
+      if (appState.party && appState.party.name) {
-        />
+        title = appState.party.name
-      )
+      } else {
+        title = t('no_title')
+      }
+    } else if (['weapons', 'summons', 'characters', 'new', ''].includes(path)) {
+      title = t('new_party')
+    } else {
+      title = ''
+    }
+
+    return title !== '' ? (
+      <Button
+        blended={true}
+        rightAccessoryIcon={
+          path === 'p' && hasAccessory ? (
+            <LinkIcon className="stroke" />
+          ) : undefined
+        }
+        text={title}
+        onClick={copyToClipboard}
+      />
+    ) : (
+      ''
+    )
   }
 
-  const leftNav = () => {
+  const profileImage = () => {
+    let image
+
+    const user = accountState.account.user
+    if (accountState.account.authorized && user) {
+      image = (
+        <img
+          alt={user.username}
+          className={`profile ${user.element}`}
+          srcSet={`/profile/${user.picture}.png, 
+                      /profile/${user.picture}@2x.png 2x`}
+          src={`/profile/${user.picture}.png`}
+        />
+      )
+    } else {
+      image = <div className="profile placeholder" />
+    }
+
+    return image
+  }
+
+  const urlCopyToast = () => {
     return (
-      <div id="DropdownWrapper">
+      <Toast
-        <Button
+        open={copyToastOpen}
-          accessoryIcon={<MenuIcon />}
+        duration={2400}
-          className={classNames({ Active: open })}
+        type="foreground"
-          blended={true}
+        content="This party's URL was copied to your clipboard"
-          text={t('buttons.menu')}
+        onOpenChange={handleCopyToastOpenChanged}
-          onClick={menuButtonClicked}
+        onCloseClick={handleCopyToastCloseClicked}
-        />
+      />
-        <HeaderMenu
-          authenticated={account.authorized}
-          open={open}
-          username={account.user?.username}
-          onClickOutside={onClickOutsideMenu}
-          logout={logout}
-        />
-      </div>
     )
   }
 
   const saveButton = () => {
-    if (party.favorited)
+    return (
-      return (
+      <Button
-        <Button
+        leftAccessoryIcon={<SaveIcon />}
-          accessoryIcon={<SaveIcon />}
+        className={classNames({
-          blended={true}
+          Save: true,
-          text="Saved"
+          Saved: party.favorited,
-          onClick={toggleFavorite}
+        })}
-        />
+        blended={true}
-      )
+        text={party.favorited ? 'Saved' : 'Save'}
-    else
+        onClick={toggleFavorite}
-      return (
+      />
-        <Button
+    )
-          accessoryIcon={<SaveIcon />}
-          blended={true}
-          text="Save"
-          onClick={toggleFavorite}
-        />
-      )
   }
 
-  const rightNav = () => {
+  const settingsModal = () => {
+    const user = accountState.account.user
+
+    if (user) {
+      return (
+        <AccountModal
+          open={settingsModalOpen}
+          username={user.username}
+          picture={user.picture}
+          gender={user.gender}
+          language={user.language}
+          theme={user.theme}
+          onOpenChange={setSettingsModalOpen}
+        />
+      )
+    }
+  }
+
+  const loginModal = () => {
+    return <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
+  }
+
+  const signupModal = () => {
     return (
-      <div>
+      <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
+    )
+  }
+
+  const left = () => {
+    return (
+      <section>
+        <div id="DropdownWrapper">
+          <DropdownMenu
+            open={leftMenuOpen}
+            onOpenChange={handleLeftMenuOpenChange}
+          >
+            <DropdownMenuTrigger asChild>
+              <Button
+                leftAccessoryIcon={<MenuIcon />}
+                className={classNames({ Active: leftMenuOpen })}
+                blended={true}
+                onClick={handleLeftMenuButtonClicked}
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="Left">
+              {leftMenuItems()}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        {pageTitle()}
+      </section>
+    )
+  }
+
+  const right = () => {
+    return (
+      <section>
         {router.route === '/p/[party]' &&
         account.user &&
         (!party.user || party.user.id !== account.user.id)
           ? saveButton()
           : ''}
 
-        {copyButton()}
+        <DropdownMenu
-
+          open={rightMenuOpen}
-        <Button
+          onOpenChange={handleRightMenuOpenChange}
-          accessoryIcon={<AddIcon className="Add" />}
+        >
-          blended={true}
+          <DropdownMenuTrigger asChild>
-          text={t('buttons.new')}
+            <Button
-          onClick={newParty}
+              className={classNames({ Active: rightMenuOpen })}
-        />
+              leftAccessoryIcon={profileImage()}
-      </div>
+              rightAccessoryIcon={<ArrowIcon />}
+              rightAccessoryClassName="Arrow"
+              onClick={handleRightMenuButtonClicked}
+              blended={true}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="Right">
+            {rightMenuItems()}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </section>
     )
   }
 
+  const leftMenuItems = () => {
+    return (
+      <>
+        {accountState.account.authorized && accountState.account.user ? (
+          <>
+            <DropdownMenuGroup className="MenuGroup">
+              <DropdownMenuItem className="MenuItem" onClick={closeRightMenu}>
+                <Link
+                  href={`/${accountState.account.user.username}` || ''}
+                  passHref
+                >
+                  Your profile
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
+                <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </>
+        ) : (
+          ''
+        )}
+        <DropdownMenuGroup className="MenuGroup">
+          <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
+            <Link href="/teams">{t('menu.teams')}</Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem className="MenuItem">
+            <div>
+              <span>{t('menu.guides')}</span>
+              <i className="tag">{t('coming_soon')}</i>
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuGroup className="MenuGroup">
+          <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
+            <a href="/about" target="_blank">
+              {t('about.segmented_control.about')}
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
+            <a href="/updates" target="_blank">
+              {t('about.segmented_control.updates')}
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
+            <a href="/roadmap" target="_blank">
+              {t('about.segmented_control.roadmap')}
+            </a>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </>
+    )
+  }
+
+  const rightMenuItems = () => {
+    let items
+
+    const account = accountState.account
+    if (account.authorized && account.user) {
+      items = (
+        <>
+          <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuItem className="MenuItem">
+              <Link href="/new">
+                <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
+                  New party
+                </a>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="MenuItem">
+              <Link href={`/${account.user.username}` || ''} passHref>
+                Your profile
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={() => setSettingsModalOpen(true)}
+            >
+              <span>{t('menu.settings')}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="MenuItem" onClick={logout}>
+              <span>{t('menu.logout')}</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </>
+      )
+    } else {
+      items = (
+        <>
+          <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuItem className="MenuItem">
+              <Link href="/new">
+                <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
+                  New party
+                </a>
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={() => setLoginModalOpen(true)}
+            >
+              <span>Log in</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={() => setSignupModalOpen(true)}
+            >
+              <span>Sign up</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </>
+      )
+    }
+
+    return items
+  }
+
   return (
     <nav id="Header">
-      <div id="Left">{leftNav()}</div>
+      {left()}
-      <div id="Right">{rightNav()}</div>
+      {right()}
+      {urlCopyToast()}
+      {settingsModal()}
+      {loginModal()}
+      {signupModal()}
     </nav>
   )
 }

components/HeaderMenu/index.scss

@@ -1,187 +0,0 @@
-.Menu {
-  background: var(--menu-bg);
-  border-radius: 6px;
-  box-sizing: border-box;
-  display: none;
-  min-width: 220px;
-  position: absolute;
-  top: $unit-8x; // This shouldn't be hardcoded. How to calculate it?
-  // Also, add space that doesn't make the menu disappear if you move your mouse slowly
-  z-index: 10;
-
-  @include breakpoint(phone) {
-    left: $unit-2x;
-    right: $unit-2x;
-  }
-}
-
-.MenuItem {
-  color: var(--text-tertiary);
-  font-weight: $normal;
-
-  @include breakpoint(phone) {
-    cursor: pointer;
-  }
-
-  &:hover:not(.disabled) {
-    background: var(--menu-bg-item-hover);
-    color: var(--text-primary);
-    cursor: pointer;
-
-    a {
-      color: var(--text-primary);
-
-      &:hover {
-        text-decoration: none;
-      }
-
-      &:visited {
-        color: var(--text-primary);
-      }
-    }
-
-    @include breakpoint(phone) {
-      background: inherit;
-      color: inherit;
-      cursor: default;
-
-      a {
-        color: inherit;
-      }
-    }
-  }
-
-  &.profile > div {
-    padding: 6px 12px;
-  }
-
-  &.language {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    gap: $unit;
-    padding-right: $unit;
-
-    span {
-      flex-grow: 1;
-    }
-
-    .Switch {
-      $height: 24px;
-
-      background: $grey-60;
-      border-radius: calc($height / 2);
-      border: none;
-      position: relative;
-      width: 44px;
-      height: $height;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      .Thumb {
-        $diameter: 18px;
-
-        background: $grey-100;
-        border-radius: calc($diameter / 2);
-        display: block;
-        height: $diameter;
-        width: $diameter;
-        position: absolute;
-        top: 3px;
-        left: 3px;
-        z-index: 3;
-
-        &:hover {
-          cursor: pointer;
-        }
-
-        &[data-state='checked'] {
-          background: $grey-100;
-          left: 23px;
-        }
-      }
-
-      .left,
-      .right {
-        color: $grey-100;
-        font-size: 10px;
-        font-weight: $bold;
-        position: absolute;
-        z-index: 2;
-      }
-
-      .left {
-        top: 6px;
-        left: 6px;
-      }
-
-      .right {
-        top: 6px;
-        right: 5px;
-      }
-    }
-  }
-
-  a {
-    color: $grey-50;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:visited {
-      color: $grey-50;
-    }
-  }
-
-  & > a,
-  & > span {
-    display: block;
-    padding: 12px 12px;
-  }
-
-  & > div {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    padding: 10px 12px;
-
-    &:hover {
-      i.tag {
-        background: var(--tag-bg);
-        color: var(--tag-text);
-      }
-    }
-
-    span {
-      flex-grow: 1;
-    }
-
-    img {
-      $diameter: 32px;
-      border-radius: calc($diameter / 2);
-      height: $diameter;
-      width: $diameter;
-    }
-  }
-}
-
-.MenuGroup {
-  border-bottom: 1px solid var(--menu-separator);
-
-  &:first-child .MenuItem:first-child:hover {
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-  }
-
-  &:last-child .MenuItem:last-child:hover {
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-}

components/JobAccessoryPopover/index.tsx

@@ -1,9 +1,11 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
+import classNames from 'classnames'
+
+import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
 
 import * as RadioGroup from '@radix-ui/react-radio-group'
-
 import Button from '~components/Button'
 import {
   Popover,
@@ -13,7 +15,6 @@ import {
 import JobAccessoryItem from '~components/JobAccessoryItem'
 
 import './index.scss'
-import classNames from 'classnames'
 
 interface Props {
   buttonref: React.RefObject<HTMLButtonElement>
@@ -80,10 +81,6 @@ const JobAccessoryPopover = ({
     onOpenChange(false)
   }
 
-  function capitalizeFirstLetter(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1)
-  }
-
   const radioGroup = (
     <>
       <h3>

components/JobImage/index.tsx

@@ -76,7 +76,7 @@ const JobImage = ({
 
     return (
       <Button
-        accessoryIcon={icon}
+        leftAccessoryIcon={icon}
         className={classes}
         onClick={handleAccessoryButtonClicked}
         ref={buttonRef}

components/LoginModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { setCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
@@ -26,7 +26,12 @@ interface ErrorMap {
 const emailRegex =
   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
-const LoginModal = () => {
+interface Props {
+  open: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const LoginModal = (props: Props) => {
   const router = useRouter()
   const { t } = useTranslation('common')
 
@@ -46,6 +51,10 @@ const LoginModal = () => {
   const footerRef: React.RefObject<HTMLDivElement> = React.createRef()
   const form: React.RefObject<HTMLInputElement>[] = [emailInput, passwordInput]
 
+  useEffect(() => {
+    setOpen(props.open)
+  }, [props.open])
+
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
     const { name, value } = event.target
     let newErrors = { ...errors }
@@ -185,6 +194,8 @@ const LoginModal = () => {
       email: '',
       password: '',
     })
+
+    if (props.onOpenChange) props.onOpenChange(open)
   }
 
   function onEscapeKeyDown(event: KeyboardEvent) {
@@ -198,11 +209,6 @@ const LoginModal = () => {
 
   return (
     <Dialog open={open} onOpenChange={openChange}>
-      <DialogTrigger asChild>
-        <li className="MenuItem">
-          <span>{t('menu.login')}</span>
-        </li>
-      </DialogTrigger>
       <DialogContent
         className="Login"
         footerref={footerRef}

components/PartyDetails/index.tsx

@@ -538,7 +538,7 @@ const PartyDetails = (props: Props) => {
         <div className="left">
           {router.pathname !== '/new' ? (
             <Button
-              accessoryIcon={<CrossIcon />}
+              leftAccessoryIcon={<CrossIcon />}
               className="Blended medium destructive"
               onClick={handleClick}
               text={t('buttons.delete')}
@@ -550,7 +550,7 @@ const PartyDetails = (props: Props) => {
         <div className="right">
           <Button text={t('buttons.cancel')} onClick={toggleDetails} />
           <Button
-            accessoryIcon={<CheckIcon className="Check" />}
+            leftAccessoryIcon={<CheckIcon className="Check" />}
             text={t('buttons.save_info')}
             onClick={updateDetails}
           />
@@ -643,7 +643,7 @@ const PartyDetails = (props: Props) => {
         <div className="Right">
           {party.editable ? (
             <Button
-              accessoryIcon={<EditIcon />}
+              leftAccessoryIcon={<EditIcon />}
               text={t('buttons.show_info')}
               onClick={toggleDetails}
             />

components/SignupModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { setCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -15,7 +15,10 @@ import DialogContent from '~components/DialogContent'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
-interface Props {}
+interface Props {
+  open: boolean
+  onOpenChange?: (open: boolean) => void
+}
 
 interface ErrorMap {
   [index: string]: string
@@ -58,6 +61,10 @@ const SignupModal = (props: Props) => {
     passwordConfirmationInput,
   ]
 
+  useEffect(() => {
+    setOpen(props.open)
+  }, [props.open])
+
   function register(event: React.FormEvent) {
     event.preventDefault()
 
@@ -266,6 +273,8 @@ const SignupModal = (props: Props) => {
       password: '',
       passwordConfirmation: '',
     })
+
+    if (props.onOpenChange) props.onOpenChange(open)
   }
 
   function onEscapeKeyDown(event: KeyboardEvent) {
@@ -279,11 +288,6 @@ const SignupModal = (props: Props) => {
 
   return (
     <Dialog open={open} onOpenChange={openChange}>
-      <DialogTrigger asChild>
-        <li className="MenuItem">
-          <span>{t('menu.signup')}</span>
-        </li>
-      </DialogTrigger>
       <DialogContent
         className="Signup"
         footerref={footerRef}

components/SummonGrid/index.tsx

@@ -4,9 +4,10 @@ import { getCookie } from 'cookies-next'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 
-import { AxiosResponse } from 'axios'
+import { AxiosError, AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
+import Alert from '~components/Alert'
 import SummonUnit from '~components/SummonUnit'
 import ExtraSummons from '~components/ExtraSummons'
 
@@ -38,6 +39,10 @@ const SummonGrid = (props: Props) => {
   // Localization
   const { t } = useTranslation('common')
 
+  // Set up state for error handling
+  const [axiosError, setAxiosError] = useState<AxiosResponse>()
+  const [errorAlertOpen, setErrorAlertOpen] = useState(false)
+
   // Set up state for view management
   const { party, grid } = useSnapshot(appState)
   const [slug, setSlug] = useState()
@@ -100,12 +105,12 @@ const SummonGrid = (props: Props) => {
         saveSummon(party.id, summon, position)
           .then((response) => handleSummonResponse(response.data))
           .catch((error) => {
-            const code = error.response.status
+            const axiosError = error as AxiosError
-            const data = error.response.data
+            const response = axiosError.response
-            if (code === 422) {
+
-              if (data.code === 'incompatible_summon_for_position') {
+            if (response) {
-                // setShowIncompatibleAlert(true)
+              setErrorAlertOpen(true)
-              }
+              setAxiosError(response)
             }
           })
     }
@@ -380,6 +385,18 @@ const SummonGrid = (props: Props) => {
   }
 
   // Render: JSX components
+  const errorAlert = () => {
+    return (
+      <Alert
+        open={errorAlertOpen}
+        title={axiosError ? `${axiosError.status}` : 'Error'}
+        message={t(`errors.${axiosError?.statusText.toLowerCase()}`)}
+        cancelAction={() => setErrorAlertOpen(false)}
+        cancelActionText={t('buttons.confirm')}
+      />
+    )
+  }
+
   const mainSummonElement = (
     <div className="LabeledUnit">
       <div className="Label">{t('summons.main')}</div>
@@ -460,6 +477,7 @@ const SummonGrid = (props: Props) => {
       </div>
 
       {subAuraSummonElement}
+      {errorAlert()}
     </div>
   )
 }

components/SummonUnit/index.tsx

@@ -172,7 +172,7 @@ const SummonUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />

components/Toast/index.scss

@@ -1,12 +1,33 @@
 .Toast {
   background: var(--dialog-bg);
   border-radius: $card-corner;
-  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   gap: $unit-2x;
   padding: $unit-3x;
 
+  &[data-state='open'] {
+    animation: slideLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state='closed'] {
+    animation: fadeOut 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe='end'] {
+    animation: slideRight 100ms ease-out;
+  }
+
   .Header {
     align-items: center;
     display: flex;

components/Toast/index.tsx

@@ -17,22 +17,24 @@ const Toast = ({
   content,
   ...props
 }: PropsWithChildren<Props>) => {
+  const { onCloseClick, ...toastProps } = props
+
   const classes = classNames(props.className, {
     Toast: true,
   })
 
   return (
-    <ToastPrimitive.Root {...props} className={classes}>
+    <ToastPrimitive.Root {...toastProps} className={classes}>
-      <div className="Header">
+      {title && (
-        {title && (
+        <div className="Header">
           <ToastPrimitive.Title asChild>
             <h3>{title}</h3>
           </ToastPrimitive.Title>
-        )}
+          <ToastPrimitive.Close aria-label="Close" onClick={onCloseClick}>
-        <ToastPrimitive.Close aria-label="Close" onClick={props.onCloseClick}>
+            <span aria-hidden>×</span>
-          <span aria-hidden>×</span>
+          </ToastPrimitive.Close>
-        </ToastPrimitive.Close>
+        </div>
-      </div>
+      )}
       <ToastPrimitive.Description asChild>
         <p>{content}</p>
       </ToastPrimitive.Description>

components/WeaponGrid/index.tsx

@@ -4,7 +4,7 @@ import { getCookie } from 'cookies-next'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 
-import { AxiosResponse } from 'axios'
+import { AxiosError, AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
 import Alert from '~components/Alert'
@@ -41,11 +41,15 @@ const WeaponGrid = (props: Props) => {
     ? JSON.parse(cookie as string)
     : null
 
+  // Set up state for error handling
+  const [axiosError, setAxiosError] = useState<AxiosResponse>()
+  const [errorAlertOpen, setErrorAlertOpen] = useState(false)
+  const [showIncompatibleAlert, setShowIncompatibleAlert] = useState(false)
+
   // Set up state for view management
   const { party, grid } = useSnapshot(appState)
   const [slug, setSlug] = useState()
   const [modalOpen, setModalOpen] = useState(false)
-  const [showIncompatibleAlert, setShowIncompatibleAlert] = useState(false)
 
   // Set up state for conflict management
   const [incoming, setIncoming] = useState<Weapon>()
@@ -100,11 +104,21 @@ const WeaponGrid = (props: Props) => {
         saveWeapon(party.id, weapon, position)
           .then((response) => handleWeaponResponse(response.data))
           .catch((error) => {
-            const code = error.response.status
+            const axiosError = error as AxiosError
-            const data = error.response.data
+            const response = axiosError.response
-            if (code === 422) {
+
-              if (data.code === 'incompatible_weapon_for_position') {
+            if (response) {
+              const code = response.status
+              const data = response.data
+
+              if (
+                code === 422 &&
+                data.code === 'incompatible_weapon_for_position'
+              ) {
                 setShowIncompatibleAlert(true)
+              } else {
+                setErrorAlertOpen(true)
+                setAxiosError(response)
               }
             }
           })
@@ -362,16 +376,29 @@ const WeaponGrid = (props: Props) => {
         cancelAction={() => setShowIncompatibleAlert(!showIncompatibleAlert)}
         cancelActionText={t('buttons.confirm')}
         message={t('alert.incompatible_weapon')}
-      ></Alert>
+      />
     ) : (
       ''
     )
   }
 
+  const errorAlert = () => {
+    return (
+      <Alert
+        open={errorAlertOpen}
+        title={axiosError ? `${axiosError.status}` : 'Error'}
+        message={t(`errors.${axiosError?.statusText.toLowerCase()}`)}
+        cancelAction={() => setErrorAlertOpen(false)}
+        cancelActionText={t('buttons.confirm')}
+      />
+    )
+  }
+
   return (
     <div id="WeaponGrid">
       {conflicts ? conflictModal() : ''}
       {incompatibleAlert()}
+      {errorAlert()}
       <div id="MainGrid">
         {mainhandElement}
         <ul id="Weapons">{weaponGridElement}</ul>

components/WeaponUnit/index.tsx

@@ -450,7 +450,7 @@ const WeaponUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />

pages/_app.tsx

@@ -44,7 +44,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ThemeProvider>
-      <ToastProvider>
+      <ToastProvider swipeDirection="right">
         <Layout>
           <Component {...pageProps} />
         </Layout>

public/locales/en/common.json

@@ -51,6 +51,9 @@
     },
     "remove": "Remove from grid"
   },
+  "errors": {
+    "unauthorized": "You don't have permission to perform that action"
+  },
   "filters": {
     "labels": {
       "element": "Element",
@@ -384,6 +387,7 @@
   "extra_weapons": "Additional Weapons",
   "equipped": "Equipped",
   "coming_soon": "Coming Soon",
+  "new_party": "New party",
   "no_accessory": "No {{accessory}} equipped",
   "no_title": "Untitled",
   "no_raid": "No raid",

public/locales/ja/common.json

@@ -59,6 +59,9 @@
       "rarity": "レアリティ"
     }
   },
+  "errors": {
+    "unauthorized": "行ったアクションを実行する権限がありません"
+  },
   "header": {
     "anonymous": "無名",
     "untitled_team": "{{username}}さんからの無題編成",
@@ -385,6 +388,7 @@
   "equipped": "装備した",
   "extra_weapons": "Additional Weapons",
   "coming_soon": "開発中",
+  "new_party": "新しい編成",
   "no_accessory": "{{accessory}}は装備していません",
   "no_title": "無題",
   "no_raid": "マルチなし",

styles/globals.scss

@@ -368,6 +368,15 @@ i.tag {
   }
 }
 
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes openModalDesktop {
   0% {
     opacity: 0;
@@ -392,6 +401,24 @@ i.tag {
   }
 }
 
+@keyframes slideLeft {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideRight {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
 @keyframes fadeInFilter {
   from {
     backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0);

styles/themes.scss

@@ -19,6 +19,8 @@
   --selected-item-bg: #{$selected--item--bg--light};
   --selected-item-bg-hover: #{$selected--item--bg--light--hover};
 
+  --placeholder-bg: #{$grey-80};
+
   // Light - Menus
   --dialog-bg: #{$dialog--bg--light};
 
@@ -149,6 +151,8 @@
   --selected-item-bg: #{$selected--item--bg--dark};
   --selected-item-bg-hover: #{$selected--item--bg--dark--hover};
 
+  --placeholder-bg: #{$grey-40};
+
   // Dark - Dialogs
   --dialog-bg: #{$dialog--bg--dark};
 

utils/capitalizeFirstLetter.tsx

@@ -0,0 +1,3 @@
+export default function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}