feat(Tabs): add methods for adding/removing tabs and add tab scrolling

Author: ShadowApex

core/systems/state/tab_container_state.gd

@@ -9,10 +9,29 @@ class_name TabContainerState
 signal tab_button_pressed(tab: int)
 signal tab_changed(tab: int)
 signal tab_selected(tab: int)
+signal tab_added(tab_text: String, node: ScrollContainer)
+signal tab_removed(tab_text: String)
 
 var current_tab := 0:
 	set(v):
 		current_tab = v
 		tab_changed.emit(v)
 
 @export var tabs_text: PackedStringArray
+
+
+## Add the given tab
+func add_tab(tab_text: String, node: ScrollContainer) -> void:
+	tabs_text.append(tab_text)
+	tab_added.emit(tab_text, node)
+
+
+## Remove the given tab
+func remove_tab(tab_text: String) -> void:
+	var idx := tabs_text.find(tab_text)
+	if idx < 0:
+		return
+	tabs_text.remove_at(idx)
+	if tabs_text.size() > current_tab:
+		current_tab = tabs_text.size() - 1
+	tab_removed.emit(tab_text)

core/ui/card_ui/library/library_menu.gd

@@ -17,6 +17,7 @@ var refresh_requested := false
 var refresh_in_progress := false
 var _library := {}
 var _current_selection := {}
+var _tabs := {}
 var logger := Log.get_logger("LibraryMenu", Log.LEVEL.INFO)
 
 @export var tabs_state: TabContainerState
@@ -40,7 +41,17 @@ func _ready() -> void:
 	library_state.refreshed.connect(on_refresh)
 
 	# Listen for tab container changes
-	tabs_state.tab_changed.connect(_on_tab_container_tab_changed)
+	if tabs_state:
+		var tab_nodes := tab_container.get_children()
+		var tab_headers := tabs_state.tabs_text.duplicate()
+		var num_tabs := mini(len(tab_nodes), tab_headers.size())
+		for idx in range(num_tabs):
+			var key := tab_headers[idx]
+			var value := tab_nodes[idx]
+			_tabs[key] = value
+		tabs_state.tab_changed.connect(_on_tab_container_tab_changed)
+		tabs_state.tab_added.connect(_on_tab_added)
+		tabs_state.tab_removed.connect(_on_tab_removed)
 
 	# Listen for library changes
 	var on_library_changed := func(item: LibraryItem):
@@ -273,6 +284,8 @@ func _on_tab_container_tab_changed(tab: int) -> void:
 
 	# Get the child container to grab focus
 	var container: ScrollContainer = tab_container.get_child(tab)
+	if container.get_child_count() == 0:
+		return
 	var grid: HFlowContainer = container.get_child(1).get_child(0)
 
 	# If we had a previous selection, grab focus on that.
@@ -295,3 +308,16 @@ func _on_tab_container_tab_changed(tab: int) -> void:
 		if child.visible:
 			child.grab_focus.call_deferred()
 			break
+
+
+func _on_tab_added(tab_text: String, node: ScrollContainer) -> void:
+	_tabs[tab_text] = node
+	tab_container.add_child(node)
+
+
+func _on_tab_removed(tab_text: String) -> void:
+	if not tab_text in _tabs:
+		return
+	var node := _tabs[tab_text] as Node
+	_tabs.erase(tab_text)
+	node.queue_free()

core/ui/card_ui/navigation/search_bar_menu.tscn

@@ -69,5 +69,7 @@ max_width = 34
 [node name="LibraryTabsContainer" parent="MarginContainer/HBoxContainer" instance=ExtResource("8_uixir")]
 unique_name_in_owner = true
 layout_mode = 2
+size_flags_horizontal = 3
+size_flags_vertical = 3
 tabs_state = ExtResource("9_dlgkq")
 show_left_separator = true

core/ui/components/containers/enhanced_scroll_container.gd

