From 4de27f7ae32bee9668ec028d2d45b8da7e25afb7 Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Sun, 10 May 2026 13:05:09 +0100
Subject: [PATCH] fix: replace inline symbolic characters with Lucide icons

---
 .../bismuth-web/src/routes/about/+page.svelte | 22 ++++++++++++++-----
 .../src/lib/components/Footer.svelte          |  6 ++++-
 .../src/lib/components/ProjectCard.svelte     |  3 ++-
 .../jasper-web/src/routes/about/+page.svelte  |  4 ++--
 .../jasper-web/src/routes/import/+page.svelte |  9 +++++---
 .../landing-ui/src/lib/LandingPage.svelte     |  6 ++---
 .../src/lib/components/steps/AuthStep.svelte  |  8 +++----
 .../src/lib/components/steps/FilesStep.svelte |  6 ++---
 .../lib/components/steps/OptionsStep.svelte   | 10 +++++----
 .../src/lib/components/steps/RunStep.svelte   |  5 +++--
 .../src/routes/about/+page.svelte             | 13 +++++++----
 .../src/routes/import/+page.svelte            |  5 +++--
 .../opal-web/src/routes/about/+page.svelte    |  6 ++---
 .../opal-web/src/routes/import/+page.svelte   | 11 +++++-----
 .../src/lib/components/LinkList.svelte        |  2 +-
 .../src/lib/components/StatusGrid.svelte      |  2 +-
 16 files changed, 74 insertions(+), 44 deletions(-)

diff --git a/packages/bismuth-web/src/routes/about/+page.svelte b/packages/bismuth-web/src/routes/about/+page.svelte
index 7f77ad0..08f58f7 100644
--- a/packages/bismuth-web/src/routes/about/+page.svelte
+++ b/packages/bismuth-web/src/routes/about/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Check, X } from '@lucide/svelte';
+	import { ArrowLeft, Check, ExternalLink, Heart, X } from '@lucide/svelte';
 </script>
 
 <svelte:head>
@@ -29,7 +29,7 @@
 </svelte:head>
 
 <main>
-	<a href="/" class="back">← Back</a>
+	<a href="/" class="back inline-flex items-center gap-1"><ArrowLeft size={13} /> Back</a>
 
 	<h1>About Bismuth</h1>
 
@@ -231,11 +231,23 @@ pnpm start input.json --dry-run</code></pre>
 	</section>
 
 	<footer>
-		<a href="https://github.com/ewanc26/pkgs/tree/main/packages/bismuth" target="_blank"
-			rel="noopener">↗ View on GitHub</a
+		<a
+			href="https://github.com/ewanc26/pkgs/tree/main/packages/bismuth"
+			target="_blank"
+			rel="noopener"
+			class="inline-flex items-center gap-1"
 		>
+			<ExternalLink size={13} /> View on GitHub
+		</a>
 		<span class="sep">·</span>
-		<a href="https://ko-fi.com/ewancroft" target="_blank" rel="noopener">♥ Support Bismuth</a>
+		<a
+			href="https://ko-fi.com/ewancroft"
+			target="_blank"
+			rel="noopener"
+			class="inline-flex items-center gap-1"
+		>
+			<Heart size={13} /> Support Bismuth
+		</a>
 	</footer>
 </main>
 
diff --git a/packages/croft-click/src/lib/components/Footer.svelte b/packages/croft-click/src/lib/components/Footer.svelte
index d8bc628..619e45e 100644
--- a/packages/croft-click/src/lib/components/Footer.svelte
+++ b/packages/croft-click/src/lib/components/Footer.svelte
@@ -1,5 +1,9 @@
+<script lang="ts">
+	import { ExternalLink } from '@lucide/svelte';
+</script>
+
 <footer>
-	<a href="https://github.com/ewanc26/pkgs" target="_blank" rel="noopener">↗ source</a>
+	<a href="https://github.com/ewanc26/pkgs" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><ExternalLink size={12} /> source</a>
 	<span class="sep">·</span>
 	<span>by Ewan Croft</span>
 </footer>
diff --git a/packages/croft-click/src/lib/components/ProjectCard.svelte b/packages/croft-click/src/lib/components/ProjectCard.svelte
index eee2512..bcf778c 100644
--- a/packages/croft-click/src/lib/components/ProjectCard.svelte
+++ b/packages/croft-click/src/lib/components/ProjectCard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Project } from '$lib/data/projects';
 	import BrowserChrome from './BrowserChrome.svelte';
+	import { ArrowRight } from '@lucide/svelte';
 
 	let { project }: { project: Project } = $props();
 </script>
