web/dialog: show dialog when loading cobalt with no js support

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%;

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>