1 files changed, 35 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-name.js b/packages/meshbay-hub/src/meshbay_hub/static/group-name.js
index af8879c..f109da7 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-name.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-name.js
@@ -1,4 +1,6 @@
 import { html } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { sourceLabel } from './source-merge.js';
 
 /**
  * A group's name with the `@owner` handle under it.
@@ -20,3 +22,36 @@ export function GroupName({ name, owner, inline = false }) {
     </span>
   `;
 }
+
+/**
+ * Which group serves an entry, or how many groups have it.
+ *
+ * The Search view merges a file several groups share into one entry, so the
+ * badge under a card cannot always name a group. One source keeps naming it
+ * and keeps linking to it; more than one becomes a count, and *which* one was
+ * picked is deliberately not shown (docs/refactoring-search.md §5.5).
+ *
+ * `entries` is the whole unit — every episode of a show, every track of an
+ * album — not the entry the card was drawn from; `sourceLabel` explains why.
+ * Renders nothing at all on the single-group Group page, where an entry
+ * carries no group and there is only ever one source anyway.
+ *
+ * It lives here rather than in `source-merge.js` because that module is
+ * executed standalone by its test and must keep importing nothing; and here
+ * rather than in one of the three apps that need it, because a copy apiece is
+ * three chances to disagree about what a merged card says.
+ *
+ * A `div` by default: the three card badges rely on `text-overflow: ellipsis`,
+ * which does nothing on an inline box. `link` gives the flat row's inline
+ * pill instead.
+ */
+export function SourceTag({ entries, cls, link = false }) {
+  const { count, name, groupId } = sourceLabel(entries);
+  if (count > 1) return html`<span class=${cls}>${t('search.n_sources', { n: count })}</span>`;
+  if (!name) return null;
+  if (link && groupId) {
+    return html`<a href="#/group/${groupId}" class=${cls}
+      onClick=${(e) => e.stopPropagation()}>${name}</a>`;
+  }
+  return html`<div class=${cls}>${name}</div>`;
+}