From 63a0053da8c76bf4ac175c7f17353225443dd342 Mon Sep 17 00:00:00 2001
From: ria147 <62183694+ria147@users.noreply.github.com>
Date: Fri, 29 Nov 2024 00:30:57 -0500
Subject: [PATCH 1/6] feat: enable/disable save button in dev-center iff
 changes made

---
 src/dev-center/js/dev-center.js | 77 +++++++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 4babab01..5e71bd8a 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -29,6 +29,7 @@ let activeTab = 'apps';
 let currently_editing_app;
 let dropped_items;
 let search_query;
+let originalValues = {};
 
 const APP_CATEGORIES = [
     { id: 'games', label: 'Games' },
@@ -619,6 +620,69 @@ function generate_edit_app_section(app) {
     return h;
 }
 
+/* This function keeps track of the original values of the app before it is edited*/ 
+function trackOriginalValues(){
+    originalValues = {
+        title: $('#edit-app-title').val(),
+        name: $('#edit-app-name').val(),
+        indexURL: $('#edit-app-index-url').val(),
+        description: $('#edit-app-description').val(),
+        icon: $('#edit-app-icon').attr('data-url') || $('#edit-app-icon').attr('data-base64'),
+        fileAssociations: $('#edit-app-filetype-associations').val(),
+        category: $('#edit-app-category').val(),
+        socialImage: $('#edit-app-social-image').attr('data-url') || $('#edit-app-social-image').attr('data-base64'),
+        windowSettings: {
+            width: $('#edit-app-window-width').val(),
+            height: $('#edit-app-window-height').val(),
+            top: $('#edit-app-window-top').val(),
+            left: $('#edit-app-window-left').val()
+        },
+        checkboxes: {
+            maximizeOnStart: $('#edit-app-maximize-on-start').is(':checked'),
+            background: $('#edit-app-background').is(':checked'),
+            resizableWindow: $('#edit-app-window-resizable').is(':checked'),
+            hideTitleBar: $('#edit-app-hide-titlebar').is(':checked'),
+            locked: $('#edit-app-locked').is(':checked'),
+            credentialless: $('#edit-app-credentialless').is(':checked'),
+            fullPageOnLanding: $('#edit-app-fullpage-on-landing').is(':checked')
+        }
+    };
+}
+
+/* This function compares for all fields and checks if anything has changed from before editting*/
+function hasChanges() {
+    return(
+        $('#edit-app-title').val() !== originalValues.title ||
+        $('#edit-app-name').val() !== originalValues.name ||
+        $('#edit-app-index-url').val() !== originalValues.indexURL ||
+        $('#edit-app-description').val() !== originalValues.description ||
+        ($('#edit-app-icon').attr('data-url') || $('#edit-app-icon').attr('data-base64')) !== originalValues.icon ||
+        $('#edit-app-filetype-associations').val() !== originalValues.fileAssociations ||
+        $('#edit-app-category').val() !== originalValues.category ||
+        ($('#edit-app-social-image').attr('data-url') || $('#edit-app-social-image').attr('data-base64')) !== originalValues.socialImage ||
+        $('#edit-app-window-width').val() !== originalValues.windowSettings.width ||
+        $('#edit-app-window-height').val() !== originalValues.windowSettings.height ||
+        $('#edit-app-window-top').val() !== originalValues.windowSettings.top ||
+        $('#edit-app-window-left').val() !== originalValues.windowSettings.left ||
+        $('#edit-app-maximize-on-start').is(':checked') !== originalValues.checkboxes.maximizeOnStart ||
+        $('#edit-app-background').is(':checked') !== originalValues.checkboxes.background ||
+        $('#edit-app-window-resizable').is(':checked') !== originalValues.checkboxes.resizableWindow ||
+        $('#edit-app-hide-titlebar').is(':checked') !== originalValues.checkboxes.hideTitleBar ||
+        $('#edit-app-locked').is(':checked') !== originalValues.checkboxes.locked ||
+        $('#edit-app-credentialless').is(':checked') !== originalValues.checkboxes.credentialless ||
+        $('#edit-app-fullpage-on-landing').is(':checked') !== originalValues.checkboxes.fullPageOnLanding
+    );
+}
+
+/* This function enables or disables the save button if there are any changes made */
+function toggleSaveButton() {
+    if (hasChanges()) {
+        $('.edit-app-save-btn').prop('disabled', false);
+    } else {
+        $('.edit-app-save-btn').prop('disabled', true);
+    }
+}
+
 async function edit_app_section(cur_app_name) {
     $('section:not(.sidebar)').hide();
     $('.tab-btn').removeClass('active');
@@ -628,8 +692,9 @@ async function edit_app_section(cur_app_name) {
     currently_editing_app = cur_app;
 
     // generate edit app section
-    let edit_app_section_html = generate_edit_app_section(cur_app);
-    $('#edit-app').html(edit_app_section_html);
+    $('#edit-app').html(generate_edit_app_section(cur_app));
+    trackOriginalValues();  // Track initial field values
+    toggleSaveButton();  // Ensure Save button is initially disabled
     $('#edit-app').show();
 
     // --------------------------------------------------------
@@ -1024,11 +1089,11 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
         filetypeAssociations: filetype_associations,
     }).then(async (app) => {
         currently_editing_app = app;
+        trackOriginalValues();  // Update original values after save
+        toggleSaveButton();  //Disable Save Button after succesful save
         $('#edit-app-error').hide();
         $('#edit-app-success').show();
         document.body.scrollTop = document.documentElement.scrollTop = 0;
-        // Re-enable submit button
-        $('.edit-app-save-btn').prop('disabled', false);
         // Update open-app-btn
         $(`.open-app-btn[data-app-uid="${uid}"]`).attr('data-app-name', app.name);
         $(`.open-app[data-uid="${uid}"]`).attr('data-app-name', app.name);
@@ -1054,6 +1119,10 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
     })
 })
 
