From 703747ae39fb2af5551faa92c0c6249b66d4941e Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 17 Dec 2024 10:52:44 +0100
Subject: [PATCH 1/6] feat(ui): improve `WdsDropdownMenu` search bar

Make the search field sticky on the top.
---
 src/ui/src/wds/WdsDropdownMenu.vue | 34 ++++++++++++++++++------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index 04d893e70..96ce9446d 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -1,15 +1,17 @@
 <template>
 	<div class="WdsDropdownMenu">
-		<div v-if="enableSearch" class="WdsDropdownMenu__search">
-			<i class="material-symbols-outlined">search</i>
-			<input
-				ref="searchInput"
-				v-model="searchTerm"
-				class="WdsDropdownMenu__search__input"
-				type="text"
-				placeholder="Search"
-				autocomplete="off"
-			/>
+		<div v-if="enableSearch" class="WdsDropdownMenu__search-wrapper">
+			<div class="WdsDropdownMenu__search">
+				<i class="material-symbols-outlined">search</i>
+				<input
+					ref="searchInput"
+					v-model="searchTerm"
+					class="WdsDropdownMenu__search__input"
+					type="text"
+					placeholder="Search"
+					autocomplete="off"
+				/>
+			</div>
 		</div>
 		<button
 			v-for="option in optionsFiltered"
@@ -100,7 +102,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	box-shadow: 0px 1px 8px 0px #bfcbff40;
 	box-sizing: border-box;
 }
-.WdsDropdownMenu:has(.WdsDropdownMenu__search) {
+.WdsDropdownMenu:has(.WdsDropdownMenu__search-wrapper) {
 	padding-top: 0px;
 }
 
@@ -139,6 +141,13 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	overflow: hidden;
 	text-align: left;
 }