@@ -0,0 +1,27 @@
+@tool
+extends ScrollContainer
+class_name EnhancedScrollContainer
+
+@export var maximum_size: Vector2i:
+	set(v):
+		maximum_size = v
+		_on_sort_children()
+
+func _ready() -> void:
+	sort_children.connect(_on_sort_children)
+
+
+func _on_sort_children() -> void:
+	if get_child_count() == 0:
+		return
+	var child: Control
+	for c in get_children():
+		if not c is Control:
+			continue
+		child = c
+		break
+	if not child:
+		return
+
+	custom_minimum_size.x = min(child.size.x, maximum_size.x)
+	custom_minimum_size.y = min(child.size.y, maximum_size.y)

core/ui/components/containers/enhanced_scroll_container.gd.uid

@@ -0,0 +1 @@
+uid://b6useuxusuw4w

core/ui/components/tabs_header.gd

@@ -12,6 +12,7 @@ var current_tab: TabLabel
 @onready var l_sep := $%LSeparator
 @onready var r_sep := $%RSeparator
 @onready var container := $%TabLabelContainer
+@onready var scroll_container := $%EnhancedScrollContainer as EnhancedScrollContainer
 
 
 # Called when the node enters the scene tree for the first time.
@@ -38,13 +39,38 @@ func _ready() -> void:
 
 	# Listen for tab changes
 	tabs_state.tab_changed.connect(_on_tab_changed)
+	tabs_state.tab_added.connect(_on_tab_added)
+	tabs_state.tab_removed.connect(_on_tab_removed)
 
 
 func _on_tab_changed(tab: int) -> void:
 	for tab_label in container.get_children():
 		tab_label.selected = false
 	current_tab = container.get_child(tab)
 	current_tab.selected = true
+	if not current_tab:
+		return
+	var target_position := current_tab.position.x - (current_tab.size.x / 2)
+	if target_position < 0:
+		target_position = 0
+	var tween := get_tree().create_tween()
+	tween.tween_property(scroll_container, "scroll_horizontal", target_position, 0.2)
+
+
+func _on_tab_added(tab_text: String, _node: ScrollContainer) -> void:
+	var tab := tab_label_scene.instantiate()
+	tab.text = tab_text
+	container.add_child(tab)
+
+
+func _on_tab_removed(tab_text: String) -> void:
+	for child in container.get_children():
+		if child.get("text") == null:
+			continue
+		if child.text != tab_text:
+			continue
+		child.queue_free()
+		break
 
 
 func _input(event: InputEvent) -> void:

core/ui/components/tabs_header.tscn

@@ -1,7 +1,8 @@
-[gd_scene load_steps=4 format=3 uid="uid://cgmb4kr2ec4ha"]
+[gd_scene load_steps=5 format=3 uid="uid://cgmb4kr2ec4ha"]
 
 [ext_resource type="Script" uid="uid://cnnkmn8jnjf2m" path="res://core/ui/components/tabs_header.gd" id="1_su51c"]
 [ext_resource type="Script" uid="uid://boeu2ttk342x8" path="res://core/ui/components/input_icon.gd" id="2_oxuw3"]
+[ext_resource type="Script" uid="uid://b6useuxusuw4w" path="res://core/ui/components/containers/enhanced_scroll_container.gd" id="3_2l5lr"]
 
 [sub_resource type="StyleBoxLine" id="StyleBoxLine_lb7pt"]
 content_margin_top = 20.0
@@ -26,7 +27,20 @@ layout_mode = 2
 script = ExtResource("2_oxuw3")
 path = "ogui_tab_left"
 
-[node name="TabLabelContainer" type="HBoxContainer" parent="."]
+[node name="MarginContainer" type="MarginContainer" parent="."]
+layout_mode = 2
+theme_override_constants/margin_top = 5
+theme_override_constants/margin_bottom = 5
+
+[node name="EnhancedScrollContainer" type="ScrollContainer" parent="MarginContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+vertical_scroll_mode = 0
+script = ExtResource("3_2l5lr")
+maximum_size = Vector2i(550, 0)
+metadata/_custom_type_script = "uid://b6useuxusuw4w"
+
+[node name="TabLabelContainer" type="HBoxContainer" parent="MarginContainer/EnhancedScrollContainer"]
 unique_name_in_owner = true
 layout_mode = 2
 theme_override_constants/separation = 30