+$(document).on('input change', '#edit-app input, #edit-app textarea, #edit-app select', () => {
+    toggleSaveButton();
+});
+
 $(document).on('click', '.open-app-btn', async function (e) {
     puter.ui.launchApp($(this).attr('data-app-name'))
 })

From 55ffd801e007723758eacc17ec732ee5a336123e Mon Sep 17 00:00:00 2001
From: ria147 <62183694+ria147@users.noreply.github.com>
Date: Fri, 29 Nov 2024 00:47:40 -0500
Subject: [PATCH 2/6] feat: add reset edit changes button to dev-center

---
 src/dev-center/css/style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/dev-center/css/style.css b/src/dev-center/css/style.css
index a6bd686a..a5f23f6c 100644
--- a/src/dev-center/css/style.css
+++ b/src/dev-center/css/style.css
@@ -951,6 +951,12 @@ ol li:before {
     margin-top: 20px; 
     margin-bottom: 20px;
 }
+.edit-app-reset-btn{
+    float: right; 
+    margin-top: 20px; 
+    margin-bottom: 20px;
+    margin-right: 10px;
+}
 input:read-only {
     background-color: rgb(242 242 242);
 }

From e5788b6e47f5c33dd28880d4e24c7b763dde24d8 Mon Sep 17 00:00:00 2001
From: ria147 <62183694+ria147@users.noreply.github.com>
Date: Fri, 29 Nov 2024 00:58:09 -0500
Subject: [PATCH 3/6] dev: add functionality to reset edit button

