Added notification bell, WIP.

components/alerts/create.vue

@@ -91,7 +91,7 @@
 
 											<div class="result-label">
 												{{ actor.name }}
-												<template v-if="actor.ageFromBirth || actor.origin?.country">({{ [actor.ageFromBirth, actor.origin?.country?.alpha2].join(', ') }})</template>
+												<template v-if="actor.ageFromBirth || actor.origin?.country">({{ [actor.ageFromBirth, actor.origin?.country?.alpha2].filter(Boolean).join(', ') }})</template>
 											</div>
 										</li>
 									</ul>

components/header/header.vue

@@ -78,69 +78,92 @@
 				</button>
 			</form>
 
-			<VDropdown
+			<div
 				v-if="user"
-				:triggers="['click']"
-				:prevent-overflow="true"
+				class="userpanel"
+				:class="{ searching: searchFocused }"
 			>
-				<div
-					class="userpanel"
-					:class="{ searching: searchFocused }"
+				<VDropdown
+					:triggers="['click']"
+					:prevent-overflow="true"
+				>
+					<Icon
+						icon="bell2"
+						class="notifs-bell"
+						:class="{ unread: notifications.some((notif) => !notif.isSeen) }"
+					/>
+
+					<template #popper>
+						<div class="menu">
+							<ul class="notifs nolist">
+								<li
+									v-for="notif in notifications"
+									:key="notif.id"
+									class="notif"
+								>{{ notif.scene.title }}</li>
+							</ul>
+						</div>
+					</template>
+				</VDropdown>
+
+				<VDropdown
+					:triggers="['click']"
+					:prevent-overflow="true"
 				>
 					<img
 						:src="user.avatar"
 						class="avatar"
 					>
-				</div>
 
-				<template #popper>
-					<div class="menu">
-						<a
-							:href="`/user/${user.username}`"
-							class="menu-header ellipsis"
-						>{{ user.username }}</a>
+					<template #popper>
+						<div class="menu">
+							<a
+								:href="`/user/${user.username}`"
+								class="menu-header ellipsis"
+							>{{ user.username }}</a>
 
-						<ul class="menu-list nolist">
-							<li class="menu-item">
-								<a
-									:href="`/user/${user.username}`"
-									class="menu-button nolink"
+							<ul class="menu-list nolist">
+								<li class="menu-item">
+									<a
+										:href="`/user/${user.username}`"
+										class="menu-button nolink"
+									>
+										<Icon icon="user7" />
+										Profile
+									</a>
+								</li>
+
+								<li
+									v-if="user.primaryStash"
+									class="menu-item"
 								>
-									<Icon icon="user7" />
-									Profile
-								</a>
-							</li>
+									<a
+										:href="`/stash/${user.username}/${user.primaryStash.slug}`"
+										class="menu-button nolink favorites"
+									>
+										<Icon icon="heart7" />
+										Favorites
+									</a>
+								</li>
 
-							<li
-								v-if="user.primaryStash"
-								class="menu-item"
-							>
-								<a
-									:href="`/stash/${user.username}/${user.primaryStash.slug}`"
-									class="menu-button nolink favorites"
+								<li
+									v-close-popper
+									class="menu-item menu-button"
+									@click="showSettings = true"
 								>
-									<Icon icon="heart7" />
-									Favorites
-								</a>
-							</li>
+									<Icon icon="equalizer" />
+									Settings
+								</li>
 
-							<li
-								v-close-popper
-								class="menu-item menu-button"
-								@click="showSettings = true"
-							>
-								<Icon icon="equalizer" />
-								Settings
-							</li>
-
-							<li
-								class="menu-button menu-item logout"
-								@click="logout"
-							><Icon icon="exit2" />Log out</li>
-						</ul>
-					</div>
-				</template>
-			</VDropdown>
+								<li
+									class="menu-button menu-item logout"
+									@click="logout"
+								><Icon icon="exit2" />Log out</li>
+							</ul>
+						</div>
+					</template>
+				</VDropdown>
+			</div>
 
 			<div
 				v-else-if="allowLogin"
@@ -181,11 +204,14 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 const pageContext = inject('pageContext');
 
 const user = pageContext.user;
+const notifications = pageContext.notifications;
 const query = ref(pageContext.urlParsed.search.q || '');
 const allowLogin = pageContext.env.allowLogin;
 const searchFocused = ref(false);
 const showSettings = ref(false);
 
+console.log(notifications);
+
 const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`;
 
@@ -316,7 +342,7 @@ function blurSearch(event) {
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: 0 1rem 0 1.5rem;
+	padding: 0 1rem 0 0;
 	font-size: 0;
 	cursor: pointer;
 
@@ -332,6 +358,31 @@ function blurSearch(event) {
 	object-fit: cover;
 }
 
+.notifs-bell {
+	padding: 0 1.25rem;
+	height: 100%;
+	fill: var(--shadow);
+
+	&:hover,
+	&.unread {
+		cursor: pointer;
+		fill: var(--primary);
+	}
+}
+
+.notifs {
+	overflow: auto;
+}
+
+.notif {
+	display: flex;
+	padding: .5rem 1rem;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-weak-30);
+	}
+}
+
 .login {
 	display: flex;
 	align-items: center;