refactor: extract useDebounce composable from 4 duplicate copies

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/frontend/src/composables/useDebounce.ts

@@ -0,0 +1,9 @@
+export function useDebounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
+  let timer: ReturnType<typeof setTimeout> | null = null
+  const debounced = (...args: Parameters<T>) => {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), delay)
+  }
+  const cancel = () => { if (timer) clearTimeout(timer) }
+  return { debounced, cancel }
+}

web/frontend/src/views/Barcodes.vue

@@ -185,17 +185,7 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Search, Refresh, Plus, Connection, Right, Setting } from '@element-plus/icons-vue'
 import api from '../api'
-
-// Debounce helper
-function useDebounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
-  let timer: ReturnType<typeof setTimeout> | null = null
-  const debounced = (...args: Parameters<T>) => {
-    if (timer) clearTimeout(timer)
-    timer = setTimeout(() => fn(...args), delay)
-  }
-  const cancel = () => { if (timer) clearTimeout(timer) }
-  return { debounced, cancel }
-}
+import { useDebounce } from '../composables/useDebounce'
 
 const loading = ref(false)
 const search = ref('')

web/frontend/src/views/Logs.vue

@@ -103,16 +103,7 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Notebook, Warning, Timer, Search, Refresh } from '@element-plus/icons-vue'
 import api from '../api'
-
-function useDebounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
-  let timer: ReturnType<typeof setTimeout> | null = null
-  const debounced = (...args: Parameters<T>) => {
-    if (timer) clearTimeout(timer)
-    timer = setTimeout(() => fn(...args), delay)
-  }
-  const cancel = () => { if (timer) clearTimeout(timer) }
-  return { debounced, cancel }
-}
+import { useDebounce } from '../composables/useDebounce'
 
 const loading = ref(false)
 const searchPath = ref('')

web/frontend/src/views/Memory.vue

@@ -161,17 +161,7 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Search, Refresh, Memo, CircleCheck, Warning } from '@element-plus/icons-vue'
 import api from '../api'
-
-// Debounce utility
-function useDebounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
-  let timer: ReturnType<typeof setTimeout> | null = null
-  const debounced = (...args: Parameters<T>) => {
-    if (timer) clearTimeout(timer)
-    timer = setTimeout(() => fn(...args), delay)
-  }
-  const cancel = () => { if (timer) clearTimeout(timer) }
-  return { debounced, cancel }
-}
+import { useDebounce } from '../composables/useDebounce'
 
 const loading = ref(false)
 const search = ref('')

web/frontend/src/views/Tasks.vue

@@ -140,16 +140,7 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Timer, CircleCheck, CircleClose, Loading, Search, Refresh } from '@element-plus/icons-vue'
 import api from '../api'
-
-function useDebounce<T extends (...args: any[]) => any>(fn: T, delay: number) {
-  let timer: ReturnType<typeof setTimeout> | null = null
-  const debounced = (...args: Parameters<T>) => {
-    if (timer) clearTimeout(timer)
-    timer = setTimeout(() => fn(...args), delay)
-  }
-  const cancel = () => { if (timer) clearTimeout(timer) }
-  return { debounced, cancel }
-}
+import { useDebounce } from '../composables/useDebounce'
 
 const loading = ref(false)
 const search = ref('')