Construction menu grid view

Content.Client/Construction/UI/ConstructionMenu.xaml

@@ -1,15 +1,20 @@
 <DefaultWindow xmlns="https://spacestation14.io">
     <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
-        <BoxContainer Orientation="Vertical" HorizontalExpand="True" SizeFlagsStretchRatio="0.4" Margin="0 0 5 0">
+        <BoxContainer Orientation="Vertical" MinWidth="243" Margin="0 0 5 0">
             <BoxContainer Orientation="Horizontal" HorizontalExpand="True" Margin="0 0 0 5">
                 <LineEdit Name="SearchBar" PlaceHolder="Search" HorizontalExpand="True"/>
                 <OptionButton Name="OptionCategories" Access="Public" MinSize="130 0"/>
             </BoxContainer>
             <ItemList Name="Recipes" Access="Public" SelectMode="Single" VerticalExpand="True"/>
+            <ScrollContainer Name="RecipesGridScrollContainer" VerticalExpand="True" Access="Public" Visible="False">
+                <GridContainer Name="RecipesGrid" Columns="5" Access="Public"/>
+            </ScrollContainer>
         </BoxContainer>
-        <BoxContainer Orientation="Vertical" HorizontalExpand="True" SizeFlagsStretchRatio="0.6">
-            <Button Name="FavoriteButton" Visible="false" HorizontalExpand="False"
-                HorizontalAlignment="Right" Margin="0 0 0 15"/>
+        <BoxContainer Orientation="Vertical" HorizontalExpand="True">
+            <BoxContainer Orientation="Horizontal">
+                <Button Name="MenuGridViewButton" ToggleMode="True" Text="{Loc construction-menu-grid-view}"/>
+                <Button Name="FavoriteButton" Visible="false"/>
+            </BoxContainer>
             <Control>
                 <BoxContainer Orientation="Vertical" HorizontalExpand="True" Margin="0 0 0 5">
                     <BoxContainer Orientation="Horizontal" Align="Center">

Content.Client/Construction/UI/ConstructionMenu.xaml.cs

@@ -25,11 +25,16 @@ public interface IConstructionMenuView : IDisposable
         OptionButton OptionCategories { get; }
 
         bool EraseButtonPressed { get; set; }
+        bool GridViewButtonPressed { get; set; }
         bool BuildButtonPressed { get; set; }
 
         ItemList Recipes { get; }
         ItemList RecipeStepList { get; }
 
+
+        ScrollContainer RecipesGridScrollContainer { get; }
+        GridContainer RecipesGrid { get; }
+
         event EventHandler<(string search, string catagory)> PopulateRecipes;
         event EventHandler<ItemList.Item?> RecipeSelected;
         event EventHandler RecipeFavorited;
@@ -72,9 +77,16 @@ public bool EraseButtonPressed
             set => EraseButton.Pressed = value;
         }
 
+        public bool GridViewButtonPressed
+        {
+            get => MenuGridViewButton.Pressed;
+            set => MenuGridViewButton.Pressed = value;
+        }
+
         public ConstructionMenu()
         {
-            SetSize = MinSize = new Vector2(720, 320);
+            SetSize = new Vector2(560, 450);
+            MinSize = new Vector2(560, 320);
 
             IoCManager.InjectDependencies(this);
             RobustXamlLoader.Load(this);
@@ -102,6 +114,9 @@ public ConstructionMenu()
             EraseButton.OnToggled += args => EraseButtonToggled?.Invoke(this, args.Pressed);
 
             FavoriteButton.OnPressed += args => RecipeFavorited?.Invoke(this, EventArgs.Empty);
+
+            MenuGridViewButton.OnPressed += _ =>
+                PopulateRecipes?.Invoke(this, (SearchBar.Text, Categories[OptionCategories.SelectedId]));
         }
 
         public event EventHandler? ClearAllGhosts;

Content.Client/Construction/UI/ConstructionMenuPresenter.cs

@@ -1,7 +1,8 @@
 using System.Linq;
+using System.Numerics;
+using Content.Client.Stylesheets;
 using Content.Client.UserInterface.Systems.MenuBar.Widgets;
 using Content.Shared.Construction.Prototypes;
-using Content.Shared.Tag;
 using Content.Shared.Whitelist;
 using Robust.Client.GameObjects;
 using Robust.Client.Graphics;
@@ -11,7 +12,6 @@
 using Robust.Client.UserInterface.Controls;
 using Robust.Client.Utility;
 using Robust.Shared.Enums;
-using Robust.Shared.Graphics;
 using Robust.Shared.Prototypes;
 using static Robust.Client.UserInterface.Controls.BaseButton;
 
@@ -37,6 +37,7 @@ internal sealed class ConstructionMenuPresenter : IDisposable
         private ConstructionSystem? _constructionSystem;
         private ConstructionPrototype? _selected;
         private List<ConstructionPrototype> _favoritedRecipes = [];
