AppUI lifted to its own file, Got horizontal and vertical boxes working

code/tick_update.odin

@@ -200,209 +200,7 @@ update :: proc( delta_time : f64 ) -> b32
 		ui_graph_build( & state.app_ui )
 		ui := ui_context
 
-		/*
-			Prototype app menu
-			This is a menu bar for the app for now inside the same ui as the workspace's UI state
-			Eventually this will get moved out to its own UI state for the app itself.
-		*/
-		if true
-		{
-			profile("App Menu Bar")
-			fmt :: str_fmt_alloc
-
-			@static bar_pos := Vec2{0, 100}
-			bar_size := vec2( 400, 40 )
-
-			menu_bar : UI_Widget
-			{
-				theme := UI_Style {
-					flags = {
-					},
-					bg_color     = { 0, 0, 0, 30 },
-					border_color = { 0, 0, 0, 200 },
-
-					font = default_font,
-					text_color = Color_White,
-
-					layout = UI_Layout {
-						anchor = {},
-						border_width = 1.0,
-						font_size = 12,
-						pos    = bar_pos,
-						size   = range2( bar_size, {}),
-						// padding = { 10, 10, 10, 10 },
-					},
-				}
-
-				ui_theme_via_style(theme)
-				menu_bar = ui_widget("App Menu Bar", { .Mouse_Clickable} )
-				menu_bar.text = to_str_runes_pair( fmt("%v", bar_pos))
-
-				if (menu_bar.first_frame) {
-					// bar_pos = screen_get_corners().top_right - vec2(0, app_window.extent.y * 0.5)
-				}
-			}
-			// Setup Children
-			settings_btn : UI_Widget
-			{
-				ui_parent(menu_bar)
-
-				style := UI_Style {
-					flags = {
-						// .Origin_At_Anchor_Center
-						.Fixed_Height
-					},
-					bg_color = Color_Frame_Disabled,
-
-					font       = default_font,
-					text_color = Color_White,
-
-					layout = UI_Layout {
-						anchor         = range2( {0, 0}, {0.0, 0} ),
-						alignment      = { 0.0, 1.0 },
-						font_size      = 18,
-						text_alignment = { 0.5, 0.5 },
-						pos            = { 0, 0 },
-						size           = range2( {25, bar_size.y}, {0, 0})
-					}
-				}
-				theme := to_ui_styletheme(style)
-				theme.disabled.bg_color = Color_Frame_Disabled
-				theme.hot.bg_color      = Color_Red
-				theme.active.bg_color   = Color_Frame_Select
-				ui_style_theme(theme)
-
-				move_box : UI_Widget
-				{
-					move_box = ui_button("Move Box")
-					if move_box.active {
-						bar_pos += input.mouse.delta
-					}
-					using move_box
-					hot := ui_box_from_key(ui.curr_cache, ui.hot)
-					if hot != nil {
-						text = to_str_runes_pair(str_fmt_tmp("Hot box: %v %v", hot.label.str, hot.hot_delta))
-						style.font = default_font
-						style.font_size = 12
-						style.text_color = Color_White
-						style.text_alignment = {0, 1}
-					}
-				}
-
-				move_settings_spacer := ui_widget("Move-Settings Spacer", {})
-				{
-					using move_settings_spacer
-					text                   = str_intern("spacer")
-					style.bg_color         = Color_Transparent
-					style.layout.font_size = 10
-				}
-
-				settings_btn      = ui_button("Settings Btn")
-				settings_btn.text = str_intern("Settings")
-				settings_btn.style.flags = {
-					.Scale_Width_By_Height_Ratio,
-				}
-
-				// HBox layout calculation?
-				{
-					hb_space_ratio_move_box := 0.1
-					hb_space_ratio_move_settings_spacer := 0.05
-					hb_space_ratio_settings_btn := 1.0
-
-					style := & move_box.box.style
-					style.anchor.max.x = 0.9
-
-					style = & move_settings_spacer.box.style
-					style.anchor.min.x = 0.1
-					style.anchor.max.x = 0.8
-
-					style = & settings_btn.box.style
-					style.anchor.min.x = 0.2
-					style.anchor.max.x = 0.55
-				}
-			}
-
-			@static settings_open := true
-			if settings_btn.pressed || settings_open
-			{
-				profile("Settings Menu")
-				settings_open = true
-
-				resize_border_width : f32 = 20
-				@static pos  := Vec2 {0, 0}
-				@static size := Vec2 { 200, 200 }
-				if size.x < 200 {
-					size.x = 200
-				}
-				if size.y < 200 {
-					size.y = 200
-				}
-				settings_menu := ui_widget("Settings Menu", {.Mouse_Clickable})
-				{
-					using settings_menu
-					style.flags = {
-						// .Origin_At_Anchor_Center
-					}
-					style.pos       = pos
-					style.alignment = { 1.0, 0.5 }
-					style.bg_color  = Color_BG_Panel_Translucent
-					style.size      = range2( size, {})
-					text = to_str_runes_pair(str_fmt_tmp("Hot Delta: %v", hot_delta))
-					style.font = default_font
-					style.font_size = 12
-					style.text_color = Color_White
-				}
-
-				ui_parent(settings_menu)
-				ui_theme_via_style({
-					bg_color   = Color_Transparent,
-					font       = default_font,
-					text_color = Color_White,
-					size       = range2({0, 40}, {0, 40}), // TODO(Ed): Implment ratio scaling for height
-					layout     = { font_size = 16 },
-				})
-				ui_style_theme_ref().hot.bg_color = Color_Blue
-				frame_bar := ui_widget("Settings Menu: Frame Bar", { .Mouse_Clickable, .Focusable, .Click_To_Focus })
-				{
-					using frame_bar
-					style.bg_color  = Color_BG_Panel
-					style.flags     = {}
-					style.alignment = { 0, 1 }
-				}
-				ui_parent(frame_bar)
-
-				if frame_bar.active {
-					pos += input.mouse.delta
-				}
-
-				title := ui_text("Settings Menu: Title", str_intern("Settings Menu"), {.Disabled})
-				{
-					using title
-					style.alignment      = {0, 1}
-					style.margins        = { 0, 0, 15, 0}
-					style.text_alignment = {0 , 0.5}
-				}
-
-				ui_style_theme(ui_style_theme_peek())
-				ui_style_theme_ref().default.bg_color = Color_GreyRed
-				ui_style_theme_ref().hot.    bg_color = Color_Red
-				close_btn := ui_button("Settings Menu: Close Btn")
-				{
-					using close_btn
-					text = str_intern("close")
-					// style.bg_color = Color_GreyRed
-					style.size.min       = {50, 0}
-					style.anchor         = range2( {1.0, 0}, {})
-					style.alignment      = {1, 1}
-					style.text_alignment = {0.5, 0.5}
-					if close_btn.pressed {
-						settings_open = false
-					}
-				}
-
-				ui_resizable_handles( & settings_menu, & pos, & size )
-			}
-		}
+		ui_app_menu_bar()
 	}
 	//endregion App UI Tick