+.WdsDropdownMenu__search-wrapper {
+	position: sticky;
+	top: 0px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	background: #fff;
+}
 
 .WdsDropdownMenu__search {
 	background-color: #fafafa;
@@ -146,15 +155,12 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	height: 36px;
 	width: 100%;
 
-	margin-bottom: 8px;
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	gap: 4px;
 
 	padding: 8px;
-	padding-top: 16px;
 	border: 1px solid transparent;
 
 	color: currentcolor;

From d7b5dc92cb4b296e287a056794aa3a7e14d9e830 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 17 Dec 2024 10:53:49 +0100
Subject: [PATCH 2/6] fix(ui): set `BuilderSelect`'s dropdown vertical only

In some situation, the dropdown was displayed on the left or on the
right.
---
 src/ui/src/builder/BuilderSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 1c273b263..0b64522e0 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -65,7 +65,7 @@ const { floatingStyles, update: updateFloatingStyle } = useFloating(
 	dropdown,
 	{
 		placement: "bottom",
-		middleware: [autoPlacement()],
+		middleware: [autoPlacement({ allowedPlacements: ["bottom", "top"] })],
 	},
 );
 

From 0af0a3c30e50f1464ec1f36057d4838313439c5b Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 17 Dec 2024 10:57:53 +0100
Subject: [PATCH 3/6] fix(ui): Set `BuilderSelect` WDS hover state

---
 src/ui/src/builder/BuilderSelect.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 0b64522e0..9f29c8985 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -131,6 +131,11 @@ function onSelect(value: string) {
 
 	cursor: pointer;
 }
+.BuilderSelect__trigger:focus {
+	border: 1px solid var(--softenedAccentColor);
+	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
+	outline: none;
+}
 .BuilderSelect__trigger__label {
 	text-overflow: ellipsis;
 	overflow: hidden;

From 1d67456c3343c88bb95e436d4de66dcbcb2effab Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 17 Dec 2024 11:49:45 +0100
Subject: [PATCH 4/6] fix(ui): avoid rendering empty sections in builder

Some components don't have "general" or "style" section. This makes some
gap in the UI.
---
 .../settings/BuilderSettingsProperties.vue        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index c0415f41e..69e981ed1 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -144,11 +144,16 @@ const fields = computed(() => {
 	return definition.fields;
 });
 
-const fieldCategories = [
-	FieldCategory.General,
-	FieldCategory.Style,
-	FieldCategory.Tools,
-];
+const fieldCategories = computed(() => {
+	const categories = new Set(
+		Object.values(fields.value).map((field) => field.category),
+	);
+	return [
+		FieldCategory.General,
+		FieldCategory.Style,
+		FieldCategory.Tools,
+	].filter((c) => fieldsByCategory.value[c]?.length);
+});
 
 const fieldsByCategory = computed(() => {
 	const entries = Object.entries(fields.value);

From e5f6d65e5b8fb9df451c83918ce46dca37d08c07 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 17 Dec 2024 11:51:53 +0100
Subject: [PATCH 5/6] feat(ui): use `WdsButton` in builder

---
 .../settings/BuilderSettingsHandlers.vue      | 109 +++++++++---------
 src/ui/src/wds/WdsFieldWrapper.vue            |  35 +++---
 2 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
index 5a363339a..d93c3d43e 100644
--- a/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsHandlers.vue
@@ -31,6 +31,9 @@
 					</WdsFieldWrapper>
 				</div>
 			</div>
+			<WdsButton variant="tertiary" @click="showCustomHandlerModal">
+				<i class="material-symbols-outlined">add</i>Add custom handler
+			</WdsButton>
 		</div>
 		<BuilderModal
 			v-if="stubModal"
@@ -45,62 +48,57 @@
 			<div class="codeContainer">
 				<code v-dompurify-html="stubModal.highlightedCodeHtml"> </code>
 			</div>
-			<button @click="copyToClipboard(stubModal.code)">
-				<i class="material-symbols-outlined"> content_copy </i>
+			<WdsButton
+				variant="tertiary"
+				@click="copyToClipboard(stubModal.code)"
+			>
+				<i class="material-symbols-outlined">content_copy</i>
 				Copy code to clipboard
-			</button>
+			</WdsButton>
 		</BuilderModal>
-		<div class="customHandler">
-			<button
-				title="Add a custom event handler"
-				@click="showCustomHandlerModal"
-			>
-				<i class="material-symbols-outlined">add</i>Add custom handler
-			</button>
-			<BuilderModal
-				v-if="customHandlerModal"
-				:close-action="customHandlerModalCloseAction"
-				icon="bolt"
-				modal-title="Add Custom Event Handler"
-				allow-overflow
-			>
-				<div class="customHandlerModalForm">
-					<WdsFieldWrapper
-						label="Event type"
-						hint="Can be any event type."
-					>
-						<WdsTextInput
-							v-model="customHandlerModal.eventType"
-							type="text"
-							list="commonEventTypes"
-						/>
-						<datalist id="commonEventTypes">
-							<option
-								v-for="commonEventType in commonEventTypes"
-								:key="commonEventType"
-								:value="commonEventType"
-							>
-								{{ commonEventType }}
-							</option>
-						</datalist>
-					</WdsFieldWrapper>
-					<WdsFieldWrapper
-						label="Handler function"
-						hint="The function that will handle the event."
-					>
-						<BuilderSelect
-							v-model="customHandlerModal.handlerFunctionName"
-							:options="options"
-							enable-search
-						/>
-					</WdsFieldWrapper>
-				</div>
+		<BuilderModal
+			v-if="customHandlerModal"
+			:close-action="customHandlerModalCloseAction"
+			icon="bolt"
+			modal-title="Add Custom Event Handler"
+			allow-overflow
+		>
+			<div class="customHandlerModalForm">
+				<WdsFieldWrapper
+					label="Event type"
+					hint="Can be any event type."
+				>
+					<WdsTextInput
+						v-model="customHandlerModal.eventType"
+						type="text"
+						list="commonEventTypes"
+					/>
+					<datalist id="commonEventTypes">
+						<option
+							v-for="commonEventType in commonEventTypes"
+							:key="commonEventType"
+							:value="commonEventType"
+						>
+							{{ commonEventType }}
+						</option>
+					</datalist>
+				</WdsFieldWrapper>
+				<WdsFieldWrapper
+					label="Handler function"
+					hint="The function that will handle the event."
+				>
+					<BuilderSelect
+						v-model="customHandlerModal.handlerFunctionName"
+						:options="options"
+						enable-search
+					/>
+				</WdsFieldWrapper>
+			</div>
 
-				<button @click="addCustomEventHandler()">
-					<i class="material-symbols-outlined">add</i>Add
-				</button>
-			</BuilderModal>
-		</div>
+			<WdsButton variant="tertiary" @click="addCustomEventHandler()">
+				<i class="material-symbols-outlined">add</i>Add
+			</WdsButton>
+		</BuilderModal>
 	</div>
 </template>
 
@@ -116,6 +114,7 @@ import BuilderSelect from "../BuilderSelect.vue";
 import type { Option } from "../BuilderSelect.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsButton from "@/wds/WdsButton.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -343,10 +342,6 @@ const copyToClipboard = (text: string) => {
 	gap: 24px;
 }
 
-.customHandler {
-	margin-top: 24px;
-}
-
 .addHandler .fields {
 	display: flex;
 	gap: 16px;
diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
index 1b5cfdce3..6ab382cb5 100644
--- a/src/ui/src/wds/WdsFieldWrapper.vue
+++ b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -7,15 +7,18 @@
 					>&nbsp;:&nbsp;{{ unit }}</span
 				>
 			</label>
-			<button
+			<WdsButton
 				v-if="helpButton"
 				class="WdsFieldWrapper__title__help"
-				variant="subtle"
-				:title="typeof helpButton === 'string' ? helpButton : undefined"
+				variant="neutral"
+				size="smallIcon"
+				:data-writer-tooltip="
+					typeof helpButton === 'string' ? helpButton : undefined
+				"
 				@click="$emit('helpClick')"
 			>
 				<i class="material-symbols-outlined">help</i>
-			</button>
+			</WdsButton>
 		</div>
 		<div class="WdsFieldWrapper__slot"><slot></slot></div>
 		<div v-if="hint" class="WdsFieldWrapper__hint">{{ hint }}</div>
@@ -23,6 +26,8 @@
 </template>
 
 <script setup lang="ts">
+import WdsButton from "./WdsButton.vue";
+
 defineProps({
 	label: { type: String, required: false, default: undefined },
 	unit: { type: String, required: false, default: undefined },
@@ -57,17 +62,17 @@ defineEmits({
 	gap: 8px;
 }
 
-.WdsFieldWrapper__title__help {
-	background-color: transparent;
-	border: none;
-	border-radius: 50%;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-}
-.WdsFieldWrapper__title__help:hover {
-	color: var(--primaryColor);
-}
+/* .WdsFieldWrapper__title__help { */
+/* 	background-color: transparent; */
+/* 	border: none; */
+/* 	border-radius: 50%; */
+/* 	cursor: pointer; */
+/* 	display: flex; */
+/* 	align-items: center; */
+/* } */
+/* .WdsFieldWrapper__title__help:hover { */
+/* 	color: var(--primaryColor); */
+/* } */
 
 .WdsFieldWrapper__title__label {
 	font-size: 14px;

From 55ffbf779bddb93a93d45c9806479cd211b86de5 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 17 Dec 2024 11:55:23 +0100
Subject: [PATCH 6/6] chore(ui): cleanup

---
 .../builder/settings/BuilderSettingsProperties.vue   |  3 ---
 src/ui/src/wds/WdsFieldWrapper.vue                   | 12 ------------
 2 files changed, 15 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index 69e981ed1..b760fac0a 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -145,9 +145,6 @@ const fields = computed(() => {
 });
 
 const fieldCategories = computed(() => {
-	const categories = new Set(
-		Object.values(fields.value).map((field) => field.category),
-	);
 	return [
 		FieldCategory.General,
 		FieldCategory.Style,
diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
index 6ab382cb5..e369038da 100644
--- a/src/ui/src/wds/WdsFieldWrapper.vue
+++ b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -62,18 +62,6 @@ defineEmits({
 	gap: 8px;
 }
 
-/* .WdsFieldWrapper__title__help { */
-/* 	background-color: transparent; */
-/* 	border: none; */
-/* 	border-radius: 50%; */
-/* 	cursor: pointer; */
-/* 	display: flex; */
-/* 	align-items: center; */
-/* } */
-/* .WdsFieldWrapper__title__help:hover { */
-/* 	color: var(--primaryColor); */
-/* } */
-
 .WdsFieldWrapper__title__label {
 	font-size: 14px;
 	font-weight: 400;