From 88fcc039dbbe7b9a7c4b328606288fe0ff648a2f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 4 Jan 2026 02:52:12 -0800
Subject: [PATCH] add job grid cell components

- JobIconCell: job portrait thumbnail
- JobTierCell: row tier badge
- JobProficienciesCell: weapon proficiency icons
- JobFeaturesCell: master/ultimate/accessory badges
---
 .../database/cells/JobFeaturesCell.svelte     | 55 +++++++++++++++++++
 .../database/cells/JobIconCell.svelte         | 29 ++++++++++
 .../cells/JobProficienciesCell.svelte         | 26 +++++++++
 .../database/cells/JobTierCell.svelte         | 33 +++++++++++
 4 files changed, 143 insertions(+)
 create mode 100644 src/lib/components/database/cells/JobFeaturesCell.svelte
 create mode 100644 src/lib/components/database/cells/JobIconCell.svelte
 create mode 100644 src/lib/components/database/cells/JobProficienciesCell.svelte
 create mode 100644 src/lib/components/database/cells/JobTierCell.svelte

diff --git a/src/lib/components/database/cells/JobFeaturesCell.svelte b/src/lib/components/database/cells/JobFeaturesCell.svelte
new file mode 100644
index 00000000..b32ce6cf
--- /dev/null
+++ b/src/lib/components/database/cells/JobFeaturesCell.svelte
@@ -0,0 +1,55 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Cell } from 'wx-svelte-grid'
+
+	const { row }: Cell = $props()
+</script>
+
+<div class="features-cell">
+	{#if row.masterLevel}
+		<span class="badge master">Master</span>
+	{/if}
+	{#if row.ultimateMastery}
+		<span class="badge ultimate">Ultimate</span>
+	{/if}
+	{#if row.accessory}
+		<span class="badge accessory">Accessory</span>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/colors' as colors;
+	@use '$src/themes/typography' as typography;
+
+	.features-cell {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 4px;
+		height: 100%;
+	}
+
+	.badge {
+		display: inline-block;
+		padding: 2px 6px;
+		border-radius: 4px;
+		font-size: typography.$font-tiny;
+		font-weight: typography.$medium;
+
+		&.master {
+			background: colors.$yellow;
+			color: white;
+		}
+
+		&.ultimate {
+			background: colors.$dark-bg-00;
+			color: white;
+		}
+
+		&.accessory {
+			background: colors.$blue;
+			color: white;
+		}
+	}
+</style>
diff --git a/src/lib/components/database/cells/JobIconCell.svelte b/src/lib/components/database/cells/JobIconCell.svelte
new file mode 100644
index 00000000..984c259b
--- /dev/null
+++ b/src/lib/components/database/cells/JobIconCell.svelte
@@ -0,0 +1,29 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Cell } from 'wx-svelte-grid'
+	import { getJobIconUrl } from '$lib/utils/jobUtils'
+
+	const { row }: Cell = $props()
+</script>
+
+<div class="image-cell">
+	<img src={getJobIconUrl(row.granblueId)} alt={row.name?.en || ''} class="job-icon" />
+</div>
+
+<style lang="scss">
+	.image-cell {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		padding: 4px;
+	}
+
+	.job-icon {
+		width: auto;
+		height: 32px;
+		object-fit: contain;
+		border-radius: 4px;
+	}
+</style>
diff --git a/src/lib/components/database/cells/JobProficienciesCell.svelte b/src/lib/components/database/cells/JobProficienciesCell.svelte
new file mode 100644
index 00000000..d069dc43
--- /dev/null
+++ b/src/lib/components/database/cells/JobProficienciesCell.svelte
@@ -0,0 +1,26 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Cell } from 'wx-svelte-grid'
+	import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte'
+
+	const { row }: Cell = $props()
+</script>
+
+<div class="proficiencies-cell">
+	{#if row.proficiency?.[0]}
+		<ProficiencyLabel proficiency={row.proficiency[0]} size="small" />
+	{/if}
+	{#if row.proficiency?.[1]}
+		<ProficiencyLabel proficiency={row.proficiency[1]} size="small" />
+	{/if}
+</div>
+
+<style lang="scss">
+	.proficiencies-cell {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		height: 100%;
+	}
+</style>
diff --git a/src/lib/components/database/cells/JobTierCell.svelte b/src/lib/components/database/cells/JobTierCell.svelte
new file mode 100644
index 00000000..86527ae6
--- /dev/null
+++ b/src/lib/components/database/cells/JobTierCell.svelte
@@ -0,0 +1,33 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import type { Cell } from 'wx-svelte-grid'
+	import { getJobTierName } from '$lib/utils/jobUtils'
+
+	const { row }: Cell = $props()
+	const tierName = $derived(getJobTierName(row.row))
+</script>
+
+<div class="tier-cell">
+	<span class="tier-badge">{tierName}</span>
+</div>
+
+<style lang="scss">
+	@use '$src/themes/colors' as colors;
+	@use '$src/themes/typography' as typography;
+
+	.tier-cell {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+
+	.tier-badge {
+		display: inline-block;
+		padding: 2px 8px;
+		background: colors.$grey-90;
+		border-radius: 4px;
+		font-size: typography.$font-small;
+		color: colors.$grey-30;
+	}
+</style>