@tribe-nest/forge 3.60.0 → 3.61.0

package/src/ui/styled/community/CommunityMembers.tsx

@@ -0,0 +1,387 @@
+import { useState, type CSSProperties, type MouseEvent } from "react";
+import { Globe2, List, MapPin, Search, Users } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+import {
+  DIRECTORY_LEVELS,
+  DIRECTORY_SORTS,
+  memberLocationLabel,
+  useCommunityMemberDirectory,
+  type UseCommunityMemberDirectoryOptions,
+} from "../../headless/community/useCommunityMembers";
+import { countryName } from "../../headless/community/countries";
+import { communityMemberName } from "../../../data/queries/useCommunity";
+import type {
+  CommunityDirectoryMember,
+  CommunityDirectoryRole,
+  CommunityDirectorySort,
+} from "../../../data/queries/useCommunityMembers";
+import { CallHelpHint } from "../../media/CallHelpHint";
+import { Loading } from "../Loading";
+import { CommunityMemberGlobe } from "./CommunityMemberGlobe";
+import { LevelBadge, MemberAvatar } from "./MemberAvatar";
+
+export interface CommunityMembersProps extends UseCommunityMemberDirectoryOptions {
+  /** The address of a member's profile page, for the cards' links. */
+  getProfileHref: (accountId: string) => string;
+  /** SPA navigation adapter. Defaults to a plain link. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const SORT_KEYS: Record<CommunityDirectorySort, string> = {
+  active: "forge.community_members.sort_active",
+  points: "forge.community_members.sort_points",
+  newest: "forge.community_members.sort_newest",
+  name: "forge.community_members.sort_name",
+};
+
+/**
+ * The Members tab of a community's member home: a searchable, filterable,
+ * paged directory of member cards, each opening the member's profile, and a
+ * Map view with a globe of the countries members chose to show. Members who
+ * opted out of the directory, or never opted in to the map, are left out by
+ * the server. Must sit inside `<CommunityProvider>`. Built on
+ * `useCommunityMemberDirectory`.
+ */
+export function CommunityMembers({ getProfileHref, navigate, className, style, ...options }: CommunityMembersProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const dir = useCommunityMemberDirectory(options);
+  const border = `1px solid ${t.border}`;
+
+  const control: CSSProperties = {
+    height: 36,
+    padding: "0 10px",
+    borderRadius: t.cornerRadius,
+    border,
+    background: t.background,
+    color: t.text,
+    fontFamily: "inherit",
+    fontSize: 14,
+  };
+  const toggle = (active: boolean): CSSProperties => ({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 12px",
+    border: "none",
+    borderRadius: 999,
+    cursor: "pointer",
+    fontSize: 13,
+    fontWeight: 600,
+    fontFamily: "inherit",
+    background: active ? t.primary : "transparent",
+    color: active ? t.textPrimary : t.text,
+  });
+  const pager: CSSProperties = { ...control, height: 32, cursor: "pointer" };
+
+  if (dir.forbidden) {
+    return (
+      <div
+        className={className}
+        style={{ border, borderRadius: t.cornerRadius, padding: 28, textAlign: "center", color: t.muted, ...style }}
+      >
+        {tr("forge.community_members.forbidden")}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="community-members"
+      className={className}
+      style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <div className="fg:flex fg:flex-col fg:gap-4">
+        <div className="fg:flex fg:flex-wrap fg:items-center fg:justify-between fg:gap-3">
+          <h2
+            className="fg:flex fg:items-center fg:gap-2"
+            style={{ margin: 0, fontSize: 18, fontFamily: t.headingFontFamily }}
+          >
+            <Users size={18} style={{ color: t.primary }} aria-hidden /> {tr("forge.community_members.title")}
+          </h2>
+          <div
+            role="group"
+            aria-label={tr("forge.community_members.view_label")}
+            style={{ display: "inline-flex", gap: 4, padding: 3, border, borderRadius: 999 }}
+          >
+            <button
+              type="button"
+              aria-pressed={dir.view === "list"}
+              style={toggle(dir.view === "list")}
+              onClick={() => dir.setView("list")}
+            >
+              <List size={14} aria-hidden /> {tr("forge.community_members.view_list")}
+            </button>
+            <button
+              type="button"
+              aria-pressed={dir.view === "map"}
+              style={toggle(dir.view === "map")}
+              onClick={() => dir.setView("map")}
+            >
+              <Globe2 size={14} aria-hidden /> {tr("forge.community_members.view_map")}
+            </button>
+          </div>
+        </div>
+
+        {dir.view === "map" ? (
+          <MemberMap dir={dir} />
+        ) : (
+          <>
+            <div className="fg:flex fg:flex-col fg:gap-2 fg:sm:flex-row fg:sm:flex-wrap fg:sm:items-center">
+              <label
+                className="fg:flex fg:min-w-0 fg:flex-1 fg:items-center fg:gap-2"
+                style={{ ...control, minWidth: 180 }}
+              >
+                <Search size={15} style={{ color: t.muted, flexShrink: 0 }} aria-hidden />
+                <input
+                  type="search"
+                  value={dir.search}
+                  onChange={(e) => dir.setSearch(e.target.value)}
+                  placeholder={tr("forge.community_members.search_placeholder")}
+                  aria-label={tr("forge.community_members.search_label")}
+                  maxLength={80}
+                  style={{
+                    flex: 1,
+                    minWidth: 0,
+                    border: "none",
+                    outline: "none",
+                    background: "transparent",
+                    color: t.text,
+                    fontSize: 14,
+                    fontFamily: "inherit",
+                  }}
+                />
+              </label>
+              <select
+                aria-label={tr("forge.community_members.role_label")}
+                value={dir.role ?? ""}
+                onChange={(e) => dir.setRole((e.target.value || null) as CommunityDirectoryRole | null)}
+                style={control}
+              >
+                <option value="">{tr("forge.community_members.role_any")}</option>
+                <option value="member">{tr("forge.community_members.role_member")}</option>
+                <option value="moderator">{tr("forge.community_members.role_moderator")}</option>
+              </select>
+              <select
+                aria-label={tr("forge.community_members.level_label")}
+                value={dir.minLevel ?? ""}
+                onChange={(e) => dir.setMinLevel(e.target.value ? Number(e.target.value) : null)}
+                style={control}
+              >
+                <option value="">{tr("forge.community_members.level_any")}</option>
+                {DIRECTORY_LEVELS.filter((level) => level > 1).map((level) => (
+                  <option key={level} value={level}>
+                    {tr("forge.community_members.level_min", { level })}
+                  </option>
+                ))}
+              </select>
+              <select
+                aria-label={tr("forge.community_members.sort_label")}
+                value={dir.sort}
+                onChange={(e) => dir.setSort(e.target.value as CommunityDirectorySort)}
+                style={control}
+              >
+                {DIRECTORY_SORTS.map((sort) => (
+                  <option key={sort} value={sort}>
+                    {tr(SORT_KEYS[sort])}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {dir.isLoading ? (
+              <Loading />
+            ) : dir.isError ? (
+              <p role="alert" style={{ margin: 0, fontWeight: 600 }}>
+                {tr("forge.community_members.error")}
+              </p>
+            ) : dir.members.length === 0 ? (
+              <div style={{ border, borderRadius: t.cornerRadius, padding: 28, textAlign: "center", color: t.muted }}>
+                {tr(dir.filtered ? "forge.community_members.empty_filtered" : "forge.community_members.empty")}
+              </div>
+            ) : (
+              <ul
+                className="fg:grid fg:grid-cols-1 fg:gap-3 fg:sm:grid-cols-2 fg:lg:grid-cols-3"
+                style={{ listStyle: "none", margin: 0, padding: 0, opacity: dir.isRefreshing ? 0.6 : 1 }}
+              >
+                {dir.members.map((member) => (
+                  <MemberCard
+                    key={member.accountId}
+                    member={member}
+                    href={getProfileHref(member.accountId)}
+                    navigate={navigate}
+                    locale={locale}
+                  />
+                ))}
+              </ul>
+            )}
+
+            {(dir.hasPreviousPage || dir.hasNextPage) && (
+              <div className="fg:flex fg:items-center fg:justify-center fg:gap-3">
+                <button
+                  type="button"
+                  style={{ ...pager, opacity: dir.hasPreviousPage ? 1 : 0.4 }}
+                  disabled={!dir.hasPreviousPage}
+                  onClick={dir.previousPage}
+                >
+                  {tr("forge.community_members.previous")}
+                </button>
+                <span style={{ fontSize: 12, color: t.muted }}>
+                  {tr("forge.community_members.page", { page: dir.page })}
+                </span>
+                <button
+                  type="button"
+                  style={{ ...pager, opacity: dir.hasNextPage ? 1 : 0.4 }}
+                  disabled={!dir.hasNextPage}
+                  onClick={dir.nextPage}
+                >
+                  {tr("forge.community_members.next")}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MemberCard({
+  member,
+  href,
+  navigate,
+  locale,
+}: {
+  member: CommunityDirectoryMember;
+  href: string;
+  navigate?: (href: string) => void;
+  locale: string;
+}) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const location = memberLocationLabel(member, locale);
+  const open = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (!navigate) return;
+    e.preventDefault();
+    navigate(href);
+  };
+  return (
+    <li data-testid="community-member-card">
+      <a
+        href={href}
+        onClick={open}
+        className="fg:flex fg:items-center fg:gap-3"
+        style={{
+          border: `1px solid ${t.border}`,
+          borderRadius: t.cornerRadius,
+          background: t.surface,
+          padding: "12px 14px",
+          textDecoration: "none",
+          color: t.text,
+          height: "100%",
+          boxSizing: "border-box",
+        }}
+      >
+        <MemberAvatar member={member} size={44} />
+        <span className="fg:flex fg:min-w-0 fg:flex-1 fg:flex-col" style={{ gap: 2 }}>
+          <span className="fg:flex fg:items-center fg:gap-2" style={{ minWidth: 0 }}>
+            <span
+              style={{
+                fontWeight: 700,
+                fontSize: 14,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {communityMemberName(member)}
+            </span>
+            <LevelBadge level={member.level} />
+          </span>
+          {member.role === "moderator" && (
+            <span style={{ fontSize: 10, fontWeight: 700, color: t.primary, textTransform: "uppercase" }}>
+              {tr("forge.community_members.role_badge_moderator")}
+            </span>
+          )}
+          {location && (
+            <span className="fg:flex fg:items-center fg:gap-1" style={{ fontSize: 12, color: t.muted, minWidth: 0 }}>
+              <MapPin size={12} aria-hidden style={{ flexShrink: 0 }} />
+              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{location}</span>
+            </span>
+          )}
+        </span>
+      </a>
+    </li>
+  );
+}
+
+function MemberMap({ dir }: { dir: ReturnType<typeof useCommunityMemberDirectory> }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const [unsupported, setUnsupported] = useState(false);
+
+  if (dir.mapLoading) return <Loading />;
+  if (dir.mapError) {
+    return (
+      <p role="alert" style={{ margin: 0, fontWeight: 600 }}>
+        {tr("forge.community_members.map_error")}
+      </p>
+    );
+  }
+
+  return (
+    <section data-testid="community-member-map" className="fg:flex fg:flex-col fg:items-center fg:gap-4">
+      <div className="fg:flex fg:items-center fg:gap-2" style={{ fontSize: 13, color: t.muted }}>
+        {tr("forge.community_members.map_summary", { members: dir.mapMembers, countries: dir.mapCountries.length })}
+        <CallHelpHint label={tr("forge.community_members.map_help_label")}>
+          {tr("forge.community_members.map_help")}
+        </CallHelpHint>
+      </div>
+      {dir.mapCountries.length === 0 ? (
+        <div
+          style={{
+            border: `1px solid ${t.border}`,
+            borderRadius: t.cornerRadius,
+            padding: 28,
+            textAlign: "center",
+            color: t.muted,
+            width: "100%",
+          }}
+        >
+          {tr("forge.community_members.map_empty")}
+        </div>
+      ) : (
+        <>
+          {!unsupported && dir.mapPoints.length > 0 && (
+            <CommunityMemberGlobe
+              points={dir.mapPoints}
+              label={tr("forge.community_members.globe_label")}
+              onUnsupported={() => setUnsupported(true)}
+            />
+          )}
+          <ul
+            className="fg:grid fg:w-full fg:grid-cols-1 fg:gap-1 fg:sm:grid-cols-2"
+            style={{ listStyle: "none", margin: 0, padding: 0, fontSize: 14 }}
+          >
+            {dir.mapCountries.map((country) => (
+              <li
+                key={country.countryCode}
+                data-testid="community-member-map-country"
+                className="fg:flex fg:items-center fg:justify-between fg:gap-2"
+                style={{ padding: "6px 10px", borderBottom: `1px solid ${t.border}` }}
+              >
+                <span>{countryName(country.countryCode, locale)}</span>
+                <span style={{ fontWeight: 700, color: t.primary }}>{country.members}</span>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </section>
+  );
+}