feat: class list in project viewer (#29)

<img width="1904" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/5669963/ed78e0f0-1bed-4480-aa0d-1d40a3b4d9b2">

app/project/[projectId]/page.tsx

@@ -1,6 +1,7 @@
 import MediaGrid from '@/components/project/MediaGrid';
-import { fetchProjectMedia } from '@/lib/fetch';
+import { fetchProjectClass, fetchProjectMedia } from '@/lib/fetch';
 import ProjectChat from '@/components/project/ProjectChat';
+import ClassBar from '@/components/project/ClassBar';
 
 interface PageProps {
   params: {
@@ -11,12 +12,16 @@ interface PageProps {
 export default async function Page({ params }: PageProps) {
   const { projectId } = params;
 
-  const mediaList = await fetchProjectMedia({ projectId: Number(projectId) });
+  const [mediaList, classList] = await Promise.all([
+    fetchProjectMedia({ projectId: Number(projectId) }),
+    fetchProjectClass({ projectId: Number(projectId) }),
+  ]);
 
   return (
     <div className="pt-4 md:pt-10 h-full">
       <div className="flex h-full">
         <div className="w-1/2 relative border-r border-gray-300 overflow-auto">
+          <ClassBar classList={classList} />
           <MediaGrid mediaList={mediaList} />
         </div>
         <div className="w-1/2 relative overflow-auto">

components/project/ClassBar.tsx

@@ -0,0 +1,22 @@
+import { ClassDetails } from '@/lib/fetch';
+import Chip from '../ui/Chip';
+
+export interface ClassBarProps {
+  classList: ClassDetails[];
+}
+
+export default async function ClassBar({ classList }: ClassBarProps) {
+  return (
+    <div className="border-b border-gray-300 px-3 pb-3 max-w-3xl mx-auto">
+      {classList.map(classItem => {
+        return (
+          <Chip
+            key={classItem.id}
+            value={classItem.name}
+            className="px-3 py-1 my-1"
+          />
+        );
+      })}
+    </div>
+  );
+}

components/project/MediaGrid.tsx

@@ -7,8 +7,8 @@ export default function MediaGrid({
   mediaList: MediaDetails[];
 }) {
   return (
-    <div className="relative size-full p-6 max-w-3xl mx-auto">
-      <div className="columns-1 sm:columns-1 md:columns-2 lg:columns-2 xl:columns:3 gap-4 [&>img:not(:first-child)]:mt-4">
+    <div className="relative size-full p-3 max-w-3xl mx-auto">
+      <div className="columns-1 sm:columns-1 md:columns-2 lg:columns-2 xl:columns:3 gap-3 [&>img:not(:first-child)]:mt-3">
         {mediaList.map(media => (
           <MediaTile key={media.id} media={media} />
         ))}

components/ui/Chip.tsx

@@ -7,14 +7,17 @@ export interface ChipProps {
   className?: string;
 }
 
-const Chip: React.FC<ChipProps> = ({ label, value, className, color }) => {
+const Chip: React.FC<ChipProps> = ({
+  label,
+  value,
+  className,
+  color = 'gray',
+}) => {
   return (
     <div
       className={cn(
-        `inline-flex items-center px-1.5 rounded-full text-xs bg-gray-100 text-gray-500 mr-2`,
-        color === 'blue' && 'bg-blue-100 text-blue-500',
-        color === 'yellow' && 'bg-yellow-100 text-yellow-500',
-        color === 'purple' && 'bg-purple-100 text-purple-500',
+        'inline-flex items-center px-1.5 rounded-full text-xs mr-2',
+        `bg-${color}-100 text-${color}-500`,
         className,
       )}
     >

lib/fetch/index.ts

@@ -121,3 +121,23 @@ export const fetchProjectMedia = clefApiBuilder<
   { projectId: number },
   MediaDetails[]
 >('api/admin/vision-agent/project/media');
+
+export type ClassDetails = {
+  id: number;
+  name: string;
+  descriptionText?: string | null;
+  orgId: number;
+  projectId: number;
+  createdAt: string;
+  updatedAt: string | null;
+  color?: string | null;
+};
+
+/**
+ * Fetch all active classes of a given project
+ * @author https://github.com/landing-ai/landing-platform/blob/mingrui-04-08-meaningful-project/packages/server-clef/src/main_app/controllers/admin/get_admin_meaningful_project_controller.ts
+ */
+export const fetchProjectClass = clefApiBuilder<
+  { projectId: number },
+  ClassDetails[]
+>('api/admin/vision-agent/project/class');