From 777563940e14a33849721b92ad6c093f80e9d127 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 23 Jan 2023 02:44:48 -0800
Subject: [PATCH 01/89] Fix tab URLs

The app was crashing when you went to another tab on new pages because the rewrites were only configured for URLs with shortcodes
---
 next.config.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/next.config.js b/next.config.js
index 93967c18..24e220ba 100644
--- a/next.config.js
+++ b/next.config.js
@@ -15,6 +15,18 @@ module.exports = {
         source: '/',
         destination: '/new',
       },
+      {
+        source: '/characters',
+        destination: '/new',
+      },
+      {
+        source: '/summons',
+        destination: '/new',
+      },
+      {
+        source: '/weapons',
+        destination: '/new',
+      },
       {
         source: '/p/:shortcode/characters',
         destination: '/p/:shortcode',

From 0c8102c66fb0309d2a2c9ff5d906d716c31d6ef6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 23 Jan 2023 14:43:01 -0800
Subject: [PATCH 02/89] Basic error handling for API errors in SSR

---
 pages/[username].tsx  |  79 ++++++++++++++-------------
 pages/new/index.tsx   |  49 +++++++++--------
 pages/p/[party].tsx   | 120 +++++++++++++++++++++---------------------
 pages/saved.tsx       |  61 +++++++++++----------
 pages/teams.tsx       |  59 +++++++++++----------
 utils/reportError.tsx |  20 +++++++
 6 files changed, 213 insertions(+), 175 deletions(-)
 create mode 100644 utils/reportError.tsx

diff --git a/pages/[username].tsx b/pages/[username].tsx
index 805d3acb..37ac466b 100644
--- a/pages/[username].tsx
+++ b/pages/[username].tsx
@@ -15,6 +15,7 @@ import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
+import { printError } from '~utils/reportError'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
@@ -350,50 +351,54 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
-  // Fetch and organize raids
-  let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll()
-    .then((response) => organizeRaids(response.data))
+  try {
+    // Fetch and organize raids
+    let { raids, sortedRaids } = await api.endpoints.raids
+      .getAll()
+      .then((response) => organizeRaids(response.data))
 
-  // Create filter object
-  const filters: FilterObject = extractFilters(query, raids)
-  const params = {
-    params: { ...filters },
-  }
+    // Create filter object
+    const filters: FilterObject = extractFilters(query, raids)
+    const params = {
+      params: { ...filters },
+    }
 
-  // Set up empty variables
-  let user: User | null = null
-  let teams: Party[] | null = null
-  let meta: PaginationObject = emptyPaginationObject
+    // Set up empty variables
+    let user: User | null = null
+    let teams: Party[] | null = null
+    let meta: PaginationObject = emptyPaginationObject
 
-  // Perform a request only if we received a username
-  if (query.username) {
-    const response = await api.endpoints.users.getOne({
-      id: query.username,
-      params,
-    })
+    // Perform a request only if we received a username
+    if (query.username) {
+      const response = await api.endpoints.users.getOne({
+        id: query.username,
+        params,
+      })
 
-    // Assign values to pass to props
-    user = response.data.profile
+      // Assign values to pass to props
+      user = response.data.profile
 
-    if (response.data.profile.parties) teams = response.data.profile.parties
-    else teams = []
+      if (response.data.profile.parties) teams = response.data.profile.parties
+      else teams = []
 
-    meta.count = response.data.meta.count
-    meta.totalPages = response.data.meta.total_pages
-    meta.perPage = response.data.meta.per_page
-  }
+      meta.count = response.data.meta.count
+      meta.totalPages = response.data.meta.total_pages
+      meta.perPage = response.data.meta.per_page
+    }
 
-  return {
-    props: {
-      user: user,
-      teams: teams,
-      meta: meta,
-      raids: raids,
-      sortedRaids: sortedRaids,
-      ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
-      // Will be passed to the page component as props
-    },
+    return {
+      props: {
+        user: user,
+        teams: teams,
+        meta: meta,
+        raids: raids,
+        sortedRaids: sortedRaids,
+        ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
+        // Will be passed to the page component as props
+      },
+    }
+  } catch (error) {
+    printError(error, 'axios')
   }
 }
 
diff --git a/pages/new/index.tsx b/pages/new/index.tsx
index d3f3881b..3464fe50 100644
--- a/pages/new/index.tsx
+++ b/pages/new/index.tsx
@@ -5,11 +5,12 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import Party from '~components/Party'
 
-import { appState } from '~utils/appState'
-import { groupWeaponKeys } from '~utils/groupWeaponKeys'
+import api from '~utils/api'
 import organizeRaids from '~utils/organizeRaids'
 import setUserToken from '~utils/setUserToken'
-import api from '~utils/api'
+import { appState } from '~utils/appState'
+import { groupWeaponKeys } from '~utils/groupWeaponKeys'
+import { printError } from '~utils/reportError'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
@@ -82,32 +83,34 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
-  let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll()
-    .then((response) => organizeRaids(response.data))
+  try {
+    let { raids, sortedRaids } = await api.endpoints.raids
+      .getAll()
+      .then((response) => organizeRaids(response.data))
 
-  let jobs = await api.endpoints.jobs
-    .getAll()
-    .then((response) => {
+    let jobs = await api.endpoints.jobs.getAll().then((response) => {
       return response.data
     })
 
-  let jobSkills = await api.allJobSkills().then((response) => response.data)
+    let jobSkills = await api.allJobSkills().then((response) => response.data)
 
-  let weaponKeys = await api.endpoints.weapon_keys
-    .getAll()
-    .then((response) => groupWeaponKeys(response.data))
+    let weaponKeys = await api.endpoints.weapon_keys
+      .getAll()
+      .then((response) => groupWeaponKeys(response.data))
 
-  return {
-    props: {
-      jobs: jobs,
-      jobSkills: jobSkills,
-      raids: raids,
-      sortedRaids: sortedRaids,
-      weaponKeys: weaponKeys,
-      ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
-      // Will be passed to the page component as props
-    },
+    return {
+      props: {
+        jobs: jobs,
+        jobSkills: jobSkills,
+        raids: raids,
+        sortedRaids: sortedRaids,
+        weaponKeys: weaponKeys,
+        ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
+        // Will be passed to the page component as props
+      },
+    }
+  } catch (error) {
+    printError(error, 'axios')
   }
 }
 
diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx
index c015abea..58fe689c 100644
--- a/pages/p/[party].tsx
+++ b/pages/p/[party].tsx
@@ -6,17 +6,17 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import Party from '~components/Party'
 
-import { appState } from '~utils/appState'
-import { groupWeaponKeys } from '~utils/groupWeaponKeys'
+import api from '~utils/api'
 import generateTitle from '~utils/generateTitle'
 import organizeRaids from '~utils/organizeRaids'
 import setUserToken from '~utils/setUserToken'
-import api from '~utils/api'
+import { appState } from '~utils/appState'
+import { groupWeaponKeys } from '~utils/groupWeaponKeys'
 import { GridType } from '~utils/enums'
+import { printError } from '~utils/reportError'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
-import { useQueryState } from 'next-usequerystate'
 
 interface Props {
   party: Party
@@ -154,74 +154,74 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
-  let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll()
-    .then((response) => organizeRaids(response.data))
+  try {
+    let { raids, sortedRaids } = await api.endpoints.raids
+      .getAll()
+      .then((response) => organizeRaids(response.data))
 
-  let jobs = await api.endpoints.jobs
-    .getAll()
-    .then((response) => {
+    let jobs = await api.endpoints.jobs.getAll().then((response) => {
       return response.data
     })
 
-  let jobSkills = await api
-    .allJobSkills()
-    .then((response) => response.data)
+    let jobSkills = await api.allJobSkills().then((response) => response.data)
 
-  let weaponKeys = await api.endpoints.weapon_keys
-    .getAll()
-    .then((response) => groupWeaponKeys(response.data))
+    let weaponKeys = await api.endpoints.weapon_keys
+      .getAll()
+      .then((response) => groupWeaponKeys(response.data))
 
-  let party: Party | null = null
-  if (query.party) {
-    let response = await api.endpoints.parties.getOne({
-      id: query.party
-    })
-    party = response.data.party
-  } else {
-    console.log('No party code')
-  }
-
-  function getElement() {
-    if (party) {
-      const mainhand = party.weapons.find((weapon) => weapon.mainhand)
-      if (mainhand && mainhand.object.element === 0) {
-        return mainhand.element
-      } else {
-        return mainhand?.object.element
-      }
+    let party: Party | null = null
+    if (query.party) {
+      let response = await api.endpoints.parties.getOne({
+        id: query.party,
+      })
+      party = response.data.party
     } else {
-      return 0
+      console.log('No party code')
     }
-  }
 
-  function elementEmoji() {
-    const element = getElement()
+    function getElement() {
+      if (party) {
+        const mainhand = party.weapons.find((weapon) => weapon.mainhand)
+        if (mainhand && mainhand.object.element === 0) {
+          return mainhand.element
+        } else {
+          return mainhand?.object.element
+        }
+      } else {
+        return 0
+      }
+    }
 
-    if (element === 0) return '⚪'
-    else if (element === 1) return '🟢'
-    else if (element === 2) return '🔴'
-    else if (element === 3) return '🔵'
-    else if (element === 4) return '🟤'
-    else if (element === 5) return '🟣'
-    else if (element === 6) return '🟡'
-    else return '⚪'
-  }
+    function elementEmoji() {
+      const element = getElement()
 
-  return {
-    props: {
-      party: party,
-      jobs: jobs,
-      jobSkills: jobSkills,
-      raids: raids,
-      sortedRaids: sortedRaids,
-      weaponKeys: weaponKeys,
-      meta: {
-        element: elementEmoji(),
+      if (element === 0) return '⚪'
+      else if (element === 1) return '🟢'
+      else if (element === 2) return '🔴'
+      else if (element === 3) return '🔵'
+      else if (element === 4) return '🟤'
+      else if (element === 5) return '🟣'
+      else if (element === 6) return '🟡'
+      else return '⚪'
+    }
+
+    return {
+      props: {
+        party: party,
+        jobs: jobs,
+        jobSkills: jobSkills,
+        raids: raids,
+        sortedRaids: sortedRaids,
+        weaponKeys: weaponKeys,
+        meta: {
+          element: elementEmoji(),
+        },
+        ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
+        // Will be passed to the page component as props
       },
-      ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
-      // Will be passed to the page component as props
-    },
+    }
+  } catch (error) {
+    printError(error, 'axios')
   }
 }
 
diff --git a/pages/saved.tsx b/pages/saved.tsx
index b6bd1aba..546c1c09 100644
--- a/pages/saved.tsx
+++ b/pages/saved.tsx
@@ -16,6 +16,7 @@ import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
+import { printError } from '~utils/reportError'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
@@ -352,39 +353,43 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
-  // Fetch and organize raids
-  let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll()
-    .then((response) => organizeRaids(response.data))
+  try {
+    // Fetch and organize raids
+    let { raids, sortedRaids } = await api.endpoints.raids
+      .getAll()
+      .then((response) => organizeRaids(response.data))
 
-  // Create filter object
-  const filters: FilterObject = extractFilters(query, raids)
-  const params = {
-    params: { ...filters },
-  }
+    // Create filter object
+    const filters: FilterObject = extractFilters(query, raids)
+    const params = {
+      params: { ...filters },
+    }
 
-  // Set up empty variables
-  let teams: Party[] | null = null
-  let meta: PaginationObject = emptyPaginationObject
+    // Set up empty variables
+    let teams: Party[] | null = null
+    let meta: PaginationObject = emptyPaginationObject
 
-  // Fetch initial set of saved parties
-  const response = await api.savedTeams(params)
+    // Fetch initial set of saved parties
+    const response = await api.savedTeams(params)
 
-  // Assign values to pass to props
-  teams = response.data.results
-  meta.count = response.data.meta.count
-  meta.totalPages = response.data.meta.total_pages
-  meta.perPage = response.data.meta.per_page
+    // Assign values to pass to props
+    teams = response.data.results
+    meta.count = response.data.meta.count
+    meta.totalPages = response.data.meta.total_pages
+    meta.perPage = response.data.meta.per_page
 
-  return {
-    props: {
-      teams: teams,
-      meta: meta,
-      raids: raids,
-      sortedRaids: sortedRaids,
-      ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
-      // Will be passed to the page component as props
-    },
+    return {
+      props: {
+        teams: teams,
+        meta: meta,
+        raids: raids,
+        sortedRaids: sortedRaids,
+        ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
+        // Will be passed to the page component as props
+      },
+    }
+  } catch (error) {
+    printError(error, 'axios')
   }
 }
 
diff --git a/pages/teams.tsx b/pages/teams.tsx
index 03502514..a27da820 100644
--- a/pages/teams.tsx
+++ b/pages/teams.tsx
@@ -16,6 +16,7 @@ import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
+import { printError } from '~utils/reportError'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
@@ -364,38 +365,42 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   setUserToken(req, res)
 
   // Fetch and organize raids
-  let { raids, sortedRaids } = await api.endpoints.raids
-    .getAll()
-    .then((response) => organizeRaids(response.data))
+  try {
+    let { raids, sortedRaids } = await api.endpoints.raids
+      .getAll()
+      .then((response) => organizeRaids(response.data))
 
-  // Create filter object
-  const filters: FilterObject = extractFilters(query, raids)
-  const params = {
-    params: { ...filters },
-  }
+    // Create filter object
+    const filters: FilterObject = extractFilters(query, raids)
+    const params = {
+      params: { ...filters },
+    }
 
-  // Set up empty variables
-  let teams: Party[] | null = null
-  let meta: PaginationObject = emptyPaginationObject
+    // Set up empty variables
+    let teams: Party[] | null = null
+    let meta: PaginationObject = emptyPaginationObject
 
-  // Fetch initial set of parties
-  const response = await api.endpoints.parties.getAll(params)
+    // Fetch initial set of parties
+    const response = await api.endpoints.parties.getAll(params)
 
-  // Assign values to pass to props
-  teams = response.data.results
-  meta.count = response.data.meta.count
-  meta.totalPages = response.data.meta.total_pages
-  meta.perPage = response.data.meta.per_page
+    // Assign values to pass to props
+    teams = response.data.results
+    meta.count = response.data.meta.count
+    meta.totalPages = response.data.meta.total_pages
+    meta.perPage = response.data.meta.per_page
 
-  return {
-    props: {
-      teams: teams,
-      meta: meta,
-      raids: raids,
-      sortedRaids: sortedRaids,
-      ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
-      // Will be passed to the page component as props
-    },
+    return {
+      props: {
+        teams: teams,
+        meta: meta,
+        raids: raids,
+        sortedRaids: sortedRaids,
+        ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
+        // Will be passed to the page component as props
+      },
+    }
+  } catch (error) {
+    printError(error, 'axios')
   }
 }
 
diff --git a/utils/reportError.tsx b/utils/reportError.tsx
new file mode 100644
index 00000000..d24d6008
--- /dev/null
+++ b/utils/reportError.tsx
@@ -0,0 +1,20 @@
+import { AxiosError } from 'axios'
+
+function handleError(error: any) {
+  if (error instanceof Error) return error.message
+}
+
+function handleAxiosError(error: any) {
+  const axiosError = error as AxiosError
+  return axiosError.response
+}
+
+export function printError(error: any, type?: string) {
+  if (type === 'axios') {
+    const response = handleAxiosError(error)
+    console.log(`${response?.status} ${response?.statusText}`)
+    console.log(response?.data.toJSON())
+  } else {
+    console.log(handleError(error))
+  }
+}

From 82f1bef0dc37b26dfc22735effbe0acefc7ed3d7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 23 Jan 2023 14:47:31 -0800
Subject: [PATCH 03/89] Fix build error

---
 pages/p/[party].tsx | 56 ++++++++++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx
index 58fe689c..8ae2af4a 100644
--- a/pages/p/[party].tsx
+++ b/pages/p/[party].tsx
@@ -154,6 +154,32 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
+  function getElement(party?: Party) {
+    if (party) {
+      const mainhand = party.weapons.find((weapon) => weapon.mainhand)
+      if (mainhand && mainhand.object.element === 0) {
+        return mainhand.element
+      } else {
+        return mainhand?.object.element
+      }
+    } else {
+      return 0
+    }
+  }
+
+  function elementEmoji(party?: Party) {
+    const element = getElement(party)
+
+    if (element === 0) return '⚪'
+    else if (element === 1) return '🟢'
+    else if (element === 2) return '🔴'
+    else if (element === 3) return '🔵'
+    else if (element === 4) return '🟤'
+    else if (element === 5) return '🟣'
+    else if (element === 6) return '🟡'
+    else return '⚪'
+  }
+
   try {
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
@@ -169,7 +195,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
       .getAll()
       .then((response) => groupWeaponKeys(response.data))
 
-    let party: Party | null = null
+    let party: Party | undefined = undefined
     if (query.party) {
       let response = await api.endpoints.parties.getOne({
         id: query.party,
@@ -179,32 +205,6 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
       console.log('No party code')
     }
 
-    function getElement() {
-      if (party) {
-        const mainhand = party.weapons.find((weapon) => weapon.mainhand)
-        if (mainhand && mainhand.object.element === 0) {
-          return mainhand.element
-        } else {
-          return mainhand?.object.element
-        }
-      } else {
-        return 0
-      }
-    }
-
-    function elementEmoji() {
-      const element = getElement()
-
-      if (element === 0) return '⚪'
-      else if (element === 1) return '🟢'
-      else if (element === 2) return '🔴'
-      else if (element === 3) return '🔵'
-      else if (element === 4) return '🟤'
-      else if (element === 5) return '🟣'
-      else if (element === 6) return '🟡'
-      else return '⚪'
-    }
-
     return {
       props: {
         party: party,
@@ -214,7 +214,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         sortedRaids: sortedRaids,
         weaponKeys: weaponKeys,
         meta: {
-          element: elementEmoji(),
+          element: elementEmoji(party),
         },
         ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
         // Will be passed to the page component as props

From a4cc331f5ebb1e8b29b17a9aa1729301d608d8d2 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 23 Jan 2023 15:09:34 -0800
Subject: [PATCH 04/89] Use proper URL for job icons

Before we were linking to local icons, but these will live on S3
---
 components/JobDropdown/index.tsx | 6 ++++--
 components/JobSection/index.tsx  | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/JobDropdown/index.tsx b/components/JobDropdown/index.tsx
index 71fc6eee..7d4b0ab7 100644
--- a/components/JobDropdown/index.tsx
+++ b/components/JobDropdown/index.tsx
@@ -95,7 +95,7 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
                 key={i}
                 value={item.id}
                 altText={item.name[locale]}
-                iconSrc={`/images/job-icons/${item.granblue_id}.png`}
+                iconSrc={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${item.granblue_id}.png`}
               >
                 {item.name[locale]}
               </SelectItem>
@@ -116,7 +116,9 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
         value={currentJob ? currentJob.id : 'no-job'}
         altText={currentJob ? currentJob.name[locale] : ''}
         iconSrc={
-          currentJob ? `/images/job-icons/${currentJob.granblue_id}.png` : ''
+          currentJob
+            ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${currentJob.granblue_id}.png`
+            : ''
         }
         open={open}
         onClick={openJobSelect}
diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx
index 8411cfbb..2cc274a1 100644
--- a/components/JobSection/index.tsx
+++ b/components/JobSection/index.tsx
@@ -149,7 +149,7 @@ const JobSection = (props: Props) => {
           <div className="JobName">
             <img
               alt={party.job.name[locale]}
-              src={`/images/job-icons/${party.job.granblue_id}.png`}
+              src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${party.job.granblue_id}.png`}
             />
             <h3>{party.job ? party.job.name[locale] : t('no_job')}</h3>
           </div>

From 13d15c9eb8dc8d69910084d5ca26e96f4a485645 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 23 Jan 2023 22:08:17 -0800
Subject: [PATCH 05/89] Added api endpoint

---
 utils/api.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/utils/api.tsx b/utils/api.tsx
index 352f60ed..148df604 100644
--- a/utils/api.tsx
+++ b/utils/api.tsx
@@ -115,6 +115,11 @@ class Api {
     return axios.get(resourceUrl, params)
   }
 
+  jobAccessoriesForJob(jobId: string, params?: {}) {
+    const resourceUrl = `${this.url}/jobs/${jobId}/accessories`
+    return axios.get(resourceUrl, params)
+  }
+
   savedTeams(params: {}) {
     const resourceUrl = `${this.url}/parties/favorites`
     return axios.get(resourceUrl, params)

From fadf422d9afe26705359dbb358c0c851e5fa3ce4 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 23 Jan 2023 22:08:23 -0800
Subject: [PATCH 06/89] Added shield asset

---
 public/icons/Shield.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 public/icons/Shield.svg

diff --git a/public/icons/Shield.svg b/public/icons/Shield.svg
new file mode 100644
index 00000000..35fe26d8
--- /dev/null
+++ b/public/icons/Shield.svg
@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.8867 18.2719L21.8994 18.2445L21.9109 18.2165C23.5986 14.1396 24.2687 9.48442 24.4473 6.37605C24.5467 4.64432 23.3192 3.18319 21.6806 2.875C15.8289 1.77447 11.9441 1.79402 6.30801 2.87175C4.67372 3.18425 3.45305 4.64391 3.55426 6.37163C3.73153 9.39788 4.38612 14.0994 6.08889 18.2161C6.87291 20.1117 7.94937 22.0403 9.20943 23.5242C10.4151 24.9441 12.0583 26.2692 14 26.2692C15.9869 26.2692 17.615 24.852 18.7848 23.4315C20.0173 21.935 21.0766 20.0255 21.8867 18.2719Z" />
+</svg>

From 6f32c975ce92725742b74b6cb2cbafcb4282f30c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 23 Jan 2023 22:08:38 -0800
Subject: [PATCH 07/89] Extracted display of Job image into a component

---
 components/JobImage/index.scss   | 80 ++++++++++++++++++++++++++++++++
 components/JobImage/index.tsx    | 61 ++++++++++++++++++++++++
 components/JobSection/index.scss | 57 -----------------------
 components/JobSection/index.tsx  | 14 +++---
 4 files changed, 147 insertions(+), 65 deletions(-)
 create mode 100644 components/JobImage/index.scss
 create mode 100644 components/JobImage/index.tsx

diff --git a/components/JobImage/index.scss b/components/JobImage/index.scss
new file mode 100644
index 00000000..a5004f66
--- /dev/null
+++ b/components/JobImage/index.scss
@@ -0,0 +1,80 @@
+.JobImage {
+  $height: 252px;
+  $width: 447px;
+
+  aspect-ratio: 7/9;
+  background: url('/images/background_a.jpg');
+  background-size: 500px 281px;
+  border-radius: $unit;
+  box-sizing: border-box;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  display: block;
+  isolation: isolate;
+  flex-grow: 2;
+  flex-shrink: 0;
+  height: $height;
+  margin-right: $unit * 3;
+  max-height: $height;
+  max-width: $width;
+  overflow: hidden;
+  position: relative;
+  width: $width;
+  transition: box-shadow 0.15s ease-in-out;
+
+  // prettier-ignore
+  @media only screen 
+        and (max-width: 800px) 
+        and (max-height: 920px) 
+        and (-webkit-min-device-pixel-ratio: 2) {
+          margin-right: 0;
+          width: 100%;
+    }
+
+  @include breakpoint(phone) {
+    aspect-ratio: 16/9;
+    margin: 0;
+    width: 100%;
+    height: inherit;
+  }
+
+  img {
+    -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.48));
+    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.48));
+    position: relative;
+    top: $unit * -4;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    z-index: 2;
+  }
+
+  .JobAccessory.Button {
+    align-items: center;
+    border-radius: 99px;
+    justify-content: center;
+    position: relative;
+    padding: $unit * 1.5;
+    top: $unit;
+    left: $unit;
+    height: auto;
+    z-index: 10;
+
+    &:hover .Accessory svg {
+      stroke: var(--button-text-hover);
+    }
+
+    .Accessory svg {
+      fill: none;
+      stroke: var(--button-text);
+      stroke-width: 3px;
+      width: $unit-3x;
+      height: auto;
+    }
+  }
+
+  .Overlay {
+    background: none;
+    position: absolute;
+    z-index: 1;
+  }
+}
diff --git a/components/JobImage/index.tsx b/components/JobImage/index.tsx
new file mode 100644
index 00000000..d7000292
--- /dev/null
+++ b/components/JobImage/index.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import Button from '~components/Button'
+import ShieldIcon from '~public/icons/Shield.svg'
+import './index.scss'
+
+interface Props {
+  job?: Job
+  user?: User
+  onAccessoryButtonClicked: () => void
+}
+
+const ACCESSORY_JOB_IDS = ['683ffee8-4ea2-432d-bc30-4865020ac9f4']
+
+const JobImage = ({ job, user, onAccessoryButtonClicked }: Props) => {
+  // Localization
+  const { t } = useTranslation('common')
+
+  const router = useRouter()
+  const locale =
+    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+
+  // Static variables
+  const imageUrl = () => {
+    let source = ''
+
+    if (job) {
+      const slug = job.name.en.replaceAll(' ', '-').toLowerCase()
+      const gender = user && user.gender == 1 ? 'b' : 'a'
+      source = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/jobs/${slug}_${gender}.png`
+    }
+
+    return source
+  }
+
+  const hasAccessory = job && ACCESSORY_JOB_IDS.includes(job.id)
+  const image = <img alt={job?.name[locale]} src={imageUrl()} />
+
+  // Elements
+  const accessoryButton = () => {
+    return (
+      <Button
+        accessoryIcon={<ShieldIcon />}
+        className="JobAccessory"
+        onClick={onAccessoryButtonClicked}
+      />
+    )
+  }
+
+  return (
+    <div className="JobImage">
+      {hasAccessory ? accessoryButton() : ''}
+      {job && job.id !== '-1' ? image : ''}
+      <div className="Job Overlay" />
+    </div>
+  )
+}
+
+export default JobImage
diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss
index 3cb9a6d4..6caa3093 100644
--- a/components/JobSection/index.scss
+++ b/components/JobSection/index.scss
@@ -53,63 +53,6 @@
     }
   }
 
-  .JobImage {
-    $height: 252px;
-    $width: 447px;
-
-    aspect-ratio: 7/9;
-    background: url('/images/background_a.jpg');
-    background-size: 500px 281px;
-    border-radius: $unit;
-    box-sizing: border-box;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-    display: block;
-    isolation: isolate;
-    flex-grow: 2;
-    flex-shrink: 0;
-    height: $height;
-    margin-right: $unit * 3;
-    max-height: $height;
-    max-width: $width;
-    overflow: hidden;
-    position: relative;
-    width: $width;
-    transition: box-shadow 0.15s ease-in-out;
-
-    // prettier-ignore
-    @media only screen 
-        and (max-width: 800px) 
-        and (max-height: 920px) 
-        and (-webkit-min-device-pixel-ratio: 2) {
-          margin-right: 0;
-          width: 100%;
-    }
-
-    @include breakpoint(phone) {
-      aspect-ratio: 16/9;
-      margin: 0;
-      width: 100%;
-      height: inherit;
-    }
-
-    img {
-      -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.48));
-      filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.48));
-      position: relative;
-      top: $unit * -4;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 100%;
-      z-index: 2;
-    }
-
-    .Overlay {
-      background: none;
-      position: absolute;
-      z-index: 1;
-    }
-  }
-
   .JobSkills {
     display: flex;
     flex-direction: column;
diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx
index 2cc274a1..7f54ec81 100644
--- a/components/JobSection/index.tsx
+++ b/components/JobSection/index.tsx
@@ -4,6 +4,7 @@ import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 
 import JobDropdown from '~components/JobDropdown'
+import JobImage from '~components/JobImage'
 import JobSkillItem from '~components/JobSkillItem'
 import SearchModal from '~components/SearchModal'
 
@@ -130,14 +131,11 @@ const JobSection = (props: Props) => {
   // Render: JSX components
   return (
     <section id="Job">
-      <div className="JobImage">
-        {party.job && party.job.id !== '-1' ? (
-          <img alt={party.job.name[locale]} src={imageUrl} />
-        ) : (
-          ''
-        )}
-        <div className="Job Overlay" />
-      </div>
+      <JobImage
+        job={party.job}
+        user={party.user}
+        onAccessoryButtonClicked={() => {}}
+      />
       <div className="JobDetails">
         {props.editable ? (
           <JobDropdown

From 63454f0dfc8b889aa96822701f396df06eb5507b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 02:06:01 -0800
Subject: [PATCH 08/89] Update .gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 29947561..1ecada63 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,6 +53,7 @@ public/images/chara*
 public/images/job*
 public/images/awakening*
 public/images/ax*
+public/images/accessory*
 
 # Typescript v1 declaration files
 typings/

From 1d1a941364179f5520f0f090f2957a90b5f49f3c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 02:06:15 -0800
Subject: [PATCH 09/89] Add type and convenience constant

---
 types/JobAccessory.d.ts       | 11 +++++++++++
 utils/jobsWithAccessories.tsx |  1 +
 2 files changed, 12 insertions(+)
 create mode 100644 types/JobAccessory.d.ts
 create mode 100644 utils/jobsWithAccessories.tsx

diff --git a/types/JobAccessory.d.ts b/types/JobAccessory.d.ts
new file mode 100644
index 00000000..1b0b3d8e
--- /dev/null
+++ b/types/JobAccessory.d.ts
@@ -0,0 +1,11 @@
+interface JobAccessory {
+  id: string
+  granblue_id: string
+  job: Job
+  name: {
+    [key: string]: string
+    en: string
+    ja: string
+  }
+  rarity: number
+}
diff --git a/utils/jobsWithAccessories.tsx b/utils/jobsWithAccessories.tsx
new file mode 100644
index 00000000..1ed3882e
--- /dev/null
+++ b/utils/jobsWithAccessories.tsx
@@ -0,0 +1 @@
+export const ACCESSORY_JOB_IDS = ['683ffee8-4ea2-432d-bc30-4865020ac9f4']

From 06fc30a01b80603718fc734a9e4b3d34f9fd9914 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 02:06:24 -0800
Subject: [PATCH 10/89] Add dependency

---
 package-lock.json | 81 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 82 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 2f4f81e5..be7caa16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@radix-ui/react-dropdown-menu": "^2.0.1",
         "@radix-ui/react-hover-card": "^1.0.2",
         "@radix-ui/react-popover": "^1.0.3",
+        "@radix-ui/react-radio-group": "^1.1.1",
         "@radix-ui/react-select": "^1.1.2",
         "@radix-ui/react-switch": "^1.0.1",
         "@radix-ui/react-toast": "^1.1.2",
@@ -2436,6 +2437,49 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.1.tgz",
+      "integrity": "sha512-fmg1CuDKt3GAkL3YnHekmdOicyrXlbp/s/D0MrHa+YB2Un+umpJGheiRowlQtxSpb1eeehKNTINgNESi8WK5rA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-roving-focus": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-previous": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group/node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz",
+      "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-collection": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.1.tgz",
@@ -8947,6 +8991,43 @@
         "@radix-ui/react-slot": "1.0.1"
       }
     },
+    "@radix-ui/react-radio-group": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.1.tgz",
+      "integrity": "sha512-fmg1CuDKt3GAkL3YnHekmdOicyrXlbp/s/D0MrHa+YB2Un+umpJGheiRowlQtxSpb1eeehKNTINgNESi8WK5rA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-roving-focus": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-previous": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-roving-focus": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz",
+          "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "1.0.0",
+            "@radix-ui/react-collection": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-direction": "1.0.0",
+            "@radix-ui/react-id": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.1",
+            "@radix-ui/react-use-callback-ref": "1.0.0",
+            "@radix-ui/react-use-controllable-state": "1.0.0"
+          }
+        }
+      }
+    },
     "@radix-ui/react-roving-focus": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.1.tgz",
diff --git a/package.json b/package.json
index 0d880a01..d356ceb6 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.1",
     "@radix-ui/react-hover-card": "^1.0.2",
     "@radix-ui/react-popover": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-select": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.2",

From a082c392efcdcc241b34ee47e66ce543d3219367 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 02:06:38 -0800
Subject: [PATCH 11/89] Move padding to PopoverContent

---
 components/PopoverContent/index.scss       | 3 ++-
 components/TranscendencePopover/index.scss | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/PopoverContent/index.scss b/components/PopoverContent/index.scss
index d89267b7..986b2847 100644
--- a/components/PopoverContent/index.scss
+++ b/components/PopoverContent/index.scss
@@ -4,6 +4,7 @@
   border-radius: $card-corner;
   border: 0.5px solid rgba(0, 0, 0, 0.18);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
-  transform-origin: var(--radix-popover-content-transform-origin);
   outline: none;
+  padding: $unit;
+  transform-origin: var(--radix-popover-content-transform-origin);
 }
diff --git a/components/TranscendencePopover/index.scss b/components/TranscendencePopover/index.scss
index e54cec64..fb09e919 100644
--- a/components/TranscendencePopover/index.scss
+++ b/components/TranscendencePopover/index.scss
@@ -5,7 +5,6 @@
   display: flex;
   width: $unit-10x;
   height: $unit-10x;
-  padding: $unit;
   justify-content: center;
   z-index: 32;
 

From 075e4d52d791697e78551f354b2f22a38b6fc508 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 02:07:27 -0800
Subject: [PATCH 12/89] Update PopoverContent

* Add PopoverContentProps
* Set sideOffset as default prop
* Add class name to arrow
---
 components/PopoverContent/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/PopoverContent/index.tsx b/components/PopoverContent/index.tsx
index f8817e48..81873d5c 100644
--- a/components/PopoverContent/index.tsx
+++ b/components/PopoverContent/index.tsx
@@ -6,9 +6,10 @@ import './index.scss'
 
 interface Props
   extends React.DetailedHTMLProps<
-    React.DialogHTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  > {}
+      React.DialogHTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    PopoverPrimitive.PopoverContentProps {}
 
 export const Popover = PopoverPrimitive.Root
 export const PopoverAnchor = PopoverPrimitive.Anchor
@@ -26,15 +27,18 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, Props>(
     return (
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
-          sideOffset={5}
           {...props}
           className={classes}
           ref={forwardedRef}
         >
           {children}
-          <PopoverPrimitive.Arrow />
+          <PopoverPrimitive.Arrow className="Arrow" />
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>
     )
   }
 )
+
+PopoverContent.defaultProps = {
+  sideOffset: 8,
+}

From bef9c2b2865b796161063f16d3d4c174a229484b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 02:07:54 -0800
Subject: [PATCH 13/89] Add JobAccessoryPopover

This opens, closes, and saves the value but it doesn't persist to the server yet. Not a responsive component yet.
---
 components/JobAccessoryItem/index.scss    |  48 +++++++++
 components/JobAccessoryItem/index.tsx     |  34 ++++++
 components/JobAccessoryPopover/index.scss |  10 ++
 components/JobAccessoryPopover/index.tsx  | 124 ++++++++++++++++++++++
 components/JobImage/index.tsx             |  59 ++++++++--
 components/JobSection/index.tsx           |  32 +++++-
 6 files changed, 298 insertions(+), 9 deletions(-)
 create mode 100644 components/JobAccessoryItem/index.scss
 create mode 100644 components/JobAccessoryItem/index.tsx
 create mode 100644 components/JobAccessoryPopover/index.scss
 create mode 100644 components/JobAccessoryPopover/index.tsx

diff --git a/components/JobAccessoryItem/index.scss b/components/JobAccessoryItem/index.scss
new file mode 100644
index 00000000..7b2b069c
--- /dev/null
+++ b/components/JobAccessoryItem/index.scss
@@ -0,0 +1,48 @@
+.JobAccessoryItem {
+  background: none;
+  border-radius: $input-corner;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  gap: $unit;
+  padding: $unit;
+  margin: 0;
+  width: 100%;
+
+  &[data-state='checked'] {
+    background: var(--input-bg-hover);
+
+    h4 {
+      color: var(--button-text-hover);
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    background: var(--input-bg-hover);
+
+    img {
+      transform: scale(1.025);
+    }
+
+    h4 {
+      color: var(--button-text-hover);
+    }
+  }
+
+  h4 {
+    color: var(--button-text);
+    font-size: $font-small;
+    text-align: center;
+    width: 100%;
+  }
+
+  img {
+    border-radius: $item-corner;
+    width: 100%;
+    height: auto;
+    position: relative;
+    transition: $duration-zoom all ease-in-out;
+    z-index: 2;
+  }
+}
diff --git a/components/JobAccessoryItem/index.tsx b/components/JobAccessoryItem/index.tsx
new file mode 100644
index 00000000..c547a900
--- /dev/null
+++ b/components/JobAccessoryItem/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+
+import * as RadioGroup from '@radix-ui/react-radio-group'
+
+import './index.scss'
+
+interface Props {
+  accessory: JobAccessory
+  selected: boolean
+}
+
+const JobAccessoryItem = ({ accessory, selected }: Props) => {
+  // Localization
+  const router = useRouter()
+  const locale =
+    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+
+  return (
+    <RadioGroup.Item
+      className="JobAccessoryItem"
+      data-state={selected ? 'checked' : 'unchecked'}
+      value={accessory.id}
+    >
+      <img
+        alt={accessory.name[locale]}
+        src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/accessory-grid/${accessory.granblue_id}.jpg`}
+      />
+      <h4>{accessory.name[locale]}</h4>
+    </RadioGroup.Item>
+  )
+}
+
+export default JobAccessoryItem
diff --git a/components/JobAccessoryPopover/index.scss b/components/JobAccessoryPopover/index.scss
new file mode 100644
index 00000000..4d8afa01
--- /dev/null
+++ b/components/JobAccessoryPopover/index.scss
@@ -0,0 +1,10 @@
+.JobAccessory.Popover {
+  padding: $unit-2x;
+  width: 504px;
+
+  .Accessories {
+    display: grid;
+    gap: $unit;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  }
+}
diff --git a/components/JobAccessoryPopover/index.tsx b/components/JobAccessoryPopover/index.tsx
new file mode 100644
index 00000000..1ddf30e0
--- /dev/null
+++ b/components/JobAccessoryPopover/index.tsx
@@ -0,0 +1,124 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import * as RadioGroup from '@radix-ui/react-radio-group'
+
+import Button from '~components/Button'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '~components/PopoverContent'
+import JobAccessoryItem from '~components/JobAccessoryItem'
+
+import './index.scss'
+
+interface Props {
+  buttonref: React.RefObject<HTMLButtonElement>
+  currentAccessory?: JobAccessory
+  accessories: JobAccessory[]
+  editable: boolean
+  open: boolean
+  job: Job
+  onAccessorySelected: (value: string) => void
+  onOpenChange: (open: boolean) => void
+}
+
+const JobAccessoryPopover = ({
+  buttonref,
+  currentAccessory,
+  accessories,
+  editable,
+  open: modalOpen,
+  children,
+  job,
+  onAccessorySelected,
+  onOpenChange,
+}: PropsWithChildren<Props>) => {
+  // Localization
+  const { t } = useTranslation('common')
+
+  const router = useRouter()
+  const locale =
+    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+
+  // Component state
+  const [open, setOpen] = useState(false)
+
+  // Hooks
+  useEffect(() => {
+    setOpen(modalOpen)
+  }, [modalOpen])
+
+  // Event handlers
+  function handleAccessorySelected() {
+    onAccessorySelected
+    closePopover()
+  }
+
+  function handlePointerDownOutside(
+    event: CustomEvent<{ originalEvent: PointerEvent }>
+  ) {
+    const target = event.detail.originalEvent.target as Element
+    if (
+      target &&
+      buttonref.current &&
+      target.closest('.JobAccessory.Button') !== buttonref.current
+    ) {
+      onOpenChange(false)
+    }
+  }
+
+  function closePopover() {
+    onOpenChange(false)
+  }
+  const radioGroup = (
+    <RadioGroup.Root
+      className="Accessories"
+      onValueChange={handleAccessorySelected}
+    >
+      {accessories.map((accessory) => (
+        <JobAccessoryItem
+          accessory={accessory}
+          key={accessory.id}
+          selected={
+            currentAccessory && currentAccessory.id === accessory.id
+              ? true
+              : false
+          }
+        />
+      ))}
+    </RadioGroup.Root>
+  )
+
+  const readOnly = currentAccessory ? (
+    <div className="JobAccessory">
+      <img
+        alt={currentAccessory.name[locale]}
+        src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/accessory-grid/${currentAccessory.granblue_id}.jpg`}
+      />
+      <h4>{currentAccessory.name[locale]}</h4>
+    </div>
+  ) : (
+    <h3>
+      No shield selected
+      {/* {t('no_accessory', { job: job.name.en.replace(' ', '-').toLowerCase() })} */}
+    </h3>
+  )
+
+  return (
+    <Popover open={open}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent
+        className="JobAccessory"
+        onEscapeKeyDown={closePopover}
+        onPointerDownOutside={handlePointerDownOutside}
+      >
+        {editable ? radioGroup : readOnly}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default JobAccessoryPopover
diff --git a/components/JobImage/index.tsx b/components/JobImage/index.tsx
index d7000292..513693a8 100644
--- a/components/JobImage/index.tsx
+++ b/components/JobImage/index.tsx
@@ -2,26 +2,42 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 
+import { ACCESSORY_JOB_IDS } from '~utils/jobsWithAccessories'
+
 import Button from '~components/Button'
+import JobAccessoryPopover from '~components/JobAccessoryPopover'
+
 import ShieldIcon from '~public/icons/Shield.svg'
 import './index.scss'
 
 interface Props {
   job?: Job
+  currentAccessory?: JobAccessory
+  accessories?: JobAccessory[]
+  editable: boolean
   user?: User
-  onAccessoryButtonClicked: () => void
+  onAccessorySelected: (value: string) => void
 }
 
-const ACCESSORY_JOB_IDS = ['683ffee8-4ea2-432d-bc30-4865020ac9f4']
-
-const JobImage = ({ job, user, onAccessoryButtonClicked }: Props) => {
+const JobImage = ({
+  job,
+  currentAccessory,
+  editable,
+  accessories,
+  user,
+  onAccessorySelected,
+}: Props) => {
   // Localization
-  const { t } = useTranslation('common')
-
   const router = useRouter()
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
+  // Component state
+  const [open, setOpen] = useState(false)
+
+  // Refs
+  const buttonRef = React.createRef<HTMLButtonElement>()
+
   // Static variables
   const imageUrl = () => {
     let source = ''
@@ -38,20 +54,47 @@ const JobImage = ({ job, user, onAccessoryButtonClicked }: Props) => {
   const hasAccessory = job && ACCESSORY_JOB_IDS.includes(job.id)
   const image = <img alt={job?.name[locale]} src={imageUrl()} />
 
+  function handleAccessoryButtonClicked() {
+    setOpen(!open)
+  }
+
+  function handlePopoverOpenChanged(open: boolean) {
+    setOpen(open)
+  }
+
   // Elements
   const accessoryButton = () => {
     return (
       <Button
         accessoryIcon={<ShieldIcon />}
         className="JobAccessory"
-        onClick={onAccessoryButtonClicked}
+        onClick={handleAccessoryButtonClicked}
+        ref={buttonRef}
       />
     )
   }
 
+  const accessoryPopover = () => {
+    return job && accessories ? (
+      <JobAccessoryPopover
+        buttonref={buttonRef}
+        currentAccessory={currentAccessory}
+        accessories={accessories}
+        editable={editable}
+        open={open}
+        job={job}
+        onAccessorySelected={onAccessorySelected}
+        onOpenChange={handlePopoverOpenChanged}
+      >
+        {accessoryButton()}
+      </JobAccessoryPopover>
+    ) : (
+      ''
+    )
+  }
   return (
     <div className="JobImage">
-      {hasAccessory ? accessoryButton() : ''}
+      {hasAccessory ? accessoryPopover() : ''}
       {job && job.id !== '-1' ? image : ''}
       <div className="Job Overlay" />
     </div>
diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx
index 7f54ec81..3e61f843 100644
--- a/components/JobSection/index.tsx
+++ b/components/JobSection/index.tsx
@@ -8,7 +8,9 @@ import JobImage from '~components/JobImage'
 import JobSkillItem from '~components/JobSkillItem'
 import SearchModal from '~components/SearchModal'
 
+import api from '~utils/api'
 import { appState } from '~utils/appState'
+import { ACCESSORY_JOB_IDS } from '~utils/jobsWithAccessories'
 import type { JobSkillObject, SearchableObject } from '~types'
 
 import './index.scss'
@@ -30,13 +32,19 @@ const JobSection = (props: Props) => {
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
+  // Data state
   const [job, setJob] = useState<Job>()
   const [imageUrl, setImageUrl] = useState('')
   const [numSkills, setNumSkills] = useState(4)
   const [skills, setSkills] = useState<{ [key: number]: JobSkill | undefined }>(
     []
   )
+  const [accessories, setAccessories] = useState<JobAccessory[]>([])
+  const [currentAccessory, setCurrentAccessory] = useState<
+    JobAccessory | undefined
+  >()
 
+  // Refs
   const selectRef = React.createRef<HTMLSelectElement>()
 
   useEffect(() => {
@@ -62,14 +70,33 @@ const JobSection = (props: Props) => {
         appState.party.job = job
       if (job.row === '1') setNumSkills(3)
       else setNumSkills(4)
+      fetchJobAccessories()
     }
   }, [job])
 
+  // Data fetching
+  async function fetchJobAccessories() {
+    if (job && ACCESSORY_JOB_IDS.includes(job.id)) {
+      const response = await api.jobAccessoriesForJob(job.id)
+      const jobAccessories: JobAccessory[] = response.data
+      setAccessories(jobAccessories)
+    }
+  }
+
   function receiveJob(job?: Job) {
     setJob(job)
     props.saveJob(job)
   }
 
+  function handleAccessorySelected(value: string) {
+    const accessory = accessories.find((accessory) => accessory.id === value)
+    if (accessory) setCurrentAccessory(accessory)
+  }
+
+  useEffect(() => {
+    console.log(currentAccessory)
+  }, [currentAccessory])
+
   function generateImageUrl() {
     let imgSrc = ''
 
@@ -133,8 +160,11 @@ const JobSection = (props: Props) => {
     <section id="Job">
       <JobImage
         job={party.job}
+        currentAccessory={currentAccessory}
+        accessories={accessories}
+        editable={props.editable}
         user={party.user}
-        onAccessoryButtonClicked={() => {}}
+        onAccessorySelected={handleAccessorySelected}
       />
       <div className="JobDetails">
         {props.editable ? (

From 9a3d83309240f1187d01769fde6996bac395f8a1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 02:39:04 -0800
Subject: [PATCH 14/89] Persist and recall accessory from server

---
 components/CharacterGrid/index.tsx       | 31 ++++++++++++++++++++++--
 components/JobAccessoryPopover/index.tsx |  4 +--
 components/JobSection/index.tsx          | 12 +++++----
 components/Party/index.tsx               |  1 +
 components/SelectItem/index.tsx          |  3 ++-
 types/Party.d.ts                         |  1 +
 utils/appState.tsx                       | 13 ++++++++++
 utils/reportError.tsx                    |  2 +-
 8 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index d4c72e6e..73cfcc08 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -55,6 +55,7 @@ const CharacterGrid = (props: Props) => {
     2: undefined,
     3: undefined,
   })
+  const [jobAccessory, setJobAccessory] = useState<JobAccessory>()
   const [errorMessage, setErrorMessage] = useState('')
 
   // Create a temporary state to store previous weapon uncap values and transcendence stages
@@ -81,6 +82,7 @@ const CharacterGrid = (props: Props) => {
   useEffect(() => {
     setJob(appState.party.job)
     setJobSkills(appState.party.jobSkills)
+    setJobAccessory(appState.party.accessory)
   }, [appState])
 
   // Initialize an array of current uncap values for each characters
@@ -186,7 +188,7 @@ const CharacterGrid = (props: Props) => {
   }
 
   // Methods: Saving job and job skills
-  const saveJob = async function (job?: Job) {
+  async function saveJob(job?: Job) {
     const payload = {
       party: {
         job_id: job ? job.id : -1,
@@ -214,7 +216,7 @@ const CharacterGrid = (props: Props) => {
     }
   }
 
-  const saveJobSkill = function (skill: JobSkill, position: number) {
+  function saveJobSkill(skill: JobSkill, position: number) {
     if (party.id && appState.party.editable) {
       const positionedKey = `skill${position}_id`
 
@@ -253,6 +255,29 @@ const CharacterGrid = (props: Props) => {
     }
   }
 
+  async function saveAccessory(accessory: JobAccessory) {
+    const payload = {
+      party: {
+        accessory_id: accessory.id,
+      },
+    }
+
+    if (appState.party.id) {
+      const response = await api.endpoints.parties.update(
+        appState.party.id,
+        payload
+      )
+      const team = response.data
+
+      setJobAccessory(team.accessory)
+      appState.party.accessory = team.accessory
+    }
+  }
+
+  useEffect(() => {
+    console.log(jobAccessory)
+  }, [jobAccessory])
+
   // Methods: Helpers
   function characterUncapLevel(character: Character) {
     let uncapLevel
@@ -474,9 +499,11 @@ const CharacterGrid = (props: Props) => {
         <JobSection
           job={job}
           jobSkills={jobSkills}
+          jobAccessory={jobAccessory}
           editable={party.editable}
           saveJob={saveJob}
           saveSkill={saveJobSkill}
+          saveAccessory={saveAccessory}
         />
         <CharacterConflictModal
           open={modalOpen}
diff --git a/components/JobAccessoryPopover/index.tsx b/components/JobAccessoryPopover/index.tsx
index 1ddf30e0..6ad97eab 100644
--- a/components/JobAccessoryPopover/index.tsx
+++ b/components/JobAccessoryPopover/index.tsx
@@ -52,8 +52,8 @@ const JobAccessoryPopover = ({
   }, [modalOpen])
 
   // Event handlers
-  function handleAccessorySelected() {
-    onAccessorySelected
+  function handleAccessorySelected(value: string) {
+    onAccessorySelected(value)
     closePopover()
   }
 
diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx
index 3e61f843..83e387c8 100644
--- a/components/JobSection/index.tsx
+++ b/components/JobSection/index.tsx
@@ -19,9 +19,11 @@ import './index.scss'
 interface Props {
   job?: Job
   jobSkills: JobSkillObject
+  jobAccessory?: JobAccessory
   editable: boolean
   saveJob: (job?: Job) => void
   saveSkill: (skill: JobSkill, position: number) => void
+  saveAccessory: (accessory: JobAccessory) => void
 }
 
 const JobSection = (props: Props) => {
@@ -56,6 +58,7 @@ const JobSection = (props: Props) => {
       2: props.jobSkills[2],
       3: props.jobSkills[3],
     })
+    setCurrentAccessory(props.jobAccessory)
 
     if (selectRef.current && props.job) selectRef.current.value = props.job.id
   }, [props])
@@ -90,13 +93,12 @@ const JobSection = (props: Props) => {
 
   function handleAccessorySelected(value: string) {
     const accessory = accessories.find((accessory) => accessory.id === value)
-    if (accessory) setCurrentAccessory(accessory)
+    if (accessory) {
+      setCurrentAccessory(accessory)
+      props.saveAccessory(accessory)
+    }
   }
 
-  useEffect(() => {
-    console.log(currentAccessory)
-  }, [currentAccessory])
-
   function generateImageUrl() {
     let imgSrc = ''
 
diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 07e47403..f3fb8249 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -147,6 +147,7 @@ const Party = (props: Props) => {
     appState.party.updated_at = team.updated_at
     appState.party.job = team.job
     appState.party.jobSkills = team.job_skills
+    appState.party.accessory = team.accessory
 
     appState.party.id = team.id
     appState.party.extra = team.extra
diff --git a/components/SelectItem/index.tsx b/components/SelectItem/index.tsx
index 12ee6cff..bf6f9b6b 100644
--- a/components/SelectItem/index.tsx
+++ b/components/SelectItem/index.tsx
@@ -14,10 +14,11 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
   { children, ...props },
   forwardedRef
 ) {
+  const { altText, iconSrc, ...rest } = props
   return (
     <Select.Item
       className={classNames('SelectItem', props.className)}
-      {...props}
+      {...rest}
       ref={forwardedRef}
       value={`${props.value}`}
     >
diff --git a/types/Party.d.ts b/types/Party.d.ts
index 9b8d0978..536d01e5 100644
--- a/types/Party.d.ts
+++ b/types/Party.d.ts
@@ -20,6 +20,7 @@ interface Party {
   chain_count?: number
   job: Job
   job_skills: JobSkillObject
+  accessory: JobAccessory
   shortcode: string
   extra: boolean
   favorited: boolean
diff --git a/utils/appState.tsx b/utils/appState.tsx
index 8dbc9c69..9d402008 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -18,6 +18,17 @@ const emptyJob: Job = {
   },
 }
 
+const emptyJobAccessory: JobAccessory = {
+  id: '-1',
+  granblue_id: '-1',
+  job: emptyJob,
+  name: {
+    en: '',
+    ja: '',
+  },
+  rarity: 0,
+}
+
 interface AppState {
   [key: string]: any
 
@@ -29,6 +40,7 @@ interface AppState {
     description: string | undefined
     job: Job
     jobSkills: JobSkillObject
+    accessory: JobAccessory
     raid: Raid | undefined
     element: number
     fullAuto: boolean
@@ -83,6 +95,7 @@ export const initialAppState: AppState = {
       2: undefined,
       3: undefined,
     },
+    accessory: emptyJobAccessory,
     raid: undefined,
     fullAuto: false,
     autoGuard: false,
diff --git a/utils/reportError.tsx b/utils/reportError.tsx
index d24d6008..2302e57a 100644
--- a/utils/reportError.tsx
+++ b/utils/reportError.tsx
@@ -13,7 +13,7 @@ export function printError(error: any, type?: string) {
   if (type === 'axios') {
     const response = handleAxiosError(error)
     console.log(`${response?.status} ${response?.statusText}`)
-    console.log(response?.data.toJSON())
+    console.log(response?.data)
   } else {
     console.log(handleError(error))
   }

From 271ec17202ce7698e433b1de80dc19f7263df8fb Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 18:52:00 -0800
Subject: [PATCH 15/89] Add Toast component

---
 components/Toast/index.scss |  0
 components/Toast/index.tsx  | 39 +++++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 components/Toast/index.scss
 create mode 100644 components/Toast/index.tsx

diff --git a/components/Toast/index.scss b/components/Toast/index.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/components/Toast/index.tsx b/components/Toast/index.tsx
new file mode 100644
index 00000000..3e485ffc
--- /dev/null
+++ b/components/Toast/index.tsx
@@ -0,0 +1,39 @@
+import React, { PropsWithChildren } from 'react'
+import classNames from 'classnames'
+
+import * as ToastPrimitive from '@radix-ui/react-toast'
+import './index.scss'
+
+interface Props {
+  className?: string
+  title?: string
+  content: string
+}
+
+const Toast = ({
+  children,
+  title,
+  content,
+  ...props
+}: PropsWithChildren<Props>) => {
+  const classes = classNames(props.className, {
+    Toast: true,
+  })
+
+  return (
+    <ToastPrimitive.Root {...props} className={classes}>
+      {title && <ToastPrimitive.Title>{title}</ToastPrimitive.Title>}
+      <ToastPrimitive.Description>{content}</ToastPrimitive.Description>
+      {children && (
+        <ToastPrimitive.Action asChild altText={content}>
+          {children}
+        </ToastPrimitive.Action>
+      )}
+      <ToastPrimitive.Close aria-label="Close">
+        <span aria-hidden>×</span>
+      </ToastPrimitive.Close>
+    </ToastPrimitive.Root>
+  )
+}
+
+export default Toast

From f6d0cd7089a606483d952e92f1daa1e659ab21dc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 18:52:12 -0800
Subject: [PATCH 16/89] WIP: Toast for updates

---
 components/UpdateToast/index.scss | 11 +++++++++++
 components/UpdateToast/index.tsx  | 30 ++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 components/UpdateToast/index.scss
 create mode 100644 components/UpdateToast/index.tsx

diff --git a/components/UpdateToast/index.scss b/components/UpdateToast/index.scss
new file mode 100644
index 00000000..f444e5c0
--- /dev/null
+++ b/components/UpdateToast/index.scss
@@ -0,0 +1,11 @@
+.Notice {
+  align-items: center;
+  border-radius: $card-corner;
+  background: blue;
+  display: flex;
+  padding: $unit;
+
+  p {
+    font-size: $font-small;
+  }
+}
diff --git a/components/UpdateToast/index.tsx b/components/UpdateToast/index.tsx
new file mode 100644
index 00000000..74f63756
--- /dev/null
+++ b/components/UpdateToast/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import Button from '~components/Button'
+import Toast from '~components/Toast'
+
+import './index.scss'
+import { useTranslation } from 'next-i18next'
+
+interface Props {}
+
+const UpdateToast = (props: Props) => {
+  const { t } = useTranslation('updates')
+
+  const classes = classNames({
+    Update: true,
+  })
+
+  return (
+    <Toast
+      className={classes}
+      title={t('updates.latest.title')}
+      content={t('updates.latest.content')}
+    >
+      <Button buttonSize="small" contained={true} text="" />
+    </Toast>
+  )
+}
+
+export default UpdateToast

From a6bc5380077adb32e60b0317f87337d5f599a9ec Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 19:20:41 -0800
Subject: [PATCH 17/89] Add Manadiver to accessory job IDs

---
 utils/jobsWithAccessories.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/utils/jobsWithAccessories.tsx b/utils/jobsWithAccessories.tsx
index 1ed3882e..3dc7ad57 100644
--- a/utils/jobsWithAccessories.tsx
+++ b/utils/jobsWithAccessories.tsx
@@ -1 +1,4 @@
-export const ACCESSORY_JOB_IDS = ['683ffee8-4ea2-432d-bc30-4865020ac9f4']
+export const ACCESSORY_JOB_IDS = [
+  '683ffee8-4ea2-432d-bc30-4865020ac9f4',
+  'a5d6fca3-5649-4e12-a6db-5fcec49150ee',
+]

From 5c2c61eeda7df028a8f31da1ca41a02321a0cf7c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 21:22:34 -0800
Subject: [PATCH 18/89] Add ToastProvider and ToastViewport

---
 components/Layout/index.scss | 15 +++++++++++++++
 pages/_app.tsx               | 10 +++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 components/Layout/index.scss

diff --git a/components/Layout/index.scss b/components/Layout/index.scss
new file mode 100644
index 00000000..b8403bc0
--- /dev/null
+++ b/components/Layout/index.scss
@@ -0,0 +1,15 @@
+.ToastViewport {
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+  display: flex;
+  flex-direction: column;
+  width: 340px;
+  max-width: 100vw;
+  z-index: 2147483647;
+  padding: 25px;
+  gap: 10px;
+  margin: 0px;
+  list-style: none;
+  outline: none;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 66db9852..6cd24440 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,6 +10,7 @@ import { accountState } from '~utils/accountState'
 import setUserToken from '~utils/setUserToken'
 
 import '../styles/globals.scss'
+import { ToastProvider, Viewport } from '@radix-ui/react-toast'
 
 function MyApp({ Component, pageProps }: AppProps) {
   const accountCookie = getCookie('account')
@@ -43,9 +44,12 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ThemeProvider>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <ToastProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+        <Viewport className="ToastViewport" />
+      </ToastProvider>
     </ThemeProvider>
   )
 }

From dca5a541a357b22ec0ab7104a69654a129b8993e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 21:22:49 -0800
Subject: [PATCH 19/89] Refined base toast styles

---
 components/Toast/index.scss | 35 +++++++++++++++++++++++++++++++++++
 components/Toast/index.tsx  | 20 ++++++++++++++------
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/components/Toast/index.scss b/components/Toast/index.scss
index e69de29b..b89923ae 100644
--- a/components/Toast/index.scss
+++ b/components/Toast/index.scss
@@ -0,0 +1,35 @@
+.Toast {
+  background: var(--dialog-bg);
+  border-radius: $card-corner;
+  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
+  display: flex;
+  flex-direction: column;
+  gap: $unit-2x;
+  padding: $unit-3x;
+
+  .Header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+
+    h3 {
+      font-size: $font-regular;
+      font-weight: $medium;
+    }
+
+    button {
+      background: none;
+      border: none;
+      font-size: $font-regular;
+      font-weight: $bold;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  p {
+    line-height: 1.3;
+  }
+}
diff --git a/components/Toast/index.tsx b/components/Toast/index.tsx
index 3e485ffc..95878f2f 100644
--- a/components/Toast/index.tsx
+++ b/components/Toast/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import * as ToastPrimitive from '@radix-ui/react-toast'
 import './index.scss'
 
-interface Props {
+interface Props extends ToastPrimitive.ToastProps {
   className?: string
   title?: string
   content: string
@@ -22,16 +22,24 @@ const Toast = ({
 
   return (
     <ToastPrimitive.Root {...props} className={classes}>
-      {title && <ToastPrimitive.Title>{title}</ToastPrimitive.Title>}
-      <ToastPrimitive.Description>{content}</ToastPrimitive.Description>
+      <div className="Header">
+        {title && (
+          <ToastPrimitive.Title asChild>
+            <h3>{title}</h3>
+          </ToastPrimitive.Title>
+        )}
+        <ToastPrimitive.Close aria-label="Close">
+          <span aria-hidden>×</span>
+        </ToastPrimitive.Close>
+      </div>
+      <ToastPrimitive.Description asChild>
+        <p>{content}</p>
+      </ToastPrimitive.Description>
       {children && (
         <ToastPrimitive.Action asChild altText={content}>
           {children}
         </ToastPrimitive.Action>
       )}
-      <ToastPrimitive.Close aria-label="Close">
-        <span aria-hidden>×</span>
-      </ToastPrimitive.Close>
     </ToastPrimitive.Root>
   )
 }

From 6ec5bc3230d3b5d0450c8f1f5b4ec9ba4b476822 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 21:23:02 -0800
Subject: [PATCH 20/89] Add UpdateToast for testing

---
 components/Layout/index.tsx      |  4 ++++
 components/UpdateToast/index.tsx | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index dafc8b14..3ed4b1f3 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -1,6 +1,9 @@
 import type { ReactElement } from 'react'
 import TopHeader from '~components/Header'
+import Toast from '~components/Toast'
+import UpdateToast from '~components/UpdateToast'
 
+import './index.scss'
 interface Props {
   children: ReactElement
 }
@@ -9,6 +12,7 @@ const Layout = ({ children }: Props) => {
   return (
     <>
       <TopHeader />
+      <UpdateToast open={true} updateType="feature" />
       <main>{children}</main>
     </>
   )
diff --git a/components/UpdateToast/index.tsx b/components/UpdateToast/index.tsx
index 74f63756..7d8d6bd5 100644
--- a/components/UpdateToast/index.tsx
+++ b/components/UpdateToast/index.tsx
@@ -7,10 +7,13 @@ import Toast from '~components/Toast'
 import './index.scss'
 import { useTranslation } from 'next-i18next'
 
-interface Props {}
+interface Props {
+  open: boolean
+  updateType: 'feature' | 'content'
+}
 
 const UpdateToast = (props: Props) => {
-  const { t } = useTranslation('updates')
+  const { t } = useTranslation('roadmap')
 
   const classes = classNames({
     Update: true,
@@ -19,10 +22,12 @@ const UpdateToast = (props: Props) => {
   return (
     <Toast
       className={classes}
-      title={t('updates.latest.title')}
-      content={t('updates.latest.content')}
+      title={t(`toasts.title`)}
+      content={t(`toasts.description.${props.updateType}`)}
+      open={true}
+      type="background"
     >
-      <Button buttonSize="small" contained={true} text="" />
+      <Button buttonSize="small" contained={true} text={t('toasts.button')} />
     </Toast>
   )
 }

From f647f98bdedc5e6ea0ec923be4c1dd1f76446843 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 21:26:49 -0800
Subject: [PATCH 21/89] Added toast translations

---
 public/locales/en/roadmap.json | 8 ++++++++
 public/locales/ja/roadmap.json | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/public/locales/en/roadmap.json b/public/locales/en/roadmap.json
index c5482c86..2ade7ed1 100644
--- a/public/locales/en/roadmap.json
+++ b/public/locales/en/roadmap.json
@@ -4,6 +4,14 @@
       "title": "Roadmap"
     }
   },
+  "toasts": {
+    "title": "New update",
+    "description": {
+      "content": "New items have been added from the latest Granblue Fantasy update.",
+      "feature": "Now you can remix other people's teams, add Character rings and earrings, set Shields and Manatura on parties, and more!"
+    },
+    "button": "Learn more"
+  },
   "title": "Roadmap",
   "subtitle": "Next update",
   "blurb": "I'm aiming for this update to release between late-January and early-February. I'm losing a week to top 2k in Guild Wars and after that I'm back at my full-time job, so progress will be a bit slower.",
diff --git a/public/locales/ja/roadmap.json b/public/locales/ja/roadmap.json
index d831c112..455bd49b 100644
--- a/public/locales/ja/roadmap.json
+++ b/public/locales/ja/roadmap.json
@@ -4,6 +4,14 @@
       "title": "ロードマップ"
     }
   },
+  "toasts": {
+    "title": "新アプデ",
+    "description": {
+      "content": "グランブルーファンタジーの新アプデのコンテンツが追加しました。",
+      "feature": "編成をリミックスしたり、キャラの指輪や耳飾りを付けたり、盾やマナベリを装備したりことをできるようにしました。"
+    },
+    "button": "詳細をみる"
+  },
   "title": "ロードマップ",
   "subtitle": "次回更新予定",
   "blurb": "1月下旬〜2月上旬に更新する予定があります。火古戦場に2000位を狙っており、その後は仕事に戻るので開発はちょっとだけ遅くなります。",

From cefec18880929e11ac41a45eeefd0d9780487509 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 21:42:14 -0800
Subject: [PATCH 22/89] Fix cookies expiring after browser restarts

We never added expirations :)
---
 components/AccountModal/index.tsx | 4 +++-
 components/HeaderMenu/index.tsx   | 6 +++++-
 components/LoginModal/index.tsx   | 9 +++++++--
 components/SearchModal/index.tsx  | 8 +++++++-
 components/SignupModal/index.tsx  | 9 +++++++--
 utils/changeLanguage.tsx          | 5 ++++-
 6 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index c10ee25c..0567380e 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -156,7 +156,9 @@ const AccountModal = (props: Props) => {
             theme: user.theme,
           }
 
-          setCookie('user', cookieObj, { path: '/' })
+          const expiresAt = new Date()
+          expiresAt.setDate(expiresAt.getDate() + 60)
+          setCookie('user', cookieObj, { path: '/', expires: expiresAt })
 
           accountState.account.user = {
             id: user.id,
diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index 6c229f59..3472f983 100644
--- a/components/HeaderMenu/index.tsx
+++ b/components/HeaderMenu/index.tsx
@@ -65,7 +65,11 @@ const HeaderMenu = (props: Props) => {
 
   function handleCheckedChange(value: boolean) {
     const language = value ? 'ja' : 'en'
-    setCookie('NEXT_LOCALE', language, { path: '/' })
+
+    const expiresAt = new Date()
+    expiresAt.setDate(expiresAt.getDate() + 60)
+
+    setCookie('NEXT_LOCALE', language, { path: '/', expires: expiresAt })
     router.push(router.asPath, undefined, { locale: language })
   }
 
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index 15d485c9..be2f72c6 100644
--- a/components/LoginModal/index.tsx
+++ b/components/LoginModal/index.tsx
@@ -133,7 +133,9 @@ const LoginModal = () => {
       token: resp.access_token,
     }
 
-    setCookie('account', cookieObj, { path: '/' })
+    const expiresAt = new Date()
+    expiresAt.setDate(expiresAt.getDate() + 60)
+    setCookie('account', cookieObj, { path: '/', expires: expiresAt })
 
     // Set Axios default headers
     setUserToken()
@@ -144,6 +146,9 @@ const LoginModal = () => {
     const user = response.data
 
     // Set user data in the user cookie
+    const expiresAt = new Date()
+    expiresAt.setDate(expiresAt.getDate() + 60)
+
     setCookie(
       'user',
       {
@@ -153,7 +158,7 @@ const LoginModal = () => {
         gender: user.gender,
         theme: user.theme,
       },
-      { path: '/' }
+      { path: '/', expires: expiresAt }
     )
 
     // Set the user data in the account state
diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx
index e0fa32e9..b8edf073 100644
--- a/components/SearchModal/index.tsx
+++ b/components/SearchModal/index.tsx
@@ -142,8 +142,14 @@ const SearchModal = (props: Props) => {
       }
     }
 
+    const expiresAt = new Date()
+    expiresAt.setDate(expiresAt.getDate() + 60)
+
     if (recents && recents.length > 5) recents.pop()
-    setCookie(`recent_${props.object}`, recents, { path: '/' })
+    setCookie(`recent_${props.object}`, recents, {
+      path: '/',
+      expires: expiresAt,
+    })
     sendData(result)
   }
 
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index 88c96372..a142d348 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -91,7 +91,9 @@ const SignupModal = (props: Props) => {
       token: resp.token,
     }
 
-    setCookie('account', cookieObj, { path: '/' })
+    const expiresAt = new Date()
+    expiresAt.setDate(expiresAt.getDate() + 60)
+    setCookie('account', cookieObj, { path: '/', expires: expiresAt })
 
     // Set Axios default headers
     setUserToken()
@@ -106,6 +108,9 @@ const SignupModal = (props: Props) => {
     const user = response.data
 
     // Set user data in the user cookie
+    const expiresAt = new Date()
+    expiresAt.setDate(expiresAt.getDate() + 60)
+
     setCookie(
       'user',
       {
@@ -115,7 +120,7 @@ const SignupModal = (props: Props) => {
         gender: user.gender,
         theme: user.theme,
       },
-      { path: '/' }
+      { path: '/', expires: expiresAt }
     )
 
     // Set the user data in the account state
diff --git a/utils/changeLanguage.tsx b/utils/changeLanguage.tsx
index ff719da6..6420fa80 100644
--- a/utils/changeLanguage.tsx
+++ b/utils/changeLanguage.tsx
@@ -6,7 +6,10 @@ export default function changeLanguage(
   newLanguage: string
 ) {
   if (newLanguage !== router.locale) {
-    setCookie('NEXT_LOCALE', newLanguage, { path: '/' })
+    const expiresAt = new Date()
+    expiresAt.setDate(expiresAt.getDate() + 60)
+
+    setCookie('NEXT_LOCALE', newLanguage, { path: '/', expires: expiresAt })
     router.push(router.asPath, undefined, { locale: newLanguage })
   }
 }

From 2718942321e1b6188cc03b481912c7ecb473803e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 14:33:53 -0800
Subject: [PATCH 23/89] Move static page modals to a standalone page

This will make it easier to whisk people here in notices
---
 components/AboutPage/index.scss     |  11 ++
 components/AboutPage/index.tsx      | 165 ++++++++++++++++++++++++++++
 components/ChangelogPage/index.scss |  64 +++++++++++
 components/ChangelogPage/index.tsx  | 122 ++++++++++++++++++++
 components/RoadmapPage/index.scss   | 108 ++++++++++++++++++
 components/RoadmapPage/index.tsx    |  73 ++++++++++++
 pages/about.tsx                     | 150 +++++++++++++++++++++++++
 public/locales/en/common.json       |   7 ++
 public/locales/ja/common.json       |   7 ++
 styles/globals.scss                 |  80 ++++++++++++++
 utils/enums.tsx                     |   6 +
 11 files changed, 793 insertions(+)
 create mode 100644 components/AboutPage/index.scss
 create mode 100644 components/AboutPage/index.tsx
 create mode 100644 components/ChangelogPage/index.scss
 create mode 100644 components/ChangelogPage/index.tsx
 create mode 100644 components/RoadmapPage/index.scss
 create mode 100644 components/RoadmapPage/index.tsx
 create mode 100644 pages/about.tsx

diff --git a/components/AboutPage/index.scss b/components/AboutPage/index.scss
new file mode 100644
index 00000000..38d21a98
--- /dev/null
+++ b/components/AboutPage/index.scss
@@ -0,0 +1,11 @@
+.About.PageContent {
+  .Links {
+    display: grid;
+    gap: $unit;
+    margin: $unit-2x 0;
+  }
+
+  div.LinkItem {
+    margin-top: $unit-2x;
+  }
+}
diff --git a/components/AboutPage/index.tsx b/components/AboutPage/index.tsx
new file mode 100644
index 00000000..0e3c546b
--- /dev/null
+++ b/components/AboutPage/index.tsx
@@ -0,0 +1,165 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import ShareIcon from '~public/icons/Share.svg'
+import DiscordIcon from '~public/icons/discord.svg'
+import GithubIcon from '~public/icons/github.svg'
+
+import './index.scss'
+
+interface Props {}
+
+const AboutPage: React.FC<Props> = (props: Props) => {
+  const { t: common } = useTranslation('common')
+  return (
+    <div className="About PageContent">
+      <h1>{common('about.segmented_control.about')}</h1>
+      <section>
+        <p>
+          Granblue.team is a tool to save and share team comps for{' '}
+          <a
+            href="https://game.granbluefantasy.jp"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Granblue Fantasy
+          </a>
+          .
+        </p>
+        <p>
+          Start adding to a team and a URL will be created for you to share
+          wherever you like, no account needed.
+        </p>
+        <p>
+          However, if you do make an account, you can save any teams you find
+          for future reference and keep all of your teams together in one place.
+        </p>
+      </section>
+
+      <section>
+        <h2>Feedback</h2>
+        <p>
+          This is an evolving project so feedback and suggestions are greatly
+          appreciated!
+        </p>
+        <p>
+          If you have a feature request, would like to report a bug, or are
+          enjoying the tool and want to say thanks, come hang out in Discord!
+        </p>
+        <div className="LinkItem">
+          <Link href="https://discord.gg/qyZ5hGdPC8">
+            <a
+              href="https://discord.gg/qyZ5hGdPC8"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div className="Left">
+                <DiscordIcon />
+                <h3>granblue-tools</h3>
+              </div>
+              <ShareIcon className="ShareIcon" />
+            </a>
+          </Link>
+        </div>
+      </section>
+
+      <section>
+        <h2>Credits</h2>
+        <p>
+          Granblue.team was built by{' '}
+          <a
+            href="https://twitter.com/jedmund"
+            target="_blank"
+            rel="noreferrer"
+          >
+            @jedmund
+          </a>{' '}
+          with a lot of help from{' '}
+          <a
+            href="https://twitter.com/lalalalinna"
+            target="_blank"
+            rel="noreferrer"
+          >
+            @lalalalinna
+          </a>{' '}
+          and{' '}
+          <a
+            href="https://twitter.com/tarngerine"
+            target="_blank"
+            rel="noreferrer"
+          >
+            @tarngerine
+          </a>
+          .
+        </p>
+        <p>
+          Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind, and
+          everyone else in{' '}
+          <a
+            href="https://game.granbluefantasy.jp/#guild/detail/1190185"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Fireplace
+          </a>{' '}
+          that helped with bug testing and feature requests. (P.S. We&apos;re
+          recruiting!) And yoey, but he won&apos;t join our crew.
+        </p>
+      </section>
+
+      <section>
+        <h2>Contributing</h2>
+        <p>
+          This app is open source and licensed under{' '}
+          <a
+            href="https://choosealicense.com/licenses/agpl-3.0/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GNU AGPLv3
+          </a>
+          . Plainly, that means you can download the source, modify it, and
+          redistribute it if you attribute this project, use the same license,
+          and keep it open source. You can contribute on Github.
+        </p>
+        <ul className="Links">
+          <li className="LinkItem">
+            <Link href="https://github.com/jedmund/hensei-api">
+              <a
+                href="https://github.com/jedmund/hensei-api"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <div className="Left">
+                  <GithubIcon />
+                  <h3>jedmund/hensei-api</h3>
+                </div>
+                <ShareIcon className="ShareIcon" />
+              </a>
+            </Link>
+          </li>
+          <li className="LinkItem">
+            <Link href="https://github.com/jedmund/hensei-web">
+              <a
+                href="https://github.com/jedmund/hensei-web"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <div className="Left">
+                  <GithubIcon />
+                  <h3>jedmund/hensei-web</h3>
+                </div>
+                <ShareIcon className="ShareIcon" />
+              </a>
+            </Link>
+          </li>
+        </ul>
+      </section>
+    </div>
+  )
+}
+
+export default AboutPage
diff --git a/components/ChangelogPage/index.scss b/components/ChangelogPage/index.scss
new file mode 100644
index 00000000..b8c6b9d0
--- /dev/null
+++ b/components/ChangelogPage/index.scss
@@ -0,0 +1,64 @@
+.Changelog.PageContent {
+  .version {
+    &.content {
+      .top h3 {
+        color: var(--accent-yellow);
+      }
+
+      .update {
+        display: flex;
+        flex-direction: column;
+        gap: $unit-2x;
+      }
+
+      .characters,
+      .weapons,
+      .summons {
+        display: grid;
+        grid-template-rows: 1fr auto;
+        gap: $unit;
+
+        & > h4 {
+          font-weight: $medium;
+          font-size: $font-regular;
+        }
+      }
+
+      .items {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: $unit-4x;
+      }
+    }
+
+    .top {
+      align-items: baseline;
+      display: flex;
+      gap: $unit-half;
+      margin-bottom: $unit-2x;
+
+      h3 {
+        color: var(--accent-blue);
+        font-weight: $medium;
+        font-size: $font-large;
+      }
+
+      time {
+        color: var(--text-secondary);
+        font-size: $font-small;
+        font-weight: $medium;
+      }
+    }
+  }
+
+  .notes {
+    color: var(--text-primary);
+    list-style-type: disc;
+    list-style-position: inside;
+
+    li {
+      margin-bottom: $unit-half;
+      font-size: $font-regular;
+    }
+  }
+}
diff --git a/components/ChangelogPage/index.tsx b/components/ChangelogPage/index.tsx
new file mode 100644
index 00000000..67408f8f
--- /dev/null
+++ b/components/ChangelogPage/index.tsx
@@ -0,0 +1,122 @@
+import React from 'react'
+
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import ChangelogUnit from '~components/ChangelogUnit'
+
+import './index.scss'
+
+interface Props {}
+
+const ChangelogPage: React.FC<Props> = (props: Props) => {
+  const { t: common } = useTranslation('common')
+  return (
+    <div className="Changelog PageContent">
+      <h1>{common('about.segmented_control.changelog')}</h1>
+      <section className="version" data-version="1.0">
+        <div className="top">
+          <h3>1.0.1</h3>
+          <time>2023/01/08</time>
+        </div>
+        <ul className="notes">
+          <li>Extra party fields: Full Auto, Clear Time, and more</li>
+          <li>Support for Youtube short URLs</li>
+          <li>Responsive grids and lots of other mobile fixes</li>
+          <li>Many other bug fixes</li>
+        </ul>
+      </section>
+      <section className="content version" data-version="2022-12L">
+        <div className="top">
+          <h3>2022-12 Legend Festival</h3>
+          <time>2022/12/26</time>
+        </div>
+        <div className="update">
+          <section className="characters">
+            <h4>New characters</h4>
+            <div className="items">
+              <ChangelogUnit
+                name="Michael (Grand)"
+                id="3040440000"
+                type="character"
+              />
+              <ChangelogUnit name="Makura" id="3040441000" type="character" />
+              <ChangelogUnit
+                name="Ultimate Friday"
+                id="3040442000"
+                type="character"
+              />
+            </div>
+          </section>
+          <section className="weapons">
+            <h4>New weapons</h4>
+            <div className="items">
+              <ChangelogUnit
+                name="Crimson Scale"
+                id="1040315900"
+                type="weapon"
+              />
+              <ChangelogUnit name="Leporidius" id="1040914500" type="weapon" />
+              <ChangelogUnit name="FRIED Spear" id="1040218200" type="weapon" />
+            </div>
+          </section>
+          <section className="summons">
+            <h4>New summons</h4>
+            <div className="items">
+              <ChangelogUnit name="Yatima" id="2040417000" type="summon" />
+            </div>
+          </section>
+        </div>
+      </section>
+      <section className="content version" data-version="2022-12F2">
+        <div className="top">
+          <h3>2022-12 Flash Gala</h3>
+          <time>2022/12/26</time>
+        </div>
+        <div className="update">
+          <section className="characters">
+            <h4>New characters</h4>
+            <div className="items">
+              <ChangelogUnit
+                name="Charlotta (Grand)"
+                id="3040438000"
+                type="character"
+              />
+              <ChangelogUnit name="Erin" id="3040439000" type="character" />
+            </div>
+          </section>
+          <section className="weapons">
+            <h4>New weapons</h4>
+            <div className="items">
+              <ChangelogUnit
+                name="Claíomh Solais Díon"
+                id="1040024200"
+                type="weapon"
+              />
+              <ChangelogUnit
+                name="Crystal Edge"
+                id="1040116500"
+                type="weapon"
+              />
+            </div>
+          </section>
+        </div>
+      </section>
+      <section className="version" data-version="1.0">
+        <div className="top">
+          <h3>1.0.0</h3>
+          <time>2022/12/26</time>
+        </div>
+        <ul className="notes">
+          <li>First release!</li>
+          <li>You can embed Youtube videos now</li>
+          <li>Better clicking - right-click and open in a new tab</li>
+          <li>Manually set dark mode in Account Settings</li>
+          <li>Lots of bugs squashed</li>
+        </ul>
+      </section>
+    </div>
+  )
+}
+
+export default ChangelogPage
diff --git a/components/RoadmapPage/index.scss b/components/RoadmapPage/index.scss
new file mode 100644
index 00000000..2c106d30
--- /dev/null
+++ b/components/RoadmapPage/index.scss
@@ -0,0 +1,108 @@
+.Roadmap.PageContent {
+  h3.priority {
+    font-weight: $medium;
+    font-size: $font-large;
+    margin-bottom: $unit-4x;
+
+    &.in_progress {
+      color: $yellow;
+    }
+
+    &.high {
+      color: $red;
+    }
+
+    &.mid {
+      color: $orange-10;
+    }
+
+    &.low {
+      color: $blue;
+    }
+  }
+
+  .notes {
+    display: flex;
+    flex-direction: column;
+    gap: $unit;
+    margin-bottom: $unit-2x;
+
+    p {
+      margin-bottom: $unit;
+    }
+
+    .LinkItem {
+      $diameter: $unit-6x;
+      border: 1px solid var(--link-item-bg);
+      border-radius: $card-corner;
+
+      &:hover {
+        background-color: var(--link-item-bg);
+
+        svg {
+          fill: var(--link-item-image-color-hover);
+        }
+      }
+
+      a {
+        display: flex;
+        padding: $unit-2x;
+
+        &:hover {
+          text-decoration: none;
+        }
+
+        .Left {
+          align-items: center;
+          display: flex;
+          gap: $unit-2x;
+          flex-grow: 1;
+        }
+
+        svg {
+          fill: var(--link-item-image-color);
+          width: $diameter;
+          height: auto;
+
+          &.ShareIcon {
+            width: $unit-4x;
+          }
+        }
+      }
+
+      h3 {
+        font-weight: $bold;
+        max-width: 70%;
+        line-height: 1.3;
+      }
+    }
+  }
+
+  p {
+    color: var(--text-secondary);
+
+    font-size: $font-regular;
+    line-height: 1.3;
+  }
+
+  ul {
+    color: var(--text-primary);
+    list-style-type: none;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      gap: $unit;
+      margin-bottom: $unit-2x;
+
+      h4 {
+        font-size: $font-medium;
+        font-weight: $bold;
+      }
+
+      p {
+        font-size: $font-regular;
+      }
+    }
+  }
+}
diff --git a/components/RoadmapPage/index.tsx b/components/RoadmapPage/index.tsx
new file mode 100644
index 00000000..e9fbab81
--- /dev/null
+++ b/components/RoadmapPage/index.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import ShareIcon from '~public/icons/Share.svg'
+import GithubIcon from '~public/icons/github.svg'
+
+import './index.scss'
+
+interface Props {}
+
+const RoadmapPage: React.FC<Props> = (props: Props) => {
+  const { t: common } = useTranslation('common')
+  const { t: roadmap } = useTranslation('roadmap')
+  return (
+    <div className="Roadmap PageContent">
+      <h1>{common('about.segmented_control.roadmap')}</h1>
+      <section className="notes">
+        <p>{roadmap('blurb')}</p>
+        <p>{roadmap('link.intro')}</p>
+        <div className="LinkItem">
+          <Link href="https://github.com/users/jedmund/projects/1/views/3">
+            <a
+              href="https://github.com/users/jedmund/projects/1/views/3"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <div className="Left">
+                <GithubIcon />
+                <h3>{roadmap('link.title')}</h3>
+              </div>
+              <ShareIcon className="ShareIcon" />
+            </a>
+          </Link>
+        </div>
+      </section>
+
+      <section className="features">
+        <h3 className="priority in_progress">{roadmap('subtitle')}</h3>
+        <ul>
+          <li>
+            <h4>{roadmap('roadmap.item1.title')}</h4>
+            <p>{roadmap('roadmap.item1.description')}</p>
+          </li>
+          <li>
+            <h4>{roadmap('roadmap.item2.title')}</h4>
+            <p>{roadmap('roadmap.item2.description')}</p>
+          </li>
+          <li>
+            <h4>{roadmap('roadmap.item3.title')}</h4>
+            <p>{roadmap('roadmap.item3.description')}</p>
+          </li>
+          <li>
+            <h4>{roadmap('roadmap.item4.title')}</h4>
+            <p>{roadmap('roadmap.item4.description')}</p>
+          </li>
+          <li>
+            <h4>{roadmap('roadmap.item5.title')}</h4>
+            <p>{roadmap('roadmap.item5.description')}</p>
+          </li>
+          <li>
+            <h4>{roadmap('roadmap.item6.title')}</h4>
+            <p>{roadmap('roadmap.item6.description')}</p>
+          </li>
+        </ul>
+      </section>
+    </div>
+  )
+}
+
+export default RoadmapPage
diff --git a/pages/about.tsx b/pages/about.tsx
new file mode 100644
index 00000000..5e72c494
--- /dev/null
+++ b/pages/about.tsx
@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import Head from 'next/head'
+
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+import api from '~utils/api'
+import { printError } from '~utils/reportError'
+import { AboutTabs } from '~utils/enums'
+import setUserToken from '~utils/setUserToken'
+
+import AboutPage from '~components/AboutPage'
+import ChangelogPage from '~components/ChangelogPage'
+import RoadmapPage from '~components/RoadmapPage'
+import SegmentedControl from '~components/SegmentedControl'
+import Segment from '~components/Segment'
+
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+interface Props {}
+
+const AboutRoute: React.FC<Props> = (props: Props) => {
+  // Set up router
+  const router = useRouter()
+
+  // Import translations
+  const { t } = useTranslation('common')
+
+  const [currentTab, setCurrentTab] = useState<AboutTabs>(AboutTabs.About)
+
+  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const path = [
+      router.asPath.split('/').filter((el) => el != '')[1],
+      event.target.value,
+    ].join('/')
+
+    // TODO: Decide if we want /about/changlog or /changelog
+    // TODO: Then, set up Next.js rewrites
+    switch (event.target.value) {
+      case 'about':
+        // router.replace(path)
+        setCurrentTab(AboutTabs.About)
+        break
+      case 'changelog':
+        // router.replace(path)
+        setCurrentTab(AboutTabs.Changelog)
+        break
+      case 'roadmap':
+        // router.replace(path)
+        setCurrentTab(AboutTabs.Roadmap)
+        break
+      default:
+        break
+    }
+  }
+
+  const currentSection = () => {
+    switch (currentTab) {
+      case AboutTabs.About:
+        return <AboutPage />
+      case AboutTabs.Changelog:
+        return <ChangelogPage />
+      case AboutTabs.Roadmap:
+        return <RoadmapPage />
+    }
+  }
+
+  return (
+    <div id="About">
+      <Head>
+        {/* HTML */}
+        <title>{t('page.titles.about')}</title>
+        <meta name="description" content={t('page.descriptions.about')} />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        {/* OpenGraph */}
+        <meta property="og:title" content={t('page.titles.about')} />
+        <meta
+          property="og:description"
+          content={t('page.descriptions.about')}
+        />
+        <meta property="og:url" content="https://app.granblue.team/about" />
+        <meta property="og:type" content="website" />
+
+        {/* Twitter */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta property="twitter:domain" content="app.granblue.team" />
+        <meta name="twitter:title" content={t('page.titles.about')} />
+        <meta
+          name="twitter:description"
+          content={t('page.descriptions.about')}
+        />
+      </Head>
+
+      <section>
+        <SegmentedControl>
+          <Segment
+            groupName="about"
+            name="about"
+            selected={currentTab == AboutTabs.About}
+            onClick={handleTabClicked}
+          >
+            {t('about.segmented_control.about')}
+          </Segment>
+          <Segment
+            groupName="about"
+            name="changelog"
+            selected={currentTab == AboutTabs.Changelog}
+            onClick={handleTabClicked}
+          >
+            {t('about.segmented_control.changelog')}
+          </Segment>
+          <Segment
+            groupName="about"
+            name="roadmap"
+            selected={currentTab == AboutTabs.Roadmap}
+            onClick={handleTabClicked}
+          >
+            {t('about.segmented_control.roadmap')}
+          </Segment>
+        </SegmentedControl>
+        {currentSection()}
+      </section>
+    </div>
+  )
+}
+
+export const getServerSidePaths = async () => {
+  return {
+    paths: [],
+    fallback: true,
+  }
+}
+
+// prettier-ignore
+export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
+  // Set headers for server-side requests
+  setUserToken(req, res)
+
+  // Fetch and organize raids
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
+      // Will be passed to the page component as props
+    },
+  }
+}
+
+export default AboutRoute
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index e97072a2..8b3e1726 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -1,4 +1,11 @@
 {
+  "about": {
+    "segmented_control": {
+      "about": "About",
+      "changelog": "Updates",
+      "roadmap": "Roadmap"
+    }
+  },
   "alert": {
     "incompatible_weapon": "You've selected a weapon that can't be added to the Additional Weapon slots."
   },
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index c0a355a6..b06ff237 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -1,4 +1,11 @@
 {
+  "about": {
+    "segmented_control": {
+      "about": "サイトについて",
+      "changelog": "変更ログ",
+      "roadmap": "ロードマップ"
+    }
+  },
   "alert": {
     "incompatible_weapon": "Additional Weaponsに装備できない武器を入れました。"
   },
diff --git a/styles/globals.scss b/styles/globals.scss
index 31f35573..a0ee06fe 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -119,6 +119,86 @@ select {
   }
 }
 
+.PageContent {
+  display: flex;
+  flex-direction: column;
+  gap: $unit-4x;
+  max-width: $grid-width;
+  margin: $unit-4x auto 0;
+
+  h1 {
+    font-size: $font-xxlarge;
+    text-align: left;
+  }
+
+  h2 {
+    font-size: $font-medium;
+    font-weight: $medium;
+    margin-bottom: $unit * 3;
+  }
+
+  p {
+    color: var(--text-secondary);
+    font-size: $font-regular;
+    line-height: 1.3;
+    margin-bottom: $unit;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  .LinkItem {
+    $diameter: $unit-6x;
+    border: 1px solid var(--link-item-bg);
+    border-radius: $card-corner;
+
+    &:hover {
+      background-color: var(--link-item-bg);
+
+      svg {
+        fill: var(--link-item-image-color-hover);
+      }
+    }
+
+    a {
+      display: flex;
+      padding: $unit-2x;
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      .Left {
+        align-items: center;
+        display: flex;
+        gap: $unit-2x;
+        flex-grow: 1;
+
+        h3 {
+          font-weight: 600;
+          max-width: 70%;
+          line-height: 1.3;
+        }
+      }
+
+      svg {
+        fill: var(--link-item-image-color);
+        width: $diameter;
+        height: auto;
+
+        &.ShareIcon {
+          width: $unit-4x;
+        }
+      }
+    }
+
+    h3 {
+      font-weight: $bold;
+    }
+  }
+}
+
 .Hovercard {
   background: #222;
   border-radius: $unit;
diff --git a/utils/enums.tsx b/utils/enums.tsx
index 54bef6c1..517e2792 100644
--- a/utils/enums.tsx
+++ b/utils/enums.tsx
@@ -19,3 +19,9 @@ export enum TeamElement {
   Dark,
   Light,
 }
+
+export enum AboutTabs {
+  About,
+  Changelog,
+  Roadmap,
+}

From 7d98b0a00394f47ae5f2f2c82f2d719586172277 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 14:51:07 -0800
Subject: [PATCH 24/89] Rename "Changelog" to "Updates"

---
 .../{ChangelogPage => UpdatesPage}/index.scss    |  2 +-
 .../{ChangelogPage => UpdatesPage}/index.tsx     |  8 ++++----
 pages/about.tsx                                  | 16 ++++++++--------
 public/locales/en/common.json                    |  2 +-
 public/locales/ja/common.json                    |  2 +-
 utils/enums.tsx                                  |  2 +-
 6 files changed, 16 insertions(+), 16 deletions(-)
 rename components/{ChangelogPage => UpdatesPage}/index.scss (97%)
 rename components/{ChangelogPage => UpdatesPage}/index.tsx (95%)

diff --git a/components/ChangelogPage/index.scss b/components/UpdatesPage/index.scss
similarity index 97%
rename from components/ChangelogPage/index.scss
rename to components/UpdatesPage/index.scss
index b8c6b9d0..9cdb3c19 100644
--- a/components/ChangelogPage/index.scss
+++ b/components/UpdatesPage/index.scss
@@ -1,4 +1,4 @@
-.Changelog.PageContent {
+.Updates.PageContent {
   .version {
     &.content {
       .top h3 {
diff --git a/components/ChangelogPage/index.tsx b/components/UpdatesPage/index.tsx
similarity index 95%
rename from components/ChangelogPage/index.tsx
rename to components/UpdatesPage/index.tsx
index 67408f8f..22b928b6 100644
--- a/components/ChangelogPage/index.tsx
+++ b/components/UpdatesPage/index.tsx
@@ -9,11 +9,11 @@ import './index.scss'
 
 interface Props {}
 
-const ChangelogPage: React.FC<Props> = (props: Props) => {
+const UpdatesPage: React.FC<Props> = (props: Props) => {
   const { t: common } = useTranslation('common')
   return (
-    <div className="Changelog PageContent">
-      <h1>{common('about.segmented_control.changelog')}</h1>
+    <div className="Updates PageContent">
+      <h1>{common('about.segmented_control.updates')}</h1>
       <section className="version" data-version="1.0">
         <div className="top">
           <h3>1.0.1</h3>
@@ -119,4 +119,4 @@ const ChangelogPage: React.FC<Props> = (props: Props) => {
   )
 }
 
-export default ChangelogPage
+export default UpdatesPage
diff --git a/pages/about.tsx b/pages/about.tsx
index 5e72c494..e698eba5 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -11,7 +11,7 @@ import { AboutTabs } from '~utils/enums'
 import setUserToken from '~utils/setUserToken'
 
 import AboutPage from '~components/AboutPage'
-import ChangelogPage from '~components/ChangelogPage'
+import UpdatesPage from '~components/UpdatesPage'
 import RoadmapPage from '~components/RoadmapPage'
 import SegmentedControl from '~components/SegmentedControl'
 import Segment from '~components/Segment'
@@ -42,9 +42,9 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
         // router.replace(path)
         setCurrentTab(AboutTabs.About)
         break
-      case 'changelog':
+      case 'updates':
         // router.replace(path)
-        setCurrentTab(AboutTabs.Changelog)
+        setCurrentTab(AboutTabs.Updates)
         break
       case 'roadmap':
         // router.replace(path)
@@ -59,8 +59,8 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
     switch (currentTab) {
       case AboutTabs.About:
         return <AboutPage />
-      case AboutTabs.Changelog:
-        return <ChangelogPage />
+      case AboutTabs.Updates:
+        return <UpdatesPage />
       case AboutTabs.Roadmap:
         return <RoadmapPage />
     }
@@ -105,11 +105,11 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
           </Segment>
           <Segment
             groupName="about"
-            name="changelog"
-            selected={currentTab == AboutTabs.Changelog}
+            name="updates"
+            selected={currentTab == AboutTabs.Updates}
             onClick={handleTabClicked}
           >
-            {t('about.segmented_control.changelog')}
+            {t('about.segmented_control.updates')}
           </Segment>
           <Segment
             groupName="about"
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 8b3e1726..1e21f979 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -2,7 +2,7 @@
   "about": {
     "segmented_control": {
       "about": "About",
-      "changelog": "Updates",
+      "updates": "Updates",
       "roadmap": "Roadmap"
     }
   },
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index b06ff237..1e09c368 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -2,7 +2,7 @@
   "about": {
     "segmented_control": {
       "about": "サイトについて",
-      "changelog": "変更ログ",
+      "updates": "変更ログ",
       "roadmap": "ロードマップ"
     }
   },
diff --git a/utils/enums.tsx b/utils/enums.tsx
index 517e2792..a1de0ccf 100644
--- a/utils/enums.tsx
+++ b/utils/enums.tsx
@@ -22,6 +22,6 @@ export enum TeamElement {
 
 export enum AboutTabs {
   About,
-  Changelog,
+  Updates,
   Roadmap,
 }

From 122e12411d6efe1e610d004e34811d0de77b4944 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:18:01 -0800
Subject: [PATCH 25/89] Install date-fns

---
 package-lock.json | 18 ++++++++++++++++++
 package.json      |  1 +
 2 files changed, 19 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 2f4f81e5..ed4c4db8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "axios": "^0.25.0",
         "classnames": "^2.3.1",
         "cookies-next": "^2.1.1",
+        "date-fns": "^2.29.3",
         "fix-date": "^1.1.6",
         "i18next": "^21.6.13",
         "i18next-browser-languagedetector": "^6.1.3",
@@ -3861,6 +3862,18 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -9956,6 +9969,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 0d880a01..95509097 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "axios": "^0.25.0",
     "classnames": "^2.3.1",
     "cookies-next": "^2.1.1",
+    "date-fns": "^2.29.3",
     "fix-date": "^1.1.6",
     "i18next": "^21.6.13",
     "i18next-browser-languagedetector": "^6.1.3",

From 31f2bd075a041680f03db7bad873af6cd9b06490 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:18:23 -0800
Subject: [PATCH 26/89] Add endpoint and util to fetch latest version

---
 types/AppUpdate.d.ts         |  5 +++++
 utils/api.tsx                |  5 +++++
 utils/appState.tsx           |  6 ++++++
 utils/fetchLatestVersion.tsx | 10 ++++++++++
 4 files changed, 26 insertions(+)
 create mode 100644 types/AppUpdate.d.ts
 create mode 100644 utils/fetchLatestVersion.tsx

diff --git a/types/AppUpdate.d.ts b/types/AppUpdate.d.ts
new file mode 100644
index 00000000..d11aa079
--- /dev/null
+++ b/types/AppUpdate.d.ts
@@ -0,0 +1,5 @@
+interface AppUpdate {
+  version: string
+  update_type: string
+  updated_at: string
+}
diff --git a/utils/api.tsx b/utils/api.tsx
index 352f60ed..5349cf0f 100644
--- a/utils/api.tsx
+++ b/utils/api.tsx
@@ -148,6 +148,11 @@ class Api {
     const resourceUrl = `${this.url}/users/info/${id}`
     return axios.get(resourceUrl)
   }
+
+  version() {
+    const resourceUrl = `${this.url}/version`
+    return axios.get(resourceUrl)
+  }
 }
 
 const api: Api = new Api({ url: process.env.NEXT_PUBLIC_SIERO_API_URL || 'https://localhost:3000/api/v1'})
diff --git a/utils/appState.tsx b/utils/appState.tsx
index 8dbc9c69..541bc0c2 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -67,6 +67,7 @@ interface AppState {
   jobs: Job[]
   jobSkills: JobSkill[]
   weaponKeys: GroupedWeaponKeys
+  version: AppUpdate
 }
 
 export const initialAppState: AppState = {
@@ -127,6 +128,11 @@ export const initialAppState: AppState = {
     gauph: [],
     emblem: [],
   },
+  version: {
+    version: '0.0',
+    update_type: '',
+    updated_at: new Date(),
+  },
 }
 
 export const appState = proxy(initialAppState)
diff --git a/utils/fetchLatestVersion.tsx b/utils/fetchLatestVersion.tsx
new file mode 100644
index 00000000..7fff6cde
--- /dev/null
+++ b/utils/fetchLatestVersion.tsx
@@ -0,0 +1,10 @@
+import api from './api'
+
+export default async function fetchLatestVersion() {
+  try {
+    const response = await api.version()
+    return response.data as AppUpdate
+  } catch (error) {
+    console.error(error)
+  }
+}

From fa4c4c5085036b9c5971c86772c875dfd081d422 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:18:53 -0800
Subject: [PATCH 27/89] Fetch latest version on all pages

---
 pages/[username].tsx |  9 +++++++++
 pages/new/index.tsx  |  8 ++++++++
 pages/saved.tsx      |  8 ++++++++
 pages/teams.tsx      | 10 +++++++++-
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/pages/[username].tsx b/pages/[username].tsx
index 37ac466b..fc75944a 100644
--- a/pages/[username].tsx
+++ b/pages/[username].tsx
@@ -9,10 +9,13 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import api from '~utils/api'
+
 import setUserToken from '~utils/setUserToken'
 import extractFilters from '~utils/extractFilters'
+import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
+import { appState } from '~utils/appState'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
 import { printError } from '~utils/reportError'
@@ -30,6 +33,7 @@ interface Props {
   meta: PaginationObject
   raids: Raid[]
   sortedRaids: Raid[][]
+  version: AppUpdate
 }
 
 const ProfileRoute: React.FC<Props> = (props: Props) => {
@@ -99,6 +103,7 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
       setTotalPages(props.meta.totalPages)
       setRecordCount(props.meta.count)
       replaceResults(props.meta.count, props.teams)
+      appState.version = props.version
     }
     setCurrentPage(1)
   }, [])
@@ -352,6 +357,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   setUserToken(req, res)
 
   try {
+    // Fetch latest version
+    const version = await fetchLatestVersion()
+
     // Fetch and organize raids
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
@@ -393,6 +401,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         meta: meta,
         raids: raids,
         sortedRaids: sortedRaids,
+        version: version,
         ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
         // Will be passed to the page component as props
       },
diff --git a/pages/new/index.tsx b/pages/new/index.tsx
index 3464fe50..650448bb 100644
--- a/pages/new/index.tsx
+++ b/pages/new/index.tsx
@@ -6,6 +6,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Party from '~components/Party'
 
 import api from '~utils/api'
+import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
 import setUserToken from '~utils/setUserToken'
 import { appState } from '~utils/appState'
@@ -21,6 +22,7 @@ interface Props {
   raids: Raid[]
   sortedRaids: Raid[][]
   weaponKeys: GroupedWeaponKeys
+  version: AppUpdate
 }
 
 const NewRoute: React.FC<Props> = (props: Props) => {
@@ -41,6 +43,7 @@ const NewRoute: React.FC<Props> = (props: Props) => {
     appState.jobs = props.jobs
     appState.jobSkills = props.jobSkills
     appState.weaponKeys = props.weaponKeys
+    appState.version = props.version
   }
 
   return (
@@ -84,6 +87,10 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   setUserToken(req, res)
 
   try {
+    // Fetch latest version
+    const version = await fetchLatestVersion()
+
+    // Fetch and organize raids
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
       .then((response) => organizeRaids(response.data))
@@ -105,6 +112,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         raids: raids,
         sortedRaids: sortedRaids,
         weaponKeys: weaponKeys,
+        version: version,
         ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
         // Will be passed to the page component as props
       },
diff --git a/pages/saved.tsx b/pages/saved.tsx
index 546c1c09..09b2ec93 100644
--- a/pages/saved.tsx
+++ b/pages/saved.tsx
@@ -12,8 +12,10 @@ import clonedeep from 'lodash.clonedeep'
 import api from '~utils/api'
 import setUserToken from '~utils/setUserToken'
 import extractFilters from '~utils/extractFilters'
+import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
+import { appState } from '~utils/appState'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
 import { printError } from '~utils/reportError'
@@ -30,6 +32,7 @@ interface Props {
   meta: PaginationObject
   raids: Raid[]
   sortedRaids: Raid[][]
+  version: AppUpdate
 }
 
 const SavedRoute: React.FC<Props> = (props: Props) => {
@@ -98,6 +101,7 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
       setTotalPages(props.meta.totalPages)
       setRecordCount(props.meta.count)
       replaceResults(props.meta.count, props.teams)
+      appState.version = props.version
     }
     setCurrentPage(1)
   }, [])
@@ -354,6 +358,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   setUserToken(req, res)
 
   try {
+    // Fetch latest version
+    const version = await fetchLatestVersion()
+
     // Fetch and organize raids
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
@@ -384,6 +391,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         meta: meta,
         raids: raids,
         sortedRaids: sortedRaids,
+        version: version,
         ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
         // Will be passed to the page component as props
       },
diff --git a/pages/teams.tsx b/pages/teams.tsx
index a27da820..b680412a 100644
--- a/pages/teams.tsx
+++ b/pages/teams.tsx
@@ -12,8 +12,10 @@ import clonedeep from 'lodash.clonedeep'
 import api from '~utils/api'
 import setUserToken from '~utils/setUserToken'
 import extractFilters from '~utils/extractFilters'
+import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
+import { appState } from '~utils/appState'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
 import { printError } from '~utils/reportError'
@@ -29,6 +31,7 @@ interface Props {
   teams?: Party[]
   meta: PaginationObject
   sortedRaids: Raid[][]
+  version: AppUpdate
 }
 
 const TeamsRoute: React.FC<Props> = (props: Props) => {
@@ -97,6 +100,7 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
       setTotalPages(props.meta.totalPages)
       setRecordCount(props.meta.count)
       replaceResults(props.meta.count, props.teams)
+      appState.version = props.version
     }
     setCurrentPage(1)
   }, [])
@@ -364,8 +368,11 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
-  // Fetch and organize raids
   try {
+    // Fetch latest version
+    const version = await fetchLatestVersion()
+
+    // Fetch and organize raids
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
       .then((response) => organizeRaids(response.data))
@@ -395,6 +402,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         meta: meta,
         raids: raids,
         sortedRaids: sortedRaids,
+        version: version,
         ...(await serverSideTranslations(locale, ['common', 'roadmap'])),
         // Will be passed to the page component as props
       },

From 0d924a1226e761f1eb2084c8dea3e8421efbcfde Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:18:59 -0800
Subject: [PATCH 28/89] Remove unused dependencies

---
 pages/_app.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 6cd24440..039c0864 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react'
-import { getCookie, getCookies } from 'cookies-next'
+import { useEffect } from 'react'
+import { getCookie } from 'cookies-next'
 import { appWithTranslation } from 'next-i18next'
-import { ThemeProvider, useTheme } from 'next-themes'
+import { ThemeProvider } from 'next-themes'
 
 import type { AppProps } from 'next/app'
 import Layout from '~components/Layout'

From 660ad41d4e05f798b903b1eed0dc9bdef61e94dd Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:19:18 -0800
Subject: [PATCH 29/89] Show/hide toast logic

---
 components/Layout/index.tsx      | 51 +++++++++++++++++++++++++++-----
 components/UpdateToast/index.tsx | 51 +++++++++++++++++++++++++++++---
 2 files changed, 91 insertions(+), 11 deletions(-)

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index 3ed4b1f3..224eb7b0 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -1,18 +1,55 @@
-import type { ReactElement } from 'react'
+import { PropsWithChildren, useEffect, useState } from 'react'
+import { add, format } from 'date-fns'
+import { getCookie } from 'cookies-next'
+
+import { appState } from '~utils/appState'
+
 import TopHeader from '~components/Header'
-import Toast from '~components/Toast'
 import UpdateToast from '~components/UpdateToast'
 
 import './index.scss'
-interface Props {
-  children: ReactElement
-}
 
-const Layout = ({ children }: Props) => {
+interface Props {}
+
+const Layout = ({ children }: PropsWithChildren<Props>) => {
+  const [updateToastOpen, setUpdateToastOpen] = useState(false)
+
+  useEffect(() => {
+    const cookie = getToastCookie()
+    const now = new Date()
+    const updatedAt = new Date(appState.version.updated_at)
+    const validUntil = add(updatedAt, { days: 7 })
+
+    if (now < validUntil && !cookie.seen) setUpdateToastOpen(true)
+  }, [])
+
+  function getToastCookie() {
+    const updatedAt = new Date(appState.version.updated_at)
+    const cookieValues = getCookie(`update-${format(updatedAt, 'yyyy-MM-dd')}`)
+    return cookieValues
+      ? (JSON.parse(cookieValues as string) as { seen: true })
+      : { seen: false }
+  }
+
+  function handleToastActionClicked() {
+    setUpdateToastOpen(false)
+  }
+
+  function handleToastOpenChanged(open: boolean) {
+    setUpdateToastOpen(false)
+  }
+
   return (
     <>
       <TopHeader />
-      <UpdateToast open={true} updateType="feature" />
+      {/* TODO: Don't show toast on about pages */}
+      <UpdateToast
+        open={updateToastOpen}
+        updateType="feature"
+        onActionClicked={handleToastActionClicked}
+        onOpenChange={handleToastOpenChanged}
+        lastUpdated={appState.version.updated_at}
+      />
       <main>{children}</main>
     </>
   )
diff --git a/components/UpdateToast/index.tsx b/components/UpdateToast/index.tsx
index 7d8d6bd5..79ea4caf 100644
--- a/components/UpdateToast/index.tsx
+++ b/components/UpdateToast/index.tsx
@@ -1,4 +1,7 @@
 import React from 'react'
+import { useRouter } from 'next/router'
+import { setCookie } from 'cookies-next'
+import { add, format } from 'date-fns'
 import classNames from 'classnames'
 
 import Button from '~components/Button'
@@ -10,24 +13,64 @@ import { useTranslation } from 'next-i18next'
 interface Props {
   open: boolean
   updateType: 'feature' | 'content'
+  lastUpdated: string
+  onActionClicked: () => void
+  onOpenChange: (open: boolean) => void
 }
 
-const UpdateToast = (props: Props) => {
+const UpdateToast = ({
+  open,
+  updateType,
+  lastUpdated,
+  onActionClicked,
+  onOpenChange,
+}: Props) => {
   const { t } = useTranslation('roadmap')
 
   const classes = classNames({
     Update: true,
   })
 
+  function setToastCookie() {
+    const updatedAt = new Date(lastUpdated)
+    const expiresAt = add(updatedAt, { days: 7 })
+    setCookie(
+      `update-${format(updatedAt, 'yyyy-MM-dd')}`,
+      { seen: true },
+      { path: '/', expires: expiresAt }
+    )
+  }
+
+  function handleButtonClicked() {
+    // TODO: Set a timestamped cookie to not show
+    console.log('Primary button clicked')
+    window.open('/about', '_blank')
+    setToastCookie()
+    onActionClicked()
+  }
+
+  function handleOpenChanged(open: boolean) {
+    if (!open) {
+      setToastCookie()
+      onOpenChange(false)
+    }
+  }
+
   return (
     <Toast
       className={classes}
       title={t(`toasts.title`)}
-      content={t(`toasts.description.${props.updateType}`)}
-      open={true}
+      content={t(`toasts.description.${updateType}`)}
+      open={open}
       type="background"
+      onOpenChange={handleOpenChanged}
     >
-      <Button buttonSize="small" contained={true} text={t('toasts.button')} />
+      <Button
+        buttonSize="small"
+        contained={true}
+        onClick={handleButtonClicked}
+        text={t('toasts.button')}
+      />
     </Toast>
   )
 }

From 6aba8d29ea19d996f0f9561a82c44dbbda183c20 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:29:57 -0800
Subject: [PATCH 30/89] Set content based on URL

---
 next.config.js  |  8 ++++++++
 pages/about.tsx | 34 +++++++++++++++++++++++-----------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/next.config.js b/next.config.js
index 24e220ba..c268ed51 100644
--- a/next.config.js
+++ b/next.config.js
@@ -27,6 +27,14 @@ module.exports = {
         source: '/weapons',
         destination: '/new',
       },
+      {
+        source: '/updates',
+        destination: '/about',
+      },
+      {
+        source: '/roadmap',
+        destination: '/about',
+      },
       {
         source: '/p/:shortcode/characters',
         destination: '/p/:shortcode',
diff --git a/pages/about.tsx b/pages/about.tsx
index e698eba5..9b0ac9f6 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -29,25 +29,37 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
 
   const [currentTab, setCurrentTab] = useState<AboutTabs>(AboutTabs.About)
 
-  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
-    const path = [
-      router.asPath.split('/').filter((el) => el != '')[1],
-      event.target.value,
-    ].join('/')
+  useEffect(() => {
+    const parts = router.asPath.split('/')
+    const tab = parts[parts.length - 1]
 
-    // TODO: Decide if we want /about/changlog or /changelog
-    // TODO: Then, set up Next.js rewrites
-    switch (event.target.value) {
+    switch (tab) {
       case 'about':
-        // router.replace(path)
         setCurrentTab(AboutTabs.About)
         break
       case 'updates':
-        // router.replace(path)
         setCurrentTab(AboutTabs.Updates)
         break
       case 'roadmap':
-        // router.replace(path)
+        setCurrentTab(AboutTabs.Roadmap)
+        break
+    }
+  }, [router.asPath])
+
+  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const path = `/${event.target.value}`
+
+    switch (event.target.value) {
+      case 'about':
+        router.replace(path)
+        setCurrentTab(AboutTabs.About)
+        break
+      case 'updates':
+        router.replace(path)
+        setCurrentTab(AboutTabs.Updates)
+        break
+      case 'roadmap':
+        router.replace(path)
         setCurrentTab(AboutTabs.Roadmap)
         break
       default:

From b519372566d2b7f93a00b214c06f5fa8fe59af23 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:30:41 -0800
Subject: [PATCH 31/89] Fix dependencies

---
 pages/about.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pages/about.tsx b/pages/about.tsx
index 9b0ac9f6..ca7ada8e 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -1,12 +1,10 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
-import api from '~utils/api'
-import { printError } from '~utils/reportError'
 import { AboutTabs } from '~utils/enums'
 import setUserToken from '~utils/setUserToken'
 

From a7151d50354ff8f9efdc5443d8412bfe8870caae Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:33:55 -0800
Subject: [PATCH 32/89] Migrate modals in HeaderMenu to pages

---
 components/HeaderMenu/index.tsx | 36 +++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index 3472f983..8ad9244c 100644
--- a/components/HeaderMenu/index.tsx
+++ b/components/HeaderMenu/index.tsx
@@ -114,9 +114,21 @@ const HeaderMenu = (props: Props) => {
           </li>
         </div>
         <div className="MenuGroup">
-          <AboutModal />
-          <ChangelogModal />
-          <RoadmapModal />
+          <li className="MenuItem">
+            <a href="/about" target="_blank">
+              {t('about.segmented_control.about')}
+            </a>
+          </li>
+          <li className="MenuItem">
+            <a href="/updates" target="_blank">
+              {t('about.segmented_control.updates')}
+            </a>
+          </li>
+          <li className="MenuItem">
+            <a href="/roadmap" target="_blank">
+              {t('about.segmented_control.roadmap')}
+            </a>
+          </li>
         </div>
         <div className="MenuGroup">
           <AccountModal
@@ -164,9 +176,21 @@ const HeaderMenu = (props: Props) => {
           </li>
         </div>
         <div className="MenuGroup">
-          <AboutModal />
-          <ChangelogModal />
-          <RoadmapModal />
+          <li className="MenuItem">
+            <a href="/about" target="_blank">
+              {t('about.segmented_control.about')}
+            </a>
+          </li>
+          <li className="MenuItem">
+            <a href="/updates" target="_blank">
+              {t('about.segmented_control.updates')}
+            </a>
+          </li>
+          <li className="MenuItem">
+            <a href="/roadmap" target="_blank">
+              {t('about.segmented_control.roadmap')}
+            </a>
+          </li>
         </div>
         <div className="MenuGroup">
           <LoginModal />

From 8f55069a02140a693486d17e8a5f36133632155c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:34:38 -0800
Subject: [PATCH 33/89] Remove static modals

---
 components/AboutModal/index.scss     |  98 --------------
 components/AboutModal/index.tsx      | 196 ---------------------------
 components/ChangelogModal/index.scss |  77 -----------
 components/ChangelogModal/index.tsx  | 166 -----------------------
 components/RoadmapModal/index.scss   | 118 ----------------
 components/RoadmapModal/index.tsx    | 101 --------------
 6 files changed, 756 deletions(-)
 delete mode 100644 components/AboutModal/index.scss
 delete mode 100644 components/AboutModal/index.tsx
 delete mode 100644 components/ChangelogModal/index.scss
 delete mode 100644 components/ChangelogModal/index.tsx
 delete mode 100644 components/RoadmapModal/index.scss
 delete mode 100644 components/RoadmapModal/index.tsx

diff --git a/components/AboutModal/index.scss b/components/AboutModal/index.scss
deleted file mode 100644
index a1c82a2c..00000000
--- a/components/AboutModal/index.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-.About.DialogContent {
-  gap: 0;
-  padding-bottom: $unit;
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    gap: $unit-2x;
-    padding: 0 $unit-4x;
-  }
-
-  .sections {
-    display: flex;
-    flex-direction: column;
-    gap: $unit-2x;
-  }
-
-  section {
-    margin-bottom: $unit;
-
-    & > h2 {
-      font-size: $font-medium;
-      font-weight: $medium;
-      margin-bottom: $unit * 3;
-    }
-  }
-
-  p {
-    color: var(--text-secondary);
-    font-size: $font-regular;
-    line-height: 1.3;
-    margin-bottom: $unit;
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
-  .Links {
-    display: grid;
-    gap: $unit;
-    margin: $unit-2x 0;
-  }
-
-  div.LinkItem {
-    margin-top: $unit-2x;
-  }
-
-  .LinkItem {
-    $diameter: $unit-6x;
-    border: 1px solid var(--link-item-bg);
-    border-radius: $card-corner;
-
-    &:hover {
-      background-color: var(--link-item-bg);
-
-      svg {
-        fill: var(--link-item-image-color-hover);
-      }
-    }
-
-    a {
-      display: flex;
-      padding: $unit-2x;
-
-      &:hover {
-        text-decoration: none;
-      }
-
-      .Left {
-        align-items: center;
-        display: flex;
-        gap: $unit-2x;
-        flex-grow: 1;
-
-        h3 {
-          font-weight: 600;
-          max-width: 70%;
-          line-height: 1.3;
-        }
-      }
-
-      svg {
-        fill: var(--link-item-image-color);
-        width: $diameter;
-        height: auto;
-
-        &.ShareIcon {
-          width: $unit-4x;
-        }
-      }
-    }
-
-    h3 {
-      font-weight: $bold;
-    }
-  }
-}
diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx
deleted file mode 100644
index 7935befd..00000000
--- a/components/AboutModal/index.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useTranslation } from 'next-i18next'
-
-import {
-  Dialog,
-  DialogClose,
-  DialogTitle,
-  DialogTrigger,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-
-import CrossIcon from '~public/icons/Cross.svg'
-import ShareIcon from '~public/icons/Share.svg'
-import DiscordIcon from '~public/icons/discord.svg'
-import GithubIcon from '~public/icons/github.svg'
-
-import './index.scss'
-
-const AboutModal = () => {
-  const { t } = useTranslation('common')
-  const headerRef = React.createRef<HTMLDivElement>()
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <li className="MenuItem">
-          <span>{t('modals.about.title')}</span>
-        </li>
-      </DialogTrigger>
-      <DialogContent
-        className="About"
-        headerref={headerRef}
-        onOpenAutoFocus={(event) => event.preventDefault()}
-        onEscapeKeyDown={() => {}}
-      >
-        <div className="DialogHeader" ref={headerRef}>
-          <DialogTitle className="DialogTitle">{t('menu.about')}</DialogTitle>
-          <DialogClose className="DialogClose" asChild>
-            <span>
-              <CrossIcon />
-            </span>
-          </DialogClose>
-        </div>
-
-        <div className="content">
-          <section>
-            <p>
-              Granblue.team is a tool to save and share team comps for{' '}
-              <a
-                href="https://game.granbluefantasy.jp"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Granblue Fantasy
-              </a>
-              .
-            </p>
-            <p>
-              Start adding to a team and a URL will be created for you to share
-              wherever you like, no account needed.
-            </p>
-            <p>
-              However, if you do make an account, you can save any teams you
-              find for future reference and keep all of your teams together in
-              one place.
-            </p>
-          </section>
-
-          <section>
-            <h2>Feedback</h2>
-            <p>
-              This is an evolving project so feedback and suggestions are
-              greatly appreciated!
-            </p>
-            <p>
-              If you have a feature request, would like to report a bug, or are
-              enjoying the tool and want to say thanks, come hang out in
-              Discord!
-            </p>
-            <div className="LinkItem">
-              <Link href="https://discord.gg/qyZ5hGdPC8">
-                <a
-                  href="https://discord.gg/qyZ5hGdPC8"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <div className="Left">
-                    <DiscordIcon />
-                    <h3>granblue-tools</h3>
-                  </div>
-                  <ShareIcon className="ShareIcon" />
-                </a>
-              </Link>
-            </div>
-          </section>
-
-          <section>
-            <h2>Credits</h2>
-            <p>
-              Granblue.team was built by{' '}
-              <a
-                href="https://twitter.com/jedmund"
-                target="_blank"
-                rel="noreferrer"
-              >
-                @jedmund
-              </a>{' '}
-              with a lot of help from{' '}
-              <a
-                href="https://twitter.com/lalalalinna"
-                target="_blank"
-                rel="noreferrer"
-              >
-                @lalalalinna
-              </a>{' '}
-              and{' '}
-              <a
-                href="https://twitter.com/tarngerine"
-                target="_blank"
-                rel="noreferrer"
-              >
-                @tarngerine
-              </a>
-              .
-            </p>
-            <p>
-              Many thanks also go to Disinfect, Slipper, Jif, Bless, 9highwind,
-              and everyone else in{' '}
-              <a
-                href="https://game.granbluefantasy.jp/#guild/detail/1190185"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Fireplace
-              </a>{' '}
-              that helped with bug testing and feature requests. (P.S.
-              We&apos;re recruiting!) And yoey, but he won&apos;t join our crew.
-            </p>
-          </section>
-
-          <section>
-            <h2>Contributing</h2>
-            <p>
-              This app is open source and licensed under{' '}
-              <a
-                href="https://choosealicense.com/licenses/agpl-3.0/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                GNU AGPLv3
-              </a>
-              . Plainly, that means you can download the source, modify it, and
-              redistribute it if you attribute this project, use the same
-              license, and keep it open source. You can contribute on Github.
-            </p>
-            <ul className="Links">
-              <li className="LinkItem">
-                <Link href="https://github.com/jedmund/hensei-api">
-                  <a
-                    href="https://github.com/jedmund/hensei-api"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <div className="Left">
-                      <GithubIcon />
-                      <h3>jedmund/hensei-api</h3>
-                    </div>
-                    <ShareIcon className="ShareIcon" />
-                  </a>
-                </Link>
-              </li>
-              <li className="LinkItem">
-                <Link href="https://github.com/jedmund/hensei-web">
-                  <a
-                    href="https://github.com/jedmund/hensei-web"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <div className="Left">
-                      <GithubIcon />
-                      <h3>jedmund/hensei-web</h3>
-                    </div>
-                    <ShareIcon className="ShareIcon" />
-                  </a>
-                </Link>
-              </li>
-            </ul>
-          </section>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default AboutModal
diff --git a/components/ChangelogModal/index.scss b/components/ChangelogModal/index.scss
deleted file mode 100644
index 5d63d501..00000000
--- a/components/ChangelogModal/index.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.Changelog.DialogContent {
-  gap: 0;
-
-  .updates {
-    padding: 0 $unit-4x;
-  }
-
-  .updates {
-    display: flex;
-    flex-direction: column;
-    gap: $unit-4x;
-    margin-bottom: $unit-4x;
-  }
-
-  .version {
-    &.content {
-      .top h3 {
-        color: var(--accent-yellow);
-      }
-
-      .update {
-        display: flex;
-        flex-direction: column;
-        gap: $unit-2x;
-      }
-
-      .characters,
-      .weapons,
-      .summons {
-        display: grid;
-        grid-template-rows: 1fr auto;
-        gap: $unit;
-
-        & > h4 {
-          font-weight: $medium;
-          font-size: $font-regular;
-        }
-      }
-
-      .items {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        gap: $unit-4x;
-      }
-    }
-
-    .top {
-      align-items: baseline;
-      display: flex;
-      gap: $unit-half;
-      margin-bottom: $unit-2x;
-
-      h3 {
-        color: var(--accent-blue);
-        font-weight: $medium;
-        font-size: $font-large;
-      }
-
-      time {
-        color: var(--text-secondary);
-        font-size: $font-small;
-        font-weight: $medium;
-      }
-    }
-  }
-
-  .notes {
-    color: var(--text-primary);
-    list-style-type: disc;
-    list-style-position: inside;
-
-    li {
-      margin-bottom: $unit-half;
-      font-size: $font-regular;
-    }
-  }
-}
diff --git a/components/ChangelogModal/index.tsx b/components/ChangelogModal/index.tsx
deleted file mode 100644
index 5ba0677f..00000000
--- a/components/ChangelogModal/index.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'next-i18next'
-
-import ChangelogUnit from '~components/ChangelogUnit'
-import {
-  Dialog,
-  DialogClose,
-  DialogTitle,
-  DialogTrigger,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-
-import CrossIcon from '~public/icons/Cross.svg'
-
-import './index.scss'
-
-const ChangelogModal = () => {
-  const { t } = useTranslation('common')
-  const headerRef = React.createRef<HTMLDivElement>()
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <li className="MenuItem">
-          <span>{t('modals.changelog.title')}</span>
-        </li>
-      </DialogTrigger>
-      <DialogContent
-        className="Changelog"
-        title={t('menu.changelog')}
-        headerref={headerRef}
-        onOpenAutoFocus={(event) => event.preventDefault()}
-        onEscapeKeyDown={() => {}}
-      >
-        <div className="DialogHeader" ref={headerRef}>
-          <DialogTitle className="DialogTitle">
-            {t('menu.changelog')}
-          </DialogTitle>
-          <DialogClose className="DialogClose" asChild>
-            <span>
-              <CrossIcon />
-            </span>
-          </DialogClose>
-        </div>
-
-        <div className="updates">
-          <section className="version" data-version="1.0">
-            <div className="top">
-              <h3>1.0.1</h3>
-              <time>2023/01/08</time>
-            </div>
-            <ul className="notes">
-              <li>Extra party fields: Full Auto, Clear Time, and more</li>
-              <li>Support for Youtube short URLs</li>
-              <li>Responsive grids and lots of other mobile fixes</li>
-              <li>Many other bug fixes</li>
-            </ul>
-          </section>
-          <section className="content version" data-version="2022-12L">
-            <div className="top">
-              <h3>2022-12 Legend Festival</h3>
-              <time>2022/12/26</time>
-            </div>
-            <div className="update">
-              <section className="characters">
-                <h4>New characters</h4>
-                <div className="items">
-                  <ChangelogUnit
-                    name="Michael (Grand)"
-                    id="3040440000"
-                    type="character"
-                  />
-                  <ChangelogUnit
-                    name="Makura"
-                    id="3040441000"
-                    type="character"
-                  />
-                  <ChangelogUnit
-                    name="Ultimate Friday"
-                    id="3040442000"
-                    type="character"
-                  />
-                </div>
-              </section>
-              <section className="weapons">
-                <h4>New weapons</h4>
-                <div className="items">
-                  <ChangelogUnit
-                    name="Crimson Scale"
-                    id="1040315900"
-                    type="weapon"
-                  />
-                  <ChangelogUnit
-                    name="Leporidius"
-                    id="1040914500"
-                    type="weapon"
-                  />
-                  <ChangelogUnit
-                    name="FRIED Spear"
-                    id="1040218200"
-                    type="weapon"
-                  />
-                </div>
-              </section>
-              <section className="summons">
-                <h4>New summons</h4>
-                <div className="items">
-                  <ChangelogUnit name="Yatima" id="2040417000" type="summon" />
-                </div>
-              </section>
-            </div>
-          </section>
-          <section className="content version" data-version="2022-12F2">
-            <div className="top">
-              <h3>2022-12 Flash Gala</h3>
-              <time>2022/12/26</time>
-            </div>
-            <div className="update">
-              <section className="characters">
-                <h4>New characters</h4>
-                <div className="items">
-                  <ChangelogUnit
-                    name="Charlotta (Grand)"
-                    id="3040438000"
-                    type="character"
-                  />
-                  <ChangelogUnit name="Erin" id="3040439000" type="character" />
-                </div>
-              </section>
-              <section className="weapons">
-                <h4>New weapons</h4>
-                <div className="items">
-                  <ChangelogUnit
-                    name="Claíomh Solais Díon"
-                    id="1040024200"
-                    type="weapon"
-                  />
-                  <ChangelogUnit
-                    name="Crystal Edge"
-                    id="1040116500"
-                    type="weapon"
-                  />
-                </div>
-              </section>
-            </div>
-          </section>
-          <section className="version" data-version="1.0">
-            <div className="top">
-              <h3>1.0.0</h3>
-              <time>2022/12/26</time>
-            </div>
-            <ul className="notes">
-              <li>First release!</li>
-              <li>You can embed Youtube videos now</li>
-              <li>Better clicking - right-click and open in a new tab</li>
-              <li>Manually set dark mode in Account Settings</li>
-              <li>Lots of bugs squashed</li>
-            </ul>
-          </section>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default ChangelogModal
diff --git a/components/RoadmapModal/index.scss b/components/RoadmapModal/index.scss
deleted file mode 100644
index ad57a3b0..00000000
--- a/components/RoadmapModal/index.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.Roadmap.DialogContent {
-  gap: 0;
-  padding-bottom: $unit-2x;
-
-  h3.priority {
-    font-weight: $medium;
-    font-size: $font-large;
-    margin-bottom: $unit-4x;
-
-    &.in_progress {
-      color: $yellow;
-    }
-
-    &.high {
-      color: $red;
-    }
-
-    &.mid {
-      color: $orange-10;
-    }
-
-    &.low {
-      color: $blue;
-    }
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    gap: $unit-2x;
-    padding: 0 $unit-4x;
-
-    section.notes {
-      display: flex;
-      flex-direction: column;
-      gap: $unit;
-      margin-bottom: $unit-2x;
-
-      p {
-        margin-bottom: $unit;
-      }
-
-      .LinkItem {
-        $diameter: $unit-6x;
-        border: 1px solid var(--link-item-bg);
-        border-radius: $card-corner;
-
-        &:hover {
-          background-color: var(--link-item-bg);
-
-          svg {
-            fill: var(--link-item-image-color-hover);
-          }
-        }
-
-        a {
-          display: flex;
-          padding: $unit-2x;
-
-          &:hover {
-            text-decoration: none;
-          }
-
-          .Left {
-            align-items: center;
-            display: flex;
-            gap: $unit-2x;
-            flex-grow: 1;
-          }
-
-          svg {
-            fill: var(--link-item-image-color);
-            width: $diameter;
-            height: auto;
-
-            &.ShareIcon {
-              width: $unit-4x;
-            }
-          }
-        }
-
-        h3 {
-          font-weight: $bold;
-          max-width: 70%;
-          line-height: 1.3;
-        }
-      }
-    }
-
-    p {
-      color: var(--text-secondary);
-
-      font-size: $font-regular;
-      line-height: 1.3;
-    }
-
-    ul {
-      color: var(--text-primary);
-      list-style-type: none;
-
-      li {
-        display: flex;
-        flex-direction: column;
-        gap: $unit;
-        margin-bottom: $unit-2x;
-
-        h4 {
-          font-size: $font-medium;
-          font-weight: $bold;
-        }
-
-        p {
-          font-size: $font-regular;
-        }
-      }
-    }
-  }
-}
diff --git a/components/RoadmapModal/index.tsx b/components/RoadmapModal/index.tsx
deleted file mode 100644
index 0c956bc1..00000000
--- a/components/RoadmapModal/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { useTranslation } from 'next-i18next'
-import {
-  Dialog,
-  DialogClose,
-  DialogTitle,
-  DialogTrigger,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-
-import CrossIcon from '~public/icons/Cross.svg'
-import ShareIcon from '~public/icons/Share.svg'
-import GithubIcon from '~public/icons/github.svg'
-
-import './index.scss'
-
-const RoadmapModal = () => {
-  const { t } = useTranslation('roadmap')
-  const headerRef = React.createRef<HTMLDivElement>()
-
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <li className="MenuItem">
-          <span>{t('modals.roadmap.title')}</span>
-        </li>
-      </DialogTrigger>
-      <DialogContent
-        className="Roadmap"
-        title={t('title')}
-        headerref={headerRef}
-        onOpenAutoFocus={(event) => event.preventDefault()}
-        onEscapeKeyDown={() => {}}
-      >
-        <div className="DialogHeader" ref={headerRef}>
-          <DialogTitle className="DialogTitle">{t('title')}</DialogTitle>
-          <DialogClose className="DialogClose" asChild>
-            <span>
-              <CrossIcon />
-            </span>
-          </DialogClose>
-        </div>
-
-        <div className="content">
-          <section className="notes">
-            <p>{t('blurb')}</p>
-            <p>{t('link.intro')}</p>
-            <div className="LinkItem">
-              <Link href="https://github.com/users/jedmund/projects/1/views/3">
-                <a
-                  href="https://github.com/users/jedmund/projects/1/views/3"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <div className="Left">
-                    <GithubIcon />
-                    <h3>{t('link.title')}</h3>
-                  </div>
-                  <ShareIcon className="ShareIcon" />
-                </a>
-              </Link>
-            </div>
-          </section>
-
-          <section className="features">
-            <h3 className="priority in_progress">{t('subtitle')}</h3>
-            <ul>
-              <li>
-                <h4>{t('roadmap.item1.title')}</h4>
-                <p>{t('roadmap.item1.description')}</p>
-              </li>
-              <li>
-                <h4>{t('roadmap.item2.title')}</h4>
-                <p>{t('roadmap.item2.description')}</p>
-              </li>
-              <li>
-                <h4>{t('roadmap.item3.title')}</h4>
-                <p>{t('roadmap.item3.description')}</p>
-              </li>
-              <li>
-                <h4>{t('roadmap.item4.title')}</h4>
-                <p>{t('roadmap.item4.description')}</p>
-              </li>
-              <li>
-                <h4>{t('roadmap.item5.title')}</h4>
-                <p>{t('roadmap.item5.description')}</p>
-              </li>
-              <li>
-                <h4>{t('roadmap.item6.title')}</h4>
-                <p>{t('roadmap.item6.description')}</p>
-              </li>
-            </ul>
-          </section>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default RoadmapModal

From d489a67a228c77715efb2843316bff902b62405e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:46:27 -0800
Subject: [PATCH 34/89] Set cookie properly on toast dismissal

---
 components/HeaderMenu/index.tsx  |  3 ---
 components/Layout/index.tsx      | 29 ++++++++++++++++++++---------
 components/Toast/index.tsx       |  3 ++-
 components/UpdateToast/index.tsx | 16 ++++++----------
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index 8ad9244c..d42795b2 100644
--- a/components/HeaderMenu/index.tsx
+++ b/components/HeaderMenu/index.tsx
@@ -8,10 +8,7 @@ import { retrieveCookies, retrieveLocaleCookies } from '~utils/retrieveCookies'
 import Link from 'next/link'
 import * as Switch from '@radix-ui/react-switch'
 
-import AboutModal from '~components/AboutModal'
 import AccountModal from '~components/AccountModal'
-import ChangelogModal from '~components/ChangelogModal'
-import RoadmapModal from '~components/RoadmapModal'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
 
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index 224eb7b0..f37d4dac 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -1,4 +1,5 @@
 import { PropsWithChildren, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
 import { add, format } from 'date-fns'
 import { getCookie } from 'cookies-next'
 
@@ -12,6 +13,7 @@ import './index.scss'
 interface Props {}
 
 const Layout = ({ children }: PropsWithChildren<Props>) => {
+  const router = useRouter()
   const [updateToastOpen, setUpdateToastOpen] = useState(false)
 
   useEffect(() => {
@@ -35,21 +37,30 @@ const Layout = ({ children }: PropsWithChildren<Props>) => {
     setUpdateToastOpen(false)
   }
 
-  function handleToastOpenChanged(open: boolean) {
+  function handleToastClosed() {
     setUpdateToastOpen(false)
   }
 
+  const updateToast = () => {
+    const path = router.asPath.replaceAll('/', '')
+
+    return !['about', 'updates', 'roadmap'].includes(path) ? (
+      <UpdateToast
+        open={updateToastOpen}
+        updateType="feature"
+        onActionClicked={handleToastActionClicked}
+        onCloseClicked={handleToastClosed}
+        lastUpdated={appState.version.updated_at}
+      />
+    ) : (
+      ''
+    )
+  }
+
   return (
     <>
       <TopHeader />
-      {/* TODO: Don't show toast on about pages */}
-      <UpdateToast
-        open={updateToastOpen}
-        updateType="feature"
-        onActionClicked={handleToastActionClicked}
-        onOpenChange={handleToastOpenChanged}
-        lastUpdated={appState.version.updated_at}
-      />
+      {updateToast()}
       <main>{children}</main>
     </>
   )
diff --git a/components/Toast/index.tsx b/components/Toast/index.tsx
index 95878f2f..8f85cb50 100644
--- a/components/Toast/index.tsx
+++ b/components/Toast/index.tsx
@@ -8,6 +8,7 @@ interface Props extends ToastPrimitive.ToastProps {
   className?: string
   title?: string
   content: string
+  onCloseClick: () => void
 }
 
 const Toast = ({
@@ -28,7 +29,7 @@ const Toast = ({
             <h3>{title}</h3>
           </ToastPrimitive.Title>
         )}
-        <ToastPrimitive.Close aria-label="Close">
+        <ToastPrimitive.Close aria-label="Close" onClick={props.onCloseClick}>
           <span aria-hidden>×</span>
         </ToastPrimitive.Close>
       </div>
diff --git a/components/UpdateToast/index.tsx b/components/UpdateToast/index.tsx
index 79ea4caf..29403e04 100644
--- a/components/UpdateToast/index.tsx
+++ b/components/UpdateToast/index.tsx
@@ -15,7 +15,7 @@ interface Props {
   updateType: 'feature' | 'content'
   lastUpdated: string
   onActionClicked: () => void
-  onOpenChange: (open: boolean) => void
+  onCloseClicked: () => void
 }
 
 const UpdateToast = ({
@@ -23,7 +23,7 @@ const UpdateToast = ({
   updateType,
   lastUpdated,
   onActionClicked,
-  onOpenChange,
+  onCloseClicked,
 }: Props) => {
   const { t } = useTranslation('roadmap')
 
@@ -42,18 +42,14 @@ const UpdateToast = ({
   }
 
   function handleButtonClicked() {
-    // TODO: Set a timestamped cookie to not show
-    console.log('Primary button clicked')
     window.open('/about', '_blank')
     setToastCookie()
     onActionClicked()
   }
 
-  function handleOpenChanged(open: boolean) {
-    if (!open) {
-      setToastCookie()
-      onOpenChange(false)
-    }
+  function handleCloseClicked() {
+    setToastCookie()
+    onCloseClicked()
   }
 
   return (
@@ -63,7 +59,7 @@ const UpdateToast = ({
       content={t(`toasts.description.${updateType}`)}
       open={open}
       type="background"
-      onOpenChange={handleOpenChanged}
+      onCloseClick={handleCloseClicked}
     >
       <Button
         buttonSize="small"

From 392aaa76f49464e7ee08b4440ac3abc64d83ecde Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 22:52:49 -0800
Subject: [PATCH 35/89] Fix destination of Learn more button

---
 components/UpdateToast/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/UpdateToast/index.tsx b/components/UpdateToast/index.tsx
index 29403e04..51b6d009 100644
--- a/components/UpdateToast/index.tsx
+++ b/components/UpdateToast/index.tsx
@@ -42,7 +42,7 @@ const UpdateToast = ({
   }
 
   function handleButtonClicked() {
-    window.open('/about', '_blank')
+    window.open('/updates', '_blank')
     setToastCookie()
     onActionClicked()
   }

From 37d242b2cfc40bb702df049d232321adad6d3f5e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 23:11:14 -0800
Subject: [PATCH 36/89] Fix build error from type change in appState

---
 utils/appState.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/utils/appState.tsx b/utils/appState.tsx
index 541bc0c2..94014fee 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -131,7 +131,7 @@ export const initialAppState: AppState = {
   version: {
     version: '0.0',
     update_type: '',
-    updated_at: new Date(),
+    updated_at: '',
   },
 }
 

From c75e5052ad85a51891350dccc7196e28daa46497 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 23:22:29 -0800
Subject: [PATCH 37/89] Save current page to use for translations

---
 pages/about.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/pages/about.tsx b/pages/about.tsx
index ca7ada8e..179e1d53 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -26,6 +26,7 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
   const { t } = useTranslation('common')
 
   const [currentTab, setCurrentTab] = useState<AboutTabs>(AboutTabs.About)
+  const [currentPage, setCurrentPage] = useState('')
 
   useEffect(() => {
     const parts = router.asPath.split('/')
@@ -34,31 +35,38 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
     switch (tab) {
       case 'about':
         setCurrentTab(AboutTabs.About)
+        setCurrentPage(parts[1])
         break
       case 'updates':
         setCurrentTab(AboutTabs.Updates)
+        setCurrentPage(parts[1])
         break
       case 'roadmap':
         setCurrentTab(AboutTabs.Roadmap)
+        setCurrentPage(parts[1])
         break
     }
   }, [router.asPath])
 
   function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const parts = router.asPath.split('/')
     const path = `/${event.target.value}`
 
     switch (event.target.value) {
       case 'about':
         router.replace(path)
         setCurrentTab(AboutTabs.About)
+        setCurrentPage(parts[1])
         break
       case 'updates':
         router.replace(path)
         setCurrentTab(AboutTabs.Updates)
+        setCurrentPage(parts[1])
         break
       case 'roadmap':
         router.replace(path)
         setCurrentTab(AboutTabs.Roadmap)
+        setCurrentPage(parts[1])
         break
       default:
         break
@@ -80,26 +88,32 @@ const AboutRoute: React.FC<Props> = (props: Props) => {
     <div id="About">
       <Head>
         {/* HTML */}
-        <title>{t('page.titles.about')}</title>
-        <meta name="description" content={t('page.descriptions.about')} />
+        <title>{t(`page.titles.${currentPage}`)}</title>
+        <meta
+          name="description"
+          content={t(`page.descriptions.${currentPage}`)}
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         {/* OpenGraph */}
-        <meta property="og:title" content={t('page.titles.about')} />
+        <meta property="og:title" content={t(`page.titles.${currentPage}`)} />
         <meta
           property="og:description"
           content={t('page.descriptions.about')}
         />
-        <meta property="og:url" content="https://app.granblue.team/about" />
+        <meta
+          property="og:url"
+          content={`https://app.granblue.team/${currentPage}`}
+        />
         <meta property="og:type" content="website" />
 
         {/* Twitter */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta property="twitter:domain" content="app.granblue.team" />
-        <meta name="twitter:title" content={t('page.titles.about')} />
+        <meta name="twitter:title" content={t(`page.titles.${currentPage}`)} />
         <meta
           name="twitter:description"
-          content={t('page.descriptions.about')}
+          content={t(`page.descriptions.${currentPage}`)}
         />
       </Head>
 

From 0b59f529c78393da6d499283d2e8bd4feb3c3d3c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 23:25:30 -0800
Subject: [PATCH 38/89] Fix Layout bug

---
 components/Layout/index.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index f37d4dac..3716d012 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -26,11 +26,17 @@ const Layout = ({ children }: PropsWithChildren<Props>) => {
   }, [])
 
   function getToastCookie() {
-    const updatedAt = new Date(appState.version.updated_at)
-    const cookieValues = getCookie(`update-${format(updatedAt, 'yyyy-MM-dd')}`)
-    return cookieValues
-      ? (JSON.parse(cookieValues as string) as { seen: true })
-      : { seen: false }
+    if (appState.version.updated_at !== '') {
+      const updatedAt = new Date(appState.version.updated_at)
+      const cookieValues = getCookie(
+        `update-${format(updatedAt, 'yyyy-MM-dd')}`
+      )
+      return cookieValues
+        ? (JSON.parse(cookieValues as string) as { seen: true })
+        : { seen: false }
+    } else {
+      return { seen: false }
+    }
   }
 
   function handleToastActionClicked() {

From 8ae51632f2e684daa55db63da9fc8706c5417f06 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 25 Jan 2023 23:52:32 -0800
Subject: [PATCH 39/89] Add translations

---
 public/locales/en/common.json | 6 ++++++
 public/locales/ja/common.json | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 1e21f979..00b17638 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -345,6 +345,9 @@
   },
   "page": {
     "titles": {
+      "about": "About granblue.team",
+      "updates": "Updates / granblue.team",
+      "roadmap": "Roadmap / granblue.team",
       "discover": "Discover teams / granblue.team",
       "new": "Create a new team / granblue.team",
       "profile": "@{{username}}'s Teams / granblue.team",
@@ -352,6 +355,9 @@
       "saved": "Your saved teams / granblue.team"
     },
     "descriptions": {
+      "about": "More about granblue.team / Save and discover teams to use in Granblue Fantasy",
+      "updates": "Latest updates to granblue.team",
+      "roadmap": "Upcoming planned features for granblue.team",
       "discover": "Save and discover teams to use in Granblue Fantasy and search by raid, element or recency",
       "new": "Create and theorycraft teams to use in Granblue Fantasy and share with the community",
       "profile": "Browse @{{username}}'s Teams and filter by raid, element or recency",
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index 1e09c368..a0cac04a 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -346,6 +346,9 @@
   },
   "page": {
     "titles": {
+      "about": "granblue.teamについて",
+      "updates": "変更ログ / granblue.team",
+      "roadmap": "ロードマップ / granblue.team",
       "discover": "編成を見出す / granblue.team",
       "new": "新しい編成 / granblue.team",
       "profile": "@{{username}}さんの作った編成 / granblue.team",
@@ -353,6 +356,9 @@
       "saved": "保存した編成"
     },
     "descriptions": {
+      "about": "granblue.teamについて / グランブルーファンタジーの編成を探したり保存したりできる",
+      "updates": "granblue.teamの最新変更について",
+      "roadmap": "granblue.teamの開発予定機能",
       "discover": "グランブルーファンタジーの編成をマルチ、属性、作った時間などで探したり保存したりできる",
       "new": "グランブルーファンタジーの編成を作成し、騎空士とシェアできるサイトgranblue.team",
       "profile": "@{{username}}の編成を調査し、マルチ、属性、または作った時間でフィルターする",

From 122bf69b62db96885c626817f3ff15fc2f1d8d91 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 00:21:25 -0800
Subject: [PATCH 40/89] Add Manatura icon

---
 public/icons/Manatura.svg | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 public/icons/Manatura.svg

diff --git a/public/icons/Manatura.svg b/public/icons/Manatura.svg
new file mode 100644
index 00000000..8d921fdd
--- /dev/null
+++ b/public/icons/Manatura.svg
@@ -0,0 +1,14 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1508_3021)">
+<mask id="path-1-outside-1_1508_3021" maskUnits="userSpaceOnUse" x="-2.00398" y="-4.76661" width="30.9999" height="38.1141" fill="black">
+<rect fill="white" x="-2.00398" y="-4.76661" width="30.9999" height="38.1141"/>
+<path d="M9 9.5C5.56759 11.5539 4.27486 21.0271 4.5 24C4.68381 26.427 5.87504 19.5 14 17C20.5 15 23.2229 8.54377 24 3.99998C18.5 9.08683 13.2905 6.9326 9 9.5Z"/>
+</mask>
+<path d="M4.5 24L7.49144 23.7735L7.49144 23.7735L4.5 24ZM9 9.5L10.5404 12.0743L10.5404 12.0743L9 9.5ZM24 3.99998L26.9571 4.50572C27.1737 3.23917 26.5596 1.97531 25.4301 1.36278C24.3006 0.750248 22.9063 0.925081 21.963 1.79755L24 3.99998ZM14 17L13.1178 14.1327L13.1178 14.1327L14 17ZM7.49144 23.7735C7.40977 22.6951 7.61743 19.9121 8.2945 17.11C8.62613 15.7375 9.03949 14.4952 9.51036 13.5357C10.0147 12.508 10.4183 12.1474 10.5404 12.0743L7.45956 6.9257C5.86546 7.87959 4.82037 9.47332 4.12398 10.8924C3.39413 12.3797 2.8548 14.0766 2.46234 15.7008C1.69123 18.892 1.36509 22.332 1.50857 24.2266L7.49144 23.7735ZM10.5404 12.0743C12.0462 11.1733 13.5308 11.1521 16.5364 10.6545C19.3667 10.1859 22.6896 9.29832 26.037 6.2024L21.963 1.79755C19.8104 3.78849 17.7786 4.36718 15.5564 4.73507C13.5097 5.07392 10.2443 5.25931 7.45956 6.9257L10.5404 12.0743ZM21.0429 3.49423C20.3319 7.65175 17.9753 12.6381 13.1178 14.1327L14.8823 19.8673C23.0248 17.362 26.1139 9.43579 26.9571 4.50572L21.0429 3.49423ZM13.1178 14.1327C8.28762 15.6189 5.48064 18.4519 3.8924 20.5209C3.50144 21.0301 3.18847 21.4875 2.95065 21.8431C2.80684 22.0581 2.75806 22.1336 2.65767 22.2832C2.61942 22.3401 2.59019 22.3829 2.56704 22.4161C2.55579 22.4322 2.54729 22.4441 2.54115 22.4526C2.53496 22.4611 2.53237 22.4645 2.53294 22.4637C2.53341 22.4631 2.53891 22.4559 2.54894 22.4436C2.55876 22.4316 2.57615 22.4108 2.60048 22.3839C2.63932 22.3409 2.74532 22.2266 2.91185 22.0976C3.0769 21.9698 4.47102 20.9476 6.12346 21.8981C6.76882 22.2692 7.09216 22.7774 7.22857 23.0325C7.37195 23.3006 7.4331 23.5225 7.45553 23.6108C7.49968 23.7848 7.49924 23.8765 7.49144 23.7735L1.50857 24.2266C1.52374 24.4269 1.55414 24.7489 1.63991 25.0868C1.68314 25.2572 1.76779 25.5444 1.93772 25.8622C2.10068 26.1669 2.45361 26.7089 3.13199 27.0991C4.85047 28.0875 6.32428 27.0438 6.58557 26.8414C6.96337 26.5488 7.21706 26.2161 7.30575 26.0997C7.51245 25.8284 7.77691 25.4195 7.93797 25.1787C8.14335 24.8717 8.3745 24.5356 8.65174 24.1744C9.73632 22.7616 11.5875 20.8811 14.8823 19.8673L13.1178 14.1327Z" fill="black" mask="url(#path-1-outside-1_1508_3021)"/>
+</g>
+<defs>
+<clipPath id="clip0_1508_3021">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 07cabb42c10db291943d97369186053002287bd6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 00:24:57 -0800
Subject: [PATCH 41/89] Add new fields to output

---
 types/Job.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/types/Job.d.ts b/types/Job.d.ts
index beb75dff..d4d5e43b 100644
--- a/types/Job.d.ts
+++ b/types/Job.d.ts
@@ -14,4 +14,6 @@ interface Job {
     proficiency2: number
   }
   base_job?: Job
+  accessory: boolean
+  accessory_type: number
 }

From c04e3967966c79852c0ff8a7fb911af3cacb272a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 01:29:26 -0800
Subject: [PATCH 42/89] Update shield and manatura icons

---
 public/icons/Manatura.svg | 15 ++-------------
 public/icons/Shield.svg   |  4 ++--
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/public/icons/Manatura.svg b/public/icons/Manatura.svg
index 8d921fdd..e9aa2d85 100644
--- a/public/icons/Manatura.svg
+++ b/public/icons/Manatura.svg
@@ -1,14 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1508_3021)">
-<mask id="path-1-outside-1_1508_3021" maskUnits="userSpaceOnUse" x="-2.00398" y="-4.76661" width="30.9999" height="38.1141" fill="black">
-<rect fill="white" x="-2.00398" y="-4.76661" width="30.9999" height="38.1141"/>
-<path d="M9 9.5C5.56759 11.5539 4.27486 21.0271 4.5 24C4.68381 26.427 5.87504 19.5 14 17C20.5 15 23.2229 8.54377 24 3.99998C18.5 9.08683 13.2905 6.9326 9 9.5Z"/>
-</mask>
-<path d="M4.5 24L7.49144 23.7735L7.49144 23.7735L4.5 24ZM9 9.5L10.5404 12.0743L10.5404 12.0743L9 9.5ZM24 3.99998L26.9571 4.50572C27.1737 3.23917 26.5596 1.97531 25.4301 1.36278C24.3006 0.750248 22.9063 0.925081 21.963 1.79755L24 3.99998ZM14 17L13.1178 14.1327L13.1178 14.1327L14 17ZM7.49144 23.7735C7.40977 22.6951 7.61743 19.9121 8.2945 17.11C8.62613 15.7375 9.03949 14.4952 9.51036 13.5357C10.0147 12.508 10.4183 12.1474 10.5404 12.0743L7.45956 6.9257C5.86546 7.87959 4.82037 9.47332 4.12398 10.8924C3.39413 12.3797 2.8548 14.0766 2.46234 15.7008C1.69123 18.892 1.36509 22.332 1.50857 24.2266L7.49144 23.7735ZM10.5404 12.0743C12.0462 11.1733 13.5308 11.1521 16.5364 10.6545C19.3667 10.1859 22.6896 9.29832 26.037 6.2024L21.963 1.79755C19.8104 3.78849 17.7786 4.36718 15.5564 4.73507C13.5097 5.07392 10.2443 5.25931 7.45956 6.9257L10.5404 12.0743ZM21.0429 3.49423C20.3319 7.65175 17.9753 12.6381 13.1178 14.1327L14.8823 19.8673C23.0248 17.362 26.1139 9.43579 26.9571 4.50572L21.0429 3.49423ZM13.1178 14.1327C8.28762 15.6189 5.48064 18.4519 3.8924 20.5209C3.50144 21.0301 3.18847 21.4875 2.95065 21.8431C2.80684 22.0581 2.75806 22.1336 2.65767 22.2832C2.61942 22.3401 2.59019 22.3829 2.56704 22.4161C2.55579 22.4322 2.54729 22.4441 2.54115 22.4526C2.53496 22.4611 2.53237 22.4645 2.53294 22.4637C2.53341 22.4631 2.53891 22.4559 2.54894 22.4436C2.55876 22.4316 2.57615 22.4108 2.60048 22.3839C2.63932 22.3409 2.74532 22.2266 2.91185 22.0976C3.0769 21.9698 4.47102 20.9476 6.12346 21.8981C6.76882 22.2692 7.09216 22.7774 7.22857 23.0325C7.37195 23.3006 7.4331 23.5225 7.45553 23.6108C7.49968 23.7848 7.49924 23.8765 7.49144 23.7735L1.50857 24.2266C1.52374 24.4269 1.55414 24.7489 1.63991 25.0868C1.68314 25.2572 1.76779 25.5444 1.93772 25.8622C2.10068 26.1669 2.45361 26.7089 3.13199 27.0991C4.85047 28.0875 6.32428 27.0438 6.58557 26.8414C6.96337 26.5488 7.21706 26.2161 7.30575 26.0997C7.51245 25.8284 7.77691 25.4195 7.93797 25.1787C8.14335 24.8717 8.3745 24.5356 8.65174 24.1744C9.73632 22.7616 11.5875 20.8811 14.8823 19.8673L13.1178 14.1327Z" fill="black" mask="url(#path-1-outside-1_1508_3021)"/>
-</g>
-<defs>
-<clipPath id="clip0_1508_3021">
-<rect width="28" height="28" fill="white"/>
-</clipPath>
-</defs>
+<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.49997 27.5C-0.500051 27.5 1.14279 17.8454 1.78667 15.9435C2.37392 14.2088 3.10735 12.4293 3.96802 10.8994C4.77642 9.46249 5.91051 7.85264 7.45945 6.92577C9.76438 5.54652 12.3986 5.18186 14.3985 4.905C14.8148 4.84736 15.2037 4.79353 15.5563 4.73515C17.7785 4.36726 19.8103 3.78856 21.9629 1.79762C22.9062 0.925157 24.3004 0.750323 25.43 1.36285C26.5595 1.97538 27.1736 3.23925 26.957 4.5058C26.1138 9.43587 23.0247 17.362 14.8822 19.8674C2.17635 23.7769 3.5 27.5 1.49997 27.5Z" />
 </svg>
diff --git a/public/icons/Shield.svg b/public/icons/Shield.svg
index 35fe26d8..a8e069c3 100644
--- a/public/icons/Shield.svg
+++ b/public/icons/Shield.svg
@@ -1,3 +1,3 @@
-<svg  viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.8867 18.2719L21.8994 18.2445L21.9109 18.2165C23.5986 14.1396 24.2687 9.48442 24.4473 6.37605C24.5467 4.64432 23.3192 3.18319 21.6806 2.875C15.8289 1.77447 11.9441 1.79402 6.30801 2.87175C4.67372 3.18425 3.45305 4.64391 3.55426 6.37163C3.73153 9.39788 4.38612 14.0994 6.08889 18.2161C6.87291 20.1117 7.94937 22.0403 9.20943 23.5242C10.4151 24.9441 12.0583 26.2692 14 26.2692C15.9869 26.2692 17.615 24.852 18.7848 23.4315C20.0173 21.935 21.0766 20.0255 21.8867 18.2719Z" />
+<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2485 18.9009L23.2738 18.8461L23.2969 18.7903C25.0719 14.5024 25.7609 9.66488 25.9448 6.46207C26.0895 3.94417 24.3044 1.84216 21.9579 1.40085C15.9228 0.265829 11.8484 0.285157 6.02633 1.39844C3.68545 1.84606 1.90969 3.9468 2.05687 6.45935C2.23934 9.57444 2.91185 14.4595 4.70282 18.7895C5.52785 20.7841 6.67748 22.8599 8.06609 24.4951C9.34592 26.0023 11.3727 27.7692 14 27.7692C16.7045 27.7692 18.7211 25.8684 19.9427 24.385C21.2895 22.7497 22.4117 20.7123 23.2485 18.9009Z" />
 </svg>

From 18bc7dc382968a51f8b031da7f0864333096a6cd Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 01:29:32 -0800
Subject: [PATCH 43/89] Update min-width for phone

---
 styles/mixins.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/mixins.scss b/styles/mixins.scss
index 0fc2db64..873f9f72 100644
--- a/styles/mixins.scss
+++ b/styles/mixins.scss
@@ -1,6 +1,6 @@
 // use with @include
 @mixin breakpoint($breakpoint) {
-  $phone-width: 430px;
+  $phone-width: 450px;
   $phone-height: 920px;
 
   $tablet-width: 1024px;

From 7692ec0a0bc0266d201b2e7c55491abea61f2b61 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 01:29:45 -0800
Subject: [PATCH 44/89] Icons use fill and not stroke now

---
 components/JobImage/index.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/JobImage/index.scss b/components/JobImage/index.scss
index a5004f66..dd990440 100644
--- a/components/JobImage/index.scss
+++ b/components/JobImage/index.scss
@@ -60,13 +60,11 @@
     z-index: 10;
 
     &:hover .Accessory svg {
-      stroke: var(--button-text-hover);
+      fill: var(--button-text-hover);
     }
 
     .Accessory svg {
-      fill: none;
-      stroke: var(--button-text);
-      stroke-width: 3px;
+      fill: var(--button-text);
       width: $unit-3x;
       height: auto;
     }

From 18901c954bd0095649769459215be763d97f761f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 01:29:53 -0800
Subject: [PATCH 45/89] Conditionally show icon

---
 components/JobImage/index.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/JobImage/index.tsx b/components/JobImage/index.tsx
index 513693a8..670899ea 100644
--- a/components/JobImage/index.tsx
+++ b/components/JobImage/index.tsx
@@ -1,13 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
-
-import { ACCESSORY_JOB_IDS } from '~utils/jobsWithAccessories'
 
 import Button from '~components/Button'
 import JobAccessoryPopover from '~components/JobAccessoryPopover'
 
 import ShieldIcon from '~public/icons/Shield.svg'
+import ManaturaIcon from '~public/icons/Manatura.svg'
+
 import './index.scss'
 
 interface Props {
@@ -51,7 +50,7 @@ const JobImage = ({
     return source
   }
 
-  const hasAccessory = job && ACCESSORY_JOB_IDS.includes(job.id)
+  const hasAccessory = job && job.accessory
   const image = <img alt={job?.name[locale]} src={imageUrl()} />
 
   function handleAccessoryButtonClicked() {
@@ -64,9 +63,14 @@ const JobImage = ({
 
   // Elements
   const accessoryButton = () => {
+    let icon
+
+    if (job && job.accessory_type === 1) icon = <ShieldIcon />
+    else if (job && job.accessory_type === 2) icon = <ManaturaIcon />
+
     return (
       <Button
-        accessoryIcon={<ShieldIcon />}
+        accessoryIcon={icon}
         className="JobAccessory"
         onClick={handleAccessoryButtonClicked}
         ref={buttonRef}

From 387b02d9ffe98cdd40705358080f8773c98869d6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 01:30:56 -0800
Subject: [PATCH 46/89] Sort of fix CSS for JobAccessoryPopover

This still isn't exactly what we want, but it works on mobile so it's good enough
---
 components/JobAccessoryPopover/index.scss | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/components/JobAccessoryPopover/index.scss b/components/JobAccessoryPopover/index.scss
index 4d8afa01..d571ebc6 100644
--- a/components/JobAccessoryPopover/index.scss
+++ b/components/JobAccessoryPopover/index.scss
@@ -1,10 +1,27 @@
 .JobAccessory.Popover {
   padding: $unit-2x;
-  width: 504px;
+  min-width: 40vw;
+  max-width: 40vw;
+
+  @include breakpoint(tablet) {
+    width: 100%;
+    max-width: initial;
+  }
+
+  @include breakpoint(phone) {
+    padding: $unit;
+    width: 100%;
+    max-width: initial;
+  }
 
   .Accessories {
     display: grid;
     gap: $unit;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+
+    @include breakpoint(tablet) {
+      grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+      gap: 0;
+    }
   }
 }

From 8d0ea633eeca2562f52063394bbacdab9c888769 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 02:25:33 -0800
Subject: [PATCH 47/89] Add localizations

---
 public/locales/en/common.json | 6 ++++++
 public/locales/ja/common.json | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 00b17638..eff0750c 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -6,6 +6,10 @@
       "roadmap": "Roadmap"
     }
   },
+  "accessories": {
+    "paladin": "shield",
+    "manadiver": "manatura"
+  },
   "alert": {
     "incompatible_weapon": "You've selected a weapon that can't be added to the Additional Weapon slots."
   },
@@ -378,7 +382,9 @@
     }
   },
   "extra_weapons": "Additional Weapons",
+  "equipped": "Equipped",
   "coming_soon": "Coming Soon",
+  "no_accessory": "No {{accessory}} equipped",
   "no_title": "Untitled",
   "no_raid": "No raid",
   "no_user": "Anonymous",
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index a0cac04a..b6249a70 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -6,6 +6,10 @@
       "roadmap": "ロードマップ"
     }
   },
+  "accessories": {
+    "paladin": "盾",
+    "manadiver": "マナベリ"
+  },
   "alert": {
     "incompatible_weapon": "Additional Weaponsに装備できない武器を入れました。"
   },
@@ -378,8 +382,10 @@
       "no_skill": "設定されていません"
     }
   },
+  "equipped": "装備した",
   "extra_weapons": "Additional Weapons",
   "coming_soon": "開発中",
+  "no_accessory": "{{accessory}}は装備していません",
   "no_title": "無題",
   "no_raid": "マルチなし",
   "no_user": "無名",

From 4c3d8360a06ceffbb39f8abb93ff1369d07c85a7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 02:25:46 -0800
Subject: [PATCH 48/89] Implement localizations

---
 components/JobAccessoryPopover/index.tsx | 81 ++++++++++++++++--------
 1 file changed, 56 insertions(+), 25 deletions(-)

diff --git a/components/JobAccessoryPopover/index.tsx b/components/JobAccessoryPopover/index.tsx
index 6ad97eab..fa3bb6ba 100644
--- a/components/JobAccessoryPopover/index.tsx
+++ b/components/JobAccessoryPopover/index.tsx
@@ -13,6 +13,7 @@ import {
 import JobAccessoryItem from '~components/JobAccessoryItem'
 
 import './index.scss'
+import classNames from 'classnames'
 
 interface Props {
   buttonref: React.RefObject<HTMLButtonElement>
@@ -46,6 +47,11 @@ const JobAccessoryPopover = ({
   // Component state
   const [open, setOpen] = useState(false)
 
+  const classes = classNames({
+    JobAccessory: true,
+    ReadOnly: !editable,
+  })
+
   // Hooks
   useEffect(() => {
     setOpen(modalOpen)
@@ -73,37 +79,62 @@ const JobAccessoryPopover = ({
   function closePopover() {
     onOpenChange(false)
   }
+
+  function capitalizeFirstLetter(string: string) {
+    return string.charAt(0).toUpperCase() + string.slice(1)
+  }
+
   const radioGroup = (
-    <RadioGroup.Root
-      className="Accessories"
-      onValueChange={handleAccessorySelected}
-    >
-      {accessories.map((accessory) => (
-        <JobAccessoryItem
-          accessory={accessory}
-          key={accessory.id}
-          selected={
-            currentAccessory && currentAccessory.id === accessory.id
-              ? true
-              : false
-          }
-        />
-      ))}
-    </RadioGroup.Root>
+    <>
+      <h3>
+        {capitalizeFirstLetter(
+          job.accessory_type === 1
+            ? `${t('accessories.paladin')}s`
+            : t('accessories.manadiver')
+        )}
+      </h3>
+      <RadioGroup.Root
+        className="Accessories"
+        onValueChange={handleAccessorySelected}
+      >
+        {accessories.map((accessory) => (
+          <JobAccessoryItem
+            accessory={accessory}
+            key={accessory.id}
+            selected={
+              currentAccessory && currentAccessory.id === accessory.id
+                ? true
+                : false
+            }
+          />
+        ))}
+      </RadioGroup.Root>
+    </>
   )
 
   const readOnly = currentAccessory ? (
-    <div className="JobAccessory">
-      <img
-        alt={currentAccessory.name[locale]}
-        src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/accessory-grid/${currentAccessory.granblue_id}.jpg`}
-      />
-      <h4>{currentAccessory.name[locale]}</h4>
+    <div className="EquippedAccessory">
+      <h3>
+        {t('equipped')}{' '}
+        {job.accessory_type === 1
+          ? `${t('accessories.paladin')}s`
+          : t('accessories.manadiver')}
+      </h3>
+      <div className="Accessory">
+        <img
+          alt={currentAccessory.name[locale]}
+          src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/accessory-grid/${currentAccessory.granblue_id}.jpg`}
+        />
+        <h4>{currentAccessory.name[locale]}</h4>
+      </div>
     </div>
   ) : (
     <h3>
-      No shield selected
-      {/* {t('no_accessory', { job: job.name.en.replace(' ', '-').toLowerCase() })} */}
+      {t('no_accessory', {
+        accessory: t(
+          `accessories.${job.accessory_type === 1 ? 'paladin' : 'manadiver'}`
+        ),
+      })}
     </h3>
   )
 
@@ -111,7 +142,7 @@ const JobAccessoryPopover = ({
     <Popover open={open}>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent
-        className="JobAccessory"
+        className={classes}
         onEscapeKeyDown={closePopover}
         onPointerDownOutside={handlePointerDownOutside}
       >

From c41dafbeeb88ab6f5d9a034076d075c8ec9e444a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 02:25:52 -0800
Subject: [PATCH 49/89] More CSS fixes

---
 components/JobAccessoryPopover/index.scss | 46 +++++++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/components/JobAccessoryPopover/index.scss b/components/JobAccessoryPopover/index.scss
index d571ebc6..88ac72d4 100644
--- a/components/JobAccessoryPopover/index.scss
+++ b/components/JobAccessoryPopover/index.scss
@@ -2,15 +2,28 @@
   padding: $unit-2x;
   min-width: 40vw;
   max-width: 40vw;
+  max-height: 40vh;
+  overflow-y: scroll;
+  margin-left: $unit-2x;
+
+  h3 {
+    font-size: $font-regular;
+    font-weight: $medium;
+    margin: 0 0 $unit $unit;
+  }
+
+  &.ReadOnly {
+    min-width: inherit;
+    max-width: inherit;
+  }
 
   @include breakpoint(tablet) {
-    width: 100%;
+    width: initial;
     max-width: initial;
   }
 
   @include breakpoint(phone) {
-    padding: $unit;
-    width: 100%;
+    width: initial;
     max-width: initial;
   }
 
@@ -24,4 +37,31 @@
       gap: 0;
     }
   }
+
+  .EquippedAccessory {
+    display: flex;
+    flex-direction: column;
+    gap: $unit-2x;
+
+    h3 {
+      margin: 0;
+    }
+
+    .Accessory {
+      display: flex;
+      flex-direction: column;
+      gap: $unit;
+
+      h4 {
+        font-size: $font-small;
+        font-weight: $medium;
+        text-align: center;
+      }
+
+      img {
+        border-radius: $item-corner;
+        width: 150px;
+      }
+    }
+  }
 }

From c4a32ab639b9e21fb742d04c39802eab94fcf2da Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 02:28:06 -0800
Subject: [PATCH 50/89] Make button light up while popover is open

---
 components/JobImage/index.scss | 3 ++-
 components/JobImage/index.tsx  | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/JobImage/index.scss b/components/JobImage/index.scss
index dd990440..b5b8cef3 100644
--- a/components/JobImage/index.scss
+++ b/components/JobImage/index.scss
@@ -59,7 +59,8 @@
     height: auto;
     z-index: 10;
 
-    &:hover .Accessory svg {
+    &:hover .Accessory svg,
+    &.Selected .Accessory svg {
       fill: var(--button-text-hover);
     }
 
diff --git a/components/JobImage/index.tsx b/components/JobImage/index.tsx
index 670899ea..8902abaa 100644
--- a/components/JobImage/index.tsx
+++ b/components/JobImage/index.tsx
@@ -8,6 +8,7 @@ import ShieldIcon from '~public/icons/Shield.svg'
 import ManaturaIcon from '~public/icons/Manatura.svg'
 
 import './index.scss'
+import classNames from 'classnames'
 
 interface Props {
   job?: Job
@@ -53,6 +54,11 @@ const JobImage = ({
   const hasAccessory = job && job.accessory
   const image = <img alt={job?.name[locale]} src={imageUrl()} />
 
+  const classes = classNames({
+    JobAccessory: true,
+    Selected: open,
+  })
+
   function handleAccessoryButtonClicked() {
     setOpen(!open)
   }
@@ -71,7 +77,7 @@ const JobImage = ({
     return (
       <Button
         accessoryIcon={icon}
-        className="JobAccessory"
+        className={classes}
         onClick={handleAccessoryButtonClicked}
         ref={buttonRef}
       />

From c5c08b6a78fd1124e637f39824d7110bf732aaea Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 02:42:14 -0800
Subject: [PATCH 51/89] Fix bug with api response

---
 components/CharacterGrid/index.tsx | 7 +------
 components/JobSection/index.tsx    | 3 ++-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index 73cfcc08..f0b59039 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -267,17 +267,12 @@ const CharacterGrid = (props: Props) => {
         appState.party.id,
         payload
       )
-      const team = response.data
-
+      const team = response.data.party
       setJobAccessory(team.accessory)
       appState.party.accessory = team.accessory
     }
   }
 
-  useEffect(() => {
-    console.log(jobAccessory)
-  }, [jobAccessory])
-
   // Methods: Helpers
   function characterUncapLevel(character: Character) {
     let uncapLevel
diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx
index 83e387c8..18c6f876 100644
--- a/components/JobSection/index.tsx
+++ b/components/JobSection/index.tsx
@@ -79,7 +79,7 @@ const JobSection = (props: Props) => {
 
   // Data fetching
   async function fetchJobAccessories() {
-    if (job && ACCESSORY_JOB_IDS.includes(job.id)) {
+    if (job && job.accessory) {
       const response = await api.jobAccessoriesForJob(job.id)
       const jobAccessories: JobAccessory[] = response.data
       setAccessories(jobAccessories)
@@ -93,6 +93,7 @@ const JobSection = (props: Props) => {
 
   function handleAccessorySelected(value: string) {
     const accessory = accessories.find((accessory) => accessory.id === value)
+
     if (accessory) {
       setCurrentAccessory(accessory)
       props.saveAccessory(accessory)

From f85874d962d1718e888efdee80a078ca33b6d0a1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 11:40:39 -0800
Subject: [PATCH 52/89] Add clearer selected state

---
 components/JobAccessoryItem/index.scss | 6 +++++-
 styles/themes.scss                     | 6 ++++++
 styles/variables.scss                  | 5 +++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/JobAccessoryItem/index.scss b/components/JobAccessoryItem/index.scss
index 7b2b069c..1c255ada 100644
--- a/components/JobAccessoryItem/index.scss
+++ b/components/JobAccessoryItem/index.scss
@@ -10,7 +10,11 @@
   width: 100%;
 
   &[data-state='checked'] {
-    background: var(--input-bg-hover);
+    background: var(--selected-item-bg);
+
+    &:hover {
+      background: var(--selected-item-bg-hover);
+    }
 
     h4 {
       color: var(--button-text-hover);
diff --git a/styles/themes.scss b/styles/themes.scss
index a97dde0d..d181dca2 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -16,6 +16,9 @@
   --accent-blue: #{$accent--blue--light};
   --accent-yellow: #{$accent--yellow--light};
 
+  --selected-item-bg: #{$selected--item--bg--light};
+  --selected-item-bg-hover: #{$selected--item--bg--light--hover};
+
   // Light - Menus
   --dialog-bg: #{$dialog--bg--light};
 
@@ -143,6 +146,9 @@
   --accent-blue: #{$accent--blue--dark};
   --accent-yellow: #{$accent--yellow--dark};
 
+  --selected-item-bg: #{$selected--item--bg--dark};
+  --selected-item-bg-hover: #{$selected--item--bg--dark--hover};
+
   // Dark - Dialogs
   --dialog-bg: #{$dialog--bg--dark};
 
diff --git a/styles/variables.scss b/styles/variables.scss
index 76e3cc4d..91aa81e1 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -83,6 +83,11 @@ $accent--blue--dark: #6195f4;
 $accent--yellow--light: #c89d39;
 $accent--yellow--dark: #f9cc64;
 
+$selected--item--bg--dark: #f9cc645d;
+$selected--item--bg--dark--hover: #fcc33f81;
+$selected--item--bg--light: #f9cc645d;
+$selected--item--bg--light--hover: #ecbc4c6f;
+
 // Colors -- Elements
 $wind-text-00: #023e28;
 $wind-text-10: #006a43;

From 12fdf00efaeafbc24c915ecdfe3e6d7e79ddaec1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 11:44:54 -0800
Subject: [PATCH 53/89] Fix empty job

---
 utils/appState.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/utils/appState.tsx b/utils/appState.tsx
index 94014fee..a826f6d3 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -16,6 +16,8 @@ const emptyJob: Job = {
     proficiency1: 0,
     proficiency2: 0,
   },
+  accessory: false,
+  accessory_type: 0,
 }
 
 interface AppState {

From 35402dc0a897fb723a77291b99688ad956f9b740 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:28:20 -0800
Subject: [PATCH 54/89] Add translations

---
 public/locales/en/common.json | 1 +
 public/locales/ja/common.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index eff0750c..89fc5b77 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -384,6 +384,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",
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index b6249a70..5faa47b8 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -385,6 +385,7 @@
   "equipped": "装備した",
   "extra_weapons": "Additional Weapons",
   "coming_soon": "開発中",
+  "new_party": "新しい編成",
   "no_accessory": "{{accessory}}は装備していません",
   "no_title": "無題",
   "no_raid": "マルチなし",

From 253472878579955eb807e5d3f8b2a3fdac20cd5e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:28:44 -0800
Subject: [PATCH 55/89] Extract capitalizeFirstLetter into util

---
 components/JobAccessoryPopover/index.tsx | 9 +++------
 utils/capitalizeFirstLetter.tsx          | 3 +++
 2 files changed, 6 insertions(+), 6 deletions(-)
 create mode 100644 utils/capitalizeFirstLetter.tsx

diff --git a/components/JobAccessoryPopover/index.tsx b/components/JobAccessoryPopover/index.tsx
index fa3bb6ba..8f7ae501 100644
--- a/components/JobAccessoryPopover/index.tsx
+++ b/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>
diff --git a/utils/capitalizeFirstLetter.tsx b/utils/capitalizeFirstLetter.tsx
new file mode 100644
index 00000000..5dd33934
--- /dev/null
+++ b/utils/capitalizeFirstLetter.tsx
@@ -0,0 +1,3 @@
+export default function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}

From 1baf8d3b06cf9aec00c94334457bd421a0f9da2b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:29:32 -0800
Subject: [PATCH 56/89] Add support for left and right button accessories

---
 components/Button/index.tsx        | 41 ++++++++++++++++++++++++++----
 components/CharacterUnit/index.tsx |  2 +-
 components/GridRep/index.tsx       |  2 +-
 components/JobImage/index.tsx      |  2 +-
 components/PartyDetails/index.tsx  |  6 ++---
 components/SummonUnit/index.tsx    |  2 +-
 components/WeaponUnit/index.tsx    |  2 +-
 7 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/components/Button/index.tsx b/components/Button/index.tsx
index e87e7ff7..f75b9a48 100644
--- a/components/Button/index.tsx
+++ b/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,7 +27,18 @@ 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(
@@ -38,8 +52,24 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
     props.className
   )
 
-  const hasAccessory = () => {
-    if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
+  const leftAccessoryClasses = classNames(leftAccessoryClassName, {
+    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 +78,9 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
 
   return (
     <button {...props} className={classes} ref={forwardedRef}>
-      {hasAccessory()}
+      {hasLeftAccessory()}
       {hasText()}
+      {hasRightAccessory()}
     </button>
   )
 })
diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx
index d813b877..6e1b0674 100644
--- a/components/CharacterUnit/index.tsx
+++ b/components/CharacterUnit/index.tsx
@@ -218,7 +218,7 @@ const CharacterUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />
diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx
index 813635de..3f406b4b 100644
--- a/components/GridRep/index.tsx
+++ b/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"
diff --git a/components/JobImage/index.tsx b/components/JobImage/index.tsx
index 8902abaa..91339331 100644
--- a/components/JobImage/index.tsx
+++ b/components/JobImage/index.tsx
@@ -76,7 +76,7 @@ const JobImage = ({
 
     return (
       <Button
-        accessoryIcon={icon}
+        leftAccessoryIcon={icon}
         className={classes}
         onClick={handleAccessoryButtonClicked}
         ref={buttonRef}
diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index 285f8f59..ee5927d9 100644
--- a/components/PartyDetails/index.tsx
+++ b/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}
             />
diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx
index 9da0b566..1fc9274a 100644
--- a/components/SummonUnit/index.tsx
+++ b/components/SummonUnit/index.tsx
@@ -172,7 +172,7 @@ const SummonUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index 8149f6a6..2da4c276 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -450,7 +450,7 @@ const WeaponUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />

From ceb87a80168a1744b08af73ed0ca54c8a9a7a850 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:30:00 -0800
Subject: [PATCH 57/89] Add wrapper for Radix DropdownMenu

---
 components/DropdownMenuContent/index.scss | 188 ++++++++++++++++++++++
 components/DropdownMenuContent/index.tsx  |  37 +++++
 2 files changed, 225 insertions(+)
 create mode 100644 components/DropdownMenuContent/index.scss
 create mode 100644 components/DropdownMenuContent/index.tsx

diff --git a/components/DropdownMenuContent/index.scss b/components/DropdownMenuContent/index.scss
new file mode 100644
index 00000000..7f837fda
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/components/DropdownMenuContent/index.tsx b/components/DropdownMenuContent/index.tsx
new file mode 100644
index 00000000..3e472872
--- /dev/null
+++ b/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,
+}

From fa1bf57964281b97d64e653f184cd4f058aeee77 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:30:39 -0800
Subject: [PATCH 58/89] Implement new header design (so far)

---
 components/AccountModal/index.tsx |   4 +-
 components/Button/index.scss      |   4 +
 components/Header/index.scss      |  11 +-
 components/Header/index.tsx       | 295 ++++++++++++++++++++++++++----
 components/HeaderMenu/index.scss  | 187 -------------------
 5 files changed, 278 insertions(+), 223 deletions(-)

diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index 0567380e..d5337693 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -286,9 +286,9 @@ const AccountModal = (props: Props) => {
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>
-        <li className="MenuItem">
+        <div className="MenuItem">
           <span>{t('menu.settings')}</span>
-        </li>
+        </div>
       </DialogTrigger>
       <DialogContent
         className="Account"
diff --git a/components/Button/index.scss b/components/Button/index.scss
index aedae8c2..f3b9bfc0 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -138,6 +138,10 @@
 
     display: flex;
 
+    &.Arrow {
+      margin-top: $unit-half;
+    }
+
     svg {
       fill: var(--button-text);
       height: $dimension;
diff --git a/components/Header/index.scss b/components/Header/index.scss
index 6599906d..f19cc45f 100644
--- a/components/Header/index.scss
+++ b/components/Header/index.scss
@@ -5,11 +5,18 @@
   justify-content: space-between;
   width: 100%;
 
-  #Right > div {
+  section {
     display: flex;
     gap: $unit;
   }
 
+  img {
+    $diameter: 32px;
+    border-radius: calc($diameter / 2);
+    height: $diameter;
+    width: $diameter;
+  }
+
   #DropdownWrapper {
     display: inline-block;
     padding-bottom: $unit;
@@ -20,7 +27,7 @@
     }
 
     &:hover {
-      padding-right: $unit-4x;
+      // padding-right: $unit-4x;
 
       .Button {
         background: var(--button-bg-hover);
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index d1c7250b..2fe2a72f 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -3,12 +3,13 @@ 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 api from '~utils/api'
 import { accountState, initialAccountState } from '~utils/accountState'
 import { appState, initialAppState } from '~utils/appState'
+import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
 
 import Button from '~components/Button'
 import HeaderMenu from '~components/HeaderMenu'
@@ -16,10 +17,22 @@ 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'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from '~components/DropdownMenuContent'
+import Link from 'next/link'
+import LoginModal from '~components/LoginModal'
+import SignupModal from '~components/SignupModal'
+import AccountModal from '~components/AccountModal'
 
 const Header = () => {
   // Localization
@@ -30,19 +43,40 @@ const Header = () => {
 
   // State management
   const [open, setOpen] = useState(false)
+  const [leftMenuOpen, setLeftMenuOpen] = useState(false)
+  const [rightMenuOpen, setRightMenuOpen] = useState(false)
 
   // Snapshots
   const { account } = useSnapshot(accountState)
   const { party } = useSnapshot(appState)
 
-  function menuButtonClicked() {
-    setOpen(!open)
+  function handleLeftMenuButtonClicked() {
+    setLeftMenuOpen(!leftMenuOpen)
+  }
+
+  function handleRightMenuButtonClicked() {
+    setRightMenuOpen(!rightMenuOpen)
   }
 
   function onClickOutsideMenu() {
     setOpen(false)
   }
 
+  function handleLeftMenuOpenChange(open: boolean) {
+    setLeftMenuOpen(open)
+  }
+  function handleRightMenuOpenChange(open: boolean) {
+    setRightMenuOpen(open)
+  }
+
+  function closeLeftMenu() {
+    setLeftMenuOpen(false)
+  }
+
+  function closeRightMenu() {
+    setRightMenuOpen(false)
+  }
+
   function copyToClipboard() {
     const el = document.createElement('input')
     el.value = window.location.href
@@ -69,6 +103,10 @@ const Header = () => {
   }
 
   function logout() {
+    // Close menu
+    closeRightMenu()
+
+    // Delete cookies
     deleteCookie('account')
     deleteCookie('user')
 
@@ -107,7 +145,7 @@ const Header = () => {
     if (router.route === '/p/[party]')
       return (
         <Button
-          accessoryIcon={<LinkIcon className="stroke" />}
+          leftAccessoryIcon={<LinkIcon className="stroke" />}
           blended={true}
           text={t('buttons.copy')}
           onClick={copyToClipboard}
@@ -115,24 +153,39 @@ const Header = () => {
       )
   }
 
-  const leftNav = () => {
+  const title = () => {
+    let title = ''
+    let hasAccessory = false
+
+    const path = router.asPath.split('/')[1]
+    console.log(router.asPath.split('/'))
+    if (path === 'p') {
+      hasAccessory = true
+      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 if (
+      ['about', 'updates', 'roadmap', 'saved', 'teams'].includes(path)
+    ) {
+      title = capitalizeFirstLetter(path)
+    } else {
+      title = path
+    }
+
     return (
-      <div id="DropdownWrapper">
-        <Button
-          accessoryIcon={<MenuIcon />}
-          className={classNames({ Active: open })}
-          blended={true}
-          text={t('buttons.menu')}
-          onClick={menuButtonClicked}
-        />
-        <HeaderMenu
-          authenticated={account.authorized}
-          open={open}
-          username={account.user?.username}
-          onClickOutside={onClickOutsideMenu}
-          logout={logout}
-        />
-      </div>
+      <Button
+        blended={true}
+        rightAccessoryIcon={
+          path === 'p' && hasAccessory ? (
+            <LinkIcon className="stroke" />
+          ) : undefined
+        }
+        text={title}
+      />
     )
   }
 
@@ -140,7 +193,7 @@ const Header = () => {
     if (party.favorited)
       return (
         <Button
-          accessoryIcon={<SaveIcon />}
+          leftAccessoryIcon={<SaveIcon />}
           blended={true}
           text="Saved"
           onClick={toggleFavorite}
@@ -149,7 +202,7 @@ const Header = () => {
     else
       return (
         <Button
-          accessoryIcon={<SaveIcon />}
+          leftAccessoryIcon={<SaveIcon />}
           blended={true}
           text="Save"
           onClick={toggleFavorite}
@@ -157,9 +210,56 @@ const Header = () => {
       )
   }
 
-  const rightNav = () => {
+  const image = () => {
+    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 = <img alt={t('no_user')} className="profile placeholder" />
+    }
+
+    return image
+  }
+
+  const left = () => {
     return (
-      <div>
+      <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>
+        {title()}
+      </section>
+    )
+  }
+
+  const right = () => {
+    return (
+      <section>
         {router.route === '/p/[party]' &&
         account.user &&
         (!party.user || party.user.id !== account.user.id)
@@ -168,20 +268,151 @@ const Header = () => {
 
         {copyButton()}
 
-        <Button
-          accessoryIcon={<AddIcon className="Add" />}
+        {/* <Button
+          leftAccessoryIcon={<AddIcon className="Add" />}
           blended={true}
           text={t('buttons.new')}
           onClick={newParty}
-        />
-      </div>
+        /> */}
+
+        <DropdownMenu
+          open={rightMenuOpen}
+          onOpenChange={handleRightMenuOpenChange}
+        >
+          <DropdownMenuTrigger asChild>
+            <Button
+              className={classNames({ Active: rightMenuOpen })}
+              leftAccessoryIcon={image()}
+              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" onClick={closeRightMenu}>
+              <Link href={`/new` || ''} passHref>
+                New party
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="MenuItem" onClick={closeRightMenu}>
+              <Link href={`/${account.user.username}` || ''} passHref>
+                Your profile
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={closeRightMenu}
+              asChild
+            >
+              <AccountModal
+                username={account.user.username}
+                picture={account.user.picture}
+                gender={account.user.gender}
+                language={account.user.language}
+                theme={account.user.theme}
+              />
+            </DropdownMenuItem>
+            <DropdownMenuItem className="MenuItem" onClick={logout}>
+              <span>{t('menu.logout')}</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </>
+      )
+    } else {
+      items = (
+        <>
+          <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuItem className="MenuItem">New party</DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup className="MenuGroup">
+            <LoginModal />
+            <SignupModal />
+          </DropdownMenuGroup>
+        </>
+      )
+    }
+
+    return items
+  }
+
   return (
     <nav id="Header">
-      <div id="Left">{leftNav()}</div>
-      <div id="Right">{rightNav()}</div>
+      {left()}
+      {right()}
     </nav>
   )
 }
diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss
index e5584f7f..e69de29b 100644
--- a/components/HeaderMenu/index.scss
+++ b/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;
-  }
-}

From 199b02b0cc30c3eec5714b9c743832da227c1ee5 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:36:45 -0800
Subject: [PATCH 59/89] Fix unauth menu

---
 components/Header/index.scss     | 7 ++++++-
 components/Header/index.tsx      | 8 ++++++--
 components/LoginModal/index.tsx  | 4 ++--
 components/SignupModal/index.tsx | 4 ++--
 styles/themes.scss               | 4 ++++
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/Header/index.scss b/components/Header/index.scss
index f19cc45f..bfa358ea 100644
--- a/components/Header/index.scss
+++ b/components/Header/index.scss
@@ -10,13 +10,18 @@
     gap: $unit;
   }
 
-  img {
+  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;
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 2fe2a72f..a66c95a5 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -225,7 +225,7 @@ const Header = () => {
         />
       )
     } else {
-      image = <img alt={t('no_user')} className="profile placeholder" />
+      image = <div className="profile placeholder" />
     }
 
     return image
@@ -395,7 +395,11 @@ const Header = () => {
       items = (
         <>
           <DropdownMenuGroup className="MenuGroup">
-            <DropdownMenuItem className="MenuItem">New party</DropdownMenuItem>
+            <DropdownMenuItem className="MenuItem">
+              <Link href={`/new` || ''} passHref>
+                New party
+              </Link>
+            </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuGroup className="MenuGroup">
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index be2f72c6..e2910acf 100644
--- a/components/LoginModal/index.tsx
+++ b/components/LoginModal/index.tsx
@@ -199,9 +199,9 @@ const LoginModal = () => {
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>
-        <li className="MenuItem">
+        <div className="MenuItem">
           <span>{t('menu.login')}</span>
-        </li>
+        </div>
       </DialogTrigger>
       <DialogContent
         className="Login"
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index a142d348..34f681cd 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -280,9 +280,9 @@ const SignupModal = (props: Props) => {
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>
-        <li className="MenuItem">
+        <div className="MenuItem">
           <span>{t('menu.signup')}</span>
-        </li>
+        </div>
       </DialogTrigger>
       <DialogContent
         className="Signup"
diff --git a/styles/themes.scss b/styles/themes.scss
index d181dca2..12e3a02f 100644
--- a/styles/themes.scss
+++ b/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};
 

From 0bbd0278a1341a7ab0c93026d2bbe0f5ba4807d9 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:39:57 -0800
Subject: [PATCH 60/89] Move copy function and remove copy button

---
 components/Header/index.tsx | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index a66c95a5..18cac289 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -141,18 +141,6 @@ const Header = () => {
     else console.error('Failed to unsave team: No party ID')
   }
 
-  const copyButton = () => {
-    if (router.route === '/p/[party]')
-      return (
-        <Button
-          leftAccessoryIcon={<LinkIcon className="stroke" />}
-          blended={true}
-          text={t('buttons.copy')}
-          onClick={copyToClipboard}
-        />
-      )
-  }
-
   const title = () => {
     let title = ''
     let hasAccessory = false
@@ -185,6 +173,7 @@ const Header = () => {
           ) : undefined
         }
         text={title}
+        onClick={copyToClipboard}
       />
     )
   }
@@ -266,8 +255,6 @@ const Header = () => {
           ? saveButton()
           : ''}
 
-        {copyButton()}
-
         {/* <Button
           leftAccessoryIcon={<AddIcon className="Add" />}
           blended={true}

From 191f4447d54073ae3eb44056cd127a01021bea8b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 20:50:56 -0800
Subject: [PATCH 61/89] Fix save button states

---
 components/Button/index.scss | 29 ++++++++++++++++-------------
 components/Button/index.tsx  | 16 ++++++----------
 components/Header/index.tsx  | 30 ++++++++++++------------------
 3 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/components/Button/index.scss b/components/Button/index.scss
index f3b9bfc0..585fb876 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -43,7 +43,7 @@
       stroke: #ff4d4d;
     }
 
-    &.Active.Save {
+    &.Save {
       color: #ff4d4d;
 
       .Accessory svg {
@@ -99,24 +99,27 @@
     }
   }
 
-  &.save:hover {
-    color: #ff4d4d;
-
+  &.Save {
     .Accessory svg {
-      fill: #ff4d4d;
-      stroke: #ff4d4d;
+      fill: none;
+      stroke: var(--button-text);
     }
-  }
 
-  &.save.Active {
-    color: #ff4d4d;
+    &.Saved {
+      color: #ff4d4d;
+
+      .Accessory svg {
+        fill: #ff4d4d;
+        stroke: none;
+      }
+    }
 
     &:hover {
-      color: darken(#ff4d4d, 30);
+      color: #ff4d4d;
 
-      .icon svg {
-        fill: darken(#ff4d4d, 30);
-        stroke: darken(#ff4d4d, 30);
+      .Accessory svg {
+        fill: none;
+        stroke: #ff4d4d;
       }
     }
   }
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
index f75b9a48..8594c129 100644
--- a/components/Button/index.tsx
+++ b/components/Button/index.tsx
@@ -41,16 +41,12 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
   },
   forwardedRef
 ) {
-  const classes = classNames(
-    {
-      Button: true,
-      Active: active,
-      Blended: blended,
-      Contained: contained,
-    },
-    buttonSize,
-    props.className
-  )
+  const classes = classNames(buttonSize, props.className, {
+    Button: true,
+    Active: active,
+    Blended: blended,
+    Contained: contained,
+  })
 
   const leftAccessoryClasses = classNames(leftAccessoryClassName, {
     Accessory: true,
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 18cac289..55b49649 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -179,24 +179,18 @@ const Header = () => {
   }
 
   const saveButton = () => {
-    if (party.favorited)
-      return (
-        <Button
-          leftAccessoryIcon={<SaveIcon />}
-          blended={true}
-          text="Saved"
-          onClick={toggleFavorite}
-        />
-      )
-    else
-      return (
-        <Button
-          leftAccessoryIcon={<SaveIcon />}
-          blended={true}
-          text="Save"
-          onClick={toggleFavorite}
-        />
-      )
+    return (
+      <Button
+        leftAccessoryIcon={<SaveIcon />}
+        className={classNames({
+          Save: true,
+          Saved: party.favorited,
+        })}
+        blended={true}
+        text={party.favorited ? 'Saved' : 'Save'}
+        onClick={toggleFavorite}
+      />
+    )
   }
 
   const image = () => {

From 6da5a4f3200baf7504086c6efd0320db5b2391a6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 21:35:08 -0800
Subject: [PATCH 62/89] Add toast on copy link

It animates in and out too
---
 components/Header/index.tsx | 99 +++++++++++++++++++++++--------------
 components/Toast/index.scss | 23 ++++++++-
 components/Toast/index.tsx  | 18 ++++---
 pages/_app.tsx              |  2 +-
 styles/globals.scss         | 27 ++++++++++
 5 files changed, 122 insertions(+), 47 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 55b49649..d2d8ed4c 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -33,6 +33,7 @@ import Link from 'next/link'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
 import AccountModal from '~components/AccountModal'
+import Toast from '~components/Toast'
 
 const Header = () => {
   // Localization
@@ -42,7 +43,7 @@ const Header = () => {
   const router = useRouter()
 
   // State management
-  const [open, setOpen] = useState(false)
+  const [copyToastOpen, setCopyToastOpen] = useState(false)
   const [leftMenuOpen, setLeftMenuOpen] = useState(false)
   const [rightMenuOpen, setRightMenuOpen] = useState(false)
 
@@ -50,6 +51,14 @@ const Header = () => {
   const { account } = useSnapshot(accountState)
   const { party } = useSnapshot(appState)
 
+  function handleCopyToastOpenChanged(open: boolean) {
+    setCopyToastOpen(open)
+  }
+
+  function handleCopyToastCloseClicked() {
+    setCopyToastOpen(false)
+  }
+
   function handleLeftMenuButtonClicked() {
     setLeftMenuOpen(!leftMenuOpen)
   }
@@ -58,10 +67,6 @@ const Header = () => {
     setRightMenuOpen(!rightMenuOpen)
   }
 
-  function onClickOutsideMenu() {
-    setOpen(false)
-  }
-
   function handleLeftMenuOpenChange(open: boolean) {
     setLeftMenuOpen(open)
   }
@@ -86,11 +91,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)
@@ -100,6 +109,9 @@ const Header = () => {
 
     // Set party to be editable
     appState.party.editable = true
+
+    // Close right menu
+    closeRightMenu()
   }
 
   function logout() {
@@ -141,7 +153,7 @@ const Header = () => {
     else console.error('Failed to unsave team: No party ID')
   }
 
-  const title = () => {
+  const pageTitle = () => {
     let title = ''
     let hasAccessory = false
 
@@ -178,22 +190,7 @@ const Header = () => {
     )
   }
 
-  const saveButton = () => {
-    return (
-      <Button
-        leftAccessoryIcon={<SaveIcon />}
-        className={classNames({
-          Save: true,
-          Saved: party.favorited,
-        })}
-        blended={true}
-        text={party.favorited ? 'Saved' : 'Save'}
-        onClick={toggleFavorite}
-      />
-    )
-  }
-
-  const image = () => {
+  const profileImage = () => {
     let image
 
     const user = accountState.account.user
@@ -214,6 +211,34 @@ const Header = () => {
     return image
   }
 
+  const urlCopyToast = () => {
+    return (
+      <Toast
+        open={copyToastOpen}
+        duration={2400}
+        type="foreground"
+        content="This party's URL was copied to your clipboard"
+        onOpenChange={handleCopyToastOpenChanged}
+        onCloseClick={handleCopyToastCloseClicked}
+      />
+    )
+  }
+
+  const saveButton = () => {
+    return (
+      <Button
+        leftAccessoryIcon={<SaveIcon />}
+        className={classNames({
+          Save: true,
+          Saved: party.favorited,
+        })}
+        blended={true}
+        text={party.favorited ? 'Saved' : 'Save'}
+        onClick={toggleFavorite}
+      />
+    )
+  }
+
   const left = () => {
     return (
       <section>
@@ -235,7 +260,7 @@ const Header = () => {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        {title()}
+        {pageTitle()}
       </section>
     )
   }
@@ -249,13 +274,6 @@ const Header = () => {
           ? saveButton()
           : ''}
 
-        {/* <Button
-          leftAccessoryIcon={<AddIcon className="Add" />}
-          blended={true}
-          text={t('buttons.new')}
-          onClick={newParty}
-        /> */}
-
         <DropdownMenu
           open={rightMenuOpen}
           onOpenChange={handleRightMenuOpenChange}
@@ -263,7 +281,7 @@ const Header = () => {
           <DropdownMenuTrigger asChild>
             <Button
               className={classNames({ Active: rightMenuOpen })}
-              leftAccessoryIcon={image()}
+              leftAccessoryIcon={profileImage()}
               rightAccessoryIcon={<ArrowIcon />}
               rightAccessoryClassName="Arrow"
               onClick={handleRightMenuButtonClicked}
@@ -340,12 +358,15 @@ const Header = () => {
       items = (
         <>
           <DropdownMenuGroup className="MenuGroup">
-            <DropdownMenuItem className="MenuItem" onClick={closeRightMenu}>
-              <Link href={`/new` || ''} passHref>
+            <DropdownMenuItem className="MenuItem">
+              <Link
+                onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}
+                href="/new"
+              >
                 New party
               </Link>
             </DropdownMenuItem>
-            <DropdownMenuItem className="MenuItem" onClick={closeRightMenu}>
+            <DropdownMenuItem className="MenuItem">
               <Link href={`/${account.user.username}` || ''} passHref>
                 Your profile
               </Link>
@@ -377,7 +398,10 @@ const Header = () => {
         <>
           <DropdownMenuGroup className="MenuGroup">
             <DropdownMenuItem className="MenuItem">
-              <Link href={`/new` || ''} passHref>
+              <Link
+                onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}
+                href="/new"
+              >
                 New party
               </Link>
             </DropdownMenuItem>
@@ -398,6 +422,7 @@ const Header = () => {
     <nav id="Header">
       {left()}
       {right()}
+      {urlCopyToast()}
     </nav>
   )
 }
diff --git a/components/Toast/index.scss b/components/Toast/index.scss
index b89923ae..17fb14c8 100644
--- a/components/Toast/index.scss
+++ b/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;
diff --git a/components/Toast/index.tsx b/components/Toast/index.tsx
index 8f85cb50..331d9d70 100644
--- a/components/Toast/index.tsx
+++ b/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}>
-      <div className="Header">
-        {title && (
+    <ToastPrimitive.Root {...toastProps} className={classes}>
+      {title && (
+        <div className="Header">
           <ToastPrimitive.Title asChild>
             <h3>{title}</h3>
           </ToastPrimitive.Title>
-        )}
-        <ToastPrimitive.Close aria-label="Close" onClick={props.onCloseClick}>
-          <span aria-hidden>×</span>
-        </ToastPrimitive.Close>
-      </div>
+          <ToastPrimitive.Close aria-label="Close" onClick={onCloseClick}>
+            <span aria-hidden>×</span>
+          </ToastPrimitive.Close>
+        </div>
+      )}
       <ToastPrimitive.Description asChild>
         <p>{content}</p>
       </ToastPrimitive.Description>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 039c0864..1bf22868 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -44,7 +44,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ThemeProvider>
-      <ToastProvider>
+      <ToastProvider swipeDirection="right">
         <Layout>
           <Component {...pageProps} />
         </Layout>
diff --git a/styles/globals.scss b/styles/globals.scss
index a0ee06fe..694c6f47 100644
--- a/styles/globals.scss
+++ b/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);

From ab928f442922b41131ed975369ecf10036cada62 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 21:59:56 -0800
Subject: [PATCH 63/89] Add modal for network errors

---
 components/Alert/index.tsx         |  6 ++++-
 components/CharacterGrid/index.tsx | 34 ++++++++++++++++++++++--
 components/SummonGrid/index.tsx    | 33 ++++++++++++++++++-----
 components/WeaponGrid/index.tsx    | 42 +++++++++++++++++++++++++-----
 public/locales/en/common.json      |  3 +++
 public/locales/ja/common.json      |  3 +++
 6 files changed, 104 insertions(+), 17 deletions(-)

diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx
index a9564424..8315495d 100644
--- a/components/Alert/index.tsx
+++ b/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>
diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index f0b59039..46c5348c 100644
--- a/components/CharacterGrid/index.tsx
+++ b/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,19 @@ const CharacterGrid = (props: Props) => {
   }
 
   // Render: JSX components
+  const errorAlert = () => {
+    console.log(axiosError?.status)
+    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 +555,7 @@ const CharacterGrid = (props: Props) => {
           })}
         </ul>
       </div>
+      {errorAlert()}
     </div>
   )
 }
diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx
index 0da1200e..e612409e 100644
--- a/components/SummonGrid/index.tsx
+++ b/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 data = error.response.data
-            if (code === 422) {
-              if (data.code === 'incompatible_summon_for_position') {
-                // setShowIncompatibleAlert(true)
-              }
+            const axiosError = error as AxiosError
+            const response = axiosError.response
+
+            if (response) {
+              setErrorAlertOpen(true)
+              setAxiosError(response)
             }
           })
     }
@@ -380,6 +385,19 @@ const SummonGrid = (props: Props) => {
   }
 
   // Render: JSX components
+  const errorAlert = () => {
+    console.log(axiosError?.status)
+    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 +478,7 @@ const SummonGrid = (props: Props) => {
       </div>
 
       {subAuraSummonElement}
+      {errorAlert()}
     </div>
   )
 }
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx
index b32b442e..06af305d 100644
--- a/components/WeaponGrid/index.tsx
+++ b/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 data = error.response.data
-            if (code === 422) {
-              if (data.code === 'incompatible_weapon_for_position') {
+            const axiosError = error as AxiosError
+            const response = axiosError.response
+
+            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,30 @@ const WeaponGrid = (props: Props) => {
         cancelAction={() => setShowIncompatibleAlert(!showIncompatibleAlert)}
         cancelActionText={t('buttons.confirm')}
         message={t('alert.incompatible_weapon')}
-      ></Alert>
+      />
     ) : (
       ''
     )
   }
 
+  const errorAlert = () => {
+    console.log(axiosError?.status)
+    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>
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 89fc5b77..1754ed94 100644
--- a/public/locales/en/common.json
+++ b/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",
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index 5faa47b8..305251b1 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -59,6 +59,9 @@
       "rarity": "レアリティ"
     }
   },
+  "errors": {
+    "unauthorized": "行ったアクションを実行する権限がありません"
+  },
   "header": {
     "anonymous": "無名",
     "untitled_team": "{{username}}さんからの無題編成",

From 6c76053e1531f4990b31be02374d5d4c9bda96c2 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 22:12:35 -0800
Subject: [PATCH 64/89] Fixed link to new party

---
 components/Header/index.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index d2d8ed4c..b5b18e18 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -158,7 +158,6 @@ const Header = () => {
     let hasAccessory = false
 
     const path = router.asPath.split('/')[1]
-    console.log(router.asPath.split('/'))
     if (path === 'p') {
       hasAccessory = true
       if (appState.party && appState.party.name) {
@@ -359,11 +358,10 @@ const Header = () => {
         <>
           <DropdownMenuGroup className="MenuGroup">
             <DropdownMenuItem className="MenuItem">
-              <Link
-                onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}
-                href="/new"
-              >
-                New party
+              <Link href="/new">
+                <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
+                  New party
+                </a>
               </Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="MenuItem">
@@ -398,11 +396,10 @@ const Header = () => {
         <>
           <DropdownMenuGroup className="MenuGroup">
             <DropdownMenuItem className="MenuItem">
-              <Link
-                onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}
-                href="/new"
-              >
-                New party
+              <Link href="/new">
+                <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
+                  New party
+                </a>
               </Link>
             </DropdownMenuItem>
           </DropdownMenuGroup>

From 1337668152eb38e5297d9dc2e64ec6f69fb89293 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 22:13:29 -0800
Subject: [PATCH 65/89] Remove console logs

---
 components/CharacterGrid/index.tsx | 1 -
 components/SummonGrid/index.tsx    | 1 -
 components/WeaponGrid/index.tsx    | 1 -
 3 files changed, 3 deletions(-)

diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index 46c5348c..944f4e85 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -499,7 +499,6 @@ const CharacterGrid = (props: Props) => {
 
   // Render: JSX components
   const errorAlert = () => {
-    console.log(axiosError?.status)
     return (
       <Alert
         open={errorAlertOpen}
diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx
index e612409e..511befcc 100644
--- a/components/SummonGrid/index.tsx
+++ b/components/SummonGrid/index.tsx
@@ -386,7 +386,6 @@ const SummonGrid = (props: Props) => {
 
   // Render: JSX components
   const errorAlert = () => {
-    console.log(axiosError?.status)
     return (
       <Alert
         open={errorAlertOpen}
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx
index 06af305d..ee73a003 100644
--- a/components/WeaponGrid/index.tsx
+++ b/components/WeaponGrid/index.tsx
@@ -383,7 +383,6 @@ const WeaponGrid = (props: Props) => {
   }
 
   const errorAlert = () => {
-    console.log(axiosError?.status)
     return (
       <Alert
         open={errorAlertOpen}

From 0901fbf21d378bfa7be7b58fe167ed0a3bcfd0f3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 22:41:43 -0800
Subject: [PATCH 66/89] Change how we handle modals

---
 components/AccountModal/index.tsx | 548 +++++++++++++++---------------
 components/Header/index.tsx       |  83 +++--
 components/LoginModal/index.tsx   |  20 +-
 components/SignupModal/index.tsx  |  18 +-
 4 files changed, 362 insertions(+), 307 deletions(-)

diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index d5337693..3cea1cca 100644
--- a/components/AccountModal/index.tsx
+++ b/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) => {
-  // Localization
-  const { t } = useTranslation('common')
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+const AccountModal = React.forwardRef<HTMLDivElement, Props>(
+  function AccountModal(props: Props, forwardedRef) {
+    // Localization
+    const { t } = useTranslation('common')
+    const router = useRouter()
+    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
-  const [mounted, setMounted] = useState(false)
-  const { theme: appTheme, setTheme: setAppTheme } = useTheme()
+    // useEffect only runs on the client, so now we can safely show the UI
+    const [mounted, setMounted] = useState(false)
+    const { theme: appTheme, setTheme: setAppTheme } = useTheme()
 
-  // Cookies
-  const accountCookie = getCookie('account')
-  const userCookie = getCookie('user')
+    // Cookies
+    const accountCookie = getCookie('account')
+    const userCookie = getCookie('user')
 
-  const cookieData = {
-    account: accountCookie ? JSON.parse(accountCookie 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,
-      },
+    const cookieData = {
+      account: accountCookie ? JSON.parse(accountCookie as string) : undefined,
+      user: userCookie ? JSON.parse(userCookie as string) : undefined,
     }
 
-    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>
-      )
+    // UI State
+    const [open, setOpen] = useState(false)
+    const [selectOpenState, setSelectOpenState] = useState<StateVariables>({
+      picture: false,
+      gender: false,
+      language: false,
+      theme: false,
     })
 
-  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}
-    >
-      {pictureOptions}
-    </SelectTableField>
-  )
+    // 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)
 
-  const genderField = () => (
-    <SelectTableField
-      name="gender"
-      description={t('modals.settings.descriptions.gender')}
-      label={t('modals.settings.labels.gender')}
-      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>
-  )
+    // Setup
+    const [pictureOpen, setPictureOpen] = useState(false)
+    const [genderOpen, setGenderOpen] = useState(false)
+    const [languageOpen, setLanguageOpen] = useState(false)
+    const [themeOpen, setThemeOpen] = useState(false)
 
-  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>
-  )
+    // Refs
+    const headerRef = React.createRef<HTMLDivElement>()
+    const footerRef = React.createRef<HTMLDivElement>()
 
-  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(() => {
+      setOpen(props.open)
+    }, [props.open])
 
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+    // UI management
+    function openChange(open: boolean) {
+      if (props.onOpenChange) props.onOpenChange(open)
+      setOpen(open)
+    }
 
-  if (!mounted) {
-    return null
-  }
+    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)
+    }
 
-  return (
-    <Dialog open={open} onOpenChange={openChange}>
-      <DialogTrigger asChild>
-        <div className="MenuItem">
-          <span>{t('menu.settings')}</span>
-        </div>
-      </DialogTrigger>
-      <DialogContent
-        className="Account"
-        headerref={headerRef}
-        footerref={footerRef}
-        onOpenAutoFocus={(event: Event) => {}}
-        onEscapeKeyDown={onEscapeKeyDown}
+    // 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) {
+        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}>
-          <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>
+        {pictureOptions}
+      </SelectTableField>
+    )
 
-        <form onSubmit={update}>
-          <div className="Fields">
-            {pictureField()}
-            {genderField()}
-            {languageField()}
-            {themeField()}
+    const genderField = () => (
+      <SelectTableField
+        name="gender"
+        description={t('modals.settings.descriptions.gender')}
+        label={t('modals.settings.labels.gender')}
+        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
-              contained={true}
-              text={t('modals.settings.buttons.confirm')}
-            />
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}
+
+          <form onSubmit={update}>
+            <div className="Fields">
+              {pictureField()}
+              {genderField()}
+              {languageField()}
+              {themeField()}
+            </div>
+            <div className="DialogFooter" ref={footerRef}>
+              <Button
+                contained={true}
+                text={t('modals.settings.buttons.confirm')}
+              />
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    )
+  }
+)
 
 export default AccountModal
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index b5b18e18..b94b7d60 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -5,22 +5,13 @@ 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 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 './index.scss'
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -29,11 +20,18 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from '~components/DropdownMenuContent'
-import Link from 'next/link'
 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 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 './index.scss'
 
 const Header = () => {
   // Localization
@@ -44,6 +42,9 @@ const Header = () => {
 
   // State management
   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)
 
@@ -82,6 +83,10 @@ const Header = () => {
     setRightMenuOpen(false)
   }
 
+  function handleSettingsOpenChanged(open: boolean) {
+    setRightMenuOpen(false)
+  }
+
   function copyToClipboard() {
     const el = document.createElement('input')
     el.value = window.location.href
@@ -238,6 +243,34 @@ const Header = () => {
     )
   }
 
+  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 (
+      <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
+    )
+  }
+
   const left = () => {
     return (
       <section>
@@ -374,16 +407,9 @@ const Header = () => {
           <DropdownMenuGroup className="MenuGroup">
             <DropdownMenuItem
               className="MenuItem"
-              onClick={closeRightMenu}
-              asChild
+              onClick={() => setSettingsModalOpen(true)}
             >
-              <AccountModal
-                username={account.user.username}
-                picture={account.user.picture}
-                gender={account.user.gender}
-                language={account.user.language}
-                theme={account.user.theme}
-              />
+              <span>{t('menu.settings')}</span>
             </DropdownMenuItem>
             <DropdownMenuItem className="MenuItem" onClick={logout}>
               <span>{t('menu.logout')}</span>
@@ -405,8 +431,18 @@ const Header = () => {
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuGroup className="MenuGroup">
-            <LoginModal />
-            <SignupModal />
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={() => setLoginModalOpen(true)}
+            >
+              <span>Log in</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={() => setSignupModalOpen(true)}
+            >
+              <span>Sign up</span>
+            </DropdownMenuItem>
           </DropdownMenuGroup>
         </>
       )
@@ -420,6 +456,9 @@ const Header = () => {
       {left()}
       {right()}
       {urlCopyToast()}
+      {settingsModal()}
+      {loginModal()}
+      {signupModal()}
     </nav>
   )
 }
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index e2910acf..f42e1ed3 100644
--- a/components/LoginModal/index.tsx
+++ b/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>
-        <div className="MenuItem">
-          <span>{t('menu.login')}</span>
-        </div>
-      </DialogTrigger>
       <DialogContent
         className="Login"
         footerref={footerRef}
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index 34f681cd..c67bb12e 100644
--- a/components/SignupModal/index.tsx
+++ b/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>
-        <div className="MenuItem">
-          <span>{t('menu.signup')}</span>
-        </div>
-      </DialogTrigger>
       <DialogContent
         className="Signup"
         footerref={footerRef}

From 49c463d402a9a7925f78a0bb1d555730d9b8e2c6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 22:51:45 -0800
Subject: [PATCH 67/89] Add Remix icon and button

---
 components/Header/index.tsx | 17 +++++++++++++++--
 public/icons/Remix.svg      |  4 ++++
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 public/icons/Remix.svg

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index b94b7d60..b0523281 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -26,9 +26,10 @@ import AccountModal from '~components/AccountModal'
 import Toast from '~components/Toast'
 import Button from '~components/Button'
 
+import ArrowIcon from '~public/icons/Arrow.svg'
 import LinkIcon from '~public/icons/Link.svg'
 import MenuIcon from '~public/icons/Menu.svg'
-import ArrowIcon from '~public/icons/Arrow.svg'
+import RemixIcon from '~public/icons/Remix.svg'
 import SaveIcon from '~public/icons/Save.svg'
 
 import './index.scss'
@@ -243,6 +244,18 @@ const Header = () => {
     )
   }
 
+  const remixButton = () => {
+    return (
+      <Button
+        leftAccessoryIcon={<RemixIcon />}
+        className="Remix"
+        blended={true}
+        text="Remix"
+        onClick={toggleFavorite}
+      />
+    )
+  }
+
   const settingsModal = () => {
     const user = accountState.account.user
 
@@ -305,7 +318,7 @@ const Header = () => {
         (!party.user || party.user.id !== account.user.id)
           ? saveButton()
           : ''}
-
+        {remixButton()}
         <DropdownMenu
           open={rightMenuOpen}
           onOpenChange={handleRightMenuOpenChange}
diff --git a/public/icons/Remix.svg b/public/icons/Remix.svg
new file mode 100644
index 00000000..041fd277
--- /dev/null
+++ b/public/icons/Remix.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.50019 2.00047C5.18025 2.00132 4.83617 2.00371 4.51209 2.01042C3.93815 2.0223 3.42693 2.04775 3.22357 2.10224C2.1883 2.37964 1.37965 3.18828 1.10225 4.22356C1.04775 4.42694 1.02231 4.93829 1.01043 5.51233C1.00003 6.01504 1.00003 6.56583 1.00003 7.00001C1.00003 7.43419 1.00003 7.98498 1.01043 8.48769C1.02231 9.06174 1.04775 9.57308 1.10225 9.77647C1.36232 10.747 2.08929 11.5184 3.03219 11.8396C3.09505 11.861 3.15887 11.8805 3.22357 11.8978C3.42692 11.9523 3.9381 11.9777 4.51201 11.9896C4.7811 11.9952 5.06399 11.9978 5.33539 11.999L4.73226 12.6021C4.537 12.7974 4.537 13.1139 4.73226 13.3092C4.92752 13.5045 5.24411 13.5045 5.43937 13.3092L6.85358 11.895C6.95385 11.7947 7.00263 11.6625 6.99992 11.5311C7.00263 11.3997 6.95385 11.2674 6.85358 11.1672L5.43937 9.75295C5.24411 9.55769 4.92752 9.55769 4.73226 9.75295C4.537 9.94822 4.537 10.2648 4.73226 10.4601L5.27027 10.9981C5.01654 10.9966 4.7638 10.994 4.53092 10.9898C4.01686 10.9805 3.59961 10.9633 3.48239 10.9319C2.83534 10.7585 2.32109 10.2738 2.10695 9.64524C2.09268 9.60333 2.07974 9.56079 2.06818 9.51765C2.03675 9.40038 2.01952 8.98285 2.01025 8.4685C2.00195 8.00794 2.00003 7.46976 2.00003 7.00001C2.00003 6.53027 2.00195 5.99208 2.01025 5.53152C2.01952 5.01718 2.03676 4.59965 2.06818 4.48238C2.25311 3.79219 2.79221 3.2531 3.48239 3.06816C3.59963 3.03675 4.01694 3.01951 4.53106 3.01024C4.83429 3.00477 5.17118 3.00206 5.50006 3.00086C5.7762 2.99984 6.00003 2.77615 6.00003 2.50001C6.00003 2.22386 5.77633 1.99974 5.50019 2.00047Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7765 11.8999C10.462 11.9842 9.40436 11.9981 8.52156 12.0003L8.4928 12.0004L8.48903 12.0004C8.21325 12.001 7.98986 11.7772 7.98986 11.5015C7.98986 11.2265 8.21208 11.0036 8.48675 11.0013L8.48916 11.0013L8.51572 11.0012C9.39725 10.9977 10.333 10.9834 10.5176 10.934C11.2078 10.749 11.7469 10.2099 11.9319 9.51976C11.9633 9.40248 11.9805 8.98495 11.9898 8.47061C11.9981 8.01005 12 7.47186 12 7.00212C12 6.53237 11.9981 5.99419 11.9898 5.53363C11.9805 5.01928 11.9633 4.60175 11.9319 4.48448C11.9203 4.44134 11.9074 4.3988 11.8931 4.35689C11.6789 3.72829 11.1647 3.24364 10.5176 3.07026C10.4004 3.03886 9.98317 3.02162 9.46911 3.01235C9.23664 3.00815 8.98438 3.00559 8.7311 3.00407L9.26777 3.54074C9.46303 3.736 9.46303 4.05258 9.26777 4.24784C9.0725 4.44311 8.75592 4.44311 8.56066 4.24784L7.14645 2.83363C7.04618 2.73336 6.9974 2.60111 7.00011 2.46972C6.9974 2.33833 7.04618 2.20607 7.14645 2.1058L8.56066 0.69159C8.75592 0.496328 9.0725 0.496328 9.26777 0.69159C9.46303 0.886852 9.46303 1.20343 9.26777 1.3987L8.66331 2.00316C8.93512 2.00436 9.21849 2.00695 9.48802 2.01253C10.0619 2.02441 10.5731 2.04985 10.7765 2.10434C10.8412 2.12168 10.905 2.14109 10.9678 2.1625C11.9107 2.48371 12.6377 3.25509 12.8978 4.22566C12.9523 4.42905 12.9777 4.94039 12.9896 5.51444C13 6.01715 13 6.56794 13 7.00212C13 7.43629 13 7.98709 12.9896 8.48979C12.9777 9.06384 12.9523 9.57519 12.8978 9.77857C12.6204 10.8139 11.8117 11.6225 10.7765 11.8999Z"/>
+</svg>

From f68785fa3a34a32f289307e361e5dd6271177355 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 23:08:46 -0800
Subject: [PATCH 68/89] Add shortcode to party state object

---
 components/Party/index.tsx | 1 +
 utils/appState.tsx         | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index f3fb8249..4cf40ba7 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -150,6 +150,7 @@ const Party = (props: Props) => {
     appState.party.accessory = team.accessory
 
     appState.party.id = team.id
+    appState.party.shortcode = team.shortcode
     appState.party.extra = team.extra
     appState.party.user = team.user
     appState.party.favorited = team.favorited
diff --git a/utils/appState.tsx b/utils/appState.tsx
index 61380ddd..4caac7f1 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -36,6 +36,7 @@ interface AppState {
 
   party: {
     id: string | undefined
+    shortcode: string | undefined
     editable: boolean
     detailsVisible: boolean
     name: string | undefined
@@ -87,6 +88,7 @@ interface AppState {
 export const initialAppState: AppState = {
   party: {
     id: undefined,
+    shortcode: '',
     editable: false,
     detailsVisible: false,
     name: undefined,

From f450c87e4283a28410a9468ad4c47a4453900764 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 23:08:53 -0800
Subject: [PATCH 69/89] Add remix endpoint

---
 utils/api.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/utils/api.tsx b/utils/api.tsx
index d6625940..3912b61e 100644
--- a/utils/api.tsx
+++ b/utils/api.tsx
@@ -120,6 +120,11 @@ class Api {
     return axios.get(resourceUrl, params)
   }
 
+  remix(shortcode: string, params?: {}) {
+    const resourceUrl = `${this.url}/parties/${shortcode}/remix`
+    return axios.post(resourceUrl, params)
+  }
+
   savedTeams(params: {}) {
     const resourceUrl = `${this.url}/parties/favorites`
     return axios.get(resourceUrl, params)

From c224184deeb33ca00ee9597627206ce326962c9f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 23:11:25 -0800
Subject: [PATCH 70/89] Fix how we handle state

- New route will reset state instead of it happening when the "New" button is clicked
- Added key to <React.Fragment> in party and new pages to force it to rerun getServerSideProps
---
 components/Header/index.tsx | 15 +--------------
 pages/new/index.tsx         | 19 +++++++++++++++++--
 pages/p/[party].tsx         |  2 +-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index b0523281..c7d65516 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -9,7 +9,7 @@ import Link from 'next/link'
 
 import api from '~utils/api'
 import { accountState, initialAccountState } from '~utils/accountState'
-import { appState, initialAppState } from '~utils/appState'
+import { appState } from '~utils/appState'
 import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
 
 import {
@@ -84,10 +84,6 @@ const Header = () => {
     setRightMenuOpen(false)
   }
 
-  function handleSettingsOpenChanged(open: boolean) {
-    setRightMenuOpen(false)
-  }
-
   function copyToClipboard() {
     const el = document.createElement('input')
     el.value = window.location.href
@@ -107,15 +103,6 @@ const Header = () => {
     // Push the root URL
     router.push(path)
 
-    // Clean state
-    const resetState = clonedeep(initialAppState)
-    Object.keys(resetState).forEach((key) => {
-      appState[key] = resetState[key]
-    })
-
-    // Set party to be editable
-    appState.party.editable = true
-
     // Close right menu
     closeRightMenu()
   }
diff --git a/pages/new/index.tsx b/pages/new/index.tsx
index 650448bb..b3c2c225 100644
--- a/pages/new/index.tsx
+++ b/pages/new/index.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react'
+import { useRouter } from 'next/router'
 import Head from 'next/head'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import clonedeep from 'lodash.clonedeep'
 
 import Party from '~components/Party'
 
@@ -9,7 +11,7 @@ import api from '~utils/api'
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import organizeRaids from '~utils/organizeRaids'
 import setUserToken from '~utils/setUserToken'
-import { appState } from '~utils/appState'
+import { appState, initialAppState } from '~utils/appState'
 import { groupWeaponKeys } from '~utils/groupWeaponKeys'
 import { printError } from '~utils/reportError'
 
@@ -29,6 +31,9 @@ const NewRoute: React.FC<Props> = (props: Props) => {
   // Import translations
   const { t } = useTranslation('common')
 
+  // Set up router
+  const router = useRouter()
+
   function callback(path: string) {
     // This is scuffed, how do we do this natively?
     window.history.replaceState(null, `Grid Tool`, `${path}`)
@@ -38,6 +43,16 @@ const NewRoute: React.FC<Props> = (props: Props) => {
     persistStaticData()
   }, [persistStaticData])
 
+  useEffect(() => {
+    // Clean state
+    const resetState = clonedeep(initialAppState)
+    Object.keys(resetState).forEach((key) => {
+      appState[key] = resetState[key]
+    })
+    // Set party to be editable
+    appState.party.editable = true
+  }, [])
+
   function persistStaticData() {
     appState.raids = props.raids
     appState.jobs = props.jobs
@@ -47,7 +62,7 @@ const NewRoute: React.FC<Props> = (props: Props) => {
   }
 
   return (
-    <React.Fragment>
+    <React.Fragment key={router.asPath}>
       <Head>
         {/* HTML */}
         <title>{t('page.titles.new')}</title>
diff --git a/pages/p/[party].tsx b/pages/p/[party].tsx
index 8ae2af4a..b7e16f22 100644
--- a/pages/p/[party].tsx
+++ b/pages/p/[party].tsx
@@ -70,7 +70,7 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
   }
 
   return (
-    <React.Fragment>
+    <React.Fragment key={router.asPath}>
       <Party
         team={props.party}
         raids={props.sortedRaids}

From f2a1d80bf210e50254cc8b6e9ccca8b381cd55ea Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 23:11:33 -0800
Subject: [PATCH 71/89] Add Remix button

---
 components/Header/index.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index c7d65516..e99a9b70 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -146,6 +146,14 @@ const Header = () => {
     else console.error('Failed to unsave team: No party ID')
   }
 
+  function remixTeam() {
+    if (party.shortcode)
+      api.remix(party.shortcode).then((response) => {
+        const remix = response.data.party
+        router.push(`/p/${remix.shortcode}`)
+      })
+  }
+
   const pageTitle = () => {
     let title = ''
     let hasAccessory = false
@@ -238,7 +246,7 @@ const Header = () => {
         className="Remix"
         blended={true}
         text="Remix"
-        onClick={toggleFavorite}
+        onClick={remixTeam}
       />
     )
   }
@@ -305,7 +313,7 @@ const Header = () => {
         (!party.user || party.user.id !== account.user.id)
           ? saveButton()
           : ''}
-        {remixButton()}
+        {router.route === '/p/[party]' ? remixButton() : ''}
         <DropdownMenu
           open={rightMenuOpen}
           onOpenChange={handleRightMenuOpenChange}

From 52875ebb1eb216992d5adc45758bb5eadbbba94c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 23:19:32 -0800
Subject: [PATCH 72/89] Fix colors of context menu text

---
 styles/variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/variables.scss b/styles/variables.scss
index 91aa81e1..4190fa4f 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -153,8 +153,8 @@ $dialog--bg--dark: $grey-25;
 // Color Definitions: Menu
 $menu--bg--light: $grey-100;
 $menu--bg--dark: $grey-10;
-$menu--text--light: $grey-90;
-$menu--text--dark: $grey-50;
+$menu--text--light: $grey-50;
+$menu--text--dark: $grey-60;
 $menu--separator--light: $grey-90;
 $menu--separator--dark: $grey-05;
 $menu--item--bg--light--hover: $grey-85;

From 534d608171281c29be238ae12797f4a4dcf289f2 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 23:44:41 -0800
Subject: [PATCH 73/89] Add localizations

---
 components/Header/index.tsx   | 6 +++---
 public/locales/en/common.json | 7 +++++++
 public/locales/ja/common.json | 7 +++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index e99a9b70..8fec3c27 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -217,7 +217,7 @@ const Header = () => {
         open={copyToastOpen}
         duration={2400}
         type="foreground"
-        content="This party's URL was copied to your clipboard"
+        content={t('toasts.copied')}
         onOpenChange={handleCopyToastOpenChanged}
         onCloseClick={handleCopyToastCloseClicked}
       />
@@ -233,7 +233,7 @@ const Header = () => {
           Saved: party.favorited,
         })}
         blended={true}
-        text={party.favorited ? 'Saved' : 'Save'}
+        text={party.favorited ? t('buttons.saved') : t('buttons.save')}
         onClick={toggleFavorite}
       />
     )
@@ -245,7 +245,7 @@ const Header = () => {
         leftAccessoryIcon={<RemixIcon />}
         className="Remix"
         blended={true}
-        text="Remix"
+        text={t('buttons.remix')}
         onClick={remixTeam}
       />
     )
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 1754ed94..1d9f394a 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -39,6 +39,9 @@
     "show_info": "Edit info",
     "hide_info": "Hide info",
     "save_info": "Save info",
+    "remix": "Remix",
+    "save": "Save",
+    "saved": "Saved",
     "menu": "Menu",
     "new": "New",
     "wiki": "View more on gbf.wiki"
@@ -384,6 +387,9 @@
       "no_skill": "No skill"
     }
   },
+  "toasts": {
+    "copied": "This party's URL was copied to your clipboard"
+  },
   "extra_weapons": "Additional Weapons",
   "equipped": "Equipped",
   "coming_soon": "Coming Soon",
@@ -394,5 +400,6 @@
   "no_user": "Anonymous",
   "no_job": "No class",
   "no_value": "No value",
+  "remixes": "Remixes",
   "level": "Level"
 }
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index 305251b1..a76a1e08 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -39,6 +39,9 @@
     "show_info": "詳細を編集",
     "save_info": "詳細を保存",
     "hide_info": "詳細を非表示",
+    "remix": "リミックス",
+    "save": "保存する",
+    "saved": "保存",
     "menu": "メニュー",
     "new": "作成",
     "wiki": "gbf.wikiで詳しく見る"
@@ -385,6 +388,9 @@
       "no_skill": "設定されていません"
     }
   },
+  "toasts": {
+    "copied": "この編成のURLはクリップボードにコピーされました"
+  },
   "equipped": "装備した",
   "extra_weapons": "Additional Weapons",
   "coming_soon": "開発中",
@@ -395,5 +401,6 @@
   "no_user": "無名",
   "no_job": "ジョブなし",
   "no_value": "値なし",
+  "remixes": "リミックスされた編成",
   "level": "レベル"
 }

From 0b3861e03e8f93c8a0ae97d001f785e694c854dc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 27 Jan 2023 23:47:31 -0800
Subject: [PATCH 74/89] Update Party type and state

---
 components/Party/index.tsx | 2 ++
 types/Party.d.ts           | 2 ++
 utils/appState.tsx         | 4 ++++
 3 files changed, 8 insertions(+)

diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 4cf40ba7..1b0c063e 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -154,6 +154,8 @@ const Party = (props: Props) => {
     appState.party.extra = team.extra
     appState.party.user = team.user
     appState.party.favorited = team.favorited
+    appState.party.remix = team.remix
+    appState.party.remixes = team.remixes
     appState.party.created_at = team.created_at
     appState.party.updated_at = team.updated_at
 
diff --git a/types/Party.d.ts b/types/Party.d.ts
index 536d01e5..d3ac6f29 100644
--- a/types/Party.d.ts
+++ b/types/Party.d.ts
@@ -28,6 +28,8 @@ interface Party {
   weapons: Array<GridWeapon>
   summons: Array<GridSummon>
   user: User
+  remix: boolean
+  remixes: Party[]
   created_at: string
   updated_at: string
 }
diff --git a/utils/appState.tsx b/utils/appState.tsx
index 4caac7f1..59c5c2cb 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -56,6 +56,8 @@ interface AppState {
     extra: boolean
     user: User | undefined
     favorited: boolean
+    remix: boolean
+    remixes: Party[]
     created_at: string
     updated_at: string
   }
@@ -113,6 +115,8 @@ export const initialAppState: AppState = {
     extra: false,
     user: undefined,
     favorited: false,
+    remix: false,
+    remixes: [],
     created_at: '',
     updated_at: '',
   },

From 522be622ab1ac6b2089cf6384443a76f992e86d3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:01:30 -0800
Subject: [PATCH 75/89] Display remixes on parties

---
 components/PartyDetails/index.scss | 22 +++++++-
 components/PartyDetails/index.tsx  | 83 +++++++++++++++++++++++++++++-
 2 files changed, 102 insertions(+), 3 deletions(-)

diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss
index e9df8d65..afb68168 100644
--- a/components/PartyDetails/index.scss
+++ b/components/PartyDetails/index.scss
@@ -3,6 +3,7 @@
   flex-direction: column;
   margin: $unit-4x auto 0 auto;
   max-width: $grid-width;
+  padding-bottom: $unit-12x;
 
   @include breakpoint(phone) {
     padding: 0 $unit;
@@ -10,13 +11,13 @@
 
   .PartyDetails {
     display: none;
-    margin: 0 auto;
+    margin: 0 auto $unit-2x;
     max-width: $unit * 94;
     overflow: hidden;
     width: 100%;
 
     &.Visible {
-      margin-bottom: $unit-12x;
+      // margin-bottom: $unit-12x;
     }
 
     &.Editable {
@@ -332,4 +333,21 @@
       }
     }
   }
+
+  .Remixes {
+    display: flex;
+    flex-direction: column;
+    gap: $unit-2x;
+
+    h3 {
+      font-size: $font-medium;
+      font-weight: $medium;
+    }
+
+    .GridRepCollection {
+      gap: $unit-2x;
+      margin-left: $unit-2x * -1;
+      margin-right: $unit-2x * -1;
+    }
+  }
 }
diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index ee5927d9..b5c92081 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
+import clonedeep from 'lodash.clonedeep'
 
 import Linkify from 'react-linkify'
 import LiteYouTubeEmbed from 'react-lite-youtube-embed'
@@ -16,7 +17,8 @@ import CharLimitedFieldset from '~components/CharLimitedFieldset'
 import Input from '~components/Input'
 import DurationInput from '~components/DurationInput'
 import Token from '~components/Token'
-
+import GridRepCollection from '~components/GridRepCollection'
+import GridRep from '~components/GridRep'
 import RaidDropdown from '~components/RaidDropdown'
 import TextFieldset from '~components/TextFieldset'
 import Switch from '~components/Switch'
@@ -33,6 +35,7 @@ import EditIcon from '~public/icons/Edit.svg'
 import type { DetailsObject } from 'types'
 
 import './index.scss'
+import api from '~utils/api'
 
 // Props
 interface Props {
@@ -69,6 +72,8 @@ const PartyDetails = (props: Props) => {
   const [turnCount, setTurnCount] = useState<number | undefined>(undefined)
   const [clearTime, setClearTime] = useState(0)
 
+  const [remixes, setRemixes] = useState<Party[]>([])
+
   const [raidSlug, setRaidSlug] = useState('')
   const [embeddedDescription, setEmbeddedDescription] =
     useState<React.ReactNode>()
@@ -111,6 +116,7 @@ const PartyDetails = (props: Props) => {
       setFullAuto(props.party.full_auto)
       setChargeAttack(props.party.charge_attack)
       setClearTime(props.party.clear_time)
+      setRemixes(props.party.remixes)
       if (props.party.turn_count) setTurnCount(props.party.turn_count)
       if (props.party.button_count) setButtonCount(props.party.button_count)
       if (props.party.chain_count) setChainCount(props.party.chain_count)
@@ -300,6 +306,49 @@ const PartyDetails = (props: Props) => {
     props.deleteCallback()
   }
 
+  // Methods: Navigation
+  function goTo(shortcode: string) {
+    router.push(`/p/${shortcode}`)
+  }
+
+  // Methods: Favorites
+  function toggleFavorite(teamId: string, favorited: boolean) {
+    if (favorited) unsaveFavorite(teamId)
+    else saveFavorite(teamId)
+  }
+
+  function saveFavorite(teamId: string) {
+    api.saveTeam({ id: teamId }).then((response) => {
+      if (response.status == 201) {
+        const index = remixes.findIndex((p) => p.id === teamId)
+        const party = remixes[index]
+
+        party.favorited = true
+
+        let clonedParties = clonedeep(remixes)
+        clonedParties[index] = party
+
+        setRemixes(clonedParties)
+      }
+    })
+  }
+
+  function unsaveFavorite(teamId: string) {
+    api.unsaveTeam({ id: teamId }).then((response) => {
+      if (response.status == 200) {
+        const index = remixes.findIndex((p) => p.id === teamId)
+        const party = remixes[index]
+
+        party.favorited = false
+
+        let clonedParties = clonedeep(remixes)
+        clonedParties[index] = party
+
+        setRemixes(clonedParties)
+      }
+    })
+  }
+
   function extractYoutubeVideoIds(text: string) {
     // Initialize an array to store the video IDs
     const videoIds = []
@@ -388,6 +437,28 @@ const PartyDetails = (props: Props) => {
     )
   }
 
+  function renderRemixes() {
+    return remixes.map((party, i) => {
+      return (
+        <GridRep
+          id={party.id}
+          shortcode={party.shortcode}
+          name={party.name}
+          createdAt={new Date(party.created_at)}
+          raid={party.raid}
+          grid={party.weapons}
+          user={party.user}
+          favorited={party.favorited}
+          fullAuto={party.full_auto}
+          key={`party-${i}`}
+          displayUser={true}
+          onClick={goTo}
+          onSave={toggleFavorite}
+        />
+      )
+    })
+  }
+
   const deleteAlert = () => {
     if (party.editable) {
       return (
@@ -620,6 +691,15 @@ const PartyDetails = (props: Props) => {
     </section>
   )
 
+  const remixSection = () => {
+    return (
+      <section className="Remixes">
+        <h3>Remixes</h3>
+        {<GridRepCollection>{renderRemixes()}</GridRepCollection>}
+      </section>
+    )
+  }
+
   return (
     <section className="DetailsWrapper">
       <div className="PartyInfo">
@@ -654,6 +734,7 @@ const PartyDetails = (props: Props) => {
       </div>
       {readOnly}
       {editable}
+      {remixes.length > 0 ? remixSection() : ''}
       {deleteAlert()}
     </section>
   )

From 86b48f52c186e3f9c5d62c7cc5d01650ef6e3d4f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:26:23 -0800
Subject: [PATCH 76/89] Add source party to Party definition

---
 components/Party/index.tsx | 1 +
 types/Party.d.ts           | 1 +
 utils/appState.tsx         | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 1b0c063e..f9f2196b 100644
--- a/components/Party/index.tsx
+++ b/components/Party/index.tsx
@@ -156,6 +156,7 @@ const Party = (props: Props) => {
     appState.party.favorited = team.favorited
     appState.party.remix = team.remix
     appState.party.remixes = team.remixes
+    appState.party.sourceParty = team.source_party
     appState.party.created_at = team.created_at
     appState.party.updated_at = team.updated_at
 
diff --git a/types/Party.d.ts b/types/Party.d.ts
index d3ac6f29..eebea134 100644
--- a/types/Party.d.ts
+++ b/types/Party.d.ts
@@ -18,6 +18,7 @@ interface Party {
   button_count?: number
   turn_count?: number
   chain_count?: number
+  source_party?: Party
   job: Job
   job_skills: JobSkillObject
   accessory: JobAccessory
diff --git a/utils/appState.tsx b/utils/appState.tsx
index 59c5c2cb..816ba19a 100644
--- a/utils/appState.tsx
+++ b/utils/appState.tsx
@@ -58,6 +58,7 @@ interface AppState {
     favorited: boolean
     remix: boolean
     remixes: Party[]
+    sourceParty?: Party
     created_at: string
     updated_at: string
   }
@@ -117,6 +118,7 @@ export const initialAppState: AppState = {
     favorited: false,
     remix: false,
     remixes: [],
+    sourceParty: undefined,
     created_at: '',
     updated_at: '',
   },

From 9a6e333e9e99ff72217e3d5bcd4279b280193426 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:26:30 -0800
Subject: [PATCH 77/89] Add link back to source party

---
 components/Button/index.scss       |  9 +++++++++
 components/PartyDetails/index.scss | 20 +++++++++++++-------
 components/PartyDetails/index.tsx  | 19 +++++++++++++++++--
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/components/Button/index.scss b/components/Button/index.scss
index 585fb876..994bb041 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -31,6 +31,15 @@
     background: transparent;
   }
 
+  &.IconButton.medium {
+    height: inherit;
+    padding: $unit-half;
+
+    &:hover {
+      background: none;
+    }
+  }
+
   &.Contained {
     background: var(--button-contained-bg);
 
diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss
index afb68168..dfd69bcc 100644
--- a/components/PartyDetails/index.scss
+++ b/components/PartyDetails/index.scss
@@ -270,15 +270,21 @@
     .Left {
       flex-grow: 1;
 
-      h1 {
-        font-size: $font-xlarge;
-        font-weight: $normal;
-        text-align: left;
+      .Header {
+        align-items: center;
+        display: flex;
+        gap: $unit;
         margin-bottom: $unit;
-        color: var(--text-primary);
 
-        &.empty {
-          color: var(--text-secondary);
+        h1 {
+          font-size: $font-xlarge;
+          font-weight: $normal;
+          text-align: left;
+          color: var(--text-primary);
+
+          &.empty {
+            color: var(--text-secondary);
+          }
         }
       }
 
diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index b5c92081..ab961978 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -31,6 +31,7 @@ import { youtube } from '~utils/youtube'
 import CheckIcon from '~public/icons/Check.svg'
 import CrossIcon from '~public/icons/Cross.svg'
 import EditIcon from '~public/icons/Edit.svg'
+import RemixIcon from '~public/icons/Remix.svg'
 
 import type { DetailsObject } from 'types'
 
@@ -694,7 +695,7 @@ const PartyDetails = (props: Props) => {
   const remixSection = () => {
     return (
       <section className="Remixes">
-        <h3>Remixes</h3>
+        <h3>{t('remixes')}</h3>
         {<GridRepCollection>{renderRemixes()}</GridRepCollection>}
       </section>
     )
@@ -704,7 +705,21 @@ const PartyDetails = (props: Props) => {
     <section className="DetailsWrapper">
       <div className="PartyInfo">
         <div className="Left">
-          <h1 className={name ? '' : 'empty'}>{name ? name : t('no_title')}</h1>
+          <div className="Header">
+            <h1 className={name ? '' : 'empty'}>
+              {name ? name : t('no_title')}
+            </h1>
+            {party.remix && party.sourceParty ? (
+              <Link href={`/p/${party.sourceParty.shortcode}`} passHref>
+                <Button
+                  className="IconButton Blended"
+                  leftAccessoryIcon={<RemixIcon />}
+                />
+              </Link>
+            ) : (
+              ''
+            )}
+          </div>
           <div className="attribution">
             {renderUserBlock()}
             {party.raid ? linkedRaidBlock(party.raid) : ''}

From 9812f09f57dbab7f6be137d874bc6a097e55807b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:44:34 -0800
Subject: [PATCH 78/89] Add Radix tooltip dependency

---
 package-lock.json | 87 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 88 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index c7f624c5..754af5dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-switch": "^1.0.1",
         "@radix-ui/react-toast": "^1.1.2",
         "@radix-ui/react-toggle-group": "^1.0.1",
+        "@radix-ui/react-tooltip": "^1.0.3",
         "@svgr/webpack": "^6.2.0",
         "axios": "^0.25.0",
         "classnames": "^2.3.1",
@@ -2623,6 +2624,52 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.3.tgz",
+      "integrity": "sha512-cmc9qV4KpgqdXVTn1K8KN8MnuSXvw+E719pKwyvpCGrQ+0AA2qTjcIL3uxCj4jc4k3sDR36RF7R3H7N5hPybBQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.2",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-popper": "1.1.0",
+        "@radix-ui/react-portal": "1.0.1",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-slot": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-visually-hidden": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+      "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "0.7.2",
+        "@radix-ui/react-arrow": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-rect": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0",
+        "@radix-ui/rect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
@@ -9156,6 +9203,46 @@
         "@radix-ui/react-use-controllable-state": "1.0.0"
       }
     },
+    "@radix-ui/react-tooltip": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.3.tgz",
+      "integrity": "sha512-cmc9qV4KpgqdXVTn1K8KN8MnuSXvw+E719pKwyvpCGrQ+0AA2qTjcIL3uxCj4jc4k3sDR36RF7R3H7N5hPybBQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.2",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-popper": "1.1.0",
+        "@radix-ui/react-portal": "1.0.1",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-slot": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-visually-hidden": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/react-popper": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+          "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "0.7.2",
+            "@radix-ui/react-arrow": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.1",
+            "@radix-ui/react-use-callback-ref": "1.0.0",
+            "@radix-ui/react-use-layout-effect": "1.0.0",
+            "@radix-ui/react-use-rect": "1.0.0",
+            "@radix-ui/react-use-size": "1.0.0",
+            "@radix-ui/rect": "1.0.0"
+          }
+        }
+      }
+    },
     "@radix-ui/react-use-callback-ref": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
diff --git a/package.json b/package.json
index 2f33a3b2..ac4d8332 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.3",
     "@svgr/webpack": "^6.2.0",
     "axios": "^0.25.0",
     "classnames": "^2.3.1",

From 0613f75c7f3121a47d7223dbcc54d64a6d657f2b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:44:43 -0800
Subject: [PATCH 79/89] Add TooltipProvider

---
 pages/_app.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1bf22868..498851d9 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,6 +11,7 @@ import setUserToken from '~utils/setUserToken'
 
 import '../styles/globals.scss'
 import { ToastProvider, Viewport } from '@radix-ui/react-toast'
+import { TooltipProvider } from '@radix-ui/react-tooltip'
 
 function MyApp({ Component, pageProps }: AppProps) {
   const accountCookie = getCookie('account')
@@ -45,10 +46,12 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider>
       <ToastProvider swipeDirection="right">
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-        <Viewport className="ToastViewport" />
+        <TooltipProvider>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+          <Viewport className="ToastViewport" />
+        </TooltipProvider>
       </ToastProvider>
     </ThemeProvider>
   )

From 21726472829110c683f1e1a56fbc8d7bb28c1009 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:44:51 -0800
Subject: [PATCH 80/89] Add generic Tooltip component

---
 components/Tooltip/index.scss |  5 +++++
 components/Tooltip/index.tsx  | 39 +++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 components/Tooltip/index.scss
 create mode 100644 components/Tooltip/index.tsx

diff --git a/components/Tooltip/index.scss b/components/Tooltip/index.scss
new file mode 100644
index 00000000..33218a12
--- /dev/null
+++ b/components/Tooltip/index.scss
@@ -0,0 +1,5 @@
+.Tooltip {
+  background: var(--dialog-bg);
+  border-radius: $card-corner;
+  padding: $unit * 1.5;
+}
diff --git a/components/Tooltip/index.tsx b/components/Tooltip/index.tsx
new file mode 100644
index 00000000..a894886c
--- /dev/null
+++ b/components/Tooltip/index.tsx
@@ -0,0 +1,39 @@
+import React, { PropsWithChildren } from 'react'
+import classNames from 'classnames'
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import './index.scss'
+interface Props extends TooltipPrimitive.TooltipContentProps {
+  content: React.ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export default function Tooltip({
+  children,
+  content,
+  open,
+  onOpenChange,
+  ...props
+}: PropsWithChildren<Props>) {
+  const classes = classNames(props.className, {
+    Tooltip: true,
+  })
+
+  return (
+    <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Content
+        side="top"
+        align="center"
+        className={classes}
+        sideOffset={4}
+        {...props}
+      >
+        {content}
+        {/* <TooltipPrimitive.Arrow width={11} height={5} /> */}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Root>
+  )
+}

From ea8fd7a423f3af93456758f10f261f855f3c9401 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:45:02 -0800
Subject: [PATCH 81/89] Add tooltip over remix icon

---
 components/PartyDetails/index.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index ab961978..dbee72c4 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -11,18 +11,19 @@ import classNames from 'classnames'
 import reactStringReplace from 'react-string-replace'
 
 import Alert from '~components/Alert'
-
 import Button from '~components/Button'
 import CharLimitedFieldset from '~components/CharLimitedFieldset'
-import Input from '~components/Input'
 import DurationInput from '~components/DurationInput'
-import Token from '~components/Token'
 import GridRepCollection from '~components/GridRepCollection'
 import GridRep from '~components/GridRep'
+import Input from '~components/Input'
 import RaidDropdown from '~components/RaidDropdown'
-import TextFieldset from '~components/TextFieldset'
 import Switch from '~components/Switch'
+import Tooltip from '~components/Tooltip'
+import TextFieldset from '~components/TextFieldset'
+import Token from '~components/Token'
 
+import api from '~utils/api'
 import { accountState } from '~utils/accountState'
 import { appState } from '~utils/appState'
 import { formatTimeAgo } from '~utils/timeAgo'
@@ -36,7 +37,6 @@ import RemixIcon from '~public/icons/Remix.svg'
 import type { DetailsObject } from 'types'
 
 import './index.scss'
-import api from '~utils/api'
 
 // Props
 interface Props {
@@ -308,8 +308,8 @@ const PartyDetails = (props: Props) => {
   }
 
   // Methods: Navigation
-  function goTo(shortcode: string) {
-    router.push(`/p/${shortcode}`)
+  function goTo(shortcode?: string) {
+    if (shortcode) router.push(`/p/${shortcode}`)
   }
 
   // Methods: Favorites
@@ -710,12 +710,13 @@ const PartyDetails = (props: Props) => {
               {name ? name : t('no_title')}
             </h1>
             {party.remix && party.sourceParty ? (
-              <Link href={`/p/${party.sourceParty.shortcode}`} passHref>
+              <Tooltip content="Go to original team">
                 <Button
                   className="IconButton Blended"
                   leftAccessoryIcon={<RemixIcon />}
+                  onClick={() => goTo(party.sourceParty?.shortcode)}
                 />
-              </Link>
+              </Tooltip>
             ) : (
               ''
             )}

From 3d71ad1d8b66efc56ad96db999e8498dd817836e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:51:32 -0800
Subject: [PATCH 82/89] Add localizations

---
 components/Header/index.tsx       | 39 +++++++++++++++++--------------
 components/PartyDetails/index.tsx |  2 +-
 components/Tooltip/index.scss     |  3 +++
 public/locales/en/common.json     |  5 ++++
 public/locales/ja/common.json     |  5 ++++
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 8fec3c27..6e5e42a2 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -33,6 +33,7 @@ import RemixIcon from '~public/icons/Remix.svg'
 import SaveIcon from '~public/icons/Save.svg'
 
 import './index.scss'
+import Tooltip from '~components/Tooltip'
 
 const Header = () => {
   // Localization
@@ -226,28 +227,32 @@ const Header = () => {
 
   const saveButton = () => {
     return (
-      <Button
-        leftAccessoryIcon={<SaveIcon />}
-        className={classNames({
-          Save: true,
-          Saved: party.favorited,
-        })}
-        blended={true}
-        text={party.favorited ? t('buttons.saved') : t('buttons.save')}
-        onClick={toggleFavorite}
-      />
+      <Tooltip content={t('tooltips.save')}>
+        <Button
+          leftAccessoryIcon={<SaveIcon />}
+          className={classNames({
+            Save: true,
+            Saved: party.favorited,
+          })}
+          blended={true}
+          text={party.favorited ? t('buttons.saved') : t('buttons.save')}
+          onClick={toggleFavorite}
+        />
+      </Tooltip>
     )
   }
 
   const remixButton = () => {
     return (
-      <Button
-        leftAccessoryIcon={<RemixIcon />}
-        className="Remix"
-        blended={true}
-        text={t('buttons.remix')}
-        onClick={remixTeam}
-      />
+      <Tooltip content={t('tooltips.remix')}>
+        <Button
+          leftAccessoryIcon={<RemixIcon />}
+          className="Remix"
+          blended={true}
+          text={t('buttons.remix')}
+          onClick={remixTeam}
+        />
+      </Tooltip>
     )
   }
 
diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index dbee72c4..37fd2514 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -710,7 +710,7 @@ const PartyDetails = (props: Props) => {
               {name ? name : t('no_title')}
             </h1>
             {party.remix && party.sourceParty ? (
-              <Tooltip content="Go to original team">
+              <Tooltip content={t('tooltips.source')}>
                 <Button
                   className="IconButton Blended"
                   leftAccessoryIcon={<RemixIcon />}
diff --git a/components/Tooltip/index.scss b/components/Tooltip/index.scss
index 33218a12..3a4b325d 100644
--- a/components/Tooltip/index.scss
+++ b/components/Tooltip/index.scss
@@ -1,5 +1,8 @@
 .Tooltip {
   background: var(--dialog-bg);
   border-radius: $card-corner;
+  line-height: 1.3;
   padding: $unit * 1.5;
+  z-index: 35;
+  max-width: 200px;
 }
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 1d9f394a..0f7ee421 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -390,6 +390,11 @@
   "toasts": {
     "copied": "This party's URL was copied to your clipboard"
   },
+  "tooltips": {
+    "remix": "Make a copy of this team",
+    "save": "Save this team to your account",
+    "source": "Go to original team"
+  },
   "extra_weapons": "Additional Weapons",
   "equipped": "Equipped",
   "coming_soon": "Coming Soon",
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index a76a1e08..4bcfc3cf 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -391,6 +391,11 @@
   "toasts": {
     "copied": "この編成のURLはクリップボードにコピーされました"
   },
+  "tooltips": {
+    "remix": "この編成をコピーする",
+    "save": "この編成をアカウントに保存する",
+    "source": "オリジナルの編成へ"
+  },
   "equipped": "装備した",
   "extra_weapons": "Additional Weapons",
   "coming_soon": "開発中",

From 89e17099948353d61ba3ac56d2a76fa19d99f0b1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 00:58:21 -0800
Subject: [PATCH 83/89] Fix styles for remixed teams

---
 components/PartyDetails/index.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss
index dfd69bcc..00fc2b6e 100644
--- a/components/PartyDetails/index.scss
+++ b/components/PartyDetails/index.scss
@@ -344,6 +344,7 @@
     display: flex;
     flex-direction: column;
     gap: $unit-2x;
+    width: 752px;
 
     h3 {
       font-size: $font-medium;
@@ -351,9 +352,13 @@
     }
 
     .GridRepCollection {
-      gap: $unit-2x;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       margin-left: $unit-2x * -1;
       margin-right: $unit-2x * -1;
+
+      .GridRep {
+        min-width: 200px;
+      }
     }
   }
 }

From da43f800994681e72bb8c6686da78a928abe9a1b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 02:42:39 -0800
Subject: [PATCH 84/89] Fix optional error

---
 components/PartyDetails/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index 37fd2514..e2e4b2d0 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -750,7 +750,7 @@ const PartyDetails = (props: Props) => {
       </div>
       {readOnly}
       {editable}
-      {remixes.length > 0 ? remixSection() : ''}
+      {remixes && remixes.length > 0 ? remixSection() : ''}
       {deleteAlert()}
     </section>
   )

From f3886c3ce862e35fa45927836123ee1de8c2f020 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 02:44:20 -0800
Subject: [PATCH 85/89] Set remove alert to close when removing an item

---
 components/CharacterUnit/index.tsx | 1 +
 components/SummonUnit/index.tsx    | 1 +
 components/WeaponUnit/index.tsx    | 1 +
 3 files changed, 3 insertions(+)

diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx
index d813b877..fe2f9919 100644
--- a/components/CharacterUnit/index.tsx
+++ b/components/CharacterUnit/index.tsx
@@ -164,6 +164,7 @@ const CharacterUnit = ({
 
   function removeCharacter() {
     if (gridCharacter) sendCharacterToRemove(gridCharacter.id)
+    setAlertOpen(false)
   }
 
   // Methods: Image string generation
diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx
index 9da0b566..b4dc03f0 100644
--- a/components/SummonUnit/index.tsx
+++ b/components/SummonUnit/index.tsx
@@ -113,6 +113,7 @@ const SummonUnit = ({
 
   function removeSummon() {
     if (gridSummon) sendSummonToRemove(gridSummon.id)
+    setAlertOpen(false)
   }
 
   // Methods: Image string generation
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index 8149f6a6..6a151e73 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -131,6 +131,7 @@ const WeaponUnit = ({
 
   function removeWeapon() {
     if (gridWeapon) sendWeaponToRemove(gridWeapon.id)
+    setAlertOpen(false)
   }
 
   // Methods: Data fetching and manipulation

From ba5244bc3b2ecf865ce71634ab91f8e3666da11b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 02:49:14 -0800
Subject: [PATCH 86/89] Don't show header title on non-party pages

---
 components/Header/index.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index b94b7d60..6502f89f 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -172,15 +172,11 @@ const Header = () => {
       }
     } else if (['weapons', 'summons', 'characters', 'new', ''].includes(path)) {
       title = t('new_party')
-    } else if (
-      ['about', 'updates', 'roadmap', 'saved', 'teams'].includes(path)
-    ) {
-      title = capitalizeFirstLetter(path)
     } else {
-      title = path
+      title = ''
     }
 
-    return (
+    return title !== '' ? (
       <Button
         blended={true}
         rightAccessoryIcon={
@@ -191,6 +187,8 @@ const Header = () => {
         text={title}
         onClick={copyToClipboard}
       />
+    ) : (
+      ''
     )
   }
 

From 03a06bd84928c1639b580f25894ac9eb9f484614 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 03:36:38 -0800
Subject: [PATCH 87/89] Restructure avatar in User definitions

---
 types/User.d.ts        | 3 +--
 utils/accountState.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/types/User.d.ts b/types/User.d.ts
index fdfcedd3..b79e76f2 100644
--- a/types/User.d.ts
+++ b/types/User.d.ts
@@ -1,11 +1,10 @@
 interface User {
   id: string
   username: string
-  granblueId: number
+  granblueId: string
   avatar: {
     picture: string
     element: string
   }
   gender: number
-  private: boolean
 }
diff --git a/utils/accountState.tsx b/utils/accountState.tsx
index fe2d3249..ffe3cb60 100644
--- a/utils/accountState.tsx
+++ b/utils/accountState.tsx
@@ -2,9 +2,12 @@ import { proxy } from 'valtio'
 
 export type UserState = {
   id: string
+  granblueId: string
   username: string
-  picture: string
-  element: string
+  avatar: {
+    picture: string
+    element: string
+  }
   gender: number
   language: string
   theme: string

From 93755dfda4f05d9f11e29e66411341049f927695 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 03:37:00 -0800
Subject: [PATCH 88/89] Update avatar implementation

---
 components/AccountModal/index.tsx | 13 +++++++++----
 components/Header/index.tsx       | 10 +++++-----
 components/LoginModal/index.tsx   | 13 +++++++++----
 components/SignupModal/index.tsx  | 13 +++++++++----
 pages/_app.tsx                    |  7 +++++--
 5 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index 3cea1cca..a98afe0e 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -159,8 +159,10 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             const user = response.data
 
             const cookieObj = {
-              picture: user.avatar.picture,
-              element: user.avatar.element,
+              avatar: {
+                picture: user.avatar.picture,
+                element: user.avatar.element,
+              },
               gender: user.gender,
               language: user.language,
               theme: user.theme,
@@ -173,8 +175,11 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             accountState.account.user = {
               id: user.id,
               username: user.username,
-              picture: user.avatar.picture,
-              element: user.avatar.element,
+              granblueId: '',
+              avatar: {
+                picture: user.avatar.picture,
+                element: user.avatar.element,
+              },
               language: user.language,
               theme: user.theme,
               gender: user.gender,
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 6e5e42a2..9db1ee57 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -199,10 +199,10 @@ const Header = () => {
       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`}
+          className={`profile ${user.avatar.element}`}
+          srcSet={`/profile/${user.avatar.picture}.png, 
+                      /profile/${user.avatar.picture}@2x.png 2x`}
+          src={`/profile/${user.avatar.picture}.png`}
         />
       )
     } else {
@@ -264,7 +264,7 @@ const Header = () => {
         <AccountModal
           open={settingsModalOpen}
           username={user.username}
-          picture={user.picture}
+          picture={user.avatar.picture}
           gender={user.gender}
           language={user.language}
           theme={user.theme}
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index f42e1ed3..66fd34cf 100644
--- a/components/LoginModal/index.tsx
+++ b/components/LoginModal/index.tsx
@@ -161,8 +161,10 @@ const LoginModal = (props: Props) => {
     setCookie(
       'user',
       {
-        picture: user.avatar.picture,
-        element: user.avatar.element,
+        avatar: {
+          picture: user.avatar.picture,
+          element: user.avatar.element,
+        },
         language: user.language,
         gender: user.gender,
         theme: user.theme,
@@ -174,8 +176,11 @@ const LoginModal = (props: Props) => {
     accountState.account.user = {
       id: user.id,
       username: user.username,
-      picture: user.avatar.picture,
-      element: user.avatar.element,
+      granblueId: '',
+      avatar: {
+        picture: user.avatar.picture,
+        element: user.avatar.element,
+      },
       gender: user.gender,
       language: user.language,
       theme: user.theme,
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index c67bb12e..f8cea3f0 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -121,8 +121,10 @@ const SignupModal = (props: Props) => {
     setCookie(
       'user',
       {
-        picture: user.avatar.picture,
-        element: user.avatar.element,
+        avatar: {
+          picture: user.avatar.picture,
+          element: user.avatar.element,
+        },
         language: user.language,
         gender: user.gender,
         theme: user.theme,
@@ -134,8 +136,11 @@ const SignupModal = (props: Props) => {
     accountState.account.user = {
       id: user.id,
       username: user.username,
-      picture: user.avatar.picture,
-      element: user.avatar.element,
+      granblueId: '',
+      avatar: {
+        picture: user.avatar.picture,
+        element: user.avatar.element,
+      },
       gender: user.gender,
       language: user.language,
       theme: user.theme,
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 498851d9..cfc1806f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -32,8 +32,11 @@ function MyApp({ Component, pageProps }: AppProps) {
       accountState.account.user = {
         id: cookieData.account.userId,
         username: cookieData.account.username,
-        picture: cookieData.user.picture,
-        element: cookieData.user.element,
+        granblueId: '',
+        avatar: {
+          picture: cookieData.user.avatar.picture,
+          element: cookieData.user.avatar.element,
+        },
         gender: cookieData.user.gender,
         language: cookieData.user.language,
         theme: cookieData.user.theme,

From 7893c4c3a161a05723281b036615f7c13ad2fe80 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 28 Jan 2023 03:49:24 -0800
Subject: [PATCH 89/89] Call onOpenChange when saving AccountModal

---
 components/AccountModal/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index a98afe0e..72518faa 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -186,6 +186,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             }
 
             setOpen(false)
+            if (props.onOpenChange) props.onOpenChange(false)
             changeLanguage(router, user.language)
           })
       }