fix: WIP

plugins/dorion-custom-keybinds/components/KeybindSection.tsx

@@ -0,0 +1,60 @@
+import { css, classes } from './KeybindSection.tsx.scss'
+import { Dropdown } from '../../../components/Dropdown'
+
+const {
+  ui: {
+    Switch,
+    Text,
+    HeaderTags,
+    Header,
+    injectCss
+  },
+} = shelter
+
+interface Props {
+  name: string
+  keybindActionTypes: Record<string, string>
+  internalName: string
+  description: string
+
+  keybinds: [number, number, number][]
+  enabled: boolean
+}
+
+let injectedCss = false
+
+export function KeybindSection(props) {
+  if (!injectedCss) {
+    injectedCss = true
+    injectCss(css)
+  }
+
+  return (
+    <div class={classes.keybindSection}>
+      <div class={classes.actionSection}>
+        <Header size={HeaderTags.H5}>
+          Action
+        </Header>
+
+        <Dropdown
+          value={props.name}
+          options={Object.entries(props.keybindActionTypes).map(([key, value]) => {
+            return {
+              value: key,
+              label: value
+            }
+          })}
+          onChange={(e) => {
+            console.log(e)
+          }}
+        ></Dropdown>
+      </div>
+
+      <div class={classes.keybindArea}>
+        <Header size={HeaderTags.H5}>
+          Keybind
+        </Header>
+      </div>
+    </div>
+  )
+}

plugins/dorion-custom-keybinds/components/KeybindSection.tsx.scss

@@ -0,0 +1,22 @@
+.keybindSection {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.actionSection,
+.keybindArea {
+  display: flex;
+  flex-direction: column;
+  align-items
+}
+
+.actionSection {
+  width: 50%;
+}
+
+.keybindArea {
+  width: 50%;
+}

plugins/dorion-custom-keybinds/index.tsx

@@ -0,0 +1,76 @@
+
+import { KeybindSection } from "./components/KeybindSection"
+
+const {
+  flux: {
+    intercept,
+    dispatcher: FluxDispatcher,
+  },
+  observeDom,
+  ReactDOM,
+  ui: {
+    ReactiveRoot
+  }
+} = shelter
+
+const viewedKeybindsCallback = (e) => {
+  if (e.section !== 'Keybinds') return
+
+  const unsub = observeDom('#keybinds-tab', () => {
+    unsub()
+
+    const oldElm = document.querySelector('.browserNotice__7a436')
+    const owner = shelter.util.getFiberOwner(oldElm)
+    const proto = Object.getPrototypeOf(owner)
+
+    console.log(owner)
+    console.log(proto)
+
+    window.keybinds = {
+      owner,
+      proto,
+    }
+
+    const keybindsArea = document.querySelector('#keybinds-tab')
+    // const root = ReactDOM.createRoot(keybindsArea)
+    const keybindObjs = Object.entries(owner.keybindDescriptions).map(([key, value], i) => {
+      return {
+        id: i,
+        enabled: true,
+        action: key,
+        shortcut: [],
+        managed: false,
+        params: {}
+      }
+    })
+
+    // hide (don't remove) all children
+    for (const child of keybindsArea.children) {
+      child.style.display = 'none'
+    }
+
+    // root.render(
+    //   owner.renderKeybinds(keybindObjs)
+    // )
+
+    keybindsArea.appendChild(
+      <ReactiveRoot>
+        <KeybindSection
+          name="test"
+          keybindActionTypes={owner.keybindActionTypes}
+          internalName="test"
+          description="test"
+          keybinds={keybindObjs.map(k => k.shortcut)}
+          enabled={true}
+        ></KeybindSection>
+      </ReactiveRoot>
+    )
+  })
+}
+
+const subscriptions = [
+  FluxDispatcher.subscribe('USER_SETTINGS_MODAL_SET_SECTION', viewedKeybindsCallback)
+]
+
+
+

plugins/dorion-custom-keybinds/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "dorion-custom-keybinds",
+  "dependencies": {
+    "@cumjar/websmack": "^1.2.0",
+    "spitroast": "^1.4.4"
+  }
+}

plugins/dorion-custom-keybinds/plugin.json

@@ -0,0 +1,5 @@
+{
+  "name": "Dorion Custom Keybinds",
+  "description": "Enable the use of global, customized keybinds",
+  "author": "SpikeHD"
+}