---
 src/dev-center/js/dev-center.js | 47 +++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 5e71bd8a..1f7ca7bb 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -614,6 +614,7 @@ function generate_edit_app_section(app) {
 
                 <hr style="margin-top: 40px;">
                 <button type="button" class="edit-app-save-btn button button-primary">Save</button>
+                <button type="button" class="edit-app-reset-btn button button-secondary">Reset</button>
             </form>
         </div>
     `
@@ -683,6 +684,47 @@ function toggleSaveButton() {
     }
 }
 
+/* This function revers the changes made back to the original values of the edit form */
+function resetToOriginalValues() {
+    $('#edit-app-title').val(originalValues.title);
+    $('#edit-app-name').val(originalValues.name);
+    $('#edit-app-index-url').val(originalValues.indexURL);
+    $('#edit-app-description').val(originalValues.description);
+    $('#edit-app-filetype-associations').val(originalValues.fileAssociations);
+    $('#edit-app-category').val(originalValues.category);
+    $('#edit-app-window-width').val(originalValues.windowSettings.width);
+    $('#edit-app-window-height').val(originalValues.windowSettings.height);
+    $('#edit-app-window-top').val(originalValues.windowSettings.top);
+    $('#edit-app-window-left').val(originalValues.windowSettings.left);
+    $('#edit-app-maximize-on-start').prop('checked', originalValues.checkboxes.maximizeOnStart);
+    $('#edit-app-background').prop('checked', originalValues.checkboxes.background);
+    $('#edit-app-window-resizable').prop('checked', originalValues.checkboxes.resizableWindow);
+    $('#edit-app-hide-titlebar').prop('checked', originalValues.checkboxes.hideTitleBar);
+    $('#edit-app-locked').prop('checked', originalValues.checkboxes.locked);
+    $('#edit-app-credentialless').prop('checked', originalValues.checkboxes.credentialless);
+    $('#edit-app-fullpage-on-landing').prop('checked', originalValues.checkboxes.fullPageOnLanding);
+
+    if (originalValues.icon) {
+        $('#edit-app-icon').css('background-image', `url(${originalValues.icon})`);
+        $('#edit-app-icon').attr('data-url', originalValues.icon);
+        $('#edit-app-icon-delete').show();
+    } else {
+        $('#edit-app-icon').css('background-image', '');
+        $('#edit-app-icon').removeAttr('data-url');
+        $('#edit-app-icon').removeAttr('data-base64');
+        $('#edit-app-icon-delete').hide();
+    }
+
+    if (originalValues.socialImage) {
+        $('#edit-app-social-image').css('background-image', `url(${originalValues.socialImage})`);
+        $('#edit-app-social-image').attr('data-url', originalValues.socialImage);
+    } else {
+        $('#edit-app-social-image').css('background-image', '');
+        $('#edit-app-social-image').removeAttr('data-url');
+        $('#edit-app-social-image').removeAttr('data-base64');
+    }
+}
+
 async function edit_app_section(cur_app_name) {
     $('section:not(.sidebar)').hide();
     $('.tab-btn').removeClass('active');
@@ -1123,6 +1165,11 @@ $(document).on('input change', '#edit-app input, #edit-app textarea, #edit-app s
     toggleSaveButton();
 });
 
+$(document).on('click', '.edit-app-reset-btn', function () {
+    resetToOriginalValues();
+    toggleSaveButton();   // Disable Save button since values are reverted to original
+});
+
 $(document).on('click', '.open-app-btn', async function (e) {
     puter.ui.launchApp($(this).attr('data-app-name'))
 })

From 3f1804eb2ae1f304e20437676d160e6fb85298fb Mon Sep 17 00:00:00 2001
From: ria147 <62183694+ria147@users.noreply.github.com>
Date: Fri, 29 Nov 2024 01:03:53 -0500
Subject: [PATCH 4/6] dev: enable/disable reset button iff changes are made

---
 src/dev-center/js/dev-center.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 1f7ca7bb..3f2c3ea1 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -684,6 +684,15 @@ function toggleSaveButton() {
     }
 }
 
+/* This function enables or disables the reset button if there are any changes made */
+function toggleResetButton() {
+    if (hasChanges()) {
+        $('.edit-app-reset-btn').prop('disabled', false);
+    } else {
+        $('.edit-app-reset-btn').prop('disabled', true);
+    }
+}
+
 /* This function revers the changes made back to the original values of the edit form */
 function resetToOriginalValues() {
     $('#edit-app-title').val(originalValues.title);
@@ -737,6 +746,7 @@ async function edit_app_section(cur_app_name) {
     $('#edit-app').html(generate_edit_app_section(cur_app));
     trackOriginalValues();  // Track initial field values
     toggleSaveButton();  // Ensure Save button is initially disabled
+    toggleResetButton();  // Ensure Reset button is initially disabled
     $('#edit-app').show();
 
     // --------------------------------------------------------
@@ -1133,6 +1143,7 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
         currently_editing_app = app;
         trackOriginalValues();  // Update original values after save
         toggleSaveButton();  //Disable Save Button after succesful save
+        toggleResetButton();  //DIsable Reset Button after succesful save
         $('#edit-app-error').hide();
         $('#edit-app-success').show();
         document.body.scrollTop = document.documentElement.scrollTop = 0;
@@ -1163,11 +1174,13 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
 
 $(document).on('input change', '#edit-app input, #edit-app textarea, #edit-app select', () => {
     toggleSaveButton();
+    toggleResetButton();
 });
 
 $(document).on('click', '.edit-app-reset-btn', function () {
     resetToOriginalValues();
     toggleSaveButton();   // Disable Save button since values are reverted to original
+    toggleResetButton();  //Disable Reset button since values are reverted to original
 });
 
 $(document).on('click', '.open-app-btn', async function (e) {

From 92cd65261e19c6647583533f446a5cc7f133fdaa Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Fri, 29 Nov 2024 06:53:29 -0800
Subject: [PATCH 5/6] also track `icon` and `socialImage`

---
 src/dev-center/js/dev-center.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 3f2c3ea1..bc6517a3 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -628,10 +628,10 @@ function trackOriginalValues(){
         name: $('#edit-app-name').val(),
         indexURL: $('#edit-app-index-url').val(),
         description: $('#edit-app-description').val(),
-        icon: $('#edit-app-icon').attr('data-url') || $('#edit-app-icon').attr('data-base64'),
+        icon: $('#edit-app-icon').attr('data-base64'),
         fileAssociations: $('#edit-app-filetype-associations').val(),
         category: $('#edit-app-category').val(),
-        socialImage: $('#edit-app-social-image').attr('data-url') || $('#edit-app-social-image').attr('data-base64'),
+        socialImage: $('#edit-app-social-image').attr('data-base64'),
         windowSettings: {
             width: $('#edit-app-window-width').val(),
             height: $('#edit-app-window-height').val(),
@@ -652,15 +652,26 @@ function trackOriginalValues(){
 
 /* This function compares for all fields and checks if anything has changed from before editting*/
 function hasChanges() {
+    // is icon changed
+    if($('#edit-app-icon').attr('data-base64') !== originalValues.icon){
+        return true;
+    }
+
+    // if social image is changed
+    if($('#edit-app-social-image').attr('data-base64') !== originalValues.socialImage){
+        return true;
+    }
+
+    // if any of the fields have changed
     return(
         $('#edit-app-title').val() !== originalValues.title ||
         $('#edit-app-name').val() !== originalValues.name ||
         $('#edit-app-index-url').val() !== originalValues.indexURL ||
         $('#edit-app-description').val() !== originalValues.description ||
-        ($('#edit-app-icon').attr('data-url') || $('#edit-app-icon').attr('data-base64')) !== originalValues.icon ||
+        $('#edit-app-icon').attr('data-base64') !== originalValues.icon ||
         $('#edit-app-filetype-associations').val() !== originalValues.fileAssociations ||
         $('#edit-app-category').val() !== originalValues.category ||
-        ($('#edit-app-social-image').attr('data-url') || $('#edit-app-social-image').attr('data-base64')) !== originalValues.socialImage ||
+        $('#edit-app-social-image').attr('data-base64') !== originalValues.socialImage ||
         $('#edit-app-window-width').val() !== originalValues.windowSettings.width ||
         $('#edit-app-window-height').val() !== originalValues.windowSettings.height ||
         $('#edit-app-window-top').val() !== originalValues.windowSettings.top ||
@@ -1334,6 +1345,9 @@ $(document).on('click', '#edit-app-icon-delete', async function (e) {
     $('#edit-app-icon').removeAttr('data-url');
     $('#edit-app-icon').removeAttr('data-base64');
     $('#edit-app-icon-delete').hide();
+
+    toggleSaveButton();
+    toggleResetButton();
 })
 
 $(document).on('click', '#edit-app-icon', async function (e) {
@@ -1360,6 +1374,9 @@ $(document).on('click', '#edit-app-icon', async function (e) {
         $('#edit-app-icon').css('background-image', `url(${image})`);
         $('#edit-app-icon').attr('data-base64', image);
         $('#edit-app-icon-delete').show();
+
+        toggleSaveButton();
+        toggleResetButton();
     }
 })
 
@@ -2505,6 +2522,9 @@ $(document).on('click', '#edit-app-social-image', async function(e) {
         $('#edit-app-social-image').css('background-image', `url(${image})`);
         $('#edit-app-social-image').attr('data-base64', image);
         $('#edit-app-social-image-delete').show();
+
+        toggleSaveButton();
+        toggleResetButton();
     }
 });
 

From 9ba0f2410c795aac982e79e92ae0aad3105d70d1 Mon Sep 17 00:00:00 2001
From: jelveh <nj@puter.com>
Date: Fri, 29 Nov 2024 07:16:59 -0800
Subject: [PATCH 6/6] set correct base64 value for `icon` and `socialImage`

---
 src/dev-center/js/dev-center.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index bc6517a3..8aa2f445 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -537,7 +537,7 @@ function generate_edit_app_section(app) {
                 <input type="text" style="width: 362px;" class="app-uid" value="${html_encode(app.uid)}" readonly>
 
                 <label for="edit-app-icon">Icon</label>
-                <div id="edit-app-icon" style="background-image:url(${!app.icon ? './img/app.svg' : html_encode(app.icon)});" ${app.icon ? 'data-url="' + html_encode(app.icon) + '"' : ''}>
+                <div id="edit-app-icon" style="background-image:url(${!app.icon ? './img/app.svg' : html_encode(app.icon)});" ${app.icon ? 'data-url="' + html_encode(app.icon) + '"' : ''}  ${app.icon ? 'data-base64="' + html_encode(app.icon) + '"' : ''} >
                     <div id="change-app-icon">Change App Icon</div>
                 </div>
                 <span id="edit-app-icon-delete" style="${app.icon ? 'display:block;' : ''}">Remove icon</span>
@@ -727,6 +727,7 @@ function resetToOriginalValues() {
     if (originalValues.icon) {
         $('#edit-app-icon').css('background-image', `url(${originalValues.icon})`);
         $('#edit-app-icon').attr('data-url', originalValues.icon);
+        $('#edit-app-icon').attr('data-base64', originalValues.icon);
         $('#edit-app-icon-delete').show();
     } else {
         $('#edit-app-icon').css('background-image', '');
@@ -738,6 +739,7 @@ function resetToOriginalValues() {
     if (originalValues.socialImage) {
         $('#edit-app-social-image').css('background-image', `url(${originalValues.socialImage})`);
         $('#edit-app-social-image').attr('data-url', originalValues.socialImage);
+        $('#edit-app-social-image').attr('data-base64', originalValues.socialImage);
     } else {
         $('#edit-app-social-image').css('background-image', '');
         $('#edit-app-social-image').removeAttr('data-url');
@@ -2491,7 +2493,7 @@ async function initializeAssetsDirectory() {
 function generateSocialImageSection(app) {
     return `
         <label for="edit-app-social-image">Social Graph Image (1200×630 strongly recommended)</label>
-        <div id="edit-app-social-image" class="social-image-preview" ${app.metadata?.social_image ? `style="background-image:url(${html_encode(app.metadata.social_image)})" data-url="${html_encode(app.metadata.social_image)}"` : ''}>
+        <div id="edit-app-social-image" class="social-image-preview" ${app.metadata?.social_image ? `style="background-image:url(${html_encode(app.metadata.social_image)})" data-url="${html_encode(app.metadata.social_image)}" data-base64="${html_encode(app.metadata.social_image)}"` : ''}>
             <div id="change-social-image">Change Social Image</div>
         </div>
         <span id="edit-app-social-image-delete" style="${app.metadata?.social_image ? 'display:block;' : ''}">Remove social image</span>