Adding a UC

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/DockEditor.xaml

@@ -5,14 +5,16 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:dockVm="using:Microsoft.CmdPal.UI.ViewModels.Dock"
+    xmlns:helpers="using:Microsoft.CmdPal.UI.Helpers"
     xmlns:local="using:Microsoft.CmdPal.UI.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
     <Grid>
         <Grid.Resources>
-            <Flyout x:Key="AddItemsFlyout">
+            <!--  Flyout for adding items to a dock area  -->
-                <Grid Width="300" Height="400">
+            <Flyout x:Key="AddItemsFlyout" Placement="Bottom">
+                <Grid Width="300" MaxHeight="400">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="*" />
@@ -25,29 +27,43 @@
                         Text="Add Dock Item" />
 
                     <ListView
+                        x:Name="AvailableItemsListView"
                         Grid.Row="1"
+                        MaxHeight="350"
                         IsItemClickEnabled="True"
                         ItemClick="AvailableItemsListView_ItemClick"
-                        ItemsSource="{x:Bind DockBands, Mode=OneWay}"
                         SelectionMode="None">
                         <ListView.ItemTemplate>
                             <DataTemplate x:DataType="dockVm:DockBandSettingsViewModel">
-                                <Grid Height="48" Padding="8">
+                                <Grid
+                                    Height="48"
+                                    Padding="8"
+                                    ColumnSpacing="8">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="32" />
                                         <ColumnDefinition Width="*" />
                                     </Grid.ColumnDefinitions>
-                                    <!--<Image
+                                    <local:IconBox
                                         Width="24"
                                         Height="24"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
-                                        Source="{x:Bind Icon}" />-->
+                                        SourceKey="{x:Bind Icon, Mode=OneWay}"
-                                    <TextBlock
+                                        SourceRequested="{x:Bind helpers:IconCacheProvider.SourceRequested}" />
+                                    <StackPanel
                                         Grid.Column="1"
-                                        Margin="8,0,0,0"
                                         VerticalAlignment="Center"
-                                        Text="{x:Bind Title}" />
+                                        Spacing="2">
+                                        <TextBlock
+                                            FontWeight="SemiBold"
+                                            Text="{x:Bind Title}"
+                                            TextTrimming="CharacterEllipsis" />
+                                        <TextBlock
+                                            FontSize="12"
+                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                            Text="{x:Bind Description}"
+                                            TextTrimming="CharacterEllipsis" />
+                                    </StackPanel>
                                 </Grid>
                             </DataTemplate>
                         </ListView.ItemTemplate>
@@ -55,117 +71,244 @@
                 </Grid>
             </Flyout>
 
-            <Flyout x:Key="DockItemOptionsFlyout">
+            <!--  Flyout for editing a pinned dock item  -->
-                <Grid Width="250">
+            <Flyout
+                x:Key="DockItemOptionsFlyout"
+                Closed="DockItemOptionsFlyout_Closed"
+                Placement="Bottom">
+                <Grid Width="280">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
-                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
 
                     <TextBlock
+                        x:Name="OptionsFlyoutTitle"
                         Margin="0,0,0,16"
                         FontSize="16"
                         FontWeight="SemiBold"
                         Text="Dock Item Options" />
 
-                    <StackPanel Grid.Row="1" Margin="0,0,0,12">
+                    <StackPanel Grid.Row="1" Margin="0,0,0,16">
                         <TextBlock
-                            Margin="0,0,0,4"
+                            Margin="0,0,0,8"
                             FontSize="12"
-                            Text="Mode" />
+                            Text="Show Labels" />
-                        <ComboBox HorizontalAlignment="Stretch" SelectedIndex="0">
+                        <ComboBox
-                            <ComboBoxItem Content="Icon only" />
+                            x:Name="ShowLabelsComboBox"
-                            <ComboBoxItem Content="Expanded" />
+                            HorizontalAlignment="Stretch"
+                            SelectionChanged="ShowLabelsComboBox_SelectionChanged">
+                            <ComboBoxItem Content="Default" Tag="0" />
+                            <ComboBoxItem Content="Show Labels" Tag="1" />
+                            <ComboBoxItem Content="Hide Labels" Tag="2" />
                         </ComboBox>
                     </StackPanel>
 
