added debug console

packages/app/src/App.jsx

@@ -60,6 +60,9 @@ import { Session, User } from "models"
 import config from "config"
 
 import { NotFound, RenderError, Crash, Settings, Navigation, Login, UserRegister, Creator, Searcher } from "components"
+import { DOMWindow } from "components/RenderWindow"
+import loadable from "@loadable/component"
+
 import { Icons } from "components/Icons"
 
 import Layout from "./layout"
@@ -326,6 +329,15 @@ class App extends React.Component {
 			}
 			return await StatusBar.show()
 		},
+		openDebugger: () => {
+			// create a new dom window
+			const win = new DOMWindow({
+				id: "debug",
+				title: "Debug",
+			})
+
+			win.createDefaultWindow(loadable(() => import("./debug")))
+		}
 	}
 
 	constructor(props) {

packages/app/src/debug/components/timeCalculation/index.jsx

@@ -0,0 +1,113 @@
+import React from "react"
+import * as antd from "antd"
+
+import momentTimezone from "moment-timezone"
+import { DateTime } from "luxon"
+
+const timezones = momentTimezone.tz.names()
+
+import "./index.less"
+
+export default (props) => {
+    const [simulatedTime, setSimulatedTime] = React.useState(null)
+    const [simlatedTimezone, setSimlatedTimezone] = React.useState(null)
+
+    const localTimezone = momentTimezone.tz.guess()
+
+    const setSimulatedTimezoneAsLocal = () => {
+        setSimlatedTimezone(localTimezone)
+    }
+
+    const handleSimulatedTimeChange = (moment) => {
+        // set with UTC time string and input simlatedTimezone
+        const value = momentTimezone.tz(Date.now(), simlatedTimezone).format()
+
+        setSimulatedTime(value)
+    }
+
+    const getTimezoneOfString = (value) => {
+        const timezone = momentTimezone.tz(value).tz()
+
+        return timezone
+    }
+
+    const calculateTimeAgo = (inputTime) => {
+        if (!inputTime) {
+            return "No time"
+        }
+
+        // calculate the absolute time ago between the input time and the current time using luxon, and return a string
+        const inputTimezone = momentTimezone.tz(value).tz()
+
+        const inputTimeInLocalTimezone = momentTimezone.tz(inputTime, inputTimezone).tz(localTimezone).format()
+
+        const timeAgo = DateTime.fromISO(inputTimeInLocalTimezone).toRelative()
+
+        return timeAgo
+    }
+
+    return <div className="timeCalculation">
+        <h2>Adjust simulated params</h2>
+
+        <div className="simulatedTimezone">
+            <div className="field">
+                <p>
+                    Select a simulated a timezone
+                </p>
+                <antd.Select
+                    value={simlatedTimezone}
+                    onChange={setSimlatedTimezone}
+                >
+                    {timezones.map((timezone, index) => {
+                        return <antd.Select.Option key={index} value={timezone}>
+                            {timezone}
+                        </antd.Select.Option>
+                    })}
+                </antd.Select>
+
+                <antd.Button onClick={setSimulatedTimezoneAsLocal}>
+                    Set current {localTimezone}
+                </antd.Button>
+
+                <p>
+                    value: {simlatedTimezone}
+                </p>
+            </div>
+
+            <div className="field">
+                <p>
+                    Set a simulated time
+                </p>
+
+                <antd.TimePicker
+                    onChange={handleSimulatedTimeChange}
+                />
+
+                <p>
+                    value: {simulatedTime}
+                </p>
+            </div>
+
+            <div className="field">
+                <antd.Input
+                    onChange={(e) => setSimulatedTime(e.target.value)}
+                    value={simulatedTime}
+                />
+            </div>
+        </div>
+
+        <h2>Resulting Data</h2>
+
+        <div className="fromNow">
+            <p>
+                Time ago from now (in your timezone {localTimezone})
+            </p>
+
+            <p>
+                {
+                    calculateTimeAgo(simulatedTime)
+                }
+            </p>
+        </div>
+    </div>
+}

packages/app/src/debug/components/timeCalculation/index.less

@@ -0,0 +1,29 @@
+.timeCalculation {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    max-width: 1200px;
+
+    * {
+        user-select: unset;
+    }
+
+    .ant-select {
+        width: 100%;
+    }
+
+    .simulatedTimezone {
+        display: flex;
+        flex-direction: row;
+
+        .field {
+            display: flex;
+            flex-direction: column;
+
+            margin-right: 30px;
+        }
+
+        margin-bottom: 40px;
+    }
+}

packages/app/src/debug/index.jsx

@@ -0,0 +1,40 @@
+import React from "react"
+import * as antd from "antd"
+
+const DebuggersComponents = import.meta.glob("/src/debug/components/**/[a-z[]*.jsx")
+
+export default (props) => {
+    const [activeDebugger, setActiveDebugger] = React.useState(null)
+
+    const handleDebbugerSelect = (key) => {
+        setActiveDebugger(key)
+    }
+
+    if (activeDebugger) {
+        const Debugger = DebuggersComponents[activeDebugger]
+
+        return <div className="debugger">
+            <div className="debugger_header">
+                <antd.Button onClick={() => setActiveDebugger(null)}>
+                    Back
+                </antd.Button>
+            </div>
+
+            <Debugger />
+        </div>
+    }
+
+    return <div className="debugger">
+        <h1>Select a debugger</h1>
+
+        <div className="debuggerMenu">
+            {Object.keys(DebuggersComponents).map((key, index) => {
+                return <div key={index} className="debuggerMenuItem">
+                    <button onClick={() => handleDebbugerSelect(key)}>
+                        {key}
+                    </button>
+                </div>
+            })}
+        </div>
+    </div>
+}