### Refactor keybindings to a component and replace deprecated detection method

- Extracted platform detection to its own  reusable utility module
- Eliminates deprecated Navigator.platform API usage; uses the User-Agent Client Hints API as the primary method when available
- Handles iOS and Android devices correctly

assets/js/keybindings.js

@@ -1,42 +1,52 @@
-// Dynamically update keybindings or hotkeys
+import { getPlatform } from './utils/user-agent-platform.js';
-function getPlatform() {
-  if (/Mac/.test(navigator.platform)) {
-    return "osx"
-  } else if (/Win/.test(navigator.platform)) {
-    return "win"
-  } else if (/Linux/.test(navigator.platform)) {
-    return "linux"
-  } else {
-    return "other"
-  }
-}
 
+/**
+ * Adds OS-specific class to component
+ * @param {string} osClass - OS-specific class to add
+ * @param {Object} options - Component options
+ * @param {jQuery} options.$component - jQuery element reference
+ */
 function addOSClass(osClass, { $component }) {
-  $component.addClass(osClass)
+  $component.addClass(osClass);
 }
 
-function updateKeyBindings({ $component }) {
+/**
-    var osx = $component.data("osx")
+ * Updates keybinding display based on detected platform
-    var linux = $component.data("linux")
+ * @param {Object} options - Component options
-    var win = $component.data("win")
+ * @param {jQuery} options.$component - jQuery element reference
+ * @param {string} options.platform - Detected platform
+ */
+function updateKeyBindings({ $component, platform }) {
+  const osx = $component.data('osx');
+  const linux = $component.data('linux');
+  const win = $component.data('win');
   
-    if (platform === "other") {
+  let keybind;
-      if (win != linux) {
+
-        var keybind = '<code class="osx">' + osx + '</code> for macOS, <code>' + linux + '</code> for Linux, and <code>' + win + '</code> for Windows';
+  if (platform === 'other') {
-      } else {
+    if (win !== linux) {
-        var keybind = '<code>' + linux + '</code> for Linux and Windows and <code class="osx">' + osx + '</code> for macOS';
+      keybind = `<code class="osx">${osx}</code> for macOS, <code>${linux}</code> for Linux, and <code>${win}</code> for Windows`;
-      }
     } else {
-      var keybind = '<code>' + $component.data(platform) + '</code>'
+      keybind = `<code>${linux}</code> for Linux and Windows and <code class="osx">${osx}</code> for macOS`;
     }
+  } else {
+    keybind = `<code>${$component.data(platform)}</code>`;
+  }
 
-    $component.html(keybind)
+  $component.html(keybind);
 }
 
+/**
+ * Initialize and render platform-specific keybindings
+ * @param {Object} options - Component options
+ * @param {HTMLElement} options.component - DOM element
+ * @returns {void}
+ */
 export default function KeyBinding({ component }) {
   // Initialize keybindings
   const platform = getPlatform();
   const $component = $(component);
+  
   addOSClass(platform, { $component });
-  updateKeyBindings({ $component });
+  updateKeyBindings({ $component, platform });
 }

assets/js/utils/user-agent-platform.js

@@ -0,0 +1,29 @@
+/**
+ * Platform detection utility functions
+ * Provides methods for detecting user's operating system
+ */
+
+/**
+ * Detects user's operating system using modern techniques
+ * Falls back to userAgent parsing when newer APIs aren't available
+ * @returns {string} Operating system identifier ("osx", "win", "linux", or "other")
+ */
+export function getPlatform() {
+  // Try to use modern User-Agent Client Hints API first (Chrome 89+, Edge 89+)
+  if (navigator.userAgentData && navigator.userAgentData.platform) {
+    const platform = navigator.userAgentData.platform.toLowerCase();
+    
+    if (platform.includes('mac')) return 'osx';
+    if (platform.includes('win')) return 'win';
+    if (platform.includes('linux')) return 'linux';
+  }
+  
+  // Fall back to userAgent string parsing
+  const userAgent = navigator.userAgent.toLowerCase();
+  
+  if (userAgent.includes('mac') || userAgent.includes('iphone') || userAgent.includes('ipad')) return 'osx';
+  if (userAgent.includes('win')) return 'win';
+  if (userAgent.includes('linux') || userAgent.includes('android')) return 'linux';
+  
+  return 'other';
+}