-                    <!--<ToggleSwitch
-                        Grid.Row="2"
-                        Margin="0,0,0,16"
-                        Header="Show text label"
-                      />
-
                     <Border
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Height="1"
                         Margin="0,0,0,16"
                         Background="{ThemeResource DividerStrokeColorDefaultBrush}" />
 
                     <Button
-                        Grid.Row="4"
+                        Grid.Row="3"
                         HorizontalAlignment="Stretch"
                         Click="UnpinButton_Click"
-                        Content="Unpin from dock"
+                        Content="Unpin from dock" />
-                        Style="{StaticResource AccentButtonStyle}" />-->
                 </Grid>
             </Flyout>
+
+            <!--  Template for dock band items in the editor  -->
+            <DataTemplate x:Key="DockBandItemTemplate" x:DataType="dockVm:DockBandSettingsViewModel">
+                <Grid
+                    Padding="8,4"
+                    Background="Transparent"
+                    ToolTipService.ToolTip="{x:Bind Title}">
+                    <StackPanel
+                        HorizontalAlignment="Center"
+                        BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
+                        BorderThickness="1"
+                        CornerRadius="4"
+                        Orientation="Vertical"
+                        Spacing="4">
+                        <local:IconBox
+                            Width="24"
+                            Height="24"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            SourceKey="{x:Bind Icon, Mode=OneWay}"
+                            SourceRequested="{x:Bind helpers:IconCacheProvider.SourceRequested}" />
+                        <!--<TextBlock
+                            MaxWidth="60"
+                            HorizontalAlignment="Center"
+                            FontSize="10"
+                            Text="{x:Bind Title}"
+                            TextAlignment="Center"
+                            TextTrimming="CharacterEllipsis"
+                            TextWrapping="NoWrap" />-->
+                    </StackPanel>
+                </Grid>
+            </DataTemplate>
+
+            <!--  Style for horizontal ListView items  -->
+            <Style
+                x:Key="DockEditorListViewItemStyle"
+                BasedOn="{StaticResource DefaultListViewItemStyle}"
+                TargetType="ListViewItem">
+                <Setter Property="MinWidth" Value="0" />
+                <Setter Property="MinHeight" Value="0" />
+                <Setter Property="Padding" Value="4" />
+                <Setter Property="Margin" Value="2,0" />
+            </Style>
         </Grid.Resources>
 
+        <!--  Main dock editor bar  -->
         <Grid
-            Height="48"
+            Height="64"
-            Margin="64"
+            Padding="12,8"
-            Padding="8,0,8,0"
             Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
             BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-            BorderThickness="1">
+            BorderThickness="1"
+            CornerRadius="8">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*" />
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
 
-            <StackPanel Orientation="Horizontal" Spacing="8">
+            <!--  Start (Left) Section  -->
+            <StackPanel
+                Grid.Column="0"
+                HorizontalAlignment="Left"
+                Orientation="Horizontal"
+                Spacing="4">
                 <ListView
-                    x:Name="LeftListView"
+                    x:Name="StartListView"
+                    MinWidth="48"
                     AllowDrop="True"
+                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                     CanDragItems="True"
                     CanReorderItems="True"
-                    DragItemsStarting="LeftListView_DragItemsStarting"
+                    CornerRadius="8"
-                    DragOver="LeftListView_DragOver"
+                    DragItemsCompleted="ListView_DragItemsCompleted"
-                    Drop="LeftListView_Drop"
+                    DragItemsStarting="ListView_DragItemsStarting"
+                    DragOver="ListView_DragOver"
+                    Drop="StartListView_Drop"
                     IsItemClickEnabled="True"
