Add personalization features: Favorites and Recently Viewed Samples by Zakariathr22 · Pull Request #1875 · microsoft/WinUI-Gallery

Zakariathr22 · 2025-05-09T23:16:38Z

Description

This PR introduces Favorites and Recently Viewed Samples to enhance personalization. These features aim to improve navigation efficiency and user engagement.
Main changes are:

Added StringListSettingsHelper class to manage storing/retrieving recently viewed and favorite samples.
Integrated favorite button in page headers with full persistence logic.
Introduced HorizontalScrollContainer control (adapted from AI Dev Gallery's TileGallery).
Refactored HomePage layout to include recent/favorite tabs using the new components.
Created and applied new styles: SingleRowGridViewItemStyle, TokenViewSelectorBarStyle, and TokenViewSelectorBarItemStyle. (SelectorBar styles was adapted from AI Dev Gallery)
Moved sample click logic into the ItemTemplate for better reuse and separation of concerns.
Removed obsolete click-handling logic from all pages now using the updated template.
Redesigned ItemTemplate layout to align visually with the HorizontalScrollContainer.
Added new settings card to SettingsPage with options to clear recently visited samples and unfavorite all items.
Design tweaks.

Motivation and Context

This update brings user-centric personalization, allowing quick access to preferred and recent samples.
Closes Proposal: Adding Favorites and Recently Viewed Samples #1862

How Has This Been Tested?

Manually tested.

Screenshots (if appropriate)

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

References

- Implement new AdaptiveSelectorBar control for responsive tab-like navigation - Add AdaptiveSelectorBarItem class to represent selectable items - Create styles for selected/unselected AdaptiveSelectorBarItems - Update Home page to include SampleFilterBar using AdaptiveSelectorBar

Zakariathr22 · 2025-05-09T23:22:45Z

@niels9001 @marcelwgn
This PR introduces significant logic and design updates and will require some time to complete.
Before proceeding, could you please confirm whether the proposed plan is approved or not?
I look forward to your decision.

- Implement StringListSettingsHelper for managing string lists in app settings - Add constants for Favorites and RecentlyVisited keys - Add Favorite button with tooltip and icon toggle to PageHeader - Manage favorite state handling and persist it using helper

- Implemented filtering for Recently Added, Recently Updated, Recently Visited, Favorites, and All Samples - Hooked up ItemsRepeater to dynamically update based on selected filter - Ensured data consistency with cleanup for invalid favorites and recently visited

…lable based on the selected filter

…plates now manage that logic.

…ted samples. Add new CriticalButtonStyle

…amples page.

Zakariathr22 · 2025-05-12T21:33:30Z

@niels9001 @marcelwgn This PR introduces significant logic and design updates and will require some time to complete. Before proceeding, could you please confirm whether the proposed plan is approved or not? I look forward to your decision.

Couldn't stop overthinking about this, so I pushed a PR with breaking changes just to shut my brain up.
Now I’ve replaced overthinking with regret 😂, I wish it will be merged.

niels9001 · 2025-05-13T15:06:39Z

Hey @Zakariathr22, thanks for opening this PR!

We discussed this PR internally and we believe the recent/favorite tabs brings additional value (can't wait to use it myself😁!). We just need to ensure that we are not overcomplicating things, therefore we are suggesting a few changes:

Tabs

Would it make sense to just have 2 tabs?

Tab 1: Recent

horizontal scroller with the last (5? 6? 7?) recent samples you've visited. (See AI Dev Gallery for an example)
gridview with 'recently and new samples'

Tab 2: favorites

gridview of favorite items

This keeps things simple, without providing too many options. Since we have the "All samples" tab already in the main menu, we probably don't need it on the homepage.

Tab controller

Creating custom controls can always introduce potential a11y issues - so I was wondering if we could use a simple SelectorBar, with a custom style? We've used this custom style in AI Dev Gallery that we could consider to bring over? https://github.com/microsoft/ai-dev-gallery/blob/main/AIDevGallery/Styles/SelectorBar.xaml

Other changes

We were wondering if there's a lot of value in having the "send feedback" button in the PageHeader. Would it make sense to replace it with the favorite button? Thoughts?
These changes on the homepage might trigger additional styling tweaks to the cards carousel and the items itself. I'll sync with the design team to figure out if any tweaks are needed, and we can help with those :)!

All and all, super appreciative of the work! It's awesome 🚀

Zakariathr22 · 2025-05-13T18:30:11Z

Would it make sense to just have 2 tabs?

I think the data about the recently added and recently updated samples is also important.
Maybe we can change the order to: recently visited, favorite samples, recently added, recently updated.
Also, if we remove the recently added and recently updated samples, what should we do with their data in the JSON file?

last (5? 6? 7?) recent samples

It already retrieves the last 15 visited samples. We can simply edit it in PageHeader.xaml.cs.

private const int _maxRecentlyVisitedPages = 15;

Creating custom controls can always introduce potential a11y issues

But it does solve the overflow issue, and we’ll need it if we keep the list as I initially suggested.
Can we discuss these a11y issues first? Maybe I can fix it.

We've used this custom style in AI Dev Gallery that we could consider to bring over?

Yes, it makes sense only if we're going to remove the recently added and recently updated data.
If we agree on that, I’ll be happy to handle it.

We were wondering if there's a lot of value in having the "send feedback" button in the PageHeader.

Personally, it was the first thing that guided me to this repo 😂.
Maybe we’re not using it as developers, but from a user’s perspective, I think it’s important.

I'll sync with the design team to figure out if any tweaks are needed, and we can help with those :)!

Could you also take a look at the CriticalButtonStyle? I used SystemFillColorCriticalBrush as the background and created the other theme resources, but I’m not sure if it follows the best design practices.

Generally, the implemented design was inspired by the Windows File Explorer, which adds familiarity and aligns with the overall Windows design language.
I was also thinking, can we move all the samples to the home page (as they’re already shown in this PR) and remove that extra page, so all navigation stays on the home page?

These my thoughts, so if what you're proposing is just a suggestion, I might disagree on a few things 😅.
But if it's a final decision, I’ll be happy to implement it.

Changed the constant `_maxRecentlyVisitedPages` in the `PageHeader` class from 15 to 7, limiting the number of recently visited pages that can be tracked or displayed.

Renamed `SettingsExpander` to `SamplesSettingsExpander` and updated its header to "Sample preferences". Adjusted `SettingsCard` headers for consistency by changing them to lowercase. Enhanced the logic in `SettingsPage.xaml.cs` to expand the `SamplesSettingsExpander` based on the presence of items in the recently visited samples or favorites list.

…akariathr22/WinUI-Gallery into feature/sample-personalization

niels9001 · 2025-05-13T21:20:25Z

The proposal was to have 2 tabs. The default tab (Recent - or if we have a better name for it) would combine these 3 into a single view:

Recently visited (new)
Recently or new samples

The reason for this is having 5 tabs with kind of similiar things make the UX more complex. We want the landingspage to be as calm as possible and reduce the number of ways to navigate to similar content.

Zakariathr22 · 2025-05-13T22:19:24Z

The proposal was to have 2 tabs. The default tab (Recent - or if we have a better name for it) would combine these 3 into a single view:

Recently visited (new)

Recently or new samples

The reason for this is having 5 tabs with kind of similiar things make the UX more complex. We want the landingspage to be as calm as possible and reduce the number of ways to navigate to similar content.

@niels9001, do you mean something like this?

niels9001 · 2025-05-13T22:21:11Z

Exactly!

Zakariathr22 · 2025-05-13T22:25:26Z

Exactly!

🤝 Got it
It might just take a bit of time to get done.

- Replaced custom tab implementation with a styled SelectorBar for better accessibility and consistency. - Reduced tabs to only "Recent" and "Favorites". - "Recent" tab now includes a horizontal scroller for the last visited samples (up to 7), followed by 2 ItemRepeaters of recently added and updated a samples. - "Favorites" tab displays an ItemsRepeater of favorite items. - Removed redundant "All samples" section from homepage, aligning with navigation structure. - Applied visual style from AI Dev Gallery for SelectorBar to maintain design consistency. - Redesign item template to align the new design and prevent hovering border issue in GridView.

…akariathr22/WinUI-Gallery into feature/sample-personalization

…pdatedSamplesList

niels9001 · 2025-05-29T13:32:18Z

/azp run

…item in the list.

…ntrol to the NavigationRootPage

…akariathr22/WinUI-Gallery into feature/sample-personalization

Removed error handling for adding items to favorites. The code now directly calls `TryAddItem` without checking the result.

niels9001 · 2025-06-02T08:46:23Z

/azp run

WinUIGallery/Pages/NavigationRootPage.xaml.cs

marcelwgn · 2025-06-02T09:09:38Z

/azp run

marcelwgn · 2025-06-02T09:35:16Z

/azp run

niels9001 · 2025-06-03T17:33:27Z

/azp run

ayushjai30 · 2025-06-04T06:59:37Z

/azp run

niels9001

@Zakariathr22 LGTM! Again.. AMAZING work!!!!

Zakariathr22 and others added 2 commits May 9, 2025 23:19

Merge branch 'microsoft:main' into feature/sample-personalization

a22b387

Zakariathr22 added 10 commits May 11, 2025 00:24

Design tweak

a52e948

Increase window minimum width

60b36d8

Added a new StackPanel for fallback messages when no items are avai…

917c248

…lable based on the selected filter

Remove item click handling from the Items GridViews since the ItemTem…

985b91c

…plates now manage that logic.

Add a setting cards with options to clear favorites and recently visi…

4b4b606

…ted samples. Add new CriticalButtonStyle

Design tweaks

104641c

Change the icon of the Spacing page to avoid confusion with the All S…

865c49e

…amples page.

Clean PageHeader code

67ea1b7

Zakariathr22 marked this pull request as ready for review May 12, 2025 21:24

Zakariathr22 and others added 4 commits May 13, 2025 19:37

Merge branch 'main' into feature/sample-personalization

68d99d9

Reduce max recently visited pages to 7

9231a2d

Changed the constant `_maxRecentlyVisitedPages` in the `PageHeader` class from 15 to 7, limiting the number of recently visited pages that can be tracked or displayed.

Merge branch 'feature/sample-personalization' of https://github.com/Z…

f47e351

…akariathr22/WinUI-Gallery into feature/sample-personalization

Zakariathr22 marked this pull request as draft May 14, 2025 09:54

Zakariathr22 added 3 commits May 14, 2025 21:29

SelectorBar design tweak

4c0ec3f

Design Tweak

4fc861a

Zakariathr22 marked this pull request as ready for review May 14, 2025 21:47

Zakariathr22 added 4 commits May 27, 2025 09:26

Merge branch 'feature/sample-personalization' of https://github.com/Z…

f4eac02

…akariathr22/WinUI-Gallery into feature/sample-personalization

Merge branch 'main' into feature/sample-personalization

11a83fd

Renamed ClearList to Delete and HasList to Exists for clarity

be8addd

Changed list name from RecentlyUpdatedSamplesList to RecentlyAddedOrU…

8a4b719

…pdatedSamplesList

niels9001 requested a review from marcelwgn May 27, 2025 16:05

Zakariathr22 added 3 commits May 27, 2025 23:13

Update comments

5f3dbef

fix

dfc8e16

Merge branch 'microsoft:main' into feature/sample-personalization

153603c

Zakariathr22 added 8 commits May 29, 2025 16:42

Check for the existence of the specified key and the presence of the …

7a3fb2d

…item in the list.

Enhance visual transitions in SettingsPage

35a5803

Remove unnecessary remarks from SettingsHelper

07b7249

Remove unnecessary content dialog

5aeae7b

Move the logic for marking recently visited samples from the HeaderCo…

523bdc2

…ntrol to the NavigationRootPage

Merge branch 'feature/sample-personalization' of https://github.com/Z…

9ed97c8

…akariathr22/WinUI-Gallery into feature/sample-personalization

Simplify favorites addition logic in PageHeader

6bb1f14

Removed error handling for adding items to favorites. The code now directly calls `TryAddItem` without checking the result.

Merge branch 'main' into feature/sample-personalization

475b300

marcelwgn reviewed Jun 2, 2025

View reviewed changes

WinUIGallery/Pages/NavigationRootPage.xaml.cs Outdated Show resolved Hide resolved

marcelwgn approved these changes Jun 2, 2025

View reviewed changes

marcelwgn enabled auto-merge (squash) June 2, 2025 09:12

Invert if

d6a6f1c

auto-merge was automatically disabled June 4, 2025 02:36
Head branch was pushed to by a user without write access

niels9001 approved these changes Jun 4, 2025

View reviewed changes

niels9001 merged commit b68128f into microsoft:main Jun 4, 2025
2 checks passed

niels9001 deleted the feature/sample-personalization branch June 4, 2025 08:16

Conversation

Zakariathr22 commented May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate)

Types of changes

References

Uh oh!

Zakariathr22 commented May 9, 2025

Uh oh!

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

Uh oh!

Uh oh!

niels9001 commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tabs

Tab controller

Other changes

Uh oh!

Zakariathr22 commented May 13, 2025

Uh oh!

niels9001 commented May 13, 2025

Uh oh!

Zakariathr22 commented May 13, 2025

Uh oh!

niels9001 commented May 13, 2025

Uh oh!

Zakariathr22 commented May 13, 2025

Uh oh!

niels9001 commented May 29, 2025

Uh oh!

niels9001 commented Jun 2, 2025

Uh oh!

Uh oh!

marcelwgn commented Jun 2, 2025

Uh oh!

marcelwgn commented Jun 2, 2025

Uh oh!

niels9001 commented Jun 3, 2025

Uh oh!

ayushjai30 commented Jun 4, 2025

Uh oh!

niels9001 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Zakariathr22 commented May 9, 2025 •

edited

Loading

Zakariathr22 commented May 12, 2025 •

edited

Loading

niels9001 commented May 13, 2025 •

edited

Loading