templates-application.hbs

{{#let (state (type "tab-manager") this.model) as |tabManager|}}

  <h2>Items</h2>
  <ul>
    {{#each tabManager.tabs key="label.state" as |tab|}}
    <li>
      {{tab.label.state}}
      {{#unless tab.isOpen.state}}
      <button onclick={{action tabManager.activateTab tab}} type="button" class="button-xs">+</button>
      {{/unless}}
    </li>
    {{/each}}
  </ul>

  <h2>Tabs</h2>
  <div class="tabs">
    <nav class="tabs-nav">

      {{#each tabManager.openTabs key="label.state" as |tab|}}
      <a href="#">
        {{tab.label.state}}
        <button onclick={{action tab.isOpen.set false}} type="button" class="button-xs">x</button>
      </a>
      {{/each}}
    </nav>
  </div>

  {{/let}}

types-tab-manager.js

import Tab from "./tab";
import { filter } from "microstates";

export default class TabManager {
  tabs = [Tab];

  get openTabs() {
    return filter(this.tabs, tab => tab.isOpen.state);
  }

  activateTab(tab) {
    console.log(this, "activateTab", tab);

    return tab.isOpen.set(true);
  }
}

types-tab.js

export default class Tab {
  id = Number;
  label = String;
  isOpen = Boolean;
}