feat: replace PGP modal with Discord profile modal

- Remove PGP key modal component in favor of dedicated /pgp page - Add Discord profile modal with avatar, banner, and copy username - Convert PGP key link to navigate to dedicated page instead of modal - Add focus-visible styles for keyboard navigation accessibility
2026-01-31 10:26:52 -06:00 · 2026-01-12 04:10:45 -06:00
parent 6f538b599f
commit 97bef535a3
7 changed files with 220 additions and 208 deletions
@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { fade, scale } from "svelte/transition";
+  import IconCopy from "~icons/material-symbols/content-copy-rounded";
+  import IconCheck from "~icons/material-symbols/check-rounded";
+
+  interface Props {
+    open: boolean;
+    username: string;
+    avatarUrl?: string;
+    bannerUrl?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    username,
+    avatarUrl = "https://cdn.discordapp.com/avatars/184118083143598081/798e497f55abdcadbd8440e5eed551a0.png?size=4096",
+    bannerUrl = "https://cdn.discordapp.com/banners/184118083143598081/174425460b67261a124d873b016e038f.png?size=4096",
+  }: Props = $props();
+
+  let copySuccess = $state(false);
+  let avatarFailed = $state(false);
+  let bannerFailed = $state(false);
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      open = false;
+    }
+  }
+
+  function handleClose() {
+    open = false;
+  }
+
+  async function copyUsername() {
+    try {
+      await navigator.clipboard.writeText(username);
+      copySuccess = true;
+      setTimeout(() => {
+        copySuccess = false;
+      }, 2000);
+    } catch (err) {
+      console.error("Failed to copy username:", err);
+    }
+  }
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-50 flex items-start justify-center bg-black/30 backdrop-blur-[2px] p-4 pt-[15vh]"
+    onclick={handleBackdropClick}
+    onkeydown={(e) => e.key === "Escape" && handleClose()}
+    role="presentation"
+    tabindex="-1"
+    transition:fade={{ duration: 200 }}
+  >
+    <!-- SCALE: Adjust the scale() value to resize entire modal proportionally -->
+    <div
+      class="relative w-full max-w-md rounded-xl bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 shadow-lg overflow-hidden scale-110 origin-top"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="discord-profile-title"
+      transition:scale={{ duration: 200, start: 0.95 }}
+    >
+      <!-- Banner -->
+      {#if bannerUrl && !bannerFailed}
+        <img
+          src={bannerUrl}
+          alt=""
+          class="h-28 w-full object-cover"
+          onerror={() => (bannerFailed = true)}
+        />
+      {:else}
+        <div
+          class="h-28 bg-linear-to-br from-zinc-300 to-zinc-400 dark:from-zinc-700 dark:to-zinc-800"
+        ></div>
+      {/if}
+
+      <!-- Content area -->
+      <div class="px-5 pb-5">
+        <!-- Avatar with stroke effect -->
+        <div class="relative -mt-14 mb-3 w-fit">
+          <!-- Stroke ring (larger circle behind avatar) -->
+          <!-- SIZE: avatar (96px) + stroke (4px * 2) = 104px -->
+          <!-- POSITION: -m-1 centers the stroke ring behind the avatar -->
+          <div
+            class="absolute inset-0 -m-1 rounded-full bg-zinc-100 dark:bg-zinc-900"
+            style="width: 104px; height: 104px;"
+          ></div>
+
+          <!-- Avatar circle -->
+          <!-- SIZE: size-24 = 96px -->
+          {#if avatarUrl && !avatarFailed}
+            <img
+              src={avatarUrl}
+              alt="Profile avatar"
+              class="relative size-24 rounded-full object-cover"
+              onerror={() => (avatarFailed = true)}
+            />
+          {:else}
+            <div
+              class="relative size-24 rounded-full bg-linear-to-br from-zinc-400 to-zinc-500 dark:from-zinc-500 dark:to-zinc-600"
+            ></div>
+          {/if}
+
+          <!-- Online indicator -->
+          <!-- POSITION: bottom/right values place center on avatar circumference -->
+          <!-- For 96px avatar at 315° (bottom-right): ~4px from edge -->
+          <div
+            class="absolute size-5 rounded-full bg-green-500 border-[3px] border-zinc-100 dark:border-zinc-900"
+            style="bottom: 2px; right: 2px;"
+          ></div>
+        </div>
+
+        <!-- Profile info -->
+        <!-- SPACING: mb-4 controls gap before About Me section -->
+        <div class="mb-4">
+          <h2
+            id="discord-profile-title"
+            class="text-xl font-bold text-zinc-900 dark:text-zinc-100"
+          >
+            Xevion
+          </h2>
+          <!-- USERNAME ROW: gap-1.5 controls spacing between elements -->
+          <div class="flex items-center gap-1.5 text-sm">
+            <span class="font-mono text-xs px-1.5 py-0.5 rounded border border-zinc-300 dark:border-zinc-700 bg-zinc-200/50 dark:bg-zinc-800/50 text-zinc-600 dark:text-zinc-400">{username}</span>
+            <button
+              onclick={copyUsername}
+              class="p-0.5 rounded hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors"
+              title={copySuccess ? "Copied!" : "Copy username"}
+            >
+              {#if copySuccess}
+                <IconCheck
+                  class="size-3.5 text-green-600 dark:text-green-500"
+                />
+              {:else}
+                <IconCopy class="size-3.5 text-zinc-400 dark:text-zinc-500" />
+              {/if}
+            </button>
+            <span class="text-zinc-400 dark:text-zinc-500">·</span>
+            <span class="text-zinc-500 dark:text-zinc-400">any/they</span>
+          </div>
+        </div>
+
+        <!-- About Me section -->
+        <div
+          class="p-3 rounded-lg bg-zinc-200/50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700"
+        >
+          <h3
+            class="text-xs font-semibold uppercase text-zinc-500 dark:text-zinc-500 mb-1"
+          >
+            About Me
+          </h3>
+          <p class="text-sm text-zinc-700 dark:text-zinc-300">
+            Live with dignity.<br />
+            <a
+              href="https://xevion.dev"
+              class="text-blue-600 dark:text-blue-400 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer">https://xevion.dev</a
+            >
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}