underline decoration-accent/60 was forcing a permanent underline. The global a:hover rule already handles underline + accent color on hover. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
58 lines
1.7 KiB
Svelte
58 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
|
|
type NotificationDTO = {
|
|
id: string;
|
|
type: 'REPLY' | 'MENTION';
|
|
documentId?: string;
|
|
referenceId?: string;
|
|
annotationId?: string;
|
|
read: boolean;
|
|
createdAt: string;
|
|
actorName?: string;
|
|
};
|
|
|
|
interface Props {
|
|
mentions: NotificationDTO[];
|
|
}
|
|
|
|
let { mentions }: Props = $props();
|
|
</script>
|
|
|
|
{#if mentions.length > 0}
|
|
<div data-testid="dashboard-mentions" class="rounded-sm border border-line bg-surface p-6">
|
|
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
|
|
{m.dashboard_notifications_heading()}
|
|
</h2>
|
|
<div>
|
|
{#each mentions as mention (mention.id)}
|
|
<div class="flex items-center gap-3 border-b border-line py-2 last:border-0">
|
|
{#if mention.documentId}
|
|
<a
|
|
href={mention.annotationId
|
|
? `/documents/${mention.documentId}?commentId=${mention.referenceId}&annotationId=${mention.annotationId}`
|
|
: `/documents/${mention.documentId}?commentId=${mention.referenceId}`}
|
|
class="font-serif text-lg text-ink hover:text-ink-2 hover:underline"
|
|
>{mention.actorName ?? ''}</a
|
|
>
|
|
<span class="font-sans text-xs text-gray-400">
|
|
{mention.type === 'MENTION'
|
|
? m.dashboard_notification_mentioned()
|
|
: m.dashboard_notification_replied()}
|
|
</span>
|
|
{:else}
|
|
<span class="font-serif text-lg text-ink">{mention.actorName ?? ''}</span>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="mt-4 border-t border-line pt-4">
|
|
<a
|
|
href="/notifications"
|
|
class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
|
|
>{m.notification_history_view_link()}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
{/if}
|