From f395d224fa5bc9e88990bfff3fb42595a4121331 Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Sat, 29 Aug 2026 00:59:49 -0400
Subject: [PATCH] Collapsable Client Top Head collapsable is remembered upon
 navigation

---
 agent/includes/inc_client_top_head.php | 56 ++++++++++++++++++++++----
 css/itflow_custom.css                  | 15 +++----
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/agent/includes/inc_client_top_head.php b/agent/includes/inc_client_top_head.php
index bdf5b8340..22f21031f 100644
--- a/agent/includes/inc_client_top_head.php
+++ b/agent/includes/inc_client_top_head.php
@@ -1,19 +1,25 @@
 <?php $show_add_credit = 0; // Remove once credits is added hides the button ?>
 <?php
     /*
-     * #clientHeader starts open on the client overview and closed everywhere else.
-     * The flag is worked out once because the disclosure chevron needs it too:
-     * Bootstrap only writes aria-expanded onto a data-api trigger after the first
-     * click, so without seeding it here the chevron points the wrong way until
-     * something is clicked.
+     * Whether #clientHeader starts open. Remembered in a cookie rather than
+     * localStorage precisely so it can be answered HERE, server side - the panel
+     * and its chevron then render in the right state on the first paint instead
+     * of flashing shut and springing open once JS has run.
+     *
+     * With no cookie yet, fall back to the old behaviour: open on the client
+     * overview, closed on every other client page.
      */
-    $client_header_open = basename($_SERVER["PHP_SELF"]) == "client_overview.php";
+    if (isset($_COOKIE['client_header_open'])) {
+        $client_header_open = $_COOKIE['client_header_open'] === '1';
+    } else {
+        $client_header_open = basename($_SERVER["PHP_SELF"]) == "client_overview.php";
+    }
 ?>
 
 <div class="card mb-3 d-print-none">
     <div class="card-header pb-1 pt-2 px-3">
         <div class="card-title">
-            <a href="#" class="client-header-toggle<?= $client_header_open ? '' : ' collapsed' ?>" data-bs-toggle="collapse" data-bs-target="#clientHeader" aria-controls="clientHeader" aria-expanded="<?= $client_header_open ? 'true' : 'false' ?>"><h4 class="text-dark" data-bs-toggle="tooltip" data-bs-placement="right" title="Client ID: <?= $client_id ?>"><i class="fas fa-fw fa-chevron-right client-header-chevron" aria-hidden="true"></i><strong><?= $client_name ?></strong> <?php if ($client_archived_at) { echo "(archived)"; } ?></h4></a>
+            <a href="#" class="client-header-toggle<?= $client_header_open ? '' : ' collapsed' ?>" data-bs-toggle="collapse" data-bs-target="#clientHeader" aria-controls="clientHeader" aria-expanded="<?= $client_header_open ? 'true' : 'false' ?>"><h4 class="text-dark" data-bs-toggle="tooltip" data-bs-placement="right" title="Client ID: <?= $client_id ?>"><i class="fas fa-fw fa-chevron-<?= $client_header_open ? 'down' : 'right' ?> client-header-chevron" aria-hidden="true"></i><strong><?= $client_name ?></strong> <?php if ($client_archived_at) { echo "(archived)"; } ?></h4></a>
         </div>
         <?php if (!empty($client_tag_name_display_array)) { ?><div class="card-title ms-2"><?= $client_tags_display ?></div> <?php } ?>
         <?php if (lookupUserPermission("module_client") >= 2) { ?>
@@ -220,6 +226,42 @@
     </div>
 </div>
 
+<script>
+(function () {
+    /*
+     * Remember whether the client header is open so it stays that way while you move
+     * around the client area. The cookie is what the PHP at the top of this file reads
+     * on the next request. The chevron is swapped by CLASS rather than rotated in CSS,
+     * so the direction cannot go stale behind a cached stylesheet.
+     *
+     * No readiness wrapper: these are document-level listeners for events that cannot
+     * fire until both Bootstrap and the markup exist, so registration order is moot.
+     */
+    function syncClientHeader(open) {
+        document.cookie = 'client_header_open=' + (open ? '1' : '0') +
+            ';path=/;max-age=31536000;samesite=lax' +
+            (location.protocol === 'https:' ? ';secure' : '');
+
+        document.querySelectorAll('.client-header-chevron').forEach(function (icon) {
+            icon.classList.toggle('fa-chevron-down', open);
+            icon.classList.toggle('fa-chevron-right', !open);
+        });
+    }
+
+    document.addEventListener('shown.bs.collapse', function (e) {
+        if (e.target.id === 'clientHeader') {
+            syncClientHeader(true);
+        }
+    });
+
+    document.addEventListener('hidden.bs.collapse', function (e) {
+        if (e.target.id === 'clientHeader') {
+            syncClientHeader(false);
+        }
+    });
+})();
+</script>
+
 <?php
 // require_once "modals/client/client_credit_add.php"; --Credit Not Ready 2025-08-27
 require_once "modals/client/client_delete.php";
diff --git a/css/itflow_custom.css b/css/itflow_custom.css
index b32383943..1fef24586 100644
--- a/css/itflow_custom.css
+++ b/css/itflow_custom.css
@@ -1532,26 +1532,23 @@ html {
     max-width: 100%;
 }
 
-
 /* Client header disclosure - agent/includes/inc_client_top_head.php
 
    The client name is the collapse trigger for #clientHeader, but links carry no
    underline in this app and the h4 is text-dark, so nothing said the heading was
-   clickable or that a panel was folded behind it. Bootstrap maintains
-   aria-expanded on the trigger itself, so the chevron reads the real state
-   rather than a second copy of it kept somewhere in JS. */
+   clickable or that a panel was folded behind it.
+
+   Size and colour only. Which way it points is carried by the icon class itself
+   (fa-chevron-right / fa-chevron-down) - emitted by PHP for the first paint, swapped
+   by the include's own script after that. Not a CSS rotation, so the direction cannot
+   go stale behind a cached stylesheet. */
 .client-header-chevron {
     font-size: .7em;
     margin-right: .25rem;
     vertical-align: middle;
     color: var(--bs-secondary-color);
-    transition: transform .15s ease-in-out;
 }
 
 .client-header-toggle:hover .client-header-chevron {
     color: var(--bs-body-color);
 }
-
-.client-header-toggle[aria-expanded="true"] .client-header-chevron {
-    transform: rotate(90deg);
-}