From d74d4423a2e91de70ddc5f8e6eacf6d9b6029832 Mon Sep 17 00:00:00 2001
From: Paul Ganssle <git@m.ganssle.io>
Date: Sun, 1 Dec 2024 14:57:14 -0500
Subject: [PATCH] Fix issues with profile setting dialog

1. More gracefully handle the situation where we get into an illegal
   state where the profile ID corresponds to a deleted or otherwise
   non-existent profile.
2. Switch the profile adder / settings adjuster dialogue away from being
   an infobox, so now the only way to toggle it is with the X or one of
   the buttons.
3. Make it so that you fall back to the guest profile when a profile is
   deleted.
4. Various fixes related to visibility of the profile settings adder /
   adjuster in different scenarios.
---
 _sass/_cim.scss |  4 ++--
 index.html      |  4 ++--
 js/cim.js       | 40 +++++++++++++++++++++++++++++-----------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/_sass/_cim.scss b/_sass/_cim.scss
index 8de9a18..6def262 100644
--- a/_sass/_cim.scss
+++ b/_sass/_cim.scss
@@ -560,8 +560,8 @@ body.colorscheme-dark .infobox {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 30vw; // Fallback
-    width: 30dvw;
+    width: 50vw; // Fallback
+    width: 50dvw;
     padding: 10px;
     border: 1px solid #cccccc;
     border-radius: 5px;
diff --git a/index.html b/index.html
index 99893e1..e66e3d1 100644
--- a/index.html
+++ b/index.html
@@ -315,7 +315,7 @@
         <input type="text" id="profile_name_setting" class="entry">
     </div>
     <div class="entry-row">
-        <label for="profile_icon_selector">Icon:</label>
+        <label for="profile_icon_selector">Icon:</label><br/>
 
         <input type="radio" name="profile_icon_selector"
                             value="fa-user" id="npis-user">
@@ -346,7 +346,7 @@
         <label for="npis-taxi"><i class="fa fa-solid fa-taxi"></i></label>
     </div>
     <div class="entry-row">
-        <label for="show_chord_name_mode">Show chord names:</label>
+        <label for="show_chord_name_mode">Show chord names:</label><br/>
         <select class="selector" name="show_chord_name_mode" id="show-chord-name-mode-selector">
             <option value="always">Always</option>
             <option value="black_only">Black chords only</option>
diff --git a/js/cim.js b/js/cim.js
index 5bf8b9a..1ba9da6 100644
--- a/js/cim.js
+++ b/js/cim.js
@@ -953,7 +953,15 @@ function populate_profile_pulldown() {
 }
 
 function get_current_profile() {
-    return STATE["profiles"][STATE["current_profile"]];
+    let current_profile = STATE["current_profile"];
+    if (!STATE["profiles"].hasOwnProperty(current_profile)) {
+        // If we're in an illegal state where we are stuck as a deleted
+        // profile, fall back to being the guest profile.
+        current_profile = _GUEST_USER_ID;
+        STATE["current_profile"] = current_profile;
+        set_current_profile(STATE[current_profile]);
+    }
+    return STATE["profiles"][current_profile];
 }
 
 function select_new_profile(elem) {
@@ -965,9 +973,10 @@ function select_new_profile(elem) {
 function open_profile_adder() {
     console.log("Creating new profile");
 
+    toggle_profile_visibility();
+    toggle_profile_settings_visibility(false);
     clear_profile_dialog();
     let profile_container = document.getElementById("profile-info-container");
-    profile_container.classList.add("visible");
 
     for (var elem of profile_container.querySelectorAll("button.add-button")) {
         elem.classList.add("visible");
@@ -977,14 +986,11 @@ function open_profile_adder() {
 
     let target_number_elem = document.getElementById("target_number_setting");
     target_number_elem.value = _DEFAULT_TARGET_NUMBER;
-
-    toggle_profile_visibility();
 }
 
 function close_profile_adder() {
     console.log("Closing profile adder");
-    let profile_container = document.getElementById("profile-info-container");
-    profile_container.classList.remove("visible");
+    toggle_profile_settings_visibility();
     clear_profile_dialog();
 }
 
@@ -1106,7 +1112,6 @@ function populate_profile_settings() {
     const is_guest = (profile.id === _GUEST_USER_ID);
     clear_profile_dialog();
     let profile_dialog = document.getElementById("profile-info-container");
-    profile_dialog.classList.add("visible");
     for (let elem of profile_dialog.querySelectorAll("button.settings-button")) {
         elem.classList.add("visible");
     }
@@ -1189,6 +1194,8 @@ function delete_profile() {
         alert("Deleting the guest user is not allowed.");
         return;
     } else if (confirm("Are you sure you want to delete the profile " + STATE.profiles[profile_id].name + "?")) {
+        // Set the current profile to the guest profile
+        set_current_profile_by_id(_GUEST_USER_ID);
         delete STATE.profiles[profile_id];
     }
 
@@ -1235,6 +1242,12 @@ function set_chord_display_mode(chord_mode) {
     }
 }
 
+
+function set_current_profile_by_id(profile_id) {
+    let profile = STATE["profiles"][profile_id];
+    return set_current_profile(profile);
+}
+
 function set_current_profile(profile) {
     if (profile.id !== get_current_profile().id) {
         // Reset the stats and retrieve any existing sessions
@@ -1288,11 +1301,16 @@ function toggle_stats_history_visibility() {
     toggle_visibility(document.getElementById("stats-history-container"));
 }
 
-function toggle_profile_settings_visibility() {
+function toggle_profile_settings_visibility(populate=true) {
     const ibox = document.getElementById("profile-info-container");
-    populate_profile_settings();
-
-    toggle_visibility(ibox);
+    if (ibox.classList.contains("visible")) {
+        ibox.classList.remove("visible");
+    } else {
+        if (populate) {
+            populate_profile_settings();
+        }
+        ibox.classList.add("visible");
+    }
 }
 
 function toggle_theme_mode() {