fix: file search specific toggle

app/components/ConfigItem.vue

@@ -4,11 +4,11 @@ import type { Linter } from 'eslint'
 import { filtersRules, isGridView } from '~/composables/state'
 import { stringifyUnquoted } from '~/composables/strings'
 import { useRouter } from '#app/composables/router'
-import type { FiltersConfigsPage, FlatESLintConfigItem } from '~~/shared/types'
+import type { FiltersConfigsPage, FlatConfigItem } from '~~/shared/types'
 import { getRuleLevel, getRuleOptions } from '~~/shared/rules'
 
 const props = defineProps<{
-  config: FlatESLintConfigItem
+  config: FlatConfigItem
   index: number
   filters?: FiltersConfigsPage
   active?: boolean
@@ -40,7 +40,7 @@ function gotoPlugin(name: string) {
 }
 
 const extraConfigs = computed(() => {
-  const ignoredKeys = ['files', 'plugins', 'ignores', 'rules', 'name']
+  const ignoredKeys = ['files', 'plugins', 'ignores', 'rules', 'name', 'index']
   return Object.fromEntries(
     Object.entries(props.config)
       .filter(([key]) => !ignoredKeys.includes(key)),

app/components/GlobItem.vue

@@ -68,9 +68,9 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
               flex="~ gap-2 items-center"
               hover="bg-active"
               px2
-              @click="goToConfig(payload.configs.indexOf(config))"
+              @click="goToConfig(config.index)"
             >
-              <ColorizedConfigName :name="config.name" :index="payload.configs.indexOf(config)" />
+              <ColorizedConfigName :name="config.name" :index="config.index" />
             </button>
           </div>
         </div>

app/composables/payload.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-console */
 import type { Linter } from 'eslint'
 import { $fetch } from 'ofetch'
-import { isGeneralConfig } from '~~/shared/configs'
+import { isGeneralConfig, isIgnoreOnlyConfig } from '~~/shared/configs'
 import { getRuleLevel, getRuleOptions } from '~~/shared/rules'
-import type { ErrorInfo, FilesGroup, FlatESLintConfigItem, Payload, ResolvedPayload, RuleConfigStates, RuleInfo } from '~~/shared/types'
+import type { ErrorInfo, FilesGroup, FlatConfigItem, Payload, ResolvedPayload, RuleConfigStates, RuleInfo } from '~~/shared/types'
 
 const LOG_NAME = '[ESLint Config Inspector]'
 
@@ -91,7 +91,7 @@ export function getRuleStates(name: string): RuleConfigStates | undefined {
 
 export function resolvePayload(payload: Payload): ResolvedPayload {
   const ruleToState = new Map<string, RuleConfigStates>()
-  const globToConfigs = new Map<Linter.FlatConfigFileSpec, FlatESLintConfigItem[]>()
+  const globToConfigs = new Map<Linter.FlatConfigFileSpec, FlatConfigItem[]>()
 
   payload.configs.forEach((config, index) => {
     // Rule Level
@@ -132,6 +132,8 @@ export function resolvePayload(payload: Payload): ResolvedPayload {
 
   return {
     ...payload,
+    configsIgnoreOnly: payload.configs.filter(i => isIgnoreOnlyConfig(i)),
+    configsGeneral: payload.configs.filter(i => isGeneralConfig(i)),
     ruleToState,
     globToConfigs,
     filesResolved: resolveFiles(payload),
@@ -142,9 +144,8 @@ function resolveFiles(payload: Payload): ResolvedPayload['filesResolved'] {
   if (!payload.files)
     return undefined
 
-  const generalConfigIndex = payload.configs
-    .map((config, idx) => isGeneralConfig(config) ? idx : undefined)
-    .filter((idx): idx is number => idx !== undefined)
+  const generalConfigIndex = payload.configs.filter(i => isGeneralConfig(i))
+    .map(i => i.index)
 
   const files: string[] = []
   const globToFiles = new Map<Linter.FlatConfigFileSpec, Set<string>>()

app/pages/configs.vue

@@ -10,7 +10,7 @@ import { configsOpenState, filtersConfigs as filters, stateStorage } from '~/com
 import { matchFile } from '~~/shared/configs'
 import { getRuleLevel } from '~~/shared/rules'
 import { payload } from '~/composables/payload'
-import type { FlatESLintConfigItem, MatchedFile } from '~~/shared/types'
+import type { FlatConfigItem, MatchedFile } from '~~/shared/types'
 
 const input = ref(filters.filepath)
 
@@ -22,15 +22,24 @@ function collapseAll() {
   configsOpenState.value = configsOpenState.value.map(() => false)
 }
 
-const filteredConfigs = shallowRef<FlatESLintConfigItem[]>([])
+const filteredConfigs = shallowRef<FlatConfigItem[]>([])
 const fileMatchResult = shallowRef<MatchedFile | null>(null)
 
 watchEffect(() => {
   let configs = payload.value.configs
 
   if (filters.filepath) {
-    fileMatchResult.value = matchFile(filters.filepath, payload.value.configs)
-    configs = fileMatchResult.value.configs.map(idx => payload.value.configs[idx])
+    fileMatchResult.value = matchFile(
+      filters.filepath,
+      payload.value.configs,
+      payload.value.configsIgnoreOnly,
+    )
+    configs = Array.from(new Set([
+      ...fileMatchResult.value.configs,
+      ...payload.value.configsIgnoreOnly.map(i => i.index),
+    ]))
+      .sort()
+      .map(idx => payload.value.configs[idx])
   }
   else {
     fileMatchResult.value = null

shared/configs.ts

@@ -1,33 +1,33 @@
 import type { Linter } from 'eslint'
 import { minimatch } from 'minimatch'
-import type { FlatESLintConfigItem, MatchedFile } from './types'
+import type { FlatConfigItem, MatchedFile } from './types'
 
 export function getMatchedGlobs(file: string, glob: (Linter.FlatConfigFileSpec | Linter.FlatConfigFileSpec[])[]) {
   const globs = (Array.isArray(glob) ? glob : [glob]).flat()
   return globs.filter(glob => typeof glob === 'function' ? glob(file) : minimatch(file, glob)).flat()
 }
 
-const META_KEYS = new Set(['name'])
+const META_KEYS = new Set(['name', 'index'])
 
 /**
  * Config with only `ignores` property
  */
-export function isIgnoreOnlyConfig(config: FlatESLintConfigItem) {
+export function isIgnoreOnlyConfig(config: FlatConfigItem) {
   const keys = Object.keys(config).filter(i => !META_KEYS.has(i))
   return keys.length === 1 && keys[0] === 'ignores'
 }
 
 /**
  * Config without `files` and `ignores` properties or with only `ignores` property
  */
-export function isGeneralConfig(config: FlatESLintConfigItem) {
+export function isGeneralConfig(config: FlatConfigItem) {
   return (!config.files && !config.ignores) || isIgnoreOnlyConfig(config)
 }
 
 export function matchFile(
   filepath: string,
-  configs: FlatESLintConfigItem[],
-  ignoreOnlyConfigs: FlatESLintConfigItem[] = configs.filter(isIgnoreOnlyConfig),
+  configs: FlatConfigItem[],
+  ignoreOnlyConfigs: FlatConfigItem[],
 ): MatchedFile {
   const globalIgnored = ignoreOnlyConfigs.flatMap(config => getMatchedGlobs(filepath, config.ignores!))
   if (globalIgnored.length) {

shared/types.ts

@@ -1,19 +1,41 @@
 import type { Linter } from 'eslint'
 import type { RuleMetaData } from '@typescript-eslint/utils/ts-eslint'
 
-export interface FlatESLintConfigItem extends Linter.FlatConfig {
+export interface FlatConfigItem extends Linter.FlatConfig {
   name?: string
+  index: number
 }
 
 export type RuleLevel = 'off' | 'warn' | 'error'
 
 export interface Payload {
-  configs: FlatESLintConfigItem[]
+  configs: FlatConfigItem[]
   rules: Record<string, RuleInfo>
   meta: PayloadMeta
   files?: MatchedFile[]
 }
 
+export interface ResolvedPayload extends Payload {
+  configsIgnoreOnly: FlatConfigItem[]
+  configsGeneral: FlatConfigItem[]
+
+  ruleToState: Map<string, RuleConfigStates>
+  globToConfigs: Map<Linter.FlatConfigFileSpec, FlatConfigItem[]>
+
+  /**
+   * Resolved data from files
+   * Undefined if users disabled glob matching
+   */
+  filesResolved?: {
+    list: string[]
+    globToFiles: Map<Linter.FlatConfigFileSpec, Set<string>>
+    configToFiles: Map<number, Set<string>>
+    fileToGlobs: Map<string, Set<Linter.FlatConfigFileSpec>>
+    fileToConfigs: Map<string, FlatConfigItem[]>
+    groups: FilesGroup[]
+  }
+}
+
 export interface MatchedFile {
   /**
    * Filepath
@@ -37,23 +59,10 @@ export interface ErrorInfo {
 export interface FilesGroup {
   id: string
   files: string[]
-  configs: FlatESLintConfigItem[]
+  configs: FlatConfigItem[]
   globs: Set<Linter.FlatConfigFileSpec>
 }
 
-export interface ResolvedPayload extends Payload {
-  ruleToState: Map<string, RuleConfigStates>
-  globToConfigs: Map<Linter.FlatConfigFileSpec, FlatESLintConfigItem[]>
-  filesResolved?: {
-    list: string[]
-    globToFiles: Map<Linter.FlatConfigFileSpec, Set<string>>
-    configToFiles: Map<number, Set<string>>
-    fileToGlobs: Map<string, Set<Linter.FlatConfigFileSpec>>
-    fileToConfigs: Map<string, FlatESLintConfigItem[]>
-    groups: FilesGroup[]
-  }
-}
-
 export interface PayloadMeta {
   wsPort?: number
   lastUpdate: number

src/configs.ts

@@ -1,11 +1,10 @@
 import { dirname, resolve } from 'node:path'
 import process from 'node:process'
 import { bundleRequire } from 'bundle-require'
-import type { Linter } from 'eslint'
 import fg from 'fast-glob'
 import { findUp } from 'find-up'
 import c from 'picocolors'
-import type { FlatESLintConfigItem, MatchedFile, Payload, RuleInfo } from '../shared/types'
+import type { FlatConfigItem, MatchedFile, Payload, RuleInfo } from '../shared/types'
 import { isIgnoreOnlyConfig, matchFile } from '../shared/configs'
 import { MARK_CHECK, MARK_INFO, configFilenames } from './constants'
 
@@ -52,7 +51,7 @@ export async function readConfig(
     chdir = true,
     globMatchedFiles: globFiles = true,
   }: ReadConfigOptions,
-): Promise<{ configs: FlatESLintConfigItem[], payload: Payload, dependencies: string[] }> {
+): Promise<{ configs: FlatConfigItem[], payload: Payload, dependencies: string[] }> {
   if (userBasePath)
     userBasePath = resolve(cwd, userBasePath)
 
@@ -78,7 +77,7 @@ export async function readConfig(
     cwd: basePath,
   })
 
-  const rawConfigs = await (mod.default ?? mod) as FlatESLintConfigItem[]
+  const rawConfigs = await (mod.default ?? mod) as FlatConfigItem[]
 
   const rulesMap = new Map<string, RuleInfo>()
   const eslintRules = await import(['eslint', 'use-at-your-own-risk'].join('/')).then(r => r.default.builtinRules)
@@ -108,9 +107,10 @@ export async function readConfig(
   }
 
   const rules = Object.fromEntries(rulesMap.entries())
-  const configs = rawConfigs.map((c): Linter.FlatConfig => {
+  const configs = rawConfigs.map((c, idx): FlatConfigItem => {
     return {
       ...c,
+      index: idx,
       plugins: c.plugins
         ? Object.fromEntries(Object.entries(c.plugins ?? {}).map(([prefix]) => [prefix, {}]).filter(i => i[0]))
         : undefined,
@@ -145,7 +145,7 @@ export async function readConfig(
 
 export async function globMatchedFiles(
   basePath: string,
-  configs: FlatESLintConfigItem[],
+  configs: FlatConfigItem[],
 ): Promise<MatchedFile[]> {
   console.log(MARK_INFO, 'Globing matched files')
   const files = await fg(