@@ -19,7 +20,7 @@
 		</a>
 		<h2>{project.heading}</h2>
 		<p>{project.description}</p>
-		<a href={project.url} class="card-link" rel="noopener">{project.slug}.croft.click →</a>
+		<a href={project.url} class="card-link inline-flex items-center gap-1" rel="noopener">{project.slug}.croft.click <ArrowRight size={12} /></a>
 	</div>
 </div>
 
diff --git a/packages/jasper-web/src/routes/about/+page.svelte b/packages/jasper-web/src/routes/about/+page.svelte
index ea15a77..2623c6f 100644
--- a/packages/jasper-web/src/routes/about/+page.svelte
+++ b/packages/jasper-web/src/routes/about/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Check, X } from '@lucide/svelte';
+	import { Check, X, Menu } from '@lucide/svelte';
 </script>
 
 <svelte:head>
@@ -98,7 +98,7 @@
 		<li>
 			<span class="step-num">2</span>
 			<div>
-				<p>Tap the menu (☰) → Settings → Accounts Center</p>
+				<p>Tap the menu (<Menu size={14} class="inline-block align-middle" />) → Settings → Accounts Center</p>
 			</div>
 		</li>
 		<li>
diff --git a/packages/jasper-web/src/routes/import/+page.svelte b/packages/jasper-web/src/routes/import/+page.svelte
index 48adb22..4c1acbb 100644
--- a/packages/jasper-web/src/routes/import/+page.svelte
+++ b/packages/jasper-web/src/routes/import/+page.svelte
@@ -25,11 +25,13 @@
 		Upload,
 		Loader2,
 		ArrowRight,
+		ArrowLeft,
 		FolderOpen,
 		Image,
 		AlertTriangle,
 		RotateCcw,
-		Trash2
+		Trash2,
+		ExternalLink
 	} from '@lucide/svelte';
 
 	let step = $state(0);
@@ -771,14 +773,15 @@
 	</div>
 
 	<footer>
-		<a href="/">← Home</a>
+		<a href="/" class="inline-flex items-center gap-1"><ArrowLeft size={14} /> Home</a>
 		<span class="sep">·</span>
 		<a href="/about">About &amp; privacy</a>
 		<span class="sep">·</span>
 		<a
 			href="https://github.com/ewanc26/pkgs/tree/main/packages/jasper"
 			target="_blank"
-			rel="noopener">↗ GitHub</a
+			rel="noopener"
+			class="inline-flex items-center gap-1"><ExternalLink size={14} /> GitHub</a
 		>
 	</footer>
 </main>
diff --git a/packages/landing-ui/src/lib/LandingPage.svelte b/packages/landing-ui/src/lib/LandingPage.svelte
index 90f6f51..590a69a 100644
--- a/packages/landing-ui/src/lib/LandingPage.svelte
+++ b/packages/landing-ui/src/lib/LandingPage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { ArrowRight, Github, Heart, Coffee } from '@lucide/svelte';
+	import { ArrowRight, Github, Heart, Coffee, ExternalLink } from '@lucide/svelte';
 
 type IconComponent = typeof import('@lucide/svelte').ArrowRight;
 type FeatureIcon = IconComponent | string;
@@ -143,9 +143,9 @@ interface Feature {
 	<footer>
 		<a href={aboutHref}>About &amp; privacy</a>
 		<span class="sep">·</span>
-		<a href={githubUrl} target="_blank" rel="noopener">↗ GitHub</a>
+		<a href={githubUrl} target="_blank" rel="noopener" class="inline-flex items-center gap-1"><ExternalLink size={12} /> GitHub</a>
 		<span class="sep">·</span>
-		<a href="https://ko-fi.com/ewancroft" target="_blank" rel="noopener">♥ Support</a>
+		<a href="https://ko-fi.com/ewancroft" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><Heart size={12} /> Support</a>
 	</footer>
 </main>
 
diff --git a/packages/malachite-web/src/lib/components/steps/AuthStep.svelte b/packages/malachite-web/src/lib/components/steps/AuthStep.svelte
index 4b0844b..be86d79 100644
--- a/packages/malachite-web/src/lib/components/steps/AuthStep.svelte
+++ b/packages/malachite-web/src/lib/components/steps/AuthStep.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Eye, EyeOff } from '@lucide/svelte';
+  import { ArrowLeft, ArrowRight, Eye, EyeOff } from '@lucide/svelte';
   import { login } from '$lib/core/auth.js';
   import { signInWithOAuth } from '$lib/core/oauth.js';
   import type { Agent } from '@atproto/api';
