From 02fff183f9f68251a0f2a39df1bd6a23236cb940 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Fri, 7 Feb 2025 10:30:04 +0530
Subject: [PATCH 1/5] refactor

---
 src/simulator/src/hotkey_binder/keyBinder.js  | 151 -----------------
 src/simulator/src/hotkey_binder/keyBinder.vue | 154 ++++++++++++++++++
 src/simulator/src/hotkey_binder/keyBinding.ts |   8 +
 3 files changed, 162 insertions(+), 151 deletions(-)
 delete mode 100644 src/simulator/src/hotkey_binder/keyBinder.js
 create mode 100644 src/simulator/src/hotkey_binder/keyBinder.vue
 create mode 100644 src/simulator/src/hotkey_binder/keyBinding.ts

diff --git a/src/simulator/src/hotkey_binder/keyBinder.js b/src/simulator/src/hotkey_binder/keyBinder.js
deleted file mode 100644
index f4653fb7..00000000
--- a/src/simulator/src/hotkey_binder/keyBinder.js
+++ /dev/null
@@ -1,151 +0,0 @@
-// import {
-//     editPanel,
-//     heading,
-//     markUp,
-//     closeEdit,
-//     submit,
-//     updateHTML,
-//     override,
-// } from './view/panel.ui'
-// import { setDefault, checkUpdate, addKeys, warnOverride } from './model/actions'
-// import { KeyCode } from './model/normalize/normalizer.plugin.js'
-// import { checkRestricted } from './model/utils.js'
-// import { SimulatorStore } from '#/store/SimulatorStore/SimulatorStore'
-
-//** keyBinder dialog */
-// export function keyBinder() {
-    // const simulatorStore = SimulatorStore()
-    // simulatorStore.dialogBox.customshortcut_dialog = true
-    // $('#customShortcutDialog').append(editPanel)
-    // $('#customShortcutDialog').append(heading)
-    // $('#customShortcutDialog').append(markUp)
-    // $('#customShortcut').on('click', () => {
-    //     closeEdit()
-    //     $('#customShortcutDialog').dialog({
-    //         resizable: false,
-    //         buttons: [
-    //             {
-    //                 text: 'Reset to default',
-    //                 click: () => {
-    //                     if (
-    //                         confirm(
-    //                             'Remove all custom keys & set the default keys?'
-    //                         )
-    //                     )
-    //                         setDefault()
-    //                 },
-    //                 id: 'resetDefault',
-    //             },
-    //             {
-    //                 text: 'Save',
-    //                 click: () => {
-    //                     submit()
-    //                     $('#customShortcutDialog').dialog('close')
-    //                 },
-    //                 id: 'submitBtn',
-    //             },
-    //         ],
-    //     })
-    //     $('#customShortcutDialog').css('display', 'flex')
-    // })
-
-    // //** targetPref is assigned to the target key option to be edited */
-    // let targetPref = null
-    // $('#preference').on('click', (e) => {
-    //     $('#pressedKeys').text('')
-    //     $('#warning').text('')
-    //     $('#edit').css('border', 'none')
-    //     $('#edit').css('display', 'block')
-    //     $($('#edit')).focus()
-    //     ;[, targetPref] = e.target.closest('div').children
-    // })
-
-    // //*** Modifiers restriction enabled here */
-    // //*** below fn works in the edit panel where user enters key combo,
-    // //*** responsible for checking duplicate entries, overriding entries, checking restricted keys, arranging keys in
-    // //*** proper order, validating key combos */
-
-    // $('#edit').keydown((e) => {
-    //     e = e || window.event
-    //     e.stopPropagation()
-    //     e.preventDefault()
-    //     var k = KeyCode
-    //     let modifiers = ['CTRL', 'ALT', 'SHIFT', 'META']
-    //     $('#edit').css('animation', 'none')
-    //     $('#warning').text('')
-    //     if (e.keyCode === 27) closeEdit()
-    //     if (e.keyCode === 13) {
-    //         if ($('#pressedKeys').text() === '') {
-    //             $('#warning').text('Please enter some key(s)')
-    //             $('#edit').css('animation', 'shake .3s linear')
-    //             return
-    //         }
-    //         if (!checkRestricted($('#pressedKeys').text())) {
-    //             override($('#pressedKeys').text())
-    //             targetPref.innerText = $('#pressedKeys').text()
-    //             $('#pressedKeys').text('')
-    //             $('#edit').css('display', 'none')
-    //         } else {
-    //             $('#warning').text('Please enter different key(s).')
-    //             $('#edit').css('animation', 'shake .3s linear')
-    //             $('#pressedKeys').text('')
-    //         }
-    //     }
-    //     const currentKey =
-    //         k.hot_key(k.translate_event(e)).split('+').join(' + ') !== 'Enter'
-    //             ? k.hot_key(k.translate_event(e)).split('+').join(' + ')
-    //             : ''
-    //     if (
-    //         $('#pressedKeys').text().split(' + ').length === 2 &&
-    //         !modifiers.includes(currentKey) &&
-    //         modifiers.includes($('#pressedKeys').text().split(' + ')[1])
-    //     ) {
-    //         $('#pressedKeys').append(` + ${currentKey}`)
-    //     } else if (modifiers.includes($('#pressedKeys').text())) {
-    //         modifiers = modifiers.filter(
-    //             (mod) => mod === $('#pressedKeys').text()
-    //         )
-    //         if (!modifiers.includes(currentKey)) {
-    //             $('#pressedKeys').append(` + ${currentKey}`)
-    //         }
-    //     } else {
-    //         $('#pressedKeys').text('')
-    //         $('#pressedKeys').text(currentKey)
-    //     }
-    //     if (!$('#pressedKeys').text()) {
-    //         $('#pressedKeys').text(currentKey)
-    //     }
-    //     if (
-    //         ($('#pressedKeys').text().split(' + ').length === 2 &&
-    //             ['Ctrl', 'Meta'].includes(
-    //                 $('#pressedKeys').text().split(' + ')[1]
-    //             )) ||
-    //         ($('#pressedKeys').text().split(' + ')[0] === 'Alt' &&
-    //             $('#pressedKeys').text().split(' + ')[1] === 'Shift')
-    //     ) {
-    //         $('#pressedKeys').text(
-    //             $('#pressedKeys').text().split(' + ').reverse().join(' + ')
-    //         )
-    //     }
-    //     warnOverride($('#pressedKeys').text(), targetPref)
-    //     if (checkRestricted($('#pressedKeys').text())) {
-    //         $('#warning').text(
-    //             'The above combination is a system default shortcut & cannot be set.'
-    //         )
-    //     }
-    // })
-
-    // //**  if users closes hotkey dialog by making changes & not saving them, fn will fallback to previous state */
-
-    // $('div#customShortcutDialog').on('dialogclose', function (event) {
-    //     if (localStorage.userKeys) {
-    //         updateHTML('user')
-    //     } else updateHTML('default')
-    // })
-
-    // // Set up shortcuts
-    // if (localStorage.userKeys) {
-    //     checkUpdate()
-    //     addKeys('user')
-    // } else setDefault()
-// }
diff --git a/src/simulator/src/hotkey_binder/keyBinder.vue b/src/simulator/src/hotkey_binder/keyBinder.vue
new file mode 100644
index 00000000..9448700e
--- /dev/null
+++ b/src/simulator/src/hotkey_binder/keyBinder.vue
@@ -0,0 +1,154 @@
+<template>
+  <div v-if="showDialog" class="custom-shortcut-dialog">
+    <div class="dialog-content">
+      <h2>Custom Shortcuts</h2>
+      
+      <div class="key-bindings">
+        <div v-for="(binding, key) in keyBindings" :key="key" class="binding-row">
+          <label>{{ key }}</label>
+          <div class="preference" @click="startEditing(key.toString())">
+            {{ binding.custom || binding.default }}
+          </div>
+        </div>
+      </div>
+
+      <div v-if="editingKey" class="edit-panel">
+        <p>Press your desired key combination</p>
+        <div class="key-display">
+          {{ pressedKeys.join(' + ') }}
+          <span v-if="warning" class="warning">{{ warning }}</span>
+        </div>
+        <div class="dialog-actions">
+          <button @click="cancelEdit">Cancel</button>
+          <button @click="saveBinding">Save</button>
+        </div>
+      </div>
+
+      <div class="dialog-footer">
+        <button @click="resetToDefault">Reset to Default</button>
+        <button @click="closeDialog">Close</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, reactive, watch, Ref } from 'vue'
+import { checkRestricted } from './model/utils'
+import { KeyCode } from './model/normalize/normalizer.plugin.js'
+import { KeyBindings } from './keyBinding';
+
+export default defineComponent({
+  name: 'KeyBinder',
+  setup() {
+    const showDialog = ref<boolean>(false)
+    const editingKey = ref<string | null>(null)
+    const pressedKeys = ref<string[]>([])
+    const warning = ref<string>('')
+    
+    const keyBindings = reactive<KeyBindings>(
+      JSON.parse(localStorage.getItem('userKeys') || '{}') || {
+        togglePanel: { default: 'Ctrl+P', custom: '' },
+        saveFile: { default: 'Ctrl+S', custom: '' }
+      }
+    )
+
+    watch(keyBindings, (newVal: KeyBindings) => {
+      localStorage.setItem('userKeys', JSON.stringify(newVal))
+    })
+
+    const startEditing = (key: string): void => {
+      editingKey.value = key
+      pressedKeys.value = []
+      warning.value = ''
+      window.addEventListener('keydown', handleKeyDown)
+    }
+
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      e.preventDefault()
+      const key = KeyCode.hot_key(KeyCode.translate_event(e))
+      
+      if (key === 'Escape') {
+        cancelEdit()
+        return
+      }
+
+      if (key === 'Enter') {
+        saveBinding()
+        return
+      }
+
+      if (checkRestricted(key)) {
+        warning.value = 'Restricted system shortcut'
+        return
+      }
+
+      const keys = [...new Set([...pressedKeys.value, key])]
+        .sort((a, b) => a.localeCompare(b))
+        
+      pressedKeys.value = keys
+    }
+
+    const saveBinding = (): void => {
+      if (pressedKeys.value.length === 0) {
+        warning.value = 'Please enter some keys'
+        return
+      }
+
+      if (editingKey.value) {
+        keyBindings[editingKey.value].custom = pressedKeys.value.join(' + ')
+      }
+      cancelEdit()
+    }
+
+    const cancelEdit = (): void => {
+      editingKey.value = null
+      pressedKeys.value = []
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+
+    const resetToDefault = (): void => {
+      if (confirm('Reset all to default?')) {
+        Object.keys(keyBindings).forEach(key => {
+          keyBindings[key].custom = ''
+        })
+      }
+    }
+
+    const closeDialog = (): void => {
+      showDialog.value = false
+    }
+
+    return {
+      showDialog,
+      editingKey,
+      pressedKeys,
+      warning,
+      keyBindings,
+      startEditing,
+      saveBinding,
+      cancelEdit,
+      resetToDefault,
+      closeDialog
+    }
+  }
+})
+</script>
+
+<style scoped>
+.custom-shortcut-dialog {
+  position: fixed;
+  /* Add more dialog styling */
+}
+
+.key-display {
+  border: 1px solid #ccc;
+  padding: 8px;
+  margin: 10px 0;
+}
+
+.warning {
+  color: red;
+  margin-left: 10px;
+}
+</style>
diff --git a/src/simulator/src/hotkey_binder/keyBinding.ts b/src/simulator/src/hotkey_binder/keyBinding.ts
new file mode 100644
index 00000000..82a6aa7f
--- /dev/null
+++ b/src/simulator/src/hotkey_binder/keyBinding.ts
@@ -0,0 +1,8 @@
+export interface KeyBinding {
+    custom?: string;
+    default: string;
+  }
+  
+  export interface KeyBindings {
+    [key: string]: KeyBinding;
+  }
\ No newline at end of file

