[CRT-186] Update Task Bank Design

[bubudetp]

You can find below a screenshot of the updated UI:

---

Summary by cubic

Updated the Task Bank UI with icon-based breadcrumbs and a Chakra-powered table to make browsing tasks simpler and faster. Aligns with CRT-186 by not showing associated lessons on the Task Bank screen.

• New Features

  • Breadcrumbs with home and chevron icons; cleaner spacing.
  • Tabs now show icons (Home, Users, Classes, Tasks).
  • Task table rebuilt: ID, Title, Task Type columns; quick actions for details and delete.
  • “Create Task” button added and moved below the table.
  • Title filtering supported; global search bar hidden on this page.

• Refactors

  • Replaced Primereact DataTable with ChakraDataTable.
  • Added capitalizeString utility for Task Type display.
  • BreadcrumbItem renders icons only when provided; improved layout styles.

^{Written for commit 6237d23. Summary will update automatically on new commits.}

[cubic-dev-ai]

3 issues found across 10 files

Prompt for AI agents (all 3 issues)

Understand the root cause of the following 3 issues and fix them.


<file name="frontend/src/components/Breadcrumbs.tsx">

<violation number="1" location="frontend/src/components/Breadcrumbs.tsx:34">
Wrapping the breadcrumb items in `HStack` introduces a `&lt;div&gt;` directly under the `&lt;ol&gt;` produced by `Breadcrumb.List`, so the `&lt;li&gt;` elements from `BreadcrumbItem` are no longer valid list children. Please remove this wrapper or restyle the list without inserting non-`li` nodes between the list and its items.</violation>
</file>

<file name="frontend/src/components/task/TaskTable.tsx">

<violation number="1" location="frontend/src/components/task/TaskTable.tsx:38">
Quick action controls are rendered with a styled Icon (svg) instead of a button, so they lack keyboard focus/activation semantics and regress accessibility.</violation>

<violation number="2" location="frontend/src/components/task/TaskTable.tsx:103">
Name column uses accessorKey &quot;name&quot; even though ExistingTask only exposes title, so sorting/filtering see undefined values and stop working.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[cubic-dev-ai]

Wrapping the breadcrumb items in HStack introduces a <div> directly under the <ol> produced by Breadcrumb.List, so the <li> elements from BreadcrumbItem are no longer valid list children. Please remove this wrapper or restyle the list without inserting non-li nodes between the list and its items.

Prompt for AI agents

Address the following comment on frontend/src/components/Breadcrumbs.tsx at line 34:

<comment>Wrapping the breadcrumb items in `HStack` introduces a `&lt;div&gt;` directly under the `&lt;ol&gt;` produced by `Breadcrumb.List`, so the `&lt;li&gt;` elements from `BreadcrumbItem` are no longer valid list children. Please remove this wrapper or restyle the list without inserting non-`li` nodes between the list and its items.</comment>

<file context>
@@ -1,51 +1,54 @@
-          &lt;/Fragment&gt;
-        );
-      })}
+      &lt;StyledHStack&gt;
+        &lt;BreadcrumbItem href=&quot;/&quot;&gt;
+          &lt;Icon as={LuHouse} /&gt;
</file context>

[cubic-dev-ai]

Quick action controls are rendered with a styled Icon (svg) instead of a button, so they lack keyboard focus/activation semantics and regress accessibility.

Prompt for AI agents

Address the following comment on frontend/src/components/task/TaskTable.tsx at line 38:

<comment>Quick action controls are rendered with a styled Icon (svg) instead of a button, so they lack keyboard focus/activation semantics and regress accessibility.</comment>

<file context>
@@ -1,46 +1,64 @@
+  }
+`;
+
+const StyledIconButton = styled(Icon)`
+  background-color: var(--icon-button-background-color);
+  cursor: pointer;
</file context>

[cubic-dev-ai]

Name column uses accessorKey "name" even though ExistingTask only exposes title, so sorting/filtering see undefined values and stop working.

Prompt for AI agents

Address the following comment on frontend/src/components/task/TaskTable.tsx at line 103:

<comment>Name column uses accessorKey &quot;name&quot; even though ExistingTask only exposes title, so sorting/filtering see undefined values and stop working.</comment>

<file context>
@@ -56,147 +74,128 @@ const messages = defineMessages({
+      },
+    },
+    {
+      accessorKey: &quot;name&quot;,
+      header: intl.formatMessage(messages.nameColumn),
+      cell: (info) =&gt; (
</file context>

Suggested change

	accessorKey: "name",
	accessorKey: "title",