add View in Database menu item for admins

messages/en.json

@@ -25,6 +25,7 @@
 	"extra_weapons": "Additional Weapons",
 
 	"context_view_details": "View Details",
+	"context_view_in_database": "View in Database",
 	"context_replace": "Replace",
 	"context_remove": "Remove",
 

messages/ja.json

@@ -25,6 +25,7 @@
 	"extra_weapons": "追加武器",
 
 	"context_view_details": "詳細を見る",
+	"context_view_in_database": "データベースで見る",
 	"context_replace": "交換",
 	"context_remove": "削除",
 

src/lib/components/ui/menu/MenuItems.svelte

@@ -3,22 +3,26 @@
 
 	interface MenuItemsProps {
 		onViewDetails?: (() => void) | undefined
+		onViewInDatabase?: (() => void) | undefined
 		onReplace?: (() => void) | undefined
 		onRemove?: (() => void | Promise<void>) | undefined
 		canEdit?: boolean | undefined
 		variant?: 'context' | 'dropdown'
 		viewDetailsLabel?: string | undefined
+		viewInDatabaseLabel?: string | undefined
 		replaceLabel?: string | undefined
 		removeLabel?: string | undefined
 	}
 
 	let {
 		onViewDetails,
+		onViewInDatabase,
 		onReplace,
 		onRemove,
 		canEdit = false,
 		variant = 'context',
 		viewDetailsLabel = 'View Details',
+		viewInDatabaseLabel = 'View in Database',
 		replaceLabel = 'Replace',
 		removeLabel = 'Remove'
 	}: MenuItemsProps = $props()
@@ -36,6 +40,12 @@
 	</Item>
 {/if}
 
