feat: show options indicator

app/components/RuleItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
 import { vTooltip } from 'floating-vue'
-import { getRuleLevel } from '~~/shared/rules'
+import { getRuleLevel, getRuleOptions } from '~~/shared/rules'
 import type { RuleConfigStates, RuleInfo, RuleLevel } from '~~/shared/types'
 
 const props = defineProps<{
@@ -37,6 +37,7 @@ function capitalize(str?: string) {
         <RuleLevelIcon
           :level="s.level"
           :config-index="s.configIndex"
+          :has-options="!!s.options?.length"
         />
         <template #popper="{ shown }">
           <RuleStateItem v-if="shown" :state="s" />
@@ -51,7 +52,7 @@ function capitalize(str?: string) {
   >
     <RuleLevelIcon
       :level="getRuleLevel(value)!"
-      :class="getRuleLevel(value) === 'error' ? '' : ''"
+      :has-options="!!getRuleOptions(value)?.length"
     />
   </div>
 

app/components/RuleLevelIcon.vue

@@ -5,6 +5,7 @@ import { nth } from '~/composables/strings'
 
 const props = defineProps<{
   level: RuleLevel
+  hasOptions?: boolean
   configIndex?: number
   class?: string
 }>()
@@ -14,19 +15,23 @@ const title = computed(() => {
     return `Enabled as '${props.level}'`
   return `Enabled as '${props.level}', in the ${nth(props.configIndex + 1)} config item`
 })
+
+const color = computed(() => ({
+  error: 'text-red op80',
+  warn: 'text-yellow5 op80 dark:text-yellow4',
+  off: 'text-gray op50',
+}[props.level]))
+
+const icon = computed(() => ({
+  error: 'i-ph-warning-circle-duotone',
+  warn: 'i-ph-warning-duotone',
+  off: 'i-ph-circle-half-tilt-duotone',
+}[props.level]))
 </script>
 
 <template>
-  <div
-    v-if="level === 'error'" i-ph-warning-circle-duotone text-red op80
-    :title="title" :class="props.class"
-  />
-  <div
-    v-if="level === 'warn'" i-ph-warning-duotone text-yellow5 op80 dark:text-yellow4
-    :title="title" :class="props.class"
-  />
-  <div
-    v-if="level === 'off'" i-ph-circle-half-tilt-duotone text-gray op50
-    :title="title" :class="props.class"
-  />
+  <div relative :class="[color, props.class]" :title="title">
+    <div :class="icon" />
+    <div v-if="hasOptions" op75 bg-current rounded-full h-6px w-6px absolute top--2px right--2px />
+  </div>
 </template>