use job mutations and fix skill removal payload

messages/en.json

@@ -17,6 +17,7 @@
 
 	"job_selection_title": "Select Job",
 	"job_selection_search_placeholder": "Search jobs...",
+	"job_choose": "Choose a job",
 
 	"skill_selection_title": "Select Skill",
 	"skill_selection_search_placeholder": "Search skills...",

messages/ja.json

@@ -17,6 +17,7 @@
 
 	"job_selection_title": "ジョブ選択",
 	"job_selection_search_placeholder": "ジョブを検索...",
+	"job_choose": "ジョブを選択",
 
 	"skill_selection_title": "スキル選択",
 	"skill_selection_search_placeholder": "スキルを検索...",

src/lib/api/adapters/party.adapter.ts

@@ -346,7 +346,9 @@ export class PartyAdapter extends BaseAdapter {
 		return this.request<Party>(`/parties/${partyId}/job_skills`, {
 			method: 'DELETE',
 			body: {
-				slot: skillSlot
+				party: {
+					skill_position: skillSlot
+				}
 			}
 		})
 	}

src/lib/components/job/JobSection.svelte

@@ -12,6 +12,8 @@
 	} from '$lib/utils/jobUtils'
 	import { getAccessoryImage, getBasePath } from '$lib/utils/images'
 	import Icon from '$lib/components/Icon.svelte'
