custom_nicklist_plugin.html

<!-- Screenshot: https://imgur.com/tcCqNsE -->

<template id="ly_customnicklist">
  <div class="customnicklist">
    <div v-for="user in buffer.users" class="user" :style="nickStyle(user)" @click="openQuery(user)">
      {{ user.nick[0].toUpperCase() }}
    </div>
  </div>
</template>

<style>
.customnicklist .user {
  border-radius: 50%;
  border: 2px solid green;
  line-height: 50px;
  float: left;
  margin: 10px;
  cursor: pointer;
  width: 50px;
  text-align: center;
  font-size: 1.5em;
  transition: border-color 0.3s;
}
.customnicklist .user:hover {
  border-color: red;
}

/* Adjust the sidebars width when this nicklist is in view */
.kiwi-sidebar.kiwi-sidebar-section-nicklist {
    max-width: 250px;
    width: 250px;
}
</style>

<script>
kiwi.plugin('erferf', function(kiwi, log) {
  var TextFormatting = kiwi.require('helpers/TextFormatting');

  // The new nicklist component
  var nicklist = {
    template: '#ly_customnicklist',
    props: ['buffer'],
    methods: {
      openQuery: function(user) {
        let buffer = kiwi.state.addBuffer(this.buffer.networkid, user.nick);
        kiwi.state.setActiveBuffer(buffer.networkid, buffer.name);
      },
      nickStyle(user) {
        return {
          color: TextFormatting.createNickColour(user.nick),
        };
      }
    }
  };

  kiwi.replaceModule('components/Nicklist', nicklist);
});
</script>