feat: track task scope status and version

react/src/main.tsx

@@ -1775,7 +1775,27 @@ function NeovimPanel({
   );
 }
 
+function ScopeTableCell({ column, row }: { column: string; row: any }) {
+  if (column === "chapter" || column === "task" || column === "version") {
+    return <td><code>{row[column]}</code></td>;
+  }
+  if (column === "idea") {
+    return <td dangerouslySetInnerHTML={{ __html: row.idea_html }} />;
+  }
+  if (column === "status") {
+    return (
+      <td>
+        <span className="scope-status" data-status={row.status} title={row.status}>
+          {row.status_label}
+        </span>
+      </td>
+    );
+  }
+  return <td>{row[column]}</td>;
+}
+
 function FrontPage({ front }: { front: any }) {
+  const scopeColumns: string[] = front.scope_columns ?? ["chapter", "task", "idea", "priority"];
   return (
     <Sheet
       header={front.header_html}
@@ -1805,14 +1825,9 @@ function FrontPage({ front }: { front: any }) {
                   key={`${row.chapter}-${row.task}`}
                   className={row.key ? "scope-row--key" : ""}
                 >
-                  <td>
-                    <code>{row.chapter}</code>
-                  </td>
-                  <td>
-                    <code>{row.task}</code>
-                  </td>
-                  <td dangerouslySetInnerHTML={{ __html: row.idea_html }} />
-                  <td>{row.priority}</td>
+                  {scopeColumns.map(column => (
+                    <ScopeTableCell key={column} column={column} row={row} />
+                  ))}
                 </tr>
               ))}
             </tbody>