Launch button improvements (Closes #1086 #1114) (#1122)

Author: AlexMacocian

Daybreak.Shared/Models/LaunchConfigurations/LaunchConfiguration.cs

@@ -4,6 +4,9 @@ namespace Daybreak.Shared.Models.LaunchConfigurations;
 
 public sealed class LaunchConfiguration
 {
+    [JsonProperty(nameof(Name))]
+    public string? Name { get; set; }
+
     [JsonProperty(nameof(Identifier))]
     public string? Identifier { get; set; }
 

Daybreak.Shared/Models/LaunchConfigurations/LaunchConfigurationWithCredentials.cs

@@ -3,6 +3,7 @@
 public sealed class LaunchConfigurationWithCredentials : IEquatable<LaunchConfigurationWithCredentials>
 {
     public string? Identifier { get; init; }
+    public string? Name { get; set; }
     public string? ExecutablePath { get; set; }
     public string? Arguments { get; set; }
     public LoginCredentials? Credentials { get; set; }
@@ -16,7 +17,8 @@ public bool Equals(LaunchConfigurationWithCredentials? other)
 
         return this?.Identifier?.Equals(other?.Identifier) is true &&
             this?.ExecutablePath?.Equals(other?.ExecutablePath) is not false && //ExecutablePath can be null, so in that case the comparison returns null
-            this?.Credentials?.Equals(other?.Credentials) is true;
+            this?.Credentials?.Equals(other?.Credentials) is true &&
+            this?.Name?.Equals(other?.Name) is true;
     }
 
     public override bool Equals(object? obj)

Daybreak/Services/LaunchConfigurations/LaunchConfigurationService.cs

@@ -99,6 +99,7 @@ private bool SaveConfigurationInternal(LaunchConfigurationWithCredentials launch
         if (configs.FirstOrDefault(c => c.Identifier == launchConfigurationWithCredentials.Identifier) is 
             LaunchConfiguration config)
         {
+            config.Name = launchConfigurationWithCredentials.Name;
             config.Identifier = launchConfigurationWithCredentials.Identifier;
             config.CredentialsIdentifier = launchConfigurationWithCredentials.Credentials?.Identifier;
             config.Executable = launchConfigurationWithCredentials.ExecutablePath;
@@ -110,6 +111,7 @@ private bool SaveConfigurationInternal(LaunchConfigurationWithCredentials launch
 
         configs.Add(new LaunchConfiguration
         {
+            Name = launchConfigurationWithCredentials.Name,
             CredentialsIdentifier = launchConfigurationWithCredentials.Credentials?.Identifier,
             Executable = launchConfigurationWithCredentials.ExecutablePath,
             Identifier = launchConfigurationWithCredentials.Identifier,
@@ -138,7 +140,8 @@ private bool IsValidInternal(LaunchConfigurationWithCredentials launchConfigurat
             Identifier = launchConfiguration.Identifier,
             Credentials = credentials,
             ExecutablePath = launchConfiguration.Executable,
-            Arguments = launchConfiguration.Arguments
+            Arguments = launchConfiguration.Arguments,
+            Name = launchConfiguration.Name
         };
     }
 }

Daybreak/Views/LaunchConfigurationsView.razor

@@ -29,6 +29,21 @@
                             </FluentTextField>
                         </div>
                     </div>
+                    <div class="launch-config-name">
+                        <div class="launch-config-name-label">
+                            <FluentLabel>Name</FluentLabel>
+                        </div>
+                        <div class="launch-config-name-field">
+                            <FluentTextField Value="@config.Name"
+                                             ValueChanged="@((newValue) => this.ViewModel.CustomNameChanged(config, newValue))"
+                                             Spellcheck="false"
+                                             Immediate="true"
+                                             ImmediateDelay="500"
+                                             InputMode="InputMode.Text"
+                                             AutoComplete="false"
+                                             Placeholder="Custom name" />
+                        </div>
+                    </div>
                     <div class="launch-config-executable">
                         <div class="launch-config-executable-label">
                             <FluentLabel>Executable</FluentLabel>

Daybreak/Views/LaunchConfigurationsView.razor.cs

@@ -71,4 +71,10 @@ public void DeleteLaunchConfiguration(LaunchConfigurationWithCredentials configu
         this.launchConfigurationService.DeleteConfiguration(configuration);
         this.LaunchConfigurations.Remove(configuration);
     }
+
+    public void CustomNameChanged(LaunchConfigurationWithCredentials configuration, string newName)
+    {
+        configuration.Name = newName;
+        this.launchConfigurationService.SaveConfiguration(configuration);
+    }
 }

Daybreak/Views/LaunchConfigurationsView.razor.css

@@ -40,6 +40,7 @@
 .launch-config-identifier,
 .launch-config-executable,
 .launch-config-credentials,
+.launch-config-name,
 .launch-config-args {
     display: flex;
     flex-direction: row;
@@ -52,13 +53,15 @@
 .launch-config-identifier-label,
 .launch-config-executable-label,
 .launch-config-credentials-label,
+.launch-config-name-label,
 .launch-config-args-label {
     width: 250px;
 }
 
 .launch-config-identifier-field,
 .launch-config-executable-field,
 .launch-config-credentials-field,
+.launch-config-name-field,
 .launch-config-args-field {
     width: 50%;
 }
@@ -67,13 +70,15 @@
 .launch-config-identifier-label ::deep *,
 .launch-config-executable-label ::deep *,
 .launch-config-credentials-label ::deep *,
+.launch-config-name-label ::deep *,
 .launch-config-args-label ::deep * {
     font-size: var(--font-size-large) !important;
 }
 
 .launch-config-identifier-field ::deep fluent-text-field,
 .launch-config-executable-field ::deep fluent-text-field,
 .launch-config-credentials-field ::deep fluent-text-field,
+.launch-config-name-field ::deep fluent-text-field,
 .launch-config-args-field ::deep fluent-text-field {
     width: 100%;
     box-sizing: border-box !important;
@@ -83,6 +88,7 @@
 .launch-config-identifier-field ::deep fluent-select,
 .launch-config-executable-field ::deep fluent-select,
 .launch-config-credentials-field ::deep fluent-select,
+.launch-config-name-field ::deep fluent-select,
 .launch-config-args-field ::deep fluent-select {
     width: 100%;
     box-sizing: border-box !important;

Daybreak/Views/LaunchView.razor

@@ -15,7 +15,13 @@
                     {
                         <div class="spinner" />
                     }
-                    <span class="launch-text">@this.ViewModel.LaunchButtonText</span>
+                    <div class="launch-text-container">
+                        <span class="launch-text">@this.ViewModel.LaunchButtonText</span>
+                        @if (!string.IsNullOrEmpty(this.ViewModel.LaunchButtonSubtext))
+                        {
+                            <span class="launch-subtext">@this.ViewModel.LaunchButtonSubtext</span>
+                        }
+                    </div>
                 </div>
             </button>
 
@@ -36,7 +42,11 @@
                     <div class="dropdown-item @(config == ViewModel.SelectedConfiguration ? "selected" : "")"
                          @onclick="() => this.ViewModel.SelectConfiguration(config)">
                         <div class="config-info">
-                            <div class="config-name">@(config.Configuration?.Credentials?.Username ?? "Unknown User")</div>
+                            <div class="config-name">@(config.Configuration?.Name ?? config.Configuration?.Credentials?.Username ?? "Unknown User")</div>
+                            @if (!string.IsNullOrEmpty(config.Configuration?.ExecutablePath))
+                            {
+                                <div class="config-path">@config.Configuration.ExecutablePath</div>
+                            }
                         </div>
                     </div>
                 }

Daybreak/Views/LaunchView.razor.cs

@@ -108,6 +108,8 @@ public bool IsDropdownOpen
 
     public string LaunchButtonText => this.GetLaunchButtonText();
 
+    public string LaunchButtonSubtext => this.GetLaunchButtonSubtext();
+
     public override ValueTask ParametersSet(LaunchView view, CancellationToken cancellationToken)
     {
         if (!this.IsOnboarded())
@@ -306,7 +308,9 @@ private void UpdateCanLaunch()
 
     private string GetLaunchButtonText()
     {
-        var configName = this.SelectedConfiguration?.Configuration?.Credentials?.Username ?? "Guild Wars";
+        var configName = this.SelectedConfiguration?.Configuration?.Name ??
+            this.SelectedConfiguration?.Configuration?.Credentials?.Username ??
+            "Guild Wars";
         if (this.IsLaunching)
         {
             return "Launching...";
@@ -325,6 +329,22 @@ private string GetLaunchButtonText()
         return $"Launch {configName}";
     }
 
+    private string GetLaunchButtonSubtext()
+    {
+        var configName = this.SelectedConfiguration?.Configuration?.Name;
+        if (this.IsLaunching)
+        {
+            return string.Empty;
+        }
+
+        if (configName is not null)
+        {
+            return string.Empty;
+        }
+
+        return this.SelectedConfiguration?.Configuration?.ExecutablePath ?? string.Empty;
+    }
+
     private void KillGuildWars()
     {
         if (this.SelectedConfiguration?.AppContext is null)

Daybreak/Views/LaunchView.razor.css

@@ -59,6 +59,17 @@
     color: var(--foreground-on-accent-rest)
 }
 
+.launch-text-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.launch-subtext {
+    font-size: var(--font-size-small);
+}
+
 .dropdown-toggle-button {
     padding: 1rem 0.75rem;
     border: none;
@@ -138,6 +149,12 @@
     margin-bottom: 0.25rem;
 }
 
+.config-path {
+    font-size: var(--font-size-small);
+    color: var(--accent-foreground-rest);
+    margin-bottom: 0.25rem;
+}
+
 .dropdown-backdrop {
     position: fixed;
     top: 0;