cosmicoptima_loom/views.ts

import { LoomSettings, Node, NoteState } from "./common";
import { App, ItemView, Menu, Modal, Setting, WorkspaceLeaf, setIcon } from "obsidian";
import { Range } from "@codemirror/state";
import {
  Decoration,
  DecorationSet,
  EditorView,
  PluginSpec,
  PluginValue,
  WidgetType,
} from "@codemirror/view";
const dialog = require("electron").remote.dialog;

interface NodeContext {
  app: App;
  state: NoteState;
  id: string;
  node: Node;
  deletable: boolean;
}

const showNodeMenu = (event: MouseEvent, { app, state, id, node, deletable }: NodeContext) => {
  const menu = new Menu();

  const menuItem = (name: string, icon: string, callback: () => void) =>
    menu.addItem((item) => {
      item.setTitle(name);
	  item.setIcon(icon);
	  item.onClick(callback);
	});
  
  const zeroArgMenuItem = (name: string, icon: string, event: string) =>
    menuItem(name, icon, () => app.workspace.trigger(event));
  const selfArgMenuItem = (name: string, icon: string, event: string) =>
    menuItem(name, icon, () => app.workspace.trigger(event, id));
  const selfListArgMenuItem = (name: string, icon: string, event: string) =>
    menuItem(name, icon, () => app.workspace.trigger(event, [id]));
  
  if (state.hoisted[state.hoisted.length - 1] === id)
    zeroArgMenuItem("Unhoist", "arrow-down", "loom:unhoist");
  else
    selfArgMenuItem("Hoist", "arrow-up", "loom:hoist");
  
  if (node.bookmarked)
    selfArgMenuItem("Remove bookmark", "bookmark-minus", "loom:toggle-bookmark");
  else
    selfArgMenuItem("Bookmark", "bookmark", "loom:toggle-bookmark");

  menu.addSeparator();
  selfArgMenuItem("Create child", "plus", "loom:create-child");
  selfArgMenuItem("Create sibling", "list-plus", "loom:create-sibling");

  menu.addSeparator();
  selfArgMenuItem("Delete all children", "x", "loom:clear-children");
  selfArgMenuItem("Delete all siblings", "list-x", "loom:clear-siblings");

  if (node.parentId !== null) {
    menu.addSeparator();
	selfArgMenuItem("Merge with parent", "arrow-up-left", "loom:merge-with-parent");
  }

  if (deletable) {
	menu.addSeparator();
	selfListArgMenuItem("Delete", "trash", "loom:delete");
  }
  
  menu.showAtMouseEvent(event);
}

const renderNodeButtons = (
  container: HTMLElement,
  { app, state, id, node, deletable }: NodeContext
) => {
  const button = (label: string, icon: string, callback: (event: MouseEvent) => void) => {
	const button_ = container.createDiv({
	  cls: "loom__node-button",
	  attr: { "aria-label": label },
	});
	setIcon(button_, icon);
	button_.addEventListener("click", event => { event.stopPropagation(); callback(event); });
  };

  button("Show menu", "menu", (event) => showNodeMenu(event, { app, state, id, node, deletable }));

  if (state.hoisted[state.hoisted.length - 1] === id)
	button("Unhoist", "arrow-down", () => app.workspace.trigger("loom:unhoist"));
  else button("Hoist", "arrow-up", () => app.workspace.trigger("loom:hoist", id));

  if (node.bookmarked)
	button(
	  "Remove bookmark",
	  "bookmark-minus",
	  () => app.workspace.trigger("loom:toggle-bookmark", id)
	);
  else
	button("Bookmark", "bookmark", () =>
	  app.workspace.trigger("loom:toggle-bookmark", id)
	);
	
  if (deletable)
	button("Delete", "trash", () => app.workspace.trigger("loom:delete", [id]));
};

export class LoomView extends ItemView {
  getNoteState: () => NoteState | null;
  getSettings: () => LoomSettings;

  tree: HTMLElement;

