Improvements: Dashboard UI

WordPress/src/jetpack/res/values/styles_toolbar.xml

@@ -4,13 +4,4 @@
     <!-- TextAppearance -->
     <style name="TextAppearance.App.Toolbar.Title" parent="TextAppearance.MaterialComponents.Headline6"/>
 
-    <style name="TextAppearance.App.CollapsingToolbar.Expanded" parent="TextAppearance.MaterialComponents.Headline4">
-        <item name="android:textColor">?attr/colorOnSurface</item>
-        <item name="android:textStyle">bold</item>
-    </style>
-
-    <style name="TextAppearance.App.CollapsingToolbar.Collapsed" parent="TextAppearance.MaterialComponents.Headline6">
-        <item name="android:textColor">?attr/colorOnSurface</item>
-    </style>
-
 </resources>

WordPress/src/main/java/org/wordpress/android/ui/main/WPMainNavigationView.kt

@@ -3,6 +3,7 @@ package org.wordpress.android.ui.main
 import android.content.Context
 import android.graphics.drawable.BitmapDrawable
 import android.util.AttributeSet
+import android.view.HapticFeedbackConstants
 import android.view.LayoutInflater
 import android.view.MenuItem
 import android.view.View
@@ -126,7 +127,6 @@ class WPMainNavigationView @JvmOverloads constructor(
             if (i == getPosition(ME)) {
                 loadGravatar(imgIcon, accountStore.account?.avatarUrl.orEmpty())
             }
-
             itemView.addView(customView)
         }
 
