refactor: popup button (#114)

Author: webfansplz

src/client/components.d.ts

@@ -22,7 +22,7 @@ declare module 'vue' {
     Logo: typeof import('./components/Logo.vue')['default']
     Navbar: typeof import('./components/Navbar.vue')['default']
     Notification: typeof import('./components/Notification.vue')['default']
-    PanelPosition: typeof import('./components/PanelPosition.vue')['default']
+    PopupButton: typeof import('./components/PopupButton.vue')['default']
     RoutePathItem: typeof import('./components/RoutePathItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/client/components/DockingPanel.vue

@@ -4,16 +4,11 @@ import { isInPopup } from '../logic/state'
 
 <template>
   <div>
-    <div v-if="!isInPopup" px3 py2 border="b base" flex="~ col gap-1">
-      <div text-sm op50>
-        Dock devtools to
-      </div>
-      <PanelPosition />
-    </div>
     <div px3 py2 border="b base" flex="~ gap-2">
+      <PopupButton v-if="!isInPopup" />
       <VDarkToggle v-slot="{ toggle, isDark }">
         <VButton n="sm primary" @click="toggle">
-          <div carbon-sun translate-y--1px dark:carbon-moon />
+          <div carbon-sun dark:carbon-moon translate-y--1px />
           {{ isDark.value ? "Dark" : "Light" }}
         </VButton>
       </VDarkToggle>

src/client/components/PanelPosition.vue renamed to src/client/components/PopupButton.vue

@@ -1,44 +1,27 @@
 <script setup lang="ts">
 import { useDevtoolsClient } from '../logic/client'
 
-const { position: _position } = useFrameState()
-
-const frameState = computed(() => ({ position: _position.value }))
-
 const client = useDevtoolsClient()
+// @ts-expect-error missing type
+const isSupported = typeof window !== 'undefined' && window.parent.documentPictureInPicture?.requestWindow
 const showPopupUnsupported = ref(false)
 const copy = useCopy()
 
-const dockButton = [
-  {
-    position: 'popup',
-    icon: 'i-carbon-launch',
-  },
-]
-
-function toggle(position: string) {
-  if (position === 'popup') {
-    // @ts-expect-error missing type
-    if (!window.parent.documentPictureInPicture?.requestWindow) {
-      showPopupUnsupported.value = true
-      return
-    }
-  }
-  else {
-    _position.value = position
+function popup() {
+  if (!isSupported) {
+    showPopupUnsupported.value = true
+    return
   }
 
-  client.value?.panel?.togglePosition(position)
+  client.value?.panel?.popup()
 }
 </script>
 
 <template>
-  <div flex="~ gap-1" text-lg>
-    <button
-      v-for="item in dockButton" :key="item.position"
-      :class="[frameState.position === item.position ? 'text-primary' : 'op50', item.icon]"
-      @click="toggle(item.position)"
-    />
+  <div flex="~ gap-1">
+    <VButton n="sm primary" @click="popup">
+      <i carbon-launch /> Popup <span v-if="!isSupported" op50>(not supported)</span>
+    </VButton>
   </div>
 
   <!-- popup mode not supported message -->

src/client/pages/settings.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { isInPopup } from '../logic/state'
 import { getSortedTabs } from '../store'
 
 const {
@@ -98,14 +97,6 @@ const showTabGroup = ref(false)
         <TabGroup v-else />
       </div>
       <div>
-        <div v-if="!isInPopup" py3 flex="~ col gap-1" border="b base">
-          <h3 mb1 text-lg>
-            Position
-          </h3>
-          <div>
-            <PanelPosition />
-          </div>
-        </div>
         <div py3 flex="~ col gap-1" border="b base">
           <h3 mb1 text-lg>
             Appearance

src/node/views/Main.vue

@@ -109,10 +109,7 @@ async function setupClient(iframe: HTMLIFrameElement) {
           panelState.value.viewMode = 'xs'
       },
       toggle: togglePanelVisible,
-      togglePosition(position) {
-        if (position === 'popup')
-          popup()
-      },
+      popup,
     },
     openInEditor: openInEditor.value ?? (() => {
       warn('Unable to load inspector, open-in-editor is not available.')

src/types.ts

@@ -68,7 +68,7 @@ export interface VueDevtoolsHostClient {
   markClientLoaded: () => void
   panel?: {
     toggleViewMode: (mode?: 'xs' | 'default') => void
-    togglePosition: (position: string) => void
+    popup: () => void
     toggle: () => void
   }
   hook: {