From a9588f73ba9886d3dd4e9302a7fc69f2185c2734 Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Tue, 27 May 2025 22:21:37 +0300
Subject: [PATCH] feat: start new dropdown ui

---
 src/lib/components/functional/Dropdown.svelte | 49 +++++++++++++++----
 src/lib/types/dropdown.ts                     |  5 ++
 src/lib/types/index.ts                        |  1 +
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/types/dropdown.ts

diff --git a/src/lib/components/functional/Dropdown.svelte b/src/lib/components/functional/Dropdown.svelte
index 102b14d..40d36d7 100644
--- a/src/lib/components/functional/Dropdown.svelte
+++ b/src/lib/components/functional/Dropdown.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { duration, fade, transition } from "$lib/animation";
-	import { ChevronDown } from "lucide-svelte";
+	import type { Categories } from "$lib/types";
+	import { ChevronDown, SearchIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
 
 	type Props = {
 		options: string[];
+		categories: Categories;
 		selected?: string;
 		onselect?: (option: string) => void;
 		disabled?: boolean;
@@ -48,6 +50,12 @@
 		window.addEventListener("click", click);
 		return () => window.removeEventListener("click", click);
 	});
+
+	function search(event: Event) {
+		const query = (event.target as HTMLInputElement).value;
+		// TODO: search logic
+		console.log(`Searching for: ${query}`);
+	}
 </script>
 
 <div
@@ -108,22 +116,43 @@
 		/>
 	</button>
 	{#if open}
+		<!-- TODO: fix positioning for mobile -->
 		<div
 			style={hover ? "will-change: opacity, fade, transform" : ""}
 			transition:fade={{
 				duration,
 				easing: quintOut,
 			}}
-			class="w-full shadow-xl bg-panel-alt shadow-black/25 absolute overflow-hidden top-full mt-1 left-0 z-50 bg-background rounded-xl max-h-[30vh] overflow-y-auto"
+			class="w-[250%] min-w-full shadow-xl bg-panel-alt shadow-black/25 absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 rounded-xl overflow-hidden"
 		>
-			{#each options as option}
-				<button
-					class="w-full p-2 px-4 text-left hover:bg-panel"
-					onclick={() => select(option)}
-				>
-					{option}
-				</button>
-			{/each}
+			<!-- search box -->
+			<div class="p-3">
+				<div class="flex w-full items-center">
+					<div
+						class="flex-shrink-0 flex-grow-0 basis-1/6 flex justify-center"
+					>
+						<SearchIcon class="w-4 h-4 text-text-secondary" />
+					</div>
+					<input
+						type="text"
+						placeholder="Search format"
+						class="flex-grow basis-5/6 rounded-lg bg-panel text-foreground"
+						oninput={search}
+					/>
+				</div>
+			</div>
+
+			<!-- categories and formats -->
+			<div class="max-h-80 overflow-y-auto">
+				{#each options as option}
+					<button
+						class="w-full p-2 px-4 text-left hover:bg-panel"
+						onclick={() => select(option)}
+					>
+						{option}
+					</button>
+				{/each}
+			</div>
 		</div>
 	{/if}
 </div>
diff --git a/src/lib/types/dropdown.ts b/src/lib/types/dropdown.ts
new file mode 100644
index 0000000..1dd4b8b
--- /dev/null
+++ b/src/lib/types/dropdown.ts
@@ -0,0 +1,5 @@
+export interface Categories {
+    [key: string]: {
+        formats: string[];
+    }
+}
\ No newline at end of file
diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
index a69c1a0..7d0d8f7 100644
--- a/src/lib/types/index.ts
+++ b/src/lib/types/index.ts
@@ -1,3 +1,4 @@
 export * from "./file.svelte";
 export * from "./util";
 export * from "./conversion-worker";
+export * from "./dropdown";
\ No newline at end of file