feat(devtools): add tabs + fancy glassmorphism background

packages/devtools/src/components/DebugPanel.vue

@@ -1,16 +1,23 @@
 <template>
   <div class="f-debug-panel">
     <h1>{{ title }}</h1>
-    <div v-if="scene.components.length > 0">
-      <FComponents2d
-        v-if="scene.components[0].__IS_2D__"
-        :components="scene.components as FComponent2d[]"
-      />
-      <FComponents3d
-        v-if="scene.components[0].__IS_3D__"
-        :components="scene.components as FComponent3d[]"
-      />
-    </div>
+    <Tabs :tabs="['Components', 'Settings']">
+      <template #Components>
+        <div v-if="scene.components.length > 0">
+          <FComponents2d
+            v-if="scene.components[0].__IS_2D__"
+            :components="scene.components as FComponent2d[]"
+          />
+          <FComponents3d
+            v-if="scene.components[0].__IS_3D__"
+            :components="scene.components as FComponent3d[]"
+          />
+        </div>
+      </template>
+      <template #Settings>
+        <div>Settings</div>
+      </template>
+    </Tabs>
   </div>
 </template>
 
@@ -22,6 +29,7 @@ import type { FComponent as FComponent2d } from '@fibbojs/2d'
 import type { FComponent as FComponent3d } from '@fibbojs/3d'
 import FComponents2d from './2d/FComponents2d.vue'
 import FComponents3d from './3d/FComponents3d.vue'
+import Tabs from './common/Tabs.vue'
 
 defineProps({
   title: String,

packages/devtools/src/components/FDebugPanel.ce.vue

@@ -52,7 +52,7 @@ function toggleVisible() {
 }
 
 #toggle-button {
-  background-color: #151617;
+  background: #151617;
   height: 40px;
   width: 40px;
   position: fixed;
@@ -120,6 +120,7 @@ function toggleVisible() {
   padding: 10px;
   transition: all 0.2s ease;
   transform: scale(0.6);
+  font-size: 14px;
 
   &.visible {
     left: 25px;
@@ -134,6 +135,40 @@ function toggleVisible() {
     margin: 0 0 10px;
   }
 
+  .f-debug-tabs__header {
+    position: relative;
+    background: #101212;
+    display: flex;
+    flex-direction: row;
+    padding: 6px;
+    column-gap: 6px;
+    justify-content: center;
+    align-items: center;
+    grid-template-columns: repeat(auto-fill, 1fr);
+    border-radius: 12px;
+
+    .f-debug-tabs__tab {
+      display: grid;
+      place-content: center;
+      width: 100%;
+      padding: 6px;
+      border-radius: 6px;
+      transition: background 0.1s;
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    .f-debug-tabs__selector {
+      position: absolute;
+      top: 6px;
+      bottom: 6px;
+      width: 50%;
+      background: #1E1F20;
+      border-radius: 6px;
+      transition: left 0.2s ease;
+    }
+  }
+
   .f-components {
     display: flex;
     flex-direction: column;
@@ -150,6 +185,8 @@ function toggleVisible() {
       border-radius: 8px;
       transition: background 0.1s;
       cursor: pointer;
+      height: 18px;
+      padding: 4px;
 
       .f-component-header-arrow {
         display: grid;
@@ -229,4 +266,47 @@ function toggleVisible() {
     place-items: center;
   }
 }
+
+/* Gets applied if supported only */
+@supports (
+  (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
+) {
+  #toggle-button {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  .f-debug-panel {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  .f-debug-tabs__header {
+    background: rgba(0, 0, 0, 0.7) !important;
+
+    .f-debug-tabs__selector {
+      background: rgba(70, 70, 70, 0.2) !important;
+    }
+  }
+
+  .f-component {
+    .f-component-header {
+      &:hover {
+        background: rgba(0, 0, 0, 0.4) !important;
+      }
+    }
+
+    .f-component-properties {
+      .f-component-property {
+        .f-component-property-group {
+          > input {
+            background: rgba(0, 0, 0, 0.4) !important;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

packages/devtools/src/components/common/Tabs.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="f-debug-tabs">
+    <div class="f-debug-tabs__header">
+      <div
+        v-for="tab in tabs"
+        :key="tab"
+        class="f-debug-tabs__tab"
+        :class="{
+          active: tab === selectedTabId,
+        }"
+        @click="selectTab(tab)"
+      >
+        {{ tab }}
+      </div>
+      <div ref="selector" class="f-debug-tabs__selector" />
+    </div>
+    <div class="f-debug-tabs__content">
+      <slot :name="selectedTabId" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps, onMounted, ref } from 'vue'
+
+const props = defineProps({
+  tabs: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+})
+
+const selectedTabId = ref(props.tabs[0])
+
+const selector = ref<HTMLElement | null>(null)
+
+function selectTab(id: string) {
+  selectedTabId.value = id
+  if (selector.value) {
+    const tabs = selector.value.parentElement?.querySelectorAll('.f-debug-tabs__tab')
+    if (tabs) {
+      const tab = tabs[props.tabs.indexOf(id)] as HTMLElement
+      selector.value.style.left = `${tab.offsetLeft}px`
+    }
+  }
+}
+
+onMounted(() => {
+  if (selector.value) {
+    const tabs = selector.value.parentElement?.querySelectorAll('.f-debug-tabs__tab')
+    if (tabs) {
+      const tab = tabs[0] as HTMLElement
+      selector.value.style.width = `${tab.offsetWidth}px`
+      selector.value.style.left = `${tab.offsetLeft}px`
+    }
+  }
+})
+</script>