@flowdular/sandbox 0.2.0

package/src/client/ConnectView.tsrx

@@ -0,0 +1,86 @@
+import { Alert, Button, FormField, Tag } from '@flowdular/sdk/ui';
+import type { SandboxState } from './api.ts';
+import { useTranslation } from './i18n.ts';
+
+export interface ConnectViewProps {
+	readonly state: SandboxState;
+	readonly busy: boolean;
+	readonly error: string;
+	readonly onConnect: (input: {
+		readonly platformUrl: string;
+		readonly platformToken: string;
+	}) => void;
+}
+
+function formValue(form: FormData, key: string): string {
+	const value = form.get(key);
+	return typeof value === 'string' ? value.trim() : '';
+}
+
+export function ConnectView(props: ConnectViewProps) @{
+	const { t } = useTranslation();
+	const submit = (event: SubmitEvent) => {
+		event.preventDefault();
+		const form = new FormData(event.currentTarget as HTMLFormElement);
+		props.onConnect({
+			platformUrl: formValue(form, 'platformUrl'),
+			platformToken: formValue(form, 'platformToken'),
+		});
+	};
+
+	<div class="connect">
+		<section class="connect__card">
+			<div class="connect__head">
+				<Tag tone="info" mono>{props.state.configuration.mode}</Tag>
+				<h1>{t('sandbox.connect.title')}</h1>
+				<p>{t('sandbox.connect.description')}</p>
+			</div>
+			<form class="ui-form" onSubmit={submit}>
+				<FormField
+					label={t('sandbox.connect.address.label')}
+					help={t('sandbox.connect.address.help')}
+					required
+				>
+					<input
+						class="ui-input"
+						name="platformUrl"
+						defaultValue={props.state.configuration.platformUrl}
+						placeholder={t('sandbox.connect.address.placeholder')}
+						required
+					/>
+				</FormField>
+				<FormField
+					label={t('sandbox.connect.token.label')}
+					help={t('sandbox.connect.token.help')}
+					required
+				>
+					<input
+						class="ui-input ui-mono"
+						name="platformToken"
+						type="password"
+						placeholder={t('sandbox.connect.token.placeholder')}
+						required
+					/>
+				</FormField>
+				@if (props.state.connection.error && !props.error) {
+					<Alert tone="warning">{props.state.connection.error.message}</Alert>
+				}
+				@if (props.error) {
+					<Alert>{props.error}</Alert>
+				}
+				<div class="ui-form__foot">
+					<span class="ui-help">{t('sandbox.connect.roles', {
+						count: props.state.roles.length,
+					})}</span>
+					<div class="ui-form__actions">
+						<Button variant="primary" type="submit" disabled={props.busy}>
+							{props.busy
+								? t('sandbox.connect.connecting')
+								: t('sandbox.connect.action')}
+						</Button>
+					</div>
+				</div>
+			</form>
+		</section>
+	</div>
+}

package/src/client/DiffPane.tsrx

