Git support (#143)

src-web/components/git/BranchSelectionDialog.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { Button } from '../core/Button';
+import { Select } from '../core/Select';
+import { HStack, VStack } from '../core/Stacks';
+
+interface Props {
+  branches: string[];
+  onCancel: () => void;
+  onSelect: (branch: string) => void;
+  selectText: string;
+}
+
+export function BranchSelectionDialog({ branches, onCancel, onSelect, selectText }: Props) {
+  const [branch, setBranch] = useState<string>('__NONE__');
+  return (
+    <VStack
+      className="mb-4"
+      as="form"
+      space={4}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSelect(branch);
+      }}
+    >
+      <Select
+        name="branch"
+        hideLabel
+        label="Branch"
+        value={branch}
+        options={branches.map((b) => ({ label: b, value: b }))}
+        onChange={setBranch}
+      />
+      <HStack space={2} justifyContent="end">
+        <Button onClick={onCancel} variant="border" color="secondary">
+          Cancel
+        </Button>
+        <Button type="submit" color="primary">
+          {selectText}
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}

src-web/components/git/HistoryDialog.tsx

@@ -0,0 +1,40 @@
+import type { GitCommit } from '@yaakapp-internal/git';
+import { formatDistanceToNowStrict } from 'date-fns';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TruncatedWideTableCell,
+} from '../core/Table';
+
+interface Props {
+  log: GitCommit[];
+}
+
+export function HistoryDialog({ log }: Props) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Message</TableHeaderCell>
+          <TableHeaderCell>Author</TableHeaderCell>
+          <TableHeaderCell>When</TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {log.map((l, i) => (
+          <TableRow key={i}>
+            <TruncatedWideTableCell>{l.message}</TruncatedWideTableCell>
+            <TableCell className="font-bold">{l.author.name ?? 'Unknown'}</TableCell>
+            <TableCell className="text-text-subtle">
+              <span title={l.when}>{formatDistanceToNowStrict(l.when)} ago</span>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}