obsidian-core-workflow-b

What this skill does

# Obsidian Core Workflow B: Advanced Plugin Features

## Overview

Add production UI to an existing Obsidian plugin: custom sidebar views,
modal dialogs with forms, fuzzy-search suggestion popups, editor commands
that manipulate selections, status bar widgets, context menus, and
programmatic file creation via the Vault API. Every snippet is a complete,
copy-pasteable class.

## Prerequisites

- A working plugin built with `obsidian-core-workflow-a` (or equivalent)
- `npm install --save-dev obsidian` already done
- Familiarity with the Plugin lifecycle (`onload` / `onunload`)

## Instructions

### Step 1: Custom sidebar view (ItemView)

A custom view registers a new panel type that can live in the left or right sidebar.

```typescript
// src/views/StatsView.ts
import { ItemView, WorkspaceLeaf, TFile } from "obsidian";

export const STATS_VIEW_TYPE = "vault-stats-view";

export class StatsView extends ItemView {
  constructor(leaf: WorkspaceLeaf) {
    super(leaf);
  }

  getViewType(): string {
    return STATS_VIEW_TYPE;
  }

  getDisplayText(): string {
    return "Vault Stats";
  }

  getIcon(): string {
    return "bar-chart-2";
  }

  async onOpen() {
    const container = this.containerEl.children[1];
    container.empty();
    container.addClass("stats-view");

    container.createEl("h4", { text: "Vault Statistics" });
    const listEl = container.createEl("ul");

    const files = this.app.vault.getMarkdownFiles();
    let totalWords = 0;

    for (const file of files) {
      const content = await this.app.vault.cachedRead(file);
      totalWords += content.split(/\s+/).filter(Boolean).length;
    }

    listEl.createEl("li", { text: `Notes: ${files.length}` });
    listEl.createEl("li", { text: `Total words: ${totalWords.toLocaleString()}` });
    listEl.createEl("li", {
      text: `Avg words/note: ${files.length ? Math.round(totalWords / files.length) : 0}`,
    });

    // Refresh button
    const btn = container.createEl("button", { text: "Refresh" });
    btn.addEventListener("click", () => this.onOpen());
  }

  async onClose() {
    // cleanup if needed
  }
}
```

Register and open it from your main plugin:

```typescript
// In your Plugin's onload():
import { StatsView, STATS_VIEW_TYPE } from "./views/StatsView";

this.registerView(STATS_VIEW_TYPE, (leaf) => new StatsView(leaf));

this.addCommand({
  id: "open-stats-view",
  name: "Open vault stats",
  callback: () => this.activateStatsView(),
});

this.addRibbonIcon("bar-chart-2", "Vault Stats", () => this.activateStatsView());

// Helper to open or reveal the view
async activateStatsView() {
  const { workspace } = this.app;
  let leaf = workspace.getLeavesOfType(STATS_VIEW_TYPE)[0];

  if (!leaf) {
    const rightLeaf = workspace.getRightLeaf(false);
    if (rightLeaf) {
      await rightLeaf.setViewState({ type: STATS_VIEW_TYPE, active: true });
      leaf = rightLeaf;
    }
  }
  if (leaf) workspace.revealLeaf(leaf);
}

// In onunload():
this.app.workspace.detachLeavesOfType(STATS_VIEW_TYPE);
```

### Step 2: Modal dialogs

**Confirmation modal** -- returns a boolean via callback:

```typescript
// src/modals/ConfirmModal.ts
import { App, Modal, Setting } from "obsidian";

export class ConfirmModal extends Modal {
  private resolved = false;
  constructor(
    app: App,
    private message: string,
    private onResult: (confirmed: boolean) => void
  ) {
    super(app);
  }

  onOpen() {
    const { contentEl } = this;
    contentEl.createEl("h3", { text: "Confirm" });
    contentEl.createEl("p", { text: this.message });

    new Setting(contentEl)
      .addButton((btn) =>
        btn.setButtonText("Cancel").onClick(() => this.close())
      )
      .addButton((btn) =>
        btn
          .setButtonText("Confirm")
          .setCta()
          .onClick(() => {
            this.resolved = true;
            this.close();
          })
      );
  }

  onClose() {
    this.onResult(this.resolved);
    this.contentEl.empty();
  }
}
```