-                    ItemClick="LeftListView_ItemClick"
+                    ItemClick="DockItem_Click"
+                    ItemContainerStyle="{StaticResource DockEditorListViewItemStyle}"
+                    ItemTemplate="{StaticResource DockBandItemTemplate}"
+                    ItemsSource="{x:Bind StartItems, Mode=OneWay}"
                     SelectionMode="None">
                     <ListView.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal" Spacing="8" />
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
                         </ItemsPanelTemplate>
                     </ListView.ItemsPanel>
-                    <ListView.ItemContainerStyle>
-                        <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
-                            <Setter Property="MinWidth" Value="0" />
-                            <Setter Property="Padding" Value="4" />
-                        </Style>
-                    </ListView.ItemContainerStyle>
-                    <ListView.ItemTemplate>
-                        <DataTemplate x:DataType="local:DockItem">
-                            <StackPanel Orientation="Vertical" Spacing="4">
-                                <Image
-                                    Width="24"
-                                    Height="24"
-                                    Source="{x:Bind IconPath}" />
-                                <TextBlock
-                                    MaxWidth="60"
-                                    FontSize="10"
-                                    Text="{x:Bind Name}"
-                                    TextAlignment="Center"
-                                    TextWrapping="Wrap"
-                                    Visibility="{x:Bind ShowTextLabel, Mode=OneWay}" />
-                            </StackPanel>
-                        </DataTemplate>
-                    </ListView.ItemTemplate>
                 </ListView>
                 <Button
-                    x:Name="LeftAddButton"
+                    x:Name="StartAddButton"
-                    Click="LeftAddButton_Click"
+                    VerticalAlignment="Center"
+                    Click="AddButton_Click"
                     Flyout="{StaticResource AddItemsFlyout}"
-                    Style="{StaticResource SubtleButtonStyle}">
+                    Style="{StaticResource SubtleButtonStyle}"
-                    <FontIcon Glyph="&#xE710;" />
+                    ToolTipService.ToolTip="Add item to start">
+                    <FontIcon FontSize="12" Glyph="&#xE710;" />
                 </Button>
             </StackPanel>
+
+            <!--  Center Section  -->
+            <StackPanel
+                Grid.Column="1"
+                HorizontalAlignment="Center"
+                Orientation="Horizontal"
+                Spacing="4">
+                <Button
+                    x:Name="CenterAddButtonLeft"
+                    VerticalAlignment="Center"
+                    Click="AddButton_Click"
+                    Flyout="{StaticResource AddItemsFlyout}"
+                    Style="{StaticResource SubtleButtonStyle}"
+                    ToolTipService.ToolTip="Add item to center"
+                    Visibility="Collapsed">
+                    <FontIcon FontSize="12" Glyph="&#xE710;" />
+                </Button>
+                <ListView
+                    x:Name="CenterListView"
+                    MinWidth="48"
+                    AllowDrop="True"
+                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    CanDragItems="True"
+                    CanReorderItems="True"
+                    CornerRadius="8"
+                    DragItemsCompleted="ListView_DragItemsCompleted"
+                    DragItemsStarting="ListView_DragItemsStarting"
+                    DragOver="ListView_DragOver"
+                    Drop="CenterListView_Drop"
+                    IsItemClickEnabled="True"
+                    ItemClick="DockItem_Click"
+                    ItemContainerStyle="{StaticResource DockEditorListViewItemStyle}"
+                    ItemTemplate="{StaticResource DockBandItemTemplate}"
+                    ItemsSource="{x:Bind CenterItems, Mode=OneWay}"
+                    SelectionMode="None">
+                    <ListView.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
+                        </ItemsPanelTemplate>
+                    </ListView.ItemsPanel>
+                </ListView>
+                <Button
+                    x:Name="CenterAddButton"
+                    VerticalAlignment="Center"
+                    Click="AddButton_Click"
+                    Style="{StaticResource SubtleButtonStyle}"
+                    ToolTipService.ToolTip="Add item to center">
+                    <FontIcon FontSize="12" Glyph="&#xE710;" />
+                </Button>
+            </StackPanel>
+
+            <!--  End (Right) Section  -->
+            <StackPanel
+                Grid.Column="2"
+                HorizontalAlignment="Right"
+                Orientation="Horizontal"
+                Spacing="4">
+                <Button
+                    x:Name="EndAddButton"
+                    VerticalAlignment="Center"
+                    Click="AddButton_Click"
+                    Flyout="{StaticResource AddItemsFlyout}"
+                    Style="{StaticResource SubtleButtonStyle}"
+                    ToolTipService.ToolTip="Add item to end">
+                    <FontIcon FontSize="12" Glyph="&#xE710;" />
+                </Button>
+                <ListView
+                    x:Name="EndListView"
+                    MinWidth="48"
+                    AllowDrop="True"
+                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    CanDragItems="True"
+                    CanReorderItems="True"
+                    CornerRadius="8"
+                    DragItemsCompleted="ListView_DragItemsCompleted"
+                    DragItemsStarting="ListView_DragItemsStarting"
+                    DragOver="ListView_DragOver"
+                    Drop="EndListView_Drop"
+                    IsItemClickEnabled="True"
+                    ItemClick="DockItem_Click"
+                    ItemContainerStyle="{StaticResource DockEditorListViewItemStyle}"
+                    ItemTemplate="{StaticResource DockBandItemTemplate}"
+                    ItemsSource="{x:Bind EndItems, Mode=OneWay}"
+                    SelectionMode="None">
+                    <ListView.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Horizontal" Spacing="4" />
+                        </ItemsPanelTemplate>
+                    </ListView.ItemsPanel>
+                </ListView>
+            </StackPanel>
         </Grid>
     </Grid>
 </UserControl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/DockEditor.xaml.cs

