user ability to toggle showing account balance in top bar

Author: williamstein

src/packages/frontend/account/other-settings.tsx

@@ -107,7 +107,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
       >
         <FormattedMessage
           id="account.other-settings.global_banner"
-          defaultMessage={`<strong>Show announcement banner</strong>: only shows up if there is a
+          defaultMessage={`<strong>Show Announcement Banner</strong>: only shows up if there is a
         message`}
         />
       </Checkbox>
@@ -122,7 +122,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
       >
         <FormattedMessage
           id="account.other-settings.time_ago_absolute"
-          defaultMessage={`Display <strong>timestamps as absolute points in time</strong>
+          defaultMessage={`<strong>Display Timestamps as absolute points in time</strong>
             instead of relative to the current time`}
         />
       </Checkbox>
@@ -195,7 +195,7 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
       >
         <FormattedMessage
           id="account.other-settings.mask_files"
-          defaultMessage={`<strong>Mask files:</strong> grey out files in the files viewer
+          defaultMessage={`<strong>Mask Files:</strong> grey out files in the files viewer
             that you probably do not want to open`}
         />
       </Checkbox>
@@ -666,6 +666,15 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
         {render_hide_project_popovers()}
         {render_hide_file_popovers()}
         {render_hide_button_tooltips()}
+        <Checkbox
+          checked={!!props.other_settings.get("hide_navbar_balance")}
+          onChange={(e) => on_change("hide_navbar_balance", e.target.checked)}
+        >
+          <FormattedMessage
+            id="account.other-settings.hide_navbar_balance"
+            defaultMessage={`<strong>Hide Account Balance</strong> in navigation bar`}
+          />
+        </Checkbox>
         {render_no_free_warnings()}
         <Checkbox
           checked={!!props.other_settings.get("disable_markdown_codebar")}

src/packages/frontend/purchases/balance-button.tsx

@@ -27,6 +27,8 @@ export default function BalanceButton({
   const dbBalance = useTypedRedux("account", "balance");
   const balanceAlert = useTypedRedux("account", "balance_alert");
   const [balance, setBalance] = useState<number | null>(dbBalance ?? null);
+  const otherSettings = useTypedRedux("account", "other_settings");
+  const hideNavbarBalance = otherSettings?.get("hide_navbar_balance");
 
   useEffect(() => {
     if (dbBalance != null) {
@@ -123,7 +125,7 @@ export default function BalanceButton({
 
   // This ensures it only shows up in commercial setups.
   // Wherever it is used, the component shouldn't be instantiated in those cases, though.
-  if (!is_commercial) {
+  if (!is_commercial || (topBar && hideNavbarBalance && !balanceAlert)) {
     return;
   } else {
     return (

src/packages/util/db-schema/accounts.ts

@@ -508,6 +508,7 @@ Table({
             no_email_new_messages: false,
             [USE_BALANCE_TOWARD_SUBSCRIPTIONS]:
               USE_BALANCE_TOWARD_SUBSCRIPTIONS_DEFAULT,
+            hide_navbar_balance: false,
           },
           name: null,
           first_name: "",