From 85aa5e2259ec3e1547e54f2eea34ac1574208174 Mon Sep 17 00:00:00 2001
From: unclehowell <hywelapbuckler@gmail.com>
Date: Sun, 9 Nov 2025 06:43:00 -0300
Subject: [PATCH] Enable Add+ toggle while keeping 006 fallback

---
 static/gui/app-store/002b.html        | 49 +++++++++++++++++------
 static/gui/app-store/js/app-toggle.js | 57 +++++++++++++++++++++++----
 static/gui/dashboard/002.html         | 22 ++++++++---
 static/gui/dashboard/003.html         | 18 +++++++--
 static/gui/dashboard/004.html         | 22 ++++++++---
 static/gui/dashboard/005.html         | 18 +++++++--
 6 files changed, 151 insertions(+), 35 deletions(-)

diff --git a/static/gui/app-store/002b.html b/static/gui/app-store/002b.html
index 99de18eb0..e84c183c8 100755
--- a/static/gui/app-store/002b.html
+++ b/static/gui/app-store/002b.html
@@ -40,12 +40,31 @@
 
         <div id="apps-container" class="apps-container app-store-grid"></div>
 
-        <script>
+<script>
+const ADD_APP_ID = '999-999';
+
+function isAddAppAlwaysVisible() {
+    return window.location.pathname.includes('/app-store/006');
+}
+
+function isAddAppEnabled() {
+    return localStorage.getItem(ADD_APP_ID) !== 'removed';
+}
+
 function toggleAppInstallation(appId) {
-    if (appId === '999-999') return;
+    if (appId === ADD_APP_ID) {
+        if (isAddAppAlwaysVisible()) {
+            return;
+        }
+        const shouldEnable = !isAddAppEnabled();
+        localStorage.setItem(ADD_APP_ID, shouldEnable ? 'added' : 'removed');
+        updateHomeScreen();
+        return;
+    }
     const appInstalled = localStorage.getItem(appId) === 'added';
     localStorage.setItem(appId, appInstalled ? '' : 'added' );
-    // Removed updateHomeScreen() call here, as window.addEventListener('storage') will handle it
+    // Re-render locally so the UI reflects the updated toggle state immediately
+    updateHomeScreen();
 }
 
 function getAppLink(appId) {
@@ -54,7 +73,7 @@
             return '../app-store/apps/002-001/fetch.html';
         case '002-002':
             return 'http://hbnb.local:81';
-        case '999-999':
+        case ADD_APP_ID:
             return '../app-store/002b.html';
         default:
             return '#';
@@ -73,28 +92,34 @@
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
 
-    const appIds = ['002-001', '002-002', '999-999']; // Using class-based IDs
+    const appIds = ['002-001', '002-002', ADD_APP_ID]; // Using class-based IDs
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
         const appElement = document.createElement('a');
-        const isPlaceholder = appId === '999-999';
+        const isPlaceholder = appId === ADD_APP_ID;
+        const addAppAlwaysVisible = isAddAppAlwaysVisible();
+        const addAppEnabled = addAppAlwaysVisible || isAddAppEnabled();
         appElement.href = getAppLink(appId); // Set the hyperlink
-        appElement.className = `app-card-link${isPlaceholder ? ' app-card-link--inactive' : ''}`;
+        const inactiveClass = isPlaceholder && !addAppEnabled ? ' app-card-link--inactive' : '';
+        appElement.className = `app-card-link${inactiveClass}`;
         appElement.dataset.appId = appId;
         appElement.draggable = true;
-        appElement.style.cursor = isPlaceholder ? 'default' : 'pointer';
-        if (isPlaceholder) {
+        appElement.style.cursor = isPlaceholder && !addAppEnabled ? 'default' : 'pointer';
+        if (isPlaceholder && !addAppEnabled) {
             appElement.setAttribute('aria-disabled', 'true');
+        } else {
+            appElement.removeAttribute('aria-disabled');
         }
 
         const toggleAttributes = [];
-        if (appInstalled || isPlaceholder) {
+        const checkboxShouldBeChecked = isPlaceholder ? addAppEnabled : appInstalled;
+        if (checkboxShouldBeChecked) {
             toggleAttributes.push('checked');
         }
-        if (isPlaceholder) {
+        if (isPlaceholder && addAppAlwaysVisible) {
             toggleAttributes.push('disabled');
         }
-        const cardClasses = `app-card${isPlaceholder ? ' app-card--disabled' : ''}`;
+        const cardClasses = `app-card${isPlaceholder && !addAppEnabled ? ' app-card--disabled' : ''}`;
         const altText = isPlaceholder ? 'Add new app' : `Hβnβ entertainment app icon ${appId}`;
 
         appElement.innerHTML = `
diff --git a/static/gui/app-store/js/app-toggle.js b/static/gui/app-store/js/app-toggle.js
index cd226f64f..6d0008a1f 100644
--- a/static/gui/app-store/js/app-toggle.js
+++ b/static/gui/app-store/js/app-toggle.js
@@ -1,4 +1,15 @@
 (function () {
+  const ADD_APP_ID = '999-999';
+
+  function isAddAppAlwaysVisible() {
+    const path = window.location.pathname;
+    return path.includes('/app-store/006') || path.includes('/dashboard/006');
+  }
+
+  function isAddAppEnabled() {
+    return localStorage.getItem(ADD_APP_ID) !== 'removed';
+  }
+
   function syncCheckboxState(card) {
     const appId = card.dataset.appId;
     const checkbox = card.querySelector('.app-checkbox');
@@ -7,19 +18,42 @@
     }
 
     const storedValue = localStorage.getItem(appId);
-    const isInstalled = storedValue === 'added' || (appId === '999-999' && storedValue !== 'removed');
+    const isInstalled = storedValue === 'added';
+    const isAddApp = appId === ADD_APP_ID;
+    const addAppAlwaysVisible = isAddApp && isAddAppAlwaysVisible();
 
-    checkbox.checked = appId === '999-999' ? true : isInstalled;
+    if (isAddApp) {
+      const addAppEnabled = addAppAlwaysVisible || isAddAppEnabled();
+      checkbox.checked = addAppEnabled;
 
-    if (appId === '999-999') {
-      checkbox.setAttribute('disabled', 'disabled');
-      card.classList.add('app-card--disabled');
+      if (addAppAlwaysVisible) {
+        checkbox.setAttribute('disabled', 'disabled');
+        card.classList.add('app-card--disabled');
+      } else {
+        checkbox.removeAttribute('disabled');
+        card.classList.toggle('app-card--disabled', !addAppEnabled);
+      }
+      return;
     }
+
+    checkbox.checked = isInstalled;
   }
 
   function toggleAppInstallation(appId, checkbox) {
-    if (appId === '999-999') {
-      checkbox.checked = true;
+    const isAddApp = appId === ADD_APP_ID;
+    const addAppAlwaysVisible = isAddApp && isAddAppAlwaysVisible();
+
+    if (isAddApp) {
+      if (addAppAlwaysVisible) {
+        checkbox.checked = true;
+        return;
+      }
+
+      if (checkbox.checked) {
+        localStorage.setItem(appId, 'added');
+      } else {
+        localStorage.setItem(appId, 'removed');
+      }
       return;
     }
 
@@ -32,6 +66,7 @@
 
   document.addEventListener('DOMContentLoaded', function () {
     const cards = document.querySelectorAll('.app-card[data-app-id]');
+    const addAppAlwaysVisible = isAddAppAlwaysVisible();
 
     cards.forEach(function (card) {
       const appId = card.dataset.appId;
@@ -42,8 +77,16 @@
 
       syncCheckboxState(card);
 
+      if (appId === ADD_APP_ID && addAppAlwaysVisible) {
+        return;
+      }
+
       checkbox.addEventListener('change', function () {
         toggleAppInstallation(appId, checkbox);
+
+        if (appId === ADD_APP_ID) {
+          card.classList.toggle('app-card--disabled', !checkbox.checked);
+        }
       });
     });
   });
diff --git a/static/gui/dashboard/002.html b/static/gui/dashboard/002.html
index 7f6d8924d..4a0d76ccf 100755
--- a/static/gui/dashboard/002.html
+++ b/static/gui/dashboard/002.html
@@ -170,13 +170,25 @@
 
 <script>
 
+const ADD_APP_ID = '999-999';
+
+function isAddAppAlwaysVisibleOnDashboard() {
+    return window.location.pathname.includes('/dashboard/006');
+}
+
+function shouldDisplayAddAppIcon() {
+    return isAddAppAlwaysVisibleOnDashboard() || localStorage.getItem(ADD_APP_ID) !== 'removed';
+}
+
 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 appIds = ['002-001', '002-002', ADD_APP_ID]; // Using class-based IDs
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const isAddApp = appId === ADD_APP_ID;
+        const canShowAddApp = isAddApp ? shouldDisplayAddAppIcon() : false;
+        if (appInstalled || (isAddApp && canShowAddApp)) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';
@@ -226,7 +238,7 @@
             return '../app-store/apps/002-001/fetch.html';
         case '002-002':
             return 'http://hbnb.local:81';
-        case '999-999':
+        case ADD_APP_ID:
             return '../app-store/002.html';
     }
 }
@@ -245,7 +257,7 @@
     const appElement = document.getElementById(appId);
     if (appElement) {
         // Check if the dropped app is the one you want to prevent from being deleted
-        if (appId !== '999-999') {
+        if (appId !== ADD_APP_ID) {
             appElement.remove();
             localStorage.removeItem(appId);
             updateAppStore(); // Update app store after removal
@@ -262,7 +274,7 @@
 }
 
 function updateAppStore() {
-    const appIds = ['002-001', '002-002', '999-999'];
+    const appIds = ['002-001', '002-002', ADD_APP_ID];
     appIds.forEach(appId => {
         const installState = localStorage.getItem(appId);
         const installAppCheckbox = document.getElementById(appId);
diff --git a/static/gui/dashboard/003.html b/static/gui/dashboard/003.html
index e0646e9a6..9ff801fbd 100755
--- a/static/gui/dashboard/003.html
+++ b/static/gui/dashboard/003.html
@@ -176,13 +176,25 @@
  
 
 <script>
+const ADD_APP_ID = '999-999';
+
+function isAddAppAlwaysVisibleOnDashboard() {
+    return window.location.pathname.includes('/dashboard/006');
+}
+
+function shouldDisplayAddAppIcon() {
+    return isAddAppAlwaysVisibleOnDashboard() || localStorage.getItem(ADD_APP_ID) !== 'removed';
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
-    const appIds = ['003-001', '999-999']; // Using class-based IDs
+    const appIds = ['003-001', ADD_APP_ID]; // Using class-based IDs
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const isAddApp = appId === ADD_APP_ID;
+        const canShowAddApp = isAddApp ? shouldDisplayAddAppIcon() : false;
+        if (appInstalled || (isAddApp && canShowAddApp)) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';
@@ -210,7 +222,7 @@
     switch (appId) {
         case '003-001':
             return '../app-store/apps/003-001/fetch.html';
-        case '999-999':
+        case ADD_APP_ID:
             return '../app-store/003.html';
     }
 }
diff --git a/static/gui/dashboard/004.html b/static/gui/dashboard/004.html
index 6813a9b81..3ffe415bd 100755
--- a/static/gui/dashboard/004.html
+++ b/static/gui/dashboard/004.html
@@ -165,13 +165,25 @@
 
 <script>
 
+const ADD_APP_ID = '999-999';
+
+function isAddAppAlwaysVisibleOnDashboard() {
+    return window.location.pathname.includes('/dashboard/006');
+}
+
+function shouldDisplayAddAppIcon() {
+    return isAddAppAlwaysVisibleOnDashboard() || localStorage.getItem(ADD_APP_ID) !== 'removed';
+}
+
 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 appIds = ['004-001', '004-002', '004-003', '004-004', ADD_APP_ID]; // Using class-based IDs
     appIds.forEach(appId => {
         const appInstalled = localStorage.getItem(appId) === 'added';
-        if (appInstalled || appId === '999-999') {
+        const isAddApp = appId === ADD_APP_ID;
+        const canShowAddApp = isAddApp ? shouldDisplayAddAppIcon() : false;
+        if (appInstalled || (isAddApp && canShowAddApp)) {
             const appElement = document.createElement('a');
             appElement.href = getAppLink(appId); // Set the hyperlink
             appElement.style.cursor = 'pointer';
@@ -225,7 +237,7 @@
             return '../app-store/apps/004-003/fetch.html';
         case '004-004':
             return '../app-store/apps/004-004/fetch.html';
-        case '999-999':
+        case ADD_APP_ID:
             return '../app-store/004.html';
     }
 }
@@ -244,7 +256,7 @@
     const appElement = document.getElementById(appId);
     if (appElement) {
         // Check if the dropped app is the one you want to prevent from being deleted
-        if (appId !== '999-999') {
+        if (appId !== ADD_APP_ID) {
             appElement.remove();
             localStorage.removeItem(appId);
             updateAppStore(); // Update app store after removal
@@ -261,7 +273,7 @@
 }
 
 function updateAppStore() {
-    const appIds = ['004-001', '004-002', '004-003', '004-004', '999-999'];
+    const appIds = ['004-001', '004-002', '004-003', '004-004', ADD_APP_ID];
     appIds.forEach(appId => {
         const installState = localStorage.getItem(appId);
         const installAppCheckbox = document.getElementById(appId);
diff --git a/static/gui/dashboard/005.html b/static/gui/dashboard/005.html
index b697d52ce..139010e3a 100755
--- a/static/gui/dashboard/005.html
+++ b/static/gui/dashboard/005.html
@@ -148,6 +148,16 @@
 <script src="media/js/main.js"></script>
 
 <script>
+const ADD_APP_ID = '999-999';
+
+function isAddAppAlwaysVisibleOnDashboard() {
+    return window.location.pathname.includes('/dashboard/006');
+}
+
+function shouldDisplayAddAppIcon() {
+    return isAddAppAlwaysVisibleOnDashboard() || localStorage.getItem(ADD_APP_ID) !== 'removed';
+}
+
 function updateHomeScreen() {
     const appsContainer = document.getElementById('apps-container');
     appsContainer.innerHTML = ''; // Clear existing apps
@@ -162,8 +172,10 @@
         }
     });
 
-    // Add the 'Add+' icon last
-    appsToDisplay.push('999-999');
+    // Add the 'Add+' icon last when available
+    if (shouldDisplayAddAppIcon()) {
+        appsToDisplay.push(ADD_APP_ID);
+    }
 
     appsToDisplay.forEach(appId => {
         const appElement = document.createElement('a');
@@ -198,7 +210,7 @@
             return '#'; // Placeholder link
         case '005-002':
             return '#'; // Placeholder link
-        case '999-999':
+        case ADD_APP_ID:
             return '../app-store/005.html'; // Link to its own app-store page
         default:
             return '#'; // Fallback for any unhandled appIds