Replacing "Add Card" tab with "Edit Cards" sub-tab [NTP]

Fixes brave/brave-browser#12625

browser/brave_profile_prefs.cc

@@ -267,7 +267,6 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
   registry->RegisterBooleanPref(kNewTabPageShowRewards, true);
   registry->RegisterBooleanPref(kNewTabPageShowBinance, true);
   registry->RegisterBooleanPref(kNewTabPageShowTogether, false);
-  registry->RegisterBooleanPref(kNewTabPageShowAddCard, true);
   registry->RegisterBooleanPref(kNewTabPageShowGemini, true);
   registry->RegisterIntegerPref(
       kNewTabPageShowsOptions,

browser/extensions/api/settings_private/brave_prefs_util.cc

@@ -121,8 +121,6 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetAllowlistedKeys() {
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_allowlist)[kNewTabPageShowTogether] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
-  (*s_brave_allowlist)[kNewTabPageShowAddCard] =
-      settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_allowlist)[kNewTabPageShowGemini] =
       settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_allowlist)[kNewTabPageShowsOptions] =

browser/ui/webui/brave_webui_source.cc

@@ -243,7 +243,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "rewardsWidgetBrandedNotificationTitle", IDS_REWARDS_WIDGET_BRANDED_NOTIFICATION_TITLE },      // NOLINT
         { "rewardsWidgetBrandedNotificationDescription", IDS_REWARDS_WIDGET_BRANDED_NOTIFICATION_DESCRIPTION }, // NOLINT
         { "rewardsWidgetBrandedNotificationHideAction", IDS_REWARDS_WIDGET_BRANDED_NOTIFICATION_HIDE_ACTION }, // NOLINT
-        { "addCardWidgetTitle", IDS_ADD_CARD_WIDGET_TITLE },
+        { "editCardsTitle", IDS_EDIT_CARDS_TITLE },
         { "tosAndPp", IDS_REWARDS_WIDGET_TOS_AND_PP},     // NOLINT
         { "rewardsWidgetStartUsing", IDS_REWARDS_WIDGET_START_USING},     // NOLINT
         // Together Widget

browser/ui/webui/new_tab_page/brave_new_tab_message_handler.cc

@@ -117,9 +117,6 @@ base::DictionaryValue GetPreferencesDictionary(PrefService* prefs) {
   pref_data.SetBoolean(
       "showTogether",
       prefs->GetBoolean(kNewTabPageShowTogether));
-  pref_data.SetBoolean(
-      "showAddCard",
-      prefs->GetBoolean(kNewTabPageShowAddCard));
   pref_data.SetBoolean(
       "showGemini",
       prefs->GetBoolean(kNewTabPageShowGemini));
@@ -339,9 +336,6 @@ void BraveNewTabMessageHandler::OnJavascriptAllowed() {
   pref_change_registrar_.Add(kNewTabPageShowTogether,
     base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
     base::Unretained(this)));
-  pref_change_registrar_.Add(kNewTabPageShowAddCard,
-    base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
-    base::Unretained(this)));
   pref_change_registrar_.Add(kNewTabPageShowGemini,
     base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
     base::Unretained(this)));
