feat: 侧边栏UI

LiuYunPlayer · LiuYunPlayer · commit 27559326b96b · 2025-02-24T20:59:20.000+08:00
diff --git a/TuneLab/GUI/Assets.cs b/TuneLab/GUI/Assets.cs
@@ -11,7 +11,7 @@ internal static class Assets
 {
     public static SvgIcon Eye = new("<svg width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.99996 1C3.09724 1 0.675952 2.71772 0.119995 4.99993C0.675887 7.2822 3.09721 9 5.99999 9C8.90271 9 11.324 7.28228 11.88 5.00007C11.3241 2.7178 8.90274 1 5.99996 1ZM6 7C7.10457 7 8 6.10457 8 5C8 3.89543 7.10457 3 6 3C4.89543 3 4 3.89543 4 5C4 6.10457 4.89543 7 6 7Z\" fill=\"white\"/>\r\n</svg>");
     public static SvgIcon Part = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<rect x=\"0.5\" y=\"3.5\" width=\"23\" height=\"16\" rx=\"1.5\" stroke=\"white\"/>\r\n<path d=\"M0 5C0 3.89543 0.895431 3 2 3H22C23.1046 3 24 3.89543 24 5V7H0V5Z\" fill=\"white\"/>\r\n<rect x=\"3\" y=\"9\" width=\"6\" height=\"2\" fill=\"white\"/>\r\n<rect x=\"9\" y=\"15\" width=\"6\" height=\"2\" fill=\"white\"/>\r\n<rect x=\"15\" y=\"11\" width=\"6\" height=\"2\" fill=\"white\"/>\r\n</svg>");
