From 43c291327c4fa832014fd25ba8bb3006307c7792 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 1 Dec 2025 02:26:29 -0800
Subject: [PATCH] components: use centralized image URL helpers

---
 src/lib/components/extra/GuidebookUnit.svelte |  5 ++---
 src/lib/components/job/JobSection.svelte      |  3 ++-
 src/lib/components/job/JobSkillItem.svelte    |  7 ++-----
 src/lib/components/job/JobSkillSlot.svelte    |  3 ++-
 .../components/panels/SearchSidebar.svelte    | 16 +++++++++++++---
 .../sidebar/EditWeaponSidebar.svelte          | 13 +++++++------
 .../modifications/MasteryDisplay.svelte       |  3 ++-
 src/lib/utils/jobUtils.ts                     | 19 ++++++++++++++-----
 src/lib/utils/modifiers.ts                    |  7 ++++---
 9 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/extra/GuidebookUnit.svelte b/src/lib/components/extra/GuidebookUnit.svelte
index 605e06f9..c15f84ce 100644
--- a/src/lib/components/extra/GuidebookUnit.svelte
+++ b/src/lib/components/extra/GuidebookUnit.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import type { Party } from '$lib/types/api/party'
+  import { getGuidebookImage } from '$lib/utils/images'
 
   export let item: any | undefined
   export let position: number // 1..3
@@ -22,9 +23,7 @@
   }
 
   function guidebookImageUrl(g?: any): string {
-    const id = g?.granblueId
-    if (!id) return '/images/placeholders/placeholder-weapon-grid.png'
-    return `/images/guidebooks/book_${id}.png`
+    return getGuidebookImage(g?.granblueId)
   }
 
   async function remove() {
diff --git a/src/lib/components/job/JobSection.svelte b/src/lib/components/job/JobSection.svelte
index ea55e390..f0ad67c8 100644
--- a/src/lib/components/job/JobSection.svelte
+++ b/src/lib/components/job/JobSection.svelte
@@ -10,6 +10,7 @@
 		isSkillSlotAvailable,
 		isSkillSlotLocked
 	} from '$lib/utils/jobUtils'
