Use bootstrap icons for pinned clips

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">
+                  <i className="bi bi-pin-angle" aria-hidden="true" />
-                    <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>
                 </button>
               </div>
             ))}

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}
           />
         );

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;