Merged filters into new settings dialog, added experimental summary field.

assets/components/header/header.vue

@@ -1,7 +1,7 @@
 <template>
 	<header class="header">
 		<div class="header-nav">
-			<router-link
+			<RouterLink
 				to="/"
 				class="logo-link"
 			><h1 class="header-logo">
@@ -9,12 +9,12 @@
 					class="logo"
 					v-html="logo"
 				/>
-			</h1></router-link>
+			</h1></RouterLink>
 
 			<nav class="nav">
 				<ul class="nav-list nolist">
 					<li class="nav-item">
-						<router-link
+						<RouterLink
 							v-slot="{ href, isActive, navigate }"
 							:to="{ name: 'actors', params: { pageNumber: 1 } }"
 							custom
@@ -25,11 +25,11 @@
 								:class="{ active: isActive }"
 								@click="navigate"
 							>Actors</a>
-						</router-link>
+						</RouterLink>
 					</li>
 
 					<li class="nav-item">
-						<router-link
+						<RouterLink
 							v-slot="{ href, isActive, navigate }"
 							:to="{ name: 'channels' }"
 							custom
@@ -40,11 +40,11 @@
 								:class="{ active: isActive }"
 								@click="navigate"
 							>Channels</a>
-						</router-link>
+						</RouterLink>
 					</li>
 
 					<li class="nav-item">
-						<router-link
+						<RouterLink
 							v-slot="{ href, isActive, navigate }"
 							:to="{ name: 'tags' }"
 							custom
@@ -55,11 +55,11 @@
 								:class="{ active: isActive }"
 								@click="navigate"
 							>Tags</a>
-						</router-link>
+						</RouterLink>
 					</li>
 
 					<li class="nav-item">
-						<router-link
+						<RouterLink
 							v-slot="{ href, isActive, navigate }"
 							:to="{ name: 'movies', params: { range: 'latest', pageNumber: 1 } }"
 							custom
@@ -70,7 +70,7 @@
 								:class="{ active: isActive }"
 								@click="navigate"
 							>Movies</a>
-						</router-link>
+						</RouterLink>
 					</li>
 				</ul>
 			</nav>
@@ -79,7 +79,7 @@
 		<div class="header-section">
 			<div
 				class="sidebar-toggle noselect"
-				@click.stop="$emit('toggleSidebar')"
+				@click.stop="events.emit('toggleSidebar')"
 			><Icon icon="menu" /></div>
 
 			<Tooltip v-if="me">
@@ -95,7 +95,7 @@
 					>{{ unseenNotificationsCount }}</span>
 				</div>
 
-				<template v-slot:tooltip>
+				<template #tooltip>
 					<Notifications
 						:notifications="notifications"
 						:unseen-count="unseenNotificationsCount"
@@ -115,8 +115,8 @@
 					</div>
 				</div>
 
-				<template v-slot:tooltip>
-					<Menu @show-filters="state => $emit('showFilters', state)" />
+				<template #tooltip>
+					<Menu />
 				</template>
 			</Tooltip>
 
@@ -133,7 +133,7 @@
 					icon="search"
 				/></button>
 
-				<template v-slot:tooltip>
+				<template #tooltip>
 					<Search
 						:searching="searching"
 						class="compact"

assets/components/header/menu.vue

@@ -68,9 +68,9 @@
 
 			<li
 				class="menu-item"
-				@click="$emit('showFilters', true)"
+				@click="events.emit('toggleSettings', true)"
 			>
-				<Icon icon="filter" />Filters
+				<Icon icon="cog" />Settings
 			</li>
 
 			<li
@@ -104,7 +104,7 @@ function signup(state) {
 }
 
 function favorites() {
-	return this.me?.stashes.find(stash => stash.primary);
+	return this.me?.stashes.find((stash) => stash.primary);
 }
 
 function me(state) {
@@ -130,7 +130,6 @@ export default {
 		}),
 		favorites,
 	},
-	emits: ['showFilters'],
 	methods: {
 		setSfw,
 		setTheme,