chore(deps): remove unused dependencies

package.json

@@ -48,13 +48,11 @@
     "sass": "^1.78.0",
     "sass-loader": "^13.3.3",
     "semver": "^7.6.3",
-    "svelte-preprocess": "^6.0.2",
     "url": "^0.11.4"
   },
   "dependencies": {
     "@bedframe/cli": "^0.0.85",
     "@codemirror/lang-less": "^6.0.2",
-    "@heroicons/react": "^2.1.5",
     "@million/lint": "latest",
     "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
     "@tailwindcss/forms": "^0.5.9",
@@ -64,40 +62,29 @@
     "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.7",
     "@types/node": "^20.16.5",
-    "@types/react": "^18.3.5",
+    "@types/react": "17",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "17",
     "@types/sortablejs": "^1.15.8",
     "@types/uuid": "^9.0.8",
     "@types/webextension-polyfill": "^0.10.7",
-    "@uiw/codemirror-extensions-color": "^4.23.2",
-    "@uiw/codemirror-theme-github": "^4.23.2",
-    "@uiw/react-codemirror": "^4.23.2",
     "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "dompurify": "^3.1.6",
-    "framer-motion": "^11.5.4",
     "idb": "^8.0.0",
     "kolorist": "^1.8.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "million": "latest",
     "motion": "^10.18.0",
     "postcss": "^8.4.45",
     "publish-browser-extension": "^2.2.1",
     "react": "17",
     "react-best-gradient-color-picker": "^3.0.10",
     "react-dom": "17",
-    "react-error-boundary": "^4.0.13",
-    "react-router-dom": "^6.26.2",
-    "react-shadow-root": "^6.2.0",
-    "react-toastify": "^10.0.5",
-    "rimraf": "^5.0.10",
     "sortablejs": "^1.15.3",
     "svelte": "5.0.0-next.244",
     "swiper": "latest",
     "tailwindcss": "^3.4.11",
-    "ts-loader": "^9.5.1",
     "typescript": "^5.6.2",
     "uuid": "^9.0.1",
     "vite": "^5.4.4",

src/svelte-interface/pages/settings/general.svelte

@@ -9,6 +9,7 @@
   import type { SettingsList } from "@/svelte-interface/types/SettingsProps"
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
   import PickerSwatch from "@/svelte-interface/components/PickerSwatch.svelte"
+  import hideSensitiveContent from "@/seqta/ui/dev/hideSensitiveContent"
 
   const { showColourPicker } = $props<{ showColourPicker: () => void }>();
 </script>
@@ -150,7 +151,7 @@
   {/each}
 
   {#if $settingsState.devMode}
-    <div class="flex items-center justify-between px-4 py-3">
+    <div class="flex items-center justify-between px-4 py-3 mt-4 pt-[1.75rem]">
       <div class="pr-4">
         <h2 class="text-sm font-bold">Developer Mode</h2>
         <p class="text-xs">Enables developer mode, allowing you to test new features and changes.</p>
@@ -159,5 +160,17 @@
         <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
       </div>
     </div>
+    <div class="flex items-center justify-between px-4 py-3">
+      <div class="pr-4">
+        <h2 class="text-sm font-bold">Sensitive Hider</h2>
+        <p class="text-xs">Replace sensitive content with mock data</p>
+      </div>
+      <div>
+        <Button 
+          onClick={() => hideSensitiveContent()}
+          text="Hide"
+        />
+      </div>
+    </div>
   {/if}
 </div>