git

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103// Primary action, branch picker and repository menu trees.
// HTM whitespace is significant; keep these templates out of Prettier's HTML formatter.
import { ui, html as htm } from "convergence";
import type { GitStatus } from "convergence";
import type { EffectViewContext } from "convergence/effect";
import type { Git } from "../controller.ts";
import { branchOptions, MENU, primaryAction } from "../status.ts";
import type { Groups } from "../status.ts";
import { column, panelRow, menuCard } from "./layout.ts";

export function controls(ctx: EffectViewContext<object>, actions: Git["Service"]) {
  const { state } = actions;
  function primaryButton(status: GitStatus, total: number) {
    const disabled = !!state.busy;
    if (primaryAction(status, total) === "commit") {
      return htm`<button id="git-commit" icon="check" label="Commit" variant="accent" disabled=${disabled || !state.message.trim()} onClick=${() => ctx.run(actions.commit())} />`;
    }
    if (primaryAction(status, total) === "publish") {
      return htm`<button id="git-publish" icon="cloud-upload" label="Publish Branch" variant="accent" disabled=${disabled} onClick=${() => ctx.run(actions.publish())} />`;
    }
    if (primaryAction(status, total) === "sync") {
      const counts = [status.behind ? `${status.behind}↓` : null, status.ahead ? `${status.ahead}↑` : null]
        .filter(Boolean)
        .join(" ");
      return htm`<button id="git-sync" icon="refresh-cw" label=${`Sync Changes ${counts}`} variant="accent" disabled=${disabled} onClick=${() => ctx.run(actions.sync())} />`;
    }
    return htm`<button id="git-commit" icon="check" label="Commit" variant="accent" disabled />`;
  }

  function branchPicker(status: GitStatus) {
    const { query: q, shown, create } = branchOptions(state.branches, state.branchQuery);
    const items = [
      ...(create
        ? [
            {
              id: "git-branch-create",
              label: `Create branch "${q}"`,
              icon: "plus",
              onClick: () => ctx.run(actions.checkout(q, true)),
            },
          ]
        : []),
      ...shown.map((b) => ({
        id: `git-branch-${b}`,
        label: b,
        icon: "git-branch",
        selected: b === status.branch,
        onClick: () => ctx.run(actions.checkout(b, false)),
      })),
    ];
    return htm`
      <popover id="git-branch-popover" open=${state.branchOpen} align="start" width=${280} onDismiss=${() => {
        state.branchOpen = false;
        ctx.update();
      }}>
        <div ...${panelRow} id="git-branch" onPress=${() => ctx.run(actions.openBranches())}>
          <icon name="git-branch" small tone="muted" />
          <text style="body" size="xs" tone="muted" truncate>${status.branch ?? "(no branch)"}</text>
        </div>
        <div ...${menuCard}>
          <input id="git-branch-query" value=${state.branchQuery} placeholder="Switch to or create a branch"
            onChange=${(e: { value: string }) => {
              state.branchQuery = e.value;
              ctx.update();
            }}
            onSubmit=${() => {
              if (create) ctx.run(actions.checkout(q, true));
              else if (shown[0]) ctx.run(actions.checkout(shown[0], false));
            }} />
          <div ...${column} gap="small" padding="small" maxHeight=${280} overflowY="scroll">
            ${items.length ? ui.list({ id: "git-branch-list", items }) : htm`<text style="muted">No branches.</text>`}
          </div>
        </div>
      </popover>`;
  }

  function menu(status: GitStatus, g: Groups) {
    const items = MENU.map((item) => ({
      id: `git-menu-${item.action}`,
      label: item.label,
      icon: item.icon,
      onClick: () => {
        state.menuOpen = false;
        ctx.update();
        ctx.run(actions.menuAction(item.action, status, g));
      },
    }));
    return htm`
      <popover id="git-menu" open=${state.menuOpen} align="end" width=${220} onDismiss=${() => {
        state.menuOpen = false;
        ctx.update();
      }}>
        <button id="git-more" icon="ellipsis" variant="ghost" small tooltip="More actions" disabled=${!!state.busy}
          onClick=${() => {
            state.menuOpen = !state.menuOpen;
            ctx.update();
          }} />
        <div ...${menuCard}>${ui.list({ id: "git-menu-list", items })}</div>
      </popover>`;
  }

  return { primaryButton, branchPicker, menu };
}