@@ -2,37 +2,408 @@
 // The Microsoft Corporation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
-using System;
-using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
 using Microsoft.CmdPal.UI.ViewModels.Dock;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Controls.Primitives;
-using Microsoft.UI.Xaml.Data;
-using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
-using Microsoft.UI.Xaml.Navigation;
+using Windows.ApplicationModel.DataTransfer;
 using Windows.Foundation;
-using Windows.Foundation.Collections;
 
 namespace Microsoft.CmdPal.UI.Controls;
 
 public sealed partial class DockEditor : UserControl
 {
-    public ObservableCollection<DockBandSettingsViewModel> DockBands
+    private DockBandSettingsViewModel? _draggedItem;
+    private ObservableCollection<DockBandSettingsViewModel>? _sourceCollection;
+    private DockEditorPinArea _targetArea;
+    private DockBandSettingsViewModel? _currentContextItem;
+
+    /// <summary>
+    /// Gets or sets the collection of all dock band items to display and manage.
+    /// </summary>
+    public IList<DockBandSettingsViewModel> DockItems
     {
-        get => (ObservableCollection<DockBandSettingsViewModel>)GetValue(DockBandsProperty);
+        get => (IList<DockBandSettingsViewModel>)GetValue(DockItemsProperty);
-        set => SetValue(DockBandsProperty, value);
+        set => SetValue(DockItemsProperty, value);
     }
 
-    public static readonly DependencyProperty DockBandsProperty = DependencyProperty.Register(nameof(DockBands), typeof(ObservableCollection<DockBandSettingsViewModel>), typeof(DockEditor), new PropertyMetadata(new ObservableCollection<DockBandSettingsViewModel>()));
+    public static readonly DependencyProperty DockItemsProperty =
+        DependencyProperty.Register(
+            nameof(DockItems),
+            typeof(IList<DockBandSettingsViewModel>),
+            typeof(DockEditor),
+            new PropertyMetadata(new ObservableCollection<DockBandSettingsViewModel>(), OnDockItemsChanged));
+
+    /// <summary>
+    /// Gets items pinned to the start (left) area of the dock.
+    /// </summary>
+    public ObservableCollection<DockBandSettingsViewModel> StartItems { get; } = new();
+
+    /// <summary>
+    /// Gets items pinned to the center area of the dock (UI concept, stored as Start).
+    /// </summary>
+    public ObservableCollection<DockBandSettingsViewModel> CenterItems { get; } = new();
+
+    /// <summary>
+    /// Gets items pinned to the end (right) area of the dock.
+    /// </summary>
+    public ObservableCollection<DockBandSettingsViewModel> EndItems { get; } = new();
+
+    /// <summary>
+    /// Gets items available to be added to the dock (not currently pinned).
+    /// </summary>
+    public ObservableCollection<DockBandSettingsViewModel> AvailableItems { get; } = new();
 
     public DockEditor()
     {
         InitializeComponent();
     }
+
+    private static void OnDockItemsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is DockEditor editor)
+        {
+            editor.LoadItems();
+        }
+    }
+
+    private void LoadItems()
+    {
+        StartItems.Clear();
+        CenterItems.Clear();
+        EndItems.Clear();
+
+        if (DockItems == null)
+        {
+            return;
+        }
+
+        foreach (var item in DockItems)
+        {
+            // Use PinSideIndex: 0 = None, 1 = Start, 2 = End
+            switch (item.PinSideIndex)
+            {
+                case 1: // Start
+                    StartItems.Add(item);
+                    break;
+                case 2: // End
+                    EndItems.Add(item);
+                    break;
+                default: // None (0) - available for adding
+                    break;
+            }
+        }
+
+        RefreshAvailableItems();
+    }
+
+    private void RefreshAvailableItems()
+    {
+        AvailableItems.Clear();
+
+        if (DockItems == null)
+        {
+            return;
+        }
+
+        foreach (var item in DockItems)
+        {
+            // Items with PinSideIndex == 0 (None) are available
+            if (item.PinSideIndex == 0)
+            {
+                AvailableItems.Add(item);
+            }
+        }
+    }
+
+    private void AddButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (sender is not Button button)
+        {
+            return;
+        }
+
+        // Determine which area to add to based on button name
+        _targetArea = button.Name switch
+        {
+            "StartAddButton" => DockEditorPinArea.Start,
+            "CenterAddButton" or "CenterAddButtonLeft" => DockEditorPinArea.Center,
+            "EndAddButton" => DockEditorPinArea.End,
+            _ => DockEditorPinArea.None,
+        };
+
+        // Refresh available items before showing flyout
+        RefreshAvailableItems();
+
+        // Show the flyout
+        var flyout = button.Flyout as Flyout;
+        flyout?.ShowAt(button);
+    }
+
+    private void AvailableItemsListView_ItemClick(object sender, ItemClickEventArgs e)
+    {
+        if (e.ClickedItem is not DockBandSettingsViewModel selectedItem)
+        {
+            return;
+        }
+
+        // Set the pin side based on target area
+        // PinSideIndex: 0 = None, 1 = Start, 2 = End
+        selectedItem.PinSideIndex = _targetArea switch
+        {
+            DockEditorPinArea.Start => 1,
+            DockEditorPinArea.Center => 1, // Center maps to Start
+            DockEditorPinArea.End => 2,
+            _ => 0,
+        };
+
+        // Add to the appropriate UI collection
+        var targetCollection = _targetArea switch
+        {
+            DockEditorPinArea.Start => StartItems,
+            DockEditorPinArea.Center => CenterItems,
+            DockEditorPinArea.End => EndItems,
+            _ => null,
+        };
+
+        targetCollection?.Add(selectedItem);
+
+        // Refresh available items
+        RefreshAvailableItems();
+
+        // Close the flyout
+        CloseFlyoutFromSender(sender);
+    }
+
+    private void DockItem_Click(object sender, ItemClickEventArgs e)
+    {
+        if (e.ClickedItem is not DockBandSettingsViewModel clickedItem)
+        {
+            return;
+        }
+
+        _currentContextItem = clickedItem;
+
+        // Update the flyout title
+        OptionsFlyoutTitle.Text = clickedItem.Title;
+
+        // Set the combo box to the current show labels setting
+        ShowLabelsComboBox.SelectedIndex = clickedItem.ShowLabelsIndex;
+
+        // Show the flyout attached to the clicked item
+        if (sender is ListView listView)
+        {
+            var container = listView.ContainerFromItem(clickedItem) as ListViewItem;
+            if (container != null && Resources.TryGetValue("DockItemOptionsFlyout", out var flyoutResource) && flyoutResource is Flyout flyout)
+            {
+                flyout.ShowAt(container);
+            }
+        }
+    }
+
+    private void ShowLabelsComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
+    {
+        if (_currentContextItem == null || sender is not ComboBox comboBox)
+        {
+            return;
+        }
+
+        _currentContextItem.ShowLabelsIndex = comboBox.SelectedIndex;
+    }
+
+    private void UnpinButton_Click(object sender, RoutedEventArgs e)
+    {
+        if (_currentContextItem == null)
+        {
+            return;
+        }
+
+        // Remove from all UI collections
+        StartItems.Remove(_currentContextItem);
+        CenterItems.Remove(_currentContextItem);
+        EndItems.Remove(_currentContextItem);
+
+        // Set pin side to None
+        _currentContextItem.PinSideIndex = 0;
+
+        // Refresh available items
+        RefreshAvailableItems();
+
+        _currentContextItem = null;
+
+        // Close the flyout
+        CloseFlyoutFromSender(sender);
+    }
+
+    private void DockItemOptionsFlyout_Closed(object sender, object e)
+    {
+        _currentContextItem = null;
+    }
+
+    private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
+    {
+        if (e.Items.Count > 0 && e.Items[0] is DockBandSettingsViewModel item)
+        {
+            _draggedItem = item;
+            _sourceCollection = (sender as ListView)?.ItemsSource as ObservableCollection<DockBandSettingsViewModel>;
+            e.Data.RequestedOperation = DataPackageOperation.Move;
+        }
+    }
+
+    private void ListView_DragItemsCompleted(ListViewBase sender, DragItemsCompletedEventArgs args)
+    {
+        // Reordering within the same list is handled automatically by ListView
+        // The PinSideIndex doesn't need to change
+        _draggedItem = null;
+        _sourceCollection = null;
+    }
+
+    private void ListView_DragOver(object sender, DragEventArgs e)
+    {
+        e.AcceptedOperation = DataPackageOperation.Move;
+        e.DragUIOverride.Caption = "Move";
+        e.DragUIOverride.IsCaptionVisible = true;
+        e.DragUIOverride.IsContentVisible = true;
+        e.DragUIOverride.IsGlyphVisible = true;
+    }
+
+    private void StartListView_Drop(object sender, DragEventArgs e)
+    {
+        HandleDrop(sender, DockEditorPinArea.Start, e);
+    }
+
+    private void CenterListView_Drop(object sender, DragEventArgs e)
+    {
+        HandleDrop(sender, DockEditorPinArea.Center, e);
+    }
+
+    private void EndListView_Drop(object sender, DragEventArgs e)
+    {
+        HandleDrop(sender, DockEditorPinArea.End, e);
+    }
+
+    private void HandleDrop(object sender, DockEditorPinArea targetArea, DragEventArgs e)
+    {
+        if (_draggedItem == null)
+        {
+            return;
+        }
+
+        var targetListView = sender as ListView;
+        var targetCollection = targetListView?.ItemsSource as ObservableCollection<DockBandSettingsViewModel>;
+
+        if (targetCollection == null || _sourceCollection == null)
+        {
+            return;
+        }
+
+        // If dropping to a different collection, move the item
+        if (targetCollection != _sourceCollection)
+        {
+            // Remove from source collection
+            _sourceCollection.Remove(_draggedItem);
+
+            // Calculate the drop index based on the position
+            var dropIndex = GetDropIndex(targetListView!, e);
+
+            // Insert at the drop position
+            if (dropIndex >= targetCollection.Count)
+            {
+                targetCollection.Add(_draggedItem);
+            }
+            else
+            {
+                targetCollection.Insert(dropIndex, _draggedItem);
+            }
+
+            // Update the pin side
+            // PinSideIndex: 0 = None, 1 = Start, 2 = End
+            _draggedItem.PinSideIndex = targetArea switch
+            {
+                DockEditorPinArea.Start => 1,
+                DockEditorPinArea.Center => 1, // Center maps to Start
+                DockEditorPinArea.End => 2,
+                _ => 0,
+            };
+        }
+
+        // Clear references
+        _draggedItem = null;
+        _sourceCollection = null;
+    }
+
+    private int GetDropIndex(ListView listView, DragEventArgs e)
+    {
+        var position = e.GetPosition(listView);
+        var items = listView.ItemsSource as ObservableCollection<DockBandSettingsViewModel>;
+
+        if (items == null || items.Count == 0)
+        {
+            return 0;
+        }
+
+        // Find the drop position based on X coordinate for horizontal layout
+        for (var i = 0; i < items.Count; i++)
+        {
+            var container = listView.ContainerFromIndex(i) as ListViewItem;
+            if (container != null)
+            {
+                var containerPosition = container.TransformToVisual(listView).TransformPoint(new Point(0, 0));
+                var containerCenter = containerPosition.X + (container.ActualWidth / 2);
+
+                if (position.X < containerCenter)
+                {
+                    return i;
+                }
+            }
+        }
+
+        return items.Count;
+    }
+
+    private static void CloseFlyoutFromSender(object sender)
+    {
+        // Walk up the visual tree to find and close the flyout
+        var element = sender as DependencyObject;
+        while (element != null)
+        {
+            if (element is Popup popup)
+            {
+                popup.IsOpen = false;
+                return;
+            }
+
+            if (element is FlyoutPresenter)
+            {
+                // Find the parent popup
+                var parent = VisualTreeHelper.GetParent(element);
+                while (parent != null && parent is not Popup)
+                {
+                    parent = VisualTreeHelper.GetParent(parent);
+                }
+
+                if (parent is Popup flyoutPopup)
+                {
+                    flyoutPopup.IsOpen = false;
+                }
+
+                return;
+            }
+
+            element = VisualTreeHelper.GetParent(element);
+        }
+    }
+}
+
+/// <summary>
+/// Pin area enum for the DockEditor UI.
+/// </summary>
+public enum DockEditorPinArea
+{
+    None,
+    Start,
+    Center,
+    End,
 }

