feat(ui): Hide category if there is no comp. WF-42

src/ui/src/builder/BuilderSidebarToolbar.vue

@@ -10,7 +10,7 @@
 				v-for="(categoryData, category) in categoriesData"
 				:key="category"
 			>
-				<div v-if="categoryData.isVisible !== false" class="category">
+				<div v-if="shouldDisplayCategory(category)" class="category">
 					<div class="title">
 						<i class="material-symbols-outlined">{{
 							categoryData.icon ?? "question_mark"
@@ -70,6 +70,8 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { removeInsertionCandidacy } = useDragDropComponent(wf);
 
+type CategoryId = "Root" | "Layout" | "Content" | "Input" | "Embed" | "Other";
+
 type CategoryData = {
 	isVisible?: boolean;
 	isCollapsed?: boolean;
@@ -78,7 +80,7 @@ type CategoryData = {
 
 const searchQuery = ref("");
 
-const categoriesData: Ref<Record<string, CategoryData>> = ref({
+const categoriesData: Ref<Record<CategoryId, CategoryData>> = ref({
 	Root: {
 		isVisible: false,
 	},
@@ -104,16 +106,24 @@ const categoriesData: Ref<Record<string, CategoryData>> = ref({
 	},
 });
 
+function shouldDisplayCategory(categoryId: CategoryId): boolean {
+	if (categoriesData.value[categoryId]?.isVisible === false) return false;
+
+	return (
+		Object.keys(definitionsByDisplayCategory.value[categoryId] ?? {})
+			.length > 0
+	);
+}
+
 function toggleCollapseCategory(categoryId: string) {
 	const categoryData = categoriesData.value[categoryId];
 	categoryData.isCollapsed = !categoryData.isCollapsed;
 }
 
 const definitionsByDisplayCategory = computed(() => {
 	const types = wf.getSupportedComponentTypes();
-	const result: Record<
-		string,
-		Record<string, WriterComponentDefinition>
+	const result: Partial<
+		Record<CategoryId, Record<string, WriterComponentDefinition>>
 	> = {};
 
 	types.map((type) => {
@@ -142,6 +152,8 @@ const definitionsByDisplayCategory = computed(() => {
 		result[displayCategory][type] = definition;
 	});
 
+	console.log(result);
+
 	return result;
 });