From f64576372c37e399062c9880297f0f3b3aae6a32 Mon Sep 17 00:00:00 2001
From: Chris Amow <chris@amow.com>
Date: Mon, 10 Aug 2026 06:10:28 -0500
Subject: [PATCH] Add Font Awesome 7.3.1 and move the tool glyphs onto it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sidebar drew its tool icons with box-drawing characters, which render at the
mercy of whatever font the system picks. Two are converted as the first users of
the icon set: a trend arrow for Trendline, a rule for Price level.

Served from unpkg, matching Vue and Lightweight Charts, and pinned for the same
reason they are — an unpinned icon set is a silent redesign on someone else's
release. cdnjs was the first choice and does not carry 7.3.1 on that path; it
404s, which in a browser shows up only as icons that quietly fail to their
fallback font at zero width. Verified rendering: computed family is
"Font Awesome 7 Free" at 17.5px with glyph content, no failed requests.

Lucide 1.31.0 is the lighter alternative if the weight ever matters — stroke SVGs
that can be inlined, dropping the CDN dependency entirely.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 static/index.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/index.html b/static/index.html
index 44491d3..ffccd2c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -5,6 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>/ES Confluence</title>
   <link rel="stylesheet" href="/static/style.css">
+  <!-- Font Awesome Free 7.3.1, from unpkg like the other two dependencies.
+       Pinned deliberately: an unpinned icon set is a silent redesign on someone
+       else's release. cdnjs 404s on this path — it does not carry 7.3.1. -->
+  <link rel="stylesheet" href="https://unpkg.com/@fortawesome/fontawesome-free@7.3.1/css/all.min.css">
   <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
   <script src="https://unpkg.com/lightweight-charts@5.2.0/dist/lightweight-charts.standalone.production.js"></script>
 </head>
@@ -34,7 +38,7 @@
         <h2>Tools</h2>
         <div class="tool" :class="{armed: armedTool === 'trendline'}">
           <button class="tool-head" @click="armTool('trendline')" :aria-pressed="armedTool === 'trendline'">
-            <span class="tool-glyph">╱</span>Trendline
+            <span class="tool-glyph"><i class="fa-solid fa-arrow-trend-up"></i></span>Trendline
             <span class="tool-state">{{ armedTool === 'trendline' ? 'drag on chart' : '' }}</span>
           </button>
           <div class="tool-body">
@@ -51,7 +55,7 @@
         </div>
         <div class="tool" :class="{armed: armedTool === 'level'}">
           <button class="tool-head" @click="armTool('level')" :aria-pressed="armedTool === 'level'">
-            <span class="tool-glyph">─</span>Price level
+            <span class="tool-glyph"><i class="fa-solid fa-minus"></i></span>Price level
             <span class="tool-state">{{ armedTool === 'level' ? 'click on chart' : '' }}</span>
           </button>
           <div class="tool-body">