@esportsplus/ui 0.57.0 → 0.58.0

package/src/components/editor/workspace/statusbar.ts

@@ -0,0 +1,255 @@
+import { flush, peek, reactive, read, signal, untrack, write } from '@esportsplus/reactivity';
+import { html, type Renderable } from '@esportsplus/template';
+import icon from '~/components/icon';
+import status from '~/components/inline-edit/status';
+import tooltip from '~/components/tooltip';
+import type { Controller as MenuController, Item } from '~/components/tooltip/menu';
+import type { Controller as CodeController, Language, Options } from '../code';
+import type { WorkspaceEditorController } from '.';
+import type { EditorWorkspaceModel, WorkspaceTab } from './model';
+import {
+    AUTO_SAVE_MODES,
+    AutoSave,
+    INDENT_SIZES,
+    indentation,
+    indentLabel,
+    LANGUAGES,
+    lineEndings,
+    type AutoSaveMode,
+    type Indentation
+} from './status';
+import alert from '@esportsplus/ui/svg/circle-alert.svg';
+import check from '@esportsplus/ui/svg/check.svg';
+import warning from '@esportsplus/ui/svg/warning.svg';
+import '~/components/inline-edit/scss/index.scss';
+import './scss/status.scss';
+
+
+type Choice = 'autoSave' | 'indent' | 'language';
+
+
+const CHOICES: Record<Choice, string> = {
+    autoSave: 'Auto save',
+    indent: 'Indentation',
+    language: 'Language'
+};
+
+
+function isCode(controller: WorkspaceEditorController): controller is CodeController {
+    return 'nextProblem' in controller && 'state' in controller;
+}
+
+function mark(selected: () => boolean) {
+    return () => html`${() => selected() && icon({ 'aria-hidden': 'true', class: 'code-workspace-choice-icon' }, check)}`;
+}
+
+
+// The status bar's editor items, the auto save status that takes the save button's place, and the menu their small
+// choices open in.
+const statusbar = (model: EditorWorkspaceModel, nextProblem: () => Promise<boolean>) => {
+    let autosave = new AutoSave(model),
+        choice = signal<Choice>('language'),
+        editor = signal<CodeController | undefined>(undefined),
+        menu: MenuController | undefined,
+        // Language and indentation picked for a tab, over the workspace's editor options.
+        overrides = new WeakMap<WorkspaceTab, Options>(),
+        revision = signal(0),
+        view = reactive({ autoSave: 'off' as AutoSaveMode });
+
+    function choose(next: Choice, element: HTMLElement, below = false) {
+        let bounds = element.getBoundingClientRect();
+
+        write(choice, next);
+        // Items hide by the choice; the menu focuses its first visible one as it opens.
+        flush();
+        menu?.open({ x: bounds.left, y: below ? bounds.bottom : bounds.top });
+    }
+
+    function code(render: (controller: CodeController) => Renderable<unknown>) {
+        return () => {
+            let controller = read(editor);
+
+            return controller && render(controller);
+        };
+    }
+
+    function item(kind: string, label: () => string, onclick: (event: MouseEvent) => void, title: string | (() => string) = label) {
+        return html`
+            <button
+                class='button code-workspace-status-item code-workspace-status-item--${kind}'
+                type='button'
+                ${{ 'aria-label': title, onclick, title }}
+            >
+                ${label}
+            </button>
+        `;
+    }
+
+    function override(next: Options) {
+        let tab = model.state.active;
+
+        if (!tab) {
+            return;
+        }
+
+        overrides.set(tab, { ...overrides.get(tab), ...next });
+        write(revision, peek(revision) + 1);
+        peek(editor)?.focus();
+    }
+
+    let indents: Indentation[] = [false, true].flatMap((tabs) => INDENT_SIZES.map((size) => ({ size, tabs }))),
+        items: Item[] = [
+            ...(Object.keys(LANGUAGES) as Language[]).map((language): Item => ({
+                hidden: () => read(choice) !== 'language',
+                icon: mark(() => read(editor)?.state.language === language),
+                label: LANGUAGES[language],
+                onselect: () => override({ language })
+            })),
+            ...indents.map((indent): Item => ({
+                hidden: () => read(choice) !== 'indent',
+                icon: mark(() => {
+                    let current = read(editor)?.state.indent;
+
+                    return current?.size === indent.size && current.tabs === indent.tabs;
+                }),
+                label: indent.tabs ? `Indent using tabs, size ${indent.size}` : `Indent using ${indent.size} spaces`,
+                onselect: () => override(indentation(indent))
+            })),
+            ...(['off', 'delay', 'focus'] as const).map((mode): Item => ({
+                hidden: () => read(choice) !== 'autoSave',
+                icon: mark(() => view.autoSave === mode),
+                label: AUTO_SAVE_MODES[mode],
+                onselect: () => model.setPreferences({ autoSave: mode })
+            }))
+        ];
+
+    return {
+        attach: (controller: WorkspaceEditorController | undefined) => {
+            write(editor, controller && isCode(controller) ? controller : undefined);
+        },
+        connect: (element: HTMLElement) => {
+            let listening = new AbortController(),
+                update = () => {
+                    view.autoSave = model.state.preferences.autoSave;
+                },
+                disconnect = autosave.connect(),
+                unsubscribe = model.subscribe(update);
+
+            update();
+            element.ownerDocument.defaultView?.addEventListener('blur', () => autosave.blur(true), { signal: listening.signal });
+            element.addEventListener('focusout', (event) => {
+                let panel = (event.target as Element).closest('.code-workspace-editor');
+
+                if (panel && !panel.contains(event.relatedTarget as Node | null)) {
+                    autosave.blur();
+                }
+            }, { signal: listening.signal });
+
+            return () => {
+                listening.abort();
+                unsubscribe();
+                disconnect();
+                write(editor, undefined);
+            };
+        },
+        items: () => html`
+            <div class='code-workspace-status-items'>
+                ${code((controller) => {
+                    let state = controller.state,
+                        problems = () => `${state.problems.errors} errors, ${state.problems.warnings} warnings: go to the next problem`;
+
+                    return html`
+                        ${() => state.selections > 1 && html`<span class='code-workspace-status-item code-workspace-status-item--selections'>${state.selections} selections</span>`}
+                        <button
+                            class='button code-workspace-status-item code-workspace-status-item--problems'
+                            type='button'
+                            ${{
+                                'aria-label': problems,
+                                disabled: () => !state.problems.errors && !state.problems.warnings,
+                                onclick: () => {
+                                    void nextProblem().then((moved) => {
+                                        if (moved) {
+                                            peek(editor)?.focus();
+                                        }
+                                    });
+                                },
+                                title: problems
+                            }}
+                        >
+                            ${icon({ 'aria-hidden': 'true', class: 'code-workspace-status-icon' }, alert)}
+                            ${() => state.problems.errors}
+                            ${icon({ 'aria-hidden': 'true', class: 'code-workspace-status-icon' }, warning)}
+                            ${() => state.problems.warnings}
+                        </button>
+                        ${item(
+                            'language',
+                            () => LANGUAGES[state.language],
+                            (event) => choose('language', event.currentTarget as HTMLElement),
+                            'Select language'
+                        )}
+                        ${item(
+                            'indent',
+                            () => indentLabel(state.indent),
+                            (event) => choose('indent', event.currentTarget as HTMLElement),
+                            'Select indentation'
+                        )}
+                        ${item(
+                            'eol',
+                            () => (state.lineEnding === 'crlf' ? 'CRLF' : 'LF'),
+                            () => {
+                                lineEndings(controller.document, state.lineEnding === 'crlf' ? 'lf' : 'crlf');
+                            },
+                            () => (state.lineEnding === 'crlf' ? 'Convert line endings to LF' : 'Convert line endings to CRLF')
+                        )}
+                        <span class='code-workspace-status-item code-workspace-status-item--encoding' title='Encoding'>UTF-8</span>
+                    `;
+                })}
+                ${item(
+                    'autosave',
+                    () => `Auto Save: ${AUTO_SAVE_MODES[view.autoSave]}`,
+                    (event) => choose('autoSave', event.currentTarget as HTMLElement),
+                    'Select auto save'
+                )}
+            </div>
+        `,
+        menu: () => tooltip.context(
+            {
+                class: 'code-workspace-menu',
+                controller: (value: MenuController) => {
+                    menu = value;
+                },
+                items,
+                [tooltip.context.panel]: { 'aria-label': () => CHOICES[read(choice)], class: 'code-workspace-choices code-workspace-menu-panel' }
+            },
+            ''
+        ),
+        options: (tab: WorkspaceTab) => {
+            read(revision);
+
+            return overrides.get(tab);
+        },
+        // While auto save is on, its status stands where the save button was.
+        save: (button: () => Renderable<unknown>) => () => {
+            if (view.autoSave === 'off') {
+                return button();
+            }
+
+            return html`
+                <button
+                    class='button code-workspace-autosave'
+                    type='button'
+                    ${{
+                        'aria-label': () => `Auto save: ${AUTO_SAVE_MODES[view.autoSave]}`,
+                        onclick: (event: MouseEvent) => choose('autoSave', event.currentTarget as HTMLElement, true),
+                        title: () => `Auto save: ${AUTO_SAVE_MODES[view.autoSave]}`
+                    }}
+                >
+                    ${untrack(() => status.render(autosave.status))}
+                </button>
+            `;
+        }
+    };
+};
+
+
+export default statusbar;

