Enhance firmware update process and UI components

- Implemented a recursive file deletion method in `kmkUpdater.ts` to improve the removal of the existing kmk folder with progress tracking.
- Updated `AutomaticSetup.vue` to include a debug toggle button and a debug panel for enhanced user experience during setup.
- Enhanced `debug.vue` to auto-connect to the first available port when ports are refreshed and improved sorting of available ports based on serial number.

These changes improve the overall functionality and user interface of the firmware update and keyboard setup processes.

Author: JanLunge

src/main/kmkUpdater.ts

@@ -76,7 +76,42 @@ export const updateFirmware = async () => {
     // write a file to the keyboard with the version sha
     if (fs.existsSync(`${currentKeyboard.path}/kmk`)) {
       console.log('removing old kmk folder')
-      await fs.promises.rm(`${currentKeyboard.path}/kmk`, { recursive: true, force: true })
+      const countFilesRecursive = async (dir: string): Promise<number> => {
+        const files = await fs.readdir(dir, { withFileTypes: true })
+        let count = files.length
+
+        for (const file of files) {
+          if (file.isDirectory()) {
+            count += await countFilesRecursive(`${dir}/${file.name}`)
+          }
+        }
+        return count
+      }
+
+      const deleteWithProgress = async (dir: string) => {
+        let processedFiles = 0
+        const totalFiles = await countFilesRecursive(dir)
+
+        const deleteRecursive = async (currentDir: string) => {
+          const currentFiles = await fs.readdir(currentDir, { withFileTypes: true })
+          for (const file of currentFiles) {
+            const filePath = `${currentDir}/${file.name}`
+            if (file.isDirectory()) {
+              await deleteRecursive(filePath)
+            }
+            await fs.promises.rm(filePath, { force: true, recursive: true })
+            processedFiles++
+            mainWindow?.webContents.send('onUpdateFirmwareInstallProgress', {
+              state: 'cleaning', 
+              progress: (processedFiles / totalFiles) * 100
+            })
+          }
+        }
+
+        await deleteRecursive(dir)
+      }
+      
+      await deleteWithProgress(`${currentKeyboard.path}/kmk`)
     }
     if (!fs.existsSync(`${currentKeyboard.path}/kmk`)) {
       fs.mkdirSync(`${currentKeyboard.path}/kmk`)

src/renderer/src/components/AutomaticSetup.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="min-h-screen bg-base-100 p-6">
     <div class="mx-auto max-w-5xl space-y-8">
-      <h2 class="text-center text-4xl font-bold text-base-content">Mapping your Pinout</h2>
+      <div class="flex items-center justify-between">
+        <h2 class="text-center text-4xl font-bold text-base-content">Mapping your Pinout</h2>
+        <button class="btn btn-ghost" @click="toggleDebug">
+          <i class="mdi mdi-bug text-2xl" :class="{ 'text-primary': showDebug }"></i>
+        </button>
+      </div>
 
       <div class="grid gap-6 md:grid-cols-2">
         <!-- Detection Info Panel -->
@@ -62,6 +67,13 @@
         </div>
       </div>
 
+      <!-- Debug Panel -->
+      <div v-if="showDebug" class="card bg-base-200 shadow-lg">
+        <div class="card-body">
+          <Debug />
+        </div>
+      </div>
+
       <!-- Key Preview -->
       <div class="card bg-base-200 shadow-lg">
         <div class="card-body">
@@ -103,7 +115,9 @@
 import router from '@renderer/router'
 import { keyboardStore } from '@renderer/store'
 import { ref, onMounted, onUnmounted } from 'vue'
+import Debug from './debug.vue'
 
+const showDebug = ref(false)
 const currentStep = ref(0)
 const detectionData = ref<{
   rows: string[]
@@ -176,4 +190,8 @@ onUnmounted(() => {
   //   window.api.removeDetectionListeners()
   //   window.api.stopDetection()
 })
+
+function toggleDebug() {
+  showDebug.value = !showDebug.value
+}
 </script>

src/renderer/src/components/debug.vue

@@ -84,7 +84,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { keyboardStore } from '@renderer/store'
 
 const output = ref('')
 const inputData = ref('')
@@ -97,18 +98,33 @@ const isConnecting = ref(false)
 
 const sortedPorts = computed(() => {
   return [...ports.value]
+    .filter((a) => a.serialNumber !== undefined)
     .sort((a, b) => {
-      if (a.port < b.port) {
-        return -1
-      }
-      if (a.port > b.port) {
-        return 1
+      // First try to match by serial number if available
+      if (keyboardStore.serialNumber) {
+        const aMatchesSerial = a.serialNumber === keyboardStore.serialNumber
+        const bMatchesSerial = b.serialNumber === keyboardStore.serialNumber
+        if (aMatchesSerial && !bMatchesSerial) return -1
+        if (!aMatchesSerial && bMatchesSerial) return 1
       }
+      
+      // Then sort by port number
+      const aNum = parseInt(a.port.replace(/[^\d]/g, ''))
+      const bNum = parseInt(b.port.replace(/[^\d]/g, ''))
+      if (aNum < bNum) return -1
+      if (aNum > bNum) return 1
       return 0
     })
-    .filter((a) => a.serialNumber !== undefined)
 })
 
+// Auto-connect to the first available port when ports are refreshed
+watch(sortedPorts, (newPorts) => {
+  if (!isConnected.value && !isConnecting.value && newPorts.length > 0) {
+    selectedPort.value = newPorts[0].port
+    connect()
+  }
+}, { immediate: true })
+
 const scrollTextarea = () => {
   nextTick(() => {
     const replOutput = document.getElementById('repl-output')