drewipson

Add Tree Data Provider

Name: Add Tree Data Provider
Author: drewipson

Data community intermediate

SOURCE https://github.com/drewipson/claude-code-config

Description

Generate a new VS Code TreeDataProvider with all necessary boilerplate.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

Repository README

This is the README for drewipson/claude-code-config, shared by 5 entries in this directory. It describes the repository, not this entry specifically.

Add Tree Data Provider

Generate a new VS Code TreeDataProvider with all necessary boilerplate.

Instructions

**Gather requirements:**
- Ask for the provider name (e.g., "Workflows", "Templates")
- Determine what data it will display
- Identify the data source (files, API, service, etc.)
**Update type definitions in `src/core/types.ts`:**

export interface Item {
  name: string;
  path?: string;
  type: 'folder' | 'file' | 'item';
  children?: Item[];
  // Add other relevant fields
}

Add provider class in src/providers/claudeTreeDataProvider.ts:

export class TreeProvider implements vscode.TreeDataProvider {
  private _onDidChangeTreeData = new vscode.EventEmitter();
  readonly onDidChangeTreeData = this._onDidChangeTreeData.event;

  constructor(
    // Inject required services
  ) {}

  refresh(): void {
    this._onDidChangeTreeData.fire(undefined);
  }

  getTreeItem(element: Item): vscode.TreeItem {
    const treeItem = new vscode.TreeItem(
      element.name,
      element.children ? vscode.TreeItemCollapsibleState.Collapsed : vscode.TreeItemCollapsibleState.None
    );

    // Set icon
    treeItem.iconPath = new vscode.ThemeIcon('file'); // Choose appropriate icon

    // Set command for click action
    if (element.path) {
      treeItem.command = {
        command: 'claudeCodeManager.openFile',
        title: 'Open',
        arguments: [element]
      };
    }

    // Set context value for context menu
    treeItem.contextValue = element.type;

    return treeItem;
  }

  async getChildren(element?: Item): Promise {
    if (!element) {
      // Return root level items
      return this.getRootItems();
    }

    // Return children of element
    return element.children || [];
  }

  private async getRootItems(): Promise {
    // Implement data fetching logic
    return [];
  }
}

Register view in package.json:

{
  "contributes": {
    "views": {
      "claude-code-manager": [
        {
          "id": "claudeCodeManager.",
          "name": "",
          "icon": "resources/icons/icon.svg"
        }
      ]
    }
  }
}

Register provider in src/extension.ts activate function:

// Create provider instance
const Provider = new TreeProvider(/* dependencies */);

// Register tree view
const TreeView = vscode.window.createTreeView('claudeCodeManager.', {
  treeDataProvider: Provider,
  showCollapseAll: true
});

// Register refresh command
context.subscriptions.push(
  vscode.commands.registerCommand('claudeCodeManager.refresh', () => {
    Provider.refresh();
  })
);

// Add to subscriptions
context.subscriptions.push(TreeView);