@kubohiroya/turbowarp-plus-editor-git 0.16.1 → 0.18.0

package/dist/style.css

@@ -214,4 +214,32 @@
 .twgit-graph-status { margin: 4px 0; font-size: 11px; min-height: 1em; }
 .twgit-panel .twgit-graph-popup [role="menuitem"]:focus-visible, .twgit-graph-popup [role="menuitem"]:focus-visible { outline-offset: -2px; }
 .twgit-graph-form-error { margin: 0; color: #a11919; overflow-wrap: anywhere; }
+/* The branch button sits in the host's menu bar and takes its text color; its menu uses the host's menu colors. */
+.twgit-branch-entry { position: relative; flex: 0 1 auto; align-self: center; display: flex; min-width: 0; font: inherit; }
+.twgit-branch-button { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 16rem; min-height: 2rem; padding: 0 8px;
+    color: inherit; background: transparent; border: 0; border-radius: 4px; font: inherit; white-space: nowrap; cursor: pointer; }
+.twgit-branch-button:hover, .twgit-branch-button[aria-expanded="true"] { background: color-mix(in srgb, currentColor 15%, transparent); }
+.twgit-branch-button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+.twgit-branch-icon { flex: none; }
+.twgit-branch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.twgit-branch-unborn { flex: none; font-size: 11px; opacity: .85; }
+.twgit-branch-caret { flex: none; font-size: 10px; }
+.twgit-branch-popup { position: absolute; z-index: 510; top: calc(100% + 4px); right: 0; display: grid; gap: 2px; min-width: 220px;
+    max-width: min(360px, 90vw); max-height: 70vh; overflow: auto; box-sizing: border-box; padding: 4px;
+    color: var(--text-primary, CanvasText); background: var(--ui-white, Canvas); border: 1px solid var(--ui-black-transparent, GrayText);
+    border-radius: 6px; box-shadow: 0 8px 24px #0004; font: 14px/1.5 system-ui, sans-serif; white-space: normal; }
+.twgit-branch-popup [role^="menuitem"] { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; color: inherit;
+    background: transparent; border: 0; border-radius: 4px; font: inherit; text-align: start; overflow-wrap: anywhere; cursor: pointer; }
+.twgit-branch-popup [role^="menuitem"]:hover, .twgit-branch-popup [role^="menuitem"]:focus-visible {
+    background: color-mix(in srgb, currentColor 12%, transparent); }
+.twgit-branch-popup [role^="menuitem"]:focus-visible { outline: 2px solid var(--looks-secondary, Highlight); outline-offset: -2px; }
+.twgit-branch-popup [aria-disabled="true"]:not([aria-checked="true"]) { opacity: .55; cursor: default; }
+.twgit-branch-popup [aria-checked="true"] { font-weight: 600; }
+.twgit-branch-popup [data-separator-before="true"] { margin-top: 3px; box-shadow: 0 -3px 0 -2px color-mix(in srgb, currentColor 25%, transparent); }
+.twgit-branch-check { flex: none; width: 1em; text-align: center; }
+.twgit-branch-popup form { display: grid; gap: 6px; padding: 6px; font-size: 12px; }
+.twgit-branch-popup form label { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.twgit-branch-popup form input:not([type]) { flex: 1; min-width: 10em; font: inherit; }
+.twgit-branch-popup form button { color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: 3px 8px; font: inherit; cursor: pointer; }
+.twgit-branch-popup form button:disabled { opacity: .5; cursor: default; }
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-git",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "Read-only local Git panel for TurboWarp Plus Editor",
   "type": "module",
   "license": "MPL-2.0",

package/src/branch-button.tsx

@@ -0,0 +1,216 @@
+import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import type {HistoryActionResult} from './history-graph-view.js';
+import {labelsFor} from './messages.js';
+import type {BranchRefs} from './repository.js';
+
+/** What the branch button shows: the branches of the chosen repository as the Git panel last read them. */
+export interface BranchButtonState extends BranchRefs {
+    /** Whether a repository has been chosen. */
+    repository: boolean;
+    /** Whether the host lets the panel switch and create branches. */
+    writable: boolean;
+    /** Whether the panel is running an operation. */
+    busy: boolean;
+}
+/** What the branch button asks the Git panel to do. Branch operations resolve as the panel's own buttons do. */
+export interface BranchButtonActions {
+    open(): void;
+    choose(): void;
+    switchBranch(name: string): Promise<HistoryActionResult>;
+    /** Creates a branch at HEAD. */
+    createBranch(name: string, checkout: boolean): Promise<HistoryActionResult>;
+    /** Creates a local branch from `origin/<name>` and switches to it. */
+    createFromRemote(name: string): Promise<HistoryActionResult>;
+}
+export interface BranchButtonProps extends BranchButtonActions {
+    state: BranchButtonState;
+    locale?: string;
+}
+interface Item {id: string; label: string; checked?: boolean; disabled?: boolean; separatorBefore?: boolean; run(): void}
+
+const menuItems = '[role="menuitem"], [role="menuitemradio"]';
+
+/** Git's branch glyph, drawn in the text color. */
+function BranchIcon() {
+    return <svg className="twgit-branch-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
+        <g fill="none" stroke="currentColor" strokeWidth="1.5">
+            <circle cx="4.5" cy="3.5" r="1.75"/><circle cx="4.5" cy="12.5" r="1.75"/><circle cx="11.5" cy="5.5" r="1.75"/>
+            <path d="M4.5 5.25v5.5M11.5 7.25c0 2.5-2.5 2.75-6 3.75"/>
+        </g>
+    </svg>;
+}
+
+/**
+ * The current branch as a menu button for the host's menu bar, with the menu of branches. Before a repository is
+ * chosen it reads "Git" and offers to choose one. A detached HEAD shows its short commit ID. The menu moves with the
+ * arrow keys, Home and End; Escape closes it and returns to the button. Without `writable` it lists the branches only.
+ */
+export function BranchButton({state, locale = 'en', ...actions}: BranchButtonProps) {
+    const labels = labelsFor(locale);
+    const [mode, setMode] = useState<'closed' | 'menu' | 'create'>('closed');
+    const [initial, setInitial] = useState<'checked' | 'first' | 'last'>('checked');
+    const [name, setName] = useState('');
+    const [checkout, setCheckout] = useState(true);
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState('');
+    const root = useRef<HTMLDivElement>(null);
+    const trigger = useRef<HTMLButtonElement>(null);
+    const popup = useRef<HTMLDivElement>(null);
+    const mounted = useRef(true);
+    useEffect(() => () => {mounted.current = false;}, []);
+    useLayoutEffect(() => {
+        const element = popup.current;
+        if (!element) return;
+        if (mode === 'create') {
+            element.querySelector('input')?.focus();
+            return;
+        }
+        const items = [...element.querySelectorAll<HTMLElement>(menuItems)];
+        const checked = items.find(item => item.getAttribute('aria-checked') === 'true');
+        (initial === 'last' ? items[items.length - 1] : initial === 'checked' && checked || items[0])?.focus();
+    }, [mode]);
+    // A click elsewhere closes the menu, also where nothing takes the focus.
+    useEffect(() => {
+        if (mode === 'closed') return;
+        const node = root.current!;
+        const dismiss = (event: Event) => {
+            if (!node.contains(event.target as Node) && !creating) setMode('closed');
+        };
+        node.ownerDocument.addEventListener('pointerdown', dismiss, true);
+        return () => node.ownerDocument.removeEventListener('pointerdown', dismiss, true);
+    }, [mode, creating]);
+    // After a refused create, the name is selected for correcting.
+    useEffect(() => {
+        if (!createError || creating) return;
+        const input = popup.current?.querySelector('input:not([type])') as HTMLInputElement | null;
+        input?.focus();
+        input?.select();
+    }, [createError, creating]);
+
+    const {branch, head} = state;
+    const unborn = state.repository && !head;
+    const text = !state.repository ? 'Git' : branch ?? (head ? head.slice(0, 7) : labels.unborn);
+    const accessibleName = !state.repository ? labels.title :
+        `${branch ? labels.branch : labels.detached}: ${text}${unborn && branch ? ` (${labels.unborn})` : ''}`;
+    const close = (focus = true) => {
+        setMode('closed');
+        if (focus) trigger.current?.focus({preventScroll: true});
+    };
+    const openMenu = (from: 'checked' | 'first' | 'last') => {
+        setInitial(from);
+        setMode('menu');
+    };
+    /** Runs a branch operation and shows its result, or why it did not run, in the panel. */
+    const change = async (operation: () => Promise<HistoryActionResult>) => {
+        const result = await operation();
+        if (result.done || result.error) actions.open();
+    };
+    const items: Item[] = [];
+    if (!state.repository) {
+        items.push({id: 'choose', label: labels.choose, run: () => {close(); actions.choose();}});
+    } else {
+        const switching = state.writable && !state.busy;
+        for (const local of state.branches) {
+            items.push({id: 'branch:' + local, label: local, checked: local === branch, disabled: !state.writable || state.busy && local !== branch,
+                run: () => {
+                    close();
+                    if (local !== branch && switching) void change(() => actions.switchBranch(local));
+                }});
+        }
+        if (state.writable) {
+            state.remoteBranches.forEach((remote, index) => items.push({id: 'remote:' + remote,
+                label: labels.historyCreateFromRemote.replace('{name}', remote), disabled: state.busy, separatorBefore: index === 0,
+                run: () => {
+                    close();
+                    if (!state.busy) void change(() => actions.createFromRemote(remote));
+                }}));
+            if (head) items.push({id: 'create', label: labels.newBranchItem, disabled: state.busy, separatorBefore: true, run: () => {
+                if (state.busy) return;
+                setName('');
+                setCheckout(true);
+                setCreateError('');
+                setMode('create');
+            }});
+        }
+    }
+    // "Open Local Git" goes with "New Branch…" and stands apart from the branches.
+    items.push({id: 'open', label: labels.openPanel, separatorBefore: items.length > 0 && items[items.length - 1].id !== 'create',
+        run: () => {close(); actions.open();}});
+
+    const onMenuKey = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!creating) close();
+            return;
+        }
+        if (mode !== 'menu') return;
+        if (event.key === 'Tab') {close(false); return;}
+        const elements = [...event.currentTarget.querySelectorAll<HTMLElement>(menuItems)];
+        const index = elements.indexOf(event.target as HTMLElement);
+        const target = {ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: elements.length - 1}[event.key];
+        if (target === undefined || !elements.length) return;
+        event.preventDefault();
+        elements[(target + elements.length) % elements.length].focus();
+    };
+    const submit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        const branchName = name.trim();
+        if (!branchName || creating) return;
+        setCreating(true);
+        setCreateError('');
+        let result: HistoryActionResult;
+        try {
+            result = await actions.createBranch(branchName, checkout);
+        } catch (error) {
+            result = {done: false, error: error instanceof Error && error.message ? error.message : labels.failed};
+        }
+        if (!mounted.current) return;
+        setCreating(false);
+        if (result.done) {
+            close();
+            actions.open();
+        } else setCreateError(result.error ?? '');
+    };
+    return <div className="twgit-branch-entry" ref={root} onBlur={event => {
+        const next = event.relatedTarget as Node | null;
+        if (next && !event.currentTarget.contains(next) && !creating) setMode('closed');
+    }}>
+        <button type="button" className="twgit-branch-button" ref={trigger} aria-label={accessibleName} title={accessibleName}
+            aria-haspopup="menu" aria-expanded={mode === 'menu'} data-git-branch={state.repository ? branch ?? head ?? '' : undefined}
+            onClick={() => mode === 'closed' ? openMenu('checked') : close(false)}
+            onKeyDown={event => {
+                if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+                event.preventDefault();
+                openMenu(event.key === 'ArrowUp' ? 'last' : 'checked');
+            }}>
+            <BranchIcon/>
+            <span className="twgit-branch-name">{text}</span>
+            {unborn && branch && <small className="twgit-branch-unborn">{labels.unborn}</small>}
+            <span className="twgit-branch-caret" aria-hidden="true">▾</span>
+        </button>
+        {mode === 'menu' && <div ref={popup} className="twgit-branch-popup" role="menu" aria-label={labels.branchMenu} onKeyDown={onMenuKey}>
+            {items.map(item => <button key={item.id} type="button" tabIndex={-1} data-action={item.id}
+                role={item.checked === undefined ? 'menuitem' : 'menuitemradio'} aria-checked={item.checked}
+                aria-disabled={item.disabled || undefined} data-separator-before={item.separatorBefore || undefined}
+                onClick={() => {if (!item.disabled || item.checked) item.run();}}>
+                {item.checked !== undefined && <span className="twgit-branch-check" aria-hidden="true">{item.checked ? '✓' : ''}</span>}
+                {item.label}
+            </button>)}
+        </div>}
+        {mode === 'create' && <div ref={popup} className="twgit-branch-popup" role="dialog" aria-label={labels.newBranchTitle}
+            onKeyDown={onMenuKey}>
+            <form onSubmit={event => void submit(event)}>
+                <label>{labels.newBranch} <input value={name} required disabled={creating} aria-invalid={createError ? true : undefined}
+                    onChange={event => setName(event.currentTarget.value)}/></label>
+                <label><input type="checkbox" checked={checkout} disabled={creating}
+                    onChange={event => setCheckout(event.currentTarget.checked)}/> {labels.switchAfterCreate}</label>
+                {createError && <p className="twgit-graph-form-error" role="alert">{createError}</p>}
+                <span className="twgit-graph-form-actions">
+                    <button type="submit" disabled={creating || state.busy || !name.trim()}>{labels.createBranch}</button>
+                    <button type="button" disabled={creating} onClick={() => close()}>{labels.cancel}</button>
+                </span>
+            </form>
+        </div>}
+    </div>;
+}

