From aaae298f1512d4dc5ae865696e0921932afa199d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 6 Mar 2024 18:09:17 +0100
Subject: [PATCH] feat(filter): make the autocomplete look pretty

---
 .../components/input/AutocompleteDropdown.vue | 79 ++++++++++++-------
 .../project/partials/FilterInput.vue          |  7 +-
 2 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/input/AutocompleteDropdown.vue b/frontend/src/components/input/AutocompleteDropdown.vue
index 096ee09c7..927d7fa14 100644
--- a/frontend/src/components/input/AutocompleteDropdown.vue
+++ b/frontend/src/components/input/AutocompleteDropdown.vue
@@ -12,7 +12,6 @@ type state = 'unfocused' | 'focused'
 const selectedIndex = ref(-1)
 const state = ref<state>('unfocused')
 const val = ref<string>('')
-const isResizing = ref(false)
 const model = defineModel<string>()
 
 const suggestionScrollerRef = ref<HTMLInputElement | null>(null)
@@ -77,38 +76,10 @@ function updateSuggestionScroll() {
 	})
 }
 
-function updateScrollWindowSize() {
-	if (isResizing.value) {
-		return
-	}
-
-	isResizing.value = true
-
-	nextTick(() => {
-		isResizing.value = false
-
-		const scroller = suggestionScrollerRef.value
-		const parent = containerRef.value
-		if (scroller) {
-			const rect = parent.getBoundingClientRect()
-			const pxTop = rect.top
-			const pxBottom = window.innerHeight - rect.bottom
-			const maxHeight = Math.max(pxTop, pxBottom, props.maxHeight)
-			const isReversed = pxBottom < props.maxHeight && pxTop > pxBottom
-			scroller.style.maxHeight = Math.min(isReversed ? pxTop : pxBottom, props.maxHeight) + 'px'
-			scroller.parentNode.style.transform =
-				isReversed ? 'translateY(-100%) translateY(-1.4rem)'
-					: 'translateY(.4rem)'
-		}
-	})
-}
-
 function setState(stateName: state) {
 	state.value = stateName
 	if (stateName === 'unfocused') {
 		emit('blur')
-	} else {
-		updateScrollWindowSize()
 	}
 }
 
@@ -235,3 +206,53 @@ function onUpdateField(e) {
 		</div>
 	</div>
 </template>
+
+<style scoped lang="scss">
+.autocomplete {
+	position: relative;
+	
+	.suggestion-list {
+		position: absolute;
+		
+		background: var(--white);
+		border-radius: 0 0 var(--input-radius) var(--input-radius);
+		border: 1px solid var(--primary);
+		border-top: none;
+
+		max-height: 50vh;
+		overflow-x: auto;
+		z-index: 100;
+		max-width: 100%;
+		min-width: 100%;
+		margin-top: -2px;
+		
+		button {
+			width: 100%;
+			background: transparent;
+			border: 0;
+
+			font-size: .9rem;
+			width: 100%;
+			color: var(--grey-800);
+			text-align: left;
+			box-shadow: none;
+			text-transform: none;
+			font-family: $family-sans-serif;
+			font-weight: normal;
+			padding: .5rem .75rem;
+			border: none;
+			cursor: pointer;
+
+			&:focus,
+			&:hover {
+				background: var(--grey-100);
+				box-shadow: none !important;
+			}
+
+			&:active {
+				background: var(--grey-100);
+			}
+		}
+	}
+}
+</style>
diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index 06b32a684..9fbffd514 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -240,6 +240,7 @@ const autocompleteResults = ref<any[]>([])
 						spellcheck="false"
 						v-model="filterQuery"
 						class="input"
+						:class="{'has-autocomplete-results': autocompleteResults.length > 0}"
 						ref="filterInput"
 					></textarea>
 					<div
@@ -258,7 +259,7 @@ const autocompleteResults = ref<any[]>([])
 			<template
 				v-slot:result="{ item }"
 			>
-				whoo {{ item }}
+				{{ item }}
 			</template>
 		</AutocompleteDropdown>
 	</div>
@@ -323,6 +324,10 @@ const autocompleteResults = ref<any[]>([])
 		-webkit-text-fill-color: transparent;
 		background: transparent !important;
 		resize: none;
+		
+		&.has-autocomplete-results {
+			border-radius: var(--input-radius) var(--input-radius) 0 0;
+		}
 	}
 
 	.filter-input-highlight {