src/modules/cmdpal/Microsoft.CmdPal.UI/Microsoft.CmdPal.UI.csproj

@@ -69,6 +69,7 @@
 
   <ItemGroup>
     <None Remove="Controls\ActionBar.xaml" />
+    <None Remove="Controls\DockEditor.xaml" />
     <None Remove="Controls\KeyVisual\KeyCharPresenter.xaml" />
     <None Remove="Controls\SearchBar.xaml" />
     <None Remove="IsEnabledTextBlock.xaml" />
@@ -201,6 +202,12 @@
     </Content>
   </ItemGroup>
 
+  <ItemGroup>
+    <Page Update="Controls\DockEditor.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
+
   <ItemGroup>
     <Page Update="Styles\Button.xaml">
       <Generator>MSBuild:Compile</Generator>

src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/DockSettingsPage.xaml

@@ -40,10 +40,7 @@
                     <TextBlock x:Uid="DockAppearanceSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
 
                     <!--  Dock Size  -->
-                    <controls:SettingsCard Header="Dock Size">
+                    <controls:SettingsCard Description="Choose the size of your dock" Header="Dock size">
-                        <controls:SettingsCard.Description>
-                            Choose the size of your dock
-                        </controls:SettingsCard.Description>
                         <ComboBox
                             x:Name="DockSizeComboBox"
                             MinWidth="120"
