✨ Application UI

Meio.App/App.axaml

@@ -5,6 +5,33 @@
     <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
 
     <Application.Styles>
-        <FluentTheme />
+        <FluentTheme>
+            <FluentTheme.Palettes>
+                <!--<ColorPaletteResources x:Key="Light" Accent="{DynamicResource PrimaryAccentColor}"
+                                       RegionColor="{StaticResource LightBackgroundColor}"
+                                       ErrorText="{StaticResource SecondaryAccentColor}" />
+                <ColorPaletteResources x:Key="Dark" Accent="{DynamicResource PrimaryAccentColor}"
+                                       RegionColor="{StaticResource DarkBackgroundColor}"
+                                       ErrorText="{StaticResource PrimaryAccentColor}" /> TODO-->
+                <ColorPaletteResources x:Key="Light" Accent="{DynamicResource PrimaryAccentColor}" />
+                <ColorPaletteResources x:Key="Dark" Accent="{DynamicResource PrimaryAccentColor}" />
+            </FluentTheme.Palettes>
+        </FluentTheme>
+
+        <StyleInclude Source="avares://Meio.App/Resources/Styles.axaml" />
+        <StyleInclude Source="avares://Meio.App/Resources/Settings.axaml" />
+        <StyleInclude Source="avares://Meio.App/Resources/Home.axaml" />
+        <StyleInclude Source="avares://Meio.App/Controls/Card.axaml" />
+        <StyleInclude Source="avares://Meio.App/Controls/PlaylistCard.axaml" />
+        <StyleInclude Source="avares://Meio.App/Controls/PlayingWidget.axaml" />
+        <StyleInclude Source="avares://Meio.App/Controls/Background.axaml" />
     </Application.Styles>
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="avares://Meio.App/Resources/ColorPalette.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+
 </Application>

Meio.App/App.axaml.cs

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
+using Meio.app.Views;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Logging.Console;
 using PrettyLogging.Console;

Meio.App/Controls/Background.axaml

@@ -0,0 +1,24 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:Meio.app.Controls">
+    <Design.PreviewWith>
+        <controls:Background />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|Background">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="#1C1C1C80"
+                    ZIndex="10">
+                    <Border.Effect>
+                        <BlurEffect Radius="100"/>
+                    </Border.Effect>
+                    <Canvas x:Name="Background" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

Meio.App/Controls/Background.axaml.cs

@@ -0,0 +1,99 @@
+using System;
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Shapes;
+using Avalonia.Input;
+using Avalonia.Media;
+
+namespace Meio.app.Controls;
+
+public class Background : TemplatedControl
+{
+    private new const int Width = 1366;
+    private new const int Height = 768;
+    private new const int MinEllipseSize = 50;
+    private static readonly Ellipse[] Shapes = [];
+    private Canvas? _canvas;
+    private static readonly Random Random = new(); // TODO: Better randomisation
+
+    // TODO: variable ellipse count and brushes via settings
+    // TODO: Convenient ellipse count according to window size
+    private const int Count = 20;
+
+    private readonly IBrush[] _brushes =
+    [
+        new SolidColorBrush(Color.Parse("#BFA83939")),
+        new SolidColorBrush(Color.Parse("#BFFFCACA")),
+        new SolidColorBrush(Color.Parse("#BF772727"))
+    ];
+
+    private static void GenerateEllipses(int count, IBrush[] brushes, Canvas canvas)
+    {
+        for (var i = 0; i < count; i++)
+        {
+            var posX = Random.NextDouble() * Width;
+            var posY = Random.NextDouble() * Height;
+            var size = Random.Next(MinEllipseSize, Height / 2);
+            var color = brushes[Random.Next(0, brushes.Length)];
+
+            var ellipse = new Ellipse
+            {
+                Width = size,
+                Height = size,
+                Fill = color,
+                ZIndex = 0
+            };
+
+            Shapes.Append(ellipse);
+
+            ellipse.SetValue(Canvas.LeftProperty, posX);
+            ellipse.SetValue(Canvas.TopProperty, posY);
+
+            canvas.Children.Add(ellipse);
+        }
+    }
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        // e.NameScope.FindResource("PrimaryBrush") as IBrush;
+        base.OnApplyTemplate(e);
+        _canvas = e.NameScope.Get<Canvas>("Background");
+        _canvas.PointerMoved += (s, e) => Console.WriteLine("Pointer moved!"); // TODO: not working car pas focus?
+
+        GenerateEllipses(Count, _brushes, _canvas);
+    }
+
+    /*private static double[] GenerateMoveSpeeds()
+    {
+        var speeds = new double[Shapes.Length];
+
+        for (var i = 0; i < Shapes.Length; i++)
+        {
+            speeds.Append(Random.NextDouble());
+        }
+
+        return speeds;
+    }
+
+    private void Canvas_PointerMoved(object? sender, PointerEventArgs e)
+    {
+        if (_canvas == null) return;
+
+        var speeds = GenerateMoveSpeeds();
+        Console.WriteLine(speeds);
+
+        var pos = e.GetPosition(this);
+        var centerX = _canvas.Bounds.Width / 2;
+        var centerY = _canvas.Bounds.Height / 2;
+
+        var offsetX = pos.X - centerX;
+        var offsetY = pos.Y - centerY;
+
+        for (var i = 0; i < Shapes.Length; i++)
+        {
+            Shapes[i].SetValue(Canvas.LeftProperty, centerX + offsetX * speeds[i]);
+            Shapes[i].SetValue(Canvas.TopProperty, centerY + offsetY * speeds[i]);
+        }
+    }*/
+}

