feat: proper layouts for own and other messages

src/logic-scenes/chat_view/auto_size_richt_text_container.gd

@@ -2,32 +2,31 @@
 @tool
 extends Container
 
+@export var min_bubble_width: float = 64.0
 @export var max_bubble_width: float = 512.0
 
 @onready var label: RichTextLabel = $RichTextLabel
 
+var text := ""
+
 func _ready():
-	set_text(label.text)
+	label.resized.connect(_on_label_resized)
-
+	label.theme_changed.connect(_on_label_resized)
-func set_text(text: String) -> void:
-	label.text = text
-
-	# 1. Disable wrap, measure natural width
-	label.autowrap_mode = TextServer.AUTOWRAP_OFF
 	label.fit_content = true
-	label.custom_minimum_size.x = 0
 
-	# Force layout so get_content_width() is valid
+func _process(_delta: float) -> void:
-	label.queue_redraw()
+	if (label.text != text):
-	await get_tree().process_frame
+		set_text(label.text)
 
-	var natural_width := label.get_content_width()
+func set_text(new_text: String) -> void:
+	text = new_text
+	label.autowrap_mode = TextServer.AUTOWRAP_OFF
+	label.custom_minimum_size.x = min_bubble_width
+	label.text = text  # triggers layout → NOTIFICATION_RESIZED
 
-	if natural_width <= max_bubble_width:
+func _on_label_resized() -> void:
-		# Short text = natural size
+	if label.get_content_width() > max_bubble_width:
-		label.custom_minimum_size.x = 0
-	else:
-		# Long text — clamp and wrap
 		label.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
 		label.custom_minimum_size.x = max_bubble_width
-		label.size.x = max_bubble_width
+	else:
+		pass # already correctly sized

src/logic-scenes/chat_view/avatar-other.png.import

