feat: Add tap-to-show path popup for mobile devices

Tooltips don't work on touchscreens. Added a popup that appears on
tap/click, shows the full path, and auto-dismisses after 4 seconds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-02-07 16:41:33 +01:00
parent ddb69f1a18
commit 01fc9edf24
2 changed files with 46 additions and 2 deletions

View File

@@ -1123,8 +1123,27 @@ main {
/* Path info in message meta (incoming messages) */
.path-info {
cursor: help;
cursor: pointer;
border-bottom: 1px dotted currentColor;
position: relative;
}
/* Path popup (mobile-friendly tooltip) */
.path-popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 0.35rem 0.6rem;
border-radius: 0.375rem;
font-size: 0.7rem;
white-space: nowrap;
z-index: 1000;
pointer-events: none;
margin-bottom: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* =============================================================================

View File

@@ -721,7 +721,7 @@ function createMessageElement(msg) {
const shortPath = segments.length > 4
? `${segments[0]}\u2192...\u2192${segments[segments.length - 1]}`
: segments.join('\u2192');
metaInfo += ` | <span class="path-info" title="Path: ${fullPath}">Route: ${shortPath}</span>`;
metaInfo += ` | <span class="path-info" onclick="showPathPopup(this, '${fullPath}')">Route: ${shortPath}</span>`;
}
if (msg.is_own) {
@@ -897,6 +897,31 @@ function resendMessage(content) {
input.focus();
}
/**
* Show path popup on tap (mobile-friendly alternative to tooltip)
*/
function showPathPopup(element, fullPath) {
// Remove any existing popup
const existing = document.querySelector('.path-popup');
if (existing) existing.remove();
const popup = document.createElement('div');
popup.className = 'path-popup';
popup.textContent = `Path: ${fullPath}`;
element.style.position = 'relative';
element.appendChild(popup);
// Auto-dismiss after 4 seconds or on outside tap
const dismiss = () => popup.remove();
setTimeout(dismiss, 4000);
document.addEventListener('click', function handler(e) {
if (!element.contains(e.target)) {
dismiss();
document.removeEventListener('click', handler);
}
});
}
/**
* Load connection status
*/