Make installation information clearer

Bloxstrap/Bloxstrap.csproj

@@ -17,6 +17,7 @@
     <Resource Include="Resources\Fonts\Rubik-VariableFont_wght.ttf" />
     <Resource Include="Resources\BootstrapperStyles\ByfronDialog\ByfronLogoDark.jpg" />
     <Resource Include="Resources\BootstrapperStyles\ByfronDialog\ByfronLogoLight.jpg" />
+    <Resource Include="Resources\Menu\StartMenuLocation.png" />
     <Resource Include="Resources\MessageBox\Error.png" />
     <Resource Include="Resources\MessageBox\Information.png" />
     <Resource Include="Resources\MessageBox\Question.png" />

Bloxstrap/UI/Elements/Menu/MainWindow.xaml

@@ -33,7 +33,7 @@
         <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>
 
-      <ui:NavigationFluent x:Name="RootNavigation" Grid.Row="1" Grid.Column="0" Margin="0,0,12,0" Frame="{Binding ElementName=RootFrame}" SelectedPageIndex="0">
+      <ui:NavigationFluent x:Name="RootNavigation" Grid.Row="1" Grid.Column="0" Margin="0,0,12,0" Frame="{Binding ElementName=RootFrame}" SelectedPageIndex="0" Visibility="{Binding NavigationVisibility, Mode=OneWay}">
         <ui:NavigationFluent.Items>
           <ui:NavigationItem Content="Integrations" PageType="{x:Type pages:IntegrationsPage}" Icon="Add28" Tag="integrations" />
           <ui:NavigationItem Content="Mods" PageType="{x:Type pages:ModsPage}" Icon="WrenchScrewdriver20" Tag="mods" />
@@ -42,6 +42,8 @@
           <ui:NavigationItem Content="Behaviour" PageType="{x:Type pages:BehaviourPage}" Icon="Settings24" Tag="behaviour" />
           <ui:NavigationItem Content="Installation" PageType="{x:Type pages:InstallationPage}" Icon="HardDrive20" Tag="installation" />
           <ui:NavigationItem Content="About" PageType="{x:Type pages:AboutPage}" Icon="QuestionCircle48" Tag="about" />
+          
+          <ui:NavigationItem Content="Before you install..." PageType="{x:Type pages:PreInstallPage}" Tag="preinstall" Visibility="Collapsed" />
         </ui:NavigationFluent.Items>
       </ui:NavigationFluent>
 
@@ -68,7 +70,7 @@
         </ItemsPanelTemplate>
       </StatusBar.ItemsPanel>
       <StatusBarItem Grid.Column="1" Padding="0,0,4,0">
-        <ui:Button Content="{Binding ConfirmButtonText, Mode=OneTime}" Appearance="Primary" Command="{Binding ConfirmSettingsCommand, Mode=OneWay}" />
+        <ui:Button Content="{Binding ConfirmButtonText, Mode=OneTime}" Appearance="Primary" Command="{Binding ConfirmSettingsCommand, Mode=OneWay}" IsEnabled="{Binding ConfirmButtonEnabled, Mode=OneWay}" />
       </StatusBarItem>
       <StatusBarItem Grid.Column="2" Padding="4,0,0,0">
         <ui:Button Content="Cancel" Command="{Binding CloseWindowCommand, Mode=OneWay}" />

Bloxstrap/UI/Elements/Menu/Pages/PreInstallPage.xaml

@@ -0,0 +1,29 @@
+<ui:UiPage x:Class="Bloxstrap.UI.Menu.Pages.PreInstallPage"
+      x:Name="PreInstallPageView"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
+      mc:Ignorable="d"
+      d:DesignHeight="1080" d:DesignWidth="800"
+      Title="PreInstallPage"
+      Scrollable="True">
+  <StackPanel Margin="0,0,14,14">
+    <Grid Margin="0,8,0,0">
+      <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="420" />
+        <ColumnDefinition Width="*" />
+      </Grid.ColumnDefinitions>
+
+      <Border Grid.Column="0" Margin="0,0,16,0" BorderThickness="1" BorderBrush="{DynamicResource TextFillColorPrimaryBrush}">
+        <Image Grid.Column="0" RenderOptions.BitmapScalingMode="HighQuality" Source="pack://application:,,,/Resources/Menu/StartMenuLocation.png" />  
+      </Border>
+      <StackPanel Grid.Column="1">
+        <TextBlock FontSize="14" TextWrapping="Wrap" Text="The Bloxstrap Menu is what you use to configure all of Bloxstrap's options, and access resources such as file modding. You've just used it to configure your installation, but it's also used for configuration in general." />
+        <TextBlock Margin="0,16,0,0" FontSize="14" TextWrapping="Wrap" Text="After installation has finished, the Bloxstrap Menu will be registered as an application in the Start menu. If you ever need to open this again to adjust your settings, you can find it there." />
+        <TextBlock Margin="0,16,0,0" FontSize="14" TextWrapping="Wrap" Text="If you ever need help or guidance with anything, be sure to check the Wiki. If you still need something, open an issue on GitHub, or join our Discord server. All links are on the GitHub page." />
+      </StackPanel>
+    </Grid>
+  </StackPanel>
+</ui:UiPage>

