From bd80b7fccd3ed87552cc36896a0ff16bc23352b8 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 28 Jan 2025 10:54:13 +0100
Subject: [PATCH] ui: add debug toggler

---
 frontend/app/components/Client/DebugLog.tsx   | 34 +++++++++++++++++++
 .../Client/SessionsListingSettings.tsx        |  4 ++-
 .../components/MouseTrailSettings.tsx         |  4 +--
 frontend/app/dev/console.js                   |  2 +-
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 frontend/app/components/Client/DebugLog.tsx

diff --git a/frontend/app/components/Client/DebugLog.tsx b/frontend/app/components/Client/DebugLog.tsx
new file mode 100644
index 000000000..ff3311530
--- /dev/null
+++ b/frontend/app/components/Client/DebugLog.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { KEY, options } from 'App/dev/console'
+import { Switch } from 'UI';
+
+function getDefaults() {
+  const storedString = localStorage.getItem(KEY)
+  if (storedString) {
+    const storedOptions = JSON.parse(storedString)
+    return storedOptions.verbose
+  } else {
+    return false
+  }
+}
+
+function DebugLog() {
+  const [showLogs, setShowLogs] = React.useState(getDefaults)
+
+  const onChange = (checked: boolean) => {
+    setShowLogs(checked)
+    options.verbose = checked
+    localStorage.setItem(KEY, JSON.stringify(options))
+  }
+  return (
+    <div>
+      <h3 className={'text-lg'}>Player Debug Logs</h3>
+      <div className={'my-1'}>Show debug information in browser console.</div>
+      <div className={'mt-2'}>
+        <Switch checked={showLogs} onChange={onChange} />
+      </div>
+    </div>
+  )
+}
+
+export default DebugLog
\ No newline at end of file
diff --git a/frontend/app/components/Client/SessionsListingSettings.tsx b/frontend/app/components/Client/SessionsListingSettings.tsx
index 8dee24bf5..b825c565c 100644
--- a/frontend/app/components/Client/SessionsListingSettings.tsx
+++ b/frontend/app/components/Client/SessionsListingSettings.tsx
@@ -6,6 +6,7 @@ import DefaultPlaying from 'Shared/SessionSettings/components/DefaultPlaying';
 import DefaultTimezone from 'Shared/SessionSettings/components/DefaultTimezone';
 import ListingVisibility from 'Shared/SessionSettings/components/ListingVisibility';
 import MouseTrailSettings from 'Shared/SessionSettings/components/MouseTrailSettings';
+import DebugLog from "./DebugLog";
 
 function SessionsListingSettings() {
   return (
@@ -29,8 +30,9 @@ function SessionsListingSettings() {
         </div>
         <Divider />
 
-        <div>
+        <div className={'flex flex-col gap-2'}>
           <MouseTrailSettings />
+          <DebugLog />
         </div>
       </div>
     </div>
diff --git a/frontend/app/components/shared/SessionSettings/components/MouseTrailSettings.tsx b/frontend/app/components/shared/SessionSettings/components/MouseTrailSettings.tsx
index d21dfd6d6..42406e6fd 100644
--- a/frontend/app/components/shared/SessionSettings/components/MouseTrailSettings.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/MouseTrailSettings.tsx
@@ -13,13 +13,13 @@ function MouseTrailSettings() {
   };
 
   return (
-    <>
+    <div>
       <h3 className='text-lg'>Mouse Trail</h3>
       <div className='my-1'>See mouse trail to easily spot user activity.</div>
       <div className='mt-2'>
         <Switch onChange={updateSettings} checked={mouseTrail} />
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/frontend/app/dev/console.js b/frontend/app/dev/console.js
index b040a595a..54f581a79 100644
--- a/frontend/app/dev/console.js
+++ b/frontend/app/dev/console.js
@@ -1,4 +1,4 @@
-const KEY = "__OPENREPLAY_DEV_TOOLS__"
+export const KEY = "__OPENREPLAY_DEV_TOOLS__"
 
 export const options = {
 	logStuff(verbose=true) {