feat: improve files globbing display

app/components/ColorizedConfigName.ts

@@ -2,21 +2,35 @@ export default defineComponent({
   props: {
     name: {
       type: String,
-      required: true,
+    },
+    index: {
+      type: Number,
     },
   },
   setup(props) {
-    const parts = computed(() => props.name.split(/([:/])/g).filter(Boolean))
-    return () => h('span', parts.value.map((part, i) => {
-      return h(
-        'span',
-        [':', '/'].includes(part)
-          ? { style: { opacity: 0.35, margin: '0 1px' } }
-          : i !== parts.value.length - 1
-            ? { style: { color: getPluginColor(part) } }
+    const parts = computed(() => props.name?.split(/([:/])/g).filter(Boolean))
+    return () => {
+      if (parts.value) {
+        return h('span', parts.value.map((part, i) => h(
+          'span',
+          [':', '/'].includes(part)
+            ? { style: { opacity: 0.35, margin: '0 1px' } }
+            : i !== parts.value!.length - 1
+              ? { style: { color: getPluginColor(part) } }
+              : null,
+          part,
+        )))
+      }
+      else {
+        return h('span', [
+          h('span', { class: 'op50 italic' }, 'anonymous'),
+          props.index != null
+            ? h('span', { class: 'op50 text-sm' }, ` #${props.index + 1}`)
             : null,
-        part,
-      )
-    }))
+        ])
+      }
+    }
   },
 })
+
+// @unocss-include

app/components/ConfigInspectorBadge.vue

@@ -21,7 +21,7 @@ withDefaults(
     </a>
     <a
       v-if="showVersion"
-      op50 font-mono inline-block translate-y--5 ml1 text-0.8em
+      op50 font-mono inline-block translate-y--5 ml1 text-0.6em font-200
       :href="`https://github.com/eslint/config-inspector/releases/tag/v${version}`" target="_blank"
     >
       v{{ version }}

app/components/ConfigItem.vue

@@ -113,7 +113,7 @@ const extraConfigs = computed(() => {
         <div flex="~ col gap-2">
           <div>Applies to files matching</div>
           <div flex="~ gap-2 items-center wrap">
-            <GlobItem v-for="glob, idx of config.files?.flat()" :key="idx" :glob="glob" />
+            <GlobItem v-for="glob, idx of config.files?.flat()" :key="idx" :glob="glob" popup="files" />
           </div>
         </div>
       </div>

app/components/FileGroupItem.vue

@@ -88,13 +88,7 @@ function goToConfig(idx: number) {
         <div v-for="config, idx of group.configs" :key="idx" font-mono flex="~ gap-2">
           <VDropdown>
             <button border="~ base rounded px2" flex="~ gap-2 items-center" hover="bg-active" px2>
-              <ColorizedConfigName v-if="config.name" :name="config.name!" />
-              <div v-else op50 italic>
-                anonymous
-              </div>
-              <div op50 text-sm>
-                #{{ idx + 1 }}
-              </div>
+              <ColorizedConfigName :name="config.name" :index="idx" />
             </button>
             <template #popper="{ shown }">
               <div v-if="shown" max-h="50vh" min-w-100>

app/components/GlobItem.vue

@@ -1,20 +1,82 @@
 <script setup lang="ts">
+import { computed, defineComponent } from 'vue'
 import type { Linter } from 'eslint'
+import { Dropdown as VDropdown } from 'floating-vue'
+import { filtersConfigs } from '~/composables/state'
+import { useRouter } from '#app/composables/router'
+import { payload } from '~/composables/payload'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     glob: Linter.FlatConfigFileSpec
+    popup?: 'files' | 'configs'
     active?: boolean | null
   }>(),
   { active: null },
 )
+
+const showsPopup = computed(() => (props.popup === 'files' && payload.value.filesResolved) || props.popup === 'configs')
+const files = computed(() => props.popup === 'files'
+  ? payload.value.filesResolved?.globToFiles.get(props.glob)
+  : undefined)
+
+const configs = computed(() => props.popup === 'configs'
+  ? payload.value.globToConfigs.get(props.glob)
+  : undefined,
+)
+
+const router = useRouter()
+function goToConfig(idx: number) {
+  filtersConfigs.filepath = ''
+  router.push(`/configs?index=${idx + 1}`)
+}
+
+const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.() })
 </script>
 
 <template>
