@yannelli/paseo-linear-plugin 0.1.0 → 0.4.0

package/client/create-issue.tsx

@@ -0,0 +1,291 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { Icon, Modal, TextInput, useToast } from "@getpaseo/plugin/client/react-native";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { createIssueRpc, type LinearTeam, type LinearUser } from "../shared/linear";
+import {
+  assigneeOptions,
+  type PickerOption,
+  PickerPage,
+  priorityOptions,
+  PropertyChip,
+  stateOptions,
+  UNASSIGNED,
+} from "./pickers";
+import { useKeyScope } from "./key-scope";
+import { queryKeys } from "./queries";
+import {
+  Avatar,
+  Button,
+  errorMessage,
+  priorityMeta,
+  PriorityIcon,
+  StateIcon,
+  type Theme,
+} from "./ui";
+
+type Picker = "team" | "state" | "priority" | "assignee";
+
+interface CreateIssueProps {
+  theme: Theme;
+  teams: readonly LinearTeam[];
+  users: readonly LinearUser[];
+  viewerId: string | null;
+  defaultTeamId: string | null;
+  onClose(): void;
+  onCreated(issueId: string): void;
+}
+
+interface Draft {
+  teamId: string | null;
+  stateId: string | null;
+  priority: number;
+  assigneeId: string | null;
+}
+
+const PICKER_TITLES: Record<Picker, string> = {
+  team: "Team",
+  state: "Status",
+  priority: "Priority",
+  assignee: "Assignee",
+};
+
+function pickerOptions(kind: Picker, props: CreateIssueProps, team: LinearTeam | null) {
+  if (kind === "team") {
+    return props.teams.map((entry) => ({ value: entry.id, label: entry.name, detail: entry.key }));
+  }
+  if (kind === "state") return stateOptions(team?.states ?? []);
+  if (kind === "priority") return priorityOptions(props.theme);
+  return assigneeOptions(props.theme, props.users, props.viewerId);
+}
+
+function pickerValue(kind: Picker, draft: Draft): string | null {
+  if (kind === "team") return draft.teamId;
+  if (kind === "state") return draft.stateId;
+  if (kind === "priority") return String(draft.priority);
+  return draft.assigneeId ?? UNASSIGNED;
+}
+
+function applyPick(kind: Picker, value: string, draft: Draft): Draft {
+  if (kind === "team") return { ...draft, teamId: value, stateId: null };
+  if (kind === "state") return { ...draft, stateId: value };
+  if (kind === "priority") return { ...draft, priority: Number(value) };
+  return { ...draft, assigneeId: value === UNASSIGNED ? null : value };
+}
+
+export function CreateIssueModal(props: CreateIssueProps) {
+  const { theme, onClose, onCreated } = props;
+  const { colors } = theme;
+  const toast = useToast();
+  const queries = useQueryClient();
+  const createIssue = useRpc(createIssueRpc);
+  const scope = useKeyScope();
+  const [draft, setDraft] = useState<Draft>(() => ({
+    teamId: props.defaultTeamId ?? props.teams[0]?.id ?? null,
+    stateId: null,
+    priority: 0,
+    assigneeId: props.viewerId,
+  }));
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [picker, setPicker] = useState<Picker | null>(null);
+  const team = props.teams.find((entry) => entry.id === draft.teamId) ?? null;
+
+  const create = useMutation({
+    mutationFn: () => {
+      if (!draft.teamId) throw new Error("Choose a team");
+      return createIssue({
+        teamId: draft.teamId,
+        title,
+        description: description.trim() || undefined,
+        priority: draft.priority,
+        assigneeId: draft.assigneeId,
+        ...(draft.stateId ? { stateId: draft.stateId } : {}),
+        projectId: scope,
+      });
+    },
+    onSuccess: ({ issue }) => {
+      void queries.invalidateQueries({ queryKey: queryKeys.issues(scope) });
+      toast.show(`Created ${issue.identifier}`, { variant: "success" });
+      onCreated(issue.id);
+    },
+  });
+  const { mutate } = create;
+  const submit = useCallback(() => mutate(), [mutate]);
+  const icon = useMemo(() => <Icon name="Plus" size={18} color={colors.foreground} />, [colors]);
+  const openChange = useCallback(
+    (open: boolean) => {
+      if (!open) onClose();
+    },
+    [onClose],
+  );
+  const closePicker = useCallback(() => setPicker(null), []);
+  const select = useCallback(
+    (value: string) => {
+      if (!picker) return;
+      setDraft((current) => applyPick(picker, value, current));
+      setPicker(null);
+    },
+    [picker],
+  );
+  const options: PickerOption[] = useMemo(
+    () => (picker ? pickerOptions(picker, props, team) : []),
+    [picker, props, team],
+  );
+  const styles = useMemo(() => {
+    const input = {
+      paddingHorizontal: 12,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: colors.border,
+      backgroundColor: colors.surface2,
+      color: colors.foreground,
+      fontSize: 14,
+    };
+    return {
+      title: { ...input, height: 42, fontSize: 15 },
+      description: {
+        ...input,
+        minHeight: 120,
+        paddingVertical: 10,
+        textAlignVertical: "top" as const,
+      },
+      error: { color: colors.statusDanger, fontSize: 13 },
+    };
+  }, [colors]);
+
+  return (
+    <Modal title="New issue" icon={icon} open onOpenChange={openChange}>
+      <Modal.Content>
+        {picker ? (
+          <PickerPage
+            theme={theme}
+            title={PICKER_TITLES[picker]}
+            options={options}
+            value={pickerValue(picker, draft)}
+            searchable={picker === "assignee" || picker === "team"}
+            onBack={closePicker}
+            onSelect={select}
+          />
+        ) : (
+          <>
+            <DraftChips
+              theme={theme}
+              draft={draft}
+              team={team}
+              users={props.users}
+              onPick={setPicker}
+            />
+            <TextInput
+              value={title}
+              onChangeText={setTitle}
+              placeholder="Issue title"
+              placeholderTextColor={colors.foregroundMuted}
+              accessibilityLabel="Issue title"
+              autoFocus
+              style={styles.title}
+            />
+            <TextInput
+              value={description}
+              onChangeText={setDescription}
+              multiline
+              placeholder="Add a description (Markdown)"
+              placeholderTextColor={colors.foregroundMuted}
+              accessibilityLabel="Issue description"
+              style={styles.description}
+            />
+            {create.error ? (
+              <Text accessibilityRole="alert" style={styles.error}>
+                {errorMessage(create.error)}
+              </Text>
+            ) : null}
+            <Button
+              theme={theme}
+              variant="primary"
+              size="md"
+              icon="Plus"
+              label="Create issue"
+              busy={create.isPending}
+              disabled={!title.trim() || !draft.teamId}
+              onPress={submit}
+            />
+          </>
+        )}
+      </Modal.Content>
+    </Modal>
+  );
+}
+
+const CHIPS_STYLE = { flexDirection: "row", flexWrap: "wrap", gap: 8 } as const;
+
+function DraftChips(props: {
+  theme: Theme;
+  draft: Draft;
+  team: LinearTeam | null;
+  users: readonly LinearUser[];
+  onPick(kind: Picker): void;
+}) {
+  const { theme, draft, team, onPick } = props;
+  const { colors } = theme;
+  const state = team?.states.find((entry) => entry.id === draft.stateId) ?? null;
+  const assignee = props.users.find((user) => user.id === draft.assigneeId) ?? null;
+  const assigneeName = assignee?.displayName ?? null;
+  const teamIcon = useMemo(
+    () => <Icon name="Users" size={14} color={colors.foregroundMuted} />,
+    [colors],
+  );
+  const stateIcon = useMemo(
+    () =>
+      state ? (
+        <StateIcon state={state} size={14} />
+      ) : (
+        <Icon name="Circle" size={14} color={colors.foregroundMuted} />
+      ),
+    [state, colors],
+  );
+  const priorityIcon = useMemo(
+    () => <PriorityIcon theme={theme} priority={draft.priority} size={14} />,
+    [theme, draft.priority],
+  );
+  const avatar = useMemo(
+    () => <Avatar theme={theme} name={assigneeName} size={16} />,
+    [theme, assigneeName],
+  );
+  const pickTeam = useCallback(() => onPick("team"), [onPick]);
+  const pickState = useCallback(() => onPick("state"), [onPick]);
+  const pickPriority = useCallback(() => onPick("priority"), [onPick]);
+  const pickAssignee = useCallback(() => onPick("assignee"), [onPick]);
+  return (
+    <View style={CHIPS_STYLE}>
+      <PropertyChip
+        theme={theme}
+        label={team?.name ?? "Team"}
+        leading={teamIcon}
+        accessibilityLabel="Team"
+        onPress={pickTeam}
+      />
+      <PropertyChip
+        theme={theme}
+        label={state?.name ?? "Default status"}
+        leading={stateIcon}
+        accessibilityLabel="Status"
+        onPress={pickState}
+      />
+      <PropertyChip
+        theme={theme}
+        label={priorityMeta(draft.priority).label}
+        leading={priorityIcon}
+        accessibilityLabel="Priority"
+        onPress={pickPriority}
+      />
+      <PropertyChip
+        theme={theme}
+        label={assigneeName ?? "Unassigned"}
+        leading={avatar}
+        accessibilityLabel="Assignee"
+        onPress={pickAssignee}
+      />
+    </View>
+  );
+}

