frontend/marko/page/logs/components/filter-menu/index.marko

<right-menu class="filter-menu">
  <input key="search" />
  <menu-gap />
  <menu-header if(state.filters.length > 0)>Active Filters</menu-header>
  <div class="filter-section">
    <menu-link for(filter in state.filters) 
               on-click("emit", "remove", filter.type, filter.id)
               textClass=filter.color 
               unselectable 
               icon=filter.icon >${filter.text}</menu-link> 
  </div>
  <menu-gap if(state.filters.length > 0) />
  <menu-header>Characters</menu-header>
  <div class="filter-section">
    <menu-link for(character in state.characters) 
               on-click("emit", "add", "characters", character.id)
               icon=character.name.charAt(0).toUpperCase()
               textClass="color-tag-character">${character.name}</menu-link>
  </div>
  <menu-gap />
  <menu-header>Channels</menu-header>
  <div class="filter-section">
    <menu-link for(channel in state.channels) 
               on-click("emit", "add", "channels", channel.name)
               icon=channel.name.charAt(1).toUpperCase()
               textClass="color-tag-location">${channel.name}</menu-link>
  </div>
  <menu-gap />
  <menu-header>Events</menu-header>
  <div class="filter-section">
    <menu-link for(eventName in state.eventNames) 
               on-click("emit", "add", "events", eventName)               
               icon=eventName.charAt(0).toUpperCase()
               textClass="color-tag-event">${eventName}</menu-link>
  </div>
</right-menu>