Add a node insertion button and layer renaming from the Properties panel (#2072)

* Add node button

* Improve css a bit

* Add layer renaming to the Properties panel and move New Layer to that, plus add unpinning to properties sections

* Add tooltip

* Re-add layer itself in listing

* Final code review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

editor/src/messages/layout/layout_message_handler.rs

@@ -214,6 +214,17 @@ impl LayoutMessageHandler {
 
 				responses.add(callback_message);
 			}
+			Widget::NodeCatalog(node_type_input) => match action {
+				WidgetValueAction::Commit => {
+					let callback_message = (node_type_input.on_commit.callback)(&());
+					responses.add(callback_message);
+				}
+				WidgetValueAction::Update => {
+					let value = value.as_str().expect("NodeCatalog update was not of type String").to_string();
+					let callback_message = (node_type_input.on_update.callback)(&value);
+					responses.add(callback_message);
+				}
+			},
 			Widget::NumberInput(number_input) => match action {
 				WidgetValueAction::Commit => {
 					let callback_message = (number_input.on_commit.callback)(&());
@@ -394,7 +405,6 @@ impl LayoutMessageHandler {
 			LayoutTarget::LayersPanelOptions => FrontendMessage::UpdateLayersPanelOptionsLayout { layout_target, diff },
 			LayoutTarget::MenuBar => unreachable!("Menu bar is not diffed"),
 			LayoutTarget::NodeGraphBar => FrontendMessage::UpdateNodeGraphBarLayout { layout_target, diff },
-			LayoutTarget::PropertiesOptions => FrontendMessage::UpdatePropertyPanelOptionsLayout { layout_target, diff },
 			LayoutTarget::PropertiesSections => FrontendMessage::UpdatePropertyPanelSectionsLayout { layout_target, diff },
 			LayoutTarget::ToolOptions => FrontendMessage::UpdateToolOptionsLayout { layout_target, diff },
 			LayoutTarget::ToolShelf => FrontendMessage::UpdateToolShelfLayout { layout_target, diff },

editor/src/messages/layout/utility_types/layout_widget.rs

@@ -38,8 +38,6 @@ pub enum LayoutTarget {
 	MenuBar,
 	/// Bar at the top of the node graph containing the location and the "Preview" and "Hide" buttons.
 	NodeGraphBar,
-	/// The bar at the top of the Properties panel containing the layer name and icon.
-	PropertiesOptions,
 	/// The body of the Properties panel containing many collapsable sections.
 	PropertiesSections,
 	/// The bar directly above the canvas, left-aligned and to the right of the document mode dropdown.
@@ -303,7 +301,7 @@ pub enum LayoutGroup {
 	},
 	// TODO: Move this from being a child of `enum LayoutGroup` to being a child of `enum Layout`
 	#[serde(rename = "section")]
-	Section { name: String, visible: bool, id: u64, layout: SubLayout },
+	Section { name: String, visible: bool, pinned: bool, id: u64, layout: SubLayout },
 }
 
 impl Default for LayoutGroup {
@@ -344,7 +342,7 @@ impl LayoutGroup {
 				Widget::TextInput(x) => &mut x.tooltip,
 				Widget::TextLabel(x) => &mut x.tooltip,
 				Widget::BreadcrumbTrailButtons(x) => &mut x.tooltip,
-				Widget::InvisibleStandinInput(_) | Widget::PivotInput(_) | Widget::RadioInput(_) | Widget::Separator(_) | Widget::WorkingColorsInput(_) => continue,
+				Widget::InvisibleStandinInput(_) | Widget::PivotInput(_) | Widget::RadioInput(_) | Widget::Separator(_) | Widget::WorkingColorsInput(_) | Widget::NodeCatalog(_) => continue,
 			};
 			if val.is_empty() {
 				val.clone_from(&tooltip);
@@ -385,22 +383,25 @@ impl LayoutGroup {
 				Self::Section {
 					name: current_name,
 					visible: current_visible,
+					pinned: current_pinned,
 					id: current_id,
 					layout: current_layout,
 				},
 				Self::Section {
 					name: new_name,
 					visible: new_visible,
+					pinned: new_pinned,
 					id: new_id,
 					layout: new_layout,
 				},
 			) => {
 				// Resend the entire panel if the lengths, names, visibility, or node IDs are different
 				// TODO: Diff insersion and deletion of items
-				if current_layout.len() != new_layout.len() || *current_name != new_name || *current_visible != new_visible || *current_id != new_id {
+				if current_layout.len() != new_layout.len() || *current_name != new_name || *current_visible != new_visible || *current_pinned != new_pinned || *current_id != new_id {
 					// Update self to reflect new changes
 					current_name.clone_from(&new_name);
 					*current_visible = new_visible;
+					*current_pinned = new_pinned;
 					*current_id = new_id;
 					current_layout.clone_from(&new_layout);
 
@@ -408,6 +409,7 @@ impl LayoutGroup {
 					let new_value = DiffUpdate::LayoutGroup(Self::Section {
 						name: new_name,
 						visible: new_visible,
+						pinned: new_pinned,
 						id: new_id,
 						layout: new_layout,
 					});
@@ -504,6 +506,7 @@ pub enum Widget {
 	IconLabel(IconLabel),
 	ImageLabel(ImageLabel),
 	InvisibleStandinInput(InvisibleStandinInput),
+	NodeCatalog(NodeCatalog),
 	NumberInput(NumberInput),
 	ParameterExposeButton(ParameterExposeButton),
 	PivotInput(PivotInput),
@@ -580,6 +583,7 @@ impl DiffUpdate {
 				| Widget::ImageLabel(_)
 				| Widget::CurveInput(_)
 				| Widget::InvisibleStandinInput(_)
+				| Widget::NodeCatalog(_)
 				| Widget::PivotInput(_)
 				| Widget::RadioInput(_)
 				| Widget::Separator(_)

editor/src/messages/layout/utility_types/widgets/input_widgets.rs

@@ -274,6 +274,21 @@ pub enum NumberInputMode {
 	Range,
 }
 
+#[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
+#[derivative(Debug, PartialEq, Default)]
+pub struct NodeCatalog {
+	pub disabled: bool,
+
+	// Callbacks
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<String>,
+
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_commit: WidgetCallback<()>,
+}
+
 #[derive(Clone, Default, Derivative, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
 pub struct RadioInput {