package/src/components/editor/workspace/strip.ts

@@ -0,0 +1,273 @@
+import { flush, reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import icon from '~/components/icon';
+import tooltip from '~/components/tooltip';
+import type { Controller as MenuController, Item } from '~/components/tooltip/menu';
+import { mac } from '~/shared/platform';
+import diffs from '../diffs';
+import type { WorkspaceEditor } from './index';
+import type { EditorWorkspaceModel, WorkspaceTab } from './model';
+import { sides, type MergeSides } from './tabs';
+import pin from '@esportsplus/ui/svg/pin.svg';
+import './scss/tabs.scss';
+
+
+type Options = {
+    isFile: (path: string) => boolean;
+    model: EditorWorkspaceModel;
+    // Puts the active tab in the pane again, so a merge starting or ending on it takes effect.
+    remount: VoidFunction;
+    reveal: (path: string) => void;
+};
+
+
+function name(path: string) {
+    return path.slice(path.lastIndexOf('/') + 1);
+}
+
+
+/** Pinned and preview tabs, the tab context menu, merging a conflicted tab and comparing two files. */
+const strip = ({ isFile, model, remount, reveal }: Options) => {
+    let chosen = '',
+        controller: MenuController | undefined,
+        merging = new WeakMap<WorkspaceTab, MergeSides>(),
+        subject = reactive({ compare: false, conflicted: false, path: '', pinned: false });
+
+    function compare(tab: WorkspaceTab): WorkspaceEditor {
+        let { modified, original, paths } = tab.compare!;
+
+        return () => diffs({
+            class: 'code-workspace-document code-workspace-compare',
+            filename: `${paths[0]} ↔ ${paths[1]}`,
+            modified,
+            original
+        });
+    }
+
+    function merge(tab: WorkspaceTab, found: MergeSides): WorkspaceEditor {
+        return () => html`
+            <div class='code-workspace-document code-workspace-merge'>
+                <div class='code-workspace-merge-bar'>
+                    <span class='code-workspace-merge-title'>Merging ${tab.path}</span>
+                    <button
+                        class='button code-workspace-merge-cancel'
+                        type='button'
+                        ${{
+                            onclick: () => {
+                                merging.delete(tab);
+                                remount();
+                            }
+                        }}
+                    >
+                        Cancel merge
+                    </button>
+                </div>
+                ${diffs.merge({
+                    base: found.base,
+                    class: 'code-workspace-merge-editor',
+                    current: found.current,
+                    filename: tab.path,
+                    incoming: found.incoming,
+                    onresolve: (result) => {
+                        merging.delete(tab);
+                        tab.document.setValue(result);
+                        remount();
+                        void model.save(tab);
+                    }
+                })}
+            </div>
+        `;
+    }
+
+    let items: Item[] = [
+            {
+                hidden: () => subject.compare || subject.pinned,
+                label: 'Pin',
+                onselect: () => model.pin(subject.path)
+            },
+            {
+                hidden: () => !subject.pinned,
+                label: 'Unpin',
+                onselect: () => model.unpin(subject.path)
+            },
+            {
+                hidden: () => !subject.conflicted,
+                label: 'Merge Conflicts',
+                onselect: () => {
+                    void api.merge(subject.path);
+                }
+            },
+            {
+                hint: mac() ? '⌘W' : 'Ctrl+W',
+                label: 'Close',
+                onselect: () => {
+                    void model.close(subject.path);
+                }
+            },
+            {
+                label: 'Close Others',
+                onselect: () => {
+                    let path = subject.path;
+
+                    void model.closeOthers(path).then((closed) => closed && model.activate(path));
+                }
+            },
+            {
+                label: 'Close to the Right',
+                onselect: () => {
+                    let path = subject.path;
+
+                    void model.closeRight(path).then((closed) => closed && model.activate(path));
+                }
+            },
+            {
+                label: 'Close Saved',
+                onselect: () => {
+                    void model.closeSaved();
+                }
+            },
+            {
+                hidden: () => subject.compare,
+                label: 'Copy Path',
+                onselect: () => {
+                    void model.copyPath(subject.path);
+                }
+            },
+            {
+                hidden: () => subject.compare,
+                label: 'Reveal in Explorer',
+                onselect: () => reveal(subject.path)
+            }
+        ];
+
+    let api = {
+        // Spread on a tab: its preview and pinned looks, its context menu, and a double click that keeps a preview.
+        attributes(tab: WorkspaceTab) {
+            let modifiers = [tab.pinned && 'code-workspace-tab--pinned', tab.preview && 'code-workspace-tab--preview'].filter(Boolean);
+
+            return {
+                ...(modifiers.length ? { class: modifiers.join(' ') } : {}),
+                oncontextmenu: (event: MouseEvent) => api.open(tab, event),
+                ondblclick: () => {
+                    if (tab.preview) {
+                        void model.open(tab.path);
+                    }
+                }
+            };
+        },
+
+        // The view a tab shows in place of its editor: a compare tab's diff, or the merge started on it.
+        editor(tab: WorkspaceTab): WorkspaceEditor | undefined {
+            if (tab.compare) {
+                return compare(tab);
+            }
+
+            let found = merging.get(tab);
+
+            return found && merge(tab, found);
+        },
+
+        // Tree context menu entries, against the paths the menu opened on.
+        items(paths: () => string[]): Item[] {
+            let files = () => paths().filter(isFile);
+
+            return [
+                {
+                    hidden: () => paths().length !== 1 || files().length !== 1,
+                    label: 'Select for Compare',
+                    onselect: () => {
+                        chosen = paths()[0];
+                        model.status(`Selected ${chosen} for compare`);
+                    }
+                },
+                {
+                    hidden: () => {
+                        let list = files();
+
+                        return list.length !== paths().length || !(list.length === 2 || (list.length === 1 && !!chosen && chosen !== list[0]));
+                    },
+                    label: 'Compare with Selected',
+                    onselect: () => {
+                        let list = files();
+
+                        void (list.length === 2 ? model.compare(list[0], list[1]) : model.compare(chosen, list[0]));
+                    }
+                },
+                {
+                    hidden: () => paths().length !== 1 || files().length !== 1,
+                    label: 'Merge Conflicts',
+                    onselect: () => {
+                        void api.merge(paths()[0]);
+                    }
+                }
+            ];
+        },
+
+        label(tab: WorkspaceTab) {
+            return tab.compare ? `${name(tab.compare.paths[0])} ↔ ${name(tab.compare.paths[1])}` : name(tab.path);
+        },
+
+        // Shows the merge editor in place of the file's editor, with the versions its conflict markers hold.
+        async merge(target: WorkspaceTab | string) {
+            let tab = typeof target === 'string' ? await model.open(target) : target;
+
+            if (!tab || tab.compare) {
+                return;
+            }
+
+            let found = sides(tab.document.value);
+
+            if (!found) {
+                model.status(`${tab.path} has no conflict markers`);
+                return;
+            }
+
+            merging.set(tab, found);
+            model.activate(tab);
+            remount();
+        },
+
+        menu: () => tooltip.context(
+            {
+                class: 'code-workspace-menu',
+                controller: (value: MenuController) => {
+                    controller = value;
+                },
+                items,
+                [tooltip.context.panel]: { 'aria-label': 'Tab actions', class: 'code-workspace-menu-panel' }
+            },
+            ''
+        ),
+
+        open(tab: WorkspaceTab, event: MouseEvent) {
+            if (!controller) {
+                return;
+            }
+
+            event.preventDefault();
+
+            // A context menu key reports no pointer, so the menu opens under the tab instead.
+            let box = event.button === 2 ? undefined : (event.currentTarget as HTMLElement).getBoundingClientRect();
+
+            subject.compare = !!tab.compare;
+            subject.conflicted = !tab.compare && !!sides(tab.document.value);
+            subject.path = tab.path;
+            subject.pinned = tab.pinned;
+            flush();
+            controller.open(box ? { x: box.left, y: box.bottom } : { x: event.clientX, y: event.clientY });
+        },
+
+        pin(tab: WorkspaceTab) {
+            return tab.pinned && icon({ 'aria-label': 'Pinned', class: 'code-workspace-tab-pin', role: 'img' }, pin);
+        },
+
+        title(tab: WorkspaceTab) {
+            return tab.compare ? `${tab.compare.paths[0]} ↔ ${tab.compare.paths[1]}` : tab.path;
+        }
+    };
+
+    return api;
+};
+
+
+export default strip;

package/src/components/editor/workspace/tabs.ts

@@ -0,0 +1,106 @@
+import { EditorDocument } from '../code/document';
+import { conflictMarkers, resolveMarker } from '../diffs/diff3';
+import type { WorkspaceCompare, WorkspaceTab } from './model';
+
+
+type Closable = 'others' | 'right' | 'saved';
+
+// A conflicted file split back into the versions its markers hold, as the merge editor takes them.
+type MergeSides = { base: string | null; current: string; incoming: string };
+
+
+// No workspace path holds a NUL, so a compare tab's key never matches a file's path, nor lies inside a folder.
+const SEPARATOR = '\u0000';
+
+const TRAILING_EOL = /(?:\r\n|\r|\n)$/;
+
+
+// Bulk closes leave pinned tabs and the tab they were asked from; 'saved' also keeps drafts of files gone from disk.
+const closable = (tabs: readonly WorkspaceTab[], kind: Closable, path?: string) => {
+    let at = tabs.findIndex((tab) => tab.path === path);
+
+    return tabs.filter((tab, i) => {
+        if (tab.pinned || tab.path === path) {
+            return false;
+        }
+
+        if (kind === 'right') {
+            return at !== -1 && i > at;
+        }
+
+        return kind === 'others' || (!tab.missing && tab.document.value === tab.saved);
+    });
+};
+
+const compareKey = (original: string, modified: string) => `${SEPARATOR}${original}${SEPARATOR}${modified}`;
+
+// A compare tab's document stays empty and saved, so nothing that reads tabs ever finds it dirty.
+const compareTab = (id: number, compare: WorkspaceCompare): WorkspaceTab => ({
+    compare,
+    document: new EditorDocument(''),
+    id,
+    missing: false,
+    path: compareKey(compare.paths[0], compare.paths[1]),
+    pinned: false,
+    preview: false,
+    saved: '',
+    scroll: { left: 0, top: 0 }
+});
+
+// Pinned tabs lead; a stable sort keeps every other tab where it was among its group.
+const order = (tabs: WorkspaceTab[]) => {
+    tabs.sort((a, b) => Number(b.pinned) - Number(a.pinned));
+};
+
+// A preview tab takes the place of the last one, which the caller then removes.
+const place = (tabs: WorkspaceTab[], tab: WorkspaceTab) => {
+    let at = tab.preview ? tabs.findIndex((item) => item.preview) : -1;
+
+    if (at === -1) {
+        tabs.push(tab);
+        return;
+    }
+
+    let replaced = tabs[at];
+
+    tabs.splice(at, 0, tab);
+
+    return replaced;
+};
+
+const sides = (text: string): MergeSides | null => {
+    let markers = conflictMarkers(text);
+
+    if (!markers.length) {
+        return null;
+    }
+
+    let at = 0,
+        base: string | null = '',
+        current = '',
+        incoming = '';
+
+    for (let i = 0, n = markers.length; i < n; i++) {
+        let marker = markers[i],
+            between = text.slice(at, marker.from);
+
+        if (base !== null && marker.base !== null) {
+            base += between + (marker.to === text.length && !TRAILING_EOL.test(text) ? marker.base.replace(TRAILING_EOL, '') : marker.base);
+        }
+        else {
+            base = null;
+        }
+
+        current += between + resolveMarker(text, marker, 'current');
+        incoming += between + resolveMarker(text, marker, 'incoming');
+        at = marker.to;
+    }
+
+    let rest = text.slice(at);
+
+    return { base: base === null ? null : base + rest, current: current + rest, incoming: incoming + rest };
+};
+
+
+export { closable, compareKey, compareTab, order, place, sides };
+export type { Closable, MergeSides };

package/src/components/error/index.ts

@@ -24,7 +24,7 @@ type Direction = 'e' | 'en' | 'es' | 'n' | 'ne' | 'nw' | 's' | 'se' | 'sw' | 'w'
 
 
 // The morph tooltip's '--morph-close-duration', plus a frame: a new message reopens once the old one has landed.
-const CLOSE = 180;
+const CLOSE = 210;
 
 
 // Wraps one control, so it works on any element that keeps its error in 'state.error': the control shakes and its