From 19d0f55999873d58d6c6a2f4d50547ebe1b0afb5 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Fri, 7 Feb 2025 18:57:30 +0530
Subject: [PATCH 2/5] resolve

---
 src/simulator/src/hotkey_binder/keyBinding.types.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 src/simulator/src/hotkey_binder/keyBinding.types.ts

diff --git a/src/simulator/src/hotkey_binder/keyBinding.types.ts b/src/simulator/src/hotkey_binder/keyBinding.types.ts
new file mode 100644
index 00000000..82a6aa7f
--- /dev/null
+++ b/src/simulator/src/hotkey_binder/keyBinding.types.ts
@@ -0,0 +1,8 @@
+export interface KeyBinding {
+    custom?: string;
+    default: string;
+  }
+  
+  export interface KeyBindings {
+    [key: string]: KeyBinding;
+  }
\ No newline at end of file

From 78edda4348e80e2032a13bd49adb68ece3ed22dd Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Fri, 7 Feb 2025 19:00:13 +0530
Subject: [PATCH 3/5] refactor

---
 src/simulator/src/hotkey_binder/keyBinder.vue | 2 +-
 src/simulator/src/hotkey_binder/keyBinding.ts | 8 --------
 2 files changed, 1 insertion(+), 9 deletions(-)
 delete mode 100644 src/simulator/src/hotkey_binder/keyBinding.ts

