thelounge/client/components/Favorites.vue

<template>
	<div class="favorites">
		<div class="channel-list-item" data-type="lobby" @contextmenu.prevent="openContextMenu">
			<div class="lobby-wrap">
				<CollapseFavoritesButton :on-collapse-click="onCollapseClick" />
				<span title="Favorites" class="name">Favorites</span>
				<span v-if="unreadCount > 0" class="badge">{{ unreadCount }}</span>
			</div>
		</div>
		<div v-for="channel in $store.state.favoriteChannels" :key="channel.id">
			<Channel
				:channel="channel"
				:network="network"
				:is-filtering="false"
				:active="
					$store.state.activeChannel && channel === $store.state.activeChannel.channel
				"
			/>
		</div>
	</div>
</template>

<style scoped>
.lobby-wrap {
	display: flex;
	/* margin-left: 40px; */
}
</style>
<script>
import eventbus from "../js/eventbus";
import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
import Channel from "./Channel.vue";
import CollapseFavoritesButton from "./CollapseFavoritesButton.vue";

export default {
	name: "Favorites",
	components: {
		Channel,
		CollapseFavoritesButton,
	},
	props: {
		channels: Array,
	},
	computed: {
		network() {
			return {
				isCollapsed: !this.$store.state.favoritesOpen,
				status: {
					connected: true,
					secure: true,
				},
			};
		},
	},

	methods: {
		onCollapseClick() {
			this.$store.commit("toggleFavorites");
		},
		openContextMenu(event) {
			eventbus.emit("contextmenu:favorites", {
				event: event,
				channel: this.channel,
			});
		},
		unreadCount() {
			const unread = this.channels.reduce((acc, channel) => {
				return acc + channel.unread || 0;
			}, 0);

			return roundBadgeNumber(unread);
		},
	},
};
</script>