package/client/glyphs.tsx

@@ -0,0 +1,117 @@
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useMemo } from "react";
+import { Text, View } from "react-native";
+import { PRIORITIES } from "../shared/linear";
+
+type Theme = PluginSurfaceProps["theme"];
+
+const STATE_ICONS: Record<string, string> = {
+  triage: "CircleDot",
+  backlog: "CircleDashed",
+  unstarted: "Circle",
+  started: "CircleDot",
+  completed: "CircleCheck",
+  canceled: "CircleX",
+  duplicate: "CircleX",
+};
+
+export function StateIcon({
+  state,
+  size = 16,
+}: {
+  state: { type: string; color: string };
+  size?: number;
+}) {
+  return <Icon name={STATE_ICONS[state.type] ?? "Circle"} size={size} color={state.color} />;
+}
+
+export function priorityMeta(priority: number) {
+  return PRIORITIES.find((entry) => entry.value === priority) ?? PRIORITIES[0];
+}
+
+export function PriorityIcon({
+  theme,
+  priority,
+  size = 16,
+}: {
+  theme: Theme;
+  priority: number;
+  size?: number;
+}) {
+  const meta = priorityMeta(priority);
+  const color = priority === 1 ? theme.colors.statusDanger : theme.colors.foregroundMuted;
+  return <Icon name={meta.icon} size={size} color={color} />;
+}
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  const letters =
+    parts.length > 1 ? `${parts[0]?.[0] ?? ""}${parts[1]?.[0] ?? ""}` : name.slice(0, 2);
+  return letters.toUpperCase() || "?";
+}
+
+export function Avatar({
+  theme,
+  name,
+  size = 20,
+}: {
+  theme: Theme;
+  name: string | null;
+  size?: number;
+}) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () =>
+      ({
+        circle: {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: colors.surface2,
+          borderWidth: 1,
+          borderColor: colors.border,
+        },
+        letters: { fontSize: Math.max(8, size * 0.42), color: colors.foreground },
+      }) as const,
+    [colors, size],
+  );
+  if (!name) return <Icon name="CircleUser" size={size} color={colors.foregroundMuted} />;
+  return (
+    <View accessibilityLabel={name} style={styles.circle}>
+      <Text style={styles.letters}>{initials(name)}</Text>
+    </View>
+  );
+}
+
+export function LabelPill({ theme, name, color }: { theme: Theme; name: string; color: string }) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () =>
+      ({
+        pill: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 5,
+          height: 22,
+          paddingHorizontal: 8,
+          borderRadius: 11,
+          borderWidth: 1,
+          borderColor: colors.border,
+        },
+        dot: { width: 7, height: 7, borderRadius: 4, backgroundColor: color },
+        name: { fontSize: 12, color: colors.foregroundMuted },
+      }) as const,
+    [colors, color],
+  );
+  return (
+    <View style={styles.pill}>
+      <View style={styles.dot} />
+      <Text numberOfLines={1} style={styles.name}>
+        {name}
+      </Text>
+    </View>
+  );
+}

