From 1ff80890d548652bb3578b6e30cb669cfab0863b Mon Sep 17 00:00:00 2001
From: Ano-sys <timo.niemann02@gmail.com>
Date: Fri, 3 Apr 2026 00:44:55 +0200
Subject: [PATCH] Upgraded UI drastically

---
 Photos/Animations/CardHoverEffectBehavior.cs |   2 +-
 Photos/ViewModels/MainWindowViewModel.cs     |   8 +
 Photos/Views/MainWindow.axaml                | 275 ++++++++++++++-----
 3 files changed, 209 insertions(+), 76 deletions(-)

diff --git a/Photos/Animations/CardHoverEffectBehavior.cs b/Photos/Animations/CardHoverEffectBehavior.cs
index 6349461..8519212 100644
--- a/Photos/Animations/CardHoverEffectBehavior.cs
+++ b/Photos/Animations/CardHoverEffectBehavior.cs
@@ -67,7 +67,7 @@ public static class CardHoverEffectBehavior
         if (sender is not Control element)
             return;
 
-        element.ZIndex = 1;
+        element.ZIndex = 10;
         var visual = ElementComposition.GetElementVisual(element);
         var compositor = visual?.Compositor;
 
diff --git a/Photos/ViewModels/MainWindowViewModel.cs b/Photos/ViewModels/MainWindowViewModel.cs
index e0b1d11..f3f20ca 100644
--- a/Photos/ViewModels/MainWindowViewModel.cs
+++ b/Photos/ViewModels/MainWindowViewModel.cs
@@ -22,6 +22,7 @@ public partial class MainWindowViewModel : ViewModelBase
     [ObservableProperty] private ObservableCollection<Photo> _photos = [];
 
     [ObservableProperty] private Photo? _selectedPhoto;
+    [ObservableProperty] private bool _photosLoaded = false;
 
     public string LibraryPath { get; private set; } = string.Empty;
     
@@ -40,6 +41,13 @@ public partial class MainWindowViewModel : ViewModelBase
 
         LibraryPath = folder;
         await AddPhotosAsync(folder);
+        PhotosLoaded = true;
+    }
+
+    public void CloseDirectory()
+    {
+        Photos.Clear();
+        PhotosLoaded = false;
     }
 
     private void SanitizeFiles(List<string> files, IEnumerable<string> extensions)
diff --git a/Photos/Views/MainWindow.axaml b/Photos/Views/MainWindow.axaml
index 79f2935..001d450 100644
--- a/Photos/Views/MainWindow.axaml
+++ b/Photos/Views/MainWindow.axaml
@@ -7,7 +7,9 @@
         xmlns:ic="using:Avalonia.Xaml.Interactions.Core"
         xmlns:models="using:Photos.Models"
         xmlns:anim="using:Photos.Animations"
-        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+        mc:Ignorable="d"
+        d:DesignWidth="1200"
+        d:DesignHeight="800"
         x:Class="Photos.Views.MainWindow"
         x:DataType="vm:MainWindowViewModel"
         x:Name="Root"
@@ -18,86 +20,209 @@
         ExtendClientAreaChromeHints="NoChrome"
         TransparencyLevelHint="AcrylicBlur"
         Background="Transparent"
-        ExtendClientAreaToDecorationsHint="True"
-        >
+        ExtendClientAreaToDecorationsHint="True">
 
     <Design.DataContext>
-        <!-- This only sets the DataContext for the previewer in an IDE,
-             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
         <vm:MainWindowViewModel/>
     </Design.DataContext>
 
-    <Grid ColumnDefinitions="1*, 5*" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-        <Menu>
-            <Button Content="Open Directory" Command="{Binding OpenDirectory}"/>
-        </Menu>
-        <ScrollViewer Grid.Column="1">
-            <ItemsRepeater ItemsSource="{Binding Photos}"
-                           HorizontalAlignment="Stretch"
-                           VerticalAlignment="Stretch"
-                           Margin="5"
-                           >
-                <ItemsRepeater.Layout>
-                    <UniformGridLayout MinItemWidth="190"
-                                       MinItemHeight="240"
-                                       MinRowSpacing="12"
-                                       MinColumnSpacing="12"
-                                       >
-                    </UniformGridLayout>
-                </ItemsRepeater.Layout>
+    <Grid Background="#0F0F10">
+        <!-- Hintergrund -->
+        <Rectangle Fill="#CC0B0B0C"/>
 
