From f569c6d12b21c6a080313f0eb5ca97f9d691bc4e Mon Sep 17 00:00:00 2001
From: notmd <tinhmeo10@gmail.com>
Date: Tue, 31 Jan 2023 22:00:14 +0700
Subject: [PATCH 1/3] Display number of available tasks

---
 website/public/locales/en/tasks.json          |  3 +-
 .../src/components/Dashboard/TaskOption.tsx   | 62 ++++++++++++-------
 website/src/pages/dashboard.tsx               |  2 +-
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/website/public/locales/en/tasks.json b/website/public/locales/en/tasks.json
index 53cfa088..7fa7c452 100644
--- a/website/public/locales/en/tasks.json
+++ b/website/public/locales/en/tasks.json
@@ -77,5 +77,6 @@
     "label": "Classify Assistant Reply",
     "desc": "Provide labels for a prompt.",
     "overview": "Read the following conversation and then answer the question about the last reply in the discussion."
-  }
+  },
+  "available_task_count": "{{count}} tasks available"
 }
diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx
index 0401fd97..87910695 100644
--- a/website/src/components/Dashboard/TaskOption.tsx
+++ b/website/src/components/Dashboard/TaskOption.tsx
@@ -1,5 +1,7 @@
 import {
+  Badge,
   Box,
+  Card,
   Flex,
   GridItem,
   Heading,
@@ -8,7 +10,6 @@ import {
   SimpleGrid,
   Spacer,
   Text,
-  useColorModeValue,
 } from "@chakra-ui/react";
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
@@ -20,18 +21,17 @@ import { TaskCategory, TaskInfo, TaskType } from "src/types/Task";
 import { TaskCategoryLabels, TaskInfos } from "../Tasks/TaskTypes";
 
 export interface TasksOptionProps {
-  content: Partial<Record<TaskCategory, TaskType[]>>;
+  content: Partial<Record<TaskCategory, Array<{ taskType: TaskType; count: number }>>>;
 }
 
 export const TaskOption = ({ content }: TasksOptionProps) => {
   const { t } = useTranslation(["dashboard", "tasks"]);
-  const backgroundColor = useColorModeValue("white", "gray.700");
 
   const taskInfoMap = useMemo(
     () =>
       Object.values(content)
         .flat()
-        .reduce((obj, taskType) => {
+        .reduce((obj, { taskType }) => {
           obj[taskType] = TaskInfos.filter((t) => t.type === taskType).pop();
           return obj;
         }, {} as Record<TaskType, TaskInfo>),
@@ -53,23 +53,35 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
           </Flex>
           <SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
             {taskTypes
-              .map((taskType) => taskInfoMap[taskType])
+              .map(({ taskType, count }) => ({ ...taskInfoMap[taskType], count }))
               .map((item) => (
                 <Link key={category + item.id} href={item.pathname}>
-                  <GridItem
-                    bg={backgroundColor}
-                    borderRadius="xl"
-                    boxShadow="base"
-                    className="flex flex-col justify-between h-full"
-                  >
-                    <Flex className="p-6 pb-10" flexDir="column" gap="3">
-                      <Heading size="md">{t(getTypeSafei18nKey(`tasks:${item.id}.label`))}</Heading>
-                      <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
+                  <GridItem as={Card} height="100%" justifyContent="space-between">
+                    <Flex px="6" pt="6" flexDir="column" gap="3" justifyContent="space-between" height="100%">
+                      <Flex flexDir="column" gap="3">
+                        <Heading size="md">{t(getTypeSafei18nKey(`tasks:${item.id}.label`))}</Heading>
+                        <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
+                      </Flex>
+                      <Box>
+                        <Badge
+                          colorScheme="blue"
+                          flexGrow={0}
+                          rounded="lg"
+                          px={2}
+                          py={0.5}
+                          variant="solid"
+                          textTransform="none"
+                          fontWeight="600"
+                        >
+                          {t("tasks:available_task_count", { count: item.count })}
+                        </Badge>
+                      </Box>
                     </Flex>
                     <Text
                       fontWeight="bold"
                       color="white"
                       borderBottomRadius="xl"
+                      mt="6"
                       className="px-6 py-2 transition-colors duration-300 bg-blue-500 hover:bg-blue-600"
                     >
                       {t("go")} -&gt;
@@ -85,12 +97,20 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
 };
 
 export const allTaskOptions: TasksOptionProps["content"] = {
-  [TaskCategory.Random]: [TaskType.random],
-  [TaskCategory.Create]: [TaskType.initial_prompt, TaskType.prompter_reply, TaskType.assistant_reply],
-  [TaskCategory.Evaluate]: [
-    TaskType.rank_initial_prompts,
-    TaskType.rank_prompter_replies,
-    TaskType.rank_assistant_replies,
+  [TaskCategory.Random]: [{ taskType: TaskType.random, count: 0 }],
+  [TaskCategory.Create]: [
+    { taskType: TaskType.initial_prompt, count: 0 },
+    { taskType: TaskType.prompter_reply, count: 0 },
+    { taskType: TaskType.assistant_reply, count: 0 },
+  ],
+  [TaskCategory.Evaluate]: [
+    { taskType: TaskType.rank_initial_prompts, count: 0 },
+    { taskType: TaskType.rank_prompter_replies, count: 0 },
+    { taskType: TaskType.rank_assistant_replies, count: 0 },
+  ],
+  [TaskCategory.Label]: [
+    { taskType: TaskType.label_initial_prompt, count: 0 },
+    { taskType: TaskType.label_prompter_reply, count: 0 },
+    { taskType: TaskType.label_assistant_reply, count: 0 },
   ],
-  [TaskCategory.Label]: [TaskType.label_initial_prompt, TaskType.label_prompter_reply, TaskType.label_assistant_reply],
 };
diff --git a/website/src/pages/dashboard.tsx b/website/src/pages/dashboard.tsx
index 23fcec06..94c25e57 100644
--- a/website/src/pages/dashboard.tsx
+++ b/website/src/pages/dashboard.tsx
@@ -59,4 +59,4 @@ const filterAvailableTasks = (availableTasks: Partial<AvailableTasks>) =>
   Object.entries(availableTasks)
     .filter(([, count]) => count > 0)
     .sort((a, b) => b[1] - a[1])
-    .map(([taskType]) => taskType) as TaskType[];
+    .map(([taskType, count]) => ({ taskType, count })) as Array<{ taskType: TaskType; count: number }>;

From c8cd869594788a9cb4e64cf3fa3ca624e751f572 Mon Sep 17 00:00:00 2001
From: notmd <tinhmeo10@gmail.com>
Date: Wed, 1 Feb 2023 14:34:47 +0700
Subject: [PATCH 2/3] extract type

---
 website/src/components/Dashboard/TaskOption.tsx | 8 +++++---
 website/src/pages/dashboard.tsx                 | 5 +++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx
index 87910695..1ee0489b 100644
--- a/website/src/components/Dashboard/TaskOption.tsx
+++ b/website/src/components/Dashboard/TaskOption.tsx
@@ -20,8 +20,10 @@ import { TaskCategory, TaskInfo, TaskType } from "src/types/Task";
 
 import { TaskCategoryLabels, TaskInfos } from "../Tasks/TaskTypes";
 
+export type TaskCategoryItem = { taskType: TaskType; count: number };
+
 export interface TasksOptionProps {
-  content: Partial<Record<TaskCategory, Array<{ taskType: TaskType; count: number }>>>;
+  content: Partial<Record<TaskCategory, TaskCategoryItem[]>>;
 }
 
 export const TaskOption = ({ content }: TasksOptionProps) => {
@@ -40,7 +42,7 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
 
   return (
     <Box className="flex flex-col gap-14">
-      {Object.entries(content).map(([category, taskTypes]) => (
+      {Object.entries(content).map(([category, items]) => (
         <div key={category}>
           <Flex>
             <Heading size="lg" className="pb-4">
@@ -52,7 +54,7 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
             </ExternalLink>
           </Flex>
           <SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
-            {taskTypes
+            {items
               .map(({ taskType, count }) => ({ ...taskInfoMap[taskType], count }))
               .map((item) => (
                 <Link key={category + item.id} href={item.pathname}>
diff --git a/website/src/pages/dashboard.tsx b/website/src/pages/dashboard.tsx
index 94c25e57..e9fe3a18 100644
--- a/website/src/pages/dashboard.tsx
+++ b/website/src/pages/dashboard.tsx
@@ -5,8 +5,9 @@ import { useEffect, useMemo, useState } from "react";
 import { LeaderboardWidget, TaskOption, WelcomeCard } from "src/components/Dashboard";
 import { getDashboardLayout } from "src/components/Layout";
 import { get } from "src/lib/api";
-import { AvailableTasks, TaskCategory, TaskType } from "src/types/Task";
+import { AvailableTasks, TaskCategory } from "src/types/Task";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+import { TaskCategoryItem } from "src/components/Dashboard/TaskOption";
 import useSWR from "swr";
 
 const Dashboard = () => {
@@ -59,4 +60,4 @@ const filterAvailableTasks = (availableTasks: Partial<AvailableTasks>) =>
   Object.entries(availableTasks)
     .filter(([, count]) => count > 0)
     .sort((a, b) => b[1] - a[1])
-    .map(([taskType, count]) => ({ taskType, count })) as Array<{ taskType: TaskType; count: number }>;
+    .map(([taskType, count]) => ({ taskType, count })) as TaskCategoryItem[];

From 36e55c9bf4da5afc94b3fff27949ae3f7a33a491 Mon Sep 17 00:00:00 2001
From: notmd <tinhmeo10@gmail.com>
Date: Wed, 1 Feb 2023 14:53:28 +0700
Subject: [PATCH 3/3] extract to theme

---
 website/src/components/Dashboard/TaskOption.tsx | 13 +------------
 website/src/styles/Theme/components/Badge.ts    | 14 ++++++++++++++
 website/src/styles/Theme/index.ts               |  2 ++
 3 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 website/src/styles/Theme/components/Badge.ts

diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx
index 1ee0489b..55236b93 100644
--- a/website/src/components/Dashboard/TaskOption.tsx
+++ b/website/src/components/Dashboard/TaskOption.tsx
@@ -65,18 +65,7 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
                         <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
                       </Flex>
                       <Box>
-                        <Badge
-                          colorScheme="blue"
-                          flexGrow={0}
-                          rounded="lg"
-                          px={2}
-                          py={0.5}
-                          variant="solid"
-                          textTransform="none"
-                          fontWeight="600"
-                        >
-                          {t("tasks:available_task_count", { count: item.count })}
-                        </Badge>
+                        <Badge textTransform="none">{t("tasks:available_task_count", { count: item.count })}</Badge>
                       </Box>
                     </Flex>
                     <Text
diff --git a/website/src/styles/Theme/components/Badge.ts b/website/src/styles/Theme/components/Badge.ts
new file mode 100644
index 00000000..b67c1f3e
--- /dev/null
+++ b/website/src/styles/Theme/components/Badge.ts
@@ -0,0 +1,14 @@
+import { defineStyleConfig } from "@chakra-ui/react";
+
+export const badgeTheme = defineStyleConfig({
+  baseStyle: {
+    borderRadius: "lg",
+    px: 2,
+    py: 0.5,
+    fontWeight: "600",
+  },
+  defaultProps: {
+    variant: "solid",
+    colorScheme: "blue",
+  },
+});
diff --git a/website/src/styles/Theme/index.ts b/website/src/styles/Theme/index.ts
index 37ca424d..91d54088 100644
--- a/website/src/styles/Theme/index.ts
+++ b/website/src/styles/Theme/index.ts
@@ -2,6 +2,7 @@ import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
 import { Styles } from "@chakra-ui/theme-tools";
 
 import { colors } from "./colors";
+import { badgeTheme } from "./components/Badge";
 import { cardTheme } from "./components/Card";
 import { containerTheme } from "./components/Container";
 
@@ -12,6 +13,7 @@ const config: ThemeConfig = {
 };
 
 const components = {
+  Badge: badgeTheme,
   Container: containerTheme,
   Card: cardTheme,
 };