From 39b1ed9f64757a5c874a6818f0832e06521e4c87 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 1 Dec 2025 02:27:47 -0800
Subject: [PATCH] nav: context-aware New button for database routes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Show "New character/weapon/summon" pill button on database pages
- Keep existing circular + button for team creation elsewhere

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Navigation.svelte | 72 +++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 6cb2b8cb..18fe3e5c 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -64,6 +64,35 @@
 	// Database route detection
 	const isDatabaseRoute = $derived($page.url.pathname.startsWith(localizeHref('/database')))
 
+	// Detect current database entity type
+	const currentDatabaseEntity = $derived.by(() => {
+		const path = $page.url.pathname
+		if (path.startsWith(databaseCharactersHref)) return 'character'
+		if (path.startsWith(databaseWeaponsHref)) return 'weapon'
+		if (path.startsWith(databaseSummonsHref)) return 'summon'
+		return null
+	})
+
+	// Database "New" button config
+	const databaseNewButtonLabel = $derived(
+		currentDatabaseEntity === 'character'
+			? 'New character'
+			: currentDatabaseEntity === 'weapon'
+				? 'New weapon'
+				: currentDatabaseEntity === 'summon'
+					? 'New summon'
+					: 'New'
+	)
+	const databaseNewButtonHref = $derived(
+		currentDatabaseEntity === 'character'
+			? localizeHref('/database/characters/new')
+			: currentDatabaseEntity === 'weapon'
+				? localizeHref('/database/weapons/new')
+				: currentDatabaseEntity === 'summon'
+					? localizeHref('/database/summons/new')
+					: localizeHref('/database')
+	)
+
 	// Function to check if a nav item is selected
 	function isNavSelected(href: string): boolean {
 		const path = $page.url.pathname
@@ -232,17 +261,32 @@
 			</li>
 		</ul>
 	{/if}
-	<Button
-		icon="plus"
-		iconOnly
-		shape="circle"
-		variant="primary"
-		{...(userElement ? { element: userElement } : {})}
-		elementStyle={Boolean(userElement)}
-		class="new-team-button"
-		aria-label="New team"
-		href={newTeamHref}
-	/>
+	{#if isDatabaseRoute}
+		<Button
+			icon="plus"
+			shape="pill"
+			variant="primary"
+			size="small"
+			{...(userElement ? { element: userElement } : {})}
+			elementStyle={Boolean(userElement)}
+			class="new-item-button"
+			href={databaseNewButtonHref}
+		>
+			{databaseNewButtonLabel}
+		</Button>
+	{:else}
+		<Button
+			icon="plus"
+			iconOnly
+			shape="circle"
+			variant="primary"
+			{...(userElement ? { element: userElement } : {})}
+			elementStyle={Boolean(userElement)}
+			class="new-team-button"
+			aria-label="New team"
+			href={newTeamHref}
+		/>
+	{/if}
 </nav>
 
 <!-- Settings Modal -->
@@ -482,6 +526,12 @@
 		// The Button component already handles size, shape, colors, etc.
 	}
 
+	// Style the database "New item" button
+	:global(.new-item-button) {
+		padding-top: spacing.$unit-2x !important;
+		padding-bottom: spacing.$unit-2x !important;
+	}
+
 	// Element-specific SELECTED states for navigation links
 	// Hover states remain the default grey (defined in base styles above)
 	nav.element-wind {