@@ -55,29 +52,43 @@
                     </controls:SettingsCard>
 
                     <!--  Dock Position  -->
-                    <controls:SettingsCard Header="Dock Position">
+                    <controls:SettingsCard Description="Choose where the dock appears on your screen" Header="Dock position">
                         <controls:SettingsCard.HeaderIcon>
                             <SymbolIcon Symbol="MoveToFolder" />
                         </controls:SettingsCard.HeaderIcon>
-                        <controls:SettingsCard.Description>
-                            Choose where the dock appears on your screen
-                        </controls:SettingsCard.Description>
                         <ComboBox
                             x:Name="DockPositionComboBox"
                             MinWidth="120"
                             SelectedIndex="{x:Bind SelectedSideIndex, Mode=TwoWay}">
-                            <ComboBoxItem Content="Left" />
+                            <ComboBoxItem>
-                            <ComboBoxItem Content="Top" />
+                                <StackPanel Orientation="Horizontal" Spacing="8">
-                            <ComboBoxItem Content="Right" />
+                                    <FontIcon Glyph="&#xE90C;" />
-                            <ComboBoxItem Content="Bottom" />
+                                    <TextBlock Text="Left" />
+                                </StackPanel>
+                            </ComboBoxItem>
+                            <ComboBoxItem>
+                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                    <FontIcon Glyph="&#xE90E;" Rotation="180" />
+                                    <TextBlock Text="Top" />
+                                </StackPanel>
+                            </ComboBoxItem>
+                            <ComboBoxItem>
+                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                    <FontIcon Glyph="&#xE90D;" />
+                                    <TextBlock Text="Right" />
+                                </StackPanel>
+                            </ComboBoxItem>
+                            <ComboBoxItem>
+                                <StackPanel Orientation="Horizontal" Spacing="8">
+                                    <FontIcon Glyph="&#xE90E;" />
+                                    <TextBlock Text="Bottom" />
+                                </StackPanel>
+                            </ComboBoxItem>
                         </ComboBox>
                     </controls:SettingsCard>
 
                     <!--  Backdrop Style  -->
