From bba78d5781cf6c368d1845a6edfcb686a048ab80 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 1 Dec 2025 23:43:56 -0800
Subject: [PATCH] feat: add suggestion UI components for batch import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SuggestionBadge: sparkle icon with tooltip for accept/dismiss actions
- SuggestionDetailItem: detail item wrapper with suggestion badge support
- TabbedEntitySelector: entity image grid for batch selection

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/ui/SuggestionBadge.svelte  | 183 ++++++++++++++
 .../components/ui/SuggestionDetailItem.svelte | 229 ++++++++++++++++++
 .../import/TabbedEntitySelector.svelte        | 175 +++++++++++++
 3 files changed, 587 insertions(+)
 create mode 100644 src/lib/components/ui/SuggestionBadge.svelte
 create mode 100644 src/lib/components/ui/SuggestionDetailItem.svelte
 create mode 100644 src/lib/features/database/import/TabbedEntitySelector.svelte

diff --git a/src/lib/components/ui/SuggestionBadge.svelte b/src/lib/components/ui/SuggestionBadge.svelte
new file mode 100644
index 00000000..11ed2c4d
--- /dev/null
+++ b/src/lib/components/ui/SuggestionBadge.svelte
@@ -0,0 +1,183 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { Tooltip as TooltipBase } from 'bits-ui'
+	import Icon from '$lib/components/Icon.svelte'
+
+	interface Props {
+		/** The suggested value to display */
+		suggestion: string | number | boolean | null | undefined
+		/** Label for the suggestion (e.g., field name) */
+		label?: string
+		/** Whether the suggestion has been dismissed */
+		dismissed?: boolean
+		/** Callback when user accepts the suggestion */
+		onAccept?: () => void
+		/** Callback when user dismisses the suggestion */
+		onDismiss?: () => void
+	}
+
+	let { suggestion, label, dismissed = false, onAccept, onDismiss }: Props = $props()
+
+	// Format the suggestion for display
+	const displayValue = $derived(() => {
+		if (suggestion === null || suggestion === undefined) return 'None'
+		if (typeof suggestion === 'boolean') return suggestion ? 'Yes' : 'No'
+		return String(suggestion)
+	})
+
+	let isOpen = $state(false)
+</script>
+
+{#if suggestion !== undefined && suggestion !== null && !dismissed}
+	<TooltipBase.Root bind:open={isOpen} openDelay={0} closeDelay={100}>
+		<TooltipBase.Trigger asChild let:builder>
+			<button
+				{...builder}
+				type="button"
+				class="suggestion-badge"
+				aria-label="Wiki suggestion available"
+			>
+				<Icon name="sparkles" size={14} />
+			</button>
+		</TooltipBase.Trigger>
+		<TooltipBase.Content class="suggestion-tooltip" sideOffset={4}>
+			<div class="suggestion-content">
+				{#if label}
+					<span class="suggestion-label">{label}:</span>
+				{/if}
+				<span class="suggestion-value">{displayValue()}</span>
+			</div>
+			<div class="suggestion-actions">
+				{#if onAccept}
+					<button
+						type="button"
+						class="action accept"
+						onclick={() => {
+							onAccept?.()
+							isOpen = false
+						}}
+						title="Accept suggestion"
+					>
+						<Icon name="check" size={14} />
+					</button>
+				{/if}
+				{#if onDismiss}
+					<button
+						type="button"
+						class="action dismiss"
+						onclick={() => {
+							onDismiss?.()
+							isOpen = false
+						}}
+						title="Dismiss suggestion"
+					>
+						<Icon name="x" size={14} />
+					</button>
+				{/if}
+			</div>
+		</TooltipBase.Content>
+	</TooltipBase.Root>
+{/if}
+
+<style lang="scss">
+	@use '$src/themes/layout' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+
+	.suggestion-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: calc($unit * 2.5);
+		height: calc($unit * 2.5);
+		border-radius: 50%;
+		background: linear-gradient(135deg, $wind-text-20 0%, $water-text-20 100%);
+		border: none;
+		cursor: pointer;
+		padding: 0;
+		margin-left: $unit-half;
+		flex-shrink: 0;
+		transition: transform 0.15s ease, box-shadow 0.15s ease;
+
+		&:hover {
+			transform: scale(1.1);
+			box-shadow: 0 0 8px rgba($wind-text-20, 0.5);
+		}
+
+		:global(svg) {
+			color: white;
+		}
+	}
+
+	:global(.suggestion-tooltip) {
+		background: var(--tooltip-bg, #2a2a2a);
+		color: var(--tooltip-text, white);
+		padding: $unit;
+		border-radius: $item-corner;
+		font-size: $font-small;
+		z-index: 1000;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+		min-width: 120px;
+	}
+
+	.suggestion-content {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-fourth;
+	}
+
+	.suggestion-label {
+		font-size: calc($font-small * 0.9);
+		color: $grey-50;
+		font-weight: $normal;
+	}
+
+	.suggestion-value {
+		font-weight: $medium;
+		color: white;
+		word-break: break-word;
+	}
+
+	.suggestion-actions {
+		display: flex;
+		gap: $unit-half;
+		justify-content: flex-end;
+		padding-top: $unit-half;
+		border-top: 1px solid rgba(white, 0.1);
+	}
+
+	.action {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: calc($unit * 3.5);
+		height: calc($unit * 3.5);
+		border-radius: $item-corner-small;
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+
+		&.accept {
+			background: $wind-text-20;
+			color: white;
+
+			&:hover {
+				background: $wind-text-10;
+			}
+		}
+
+		&.dismiss {
+			background: $grey-60;
+			color: white;
+
+			&:hover {
+				background: $grey-50;
+			}
+		}
+	}
+</style>
diff --git a/src/lib/components/ui/SuggestionDetailItem.svelte b/src/lib/components/ui/SuggestionDetailItem.svelte
new file mode 100644
index 00000000..925bf103
--- /dev/null
+++ b/src/lib/components/ui/SuggestionDetailItem.svelte
@@ -0,0 +1,229 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import Input from './Input.svelte'
+	import Select from './Select.svelte'
+	import Checkbox from './checkbox/Checkbox.svelte'
+	import SuggestionBadge from './SuggestionBadge.svelte'
+
+	interface SelectOption {
+		value: string | number
+		label: string
+		disabled?: boolean
+	}
+
+	let {
+		label,
+		sublabel,
+		value = $bindable(),
+		children,
+		editable = false,
+		type = 'text',
+		options,
+		placeholder,
+		element,
+		onchange,
+		width,
+		// Suggestion props
+		suggestion,
+		suggestionLabel,
+		dismissedSuggestion = false,
+		onAcceptSuggestion,
+		onDismissSuggestion
+	}: {
+		label: string
+		/** Secondary label displayed below the main label */
+		sublabel?: string
+		value?: string | number | boolean | null | undefined
+		children?: Snippet
+		editable?: boolean
+		type?: 'text' | 'number' | 'select' | 'checkbox'
+		options?: SelectOption[]
+		placeholder?: string
+		element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
+		/** Callback for checkbox type when value changes */
+		onchange?: (checked: boolean) => void
+		/** Custom width for the input field (e.g., '320px') */
+		width?: string
+		// Suggestion props
+		/** The suggested value from wiki */
+		suggestion?: string | number | boolean | null | undefined
+		/** Label for the suggestion tooltip */
+		suggestionLabel?: string
+		/** Whether the suggestion has been dismissed */
+		dismissedSuggestion?: boolean
+		/** Callback when user accepts the suggestion */
+		onAcceptSuggestion?: () => void
+		/** Callback when user dismisses the suggestion */
+		onDismissSuggestion?: () => void
+	} = $props()
+
+	// For checkbox type, derive the checked state from value
+	const checkboxValue = $derived(type === 'checkbox' ? Boolean(value) : false)
+
+	// Handle checkbox change and call onchange if provided
+	function handleCheckboxChange(checked: boolean) {
+		value = checked as any
+		onchange?.(checked)
+	}
+
+	// Show suggestion badge when:
+	// 1. We have a suggestion
+	// 2. The suggestion hasn't been dismissed
+	// 3. The current value is different from the suggestion (or value is empty)
+	const showSuggestion = $derived(
+		suggestion !== undefined &&
+			suggestion !== null &&
+			!dismissedSuggestion &&
+			(value === undefined || value === null || value === '' || value !== suggestion)
+	)
+
+	// Format suggestion for display in badge
+	const formattedSuggestion = $derived(() => {
+		if (type === 'select' && options && suggestion !== undefined && suggestion !== null) {
+			const opt = options.find((o) => o.value === suggestion)
+			return opt?.label ?? suggestion
+		}
+		return suggestion
+	})
+</script>
+
+<div class="detail-item" class:editable class:hasChildren={!!children}>
+	<div class="label-container">
+		<div class="label-row">
+			<span class="label">{label}</span>
+			{#if editable && showSuggestion}
+				<SuggestionBadge
+					suggestion={formattedSuggestion()}
+					label={suggestionLabel || label}
+					dismissed={dismissedSuggestion}
+					onAccept={onAcceptSuggestion}
+					onDismiss={onDismissSuggestion}
+				/>
+			{/if}
+		</div>
+		{#if sublabel}
+			<span class="sublabel">{sublabel}</span>
+		{/if}
+	</div>
+	{#if editable}
+		<div class="edit-value" style:--custom-width={width}>
+			{#if type === 'select' && options}
+				<Select
+					bind:value={value as string | number | undefined}
+					{options}
+					{placeholder}
+					size="medium"
+					contained
+				/>
+			{:else if type === 'checkbox'}
+				<Checkbox
+					checked={checkboxValue}
+					onCheckedChange={handleCheckboxChange}
+					contained
+					{element}
+				/>
+			{:else if type === 'number'}
+				<Input
+					bind:value
+					type="number"
+					variant="number"
+					contained={true}
+					{placeholder}
+					alignRight={true}
+				/>
+			{:else}
+				<Input bind:value type="text" contained={true} {placeholder} alignRight={false} />
+			{/if}
+		</div>
+	{:else if children}
+		<div class="value" class:edit-value={editable}>
+			{@render children()}
+		</div>
+	{:else}
+		<span class="value">{value || '—'}</span>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/colors' as colors;
+	@use '$src/themes/layout' as layout;
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+
+	.detail-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: spacing.$unit 0;
+		border-radius: layout.$item-corner;
+		font-size: typography.$font-regular;
+		min-height: calc(spacing.$unit * 5);
+
+		&:not(.editable) {
+			padding: spacing.$unit;
+			margin: 0 calc(spacing.$unit * -1);
+		}
+
+		&:hover:not(.editable):not(.hasChildren) {
+			background: colors.$grey-90;
+		}
+
+		&.editable:focus-within,
+		&.hasChildren:focus-within {
+			background: var(--input-bg-hover);
+		}
+
+		&.editable,
+		&.hasChildren {
+			background: var(--input-bg);
+		}
+
+		.label-container {
+			display: flex;
+			flex-direction: column;
+			flex-shrink: 0;
+			margin-right: spacing.$unit-2x;
+			gap: spacing.$unit-fourth;
+		}
+
+		.label-row {
+			display: flex;
+			align-items: center;
+		}
+
+		.label {
+			font-weight: typography.$medium;
+			color: colors.$grey-50;
+		}
+
+		.sublabel {
+			font-size: typography.$font-small;
+			color: colors.$grey-60;
+			font-weight: typography.$normal;
+		}
+
+		.value {
+			color: colors.$grey-30;
+			display: flex;
+			align-items: center;
+		}
+
+		.edit-value {
+			flex: 1;
+			display: flex;
+			flex-grow: 0;
+			justify-content: flex-end;
+
+			:global(.input),
+			:global(.select) {
+				width: var(--custom-width, 240px);
+			}
+
+			:global(.input.number) {
+				width: var(--custom-width, 120px);
+			}
+		}
+	}
+</style>
diff --git a/src/lib/features/database/import/TabbedEntitySelector.svelte b/src/lib/features/database/import/TabbedEntitySelector.svelte
new file mode 100644
index 00000000..9b9435f7
--- /dev/null
+++ b/src/lib/features/database/import/TabbedEntitySelector.svelte
@@ -0,0 +1,175 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import Icon from '$lib/components/Icon.svelte'
+
+	export interface EntityTab {
+		wikiPage: string
+		granblueId?: string
+		status: 'loading' | 'success' | 'error'
+		imageUrl: string
+		error?: string
+		saved?: boolean
+	}
+
+	interface Props {
+		entities: EntityTab[]
+		selectedWikiPage: string | null
+		onSelect: (wikiPage: string) => void
+		entityType: 'character' | 'weapon' | 'summon'
+	}
+
+	let { entities, selectedWikiPage, onSelect, entityType }: Props = $props()
+
+	// Get placeholder image based on entity type
+	const placeholderImage = $derived(() => {
+		switch (entityType) {
+			case 'character':
+				return '/images/placeholders/placeholder-character-grid.png'
+			case 'weapon':
+				return '/images/placeholders/placeholder-weapon-grid.png'
+			case 'summon':
+				return '/images/placeholders/placeholder-summon-sub.png'
+		}
+	})
+</script>
+
+<div class="entity-selector">
+	{#each entities as entity}
+		<button
+			type="button"
+			class="entity-tab"
+			class:selected={entity.wikiPage === selectedWikiPage}
+			class:error={entity.status === 'error'}
+			class:loading={entity.status === 'loading'}
+			class:saved={entity.saved}
+			onclick={() => onSelect(entity.wikiPage)}
+			title={entity.error || entity.wikiPage}
+			disabled={entity.saved}
+		>
+			<img
+				src={entity.granblueId ? entity.imageUrl : placeholderImage()}
+				alt={entity.wikiPage}
+				class="entity-image"
+				class:placeholder={!entity.granblueId}
+			/>
+
+			{#if entity.status === 'loading'}
+				<span class="status-overlay loading">
+					<Icon name="loader-2" size={20} />
+				</span>
+			{:else if entity.status === 'error'}
+				<span class="status-overlay error">
+					<Icon name="alert-circle" size={20} />
+				</span>
+			{:else if entity.saved}
+				<span class="status-overlay saved">
+					<Icon name="check" size={20} />
+				</span>
+			{/if}
+		</button>
+	{/each}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/layout' as *;
+	@use '$src/themes/effects' as *;
+
+	.entity-selector {
+		display: flex;
+		flex-wrap: wrap;
+		gap: $unit;
+		padding: $unit-2x;
+		background: $grey-95;
+		border-radius: $card-corner;
+	}
+
+	.entity-tab {
+		position: relative;
+		width: 80px;
+		height: 80px;
+		padding: 0;
+		border: 2px solid transparent;
+		border-radius: $item-corner;
+		background: $grey-90;
+		cursor: pointer;
+		overflow: hidden;
+		transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
+
+		&:hover:not(:disabled) {
+			transform: scale(1.05);
+			border-color: $grey-60;
+		}
+
+		&.selected {
+			border-color: $water-text-20;
+			box-shadow: 0 0 8px rgba($water-text-20, 0.3);
+		}
+
+		&.error {
+			border-color: $error;
+			opacity: 0.7;
+		}
+
+		&.saved {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+
+	.entity-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+
+		&.placeholder {
+			opacity: 0.3;
+		}
+	}
+
+	.status-overlay {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		border-radius: 50%;
+		background: rgba(black, 0.7);
+
+		&.loading {
+			color: white;
+
+			:global(svg) {
+				animation: spin 1s linear infinite;
+			}
+		}
+
+		&.error {
+			color: $error;
+		}
+
+		&.saved {
+			color: $wind-text-20;
+			background: rgba($wind-text-20, 0.2);
+		}
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>