@terrafirmagreg-team/crowdin 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/crowdin",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "description": "Crowdin project members (translator avatars)",
   "license": "LGPL-3.0-only",
@@ -19,10 +19,11 @@
     "src"
   ],
   "dependencies": {
-    "@terrafirmagreg-team/data": "^1.2.5",
-    "@terrafirmagreg-team/kit": "^1.2.18",
-    "@terrafirmagreg-team/translate": "^1.2.9",
-    "@terrafirmagreg-team/ui": "^1.2.12",
+    "@crowdin/crowdin-api-client": "1.59.2",
+    "@terrafirmagreg-team/data": "^1.2.6",
+    "@terrafirmagreg-team/kit": "^1.2.19",
+    "@terrafirmagreg-team/translate": "^1.2.10",
+    "@terrafirmagreg-team/ui": "^1.2.13",
     "lucide-react": "^1.70.0",
     "server-only": "^0.0.1"
   },

package/src/components/members-grid.tsx

@@ -1,46 +1,332 @@
 'use client';
 
-import type { CrowdinMember } from '../lib/members';
+import { useMemo, useState } from 'react';
+import type { CrowdinLanguageProgress, CrowdinMember } from '../lib/members';
+import { crowdinFlagLocale } from '../lib/languages';
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
 } from '@terrafirmagreg-team/ui/components/ui/avatar';
