From 9f3e4b9d3166c55e551021bfe4b8a8936fd95ae5 Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller-moko@noreply.git.mokoconsulting.tech>
Date: Thu, 4 Jun 2026 19:57:22 -0500
Subject: [PATCH] fix: cpanel collapse toggle as caret button on far left

Replaced clickable header with a dedicated caret button (fa-caret-right/down)
on the far left that toggles the collapse. Dashboard button pushed to far right.

Authored-by: Moko Consulting
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../mod_mokowaas_cpanel/tmpl/default.php      | 67 +++++++++++--------
 1 file changed, 40 insertions(+), 27 deletions(-)

diff --git a/src/packages/mod_mokowaas_cpanel/tmpl/default.php b/src/packages/mod_mokowaas_cpanel/tmpl/default.php
index 3bf0d36e..2af3a20e 100644
--- a/src/packages/mod_mokowaas_cpanel/tmpl/default.php
+++ b/src/packages/mod_mokowaas_cpanel/tmpl/default.php
@@ -58,34 +58,47 @@ $diskColor = ($diskPct !== null && $diskPct > 90) ? 'bg-danger' : (($diskPct !==
 ?>
 
 <div class="mod-mokowaas-cpanel card p-3 mb-4">
-	<!-- Header row (always visible, acts as collapse toggle) -->
-	<div class="d-flex align-items-center justify-content-between">
-		<a class="d-flex align-items-center gap-2 text-decoration-none text-reset" data-bs-toggle="collapse" href="#mokowaas-cpanel-body" role="button" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>" aria-controls="mokowaas-cpanel-body">
-			<span class="icon-shield-alt" aria-hidden="true" style="font-size:1.25rem;color:#1a2744"></span>
-			<strong>MokoWaaS</strong>
-			<span class="badge bg-primary"><?php echo htmlspecialchars($siteInfo->mokowaas_version ?? ''); ?></span>
-			<?php if (!empty($siteInfo->debug)): ?>
-				<span class="badge bg-warning text-dark">Debug</span>
-			<?php endif; ?>
-			<?php if (!empty($siteInfo->offline)): ?>
-				<span class="badge bg-danger">Offline</span>
-			<?php endif; ?>
-			<?php if (($counts->moko_updates ?? 0) > 0): ?>
-				<a href="<?php echo Route::_('index.php?option=com_installer&view=update'); ?>" class="badge bg-info text-decoration-none" title="MokoWaaS updates available">
-					<span class="icon-upload" aria-hidden="true"></span> <?php echo $counts->moko_updates; ?> MokoWaaS update<?php echo $counts->moko_updates > 1 ? 's' : ''; ?>
-				</a>
-			<?php endif; ?>
-			<?php if ($counts->updates > 0 && $counts->updates !== ($counts->moko_updates ?? 0)): ?>
-				<a href="<?php echo Route::_('index.php?option=com_installer&view=update'); ?>" class="badge bg-warning text-dark text-decoration-none" title="Other updates available">
-					<span class="icon-upload" aria-hidden="true"></span> <?php echo $counts->updates - ($counts->moko_updates ?? 0); ?> update<?php echo ($counts->updates - ($counts->moko_updates ?? 0)) > 1 ? 's' : ''; ?>
-				</a>
-			<?php endif; ?>
-		</a>
-		<a href="<?php echo Route::_('index.php?option=com_mokowaas'); ?>" class="btn btn-sm btn-primary">
-			<span class="icon-cogs" aria-hidden="true"></span>
-			<?php echo Text::_('MOD_MOKOWAAS_CPANEL_OPEN_DASHBOARD'); ?>
-		</a>
+	<!-- Header row -->
+	<div class="d-flex align-items-center gap-2">
+		<button type="button" class="btn btn-sm btn-link p-0 text-muted" data-bs-toggle="collapse" data-bs-target="#mokowaas-cpanel-body" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>" aria-controls="mokowaas-cpanel-body" id="mokowaas-cpanel-toggle" style="font-size:1rem;line-height:1;width:1.5rem;">
+			<span class="fa-solid fa-caret-<?php echo $collapsed ? 'right' : 'down'; ?>" aria-hidden="true" id="mokowaas-cpanel-caret"></span>
+		</button>
+		<span class="icon-shield-alt" aria-hidden="true" style="font-size:1.25rem;color:#1a2744"></span>
+		<strong>MokoWaaS</strong>
+		<span class="badge bg-primary"><?php echo htmlspecialchars($siteInfo->mokowaas_version ?? ''); ?></span>
+		<?php if (!empty($siteInfo->debug)): ?>
+			<span class="badge bg-warning text-dark">Debug</span>
+		<?php endif; ?>
+		<?php if (!empty($siteInfo->offline)): ?>
+			<span class="badge bg-danger">Offline</span>
+		<?php endif; ?>
+		<?php if (($counts->moko_updates ?? 0) > 0): ?>
+			<a href="<?php echo Route::_('index.php?option=com_installer&view=update'); ?>" class="badge bg-info text-decoration-none" title="MokoWaaS updates available">
+				<span class="icon-upload" aria-hidden="true"></span> <?php echo $counts->moko_updates; ?> MokoWaaS update<?php echo $counts->moko_updates > 1 ? 's' : ''; ?>
+			</a>
+		<?php endif; ?>
+		<?php if ($counts->updates > 0 && $counts->updates !== ($counts->moko_updates ?? 0)): ?>
+			<a href="<?php echo Route::_('index.php?option=com_installer&view=update'); ?>" class="badge bg-warning text-dark text-decoration-none" title="Other updates available">
+				<span class="icon-upload" aria-hidden="true"></span> <?php echo $counts->updates - ($counts->moko_updates ?? 0); ?> update<?php echo ($counts->updates - ($counts->moko_updates ?? 0)) > 1 ? 's' : ''; ?>
+			</a>
+		<?php endif; ?>
+		<span class="ms-auto">
+			<a href="<?php echo Route::_('index.php?option=com_mokowaas'); ?>" class="btn btn-sm btn-primary">
+				<span class="icon-cogs" aria-hidden="true"></span>
+				<?php echo Text::_('MOD_MOKOWAAS_CPANEL_OPEN_DASHBOARD'); ?>
+			</a>
+		</span>
 	</div>
+	<script>
+	document.addEventListener('DOMContentLoaded', function() {
+		var target = document.getElementById('mokowaas-cpanel-body');
+		var caret = document.getElementById('mokowaas-cpanel-caret');
+		if (target && caret) {
+			target.addEventListener('show.bs.collapse', function() { caret.className = 'fa-solid fa-caret-down'; });
+			target.addEventListener('hide.bs.collapse', function() { caret.className = 'fa-solid fa-caret-right'; });
+		}
+	});
+	</script>
 
 	<!-- Collapsible body -->
 	<div class="collapse<?php echo $collapsed ? '' : ' show'; ?> mt-3" id="mokowaas-cpanel-body">