+{#if onViewInDatabase}
+	<Item class={itemClass} onclick={onViewInDatabase}>
+		{viewInDatabaseLabel}
+	</Item>
+{/if}
+
 {#if canEdit}
 	{#if onReplace}
 		<Item class={itemClass} onclick={onReplace}>

src/lib/components/units/CharacterUnit.svelte

@@ -2,6 +2,8 @@
 	import type { GridCharacter } from '$lib/types/api/party'
 	import type { Party } from '$lib/types/api/party'
 	import { getContext } from 'svelte'
+	import { page } from '$app/stores'
+	import { goto } from '$app/navigation'
 	import Icon from '$lib/components/Icon.svelte'
 	import UnitMenuContainer from '$lib/components/ui/menu/UnitMenuContainer.svelte'
 	import MenuItems from '$lib/components/ui/menu/MenuItems.svelte'
@@ -128,6 +130,14 @@
 		}
 	}
 
+	function viewInDatabase() {
+		if (!item?.character?.granblueId) return
+		goto(`/database/characters/${item.character.granblueId}`)
+	}
+
+	// Check if user can view database (role >= 7)
+	let canViewDatabase = $derived(($page.data.account?.role ?? 0) >= 7)
+
 	async function togglePerpetuity(e: Event) {
 		e.stopPropagation()
 		if (!item?.id || !ctx?.canEdit()) return
@@ -224,11 +234,13 @@
 			{#snippet contextMenu()}
 				<MenuItems
 					onViewDetails={viewDetails}
+					onViewInDatabase={canViewDatabase ? viewInDatabase : undefined}
 					onReplace={ctx?.canEdit() ? replace : undefined}
 					onRemove={ctx?.canEdit() ? remove : undefined}
 					canEdit={ctx?.canEdit()}
 					variant="context"
 					viewDetailsLabel={m.context_view_details()}
+					viewInDatabaseLabel={m.context_view_in_database()}
 					replaceLabel={m.context_replace()}
 					removeLabel={m.context_remove()}
 				/>
@@ -237,11 +249,13 @@
 			{#snippet dropdownMenu()}
 				<MenuItems
 					onViewDetails={viewDetails}
+					onViewInDatabase={canViewDatabase ? viewInDatabase : undefined}
 					onReplace={ctx?.canEdit() ? replace : undefined}
 					onRemove={ctx?.canEdit() ? remove : undefined}
 					canEdit={ctx?.canEdit()}
 					variant="dropdown"
 					viewDetailsLabel={m.context_view_details()}
+					viewInDatabaseLabel={m.context_view_in_database()}
 					replaceLabel={m.context_replace()}
 					removeLabel={m.context_remove()}
 				/>

src/lib/components/units/SummonUnit.svelte

@@ -2,6 +2,8 @@
   import type { GridSummon } from '$lib/types/api/party'
   import type { Party } from '$lib/types/api/party'
   import { getContext } from 'svelte'
+  import { page } from '$app/stores'
+  import { goto } from '$app/navigation'
   import Icon from '$lib/components/Icon.svelte'
   import UnitMenuContainer from '$lib/components/ui/menu/UnitMenuContainer.svelte'
   import MenuItems from '$lib/components/ui/menu/MenuItems.svelte'
@@ -102,6 +104,13 @@
     }
   }
 
+  function viewInDatabase() {
+    if (!item?.summon?.granblueId) return
+    goto(`/database/summons/${item.summon.granblueId}`)
+  }
+
+  // Check if user can view database (role >= 7)
+  let canViewDatabase = $derived(($page.data.account?.role ?? 0) >= 7)
 
 </script>
 
@@ -134,11 +143,13 @@
       {#snippet contextMenu()}
         <MenuItems
           onViewDetails={viewDetails}
+          onViewInDatabase={canViewDatabase ? viewInDatabase : undefined}
           onReplace={ctx?.canEdit() ? replace : undefined}
           onRemove={ctx?.canEdit() ? remove : undefined}
           canEdit={ctx?.canEdit()}
           variant="context"
           viewDetailsLabel={m.context_view_details()}
+          viewInDatabaseLabel={m.context_view_in_database()}
           replaceLabel={m.context_replace()}
           removeLabel={m.context_remove()}
         />
@@ -147,11 +158,13 @@
       {#snippet dropdownMenu()}
         <MenuItems
           onViewDetails={viewDetails}
+          onViewInDatabase={canViewDatabase ? viewInDatabase : undefined}
           onReplace={ctx?.canEdit() ? replace : undefined}
           onRemove={ctx?.canEdit() ? remove : undefined}
           canEdit={ctx?.canEdit()}
           variant="dropdown"
           viewDetailsLabel={m.context_view_details()}
+          viewInDatabaseLabel={m.context_view_in_database()}
           replaceLabel={m.context_replace()}
           removeLabel={m.context_remove()}
         />

src/lib/components/units/WeaponUnit.svelte

@@ -2,6 +2,8 @@
 	import type { GridWeapon } from '$lib/types/api/party'
 	import type { Party } from '$lib/types/api/party'
 	import { getContext } from 'svelte'
+	import { page } from '$app/stores'
+	import { goto } from '$app/navigation'
 	import Icon from '$lib/components/Icon.svelte'
 	import UnitMenuContainer from '$lib/components/ui/menu/UnitMenuContainer.svelte'
 	import MenuItems from '$lib/components/ui/menu/MenuItems.svelte'
@@ -135,6 +137,14 @@
 			ctx.openPicker({ type: 'weapon', position, item })
 		}
 	}
+
+	function viewInDatabase() {
+		if (!item?.weapon?.granblueId) return
+		goto(`/database/weapons/${item.weapon.granblueId}`)
+	}
+
+	// Check if user can view database (role >= 7)
+	let canViewDatabase = $derived(($page.data.account?.role ?? 0) >= 7)
 </script>
 
 <div
@@ -193,11 +203,13 @@
 			{#snippet contextMenu()}
 				<MenuItems
 					onViewDetails={viewDetails}
+					onViewInDatabase={canViewDatabase ? viewInDatabase : undefined}
 					onReplace={ctx?.canEdit() ? replace : undefined}
 					onRemove={ctx?.canEdit() ? remove : undefined}
 					canEdit={ctx?.canEdit()}
 					variant="context"
 					viewDetailsLabel={m.context_view_details()}
+					viewInDatabaseLabel={m.context_view_in_database()}
 					replaceLabel={m.context_replace()}
 					removeLabel={m.context_remove()}
 				/>
@@ -206,11 +218,13 @@
 			{#snippet dropdownMenu()}
 				<MenuItems
 					onViewDetails={viewDetails}
+					onViewInDatabase={canViewDatabase ? viewInDatabase : undefined}
 					onReplace={ctx?.canEdit() ? replace : undefined}
 					onRemove={ctx?.canEdit() ? remove : undefined}
 					canEdit={ctx?.canEdit()}
 					variant="dropdown"
 					viewDetailsLabel={m.context_view_details()}
+					viewInDatabaseLabel={m.context_view_in_database()}
 					replaceLabel={m.context_replace()}
 					removeLabel={m.context_remove()}
 				/>