  constructor(
    leaf: WorkspaceLeaf,
	getNoteState: () => NoteState | null,
	getSettings: () => LoomSettings
  ) {
    super(leaf);

	this.getNoteState = getNoteState;
	this.getSettings = getSettings;
  }

  async onOpen() {
    this.render();
  }

  render() {
    const state = this.getNoteState();
	const settings = this.getSettings();

	const scroll = this.containerEl.scrollTop;

	this.containerEl.empty();
	this.containerEl.addClass("loom__view");

	this.renderNavButtons(settings);
	const container = this.containerEl.createDiv({ cls: "outline" });
	if (settings.showExport) this.renderAltExportInterface(container);
	if (settings.showSearchBar) this.renderSearchBar(container, state);
	if (settings.showSettings) this.renderSettings(container, settings);

	if (!state) {
      container.createDiv({ cls: "pane-empty", text: "No note selected." });
	  return;
	}
	this.renderBookmarks(container, state);
	this.tree = container.createDiv();
	this.renderTree(this.tree, state);

	this.containerEl.scrollTop = scroll;

	// scroll to active node in the tree
	const activeNode = this.tree.querySelector(".is-active");
	if (activeNode){ //&& !container.contains(activeNode)){
	  activeNode.scrollIntoView({ block: "nearest" });
	}
  }

  renderNavButtons(settings: LoomSettings) {
    const navButtonsContainer = this.containerEl.createDiv({ cls: "nav-buttons-container loom__nav-buttons" });

    // buttons to toggle 1) settings 2) node borders in the editor

    const settingNavButton = (
      setting: string,
      value: boolean,
      icon: string,
      label: string
    ) => {
      const button = navButtonsContainer.createDiv({
        cls: `clickable-icon nav-action-button${value ? " is-active" : ""}`,
        attr: { "aria-label": label },
      });
      setIcon(button, icon);
      button.addEventListener("click", () =>
        this.app.workspace.trigger("loom:set-setting", setting, !value)
      );
    };

    settingNavButton(
      "showSettings",
      settings.showSettings,
      "settings",
      "Show settings"
    );
    settingNavButton(
      "showSearchBar",
      settings.showSearchBar,
      "search",
      "Show search bar"
    );
    settingNavButton(
      "showNodeBorders",
      settings.showNodeBorders,
      "separator-vertical",
      "Show node borders in the editor"
    );

	// the import button
	
	const importInput = navButtonsContainer.createEl("input", {
	  cls: "hidden",
	  attr: { type: "file", id: "loom__import-input" },
	});

    const importNavButton = navButtonsContainer.createEl("label", {
      cls: "clickable-icon nav-action-button",
      attr: { "aria-label": "Import JSON", for: "loom__import-input" },
    });
	setIcon(importNavButton, "import");
	
	importInput.addEventListener("change", () => {
	  // @ts-expect-error
	  const path = importInput.files?.[0].path;
	  if (path) this.app.workspace.trigger("loom:import", path);
	});

	// the export button
	
	const exportNavButton = navButtonsContainer.createDiv({
	  cls: `clickable-icon nav-action-button${settings.showExport ? " is-active" : ""}`,
	  attr: { "aria-label": "Export to JSON" },
	});
	setIcon(exportNavButton, "download");

	exportNavButton.addEventListener("click", (event) => {
	  if (event.shiftKey) {
	    this.app.workspace.trigger("loom:set-setting", "showExport", !settings.showExport);
		return;
	  }
	  dialog
	    .showSaveDialog({ title: "Export to JSON", filters: [{ extensions: ["json"] }] })
		.then((result: any) => {
		  if (result && result.filePath)
		    this.app.workspace.trigger("loom:export", result.filePath);
		});
	});
  }

  renderAltExportInterface(container: HTMLElement) {
    const exportContainer = container.createDiv({ cls: "loom__alt-export-field" });
	const exportInput = exportContainer.createEl("input", {
	  attr: { type: "text", placeholder: "Path to export to" },
	});
	const exportButton = exportContainer.createEl("button", {});
	setIcon(exportButton, "download");

	exportButton.addEventListener("click", () => {
	  if (exportInput.value) this.app.workspace.trigger("loom:export", exportInput.value);
	});
  }

