Refactor PLib video library manager's UI to implement a side panel for settings, enhancing accessibility and layout. Update MainWindow and SettingsView to accommodate the new design, ensuring the settings panel integrates seamlessly without overlaying the main content. Revise styles for app bars and status bars for consistency across the application. Update README.md to reflect these UI changes.

src/PLib.Desktop/Views/MainWindow.axaml

@@ -9,7 +9,7 @@
         Title="PLib — видеотека"
         Width="1180"
         Height="760"
-        MinWidth="640"
+        MinWidth="1000"
         MinHeight="420"
         Background="{DynamicResource PageBackgroundBrush}"
         WindowStartupLocation="CenterScreen">
@@ -95,24 +95,22 @@
 
   </Window.Resources>
 
-  <Grid RowDefinitions="Auto,*,Auto">
+  <Grid ColumnDefinitions="*,Auto">
+
+   <Grid Grid.Column="0" RowDefinitions="Auto,*,Auto">
 
     <!-- ======================= Header ======================= -->
-    <Border Grid.Row="0"
-            Background="{DynamicResource SurfaceBrush}"
-            BorderBrush="{DynamicResource SurfaceBorderBrush}"
-            BorderThickness="0,0,0,1"
-            Padding="20,14">
+    <Border Grid.Row="0" Classes="appBar">
       <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="20">
 
         <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
-          <Border Width="34"
-                  Height="34"
+          <Border Width="32"
+                  Height="32"
                   CornerRadius="9"
                   Background="{DynamicResource AccentSoftBrush}">
             <icons:MaterialIcon Kind="VideoVintage"
-                                Width="19"
-                                Height="19"
+                                Width="18"
+                                Height="18"
                                 Foreground="{DynamicResource AccentBrush}" />
           </Border>
           <StackPanel VerticalAlignment="Center">
@@ -122,6 +120,7 @@
         </StackPanel>
 
         <TextBox Grid.Column="1"
+                 MinWidth="150"
                  MaxWidth="420"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Center"
@@ -154,7 +153,10 @@
             <icons:MaterialIcon Kind="CogOutline" Width="17" Height="17" />
           </Button>
 
-          <Button Classes="Primary" Command="{Binding AddFolderCommand}">
+          <!-- Redundant while the panel is open, and the header needs the room there. -->
+          <Button Classes="Primary"
+                  Command="{Binding AddFolderCommand}"
+                  IsVisible="{Binding !IsSettingsOpen}">
             <StackPanel Orientation="Horizontal" Spacing="7">
               <icons:MaterialIcon Kind="FolderPlusOutline" Width="17" Height="17" />
               <TextBlock Text="Добавить папку" />
@@ -209,11 +211,7 @@
     </Panel>
 
     <!-- ======================= Status bar ======================= -->
-    <Border Grid.Row="2"
-            Background="{DynamicResource SurfaceBrush}"
-            BorderBrush="{DynamicResource SurfaceBorderBrush}"
-            BorderThickness="0,1,0,0"
-            Padding="20,9">
+    <Border Grid.Row="2" Classes="statusBar">
       <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="14">
 
         <ProgressBar Grid.Column="0"
@@ -239,17 +237,14 @@
       </Grid>
     </Border>
 
+   </Grid>
+
     <!-- ======================= Settings panel ======================= -->
-    <Panel Grid.Row="0"
-           Grid.RowSpan="3"
-           Classes="settingsOverlay"
-           Classes.open="{Binding IsSettingsOpen}">
-      <Button Classes="scrim" Command="{Binding CloseSettingsCommand}" />
-      <Border Classes="drawer">
-        <ContentControl Content="{Binding SettingsPanel}"
-                        ContentTemplate="{StaticResource SettingsTemplate}" />
-      </Border>
-    </Panel>
+    <Border Grid.Column="1" Classes="settingsPanel" Classes.open="{Binding IsSettingsOpen}">
+      <ContentControl Width="400"
+                      Content="{Binding SettingsPanel}"
+                      ContentTemplate="{StaticResource SettingsTemplate}" />
+    </Border>
 
   </Grid>
 </Window>