package/client/issue-description.tsx

@@ -0,0 +1,206 @@
+import { TextInput, useToast } from "@getpaseo/plugin/client/react-native";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type NativeSyntheticEvent,
+  Pressable,
+  Text,
+  type TextInputKeyPressEventData,
+  View,
+} from "react-native";
+import type { IssueDetail } from "../shared/linear";
+import { toggleTask } from "../shared/markdown";
+import { createAutosave, type SaveStatus } from "./autosave";
+import { Markdown } from "./markdown";
+import { useDescriptionSaver } from "./queries";
+import { Button, errorMessage, IconButton, SectionLabel, type Theme } from "./ui";
+
+// Typing saves after a pause. Checkbox taps save sooner and coalesce rapid taps.
+const EDIT_DELAY_MS = 1200;
+const TOGGLE_DELAY_MS = 400;
+
+const STATUS_COPY: Record<SaveStatus, string> = {
+  idle: "Saves as you type",
+  pending: "Unsaved changes",
+  saving: "Saving…",
+  saved: "Saved to Linear",
+  error: "Could not save",
+};
+
+const HEADER_STYLE = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+} as const;
+
+const noop = () => undefined;
+
+export function IssueDescription(props: { theme: Theme; compact: boolean; issue: IssueDetail }) {
+  const { theme, compact, issue } = props;
+  const { colors } = theme;
+  const toast = useToast();
+  const saver = useDescriptionSaver(issue.id);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [status, setStatus] = useState<SaveStatus>("idle");
+  const [closing, setClosing] = useState(false);
+  // Read by the autosave callbacks and the unmount flush, which outlive a render.
+  const live = useRef({ editing, draft, toast });
+  useEffect(() => {
+    live.current = { editing, draft, toast };
+  });
+
+  const autosave = useMemo(() => {
+    let lastSaved: string | null = null;
+    const instance = createAutosave({
+      delayMs: EDIT_DELAY_MS,
+      save: async (value) => {
+        await saver.save(value);
+        lastSaved = value;
+      },
+      onStatus: (next, error) => {
+        setStatus(next);
+        // A refetch during the save may have brought back older text. Nothing is queued now.
+        if (next === "saved" && lastSaved !== null) saver.show(lastSaved);
+        if (next !== "error" || live.current.editing) return;
+        // A checkbox save failed: drop it and show what Linear has.
+        instance.cancel();
+        live.current.toast.error(`Could not update the checklist: ${errorMessage(error)}`);
+        saver.reload();
+      },
+    });
+    return instance;
+  }, [saver]);
+
+  // Leaving the issue saves any pending text instead of losing it.
+  useEffect(
+    () => () => {
+      if (!autosave.busy()) return;
+      const { editing: wasEditing, draft: text, toast: notify } = live.current;
+      if (wasEditing) saver.show(text);
+      autosave.flush().catch((error: unknown) => {
+        notify.error(`Description not saved: ${errorMessage(error)}`);
+        saver.reload();
+      });
+    },
+    [autosave, saver],
+  );
+
+  const description = issue.description ?? "";
+  const startEditing = useCallback(() => {
+    setDraft(description);
+    setStatus("idle");
+    setEditing(true);
+  }, [description]);
+  const change = useCallback(
+    (text: string) => {
+      setDraft(text);
+      autosave.schedule(text);
+    },
+    [autosave],
+  );
+  const flushQuietly = useCallback(() => void autosave.flush().catch(noop), [autosave]);
+  // Closes only after Linear confirms the text. A failure keeps the editor open.
+  const finish = useCallback(() => {
+    setClosing(true);
+    autosave
+      .flush()
+      .then(() => {
+        saver.show(live.current.draft);
+        setEditing(false);
+        setStatus("idle");
+      }, noop)
+      .finally(() => setClosing(false));
+  }, [autosave, saver]);
+  const keyPress = useCallback(
+    (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      if (event.nativeEvent.key === "Escape") finish();
+    },
+    [finish],
+  );
+  const toggle = useCallback(
+    (ordinal: number) => {
+      const next = toggleTask(description, ordinal);
+      if (next === null) {
+        live.current.toast.error("The checklist changed. Refresh the issue and try again.");
+        return;
+      }
+      saver.show(next);
+      autosave.schedule(next, TOGGLE_DELAY_MS);
+    },
+    [description, saver, autosave],
+  );
+
+  const styles = useMemo(
+    () =>
+      ({
+        input: {
+          minHeight: 200,
+          padding: 10,
+          borderRadius: 8,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.surface1,
+          color: colors.foreground,
+          fontSize: 14,
+          lineHeight: 21,
+          textAlignVertical: "top",
+        },
+        footer: { flexDirection: "row", alignItems: "center", gap: 8, marginTop: 8 },
+        status: {
+          flex: 1,
+          fontSize: 12,
+          color: status === "error" ? colors.statusDanger : colors.foregroundMuted,
+        },
+        empty: { color: colors.foregroundMuted, fontSize: 14, lineHeight: 21 },
+      }) as const,
+    [colors, status],
+  );
+
+  if (editing) {
+    return (
+      <View>
+        <SectionLabel theme={theme}>Description</SectionLabel>
+        <TextInput
+          value={draft}
+          onChangeText={change}
+          onBlur={flushQuietly}
+          onKeyPress={keyPress}
+          multiline
+          autoFocus
+          placeholder="Add a description in Markdown…"
+          placeholderTextColor={colors.foregroundMuted}
+          accessibilityLabel="Issue description"
+          style={styles.input}
+        />
+        <View style={styles.footer}>
+          <Text accessibilityLiveRegion="polite" style={styles.status}>
+            {STATUS_COPY[status]}
+          </Text>
+          {status === "error" ? (
+            <Button theme={theme} icon="RefreshCw" label="Retry" onPress={flushQuietly} />
+          ) : null}
+          <Button theme={theme} icon="Check" label="Done" busy={closing} onPress={finish} />
+        </View>
+      </View>
+    );
+  }
+  return (
+    <View>
+      <View style={HEADER_STYLE}>
+        <SectionLabel theme={theme}>Description</SectionLabel>
+        <IconButton theme={theme} icon="Pencil" label="Edit description" onPress={startEditing} />
+      </View>
+      {description.trim() ? (
+        <Markdown theme={theme} compact={compact} source={description} onToggleTask={toggle} />
+      ) : (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Add a description"
+          onPress={startEditing}
+        >
+          <Text style={styles.empty}>No description. Add one…</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}