granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make phantom row clickable, link to crew profile

Browse source
This commit is contained in:
Justin Edmund 2025-12-18 18:15:35 -08:00
parent 154eed2311
commit 3ec31434aa
1 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/lib/components/crew/PhantomRow.svelte
View file

@ -1,6 +1,7 @@
<svelte:options runes={true} /> <svelte:options runes={true} />
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'
import Button from '$lib/components/ui/Button.svelte' import Button from '$lib/components/ui/Button.svelte'
import DropdownMenu from '$lib/components/ui/DropdownMenu.svelte' import DropdownMenu from '$lib/components/ui/DropdownMenu.svelte'
import { DropdownMenu as DropdownMenuBase } from 'bits-ui' import { DropdownMenu as DropdownMenuBase } from 'bits-ui'
@ -40,14 +41,16 @@
</script> </script>
<li class="phantom-row" class:retired={phantom.retired}> <li class="phantom-row" class:retired={phantom.retired}>
<div class="phantom-info"> <a href="/crew/phantoms/{phantom.id}" class="phantom-link">
<div class="phantom-details"> <div class="phantom-info">
<span class="name">{phantom.name}</span> <div class="phantom-details">
{#if phantom.joinedAt} <span class="name">{phantom.name}</span>
<span class="joined-date">Joined {formatDate(phantom.joinedAt)}</span> {#if phantom.joinedAt}
{/if} <span class="joined-date">Joined {formatDate(phantom.joinedAt)}</span>
{/if}
</div>
</div> </div>
</div> </a>
<div class="phantom-actions"> <div class="phantom-actions">
{#if claimStatus === 'unclaimed'} {#if claimStatus === 'unclaimed'}
@ -65,6 +68,12 @@
<Button variant="ghost" size="small" iconOnly icon="ellipsis" {...props} /> <Button variant="ghost" size="small" iconOnly icon="ellipsis" {...props} />
{/snippet} {/snippet}
{#snippet menu()} {#snippet menu()}
<DropdownMenuBase.Item
class="dropdown-menu-item"
onclick={() => goto(`/crew/phantoms/${phantom.id}`)}
>
View crew profile
</DropdownMenuBase.Item>
{#if onEdit} {#if onEdit}
<DropdownMenuBase.Item class="dropdown-menu-item" onclick={onEdit}> <DropdownMenuBase.Item class="dropdown-menu-item" onclick={onEdit}>
Edit Edit
@ -110,7 +119,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: spacing.$unit spacing.$unit spacing.$unit spacing.$unit-2x;
border-radius: layout.$item-corner; border-radius: layout.$item-corner;
transition: background-color 0.15s; transition: background-color 0.15s;
@ -123,6 +131,15 @@
} }
} }
.phantom-link {
flex: 1;
display: flex;
align-items: center;
padding: spacing.$unit spacing.$unit spacing.$unit spacing.$unit-2x;
text-decoration: none;
color: inherit;
}
.phantom-info { .phantom-info {
display: flex; display: flex;
align-items: center; align-items: center;
@ -150,6 +167,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: spacing.$unit; gap: spacing.$unit;
padding-right: spacing.$unit;
} }
.claim-buttons { .claim-buttons {