From eab37ae7ff699a42b2ec3efa89e517bce5f80ad0 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Sat, 12 Oct 2024 17:42:31 +0000
Subject: [PATCH] web/dialog: show dialog when loading cobalt with no js
 support

---
 web/src/components/dialog/DialogHolder.svelte |  4 +-
 .../components/dialog/NoScriptDialog.svelte   | 39 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/dialog/NoScriptDialog.svelte

diff --git a/web/src/components/dialog/DialogHolder.svelte b/web/src/components/dialog/DialogHolder.svelte
index 939e7a8f..5ca84cb9 100644
--- a/web/src/components/dialog/DialogHolder.svelte
+++ b/web/src/components/dialog/DialogHolder.svelte
@@ -4,6 +4,7 @@
     import SmallDialog from "$components/dialog/SmallDialog.svelte";
     import PickerDialog from "$components/dialog/PickerDialog.svelte";
     import SavingDialog from "$components/dialog/SavingDialog.svelte";
+    import NoScriptDialog from "$components/dialog/NoScriptDialog.svelte";
 
     $: backdropVisible = $dialogs.length > 0;
 </script>
@@ -13,6 +14,7 @@
     more info here: https://github.com/microsoft/TypeScript/issues/46680
 -->
 <div id="dialog-holder">
+    <NoScriptDialog />
     {#each $dialogs as dialog}
         {#if dialog.type === "small"}
             <SmallDialog {...dialog} />
@@ -71,7 +73,7 @@
         pointer-events: none;
     }
 
-    #dialog-backdrop {
+    #dialog-backdrop, :global(#nojs-dialog-backdrop) {
         position: absolute;
         height: 100%;
         width: 100%;
diff --git a/web/src/components/dialog/NoScriptDialog.svelte b/web/src/components/dialog/NoScriptDialog.svelte
new file mode 100644
index 00000000..65c05d5f
--- /dev/null
+++ b/web/src/components/dialog/NoScriptDialog.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+    import SmallDialog from "$components/dialog/SmallDialog.svelte";
+</script>
+
+<noscript style="display: contents">
+    <div id="nojs-ack">
+        <SmallDialog
+            id="nojs-dialog"
+            meowbalt="error"
+            bodyText={
+                "cobalt uses javascript for api requests and ui interactions, but it's not available in your browser. "
+                + "you can still navigate around cobalt, but most functionality won't work."
+            }
+            buttons={[
+                {
+                    text: "got it",
+                    main: true,
+                    action: () => {},
+                    link: "#nojs-ack"
+                },
+            ]}
+        />
+        <div id="nojs-dialog-backdrop"></div>
+    </div>
+</noscript>
+
+<style>
+    :global(#nojs-ack) {
+        display: contents;
+    }
+
+    :global(#nojs-ack:target) {
+        display: none;
+    }
+
+    #nojs-dialog-backdrop {
+        opacity: 1;
+    }
+</style>