**Text input modal** -- collects a single string:

```typescript
// src/modals/InputModal.ts
import { App, Modal, Setting } from "obsidian";

export class InputModal extends Modal {
  private value = "";
  constructor(
    app: App,
    private title: string,
    private placeholder: string,
    private onSubmit: (value: string | null) => void
  ) {
    super(app);
  }

  onOpen() {
    const { contentEl } = this;
    contentEl.createEl("h3", { text: this.title });

    new Setting(contentEl).addText((text) =>
      text
        .setPlaceholder(this.placeholder)
        .onChange((v) => (this.value = v))
    );

    new Setting(contentEl)
      .addButton((btn) =>
        btn.setButtonText("Cancel").onClick(() => {
          this.onSubmit(null);
          this.close();
        })
      )
      .addButton((btn) =>
        btn
          .setButtonText("OK")
          .setCta()
          .onClick(() => {
            this.onSubmit(this.value);
            this.close();
          })
      );
  }

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

### Step 3: Fuzzy suggestion modal (SuggestModal)

Opens a searchable list. Users type to filter, then pick an item.

```typescript
// src/modals/NotePicker.ts
import { App, FuzzySuggestModal, TFile } from "obsidian";

export class NotePicker extends FuzzySuggestModal<TFile> {
  constructor(app: App, private onPick: (file: TFile) => void) {
    super(app);
  }

  getItems(): TFile[] {
    return this.app.vault.getMarkdownFiles();
  }

  getItemText(file: TFile): string {
    return file.path;
  }

  onChooseItem(file: TFile): void {
    this.onPick(file);
  }
}

// Usage in a command:
this.addCommand({
  id: "pick-note",
  name: "Pick a note",
  callback: () => {
    new NotePicker(this.app, (file) => {
      new Notice(`Selected: ${file.basename}`);
    }).open();
  },
});
```

### Step 4: Editor commands with selection manipulation

`editorCallback` gives you the CodeMirror `Editor` and the active `MarkdownView`.

```typescript
// Wrap selection in callout
this.addCommand({
  id: "wrap-callout",
  name: "Wrap selection in callout",
  editorCallback: (editor, view) => {
    const selection = editor.getSelection();
    if (!selection) {
      new Notice("Select text first");
      return;
    }
    const callout = `> [!note]\n> ${selection.split("\n").join("\n> ")}`;
    editor.replaceSelection(callout);
  },
});

// Insert ISO timestamp at cursor
this.addCommand({
  id: "insert-timestamp",
  name: "Insert timestamp",
  editorCallback: (editor) => {
    const now = new Date().toISOString().slice(0, 19).replace("T", " ");
    editor.replaceSelection(now);
  },
});

// Sort selected lines alphabetically
this.addCommand({
  id: "sort-lines",
  name: "Sort selected lines",
  editorCallback: (editor) => {
    const selection = editor.getSelection();
    if (!selection) return;
    const sorted = selection.split("\n").sort((a, b) => a.localeCompare(b)).join("\n");
    editor.replaceSelection(sorted);
  },
});
```

### Step 5: Status bar items

Status bar items sit at the bottom of the Obsidian window.

```typescript
// In onload():
const statusEl = this.addStatusBarItem();
statusEl.setText("Words: --");

// Update word count when active file changes
this.registerEvent(
  this.app.workspace.on("active-leaf-change", async () => {
    const view = this.app.workspace.getActiveViewOfType(MarkdownView);
    if (view) {
      const content = view.editor.getValue();
      const count = content.split(/\s+/).filter(Boolean).length;
      statusEl.setText(`Words: ${count}`);
    } else {
      statusEl.setText("Words: --");
    }
  })
);
```

### Step 6: Context menus

Add items to the file explorer right-click menu and the editor right-click menu.

```typescript
// File explorer context menu -- only on markdown files
this.registerEvent(
  this.app.workspace.on("file-menu", (menu, file) => {
    if (file instanceof TFile && file.extension === "md") {
      menu.addItem((item) => {
        item
          .setTitle("Copy note