+        private Dictionary<string, TextureButton> _recipeButtons = new();
         private string _selectedCategory = string.Empty;
         private string _favoriteCatName = "construction-category-favorites";
         private string _forAllCategoryName = "construction-category-all";
@@ -150,12 +151,24 @@ private void OnViewRecipeSelected(object? sender, ItemList.Item? item)
             PopulateInfo(_selected);
         }
 
+        private void OnGridViewRecipeSelected(object? sender, ConstructionPrototype? recipe)
+        {
+            if (recipe is null)
+            {
+                _selected = null;
+                _constructionView.ClearRecipeInfo();
+                return;
+            }
+
+            _selected = recipe;
+            if (_placementManager.IsActive && !_placementManager.Eraser) UpdateGhostPlacement();
+            PopulateInfo(_selected);
+        }
+
         private void OnViewPopulateRecipes(object? sender, (string search, string catagory) args)
         {
             var (search, category) = args;
-            var recipesList = _constructionView.Recipes;
 
-            recipesList.Clear();
             var recipes = new List<ConstructionPrototype>();
 
             var isEmptyCategory = string.IsNullOrEmpty(category) || category == _forAllCategoryName;
@@ -201,12 +214,79 @@ private void OnViewPopulateRecipes(object? sender, (string search, string catago
 
             recipes.Sort((a, b) => string.Compare(a.Name, b.Name, StringComparison.InvariantCulture));
 
-            foreach (var recipe in recipes)
+            var recipesList = _constructionView.Recipes;
+            recipesList.Clear();
+
+            var recipesGrid = _constructionView.RecipesGrid;
+            recipesGrid.RemoveAllChildren();
+
+            _constructionView.RecipesGridScrollContainer.Visible = _constructionView.GridViewButtonPressed;
+            _constructionView.Recipes.Visible = !_constructionView.GridViewButtonPressed;
+
+            if (_constructionView.GridViewButtonPressed)
             {
-                recipesList.Add(GetItem(recipe, recipesList));
+                foreach (var recipe in recipes)
+                {
+                    var item = GetItem(recipe, recipesList);
+
+                    var itemButton = new TextureButton
+                    {
+                        TextureNormal = item.Icon,
+                        VerticalAlignment = Control.VAlignment.Center,
+                        Name = recipe.Name,
+                        ToolTip = recipe.Name,
+                        Scale = new Vector2(1.35f),
+                        ToggleMode = true,
+                    };
+                    var itemButtonPanelContainer = new PanelContainer
+                    {
+                        PanelOverride = new StyleBoxFlat { BackgroundColor = StyleNano.ButtonColorDefault },
+                        Children = { itemButton },
+                    };
+
+                    itemButton.OnToggled += buttonToggledEventArgs =>
+                    {
+                        if (_selected is null)
+                            SelectGridButton(itemButton, buttonToggledEventArgs.Pressed);
+                        else
+                        {
+                            SelectGridButton(itemButton, true);
+                            if (_recipeButtons.TryGetValue(_selected.Name, out var oldButton))
+                            {
+                                oldButton.Pressed = false;
+                                SelectGridButton(oldButton, false);
+                                if (_selected == recipe)
+                                {
+                                    OnGridViewRecipeSelected(this, null);
+                                    return;
+                                }
+                            }
+                        }
+                        OnGridViewRecipeSelected(this, buttonToggledEventArgs.Pressed ? recipe : null);
+                    };
+
+                    recipesGrid.AddChild(itemButtonPanelContainer);
+                    _recipeButtons[recipe.Name] = itemButton;
+                    SelectGridButton(itemButton, _selected == recipe);
+                }
             }
+            else
+            {
+                foreach (var recipe in recipes)
+                {
+                    recipesList.Add(GetItem(recipe, recipesList));
+                }
+            }
+        }
+
+        private void SelectGridButton(TextureButton button, bool select)
+        {
+            if (button.Parent is not PanelContainer buttonPanel)
+                return;
 
-            // There is apparently no way to set which
+            button.Modulate = select ? Color.Green : Color.White;
+            var buttonColor = select ? StyleNano.ButtonColorDefault : Color.Transparent;
+            buttonPanel.PanelOverride = new StyleBoxFlat { BackgroundColor = buttonColor };
         }
 
         private void PopulateCategories(string? selectCategory = null)

Resources/Locale/en-US/construction/ui/construction-menu.ftl

@@ -5,3 +5,4 @@ construction-menu-place-ghost = Place construction ghost
 construction-menu-clear-all = Clear All
 construction-menu-eraser-mode = Eraser Mode
 construction-menu-craft = Craft
+construction-menu-grid-view = Grid View