  renderSearchBar(container: HTMLElement, state: NoteState | null) {
	const searchBar = container.createEl("input", {
	  cls: "loom__search-bar",
	  value: state?.searchTerm || "",
	  attr: { type: "text", placeholder: "Search" },
	});
	searchBar.addEventListener("input", () => {
	  const state = this.getNoteState();
	  this.app.workspace.trigger("loom:search", searchBar.value);
	  if (state) {
		this.renderTree(this.tree, state);
	    if (Object.values(state.nodes).every((node) => node.searchResultState === "none"))
	  	  searchBar.addClass("loom__search-bar-no-results");
	    else searchBar.removeClass("loom__search-bar-no-results");
	  }
	});
  }

  renderSettings(container: HTMLElement, settings: LoomSettings) {
    const settingsContainer = container.createDiv({ cls: "loom__settings" });
	
    // visibility checkboxes
	
	const visibilityContainer = settingsContainer.createDiv({ cls: "loom__visibility" });

    const createCheckbox = (id: string, label: string, ellipsis: boolean = false) => {
	  const checkboxContainer = visibilityContainer.createSpan({ cls: "loom__visibility-item" });
	  const checkbox = checkboxContainer.createEl("input", {
		attr: {
		  id: `loom__${id}-checkbox`,
		  checked: settings.visibility[id] ? "checked" : null
		},
		type: "checkbox",
	  });
      checkbox.addEventListener("change", () =>
		this.app.workspace.trigger("loom:set-visibility-setting", id, checkbox.checked)
	  );

	  const checkboxLabel = checkboxContainer.createEl("label", {
		attr: { for: `loom__${id}-checkbox` },
		cls: "loom__visibility-item-label",
		text: label,
	  });
	  if (ellipsis && !settings.visibility.visibility) checkboxLabel.createSpan({
		cls: "loom__no-metavisibility",
		text: "...",
	  });
	};

	createCheckbox("visibility", "These checkboxes", true);
	if (settings.visibility["visibility"]) {
	  createCheckbox("modelPreset", "Model preset");
	  createCheckbox("maxTokens", "Length");
	  createCheckbox("n", "Number of completions");
	  createCheckbox("bestOf", "Best of");
	  createCheckbox("temperature", "Temperature");
	  createCheckbox("topP", "Top p");
	  createCheckbox("frequencyPenalty", "Frequency penalty");
	  createCheckbox("presencePenalty", "Presence penalty");
	  createCheckbox("prepend", "Prepend sequence");
	}
	
    // preset dropdown

	if (settings.visibility["modelPreset"]) {
	  const presetContainer = settingsContainer.createDiv({ cls: "loom__setting" });
	  presetContainer.createEl("label", { text: "Model preset" });
	  const presetDropdown = presetContainer.createEl("select");

      if (settings.modelPresets.length === 0)
	    presetDropdown.createEl("option").createEl("i", { text: "[You have no presets. Go to Settings → Loom.]" });
      else {
	    for (const i in settings.modelPresets) {
	      const preset = settings.modelPresets[i];
	      presetDropdown.createEl("option", {
	    	  text: preset.name,
	    	  attr: { selected: settings.modelPreset === parseInt(i) ? "selected" : null, value: i },
	      });
	    }

	    presetDropdown.addEventListener("change", () =>
	      this.app.workspace.trigger("loom:set-setting", "modelPreset", parseInt(presetDropdown.value))
	    );
	  }
	}

	// other settings
	
	const setting = (
	  label: string,
	  setting: string,
	  value: string,
	  type: "string" | "int" | "int?" | "float"
	) => {
	  if (!settings.visibility[setting]) return;

      const parsers = {
	    "string": (value: string) => value,
		"int": (value: string) => parseInt(value),
		"int?": (value: string) => value === "" ? 0 : parseInt(value),
		"float": (value: string) => parseFloat(value),
	  };

      const settingContainer = settingsContainer.createDiv({ cls: "loom__setting" });
	  settingContainer.createEl("label", { text: label });
	  const settingInput = settingContainer.createEl("input", {
	    type: type === "string" ? "text" : "number", value
	  });
      settingInput.addEventListener("blur", () =>
	    this.app.workspace.trigger(
		  "loom:set-setting", setting, parsers[type](settingInput.value)
	    )
	  );
	}

	setting("Length (in tokens)", "maxTokens", String(settings.maxTokens), "int");
	setting("Number of completions", "n", String(settings.n), "int");
    setting("Best of", "bestOf", settings.bestOf === 0 ? "" : String(settings.bestOf), "int?");
	setting("Temperature", "temperature", String(settings.temperature), "float");
	setting("Top p", "topP", String(settings.topP), "float");
	setting("Frequency penalty", "frequencyPenalty", String(settings.frequencyPenalty), "float");
	setting("Presence penalty", "presencePenalty", String(settings.presencePenalty), "float");
	setting("Prepend sequence", "prepend", settings.prepend, "string");
  }