-    public static SvgIcon Properties = new("<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<rect y=\"2\" width=\"16\" height=\"2\" rx=\"1\" fill=\"white\"/>\r\n<rect y=\"7\" width=\"16\" height=\"2\" rx=\"1\" fill=\"white\"/>\r\n<rect y=\"12\" width=\"16\" height=\"2\" rx=\"1\" fill=\"white\"/>\r\n<circle cx=\"12\" cy=\"3\" r=\"2\" fill=\"white\"/>\r\n<circle cx=\"4\" cy=\"8\" r=\"2\" fill=\"white\"/>\r\n<circle cx=\"8\" cy=\"13\" r=\"2\" fill=\"white\"/>\r\n</svg>");
+    public static SvgIcon Properties = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M2 6C2 5.44772 2.44772 5 3 5H15V7H3C2.44772 7 2 6.55228 2 6V6Z\" fill=\"white\"/>\r\n<path d=\"M2 12C2 11.4477 2.44772 11 3 11H5V13H3C2.44772 13 2 12.5523 2 12V12Z\" fill=\"white\"/>\r\n<path d=\"M2 18C2 17.4477 2.44772 17 3 17H10V19H3C2.44772 19 2 18.5523 2 18V18Z\" fill=\"white\"/>\r\n<path d=\"M19 5H21C21.5523 5 22 5.44772 22 6V6C22 6.55228 21.5523 7 21 7H19V5Z\" fill=\"white\"/>\r\n<path d=\"M9 11H21C21.5523 11 22 11.4477 22 12V12C22 12.5523 21.5523 13 21 13H9V11Z\" fill=\"white\"/>\r\n<path d=\"M14 17H21C21.5523 17 22 17.4477 22 18V18C22 18.5523 21.5523 19 21 19H14V17Z\" fill=\"white\"/>\r\n<rect x=\"16\" y=\"3\" width=\"2\" height=\"6\" rx=\"1\" fill=\"white\"/>\r\n<rect x=\"6\" y=\"9\" width=\"2\" height=\"6\" rx=\"1\" fill=\"white\"/>\r\n<rect x=\"11\" y=\"15\" width=\"2\" height=\"6\" rx=\"1\" fill=\"white\"/>\r\n</svg>\r\n");
     public static SvgIcon Track = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<g clip-path=\"url(#clip0_1327_14013)\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11 1C11 0.447716 11.4477 0 12 0C12.5523 0 13 0.447715 13 1V5V9V10V14V15V19V23C13 23.5523 12.5523 24 12 24C11.4477 24 11 23.5523 11 23V19V15V14V10V9V5V1ZM10 5H1C0.447715 5 0 5.44772 0 6V8C0 8.55229 0.447715 9 1 9H10V5ZM10 10H9C8.44771 10 8 10.4477 8 11V13C8 13.5523 8.44771 14 9 14H10V10ZM10 15H6C5.44772 15 5 15.4477 5 16V18C5 18.5523 5.44772 19 6 19H10V15ZM14 19H18C18.5523 19 19 18.5523 19 18V16C19 15.4477 18.5523 15 18 15H14V19ZM14 14H23C23.5523 14 24 13.5523 24 13V11C24 10.4477 23.5523 10 23 10H14V14ZM14 9H15C15.5523 9 16 8.55229 16 8V6C16 5.44772 15.5523 5 15 5H14V9Z\" fill=\"white\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_1327_14013\">\r\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg>");
     public static SvgIcon Gain = new("<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M14 13V4.41421C14 3.52331 12.9229 3.07714 12.2929 3.70711L3.70711 12.2929C3.07714 12.9229 3.52331 14 4.41421 14H13C13.5523 14 14 13.5523 14 13Z\" fill=\"white\"/>\r\n</svg>");
     public static SvgIcon Pan = new("<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M14 11.17V4.83C14 3.34298 14 2.59947 13.7235 2.30969C13.4948 2.06997 13.1622 1.9591 12.8354 2.01364C12.4403 2.07958 11.9942 2.67439 11.102 3.864L8.7245 7.034C8.46197 7.38404 8.3307 7.55906 8.28133 7.75166C8.23956 7.91459 8.23956 8.08541 8.28133 8.24834C8.3307 8.44094 8.46197 8.61596 8.7245 8.966L11.102 12.136C11.9942 13.3256 12.4403 13.9204 12.8354 13.9864C13.1622 14.0409 13.4948 13.93 13.7235 13.6903C14 13.4005 14 12.657 14 11.17Z\" fill=\"white\"/>\r\n<path d=\"M2 11.17V4.83C2 3.34298 2 2.59947 2.27649 2.30969C2.50521 2.06997 2.83781 1.9591 3.16462 2.01364C3.55968 2.07958 4.00579 2.67439 4.898 3.864L7.2755 7.034C7.53803 7.38404 7.6693 7.55906 7.71867 7.75166C7.76044 7.91459 7.76044 8.08541 7.71867 8.24834C7.6693 8.44094 7.53803 8.61596 7.2755 8.966L4.898 12.136C4.00579 13.3256 3.55968 13.9204 3.16462 13.9864C2.83781 14.0409 2.50521 13.93 2.27649 13.6903C2 13.4005 2 12.657 2 11.17Z\" fill=\"white\"/>\r\n</svg>");
@@ -36,6 +36,9 @@ internal static class Assets
     public static SvgIcon Pause = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\" fill=\"white\"/>\r\n<rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\" fill=\"white\"/>\r\n</svg>");
     public static SvgIcon GotoStart = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<g clip-path=\"url(#clip0_2010_563)\">\r\n<path d=\"M8 13.7321C6.66667 12.9623 6.66667 11.0377 8 10.2679L17 5.0718C18.3333 4.302 20 5.26425 20 6.80385V17.1962C20 18.7358 18.3333 19.698 17 18.9282L8 13.7321Z\" fill=\"white\"/>\r\n<rect x=\"4\" y=\"4\" width=\"2\" height=\"16\" rx=\"1\" fill=\"white\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_2010_563\">\r\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg>");
     public static SvgIcon GotoEnd = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<g clip-path=\"url(#clip0_2010_562)\">\r\n<path d=\"M16 10.2679C17.3333 11.0377 17.3333 12.9623 16 13.7321L7 18.9282C5.66667 19.698 4 18.7358 4 17.1962L4 6.80385C4 5.26425 5.66667 4.302 7 5.0718L16 10.2679Z\" fill=\"white\"/>\r\n<rect x=\"18\" y=\"4\" width=\"2\" height=\"16\" rx=\"1\" fill=\"white\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_2010_562\">\r\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg>");
