use-mention-sources.ts

use-mention-sources.tsapps/web/src/hooks/use-mention-sources.tsraw ← hooks2,923 B← Back to the app
1"use client";
2 
3/**
4 * useMentionSources — the R3 mention popup's data sources, scoped to one
5 * workspace (all of them are the caller's already-visible content — no extra
6 * scoping beyond the sidebar; the Security section rule).
7 *
8 *   People    — workspace members (the Phase-2 members endpoint, exists).
9 *   Teams     — the workspace's teams (the Phase-2 teams endpoint, exists).
10 *   Pages     — the page tree (the sidebar's `usePageTree`, reused — no new
11 *               endpoint; the search runs client-side over it, R3 decision).
12 *   Databases — the workspace's databases (`GET /workspaces/:wid/databases`,
13 *               the small list endpoint the R3 spec adds — already present).
14 *
15 * Each source is a TanStack query (cached — the sidebar already fetches
16 * members + the tree, so those are usually warm). The popup's fuzzy search is
17 * client-side over the fetched lists (`buildMentionGroups`), not per-keypress
18 * network.
19 */
20import { useMemo } from "react";
21import { useQuery } from "@tanstack/react-query";
22import { workspaceApi } from "@/lib/api";
23import { useWorkspaceMembers } from "@/hooks/use-workspace";
24import { usePageTree } from "@/hooks/use-pages";
25import type { MentionSource } from "@/components/mentions/mention-model";
26import type { PageTreeEntry } from "@/lib/types";
27 
28/** Flatten a (nested) page tree to the leaf entries the popup can mention. */
29function flattenPages(entries: PageTreeEntry[] | undefined): { id: string; title: string }[] {
30  const out: { id: string; title: string }[] = [];
31  const walk = (list: PageTreeEntry[] | undefined) => {
32    for (const e of list ?? []) {
33      out.push({ id: e.id, title: e.title });
34      if (e.children) walk(e.children);
35    }
36  };
37  walk(entries);
38  return out;
39}
40 
41export function useMentionSources(workspaceId: string) {
42  const enabled = workspaceId.length > 0;
43 
44  const { data: members, isLoading: loadingMembers } = useWorkspaceMembers(workspaceId);
45  const { data: tree, isLoading: loadingTree } = usePageTree(workspaceId);
46  const { data: teams, isLoading: loadingTeams } = useQuery({
47    queryKey: ["workspaces", workspaceId, "teams"],
48    queryFn: () => workspaceApi.teams(workspaceId),
49    enabled
50  });
51  const { data: databases, isLoading: loadingDatabases } = useQuery({
52    queryKey: ["workspaces", workspaceId, "databases"],
53    queryFn: () => workspaceApi.databases(workspaceId, { limit: 50 }),
54    enabled
55  });
56 
57  const source = useMemo<MentionSource>(
58    () => ({
59      people: (members ?? []).map((m) => m.user),
60      teams: (teams ?? []).map((t) => ({ id: t.id, name: t.name, memberCount: t.memberCount })),
61      pages: flattenPages(tree),
62      databases: (databases ?? []).map((d) => ({ id: d.id, title: d.title, icon: d.icon }))
63    }),
64    [members, teams, tree, databases]
65  );
66 
67  return {
68    source,
69    isLoading: loadingMembers || loadingTree || loadingTeams || loadingDatabases
70  };
71}
72