glossary-browser

    on("ui.render", { component: "AbovePrompt" }, async ($, e, next) => {
        const glossary = await read($, glossaryAtom);
        if (e.props.hasSurvey || glossary === null) {
            return next(e);
        }
        const { Box, Button, Text } = $.ui.resolve(e);
        const flags = await read($, flagsAtom);
        const terms = glossary.contexts.reduce((sum, context) => sum + context.terms.length, 0);
        const adrs = allAdrs(glossary).length;
        const openOn = (flag: Flag) => async () => {
            const index = glossary.contexts.findIndex((context) => context.name === flag.context);
            await select($, termId(index, flag.term));
            await update($, expandedAtom, () => contextId(index));
            await update($, filterAtom, () => "");
            await openPane($);
        };

        return (
            <Box flexDirection="column">
                <Box gap={1}>
                    <Button key="open" label="Glossary" hotkey="g" onPress={() => openPane($)} />
                    <Text dimColor wrap="truncate">
                        {glossary.contexts.map((context) => context.name).join(" · ")} — {terms} terms · {adrs} ADRs
                    </Text>
                </Box>
                {flags.length > 0 && (
                    <Box gap={1}>
                        <Text color="yellow">⚠ Term Check</Text>
                        {flags.slice(0, BAND_FLAGS).map((flag, index) => (
                            <Button
                                key={`flag-${index}`}
                                label={`'${flag.word}' → ${flag.term}`}
                                hotkey={String(index + 1)}
                                plain
                                onPress={openOn(flag)}
                            />
                        ))}
                        {flags.length > BAND_FLAGS && <Text dimColor>+{flags.length - BAND_FLAGS} more</Text>}
                        <Button
                            key="clear"
                            label="clear"
                            hotkey="x"
                            plain
                            dimColor
                            onPress={() => update($, flagsAtom, () => [])}
                        />
                    </Box>
                )}
            </Box>
        );
    });

    on("ui.render", { component: "Pane", requestId: PANE }, async ($, e) => {
        const elements = $.ui.resolve(e);
        const { Box, Button, Markdown, Text } = elements;
        const Input = "Input" in elements ? elements.Input : null;
        const glossary = await read($, glossaryAtom);
        if (glossary === null) {
            return <Text dimColor>No GLOSSARY-MAP.md or GLOSSARY.md in this project.</Text>;
        }
        const selected = await read($, selectedAtom);
        const expanded = await read($, expandedAtom);
        const filter = await read($, filterAtom);
        const flags = await read($, flagsAtom);
        const rows = rowsOf(glossary, expanded, filter);
        const room = Math.max(4, (e.viewport?.rows ?? 24) - 4);
        const pages = Math.max(1, Math.ceil(rows.length / room));
        const page = Math.min(await read($, pageAtom), pages - 1);
        const visible = rows.slice(page * room, page * room + room);
        const detail = await detailOf($, glossary, selected);
        const press = (id: string) => async () => {
            if (isGroup(id)) {
                await update($, expandedAtom, (current) => (current === id ? null : id));
                await update($, pageAtom, () => 0);
            }
            await select($, id);
        };
        const flagNote = flags.length > 0 ? `\n\n---\n\n**Term Check**: ${describeFlags(flags)}` : "";

        return (
            <Box flexDirection="row" gap={2}>
                <Box flexDirection="column" width={LIST_WIDTH} flexShrink={0}>
                    {Input !== null && (
                        <Input
                            key="filter"
                            placeholder="filter terms and ADRs"
                            value={filter}
                            submitLabel="open"
                            onInput={(value: string) =>
                                update($, filterAtom, () => value).then(() => update($, pageAtom, () => 0))
                            }
                            onSubmit={(value: string) => {
                                const first = search(glossary, value)[0];
                                return first ? select($, first.id) : undefined;
                            }}
                        />
                    )}
                    {visible.map((row, index) =>
                        row.kind === "label" ? (
                            <Text key={`label-${page}-${index}`} dimColor wrap="truncate">
                                {row.text}
                            </Text>
                        ) : (
                            <Button
                                key={row.id}
                                label={`${row.id === selected ? "›" : " "}${row.text}`}
                                plain
                                dimColor={row.id !== selected}
                                onPress={press(row.id)}
                            />
                        ),
                    )}
                    {pages > 1 && (
                        <Box gap={1}>
                            {page > 0 && (
                                <Button
                                    key="prev"
                                    label="▲ prev"
                                    plain
                                    onPress={() => update($, pageAtom, () => page - 1)}
                                />
                            )}
                            <Text dimColor>
                                {page + 1}/{pages}
                            </Text>
                            {page < pages - 1 && (
                                <Button
                                    key="next"
                                    label="▼ next"
                                    plain
                                    onPress={() => update($, pageAtom, () => page + 1)}
                                />
                            )}
                        </Box>
                    )}
                </Box>
                <Box flexDirection="column" flexGrow={1}>
                    <Markdown key="detail" text={truncate(`${detail}${flagNote}`)} />
                </Box>
            </Box>
        );
    });