OpenObserve ESLint and TypeScript Fixes

// ❌ inline shape duplicated across files → they drift
function a(u: { id: string; name: string }) {}
function b(u: { id: string; name: string }) {}

// ✅ shared interface in src/ts/interfaces/user.ts
export interface User { id: string; name: string }

grep -rnE ':\s*any\s*=\s*await' web/src --include='*.ts' --include='*.vue' \
  | grep -v '.spec.' | grep -v 'await import('

// ❌ unused import → remove it (or just the one specifier)
import { computed, ref, watch } from "vue"; // watch never used
import { computed, ref } from "vue";        // ✅

// ❌ unused local
const result = compute();                   // never read
compute();                                  // ✅ side-effect call → keep call, drop binding
                                            // ✅ no side effects → delete the line entirely

// ❌ unused standalone function/const — DELETE it (dead code)
const _getInitials = () => …;               // ❌ `_`-prefix does NOT make it "used"
// ✅ verify no caller (grep the name), then remove the whole declaration.

// PARAMETERS:
// ❌ unused TRAILING param → REMOVE it, don't `_`-prefix
arr.map((item, index) => item.id);          // index unused
arr.map((item) => item.id);                 // ✅ drop it
watch(src, (_newVal, _oldVal) => { … });    // ❌ both unused & trailing
watch(src, () => { … });                    // ✅ drop them
// ❌ unused DESTRUCTURED element (e.g. setup's ctx) → remove the key, don't rename
setup(props, { emit: _emit, expose }) {}    // ❌ emit unused
setup(props, { expose }) {}                 // ✅ drop `emit`
// ✅ `_`-prefix ONLY when a LATER param is used (can't drop) or a contract fixes arity:
arr.map((_item, index) => index);           // _item kept because index is used

// no-unsafe-optional-chaining — runtime throw
const n = obj?.list.length;        // ❌ obj?.list can be undefined, .length throws
const n = obj?.list?.length ?? 0;  // ✅

// no-self-assign
this.x = this.x;                   // ❌ dead / typo — did you mean another field?

// no-unreachable
return x; doStuff();               // ❌ doStuff() never runs — remove or reorder

// no-case-declarations — lexical decl leaks across cases
switch (k) { case 1: const a = 1; … }         // ❌
switch (k) { case 1: { const a = 1; … } }      // ✅ block-scope the case

// no-redeclare — merge or rename the duplicate declaration
// no-import-assign — never reassign an imported binding; copy to a local

<!-- vue/no-mutating-props — never mutate a prop -->
<!-- ❌ --> <input @input="modelValue = $event" />
<!-- ✅ emit and let the parent own state -->
<input @input="$emit('update:modelValue', $event.target.value)" />

<!-- vue/require-v-for-key -->
<!-- ❌ --> <li v-for="item in items">{{ item }}</li>
<!-- ✅ --> <li v-for="item in items" :key="item.id">{{ item }}</li>

<!-- vue/no-use-v-if-with-v-for — don't combine on one element -->
<!-- ❌ --> <li v-for="i in items" v-if="i.active" />
<!-- ✅ filter in a computed, or wrap v-if on a <template> -->

// vue/no-ref-as-operand — forgot .value
const count = ref(0);
if (count > 5) {}        // ❌ compares the ref object
if (count.value > 5) {}  // ✅

// vue/return-in-computed-property / vue/no-side-effects-in-computed-properties
const total = computed(() => { items.push(x); });  // ❌ side effect + no return
const total = computed(() => items.reduce((a, b) => a + b, 0)); // ✅ pure + returns

<!-- vue/no-unused-components (81) — component imported/registered but never used
     in the template. Remove the import (script setup) or the components:{} entry. -->

<!-- vue/no-unused-vars (10) — a template-scoped var (v-for / v-slot) is never used -->
<!-- ❌ --> <li v-for="(item, i) in items">{{ item }}</li>   <!-- i unused -->
<!-- ✅ --> <li v-for="item in items">{{ item }}</li>        <!-- drop it -->

<!-- vue/require-v-for-key already in §3; vue/valid-v-for (1) — v-for must have valid
     syntax + a key on a real element (not on <template> without key on children) -->

<!-- vue/valid-attribute-name (1) — attribute name has illegal chars (e.g. a stray
     space/quote in a :prop name) → fix the attribute name -->

<!-- vue/no-parsing-error (2) — malformed template (unclosed tag, bad directive
     expression, duplicate attribute) → fix the markup; the message pinpoints it -->

<!-- vue/require-toggle-inside-transition (1) — <transition> needs a v-if/v-show/
     :key/dynamic-component child to actually transition -->
<!-- ✅ --> <transition><div v-if="open" /></transition>

<!-- vue/no-reserved-component-names (1) — don't name a component after an HTML/SVG
     element (e.g. `Button`, `Image`) → rename (e.g. `AppButton`) -->

// vue/no-dupe-keys (12) — the same key appears in two option groups
// (props + data/computed/methods), so one silently shadows the other.
props: { value: {} }, data: () => ({ value: 1 })   // ❌ rename one

// vue/require-valid-default-prop (5) — object/array prop defaults MUST be a factory
props: { items: { type: Array, default: [] } }              // ❌ shared ref
props: { items: { type: Array, default: () => [] } }        // ✅ factory

// vue/prefer-import-from-vue (1) — import Vue APIs from "vue", not "@vue/*"
import { ref } from "@vue/runtime-core";   // ❌
import { ref } from "vue";                 // ✅

// vue/valid-next-tick (1) — await nextTick() OR pass a callback; don't do both,
// and don't call it without using the result.
await nextTick();                          // ✅

// no-prototype-builtins
if (obj.hasOwnProperty(k)) {}                              // ❌
if (Object.prototype.hasOwnProperty.call(obj, k)) {}      // ✅

// no-useless-escape — drop the needless backslash (prettier/--fix often handles it)
/\-/  →  /-/

// no-empty — FIRST ask: does the block do anything? If it does NOTHING,
// DELETE it — do not comment an empty block into existence.
if (a) { doX(); } else { }            // ❌ empty else that does nothing
if (a) { doX(); }                     // ✅ drop the dead branch entirely
// Only keep an empty block when it MUST exist (a catch that deliberately
// swallows, a required override) — then add a reason comment:
catch (e) {}                          // ❌
catch (e) { /* ignore: best-effort */ } // ✅ intentional no-op

// no-useless-catch — a catch that only rethrows adds nothing → remove the try/catch
// no-async-promise-executor — never pass an async fn to new Promise; hoist the body
new Promise(async (res) => { … });    // ❌