From 862747ed4abf0672b4cead9ccc839b1262f0ee7e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 2 Jul 2023 02:34:09 -0700
Subject: [PATCH] Update PartyHeader

* Fixes the display of numeric properties (button count, turn count, chain count)
* Refactors remixed pill/button so that it displays a message if the original party was deleted
---
 .../party/PartyHeader/index.module.scss       | 11 ++--
 components/party/PartyHeader/index.tsx        | 55 ++++++++++++-------
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/components/party/PartyHeader/index.module.scss b/components/party/PartyHeader/index.module.scss
index 6eebc158..892feb5f 100644
--- a/components/party/PartyHeader/index.module.scss
+++ b/components/party/PartyHeader/index.module.scss
@@ -131,7 +131,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
-    gap: $unit;
+    gap: $unit-3x;
     margin: 0 auto;
     max-width: $unit * 94;
     width: 100%;
@@ -146,16 +146,16 @@
       flex-grow: 1;
 
       .header {
-        align-items: center;
-        display: flex;
-        gap: $unit;
         margin-bottom: $unit;
 
         h1 {
+          display: inline;
           font-size: $font-xlarge;
-          font-weight: $normal;
+          font-weight: $medium;
           text-align: left;
           color: var(--text-primary);
+          line-height: 40px;
+          margin-right: $unit;
 
           &.empty {
             color: var(--text-secondary);
@@ -224,6 +224,7 @@
     & > .right {
       display: flex;
       gap: $unit-half;
+      flex-shrink: 0;
 
       & > * {
         flex-grow: 1;
diff --git a/components/party/PartyHeader/index.tsx b/components/party/PartyHeader/index.tsx
index 5048f32e..1e512f63 100644
--- a/components/party/PartyHeader/index.tsx
+++ b/components/party/PartyHeader/index.tsx
@@ -235,24 +235,26 @@ const PartyHeader = (props: Props) => {
   )
 
   const buttonChainToken = () => {
-    if (party.buttonCount || party.chainCount) {
+    if (party.buttonCount !== undefined || party.chainCount !== undefined) {
       let string = ''
 
-      if (party.buttonCount && party.buttonCount > 0) {
+      if (party.buttonCount !== undefined) {
         string += `${party.buttonCount}b`
       }
 
-      if (!party.buttonCount && party.chainCount && party.chainCount > 0) {
+      if (party.buttonCount === undefined && party.chainCount !== undefined) {
         string += `0${t('party.details.suffix.buttons')}${party.chainCount}${t(
           'party.details.suffix.chains'
         )}`
       } else if (
-        party.buttonCount &&
-        party.chainCount &&
-        party.chainCount > 0
+        party.buttonCount !== undefined &&
+        party.chainCount !== undefined
       ) {
         string += `${party.chainCount}${t('party.details.suffix.chains')}`
-      } else if (party.buttonCount && !party.chainCount) {
+      } else if (
+        party.buttonCount !== undefined &&
+        party.chainCount === undefined
+      ) {
         string += `0${t('party.details.suffix.chains')}`
       }
 
@@ -311,7 +313,7 @@ const PartyHeader = (props: Props) => {
 
   const remixButton = () => {
     return (
-      <Tooltip content={t('tooltips.remix')}>
+      <Tooltip content={t('tooltips.remix.create')}>
         <Button
           leftAccessoryIcon={<RemixIcon />}
           className="grow"
@@ -322,6 +324,30 @@ const PartyHeader = (props: Props) => {
     )
   }
 
+  const remixedButton = () => {
+    const tooltipString =
+      party.remix && party.sourceParty
+        ? t('tooltips.remix.source')
+        : t('tooltips.remix.deleted')
+
+    const buttonAction =
+      party.sourceParty && (() => goTo(party.sourceParty?.shortcode))
+
+    return (
+      <Tooltip content={tooltipString}>
+        <Button
+          blended={true}
+          className="remixed"
+          leftAccessoryIcon={<RemixIcon />}
+          text={t('tokens.remix')}
+          size="small"
+          disabled={!party.sourceParty}
+          onClick={buttonAction}
+        />
+      </Tooltip>
+    )
+  }
+
   return (
     <>
       <header className={styles.wrapper}>
@@ -331,18 +357,7 @@ const PartyHeader = (props: Props) => {
               <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="small"
-                    onClick={() => goTo(party.sourceParty?.shortcode)}
-                  />
-                </Tooltip>
-              )}
+              {party.remix && remixedButton()}
             </div>
             <div className={styles.attribution}>
               {renderUserBlock()}