  renderBookmarks(container: HTMLElement, state: NoteState) {
    const bookmarks = Object.entries(state.nodes).filter(([, node]) => node.bookmarked);

    const bookmarksContainer = container.createDiv({ cls: "loom__bookmarks" });

	const bookmarksHeader = bookmarksContainer.createDiv({
	  cls: "tree-item-self loom__tree-header"
	});
    bookmarksHeader.createSpan({
	  cls: "tree-item-inner loom__tree-header-text", text: "Bookmarks"
	});
	bookmarksHeader.createSpan({
	  cls: "tree-item-flair-outer loom__bookmarks-count",
	  text: String(bookmarks.length)
	});

	for (const [id,] of bookmarks)
	  this.renderNode(bookmarksContainer, state, id, false);
  }

  renderTree(container: HTMLElement, state: NoteState) {
    container.empty();

    const treeHeader = container.createDiv({
	  cls: "tree-item-self loom__tree-header"
	});
	let headerText;
	if (state.searchTerm) {
	  if (state.hoisted.length > 0) headerText = "Search results under hoisted node";
      else headerText = "Search results";
	} else if (state.hoisted.length > 0) headerText = "Hoisted node";
	else headerText = "All nodes";
	treeHeader.createSpan({
	  cls: "tree-item-inner loom__tree-header-text",
	  text: headerText,
	});

	if (state.hoisted.length > 0)
	  this.renderNode(container, state, state.hoisted[state.hoisted.length - 1], true);
    else {
      const rootIds = Object.entries(state.nodes)
	    .filter(([, node]) => node.parentId === null)
		.map(([id]) => id);
	  for (const rootId of rootIds)
		this.renderNode(container, state, rootId, true);
	}
  }

