1 files changed, 22 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
new file mode 100644
index 0000000..af8879c
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-name.js
@@ -0,0 +1,22 @@
+import { html } from './vendor/htm-preact.js';
+
+/**
+ * A group's name with the `@owner` handle under it.
+ *
+ * Group names are unique only per owner account (the hub enforces that), so the
+ * `@handle` is what tells two groups called "photos" apart. `owner` is the
+ * owner's username for a local group, or the source hub for a federated one
+ * (decision 5 in ~/next/groupnames.md); the caller decides which.
+ *
+ * `inline` renders "name@owner" on one line, for places that cannot take a
+ * block — a badge, a `confirm()` string built elsewhere.
+ */
+export function GroupName({ name, owner, inline = false }) {
+  if (inline) return owner ? `${name}@${owner}` : name;
+  return html`
+    <span class="gn">
+      <span class="gn-name">${name}</span>
+      ${owner && html`<span class="gn-owner">@${owner}</span>`}
+    </span>
+  `;
+}