CustomizePage Done

src/Winhance.UI/Features/Common/Extensions/DI/UIServicesExtensions.cs

@@ -59,12 +59,12 @@ public static IServiceCollection AddUIServices(this IServiceCollection services)
         services.AddTransient<PowerOptimizationsViewModel>();
         services.AddTransient<GamingOptimizationsViewModel>();
 
-        // Customize ViewModels (Transient - created per page)
-        services.AddTransient<CustomizeViewModel>();
-        services.AddTransient<ExplorerCustomizationsViewModel>();
-        services.AddTransient<StartMenuCustomizationsViewModel>();
-        services.AddTransient<TaskbarCustomizationsViewModel>();
-        services.AddTransient<WindowsThemeCustomizationsViewModel>();
+        // Customize ViewModels (Singleton for state preservation during inner navigation)
+        services.AddSingleton<CustomizeViewModel>();
+        services.AddSingleton<ExplorerCustomizationsViewModel>();
+        services.AddSingleton<StartMenuCustomizationsViewModel>();
+        services.AddSingleton<TaskbarCustomizationsViewModel>();
+        services.AddSingleton<WindowsThemeCustomizationsViewModel>();
 
         // AdvancedTools ViewModels (Transient - created per page)
         services.AddTransient<WimUtilViewModel>();

src/Winhance.UI/Features/Common/Resources/FeatureIcons.xaml

@@ -42,8 +42,22 @@
     <x:String x:Key="PowerIconGlyph">&#xEC0A;</x:String>
     <x:String x:Key="GamingIconGlyph">&#xE7FC;</x:String>
 
-    <!-- ==================== Customize Section Icons ==================== -->
-    <!-- Icons for Customize page feature sections -->
+    <!-- ==================== Customize Section Icons (Material Design - Path Data) ==================== -->
+    <!-- Icons for Customize page feature sections - matching WPF project's Material Design icons -->
+
+    <!-- Brush - Used for Windows Theme -->
+    <x:String x:Key="WindowsThemeIconPath">M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z</x:String>
+
+    <!-- DockBottom - Used for Taskbar -->
+    <x:String x:Key="TaskbarIconPath">M20,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V14H20V18Z</x:String>
+
+    <!-- FileTableBoxOutline - Used for Start Menu -->
+    <x:String x:Key="StartMenuIconPath">M19 3H5C3.89 3 3 3.89 3 5V19C3 20.11 3.89 21 5 21H19C20.11 21 21 20.11 21 19V5C21 3.89 20.11 3 19 3M19 19H5V5H19V19M9 18H6V16H9V18M13 18H10V16H13V18M9 15H6V13H9V15M13 15H10V13H13V15M9 12H6V10H9V12M13 12H10V10H13V12Z</x:String>
+
+    <!-- Folder - Used for Explorer -->
+    <x:String x:Key="ExplorerIconPath">M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z</x:String>
+
+    <!-- Legacy Segoe MDL2 glyphs (kept for backward compatibility) -->
     <x:String x:Key="ExplorerIconGlyph">&#xEC50;</x:String>
     <x:String x:Key="StartMenuIconGlyph">&#xE737;</x:String>
     <x:String x:Key="TaskbarIconGlyph">&#xE700;</x:String>

src/Winhance.UI/Features/Customize/CustomizePage.xaml.cs

@@ -1,18 +1,31 @@
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Navigation;
+using Winhance.UI.Features.Customize.Models;
+using Winhance.UI.Features.Customize.Pages;
 using Winhance.UI.Features.Customize.ViewModels;
 
 namespace Winhance.UI.Features.Customize;
 
 /// <summary>
