feat: show the floating panel by default, close #717

Author: antfu

packages/devtools/client/pages/index.vue

@@ -1,27 +1,31 @@
 <script setup lang="ts">
 import { definePageMeta } from '#imports'
 import { ref } from 'vue'
+import { useClient } from '~/composables/client'
 import { isFirstVisit } from '~/composables/storage'
+import { useDevToolsOptions } from '~/composables/storage-options'
 import { telemetryEnabled } from '~/composables/telemetry'
-import { useDevToolsOptions } from '../composables/storage-options'
 
 definePageMeta({
   layout: 'none',
 })
 
+const client = useClient()
 const telemetryModel = ref(true)
-const enableFloatPanel = ref(true)
 
 const {
   showPanel,
 } = useDevToolsOptions('ui')
 
 function visit() {
   telemetryEnabled.value = telemetryModel.value
-  if (showPanel.value == null && enableFloatPanel.value)
-    showPanel.value = true
   isFirstVisit.value = false
 }
+
+function hideFloatingPanel() {
+  showPanel.value = false
+  client.value.devtools.close()
+}
 </script>
 
 <template>
@@ -44,12 +48,12 @@ function visit() {
       <NButton to="/modules/overview" n="lg primary" @click="visit">
         <span>Get Started</span>
       </NButton>
+      <NButton v-if="showPanel !== false" n="borderless orange" @click="hideFloatingPanel">
+        <span>Always hide the floating panel</span>
+      </NButton>
     </div>
     <div p4>
       <div flex="~ col gap-2" mxa>
-        <NCheckbox v-if="showPanel == null" v-model="enableFloatPanel" n="green6">
-          <span op50>Show floating panel from now on</span>
-        </NCheckbox>
         <NCheckbox v-model="telemetryModel" n="green6">
           <span op50>Send anonymous statistics, help us improving DevTools</span>
           <NLink href="https://github.com/nuxt/devtools#anonymous-usage-analytics" target="_blank" ml1 op35 v-text="'Learn more'" />

packages/devtools/client/pages/settings.vue

@@ -231,7 +231,7 @@ watchEffect(() => {
           </NCheckbox>
 
           <NCheckbox v-model="showPanel" n-primary>
-            <span>Always show the floating panel</span>
+            <span>Show the floating panel</span>
           </NCheckbox>
 
           <div mx--2 my1 h-1px border="b base" op75 />

packages/devtools/src/constant.ts

@@ -33,7 +33,7 @@ export const defaultTabOptions: NuxtDevToolsOptions = {
     interactionCloseOnOutsideClick: false,
     showExperimentalFeatures: false,
     showHelpButtons: true,
-    showPanel: null,
+    showPanel: true,
     scale: 1,
     minimizePanelInactive: 5000,
     hiddenTabs: [],

packages/devtools/src/runtime/plugins/view/Main.vue

@@ -19,14 +19,7 @@ const panelMargins = reactive({
 })
 
 const safeArea = useScreenSafeArea()
-
 const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')
-let isInit = true
-
-watchEffect(() => {
-  if (state.value.open)
-    isInit = false
-})
 
 watchEffect(() => {
   panelMargins.left = safeArea.left.value + 10
@@ -182,8 +175,8 @@ const isHidden = computed(() => {
     return false
   if (settings.ui.showPanel === false)
     return true
-  // If not explicitly set, hide the panel on first load
-  return isInit
+  // If not explicitly set, show the panel
+  return false
 })
 
 const isMinimized = computed(() => {