refactoring

2026-06-02 20:24:26 -07:00 · 2025-08-11 23:02:15 -07:00
parent db136ffbe7
commit 32396c3210
8 changed files with 13 additions and 11 deletions
@@ -0,0 +1,43 @@
+<Application xmlns="https://github.com/avaloniaui"
+            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+            x:Class="MercuryConverter.UI.App"
+            RequestedThemeVariant="Default"> <!-- Dark Default Light -->
+
+    <Application.Styles>
+        <FluentTheme>
+            <FluentTheme.Palettes>
+                <ColorPaletteResources x:Key="Light" Accent="#ffb459c0" AltHigh="White" AltLow="White" AltMedium="White" AltMediumHigh="White" AltMediumLow="White" BaseHigh="Black" BaseLow="#ffa1aeff" BaseMedium="#ff5a71c0" BaseMediumHigh="#ff2b4996" BaseMediumLow="#ff435dab" ChromeAltLow="#ff2b4996" ChromeBlackHigh="Black" ChromeBlackLow="#ffa1aeff" ChromeBlackMedium="#ff2b4996" ChromeBlackMediumLow="#ff5a71c0" ChromeDisabledHigh="#ffa1aeff" ChromeDisabledLow="#ff5a71c0" ChromeGray="#ff435dab" ChromeHigh="#ffa1aeff" ChromeLow="#ffd9e1ff" ChromeMedium="#ffced7ff" ChromeMediumLow="#ffd9e1ff" ChromeWhite="White" ListLow="#ffced7ff" ListMedium="#ffa1aeff" RegionColor="#ffccdbff" />
+                <ColorPaletteResources x:Key="Dark" Accent="#ff9b21dd" AltHigh="Black" AltLow="Black" AltMedium="Black" AltMediumHigh="Black" AltMediumLow="Black" BaseHigh="White" BaseLow="#ff3c2d94" BaseMedium="#ff9e96d2" BaseMediumHigh="#ffb7b0e1" BaseMediumLow="#ff6d61b3" ChromeAltLow="#ffb7b0e1" ChromeBlackHigh="Black" ChromeBlackLow="#ffb7b0e1" ChromeBlackMedium="Black" ChromeBlackMediumLow="Black" ChromeDisabledHigh="#ff3c2d94" ChromeDisabledLow="#ff9e96d2" ChromeGray="#ff867cc2" ChromeHigh="#ff867cc2" ChromeLow="#ff0c0f5e" ChromeMedium="#ff18166c" ChromeMediumLow="#ff302587" ChromeWhite="White" ListLow="#ff18166c" ListMedium="#ff3c2d94" RegionColor="#ff1c1f46" />
+            </FluentTheme.Palettes>
+            <Style Selector="DataGrid:focus DataGridCell:current /template/ Grid#FocusVisual"> 
+                <Setter Property="IsVisible" Value="False" /> 
+            </Style> 
+        </FluentTheme>
+
+        <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
+    </Application.Styles>
+
+    <Application.Resources>
+        <ResourceDictionary>
+            <!-- Theming -->
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceDictionary x:Key="Light">
+                    <SolidColorBrush x:Key="ExpanderHeaderBackgroundPointerOver">#40FFFFFF</SolidColorBrush>
+                    <SolidColorBrush x:Key="DataGridContentBackground">#40FFFFFF</SolidColorBrush>
+                    <Bitmap x:Key="BannerBitmap">/Assets/imgs/banner_light.png</Bitmap>
+                </ResourceDictionary>
+                <ResourceDictionary x:Key="Dark">
+                    <SolidColorBrush x:Key="ExpanderHeaderBackgroundPointerOver">#20000000</SolidColorBrush>
+                    <SolidColorBrush x:Key="DataGridContentBackground">#20000000</SolidColorBrush>
+                    <Bitmap x:Key="BannerBitmap">/Assets/imgs/banner_dark.png</Bitmap>
+                </ResourceDictionary>
+            </ResourceDictionary.ThemeDictionaries>
+            <!-- Control Property Override -->
+            <Thickness x:Key="TabItemMargin">12</Thickness>
+            <!-- Control Override -->
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="Overrides/Expander.axaml"/>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
@@ -0,0 +1,23 @@
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Markup.Xaml;
+
+namespace MercuryConverter.UI;
+
+public partial class App : Application
+{
+    public override void Initialize()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    public override void OnFrameworkInitializationCompleted()
+    {
+        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
+        {
+            desktop.MainWindow = new MainWindow();
+        }
+
+        base.OnFrameworkInitializationCompleted();
+    }
+}
@@ -0,0 +1,42 @@
+<Window xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:MercuryConverter.UI"
+        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+
+        x:Class="MercuryConverter.UI.MainWindow"
+        Title="MercuryConverter"
+        Width="1024" Height="800"
+        MinWidth="800" MinHeight="600"
+        ExtendClientAreaToDecorationsHint="True"
+>
+    <!-- Components -->
+    <Panel>
+        <!-- Banner -->
+        <StackPanel>
+            <UserControl Background="{DynamicResource SystemAltHighColor}" Height="86"/>
+        </StackPanel>
+        <StackPanel HorizontalAlignment="Right">
+            <Image Height="86" Source="{DynamicResource BannerBitmap}"/>
+        </StackPanel>
+
+        <DockPanel>
+            
+            <Menu Name="MenuBar" DockPanel.Dock="Top">
+                <MenuItem Header="File">
+                    <MenuItem Header="Open Data Folder..." />
+                </MenuItem>
+            </Menu>
+
+            <TabControl>
+                <TabItem Header="selection">
+                    <UserControl Name="SelectionControl"/>
+                </TabItem>
+
+                <TabItem Header="export">
+                </TabItem>
+            </TabControl>
+        </DockPanel>
+    </Panel>
+</Window>
@@ -0,0 +1,23 @@
+using Avalonia.Controls;
+using Avalonia.Styling;
+
+namespace MercuryConverter.UI;
+
+using MercuryConverter.UI.Views;
+
+public partial class MainWindow : Window
+{
+    public MainWindow()
+    {
+        InitializeComponent();
+
+        // Force dark mode in designer
+        if (Design.IsDesignMode)
+        {
+            RequestedThemeVariant = ThemeVariant.Dark;
+        }
+
+        // Setup tab views
+        SelectionControl.Content = new Selection();
+    }
+}
@@ -0,0 +1,336 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:ClassModifier="internal">
+
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Orientation="Vertical" Spacing="20" Width="350" Height="600">
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Up" Header="Expand Up">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Down" Header="Expand Down">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Left" Header="Expand Left">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Right" Header="Expand Right">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander HorizontalAlignment="Stretch" ExpandDirection="Up">
+          <Expander.Header>
+            <Grid ColumnDefinitions="*, Auto">
+              <TextBlock Grid.Column="0" Text="Control" />
+              <TextBlock Grid.Column="1" Text="Header" />
+            </Grid>
+          </Expander.Header>
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+        <Expander ExpandDirection="Up" Header="Rounded" CornerRadius="25">
+          <StackPanel>
+            <TextBlock>Expanded content</TextBlock>
+          </StackPanel>
+        </Expander>
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+
+  <!-- Shared header/content -->
+  <x:Double x:Key="ExpanderMinHeight">48</x:Double>
+
+  <!-- Header -->
+  <HorizontalAlignment x:Key="ExpanderHeaderHorizontalContentAlignment">Stretch</HorizontalAlignment>
+  <VerticalAlignment x:Key="ExpanderHeaderVerticalContentAlignment">Center</VerticalAlignment>
+  <Thickness x:Key="ExpanderHeaderPadding">16,0,0,0</Thickness>
+  <Thickness x:Key="ExpanderHeaderBorderThickness">0</Thickness>
+  <Thickness x:Key="ExpanderChevronBorderThickness">0</Thickness>
+  <Thickness x:Key="ExpanderChevronMargin">20,0,8,0</Thickness>
+  <x:Double x:Key="ExpanderChevronButtonSize">32</x:Double>
+
+  <!-- Content -->
+  <Thickness x:Key="ExpanderContentPadding">8</Thickness>
+  <Thickness x:Key="ExpanderContentLeftBorderThickness">0,0,0,0</Thickness>
+  <Thickness x:Key="ExpanderContentUpBorderThickness">0,0,0,0</Thickness>
+  <Thickness x:Key="ExpanderContentRightBorderThickness">0,0,0,0</Thickness>
+  <Thickness x:Key="ExpanderContentDownBorderThickness">0,0,0,0</Thickness>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonTheme" TargetType="ToggleButton">
+    <Setter Property="Background" Value="{DynamicResource ExpanderHeaderBackground}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderHeaderBorderThickness}" />
+    <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderForeground}" />
+    <Setter Property="Padding" Value="{DynamicResource ExpanderHeaderPadding}" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="HorizontalContentAlignment" Value="{DynamicResource ExpanderHeaderHorizontalContentAlignment}" />
+    <Setter Property="VerticalContentAlignment" Value="{DynamicResource ExpanderHeaderVerticalContentAlignment}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border x:Name="ToggleButtonBackground"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                Background="#00ffffff"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}">
+          <Grid x:Name="ToggleButtonGrid"
+                ColumnDefinitions="*,Auto">
+            <ContentPresenter x:Name="PART_ContentPresenter"
+                              Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Foreground="{TemplateBinding Foreground}"
+                              Margin="{TemplateBinding Padding}"/>
+            <Border x:Name="ExpandCollapseChevronBorder"
+                    Grid.Column="1"
+                    Width="{DynamicResource ExpanderChevronButtonSize}"
+                    Height="{DynamicResource ExpanderChevronButtonSize}"
+                    Margin="{DynamicResource ExpanderChevronMargin}"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                    BorderBrush="{DynamicResource ExpanderChevronBorderBrush}"
+                    BorderThickness="{DynamicResource ExpanderChevronBorderThickness}"
+                    Background="">
+              <Path x:Name="ExpandCollapseChevron"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    RenderTransformOrigin="50%,50%"
+                    Stretch="None"
+                    Stroke="{DynamicResource ExpanderChevronForeground}"
+                    StrokeThickness="1">
+                <Path.RenderTransform>
+                  <RotateTransform />
+                </Path.RenderTransform>
+              </Path>
+            </Border>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^[Tag=expanded] /template/ Path#ExpandCollapseChevron">
+      <Style.Animations>
+        <Animation FillMode="Both" Duration="0:0:0.0625">
+          <KeyFrame Cue="100%">
+            <Setter Property="RotateTransform.Angle" Value="180" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+
+    <Style Selector="^[Tag=collapsed] /template/ Path#ExpandCollapseChevron">
+      <Style.Animations>
+        <Animation FillMode="Both" Duration="0:0:0.0625">
+          <KeyFrame Cue="0%">
+            <Setter Property="RotateTransform.Angle" Value="180" />
+          </KeyFrame>
+          <KeyFrame Cue="100%">
+            <Setter Property="RotateTransform.Angle" Value="0" />
+          </KeyFrame>
+        </Animation>
+      </Style.Animations>
+    </Style>
+
+    <!-- PointerOver -->
+    <Style Selector="^:pointerover /template/ Border#ToggleButtonBackground">
+      <Setter Property="Background" Value="{DynamicResource ExpanderHeaderBackgroundPointerOver}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrushPointerOver}" />
+    </Style>
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderForegroundPointerOver}" />
+    </Style>
+    <Style Selector="^:pointerover /template/ Border#ExpandCollapseChevronBorder">
+      <Setter Property="Background" Value="" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderChevronBorderBrushPointerOver}" />
+    </Style>
+    <Style Selector="^:pointerover /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Stroke" Value="{DynamicResource ExpanderChevronForegroundPointerOver}" />
+    </Style>
+
+    <!-- Pressed -->
+    <Style Selector="^:pressed /template/ Border#ToggleButtonBackground">
+      <Setter Property="Background" Value="{DynamicResource ExpanderHeaderBackgroundPressed}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrushPressed}" />
+    </Style>
+    <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderForegroundPressed}" />
+    </Style>
+    <Style Selector="^:pressed /template/ Border#ExpandCollapseChevronBorder">
+      <Setter Property="Background" Value="" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderChevronBorderBrushPressed}" />
+    </Style>
+    <Style Selector="^:pressed /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Stroke" Value="{DynamicResource ExpanderChevronForegroundPressed}" />
+    </Style>
+
+    <!-- Disabled -->
+    <Style Selector="^:disabled /template/ Border#ToggleButtonBackground">
+      <Setter Property="Background" Value="{DynamicResource ExpanderHeaderBackgroundDisabled}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrushDisabled}" />
+    </Style>
+    <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderForegroundDisabled}" />
+    </Style>
+    <Style Selector="^:disabled /template/ Border#ExpandCollapseChevronBorder">
+      <Setter Property="Background" Value="" />
+      <Setter Property="BorderBrush" Value="" />
+    </Style>
+    <Style Selector="^:disabled /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Stroke" Value="{DynamicResource ExpanderChevronForegroundDisabled}" />
+    </Style>
+
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonUpTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 7 L 7 0 L 14 7" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonDownTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 0 L 7 7 L 14 0" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonLeftTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 7 0 L 0 7 L 7 14" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="FluentExpanderToggleButtonRightTheme" TargetType="ToggleButton" BasedOn="{StaticResource FluentExpanderToggleButtonTheme}">
+    <Style Selector="^ /template/ Path#ExpandCollapseChevron">
+      <Setter Property="Data" Value="M 0 0 L 7 7 L 0 14" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type Expander}" TargetType="Expander">
+    <Setter Property="IsTabStop" Value="False"/>
+    <Setter Property="MinWidth" Value="{DynamicResource FlyoutThemeMinWidth}" />
+    <Setter Property="MinHeight" Value="{DynamicResource ExpanderMinHeight}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ExpanderContentBorderBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentDownBorderThickness}" />
+    <Setter Property="Padding" Value="{DynamicResource ExpanderContentPadding}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel MinWidth="{TemplateBinding MinWidth}"
+                   MaxWidth="{TemplateBinding MaxWidth}">
+          <ToggleButton x:Name="ExpanderHeader"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        IsEnabled="{TemplateBinding IsEnabled}"
+                        Content="{TemplateBinding Header}"
+                        ContentTemplate="{TemplateBinding HeaderTemplate}"
+                        IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+          <Border x:Name="ExpanderContent"
+                  IsVisible="{TemplateBinding IsExpanded, Mode=TwoWay}"
+                  Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}"
+                  MinHeight="{TemplateBinding MinHeight}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Padding="{TemplateBinding Padding}">
+            <ContentPresenter x:Name="PART_ContentPresenter"
+                              Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Foreground="{TemplateBinding Foreground}"
+                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+          </Border>
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^ /template/ ToggleButton#ExpanderHeader:pressed">
+      <Setter Property="RenderTransform" Value="{x:Null}" />
+    </Style>
+
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader, ^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="VerticalAlignment" Value="Stretch" />
+    </Style>
+
+    <Style Selector="^:expanded /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Tag" Value="expanded" />
+    </Style>
+
+    <Style Selector="^:not(:expanded) /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{Binding $parent[Expander].CornerRadius}" />
+      <Setter Property="Tag" Value="collapsed" />
+    </Style>
+    <Style Selector="^:expanded:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:up /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:down /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:left /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+    </Style>
+    <Style Selector="^:expanded:right /template/ Border#ExpanderContent">
+      <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius, Converter={StaticResource RightCornerRadiusFilterConverter}}" />
+    </Style>
+
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Right" />
+    </Style>
+    <Style Selector="^:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Bottom" />
+    </Style>
+    <Style Selector="^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Left" />
+    </Style>
+    <Style Selector="^:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="DockPanel.Dock" Value="Top" />
+    </Style>
+
+    <Style Selector="^:left /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonLeftTheme}" />
+    </Style>
+    <Style Selector="^:up /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonUpTheme}" />
+    </Style>
+    <Style Selector="^:right /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonRightTheme}" />
+    </Style>
+    <Style Selector="^:down /template/ ToggleButton#ExpanderHeader">
+      <Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonDownTheme}" />
+    </Style>
+
+    <Style Selector="^:left /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentLeftBorderThickness}" />
+    </Style>
+    <Style Selector="^:up /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentUpBorderThickness}" />
+    </Style>
+    <Style Selector="^:right /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentRightBorderThickness}" />
+    </Style>
+    <Style Selector="^:down /template/ Border#ExpanderContent">
+      <Setter Property="BorderThickness" Value="{DynamicResource ExpanderContentDownBorderThickness}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>
@@ -0,0 +1,55 @@
+<Panel xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:MercuryConverter.UI.Views"
+        x:Class="MercuryConverter.UI.Views.Selection"
+>
+    <DockPanel>
+        <!-- Sidebar -->
+        <TabControl Margin="8 8 0 0" Width="250" DockPanel.Dock="Right">
+            <TabControl.Resources>
+                <ResourceDictionary>
+                    <Thickness x:Key="TabItemHeaderMargin">12 0 12 15</Thickness>
+                    <Thickness x:Key="TabItemMargin">0 0 0 0</Thickness>
+                </ResourceDictionary>
+            </TabControl.Resources>
+
+            <TabItem Header="Info" FontSize="16">
+                <StackPanel Name="SelectionInfo">
+                    <Image Name="InfoImageJacket" Margin="24 0 24 0" Source="/Assets/imgs/jacket-placeholder.png"/>
+                    <TextBlock Name="InfoNameText" Text="Name" FontWeight="Bold" HorizontalAlignment="Center" Margin="0 10 0 0"/>
+                    <TextBlock Name="InfoArtistText" Text="Artist" HorizontalAlignment="Center"/>
+                    <TextBlock Name="InfoSourceText" Text="Source" HorizontalAlignment="Center"/>
+                </StackPanel>
+            </TabItem>
+            <TabItem Header="Filters" FontSize="16">
+                <StackPanel>
+                    <!-- Sources Filter -->
+                    <TextBlock Text="Sources" FontWeight="Bold" Margin="0 0 0 4"/>
+                    <StackPanel Margin="10 0 0 0" Name="FilterSourceContainer"/>
+                    <!-- Categories Filter -->
+                    <TextBlock Text="Categories" FontWeight="Bold" Margin="0 20 0 4"/>
+                    <StackPanel Margin="10 0 0 0" Name="FilterCategoryContainer"/>
+                </StackPanel>
+            </TabItem>
+        </TabControl>
+        <!-- Song Listing Table -->
+        <DockPanel>
+            <DockPanel Margin="0 4 0 8" DockPanel.Dock="Top">
+                <!-- <ComboBox DockPanel.Dock="Right" Width="160" PlaceholderText="Source filter" Name="SourceFilter"/> -->
+                <TextBox Watermark="Search for title, artist, designer..."/>
+            </DockPanel>
+            <UserControl Background="{DynamicResource DataGridContentBackground}">
+                <DataGrid Name="ListingTable" IsReadOnly="True" SelectionMode="Extended" ItemsSource="{Binding SongCollection}">
+                    <DataGrid.Columns>
+                        <DataGridTextColumn Header="ID" Width="90" Binding="{Binding Id}"/>
+                        <DataGridTextColumn Header="Title" Width="*" Binding="{Binding Name}"/>
+                        <DataGridTextColumn Header="Artist" Width="*" Binding="{Binding Artist}"/>
+                        <DataGridTextColumn Header="Source" Width="150" Binding="{Binding Source}"/>
+                    </DataGrid.Columns>
+                </DataGrid>
+            </UserControl>
+        </DockPanel>
+    </DockPanel>
+</Panel>
@@ -0,0 +1,80 @@
+using Microsoft.VisualBasic;
+using System;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+using System.Threading.Tasks;
+using Avalonia.Controls;
+using MercuryConverter.Data;
+using Avalonia;
+
+namespace MercuryConverter.UI.Views;
+
+public partial class Selection : Panel
+{
+    public static ObservableCollection<Song> SongCollection { get; } = new();
+    public Selection()
+    {
+        InitializeComponent();
+        ListingTable.SelectionMode = DataGridSelectionMode.Extended;
+
+        foreach (var (k, v) in Consts.NUM_SOURCE)
+        {
+            FilterSourceContainer.Children.Add(
+                new CheckBox
+                {
+                    Name = $"FilterSourceCheckbox{k}",
+                    Content = v,
+                }
+            );
+        }
+        foreach (var (k, v) in Consts.CATEGORY_INDEX)
+        {
+            if (k == -1)
+                continue;
+
+            FilterCategoryContainer.Children.Add(
+                new CheckBox
+                {
+                    Name = $"FilterCategoryCheckbox{k}",
+                    Content = v,
+                }
+            );
+        }
+
+        SongCollection.CollectionChanged += OnSongsChg;
+        DataContext = this;
+
+        // placeholder data
+        if (SongCollection.Count == 0)
+        {
+            SongCollection.Add(
+                new Song { Id = "S00-000", Name = "A Name", Artist = "An Artist", Source = Consts.NUM_SOURCE[2] }
+            );
+            SongCollection.Add(
+                new Song { Id = "S00-001", Name = "A Name", Artist = "An Artist", Source = Consts.NUM_SOURCE[3] }
+            );
+        }
+    }
+
+    private void OnSongsChg(object? sender, NotifyCollectionChangedEventArgs e)
+    {
+        Console.WriteLine("Songs collection changed!");
+
+        if (e.NewItems != null)
+        {
+            Console.WriteLine("Added...");
+            foreach (Song added in e.NewItems)
+            {
+                Console.WriteLine($"[{added.Id}] {added.Artist} - {added.Name}");
+            }
+        }
+        if (e.OldItems != null)
+        {
+            Console.WriteLine("Removed...");
+            foreach (Song rem in e.OldItems)
+            {
+                Console.WriteLine($"[{rem.Id}] {rem.Artist} - {rem.Name}");
+            }
+        } 
+    }
+}