@@ -465,8 +459,6 @@ void BraveNewTabMessageHandler::HandleSaveNewTabPagePref(
     settingsKey = kNewTabPageShowBinance;
   } else if (settingsKeyInput == "showTogether") {
     settingsKey = kNewTabPageShowTogether;
-  } else if (settingsKeyInput == "showAddCard") {
-    settingsKey = kNewTabPageShowAddCard;
   } else if (settingsKeyInput == "showGemini") {
     settingsKey = kNewTabPageShowGemini;
 #if BUILDFLAG(MOONPAY_ENABLED)

common/pref_names.cc

@@ -67,7 +67,6 @@ const char kNewTabPageShowRewards[] = "brave.new_tab_page.show_rewards";
 const char kNewTabPageShowBinance[] = "brave.new_tab_page.show_binance";
 const char kNewTabPageShowGemini[] = "brave.new_tab_page.show_gemini";
 const char kNewTabPageShowTogether[] = "brave.new_tab_page.show_together";
-const char kNewTabPageShowAddCard[] = "brave.new_tab_page.show_addcard";
 const char kNewTabPageShowsOptions[] = "brave.new_tab_page.shows_options";
 const char kBraveTodaySources[] = "brave.today.sources";
 const char kBraveEnabledMediaRouter[] = "brave.enable_media_router";

common/pref_names.h

@@ -59,7 +59,6 @@ extern const char kNewTabPageShowRewards[];
 extern const char kNewTabPageShowBinance[];
 extern const char kNewTabPageShowGemini[];
 extern const char kNewTabPageShowTogether[];
-extern const char kNewTabPageShowAddCard[];
 extern const char kNewTabPageShowsOptions[];
 extern const char kBraveTodaySources[];
 extern const char kBraveEnabledMediaRouter[];

components/brave_new_tab_ui/api/preferences.ts

@@ -19,7 +19,6 @@ export type Preferences = {
   clockFormat: string
   showTopSites: boolean
   showRewards: boolean
-  showAddCard: boolean
   isBrandedWallpaperNotificationDismissed: boolean
 }
 
@@ -65,10 +64,6 @@ export function saveShowBinance (value: boolean): void {
   sendSavePref('showBinance', value)
 }
 
-export function saveShowAddCard (value: boolean): void {
-  sendSavePref('showAddCard', value)
-}
-
 export function saveBrandedWallpaperOptIn (value: boolean): void {
   sendSavePref('brandedWallpaperOptIn', value)
 }

components/brave_new_tab_ui/components/default/editCards/index.tsx

@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+import { getLocale } from '../../../../common/locale'
+
+// Components
+import {
+  StyledWrapper,
+  StyledTitle,
+  StyledEditIcon
+} from './style'
+import EditIcon from './assets/edit-icon.svg'
+
+interface Props {
+  onEditCards: () => void
+}
+
+export default class EditCards extends React.PureComponent<Props, {}> {
+
+  render () {
+    return (
+      <StyledWrapper onClick={this.props.onEditCards}>
+        <StyledTitle>
+          <StyledEditIcon src={EditIcon} />
+          <span>
+            {getLocale('editCardsTitle')}
+          </span>
+        </StyledTitle>
+      </StyledWrapper>
+    )
+  }
+}

components/brave_new_tab_ui/components/default/editCards/style.ts

@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License. v. 2.0. If a copy of the MPL was not distributed with this file.
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'brave-ui/theme'
+import palette from 'brave-ui/theme/colors'
+
+export const StyledWrapper = styled<{}, 'button'>('button')`
+  width: 100%;
+  border: none;
+  display: block;
+  margin-top: 5px;
+  appearance: none;
+  border-radius: 8px;
+  cursor: pointer;
+  backdrop-filter: blur(23px);
+  padding: 12px 20px;
+  background: linear-gradient(90deg, rgba(33, 37, 41, 0.6) 0%, rgba(33, 37, 41, 0.24) 100%);
+  outline: none;
+
+  &:hover {
+    background: rgba(33, 37, 41, 0.5);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 1px ${p => p.theme.color.brandBrave};
+  }
+`
+
+export const StyledTitle = styled<{}, 'div'>('div')`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  font-size: 13px;
+  font-weight: 600;
+  color: ${palette.white};
+  margin: 0 auto;
+  font-family: ${p => p.theme.fontFamily.heading};
+`
+
+export const StyledEditIcon = styled<{}, 'img'>('img')`
+  width: 14px;
+  margin-right: 10px;
+`

components/brave_new_tab_ui/components/default/index.ts

@@ -11,10 +11,10 @@ import { ClockWidget } from './clock'
 import { RewardsWidget } from './rewards'
 import { BinanceWidget } from './binance'
 import { TogetherWidget } from './together'
-import { AddCardWidget } from './addCard'
 import { GeminiWidget } from './gemini'
 import { BitcoinDotComWidget } from './bitcoinDotCom'
 import { CryptoDotComWidget } from './cryptoDotCom'
+import EditCards from './editCards'
 import createWidget from './widget'
 
 export * from './page'
@@ -34,7 +34,7 @@ export {
   RewardsWidget,
   BinanceWidget,
   TogetherWidget,
-  AddCardWidget,
+  EditCards,
   GeminiWidget,
   BitcoinDotComWidget,
   CryptoDotComWidget,

components/brave_new_tab_ui/components/default/page/index.tsx

@@ -33,7 +33,6 @@ type PageProps = {
   showBinance: boolean
   showTogether: boolean
   showTopSites: boolean
-  showAddCard: boolean
   showBrandedWallpaper: boolean
 } & HasImageProps
 

components/brave_new_tab_ui/containers/app.tsx

@@ -50,7 +50,6 @@ class DefaultPage extends React.Component<Props, {}> {
           saveShowRewards={PreferencesAPI.saveShowRewards}
           saveShowTogether={PreferencesAPI.saveShowTogether}
           saveShowBinance={PreferencesAPI.saveShowBinance}
-          saveShowAddCard={PreferencesAPI.saveShowAddCard}
           saveShowGemini={PreferencesAPI.saveShowGemini}
           saveShowBitcoinDotCom={PreferencesAPI.saveShowBitcoinDotCom}
           saveShowCryptoDotCom={PreferencesAPI.saveShowCryptoDotCom}

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -15,10 +15,10 @@ import {
   RewardsWidget as Rewards,
   TogetherWidget as Together,
   BinanceWidget as Binance,
-  AddCardWidget as AddCard,
   GeminiWidget as Gemini,
   BitcoinDotComWidget as BitcoinDotCom,
-  CryptoDotComWidget as CryptoDotCom
+  CryptoDotComWidget as CryptoDotCom,
+  EditCards
 } from '../../components/default'
 import * as Page from '../../components/default/page'
 import BrandedWallpaperLogo from '../../components/default/brandedWallpaper/logo'
@@ -57,7 +57,6 @@ interface Props {
   saveShowRewards: (value: boolean) => void
   saveShowTogether: (value: boolean) => void
   saveShowBinance: (value: boolean) => void
-  saveShowAddCard: (value: boolean) => void
   saveShowGemini: (value: boolean) => void
   saveShowBitcoinDotCom: (value: boolean) => void
   saveShowCryptoDotCom: (value: boolean) => void
@@ -257,10 +256,6 @@ class NewTabPage extends React.Component<Props, State> {
     }
   }
 
-  disableAddCard = () => {
-    this.props.saveShowAddCard(false)
-  }
-
   toggleShowGemini = () => {
     const { showGemini } = this.props.newTabData
 
@@ -411,7 +406,7 @@ class NewTabPage extends React.Component<Props, State> {
     brandedWallpaperLogoClicked(this.props.newTabData.brandedWallpaperData)
   }
 
-  openSettingsAddCard = () => {
+  openSettingsEditCards = () => {
     this.openSettings(SettingsTabType.Cards)
   }
 
@@ -710,7 +705,7 @@ class NewTabPage extends React.Component<Props, State> {
           const isForeground = i === widgetList.length - 1
           return (
             <div key={`widget-${widget}`}>
-              {lookup[widget].render(isForeground, (i + 1))}
+              {lookup[widget].render(isForeground, i)}
             </div>
           )
         })}
@@ -753,30 +748,19 @@ class NewTabPage extends React.Component<Props, State> {
 
   renderCryptoContent () {
     const { newTabData } = this.props
-    const { widgetStackOrder, textDirection, showAddCard } = newTabData
+    const { widgetStackOrder } = newTabData
     const allWidgetsHidden = this.allWidgetsHidden()
-    const shouldShowAddCard = allWidgetsHidden ? showAddCard : true
 
     if (!widgetStackOrder.length) {
       return null
     }
 
     return (
       <Page.GridItemWidgetStack>
-        {shouldShowAddCard &&
-          <AddCard
-            isCrypto={true}
-            paddingType={'none'}
-            menuPosition={'left'}
-            widgetTitle={getLocale('addCardWidgetTitle')}
-            textDirection={textDirection}
-            hideMenu={!allWidgetsHidden}
-            hideWidget={this.disableAddCard}
-            onAddCard={this.openSettingsAddCard}
-            stackPosition={0}
-          />
-        }
         {this.getCryptoContent()}
+        {!allWidgetsHidden &&
+          <EditCards onEditCards={this.openSettingsEditCards} />
+        }
       </Page.GridItemWidgetStack>
     )
   }
@@ -1036,7 +1020,6 @@ class NewTabPage extends React.Component<Props, State> {
             showTogether={newTabData.showTogether && newTabData.togetherSupported}
             showBinance={newTabData.showBinance}
             showTopSites={showTopSites}
-            showAddCard={newTabData.showAddCard}
             showBrandedWallpaper={isShowingBrandedWallpaper}
         >
           {newTabData.showStats &&

components/brave_new_tab_ui/containers/newTab/settings/cards.tsx

@@ -29,8 +29,8 @@ import geminiBanner from './assets/gemini.png'
 import bitcoinDotComBanner from './assets/bitcoin-dot-com.png'
 import cryptoDotComBanner from './assets/crypto-dot-com.png'
 import HideIcon from './assets/hide-icon'
-import AddIcon from '../../../components/default/addCard/assets/add-icon'
 import { Toggle } from '../../../components/toggle'
+import AddIcon from './assets/add-icon'
 
 import { getLocale } from '../../../../common/locale'