From bed8ba4008fcfde672cf5eb62ae6adbe6739eaea Mon Sep 17 00:00:00 2001
From: Prad Nukala <prad@sonr.io>
Date: Tue, 30 Jun 2026 21:40:14 -0400
Subject: [PATCH] refactor(ui): migrate to lucide icon set and update styles

---
 src/components/AGENTS.md                       | 2 +-
 src/components/TagList.astro                   | 2 +-
 src/components/blog/webmentions/Comments.astro | 2 +-
 src/components/layout/Footer.astro             | 4 ++--
 src/components/layout/Header.astro             | 2 +-
 src/components/project/Project.astro           | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/AGENTS.md b/src/components/AGENTS.md
index 0290894..f162f44 100644
--- a/src/components/AGENTS.md
+++ b/src/components/AGENTS.md
@@ -38,6 +38,6 @@ Reusable `.astro` components for layout, content rendering, theming, search, and
 ## Dependencies
 
 ### External
-- `astro-icon` (`mdi` icon set) for SVG icons.
+- `astro-icon` for SVG icons — `lucide` for UI icons, `simple-icons` for brand/social logos (`@iconify-json/*` sets). Programming-language logos should use `devicon` (not yet installed — no consumer yet).
 
 <!-- MANUAL: -->
diff --git a/src/components/TagList.astro b/src/components/TagList.astro
index 9501d70..597b23a 100644
--- a/src/components/TagList.astro
+++ b/src/components/TagList.astro
@@ -11,7 +11,7 @@ const { tags, class: className } = Astro.props;
 
 {
 	tags.length > 0 && (
-		<ul class:list={["flex flex-wrap gap-x-3 gap-y-1", className]}>
+		<ul class:list={["flex flex-wrap gap-x-3 gap-y-2", className]}>
 			{tags.map((tag) => (
 				<li>
 					<a
diff --git a/src/components/blog/webmentions/Comments.astro b/src/components/blog/webmentions/Comments.astro
index 838c562..69642a3 100644
--- a/src/components/blog/webmentions/Comments.astro
+++ b/src/components/blog/webmentions/Comments.astro
@@ -71,7 +71,7 @@ const comments = mentions.filter(
 										aria-hidden="true"
 										class="h-5 w-5"
 										focusable="false"
-										name="mdi:open-in-new"
+										name="lucide:external-link"
 									/>
 								</a>
 							</div>
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index 29445c9..9b7904c 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -22,12 +22,12 @@ const year = new Date().getFullYear();
 	</nav>
 
 	{/* Row 2: social icons */}
-	<ul class="flex items-center justify-center gap-x-4">
+	<ul class="flex flex-wrap items-center justify-center gap-1">
 		{
 			socialLinks.map(({ friendlyName, isWebmention, link, name }) => (
 				<li class="flex">
 					<a
-						class="hover:text-link inline-block"
+						class="hover:text-link inline-flex rounded-md p-2 transition-colors"
 						href={link}
 						rel={`me noreferrer ${isWebmention ? "authn" : ""}`}
 						target={link.startsWith("mailto:") ? undefined : "_blank"}
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index d849cd3..09443b6 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -5,7 +5,7 @@ import { menuLinks } from "@/site.config";
 import { siteConfig } from "../../site.config";
 ---
 
-<header class="group relative mb-28 flex items-center sm:ps-28" id="main-header">
+<header class="group relative mb-12 flex items-center sm:mb-28 sm:ps-28" id="main-header">
 	<div class="flex sm:flex-col">
 		<a
 			aria-current={Astro.url.pathname === "/" ? "page" : false}
diff --git a/src/components/project/Project.astro b/src/components/project/Project.astro
index 25d23fd..a94a8c6 100644
--- a/src/components/project/Project.astro
+++ b/src/components/project/Project.astro
@@ -61,7 +61,7 @@ const expEntries = experiences.length ? await getEntries(experiences) : [];
 	</div>
 	{
 		!isPreview && tags.length > 0 && (
-			<TagList tags={tags} class="border-global-text/10 mt-4 border-t pt-3" />
+			<TagList tags={tags} class="border-global-text/10 mt-6 border-t pt-6" />
 		)
 	}
 </article>