part 1

src/lib/cards/GIFCard/EditingGifCard.svelte

···
 
 	const did = getDidContext();
 
-	let isDragging = $state(false);
-	let urlInput = $state(item.cardData.url || '');
 	let hasError = $state(false);
-	let isEditing = $state(false);
-	let inputElement: HTMLInputElement | null = $state(null);
+	let isSearchOpen = $state(false);
+	let searchQuery = $state('');
+	let searchResults = $state<
+		Array<{
+			id: string;
+			title: string;
+			images: {
+				fixed_height: { url: string; width: string; height: string };
+				original: { url: string };
+			};
+		}>
+	>([]);
+	let isLoading = $state(false);
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	function getSrc() {
-		if (item.cardData.objectUrl) return item.cardData.objectUrl;
+		if (item.cardData.url) return item.cardData.url;
 
 		if (item.cardData.image && typeof item.cardData.image === 'object') {
 			return getImageBlobUrl({ did, link: item.cardData.image?.ref?.$link });
 		}
 
-		return item.cardData.url || item.cardData.image;
-	}
-
-	function handleDragOver(e: DragEvent) {
-		e.preventDefault();
-		isDragging = true;
-	}
-
-	function handleDragLeave(e: DragEvent) {
-		e.preventDefault();
-		isDragging = false;
+		return item.cardData.image;
 	}
 
