@mundogamernetwork/shared-ui 1.16.0 → 1.16.3

package/components/ui/MgHeaderUIUser.vue

@@ -293,6 +293,61 @@ const handleToggleOnline = () => {
 			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.16.0",
+  "version": "1.16.3",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/services/userStatusService.ts

@@ -0,0 +1,21 @@
+import httpService from "./httpService";
+
+// httpService's baseURL always ends with /api/v1 (see httpService.ts's
+// getHttpService()), so the path here must NOT repeat that prefix — unlike
+// the per-site copies of this file, whose own httpService.ts instances
+// don't normalize it away.
+export const getUserStatus = async () => {
+	const params = {
+		platform_id: import.meta.env.VITE_SYSTEM_ID,
+	};
+	return await httpService.get(`/public/user-status`, { params });
+};
+
+export const userChangeStatus = async (status: boolean) => {
+	const params = {
+		platform_id: import.meta.env.VITE_SYSTEM_ID,
+		hidden_status: status,
+	};
+
+	return await httpService.post(`/public/user-status`, params);
+};

package/stores/auth.ts

@@ -13,6 +13,8 @@ export const useAuthStore = defineStore({
 			signedIn: false,
 			initialized: false,
 			loading: false,
+			showOnline: false,
+			statusLoaded: false,
 		};
 	},
 	actions: {
@@ -65,6 +67,31 @@ export const useAuthStore = defineStore({
 			this.signedIn = false;
 			this.initialized = false;
 			this.loading = false;
+			this.showOnline = false;
+			this.statusLoaded = false;
+		},
+		// Used by shop-frontend, the one site with no local stores/auth.ts of its
+		// own (it re-exports this store directly — see its own file for why).
+		// Every other site has its own copy of this same pattern in its local
+		// store, wired to its own services/userStatusService.ts.
+		async fetchOnlineStatus() {
+			if (this.statusLoaded || !this.signedIn) return;
+			try {
+				const { getUserStatus } = await import("../services/userStatusService");
+				const response = await getUserStatus();
+				this.showOnline = !response.data.data[0].user_status[0].hidden_status;
+				this.statusLoaded = true;
+			} catch (e: any) {
+				if (e?.response?.status !== 401) {
+					this.showOnline = false;
+					this.statusLoaded = true;
+				}
+			}
+		},
+		async toggleOnlineStatus() {
+			this.showOnline = !this.showOnline;
+			const { userChangeStatus } = await import("../services/userStatusService");
+			await userChangeStatus(!this.showOnline);
 		},
 	},
 	getters: {