feat: integration search bar

web/src/components/EndpointCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { t, translate } from '@/i18n'
 
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import ApiFieldTable from '@/components/ApiFieldTable.vue'
 import CodeSnippet from '@/components/CodeSnippet.vue'
 import { RATE_LIMIT_SENTENCE, endpointExamples, type ApiEndpoint } from '@/data/apiCatalogue'
@@ -10,9 +10,19 @@ import { CHIP_CLASS, METHOD_CLASS, endpointAnchor } from '@/lib/apiReference'
 const props = defineProps<{
 	endpoint: ApiEndpoint
 	origin: string
+	flash?: 'animated' | 'static' | null
 }>()
 
 const open = ref(false)
+const rowButton = ref<HTMLButtonElement | null>(null)
+
+async function reveal() {
+	open.value = true
+	await nextTick()
+	rowButton.value?.focus({ preventScroll: true })
+}
+
+defineExpose({ reveal })
 const activeTab = ref('fetch')
 
 const examples = computed(() => endpointExamples(props.endpoint, props.origin))
@@ -42,10 +52,15 @@ const snippetTabs = computed(() => [
 		:ui="{ content: 'border-t border-muted' }"
 	>
 		<button
+			ref="rowButton"
 			type="button"
 			:aria-label="rowLabel"
 			class="flex min-h-11 w-full cursor-pointer flex-col items-stretch gap-1.5 px-3 py-3 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary lg:grid lg:grid-cols-[300px_minmax(0,1fr)_auto_16px] lg:items-center lg:gap-4 lg:px-4 lg:py-0"
-			:class="open ? 'bg-muted' : ''"
+			:class="[
+				open ? 'bg-muted' : '',
+				flash === 'animated' ? 'endpoint-flash' : '',
+				flash === 'static' ? 'endpoint-flash-static' : '',
+			]"
 		>
 			<span class="flex min-w-0 items-center gap-2.5">
 				<UBadge
@@ -134,3 +149,27 @@ const snippetTabs = computed(() => [
 		</template>
 	</UCollapsible>
 </template>
+
+<style scoped>
+.endpoint-flash,
+.endpoint-flash-static {
+	background: var(--rc-sand);
+	box-shadow: inset 0 0 0 2px var(--ui-primary);
+}
+
+.endpoint-flash {
+	animation: endpoint-flash-fade 1.5s ease-out forwards;
+}
+
+@keyframes endpoint-flash-fade {
+	0%,
+	60% {
+		background: var(--rc-sand);
+		box-shadow: inset 0 0 0 2px var(--ui-primary);
+	}
+	100% {
+		background: var(--ui-bg-muted);
+		box-shadow: inset 0 0 0 2px transparent;
+	}
+}
+</style>