From 8735c8341b27bb5dba3a410b4f43030bf2d5a557 Mon Sep 17 00:00:00 2001
From: Forbes <forbes@kindred-systems.com>
Date: Sun, 15 Feb 2026 12:59:40 -0600
Subject: [PATCH] feat(web): move edit/delete buttons into tab bar on item
 detail

Relocate Edit and Delete buttons from the header row into the tab bar,
grouping them with tab navigation to reduce mouse travel. Adds Pencil
and Trash2 icons for quick visual recognition.

Header now only shows part number, type badge, and close button.

Closes #119
---
 web/src/components/items/ItemDetail.tsx | 61 +++++++++++++++++--------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/web/src/components/items/ItemDetail.tsx b/web/src/components/items/ItemDetail.tsx
index 92f72ef..f9e719e 100644
--- a/web/src/components/items/ItemDetail.tsx
+++ b/web/src/components/items/ItemDetail.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { X } from "lucide-react";
+import { X, Pencil, Trash2 } from "lucide-react";
 import { get } from "../../api/client";
 import type { Item } from "../../api/types";
 import { MainTab } from "./MainTab";
@@ -114,22 +114,6 @@ export function ItemDetail({
           {item.item_type}
         </span>
         <span style={{ flex: 1 }} />
-        {isEditor && (
-          <>
-            <button
-              onClick={() => onEdit(item.part_number)}
-              style={headerBtnStyle}
-            >
-              Edit
-            </button>
-            <button
-              onClick={() => onDelete(item.part_number)}
-              style={{ ...headerBtnStyle, color: "var(--ctp-red)" }}
-            >
-              Delete
-            </button>
-          </>
-        )}
         <button
           onClick={onClose}
           style={{
@@ -142,11 +126,11 @@ export function ItemDetail({
         </button>
       </div>
 
-      {/* Tabs */}
+      {/* Tabs + actions */}
       <div
         style={{
           display: "flex",
-          gap: "0",
+          alignItems: "center",
           borderBottom: "1px solid var(--ctp-surface1)",
           backgroundColor: "var(--ctp-mantle)",
           flexShrink: 0,
@@ -175,6 +159,33 @@ export function ItemDetail({
             {tab.label}
           </button>
         ))}
+        <span style={{ flex: 1 }} />
+        {isEditor && (
+          <div
+            style={{ display: "flex", gap: "0.25rem", paddingRight: "0.5rem" }}
+          >
+            <button
+              onClick={() => onEdit(item.part_number)}
+              style={{
+                ...tabActionBtnStyle,
+                color: "var(--ctp-subtext1)",
+              }}
+              title="Edit item"
+            >
+              <Pencil size={13} /> Edit
+            </button>
+            <button
+              onClick={() => onDelete(item.part_number)}
+              style={{
+                ...tabActionBtnStyle,
+                color: "var(--ctp-red)",
+              }}
+              title="Delete item"
+            >
+              <Trash2 size={13} /> Delete
+            </button>
+          </div>
+        )}
       </div>
 
       {/* Tab Content */}
@@ -207,3 +218,15 @@ const headerBtnStyle: React.CSSProperties = {
   fontSize: "var(--font-table)",
   padding: "0.25rem 0.5rem",
 };
+
+const tabActionBtnStyle: React.CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.25rem",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  fontSize: "var(--font-table)",
+  padding: "0.25rem 0.5rem",
+  borderRadius: "0.25rem",
+};
-- 
2.49.1