-import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/hover-card';
+import { LangFlag } from '@terrafirmagreg-team/ui/components/blocks/lang/flag';
+import { Heading } from '@terrafirmagreg-team/ui/components/blocks/page/heading';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
-import { Users } from 'lucide-react';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import {
+  BadgeCheck,
+  Crown,
+  Globe,
+  KeyRound,
+  Languages,
+  ShieldCheck,
+  Users,
+  Wrench,
+} from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+const MAX_AVATARS = 20;
+const PODIUM_COLORS = [
+  'bg-amber-400 text-amber-950',
+  'bg-slate-300 text-slate-700',
+  'bg-amber-700 text-amber-50',
+];
+
+const ROLE_BADGE: Record<string, { icon: LucideIcon; className: string }> = {
+  owner: { icon: KeyRound, className: 'fill-amber-500' },
+  manager: { icon: ShieldCheck, className: 'fill-emerald-500' },
+  developer: { icon: Wrench, className: 'fill-violet-500' },
+  language_coordinator: { icon: Languages, className: 'fill-teal-500' },
+  proofreader: { icon: BadgeCheck, className: 'fill-sky-500' },
+};
+const BASE_ROLES = new Set([
+  'translator',
+  'proofreader',
+  'member',
+  'blocked',
+  'guest',
+]);
+
+const memberBadge = (roles: string[]) =>
+  Object.keys(ROLE_BADGE).find((r) => roles.includes(r));
+
+type LangLabel = (id: string) => string;
+
+function MemberCard({
+  member,
+  label,
+  sinceLabel,
+  isNew,
+  roleLabels,
+  langName,
+}: {
+  member: CrowdinMember;
+  label: string;
+  sinceLabel: string | null;
+  isNew: boolean;
+  roleLabels: string[];
+  langName: LangLabel;
+}) {
+  const t = useTranslations();
+  return (
+    <div className="flex gap-3">
+      <Avatar className="size-11 shrink-0">
+        <AvatarImage src={member.avatarUrl} alt="" />
+        <AvatarFallback>
+          {member.username.slice(0, 1).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <div className="min-w-0">
+        <p className="truncate text-sm font-medium">
+          {member.fullName ?? member.username}
+          {isNew && (
+            <span className="ml-1.5 rounded-full bg-emerald-500/15 px-1.5 py-0.5 align-middle text-[10px] font-medium text-emerald-600 dark:text-emerald-400">
+              {t('new', { note: 'crowdin.new' })}
+            </span>
+          )}
+        </p>
+        <p className="truncate text-xs text-muted-foreground">
+          @{member.username}
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {label}
+          {sinceLabel && ` · ${sinceLabel}`}
+        </p>
+        {roleLabels.length > 0 && (
+          <p className="mt-0.5 truncate text-xs font-medium text-muted-foreground">
+            {roleLabels.join(' · ')}
+          </p>
+        )}
+        {member.languages.length > 0 && (
+          <p className="mt-0.5 truncate text-xs text-muted-foreground/80">
+            {member.languages.map((l) => langName(l.id)).join(', ')}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MemberAvatar({
+  member,
+  label,
+  sinceLabel,
+  isNew,
+  roleLabels,
+  langName,
+  top,
+}: {
+  member: CrowdinMember;
+  label: string;
+  sinceLabel: string | null;
+  isNew: boolean;
+  roleLabels: string[];
+  langName: LangLabel;
+  top?: boolean;
+}) {
+  const badge = memberBadge(member.roles);
+  const BadgeIcon = badge ? ROLE_BADGE[badge].icon : undefined;
+  return (
+    <HoverCard>
+      <HoverCardTrigger
+        render={
+          <a
+            href={`https://crowdin.com/profile/${member.username}`}
+            target="_blank"
+            rel="noreferrer noopener"
+            className="relative block"
+          />
+        }
+      >
+        <Avatar>
+          <AvatarImage
+            src={member.avatarUrl}
+            alt={member.fullName ?? member.username}
+          />
+          <AvatarFallback>
+            {member.username.slice(0, 1).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+        {top && (
+          <Crown className="absolute -top-1.5 -right-1 size-3.5 fill-amber-500 text-amber-500 drop-shadow" />
+        )}
+        {BadgeIcon && badge && (
+          <BadgeIcon
+            className={`absolute -bottom-1 -right-1 size-3.5 text-background ${ROLE_BADGE[badge].className}`}
+          />
+        )}
+      </HoverCardTrigger>
+      <HoverCardContent collisionPadding={8}>
+        <MemberCard
+          member={member}
+          label={label}
+          sinceLabel={sinceLabel}
+          isNew={isNew}
+          roleLabels={roleLabels}
+          langName={langName}
+        />
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
 
 export function MembersGrid({
   url,
   members,
+  progress,
+  languages,
 }: {
   url: string;
   members: CrowdinMember[];
+  progress?: Record<string, CrowdinLanguageProgress>;
+  languages?: readonly string[];
 }) {
   const t = useTranslations();
+  const lang = useResolvedLang();
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
+
+  const langName = useMemo<LangLabel>(() => {
+    const displayNames = new Intl.DisplayNames([lang.replace(/_/g, '-')], {
+      type: 'language',
+    });
+    return (id) => {
+      try {
+        return displayNames.of(id) ?? id;
+      } catch {
+        return id;
+      }
+    };
+  }, [lang]);
+
+  const groups = useMemo(() => {
+    const byLang = new Map<
+      string,
+      { id: string; name: string; members: CrowdinMember[] }
+    >();
+    for (const m of members)
+      for (const l of m.languages) {
+        const group = byLang.get(l.id) ?? {
+          id: l.id,
+          name: langName(l.id) || l.name,
+          members: [],
+        };
+        group.members.push(m);
+        byLang.set(l.id, group);
+      }
+    const allowed = languages?.length
+      ? new Set(languages.map((code) => code.toLowerCase()))
+      : undefined;
+    return [...byLang.values()]
+      .filter(
+        (g) => !allowed || allowed.has(crowdinFlagLocale(g.id).toLowerCase()),
+      )
+      .sort((a, b) => {
+      const pa = progress?.[a.id];
+      const pb = progress?.[b.id];
+      const diff =
+        (pb?.translation ?? -1) - (pa?.translation ?? -1) ||
+        (pb?.approval ?? -1) - (pa?.approval ?? -1) ||
+        b.members.length - a.members.length;
+      return diff || a.name.localeCompare(b.name);
+      });
+  }, [members, progress, langName, languages]);
+
+  const totalWords = useMemo(
+    () =>
+      Object.values(progress ?? {}).reduce(
+        (sum, p) => sum + p.words,
+        members.reduce((sum, m) => sum + m.translated + m.approved, 0),
+      ),
+    [progress, members],
+  );
+
+  const compact = new Intl.NumberFormat(lang.replace(/_/g, '-'), {
+    notation: 'compact',
+  });
+
+  const memberLabel = (m: CrowdinMember) =>
+    t('{words} words', {
+      note: 'crowdin.words',
+      variables: { words: (m.translated + m.approved).toLocaleString() },
+    });
+  const memberSince = (m: CrowdinMember) =>
+    m.joinedAt
+      ? t('since {year}', {
+          note: 'crowdin.since',
+          variables: { year: String(new Date(m.joinedAt).getFullYear()) },
+        })
+      : null;
+  const memberIsNew = (m: CrowdinMember) => m.isNew;
+  const roleLabels = (m: CrowdinMember) =>
+    m.roles
+      .filter((r) => !BASE_ROLES.has(r))
+      .map((r) => {
+        switch (r) {
+          case 'owner':
+            return t('Owner', { note: 'crowdin.role.owner' });
+          case 'manager':
+            return t('Manager', { note: 'crowdin.role.manager' });
+          case 'developer':
+            return t('Developer', { note: 'crowdin.role.developer' });
+          case 'language_coordinator':
+            return t('Coordinator', { note: 'crowdin.role.coordinator' });
+          case 'proofreader':
+            return t('Proofreader', { note: 'crowdin.role.proofreader' });
+          default:
+            return r;
+        }
+      });
+
+  const podium = members.slice(0, 3);
+
   return (
     <section className="not-prose mt-8 border-t pt-6">
-      <h2 className="mb-4 flex items-center gap-2 text-sm font-medium text-muted-foreground">
-        <Users className="size-4" />
+      <Heading
+        as="h2"
+        id="translators"
+        className="mb-3 text-2xl font-[650] tracking-tight"
+      >
         <a
           href={url}
           target="_blank"
           rel="noreferrer noopener"
-          className="hover:text-foreground hover:underline"
+          className="hover:underline"
         >
           {t('Translators', { note: 'crowdin.translators' })}
-        </a>
-      </h2>
-      <ul className="flex flex-wrap gap-1.5">
-        {members.map((m) => (
-          <li key={m.username}>
-            <Hint label={m.fullName ?? m.username}>
-              <a
-                href={`https://crowdin.com/profile/${m.username}`}
-                target="_blank"
-                rel="noreferrer noopener"
-              >
-                <Avatar>
+        </a>{' '}
+        <span className="inline-flex items-center gap-1.5 align-middle text-base font-normal text-muted-foreground">
+          {members.length}
+          <Users className="size-4" />
+          {groups.length > 0 &&
+            `· ${t('{count} languages', {
+              note: 'crowdin.languages',
+              variables: { count: String(groups.length) },
+            })}`}
+          {totalWords > 0 &&
+            ` · ${t('{words} words', {
+              note: 'crowdin.words',
+              variables: { words: compact.format(totalWords) },
+            })}`}
+        </span>
+      </Heading>
+      {podium.length >= 3 && (
+        <div className="mb-6 flex items-end justify-center gap-5">
+          {podium.map((m, i) => (
+            <a
+              key={m.username}
+              href={`https://crowdin.com/profile/${m.username}`}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="group flex flex-col items-center gap-1.5"
+            >
+              <span className="relative">
+                <Avatar
+                  className={i === 0 ? 'size-14' : 'size-11'}
+                >
                   <AvatarImage
                     src={m.avatarUrl}
                     alt={m.fullName ?? m.username}
@@ -49,11 +335,161 @@ export function MembersGrid({
                     {m.username.slice(0, 1).toUpperCase()}
                   </AvatarFallback>
                 </Avatar>
-              </a>
-            </Hint>
-          </li>
+                <span
+                  className={`absolute -right-1 -bottom-1 flex size-5 items-center justify-center rounded-full text-[10px] font-bold ${PODIUM_COLORS[i]}`}
+                >
+                  {i + 1}
+                </span>
+              </span>
+              <span className="max-w-24 truncate text-xs font-medium group-hover:underline">
+                {m.fullName ?? m.username}
+              </span>
+              <span className="-mt-1 text-[10px] text-muted-foreground">
+                {compact.format(m.translated + m.approved)}
+              </span>
+            </a>
+          ))}
+        </div>
+      )}
+      {groups.length === 0 ? (
+        <ul className="flex flex-wrap gap-1.5">
+          {members.map((m) => (
+            <li key={m.username}>
+              <MemberAvatar
+                member={m}
+                label={memberLabel(m)}
+                sinceLabel={memberSince(m)}
+                isNew={memberIsNew(m)}
+                roleLabels={roleLabels(m)}
+                langName={langName}
+              />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <div className="space-y-5">
+          {groups.map((group) => {
+            const p = progress?.[group.id];
+            const hidden =
+              group.members.length > MAX_AVATARS && !expanded.has(group.id)
+                ? group.members.length - MAX_AVATARS
+                : 0;
+            const shown = hidden
+              ? group.members.slice(0, MAX_AVATARS)
+              : group.members;
+            return (
+              <div key={group.id}>
+                <h3 className="mb-2 flex flex-wrap items-center gap-2 text-xs font-medium text-muted-foreground">
+                  <LangFlag locale={crowdinFlagLocale(group.id)} />
+                  <a
+                    href={`${url}/${group.id}`}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    className="min-w-0 text-foreground hover:underline"
+                  >
+                    {group.name}
+                  </a>
+                  <span>{group.members.length}</span>
+                  {p && (
+                    <span className="ml-auto flex items-center gap-2">
+                      <span
+                        className="flex h-1.5 w-24 overflow-hidden rounded-full bg-foreground/15"
+                        title={`${p.translation}% · ${t('{pct}% approved', {
+                          note: 'crowdin.approved',
+                          variables: { pct: String(p.approval) },
+                        })}`}
+                      >
+                        <span
+                          className="h-full bg-primary"
+                          style={{ width: `${p.approval}%` }}
+                        />
+                        <span
+                          className="h-full bg-primary/40"
+                          style={{
+                            width: `${Math.max(p.translation - p.approval, 0)}%`,
+                          }}
+                        />
+                      </span>
+                      <span className="w-9 text-right tabular-nums">
+                        {p.translation}%
+                      </span>
+                    </span>
+                  )}
+                </h3>
+                <ul className="flex flex-wrap gap-1.5">
+                  {shown.map((m, i) => (
+                    <li key={m.username}>
+                      <MemberAvatar
+                        member={m}
+                        label={memberLabel(m)}
+                        sinceLabel={memberSince(m)}
+                        isNew={memberIsNew(m)}
+                        roleLabels={roleLabels(m)}
+                        langName={langName}
+                        top={i === 0}
+                      />
+                    </li>
+                  ))}
+                  {hidden > 0 && (
+                    <li>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setExpanded((prev) => new Set(prev).add(group.id))
+                        }
+                        className="flex size-8 cursor-pointer items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                      >
+                        +{hidden}
+                      </button>
+                    </li>
+                  )}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer noopener"
+        className="mt-6 inline-flex items-center gap-2 rounded-full border border-border px-3.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+      >
+        <Globe className="size-3.5" />
+        {t('Help translate', { note: 'crowdin.join' })}
+      </a>
+    </section>
+  );
+}
+
+export function MembersSkeleton() {
+  return (
+    <section className="not-prose mt-8 animate-pulse border-t pt-6">
+      <div className="mb-4 h-4 w-48 rounded bg-muted" />
+      <div className="mb-6 flex items-end gap-5">
+        {[14, 11, 11].map((s, i) => (
+          <div key={i} className="flex flex-col items-center gap-1.5">
+            <div
+              className="rounded-full bg-muted"
+              style={{ width: s * 4, height: s * 4 }}
+            />
+            <div className="h-3 w-16 rounded bg-muted" />
+          </div>
         ))}
-      </ul>
+      </div>
+      {[0, 1, 2, 3].map((row) => (
+        <div key={row} className="mb-5">
+          <div className="mb-2 flex items-center gap-2">
+            <div className="size-4 rounded bg-muted" />
+            <div className="h-3 w-24 rounded bg-muted" />
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {Array.from({ length: 8 - row }).map((_, i) => (
+              <div key={i} className="size-8 rounded-full bg-muted" />
+            ))}
+          </div>
+        </div>
+      ))}
     </section>
   );
 }

package/src/components/members.tsx

@@ -1,16 +1,44 @@
 import 'server-only';
+import { Suspense } from 'react';
 import { sectionConfig } from '@terrafirmagreg-team/kit/lib/config';
 import type { SectionPageContext } from '@terrafirmagreg-team/kit/types/features';
-import { crowdinMembers, crowdinProjectSlug } from '../lib/members';
-import { MembersGrid } from './members-grid';
+import {
+  crowdinMembers,
+  crowdinProgress,
+  crowdinProjectSlug,
+} from '../lib/members';
+import { MembersGrid, MembersSkeleton } from './members-grid';
 
-export async function CrowdinMembers({ ctx }: { ctx: SectionPageContext }) {
-  const url =
+async function CrowdinMembersList({ ctx }: { ctx: SectionPageContext }) {
+  const crowdin =
     ctx.datasetId && ctx.page.slugs.length === 2
       ? sectionConfig().datasetConfig[ctx.datasetId]?.crowdin
       : undefined;
-  const slug = crowdinProjectSlug(url);
-  const members = slug ? await crowdinMembers(slug) : undefined;
-  if (!url || !members?.length) return null;
-  return <MembersGrid url={url} members={members} />;
+  const slug = crowdinProjectSlug(crowdin?.url);
+  const [members, progress] = slug
+    ? await Promise.all([
+        crowdinMembers(slug, {
+          excludeUsers: crowdin?.excludeUsers,
+          minWords: crowdin?.minWords,
+        }),
+        crowdinProgress(slug),
+      ])
+    : [undefined, undefined];
+  if (!crowdin?.url || !members?.length) return null;
+  return (
+    <MembersGrid
+      url={crowdin.url}
+      members={members}
+      progress={progress}
+      languages={sectionConfig().languages}
+    />
+  );
+}
+
+export function CrowdinMembers({ ctx }: { ctx: SectionPageContext }) {
+  return (
+    <Suspense fallback={<MembersSkeleton />}>
+      <CrowdinMembersList ctx={ctx} />
+    </Suspense>
+  );
 }

package/src/lib/languages.ts

@@ -0,0 +1,31 @@
+const LANG_REGION: Record<string, string> = {
+  af: 'za',
+  ar: 'sa',
+  ca: 'es',
+  cs: 'cz',
+  da: 'dk',
+  el: 'gr',
+  et: 'ee',
+  eu: 'es',
+  fa: 'ir',
+  he: 'il',
+  hi: 'in',
+  hy: 'am',
+  ja: 'jp',
+  ka: 'ge',
+  ko: 'kr',
+  ms: 'my',
+  sl: 'si',
+  sq: 'al',
+  sr: 'rs',
+  sv: 'se',
+  uk: 'ua',
+  vi: 'vn',
+  zh: 'cn',
+};
+
+export function crowdinFlagLocale(id: string): string {
+  const [primary, region] = id.split('-');
+  const flag = region ?? LANG_REGION[primary!] ?? primary;
+  return `${primary}_${flag}`;
+}

package/src/lib/members.ts

@@ -1,51 +1,230 @@
 import 'server-only';
+import { Client } from '@crowdin/crowdin-api-client';
 import { createAsyncCache } from '@terrafirmagreg-team/data/lib/async-cache';
+import { env, featureMode } from '@terrafirmagreg-team/data/lib/env';
+import { persistentCache } from '@terrafirmagreg-team/data/lib/persistent-cache';
 
 const CROWDIN_ORG = 'terrafirmagreg';
-const API = `https://${CROWDIN_ORG}.api.crowdin.com/api/v2`;
-const PAGE_SIZE = 500;
+const REPORT_POLL_MS = 1500;
+const REPORT_ATTEMPTS = 40;
+const PERSIST_TTL = 24 * 3_600_000;
+
+export type CrowdinLanguage = { id: string; name: string };
 
 export type CrowdinMember = {
   username: string;
   fullName: string | null;
   avatarUrl: string;
-  roles?: { name: string }[];
+  translated: number;
+  approved: number;
+  languages: CrowdinLanguage[];
+  roles: string[];
+  joinedAt: number | null;
+  isNew: boolean;
+};
+
+const NEW_MEMBER_MS = 90 * 86_400_000;
+
+const joined = (raw: string | null | undefined) => {
+  const at = raw ? Date.parse(`${raw.replace(' ', 'T')}Z`) : NaN;
+  return Number.isNaN(at) ? { joinedAt: null, isNew: false } : {
+    joinedAt: at,
+    isNew: Date.now() - at < NEW_MEMBER_MS,
+  };
+};
+
+type ReportRow = {
+  user: {
+    id: number;
+    username: string;
+    fullName?: string | null;
+    firstName?: string | null;
+    lastName?: string | null;
+    avatarUrl?: string | null;
+    joined?: string | null;
+  };
+  translated: number | string;
+  approved: number | string;
+  languages?: CrowdinLanguage[];
+};
+
+export type CrowdinMembersOptions = {
+  excludeUsers?: readonly string[];
+  minWords?: number;
+};
+
+export type CrowdinLanguageProgress = {
+  languageId: string;
+  translation: number;
+  approval: number;
+  words: number;
+  total: number;
+};
+
+const client = () => {
+  const token = env('CROWDIN_API_TOKEN');
+  return token ? new Client({ token, organization: CROWDIN_ORG }) : undefined;
 };
 
-async function api<T>(path: string): Promise<T | undefined> {
-  const token = process.env.CROWDIN_API_TOKEN;
-  if (!token) return undefined;
-  const res = await fetch(`${API}${path}`, {
-    headers: { Authorization: `Bearer ${token}` },
-    next: { revalidate: 3600 },
-  } as RequestInit);
-  if (!res.ok) return undefined;
-  return (await res.json()) as T;
+const projectId = createAsyncCache(async (slug: string) => {
+  const api = client()?.projectsGroupsApi.withFetchAll();
+  const res = await api?.listProjects().catch(() => undefined);
+  const name = slug.toLowerCase();
+  return res?.data.find(
+    (p) => p.data.identifier === slug || p.data.name.toLowerCase() === name,
+  )?.data.id;
+});
+
+async function topMembers(api: Client, id: number) {
+  const report = await api.reportsApi.generateReport(id, {
+    name: 'top-members',
+    schema: { unit: 'words', format: 'json' },
+  });
+  const reportId = report.data.identifier;
+  for (let i = 0; i < REPORT_ATTEMPTS; i++) {
+    const status = await api.reportsApi.checkReportStatus(id, reportId);
+    if (status.data.status === 'finished') {
+      const link = await api.reportsApi.downloadReport(id, reportId);
+      const res = await fetch(link.data.url);
+      if (!res.ok) return undefined;
+      return ((await res.json()) as { data?: ReportRow[] }).data;
+    }
+    if (!['created', 'in_progress', 'in-progress'].includes(status.data.status))
+      return undefined;
+    await new Promise((resolve) => setTimeout(resolve, REPORT_POLL_MS));
+  }
+  return undefined;
 }
 
-const projectId = createAsyncCache(async (identifier: string) => {
-  const res = await api<{
-    data: { data: { id: number; identifier: string } }[];
-  }>(`/projects?limit=${PAGE_SIZE}`);
-  return res?.data.find((p) => p.data.identifier === identifier)?.data.id;
+const projectRoles = createAsyncCache(async (slug: string) => {
+  const api = client()?.usersApi.withFetchAll();
+  const id = api ? await projectId(slug) : undefined;
+  const map = new Map<string, string[]>();
+  if (!api || id === undefined) return map;
+  const res = await api.listProjectMembers(id).catch(() => undefined);
+  for (const { data: m } of res?.data ?? [])
+    map.set(
+      m.username,
+      (m.roles ?? []).map((r) => r.name),
+    );
+  return map;
 });
 
+const STUB_LANGS: CrowdinLanguage[] = [
+  { id: 'ru', name: 'Russian' },
+  { id: 'pl', name: 'Polish' },
+  { id: 'de', name: 'German' },
+];
+
+export const crowdinProgress = createAsyncCache(
+  async (
+    slug: string,
+  ): Promise<Record<string, CrowdinLanguageProgress> | undefined> => {
+    const mode = featureMode('CROWDIN');
+    if (mode === 'off') return undefined;
+    const api = client();
+    const id = api ? await projectId(slug) : undefined;
+    if (!api || id === undefined) {
+      if (mode !== 'dev') return undefined;
+      const out: Record<string, CrowdinLanguageProgress> = {};
+      STUB_LANGS.forEach((l, i) => {
+        out[l.id] = {
+          languageId: l.id,
+          translation: 70 - i * 20,
+          approval: 40 - i * 15,
+          words: 5000 - i * 1500,
+          total: 10000,
+        };
+      });
+      return out;
+    }
+    return persistentCache(`crowdin-progress:${slug}`, PERSIST_TTL, async () => {
+      const res = await api.translationStatusApi
+        .withFetchAll()
+        .getProjectProgress(id)
+        .catch(() => undefined);
+      const out: Record<string, CrowdinLanguageProgress> = {};
+      for (const { data: p } of res?.data ?? [])
+        out[p.languageId] = {
+          languageId: p.languageId,
+          translation: p.translationProgress,
+          approval: p.approvalProgress,
+          words: p.words.translated,
+          total: p.words.total,
+        };
+      return out;
+    });
+  },
+  (slug) => slug,
+  3_600_000,
+);
+
+const stubMembers = (count = 14): CrowdinMember[] =>
+  Array.from({ length: count }, (_, i) => ({
+    username: `translator-${i + 1}`,
+    fullName: `Translator ${i + 1}`,
+    avatarUrl: '',
+    translated: 0,
+    approved: 0,
+    languages: STUB_LANGS.slice(0, (i % STUB_LANGS.length) + 1),
+    roles: i === 0 ? ['manager'] : i === 1 ? ['developer'] : ['translator'],
+    ...joined(
+      new Date(Date.now() - (i * 30 + 10) * 86_400_000)
+        .toISOString()
+        .replace('T', ' ')
+        .slice(0, 19),
+    ),
+  }));
+
 export const crowdinMembers = createAsyncCache(
-  async (identifier: string): Promise<CrowdinMember[] | undefined> => {
-    const id = await projectId(identifier);
-    if (id === undefined) return undefined;
-    const members: CrowdinMember[] = [];
-    for (let offset = 0; ; offset += PAGE_SIZE) {
-      const res = await api<{ data: { data: CrowdinMember }[] }>(
-        `/projects/${id}/members?limit=${PAGE_SIZE}&offset=${offset}`,
+  async (
+    slug: string,
+    options?: CrowdinMembersOptions,
+  ): Promise<CrowdinMember[] | undefined> => {
+    const mode = featureMode('CROWDIN');
+    if (mode === 'off') return undefined;
+    const api = client();
+    const id = api ? await projectId(slug) : undefined;
+    if (!api || id === undefined)
+      return mode === 'dev' ? stubMembers() : undefined;
+    const persistKey = `crowdin-members:${slug}:${options?.minWords ?? ''}:${[
+      ...(options?.excludeUsers ?? []),
+    ]
+      .sort()
+      .join(',')}`;
+    return persistentCache(persistKey, PERSIST_TTL, async () => {
+      const [rows, roles] = await Promise.all([
+        topMembers(api, id).catch(() => undefined),
+        projectRoles(slug),
+      ]);
+      if (!rows) return undefined;
+      const min = options?.minWords ?? 100;
+      const excluded = new Set(
+        options?.excludeUsers?.map((u) => u.toLowerCase()) ?? [],
       );
-      const batch = res?.data ?? [];
-      members.push(...batch.map((m) => m.data));
-      if (batch.length < PAGE_SIZE) break;
-    }
-    return members;
+      return rows
+        .filter((r) => r.user.username !== 'REMOVED_USER')
+        .filter((r) => !excluded.has(r.user.username.toLowerCase()))
+        .filter((r) => Number(r.translated) + Number(r.approved) >= min)
+        .map((r) => ({
+          username: r.user.username,
+          fullName:
+            r.user.fullName ??
+            ([r.user.firstName, r.user.lastName].filter(Boolean).join(' ') ||
+              null),
+          avatarUrl: r.user.avatarUrl ?? '',
+          translated: Number(r.translated),
+          approved: Number(r.approved),
+          languages: r.languages ?? [],
+          roles: roles.get(r.user.username) ?? [],
+          ...joined(r.user.joined),
+        }));
+    });
   },
-  (id) => id,
+  (slug, options) =>
+    `${slug}|${options?.minWords ?? ''}|${[...(options?.excludeUsers ?? [])]
+      .sort()
+      .join(',')}`,
   3_600_000,
 );