  renderNode(
	container: HTMLElement,
	state: NoteState,
	id: string,
	inTree: boolean
  ) {
	const node = state.nodes[id];

	if (inTree && node.searchResultState === "none") return;

	const branchContainer = container.createDiv({});

    const nodeContainer = branchContainer.createDiv({
	  cls: "is-clickable outgoing-link-item tree-item-self loom__node",
	  attr: { id: inTree ? `loom__node-${id}` : null },
	});
	if (id === state.current) nodeContainer.addClass("is-active");
	if (node.searchResultState === "result")
	  nodeContainer.addClass("loom__node-search-result");
	if (node.unread) nodeContainer.addClass("loom__node-unread");

	const children = Object.entries(state.nodes)
	  .filter(([, node]) => node.parentId === id)
	  .map(([id]) => id);

	// if the node has children, add an expand/collapse button

	if (inTree && children.length > 0) {
	  const collapseButton = nodeContainer.createDiv({
		cls: "collapse-icon loom__collapse-button"
	  });
	  if (node.collapsed) collapseButton.addClass("loom__is-collapsed");
	  setIcon(collapseButton, "right-triangle");

	  collapseButton.addEventListener("click", () =>
	    this.app.workspace.trigger("loom:toggle-collapse", id)
	  );
	}
	
	// if the node is bookmarked, add a bookmark icon
	
	if (node.bookmarked) {
	  const bookmarkIcon = nodeContainer.createDiv({ cls: "loom__node-bookmark-icon" });
	  setIcon(bookmarkIcon, "bookmark");
	}
	
	// if the node is unread, add an unread indicator
	
    if (node.unread) nodeContainer.createDiv({ cls: "loom__node-unread-indicator" });
	
	// add the node's text
	
	const nodeText = nodeContainer.createEl(node.text.trim() ? "span" : "em", {
      cls: "tree-item-inner loom__node-text",
	  text: node.text.trim() || "No text",
	});
	nodeText.addEventListener("click", () =>
	  this.app.workspace.trigger("loom:switch-to", id)
	);

	const rootNodes = Object.entries(state.nodes)
	  .filter(([, node]) => node.parentId === null)
	const deletable = rootNodes.length !== 1 || rootNodes[0][0] !== id;

	const nodeContext: NodeContext = { app: this.app, state, id, node, deletable };
	
	nodeContainer.addEventListener("contextmenu", (event) => {
	  event.preventDefault();
	  showNodeMenu(event, nodeContext);
	});

	// add buttons on hover
	
	const nodeButtonsContainer = nodeContainer.createDiv({
	  cls: "loom__node-buttons"
	});

	renderNodeButtons(nodeButtonsContainer, nodeContext);
	
	// indicate if loom is currently generating children for this node

	if (inTree && state.generating === id) {
	  const generatingContainer = branchContainer.createDiv({
		cls: "loom__node-footer"
	  });
	  const generatingIcon = generatingContainer.createDiv({
		cls: "loom__node-generating-icon"
	  });
	  setIcon(generatingIcon, "loader-2");
	  generatingContainer.createSpan({
		cls: "loom__node-footer-text",
		text: "Generating..."
	  });
	}
	
	// if in a tree, and if the node isn't collapsed, render its children

	if (!inTree || node.collapsed) return;

	if (branchContainer.offsetWidth < 150) {
      if (children.length > 0) {
        const showMore = branchContainer.createDiv({
		  cls: "loom__node-footer loom__node-show-more"
		});
		setIcon(showMore, "arrow-up");
		showMore.createSpan({
		  cls: "loom__node-footer-text",
		  text: "Show more...",
		});

		showMore.addEventListener("click", () =>
		  this.app.workspace.trigger("loom:hoist", id)
		);
	  }

	  return;
	}

	const childrenContainer = branchContainer.createDiv({
	  cls: "loom__node-children"
	});
	for (const childId of children)
	  this.renderNode(childrenContainer, state, childId, true);
  }
 
  getViewType(): string {
    return "loom";
  }

  getDisplayText(): string {
    return "Loom";
  }

  getIcon(): string {
    return "network";
  }
}

export class LoomSiblingsView extends ItemView {
  getNoteState: () => NoteState | null;

  constructor(leaf: WorkspaceLeaf, getNoteState: () => NoteState | null) {
	super(leaf);
	this.getNoteState = getNoteState;
	this.render();
  }

