inicontent 1.0.0

package/app/components/Header.vue

@@ -0,0 +1,328 @@
+<template>
+    <NPageHeader>
+        <template #avatar>
+            <NuxtLink v-if="String($route.matched[0]?.name).startsWith('database')"
+                :to="`/${$route.params.database ?? ''}`">
+                <NTag strong round :bordered="false" style="cursor:pointer;font-weight:600"
+                    :style="ThemeConfig.revert && Theme === 'dark' ? 'color:#000;background-color:#fff' : ''">
+                    <template #avatar>
+                        <NAvatar fallbackSrc="/favicon.ico" :style='{
+                            backgroundColor: "transparent"
+                        }' :src='database?.icon?.publicURL ?? "/favicon.ico"' />
+                    </template>
+                    {{ t(database?.slug ?? 'inicontent') }}
+                </NTag>
+            </NuxtLink>
+            <NTag v-else strong round :bordered="false">
+                <template #avatar>
+                    <NAvatar fallbackSrc="/favicon.ico" :src='database?.icon?.publicURL ?? "/favicon.ico"' />
+                </template>
+                {{ t(database?.slug ?? 'inicontent') }}
+            </NTag>
+        </template>
+        <template #title v-if='showBreadcrumb'>
+            <NBreadcrumb>
+                <NBreadcrumbItem v-for="(_, index) of breadcrumbArray">
+                    <NuxtLink :to="breadCrumbItemLink(index)">
+                        {{ breadCrumbItemLabel(index) }}
+                    </NuxtLink>
+                </NBreadcrumbItem>
+            </NBreadcrumb>
+        </template>
+        <template #extra>
+			<NButtonGroup>
+				<LazyOfflineSyncStatus show-pwa />
+				<NPopover v-if="user?.role === config.public.idOne" :delay="600" scrollable style="max-height: 240px;">
+						<template #trigger>
+							<NButton secondary round size="small">{{ humanFileSize(totalSize) }}</NButton>
+						</template>
+						<div v-if="barSegments.length > 0"
+							style="height: 6px; border-radius: 3px; overflow: hidden; display: flex; gap: 2px; background: rgba(128,128,128,.2); margin-block-end: 10px;">
+							<div v-for="table in barSegments" :key="table.slug"
+								:style="{ width: `${((table.size ?? 0) / totalSize) * 100}%`, backgroundColor: tableColor(table) }" />
+						</div>
+						<NFlex v-for="(table, index) in sortedTables" :key="table.slug" justify="space-between" align="center">
+							<NFlex align="center" :size="6">
+								<span :style="{
+									width: '8px',
+									height: '8px',
+									borderRadius: '50%',
+									// Tables under the 5% bar threshold have no segment, so
+									// their dot renders grey — signaling 'too small to draw'.
+									backgroundColor: barSegments.some((t) => t.slug === table.slug)
+										? tableColor(table)
+										: 'rgba(128,128,128,.5)',
+									flexShrink: 0,
+								}" />
+								<LazyTableIcon :table="table" />
+								<NText>{{ t(table.slug) }}</NText>
+							</NFlex>
+							<NText depth="3">{{ humanFileSize(table?.size) }}</NText>
+						</NFlex>
+				</NPopover>
+				<NDropdown v-if="languagesDropdownOptions?.length > 1" :value="Language" :options="languagesDropdownOptions"
+					@select="(v) => Language = v">
+					<NButton secondary round size="small">
+						<template #icon>
+							<NIcon>
+								<Icon name="tabler:language" />
+							</NIcon>
+						</template>
+					</NButton>
+				</NDropdown>
+				<NDropdown :options="userDropdownOptions" @select="onSelectUserDropdown">
+					<NButton secondary type="primary" round size="small">
+						<template #icon>
+							<NIcon>
+								<Icon name="tabler:user" />
+							</NIcon>
+						</template>
+						<template v-if="user">
+							<NText strong>{{ user.username.charAt(0).toUpperCase() +
+								user.username.slice(1) }}</NText>
+						</template>
+					</NButton>
+				</NDropdown>
+			</NButtonGroup>
+		</template>
+    </NPageHeader>
+</template>
+
+<script setup lang="ts">
+import { isValidID } from "inibase/utils";
+import { Icon, NIcon, NTag, NText, NFlex } from "#components";
+
+const config = useRuntimeConfig();
+const route = useRoute();
+const user = useState<User | undefined>("user");
+const database = useState<Database>("database");
+
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug);
+const Theme = useCookie<"light" | "dark">("theme", { sameSite: true });
+const redirectTo = useScopedCookie<string | null>("redirectTo", database.value?.slug);
+
+const ThemeConfig = useState<ThemeConfig>("ThemeConfig", () => ({
+	primaryColor: "#FF9800",
+	primaryColorHover: "#F7A42A",
+	primaryColorPressed: "#E19421",
+	primaryColorSuppl: "#CB7900",
+}));
+
+const showBreadcrumb = computed(
+	() =>
+		database.value?.slug &&
+		!["index", "auth", "database-auth"].includes(
+			String(route.matched[0]?.name),
+		),
+);
+
+const sortedTables = computed(() =>
+	[...(database.value?.tables ?? [])].sort(
+		(a, b) => (b.size ?? 0) - (a.size ?? 0),
+	),
+);
+const totalSize = computed(() =>
+	sortedTables.value.reduce((total, table) => total + (table.size ?? 0), 0),
+);
+// Only draw bar segments that represent a meaningful share of storage, so
+// tiny tables don't render as sub-pixel slivers of clutter. The gap left at
+// the end of the bar reads as "the remaining small tables".
+const barSegments = computed(() =>
+	totalSize.value === 0
+		? []
+		: sortedTables.value.filter(
+				(table) => ((table.size ?? 0) / totalSize.value) * 100 >= 5,
+			),
+);
+// Spread hues evenly across however many tables exist, so colors never repeat
+// (unlike a fixed palette that cycles once there are more tables than colors).
+// Key color off the table's position in the FULL sorted list, so a row's dot
+// and its bar segment always share the same hue — even after `barSegments`
+// drops sub-5% tables (whose segment index would otherwise disagree with the
+// row index). Hues spread evenly so they never repeat, regardless of count.
+const tableColor = (table: Table) => {
+	const count = Math.max(sortedTables.value.length, 1);
+	const index = Math.max(
+		sortedTables.value.findIndex((t) => t.slug === table.slug),
+		0,
+	);
+	return `hsl(${(360 / count) * index} 70% 52%)`;
+};
+
+function breadCrumbItemLink(index: number) {
+	const breadcrumbSegments = breadcrumbArray.value.slice(0, index + 1);
+	if (hideDatabaseInBreadcrumb.value && databaseParam.value)
+		return `/${databaseParam.value}/${breadcrumbSegments.join("/")}`;
+	return `/${breadcrumbSegments.join("/")}`;
+}
+const routeSegments = computed(() => route.path.split("/").filter(Boolean));
+const databaseParam = computed(() => {
+	const param = route.params.database;
+	return typeof param === "string" ? param : undefined;
+});
+const hideDatabaseInBreadcrumb = computed(
+	() =>
+		!!databaseParam.value &&
+		routeSegments.value[0] === databaseParam.value &&
+		routeSegments.value[1] === "admin",
+);
+const breadcrumbArray = computed(() =>
+	hideDatabaseInBreadcrumb.value
+		? routeSegments.value.slice(1)
+		: routeSegments.value,
+);
+const table = useState<Table>("table");
+const currentItem = useState<Item>("currentItem");
+const currentDashboard = useState<Dashboard | null>("currentDashboard");
+const itemLabel = computed(() => renderLabel(table.value, currentItem.value));
+
+function breadCrumbItemLabel(index: number) {
+	const childRoute = breadcrumbArray.value[index];
+	if (isValidID(childRoute)) {
+		if (currentDashboard.value?.name && route.path.includes("/dashboards/"))
+			return currentDashboard.value.name;
+		if (currentItem.value) return itemLabel.value;
+	}
+	if (childRoute === "admin") return t("adminPanel");
+	return t(childRoute);
+}
+const userDropdownOptions = computed(() => [
+	{
+		label: t("apiDocumentation"),
+		key: "api",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:book" })),
+		show: !!user.value?.id,
+	},
+	{
+		label: t("settings"),
+		key: "settings",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:settings" })),
+		show: user.value?.role === config.public.idOne,
+	},
+	{
+		label: () => h(NFlex,{ justify: "start", align: "center" }, () => [
+			t("billing"),
+			h(NIcon, { color: ThemeConfig.value.primaryColor}, () => h(Icon, { name: "tabler:external-link" }))
+		]),
+		key: "billing",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:credit-card" })),
+		show:
+			!!user.value?.id &&
+			(database.value?.slug === "inicontent" ||
+				user.value?.role === config.public.idOne),
+		disabled: route.path.includes("/admin/billing"),
+	},
+	{
+		label: t("toggleTheme"),
+		key: "theme",
+		icon: () =>
+			h(NIcon, () =>
+				h(Icon, {
+					name: Theme.value === "light" ? "tabler:moon" : "tabler:sun",
+				}),
+			),
+	},
+	{
+		label: t("profile"),
+		key: "edit",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:pencil" })),
+		show:
+			!!user.value?.id &&
+			database.value?.tables
+				?.find(({ slug }) => slug === "users")
+				?.allowedMethods?.includes("u"),
+	},
+	{
+		label: t("logout"),
+		key: "logout",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:logout" })),
+		show: !!user.value?.id,
+	},
+	{
+		label: t("auth"),
+		key: "auth",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:login" })),
+		show: !user.value?.id,
+		disabled: (route.name as string | undefined)?.endsWith("-auth"),
+	},
+	{
+		label: `${t("clearCache")} (${humanFileSize(cacheStats.value.size)})`,
+		key: "clearCache",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:wash-machine" })),
+		show: !!user.value?.id && cacheStats.value.size > 0,
+	},
+]);
+
+const sessionID = useScopedCookie<string>("sid", database.value?.slug);
+const { platformUrl } = usePlatformRedirect();
+
+async function onSelectUserDropdown(v: string) {
+	switch (v) {
+		case "api":
+			navigateTo(
+				`${route.params.database ? `/${route.params.database}` : ""}/admin/api`,
+			);
+			break;
+		case "edit":
+			navigateTo(
+				`${route.params.database ? `/${route.params.database}` : ""}/admin/tables/users/${
+					(user.value as User).id
+				}/edit`,
+			);
+			break;
+		case "billing":
+			navigateTo(platformUrl("billing"), { external: true });
+			break;
+		case "settings":
+			navigateTo(
+				`${route.params.database ? `/${route.params.database}` : ""}/admin/settings`,
+			);
+			break;
+		case "theme":
+			Theme.value = Theme.value === "dark" ? "light" : "dark";
+			break;
+		case "logout":
+			await $fetch(
+				`${config.public.apiBase}${
+					database.value?.slug ?? "inicontent"
+				}/auth/signout`,
+				{
+					credentials: "include",
+					params: {
+						locale: Language.value,
+						[`${database.value.slug}_sid`]: sessionID.value,
+					},
+				},
+			);
+			redirectTo.value = undefined;
+			user.value = undefined;
+			await navigateTo(
+				`${route.params.database ? `/${route.params.database}` : ""}/auth`,
+			);
+			break;
+		case "clearCache":
+			await clearAllCache();
+			cacheStats.value = await getCacheStats();
+			break;
+	}
+}
+const cacheStats = ref<{ total?: number; expired?: number; size: number }>({
+	size: 0,
+});
+onMounted(async () => {
+	cacheStats.value = await getCacheStats();
+});
+
+const languagesDropdownOptions = computed(() => {
+	const primary = database.value?.primaryLanguage;
+	const secondary = database.value?.secondaryLanguages ?? [];
+	const languages = [primary, ...secondary].filter(
+		(language): language is LanguagesType => !!language,
+	);
+
+	return [...new Set(languages)].map((language) => ({
+		label: t(`languages.${language}`),
+		key: language,
+	}));
+});
+</script>

