From 6e3628b32c73289cc89ab8bc66e341b32b99abd6 Mon Sep 17 00:00:00 2001
From: Casper3667 <8396443+Casper3667@users.noreply.github.com>
Date: Thu, 26 Feb 2026 19:37:59 +0100
Subject: [PATCH] Upgrades smartfridge ui (#21906)

For smartfridges and subtypes, this makes the vend buttons a little
neater and more importantly make it possible to see what you are buying
as the icons are displayed.
The icons are not displayed for produce for the time being.
<img width="400" height="500" alt="image"
src="https://github.com/user-attachments/assets/12632d10-8aea-4255-b4db-7643e0d1a9cb"
/>
---
 code/modules/cooking/machinery/smartfridge.dm |  27 +++-
 html/changelogs/FridgeUpgradeWooo.yml         |   6 +
 tgui/packages/tgui/interfaces/SmartFridge.tsx | 141 +++++++++++-------
 3 files changed, 117 insertions(+), 57 deletions(-)
 create mode 100644 html/changelogs/FridgeUpgradeWooo.yml

diff --git a/code/modules/cooking/machinery/smartfridge.dm b/code/modules/cooking/machinery/smartfridge.dm
index 19bb8bdd9f9..1d2e4ad6281 100644
--- a/code/modules/cooking/machinery/smartfridge.dm
+++ b/code/modules/cooking/machinery/smartfridge.dm
@@ -428,10 +428,35 @@
 		var/K = item_quants[i]
 		var/count = item_quants[K]
 		if(count > 0)
-			items.Add(list(list("display_name" = capitalize(K), "vend" = i, "quantity" = count)))
+
+			var/obj/item/item_used = null
+			for (var/obj/item/O in contents)
+				if(O.name == K)
+					item_used = O
+					break
+
+			var/icon/item_icon = null
+			if(item_used)
+				if(istype(item_used, /obj/item/seeds))
+					var/obj/item/seeds/S = item_used
+					item_icon = S.update_appearance(TRUE)
+				else
+					item_icon = new /icon(item_used.icon, item_used.icon_state)
+
+			var/final_icon = null
+			if(item_icon)
+				final_icon = icon2base64(item_icon)
+
+			items.Add(list(list(
+				"display_name" = capitalize(K),
+				"vend" = i,
+				"quantity" = count,
+				"icon" = final_icon,
+			)))
 
 	if(length(items) > 0)
 		data["contents"] = items
+
 	return data
 
 /obj/machinery/smartfridge/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
diff --git a/html/changelogs/FridgeUpgradeWooo.yml b/html/changelogs/FridgeUpgradeWooo.yml
new file mode 100644
index 00000000000..0536ba7f4bd
--- /dev/null
+++ b/html/changelogs/FridgeUpgradeWooo.yml
@@ -0,0 +1,6 @@
+author: TheGreyWolf
+
+delete-after: True
+
+changes:
+  - rscadd: "Smartfridges and variants got an UI upgrade."
diff --git a/tgui/packages/tgui/interfaces/SmartFridge.tsx b/tgui/packages/tgui/interfaces/SmartFridge.tsx
index 604470778f4..ee0c6ef1b63 100644
--- a/tgui/packages/tgui/interfaces/SmartFridge.tsx
+++ b/tgui/packages/tgui/interfaces/SmartFridge.tsx
@@ -1,13 +1,6 @@
 import { BooleanLike } from '../../common/react';
 import { useBackend, useLocalState } from '../backend';
-import {
-  BlockQuote,
-  Box,
-  Button,
-  LabeledList,
-  Section,
-  Input,
-} from '../components';
+import { BlockQuote, Box, Button, Section, Input } from '../components';
 import { Window } from '../layouts';
 
 export type FridgeData = {
@@ -23,6 +16,7 @@ type Item = {
   display_name: string;
   vend: number;
   quantity: number;
+  icon?: string | null;
 };
 
 export const SmartFridge = (props, context) => {
@@ -95,57 +89,92 @@ export const ContentsWindow = (props, context) => {
 
   return (
     <Section>
-      <LabeledList>
+      <Box>
         {itemListSorted.map((item) => (
-          <LabeledList.Item key={item.display_name} label={item.display_name}>
-            x{item.quantity}&nbsp;
-            {item.quantity > 0 ? (
-              <Button
-                content="x1"
-                icon="arrow-alt-circle-down"
-                onClick={() => {
-                  act('vendItem', { vendItem: item.vend, amount: 1 });
-                }}
+          <Box
+            key={`${item.vend}-${item.display_name}`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '4px 0',
+            }}
+          >
+            {/* Item icon */}
+            {item.icon ? (
+              <Box
+                as="img"
+                src={`data:image/png;base64,${item.icon}`}
+                style={{ width: '32px', height: '32px', flexShrink: 0 }}
               />
-            ) : (
-              ''
-            )}
-            {item.quantity > 5 ? (
-              <Button
-                content="x5"
-                icon="arrow-alt-circle-down"
-                onClick={() => {
-                  act('vendItem', { vendItem: item.vend, amount: 5 });
-                }}
-              />
-            ) : (
-              ''
-            )}
-            {item.quantity > 10 ? (
-              <Button
-                content="x10"
-                icon="arrow-alt-circle-down"
-                onClick={() => {
-                  act('vendItem', { vendItem: item.vend, amount: 10 });
-                }}
-              />
-            ) : (
-              ''
-            )}
-            {item.quantity > 25 ? (
-              <Button
-                content="x25"
-                icon="arrow-alt-circle-down"
-                onClick={() => {
-                  act('vendItem', { vendItem: item.vend, amount: 25 });
-                }}
-              />
-            ) : (
-              ''
-            )}
-          </LabeledList.Item>
+            ) : null}
+            {/* Name stuff */}
+            <Box
+              style={{
+                flex: 2,
+                minWidth: 0,
+                whiteSpace: 'normal',
+                overflowWrap: 'break-word',
+                wordBreak: 'break-word',
+              }}
+            >
+              {item.display_name}
+            </Box>
+            {/* Amount */}x{item.quantity}
+            {/* Vend buttons */}
+            <Box
+              style={{
+                flex: 1.2,
+                minWidth: 0,
+                whiteSpace: 'normal',
+                overflowWrap: 'break-word',
+                wordBreak: 'break-word',
+              }}
+            >
+              {item.quantity > 0 && (
+                <Button
+                  content="x1"
+                  icon="arrow-alt-circle-down"
+                  width="50px"
+                  onClick={() =>
+                    act('vendItem', { vendItem: item.vend, amount: 1 })
+                  }
+                />
+              )}
+              {item.quantity > 5 && (
+                <Button
+                  content="x5"
+                  icon="arrow-alt-circle-down"
+                  width="50px"
+                  onClick={() =>
+                    act('vendItem', { vendItem: item.vend, amount: 5 })
+                  }
+                />
+              )}
+              {item.quantity > 10 && (
+                <Button
+                  content="x10"
+                  icon="arrow-alt-circle-down"
+                  width="50px"
+                  onClick={() =>
+                    act('vendItem', { vendItem: item.vend, amount: 10 })
+                  }
+                />
+              )}
+              {item.quantity > 25 && (
+                <Button
+                  content="x25"
+                  icon="arrow-alt-circle-down"
+                  width="50px"
+                  onClick={() =>
+                    act('vendItem', { vendItem: item.vend, amount: 25 })
+                  }
+                />
+              )}
+            </Box>
+          </Box>
         ))}
-      </LabeledList>
+      </Box>
     </Section>
   );
 };