Merge branch 'main' into feat-sse-settings-changed

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",
+};