-  <div
-    border="~ rounded" px2 font-mono
-    :class="active === true ? 'border-amber:50 text-amber bg-amber:5' : active === false ? 'border-base bg-gray:5 text-gray op50' : 'border-base bg-gray:5 text-gray'"
-  >
-    {{ glob }}
-  </div>
+  <component :is="showsPopup ? VDropdown : Noop">
+    <div
+      border="~ rounded" px2 font-mono
+      :class="active === true ? 'border-amber:50 text-amber bg-amber:5' : active === false ? 'border-base bg-gray:5 text-gray op50' : 'border-base bg-gray:5 text-gray'"
+    >
+      {{ glob }}
+    </div>
+    <template #popper="{ shown, hide }">
+      <div v-if="shown && popup === 'files'" max-h="30vh" min-w-80 p3 of-auto>
+        <div v-if="files?.size" flex="~ col gap-1">
+          <div>Files that matches this glob</div>
+          <FileItem
+            v-for="file of files" :key="file"
+            :filepath="file"
+            font-mono
+            @click="hide()"
+          />
+        </div>
+        <div v-else op50 text-center italic>
+          No files matched this glob.
+        </div>
+      </div>
+
+      <div v-if="shown && popup === 'configs'" max-h="30vh" min-w-80 p3 of-auto>
+        <div v-if="configs?.length" flex="~ col gap-1">
+          <div>Configs that contains this glob</div>
+          <div v-for="config of configs" :key="config.name" flex="~ gap-2">
+            <button
+              border="~ base rounded px2"
+              flex="~ gap-2 items-center"
+              hover="bg-active"
+              px2
+              @click="goToConfig(payload.configs.indexOf(config))"
+            >
+              <ColorizedConfigName :name="config.name" :index="payload.configs.indexOf(config)" />
+            </button>
+          </div>
+        </div>
+        <div v-else op50 text-center italic>
+          No configs matched this glob.
+        </div>
+      </div>
+    </template>
+  </component>
 </template>

app/components/NavBar.vue

@@ -10,7 +10,7 @@ const lastUpdate = useTimeAgo(() => payload.value.meta.lastUpdate)
 
 const rules = computed(() => Object.values(payload.value.rules))
 const deprecatedUsing = computed(() => rules.value
-  .filter(rule => rule.deprecated && payload.value.ruleStateMap.get(rule.name)?.some(i => i.level !== 'off')))
+  .filter(rule => rule.deprecated && payload.value.ruleToState.get(rule.name)?.some(i => i.level !== 'off')))
 
 const router = useRouter()
 function showDeprecated() {
@@ -65,7 +65,7 @@ function toggleRuleView() {
       Rules
     </NuxtLink>
     <NuxtLink
-      v-if="payload.files"
+      v-if="payload.filesResolved"
       to="/files"
       btn-action text-base px3 py1
       active-class="btn-action-active"

app/components/RuleItem.vue

@@ -79,7 +79,7 @@ function capitalize(str?: string) {
               Docs
             </NuxtLink>
             <button
-              btn-action-sm
+              btn-action
               title="Copy"
               @click="copy(rule.name)"
             >

app/components/RuleList.vue

@@ -53,15 +53,15 @@ const Wrapper = defineComponent({
       <Wrapper v-if="props.filter?.(name) !== false">
         <RuleItem
           :rule="getRule(name)!"
-          :rule-states="Array.isArray(rules) ? payload.ruleStateMap.get(name) || [] : undefined"
+          :rule-states="Array.isArray(rules) ? payload.ruleToState.get(name) || [] : undefined"
           :grid-view="isGridView"
           :value="getValue(name)"
           v-bind="getBind?.(name)"
         >
           <template #popup>
             <slot name="popup" :rule-name="name" :value="getValue(name)">
               <RuleStateItem
-                v-for="state, idx of payload.ruleStateMap.get(name) || []"
+                v-for="state, idx of payload.ruleToState.get(name) || []"
                 :key="idx"
                 border="t base"
                 :state="state"

app/components/SummarizeItem.vue

@@ -11,9 +11,9 @@ const props = defineProps<{
   <div
     v-tooltip="`${props.number} ${props.title}`"
     flex="~ gap-2"
-    :class="props.number ? props.color : 'op35'"
+    :class="props.number ? props.color : 'op25'"
   >
     <div :class="props.icon" />
-    <span min-w-6 :class="`text-${props.color}`">{{ props.number || '-' }}</span>
+    <span min-w-6 :class="`text-${props.color}`">{{ props.number || '' }}</span>
   </div>
 </template>