Added global search.

components/filters/channels.vue

@@ -1,75 +1,82 @@
 <template>
 	<div class="filter channels-container">
-		<div class="filters-sort">
-			<input
-				v-model="search"
-				type="search"
-				:placeholder="`Filter ${channels.length} channels`"
-				class="input input-inline filters-search"
-			>
+		<div
+			v-if="entities.length === 0"
+			class="filter-empty"
+		>No channels</div>
 
-			<div
-				v-show="order === 'name'"
-				class="filter-sort order noselect"
-				@click="order = 'count'"
-			>
-				<Icon icon="sort-alpha-asc" />
+		<template v-else>
+			<div class="filters-sort">
+				<input
+					v-model="search"
+					type="search"
+					:placeholder="`Filter ${channels.length} channels`"
+					class="input input-inline filters-search"
+				>
+
+				<div
+					v-show="order === 'name'"
+					class="filter-sort order noselect"
+					@click="order = 'count'"
+				>
+					<Icon icon="sort-alpha-asc" />
+				</div>
+
+				<div
+					v-show="order === 'count'"
+					class="filter-sort order noselect"
+					@click="order = 'name'"
+				>
+					<Icon icon="sort-numeric-desc" />
+				</div>
 			</div>
 
-			<div
-				v-show="order === 'count'"
-				class="filter-sort order noselect"
-				@click="order = 'name'"
+			<ul
+				class="filter-items nolist"
 			>
-				<Icon icon="sort-numeric-desc" />
-			</div>
-		</div>
-
-		<ul
-			class="filter-items nolist"
-		>
-			<li
-				v-for="entity in entities"
-				:key="`filter-channel-${entity.id}`"
-				class="filter-item"
-				:class="{ channel: !entity.isIndependent && entity.type !== 'network', selected: filters.entity?.id === entity.id }"
-				@click="emit('update', 'entity', entity)"
-			>
-				<span class="filter-name">
-					<span
-						class="filter-text"
-						:title="entity.name"
-					>
-						<img
-							v-if="entity.isIndependent || entity.type === 'network'"
-							:src="`/logos/${entity.slug}/favicon_dark.png`"
-							class="favicon"
-						>
-
-						<Icon
-							v-else
-							icon="arrow-up4"
-						/>
-
-						{{ entity.name }}
-					</span>
-
-					<span class="filter-details">
+				<li
+					v-for="entity in entities"
+					:key="`filter-channel-${entity.id}`"
+					class="filter-item"
+					:class="{ channel: !entity.isIndependent && entity.type !== 'network', selected: filters.entity?.id === entity.id }"
+					@click="emit('update', 'entity', entity)"
+				>
+					<span class="filter-name">
 						<span
-							v-if="entity.count"
-							class="filter-count"
-						>{{ entity.count }}</span>
+							class="filter-text"
+							:title="entity.name"
+						>
+							<img
+								v-if="entity.isIndependent || entity.type === 'network'"
+								:src="`/logos/${entity.slug}/favicon_dark.png`"
+								class="favicon"
+							>
 
-						<Icon
-							v-if="filters.entity?.id === entity.id"
-							icon="cross2"
-							class="filter-remove"
-							@click.native.stop="emit('update', 'entity', null)"
-						/>
+							<Icon
+								v-else
+								icon="arrow-up4"
+							/>
+
+							{{ entity.name }}
+						</span>
+
+						<span class="filter-details">
+							<span
+								v-if="entity.count"
+								class="filter-count"
+							>{{ entity.count }}</span>
+
+							<Icon
+								v-if="filters.entity?.id === entity.id"
+								icon="cross2"
+								class="filter-remove"
+								@click.native.stop="emit('update', 'entity', null)"
+							/>
+						</span>
 					</span>
-				</span>
-			</li>
-		</ul>
+				</li>
+			</ul>
+		</template>
 	</div>
 </template>