@mundogamernetwork/shared-ui 1.0.0

package/components/ui/Header/MgNotificationsModal.vue

@@ -0,0 +1,125 @@
+<template>
+	<section id="mg-notifications-modal" ref="modalRef">
+		<div class="read-all--button-wrapper">
+			<a class="d-flex align-items-center read-all--button" @click="handleClickAll">
+				{{ $t("notification_component.mark_read") }}
+				<MGIcon icon="chevron-right" />
+			</a>
+		</div>
+		<div class="cards" @scroll="handleScroll">
+			<MgNotificationCard
+				v-for="(notification, index) in notifications"
+				:key="index"
+				:notification="notification"
+				@close="closeModal()"
+			/>
+		</div>
+	</section>
+</template>
+
+<script lang="ts" setup>
+import { useDebounceFn } from "@vueuse/core";
+
+const notificationsStore = useNotificationsStore();
+const notifications = computed(() => notificationsStore.notifications);
+
+const handleClickAll = () => {
+	notificationsStore.markAllAsRead();
+};
+
+const emit = defineEmits(["toggle-visible"]);
+const modalRef = ref<HTMLElement | null>(null);
+
+const handleScroll = useDebounceFn((event: Event) => {
+	const element = event.target as HTMLElement;
+	const bottomReached = element.scrollHeight - element.scrollTop <= element.clientHeight + 1;
+
+	if (bottomReached) {
+		const total = notificationsStore.totalNotifications;
+		const currentPage = notificationsStore.currentPage;
+
+		if (notifications.value.length < total) {
+			notificationsStore.fetchNotifications(Number(currentPage + 1));
+		}
+	}
+}, 300);
+
+const closeModal = () => {
+	emit("toggle-visible");
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+	if (modalRef.value && !modalRef.value.contains(event.target as Node)) {
+		closeModal();
+	}
+};
+
+onMounted(() => {
+	document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+	document.removeEventListener("click", handleClickOutside);
+});
+</script>
+
+<style lang="scss" scoped>
+#mg-notifications-modal {
+	position: absolute;
+	width: 400px;
+	background-color: var(--card-article-bg);
+	z-index: 100;
+	max-height: 750px;
+	top: 60px;
+	right: 160px;
+	overflow: auto;
+	border: 1px solid var(--card-article-border);
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #808080;
+		border-radius: 0px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: #23c0e9;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #272930;
+	}
+}
+
+.cards {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	align-self: stretch;
+}
+
+.read-all--button-wrapper {
+	padding: 24px;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	border-bottom: 1px solid var(--body-bg);
+
+	.read-all--button {
+		transition: all 0.1s ease-in;
+		color: var(--sidebar-menus-active-bg);
+		cursor: pointer;
+	}
+}
+
+@media screen and (max-width: 576px) {
+	#mg-notifications-modal {
+		min-width: 300px;
+		width: 100%;
+		top: 60px;
+		left: 30px;
+	}
+}
+</style>

