chore: update

Author: antfu

plugins/data-inspector/src/spa/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Query, SavedQueryScope } from '../engine'
 import Button from '@antfu/design/components/Action/ActionButton.vue'
-import ActionDarkToggle from '@antfu/design/components/Action/ActionDarkToggle.vue'
+import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
 import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import LayoutSplitPane from '@antfu/design/components/Layout/LayoutSplitPane.vue'
 import { Pane } from 'splitpanes'
@@ -14,7 +14,7 @@ import ResultViewer from './components/ResultViewer.vue'
 import SavedQueriesPanel from './components/SavedQueriesPanel.vue'
 import { backend, connect, connection } from './composables/rpc'
 import { useSavedQueries } from './composables/saved'
-import { colorScheme } from './composables/scheme'
+import { isDark } from './composables/scheme'
 import { useWorkbench } from './composables/workbench'
 import '@antfu/design/styles.css'
 
@@ -96,18 +96,17 @@ function queryAppend(path: string): void {
                 :color="connection.connected ? 100 : 200"
               />
               <div class="flex-auto" />
-              <a
+              <ActionIconButton
+                icon="i-ph:book-open-duotone"
+                as="a"
                 href="https://devfra.me/plugins/data-inspector"
                 target="_blank"
                 title="Data Inspector docs — using the plugin and providing data sources"
-                class="flex items-center gap-1 text-xs color-muted hover:color-active"
-              >
-                <span class="i-ph:book-open-duotone text-base" />
-                <span>Docs</span>
-              </a>
-              <ActionDarkToggle
-                :color-scheme="colorScheme"
-                @update:color-scheme="colorScheme = $event"
+              />
+              <ActionIconButton
+                icon="i-ph:sun-duotone dark:i-ph:moon-duotone"
+                title="Toggle dark mode"
+                @click="isDark = !isDark"
               />
             </div>
 
@@ -121,13 +120,13 @@ function queryAppend(path: string): void {
                   {{ wb.activeSource.value?.description }}
                 </div>
                 <div class="flex-auto" />
-                <Button
-                  size="sm"
-                  :icon="showDataSourceDetails ? 'i-ph:eye-slash-duotone' : 'i-ph:eye-duotone'"
+                <ActionIconButton
+                  icon="i-ph:caret-down"
+                  class="transition flex-none text-sm"
+                  :class="{ 'rotate-180': showDataSourceDetails }"
+                  :title="showDataSourceDetails ? 'Hide details' : 'Show details'"
                   @click="showDataSourceDetails = !showDataSourceDetails"
-                >
-                  <span>{{ showDataSourceDetails ? 'Hide' : 'Show' }} details</span>
-                </Button>
+                />
               </div>
 
               <div v-if="connection.connected && !wb.sources.value.length" class="text-xs color-muted">

plugins/data-inspector/src/spa/components/DataSourceSelect.vue

@@ -26,6 +26,7 @@ function iconOf(source: DataSourceMeta | undefined): string {
       class="text-sm px-2.5 outline-none border border-base rounded bg-base inline-flex gap-2 h-9 min-w-52 max-w-80 transition items-center justify-between data-[disabled]:op50 focus-visible:ring-2 focus-visible:ring-primary-500/40"
     >
       <span class="inline-flex items-center gap-2 min-w-0">
+        <!-- TODO: migrate to IconifyIcon.vue in @antfu/design 0.3 -->
         <span class="shrink-0 color-active" :class="iconOf(active)" aria-hidden="true" />
         <span class="truncate font-semibold text-primary">{{ active?.title ?? placeholder ?? 'Data source' }}</span>
       </span>
@@ -46,6 +47,7 @@ function iconOf(source: DataSourceMeta | undefined): string {
             :value="source.id"
             class="text-sm color-base py-1.5 pl-2 pr-2 outline-none rounded-md flex gap-2 cursor-pointer select-none transition items-start relative data-[highlighted]:bg-active"
           >
+            <!-- TODO: migrate to IconifyIcon.vue in @antfu/design 0.3 -->
             <span class="shrink-0 mt-0.5 color-active" :class="iconOf(source)" aria-hidden="true" />
             <span class="flex flex-col min-w-0 flex-1">
               <span class="flex items-center gap-1.5">

plugins/data-inspector/src/spa/composables/scheme.ts

@@ -1,17 +1,6 @@
-/** Color scheme state: OS-initialized, user-togglable. */
-import { ref, watchEffect } from 'vue'
+import { useDark } from '@vueuse/core'
+import { computed } from 'vue'
 
 export type ColorScheme = 'light' | 'dark'
-
-const mq = window.matchMedia('(prefers-color-scheme: dark)')
-export const colorScheme = ref<ColorScheme>(mq.matches ? 'dark' : 'light')
-mq.addEventListener('change', (e) => {
-  colorScheme.value = e.matches ? 'dark' : 'light'
-})
-
-// The shared design tokens flip on the `.dark` class (same approach as the
-// other devframe plugins).
-watchEffect(() => {
-  document.documentElement.classList.toggle('dark', colorScheme.value === 'dark')
-  document.documentElement.classList.toggle('light', colorScheme.value === 'light')
-})
+export const isDark = useDark()
+export const colorScheme = computed<ColorScheme>(() => isDark.value ? 'dark' : 'light')