From fcfac33230627d52b5824e427c6bb2e1b999e6cf Mon Sep 17 00:00:00 2001
From: Francisco Pessano <76450203+FranP-code@users.noreply.github.com>
Date: Sun, 13 Jul 2025 21:25:16 -0300
Subject: [PATCH] Updated ProjectCard.tsx

---
 astro-app/src/components/ProjectCard.tsx   | 38 ++++++++++++----------
 astro-app/src/components/ProjectsTable.tsx | 26 +++++++++++++++
 astro-app/src/components/ProjectsView.tsx  |  6 ++--
 3 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/astro-app/src/components/ProjectCard.tsx b/astro-app/src/components/ProjectCard.tsx
index dbd9abd..211a56f 100644
--- a/astro-app/src/components/ProjectCard.tsx
+++ b/astro-app/src/components/ProjectCard.tsx
@@ -34,7 +34,8 @@ export function ProjectCard({ project, onSeenStatusChange }: ProjectCardProps) {
   return (
     <div className={`bg-card rounded-lg border p-6 space-y-4 hover:shadow-lg transition-all ${seen ? 'opacity-75 bg-muted/50' : ''}`}>
       {/* Author Info */}
-      <div className="flex items-center space-x-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-3">
         <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold">
           {project.author_name.charAt(0).toUpperCase()}
         </div>
@@ -42,9 +43,28 @@ export function ProjectCard({ project, onSeenStatusChange }: ProjectCardProps) {
           <p className="font-semibold text-foreground">{project.author_name}</p>
           <p className="text-sm text-muted-foreground">@{project.author_screen_name}</p>
         </div>
+        </div>
+        <div className="flex items-center space-x-2">
         <div className="ml-auto text-xs text-muted-foreground">
           {formattedDate}
         </div>
+          {/* Seen Checkbox */}
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id={`seen-${project.id}`}
+              className="w-4 h-4 rounded border-border bg-background"
+              checked={seen}
+              onChange={toggleSeen}
+            />
+            <label 
+              htmlFor={`seen-${project.id}`}
+              className="text-sm text-muted-foreground cursor-pointer"
+            >
+              Seen
+            </label>
+          </div>
+        </div>
       </div>
 
       {/* Project Media */}
@@ -97,22 +117,6 @@ export function ProjectCard({ project, onSeenStatusChange }: ProjectCardProps) {
         
         </div>
         
-        {/* Seen Checkbox */}
-        <div className="flex items-center space-x-2">
-          <input
-            type="checkbox"
-            id={`seen-${project.id}`}
-            className="w-4 h-4 rounded border-border bg-background"
-            checked={seen}
-            onChange={toggleSeen}
-          />
-          <label 
-            htmlFor={`seen-${project.id}`}
-            className="text-sm text-muted-foreground cursor-pointer"
-          >
-            Seen
-          </label>
-        </div>
       </div>
 
       {/* Engagement Stats */}
diff --git a/astro-app/src/components/ProjectsTable.tsx b/astro-app/src/components/ProjectsTable.tsx
index 23a3b8a..6ee9c87 100644
--- a/astro-app/src/components/ProjectsTable.tsx
+++ b/astro-app/src/components/ProjectsTable.tsx
@@ -228,6 +228,32 @@ export function ProjectsTable({ projects, title, showUrlColumn = true, onSeenSta
         </div>
       ),
       size: 120,
+    }),
+    columnHelper.accessor('category', {
+      header: ({ column }) => (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="h-auto p-0 font-semibold hover:bg-transparent justify-start w-full"
+        >
+          Category
+          {column.getIsSorted() === 'asc' ? (
+            <ArrowUp className="ml-2 h-4 w-4" />
+          ) : column.getIsSorted() === 'desc' ? (
+            <ArrowDown className="ml-2 h-4 w-4" />
+          ) : (
+            <ArrowUpDown className="ml-2 h-4 w-4" />
+          )}
+        </Button>
+      ),
+      cell: ({ row }) => (
+        <div className="w-full">
+          <span className="inline-block px-2 py-1 text-xs font-medium bg-secondary text-secondary-foreground rounded-full">
+            {row.original.category || 'Uncategorized'}
+          </span>
+        </div>
+      ),
+      size: 120,
     })
   ], [showUrlColumn, seenProjects]);
 
diff --git a/astro-app/src/components/ProjectsView.tsx b/astro-app/src/components/ProjectsView.tsx
index 48c116b..fe894e7 100644
--- a/astro-app/src/components/ProjectsView.tsx
+++ b/astro-app/src/components/ProjectsView.tsx
@@ -109,7 +109,7 @@ export function ProjectsView({ projects }: ProjectsViewProps) {
         </div>
 
         {/* Content */}
-        <Tabs defaultValue="unseen-with-urls" className="space-y-6">
+        <Tabs defaultValue="with-urls" className="space-y-6">
           <TabsList className="grid w-full grid-cols-4">
             <TabsTrigger value="with-urls">
               Unseen w/ URLs ({unseenWithUrls.length})
@@ -125,7 +125,7 @@ export function ProjectsView({ projects }: ProjectsViewProps) {
             </TabsTrigger>
           </TabsList>
 
-          <TabsContent value="unseen-with-urls" className="space-y-6">
+          <TabsContent value="with-urls" className="space-y-6">
             {viewMode === 'table' ? (
               <ProjectsTable
                 projects={unseenWithUrls}
@@ -142,7 +142,7 @@ export function ProjectsView({ projects }: ProjectsViewProps) {
             )}
           </TabsContent>
 
-          <TabsContent value="unseen-without-urls" className="space-y-6">
+          <TabsContent value="without-urls" className="space-y-6">
             {viewMode === 'table' ? (
               <ProjectsTable
                 projects={unseenWithoutUrls}