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 01/18] 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 02/18] 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 03/18] 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 04/18] 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 05/18] 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 06/18] 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 07/18] 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 08/18] 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 09/18] 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 10/18] 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 11/18] 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 12/18] 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 13/18] 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 14/18] 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 15/18] 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 16/18] 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 17/18] 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 18/18] 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>
   )