-/// Page for customizing Windows appearance and behavior.
+/// Shell page for customizing Windows appearance and behavior.
+/// Shows overview cards by default, uses inner Frame for detail pages.
 /// </summary>
 public sealed partial class CustomizePage : Page
 {
     private static readonly string LogFile = Path.Combine(AppContext.BaseDirectory, "..", "..", "..", "..", "..", "startup-debug.log");
     private static void Log(string msg) { try { File.AppendAllText(LogFile, $"[{DateTime.Now:HH:mm:ss.fff}] [CustomizePage] {msg}{Environment.NewLine}"); } catch { } }
 
+    // Map section keys to their icon path resource keys in FeatureIcons.xaml
+    private static readonly Dictionary<string, string> SectionIconResourceKeys = new()
+    {
+        { "Explorer", "ExplorerIconPath" },
+        { "StartMenu", "StartMenuIconPath" },
+        { "Taskbar", "TaskbarIconPath" },
+        { "WindowsTheme", "WindowsThemeIconPath" }
+    };
+
     public CustomizeViewModel ViewModel { get; }
 
     public CustomizePage()
@@ -38,6 +51,11 @@ protected override async void OnNavigatedTo(NavigationEventArgs e)
         {
             Log("OnNavigatedTo starting...");
             base.OnNavigatedTo(e);
+
+            // Ensure we're showing overview on initial navigation
+            ViewModel.CurrentSectionKey = "Overview";
+            UpdateContentVisibility();
+
             Log("Calling ViewModel.InitializeAsync...");
             await ViewModel.InitializeAsync();
             Log("OnNavigatedTo complete");
@@ -53,4 +71,148 @@ protected override void OnNavigatedFrom(NavigationEventArgs e)
         base.OnNavigatedFrom(e);
         ViewModel.OnNavigatedFrom();
     }
+
+    /// <summary>
+    /// Navigates to a specific section by key.
+    /// </summary>
+    public void NavigateToSection(string sectionKey, string? searchText = null)
+    {
+        Type pageType = sectionKey switch
+        {
+            "Explorer" => typeof(ExplorerCustomizePage),
+            "StartMenu" => typeof(StartMenuCustomizePage),
+            "Taskbar" => typeof(TaskbarCustomizePage),
+            "WindowsTheme" => typeof(WindowsThemeCustomizePage),
+            _ => null
+        };
+
+        if (pageType != null)
+        {
+            InnerContentFrame.Navigate(pageType, searchText);
+        }
+        else
+        {
+            // Navigate to overview
+            NavigateToOverview();
+        }
+    }
+
+    /// <summary>
+    /// Returns to the overview (hides detail frame, shows overview cards).
+    /// </summary>
+    public void NavigateToOverview()
+    {
+        ViewModel.CurrentSectionKey = "Overview";
+        InnerContentFrame.Content = null;
+        UpdateContentVisibility();
+    }
+
+    private void InnerContentFrame_Navigated(object sender, NavigationEventArgs e)
+    {
+        // Update the ViewModel's current section key based on the navigated page
+        ViewModel.CurrentSectionKey = e.SourcePageType.Name switch
+        {
+            nameof(ExplorerCustomizePage) => "Explorer",
+            nameof(StartMenuCustomizePage) => "StartMenu",
+            nameof(TaskbarCustomizePage) => "Taskbar",
+            nameof(WindowsThemeCustomizePage) => "WindowsTheme",
+            _ => "Overview"
+        };
+
+        UpdateContentVisibility();
+    }
+
+    private void UpdateContentVisibility()
+    {
+        var isInDetailPage = ViewModel.IsInDetailPage;
+
+        // Toggle between overview and detail frame
+        OverviewContent.Visibility = isInDetailPage ? Visibility.Collapsed : Visibility.Visible;
+        InnerContentFrame.Visibility = isInDetailPage ? Visibility.Visible : Visibility.Collapsed;
+
+        // Update breadcrumb visibility
+        BreadcrumbSeparator.Visibility = isInDetailPage ? Visibility.Visible : Visibility.Collapsed;
+        BreadcrumbSection.Visibility = isInDetailPage ? Visibility.Visible : Visibility.Collapsed;
+
+        // Update the section dropdown icon and text
+        if (isInDetailPage)
+        {
+            BreadcrumbSectionText.Text = ViewModel.CurrentSectionName;
+
+            // Get the icon path data from application resources (FeatureIcons.xaml)
+            if (SectionIconResourceKeys.TryGetValue(ViewModel.CurrentSectionKey, out var resourceKey) &&
+                Application.Current.Resources.TryGetValue(resourceKey, out var pathDataObj) &&
+                pathDataObj is string pathData)
+            {
+                // Parse the path data string into a Geometry
+                var geometry = (Microsoft.UI.Xaml.Media.Geometry)Microsoft.UI.Xaml.Markup.XamlBindingHelper.ConvertValue(
+                    typeof(Microsoft.UI.Xaml.Media.Geometry), pathData);
+                BreadcrumbSectionIcon.Data = geometry;
+            }
+        }
+    }
+
+    // Overview card click handlers
+    private void ExplorerCard_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToSection("Explorer");
+    }
+
+    private void StartMenuCard_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToSection("StartMenu");
+    }
+
+    private void TaskbarCard_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToSection("Taskbar");
+    }
+
+    private void WindowsThemeCard_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToSection("WindowsTheme");
+    }
+
+    // Breadcrumb handlers
+    private void BreadcrumbOverview_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToOverview();
+    }
+
+    private void NavigateExplorer_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToSection("Explorer");
+    }
+
+    private void NavigateStartMenu_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToSection("StartMenu");
+    }
+
+    private void NavigateTaskbar_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToSection("Taskbar");
+    }
+
+    private void NavigateWindowsTheme_Click(object sender, RoutedEventArgs e)
+    {
+        NavigateToSection("WindowsTheme");
+    }
+
+    // Search handlers
+    private void SearchBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
+    {
+        if (args.SelectedItem is SearchSuggestionItem suggestion)
+        {
+            NavigateToSection(suggestion.SectionKey, suggestion.SettingName);
+        }
+    }
+
+    private void SearchBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
+    {
+        if (args.ChosenSuggestion is SearchSuggestionItem suggestion)
+        {
+            NavigateToSection(suggestion.SectionKey, suggestion.SettingName);
+        }
+    }
 }

