add jobs to database dropdown menu

src/lib/components/Navigation.svelte

@@ -64,6 +64,7 @@
 	const databaseCharactersHref = $derived(localizeHref('/database/characters'))
 	const databaseWeaponsHref = $derived(localizeHref('/database/weapons'))
 	const databaseSummonsHref = $derived(localizeHref('/database/summons'))
+	const databaseJobsHref = $derived(localizeHref('/database/jobs'))
 	const databaseSeriesHref = $derived(localizeHref('/database/series'))
 	const databaseGwEventsHref = $derived(localizeHref('/database/gw-events'))
 
@@ -79,24 +80,33 @@
 		return null
 	})
 
-	// Database "New" button config
+	// Database "New" dropdown config
-	const databaseNewButtonLabel = $derived(
+	const databaseEntityLabel = $derived(
 		currentDatabaseEntity === 'character'
-			? 'New character'
+			? 'character'
 			: currentDatabaseEntity === 'weapon'
-				? 'New weapon'
+				? 'weapon'
 				: currentDatabaseEntity === 'summon'
-					? 'New summon'
+					? 'summon'
-					: 'New'
+					: null
 	)
-	const databaseNewButtonHref = $derived(
+	const databaseNewHref = $derived(
 		currentDatabaseEntity === 'character'
 			? localizeHref('/database/characters/new')
 			: currentDatabaseEntity === 'weapon'
 				? localizeHref('/database/weapons/new')
 				: currentDatabaseEntity === 'summon'
 					? localizeHref('/database/summons/new')
-					: localizeHref('/database')
+					: null
+	)
+	const databaseImportHref = $derived(
+		currentDatabaseEntity === 'character'
+			? localizeHref('/database/characters/import')
+			: currentDatabaseEntity === 'weapon'
+				? localizeHref('/database/weapons/import')
+				: currentDatabaseEntity === 'summon'
+					? localizeHref('/database/summons/import')
+					: null
 	)
 
 	// Function to check if a nav item is selected
@@ -132,6 +142,9 @@
 	// Invitations modal state
 	let invitationsModalOpen = $state(false)
 
+	// Database back button hover state
+	let databaseBackHovered = $state(false)
+
 	// Query for pending invitations (only when authenticated)
 	const pendingInvitationsQuery = createQuery(() => ({
 		...crewQueries.pendingInvitations(),
@@ -163,16 +176,22 @@
 	{#if isDatabaseRoute}
 		<!-- Database navigation mode -->
 		<div class="database-nav">
-			<!-- Back button and Database label -->
+			<!-- Back button -->
 			<ul role="list" class="database-back-section">
 				<li>
-					<a href={galleryHref} class="database-back-button" aria-label="Back to gallery">
+					<a
+						href={galleryHref}
+						class="database-back-button"
+						aria-label="Back to gallery"
+						onmouseenter={() => (databaseBackHovered = true)}
+						onmouseleave={() => (databaseBackHovered = false)}
+					>
 						<Icon name="arrow-left" size={14} />
+						{#if databaseBackHovered}
+							<span class="database-back-label">Back to site</span>
+						{/if}
 					</a>
 				</li>
-				<li>
-					<span class="database-label">Database</span>
-				</li>
 			</ul>
 
 			<!-- Database sub-navigation -->
@@ -203,6 +222,9 @@
 
 						<DropdownMenu.Portal>
 							<DropdownMenu.Content class="dropdown-content" sideOffset={5}>
+								<DropdownItem>
+									<a href={databaseJobsHref}>Jobs</a>
+								</DropdownItem>
 								<DropdownItem>
 									<a href={databaseSeriesHref}>Series</a>
 								</DropdownItem>
@@ -314,19 +336,28 @@
 			</li>
 		</ul>
 	{/if}
-	{#if isDatabaseRoute}
+	{#if isDatabaseRoute && databaseEntityLabel}
-		<Button
+		<DropdownMenu.Root>
-			icon="plus"
+			<DropdownMenu.Trigger class="new-item-trigger {userElement ?? ''}">
-			shape="pill"
+				<span>New {databaseEntityLabel}</span>
-			variant="primary"
+				<Icon name="chevron-down" size={12} />
-			size="small"
+			</DropdownMenu.Trigger>
-			{...(userElement ? { element: userElement } : {})}
+
-			elementStyle={Boolean(userElement)}
+			<DropdownMenu.Portal>
-			class="new-item-button"
+				<DropdownMenu.Content class="dropdown-content" sideOffset={5} align="end">
-			href={databaseNewButtonHref}
+					{#if databaseNewHref}
-		>
+						<DropdownItem>
-			{databaseNewButtonLabel}
+							<a href={databaseNewHref}>Single {databaseEntityLabel}</a>
-		</Button>
+						</DropdownItem>
+					{/if}
+					{#if databaseImportHref}
+						<DropdownItem>
+							<a href={databaseImportHref}>Multiple {databaseEntityLabel}s</a>
+						</DropdownItem>
+					{/if}
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
 	{:else}
 		<Button
 			icon="plus"
@@ -442,6 +473,7 @@
 
 			.database-back-section {
 				min-height: 49px;
+				min-width: 49px;
 
 				ul {
 					background-color: var(--menu-bg);
@@ -468,20 +500,8 @@
 					}
 				}
 
-				.database-label {
+				.database-back-label {
-					border-radius: layout.$full-corner;
+					margin-left: spacing.$unit-half;
-					color: var(--menu-text);
-					font-size: typography.$font-small;
-					font-weight: typography.$medium;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					padding: spacing.$unit calc(spacing.$unit * 1.5) spacing.$unit spacing.$unit;
-
-					&.selected {
-						background-color: var(--menu-bg-item-selected, var(--menu-bg-item-hover));
-						font-weight: typography.$bold;
-					}
 				}
 			}
 
@@ -610,10 +630,68 @@
 		// The Button component already handles size, shape, colors, etc.
 	}
 
-	// Style the database "New item" button
+	// Style the database "New item" dropdown trigger
-	:global(.new-item-button) {
+	:global(.new-item-trigger) {
-		padding-top: spacing.$unit-2x !important;
+		display: flex;
-		padding-bottom: spacing.$unit-2x !important;
+		align-items: center;
+		gap: spacing.$unit-half;
+		padding: calc(spacing.$unit * 1.5) spacing.$unit-2x;
+		border-radius: layout.$full-corner;
+		background-color: var(--button-primary-bg);
+		color: var(--button-primary-text);
+		border: none;
+		cursor: pointer;
+		font-family: var(--font-family);
+		font-size: typography.$font-small;
+		font-weight: typography.$medium;
+		transition: background-color 0.2s ease;
+	}
+	:global(.new-item-trigger:hover) {
+		background-color: var(--button-primary-bg-hover);
+	}
+
+	// Element-specific colors for new item trigger
+	:global(.new-item-trigger.wind) {
+		background-color: var(--wind-button-bg);
+		color: white;
+	}
+	:global(.new-item-trigger.wind:hover) {
+		background-color: var(--wind-button-bg-hover);
+	}
+	:global(.new-item-trigger.fire) {
+		background-color: var(--fire-button-bg);
+		color: white;
+	}
+	:global(.new-item-trigger.fire:hover) {
+		background-color: var(--fire-button-bg-hover);
+	}
+	:global(.new-item-trigger.water) {
+		background-color: var(--water-button-bg);
+		color: white;
+	}
+	:global(.new-item-trigger.water:hover) {
+		background-color: var(--water-button-bg-hover);
+	}
+	:global(.new-item-trigger.earth) {
+		background-color: var(--earth-button-bg);
+		color: white;
+	}
+	:global(.new-item-trigger.earth:hover) {
+		background-color: var(--earth-button-bg-hover);
+	}
+	:global(.new-item-trigger.light) {
+		background-color: var(--light-button-bg);
+		color: black;
+	}
+	:global(.new-item-trigger.light:hover) {
+		background-color: var(--light-button-bg-hover);
+	}
+	:global(.new-item-trigger.dark) {
+		background-color: var(--dark-button-bg);
+		color: white;
+	}
+	:global(.new-item-trigger.dark:hover) {
+		background-color: var(--dark-button-bg-hover);
 	}
 
 	// Element-specific SELECTED states for navigation links