feat: show admin UI warning for SQLite on networked filesystem (#1713)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/lib/components/ui/alert/alert.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const alertVariants = tv({
 		base: "grid gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
@@ -7,7 +7,7 @@
 			variant: {
 				default: 'bg-card text-card-foreground',
 				destructive:
-					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+					'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100 *:[svg]:text-current',
 				success:
 					'bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100 *:[svg]:text-current',
 				info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 *:[svg]:text-current',
@@ -23,10 +23,10 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef } from '$lib/utils/style.js';
 	import { LucideX } from '@lucide/svelte';
 	import { onMount } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),

frontend/src/lib/services/storage-service.ts

@@ -0,0 +1,8 @@
+import APIService from './api-service';
+
+export default class StorageService extends APIService {
+	getSqliteStorageWarning = async () => {
+		const response = await this.api.get('/storage/sqlite-warning').then((res) => res.data);
+		return response.showWarning as boolean;
+	};
+}

frontend/src/routes/settings/+layout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import EmailVerificationStateBox from '$lib/components/email-verification-state-box.svelte';
 	import FadeWrapper from '$lib/components/fade-wrapper.svelte';
+	import FormattedMessage from '$lib/components/formatted-message.svelte';
 	import Sidebar from '$lib/components/sidebar.svelte';
+	import * as Alert from '$lib/components/ui/alert';
 	import { m } from '$lib/paraglide/messages';
 	import userStore from '$lib/stores/user-store';
+	import { LucideTriangleAlert } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 	import type { LayoutData } from './$types';
@@ -16,7 +19,7 @@
 		data: LayoutData;
 	} = $props();
 
-	const { versionInformation, user } = data;
+	const { versionInformation, sqliteStorageWarning, user } = data;
 
 	type NavItem = {
 		href?: string;
@@ -55,7 +58,7 @@
 			in:fade={{ duration: 200 }}
 			class="mx-auto flex w-full max-w-[1720px] flex-col gap-x-8 gap-y-8 p-4 md:p-8 lg:flex-row"
 		>
-			<div class="min-w-[200px] xl:min-w-[250px]">
+			<div class="w-full lg:w-[200px] lg:shrink-0 xl:w-[250px]">
 				<div in:fly={{ x: -15, duration: 200 }} class="sticky top-6">
 					<Sidebar
 						{items}
@@ -68,6 +71,14 @@
 
 			<div class="flex w-full flex-col gap-4 overflow-hidden pb-2 px-2">
 				<FadeWrapper>
+					{#if sqliteStorageWarning && ($userStore?.isAdmin || user?.isAdmin)}
+						<Alert.Root variant="destructive">
+							<LucideTriangleAlert />
+							<Alert.Description>
+								<FormattedMessage message={m.sqlite_storage_warning} />
+							</Alert.Description>
+						</Alert.Root>
+					{/if}
 					<EmailVerificationStateBox />
 					{@render children()}
 				</FadeWrapper>

frontend/src/routes/settings/+layout.ts

@@ -1,22 +1,22 @@
+import StorageService from '$lib/services/storage-service';
 import VersionService from '$lib/services/version-service';
 import type { AppVersionInformation } from '$lib/types/application-configuration.type';
 import type { LayoutLoad } from './$types';
 
 export const load: LayoutLoad = async () => {
 	const versionService = new VersionService();
+	const storageService = new StorageService();
 	const currentVersion = versionService.getCurrentVersion();
 
-	let newestVersion = null;
-	let isUpToDate: boolean;
-	try {
-		newestVersion = await versionService.getNewestVersion();
-		// If newestVersion is empty, it means the check is disabled or failed.
-		// In this case, we assume the version is up to date.
-		isUpToDate = newestVersion === '' || newestVersion === currentVersion;
-	} catch {
-		// If the request fails, assume up-to-date to avoid showing a warning.
-		isUpToDate = true;
-	}
+	const [newestVersion, sqliteStorageWarning] = await Promise.all([
+		versionService.getNewestVersion().catch(() => null),
+		storageService.getSqliteStorageWarning().catch(() => false)
+	]);
+
+	// If newestVersion is empty, it means the check is disabled or failed.
+	// In this case, we assume the version is up to date.
+	const isUpToDate =
+		newestVersion === null || newestVersion === '' || newestVersion === currentVersion;
 
 	const versionInformation: AppVersionInformation = {
 		currentVersion: versionService.getCurrentVersion(),
@@ -25,6 +25,7 @@ export const load: LayoutLoad = async () => {
 	};
 
 	return {
-		versionInformation
+		versionInformation,
+		sqliteStorageWarning
 	};
 };