inicontent 1.0.0

package/app/layouts/dashboard.vue

@@ -0,0 +1,91 @@
+<template>
+	<NuxtLayout name="default">
+		<NLayout position="absolute">
+			<NScrollbar id="iniHeader" style="max-height: 65px" xScrollable trigger="none">
+				<NLayoutHeader style="height: 64px; padding: 15px 24px" bordered>
+					<LazyHeader />
+				</NLayoutHeader>
+			</NScrollbar>
+			<NLayoutContent id="container" position="absolute"
+				content-style="padding: 24px;height: fit-content"
+				:native-scrollbar="false">
+				<slot></slot>
+			</NLayoutContent>
+		</NLayout>
+
+		<NModal v-model:show="showAuthModal" :mask-closable="false" :close-on-esc="false">
+			<Auth v-if="showAuthModal" :onLoggedIn />
+		</NModal>
+
+		<!-- Global conflict resolution modal: auto-opens when an offline edit
+		     collides with the server during sync; also reachable from the
+		     SyncStatus popover in the header. -->
+		<OfflineConflictModal />
+
+		<LazyAssetPreview />
+
+		<LazyFloatingChatbot v-if="route.path.includes('/admin')" />
+	</NuxtLayout>
+</template>
+
+<script setup lang="ts">
+// onBeforeUpdate(() => {
+//     clearNuxtState("translations");
+// })
+
+const config = useRuntimeConfig();
+const route = useRoute();
+const database = useState<Database>("database");
+
+const sessionID = useScopedCookie<string>("sid", database.value?.slug);
+
+const showAuthModal = ref(false);
+const authCheckFailCount = ref(0);
+const AUTH_CHECK_MAX_FAILS = 3;
+
+async function checkAuth() {
+	if (showAuthModal.value || String(route.name).includes("auth")) return;
+
+	if (!sessionID.value) {
+		showAuthModal.value = true;
+		return;
+	}
+
+	try {
+		const data = await $fetch<{ result: boolean }>(
+			`${config.public.apiBase}${database.value.slug}/auth/current`,
+			{
+				credentials: "include",
+				query: {
+					isSignedIn: true,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+			},
+		);
+		authCheckFailCount.value = 0;
+		if (!data.result) {
+			showAuthModal.value = true;
+		}
+	} catch (error) {
+		// Do not force logout on a single transient network/server error.
+		authCheckFailCount.value += 1;
+		if (authCheckFailCount.value >= AUTH_CHECK_MAX_FAILS) {
+			showAuthModal.value = true;
+		}
+	}
+}
+
+function onLoggedIn() {
+	showAuthModal.value = false;
+	authCheckFailCount.value = 0;
+	// User and sessionID are already updated in Auth component
+}
+
+onMounted(async () => {
+	checkAuth();
+	if (!String(route.name).endsWith("auth")) {
+		const interval = setInterval(checkAuth, 60000); // Check every 1 minute
+		onUnmounted(() => clearInterval(interval));
+	}
+});
+</script>

package/app/layouts/default.vue

@@ -0,0 +1,228 @@
+<template>
+	<NConfigProvider v-bind="configProviderProps">
+		<NuxtLoadingIndicator :color="ThemeConfig.primaryColor" :height=2 />
+		<slot></slot>
+	</NConfigProvider>
+</template>
+
+<script setup lang="ts">
+import {
+	type ConfigProviderProps,
+	arDZ,
+	createDiscreteApi,
+	darkTheme,
+	dateArDZ,
+	dateEnUS,
+	enUS,
+} from "naive-ui"
+
+import "~/assets/main.css"
+
+import { hexToRGB } from "~/composables"
+
+const database = useState<Database>("database");
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug)
+const Theme = useCookie<"light" | "dark">("theme", { sameSite: true })
+const ThemeConfig = useState<ThemeConfig>("ThemeConfig")
+
+// The unstable*Rtl styles are only meaningful for Arabic/rtl layouts. They used
+// to be eagerly imported on every boot, pulling ~24 naive-ui style modules into
+// the shared entry chunk that English/global sites never use. They are now
+// loaded on demand (a single chunk, only when the language is "ar").
+const rtlStyles = ref<any[]>([])
+
+async function ensureRtlStyles() {
+	if (rtlStyles.value.length) return rtlStyles.value
+	const {
+		unstableListRtl,
+		unstablePageHeaderRtl,
+		unstableButtonGroupRtl,
+		unstableButtonRtl,
+		unstableCardRtl,
+		unstableScrollbarRtl,
+		unstableMessageRtl,
+		unstableCollapseRtl,
+		unstableDrawerRtl,
+		unstableInputNumberRtl,
+		unstableCheckboxRtl,
+		unstableRadioRtl,
+		unstableTagRtl,
+		unstableTableRtl,
+		unstableInputRtl,
+		unstableAvatarGroupRtl,
+		unstableFlexRtl,
+		unstableSelectRtl,
+		unstableDataTableRtl,
+		unstableDialogRtl,
+		unstablePaginationRtl,
+		unstableNotificationRtl,
+		unstableStepsRtl,
+		unstableAlertRtl,
+	} = await import("naive-ui")
+	rtlStyles.value = [
+		unstableListRtl,
+		unstablePageHeaderRtl,
+		unstableButtonGroupRtl,
+		unstableButtonRtl,
+		unstableCardRtl,
+		unstableScrollbarRtl,
+		unstableMessageRtl,
+		unstableCollapseRtl,
+		unstableDrawerRtl,
+		unstableInputNumberRtl,
+		unstableCheckboxRtl,
+		unstableRadioRtl,
+		unstableTagRtl,
+		unstableTableRtl,
+		unstableInputRtl,
+		unstableAvatarGroupRtl,
+		unstableFlexRtl,
+		unstableSelectRtl,
+		unstableDataTableRtl,
+		unstableDialogRtl,
+		unstablePaginationRtl,
+		unstableNotificationRtl,
+		unstableStepsRtl,
+		unstableAlertRtl,
+	]
+	return rtlStyles.value
+}
+
+watch(
+	computed(() => Language.value === "ar"),
+	async (isArabic) => {
+		if (isArabic) void ensureRtlStyles()
+	},
+	{ immediate: true },
+)
+
+const Locales = {
+	ar: arDZ,
+	en: enUS,
+}
+const dateLocales = {
+	ar: dateArDZ,
+	en: dateEnUS,
+}
+
+const configProviderProps = computed<ConfigProviderProps>(() => ({
+	dir: Language.value === "ar" ? "rtl" : "ltr",
+	rtl:
+		Language.value === "ar" && rtlStyles.value.length
+			? rtlStyles.value
+			: undefined,
+	theme: Theme.value === "dark" ? darkTheme : undefined,
+	themeOverrides: {
+		common: {
+			...ThemeConfig.value,
+			fontFamily: "Cairo",
+			fontFamilyMono: "Cairo",
+			borderRadius: "15px"
+		},
+	},
+	locale: Locales[Language.value as "ar" | "en"] ?? Locales.en,
+	dateLocale: dateLocales[Language.value as "ar" | "en"] ?? dateLocales.en,
+}))
+const { message, notification } = createDiscreteApi(
+	["message", "notification"],
+	{
+		messageProviderProps: {
+			keepAliveOnHover: true,
+			closable: true,
+			containerStyle: {
+				top: "70px",
+			},
+		},
+		configProviderProps,
+	},
+)
+
+onMounted(() => {
+	window.$message = message
+	window.$notification = notification
+
+	// Add an event listener for the print action
+	window.onbeforeprint = () => {
+		// Select the element with the class "printable"
+		let element = document.querySelector(".printable")
+
+		// Check if the element and its parent exist
+		if (element?.parentElement) {
+			// Add the class "printable-direct-parent" to the direct parent
+			element.parentElement.classList.add("printable-direct-parent")
+
+			// Traverse up the DOM starting from the direct parent's parent
+			let parent = element.parentElement.parentElement
+			while (parent) {
+				// Add the class "printable-parent" to all other ancestors
+				parent.classList.add("printable-parent")
+				parent = parent.parentElement
+			}
+		}
+	}
+
+	// Optional: Remove the added classes after printing
+	window.onafterprint = () => {
+		// Remove the "printable-parent" class after printing
+		const elements = document.querySelectorAll(".printable-parent")
+		for (let i = 0; i < elements.length; i++)
+			elements[i]?.classList.remove("printable-parent")
+
+		document
+			.querySelector(".printable-direct-parent")
+			?.classList.remove("printable-parent")
+	}
+
+	fetchTranslation()
+})
+
+watch(Language, () => fetchTranslation())
+
+// Naive UI default body colors for each mode.
+const bodyBgColor = computed(() =>
+	Theme.value === "dark" ? "rgb(16, 16, 20)" : "#fff",
+)
+
+useHead({
+	meta: [
+		{
+			name: "theme-color",
+			content: bodyBgColor,
+		},
+	],
+	htmlAttrs: {
+		// Let the browser render its own chrome (scrollbars, form controls,
+		// native widgets) in the matching color scheme so it follows the
+		// database primary color on desktop, mobile, android, mac & windows.
+		style: computed(
+			() =>
+				`color-scheme: ${Theme.value === "dark" ? "dark" : "light"}; ` +
+				`background-color: ${bodyBgColor.value}`,
+		),
+	},
+	bodyAttrs: {
+		style: computed(
+			() =>
+				`--primaryColor: ${hexToRGB(ThemeConfig.value.primaryColor).join(", ")}`,
+		),
+	},
+})
+
+// Safari Mobile ignores dynamic attribute changes on <meta name="theme-color">.
+// Force it to re-read by removing and re-adding the element whenever the mode
+// changes.  The matching background-color on <html> gives Safari a reliable
+// signal for the status-bar / safe-area-inset color.
+onMounted(() => {
+	watch(bodyBgColor, (color) => {
+		const existing = document.querySelector('meta[name="theme-color"]')
+		if (existing) existing.remove()
+		const meta = document.createElement("meta")
+		meta.name = "theme-color"
+		meta.content = color
+		document.head.appendChild(meta)
+
+		document.documentElement.style.backgroundColor = color
+	}, { immediate: true })
+})
+
+</script>