feat: add shared-session avatars and participant overflow menu

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/c9f0ce95-5f5b-495d-be1f-1df388f75c8e

Author: Copilot

index.html

@@ -128,6 +128,7 @@ <h1 class="h4 mb-0 me-2">Markdown Viewer</h1>
                     <button id="share-button" class="tool-button" title="Share via URL">
                         <i class="bi bi-share"></i> Share
                     </button>
+                    <div id="share-presence" class="share-presence" aria-label="Shared session participants" style="display:none;"></div>
 
                     <button id="theme-toggle" class="tool-button" title="Toggle Dark Mode">
                         <i class="bi bi-moon"></i>
@@ -224,6 +225,7 @@ <h5>Menu</h5>
                             <button id="mobile-share-button" class="mobile-menu-item" title="Share via URL">
                                 <i class="bi bi-share me-2"></i> Share
                             </button>
+                            <div id="mobile-share-presence" class="share-presence share-presence-mobile" aria-label="Shared session participants" style="display:none;"></div>
 
                             <button id="mobile-theme-toggle" class="mobile-menu-item" title="Toggle Dark Mode">
                                 <i class="bi bi-moon me-2"></i> Dark Mode

script.js

@@ -61,6 +61,8 @@ document.addEventListener("DOMContentLoaded", function () {
   const mobileThemeToggle   = document.getElementById("mobile-theme-toggle");
   const shareButton         = document.getElementById("share-button");
   const mobileShareButton   = document.getElementById("mobile-share-button");
+  const sharePresence       = document.getElementById("share-presence");
+  const mobileSharePresence = document.getElementById("mobile-share-presence");
   const githubImportModal = document.getElementById("github-import-modal");
   const githubImportTitle = document.getElementById("github-import-title");
   const githubImportUrlInput = document.getElementById("github-import-url");
@@ -2599,6 +2601,199 @@ This is a fully client-side application. Your content never leaves your browser
   // ============================================
 
   const MAX_SHARE_URL_LENGTH = 32000;
+  const SHARE_PRESENCE_KEY = "mdv:share-presence";
+  const SHARE_PRESENCE_HEARTBEAT_MS = 15000;
+  const SHARE_PRESENCE_STALE_MS = SHARE_PRESENCE_HEARTBEAT_MS * 2;
+  const clientId = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  const clientName = generateClientName();
+  const clientIcon = animalEmojiForId(clientId);
+  let sharePresenceHeartbeatTimer = null;
+
+  const adjectives = [
+    'Acidic','Awesome','Bitter','Burnt','Buttery','Creamy','Fantastic','Fresh','Fried',
+    'Good','Juicy','Moist','Raw','Roasted','Salty','Seasoned','Sharp','Sour','Sugary',
+    'Sweet','Stale',
+  ];
+
+  const nouns = [
+    'Bamboo','Cabbage','Cactus','Fern','Garlic','Lemon','Lily','Melon','Onion',
+    'Palm','Plum','Tofu','Tomato','Watermelon',
+  ];
+
+  const animalIcons = ['🐶', '🐱', '🦊', '🐼', '🐨', '🐯', '🦁', '🐸', '🐵', '🐧', '🦉', '🦄'];
+
+  function arrayRandom(array) {
+    return array[Math.floor(Math.random() * array.length)];
+  }
+
+  function generateClientName() {
+    return `${arrayRandom(adjectives)} ${arrayRandom(nouns)}`;
+  }
+
+  function animalEmojiForId(id) {
+    let hash = 0;
+    for (let i = 0; i < id.length; i++) hash = ((hash << 5) - hash) + id.charCodeAt(i);
+    return animalIcons[Math.abs(hash) % animalIcons.length];
+  }
+
+  function readPresenceState() {
+    try {
+      return JSON.parse(localStorage.getItem(SHARE_PRESENCE_KEY)) || {};
+    } catch (_) {
+      return {};
+    }
+  }
+
+  function writePresenceState(state) {
+    try {
+      localStorage.setItem(SHARE_PRESENCE_KEY, JSON.stringify(state));
+    } catch (_) {
+      // ignore storage write failures
+    }
+  }
+
+  function cleanPresenceState(state) {
+    const now = Date.now();
+    const cleaned = {};
+    Object.keys(state).forEach((id) => {
+      const user = state[id];
+      if (!user || typeof user.lastSeen !== 'number') return;
+      if (now - user.lastSeen <= SHARE_PRESENCE_STALE_MS) {
+        cleaned[id] = user;
+      }
+    });
+    return cleaned;
+  }
+
+  function updatePresence(shareId) {
+    if (!shareId) return;
+    const state = cleanPresenceState(readPresenceState());
+    state[clientId] = {
+      id: clientId,
+      shareId,
+      name: clientName,
+      icon: clientIcon,
+      lastSeen: Date.now(),
+    };
+    writePresenceState(state);
+  }
+
+  function leavePresence() {
+    const state = readPresenceState();
+    if (state[clientId]) {
+      delete state[clientId];
+      writePresenceState(state);
+    }
+  }
+
+  function getShareIdFromHash() {
+    const hash = window.location.hash;
+    if (!hash.startsWith('#share=')) return null;
+    return hash.slice('#share='.length) || null;
+  }
+
+  function renderPresence() {
+    const shareId = getShareIdFromHash();
+    const isSharedSession = Boolean(shareId);
+    contentContainer.classList.toggle('shared-active', isSharedSession);
+
+    [sharePresence, mobileSharePresence].forEach((container) => {
+      if (!container) return;
+      container.innerHTML = '';
+      if (!isSharedSession) {
+        container.style.display = 'none';
+        return;
+      }
+
+      const state = cleanPresenceState(readPresenceState());
+      const users = Object.values(state)
+        .filter((u) => u && u.shareId === shareId)
+        .sort((a, b) => b.lastSeen - a.lastSeen);
+
+      if (!users.length) {
+        container.style.display = 'none';
+        return;
+      }
+
+      container.style.display = '';
+      const visibleUsers = users.slice(0, 4);
+      const extraUsers = users.slice(4);
+
+      visibleUsers.forEach((user) => {
+        const avatar = document.createElement('span');
+        avatar.className = `share-presence-avatar${user.id === clientId ? ' self' : ''}`;
+        avatar.textContent = user.icon || '🐾';
+        avatar.title = user.name || 'Shared user';
+        avatar.setAttribute('aria-label', user.name || 'Shared user');
+        container.appendChild(avatar);
+      });
+
+      if (extraUsers.length) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'dropdown';
+        const button = document.createElement('button');
+        button.className = 'btn btn-sm dropdown-toggle share-presence-toggle';
+        button.type = 'button';
+        button.setAttribute('data-bs-toggle', 'dropdown');
+        button.setAttribute('aria-expanded', 'false');
+        button.textContent = `+${extraUsers.length}`;
+
+        const menu = document.createElement('ul');
+        menu.className = 'dropdown-menu dropdown-menu-end share-presence-more-list';
+
+        extraUsers.forEach((user) => {
+          const item = document.createElement('li');
+          const label = document.createElement('span');
+          label.className = 'dropdown-item share-presence-item';
+          const avatarInline = document.createElement('span');
+          avatarInline.className = 'avatar-inline';
+          avatarInline.textContent = user.icon || '🐾';
+          avatarInline.style.background = 'linear-gradient(135deg, #58a6ff, #1f6feb)';
+          const nameText = document.createElement('span');
+          nameText.textContent = user.name || 'Shared user';
+          label.appendChild(avatarInline);
+          label.appendChild(nameText);
+          item.appendChild(label);
+          menu.appendChild(item);
+        });
+
+        wrapper.appendChild(button);
+        wrapper.appendChild(menu);
+        container.appendChild(wrapper);
+      }
+    });
+  }
+
+  function syncPresenceLoop() {
+    const shareId = getShareIdFromHash();
+    if (!shareId) {
+      if (sharePresenceHeartbeatTimer) {
+        clearInterval(sharePresenceHeartbeatTimer);
+        sharePresenceHeartbeatTimer = null;
+      }
+      leavePresence();
+      renderPresence();
+      return;
+    }
+
+    updatePresence(shareId);
+    renderPresence();
+
+    if (!sharePresenceHeartbeatTimer) {
+      sharePresenceHeartbeatTimer = setInterval(() => {
+        const activeShareId = getShareIdFromHash();
+        if (!activeShareId) {
+          clearInterval(sharePresenceHeartbeatTimer);
+          sharePresenceHeartbeatTimer = null;
+          leavePresence();
+          renderPresence();
+          return;
+        }
+        updatePresence(activeShareId);
+        renderPresence();
+      }, SHARE_PRESENCE_HEARTBEAT_MS);
+    }
+  }
 
   function encodeMarkdownForShare(text) {
     const compressed = pako.deflate(new TextEncoder().encode(text));
@@ -2682,6 +2877,12 @@ This is a fully client-side application. Your content never leaves your browser
   }
 
   loadFromShareHash();
+  syncPresenceLoop();
+  window.addEventListener('hashchange', syncPresenceLoop);
+  window.addEventListener('storage', (e) => {
+    if (e.key === SHARE_PRESENCE_KEY) renderPresence();
+  });
+  window.addEventListener('beforeunload', leavePresence);
 
   const dropEvents = ["dragenter", "dragover", "dragleave", "drop"];
 

styles.css

@@ -302,6 +302,79 @@ body {
   font-size: 16px;
 }
 
+.share-presence {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.share-presence-toggle {
+  color: var(--text-color);
+  border-color: var(--border-color);
+  background: var(--button-bg);
+}
+
+.share-presence-toggle:hover,
+.share-presence-toggle:focus {
+  background: var(--button-hover);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.share-presence-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid var(--bg-color);
+  margin-left: -8px;
+  background: linear-gradient(135deg, #58a6ff, #1f6feb);
+  color: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 1;
+  position: relative;
+}
+
+.share-presence-avatar:first-child {
+  margin-left: 0;
+}
+
+.share-presence-avatar.self {
+  border-color: #2ea043;
+  box-shadow: 0 0 0 1px #2ea043;
+}
+
+.share-presence-more-list {
+  min-width: 220px;
+  max-width: 320px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.share-presence-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.share-presence-item .avatar-inline {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.content-container.shared-active {
+  box-shadow: inset 0 0 0 2px #2ea043;
+}
+
 .file-input {
   display: none;
 }
@@ -782,6 +855,10 @@ a:focus {
   background-color: var(--button-active);
 }
 
+.share-presence-mobile {
+  margin-top: 0.25rem;
+}
+
 /* close button override */
 #close-mobile-menu.tool-button {
   padding: 0.25rem 0.5rem;

wiki/Features.md

@@ -183,6 +183,8 @@ The **Share** feature encodes your Markdown content into the page URL hash, allo
 
 Recipients open the link and see your document pre-loaded in the editor. No server or sign-in required.
 
+When a shared `#share=` URL is open, the app also shows lightweight local **presence avatars** (animal icons) for people currently using that same share link in their browser on the same device profile. Each user gets a generated name in the `<Adjective> <Noun>` format, active users are highlighted with a green shared-session frame, and if more than 4 users are present, extras are grouped under a hover dropdown (`+N`).
+
 ---
 
 ## Content Statistics