make everything unselectable, make context menus not useless

src/App.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import MainView from "./views/main.svelte"
+  import MainView from "./views/main.svelte";
 
   //TODO: load config
-
 </script>
 
 <main style:background-color="lightblue">
@@ -10,7 +9,17 @@
 </main>
 
 <style lang="scss">
-:global(body) {
-  overflow: hidden;
-}
-</style>
+  :global(*) {
+    user-select: none;
+  }
+  :global(body) {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    overflow: hidden;
+  }
+</style>

src/components/FramePreview.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  const hints = ["Eyes open | Mouth closed", "Eyes open | Mouth open", "Eyes closed | Mouth closed", "Eyes closed | Mouth open"];
+</script>
+
 <script lang="ts">
   import { frames } from "../store";
   import { invoke } from "@tauri-apps/api";
@@ -44,7 +48,7 @@
   {#if showMenu}
     <div transition:fade={{ duration: 50 }} class="context">
       <Context>
-        <p>Context Menu</p>
+        <p>{hints[index]}</p>
       </Context>
     </div>
   {/if}

src/style.css

@@ -6,3 +6,6 @@
   left: 0px;
 }
 
+* {
+  user-select: none;
+}

src/views/main.svelte

@@ -165,7 +165,7 @@
       }}
       class="buttons"
     >
-      <div on:click={saveRay}>Save</div>
+      <div on:click={saveRay}><span>Save</span></div>
       <div on:click={loadRay}>Load</div>
     </div>
   {/if}
@@ -174,6 +174,10 @@
 <svelte:body on:contextmenu|preventDefault />
 
 <style lang="scss">
+  div {
+    user-select: none;
+  }
+  
   .buttons {
     position: absolute;
     top: 2vh;
@@ -189,7 +193,6 @@
       border-radius: 5px;
       background-color: rgba(0.5, 0.5, 0.5, 0.5);
       border: solid black 2px;
-      user-select: none;
       cursor: pointer;
       &:hover {
         background-color: rgba(0.9, 0.9, 0.9, 0.9);