Rewrite website as a Hyprland desktop
This commit is contained in:
SirBlob committed
1 parent
7c52779cf6
commit
3065ad6092
197 files changed
+5609
-17779
No files matched your search
@@ -0,0 +1,294 @@
|
||||
<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>
|
||||
Reference in new issue
Block a user