package/app/components/Offline/ConflictModal.vue

@@ -0,0 +1,200 @@
+<template>
+	<NModal
+		v-model:show="isOpen"
+		preset="card"
+		:title="t('resolveConflicts')"
+		:style="{ width: 'min(720px, calc(100vw - 32px))' }"
+		:mask-closable="false"
+	>
+		<template #header-extra>
+			<NButton
+				v-if="conflicts.length"
+				size="small"
+				type="error"
+				quaternary
+				@click="onDiscardAll"
+			>
+				{{ t('discardAll') }}
+			</NButton>
+		</template>
+
+		<!-- Explain why this popped up: an offline edit collided with the server -->
+		<NAlert
+			v-if="conflicts.length"
+			type="warning"
+			:show-icon="true"
+			style="margin-bottom: 16px"
+		>
+			{{ t('conflictModalIntro') }}
+		</NAlert>
+
+		<NSpin :show="isSyncing">
+			<NFlex v-if="conflicts.length === 0 && !isSyncing" vertical align="center" justify="center"
+				style="padding: 60px 0; gap: 12px">
+				<NIcon size="48" color="#888">
+					<Icon name="tabler:circle-check" />
+				</NIcon>
+				<NText depth="3">{{ t('noConflicts') }}</NText>
+			</NFlex>
+
+			<NFlex vertical :size="16">
+				<NCard
+					v-for="conflict in conflicts"
+					:key="conflict.id"
+					:title="`${conflict.method} · ${conflict.table || conflict.database}`"
+					size="small"
+					bordered
+				>
+					<template #header-extra>
+						<NTag size="small" type="warning" :bordered="false">
+							{{ conflict.method }}
+						</NTag>
+					</template>
+
+					<NDescriptions :column="1" size="small" label-placement="top">
+						<NDescriptionsItem :label="t('localVersion')">
+							<pre class="json">{{ pretty(conflict.conflictData?.local) }}</pre>
+						</NDescriptionsItem>
+						<NDescriptionsItem :label="t('serverVersion')">
+							<pre class="json">{{ pretty(conflict.conflictData?.server) }}</pre>
+						</NDescriptionsItem>
+					</NDescriptions>
+
+					<template #footer>
+						<NFlex justify="end" :size="8">
+							<NButton
+								size="small"
+								type="error"
+								@click="keepServer(conflict.id)"
+							>
+								<template #icon>
+									<NIcon><Icon name="tabler:server" /></NIcon>
+								</template>
+								{{ t('keepServer') }}
+							</NButton>
+							<NButton
+								size="small"
+								type="primary"
+								@click="keepLocal(conflict.id)"
+							>
+								<template #icon>
+									<NIcon><Icon name="tabler:device-mobile" /></NIcon>
+								</template>
+								{{ t('keepLocal') }}
+							</NButton>
+						</NFlex>
+					</template>
+				</NCard>
+			</NFlex>
+		</NSpin>
+	</NModal>
+</template>
+
+<script setup lang="ts">
+import {
+	Icon,
+	NAlert,
+	NButton,
+	NCard,
+	NDescriptions,
+	NDescriptionsItem,
+	NFlex,
+	NIcon,
+	NModal,
+	NSpin,
+	NTag,
+	NText,
+} from "#components";
+import {
+	discardAllConflicts,
+	resolveConflictKeepLocal,
+	resolveConflictKeepServer,
+	useOfflineSync,
+} from "~/composables/useOfflineSync";
+
+// Shared bus: SyncStatus's "resolve conflicts" action opens the *same* modal.
+// Keeping this a useState (not component-local) means the modal can live
+// globally in the layout and still be reachable from anywhere.
+const isOpen = useState<boolean>("offline_conflictModalOpen", () => false);
+
+// Destructure at the top level so the template compiler auto-unwraps these
+// refs. Accessing them as `sync.conflicts` (properties of the plain object
+// returned by useOfflineSync) would NOT unwrap: `v-for="conflict in
+// sync.conflicts"` would iterate the raw Ref and crash rendering.
+const { conflicts, isSyncing, refreshCounts } = useOfflineSync();
+
+/**
+ * Auto-open the modal whenever a NEW conflict batch is detected — i.e. a
+ * queued offline mutation collided with the server during a sync (typically
+ * right after the device reconnects). Re-armed when the conflict list empties
+ * or when the user manually closes the modal, so a later conflict batch pops
+ * it again instead of silently parking behind the header badge.
+ */
+const armed = ref(true);
+
+function arm() {
+	armed.value = true;
+}
+
+watch(
+	() => conflicts.value.length,
+	(count) => {
+		if (count === 0) {
+			arm();
+			return;
+		}
+		if (armed.value) {
+			isOpen.value = true;
+			armed.value = false;
+		}
+	},
+);
+
+watch(isOpen, (open) => {
+	if (!open) arm();
+});
+
+function pretty(value: any): string {
+	if (value === undefined || value === null) return "—";
+	if (typeof value === "string") {
+		try {
+			return JSON.stringify(JSON.parse(value), null, 2);
+		} catch {
+			return value;
+		}
+	}
+	return JSON.stringify(value, null, 2);
+}
+
+async function keepLocal(id: string) {
+	await resolveConflictKeepLocal(id);
+	await refreshCounts();
+	window.$message?.success(t("changeQueuedForSync"));
+}
+
+async function keepServer(id: string) {
+	await resolveConflictKeepServer(id);
+	await refreshCounts();
+	window.$message?.info(t("localChangeDiscarded"));
+}
+
+async function onDiscardAll() {
+	await discardAllConflicts();
+	await refreshCounts();
+	window.$message?.info(t("allLocalChangesDiscarded"));
+}
+</script>
+
+<style scoped>
+.json {
+	background: rgba(127, 127, 127, 0.08);
+	border-radius: 6px;
+	padding: 8px;
+	font-size: 12px;
+	white-space: pre-wrap;
+	word-break: break-word;
+	max-height: 240px;
+	overflow: auto;
+	margin: 0;
+}
+</style>