-                    <controls:SettingsCard Header="Background Style">
+                    <controls:SettingsCard Description="Choose the background effect for your dock" Header="Background style">
-                        <controls:SettingsCard.Description>
-                            Choose the background effect for your dock
-                        </controls:SettingsCard.Description>
                         <ComboBox
                             x:Name="BackdropComboBox"
                             MinWidth="120"
@@ -89,21 +100,20 @@
                     </controls:SettingsCard>
 
                     <!--  Show Labels  -->
-                    <controls:SettingsCard Header="Show Labels">
+                    <controls:SettingsCard Description="Choose whether to show labels for dock items by default." Header="Show labels">
-                        <controls:SettingsCard.Description>
-                            Choose whether to show labels for dock items by default.
-                        </controls:SettingsCard.Description>
 
                         <ToggleSwitch
                             IsOn="{x:Bind ShowLabels, Mode=TwoWay}"
                             OffContent="Hide labels"
-                            OnContent="Show Labels" />
+                            OnContent="Show labels" />
 
                     </controls:SettingsCard>
 
                     <!--  Bands Section  -->
                     <TextBlock x:Uid="DockBandsSettingsHeader" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
 
+                    <cpControls:DockEditor Height="150" DockItems="{x:Bind AllDockBandItems, Mode=OneWay}" />
+
                     <ItemsRepeater ItemsSource="{x:Bind AllDockBandItems, Mode=OneWay}">
                         <ItemsRepeater.ItemTemplate>
                             <DataTemplate x:DataType="dockVm:DockBandSettingsViewModel">
@@ -148,15 +158,14 @@
                                         </ComboBox>
                                         <ComboBox MinWidth="120" SelectedIndex="{x:Bind ShowLabelsIndex, Mode=TwoWay}">
                                             <ComboBoxItem Content="Default" />
-                                            <ComboBoxItem Content="Show Labels" />
+                                            <ComboBoxItem Content="Show labels" />
-                                            <ComboBoxItem Content="Hide Labels" />
+                                            <ComboBoxItem Content="Hide labels" />
                                         </ComboBox>
                                     </StackPanel>
                                 </controls:SettingsCard>
                             </DataTemplate>
                         </ItemsRepeater.ItemTemplate>
                     </ItemsRepeater>
-
                 </StackPanel>
             </Grid>
         </ScrollViewer>