src/Winhance.UI/Features/Customize/Models/CustomizeSectionInfo.cs

@@ -0,0 +1,41 @@
+namespace Winhance.UI.Features.Customize.Models;
+
+/// <summary>
+/// Contains metadata for a customization section.
+/// </summary>
+public class CustomizeSectionInfo
+{
+    /// <summary>
+    /// Gets the unique key for the section (e.g., "Explorer", "StartMenu").
+    /// </summary>
+    public string Key { get; }
+
+    /// <summary>
+    /// Gets the icon glyph resource key for the section.
+    /// </summary>
+    public string IconGlyphKey { get; }
+
+    /// <summary>
+    /// Gets the display name of the section.
+    /// </summary>
+    public string DisplayName { get; }
+
+    /// <summary>
+    /// Gets the page type for navigation.
+    /// </summary>
+    public Type PageType { get; }
+
+    /// <summary>
+    /// Gets the description of the section.
+    /// </summary>
+    public string Description { get; }
+
+    public CustomizeSectionInfo(string key, string iconGlyphKey, string displayName, string description, Type pageType)
+    {
+        Key = key;
+        IconGlyphKey = iconGlyphKey;
+        DisplayName = displayName;
+        Description = description;
+        PageType = pageType;
+    }
+}

src/Winhance.UI/Features/Customize/Models/SearchSuggestionItem.cs

@@ -0,0 +1,44 @@
+namespace Winhance.UI.Features.Customize.Models;
+
+/// <summary>
+/// Represents a search suggestion item for cross-section searching.
+/// </summary>
+public class SearchSuggestionItem
+{
+    /// <summary>
+    /// Gets or sets the setting name that matched the search.
+    /// </summary>
+    public string SettingName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the section key where this setting is found.
+    /// </summary>
+    public string SectionKey { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the display name of the section.
+    /// </summary>
+    public string SectionDisplayName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the icon glyph for the section.
+    /// </summary>
+    public string SectionIconGlyph { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets the display text for the suggestion.
+    /// </summary>
+    public string DisplayText => $"{SettingName} ({SectionDisplayName})";
+
+    public SearchSuggestionItem()
+    {
+    }
+
+    public SearchSuggestionItem(string settingName, string sectionKey, string sectionDisplayName, string sectionIconGlyph)
+    {
+        SettingName = settingName;
+        SectionKey = sectionKey;
+        SectionDisplayName = sectionDisplayName;
+        SectionIconGlyph = sectionIconGlyph;
+    }
+}

src/Winhance.UI/Features/Customize/Pages/ExplorerCustomizePage.xaml

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page
+    x:Class="Winhance.UI.Features.Customize.Pages.ExplorerCustomizePage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Winhance.UI.Features.Customize.Pages"
+    xmlns:viewModels="using:Winhance.UI.Features.Optimize.ViewModels"
+    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+    xmlns:commonControls="using:Winhance.UI.Features.Common.Controls"
+    x:DefaultBindMode="OneWay"
+    NavigationCacheMode="Disabled">
+
+    <Page.Resources>
+        <!-- ItemTemplate: SettingsCard wraps the shared SettingsCardItem control -->
+        <DataTemplate x:Key="SettingItemTemplate" x:DataType="viewModels:SettingItemViewModel">
+            <controls:SettingsCard
+                Header="{x:Bind Name}"
+                Description="{x:Bind Description}"
+                IsEnabled="{x:Bind EffectiveIsEnabled}"
+                Visibility="{x:Bind IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
+                HeaderIcon="{x:Bind Converter={StaticResource SettingIconConverter}}"
+                Padding="16,12,16,12">
+                <commonControls:SettingsCardItem Setting="{x:Bind}"/>
+            </controls:SettingsCard>
+        </DataTemplate>
+    </Page.Resources>
+
+    <Grid>
+        <!-- Loading State -->
+        <ProgressRing
+            IsActive="{x:Bind ViewModel.IsLoading}"
+            Visibility="{x:Bind ViewModel.IsLoading}"
+            Width="48"
+            Height="48"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"/>
+
+        <!-- Main Content -->
+        <ScrollView Visibility="{x:Bind ViewModel.IsNotLoading}">
+            <StackPanel Spacing="8" MaxWidth="{StaticResource SettingsContentMaxWidth}" Margin="{StaticResource SettingsContentMargin}" HorizontalAlignment="Stretch">
+                <ItemsRepeater
+                    ItemsSource="{x:Bind ViewModel.ExplorerViewModel.Settings}"
+                    ItemTemplate="{StaticResource SettingItemTemplate}"/>
+
+                <!-- No Results Message -->
+                <TextBlock
+                    Text="No settings match your search."
+                    Style="{StaticResource BodyTextBlockStyle}"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    HorizontalAlignment="Center"
+                    Margin="0,40,0,0"
+                    Visibility="{x:Bind ViewModel.HasNoSearchResults, Converter={StaticResource BooleanToVisibilityConverter}}"/>
+            </StackPanel>
+        </ScrollView>
+    </Grid>
+</Page>