move the presence-enable button in dash

put inside the expanding manual config section

Author: chadwallacehart

src/applets/presence/scripts/dash.mjs

@@ -50,7 +50,7 @@ togglePresenceConfigTabsButton.addEventListener('click', () => {
     // Optionally update the button text or icon
     const isExpanded = !presenceConfigTabsContainer.classList.contains('d-none');
     // togglePresenceConfigTabsButton.setAttribute('aria-expanded', `${isExpanded}`);
-    debug(`Presence Config Tabs ${isExpanded ? 'opened' : 'closed'}`);
+    // debug(`Presence Config Tabs ${isExpanded ? 'opened' : 'closed'}`);
 });
 /************ END presenceControl ************/
 

src/dash/dash.html

@@ -260,16 +260,9 @@ <h5>Output</h5>
 
     <!-- START: PRESENCE CONTROL-->
     <div class="content" id="presence">
-        <div class="d-flex flex-row flex-nowrap h-100">
-            <button class="btn icon-button btn-outline-secondary" id="presence-enable" data-bs-toggle="tooltip"
-                    data-bs-placement="top" title="Automatically update presence status">
-                <i class="bi bi-arrow-repeat"></i>
-                <span>Auto-update <br>ON</span>
-            </button>
-        </div>
 
         <!-- Presence Status -->
-        <div class="d-flex flex-row flex-nowrap vertical-divider h-100">
+        <div class="d-flex flex-row flex-nowrap h-100">
             <div class="btn icon-button btn-outline-secondary presence-status-button disabled text-secondary-emphasis" id="camera-in-use"
                  data-bs-toggle="tooltip" data-bs-placement="top" title="Camera in use">
                 <div class="badge bg-secondary w-75" id="camera-stream-count">0</div>
@@ -291,31 +284,37 @@ <h5>Output</h5>
         <!-- Presence Config -->
         <div class="d-flex flex-row flex-nowrap vertical-divider align-items-start h-100 w-100">
             <div class="flex-column">
-                <h5 class="">Manual override</h5>
+                <h5 class="">Webhook configuration</h5>
                 <div class="btn-group dropend d-flex flex-row" role="group" aria-label="Webhook Controls">
                     <button class="btn group-icon-btn btn-outline-secondary" id="manual-override-on"
                             data-bs-toggle="tooltip"
                             data-bs-placement="top" title="Manually trigger on webhook on">
                         <i class="bi bi-check-circle-fill"></i>
-                        <span>Webhook <br>ON</span>
+                        <span>Manual <br>ON</span>
                     </button>
                     <button class="btn  group-icon-btn btn-outline-secondary" id="manual-override-off"
                             data-bs-toggle="tooltip"
                             data-bs-placement="top" title="Manually trigger on webhook off">
                         <i class="bi bi-x-circle-fill"></i>
-                        <span>Webhook<br>OFF</span>
+                        <span>Manual<br>OFF</span>
                     </button>
                     <button class="btn  group-icon-btn btn-outline-secondary disabled text-secondary-emphasis me-0 ">
                             <i class="bi bi-gear d-block"></i>
-                            <span class="d-block">Webhook<br>Settings</span>
+                            <span class="d-block">Settings</span>
                     </button>
                     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                             data-bs-toggle="toggle-presence-config-tabs-container" aria-expanded="false"
                             id="toggle-presence-config-tabs">
                     </button>
                 </div>
             </div>
-            <div class="tab-group collapse ms-3 " id="presence-config-tabs-container">
+            <div class="tab-group collapse h-100 " id="presence-config-tabs-container">
+                <button class="btn icon-button btn-outline-secondary ms-2" id="presence-enable" data-bs-toggle="tooltip"
+                        data-bs-placement="top" title="Automatically update presence status">
+                    <i class="bi bi-arrow-repeat"></i>
+                    <span>Auto-update <br>ON</span>
+                </button>
+
                 <ul class="nav nav-tabs d-flex flex-column" id="presenceConfigTabs" role="tablist">
                     <li class="nav-item" role="presentation">
                         <a class="nav-link active" id="on-settings-tab" data-bs-toggle="tab" href="#on-settings"

src/dash/style.scss

@@ -75,8 +75,6 @@ body {
     min-width: 60px; /* Ensure consistent width on large screens */
   }
 
-
-
   .icon-button, i {
     font-size: 20px;
   }
@@ -93,6 +91,10 @@ body {
   .device-manager-selection-buttons button {
     font-size: 12px;
   }
+  
+  #presence-save .bi-save {
+    display: none;
+  }
 }
 
 @media (max-width: 1000px) {
@@ -374,14 +376,15 @@ attempts to prevent the i and spans from turning to white on hover failed
   min-width: 95px;
 }
 
-.save-button {
+#presence-save {
   width: 100%; /* Ensure the button takes full width */
   padding: 5px; /* Adjust padding */
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+
 #presence .tab-content .form-group {
   flex: 1; /* Allow form groups to grow */
   margin-bottom: 10px; /* Add space between form groups */