From 9fbd25e5c32e7278b86578a1a165e0ced21c9f91 Mon Sep 17 00:00:00 2001
From: FineArchs <cicada1003@gmail.com>
Date: Fri, 27 Sep 2024 16:34:55 +0900
Subject: [PATCH] show shown

---
 packages/frontend/src/pages/scratchpad.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/scratchpad.vue b/packages/frontend/src/pages/scratchpad.vue
index 897ff6acdf09..155d8b82d71c 100644
--- a/packages/frontend/src/pages/scratchpad.vue
+++ b/packages/frontend/src/pages/scratchpad.vue
@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkContainer :foldable="true" :expanded="false">
 				<template #header>{{ i18n.ts.uiInspector }}</template>
 				<div :class="$style.uiInspector">
-					<div v-for="c in components" :key="c.value.id">
+					<div v-for="c in components" :key="c.value.id" :class="{ [$style.uiInspectorUnShown]: !showns.has(c.value.id) }">
 						<div :class="$style.uiInspectorType">{{ c.value.type }}</div>
 						<div :class="$style.uiInspectorId">{{ c.value.id }}</div>
 						<button :class="$style.uiInspectorPropsToggle" @click="() => uiInspectorOpenedComponents.set(c, !uiInspectorOpenedComponents.get(c))">
@@ -180,6 +180,20 @@ const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);
 
+const showns = computed(() => {
+	const result = new Set<string>();
+	(function addChildrenToResult(c: AsUiComponent) {
+		result.add(c.id);
+		if (c.children) {
+			const childComponents = components.value.filter(v => c.children.includes(v.value.id));
+			for (const child of childComponents) {
+				addChildrenToResult(child.value);
+			}
+		}
+	})(root.value);
+	return result;
+});
+
 definePageMetadata(() => ({
 	title: i18n.ts.scratchpad,
 	icon: 'ti ti-terminal-2',
@@ -227,6 +241,10 @@ definePageMetadata(() => ({
 	padding: 16px;
 }
 
+.uiInspectorUnShown {
+	color: var(--fgTransparent);
+}
+
 .uiInspectorType {
 	display: inline-block;
 	border: hidden;