feat(ui): add addressBook and systemUsers model + show person who shared an item with me in tooltip

2026-05-24 02:31:50 +02:00
parent 7fd444259f
commit d64beb43a7
5 changed files with 424 additions and 4 deletions
@@ -0,0 +1,121 @@
+// @ts-check
+
+/**
+ * Owner tooltip — shows "Shared by: <display name>" when hovering a
+ * `.file-item[data-owner-id]` element.
+ *
+ * Reuses the existing `#path-tooltip` DOM element (same position and style)
+ * so no extra CSS is needed.  The tooltip is hidden immediately on mouseleave
+ * and the display-name resolution is async-but-usually-instant because
+ * `systemUsers` is pre-fetched when the Shared-with-me section is entered.
+ *
+ * Usage:
+ *   ownerTooltip.init(containerEl)    — call after rendering items
+ *   ownerTooltip.destroy(containerEl) — call when leaving the section
+ */
+
+import { i18n } from '../core/i18n.js';
+import { systemUsers } from '../model/systemUsers.js';
+
+// ── Tooltip DOM ───────────────────────────────────────────────────────────────
+
+/** @returns {HTMLElement} */
+function _getOrCreateTooltip() {
+    let el = document.getElementById('path-tooltip');
+    if (!el) {
+        el = document.createElement('div');
+        el.id = 'path-tooltip';
+        el.className = 'path-tooltip hidden';
+        document.querySelector('.main-content')?.appendChild(el);
+    }
+    return el;
+}
+
+function _hide() {
+    document.getElementById('path-tooltip')?.classList.add('hidden');
+}
+
+// ── Event handlers ────────────────────────────────────────────────────────────
+
+/**
+ * @param {MouseEvent} e
+ */
+async function _onEnter(e) {
+    const item = /** @type {HTMLElement} */ (e.currentTarget);
+    const ownerId = item.dataset.ownerId;
+    if (!ownerId) return;
+
+    if (!systemUsers.isAvailable()) return;
+
+    const tooltip = _getOrCreateTooltip();
+
+    // Show immediately with a placeholder so the tooltip appears without lag.
+    const label = i18n.t('sharedwithme_sharedBy', 'Shared by');
+    tooltip.textContent = `${label}: …`;
+    tooltip.classList.remove('hidden');
+
+    // Resolve the name (usually instant from the pre-fetched cache).
+    const name = await systemUsers.getDisplayName(ownerId);
+
+    // Guard: don't update if the user already moved away.
+    if (!tooltip.classList.contains('hidden')) {
+        tooltip.textContent = `${label}: ${name}`;
+    }
+}
+
+function _onLeave() {
+    _hide();
+}
+
+// ── Listener registry (WeakMap for leak-free cleanup) ────────────────────────
+
+/**
+ * @typedef {{ enter: (e: MouseEvent) => void, leave: () => void }} Handlers
+ */
+
+/** @type {WeakMap<HTMLElement, Handlers>} */
+const _registry = new WeakMap();
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+/**
+ * Attach owner-tooltip listeners to every `.file-item[data-owner-id]`
+ * inside `container`.
+ * @param {HTMLElement} container
+ */
+function init(container) {
+    for (const item of container.querySelectorAll('.file-item[data-owner-id]')) {
+        const el = /** @type {HTMLElement} */ (item);
+        if (_registry.has(el)) continue; // already wired
+
+        /** @type {(e: MouseEvent) => void} */
+        const enter = (e) => {
+            _onEnter(e);
+        }; // intentionally discard the Promise
+        const leave = () => _onLeave();
+
+        el.addEventListener('mouseenter', enter);
+        el.addEventListener('mouseleave', leave);
+        _registry.set(el, { enter, leave });
+    }
+}
+
+/**
+ * Remove owner-tooltip listeners from all `.file-item` elements inside
+ * `container` and hide any visible tooltip.
+ * @param {HTMLElement} container
+ */
+function destroy(container) {
+    for (const item of container.querySelectorAll('.file-item')) {
+        const el = /** @type {HTMLElement} */ (item);
+        const h = _registry.get(el);
+        if (h) {
+            el.removeEventListener('mouseenter', h.enter);
+            el.removeEventListener('mouseleave', h.leave);
+            _registry.delete(el);
+        }
+    }
+    _hide();
+}
+
+export const ownerTooltip = { init, destroy };