Added dark theme. Fixed actor country aggregation.

components/header/header.vue

@@ -79,11 +79,11 @@
 			</form>
 
 			<div
-				v-if="user"
 				class="userpanel"
 				:class="{ searching: searchFocused }"
 			>
 				<VDropdown
+					v-if="user"
 					:triggers="['click']"
 					:prevent-overflow="true"
 					class="notifs-trigger"
@@ -115,21 +115,35 @@
 				<VDropdown
 					:triggers="['click']"
 					:prevent-overflow="true"
+					class="menu-trigger"
 				>
-					<img
-						:src="user.avatar"
-						class="avatar"
-					>
+					<div class="avatar-container">
+						<img
+							v-if="user"
+							:src="user.avatar"
+							class="avatar"
+						>
+
+						<Icon
+							v-else
+							icon="user7"
+							class="avatar-placeholder"
+						/>
+					</div>
 
 					<template #popper>
 						<div class="menu">
 							<a
+								v-if="user"
 								:href="`/user/${user.username}`"
 								class="menu-header ellipsis"
 							>{{ user.username }}</a>
 
 							<ul class="menu-list nolist">
-								<li class="menu-item">
+								<li
+									v-if="user"
+									class="menu-item"
+								>
 									<a
 										:href="`/user/${user.username}`"
 										class="menu-button nolink"
@@ -140,7 +154,21 @@
 								</li>
 
 								<li
-									v-if="user.primaryStash"
+									v-else-if="allowLogin"
+									v-close-popper
+									class="menu-item"
+								>
+									<a
+										:href="`/login?r=${encodeURIComponent(currentPath)}`"
+										class="menu-button nolink"
+									>
+										<Icon icon="enter" />
+										Log in
+									</a>
+								</li>
+
+								<li
+									v-if="user?.primaryStash"
 									class="menu-item"
 								>
 									<a
@@ -161,6 +189,26 @@
 									Settings
 								</li>
 
+								<li
+									v-if="theme === 'dark'"
+									v-close-popper
+									class="menu-item menu-button"
+									@click="setTheme('light')"
+								>
+									<Icon icon="sun3" />
+									Light theme
+								</li>
+
+								<li
+									v-else
+									v-close-popper
+									class="menu-item menu-button"
+									@click="setTheme('dark')"
+								>
+									<Icon icon="moon" />
+									Dark theme
+								</li>
+
 								<li
 									class="menu-button menu-item logout"
 									@click="logout"
@@ -170,20 +218,6 @@
 					</template>
 				</VDropdown>
 			</div>
-
-			<div
-				v-else-if="allowLogin"
-				class="userpanel"
-				:class="{ searching: searchFocused }"
-			>
-				<a
-					:href="`/login?r=${encodeURIComponent(currentPath)}`"
-					class="login button button-submit nolink"
-				>
-					<span class="login-text">Log in</span>
-					<Icon icon="enter" />
-				</a>
-			</div>
 		</div>
 
 		<Settings
@@ -205,8 +239,11 @@ import {
 	inject,
 } from 'vue';
 
+import Cookies from 'js-cookie';
+
 import navigate from '#/src/navigate.js';
 import { del } from '#/src/api.js';
+import events from '#/src/events.js';
 // import getPath from '#/src/get-path.js';
 
 import Notifications from '#/components/header/notifications.vue';
@@ -216,6 +253,7 @@ import AlertDialog from '#/components/alerts/create.vue';
 import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
 
 const pageContext = inject('pageContext');
+const theme = ref(pageContext.env.theme);
 
 const user = pageContext.user;
 const unseen = ref(pageContext.meta.unseenNotifications);
@@ -232,6 +270,13 @@ function search() {
 	navigate('/search', { q: query.value }, { redirect: true });
 }
 
+function setTheme(newTheme) {
+	theme.value = newTheme;
+
+	Cookies.set('theme', newTheme);
+	events.emit('theme', newTheme);
+}
+
 async function logout() {
 	await del('/session');
 	navigate('/login?consent', null, { redirect: true }); // pass consent variable to reinstate in new session
@@ -275,7 +320,7 @@ function blurSearch(event) {
 
 .nav-item .link {
 	font-size: .9rem;
-	color: var(--shadow-strong-10);
+	color: var(--glass-strong-10);
 	box-sizing: border-box;
 	padding: 1rem;
 	height: 100%;
@@ -330,7 +375,7 @@ function blurSearch(event) {
 	.icon {
 		height: 100%;
 		padding: 0 .75rem 0 .5rem;
-		fill: var(--shadow-weak-10);
+		fill: var(--glass-weak-10);
 	}
 
 	&.focused {
@@ -355,7 +400,6 @@ function blurSearch(event) {
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: 0 1rem 0 0;
 	font-size: 0;
 	cursor: pointer;
 
@@ -368,6 +412,21 @@ function blurSearch(event) {
 	}
 }
 
+.menu-trigger {
+	height: 100%;
+}
+
+.avatar-container {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	padding: 0 1rem 0 0;
+
+	&:hover .icon {
+		fill: var(--primary);
+	}
+}
+
 .avatar {
 	width: 2rem;
 	height: 2rem;
@@ -375,6 +434,13 @@ function blurSearch(event) {
 	object-fit: cover;
 }
 
+.avatar-placeholder {
+	width: 1.25rem;
+	padding-left: 1rem;
+	height: 100%;
+	fill: var(--glass-strong-20);
+}
+
 .notifs-trigger {
 	height: 100%;
 }
@@ -411,7 +477,7 @@ function blurSearch(event) {
 }
 
 .notifs-bell {
-	fill: var(--shadow);
+	fill: var(--glass);
 }
 
 .login {
@@ -433,8 +499,8 @@ function blurSearch(event) {
 .menu-header {
 	display: flex;
 	padding: .75rem 1rem;
-	border-bottom: solid 1px var(--shadow-weak-30);
-	color: var(--shadow-strong-30);
+	border-bottom: solid 1px var(--glass-weak-30);
+	color: var(--glass-strong-30);
 	text-decoration: none;
 	font-weight: bold;
 }
@@ -450,7 +516,7 @@ function blurSearch(event) {
 	font-size: 1.1rem;
 
 	.icon {
-		fill: var(--shadow);
+		fill: var(--glass);
 		margin-right: .75rem;
 		transform: translateY(-1px);
 	}