@@ -201,10 +201,20 @@ class WPMainNavigationView @JvmOverloads constructor(
     override fun onNavigationItemSelected(item: MenuItem): Boolean {
         val position = getPositionForItemId(item.itemId)
         currentPosition = position
+        performHapticFeedback()
         pageListener.onPageChanged(position)
         return true
     }
 
+    private fun performHapticFeedback() {
+        val position = currentPosition
+        getItemView(position)?.run {
+            performHapticFeedback(
+                HapticFeedbackConstants.VIRTUAL_KEY
+            )
+        }
+    }
+
     override fun onNavigationItemReselected(item: MenuItem) {
         // scroll the active fragment's contents to the top when user re-taps the current item
         val position = getPositionForItemId(item.itemId)
@@ -246,7 +256,7 @@ class WPMainNavigationView @JvmOverloads constructor(
 
         setImageViewSelected(position, true)
 
-        if(jetpackFeatureRemovalPhaseHelper.shouldRemoveJetpackFeatures())
+        if (jetpackFeatureRemovalPhaseHelper.shouldRemoveJetpackFeatures())
             AppPrefs.setMainPageIndex(0)
         else AppPrefs.setMainPageIndex(position)
 
@@ -386,9 +396,11 @@ class WPMainNavigationView @JvmOverloads constructor(
                 READER -> if (shouldUseStaticPostersFragment)
                     JetpackStaticPosterFragment.newInstance(UiData.READER)
                 else ReaderFragment()
+
                 NOTIFS -> if (shouldUseStaticPostersFragment)
                     JetpackStaticPosterFragment.newInstance(UiData.NOTIFICATIONS)
                 else NotificationsListFragment.newInstance()
+
                 ME -> MeFragment.newInstance()
             }
             fragmentManager?.beginTransaction()

WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteAdapter.kt

@@ -23,6 +23,7 @@ import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.PersonalizeCardMod
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.PostCard
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.QuickLinksItem
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.QuickStartCard
+import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.SiteInfoHeaderCard
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.TodaysStatsCard.TodaysStatsCardWithData
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.WpSotw2023NudgeCardModel
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Item.CategoryEmptyHeaderItem
@@ -53,6 +54,7 @@ import org.wordpress.android.ui.mysite.cards.personalize.PersonalizeCardViewHold
 import org.wordpress.android.ui.mysite.cards.quicklinksitem.QuickLinkRibbonViewHolder
 import org.wordpress.android.ui.mysite.cards.quickstart.QuickStartCardViewHolder
 import org.wordpress.android.ui.mysite.cards.sotw2023.WpSotw2023NudgeCardViewHolder
+import org.wordpress.android.ui.mysite.cards.siteinfo.SiteInfoHeaderCardViewholder
 import org.wordpress.android.ui.mysite.items.categoryheader.MySiteCategoryItemEmptyViewHolder
 import org.wordpress.android.ui.mysite.items.categoryheader.MySiteCategoryItemViewHolder
 import org.wordpress.android.ui.mysite.items.infoitem.MySiteInfoItemViewHolder
@@ -78,6 +80,7 @@ class MySiteAdapter(
     @Suppress("ComplexMethod")
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MySiteCardAndItemViewHolder<*> {
         return when (viewType) {
+            MySiteCardAndItem.Type.SITE_INFO_CARD.ordinal -> SiteInfoHeaderCardViewholder(parent, imageManager)
             MySiteCardAndItem.Type.QUICK_LINK_RIBBON.ordinal -> QuickLinkRibbonViewHolder(parent)
             MySiteCardAndItem.Type.DOMAIN_REGISTRATION_CARD.ordinal -> DomainRegistrationViewHolder(parent)
             MySiteCardAndItem.Type.QUICK_START_CARD.ordinal -> QuickStartCardViewHolder(parent, uiHelpers)
@@ -133,6 +136,7 @@ class MySiteAdapter(
     @Suppress("ComplexMethod")
     override fun onBindViewHolder(holder: MySiteCardAndItemViewHolder<*>, position: Int) {
         when (holder) {
+            is SiteInfoHeaderCardViewholder -> holder.bind(getItem(position) as SiteInfoHeaderCard)
             is QuickLinkRibbonViewHolder -> holder.bind(getItem(position) as QuickLinksItem)
             is DomainRegistrationViewHolder -> holder.bind(getItem(position) as DomainRegistrationCard)
             is QuickStartCardViewHolder -> holder.bind(getItem(position) as QuickStartCard)

WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteAdapterDiffCallback.kt

@@ -19,6 +19,7 @@ import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.PersonalizeCardMod
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.PostCard.PostCardWithPostItems
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.QuickLinksItem
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.QuickStartCard
+import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.SiteInfoHeaderCard
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.TodaysStatsCard.TodaysStatsCardWithData
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.WpSotw2023NudgeCardModel
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Item.CategoryEmptyHeaderItem
@@ -32,6 +33,7 @@ import org.wordpress.android.ui.mysite.MySiteCardAndItem.JetpackBadge
 object MySiteAdapterDiffCallback : DiffUtil.ItemCallback<MySiteCardAndItem>() {
     override fun areItemsTheSame(oldItem: MySiteCardAndItem, updatedItem: MySiteCardAndItem): Boolean {
         return oldItem.type == updatedItem.type && when {
+            oldItem is SiteInfoHeaderCard && updatedItem is SiteInfoHeaderCard -> true
             oldItem is QuickLinksItem && updatedItem is QuickLinksItem -> true
             oldItem is DomainRegistrationCard && updatedItem is DomainRegistrationCard -> true
             oldItem is QuickStartCard && updatedItem is QuickStartCard -> true

WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteCardAndItem.kt

@@ -62,31 +62,32 @@ sealed class MySiteCardAndItem(open val type: Type, open val activeQuickStartIte
         WP_SOTW_2023_NUDGE_CARD,
     }
 
-    data class SiteInfoHeaderCard(
-        val title: String,
-        val url: String,
-        val iconState: IconState,
-        val showTitleFocusPoint: Boolean,
-        val showSubtitleFocusPoint: Boolean,
-        val showIconFocusPoint: Boolean,
-        val onTitleClick: ListItemInteraction? = null,
-        val onIconClick: ListItemInteraction,
-        val onUrlClick: ListItemInteraction,
-        val onSwitchSiteClick: ListItemInteraction
-    ) : MySiteCardAndItem(
-        SITE_INFO_CARD,
-        activeQuickStartItem = showTitleFocusPoint || showIconFocusPoint || showSubtitleFocusPoint
-    ) {
-        sealed class IconState {
-            object Progress : IconState()
-            data class Visible(val url: String? = null) : IconState()
-        }
-    }
-
     sealed class Card(
         override val type: Type,
         override val activeQuickStartItem: Boolean = false
     ) : MySiteCardAndItem(type, activeQuickStartItem) {
+        data class SiteInfoHeaderCard(
+            val title: String,
+            val url: String,
+            val iconState: IconState,
+            val showTitleFocusPoint: Boolean,
+            val showSubtitleFocusPoint: Boolean,
+            val showIconFocusPoint: Boolean,
+            val onTitleClick: ListItemInteraction? = null,
+            val onIconClick: ListItemInteraction,
+            val onUrlClick: ListItemInteraction,
+            val onSwitchSiteClick: ListItemInteraction
+        ) : Card(
+            SITE_INFO_CARD,
+            activeQuickStartItem = showTitleFocusPoint || showIconFocusPoint || showSubtitleFocusPoint
+        ) {
+            sealed class IconState {
+                object Progress : IconState()
+                data class Visible(val url: String? = null) : IconState()
+            }
+        }
+
+
         data class QuickLinksItem(
             val quickLinkItems: List<QuickLinkItem>,
             val showMoreFocusPoint : Boolean = false

WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteFragment.kt

@@ -21,7 +21,6 @@ import org.wordpress.android.R
 import org.wordpress.android.WordPress
 import org.wordpress.android.analytics.AnalyticsTracker
 import org.wordpress.android.databinding.MySiteFragmentBinding
-import org.wordpress.android.databinding.MySiteInfoHeaderCardBinding
 import org.wordpress.android.fluxc.store.AccountStore
 import org.wordpress.android.fluxc.store.QuickStartStore
 import org.wordpress.android.ui.ActivityLauncher
@@ -41,8 +40,6 @@ import org.wordpress.android.ui.main.SitePickerActivity
 import org.wordpress.android.ui.main.WPMainActivity
 import org.wordpress.android.ui.main.jetpack.migration.JetpackMigrationActivity
 import org.wordpress.android.ui.main.utils.MeGravatarLoader
-import org.wordpress.android.ui.mysite.MySiteCardAndItem.SiteInfoHeaderCard
-import org.wordpress.android.ui.mysite.MySiteCardAndItem.SiteInfoHeaderCard.IconState
 import org.wordpress.android.ui.mysite.MySiteViewModel.State
 import org.wordpress.android.ui.mysite.cards.dashboard.bloggingprompts.BloggingPromptsCardAnalyticsTracker
 import org.wordpress.android.ui.mysite.jetpackbadge.JetpackPoweredBottomSheetFragment
@@ -79,7 +76,6 @@ import org.wordpress.android.util.extensions.setVisible
 import org.wordpress.android.util.helpers.SwipeToRefreshHelper
 import org.wordpress.android.util.image.ImageManager
 import org.wordpress.android.util.image.ImageType
-import org.wordpress.android.util.image.ImageType.BLAVATAR
 import org.wordpress.android.viewmodel.main.WPMainActivityViewModel
 import org.wordpress.android.viewmodel.observeEvent
 import org.wordpress.android.viewmodel.pages.PageListViewModel
@@ -450,7 +446,6 @@ class MySiteFragment : Fragment(R.layout.my_site_fragment),
                 quickStartScrollPosition = 0
             }
             if (quickStartScrollPosition > 0) recyclerView.scrollToPosition(quickStartScrollPosition)
-            else appbarMain.setExpanded(true)
         }
 
         wpMainActivityViewModel.mySiteDashboardRefreshRequested.observeEvent(viewLifecycleOwner) {
@@ -526,10 +521,6 @@ class MySiteFragment : Fragment(R.layout.my_site_fragment),
     }
 
     private fun MySiteFragmentBinding.loadData(state: State.SiteSelected) {
-        appbarMain.visibility = View.VISIBLE
-        siteInfo.loadMySiteDetails(state.siteInfoHeader)
-        appbarMain.setExpanded(true, true)
-
         recyclerView.setVisible(true)
         (recyclerView.adapter as? MySiteAdapter)?.submitList(state.dashboardData)
 
@@ -542,37 +533,8 @@ class MySiteFragment : Fragment(R.layout.my_site_fragment),
         }
     }
 
-    private fun MySiteInfoHeaderCardBinding.loadMySiteDetails(siteInfoHeader: SiteInfoHeaderCard) {
-        siteTitle = siteInfoHeader.title
-        if (siteInfoHeader.iconState is IconState.Visible) {
-            mySiteBlavatar.visibility = View.VISIBLE
-            imageManager.load(mySiteBlavatar, BLAVATAR, siteInfoHeader.iconState.url ?: "")
-            mySiteIconProgress.visibility = View.GONE
-            mySiteBlavatar.setOnClickListener { siteInfoHeader.onIconClick.click() }
-        } else if (siteInfoHeader.iconState is IconState.Progress) {
-            mySiteBlavatar.setOnClickListener(null)
-            mySiteIconProgress.visibility = View.VISIBLE
-            mySiteBlavatar.visibility = View.GONE
-        }
-        quickStartIconFocusPoint.setVisibleOrGone(siteInfoHeader.showIconFocusPoint)
-        if (siteInfoHeader.onTitleClick != null) {
-            siteInfoContainer.title.setOnClickListener { siteInfoHeader.onTitleClick.click() }
-        } else {
-            siteInfoContainer.title.setOnClickListener(null)
-        }
-        siteInfoContainer.title.text = siteInfoHeader.title
-        quickStartTitleFocusPoint.setVisibleOrGone(siteInfoHeader.showTitleFocusPoint)
-        quickStartSubTitleFocusPoint.setVisibleOrGone(siteInfoHeader.showSubtitleFocusPoint)
-        siteInfoContainer.subtitle.text = siteInfoHeader.url
-        siteInfoContainer.subtitle.setOnClickListener { siteInfoHeader.onUrlClick.click() }
-        switchSite.setOnClickListener { siteInfoHeader.onSwitchSiteClick.click() }
-        siteInfoCard.visibility = View.VISIBLE
-    }
-
-
     private fun MySiteFragmentBinding.loadEmptyView(state: State.NoSites) {
         recyclerView.setVisible(false)
-        siteInfo.siteInfoCard.setVisible(false)
 
         if (!noSitesView.actionableEmptyView.isVisible) {
             noSitesView.actionableEmptyView.setVisible(true)
@@ -581,7 +543,6 @@ class MySiteFragment : Fragment(R.layout.my_site_fragment),
             showAvatarSettingsView(state)
         }
         siteTitle = getString(R.string.my_site_section_screen_title)
-        appbarMain.setExpanded(false, true)
     }
 
     private fun MySiteFragmentBinding.showAvatarSettingsView(state: State.NoSites) {

WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteViewModel.kt

@@ -46,7 +46,6 @@ import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.JetpackInstallFull
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.QuickStartCard
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Item.SingleActionCard
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.JetpackBadge
-import org.wordpress.android.ui.mysite.MySiteCardAndItem.SiteInfoHeaderCard
 import org.wordpress.android.ui.mysite.MySiteCardAndItemBuilderParams.DashboardCardPlansBuilderParams
 import org.wordpress.android.ui.mysite.MySiteCardAndItemBuilderParams.DashboardCardsBuilderParams
 import org.wordpress.android.ui.mysite.MySiteCardAndItemBuilderParams.DomainRegistrationCardBuilderParams
@@ -372,8 +371,7 @@ class MySiteViewModel @Inject constructor(
         }
 
         return SiteSelected(
-            siteInfoHeader = siteInfo,
-            dashboardData = siteItems
+            dashboardData = listOf(siteInfo) + siteItems
         )
     }
 
@@ -1024,7 +1022,6 @@ class MySiteViewModel @Inject constructor(
 
     sealed class State {
         data class SiteSelected(
-            val siteInfoHeader: SiteInfoHeaderCard,
             val dashboardData: List<MySiteCardAndItem>,
         ) : State()
 

WordPress/src/main/java/org/wordpress/android/ui/mysite/cards/blaze/BlazeCampaignsCardViewHolder.kt

@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.ui.Modifier
 import org.wordpress.android.databinding.CampaignsCardBinding
-import org.wordpress.android.ui.compose.theme.AppTheme
+import org.wordpress.android.ui.compose.theme.AppThemeWithoutBackground
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.BlazeCard.BlazeCampaignsCardModel
 import org.wordpress.android.ui.mysite.MySiteCardAndItemViewHolder
 import org.wordpress.android.util.extensions.viewBinding
@@ -14,7 +14,7 @@ class BlazeCampaignsCardViewHolder(parent: ViewGroup) :
     MySiteCardAndItemViewHolder<CampaignsCardBinding>(parent.viewBinding(CampaignsCardBinding::inflate)) {
     fun bind(cardModel: BlazeCampaignsCardModel) = with(binding) {
         blazeCampaignsCard.setContent {
-            AppTheme {
+            AppThemeWithoutBackground {
                 BlazeCampaignsCard(
                     blazeCampaignCardModel = cardModel, modifier = Modifier
                         .fillMaxWidth()

WordPress/src/main/java/org/wordpress/android/ui/mysite/cards/dashboard/bloganuary/BloganuaryNudgeCardViewHolder.kt

@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import org.wordpress.android.databinding.BloganuaryNudgeCardBinding
-import org.wordpress.android.ui.compose.theme.AppTheme
+import org.wordpress.android.ui.compose.theme.AppThemeWithoutBackground
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.BloganuaryNudgeCardModel
 import org.wordpress.android.ui.mysite.MySiteCardAndItemViewHolder
 import org.wordpress.android.util.extensions.viewBinding
@@ -16,7 +16,7 @@ class BloganuaryNudgeCardViewHolder(parent: ViewGroup) :
         // Dispose of the Composition when the view's LifecycleOwner is destroyed
         setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnDetachedFromWindowOrReleasedFromPool)
         setContent {
-            AppTheme {
+            AppThemeWithoutBackground {
                 BloganuaryNudgeCard(
                     model = cardModel,
                     modifier = Modifier.fillMaxWidth()

WordPress/src/main/java/org/wordpress/android/ui/mysite/cards/dashboard/domaintransfer/DomainTransferCardViewHolder.kt

@@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ViewCompositionStrategy.DisposeOnDetachedFromWindowOrReleasedFromPool
 import org.wordpress.android.databinding.DomainTransferCardBinding
-import org.wordpress.android.ui.compose.theme.AppTheme
+import org.wordpress.android.ui.compose.theme.AppThemeWithoutBackground
 import org.wordpress.android.ui.mysite.MySiteCardAndItem.Card.DomainTransferCardModel
 import org.wordpress.android.ui.mysite.MySiteCardAndItemViewHolder
 import org.wordpress.android.util.extensions.viewBinding
@@ -18,10 +18,12 @@ class DomainTransferCardViewHolder(parent: ViewGroup) :
         this.domainTransferCard.apply {
             setViewCompositionStrategy(DisposeOnDetachedFromWindowOrReleasedFromPool)
             setContent {
-                AppTheme {
+                AppThemeWithoutBackground {
                     DomainTransferCard(
                         domainTransferCardModel = cardModel,
-                        modifier = Modifier.fillMaxWidth().wrapContentHeight()
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .wrapContentHeight()
                     )
                 }
             }

WordPress/src/main/java/org/wordpress/android/ui/mysite/cards/personalize/PersonalizeCardViewHolder.kt

@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.ui.Modifier
 import org.wordpress.android.databinding.PersonalizeCardBinding
-import org.wordpress.android.ui.compose.theme.AppTheme
+import org.wordpress.android.ui.compose.theme.AppThemeWithoutBackground
 import org.wordpress.android.ui.mysite.MySiteCardAndItem
 import org.wordpress.android.ui.mysite.MySiteCardAndItemViewHolder
 import org.wordpress.android.util.extensions.viewBinding
@@ -14,7 +14,7 @@ class PersonalizeCardViewHolder(parent: ViewGroup) :
     MySiteCardAndItemViewHolder<PersonalizeCardBinding>(parent.viewBinding(PersonalizeCardBinding::inflate)) {
     fun bind(cardModel: MySiteCardAndItem.Card.PersonalizeCardModel) = with(binding) {
         personalizeCard.setContent {
-            AppTheme {
+            AppThemeWithoutBackground {
                 PersonalizeCard(
                     model = cardModel, modifier = Modifier
                         .fillMaxWidth()