+    public static SvgIcon Extensions = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<g clip-path=\"url(#clip0_2097_605)\">\r\n<rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" stroke=\"white\" stroke-width=\"2\"/>\r\n<rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" stroke=\"white\" stroke-width=\"2\"/>\r\n<rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" stroke=\"white\" stroke-width=\"2\"/>\r\n<rect x=\"17.2189\" y=\"0.718931\" width=\"7\" height=\"7\" rx=\"1\" transform=\"rotate(30 17.2189 0.718931)\" stroke=\"white\" stroke-width=\"2\"/>\r\n</g>\r\n<defs>\r\n<clipPath id=\"clip0_2097_605\">\r\n<rect width=\"24\" height=\"24\" fill=\"white\"/>\r\n</clipPath>\r\n</defs>\r\n</svg>\r\n");
+    public static SvgIcon Settings = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"white\" stroke-width=\"1.5\"/>\r\n<path d=\"M13.5 4H10.5L9 7L5.5 6.5L4 9.5L6 12L4 15L5.5 17.5L9 17L10.5 20H13.5L15 17L18.5 17.5L20 15L18 12L20 9.5L18.5 6.5L15 7L13.5 4Z\" stroke=\"white\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\r\n</svg>");
+    public static SvgIcon Export = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M8 10H4V20H20V10H16\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n<path d=\"M12 14V4M12 4L9 7M12 4L15 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n");
     public static SvgIcon None = new("");
 
     public static FontFamily NotoMono = new FontFamily("NotoMono");
diff --git a/TuneLab/GUI/IItem.cs b/TuneLab/GUI/IItem.cs
@@ -46,6 +46,7 @@ internal class IconItem : IItem
     public int PivotAlignment { get; set; } = GUI.Alignment.Center;
     public int Alignment { get; set; } = GUI.Alignment.Center;
     public Point Offset { get; set; } = new Point();
