MainPage.xaml

<Page
    x:Class="SonicExplorer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SonicExplorer"
    xmlns:models="using:SonicExplorerLib.Models"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Loaded="Page_Loaded"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <!-- Accent gradient for hero section -->
        <LinearGradientBrush x:Key="HeroGradientBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="#6366F1" Offset="0"/>
            <GradientStop Color="#8B5CF6" Offset="0.5"/>
            <GradientStop Color="#A855F7" Offset="1"/>
        </LinearGradientBrush>
        
        <!-- Subtle card background -->
        <AcrylicBrush x:Key="SearchBoxBackgroundBrush"
                      BackgroundSource="Backdrop"
                      TintColor="{ThemeResource SystemAltHighColor}"
                      TintOpacity="0.8"
                      FallbackColor="{ThemeResource SystemAltHighColor}"/>
    </Page.Resources>

    <Grid>
        <!-- Main Navigation -->
        <muxc:NavigationView x:Name="NavView" 
                             PaneDisplayMode="Top"
                             IsSettingsVisible="False"
                             IsBackButtonVisible="Collapsed"
                             SelectionChanged="NavView_SelectionChanged"
                             ItemInvoked="NavView_ItemInvoked">
            
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Content="All" Tag="All" IsSelected="True">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE8B7;"/>
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
                <muxc:NavigationViewItem Content="Documents" Tag="Documents">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE8A5;"/>
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
                <muxc:NavigationViewItem Content="Downloads" Tag="Downloads">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE896;"/>
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
                <muxc:NavigationViewItem Content="Desktop" Tag="Desktop">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE7F4;"/>
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
                <muxc:NavigationViewItem Content="Pictures" Tag="Pictures">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xEB9F;"/>
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
                <muxc:NavigationViewItem Content="Music" Tag="Music">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE8D6;"/>
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
                <muxc:NavigationViewItem Content="Videos" Tag="Videos">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE8B2;"/>
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
                
                <!-- Custom Folders Dropdown -->
                <muxc:NavigationViewItem x:Name="CustomFoldersNavItem" Content="Custom" Tag="CustomFolders" SelectsOnInvoked="False">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xED25;"/>
                    </muxc:NavigationViewItem.Icon>
                    <FlyoutBase.AttachedFlyout>
                        <MenuFlyout x:Name="CustomFoldersFlyout" Placement="Bottom">
                            <MenuFlyoutItem Text="No custom folders" IsEnabled="False" x:Name="NoCustomFoldersMenuItem"/>
                        </MenuFlyout>
                    </FlyoutBase.AttachedFlyout>
                </muxc:NavigationViewItem>
                
                <muxc:NavigationViewItem Content="+ Add" Tag="AddFolder" SelectsOnInvoked="False">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE8F4;"/>
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
            </muxc:NavigationView.MenuItems>

            <!-- Main Content Area -->
            <ScrollViewer>
                <Grid Padding="48,32,48,48">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <!-- Hero Search Section -->
                    <StackPanel Grid.Row="0" 
                                HorizontalAlignment="Center" 
                                Spacing="20" 
                                Margin="0,20,0,40">
                        
                        <!-- App Logo -->
                        <Grid HorizontalAlignment="Center">
                            <Ellipse Width="100" Height="100" 
                                     Fill="{StaticResource HeroGradientBrush}" 
                                     Opacity="0.15"/>
                            <Image Source="Assets/RocketImage.png" 
                                   Height="70" Width="70" 
                                   HorizontalAlignment="Center" 
                                   VerticalAlignment="Center"/>
                        </Grid>
                        
                        <!-- Tagline -->
                        <TextBlock Text="Find any file, instantly."
                                   Style="{ThemeResource SubtitleTextBlockStyle}"
                                   Opacity="0.7"
                                   HorizontalAlignment="Center"/>
                        
                        <!-- Enhanced Search Box -->
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" MaxWidth="700"/>
                            </Grid.ColumnDefinitions>
                            
                            <AutoSuggestBox x:Name="mySearchBox"
                                            QueryIcon="Find"
                                            PlaceholderText="Search files by name or extension (e.g. .pdf, .docx)"
                                            QuerySubmitted="mySearchBox_QuerySubmitted"
                                            TextChanged="mySearchBox_TextChanged" 
                                            IsEnabled="{x:Bind AllowSearch, Mode=OneWay}"
                                            Height="48"
                                            FontSize="16"
                                            Padding="16,12"
                                            CornerRadius="8"
                                            HorizontalAlignment="Stretch"/>
                        </Grid>
                        
                        <!-- Search Tips -->
                        <StackPanel Orientation="Horizontal" 
                                    HorizontalAlignment="Center" 
                                    Spacing="16"
                                    Opacity="0.5">
                            <StackPanel Orientation="Horizontal" Spacing="4">
                                <FontIcon Glyph="&#xE946;" FontSize="12"/>
                                <TextBlock Text="Try: report.pdf" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" Spacing="4">
                                <FontIcon Glyph="&#xE946;" FontSize="12"/>
                                <TextBlock Text="Try: .xlsx" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" Spacing="4">
                                <FontIcon Glyph="&#xE946;" FontSize="12"/>
                                <TextBlock Text="Try: project notes" Style="{ThemeResource CaptionTextBlockStyle}"/>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>

                    <!-- Results Section -->
                    <Grid Grid.Row="1">
                        <!-- Search Results -->
                        <ListView ItemsSource="{x:Bind SearchResults, Mode=OneWay}"
                                  x:Name="ResultList"
                                  ItemClick="ListView_ItemClick"
                                  IsItemClickEnabled="True"
                                  Visibility="{x:Bind AllowSearch, Mode=OneWay}"
                                  SelectionMode="None">
                            <ListView.ItemContainerStyle>
                                <Style TargetType="ListViewItem">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                    <Setter Property="Padding" Value="0,4"/>
                                    <Setter Property="Margin" Value="0"/>
                                </Style>
                            </ListView.ItemContainerStyle>
                        </ListView>

                        <!-- Recently Opened Section -->
                        <StackPanel Visibility="{x:Bind ShowRecentFiles, Mode=OneWay}" Spacing="16">
                            <muxc:Expander HorizontalAlignment="Stretch"
                                           HorizontalContentAlignment="Stretch"
                                           IsExpanded="True">
                                <muxc:Expander.Header>
                                    <StackPanel Orientation="Horizontal" Spacing="8">
                                        <FontIcon Glyph="&#xE823;" FontSize="16"/>
                                        <TextBlock Text="Recently Opened" 
                                                   Style="{ThemeResource BodyStrongTextBlockStyle}"/>
                                    </StackPanel>
                                </muxc:Expander.Header>
                                
                                <ListView ItemsSource="{x:Bind RecentFiles, Mode=OneWay}"
                                          IsItemClickEnabled="True"
                                          ItemClick="RecentListView_ItemClick"
                                          SelectionMode="None"
                                          Margin="0,8,0,0">
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="models:RecentOpenItem">
                                            <Grid Padding="12,10" 
                                                  Background="{ThemeResource SystemControlBackgroundAltHighBrush}"
                                                  CornerRadius="6"
                                                  Margin="0,2">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <FontIcon Glyph="&#xE8A5;" 
                                                          FontSize="16" 
                                                          Margin="0,0,12,0"
                                                          Foreground="{ThemeResource SystemControlForegroundAccentBrush}"/>
                                                <StackPanel Grid.Column="1" VerticalAlignment="Center">
                                                    <TextBlock Text="{x:Bind RecentItems.fileName}" 
                                                               FontWeight="SemiBold"/>
                                                    <TextBlock Text="{x:Bind RecentItems.path}" 
                                                               FontSize="12"
                                                               Opacity="0.6"
                                                               TextTrimming="CharacterEllipsis"/>
                                                </StackPanel>
                                            </Grid>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                    <ListView.ItemContainerStyle>
                                        <Style TargetType="ListViewItem">
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                            <Setter Property="Padding" Value="0"/>
                                            <Setter Property="Margin" Value="0,2"/>
                                        </Style>
                                    </ListView.ItemContainerStyle>
                                </ListView>
                            </muxc:Expander>
                        </StackPanel>
                        </Grid>
                </Grid>
            </ScrollViewer>
        </muxc:NavigationView>
        
        <!-- Loading Overlay -->
        <Grid x:Name="LoadingOverlay" 
              Visibility="Collapsed" 
              Background="{ThemeResource SystemControlBackgroundAltMediumHighBrush}">
            <StackPanel HorizontalAlignment="Center" 
                        VerticalAlignment="Center" 
                        Spacing="16">
                <muxc:ProgressRing IsActive="True" Width="48" Height="48"/>
                <TextBlock x:Name="LoadingText" 
                           Text="Indexing folder..." 
                           Style="{ThemeResource BodyStrongTextBlockStyle}"
                           HorizontalAlignment="Center"/>
            </StackPanel>
        </Grid>
    </Grid>
</Page>