diff --git a/src/simulator/src/hotkey_binder/keyBinder.vue b/src/simulator/src/hotkey_binder/keyBinder.vue
index 9448700e..4a90ddf2 100644
--- a/src/simulator/src/hotkey_binder/keyBinder.vue
+++ b/src/simulator/src/hotkey_binder/keyBinder.vue
@@ -36,7 +36,7 @@
 import { defineComponent, ref, reactive, watch, Ref } from 'vue'
 import { checkRestricted } from './model/utils'
 import { KeyCode } from './model/normalize/normalizer.plugin.js'
-import { KeyBindings } from './keyBinding';
+import { KeyBindings } from './keyBinding.types';
 
 export default defineComponent({
   name: 'KeyBinder',
diff --git a/src/simulator/src/hotkey_binder/keyBinding.ts b/src/simulator/src/hotkey_binder/keyBinding.ts
deleted file mode 100644
index 82a6aa7f..00000000
--- a/src/simulator/src/hotkey_binder/keyBinding.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface KeyBinding {
-    custom?: string;
-    default: string;
-  }
-  
-  export interface KeyBindings {
-    [key: string]: KeyBinding;
-  }
\ No newline at end of file

From f9c989d59ca747b60f22051617b757dce8dc062c Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Fri, 7 Feb 2025 19:02:58 +0530
Subject: [PATCH 4/5] resolve

---
 src/simulator/src/hotkey_binder/keyBinder.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/simulator/src/hotkey_binder/keyBinder.vue b/src/simulator/src/hotkey_binder/keyBinder.vue
index 4a90ddf2..3cf2b91d 100644
--- a/src/simulator/src/hotkey_binder/keyBinder.vue
+++ b/src/simulator/src/hotkey_binder/keyBinder.vue
@@ -47,10 +47,21 @@ export default defineComponent({
     const warning = ref<string>('')
     
     const keyBindings = reactive<KeyBindings>(
-      JSON.parse(localStorage.getItem('userKeys') || '{}') || {
+      +  (() => {
+    try {
+      const stored = localStorage.getItem('userKeys');
+      return stored ? JSON.parse(stored) : {
         togglePanel: { default: 'Ctrl+P', custom: '' },
         saveFile: { default: 'Ctrl+S', custom: '' }
-      }
+      };
+    } catch (e) {
+      console.error('Failed to parse stored key bindings:', e);
+      return {
+        togglePanel: { default: 'Ctrl+P', custom: '' },
+        saveFile: { default: 'Ctrl+S', custom: '' }
+      };
+    }
+  })()
     )
 
     watch(keyBindings, (newVal: KeyBindings) => {

From d411d6271f65e6befb9648b13e6938fb6fe2f9a0 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Fri, 7 Feb 2025 19:08:44 +0530
Subject: [PATCH 5/5] resolve

---
 src/simulator/src/hotkey_binder/keyBinder.vue | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/simulator/src/hotkey_binder/keyBinder.vue b/src/simulator/src/hotkey_binder/keyBinder.vue
index 3cf2b91d..533e0fab 100644
--- a/src/simulator/src/hotkey_binder/keyBinder.vue
+++ b/src/simulator/src/hotkey_binder/keyBinder.vue
@@ -2,7 +2,7 @@
   <div v-if="showDialog" class="custom-shortcut-dialog">
     <div class="dialog-content">
       <h2>Custom Shortcuts</h2>
-      
+
       <div class="key-bindings">
         <div v-for="(binding, key) in keyBindings" :key="key" class="binding-row">
           <label>{{ key }}</label>
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, watch, Ref } from 'vue'
+import { defineComponent, ref, reactive, watch, Ref, onUnmounted } from 'vue'
 import { checkRestricted } from './model/utils'
 import { KeyCode } from './model/normalize/normalizer.plugin.js'
 import { KeyBindings } from './keyBinding.types';
@@ -45,23 +45,23 @@ export default defineComponent({
     const editingKey = ref<string | null>(null)
     const pressedKeys = ref<string[]>([])
     const warning = ref<string>('')
-    
+
     const keyBindings = reactive<KeyBindings>(
       +  (() => {
-    try {
-      const stored = localStorage.getItem('userKeys');
-      return stored ? JSON.parse(stored) : {
-        togglePanel: { default: 'Ctrl+P', custom: '' },
-        saveFile: { default: 'Ctrl+S', custom: '' }
-      };
-    } catch (e) {
-      console.error('Failed to parse stored key bindings:', e);
-      return {
-        togglePanel: { default: 'Ctrl+P', custom: '' },
-        saveFile: { default: 'Ctrl+S', custom: '' }
-      };
-    }
-  })()
+        try {
+          const stored = localStorage.getItem('userKeys');
+          return stored ? JSON.parse(stored) : {
+            togglePanel: { default: 'Ctrl+P', custom: '' },
+            saveFile: { default: 'Ctrl+S', custom: '' }
+          };
+        } catch (e) {
+          console.error('Failed to parse stored key bindings:', e);
+          return {
+            togglePanel: { default: 'Ctrl+P', custom: '' },
+            saveFile: { default: 'Ctrl+S', custom: '' }
+          };
+        }
+      })()
     )
 
     watch(keyBindings, (newVal: KeyBindings) => {
@@ -78,7 +78,7 @@ export default defineComponent({
     const handleKeyDown = (e: KeyboardEvent): void => {
       e.preventDefault()
       const key = KeyCode.hot_key(KeyCode.translate_event(e))
-      
+
       if (key === 'Escape') {
         cancelEdit()
         return
@@ -96,7 +96,7 @@ export default defineComponent({
 
       const keys = [...new Set([...pressedKeys.value, key])]
         .sort((a, b) => a.localeCompare(b))
-        
+
       pressedKeys.value = keys
     }
 
@@ -118,6 +118,10 @@ export default defineComponent({
       window.removeEventListener('keydown', handleKeyDown)
     }
 
+    onUnmounted(() => {
+        window.removeEventListener('keydown', handleKeyDown);
+      })
+
     const resetToDefault = (): void => {
       if (confirm('Reset all to default?')) {
         Object.keys(keyBindings).forEach(key => {