Method onOpen

src/settings/tabs/integrationsTab.ts:2721–2891

()

	}

	onOpen(): void {
		const { contentEl } = this;
		contentEl.empty();
		contentEl.addClass("tasknotes-webhook-modal");

		// Modal header with icon
		const header = contentEl.createDiv({ cls: "tasknotes-webhook-modal-header" });
		const headerIcon = header.createSpan({ cls: "tasknotes-webhook-modal-icon" });
		setIcon(headerIcon, "webhook");
		header.createEl("h2", { text: "Add webhook", cls: "tasknotes-webhook-modal-title" });

		// URL input section
		const urlSection = contentEl.createDiv({ cls: "tasknotes-webhook-modal-section" });
		new Setting(urlSection)
			.setName("Webhook URL")
			.setDesc("The endpoint where webhook payloads will be sent")
			.addText((text) => {
				text.inputEl.setAttribute("aria-label", "Webhook URL");
				return text
					.setPlaceholder("HTTPS://your-service.com/webhook")
					.setValue(this.url)
					.onChange((value) => {
						this.url = value;
					});
			});

		// Events selection section
		const eventsSection = contentEl.createDiv({ cls: "tasknotes-webhook-modal-section" });
		const eventsHeader = eventsSection.createDiv({
			cls: "tasknotes-webhook-modal-subsection-header",
		});
		const eventsIcon = eventsHeader.createSpan();
		setIcon(eventsIcon, "zap");
		eventsHeader.createEl("h3", { text: "Events to subscribe to" });

		const eventsGrid = eventsSection.createDiv({ cls: "tasknotes-webhook-events-list" });

		WEBHOOK_EVENT_OPTIONS.forEach((event) => {
			new Setting(eventsGrid)
				.setName(event.label)
				.setDesc(event.desc)
				.addToggle((toggle) => {
					toggle.toggleEl.setAttribute(
						"aria-label",
						`Subscribe to ${event.label} events`
					);
					return toggle
						.setValue(this.selectedEvents.includes(event.id))
						.onChange((value) => {
							if (value) {
								this.selectedEvents.push(event.id);
							} else {
								const index = this.selectedEvents.indexOf(event.id);
								if (index > -1) {
									this.selectedEvents.splice(index, 1);
								}
							}
						});