Add button to enable protocol handler in settings

components/app.js

@@ -1697,7 +1697,15 @@ export default class App extends Component {
 	}
 
 	handleOpenSettingsClick() {
-		this.openDialog("settings");
+		let showProtocolHandler = false;
+		for (let [id, client] of this.clients) {
+			if (client.caps.enabled.has("soju.im/bouncer-networks")) {
+				showProtocolHandler = true;
+				break;
+			}
+		}
+
+		this.openDialog("settings", { showProtocolHandler });
 	}
 
 	handleSettingsChange(settings) {
@@ -1880,6 +1888,7 @@ export default class App extends Component {
 				<${Dialog} title="Settings" onDismiss=${this.dismissDialog}>
 					<${SettingsForm}
 						settings=${this.state.settings}
+						showProtocolHandler=${dialogData.showProtocolHandler}
 						onChange=${this.handleSettingsChange}
 						onDisconnect=${() => this.disconnectAll()}
 						onClose=${() => this.dismissDialog()}

components/settings-form.js

@@ -26,7 +26,35 @@ export default class SettingsForm extends Component {
 		this.props.onClose();
 	}
 
+	registerProtocol() {
+		let url = window.location.origin + window.location.pathname + "?open=%s";
+		try {
+			navigator.registerProtocolHandler("irc", url);
+			navigator.registerProtocolHandler("ircs", url);
+		} catch (err) {
+			console.error("Failed to register protocol handler: ", err);
+		}
+	}
+
 	render() {
+		let protocolHandler = null;
+		if (this.props.showProtocolHandler) {
+			protocolHandler = html`
+				<div class="protocol-handler">
+					<div class="left">
+						Set gamja as your default IRC client for this browser.
+						IRC links will be automatically opened here.
+					</div>
+					<div class="right">
+						<button type="button" onClick=${() => this.registerProtocol()}>
+							Enable
+						</button>
+					</div>
+				</div>
+				<br/><br/>
+			`;
+		}
+
 		return html`
 			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
 				<label>
@@ -70,6 +98,8 @@ export default class SettingsForm extends Component {
 				</label>
 				<br/><br/>
 
+				${protocolHandler}
+
 				<button type="button" class="danger" onClick=${() => this.props.onDisconnect()}>
 					Disconnect
 				</button>

style.css

@@ -533,6 +533,14 @@ details summary[role="button"] {
 	overflow: auto; /* hack to clear floating elements */
 }
 
+.dialog .protocol-handler {
+	display: flex;
+	flex-direction: row;
+}
+.dialog .protocol-handler .left {
+	flex-grow: 1;
+}
+
 kbd {
 	background-color: #f0f0f0;
 	border: 1px solid #bfbfbf;