@@ -0,0 +1,40 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dkqsw8nh2crhq"
+path="res://.godot/imported/avatar-other.png-09f69875162e2f76b5a47c0d287cd91e.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://logic-scenes/chat_view/avatar-other.png"
+dest_files=["res://.godot/imported/avatar-other.png-09f69875162e2f76b5a47c0d287cd91e.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/uastc_level=0
+compress/rdo_quality_loss=0.0
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/channel_remap/red=0
+process/channel_remap/green=1
+process/channel_remap/blue=2
+process/channel_remap/alpha=3
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

src/logic-scenes/chat_view/avatar-self.png.import

@@ -3,15 +3,15 @@
 importer="texture"
 type="CompressedTexture2D"
 uid="uid://dekaqj10p8rqk"
-path="res://.godot/imported/avatar-dummy.png-65800fc5bc4cfb43587691e9aaed86f6.ctex"
+path="res://.godot/imported/avatar-self.png-01f4d75fe95c2d322095af684ab1d9a8.ctex"
 metadata={
 "vram_texture": false
 }
 
 [deps]
 
-source_file="res://logic-scenes/chat_view/avatar-dummy.png"
+source_file="res://logic-scenes/chat_view/avatar-self.png"
-dest_files=["res://.godot/imported/avatar-dummy.png-65800fc5bc4cfb43587691e9aaed86f6.ctex"]
+dest_files=["res://.godot/imported/avatar-self.png-01f4d75fe95c2d322095af684ab1d9a8.ctex"]
 
 [params]
 

src/logic-scenes/chat_view/chat-view.gd

@@ -2,6 +2,7 @@ class_name ChatView extends ScrollContainer
 
 @export var messages: Array[ChatMessage]
 
+
 var v_box: VBoxContainer
 
 func _ready() -> void:

src/logic-scenes/chat_view/chat-view.tscn

@@ -7,7 +7,7 @@
 [ext_resource type="Texture2D" uid="uid://cv58eu35ra1ku" path="res://logic-scenes/chat_view/phone-dot.png" id="4_vvup7"]
 [ext_resource type="Texture2D" uid="uid://bng2qbusdg7dj" path="res://logic-scenes/chat_view/phone-signal.png" id="4_xckgu"]
 [ext_resource type="Script" uid="uid://be16bo6mf4kqu" path="res://logic-scenes/chat_view/chat-message.gd" id="5_xckgu"]
-[ext_resource type="Texture2D" uid="uid://dekaqj10p8rqk" path="res://logic-scenes/chat_view/avatar-dummy.png" id="6_bvmqu"]
+[ext_resource type="Texture2D" uid="uid://dekaqj10p8rqk" path="res://logic-scenes/chat_view/avatar-self.png" id="6_bvmqu"]
 [ext_resource type="StyleBox" uid="uid://dj1fuvcy0sw7k" path="res://logic-scenes/chat_view/style-chat-bubble.tres" id="9_vvup7"]
 [ext_resource type="LabelSettings" uid="uid://mh8uu4rlqmv5" path="res://logic-scenes/chat_view/label-timestamp.tres" id="9_xckgu"]
 [ext_resource type="StyleBox" uid="uid://dd4xc216ul21m" path="res://logic-scenes/chat_view/style-chat-bubble-self.tres" id="11_qbcw0"]
@@ -88,7 +88,26 @@ label_settings = ExtResource("2_xckgu")
 horizontal_alignment = 1
 vertical_alignment = 1
 
+[node name="AppBar" type="HBoxContainer" parent="AppLayout" unique_id=981636098]
+layout_mode = 2
+alignment = 1
+
+[node name="ContactName" type="Label" parent="AppLayout/AppBar" unique_id=1110888559]
+layout_mode = 2
+text = "Contact Name"
+label_settings = ExtResource("2_xckgu")
+horizontal_alignment = 1
+vertical_alignment = 1
+
+[node name="ChatName" type="Label" parent="AppLayout/AppBar" unique_id=215068956]
+layout_mode = 2
+text = "(Nick)"
+label_settings = ExtResource("2_xckgu")
+horizontal_alignment = 1
+vertical_alignment = 1
+
 [node name="ChatContainer" type="ScrollContainer" parent="AppLayout" unique_id=124411261]
+unique_name_in_owner = true
 layout_mode = 2
 size_flags_vertical = 3
 horizontal_scroll_mode = 0
@@ -100,59 +119,118 @@ messages = Array[ExtResource("5_xckgu")]([SubResource("Resource_iwd5k"), SubReso
 layout_mode = 2
 size_flags_horizontal = 3
 
-[node name="Message-Other" type="HBoxContainer" parent="AppLayout/ChatContainer/VBoxContainer" unique_id=872807975]
+[node name="Message-Other" type="HBoxContainer" parent="AppLayout/ChatContainer/VBoxContainer" unique_id=1768184408]
 layout_mode = 2
 size_flags_horizontal = 3
 alignment = 2
 
-[node name="Avatar" type="TextureRect" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other" unique_id=1340018572]
+[node name="Avatar" type="TextureRect" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other" unique_id=692150965]
 layout_mode = 2
 size_flags_vertical = 8
 texture = ExtResource("6_bvmqu")
 stretch_mode = 2
 
-[node name="VBoxContainer" type="VBoxContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other" unique_id=1464038635]
+[node name="VBoxContainer" type="VBoxContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other" unique_id=1815081203]
 layout_mode = 2
-size_flags_horizontal = 3
+size_flags_horizontal = 2
 size_flags_vertical = 9
 
-[node name="MarginContainer" type="MarginContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other/VBoxContainer" unique_id=411272741]
+[node name="Bubble" type="PanelContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other/VBoxContainer" unique_id=5067436]
-layout_mode = 2
+custom_minimum_size = Vector2(0, 52)
-size_flags_horizontal = 0
-theme_override_constants/margin_left = 5
-theme_override_constants/margin_top = 5
-theme_override_constants/margin_right = 5
-theme_override_constants/margin_bottom = 5
-script = ExtResource("12_qgt32")
-
-[node name="Panel" type="Panel" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other/VBoxContainer/MarginContainer" unique_id=2013893702]
 layout_mode = 2
+size_flags_horizontal = 8
+size_flags_vertical = 3
 theme_override_styles/panel = ExtResource("9_vvup7")
 
-[node name="RichTextLabel" type="RichTextLabel" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other/VBoxContainer/MarginContainer" unique_id=2013097116]
+[node name="MarginContainer" type="MarginContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other/VBoxContainer/Bubble" unique_id=866335976]
-custom_minimum_size = Vector2(512, 0)
+layout_mode = 2
+size_flags_horizontal = 0
+size_flags_vertical = 4
+theme_override_constants/margin_left = 4
+theme_override_constants/margin_top = 4
+theme_override_constants/margin_right = 4
+theme_override_constants/margin_bottom = 4
+script = ExtResource("12_qgt32")
+
+[node name="RichTextLabel" type="RichTextLabel" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other/VBoxContainer/Bubble/MarginContainer" unique_id=1973907637]
+custom_minimum_size = Vector2(64, 64)
 layout_mode = 2
 size_flags_horizontal = 3
 theme_type_variation = &"message-other"
 bbcode_enabled = true
-text = "Dies ist eine Telegram-Message. 
+text = "Dies ist eine T-legram-Message. 
-FR, FR...
-Ich schreibe mal etwas länger, ob zu sehen, ob der Bums irgendwann umbricht.
-
-lalle back, lalle back, lalle-lalle-back ... 
 "
 fit_content = true
 scroll_active = false
+autowrap_mode = 0
 vertical_alignment = 1
-justification_flags = 3
+justification_flags = 99
 metadata/_custom_type_script = "uid://dlbwvie007wfx"
 
-[node name="TimeStamp" type="Label" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other/VBoxContainer" unique_id=1782456747]
+[node name="TimeStamp" type="Label" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other/VBoxContainer" unique_id=801686504]
 layout_mode = 2
 text = "8:12 PM"
 label_settings = ExtResource("9_xckgu")
+horizontal_alignment = 2
 
-[node name="Spacer" type="Control" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other" unique_id=1910496415]
+[node name="Spacer" type="Control" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other" unique_id=1232564412]
+custom_minimum_size = Vector2(160, 0)
+layout_mode = 2
+
+[node name="Message-Other2" type="HBoxContainer" parent="AppLayout/ChatContainer/VBoxContainer" unique_id=230318593]
+layout_mode = 2
+size_flags_horizontal = 3
+alignment = 2
+
+[node name="Avatar" type="TextureRect" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other2" unique_id=1854076166]
+layout_mode = 2
+size_flags_vertical = 8
+texture = ExtResource("6_bvmqu")
+stretch_mode = 2
+
+[node name="VBoxContainer" type="VBoxContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other2" unique_id=216841372]
+layout_mode = 2
+size_flags_horizontal = 2
+size_flags_vertical = 9
+
+[node name="Bubble" type="PanelContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other2/VBoxContainer" unique_id=1704898778]
+custom_minimum_size = Vector2(0, 52)
+layout_mode = 2
+size_flags_horizontal = 8
+size_flags_vertical = 3
+theme_override_styles/panel = ExtResource("9_vvup7")
+
+[node name="MarginContainer" type="MarginContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other2/VBoxContainer/Bubble" unique_id=343453369]
+layout_mode = 2
+size_flags_horizontal = 0
+size_flags_vertical = 4
+theme_override_constants/margin_left = 4
+theme_override_constants/margin_top = 4
+theme_override_constants/margin_right = 4
+theme_override_constants/margin_bottom = 4
+script = ExtResource("12_qgt32")
+
+[node name="RichTextLabel" type="RichTextLabel" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other2/VBoxContainer/Bubble/MarginContainer" unique_id=598363127]
+custom_minimum_size = Vector2(64, 64)
+layout_mode = 2
+size_flags_horizontal = 3
+theme_type_variation = &"message-other"
+bbcode_enabled = true
+text = "😝"
+fit_content = true
+scroll_active = false
+autowrap_mode = 0
+vertical_alignment = 1
+justification_flags = 99
+metadata/_custom_type_script = "uid://dlbwvie007wfx"
+
+[node name="TimeStamp" type="Label" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other2/VBoxContainer" unique_id=257313481]
+layout_mode = 2
+text = "8:12 PM"
+label_settings = ExtResource("9_xckgu")
+horizontal_alignment = 2
+
+[node name="Spacer" type="Control" parent="AppLayout/ChatContainer/VBoxContainer/Message-Other2" unique_id=97162962]
 custom_minimum_size = Vector2(160, 0)
 layout_mode = 2
 
@@ -179,25 +257,25 @@ theme_override_styles/panel = ExtResource("11_qbcw0")
 
 [node name="MarginContainer" type="MarginContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Self/VBoxContainer/Bubble" unique_id=766411309]
 layout_mode = 2
+size_flags_horizontal = 0
 size_flags_vertical = 4
-theme_override_constants/margin_left = 5
+theme_override_constants/margin_left = 4
-theme_override_constants/margin_top = 5
+theme_override_constants/margin_top = 4
-theme_override_constants/margin_right = 5
+theme_override_constants/margin_right = 4
-theme_override_constants/margin_bottom = 5
+theme_override_constants/margin_bottom = 4
 script = ExtResource("12_qgt32")
+min_bubble_width = null
 
 [node name="RichTextLabel" type="RichTextLabel" parent="AppLayout/ChatContainer/VBoxContainer/Message-Self/VBoxContainer/Bubble/MarginContainer" unique_id=1320329524]
+custom_minimum_size = Vector2(512, 64)
 layout_mode = 2
 size_flags_horizontal = 3
 theme_type_variation = &"message-other"
 bbcode_enabled = true
-text = "Dies ist eine Telegram-Message.
+text = "Dies ist auch eine T-legram-Message. Ich schreibe mal etwas länger, ob zu sehen, ob der Text irgendwann umbricht.  
-Ich schreibe mal etwas länger, ob zu sehen,
-ob der Bums irgendwann umbricht.
 "
 fit_content = true
 scroll_active = false
-autowrap_mode = 0
 vertical_alignment = 1
 justification_flags = 99
 metadata/_custom_type_script = "uid://dlbwvie007wfx"
@@ -237,21 +315,21 @@ theme_override_styles/panel = ExtResource("11_qbcw0")
 
 [node name="MarginContainer" type="MarginContainer" parent="AppLayout/ChatContainer/VBoxContainer/Message-Self-Short/VBoxContainer/Bubble" unique_id=2077306006]
 layout_mode = 2
-size_flags_horizontal = 4
+size_flags_horizontal = 0
-theme_override_constants/margin_left = 5
+theme_override_constants/margin_left = 4
-theme_override_constants/margin_top = 5
+theme_override_constants/margin_top = 4
-theme_override_constants/margin_right = 5
+theme_override_constants/margin_right = 4
-theme_override_constants/margin_bottom = 5
+theme_override_constants/margin_bottom = 4
 script = ExtResource("12_qgt32")
+min_bubble_width = null
 
 [node name="RichTextLabel" type="RichTextLabel" parent="AppLayout/ChatContainer/VBoxContainer/Message-Self-Short/VBoxContainer/Bubble/MarginContainer" unique_id=425927748]
+custom_minimum_size = Vector2(0, 64)
 layout_mode = 2
 size_flags_horizontal = 3
 theme_type_variation = &"message-other"
 bbcode_enabled = true
-text = "Kasse Dich Furz!
+text = "Fasse dich kurz!"
-Mein li
-32"
 fit_content = true
 scroll_active = false
 autowrap_mode = 0