proper naming

Modules/Helpdesk/Resources/views/partials/ticket-controls.blade.php

@@ -48,30 +48,32 @@
 
                 <div class="min-w-0">
                     <h2 class="text-lg font-black uppercase tracking-wide">Ticket controls</h2>
+
                     <p class="text-xs font-semibold text-indigo-100">
                         Log time, assignment, status and priority
                     </p>
-                </div>
-            </div>
 
-            <span class="inline-flex shrink-0 items-center gap-2">
-                @if ($hasRunningTimer)
                     <span
-                        class="inline-flex items-center gap-2 rounded-xl bg-emerald-400/20 px-3 py-2 text-xs font-black text-emerald-50 ring-1 ring-emerald-200/40"
+                        class="{{ $hasRunningTimer ? 'inline-flex' : 'hidden' }} mt-2 w-fit items-center gap-2 rounded-xl bg-emerald-400/20 px-3 py-1.5 text-xs font-black text-emerald-50 ring-1 ring-emerald-200/40"
+                        data-helpdesk-running-summary-badge
                         data-dusk="ticket-running-timer-summary">
                         <span class="relative flex h-2.5 w-2.5">
                             <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-200 opacity-75"></span>
                             <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-300"></span>
                         </span>
-                        <span>Running</span>
-                        <span class="font-mono" data-dusk="ticket-running-elapsed-summary">{{ $runningTimerElapsedDisplay }}</span>
-                    </span>
-                @endif
 
-                <span
+                        <span>Running</span>
-                    class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20">
+
-                    <i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>
+                        <span class="font-mono" data-helpdesk-running-summary-elapsed data-dusk="ticket-running-elapsed-summary">
-                </span>
+                            {{ $runningTimerElapsedDisplay }}
+                        </span>
+                    </span>
+                </div>
+            </div>
+
+            <span
+                class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20">
+                <i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>
             </span>
         </summary>
 
@@ -231,4 +233,96 @@
             </button>
         </form>
     </details>
+
+    <script>
+        (() => {
+            const root = document.querySelector('[data-helpdesk-ticket-controls]');
+
+            if (!root) {
+                return;
+            }
+
+            const badge = root.querySelector('[data-helpdesk-running-summary-badge]');
+            const elapsed = root.querySelector('[data-helpdesk-running-summary-elapsed]');
+
+            if (!badge || !elapsed) {
+                return;
+            }
+
+            let startedAt = null;
+            let interval = null;
+
+            const formatElapsed = (seconds) => {
+                const date = new Date(Math.max(0, seconds) * 1000);
+
+                return date.toISOString().substring(11, 19);
+            };
+
+            const readExistingElapsedSeconds = () => {
+                const parts = String(elapsed.textContent || '00:00:00')
+                    .trim()
+                    .split(':')
+                    .map((part) => Number.parseInt(part, 10));
+
+                if (parts.length !== 3 || parts.some(Number.isNaN)) {
+                    return 0;
+                }
+
+                return (parts[0] * 3600) + (parts[1] * 60) + parts[2];
+            };
+
+            const showBadge = () => {
+                badge.classList.remove('hidden');
+                badge.classList.add('inline-flex');
+
+                if (!startedAt) {
+                    startedAt = Date.now() - (readExistingElapsedSeconds() * 1000);
+                }
+
+                if (interval) {
+                    clearInterval(interval);
+                }
+
+                interval = setInterval(() => {
+                    elapsed.textContent = formatElapsed(Math.floor((Date.now() - startedAt) / 1000));
+                }, 1000);
+            };
+
+            const hideBadge = () => {
+                badge.classList.add('hidden');
+                badge.classList.remove('inline-flex');
+                startedAt = null;
+
+                if (interval) {
+                    clearInterval(interval);
+                    interval = null;
+                }
+            };
+
+            const syncRunningState = () => {
+                const timerPanel = root.querySelector('[data-helpdesk-running-timer]');
+                const timerText = root.textContent.toLowerCase();
+                const isRunning = Boolean(timerPanel) || timerText.includes('timer started') || timerText.includes('running');
+
+                if (isRunning) {
+                    showBadge();
+                    return;
+                }
+
+                hideBadge();
+            };
+
+            new MutationObserver(syncRunningState).observe(root, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+
+            document.addEventListener('livewire:navigated', syncRunningState);
+            document.addEventListener('livewire:update', syncRunningState);
+            document.addEventListener('livewire:updated', syncRunningState);
+
+            syncRunningState();
+        })();
+    </script>
 @endcan