From 32c48801806f3b85df4124c780da56231268eab4 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 15 Dec 2025 12:48:51 -0800
Subject: [PATCH] refactor character section components

- move series from taxonomy to metadata section
- rename uncap label to "Uncap Level"
- show all uncap flags in view mode
---
 .../sections/CharacterMetadataSection.svelte  |  83 ++++-
 .../sections/CharacterTaxonomySection.svelte  |  27 --
 .../sections/CharacterUncapSection.svelte     | 304 +++++++++---------
 3 files changed, 231 insertions(+), 183 deletions(-)

diff --git a/src/lib/features/database/characters/sections/CharacterMetadataSection.svelte b/src/lib/features/database/characters/sections/CharacterMetadataSection.svelte
index 1355fe51..7f5f3f6e 100644
--- a/src/lib/features/database/characters/sections/CharacterMetadataSection.svelte
+++ b/src/lib/features/database/characters/sections/CharacterMetadataSection.svelte
@@ -7,9 +7,10 @@
   import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
   import CopyableText from '$lib/components/ui/CopyableText.svelte'
   import Select from '$lib/components/ui/Select.svelte'
+  import MultiSelect from '$lib/components/ui/MultiSelect.svelte'
   import { getRarityLabel, getRarityOptions } from '$lib/utils/rarity'
   import { getWeaponImage } from '$lib/utils/images'
-  import { CHARACTER_SEASON_NAMES, getSeasonName } from '$lib/types/enums'
+  import { CHARACTER_SEASON_NAMES, CHARACTER_SERIES_NAMES, getSeasonName, getSeriesNames } from '$lib/types/enums'
 
   interface Props {
     character: any
@@ -43,10 +44,36 @@
     }))
   ]
 
+  // Series options for multiselect
+  const seriesOptions = Object.entries(CHARACTER_SERIES_NAMES).map(([value, label]) => ({
+    value: Number(value),
+    label
+  }))
+
   function formatPromotions(promotionNames: string[] | undefined): string {
     if (!promotionNames || promotionNames.length === 0) return '—'
     return promotionNames.join(', ')
   }
+
+  // Format series for display - use API-provided seriesNames if available
+  function formatSeriesDisplay(): string {
+    // Use pre-computed seriesNames from API if available
+    if (character.seriesNames && character.seriesNames.length > 0) {
+      return character.seriesNames.join(', ')
+    }
+    // Fallback for legacy integer array
+    if (Array.isArray(character.series) && character.series.length > 0) {
+      const first = character.series[0]
+      if (typeof first === 'number') {
+        return getSeriesNames(character.series as number[]).join(', ')
+      }
+      // CharacterSeriesRef[] - extract names
+      return (character.series as Array<{ name: { en?: string } }>)
+        .map((s) => s.name?.en || 'Unknown')
+        .join(', ')
+    }
+    return '—'
+  }
 </script>
 
 <DetailsContainer title="Metadata">
@@ -62,6 +89,47 @@
       onAcceptSuggestion={() => onAcceptSuggestion?.('rarity', suggestions?.rarity)}
       onDismissSuggestion={() => onDismissSuggestion?.('rarity')}
     />