-                <ItemsRepeater.ItemTemplate>
+        <Grid RowDefinitions="Auto,*">
+
+            <!-- Top Bar -->
+            <Border Grid.Row="0"
+                    Margin="18,18,18,0"
+                    Padding="14,10"
+                    Background="#CC161618"
+                    BorderBrush="#22FFFFFF"
+                    BorderThickness="1"
+                    CornerRadius="14"
+                    BoxShadow="0 10 30 0 #50000000"
+                    ZIndex="20">
+                <DockPanel LastChildFill="True">
+                    <StackPanel Orientation="Horizontal"
+                                DockPanel.Dock="Left"
+                                Spacing="10"
+                                VerticalAlignment="Center">
+                        <Border Width="10"
+                                Height="10"
+                                CornerRadius="999"
+                                Background="#E6FFFFFF"
+                                Opacity="0.9"/>
+                        <TextBlock Text="Photos"
+                                   VerticalAlignment="Center"
+                                   FontSize="16"
+                                   FontWeight="SemiBold"
+                                   Foreground="#F2FFFFFF"/>
+                    </StackPanel>
+
+                    <Menu DockPanel.Dock="Right"
+                          Background="Transparent"
+                          Foreground="#EDEDED"
+                          Margin="5,0,0,0"
+                          >
+                        <!--
+                        <MenuItem Header="_File">
+                            <MenuItem Header="_Open" Command="{Binding OpenDirectory}"/>
+                            <MenuItem Header="_Close" Command="{Binding CloseDirectory}"/>
+                        </MenuItem>
+                        -->
+                        <MenuItem Header="_Open Library" IsVisible="{Binding !PhotosLoaded}" Command="{Binding OpenDirectory}"/>
+                        <MenuItem Header="_Close Library" IsVisible="{Binding PhotosLoaded}" Command="{Binding CloseDirectory}"/>
+                    </Menu>
+                </DockPanel>
+            </Border>
+
+            <!-- Empty state -->
+            <Grid Grid.Row="1"
+                  IsVisible="{Binding !PhotosLoaded}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch">
+                <Border HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Padding="28"
+                        Background="#B3141416"
+                        BorderBrush="#22FFFFFF"
+                        BorderThickness="1"
+                        CornerRadius="18"
+                        BoxShadow="0 16 40 0 #40000000">
+                    <StackPanel Spacing="14"
+                                HorizontalAlignment="Center">
+                        <TextBlock Text="No directory opened"
+                                   HorizontalAlignment="Center"
+                                   FontSize="22"
+                                   FontWeight="SemiBold"
+                                   Foreground="#F4FFFFFF"/>
+                        <TextBlock Text="Choose a folder to display your images."
+                                   HorizontalAlignment="Center"
+                                   Foreground="#B8FFFFFF"/>
+                        <Button Content="Open Directory"
+                                Command="{Binding OpenDirectory}"
+                                HorizontalAlignment="Center"
+                                Padding="20,10"
+                                CornerRadius="10"/>
+                    </StackPanel>
+                </Border>
+            </Grid>
+
+            <!-- Galerie -->
+            <ScrollViewer Grid.Row="0"
+                          Grid.RowSpan="2"
+                          IsVisible="{Binding PhotosLoaded}">
+                <Border Padding="72,88,72,48">
+                    <ItemsRepeater ItemsSource="{Binding Photos}"
+                                   HorizontalAlignment="Stretch"
+                                   VerticalAlignment="Stretch"
+                                   ClipToBounds="False">
+                        <ItemsRepeater.Layout>
+                            <UniformGridLayout MinItemWidth="220"
+                                               MinItemHeight="290"
+                                               MinRowSpacing="18"
+                                               MinColumnSpacing="18"/>
+                        </ItemsRepeater.Layout>
+
+                        <ItemsRepeater.ItemTemplate>
+                            <DataTemplate DataType="models:Photo">
+                                <Border Background="#B8141416"
+                                        BorderBrush="#22FFFFFF"
+                                        BorderThickness="1"
+                                        CornerRadius="18"
+                                        Padding="14"
+                                        BoxShadow="0 10 24 0 #30000000"
+                                        anim:CardHoverEffectBehavior.IsEnabled="True"
+                                        anim:CardHoverEffectBehavior.MaxRotationAngle="2.5"
+                                        anim:CardHoverEffectBehavior.ScaleFactor="1.08">
+                                    <StackPanel Orientation="Vertical"
+                                                Spacing="10">
+                                        <i:Interaction.Behaviors>
+                                            <ic:EventTriggerBehavior EventName="PointerReleased">
+                                                <ic:InvokeCommandAction Command="{Binding DataContext.PhotoClicked, ElementName=Root}"
+                                                                        PassEventArgsToCommand="True"/>
+                                            </ic:EventTriggerBehavior>
+                                        </i:Interaction.Behaviors>
+
+                                        <Border Width="180"
+                                                Height="180"
+                                                HorizontalAlignment="Center"
+                                                CornerRadius="12"
+                                                ClipToBounds="True"
+                                                Background="#14000000">
+                                            <Image Source="{Binding PreviewImage}"
+                                                   Stretch="UniformToFill"/>
+                                        </Border>
+
+                                        <TextBlock Text="{Binding DisplayName}"
+                                                   ToolTip.Tip="{Binding DisplayName}"
+                                                   HorizontalAlignment="Center"
+                                                   Width="180"
+                                                   TextAlignment="Center"
+                                                   TextTrimming="CharacterEllipsis"
+                                                   FontSize="14"
+                                                   FontWeight="SemiBold"
+                                                   Foreground="#F1FFFFFF"/>
+
+                                        <TextBlock Text="{Binding DisplayPath}"
+                                                   ToolTip.Tip="{Binding DisplayPath}"
+                                                   HorizontalAlignment="Center"
+                                                   Width="180"
+                                                   TextAlignment="Center"
+                                                   TextTrimming="CharacterEllipsis"
+                                                   MaxLines="2"
+                                                   FontSize="11"
+                                                   Foreground="#99FFFFFF"/>
+                                    </StackPanel>
+                                </Border>
+                            </DataTemplate>
+                        </ItemsRepeater.ItemTemplate>
+                    </ItemsRepeater>
+                </Border>
+            </ScrollViewer>
+
+            <!-- Bild-Overlay -->
+            <TransitioningContentControl Grid.Row="0"
+                                         Grid.RowSpan="2"
+                                         Content="{Binding SelectedPhoto}"
+                                         ZIndex="50">
+                <TransitioningContentControl.PageTransition>
+                    <CrossFade Duration="0:0:0.18"/>
+                </TransitioningContentControl.PageTransition>
+
+                <i:Interaction.Behaviors>
+                    <ic:EventTriggerBehavior EventName="PointerReleased">
+                        <ic:InvokeCommandAction Command="{Binding Path=DataContext.SelectedPhotoClicked, ElementName=Root}"/>
+                    </ic:EventTriggerBehavior>
+                </i:Interaction.Behaviors>
+
+                <TransitioningContentControl.ContentTemplate>
                     <DataTemplate DataType="models:Photo">