  render() {
    const scroll = this.containerEl.scrollTop;

	this.containerEl.empty();
	this.containerEl.addClass("loom__view");
	const container = this.containerEl.createDiv({ cls: "outline" });

	const state = this.getNoteState();

	if (state === null) {
	  container.createDiv({
		cls: "pane-empty",
		text: "No note selected.",
	  });
	  return;
	}
	
	const parentId = state.nodes[state.current].parentId;
	const siblings = Object.entries(state.nodes).filter(
	  ([, node]) => node.parentId === parentId
	);

	let currentNodeContainer = null;
	for (const i in siblings) {
	  const [id, node] = siblings[i];

	  const nodeContainer = container.createDiv({
		cls: `loom__sibling${id === state.current ? " is-active" : ""}`,
	  });
	  if (parentId !== null)
		nodeContainer.createSpan({
          text: "…",
		  cls: "loom__sibling-ellipsis",
		});
	  nodeContainer.createSpan({ text: node.text.trim() });
	  nodeContainer.addEventListener("click", () =>
	    this.app.workspace.trigger("loom:switch-to", id)
	  );

	  const rootNodes = Object.entries(state.nodes)
	    .filter(([, node]) => node.parentId === null)
	  const deletable = rootNodes.length !== 1 || rootNodes[0][0] !== id;

      const nodeContext: NodeContext = { app: this.app, state, id, node, deletable };

	  const nodeButtonsContainer = nodeContainer.createDiv({
		cls: "loom__sibling-buttons"
	  });
	  renderNodeButtons(nodeButtonsContainer, nodeContext);

	  nodeContainer.addEventListener("contextmenu", (event) => {
		event.preventDefault();
		showNodeMenu(event, nodeContext);
	  });

	  if (parseInt(i) !== siblings.length - 1)
	    container.createEl("hr", { cls: "loom__sibling-separator" });

	  if (id === state.current) currentNodeContainer = nodeContainer;
	}

	this.containerEl.scrollTop = scroll;

	if (currentNodeContainer !== null)
	  currentNodeContainer.scrollIntoView({ block: "nearest" });
  }

  getViewType(): string {
	return "loom-siblings";
  }

  getDisplayText(): string {
	return "Siblings";
  }

  getIcon(): string {
	return "layout-list";
  }
}

export interface LoomEditorPluginState {
  ancestorLengths: [string, number][];
  showNodeBorders: boolean;
}

export class LoomEditorPlugin implements PluginValue {
  decorations: DecorationSet;
  state: LoomEditorPluginState;

  constructor() {
    this.decorations = Decoration.none;
	this.state = { ancestorLengths: [], showNodeBorders: false };
  }

  update() {
    let decorations: Range<Decoration>[] = [];

	const addRange = (from: number, to: number, id: string) => {
	  try {
	    const range = Decoration.mark({
          class: `loom__editor-node loom__editor-node-${id}`,
		}).range(from, to);
		decorations.push(range);
	  } catch (e) {
		// this happens if the range is empty. it's ok. it's fine,
	  }
	};

	const addBorder = (at: number) => {
	  const range = Decoration.widget({
		widget: new LoomNodeBorderWidget(),
		side: -1,
	  }).range(at, at);
	  decorations.push(range);
	};

	let i = 0;
	for (const [id, length] of this.state.ancestorLengths) {
	  addRange(i, i + length, id);
	  i += length;
	  if (this.state.showNodeBorders) addBorder(i);
	}

	this.decorations = Decoration.set(decorations);
  }
}

class LoomNodeBorderWidget extends WidgetType {
  toDOM() {
	const el = document.createElement("span");
	el.classList.add("loom__editor-node-border");
	return el;
  }

  eq() {
	return true;
  }
}

export const loomEditorPluginSpec: PluginSpec<LoomEditorPlugin> = {
  decorations: (plugin: LoomEditorPlugin) => plugin.decorations,
  eventHandlers: {
    mouseover: (event: MouseEvent, _view: EditorView) => {
      if (event.button !== 0) return false;

      const target = event.target as HTMLElement;
      if (!target.classList.contains("loom__editor-node")) return false;

      const className = target.classList[target.classList.length - 1];
      for (const el of [].slice.call(
        document.getElementsByClassName(className)
      ))
        el.classList.add("loom__editor-node-hover");

      return true;
    },
    mouseout: (event: MouseEvent, _view: EditorView) => {
      if (event.button !== 0) return false;

      const target = event.target as HTMLElement;
      if (!target.classList.contains("loom__editor-node")) return false;

      const className = target.classList[target.classList.length - 1];
      for (const el of [].slice.call(
        document.getElementsByClassName(className)
      ))
        el.classList.remove("loom__editor-node-hover");

      return true;
    },
    mousedown: (event: MouseEvent, _view: EditorView) => {
      if (event.button !== 0 || !event.shiftKey) return false;

      const target = event.target as HTMLElement;
      if (!target.classList.contains("loom__editor-node")) return false;

      // the second last element, since the last is `loom__editor-node-hover`
      const className = target.classList[target.classList.length - 2];
      const id = className.split("-").slice(2).join("-");
      app.workspace.trigger("loom:switch-to", id);

      return true;
    },
  },
};