+	import { getAccessoryImage } from '$lib/utils/images'
 	import Icon from '$lib/components/Icon.svelte'
 
 	interface Props {
@@ -155,7 +156,7 @@
 					>
 						{#if accessory}
 							<img
-								src="/images/accessory-square/{accessory.granblueId}.jpg"
+								src={getAccessoryImage(accessory.granblueId)}
 								alt={accessory.name.en}
 								class="accessory-icon"
 							/>
diff --git a/src/lib/components/job/JobSkillItem.svelte b/src/lib/components/job/JobSkillItem.svelte
index 19171f66..392d8c80 100644
--- a/src/lib/components/job/JobSkillItem.svelte
+++ b/src/lib/components/job/JobSkillItem.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { JobSkill } from '$lib/types/api/entities'
 	import { getSkillCategoryName } from '$lib/utils/jobUtils'
+	import { getJobSkillIcon } from '$lib/utils/images'
 
 	interface Props {
 		skill: JobSkill
@@ -13,11 +14,7 @@
 	let { skill, onClick, disabled = false, variant = 'default', onRemove }: Props = $props()
 
 	function getSkillIcon(skill: JobSkill): string {
-		if (skill.slug) {
-			return `/images/job-skills/${skill.slug}.png`
-		}
-		// Fallback if no slug
-		return '/images/job-skills/default.png'
+		return getJobSkillIcon(skill.slug)
 	}
 
 	function getSkillColorClass(skill: JobSkill): string {
diff --git a/src/lib/components/job/JobSkillSlot.svelte b/src/lib/components/job/JobSkillSlot.svelte
index d8e0652f..f3e9e7c8 100644
--- a/src/lib/components/job/JobSkillSlot.svelte
+++ b/src/lib/components/job/JobSkillSlot.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { JobSkill } from '$lib/types/api/entities'
 	import { getSkillCategoryColor } from '$lib/utils/jobUtils'
+	import { getJobSkillIcon } from '$lib/utils/images'
 	import Icon from '$lib/components/Icon.svelte'
 	import Tooltip from '$lib/components/ui/Tooltip.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
@@ -26,7 +27,7 @@
 	}: Props = $props()
 
 	const categoryColor = $derived(skill ? getSkillCategoryColor(skill) : '')
-	const skillIconUrl = $derived(skill?.slug ? `/images/job-skills/${skill.slug}.png` : '')
+	const skillIconUrl = $derived(skill?.slug ? getJobSkillIcon(skill.slug) : '')
 
 	const isEditable = $derived(editable && !locked && available)
 	const isUnavailable = $derived(!available)
diff --git a/src/lib/components/panels/SearchSidebar.svelte b/src/lib/components/panels/SearchSidebar.svelte
index c860ff2e..c98ede42 100644
--- a/src/lib/components/panels/SearchSidebar.svelte
+++ b/src/lib/components/panels/SearchSidebar.svelte
@@ -3,6 +3,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { searchAdapter, type SearchResult } from '$lib/api/adapters'
+  import { getCharacterImage, getWeaponImage, getSummonImage, getPlaceholderImage } from '$lib/utils/images'
 
   interface Props {
     open?: boolean
@@ -182,10 +183,19 @@
   }
 
   function getImageUrl(item: SearchResult): string {
-    if (!item.granblueId) return '/images/placeholders/placeholder-' + type + '.png'
+    const id = item.granblueId
+    if (!id) return getPlaceholderImage(type, 'grid')
 
-    const folder = type === 'weapon' ? 'weapon-grid' : type
-    return `/images/${folder}/${item.granblueId}.jpg`
+    switch (type) {
+      case 'character':
+        return getCharacterImage(id, 'grid', '01')
+      case 'weapon':
+        return getWeaponImage(id, 'grid')
+      case 'summon':
+        return getSummonImage(id, 'grid')
+      default:
+        return getPlaceholderImage(type, 'grid')
+    }
   }
 
   function getItemName(item: SearchResult): string {
diff --git a/src/lib/components/sidebar/EditWeaponSidebar.svelte b/src/lib/components/sidebar/EditWeaponSidebar.svelte
index cf8811a9..027eedd6 100644
--- a/src/lib/components/sidebar/EditWeaponSidebar.svelte
+++ b/src/lib/components/sidebar/EditWeaponSidebar.svelte
@@ -9,6 +9,7 @@
 	import AwakeningSelect from './edit/AwakeningSelect.svelte'
 	import AxSkillSelect from './edit/AxSkillSelect.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
+	import { getElementIcon } from '$lib/utils/images'
 
 	interface Props {
 		weapon: GridWeapon
@@ -78,12 +79,12 @@
 
 	// Element options
 	const elementOptions = [
-		{ value: 1, label: 'Wind', image: '/images/elements/element-wind.png' },
-		{ value: 2, label: 'Fire', image: '/images/elements/element-fire.png' },
-		{ value: 3, label: 'Water', image: '/images/elements/element-water.png' },
-		{ value: 4, label: 'Earth', image: '/images/elements/element-earth.png' },
-		{ value: 5, label: 'Dark', image: '/images/elements/element-dark.png' },
-		{ value: 6, label: 'Light', image: '/images/elements/element-light.png' }
+		{ value: 1, label: 'Wind', image: getElementIcon(1) },
+		{ value: 2, label: 'Fire', image: getElementIcon(2) },
+		{ value: 3, label: 'Water', image: getElementIcon(3) },
+		{ value: 4, label: 'Earth', image: getElementIcon(4) },
+		{ value: 5, label: 'Dark', image: getElementIcon(5) },
+		{ value: 6, label: 'Light', image: getElementIcon(6) }
 	]
 
 	function displayName(input: any): string {
diff --git a/src/lib/components/sidebar/modifications/MasteryDisplay.svelte b/src/lib/components/sidebar/modifications/MasteryDisplay.svelte
index 9cf6ba05..556e328e 100644
--- a/src/lib/components/sidebar/modifications/MasteryDisplay.svelte
+++ b/src/lib/components/sidebar/modifications/MasteryDisplay.svelte
@@ -2,6 +2,7 @@
 	import type { GridCharacter } from '$lib/types/api/party'
 	import { formatRingStat, formatEarringStat } from '$lib/utils/modificationFormatters'
 	import { getRingStat, getElementalizedEarringStat } from '$lib/utils/masteryUtils'
+	import { getMasteryImage } from '$lib/utils/images'
 	import { getLocale } from '$lib/paraglide/runtime.js'
 
 	interface Props {
@@ -29,7 +30,7 @@
 
 		if (!stat || !stat.slug) return null
 
-		return `/images/mastery/${stat.slug}.png`
+		return getMasteryImage(stat.slug)
 	}
 </script>
 
diff --git a/src/lib/utils/jobUtils.ts b/src/lib/utils/jobUtils.ts
index 6c3209a8..2213f1ea 100644
--- a/src/lib/utils/jobUtils.ts
+++ b/src/lib/utils/jobUtils.ts
@@ -7,6 +7,16 @@
 
 import type { Job, JobSkill } from '$lib/types/api/entities'
 import type { JobSkillList } from '$lib/types/api/party'
+import { getImageBaseUrl } from '$lib/api/adapters/config'
+
+/**
+ * Gets the base path for images
+ * Returns AWS S3/CDN URL if configured, otherwise local /images path
+ */
+function getBasePath(): string {
+	const remoteUrl = getImageBaseUrl()
+	return remoteUrl || '/images'
+}
 
 /**
  * Gender options for job portraits
@@ -29,7 +39,7 @@ export function getJobPortraitUrl(job: Job | undefined, gender: Gender = Gender.
 	const slug = job.name.en.toLowerCase().replace(/\s+/g, '-')
 	const genderSuffix = gender === Gender.Djeeta ? 'b' : 'a'
 
-	return `/images/job-portraits/${slug}_${genderSuffix}.png`
+	return `${getBasePath()}/job-portraits/${slug}_${genderSuffix}.png`
 }
 
 /**
@@ -43,20 +53,19 @@ export function getJobFullImageUrl(job: Job | undefined, gender: Gender = Gender
 
 	const genderSuffix = gender === Gender.Djeeta ? 'b' : 'a'
 
-	return `/images/job-zoom/${job.granblueId}_${genderSuffix}.png`
+	return `${getBasePath()}/job-zoom/${job.granblueId}_${genderSuffix}.png`
 }
 
 /**
  * Generate job icon URL
  * Job icons are small square icons representing the job
- * Images are stored locally in /static/images/job-icons/
  */
 export function getJobIconUrl(granblueId: string | undefined): string {
 	if (!granblueId) {
 		return '/images/placeholders/placeholder-weapon-grid.png'
 	}
 
-	return `/images/job-icons/${granblueId}.png`
+	return `${getBasePath()}/job-icons/${granblueId}.png`
 }
 
 /**
@@ -69,7 +78,7 @@ export function getJobWideImageUrl(job: Job | undefined, gender: Gender = Gender
 	}
 
 	const genderSuffix = gender === Gender.Djeeta ? 'b' : 'a'
-	return `/images/job-wide/${job.granblueId}_${genderSuffix}.jpg`
+	return `${getBasePath()}/job-wide/${job.granblueId}_${genderSuffix}.jpg`
 }
 
 /**
diff --git a/src/lib/utils/modifiers.ts b/src/lib/utils/modifiers.ts
index e826480f..3fdc379a 100644
--- a/src/lib/utils/modifiers.ts
+++ b/src/lib/utils/modifiers.ts
@@ -4,6 +4,7 @@
 
 import type { Awakening, WeaponKey } from '$lib/types/api/entities'
 import type { SimpleAxSkill } from '$lib/types/SimpleAxSkill'
+import { getBasePath } from '$lib/utils/images'
 
 /**
  * Get the image URL for an awakening type
@@ -20,7 +21,7 @@ export function getAwakeningImage(awakening?: { type?: Awakening; level?: number
 	const isCharacterAwakening = slug.startsWith('character-')
 	const extension = isCharacterAwakening ? 'jpg' : 'png'
 
-	return `/images/awakening/${slug}.${extension}`
+	return `${getBasePath()}/awakening/${slug}.${extension}`
 }
 
 /**
@@ -35,7 +36,7 @@ export function getWeaponKeyImage(
 ): string {
 	if (!key.slug) return ''
 
-	const baseUrl = '/images/weapon-keys/'
+	const baseUrl = `${getBasePath()}/weapon-keys/`
 	let filename = key.slug
 
 	// Handle element-specific telumas (Draconic weapons)
@@ -97,7 +98,7 @@ export function getWeaponKeyImages(
  */
 export function getAxSkillImage(axSkill?: { slug?: string }): string | null {
 	if (!axSkill?.slug) return null
-	return `/images/ax/${axSkill.slug}.png`
+	return `${getBasePath()}/ax/${axSkill.slug}.png`
 }
 
 /**