trelly 0.1.0

package/src/cli/ui/app.tsx

@@ -0,0 +1,753 @@
+import { Box, Text, useApp, useInput, useStdout } from "ink";
+import { useCallback, useEffect, useState } from "react";
+import type { TrelloClient } from "../../api/client.ts";
+import {
+  type CardChip,
+  customFieldChips,
+  toCustomFieldDefs,
+  type UiCustomFieldDef,
+  type UiCustomFieldItem,
+} from "./custom-fields.ts";
+import {
+  dueHex,
+  dueStatus,
+  formatDue,
+  labelHex,
+  listAccentHex,
+  TRELLO_BLUE,
+} from "./palette.ts";
+
+export type UiLabel = { id: string; name: string; color: string | null };
+
+export type UiCard = {
+  id: string;
+  name: string;
+  desc: string;
+  due: string | null;
+  start?: string | null;
+  dueComplete: boolean;
+  idList: string;
+  idMembers?: string[];
+  pos: number;
+  shortUrl: string;
+  labels: UiLabel[];
+  badges?: {
+    checkItems?: number;
+    checkItemsChecked?: number;
+    comments?: number;
+    attachments?: number;
+  };
+  customFieldItems?: UiCustomFieldItem[];
+};
+
+export type UiList = { id: string; name: string; color?: string | null };
+
+type BoardData = {
+  name: string;
+  lists: UiList[];
+  cardsByList: Map<string, UiCard[]>;
+  customFields: UiCustomFieldDef[];
+  membersById: Map<string, string>;
+};
+
+type CardExtras = {
+  attachments: Array<{ id: string; name: string }>;
+  checklists: Array<{
+    id: string;
+    name: string;
+    items: Array<{ id: string; name: string; complete: boolean }>;
+  }>;
+  comments: Array<{ id: string; author: string; date: string; text: string }>;
+  error?: string;
+};
+
+const COL_WIDTH = 30;
+
+function truncate(text: string, width: number): string {
+  return text.length <= width ? text : `${text.slice(0, Math.max(0, width - 1))}…`;
+}
+
+function truncateLines(text: string, maxLines: number): string {
+  const lines = text.split("\n");
+  if (lines.length <= maxLines) return text;
+  return `${lines.slice(0, maxLines).join("\n")}\n…`;
+}
+
+function CardBadges({ card }: { card: UiCard }) {
+  const status = dueStatus(card.due, card.dueComplete);
+  const checkItems = card.badges?.checkItems ?? 0;
+  const checked = card.badges?.checkItemsChecked ?? 0;
+  const comments = card.badges?.comments ?? 0;
+  const attachments = card.badges?.attachments ?? 0;
+  return (
+    <Text wrap="truncate">
+      {card.labels.map((label) => (
+        <Text key={label.id} color={labelHex(label.color)}>
+          ●{" "}
+        </Text>
+      ))}
+      {card.due ? (
+        <Text color={dueHex(status)} dimColor={status === "later"}>
+          {formatDue(card.due)}
+          {status === "complete" ? " ✓" : ""}{" "}
+        </Text>
+      ) : null}
+      {checkItems > 0 ? (
+        <Text dimColor>
+          ✓{checked}/{checkItems}{" "}
+        </Text>
+      ) : null}
+      {card.desc ? <Text dimColor>≡ </Text> : null}
+      {comments > 0 ? <Text dimColor>💬{comments} </Text> : null}
+      {attachments > 0 ? <Text dimColor>📎{attachments}</Text> : null}
+    </Text>
+  );
+}
+
+function ChipRow({ chips }: { chips: CardChip[] }) {
+  return (
+    <Text wrap="truncate">
+      {chips.map((chip) => (
+        <Text key={chip.id}>
+          <Text
+            backgroundColor={chip.color ? labelHex(chip.color) : undefined}
+            color={chip.color ? "#1d2125" : undefined}
+            dimColor={!chip.color}
+          >
+            {` ${chip.label} `}
+          </Text>{" "}
+        </Text>
+      ))}
+    </Text>
+  );
+}
+
+function CardBox({
+  card,
+  focused,
+  width,
+  accent,
+  height,
+  frontFields,
+}: {
+  card: UiCard;
+  focused: boolean;
+  width: number;
+  accent: string;
+  height: number;
+  frontFields: UiCustomFieldDef[];
+}) {
+  const complete = card.dueComplete === true;
+  const chips =
+    frontFields.length > 0 ? customFieldChips(frontFields, card.customFieldItems) : [];
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={focused ? accent : "gray"}
+      width={width}
+      height={height}
+      paddingX={1}
+    >
+      <Text bold={focused} wrap="truncate">
+        {complete ? <Text color="#61bd4f">✓ </Text> : null}
+        {truncate(card.name, width - 4 - (complete ? 2 : 0))}
+      </Text>
+      <CardBadges card={card} />
+      {height >= 5 ? <ChipRow chips={chips} /> : null}
+    </Box>
+  );
+}
+
+function Column({
+  list,
+  cards,
+  focused,
+  focusedRow,
+  width,
+  maxCards,
+  cardHeight,
+  frontFields,
+}: {
+  list: UiList;
+  cards: UiCard[];
+  focused: boolean;
+  focusedRow: number | null;
+  width: number;
+  maxCards: number;
+  cardHeight: number;
+  frontFields: UiCustomFieldDef[];
+}) {
+  const total = cards.length;
+  const accent = listAccentHex(list.color);
+  let start = 0;
+  if (focusedRow !== null && focusedRow >= maxCards) {
+    start = focusedRow - maxCards + 1;
+  }
+  const visible = cards.slice(start, start + maxCards);
+  const below = total - (start + visible.length);
+  return (
+    <Box flexDirection="column" width={width} marginRight={1}>
+      {focused ? (
+        <Text backgroundColor={accent} color="#1d2125" bold wrap="truncate">
+          {` ${truncate(list.name, width - 8)} (${total}) `}
+        </Text>
+      ) : (
+        <Text bold color={accent} wrap="truncate">
+          {truncate(list.name, width - 6)} <Text dimColor>({total})</Text>
+        </Text>
+      )}
+      {start > 0 ? <Text dimColor> ↑ {start} more</Text> : null}
+      {visible.map((card, i) => (
+        <CardBox
+          key={card.id}
+          card={card}
+          width={width - 1}
+          focused={focusedRow === start + i}
+          accent={accent}
+          height={cardHeight}
+          frontFields={frontFields}
+        />
+      ))}
+      {total === 0 ? <Text dimColor> (empty)</Text> : null}
+      {below > 0 ? <Text dimColor> ↓ {below} more</Text> : null}
+    </Box>
+  );
+}
+
+function CardDetail({
+  card,
+  listName,
+  width,
+  defs,
+  membersById,
+  extras,
+}: {
+  card: UiCard;
+  listName: string;
+  width: number;
+  defs: UiCustomFieldDef[];
+  membersById: Map<string, string>;
+  extras?: CardExtras;
+}) {
+  const status = dueStatus(card.due, card.dueComplete);
+  const checkItems = card.badges?.checkItems ?? 0;
+  const checked = card.badges?.checkItemsChecked ?? 0;
+  const complete = card.dueComplete === true;
+  const chips = customFieldChips(defs, card.customFieldItems);
+  const memberNames = (card.idMembers ?? [])
+    .map((id) => membersById.get(id))
+    .filter((name): name is string => Boolean(name));
+  return (
+    <Box flexDirection="column" paddingX={1} width={Math.min(width, 82)}>
+      <Text bold wrap="truncate">
+        {complete ? <Text color="#61bd4f">✓ </Text> : null}
+        {card.name}
+      </Text>
+      <Text dimColor wrap="truncate">
+        in {listName} · {card.shortUrl}
+      </Text>
+      {memberNames.length > 0 ? (
+        <Text wrap="truncate">
+          <Text dimColor>members: </Text>
+          <Text color={TRELLO_BLUE}>
+            {memberNames.map((name) => `@${name}`).join(" ")}
+          </Text>
+        </Text>
+      ) : null}
+      {card.labels.length > 0 ? (
+        <Box marginTop={1} gap={1}>
+          {card.labels.map((label) => (
+            <Text
+              key={label.id}
+              backgroundColor={labelHex(label.color)}
+              color="#1d2125"
+            >
+              {` ${label.name || label.color || "label"} `}
+            </Text>
+          ))}
+        </Box>
+      ) : null}
+      {card.due || card.start ? (
+        <Box marginTop={1}>
+          {card.start ? <Text dimColor>start {formatDue(card.start)} </Text> : null}
+          {card.due ? (
+            <Text color={dueHex(status)}>
+              due {formatDue(card.due)}
+              {status === "complete" ? " ✓" : status === "overdue" ? " (overdue)" : ""}
+            </Text>
+          ) : null}
+        </Box>
+      ) : null}
+      {chips.length > 0 ? (
+        <Box marginTop={1}>
+          <ChipRow chips={chips} />
+        </Box>
+      ) : null}
+      {card.desc ? (
+        <Box marginTop={1}>
+          <Text>{truncateLines(card.desc, 10)}</Text>
+        </Box>
+      ) : null}
+      {!extras ? (
+        <Box marginTop={1}>
+          <Text dimColor>
+            loading details…
+            {checkItems > 0 ? ` (checklist ${checked}/${checkItems})` : ""}
+          </Text>
+        </Box>
+      ) : (
+        <>
+          {extras.error ? <Text color="#eb5a46">{extras.error}</Text> : null}
+          {extras.checklists.map((checklist) => (
+            <Box key={checklist.id} flexDirection="column" marginTop={1}>
+              <Text bold>{checklist.name}</Text>
+              {checklist.items.slice(0, 6).map((item) => (
+                <Text key={item.id} wrap="truncate">
+                  {item.complete ? <Text color="#61bd4f">☑ </Text> : "☐ "}
+                  <Text dimColor={item.complete} strikethrough={item.complete}>
+                    {item.name}
+                  </Text>
+                </Text>
+              ))}
+              {checklist.items.length > 6 ? (
+                <Text dimColor>… {checklist.items.length - 6} more</Text>
+              ) : null}
+            </Box>
+          ))}
+          {extras.attachments.length > 0 ? (
+            <Box flexDirection="column" marginTop={1}>
+              <Text bold>📎 {extras.attachments.length} attachments</Text>
+              {extras.attachments.slice(0, 4).map((attachment) => (
+                <Text key={attachment.id} dimColor wrap="truncate">
+                  {attachment.name}
+                </Text>
+              ))}
+              {extras.attachments.length > 4 ? (
+                <Text dimColor>… {extras.attachments.length - 4} more</Text>
+              ) : null}
+            </Box>
+          ) : null}
+          {extras.comments.length > 0 ? (
+            <Box flexDirection="column" marginTop={1}>
+              <Text bold>💬 comments</Text>
+              {extras.comments.slice(0, 3).map((comment) => (
+                <Box key={comment.id} flexDirection="column">
+                  <Text dimColor wrap="truncate">
+                    {comment.author} · {comment.date.slice(0, 16).replace("T", " ")}
+                  </Text>
+                  <Text wrap="truncate-end">{truncateLines(comment.text, 2)}</Text>
+                </Box>
+              ))}
+            </Box>
+          ) : null}
+        </>
+      )}
+    </Box>
+  );
+}
+
+function BoardView({
+  client,
+  boardId,
+  profileName,
+  onBack,
+}: {
+  client: TrelloClient;
+  boardId: string;
+  profileName: string;
+  onBack?: () => void;
+}) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [data, setData] = useState<BoardData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [col, setCol] = useState(0);
+  const [row, setRow] = useState(0);
+  const [detail, setDetail] = useState(false);
+  const [extras, setExtras] = useState<Map<string, CardExtras>>(new Map());
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [board, lists, cards, customFieldsRaw, members] = await Promise.all([
+        client.boardGet(boardId, { fields: "name" }) as Promise<{ name: string }>,
+        client.boardLists(boardId, {
+          filter: "open",
+          fields: "name,pos,color",
+        }) as Promise<UiList[]>,
+        client.boardCards(boardId, {
+          fields:
+            "name,desc,due,start,dueComplete,idList,pos,shortUrl,labels,badges,idMembers",
+          customFieldItems: true,
+        }) as Promise<UiCard[]>,
+        client.boardCustomFields(boardId),
+        client.boardMembers(boardId) as Promise<
+          Array<{ id: string; fullName?: string; username?: string }>
+        >,
+      ]);
+      const cardsByList = new Map<string, UiCard[]>();
+      for (const list of lists) cardsByList.set(list.id, []);
+      for (const card of [...cards].sort((a, b) => a.pos - b.pos)) {
+        cardsByList.get(card.idList)?.push(card);
+      }
+      setExtras(new Map());
+      setData({
+        name: board.name,
+        lists,
+        cardsByList,
+        customFields: toCustomFieldDefs(customFieldsRaw),
+        membersById: new Map(
+          members.map((m) => [m.id, m.fullName || m.username || "member"]),
+        ),
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, boardId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const loadExtras = useCallback(
+    async (card: UiCard) => {
+      if (extras.has(card.id)) return;
+      try {
+        const [attachments, checklists, actions] = await Promise.all([
+          client.cardAttachments(card.id) as Promise<
+            Array<{ id: string; name: string }>
+          >,
+          client.get(`/cards/${card.id}/checklists`) as Promise<
+            Array<{
+              id: string;
+              name: string;
+              checkItems?: Array<{ id: string; name: string; state?: string }>;
+            }>
+          >,
+          client.cardActions(card.id, { filter: "commentCard", limit: 5 }) as Promise<
+            Array<{
+              id: string;
+              date: string;
+              memberCreator?: { fullName?: string; username?: string };
+              data?: { text?: string };
+            }>
+          >,
+        ]);
+        setExtras((prev) =>
+          new Map(prev).set(card.id, {
+            attachments: attachments.map((a) => ({ id: a.id, name: a.name })),
+            checklists: checklists.map((cl) => ({
+              id: cl.id,
+              name: cl.name,
+              items: (cl.checkItems ?? []).map((item) => ({
+                id: item.id,
+                name: item.name,
+                complete: item.state === "complete",
+              })),
+            })),
+            comments: actions.map((action) => ({
+              id: action.id,
+              author:
+                action.memberCreator?.fullName ??
+                action.memberCreator?.username ??
+                "unknown",
+              date: action.date,
+              text: action.data?.text ?? "",
+            })),
+          }),
+        );
+      } catch (err) {
+        setExtras((prev) =>
+          new Map(prev).set(card.id, {
+            attachments: [],
+            checklists: [],
+            comments: [],
+            error: err instanceof Error ? err.message : String(err),
+          }),
+        );
+      }
+    },
+    [client, extras],
+  );
+
+  useInput((input, key) => {
+    if (detail) {
+      if (key.escape || key.return || input === "q") setDetail(false);
+      return;
+    }
+    if (input === "q") {
+      exit();
+      return;
+    }
+    if (input === "r") {
+      void load();
+      return;
+    }
+    if ((key.escape || key.backspace) && onBack) {
+      onBack();
+      return;
+    }
+    if (!data || data.lists.length === 0) return;
+    const lists = data.lists;
+    const safeCol = Math.min(col, lists.length - 1);
+    const cards = data.cardsByList.get(lists[safeCol].id) ?? [];
+    const safeRow = cards.length === 0 ? -1 : Math.min(row, cards.length - 1);
+    if (key.leftArrow || input === "h") {
+      setCol(Math.max(0, safeCol - 1));
+      setRow(0);
+    } else if (key.rightArrow || input === "l") {
+      setCol(Math.min(lists.length - 1, safeCol + 1));
+      setRow(0);
+    } else if (key.upArrow || input === "k") {
+      if (safeRow > 0) setRow(safeRow - 1);
+    } else if (key.downArrow || input === "j") {
+      if (safeRow >= 0 && safeRow < cards.length - 1) setRow(safeRow + 1);
+    } else if (key.return && safeRow >= 0) {
+      const focusedCard = cards[safeRow];
+      if (focusedCard) void loadExtras(focusedCard);
+      setDetail(true);
+    }
+  });
+
+  const columns = stdout?.columns ?? 80;
+  const rows = stdout?.rows ?? 24;
+
+  if (loading && !data) {
+    return <Text> Loading board {boardId}…</Text>;
+  }
+  if (error && !data) {
+    return (
+      <Box flexDirection="column">
+        <Text color="#eb5a46"> {error}</Text>
+        <Text dimColor> r retry · q quit</Text>
+      </Box>
+    );
+  }
+  if (!data) return null;
+
+  const lists = data.lists;
+  const safeCol = lists.length > 0 ? Math.min(col, lists.length - 1) : 0;
+  const focusedCards =
+    lists.length > 0 ? (data.cardsByList.get(lists[safeCol].id) ?? []) : [];
+  const safeRow = focusedCards.length > 0 ? Math.min(row, focusedCards.length - 1) : -1;
+  const focusedCard = safeRow >= 0 ? focusedCards[safeRow] : undefined;
+
+  const visibleCols = Math.max(1, Math.floor((columns - 2) / (COL_WIDTH + 1)));
+  const colStart = Math.min(
+    Math.max(0, safeCol - visibleCols + 1),
+    Math.max(0, lists.length - visibleCols),
+  );
+  const shown = lists.slice(colStart, colStart + visibleCols);
+  const frontFields = data.customFields.filter((def) => def.cardFront);
+  const cardHeight = frontFields.length > 0 ? 5 : 4;
+  const maxCards = Math.max(1, Math.floor((rows - 7) / cardHeight));
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box marginBottom={1}>
+        <Text backgroundColor="#0079bf" color="#ffffff" bold>
+          {` ${data.name} `}
+        </Text>
+        <Text dimColor>
+          {"  "}
+          {profileName} · {lists.length} lists
+          {loading ? " · refreshing…" : ""}
+          {error ? ` · ${error}` : ""}
+        </Text>
+      </Box>
+      {detail && focusedCard ? (
+        <CardDetail
+          card={focusedCard}
+          listName={lists[safeCol].name}
+          width={columns}
+          defs={data.customFields}
+          membersById={data.membersById}
+          extras={extras.get(focusedCard.id)}
+        />
+      ) : (
+        <Box>
+          {colStart > 0 ? <Text dimColor>‹ </Text> : null}
+          {shown.map((list, i) => (
+            <Column
+              key={list.id}
+              list={list}
+              cards={data.cardsByList.get(list.id) ?? []}
+              focused={colStart + i === safeCol}
+              focusedRow={colStart + i === safeCol ? safeRow : null}
+              width={COL_WIDTH}
+              maxCards={maxCards}
+              cardHeight={cardHeight}
+              frontFields={frontFields}
+            />
+          ))}
+          {colStart + visibleCols < lists.length ? <Text dimColor>›</Text> : null}
+        </Box>
+      )}
+      <Box marginTop={1}>
+        <Text dimColor>
+          {detail
+            ? "esc/⏎/q back"
+            : `←→ lists · ↑↓ cards · ⏎ detail · r refresh${onBack ? " · esc boards" : ""} · q quit`}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+export type UiBoard = {
+  id: string;
+  name: string;
+  shortUrl?: string;
+  closed?: boolean;
+  prefs?: {
+    backgroundColor?: string | null;
+    backgroundTopColor?: string | null;
+  };
+};
+
+function boardDotHex(board: UiBoard): string {
+  return board.prefs?.backgroundColor ?? board.prefs?.backgroundTopColor ?? TRELLO_BLUE;
+}
+
+function BoardPicker({
+  client,
+  profileName,
+  onSelect,
+}: {
+  client: TrelloClient;
+  profileName: string;
+  onSelect: (board: UiBoard) => void;
+}) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [boards, setBoards] = useState<UiBoard[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [idx, setIdx] = useState(0);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = (await client.memberBoards("me", {
+        filter: "open",
+        fields: "name,shortUrl,closed,prefs",
+      })) as UiBoard[];
+      setBoards(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useInput((input, key) => {
+    if (input === "q") {
+      exit();
+      return;
+    }
+    if (input === "r") {
+      void load();
+      return;
+    }
+    if (!boards || boards.length === 0) return;
+    const safeIdx = Math.min(idx, boards.length - 1);
+    if (key.upArrow || input === "k") {
+      setIdx(Math.max(0, safeIdx - 1));
+    } else if (key.downArrow || input === "j") {
+      setIdx(Math.min(boards.length - 1, safeIdx + 1));
+    } else if (key.return) {
+      onSelect(boards[safeIdx]);
+    }
+  });
+
+  const rows = stdout?.rows ?? 24;
+
+  if (loading && !boards) return <Text> Loading boards…</Text>;
+  if (error && !boards) {
+    return (
+      <Box flexDirection="column">
+        <Text color="#eb5a46"> {error}</Text>
+        <Text dimColor> r retry · q quit</Text>
+      </Box>
+    );
+  }
+  if (!boards) return null;
+
+  const safeIdx = boards.length > 0 ? Math.min(idx, boards.length - 1) : 0;
+  const maxRows = Math.max(1, rows - 6);
+  const start = safeIdx >= maxRows ? safeIdx - maxRows + 1 : 0;
+  const visible = boards.slice(start, start + maxRows);
+  const below = boards.length - (start + visible.length);
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box marginBottom={1}>
+        <Text backgroundColor="#0079bf" color="#ffffff" bold>
+          {" Boards "}
+        </Text>
+        <Text dimColor>
+          {"  "}
+          {profileName} · {boards.length} open
+          {loading ? " · refreshing…" : ""}
+          {error ? ` · ${error}` : ""}
+        </Text>
+      </Box>
+      {boards.length === 0 ? <Text dimColor> (no open boards)</Text> : null}
+      {start > 0 ? <Text dimColor> ↑ {start} more</Text> : null}
+      {visible.map((board, i) => {
+        const focused = start + i === safeIdx;
+        return (
+          <Text key={board.id} wrap="truncate">
+            {focused ? <Text color={TRELLO_BLUE}>❯ </Text> : "  "}
+            <Text color={boardDotHex(board)}>● </Text>
+            <Text bold={focused}>{board.name}</Text>
+            {board.shortUrl ? <Text dimColor> {board.shortUrl}</Text> : null}
+          </Text>
+        );
+      })}
+      {below > 0 ? <Text dimColor> ↓ {below} more</Text> : null}
+      <Box marginTop={1}>
+        <Text dimColor>↑↓ move · ⏎ open · r refresh · q quit</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export function App({
+  client,
+  boardId,
+  profileName,
+}: {
+  client: TrelloClient;
+  boardId?: string;
+  profileName: string;
+}) {
+  const [picked, setPicked] = useState<UiBoard | null>(null);
+  if (boardId) {
+    return <BoardView client={client} boardId={boardId} profileName={profileName} />;
+  }
+  if (!picked) {
+    return (
+      <BoardPicker client={client} profileName={profileName} onSelect={setPicked} />
+    );
+  }
+  return (
+    <BoardView
+      key={picked.id}
+      client={client}
+      boardId={picked.id}
+      profileName={profileName}
+      onBack={() => setPicked(null)}
+    />
+  );
+}