Update PartyHeader and fix behavior

* Send true to editable prop is party is editable
* Fix turn count token display
* Fix party name style
* Add custom classes to various Buttons
* Only show PartyDropdown if a party is new
* Determine which buttons to show based on editable prop, not snapshot
* Remove unused code from Header
* Make new button route shallowly

components/Header/index.tsx

@@ -51,22 +51,6 @@ const Header = () => {
   const [leftMenuOpen, setLeftMenuOpen] = useState(false)
   const [rightMenuOpen, setRightMenuOpen] = useState(false)
 
-  const [name, setName] = useState('')
-  const [originalName, setOriginalName] = useState('')
-
-  // Snapshots
-  const { party: partySnapshot } = useSnapshot(appState)
-
-  // Subscribe to app state to listen for party name and
-  // unsubscribe when component is unmounted
-  const unsubscribe = subscribe(appState, () => {
-    const newName =
-      appState.party && appState.party.name ? appState.party.name : ''
-    setName(newName)
-  })
-
-  useEffect(() => () => unsubscribe(), [])
-
   // Methods: Event handlers (Buttons)
   function handleLeftMenuButtonClicked() {
     setLeftMenuOpen(!leftMenuOpen)
@@ -126,7 +110,7 @@ const Header = () => {
     })
 
     // Push the root URL
-    router.push('/new')
+    router.push('/new', undefined, { shallow: true })
   }
 
   const profileImage = () => {

components/party/Party/index.tsx

@@ -444,7 +444,7 @@ const Party = (props: Props) => {
       <PartyHeader
         party={props.team}
         new={props.new || false}
-        editable={party.editable}
+        editable={props.new ? true : party.editable}
         deleteCallback={deleteTeam}
         remixCallback={remixTeam}
         updateCallback={updateDetails}

components/party/PartyHeader/index.module.scss

@@ -6,6 +6,8 @@
   max-width: $grid-width;
 
   @include breakpoint(phone) {
+    margin-top: 0;
+
     .Button:not(.IconButton) {
       justify-content: center;
       width: 100%;
@@ -165,12 +167,15 @@
         align-items: center;
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
+        line-height: 1.4;
 
         & > div {
           align-items: center;
           display: inline-flex;
           font-size: $font-small;
           height: 26px;
+          white-space: nowrap;
         }
 
         & > *:not(:last-child):after {
@@ -188,6 +193,11 @@
           color: var(--text-primary);
         }
 
+        a {
+          display: flex;
+          align-items: center;
+        }
+
         a:hover:not(.fire):not(.water):not(.wind):not(.earth):not(.dark):not(
             .light
           ) {
@@ -214,6 +224,10 @@
     & > .right {
       display: flex;
       gap: $unit-half;
+
+      & > * {
+        flex-grow: 1;
+      }
     }
   }
 

components/party/PartyHeader/index.tsx

@@ -45,9 +45,6 @@ const PartyHeader = (props: Props) => {
   const router = useRouter()
   const locale = router.locale || 'en'
 
-  const isNewParty =
-    router.asPath === '/' || router.asPath.split('/')[1] === 'new'
-
   const { party: partySnapshot } = useSnapshot(appState)
 
   // State: Component
@@ -285,7 +282,7 @@ const PartyHeader = (props: Props) => {
         {fullAutoToken}
         {autoSummonToken}
         {autoGuardToken}
-        {party.turnCount && turnCountToken}
+        {party.turnCount !== undefined && turnCountToken}
         {party.clearTime > 0 && clearTimeToken()}
         {buttonChainToken()}
       </>
@@ -300,6 +297,7 @@ const PartyHeader = (props: Props) => {
           leftAccessoryIcon={<SaveIcon />}
           className={classNames({
             save: true,
+            grow: true,
             saved: partySnapshot.favorited,
           })}
           text={
@@ -316,7 +314,7 @@ const PartyHeader = (props: Props) => {
       <Tooltip content={t('tooltips.remix')}>
         <Button
           leftAccessoryIcon={<RemixIcon />}
-          className="Remix"
+          className="grow"
           text={t('buttons.remix')}
           onClick={openRemixTeamAlert}
         />
@@ -330,16 +328,17 @@ const PartyHeader = (props: Props) => {
         <section className={styles.info}>
           <div className={styles.left}>
             <div className={styles.header}>
-              <h1 className={party.name ? '' : 'empty'}>
+              <h1 className={party.name ? '' : styles.empty}>
                 {party.name ? party.name : t('no_title')}
               </h1>
               {party.remix && party.sourceParty && (
                 <Tooltip content={t('tooltips.source')}>
                   <Button
                     blended={true}
+                    className="remixed"
                     leftAccessoryIcon={<RemixIcon />}
                     text={t('tokens.remix')}
-                    size="icon"
+                    size="small"
                     onClick={() => goTo(party.sourceParty?.shortcode)}
                   />
                 </Tooltip>
@@ -358,18 +357,19 @@ const PartyHeader = (props: Props) => {
               )}
             </div>
           </div>
-          {party.editable ? (
+          {props.editable ? (
             <div className={styles.right}>
               <EditPartyModal
                 party={props.party}
                 updateCallback={props.updateCallback}
               >
                 <Button
+                  className="full"
                   leftAccessoryIcon={<EditIcon />}
                   text={t('buttons.show_info')}
                 />
               </EditPartyModal>
-              {!isNewParty && (
+              {!props.new && (
                 <PartyDropdown
                   editable={props.editable}
                   deleteTeamCallback={props.deleteCallback}