outdated state

website/src/routes/[[language]]/app/+page.svelte

@@ -11,6 +11,7 @@
     import CoordinatesPopup from '$lib/components/map/CoordinatesPopup.svelte';
     import Resizer from '$lib/components/Resizer.svelte';
     import { Toaster } from '$lib/components/ui/sonner';
+    import * as AlertDialog from '$lib/components/ui/alert-dialog';
     import { i18n } from '$lib/i18n.svelte';
     import { settings } from '$lib/logic/settings';
     import { loadFiles } from '$lib/logic/file-actions';
@@ -20,6 +21,8 @@
     import { engine } from '$lib/engine';
     import { getURLForGoogleDriveFile } from '$lib/components/embedding/embedding';
 
+    const outdated = engine.outdated;
+
     const {
         treeFileView,
         elevationProfile,
@@ -153,6 +156,20 @@
     {/if}
 </div>
 
+<AlertDialog.Root open={$outdated}>
+    <AlertDialog.Content escapeKeydownBehavior="ignore" interactOutsideBehavior="ignore">
+        <AlertDialog.Header>
+            <AlertDialog.Title>{i18n._('outdated.title')}</AlertDialog.Title>
+            <AlertDialog.Description>{i18n._('outdated.description')}</AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Footer>
+            <AlertDialog.Action onclick={() => location.reload()}>
+                {i18n._('outdated.reload')}
+            </AlertDialog.Action>
+        </AlertDialog.Footer>
+    </AlertDialog.Content>
+</AlertDialog.Root>
+
 <style lang="postcss">
     @reference "tailwindcss";