package/src/filesystem.ts

@@ -2,7 +2,8 @@ export class GitPanelError extends Error {
     constructor(public code: 'invalid' | 'changed' | 'large' | 'unsupported' | 'pullUnsafe' | 'diverged' |
         'session' | 'pushUnknown' | 'pushRefresh' | 'rollbackFailed' | 'remoteFailed' |
         'saveFirst' | 'author' | 'nothingStaged' | 'commitMessage' |
-        'switchUnsafe' | 'branchExists' | 'branchName' | 'locked', message: string = code) {
+        'switchUnsafe' | 'branchExists' | 'branchConflict' | 'pullRequestBranch' | 'branchName' | 'locked' |
+        'pullRequestNotFound' | 'forbidden' | 'network' | 'baseMissing', message: string = code) {
         super(message);
         this.name = 'GitPanelError';
     }

package/src/github-pull-requests.ts

@@ -165,6 +165,13 @@ export function createGitHubPullRequests(repository: string, send: typeof fetch
         await request(repoPath(name) + '/contents/' + contentPath(path) + '?ref=' + revision, signal, 'application/vnd.github.raw+json'), sourceLimit);
 
     return {
+        /** Reads one pull request's title, description, state and both revisions, without its files (one request). */
+        async metadata(number: number, signal: AbortSignal) {
+            if (!Number.isSafeInteger(number) || number < 1) throw invalidResponse();
+            const pr = await metadata(number, signal);
+            if (pr.number !== number) throw invalidResponse();
+            return {...pr, url: 'https://github.com/' + repository + '/pull/' + number};
+        },
         async list(page: number, signal: AbortSignal) {
             const result = await json(repo + '/pulls?state=all&sort=updated&per_page=20&page=' + page, signal);
             if (!Array.isArray(result)) throw invalidResponse();