@mundogamernetwork/shared-ui 1.15.0 → 1.16.2

package/components/ui/MgHeaderUIUser.vue

@@ -3,9 +3,13 @@ import { storeToRefs } from "pinia";
 
 const emit = defineEmits(["toggleVisible"]);
 
-const showOnline = ref(true);
 const authStore = useAuthStore();
-const { user, signedIn } = storeToRefs(authStore);
+// showOnline used to be a local ref here — flipped on click, called no
+// endpoint, reset on every reload. The auth store's fetchOnlineStatus /
+// toggleOnlineStatus (see tv-frontend's store, the pattern this now
+// matches everywhere) are what actually persist it; a host whose store
+// doesn't implement them yet just won't expose features.statusOnline.
+const { user, signedIn, showOnline } = storeToRefs(authStore);
 const { performLogout } = useLogout();
 
 const runtimeConfig = useRuntimeConfig();
@@ -31,6 +35,11 @@ onMounted(() => {
 	document.addEventListener("keydown", ({ key }) => {
 		if (key === "Escape") emit("toggleVisible");
 	});
+	// Guarded: not every host's auth store has adopted this pattern yet
+	// (see tv-frontend's store for the reference implementation).
+	if (signedIn.value && typeof authStore.fetchOnlineStatus === "function") {
+		authStore.fetchOnlineStatus();
+	}
 });
 
 onUnmounted(() => {
@@ -40,6 +49,12 @@ onUnmounted(() => {
 const handleLogout = async () => {
 	await performLogout(`${accountsBaseUrl}/login`);
 };
+
+const handleToggleOnline = () => {
+	if (typeof authStore.toggleOnlineStatus === "function") {
+		authStore.toggleOnlineStatus();
+	}
+};
 </script>
 
 <template>
@@ -102,7 +117,7 @@ const handleLogout = async () => {
 					<div class="status-toggle">
 						<span>{{ $t("account_menu.buttons.show_online") }}</span>
 						<label class="switch">
-							<input v-model="showOnline" type="checkbox" />
+							<input :checked="showOnline" type="checkbox" @change="handleToggleOnline" />
 							<span class="slider"></span>
 						</label>
 					</div>
@@ -137,7 +152,15 @@ const handleLogout = async () => {
 	top: 45px;
 	right: 0;
 	z-index: 999;
-	overflow: hidden;
+	// Signed-in content is open-ended — hosts add their own extra-menu-items
+	// (Jobs alone has 5 nav links plus a CTA button and pricing link on top
+	// of the base menu). With no height cap this just grew as tall as its
+	// content, unbounded, and once the earlier width:100% bug (see below)
+	// stopped collapsing it to an unreadable 32px sliver, the height had
+	// nowhere to go but off the bottom of the viewport — no scrollbar, no
+	// way to reach whatever content and the page below it that it covered.
+	max-height: calc(100vh - 65px);
+	overflow-y: auto;
 	transition: all ease 0.5s;
 
 	&:not(.signed-in) {
@@ -270,6 +293,61 @@ const handleLogout = async () => {
 			color: var(--sidebar-menus-fg);
 		}
 
+		// Ported here from jobs-frontend's global _layout.scss (the only host
+		// that already had it) — .switch/.slider had no definition of their
+		// own in this file at all, so hosts without that exact global class
+		// pair fell back to a bare unstyled native checkbox. Self-contained
+		// now, using the same accent token the rest of this file already
+		// falls through (see .plans-pricing-link above), so every front gets
+		// a real toggle instead of only the one host that happened to
+		// already define it globally.
+		.switch {
+			position: relative;
+			display: inline-block;
+			width: 36px;
+			height: 20px;
+			flex-shrink: 0;
+
+			input {
+				opacity: 0;
+				width: 0;
+				height: 0;
+
+				&:checked + .slider {
+					background-color: var(--highlight-color, var(--header-active-fg, var(--ck-highlight-marker-blue)));
+
+					&:before {
+						transform: translateX(16px);
+					}
+				}
+
+				&:focus-visible + .slider {
+					box-shadow: 0 0 0 2px var(--ck-highlight-marker-blue);
+				}
+			}
+
+			.slider {
+				position: absolute;
+				inset: 0;
+				cursor: pointer;
+				background-color: var(--border-card, rgba(255, 255, 255, 0.2));
+				transition: 0.3s;
+				border-radius: 999px;
+
+				&:before {
+					position: absolute;
+					content: "";
+					height: 14px;
+					width: 14px;
+					left: 3px;
+					bottom: 3px;
+					background-color: #fff;
+					transition: 0.3s;
+					border-radius: 50%;
+				}
+			}
+		}
+
 		.btn-primary-outline {
 			display: flex;
 			align-items: center;

package/nuxt.config.ts

@@ -72,6 +72,30 @@ export default defineNuxtConfig({
 	build: {
 		transpile: ['@vue-leaflet/vue-leaflet'],
 	},
+	// pusher-js's browser build is a webpack-bundled UMD file: `module.exports
+	// = factory()` where factory() internally does
+	// `__webpack_exports__["default"] = Pusher` and returns that object. To a
+	// real ES module consumer that looks exactly like "this CJS module wants
+	// default-export interop", but esbuild's static CJS/ESM detection doesn't
+	// reliably recognize that shape here — on some dep-graph paths (this repo
+	// doesn't import pusher-js directly, plugins/echo.client.ts here and in
+	// several consuming apps' own copies of the same plugin do) the raw dist
+	// file gets served to the browser as-is instead of through Vite's
+	// optimized/interop-wrapped dep cache, and `import Pusher from
+	// "pusher-js"` throws "does not provide an export named 'default'" at
+	// evaluation time — before the plugin's own pusherKey guard ever runs, so
+	// it takes the whole plugin down, and on hosts where that happens during
+	// app bootstrap it silently breaks ALL click handling on the page (every
+	// header dropdown, the sidebar toggle, everything — not just this
+	// plugin's own WebSocket setup). needsInterop forces Vite to always
+	// treat it as CJS needing the default-export wrapper, which is the fix
+	// Vite ships for exactly this class of mismatch.
+	vite: {
+		optimizeDeps: {
+			include: ["pusher-js", "laravel-echo"],
+			needsInterop: ["pusher-js"],
+		},
+	},
 	components: [
 		{
 			path: `${packageRoot}/components`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.15.0",
+  "version": "1.16.2",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",