north-star / commit

treat participants list as modal

7ee0569becc80bc621a980250988eb574fcf420e · Pavel Safronov · 2026-03-14 23:49:36 -0700 · parents 3c70855fdb19

treat participants list as modal

 src/app.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/app.js b/src/app.js
index 51ae878..9df64bd 100644
--- a/src/app.js
+++ b/src/app.js
@@ -624,6 +624,21 @@ if (participantsToggle) {
     });
 }
 
+document.addEventListener('click', (event) => {
+    if (!participantsPanelVisible) return;
+
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+
+    const clickedInsidePanel = participantsPanel ? participantsPanel.contains(target) : false;
+    const clickedToggle = participantsToggle ? participantsToggle.contains(target) : false;
+
+    if (clickedInsidePanel || clickedToggle) return;
+
+    participantsPanelVisible = false;
+    applyParticipantsPanelVisibility();
+});
+
 applyParticipantsPanelVisibility();
 
 const isParticipantVisible = (participantId) => participantVisibility[participantId] !== false;
@@ -1058,7 +1073,7 @@ const render = () => {
     document.body.style.backgroundColor = selfParticipant.color;
 
     // output debug info
-    logDebug(`Name: ${selfParticipant.name} | Real participants: ${participants.length} | Commit: ${isLocalCommit ? 'local' : `<a href="https://gitlab.com/PavelSafronov/north-star/-/commit/${GIT_COMMIT}">${GIT_COMMIT}</a>`}`);
+    logDebug(`Name: ${selfParticipant.name} | Real participants: ${participants.length} | Commit: ${isLocalCommit ? 'local' : `<a href="https://gitlab.com/PavelSafronov/north-star/-/commit/${GIT_COMMIT}" target="_blank">${GIT_COMMIT}</a>`}`);
 };
 
 await syncSelfParticipant();