+    public double Scale { get; set; } = 1;
 
     public void Paint(DrawingContext context, Rect rect, Color color)
     {
@@ -54,6 +55,7 @@ public void Paint(DrawingContext context, Rect rect, Color color)
 
         var image = Icon.GetImage(color);
         var size = image.Size;
+        size *= Scale;
         var anchor = Alignment.Offset(rect.Width, rect.Height);
         var pivot = Alignment.Offset(size.Width, size.Height);
         context.DrawImage(Icon.GetImage(color), new Rect(Offset.X - anchor.Item1 + pivot.Item1, Offset.Y - anchor.Item2 + pivot.Item2, size.Width, size.Height));
diff --git a/TuneLab/UI/MainWindow/Editor/Editor.cs b/TuneLab/UI/MainWindow/Editor/Editor.cs
@@ -64,9 +64,19 @@ public Editor()
         mPianoWindow = new(this);// { VerticalAlignment = Avalonia.Layout.VerticalAlignment.Bottom };
         mTrackWindow = new(this);
         mRightSideTabBar = new();
-        mRightSideBar = new() { Width = 280 };
+        mRightSideBar = new() { Width = 280, Margin = new(1, 0, 0, 0) };
 
-        this.AddDock(mRightSideBar, Dock.Right);
+        var panel = new DockPanel() { Background = Style.INTERFACE.ToBrush(), Margin = new(1, 0, 0, 0) };
+        {
+            var hoverBack = Colors.White.Opacity(0.05);
+            var settingsButton = new GUI.Components.Button() { Width = 48, Height = 48 }
+            .AddContent(new() { Item = new IconItem() { Icon = Assets.Settings, Scale = 4.0 / 3.0 }, ColorSet = new() { Color = Style.LIGHT_WHITE.Opacity(0.5), HoveredColor = Colors.White, PressedColor = Colors.White } });
+            settingsButton.Clicked += () => new SettingsWindow().Show(this.Window());
+            panel.AddDock(settingsButton, Dock.Bottom);
+            panel.AddDock(mRightSideTabBar);
+        }
+        this.AddDock(panel, Dock.Right);
+        this.AddDock(mRightSideBar, Dock.Right); mRightSideBar.IsVisible = false;
         this.AddDock(mTrackWindow, Dock.Top);
         this.AddDock(mFunctionBar, Dock.Top);
         this.AddDock(mPianoWindow);
@@ -105,6 +115,19 @@ public Editor()
         ProjectProvider.When(project => project.Tracks.ItemAdded).Subscribe(track => { if (track.Parts.Contains(mEditingPart)) SwitchEditingPart(mEditingPart); });
         mPianoWindow.PartProvider.ObjectChanged.Subscribe(() => { mPianoWindow.IsVisible = mPianoWindow.Part != null; mPropertySideBarContentProvider.SetPart(mPianoWindow.Part); }, s);
 
+        mRightSideTabBar.SelectedTab.Modified.Subscribe(() => 
+        {
+            mRightSideBar.IsVisible = true;
+            switch (mRightSideTabBar.SelectedTab.Value)
+            {
+                case SideBarTab.Properties:
+                    mRightSideBar.SetContent(mPropertySideBarContentProvider.Content);
+                    break;
+                default:
+                    mRightSideBar.IsVisible = false;
+                    break;
+            }
+        });
         mRightSideBar.SetContent(mPropertySideBarContentProvider.Content);
 
         AddHandler(DragDrop.DropEvent, OnDrop);
diff --git a/TuneLab/UI/MainWindow/Editor/FunctionBar/FunctionBar.cs b/TuneLab/UI/MainWindow/Editor/FunctionBar/FunctionBar.cs
@@ -46,23 +46,9 @@ public FunctionBar(IDependency dependency)
         {
             var hoverBack = Colors.White.Opacity(0.05);
 
-            var collapseTextItem = new TextItem() { Text = "Hide Properties".Tr(this) };
-            var collapseButton = new Toggle() { Width = 120, Height = 32 };
-            collapseButton
-                .AddContent(new() { Item = new BorderItem() { CornerRadius = 4 }, ColorSet = new() { Color = Style.ITEM } })
-                .AddContent(new() { Item = collapseTextItem, ColorSet = new() { Color = Style.LIGHT_WHITE } });
-            collapseButton.IsChecked = true;
-            collapseButton.Switched.Subscribe(() => { collapseTextItem.Text = collapseButton.IsChecked ? "Hide Properties".Tr(this) : "Show Properties".Tr(this); CollapsePropertiesAsked?.Invoke(collapseButton.IsChecked); });
-            dockPanel.AddDock(collapseButton, Dock.Right);
-
-            dockPanel.AddDock(new Border() { Width = 12, Background = Brushes.Transparent, IsHitTestVisible = false }, Dock.Right);
-
             void SetupToolTip(Control toggleButton,string ToolTipText)
             {
-                ToolTip.SetPlacement(toggleButton, PlacementMode.Top);
-                ToolTip.SetVerticalOffset(toggleButton, -8);
-                ToolTip.SetShowDelay(toggleButton, 0);
-                ToolTip.SetTip(toggleButton, ToolTipText);
+                toggleButton.SetupToolTip(ToolTipText, PlacementMode.Top, verticalOffset: -8);
             }
 
             var audioControlPanel = new StackPanel() { Orientation = Avalonia.Layout.Orientation.Horizontal, Spacing = 12, HorizontalAlignment = Avalonia.Layout.HorizontalAlignment.Center, Margin = new(12, 0) };
diff --git a/TuneLab/UI/MainWindow/Editor/PianoWindow/SideBar/SideTabBar.cs b/TuneLab/UI/MainWindow/Editor/PianoWindow/SideBar/SideTabBar.cs
diff --git a/TuneLab/UI/MainWindow/Editor/SideBar/ISideBarContentProvider.cs b/TuneLab/UI/MainWindow/Editor/SideBar/ISideBarContentProvider.cs
diff --git a/TuneLab/UI/MainWindow/Editor/SideBar/Properties/MidiPartFixedController.cs b/TuneLab/UI/MainWindow/Editor/SideBar/Properties/MidiPartFixedController.cs
diff --git a/TuneLab/UI/MainWindow/Editor/SideBar/Properties/PropertySideBarContentProvider.cs b/TuneLab/UI/MainWindow/Editor/SideBar/Properties/PropertySideBarContentProvider.cs
diff --git a/TuneLab/UI/MainWindow/Editor/SideBar/SideBar.cs b/TuneLab/UI/MainWindow/Editor/SideBar/SideBar.cs
@@ -26,22 +26,16 @@ public SideBar()
     {
         Focusable = true;
         IsTabStop = false;
-        var title = new DockPanel() { Height = 48, Background = Style.INTERFACE.ToBrush(), Margin = new(1, 0), VerticalAlignment = Avalonia.Layout.VerticalAlignment.Top };
+        var title = new DockPanel() { Height = 48, Background = Style.INTERFACE.ToBrush(), VerticalAlignment = Avalonia.Layout.VerticalAlignment.Top };
         {
-            var border = new Border() { Height = 1, Background = Style.BACK.ToBrush() };
-            title.Children.Add(border);
-            DockPanel.SetDock(border, Dock.Bottom);
-            mIcon = new Image() { Width = 16, Height = 16, Margin = new(24, 16, 16, 16) };
-            title.Children.Add(mIcon);
-            DockPanel.SetDock(mIcon, Dock.Left);
+            mIcon = new Image() { Width = 24, Height = 24, Margin = new(24, 12, 16, 12) };
+            title.AddDock(mIcon, Dock.Left);
             mName = new Label() { FontSize = 16, VerticalAlignment = Avalonia.Layout.VerticalAlignment.Center, Foreground = Style.TEXT_LIGHT.ToBrush() };
-            title.Children.Add(mName);
+            title.AddDock(mName);
         }
-        Children.Add(title);
-        DockPanel.SetDock(title, Dock.Top);
-
-        mListView.Content.Margin = new Thickness(1, 0);
-        Children.Add(mListView);
+        this.AddDock(title, Dock.Top);
+        this.AddDock(new Border() { Height = 1, Background = Style.BACK.ToBrush() }, Dock.Top);
+        this.AddDock(mListView);
     }
 
     public void SetContent(SideBarContent content)
diff --git a/TuneLab/UI/MainWindow/Editor/SideBar/SideBarTab.cs b/TuneLab/UI/MainWindow/Editor/SideBar/SideBarTab.cs
@@ -0,0 +1,15 @@
+﻿using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace TuneLab.UI;
+
+internal enum SideBarTab
+{
+    None,
+    Extensions,
+    Properties,
+    Export,
+}
diff --git a/TuneLab/UI/MainWindow/Editor/SideBar/SideTabBar.cs b/TuneLab/UI/MainWindow/Editor/SideBar/SideTabBar.cs
@@ -0,0 +1,47 @@
+﻿using Avalonia.Media;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using TuneLab.GUI.Components;
+using TuneLab.Utils;
+using TuneLab.GUI;
+using System.Reflection;
+using Tomlyn;
+using TuneLab.Base.Event;
+using Avalonia.Controls;
+using TuneLab.I18N;
+
+namespace TuneLab.UI;
+
+internal class SideTabBar : ListView
+{
+    public INotifiableProperty<SideBarTab> SelectedTab = new NotifiableProperty<SideBarTab>(SideBarTab.None);
+
+    public SideTabBar()
+    {
+        Width = 48;
+        var hoverBack = Colors.White.Opacity(0.05);
+
+        void AddTab(SideBarTab tab, string tooltip, SvgIcon icon)
+        {
+            var toggle = new Toggle() { Width = 48, Height = 48 }
+                        .AddContent(new() { Item = new IconItem() { Icon = icon }, CheckedColorSet = new() { Color = Colors.White }, UncheckedColorSet = new() { Color = Style.LIGHT_WHITE.Opacity(0.5), HoveredColor = Style.LIGHT_WHITE } });
+            void OnTabChanged()
+            {
+                toggle.Display(SelectedTab.Value == tab);
+            }
+            toggle.SetupToolTip(tooltip, placementMode: PlacementMode.Left, verticalOffset: 0, horizontalOffset: -8, showDelay: 500);
+            toggle.Switched.Subscribe(() => SelectedTab.Value = toggle.IsChecked ? tab : SideBarTab.None);
+            SelectedTab.Modified.Subscribe(OnTabChanged);
+            Content.Children.Add(toggle);
+            Content.Children.Add(new Border() { Height = 1, Background = Style.BACK.ToBrush() });
+            OnTabChanged();
+        }
+
+        AddTab(SideBarTab.Extensions, "Extensions".Tr(this), Assets.Extensions);
+        AddTab(SideBarTab.Properties, "Properties".Tr(this), Assets.Properties);
+        AddTab(SideBarTab.Export, "Export".Tr(this), Assets.Export);
+    }
+}
diff --git a/TuneLab/UI/MainWindow/Editor/TrackWindow/TrackWindow.cs b/TuneLab/UI/MainWindow/Editor/TrackWindow/TrackWindow.cs
@@ -55,15 +55,13 @@ public TrackWindow(IDependency dependency)
         {
             var title = new DockPanel() { Height = 48, Background = Style.INTERFACE.ToBrush(), Margin = new(1, 0, 0, 0), VerticalAlignment = Avalonia.Layout.VerticalAlignment.Top };
             {
-                var border = new Border() { Height = 1, Background = Style.BACK.ToBrush() };
-                title.AddDock(border, Dock.Bottom);
                 var icon = new Image() { Source = Assets.Track.GetImage(Style.LIGHT_WHITE), Width = 24, Height = 24, Margin = new(16, 12, 12, 12) };
                 title.AddDock(icon, Dock.Left);
                 var name = new Label() { Content = "Track".Tr(TC.Dialog), FontSize = 16, VerticalAlignment = Avalonia.Layout.VerticalAlignment.Center, Foreground = Style.TEXT_LIGHT.ToBrush() };
                 title.AddDock(name);
             }
             headArea.AddDock(title, Dock.Top);
-
+            headArea.AddDock(new Border() { Height = 1, Background = Style.BACK.ToBrush() }, Dock.Top);
             headArea.AddDock(mTrackHeadList);
         }
         this.AddDock(headArea, Dock.Right);
@@ -75,6 +73,8 @@ public TrackWindow(IDependency dependency)
                 mTimelineView = new(this) { VerticalAlignment = Avalonia.Layout.VerticalAlignment.Top };
                 layer.AddDock(mTimelineView, Dock.Top);
 
+                layer.AddDock(new Border() { Height = 1, Background = Style.BACK.ToBrush() }, Dock.Top);
+
                 mTrackScrollView = new(this);
                 layer.AddDock(mTrackScrollView);
             }
diff --git a/TuneLab/Utils/Extensions.cs b/TuneLab/Utils/Extensions.cs
@@ -329,6 +329,15 @@ static async Task<IReadOnlyList<string>> OpenFoldersInternal(this Avalonia.Visua
         return result;
     }
 
+    public static void SetupToolTip(this Control control, string text, PlacementMode placementMode = PlacementMode.Top, double verticalOffset = 0, double horizontalOffset = 0, int showDelay = 0)
+    {
+        ToolTip.SetPlacement(control, placementMode);
+        ToolTip.SetVerticalOffset(control, verticalOffset);
+        ToolTip.SetHorizontalOffset(control, horizontalOffset);
+        ToolTip.SetShowDelay(control, showDelay);
+        ToolTip.SetTip(control, text);
+    }
+
     public static Color Lerp(this Color c1, Color c2, double ratio)
     {
         return new Color(