Bloxstrap/UI/Elements/Menu/Pages/PreInstallPage.xaml.cs

@@ -0,0 +1,13 @@
+namespace Bloxstrap.UI.Menu.Pages
+{
+    /// <summary>
+    /// Interaction logic for PreInstallPage.xaml
+    /// </summary>
+    public partial class PreInstallPage
+    {
+        public PreInstallPage()
+        {
+            InitializeComponent();
+        }
+    }
+}

Bloxstrap/UI/ViewModels/Menu/MainWindowViewModel.cs

@@ -1,5 +1,8 @@
 using System;
+using System.ComponentModel;
 using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
 using System.Windows;
 using System.Windows.Input;
 
@@ -7,15 +10,17 @@ using Microsoft.Win32;
 
 using CommunityToolkit.Mvvm.Input;
 
-using Wpf.Ui.Controls.Interfaces;
 using Wpf.Ui.Mvvm.Contracts;
 
-using System.Linq;
+using Bloxstrap.UI.Menu.Pages;
 
 namespace Bloxstrap.UI.ViewModels.Menu
 {
-    public class MainWindowViewModel
+    public class MainWindowViewModel : INotifyPropertyChanged
     {
+        public event PropertyChangedEventHandler? PropertyChanged;
+        public void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+
         private readonly Window _window;
         private readonly IDialogService _dialogService;
         private readonly string _originalBaseDirectory = App.BaseDirectory; // we need this to check if the basedirectory changes
@@ -23,7 +28,9 @@ namespace Bloxstrap.UI.ViewModels.Menu
         public ICommand CloseWindowCommand => new RelayCommand(CloseWindow);
         public ICommand ConfirmSettingsCommand => new RelayCommand(ConfirmSettings);
 
+        public Visibility NavigationVisibility { get; set; } = Visibility.Visible;
         public string ConfirmButtonText => App.IsFirstRun ? "Install" : "Save";
+        public bool ConfirmButtonEnabled { get; set; } = true;
 
         public MainWindowViewModel(Window window, IDialogService dialogService)
         {
@@ -90,7 +97,32 @@ namespace Bloxstrap.UI.ViewModels.Menu
                 }
             }
 
-            if (!App.IsFirstRun)
+            if (App.IsFirstRun)
+            {
+                if (NavigationVisibility == Visibility.Visible)
+                {
+                    ((INavigationWindow)_window).Navigate(typeof(PreInstallPage));
+
+                    NavigationVisibility = Visibility.Collapsed;
+                    ConfirmButtonEnabled = false;
+
+                    OnPropertyChanged(nameof(NavigationVisibility));
+                    OnPropertyChanged(nameof(ConfirmButtonEnabled));
+
+                    Task.Run(async delegate
+                    {
+                        await Task.Delay(3000);
+                        ConfirmButtonEnabled = true;
+                        OnPropertyChanged(nameof(ConfirmButtonEnabled));
+                    });
+                }
+                else
+                {
+                    App.IsSetupComplete = true;
+                    CloseWindow();
+                }
+            }
+            else
             {
                 App.ShouldSaveConfigs = true;
                 App.FastFlags.Save();
@@ -112,23 +144,6 @@ namespace Bloxstrap.UI.ViewModels.Menu
 
                 CloseWindow();
             }
-            else
-            {
-                IDialogControl dialogControl = _dialogService.GetDialogControl();
-
-                dialogControl.ButtonRightClick += (_, _) =>
-                {
-                    dialogControl.Hide();
-                    App.IsSetupComplete = true;
-                    CloseWindow();
-                };
-
-                dialogControl.ShowAndWaitAsync(
-                    "What to know before you install",
-                    "After installation, you can open this menu again by searching for it in the Start menu.\n" +
-                    "If you want to revert back to the original Roblox launcher, just uninstall Bloxstrap and it will automatically revert."
-                );
-            }
         }
     }
 }