feat: init

packages/applet/src/index.ts

@@ -1,3 +1,4 @@
+import SelectiveList from './components/basic/SelectiveList.vue'
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
 import './styles/base.css'
@@ -9,3 +10,7 @@ export * from './modules/components'
 export * from './modules/custom-inspector'
 export * from './modules/pinia'
 export * from './modules/router'
+
+export {
+  SelectiveList,
+}

packages/client/src/constants/tab.ts

@@ -25,6 +25,13 @@ export const builtinTab: [string, ModuleBuiltinTab[]][] = [
       path: 'pages',
       title: 'Pages',
     },
+    {
+      icon: 'i-carbon-roadmap',
+      name: 'Timeline',
+      order: -100,
+      path: 'timeline',
+      title: 'Timeline',
+    },
     {
       icon: 'i-carbon-image-copy',
       name: 'assets',

packages/client/src/main.ts

@@ -18,6 +18,7 @@ import Pages from '~/pages/pages.vue'
 import PiniaPage from '~/pages/pinia.vue'
 import RouterPage from '~/pages/router.vue'
 import Settings from '~/pages/settings.vue'
+import Timeline from '~/pages/timeline.vue'
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
@@ -32,6 +33,7 @@ const routes = [
   { path: '/pinia', component: PiniaPage },
   { path: '/router', component: RouterPage },
   { path: '/pages', component: Pages },
+  { path: '/timeline', component: Timeline },
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
   { path: '/settings', component: Settings },

packages/client/src/pages/timeline.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { SelectiveList } from '@vue/devtools-applet'
+import {
+  rpc,
+  useDevToolsState,
+} from '@vue/devtools-core'
+import { Pane, Splitpanes } from 'splitpanes'
+
+// responsive layout
+const splitpanesRef = ref<HTMLDivElement>()
+const splitpanesReady = ref(false)
+const { width: splitpanesWidth } = useElementSize(splitpanesRef)
+// prevent `Splitpanes` layout from being changed before it ready
+const horizontal = computed(() => splitpanesReady.value ? splitpanesWidth.value < 700 : false)
+
+// #region toggle app
+const devtoolsState = useDevToolsState()
+const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({
+  label: app.name + (app.version ? ` (${app.version})` : ''),
+  value: app.id,
+})))
+
+const normalizedAppRecords = computed(() => appRecords.value.map(app => ({
+  label: app.label,
+  id: app.value,
+})))
+
+const activeAppRecordId = ref(devtoolsState.activeAppRecordId.value)
+watchEffect(() => {
+  activeAppRecordId.value = devtoolsState.activeAppRecordId.value
+})
+
+function toggleApp(id: string) {
+  rpc.value.toggleApp(id).then(() => {
+  })
+}
+
+// #endregion
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <Splitpanes ref="splitpanesRef" class="flex-1 overflow-auto" :horizontal="horizontal" @ready="splitpanesReady = true">
+      <Pane v-if="appRecords.length > 1" border="base h-full" size="20">
+        <div class="no-scrollbar h-full flex select-none gap-2 overflow-scroll">
+          <SelectiveList v-model="activeAppRecordId" :data="normalizedAppRecords" class="w-full" @select="toggleApp" />
+        </div>
+      </Pane>
+      <Pane border="base" h-full>
+        <div class="h-full flex flex-col p2">
+          <div class="flex py2">
+            3
+          </div>
+          <div class="no-scrollbar flex-1 select-none overflow-scroll">
+            2
+          </div>
+        </div>
+      </Pane>
+      <Pane relative h-full>
+        <div class="h-full flex flex-col p2">
+          <div class="flex py2">
+            1
+          </div>
+        </div>
+      </Pane>
+    </Splitpanes>
+  </div>
+</template>