@@ -0,0 +1,150 @@
+import { Button, EmptyState, Tag } from '@flowdular/sdk/ui';
+import type { DiffLine, FileDiff } from '../server/diff.ts';
+import { tokenClass, tokenize } from './highlight.ts';
+import { useTranslation } from './i18n.ts';
+
+export interface ModuleDiff extends FileDiff {
+	readonly module: string;
+}
+
+export interface DiffPaneProps {
+	readonly diffs: readonly ModuleDiff[];
+	/* Show one module only; empty means every module of the session. */
+	readonly activeModule: string;
+	readonly onAsk: (path: string, snippet: string) => void;
+}
+
+interface DiffGroup {
+	readonly module: string;
+	readonly diffs: readonly ModuleDiff[];
+}
+
+function changeTone(change: FileDiff['change']): 'success' | 'info' | 'danger' {
+	if (change === 'created') return 'success';
+	return change === 'deleted' ? 'danger' : 'info';
+}
+
+/* One group per module, in the order the modules appear in the diff, so a
+   session that spans modules reads as one list with headers instead of an
+   undifferentiated file list. */
+function groupByModule(diffs: readonly ModuleDiff[]): readonly DiffGroup[] {
+	const groups: { module: string; diffs: ModuleDiff[] }[] = [];
+	for (const diff of diffs) {
+		const group = groups.find((entry) => entry.module === diff.module);
+		if (group) group.diffs.push(diff);
+		else groups.push({ module: diff.module, diffs: [diff] });
+	}
+	return groups;
+}
+
+/* A key may only read the loop variable, so it is derived from the line
+   itself: the pair of line numbers is unique inside one hunk. */
+function lineKey(line: DiffLine): string {
+	return `${line.type}:${line.oldLine ?? '-'}:${line.newLine ?? '-'}`;
+}
+
+function fileKey(diff: ModuleDiff): string {
+	return `${diff.module}/${diff.path}`;
+}
+
+function groupKey(group: DiffGroup): string {
+	return group.module;
+}
+
+function sign(type: 'context' | 'add' | 'del'): string {
+	if (type === 'add') return '+';
+	return type === 'del' ? '-' : ' ';
+}
+
+export function DiffPane(props: DiffPaneProps) @{
+	const { t } = useTranslation();
+	const visible =
+		props.activeModule
+			? props.diffs.filter((diff) => diff.module === props.activeModule)
+			: props.diffs;
+	const groups = groupByModule(visible);
+
+	<div class="sandbox__scroll">
+		@if (visible.length === 0) {
+			<EmptyState icon="code" title={t('sandbox.diff.empty.title')}>{t(
+				'sandbox.diff.empty.hint',
+			)}</EmptyState>
+		} @else {
+			<div class="diff">
+				@for (const group of groups; key groupKey(group)) {
+					<section class="diff__group">
+						@if (groups.length > 1) {
+							<header class="diff__module">
+								<span class="ui-mono">{'modules/' + group.module}</span>
+								<span class="ui-help">
+									{group.diffs.length === 1
+										? t('sandbox.diff.file.one')
+										: t('sandbox.diff.file.other', {
+												count: group.diffs.length,
+											})}
+								</span>
+							</header>
+						}
+						@for (const diff of group.diffs; key fileKey(diff)) {
+							<article class="diff__file">
+								<header class="diff__file-head">
+									<Tag tone={changeTone(diff.change)} dot>{t(
+										'sandbox.diff.change.' + diff.change,
+									)}</Tag>
+									<span class="diff__path">{diff.path}</span>
+									<span class="diff__stat diff__stat--add">
+										{'+' + diff.additions}
+									</span>
+									<span class="diff__stat diff__stat--del">
+										{'-' + diff.deletions}
+									</span>
+									<span class="sandbox__spacer"></span>
+									<Button
+										size="sm"
+										variant="ghost"
+										onClick={() => props.onAsk(
+											'modules/' + diff.module + '/' + diff.path,
+											'',
+										)}
+									>{t('sandbox.diff.ask')}</Button>
+								</header>
+								@if (diff.truncated) {
+									<p class="ui-help" style="padding: 10px 12px">
+										{diff.binary
+											? t('sandbox.diff.binary')
+											: t('sandbox.diff.large')}
+									</p>
+								} @else {
+									@for (const hunk of diff.hunks; key hunk.header) {
+										<div class="diff__hunk">
+											<div class="diff__hunk-header">{hunk.header}</div>
+											@for (const line of hunk.lines; key lineKey(line)) {
+												<div class={['diff__line', 'diff__line--' + line.type]}>
+													<span class="diff__gutter">
+														{line.newLine === null
+															? line.oldLine ?? ''
+															: line.newLine}
+													</span>
+													<code class="diff__code">
+														{sign(line.type)}
+														@for (const token of tokenize(
+															line.text,
+														); key token.id) {
+															<span
+																class={tokenClass(token.kind)}
+															>{token.text}</span>
+														}
+													</code>
+												</div>
+											}
+										</div>
+									}
+								}
+							</article>
+						}
+					</section>
+				}
+			</div>
+		}
+	</div>
+}