feat: ui improvements

components/ConfigItem.vue

@@ -113,9 +113,9 @@ const extraConfigs = computed(() => {
           <div flex="~ gap-2 items-center wrap">
             <button
               v-for="name, idx of Object.keys(config.plugins)"
-              :key="idx" border="~ base rounded" bg-gray:5 px2
-              :style="{ color: getPluginColor(name) }"
-              font-mono op75
+              :key="idx" border="~ base rounded-full" px3
+              :style="{ color: getPluginColor(name), backgroundColor: getPluginColor(name, 0.1) }"
+              font-mono
               @click="gotoPlugin(name)"
             >
               {{ name }}
@@ -190,7 +190,10 @@ const extraConfigs = computed(() => {
               <div p2 px3 op50 of-auto>
                 {{ k }}
               </div>
-              <Shiki lang="ts" :code="stringifyUnquoted(v)" max-h-100 max-w-full w-full of-scroll rounded bg-hover p2 text-sm />
+              <Shiki
+                lang="ts" :code="stringifyUnquoted(v)"
+                max-h-100 max-w-full w-full of-scroll rounded bg-code p2 text-sm
+              />
             </div>
           </template>
         </div>

components/RuleItem.vue

@@ -100,10 +100,9 @@ function capitalize(str?: string) {
 
   <div :class="props.class" flex="~ gap-2 items-center">
     <div
-      of-hidden text-ellipsis
       :class="[
         rule.deprecated ? 'line-through' : '',
-        gridView ? 'op50 text-sm' : 'op75',
+        gridView ? 'op50 text-sm' : 'op75 ws-nowrap of-hidden text-ellipsis line-clamp-1',
       ]"
     >
       {{ capitalize(rule.docs?.description) }}

components/RuleStateItem.vue

@@ -75,7 +75,13 @@ function goto() {
           Rule options
         </div>
       </div>
-      <Shiki lang="ts" :code="stringifyUnquoted(state.options)" rounded bg-hover p2 text-sm />
+      <Shiki
+        v-for="options, idx of state.options"
+        :key="idx"
+        lang="ts"
+        :code="stringifyUnquoted(options)"
+        rounded bg-code p2 text-sm
+      />
     </template>
   </div>
 </template>

nuxt.config.ts

@@ -89,6 +89,6 @@ export default defineNuxtConfig({
   },
 
   devtools: {
-    enabled: true,
+    enabled: false,
   },
 })

plugins/floating-vue.ts

@@ -1,5 +1,7 @@
 import FloatingVue from 'floating-vue'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(FloatingVue)
+  nuxtApp.vueApp.use(FloatingVue, {
+    overflowPadding: 20,
+  })
 })

uno.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
   shortcuts: {
     'bg-base': 'bg-white dark:bg-#111',
     'bg-glass': 'bg-white:75 dark:bg-#111:75 backdrop-blur-5',
+    'bg-code': 'bg-gray5:5',
     'bg-hover': 'bg-gray:5',
     'bg-active': 'bg-gray:10',
     'border-base': 'border-#aaa3',