From 5c44febc65ad6dd1389118520d527746f4faff17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 16 Dec 2025 16:46:55 +0100
Subject: [PATCH] Add SearchSelect component

---
 app/styles/_variables.scss |  1 +
 app/ui/SearchSelect.vue    | 77 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 app/ui/SearchSelect.vue

diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index c200b6e..b047d8b 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -1,5 +1,6 @@
 $color-accent: rgb(255, 69, 58);
 $color-background: oklch(14.1% 0.005 285.823); // #1a202c
+$color-secondary-background: oklch(26.862% 0.00003 271.152);
 $color-text: rgba(255, 255, 255, 0.92);
 $color-placeholder-text: rgba(255, 255, 255, 0.44);
 $color-border: rgba(255, 255, 255, 0.16);
diff --git a/app/ui/SearchSelect.vue b/app/ui/SearchSelect.vue
new file mode 100644
index 0000000..d2d8960
--- /dev/null
+++ b/app/ui/SearchSelect.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+export interface Option {
+	label: string
+	value: any
+}
+
+interface SearchSelectProps {
+	fetchOptions: (q: string) => Promise<Option[]>
+}
+
+const props = defineProps<SearchSelectProps>()
+const value = defineModel<string>("value")
+
+const query = ref<string>("")
+const options = ref<Option[]>([])
+const show = ref<boolean>(false)
+
+watch(query, async (q) => {
+	options.value = q ? await props.fetchOptions(q) : []
+	show.value = true
+})
+
+const select = (item: Option) => {
+	value.value = item.value
+	query.value = item.label
+	nextTick(() => (options.value = []))
+}
+</script>
+
+<template>
+	<div class="search-select" @blur="show = false">
+		<Input v-model:value="query" @focus="show = true" type="text" full />
+
+		<ul v-if="options.length && show">
+			<li v-for="opt in options" :key="opt.value" @click="select(opt)">
+				{{ opt.label }}
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+.search-select {
+	position: relative;
+
+	& ul,
+	& li {
+		border-radius: $border-radius-standard;
+	}
+
+	& ul {
+		position: absolute;
+		top: calc(100% + 2px);
+		z-index: 10;
+
+		width: 100%;
+		padding: 0.25rem;
+
+		display: flex;
+		flex-direction: column;
+		background-color: $color-secondary-background;
+		gap: 0.2rem;
+	}
+
+	& li {
+		padding: 0.35rem 0.85rem;
+
+		transition: background-color 0.1s ease;
+
+		&:hover {
+			background-color: $color-button-hover;
+		}
+	}
+}
+</style>