From a3a549991c501d23ba9bec534f5906015e0d42df Mon Sep 17 00:00:00 2001
From: unclehowell <hywelapbuckler@gmail.com>
Date: Sun, 9 Nov 2025 06:19:26 -0300
Subject: [PATCH] Enable Add+ app icon toggles

---
 static/gui/app-store/002b.html        | 58 +++++++++++++++++++++------
 static/gui/app-store/js/app-toggle.js | 30 +++++++++++---
 static/gui/dashboard/002-demo.html    |  9 ++++-
 static/gui/dashboard/002.html         |  9 ++++-
 static/gui/dashboard/003.html         |  9 ++++-
 static/gui/dashboard/004.html         |  9 ++++-
 static/gui/dashboard/005.html         | 11 ++++-
 static/gui/dashboard/006-demo.html    |  9 ++++-
 static/gui/dashboard/006.html         |  9 ++++-
 9 files changed, 127 insertions(+), 26 deletions(-)

diff --git a/static/gui/app-store/002b.html b/static/gui/app-store/002b.html
index 99de18eb0c..a496c21af4 100755
--- a/static/gui/app-store/002b.html
+++ b/static/gui/app-store/002b.html
@@ -41,11 +41,28 @@
         <div id="apps-container" class="apps-container app-store-grid"></div>
 
         <script>
