From f3fd10a0a4cc6a7a46e9d24236226747da4912ce Mon Sep 17 00:00:00 2001
From: HelmCrab <90987989+Thera-Pissed@users.noreply.github.com>
Date: Fri, 4 Oct 2024 15:49:09 -0500
Subject: [PATCH] TGUI pipe dispenser (#3464)

<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->
<!-- You can view Contributing.MD for a detailed description of the pull
request process. -->

## About The Pull Request
Implements a tweaked UI from rapid pipe dispensers for normal
(obj/machinery/pipedispenser) dispensers
Pipe dispensers now have a 5ms delay on prints and can make disposals
and transport tubes.
Removes dispenser/disposals and dispenser/transport because they're
redundant now.

![image](https://github.com/user-attachments/assets/73a9bd7a-7d5d-49d2-a8f2-3313350ee4c8)

updates text2path regex to 115 from 117
updates non-bitwise << uses to 262 from 266
<!-- Describe The Pull Request. Please be sure every change is
documented or this can delay review and even discourage maintainers from
merging your PR! -->

## Why It's Good For The Game
The old UI sucks and is laggy and bad.
<!-- Please add a short description of why you think these changes would
benefit the game. If you can't justify it in words, it might not be
worth adding. -->

## Changelog

:cl:
add: pipe dispenser UI is now similar to rapid pipe dispenser UI.
/:cl:

<!-- Both :cl:'s are required for the changelog to work! You can put
your name to the right of the first :cl: if you want to overwrite your
GitHub username as author ingame. -->
<!-- You can use multiple of the same prefix (they're only used for the
icon ingame) and delete the unneeded ones. Despite some of the tags,
changelogs should generally represent how a player might be affected by
the changes rather than a summary of the PR's contents. -->

---------

Co-authored-by: FalloutFalcon <86381784+FalloutFalcon@users.noreply.github.com>
---
 .../independent/independent_junker.dmm        |   2 +-
 check_regex.yaml                              |   4 +-
 code/game/machinery/pipe/pipe_dispenser.dm    | 338 +++++++++---------
 .../packages/tgui/interfaces/PipeDispenser.js | 193 ++++++++++
 4 files changed, 362 insertions(+), 175 deletions(-)
 create mode 100644 tgui/packages/tgui/interfaces/PipeDispenser.js

diff --git a/_maps/shuttles/independent/independent_junker.dmm b/_maps/shuttles/independent/independent_junker.dmm
index 7819d04ec1c2..0ae98ef37fe2 100644
--- a/_maps/shuttles/independent/independent_junker.dmm
+++ b/_maps/shuttles/independent/independent_junker.dmm
@@ -2284,7 +2284,6 @@
 /turf/closed/wall/r_wall,
 /area/ship/maintenance/port)
 "Ro" = (
-/obj/machinery/pipedispenser/disposal,
 /obj/item/reagent_containers/food/drinks/mug/tea{
 	pixel_y = 8;
 	pixel_x = -7
@@ -2305,6 +2304,7 @@
 /obj/machinery/atmospherics/components/unary/vent_pump/on/layer2{
 	dir = 1
 	},
+/obj/machinery/pipedispenser,
 /turf/open/floor/plating,
 /area/ship/maintenance/central)
 "RQ" = (
diff --git a/check_regex.yaml b/check_regex.yaml
index eadd642f0676..41174bd9aa22 100644
--- a/check_regex.yaml
+++ b/check_regex.yaml
@@ -31,14 +31,14 @@ standards:
     - exactly: [4, "/mob text paths", '"/mob']
     - exactly: [42, "/obj text paths", '"/obj']
     - exactly: [0, "/turf text paths", '"/turf']
-    - exactly: [117, "text2path uses", "text2path"]
+    - exactly: [115, "text2path uses", "text2path"]
 
     - exactly: [18, "world<< uses", 'world[ \t]*<<']
     - exactly: [0, "world.log<< uses", 'world.log[ \t]*<<']
 
     - exactly:
           [
-              266,
+              262,
               "non-bitwise << uses",
               '(?<!\d)(?<!\d\s)(?<!<)<<(?!=|\s\d|\d|<|\/)',
           ]
diff --git a/code/game/machinery/pipe/pipe_dispenser.dm b/code/game/machinery/pipe/pipe_dispenser.dm
index 0772e483a536..f21b7a59e035 100644
--- a/code/game/machinery/pipe/pipe_dispenser.dm
+++ b/code/game/machinery/pipe/pipe_dispenser.dm
@@ -1,65 +1,120 @@
+#define ATMOS_CATEGORY 0
+#define DISPOSALS_CATEGORY 1
+#define TRANSIT_CATEGORY 2
+
+
 /obj/machinery/pipedispenser
 	name = "pipe dispenser"
 	icon = 'icons/obj/stationobjs.dmi'
 	icon_state = "pipe_d"
 	desc = "Dispenses countless types of pipes. Very useful if you need pipes."
+	layer = GATEWAY_UNDERLAY_LAYER //so it renders underneath dispensed disposals
 	density = TRUE
 	circuit = /obj/item/circuitboard/machine/pipedispenser
 	interaction_flags_machine = INTERACT_MACHINE_ALLOW_SILICON | INTERACT_MACHINE_OPEN_SILICON | INTERACT_MACHINE_OFFLINE
-	var/wait = 0
+	var/delay = 0
+	var/busy = FALSE
+	var/p_dir = NORTH
+	var/p_flipped = FALSE
+	var/category = ATMOS_CATEGORY
 	var/piping_layer = PIPING_LAYER_DEFAULT
+	var/ducting_layer = DUCT_LAYER_DEFAULT
+	var/datum/pipe_info/recipe
+	var/paint_color = "grey"
+	var/static/datum/pipe_info/first_atmos
+	var/static/datum/pipe_info/first_disposal
+	var/static/datum/pipe_info/first_transit
+
+/obj/machinery/pipedispenser/Initialize()
+	. = ..()
+	if(!first_atmos)
+		first_atmos = GLOB.atmos_pipe_recipes[GLOB.atmos_pipe_recipes[1]][1]
+	if(!first_disposal)
+		first_disposal = GLOB.disposal_pipe_recipes[GLOB.disposal_pipe_recipes[1]][1]
+	if(!first_transit)
+		first_transit = GLOB.transit_tube_recipes[GLOB.transit_tube_recipes[1]][1]
+
+	recipe = first_atmos
+
+/obj/machinery/pipedispenser/ui_assets(mob/user)
+	return list(
+		get_asset_datum(/datum/asset/spritesheet/pipes),
+	)
 
 /obj/machinery/pipedispenser/attack_paw(mob/user)
 	return attack_hand(user)
 
-/obj/machinery/pipedispenser/ui_interact(mob/user)
+/obj/machinery/pipedispenser/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "PipeDispenser", name)
+		ui.open()
+
+/obj/machinery/pipedispenser/ui_data(mob/user)
+	var/list/data = list(
+		"category" = category,
+		"piping_layer" = piping_layer,
+		"ducting_layer" = ducting_layer,
+		"preview_rows" = recipe.get_preview(p_dir),
+		"categories" = list(),
+		"selected_color" = paint_color,
+		"paint_colors" = GLOB.pipe_paint_colors
+	)
+
+	var/list/recipes
+	switch(category)
+		if(ATMOS_CATEGORY)
+			recipes = GLOB.atmos_pipe_recipes
+		if(DISPOSALS_CATEGORY)
+			recipes = GLOB.disposal_pipe_recipes
+		if(TRANSIT_CATEGORY)
+			recipes = GLOB.transit_tube_recipes
+	for(var/c in recipes)
+		var/list/cat = recipes[c]
+		var/list/r = list()
+		for(var/i in 1 to cat.len)
+			var/datum/pipe_info/info = cat[i]
+			r += list(list("pipe_name" = info.name, "pipe_index" = i, "selected" = (info == recipe), "all_layers" = info.all_layers))
+		data["categories"] += list(list("cat_name" = c, "recipes" = r))
+
+	return data
+
+/obj/machinery/pipedispenser/ui_act(action, params)
 	. = ..()
-	var/dat = "PIPING LAYER: <A href='?src=[REF(src)];layer_down=1'>--</A><b>[piping_layer]</b><A href='?src=[REF(src)];layer_up=1'>++</A><BR>"
-
-	var/recipes = GLOB.atmos_pipe_recipes
-
-	for(var/category in recipes)
-		var/list/cat_recipes = recipes[category]
-		dat += "<b>[category]:</b><ul>"
-
-		for(var/i in cat_recipes)
-			var/datum/pipe_info/I = i
-			dat += I.Render(src)
-
-		dat += "</ul>"
-
-	user << browse("<HEAD><TITLE>[src]</TITLE></HEAD><TT>[dat]</TT>", "window=pipedispenser")
-	onclose(user, "pipedispenser")
-	return
-
-/obj/machinery/pipedispenser/Topic(href, href_list)
-	if(..())
-		return 1
-	var/mob/living/L = usr
-	if(!anchored || (istype(L) && !(L.mobility_flags & MOBILITY_UI)) || usr.stat != CONSCIOUS || HAS_TRAIT(usr, TRAIT_HANDS_BLOCKED) || !in_range(loc, usr))
-		usr << browse(null, "window=pipedispenser")
-		return 1
-	usr.set_machine(src)
-	add_fingerprint(usr)
-	if(href_list["makepipe"])
-		if(wait < world.time)
-			var/p_type = text2path(href_list["makepipe"])
-			if (!verify_recipe(GLOB.atmos_pipe_recipes, p_type))
-				return
-			var/p_dir = text2num(href_list["dir"])
-			var/obj/item/pipe/P = new (loc, p_type, p_dir)
-			P.setPipingLayer(piping_layer)
-			P.add_fingerprint(usr)
-			wait = world.time + 10
-	if(href_list["makemeter"])
-		if(wait < world.time)
-			new /obj/item/pipe_meter(loc)
-			wait = world.time + 15
-	if(href_list["layer_up"])
-		piping_layer = clamp(++piping_layer, PIPING_LAYER_MIN, PIPING_LAYER_MAX)
-	if(href_list["layer_down"])
-		piping_layer = clamp(--piping_layer, PIPING_LAYER_MIN, PIPING_LAYER_MAX)
-	return
+	if(.)
+		return
+
+	if(!usr.canUseTopic(src, BE_CLOSE))
+		return
+	switch(action)
+		if("color")
+			paint_color = params["paint_color"]
+		if("category")
+			category = text2num(params["category"])
+			switch(category)
+				if(DISPOSALS_CATEGORY)
+					recipe = first_disposal
+				if(ATMOS_CATEGORY)
+					recipe = first_atmos
+				if(TRANSIT_CATEGORY)
+					recipe = first_transit
+			p_dir = NORTH
+		if("print")
+			make_pipe()
+		if("piping_layer")
+			piping_layer = text2num(params["piping_layer"])
+		if("ducting_layer")
+			ducting_layer = text2num(params["ducting_layer"])
+		if("pipe_type")
+			var/static/list/recipes
+			if(!recipes)
+				recipes = GLOB.disposal_pipe_recipes + GLOB.atmos_pipe_recipes + GLOB.transit_tube_recipes
+			recipe = recipes[params["category"]][text2num(params["pipe_type"])]
+			p_dir = NORTH
+		if("setdir")
+			p_dir = text2dir(params["dir"])
+			p_flipped = text2num(params["flipped"])
+	return TRUE
 
 /obj/machinery/pipedispenser/attackby(obj/item/W, mob/user, params)
 	add_fingerprint(user)
@@ -70,15 +125,6 @@
 	else
 		return ..()
 
-/obj/machinery/pipedispenser/proc/verify_recipe(recipes, path)
-	for(var/category in recipes)
-		var/list/cat_recipes = recipes[category]
-		for(var/i in cat_recipes)
-			var/datum/pipe_info/info = i
-			if (path == info.id)
-				return TRUE
-	return FALSE
-
 /obj/machinery/pipedispenser/wrench_act(mob/living/user, obj/item/I)
 	..()
 	if(default_unfasten_wrench(user, I, 40))
@@ -96,129 +142,77 @@
 	default_deconstruction_crowbar(I)
 	return TRUE
 
-/obj/machinery/pipedispenser/disposal
-	name = "disposal pipe dispenser"
-	icon = 'icons/obj/stationobjs.dmi'
-	icon_state = "pipe_d"
-	desc = "Dispenses pipes that will ultimately be used to move trash around."
-	density = TRUE
-
-
 //Allow you to drag-drop disposal pipes and transit tubes into it
-/obj/machinery/pipedispenser/disposal/MouseDrop_T(obj/structure/pipe, mob/usr)
-	if(!usr.incapacitated())
+/obj/machinery/pipedispenser/MouseDrop_T(obj/structure/pipe, mob/usr)
+	if(usr.incapacitated())
 		return
 
-	if (!istype(pipe, /obj/structure/disposalconstruct) && !istype(pipe, /obj/structure/c_transit_tube) && !istype(pipe, /obj/structure/c_transit_tube_pod))
+	if(!istype(pipe, /obj/structure/disposalconstruct) && !istype(pipe, /obj/structure/c_transit_tube) && !istype(pipe, /obj/structure/c_transit_tube_pod))
 		return
 
-	if (get_dist(usr, src) > 1 || get_dist(src,pipe) > 1)
+	if(get_dist(usr, src) > 1 || get_dist(src,pipe) > 1)
 		return
 
-	if (pipe.anchored)
+	if(pipe.anchored)
 		return
 
 	qdel(pipe)
 
-/obj/machinery/pipedispenser/disposal/interact(mob/user)
-
-	var/dat = ""
-	var/recipes = GLOB.disposal_pipe_recipes
-
-	for(var/category in recipes)
-		var/list/cat_recipes = recipes[category]
-		dat += "<b>[category]:</b><ul>"
-
-		for(var/i in cat_recipes)
-			var/datum/pipe_info/I = i
-			dat += I.Render(src)
-
-		dat += "</ul>"
-
-	user << browse("<HEAD><TITLE>[src]</TITLE></HEAD><TT>[dat]</TT>", "window=pipedispenser")
-	return
-
-
-/obj/machinery/pipedispenser/disposal/Topic(href, href_list)
-	if(..())
-		return 1
-	usr.set_machine(src)
-	add_fingerprint(usr)
-	if(href_list["dmake"])
-		if(wait < world.time)
-			var/p_type = text2path(href_list["dmake"])
-			if (!verify_recipe(GLOB.disposal_pipe_recipes, p_type))
-				return
-			var/obj/structure/disposalconstruct/C = new (loc, p_type)
-
-			if(!C.can_place())
-				to_chat(usr, "<span class='warning'>There's not enough room to build that here!</span>")
-				qdel(C)
-				return
-			if(href_list["dir"])
-				C.setDir(text2num(href_list["dir"]))
-			C.add_fingerprint(usr)
-			C.update_appearance()
-			wait = world.time + 15
-	return
-
-//transit tube dispenser
-//inherit disposal for the dragging proc
-/obj/machinery/pipedispenser/disposal/transit_tube
-	name = "transit tube dispenser"
-	icon = 'icons/obj/stationobjs.dmi'
-	icon_state = "pipe_d"
-	density = TRUE
-	desc = "Dispenses pipes that will move beings around."
-
-/obj/machinery/pipedispenser/disposal/transit_tube/interact(mob/user)
-
-	var/dat = {"<B>Transit Tubes:</B><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_STRAIGHT]'>Straight Tube</A><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_STRAIGHT_CROSSING]'>Straight Tube with Crossing</A><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_CURVED]'>Curved Tube</A><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_DIAGONAL]'>Diagonal Tube</A><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_DIAGONAL_CROSSING]'>Diagonal Tube with Crossing</A><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_JUNCTION]'>Junction</A><BR>
-<b>Station Equipment:</b><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_STATION]'>Through Tube Station</A><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_TERMINUS]'>Terminus Tube Station</A><BR>
-<A href='?src=[REF(src)];tube=[TRANSIT_TUBE_POD]'>Transit Tube Pod</A><BR>
-"}
-
-	user << browse("<HEAD><TITLE>[src]</TITLE></HEAD><TT>[dat]</TT>", "window=pipedispenser")
-	return
-
-
-/obj/machinery/pipedispenser/disposal/transit_tube/Topic(href, href_list)
-	if(..())
-		return 1
-	usr.set_machine(src)
-	add_fingerprint(usr)
-	if(wait < world.time)
-		if(href_list["tube"])
-			var/tube_type = text2num(href_list["tube"])
-			var/obj/structure/C
-			switch(tube_type)
-				if(TRANSIT_TUBE_STRAIGHT)
-					C = new /obj/structure/c_transit_tube(loc)
-				if(TRANSIT_TUBE_STRAIGHT_CROSSING)
-					C = new /obj/structure/c_transit_tube/crossing(loc)
-				if(TRANSIT_TUBE_CURVED)
-					C = new /obj/structure/c_transit_tube/curved(loc)
-				if(TRANSIT_TUBE_DIAGONAL)
-					C = new /obj/structure/c_transit_tube/diagonal(loc)
-				if(TRANSIT_TUBE_DIAGONAL_CROSSING)
-					C = new /obj/structure/c_transit_tube/diagonal/crossing(loc)
-				if(TRANSIT_TUBE_JUNCTION)
-					C = new /obj/structure/c_transit_tube/junction(loc)
-				if(TRANSIT_TUBE_STATION)
-					C = new /obj/structure/c_transit_tube/station(loc)
-				if(TRANSIT_TUBE_TERMINUS)
-					C = new /obj/structure/c_transit_tube/station/reverse(loc)
-				if(TRANSIT_TUBE_POD)
-					C = new /obj/structure/c_transit_tube_pod(loc)
-			if(C)
-				C.add_fingerprint(usr)
-			wait = world.time + 15
-	return
+/obj/machinery/pipedispenser/proc/make_pipe(mob/user)
+	if(busy)
+		src.visible_message(span_warning("[src] is busy."))
+		return
+	var/queued_p_type = recipe.id
+	var/queued_p_dir = p_dir
+	var/queued_p_flipped = p_flipped
+	switch(category)
+		if(ATMOS_CATEGORY)
+			if(recipe.type == /datum/pipe_info/meter)
+				new /obj/item/pipe_meter(loc)
+				on_make_pipe()
+			else
+				if(recipe.all_layers == FALSE && (piping_layer == 1 || piping_layer == 5))
+					src.visible_message(span_warning("[src] can't print this object on the layer..."))
+					return
+				var/obj/machinery/atmospherics/path = queued_p_type
+				var/pipe_item_type = initial(path.construction_type) || /obj/item/pipe
+				var/obj/item/pipe/P = new pipe_item_type(loc, queued_p_type, queued_p_dir)
+				on_make_pipe()
+
+				if(queued_p_flipped && istype(P, /obj/item/pipe/trinary/flippable))
+					var/obj/item/pipe/trinary/flippable/F = P
+					F.flipped = queued_p_flipped
+
+				P.update()
+				P.setPipingLayer(piping_layer)
+				if(ispath(path, /obj/machinery/atmospherics/pipe) && !findtext("[queued_p_type]", "layer_manifold"))
+					P.add_atom_colour(GLOB.pipe_paint_colors[paint_color], FIXED_COLOUR_PRIORITY)
+
+		if(DISPOSALS_CATEGORY) //Making disposals pipes
+			new /obj/structure/disposalconstruct(loc, queued_p_type, queued_p_dir, queued_p_flipped)
+			on_make_pipe()
+			return
+
+		if(TRANSIT_CATEGORY) //Making transit tubes
+			if(istype(queued_p_type, /obj/structure/c_transit_tube_pod))
+				new /obj/structure/c_transit_tube_pod(loc)
+				on_make_pipe()
+			else
+				var/obj/structure/c_transit_tube/tube = new queued_p_type(loc)
+				on_make_pipe()
+				tube.setDir(queued_p_dir)
+
+				if(queued_p_flipped)
+					tube.setDir(turn(queued_p_dir, 45))
+					tube.simple_rotate_flip()
+
+/obj/machinery/pipedispenser/proc/on_make_pipe()
+	busy = TRUE
+	delay = addtimer(CALLBACK(src, PROC_REF(reset_busy)), 5)
+
+/obj/machinery/pipedispenser/proc/reset_busy()
+	busy = FALSE
+
+#undef ATMOS_CATEGORY
+#undef DISPOSALS_CATEGORY
+#undef TRANSIT_CATEGORY
diff --git a/tgui/packages/tgui/interfaces/PipeDispenser.js b/tgui/packages/tgui/interfaces/PipeDispenser.js
new file mode 100644
index 000000000000..61798b67306a
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/PipeDispenser.js
@@ -0,0 +1,193 @@
+import { classes } from 'common/react';
+import { useBackend, useLocalState } from '../backend';
+import {
+  Box,
+  Button,
+  ColorBox,
+  Flex,
+  LabeledList,
+  Section,
+  Tabs,
+} from '../components';
+import { Window } from '../layouts';
+
+const ROOT_CATEGORIES = ['Atmospherics', 'Disposals', 'Transit Tubes'];
+
+const ICON_BY_CATEGORY_NAME = {
+  'Atmospherics': 'wrench',
+  'Disposals': 'trash-alt',
+  'Transit Tubes': 'bus',
+  'Pipes': 'grip-lines',
+  'Disposal Pipes': 'grip-lines',
+  'Devices': 'microchip',
+  'Heat Exchange': 'thermometer-half',
+  'Station Equipment': 'microchip',
+};
+
+const PAINT_COLORS = {
+  grey: '#bbbbbb',
+  amethyst: '#a365ff',
+  blue: '#4466ff',
+  brown: '#b26438',
+  cyan: '#48eae8',
+  dark: '#808080',
+  green: '#1edd00',
+  orange: '#ffa030',
+  purple: '#b535ea',
+  red: '#ff3333',
+  violet: '#6e00f6',
+  yellow: '#ffce26',
+};
+
+export const PipeDispenser = (props, context) => {
+  const { act, data } = useBackend(context);
+  const {
+    category: rootCategoryIndex,
+    categories = [],
+    selected_color,
+    piping_layer,
+    mode,
+  } = data;
+  const previews = data.preview_rows.flatMap((row) => row.previews);
+  const [categoryName, setCategoryName] = useLocalState(
+    context,
+    'categoryName'
+  );
+  const shownCategory =
+    categories.find((category) => category.cat_name === categoryName) ||
+    categories[0];
+  return (
+    <Window width={425} height={515} resizable>
+      <Window.Content scrollable>
+        <Section>
+          <LabeledList>
+            <LabeledList.Item label="Category">
+              {ROOT_CATEGORIES.map((categoryName, i) => (
+                <Button
+                  key={categoryName}
+                  selected={rootCategoryIndex === i}
+                  icon={ICON_BY_CATEGORY_NAME[categoryName]}
+                  color="transparent"
+                  content={categoryName}
+                  onClick={() => act('category', { category: i })}
+                />
+              ))}
+            </LabeledList.Item>
+            <LabeledList.Item label="Print">
+              <Button
+                key={'Print Pipe'}
+                icon={'wrench'}
+                color="green"
+                content={'Print Pipe'}
+                onClick={() => act('print')}
+              />
+            </LabeledList.Item>
+            <LabeledList.Item label="Color">
+              <Box inline width="64px" color={PAINT_COLORS[selected_color]}>
+                {selected_color}
+              </Box>
+              {Object.keys(PAINT_COLORS).map((colorName) => (
+                <ColorBox
+                  key={colorName}
+                  ml={1}
+                  color={PAINT_COLORS[colorName]}
+                  onClick={() =>
+                    act('color', {
+                      paint_color: colorName,
+                    })
+                  }
+                />
+              ))}
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+        <Flex m={-0.5}>
+          <Flex.Item m={0.5}>
+            <Section>
+              {rootCategoryIndex === 0 && (
+                <Box mb={1}>
+                  {[1, 2, 3, 4, 5].map((layer) => (
+                    <Button.Checkbox
+                      key={layer}
+                      fluid
+                      checked={layer === piping_layer}
+                      content={'Layer ' + layer}
+                      onClick={() =>
+                        act('piping_layer', {
+                          piping_layer: layer,
+                        })
+                      }
+                    />
+                  ))}
+                </Box>
+              )}
+              <Box width="108px">
+                {previews.map((preview) => (
+                  <Button
+                    key={preview.dir}
+                    title={preview.dir_name}
+                    selected={preview.selected}
+                    style={{
+                      width: '48px',
+                      height: '48px',
+                      padding: 0,
+                    }}
+                    onClick={() =>
+                      act('setdir', {
+                        dir: preview.dir,
+                        flipped: preview.flipped,
+                      })
+                    }
+                  >
+                    <Box
+                      className={classes([
+                        'pipes32x32',
+                        preview.dir + '-' + preview.icon_state,
+                      ])}
+                      style={{
+                        transform: 'scale(1.5) translate(17%, 17%)',
+                      }}
+                    />
+                  </Button>
+                ))}
+              </Box>
+            </Section>
+          </Flex.Item>
+          <Flex.Item m={0.5} grow={1}>
+            <Section>
+              <Tabs>
+                {categories.map((category, i) => (
+                  <Tabs.Tab
+                    fluid
+                    key={category.cat_name}
+                    icon={ICON_BY_CATEGORY_NAME[category.cat_name]}
+                    selected={category.cat_name === shownCategory.cat_name}
+                    onClick={() => setCategoryName(category.cat_name)}
+                  >
+                    {category.cat_name}
+                  </Tabs.Tab>
+                ))}
+              </Tabs>
+              {shownCategory?.recipes.map((recipe) => (
+                <Button.Checkbox
+                  key={recipe.pipe_index}
+                  fluid
+                  ellipsis
+                  checked={recipe.selected}
+                  content={recipe.pipe_name}
+                  title={recipe.pipe_name}
+                  onClick={() =>
+                    act('pipe_type', {
+                      pipe_type: recipe.pipe_index,
+                      category: shownCategory.cat_name,
+                    })
+                  }
+                />
+              ))}
+            </Section>
+          </Flex.Item>
+        </Flex>
+      </Window.Content>
+    </Window>
+  );
+};