website/src/lib/components/shell/DiscordPopover.svelte

<script lang="ts">
	import Icon from '@iconify/svelte';
	import { activityLabels, type DiscordPresence } from '#lib/discord/types';

	let { presence, onclose }: { presence: DiscordPresence; onclose: () => void } = $props();

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape') onclose();
	}
</script>

<svelte:window onkeydown={handleKeydown} />

<button class="backdrop" aria-label="Close Discord status" onclick={onclose}></button>
<div class="popover" role="dialog" aria-label="Discord status">
	<div class="popover-surface">
		<header class="profile">
			<div class="avatar">
				{#if presence.avatarUrl}
					<img src={presence.avatarUrl} alt="" />
				{:else}
					<Icon icon="mdi:account-circle" width="52" />
				{/if}
				<span class="avatar-dot {presence.status}"></span>
			</div>
			<div class="identity">
				<div class="name-row">
					<span class="name">{presence.displayName}</span>
					{#if presence.guildTag}
						<span class="guild-tag">
							{#if presence.guildTagBadgeUrl}
								<img src={presence.guildTagBadgeUrl} alt="" />
							{/if}
							{presence.guildTag}
						</span>
					{/if}
				</div>
				<span class="status-label">{presence.status}</span>
			</div>
			<button class="close" aria-label="Close" onclick={onclose}>
				<Icon icon="mdi:close" width="18" />
			</button>
		</header>

		{#if presence.activities.length}
			<div class="activities">
				{#each presence.activities as activity, index (index)}
					<div class="activity">
						<div class="activity-label">{activityLabels[activity.type] ?? ''}</div>
						<div class="activity-body">
							{#if activity.largeImage}
								<div class="activity-images">
									<img class="large-image" src={activity.largeImage} alt="" />
									{#if activity.smallImage}
										<img class="small-image" src={activity.smallImage} alt="" />
									{/if}
								</div>
							{/if}
							<div class="activity-text">
								<span class="activity-name">{activity.name}</span>
								{#if activity.details}
									<span class="activity-details">{activity.details}</span>
								{/if}
							</div>
						</div>
					</div>
				{/each}
			</div>
		{:else}
			<div class="no-activity">
				<Icon icon="mdi:sleep" width="28" />
				<span>No current activity</span>
			</div>
		{/if}
	</div>
</div>

<style>
	.backdrop {
		position: fixed;
		inset: 0;
		z-index: 40;
		background: none;
		border: none;
		cursor: default;
	}

	.popover {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		z-index: 50;
		width: 340px;
		padding: var(--border-size);
		background: var(--border-active);
		animation: window-pop-in 0.15s ease-out;
	}

	.popover-surface {
		background: var(--background);
	}

	.profile {
		display: flex;
		align-items: center;
		gap: 0.9rem;
		padding: 1rem;
		background: color-mix(in srgb, var(--accent) 8%, var(--background));
	}

	.avatar {
		position: relative;
		flex-shrink: 0;
		width: 52px;
		height: 52px;
		color: var(--muted);
	}

	.avatar img {
		width: 52px;
		height: 52px;
		border-radius: 50%;
		object-fit: cover;
	}

	.avatar-dot {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 15px;
		height: 15px;
		border: 3px solid color-mix(in srgb, var(--accent) 8%, var(--background));
		border-radius: 50%;
		background: var(--muted);
	}

	.avatar-dot.online {
		background: var(--green);
	}

	.avatar-dot.idle {
		background: var(--yellow);
	}

	.avatar-dot.dnd {
		background: var(--red);
	}

	.identity {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 0.2rem;
		min-width: 0;
	}

	.name-row {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		min-width: 0;
	}

	.name {
		overflow: hidden;
		font-size: 1.1rem;
		font-weight: 700;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.guild-tag {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		gap: 0.35rem;
		padding: 0.1rem 0.5rem;
		background: color-mix(in srgb, var(--accent) 12%, transparent);
		border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
		color: var(--accent);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.guild-tag img {
		width: 16px;
		height: 16px;
	}

	.status-label {
		color: var(--muted);
	}

	.close {
		align-self: flex-start;
		padding: 0.15rem;
		background: none;
		border: none;
	}

	.close:hover {
		color: var(--accent);
	}

	.activities {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.75rem;
	}

	.activity {
		padding: 0.75rem;
		background: var(--lighter-background);
	}

	.activity-label {
		margin-bottom: 0.5rem;
		color: var(--muted);
		font-size: 0.75rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.activity-body {
		display: flex;
		gap: 0.75rem;
	}

	.activity-images {
		position: relative;
		flex-shrink: 0;
	}

	.large-image {
		width: 64px;
		height: 64px;
		object-fit: cover;
	}

	.small-image {
		position: absolute;
		right: -5px;
		bottom: -5px;
		width: 26px;
		height: 26px;
		border: 3px solid var(--lighter-background);
		border-radius: 50%;
	}

	.activity-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.2rem;
		min-width: 0;
	}

	.activity-name,
	.activity-details {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.activity-name {
		font-weight: 700;
	}

	.activity-details {
		color: var(--muted);
		font-size: 0.85rem;
	}

	.no-activity {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		padding: 1.5rem;
		color: var(--muted);
	}

	@media (max-width: 640px) {
		.popover {
			position: fixed;
			top: calc(var(--bar-height) + 6px);
			right: 8px;
			left: 8px;
			width: auto;
		}
	}
</style>