-function toggleAppInstallation(appId) {
-    if (appId === '999-999') return;
-    const appInstalled = localStorage.getItem(appId) === 'added';
-    localStorage.setItem(appId, appInstalled ? '' : 'added' );
-    // Removed updateHomeScreen() call here, as window.addEventListener('storage') will handle it
+function isAddIconProtected() {
+    return /app-store\/006/i.test(window.location.pathname);
+}
+
+function toggleAppInstallation(appId, shouldBeInstalled) {
+    const isAddIcon = appId === '999-999';
+    const addIconProtected = isAddIcon && isAddIconProtected();
+    if (addIconProtected) {
+        const checkbox = document.getElementById(appId);
+        if (checkbox) {
+            checkbox.checked = true;
+        }
+        return;
+    }
+
+    if (shouldBeInstalled) {
+        localStorage.setItem(appId, 'added');
+    } else if (isAddIcon) {
+        localStorage.setItem(appId, 'removed');
+    } else {
+        localStorage.removeItem(appId);
+    }
 }
 
 function getAppLink(appId) {
@@ -76,25 +93,40 @@
     const appIds = ['002-001', '002-002', '999-999']; // Using class-based IDs
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
+        const storedValue = localStorage.getItem(appId);
         const appElement = document.createElement('a');
         const isPlaceholder = appId === '999-999';
+        const addIconProtected = isPlaceholder && isAddIconProtected();
+        const shouldBeChecked = isPlaceholder
+            ? (addIconProtected || storedValue !== 'removed')
+            : appInstalled;
+        const shouldRender = appInstalled || isPlaceholder;
+        if (!shouldRender) {
+            return;
+        }
         appElement.href = getAppLink(appId); // Set the hyperlink
-        appElement.className = `app-card-link${isPlaceholder ? ' app-card-link--inactive' : ''}`;
+        const linkClasses = ['app-card-link'];
+        if (isPlaceholder && addIconProtected) {
+            linkClasses.push('app-card-link--inactive');
+        }
+        appElement.className = linkClasses.join(' ');
         appElement.dataset.appId = appId;
         appElement.draggable = true;
-        appElement.style.cursor = isPlaceholder ? 'default' : 'pointer';
-        if (isPlaceholder) {
+        appElement.style.cursor = isPlaceholder && addIconProtected ? 'default' : 'pointer';
+        if (addIconProtected) {
             appElement.setAttribute('aria-disabled', 'true');
+        } else {
+            appElement.removeAttribute('aria-disabled');
         }
 
         const toggleAttributes = [];
-        if (appInstalled || isPlaceholder) {
+        if (shouldBeChecked) {
             toggleAttributes.push('checked');
         }
-        if (isPlaceholder) {
+        if (addIconProtected) {
             toggleAttributes.push('disabled');
         }
-        const cardClasses = `app-card${isPlaceholder ? ' app-card--disabled' : ''}`;
+        const cardClasses = `app-card${isPlaceholder && addIconProtected ? ' app-card--disabled' : ''}`;
         const altText = isPlaceholder ? 'Add new app' : `Hβnβ entertainment app icon ${appId}`;
 
         appElement.innerHTML = `
@@ -115,8 +147,8 @@
     // Re-attach click listeners to newly created checkboxes
     const checkboxes = document.querySelectorAll('.app-checkbox');
     checkboxes.forEach(checkbox => {
-        checkbox.addEventListener('click', function() {
-            toggleAppInstallation(this.id);
+        checkbox.addEventListener('change', function() {
+            toggleAppInstallation(this.id, this.checked);
         });
     });
 }
diff --git a/static/gui/app-store/js/app-toggle.js b/static/gui/app-store/js/app-toggle.js
index cd226f64f9..cfd60a75a3 100644
--- a/static/gui/app-store/js/app-toggle.js
+++ b/static/gui/app-store/js/app-toggle.js
@@ -1,4 +1,8 @@
 (function () {
+  function isAddIconProtected() {
+    return /app-store\/006/i.test(window.location.pathname);
+  }
+
   function syncCheckboxState(card) {
     const appId = card.dataset.appId;
     const checkbox = card.querySelector('.app-checkbox');
@@ -7,24 +11,40 @@
     }
 
     const storedValue = localStorage.getItem(appId);
-    const isInstalled = storedValue === 'added' || (appId === '999-999' && storedValue !== 'removed');
+    const addIconProtected = appId === '999-999' && isAddIconProtected();
+
+    let isInstalled = storedValue === 'added';
+    if (appId === '999-999') {
+      if (addIconProtected) {
+        isInstalled = true;
+      } else {
+        isInstalled = storedValue !== 'removed';
+      }
+    }
 
-    checkbox.checked = appId === '999-999' ? true : isInstalled;
+    checkbox.checked = isInstalled;
 
     if (appId === '999-999') {
-      checkbox.setAttribute('disabled', 'disabled');
-      card.classList.add('app-card--disabled');
+      if (addIconProtected) {
+        checkbox.setAttribute('disabled', 'disabled');
+      } else {
+        checkbox.removeAttribute('disabled');
+      }
+      card.classList.toggle('app-card--disabled', addIconProtected);
     }
   }
 
   function toggleAppInstallation(appId, checkbox) {
-    if (appId === '999-999') {
+    const addIconProtected = appId === '999-999' && isAddIconProtected();
+    if (addIconProtected) {
       checkbox.checked = true;
       return;
     }
 
     if (checkbox.checked) {
       localStorage.setItem(appId, 'added');
+    } else if (appId === '999-999') {
+      localStorage.setItem(appId, 'removed');
     } else {
       localStorage.removeItem(appId);
     }
diff --git a/static/gui/dashboard/002-demo.html b/static/gui/dashboard/002-demo.html
index 360646559b..20cfcf1f1b 100755
--- a/static/gui/dashboard/002-demo.html
+++ b/static/gui/dashboard/002-demo.html
@@ -170,13 +170,20 @@
 
 <script>
 
+function isAddIconProtected() {
+    return /dashboard\/006/i.test(window.location.pathname);
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
     const appIds = ['002-001', '002-002', '999-999']; // Using class-based IDs
+    const addIconProtected = isAddIconProtected();
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const storedValue = localStorage.getItem(appId);
+        const shouldDisplay = appInstalled || (appId === '999-999' && (addIconProtected || storedValue !== 'removed'));
+        if (shouldDisplay) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';
diff --git a/static/gui/dashboard/002.html b/static/gui/dashboard/002.html
index 7f6d8924dc..692552aafa 100755
--- a/static/gui/dashboard/002.html
+++ b/static/gui/dashboard/002.html
@@ -170,13 +170,20 @@
 
 <script>
 
+function isAddIconProtected() {
+    return /dashboard\/006/i.test(window.location.pathname);
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
     const appIds = ['002-001', '002-002', '999-999']; // Using class-based IDs
+    const addIconProtected = isAddIconProtected();
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const storedValue = localStorage.getItem(appId);
+        const shouldDisplay = appInstalled || (appId === '999-999' && (addIconProtected || storedValue !== 'removed'));
+        if (shouldDisplay) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';
diff --git a/static/gui/dashboard/003.html b/static/gui/dashboard/003.html
index e0646e9a61..e86afedd45 100755
--- a/static/gui/dashboard/003.html
+++ b/static/gui/dashboard/003.html
@@ -176,13 +176,20 @@
  
 
 <script>
+function isAddIconProtected() {
+    return /dashboard\/006/i.test(window.location.pathname);
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
     const appIds = ['003-001', '999-999']; // Using class-based IDs
+    const addIconProtected = isAddIconProtected();
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const storedValue = localStorage.getItem(appId);
+        const shouldDisplay = appInstalled || (appId === '999-999' && (addIconProtected || storedValue !== 'removed'));
+        if (shouldDisplay) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';
diff --git a/static/gui/dashboard/004.html b/static/gui/dashboard/004.html
index 6813a9b81d..4cb77c3de0 100755
--- a/static/gui/dashboard/004.html
+++ b/static/gui/dashboard/004.html
@@ -165,13 +165,20 @@
 
 <script>
 
+function isAddIconProtected() {
+    return /dashboard\/006/i.test(window.location.pathname);
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
     const appIds = ['004-001', '004-002', '004-003', '004-004', '999-999']; // Using class-based IDs
+    const addIconProtected = isAddIconProtected();
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const storedValue = localStorage.getItem(appId);
+        const shouldDisplay = appInstalled || (appId === '999-999' && (addIconProtected || storedValue !== 'removed'));
+        if (shouldDisplay) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';
diff --git a/static/gui/dashboard/005.html b/static/gui/dashboard/005.html
index b697d52ce7..545ebcdb5b 100755
--- a/static/gui/dashboard/005.html
+++ b/static/gui/dashboard/005.html
@@ -148,6 +148,10 @@
 <script src="media/js/main.js"></script>
 
 <script>
+function isAddIconProtected() {
+    return /dashboard\/006/i.test(window.location.pathname);
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
@@ -162,8 +166,11 @@
         }
     });
 
-    // Add the 'Add+' icon last
-    appsToDisplay.push('999-999');
+    // Add the 'Add+' icon last when allowed
+    const addIconState = localStorage.getItem('999-999');
+    if (isAddIconProtected() || addIconState !== 'removed') {
+        appsToDisplay.push('999-999');
+    }
 
     appsToDisplay.forEach(appId => {
         const appElement = document.createElement('a');
diff --git a/static/gui/dashboard/006-demo.html b/static/gui/dashboard/006-demo.html
index 360646559b..20cfcf1f1b 100755
--- a/static/gui/dashboard/006-demo.html
+++ b/static/gui/dashboard/006-demo.html
@@ -170,13 +170,20 @@
 
 <script>
 
+function isAddIconProtected() {
+    return /dashboard\/006/i.test(window.location.pathname);
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
     const appIds = ['002-001', '002-002', '999-999']; // Using class-based IDs
+    const addIconProtected = isAddIconProtected();
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const storedValue = localStorage.getItem(appId);
+        const shouldDisplay = appInstalled || (appId === '999-999' && (addIconProtected || storedValue !== 'removed'));
+        if (shouldDisplay) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';
diff --git a/static/gui/dashboard/006.html b/static/gui/dashboard/006.html
index 8ffd254019..0a3c908012 100755
--- a/static/gui/dashboard/006.html
+++ b/static/gui/dashboard/006.html
@@ -170,13 +170,20 @@
 
 <script>
 
+function isAddIconProtected() {
+    return /dashboard\/006/i.test(window.location.pathname);
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
     const appIds = ['006-001', '006-002', '999-999']; // Using class-based IDs
+    const addIconProtected = isAddIconProtected();
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const storedValue = localStorage.getItem(appId);
+        const shouldDisplay = appInstalled || (appId === '999-999' && (addIconProtected || storedValue !== 'removed'));
+        if (shouldDisplay) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';