fix: improve file groups ui

app/components/ColorizedRuleName.vue

@@ -46,7 +46,7 @@ const parsed = computed(() => {
     ws-nowrap font-mono of-hidden text-ellipsis
     :class="[
       deprecated ? 'line-through' : '',
-      borderless ? '' : 'border border-base px2 bg-gray:5 rounded',
+      borderless ? '' : 'badge',
     ]"
   >
     <span v-if="parsed.scope" :style="{ color: getPluginColor(parsed.scope) }">{{ parsed.scope }}</span>

app/components/FileGroupItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { defineModel, ref, watchEffect } from 'vue'
+import { computed, defineModel, ref, watchEffect } from 'vue'
 import { useRouter } from '#app/composables/router'
 import type { FilesGroup } from '~~/shared/types'
 
-defineProps<{
+const props = defineProps<{
   index: number
   group: FilesGroup
 }>()
@@ -22,6 +22,22 @@ if (!hasShown.value) {
   })
 }
 
+const groupName = computed(() => {
+  if (props.group.configs.length === 1) {
+    return {
+      type: 'config',
+      config: props.group.configs[0],
+    } as const
+  }
+  if (props.group.globs.size <= 2) {
+    return {
+      type: 'glob',
+      globs: [...props.group.globs.values()],
+    } as const
+  }
+  return undefined
+})
+
 const router = useRouter()
 function goToConfig(idx: number) {
   router.push(`/configs?index=${idx + 1}`)
@@ -42,8 +58,27 @@ function goToConfig(idx: number) {
       <div flex="~ gap-2 items-start wrap items-center" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono>
         <div i-ph-caret-right class="[details[open]_&]:rotate-90" transition op50 />
         <div flex flex-col gap-3 md:flex-row flex-auto>
-          <span op50 flex-auto>
-            <span>Files group #{{ index + 1 }}</span>
+          <span flex-auto flex="~ gap-2 items-center">
+            <template v-if="groupName?.type === 'config'">
+              <span op75>Config</span>
+              <ColorizedConfigName
+                badge
+                :name="groupName.config.name"
+                :index="groupName.config.index"
+              />
+            </template>
+            <template v-else-if="groupName?.type === 'glob'">
+              <span op75>Globs</span>
+              <GlobItem
+                v-for="glob, idx of groupName.globs"
+                :key="idx"
+                :glob="glob"
+                text-gray
+              />
+            </template>
+            <span v-else op50>
+              Files group #{{ index + 1 }}
+            </span>
           </span>
 
           <div flex="~ gap-2 items-start wrap">
@@ -70,15 +105,6 @@ function goToConfig(idx: number) {
     </div>
 
     <div v-if="hasShown" px4 py4 flex="~ col gap-4" of-auto>
-      <div flex="~ gap-2 items-center">
-        <div i-ph-files-duotone flex-none />
-        <div>Matched Local Files ({{ group.files.length }})</div>
-      </div>
-
-      <div flex="~ col gap-1" ml7 mt--2>
-        <FileItem v-for="file of group.files" :key="file" font-mono :filepath="file" />
-      </div>
-
       <div flex="~ gap-2 items-center">
         <div i-ph-stack-duotone flex-none />
         <div>Configs Specific to the Files ({{ group.configs.length }})</div>
@@ -87,7 +113,7 @@ function goToConfig(idx: number) {
       <div flex="~ col gap-1" ml6 mt--2>
         <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>
+            <button badge>
               <ColorizedConfigName :name="config.name" :index="idx" />
             </button>
             <template #popper="{ shown }">
@@ -135,6 +161,15 @@ function goToConfig(idx: number) {
       <div flex="~ gap-1 wrap" ml6 mt--2>
         <GlobItem v-for="glob, idx2 of group.globs" :key="idx2" :glob="glob" />
       </div>
+
+      <div flex="~ gap-2 items-center">
+        <div i-ph-files-duotone flex-none />
+        <div>Matched Local Files ({{ group.files.length }})</div>
+      </div>
+
+      <div flex="~ col gap-1" ml7 mt--2>
+        <FileItem v-for="file of group.files" :key="file" font-mono :filepath="file" />
+      </div>
     </div>
   </details>
 </template>

app/components/GlobItem.vue

@@ -38,8 +38,8 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
   <component :is="showsPopup ? VDropdown : Noop">
     <component
       :is="showsPopup ? 'button' : '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'"
+      font-mono text-gray
+      :class="active === true ? 'badge-active' : active === false ? 'badge op50' : 'badge'"
     >
       {{ glob }}
     </component>
@@ -64,10 +64,7 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
           <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
+              btn-badge
               @click="goToConfig(config.index)"
             >
               <ColorizedConfigName :name="config.name" :index="config.index" />

app/composables/payload.ts

@@ -188,12 +188,15 @@ function resolveFiles(payload: Payload): ResolvedPayload['filesResolved'] {
     file.globs.forEach(i => group.globs.add(i))
   }
 
+  const groups = Array.from(filesGroupMap.values())
+  fileGroupsOpenState.value = groups.map(() => true)
+
   return {
     list: files,
     globToFiles,
     fileToGlobs,
     fileToConfigs: new Map(Array.from(fileToConfigs.entries()).map(([file, configs]) => [file, Array.from(configs).sort().map(i => payload.configs[i])])),
     configToFiles,
-    groups: Array.from(filesGroupMap.values()),
+    groups,
   }
 }

app/composables/state.ts

@@ -32,3 +32,4 @@ const bpSm = bp.smallerOrEqual('md')
 export const isGridView = computed(() => bpSm.value || stateStorage.value.viewType === 'grid')
 
 export const configsOpenState = ref<boolean[]>([])
+export const fileGroupsOpenState = ref<boolean[]>([])

app/pages/configs.vue

@@ -308,17 +308,13 @@ onMounted(async () => {
         </label>
         <div flex-auto />
         <button
-          hover="op100! bg-active"
-          px3 py1 op50 border="~ base rounded"
-          flex="~ gap-2 items-center"
+          btn-action px3
           @click="expandAll"
         >
           Expand All
         </button>
         <button
-          hover="op100! bg-active"
-          px3 py1 op50 border="~ base rounded"
-          flex="~ gap-2 items-center"
+          btn-action px3
           @click="collapseAll"
         >
           Collapse All

app/pages/files.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
-import { stateStorage } from '../composables/state'
+import { fileGroupsOpenState, stateStorage } from '../composables/state'
 import { payload } from '~/composables/payload'
+
+function expandAll() {
+  fileGroupsOpenState.value = fileGroupsOpenState.value.map(() => true)
+}
+
+function collapseAll() {
+  fileGroupsOpenState.value = fileGroupsOpenState.value.map(() => false)
+}
 </script>
 
 <template>
@@ -9,7 +17,7 @@ import { payload } from '~/composables/payload'
       This tab shows the preview for files match from the workspace.
       This feature is <span text-amber>experimental</span> and may not be 100% accurate.
     </div>
-    <div>
+    <div flex="~ gap-2 items-center">
       <div border="~ base rounded" flex="~ inline">
         <button
           :class="stateStorage.viewFilesTab === 'list' ? 'btn-action-active' : 'op50'"
@@ -29,10 +37,31 @@ import { payload } from '~/composables/payload'
           <span>File Groups</span>
         </button>
       </div>
+      <div flex-auto />
+      <template v-if="stateStorage.viewFilesTab === 'group'">
+        <button
+          btn-action px3
+          @click="expandAll"
+        >
+          Expand All
+        </button>
+        <button
+          btn-action px3
+          @click="collapseAll"
+        >
+          Collapse All
+        </button>
+      </template>
     </div>
 
     <div v-if="stateStorage.viewFilesTab === 'group'" flex="~ gap-2 col">
-      <FileGroupItem v-for="group, idx of payload.filesResolved.groups" :key="group.id" :group="group" :index="idx" />
+      <FileGroupItem
+        v-for="group, idx of payload.filesResolved.groups"
+        :key="group.id"
+        v-model:open="fileGroupsOpenState[idx]"
+        :group="group"
+        :index="idx"
+      />
     </div>
     <div v-else>
       <div flex="~ gap-2 items-center">

uno.config.ts

@@ -20,13 +20,17 @@ export default defineConfig({
     'bg-code': 'bg-gray5:5',
     'bg-hover': 'bg-primary-400:5',
 
-    'text-active': 'color-primary-600 dark:color-primary-400',
+    'color-active': 'color-primary-600 dark:color-primary-400',
     'border-active': 'border-primary-600/25 dark:border-primary-400/25',
     'bg-active': 'bg-primary-400:10',
 
     'btn-action': 'border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-hover',
     'btn-action-sm': 'btn-action text-sm',
-    'btn-action-active': 'text-active border-active! bg-active op100!',
+    'btn-action-active': 'color-active border-active! bg-active op100!',
+
+    'badge': 'border border-base rounded flex items-center px2',
+    'badge-active': 'badge border-amber:50 text-amber bg-amber:5',
+    'btn-badge': 'badge hover:bg-active',
   },
   theme: {
     // Reference: https://github.com/eslint/eslint.org/blob/main/src/assets/scss/tokens/themes.scss