Add spellchecking for camelCase, PascalCase, and kebab-case

webapp/src/components/tabContentComponents/settingsComponents/displaySettingsComponents/appSettings.vue

@@ -0,0 +1,53 @@
+<template>
+  <div id="appSettings" class="uk-width-large">
+    <h3>Appearance</h3>
+    <p>
+      <label>
+        Theme
+        <select v-model="appTheme" class="uk-select">
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+          <option value="system">System</option>
+        </select>
+      </label>
+    </p>
+    <p>
+      <button class="uk-button uk-button-default" @click="toggleFullscreen">
+        Toggle Fullscreen
+      </button>
+    </p>
+  </div>
+</template>
+<script>
+// Export main app
+export default {
+  name: "AppSettings",
+
+  data: function () {
+    return {};
+  },
+
+  computed: {
+    appTheme: {
+      get() {
+        return this.$store.state.appTheme;
+      },
+      set(value) {
+        this.$store.commit("changeAppTheme", value);
+      },
+    },
+  },
+
+  methods: {
+    async toggleFullscreen() {
+      if (!document.fullscreenElement) {
+        await document.documentElement.requestFullscreen();
+      } else {
+        await document.exitFullscreen();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>

webapp/src/components/tabContentComponents/settingsComponents/displaySettingsComponents/streamSettings.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="streamSettings" class="uk-width-large">
+    <div>
+      <h3>Stream Settings</h3>
+      <label
+        ><input v-model="disableStream" class="uk-checkbox" type="checkbox" /> Disable Web
+        Stream</label
+      >
+      <p class="uk-margin-small">This will disable the embedded web stream of the camera.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+// Export main app
+export default {
+  name: "StreamSettings",
+
+  data: function () {
+    return {};
+  },
+
+  computed: {
+    disableStream: {
+      get() {
+        return this.$store.state.disableStream;
+      },
+      set(value) {
+        this.$store.commit("changeDisableStream", value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>