Meio.App/Controls/Card.axaml

@@ -0,0 +1,28 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:Meio.app.Controls">
+    <Design.PreviewWith>
+        <controls:Card />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|Card">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Cursor="Hand">
+                    <StackPanel Spacing="16">
+                        <Border Width="150"
+                                Height="150"
+                                CornerRadius="16"
+                                BoxShadow="1 4 4 0 #4F000000"
+                                Background="{TemplateBinding CoverBrush}" />
+                        <Label>
+                            <TextBlock HorizontalAlignment="Center"
+                                       Text="{TemplateBinding Title}" />
+                        </Label>
+                    </StackPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

Meio.App/Controls/Card.axaml.cs

@@ -0,0 +1,44 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using Avalonia.Media;
+
+namespace Meio.app.Controls;
+
+public class Card : TemplatedControl
+{
+    public static readonly StyledProperty<string> TitleProperty =
+        AvaloniaProperty.Register<Card, string>(nameof(Title));
+
+    public static readonly StyledProperty<IBrush?> CoverBrushProperty =
+        AvaloniaProperty.Register<Card, IBrush?>(nameof(CoverBrush));
+
+    public static readonly StyledProperty<ICommand?> CommandProperty =
+        AvaloniaProperty.Register<Card, ICommand?>(nameof(Command));
+
+    public string Title
+    {
+        get => GetValue(TitleProperty);
+        set => SetValue(TitleProperty, value);
+    }
+
+    public IBrush? CoverBrush
+    {
+        get => GetValue(CoverBrushProperty);
+        set => SetValue(CoverBrushProperty, value);
+    }
+
+    public ICommand? Command
+    {
+        get => GetValue(CommandProperty);
+        set => SetValue(CommandProperty, value);
+    }
+
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
+    {
+        base.OnPointerPressed(e);
+        if (Command?.CanExecute(null) == true)
+            Command.Execute(null);
+    }
+}

Meio.App/Controls/HomeBar.axaml

@@ -0,0 +1,17 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:Meio.app.Controls">
+    <Design.PreviewWith>
+        <controls:HomeBar />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|HomeBar">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <TextBlock Text="Templated Control" />
+                <!-- TODO -->
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

Meio.App/Controls/HomeBar.axaml.cs

@@ -0,0 +1,7 @@
+using Avalonia.Controls.Primitives;
+
+namespace Meio.app.Controls;
+
+public class HomeBar : TemplatedControl
+{
+}