NotesPanelWindow.xaml

<Window
    x:Class="NoteIt.NotesPanelWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NoteIt">

    <!-- RootPanel's Background is left null; the Acrylic backdrop (applied
         in code-behind, WindowEffects.ApplyAcrylicBackdrop) paints behind
         it and stays attached for the whole slide animation. -->
    <Grid x:Name="RootPanel">
        <Grid.Resources>
            <Style x:Key="NoteItemContainerStyle" TargetType="ListViewItem">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Padding" Value="0"/>
            </Style>

            <!-- Shared row template for both PinnedList and HistoryList (see
                 NotesPanelWindow.xaml.cs: PinnedItems/UnpinnedItems are two
                 independent ObservableCollections now, one per ListView,
                 instead of one combined FilteredItems). Pulled out to a
                 shared resource rather than declared twice so a future
                 tweak to the row layout only has to happen once. -->
            <DataTemplate x:Key="NoteItemTemplate" x:DataType="local:NoteItem">
                <Grid PointerEntered="OnItemPointerEntered"
                      PointerExited="OnItemPointerExited"
                      Tag="{x:Bind}"
                      MinHeight="124"
                      Margin="0,2,0,2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="30"/>
                    </Grid.ColumnDefinitions>

                    <Border x:Name="RowHighlight"
                            Grid.ColumnSpan="2"
                            Background="{ThemeResource SubtleFillColorSecondaryBrush}"
                            CornerRadius="4"
                            Opacity="0"/>

                    <!-- The note itself: an inline-editable, borderless
                         multi-line TextBox rather than a read-only button:
                         notes are meant to be typed into directly, not
                         clicked to copy. Text is pushed to/from the model in
                         code-behind (OnNoteTextChanged) rather than a
                         TwoWay x:Bind, so edits survive ListView container
                         recycling cleanly. See NotesPanelWindow.xaml.cs. -->
                    <StackPanel Grid.Column="0"
                                Orientation="Vertical"
                                Margin="6,6,4,6">
                        <!-- MaxHeight caps the preview at ~10 lines (13px
                             font, ~19px line height, plus the TextBox's own
                             vertical padding). Longer notes stay fully
                             editable: they just scroll internally
                             (ScrollViewer.VerticalScrollBarVisibility="Auto")
                             rather than being cut off; see
                             UpdateMoreIndicator in the code-behind, which
                             measures that internal ScrollViewer to decide
                             whether to show the chevron below. -->
                        <Grid>
                            <TextBox Text="{x:Bind Text, Mode=OneWay}"
                                     TextChanged="OnNoteTextChanged"
                                     Tag="{x:Bind}"
                                     PlaceholderText="Empty note"
                                     AcceptsReturn="True"
                                     TextWrapping="Wrap"
                                     IsSpellCheckEnabled="False"
                                     BorderThickness="0"
                                     Background="Transparent"
                                     Padding="4,2,4,2"
                                     FontSize="13"
                                     MaxHeight="194"
                                     ScrollViewer.VerticalScrollBarVisibility="Auto"
                                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>

                            <!-- Overflow indicator: collapsed by default,
                                 shown by UpdateMoreIndicator once a note's
                                 content actually exceeds the 10-line cap
                                 above. -->
                            <FontIcon x:Name="MoreIndicator"
                                      Glyph="&#xE70D;"
                                      FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                      FontSize="10"
                                      Opacity="0.5"
                                      HorizontalAlignment="Right"
                                      VerticalAlignment="Bottom"
                                      Margin="0,0,4,3"
                                      IsHitTestVisible="False"
                                      Visibility="Collapsed"
                                      ToolTipService.ToolTip="Note continues: open in editor to see the rest"/>
                        </Grid>
                        <TextBlock Text="{x:Bind ModifiedDisplay, Mode=OneWay}"
                                   FontSize="11"
                                   Opacity="0.55"
                                   Margin="4,2,0,0"/>
                    </StackPanel>

                    <!-- Reserved button-stack column: copy on top, pin, then
                         delete. All three live in their own column (not
                         overlaid on the text) and are toggled together on
                         hover in code-behind. -->
                    <StackPanel Grid.Column="1"
                                Orientation="Vertical"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Spacing="4"
                                Margin="0,8,6,0">
                        <!-- Opens the note in its own resizable editor
                             window (Markdown toolbar, preview toggle, Save
                             button) - see NotesPanelWindow.OnOpenEditorClicked
                             and UI/NoteEditorWindow. -->
                        <Button x:Name="EditButton"
                                Click="OnOpenEditorClicked"
                                Tag="{x:Bind}"
                                Content="&#xE70F;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="0"
                                IsHitTestVisible="False"
                                ToolTipService.ToolTip="Edit in window"/>

                        <!-- Pops the note out into a small, movable,
                             always-on-top mini window (miniature notepad
                             look) that stays visible over other apps - see
                             NotesPanelWindow.OnPopOutClicked and
                             UI/StickyPopoutWindow. -->
                        <Button x:Name="PopOutButton"
                                Click="OnPopOutClicked"
                                Tag="{x:Bind}"
                                Content="&#xE8A7;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="0"
                                IsHitTestVisible="False"
                                ToolTipService.ToolTip="Pop out"/>

                        <Button x:Name="CopyButton"
                                Click="OnCopyNoteClicked"
                                Tag="{x:Bind}"
                                Content="&#xE8C8;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="0"
                                IsHitTestVisible="False"
                                ToolTipService.ToolTip="Copy to clipboard"/>

                        <!-- Content, Opacity and IsHitTestVisible are
                             data-bound (Mode=OneWay) rather than set once:
                             IsPinned raises PropertyChanged, so this swaps
                             between the Pin/UnPin glyph and stays visible
                             once pinned even after the pointer leaves the
                             row. -->
                        <Button x:Name="PinButton"
                                Click="OnPinItemClicked"
                                Tag="{x:Bind}"
                                Content="{x:Bind PinGlyph, Mode=OneWay}"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="{x:Bind PinOpacity, Mode=OneWay}"
                                IsHitTestVisible="{x:Bind IsPinned, Mode=OneWay}"/>

                        <Button x:Name="RemoveButton"
                                Click="OnRemoveItemClicked"
                                Tag="{x:Bind}"
                                Content="&#xE711;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="0"
                                IsHitTestVisible="False"
                                ToolTipService.ToolTip="Delete note"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>

            <!-- PinnedList-only variant of NoteItemTemplate above: same row,
                 plus a grip column on the left for drag-reordering. Kept as
                 its own template (rather than adding a collapsed-for-
                 history grip column to the shared one) since the grip and
                 its drag behavior are meaningless on HistoryList, which
                 never reorders. -->
            <DataTemplate x:Key="PinnedNoteItemTemplate" x:DataType="local:NoteItem">
                <Grid PointerEntered="OnItemPointerEntered"
                      PointerExited="OnItemPointerExited"
                      Tag="{x:Bind}"
                      MinHeight="124"
                      Margin="0,2,0,2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="30"/>
                    </Grid.ColumnDefinitions>

                    <Border x:Name="RowHighlight"
                            Grid.ColumnSpan="3"
                            Background="{ThemeResource SubtleFillColorSecondaryBrush}"
                            CornerRadius="4"
                            Opacity="0"/>

                    <!-- Grip: purely visual. Reordering is driven by
                         PinnedList's own built-in CanReorderItems/AllowDrop
                         drag (see PinnedList below), which recognizes a
                         press-and-drag started anywhere on the row/item
                         container, not just this column. Left in place as a
                         visual cue for where/how to grab the row, and
                         because its 24px column still reserves layout space
                         so the content column doesn't shift when switching
                         between templates. -->
                    <Grid Grid.Column="0"
                          Width="24"
                          Background="Transparent">
                        <Grid HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              ColumnSpacing="4"
                              RowSpacing="4"
                              IsHitTestVisible="False">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Ellipse Grid.Row="0" Grid.Column="0" Width="3" Height="3" Fill="{ThemeResource TextFillColorSecondaryBrush}"/>
                            <Ellipse Grid.Row="0" Grid.Column="1" Width="3" Height="3" Fill="{ThemeResource TextFillColorSecondaryBrush}"/>
                            <Ellipse Grid.Row="1" Grid.Column="0" Width="3" Height="3" Fill="{ThemeResource TextFillColorSecondaryBrush}"/>
                            <Ellipse Grid.Row="1" Grid.Column="1" Width="3" Height="3" Fill="{ThemeResource TextFillColorSecondaryBrush}"/>
                            <Ellipse Grid.Row="2" Grid.Column="0" Width="3" Height="3" Fill="{ThemeResource TextFillColorSecondaryBrush}"/>
                            <Ellipse Grid.Row="2" Grid.Column="1" Width="3" Height="3" Fill="{ThemeResource TextFillColorSecondaryBrush}"/>
                        </Grid>
                    </Grid>

                    <StackPanel Grid.Column="1"
                                Orientation="Vertical"
                                Margin="6,6,4,6">
                        <Grid>
                            <TextBox Text="{x:Bind Text, Mode=OneWay}"
                                     TextChanged="OnNoteTextChanged"
                                     Tag="{x:Bind}"
                                     PlaceholderText="Empty note"
                                     AcceptsReturn="True"
                                     TextWrapping="Wrap"
                                     IsSpellCheckEnabled="False"
                                     BorderThickness="0"
                                     Background="Transparent"
                                     Padding="4,2,4,2"
                                     FontSize="13"
                                     MaxHeight="194"
                                     ScrollViewer.VerticalScrollBarVisibility="Auto"
                                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>

                            <FontIcon x:Name="MoreIndicator"
                                      Glyph="&#xE70D;"
                                      FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                      FontSize="10"
                                      Opacity="0.5"
                                      HorizontalAlignment="Right"
                                      VerticalAlignment="Bottom"
                                      Margin="0,0,4,3"
                                      IsHitTestVisible="False"
                                      Visibility="Collapsed"
                                      ToolTipService.ToolTip="Note continues: open in editor to see the rest"/>
                        </Grid>
                        <TextBlock Text="{x:Bind ModifiedDisplay, Mode=OneWay}"
                                   FontSize="11"
                                   Opacity="0.55"
                                   Margin="4,2,0,0"/>
                    </StackPanel>

                    <StackPanel Grid.Column="2"
                                Orientation="Vertical"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Spacing="4"
                                Margin="0,8,6,0">
                        <Button x:Name="EditButton"
                                Click="OnOpenEditorClicked"
                                Tag="{x:Bind}"
                                Content="&#xE70F;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="0"
                                IsHitTestVisible="False"
                                ToolTipService.ToolTip="Edit in window"/>

                        <Button x:Name="PopOutButton"
                                Click="OnPopOutClicked"
                                Tag="{x:Bind}"
                                Content="&#xE8A7;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="0"
                                IsHitTestVisible="False"
                                ToolTipService.ToolTip="Pop out"/>

                        <Button x:Name="CopyButton"
                                Click="OnCopyNoteClicked"
                                Tag="{x:Bind}"
                                Content="&#xE8C8;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="0"
                                IsHitTestVisible="False"
                                ToolTipService.ToolTip="Copy to clipboard"/>

                        <Button x:Name="PinButton"
                                Click="OnPinItemClicked"
                                Tag="{x:Bind}"
                                Content="{x:Bind PinGlyph, Mode=OneWay}"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="{x:Bind PinOpacity, Mode=OneWay}"
                                IsHitTestVisible="{x:Bind IsPinned, Mode=OneWay}"/>

                        <Button x:Name="RemoveButton"
                                Click="OnRemoveItemClicked"
                                Tag="{x:Bind}"
                                Content="&#xE711;"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="11"
                                Width="24"
                                Height="24"
                                Padding="0"
                                CornerRadius="4"
                                Opacity="0"
                                IsHitTestVisible="False"
                                ToolTipService.ToolTip="Delete note"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </Grid.Resources>

        <!-- Grain overlay. Declared first (before Container) so it paints
             just above the Acrylic backdrop set in code-behind but
             underneath Container's content. Source is generated at runtime
             (see WindowEffects.RegenerateNoise) sized exactly to the
             panel's current pixel dimensions. -->
        <Image x:Name="NoiseOverlay"
               Stretch="None"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               IsHitTestVisible="False"/>

        <Border x:Name="Container" Padding="10">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Grid Grid.Row="0" Margin="4,4,4,8">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                               Text="Note-it!"
                               FontSize="16"
                               FontWeight="SemiBold"
                               VerticalAlignment="Center"/>

                    <!-- Adds a fresh blank note just below the pinned block
                         and focuses it (see OnAddNoteClicked). -->
                    <Button x:Name="AddNoteButton"
                            Grid.Column="1"
                            Click="OnAddNoteClicked"
                            Content="&#xE710;"
                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                            Style="{StaticResource IconChipButtonStyle}"
                            ToolTipService.ToolTip="New note"/>

                    <Button Grid.Column="2"
                            Click="OnClearAllClicked"
                            Content="Delete all"
                            Margin="6,0,0,0"
                            Style="{StaticResource ClearAllChipButtonStyle}"/>

                    <!-- Panel-level pin: keeps the whole panel open (no
                         click-away close) and on top of every other window. -->
                    <Button x:Name="PinPanelButton"
                            Grid.Column="3"
                            Click="OnPinPanelClicked"
                            Content="&#xE718;"
                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                            Margin="6,0,0,0"
                            Style="{StaticResource IconChipButtonStyle}"
                            ToolTipService.ToolTip="Keep panel open"/>
                </Grid>

                <Border Grid.Row="1"
                        Height="1"
                        Margin="-10,6,-10,8"
                        Background="{ThemeResource DividerStrokeColorDefaultBrush}"/>

                <!-- Row 2 now splits pinned notes out into their own
                     always-visible section on top, with everything else
                     scrolling underneath it, rather than one combined list
                     where pinning just meant "moves to the top, still
                     scrolls away like everything else". -->
                <Grid Grid.Row="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <!-- Sticky pinned section: Auto-height, so it grows to
                         exactly as tall as however many pinned notes exist,
                         uncapped — its own ScrollViewer is disabled outright
                         rather than given a MaxHeight, so it never clips or
                         scrolls internally; a long run of pins just keeps
                         growing and pushes HistoryList's row (below,
                         Height="*") down instead.

                         Reordering (press-drag anywhere on a row -> other
                         rows slide out of the way) uses the ListView's own
                         built-in CanReorderItems/AllowDrop drag: since
                         PinnedItems is an IList (ObservableCollection), the
                         ListView moves items on it directly as the drag
                         crosses neighbors. CanDragItems isn't set (defaults
                         false), which keeps a drag from being draggable
                         *out* of this list — combined with HistoryList not
                         opting into drop, a pinned row has nowhere to go but
                         back into this list, keeping moves confined to the
                         pinned section. DragItemsCompleted
                         (OnPinnedListDragItemsCompleted in the code-behind)
                         fires once the drop settles, to persist the new
                         order back into Items and disk. -->
                    <ListView Grid.Row="0"
                              x:Name="PinnedList"
                              ItemsSource="{x:Bind PinnedItems}"
                              ItemTemplate="{StaticResource PinnedNoteItemTemplate}"
                              ItemContainerStyle="{StaticResource NoteItemContainerStyle}"
                              CanReorderItems="True"
                              AllowDrop="True"
                              DragItemsCompleted="OnPinnedListDragItemsCompleted"
                              ScrollViewer.VerticalScrollMode="Disabled"
                              ScrollViewer.VerticalScrollBarVisibility="Disabled"
                              ScrollViewer.HorizontalScrollMode="Disabled"
                              ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                              SelectionMode="None"/>

                    <!-- Divider between the pinned section and the
                         scrolling notes below it. Shown only once there's
                         actually a pinned note above AND something unpinned
                         below to separate it from. -->
                    <Border Grid.Row="1"
                            Height="1"
                            Margin="4,6,4,6"
                            Background="{ThemeResource DividerStrokeColorDefaultBrush}"
                            Visibility="{x:Bind PinnedDividerVisibility(PinnedItems.Count, UnpinnedItems.Count), Mode=OneWay}"/>

                    <!-- Shares Grid.Row="2" (of this inner Grid) with the
                         ListView below rather than wrapping both in yet
                         another Grid: Visibility is a plain x:Bind function
                         call, so it reacts live to every add/remove without
                         any code-behind wiring. -->
                    <TextBlock Grid.Row="2"
                               Text="{x:Bind EmptyStateText(PinnedItems.Count, UnpinnedItems.Count, Items.Count), Mode=OneWay}"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Opacity="0.5"
                               Visibility="{x:Bind EmptyStateVisibility(PinnedItems.Count, UnpinnedItems.Count), Mode=OneWay}"/>

                    <ListView Grid.Row="2"
                              x:Name="HistoryList"
                              ItemsSource="{x:Bind UnpinnedItems}"
                              ItemTemplate="{StaticResource NoteItemTemplate}"
                              ItemContainerStyle="{StaticResource NoteItemContainerStyle}"
                              SelectionMode="None"
                              Loaded="OnHistoryListLoaded"/>

                    <!-- Floating jump-to-top button: shares Grid.Row="2" (of
                         this inner Grid) with HistoryList (Grid stacks
                         same-cell children by declaration order, so being
                         declared after the ListView puts it on top). -->
                    <Button x:Name="ScrollToTopButton"
                            Grid.Row="2"
                            Width="34"
                            Height="34"
                            Padding="0"
                            CornerRadius="10"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Bottom"
                            Margin="0,0,10,10"
                            Opacity="0"
                            IsHitTestVisible="False"
                            Click="OnScrollToTopClicked">
                        <FontIcon Glyph="&#xE74A;" FontSize="15"/>
                    </Button>
                </Grid>

                <!-- Footer: matches the look of Windows 11's own Quick
                     Settings footer: a plate visibly darker than the
                     rest of the panel, separated by a hairline top border,
                     flush with the panel's edges. -->
                <Border Grid.Row="3"
                        Margin="-10,8,-10,-10"
                        Padding="10"
                        BorderThickness="0,1,0,0"
                        BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                        Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}">
                    <Grid VerticalAlignment="Center">
                        <TextBox x:Name="SearchBox"
                                 TextChanged="OnSearchTextChanged"
                                 PlaceholderText="Search notes"
                                 Padding="34,6,40,6"
                                 CornerRadius="6"/>
                        <FontIcon Glyph="&#xE721;"
                                  FontSize="14"
                                  Opacity="0.6"
                                  Margin="12,0,0,0"
                                  HorizontalAlignment="Left"
                                  VerticalAlignment="Center"
                                  IsHitTestVisible="False"/>

                        <!-- Funnel-glyph filter button: overlaid on the
                             TextBox's reserved right padding. Its
                             MenuFlyout re-checks whichever option is
                             currently active every time it opens
                             (OnFilterFlyoutOpening). -->
                        <Button x:Name="FilterButton"
                                Width="28"
                                Height="28"
                                Padding="0"
                                Margin="0,0,5,0"
                                CornerRadius="6"
                                Background="Transparent"
                                BorderThickness="0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center">
                            <FontIcon x:Name="FilterGlyph"
                                      Glyph="&#xE71C;"
                                      FontSize="13"/>
                            <Button.Flyout>
                                <MenuFlyout Placement="Top" Opening="OnFilterFlyoutOpening">
                                    <MenuFlyoutItem x:Name="FilterAllItem"
                                                     Text="All notes"
                                                     Tag="All"
                                                     Click="OnFilterModeClicked"/>
                                    <MenuFlyoutItem x:Name="FilterPinnedItem"
                                                     Text="Pinned"
                                                     Tag="Pinned"
                                                     Click="OnFilterModeClicked"/>
                                </MenuFlyout>
                            </Button.Flyout>
                        </Button>
                    </Grid>
                </Border>
            </Grid>
        </Border>
    </Grid>
</Window>