package/components/ui/MgAnnouncementBanner.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+const announcementStore = useAnnouncementStore();
+const { t } = useI18n();
+
+onMounted(async () => {
+	await announcementStore.fetchBanner();
+});
+
+const { banner, isVisible } = storeToRefs(announcementStore);
+
+// The API already resolves the correct translation for the current locale,
+// so banner.message is always a plain string ready to display.
+const resolvedMessage = computed(() => banner.value?.message ?? '');
+
+const resolvedLinkText = computed(() => {
+	if (!banner.value?.link_url) return '';
+	if (banner.value.link_text) return banner.value.link_text;
+	return t('announcementBanner.learnMore', 'Learn more');
+});
+
+// Inline colors override the type-based CSS vars when set
+const bannerStyle = computed(() => {
+	if (!banner.value) return {};
+	const style: Record<string, string> = {};
+	if (banner.value.bg_color) style.backgroundColor = banner.value.bg_color;
+	if (banner.value.text_color) style.color = banner.value.text_color;
+	return style;
+});
+
+function dismiss() {
+	announcementStore.dismiss();
+}
+</script>
+
+<template>
+	<Transition name="mg-announcement-slide">
+		<div
+			v-if="isVisible && banner && resolvedMessage"
+			class="mg-announcement-banner"
+			:class="`mg-announcement-banner--${banner.type}`"
+			:style="bannerStyle"
+		>
+			<span class="mg-announcement-banner__message">{{ resolvedMessage }}</span>
+			<a
+				v-if="banner.link_url"
+				:href="banner.link_url"
+				class="mg-announcement-banner__link"
+				target="_blank"
+				rel="noopener noreferrer"
+			>{{ resolvedLinkText }}</a>
+			<button
+				class="mg-announcement-banner__close"
+				:aria-label="t('announcementBanner.close', 'Close')"
+				@click="dismiss"
+			>&times;</button>
+		</div>
+	</Transition>
+</template>
+
+<style lang="scss" scoped>
+.mg-announcement-banner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	padding: 0.5rem 3rem 0.5rem 1rem;
+	width: 100%;
+	font-size: 0.875rem;
+	font-weight: 500;
+	position: relative;
+	z-index: 100;
+
+	&--info {
+		background: var(--announcement-info-bg, #1a6ea8);
+		color: var(--announcement-info-fg, #ffffff);
+	}
+
+	&--warning {
+		background: var(--announcement-warning-bg, #92400e);
+		color: var(--announcement-warning-fg, #ffffff);
+	}
+
+	&--success {
+		background: var(--announcement-success-bg, #166534);
+		color: var(--announcement-success-fg, #ffffff);
+	}
+
+	&--danger {
+		background: var(--announcement-danger-bg, #991b1b);
+		color: var(--announcement-danger-fg, #ffffff);
+	}
+
+	&__message {
+		flex: 0 1 auto;
+		text-align: center;
+	}
+
+	&__link {
+		flex-shrink: 0;
+		font-weight: 700;
+		text-decoration: underline;
+		color: inherit;
+		white-space: nowrap;
+
+		&:hover {
+			opacity: 0.85;
+		}
+	}
+
+	&__close {
+		position: absolute;
+		right: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		background: transparent;
+		border: none;
+		color: inherit;
+		font-size: 1.25rem;
+		line-height: 1;
+		cursor: pointer;
+		padding: 0 0.25rem;
+		opacity: 0.8;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+
+.mg-announcement-slide-enter-active,
+.mg-announcement-slide-leave-active {
+	transition: max-height 0.25s ease, opacity 0.25s ease;
+	overflow: hidden;
+}
+
+.mg-announcement-slide-enter-from,
+.mg-announcement-slide-leave-to {
+	max-height: 0;
+	opacity: 0;
+}
+
+.mg-announcement-slide-enter-to,
+.mg-announcement-slide-leave-from {
+	max-height: 60px;
+	opacity: 1;
+}
+</style>

package/components/ui/MgBanners.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const announcementStore = useAnnouncementStore();
+const promotionStore = usePromotionStore();
+
+// Fetch both concurrently on mount — the loaded guard in each store
+// prevents double-fetching if the sub-components were also mounted.
+onMounted(async () => {
+	await Promise.all([
+		announcementStore.fetchBanner(),
+		promotionStore.fetchBanner(),
+	]);
+});
+
+const { isVisible: announcementVisible } = storeToRefs(announcementStore);
+</script>
+
+<template>
+	<!-- At most one banner is shown at a time.
+	     Announcement takes priority; promotion only renders when there is no
+	     active/visible announcement. -->
+	<MgAnnouncementBanner />
+	<MgPromotionBanner v-if="!announcementVisible" />
+</template>

package/components/ui/MgHeaderComponent.vue

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { storeToRefs } from "pinia";
+
+const authStore = useAuthStore();
+const indexStore = useIndexStore();
+const notificationsStore = useNotificationsStore();
+
+const { user, signedIn } = storeToRefs(authStore);
+const { notificationCount } = storeToRefs(notificationsStore);
+
+const runtimeConfig = useRuntimeConfig();
+const features = runtimeConfig.public.mgSharedUi?.features ?? {};
+
+const showUIConfig = ref(false);
+const showUsers = ref(false);
+const showNotifications = ref(false);
+const showMessages = ref(false);
+
+const colorMode = useColorMode();
+
+function show(uiConfig: boolean, uiUsers: boolean) {
+	showUIConfig.value = uiConfig;
+	showUsers.value = uiUsers;
+	showNotifications.value = false;
+	showMessages.value = false;
+}
+
+function toggleNotifications() {
+	showNotifications.value = !showNotifications.value;
+	showMessages.value = false;
+	showUIConfig.value = false;
+	showUsers.value = false;
+}
+
+function toggleMessages() {
+	showMessages.value = !showMessages.value;
+	showNotifications.value = false;
+	showUIConfig.value = false;
+	showUsers.value = false;
+}
+
+function toggleSidebar() {
+	indexStore.toggleSidebar();
+}
+
+const logoURL = ref("/imgs/light-big-logo.png");
+
+const updateLogo = () => {
+	logoURL.value =
+		colorMode.preference === "light" ? "/imgs/light-big-logo.png" : "/imgs/dark-big-logo.png";
+};
+
+watch(colorMode, updateLogo);
+onMounted(() => {
+	updateLogo();
+	if (signedIn.value && features.notifications) {
+		notificationsStore.fetchNotifications();
+	}
+});
+</script>
+
+<template>
+	<header class="mg-navbar navbar navbar-expand-lg">
+		<button type="button" class="sidebar-toggler" @click="toggleSidebar()">
+			<MGIcon icon="menu" />
+		</button>
+
+		<div class="search-bar-container">
+			<slot name="search">
+				<search-bar-component v-if="features.search" class="mx-auto searchBar" />
+			</slot>
+
+			<div class="mx-auto mobile-logo">
+				<slot name="logo">
+					<img :src="logoURL" width="138" height="29" alt="Mundo Gamer logo" />
+				</slot>
+			</div>
+		</div>
+
+		<ul class="user-bar">
+			<li v-if="signedIn && features.notifications" class="menu-item" @click="toggleNotifications">
+				<a href="#" @click.prevent :class="{ active: showNotifications }">
+					<MGIcon icon="notification" />
+					<span v-if="notificationCount > 0" class="badge">{{ notificationCount }}</span>
+				</a>
+			</li>
+
+			<li v-if="signedIn && features.chat" class="menu-item" @click="toggleMessages">
+				<a href="#" @click.prevent :class="{ active: showMessages }">
+					<MGIcon icon="message" />
+				</a>
+			</li>
+
+			<li class="menu-item">
+				<a href="#" :class="[{ active: showUIConfig }]" @click.prevent="show(!showUIConfig, false)">
+					<MGIcon icon="gear" />
+				</a>
+			</li>
+
+			<li
+				class="menu-item bordered-menu"
+				:class="{ 'rounded-circle': signedIn }"
+				:style="showUsers ? 'background: var(--header-bordered-menu-active-bg); color: black;' : ''"
+			>
+				<a
+					href="#"
+					:style="showUsers ? 'color: black;' : ''"
+					@click.prevent="show(false, !showUsers)"
+				>
+					<MGIcon v-if="!signedIn" icon="profile" />
+					<img v-else :src="user?.avatar_url" width="32" height="32" class="rounded-circle" />
+				</a>
+			</li>
+
+			<transition name="fade">
+				<MgHeaderUIConfig
+					v-if="showUIConfig"
+					class="header_ui_config"
+					@toggle-visible="showUIConfig = false"
+				/>
+			</transition>
+
+			<transition name="fade">
+				<MgHeaderUIUser
+					v-if="showUsers"
+					class="header_ui_users"
+					@toggle-visible="showUsers = false"
+				/>
+			</transition>
+
+			<transition name="fade">
+				<MgNotificationsModal
+					v-if="showNotifications"
+					@toggle-visible="showNotifications = false"
+				/>
+			</transition>
+
+			<transition name="fade">
+				<MgMessageModal
+					v-if="showMessages"
+					@toggle-visible="showMessages = false"
+				/>
+			</transition>
+		</ul>
+	</header>
+</template>
+
+<style lang="scss" scoped>
+.search-bar-container {
+	display: flex;
+	flex: 1;
+}
+.mobile-logo {
+	display: none;
+}
+.header_ui_config {
+	right: 70px;
+}
+.header_ui_users {
+	margin-right: 24px;
+	top: 60px;
+}
+.mg-navbar {
+	align-items: center;
+	padding: 0.75rem 1rem;
+	transition: background 0.3s ease;
+	width: 100%;
+	background: var(--sidebar-bg);
+
+	.sidebar-toggler {
+		border: 0;
+		outline: 0;
+		background: transparent;
+		display: none;
+	}
+
+	.badge {
+		position: absolute;
+		top: -4px;
+		right: -4px;
+		background: var(--highlight-color, #23c0e9);
+		color: #fff;
+		border-radius: 50%;
+		font-size: 0.625rem;
+		min-width: 16px;
+		height: 16px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 4px;
+	}
+
+	.user-bar {
+		display: flex;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		.menu-item {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 32px;
+			width: 32px;
+			position: relative;
+
+			&.bordered-menu {
+				border: 1px solid var(--header-bordered-menu-border-color);
+				transition: 0.15s ease-in-out;
+
+				a {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+
+			& + .menu-item {
+				margin-left: 1rem;
+			}
+
+			a {
+				height: inherit;
+				width: inherit;
+				color: var(--header-fg);
+				text-decoration: none;
+				transition: 0.15s ease-in-out;
+
+				&:hover,
+				&.active {
+					background-color: var(--header-active-fg);
+					color: var(--sidebar-bg);
+				}
+			}
+
+			.icon {
+				font-size: 2rem;
+			}
+		}
+	}
+}
+
+@media screen and (max-width: 576px) {
+	.search-bar-container {
+		flex-direction: row-reverse;
+	}
+	.mg-navbar {
+		width: 100%;
+		height: 60px;
+
+		.sidebar-toggler {
+			color: var(--header-fg);
+			display: block;
+			.icon {
+				font-size: 1.713rem;
+			}
+		}
+
+		.mobile-logo {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-grow: 1;
+			padding-top: 0.438rem;
+		}
+
+		.user-bar {
+			position: absolute;
+			left: -100vw;
+			justify-content: space-around;
+			align-items: center;
+			height: 64px;
+			width: 71vw;
+			padding: 0 1rem;
+			background: var(--header-mobile-bg);
+			transition: 0.2s ease-in;
+			will-change: left;
+			z-index: 10;
+		}
+	}
+}
+</style>