+    <DetailItem
+      label="Granblue ID"
+      bind:value={editData.granblueId}
+      editable={true}
+      type="text"
+      placeholder="Granblue ID"
+    />
+    <DetailItem
+      label="Character ID"
+      sublabel="Separate multiple IDs with commas"
+      bind:value={editData.characterId}
+      editable={true}
+      type="text"
+      placeholder="Character IDs"
+    />
+    {#if character.recruitedBy}
+      <DetailItem label="Recruited By">
+        <a href="/database/weapons/{character.recruitedBy.granblueId}" class="recruited-by-link">
+          <img
+            src={getWeaponImage(character.recruitedBy.granblueId, 'square')}
+            alt={character.recruitedBy.name.en || 'Recruiting weapon'}
+            class="recruited-by-image"
+          />
+          <span class="recruited-by-name">{character.recruitedBy.name.en}</span>
+        </a>
+      </DetailItem>
+      <DetailItem
+        label="Promotions"
+        sublabel="Gacha pools from recruiting weapon"
+        value={formatPromotions(character.recruitedBy.promotionNames)}
+      />
+    {/if}
+    <DetailItem label="Series" editable={true}>
+      <MultiSelect
+        size="medium"
+        options={seriesOptions}
+        bind:value={editData.series}
+        placeholder="Select series"
+        contained
+      />
+    </DetailItem>
     <DetailItem
       label="Season"
       sublabel="Used to disambiguate characters with the same name"
@@ -74,19 +142,8 @@
         contained
       />
     </DetailItem>
-    <DetailItem
-      label="Character ID"
-      sublabel="Separate multiple IDs with commas"
-      bind:value={editData.characterId}
-      editable={true}
-      type="text"
-      placeholder="Character IDs"
-    />
   {:else}
     <DetailItem label="Rarity" value={getRarityLabel(character.rarity)} />
-    {#if character.season}
-      <DetailItem label="Season" value={getSeasonName(character.season) || '—'} />
-    {/if}
     <DetailItem label="Granblue ID">
       {#if character.granblueId}
         <CopyableText value={character.granblueId} />
@@ -116,6 +173,8 @@
         value={formatPromotions(character.recruitedBy.promotionNames)}
       />
     {/if}
+    <DetailItem label="Series" value={formatSeriesDisplay()} />
+    <DetailItem label="Season" value={getSeasonName(character.season) || '—'} />
   {/if}
 </DetailsContainer>
 
diff --git a/src/lib/features/database/characters/sections/CharacterTaxonomySection.svelte b/src/lib/features/database/characters/sections/CharacterTaxonomySection.svelte
index de46bbb4..b11143ab 100644
--- a/src/lib/features/database/characters/sections/CharacterTaxonomySection.svelte
+++ b/src/lib/features/database/characters/sections/CharacterTaxonomySection.svelte
@@ -5,14 +5,12 @@
 	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
 	import DetailItem from '$lib/components/ui/DetailItem.svelte'
 	import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
-	import MultiSelect from '$lib/components/ui/MultiSelect.svelte'
 	import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
 	import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte'
 	import { getElementOptions } from '$lib/utils/element'
 	import { getRaceLabel, getRaceOptions } from '$lib/utils/race'
 	import { getGenderLabel, getGenderOptions } from '$lib/utils/gender'
 	import { getProficiencyOptions } from '$lib/utils/proficiency'
-	import { CHARACTER_SERIES_NAMES, getSeriesNames } from '$lib/types/enums'
 
 	interface Props {
 		character: any
@@ -39,18 +37,6 @@
 	const raceOptions = getRaceOptions()
 	const genderOptions = getGenderOptions()
 	const proficiencyOptions = getProficiencyOptions()
-
-	// Series options for multiselect
-	const seriesOptions = Object.entries(CHARACTER_SERIES_NAMES).map(([value, label]) => ({
-		value: Number(value),
-		label
-	}))
-
-	// Format series for display
-	function formatSeriesDisplay(series: number[]): string {
-		if (!series || series.length === 0) return '—'
-		return getSeriesNames(series).join(', ')
-	}
 </script>
 
 <DetailsContainer title="Details">
@@ -121,18 +107,6 @@
 			onAcceptSuggestion={() => onAcceptSuggestion?.('proficiency2', suggestions?.proficiency2)}
 			onDismissSuggestion={() => onDismissSuggestion?.('proficiency2')}
 		/>
-		<DetailItem
-			label="Series"
-			editable={true}
-		>
-			<MultiSelect
-				size="medium"
-				options={seriesOptions}
-				bind:value={editData.series}
-				placeholder="Select series"
-				contained
-			/>
-		</DetailItem>
 	{:else}
 		<DetailItem label="Element">
 			<ElementLabel element={character.element} size="medium" />
@@ -146,6 +120,5 @@
 		<DetailItem label="Proficiency 2">
 			<ProficiencyLabel proficiency={character.proficiency?.[1] ?? 0} size="medium" />
 		</DetailItem>
-		<DetailItem label="Series" value={formatSeriesDisplay(character.series)} />
 	{/if}
 </DetailsContainer>
diff --git a/src/lib/features/database/characters/sections/CharacterUncapSection.svelte b/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
index 8e74035a..90f19c98 100644
--- a/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
+++ b/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
@@ -1,166 +1,182 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import type { CharacterSuggestions } from '$lib/api/adapters/entity.adapter'
-  import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
-  import DetailItem from '$lib/components/ui/DetailItem.svelte'
-  import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
-  import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
-  import { getCharacterMaxUncapLevel } from '$lib/utils/uncap'
-  import { getElementLabel } from '$lib/utils/element'
+	import type { CharacterSuggestions } from '$lib/api/adapters/entity.adapter'
+	import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
+	import DetailItem from '$lib/components/ui/DetailItem.svelte'
+	import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
+	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
+	import { getCharacterMaxUncapLevel } from '$lib/utils/uncap'
+	import { getElementLabel } from '$lib/utils/element'
 
-  type ElementName = 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
+	type ElementName = 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
 
-  interface Props {
-    character: any
-    editMode?: boolean
-    editData?: any
-    // Suggestion support for batch import
-    suggestions?: CharacterSuggestions
-    dismissedSuggestions?: Set<string>
-    onAcceptSuggestion?: (field: string, value: any) => void
-    onDismissSuggestion?: (field: string) => void
-    // Callback when editData is modified (for triggering reactivity in parent)
-    onDataChange?: () => void
-  }
+	interface Props {
+		character: any
+		editMode?: boolean
+		editData?: any
+		// Suggestion support for batch import
+		suggestions?: CharacterSuggestions
+		dismissedSuggestions?: Set<string>
+		onAcceptSuggestion?: (field: string, value: any) => void
+		onDismissSuggestion?: (field: string) => void
+		// Callback when editData is modified (for triggering reactivity in parent)
+		onDataChange?: () => void
+	}
 
-  let {
-    character,
-    editMode = false,
-    editData = $bindable(),
-    suggestions,
-    dismissedSuggestions,
-    onAcceptSuggestion,
-    onDismissSuggestion,
-    onDataChange
-  }: Props = $props()
+	let {
+		character,
+		editMode = false,
+		editData = $bindable(),
+		suggestions,
+		dismissedSuggestions,
+		onAcceptSuggestion,
+		onDismissSuggestion,
+		onDataChange
+	}: Props = $props()
 
-  const uncap = $derived(
-    editMode
-      ? { flb: editData.flb, ulb: editData.ulb, transcendence: editData.transcendence }
-      : (character?.uncap ?? {})
-  )
-  const flb = $derived(uncap.flb ?? false)
-  const ulb = $derived(uncap.ulb ?? false)
-  const transcendence = $derived(uncap.transcendence ?? false)
-  const special = $derived(editMode ? editData.special : (character?.special ?? false))
-  const uncapLevel = $derived(getCharacterMaxUncapLevel({ special, uncap }))
-  const transcendenceStage = $derived(transcendence ? 5 : 0)
+	const uncap = $derived(
+		editMode
+			? { flb: editData.flb, ulb: editData.ulb, transcendence: editData.transcendence }
+			: (character?.uncap ?? {})
+	)
+	const flb = $derived(uncap.flb ?? false)
+	const ulb = $derived(uncap.ulb ?? false)
+	const transcendence = $derived(uncap.transcendence ?? false)
+	const special = $derived(editMode ? editData.special : (character?.special ?? false))
+	const uncapLevel = $derived(getCharacterMaxUncapLevel({ special, uncap }))
+	const transcendenceStage = $derived(transcendence ? 5 : 0)
 
-  // Get element name for checkbox theming
-  const elementName = $derived.by((): ElementName | undefined => {
-    const el = editMode ? editData.element : character?.element
-    const label = getElementLabel(el)
-    return label !== '—' && label !== 'Null'
-      ? (label.toLowerCase() as ElementName)
-      : undefined
-  })
+	// Get element name for checkbox theming
+	const elementName = $derived.by((): ElementName | undefined => {
+		const el = editMode ? editData.element : character?.element
+		const label = getElementLabel(el)
+		return label !== '—' && label !== 'Null' ? (label.toLowerCase() as ElementName) : undefined
+	})
 
-  // Auto-check/uncheck uncap levels in hierarchy: Transcendence > ULB > FLB
-  function handleFlbChange(checked: boolean) {
-    if (!checked) {
-      // Unchecking FLB should also uncheck ULB and Transcendence
-      editData.ulb = false
-      editData.transcendence = false
-    }
-    onDataChange?.()
-  }
+	// Auto-check/uncheck uncap levels in hierarchy: Transcendence > ULB > FLB
+	function handleFlbChange(checked: boolean) {
+		if (!checked) {
+			// Unchecking FLB should also uncheck ULB and Transcendence
+			editData.ulb = false
+			editData.transcendence = false
+		}
+		onDataChange?.()
+	}
 
-  function handleUlbChange(checked: boolean) {
-    if (checked && !editData.flb) {
-      // Checking ULB should also check FLB
-      editData.flb = true
-    } else if (!checked) {
-      // Unchecking ULB should also uncheck Transcendence
-      editData.transcendence = false
-    }
-    onDataChange?.()
-  }
+	function handleUlbChange(checked: boolean) {
+		if (checked && !editData.flb) {
+			// Checking ULB should also check FLB
+			editData.flb = true
+		} else if (!checked) {
+			// Unchecking ULB should also uncheck Transcendence
+			editData.transcendence = false
+		}
+		onDataChange?.()
+	}
 
-  function handleTranscendenceChange(checked: boolean) {
-    if (checked) {
-      // Checking Transcendence should also check ULB and FLB
-      if (!editData.ulb) editData.ulb = true
-      if (!editData.flb) editData.flb = true
-    }
-    onDataChange?.()
-  }
+	function handleTranscendenceChange(checked: boolean) {
+		if (checked) {
+			// Checking Transcendence should also check ULB and FLB
+			if (!editData.ulb) editData.ulb = true
+			if (!editData.flb) editData.flb = true
+		}
+		onDataChange?.()
+	}
 
-  function handleSpecialChange(checked: boolean) {
-    if (checked) {
-      // Special characters (Story SRs) don't have standard uncap levels
-      editData.flb = false
-      editData.ulb = false
-      editData.transcendence = false
-    }
-    onDataChange?.()
-  }
+	function handleSpecialChange(checked: boolean) {
+		if (checked) {
+			// Special characters (Story SRs) don't have standard uncap levels
+			editData.flb = false
+			editData.ulb = false
+			editData.transcendence = false
+		}
+		onDataChange?.()
+	}
 </script>
 
 <DetailsContainer title="Uncap">
-  {#if character?.uncap || editMode}
-    <DetailItem label="Uncap">
-      <UncapIndicator
-        type="character"
-        {uncapLevel}
-        {transcendenceStage}
-        {flb}
-        {ulb}
-        {transcendence}
-        {special}
-        editable={false}
-      />
-    </DetailItem>
-  {/if}
+	<DetailItem label="Uncap Level">
+		<UncapIndicator
+			type="character"
+			{uncapLevel}
+			{transcendenceStage}
+			{flb}
+			{ulb}
+			{transcendence}
+			{special}
+			editable={false}
+		/>
+	</DetailItem>
 
-  {#if editMode}
-    <SuggestionDetailItem
-      label="FLB"
-      bind:value={editData.flb}
-      editable={true}
-      type="checkbox"
-      element={elementName}
-      onchange={handleFlbChange}
-      suggestion={suggestions?.flb}
-      dismissedSuggestion={dismissedSuggestions?.has('flb')}
-      onAcceptSuggestion={() => onAcceptSuggestion?.('flb', suggestions?.flb)}
-      onDismissSuggestion={() => onDismissSuggestion?.('flb')}
-    />
-    <SuggestionDetailItem
-      label="ULB"
-      bind:value={editData.ulb}
-      editable={true}
-      type="checkbox"
-      element={elementName}
-      onchange={handleUlbChange}
-      suggestion={suggestions?.ulb}
-      dismissedSuggestion={dismissedSuggestions?.has('ulb')}
-      onAcceptSuggestion={() => onAcceptSuggestion?.('ulb', suggestions?.ulb)}
-      onDismissSuggestion={() => onDismissSuggestion?.('ulb')}
-    />
-    <DetailItem label="Transcendence" bind:value={editData.transcendence} editable={true} type="checkbox" element={elementName} onchange={handleTranscendenceChange} />
-    <div class="special-field">
-      <DetailItem label="Special" bind:value={editData.special} editable={true} type="checkbox" element={elementName} onchange={handleSpecialChange} />
-      <p class="special-note">This is for Story SRs. Don't check this unless something really weird happens.</p>
-    </div>
-  {/if}
+	{#if !editMode}
+		<DetailItem label="FLB" value={flb ? 'Yes' : 'No'} />
+		<DetailItem label="ULB" value={ulb ? 'Yes' : 'No'} />
+		<DetailItem label="Transcendence" value={transcendence ? 'Yes' : 'No'} />
+		<DetailItem label="Special" value={special ? 'Yes' : 'No'} />
+	{:else}
+		<SuggestionDetailItem
+			label="FLB"
+			bind:value={editData.flb}
+			editable={true}
+			type="checkbox"
+			element={elementName}
+			onchange={handleFlbChange}
+			suggestion={suggestions?.flb}
+			dismissedSuggestion={dismissedSuggestions?.has('flb')}
+			onAcceptSuggestion={() => onAcceptSuggestion?.('flb', suggestions?.flb)}
+			onDismissSuggestion={() => onDismissSuggestion?.('flb')}
+		/>
+		<SuggestionDetailItem
+			label="ULB"
+			bind:value={editData.ulb}
+			editable={true}
+			type="checkbox"
+			element={elementName}
+			onchange={handleUlbChange}
+			suggestion={suggestions?.ulb}
+			dismissedSuggestion={dismissedSuggestions?.has('ulb')}
+			onAcceptSuggestion={() => onAcceptSuggestion?.('ulb', suggestions?.ulb)}
+			onDismissSuggestion={() => onDismissSuggestion?.('ulb')}
+		/>
+		<DetailItem
+			label="Transcendence"
+			bind:value={editData.transcendence}
+			editable={true}
+			type="checkbox"
+			element={elementName}
+			onchange={handleTranscendenceChange}
+		/>
+		<div class="special-field">
+			<DetailItem
+				label="Special"
+				bind:value={editData.special}
+				editable={true}
+				type="checkbox"
+				element={elementName}
+				onchange={handleSpecialChange}
+			/>
+			<p class="special-note">
+				This is for Story SRs. Don't check this unless something really weird happens.
+			</p>
+		</div>
+	{/if}
 </DetailsContainer>
 
 <style lang="scss">
-  @use '$src/themes/colors' as colors;
-  @use '$src/themes/spacing' as spacing;
-  @use '$src/themes/typography' as typography;
+	@use '$src/themes/colors' as colors;
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
 
-  .special-field {
-    display: flex;
-    flex-direction: column;
-  }
+	.special-field {
+		display: flex;
+		flex-direction: column;
+	}
 
-  .special-note {
-    font-size: typography.$font-small;
-    color: colors.$grey-50;
-    margin: 0;
-    padding: 0 spacing.$unit spacing.$unit;
-  }
+	.special-note {
+		font-size: typography.$font-small;
+		color: colors.$grey-50;
+		margin: 0;
+		padding-bottom: spacing.$unit;
+	}
 </style>
-