-                        <Border BorderBrush="Black"
-                                Background="#aa000000"
-                                BorderThickness="1"
-                                CornerRadius="7.5"
-                                anim:CardHoverEffectBehavior.IsEnabled="True"
-                                anim:CardHoverEffectBehavior.MaxRotationAngle="3.5"
-                                anim:CardHoverEffectBehavior.ScaleFactor="1.5"
-                                >
-                            <StackPanel Orientation="Vertical" Margin="12">
-                                <i:Interaction.Behaviors>
-                                    <ic:EventTriggerBehavior EventName="PointerReleased">
-                                        <ic:InvokeCommandAction Command="{Binding DataContext.PhotoClicked, ElementName=Root}" PassEventArgsToCommand="True"/>
-                                    </ic:EventTriggerBehavior>
-                                </i:Interaction.Behaviors>
-                                    <Image Source="{Binding PreviewImage}"
-                                           Width="150"
-                                           Height="150"/>
-                                    <TextBlock Text="{Binding DisplayName}"
-                                               HorizontalAlignment="Center"
-                                               Width="150" />
-                                    <TextBlock Text="{Binding DisplayPath}" HorizontalAlignment="Center" Width="150"/>
-                            </StackPanel>
-                        </Border>
-                    </DataTemplate>
-                </ItemsRepeater.ItemTemplate>
-            </ItemsRepeater>
-        </ScrollViewer>
-        <TransitioningContentControl Grid.Column="0"
-                                     Grid.ColumnSpan="2"
-                                     Content="{Binding SelectedPhoto}">
-            <TransitioningContentControl.PageTransition>
-                <CrossFade Duration="0:0:0.18" />
-            </TransitioningContentControl.PageTransition>
+                        <Grid>
+                            <Rectangle Fill="#E6101011"/>
 
-            <TransitioningContentControl.ContentTemplate>
-                <DataTemplate DataType="models:Photo">
-                    <Border Background="#AA000000">
-                        <Image Source="{Binding FullImage}"
-                               Margin="50"
-                               Stretch="Uniform"
-                               >
-                            <i:Interaction.Behaviors>
-                                <ic:EventTriggerBehavior EventName="PointerReleased">
-                                    <ic:InvokeCommandAction Command="{Binding Path=DataContext.SelectedPhotoClicked, ElementName=Root}"/>
-                                </ic:EventTriggerBehavior>
-                            </i:Interaction.Behaviors>
-                        </Image>
-                    </Border>
-                </DataTemplate>
-            </TransitioningContentControl.ContentTemplate>
-        </TransitioningContentControl>
+                            <Border Margin="36"
+                                    Padding="18"
+                                    Background="#12000000"
+                                    BorderBrush="#18FFFFFF"
+                                    BorderThickness="1"
+                                    CornerRadius="24">
+                                <Grid RowDefinitions="*, auto">
+                                    <Image Source="{Binding FullImage}"
+                                           Stretch="Uniform">
+                                        <i:Interaction.Behaviors>
+                                            <ic:EventTriggerBehavior EventName="PointerReleased">
+                                                <ic:InvokeCommandAction Command="{Binding Path=DataContext.SelectedPhotoClicked, ElementName=Root}"/>
+                                            </ic:EventTriggerBehavior>
+                                        </i:Interaction.Behaviors>
+                                    </Image>
+                                    <TextBlock Grid.Row="1" Text="{Binding DisplayName}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
+                                </Grid>
+                            </Border>
+                        </Grid>
+                    </DataTemplate>
+                </TransitioningContentControl.ContentTemplate>
+            </TransitioningContentControl>
+        </Grid>
     </Grid>
-</Window>
+</Window>
\ No newline at end of file