woops meant to add to last commit

src/main.cpp

@@ -82,67 +82,6 @@ struct AppState {
 ////////////////////////////////
 // Panel builders
 
-static CustomGradientData g_tab_gradient = {
-    CUSTOM_RENDER_VGRADIENT, TAB_ACTIVE_TOP, TAB_ACTIVE_BOTTOM
-};
-
-static S32 build_tab_bar(const char *id, const char **labels, S32 count, S32 *selected) {
-    S32 id_len = (S32)strlen(id);
-    Clay_String id_str = { .isStaticallyAllocated = false, .length = id_len, .chars = id };
-    Clay_ElementId row_eid = Clay__HashString(id_str, 0);
-
-    CLAY(row_eid,
-        .layout = {
-            .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() },
-            .padding = { 0, 0, 4, 0 },
-            .layoutDirection = CLAY_LEFT_TO_RIGHT,
-        },
-        .backgroundColor = g_theme.bg_medium,
-        .border = { .color = g_theme.border, .width = { .bottom = 1 } },
-    ) {
-        for (S32 i = 0; i < count; i++) {
-            Clay_ElementId tab_eid = Clay__HashStringWithOffset(id_str, (uint32_t)i, 0);
-            B32 is_active = (i == *selected);
-            B32 hovered = Clay_PointerOver(tab_eid);
-
-            S32 lbl_len = (S32)strlen(labels[i]);
-            Clay_String lbl_str = { .isStaticallyAllocated = false, .length = lbl_len, .chars = labels[i] };
-
-            if (is_active) {
-                CLAY(tab_eid,
-                    .layout = {
-                        .sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIXED(TAB_HEIGHT) },
-                        .padding = { TAB_PADDING_H, TAB_PADDING_H, 0, 6 },
-                        .childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
-                    },
-                    .cornerRadius = { .topLeft = TAB_CORNER_RADIUS, .topRight = TAB_CORNER_RADIUS, .bottomLeft = 0, .bottomRight = 0 },
-                    .custom = { .customData = &g_tab_gradient },
-                ) {
-                    CLAY_TEXT(lbl_str, &g_text_config_title);
-                }
-            } else {
-                Clay_Color bg = hovered ? (Clay_Color)TAB_INACTIVE_HOVER : (Clay_Color)TAB_INACTIVE_BG;
-                CLAY(tab_eid,
-                    .layout = {
-                        .sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIXED(TAB_HEIGHT) },
-                        .padding = { TAB_PADDING_H, TAB_PADDING_H, 0, 6 },
-                        .childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
-                    },
-                    .backgroundColor = bg,
-                    .cornerRadius = { .topLeft = TAB_CORNER_RADIUS, .topRight = TAB_CORNER_RADIUS, .bottomLeft = 0, .bottomRight = 0 },
-                ) {
-                    CLAY_TEXT(lbl_str, &g_text_config_title);
-                }
-            }
-
-            if (hovered && g_wstate.mouse_clicked) {
-                *selected = i;
-            }
-        }
-    }
-    return *selected;
-}
-
 static void build_browser_panel(B32 show) {
     if (!show) return;
 
@@ -157,7 +96,7 @@ static void build_browser_panel(B32 show) {
         {
             S32 sel = 0;
             static const char *browser_tabs[] = { "Browser" };
-            build_tab_bar("BrowserTabRow", browser_tabs, 1, &sel);
+            ui_tab_bar("BrowserTabRow", browser_tabs, 1, &sel);
         }
 
         CLAY(CLAY_ID("BrowserContent"),
@@ -184,7 +123,7 @@ static void build_main_panel(AppState *app) {
         {
             S32 sel = 0;
             static const char *main_tabs[] = { "Main" };
-            build_tab_bar("MainTabRow", main_tabs, 1, &sel);
+            ui_tab_bar("MainTabRow", main_tabs, 1, &sel);
         }
 
         CLAY(CLAY_ID("MainContent"),
@@ -327,7 +266,7 @@ static void build_right_panel(AppState *app) {
         },
         .backgroundColor = g_theme.bg_medium
     ) {
-        build_tab_bar("RightTabs", right_tabs, 2, &app->right_panel_tab);
+        ui_tab_bar("RightTabs", right_tabs, 2, &app->right_panel_tab);
 
         if (app->right_panel_tab == 0) {
             // Properties content
@@ -519,7 +458,7 @@ static void build_log_panel(B32 show) {
         {
             S32 sel = 0;
             static const char *log_tabs[] = { "Log" };
-            build_tab_bar("LogTabRow", log_tabs, 1, &sel);
+            ui_tab_bar("LogTabRow", log_tabs, 1, &sel);
         }
 
         CLAY(CLAY_ID("LogContent"),

src/ui/ui_widgets.cpp

@@ -1049,3 +1049,65 @@ B32 ui_window(const char *id, const char *title, B32 *open,
 
     return 1;
 }
+
+////////////////////////////////
+// Tab bar
+
+static CustomGradientData g_tab_gradient = {
+    CUSTOM_RENDER_VGRADIENT, TAB_ACTIVE_TOP, TAB_ACTIVE_BOTTOM
+};
+
+S32 ui_tab_bar(const char *id, const char **labels, S32 count, S32 *selected) {
+    Clay_String id_str = clay_str(id);
+    Clay_ElementId row_eid = Clay__HashString(id_str, 0);
+
+    CLAY(row_eid,
+        .layout = {
+            .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT() },
+            .padding = { 0, 0, 4, 0 },
+            .layoutDirection = CLAY_LEFT_TO_RIGHT,
+        },
+        .backgroundColor = g_theme.bg_medium,
+        .border = { .color = g_theme.border, .width = { .bottom = 1 } },
+    ) {
+        for (S32 i = 0; i < count; i++) {
+            Clay_ElementId tab_eid = Clay__HashStringWithOffset(id_str, (uint32_t)i, 0);
+            B32 is_active = (i == *selected);
+            B32 hovered = Clay_PointerOver(tab_eid);
+
+            Clay_String lbl_str = clay_str(labels[i]);
+
+            if (is_active) {
+                CLAY(tab_eid,
+                    .layout = {
+                        .sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIXED(TAB_HEIGHT) },
+                        .padding = { TAB_PADDING_H, TAB_PADDING_H, 0, 6 },
+                        .childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
+                    },
+                    .cornerRadius = { .topLeft = TAB_CORNER_RADIUS, .topRight = TAB_CORNER_RADIUS, .bottomLeft = 0, .bottomRight = 0 },
+                    .custom = { .customData = &g_tab_gradient },
+                ) {
+                    CLAY_TEXT(lbl_str, &g_widget_text_config);
+                }
+            } else {
+                Clay_Color bg = hovered ? (Clay_Color)TAB_INACTIVE_HOVER : (Clay_Color)TAB_INACTIVE_BG;
+                CLAY(tab_eid,
+                    .layout = {
+                        .sizing = { .width = CLAY_SIZING_FIT(), .height = CLAY_SIZING_FIXED(TAB_HEIGHT) },
+                        .padding = { TAB_PADDING_H, TAB_PADDING_H, 0, 6 },
+                        .childAlignment = { .y = CLAY_ALIGN_Y_CENTER },
+                    },
+                    .backgroundColor = bg,
+                    .cornerRadius = { .topLeft = TAB_CORNER_RADIUS, .topRight = TAB_CORNER_RADIUS, .bottomLeft = 0, .bottomRight = 0 },
+                ) {
+                    CLAY_TEXT(lbl_str, &g_widget_text_config);
+                }
+            }
+
+            if (hovered && g_wstate.mouse_clicked) {
+                *selected = i;
+            }
+        }
+    }
+    return *selected;
+}

src/ui/ui_widgets.h

@@ -113,6 +113,10 @@ S32 ui_modal(const char *id, const char *title, const char *message,
              const char **buttons, S32 button_count);
 B32 ui_modal_is_active();
 
+// Tab bar. Renders a row of tabs with active/inactive states.
+// Returns the currently selected index. Clicking an inactive tab updates *selected.
+S32 ui_tab_bar(const char *id, const char **labels, S32 count, S32 *selected);
+
 // Draggable floating window. content_fn is called inside the window body each frame.
 // *open is set to 0 when the close button is clicked. Returns true while window is open.
 typedef void (*UI_WindowContentFn)(void *user_data);