+	import Button from '$lib/components/ui/Button.svelte'
+	import * as m from '$lib/paraglide/messages'
 
 	interface Props {
 		job?: Job | undefined
@@ -62,13 +64,8 @@
 		{#if job}
 			<img class="job-portrait" src={jobImageUrl} alt={job.name.en} />
 			<div class="overlay"></div>
-		{:else if canEdit}
+		{:else}
-			<div class="empty-portrait">
+			<div class="empty-portrait"></div>
-				<button class="select-job-button" on:click={onSelectJob}>
-					<Icon name="plus" size={24} />
-					<span>Select Job</span>
-				</button>
-			</div>
 		{/if}
 
 		{#if canEdit && job}
@@ -167,7 +164,11 @@
 			{/if}
 		{:else}
 			<div class="no-job-message" class:readonly={!canEdit}>
-				<p>{canEdit ? 'Select a job to view skills and details' : 'No job selected'}</p>
+				{#if canEdit}
+					<Button onclick={onSelectJob} small>{m.job_choose()}</Button>
+				{:else}
+					<p>No job selected</p>
+				{/if}
 			</div>
 		{/if}
 	</div>
@@ -240,34 +241,9 @@
 		}
 
 		.empty-portrait {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			color: var(--text-secondary);
-			font-size: typography.$font-regular;
 			z-index: 2;
 		}
 
-		.select-job-button {
-			display: flex;
-			align-items: center;
-			gap: spacing.$unit-half;
-			padding: spacing.$unit spacing.$unit-2x;
-			background: var(--button-primary-bg);
-			color: var(--button-primary-text);
-			border: none;
-			border-radius: layout.$card-corner;
-			font-size: typography.$font-regular;
-			font-weight: 500;
-			cursor: pointer;
-			transition: background 0.2s ease;
-
-			&:hover {
-				background: var(--button-primary-bg-hover);
-			}
-		}
-
 		.change-job-button {
 			position: absolute;
 			top: spacing.$unit;

src/lib/components/job/JobSkillSlot.svelte

@@ -63,12 +63,12 @@
 			<Button
 				variant="ghost"
 				icon="close"
-				on:click={handleRemove}
+				onclick={handleRemove}
 				aria-label="Remove skill"
 				type="button"
 				class="remove-button"
 				iconOnly
-			></Button>
+			/>
 		{/if}
 	</div>
 {:else}

src/lib/components/party/Party.svelte

@@ -33,6 +33,13 @@
 		useUnfavoriteParty
 	} from '$lib/api/mutations/party.mutations'
 
+	// TanStack Query mutations - Job
+	import {
+		useUpdatePartyJob,
+		useUpdatePartyJobSkills,
+		useRemovePartyJobSkill
+	} from '$lib/api/mutations/job.mutations'
+
 	// Utilities
 	import { getLocalId } from '$lib/utils/localId'
 	import { getEditKey, storeEditKey, computeEditability } from '$lib/utils/editKeys'
@@ -152,6 +159,11 @@
 	const favoritePartyMutation = useFavoriteParty()
 	const unfavoritePartyMutation = useUnfavoriteParty()
 
+	// TanStack Query mutations - Job
+	const updateJobMutation = useUpdatePartyJob()
+	const updateJobSkillsMutation = useUpdatePartyJobSkills()
+	const removeJobSkillMutation = useRemovePartyJobSkill()
+
 	// Create drag-drop context
 	const dragContext = createDragDropContext({
 		onLocalUpdate: async (operation) => {
@@ -498,9 +510,11 @@
 				error = null
 
 				try {
-					// Update job via API (use shortcode for party identification)
+					// Use mutation for proper cache invalidation
-					await partyAdapter.updateJob(party.shortcode, job.id)
+					await updateJobMutation.mutateAsync({
-					// Party will be updated via cache invalidation
+						shortcode: party.shortcode,
+						jobId: job.id
+					})
 				} catch (e) {
 					error = e instanceof Error ? e.message : 'Failed to update job'
 					console.error('Failed to update job:', e)
@@ -528,18 +542,14 @@
 					const updatedSkills = { ...party.jobSkills }
 					updatedSkills[String(slot) as keyof typeof updatedSkills] = skill
 
-					console.log('[Party] Current jobSkills:', party.jobSkills)
-					console.log('[Party] Updated jobSkills object:', updatedSkills)
-					console.log('[Party] Slot being updated:', slot)
-					console.log('[Party] New skill:', skill)
-
 					// Convert skills object to array format expected by API
 					const skillsArray = transformSkillsToArray(updatedSkills)
 
-					console.log('[Party] Skills array to send:', skillsArray)
+					// Use mutation for proper cache invalidation
-
+					await updateJobSkillsMutation.mutateAsync({
-					await partyAdapter.updateJobSkills(party.shortcode, skillsArray)
+						shortcode: party.shortcode,
-					// Party will be updated via cache invalidation
+						skills: skillsArray
+					})
 				} catch (e: any) {
 					error = extractErrorMessage(e, 'Failed to update skill')
 					console.error('Failed to update skill:', e)
@@ -552,21 +562,11 @@
 				error = null
 
 				try {
-					// Remove skill from slot
+					// Use remove mutation for proper cache invalidation
-					const updatedSkills = { ...party.jobSkills }
+					await removeJobSkillMutation.mutateAsync({
-					delete updatedSkills[String(slot) as keyof typeof updatedSkills]
+						shortcode: party.shortcode,
-
+						slot
-					console.log('[Party] Removing skill from slot:', slot)
+					})
-					console.log('[Party] Current jobSkills:', party.jobSkills)
-					console.log('[Party] Updated jobSkills after removal:', updatedSkills)
-
-					// Convert skills object to array format expected by API
-					const skillsArray = transformSkillsToArray(updatedSkills)
-
-					console.log('[Party] Skills array to send after removal:', skillsArray)
-
-					await partyAdapter.updateJobSkills(party.shortcode, skillsArray)
-					// Party will be updated via cache invalidation
 				} catch (e: any) {
 					error = extractErrorMessage(e, 'Failed to remove skill')
 					console.error('Failed to remove skill:', e)
@@ -585,15 +585,11 @@
 		error = null
 
 		try {
-			// Remove skill from slot
+			// Use remove mutation for proper cache invalidation
-			const updatedSkills = { ...party.jobSkills }
+			await removeJobSkillMutation.mutateAsync({
-			delete updatedSkills[String(slot) as keyof typeof updatedSkills]
+				shortcode: party.shortcode,
-
+				slot
-			// Convert skills object to array format expected by API
+			})
-			const skillsArray = transformSkillsToArray(updatedSkills)
-
-			await partyAdapter.updateJobSkills(party.shortcode, skillsArray)
-			// Party will be updated via cache invalidation
 		} catch (e) {
 			error = e instanceof Error ? e.message : 'Failed to remove skill'
 			console.error('Failed to remove skill:', e)