From cb7ecbd3f7e58a3d4e5edc40f85c1425bdd8606d Mon Sep 17 00:00:00 2001
From: Max Amundsen <max@cdrateline.com>
Date: Thu, 5 Mar 2026 12:12:26 -0500
Subject: [PATCH] Add svg icons for play pause etc

---
 src/main.cpp        | 14 ++++----------
 src/ui/ui_icons.cpp | 22 ++++++++++++++++++++++
 src/ui/ui_icons.h   |  4 ++++
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/main.cpp b/src/main.cpp
index 1afce2c..8b77a9c 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -1022,7 +1022,7 @@ static void build_header_bar(AppState *app) {
                 },
                 .backgroundColor = g_theme.bg_lighter,
                 .cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS),
-            ) { CLAY_TEXT(CLAY_STRING("<<"), &g_text_config_dim); }
+            ) { ui_icon(UI_ICON_TRANSPORT_REWIND, uis(16), g_theme.text_dim); }
 
             // Stop
             CLAY(CLAY_ID("TbStop"),
@@ -1032,7 +1032,7 @@ static void build_header_bar(AppState *app) {
                 },
                 .backgroundColor = g_theme.bg_lighter,
                 .cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS),
-            ) { CLAY_TEXT(CLAY_STRING("[]"), &g_text_config_dim); }
+            ) { ui_icon(UI_ICON_TRANSPORT_STOP, uis(14), g_theme.text_dim); }
 
             // Play
             CLAY(CLAY_ID("TbPlay"),
@@ -1042,7 +1042,7 @@ static void build_header_bar(AppState *app) {
                 },
                 .backgroundColor = g_theme.bg_lighter,
                 .cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS),
-            ) { CLAY_TEXT(CLAY_STRING(">"), &g_text_config_dim); }
+            ) { ui_icon(UI_ICON_TRANSPORT_PLAY, uis(16), g_theme.text_dim); }
 
             // Record
             CLAY(CLAY_ID("TbRecord"),
@@ -1052,13 +1052,7 @@ static void build_header_bar(AppState *app) {
                 },
                 .backgroundColor = g_theme.bg_lighter,
                 .cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS),
-            ) {
-                static Clay_TextElementConfig rec_text = {};
-                rec_text.textColor = Clay_Color{200, 60, 60, 255};
-                rec_text.fontSize = FONT_SIZE_NORMAL;
-                rec_text.wrapMode = CLAY_TEXT_WRAP_NONE;
-                CLAY_TEXT(CLAY_STRING("O"), &rec_text);
-            }
+            ) { ui_icon(UI_ICON_TRANSPORT_RECORD, uis(14), Clay_Color{200, 60, 60, 255}); }
         }
 
         // Spacer
diff --git a/src/ui/ui_icons.cpp b/src/ui/ui_icons.cpp
index 024957c..04878c2 100644
--- a/src/ui/ui_icons.cpp
+++ b/src/ui/ui_icons.cpp
@@ -104,6 +104,28 @@ static const char *g_icon_svgs[UI_ICON_COUNT] = {
   <rect style="fill:url(#linearGradient7734)" transform="scale(1,-1)" rx="1.021" ry="0.264" height="0.932" width="59.883" y="-578.82" x="847.89"/>
   <rect style="fill:url(#linearGradient7736)" transform="scale(1,-1)" rx="1.012" ry="0.166" height="0.588" width="59.347" y="-569.52" x="847.89"/>
 </svg>)SVG",
+
+    // UI_ICON_TRANSPORT_REWIND - skip to start (|<<)
+    R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <rect x="3" y="5" width="2.5" height="14" rx="0.5" fill="white"/>
+        <path d="M11 5 L11 19 L4 12 Z" fill="white"/>
+        <path d="M20 5 L20 19 L13 12 Z" fill="white"/>
+    </svg>)",
+
+    // UI_ICON_TRANSPORT_STOP - filled square
+    R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <rect x="5" y="5" width="14" height="14" rx="1.5" fill="white"/>
+    </svg>)",
+
+    // UI_ICON_TRANSPORT_PLAY - right-pointing triangle
+    R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M6 4 L6 20 L20 12 Z" fill="white"/>
+    </svg>)",
+
+    // UI_ICON_TRANSPORT_RECORD - filled circle
+    R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <circle cx="12" cy="12" r="8" fill="white"/>
+    </svg>)",
 };
 
 U8 *ui_icons_rasterize_atlas(S32 *out_w, S32 *out_h, S32 icon_size) {
diff --git a/src/ui/ui_icons.h b/src/ui/ui_icons.h
index 21d3e34..304b02e 100644
--- a/src/ui/ui_icons.h
+++ b/src/ui/ui_icons.h
@@ -10,6 +10,10 @@ enum UI_IconID {
     UI_ICON_KNOB,
     UI_ICON_SLIDER_THUMB,
     UI_ICON_FADER,
+    UI_ICON_TRANSPORT_REWIND,
+    UI_ICON_TRANSPORT_STOP,
+    UI_ICON_TRANSPORT_PLAY,
+    UI_ICON_TRANSPORT_RECORD,
     UI_ICON_COUNT
 };