[WOOMOB-1023][Woo POS][Settings] Implement 2-pane layout with Android-style UI design #14459

kidinov · 2025-08-12T12:33:41Z

Description

Implements a 2-pane settings layout for Woo POS following Android settings design. Categories are shown on the left, details on the right. Added visual feedback, animations, and Store category.

Focus more on the architecture then the implementation as the UI most likely is going to be changed

Steps to reproduce

Open Woo POS settings
Switch between Hardware and Store categories
Navigate to Hardware subcategories
Test back navigation

Testing information

Category selection shows visual feedback
Smooth animations between screens
Ripple effects on menu items
Toolbar animations work properly

The tests that have been performed

Manual testing on tablet layout
Navigation between all categories
Animation and visual feedback testing

08-12--14-29.mp4

I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

…new ViewModel for settings navigation state management

Move root destination directly into WooPosSettingsCategory enum to eliminate potential mismatches between categories and their destinations. Remove companion object function that created loose coupling. 🤖 Generated with [Claude Code](https://claude.ai/code)

…destinations

…ubtitles, and proper alignment

…POS settings

dangermattic · 2025-08-12T12:34:28Z

	4 Warnings
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.
⚠️	Class `WooPosSettingsViewModel` is missing tests, but `unit-tests-exemption` label was set to ignore this.
⚠️	Class `WooPosSettingsCategoriesViewModel` is missing tests, but `unit-tests-exemption` label was set to ignore this.
⚠️	Class `WooPosHardwareSettingsViewModel` is missing tests, but `unit-tests-exemption` label was set to ignore this.

Generated by 🚫 Danger

wpmobilebot · 2025-08-12T12:38:55Z

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`60c66f9`
	Direct Download	`woocommerce-wear-prototype-build-pr14459-60c66f9.apk`

wpmobilebot · 2025-08-12T12:51:55Z

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`60c66f9`
	Direct Download	`woocommerce-prototype-build-pr14459-60c66f9.apk`

codecov-commenter · 2025-08-12T18:57:45Z

Codecov Report

❌ Patch coverage is 0% with 107 lines in your changes missing coverage. Please review.
✅ Project coverage is 37.95%. Comparing base (1aaee1e) to head (60c66f9).

Files with missing lines	Patch %	Lines
...woopos/common/composeui/component/WooPosToolbar.kt	0.00%	25 Missing ⚠️
.../android/ui/woopos/settings/WooPosSettingsState.kt	0.00%	23 Missing ⚠️
...roid/ui/woopos/settings/WooPosSettingsViewModel.kt	0.00%	19 Missing ⚠️
...ttings/categories/WooPosSettingsCategoriesState.kt	0.00%	19 Missing ⚠️
...gs/details/hardware/WooPosHardwareSettingsState.kt	0.00%	15 Missing ⚠️
...gs/categories/WooPosSettingsCategoriesViewModel.kt	0.00%	3 Missing ⚠️
...etails/hardware/WooPosHardwareSettingsViewModel.kt	0.00%	3 Missing ⚠️

Additional details and impacted files

@@                                            Coverage Diff                                            @@
##             woomob-1022-woo-possettings-prepare-infrastructure-for-the-settings   #14459      +/-   ##
=========================================================================================================
- Coverage                                                                  37.98%   37.95%   -0.03%     
- Complexity                                                                  9209     9210       +1     
=========================================================================================================
  Files                                                                       1994     1999       +5     
  Lines                                                                     112571   112663      +92     
  Branches                                                                   14852    14860       +8     
=========================================================================================================
+ Hits                                                                       42761    42764       +3     
- Misses                                                                     65902    65992      +90     
+ Partials                                                                    3908     3907       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Copilot

Pull Request Overview

This PR implements a 2-pane settings layout for Woo POS with Android-style UI design, featuring categories on the left and details on the right. The implementation follows a hierarchical navigation structure with visual feedback and animations.

Restructured settings architecture to support 2-pane layout with category navigation
Added Hardware and Store categories with subcategory navigation support
Implemented smooth animations, ripple effects, and visual feedback for user interactions

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
strings.xml	Added string resources for new settings categories and subcategories
WooPosHardwareSettingsViewModel.kt	Created ViewModel for hardware settings with state management
WooPosHardwareSettingsState.kt	Defined data models for hardware settings items with icons and labels
WooPosHardwareSettingsScreen.kt	Implemented hardware settings UI with clickable menu items and ripple effects
WooPosSettingsDetailPaneScreen.kt	Created detail pane with animated transitions and toolbar navigation
WooPosSettingsCategoriesViewModel.kt	Created ViewModel for category selection management
WooPosSettingsCategoriesState.kt	Defined category data models and enum structure
WooPosSettingsCategoriesPaneScreen.kt	Implemented category selection UI with visual selection feedback
WooPosSettingsViewModel.kt	Enhanced main ViewModel with navigation state management
WooPosSettingsState.kt	Defined navigation state and destination hierarchy
WooPosSettingsScreen.kt	Restructured main screen to support 2-pane layout with category and detail views

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-13T10:34:10Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/settings/WooPosSettingsState.kt

+
+data class WooPosSettingsState(
+    val selectedCategory: WooPosSettingsCategory = WooPosSettingsCategory.HARDWARE,
+    val currentDestination: WooPosSettingsDetailDestination = selectedCategory.rootDestination


The default value for currentDestination references selectedCategory.rootDestination, but selectedCategory is also being initialized in the same constructor. This creates a circular dependency where currentDestination depends on selectedCategory's rootDestination, but selectedCategory is initialized with a default value at the same time. This should be explicitly set to WooPosSettingsCategory.HARDWARE.rootDestination to avoid potential initialization issues.

Suggested change

val currentDestination: WooPosSettingsDetailDestination = selectedCategory.rootDestination

val currentDestination: WooPosSettingsDetailDestination = WooPosSettingsCategory.HARDWARE.rootDestination

samiuelson

LGTM! I added a few non-blocking comments.

samiuelson · 2025-08-13T10:21:51Z

.../com/woocommerce/android/ui/woopos/settings/details/hardware/WooPosHardwareSettingsScreen.kt

+                interactionSource = remember { MutableInteractionSource() },
+                indication = ripple()


interactionSource = remember { MutableInteractionSource() }, indication = ripple()

💡 n.p.: aren't these params redundant in clickable? I can't see any difference with or without them on my device.

Indeed. Addressed here - 8bd41fb

samiuelson · 2025-08-13T10:29:06Z

.../kotlin/com/woocommerce/android/ui/woopos/settings/details/WooPosSettingsDetailPaneScreen.kt

+}
+
+@Composable
+private fun DetailPaneToolbar(


💡 What do you think about adapting and reusing WooPosToolbar here instead?

Agree! Implemented here

6550edd

…e and ripple indication

kidinov added 12 commits August 12, 2025 10:35

Add toolbar with back navigation to WooPosSettingsScreen

12f2689

Implement 2-pane settings architecture with string resources

622534b

Refactor WooPosSettingsScreen to use WooPosSettingsViewModel and add …

7117802

…new ViewModel for settings navigation state management

Some simplifications

232f9c8

Rename settings pane functions for consistency and update navigation …

c6fc1fc

…destinations

Update POS settings UI to match Android settings design with icons, s…

c7f4cd6

…ubtitles, and proper alignment

Add scrolling, fix toolbar jumping, and improve detail animations in …

18d4171

…POS settings

Improve detail toolbar animations and fix vertical jumping

e836c24

Update settings UI with Android-style selection

a73b68e

Fix settings detail pane toolbar layout

4099fd0

Add ripple effect to hardware menu items

e157201

kidinov added the feature: POS label Aug 12, 2025

kidinov added this to the 23.1 milestone Aug 12, 2025

kidinov requested a review from samiuelson August 12, 2025 12:34

kidinov marked this pull request as ready for review August 12, 2025 12:35

kidinov added the unit-tests-exemption label Aug 12, 2025

samiuelson self-assigned this Aug 12, 2025

samiuelson requested a review from Copilot August 13, 2025 10:06

This comment was marked as outdated.

Sign in to view

samiuelson requested a review from Copilot August 13, 2025 10:31

Copilot AI reviewed Aug 13, 2025

View reviewed changes

samiuelson approved these changes Aug 13, 2025

View reviewed changes

kidinov added 3 commits August 13, 2025 14:55

Use WooPosToolbar instead of the custom solution

6550edd

Removed redundat riple declaration. Better looking clicking area

8bd41fb

Simplify clickable modifier by removing unnecessary interaction sourc…

60c66f9

…e and ripple indication

Base automatically changed from woomob-1022-woo-possettings-prepare-infrastructure-for-the-settings to trunk August 14, 2025 07:13

kidinov merged commit 261ca27 into trunk Aug 14, 2025
18 checks passed

kidinov deleted the woomob-1023-woo-possettings-2-pane-layout-based-on-the-wireframes branch August 14, 2025 07:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[WOOMOB-1023][Woo POS][Settings] Implement 2-pane layout with Android-style UI design #14459

[WOOMOB-1023][Woo POS][Settings] Implement 2-pane layout with Android-style UI design #14459

Uh oh!

kidinov commented Aug 12, 2025 •

edited

Loading

Uh oh!

dangermattic commented Aug 12, 2025 •

edited

Loading

Uh oh!

wpmobilebot commented Aug 12, 2025 •

edited

Loading

Uh oh!

wpmobilebot commented Aug 12, 2025 •

edited

Loading

Uh oh!

codecov-commenter commented Aug 12, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 13, 2025

Uh oh!

samiuelson left a comment

Uh oh!

samiuelson Aug 13, 2025

Uh oh!

kidinov Aug 13, 2025

Uh oh!

samiuelson Aug 13, 2025

Uh oh!

kidinov Aug 13, 2025

Uh oh!

Uh oh!

Uh oh!

	val currentDestination: WooPosSettingsDetailDestination = selectedCategory.rootDestination
	val currentDestination: WooPosSettingsDetailDestination = WooPosSettingsCategory.HARDWARE.rootDestination

		interactionSource = remember { MutableInteractionSource() },
		indication = ripple()

[WOOMOB-1023][Woo POS][Settings] Implement 2-pane layout with Android-style UI design #14459

[WOOMOB-1023][Woo POS][Settings] Implement 2-pane layout with Android-style UI design #14459

Uh oh!

Conversation

kidinov commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Steps to reproduce

Testing information

The tests that have been performed

Uh oh!

dangermattic commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-commenter commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

samiuelson left a comment

Choose a reason for hiding this comment

Uh oh!

samiuelson Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

kidinov Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

samiuelson Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

kidinov Aug 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kidinov commented Aug 12, 2025 •

edited

Loading

dangermattic commented Aug 12, 2025 •

edited

Loading

wpmobilebot commented Aug 12, 2025 •

edited

Loading

wpmobilebot commented Aug 12, 2025 •

edited

Loading

codecov-commenter commented Aug 12, 2025 •

edited

Loading