added tags and filters like webpage

package.json

@@ -282,4 +282,4 @@
     ],
     "logLevel": "quiet"
   }
-}
+}

src/renderer/App.tsx

@@ -16,7 +16,7 @@ import Faucet from './pages/Faucet';
 import { CONFIG } from './config';
 import { RunnerContextProvider } from './context/runnerContext';
 import { useEffect, useState } from 'react';
-import { web3AuthInstance } from './Web3AuthInstance'
+import { web3AuthInstance } from './Web3AuthInstance';
 
 export default function App() {
   const flockTheme = {

src/renderer/components/Layout.tsx

@@ -3,11 +3,20 @@ import React from 'react';
 import Sidebar from './Sidebar';
 import Header from './Header';
 
-function Layout({ children }: { children: React.ReactNode }) {
+interface FilterTagProps {
+  filter: string[];
+  filterAction: (item: string) => void;
+}
+
+function Layout({
+  children,
+  filter,
+  filterAction,
+}: FilterTagProps & { children: React.ReactNode }) {
   return (
     <Box background="#F8FAFB" direction="row" height="100vh" overflow="hidden">
       <Box pad="small" width="medium">
-        <Sidebar />
+        <Sidebar filter={filter} filterAction={filterAction} />
       </Box>
       <Box pad="medium" width="100%" height="100%">
         <Header />

src/renderer/components/Sidebar.tsx

@@ -1,9 +1,29 @@
-import { Box, Button, Sidebar as GrommetSidebar, Image, Nav, Text } from 'grommet';
-import { Home, Money, Tools } from 'grommet-icons';
+import {
+  Box,
+  Button,
+  Sidebar as GrommetSidebar,
+  Image,
+  Nav,
+  Text,
+} from 'grommet';
+import { Home, Money, Tools, Scorecard, Chat, CreditCard } from 'grommet-icons';
 import { useNavigate, useLocation } from 'react-router-dom';
+import { Heading } from 'grommet';
 import logo from './logo.png';
 
-function Sidebar() {
+interface FilterTagProps {
+  filter: string[];
+  filterAction: (item: string) => void;
+}
+
+const cardColors = {
+  'Large Language Model Finetuning': '#A4C0FF',
+  NLP: '#E69FBD',
+  'Time series prediction': '#D9D9D9',
+  Classification: '#BDD4DA',
+};
+
+function Sidebar({ filter, filterAction }: FilterTagProps) {
   const navigate = useNavigate();
   const location = useLocation();
   const { pathname } = location;
@@ -22,9 +42,11 @@ function Sidebar() {
       align="center"
       justify="center"
     >
-      <Nav gap="medium" align="start">
+      <Nav gap="medium" align="start" margin={{ bottom: 'medium' }}>
         <Button
-          onClick={() => navigate('/')}
+          onClick={() => {
+            navigate('/');
+          }}
           primary={pathname === '/'}
           label="Dashboard"
           icon={<Home size="medium" />}
@@ -35,7 +57,9 @@ function Sidebar() {
           justify="start"
         />
         <Button
-          onClick={() => navigate('/train')}
+          onClick={() => {
+            navigate('/train');
+          }}
           primary={pathname === '/train'}
           label="Train"
           icon={<Tools size="medium" />}
@@ -46,7 +70,9 @@ function Sidebar() {
           justify="start"
         />
         <Button
-          onClick={() => navigate('/faucet')}
+          onClick={() => {
+            navigate('/faucet');
+          }}
           primary={pathname === '/faucet'}
           label="Faucet"
           icon={<Money size="medium" />}
@@ -57,6 +83,98 @@ function Sidebar() {
           justify="start"
         />
       </Nav>
+
+      {pathname === '/train' && (
+        <Box overflow="auto">
+          <Box gap="small" border="top">
+            <Heading level="3">NLP</Heading>
+            <Box
+              border={{ color: 'black', size: 'small' }}
+              round="small"
+              pad="xsmall"
+              background={filter.includes('NLP') ? cardColors['NLP'] : ''}
+              direction="row"
+              gap="small"
+              align="center"
+              onClick={() => {
+                filterAction('NLP');
+              }}
+            >
+              <Scorecard color="black" size="20px" />
+              <Text weight="bold">NLP</Text>
+            </Box>
+            <Box
+              border={{ color: 'black', size: 'small' }}
+              round="small"
+              pad="xsmall"
+              background={
+                filter.includes('Large Language Model Finetuning')
+                  ? cardColors['Large Language Model Finetuning']
+                  : ''
+              }
+              direction="row"
+              gap="small"
+              align="center"
+              onClick={() => filterAction('Large Language Model Finetuning')}
+            >
+              <Chat color="black" size="20px" />
+              <Text weight="bold">LLM Finetuning</Text>
+            </Box>
+          </Box>
+          <Box gap="small">
+            <Heading level="3">Finance</Heading>
+            <Box
+              border={{ color: 'black', size: 'small' }}
+              round="small"
+              pad="xsmall"
+              direction="row"
+              gap="small"
+              align="center"
+              onClick={() => filterAction('Credit Card Fraud Detection')}
+            >
+              <CreditCard color="black" size="20px" />
+              <Text weight="bold">Credit Card Fraud Detection</Text>
+            </Box>
+            <Box
+              border={{ color: 'black', size: 'small' }}
+              round="small"
+              pad="xsmall"
+              background={
+                filter.includes('Time series prediction')
+                  ? cardColors['Time series prediction']
+                  : ''
+              }
+              direction="row"
+              gap="small"
+              align="center"
+              onClick={() => filterAction('Time series prediction')}
+            >
+              <CreditCard color="black" size="20px" />
+              <Text weight="bold">Time series prediction</Text>
+            </Box>
+          </Box>
+          <Box gap="small">
+            <Heading level="3">Computer Vision</Heading>
+            <Box
+              border={{ color: 'black', size: 'small' }}
+              round="small"
+              pad="xsmall"
+              background={
+                filter.includes('Classification')
+                  ? cardColors['Classification']
+                  : ''
+              }
+              direction="row"
+              gap="small"
+              align="center"
+              onClick={() => filterAction('Classification')}
+            >
+              <Image color="black" sizes="20px" />
+              <Text weight="bold">Classification</Text>
+            </Box>
+          </Box>
+        </Box>
+      )}
     </GrommetSidebar>
   );
 }

src/renderer/components/Tasks.tsx

@@ -35,25 +35,29 @@ const cardColors: CardColors = {
     cardColor: '#A4C0FF',
     cardIcon: <Chat color="black" size="20px" />,
   },
-  'NLP': {
+  NLP: {
     cardColor: '#E69FBD',
     cardIcon: <Scorecard color="black" size="20px" />,
   },
   'Time series prediction': {
     cardColor: '#D9D9D9',
     cardIcon: <CreditCard color="black" size="20px" />,
   },
-  'Classification': {
+  Classification: {
     cardColor: '#BDD4DA',
     cardIcon: <Image color="black" size="20px" />,
   },
-  'Finance': {
+  Finance: {
     cardColor: '#A4C0FF',
     cardIcon: <CreditCard color="black" size="20px" />,
   },
 };
 
-function Tasks() {
+interface TasksProps {
+  sidebarFilters: string[];
+}
+
+function Tasks({ sidebarFilters }: TasksProps) {
   const { address } = useAccount();
   const [tasks, setTasks] = useState<TaskType[]>([] as TaskType[]);
   const [showCreateTask, setShowCreateTask] = useState(false);
@@ -201,12 +205,24 @@ function Tasks() {
             gap="small"
           >
             {tasks
-              ?.filter(
-                (task) =>
+              ?.filter((task) => {
+                const filterModeMatch =
                   filterMode === 'all' ||
                   (filterMode === 'completed' && task.isTrainingCompleted) ||
-                  (filterMode === 'active' && !task.isTrainingCompleted)
-              )
+                  (filterMode === 'active' && !task.isTrainingCompleted);
+
+                if (sidebarFilters.length > 0) {
+                  // Check if the task's taskType is included in sidebarFilters
+                  const sidebarFilterMatch = sidebarFilters.includes(
+                    task.taskType
+                  );
+
+                  // Return true if the task matches either the filter mode or sidebarFilters
+                  return filterModeMatch && sidebarFilterMatch;
+                }
+                // If sidebarFilters is empty, only filter by filterMode
+                return filterModeMatch;
+              })
               .map((task: TaskType) => {
                 return (
                   <Box

src/renderer/pages/Train.tsx

@@ -1,10 +1,21 @@
+import { useState } from 'react';
 import Layout from 'renderer/components/Layout';
 import Tasks from 'renderer/components/Tasks';
 
 function Train() {
+  const [filter, setFilter] = useState<string[]>([]);
+
+  const filterAction = (item: string) => {
+    if (filter.find((f) => f === item)) {
+      setFilter(filter.filter((f) => f !== item));
+    } else {
+      setFilter([...filter, item]);
+    }
+  };
+
   return (
-    <Layout>
-      <Tasks />
+    <Layout filter={filter} filterAction={filterAction}>
+      <Tasks sidebarFilters={filter} />
     </Layout>
   );
 }