export class MakePromptFromPassagesModal extends Modal {
  getSettings: () => LoomSettings;

  constructor(app: App, getSettings: () => LoomSettings) {
	super(app);
	this.getSettings = getSettings;
  }

  onOpen() {
	this.contentEl.createDiv({
	  cls: "modal-title",
	  text: "Make prompt from passages",
	});

    const pathPrefix = this.getSettings().passageFolder.trim().replace(/\/?$/, "/");
	const passages = this.app.vault.getFiles().filter((file) =>
	  file.path.startsWith(pathPrefix) && file.extension === "md"
	).sort((a, b) => b.stat.mtime - a.stat.mtime);

	let selectedPassages: string[] = [];

	const unselectedContainer = this.contentEl.createDiv({
	  cls: "loom__passage-list",
	});
	this.contentEl.createDiv({
	  cls: "loom__selected-passages-title",
	  text: "Selected passages",
	});
	const selectedContainer = this.contentEl.createDiv({
	  cls: "loom__passage-list loom__selected-passage-list",
	});
	let button: HTMLElement;

	const cleanName = (name: string) => name.slice(pathPrefix.length, -3);

	const renderPassageList = () => {
	  unselectedContainer.empty();
	  selectedContainer.empty();

	  const unselectedPassages = passages.filter(
		(passage) => !selectedPassages.includes(passage.path)
	  );

	  for (const passage of unselectedPassages) {
        const passageContainer = unselectedContainer.createDiv({
	      cls: "tree-item-self loom__passage"
	    });
	    passageContainer.createSpan({
	  	  cls: "tree-item-inner",
	  	  text: cleanName(passage.path),
	    });
        passageContainer.addEventListener("click", () => {
	      selectedPassages.push(passage.path)
		  renderPassageList();
		});
	  }

      if (selectedPassages.length === 0) {
		selectedContainer.createDiv({
		  cls: "loom__no-passages-selected",
		  text: "No passages selected.",
		});
	  }
	  for (const passage of selectedPassages) {
		const passageContainer = selectedContainer.createDiv({
		  cls: "tree-item-self loom__passage",
		});
		passageContainer.createSpan({
		  cls: "tree-item-inner",
		  text: cleanName(passage),
		});
		passageContainer.addEventListener("click", () => {
		  selectedPassages = selectedPassages.filter((p) => p !== passage);
		  renderPassageList();
		});
	  }
	};

	let separator = this.getSettings().defaultPassageSeparator;
	let passageFrontmatter = this.getSettings().defaultPassageFrontmatter;

    new Setting(this.contentEl)
	  .setName("Separator")
	  .setDesc("Use \\n to denote a newline.")
	  .addText((text) =>
		text.setValue(separator).onChange((value) => (separator = value)));
	new Setting(this.contentEl)
	  .setName("Passage frontmatter")
	  .setDesc("This will be added before each passage and at the end. %n: 1, 2, 3..., %r: I, II, III...")
	  .addText((text) =>
		text.setValue(passageFrontmatter).onChange((value) => (passageFrontmatter = value)));

	const buttonContainer = this.contentEl.createDiv({
	  cls: "modal-button-container",
	});
	button = buttonContainer.createEl("button", {
	  cls: "mod-cta",
	  text: "Submit",
	});
	button.addEventListener("click", () => {
	  if (selectedPassages.length === 0) return;

	  this.app.workspace.trigger(
		"loom:make-prompt-from-passages",
		selectedPassages,
		separator,
		passageFrontmatter,
	  );
	  this.close();
	});

	renderPassageList();
  }

  onClose() {
	this.contentEl.empty();
  }
}