@@ -59,7 +59,7 @@
 </script>
 
 <section class="card-section">
-  <button class="back-btn" onclick={onback}>← Back</button>
+  <button class="back-btn inline-flex items-center gap-1" onclick={onback}><ArrowLeft size={13} /> Back</button>
   <h2 class="section-title">Sign in to ATProto</h2>
 
   <div class="tabs">
@@ -94,7 +94,7 @@
         onclick={doOAuth}
         disabled={oauthLoading || !oauthHandle}
       >
-        {#if oauthLoading}<span class="spinner"></span> Redirecting…{:else}Continue with ATProto →{/if}
+        {#if oauthLoading}<span class="spinner"></span> Redirecting…{:else}Continue with ATProto <ArrowRight size={13} />{/if}
       </button>
 
       <p class="oauth-note">
@@ -172,7 +172,7 @@
         onclick={doAuth}
         disabled={authLoading || !handle || !password}
       >
-        {#if authLoading}<span class="spinner"></span> Signing in…{:else}Sign in →{/if}
+        {#if authLoading}<span class="spinner"></span> Signing in…{:else}Sign in <ArrowRight size={13} />{/if}
       </button>
     </div>
   {/if}
diff --git a/packages/malachite-web/src/lib/components/steps/FilesStep.svelte b/packages/malachite-web/src/lib/components/steps/FilesStep.svelte
index 1c9e8ae..ceb846e 100644
--- a/packages/malachite-web/src/lib/components/steps/FilesStep.svelte
+++ b/packages/malachite-web/src/lib/components/steps/FilesStep.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { CheckCircle2, Music2, Disc3 } from '@lucide/svelte';
+  import { ArrowLeft, ArrowRight, CheckCircle2, Music2, Disc3 } from '@lucide/svelte';
 
   let {
     lastfmFiles  = $bindable<File[]>([]),
@@ -37,7 +37,7 @@
 </script>
 
 <section class="card-section">
-  <button class="back-btn" onclick={onback}>← Back</button>
+  <button class="back-btn inline-flex items-center gap-1" onclick={onback}><ArrowLeft size={13} /> Back</button>
   <h2 class="section-title">
     Upload your export{needs.lastfm && needs.spotify ? 's' : ''}
   </h2>
@@ -141,7 +141,7 @@
     {/if}
   </div>
 
-  <button class="btn-primary" onclick={oncontinue} disabled={!canContinue}>Continue →</button>
+  <button class="btn-primary inline-flex items-center gap-1" onclick={oncontinue} disabled={!canContinue}>Continue <ArrowRight size={13} /></button>
 </section>
 
 <style>
diff --git a/packages/malachite-web/src/lib/components/steps/OptionsStep.svelte b/packages/malachite-web/src/lib/components/steps/OptionsStep.svelte
index d9ba39b..3f8608e 100644
--- a/packages/malachite-web/src/lib/components/steps/OptionsStep.svelte
+++ b/packages/malachite-web/src/lib/components/steps/OptionsStep.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { ArrowLeft, ArrowRight } from '@lucide/svelte';
   import type { ImportMode } from '$lib/types.js';
 
   let {
@@ -19,7 +20,7 @@
 </script>
 
 <section class="card-section">
-  <button class="back-btn" onclick={onback}>← Back</button>
+  <button class="back-btn inline-flex items-center gap-1" onclick={onback}><ArrowLeft size={13} /> Back</button>
   <h2 class="section-title">{mode === 'deduplicate' ? 'Deduplication options' : 'Import options'}</h2>
 
   <div class="options">
@@ -81,12 +82,13 @@
     <div class="alert alert-info">Dry run enabled — no records will be written to Teal.</div>
   {/if}
 
-  <button class="btn-primary" onclick={onstartimport}>
+  <button class="btn-primary inline-flex items-center gap-1" onclick={onstartimport}>
     {#if mode === 'deduplicate'}
-      {dryRun ? 'Preview duplicates →' : 'Start deduplication →'}
+      {dryRun ? 'Preview duplicates' : 'Start deduplication'}
     {:else}
-      {dryRun ? 'Preview import →' : 'Start import →'}
+      {dryRun ? 'Preview import' : 'Start import'}
     {/if}
+    <ArrowRight size={13} />
   </button>
 </section>
 
diff --git a/packages/malachite-web/src/lib/components/steps/RunStep.svelte b/packages/malachite-web/src/lib/components/steps/RunStep.svelte
index f6eb8f0..3d2f519 100644
--- a/packages/malachite-web/src/lib/components/steps/RunStep.svelte
+++ b/packages/malachite-web/src/lib/components/steps/RunStep.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { ArrowLeft, Check } from '@lucide/svelte';
   import type { ImportMode, LogEntry } from '$lib/types.js';
   import type { PublishProgress } from '$lib/core/import.js';
 
@@ -119,7 +120,7 @@
           {/if}
         </p>
       {:else}
-        <p class="result-label success">{dryRun ? 'Preview complete' : '✓ Done'}</p>
+        <p class="result-label success inline-flex items-center gap-1">{dryRun ? 'Preview complete' : ''}{dryRun ? '' : ''}{dryRun ? null : ''}{dryRun ? '' : ''}{#if dryRun}Preview complete{:else}<Check size={13} /> Done{/if}</p>
         <p class="result-detail">
           {#if isDedup && dryRun}
             {result.success.toLocaleString()} duplicate(s) would be removed.
@@ -134,7 +135,7 @@
         </p>
       {/if}
     </div>
-    <button class="btn-secondary" onclick={onreset}>← Start over</button>
+    <button class="btn-secondary inline-flex items-center gap-1" onclick={onreset}><ArrowLeft size={13} /> Start over</button>
   {/if}
 </section>
 
diff --git a/packages/malachite-web/src/routes/about/+page.svelte b/packages/malachite-web/src/routes/about/+page.svelte
index 742f351..b70392e 100644
--- a/packages/malachite-web/src/routes/about/+page.svelte
+++ b/packages/malachite-web/src/routes/about/+page.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+  import { ArrowLeft, ExternalLink, Heart } from '@lucide/svelte';
+</script>
+
 <svelte:head>
   <title>About — Malachite</title>
   <meta name="description" content="Privacy policy, CLI usage, rate limit details, credits, and licence information for Malachite." />
@@ -17,7 +21,7 @@
 
 <main>
 
-  <a href="/" class="back">← Back</a>
+  <a href="/" class="back inline-flex items-center gap-1"><ArrowLeft size={13} /> Back</a>
 
   <h1>About Malachite</h1>
 
@@ -230,9 +234,9 @@ pnpm start -i lastfm.csv --dry-run</code></pre>
   </section>
 
   <footer>
-    <a href="https://github.com/ewanc26/pkgs/tree/main/packages/malachite" target="_blank" rel="noopener">↗ View on GitHub</a>
+    <a href="https://github.com/ewanc26/pkgs/tree/main/packages/malachite" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><ExternalLink size={12} /> View on GitHub</a>
     <span class="sep">·</span>
-    <a href="https://ko-fi.com/ewancroft" target="_blank" rel="noopener">♥ Support Malachite</a>
+    <a href="https://ko-fi.com/ewancroft" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><Heart size={12} /> Support Malachite</a>
   </footer>
 
 </main>
@@ -245,7 +249,8 @@ pnpm start -i lastfm.csv --dry-run</code></pre>
   }
 
   .back {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     font-size: 0.8rem;
     color: var(--muted);
     margin-bottom: 2rem;
diff --git a/packages/malachite-web/src/routes/import/+page.svelte b/packages/malachite-web/src/routes/import/+page.svelte
index 9dd69d2..d69e550 100644
--- a/packages/malachite-web/src/routes/import/+page.svelte
+++ b/packages/malachite-web/src/routes/import/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ArrowLeft, ExternalLink } from '@lucide/svelte';
 	import { onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
@@ -261,14 +262,14 @@
 		{/key}
 	</div>
 	<footer>
-		<a href="/">← Home</a>
+		<a href="/" class="inline-flex items-center gap-1"><ArrowLeft size={13} /> Home</a>
 		<span class="sep">·</span>
 		<a href="/about">About &amp; privacy</a>
 		<span class="sep">·</span>
 		<a
 			href="https://github.com/ewanc26/pkgs/tree/main/packages/malachite"
 			target="_blank"
-			rel="noopener">↗ GitHub</a
+			rel="noopener" class="inline-flex items-center gap-1"><ExternalLink size={12} /> GitHub</a
 		>
 	</footer>
 </main>
diff --git a/packages/opal-web/src/routes/about/+page.svelte b/packages/opal-web/src/routes/about/+page.svelte
index 2732b5b..cc01146 100644
--- a/packages/opal-web/src/routes/about/+page.svelte
+++ b/packages/opal-web/src/routes/about/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Check, X } from '@lucide/svelte';
+	import { Check, ExternalLink, Heart, X } from '@lucide/svelte';
 </script>
 
 <svelte:head>
@@ -303,9 +303,9 @@ pnpm start -i tweets.js --dry-run</code></pre>
 	</section>
 
 	<footer>
-		<a href="https://github.com/ewanc26/pkgs/tree/main/packages/opal" target="_blank" rel="noopener">↗ View on GitHub</a>
+		<a href="https://github.com/ewanc26/pkgs/tree/main/packages/opal" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><ExternalLink size={13} /> View on GitHub</a>
 		<span class="sep">·</span>
-		<a href="https://ko-fi.com/ewancroft" target="_blank" rel="noopener">♥ Support Opal</a>
+		<a href="https://ko-fi.com/ewancroft" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><Heart size={13} /> Support Opal</a>
 	</footer>
 </main>
 
diff --git a/packages/opal-web/src/routes/import/+page.svelte b/packages/opal-web/src/routes/import/+page.svelte
index f11391b..f07a478 100644
--- a/packages/opal-web/src/routes/import/+page.svelte
+++ b/packages/opal-web/src/routes/import/+page.svelte
@@ -6,6 +6,7 @@
 	import type { Platform, MicroblogPost, ConvertResult } from '@ewanc26/opal';
 	import { initOAuth, signInWithOAuth } from '$lib/core/oauth.js';
 	import { parseExport, runImport } from '$lib/core/import.js';
+	import { ArrowLeft, ExternalLink } from '@lucide/svelte';
 
 	// ─── persistence keys ────────────────────────────────────────────────────────
 
@@ -237,7 +238,7 @@
 							<p class="error">{authError}</p>
 						{/if}
 						<div class="step-actions">
-							<button class="btn-secondary" onclick={handleBack}>← Back</button>
+							<button class="btn-secondary inline-flex items-center gap-1" onclick={handleBack}><ArrowLeft size={13} /> Back</button>
 						</div>
 					</section>
 				{:else if step === 2}
@@ -269,7 +270,7 @@
 							<p class="error">{importError}</p>
 						{/if}
 						<div class="step-actions">
-							<button class="btn-secondary" onclick={handleBack}>← Back</button>
+							<button class="btn-secondary inline-flex items-center gap-1" onclick={handleBack}><ArrowLeft size={13} /> Back</button>
 						</div>
 					</section>
 				{:else if step === 3}
@@ -307,7 +308,7 @@
 							</div>
 						{/if}
 						<div class="step-actions">
-							<button class="btn-secondary" onclick={handleBack}>← Back</button>
+							<button class="btn-secondary inline-flex items-center gap-1" onclick={handleBack}><ArrowLeft size={13} /> Back</button>
 							<button class="btn-primary" onclick={handleStartImport}>
 								Import {selectedPosts.size} posts
 							</button>
@@ -357,11 +358,11 @@
 	</div>
 
 	<footer>
-		<a href="/">← Home</a>
+		<a href="/" class="inline-flex items-center gap-1"><ArrowLeft size={13} /> Home</a>
 		<span class="sep">·</span>
 		<a href="/about">About &amp; privacy</a>
 		<span class="sep">·</span>
-		<a href="https://github.com/ewanc26/pkgs/tree/main/packages/opal" target="_blank" rel="noopener">↗ GitHub</a>
+		<a href="https://github.com/ewanc26/pkgs/tree/main/packages/opal" target="_blank" rel="noopener" class="inline-flex items-center gap-1"><ExternalLink size={13} /> GitHub</a>
 	</footer>
 </main>
 
diff --git a/packages/pds-landing/src/lib/components/LinkList.svelte b/packages/pds-landing/src/lib/components/LinkList.svelte
index 6bf7290..7c8270e 100644
--- a/packages/pds-landing/src/lib/components/LinkList.svelte
+++ b/packages/pds-landing/src/lib/components/LinkList.svelte
@@ -43,7 +43,7 @@
 	}
 
 	.pds-link-list li::before {
-		content: '→ ';
+		content: '› ';
 		color: var(--pds-color-green);
 	}
 
diff --git a/packages/pds-landing/src/lib/components/StatusGrid.svelte b/packages/pds-landing/src/lib/components/StatusGrid.svelte
index 14f7714..35d3509 100644
--- a/packages/pds-landing/src/lib/components/StatusGrid.svelte
+++ b/packages/pds-landing/src/lib/components/StatusGrid.svelte
@@ -32,7 +32,7 @@
 		const result: KVItem[] = [
 			{
 				key: 'reachable',
-				value: health.reachable ? '✓ online' : '✗ unreachable',
+				value: health.reachable ? 'online' : 'unreachable',
 				status: health.reachable ? 'ok' : 'err'
 			},
 			{
-- 
2.51.2