From 16b54eae997ea3466ec2b41b436733c89138fb34 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Thu, 9 Jul 2026 11:41:57 +0100
Subject: [PATCH] web: use lucide icons in footer

Signed-off-by: oppiliappan <me@oppi.li>
---
 flake.nix                                     |   1 +
 .../lib/components/home/MarketingHome.svelte  |   2 +-
 web/src/lib/components/shell/Footer.svelte    | 182 +++---------------
 3 files changed, 33 insertions(+), 152 deletions(-)

diff --git a/flake.nix b/flake.nix
index d0ca393b..8dc7bd62 100644
--- a/flake.nix
+++ b/flake.nix
@@ -372,6 +372,7 @@
             pkgs.e2fsprogs
             pkgs.util-linux
             pkgs.pnpm
+            pkgs.nodejs
           ]
           ++ pkgs.lib.optionals pkgs.stdenv.isLinux [
             pkgs.parted
diff --git a/web/src/lib/components/home/MarketingHome.svelte b/web/src/lib/components/home/MarketingHome.svelte
index 625cc4f1..c6eb38f9 100644
--- a/web/src/lib/components/home/MarketingHome.svelte
+++ b/web/src/lib/components/home/MarketingHome.svelte
@@ -48,7 +48,7 @@
 <section class="overflow-hidden px-6 pb-24 pt-28 md:pb-32 md:pt-36">
 	<div class="mx-auto grid max-w-screen-xl grid-cols-1 items-center gap-14 md:grid-cols-2">
 		<h1
-			class="text-6xl font-bold leading-[0.98] tracking-[-0.05em] text-fg-strong md:text-7xl lg:text-8xl"
+			class="text-6xl font-bold text-fg-strong md:text-7xl lg:text-8xl"
 		>
 			tightly-knit<br />social coding.
 		</h1>
diff --git a/web/src/lib/components/shell/Footer.svelte b/web/src/lib/components/shell/Footer.svelte
index c7ca7dec..1192915d 100644
--- a/web/src/lib/components/shell/Footer.svelte
+++ b/web/src/lib/components/shell/Footer.svelte
@@ -1,6 +1,16 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import LogotypeSmall from '../ui/LogotypeSmall.svelte';
+	import FileText from '$icon/file-text';
+	import Shield from '$icon/shield';
+	import BookOpen from '$icon/book-open';
+	import Book from '$icon/book';
+	import Code from '$icon/code';
+	import Paintbrush from '$icon/paintbrush';
+	import MessageCircle from '$icon/message-circle';
+	import Hash from '$icon/hash';
+	import Mail from '$icon/mail';
+	import ShieldCheck from '$icon/shield-check';
 
 	interface Props {
 		variant?: 'full' | 'minimal';
@@ -164,136 +174,24 @@
 
 {#snippet footerIcon(icon: FooterIcon)}
 	{#if icon === 'terms'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
-			<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-			<path d="M10 9H8" />
-			<path d="M16 13H8" />
-			<path d="M16 17H8" />
-		</svg>
+		<FileText class="size-4 shrink-0" />
 	{:else if icon === 'privacy'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path
-				d="M20 13c0 5-3.5 7.5-7.66 9.7a1 1 0 0 1-.68 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 .76-.97l8-2a1 1 0 0 1 .48 0l8 2c.47.12.76.54.76.97Z"
-			/>
-		</svg>
+		<Shield class="size-4 shrink-0" />
 	{:else if icon === 'blog'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-			<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-		</svg>
+		<BookOpen class="size-4 shrink-0" />
 	{:else if icon === 'docs'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path
-				d="M4 19.5V15a2 2 0 0 1 2-2h2M20 19.5V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2z"
-			/>
-		</svg>
+		<Book class="size-4 shrink-0" />
 	{:else if icon === 'source'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<polyline points="16 18 22 12 16 6" />
-			<polyline points="8 6 2 12 8 18" />
-		</svg>
+		<Code class="size-4 shrink-0" />
 	{:else if icon === 'brand'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
-			<path
-				d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z"
-			/>
-			<path
-				d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5 10 5.172 10 6s.672 1.5 1.5 1.5z"
-			/>
-			<path
-				d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z"
-			/>
-			<path d="M6 14c0-2 2-3 4-3 2.5 0 4.5 1.5 4.5 3.5S12.5 18 10 18c-2.5 0-4-2-4-4z" />
-		</svg>
+		<Paintbrush class="size-4 shrink-0" />
 	{:else if icon === 'discord'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
-		</svg>
+		<MessageCircle class="size-4 shrink-0" />
 	{:else if icon === 'irc'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<line x1="4" y1="9" x2="20" y2="9" />
-			<line x1="4" y1="15" x2="20" y2="15" />
-			<line x1="10" y1="3" x2="8" y2="21" />
-			<line x1="16" y1="3" x2="14" y2="21" />
-		</svg>
+		<Hash class="size-4 shrink-0" />
 	{:else if icon === 'bluesky'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke-dasharray="none"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path d="M12 21a9 9 0 0 0 9-9 9 9 0 0 0-9-9 9 9 0 0 0-9 9 9 9 0 0 0 9 9Z" />
-			<path d="M12 12c2-3 5-3 5 0s-3 3-5 0Zm0 0c-2-3-5-3-5 0s3 3 5 0Z" />
+		<svg class="size-4 shrink-0" viewBox="-3 -3 30 30" fill="none" stroke="currentColor" stroke-width="2.25">
+			<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
 		</svg>
 	{:else if icon === 'twitter'}
 		<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="currentColor">
@@ -302,33 +200,9 @@
 			/>
 		</svg>
 	{:else if icon === 'email'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<rect width="20" height="16" x="2" y="4" rx="2" />
-			<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
-		</svg>
+		<Mail class="size-4 shrink-0" />
 	{:else if icon === 'security'}
-		<svg
-			class="size-4 shrink-0"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path
-				d="M20 13c0 5-3.5 7.5-7.66 9.7a1 1 0 0 1-.68 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 .76-.97l8-2a1 1 0 0 1 .48 0l8 2c.47.12.76.54.76.97Z"
-			/>
-			<path d="m9 12 2 2 4-4" />
-		</svg>
+		<ShieldCheck class="size-4 shrink-0" />
 	{/if}
 {/snippet}
 
@@ -414,20 +288,26 @@
 							</a>
 						</div>
 
-						<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4 md:gap-2">
+						<div class="grid grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-4 md:gap-2">
 							{#each footerSections as section (section.title)}
 								<div class="flex flex-col gap-1">
 									<div class={mobileHeaderStyle}>{section.title}</div>
 									{#each section.links as link (link.href)}
 										{#if link.internal}
-											<a href={appPath(link.href)} class={linkStyle}>{link.label}</a>
+											<a href={appPath(link.href)} class={linkStyle}>
+												{@render footerIcon(link.icon)}
+												<span>{link.label}</span>
+											</a>
 										{:else}
 											<a
 												href={link.href}
 												class={linkStyle}
 												target={linkTarget(link, 'mobile')}
-												rel="external noopener noreferrer">{link.label}</a
+												rel="external noopener noreferrer"
 											>
+												{@render footerIcon(link.icon)}
+												<span>{link.label}</span>
+											</a>
 										{/if}
 									{/each}
 								</div>
-- 
2.51.2