jgamboaandClaude Fable 5
a0f56822cd
Custom signal-based runtime (no i18n dependency): shared src/shared/i18n dictionaries, ui I18nService.t() reactive by construction so language switches live, and a backend i18n.ts for native menus + thrown errors. Every user-facing string keyed across templates, toasts, dialogs, file kinds, columns, macOS menu/context menus, and errors. Language picker in Options (auto-detects OS locale, falls back to English); switching relabels the webview and native chrome instantly. English/Spanish/French/ German fully drafted; Chinese/Japanese/Basque drafted, flagged for native review. Docs updated. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import {
|
|
Component,
|
|
ElementRef,
|
|
afterNextRender,
|
|
inject,
|
|
input,
|
|
signal,
|
|
viewChild,
|
|
} from '@angular/core';
|
|
import { I18nService } from '../i18n.service';
|
|
import { DialogsService, type PromptRequest } from '../dialogs.service';
|
|
import { FocusService } from '../focus.service';
|
|
|
|
@Component({
|
|
selector: 'app-prompt-dialog',
|
|
template: `
|
|
<div class="fixed inset-0 z-40 grid place-items-center bg-black/40" (mousedown)="cancel()">
|
|
<div
|
|
class="w-96 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
|
|
(mousedown)="$event.stopPropagation()"
|
|
>
|
|
<h2 class="text-sm font-semibold">{{ request().title }}</h2>
|
|
<input
|
|
#box
|
|
[value]="value()"
|
|
(input)="value.set($any($event.target).value)"
|
|
(keydown.enter)="submit()"
|
|
(keydown.escape)="cancel()"
|
|
[placeholder]="request().placeholder ?? ''"
|
|
spellcheck="false"
|
|
class="mt-3 h-8 w-full rounded-md border border-input bg-transparent px-2 text-sm outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
<div class="mt-4 flex justify-end gap-2">
|
|
<button
|
|
(click)="cancel()"
|
|
class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
|
|
>
|
|
{{ i18n.t('common.cancel') }}
|
|
</button>
|
|
<button
|
|
(click)="submit()"
|
|
[disabled]="!value().trim()"
|
|
class="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
{{ request().confirmLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
})
|
|
export class PromptDialog {
|
|
readonly i18n = inject(I18nService);
|
|
readonly request = input.required<PromptRequest>();
|
|
readonly value = signal('');
|
|
|
|
private readonly box = viewChild.required<ElementRef<HTMLInputElement>>('box');
|
|
private readonly dialogs = inject(DialogsService);
|
|
private readonly focus = inject(FocusService);
|
|
|
|
constructor() {
|
|
afterNextRender(() => {
|
|
this.value.set(this.request().initial ?? '');
|
|
const el = this.box().nativeElement;
|
|
el.focus();
|
|
el.select();
|
|
});
|
|
}
|
|
|
|
submit(): void {
|
|
const value = this.value().trim();
|
|
if (!value) return;
|
|
const req = this.request();
|
|
this.close();
|
|
req.onConfirm(value);
|
|
}
|
|
|
|
cancel(): void {
|
|
this.close();
|
|
}
|
|
|
|
private close(): void {
|
|
this.dialogs.prompt.set(null);
|
|
this.focus.bump();
|
|
}
|
|
}
|