-	async function handleDrop(e: DragEvent) {
-		e.preventDefault();
-		isDragging = false;
-
-		const files = e.dataTransfer?.files;
-		if (!files || files.length === 0) return;
-
-		const file = files[0];
-		if (!file.type.startsWith('image/gif')) {
+	async function searchGiphy(query: string) {
+		if (!query.trim()) {
+			searchResults = [];
 			return;
 		}
 
-		await handleFile(file);
+		isLoading = true;
+		try {
+			const response = await fetch(`/api/giphy?q=${encodeURIComponent(query)}`);
+			if (response.ok) {
+				const data = await response.json();
+				searchResults = data.data || [];
+			}
+		} catch (error) {
+			console.error('Failed to search Giphy:', error);
+		} finally {
+			isLoading = false;
+		}
 	}
 
-	async function handleFile(file: File) {
-		const objectUrl = URL.createObjectURL(file);
-		item.cardData.objectUrl = objectUrl;
-		item.cardData.blob = file;
-		item.cardData.url = '';
-		hasError = false;
+	function handleSearchInput() {
+		if (searchTimeout) clearTimeout(searchTimeout);
+		searchTimeout = setTimeout(() => {
+			searchGiphy(searchQuery);
+		}, 300);
 	}
 
-	function convertGifUrl(url: string): string {
-		const trimmedUrl = url.trim();
-
-		// Giphy page URL: https://giphy.com/gifs/name-name-ID or https://giphy.com/gifs/ID
-		const giphyMatch = trimmedUrl.match(/giphy\.com\/gifs\/(?:.*-)?([a-zA-Z0-9]+)(?:\?|$)/);
-		if (giphyMatch) {
-			return `https://media.giphy.com/media/${giphyMatch[1]}/giphy.gif`;
-		}
-
-		// Giphy media URL - already correct format
-		if (trimmedUrl.includes('media.giphy.com')) {
-			return trimmedUrl;
-		}
-
-		// Return as-is for direct GIF URLs or other sources
-		return trimmedUrl;
+	function selectGif(gif: (typeof searchResults)[0]) {
+		item.cardData.url = gif.images.original.url;
+		item.cardData.alt = gif.title;
+		hasError = false;
+		isSearchOpen = false;
+		searchQuery = '';
+		searchResults = [];
 	}
 
-	function handleUrlSubmit() {
-		if (urlInput.trim()) {
-			item.cardData.url = convertGifUrl(urlInput);
-			item.cardData.objectUrl = undefined;
-			item.cardData.blob = undefined;
-			hasError = false;
-		}
-		isEditing = false;
+	function openSearch() {
+		isSearchOpen = true;
 	}
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter') {
-			handleUrlSubmit();
-		}
-		if (e.key === 'Escape') {
-			urlInput = item.cardData.url || '';
-			isEditing = false;
-		}
-	}
-
-	function handleClick() {
-		isEditing = true;
-		requestAnimationFrame(() => {
-			inputElement?.focus();
-			if (getSrc()) {
-				inputElement?.select();
-			}
-		});
+	function closeSearch() {
+		isSearchOpen = false;
+		searchQuery = '';
+		searchResults = [];
 	}
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-	class="relative h-full w-full overflow-hidden"
-	ondragover={handleDragOver}
-	ondragleave={handleDragLeave}
-	ondrop={handleDrop}
-	onclick={handleClick}
->
+<div class="relative h-full w-full overflow-hidden" onclick={openSearch}>
 	{#if getSrc() && !hasError}
 		<img
 			class="absolute inset-0 h-full w-full object-cover"
···
 			onerror={() => (hasError = true)}
 		/>
 	{:else}
-		<!-- Empty state / Drop zone -->
+		<!-- Empty state -->
 		<div
-			class="bg-base-100 dark:bg-base-900 flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 p-4 transition-colors {isDragging
-				? 'bg-accent-100 dark:bg-accent-900/30'
-				: ''}"
+			class="bg-base-100 dark:bg-base-900 flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 p-4"
 		>
 			<div
-				class="flex size-12 items-center justify-center rounded-xl border-2 border-dashed {isDragging
-					? 'border-accent-500'
-					: 'border-base-300 dark:border-base-700'}"
+				class="border-base-300 dark:border-base-700 flex size-12 items-center justify-center rounded-xl border-2 border-dashed"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
···
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
-					class="size-6 {isDragging ? 'text-accent-500' : 'text-base-400 dark:text-base-600'}"
+					class="text-base-400 dark:text-base-600 size-6"
 				>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
-						d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
+						d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
 					/>
 				</svg>
 			</div>
 			<div class="text-center">
-				<p class="text-base-700 dark:text-base-300 text-sm font-medium">Drop a GIF here</p>
-				<p class="text-base-500 dark:text-base-500 mt-1 text-xs">or click to enter GIPHY URL</p>
+				<p class="text-base-700 dark:text-base-300 text-sm font-medium">Click to search GIPHY</p>
 			</div>
 		</div>
 	{/if}
 
-	<!-- URL input overlay -->
-	{#if isEditing}
+	<!-- Giphy search modal -->
+	{#if isSearchOpen}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<div
-			class="absolute inset-0 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
+			class="absolute inset-0 z-50 flex flex-col bg-black/80 backdrop-blur-sm"
 			onclick={(e) => e.stopPropagation()}
 		>
-			<div class="w-full max-w-sm">
+			<!-- Header -->
+			<div class="flex items-center gap-2 p-3">
 				<input
-					bind:this={inputElement}
-					bind:value={urlInput}
-					onblur={handleUrlSubmit}
-					onkeydown={handleKeydown}
-					class="w-full rounded-lg border border-white/20 bg-white/10 px-4 py-2 text-sm text-white placeholder-white/50 transition-colors outline-none focus:border-white/40 focus:bg-white/20"
-					placeholder="Paste GIPHY URL"
+					bind:value={searchQuery}
+					oninput={handleSearchInput}
+					class="flex-1 rounded-lg border border-white/20 bg-white/10 px-4 py-2 text-sm text-white placeholder-white/50 outline-none focus:border-white/40 focus:bg-white/20"
+					placeholder="Search GIPHY..."
 				/>
-				<p class="mt-2 text-center text-xs text-white/60">
-					Press Enter to confirm, Escape to cancel
-				</p>
+				<button
+					onclick={closeSearch}
+					aria-label="Close search"
+					class="rounded-lg p-2 text-white/70 transition-colors hover:bg-white/10 hover:text-white"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-5"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</div>
+
+			<!-- Results grid -->
+			<div class="flex-1 overflow-y-auto p-2">
+				{#if isLoading}
+					<div class="flex h-full items-center justify-center">
+						<p class="text-white/60">Searching...</p>
+					</div>
+				{:else if searchResults.length > 0}
+					<div class="grid grid-cols-2 gap-2">
+						{#each searchResults as gif}
+							<button
+								onclick={() => selectGif(gif)}
+								class="overflow-hidden rounded-lg transition-transform hover:scale-[1.02]"
+							>
+								<img
+									src={gif.images.fixed_height.url}
+									alt={gif.title}
+									class="h-auto w-full"
+									loading="lazy"
+								/>
+							</button>
+						{/each}
+					</div>
+				{:else if searchQuery}
+					<div class="flex h-full items-center justify-center">
+						<p class="text-white/60">No results found</p>
+					</div>
+				{:else}
+					<div class="flex h-full items-center justify-center">
+						<p class="text-white/60">Type to search for GIFs</p>
+					</div>
+				{/if}
 			</div>
-		</div>
-	{/if}
 
-	<!-- Drag overlay -->
-	{#if isDragging}
-		<div
-			class="bg-accent-500/20 pointer-events-none absolute inset-0 flex items-center justify-center backdrop-blur-sm"
-		>
-			<p class="text-accent-700 dark:text-accent-300 text-lg font-semibold">Drop GIF here</p>
+			<!-- Giphy attribution -->
+			<div class="p-2 text-center">
+				<span class="text-xs text-white/40">Powered by GIPHY</span>
+			</div>
 		</div>
 	{/if}
 </div>

src/lib/cards/GIFCard/GifCardSettings.svelte

···
 <script lang="ts">
 	import type { Item } from '$lib/types';
 	import type { SettingsComponentProps } from '../types';
-	import { Input, Label } from '@foxui/core';
+	import { Button, Input, Label } from '@foxui/core';
 
 	let { item = $bindable<Item>() }: SettingsComponentProps = $props();
 
-	function handleFileSelect(e: Event) {
-		const input = e.target as HTMLInputElement;
-		const file = input.files?.[0];
-		if (!file || !file.type.startsWith('image/gif')) return;
+	let isSearchOpen = $state(false);
+	let searchQuery = $state('');
+	let searchResults = $state<
+		Array<{
+			id: string;
+			title: string;
+			images: {
+				fixed_height: { url: string; width: string; height: string };
+				original: { url: string };
+			};
+		}>
+	>([]);
+	let isLoading = $state(false);
+	let searchTimeout: ReturnType<typeof setTimeout> | null = null;
 
-		const objectUrl = URL.createObjectURL(file);
-		item.cardData.objectUrl = objectUrl;
-		item.cardData.blob = file;
-		item.cardData.url = '';
+	async function searchGiphy(query: string) {
+		if (!query.trim()) {
+			searchResults = [];
+			return;
+		}
+
+		isLoading = true;
+		try {
+			const response = await fetch(`/api/giphy?q=${encodeURIComponent(query)}`);
+			if (response.ok) {
+				const data = await response.json();
+				searchResults = data.data || [];
+			}
+		} catch (error) {
+			console.error('Failed to search Giphy:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleSearchInput() {
+		if (searchTimeout) clearTimeout(searchTimeout);
+		searchTimeout = setTimeout(() => {
+			searchGiphy(searchQuery);
+		}, 300);
+	}
+
+	function selectGif(gif: (typeof searchResults)[0]) {
+		item.cardData.url = gif.images.original.url;
+		item.cardData.alt = gif.title;
+		isSearchOpen = false;
+		searchQuery = '';
+		searchResults = [];
 	}
 </script>
 
 <div class="flex flex-col gap-3">
 	<div>
-		<Label class="mb-1 text-xs">GIF URL</Label>
-		<Input
-			bind:value={item.cardData.url}
-			placeholder="https://media.giphy.com/..."
-			class="w-full"
-		/>
+		<Label class="mb-1 text-xs">Search GIPHY</Label>
+		<Button
+			variant="secondary"
+			class="w-full justify-start"
+			onclick={() => (isSearchOpen = !isSearchOpen)}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="mr-2 size-4"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+				/>
+			</svg>
+			Search for GIFs
+		</Button>
 	</div>
 
-	<div>
-		<Label class="mb-1 text-xs">Or upload a GIF</Label>
-		<input
-			type="file"
-			accept="image/gif"
-			onchange={handleFileSelect}
-			class="w-full rounded border border-base-300 bg-base-100 px-2 py-1 text-sm dark:border-base-700 dark:bg-base-800"
-		/>
-	</div>
+	{#if isSearchOpen}
+		<div class="flex flex-col gap-2">
+			<Input
+				bind:value={searchQuery}
+				oninput={handleSearchInput}
+				placeholder="Type to search..."
+				class="w-full"
+				autofocus
+			/>
+			{#if isLoading}
+				<p class="text-base-500 text-xs">Searching...</p>
+			{:else if searchResults.length > 0}
+				<div class="grid max-h-48 grid-cols-2 gap-1 overflow-y-auto">
+					{#each searchResults as gif}
+						<button
+							onclick={() => selectGif(gif)}
+							class="overflow-hidden rounded transition-transform hover:scale-[1.02]"
+						>
+							<img
+								src={gif.images.fixed_height.url}
+								alt={gif.title}
+								class="h-auto w-full"
+								loading="lazy"
+							/>
+						</button>
+					{/each}
+				</div>
+				<p class="text-base-400 text-center text-xs">Powered by GIPHY</p>
+			{:else if searchQuery}
+				<p class="text-base-500 text-xs">No results found</p>
+			{/if}
+		</div>
+	{/if}
 
 	<div>
 		<Label class="mb-1 text-xs">Alt text</Label>

src/lib/cards/GIFCard/index.ts

···
-import { uploadBlob } from '$lib/oauth/utils';
 import type { CardDefinition } from '../types';
 import EditingGifCard from './EditingGifCard.svelte';
 import GifCard from './GifCard.svelte';
···
 		card.h = 2;
 		card.mobileW = 4;
 		card.mobileH = 4;
-	},
-	upload: async (item) => {
-		if (item.cardData.blob) {
-			item.cardData.image = await uploadBlob(item.cardData.blob);
-			delete item.cardData.blob;
-		}
-
-		if (item.cardData.objectUrl) {
-			URL.revokeObjectURL(item.cardData.objectUrl);
-			delete item.cardData.objectUrl;
-		}
-
-		return item;
 	},
 	settingsComponent: GifCardSettings,
 	sidebarButtonText: 'GIF',

src/routes/api/giphy/+server.ts

···
+import { env } from '$env/dynamic/private';
+import { json } from '@sveltejs/kit';
+
+export async function GET({ url }) {
+	const q = url.searchParams.get('q');
+	const offset = url.searchParams.get('offset') || '0';
+	const limit = url.searchParams.get('limit') || '24';
+
+	if (!q) {
+		return json({ error: 'No search query provided' }, { status: 400 });
+	}
+
+	const apiKey = env.GIPHY_API_TOKEN;
+	if (!apiKey) {
+		return json({ error: 'Giphy API not configured' }, { status: 500 });
+	}
+
+	const giphyUrl = new URL('https://api.giphy.com/v1/gifs/search');
+	giphyUrl.searchParams.set('api_key', apiKey);
+	giphyUrl.searchParams.set('q', q);
+	giphyUrl.searchParams.set('limit', limit);
+	giphyUrl.searchParams.set('offset', offset);
+	giphyUrl.searchParams.set('rating', 'g');
+	giphyUrl.searchParams.set('lang', 'en');
+
+	try {
+		const response = await fetch(giphyUrl.toString());
+		if (!response.ok) {
+			throw new Error(`Giphy API error: ${response.status}`);
+		}
+		const data = await response.json();
+		return json(data);
+	} catch (error) {
+		console.error('Error fetching from Giphy:', error);
+		return json({ error: 'Failed to fetch from Giphy' }, { status: 500 });
+	}
+}