From 433dc03ff6bd58b303bf314dc83c536d3ef41b16 Mon Sep 17 00:00:00 2001
From: Codex <codex@local>
Date: Thu, 23 Apr 2026 11:26:46 -0500
Subject: [PATCH] Use bootstrap icons for pinned clips

---
 frontend/src/pages/GamePage.tsx    |  4 +---
 frontend/src/pages/GamedayPage.tsx |  8 +++++++-
 frontend/src/styles.css            | 12 ++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/GamePage.tsx b/frontend/src/pages/GamePage.tsx
index 9b8385d..4fd5b52 100644
--- a/frontend/src/pages/GamePage.tsx
+++ b/frontend/src/pages/GamePage.tsx
@@ -203,9 +203,7 @@ export function GamePage() {
                   aria-label="Unpin clip"
                   title="Unpin clip"
                 >
-                  <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-                    <path d="M9.828.722a1 1 0 0 1 1.415 0l3.535 3.535a1 1 0 0 1 0 1.415l-1.06 1.06a1 1 0 0 1-1.414 0l-2.03-2.03-1.75 1.75a1 1 0 0 1-.22.17l-1.74.97-.97 1.74a1 1 0 0 1-.17.22l-3.03 3.03.71.71 3.03-3.03a1 1 0 0 1 .22-.17l1.74-.97 1.75 1.75a1 1 0 0 1 .17.22l.97 1.74 3.03-3.03 1.06 1.06a1 1 0 0 1 0 1.415l-1.06 1.06a1 1 0 0 1-1.415 0l-3.535-3.535a1 1 0 0 1 0-1.415l1.75-1.75-2.03-2.03a1 1 0 0 1 0-1.415z" />
-                  </svg>
+                  <i className="bi bi-pin-angle" aria-hidden="true" />
                 </button>
               </div>
             ))}
diff --git a/frontend/src/pages/GamedayPage.tsx b/frontend/src/pages/GamedayPage.tsx
index f234064..1ae61fa 100644
--- a/frontend/src/pages/GamedayPage.tsx
+++ b/frontend/src/pages/GamedayPage.tsx
@@ -512,7 +512,13 @@ function LibraryClips({
             clip={clip}
             isPlaying={isPlaying}
             onTogglePlayback={() => void onPlayClip(clip)}
-            titleExtras={isPinned ? <span className="badge rounded-pill text-bg-success">Pinned</span> : null}
+            titleExtras={
+              isPinned ? (
+                <span className="clip-status-icon" aria-label="Pinned" title="Pinned">
+                  <i className="bi bi-pin-angle-fill" aria-hidden="true" />
+                </span>
+              ) : null
+            }
             subtitle={isPinned ? <span className="text-body-secondary small">Pinned to this game</span> : null}
           />
         );
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index b71752c..be4081c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -324,6 +324,18 @@ select {
   flex-wrap: wrap;
 }
 
+.clip-status-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #b58900;
+  line-height: 1;
+}
+
+.clip-status-icon .bi {
+  font-size: 0.95rem;
+}
+
 .clip-summary-order-controls {
   display: inline-flex;
   align-items: center;