fix: address final review issues - promise handling, error scoping, controlled inputs, SortHeader

app/components/StockTable.tsx

@@ -19,6 +19,24 @@ interface StockTableProps {
 type SortField = "ticker" | "createdAt" | "updatedAt";
 type SortDirection = "asc" | "desc";
 
+function SortHeader({ field, children, sortField, sortDirection, onSort }: {
+  field: SortField;
+  children: ReactNode;
+  sortField: SortField;
+  sortDirection: SortDirection;
+  onSort: (field: SortField) => void;
+}) {
+  return (
+    <th
+      className="text-left py-2 px-3 font-medium text-gray-700 cursor-pointer hover:text-gray-900 select-none"
+      onClick={() => onSort(field)}
+    >
+      {children}
+      {sortField === field && <span className="ml-1">{sortDirection === "asc" ? "↑" : "↓"}</span>}
+    </th>
+  );
+}
+
 export default function StockTable({ stocks, onNotesSave, saveError }: StockTableProps) {
   const [search, setSearch] = useState("");
   const [sortField, setSortField] = useState<SortField>("ticker");
@@ -72,16 +90,6 @@ export default function StockTable({ stocks, onNotesSave, saveError }: StockTabl
     }
   };
 
-  const SortHeader = ({ field, children }: { field: SortField; children: ReactNode }) => (
-    <th
-      className="text-left py-2 px-3 font-medium text-gray-700 cursor-pointer hover:text-gray-900 select-none"
-      onClick={() => handleSort(field)}
-    >
-      {children}
-      {sortField === field && <span className="ml-1">{sortDirection === "asc" ? "↑" : "↓"}</span>}
-    </th>
-  );
-
   if (stocks.length === 0) {
     return (
       <p className="text-gray-500 py-8">No stocks tracked yet. Visit the stocks page to add some.</p>
@@ -109,12 +117,12 @@ export default function StockTable({ stocks, onNotesSave, saveError }: StockTabl
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-gray-200">
-              <SortHeader field="ticker">Ticker</SortHeader>
+              <SortHeader field="ticker" sortField={sortField} sortDirection={sortDirection} onSort={handleSort}>Ticker</SortHeader>
               <th className="text-left py-2 px-3 font-medium text-gray-700">Notes</th>
               <th className="text-left py-2 px-3 font-medium text-gray-700">Last Decision</th>
               <th className="text-left py-2 px-3 font-medium text-gray-700">Last Job</th>
-              <SortHeader field="createdAt">Created</SortHeader>
-              <SortHeader field="updatedAt">Updated</SortHeader>
+              <SortHeader field="createdAt" sortField={sortField} sortDirection={sortDirection} onSort={handleSort}>Created</SortHeader>
+              <SortHeader field="updatedAt" sortField={sortField} sortDirection={sortDirection} onSort={handleSort}>Updated</SortHeader>
             </tr>
           </thead>
           <tbody>