src/vs/workbench/contrib/mergeEditor/browser/view/editors/inputCodeEditorView.ts/MergeConflictGutterItemView/constructor
class MergeConflictGutterItemView:	constructor(
		item: ModifiedBaseRangeGutterItemModel,
		target: HTMLElement,
		contextMenuService: IContextMenuService,
	) {
		super();

		this.item = observableValue('item', item);

		const checkBox = new Toggle({
			isChecked: false,
			title: '',
			icon: Codicon.check,
			...defaultToggleStyles
		});
		checkBox.domNode.classList.add('accept-conflict-group');

		this._register(
			addDisposableListener(checkBox.domNode, EventType.MOUSE_DOWN, (e) => {
				const item = this.item.get();
				if (!item) {
					return;
				}

				if (e.button === /* Right */ 2) {
					e.stopPropagation();
					e.preventDefault();

					contextMenuService.showContextMenu({
						getAnchor: () => checkBox.domNode,
						getActions: () => item.getContextMenuActions(),
					});

				} else if (e.button === /* Middle */ 1) {
					e.stopPropagation();
					e.preventDefault();

					item.toggleBothSides();
				}
			})
		);

		this._register(
			autorun('Update Checkbox', (reader) => {
				const item = this.item.read(reader)!;
				const value = item.toggleState.read(reader);
				const iconMap: Record<InputState, { icon: Codicon | undefined; checked: boolean; title: string }> = {
					[InputState.excluded]: { icon: undefined, checked: false, title: localize('accept.excluded', "Accept") },
					[InputState.unrecognized]: { icon: Codicon.circleFilled, checked: false, title: localize('accept.conflicting', "Accept (result is dirty)") },
					[InputState.first]: { icon: Codicon.check, checked: true, title: localize('accept.first', "Undo accept") },
					[InputState.second]: { icon: Codicon.checkAll, checked: true, title: localize('accept.second', "Undo accept (currently second)") },
				};
				const state = iconMap[value];
				checkBox.setIcon(state.icon);
				checkBox.checked = state.checked;
				checkBox.setTitle(state.title);

				if (!item.enabled.read(reader)) {
					checkBox.disable();
				} else {
					checkBox.enable();
				}
			})
		);

		this._register(autorun('Update Checkbox CSS ClassNames', (reader) => {
			const state = this.item.read(reader).state.read(reader);
			const classNames = [
				'merge-accept-gutter-marker',
				state.handled && 'handled',
				state.focused && 'focused',
				this.isMultiLine.read(reader) ? 'multi-line' : 'single-line',
			];
			target.className = classNames.filter(c => typeof c === 'string').join(' ');
		}));

		this._register(checkBox.onChange(() => {
			transaction(tx => {
				/** @description Handle Checkbox Change */
				this.item.get()!.setState(checkBox.checked, tx);
			});
		}));

		target.appendChild(h('div.background', [noBreakWhitespace]).root);
		target.appendChild(
			this.checkboxDiv = h('div.checkbox', [h('div.checkbox-background', [checkBox.domNode])]).root
		);
	}