From 638b50380f667c5173eeaf1387950d9ae8fdce6b Mon Sep 17 00:00:00 2001
From: markmybytes <markmybytes@gmail.com>
Date: Sun, 4 Oct 2026 17:44:09 +0800
Subject: [PATCH] fix(frontend): gate match on hardware availability, block
 options while matching

Match was clickable while hardware info was unavailable, so it fired a query that matched nothing and gave no feedback. The skeleton state and the null hw value already mark that window, so reuse it as the availability signal instead of adding new state.

matching ref brackets the query so a second click cannot race the first, and clearing it in finally keeps failures on the existing toast path. The overlay exists because matching leaves the selects writable: a user can change a selection mid-flight and silently lose the matched result. Covering the option form makes the in-flight state visible and takes the controls out of play.
---
 frontend/src/i18n/en.json         |  1 +
 frontend/src/i18n/zh_Hant_HK.json |  1 +
 frontend/src/pages/index.vue      | 33 ++++++++++++++++++++++++++++---
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 00f5349..6d7bedc 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -103,6 +103,7 @@
   "labelManual": "Manual",
   "labelMissingExe": "Not Found",
   "labelMatch": "Match",
+  "labelMatching": "Matching",
   "labelMultiPatternMatching": "Multi-Pattern Matching",
   "labelMultiRuleMatching": "Multi-Rule Matching",
   "labelNA": "N/A",
diff --git a/frontend/src/i18n/zh_Hant_HK.json b/frontend/src/i18n/zh_Hant_HK.json
index d693454..fc27ec1 100644
--- a/frontend/src/i18n/zh_Hant_HK.json
+++ b/frontend/src/i18n/zh_Hant_HK.json
@@ -103,6 +103,7 @@
   "labelManual": "手動輸入",
   "labelMissingExe": "路徑無效",
   "labelMatch": "配對",
+  "labelMatching": "配對中",
   "labelMultiPatternMatching": "多匹配值配對",
   "labelMultiRuleMatching": "多規則配對",
   "labelNA": "N/A",
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 831f3d8..18e5ad9 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -42,6 +42,7 @@ let timer: ReturnType<typeof setTimeout> | null = null
 const selectedNetwork = ref<number>(0)
 const selectedDisplay = ref<number>(0)
 const selectedMiscellaneous = ref<number[]>([])
+const matching = ref(false)
 
 function loadSystemInfo() {
   Promise.all([utils.getHardware(), utils.getOSInfo()]).then(([hw, os]) => {
@@ -92,6 +93,7 @@ onBeforeMount(() => {
 })
 
 function selectMatchedOptions() {
+  matching.value = true
   matcher
     .MatchedGroupIds()
     .then(matchedIds => {
@@ -110,6 +112,9 @@ function selectMatchedOptions() {
       })
     })
     .catch(err => toast.add({ title: decodeError(err, t), color: 'error' }))
+    .finally(() => {
+      matching.value = false
+    })
 }
 
 function resetSelection() {
@@ -258,7 +263,17 @@ onBeforeUnmount(() => {
       </template>
     </div>
 
-    <form ref="form" class="mt-3 flex h-28 gap-x-3">
+    <form ref="form" class="relative mt-3 flex h-28 gap-x-3">
+      <div
+        v-if="matching"
+        class="absolute -inset-2 z-10 flex flex-col items-center justify-center gap-y-1 rounded-lg bg-white/70 backdrop-blur-xs"
+        role="status"
+      >
+        <UIcon name="i-lucide-loader-circle" class="animate-spin text-xl text-apple-green-600" />
+
+        <span class="text-xs text-gray-500">{{ $t('labelMatching') }}</span>
+      </div>
+
       <div class="flex flex-1 flex-col justify-between">
         <div class="relative w-full">
           <label
@@ -403,11 +418,23 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="mt-2 flex h-8 flex-row items-center justify-end gap-x-3">
-          <UButton type="button" color="neutral" variant="outline" @click="selectMatchedOptions">
+          <UButton
+            type="button"
+            color="neutral"
+            variant="outline"
+            :disabled="matching || systemInfo.hw === null"
+            @click="selectMatchedOptions"
+          >
             {{ $t('labelMatch') }}
           </UButton>
 
-          <UButton type="button" color="secondary" variant="outline" @click="resetSelection">
+          <UButton
+            type="button"
+            color="secondary"
+            variant="outline"
+            :disabled="matching"
+            @click="resetSelection"
+          >
             {{ $t('actionReset') }}
           </UButton>